/* ---------- 1. TOKENS ---------- */
:root{
  /* neutrals */
  --ink:#1a1d21;          /* text, structure rules, table header rule */
  --ink-2:#5b6470;        /* secondary text, labels, hints (4.9:1 on white) */
  --ink-3:#8a939e;        /* placeholders, disabled text, "×" remove — never for information */
  --line:#c4ccd6;         /* field borders */
  --line-2:#d5dce4;       /* card borders, header rule */
  --line-3:#e3e8ee;       /* row separators, meter track */
  --surface:#ffffff;      /* cards, fields, header */
  --surface-2:#f3f6f9;    /* page background (desktop). phone uses --surface */
  --surface-3:#e9edf1;    /* concrete fill in the drawing, skeletons */

  /* brand */
  --brand:#4890d2;        /* fills, marks, stirrups, station badges, progress, selection edge. NOT for text < 24px */
  --brand-ink:#2b6cb0;    /* links, button fill, active segment, text-on-white blue (4.9:1) */
  --brand-ink-hover:#1f5390;
  --brand-soft:#eaf3fb;   /* selected option, info strip */
  --brand-line:#c6ddf2;

  /* semantic · DCR scale: ok ≤ 0.95 · warn 0.95–1.00 · bad > 1.00 */
  --ok:#1d7a46;      --ok-soft:#e6f4ea;   --ok-line:#b7dfc3;   --ok-ink:#14532d;
  --warn:#9a6700;    --warn-soft:#fff4d6; --warn-line:#f0d9a0; --warn-ink:#5c3d00;
  --bad:#b42318;     --bad-soft:#fde8e6;  --bad-line:#f3c2bd;  --bad-ink:#7a1610;

  /* type */
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-11:0.6875rem; --fs-12:0.75rem; --fs-13:0.8125rem; --fs-14:0.875rem; --fs-15:0.9375rem;
  --fs-16:1rem; --fs-20:1.25rem; --fs-22:1.375rem; --fs-30:1.875rem; --fs-40:2.5rem;
  --lh-tight:1.2; --lh-ui:1.45; --lh-body:1.55;
  --track-caps:.08em;

  /* space (4-based) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px;

  /* shape */
  --r-1:3px;   /* fields, buttons, segments, badges */
  --r-2:4px;   /* cards */
  --bw:1px;

  /* elevation: only the toast floats */
  --shadow-toast:0 4px 12px rgba(0,0,0,.18);

  /* breakpoints (documentation; CSS cannot read custom props in @media) */
  --bp-phone:720px;   /* ≤ 720: stacked stations, sticky verdict strip   */
  --bp-desk:1080px;   /* ≥ 1080: four stations side by side              */

  /* motion */
  --t-fast:120ms; --t-base:200ms; --ease:cubic-bezier(.2,0,.2,1);

  /* controls */
  --ctl-h:32px;        /* desktop field height */
  --ctl-h-touch:44px;  /* phone field height & minimum touch target */
  --focus:0 0 0 2px var(--surface),0 0 0 4px var(--brand);
}
@media (prefers-reduced-motion:reduce){ :root{ --t-fast:0ms; --t-base:0ms; } }

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-13);line-height:var(--lh-ui);color:var(--ink);background:var(--surface-2);font-variant-numeric:tabular-nums}
a{color:var(--brand-ink)} a:hover{color:var(--brand-ink-hover)}
:focus-visible{outline:none;box-shadow:var(--focus)}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
.mono{font-family:var(--font-mono)}
.num{font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3. TYPOGRAPHY ---------- */
.t-h1{font-size:var(--fs-30);font-weight:600;letter-spacing:-.01em;line-height:var(--lh-tight)}
.t-h2{font-size:var(--fs-20);font-weight:600;line-height:var(--lh-tight)}
.t-body{font-size:var(--fs-15);line-height:var(--lh-body)}
.t-ui{font-size:var(--fs-13);line-height:var(--lh-ui)}
.lbl{font-size:var(--fs-11);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2);font-weight:500}
.hint{font-size:var(--fs-12);color:var(--ink-2);line-height:var(--lh-ui)}
.unit{color:var(--ink-2);font-size:var(--fs-12)}
/* math: italic variable, upright subscript, upright unit */
.sym{font-style:italic;font-family:var(--font-sans)}
.sym sub,.sub{font-style:normal;font-size:.72em;line-height:0;vertical-align:-.25em}
.readout{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.02em;line-height:1}
.readout--xl{font-size:var(--fs-40)} .readout--l{font-size:var(--fs-22)}
code,.code{font-family:var(--font-mono);font-size:var(--fs-12)}

/* ---------- 4. LAYOUT · calculator page ---------- */
.top{height:52px;display:flex;align-items:center;gap:var(--s-5);padding:0 var(--s-6);border-bottom:var(--bw) solid var(--line-2);background:var(--surface)}
.brand{display:flex;align-items:center;gap:var(--s-2);text-decoration:none;color:var(--ink);font-weight:600;font-size:17px;letter-spacing:-.01em}
.brand svg{width:24px;height:24px}
.top .crumb{color:var(--line)}
.top .title{font-size:var(--fs-14)} .top .sub{font-size:var(--fs-12);color:var(--ink-2)}
.top .spacer{flex-grow:1}
.top nav{display:flex;align-items:center;gap:var(--s-5)}
.top nav a{font-size:var(--fs-13);text-decoration:none}

.stations{display:grid;grid-template-columns:236px 300px 296px minmax(0,1fr);grid-template-rows:auto auto;gap:var(--s-4) var(--s-5);padding:var(--s-5) var(--s-6) 0;align-items:start}
/* every child pins its own cell — auto-placement would reorder them (seen in the mockups) */
.station-1{grid-column:1;grid-row:1} .station-2{grid-column:2;grid-row:1}
.station-3{grid-column:3;grid-row:1 / span 2} .station-4{grid-column:4;grid-row:1 / span 2}
.drawing{grid-column:1 / span 2;grid-row:2}
.station{display:flex;flex-direction:column;gap:var(--s-3)}
.st{font-size:var(--fs-11);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:var(--s-2);padding-bottom:10px;border-bottom:var(--bw) solid var(--ink)}
.st b{color:#fff;background:var(--brand);width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-11);border-radius:var(--r-1)}
.st .aside{margin-left:auto;font-weight:400;color:var(--ink-2)}
.below{padding:var(--s-6) var(--s-6) 0;display:flex;flex-direction:column;gap:var(--s-4)}
.foot{margin-top:var(--s-8);padding:var(--s-4) var(--s-6);font-size:var(--fs-12);color:var(--ink-2);display:flex;gap:var(--s-4);border-top:var(--bw) solid var(--line-2)}
.foot .spacer{flex-grow:1}
.verdict-strip{display:none}


/* ---------- 5. COMPONENTS ---------- */
/* field with unit */
.field{display:flex;flex-direction:column;gap:var(--s-1)}
.field .in{height:var(--ctl-h);border:var(--bw) solid var(--line);background:var(--surface);border-radius:var(--r-1);display:flex;align-items:center;padding:0 6px 0 var(--s-2);gap:4px;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.field .in input{border:0;background:transparent;width:100%;min-width:0;padding:0;font-family:var(--font-mono);font-size:var(--fs-14);text-align:right;outline:none}
.field .in input::placeholder{color:var(--ink-3)}
.field .in .unit{font-size:var(--fs-11);flex-shrink:0}
.field .in:hover{border-color:var(--ink-2)}
.field .in:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.field[aria-invalid="true"] .in,.field.is-invalid .in{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-soft)}
.field .err{font-size:var(--fs-12);color:var(--bad);line-height:var(--lh-ui)}
.field.is-disabled .in{background:var(--surface-3);color:var(--ink-3);border-color:var(--line-3)}
/* select */
.field .in.sel{font-family:var(--font-sans);justify-content:space-between;cursor:pointer}
.field .in.sel select{appearance:none;border:0;background:transparent;width:100%;padding:0;font-family:var(--font-sans);font-size:var(--fs-14);outline:none}
.field .in.sel::after{content:"▾";color:var(--ink-2);font-size:var(--fs-12)}
/* segmented (radiogroup) */
.seg{display:flex;border:var(--bw) solid var(--brand-ink);border-radius:var(--r-1);overflow:hidden;font-size:var(--fs-12)}
.seg button{flex:1;padding:7px 6px;background:var(--surface);color:var(--brand-ink);border:0;cursor:pointer;transition:background var(--t-fast) var(--ease)}
.seg button + button{border-left:var(--bw) solid var(--brand-ink)}
.seg button:hover{background:var(--brand-soft)}
.seg button[aria-checked="true"]{background:var(--brand-ink);color:#fff}
.seg--small button{padding:4px 8px;font-size:var(--fs-12)}
.seg--small{border-color:var(--line)} .seg--small button + button{border-left-color:var(--line)}
/* combination editor */
.combos{display:grid;grid-template-columns:minmax(0,1fr) 56px 56px 56px 20px;gap:6px;align-items:center}
.combos .lbl.r{text-align:right;text-transform:none;letter-spacing:0}
.cell{height:30px;border:var(--bw) solid var(--line);background:var(--surface);border-radius:var(--r-1);display:flex;align-items:center;padding:0 6px}
.cell input{border:0;background:transparent;width:100%;min-width:0;padding:0;outline:none;font-family:var(--font-mono);font-size:var(--fs-13);text-align:right}
.cell.txt input{font-family:var(--font-sans);text-align:left}
.cell:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.cell.is-invalid{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-soft)}
.combos .rm{background:none;border:0;color:var(--ink-3);cursor:pointer;height:30px;width:20px;padding:0;border-radius:var(--r-1)} .combos .rm:hover{color:var(--bad)}
.link-btn{background:none;border:0;padding:2px 0;color:var(--brand-ink);cursor:pointer;font-size:var(--fs-13);text-align:left}
.link-btn:hover{color:var(--brand-ink-hover);text-decoration:underline}
/* rebar proposal group */
.grp{border:var(--bw) solid var(--line);background:var(--surface);border-radius:var(--r-1)}
.grp .hd{display:grid;grid-template-columns:70px minmax(0,1fr) 46px 20px;gap:var(--s-2);align-items:center;padding:8px 10px;width:100%;background:none;border:0;text-align:left;cursor:pointer;border-radius:var(--r-1)}
.grp .hd:hover{background:var(--surface-2)}
.grp[open] .hd,.grp.is-open .hd{border-bottom:var(--bw) solid var(--line-3);border-radius:var(--r-1) var(--r-1) 0 0}
.grp .hd .val{font-family:var(--font-mono);font-size:var(--fs-14)}
.grp .hd .chev{color:var(--ink-2);text-align:right}
.opt{display:grid;grid-template-columns:20px minmax(0,1fr) 60px 46px;gap:var(--s-2);align-items:center;padding:7px 10px;border-top:var(--bw) solid var(--line-3);cursor:pointer}
.opt:first-of-type{border-top:0}
.opt:hover{background:var(--surface-2)}
.opt.is-selected,.opt:has(input:checked){background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
.opt input{margin:0;width:14px;height:14px;accent-color:var(--brand-ink)}
.opt .val{font-family:var(--font-mono);font-size:var(--fs-14)} .opt .area{font-family:var(--font-mono);color:var(--ink-2);font-size:var(--fs-12);text-align:right}
.dcr{font-family:var(--font-mono);font-weight:600;text-align:right}
.dcr.ok{color:var(--ok)} .dcr.warn{color:var(--warn)} .dcr.bad{color:var(--bad)} .dcr.none{color:var(--ink-2);font-weight:400}
/* rebar entry (check mode) */
.bars{display:grid;grid-template-columns:70px minmax(0,1fr);gap:var(--s-2);align-items:center}
.bars .n{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:var(--fs-14)}
.bars .n .i{width:34px;height:var(--ctl-h);border:var(--bw) solid var(--line);border-radius:var(--r-1);background:var(--surface);text-align:center;padding:0;outline:none;font-family:var(--font-mono);font-size:var(--fs-14)}
.bars .n .i:focus-visible{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.bars .n .i.is-invalid{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-soft)}
.bars .n .op{color:var(--ink-2);font-size:var(--fs-12)}
/* verdict block */
.card{background:var(--surface);border:var(--bw) solid var(--line-2);border-radius:var(--r-2)}
.verdict{padding:14px var(--s-4) 12px;border-bottom:var(--bw) solid var(--line-3);display:flex;align-items:center;gap:14px;border-radius:var(--r-2) var(--r-2) 0 0}
.verdict .mark{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.verdict .word{font-size:var(--fs-22);font-weight:600}
.verdict .readout{margin-left:auto}
.verdict[data-state="ok"]{background:var(--ok-soft)} .verdict[data-state="ok"] .mark{background:var(--ok)} .verdict[data-state="ok"] .word,.verdict[data-state="ok"] .readout{color:var(--ok-ink)}
.verdict[data-state="warn"]{background:var(--warn-soft)} .verdict[data-state="warn"] .mark{background:var(--warn)} .verdict[data-state="warn"] .word,.verdict[data-state="warn"] .readout{color:var(--warn-ink)}
.verdict[data-state="bad"]{background:var(--bad-soft)} .verdict[data-state="bad"] .mark{background:var(--bad)} .verdict[data-state="bad"] .word,.verdict[data-state="bad"] .readout{color:var(--bad-ink)}
/* verdict strip (phone, sticky) */
.verdict-strip{align-items:center;gap:10px;padding:0 var(--s-4);height:52px;border-bottom:var(--bw) solid}
.verdict-strip .mark{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.verdict-strip .word{font-size:17px;font-weight:600} .verdict-strip .readout{margin-left:auto;font-size:var(--fs-22)}
.verdict-strip[data-state="ok"]{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok-ink)} .verdict-strip[data-state="ok"] .mark{background:var(--ok)}
.verdict-strip[data-state="warn"]{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn-ink)} .verdict-strip[data-state="warn"] .mark{background:var(--warn)}
.verdict-strip[data-state="bad"]{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad-ink)} .verdict-strip[data-state="bad"] .mark{background:var(--bad)}
.verdict-strip[data-state="loading"],.verdict-strip[data-state="stale"]{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink-hover);position:relative}
/* ledger */
.ledger{display:flex;flex-direction:column}
.ledger .row{display:grid;grid-template-columns:minmax(0,1fr) 54px;grid-template-areas:"t d" "m m";gap:8px 10px;align-items:center;padding:12px var(--s-4);border-bottom:var(--bw) solid var(--line-3)}
.ledger .row > div:first-child{grid-area:t} .ledger .row .meter{grid-area:m} .ledger .row .dcr{grid-area:d}
.ledger .name{font-weight:500} .ledger .detail{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--ink-2)}
.meter{height:8px;background:var(--line-3);position:relative;border-radius:1px}
.meter i{position:absolute;left:0;top:0;bottom:0;background:var(--ok);transition:width var(--t-base) var(--ease)}
.meter s{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--warn);left:95%}  /* the 0.95 tick */
.meter[data-state="warn"] i{background:var(--warn)} .meter[data-state="bad"] i{background:var(--bad)} .meter[data-state="none"] i{background:var(--ink-3)}
/* stale + loading */
.is-stale{opacity:.45;transition:opacity var(--t-base) var(--ease)}
.strip{display:flex;align-items:center;gap:10px;padding:8px var(--s-4);font-size:var(--fs-12);border-bottom:var(--bw) solid}
.strip--info{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink-hover)}
.strip--bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad-ink)}
.spin{width:14px;height:14px;border:2px solid var(--brand);border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-right-color:var(--brand-line)}}
.skel{display:inline-block;height:12px;background:var(--line-3);border-radius:2px}
.progress{height:4px;background:var(--line-3);border-radius:2px;position:relative;overflow:hidden}
.progress i{position:absolute;left:0;top:0;bottom:0;background:var(--brand);border-radius:2px;transition:width var(--t-base) var(--ease)}
.steps{display:flex;flex-direction:column}
.steps li{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:var(--fs-13);list-style:none}
.steps .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.steps li[data-s="done"] .dot{background:var(--brand);border-color:var(--brand)}
.steps li[data-s="doing"] .dot{border:2px solid var(--brand);border-right-color:transparent;animation:spin .8s linear infinite}
.steps li[data-s="todo"]{color:var(--ink-3)} .steps .status{margin-left:auto;color:var(--ink-2);font-size:var(--fs-12)}
/* notices */
.notice{display:flex;gap:10px;padding:10px var(--s-4);font-size:var(--fs-13);line-height:var(--lh-ui);border:var(--bw) solid;border-radius:var(--r-1)}
.notice svg{flex-shrink:0;margin-top:1px}
.notice--warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn-ink)}
.notice--bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad-ink)}
.notice--info{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink-hover)}
.verdict-card .notice{border-left:0;border-right:0;border-top:0;border-radius:0}
/* buttons */
.btn{text-decoration:none;font-size:var(--fs-13);font-weight:500;padding:9px 14px;border:var(--bw) solid var(--brand-ink);background:var(--brand-ink);color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s-2);border-radius:var(--r-1);transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn:hover{background:var(--brand-ink-hover);border-color:var(--brand-ink-hover)}
.btn:active{background:#1a4577}
.btn--sec{background:var(--surface);color:var(--brand-ink)} .btn--sec:hover{background:var(--brand-soft)} .btn--sec:active{background:var(--brand-line)}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--line-3);border-color:var(--line-3);color:var(--ink-3);cursor:not-allowed}
.btn--small{padding:5px 10px;font-size:var(--fs-12)}
.actions{padding:12px var(--s-4) 4px;display:flex;gap:var(--s-2);flex-wrap:wrap}
/* disclosure */
.disc{background:var(--surface);border:var(--bw) solid var(--line-2);border-radius:var(--r-2)}
.disc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px var(--s-4);font-weight:500;font-size:var(--fs-14)}
.disc summary::-webkit-details-marker{display:none}
.disc summary::before{content:"▸";color:var(--ink-2);font-size:var(--fs-12)} .disc[open] summary::before{content:"▾"}
.disc summary .lbl{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400}
.disc summary:hover{background:var(--surface-2)}
.disc--code{background:var(--ink);border-color:var(--ink);color:#dfe5ec} .disc--code summary{color:#fff} .disc--code summary:hover{background:#252a30} .disc--code summary .lbl{color:#8b95a1}
.disc--code .btn--sec{background:transparent;color:#fff;border-color:#4a5563}
/* dense table (DataFrame) */
.df{width:100%;border-collapse:collapse}
.df th,.df td{padding:6px 10px;border-bottom:var(--bw) solid var(--line-3);text-align:right;font-family:var(--font-mono);font-size:var(--fs-12);white-space:nowrap}
.df th{font-family:var(--font-sans);font-weight:500;color:var(--ink-2);font-size:var(--fs-11);border-bottom:var(--bw) solid var(--ink)}
.df td:first-child,.df th:first-child{text-align:left;font-family:var(--font-sans)}
.df tr:hover td{background:var(--surface-2)}
.df td.dcr{font-weight:600}
/* code block */
.codeblock{margin:0;padding:4px var(--s-4) var(--s-4);font-family:var(--font-mono);font-size:var(--fs-12);line-height:1.6;white-space:pre;overflow-x:auto}
.codeblock .kw{color:#8fb8e6} .codeblock .str{color:#c9e5a5} .codeblock .cm{color:#8b95a1}
.textblock{margin:0;padding:4px var(--s-4) var(--s-4);font-family:var(--font-mono);font-size:var(--fs-12);line-height:1.55;white-space:pre;overflow-x:auto;color:var(--ink);border-top:var(--bw) solid var(--line-3)}
/* toast */
.toast{position:fixed;left:var(--s-4);right:var(--s-4);bottom:var(--s-6);max-width:420px;margin:0 auto;background:var(--ink);color:#fff;padding:12px var(--s-4);border-radius:var(--r-2);font-size:var(--fs-14);display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-toast);opacity:0;transform:translateY(8px);transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);pointer-events:none}
.toast.is-on{opacity:1;transform:none}
/* drawing (SVG) */
.drawing{background:var(--surface);border:var(--bw) solid var(--line-2);border-radius:var(--r-2);display:flex;align-items:center;justify-content:center;height:300px;position:relative}
.drawing .lbl{position:absolute;left:12px;top:10px}
.drawing svg{font-family:var(--font-sans);font-size:var(--fs-12)}
.dw-concrete{fill:var(--surface-3);stroke:#6b7580;stroke-width:1.2}
.dw-hatch{fill:url(#hatch)}
.dw-stirrup{fill:none;stroke:var(--brand);stroke-width:2.6}
.dw-stirrup--none{stroke:var(--line);stroke-dasharray:4 3}
.dw-bar{fill:var(--ink)}
.dw-label{fill:var(--ink)} .dw-label--stirrup{fill:var(--brand)} .dw-dim{fill:var(--ink-2)}
.dw-cut{stroke:#6b7580;stroke-dasharray:4 3}
/* calculator card (home) */
.ccard{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--surface);border:var(--bw) solid var(--line-2);border-radius:var(--r-2);transition:border-color var(--t-fast) var(--ease)}
.ccard:hover{border-color:var(--brand);color:inherit} .ccard:focus-visible{box-shadow:var(--focus)}
.ccard .head{display:flex;align-items:flex-start;gap:12px}
.ccard .name{font-size:var(--fs-16);font-weight:600} .ccard .desc{font-size:var(--fs-12);color:var(--ink-2);margin-top:2px;line-height:var(--lh-ui)}
.ccard .foot{display:flex;align-items:center;margin-top:auto;padding:0;border:0;font-size:var(--fs-11)}
.ccard .tag{letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ok)} .ccard .go{margin-left:auto;font-size:var(--fs-13);color:var(--brand-ink)}
.ccard--soon{opacity:.6;pointer-events:none} .ccard--soon .tag{color:var(--ink-3)}
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}

/* ---------- 5b. HOME ---------- */
.eyebrow{font-size:var(--fs-11);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.home{background:var(--surface)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:48px;padding:52px var(--s-6) 44px;align-items:center}
.hero .t-h1{font-size:42px;letter-spacing:-.02em;line-height:1.1;max-width:20ch;text-wrap:balance;margin-top:var(--s-4)}
.hero .lead{font-size:var(--fs-16);line-height:var(--lh-body);color:var(--ink-2);max-width:540px;margin-top:18px}
.hero .cta{display:flex;gap:10px;margin-top:26px;align-items:center;flex-wrap:wrap}
.hero .cta .btn{font-size:var(--fs-14);padding:12px 18px}
.facts{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:22px}
.fact{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-13);color:var(--ink);padding:6px 12px 6px 8px;border:var(--bw) solid var(--line-2);border-radius:999px;background:var(--surface)}
.fact i{width:16px;height:16px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
/* hero visual: three real components composed */
.viz{position:relative;width:560px;height:440px}
.viz-draw{position:absolute;left:0;top:0;width:330px;height:360px;background:var(--surface);border:var(--bw) solid var(--line-2);border-radius:var(--r-2);display:flex;align-items:center;justify-content:center}
.viz-draw .eyebrow{position:absolute;left:14px;top:12px}
.viz-prop{position:absolute;left:300px;top:36px;width:260px;background:var(--surface);border:var(--bw) solid var(--line-2);border-radius:var(--r-2);box-shadow:0 10px 30px rgba(26,29,33,.10)}
.viz-prop .hd{padding:10px 12px 8px;border-bottom:var(--bw) solid var(--line-3);display:flex;align-items:center;gap:8px}
.viz-prop .hd .eyebrow{color:var(--ink)} .viz-prop .hd .grp-name{margin-left:auto;font-size:var(--fs-11);color:var(--ink-2)}
.viz-prop .opt{font-size:var(--fs-13);grid-template-columns:18px minmax(0,1fr) 58px 44px;padding:7px 10px}
.viz-prop .more{padding:8px 12px;font-size:var(--fs-12);color:var(--brand-ink);border-top:var(--bw) solid var(--line-3)}
.viz-verdict{position:absolute;left:24px;top:376px;width:512px;background:var(--surface);border:var(--bw) solid var(--line-2);border-radius:var(--r-2);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 14px;box-shadow:0 10px 30px rgba(26,29,33,.08)}
.viz-verdict .word{display:flex;align-items:center;gap:8px;font-size:var(--fs-16);font-weight:600;color:var(--ok-ink)}
.viz-verdict .word .mark{width:26px;height:26px;border-radius:50%;background:var(--ok);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.viz-verdict .word .readout{font-size:var(--fs-22);color:var(--ok-ink)}
.viz-verdict .mini{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-11);color:var(--ink-2)}
.viz-verdict .mini > div{display:flex;gap:8px;align-items:center} .viz-verdict .mini span:first-child{width:88px} .viz-verdict .mini .meter{flex-grow:1;height:6px} .viz-verdict .mini .num{color:var(--ink)}
.viz-verdict .btn{font-size:var(--fs-12);padding:8px 12px}
.viz-verdict .sum-line{display:none;font-size:var(--fs-12);color:var(--ok-ink);text-align:right}
/* steps */
.steps-band{padding:40px var(--s-6);border-top:var(--bw) solid var(--line-3);border-bottom:var(--bw) solid var(--line-3)}
.steps-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:18px}
.step{display:flex;flex-direction:column;gap:var(--s-2)}
.step .n{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-13);font-weight:600}
.step .t{font-size:var(--fs-15);font-weight:600;line-height:1.3} .step .d{font-size:var(--fs-13);color:var(--ink-2);line-height:1.5}
/* calculators */
.calcs{padding:40px var(--s-6) 0}
.calcs .head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px} .calcs .head .t-h2{font-size:var(--fs-22);letter-spacing:-.01em} .calcs .head .sub{font-size:var(--fs-13);color:var(--ink-2)}
.cgrid--home{grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:auto auto;gap:14px}
.ccard--featured{grid-row:1 / span 2;flex-direction:row;gap:20px;padding:22px}
.ccard--featured .body{display:flex;flex-direction:column;gap:10px;flex-grow:1}
.ccard--featured .name{font-size:var(--fs-20)} .ccard--featured .desc{font-size:13.5px} .ccard--featured .codes{font-size:var(--fs-12);color:var(--ink-2)}
.ccard--featured .fig{flex-shrink:0}
.soon-strip{grid-column:2 / span 2;display:flex;align-items:center;gap:18px;padding:14px 18px;border:var(--bw) dashed var(--line);border-radius:var(--r-2);font-size:var(--fs-13);color:var(--ink-2);flex-wrap:wrap}
.soon-strip .eyebrow{color:var(--ink-3)} .soon-strip .item{display:flex;align-items:center;gap:8px} .soon-strip .item svg{width:28px;height:28px} .soon-strip a{margin-left:auto;text-decoration:none}
/* trust band */
.band{background:var(--brand-soft);margin-top:44px;padding:40px var(--s-6)}
.band-grid{display:grid;grid-template-columns:420px minmax(0,1fr);gap:56px;align-items:center}
.big{font-family:var(--font-mono);font-size:64px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--brand-ink-hover)}
.band .lead-t{font-size:var(--fs-15);font-weight:600;margin-top:10px} .band .lead-d{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:6px}
.band-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.band-cols b{display:block;color:var(--ink);font-weight:600}
/* mento in Python and help beyond it: their side padding sits here, before the 1360 px centering
   below; declared after it, the shorthand overrode it and the two sections ran flush left */
.pysec,.further{padding:48px var(--s-6) 0}
/* support */
.support{padding:48px var(--s-6) 0;display:grid;grid-template-columns:1.1fr 1fr;gap:56px}
.support .t-h2{font-size:var(--fs-22);letter-spacing:-.01em;line-height:1.25}
.support .say{font-size:var(--fs-14);line-height:1.6;color:var(--ink-2);margin-top:12px}
.support .donate{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:12px} .support .donate .btn{text-decoration:none}
.support .fine{font-size:11.5px;color:var(--ink-2);margin-top:8px}
.support .also{display:flex;flex-direction:column;gap:14px;font-size:var(--fs-14);line-height:1.55} .support .also b{font-weight:600}
/* team */
.team{padding:48px var(--s-6) 0}
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start;margin-top:18px}
.person{display:flex;gap:14px;align-items:flex-start}
.person .av{width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--fs-15);flex-shrink:0;overflow:hidden}
.person .av img{width:100%;height:100%;object-fit:cover}
.person .nm{font-size:var(--fs-15);font-weight:600} .person .rl{font-size:var(--fs-13);color:var(--ink-2);line-height:1.5} .person .links{margin-top:6px;display:flex;gap:12px;font-size:12.5px} .person .links a{text-decoration:none}
.team .about{font-size:13.5px;line-height:1.6;color:var(--ink-2)} .team .about a{text-decoration:none}
.home .foot{margin-top:48px}

/* ---------- 6. PHONE (≤ 720 px) · last on purpose: it must win over the component rules above ---------- */
.page{container-type:inline-size;container-name:calc}
@container calc (max-width: 720px){
  .top{padding:0 var(--s-4);gap:10px} .top .sub,.top nav a:first-child,.top .crumb{display:none} .top .title{white-space:nowrap;font-size:var(--fs-13);color:var(--ink-2)} .top nav{gap:var(--s-3)}
  .stations{display:flex;flex-direction:column;gap:0;padding:0}
  .station{gap:10px;padding:0 var(--s-4)}
  .st{padding:18px 0 8px;border-bottom:0}
  .drawing{margin:var(--s-3) var(--s-4) 0;height:auto;padding:var(--s-2) 0}
  .station-4{margin:0 var(--s-4)}
  .verdict-strip{display:flex;position:sticky;top:0;z-index:5}
  .field .in,.cell,.seg{height:var(--ctl-h-touch);font-size:var(--fs-16)}
  .seg button{padding:12px 6px;font-size:var(--fs-13)}
  .bars .n .i{width:40px;height:var(--ctl-h-touch);font-size:var(--fs-16)}
  .actions{flex-direction:column}
  .opt,.grp .hd{min-height:48px}
  .btn{height:var(--ctl-h-touch);flex:1;justify-content:center;font-size:var(--fs-14)}
  .below{padding:var(--s-4) 0 0;gap:0}
  .disc{border-left:0;border-right:0;border-radius:0}
  .df-wrap{overflow-x:auto} .df td:first-child,.df th:first-child{position:sticky;left:0;background:var(--surface)}
  .combos{grid-template-columns:minmax(0,1fr) 62px 62px 62px}
  .combos .rm{display:none}
  .foot{flex-direction:column;gap:var(--s-1)}
  body{background:var(--surface)}
  /* home */
  .hero{grid-template-columns:1fr;padding:26px var(--s-4) 0;gap:22px;align-items:start}
  .hero .t-h1{font-size:30px} .hero .lead{font-size:14.5px;margin-top:12px}
  .hero .cta{margin-top:18px} .hero .cta .btn{width:100%;justify-content:center} .hero .cta .btn--sec{display:none}
  .facts{margin-top:14px}
  .viz{width:auto;height:auto;display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px}
  .viz-draw,.viz-prop,.viz-verdict{position:static;width:auto;height:auto;box-shadow:none}
  .viz-draw{padding:8px 4px} .viz-draw .eyebrow{display:none} .viz-draw svg{width:110px;height:auto}
  .viz-prop .opt{grid-template-columns:14px minmax(0,1fr) 40px} .viz-prop .opt .area{display:none}
  .viz-verdict{grid-column:1 / span 2;grid-template-columns:auto minmax(0,1fr);background:var(--ok-soft);border-color:var(--ok-line)}
  .viz-verdict .mini{display:none} .viz-verdict .btn{display:none} .viz-verdict .sum-line{display:block}
  .steps-band{padding:28px var(--s-4) 0;border:0} .steps-row{grid-template-columns:1fr;gap:18px;margin-top:14px}
  .calcs{padding:28px var(--s-4) 0} .calcs .head{flex-direction:column;gap:2px} .cgrid--home{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .ccard--featured{grid-row:auto;flex-direction:column;padding:18px} .ccard--featured .fig{display:none} .ccard--featured .name{font-size:var(--fs-16)}
  .soon-strip{grid-column:auto;gap:12px;padding:12px 14px} .soon-strip .item svg{display:none}
  .band{margin-top:28px;padding:28px var(--s-4)} .band-grid{grid-template-columns:1fr;gap:18px} .big{font-size:52px} .band-cols{grid-template-columns:1fr;gap:14px}
  .support{padding:28px var(--s-4) 0;grid-template-columns:1fr;gap:24px} .support .donate{flex-direction:column} .support .donate .btn{width:100%;justify-content:center}
  .team{padding:28px var(--s-4) 0} .team-grid{grid-template-columns:1fr;gap:22px}
  .home .foot{margin-top:32px}
}

@container calc (max-width:720px){.cgrid{grid-template-columns:1fr;gap:10px}}

/* ---------- 7. ADDITIONS to design system v1 · appended, nothing above is reordered ---------- */
/* wide screens: the content stops at 1360 px and centres, with the margin taken from the side padding,
   so the header bar and the home's band still run edge to edge. Without it the result column (1fr)
   stretched past 1000 px on a large monitor while the three fixed stations stayed on the left. */
@container calc (min-width:721px){
  .top,.stations,.below,.foot,.hero,.steps-band,.calcs,.band,.pysec,.further,.support,.team{
    padding-left:max(var(--s-6),calc((100% - 1360px) / 2));
    padding-right:max(var(--s-6),calc((100% - 1360px) / 2));
  }
}
/* tablet (721–1079 px): two columns, 1 · 2 on top, drawing under them, 3 · 4 below (section 1 of the design system) */
@container calc (min-width:721px) and (max-width:1079px){
  .stations{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .station-1{grid-column:1;grid-row:1} .station-2{grid-column:2;grid-row:1}
  .drawing{grid-column:1 / span 2;grid-row:2}
  .station-3{grid-column:1;grid-row:3} .station-4{grid-column:2;grid-row:3}
  .hero{grid-template-columns:minmax(0,1fr)}
}
/* a.btn: the base `a:hover` rule outranks `.btn`, which left blue text on the blue fill */
a.btn:hover,a.btn:active{color:#fff}
a.btn--sec:hover,a.btn--sec:active{color:var(--brand-ink)}
/* small calculator cards: the section drawing goes on top, at the card's width, not as a 40 px icon beside the text */
.ccard:not(.ccard--featured) .head{flex-direction:column;gap:12px}
.ccard:not(.ccard--featured) .fig{width:100%}
.ccard:not(.ccard--featured) .fig svg{display:block;width:100%;height:auto}
/* `.home .foot` (the page footer) also matches a card's foot and beats its margin-top:auto */
.home .ccard .foot{margin-top:auto}
/* section drawings: the stirrup stays blue (3.10), its label is written in ink like the others;
   the b × h note a size larger */
.dw-label--stirrup{fill:var(--ink)}
.dw-dim{font-size:var(--fs-14)}
/* the drawing's own Copiá (3.11's small secondary button), in the corner facing its label */
.drawing .drawing-copy{position:absolute;right:10px;top:6px}
/* a disclosure's Copiá cannot live inside its <summary>: a control inside a control is announced
   badly by screen readers. It sits beside the <details>, over the summary's row, as 3.14 draws it */
.disc-wrap{position:relative}
.disc-wrap > .disc summary{padding-right:120px}
.disc-wrap > .disc-copy{position:absolute;right:var(--s-4);top:8px}
.disc-wrap > .disc-copy--dark{background:transparent;color:#fff;border-color:#4a5563}
.disc-wrap > .disc-copy--dark:hover{background:#252a30}
/* AA contrast: --ink-3 is "never for information" (tokens), and these two carry some */
.soon-strip .eyebrow,.steps li[data-s="todo"]{color:var(--ink-2)}
/* number fields without the spinner: ↑/↓ already step the value (5.2), and the arrows took the
   room of a third digit in the 236 px station (b = 120 did not fit) */
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* touch targets ≥ 44 px on the phone for the links that stand alone (5.9) */
@container calc (max-width:720px){
  .link-btn,.brand,.top nav a,.person .links a,.soon-strip a,.band-grid > div > a{min-height:var(--ctl-h-touch);min-width:var(--ctl-h-touch);display:inline-flex;align-items:center}
  .top nav a,.person .links a{justify-content:center}
  .seg--small button{min-width:var(--ctl-h-touch)}
  .support .donate .btn,.actions .btn{flex:none}  /* in a column, flex:1 would win over the 44 px height */
  /* a long calculator name ("Losa en una dirección") gives way instead of pushing ES/EN off a 360 px screen */
  .top .title{min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* the same in a disclosure's summary: the API name gives way, the Copiá button keeps its size */
  .disc summary .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .disc-wrap > .disc-copy{top:1px;flex:none}
  /* the control is 44 px, so the input inside it has to be too: tapping its padding must land on the field */
  .field .in input,.field .in.sel select,.cell input{height:100%}
}
/* home: the trust band grows a second and third row — how a calculation gets in, and the proof
   anyone can check — and two sections follow it: mento as a Python package, and help beyond it */
.band-grid{align-items:start}
.vsteps{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.vsteps li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.vsteps .n{width:24px;height:24px;border-radius:50%;background:var(--brand-ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-12);font-weight:600;flex-shrink:0}
.vsteps b{display:block;color:var(--ink);font-weight:600}
.proof{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.proof li{display:flex}
.proof li > *{flex-grow:1;display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--surface);border:var(--bw) solid var(--brand-line);border-radius:var(--r-2);text-decoration:none;color:var(--ink-2);font-size:var(--fs-12);line-height:1.45;transition:border-color var(--t-fast) var(--ease)}
.proof a:hover{border-color:var(--brand);color:var(--ink-2)} .proof a:focus-visible{box-shadow:var(--focus);outline:none}
.proof b{color:var(--ink);font-size:var(--fs-14);font-weight:600}
.band .band-cols{margin-top:28px;padding-top:24px;border-top:var(--bw) solid var(--brand-line)}
/* mento in Python */
.pysec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:start}
.pysec .t-h2{font-size:var(--fs-22);letter-spacing:-.01em;line-height:1.25;margin-top:var(--s-2)}
.pysec .say{font-size:var(--fs-14);line-height:1.6;color:var(--ink-2);margin:12px 0 0}
.ladder{list-style:none;margin:18px 0 0;padding:0}
.ladder li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-top:var(--bw) solid var(--line-3);font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ladder b{display:block;color:var(--ink);font-size:var(--fs-15);font-weight:600}
.ladder .lv{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-13);font-weight:600}
.ladder .is-here .lv{background:var(--brand-ink)}
.ladder .here{font-size:var(--fs-11);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink);background:var(--brand-soft);border:var(--bw) solid var(--brand-line);border-radius:999px;padding:2px 8px;white-space:nowrap}
.py-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pycode{min-width:0;background:var(--ink);border:var(--bw) solid var(--ink);border-radius:var(--r-2);overflow:hidden;color:#dfe5ec}
.pycode-hd{display:flex;align-items:center;gap:12px;padding:12px var(--s-4) 6px}
.pycode-hd .eyebrow{color:#8b95a1} .pycode-hd code{margin-left:auto;color:#c9e5a5;white-space:nowrap}
.pycode .codeblock:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.pyout{background:var(--surface);color:var(--ink);padding:6px 0 14px}
.pyout .df th:not(:first-child),.pyout .df td:not(:first-child){width:36%}
.pyout .mk{margin-left:6px;vertical-align:-1px}
.pyout .hint{margin:10px var(--s-4) 0}
/* help beyond the package: firms and the course */
.further .head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .further .head .t-h2{font-size:var(--fs-22);letter-spacing:-.01em} .further .fu-sub{margin:0;font-size:var(--fs-13);line-height:1.5;color:var(--ink-2)}
.further-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;margin-top:14px}
.fcard{display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--surface);border:var(--bw) solid var(--line-2);border-radius:var(--r-2)}
.fcard--biz{background:var(--brand-soft);border-color:var(--brand-line)}
.fcard .fname{margin:0;font-size:var(--fs-20);font-weight:600;line-height:1.25}
.flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13.5px;line-height:1.55;color:var(--ink-2)} .flist b{color:var(--ink);font-weight:600}
.fdesc{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.tag-soon{align-self:flex-start;font-size:var(--fs-11);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink);background:var(--brand-soft);border:var(--bw) solid var(--brand-line);border-radius:999px;padding:2px 8px}
.fcta{margin-top:auto;padding-top:6px}
@container calc (min-width:721px) and (max-width:1079px){
  .band-grid,.pysec{grid-template-columns:minmax(0,1fr)}
}
@container calc (max-width:720px){
  .top .nav-firms{display:none}
  .vsteps{grid-template-columns:1fr;gap:14px}
  .band .band-cols{margin-top:22px;padding-top:18px}
  .pysec{grid-template-columns:minmax(0,1fr);padding:28px var(--s-4) 0;gap:22px}
  .ladder li{grid-template-columns:28px minmax(0,1fr)} .ladder .here{grid-column:2;justify-self:start;margin-top:-4px}
  .py-links{flex-direction:column} .py-links .btn{flex:none;width:100%;justify-content:center}
  .pyout .df th,.pyout .df td{padding:6px 8px}
  .further{padding:28px var(--s-4) 0} .further .head{flex-direction:column;gap:2px}
  .further-grid{grid-template-columns:minmax(0,1fr);gap:10px} .fcard{padding:18px}
  .fcta .btn{flex:none;width:100%;justify-content:center}
}
/* home rhythm: the design system's density is a calculator's, where it helps; a landing page reads
   in sections, so they get room between them and headings that stand clear of the body text.
   Components keep their own density: it is the product being shown. */
.home main{--sec:80px}  /* on main: a container query cannot restyle .page, the container itself */
.hero{padding-top:64px;padding-bottom:64px}
.steps-band{padding-top:56px;padding-bottom:56px} .steps-row{gap:40px;margin-top:24px}
.calcs{padding-top:var(--sec)} .calcs .head{margin-bottom:24px}
.calcs .head .t-h2,.pysec .t-h2,.further .head .t-h2,.support .t-h2{font-size:1.625rem;letter-spacing:-.015em;line-height:1.2}
.band{margin-top:var(--sec);padding-top:64px;padding-bottom:64px}
.band .lead-t{font-size:var(--fs-20);line-height:1.3} .band .lead-d{font-size:var(--fs-15);margin-top:10px}
.vsteps{margin-top:16px;gap:32px}
.proof{margin-top:48px}
.band .band-cols{margin-top:40px;padding-top:32px;gap:40px}
.pysec{padding-top:var(--sec);gap:64px}
.pysec .say,.support .say{font-size:var(--fs-15)}
.pysec .say{margin-top:14px}
.ladder{margin-top:28px} .ladder li{padding:18px 0}
.py-links{margin-top:28px}
.further{padding-top:var(--sec)} .further .fu-sub{font-size:var(--fs-15)}
.further-grid{margin-top:24px;gap:20px} .fcard{padding:28px;gap:12px}
.support{padding-top:var(--sec)}
.team{padding-top:var(--sec)} .team-grid{margin-top:24px}
.home .foot{margin-top:var(--sec)}
@container calc (max-width:720px){
  .home main{--sec:52px}
  .hero{padding-top:32px;padding-bottom:0}
  .steps-band{padding-top:44px;padding-bottom:0} .steps-row{gap:24px;margin-top:16px}
  .calcs .head{margin-bottom:16px}
  .calcs .head .t-h2,.pysec .t-h2,.further .head .t-h2,.support .t-h2{font-size:var(--fs-22)}
  .band{padding-top:40px;padding-bottom:40px}
  .band .lead-t{font-size:var(--fs-16)} .band .lead-d{font-size:var(--fs-14)}
  .vsteps{gap:16px} .proof{margin-top:32px}
  .band .band-cols{margin-top:28px;padding-top:24px;gap:18px}
  .pysec{gap:28px} .ladder li{padding:14px 0}
  .further-grid{margin-top:16px;gap:12px} .fcard{padding:20px}
}

/* ---------- 8. DESIGN SYSTEM v2 · appended, v1 above stays as it was ----------
   Técnico y sobrio, con profundidad: the stations become panels, controls get softer frames and a
   single focus ring, the verdict and the drawing read clearer. Light only: calculation software is
   read on white. Every rule here comes after v1 and wins by order, so where a v1 state (disabled,
   invalid, the dark code block) is more specific it is restated below. */
:root{
  --ink:#15181d; --ink-2:#586270;
  --line:#d2d9e1; --line-2:#e0e5eb; --line-3:#edf0f3;
  --surface-2:#f4f6f8; --surface-3:#eceff3;
  --line-hover:#b9c2cd;
  --r-1:6px; --r-2:10px; --r-3:14px;
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-card:0 1px 2px rgba(15,23,42,.04),0 4px 14px -6px rgba(15,23,42,.10);
  --sh-pop:0 16px 40px -12px rgba(15,23,42,.25),0 2px 6px rgba(15,23,42,.06);
  --ring:0 0 0 3px rgba(72,144,210,.22);
  --ring-bad:0 0 0 3px rgba(180,35,24,.16);
  --grid-dot:#dfe4ea;
  --t-fast:140ms; --t-base:240ms;
}
/* the tokens above re-set the durations, so the reduced-motion zero has to follow them */
@media (prefers-reduced-motion:reduce){ :root{ --t-fast:0ms; --t-base:0ms; } }
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.lbl{letter-spacing:.06em}

/* header: sticky and translucent on desktop */
.top{position:sticky;top:0;z-index:20;height:56px;border-bottom-color:var(--line-2);
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}
.top .title{font-weight:500;white-space:nowrap}
.brand,.brand svg{flex-shrink:0}  /* a full header on a phone squeezed the logo to nothing; the title gives way instead */
/* .sub is also the math subscript class, with line-height:0: a subtitle that wrapped printed its two
   lines on top of each other (the home at ~780 px). Now a pill that never wraps, and leaves when short of room */
.top .sub{white-space:nowrap;line-height:1.5;vertical-align:baseline;padding:1px 8px;border-radius:999px;background:var(--surface-3);font-size:11.5px}
.top nav a{color:var(--ink-2);font-weight:500;transition:color var(--t-fast) var(--ease)}
.top nav a:hover{color:var(--ink)}
@container calc (max-width:960px){ .top .sub{display:none} }

/* stations as panels. Their padding comes out of the gaps (14 px, v1 had 20), so the result card
   keeps v1's width (~430 px at 1360) and the insides stay close to v1's stations (226 · 300 · 282) */
@container calc (min-width:721px){
  .stations{gap:14px;padding-top:24px}
  .station-1,.station-2,.station-3{background:var(--surface);border:var(--bw) solid var(--line-2);border-radius:var(--r-3);box-shadow:var(--sh-card);padding:2px 12px 12px}
}
@container calc (min-width:1080px){ .stations{grid-template-columns:252px 326px 308px minmax(0,1fr)} }
.st{border-bottom:var(--bw) solid var(--line-3);padding:14px 0 12px;font-weight:600;color:var(--ink)}
.st b{background:var(--brand-soft);color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--brand-line);width:20px;height:20px;border-radius:6px;font-family:var(--font-mono);font-weight:500}

/* fields: one focus mark per control, the frame's ring. v1's global :focus-visible also ringed the
   bare <input>/<select> inside the frame, a second blue rectangle within the first */
.field .in,.cell,.bars .n .i{border-radius:var(--r-1);border-color:var(--line);box-shadow:var(--sh-1)}
.field .in:hover,.cell:hover{border-color:var(--line-hover)}
.field .in:focus-within,.cell:focus-within,.bars .n .i:focus-visible{border-color:var(--brand);box-shadow:var(--ring)}
.field .in :is(input,select):focus-visible,.cell input:focus-visible{box-shadow:none;outline:none}
.field.is-invalid .in,.field[aria-invalid="true"] .in,.cell.is-invalid,.bars .n .i.is-invalid{border-color:var(--bad);box-shadow:var(--ring-bad)}
.field.is-disabled .in{background:var(--surface-3);border-color:var(--line-3);box-shadow:none}
.field .in.sel::after{content:"";width:12px;height:12px;flex-shrink:0;background:var(--ink-2);transition:transform var(--t-base) var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
/* the open list: a styled panel where the browser supports customizable <select> (Chrome and Edge
   135+) with a fine pointer. Phones keep the system picker, the better one there; Firefox and Safari
   keep the native list. Nothing breaks, it is only plainer */
@supports (appearance:base-select){
  @media (hover:hover) and (pointer:fine){
    .field .in.sel select,.field .in.sel select::picker(select){appearance:base-select}
    .field .in.sel select{border:0;background:transparent;padding:0;min-block-size:0;height:100%;display:flex;align-items:center;cursor:pointer;color:var(--ink)}
    .field .in.sel select::picker-icon{display:none}
    .field .in.sel:has(select:open){border-color:var(--brand);box-shadow:var(--ring)}
    .field .in.sel:has(select:open)::after{transform:rotate(180deg)}
    .field .in.sel select::picker(select){margin:6px 0 0 -9px;min-inline-size:calc(anchor-size(self-inline) + 30px);padding:4px;
      border:var(--bw) solid var(--line-2);border-radius:var(--r-2);background:var(--surface);box-shadow:var(--sh-pop);
      opacity:0;translate:0 -4px;transition:opacity .16s var(--ease),translate .16s var(--ease),display .16s allow-discrete,overlay .16s allow-discrete}
    .field .in.sel select:open::picker(select){opacity:1;translate:0 0}
    @starting-style{ .field .in.sel select:open::picker(select){opacity:0;translate:0 -4px} }
    .field .in.sel option{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-1);font-size:var(--fs-14);color:var(--ink);cursor:pointer;transition:background var(--t-fast) var(--ease)}
    .field .in.sel option:hover,.field .in.sel option:focus-visible{background:var(--surface-2);outline:none;box-shadow:none}
    .field .in.sel option:checked{background:var(--brand-soft);font-weight:500}
    .field .in.sel option::checkmark{order:1;margin-left:auto;content:"";width:14px;height:14px;background:var(--brand-ink);
      -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
              mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
    @media (prefers-reduced-motion:reduce){ .field .in.sel select::picker(select){transition:none} }
  }
}

/* segmented: a track with a raised thumb */
.seg{background:var(--surface-3);border:var(--bw) solid var(--line-2);border-radius:8px;padding:2px;gap:2px}
.seg button{background:transparent;color:var(--ink-2);border-radius:6px;font-weight:500;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.seg button + button{border-left:0}
.seg button:hover{background:transparent;color:var(--ink)}
.seg button[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(15,23,42,.12),0 0 0 1px rgba(15,23,42,.05)}

/* rebar groups: the chosen option's DCR as a pill */
.grp{border-color:var(--line-2);border-radius:8px;box-shadow:var(--sh-1);overflow:hidden}
.grp .hd{grid-template-columns:70px minmax(0,1fr) auto 12px;border-radius:0;transition:background var(--t-base) var(--ease)}
.grp .hd .dcr{justify-self:end;font-size:var(--fs-12);font-weight:500;padding:1px 7px;border-radius:999px}
.grp .hd .dcr.ok{background:var(--ok-soft);color:var(--ok-ink)}
.grp .hd .dcr.warn{background:var(--warn-soft);color:var(--warn-ink)}
.grp .hd .dcr.bad{background:var(--bad-soft);color:var(--bad-ink)}
.opt{transition:background var(--t-fast) var(--ease)}
.opt.is-selected,.opt:has(input:checked){box-shadow:inset 2px 0 0 var(--brand)}

/* result card: the governing DCR captioned above its number, a halo on the mark */
.card{border-color:var(--line-2);border-radius:var(--r-3);box-shadow:var(--sh-card);overflow:hidden}
.verdict{padding:18px var(--s-4) 16px;border-radius:0;transition:background-color var(--t-base) var(--ease)}
.verdict .mark{width:36px;height:36px;transition:background-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.verdict[data-state="ok"] .mark{box-shadow:0 0 0 5px var(--ok-line)}
.verdict[data-state="warn"] .mark{box-shadow:0 0 0 5px var(--warn-line)}
.verdict[data-state="bad"] .mark{box-shadow:0 0 0 5px var(--bad-line)}
.verdict .word{font-size:21px;letter-spacing:-.01em}
.verdict .dcr-max{margin-left:auto;display:inline-flex;flex-direction:column;align-items:flex-end;gap:5px}
.verdict .dcr-max .cap{font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1;opacity:.75}
.verdict .readout{margin-left:0;font-size:36px}
.verdict[data-state="ok"] .dcr-max{color:var(--ok-ink)} .verdict[data-state="warn"] .dcr-max{color:var(--warn-ink)} .verdict[data-state="bad"] .dcr-max{color:var(--bad-ink)}
.ledger .row{padding:14px var(--s-4);gap:10px 12px}
.ledger .name{font-weight:600;font-size:13.5px}
.ledger .detail{margin-top:2px}
.ledger .dcr{font-size:var(--fs-15)}
.meter{height:6px;border-radius:999px}
.meter i{border-radius:999px}
.meter s{top:-3px;bottom:-3px;width:2px;border-radius:1px;background:var(--ink-3);opacity:.55}
.verdict-card .notice{margin:12px var(--s-4) 2px;border:var(--bw) solid;border-radius:8px}
.verdict-card .notice--warn{border-color:var(--warn-line)} .verdict-card .notice--bad{border-color:var(--bad-line)}
.actions{padding:14px var(--s-4) 6px}

/* buttons */
.btn{border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(15,23,42,.18);transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--sec{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-1)}
.btn--sec svg{color:var(--brand-ink)}
.btn--sec:hover{background:var(--surface-2);border-color:var(--line-hover)}
.btn--sec:active{background:var(--surface-3)}
a.btn--sec:hover,a.btn--sec:active{color:var(--ink)}
.btn:disabled,.btn:disabled:hover,.btn[aria-disabled="true"]{background:var(--line-3);border-color:var(--line-3);color:var(--ink-3);box-shadow:none;transform:none}
.btn:disabled svg{color:inherit}
.disc--code .btn--sec,.disc-wrap > .disc-copy--dark{background:transparent;color:#fff;border-color:#3b4450;box-shadow:none}
.disc--code .btn--sec svg,.disc-wrap > .disc-copy--dark svg{color:inherit}
.disc-wrap > .disc-copy--dark:hover{background:#252a30;border-color:#4a5563}

/* drawing: engineering paper, and dimension lines (drawn by each calculator) */
.drawing{border-color:var(--line-2);border-radius:var(--r-3);box-shadow:var(--sh-card);
  background-color:var(--surface);background-image:radial-gradient(circle at 1px 1px,var(--grid-dot) 1px,transparent 0);background-size:14px 14px}
.dw-concrete{fill:var(--surface-3);stroke:var(--ink-2);stroke-width:1.2}
.dw-dl{stroke:var(--ink-3);stroke-width:1;fill:none}
.dw-dt{fill:var(--ink-2);font-family:var(--font-mono);font-size:12px}

/* below: disclosures and tables */
.disc{border:var(--bw) solid var(--line-2);border-radius:var(--r-3);box-shadow:var(--sh-card);overflow:hidden}
.disc summary{padding:14px var(--s-4);transition:background var(--t-fast) var(--ease)}
.disc summary::before{content:"";width:12px;height:12px;flex-shrink:0;background:var(--ink-2);transition:transform var(--t-base) var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 3l3 3-3 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 3l3 3-3 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.disc[open] summary::before{content:"";transform:rotate(90deg)}
.disc--code{background:#0f1319;border-color:#0f1319}
.disc--code summary::before{background:#8b95a1}
.df th{background:var(--surface-2);border-bottom:var(--bw) solid var(--line-2);padding-top:8px;padding-bottom:8px}
.df tr:last-child td{border-bottom:0}
.df tr:hover td{background:var(--brand-soft)}
.df td.dcr{font-weight:500}

/* boot: a rounded bar with a sheen */
.progress{height:6px;border-radius:999px}
.progress i{border-radius:999px;background:linear-gradient(90deg,var(--brand) 0%,#8cc0ec 50%,var(--brand) 100%);background-size:200% 100%;animation:sheen 1.6s linear infinite;transition:width .6s var(--ease)}
@keyframes sheen{from{background-position:100% 0}to{background-position:-100% 0}}
.steps li[data-s="doing"]{color:var(--ink);font-weight:500}
@media (prefers-reduced-motion:reduce){ .progress i{animation:none} }

/* home: its cards get the same depth */
.ccard,.fcard{border-radius:var(--r-3);box-shadow:var(--sh-card);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-base) var(--ease)}
.ccard:hover{box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 24px -10px rgba(15,23,42,.18)}
.ccard--soon{box-shadow:none}
.proof li > *{border-radius:var(--r-2)}
.viz-draw,.viz-prop,.viz-verdict,.pycode{border-radius:var(--r-3)}

.toast{border-radius:12px}
.verdict-strip{transition:background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.foot{border-top-color:var(--line-2)}

/* phone: the panels keep their card look, with a 12 px gutter */
@container calc (max-width:720px){
  .top{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface)}
  /* v1 bug: the grid's align-items:start, kept in the phone's flex column, sized station 3 to its
     content (~296 px) instead of the screen */
  .stations{align-items:stretch}
  .station{margin:12px 12px 0;padding:0 14px 14px;background:var(--surface);border:var(--bw) solid var(--line-2);border-radius:var(--r-3);box-shadow:var(--sh-card)}
  .st{padding:14px 0 10px}
  .drawing{margin:12px 12px 0;padding:8px 0}
  .station-4{margin:12px 12px 0}
  .below{padding:12px 12px 0;gap:12px}
  .df th:first-child{background:var(--surface-2)}
  .verdict-strip{backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px)}
}

/* a face's second row of bars: under the first, in the group headers and options and in check mode */
.grp .val .l2{display:block;font-family:var(--font-sans);font-size:var(--fs-11);color:var(--ink-2);margin-top:1px}
.bars--l2 .lbl::before{content:"↳ ";letter-spacing:0}
.bars--l2 .lbl{white-space:nowrap}

/* detailed results, laid out from mento's printout: one block per report, one card per table.
   Vertical room lives in the reports, not on the container, so a fold closes all the way */
.dtl{border-top:var(--bw) solid var(--line-3);padding:0 var(--s-4)}
.dtl:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;box-shadow:none}
.dtl-report{padding:14px 0 18px}
.dtl-report + .dtl-report{border-top:var(--bw) dashed var(--line-2)}
.dtl-h{font-size:var(--fs-14);font-weight:600;margin:0 0 12px}
.dtl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:12px;align-items:start}
.dtl-card{border:var(--bw) solid var(--line-2);border-radius:var(--r-2);overflow:hidden;background:var(--surface)}
.dtl-card--checks{grid-column:1 / -1}
.dtl-card--checks .dtl-tb tr > :first-child{width:55%}  /* the description takes the spare width, the numbers stay together */
.dtl-t{padding:9px 12px;background:var(--surface-2);border-bottom:var(--bw) solid var(--line-3);font-size:var(--fs-11);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.dtl-tb{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
.dtl-tb th,.dtl-tb td{padding:6px 12px;border-bottom:var(--bw) solid var(--line-3);text-align:left;font-weight:400;vertical-align:baseline}
.dtl-tb tbody tr:last-child > *{border-bottom:0}
.dtl-tb tbody th{color:var(--ink-2);line-height:1.4}
.dtl-tb thead th{font-size:var(--fs-11);color:var(--ink-2);font-weight:500;text-align:right;padding-top:8px;padding-bottom:6px;white-space:nowrap}
.dtl-tb .var{white-space:nowrap;padding-left:4px;padding-right:4px}
.dtl-tb .var sub{font-size:.75em;line-height:0;vertical-align:-.25em}
.dtl-tb .val{font-family:var(--font-mono);text-align:right;white-space:nowrap}
.dtl-tb .unit{color:var(--ink-2);font-size:var(--fs-12);white-space:nowrap;font-family:var(--font-sans)}
.dtl-tb td.unit{padding-left:4px}
.dtl-tb .ok{text-align:right;white-space:nowrap}
.dtl-tb tr.is-dcr > *{background:var(--surface-2);font-weight:600}
.dtl-tb td.dcr.ok{color:var(--ok)} .dtl-tb td.dcr.warn{color:var(--warn)} .dtl-tb td.dcr.bad{color:var(--bad)}
.dtl-mark{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:var(--fs-11);font-weight:500;line-height:1;border-radius:999px;padding:3px 7px;vertical-align:middle}
.dtl-mark.ok{background:var(--ok-soft);color:var(--ok);padding:3px}
.dtl-mark.bad{background:var(--bad-soft);color:var(--bad);padding:3px}
.dtl-mark.warn{background:var(--warn-soft);color:var(--warn-ink);box-shadow:inset 0 0 0 1px var(--warn-line)}

/* phone: a table of checks has no room for five columns. Its header goes and each row folds in
   two, the description on top and the figures under it, each with its column's name */
@container calc (max-width:720px){
  .dtl{padding:0 12px}
  .dtl-card--checks thead{display:none}
  .dtl-card--checks .dtl-tb tr{display:grid;grid-template-columns:auto auto auto 1fr;column-gap:16px;padding:8px 12px;border-bottom:var(--bw) solid var(--line-3)}
  .dtl-card--checks .dtl-tb tbody tr:last-child{border-bottom:0}
  .dtl-card--checks .dtl-tb tr > *,.dtl-card--checks .dtl-tb tr > :first-child{padding:0;border:0;width:auto}
  .dtl-card--checks .dtl-tb th{grid-column:1 / -1;margin-bottom:4px}
  .dtl-card--checks .dtl-tb td.val{text-align:left}
  .dtl-card--checks .dtl-tb td.val::before{content:attr(data-label);display:block;font-family:var(--font-sans);font-size:10.5px;color:var(--ink-2);margin-bottom:1px}
  .dtl-card--checks .dtl-tb td:empty{display:none}
  .dtl-card--checks .dtl-tb td.ok{grid-column:-2;justify-self:end;align-self:end}
}

/* Python, painted as an editor would on the dark ground (the home's snippet takes the same colours) */
.codeblock{color:#d6deeb}
.codeblock .kw{color:#c792ea} .codeblock .str{color:#c3e88d} .codeblock .cm{color:#7f8b99;font-style:italic}
.codeblock .num{color:#f78c6c} .codeblock .cls{color:#ffcb6b} .codeblock .fn{color:#82aaff} .codeblock .arg{color:#89ddff}

/* placeholders before the first result: the shape of what is coming, shimmering */
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.skel{display:block;height:10px;border-radius:4px;background:linear-gradient(90deg,var(--line-3) 25%,var(--surface-2) 50%,var(--line-3) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skel--pill{width:38px;height:16px;border-radius:999px;justify-self:end}
.grp--skel .hd{cursor:default}
.grp--skel .hd:hover{background:none}
.skel-block{display:flex;flex-direction:column;gap:12px;padding:16px}
@media (prefers-reduced-motion:reduce){ .skel{animation:none} }

/* home hero: its drawing on the calculator's paper, with its dimension lines */
.viz-draw{background-image:radial-gradient(circle at 1px 1px,var(--grid-dot) 1px,transparent 0);background-size:14px 14px;box-shadow:var(--sh-card)}
.viz-draw .dw-dt,.ccard .fig .dw-dt{font-size:14px}

/* ---------- 8b. MOTION · movement that says something changed, never decoration ----------
   Everything below is CSS or the browser's own animations (shared/ui.js): no library, and every
   element ends where it should if no frame runs */
/* first paint: the stations rise in, one after another; `backwards` leaves nothing behind after */
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.station-1,.station-2,.station-3,.station-4,.drawing,.below{animation:rise .45s var(--ease) backwards}
.station-2{animation-delay:40ms} .station-3{animation-delay:80ms} .station-4{animation-delay:120ms}
.drawing{animation-delay:160ms} .below{animation-delay:200ms}
/* the meters grow from their old width to the new one and settle */
.meter i{transition:width .6s cubic-bezier(.22,1,.36,1)}
/* the verdict turns (passes ↔ at the limit ↔ does not pass): the mark pops, the word slides in */
@keyframes mark-pop{0%{transform:scale(.55) rotate(-25deg)}60%{transform:scale(1.1) rotate(0)}100%{transform:none}}
@keyframes word-in{from{opacity:0;transform:translateX(-6px)}}
.verdict.is-turning .mark,.verdict-strip.is-turning .mark{animation:mark-pop .5s var(--ease)}
.verdict.is-turning .word,.verdict-strip.is-turning .word{animation:word-in .3s var(--ease)}
/* bars that were not in the drawing come in one after another */
@keyframes bar-in{from{opacity:0;transform:scale(0)}}
.dw-bar{transform-box:fill-box;transform-origin:center}
.dw-new{animation:bar-in .4s cubic-bezier(.34,1.56,.64,1) backwards}
/* a rebar group just opened: its options come in one after another */
@keyframes opt-in{from{opacity:0;transform:translateY(-4px)}}
.grp.is-opening .opt{animation:opt-in .25s var(--ease) backwards}
.grp.is-opening .opt:nth-child(2){animation-delay:30ms} .grp.is-opening .opt:nth-child(3){animation-delay:60ms}
.grp.is-opening .opt:nth-child(n+4){animation-delay:90ms}
/* recalculating: a line runs along the card's top edge. It waits 120 ms to show, so a fast
   calculation does not flicker it on every keystroke */
.card{position:relative}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--brand),transparent) no-repeat;background-size:40% 100%;transition:opacity var(--t-fast)}
.card.is-computing::before{opacity:1;transition-delay:120ms;animation:run 1s linear infinite}
@keyframes run{from{background-position:-40% 0}to{background-position:140% 0}}
/* the home's hero assembles once, as the calculator shows a result: the section, its bars, its
   labels, mento's proposal, then the verdict with its meters filling */
@keyframes slide-in{from{opacity:0;transform:translateX(16px)}}
@keyframes fade{from{opacity:0}}
@keyframes grow{from{width:0}}
.viz-draw{animation:rise .5s var(--ease) backwards}
.viz-draw .dw-bar{animation:bar-in .45s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:.35s}
.viz-draw .dw-bar:nth-of-type(2){animation-delay:.4s} .viz-draw .dw-bar:nth-of-type(3){animation-delay:.45s}
.viz-draw .dw-bar:nth-of-type(4){animation-delay:.5s} .viz-draw .dw-bar:nth-of-type(5){animation-delay:.55s}
.viz-draw .dw-bar:nth-of-type(6){animation-delay:.6s}
.viz-draw line,.viz-draw .dw-label,.viz-draw .dw-dl,.viz-draw .dw-dt{animation:fade .4s var(--ease) backwards;animation-delay:.7s}
.viz-prop{animation:slide-in .5s var(--ease) backwards;animation-delay:.45s}
.viz-prop .opt{animation:opt-in .3s var(--ease) backwards;animation-delay:.7s}
.viz-prop .opt + .opt{animation-delay:.76s} .viz-prop .opt + .opt + .opt{animation-delay:.82s}
.viz-verdict{animation:rise .5s var(--ease) backwards;animation-delay:.85s}
.viz-verdict .mark{animation:mark-pop .5s var(--ease) backwards;animation-delay:1.1s}
.viz-verdict .meter i{animation:grow .8s cubic-bezier(.22,1,.36,1) backwards;animation-delay:1.1s}
/* home sections, as they are reached (home.js marks them only when there is motion to show) */
.reveal-on [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.reveal-on [data-reveal].is-in{opacity:1;transform:none}

/* a disclosure folding shut is still [open] until it ends: its chevron turns back at once */
.disc.is-closing summary::before{transform:none}
@media (prefers-reduced-motion:reduce){
  .station-1,.station-2,.station-3,.station-4,.drawing,.below,.dw-new,.grp.is-opening .opt,
  .verdict.is-turning .mark,.verdict-strip.is-turning .mark,.verdict.is-turning .word,.verdict-strip.is-turning .word,
  .card.is-computing::before,.viz-draw,.viz-draw .dw-bar,.viz-draw line,.viz-draw .dw-label,.viz-draw .dw-dl,
  .viz-draw .dw-dt,.viz-prop,.viz-prop .opt,.viz-verdict,.viz-verdict .mark,.viz-verdict .meter i{animation:none}
  .meter i{transition:none}
}