/* Wayfinding (lane ux-next): one clear next step on every page. Loaded after coach.css.
   Stage hubs with the steps on the page, the "Not Sure Where To Start?" result, the next-stage card,
   the footer next step, the five-tab phone bar and the planning milestone line under a result. */

/* Stage hubs: Start Step 1 in the hero, then Start Here with the start guide and the numbered steps. */
.hub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-inline) var(--space-group);margin:var(--space-paragraph) 0 0}
.goal-hero .hub-actions .text-link{color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.hub-start .hub-steps{margin-bottom:var(--space-stack)}
.hub-start-guide{display:grid;gap:4px;max-width:760px;margin:0 0 var(--space-block);padding:var(--space-card);border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm)}
.hub-start-guide strong{font:800 1.1875rem/1.25 var(--font-head)}
.hub-start-guide .eyebrow{margin:0}
.hub-start-guide:hover{border-color:var(--brand)}
.hub-steps-lead{color:var(--muted);margin:0 0 var(--space-stack)}
.hub-more{margin:var(--space-stack) 0 0;font-weight:800}

/* Quiz result: the stage's next three steps. */
.quiz-steps{list-style:none;margin:0 0 var(--space-stack);padding:0;display:grid;gap:var(--space-tight)}
.quiz-steps a{display:grid;gap:2px;padding:10px 14px;border:2px solid currentColor;border-radius:14px;color:inherit;text-decoration:none;background:transparent}
.quiz-pick .text-link{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Round 5: children of different ages get one step per child's stage, and money worries a guide link. */
.quiz-by-stage-title{font:800 1.0625rem/1.3 var(--font-head);margin:var(--space-stack) 0 var(--space-tight)}
.quiz-guide{margin:0 0 var(--space-tight)}
.quiz-steps small{font-weight:800;font-size:.8125rem}
.quiz-steps strong{font:800 1.0625rem/1.3 var(--font-head)}
.quiz-steps a:hover,.quiz-steps a:focus-visible{text-decoration:underline}

/* Next stage after the last step of a stage. */
.next-card--stage .next-card-kicker{font-weight:900}

/* Footer: one next step for a reader who reached the bottom. */
.footer-next{margin:var(--space-paragraph) 0 0;font-weight:800}
.footer-next a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Phones: five tabs (Home, Tools, Guides, Downloads, Me); the frozen legal chrome keeps four. */
@media(max-width:767px){
  .tab-bar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .tab-bar a span{white-space:nowrap}
}

/* Planning milestone under a result (assets/planning-milestones.js). */
.planning-milestone-note{margin:var(--space-stack) 0 0;padding:10px 14px;border-left:4px solid var(--green);border-radius:6px;background:var(--soft,transparent)}
/* "Mark as done" is a secondary pill on the note's line (A10, A11): ink on the card, never the browser's grey square. */
.planning-milestone-note button.text-link{display:inline-flex;align-items:center;min-height:44px;margin:6px 0 0 4px;padding:8px 18px;border:3px solid var(--outline);border-radius:var(--radius-btn,999px);background:var(--card);color:var(--ink);font:800 .9375rem/1.2 var(--font-body);vertical-align:middle;box-shadow:var(--press);cursor:pointer}
.planning-milestone-note button.text-link:hover{background:var(--soft);color:var(--ink)}

/* My Family Plan: sign in or join from the signed-out Overview; hidden once signed in. */
.member-overview-signin{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-inline);margin:0 0 var(--space-block)}
.member-overview-signin p{flex:1 1 100%;margin:0}
main:has(#member-session-bar:not([hidden])) .member-overview-signin{display:none}
/* My Downloads before members' downloads open: the list previews what is coming, without dead buttons. */
.member-downloads.is-closed button[data-member-download]{display:none}

/* ==========================================================================
   Design wave, lane dw-layout (Calvin, 11 Oct 2026). Layout only; tokens and the skin stay in
   tokens.css and coach.css. Phone first; 960px and 1024px are the two-column steps.
   ========================================================================== */

/* Homepage hero: the promise on the left, one worked answer on the yellow result tile on the right
   (desktop), and two actions: one red, one outline. On the red band the red button carries a light
   outline so it does not sink into the floor. */
.coach-hero .coach-hero-links{gap:12px}
.coach-hero .btn.primary{border-color:var(--ink-base);box-shadow:inset 0 -4px 0 rgba(0,0,0,.3),0 0 0 3px var(--on-red),0 10px 18px -8px rgba(0,0,0,.6)}
.coach-hero .btn.primary:active{box-shadow:inset 0 -1px 0 rgba(0,0,0,.3),0 0 0 3px var(--on-red)}
.btn.outline{background:transparent;border-color:currentColor;color:inherit;box-shadow:none}
.coach-hero .btn.outline{border-width:2px;color:var(--on-red);border-color:rgba(255,255,255,.7)}
.coach-hero .btn.outline:hover{background:rgba(0,0,0,.16);color:var(--on-red)}
@media(max-width:520px){.coach-hero-links .btn{flex:1 1 0;min-width:0;padding-inline:12px;text-align:center}}
.hero-example{display:none}
.hero-example .spinner-lead{margin-bottom:2px}
.hero-example .spinner-value{margin:4px 0 0;font-size:clamp(3.2rem,5vw,4.4rem)}
/* The tile itself (bolts, unit under the number) is assets/result-tile.css, as on every tool. */
.hero-example .headline-unit{margin-bottom:10px;color:var(--spinner-ink)}
.hero-example .spinner-sub{max-width:24rem;margin-inline:auto}
.hero-example-link{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;padding:8px 20px;border-radius:999px;background:var(--ink-base);color:#fff;font-weight:800;text-decoration:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}
.hero-example-link:hover{text-decoration:underline;text-underline-offset:3px}
.hero-example-link:focus-visible{outline:3px solid var(--ink-base);outline-offset:3px}
@media(min-width:960px){
  .home-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);align-items:center;column-gap:56px;padding-top:36px;padding-bottom:52px}
  .home-hero h1{max-width:15ch}
  .hero-example{display:block;margin:0;transform:rotate(1.5deg)}
  .answer-card--hero{display:none!important}
}

/* Stage pads and the three questions, one section: the questions sit right under the pads. */
.journey-quiz{margin:var(--space-6) 0 0;padding:var(--space-card);border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm);scroll-margin-top:96px}
.journey-quiz .coach-quiz-intro{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;align-items:center;margin:0 0 var(--space-4);text-align:left}
.journey-quiz .coach-quiz-intro .help-bubble{width:44px;height:44px;font-size:1.375rem}
.journey-quiz .coach-quiz-intro h3{margin:0;font-size:1.25rem;line-height:1.2}
.journey-quiz .coach-quiz-intro p{grid-column:1/-1;margin:0;color:var(--muted);font-size:.9375rem}
@media(min-width:960px){
  .journey-quiz{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:40px;align-items:start;padding:28px 32px}
  .journey-quiz .coach-quiz-intro{margin:0}
  .journey-quiz .coach-quiz-intro p{grid-column:2}
}

/* Worked answers and Print This Week side by side on desktop; the printable shows its own cover. The
   "Money tight?" card spans the column it sits in (never a half-width card beside blank space): on
   desktop it goes under the worked answers, so the left column ends level with the printable. */
.home-help .print-card{max-width:none}
/* "What's on for kids?" (events-directory): one full-width card under the lower rows. */
.home-events{margin:var(--space-section) 0 0}
.home-events h2{margin:0 0 var(--space-heading-after)}
.home-events .print-card{max-width:none}
@media(min-width:960px){
  .home-lower.has-print{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-grid);align-items:start}
  .home-lower.has-print .answer-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-lower.has-print .print-card{max-width:none}
  .home-lower.has-print.has-help{grid-template-areas:"answers print" "help print";grid-template-rows:auto 1fr;row-gap:0}
  .home-lower.has-print.has-help>.home-answers:not(.home-help){grid-area:answers}
  .home-lower.has-print.has-help>.home-print{grid-area:print}
  .home-lower.has-print.has-help>.home-help{grid-area:help;margin-top:var(--space-block)}
}
.print-card{overflow:hidden}
.print-card picture,.print-card>img{display:block;margin:-14px -16px 10px;border-bottom:3px solid var(--outline)}
.print-card img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;background:var(--soft)}

/* The header's stage skin is in coach.css (D043). The yellow and orange hub heroes carry ink text by day,
   so their focus ring is ink; at night those bands are deep tints with white text and the light ring. */
.goal-hero:is([data-stage=toddler],[data-stage=preschool]) :focus-visible{outline-color:var(--ink-base)}
:root[data-theme=dark] .goal-hero:is([data-stage=toddler],[data-stage=preschool]) :focus-visible{outline-color:var(--focus-band)}

/* Stage hubs: two columns on desktop, the steps on the left and a sticky progress panel on the right. */
.hub-layout{display:grid;gap:var(--space-section)}
.hub-main{min-width:0}
.hub-main>.hub-section:first-child{margin-top:0}
/* The steps and the sticky panel share .hub-top, so the panel stops where the steps end; the guide
   and printable grids follow at full width (visual QA A15). */
.hub-top{display:grid;gap:var(--space-section);min-width:0}
@media(min-width:1024px){
  .hub-top{grid-template-columns:minmax(0,1fr) 300px;column-gap:48px;align-items:start}
  .hub-panel{position:sticky;top:92px}
}
.hub-more{min-width:0}
.hub-more>.hub-section:first-child{margin-top:0}
.hub-panel{display:grid;gap:10px;padding:var(--space-card);border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
.hub-panel h2{margin:0;font-size:1.25rem;line-height:1.2}
.hub-panel-count{margin:0;font-weight:800}
.hub-meter{height:14px;border:2px solid var(--outline);border-radius:999px;background:var(--soft);overflow:hidden}
.hub-meter span{display:block;width:0;height:100%;background:var(--rubber),var(--stage);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.hub-panel-next{width:100%}
.hub-panel-question{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.4}
.hub-panel-nav ul{list-style:none;display:grid;margin:4px 0 0;padding:8px 0 0;border-top:2px dashed var(--hair)}
.hub-panel-nav a{display:flex;align-items:center;min-height:44px;font-weight:800;color:var(--ink);text-underline-offset:3px}
.hub-panel-quiz{margin:0;color:var(--muted);font-size:.875rem}
.hub-panel-quiz a{font-weight:800;color:var(--ink)}
.hub-panel-clear{justify-self:start;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(max-width:1023px){.hub-panel-nav{display:none}}
/* A step this browser opened: the pad turns to an outlined ring and says so. */
.hub-steps li.is-opened .goal-step-num{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 4px var(--stage)}
.hub-steps li.is-opened .goal-step-text small::after{content:" · Opened";font-weight:800}

/* /tools/: every tool as a row, stage by stage, with what it gives back. */
.tool-directory{margin:var(--space-section) 0 0}
.tool-directory>h2{margin:0 0 var(--space-6)}
.tool-stage{margin:0 0 var(--space-8)}
.tool-stage-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:0 0 var(--space-3);font-size:1.375rem}
.tool-stage-title a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none}
.tool-stage-title a:hover span{text-decoration:underline;text-underline-offset:4px}
.tool-stage-title small{font:700 .875rem/1.2 var(--font-body);color:var(--muted);letter-spacing:0}
.tool-rows{list-style:none;margin:0;padding:0;border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);overflow:hidden;box-shadow:var(--shadow-sm)}
.tool-rows>li+li{border-top:2px solid var(--hair)}
.tool-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;min-height:64px;padding:14px 16px;color:var(--ink);text-decoration:none}
.tool-row:hover{background:var(--soft)}
.tool-row:hover .tool-row-q strong{text-decoration:underline;text-underline-offset:3px}
.tool-row:focus-visible{outline:3px solid var(--focus);outline-offset:-5px;border-radius:calc(var(--radius) - 6px)}
.tool-row-q{display:grid;gap:2px;min-width:0}
.tool-row-q strong{font:800 1.0625rem/1.3 var(--font-head);overflow-wrap:break-word}
.tool-row-q small{color:var(--muted);font-size:.8125rem;font-weight:700}
.tool-row-gives{display:grid;gap:2px;grid-column:1;min-width:0}
.tool-row-gives small{color:var(--muted);font-size:.875rem;line-height:1.35}
.tool-row-gives b{font:900 1rem/1.25 var(--font-head);color:var(--display-red)}
.tool-row-go{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--stage);color:var(--stage-on);font-weight:900}
@media(min-width:768px){
  .tool-row{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) auto;column-gap:24px}
  .tool-row-gives{grid-column:2;grid-row:1}
  .tool-row-go{grid-column:3;grid-row:1}
}

/* /downloads/ and /guides/: one stage at a time. The chips are links to each section, so without
   script they jump; assets/stage-chips.js shows the chosen stage only. */
.stage-chips{margin:var(--space-6) 0 var(--space-4)}
.stage-chips-row{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
@media(min-width:768px){.stage-chips-row{flex-wrap:wrap;overflow:visible}}
.stage-chip{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;text-decoration:none}
.stage-chip[aria-current=true]{background:var(--ink-base);border-color:var(--ink-base);color:#fff}
.stage-chip[data-stage][aria-current=true]{background:var(--stage);border-color:var(--outline);color:var(--stage-on)}
.stage-chip[aria-current=true] .goal-chip-icon{background:var(--card);color:var(--ink)}
.stage-chips.is-searching .stage-chip[aria-current=true]{background:var(--card);border-color:var(--outline);color:var(--ink)}
.stage-count{margin-left:6px;font:700 .9375rem/1 var(--font-body);color:var(--muted);letter-spacing:0}

/* /deals/: the parts and the types in one filter row (scrolls sideways on a phone, wraps on desktop). */
.deal-filter-row .deal-filter-scroll{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.deal-filter-row .deal-parts,.deal-filter-row .deal-filters{display:flex;flex-wrap:nowrap;gap:8px;margin:0;padding:0}
.deal-filter-row .deal-parts{padding-right:14px;border-right:2px dashed var(--hair)}
.deal-filter-row button{flex:0 0 auto;white-space:nowrap}
@media(min-width:1024px){.deal-filter-row .deal-filter-scroll,.deal-filter-row .deal-filters{flex-wrap:wrap;overflow:visible}}

/* Birth-cost guide: MOH's bills as a real ward by delivery table. */
.bill-table-wrap{overflow-x:auto;margin:var(--space-4) 0;border:3px solid var(--outline);border-radius:var(--radius);background:var(--card)}
.bill-table{width:100%;margin:0;border:0;border-collapse:collapse;font-variant-numeric:tabular-nums}
.bill-table th,.bill-table td{padding:12px 14px;border:0;border-bottom:2px solid var(--hair);text-align:left;vertical-align:top}
.bill-table thead th{background:var(--soft);font:800 .9375rem/1.25 var(--font-head)}
.bill-table tbody th{width:38%;font:800 .9375rem/1.3 var(--font-body)}
.bill-table tbody tr:last-child>*{border-bottom:0}
.bill-table td b{display:block;font:900 1.25rem/1.15 var(--font-head);color:var(--ink)}
.bill-table td small{display:block;margin-top:2px;color:var(--muted);font-size:.8125rem;font-weight:700;line-height:1.3}
@media(max-width:420px){.bill-table th,.bill-table td{padding:10px 8px}.bill-table td b{font-size:1.0625rem}}

/* Secondary schools comparison: the PSLE Score field reads like the other fields. */
.compare-score input{max-width:10rem}
@media(min-width:1024px){:is(.hub-main,.hub-more) .hub-section .guide-list,:is(.hub-main,.hub-more) .download-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Lazy images: a soft fill until the picture arrives, never a blank white box. */
.download-card img,.hub-section .guide-list img,.guide-list .guide-thumbnail{background:var(--soft)}
/* A printable card's title link also underlines on keyboard focus, besides the card's outline, so
   the focused link itself shows a change (visual QA A15 hubs, where the cards now sit full width). */
.download-card-link:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}