/* Blood of the Enemy — Arcane Codex theme
   Defaults: deep indigo/obsidian + cyan aether crystal glow + parchment accent
*/

:root {
  /* Default theme — Arcane Codex */
  --bg-0:      oklch(0.14 0.035 260);      /* deep ink */
  --bg-1:      oklch(0.17 0.04  262);
  --bg-2:      oklch(0.21 0.045 263);
  --bg-raised: oklch(0.19 0.05  263);
  --bg-hover:  oklch(0.24 0.055 263);
  --edge:      oklch(0.30 0.05  262 / 0.6);
  --edge-soft: oklch(0.30 0.05  262 / 0.3);
  --rule:      oklch(0.35 0.06  262 / 0.45);

  --ink-0: oklch(0.96 0.015 85);   /* off-white warm */
  --ink-1: oklch(0.86 0.020 85);
  --ink-2: oklch(0.70 0.025 85);
  --ink-3: oklch(0.55 0.030 260);
  --ink-4: oklch(0.42 0.040 260);

  --aether:      oklch(0.80 0.17 215);     /* cyan crystal glow */
  --aether-soft: oklch(0.80 0.17 215 / 0.18);
  --aether-ring: oklch(0.80 0.17 215 / 0.45);

  --gold:      oklch(0.82 0.14 85);        /* warm parchment gold */
  --gold-soft: oklch(0.82 0.14 85 / 0.20);

  --blood:     oklch(0.58 0.19 25);        /* dried-blood red */
  --blood-soft:oklch(0.58 0.19 25 / 0.18);

  --violet:    oklch(0.68 0.16 305);
  --violet-soft:oklch(0.68 0.16 305 / 0.18);

  --green:     oklch(0.72 0.14 155);
  --green-soft:oklch(0.72 0.14 155 / 0.18);

  --f-display: "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, serif;
  --f-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gap:  1rem;
  --pad:  1.25rem;
  --radius: 4px;
  --radius-lg: 10px;

  --content-w: 1200px;

  /* Density modifiers (overridden by [data-density]) */
  --density-scale: 1;
}

:root[data-density="compact"] { --density-scale: 0.88; --pad: 0.9rem; --gap: 0.7rem; }
:root[data-density="spacious"] { --density-scale: 1.08; --pad: 1.6rem; --gap: 1.4rem; }

/* ─────────── Base ─────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: var(--f-body);
  font-size: calc(15px * var(--density-scale));
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* subtle background diagram texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, var(--aether-soft) 1px, transparent 1px),
    radial-gradient(1px 1px at 70% 70%, var(--aether-soft) 1px, transparent 1px),
    radial-gradient(1px 1px at 85% 20%, var(--gold-soft) 1px, transparent 1px);
  background-size: 160px 160px, 220px 220px, 300px 300px;
  opacity: 0.6;
  z-index: 0;
}

h1, h2, h3, h4 { font-family: var(--f-display); color: var(--ink-0); font-weight: 500; letter-spacing: 0.01em; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; }
h3 { font-size: 1.2rem; line-height: 1.25; }
h4 { font-size: 1rem; line-height: 1.3; font-family: var(--f-body); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); font-weight: 500; }

p { margin: 0 0 0.8em; }
a { color: var(--aether); text-decoration: none; }
a:hover { color: var(--ink-0); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5rem 0; }

/* ─────────── Layout: shell ─────────── */
.shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.container { max-width: var(--content-w); margin: 0 auto; padding: 0 1.25rem; width: 100%; }

/* Header */
.header {
  border-bottom: 1px solid var(--edge-soft);
  background: color-mix(in srgb, var(--bg-0) 85%, transparent);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner { display: flex; align-items: center; gap: 1.25rem; padding: 0.85rem 1.25rem; max-width: var(--content-w); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 0.7rem; font-family: var(--f-display); font-size: 1.35rem; color: var(--ink-0); letter-spacing: 0.02em; }
.brand-sigil { width: 28px; height: 28px; display: grid; place-items: center; flex-shrink: 0; }
.brand-title { font-weight: 500; }
.brand-sub { font-size: 0.75rem; color: var(--ink-3); letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--f-body); margin-left: 0.3rem; }

.header-spacer { flex: 1; }

.search-btn {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--bg-1);
  border: 1px solid var(--edge-soft);
  color: var(--ink-2);
  border-radius: var(--radius);
  padding: 0.45rem 0.75rem;
  font-family: var(--f-body);
  font-size: 0.85rem;
  cursor: pointer;
  min-width: 220px;
  transition: border-color 0.15s, color 0.15s;
}
.search-btn:hover { border-color: var(--aether-ring); color: var(--ink-1); }
.search-btn .search-label { flex: 1; text-align: left; }
.search-btn kbd {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  background: var(--bg-2);
  border: 1px solid var(--edge-soft);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  color: var(--ink-3);
}

.icon-btn {
  background: transparent;
  border: 1px solid var(--edge-soft);
  color: var(--ink-2);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: 0.85rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: border-color 0.15s, color 0.15s;
}
.icon-btn:hover { border-color: var(--aether-ring); color: var(--ink-0); }

/* Tabs */
.tabs {
  display: flex;
  gap: 0.1rem;
  border-bottom: 1px solid var(--edge-soft);
  overflow-x: auto;
  scrollbar-width: none;
  background: color-mix(in srgb, var(--bg-0) 92%, transparent);
  position: sticky;
  top: 60px;
  z-index: 40;
  backdrop-filter: blur(6px);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs-inner { display: flex; gap: 0.1rem; max-width: var(--content-w); width: 100%; margin: 0 auto; padding: 0 0.75rem; }
.tab-btn {
  background: transparent;
  border: 0;
  color: var(--ink-2);
  padding: 0.85rem 1rem;
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  display: flex; align-items: center; gap: 0.5rem;
}
.tab-btn:hover { color: var(--ink-0); }
.tab-btn[aria-selected="true"] {
  color: var(--ink-0);
  border-bottom-color: var(--aether);
}
.tab-count { font-family: var(--f-mono); font-size: 0.65rem; color: var(--ink-3); background: var(--bg-2); padding: 0.1rem 0.3rem; border-radius: 3px; }

/* Main */
main { flex: 1; padding: 2rem 0 4rem; }

/* ─────────── Cards ─────────── */
.card {
  background: var(--bg-1);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-lg);
  padding: var(--pad);
}

.section-title {
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.section-title::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--aether);
  box-shadow: 0 0 8px var(--aether-ring);
  transform: rotate(45deg);
}

/* ─────────── Cross-link entity refs ─────────── */
.ref {
  color: var(--ink-0);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--aether-ring);
  cursor: pointer;
  font: inherit;
  padding: 0 1px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border-radius: 2px;
}
.ref:hover {
  background: var(--aether-soft);
  border-bottom-color: var(--aether);
  color: var(--ink-0);
}
.ref[data-kind="place"]   { border-bottom-color: var(--gold-soft); }
.ref[data-kind="place"]:hover { background: var(--gold-soft); border-bottom-color: var(--gold); }
.ref[data-kind="faction"] { border-bottom-color: var(--violet-soft); }
.ref[data-kind="faction"]:hover { background: var(--violet-soft); border-bottom-color: var(--violet); }
.ref[data-kind="item"]    { border-bottom-color: var(--blood-soft); }
.ref[data-kind="item"]:hover { background: var(--blood-soft); border-bottom-color: var(--blood); }
.ref[data-kind="term"]    { border-bottom-style: dotted; }

/* Popover */
.popover-layer { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
.popover {
  position: absolute;
  pointer-events: auto;
  width: min(340px, 90vw);
  background: var(--bg-raised);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px -10px oklch(0.05 0.03 260 / 0.7),
              0 0 0 1px var(--aether-ring) inset;
  padding: 1rem;
  font-size: 0.88rem;
  animation: popIn 0.15s ease-out;
}
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.popover-kind { font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--aether); margin-bottom: 0.35rem; }
.popover-name { font-family: var(--f-display); font-size: 1.3rem; color: var(--ink-0); margin-bottom: 0.25rem; }
.popover-alt  { font-size: 0.8rem; color: var(--ink-3); font-style: italic; margin-bottom: 0.6rem; }
.popover-body { color: var(--ink-1); }
.popover-facts { list-style: none; padding: 0; margin: 0.6rem 0 0; font-size: 0.78rem; }
.popover-facts li { display: grid; grid-template-columns: 90px 1fr; gap: 0.5rem; padding: 0.2rem 0; border-top: 1px solid var(--edge-soft); color: var(--ink-2); }
.popover-facts li:first-child { border-top: 0; }
.popover-facts .k { color: var(--ink-3); font-family: var(--f-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; }
.popover-cta {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--f-body);
  font-size: 0.78rem;
  color: var(--aether);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--aether-ring);
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
}
.popover-cta:hover { background: var(--aether-soft); }

/* ─────────── Status pill ─────────── */
.pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--edge);
  border-radius: 2px;
  color: var(--ink-2);
  background: var(--bg-2);
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.pill[data-status="active"]::before, .pill[data-status="ally"]::before { background: var(--green); box-shadow: 0 0 6px var(--green); }
.pill[data-status="hostile"]::before { background: var(--blood); box-shadow: 0 0 6px var(--blood); }
.pill[data-status="dead"]::before { background: var(--ink-4); }
.pill[data-status="unknown"]::before { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.pill[data-urgency="high"] { color: var(--blood); border-color: var(--blood-soft); }
.pill[data-urgency="medium"] { color: var(--gold); border-color: var(--gold-soft); }
.pill[data-urgency="low"] { color: var(--ink-3); }

/* ─────────── Scrollbars ─────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--aether-ring); }

/* ─────────── Utilities ─────────── */
.mono { font-family: var(--f-mono); }
.display { font-family: var(--f-display); }
.muted { color: var(--ink-3); }
.tiny  { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.rule { border-top: 1px solid var(--rule); }
.row  { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.stack-s > * + * { margin-top: 0.4rem; }
.stack-m > * + * { margin-top: 0.9rem; }
.stack-l > * + * { margin-top: 1.6rem; }

.grid { display: grid; gap: var(--gap); }
@media (min-width: 700px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ─────────── Hero ─────────── */
.hero {
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 85% 10%, var(--aether-soft), transparent 40%),
    radial-gradient(circle at 10% 90%, var(--gold-soft), transparent 40%),
    var(--bg-1);
  position: relative;
  overflow: hidden;
}
.hero-eyebrow { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.3em; color: var(--aether); text-transform: uppercase; }
.hero-title { font-family: var(--f-display); font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1; margin: 0.3rem 0 0.6rem; color: var(--ink-0); font-weight: 500; }
.hero-sub { color: var(--ink-2); max-width: 640px; font-size: 1.05rem; }
.hero-strip { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 2rem; }
.hero-stat { padding: 0.85rem 0; border-top: 1px solid var(--rule); }
.hero-stat-k { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.25rem; }
.hero-stat-v { color: var(--ink-0); font-size: 1rem; font-family: var(--f-display); }

/* ─────────── Broadsheet / Recaps ─────────── */
.broadsheet {
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--bg-1);
}
.broadsheet-masthead {
  text-align: center;
  border-bottom: 3px double var(--rule);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}
.broadsheet-latin { font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.3em; color: var(--ink-3); text-transform: uppercase; }
.broadsheet-name {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  color: var(--ink-0);
  font-weight: 500;
  margin: 0.35rem 0;
  letter-spacing: 0.01em;
}
.broadsheet-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
  border-top: 1px solid var(--rule); padding-top: 0.6rem; flex-wrap: wrap; gap: 0.5rem;
}
.broadsheet-columns {
  column-count: 1;
  column-gap: 2rem;
  column-rule: 1px solid var(--rule);
}
@media (min-width: 800px) { .broadsheet-columns { column-count: 2; } }

.bs-article { break-inside: avoid; margin-bottom: 1.6rem; display: inline-block; width: 100%; }
.bs-kicker { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--aether); margin-bottom: 0.3rem; }
.bs-headline { font-family: var(--f-display); color: var(--ink-0); font-size: 1.55rem; line-height: 1.1; margin: 0 0 0.4rem; font-weight: 500; }
.bs-subhead { color: var(--ink-2); font-style: italic; margin-bottom: 0.6rem; font-size: 0.95rem; }
.bs-body { color: var(--ink-1); font-size: 0.95rem; line-height: 1.6; }
.bs-body p:first-child::first-letter {
  font-family: var(--f-display);
  font-size: 3.2em;
  line-height: 0.8;
  float: left;
  padding: 0.1em 0.1em 0 0;
  color: var(--aether);
}
.bs-pull {
  margin: 1rem 0;
  padding: 0.75rem 1rem 0.75rem 2.2rem;
  background: var(--aether-soft);
  border: 1px solid var(--aether-ring);
  border-radius: var(--radius);
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink-0);
  line-height: 1.35;
  position: relative;
}
.bs-pull::before {
  content: "\201C";
  position: absolute;
  left: 0.5rem;
  top: 0.35rem;
  font-family: var(--f-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--aether);
  font-style: normal;
}
.bs-pull-credit { display: block; margin-top: 0.3rem; font-size: 0.75rem; font-style: normal; color: var(--ink-3); font-family: var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; }

/* ─────────── Session notes (prose) ─────────── */
.notes-toc {
  font-size: 0.85rem;
  margin-bottom: 1.5rem; /* Adds breathing room on mobile */
}

/* Only make the TOC sticky when the layout is side-by-side (desktop) */
@media (min-width: 960px) {
  .notes-toc {
    position: sticky;
    top: 6.5rem;
    align-self: start;
    margin-bottom: 0;
  }
}
.notes-toc ol { list-style: none; padding: 0; margin: 0; }
.notes-toc li { margin: 0.3rem 0; }
.notes-toc a { color: var(--ink-2); display: flex; align-items: baseline; gap: 0.45rem; padding: 0.25rem 0.5rem; border-radius: var(--radius); }
.notes-toc a::before { content: "◆"; font-size: 0.45rem; flex-shrink: 0; color: var(--edge); transition: color 0.15s; transform: translateY(-0.1em); }
.notes-toc a:hover, .notes-toc a.active { color: var(--ink-0); background: var(--aether-soft); }
.notes-toc a:hover::before, .notes-toc a.active::before { color: var(--aether); }

.prose {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-1);
}
.prose h2 { margin: 2.2rem 0 0.6rem; }
.prose h3 { margin: 1.6rem 0 0.4rem; color: var(--ink-0); font-family: var(--f-display); font-size: 1.3rem; }
.prose p  { margin: 0 0 1em; }
.prose blockquote { border-left: 2px solid var(--aether); margin: 1rem 0; padding: 0.3rem 0 0.3rem 1rem; font-style: italic; color: var(--ink-1); }
.prose .beat-meta { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.6rem; }

.notes-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 960px) { .notes-layout { grid-template-columns: 220px 1fr; } }

.session-header {
  border-top: 3px double var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0;
  margin: 2.5rem 0 1.5rem;
}
.session-header:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.session-num { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.28em; color: var(--aether); text-transform: uppercase; }
.session-title { font-family: var(--f-display); font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--ink-0); margin: 0.25rem 0; font-weight: 500; }
.session-meta { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ─────────── Timeline ─────────── */
.timeline-scroll { position: relative; padding-left: 1.4rem; }
.timeline-scroll::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(var(--aether-ring), var(--rule), var(--aether-ring));
}
.tl-cluster { margin-bottom: 2.5rem; position: relative; }
.tl-cluster-header { margin-bottom: 1rem; }
.tl-cluster-num { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.22em; color: var(--aether); text-transform: uppercase; }
.tl-cluster-title { font-family: var(--f-display); font-size: 1.4rem; color: var(--ink-0); margin: 0.2rem 0 0.1rem; }
.tl-cluster-when  { font-size: 0.8rem; color: var(--ink-3); font-family: var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; }

.tl-event {
  position: relative;
  padding: 0.5rem 0 1rem 1.4rem;
}
.tl-event::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.9rem;
  width: 11px;
  height: 11px;
  background: var(--bg-0);
  border: 2px solid var(--aether);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--aether-ring);
}
.tl-event-title { font-family: var(--f-display); color: var(--ink-0); font-size: 1.05rem; margin-bottom: 0.15rem; }
.tl-event-loc { font-size: 0.72rem; color: var(--ink-3); font-family: var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.4rem; }
.tl-event-body { color: var(--ink-1); font-size: 0.92rem; line-height: 1.55; }

/* ─────────── Compendium grid ─────────── */
.cmp-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; align-items: center; }
.cmp-tabs { display: flex; gap: 0.25rem; background: var(--bg-1); border: 1px solid var(--edge-soft); border-radius: var(--radius); padding: 0.2rem; }
.cmp-tab {
  background: transparent; border: 0; color: var(--ink-2);
  font-family: var(--f-body); font-size: 0.85rem;
  padding: 0.4rem 0.9rem; border-radius: 3px;
  cursor: pointer;
  display: flex; align-items: center; gap: 0.4rem;
}
.cmp-tab:hover { color: var(--ink-0); }
.cmp-tab[aria-selected="true"] { background: var(--bg-2); color: var(--ink-0); }
.cmp-search {
  flex: 1; min-width: 200px;
  background: var(--bg-1); border: 1px solid var(--edge-soft); color: var(--ink-1);
  padding: 0.5rem 0.75rem; border-radius: var(--radius);
  font-family: var(--f-body); font-size: 0.9rem;
}
.cmp-search:focus { outline: none; border-color: var(--aether-ring); box-shadow: 0 0 0 2px var(--aether-soft); }

.dossier-card {
  background: var(--bg-1);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-lg);
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.dossier-card:hover {
  border-color: var(--aether-ring);
  transform: translateY(-2px);
  background: var(--bg-raised);
}
.dossier-portrait {
  width: 100%;
  aspect-ratio: 1;
  background:
    repeating-linear-gradient(45deg, var(--bg-2) 0 8px, var(--bg-1) 8px 16px);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 3rem;
  color: var(--ink-0);
  position: relative;
  overflow: hidden;
}
.dossier-portrait::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--edge-soft);
  border-radius: 2px;
}
.dossier-portrait .sigil {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 20px var(--aether-ring);
}
.dossier-name { font-family: var(--f-display); font-size: 1.1rem; color: var(--ink-0); line-height: 1.1; }
.dossier-role { font-size: 0.78rem; color: var(--ink-2); line-height: 1.4; }

/* Dossier full page */
.dossier-back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 1rem;
}
.dossier-back:hover { color: var(--ink-0); }

.dossier-page { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .dossier-page { grid-template-columns: 280px 1fr; } }

.dossier-header h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 0.3rem; }
.dossier-alt { color: var(--ink-3); font-style: italic; font-size: 1.1rem; margin-bottom: 0.6rem; font-family: var(--f-display); }
.dossier-role-big { color: var(--ink-2); font-size: 1rem; margin-bottom: 1.2rem; }

.dossier-side .dossier-portrait { font-size: 5rem; }
.dossier-facts {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  border-top: 1px solid var(--rule);
}
.dossier-facts li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--edge-soft);
}
@media (min-width: 500px) { .dossier-facts li { grid-template-columns: 110px 1fr; gap: 0.6rem; } }
.dossier-facts .k { font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.15rem; }
.dossier-facts .v { color: var(--ink-1); font-size: 0.92rem; }

.dossier-prose { font-size: 1rem; line-height: 1.75; color: var(--ink-1); }
.dossier-prose p { margin-bottom: 1em; }

.relgraph {
  margin-top: 1.5rem;
  background: var(--bg-0);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-lg);
  padding: 1rem;
}
.relgraph-title { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.8rem; }
.relgraph svg { display: block; width: 100%; height: auto; overflow: visible; }
.relgraph-node-inner { cursor: pointer; transition: filter 0.25s ease; }
.relgraph-node-inner:hover { filter: drop-shadow(0 0 10px rgba(192,132,255,.7)); }
.relgraph-node-inner:hover .relgraph-node-ring { stroke: rgba(192,132,255,.85) !important; stroke-width: 2 !important; }
.relgraph-edge { stroke: var(--edge); fill: none; }
.relgraph-edge-label text { font-family: var(--f-mono); fill: var(--gold); letter-spacing: 0.09em; text-transform: uppercase; pointer-events: none; paint-order: stroke; stroke: rgba(13,11,18,.9); stroke-width: 3px; stroke-linejoin: round; }
.relgraph-node-label { font-family: var(--f-display); fill: var(--ink-0); font-weight: 600; letter-spacing: 0.02em; }
.relgraph-node-caption { font-family: var(--f-mono); fill: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; }

@keyframes relNodeIn {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes relEdgeFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes relLabelFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes relGlowPulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 0.85; }
}

/* Relationship list (fallback / supplement) */
.rel-list { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.4rem; }
.rel-list li {
  display: flex; justify-content: space-between; gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  background: var(--bg-2);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.rel-list .rel-who { color: var(--ink-0); }
.rel-list .rel-note { color: var(--ink-3); font-size: 0.78rem; }

/* ─────────── Hooks ─────────── */
.hooks-lanes { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hooks-lanes { grid-template-columns: repeat(3, 1fr); } }

.lane {
  background: var(--bg-1);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-lg);
  padding: 1rem;
}
.lane[data-lane="active"]    { border-top: 3px solid var(--blood); }
.lane[data-lane="whispered"] { border-top: 3px solid var(--gold); }
.lane[data-lane="completed"] { border-top: 3px solid var(--green); }

.lane-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.8rem; }
.lane-title { font-family: var(--f-display); font-size: 1.35rem; color: var(--ink-0); }
.lane-count { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.18em; }

.hook {
  background: var(--bg-2);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius);
  padding: 0.85rem;
  margin-bottom: 0.6rem;
}
.hook-title { font-family: var(--f-display); font-size: 1.05rem; color: var(--ink-0); line-height: 1.2; margin-bottom: 0.3rem; }
.hook-body { font-size: 0.85rem; color: var(--ink-1); line-height: 1.55; }
.hook-tags { margin-top: 0.55rem; display: flex; flex-wrap: wrap; gap: 0.38rem; }
.hook-tag {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.42rem 0.68rem;
  border: 1px solid var(--edge);
  border-radius: 4px;
  color: var(--ink-2);
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-2) 88%, var(--aether-ring) 12%), color-mix(in oklab, var(--bg-1) 92%, black 8%));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--edge-soft) 75%, transparent 25%), 0 0 0 1px transparent;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hook-tag:hover {
  color: var(--ink-0);
  border-color: color-mix(in oklab, var(--aether-ring) 72%, var(--edge) 28%);
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-2) 82%, var(--aether-ring) 18%), color-mix(in oklab, var(--bg-1) 86%, var(--aether-ring) 14%));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--aether-ring) 24%, transparent 76%), 0 0 0 1px color-mix(in oklab, var(--aether-ring) 16%, transparent 84%);
}
.hook-tag:focus-visible {
  outline: none;
  border-color: var(--aether-ring);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--aether-ring) 24%, transparent 76%), 0 0 0 2px color-mix(in oklab, var(--aether-ring) 22%, transparent 78%);
}
.hook-tag:active { transform: translateY(1px); }

.lane[data-lane="completed"] .hook-title { text-decoration: line-through; text-decoration-color: var(--ink-4); text-decoration-thickness: 1px; color: var(--ink-2); }

/* ─────────── Cmd-K palette ─────────── */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: oklch(0.08 0.02 260 / 0.75);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: start center;
  padding-top: 10vh;
}
.cmdk {
  width: min(640px, 92vw);
  background: var(--bg-1);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -10px oklch(0 0 0 / 0.8), 0 0 0 1px var(--aether-ring) inset;
  overflow: hidden;
}
.cmdk-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--edge-soft);
  color: var(--ink-0);
  padding: 1rem 1.2rem;
  font-family: var(--f-display);
  font-size: 1.25rem;
  outline: none;
}
.cmdk-input::placeholder { color: var(--ink-3); font-family: var(--f-display); }
.cmdk-list {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.5rem;
}
.cmdk-item {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex; align-items: center; gap: 0.8rem;
}
.cmdk-item.active, .cmdk-item:hover { background: var(--bg-2); }
.cmdk-item-kind {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--aether);
  width: 84px;
  flex-shrink: 0;
}
.cmdk-item-name { color: var(--ink-0); font-family: var(--f-display); font-size: 1rem; flex: 1; }
.cmdk-item-hint { color: var(--ink-3); font-size: 0.78rem; display: none; }
@media (min-width: 600px) { .cmdk-item-hint { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.cmdk-empty { color: var(--ink-3); padding: 2rem; text-align: center; font-style: italic; }
.cmdk-footer {
  display: flex; justify-content: space-between;
  padding: 0.5rem 0.9rem;
  border-top: 1px solid var(--edge-soft);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-0);
}

/* ─────────── Tweaks panel ─────────── */
.tweaks {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 60;
  width: 280px;
  max-width: calc(100vw - 2rem);
  background: var(--bg-raised);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px -10px oklch(0.05 0 0 / 0.7);
  padding: 1rem;
}
.tweaks-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.8rem;
}
.tweaks-title { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink-0); }
.tweaks-x { background: transparent; border: 0; color: var(--ink-3); cursor: pointer; font-size: 1.2rem; }
.tweaks-group { margin-bottom: 0.9rem; }
.tweaks-label { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.35rem; display: block; }
.tweaks-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem; }
.tweaks-opt {
  background: var(--bg-1);
  border: 1px solid var(--edge-soft);
  color: var(--ink-2);
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius);
  font-family: var(--f-body);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
}
.tweaks-opt:hover { color: var(--ink-0); border-color: var(--aether-ring); }
.tweaks-opt[aria-selected="true"] { background: var(--aether-soft); border-color: var(--aether); color: var(--ink-0); }

@media (max-width: 560px) {
  .tweaks { bottom: 0.6rem; right: 0.6rem; left: 0.6rem; width: auto; }
  .header-inner { padding: 0.65rem 0.9rem; gap: 0.6rem; }
  .search-btn { min-width: 0; padding: 0.4rem 0.6rem; }
  .search-btn .search-label { display: none; }
  .brand { font-size: 1.1rem; }
  .brand-sub { display: none; }
  .tabs { top: 54px; }
  .tab-btn { padding: 0.7rem 0.75rem; font-size: 0.95rem; }
  main { padding: 1.25rem 0 3rem; }
}

/* ─────────── iOS safe-area ─────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  main { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
  @media (max-width: 560px) {
    main { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }
  }
}

/* ─────────── Tab overflow fade cue — right-edge only ─────────── */
.tabs-inner {
  position: relative;
}

/* ─────────── Mobile: popover full-width bottom sheet ─────────── */
@keyframes mobileSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (max-width: 560px) {
  .popover {
    position: fixed !important;
    bottom: env(safe-area-inset-bottom, 0);
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: mobileSlideUp 0.2s ease-out both;
  }
}

/* ─────────── Entrance animations ─────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmerPulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}
@keyframes crystalSpin {
  from { transform: rotate(45deg) scale(1); }
  50%  { transform: rotate(45deg) scale(1.25); }
  to   { transform: rotate(45deg) scale(1); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px var(--aether-ring); }
  50%       { box-shadow: 0 0 18px var(--aether); }
}

/* Animate section-title diamond */
.section-title::before {
  animation: glowPulse 3s ease-in-out infinite;
}

/* Hero entrance */
.hero {
  animation: fadeSlideUp 0.45s ease-out both;
}

/* Cards staggered entrance via CSS counter trick */
.grid > * {
  animation: fadeSlideUp 0.38s ease-out both;
}
.grid > *:nth-child(1)  { animation-delay: 0.04s; }
.grid > *:nth-child(2)  { animation-delay: 0.09s; }
.grid > *:nth-child(3)  { animation-delay: 0.14s; }
.grid > *:nth-child(4)  { animation-delay: 0.19s; }
.grid > *:nth-child(5)  { animation-delay: 0.24s; }
.grid > *:nth-child(6)  { animation-delay: 0.28s; }
.grid > *:nth-child(7)  { animation-delay: 0.32s; }
.grid > *:nth-child(8)  { animation-delay: 0.36s; }
.grid > *:nth-child(n+9) { animation-delay: 0.38s; }

/* Card hover lift */
.card, .dossier-card-text, .hook, .lane {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover, .dossier-card-text:hover {
  border-color: var(--edge);
  box-shadow: 0 6px 24px -6px oklch(0 0 0 / 0.35);
  transform: translateY(-2px);
}

/* Session/scene accordion hover enhancement */
.session-shell {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.session-shell:hover {
  border-color: var(--edge);
  box-shadow: 0 4px 16px -4px oklch(0 0 0 / 0.25);
}

/* Hooks entrance */
.hooks-lanes {
  animation: fadeIn 0.3s ease-out both;
}
.hook {
  animation: fadeSlideUp 0.3s ease-out both;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.hook:hover {
  border-color: var(--edge);
  box-shadow: 0 4px 14px -4px oklch(0 0 0 / 0.3);
  transform: translateY(-1px);
}

/* Tab content fade */
main > div, main > .container {
  animation: fadeIn 0.22s ease-out both;
}

/* Pill status dot pulse for active */
.pill[data-status="active"]::before {
  animation: shimmerPulse 2.4s ease-in-out infinite;
}

/* ─────────── Mobile: hero layout ─────────── */
@media (max-width: 640px) {
  .hero-strip {
    grid-template-columns: 1fr 1fr;
  }
  .hero h1 {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }
  .hero-sub {
    font-size: 0.95rem;
  }
}

/* ─────────── Mobile: relationship graph scroll ─────────── */
.relgraph {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.relgraph svg {
  min-width: 400px;
}

/* ─────────── Mobile: search bar touch target ─────────── */
@media (max-width: 560px) {
  .search-btn {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    border-radius: 8px;
  }
}

/* ─────────── Mobile: dossier cards full-width ─────────── */
@media (max-width: 699px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────── Mobile: hooks lanes single column ─────────── */
@media (max-width: 640px) {
  .hooks-lanes {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────── Mobile: notes accordion content ─────────── */
@media (max-width: 560px) {
  .session-body-wrap {
    padding: 0 0.8rem 0.9rem;
  }
  .scene-body2 {
    padding: 0 0.7rem 0.9rem;
  }
}


/* ─────────── Respect prefers-reduced-motion ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Impeccable animate pass: subtle codex-wide motion */
:root {
  --motion-fast: 140ms;
  --motion-med: 240ms;
  --motion-slow: 520ms;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes codexDriftIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes codexAura {
  0%, 100% { opacity: .34; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: .48; transform: translate3d(0, -4px, 0) scale(1.018); }
}

@keyframes sigilBreath {
  0%, 100% { filter: drop-shadow(0 0 10px color-mix(in oklab, var(--aether-ring) 65%, transparent)); }
  50% { filter: drop-shadow(0 0 18px color-mix(in oklab, var(--aether) 34%, transparent)); }
}

@keyframes activeRune {
  from { transform: scaleX(.4); opacity: .42; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes activeTabPointer {
  from { transform: translateX(-50%) scaleX(.45); opacity: .42; }
  to { transform: translateX(-50%) scaleX(1); opacity: 1; }
}

.page-head,
.blood-frame,
.card,
.session-shell,
.scene-card,
.mission-column,
.side-stack > * {
  animation: codexDriftIn var(--motion-slow) var(--ease-out-expo) both;
}

.blood-frame:nth-child(2n),
.card:nth-child(2n),
.session-shell:nth-child(2n),
.scene-card:nth-child(2n) {
  animation-delay: 55ms;
}

.blood-frame:nth-child(3n),
.card:nth-child(3n),
.session-shell:nth-child(3n),
.scene-card:nth-child(3n) {
  animation-delay: 95ms;
}

.shell::before,
.shell::after {
  animation: codexAura 9s var(--ease-out-quart) infinite;
}

.shell::after {
  animation-delay: -3.5s;
}

.brand-sigil,
.big-sigil,
.entity-sigil,
.sigil-dot {
  transition: transform var(--motion-med) var(--ease-out-quart), filter var(--motion-med) var(--ease-out-quart);
}

.brand-sigil {
  animation: sigilBreath 5.5s var(--ease-out-quart) infinite;
  display: block;
  mix-blend-mode: screen;
  object-fit: contain;
  object-position: center;
  transform: scale(1.35);
}

.tab-btn[aria-selected="true"]::after,
.cmp-tab[aria-selected="true"]::after {
  animation: activeRune var(--motion-med) var(--ease-out-expo) both;
  transform-origin: center;
}

.search-btn,
.icon-btn,
.cmp-open-link,
.popover-cta,
.dossier-back,
.entity-row,
.filter-row,
.mini-row,
.session-pick,
.quote-button,
.question-button,
.cmp-card,
.cmp-feature,
.timeline-clickable,
.mission-clickable,
.recap-card {
  transition:
    transform var(--motion-fast) var(--ease-out-quart),
    border-color var(--motion-med) var(--ease-out-quart),
    background-color var(--motion-med) var(--ease-out-quart),
    box-shadow var(--motion-med) var(--ease-out-quart),
    color var(--motion-fast) var(--ease-out-quart);
}

.search-btn:hover,
.icon-btn:hover,
.cmp-open-link:hover,
.popover-cta:hover,
.dossier-back:hover,
.entity-row:hover,
.filter-row:hover,
.mini-row:hover,
.session-pick:hover,
.quote-button:hover,
.question-button:hover {
  transform: translate3d(0, -1px, 0);
}

.cmp-card:hover,
.cmp-feature:hover,
.timeline-clickable:hover,
.mission-clickable:hover,
.recap-card:hover {
  transform: translate3d(0, -2px, 0);
}

.search-btn:active,
.icon-btn:active,
.cmp-open-link:active,
.popover-cta:active,
.dossier-back:active,
.entity-row:active,
.filter-row:active,
.mini-row:active,
.session-pick:active,
.cmp-card:active,
.cmp-feature:active,
.timeline-clickable:active,
.mission-clickable:active,
.recap-card:active {
  transform: translate3d(0, 0, 0) scale(.99);
}

.entity-row:hover .entity-sigil,
.mini-row:hover .entity-sigil,
.cmp-card:hover .entity-sigil,
.cmp-feature:hover .big-sigil,
.mission-card:hover .sigil-dot {
  transform: translate3d(0, -1px, 0) scale(1.04);
}

.cmdk-overlay {
  animation: fadeIn 180ms var(--ease-out-quart) both;
}

.cmdk {
  animation: codexDriftIn 280ms var(--ease-out-expo) both;
}

.cmdk-item {
  transition: background-color var(--motion-fast) var(--ease-out-quart), transform var(--motion-fast) var(--ease-out-quart);
}

.cmdk-item.active,
.cmdk-item:hover {
  transform: translate3d(2px, 0, 0);
}

/* Notes accordion upgrade */
.session-shell { margin-bottom: 1.2rem; border: 1px solid var(--edge-soft); border-radius: 14px; background: linear-gradient(180deg, var(--bg-1), var(--bg-raised)); overflow: hidden; }
.session-toggle { width: 100%; background: transparent; color: inherit; border: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.25rem; text-align: left; cursor: pointer; }
.session-toggle:hover { background: color-mix(in oklab, var(--bg-hover) 55%, transparent); }
.session-toggle-icon, .scene-toggle-icon { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid var(--edge); display: grid; place-items: center; color: var(--ink-0); background: var(--bg-2); font-size: 1.1rem; }
.session-body-wrap { padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--rule); }
.notes-recap-block { padding-top: 1rem; }
.notes-scenes { display: grid; gap: 0.9rem; margin-top: 1rem; }
.scene-card { border: 1px solid var(--edge-soft); border-radius: 12px; background: var(--bg-1); overflow: hidden; }
.scene-summary { width: 100%; background: transparent; color: inherit; border: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.05rem; text-align: left; cursor: pointer; }
.scene-summary:hover { background: color-mix(in oklab, var(--bg-hover) 50%, transparent); }
.scene-title2 { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink-0); }
.scene-loc2 { margin-top: 0.3rem; color: var(--ink-2); font-size: 0.88rem; }
.scene-body2 { padding: 0 1.05rem 1rem; border-top: 1px solid var(--edge-soft); }
.scene-atmo-box { margin: 0.9rem 0 1rem; padding: 0.85rem 0.95rem; background: var(--aether-soft); border: 1px solid var(--aether-ring); border-radius: var(--radius); }
.scene-atmo-box p:last-child { margin-bottom: 0; }
.scene-list-block { margin-top: 1rem; }
.scene-list-title { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aether); margin-bottom: 0.45rem; }
.scene-list-block ul { margin: 0; padding-left: 1.2rem; }
.scene-list-block li { margin-bottom: 0.45rem; color: var(--ink-1); }
@media (max-width: 720px) {
  .session-toggle, .scene-summary { padding: 0.95rem; }
  .scene-title2 { font-size: 1rem; }
}


/* Text-centric compendium cards */
.dossier-card-text {
  gap: 0.85rem;
  min-height: 250px;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--bg-1) 88%, transparent), var(--bg-1)),
    radial-gradient(circle at top right, color-mix(in oklab, var(--aether-soft) 55%, transparent) 0, transparent 42%);
}
.dossier-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.dossier-kicker {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aether);
}
.dossier-alt-inline {
  color: var(--ink-3);
  font-style: italic;
  font-size: 0.82rem;
  margin-top: 0.18rem;
}
.dossier-snippet {
  color: var(--ink-1);
  font-size: 0.93rem;
  line-height: 1.7;
  border-top: 1px solid var(--edge-soft);
  padding-top: 0.8rem;
}
.dossier-card-meta {
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--edge-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.dossier-card-text .dossier-role {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Transcript-rich notes */
.transcript-shell {
  margin-top: 1rem;
  background: var(--bg-0);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.transcript-shell summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  padding: 0.95rem 1rem;
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--ink-0);
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--bg-1) 88%, transparent));
}
.transcript-shell summary::-webkit-details-marker { display:none; }
.transcript-meta {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.transcript-note {
  padding: 0.1rem 1rem 0.2rem;
  color: var(--ink-3);
  font-size: 0.84rem;
}
.transcript-raw {
  padding: 0.7rem 1rem 1rem;
  color: var(--ink-1);
  font-size: 0.96rem;
  line-height: 1.82;
  white-space: pre-wrap;
  border-top: 1px solid var(--edge-soft);
  max-height: 70vh;
  overflow: auto;
}
.transcript-raw .ref { font-size: inherit; }


/* ────────────────────────────────────────────────────────────
   Bloodglass Codex Reskin - locked single style
   reshaped after the referenced fractured obsidian dashboards
   ──────────────────────────────────────────────────────────── */
:root, :root[data-theme], :root[data-fonts], :root[data-density] {
  --bg-0: #030406;
  --bg-1: rgba(10, 11, 16, 0.88);
  --bg-2: rgba(18, 18, 26, 0.90);
  --bg-raised: rgba(22, 20, 30, 0.94);
  --bg-hover: rgba(42, 35, 55, 0.78);
  --edge: rgba(198, 177, 145, 0.36);
  --edge-soft: rgba(189, 161, 215, 0.18);
  --rule: rgba(198, 177, 145, 0.23);
  --ink-0: #f2eee8;
  --ink-1: #d7d0c5;
  --ink-2: #a99f95;
  --ink-3: #77717c;
  --ink-4: #54505a;
  --aether: #c084ff;
  --aether-soft: rgba(192, 132, 255, 0.14);
  --aether-ring: rgba(216, 168, 255, 0.42);
  --gold: #d8c092;
  --gold-soft: rgba(216, 192, 146, 0.16);
  --blood: #a64956;
  --blood-soft: rgba(166, 73, 86, 0.18);
  --violet: #a78bfa;
  --violet-soft: rgba(167, 139, 250, 0.16);
  --green: #8fbd9b;
  --green-soft: rgba(143, 189, 155, 0.16);
  --f-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --f-body: "EB Garamond", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --content-w: 1400px;
  --pad: 1.05rem;
  --gap: 1.05rem;
  --radius: 2px;
  --radius-lg: 3px;
  --density-scale: 1;
}

html {
  background: #030406;
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at 82% 8%, rgba(192,132,255,.16), transparent 18rem),
    radial-gradient(circle at 18% 14%, rgba(216,192,146,.10), transparent 19rem),
    linear-gradient(110deg, rgba(255,255,255,.045) 0 1px, transparent 1px 23%),
    linear-gradient(152deg, rgba(192,132,255,.052) 0 1px, transparent 1px 19%),
    #030406;
  font-size: 15px;
  letter-spacing: .01em;
}

body::before {
  opacity: .85;
  background-image:
    linear-gradient(72deg, transparent 0 18%, rgba(216,192,146,.18) 18.1%, transparent 18.25% 100%),
    linear-gradient(132deg, transparent 0 42%, rgba(192,132,255,.18) 42.1%, transparent 42.25% 100%),
    linear-gradient(28deg, transparent 0 68%, rgba(216,192,146,.12) 68.1%, transparent 68.25% 100%),
    radial-gradient(circle at 50% 50%, rgba(192,132,255,.07), transparent 34%);
  background-size: 780px 520px, 860px 620px, 720px 500px, 100% 100%;
  mix-blend-mode: screen;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.035), transparent 11rem),
    radial-gradient(circle at 50% -12rem, rgba(216,192,146,.16), transparent 24rem),
    linear-gradient(to bottom, transparent, rgba(0,0,0,.42));
  z-index: 0;
}

.shell { z-index: 1; }
.container { max-width: var(--content-w); padding-inline: clamp(.9rem, 1.6vw, 1.6rem); }

.header {
  background: rgba(3,4,6,.76);
  border-bottom: 1px solid rgba(216,192,146,.23);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 10px 30px rgba(0,0,0,.38), inset 0 -1px 0 rgba(192,132,255,.08);
}
.header-inner {
  max-width: var(--content-w);
  min-height: 78px;
  padding: .75rem clamp(.9rem, 1.6vw, 1.6rem);
  gap: 1rem;
}
.brand {
  gap: .8rem;
  min-width: 280px;
}
.brand-wordmark {
  width: 14.6rem;
}
.brand-title {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: .9;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(192,132,255,.18);
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.brand-sub {
  display: block;
  margin: .18rem 0 0;
  color: var(--gold);
  letter-spacing: .24em;
  width: 100%;
}
.brand-sigil { width: 46px; height: 46px; filter: drop-shadow(0 0 20px rgba(192,132,255,.45)); }
.header-spacer { flex: .4; }

.search-btn {
  min-width: min(360px, 30vw);
  background: rgba(3,4,6,.72);
  border-color: rgba(216,192,146,.22);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(192,132,255,.05), 0 0 18px rgba(192,132,255,.05);
  font-family: var(--f-display);
  font-size: 1rem;
}
.search-btn:hover { border-color: rgba(192,132,255,.5); box-shadow: 0 0 20px rgba(192,132,255,.12); }

.tabs {
  top: 78px;
  background: rgba(3,4,6,.68);
  border-bottom: 1px solid rgba(192,132,255,.12);
  backdrop-filter: blur(14px);
}
.tabs-inner { max-width: var(--content-w); justify-content: center; gap: .1rem; }
.tab-btn {
  min-width: 150px;
  justify-content: center;
  padding: .88rem 1.15rem;
  border: 1px solid rgba(216,192,146,.14);
  border-top: 0;
  border-bottom-color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
  color: rgba(215,208,197,.74);
  font-size: 1.05rem;
  letter-spacing: .04em;
}
.tab-btn[aria-selected="true"] {
  color: var(--ink-0);
  border-color: rgba(216,192,146,.33);
  border-bottom-color: var(--gold);
  background:
    radial-gradient(circle at 50% 100%, rgba(216,192,146,.25), transparent 40%),
    linear-gradient(180deg, rgba(192,132,255,.12), rgba(255,255,255,0));
  text-shadow: 0 0 18px rgba(216,192,146,.28);
}
main { padding: clamp(1.1rem, 2vw, 2rem) 0 3.5rem; }

/* Universal fractured panels */
.blood-frame, .card, .lane, .hook, .broadsheet, .scene-card, .session-shell, .dossier-card, .dossier-card-text, .relgraph, .cmdk, .popover, .transcript-shell {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 18%),
    linear-gradient(180deg, rgba(18,18,26,.92), rgba(5,6,10,.95));
  border: 1px solid rgba(216,192,146,.23);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(192,132,255,.06),
    inset 0 0 36px rgba(192,132,255,.035),
    0 18px 45px rgba(0,0,0,.28);
}
.blood-frame::before, .card::before, .lane::before, .hook::before, .scene-card::before, .session-shell::before, .dossier-card-text::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(122deg, transparent 0 38%, rgba(192,132,255,.13) 38.15%, transparent 38.45% 100%),
    linear-gradient(28deg, transparent 0 71%, rgba(216,192,146,.11) 71.1%, transparent 71.35% 100%);
  opacity: .72;
}
.blood-frame::after, .card::after, .lane::after, .hook::after, .scene-card::after, .session-shell::after, .dossier-card-text::after {
  content: "✦";
  position: absolute;
  top: -9px;
  right: 12px;
  font-family: var(--f-display);
  color: rgba(192,132,255,.65);
  text-shadow: 0 0 14px rgba(192,132,255,.7);
  pointer-events: none;
}

.section-title {
  color: var(--gold);
  letter-spacing: .22em;
  margin-bottom: .75rem;
}
.section-title::before {
  width: 9px;
  height: 9px;
  border: 1px solid var(--gold);
  background: rgba(192,132,255,.23);
  box-shadow: 0 0 18px rgba(192,132,255,.5);
}

.page-head {
  text-align: center;
  padding: .35rem 0 1.2rem;
  position: relative;
}
.page-head::after {
  content: "";
  display: block;
  width: min(680px, 72%);
  height: 1px;
  margin: .9rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(216,192,146,.35), rgba(192,132,255,.42), rgba(216,192,146,.35), transparent);
  box-shadow: 0 0 18px rgba(192,132,255,.25);
}
.page-kicker {
  color: var(--gold);
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.page-title {
  font-size: clamp(3rem, 6vw, 6.2rem);
  line-height: .85;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e9e3db;
  text-shadow: 0 0 26px rgba(255,255,255,.10), 0 0 40px rgba(192,132,255,.14);
}
.page-subtitle {
  display: none;
  color: rgba(215,208,197,.76);
  font-size: 1.1rem;
  letter-spacing: .08em;
  margin-top: .55rem;
}

.blood-page {
  display: grid;
  grid-template-columns: minmax(230px, .75fr) minmax(0, 2.65fr) minmax(260px, .88fr);
  gap: clamp(.8rem, 1.25vw, 1.25rem);
  align-items: start;
}
.codex-main { min-width: 0; }
.side-stack { display: grid; gap: 1rem; position: sticky; top: 148px; }
.side-panel { padding: 1rem; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-bottom: .62rem;
  margin-bottom: .65rem;
  border-bottom: 1px solid rgba(216,192,146,.18);
}
.panel-title {
  font-family: var(--f-display);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 1rem;
}
.panel-action { color: var(--ink-3); font-size: .82rem; }

.filter-list, .mini-list, .entity-list, .quote-list { display: grid; gap: .45rem; }
.filter-row, .mini-row, .entity-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .7rem;
  align-items: center;
  padding: .5rem .55rem;
  border: 1px solid rgba(216,192,146,.12);
  background: rgba(255,255,255,.018);
}
.filter-row:hover, .mini-row:hover, .entity-row:hover { border-color: rgba(192,132,255,.32); background: rgba(192,132,255,.055); }
.sigil-dot, .entity-sigil, .big-sigil {
  display: grid;
  place-items: center;
  border: 1px solid rgba(216,192,146,.32);
  background:
    radial-gradient(circle, rgba(192,132,255,.16), transparent 60%),
    rgba(3,4,6,.6);
  color: var(--ink-0);
  box-shadow: inset 0 0 18px rgba(192,132,255,.08), 0 0 18px rgba(192,132,255,.09);
  font-family: var(--f-display);
}
.sigil-dot { width: 26px; height: 26px; transform: rotate(45deg); }
.sigil-dot span { transform: rotate(-45deg); }
.entity-sigil { width: 38px; height: 38px; border-radius: 50%; font-size: 1rem; }
.big-sigil { width: min(240px, 100%); aspect-ratio: 1; border-radius: 50%; font-size: clamp(3rem, 9vw, 6rem); margin-inline: auto; }
.row-title { color: var(--ink-0); line-height: 1.1; }
.row-sub { color: var(--ink-3); font-size: .82rem; line-height: 1.25; }
.row-count, .metric { color: var(--gold); font-family: var(--f-mono); font-size: .75rem; }

/* Recaps */
.recap-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: 1rem;
  color: var(--ink-2);
}
.recap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}
.recap-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1rem;
  padding: .78rem;
  min-height: 156px;
  cursor: pointer;
  overflow: hidden;
}
.recap-art, .hook-art, .place-art {
  min-height: 128px;
  border: 1px solid rgba(216,192,146,.18);
  background:
    radial-gradient(circle at 48% 44%, rgba(192,132,255,.32), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(216,192,146,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 30%),
    rgba(5,6,10,.72);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.recap-art::before, .hook-art::before, .place-art::before {
  content: "";
  width: 58%;
  aspect-ratio: 1;
  border: 1px solid rgba(216,192,146,.42);
  transform: rotate(45deg);
  box-shadow: 0 0 32px rgba(192,132,255,.22), inset 0 0 20px rgba(192,132,255,.08);
}
.recap-art span, .hook-art span, .place-art span { position: absolute; font-size: 2.2rem; color: rgba(242,238,232,.88); text-shadow: 0 0 24px rgba(192,132,255,.55); }
.recap-meta { color: var(--gold); font-family: var(--f-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
.recap-title { font-size: 1.55rem; color: var(--ink-0); line-height: 1; margin: .1rem 0 .35rem; }
.recap-text { color: var(--ink-1); line-height: 1.42; font-size: .98rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chip-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }
.chip, .hook-tag, .cmp-tab, .pill {
  border-radius: 2px;
  border-color: rgba(216,192,146,.2);
  background: rgba(3,4,6,.42);
  color: var(--ink-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .45rem;
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(216,192,146,.16);
}
.resonance-bar {
  height: 7px;
  border: 1px solid rgba(216,192,146,.16);
  background: rgba(255,255,255,.035);
  margin-top: .7rem;
  overflow: hidden;
}
.resonance-bar span { display: block; height: 100%; background: linear-gradient(90deg, rgba(216,192,146,.55), rgba(192,132,255,.86)); box-shadow: 0 0 16px rgba(192,132,255,.45); }
.question-row, .quote-row { padding: .62rem .65rem; border-bottom: 1px solid rgba(216,192,146,.13); color: var(--ink-1); }
.question-row:last-child, .quote-row:last-child { border-bottom: 0; }
.quote-row { font-style: italic; color: var(--ink-2); }
.quote-credit { display: block; margin-top: .25rem; color: var(--gold); font-style: normal; font-size: .78rem; }

/* Notes */
.notes-page { grid-template-columns: minmax(240px, .72fr) minmax(0, 2.6fr) minmax(270px, .88fr); }
.session-pick {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .65rem;
  align-items: center;
  border: 1px solid rgba(216,192,146,.14);
  background: rgba(255,255,255,.018);
  color: inherit;
  padding: .62rem;
  margin-bottom: .45rem;
  cursor: pointer;
  font-family: var(--f-body);
}
.session-pick[aria-selected="true"] { border-color: rgba(192,132,255,.48); background: rgba(192,132,255,.10); box-shadow: inset 0 0 22px rgba(192,132,255,.06); }
.scene-timeline { display: grid; gap: .75rem; }
.scene-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: .85rem;
  padding: .85rem;
}
.scene-num {
  min-height: 74px;
  border-right: 1px solid rgba(216,192,146,.22);
  color: var(--gold);
  font-family: var(--f-display);
  font-size: 2rem;
  display: grid;
  align-content: center;
  justify-items: center;
}
.scene-title { color: var(--ink-0); font-size: 1.55rem; line-height: 1; text-transform: uppercase; letter-spacing: .07em; }
.scene-loc { color: var(--aether); font-family: var(--f-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; margin: .25rem 0 .55rem; }
.scene-copy p { margin: 0 0 .75rem; color: var(--ink-1); line-height: 1.58; }
.scene-bullets { margin-top: .6rem; display: grid; gap: .45rem; }
.scene-bullet { display: grid; grid-template-columns: auto 1fr; gap: .5rem; color: var(--ink-2); }
.scene-bullet::before { content: "✦"; color: var(--gold); }
.transcript-shell summary { font-size: 1rem; color: var(--gold); }
.transcript-raw { font-size: 1rem; line-height: 1.7; }

/* Timeline */
.timeline-page { grid-template-columns: minmax(250px, .78fr) minmax(0, 2.6fr) minmax(300px, .92fr); }
.timeline-switch { display: inline-flex; border: 1px solid rgba(216,192,146,.2); margin: .2rem auto 1rem; padding: .18rem; background: rgba(5,6,10,.5); }
.timeline-switch button { background: transparent; color: var(--ink-2); border: 0; padding: .45rem 1.5rem; font-family: var(--f-display); cursor: default; }
.timeline-switch button:first-child { background: rgba(216,192,146,.12); color: var(--ink-0); }
.timeline-ribbon {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  padding: 2rem 0 1rem;
}
.timeline-ribbon::before {
  content: "";
  position: absolute;
  left: 4%; right: 4%; top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(216,192,146,.42), rgba(192,132,255,.58), transparent);
  box-shadow: 0 0 24px rgba(192,132,255,.32);
}
.timeline-card {
  padding: .9rem;
  min-height: 220px;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: .55rem;
}
.timeline-card .sigil-dot { margin: 0 auto .35rem; width: 52px; height: 52px; font-size: 1.35rem; }
.timeline-index { font-family: var(--f-mono); color: var(--gold); font-size: .75rem; letter-spacing: .15em; }
.timeline-title { text-align: center; color: var(--ink-0); font-size: 1.15rem; text-transform: uppercase; line-height: 1.05; letter-spacing: .07em; }
.timeline-body { text-align: center; color: var(--ink-2); line-height: 1.35; }
.timeline-date { margin-top: auto; color: var(--ink-3); font-family: var(--f-mono); font-size: .68rem; text-align: center; }
.legend-row { display: none; }
.legend-item { color: var(--ink-2); font-size: .88rem; }
.legend-item::before { content: "✦"; color: var(--aether); margin-right: .4rem; }

/* Timeline v2: golden vertical event spine */
.timeline-spine {
  position: relative;
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.8rem);
  padding: 0 0 clamp(2rem, 4vw, 3.5rem);
}
.timeline-spine::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, transparent, rgba(216,192,146,.34) 4%, rgba(216,192,146,.84) 18%, rgba(216,192,146,.74) 54%, rgba(216,192,146,.72) 88%, transparent),
    linear-gradient(180deg, transparent, rgba(255,255,255,.22), transparent);
  box-shadow: 0 0 20px rgba(216,192,146,.24), 0 0 36px rgba(216,192,146,.12);
}
.timeline-session { position: relative; display: grid; gap: 1rem; }
.timeline-session-break {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: center;
  padding: .85rem 1rem;
  border: 1px solid rgba(216,192,146,.24);
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 34%),
    linear-gradient(180deg, rgba(18,18,26,.96), rgba(7,8,12,.96));
  box-shadow: 0 18px 42px rgba(0,0,0,.24), 0 0 0 1px rgba(192,132,255,.06) inset;
}
.timeline-session-knot {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--ink-0);
  border: 1px solid rgba(216,192,146,.48);
  background: radial-gradient(circle, rgba(216,192,146,.32), rgba(192,132,255,.12) 52%, rgba(3,4,6,.84));
  box-shadow: 0 0 22px rgba(216,192,146,.24);
}
.timeline-session-copy { min-width: 0; }
.timeline-session-label {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.timeline-session-copy h2 {
  margin: .12rem 0 .2rem;
  color: var(--ink-0);
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  line-height: 1;
  letter-spacing: .03em;
}
.timeline-session-copy p { margin: 0; color: var(--ink-2); line-height: 1.45; }
.timeline-session-open {
  border: 1px solid rgba(216,192,146,.2);
  background: rgba(192,132,255,.055);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .55rem .75rem;
  cursor: pointer;
}
.timeline-session-open:hover { border-color: rgba(192,132,255,.36); color: var(--ink-0); background: rgba(192,132,255,.12); }
.timeline-events { position: relative; display: grid; gap: .9rem; }
.timeline-event {
  position: relative;
  width: min(43%, 520px);
  min-height: 0;
  padding: .15rem 0 .25rem;
  cursor: pointer;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.timeline-event-left { justify-self: start; margin-right: calc(50% + 1.75rem); }
.timeline-event-right { justify-self: end; margin-left: calc(50% + 1.75rem); }
.timeline-event-stem {
  position: absolute;
  top: .95rem;
  width: clamp(1.4rem, 4vw, 4.2rem);
  height: 1px;
  background: linear-gradient(90deg, rgba(216,192,146,.05), rgba(216,192,146,.56));
  box-shadow: 0 0 12px rgba(216,192,146,.18);
}
.timeline-event-left .timeline-event-stem { right: calc(-1 * clamp(1.4rem, 4vw, 4.2rem)); }
.timeline-event-right .timeline-event-stem { left: calc(-1 * clamp(1.4rem, 4vw, 4.2rem)); transform: scaleX(-1); }
.timeline-event-dot {
  position: absolute;
  top: .71rem;
  width: .58rem;
  height: .58rem;
  border-radius: 50%;
  border: 1px solid rgba(216,192,146,.84);
  background: var(--bg-0);
  box-shadow: 0 0 14px rgba(216,192,146,.28), 0 0 0 4px rgba(216,192,146,.08);
}
.timeline-event-left .timeline-event-dot { right: calc(-1.75rem - .29rem); }
.timeline-event-right .timeline-event-dot { left: calc(-1.75rem - .29rem); }
.timeline-event .timeline-title { text-align: left; font-size: clamp(1rem, 1.55vw, 1.18rem); margin: 0 0 .16rem; letter-spacing: .045em; }
.timeline-event .timeline-body,
.timeline-event .timeline-date { text-align: left; }
.timeline-event .timeline-body { font-size: .95rem; line-height: 1.45; color: var(--ink-1); }
.timeline-event .timeline-date { margin-top: .2rem; color: var(--gold); }
.timeline-event-summary {
  position: relative;
  display: grid;
  gap: .18rem;
}
.timeline-event-summary::before {
  content: "Hover for scene detail";
  justify-self: start;
  margin-top: .16rem;
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
  transition: color 160ms var(--ease-out-quart) 130ms;
}
.timeline-event:hover .timeline-event-summary::before,
.timeline-event:focus-within .timeline-event-summary::before,
.timeline-event:focus .timeline-event-summary::before {
  content: "Scene detail";
  color: var(--gold);
}
.timeline-event-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: .55rem;
  padding-top: 0;
  border-top: 1px solid transparent;
  transition:
    max-height 320ms var(--ease-out-quart) 130ms,
    opacity 190ms var(--ease-out-quart) 130ms,
    padding-top 240ms var(--ease-out-quart) 130ms,
    border-color 240ms var(--ease-out-quart) 130ms;
}
.timeline-event:hover .timeline-event-detail,
.timeline-event:focus-within .timeline-event-detail,
.timeline-event:focus .timeline-event-detail {
  max-height: 90rem;
  opacity: 1;
  padding-top: .55rem;
  border-top: 1px solid rgba(216,192,146,.14);
  animation: fadeSlideUp 180ms var(--ease-out-quart) both;
}
.timeline-event-open {
  margin-top: .7rem;
  border: 1px solid rgba(216,192,146,.18);
  background: rgba(192,132,255,.055);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .45rem .58rem;
  cursor: pointer;
}
.timeline-event-open:hover {
  border-color: rgba(192,132,255,.34);
  background: rgba(192,132,255,.12);
  color: var(--ink-0);
}
.timeline-event-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.timeline-event-chip {
  border: 1px solid rgba(216,192,146,.16);
  color: var(--ink-2);
  background: rgba(3,4,6,.38);
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .38rem;
  cursor: pointer;
}
.timeline-event-chip:hover {
  color: var(--ink-0);
  border-color: rgba(192,132,255,.34);
  background: rgba(192,132,255,.12);
}
@media (max-width: 760px) {
  .timeline-spine::before { left: 1.4rem; }
  .timeline-session-break { width: 100%; grid-template-columns: auto minmax(0, 1fr); }
  .timeline-session-open { grid-column: 2; justify-self: start; }
  .timeline-event,
  .timeline-event-left,
  .timeline-event-right {
    width: auto;
    justify-self: stretch;
    margin-left: 3.25rem;
    margin-right: 0;
  }
  .timeline-event-left .timeline-event-stem,
  .timeline-event-right .timeline-event-stem {
    left: -1.85rem;
    right: auto;
    width: 1.85rem;
    transform: none;
  }
  .timeline-event-left .timeline-event-dot,
  .timeline-event-right .timeline-event-dot {
    left: -2.16rem;
    right: auto;
  }
}

/* Compendium */
.cmp-layout { grid-template-columns: minmax(270px,.85fr) minmax(0,2.4fr) minmax(300px,.95fr); }
.cmp-toolbar { margin: 0; display: grid; gap: .7rem; }
.cmp-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; border: 0; background: transparent; padding: 0; }
.cmp-tab { justify-content: space-between; border: 1px solid rgba(216,192,146,.16); }
.cmp-tab[aria-selected="true"] { background: rgba(192,132,255,.14); border-color: rgba(192,132,255,.48); }
.cmp-search { background: rgba(3,4,6,.6); border-color: rgba(216,192,146,.18); border-radius: 2px; font-family: var(--f-display); }
.cmp-feature { display: grid; grid-template-columns: minmax(180px, .72fr) 1fr; gap: 1.1rem; padding: 1rem; }
.cmp-feature h2 { font-size: clamp(2rem, 4vw, 3.8rem); letter-spacing: .08em; text-transform: uppercase; }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: .7rem; margin-top: .9rem; }
.cmp-card { padding: .75rem; cursor: pointer; min-height: 126px; }
.cmp-card[aria-selected="true"] { border-color: rgba(192,132,255,.5); background: rgba(192,132,255,.08); }
.cmp-card-title { color: var(--ink-0); font-size: 1.18rem; line-height: 1.1; }
.cmp-card-sub { color: var(--ink-3); font-size: .86rem; margin-top: .18rem; }
.cmp-card-body { color: var(--ink-2); font-size: .93rem; line-height: 1.35; margin-top: .55rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dossier-page-new { grid-template-columns: minmax(260px,.82fr) minmax(0,2.45fr) minmax(280px,.9fr); }
.dossier-main { padding: 1.1rem; }
.dossier-main h1 { font-size: clamp(2.4rem, 5vw, 5rem); text-transform: uppercase; letter-spacing: .1em; }
.dossier-prose { font-size: 1.05rem; }
.dossier-facts li { border-color: rgba(216,192,146,.16); }
.rel-list li { border-radius: 2px; background: rgba(255,255,255,.025); border-color: rgba(216,192,146,.14); }

/* Hooks */
.hooks-page { grid-template-columns: minmax(0, 3fr) minmax(310px, .9fr); }
.mission-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.mission-column { padding: .75rem; min-height: 480px; }
.mission-column[data-lane="immediate"] { border-top: 3px solid var(--blood); }
.mission-column[data-lane="active"]    { border-top: 3px solid rgba(192,132,255,.75); }
.mission-column[data-lane="whispered"] { border-top: 3px solid var(--gold); }
.mission-column[data-lane="completed"] { border-top: 3px solid var(--green); }
.mission-column-title { display: flex; gap: .5rem; align-items: center; justify-content: center; color: var(--gold); font-family: var(--f-display); letter-spacing: .16em; text-transform: uppercase; font-size: 1.15rem; border-bottom: 1px solid rgba(216,192,146,.17); padding-bottom: .55rem; margin-bottom: .75rem; }
.mission-card { padding: .72rem; margin-bottom: .7rem; }
.mission-card h3 { font-size: 1.12rem; line-height: 1.05; }
.mission-card p { color: var(--ink-2); line-height: 1.4; font-size: .94rem; margin-top: .35rem; }
.priority-stars { color: rgba(192,132,255,.95); letter-spacing: .14em; margin-top: .55rem; text-shadow: 0 0 14px rgba(192,132,255,.35); }
.linked-icons { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }
.link-icon { min-width: 44px; min-height: 44px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(216,192,146,.22); display: grid; place-items: center; color: var(--ink-0); background: rgba(3,4,6,.5); cursor: pointer; }
.stake-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.stake-list li { color: var(--ink-2); display: grid; grid-template-columns: auto 1fr; gap: .55rem; }
.stake-list li::before { content: "✦"; color: var(--gold); }
.reward-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-bottom: .8rem; }
.reward-icons .sigil-dot { width: 48px; height: 48px; margin: auto; }

.icon-btn, .popover-cta, .dossier-back {
  border-radius: 2px;
  background: rgba(3,4,6,.42);
  border-color: rgba(216,192,146,.22);
  color: var(--gold);
}
.icon-btn:hover, .popover-cta:hover { background: rgba(192,132,255,.12); border-color: rgba(192,132,255,.45); }
.ref { color: #f2e8ff; border-bottom-color: rgba(192,132,255,.45); }
.ref:hover { background: rgba(192,132,255,.16); }
.popover { backdrop-filter: blur(16px); }
.cmdk-overlay { background: rgba(3,4,6,.82); backdrop-filter: blur(12px); }
.cmdk-input { font-size: 1.45rem; }

/* Remove edit-mode style surface completely */
.tweaks { display: none !important; }

@media (max-width: 1320px) {
  .blood-page, .notes-page, .timeline-page, .cmp-layout, .dossier-page-new { grid-template-columns: 250px minmax(0,1fr); }
  .blood-page > .side-stack:last-child, .notes-page > .side-stack:last-child, .timeline-page > .side-stack:last-child, .cmp-layout > .side-stack:last-child, .dossier-page-new > .side-stack:last-child {
    grid-column: 1 / -1;
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  .mission-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .header-inner { flex-wrap: wrap; min-height: auto; }
  .brand { min-width: 0; flex: 1; }
  .brand-title { font-size: 1.45rem; }
  .search-btn { min-width: 100%; order: 2; }
  .tabs { top: 114px; }
  .tabs-inner { justify-content: flex-start; }
  .tab-btn { min-width: auto; padding-inline: .95rem; }
  .blood-page, .notes-page, .timeline-page, .cmp-layout, .dossier-page-new, .hooks-page { grid-template-columns: 1fr; }
  .side-stack { position: static; }
  .recap-grid, .cmp-feature { grid-template-columns: 1fr; }
  .recap-card { grid-template-columns: 110px 1fr; }
  .mission-board { grid-template-columns: 1fr; }
  .page-title { letter-spacing: .1em; }
}

@media (max-width: 560px) {
  .container { padding-inline: .72rem; }
  .tabs { top: 123px; }
  main { padding-top: .85rem; }
  .page-title { font-size: clamp(2.25rem, 16vw, 3.4rem); }
  .page-subtitle { font-size: .98rem; }
  .recap-card { grid-template-columns: 1fr; }
  .recap-art { min-height: 96px; }
  .scene-row { grid-template-columns: 1fr; }
  .scene-num { min-height: 48px; border-right: 0; border-bottom: 1px solid rgba(216,192,146,.2); justify-items: start; }
  .timeline-ribbon { grid-template-columns: 1fr; }
  .cmp-tabs { grid-template-columns: 1fr; }
  .big-sigil { max-width: 180px; }
}

button.entity-row, button.filter-row, button.mini-row, button.session-pick {
  font: inherit;
  color: inherit;
  width: 100%;
  text-align: left;
}
button.entity-row, button.filter-row, button.mini-row { cursor: pointer; }
.entity-row[aria-selected="true"], .cmp-card[aria-selected="true"] {
  border-color: rgba(192,132,255,.5);
  background: rgba(192,132,255,.08);
}
.entity-row .row-title, .filter-row .row-title, .mini-row .row-title, .session-pick .row-title { display: block; }
.entity-row .row-sub, .filter-row .row-sub, .mini-row .row-sub, .session-pick .row-sub { display: block; margin-top: 0.18rem; }
.side-panel > .entity-list:empty::after, .side-panel > .filter-list:empty::after {
  content: "No entries recorded.";
  color: var(--ink-3);
}


/* Bloodglass v4 audit fixes: keep all displayed lore data-derived and reduce formatting collisions */
.recap-text, .scene-copy, .cmp-card-body, .mission-card p, .question-row, .row-title, .row-sub {
  overflow-wrap: anywhere;
}
.question-row .row-title,
.question-row .row-sub {
  display: block;
}
.recap-tools {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}
.recap-card .chip-row {
  margin-top: .65rem;
}
.mission-column {
  min-height: 0;
}
.mission-card .hook-art {
  display: none;
}
.priority-stars {
  font-family: var(--f-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.legend-row {
  flex-wrap: wrap;
}
.timeline-ribbon::before {
  top: 3.1rem;
}
.timeline-card {
  min-height: 0;
}
.panel-action {
  white-space: nowrap;
}
@media (max-width: 1320px) {
  .blood-page, .notes-page, .timeline-page, .cmp-layout, .dossier-page-new {
    grid-template-columns: 280px minmax(0,1fr);
  }
}
@media (max-width: 920px) {
  .blood-page, .notes-page, .timeline-page, .cmp-layout, .dossier-page-new, .hooks-page {
    grid-template-columns: 1fr !important;
  }
  .blood-page > .side-stack:last-child,
  .notes-page > .side-stack:last-child,
  .timeline-page > .side-stack:last-child,
  .cmp-layout > .side-stack:last-child,
  .dossier-page-new > .side-stack:last-child,
  .hooks-page > .side-stack:last-child {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .side-stack {
    position: static !important;
  }
}
@media (max-width: 560px) {
  .brand-title { font-size: 1.15rem; }
  .page-title {
    letter-spacing: .06em;
  }
  .filter-row, .mini-row, .entity-row, .session-pick {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .mission-column-title {
    justify-content: space-between;
  }
}



/* ─────────── Bloodglass v6 stable ornamentation
   Safe graphics only: no decorative element participates in flex/grid flow,
   no fixed overlays sit above content, and mobile breakpoints remain last. ─────────── */
:root[data-theme="bloodglass"] {
  --orn-gold-soft: rgba(216,192,146,.18);
  --orn-gold-mid: rgba(216,192,146,.34);
  --orn-violet-soft: rgba(192,132,255,.12);
  --orn-violet-mid: rgba(192,132,255,.28);
  --orn-ink-glass: rgba(255,255,255,.045);
}

html { background: #05060a; }
body {
  background-color: #05060a;
  background-image:
    radial-gradient(900px 520px at 8% 0%, rgba(192,132,255,.14), transparent 58%),
    radial-gradient(820px 520px at 96% 5%, rgba(216,192,146,.10), transparent 60%),
    radial-gradient(780px 560px at 50% 105%, rgba(192,132,255,.08), transparent 62%),
    linear-gradient(180deg, #0b0c12 0%, #07080d 44%, #05060a 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .20;
  background-image:
    repeating-linear-gradient(122deg, transparent 0 92px, rgba(216,192,146,.14) 92px 93px, transparent 93px 184px),
    repeating-linear-gradient(28deg, transparent 0 128px, rgba(192,132,255,.13) 128px 129px, transparent 129px 256px);
  mask-image: radial-gradient(circle at center, black, transparent 85%);
}
.shell { isolation: isolate; }
.shell::before,
.shell::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  opacity: .42;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 22px rgba(192,132,255,.12));
}
.shell::before {
  width: 260px;
  height: 260px;
  left: -86px;
  top: 140px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg stroke='%23d8c092' stroke-opacity='.46' stroke-width='1.2'%3E%3Ccircle cx='130' cy='130' r='98'/%3E%3Ccircle cx='130' cy='130' r='68' stroke-opacity='.30'/%3E%3Cpath d='M130 22l17 72 72 17-72 17-17 72-17-72-72-17 72-17 17-72z'/%3E%3Cpath d='M130 104l26 26-26 26-26-26 26-26z' stroke-opacity='.58'/%3E%3Cpath d='M130 30v36M230 130h-36M130 230v-36M30 130h36' stroke-opacity='.34'/%3E%3C/g%3E%3C/svg%3E");
}
.shell::after {
  width: 300px;
  height: 300px;
  right: -108px;
  top: 230px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg stroke='%23c084ff' stroke-opacity='.38' stroke-width='1.1'%3E%3Cpath d='M150 38C205 38 247 76 266 124c-19 48-61 86-116 86S53 172 34 124c19-48 61-86 116-86z'/%3E%3Ccircle cx='150' cy='124' r='34'/%3E%3Ccircle cx='150' cy='124' r='10' fill='%23c084ff' fill-opacity='.24' stroke='none'/%3E%3Cpath d='M150 210v54M120 238h60M92 238l58-58 58 58' stroke-opacity='.46'/%3E%3C/g%3E%3C/svg%3E");
}

.header {
  background:
    linear-gradient(180deg, rgba(8,9,14,.94), rgba(8,9,14,.74)),
    linear-gradient(90deg, rgba(216,192,146,.06), transparent 20%, transparent 80%, rgba(216,192,146,.06));
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom-color: rgba(216,192,146,.18);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}
.header::after {
  content: "";
  position: absolute;
  left: max(1rem, calc(50% - var(--content-w)/2));
  right: max(1rem, calc(50% - var(--content-w)/2));
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--orn-gold-mid), var(--orn-violet-mid), var(--orn-gold-mid), transparent);
  box-shadow: 0 0 18px rgba(192,132,255,.28);
}
.brand-sigil {
  filter: drop-shadow(0 0 14px rgba(192,132,255,.34));
}
.search-btn {
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 34%),
    linear-gradient(180deg, rgba(24,24,34,.82), rgba(10,11,17,.9));
  border-color: rgba(216,192,146,.18);
  box-shadow: inset 0 0 0 1px rgba(192,132,255,.05), 0 10px 24px rgba(0,0,0,.18);
}
.search-btn:hover {
  border-color: rgba(192,132,255,.36);
  box-shadow: inset 0 0 0 1px rgba(192,132,255,.10), 0 14px 28px rgba(0,0,0,.24);
}
.tabs {
  background: linear-gradient(180deg, rgba(8,9,14,.58), rgba(6,7,11,.48));
}
.tabs-inner {
  position: relative;
  isolation: isolate;
}
.tabs-inner::after {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(216,192,146,.16), rgba(192,132,255,.20), rgba(216,192,146,.16), transparent);
}
.tab-btn {
  position: relative;
}
.tab-btn[aria-selected="true"] {
  box-shadow: inset 0 -1px 0 rgba(216,192,146,.35), inset 0 0 22px rgba(192,132,255,.06);
}
.tab-btn[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 17px;
  height: 12px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background: rgba(216,192,146,.82);
  filter: drop-shadow(0 0 10px rgba(216,192,146,.32));
  pointer-events: none;
  animation: activeTabPointer var(--motion-med) var(--ease-out-expo) both;
}
.tab-btn[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 13px;
  height: 8px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  border: 0;
  background: linear-gradient(180deg, rgba(216,192,146,.72), rgba(42,34,55,.94));
  box-shadow: none;
  pointer-events: none;
  animation: activeTabPointer var(--motion-med) var(--ease-out-expo) both;
}

.page-head {
  padding-top: .85rem;
  margin-bottom: .75rem;
}
.page-head::before {
  content: "";
  display: block;
  width: min(360px, 64vw);
  height: 18px;
  margin: 0 auto .35rem;
  opacity: .75;
  background:
    linear-gradient(90deg, transparent, rgba(216,192,146,.36) 18%, transparent 18.5%),
    linear-gradient(90deg, transparent 32%, rgba(192,132,255,.30) 32.5% 33.5%, transparent 34%),
    linear-gradient(90deg, transparent 66%, rgba(192,132,255,.30) 66.5% 67.5%, transparent 68%),
    linear-gradient(90deg, transparent 81%, rgba(216,192,146,.36) 81.5%, transparent 82%),
    linear-gradient(180deg, transparent 8px, rgba(216,192,146,.18) 8px 9px, transparent 9px);
}
.page-title {
  text-wrap: balance;
  word-break: normal;
}
.page-title::first-letter {
  text-shadow: 0 0 28px rgba(192,132,255,.24);
}

.blood-frame, .card, .lane, .hook, .broadsheet, .scene-card, .session-shell, .dossier-card, .dossier-card-text, .relgraph, .cmdk, .popover, .transcript-shell {
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 18%),
    radial-gradient(circle at top right, rgba(216,192,146,.07), transparent 25%),
    linear-gradient(180deg, rgba(19,20,31,.96), rgba(6,7,11,.98));
  box-shadow:
    inset 0 0 0 1px rgba(192,132,255,.065),
    inset 0 0 36px rgba(192,132,255,.035),
    0 18px 45px rgba(0,0,0,.25);
}
.blood-frame, .card, .lane, .hook, .broadsheet, .scene-card, .session-shell, .dossier-card, .dossier-card-text {
  background-size: auto, auto, auto;
}
.blood-frame::before, .card::before, .lane::before, .hook::before, .scene-card::before, .session-shell::before, .dossier-card-text::before {
  background:
    linear-gradient(122deg, transparent 0 36%, rgba(192,132,255,.12) 36.08%, transparent 36.34% 100%),
    linear-gradient(28deg, transparent 0 74%, rgba(216,192,146,.09) 74.08%, transparent 74.34% 100%);
  opacity: .52;
}
.blood-frame::after, .card::after, .lane::after, .hook::after, .scene-card::after, .session-shell::after, .dossier-card-text::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(216,192,146,.055);
  pointer-events: none;
  color: transparent;
  text-shadow: none;
}
.side-panel, .recap-card, .timeline-card, .hook-card, .session-shell, .dossier-card, .dossier-card-text {
  backdrop-filter: blur(6px);
}
.panel-title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.panel-title::before {
  content: "";
  width: .5rem;
  height: .5rem;
  transform: rotate(45deg);
  flex: 0 0 auto;
  border: 1px solid rgba(216,192,146,.34);
  background: radial-gradient(circle, rgba(192,132,255,.26), rgba(192,132,255,.06));
  box-shadow: 0 0 12px rgba(192,132,255,.20);
}
.panel-head {
  min-width: 0;
}
.panel-head > * {
  min-width: 0;
}
.recap-card, .timeline-card, .hook-card, .dossier-card, .cmp-card, .session-pick, .scene-row {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.recap-card:hover, .timeline-card:hover, .hook-card:hover, .dossier-card:hover, .cmp-card:hover, .session-pick:hover, .scene-row:hover {
  transform: translateY(-1px);
  border-color: rgba(192,132,255,.30);
  box-shadow: 0 20px 46px rgba(0,0,0,.30), 0 0 0 1px rgba(192,132,255,.08);
}
.recap-art, .sigil-dot, .entity-sigil, .big-sigil {
  background:
    radial-gradient(circle at 50% 48%, rgba(192,132,255,.20), rgba(192,132,255,.08) 46%, transparent 72%),
    linear-gradient(180deg, rgba(18,18,26,.96), rgba(7,8,12,.98));
}
.quote-row {
  position: relative;
  padding-left: .95rem;
}
.quote-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: .25rem;
  bottom: .25rem;
  width: 2px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(216,192,146,.38), rgba(192,132,255,.18));
}

/* v6 collision guards */
.container, .codex-main, .side-stack, .side-panel, .recap-card, .scene-row, .cmp-card, .mission-card, .hook-card, .timeline-card {
  min-width: 0;
}
.row-title, .row-sub, .recap-title, .recap-text, .scene-copy, .cmp-card-body, .mission-card p, .hook-body, .quote-row {
  overflow-wrap: anywhere;
}
img, svg { max-width: 100%; }

@media (max-width: 1100px) {
  .shell::before,
  .shell::after { opacity: .24; }
}
@media (max-width: 920px) {
  .shell::before,
  .shell::after { display: none; }
  .tabs-inner::after { left: .5rem; right: .5rem; }
  .page-head::before { width: min(280px, 72vw); }
}
@media (max-width: 560px) {
  .page-head { padding-top: .35rem; }
  .page-title { letter-spacing: .045em; }
  .tab-btn[aria-selected="true"]::after { display: none; }
  .blood-frame::after, .card::after, .lane::after, .hook::after, .scene-card::after, .session-shell::after, .dossier-card-text::after { inset: 6px; }
}


/* v7 compendium link fixes */
.cmp-open-link {
  margin-top: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid rgba(216,192,146,.18);
  background: rgba(192,132,255,.055);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .42rem .58rem;
  border-radius: 999px;
  cursor: pointer;
}
.cmp-open-link::after { content: "›"; color: var(--aether); }
.cmp-open-link:hover {
  border-color: rgba(192,132,255,.34);
  background: rgba(192,132,255,.12);
  color: var(--ink-0);
}
button.mini-row {
  font: inherit;
  color: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
button.mini-row:hover {
  border-color: rgba(192,132,255,.32);
  background: rgba(192,132,255,.055);
}



/* v8 interaction + scene formatting repair
   Keeps decorative cards as real navigation targets and prevents inline cross-link buttons
   from becoming separate CSS-grid cells inside bullet text. */
.scene-row {
  align-items: start;
}
.scene-row > div:not(.scene-num) {
  min-width: 0;
  position: relative;
  z-index: 1;
}
.scene-copy,
.scene-copy p,
.scene-bullets,
.scene-bullet,
.scene-bullet-text {
  min-width: 0;
}
.scene-bullet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .55rem;
  line-height: 1.55;
}
.scene-bullet::before {
  grid-column: 1;
  line-height: 1.55;
  transform: translateY(.02em);
}
.scene-bullet-text {
  grid-column: 2;
  display: block;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.scene-bullet-text .ref,
.scene-copy .ref,
.dossier-prose .ref,
.cmp-card-body .ref,
.transcript-raw .ref {
  display: inline;
  white-space: normal;
  line-height: inherit;
  vertical-align: baseline;
}
.cmp-clickable {
  cursor: pointer;
}
.cmp-clickable:focus-visible,
.cmp-card:focus-visible,
.cmp-feature:focus-visible {
  outline: 2px solid rgba(192,132,255,.65);
  outline-offset: 3px;
  border-color: rgba(192,132,255,.45);
}
.cmp-card .cmp-open-link {
  pointer-events: auto;
}
.cmp-feature .ref,
.cmp-card .ref {
  position: relative;
  z-index: 2;
}
@media (max-width: 560px) {
  .scene-row { gap: .7rem; }
  .scene-bullet { gap: .48rem; }
}



/* v9 interface interaction sweep */
.timeline-clickable,
.mission-clickable,
.recap-card,
.cmp-feature,
.cmp-card {
  cursor: pointer;
}
.timeline-clickable:focus-visible,
.mission-clickable:focus-visible,
.recap-card:focus-visible,
.question-button:focus-visible,
.quote-button:focus-visible,
.entity-row:focus-visible,
.filter-row:focus-visible,
.session-pick:focus-visible,
.link-icon:focus-visible {
  outline: 2px solid rgba(192,132,255,.62);
  outline-offset: 3px;
}
.question-button,
.quote-button {
  appearance: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: transparent;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.quote-button {
  color: var(--ink-2);
}
.question-button:hover,
.quote-button:hover {
  background: rgba(192,132,255,.055);
  color: var(--ink-0);
}
.question-button:disabled,
.quote-button:disabled {
  cursor: default;
  opacity: .82;
}
.question-button:disabled:hover,
.quote-button:disabled:hover {
  background: transparent;
  color: var(--ink-1);
}
.timeline-card .ref,
.recap-card .ref {
  position: relative;
  z-index: 2;
}
.mission-card .linked-icons {
  position: relative;
  z-index: 3;
}
.entity-row > span:not(.entity-sigil):not(.row-count),
.filter-row > span:not(.sigil-dot):not(.row-count),
.mini-row > span:not(.entity-sigil):not(.row-count),
.session-pick > span:not(.sigil-dot):not(.row-count) {
  min-width: 0;
}
.entity-row .row-sub,
.filter-row .row-sub,
.mini-row .row-sub,
.session-pick .row-sub {
  overflow-wrap: anywhere;
}
button.quote-row .ref,
button.question-row .ref,
button.entity-row .ref,
button.filter-row .ref,
button.mini-row .ref {
  pointer-events: none;
  display: inline;
}


/* v10 navigation/data density/responsive repair
   These rules intentionally sit last so they override older audit layers. */
.side-panel .entity-list,
.side-panel .filter-list,
.side-panel .mini-list {
  max-height: min(62vh, 720px);
  overflow-y: auto;
  padding-right: .15rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(216,192,146,.72) rgba(216,192,146,.06);
}
.side-panel .entity-list::-webkit-scrollbar,
.side-panel .filter-list::-webkit-scrollbar,
.side-panel .mini-list::-webkit-scrollbar {
  width: 12px;
}
.side-panel .entity-list::-webkit-scrollbar-track,
.side-panel .filter-list::-webkit-scrollbar-track,
.side-panel .mini-list::-webkit-scrollbar-track {
  background:
    linear-gradient(90deg, transparent 0 5px, rgba(216,192,146,.42) 5px 6px, transparent 6px 100%),
    linear-gradient(180deg, rgba(216,192,146,.05), rgba(192,132,255,.08), rgba(216,192,146,.05));
  border-radius: 999px;
}
.side-panel .entity-list::-webkit-scrollbar-thumb,
.side-panel .filter-list::-webkit-scrollbar-thumb,
.side-panel .mini-list::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(45deg, transparent 0 28%, rgba(216,192,146,.95) 29% 70%, transparent 71% 100%) center / 9px 9px no-repeat,
    linear-gradient(180deg, rgba(216,192,146,.9), rgba(192,132,255,.72), rgba(216,192,146,.9));
  background-clip: content-box;
  box-shadow: 0 0 12px rgba(216,192,146,.28);
}
.side-panel .entity-list::-webkit-scrollbar-thumb:hover,
.side-panel .filter-list::-webkit-scrollbar-thumb:hover,
.side-panel .mini-list::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(45deg, transparent 0 26%, rgba(255,236,185,1) 27% 72%, transparent 73% 100%) center / 10px 10px no-repeat,
    linear-gradient(180deg, rgba(255,236,185,.95), rgba(192,132,255,.9), rgba(255,236,185,.95));
  background-clip: content-box;
}
.cmp-grid {
  align-items: start;
}
.cmp-card {
  min-height: 0;
}
.timeline-session-open,
.timeline-event-open {
  white-space: normal;
}
.timeline-body {
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  :root { --content-w: 100%; }
  .container {
    padding-inline: clamp(.85rem, 2.4vw, 1.25rem);
  }
  .header-inner {
    min-height: 68px;
  }
  .tab-btn {
    min-width: 128px;
  }
}

@media (max-width: 920px) {
  .header {
    position: sticky;
    top: 0;
  }
  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 42vw);
    align-items: center;
    min-height: auto;
    gap: .75rem;
  }
  .brand-title {
    font-size: clamp(1.2rem, 4vw, 1.55rem);
  }
  .brand-sub {
    font-size: .62rem;
    letter-spacing: .14em;
  }
  .search-btn {
    order: initial;
    min-width: 0;
    width: 100%;
  }
  .tabs {
    position: static;
    top: auto;
  }
  .tabs-inner {
    justify-content: flex-start;
    overflow-x: auto;
    padding-inline: .65rem;
    scrollbar-width: none;
  }
  .tabs-inner::-webkit-scrollbar {
    display: none;
  }
  .tab-btn {
    min-width: max-content;
    padding: .78rem .95rem;
  }
  main {
    padding-top: 1.1rem;
  }
  .blood-page,
  .notes-page,
  .timeline-page,
  .cmp-layout,
  .dossier-page-new,
  .hooks-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem;
  }
  .blood-page > .codex-main,
  .notes-page > .codex-main,
  .timeline-page > .codex-main,
  .cmp-layout > .codex-main,
  .hooks-page > .codex-main {
    order: 1;
  }
  .blood-page > .side-stack:first-child,
  .notes-page > .side-stack:first-child,
  .timeline-page > .side-stack:first-child,
  .cmp-layout > .side-stack:first-child,
  .hooks-page > .side-stack:first-child {
    order: 2;
  }
  .blood-page > .side-stack:last-child,
  .notes-page > .side-stack:last-child,
  .timeline-page > .side-stack:last-child,
  .cmp-layout > .side-stack:last-child,
  .hooks-page > .side-stack:last-child {
    order: 3;
  }
  .side-stack {
    position: static !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: .85rem;
  }
  .side-panel {
    padding: .85rem;
  }
  .side-panel .entity-list,
  .side-panel .filter-list,
  .side-panel .mini-list {
    max-height: none;
    overflow: visible;
  }
  .page-head {
    margin-bottom: .9rem;
  }
  .page-title {
    font-size: clamp(2.45rem, 10vw, 5.4rem);
    letter-spacing: .07em;
  }
  .recap-grid,
  .cmp-grid,
  .mission-board {
    grid-template-columns: 1fr;
  }
  .cmp-layout > .side-stack:first-child {
    order: 1;
  }
  .cmp-layout > .codex-main {
    order: 2;
  }
  .cmp-layout > .side-stack:last-child {
    order: 3;
  }
  .cmp-layout > .side-stack:first-child .side-panel:nth-of-type(2) {
    display: none;
  }
  .cmp-feature {
    grid-template-columns: minmax(92px, 140px) minmax(0, 1fr);
    align-items: start;
  }
  .timeline-events {
    margin-left: 0;
  }
  .timeline-event,
  .timeline-event-left,
  .timeline-event-right {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 640px) {
  .container {
    padding-inline: .75rem;
  }
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .62rem .75rem;
  }
  .brand {
    gap: .5rem;
  }
  .brand-sigil {
    width: 36px;
    height: 36px;
  }
  .brand-title {
    font-size: 1.08rem;
  }
  .brand-sub {
    display: none;
  }
  .search-btn {
    min-width: 44px;
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
  }
  .search-btn .search-label,
  .search-btn kbd {
    display: none;
  }
  .tab-btn {
    font-size: .93rem;
    padding: .68rem .8rem;
  }
  main {
    padding-top: .85rem;
  }
  .page-head::before {
    width: min(220px, 68vw);
  }
  .page-title {
    font-size: clamp(2rem, 13vw, 3.2rem);
    line-height: .98;
    letter-spacing: .035em;
  }
  .recap-card,
  .cmp-feature {
    grid-template-columns: 1fr;
  }
  .recap-art {
    min-height: 88px;
  }
  .cmp-tabs {
    display: flex;
    overflow-x: auto;
    gap: .4rem;
    padding-bottom: .1rem;
    scrollbar-width: none;
  }
  .cmp-tabs::-webkit-scrollbar {
    display: none;
  }
  .cmp-tab {
    flex: 0 0 auto;
    min-width: 136px;
  }
  .side-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  .side-panel {
    border-color: rgba(216,192,146,.12);
    box-shadow: inset 0 0 0 1px rgba(192,132,255,.035);
    background-image:
      linear-gradient(135deg, rgba(255,255,255,.035), transparent 22%),
      linear-gradient(180deg, rgba(15,16,24,.78), rgba(6,7,11,.86));
  }
  .side-panel .entity-list,
  .side-panel .filter-list,
  .side-panel .mini-list,
  .side-panel .quote-list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: .55rem;
    padding: .05rem .1rem .45rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .side-panel .entity-list::-webkit-scrollbar,
  .side-panel .filter-list::-webkit-scrollbar,
  .side-panel .mini-list::-webkit-scrollbar,
  .side-panel .quote-list::-webkit-scrollbar {
    display: none;
  }
  .side-panel .entity-row,
  .side-panel .filter-row,
  .side-panel .mini-row,
  .side-panel .session-pick,
  .side-panel .quote-row {
    min-width: min(78vw, 280px);
    scroll-snap-align: start;
  }
  .cmp-layout > .side-stack:last-child .side-panel {
    margin-top: .15rem;
  }
  .session-toggle,
  .scene-summary {
    padding: .9rem;
  }
  .scene-row {
    grid-template-columns: 1fr;
  }
  .scene-num {
    min-height: 44px;
    border-right: 0;
    border-bottom: 1px solid rgba(216,192,146,.2);
    justify-items: start;
  }
  .timeline-session-break {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .timeline-session-open {
    grid-column: 2;
    justify-self: start;
  }
  .timeline-event-detail {
    padding: .9rem;
  }
}

/* v11 review polish: proportion, card rhythm, mobile timeline, and notes reveal */
.brand-wordmark {
  width: 14.9rem;
}
.brand-sub {
  display: flex;
  justify-content: space-between;
  gap: .45rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.brand-title {
  letter-spacing: 0;
  justify-content: space-between;
}

.tab-btn[aria-selected="true"]::before {
  width: 12px;
  height: 12px;
  bottom: -6px;
  clip-path: none;
  border-left: 1px solid rgba(216,192,146,.78);
  border-top: 1px solid rgba(216,192,146,.78);
  background: rgba(3,4,6,.72);
  transform: translateX(-50%) rotate(45deg);
  filter: drop-shadow(0 0 7px rgba(216,192,146,.22));
}
.tab-btn[aria-selected="true"]::after {
  display: none;
}

.cmp-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.cmp-card {
  min-height: 172px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cmp-card-body {
  flex: 1 1 auto;
}
.cmp-card .cmp-open-link {
  margin-top: auto;
  align-self: flex-start;
}
.cmp-feature {
  align-items: center;
  padding: clamp(1.35rem, 2.1vw, 2rem);
}
.cmp-feature > :first-child {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding-block: .55rem;
}
.cmp-feature .big-sigil {
  margin: 0 auto;
}

.notes-overview-card {
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.notes-overview-card:hover,
.notes-overview-card:focus-visible {
  border-color: rgba(192,132,255,.34);
  box-shadow: 0 20px 46px rgba(0,0,0,.30), 0 0 0 1px rgba(192,132,255,.08);
  outline: none;
}
.notes-expand-cue {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .35rem;
  border: 1px solid rgba(216,192,146,.18);
  background: rgba(192,132,255,.055);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .48rem .65rem;
}
.notes-overview-card .bs-pull {
  margin-top: 1rem;
}

@media (max-width: 920px) {
  .brand-wordmark {
    width: min(14.2rem, 100%);
  }
  .cmp-grid {
    grid-auto-rows: auto;
  }
  .cmp-card {
    min-height: 156px;
  }
}

@media (max-width: 640px) {
  .brand-wordmark {
    width: min(70vw, 14rem);
  }
  .brand-title {
    font-size: clamp(1.25rem, 7vw, 1.7rem);
  }
  .tab-btn[aria-selected="true"]::before {
    width: 10px;
    height: 10px;
    bottom: -5px;
  }
  .cmp-card {
    min-height: 148px;
  }
  .cmp-feature {
    padding: 1rem;
  }
  .timeline-spine::before {
    display: none;
  }
  .timeline-session {
    display: grid;
    gap: .8rem;
  }
  .timeline-session-break {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
  .timeline-session-knot {
    width: 3rem;
    height: 3rem;
    margin: 0 0 .55rem;
  }
  .timeline-session-copy {
    min-width: 0;
  }
  .timeline-session-copy h2 {
    font-size: clamp(1.35rem, 8vw, 2.2rem);
  }
  .timeline-session-open {
    grid-column: 1;
  }
  .timeline-events {
    gap: .75rem;
    margin: 0;
  }
  .timeline-event,
  .timeline-event-left,
  .timeline-event-right {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .timeline-event-stem,
  .timeline-event-dot {
    display: none;
  }
  .timeline-event-summary {
    padding: .9rem .95rem .75rem;
  }
  .timeline-event-summary::before {
    content: "Scene detail";
    position: static;
    display: block;
    margin-bottom: .35rem;
    opacity: .56;
  }
  .timeline-event-detail {
    max-height: none;
    opacity: 1;
    overflow: visible;
    margin: 0;
    border: 1px solid rgba(216,192,146,.12);
    border-top: 0;
    background: rgba(3,4,6,.18);
  }
  .timeline-title {
    font-size: 1.2rem;
    line-height: 1.18;
    overflow-wrap: anywhere;
  }
  .timeline-index {
    font-size: .72rem;
    line-height: 1.5;
  }
}

/* v12 review correction: compress codex, restore triangle marker, move search, stack notes */
.header-inner {
  justify-content: flex-start;
}
.brand-wordmark {
  width: 11.45rem;
}
.brand-sub {
  display: block;
  margin: .18rem 0 0;
  color: var(--gold);
  font-family: var(--f-body);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.brand-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-display);
  font-size: clamp(1.22rem, 1.65vw, 1.72rem);
  line-height: .9;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tabs-inner {
  align-items: stretch;
  justify-content: center;
}
.nav-search-btn {
  align-self: center;
  min-width: min(300px, 22vw);
  height: 40px;
  margin-left: .85rem;
  padding-block: .35rem;
}

.tab-btn[aria-selected="true"]::before {
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  clip-path: none;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 13px solid rgba(216,192,146,.82);
  border-top: 0;
  background: transparent;
  filter: drop-shadow(0 0 8px rgba(216,192,146,.25));
}
.tab-btn[aria-selected="true"]::after {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  clip-path: none;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid rgba(11,10,16,.96);
  background: transparent;
  pointer-events: none;
  box-shadow: none;
}

.notes-page > .codex-main {
  display: grid;
  gap: 1rem;
}
.notes-overview-card {
  padding: 1rem;
  margin: 0;
}
.notes-overview-card .recap-title {
  font-size: clamp(1.55rem, 3.2vw, 2.45rem);
}
.notes-card-recap {
  color: var(--ink-1);
  line-height: 1.6;
}
.session-pick .sigil-dot span {
  font-size: .68rem;
  letter-spacing: 0;
}

@media (max-width: 1320px) {
  .nav-search-btn {
    min-width: 44px;
    width: 44px;
    margin-left: .45rem;
    justify-content: center;
    padding-inline: 0;
  }
  .nav-search-btn .search-label,
  .nav-search-btn kbd {
    display: none;
  }
}

@media (max-width: 920px) {
  .header-inner {
    display: flex;
    min-height: auto;
  }
  .brand-wordmark {
    width: 10.8rem;
  }
  .brand-title {
    font-size: 1.4rem;
  }
  .brand-sub {
    font-size: .62rem;
    letter-spacing: .14em;
  }
  .tabs-inner {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .brand-wordmark {
    width: 10rem;
  }
  .brand-title {
    font-size: 1.25rem;
  }
  .tab-btn[aria-selected="true"]::before {
    border-left-width: 7px;
    border-right-width: 7px;
    border-bottom-width: 10px;
  }
  .tab-btn[aria-selected="true"]::after {
    border-left-width: 5px;
    border-right-width: 5px;
    border-bottom-width: 7px;
  }
}

/* v13 header consolidation and mobile timeline spine restore */
@media (min-width: 921px) {
  .header {
    display: grid;
    grid-template-areas: "header-stack";
    min-height: 78px;
  }
  .header-inner,
  .tabs {
    grid-area: header-stack;
  }
  .header-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    min-height: 78px;
    margin: 0;
    padding: 0 clamp(1rem, 3vw, 2.25rem);
    pointer-events: none;
  }
  .brand {
    pointer-events: auto;
    min-width: 0;
  }
  .header-spacer {
    display: none;
  }
  .brand-wordmark {
    width: 12.05rem;
  }
  .brand-sub {
    letter-spacing: .185em;
  }
  .brand-title {
    width: 11.55rem;
    font-size: clamp(1.25rem, 1.72vw, 1.78rem);
  }
  .tabs {
    position: relative;
    top: auto;
    z-index: 2;
    min-height: 78px;
    height: 78px;
    align-items: center;
    background: linear-gradient(180deg, rgba(8,9,14,.58), rgba(6,7,11,.48));
  }
  .tabs-inner {
    position: relative;
    max-width: none;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: stretch;
    padding-left: clamp(18rem, 25vw, 25rem);
    padding-right: clamp(18rem, 25vw, 25rem);
  }
  .tab-btn {
    min-width: 145px;
  }
  .nav-search-btn {
    position: absolute;
    right: clamp(1rem, 3vw, 2.25rem);
    top: 50%;
    z-index: 4;
    min-width: min(340px, 23vw);
    margin-left: 0;
    transform: translateY(-50%);
  }
  .nav-search-btn:hover,
  .nav-search-btn:active {
    transform: translateY(-50%);
  }
  main {
    padding-top: clamp(1.1rem, 2vw, 2rem);
  }
}

@media (max-width: 640px) {
  .timeline-spine {
    padding-left: 0;
  }
  .timeline-spine::before {
    display: block;
    left: 1.2rem;
  }
  .timeline-session-break {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .timeline-session-open {
    grid-column: 2;
  }
  .timeline-events {
    gap: .85rem;
    margin: 0;
  }
  .timeline-event,
  .timeline-event-left,
  .timeline-event-right {
    position: relative;
    display: block;
    width: auto;
    margin-left: 3.1rem;
    margin-right: 0;
    padding: .12rem 0 .22rem;
  }
  .timeline-event-stem,
  .timeline-event-dot {
    display: block;
  }
  .timeline-event-left .timeline-event-stem,
  .timeline-event-right .timeline-event-stem {
    left: -1.9rem;
    right: auto;
    width: 1.9rem;
    transform: none;
  }
  .timeline-event-left .timeline-event-dot,
  .timeline-event-right .timeline-event-dot {
    left: -2.18rem;
    right: auto;
  }
  .timeline-event-summary {
    padding: 0;
  }
  .timeline-event-summary::before {
    content: "Hover for scene detail";
    position: static;
    display: block;
    margin-bottom: .35rem;
    opacity: 1;
  }
  .timeline-event:hover .timeline-event-summary::before,
  .timeline-event:focus-within .timeline-event-summary::before,
  .timeline-event:focus .timeline-event-summary::before {
    content: "Scene detail";
  }
  .timeline-event-detail {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: .55rem;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .timeline-event:hover .timeline-event-detail,
  .timeline-event:focus-within .timeline-event-detail,
  .timeline-event:focus .timeline-event-detail {
    max-height: 90rem;
    opacity: 1;
    padding-top: .55rem;
    border-top: 1px solid rgba(216,192,146,.14);
  }
}

/* v14 responsive header sizing */
@media (min-width: 921px) {
  .header {
    min-height: 64px;
  }
  .header-inner {
    min-height: 64px;
    padding-inline: clamp(.8rem, 2.2vw, 1.8rem);
  }
  .brand-sigil {
    width: 38px;
    height: 38px;
  }
  .brand-wordmark {
    width: clamp(9.65rem, 13vw, 12.05rem);
  }
  .brand-sub {
    font-size: clamp(.56rem, .72vw, .72rem);
  }
  .brand-title {
    width: clamp(9.2rem, 12.4vw, 11.55rem);
    font-size: clamp(1.06rem, 1.48vw, 1.58rem);
  }
  .tabs {
    min-height: 64px;
    height: 64px;
  }
  .tabs-inner {
    padding-left: clamp(14.5rem, 20vw, 21rem);
    padding-right: clamp(13.75rem, 23vw, 22rem);
  }
  .tab-btn {
    min-width: clamp(104px, 9.6vw, 145px);
    padding-inline: clamp(.55rem, 1vw, 1.1rem);
    font-size: clamp(.86rem, 1.08vw, 1.05rem);
  }
  .nav-search-btn {
    right: clamp(.8rem, 2.2vw, 1.8rem);
    width: clamp(12rem, 22vw, 20.5rem);
    min-width: 0;
    height: 34px;
    padding: .26rem .55rem;
    font-size: clamp(.82rem, .95vw, .95rem);
  }
  .nav-search-btn kbd {
    font-size: .62rem;
    padding: .05rem .28rem;
  }
}

@media (min-width: 921px) and (max-width: 1220px) {
  .tabs-inner {
    padding-left: clamp(12.75rem, 19vw, 16rem);
    padding-right: clamp(4rem, 8vw, 6rem);
  }
  .tab-btn {
    min-width: clamp(92px, 8.7vw, 112px);
    font-size: clamp(.8rem, 1vw, .9rem);
  }
  .nav-search-btn {
    width: 40px;
    height: 34px;
    justify-content: center;
    padding-inline: 0;
  }
  .nav-search-btn .search-label,
  .nav-search-btn kbd {
    display: none;
  }
}

/* v15 keep search usable through mid-width desktop */
@media (min-width: 1101px) and (max-width: 1320px) {
  .nav-search-btn {
    width: clamp(11rem, 17vw, 15rem);
    min-width: 0;
    height: 34px;
    justify-content: flex-start;
    padding-inline: .5rem;
  }
  .nav-search-btn .search-label {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-search-btn kbd {
    display: none;
  }
}

@media (min-width: 921px) and (max-width: 1100px) {
  .nav-search-btn {
    width: 40px;
    min-width: 40px;
  }
  .nav-search-btn .search-label,
  .nav-search-btn kbd {
    display: none;
  }
}

/* v16 header micro-tuning */
.brand-wordmark,
.brand-title,
.brand-sub {
  width: max-content;
  max-width: none;
  min-width: 0;
}
.brand-sub {
  white-space: nowrap;
  overflow: visible;
}
.brand-title {
  width: 100%;
  justify-content: space-between;
}
.tab-btn[aria-selected="true"]::before {
  border-left-width: 8px;
  border-right-width: 8px;
  border-bottom-width: 6px;
  filter: drop-shadow(0 0 5px rgba(216,192,146,.16));
}
.tab-btn[aria-selected="true"]::after {
  border-left-width: 6px;
  border-right-width: 6px;
  border-bottom-width: 4px;
}

@media (min-width: 921px) {
  .brand-wordmark,
  .brand-title,
  .brand-sub {
    width: max-content;
  }
  .brand-title { width: 100%; }
}

@media (max-width: 640px) {
  .brand-wordmark,
  .brand-title,
  .brand-sub {
    width: max-content;
    max-width: none;
    min-width: 0;
  }
  .brand-title { width: 100%; }
  .tab-btn[aria-selected="true"]::before {
    border-left-width: 6px;
    border-right-width: 6px;
    border-bottom-width: 5px;
  }
  .tab-btn[aria-selected="true"]::after {
    border-left-width: 4px;
    border-right-width: 4px;
    border-bottom-width: 3px;
  }
}

.page-head::before {
  width: min(680px, 72%);
  height: 1px;
  margin: 0 auto .9rem;
  opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(216,192,146,.35), rgba(192,132,255,.42), rgba(216,192,146,.35), transparent);
  box-shadow: 0 0 18px rgba(192,132,255,.25);
}

@media (min-width: 641px) {
  .side-panel .entity-list,
  .side-panel .filter-list,
  .side-panel .mini-list,
  .side-panel .quote-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(216,192,146,.95) transparent;
  }

  .side-panel .entity-list::-webkit-scrollbar,
  .side-panel .filter-list::-webkit-scrollbar,
  .side-panel .mini-list::-webkit-scrollbar,
  .side-panel .quote-list::-webkit-scrollbar {
    width: 14px;
  }

  .side-panel .entity-list::-webkit-scrollbar-track,
  .side-panel .filter-list::-webkit-scrollbar-track,
  .side-panel .mini-list::-webkit-scrollbar-track,
  .side-panel .quote-list::-webkit-scrollbar-track {
    background:
      linear-gradient(90deg, transparent 0 6px, rgba(216,192,146,.72) 6px 7px, transparent 7px 100%);
    border-radius: 999px;
  }

  .side-panel .entity-list::-webkit-scrollbar-thumb,
  .side-panel .filter-list::-webkit-scrollbar-thumb,
  .side-panel .mini-list::-webkit-scrollbar-thumb,
  .side-panel .quote-list::-webkit-scrollbar-thumb {
    min-height: 32px;
    border: 0;
    border-radius: 999px;
    background:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='%23d8c092' fill-opacity='.96'/%3E%3Cpath d='M12 3.2l2.3 6.5 6.5 2.3-6.5 2.3-2.3 6.5-2.3-6.5-6.5-2.3 6.5-2.3z' fill='%2308070b' fill-opacity='.94'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
    background-color: transparent;
    box-shadow: 0 0 10px rgba(216,192,146,.2);
  }

  .side-panel .entity-list::-webkit-scrollbar-thumb:hover,
  .side-panel .filter-list::-webkit-scrollbar-thumb:hover,
  .side-panel .mini-list::-webkit-scrollbar-thumb:hover,
  .side-panel .quote-list::-webkit-scrollbar-thumb:hover {
    background:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='%23f0d9a4'/%3E%3Cpath d='M12 3.2l2.3 6.5 6.5 2.3-6.5 2.3-2.3 6.5-2.3-6.5-6.5-2.3 6.5-2.3z' fill='%2308070b' fill-opacity='.94'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
  }
}

@media (min-width: 641px) {
  .side-panel .custom-gold-scrollbar {
    position: relative;
    padding-right: 1rem;
    scrollbar-width: none;
  }

  .side-panel .custom-gold-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .gold-scroll-rail {
    position: absolute;
    top: 0;
    right: .12rem;
    width: 14px;
    pointer-events: none;
    z-index: 5;
  }

  .gold-scroll-rail::before {
    content: "";
    position: absolute;
    top: .2rem;
    bottom: .2rem;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, rgba(216,192,146,.82) 12%, rgba(216,192,146,.82) 88%, transparent);
    box-shadow: 0 0 8px rgba(216,192,146,.22);
  }

  .gold-scroll-thumb {
    position: absolute;
    top: 0;
    left: 50%;
    width: 9px;
    height: 9px;
    background: transparent;
    color: transparent;
    will-change: transform;
  }

  .gold-scroll-thumb::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    background: rgba(216,192,146,.98);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    filter: drop-shadow(0 0 5px rgba(216,192,146,.38));
  }
}