/* =====================================================================
   MakersMath — Design System (workshop-editorial)
   Framework-free. Design tokens + component library as CSS.
   Component map: CalculatorShell=.shell, CalculatorField=.field,
   NumberInput=.input, UnitSelector=.unit-select, SegmentedControl=.segmented,
   ResultHero=.result-hero, ResultMetric=.metric, ResultBreakdown=.metrics,
   FormulaDisclosure/AdvancedDisclosure=.disclosure, WorkedExample=.example,
   AssumptionNotice/SafetyNotice=.notice, RelatedCalculatorCard=.related-card,
   CategoryCard=.cat-card, WorkflowStepper=.workflow, ShareAndPrintActions=.actions,
   EmptyResultState=.is-empty, ValidationSummary=.validation.
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root{
  /* color — warm neutral surfaces + one restrained brand accent */
  --paper:#F4F1EA;
  --surface:#FFFFFF;
  --surface-2:#FAF6EF;
  --surface-sunk:#F0EBE1;
  --ink:#201B14;
  --ink-2:#574F41;
  --ink-3:#726A5A;
  --line:#E6DFD1;
  --line-2:#D8CFBD;
  --accent:#A85C2C;                     /* burnt caramel — the single brand accent */
  --accent-strong:#8C4A20;
  --accent-tint:#F5EADF;
  --accent-tint-2:#EFE0D0;
  --ring:rgba(168,92,44,.38);
  --good:#2F7D5B;
  --danger:#A63A2E;
  --danger-tint:#F7E7E3;

  /* typography */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  --fs-eyebrow:.75rem;
  --fs-sm:.8125rem;
  --fs-body:.9375rem;
  --fs-lead:1.0625rem;
  --fs-h3:1.0625rem;
  --fs-h2:clamp(1.25rem,2.4vw,1.5rem);
  --fs-h1:clamp(1.9rem,4.6vw,2.9rem);
  --fs-hero:clamp(2.1rem,6vw,3rem);

  /* spacing (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px;

  /* radius */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* borders + shadows (soft, warm) */
  --border:1px solid var(--line);
  --shadow-sm:0 1px 2px rgba(43,33,20,.05);
  --shadow:0 4px 16px -6px rgba(43,33,20,.14),0 1px 3px rgba(43,33,20,.06);
  --shadow-lg:0 18px 48px -20px rgba(43,33,20,.28);

  /* focus ring */
  --focus:0 0 0 3px var(--ring);

  /* motion */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* layout */
  --container:1080px;
  --container-narrow:760px;
}

/* ---------- RESET / BASE ---------- */
*{box-sizing:border-box}
*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-sans);background:var(--paper);color:var(--ink);
  font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;
  letter-spacing:-.012em;color:var(--ink);margin:0}
p{margin:0}
a{color:var(--accent-strong);text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);
  text-underline-offset:2px}
a:hover{text-decoration-color:var(--accent)}
img,svg{display:block;max-width:100%}
button{font:inherit}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-48px;background:var(--surface);color:var(--ink);
  padding:8px 14px;border-radius:var(--r-sm);box-shadow:var(--shadow);z-index:60;transition:top var(--dur-2)}
.skip-link:focus{top:12px}

/* ---------- LAYOUT ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s-5)}
.container.narrow{max-width:var(--container-narrow)}
.stack>*+*{margin-top:var(--s-4)}
.divider{height:1px;background:var(--line);border:0;margin:var(--s-7) 0}

/* ---------- TOP NAV ---------- */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(1.1) blur(8px);border-bottom:var(--border)}
.nav__inner{max-width:var(--container);margin:0 auto;padding:var(--s-3) var(--s-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:600;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand__mark{width:26px;height:26px;flex:0 0 auto;color:var(--accent)}
.brand:hover{color:var(--ink)}
.nav__links{display:flex;gap:var(--s-5);font-size:var(--fs-sm)}
.nav__links a{color:var(--ink-2);text-decoration:none}
.nav__links a:hover{color:var(--accent-strong)}
@media(max-width:640px){.nav__links{display:none}}

/* ---------- BREADCRUMB ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-sm);
  color:var(--ink-3);padding:var(--s-6) 0 0}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--accent-strong)}
.crumbs svg{width:14px;height:14px;opacity:.6}
.crumbs [aria-current]{color:var(--ink-2)}

/* ---------- HERO ---------- */
.hero{padding:var(--s-6) 0 var(--s-5)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong)}
.eyebrow svg{width:15px;height:15px}
.hero h1{font-size:var(--fs-h1);margin:var(--s-3) 0 var(--s-3)}
.lead{font-size:var(--fs-lead);color:var(--ink-2);max-width:60ch;line-height:1.55}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:500;line-height:1;
  padding:10px 15px;border-radius:var(--r-sm);border:var(--border);background:var(--surface);
  color:var(--ink);cursor:pointer;text-decoration:none;transition:background var(--dur-1),
  border-color var(--dur-1),color var(--dur-1),transform var(--dur-1)}
.btn svg{width:16px;height:16px}
.btn:hover{border-color:var(--line-2);background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.btn--ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn--ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn--sm{padding:7px 11px;font-size:var(--fs-sm)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- CARDS ---------- */
.card{background:var(--surface);border:var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card.pad{padding:var(--s-6)}

/* ---------- CATEGORY GRID (homepage) ---------- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  margin:var(--s-9) 0 var(--s-2)}
.section-head h2{font-size:var(--fs-h2)}
.section-head .muted{color:var(--ink-3);font-size:var(--fs-sm)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--s-4);margin-top:var(--s-5)}
.cat-card{position:relative;display:flex;flex-direction:column;gap:var(--s-2);
  background:var(--surface);border:var(--border);border-radius:var(--r-lg);padding:var(--s-6);
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2)}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.cat-card__icon{width:34px;height:34px;color:var(--accent);margin-bottom:var(--s-1)}
.cat-card h3{font-size:1.12rem}
.cat-card p{font-size:var(--fs-sm);color:var(--ink-2)}
.cat-card__count{margin-top:auto;padding-top:var(--s-3);font-family:var(--font-mono);
  font-size:var(--fs-sm);color:var(--accent-strong);display:inline-flex;align-items:center;gap:6px}
.cat-card__count svg{width:14px;height:14px}
.cat-card.is-soon{opacity:.72;pointer-events:none;box-shadow:none;background:var(--surface-2)}
.cat-card.is-soon .cat-card__icon,.cat-card.is-soon .cat-card__count{color:var(--ink-3)}
.cat-card__pill{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);border:var(--border);border-radius:var(--r-pill);padding:3px 9px;align-self:flex-start;margin-top:auto}

/* ---------- HUB ---------- */
.hub-feature{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-4);margin-top:var(--s-5)}
.tool-groups{margin-top:var(--s-6)}
.tool-group{margin-top:var(--s-7)}
.tool-group h3{font-size:var(--fs-h3);padding-bottom:var(--s-3);border-bottom:1px solid var(--line);margin-bottom:var(--s-1)}
.tool-list{list-style:none;margin:0;padding:0}
.tool-list li{display:flex;align-items:center;gap:var(--s-4);justify-content:space-between;
  padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.tool-list .t-name{font-weight:500}
.tool-list a.t-name{text-decoration:none;color:var(--ink)}
.tool-list a.t-name:hover{color:var(--accent-strong)}
.tool-list .t-desc{display:block;font-size:var(--fs-sm);color:var(--ink-3);font-weight:400;margin-top:2px;max-width:64ch}
.tool-list li.is-soon .t-name{color:var(--ink-3)}
.badge{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap;flex:0 0 auto}
.badge--live{background:var(--accent);color:#fff}
.badge--soon{background:var(--surface);color:var(--ink-3);border:var(--border)}

/* ---------- CALCULATOR SHELL ---------- */
.shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s-8);
  align-items:start;margin-top:var(--s-6)}
@media(max-width:900px){.shell{grid-template-columns:1fr;gap:var(--s-6)}}
.inputs{min-width:0}
.inputs__group{margin-top:var(--s-6)}
.inputs__group:first-child{margin-top:0}
.group-label{font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s-3)}

/* fields */
.field{margin-top:var(--s-4)}
.field:first-child{margin-top:0}
/* Inside a grid, every cell keeps the same top margin so inputs across a row
   bottom-align — the :first-child reset above must not single out column 1. */
.field-grid>.field{margin-top:var(--s-4)}
.field__label{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);margin-bottom:6px}
.field__label .req{color:var(--danger)}
.field-grid{display:grid;gap:var(--s-3)}
.field-grid.c2{grid-template-columns:1fr 1fr}
.field-grid.c3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:420px){.field-grid.c3{grid-template-columns:1fr 1fr}}
.input,.select{width:100%;font-family:var(--font-sans);font-size:var(--fs-body);color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:11px 12px;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.input::placeholder{color:var(--ink-3)}
.input:hover,.select:hover{border-color:var(--accent)}
.input:focus-visible,.select:focus-visible{border-color:var(--accent);box-shadow:var(--focus)}
.input.mono{font-family:var(--font-mono)}
.field__hint{font-size:var(--fs-sm);color:var(--ink-3);margin-top:6px}
.field__error{font-size:var(--fs-sm);color:var(--danger);margin-top:6px;display:none}
.field.has-error .input,.field.has-error .select{border-color:var(--danger)}
.field.has-error .field__error{display:block}
.input-affix{position:relative;display:flex;align-items:center}
.input-affix .suffix{position:absolute;right:12px;font-family:var(--font-mono);font-size:var(--fs-sm);
  color:var(--ink-3);pointer-events:none}
.input-affix .input{padding-right:44px}

/* segmented control (tabs) */
.segmented{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--surface-sunk);
  border-radius:var(--r);padding:4px;border:1px solid var(--line)}
.segmented button{appearance:none;border:0;background:transparent;color:var(--ink-2);
  font-size:var(--fs-sm);font-weight:500;padding:8px 13px;border-radius:var(--r-sm);cursor:pointer;
  transition:background var(--dur-1),color var(--dur-1),box-shadow var(--dur-1)}
.segmented button:hover{color:var(--ink)}
.segmented button[aria-selected="true"],.segmented button.on{background:var(--surface);color:var(--accent-strong);
  box-shadow:var(--shadow-sm)}
.segmented button:focus-visible{box-shadow:var(--focus)}

/* unit selector (compact segmented) */
.unit-select{display:inline-flex;gap:0;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.unit-select button{border:0;background:var(--surface);color:var(--ink-2);font-size:var(--fs-sm);
  padding:7px 12px;cursor:pointer;border-left:1px solid var(--line)}
.unit-select button:first-child{border-left:0}
.unit-select button.on{background:var(--accent);color:#fff}

/* checkbox row */
.check{display:flex;align-items:flex-start;gap:10px;margin-top:var(--s-4)}
.check input{width:18px;height:18px;margin-top:1px;accent-color:var(--accent);flex:0 0 auto}
.check label{font-size:var(--fs-body);color:var(--ink);cursor:pointer}

/* disclosure (advanced settings, formula, assumptions) */
.disclosure{border:var(--border);border-radius:var(--r);background:var(--surface);margin-top:var(--s-5);overflow:hidden}
.disclosure>summary{list-style:none;cursor:pointer;padding:var(--s-4) var(--s-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  font-weight:500;font-size:var(--fs-body);color:var(--ink)}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary:hover{background:var(--surface-2)}
.disclosure>summary:focus-visible{box-shadow:var(--focus)}
.disclosure>summary .chev{width:18px;height:18px;color:var(--ink-3);transition:transform var(--dur-2) var(--ease);flex:0 0 auto}
.disclosure[open]>summary .chev{transform:rotate(180deg)}
.disclosure__body{padding:0 var(--s-5) var(--s-5);color:var(--ink-2);font-size:var(--fs-body)}
.disclosure__body p+p{margin-top:var(--s-3)}
.disclosure__body code,.mono-inline{font-family:var(--font-mono);font-size:.9em;background:var(--surface-sunk);
  padding:1px 6px;border-radius:6px;color:var(--ink)}

/* ---------- RESULT PANEL ---------- */
.result{position:sticky;top:76px}
@media(max-width:900px){.result{position:static}}
.result-hero{background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:var(--border);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--shadow)}
.result-hero__label{font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)}
.result-hero__value{font-family:var(--font-mono);font-weight:500;font-size:clamp(2rem,7vw,2.6rem);
  color:var(--accent-strong);line-height:1.05;margin:var(--s-2) 0 var(--s-1);
  overflow-wrap:anywhere}
.result-hero__value small{font-size:.42em;color:var(--ink-3);font-weight:400}
.result-hero__alt{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink-3)}
.result-hero__summary{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line);
  font-size:var(--fs-body);color:var(--ink-2)}
.result-hero.is-empty .result-hero__value{color:var(--ink-3)}
.result-hero.is-empty .result-hero__summary{color:var(--ink-3)}

.metrics{margin-top:var(--s-4);border:var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden}
.metric{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-3) var(--s-4);border-top:1px solid var(--line)}
.metric:first-child{border-top:0}
.metric__label{font-size:var(--fs-sm);color:var(--ink-2)}
.metric__value{font-family:var(--font-mono);font-size:var(--fs-body);color:var(--ink);white-space:nowrap}
.metric.hi{background:var(--accent-tint)}
.metric.hi .metric__value{color:var(--accent-strong);font-size:1.05rem}

.actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}
.actions .btn{flex:1 1 auto}
.copied{font-size:var(--fs-sm);color:var(--good);display:inline-flex;align-items:center;gap:6px;
  opacity:0;transition:opacity var(--dur-2)}
.copied.show{opacity:1}

/* ---------- NOTICES ---------- */
.notice{display:flex;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r);font-size:var(--fs-sm);
  margin-top:var(--s-4);line-height:1.5}
.notice svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px}
.notice--assumption{background:var(--surface-2);border:var(--border);color:var(--ink-2)}
.notice--assumption svg{color:var(--ink-3)}
.notice--safety{background:var(--danger-tint);border:1px solid color-mix(in srgb,var(--danger) 22%,transparent);color:#7a2b22}
.notice--safety svg{color:var(--danger)}
.notice--info{background:var(--accent-tint);border:1px solid var(--accent-tint-2);color:var(--accent-strong)}
.notice[hidden]{display:none}

/* ---------- CONTENT SECTIONS ---------- */
.prose{max-width:68ch}
.prose h2{font-size:var(--fs-h2);margin:var(--s-9) 0 var(--s-3)}
.prose h3{font-size:var(--fs-h3);margin:var(--s-6) 0 var(--s-2)}
.prose p{color:var(--ink-2);margin-top:var(--s-2)}
.example{background:var(--surface-2);border:var(--border);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:var(--s-5);margin-top:var(--s-4)}
.example h3{font-size:var(--fs-h3);margin:0 0 var(--s-2)}
.example p{color:var(--ink-2);font-size:var(--fs-body)}
.example .mono-inline{white-space:nowrap}

/* related + workflow */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s-4);margin-top:var(--s-5)}
.related-card{display:block;background:var(--surface);border:var(--border);border-radius:var(--r);
  padding:var(--s-5);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2)}
.related-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.related-card .rc-k{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-strong)}
.related-card h3{font-size:1rem;margin:6px 0 4px}
.related-card p{font-size:var(--fs-sm);color:var(--ink-2)}

.workflow{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin-top:var(--s-4);
  font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink-2)}
.workflow .step{display:inline-flex;align-items:center;gap:8px;background:var(--surface);
  border:var(--border);border-radius:var(--r-pill);padding:7px 13px}
.workflow .step.is-current{background:var(--accent-tint);border-color:var(--accent-tint-2);color:var(--accent-strong)}
.workflow .step__n{width:18px;height:18px;border-radius:50%;background:var(--surface-sunk);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-2)}
.workflow .step.is-current .step__n{background:var(--accent);color:#fff}
.workflow .sep{color:var(--ink-3)}

/* Ad placeholder: hidden for Google Auto Ads. Auto Ads inject their own
   containers; this manual placeholder is kept in markup but fully hidden so it
   reserves no space and causes no layout shift. */
.adslot{display:none!important}

/* validation summary */
.validation{display:none;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r);
  background:var(--danger-tint);border:1px solid color-mix(in srgb,var(--danger) 25%,transparent);
  color:#7a2b22;font-size:var(--fs-sm);margin-bottom:var(--s-4)}
.validation.show{display:flex}
.validation svg{width:18px;height:18px;flex:0 0 auto;color:var(--danger)}

/* ---------- FOOTER ---------- */
.site-footer{border-top:var(--border);margin-top:var(--s-11);background:var(--surface-2)}
.site-footer__inner{max-width:var(--container);margin:0 auto;padding:var(--s-8) var(--s-5);
  display:flex;flex-wrap:wrap;gap:var(--s-6);justify-content:space-between;color:var(--ink-3);font-size:var(--fs-sm)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.site-footer nav a{color:var(--ink-2);text-decoration:none}
.site-footer nav a:hover{color:var(--accent-strong)}

/* ---------- MOTION ---------- */
@keyframes mm-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.animate-in{animation:mm-rise var(--dur-3) var(--ease) both}
.result-hero__value.tick{animation:mm-rise var(--dur-2) var(--ease)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- PRINT ---------- */
@media print{
  .nav,.adslot,.actions,.site-footer,.workflow,.related-grid,.crumbs,.disclosure>summary .chev{display:none!important}
  body{background:#fff}
  .shell{grid-template-columns:1fr 1fr;gap:24px}
  .result{position:static}
  .card,.result-hero,.metrics,.disclosure{box-shadow:none;border-color:#ccc}
  .disclosure[open] .disclosure__body{display:block}
  a{color:#000;text-decoration:none}
}

/* ---------- DYNAMIC ROWSETS (cut lists, board lists, colorant lists) ---------- */
.rowset{margin-top:var(--s-2)}
.rowset .colhead,.rowset .drow{display:grid;gap:8px;grid-template-columns:var(--cols,1fr);align-items:center}
.rowset .colhead{margin:2px 0 6px;font-family:var(--font-mono);font-size:var(--fs-sm);
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)}
.rowset .drow{margin-bottom:8px}
.rowset .drow input,.rowset .drow select{width:100%;font-family:var(--font-sans);font-size:var(--fs-body);
  color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 10px}
.rowset .drow input:focus-visible,.rowset .drow select:focus-visible{border-color:var(--accent);box-shadow:var(--focus)}
.rm-btn{height:40px;width:100%;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);
  color:var(--ink-3);cursor:pointer;font-size:16px;line-height:1;transition:border-color var(--dur-1),color var(--dur-1)}
.rm-btn:hover{border-color:var(--accent);color:var(--accent)}
.rm-btn:focus-visible{box-shadow:var(--focus)}
.add-row{margin-top:var(--s-1)}

/* SVG cut-layout output block */
.layout{margin-top:var(--s-8)}
.layout__note{color:var(--ink-2);font-size:var(--fs-sm);margin:var(--s-1) 0 var(--s-5);max-width:70ch}
.sheet-fig{margin-bottom:var(--s-5)}
.sheet-fig h3{font-family:var(--font-mono);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);margin-bottom:var(--s-2);font-weight:500}
.sheet-fig svg{width:100%;height:auto;border:var(--border);border-radius:var(--r-sm);background:var(--surface);display:block}