/*
 * ★★★ THE STEEL-SECTION REFERENCE PAGES — their own stylesheet, on purpose.
 *
 * ★ THE REQUIREMENT: a premium level of design, deliberately. These pages are where a search brings someone
 *   who has never seen the site — they are a gate to the rest of it, and they have to look like the tool
 *   behind them is worth using.
 *
 * ⚠⚠ THIS FILE IS PUBLISHED TEXT, NOT SOURCE. `public/` is copied byte-for-byte into `dist/` and served from
 *   the site root. Write nothing here you would not put on the page itself. `publicComments.test.ts` enforces
 *   that.
 *
 * ⚠⚠ WHY NOT TAILWIND. These pages are emitted by `scripts/section-pages.mjs`, a build script — Tailwind's
 *    JIT scans SOURCE, so any utility class written only in that script would be purged and the page would
 *    ship unstyled. That failure is silent: the HTML is perfect, the classes are simply not in the bundle.
 * ★ A hand-written sheet is also the honest choice here: these are static DOCUMENTS, not app screens, and
 *   ~4 KB of purpose-built CSS gives the control the brief actually asks for.
 *
 * ★ THE PALETTE IS THE SECTION CALCULATOR'S — indigo on the gray app shell — so arriving here from Google
 *   and then opening the tool feels like one place rather than two.
 */
:root {
  /* §280 — the site's approved pointing hand (copied from src/index.css; keep in step) */
  --sc-pointing: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23111827%22%20stroke-width%3D%220.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.7%208.6V3.85a0.85%200.85%200%200%201%201.7%200V7.55a0.1%200.1%200%200%200%200.2%200V6.15a0.85%200.85%200%200%201%201.7%200V7.7a0.1%200.1%200%200%200%200.2%200V6.7a0.85%200.85%200%200%201%201.7%200V8.05a0.1%200.1%200%200%200%200.2%200V7.35a0.8%200.8%200%200%201%201.6%200V10.8C13.0%2013.4%2011.2%2015.1%209.0%2015.1%207.4%2015.1%206.1%2014.4%205.2%2013.4L2.7%2010.7a1.05%201.05%200%200%201%201.5-1.45L5.7%2010.4Z%22%2F%3E%3C%2Fsvg%3E") 16 16, pointer;
  --sc-ink: #111827; --sc-ink-soft: #4b5563; --sc-ink-faint: #6b7280;
  --sc-paper: #ffffff; --sc-ground: #f9fafb; --sc-line: #e5e7eb;
  --sc-accent: #4338ca; --sc-accent-strong: #3730a3; --sc-accent-soft: #eef2ff;
}
/* ⚠⚠ THE PAGES FOLLOW THE SITE'S OWN THEME CHOICE, NOT THE OS (§277). They used to key on
   prefers-color-scheme while the app defaults to LIGHT unless the reader chose dark — so a dark-OS visitor
   saw a light app and dark reference pages ("only dark mode", his report). /steel-sections-theme.js reads
   the app's stored sc-dark-mode and stamps data-sc-theme on <html>; with JS blocked the pages stay light,
   exactly like the app. */
:root[data-sc-theme="dark"] {
  --sc-ink: #f3f4f6; --sc-ink-soft: #d1d5db; --sc-ink-faint: #9ca3af;
  --sc-paper: #111827; --sc-ground: #0b1120; --sc-line: #374151;
  --sc-accent: #6366f1; --sc-accent-strong: #818cf8; --sc-accent-soft: #1e1b4b;
}
body { margin: 0; background: var(--sc-ground); color: var(--sc-ink);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; }
.sc-ref { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.sc-ref a { color: var(--sc-accent); }

.sc-crumb { font-size: 0.8125rem; color: var(--sc-ink-faint); margin-bottom: 1.25rem; }
.sc-crumb a { color: var(--sc-ink-soft); text-decoration: none; }
.sc-crumb a:hover { color: var(--sc-accent); text-decoration: underline; }

.sc-head h1 { font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.1; margin: 0 0 .35rem;
  letter-spacing: -0.02em; font-weight: 700; }
.sc-sub { margin: 0 0 1rem; color: var(--sc-accent); font-weight: 600; font-size: .9375rem; }
.sc-lead { margin: 0 0 1.75rem; color: var(--sc-ink-soft); font-size: 1.0625rem; max-width: 48rem; }

/* ★ the drawing beside the call to action: the two things a visitor came for, above the fold */
.sc-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-bottom: 2rem; }
@media (min-width: 56rem) { .sc-grid { grid-template-columns: 1.1fr .9fr; align-items: start; } }

.sc-fig { margin: 0; background: var(--sc-paper); border: 1px solid var(--sc-line);
  border-radius: 14px; padding: 1rem; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
/* ★ the drawing keeps its OWN proportions and is centred — stretching it to 100% is what made a tall
     section sit in a wide empty frame. `max-height` stops a very deep section dominating the page. */
/* ★ the drawing keeps its OWN proportions and is centred — stretching it to 100% is what made a tall
     section sit in a wide empty frame. */
.sc-fig svg { display: block; margin: 0 auto; max-width: 100%; height: auto; max-height: 17rem; border-radius: 8px; }
/* ⚠⚠ TWO BAKED FIGURES, one per theme. A static page cannot recolour an SVG, and a light-theme drawing on a
     dark page is a white plate with invisible dark-on-dark strokes. */
.sc-art-dark { display: none; }
:root[data-sc-theme="dark"] .sc-art-light { display: none; }
:root[data-sc-theme="dark"] .sc-art-dark { display: block; }
.sc-fig figcaption { margin-top: .75rem; font-size: .8125rem; color: var(--sc-ink-faint);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sc-dl { font-weight: 600; text-decoration: none; white-space: nowrap; }
.sc-dl:hover { text-decoration: underline; }
.sc-nofig { color: var(--sc-ink-faint); font-size: .875rem; margin: 0; padding: 2rem 0; text-align: center; }

/* ★★ THE HANDOFF — the one loud thing on the page, because it is the point of the page */
.sc-cta-box { background: var(--sc-accent-soft); border: 1px solid var(--sc-line);
  border-radius: 14px; padding: 1.25rem; }
.sc-cta-lead { margin: 0 0 .9rem; font-weight: 600; color: var(--sc-ink); }
.sc-cta { display: block; text-align: center; background: var(--sc-accent); color: #fff !important;
  text-decoration: none; font-weight: 650; padding: .8rem 1rem; border-radius: 10px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12); transition: background .15s ease, transform .15s ease; }
.sc-cta:hover { background: var(--sc-accent-strong); transform: translateY(-1px); }
.sc-cta-note { margin: .7rem 0 0; font-size: .8125rem; color: var(--sc-ink-faint); text-align: center; }

.sc-sec { margin: 0 0 2rem; }
.sc-sec h2 { font-size: 1.25rem; margin: 0 0 .75rem; letter-spacing: -0.01em; }
.sc-note { font-size: .8125rem; color: var(--sc-ink-faint); margin: 0 0 .75rem; max-width: 46rem; }
.sc-note-dim { margin-top: .75rem; }

.sc-tbl { width: 100%; border-collapse: collapse; background: var(--sc-paper);
  border: 1px solid var(--sc-line); border-radius: 12px; overflow: hidden; font-size: .9375rem; }
.sc-tbl th, .sc-tbl td { text-align: left; padding: .6rem .85rem; border-bottom: 1px solid var(--sc-line); }
.sc-tbl thead th { background: var(--sc-ground); font-size: .8125rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--sc-ink-faint); }
.sc-tbl tbody tr:last-child th, .sc-tbl tbody tr:last-child td { border-bottom: 0; }
.sc-tbl tbody th { font-weight: 550; color: var(--sc-ink-soft); }
.sc-tbl td { font-variant-numeric: tabular-nums; }

.sc-nbs { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.sc-nb { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; text-decoration: none;
  background: var(--sc-paper); border: 1px solid var(--sc-line); border-radius: 12px; }
.sc-nb:hover { border-color: var(--sc-accent); }
.sc-nb span { font-size: .75rem; color: var(--sc-ink-faint); }
/* ⚠ ONLY the direction label is uppercased. The first version uppercased every span in the card, so
     "113.6 kg/m" shipped as "113.6 KG/M" — a unit symbol is not free to change case. */
.sc-nb span:first-of-type { text-transform: uppercase; letter-spacing: .05em; }
.sc-nb strong { font-size: 1.05rem; color: var(--sc-ink); }

.sc-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.sc-card { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1.25rem; text-decoration: none;
  background: var(--sc-paper); border: 1px solid var(--sc-line); border-radius: 14px; }
.sc-card:hover { border-color: var(--sc-accent); }
.sc-card strong { font-size: 1.1rem; color: var(--sc-ink); }
.sc-card span { font-size: .8125rem; color: var(--sc-ink-faint); }

.sc-sizes { display: flex; flex-wrap: wrap; gap: .5rem; }
.sc-sizes a { background: var(--sc-paper); border: 1px solid var(--sc-line); border-radius: 8px;
  padding: .35rem .7rem; text-decoration: none; font-size: .875rem; font-variant-numeric: tabular-nums; }
.sc-sizes a:hover { border-color: var(--sc-accent); }

.sc-foot { border-top: 1px solid var(--sc-line); padding-top: 1.25rem; font-size: .9375rem;
  color: var(--sc-ink-soft); }


/* ── the site header and footer: the doors on the gate ─────────────────────────────────────────── */
/* ★ §277 polish, his ask: the brand mark + a real site bar — full-width paper with a hairline, the inner
   row capped at the content width. All of it lives in THIS shared cached file: 2,700 pages, zero per-page
   weight, which is the "premium but light" he asked for. */
.sc-nav { background: var(--sc-paper); border-bottom: 1px solid var(--sc-line); }
.sc-nav-in { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
  max-width: 62rem; margin: 0 auto; padding: .85rem 1.25rem; position: relative; }
/* ⚠ CLIPPED, not `hidden` — see the markup note; `hidden` would drop it out of the tab order. */
.sc-menu-cb { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sc-burger { display: none; }
.sc-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 750;
  font-size: 1.0625rem; text-decoration: none; color: var(--sc-ink) !important; letter-spacing: -0.01em; }
.sc-brand img { display: block; }
.sc-brand:hover { color: var(--sc-accent) !important; }
.sc-nav nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.sc-nav nav a { text-decoration: none; font-size: .9375rem; color: var(--sc-ink-soft) !important; }
.sc-nav nav a:hover { color: var(--sc-accent) !important; }

.sc-sitefoot { border-top: 1px solid var(--sc-line); background: var(--sc-paper);
  padding: 2rem 1.25rem 2.25rem; }
.sc-foot-brand { display: flex; align-items: center; gap: .5rem; color: var(--sc-ink-soft) !important; }
.sc-foot-brand strong { color: var(--sc-ink); }
.sc-sitefoot p { max-width: 62rem; margin: 0 auto .5rem; font-size: .875rem; color: var(--sc-ink-faint); }
.sc-sitefoot a { color: var(--sc-ink-soft); text-decoration: none; }
.sc-sitefoot a:hover { color: var(--sc-accent); text-decoration: underline; }

/* ★ the CTA column should not leave a tall blank beside a tall figure */
@media (min-width: 56rem) { .sc-grid { grid-template-columns: 1fr 1fr; } }

/* ★ "Save as PNG · SVG" — offered plainly, because a download nobody notices is a feature nobody has. */
.sc-saves { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
button.sc-dl { background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--sc-accent); cursor: pointer; }
button.sc-dl:hover, a.sc-dl:hover { text-decoration: underline; }
.sc-saves a.sc-dl::before { content: "· "; color: var(--sc-ink-faint); font-weight: 400; }

/* ── MOBILE ─────────────────────────────────────────────────────────────────────────────────────────
   ⚠ Checked on a 390 px viewport: nothing overflowed, but the header ate the fold and a three-column
     numeric table had nowhere to go. Both are fixed here rather than by shrinking the type below the
     site's readability floor. */
@media (max-width: 40rem) {
  .sc-ref { padding: .75rem 1rem 3rem; }
  .sc-nav-in { padding: .6rem 1rem; gap: .4rem 1rem; }
  .sc-nav nav { gap: .75rem; }
  .sc-nav nav a { font-size: .875rem; }
  .sc-brand { font-size: 1rem; }
  .sc-head h1 { font-size: 2rem; }
  .sc-lead { font-size: 1rem; margin-bottom: 1.25rem; }
  .sc-sub { font-size: .875rem; }
  .sc-fig, .sc-cta-box { padding: .85rem; }
  .sc-fig svg { max-height: 13rem; }
  .sc-fig figcaption { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .sc-grid { gap: .9rem; margin-bottom: 1.5rem; }
  .sc-sec { margin-bottom: 1.5rem; }
}

/* ⚠⚠ A NUMERIC TABLE MUST SCROLL RATHER THAN SQUASH. Three columns of tabular figures at 350 px would
      otherwise wrap mid-number ("988,338," / "226") which is unreadable and, on an engineering reference,
      genuinely misleading. The wrapper scrolls; the PAGE never does. */
.sc-tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.sc-tblwrap .sc-tbl { min-width: 26rem; }


/* ── THE MOBILE MENU ────────────────────────────────────────────────────────────────────────────────
   ★ Premium means: a real hit target, a hamburger that BECOMES a close cross, a panel that arrives as a
     card rather than a list dumped under the header — and all of it without a line of JavaScript. */
@media (max-width: 40rem) {
  .sc-nav-in { justify-content: space-between; padding: .7rem 1rem; }
  .sc-burger { display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; margin: -.25rem; border-radius: 10px; cursor: pointer;
    color: var(--sc-ink); transition: background .15s ease; }
  .sc-burger:hover, .sc-burger:active { background: var(--sc-accent-soft); }
  /* ★ the keyboard ring lives on the LABEL because the input it belongs to is visually clipped */
  .sc-menu-cb:focus-visible + .sc-burger { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
  .sc-burger svg path { transition: transform .2s ease, opacity .15s ease; transform-origin: center; }

  .sc-nav nav { display: none; flex-basis: 100%; flex-direction: column; gap: 0;
    background: var(--sc-paper); border: 1px solid var(--sc-line); border-radius: 12px;
    margin-top: .6rem; padding: .35rem; box-shadow: 0 8px 24px rgb(0 0 0 / .10); }
  .sc-menu-cb:checked ~ nav { display: flex; }
  .sc-nav nav a { padding: .7rem .85rem; border-radius: 8px; font-size: 1rem; }
  .sc-nav nav a:hover { background: var(--sc-accent-soft); }

  /* ★ the icon becomes a CROSS when open — the affordance that says "this closes it" */
  .sc-menu-cb:checked + .sc-burger .sc-burger-mid { opacity: 0; }
  .sc-menu-cb:checked + .sc-burger .sc-burger-top { transform: translateY(5px) rotate(45deg); }
  .sc-menu-cb:checked + .sc-burger .sc-burger-bot { transform: translateY(-5px) rotate(-45deg); }
}

/*
 * ★ A DIMMED INLINE QUALIFIER — used by the derived principal rows on an angle page to mark which of the
 *   four second moments the section calculator worked out rather than the standard printing them.
 * ⚠ Added 2026-08-24 with the angle pages: the markup shipped one build earlier with no rule behind it,
 *   which renders as ordinary body text and quietly drops the distinction the label exists to make.
 */
.sc-dim { color: var(--sc-muted, #667085); font-weight: 400; font-size: .9em; }

/* §280 — one hand on the whole site: the static pages' clickables wear the approved pointer too */
a, button, summary, label[for] { cursor: var(--sc-pointing, pointer); }