/* ============================================================
   Duct Chart -- styles
   Trade look: charcoal/slate + one safety colour (amber, dark text on it). Light grey page, white cards with thin
   borders, small radius, solid rectangular buttons, no cartoon icons. No external fonts, CDNs or trackers.
   Screen: big type and tap targets (>= 44px), WCAG AA. Print: black on white, Letter or A4.
   ============================================================ */
:root {
  --ink: #1f2933;           /* charcoal text */
  --slate: #26323d;         /* header / footer */
  --slate-2: #3a4855;
  --muted: #4a5662;
  --bg: #eceef0;            /* light neutral grey page */
  --paper: #fff;
  --line: #cbd2d9;
  --field: #66717d;         /* input borders */
  --amber: #ffb000;         /* safety colour; charcoal text on it */
  --amber-hover: #e69f00;
  --amber-soft: #fff4d6;
  --amber-dark: #7a5000;    /* amber-ish text on white */
  --link: #0b5cab;
  --focus: #ffb000;
  --radius: 4px;
  --radius-card: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-head: "Fira Sans Extra Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
}
/* Fira Sans Extra Condensed Bold (SIL OFL 1.1, see /assets/fonts/OFL-FiraSansExtraCondensed.txt), Latin subset, self-hosted */
@font-face { font-family: "Fira Sans Extra Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/fira-sans-extra-condensed-700.woff2") format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.55; color: var(--ink); background: var(--bg); overflow-wrap: break-word; }
.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
main.wrap { padding-top: 1rem; padding-bottom: 3rem; }
main:focus { outline: none; }
h1, h2, h3, .step-h, legend, .nav-btn, .nav-link, .step-badge, .wordmark, .res-val, .tool-title { font-family: var(--font-head); font-weight: 700; letter-spacing: 0.01em; }
h1, h2, h3 { line-height: 1.08; text-transform: uppercase; }
h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin: 0.35em 0 0.3em; }
h2 { font-size: clamp(1.45rem, 3.2vw, 1.75rem); margin: 1.6em 0 0.5em; }
h3 { font-size: 1.25rem; margin: 1.2em 0 0.4em; }
p, li { max-width: 70ch; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px #000; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: #000; color: #fff; padding: 0.8rem 1.2rem; z-index: 100; }
.skip-link:focus { left: 0; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.print-only { display: none; }

/* ---------- header (charcoal) ----------
   Phones/tablets (< 1000px): brand + Menu button; the menu opens a panel below.
   Desktop: brand, then Calculators and Guides dropdowns. Dropdowns open on click/tap/keyboard (nav.js). */
.site-header { background: var(--slate); color: #fff; border-bottom: 4px solid var(--amber); position: relative; z-index: 20; }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; min-height: 48px; padding: 2px 0; color: #fff; text-decoration: none; margin-right: auto; border-radius: 6px; }
.brand-mark { width: 2.5rem; height: 2.5rem; flex: none; display: block; }
.wordmark { font-size: 1.65rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.wm-c { color: var(--amber); }
.menu-toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 46px; padding: 0.3rem 0.9rem; border: 2px solid #fff; border-radius: var(--radius); background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.menu-toggle:hover { background: var(--slate-2); }
.menu-toggle[aria-expanded="true"] { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; }
.menu-bars { position: relative; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -6px; }
.menu-bars::after { top: 6px; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list li { max-width: none; }
.nav-btn, .nav-link { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 46px; padding: 0.3rem 0.8rem; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: #fff; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.03em; text-align: left; cursor: pointer; white-space: nowrap; text-decoration: none; }
.nav-btn, .menu-toggle { -webkit-tap-highlight-color: transparent; }
.nav-btn:hover, .nav-link:hover { border-color: #fff; color: #fff; }
.nav-btn[aria-expanded="true"] { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.nav-group.is-current > .nav-btn, .nav-link[aria-current] { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.nav-caret { width: 0.5em; height: 0.5em; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-25%) rotate(45deg); flex: none; }
.nav-btn[aria-expanded="true"] .nav-caret { transform: translateY(25%) rotate(-135deg); }
.nav-drop { list-style: none; margin: 0; padding: 0.4rem 0.6rem; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-card); }
.nav-drop a { display: flex; align-items: center; min-height: 46px; padding: 0.2rem 0.6rem; border-radius: 3px; color: var(--ink); font-weight: 700; text-decoration: none; }
.nav-drop a:hover { background: var(--amber-soft); text-decoration: underline; }
.nav-drop a[aria-current] { background: var(--amber-soft); box-shadow: inset 4px 0 0 var(--amber); }
@media (max-width: 999.98px) {
  .main-nav { display: none; flex: 1 1 100%; min-width: 0; padding: 0.5rem 0 0.6rem; border-top: 1px solid #4b5b69; margin-top: 0.3rem; }
  .menu-open .main-nav { display: block; }
  .nav-list { display: grid; gap: 0.3rem; }
  .nav-btn, .nav-link { border-color: #5b6b79; }
  .nav-drop { margin: 0.3rem 0 0.2rem; }
}
@media (min-width: 1000px) {
  .menu-toggle { display: none; }
  .main-nav { flex: 0 1 auto; min-width: 0; }
  .nav-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
  .nav-group { position: relative; }
  .nav-drop { position: absolute; left: 0; top: calc(100% + 8px); width: 21rem; max-width: calc(100vw - 2rem); box-shadow: 0 6px 16px rgba(0,0,0,.22); z-index: 30; }
}

/* ---------- intro ---------- */
.intro-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-bottom: 0.8rem; }
.nw { white-space: nowrap; }
.lead { font-size: 1.1rem; margin: 0; flex: 1 1 22rem; }
.howto-jump { flex: none; }

/* ---------- buttons + fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.5rem 1.1rem;
  border-radius: var(--radius); border: 2px solid var(--amber); background: var(--amber); color: var(--ink); font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; text-align: center; max-width: 100%; }
.btn:hover { background: var(--amber-hover); border-color: var(--amber-hover); color: var(--ink); }
.btn.secondary { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn.secondary:hover { background: #e4e8ec; }
.btn.big { min-height: 56px; font-size: 1.1rem; padding: 0.6rem 1.4rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.4rem 0; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 0.7rem 1.2rem 1rem; }
.tool-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.tool-title { margin: 0; font-size: 1.35rem; text-transform: uppercase; }
.tool-grid { display: grid; gap: 0 1.4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tool-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-step { padding: 0.7rem 0 0.3rem; margin: 0; border: 0; min-width: 0; }
fieldset.form-step { padding-top: 0.8rem; }
.tool > form > .form-step, .tool-grid > .form-step { border-bottom: 1px solid var(--line); padding-bottom: 0.9rem; }
.step-h { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0; font-size: 1.3rem; line-height: 1.1; text-transform: uppercase; }
legend.step-h { float: left; width: 100%; }
legend.step-h + * { clear: left; }
.step-badge { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0.05rem 0.55rem; border-radius: 3px; background: var(--slate); color: #fff; font-size: 1rem; letter-spacing: 0.04em; }
.step-note { font-family: var(--font); font-weight: 600; font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: var(--muted); }
.field-label { display: block; font-weight: 700; font-size: 0.95rem; margin: 0.6rem 0 0.25rem; }
input[type=number], input[type=text], select {
  width: 100%; min-height: 52px; padding: 0.45rem 0.7rem; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--field); border-radius: var(--radius); }
select { font-weight: 700; font-size: 1.05rem; }
input[type=number] { font-size: 1.4rem; font-weight: 700; -moz-appearance: textfield; }
input[type=text] { font-size: 1.05rem; font-weight: 600; }
input:hover, select:hover { border-color: var(--ink); }
.val-row { display: flex; align-items: stretch; gap: 0.5rem; }
.val-row input { flex: 1 1 auto; min-width: 0; }
.unit-suffix { display: inline-flex; align-items: center; min-width: 2.6rem; font-weight: 700; font-size: 1.1rem; }
.seg { display: flex; gap: 0; }
.seg-opt { position: relative; flex: 1 1 0; display: flex; }
.seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-opt span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.3rem 0.6rem; border: 2px solid var(--ink); background: #fff; color: var(--ink); font-weight: 700; cursor: pointer; text-align: center; }
.seg-opt:first-child span { border-radius: var(--radius) 0 0 var(--radius); }
.seg-opt:last-child span { border-radius: 0 var(--radius) var(--radius) 0; border-left-width: 0; }
.seg-opt input:checked + span { background: var(--slate); color: #fff; }
.seg-opt input:focus-visible + span { outline: 4px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px #000; }
.seg-opt span:hover { background: #e4e8ec; }
.seg-opt input:checked + span:hover { background: var(--slate-2); }
.seg.small .seg-opt span { min-height: 46px; font-size: 0.95rem; }
.hint { color: var(--muted); font-size: 0.95rem; margin: 0.4rem 0 0; }
.notice { background: var(--amber-soft); border: 1px solid var(--amber-dark); border-left-width: 4px; border-radius: var(--radius); padding: 0.6rem 1rem; }
.form-error { margin: 0.6rem 0 0; padding: 0.5rem 0.8rem; background: #fdecec; border: 1px solid #a11; border-left-width: 4px; border-radius: var(--radius); color: #7a0d0d; font-weight: 700; }
.form-actions { padding-top: 0.9rem; }
.form-actions .btn.big { min-width: 12rem; }
@media (max-width: 600px) { .form-actions .btn.big { width: 100%; } }
details.more { margin: 0.9rem 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fafbfb; }
details.more > summary { min-height: 52px; padding: 0.7rem 1rem; font-weight: 700; cursor: pointer; display: list-item; }
details.more > .more-body { padding: 0 1rem 1rem; }
details.more .val-row { max-width: 22rem; }

/* ---------- result ---------- */
.result-wrap { margin-top: 1.2rem; scroll-margin-top: 0.6rem; }
.print-ready { margin: 0 0 0.6rem; padding: 0.55rem 1rem; background: var(--slate); color: #fff; font-weight: 700; border-radius: var(--radius); }
.print-ready:focus { outline: 4px solid var(--focus); outline-offset: 2px; }
.result { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--amber); border-radius: var(--radius-card); padding: 0.9rem 1.2rem 1rem; }
.result p { margin: 0 0 0.5rem; }
.res-inputs { font-weight: 700; color: var(--muted); }
.res-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.5rem 0 0.7rem; }
.res-box { flex: 1 1 11rem; max-width: 22rem; display: flex; flex-direction: column; padding: 0.5rem 0.9rem 0.6rem; background: #f6f7f8; border: 1px solid var(--line); border-left: 5px solid var(--amber); border-radius: var(--radius); }
.res-box.key { background: var(--amber-soft); border-color: #e0c066; border-left-color: var(--amber); }
.res-label { font-weight: 700; font-size: 0.95rem; color: var(--muted); }
.res-val { font-size: 2.3rem; line-height: 1.05; }
.res-note { font-size: 0.9rem; color: var(--muted); }
.res-detail { font-size: 0.98rem; }
.res-warn { background: var(--amber-soft); border-left: 4px solid var(--amber-dark); padding: 0.45rem 0.8rem; font-weight: 600; border-radius: 0 var(--radius) var(--radius) 0; }
.res-disclaimer { color: var(--muted); font-size: 0.95rem; margin-top: 0.8rem !important; }
.result h3 { margin: 1rem 0 0.3rem; font-size: 1.2rem; }
.preview-actions { margin: 0.9rem 0 0.2rem; display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; }
.preview-actions .btn-row { margin: 0; }
.edit-back { align-self: flex-start; font-weight: 700; font-size: 0.95rem; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; }
@media (max-width: 600px) {
  .preview-actions .btn.big { width: 100%; }
  .res-val { font-size: 1.8rem; }
  .res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .res-box { max-width: none; padding: 0.4rem 0.6rem 0.5rem; }
  .res-box.key { grid-column: 1 / -1; }
  .res-label { font-size: 0.88rem; }
}

/* ---------- data tables ---------- */
.table-scroll { overflow-x: auto; max-width: 100%; }
.result .table-scroll { max-width: 46rem; }
.res-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-weight: 700; }
table.data { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.data caption { text-align: left; font-weight: 700; padding: 0.3rem 0 0.4rem; color: var(--muted); font-size: 0.95rem; }
table.data thead th { background: var(--slate); color: #fff; padding: 0.4rem 0.6rem; font-size: 0.95rem; line-height: 1.15; text-align: right; vertical-align: bottom; font-weight: 700; }
table.data thead th:first-child { text-align: left; }
table.data tbody th { text-align: left; font-weight: 700; background: #f2f4f6; padding: 0.3rem 0.6rem; border-right: 1px solid var(--line); }
table.data td { text-align: right; padding: 0.3rem 0.6rem; }
table.data tbody tr { border-bottom: 1px solid #e1e5e9; }
table.data tbody tr:nth-child(even) td { background: #fafbfb; }
table.data tr.warn th, table.data tr.warn td { background: var(--amber-soft) !important; }
table.data tr.warn th { box-shadow: inset 4px 0 0 var(--amber-dark); }
.tag-warn { font-weight: 800; color: var(--amber-dark); }
.chart-legend { color: var(--muted); font-size: 0.95rem; margin: 0.3rem 0 0.6rem; }
@media (max-width: 600px) {
  table.data th, table.data td { padding: 0.3rem 0.22rem; }
  table.data.rect-table th, table.data.rect-table td { font-size: 0.86rem; padding-left: 0.2rem; padding-right: 0.2rem; }
  table.data.rect-table thead th { font-size: 0.74rem; }
  .tag-warn { display: block; font-size: 0.8rem; }
}

/* ---------- room split rows (CFM per ton) ---------- */
.room-rows { display: grid; gap: 0.5rem; margin: 0.5rem 0; }
.room-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7.5rem) 48px; gap: 0.5rem; align-items: center; }
.room-row input { min-height: 48px; font-size: 1.1rem; }
.btn.icon { min-width: 48px; padding: 0.3rem; }
.room-sum { font-weight: 700; }

/* ---------- after the output ---------- */
.next-step { margin-top: 1.2rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 0.4rem 1.2rem 1rem; }
.next-step h2 { margin-top: 0.7rem; }
.tpl-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.tpl-cards li { max-width: none; }
.tpl-card { display: flex; align-items: center; gap: 0.7rem; min-height: 52px; height: 100%; padding: 0.45rem 0.8rem; border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: var(--radius); background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; }
.tpl-card:hover { border-color: var(--ink); border-left-color: var(--amber); text-decoration: underline; }
.tpl-ico { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; color: var(--ink); flex: none; font-size: 1.15rem; }
.affiliate { margin-top: 1rem; padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.affiliate-note { color: var(--muted); font-size: 0.85rem; }

/* ---------- how to + FAQ + content ---------- */
.howto { margin-top: 2rem; scroll-margin-top: 0.5rem; }
.howto-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.howto-steps li { counter-increment: s; display: flex; align-items: center; gap: 0.8rem; max-width: 46rem; }
.howto-steps li::before { content: counter(s); flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 3px; background: var(--slate); color: #fff; font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; }
.how-ico { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; flex: none; color: var(--ink); font-size: 1.25rem; }
.back-top a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
.source { color: var(--muted); font-size: 0.95rem; }
.faq { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin: 0 0 0.6rem; max-width: 50rem; }
.faq summary { min-height: 48px; padding: 0.65rem 1rem; font-weight: 700; cursor: pointer; display: list-item; }
.faq-a { padding: 0 1rem 0.4rem; }
.faq-a p { margin: 0 0 0.6rem; }
.page-info main p, .page-info main li, .page-guide main p, .page-guide main li { font-size: 1.05rem; }
.page-guide main .lead { font-size: 1.15rem; }
.page-guide main ul, .page-guide main ol { padding-left: 1.3rem; }
.page-guide main li { margin-bottom: 0.3rem; }
table.plain { border-collapse: collapse; margin: 0.6rem 0 1rem; background: #fff; border: 1px solid var(--line); }
table.plain th, table.plain td { padding: 0.4rem 0.8rem; border-bottom: 1px solid #e1e5e9; text-align: left; font-size: 1rem; }
table.plain thead th { background: var(--slate); color: #fff; }
@media (max-width: 600px) { table.plain { width: 100%; } table.plain th, table.plain td { padding: 0.3rem 0.3rem; font-size: 0.88rem; } }

/* ---------- breadcrumbs ---------- */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.15rem; font-size: 0.95rem; }
.crumbs li { display: inline-flex; align-items: center; max-width: none; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.15rem; font-weight: 600; }
.crumbs [aria-current] { color: var(--muted); font-weight: 600; padding: 0 0.15rem; }
.crumb-sep { color: var(--muted); padding: 0 0.3rem; }
main.wrap > .crumbs { margin-top: -0.6rem; }
main.wrap > .crumbs + h1 { margin-top: 0.1em; }

/* ---------- footer ---------- */
.site-footer { background: var(--slate); color: #fff; padding: 1.2rem 0 1.6rem; margin-top: 2rem; border-top: 4px solid var(--amber); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.footer-links a, .footer-more a { color: #fff; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 44px; font-weight: 600; }
.footer-calcs, .footer-guides { border-bottom: 1px solid #4b5b69; padding-bottom: 0.3rem; margin-bottom: 0.3rem; }
.footer-more { margin: 0.3rem 0; border-bottom: 1px solid #4b5b69; padding-bottom: 0.3rem; max-width: none; }
.site-footer p { margin: 0.6rem 0 0; font-size: 0.95rem; }
@media (max-width: 600px) {
  .wrap { padding: 0 0.75rem; }
  .panel, .next-step { padding-left: 0.8rem; padding-right: 0.8rem; }
  .result { padding-left: 0.8rem; padding-right: 0.8rem; }
  .wordmark { font-size: 1.4rem; }
  .brand-mark { width: 2.2rem; height: 2.2rem; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ============================================================
   DUCT SIZE CHART SHEET (screen card + one-page print). Same markup for both.
   ============================================================ */
.chart-sheet { background: #fff; color: #000; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 0.8rem 1rem 1rem; margin-top: 1rem; }
.cs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; border-bottom: 2px solid #000; padding-bottom: 0.3rem; margin-bottom: 0.5rem; }
.cs-head p { margin: 0; max-width: none; }
.cs-title { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; }
.cs-site { margin-left: auto !important; font-weight: 700; }
.chart-sheet h3 { margin: 0.9rem 0 0.3rem; font-size: 1.15rem; }
.chart-sheet table.data thead th { text-align: right; }
.chart-sheet table.data thead th.grp { text-align: center; border-left: 1px solid #fff; }
.chart-sheet table.data td.sep, .chart-sheet table.data th.sep { border-left: 1px solid var(--line); }
.chart-sheet table.data thead th:first-child { text-align: left; }
.chart-sheet td.asp { color: var(--amber-dark); font-weight: 800; }
.chart-sheet .rect-eq td, .chart-sheet .rect-eq thead th:not(:first-child) { text-align: center; }
.cs-foot { margin: 0.6rem 0 0; font-size: 0.9rem; color: #333; max-width: none; }
.cs-foot + .cs-foot { margin-top: 0.2rem; }
.chart-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.6rem; }
@media (max-width: 600px) {
  .chart-sheet { padding: 0.6rem 0.4rem 0.8rem; }
  .chart-sheet table.data th, .chart-sheet table.data td { padding: 0.28rem 0.18rem; font-size: 0.82rem; }
  .chart-sheet table.data thead th { font-size: 0.78rem; }
  .cs-title { font-size: 1.3rem; }
}

@page { margin: 0.4in; }
@media print {
  html { font-size: 12pt !important; }
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .skip-link, .no-print, .crumbs { display: none !important; }
  .print-only { display: block; }
  main.wrap { padding: 0; max-width: none; }
  a { color: #000; text-decoration: none; }
  /* calculators: print only the result */
  .page-tool main > :not(.result-wrap):not(.chart-sheet), .page-tool .result-wrap > :not(.result) { display: none !important; }
  .page-tool .result-wrap { margin: 0; }
  .result { border: 0; border-top: 2pt solid #000; padding: 6pt 0 0; }
  .res-box, .res-box.key { background: #fff; border: 1pt solid #000; border-left-width: 4pt; }
  .res-warn { background: #fff; border: 1pt solid #000; }
  .result, .res-grid, table.data { break-inside: avoid; }
  table.data thead th { background: #fff !important; color: #000; border-bottom: 1.5pt solid #000; }
  table.data tr.warn th, table.data tr.warn td { background: #fff !important; }
  table.data tbody tr:nth-child(even) td { background: #fff; }
  /* chart page: only the sheet */
  .page-chart main > :not(.chart-sheet) { display: none !important; }
  .page-chart .chart-sheet { border: 0; padding: 0; margin: 0; font: 9pt/1.15 Arial, "Liberation Sans", Helvetica, sans-serif; }
  .page-chart .cs-title { font: 700 14pt Arial, "Liberation Sans", sans-serif; text-transform: none; }
  .page-chart .cs-head { border-bottom: 1.5pt solid #000; }
  .page-chart .chart-sheet h3 { font: 700 9.5pt Arial, "Liberation Sans", sans-serif; text-transform: none; margin: 7pt 0 2pt; }
  .page-chart .chart-sheet table.data { border: 0; }
  .page-chart .chart-sheet table.data th, .page-chart .chart-sheet table.data td { padding: 1.1pt 4pt; font-size: 9pt; border-bottom: 0.5pt solid #aaa; background: #fff !important; color: #000; }
  .page-chart .chart-sheet table.data thead th { font-size: 9pt; border-bottom: 1.2pt solid #000; padding: 2pt 4pt; }
  .page-chart .chart-sheet table.data tbody th { background: #ececec !important; }
  .page-chart .chart-sheet table.data .sep { border-left: 0.75pt solid #777; }
  .page-chart .cs-foot { font-size: 7.5pt; color: #000; margin-top: 4pt; }
  .page-chart .chart-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* inner fieldsets (stock size option, room split mode) */
.inner-fs { border: 0; margin: 0.6rem 0 0; padding: 0; min-width: 0; }
.inner-fs legend { padding: 0; }
.print-head { margin: 0 0 6pt; font-size: 10pt; }