/* VesTRA z0.1 design tokens and shared chrome (top bar, footer, buttons, pills).
   One system for every page: dark for the homepage map, light for reading pages.
   Geist and Geist Mono are served from this site (fonts/, SIL Open Font
   License), so no page waits on a third-party font server before drawing. */

@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --vx-font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vx-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* dark (homepage map) */
  --vx-bg-dark: #000000;
  --vx-text-dark: #ececf2;
  --vx-muted-dark: #8f8f9a;
  --vx-faint-dark: #5a5a66;
  --vx-line-dark: #1f1f27;
  --vx-card-dark: #08080b;

  /* light (reading pages) */
  --vx-paper: #f5f3ee;
  --vx-surface: #ffffff;
  --vx-ink: #17161a;
  --vx-muted: #5d5b64;
  --vx-faint: #8a8791;
  --vx-line: #e2dfd6;
  --vx-line-soft: #ece9e1;

  /* data colours: the same meaning everywhere */
  --vx-tissue: #ffaa5a;        --vx-tissue-ink: #a24f0e;  --vx-tissue-tint: #fdf0e3;  --vx-tissue-accent: #ef8f3c;
  --vx-blood: #4cc9ff;         --vx-blood-ink: #136c96;   --vx-blood-tint: #e3f3fb;   --vx-blood-accent: #2a9fd6;
  --vx-both: #fff1cf;
  --vx-other: #9b8cff;         --vx-other-ink: #5b4bd6;   --vx-other-tint: #eeebff;
  --vx-stage-on: linear-gradient(90deg, var(--vx-tissue-accent), var(--vx-blood-accent));
  --vx-stage-off: #ece9e1;
  --vx-concordant-bg: #0f2a1f; --vx-concordant-label: #8fe3b6; --vx-concordant-text: #c4ecd6;
  --vx-live: #5dffa8;

  --vx-radius: 16px;
  --vx-max: 1280px;
  --vx-gutter: 32px;
}
@media (max-width: 640px) { :root { --vx-gutter: 16px; } }

/* ---------------------------------------------------------------- top bar */
.vx-top { background: #000; color: #c6c6d0; font-family: var(--vx-font); position: relative; z-index: 20; }
.vx-top.is-overlay { background: transparent; }
.vx-top-in { max-width: var(--vx-max); margin: 0 auto; padding: 12px var(--vx-gutter); box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.vx-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: #fff; }
.vx-brand b { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.vx-badge { font-family: var(--vx-mono); font-size: 11px; color: #a4a4b0; border: 1px solid #2f2f3a; border-radius: 4px; padding: 3px 6px; }
.vx-top-search { flex: 1 1 320px; max-width: 520px; position: relative; }
.vx-top-search .vx-field { display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 999px; background: #17171d; border: 1px solid #2f2f3a; }
.vx-top-search .vx-field:focus-within { border-color: #5a5a66; }
.vx-top-search input { flex: 1; min-width: 0; padding: 11px 0; background: transparent; border: 0; outline: none; color: #fff; font: inherit; font-size: 14px; }
.vx-top-search input::placeholder { color: #8f8f9a; }
.vx-kbd { font-family: var(--vx-mono); font-size: 10px; color: #8f8f9a; border: 1px solid #3a3a46; border-radius: 4px; padding: 2px 5px; }
.vx-nav { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; font-size: 14px; }
.vx-nav a { color: #c6c6d0; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.vx-nav a:hover, .vx-nav a[aria-current="page"] { color: #fff; }
.vx-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--vx-mono); font-size: 11px; color: #a4a4b0;
  padding: 6px 10px; border: 1px solid #2f2f3a; border-radius: 999px; }
.vx-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vx-live); box-shadow: 0 0 8px var(--vx-live); }

/* ---------------------------------------------------------------- footer */
.vx-foot { background: #000; color: #8f8f9a; font-family: var(--vx-font); font-size: 13px; }
.vx-foot-in { max-width: var(--vx-max); margin: 0 auto; padding: 22px var(--vx-gutter) 28px; box-sizing: border-box;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.vx-foot a { color: #a4a4b0; text-decoration: none; margin-right: 20px; white-space: nowrap; }
.vx-foot a:hover { color: #fff; }

/* ---------------------------------------------------------------- shared bits */
.vx-label { font-family: var(--vx-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vx-muted); }
.vx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: 999px; border: 0; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.vx-btn-ink { background: var(--vx-ink); color: #fff; }
.vx-btn-ink:hover { background: #000; color: #fff; }
.vx-btn-white { background: #fff; color: #000; }
.vx-btn-outline { background: var(--vx-surface); color: var(--vx-ink); border: 1px solid #cfcbc0; }
.vx-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.vx-pill-both { background: var(--vx-ink); color: var(--vx-both); }
.vx-pill-both::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vx-both); }
.vx-pill-green { background: var(--vx-concordant-bg); color: var(--vx-concordant-label); }
.vx-pill-amber { background: var(--vx-tissue-tint); color: var(--vx-tissue-ink); }
.vx-pill-red { background: #fbe7e4; color: #a12b1c; }
.vx-pill-blue { background: var(--vx-blood-tint); color: var(--vx-blood-ink); }
.vx-pill-grey { background: #f0eee8; color: var(--vx-muted); }
.vx-card { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }