/* ═══════════════════════════════════════════════════════════════════
   Y7 — System tokens (extracted from Y7 Design System.html)
   For use by index-updated.html, intelligence-updated.html, and any
   future page that must conform to the system.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* Colour ─ canonical 11-token palette */
  --midnight:#0A1628;
  --steel:#152844;
  --slate-700:#1F3A5F;
  --slate-500:#7A8A9F;
  --slate-300:#B8C4D4;
  --bone:#F5F1E8;
  --bone-warm:#EBE6DC;
  --ink:#0E1116;
  --signal:#1FB8A0;
  --signal-hot:#2DD4BF;
  --alert:#F87171;

  /* Type ─ EB Garamond / Helvetica Neue / IBM Plex Mono */
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'EB Garamond','Adobe Garamond Pro',Garamond,'Times New Roman',serif;
  --mono:'IBM Plex Mono',Menlo,Consolas,monospace;

  /* Spacing — 8-pt anchored ladder, 10 stops */
  /* Spacing — 4-pixel base, 8-pt cadence from s-2 onward, doubling above s-5.
     The ladder is a hybrid: tight 4-pt steps at the bottom for chrome (border,
     tick, hairline gap); broad 8-pt steps in the middle for component padding;
     doubling at the top for section rhythm. Never invent intermediate values. */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* Motion — single curve, four canonical durations */
  --ease:cubic-bezier(.2,.8,.2,1);
  --d-1:120ms; --d-2:200ms; --d-3:320ms; --d-4:600ms;

  /* Layout */
  --rail:240px;
  --content-max:1100px;

  /* ────────────────────────────────────────────────────────────────
     Type scales — TWO parallel ladders, one canonical ratio.
     Both at modular 1.250 (Major Third). Use the screen scale on
     anything that renders in a browser; use the print scale on PDF
     export, A3/A4 print artefacts, and any document destined for
     paper. Never mix — a print spec given in px will not measure
     true on the printer, and a screen spec given in pt will not
     scale fluidly across viewports.
     ─────────────────────────────────────────────────────────────── */

  /* Screen scale — px, fluid (clamp where size benefits from it). */
  --type-screen-display: clamp(48px, 5.5vw, 76px);
  --type-screen-h1:      clamp(40px, 4.5vw, 61px);
  --type-screen-h2:      clamp(32px, 3.6vw, 49px);
  --type-screen-h3:      clamp(26px, 2.8vw, 39px);
  --type-screen-h4:      31px;
  --type-screen-h5:      25px;
  --type-screen-lead:    clamp(18px, 1.5vw, 22px);
  --type-screen-body:    16px;
  --type-screen-small:   13px;
  --type-screen-caption: 11px;

  /* Print scale — pt, fixed. 11pt body is the floor; nothing smaller
     than 8pt prints reliably on uncoated stock. Use these for A3 brand
     sheets, A4 memos, two-pagers, and any export-to-PDF surface. */
  --type-print-display: 56pt;
  --type-print-h1:      36pt;
  --type-print-h2:      24pt;
  --type-print-h3:      18pt;
  --type-print-h4:      14pt;
  --type-print-h5:      12pt;
  --type-print-lead:    12pt;
  --type-print-body:    11pt;
  --type-print-small:   9pt;
  --type-print-caption: 8pt;

  /* Compact-pitch scale — pt, fixed. ONE surface only: the one-shot
     institutional one-pager (EIB pre-read, IC summary, board brief).
     Each step is one notch below the standard print scale. 10pt body
     is the absolute floor — anything smaller fails to print cleanly.
     If you find yourself reaching for these tokens outside a Compact
     Pitch surface, you are on the wrong document. */
  --type-pitch-display: 30pt;
  --type-pitch-h1:      22pt;
  --type-pitch-h2:      16pt;
  --type-pitch-h3:      14pt;
  --type-pitch-h4:      12pt;
  --type-pitch-h5:      11pt;
  --type-pitch-lead:    11pt;
  --type-pitch-body:    10pt;
  --type-pitch-small:   8pt;
  --type-pitch-caption: 7.5pt;

  /* ────────────────────────────────────────────────────────────────
     Signal state ramp — mirrors the slate ramp.
     Signal is state-driven, not decorative:
       --signal       · REST     · chart series, live tag border, default link
       --signal-hot   · HOVER    · interactive hover, focus ring, active emphasis
       (--signal-dim is intentionally absent — there is no "disabled signal";
        a disabled signal becomes slate-500.)
     ─────────────────────────────────────────────────────────────── */
  --signal-rest: var(--signal);
  --signal-hover: var(--signal-hot);
}

/* ─── Compact Pitch palette overrides ─────────────────────────────────
   When .surface-compact-pitch is applied to a container, the core
   colour tokens resolve to the cooler, white-ground EIB/IC palette
   instead of the warm bone-and-midnight default. Type-scale tokens
   (--type-pitch-*) are independent — apply them via the t.* classes
   on a per-element basis.
   ──────────────────────────────────────────────────────────────────── */
.surface-compact-pitch{
  --midnight: #111827;     /* near-black charcoal, slightly warmer than #0A1628 */
  --steel:    #1A2438;     /* derived one step lighter for panel fills */
  --slate-700:#3F5875;     /* slate-blue, primary hairline + dark text */
  --slate-500:#7A8A9F;     /* unchanged — interpolates between the two below */
  --slate-300:#AFC7D3;     /* pale slate-blue, tertiary text */
  --bone:     #FFFFFF;     /* clean white ground, not cream */
  --bone-warm:#D6EEF0;     /* pale teal panel fill */
  --ink:      #0F1620;
  --signal:   #007E86;     /* darker, deeper teal than the warm-palette signal */
  --signal-hot:#00A4AF;    /* lightened ~12% for hover/focus */
  --signal-rest:var(--signal);
  --signal-hover:var(--signal-hot);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:1rem;
  line-height:1.6;
  background:var(--midnight);
  color:var(--bone);
  overflow-x:hidden;
}
::selection{background:var(--signal);color:var(--midnight)}
a{color:inherit;text-decoration:none}
strong{font-weight:600}
em{font-style:italic}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}

/* ─── Wordmark ─────────────────────────────────────────────────────
   Canon: lowercase 'y7', Helvetica Neue 800. NEVER serif. */
.y7-wordmark{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-.04em;
  text-transform:lowercase;
  font-size:28px;
  line-height:1;
  color:inherit;
  display:inline-block;
}

/* ─── Index numerals (Plex Mono) ───────────────────────────────── */
.idx{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate-500);
}
.idx-rule{
  display:inline-block;height:1px;width:32px;
  background:var(--slate-700);
  vertical-align:middle;margin:0 12px;
}
.light .idx{color:var(--slate-700)}
.light .idx-rule{background:var(--slate-500)}

/* ─── Mono metadata role ───────────────────────────────────────── */
.meta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate-500);
}
.light .meta{color:var(--slate-700)}

/* ─── Display type roles ──────────────────────────────────────── */
.display{font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-.02em}
.h1{font-family:var(--serif);font-weight:500;font-size:clamp(48px,5.5vw,76px);line-height:1.05;letter-spacing:-.02em}
.h2{font-family:var(--serif);font-weight:500;font-size:clamp(36px,3.6vw,49px);line-height:1.1;letter-spacing:-.015em}
.h3{font-family:var(--serif);font-weight:500;font-size:clamp(28px,2.4vw,32px);line-height:1.15;letter-spacing:-.01em}
.lede{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--slate-300)}
.light .lede{color:var(--slate-700)}
.body{font-size:16px;line-height:1.7;color:var(--slate-300);max-width:64ch}
.light .body{color:var(--slate-700)}

/* ─── Signal underline — RETIRED 2026·05·15 ─────────────────────
   The `.signal-u` rule and its `<span class="signal-u">` markup are
   no longer part of the system. Signal is reserved for:
     · data-viz fills (active series, deployable column, etc.)
     · critical-status flags (live tag, critical-risk border)
     · hover / focus states on interactive elements
   Never on the wordmark, headlines, or body copy.
   Any legacy `<span class="signal-u">` markup still in older
   documents renders as plain text — the rule is intentionally gone.
   ──────────────────────────────────────────────────────────────── */

/* ─── Frame marks (corner brackets) ───────────────────────────── */
.frame{position:relative}
.frame::before,.frame::after,.frame > .br-tr,.frame > .br-bl{
  content:"";position:absolute;width:12px;height:12px;pointer-events:none;
  border-color:var(--slate-300);
}
.light .frame::before,.light .frame::after,.light .frame > .br-tr,.light .frame > .br-bl{border-color:var(--slate-500)}
.frame::before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.frame::after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}
.frame > .br-tr{top:-1px;right:-1px;border-top:1px solid;border-right:1px solid}
.frame > .br-bl{bottom:-1px;left:-1px;border-bottom:1px solid;border-left:1px solid}

/* ─── Panels ─────────────────────────────────────────────────── */
.panel{background:var(--steel);border:1px solid var(--slate-700);padding:var(--s-5)}
.light .panel{background:var(--bone-warm);border-color:var(--slate-500)}

/* ─── Buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 22px;border:1px solid var(--bone);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone);background:transparent;
  transition:background var(--d-2) var(--ease),color var(--d-2) var(--ease);
}
.btn:hover{background:var(--bone);color:var(--midnight)}
.btn-primary{background:var(--signal);color:var(--midnight);border-color:var(--signal)}
.btn-primary:hover{background:var(--signal-hot);border-color:var(--signal-hot);color:var(--midnight)}
.btn-arrow{width:14px;height:1px;background:currentColor;position:relative}
.btn-arrow::after{
  content:"";position:absolute;right:-1px;top:-3px;
  width:7px;height:7px;
  border-right:1px solid currentColor;border-top:1px solid currentColor;
  transform:rotate(45deg);
}
.light .btn{border-color:var(--midnight);color:var(--midnight)}
.light .btn:hover{background:var(--midnight);color:var(--bone)}

/* ─── Coordinate ticks (margin glyph) ─────────────────────────── */
.coord-ticks{
  position:absolute;top:0;bottom:0;width:1px;
  background-image:linear-gradient(to bottom,var(--slate-700) 8px,transparent 8px);
  background-size:1px 32px;
  background-repeat:repeat-y;
}

/* ─── Sticky rail ─────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}
aside.rail{
  position:sticky;top:0;align-self:start;
  height:100vh;
  border-right:1px solid var(--slate-700);
  background:var(--midnight);
  padding:var(--s-6) var(--s-5) var(--s-5);
  display:flex;flex-direction:column;
  overflow-y:auto;
  z-index:50;
}
aside.rail .lockup{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:var(--s-5);border-bottom:1px solid var(--slate-700);
}
aside.rail .lockup .y7-wordmark{font-size:32px}
aside.rail .lockup .tag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--slate-500);text-transform:uppercase;text-align:right;line-height:1.4}
aside.rail .meta-block{margin-top:var(--s-4);font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--slate-500);text-transform:uppercase;line-height:1.8}
aside.rail .meta-block .row{display:flex;justify-content:space-between;gap:8px}
aside.rail nav{margin-top:var(--s-6);display:flex;flex-direction:column}
aside.rail nav a{
  display:flex;align-items:baseline;gap:14px;
  padding:10px 0;
  color:var(--slate-300);
  font-size:13px;
  border-top:1px solid var(--slate-700);
  transition:color var(--d-2) var(--ease);
}
aside.rail nav a:first-child{border-top:0}
aside.rail nav a .num{font-family:var(--mono);font-size:10px;color:var(--slate-500);letter-spacing:.08em;width:28px;flex-shrink:0}
aside.rail nav a:hover,aside.rail nav a.active{color:var(--bone)}
aside.rail nav a.active .num{color:var(--signal)}
aside.rail .rail-foot{margin-top:auto;padding-top:var(--s-5);border-top:1px solid var(--slate-700);font-family:var(--mono);font-size:10px;color:var(--slate-500);letter-spacing:.08em;text-transform:uppercase;line-height:1.8}

/* ─── Section shell ──────────────────────────────────────────── */
section.sec{
  padding:var(--s-9) var(--s-8);
  border-bottom:1px solid var(--slate-700);
  position:relative;
}
section.sec.light{background:var(--bone);color:var(--midnight)}
.sec-head{
  display:grid;grid-template-columns:1fr 380px;gap:var(--s-7);
  align-items:end;
  padding-bottom:var(--s-6);
  border-bottom:1px solid var(--slate-700);
  margin-bottom:var(--s-7);
}
.sec.light .sec-head{border-color:var(--slate-500)}
.sec-head .index{display:flex;align-items:baseline;gap:14px;margin-bottom:var(--s-4)}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(40px,4.4vw,64px);line-height:1.04;letter-spacing:-.02em}
.sec-head .lede{font-family:var(--serif);font-style:italic}

/* ─── Mobile rail handling ──────────────────────────────────── */
@media (max-width:1024px){
  .shell{grid-template-columns:1fr}
  aside.rail{
    position:relative;height:auto;width:100%;
    border-right:0;border-bottom:1px solid var(--slate-700);
    padding:var(--s-4) var(--s-5);
  }
  aside.rail nav{display:none}
  aside.rail .meta-block,aside.rail .rail-foot{display:none}
  section.sec{padding:var(--s-7) var(--s-5)}
  .sec-head{grid-template-columns:1fr;gap:var(--s-5)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}