/* ------------------------------------------------------------------
   VOIDSTAR LABS // LEGAL TRANSMISSION
   Shared styles for terms.html, privacy.html, accessibility.html and
   404.html. Referenced as legal.css?v=N — bump N on every page together.
   Aesthetic: a single quiet "transmission" document — same fonts and
   palette as the console, but no animations and no chrome. The page
   should read like a teletype communique.

   Sections: fonts · tokens · page frame · top nav · header · body ·
   transmission log · footer · signal lost (404) · mobile
------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   FONTS — self-hosted (ADR-0004). Latin woff2 subsets, SIL OFL; see
   THIRD_PARTY_NOTICES.md and fonts/manifest.json. Referenced as
   fonts/<file>?v=N — bump N with the file.
------------------------------------------------------------------ */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Major Mono Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/major-mono-display-400-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/vt323-400-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* the console's tokens, the subset a transmission page needs (see console.css) */
:root {
  --void:        #06070a;
  --void-2:      #0b0d12;
  --void-3:      #050608;
  --panel:       #14171c;
  --panel-edge:  #2a2f37;
  --label:       #8a8e95;
  --bone:        #d8d4c8;
  --amber:       #ffa033;
  --amber-dim:   #b56e15;
  --amber-glow:  #ffb766;
  --phosphor:    #4ddbff;
  --phosphor-glow:#9aeaff;
  /* RGB triplets — for glows: rgba(var(--amber-rgb), .4) */
  --amber-rgb:         255, 160, 51;
  --phosphor-rgb:      77, 219, 255;
  --phosphor-glow-rgb: 154, 234, 255;
  --panel-edge-rgb:    42, 47, 55;
  --bone-rgb:          216, 212, 200;
  /* ---- TYPE SCALE — one ladder for the console and the transmission pages.
     The two stylesheets are never loaded together, so the block below is
     written out in both and scripts/check.mjs fails if the copies drift:
     one scale, defined once, consumed twice. Every font-size in either
     sheet is one of these steps — a literal px is a step off the ladder.
     Where the line between a stamp and something with a job sits is in
     docs/DESIGN.md; the floor is --t-micro.
       --t-stamp       8   a mark that carries no state: LABS, CRT-A · S/N,
                           dial units, the astro annotations
       --t-etch        9   the same, where 8px would fail under tracking
       --t-micro      10   THE FLOOR for anything a visitor reads for meaning
       --t-label      11   engraved labels, box titles
       --t-data       12   readouts, log rows
       --t-body       13   the console's prose
       --t-prose      14   the transmission pages' reading size
       --t-lede       16   a control face, a lead-in
       --t-head       18   a screen title
       --t-subhead    20
       --t-title      22   the tuned program's name
       --t-title-lg   26
       --t-display    30   the wordmark on a card
       --t-display-lg 38   a transmission page's title
       --t-hero       44   SIGNAL LOST */
  --t-stamp:        8px;
  --t-etch:         9px;
  --t-micro:       10px;
  --t-label:       11px;
  --t-data:        12px;
  --t-body:        13px;
  --t-prose:       14px;
  --t-lede:        16px;
  --t-head:        18px;
  --t-subhead:     20px;
  --t-title:       22px;
  --t-title-lg:    26px;
  --t-display:     30px;
  --t-display-lg:  38px;
  --t-hero:        44px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--bone);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: var(--t-prose);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body {
  background:
    radial-gradient(ellipse at 50% 0%, var(--panel) 0%, var(--void-2) 55%, var(--void-3) 100%);
}

/* faint scanline overlay — same texture as the CRT, dialed way back */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.18) 0px,
    rgba(0,0,0,0.18) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: multiply;
  z-index: 1;
}

/* warm/cool corner glow */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--amber-rgb),0.06), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(var(--phosphor-rgb),0.05), transparent 45%);
  z-index: 1;
}

a { color: var(--phosphor); }

/* ------------------------------------------------------------------
   PAGE FRAME
------------------------------------------------------------------ */
.page {
  position: relative;
  z-index: 2;
  max-width: 740px;
  margin: 0 auto;
  padding: 36px 28px 64px;
}

/* ------------------------------------------------------------------
   TOP NAV — brand mark + return link
------------------------------------------------------------------ */
.legal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--panel-edge);
  margin-bottom: 36px;
}

/* Every standalone control on a transmission page clears 44px. The links
   inside the prose (`.legal-body a`) deliberately do not: WCAG 2.5.8 exempts
   a target "in a sentence or block of text", and padding an inline link tall
   enough would overlap the lines above and below it and steal their clicks. */
.legal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}
/* the mark — the same inline SVG as favicon.svg / src/components/Mark.jsx;
   the page is motionless, so the star does not turn here */
.legal-brand .lg-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 4px rgba(var(--amber-rgb),0.4));
}
.legal-brand .lg-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
/* the word is "voidstar" — the spacing is letter-spacing, as on the
   console, so a screen reader hears one word */
.legal-brand .lg-text .b1 {
  font-family: 'Major Mono Display', ui-monospace, monospace;
  font-size: var(--t-prose);
  letter-spacing: 0.45em;
  color: var(--bone);
  text-shadow: 0 0 6px rgba(var(--amber-rgb),0.4);
  text-transform: lowercase;
  white-space: nowrap;
}
.legal-brand .lg-text .b2 {
  font-size: var(--t-stamp);
  letter-spacing: 0.5em;
  color: var(--phosphor);
  text-shadow: 0 0 4px rgba(var(--phosphor-rgb),0.4);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: 'VT323', monospace;
  font-size: var(--t-lede);
  letter-spacing: 0.16em;
  color: var(--phosphor);
  text-decoration: none;
  text-transform: uppercase;
  padding: 6px 16px;
  border: 1px solid var(--panel-edge);
  background: rgba(var(--phosphor-rgb),0.04);
  transition: border-color 0.15s, color 0.15s, text-shadow 0.15s, background 0.15s;
  white-space: nowrap;
}
.legal-back:hover,
.legal-back:focus-visible {
  border-color: var(--phosphor);
  color: var(--phosphor-glow);
  text-shadow: 0 0 6px rgba(var(--phosphor-glow-rgb),0.5);
  background: rgba(var(--phosphor-rgb),0.08);
  outline: none;
}
/* keyboard focus keeps the colour shift AND gets a visible ring (WCAG 2.4.7) */
.legal-back:focus-visible {
  outline: 1px dashed var(--phosphor);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   HEADER
------------------------------------------------------------------ */
.legal-header {
  margin-bottom: 40px;
}
.legal-eyebrow {
  font-family: 'VT323', monospace;
  font-size: var(--t-prose);
  letter-spacing: 0.32em;
  color: var(--phosphor);
  text-transform: uppercase;
  margin: 0 0 6px;
  text-shadow: 0 0 4px rgba(var(--phosphor-rgb),0.4);
}
.legal-title {
  font-family: 'Major Mono Display', ui-monospace, monospace;
  font-size: var(--t-display-lg);
  letter-spacing: 0.06em;
  color: var(--bone);
  text-shadow: 0 0 14px rgba(var(--amber-rgb),0.25);
  margin: 0 0 18px;
  text-transform: lowercase;
  line-height: 1.05;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  color: var(--label);
  text-transform: uppercase;
  padding: 10px 0;
  border-top: 1px dashed rgba(var(--amber-rgb),0.3);
  border-bottom: 1px dashed rgba(var(--amber-rgb),0.3);
}
.legal-meta b {
  color: var(--amber);
  font-weight: 500;
  margin-left: 6px;
  text-shadow: 0 0 4px rgba(var(--amber-rgb),0.35);
}

/* ------------------------------------------------------------------
   BODY — numbered sections
------------------------------------------------------------------ */
.legal-body section {
  margin-bottom: 32px;
}
.legal-body h2 {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: var(--t-body);
  letter-spacing: 0.22em;
  color: var(--phosphor);
  text-transform: uppercase;
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-weight: 600;
}
.legal-body h2::before {
  content: attr(data-num);
  font-family: 'VT323', monospace;
  font-size: var(--t-title);
  color: var(--amber);
  letter-spacing: 0.04em;
  flex: 0 0 auto;
  text-shadow: 0 0 4px rgba(var(--amber-rgb),0.4);
  line-height: 1;
}
.legal-body h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--phosphor-rgb),0.4), transparent);
}
.legal-body p,
.legal-body li {
  font-size: var(--t-prose);
  color: var(--bone);
  line-height: 1.78;
  margin: 0 0 12px;
}
.legal-body ul {
  padding-left: 22px;
  margin: 0 0 16px;
  list-style: none;
}
.legal-body li {
  position: relative;
  padding-left: 4px;
}
.legal-body li::before {
  content: "▸";
  position: absolute;
  left: -16px;
  color: var(--amber);
  font-size: var(--t-label);
  top: 0.35em;
  text-shadow: 0 0 4px rgba(var(--amber-rgb),0.35);
}
.legal-body strong {
  color: var(--amber);
  font-weight: 500;
}
.legal-body a {
  color: var(--phosphor);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s, text-shadow 0.15s;
}
.legal-body a:hover,
.legal-body a:focus-visible {
  color: var(--phosphor-glow);
  text-shadow: 0 0 6px rgba(var(--phosphor-glow-rgb),0.5);
  outline: none;
}
.legal-body a:focus-visible {
  outline: 1px dashed var(--phosphor);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   TRANSMISSION LOG — in-page version history, between body and footer
------------------------------------------------------------------ */
.legal-history {
  margin-top: 44px;
  padding: 14px 18px 10px;
  border: 1px dashed rgba(var(--amber-rgb),0.3);
  background: rgba(var(--amber-rgb),0.025);
}
.legal-history h2 {
  font-family: 'VT323', monospace;
  font-size: var(--t-prose);
  font-weight: 400;
  letter-spacing: 0.32em;
  color: var(--phosphor);
  text-transform: uppercase;
  text-shadow: 0 0 4px rgba(var(--phosphor-rgb),0.4);
  margin: 0 0 8px;
}
.legal-history ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.legal-history li {
  display: grid;
  grid-template-columns: 44px 96px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid rgba(var(--panel-edge-rgb),0.7);
  font-size: var(--t-data);
  line-height: 1.6;
  color: var(--label);
}
.legal-history li:first-child { border-top: 0; }
.legal-history b {
  font-family: 'VT323', monospace;
  font-size: var(--t-head);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--amber);
  text-shadow: 0 0 4px rgba(var(--amber-rgb),0.4);
  line-height: 1;
}
.legal-history time {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  color: var(--phosphor);
}

/* ------------------------------------------------------------------
   FOOTER
------------------------------------------------------------------ */
.legal-foot {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--panel-edge);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px 24px;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  color: var(--label);
  text-transform: uppercase;
}
/* the footer's links are standalone navigation, not prose — full touch targets */
.legal-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--amber);
  text-decoration: none;
  transition: color 0.15s, text-shadow 0.15s;
}
.legal-foot a:hover,
.legal-foot a:focus-visible {
  color: var(--amber-glow);
  text-shadow: 0 0 6px rgba(var(--amber-rgb),0.4);
  outline: none;
}
.legal-foot a:focus-visible {
  outline: 1px dashed var(--amber);
  outline-offset: 3px;
}
/* Row 1: seal (left) + hailing (right). Row 2: the four document links on
   their own full-width line so they never wrap mid-separator. DOM order
   stays seal → nav → hail for readers; the grid places them visually. */
.legal-foot .seal {
  grid-row: 1;
  grid-column: 1;
  font-family: 'Major Mono Display', ui-monospace, monospace;
  font-size: var(--t-data);
  letter-spacing: 0.08em;
  color: var(--bone);
  text-transform: lowercase;
  text-shadow: 0 0 4px rgba(var(--amber-rgb),0.3);
}
.legal-foot .seal-word { letter-spacing: 0.45em; }
/* hailing: e-mail + X handle */
.legal-foot-hail {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 24px; /* the links carry their own 44px height now */
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
}
.legal-foot-hail a {
  color: var(--phosphor);
  text-transform: none;
  letter-spacing: 0.08em;
}
.legal-foot-hail a:hover,
.legal-foot-hail a:focus-visible {
  color: var(--phosphor-glow);
  text-shadow: 0 0 6px rgba(var(--phosphor-glow-rgb),0.5);
}
.legal-foot-hail a:focus-visible { outline-color: var(--phosphor); }
.legal-foot-nav {
  grid-row: 2;
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px dashed rgba(var(--panel-edge-rgb),0.9);
}
/* document cross-links: TERMS · PRIVACY · ACCESSIBILITY · RETURN TO STATION */
.legal-foot-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
/* the separator sits on the row's centre line beside the 44px links */
.legal-foot-nav li { display: flex; align-items: center; }
.legal-foot-nav li + li::before {
  content: "·";
  margin: 0 10px;
  color: var(--label);
}
.legal-foot-nav a[aria-current="page"] {
  color: var(--bone);
  pointer-events: none;
}

/* ------------------------------------------------------------------
   SIGNAL LOST — 404.html
   The station's "no carrier" card: the mark with its halo gone dark,
   a static band, one line of copy, and the way back. No motion.
------------------------------------------------------------------ */
.lost {
  text-align: center;
  padding: 40px 0 8px;
}
.lost-mark {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 30px;
}
.lost-mark::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(180,65,15,0.35) 0%,
    rgba(230,120,40,0.18) 35%,
    rgba(255,160,60,0.10) 55%,
    transparent 80%);
  filter: blur(3px);
}
.lost-mark::after {
  content: "";
  position: absolute;
  inset: 22%;
  background: #000;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  filter: drop-shadow(0 0 4px rgba(255,140,50,0.35))
          drop-shadow(0 0 10px rgba(255,180,80,0.15));
}
.lost-mark .ring {
  position: absolute;
  inset: 8%;
  border: 1px dashed rgba(255,224,160,0.45);
  border-radius: 50%;
}
.lost .legal-eyebrow { margin-bottom: 8px; }
.lost-title {
  font-family: 'Major Mono Display', ui-monospace, monospace;
  font-size: var(--t-hero);
  letter-spacing: 0.08em;
  line-height: 1.05;
  color: var(--bone);
  text-shadow: 0 0 14px rgba(var(--amber-rgb),0.25);
  text-transform: lowercase;
  margin: 0 0 22px;
}
.lost-static {
  position: relative;
  height: 34px;
  margin: 0 auto 26px;
  max-width: 520px;
  border-top: 1px solid var(--panel-edge);
  border-bottom: 1px solid var(--panel-edge);
  background: repeating-linear-gradient(
    90deg,
    rgba(var(--bone-rgb),0.05) 0 2px,
    transparent 2px 5px,
    rgba(var(--bone-rgb),0.09) 5px 6px,
    transparent 6px 11px
  );
}
.lost-static span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 14px;
  background: var(--void);
  font-family: 'VT323', monospace;
  font-size: var(--t-lede);
  letter-spacing: 0.34em;
  color: var(--amber);
  text-shadow: 0 0 5px rgba(var(--amber-rgb),0.45);
  white-space: nowrap;
}
.lost-copy {
  max-width: 480px;
  margin: 0 auto 24px;
  font-size: var(--t-prose);
  line-height: 1.78;
  color: var(--bone);
}
.lost-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  color: var(--label);
  text-transform: uppercase;
  padding: 10px 0;
  border-top: 1px dashed rgba(var(--amber-rgb),0.3);
  border-bottom: 1px dashed rgba(var(--amber-rgb),0.3);
}
.lost-meta b {
  color: var(--amber);
  font-weight: 500;
  margin-left: 6px;
  text-shadow: 0 0 4px rgba(var(--amber-rgb),0.35);
}
.lost-actions {
  margin-top: 34px;
}
.lost-actions .legal-back {
  display: inline-block;
  font-size: var(--t-subhead);
  padding: 10px 26px;
  border-color: rgba(var(--phosphor-rgb),0.45);
}

/* ------------------------------------------------------------------
   MOBILE
------------------------------------------------------------------ */
@media (max-width: 600px) {
  .page { padding: 24px 16px 48px; }
  .legal-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .legal-back { font-size: var(--t-prose); padding: 5px 12px; }
  .legal-title { font-size: var(--t-title-lg); }
  .legal-eyebrow { font-size: var(--t-data); letter-spacing: 0.26em; }
  .legal-meta { gap: 10px; font-size: var(--t-micro); }
  .legal-header { margin-bottom: 28px; }
  .legal-body section { margin-bottom: 26px; }
  .legal-body p, .legal-body li { font-size: var(--t-body); line-height: 1.7; }
  .legal-body h2 { font-size: var(--t-data); gap: 10px; }
  .legal-body h2::before { font-size: var(--t-subhead); }
  .legal-history { padding: 12px 14px 8px; }
  .legal-history li { grid-template-columns: 40px 1fr; font-size: var(--t-label); }
  .legal-history li span { grid-column: 1 / -1; }
  .legal-foot { grid-template-columns: 1fr; font-size: var(--t-micro); gap: 12px; }
  .legal-foot .seal, .legal-foot-hail, .legal-foot-nav { grid-row: auto; grid-column: 1; }
  .legal-foot-hail { justify-self: start; justify-content: flex-start; }
  .lost { padding-top: 24px; }
  .lost-title { font-size: var(--t-display); }
  .lost-meta { gap: 10px; font-size: var(--t-micro); }
  .lost-actions .legal-back { font-size: var(--t-lede); padding: 8px 18px; }
}