/* BLACKTIDE UI tokens — the ONE voice, written down (docs/12).
   Three layers: :root tokens -> component classes -> keyframes.
   Plain CSS, no build step. Pages adopt it page-by-page (12 §9);
   until a page links this sheet, its local styles remain canonical-in-place.
   Where the fleet drifted, the canonical picks live here (12 §4). */

:root {
  /* --- channel triplets: compose any alpha with rgba(var(--x-rgb), a) */
  --ink-rgb: 235, 240, 245;      /* base text ink */
  --cyan-rgb: 159, 212, 232;     /* command / data */
  --amber-rgb: 232, 185, 90;     /* action / heat */
  --surface-rgb: 12, 16, 22;     /* the dark plate */
  --line-rgb: 140, 160, 175;     /* structural gray */
  --warm-banner-rgb: 255, 220, 190;
  --warm-hi-rgb: 255, 235, 210;

  /* --- ink ladder: alpha IS hierarchy */
  --ink-hi: rgba(var(--ink-rgb), 0.92);
  --ink-1: rgba(var(--ink-rgb), 0.85);
  --ink-2: rgba(var(--ink-rgb), 0.7);
  --ink-3: rgba(var(--ink-rgb), 0.55);
  --ink-4: rgba(var(--ink-rgb), 0.45);
  --ink-5: rgba(var(--ink-rgb), 0.3);
  --ink-6: rgba(var(--ink-rgb), 0.18);
  --gray2: rgba(200, 210, 220, 0.7);

  /* --- role sets */
  --cyan: rgba(var(--cyan-rgb), 0.95);
  --cyan-border: rgba(var(--cyan-rgb), 0.5);
  --cyan-border-soft: rgba(var(--cyan-rgb), 0.35);
  --cyan-hairline: rgba(var(--cyan-rgb), 0.25);
  --amber: rgba(var(--amber-rgb), 0.95);
  --amber-full: rgba(var(--amber-rgb), 1);
  --amber-border: rgba(var(--amber-rgb), 0.55);
  --warm-banner: rgba(var(--warm-banner-rgb), 0.95);
  --warm-hi: rgba(var(--warm-hi-rgb), 0.85);
  --warm-dim: rgba(var(--warm-hi-rgb), 0.55);

  /* --- semantic: factions, card kinds, biomes */
  --tcn: #79b8d4;
  --plc: #e0564a;
  --ese: #c58ae0;                /* the Envoy's purple, reserved */
  --hostile: rgba(224, 122, 106, 0.8);
  --kind-strike: #e07a6a;
  --kind-maneuver: #79c8d4;
  --kind-support: #8fd4a0;
  --kind-event: #d4c47a;
  --kind-gambit: #e8b95a;
  --biome-ember: #e8955a;
  --biome-glacier: #79b8d4;
  --biome-verdant: #8fd4a0;
  --biome-amethyst: #c58ae0;

  /* --- surfaces (canonical gray: 12,16,22 — the EXECUTE family) */
  --bg: #000;
  --surface-veil: rgba(var(--surface-rgb), 0.6);
  --surface: rgba(var(--surface-rgb), 0.75);
  --surface-firm: rgba(var(--surface-rgb), 0.85);
  --surface-hover: rgba(30, 42, 54, 0.85);
  --card-face: #0d1118;          /* OPAQUE: text must survive a bright nebula */
  --card-ink: #0c1016;           /* dark ink on colored discs */
  --card-border: rgba(var(--line-rgb), 0.4);
  --track: rgba(var(--line-rgb), 0.18);

  /* --- type: one family, all-caps chrome, tracking = importance */
  --font: "Helvetica Neue", Arial, sans-serif;
  --fs-nano: 9px;
  --fs-small: 10px;
  --fs-body: 10.5px;             /* card body — the deliberate half-step */
  --fs-ui: 11px;
  --fs-caption: 12px;
  --fs-chrome: 13px;
  --fs-banner: 15px;
  --fs-display: 64px;
  --ls-12: 0.12em;
  --ls-14: 0.14em;
  --ls-18: 0.18em;
  --ls-22: 0.22em;
  --ls-24: 0.24em;
  --ls-28: 0.28em;
  --ls-34: 0.34em;
  --ls-42: 0.42em;

  /* --- motion & depth */
  --t-fast: 0.18s;
  --t-mid: 0.3s;
  --t-slow: 0.45s;
  --ease-cine: cubic-bezier(0.4, 0, 0.2, 1);
  --text-outline: -1px 0 0 rgba(0, 0, 0, 0.85), 1px 0 0 rgba(0, 0, 0, 0.85),
    0 -1px 0 rgba(0, 0, 0, 0.85), 0 1px 0 rgba(0, 0, 0, 0.85);
  --z-lb: 1;
  --z-chrome: 2;
  --z-fan: 3;
  --z-overlay: 5;
  --z-card-hover: 30;
  --z-boot: 40;
  --z-ghost: 60;
}

/* ============================== components ============================== */

/* buttons: primary commits (fill darkens), secondary advertises (turns amber) */
.btn {
  background: var(--surface);
  color: var(--cyan);
  border: 1px solid var(--cyan-border);
  font: var(--fs-ui) var(--font);
  letter-spacing: var(--ls-24);
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease,
    background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary {
  font-size: var(--fs-chrome);
  letter-spacing: var(--ls-28);
  padding: 10px 28px;
}
.btn-primary:is(:hover, .sg-hover):not(:disabled) { background: var(--surface-hover); }
.btn-secondary:is(:hover, .sg-hover):not(:disabled) {
  border-color: rgba(var(--amber-rgb), 0.8);
  color: var(--amber);
}
.btn-alert {
  background: rgba(26, 12, 10, 0.85);
  color: rgba(255, 200, 160, 0.95);
  border-color: rgba(224, 86, 74, 0.55);
  letter-spacing: 0.26em;
}
.btn-alert:is(:hover, .sg-hover) { border-color: rgba(255, 200, 160, 0.9); }

/* chips: small bordered states */
.chip {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid currentColor;
  font: var(--fs-small) var(--font);
  letter-spacing: var(--ls-22);
}
.chip-amber { color: rgba(var(--amber-rgb), 0.9); border-color: var(--amber-border); }

/* plates: the dark translucent panel every HUD element sits on */
.plate {
  background: var(--surface-firm);
  border: 1px solid var(--cyan-border-soft);
  padding: 12px 22px;
  font: var(--fs-ui) var(--font);
  color: var(--ink-2);
}

/* captions (warm narration, top-center) vs chrome readouts (cool corners) */
.caption {
  font: var(--fs-caption)/1.5 var(--font);
  letter-spacing: var(--ls-18);
  color: var(--warm-dim);
}
.caption b { color: var(--warm-hi); font-weight: 600; }
.chrome-readout {
  font: var(--fs-chrome) var(--font);
  letter-spacing: var(--ls-14);
  color: rgba(var(--amber-rgb), 0.9);
}

/* the banner: warm, tracked wide, pulses when a window calls */
.banner {
  font: var(--fs-banner) var(--font);
  font-weight: 600;
  letter-spacing: var(--ls-34);
  color: var(--warm-banner);
  text-shadow: 0 0 18px rgba(255, 150, 60, 0.6);
}
.banner.pulse {
  font-size: 17px;
  color: var(--amber-full);
  animation: sg-bannerpulse 0.9s ease-in-out infinite;
}
.callout {
  font: var(--fs-caption) var(--font);
  letter-spacing: var(--ls-28);
  color: rgba(var(--amber-rgb), 0.9);
  transition: opacity var(--t-mid) ease;
}

/* the card: one component, three pages — these ARE the canonical numbers */
.fan { display: flex; }
.fan .card {
  position: relative;
  width: 118px;
  height: 162px;
  margin: 0 -11px;
  box-sizing: border-box;
  padding: 26px 10px 8px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--card-face);
  font-family: var(--font);
  cursor: pointer;
  user-select: none;
  transform: rotate(var(--rot, 0deg)) translateY(var(--ty, 0px));
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease,
    border-color var(--t-fast) ease, opacity 0.3s ease;
}
.fan .card:is(:hover, .sg-hover) {
  transform: translateY(-46px) scale(1.09);
  z-index: var(--z-card-hover);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.65), 0 0 18px var(--kc);
  border-color: var(--kc);
}
.fan .card .stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 6px 6px 0 0;
  background: var(--kc);
}
.fan .card .cost {
  position: absolute; top: -9px; left: -6px;
  min-width: 26px; height: 26px; border-radius: 13px; padding: 0 4px;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: var(--kc);
  font-size: var(--fs-chrome); font-weight: 700; color: var(--card-ink);
}
.fan .card .cname {
  font-size: var(--fs-ui); font-weight: 700;
  letter-spacing: var(--ls-12);
  color: var(--ink-hi);
  margin-bottom: 8px; line-height: 1.25;
}
.fan .card .ctext { font-size: var(--fs-body); line-height: 1.45; color: var(--gray2); }
.fan .card.dim { opacity: 0.55; }                    /* the codified exception */
.fan .card.spent { transform: translateY(-140px) scale(0.9); opacity: 0; pointer-events: none; }
.fan .card.hot { animation: sg-cardcall 1.1s ease-in-out infinite; }
.fan.docked { filter: grayscale(0.6) brightness(0.55); } /* container dim = FILTER */

/* scene labels: ALWAYS outlined — bright suns eat unstroked text */
.objlabel, .syslabel, .provlabel {
  font-family: var(--font);
  letter-spacing: var(--ls-22);
  color: var(--ink-3);
  text-shadow: var(--text-outline);
  pointer-events: none;
}
.objlabel { font-size: var(--fs-small); }
.syslabel { font-size: var(--fs-small); letter-spacing: var(--ls-24); }
.provlabel { font-size: var(--fs-nano); letter-spacing: 0.3em; color: var(--ink-6); }
.objlabel.hostile, .syslabel.hostile { color: var(--hostile); }
.objlabel.body { color: rgba(var(--ink-rgb), 0.5); }
.syslabel.burning { color: rgba(255, 200, 160, 0.85); }
.syslabel.pl { color: rgba(121, 184, 212, 0.95); }

/* the slider: bootbar grammar — a quiet rail, an amber bar for a thumb */
input[type="range"].slider {
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: var(--track);
  outline: none;
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 4px; height: 16px;
  background: var(--amber-full);
  cursor: pointer;
}
input[type="range"].slider::-moz-range-thumb {
  width: 4px; height: 16px; border: 0; border-radius: 0;
  background: var(--amber-full);
  cursor: pointer;
}

/* the letterbox: cinema bars the SCENE, never the chrome — transform slide */
.lb {
  position: absolute; left: 0; right: 0;
  height: var(--lb-size, 54px);
  background: var(--bg);
  z-index: var(--z-lb);
  transition: transform var(--lb-dur, 0.45s) var(--ease-cine);
  pointer-events: none;
}
.lb.top { top: 0; transform: translateY(-101%); }
.lb.bot { bottom: 0; transform: translateY(101%); }
.lb.on { transform: translateY(0); }

/* ============================== keyframes ============================== */
@keyframes sg-bannerpulse {
  0%, 100% { text-shadow: 0 0 14px rgba(var(--amber-rgb), 0.5); opacity: 0.85; }
  50% { text-shadow: 0 0 30px rgba(var(--amber-rgb), 0.9); opacity: 1; }
}
@keyframes sg-cardcall {
  0%, 100% { box-shadow: 0 0 12px rgba(var(--amber-rgb), 0.35); }
  50% { box-shadow: 0 0 26px rgba(var(--amber-rgb), 0.7); border-color: rgba(var(--amber-rgb), 0.9); }
}
@keyframes sg-cardpull {
  0% { transform: translateY(-115px) scale(1.14); opacity: 1; }
  55% { transform: translateY(-128px) scale(1.14); opacity: 1; }
  100% { transform: translateY(-165px) scale(1.1); opacity: 0; }
}
@keyframes sg-bootsweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}