/* Nadia Fixes Money: the stage, Finder, calculator and article components (WO-NADIA-ANSWERS-2 Phase A).
   Ported from the approved mock design/nadia_answers_2_2026-10-05 (tabs 1, 3, 4 and 5). Loaded AFTER
   /assets/nadia.css and only by the pages that use it; every colour and size comes from nadia.css tokens.
   Font sizes in rem only (docs/UI_GATE.md legibility floor). */

/* the 3 stages strip */
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:1.75rem 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;list-style:none;padding:0}
.stage{padding:1.1rem 1.25rem;background:var(--surface);border-right:1px solid var(--line);display:grid;gap:.25rem;align-content:start}
.stage:last-child{border-right:0}
.stage .n{font:700 var(--fs-label) var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.stage h3{font-size:1.25rem}
.stage p{font-size:var(--fs-small);color:var(--ink2)}
.stage.on{background:var(--forest);color:var(--on)}
.stage.on .n{color:var(--gold)}
.stage.on p{color:var(--on2)}

/* quiz and Finder questions */
.quiz{margin-top:1.75rem;display:grid;gap:1.25rem;max-width:44rem}
.q{border:0;margin:0;padding:0;display:grid;gap:.6rem;min-width:0}
.q legend{font:800 var(--fs-lead) var(--display);padding:0;margin-bottom:.35rem}
.opt{display:flex;gap:.6rem;align-items:center;border:1px solid var(--ink2);border-radius:var(--r);padding:.7rem .9rem;background:var(--paper);cursor:pointer;min-height:2.875rem;transition:background-color .15s var(--out),border-color .15s var(--out)}
.opt:has(input:checked){background:var(--forest);color:var(--on);border-color:var(--forest)}
.opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.opt input{accent-color:var(--gold);width:1.1rem;height:1.1rem;flex:none;margin:0}

/* a result panel (stage, Finder, capture blocks) */
.result{margin-top:1.75rem;border:2px solid var(--forest);border-radius:var(--r);padding:1.75rem;background:var(--surface);display:grid;gap:.9rem;max-width:44rem}
.result:focus{outline:none}
.result .eyebrow{font:700 var(--fs-label) var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ochre)}
.result h2,.result h3{font-size:1.6rem;line-height:1.15}
.result .idea{font:800 1.6rem/1.15 var(--display)}
.result .capform{margin-top:.25rem}
.result .capform .fine,.result .capform .err{flex:1 1 100%}
.result .done h3{font-size:1.5rem}
.result .done p+p{margin-top:.5rem}
.result .done:focus{outline:none}
@media(min-width:40rem){.result h2.lg,.result .idea{font-size:2.1rem}}

/* the forest total box (calculators) */
.rt{margin-top:1.5rem;background:var(--forest);color:var(--on);border-radius:var(--r);padding:1.75rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 3rem;align-items:center}
.rt .lead{color:var(--on2)}
.rt .num{font:800 3rem/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums;margin-block:.25rem}
@media(min-width:40rem){.rt .num{font-size:4.5rem}}
.rt .rs{font-size:var(--fs-lead)}
.rt .rs p+p{margin-top:.5rem}
.rt .rs b{font:800 1.5rem var(--display);font-variant-numeric:tabular-nums}
.seg{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.seg .opt{min-height:2.75rem;padding:.4rem .9rem}
.disc{margin-top:1.25rem;font-size:var(--fs-label);color:var(--ink2);max-width:66ch}
.list2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem;margin-top:1.25rem}
.list2 h3{font-size:1.25rem}
.list2 ol,.list2 ul{margin:.5rem 0 0;padding-left:1.25rem;display:grid;gap:.3rem;font-variant-numeric:tabular-nums}
.grp2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.grp2 h3{font-size:1.25rem;margin-bottom:.5rem}
.grp2 .fields{grid-template-columns:minmax(0,1fr)}
.grp2 .fld label{min-height:0}

/* the debt list (debt snowball) */
.calc .dtab{font-size:1.25rem;line-height:1.2;margin-bottom:.75rem}
.debts{display:grid;gap:.75rem}
.debt{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) auto;gap:.75rem;align-items:end}
.debt .fld label{min-height:0}
.debt .rm{min-height:2.875rem;min-width:2.875rem;border:1px solid var(--ink2);border-radius:var(--r);background:transparent;color:var(--ink);font:700 var(--fs-small) var(--body);cursor:pointer}
.addrow{margin-top:.75rem}

/* articles: script pages and guides */
.art{max-width:44rem;display:grid;gap:1.1rem;padding-block:2.5rem 3rem}
.art h1{font-size:2.4rem;line-height:1.08}
@media(min-width:40rem){.art h1{font-size:3rem}}
.art h2{font-size:var(--fs-h3);margin-top:.75rem}
.art p{max-width:42rem}
.art .result{margin-top:0}
.meta{font-size:var(--fs-label);color:var(--ink2)}
.box{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:1.1rem 1.25rem}
.box h2{font:800 var(--fs-body) var(--display);margin:0 0 .4rem;letter-spacing:.02em}
.box ul,.box ol{margin:0;padding-left:1.2rem;display:grid;gap:.3rem}
.qa2 h3{font:700 var(--fs-body) var(--body);letter-spacing:0}
.qa2 p{margin-top:.25rem}

/* the Moves index */
.mvs{display:grid;border-top:2px solid var(--ink);margin-top:1rem}
.mv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 2rem;padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:center}
.mv h3{font-size:1.25rem}
.mv p{color:var(--ink2);margin-top:.25rem;max-width:56ch}
.mv .kind{font:700 var(--fs-label) var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}

/* /pricing: the stage line above each plan button */
.plan .stg{font:700 var(--fs-label) var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ochre)}
.plan.hot .stg{color:var(--gold)}

@media(max-width:52rem){
  .stages,.rt,.list2,.grp2{grid-template-columns:minmax(0,1fr)}
  .stage{border-right:0;border-bottom:1px solid var(--line)}
  .stage:last-child{border-bottom:0}
  .debt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .debt .fld:first-child{grid-column:1/-1}
  .mv{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.opt{transition:none}}

/* How I Calculated This (every calculator page): closed by default */
.how{margin-top:1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:0 1.25rem;max-width:56rem}
.how summary{min-height:2.75rem;display:flex;align-items:center;font-weight:700;cursor:pointer}
.how summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.how > div{padding-bottom:1rem;display:grid;gap:.5rem;color:var(--ink2)}

/* the home page additions: Straight Answers and the 3 stages */
.straight .qa h3{font-size:var(--fs-h3)}
.stages3 .lede3{font-size:var(--fs-lead);color:var(--ink2);max-width:46rem}
.stages3 .go{margin-top:1.25rem}
.rt .num.t{font-size:2.4rem;line-height:1.05}
@media(min-width:40rem){.rt .num.t{font-size:3rem}}
.list2 ol + p{margin-top:.5rem;font-weight:700}
@media(hover:hover){.opt:hover{border-color:var(--forest)}}