/*
 * Rules for the /ndis-plan-management-panel/ pages only. The look (type, bands, buttons, Q&A, fact boxes, header, footer)
 * comes from the site's theme.css; this file adds what only these pages need. Every colour is a token (var(--...)).
 * The one idea on the page: the NDIA's timeline as a road that draws itself once, with today's stop marked.
 */

/* ---------- hero ---------- */
.pp-hero { padding-block: clamp(40px, 6vw, 88px) clamp(32px, 5vw, 64px); }
.pp-hero .display { font-size: clamp(34px, 7.6vw, 64px); max-width: 16em; }
.pp-hero .lede { max-width: 36em; }
.pp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 520px) { .pp-cta .btn { flex: 1 1 100%; } }
.pp-asat { margin-top: 22px; font-size: 15px; color: var(--ink-2); max-width: 46em; }
.src { white-space: nowrap; font-weight: 600; font-size: 0.9em; }

/* ---------- the road: vertical on phones, across the page from 900px ---------- */
.pp-road { list-style: none; margin: 32px 0 0; padding: 0; position: relative; display: grid; gap: 28px; }
.pp-road::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accent); transform-origin: top; }
.pp-stop { position: relative; padding-left: 44px; }
.pp-stop::before { content: ""; position: absolute; left: 2px; top: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--page); box-shadow: inset 0 0 0 3px var(--accent); }
.pp-stop.is-now::before { background: var(--accent); box-shadow: 0 0 0 6px var(--accent-mid); }
.pp-when { font-weight: 800; font-size: 15px; color: var(--accent-deep, var(--accent)); }
.pp-stop h3 { margin: 4px 0 6px; }
.pp-stop p { font-size: 15.5px; line-height: 1.5; }
.pp-here { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 14px; }
@media (min-width: 900px) {
  .pp-road { grid-template-columns: repeat(5, 1fr); gap: 0 24px; }
  .pp-road::before { left: 10px; right: 10px; top: 10px; bottom: auto; width: auto; height: 3px; transform-origin: left; }
  .pp-stop { padding: 44px 0 0; }
  .pp-stop::before { left: 0; top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pp-road::before { animation: pp-draw-y linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    @media (min-width: 900px) { .pp-road::before { animation-name: pp-draw-x; } }
  }
}
@keyframes pp-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pp-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- what it means ---------- */
.pp-means { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; max-width: 52em; border-top: 1px solid var(--line); }
.pp-means li { padding-block: 16px; border-bottom: 1px solid var(--line); }
.pp-means strong { display: block; font-size: 1.06em; margin-bottom: 2px; }
.fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 46em; }
.fact-list .fact-box { margin: 0; font-size: 15.5px; line-height: 1.5; }

/* ---------- general guidance label and bid areas ---------- */
.pp-label { margin-top: 6px; padding: 14px 18px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--accent); max-width: 46em; font-size: 15.5px; }
.pp-areas { margin: 28px 0 0; display: grid; gap: 0 48px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .pp-areas { grid-template-columns: 1fr 1fr; } }
.pp-areas > div { padding-block: 16px; border-bottom: 1px solid var(--line); }
.pp-areas dt { font-weight: 800; font-size: 17px; }
.pp-areas dd { margin: 4px 0 0; color: var(--ink-2); }

/* ---------- checklist ---------- */
.pp-check { margin-top: 24px; display: grid; gap: 28px; }
.pp-check-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; position: sticky; top: 0; z-index: 2; padding: 12px 0; background: var(--wash); border-bottom: 1px solid var(--line-2); }
.pp-check-bar[hidden] { display: none; }
.pp-count { font-weight: 800; font-size: 18px; }
.pp-check.is-done .pp-count { color: var(--accent-deep, var(--accent)); }
.pp-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.pp-group legend { padding: 0; margin-bottom: 10px; }
.pp-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 52em; }
.pp-ticks li { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; }
.pp-ticks input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.pp-ticks label { cursor: pointer; line-height: 1.45; padding: 0 4px; border-radius: 4px; background-image: linear-gradient(var(--accent-mid), var(--accent-mid)); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 250ms var(--ease); }
.pp-ticks input:checked + label { background-size: 100% 100%; }
.pp-ticks input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pp-ticks label { transition: none; } }

/* ---------- the tender list ---------- */
.pp-kit { display: grid; gap: 28px 64px; }
@media (min-width: 900px) { .pp-kit { grid-template-columns: 1fr 1fr; } }
.pp-gets { margin: 18px 0; padding-left: 20px; display: grid; gap: 8px; max-width: 34em; }
.waitlist .field, .waitlist .check { margin-top: 16px; }
.waitlist .field:first-child { margin-top: 0; }
.waitlist label { display: block; margin-bottom: 6px; font-size: 15.5px; font-weight: 700; }
.waitlist input[type="email"], .waitlist select { width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--page); color: var(--ink); font-size: 16px; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.waitlist input[type="email"]:focus-visible, .waitlist select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.waitlist .check { display: flex; align-items: flex-start; gap: 12px; }
.waitlist .check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
.waitlist .check label { margin: 0; font-weight: 400; font-size: 15px; line-height: 1.45; }
.waitlist .btn { width: 100%; margin-top: 20px; }
.status { min-height: 1.5em; margin-top: 12px; font-size: 15px; font-weight: 600; }
.status-ok { color: var(--accent-deep, var(--accent)); }
.status-error { color: var(--bad, var(--ink)); }
.status-info { color: var(--ink-2); }

/* ---------- related, small print, sources ---------- */
.pp-related p { max-width: 46em; }
.pp-small { padding-block: 36px; border-top: 1px solid var(--line); background: var(--wash); }
.pp-small p { max-width: 52em; font-size: 14.5px; color: var(--ink-2); }
.pp-small p + p { margin-top: 8px; }
.pp-small strong { color: var(--ink); }
.pp-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pp-prose { padding-bottom: 48px; }
.pp-prose h2 { margin-top: 32px; }
.pp-prose ul { padding-left: 22px; display: grid; gap: 8px; margin-top: 10px; max-width: 52em; }
.pp-prose p { max-width: 52em; margin-top: 10px; }
.sources { padding-left: 22px; display: grid; gap: 10px; max-width: 60em; }
.sources li { font-size: 15px; }
.sources code { font-size: 0.85em; word-break: break-all; }
.pp-ref { color: var(--ink-2); }

/* ---------- spacing helpers (no inline styles allowed) ---------- */
.pp-gap { margin-top: 14px; }
.pp-gap-lg { margin-top: 32px; }

/* ---------- printing the checklist ---------- */
@media print {
  .hdr, .ftr, .made, .skip, .pp-cta, .pp-check-bar, #kit, #faq, #policies, .pp-small { display: none !important; }
  .pp-road::before { animation: none; }
  .pp-ticks label { background: none; }
  .band, .band-wash { background: none; padding-block: 12px; }
}