/* ============================================================================
   GVN · /docs theme (#68 R2-E) — the PREMIUM landing token house (deep-ink navy,
   glass cards, one indigo trust-accent) applied to the Scalar host. Mirrors
   src/gvn/demo/index.html :root (single visual house). Fonts = the SAME vendored
   Geist family the landing serves under /demo/fonts — NO runtime CDN (kit canon).
   ============================================================================ */
@font-face { font-family:"Geist"; src:url("/demo/fonts/Geist-Regular.woff2") format("woff2");
  font-weight:400; font-display:swap; }
@font-face { font-family:"Geist"; src:url("/demo/fonts/Geist-Medium.woff2") format("woff2");
  font-weight:500; font-display:swap; }
@font-face { font-family:"Geist"; src:url("/demo/fonts/Geist-SemiBold.woff2") format("woff2");
  font-weight:600; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("/demo/fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight:400; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("/demo/fonts/GeistMono-Medium.woff2") format("woff2");
  font-weight:500; font-display:swap; }

:root {
  --bg:#0b0e14;             /* deep-ink near-black navy (landing --bg) */
  --bg-2:#0e1320;
  --ink:#eef1f7; --ink-soft:#9aa6b8; --ink-faint:#5d6678;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.055);
  --accent:#6d8bff;         /* one indigo/electric trust-accent */
  --accent-bright:#8aa2ff; --accent-deep:#4d6bef;
  --accent-glow:rgba(109,139,255,.30);
  --ok:#5ee0b0; --replay:#79b8ff; --danger:#ff7a85;
  --radius:10px; --radius-md:14px;
  --font-sans:'Geist','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
/* Scalar bridge — the WHOLE document (incl. anything reading body) carries the same
   house values the Scalar map (docs.js) applies. Selector outranks the :root-level
   defaults the Scalar bundle injects at runtime (display-p3 blue). */
body[data-surface="swagger"] {
  --scalar-color-accent:#6d8bff;
  --scalar-background-1:#0b0e14;
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
/* blueprint grid + restrained radial-glow field (depth, not noise) — landing parity */
body { position:relative; }
body::before {
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--bg);
  opacity:.5; mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 100%);
}
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% -5%, rgba(109,139,255,.20), transparent 70%),
    radial-gradient(40% 30% at 85% 10%, rgba(94,224,176,.06), transparent 70%);
}
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ── top bar (continuity with the landing top navigation) ── */
.gvn-topbar { position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line);
  background:rgba(11,14,20,0.8); backdrop-filter:blur(10px) saturate(125%);
  -webkit-backdrop-filter:blur(10px) saturate(125%); }
.gvn-topbar .inner { max-width:1152px; margin:0 auto; padding:0 24px; height:56px;
  display:flex; align-items:center; justify-content:space-between; }
.gvn-brand { display:flex; align-items:center; gap:12px; }
.gvn-logo { height:26px; width:26px; border-radius:8px;
  background:linear-gradient(140deg, var(--accent-bright), var(--accent-deep));
  box-shadow:0 0 18px var(--accent-glow); display:grid; place-items:center;
  color:#fff; font-family:var(--font-mono); font-size:11px; font-weight:600; }
.gvn-title { font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.gvn-tag { font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:0.15em; color:var(--ink-soft); border:1px solid var(--line-strong);
  border-radius:999px; padding:3px 9px; }
.gvn-tag[data-on="1"] { color:var(--accent-bright); border-color:rgba(109,139,255,.3);
  background:rgba(109,139,255,.08); }

/* ── buttons (landing .btn language: soft radius, indigo glow, glass ghost) ── */
.btn { font-family:var(--font-sans); font-size:13px; font-weight:500; padding:8px 16px;
  border-radius:var(--radius); border:1px solid transparent; cursor:pointer; line-height:1.2;
  transition:transform .12s ease, background .15s ease, border-color .15s ease,
    box-shadow .15s ease, color .15s ease, filter .15s ease; }
.btn:active { transform:translateY(1px); }
/* both gradient stops in the deep range so white text clears AA at any pixel —
   the indigo glow carries the brightness instead (landing V3 rationale) */
.btn-primary { color:#fff; background:linear-gradient(140deg, #4f5ff0, #4353ee);
  box-shadow:0 6px 20px var(--accent-glow); }
.btn-primary:hover { box-shadow:0 8px 26px var(--accent-glow); filter:brightness(1.06); }
.btn-ghost { background:var(--glass-2); color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover { border-color:var(--accent); color:#fff; }

/* ── hero / intro ── */
.gvn-hero { max-width:1152px; margin:0 auto; padding:32px 24px 8px; }
.gvn-hero h1 { font-size:26px; font-weight:600; letter-spacing:-0.02em; margin:0;
  background:linear-gradient(180deg, #fff, #c7cede);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.gvn-intro { color:var(--ink-soft); font-size:14px; margin:6px 0 0; max-width:640px; }
.gvn-actions { max-width:1152px; margin:0 auto; padding:16px 24px;
  display:flex; gap:12px; align-items:center; }
.gvn-hint { font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); }

/* ── quick try (golden path) ── */
.gvn-quicktry { max-width:1152px; margin:0 auto; padding:0 24px 16px; }
.gvn-quicktry[hidden] { display:none; }
.gvn-card { border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--glass); backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%); padding:16px;
  box-shadow:0 10px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04); }
/* small caps ride --ink-soft, not --ink-faint — 10px on deep-ink needs AA 4.5:1
   (the landing's own V2 rationale; --ink-faint measures 3.35:1 at this size) */
.gvn-label { font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:0.15em; color:var(--ink-soft); margin:0 0 8px; }
.gvn-textarea { width:100%; min-height:120px; background:var(--bg-2); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); font-family:var(--font-mono);
  font-size:12px; padding:12px; resize:vertical; }
.gvn-send-row { margin-top:12px; display:flex; gap:8px; align-items:center; }
.gvn-resp { margin-top:12px; white-space:pre-wrap; font-family:var(--font-mono);
  font-size:12px; color:var(--ink-soft); }
/* response good/bad scan-cue for non-tech readers (landing semantic tokens) */
.gvn-resp[data-kind="ok"]   { color:var(--ok); }
.gvn-resp[data-kind="err"]  { color:var(--danger); }
.gvn-resp[data-kind="hint"] { color:var(--replay); }

/* ── authorize modal ── */
.gvn-modal { border:1px solid var(--line-strong); border-radius:var(--radius-md);
  background:var(--bg-2); color:var(--ink); padding:0; max-width:420px; width:90%;
  box-shadow:0 10px 34px rgba(0,0,0,.4); }
.gvn-modal::backdrop { background:rgba(4,6,10,0.65); backdrop-filter:blur(4px); }
.gvn-modal .head { padding:16px; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; }
.gvn-modal .body { padding:16px; }
.gvn-modal .foot { padding:16px; border-top:1px solid var(--line);
  display:flex; justify-content:flex-end; gap:8px; }
.gvn-input { width:100%; background:var(--bg-2); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius); font-family:var(--font-mono); font-size:13px; padding:8px 10px; }

/* ── scalar host ── */
#scalar-mount { border-top:1px solid var(--line); margin-top:8px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:none; box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent-glow);
}
::selection { background:rgba(109,139,255,.35); color:var(--ink); }

@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }