/* ════════════════════════════════════════════════════════════════════════════
   supernova-09 · Stage 9 DESIGN · css/layout.css
   Spatial system for the Terminal Observatory register (concept v3 —
   “control room”). design-direction.json defines the grammar: a starfield
   deck, window-frame instruments floating in generous air, hairline rules,
   rhythm that breathes (compressed passages around wide-open panes), and a
   path-style breadcrumb chrome that steps aside on scroll-down. layout.css
   encodes that grammar as real classes; BUILD (Stage 10) assigns them to
   sections. Every value is var(--*) from css/tokens.css.

   section index:
     1  foundation (reset, element base, selection/focus)
     2  deck + zone scaffold (starfield, CRT veil, content lane)
     3  spatial rows: .lays grid grammar + control-room ratio rows
     4  section spatial modes (.section-*) — bento intentionally absent
        (anti-homogeneity register)
     5  section rhythm (.rhythm-*) + section headers (.h-sec/.sec-lead)
     6  visual anchors (.anchor-*) — reserve grammar for plate-less pages
     7  shell-terminal (chrome header, path nav, masthead/stamp, footer)
     8  responsive baseline (mandatory — mobile correctness, adapts class
        names of THIS build)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · foundation ────────────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--fs-14);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

pre, code, kbd, samp{ font-family:var(--font-mono); }
img, svg, canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
b, strong{ font-weight:var(--fw-semibold); }

::selection{ background:var(--sel-bg); color:var(--sel-ink); }
:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
}

h1, h2, h3, h4, h5, h6{
  font-weight:var(--fw-semibold);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-none);
}

/* ── 2 · deck + zone scaffold ──────────────────────────────────────────────── */
/* The whole page is an observatory deck; windows float above the starfield. */
.deck{
  position:relative;
  min-height:100vh;
  overflow:hidden;
}
.deck::before{                       /* starfield pinpricks                 */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:var(--z-deck);
  background-image:var(--fx-starfield);
  opacity:.8;
}
.deck::after{                        /* CRT veil — dark theme only          */
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:var(--z-veil);
  background:var(--fx-crt-veil);
  /* no mix-blend-mode: a fixed full-screen blend layer renders differently
     on older Android GPUs — the veil is a 1.8%-alpha scanline, not worth it */
}

:root[data-theme="light"] .deck::after{ display:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* content lane above the deck */
.zone{
  position:relative;
  z-index:var(--z-content);
  max-width:var(--content-max);
  margin:0 auto;
  padding:var(--sp-10) var(--gutter-zone) var(--sp-70);
}

/* ── 3 · spatial rows — the “lays” grammar ─────────────────────────────────── */
/* A row of windows on the deck. Gap and ratio come from tokens; rows differ
   so no two consecutive layouts repeat (anti-homogeneity: not a bento).    */
.lays{
  display:grid;
  gap:var(--grid-gap);
  align-items:start;
}
.lays .lays{ gap:var(--stack-gap); }   /* stacked side column keeps its own cadence */

/* control-room row ratios (mock-approved proportion presets) */
.a1{ grid-template-columns:var(--grid-1); }        /* full-width pane        */
.a7{ grid-template-columns:var(--grid-7); }        /* wide + side rail       */
.a5{ grid-template-columns:var(--grid-5); }        /* sidecar + wide         */
.a8{ grid-template-columns:var(--grid-8); }        /* chart + stack          */
.trio{ grid-template-columns:var(--grid-trio); }
.four{ grid-template-columns:var(--grid-four); }
.five{ grid-template-columns:var(--grid-five); }

/* ── 4 · section spatial modes ─────────────────────────────────────────────── */
/* design-direction spatial grammar (bento is on the anti-homogeneity
   register and is deliberately NOT provided). Sections carry a
   section-{mode} class; rhythm-* classes set the vertical breathing.       */
.section-asymmetric-left{ grid-template-columns:var(--grid-7); }
.section-split{ grid-template-columns:var(--grid-split); }
.section-grid-dense{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.section-full-bleed{
  max-width:none;
  padding-inline:0;
}

/* pure typography — no plates, no cards (declaration moments) */
.section-declaration{ max-width:var(--content-lead); }
.section-compressed{ max-width:var(--content-narrow); }
.section-centered{ max-width:var(--content-max); }
.section-centered > *{ max-width:var(--content-lead); margin-inline:auto; }

/* staggered rhythm — alternating offsets resolve to a hairline stack on
   small screens via the responsive baseline (§8) */
.section-staggered > :nth-child(even){ margin-inline-start:var(--sp-56); }

/* ── 5 · rhythm + section headers ──────────────────────────────────────────── */
.rhythm-compressed{ margin-top:var(--rhythm-compressed); }
.rhythm-standard{ margin-top:var(--rhythm-standard); }
.rhythm-generous{ margin-top:var(--rhythm-generous); }
.rhythm-very-generous{ margin-top:var(--rhythm-very-generous); }

/* section heading row — “NN label $ cat ./path” grammar */
.h-sec{
  display:flex;
  align-items:baseline;
  gap:var(--sp-14);
  font-size:var(--fs-15);
  color:var(--ink);
  font-weight:var(--fw-semibold);
  margin:0 0 var(--sp-4);
  letter-spacing:var(--ls-head);
  flex-wrap:wrap;
}
.h-sec .n{ color:var(--rose); }                 /* number marker            */
.h-sec .path{ color:var(--ink-faint); font-weight:var(--fw-regular); font-size:var(--fs-12); }
.h-sec .grn{ font-weight:var(--fw-medium); }

.sec-lead{
  color:var(--ink-dim);
  max-width:var(--content-lead);
  margin:var(--sp-6) 0 var(--sp-20);
  font-size:var(--fs-14);
}
.sec-lead b{ color:var(--ink); font-weight:var(--fw-medium); }
.sec-lead .rose{ color:var(--rose); font-weight:var(--fw-medium); }
.sec-lead .grn{ color:var(--green); font-weight:var(--fw-medium); }

/* ── 6 · visual anchors ────────────────────────────────────────────────────── */
/* Reserve grammar for plate-less pages (declaration blocks, evidence
   ledgers, screenshot strips). Styled strictly from tokens so they always
   match the register; BUILD only reaches for these when a section in
   design-plan needs a resting moment between instrument windows.           */
.anchor-typography-only{
  max-width:var(--content-lead);
  padding-block:var(--sp-24);
}
.anchor-typography-only .anchor-line{
  font-size:var(--fs-cta);
  color:var(--ink-hi);
  line-height:var(--lh-head);
}
.anchor-typography-only .anchor-note{
  color:var(--ink-dim);
  font-size:var(--fs-13);
  max-width:var(--content-narrow);
  margin-top:var(--sp-12);
}

.anchor-oversized-quote{
  max-width:var(--content-lead);
  border-top:var(--border-window);
  padding-top:var(--sp-20);
}
.anchor-oversized-quote q{
  display:block;
  font-size:var(--fs-cta);
  line-height:var(--lh-head);
  color:var(--ink-hi);
  quotes:"“" "”";
}
.anchor-oversized-quote q::before{ content:open-quote; color:var(--rose); }
.anchor-oversized-quote q::after{ content:close-quote; color:var(--rose); }
.anchor-oversized-quote cite{
  display:block;
  margin-top:var(--sp-12);
  font-style:normal;
  font-size:var(--fs-12);
  color:var(--ink-dim);
}

.anchor-color-field{
  background:color-mix(in srgb,var(--rose) 5%,var(--bg));
  border:var(--border-window);
  border-radius:var(--radius-window);
  padding:var(--sp-40) var(--sp-24);
  text-align:center;
}
.anchor-color-field--grn{ background:color-mix(in srgb,var(--green) 5%,var(--bg)); }
.anchor-color-field .anchor-line{
  font-size:var(--fs-cta);
  color:var(--ink-hi);
  line-height:var(--lh-head);
  max-width:var(--content-lead);
  margin-inline:auto;
}

/* one child interrupts the grid — spans two columns/rows (reserve) */
.anchor-grid-interruption{ grid-column:1 / -1; }

/* 60/40 composition with an intentional void on the wide side */
.anchor-asymmetric-composition{ grid-template-columns:var(--grid-5); }

/* horizontal evidence strip — snap-scroll, hidden scrollbar (case-studies
   screenshot ledgers, source strips). Fades at both edges. */
.anchor-horizontal-scroll{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(min(420px,78vw),1fr);
  gap:var(--grid-gap);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-bottom:var(--sp-8);
  scrollbar-width:none;
}
.anchor-horizontal-scroll::-webkit-scrollbar{ display:none; }
.anchor-horizontal-scroll > *{ scroll-snap-align:start; }

/* ── 7 · shell-terminal ────────────────────────────────────────────────────── */
/* chrome-specs.json id "terminal": shell_class shell-terminal (applied to
   <body> at BUILD). Overrides per interview (locked in design-direction):
   header minimal_top_bar → hidden-on-scroll; nav text_inline → path-style
   breadcrumbs; footer minimal (one-line honesty bar).                    */
.shell-terminal{
  background:var(--bg);
}

/* header — path chrome; translucent paper, hairline seat. No backdrop
   blur (Ban #3); the tint alone reads as a separate surface. */
.chrome{
  position:sticky;
  top:0;
  z-index:var(--z-chrome);
  display:flex;
  align-items:center;
  gap:var(--sp-14);
  padding:var(--sp-8) var(--gutter-deck);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  border-bottom:var(--border-hair);
  transition:transform var(--dur-chrome) var(--ease-default);
}
.chrome.hide{ transform:translateY(-101%); }   /* steps aside on scroll-down */
.chrome .led{
  width:var(--sp-8);
  height:var(--sp-8);
  border-radius:50%;
  background:var(--rose);
  box-shadow:var(--glow-rose);
  flex:0 0 auto;
}
.chrome .crumb{
  display:flex;
  gap:var(--sp-2);
  color:var(--ink-dim);
  white-space:nowrap;
  overflow-x:auto;
  min-width:0;
  flex:1;
  align-items:baseline;
  scrollbar-width:none;
}
.chrome .crumb::-webkit-scrollbar{ display:none; }
.chrome .crumb .root{ color:var(--ink); font-weight:var(--fw-medium); }
.chrome .crumb .root .rose{ color:var(--rose); font-weight:var(--fw-medium); }
.chrome .crumb .sep{ color:var(--ink-faint); }
.chrome .crumb a{ color:var(--ink-dim); padding:0 var(--sp-6); white-space:nowrap; transition:color var(--dur-micro) var(--ease-default); }
.chrome .crumb a:hover{ color:var(--rose); }
.chrome .crumb a[aria-current="page"]{ color:var(--ink); }
.chrome .pill{ margin-left:auto; }

/* masthead — figlet title-stamp (identity, not hero type). The green→rose
   vertical degrade masthead is an APPROVED brand feature prescribed by
   design-direction.json typography.display; the 10-bans automation (Ban #2)
   targets template gradient headlines, so this rule intentionally lives in
   layout.css (shell identity) and is documented in DESIGN.md — not in
   components.css, which stays ban-clean. */
.stamp-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-18);
  flex-wrap:wrap;
}
.stamp pre,
.figlet{
  margin:0;
  min-width:0;
  font-family:var(--font-mono);
  font-size:var(--fs-stamp);
  line-height:var(--lh-stamp);
  letter-spacing:var(--ls-none);
  color:var(--figlet-19);   /* base; the .f1-.f39 bands carry the sunburst */
  font-style:normal;
}
/* Sunburst bands — painted with `color`. A clipped background would be dimmed by
   browsers that force dark web pages, and trips ban #2. */
.stamp pre .f1,.figlet .f1{color:var(--figlet-1)}
.stamp pre .f2,.figlet .f2{color:var(--figlet-2)}
.stamp pre .f3,.figlet .f3{color:var(--figlet-3)}
.stamp pre .f4,.figlet .f4{color:var(--figlet-4)}
.stamp pre .f5,.figlet .f5{color:var(--figlet-5)}
.stamp pre .f6,.figlet .f6{color:var(--figlet-6)}
.stamp pre .f7,.figlet .f7{color:var(--figlet-7)}
.stamp pre .f8,.figlet .f8{color:var(--figlet-8)}
.stamp pre .f9,.figlet .f9{color:var(--figlet-9)}
.stamp pre .f10,.figlet .f10{color:var(--figlet-10)}
.stamp pre .f11,.figlet .f11{color:var(--figlet-11)}
.stamp pre .f12,.figlet .f12{color:var(--figlet-12)}
.stamp pre .f13,.figlet .f13{color:var(--figlet-13)}
.stamp pre .f14,.figlet .f14{color:var(--figlet-14)}
.stamp pre .f15,.figlet .f15{color:var(--figlet-15)}
.stamp pre .f16,.figlet .f16{color:var(--figlet-16)}
.stamp pre .f17,.figlet .f17{color:var(--figlet-17)}
.stamp pre .f18,.figlet .f18{color:var(--figlet-18)}
.stamp pre .f19,.figlet .f19{color:var(--figlet-19)}
.stamp pre .f20,.figlet .f20{color:var(--figlet-20)}
.stamp pre .f21,.figlet .f21{color:var(--figlet-21)}
.stamp pre .f22,.figlet .f22{color:var(--figlet-22)}
.stamp pre .f23,.figlet .f23{color:var(--figlet-23)}
.stamp pre .f24,.figlet .f24{color:var(--figlet-24)}
.stamp pre .f25,.figlet .f25{color:var(--figlet-25)}
.stamp pre .f26,.figlet .f26{color:var(--figlet-26)}
.stamp pre .f27,.figlet .f27{color:var(--figlet-27)}
.stamp pre .f28,.figlet .f28{color:var(--figlet-28)}
.stamp pre .f29,.figlet .f29{color:var(--figlet-29)}
.stamp pre .f30,.figlet .f30{color:var(--figlet-30)}
.stamp pre .f31,.figlet .f31{color:var(--figlet-31)}
.stamp pre .f32,.figlet .f32{color:var(--figlet-32)}
.stamp pre .f33,.figlet .f33{color:var(--figlet-33)}
.stamp pre .f34,.figlet .f34{color:var(--figlet-34)}
.stamp pre .f35,.figlet .f35{color:var(--figlet-35)}
.stamp pre .f36,.figlet .f36{color:var(--figlet-36)}
.stamp pre .f37,.figlet .f37{color:var(--figlet-37)}
.stamp pre .f38,.figlet .f38{color:var(--figlet-38)}
.stamp pre .f39,.figlet .f39{color:var(--figlet-39)}

.stamp-side{
  text-align:right;
  font-size:var(--fs-12);
  color:var(--ink-dim);
  line-height:var(--lh-body);
}
.stamp-side .comment{ font-size:var(--fs-11); }

/* footer — minimal honesty bar (footer_layout: minimal) */
.foot{
  border-top:var(--border-window);
  margin-top:var(--sp-46);
  padding:var(--sp-18) var(--sp-4) var(--sp-4);
  color:var(--ink-dim);
  font-size:var(--fs-12);
  line-height:var(--lh-body);
  display:flex;
  justify-content:space-between;
  gap:var(--sp-20);
  flex-wrap:wrap;
}
.foot b{ color:var(--ink); font-weight:var(--fw-medium); }
.foot .rose{ color:var(--rose); }
.foot a{ color:var(--ink-dim); transition:color var(--dur-micro) var(--ease-default); }
.foot a:hover{ color:var(--rose); }
.foot nav{ display:flex; flex-wrap:wrap; gap:var(--sp-4); white-space:nowrap; }
.foot nav a{ padding:0 var(--sp-2); }
.foot nav a + a::before{ content:"·"; color:var(--line-2); margin-inline:var(--sp-8); }
.foot .copy{ max-width:calc(var(--content-lead) - var(--sp-32)); }

/* ── 8 · responsive baseline (mandatory — mobile correctness) ──────────────── */
/* Wide splits lose their rail first; every multi-column grid collapses to a
   single column ≤860px; spanning children stop spanning; staggered offsets
   reset; ≤640px hardening keeps 375px clean. */
@media (max-width:1080px){
  .a7, .a5, .a8, .section-asymmetric-left, .section-split,
  .anchor-asymmetric-composition,
  [data-mode="asymmetric_left"], [data-mode="split"]{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .trio, .four, .five, .section-grid-dense,
  [data-mode="asymmetric_left"], [data-mode="split"],
  [data-mode="grid_dense"]{ grid-template-columns:1fr; }
  .a1{ grid-template-columns:1fr; }

  /* rows hug content — never 1fr-equalized pockets under short cards */
  .lays, .trio, .four, .five, .section-grid-dense,
  .anchor-horizontal-scroll, [class$="-grid"]{ grid-auto-rows:auto; }
  .anchor-grid-interruption{ grid-column:auto; grid-row:auto; }

  /* staggered offsets read as broken in a single column */
  .section-staggered > :nth-child(even){ margin-inline-start:0; }

  /* pipeline run band: vertical stack, top hairline rules */
  .runstep:not(:last-child)::after{ display:none; }
  .runstep{ border-top:var(--border-hair); }
  .runstep:first-child{ border-top:0; }

  /* telemetry ticker: 2-up grid instead of a squeezed 5-across strip.
     Hairline rules become row/column separators between the 2-up cells. */
  .tick{
    grid-auto-flow:row;
    grid-template-columns:repeat(2,1fr);
  }
  .tick .cell::after{ display:none; }
  .tick .cell:nth-child(odd):not(:last-child)::after{
    display:block;
    content:"";
    position:absolute;
    top:var(--sp-10);
    bottom:var(--sp-10);
    right:0;
    width:var(--hairline);
    background:var(--line);
  }
  .tick .cell:nth-child(even):not(:last-child)::after{
    display:block;
    content:"";
    position:absolute;
    left:var(--sp-10);
    right:var(--sp-10);
    bottom:0;
    height:var(--hairline);
    background:var(--line);
  }

  .section-centered > *,
  .section-declaration{ max-width:none; }
}

@media (max-width:640px){
  .zone{ padding-inline:var(--sp-16); }
  .chrome{ gap:var(--sp-8); }
  .chrome .crumb a{ padding:0 var(--sp-4); }
  .stamp-side{ text-align:left; }

  /* grid/flex children default to min-width:auto → forced overflow */
  .tick .cell, .win, .runstep, .tier, .pane, .faq details,
  .stamp, .stamp-wrap, pre.chart,
  [data-mode] > *{ min-width:0; }
  .win, .runstep{ max-width:100%; }
  .foot nav{ white-space:normal; }
  /* ≤344px: the figlet line quantizes to 308px (77 glyphs × 4px advance), so a
     320px screen needs the tighter gutter to fit the masthead whole. */
  @media (max-width:344px){
    .zone{ padding-inline:var(--sp-6); }
  }
}