/* JKF duct sizer. v1 (2026-10-01). Everything is scoped to .ds. UI variables map to the shared NEU-JKF token layer (main.css :root, generated from the design-system tokens.json). Engineering logic lives in duct-sizer.js and is untouched. */
.ds{
  --ds-bg:var(--njk-bg-alt); --ds-panel:var(--njk-card); --ds-ink:var(--njk-fg); --ds-ink-2:var(--njk-muted-fg); --ds-rule:var(--njk-border);
  --ds-blue:var(--njk-primary); --ds-dark:var(--njk-sidebar); --ds-dark-rule:var(--njk-primary); --ds-dark-text:var(--njk-sidebar-fg); --ds-dark-muted:var(--njk-border-strong);
  --ds-accent:var(--azure); --ds-duct-fill:var(--njk-band-navy);
  --ds-font-display:var(--font-display);
  --ds-font-body:var(--font-sans);
  --ds-font-mono:var(--font-sans);
  --ds-radius:var(--radius-md); --ds-radius-sm:var(--radius-sm); --ds-radius-card:var(--radius-card);
  background:var(--ds-bg);color:var(--ds-ink);font-family:var(--ds-font-body);padding-block:clamp(56px,8vw,112px);
  /* The site's root scroll-padding already reserves the fixed header height. */
  scroll-margin-top:1rem;
}
.ds *{box-sizing:border-box}
.ds-wrap{max-width:var(--container-standard);margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
.ds-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:40px}
.ds-head h2{font:500 var(--fs-h2)/1.08 var(--ds-font-display);letter-spacing:-.02em;margin:0;text-wrap:balance}
.ds-head p{color:var(--ds-ink-2);max-width:46ch;justify-self:end;margin:0;line-height:1.6}
.ds-tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--ds-rule);border-radius:var(--ds-radius-card);overflow:hidden;background:var(--ds-panel)}
.ds-tool>*{min-width:0}
.ds-in{padding:32px;display:grid;gap:28px;align-content:start}
.ds-field{display:grid;gap:10px}
.ds-lab{font:500 var(--fs-eyebrow) var(--ds-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ds-ink-2);display:flex;justify-content:space-between}
.ds-lab .ds-unit{text-transform:none;letter-spacing:.02em}
.ds-field output{font:500 1.9rem/1 var(--ds-font-display);color:var(--ds-ink);font-variant-numeric:tabular-nums}
.ds input[type=range]{width:100%;accent-color:var(--ds-blue);height:28px;margin:0}
.ds select{font:500 var(--fs-nav) var(--ds-font-body);padding:12px 14px;border-radius:var(--ds-radius-sm);border:1px solid var(--ds-rule);background:var(--ds-bg);color:var(--ds-ink);width:100%}
.ds-seg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ds-rule);border-radius:999px;padding:4px;background:var(--ds-bg);position:relative}
.ds-seg input{position:absolute;opacity:0;pointer-events:none}
.ds-seg label{text-align:center;padding:10px 6px;border-radius:999px;cursor:pointer;font:500 var(--fs-small) var(--ds-font-body);color:var(--ds-ink-2)}
.ds-seg input:checked+label{background:var(--ds-blue);color:var(--ds-dark-text)}
.ds-seg input:focus-visible+label{outline:2px solid var(--ds-blue);outline-offset:1px}
.ds-out{background:var(--ds-dark);color:var(--ds-dark-text);padding:32px;display:grid;grid-template-rows:auto 1fr auto;gap:20px;container-type:inline-size}
.ds-eyebrow{font:500 var(--fs-eyebrow)/1.2 var(--ds-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ds-dark-muted);margin:0}
.ds-res{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;align-content:center}
.ds-res>*{min-width:0}
@container (min-width:500px){.ds-res{grid-template-columns:auto minmax(0,1fr)}}
.ds-xsec{width:clamp(140px,30cqw,220px);height:auto;max-width:100%}
.ds-x-ring{stroke:var(--ds-dark-rule);stroke-width:1}
.ds-x-calc{stroke:var(--ds-dark-muted);stroke-width:1;stroke-dasharray:3 4}
.ds-x-duct{fill:var(--ds-duct-fill);stroke:var(--ds-accent);stroke-width:3}
.ds-x-line{stroke:var(--ds-accent);stroke-width:1}
.ds-x-text{font:400 11px var(--ds-font-mono);fill:var(--ds-dark-muted)}
.ds-big{font:700 clamp(3.2rem,13cqw,4.5rem)/.95 var(--ds-font-display);color:var(--ds-accent);font-variant-numeric:tabular-nums}
.ds-big small{font-size:.35em;color:var(--ds-dark-muted);font-weight:600;margin-left:.2em}
.ds-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;margin:18px 0 0;font-size:14px}
.ds-kv dt{color:var(--ds-dark-muted);white-space:nowrap}
.ds-kv dd{margin:0;font-family:var(--ds-font-mono);text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ds-rec{border-top:1px solid var(--ds-dark-rule);padding-top:18px;display:grid;gap:6px;align-content:start}
.ds-rec b{font:700 1.15rem var(--ds-font-body)}
.ds-rec p{color:var(--ds-dark-muted);font-size:14px;margin:0;line-height:1.55}
.ds-note{font-size:13px;color:var(--ds-ink-2);margin:16px 0 0;max-width:70ch;line-height:1.55}
@media (max-width:900px){.ds-head,.ds-tool{grid-template-columns:1fr}.ds-head p{justify-self:start}}
@media (max-width:520px){.ds-res{grid-template-columns:1fr}.ds-seg{grid-template-columns:1fr 1fr;border-radius:var(--ds-radius-card)}.ds-in,.ds-out{padding:22px}}
/* JKFuniverse: just after the switch to side by side, a slightly smaller drawing and gap, so the
   longest values ("Confirm with NEU-JKF Stainless") still fit on one line next to their label */
@container (min-width:500px) and (max-width:545.98px){.ds-res{gap:20px}.ds-xsec{width:clamp(120px,25cqw,220px)}}