/* Verified Edge — trust-first product UI (UNIT-50 design system). Two-tier tokens: brand PRIMITIVES (--ve-*) → SEMANTIC tokens the rest of the sheet consumes (--bg, --surface, --text, --accent, --trust, --danger …). Restyle the whole app by editing these tokens only. Verified Green is bound to --trust and used ONLY on verification chrome (never as the generic interactive accent — that stays blue, to avoid the fintech-green cliché). CSP-safe: self-hosted, no inline styles, no external assets. Inter / JetBrains Mono are self-hosted variable woff2s (latin subset only) in /fonts — see the @font-face block below — with a system fallback for any glyph outside that subset. Light + dark via [data-theme] on (server-set, no FOUC). */ /* Inter (SIL OFL 1.1) / JetBrains Mono (Apache 2.0), latin-subset variable woff2s fetched from Google Fonts and self-hosted here (CSP `default-src 'self'` allows no external font origin). `font-weight: 400 700` / `100 800` declares the variable weight axis so the browser picks the right instance from the one file rather than needing a static file per weight. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-latin-variable.woff2") format("woff2"); 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: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/fonts/jetbrains-mono-latin-variable.woff2") format("woff2"); 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; } :root { /* --- Brand primitives (Verified Edge palette) --- */ --ve-navy: #0a1628; /* Deep Navy — dominant surface */ --ve-navy-2: #0c1a2e; --ve-green: #00c853; /* Verified Green — trust signals ONLY */ --ve-green-dim: #00a344; --ve-orange: #ff6b35; /* Alert Orange */ --ve-blue: #4d8dff; /* interactive accent */ --ve-blue-hi: #74a6ff; /* --- Semantic tokens: DARK (default) --- */ --bg: var(--ve-navy); --bg-2: var(--ve-navy-2); --surface: #101f38; --surface-2: #16294a; --surface-3: #1d3357; --border: #24344f; --border-strong: #33496b; --text: #eaf1fb; --muted: #9fb2cc; --muted-2: #6b7f9c; --heading: #ffffff; --accent: var(--ve-blue); --accent-hover: var(--ve-blue-hi); --accent-contrast: #06101f; --accent-soft: rgba(77, 141, 255, 0.15); --violet: #a78bfa; --teal: #2dd4bf; /* Trust — verification badges/checkmarks only */ --trust: var(--ve-green); --trust-soft: rgba(0, 200, 83, 0.14); /* Status */ --danger: #ff6b6b; --danger-bg: #2a1618; --success: #34d17e; --success-bg: #10241b; --warning: var(--ve-orange); --warning-bg: rgba(255, 107, 53, 0.12); --header-bg: rgba(14, 18, 25, 0.85); /* The site header is `position: sticky; top: 0` and 56px tall. Anything else that sticks to the viewport must clear it, so the height is a token rather than a number each rule re-guesses (the lab's facet rail and the help sidebar both used `top: 1rem` and sat UNDER the header; .admin-nav had the right idea with a hardcoded 72px). */ --header-h: 56px; --sticky-top: calc(var(--header-h) + 1rem); --radius: 10px; --radius-sm: 7px; --radius-lg: 16px; --ring: 0 0 0 3px var(--accent-soft); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --maxw: 78rem; /* Data-dense pages (the research workbench) opt into this via `main.main-wide`: the 78rem cap left ~9 metric columns fighting for space. Capped so an ultrawide monitor doesn't produce unreadably long rows. */ --maxw-wide: 108rem; /* Type — 8px spacing base lives in components; fonts prefer Inter/JetBrains, system fallback. */ --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; --glow: rgba(77, 141, 255, 0.06); color-scheme: dark; } /* --- Semantic tokens: LIGHT --- */ :root[data-theme="light"] { --bg: #f4f7fb; --bg-2: #eaf0f7; --surface: #ffffff; --surface-2: #f2f6fb; --surface-3: #e7edf5; --border: #d5deea; --border-strong: #b9c6d8; --text: #0a1628; --muted: #4a5b73; --muted-2: #6b7f9c; --heading: #0a1628; --accent: #1f6feb; --accent-hover: #1a5fd0; --accent-contrast: #ffffff; --accent-soft: rgba(31, 111, 235, 0.1); --trust: var(--ve-green-dim); /* darker green for ≥4.5:1 on white */ --trust-soft: rgba(0, 163, 68, 0.12); --danger: #d92d2d; --danger-bg: #fdeaea; --success: #128a4e; --success-bg: #e7f6ee; --warning: #c85a1e; --warning-bg: rgba(255, 107, 53, 0.12); --header-bg: rgba(255, 255, 255, 0.85); --shadow: 0 1px 2px rgba(10, 22, 40, 0.08), 0 8px 24px rgba(10, 22, 40, 0.08); --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.08); --glow: rgba(31, 111, 235, 0.05); color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; background: radial-gradient(1200px 600px at 80% -10%, var(--glow), transparent 60%), var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } h1, h2, h3 { color: var(--heading); line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.01em; } h1 { font-size: 1.6rem; font-weight: 680; } h2 { font-size: 1.15rem; margin-top: 0; } h3 { font-size: 0.95rem; } p { margin: 0 0 0.75rem; } .muted { color: var(--muted); } .small { font-size: 0.85rem; } /* ---------------------------------------------------------------- App shell */ .site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1.25rem; padding: 0 1.5rem; height: var(--header-h); background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; color: var(--heading); font-size: 1rem; letter-spacing: -0.02em; white-space: nowrap; } /* Verified Edge mark: a rounded navy tile with a Verified-Green check (the "V" checkmark). */ .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--border-strong) inset; } .brand-mark svg { width: 15px; height: 15px; stroke: var(--trust); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* Theme toggle (UNIT-50): icon button; glyph swaps on aria-pressed (no JS-set styles → CSP-safe). */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); cursor: pointer; } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); } .theme-toggle .theme-toggle-icon::before { content: "\2600"; /* ☀ shown in dark mode = "switch to light" */ font-size: 1rem; line-height: 1; } .theme-toggle[aria-pressed="true"] .theme-toggle-icon::before { content: "\263D"; /* ☽ shown in light mode = "switch to dark" */ } .site-header .spacer { flex: 1; } .site-nav { display: flex; align-items: center; gap: 0.15rem; } .nav-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); color: var(--muted); font-weight: 550; font-size: 0.9rem; white-space: nowrap; } .nav-link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } .nav-link.active { color: var(--heading); background: var(--accent-soft); } .header-right { display: flex; align-items: center; gap: 0.85rem; } .header-user { color: var(--muted); font-size: 0.85rem; } /* ------------------------------------------------- Top bar menus (UNIT-91) Three controls only: menu, account switcher, user. Both menus are

, so open/close needs no javascript; the app-nav island only adds Esc + click-outside. `position: relative` on the

anchors its panel; the header itself must NOT clip (no overflow: hidden) or the panels would be cut off. */ .hdr-menu { position: relative; } .hdr-menu > summary { list-style: none; cursor: pointer; } .hdr-menu > summary::-webkit-details-marker, .hdr-menu > summary::marker { display: none; content: ""; } .hdr-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); } /* The icon buttons are as well as