/* Shared long-form treatment for every routed Insights page.
   The hub stays dark and operational. The article sheet is the warm reading
   stratum from the approved product direction. Page-local print rules remain
   authoritative through the reset at the end of this file. */

:root {
  --accent: #c0a878;
  --accent-dark: #dfc991;
  --accent-soft: rgba(192, 168, 120, .14);
  --accent-primary: #c0a878;
  --a: #dfc991;
  --ink: #f5f1e8;
  --muted: #aebab5;
  --line: #45605d;
  --bg: #082929;
  --page: #12383a;
  --soft: #214a4b;
  --surface: #12383a;
  --surface-2: #214a4b;
  --body-ink: #d8dfda;
  --faint-ink: #aebab5;
  --on-btn: #182018;
  --page-shadow: none;
  --green: #aebab5;
  --green-soft: #12383a;
  --c01: #aebab5;
  --c02: #aebab5;
  --c03: #aebab5;
  --c04: #aebab5;
  --c05: #aebab5;
  --c06: #aebab5;
  --c07: #aebab5;
  --t-strong: #dfc991;
  --t-dash: #c0a878;
}

html { background: #082929; }
body {
  background: #082929 !important;
  color: #f5f1e8 !important;
  padding-top: clamp(18px, 4vw, 44px);
}

.page {
  --accent: #c0a878;
  --accent-dark: #5b4b2e;
  --accent-soft: rgba(192, 168, 120, .24);
  --a: #5b4b2e;
  --ink: #1a2d2d;
  --muted: #52635f;
  --line: #cbbf9f;
  --page: #f2e9d5;
  --soft: #e7dcc4;
  --body-ink: #1a2d2d;
  --faint-ink: #5d6c67;
  --on-btn: #f5f1e8;
  --t-strong: #394d48;
  --t-dash: #a99161;
  width: min(900px, 100%);
  max-width: 900px !important;
  min-height: 100vh;
  background: #f2e9d5 !important;
  color: #1a2d2d !important;
  border-top: 4px solid #c0a878;
  border-right: 1px solid #45605d;
  border-left: 1px solid #45605d;
  box-shadow: none !important;
}

.page p,
.page li,
.page dd,
.page .body,
.page .sub,
.page .seclede,
.page .point p,
.page .item p,
.page .finding p,
.page .rec p,
.page .lrow .body { color: #344846; }

.page h1,
.page h2,
.page h3,
.page h4,
.page strong,
.page b,
.page .lead,
.page .name { color: #1a2d2d; }

.page a { color: #4f472d; }
.page a:hover { color: #1a2d2d; }
/* Focus rings clear 3:1 against the ground they sit on: dark brass on the cream sheet
   (6.98:1) and its panels (6.20:1); light brass on the dark ground (9.49:1), set for the
   fixed rail and the site chrome below. */
.page a:focus-visible,
.page button:focus-visible,
.page summary:focus-visible { outline: 3px solid #5b4b2e; outline-offset: 3px; }

.page .back,
.page .meta,
.page .eyebrow,
.page .label,
.page .lbl,
.page .kicker,
.page .n,
.page .org { color: #5b4b2e !important; }

.page .num,
.page .lab,
.page .tick,
.page .was,
.page .verdict.demoted { color: #52635f !important; }

.page .verdict,
.page .bottom,
.page .caveat,
.page .pointer,
.page .link,
.page .deep,
.page .callout,
.page .tier,
.page .stat,
.page .claim,
.page .panel {
  background: #e7dcc4 !important;
  border-color: #c0a878 !important;
  box-shadow: none !important;
}

.page .btn,
.page button.primary {
  background: #c0a878 !important;
  color: #182018 !important;
  border-color: #c0a878 !important;
}

.page h2::before { background: #c0a878 !important; }
.page .finding,
.page .item,
.page .point,
.page .rec,
.page .meta,
.page .cta { border-color: #cbbf9f !important; }

.page .chip.now {
  color: #5b4b2e !important;
  border-color: #c0a878 !important;
}

/* Page-local colours the token reskin above does not reach, found by the 2026-09-14 sweep of
   all 45 routed pages: violet hard-coded in a few page rules, the --teal and --slate token
   families, and brass-accent text below 4.5:1 on the cream sheet. Screen only, so each
   page's own print palette stays authoritative. */
@media screen {
  .page {
    --teal: #5b4b2e;
    --teal-soft: rgba(192, 168, 120, .24);
    --slate: #52635f;
    --slate-soft: #e7dcc4;
  }
  .page .ledger a,
  .page .row b a,
  .page .fix .see a { border-bottom-color: #a99161; }
  .page .fix .see a { color: #4f472d; }
  .page .mark { color: #5b4b2e; }
  .page .badge.corrected,
  .page .badge.demoted { border-color: #c0a878; }
}

/* The heading face (TRA-514, Travis's go-ahead 2026-09-28). Screen only: article h1 and
   h2 use Lora 600. h1 matches the hub .finding h1 metrics; h2 is 23px. Body, labels,
   compact card heads, leads, numerals and print styles remain unchanged. */
@media screen {
  .page h1 {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.18;
    letter-spacing: -0.005em;
    text-wrap: balance;
  }
  .page h2 {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: 23px;
    letter-spacing: -0.01em;
  }
}

.site-chrome {
  border-top: 1px solid #45605d;
}
.site-chrome a:focus-visible { outline: 3px solid #dfc991; outline-offset: 3px; }

/* Keep the verification label and count in one text flow on phones. Flex
   anonymous text items can place the check mark above its own label. */
@media screen and (max-width: 640px) {
  .page header .meta a.ok,
  .page header .meta a.src { display: inline-block; text-wrap: balance; }
  .page header .meta a.ok b,
  .page header .meta a.src b { white-space: nowrap; }
}

@media (max-width: 640px) {
  body { padding-top: 0; }
  .page {
    border-top-width: 3px;
    border-right: 0;
    border-left: 0;
  }
  .page .rec {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .page .rec .org { width: auto; }
  .page .rec .txt { width: 100%; }
}

@media print {
  :root {
    --accent: #5b4bd6;
    --accent-dark: #3d2b8a;
    --accent-soft: #efeafc;
    --a: #5b4bd6;
    --ink: #14233c;
    --muted: #5a6678;
    --line: #e3e8f0;
    --bg: #ffffff;
    --page: #ffffff;
    --soft: #f7f9fc;
    --body-ink: #34425a;
    --faint-ink: #5a6678;
    --on-btn: #ffffff;
  }
  /* paper ground under the sheet too, and no heading stranded at a page foot */
  html { background: #ffffff; }
  .page h2, .page h3 { break-after: avoid; }
  body { background: #ffffff !important; padding-top: 0; }
  .page {
    --accent: #5b4bd6;
    --accent-dark: #3d2b8a;
    --accent-soft: #efeafc;
    --a: #5b4bd6;
    --ink: #14233c;
    --muted: #5a6678;
    --line: #e3e8f0;
    --page: #ffffff;
    --soft: #f7f9fc;
    --body-ink: #34425a;
    --faint-ink: #5a6678;
    --on-btn: #ffffff;
    max-width: none !important;
    background: #ffffff !important;
    color: #14233c !important;
    border: 0;
  }
  .page p,
  .page li,
  .page dd,
  .page .body,
  .page .sub,
  .page .seclede,
  .page .point p,
  .page .item p,
  .page .finding p,
  .page .rec p,
  .page .lrow .body { color: #34425a; }
  .page h1,
  .page h2,
  .page h3,
  .page h4,
  .page strong,
  .page b,
  .page .lead,
  .page .name { color: #14233c; }
  .page .verdict,
  .page .bottom,
  .page .caveat,
  .page .pointer,
  .page .link,
  .page .deep,
  .page .callout,
  .page .tier,
  .page .stat,
  .page .claim,
  .page .panel { background: #f7f9fc !important; border-color: #e3e8f0 !important; }
}

/* The article rail (2026-09-10, the design session's round one with the front door):
   a quiet spine of the page's sections with an active-section marker, and the page's own
   verified link repeated as the rail's last line. Injected at build by
   _working/front-door.mjs (section ids on every h2, the nav, one small script). Below
   1380 px the spine sits inline under the opener on the warm sheet, in the page's dotted
   link style; from 1380 px it stands fixed on the dark ground to the left of the sheet.
   Nothing scrolls the content and nothing floats over it. */
.rail { display: block; margin: 22px 0 0; padding: 12px 0 0; border-top: 1px solid #cbbf9f; font-family: 'Roboto', system-ui, sans-serif; }
.rail .rail-lbl { margin: 0 0 6px; font: 600 12px 'Roboto Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #5b4b2e; }
.rail ol { margin: 0; padding: 0 0 0 1.2em; columns: 2; column-gap: 24px; font-size: 13.5px; line-height: 1.5; color: #344846; }
.rail.rail-long ol { columns: 1; }
.rail li { break-inside: avoid; margin: 2px 0; }
.page .rail a, .rail a { color: #4f472d; text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; border-bottom: 1px dotted #a99161; text-wrap: balance; }
.page .rail a:hover, .rail a:hover { color: #1a2d2d; border-bottom-style: solid; }
.page .rail a[aria-current="true"], .rail a[aria-current="true"] { color: #1a2d2d; font-weight: 600; }
.rail .rail-track, .rail .rail-chip { display: none; }
@media (min-width: 1380px) {
  .rail { position: fixed; left: calc(50% - 450px - 236px); top: 112px; width: 200px; margin: 0; padding: 4px 0 4px 14px; border-top: 0; background: #082929; }
  .rail ol { columns: 1; padding-left: 0; list-style: none; font-size: 13px; color: #aebab5; }
  .rail .rail-lbl { color: #97aaa4; }
  .page .rail a, .rail a { color: #aebab5; border-bottom: 0; }
  .page .rail a:hover, .rail a:hover { color: #f5f1e8; }
  .page .rail a:focus-visible, .rail a:focus-visible { outline-color: #dfc991; }
  .page .rail a[aria-current="true"], .rail a[aria-current="true"] { color: #f5f1e8; }
  .rail .rail-track { display: block; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; background: #2f4d4b; border-radius: 1px; }
  .rail .rail-marker { display: block; position: absolute; left: 0; width: 100%; top: 0; height: 0; background: #c0a878; border-radius: 1px; }
  .page .rail a.rail-chip, .rail .rail-chip { display: inline-flex; margin-top: 12px; padding-top: 10px; border-top: 1px solid #2f4d4b; font: 600 12px 'Roboto Mono', monospace; color: #dfc991; width: 100%; }
  .page .rail a.rail-chip:hover, .rail .rail-chip:hover { color: #f5f1e8; }
}
@media print { .rail { display: none !important; } }

/* Standalone source links retain a readable target in the narrow reading column. */
body a.src { display:inline-flex; align-items:center; min-height:24px; min-width:24px; }

.page .related a, .page .links a, .page .see a { display:inline-flex; align-items:center; min-height:24px; min-width:24px; }

/* Keep ordinary text links usable without reducing their label size. */
.page a { display: inline-block; min-height: 24px; min-width: 24px; max-width: 100%; overflow-wrap: anywhere; }