/* ==========================================================================
   site.css — shared across every page.
   Design tokens, reset, the ticker tape, and the nav.
   Page-specific styling lives in deck.css / relic.css / spec.css.
   ========================================================================== */

:root{
  /* grounds */
  --ink:#0B0F0D;          /* page background */
  --ink2:#101715;         /* raised panel (spec.css overrides to #121A17) */
  --line:#24312C;         /* hairline borders */

  /* paper — used by order tickets and the relic card */
  --paper:#EDE6D6;
  --paper2:#E3D9C2;
  --iop:#171B18;          /* ink on paper */
  --inkonpaper:#171B18;   /* alias, used by spec.css */
  --faded:#6d6753;

  /* signal colours */
  --tape:#2CE690;         /* up / green */
  --loss:#FF4B4B;         /* down / red */
  --amber:#FFB020;        /* warning / countdown */

  /* class colours — must match the class table in spec.html */
  --ph:#9AA3A7;  --dh:#57C7FF;  --wh:#8A5CFF;
  --c-ph:#9AA3A7; --c-dh:#57C7FF; --c-wh:#8A5CFF; --c-mm:#FFB020; --c-in:#FF4B4B;

  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--ink);color:#D8DED9;font-family:var(--mono);-webkit-font-smoothing:antialiased}

/* CRT scanlines over everything */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}

::selection{background:var(--tape);color:var(--ink)}

/* ---- ticker tape (fixed, top of every page) ---- */
/* Markup is injected by js/site.js from the TICKER array — edit it there. */
.tape{position:fixed;top:0;left:0;right:0;z-index:60;overflow:hidden;white-space:nowrap;
  background:#0D1311;border-bottom:1px solid var(--line);user-select:none}
.tape-in{display:inline-block;padding:6px 0;animation:tk 48s linear infinite;font-size:10.5px;color:#7d8a83}
.tape-in span{margin:0 15px}
.tape-in b{font-weight:600}
.up{color:var(--tape)}.dn{color:var(--loss)}.am{color:var(--amber)}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- nav (fixed, top right of every page) ---- */
nav{position:fixed;top:33px;right:10px;z-index:60;display:flex;gap:6px}
nav a{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;background:#0D1311;
  color:#7d8a83;border:1px solid var(--line);padding:5px 9px;border-radius:2px;text-decoration:none}
nav a[aria-current="page"]{color:var(--ink);background:var(--tape);border-color:var(--tape);font-weight:700}
nav a:focus-visible{outline:2px solid var(--tape);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .tape-in{animation:none}
}