/* OpenSignal themes — a token-driven look you can swap with one data-theme attribute.
 *
 * Every theme is a block of CSS variables (colors, radius, shadow, font stacks) plus a few
 * structural rules for the dramatic ones (journal hairlines, CRT scanlines, pixel bevels).
 * The same variables also back a Tailwind palette remap (see base.html), so pages that still
 * use utility classes recolor to the active theme without per-page edits.
 *
 * Default (no data-theme, or data-theme="aurora") = Aurora.
 */

/* Self-hosted OFL webfaces (no CDN dependency): VT323 = CRT terminal, Press Start 2P +
 * Pixelify Sans = pixel/Minecraft, Newsreader = a proper reading serif for the journal look. */
@font-face{font-family:"VT323";src:url(/static/fonts/vt323.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Press Start 2P";src:url(/static/fonts/press-start-2p.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url(/static/fonts/pixelify-sans.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/static/fonts/newsreader-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/static/fonts/newsreader-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/static/fonts/newsreader-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root,
:root[data-theme="aurora"] {
  --os-bg:#f8fafc; --os-surface:#ffffff; --os-surface2:#f1f5f9;
  --os-border:#e6ebf2; --os-ink:#0f1b2d; --os-ink-soft:#334155;
  --os-muted:#647089; --os-muted2:#94a3b8;
  --os-accent:#0d9488; --os-accent-2:#0f766e; --os-accent-ink:#ffffff;
  --os-accent-bg:#ecfeff; --os-accent-bd:#a5f3fc;
  --os-open-bg:#eef2ff; --os-open-ink:#4338ca; --os-open-bd:#c7d2fe;
  --os-pct-bg:#fff7ed; --os-pct-ink:#c2410c; --os-pct-bd:#fed7aa;
  --os-ok-bg:#ecfdf5; --os-ok-ink:#047857; --os-ok-bd:#a7f3d0;
  --os-partial-bg:#fffbeb; --os-partial-ink:#b45309; --os-partial-bd:#fde68a;
  --os-gap-bg:#fef2f2; --os-gap-ink:#b91c1c; --os-gap-bd:#fecaca;
  --os-star:#f59e0b; --os-warn:#c2410c;
  --os-radius:.8rem; --os-card-shadow:0 8px 24px -14px rgba(15,27,45,.28);
  --os-card-bd:1px solid var(--os-border);
  --font-head:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}

:root[data-theme="broadsheet"] {
  --os-bg:#f3efe6; --os-surface:#f3efe6; --os-surface2:#e9e3d5;
  --os-border:#d8d0be; --os-ink:#20180f; --os-ink-soft:#4a4030;
  --os-muted:#6a5f4c; --os-muted2:#8a7d64;
  --os-accent:#8a2b26; --os-accent-2:#6f221e; --os-accent-ink:#f6f1e7;
  --os-accent-bg:#ece4d4; --os-accent-bd:#c3b79c;
  --os-open-bg:#e7e9ec; --os-open-ink:#3a4a5c; --os-open-bd:#b9c2cc;
  --os-pct-bg:#efe6d6; --os-pct-ink:#8a2b26; --os-pct-bd:#c9a3a0;
  --os-star:#8a2b26; --os-warn:#8a2b26;
  --os-radius:0; --os-card-shadow:none; --os-card-bd:0;
  --font-head:"Newsreader",Georgia,"Times New Roman",serif;
  --font-body:"Newsreader",Georgia,"Times New Roman",serif;
  --font-mono:"Newsreader",Georgia,"Times New Roman",serif;
}

:root[data-theme="terminal"] {
  --os-bg:#080d0a; --os-surface:#0b120d; --os-surface2:#0f1a12;
  --os-border:#1d3a26; --os-ink:#8fe3ab; --os-ink-soft:#6fbf8a;
  --os-muted:#4f8a63; --os-muted2:#3d6b4d;
  --os-accent:#39ff88; --os-accent-2:#2fe077; --os-accent-ink:#041008;
  --os-accent-bg:#0f1a12; --os-accent-bd:#245c39;
  --os-open-bg:#0b1518; --os-open-ink:#63d6e0; --os-open-bd:#1f4a52;
  --os-pct-bg:#141105; --os-pct-ink:#ffce54; --os-pct-bd:#5a4a1a;
  --os-ok-bg:#0a1a0f; --os-ok-ink:#39ff88; --os-ok-bd:#1f5c33;
  --os-partial-bg:#141105; --os-partial-ink:#ffce54; --os-partial-bd:#5a4a1a;
  --os-gap-bg:#1a0d0d; --os-gap-ink:#ff7a7a; --os-gap-bd:#5a2020;
  --os-star:#ffce54; --os-warn:#ffce54;
  --os-radius:0; --os-card-shadow:none; --os-card-bd:1px solid var(--os-border);
  /* The theme-studio Terminal used a clean monospace, not a pixel face — it reads far
     better as body text while still saying "terminal". VT323 remains only on the brand. */
  --font-head:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --font-body:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --font-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}

:root[data-theme="blockcraft"] {
  --os-bg:#b6b0a2; --os-surface:#c7c1b0; --os-surface2:#b0a996;
  --os-border:#3f3a30; --os-ink:#241f16; --os-ink-soft:#3a342a;
  --os-muted:#5a5140; --os-muted2:#6f6552;
  --os-accent:#5a9b3c; --os-accent-2:#4a842f; --os-accent-ink:#0e1c07;
  --os-accent-bg:#d8d2c0; --os-accent-bd:#3f3a30;
  --os-open-bg:#bcd7e6; --os-open-ink:#1c3a49; --os-open-bd:#3f3a30;
  --os-pct-bg:#e6c95a; --os-pct-ink:#33280a; --os-pct-bd:#3f3a30;
  --os-star:#e6c95a; --os-warn:#a15c1e;
  --os-radius:0; --os-card-shadow:5px 5px 0 rgba(30,26,18,.55);
  --os-card-bd:0;
  /* Studio Blockcraft used a clean monospace for text; the pixel face (Press Start 2P)
     stays on the brand only, so the theme keeps its identity without hurting legibility. */
  --font-head:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --font-body:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --font-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}

/* ============================ Themed chrome (semantic classes) ============================ */

.os-page{ background:var(--os-bg); color:var(--os-ink); font-family:var(--font-body); }

.os-header{ background:var(--os-surface); border-bottom:1px solid var(--os-border); }
.os-brand{ font-family:var(--font-head); }
.os-brand span{ color:var(--os-accent); }

.os-nav-link{ padding:.25rem .5rem; border-radius:calc(var(--os-radius) - .2rem); color:var(--os-muted); font-family:var(--font-head); }
.os-nav-link:hover{ background:var(--os-surface2); color:var(--os-ink); }
.os-nav-link.on{ background:var(--os-accent); color:var(--os-accent-ink); }

.os-btn-accent{ background:var(--os-accent); color:var(--os-accent-ink); border-radius:calc(var(--os-radius) - .2rem); }
.os-btn-accent:hover{ background:var(--os-accent-2); }

.os-footer{ color:var(--os-muted2); border-top:1px solid var(--os-border); }
.os-footer a{ color:var(--os-muted); }

.os-card{ background:var(--os-surface); border:var(--os-card-bd); border-radius:var(--os-radius); box-shadow:var(--os-card-shadow); }
.os-title{ font-family:var(--font-head); color:var(--os-ink); font-weight:650; line-height:1.28; letter-spacing:-.01em; }
a.os-title:hover{ color:var(--os-accent); }
.os-meta{ color:var(--os-muted); }
.os-meta .os-jrnl{ color:var(--os-ink-soft); }

.os-tag{ display:inline-block; font-size:.7rem; padding:.12rem .5rem; border-radius:calc(var(--os-radius) - .3rem);
  border:1px solid var(--os-accent-bd); background:var(--os-accent-bg); color:var(--os-accent-2); font-family:var(--font-mono); }
.os-tag--soft{ background:var(--os-surface2); color:var(--os-muted); border-color:var(--os-border); }
.os-tag--open{ background:var(--os-open-bg); color:var(--os-open-ink); border-color:var(--os-open-bd); }
.os-tag--pct{ background:var(--os-pct-bg); color:var(--os-pct-ink); border-color:var(--os-pct-bd); }
.os-vd--ok{ background:var(--os-ok-bg); color:var(--os-ok-ink); border-color:var(--os-ok-bd); }
.os-vd--partial{ background:var(--os-partial-bg); color:var(--os-partial-ink); border-color:var(--os-partial-bd); }
.os-vd--gap{ background:var(--os-gap-bg); color:var(--os-gap-ink); border-color:var(--os-gap-bd); }
/* Full-text reasoning review (issue items, D5) */
.os-review > summary{ cursor:pointer; color:var(--os-accent-2); font-family:var(--font-mono);
  font-size:.8rem; font-weight:600; list-style:none; display:inline-flex; align-items:center;
  gap:.4rem; padding:.15rem 0; }
.os-review > summary::-webkit-details-marker{ display:none; }
.os-review > summary::before{ content:"▶"; font-size:.7rem; color:var(--os-accent);
  transition:transform .12s ease; }
.os-review[open] > summary::before{ transform:rotate(90deg); }
.os-review > summary:hover{ text-decoration:underline; }
.os-claim{ color:var(--os-ink-soft); }
.os-claim-gap{ color:var(--os-muted); font-style:italic; }
.os-explain{ color:var(--os-muted); font-style:italic; }
.os-signals{ color:var(--os-muted); font-family:var(--font-mono); }

.os-chip{ padding:.25rem .55rem; border:1px solid var(--os-border); border-radius:calc(var(--os-radius) - .25rem);
  color:var(--os-muted); background:var(--os-surface); font-family:var(--font-head); }
.os-chip.on{ background:var(--os-ink); color:var(--os-bg); border-color:var(--os-ink); }

.os-star{ border:1px solid var(--os-border); border-radius:calc(var(--os-radius) - .2rem); color:var(--os-muted); background:var(--os-surface); }
.os-star.is-on{ background:var(--os-star); color:var(--os-accent-ink); border-color:var(--os-star); }

.os-select{ background:var(--os-surface); color:var(--os-ink); border:1px solid var(--os-border); border-radius:calc(var(--os-radius) - .3rem); font-family:var(--font-body); padding:.15rem .4rem; }

/* ---------------------------------- Broadsheet ---------------------------------- */
:root[data-theme="broadsheet"] .os-header{ border-bottom:2px solid var(--os-ink); }
:root[data-theme="broadsheet"] .os-nav-link{ text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-family:var(--font-head); }
:root[data-theme="broadsheet"] .os-brand{ font-weight:600; }
/* Standalone panels get a hairline border; feed "list" cards are ruled separators instead. */
:root[data-theme="broadsheet"] .os-card{ border:1px solid var(--os-border); }
:root[data-theme="broadsheet"] .os-card--list{ border:0; border-top:1px solid var(--os-border); background:transparent; }
:root[data-theme="broadsheet"] .os-title{ font-weight:600; }
:root[data-theme="broadsheet"] .os-explain{ font-style:italic; }
:root[data-theme="broadsheet"] .os-tag{ border-radius:0; border-width:0 0 0 2px; background:transparent;
  text-transform:uppercase; letter-spacing:.06em; font-size:.63rem; font-family:system-ui,sans-serif; }
:root[data-theme="broadsheet"] .os-chip{ border-radius:0; text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; font-family:system-ui,sans-serif; }

/* ---------------------------------- Terminal ---------------------------------- */
:root[data-theme="terminal"] .os-page{
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0,rgba(0,0,0,.22) 1px,transparent 1px,transparent 3px);
  line-height:1.5;
}
/* Keep the pixel VT323 as a signature on the brand only, where it's large and legible. */
:root[data-theme="terminal"] .os-brand{ font-family:"VT323",ui-monospace,monospace; font-size:1.5rem; }
:root[data-theme="terminal"] .os-brand{ text-shadow:0 0 8px rgba(57,255,136,.5); }
:root[data-theme="terminal"] .os-nav-link.on::before{ content:"▸ "; }
:root[data-theme="terminal"] a.os-title::before{ content:"> "; color:var(--os-accent); }
:root[data-theme="terminal"] .os-tag,
:root[data-theme="terminal"] .os-chip,
:root[data-theme="terminal"] .os-star{ border-radius:0; }

/* ---------------------------------- Blockcraft ---------------------------------- */
:root[data-theme="blockcraft"] .os-page{ line-height:1.55; }
:root[data-theme="blockcraft"] .os-header{ border-bottom:4px solid var(--os-border); }
:root[data-theme="blockcraft"] .os-brand{ font-family:"Press Start 2P",ui-monospace,monospace;
  text-transform:uppercase; font-size:.82rem; letter-spacing:.02em; font-weight:400; }
:root[data-theme="blockcraft"] .os-nav-link.on,
:root[data-theme="blockcraft"] .os-btn-accent{ border:3px solid; border-color:#8fd06e #2f5a1e #2f5a1e #8fd06e; box-shadow:2px 2px 0 #1c1305; }
:root[data-theme="blockcraft"] .os-card{ border:4px solid; border-color:var(--os-surface2) #6f685a #6f685a var(--os-surface2); }
:root[data-theme="blockcraft"] .os-title{ font-weight:400; }
:root[data-theme="blockcraft"] .os-tag{ border:2px solid var(--os-border); text-transform:uppercase; letter-spacing:.03em; font-size:.62rem; }
:root[data-theme="blockcraft"] .os-chip,
:root[data-theme="blockcraft"] .os-star{ border:3px solid; border-color:#efe9dc #6f685a #6f685a #efe9dc; }
:root[data-theme="blockcraft"] .os-chip.on{ border-color:#2f5a1e #8fd06e #8fd06e #2f5a1e; }

/* --- Whole-site propagation (pages still on utility classes) --- */
/* Headings adopt the theme display font everywhere. */
.os-page h1, .os-page h2, .os-page h3 { font-family:var(--font-head); }
/* Sharp-cornered themes flatten utility radii too (dots/avatars use rounded-full, untouched). */
:root[data-theme="broadsheet"] .rounded, :root[data-theme="broadsheet"] .rounded-lg,
:root[data-theme="terminal"] .rounded, :root[data-theme="terminal"] .rounded-lg,
:root[data-theme="blockcraft"] .rounded, :root[data-theme="blockcraft"] .rounded-lg { border-radius:0; }
/* Blockcraft: give utility-classed buttons the same block bevel as the themed ones. */
:root[data-theme="blockcraft"] button.rounded, :root[data-theme="blockcraft"] a.rounded {
  border:3px solid; border-color:#8fd06e #2f5a1e #2f5a1e #8fd06e; box-shadow:2px 2px 0 #1c1305;
}

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