/* night.css — the midnight theme: same black room, lit by blue instead of red. Not a recolour: the paper cards
   become deep-blue glass, tape turns ice, pins get their own blue shades, the hero print goes azure over indigo.
   Only applies while <html data-theme="night"> is set (js/night.js does that, 00:00–05:59 local time).
   Day styles are never edited: this file only sits on top of them. Load it LAST.
   Shades: cobalt #2f6bff, azure #4da3ff, sky #6cb2ff, ice #9fe3ff, indigo #1a2f9a, glass #0e1c46 → #08122e.
   Errors and destructive buttons deliberately stay red. */

/* ---------- 1. tokens (the names still say "red": that's the accent slot) ---------- */
html[data-theme="night"] {
    --bg: #050609; --bg2: #0a0d16; --bg3: #0e1424; --bg4: #141c33;
    --paper: #eaf1ff; --paper-dim: #b9c8ea; --ink: #8a9cc8; --ink-dim: #4a5878;
    --red: #2f6bff; --red-bright: #4da3ff; --red-deep: #1a2f9a;
    --red-glow: rgba(47, 107, 255, .3); --red-glow-strong: rgba(77, 163, 255, .55);
    --line: #141b30; --line-bright: #26386b;
    --pen: #dbe6ff; --pen-soft: #8fa6d6; --stamp: #6cb2ff;
}
html[data-theme="night"] body { --gold: #9fe3ff; }

/* ---------- 2. atmosphere: the room stays black, the light goes blue ---------- */
html[data-theme="night"] .lamp { background: radial-gradient(ellipse 60% 70% at var(--lx, 78%) var(--ly, 8%), rgba(47, 107, 255, .26), rgba(47, 107, 255, .07) 48%, transparent 100%); }
html[data-theme="night"] .h-lamp { background: radial-gradient(ellipse 60% 70% at 78% 8%, rgba(47, 107, 255, .26), rgba(47, 107, 255, .07) 48%, transparent 100%); }
html[data-theme="night"] #cursor-glow { background: radial-gradient(circle, rgba(47, 107, 255, .24) 0%, rgba(47, 107, 255, .06) 50%, transparent 70%); }
html[data-theme="night"] #cursor-glow.hover { background: radial-gradient(circle, rgba(77, 163, 255, .32) 0%, rgba(47, 107, 255, .1) 50%, transparent 70%); }
html[data-theme="night"] .ripple { border-color: rgba(77, 163, 255, .4); }

/* ---------- 3. tape ---------- */
html[data-theme="night"] .tape,
html[data-theme="night"] .letter::before,
html[data-theme="night"] .paper.taped::before,
html[data-theme="night"] .ask::before,
html[data-theme="night"] .slip::before,
html[data-theme="night"] .ticket::before { background: rgba(77, 163, 255, .55); }
html[data-theme="night"] .pin::before,
html[data-theme="night"] .slip[data-tone="dark"]::before,
html[data-theme="night"] .slip[data-tone="red"]::before { background: rgba(159, 227, 255, .5); }

/* ---------- 4. every paper thing becomes deep-blue glass ---------- */
html[data-theme="night"] .letter,
html[data-theme="night"] .polaroid,
html[data-theme="night"] .paper,
html[data-theme="night"] .notes-panel,
html[data-theme="night"] .ask,
html[data-theme="night"] .print,
html[data-theme="night"] figure.lightbox-frame,
html[data-theme="night"] .ticket,
html[data-theme="night"] .shot,
html[data-theme="night"] .frame-cell,
html[data-theme="night"] .slip,
html[data-theme="night"] .drop-preview {
    background: linear-gradient(160deg, #0e1c46 0%, #08122e 100%);
    outline: 1px solid rgba(77, 163, 255, .28); outline-offset: -1px;
}
html[data-theme="night"] .skip { color: #04101f; }

/* index: hello letter, portrait, pins, prints, writing */
html[data-theme="night"] .letter { color: #dbe6ff; }
html[data-theme="night"] .hello-hi { color: #f2f6ff; }
html[data-theme="night"] .hello-ps { color: #6cb2ff; }
html[data-theme="night"] .polaroid-caption { color: #9fb4e6; }
html[data-theme="night"] .polaroid-frame .px-day { display: none; }
html[data-theme="night"] .polaroid-frame .px-night { display: block; }

html[data-theme="night"] .pin { --c: #0d1a3d; --t: #dbe6ff; --k: #9fe3ff; }
html[data-theme="night"] .pin:nth-child(5n+2), html[data-theme="night"] .pin:nth-child(5n) { --c: var(--bg2); --t: var(--paper); --k: var(--red-bright); }
html[data-theme="night"] .pin:nth-child(5n+3) { --c: #2456d6; --t: #f2f7ff; --k: #bfe4ff; }
html[data-theme="night"] .pin-k { color: var(--k, #6cb2ff); }

html[data-theme="night"] .frame-cap { color: #b9c8ea; }

html[data-theme="night"] .notes-panel { color: #dbe6ff; }
html[data-theme="night"] .notes-tag { color: #6cb2ff; }
html[data-theme="night"] .notes-title { color: #f2f6ff; }
html[data-theme="night"] .notes-body { color: #b9c8ea; }
html[data-theme="night"] .notes-body::after { background: linear-gradient(transparent, #08122e); }
html[data-theme="night"] .notes-tab.active, html[data-theme="night"] .notes-tab.active:hover { background: #0e1c46; color: #f2f6ff; }
html[data-theme="night"] .read-more-btn { color: #6cb2ff; }
html[data-theme="night"] .read-more-btn:hover { color: #f2f6ff; }

/* ---------- 5. inner pages: titles, forms, cards ---------- */
html[data-theme="night"] .title { text-shadow: .02em .016em 0 rgba(77, 163, 255, var(--print)), .042em .034em 0 rgba(26, 47, 154, var(--print)); }
html[data-theme="night"] .line-input { color: #eaf1ff; border-bottom-color: rgba(140, 170, 255, .5); }
html[data-theme="night"] .line-input::placeholder { color: #6f86b8; }
html[data-theme="night"] .line-input:focus { border-bottom-color: var(--stamp); }
html[data-theme="night"] textarea.line-input { background-image: repeating-linear-gradient(transparent 0, transparent calc(1.6rem - 1px), rgba(140, 170, 255, .16) calc(1.6rem - 1px), rgba(140, 170, 255, .16) 1.6rem); }
html[data-theme="night"] .gate-title { color: #f2f6ff; }
html[data-theme="night"] .fine { border-top-color: rgba(140, 170, 255, .25); }
html[data-theme="night"] .paper .btn:not(.solid), html[data-theme="night"] .ask .btn:not(.solid) { border-color: rgba(140, 170, 255, .4); }
html[data-theme="night"] .paper .btn.solid, html[data-theme="night"] .ask .btn.solid { color: #04101f; }
@media (hover: hover) and (pointer: fine) { html[data-theme="night"] .paper .btn.solid:hover, html[data-theme="night"] .ask .btn.solid:hover { background: var(--paper); border-color: var(--paper); color: #04101f; } }

html[data-theme="night"] .skeleton-img { background-image: linear-gradient(90deg, #0d1a3d 25%, #16295f 50%, #0d1a3d 75%); }
html[data-theme="night"] .shot-pick { background: rgba(13, 26, 61, .85); }
html[data-theme="night"] .ticket-num { color: #f2f6ff; }
html[data-theme="night"] .found-text { color: #f2f6ff; }
html[data-theme="night"] .slip[data-tone="dark"] { background: var(--bg3); color: var(--paper); }
html[data-theme="night"] .slip[data-tone="red"] { background: #2456d6; color: #f2f7ff; --who: #f2f7ff; --when: #bfe4ff; }
html[data-theme="night"] .redact { background: #02050f; color: #02050f; }
html[data-theme="night"] .redact:hover, html[data-theme="night"] .redact:focus-visible { color: var(--paper); }

/* ---------- 6. sapiens cover ---------- */
html[data-theme="night"] .cover { background: linear-gradient(155deg, var(--bg3), var(--bg4) 60%, #0a1226); }
html[data-theme="night"] .cover svg [stroke="#e8b23a"] { stroke: #9fe3ff; }
html[data-theme="night"] .cover svg [stroke="#d81f2f"] { stroke: #2f6bff; }
html[data-theme="night"] .cover svg [fill="#ff3346"] { fill: #4da3ff; }
html[data-theme="night"] .cover svg [stroke="#8d8578"] { stroke: #7d8fbd; }
html[data-theme="night"] .cover svg [fill="#f1ead9"] { fill: #eaf1ff; }

/* ---------- 7. card + glitch overlay (index) ---------- */
html[data-theme="night"] .card-overlay .card-front .foil-strip { background: repeating-linear-gradient(124deg, transparent 0 9px, rgba(47, 107, 255, .3) 9px 11px, transparent 11px 20px, rgba(159, 227, 255, .1) 20px 22px); background-size: 140% 140%; }
html[data-theme="night"] .card-overlay .card-back .detail.copyable:hover, html[data-theme="night"] .card-overlay .card-back .detail.copyable:focus-visible { background: rgba(159, 227, 255, .07); }
html[data-theme="night"] .glitch-scan-lines { background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(47, 107, 255, .02) 3px, rgba(47, 107, 255, .02) 6px); }
html[data-theme="night"] .glitch-ritual::before { color: #2f6bff; }

/* ---------- 8. forest: black sky, pale-blue horizon ---------- */
html[data-theme="night"] body.scene { background: linear-gradient(180deg, #000 21%, #bcd4ff 100%); }
html[data-theme="night"] body.scene .note p { color: #eaf1ff; }
html[data-theme="night"] body.scene .note a { color: #4da3ff; }
html[data-theme="night"] body.scene .note a:focus-visible { outline-color: #4da3ff; }
@media (hover: hover) and (pointer: fine) { html[data-theme="night"] body.scene .note a:hover { color: #eaf1ff; } }

/* ---------- 9. still red on purpose: errors and destructive actions ---------- */
html[data-theme="night"] .gate-error, html[data-theme="night"] .count.low { color: #ff6272; }
html[data-theme="night"] .toast.error { border-left-color: #ff6272; }
html[data-theme="night"] .badge.bad { color: #ff6272; border-color: #7a1220; }
html[data-theme="night"] .btn.danger { border-color: #7a1220; color: #ff6272; }
html[data-theme="night"] .shot .btn { color: #ff6272; border-color: rgba(255, 98, 114, .5); }
@media (hover: hover) and (pointer: fine) { html[data-theme="night"] .btn.danger:hover { background: #7a1220; border-color: #7a1220; color: #f1ead9; } }