/* ==========================================================================
   Nyxwatch · base.css
   Design tokens (aligned with the landing), reset, ambient background,
   shared atoms. Single source of truth for colour and type.

   Theme: dark is the brand default. A light scaffold lives at the bottom
   (page CSS not yet audited for light — see PHASE0-NOTES.md).
   ========================================================================== */

:root {
    /* ---- Surfaces (deep "night" — Nyx) ---- */
    --void: #131519; /* page background        (landing --paper/dark) */
    --void-1: #16181d; /* raised surface               */
    --void-2: #1b1e24; /* panels / cards         (landing --panel/dark) */
    /* ---- Hairlines (neutral — no cyan tint) ---- */
    --line: rgba(255, 255, 255, .11); /* landing --line/dark        */
    --line-2: rgba(255, 255, 255, .20); /* landing --line-strong/dark */
    /* ---- Single cold accent ---- */
    --ice: #5e93ce; /* accent            (landing --accent/dark)      */
    --ice-soft: #79a8dc; /* brighter accent   (landing --accent-deep/dark) */
    --accent: var(--ice); /* forward-compat aliases */
    --accent-deep: var(--ice-soft);
    /* ---- Ink ---- */
    --frost: #e9ebef; /* primary text     (landing --ink/dark)   */
    --text: #c3c8d1; /* body text        (landing --ink-2/dark) */
    --mist: #959ba7; /* muted            (landing --muted/dark) */
    --ash: #6e7480; /* faint            (landing --faint/dark) */
    /* ---- Status ---- */
    --alert: #d98c92; /* calm, desaturated red */
    /* ---- Type (matches the landing) ---- */
    --serif: "Newsreader", Georgia, "Times New Roman", serif; /* display */
    --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; /* body    */
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    color-scheme: dark;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--void);
    color: var(--text);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--ice);
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    color: inherit;
}

img, svg {
    display: block;
}

::selection {
    background: rgba(94, 147, 206, .26);
    color: var(--frost);
}

/* ---------- Ambient background ----------
   Calm forensic backdrop: a faint neutral grid + soft vignette.
   The old scan-lines / noise / neon glow were removed (off-brand). */
.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg__grid {
    position: absolute;
    inset: -2px;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 52px 52px;
    opacity: .5;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 86%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 86%);
}

.bg__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120% 110% at 50% -5%, transparent 55%, rgba(0, 0, 0, .35) 100%);
}

/* ---------- Brand mark ---------- */
.brand {
    display: flex;
    align-items: center;
    gap: .7rem;
}

    .brand svg {
        flex: none;
        fill: var(--ice);
    }

.brand__logo {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--line-2), 0 4px 14px -6px rgba(0, 0, 0, .8);
}

/* Per-page size overrides via width/height attributes are respected. */
.intro .brand__logo {
    width: 30px;
    height: 30px;
}

.bar .brand__logo {
    width: 24px;
    height: 24px;
}

.brand__word {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--frost);
}

a.brand {
    text-decoration: none;
}

/* ---------- Status dot ---------- */
.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ice);
    box-shadow: 0 0 0 3px rgba(94, 147, 206, .14);
    animation: dot-pulse 2.6s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }
}

/* ---------- Utilities ---------- */
.hidden {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .dot {
        animation: none;
    }
}

/* ==========================================================================
   Light theme — SCAFFOLD ONLY (experimental).
   Values mirror the landing's light tokens. Page CSS still assumes dark in
   places (hardcoded shadows/gradients), so a working light theme needs a
   per-page pass before we expose a toggle. Kept here so that pass is a flip,
   not a rebuild.
   ========================================================================== */
[data-theme="light"] {
    --void: #f1f2f4;
    --void-1: #e8eaee;
    --void-2: #ffffff;
    --line: rgba(21, 23, 28, .12);
    --line-2: rgba(21, 23, 28, .22);
    --ice: #21456e;
    --ice-soft: #19354f;
    --frost: #15171c;
    --text: #33373f;
    --mist: #5a606c;
    --ash: #9197a3;
    color-scheme: light;
}
/* ==========================================================================
   Sealed record (shared by sealed.js across case-graph and vault)
   ========================================================================== */
.sealed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
    font-family: var(--mono);
    font-size: .62rem;
    color: var(--mist);
}

.sealed--compact {
    font-size: .58rem;
    gap: .3rem .5rem;
}

.sealed--full {
    align-items: flex-start;
}

.sealed__hash {
    color: var(--ice-soft);
    letter-spacing: .02em;
}

.sealed--full .sealed__hash {
    word-break: break-all;
}

.sealed__time {
    color: var(--ash);
}

.sealed__badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .12rem .4rem;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .56rem;
    color: var(--ash);
}

.sealed__badge--ok {
    color: var(--ice);
    border-color: rgba(94, 147, 206, .45);
}

.sealed__badge--alt {
    color: var(--alert);
    border-color: rgba(217, 140, 146, .5);
}

/* File badge doubles as an on-demand "verify" button (re-hash the sealed blob). */
button.sealed__badge {
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.sealed__badge--sealed {
    color: var(--mist);
    transition: color .2s, border-color .2s;
}

    .sealed__badge--sealed:hover {
        color: var(--ice);
        border-color: rgba(94, 147, 206, .45);
    }

.sealed__copy {
    flex: none;
    background: none;
    border: 1px solid var(--line-2);
    color: var(--mist);
    font-family: var(--mono);
    font-size: .56rem;
    padding: .12rem .4rem;
    transition: color .2s, border-color .2s;
}

    .sealed__copy:hover {
        color: var(--ice);
        border-color: rgba(94, 147, 206, .45);
    }

/* ---------- Media preview (File sources) — shared across graph, vault, report ---------- */
.media {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.media__img,
.media__video {
    max-width: 100%;
    max-height: 340px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--void-2);
}

.media__audio {
    width: 100%;
}

.media__download {
    display: inline-flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--void-1);
    text-decoration: none;
}

.media__name {
    font-size: .8rem;
    color: var(--ice);
    word-break: break-all;
}

.media__meta {
    font-family: var(--mono);
    font-size: .62rem;
    color: var(--mist);
}

.media__note {
    font-size: .74rem;
    color: var(--mist);
}

.media__note--error {
    color: var(--alert);
}