/* ==========================================================================
   NPCBank visual system — "The Illuminated Codex"

   A codex page, not a dashboard. Vellum ground, forest-green ink, and two
   accents with strictly separate jobs: LEAF marks what you can act on (current
   selection, primary action), GILT marks what has been revealed (knowledge the
   NPC's disclosure state permits). Gated knowledge stays outlined, not inked,
   so the product's own gating mechanic remains visible.

   Ornament is only ever encoding real data. A sigil derives from a capability
   id, and a seal derives from a disclosure boundary. Nothing here is drawn
   merely because it looks nice.

   Direction seed: 4c194616 (direction / persuade)
   ========================================================================== */
@font-face {
  font-family: "Alegreya";
  src: url("assets/fonts/alegreya-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("assets/fonts/alegreyasans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("assets/fonts/alegreyasans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("assets/fonts/alegreyasans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Type ------------------------------------------------------------
     Alegreya is a calligraphic humanist serif drawn for long-form literature:
     it carries the codex voice. Alegreya Sans is its matched companion and does
     all the work at small sizes, where a serif would fail in dense tables. */
  --font-display: "Alegreya", Georgia, "Times New Roman", serif;
  --font-ui: "Alegreya Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Fixed rem-anchored scale. Alegreya Sans runs small, so the UI steps sit one
     notch above where a system sans would. */
  --text-2xs: 0.75rem; /* 12px — table micro-labels */
  --text-xs: 0.8125rem; /* 13px — labels, captions */
  --text-sm: 0.875rem; /* 14px — dense table body */
  --text-base: 0.9375rem; /* 15px — default body */
  --text-md: 1.0625rem; /* 17px — prose */
  --text-lg: 1.3125rem; /* 21px — panel titles */
  --text-xl: 1.625rem; /* 26px — section headings */
  --text-2xl: 2.125rem; /* 34px — page titles */
  --text-3xl: 2.75rem; /* 44px */
  /* The opening line is set, so its size follows the column rather than the
     other way round: it never outgrows the leaf it lives on. */
  --text-4xl: clamp(2.25rem, 3.4vw, 3rem); /* 36 → 48px */
  --text-masthead: clamp(1.875rem, 3.4vw, 3.125rem); /* the wordmark, one per site */

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.65;

  --tracking-label: 0.1em; /* small caps rubric labels */
  --tracking-tight: -0.005em;

  /* --- Ink -------------------------------------------------------------- */
  --ink-950: #16241c; /* headings, the darkest stroke on the page */
  --ink-900: #1f3328; /* body */
  --ink-800: #2b4235;
  --ink-600: #4f6157; /* secondary text — clears 4.5:1 on every vellum */
  --ink-500: #4f6157;
  --ink-400: #8a988e; /* rules and disabled only. Never text. */

  /* --- Vellum ------------------------------------------------------------
     Three tones of the same skin. The page is the mid tone; a leaf (a written
     page) is brighter; the gutter and rails are sunk. */
  --vellum-page: #ece6d4;
  --vellum-leaf: #f6f2e6;
  --vellum-sunk: #ded6c1;
  --vellum-edge: #cfc5ab; /* the deckle: page boundaries and heavy rules */

  /* --- Leaf: what you can act on ----------------------------------------- */
  --leaf-800: #204a31;
  --leaf-700: #2c6644; /* accent text and links */
  --leaf-600: #377951; /* fills: primary action, active marker, data bars */
  --leaf-500: #4a9367;
  --leaf-300: #a2c4b0;
  --leaf-200: #c6dccd;
  --leaf-100: #dfe9dc;
  --leaf-50: #eaf1e6;

  /* --- Gilt: what has been revealed --------------------------------------
     Illumination. Gilt marks knowledge the disclosure state permits. Anything
     still behind a gate is drawn in outline and never receives it. */
  --gilt-800: #7d552d; /* gilt as text */
  --gilt-600: #a8791f; /* gilt as leaf metal */
  --gilt-300: #d9bd7a;
  --gilt-100: #f0e3c4;
  --gilt-50: #f7f0dc;

  /* --- Rubric: the scribe's red ------------------------------------------ */
  --rubric: #9c3a2c;
  --rubric-bg: #f4e2dd;

  /* --- Semantic status --------------------------------------------------- */
  --status-complete: #2c6644;
  --status-review: #7d552d;
  --status-fail: #9c3a2c;
  --status-generated: #4a6473;

  --status-complete-bg: #dfe9dc;
  --status-review-bg: #f0e3c4;
  --status-fail-bg: #f4e2dd;
  --status-generated-bg: #dfe6ea;

  /* --- Lines ------------------------------------------------------------ */
  --border-subtle: rgba(22, 36, 28, 0.12);
  --border-base: rgba(22, 36, 28, 0.22);
  --border-strong-base: rgba(22, 36, 28, 0.42);

  /* --- Depth. Offset + soft blur; no zero-offset halos. ------------------ */
  --shadow-xs: 0 1px 2px rgba(38, 28, 12, 0.10);
  --shadow-sm:
    0 1px 3px rgba(38, 28, 12, 0.12),
    0 1px 2px rgba(38, 28, 12, 0.07);
  --shadow-md:
    0 6px 18px rgba(38, 28, 12, 0.14),
    0 1px 3px rgba(38, 28, 12, 0.08);
  --shadow-lg:
    0 18px 44px rgba(38, 28, 12, 0.18),
    0 3px 8px rgba(38, 28, 12, 0.10);

  /* --- Geometry --------------------------------------------------------- */
  --radius-leaf: 2px; /* a codex page corner is nearly square */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px; /* page margins on a codex leaf */

  --explorer-content-max: 1560px;
  --prose-measure: 68ch;

  /* --- Motion ----------------------------------------------------------- */
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-slow: 260ms;
  --motion-page: 340ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-soft-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Role aliases. Components reference these, not the raw ramps. ------ */
  --text: var(--ink-900);
  --text-main: var(--ink-900);
  --text-strong: var(--ink-950);
  --text-muted: var(--ink-600);
  --text-faint: var(--ink-500);
  --muted: var(--ink-600);

  --page-bg: var(--vellum-page);
  --bg-page: var(--vellum-page);
  --bg-page-soft: var(--vellum-sunk);
  --surface: var(--vellum-leaf);
  --bg-surface: var(--vellum-leaf);
  --bg-surface-raised: var(--vellum-leaf);
  --surface-soft: var(--vellum-page);
  --bg-surface-soft: var(--vellum-page);
  --surface-quiet: var(--vellum-page);
  --bg-surface-cream: var(--vellum-page);
  --surface-warm: var(--leaf-50);
  --bg-surface-mint: var(--leaf-100);
  --bg-mint: var(--leaf-100);
  --bg-leaf-soft: var(--leaf-50);

  --accent: var(--leaf-600);
  --accent-dark: var(--leaf-700);
  --accent-soft: var(--leaf-100);

  --border: var(--border-base);
  --border-soft: var(--border-subtle);
  --border-medium: var(--border-base);
  --border-strong: var(--border-strong-base);

  --fail: var(--status-fail);
  --warning: var(--status-review);
  --complete: var(--status-complete);
  --generated: var(--status-generated);

  --shadow-soft: var(--shadow-sm);
  --shadow-lift: var(--shadow-md);
  --shadow-float: var(--shadow-lg);

  /* Legacy names still referenced by component rules. Mapped onto the ramps
     above so the system has exactly one source of truth; they retire as each
     component is rewritten. */
  --font-sans: var(--font-ui);
  --font-display: var(--font-ui);
  --leaf-950: var(--ink-950);
  --leaf-900: var(--ink-900);
  --mint-300: var(--leaf-300);
  --mint-400: var(--leaf-500);
  --moss-600: var(--leaf-700);
  --moss-500: var(--leaf-600);
  --moss-400: var(--leaf-500);
  --moss-100: var(--leaf-100);
  --cream-200: var(--vellum-page);
  --sand-300: var(--border-strong-base);
  --wood-500: var(--ink-600);
  --peach-200: var(--status-review-bg);
  --peach-300: var(--status-review);
  --rose-200: var(--status-fail-bg);
  --lavender-300: var(--status-generated-bg);
  --lavender-500: var(--status-generated);
  --sky-200: var(--status-generated-bg);
  --palia-blue-100: var(--leaf-100);
  --palia-blue-400: var(--leaf-300);
  --palia-blue-600: var(--leaf-600);
  --palia-blue-700: var(--leaf-700);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--vellum-page);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--gilt-300);
  color: var(--ink-950);
}

@keyframes tabPanelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes softReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

a,
button,
input,
select,
textarea {
  transition: background-color var(--motion-normal) var(--ease-standard),
    border-color var(--motion-normal) var(--ease-standard),
    box-shadow var(--motion-normal) var(--ease-soft-out),
    color var(--motion-normal) var(--ease-standard),
    transform var(--motion-normal) var(--ease-soft-out);
}

:focus-visible {
  outline: 2px solid var(--leaf-600);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

p a,
li a,
td a {
  border-bottom: 1px dotted var(--accent);
}

a.imglink,
.navbar a,
.nav-tabs a,
.document-row,
.btn,
.brand {
  border-bottom: 0;
}

#page {
  width: 90%;
  max-width: 774px;
  margin: 64px auto 0;
}

#pagehead {
  min-height: 58px;
}

#logo {
  margin-left: -36px;
  color: var(--text);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: 0;
}

#pagebody {
  margin-top: 36px;
}

#menu {
  margin-top: 8px;
  width: 102px;
  float: left;
  text-align: right;
}

#menu p {
  margin: 0 0 11px;
}

#page #content {
  width: 640px;
  float: left;
  margin-left: 32px;
  margin-bottom: 64px;
  text-align: justify;
}

#page #content h1,
#page #content h2,
#page #content h3 {
  margin-top: 0;
  letter-spacing: 0;
}

#page #content table {
  text-align: left;
}

#screenshot {
  text-align: center;
  margin: 24px 0;
}

.screenshot-preview {
  display: block;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 10px;
  color: var(--ink-950);
}

.preview-navbar {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  padding: 7px 9px;
  text-align: left;
}

.preview-body {
  display: grid;
  grid-template-columns: 115px 1fr;
  gap: 16px;
  padding: 14px 8px 4px;
  text-align: left;
}

.preview-tabs span,
.preview-lines span {
  display: block;
  height: 12px;
  margin-bottom: 8px;
  background: var(--vellum-sunk);
}

.preview-tabs span:first-child {
  background: var(--accent);
}

.preview-lines span:nth-child(2n) {
  width: 76%;
}

.small_ref {
  font-size: 80%;
  border: 1px solid var(--accent);
  background-color: var(--accent-soft);
  padding: 7px;
}

.no_vspace_after {
  padding-bottom: 0;
  margin-bottom: 0;
}

.surface-main {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-raised);
  box-shadow: var(--shadow-soft);
}

.surface-secondary {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.surface-soft {
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-md);
  background: var(--bg-surface-soft);
}

.surface-technical {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-family: var(--font-mono);
}

.surface-accent {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  background: var(--leaf-50);
}

.interactive-card {
  transition: transform var(--motion-normal) var(--ease-soft-out),
    box-shadow var(--motion-normal) var(--ease-soft-out),
    border-color var(--motion-normal) var(--ease-standard),
    background-color var(--motion-normal) var(--ease-standard);
}

.interactive-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.codex-page {
  background: var(--vellum-page);
}

/* ---- running head ------------------------------------------------------ */

.codex-runninghead,
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-8);
  border-bottom: 1px solid var(--vellum-edge);
  background: var(--vellum-leaf);
}

.codex-brand,
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.sigil {
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* The SVG symbol library is definitions only. Keeping the holder out of
   layout also prevents CSP from turning a blocked inline display rule into a
   blank 300×150 SVG at the top of every dynamic page. */
#sigil-sprite {
  display: none;
}

.brand-sigil {
  color: var(--leaf-700);
}

.brand-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.codex-nav,
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.codex-nav a,
.site-nav a {
  color: var(--ink-600);
  font-size: var(--text-base);
}

.codex-nav a:hover,
.site-nav a:hover {
  color: var(--leaf-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-nav a[aria-current="page"] {
  color: var(--leaf-800);
  font-weight: 700;
}

.codex-main,
.home-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--space-8) var(--space-16);
}

.codex-colophon,
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8) var(--space-12);
  border-top: 1px solid var(--vellum-edge);
  color: var(--ink-600);
  font-size: var(--text-sm);
}

.codex-colophon p,
.site-footer p {
  margin: 0;
}

.codex-colophon nav,
.site-footer nav {
  display: flex;
  gap: var(--space-5);
}

/* ---- the opening spread ------------------------------------------------ */

/* ==========================================================================
   The spread — a codex lying open, edge to edge
   --------------------------------------------------------------------------
   Full bleed, because an open book is a wide horizontal object and cramming it
   into a text column was the mistake. Two leaves meet at a real gutter: facing
   inset shadows, the way paper darkens as it turns into the fold.
   ========================================================================== */

.codex-spread {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Wider than its parent, centred on the viewport, with an equal fore-edge on
     each side. 50% is half the parent's measure; pulling back by half the target
     width lands it centred no matter how wide the window is. A width formula
     alone cannot do this, because the parent is narrower and already centred. */
  --fore-edge: var(--space-12);
  width: min(1400px, calc(100vw - 2 * var(--fore-edge)));
  margin-inline: calc(50% - min(700px, calc(50vw - var(--fore-edge))));
  margin-bottom: var(--space-16);
  border: 1px solid var(--vellum-edge);
  background: var(--vellum-leaf);
  box-shadow: var(--shadow-lg);
}

/* the deckle: the block beneath, so the fore-edge reads as a stack of leaves
   rather than a card border */
.codex-spread::after {
  content: "";
  position: absolute;
  inset: 5px -4px -4px 5px;
  z-index: -1;
  border: 1px solid var(--vellum-edge);
  background: var(--vellum-sunk);
}

.spread-leaf {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  /* Tall enough to read as a plane, capped so a tall window does not stretch
     the leaf and strand its content at the two ends. */
  min-height: min(74vh, 760px);
  padding: var(--space-16) var(--space-12);
}

/* the gutter: each leaf darkens as it approaches the fold */
.spread-verso {
  padding-left: var(--space-20);
  box-shadow: inset -22px 0 26px -24px rgba(38, 28, 12, 0.55);
}

/* Both leaves are the same sheet. Only the gutter darkens them, which is what a
   fold actually does; tinting a whole page is not something paper can do. */
.spread-recto {
  padding-right: var(--space-20);
  border-left: 1px solid var(--vellum-edge);
  box-shadow: inset 22px 0 26px -24px rgba(38, 28, 12, 0.5);
}

.spread-verso-body {
  max-width: 34rem;
}

.opening-title {
  margin: 0 0 var(--space-6);
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}

.opening-title .line {
  display: block;
}

.opening-standfirst {
  position: relative;
  max-width: none;
  margin: 0 0 var(--space-4);
  padding-top: var(--space-4);
  border-top: 2px solid transparent;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.45;
}

.opening-secondary {
  max-width: none;
  margin: 0 0 var(--space-6);
  color: var(--ink-600);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.opening-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.opening-actions .control-button {
  min-height: 40px;
  padding: 8px 20px;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* The colophon sits at the foot of the left leaf, grouped the way the schema
   groups these things: what the corpus contains, and what grounds it. */
.spread-verso .colophon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-6) var(--space-10);
  width: 100%;
  max-width: 34rem;
  margin-top: var(--space-10);
}

.colophon-group dl {
  margin: 0;
  border-top: 2px solid var(--ink-950);
}

.colophon-imprint {
  grid-column: 1 / -1;
  margin: var(--space-2) 0 0;
  color: var(--ink-500);
  font-size: var(--text-2xs);
  font-variant-numeric: oldstyle-nums;
  letter-spacing: 0.03em;
}

.colophon-label {
  margin: 0 0 var(--space-2);
  color: var(--ink-500);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.colophon-group dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
}

/* on the spread the entry is the page itself, not a card floating on one */
.spread-entry {
  flex: 1 1 auto;
}

.spread-entry .entry-head {
  padding-bottom: var(--space-5);
}

.spread-entry .entry-columns {
  padding-top: var(--space-6);
}

/* A marginal apparatus needs a margin to live in. Half a spread does not always
   have one, so the entry asks its own column how much room it has: below 700px
   the apparatus drops under the text and lays out as a band instead of a rail.
   Squeezing the quoted speech into 288px to keep a rail is the wrong trade. */
.spread-entry .entry-columns {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.spread-entry .entry-apparatus {
  padding-left: 0;
  padding-top: var(--space-4);
  border-left: 0;
  border-top: 2px solid var(--ink-950);
}

.spread-entry .entry-apparatus dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 var(--space-5);
}

.spread-entry .entry-head {
  padding-bottom: var(--space-4);
}

.leaf-caption {
  max-width: 62ch;
  margin: var(--space-6) 0 0;
  color: var(--ink-600);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}


/* the colophon: counts set as a scribe's tally, not as tiles */
.colophon {
  margin: 0;
  border-top: 2px solid var(--ink-950);
}

.colophon > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.colophon dt {
  color: var(--ink-600);
  font-size: var(--text-sm);
}

.colophon dd {
  margin: 0;
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- the leaf ---------------------------------------------------------- */

.entry-leaf {
  position: relative;
  padding: var(--space-8) var(--space-8) var(--space-6);
  border: 1px solid var(--vellum-edge);
  border-radius: var(--radius-leaf);
  background: var(--vellum-leaf);
  box-shadow: var(--shadow-md);
}

/* the deckle: a second leaf showing beneath the first */
.entry-leaf::after {
  content: "";
  position: absolute;
  inset: 6px -5px -5px 6px;
  z-index: -1;
  border: 1px solid var(--vellum-edge);
  border-radius: var(--radius-leaf);
  background: var(--vellum-sunk);
}

.leaf-caption {
  max-width: 62ch;
  margin: var(--space-5) 0 0;
  color: var(--ink-600);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.entry-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--ink-950);
}

.entry-sigil {
  color: var(--leaf-700);
}

.entry-head-text {
  min-width: 0;
}

.entry-head h2 {
  margin: 0 0 2px;
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.15;
}

.entry-attribution {
  margin: 0;
  color: var(--ink-600);
  font-size: var(--text-sm);
}

.entry-attribution strong {
  color: var(--ink-900);
  font-weight: 700;
}

.entry-attribution code {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}

.entry-sep {
  padding: 0 4px;
  color: var(--ink-400);
}

.entry-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: var(--space-6);
  padding-top: var(--space-5);
}

.entry-text {
  min-width: 0;
}

/* the quoted speech stays quiet so the character and tested capability lead */
.entry-speech {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.42;
}

.entry-speech p {
  margin: 0;
}

.entry-speech-cont {
  margin-top: var(--space-3) !important;
  color: var(--ink-800);
  font-size: var(--text-md);
}

.entry-speaker {
  margin: var(--space-4) 0 0;
  color: var(--ink-600);
  font-size: var(--text-sm);
  font-style: italic;
}

/* ---- the seal: withheld from the model --------------------------------- */

.entry-seal {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-leaf);
  background: var(--vellum-page);
}

.entry-seal h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  color: var(--rubric);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.entry-seal-note {
  margin: 0 0 var(--space-4);
  color: var(--ink-600);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.seal-list {
  margin: 0;
}

.seal-list > div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--space-4);
  padding: 8px 0;
  border-top: 1px solid var(--border-subtle);
}

.seal-list dt {
  color: var(--rubric);
  font-size: var(--text-xs);
  font-weight: 700;
}

.seal-list dd {
  margin: 0;
  color: var(--ink-900);
  font-size: var(--text-sm);
}

/* ---- the marginal apparatus -------------------------------------------- */

.entry-apparatus {
  min-width: 0;
  padding-left: var(--space-5);
  border-left: 1px solid var(--vellum-edge);
}

.entry-apparatus h3 {
  margin: 0 0 var(--space-2);
  color: var(--ink-500);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.entry-apparatus dl {
  margin: 0;
}

.apparatus-row {
  padding: 5px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.apparatus-row dt {
  color: var(--ink-500);
  font-size: var(--text-2xs);
  letter-spacing: 0.02em;
}

.apparatus-row dd {
  margin: 1px 0 0;
  color: var(--ink-900);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
}

/* un-illuminated: recorded, but not written out under this state */
.apparatus-row.is-sealed dd {
  color: var(--ink-400);
  -webkit-text-stroke: 0.4px var(--ink-500);
  text-decoration: underline dotted var(--ink-400);
  text-underline-offset: 3px;
}

.apparatus-gate {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: var(--space-3) 0 0;
  color: var(--gilt-800);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
}

.apparatus-gate .sigil {
  margin-top: 1px;
}

.entry-foot {
  padding-top: var(--space-5);
}

/* ---- sections ---------------------------------------------------------- */

.codex-section,
.home-specimen,
.home-composition,
.home-layers {
  padding: var(--space-12) 0 0;
  border-top: 1px solid var(--vellum-edge);
}

.section-head {
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-6);
}

.section-head h2 {
  margin: 0 0 var(--space-2);
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.section-head p {
  margin: 0;
  color: var(--ink-600);
  line-height: var(--leading-relaxed);
}

.specimen-loading,
.specimen-error {
  margin: 0;
  padding: var(--space-6);
  border: 1px dashed var(--border-base);
  border-radius: var(--radius-leaf);
  color: var(--ink-600);
}

.specimen-error {
  border-color: var(--rubric);
  background: var(--rubric-bg);
  color: var(--rubric);
}

/* ---- distribution ------------------------------------------------------ */

.bar-figure {
  max-width: 900px;
  overflow-x: auto;
}

.bar-table {
  width: 100%;
  border-collapse: collapse;
}

.bar-table thead th {
  padding: 0 var(--space-3) var(--space-2) 0;
  border-bottom: 2px solid var(--ink-950);
  color: var(--ink-600);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-align: left;
  text-transform: uppercase;
}

.bar-table tbody th {
  padding: 7px var(--space-4) 7px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--ink-900);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.bar-table td {
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.bar-table-sigil {
  width: 28px;
  padding-right: var(--space-2) !important;
  color: var(--leaf-700);
}

.bar-table .numeric {
  padding-left: var(--space-4);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.bar-table-plot {
  width: 46%;
}

.bar-track {
  display: block;
  width: 100%;
  height: 9px;
}

.bar-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bar-track-shape {
  fill: var(--vellum-sunk);
}

.bar-fill-shape {
  fill: var(--leaf-600);
}

/* ---- the quire: how an entry is made ----------------------------------- */

.quire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  counter-reset: quire;
  list-style: none;
}

.quire li {
  counter-increment: quire;
  padding-top: var(--space-4);
  border-top: 1px solid var(--vellum-edge);
}

.quire li::before {
  content: counter(quire, upper-roman);
  display: block;
  margin-bottom: var(--space-2);
  color: var(--gilt-800);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.quire h3 {
  margin: 0 0 var(--space-2);
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.quire p {
  margin: 0;
  color: var(--ink-800);
  line-height: var(--leading-relaxed);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Below this the two leaves are too narrow to be pages; the book folds shut. */
@media (max-width: 1180px) {
  .codex-spread {
    grid-template-columns: minmax(0, 1fr);
  }

  .codex-spread {
    --fore-edge: var(--space-4);
  }

  .spread-leaf {
    min-height: 0;
    padding: var(--space-10) var(--space-6);
  }

  .spread-verso,
  .spread-recto {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
    box-shadow: none;
  }

  .spread-recto {
    border-left: 0;
    border-top: 1px solid var(--vellum-edge);
  }

  .opening-title {
    font-size: var(--text-3xl);
  }
}

@media (max-width: 760px) {
  .entry-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-apparatus {
    padding-left: 0;
    padding-top: var(--space-4);
    border-left: 0;
    border-top: 1px solid var(--vellum-edge);
  }
}

@media (max-width: 640px) {
  .codex-runninghead,
  .site-header,
  .codex-main,
  .home-main,
  .codex-colophon,
  .site-footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .opening-title {
    font-size: var(--text-2xl);
    max-width: none;
  }

  .opening-title .line {
    display: inline;
  }

  .opening-title .line + .line {
    text-indent: 0;
  }

  .entry-leaf {
    padding: var(--space-5) var(--space-4);
  }

  .bar-table-plot {
    width: 34%;
  }
}

.docs-content {
  max-width: 1080px;
  margin: 0 auto;
}

.docs-content > h1,
.docs-content > p {
  max-width: 760px;
}

.docs-content > h1 {
  margin: 0 0 var(--space-3);
  color: var(--leaf-950);
  font-size: var(--text-3xl);
  line-height: 1.12;
}

/* Explorer */
.container-fluid {
  width: 100%;
  max-width: var(--explorer-content-max);
  padding: 0 24px;
  margin: 0 auto;
}

.navbar {
  position: relative;
  z-index: 3000;
  min-height: 56px;
  border: 0;
  margin-bottom: 20px;
}

.navbar-default {
  background: var(--vellum-leaf);
  border-color: transparent;
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(10px);
}

.navbar-static-top {
  border-width: 0 0 1px;
}

.navbar-header {
  float: left;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  float: left;
  height: 56px;
  padding: 13px 8px 13px 0;
  color: var(--text-strong);
  font-size: var(--text-lg);
  font-weight: 650;
  line-height: 1;
}

.nav {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.navbar-nav {
  float: left;
}

.navbar-nav > li {
  position: relative;
  float: left;
}

.navbar-nav > li > a {
  display: block;
  padding: 17px 13px;
  color: var(--text-main);
  line-height: 20px;
}

.navbar-nav > li > a:hover,
.navbar-nav > li.open > a,
.navbar-brand:hover {
  background: var(--leaf-100);
  color: var(--palia-blue-700);
}

.navbar-right {
  float: right;
}

.navbar-form {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}

.form-control,
input,
select,
textarea {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--palia-blue-400);
  box-shadow: var(--shadow-xs);
}

.form-control,
input,
select {
  height: 34px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
}

textarea {
  padding: 8px;
}

.btn,
button,
input[type="submit"] {
  display: inline-block;
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
  background: var(--palia-blue-100);
  border-color: var(--palia-blue-400);
  transform: translateY(-1px);
}

.btn-link {
  border: 0;
  background: transparent;
  color: var(--accent-dark);
  padding: 0;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 4000;
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  min-width: 180px;
  max-width: min(720px, calc(100vw - 24px));
  padding: 6px;
  margin: 2px 0 0;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  text-align: left;
  transition: opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-soft-out),
    visibility var(--motion-fast) var(--ease-standard);
}

.dropdown.open > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-menu > li > a,
.dropdown-menu a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-main);
  white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu a:hover {
  background: var(--palia-blue-100);
}

.dropdown-menu-wide {
  width: 560px;
}

.dropdown-menu-case {
  width: 520px;
}

.inmenuitem {
  padding: 10px 14px;
  color: var(--text);
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 3px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 0;
  margin: 22px 0 18px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--vellum-page);
}

.nav-tabs > li {
  float: left;
  margin-bottom: 0;
}

.nav-tabs > li > a {
  display: block;
  padding: 9px 12px;
  margin-right: 2px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-main);
  transition: background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-soft-out),
    box-shadow var(--motion-fast) var(--ease-soft-out);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  color: var(--bg-surface-raised);
  background: var(--palia-blue-600);
  border-color: var(--palia-blue-600);
  box-shadow: var(--shadow-md);
}

.nav-tabs > li > a:hover {
  background: var(--palia-blue-100);
  transform: translateY(-1px);
}

.nav-tabs::after,
.navbar::after,
.container-fluid::after,
#pagebody::after {
  display: table;
  clear: both;
  content: "";
}








.info-tip {
  position: relative;
  z-index: 2;
  display: inline-grid;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  place-items: center;
  color: var(--text-muted);
  cursor: help;
  line-height: 1;
  vertical-align: middle;
}

.info-tip:focus-visible {
  outline: 2px solid var(--leaf-600);
  outline-offset: 2px;
  border-radius: 50%;
}

.info-tip-mark {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid var(--border-base);
  border-radius: 50%;
  background: var(--vellum-page);
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 900;
}

.info-tip-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 60;
  width: max-content;
  max-width: min(320px, calc(100vw - 48px));
  padding: 8px 10px;
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-sm);
  background: var(--vellum-leaf);
  box-shadow: var(--shadow-lift);
  color: var(--text-main);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.38;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  text-transform: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-soft-out),
    visibility var(--motion-fast) var(--ease-standard);
  visibility: hidden;
  white-space: normal;
}


.info-tip:hover .info-tip-panel,
.info-tip:focus-visible .info-tip-panel,
.info-tip:focus-within .info-tip-panel {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}




















.explorer-title {
  margin: 0 0 6px;
  font-size: var(--text-xl);
  line-height: 1.22;
  font-weight: 720;
}

.explorer-subtitle {
  margin: 0 0 14px;
  color: var(--muted);
}

.layer-content {
  max-width: var(--explorer-content-max);
  min-width: 0;
  overflow-wrap: anywhere;
  padding-bottom: var(--space-4);
}

.scope-path {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  margin: 0 0 14px;
}

.scope-step {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text);
}

.scope-step span {
  color: var(--muted);
  font-size: var(--text-2xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.scope-step strong {
  font-weight: 650;
}

.scope-step.is-active {
  border-color: var(--leaf-500);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.scope-step:hover {
  background: var(--bg-mint);
  transform: translateY(-1px);
}

.scope-chevron {
  align-self: center;
  color: var(--border-strong);
  font-size: var(--text-md);
}

.title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.title-status {
  flex: 0 0 auto;
}

.explorer-control-panel {
  box-sizing: border-box;
  max-width: min(var(--explorer-content-max), 100%);
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--vellum-page);
  box-shadow: var(--shadow-md);
}

.explorer-toolbelt {
  margin-bottom: var(--space-4);
  padding: 10px 12px;
  border-color: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--vellum-page);
  box-shadow: var(--shadow-md);
}

.selector-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(180px, 0.9fr) minmax(280px, 1.6fr);
  gap: 12px;
  align-items: end;
}

.explorer-toolbelt .selector-row {
  grid-template-columns: minmax(126px, 0.7fr)
    minmax(150px, 0.82fr)
    minmax(170px, 0.9fr)
    minmax(180px, 0.95fr)
    minmax(78px, 0.34fr)
    max-content;
  gap: 10px;
  align-items: end;
}

.explorer-toolbelt .selector-case {
  grid-column: auto;
}

.explorer-toolbelt .selector-case select,
.explorer-toolbelt .selector-case input {
  font-size: var(--text-base);
  text-align: center;
}

.explorer-toolbelt-context .selector-row {
  grid-template-columns: repeat(2, minmax(180px, 260px));
  justify-content: start;
}

.selector-field {
  display: block;
  min-width: 0;
}

.explorer-toolbelt .selector-field {
  overflow: hidden;
}

.selector-field span {
  display: block;
  margin-bottom: 5px;
  color: var(--palia-blue-700);
  font-size: var(--text-2xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.selector-field select {
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

.explorer-toolbelt .selector-field select,
.explorer-toolbelt .selector-field input {
  width: 100%;
  height: 30px;
  padding: 4px 24px 4px 9px;
  font-size: var(--text-md);
  line-height: 1.15;
}

.sequence-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  grid-column: 1 / -1;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
  white-space: nowrap;
}

.explorer-toolbelt .sequence-controls {
  grid-column: auto;
  justify-content: flex-end;
  min-width: max-content;
  margin-top: 0;
}

.sequence-index,
.matching-count {
  margin-right: 4px;
  color: var(--muted);
}

.matching-count {
  padding: 5px 9px;
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-md);
  background: var(--leaf-100);
  color: var(--text-muted);
}


.explorer-toolbelt .control-button,
.explorer-toolbelt .matching-count {
  min-height: 30px;
  padding: 4px 8px;
  font-size: var(--text-base);
  line-height: 1.2;
}





.current-case-strip {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-lg);
  background: var(--leaf-50);
  box-shadow: none;
}

.current-case-strip strong,
.current-case-strip span {
  display: block;
}

.current-case-strip strong {
  margin-bottom: 3px;
}

.current-case-strip > div:first-child span {
  color: var(--muted);
}

.case-strip-meta {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-end;
  gap: 5px;
  min-width: 280px;
}

.case-strip-meta span {
  display: inline-block;
}

.case-strip-meta > span:not(.status-label) {
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--vellum-page);
}

.advanced-filters {
  margin-top: 12px;
}

.advanced-filters summary {
  color: var(--leaf-700);
  cursor: pointer;
  font-weight: 700;
  width: fit-content;
}

.advanced-filters[open] > summary {
  margin-bottom: var(--space-2);
}

.advanced-filters[open] .filtertable {
  animation: softReveal var(--motion-normal) var(--ease-soft-out) both;
}

.advanced-filters .filtertable {
  margin-top: 8px;
}

.case-pre,
.case-json {
  overflow: auto;
  max-height: 70vh;
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: 1.45;
  white-space: pre-wrap;
}

.case-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-4);
}

.case-actions button {
  margin-right: 0;
}

.json-inspector {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-lg);
  background: var(--vellum-page);
  box-shadow: var(--shadow-md);
}

.json-inspector-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
  gap: var(--space-4);
  align-items: end;
  margin-bottom: var(--space-4);
}

.json-inspector-head h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-xl);
  line-height: 1.15;
}

.json-inspector-head p {
  margin: 0;
  color: var(--text-muted);
}

.json-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-3);
}

.json-stat-strip span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-sm);
  background: var(--leaf-100);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 720;
}

.json-stat-strip strong {
  color: var(--text-strong);
  font-size: var(--text-sm);
}

.json-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.json-field-card {
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--vellum-page);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: background-color var(--motion-normal) var(--ease-standard),
    border-color var(--motion-normal) var(--ease-standard),
    box-shadow var(--motion-normal) var(--ease-soft-out),
    transform var(--motion-normal) var(--ease-soft-out);
}

.json-field-card:hover,
.json-field-card:focus-within {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.json-field-card.kind-array {
  border-left-color: var(--moss-400);
}

.json-field-card.kind-object {
  border-left-color: var(--palia-blue-600);
}

.json-field-card.kind-string {
  border-left-color: var(--wood-500);
}

.json-field-card > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px var(--space-3);
  align-items: start;
  padding: var(--space-3);
  cursor: pointer;
  list-style: none;
}

.json-field-card > summary::-webkit-details-marker {
  display: none;
}

.json-field-name {
  min-width: 0;
  color: var(--text-strong);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.json-field-kind {
  align-self: start;
  padding: 1px 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--palia-blue-100);
  color: var(--palia-blue-700);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.json-field-card strong {
  grid-column: 1 / -1;
  justify-self: start;
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.json-field-card small {
  grid-column: 1 / -1;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.json-field-body {
  max-height: 560px;
  padding: 0 var(--space-3) var(--space-3);
  border-top: 1px solid var(--border-subtle);
  overflow: auto;
}

.json-field-body > .object-table,
.json-field-body > .nested-list {
  margin-bottom: 0;
}

.json-field-body .object-table,
.json-field-body .object-table tbody,
.json-field-body .object-table tr,
.json-field-body .object-table th,
.json-field-body .object-table td {
  display: block;
  width: 100%;
}

.json-field-body .object-table {
  table-layout: auto;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

.json-field-body .object-table tr {
  margin: 0 0 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--vellum-page);
  overflow: hidden;
}

.json-field-body .object-table th,
.json-field-body .object-table td {
  border: 0;
  white-space: normal;
}

.json-field-body .object-table th {
  padding: 8px 10px 4px;
  background: var(--leaf-100);
  color: var(--text-strong);
  font-size: var(--text-xs);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.json-field-body .object-table td {
  padding: 6px 10px 9px;
  background: var(--vellum-page);
  color: var(--text-main);
  font-size: var(--text-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.json-field-body .nested-list {
  display: grid;
  gap: 8px;
}

.json-raw-details {
  margin: 0 0 var(--space-4);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  background: var(--vellum-page);
  overflow: hidden;
}

.json-raw-details > summary {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.json-raw-details > summary::-webkit-details-marker {
  display: none;
}

.json-raw-details > summary span {
  color: var(--text-strong);
  font-weight: 850;
}

.json-raw-details > summary small {
  color: var(--text-faint);
  font-weight: 650;
  text-align: right;
}

.json-raw-details .case-json {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0;
}

.muted {
  color: var(--muted);
}

.empty-state {
  color: var(--muted);
}

.notice {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 9px 11px;
  margin: 10px 0;
}

.error {
  border-color: var(--status-fail);
  background: var(--status-fail-bg);
  color: var(--rubric);
}

.status-label {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 6px 2px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xs);
  background: var(--vellum-page);
  color: var(--ink-600);
  font-size: 90%;
}

.status_complete {
  border-bottom-color: var(--moss-600);
}

.status_partial {
  border-bottom-color: var(--warning);
}

.status_generated {
  border-bottom-color: var(--generated);
}

.status_review,
.status_warning {
  border-bottom-color: var(--warning);
}

.status_fail {
  border-bottom-color: var(--fail);
}

.audit-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.audit-summary-card {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--vellum-page);
}

.audit-summary-card span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.audit-summary-card strong {
  color: var(--text-strong);
  font-size: var(--text-xl);
  line-height: 1.1;
}

.audit-summary-card.level-fail {
  border-left-color: var(--status-fail);
}

.audit-summary-card.level-review {
  border-left-color: var(--status-review);
}

.audit-summary-card.level-partial {
  border-left-color: var(--moss-500);
}

.warning-groups {
  display: grid;
  gap: var(--space-4);
}

.warning-group {
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--vellum-page);
  overflow: hidden;
}

.warning-group.level-fail {
  border-left-color: var(--status-fail);
}

.warning-group.level-review {
  border-left-color: var(--status-review);
}

.warning-group.level-partial {
  border-left-color: var(--moss-500);
}

.warning-group header {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.warning-group h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-md);
}

.warning-group header span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 750;
}

.warning-group ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.warning-group li {
  display: grid;
  grid-template-columns: minmax(170px, 0.35fr) minmax(0, 1fr);
  gap: var(--space-3);
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.warning-group li:last-child {
  border-bottom: 0;
}

.warning-group code {
  color: var(--text-strong);
  font-size: var(--text-sm);
  white-space: normal;
  overflow-wrap: anywhere;
}

.warning-group p {
  margin: 0;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

table {
  border-collapse: collapse;
}

table.statistics,
.result-table,
.keyvalue,
.object-table,
.filtertable {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 20px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.keyvalue,
.object-table {
  table-layout: fixed;
}

table.statistics th,
table.statistics td,
.result-table th,
.result-table td,
.keyvalue th,
.keyvalue td,
.object-table th,
.object-table td,
.filtertable th,
.filtertable td {
  border: 1px solid var(--border);
  padding: 7px 9px;
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
}

table.statistics th,
.result-table th,
.keyvalue th,
.object-table th,
.filtertable th {
  background: var(--bg-mint);
  font-weight: 700;
  white-space: nowrap;
}

.keyvalue th,
.object-table th {
  color: var(--text);
  background: var(--leaf-100);
}

.keyvalue td,
.object-table td,
.result-table td,
.statistics td {
  background: var(--vellum-page);
}

.keyvalue th {
  width: 210px;
}

.keyvalue td,
.object-table td,
.result-table td,
.statistics td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.object-table-nested {
  margin: 0;
  font-size: 95%;
}

.object-table-nested th {
  width: 160px;
}

.filtertable {
  margin-bottom: 8px;
}

.filtertable th {
  width: 180px;
  font-weight: 400;
}

.filtertable select,
.filtertable input {
  width: 100%;
}

.filter-actions {
  margin-top: 8px;
  white-space: nowrap;
}

.filter-actions button {
  margin-right: 6px;
}

.btn-primary,
button.btn-primary {
  border-color: var(--leaf-300);
  background: var(--leaf-600);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover,
button.btn-primary:hover {
  border-color: var(--leaf-300);
  background: var(--leaf-600);
  box-shadow: var(--shadow-lg);
}

button.is-success {
  border-color: var(--status-complete);
  background: var(--bg-mint);
  color: var(--leaf-900);
}

button.is-error {
  border-color: var(--status-fail);
  background: var(--vellum-leaf);
  color: var(--rubric);
}

.case-selector-meta {
  margin-top: 10px;
}

.case-selector-meta table {
  width: 100%;
}

.case-selector-controls {
  margin: 8px 0;
  white-space: nowrap;
}

.case-selector-controls a {
  display: inline;
  padding: 0;
}

.case-id-input {
  width: 310px;
}

.inline-details {
  display: inline;
}

.inline-details summary {
  display: inline;
  color: var(--leaf-700);
  cursor: pointer;
}

.nested-list > .object-table,
.nested-list > .object-table-nested {
  margin-bottom: 8px;
}

.search-form {
  max-width: 860px;
}

.search-form .filtertable th {
  width: 150px;
}

.main-content {
  max-width: var(--explorer-content-max);
  margin: 0 auto 50px;
}

.page-title-row {
  margin-bottom: 12px;
}

.audience-note {
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-5);
  color: var(--ink-600);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}





.source-field-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.source-field-list span {
  max-width: 220px;
  padding: 4px 7px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  background: var(--vellum-page);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.entity-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-lg);
  background: var(--leaf-50);
  box-shadow: var(--shadow-soft);
  transition: transform var(--motion-normal) var(--ease-soft-out),
    box-shadow var(--motion-normal) var(--ease-soft-out),
    border-color var(--motion-normal) var(--ease-standard),
    background-color var(--motion-normal) var(--ease-standard);
}

.entity-hero:hover,
.semantic-panel:hover,
.evidence-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.entity-hero h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--leaf-950);
}

.entity-hero p {
  margin: 0 0 var(--space-3);
  color: var(--muted);
}

.entity-facts {
  min-width: 0;
}

.character-profile-page {
  max-width: 1360px;
  margin: 0 auto var(--space-4);
}

.character-profile-hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
}

.character-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: var(--space-4);
  align-items: start;
  margin: 0 0 var(--space-4);
}

.character-profile-grid .semantic-panel {
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-leaf);
  background: var(--vellum-leaf);
}

.profile-voice-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: start;
}

.profile-social-layout {
  display: grid;
  gap: 14px;
}

.profile-field {
  min-width: 0;
}

.profile-field-wide {
  grid-column: 1 / -1;
}

.profile-field h4 {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 760;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.profile-field-content {
  min-width: 0;
  color: var(--text);
}

.profile-field-quotes .chip-list {
  display: grid;
  gap: 7px;
}

.profile-field-quotes .data-chip {
  width: fit-content;
  max-width: 100%;
  border-color: var(--leaf-300);
  background: var(--leaf-100);
  line-height: 1.35;
}

.profile-field-compact {
  padding-top: 2px;
}

.state-seed-page {
  max-width: 1360px;
  margin: 0 auto var(--space-4);
}

.state-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.state-snapshot-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-md);
  background: var(--vellum-page);
  box-shadow: var(--shadow-sm);
}

.state-snapshot-card > span,
.state-ref-card span,
.state-audit-details summary span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 760;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.state-snapshot-card strong {
  display: block;
  color: var(--text-main);
  font-size: var(--text-lg);
  font-weight: 820;
  line-height: 1.35;
}

.state-snapshot-card small {
  display: block;
  margin-top: 5px;
  color: var(--text-faint);
  font-size: var(--text-xs);
}

.state-seed-layout {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.state-seed-layout .semantic-panel,
.state-audit-details {
  margin-bottom: var(--space-4);
}

.state-value-group-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.state-value-group {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--vellum-page);
}

.state-value-group h4 {
  margin: 0 0 10px;
  color: var(--palia-blue-700);
  font-size: var(--text-xs);
  font-weight: 820;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.state-value-group dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.state-value-group dl > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.state-value-group dt {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 760;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.state-value-group dd {
  min-width: 0;
  margin: 0;
}

.state-value-chip {
  display: inline-block;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-sm);
  background: var(--leaf-100);
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.state-side-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
}

.state-side-panel > .state-audit-details {
  grid-column: 1 / -1;
}

.state-ref-grid {
  display: grid;
  gap: 10px;
}

.state-ref-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--vellum-page);
}

.state-ref-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.state-ref-card span {
  margin: 0;
}

.state-ref-card strong,
.state-audit-details summary strong {
  color: var(--text-main);
  font-size: var(--text-xl);
  font-weight: 850;
}

.state-ref-card p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.state-ref-card details {
  margin-top: 8px;
}

.state-ref-card summary,
.state-audit-details summary {
  color: var(--palia-blue-700);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 780;
}

.state-ref-chip-list .data-chip {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}

.state-license-summary {
  display: grid;
  gap: 12px;
}

.state-license-summary .detail-grid {
  grid-template-columns: 1fr;
}

.state-license-summary .state-audit-details {
  margin: 0;
}

.state-audit-details {
  padding: 12px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  background: var(--vellum-page);
}

.state-audit-details summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  list-style: none;
}

.state-audit-details summary::-webkit-details-marker {
  display: none;
}

.state-audit-details > .object-table {
  margin-top: 10px;
}

.semantic-grid {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
}

.semantic-grid.two-col,
.validator-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.validator-layout {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
}

.semantic-panel {
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-md);
  background: var(--vellum-page);
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-normal) var(--ease-soft-out),
    box-shadow var(--motion-normal) var(--ease-soft-out),
    border-color var(--motion-normal) var(--ease-standard),
    background-color var(--motion-normal) var(--ease-standard);
}

.compact-grid {
  margin-bottom: var(--space-3);
}

.technical-details {
  margin: 0 0 var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--vellum-page);
  box-shadow: var(--shadow-sm);
}

.technical-details > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: flex-start;
  padding: 12px 14px;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 750;
  list-style: none;
}

.technical-details > summary::-webkit-details-marker {
  display: none;
}

.technical-details > summary::before {
  flex: 0 0 auto;
  color: var(--palia-blue-700);
  content: "+";
  font-weight: 900;
}

.technical-details[open] > summary::before {
  content: "-";
}

.technical-details > summary > .technical-details-title {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-main);
}

.technical-details-body {
  padding: 0 14px 14px;
}

.technical-details-body > .source-field-list {
  justify-content: flex-start;
  margin: 0 0 var(--space-3);
  padding-top: 2px;
}

.technical-details-body .semantic-panel {
  margin-bottom: var(--space-3);
  background: var(--vellum-page);
  box-shadow: none;
}

.technical-details-body .semantic-panel:hover {
  border-color: var(--border-soft);
  box-shadow: none;
  transform: none;
}

.semantic-panel-head {
  margin-bottom: var(--space-3);
}

.semantic-panel-head h3 {
  margin: 0;
  font-size: var(--text-md);
  letter-spacing: 0;
  color: var(--leaf-950);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
}

.detail-grid > div {
  min-width: 0;
}

.detail-grid dt {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.detail-grid dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.chip-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  vertical-align: middle;
}

.data-chip {
  display: inline-block;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-sm);
  background: var(--leaf-100);
  color: var(--text);
  overflow-wrap: anywhere;
}

.policy-overview h2 {
  margin-bottom: var(--space-2);
}

.policy-overview p + p {
  margin-top: var(--space-2);
}

.policy-artifact-panel {
  background: var(--leaf-50);
}

.policy-artifact-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.policy-json-button {
  flex: 0 0 auto;
  padding: 7px 11px;
  font-size: var(--text-sm);
}

.policy-artifact-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--vellum-page);
}

.policy-artifact-meta dt,
.policy-artifact-meta dd {
  margin: 0;
}

.policy-artifact-meta dt {
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.policy-artifact-meta dd {
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.artifact-data-link {
  font-weight: 750;
}

.policy-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.policy-section {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-md);
  background: var(--vellum-page);
}

.policy-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.policy-section-head h4 {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-base);
  letter-spacing: 0;
}

.policy-section-head span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 750;
  white-space: nowrap;
}

.policy-section p {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
}

.policy-summary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin: 0 0 var(--space-2);
}

.policy-summary-list div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-sm);
  background: var(--leaf-100);
}

.policy-summary-list dt {
  margin-bottom: 2px;
  color: var(--palia-blue-700);
  font-size: var(--text-2xs);
  font-weight: 760;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.policy-summary-list dd {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: 720;
  line-height: 1.25;
}

.policy-count-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 var(--space-2);
}

.policy-count-item {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-sm);
  background: var(--leaf-100);
}

.policy-count-item strong,
.policy-count-item span {
  display: block;
}

.policy-count-item strong {
  color: var(--leaf-700);
  font-size: var(--text-lg);
  line-height: 1;
}

.policy-count-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1.15;
}

.policy-preview-list {
  display: grid;
  gap: 7px;
  margin: 0 0 var(--space-2);
}

.policy-preview-list > div > span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 760;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.policy-note-list {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.policy-note-list li {
  padding: 8px 10px;
  border: 1px solid var(--gilt-600);
  border-radius: var(--radius-sm);
  background: var(--vellum-leaf);
  color: var(--text);
  font-size: var(--text-xs);
  line-height: 1.3;
}

.policy-raw-fields {
  margin-top: var(--space-2);
}

.policy-raw-fields summary {
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 740;
}

.policy-field-links {
  margin-top: 7px;
}

.warning-chips .data-chip {
  border-color: var(--gilt-600);
  background: var(--vellum-leaf);
}

.fail-chips .data-chip {
  border-color: var(--rubric);
  background: var(--vellum-leaf);
}

.transcript {
  display: grid;
  gap: var(--space-3);
}

.dialogue-panel {
  display: grid;
  gap: 12px;
}

.dialogue-turn,
.turn-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.speaker-tag,
.turn-meta {
  color: var(--ink-600);
  font-size: var(--text-xs);
  font-weight: 500;
}

.turn-meta strong,
.turn-meta span {
  display: block;
}

.turn-meta strong {
  color: var(--leaf-700);
}

.turn-meta span {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 650;
}

.dialogue-bubble {
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  background: var(--vellum-page);
}

.dialogue-bubble p,
.turn-row p {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.6;
}

.state-effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 var(--space-6);
  margin: 0 0 var(--space-5);
  border-top: 2px solid var(--ink-950);
}

.state-effect {
  min-width: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.scene-context-details {
  display: grid;
  gap: 10px;
}

.scene-context-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.scene-context-row span {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scene-context-row strong {
  min-width: 0;
  color: var(--text-strong);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.context-summary-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 var(--space-4);
}

.context-summary-item {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--vellum-page);
  box-shadow: var(--shadow-sm);
}

.context-summary-item span {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.context-summary-item strong {
  display: block;
  margin-top: 6px;
  color: var(--text-main);
  font-size: var(--text-md);
  font-weight: 720;
  overflow-wrap: anywhere;
}

.context-summary-item small {
  display: block;
  margin-top: 4px;
  color: var(--text-faint);
  font-size: var(--text-xs);
  font-weight: 650;
}

.context-summary-item.disclosure {
}

.context-summary-item.history {
}

.effect-label {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.effect-value {
  margin-top: 8px;
  color: var(--text-main);
  font-size: var(--text-md);
  font-weight: 650;
  overflow-wrap: anywhere;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.timeline-graph-shell,
.storyline-graph-shell {
  margin: 0 0 var(--space-4);
}

.graph-scroll {
  overflow: auto;
  padding: 10px 8px 18px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  background: var(--leaf-50);
  box-shadow: var(--shadow-soft);
}

.graph-scroll:focus-visible {
  outline: 2px solid var(--leaf-600);
  outline-offset: 2px;
}

.timeline-graph-board,
.storyline-graph-board {
  position: relative;
}

.timeline-graph-board {
  min-width: 100%;
}

.storyline-graph-board {
  min-width: 0;
  margin: 0 auto;
}

.graph-svg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.graph-svg path {
  fill: none;
  stroke: var(--leaf-100);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.storyline-svg .branch-edge {
  stroke: var(--status-fail-bg);
  stroke-dasharray: 7 7;
}

.graph-node {
  position: absolute;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 34px 13px 15px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  background: var(--vellum-leaf);
  box-shadow: var(--shadow-md);
  transition: border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.graph-node:hover,
.graph-node:focus-visible {
  z-index: 10;
  border-color: var(--leaf-300);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.graph-node:focus-visible {
  outline: 2px solid var(--leaf-600);
  outline-offset: 2px;
}

.graph-node-index {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--ink-400);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: none;
}

.graph-node-subtitle {
  margin: 2px 0 0;
  color: var(--ink-600);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.graph-node h2 {
  min-height: 40px;
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-md);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.graph-node-summary {
  display: -webkit-box;
  min-height: 34px;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  line-height: 1.45;
}

.graph-node-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.graph-node-meta span {
  padding: 4px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--leaf-100);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: 800;
  line-height: 1.2;
}

.timeline-node.stage-unlock {
  border-color: var(--leaf-300);
  background: var(--leaf-50);
}

.storyline-node.role-outcome,
.storyline-node.mutually-exclusive {
  border-color: var(--rubric);
  background: var(--status-fail-bg);
}

.storyline-node.coverage-covered {
  border-color: var(--leaf-300);
}

.storyline-node {
  gap: 5px;
  padding: 12px 34px 12px 14px;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.storyline-node h2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.24;
  overflow-wrap: break-word;
}

.graph-node-when {
  margin: 0;
  color: var(--ink-500);
  font-size: var(--text-2xs);
  overflow-wrap: anywhere;
}

.storyline-node .graph-node-meta {
  font-size: var(--text-2xs);
}

.storyline-node .graph-node-meta span {
  padding: 3px 6px;
  font-size: var(--text-2xs);
}

.graph-detail {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 20;
  display: none;
  width: min(420px, calc(100vw - 56px));
  max-height: 430px;
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-md);
  background: var(--vellum-leaf);
  box-shadow: var(--shadow-lift);
}

.storyline-detail {
  width: min(460px, calc(100vw - 56px));
}

.graph-node.detail-align-right .graph-detail {
  right: 0;
  left: auto;
}

.graph-node:hover .graph-detail,
.graph-node:focus-visible .graph-detail,
.graph-node:focus-within .graph-detail {
  display: grid;
  gap: 12px;
}

.graph-detail h3,
.graph-detail h4,
.graph-detail p {
  margin: 0;
}

.graph-detail h3 {
  color: var(--text-strong);
  font-size: var(--text-lg);
  line-height: 1.25;
}

.graph-detail > p,
.graph-detail-empty {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.graph-detail h4 {
  margin-bottom: 6px;
  color: var(--text-faint);
  font-size: var(--text-2xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.graph-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.graph-detail-grid div,
.graph-detail li {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--vellum-page);
}

.graph-detail-grid dt {
  color: var(--text-faint);
  font-size: var(--text-2xs);
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.graph-detail-grid dd {
  margin: 2px 0 0;
  color: var(--text-main);
  font-size: var(--text-xs);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.graph-detail ul {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.graph-detail li b,
.graph-detail li span,
.graph-detail li small {
  display: block;
}

.graph-detail li b {
  color: var(--text-main);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.graph-detail li span,
.graph-detail li small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  line-height: 1.35;
}

.timeline-node:hover,
.timeline-node:focus-visible,
.timeline-node:focus-within {
  transform: none;
}

.timeline-node .timeline-node-detail {
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: min(520px, calc(100vw - 56px));
  max-height: 430px;
}

.timeline-node .timeline-node-detail.stage-unlock {
  border-color: var(--leaf-300);
  background: var(--leaf-50);
}

.timeline-node:nth-last-child(-n + 2) .timeline-node-detail {
  right: 0;
  left: auto;
}

.timeline-node-detail-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}

.timeline-node-detail-head > div {
  min-width: 0;
}

.timeline-node-detail-index {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--leaf-300);
  border-radius: 50%;
  background: var(--leaf-100);
  color: var(--palia-blue-700);
  font-size: var(--text-xs);
  font-weight: 850;
}

.timeline-node-detail-head h3 {
  margin: 3px 0 0;
  color: var(--text-strong);
  font-size: var(--text-xl);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.timeline-node-description {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: 1.45;
}

.timeline-node-detail-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.timeline-node-detail-sections section {
  min-width: 0;
}

.timeline-node-detail-sections h4 {
  margin: 0 0 7px;
  color: var(--text-faint);
  font-size: var(--text-2xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline-node-detail-sections ul {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.timeline-node-detail-sections li {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--vellum-page);
}

.timeline-node-detail-sections li b,
.timeline-node-detail-sections li span {
  display: block;
}

.timeline-node-detail-sections li b {
  color: var(--text-main);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.timeline-node-detail-sections li span,
.timeline-node-detail .graph-detail-empty {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  line-height: 1.35;
}

.state-technical-grid {
  margin-top: var(--space-4);
}

.contract-matrix {
  width: 100%;
  margin: 0 0 var(--space-4);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.contract-matrix th,
.contract-matrix td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.contract-matrix tr:last-child th,
.contract-matrix tr:last-child td {
  border-bottom: 0;
}

.contract-matrix th {
  width: 190px;
  background: var(--bg-mint);
  color: var(--text);
}

.contract-matrix td:last-child {
  width: 260px;
  color: var(--muted);
}

.evidence-stack {
  display: grid;
  gap: var(--space-3);
}

.evidence-card {
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: transform var(--motion-normal) var(--ease-soft-out),
    box-shadow var(--motion-normal) var(--ease-soft-out),
    border-color var(--motion-normal) var(--ease-standard),
    background-color var(--motion-normal) var(--ease-standard);
}

.evidence-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.evidence-head strong {
  color: var(--leaf-700);
}

.evidence-head span {
  color: var(--muted);
}

.evidence-card p {
  margin: 0;
}

.codex-entry {
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.codex-entry + .codex-entry {
  margin-top: 12px;
}

.codex-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.codex-type {
  color: var(--leaf-700);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.codex-id {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
  text-align: right;
}

.codex-entry blockquote {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--status-generated-bg);
  color: var(--text-main);
}

.codex-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.codex-meta span {
  padding: 5px 8px;
  border-radius: var(--radius-pill);
  background: var(--leaf-100);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.codex-more {
  margin-top: var(--space-3);
}

.codex-more summary {
  width: fit-content;
  color: var(--leaf-700);
  cursor: pointer;
  font-weight: 750;
}

.objectives-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 0 0 var(--space-4);
}

.expectation-source-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(420px, 1.6fr);
  gap: 14px;
  align-items: start;
}

.expectation-source-card,
.expectation-delta-card {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
}

.expectation-source-card-wide {
  grid-column: auto;
}

.expectation-delta-card {
  grid-column: 1 / -1;
}

.expectation-source-card h3,
.expectation-delta-card h4,
.expectation-state-card h4 {
  margin: 0;
  color: var(--leaf-950);
  letter-spacing: 0;
}

.expectation-source-card h3,
.expectation-delta-card h4 {
  margin-bottom: 10px;
  font-size: var(--text-md);
}

.expectation-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.expectation-state-card {
  min-width: 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
  background: none;
}

.expectation-state-card h4 {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
}

.expectation-state-card > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text-main);
  font-size: var(--text-md);
  line-height: 1.25;
}

.expectation-field-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.expectation-field-list div {
  min-width: 0;
}

.expectation-field-list dt {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.expectation-field-list dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.objective-group {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-raised);
  box-shadow: var(--shadow-md);
}

.objective-group h3 {
  margin: 0 0 12px;
  color: var(--leaf-950);
  font-size: var(--text-md);
}

.objective-group ul,
.rule-card ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.objective-group li,
.rule-card li {
  position: relative;
  padding: 8px 0 8px 26px;
  border-top: 1px solid var(--leaf-300);
}

.objective-group li:first-child,
.rule-card li:first-child {
  border-top: 0;
}

.criterion-item b {
  display: block;
  margin: 0 0 5px;
  color: var(--leaf-950);
  font-size: var(--text-md);
  line-height: 1.25;
}

.criterion-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: 1.45;
}

.criterion-item small {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.criterion-item small span {
  display: inline-block;
  margin-right: 6px;
  color: var(--leaf-950);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.criterion-basis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.criterion-basis span {
  padding: 3px 7px;
  border: 1px solid var(--leaf-300);
  border-radius: var(--radius-sm);
  background: var(--leaf-100);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: 700;
}

.objective-group li::before,
.rule-card li::before {
  position: absolute;
  left: 0;
  top: 12px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--palia-blue-600);
  border-radius: 50%;
  background: var(--palia-blue-100);
  content: "";
}

.objective-group.allowed li::before {
  border-color: var(--lavender-500);
  background: var(--status-generated-bg);
}

.objective-group.forbidden li::before,
.rule-card.danger li::before {
  border-color: var(--status-fail);
  background: var(--status-fail-bg);
}

.validation-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 0 0 var(--space-4);
}

.rule-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-raised);
  box-shadow: var(--shadow-md);
}

.rule-card.danger {
  border-color: var(--rubric);
  background: var(--surface);
}

.rule-title {
  margin: 0 0 var(--space-2);
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
}

.metric-bar {
  margin-bottom: var(--space-3);
}

.metric-bar > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 4px;
  color: var(--muted);
}

.metric-bar strong {
  color: var(--text);
}

.metric-track {
  display: block;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-mint);
  overflow: hidden;
}

.metric-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--leaf-600);
}

.dense-list {
  margin: 0;
  padding-left: 18px;
}

.pill-lite {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 1px 5px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

/* Admin compatibility */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 15px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-950);
  font-size: var(--text-lg);
}

.brand-mark {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--border-base);
  background: var(--surface);
  font-weight: 700;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-button,
.nav-links a {
  padding: 4px 8px;
  border: 1px solid var(--border-base);
  background: var(--surface);
  color: var(--text);
}

.nav-button.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.admin-page {
  padding: 20px;
}

.intro {
  max-width: 1100px;
  margin: 0 auto 18px;
}


.intro-copy {
  color: var(--text-muted);
}

.admin-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  max-width: 1380px;
  margin: 0 auto;
}

.admin-sidebar,
.admin-editor {
  min-width: 0;
}

.admin-sidebar label,
.admin-editor label,
.structured-sidebar label {
  display: block;
  margin-bottom: 10px;
}

.admin-sidebar label span,
.admin-editor label span,
.structured-sidebar label span {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-600);
}

.admin-sidebar input,
.admin-sidebar select,
.admin-editor input,
.admin-editor select {
  width: 100%;
}

.admin-view-switch {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.document-list {
  border: 1px solid var(--border);
  max-height: 68vh;
  overflow: auto;
}

.document-row {
  display: block;
  width: 100%;
  padding: 8px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-align: left;
}

.document-row span,
.document-row small {
  display: block;
  color: var(--muted);
}

.document-row strong {
  display: block;
  color: var(--text);
}

.document-row.is-selected {
  background: var(--accent-soft);
}

.editor-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

#jsonEditor,
.structured-editor {
  width: 100%;
  min-height: 62vh;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-message {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 8px;
  white-space: pre-wrap;
}

.admin-message.is-error,
.is-error {
  border-color: var(--rubric);
  color: var(--rubric);
}

.structured-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.structured-kv {
  border: 1px solid var(--border);
  padding: 6px;
}

.structured-kv span,
.structured-kv strong {
  display: block;
}

.hidden {
  display: none !important;
}

details[open] > :not(summary) {
  animation: softReveal var(--motion-normal) var(--ease-soft-out) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 860px) {
  #page {
    margin-top: 24px;
  }

  #logo {
    margin-left: 0;
  }

  #menu,
  #content {
    float: none;
    width: auto;
    margin-left: 0;
    text-align: left;
  }

  #menu {
    margin-bottom: 24px;
  }

  .navbar-header,
  .navbar-nav,
  .navbar-nav > li,
  .navbar-right {
    float: none;
  }

  .navbar-nav > li > a {
    padding: 8px 12px;
  }

  .dropdown-menu {
    position: static;
    display: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    width: auto;
    max-width: none;
    box-shadow: none;
  }

  .dropdown.open > .dropdown-menu {
    display: block;
  }

  .navbar-form {
    padding: 8px 12px;
    display: block;
  }

  .navbar-form input {
    width: 100%;
    margin-bottom: 6px;
  }

  .home-shell {
    width: min(100% - 32px, 1180px);
    padding-top: 18px;
  }

  .home-nav,
  .home-hero {
    display: block;
  }

  .home-nav nav {
    margin-top: var(--space-3);
  }

  .home-preview {
    margin-top: var(--space-6);
  }

  .home-metrics,
  .home-layers {
    grid-template-columns: 1fr;
  }

  .dialogue-preview,
  .preview-dialogue-bubble {
    grid-template-columns: 1fr;
  }

  .nav-tabs > li {
    float: none;
  }

  .layer-tab-groups {
    grid-template-columns: 1fr;
  }

  .expectation-source-layout,
  .expectation-state-grid {
    grid-template-columns: 1fr;
  }

  .layer-field-toolbar,
  .audience-note {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .source-field-list {
    justify-content: flex-start;
  }

  .layer-tab-group-head {
    display: block;
  }

  .selector-row {
    grid-template-columns: 1fr;
  }

  .explorer-toolbelt .selector-row {
    grid-template-columns: 1fr;
  }

  .explorer-toolbelt .selector-case {
    grid-column: auto;
  }

  .explorer-toolbelt .sequence-controls {
    grid-column: auto;
    justify-content: flex-start;
  }

  .explorer-control-panel {
    padding: 12px;
  }

  .sequence-controls,
  .current-case-strip,
  .case-strip-meta {
    display: block;
    min-width: 0;
  }

  .sequence-controls .control-button,
  .sequence-controls .sequence-index,
  .sequence-controls .matching-count {
    margin: 0 4px 6px 0;
  }

  .case-strip-meta > span {
    margin: 0 4px 4px 0;
  }

  .scope-path {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .scope-step {
    min-width: 0;
  }

  .scope-chevron {
    display: none;
  }

  .explorer-title {
    font-size: var(--text-xl);
  }

  .entity-hero,
  .character-profile-hero,
  .character-profile-grid,
  .profile-voice-layout,
  .state-snapshot-grid,
  .state-seed-layout,
  .state-value-group-grid,
  .state-side-panel,
  .semantic-grid.two-col,
  .validator-layout,
  .context-summary-strip,
  .detail-grid,
  .policy-artifact-meta,
  .policy-section-grid,
  .policy-summary-list,
  .policy-count-grid {
    grid-template-columns: 1fr;
  }

  .storyline-node:not(.role-outcome) .graph-detail {
    right: 0;
    left: auto;
  }

  .graph-detail {
    width: min(360px, calc(100vw - 48px));
  }

  .graph-detail-grid {
    grid-template-columns: 1fr;
  }

  .timeline-node .timeline-node-detail {
    top: calc(100% + 8px);
    right: auto;
    left: 0;
    width: min(360px, calc(100vw - 48px));
    max-height: 380px;
  }

  .timeline-node-detail-sections {
    grid-template-columns: 1fr;
  }

  .state-value-group dl > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .policy-artifact-head {
    display: block;
  }

  .policy-json-button {
    display: inline-block;
    margin-top: var(--space-3);
  }

  .entity-hero,
  .semantic-panel {
    padding: 12px;
  }

  .json-inspector {
    padding: 12px;
  }

  .json-inspector-head,
  .json-field-grid {
    grid-template-columns: 1fr;
  }

  .json-field-card > summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .json-field-kind {
    justify-self: start;
  }

  .warning-group header,
  .warning-group li {
    display: block;
  }

  .warning-group code {
    display: block;
    margin-bottom: 4px;
  }

  .json-raw-details > summary {
    display: block;
  }

  .json-raw-details > summary small {
    display: block;
    margin-top: 2px;
    text-align: left;
  }

  .dialogue-turn,
  .turn-row {
    grid-template-columns: 1fr;
  }

  .contract-matrix,
  .contract-matrix tbody,
  .contract-matrix tr,
  .contract-matrix th,
  .contract-matrix td {
    display: block;
    width: 100%;
  }

  .contract-matrix tr {
    border-bottom: 1px solid var(--border);
  }

  .contract-matrix tr:last-child {
    border-bottom: 0;
  }

  .contract-matrix th,
  .contract-matrix td {
    border-bottom: 0;
  }

  .keyvalue th,
  .object-table th,
  .object-table-nested th {
    width: 100%;
  }

  .keyvalue,
  .keyvalue tbody,
  .keyvalue tr,
  .keyvalue th,
  .keyvalue td,
  .object-table,
  .object-table tbody,
  .object-table tr,
  .object-table th,
  .object-table td {
    display: block;
    width: 100%;
  }

  .keyvalue tr,
  .object-table tr {
    border: 1px solid var(--border);
    margin-bottom: 8px;
  }

  .keyvalue th,
  .object-table th {
    border: 0;
    border-bottom: 1px solid var(--border);
  }

  .keyvalue td,
  .object-table td {
    border: 0;
  }

  table.statistics,
  .result-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .admin-shell {
    grid-template-columns: 1fr;
  }

  .editor-head {
    display: block;
  }
}

/* ==========================================================================
   Controls and the Explorer layer bar
   ========================================================================== */

.control-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 13px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xs);
  background: var(--vellum-leaf);
  color: var(--ink-900);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.explorer-toolbelt .control-button,
.explorer-toolbelt .matching-count {
  min-height: 30px;
  padding: 4px 10px;
  font-size: var(--text-sm);
  line-height: 1.2;
}

.control-button:hover {
  border-color: var(--border-strong-base);
  background: var(--vellum-sunk);
}

.control-button:active {
  background: var(--leaf-100);
}

.control-button[aria-disabled="true"],
.control-button:disabled {
  border-color: var(--border-subtle);
  background: var(--vellum-sunk);
  color: var(--ink-400);
  cursor: not-allowed;
}

.control-button-primary {
  border-color: var(--leaf-800);
  background: var(--leaf-700);
  color: var(--vellum-leaf);
  box-shadow: var(--shadow-xs);
}

.control-button-primary:hover {
  border-color: var(--leaf-800);
  background: var(--leaf-800);
  color: var(--vellum-leaf);
}

/* ---- the layer bar: three audience groups on one rule ------------------ */

.case-layer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-5) 0;
  border-bottom: 2px solid var(--ink-950);
}

.layer-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  min-width: 0;
}

.layer-group {
  min-width: 0;
  padding: 0 var(--space-4);
  border-left: 1px solid var(--vellum-edge);
}

.layer-group:first-child {
  padding-left: 0;
  border-left: 0;
}

.layer-group-label {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-500);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.layer-group.is-active .layer-group-label {
  color: var(--gilt-800);
}

.layer-tab-list {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.layer-tab {
  display: block;
  padding: 5px 10px 7px;
  border-bottom: 3px solid transparent;
  color: var(--ink-600);
  font-size: var(--text-base);
  white-space: nowrap;
}

.layer-tab:hover {
  background: var(--vellum-leaf);
  color: var(--ink-950);
}

.layer-tab.is-active {
  border-bottom-color: var(--gilt-600);
  color: var(--ink-950);
  font-weight: 700;
}

.tab-count {
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.layer-tab.is-active .tab-count {
  color: var(--gilt-800);
}

.field-view-toggle {
  display: inline-flex;
  margin-bottom: 6px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.field-view-toggle a {
  padding: 4px 11px;
  border-left: 1px solid var(--border-base);
  background: var(--vellum-leaf);
  color: var(--ink-600);
  font-size: var(--text-sm);
}

.field-view-toggle a:first-child {
  border-left: 0;
}

.field-view-toggle a:hover {
  background: var(--vellum-sunk);
  color: var(--ink-950);
}

.field-view-toggle a.is-active {
  background: var(--leaf-700);
  color: var(--vellum-leaf);
  font-weight: 500;
}

.navbar-search {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.navbar-search input {
  min-width: 200px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xs);
  background: var(--vellum-leaf);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--text-sm);
}

.navbar-search input::placeholder {
  color: var(--ink-500);
}

@media (max-width: 900px) {
  .navbar-search input {
    min-width: 140px;
  }

  .layer-groups {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .layer-group {
    padding: var(--space-3) 0 0;
    border-left: 0;
    border-top: 1px solid var(--vellum-edge);
  }

  .layer-group:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .layer-tab-list {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Statistics, search, schema, and docs pages
   ========================================================================== */

.page-head {
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-6);
}

.page-head h1 {
  margin: 0 0 var(--space-2);
  color: var(--ink-950);
  font-size: var(--text-2xl);
  font-weight: 640;
  letter-spacing: var(--tracking-tight);
}

.page-head p {
  margin: 0;
  color: var(--ink-600);
  line-height: var(--leading-relaxed);
}

/* Headline figures read as one line of data, not a row of tiles. */
.stat-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  margin: 0 0 var(--space-10);
  border-top: 1px solid var(--ink-900);
  border-bottom: 1px solid var(--border-base);
}

.stat-figures > div {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
}

.stat-figures dt {
  margin-bottom: 2px;
  color: var(--ink-600);
  font-size: var(--text-xs);
}

.stat-figures dd {
  margin: 0;
  color: var(--ink-950);
  font-size: var(--text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Columns rather than grid: blocks have very different heights and grid rows
   would leave a column-height gap under the short ones. */
.stat-grid {
  column-width: 420px;
  column-gap: var(--space-12);
}

.stat-block {
  display: inline-block;
  width: 100%;
  min-width: 0;
  margin-bottom: var(--space-10);
  break-inside: avoid;
}

.stat-block h2 {
  margin: 0 0 var(--space-2);
  color: var(--ink-950);
  font-size: var(--text-md);
  font-weight: 620;
}

.stat-note {
  margin: 0 0 var(--space-3);
  color: var(--ink-600);
  font-size: var(--text-sm);
}

/* ---- search ------------------------------------------------------------ */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.filter-field-term {
  flex: 1 1 260px;
}

.filter-field label {
  color: var(--ink-600);
  font-size: var(--text-xs);
  font-weight: 550;
}

.filter-field input,
.filter-field select {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--text-sm);
}

.filter-field input::placeholder {
  color: var(--ink-500);
}

.filter-field input:hover,
.filter-field select:hover {
  border-color: var(--border-strong-base);
}

.filter-actions {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

.result-count {
  margin: 0 0 var(--space-3);
  color: var(--ink-600);
  font-size: var(--text-sm);
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.result-table th,
.result-table td {
  padding: 8px var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.result-table thead th {
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--ink-900);
  background: var(--vellum-page);
  color: var(--ink-600);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.result-table tbody tr:hover {
  background: var(--surface-quiet);
}

.result-table .numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.result-table .cell-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.result-table .cell-prompt {
  min-width: 280px;
  max-width: 460px;
  color: var(--ink-900);
}

/* ---- schema ------------------------------------------------------------ */

.schema-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-10);
  padding: 0 0 var(--space-5);
  border-bottom: 1px solid var(--border-base);
}

.schema-index a {
  padding: 4px 10px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-pill);
  color: var(--ink-800);
  font-size: var(--text-sm);
}

.schema-index a:hover {
  border-color: var(--leaf-600);
  background: var(--leaf-50);
  color: var(--leaf-800);
}

.schema-object {
  margin: 0 0 var(--space-12);
  scroll-margin-top: var(--space-6);
}

.schema-object h2 {
  margin: 0 0 var(--space-2);
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
}

.schema-object-note {
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-4);
  color: var(--ink-600);
  line-height: var(--leading-relaxed);
}

.schema-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.schema-table th,
.schema-table td {
  padding: 8px var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.schema-table thead th {
  border-bottom: 1px solid var(--ink-900);
  color: var(--ink-600);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.schema-table code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.field-name {
  color: var(--ink-950);
  font-weight: 550;
}

.field-type {
  color: var(--leaf-700);
}

.field-required {
  white-space: nowrap;
}

.req-yes {
  color: var(--status-review);
  font-size: var(--text-xs);
  font-weight: 600;
}

.field-desc {
  min-width: 240px;
  max-width: 480px;
  color: var(--ink-800);
}

/* ---- docs pages -------------------------------------------------------- */

.docs-main {
  padding-top: var(--space-10);
}

.docs-section {
  margin: 0 0 var(--space-12);
}

.docs-section h2 {
  margin: 0 0 var(--space-3);
  color: var(--ink-950);
  font-size: var(--text-xl);
  font-weight: 620;
  letter-spacing: var(--tracking-tight);
}

.docs-lead {
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-4);
  color: var(--ink-800);
  line-height: var(--leading-relaxed);
}

.docs-note {
  margin: var(--space-3) 0 0;
  color: var(--ink-600);
  font-size: var(--text-sm);
}

.code-block {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

code {
  font-family: var(--font-mono);
  font-size: 0.94em;
}

.manual-list {
  margin: 0;
  border-top: 1px solid var(--border-base);
}

.manual-list > div {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.manual-list dt {
  color: var(--ink-950);
  font-size: var(--text-md);
  font-weight: 600;
}

.manual-list dd {
  max-width: var(--prose-measure);
  margin: 0;
  color: var(--ink-800);
  line-height: var(--leading-relaxed);
}

.manual-list dd strong {
  color: var(--ink-950);
  font-weight: 600;
}

.manual-tag {
  display: block;
  margin-top: 3px;
  color: var(--ink-500);
  font-size: var(--text-xs);
  font-weight: 450;
}

@media (max-width: 720px) {
  .manual-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
}

/* ==========================================================================
   Admin — Operate register: the tool gets out of the way of the JSON
   ========================================================================== */

.admin-topbar {
  gap: var(--space-5);
  padding: var(--space-3) var(--space-6);
}

.admin-badge {
  padding: 1px 6px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xs);
  background: var(--surface-quiet);
  color: var(--ink-600);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.admin-context {
  flex: 1 1 auto;
  margin: 0;
  color: var(--ink-600);
  font-size: var(--text-sm);
}

.admin-page {
  padding: var(--space-5) var(--space-6) var(--space-10);
}

.admin-view-switch {
  display: flex;
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.admin-view-switch .nav-button {
  flex: 1 1 0;
  padding: 5px 10px;
  border: 0;
  border-left: 1px solid var(--border-base);
  background: var(--surface);
  color: var(--ink-600);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.admin-view-switch .nav-button:first-child {
  border-left: 0;
}

.admin-view-switch .nav-button:hover {
  background: var(--vellum-sunk);
  color: var(--ink-950);
}

.admin-view-switch .nav-button.is-active {
  background: var(--leaf-600);
  color: var(--vellum-leaf);
  font-weight: 550;
}

.editor-kind {
  margin: 0 0 2px;
  color: var(--ink-500);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.editor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-base);
}

.editor-head > div:first-child {
  flex: 1 1 280px;
  min-width: 0;
}

.editor-head h2 {
  margin: 0 0 4px;
  color: var(--ink-950);
  font-size: var(--text-xl);
  font-weight: 620;
  letter-spacing: var(--tracking-tight);
}

.editor-head > div > p:last-child {
  margin: 0;
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.editor-actions select {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--text-sm);
}

.admin-message.is-error {
  border-color: var(--status-fail);
  background: var(--status-fail-bg);
  color: var(--status-fail);
}

/* Script-rendered pages share the hand-written site header; the search field is
   the only addition, not a second chrome. */
.navbar-search {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.navbar-search input {
  min-width: 200px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--text-sm);
}

.navbar-search input::placeholder {
  color: var(--ink-500);
}

.navbar-search input:hover {
  border-color: var(--border-strong-base);
}

.site-nav a[aria-current="page"] {
  color: var(--leaf-800);
  font-weight: 600;
}

@media (max-width: 900px) {
  .navbar-search input {
    min-width: 140px;
  }
}

/* ==========================================================================
   The condition apparatus — the link between a state and what it governs
   ========================================================================== */

.expectation-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-4);
}

.condition-apparatus {
  min-width: 0;
  padding-left: var(--space-5);
  border-left: 1px solid var(--vellum-edge);
}

.condition-apparatus h3 {
  margin: 0 0 4px;
  color: var(--ink-500);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.apparatus-help {
  margin: 0 0 var(--space-3);
  color: var(--ink-600);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
}

.condition-apparatus dl {
  margin: 0;
}

.condition-apparatus .apparatus-row {
  padding: 6px var(--space-2) 6px 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}

.condition-apparatus .apparatus-row dt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--ink-500);
  font-size: var(--text-2xs);
}

.apparatus-section {
  color: var(--ink-400);
  font-size: var(--text-2xs);
  font-style: italic;
}

.condition-apparatus .apparatus-row dd {
  margin: 1px 0 0;
  color: var(--ink-900);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
}

/* a row that actually drives a required behaviour is gilded and reachable */
.condition-apparatus .apparatus-row.is-live {
  padding-left: var(--space-2);
  background: var(--gilt-50);
  cursor: help;
}

.condition-apparatus .apparatus-row.is-live dt {
  color: var(--gilt-800);
}

/* the live link, both directions */
.apparatus-row.is-linked,
.criterion-item.is-linked {
  background: var(--gilt-100);
  box-shadow: inset 2px 0 0 var(--gilt-600);
}

.apparatus-row.is-dimmed,
.criterion-item.is-dimmed {
  opacity: 0.42;
}

.criterion-item[data-conditions] {
  padding-left: var(--space-3);
  border-radius: var(--radius-xs);
  cursor: help;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}

.criterion-item[data-conditions]:focus-visible,
.apparatus-row[data-field]:focus-visible {
  outline: 2px solid var(--leaf-600);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .condition-apparatus .apparatus-row,
  .criterion-item[data-conditions] {
    transition: none;
  }
}

@media (max-width: 900px) {
  .expectation-spread {
    grid-template-columns: minmax(0, 1fr);
  }

  .condition-apparatus {
    padding-left: 0;
    padding-top: var(--space-4);
    border-left: 0;
    border-top: 1px solid var(--vellum-edge);
  }
}

/* ==========================================================================
   The masthead — a periodical of record, not an app bar
   ========================================================================== */

.codex-masthead {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-8) var(--space-4);
  text-align: center;
}

.masthead-rule {
  height: 3px;
  border-top: 1px solid var(--ink-950);
  border-bottom: 1px solid var(--ink-950);
}

.masthead-rule-thin {
  height: 0;
  margin-top: var(--space-3);
  border-bottom: 0;
}

.masthead-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: var(--text-masthead);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-indent: 0.14em; /* optical centring against the tracking */
}

.masthead-icon {
  width: clamp(26px, 3vw, 42px);
  height: clamp(26px, 3vw, 42px);
}


.masthead-nav {
  justify-content: center;
  gap: clamp(var(--space-5), 3.2vw, var(--space-12));
  padding: var(--space-3) 0 0;
}

.masthead-nav a {
  font-size: var(--text-md);
}


/* section heads take the flanking rules of a printed sheet */
.codex-section .section-head h2 {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.codex-section .section-head h2::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--vellum-edge);
}

/* ---- material: laid paper -----------------------------------------------
   Chain lines and a faint tooth, drawn as an SVG so it is a material rather
   than a gradient wash. Two tiles at different scales keep it from banding. */
body {
  background-color: var(--vellum-page);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23t)' opacity='0.035'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='4'%3E%3Crect width='28' height='4' fill='none'/%3E%3Cline x1='0' y1='0.5' x2='28' y2='0.5' stroke='%23161e14' stroke-width='0.5' opacity='0.035'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
}

.entry-leaf,
.semantic-panel {
  background-color: var(--vellum-leaf);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='t2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23t2)' opacity='0.025'/%3E%3C/svg%3E");
}

/* ---- micro-typography ---------------------------------------------------
   Alegreya carries oldstyle figures and small caps. Prose figures sit on the
   baseline like a book; data tables keep lining tabular figures so columns
   still align. */
.colophon dd,
.quire li::before,
.entry-speech,
.opening-standfirst {
  font-variant-numeric: oldstyle-nums;
}

.bar-table .numeric,
.result-table .numeric,
.stat-figures dd,
.schema-table,
.detail-grid dd {
  font-variant-numeric: tabular-nums lining-nums;
}

.layer-group-label,
.entry-apparatus h3,
.condition-apparatus h3,
.entry-seal h3 {
  font-feature-settings: "smcp" 1;
}

@media (max-width: 640px) {
  .codex-masthead {
    padding: var(--space-4);
  }

  .masthead-title {
    letter-spacing: 0.08em;
  }

  .masthead-icon {
    width: 26px;
    height: 26px;
  }
}

/* ==========================================================================
   The one authored moment
   --------------------------------------------------------------------------
   The page loads readable. Then the entry settles onto the desk and the rule is
   drawn. Both animate from an already-visible default, so a disabled or failed
   animation costs nothing, and neither moves layout.
   ========================================================================== */

@keyframes leafSettle {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rulePull {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.codex-spread .spread-entry {
  animation: leafSettle 720ms var(--ease-soft-out) both;
}

.opening-standfirst {
  position: relative;
}

.opening-standfirst::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink-950);
  transform-origin: left center;
  animation: rulePull 620ms var(--ease-soft-out) both;
}

/* the rule is drawn by the pseudo-element, so the border would double it */
.opening-standfirst {
  border-top-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .codex-spread .spread-entry,
  .opening-standfirst::before {
    animation: none;
  }

  .opening-standfirst {
    border-top-color: var(--ink-950);
  }

  .opening-standfirst::before {
    display: none;
  }
}

@media (max-width: 640px) {
  .stat-grid {
    column-count: 1;
    column-width: auto;
  }

  .stat-block {
    overflow-x: auto;
  }

  .stat-block .bar-table {
    display: block;
  }

  .stat-block .bar-table thead {
    display: none;
  }

  .stat-block .bar-table tbody {
    display: block;
  }

  .stat-block .bar-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .stat-block .bar-table tbody th {
    grid-column: 1 / -1;
    padding: 0;
    border: 0;
    overflow-wrap: normal;
    white-space: normal;
  }

  .stat-block .bar-table tbody td {
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
  }

  .stat-block .bar-table-plot {
    width: auto;
  }

  .stat-block .bar-table .numeric {
    padding-left: var(--space-2);
  }
}

.legacy-redirect {
  max-width: var(--prose-measure);
  margin: var(--space-12) auto;
  padding: 0 var(--space-4);
}

/* The compact bar has three parts that cannot share one row on a phone: the
   brand, the nav, and the search. Let them stack, and let the nav scroll
   sideways inside its own strip rather than pushing the page wider. */
@media (max-width: 780px) {
  .site-header {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .site-brand {
    flex: 0 0 auto;
  }

  .navbar-search {
    flex: 1 1 180px;
    min-width: 0;
  }

  .navbar-search input {
    width: 100%;
    min-width: 0;
  }

  .site-header .site-nav {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    gap: var(--space-4);
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .site-header .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-header .site-nav a {
    white-space: nowrap;
  }
}

/* ==========================================================================
   The storyline chain — a spine of beats, for storylines that do not branch
   ========================================================================== */

.storyline-chain {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--space-10);
  list-style: none;
}

/* the spine */
.storyline-chain::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 15px;
  width: 1px;
  background: var(--vellum-edge);
}

.chain-beat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.chain-beat:last-child {
  border-bottom: 0;
}

/* the node on the spine, carrying its order */
.chain-order {
  position: absolute;
  top: var(--space-4);
  left: calc(-1 * var(--space-10));
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid var(--vellum-edge);
  border-radius: 50%;
  background: var(--vellum-leaf);
  color: var(--ink-600);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}

.chain-beat.coverage-covered .chain-order {
  border-color: var(--leaf-600);
  color: var(--leaf-800);
}

.chain-beat.coverage-partial .chain-order {
  border-color: var(--gilt-600);
  background: var(--gilt-100);
  color: var(--gilt-800);
}

.chain-body {
  min-width: 0;
}

.chain-body h3 {
  margin: 0 0 5px;
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.25;
}

.chain-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chain-meta span {
  padding: 2px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--vellum-page);
  color: var(--ink-600);
  font-size: var(--text-2xs);
}

.chain-alignment {
  font-family: var(--font-mono);
}

/* forks: where the spine opens into mutually exclusive outcomes */
.chain-summary {
  max-width: var(--prose-measure);
  margin: 0 0 var(--space-2);
  color: var(--ink-800);
  line-height: var(--leading-snug);
}

.chain-fork {
  position: relative;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.chain-fork:last-child {
  border-bottom: 0;
}

.chain-order-fork {
  border-color: var(--gilt-600);
  background: var(--gilt-100);
  color: var(--gilt-800);
  font-weight: 700;
}

.fork-label {
  margin: 6px 0 var(--space-3);
  color: var(--gilt-800);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.fork-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
}

.fork-branch {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-leaf);
  background: var(--vellum-leaf);
}

.fork-branch h3 {
  margin: 0 0 5px;
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.25;
}

.fork-branch .chain-summary {
  font-size: var(--text-sm);
}

.chain-evidence {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   The era band — the dynamic timeline
   ========================================================================== */

.era-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.era {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-leaf);
  background: var(--vellum-leaf);
}

.era-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.era-index {
  flex: 0 0 auto;
  color: var(--gilt-800);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.era-head h3 {
  margin: 0;
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
}

.era-scope {
  margin: 2px 0 0;
  color: var(--ink-500);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.era-summary {
  margin: 0;
  color: var(--ink-800);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.era-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 0 var(--space-3);
  margin: 0;
  border-top: 1px solid var(--border-subtle);
}

.era-counts > div {
  padding: var(--space-2) 0 0;
}

.era-counts dt {
  color: var(--ink-500);
  font-size: var(--text-2xs);
}

.era-counts dd {
  margin: 0;
  color: var(--ink-950);
  font-size: var(--text-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.era-empty {
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  color: var(--ink-500);
  font-size: var(--text-2xs);
}

.era-events summary {
  color: var(--leaf-700);
  font-size: var(--text-sm);
  cursor: pointer;
}

.era-events ul {
  margin: var(--space-2) 0 0;
  padding-left: 1.1em;
  color: var(--ink-800);
  font-size: var(--text-sm);
}

.era-events li + li {
  margin-top: 3px;
}

/* ==========================================================================
   Universe overview — purpose-built rows, not an object dump
   ========================================================================== */

.genre-tiers {
  margin: 0;
}

.genre-tiers > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.genre-tiers > div:last-child {
  border-bottom: 0;
}

.genre-tiers dt {
  color: var(--ink-500);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.genre-tiers dd {
  margin: 0;
  min-width: 0;
}

.currency-list,
.guideline-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.currency-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.currency-list li:last-child {
  border-bottom: 0;
}

.currency-list b {
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.currency-list code {
  padding: 1px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--vellum-page);
  color: var(--ink-600);
  font-size: var(--text-2xs);
}

.currency-list span {
  flex: 1 1 100%;
  color: var(--ink-600);
  font-size: var(--text-sm);
}

/* these are writing directives, so they are set as prose */
.guideline-list li {
  max-width: var(--prose-measure);
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--ink-800);
  line-height: var(--leading-relaxed);
  position: relative;
}

.guideline-list li:last-child {
  border-bottom: 0;
}

.guideline-list li::before {
  content: "";
  position: absolute;
  top: calc(var(--space-3) + 0.62em);
  left: var(--space-2);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gilt-600);
}

.panel-subhead {
  margin: var(--space-5) 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  color: var(--ink-500);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ==========================================================================
   Reading the entry — draw another, and see whose view it is
   ========================================================================== */

.recto-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--vellum-edge);
}

.view-switch {
  display: inline-flex;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.view-switch button {
  padding: 5px 12px;
  border: 0;
  border-left: 1px solid var(--border-base);
  background: var(--vellum-leaf);
  color: var(--ink-600);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.view-switch button:first-child {
  border-left: 0;
}

.view-switch button:hover {
  background: var(--vellum-page);
  color: var(--ink-950);
}

.view-switch button.is-active {
  background: var(--leaf-700);
  color: var(--vellum-leaf);
  font-weight: 500;
}

.draw-another {
  font-size: var(--text-sm);
}

/* the draw: the old entry lifts off before the new one settles */
.spread-entry.is-drawing {
  opacity: 0.35;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

/* the model's view: the contract is physically absent from it */
.spread-entry.model-view .entry-seal {
  position: relative;
  border-style: dashed;
  border-color: var(--rubric);
  background: transparent;
}

.spread-entry.model-view .entry-seal > *:not(.model-veil) {
  opacity: 0.08;
  filter: blur(2px);
  user-select: none;
}

.spread-entry.model-view .entry-seal::after {
  content: "Withheld. The model is never given this.";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  color: var(--rubric);
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .spread-entry.is-drawing {
    transition: none;
  }
}

/* ==========================================================================
   Game vocabulary — status pips and the dialogue plate
   --------------------------------------------------------------------------
   AGENTS.md asks for the Interface-In-Game component set. These are the two
   that earn their place: a status readout for the conditions that genuinely
   order, and a dialogue plate for what is literally game dialogue. Both are
   drawn from real fields; a categorical value never gets a meter.
   ========================================================================== */

.apparatus-row.has-meter dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.pips {
  display: inline-flex;
  gap: 3px;
}

.pip {
  width: 7px;
  height: 7px;
  border: 1px solid var(--vellum-edge);
  transform: rotate(45deg);
}

.pip.is-past {
  border-color: var(--leaf-600);
  background: var(--leaf-300);
}

.pip.is-now {
  border-color: var(--gilt-600);
  background: var(--gilt-600);
  box-shadow: 0 0 0 2px var(--gilt-100);
}

/* the dialogue plate: a nameplate over the line, the way a game presents it */
.dialogue-plate {
  border: 1px solid var(--vellum-edge);
  border-radius: var(--radius-leaf);
  background: var(--vellum-page);
}

.plate-speaker {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--vellum-edge);
  background: var(--ink-950);
  border-radius: var(--radius-leaf) var(--radius-leaf) 0 0;
  color: var(--vellum-leaf);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.plate-speaker span {
  color: var(--gilt-300);
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.dialogue-plate .entry-speech {
  padding: var(--space-4);
}

.turn-no {
  display: inline-grid;
  width: 17px;
  height: 17px;
  margin-right: 7px;
  place-items: center;
  border: 1px solid var(--vellum-edge);
  border-radius: 50%;
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  vertical-align: 2px;
}