/* VETTORIX shared chrome — "Evaluation Console" (v2).
   Graphite instrument panels, one cold signal colour (ice) for pass / up / action, one warm colour (amber) for fail / down / caution.
   No red/green pair, no paper. Single deliberate dark scheme (a risk console is read like an instrument panel; every text colour
   below is AA on every surface it sits on). Owned by LANDING. Linked by every page (/, /exam, /board, /docs, /proof, /404).
   Pages put <header data-site-bar></header> and <footer data-site-foot></footer> in the body and load /shared/site.js;
   site.js fills them from /token.json. Colour and type tokens live here only — change the palette here. */

@font-face {
  font-family: 'Mona Sans';
  src: url('/shared/fonts/mona-sans.woff2') format('woff2');
  font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap;
  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: 'Azeret Mono';
  src: url('/shared/fonts/azeret-mono.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  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;
}
/* metric-adjusted fallbacks so the font swap barely moves the first screen */
@font-face { font-family: 'Mona Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 103%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: 'Azeret Fallback'; src: local('Menlo'), local('Consolas'), local('Courier New'); size-adjust: 99%; }

:root {
  /* surfaces: graphite, cool */
  --bg: #090B0E;
  --bg-2: #0E1116;            /* panel */
  --bg-3: #131820;            /* raised: inputs, header strips */
  --bg-4: #19202A;            /* hover */
  --line: #1D242D;
  --line-2: #2A333E;
  --line-3: #3A4552;
  /* text */
  --ink: #E8EDF2;
  --ink-2: #B4BEC9;
  --muted: #808C99;           /* ≥ 5:1 on --bg-2 and --bg-3 */
  /* signal */
  --ice: #6CD5FF;             /* pass, up, primary action, equity line */
  --ice-2: #B3E9FF;
  --ice-ink: #03111A;         /* text on --ice */
  --ice-soft: rgba(108, 213, 255, .10);
  --ice-line: rgba(108, 213, 255, .32);
  --amber: #FFAE3D;           /* fail, down, caution */
  --amber-ink: #FFC46E;       /* small amber text */
  --amber-soft: rgba(255, 174, 61, .11);
  --amber-line: rgba(255, 174, 61, .38);
  --focus: #6CD5FF;

  /* aliases kept for the app pages (pages.css, exam/board/proof JS read these names) */
  --paper: var(--bg); --paper-2: var(--bg-2); --grid: var(--line); --grid-strong: var(--line-2);
  --pass: var(--ice); --pass-ink: var(--ice-ink); --pass-soft: var(--ice-soft);
  --warn: var(--amber); --warn-ink: var(--amber-ink); --warn-soft: var(--amber-soft);
  --pencil: var(--ink-2);

  --sans: 'Mona Sans', 'Mona Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Azeret Mono', 'Azeret Fallback', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: var(--sans);
  --serif: var(--sans);       /* v1 name: display text is the expanded sans now */

  --bar-h: 56px;
  --gutter: 40px;
  --max: 1360px;
  --radius: 2px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background-color: var(--bg);
  /* registration dots every 24 px + a faint cold wash at the top; no ruled lines */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(170, 195, 220, .075) 0 .8px, transparent 1.4px),
    radial-gradient(120% 60% at 70% -10%, rgba(108, 213, 255, .07), transparent 60%);
  background-size: 24px 24px, 100% 900px;
  background-repeat: repeat, no-repeat;
  font: 400 15px/1.55 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--ice); color: var(--ice-ink); }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-3); }
a:hover { color: var(--ice); text-decoration-color: var(--ice); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mono, code, kbd, samp { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num, .tab { font-variant-numeric: tabular-nums; }
.serif, .display { font-family: var(--display); font-stretch: 118%; font-weight: 600; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.up { color: var(--ice); } .down { color: var(--amber-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* label: mono caps, the console's labelling voice */
.label, .eyebrow { font: 500 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- module: an instrument panel with corner registration ticks ---------- */
.sheet, .module {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sheet::before, .module::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 1;
  --t: var(--line-3);
  background:
    linear-gradient(var(--t), var(--t)) 0 0 / 9px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) 0 0 / 1px 9px no-repeat,
    linear-gradient(var(--t), var(--t)) 100% 0 / 9px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) 100% 0 / 1px 9px no-repeat,
    linear-gradient(var(--t), var(--t)) 0 100% / 9px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) 0 100% / 1px 9px no-repeat,
    linear-gradient(var(--t), var(--t)) 100% 100% / 9px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) 100% 100% / 1px 9px no-repeat;
}
.mod-h {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px;
  border-bottom: 1px solid var(--line); background: var(--bg-3);
  font: 500 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.mod-h .sp { flex: 1; }
.led { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--line-3); flex: none; }
.led.on { background: var(--ice); box-shadow: 0 0 0 3px var(--ice-soft), 0 0 10px var(--ice); }
.led.warn { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line-3); border-radius: var(--radius);
  background: var(--bg-3); color: var(--ink);
  font: 600 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { border-color: var(--ice); color: var(--ice); background: var(--bg-4); }
.btn-primary { background: var(--ice); border-color: var(--ice); color: var(--ice-ink); }
.btn-primary:hover { background: var(--ice-2); border-color: var(--ice-2); color: var(--ice-ink); box-shadow: 0 0 0 4px var(--ice-soft), 0 10px 30px -10px rgba(108, 213, 255, .6); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .65; cursor: not-allowed; background: transparent; color: var(--muted); border-color: var(--line-2); box-shadow: none; }
.btn-sm { min-height: 30px; padding: 0 11px; font-size: 10.5px; }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 12px; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font: 500 11px/1 var(--mono); color: var(--ink-2); background: var(--bg-2); white-space: nowrap;
}

/* ---------- shared top bar ---------- */
.site-bar {
  position: sticky; top: 0; z-index: 40;
  height: var(--bar-h);
  background: rgba(9, 11, 14, .84);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.site-bar .wrap { height: 100%; display: flex; align-items: center; gap: 12px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 10px; margin-right: 4px;
  font: 700 14px/1 var(--sans); font-stretch: 125%; letter-spacing: .18em; text-decoration: none; color: var(--ink);
}
.wordmark svg { width: 22px; height: 22px; flex: none; }
.wordmark:hover { color: var(--ink); }
.ca-pill { gap: 8px; padding-right: 3px; }
.ca-pill code { font: 500 11px/1 var(--mono); color: var(--ink); }
.ca-pill .ca-note { color: var(--muted); }
.ca-copy {
  height: 22px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--bg-3); font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: var(--ink);
}
.ca-copy:hover:not([disabled]) { background: var(--ice); border-color: var(--ice); color: var(--ice-ink); }
.ca-copy[disabled] { color: var(--muted); cursor: not-allowed; }
.buy-btn { min-height: 28px; padding: 0 12px; font-size: 10.5px; }
.launch-pill { color: var(--ice); border-color: var(--ice-line); background: var(--ice-soft); }
.utc-clock { font: 500 11px/1 var(--mono); color: var(--muted); letter-spacing: .06em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.utc-clock b { color: var(--ink-2); font-weight: 500; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.site-nav a {
  position: relative; padding: 8px 10px;
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ink-2);
}
.site-nav a:hover { color: var(--ice); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: calc((var(--bar-h) - 27px) / -2); height: 2px; background: var(--ice); box-shadow: 0 0 10px var(--ice); }
.site-nav .sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 8px; }
.site-nav .soc { display: inline-flex; align-items: center; padding: 7px; }
.site-nav .soc svg { width: 15px; height: 15px; }
.menu-btn { display: none; margin-left: auto; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg-3); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg { width: 16px; height: 16px; }

@media (max-width: 1279px) { .site-bar .utc-clock { display: none; } }
@media (max-width: 1099px) { .site-bar .launch-pill { display: none; } }
@media (max-width: 900px) {
  :root { --bar-h: 48px; --gutter: 16px; }
  .site-bar .wrap { gap: 8px; }
  .wordmark { font-size: 12.5px; gap: 8px; letter-spacing: .14em; margin-right: 0; }
  .wordmark svg { width: 20px; height: 20px; }
  .ca-pill { padding-left: 8px; gap: 6px; }
  .ca-pill code { font-size: 10.5px; }
  .ca-copy { padding: 0 7px; }
  .menu-btn { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; top: var(--bar-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 14px;
    box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .8);
  }
  .site-bar.open .site-nav { display: flex; }
  .site-nav a { padding: 15px 2px; font-size: 12px; border-bottom: 1px solid var(--line); }
  .site-nav a[aria-current="page"] { padding-left: 14px; }
  .site-nav a[aria-current="page"]::after { left: 0; right: auto; width: 3px; top: 13px; bottom: 13px; height: auto; }
  .site-nav .sep { display: none; }
  .site-nav .soc { padding: 15px 2px; gap: 10px; }
  .site-nav .soc::after { content: attr(aria-label); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
  .site-nav .m-launch { display: inline-flex; align-self: flex-start; margin: 6px 0 8px; }
  .ca-pill { height: 30px; }
  .ca-pill .ca-note { display: none; }
  .site-bar .buy-btn { padding: 0 8px; }
}
@media (min-width: 901px) { .site-nav .m-launch { display: none; } }
@media (max-width: 430px) {
  /* after launch the bar also carries Buy on Pons: keep the mark, drop the word */
  [data-ca="live"] .wordmark span { display: none; }
}

/* ---------- shared footer ---------- */
.site-foot { margin-top: 96px; border-top: 1px solid var(--line); background: var(--bg); }
.site-foot .wrap { padding-top: 32px; padding-bottom: 44px; display: grid; gap: 18px; }
.site-foot .foot-mark { font: 700 12.5px/1 var(--sans); font-stretch: 125%; letter-spacing: .2em; display: flex; align-items: center; gap: 10px; }
.site-foot .foot-mark svg { width: 18px; height: 18px; }
.site-foot .foot-links { display: flex; flex-wrap: wrap; gap: 10px 24px; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.site-foot .foot-links a { color: var(--ink-2); text-decoration: none; }
.site-foot .foot-links a:hover { color: var(--ice); }
.site-foot .foot-note { font-size: 12.5px; color: var(--muted); max-width: 80ch; margin: 0; }
.site-foot .foot-note a { color: var(--ink-2); }
@media (max-width: 600px) { .site-foot { margin-top: 64px; } }

/* toast (shared) */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  padding: 11px 16px; border-radius: var(--radius); background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--line-3); border-left: 3px solid var(--amber); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .7);
  font: 500 12px/1.35 var(--mono); z-index: 60; max-width: calc(100vw - 32px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}