/* ═══════════════════════════════════════════════════════════════════
   CALCULATOR COMPONENTS — Working Paper
   Same class names the five calculators already emit, restyled onto
   the light system. No markup and no calculation logic is touched.
   Results are typeset as a working paper: labels left, figures right
   in tabular mono, aligned on the decimal, ruled off at the total.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── page head ──────────────────────────────────────────────────── */
.phero{padding:var(--s7) 0 var(--s3)}
.tcrumbs{font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:var(--s4)}
.tcrumbs a{border-bottom:1px solid transparent; transition:border-color var(--t)}
.tcrumbs a:hover{border-bottom-color:currentColor}
.tlede{font-size:clamp(1.05rem,1.3vw,1.2rem); line-height:1.58; color:var(--ink-2); max-width:60ch; margin-top:var(--s3)}
.tflag{
  display:inline-block; margin-top:var(--s3);
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); border-bottom:1px solid var(--rule); padding-bottom:3px;
}

/* ─── the calculator shell ───────────────────────────────────────── */
.tpanel{
  border-top:1px solid var(--ink); border-bottom:1px solid var(--rule);
  padding:var(--s4) 0; margin-top:var(--s4);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7);
  align-items:start;
}
.thead{
  font-family:var(--ff-mono); font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  margin-bottom:var(--s4);
}
.tform{display:grid; gap:var(--s3)}
.tf{display:grid}
.tf2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
.tf label,.tf .lab,.tf2 label{margin-bottom:7px}
.thint{font-size:13px; color:var(--ink-2); margin-top:7px; line-height:1.45}
.tchk{display:flex; align-items:center; gap:10px; padding-top:var(--s1)}
.tchk input{width:auto; margin:0}
.tchk label,.tchk .lab{margin:0; text-transform:none; letter-spacing:0; font-family:var(--ff-ui); font-size:15px; color:var(--ink)}

/* segmented control — flat, ruled, no pills */
.tseg{display:flex; border:1px solid var(--rule)}
.tseg button,.tseg .ser{
  flex:1; padding:10px 12px; font-size:14px; color:var(--ink-2);
  border-right:1px solid var(--rule); transition:background var(--t), color var(--t);
}
.tseg button:last-child,.tseg .ser:last-child{border-right:0}
.tseg button:hover{color:var(--ink)}
.tseg button[aria-pressed="true"],.tseg .ser.on,.tseg button.on{background:var(--ink); color:var(--paper)}

/* ─── results — the working paper ────────────────────────────────── */
.tres{min-height:120px}
.tempty{
  font-family:var(--ff-mono); font-size:13px; color:var(--ink-2);
  padding:var(--s4) 0; border-top:1px solid var(--rule-2);
}
.trows{display:grid; font-variant-numeric:tabular-nums lining-nums}
.tr{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s3);
  padding:11px 0; border-bottom:1px solid var(--rule-2); align-items:baseline;
}
.tr .k{font-size:15px; color:var(--ink-2)}
.tr .v{font-family:var(--ff-mono); font-size:15px; text-align:right; white-space:nowrap}
.tr.fin{border-bottom:0; border-top:1px solid var(--ink); margin-top:6px; padding-top:14px}
.tr.fin .k{color:var(--ink); font-weight:500}
.tr.fin .v{font-size:19px; font-weight:500}
.tr.sep{border-bottom-color:var(--rule)}
.tr.b .k,.tr.b .v{font-weight:500; color:var(--ink)}
.tr.n .v{color:var(--exception)}
.tr.ok .v{color:var(--matched)}

.tstats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); margin-bottom:var(--s4)}
.tstat{border-top:1px solid var(--ink); padding-top:12px}
.tstat .k{font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); display:block; margin-bottom:6px}
.tstat .v{font-family:var(--ff-mono); font-size:clamp(1.25rem,2vw,1.65rem); line-height:1.1; font-variant-numeric:tabular-nums lining-nums}
.tstat .v.ac{color:var(--matched)}

.tnote{font-size:14px; color:var(--ink-2); margin-top:var(--s3); line-height:1.55; max-width:56ch}
.tdisc{
  font-size:13.5px; color:var(--ink-2); line-height:1.6; max-width:66ch;
  border-left:2px solid var(--rule); padding-left:var(--s3); margin-top:var(--s5);
}
.tdisc a{color:var(--ink); border-bottom:1px solid var(--rule)}

/* actions row under a result */
.tgo{display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s4)}
.tgo-red{color:var(--exception)}

/* ─── data table ─────────────────────────────────────────────────── */
.dtable{width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums lining-nums; margin-top:var(--s3)}
.dtable th{
  text-align:left; font-family:var(--ff-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
  padding:10px 12px 10px 0; border-bottom:1px solid var(--ink);
}
.dtable td{padding:10px 12px 10px 0; border-bottom:1px solid var(--rule-2)}
.dtable td:last-child,.dtable th:last-child{padding-right:0; text-align:right; font-family:var(--ff-mono)}
.tscroll{overflow-x:auto; margin-top:var(--s3)}

/* ─── search / finder ────────────────────────────────────────────── */
.tsearch{display:grid; gap:var(--s3); max-width:640px}
.tchips{display:flex; flex-wrap:wrap; gap:var(--s1); margin-top:var(--s2)}
.tchip{
  font-family:var(--ff-mono); font-size:12.5px; color:var(--ink-2);
  border:1px solid var(--rule); padding:6px 12px;
  transition:border-color var(--t), color var(--t), background var(--t);
}
.tchip:hover{border-color:var(--ink); color:var(--ink)}
.tchip.on,.tchip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.tcount{font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:var(--s4) 0 var(--s2)}
.tfind{display:grid; gap:0; border-top:1px solid var(--ink)}
.tfi{padding:var(--s3) 0; border-bottom:1px solid var(--rule-2)}
.tfi-top{display:flex; justify-content:space-between; gap:var(--s3); align-items:baseline}
.tfi-top .h-md{font-size:17px}
.tfi-rate{font-family:var(--ff-mono); font-size:17px; white-space:nowrap; font-variant-numeric:tabular-nums}
.tfi-meta{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:8px; font-size:13.5px; color:var(--ink-2)}
.tfi-meta .old{font-family:var(--ff-mono); font-size:12.5px}
.tnores{padding:var(--s5) 0; color:var(--ink-2); font-size:15px; border-bottom:1px solid var(--rule-2)}

/* ─── prose blocks on tool pages ─────────────────────────────────── */
.tprose{max-width:68ch; margin-top:var(--s6)}
.tprose h2{font-family:var(--ff-display); font-size:clamp(1.3rem,2vw,1.65rem); font-weight:500; letter-spacing:-.015em; line-height:1.18; margin:var(--s6) 0 var(--s2); padding-top:var(--s3); border-top:1px solid var(--rule)}
.tprose h3{font-size:17px; font-weight:500; margin:var(--s4) 0 var(--s1)}
.tprose p,.tprose li{color:var(--ink-2); font-size:16px; margin-bottom:var(--s2)}
.tprose ul,.tprose ol{padding-left:20px}
.tprose li{margin-bottom:9px}
.tprose strong{color:var(--ink); font-weight:500}
.tprose a{color:var(--ink); border-bottom:1px solid var(--rule)}
.tguide{margin-top:var(--s6)}
.tsub{margin-top:var(--s5)}
.tsub-h{font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:var(--s2)}

/* FAQ */
.tfaq{margin-top:var(--s6); border-top:1px solid var(--ink)}
.tfaq details{border-bottom:1px solid var(--rule-2)}
.tfaq summary{
  padding:var(--s3) 0; cursor:pointer; font-size:17px; font-weight:500;
  list-style:none; display:flex; justify-content:space-between; gap:var(--s3); align-items:baseline;
}
.tfaq summary::-webkit-details-marker{display:none}
.tfaq summary::after{content:"+"; font-family:var(--ff-mono); color:var(--ink-2)}
.tfaq details[open] summary::after{content:"\2212"}
.tfaq p{padding:0 0 var(--s3); color:var(--ink-2); font-size:16px; max-width:64ch}

/* ─── cross-links between tools ──────────────────────────────────── */
.tgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--s5); border-top:1px solid var(--ink); margin-top:var(--s3)}
.tgrid .tgi{display:block; padding:var(--s3) 0; border-bottom:1px solid var(--rule-2); transition:padding-left var(--t)}
.tgrid .tgi:hover{padding-left:8px}
.tgrid .tgi .h-md{margin-bottom:5px}
.tgrid .tgi p{font-size:14.5px; color:var(--ink-2)}
.tgrid .tgi .src{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); display:block; margin-top:8px}

/* ─── numbered reference guide (a real index, not decoration) ────── */
.tguide .tgi{padding:var(--s5) 0; border-bottom:1px solid var(--rule)}
.tguide .tgi:last-child{border-bottom:0}
.tguide .tgi .n{
  display:block; font-family:var(--ff-mono); font-size:12px; font-weight:500;
  letter-spacing:.1em; color:var(--ink-2); margin-bottom:10px;
}
.tguide .tgi h3{font-family:var(--ff-display); font-size:clamp(1.25rem,1.9vw,1.55rem); font-weight:500; letter-spacing:-.015em; line-height:1.18; margin:0 0 var(--s2)}
.tguide .tgi p{color:var(--ink-2); font-size:16px; margin-bottom:var(--s2); max-width:66ch}
.tguide .tgi strong{color:var(--ink); font-weight:500}
.tguide .tgi em{font-family:var(--ff-display); font-style:italic}
.tguide .tgi .src{
  display:block; margin-top:var(--s2); padding-top:10px; border-top:1px solid var(--rule-2);
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-2); max-width:66ch;
}

/* ─── misc legacy hooks ──────────────────────────────────────────── */
.tpre{font-family:var(--ff-mono); font-size:13px; color:var(--ink-2)}
.ic{font-family:var(--ff-mono); color:var(--ink-2); margin-right:6px}
.pl{color:var(--ink-2)}

@media (max-width:1080px){
  .tpanel{grid-template-columns:1fr; gap:var(--s5)}
  .tgrid{grid-template-columns:1fr; gap:0}
}
@media (max-width:760px){
  .tf2,.tstats{grid-template-columns:1fr; gap:var(--s3)}
  .tseg{flex-wrap:wrap}
  .tcta-box{padding:var(--s5) var(--s4)}
  .dtable{font-size:13px}
}

/* ═══════════════════════════════════════════════════════════════════
   v3 — the form wins the eye
   Utility pages carry no marketing chrome. Any mark or icon is small
   and quiet; the input column is the first thing the eye lands on.
   ═══════════════════════════════════════════════════════════════════ */
.phero{padding:var(--s7) 0 var(--s2)}
.phero .h-lg,.phero h1{font-family:var(--ff-display); font-size:clamp(1.9rem,3vw,2.6rem); font-weight:600; letter-spacing:-.022em; line-height:1.08}
.tlede{font-size:17px; line-height:1.55; max-width:56ch; margin-top:var(--s3)}
.tflag{margin-top:var(--s3); font-size:11.5px}

/* any decorative or illustrative element on a tool page stays small */
.phero svg,.tpanel svg,.thead svg,.tres svg{max-width:20px; max-height:20px; opacity:.55}
.tcrumbs svg{max-width:12px; max-height:12px}

/* the calculator itself sits high on the page and reads first */
.tpanel{
  margin-top:var(--s4); padding:var(--s4) 0;
  border-top:1px solid var(--brand); border-bottom:1px solid var(--rule);
  gap:var(--s6);
}
.thead{font-size:11.5px; letter-spacing:.1em; margin-bottom:var(--s3); color:var(--ink-2)}
.tform{gap:var(--s3)}
.tf label,.tf .lab,.tf2 label{font-size:11.5px; margin-bottom:6px}
.tseg button[aria-pressed="true"],.tseg .ser.on,.tseg button.on{background:var(--brand); color:var(--paper)}
.tr.fin{border-top-color:var(--brand)}
.tr.ok .v{color:var(--brand)}
.tstat{border-top-color:var(--brand)}
.tstat .v.ac{color:var(--brand)}
.tchip.on,.tchip[aria-pressed="true"]{background:var(--brand); color:var(--paper); border-color:var(--brand)}
.tfind,.tfaq,.tgrid{border-top-color:var(--brand)}
.dtable th{border-bottom-color:var(--brand)}

/* supporting prose recedes below the tool */
.tprose,.tguide,.tfaq{margin-top:var(--s7)}
.tprose h2,.tguide h2{border-top-color:var(--rule)}


/* ── result prominence + tool meta (Forest system) ── */
.tres{background:var(--brand);color:var(--brand-ink);border-radius:14px;padding:22px 22px 20px;margin-bottom:16px}
.tres .tsub-h,.tres .k{color:var(--sage)}
.tres__lab{font-family:var(--ff-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--sage)}
.tres__big{font-family:var(--ff-mono);font-size:clamp(28px,5vw,40px);line-height:1.05;color:#fff;margin-top:8px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tres__sub{font-size:13.5px;color:var(--sage);margin-top:10px}
.tres .trows .tr{border-color:rgba(245,242,234,.16)}
.tres .trows .tr span{color:var(--brand-ink)}
.tmeta{margin-top:28px;display:grid;gap:12px}
.tmeta__c{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:16px 18px}
.tmeta__k{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tmeta__v{font-size:14.5px;color:var(--ink-2);margin-top:7px;line-height:1.55}
.tmeta__v strong{color:var(--ink)}
.trel{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.trel a{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule);border-radius:20px;padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--paper);transition:border-color var(--t-fast),transform var(--t-fast)}
.trel a:hover{border-color:var(--brand);transform:translateY(-1px)}
.tgo{background:var(--brand);color:var(--brand-ink)}
.tgo:hover{background:var(--brand-2)}
@media (max-width:640px){.tres{padding:18px}.tmeta__c{padding:14px 15px}}