/*
 * ★★★ THE STEEL-SECTION REFERENCE PAGES — their own stylesheet, on purpose.
 *
 * Rafid: *"please make sure to introduce them on high level of premium design style … people will come to
 * this specific page and might get hook to our website. it is a gate to our website!"*
 *
 * ⚠⚠ 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 {
  --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;
}
@media (prefers-color-scheme: dark) {
  :root {
    --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; }
@media (prefers-color-scheme: dark) {
  .sc-art-light { display: none; }
  .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 ─────────────────────────────────────────── */
.sc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
  max-width: 62rem; margin: 0 auto; padding: 1rem 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 { font-weight: 750; font-size: 1.0625rem; text-decoration: none; color: var(--sc-ink) !important;
  letter-spacing: -0.01em; }
.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: 1.75rem 1.25rem; }
.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 { 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 { 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; }