/* ─────────────────────────────────────────────────────────────────────────────
   Site chrome — shared by every page.

   "Stencil & Steel", rebuilt around a document grid rather than a stack of
   identical blocks. Three rules hold it together:

   1. Section labels hang in a narrow left margin under a 2px rule, the way a
      technical manual sets side-heads. Content runs wide beside them. Not
      every section takes the margin — some open cold, which is the point.
   2. Every measured figure uses tabular figures so columns line up, and the
      condensed face carries labels and large numbers. A monospace is kept
      only for content that genuinely is code.
   3. Density varies deliberately. --tight for data, --open for drawings,
      --band for the one inverted section.

   Colour comes from the tokens the simulator defines in tokens.css. The
   diagram and band tokens below are the only additions, declared for all
   three theme states.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --dg-struct: rgba(18,38,58,.55);
  --dg-floor: rgba(125,135,165,.12);
  --dg-wall: rgba(125,135,165,.10);
  --dg-edge: rgba(0,0,0,.36);
  --dg-ghost: rgba(10,124,134,.08);
  --dg-tagbg: #F3F5F6;
  --dg-tagink: #0A6670;
  --dg-rule: rgba(45,45,65,.60);
  --band: #12263A;
  --band-ink: #E8EDF1;
  --band-muted: rgba(232,237,241,.82);
  --band-rule: rgba(255,255,255,.17);
  --logo-top: #0F8B96; --logo-side: #0A6B74; --logo-end: #07505A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dg-struct: rgba(225,232,238,.55);
    --dg-floor: rgba(160,170,200,.10);
    --dg-wall: rgba(160,170,200,.07);
    --dg-edge: rgba(255,255,255,.30);
    --dg-ghost: rgba(63,191,199,.10);
    --dg-tagbg: #13202C;
    --dg-tagink: #9FD9DD;
    --dg-rule: rgba(210,210,205,.58);
    --band: #060C12;
    --band-ink: #E1E8EE;
    --band-muted: rgba(225,232,238,.78);
    --band-rule: rgba(255,255,255,.13);
    --logo-top: #3FBFC7; --logo-side: #2E98A0; --logo-end: #1F7079;
  }
}
:root[data-theme="dark"] {
  --dg-struct: rgba(225,232,238,.55);
  --dg-floor: rgba(160,170,200,.10);
  --dg-wall: rgba(160,170,200,.07);
  --dg-edge: rgba(255,255,255,.30);
  --dg-ghost: rgba(63,191,199,.10);
  --dg-tagbg: #13202C;
  --dg-tagink: #9FD9DD;
  --dg-rule: rgba(210,210,205,.58);
  --band: #060C12;
  --band-ink: #E1E8EE;
  --band-muted: rgba(225,232,238,.78);
  --band-rule: rgba(255,255,255,.13);
  --logo-top: #3FBFC7; --logo-side: #2E98A0; --logo-end: #1F7079;
}

.shell { max-width: 1280px; margin: 0 auto; padding: 0 22px; }
.shell-wide { max-width: 1520px; margin: 0 auto; padding: 0 22px; }

/* ── Type roles ──────────────────────────────────────────────────────────── */

/* Display: the one shouting moment per page. Stencilled caps, set tight. */
.display {
  font-family: var(--f-cond); font-weight: 700; text-transform: uppercase;
  line-height: .88; letter-spacing: -.004em; text-wrap: balance;
}
h1.display { font-size: clamp(42px, 7.4vw, 96px); }

/* Section headings: same condensed family, sentence case, no shouting. */
.head {
  font-family: var(--f-cond); font-weight: 600; line-height: 1.04;
  font-size: clamp(24px, 2.7vw, 34px); letter-spacing: -.012em; text-wrap: balance;
}
.head-sm { font-family: var(--f-cond); font-weight: 600; font-size: 20px; line-height: 1.1; letter-spacing: -.008em; }

/* Labels are condensed caps. Mono was reading as developer tooling rather
   than freight paperwork, and it is not needed to align figures: the text
   faces carry tabular digits. */
.label {
  display: block; font: 600 11.5px var(--f-cond);
  text-transform: uppercase; letter-spacing: .15em; color: var(--muted);
}

/* ── Data plate: the stencilled information panel on a container door ── */
.plate {
  display: inline-block; padding: 5px 9px; border: 1px solid var(--rule-strong);
  font: 600 12px/1.3 var(--f-cond); text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-2); background: transparent; font-variant-numeric: tabular-nums;
}
.plate strong { color: var(--ink); font-weight: 600; }
.plate-row { display: flex; flex-wrap: wrap; gap: 7px; }

/* ── Hazard striping — only ever on a statement about a limit ── */
.hazard-rule { height: 5px; background: repeating-linear-gradient(-45deg, var(--amber) 0 8px, var(--ink) 8px 16px); }
.band .hazard-rule { background: repeating-linear-gradient(-45deg, var(--amber) 0 8px, #000 8px 16px); }

/* ── Top strip ── */
.site-strip { border-bottom: 1px solid var(--rule-strong); background: var(--panel); }
.site-strip-inner {
  max-width: 1280px; margin: 0 auto; padding: 9px 22px;
  display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap;
}
.wordmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); margin-right: auto; min-width: 0; }
/* Mark from "Concept 2 — Isometric load": a container wireframe, the loaded
   part of it, and an amber dashed line where the load stops. Not square, so
   height is left to follow the viewBox. */
.logo { height: auto; color: var(--ink); flex: 0 0 auto; }
.wordmark .logo { width: 30px; }
.brand-mark.logo { width: 40px; height: auto; }
/* The concept's own rule: under 24px the dashes turn to mush, so they drop
   out and the outline carries the shape on its own. */
.logo-min .logo, .logo.logo-min { width: 20px; }
.logo-min .logo .logo-empty, .logo.logo-min .logo-empty { display: none; }
.logo-min .logo .logo-shell, .logo.logo-min .logo-shell { stroke-width: 11; }
.wordmark .wm {
  font-family: var(--f-cond); font-weight: 700; font-size: 17px;
  letter-spacing: -.005em; white-space: nowrap; color: var(--ink);
}
.wordmark .wm b, .brand-title h1 b { color: var(--accent); font-weight: inherit; }
.site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.site-nav a, .strip-btn {
  font: 600 12.5px var(--f-cond); text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); text-decoration: none; padding: 7px 9px;
  border: 0; background: transparent; border-bottom: 2px solid transparent;
}
.site-nav a:hover, .strip-btn:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.strip-btn { color: var(--ink-2); }

/* ── Sections: one rule, three densities, one inversion ── */
.sect { padding: 68px 0; border-top: 1px solid var(--rule); }
.sect--tight { padding: 40px 0; }
.sect--open { padding: 96px 0; }
.sect--bleed { overflow: hidden; }
.sect--band {
  padding: 76px 0; border-top: 0;
  background: var(--band); color: var(--band-ink);
}
.sect--band .label { color: var(--band-muted); }
.sect--band .sect-aside { border-top-color: var(--band-ink); }
.sect--band p,
.sect--band .sect-main > p,
.sect--band .sect-aside p { color: var(--band-muted); }
.sect--band .tick-list li { border-bottom-color: var(--band-rule); color: var(--band-ink); }
.sect--band .tick-list li strong { color: #fff; }

/* Side-head: the label hangs in the margin under a heavy rule. */
.sect-grid { display: grid; gap: 22px; }
.sect-grid > * { min-width: 0; }
@media (min-width: 1040px) { .sect-grid { grid-template-columns: 13rem minmax(0, 1fr); gap: 0 64px; } }
.sect-aside { border-top: 2px solid var(--ink); padding-top: 11px; }
.sect-aside p { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-top: 14px; }
.sect-aside .plate-row { margin-top: 14px; }
.sect-main > .head { margin: 0 0 14px; }
.sect-main > p { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.sect-main > p + * { margin-top: 26px; }
.sect-main > .head + p { margin-top: 0; }

/* ── Hero ── */
.hero-wrap { padding: 52px 0 44px; }
.hero-title { margin: 20px 0 0; max-width: 15ch; }
.hero-grid { display: grid; gap: 34px; align-items: end; margin-top: 40px; }
@media (min-width: 1080px) { .hero-grid { grid-template-columns: minmax(280px, 24rem) minmax(0, 1fr); gap: 52px; } }
.hero-copy .lead { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 42ch; }
.hero-actions { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin-top: 24px; }

/* The default setup, set as a spec block. Mono makes the columns line up. */
.spec-block { margin-top: 28px; border-top: 1px solid var(--rule); }
.spec-block .label { margin: 14px 0 10px; }
.spec-block dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.spec-block dt { font: 600 11.5px var(--f-cond); text-transform: uppercase; letter-spacing: .11em; color: var(--muted); }
.spec-block dd { font: 500 13.5px var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; }

.btn-solid {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  font: 700 13.5px var(--f-cond); text-transform: uppercase; letter-spacing: .11em;
  text-decoration: none; border-radius: 2px;
}
.btn-solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.sect--band .btn-solid { border-color: var(--accent); }
.btn-text { font-size: 13.5px; font-weight: 500; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── Stat band: the page's own measurements, at the scale they deserve ── */
.statband { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.statband-inner { display: grid; }
@media (min-width: 860px) { .statband-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat-cell { padding: 30px 0 32px; }
.stat-cell + .stat-cell { border-top: 1px solid var(--rule); padding-top: 26px; }
@media (min-width: 860px) {
  .stat-cell + .stat-cell { border-top: 0; border-left: 1px solid var(--rule); padding-left: 36px; padding-top: 30px; }
}
.stat-num {
  display: block; font-family: var(--f-cond); font-weight: 700;
  font-size: clamp(42px, 5.4vw, 74px); line-height: .9; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.stat-num .u { font-size: .38em; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: .18em; }
.stat-cap { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: 14px; max-width: 34ch; }
.stat-cap b { color: var(--ink); font-weight: 600; }

/* ── Live tool frame ── */
.demo { border: 1px solid var(--rule-strong); background: var(--bay); min-width: 0; }
.demo-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 8px 12px; background: var(--ink); color: var(--panel); }
.demo-bar b { font: 700 12px var(--f-cond); text-transform: uppercase; letter-spacing: .13em; }
.demo-bar span { font-size: 12px; opacity: .74; margin-left: auto; }
/* Tall enough that the isometric view is not cropped: the simulator fits the
   isometric projection to width only, so a short frame clips the container. */
.demo iframe { display: block; width: 100%; height: clamp(500px, 66vh, 660px); border: 0; }
.demo-note { display: none; padding: 10px 12px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) {
  /* A one-finger drag inside the frame would pan the 3D view instead of
     scrolling the page, so the embed is display-only on small screens. */
  .demo iframe { pointer-events: none; height: 360px; }
  .demo-note { display: block; }
}

/* ── Figures ── */
.fig { margin: 0; }
.fig .dg { display: block; width: 100%; max-width: 980px; height: auto; color: var(--ink); }
.fig .dg text { font-family: var(--f-cond); font-weight: 600; }
.fig .dg text.lbl { font-family: var(--f-cond); }
/* One drawing runs past the container, clipped by the section. Only where
   there is margin to bleed into — on a phone it just overflows. */
@media (min-width: 1040px) { .bleed-r .dg { max-width: none; width: calc(100% + 13vw); } }
.fig figcaption {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin-top: 20px;
  max-width: 64ch; padding-left: 15px; border-left: 2px solid var(--accent);
}
.fig figcaption b { color: var(--ink); font-weight: 600; }

/* ── Dense output list ── */
.specs { display: grid; gap: 0 48px; border-top: 1px solid var(--rule); }
@media (min-width: 800px) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spec { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.spec dt { font-size: 14px; font-weight: 600; }
.spec .unit { font: 600 11.5px var(--f-cond); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); text-align: right; white-space: nowrap; }
.spec .desc { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }

/* ── Tables ── */
.table-scroll { overflow-x: auto; }
.units { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.units th {
  text-align: left; padding: 0 18px 9px 0; border-bottom: 2px solid var(--ink);
  font: 600 11.5px var(--f-cond); text-transform: uppercase; letter-spacing: .11em; color: var(--muted); white-space: nowrap;
}
.units th .th-unit { color: var(--rule-strong); }
.units td { padding: 9px 18px 9px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.units tbody tr:hover td { background: var(--panel-2); }
.units .num { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.units .u-name { font-weight: 600; }
.units .u-kind { display: block; font: 600 11px var(--f-cond); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.table-foot { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin-top: 14px; max-width: 74ch; }
.table-foot b { color: var(--ink-2); font-family: var(--f-code); font-weight: 500; }
.matrix th:first-child, .matrix td:first-child { position: sticky; left: 0; background: var(--page); }
.matrix tbody tr:hover td:first-child { background: var(--panel-2); }

/* ── Lists ── */
.modes { display: grid; gap: 36px; }
@media (min-width: 900px) { .modes { grid-template-columns: 1.05fr .95fr; gap: 52px; } }
.mode p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 10px 0 8px; max-width: 50ch; }
.tick-list { list-style: none; }
.tick-list li { position: relative; padding: 9px 0 9px 22px; font-size: 14px; line-height: 1.5; border-bottom: 1px solid var(--rule); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: 17px; width: 11px; height: 1px; background: var(--accent); }
.tick-list.warn li::before { background: var(--amber); }
.tick-list li strong { font-weight: 600; color: var(--ink); }

/* ── Footer ── */
.site-footer {
  max-width: 1680px; margin: 0 auto; padding: 4px 22px 26px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 28px; flex-wrap: wrap; font-size: 12px; color: var(--muted);
}
.footer-credit { font-weight: 500; color: var(--ink-2); white-space: nowrap; }

/* Saved scenarios have no account behind them; this says so where people
   are about to rely on them. Same hazard treatment the simulator already
   uses for its own cautions. */
.scenario-warning {
  position: relative; overflow: hidden; margin-bottom: 18px;
  padding: 12px 14px 12px 19px; border-radius: 6px;
  background: var(--amber-soft); color: var(--ink);
  font-size: 13px; line-height: 1.5;
}
.scenario-warning::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(-45deg, var(--amber) 0 5px, var(--ink) 5px 10px);
}
.scenario-warning strong { font-weight: 700; }
.site-foot-wrap { border-top: 1px solid var(--rule); margin-top: 0; padding-top: 24px; }
.site-foot-wrap .site-footer { max-width: 1280px; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a {
  font: 600 11.5px var(--f-cond); text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-strong);
}
.footer-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Interior pages ── */
.page-head { padding: 52px 0 38px; border-bottom: 1px solid var(--rule); }
.page-head .label { margin-bottom: 16px; }
.page-head h1 { font-size: clamp(34px, 5.2vw, 64px); margin: 0; max-width: 18ch; }
.page-head .lead { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin-top: 20px; max-width: 56ch; }

.prose { max-width: 66ch; }
.prose p { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.prose p + p { margin-top: 14px; }
.prose h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 28px 0 10px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); text-underline-offset: 3px; }

.formula {
  display: block; margin: 20px 0; padding: 15px 17px; overflow-x: auto; white-space: pre-wrap;
  background: var(--panel-2); border-left: 2px solid var(--accent);
  font: 500 13px/1.6 var(--f-code); color: var(--ink); font-variant-numeric: tabular-nums;
}

/* Numbered because the calculation genuinely is a sequence. */
.steps { counter-reset: step; list-style: none; margin-top: 10px; }
.steps li { position: relative; padding: 12px 0 12px 44px; font-size: 14.5px; line-height: 1.55; border-bottom: 1px solid var(--rule); }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 13px; width: 24px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-strong); font: 600 11.5px var(--f-cond); color: var(--ink-2);
}
.steps li strong { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.kv-row { display: grid; grid-template-columns: minmax(190px, 17rem) 1fr; gap: 5px 24px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 640px) { .kv-row { grid-template-columns: 1fr; } }
.kv-row code { font: 500 12.5px var(--f-code); color: var(--ink); word-break: break-all; }
.kv-row p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* Unmistakably a placeholder, not a plan someone forgot to fill in. */
.placeholder-block { border: 1px dashed var(--rule-strong); padding: 32px 28px; }
.placeholder-block .label { margin-bottom: 14px; }
.placeholder-block p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 58ch; }

@media (max-width: 760px) {
  .site-footer { grid-template-columns: 1fr; }
  .sect { padding: 48px 0; }
  .sect--open { padding: 56px 0; }
  .sect--band { padding: 52px 0; }
  .hero-wrap { padding: 32px 0 30px; }
  .hero-grid { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ─────────────────────────────────────────────────────────────────────────────
   Embed mode — app.html?embed=1, used by the landing page hero.
   ───────────────────────────────────────────────────────────────────────── */
.embed body { padding-bottom: 0; overflow: hidden; }
.embed .site-strip,
.embed .topbar,
.embed .rail-head,
.embed .rail .collapsible-body,
.embed .cargo,
.embed .results,
.embed .analysis,
.embed .site-foot-wrap,
.embed .mobile-bar { display: none !important; }
.embed .rail { padding: 11px 11px 0; margin-bottom: 9px; }
.embed .workbench { grid-template-columns: minmax(0, 1fr); grid-template-areas: "viewer"; padding: 0 11px 11px; }
.embed .viewer { border-radius: 4px; }
.embed #canvasViewport { height: calc(100vh - 212px); min-height: 210px; }

@media print {
  .site-strip, .demo, .hero-actions, .footer-links { display: none !important; }
  .sect--band { background: #fff !important; color: #000 !important; }
}

/* Bordered panel, used where a caution belongs inside a section rather than
   taking over a whole band. */
.notice { border: 1px solid var(--rule); background: var(--panel); }
.notice-body { padding: 22px 24px; }
.notice-body p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.notice-body p + p { margin-top: 12px; }
.notice-body .tick-list { margin-top: 16px; }