/* VaulterX brand tokens — pulled from vault-x-vision/src/styles.css.
   Hex values are fallbacks for browsers without oklch() support; the
   oklch() line after each is the source of truth and wins where supported. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --background: #15171c;
  --background: oklch(0.16 0.01 260);
  --background-deep: #121318;
  --background-deep: oklch(0.14 0.01 260);
  --foreground: #f5f6f8;
  --foreground: oklch(0.97 0.01 250);

  --surface: #1b1e24;
  --surface: oklch(0.20 0.012 260);
  --surface-elevated: #21252c;
  --surface-elevated: oklch(0.235 0.014 260);

  --muted-foreground: #9ca1ac;
  --muted-foreground: oklch(0.68 0.02 260);

  --border: rgba(46, 50, 58, 0.6);
  --border: oklch(0.30 0.02 260 / 60%);
  --border-strong: rgba(46, 50, 58, 0.9);

  --neon: #c7cad1;
  --neon: oklch(0.82 0.02 260);
  --electric: #5fa8f0;
  --electric: oklch(0.75 0.18 235);
  --royal: #9b5cf2;
  --royal: oklch(0.68 0.22 295);
  /* Single interactive accent — electric blue. Violet/neon stay decorative-only,
     confined to .bg-vault-radial; nothing clickable or informational uses them. */
  --accent: #5fa8f0;
  --accent: oklch(0.75 0.18 235);
  --destructive: #e5483f;
  --destructive: oklch(0.62 0.22 25);

  /* Semantic status — separate from the decorative brand accent above.
     Used only for state (shipped/in-progress/blocked/planned), never decoration. */
  --status-shipped: #34d399;
  --status-progress: #e8b84b;
  --status-blocked: var(--destructive);
  --status-planned: var(--muted-foreground);

  /* 4px base spacing scale, used via gap/padding — not ad hoc margins. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

a { color: inherit; }
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); }

/* Light theme — the DEFAULT on report pages since 2026-08-31: the CEO reads
   reports as documents, so they open on white. The Dark/Light toggle in the
   report masthead applies .vx-light live on screen (assets/pdf-export.js) and
   .pdf-light at print time; both read this one variable-level override, which
   is why it stays ~15 lines — every card/border/chip/table already draws its
   color from these tokens. The hub pages (Overview/Roadmap/Reports) keep the
   dark console look; only pages that load pdf-export.js ever get .vx-light. */
html.vx-light,
html.pdf-light {
  --background: #ffffff;
  --background-deep: #f4f5f7;
  --foreground: #14161b;
  --surface: #f4f5f7;
  --surface-elevated: #e8eaef;
  --muted-foreground: #5b6270;
  --border: rgba(20, 22, 28, 0.12);
  --border-strong: rgba(20, 22, 28, 0.22);
  /* On-white forms of every ink that was tuned for the dark ground: electric
     blue, mint and amber all wash out on paper-white, so each darkens just
     enough to read. Status hues stay recognizably themselves. */
  --accent: #1d6fd1;
  --destructive: #c93c33;
  --status-shipped: #0f9d6b;
  --status-progress: #a06e00;
}
html.vx-light .masthead .logo,
html.pdf-light .masthead .logo { filter: invert(1); }
/* The violet/neon radial is a dark-room effect; on the light page it would
   read as a stain. Plain ground instead. */
html.vx-light .bg-vault-radial { background-image: none; }

.bg-vault-radial {
  background-image:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--neon) 10%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, color-mix(in oklab, var(--royal) 12%, transparent), transparent 55%),
    linear-gradient(180deg, var(--background-deep), var(--background));
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px clamp(20px, 5vw, 56px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.masthead .logo { height: 26px; width: auto; display: block; }

.masthead nav {
  display: flex;
  gap: 24px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted-foreground);
}
.masthead nav a { text-decoration: none; }
.masthead nav a:hover { color: var(--foreground); }

.masthead .tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  padding: 4px 10px;
}

.pdf-export-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.pdf-theme-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
}
.pdf-theme-opt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted-foreground);
  background: transparent;
  border: none;
  border-radius: 100px;
  padding: 4px 11px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pdf-theme-opt:hover { color: var(--foreground); }
.pdf-theme-opt.is-active { color: var(--background); background: var(--accent); }

.pdf-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--background);
  background: var(--accent);
  border: none;
  border-radius: 100px;
  padding: 7px 14px 7px 12px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.pdf-export-btn:hover { opacity: 0.85; }
.pdf-export-btn svg { display: block; }

.pdf-export-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted-foreground);
  text-align: right;
  max-width: 190px;
  line-height: 1.4;
}

/* ---- primary nav, shared across Overview / Roadmap / Updates ---- */
.masthead .left { display: flex; align-items: center; gap: var(--space-7); }
.primary-nav { display: flex; gap: var(--space-6); }
.primary-nav a {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--muted-foreground);
  padding: 2px 0;
  border-bottom: 1.5px solid transparent;
}
.primary-nav a:hover { color: var(--foreground); }
.primary-nav a.active { color: var(--foreground); border-bottom-color: var(--accent); }
@media (max-width: 640px) { .primary-nav { display: none; } }

/* ---- status pill: semantic only, never decorative ---- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 11px;
  border-radius: 100px;
  white-space: nowrap;
}
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status-pill.shipped { color: var(--status-shipped); background: color-mix(in oklab, var(--status-shipped) 15%, transparent); }
.status-pill.progress { color: var(--status-progress); background: color-mix(in oklab, var(--status-progress) 15%, transparent); }
.status-pill.blocked { color: var(--status-blocked); background: color-mix(in oklab, var(--status-blocked) 15%, transparent); }
.status-pill.planned { color: var(--status-planned); background: color-mix(in oklab, var(--status-planned) 12%, transparent); }

/* ---- progress bar: workstream completion, not decoration ---- */
.progress-track {
  height: 5px;
  border-radius: 100px;
  background: var(--surface-elevated);
  overflow: hidden;
}
.progress-fill { height: 100%; border-radius: 100px; }
.progress-fill.shipped { background: var(--status-shipped); }
.progress-fill.progress { background: var(--status-progress); }
.progress-fill.blocked { background: var(--status-blocked); }
.progress-fill.planned { background: var(--border-strong); }

/* ---- metric tile: command-center summary numbers ---- */
.metric-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-5);
}
.metric-tile .label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: var(--space-3);
}
.metric-tile .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.metric-tile .value small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--muted-foreground);
  margin-left: 4px;
}
.metric-tile .sub {
  margin-top: var(--space-2);
  font-size: 12.5px;
  color: var(--muted-foreground);
}

.page-footer {
  margin-top: 64px;
  padding: 24px clamp(20px, 5vw, 56px) 40px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-foreground);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- launch band: countdown + readiness, shared by Overview and Roadmap ---- */
.launch-band {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  flex-wrap: wrap;
  padding: var(--space-6) var(--space-6);
  margin: var(--space-6) 0 var(--space-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.launch-band .countdown { display: flex; align-items: baseline; gap: var(--space-2); flex: none; }
.launch-band .countdown .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.launch-band .countdown .unit {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-foreground);
  letter-spacing: 0.04em;
}
.launch-band .divider { width: 1px; align-self: stretch; background: var(--border); flex: none; }
.launch-band .readiness { display: flex; align-items: center; gap: var(--space-4); flex: none; }
.launch-band .readiness-text .label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 4px;
}
.launch-band .readiness-text .value { font-family: var(--font-display); font-weight: 700; font-size: 26px; }
.launch-band .readiness-text .sub { font-size: 12.5px; color: var(--muted-foreground); margin-top: 3px; }
.launch-band .target { flex: 1; min-width: 180px; }
.launch-band .target .label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 6px;
}
.launch-band .target .date { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
@media (max-width: 760px) {
  .launch-band { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .launch-band .divider { display: none; }
}

.readiness-ring { flex: none; }
.readiness-ring .track { fill: none; stroke: var(--surface-elevated); stroke-width: 8; }
.readiness-ring .fill { fill: none; stroke: var(--electric); stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }

.tag.critical {
  color: var(--status-blocked);
  border-color: color-mix(in oklab, var(--status-blocked) 45%, transparent);
}

/* ---- report → PDF export ----
   window.print() renders the DOM at full brand fidelity (fonts, tokens,
   layout) rather than round-tripping through a screenshot library. This
   block turns the on-screen page into something that reads as an actual
   document: site chrome drops out, the logo stays as a letterhead mark,
   the flat brand background is force-kept (print strips backgrounds by
   default and would leave light text invisible on white paper), and
   headings/cards don't get orphaned across a page break.

   @page margin is zeroed on purpose: a non-zero @page margin is always
   rendered as blank paper by every browser, no matter what the document's
   own background is — that's what was showing up as a white frame around
   the dark report. Zeroing it lets the brand background reach the true
   page edge; the inset that used to come from @page margin is rebuilt as
   padding on .masthead/main instead, which paints fine since background
   covers the padding box by default.

   The browser's own header/footer (URL, date, page title) is a print-
   dialog setting outside CSS's reach — the button's caption tells the
   user to switch it off for a clean file. */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }

  @page { size: auto; margin: 0; }

  html, body { background: var(--background) !important; margin: 0; }
  .bg-vault-radial { background-image: none; background: var(--background) !important; }

  .primary-nav,
  .masthead .tag,
  .pdf-export-btn,
  .pdf-export-hint,
  .pdf-theme-toggle,
  .back-link { display: none !important; }

  /* Light PDF variant — .pdf-light is added to <html> right before
     window.print(). Its palette now lives in the shared light-theme block
     near the top of this file (html.vx-light, html.pdf-light), which the
     on-screen theme toggle uses too. */

  .masthead { padding: 16mm 14mm 20px; border-bottom-color: var(--border-strong); }
  main { max-width: none; padding: 24px 14mm 14mm; }

  a[href]::after { content: none !important; }

  /* Only atomic, card-sized pieces resist a mid-element break — a whole
     <section> is free to split, or a long report turns into mostly-blank
     pages every time one section doesn't quite fit what's left of a page. */
  .scope-card, .chip, table, tr, figure, img, .card, .grid > * { break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; }
}