/* Tribunal Dashboard — v6 (The Institution) */

/* Explainer override: 110% baseline so the whole page reads larger.
   Tailwind/rem-based sizes scale proportionally. */
html { font-size: 110%; }

/* ══════════════════════════════════════════
   DESIGN TOKENS (light-mode only)
   Conclave is light-mode only. The token block below is the single
   source of truth for color, radius, shadow, and surface fills.
   ══════════════════════════════════════════ */
:root {
    --bg-base: #F5F2ED;
    --bg-surface: #FEFCF9;
    --bg-elevated: #F0EDE7;
    --bg-hover: rgba(139, 105, 20, 0.04);
    --border: rgba(120, 100, 60, 0.12);
    --border-hover: rgba(120, 100, 60, 0.22);
    --accent: #8B6914;
    --accent-bright: #7A5C1F;
    --accent-glow: rgba(139, 105, 20, 0.15);
    --text-primary: #1A1610;
    --text-secondary: #4A4540;
    --text-muted: #8A8580;
    --emerald: #059669;
    --nav-bg: rgba(245, 242, 237, 0.92);
    --code-bg: rgba(139, 105, 20, 0.08);
    --code-color: #7A5C1F;
    --pre-bg: #F0EDE7;
    --md-text: #3A3530;
    --md-heading: #1A1610;
    --md-heading2: #2A2520;
    --md-heading3: #3A3530;
    --md-heading4: #4A4540;
    --accordion-body-bg: #F0EDE7;
    --scrollbar-thumb: rgba(120, 100, 60, 0.12);
    --scrollbar-thumb-hover: rgba(120, 100, 60, 0.22);
    --progress-bg: rgba(120, 100, 60, 0.06);
    --pill-active-bg: rgba(120, 100, 60, 0.08);
    --pill-hover-bg: rgba(120, 100, 60, 0.04);
    --sort-active-bg: rgba(120, 100, 60, 0.06);
    --table-head-bg: rgba(120, 100, 60, 0.03);
    --row-border: rgba(120, 100, 60, 0.06);
    --chart-border: #FEFCF9;
    --blockquote-bg: rgba(139, 105, 20, 0.04);
    --hr-color: rgba(120, 100, 60, 0.1);
    --table-cell-border: rgba(120, 100, 60, 0.06);

    /* Radius scale — canonical. Existing one-offs may stay until
       they're next touched; new work should reach for these tokens.
       --radius / --radius-sm preserve the pre-existing institutional
       values (4px / 2px) so corners read the same as before. */
    --radius-sm: 2px;       /* hairline — pills, inputs, small chips */
    --radius:    4px;       /* default — surfaces, buttons */
    --radius-md: 6px;       /* mid — accordions, callouts */
    --radius-lg: 8px;       /* large — cards, popovers */
    --radius-xl: 12px;      /* elevated — modal-adjacent panels (live status, claim cards) */
    --radius-full: 9999px;  /* pills, dots */

    /* Shadow scale — canonical. Keep elevations shallow to stay
       editorial; verdict + live-session surfaces consume these. */
    --shadow-sm: 0 1px 2px rgba(80, 60, 20, 0.04);
    --shadow-md: 0 4px 16px rgba(80, 60, 20, 0.06);
    --shadow-lg: 0 18px 48px rgba(80, 60, 20, 0.10);

    /* Modal/popover backdrop — intentionally dark for legibility
       regardless of surface theme. */
    --backdrop: rgba(15, 14, 12, 0.55);
}

/* ══════════════════════════════════════════
   Tailwind utility remaps
   The product uses ad-hoc Tailwind color utilities in templates;
   these rules align them with the canonical palette.
   ══════════════════════════════════════════ */
.text-white { color: var(--text-primary) !important; }
.text-zinc-100, .text-slate-100 { color: var(--text-primary) !important; }
.text-zinc-200, .text-slate-200 { color: #2A2520 !important; }
.text-zinc-300, .text-slate-300 { color: #3A3530 !important; }
.text-zinc-400, .text-slate-400 { color: #5A5550 !important; }
.text-zinc-500, .text-slate-500 { color: #6A6560 !important; }
.text-zinc-600, .text-slate-600 { color: #8A8580 !important; }
.text-zinc-700 { color: #8A8580 !important; }
.text-\[10px\] { color: #8A8580 !important; }
.text-\[\#6c7086\] { color: #6A6560 !important; }

/* Tailwind: surface fills against the warm-paper background */
.bg-white\/\[0\.02\] { background-color: rgba(0, 0, 0, 0.02) !important; }
.bg-white\/\[0\.04\] { background-color: rgba(0, 0, 0, 0.03) !important; }
.border-white\/\[0\.06\] { border-color: rgba(0, 0, 0, 0.06) !important; }
.border-white\/\[0\.04\] { border-color: rgba(0, 0, 0, 0.04) !important; }
.divide-white\/\[0\.04\] > :not([hidden]) ~ :not([hidden]) { border-color: rgba(0, 0, 0, 0.04) !important; }

/* Semantic accents — calibrated for the warm-paper background */
.text-cyan-400 { color: #0891b2 !important; }
.text-emerald-400 { color: #059669 !important; }
.text-amber-400 { color: #d97706 !important; }
.text-red-400 { color: #dc2626 !important; }

/* Depth badge text stays white against its filled background */
.badge-depth.text-white { color: #fff !important; }

/* Status dots keep their saturated colors */
.bg-emerald-400 { background-color: #34d399 !important; }
.bg-amber-400 { background-color: #fbbf24 !important; }
.bg-red-400 { background-color: #f87171 !important; }

/* ══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY ROLE CLASSES — the canonical type system
   ──────────────────────────────────────────────────────────────────────
   These role classes are the single source of truth for typography
   across every Conclave surface. Spec: docs/design/conclave-type-system-
   spec.md and docs/design/conclave-page-level-typography-audit.md.

   Two families: Instrument Serif (serif, gravity + ceremony) and
   DM Sans (sans, procedure + interface). Mono is intentionally absent
   from the type system — it had drifted into utility-page section
   labels and metadata; this pass retires it from those contexts.

   When applying typography on a new page, reach for a role class here
   first. Only introduce a one-off if no role fits — and if that
   happens, the role belongs in the system, not on the page.
   ══════════════════════════════════════════════════════════════════════ */

/* Display headline — the rare, high-impact opening. Reserved for
   surfaces that need an editorial overture rather than a label-like
   page title: composition's invitation hero, marketing-home moments
   (when they aren't using their own scoped Boska treatment), and
   future verdict-page question reveals if those want a dedicated
   role. Largest in the canonical type ladder.

   Non-italic by default — display moments often run multi-clause and
   italicizing the whole thing dilutes rhetorical weight. Italic
   variant available via .display-headline.is-italic when a quoted
   question or single ceremonial sentence warrants it. */
.display-headline {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.375rem);
    line-height: 1.18;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    text-wrap: pretty;
    margin: 0;
}
.display-headline.is-italic { font-style: italic; }

/* Page title — used on every utility surface that has a page heading.
   Gallery, My Sessions, Sign in, Create account, settings, and similar
   pages all share this single treatment. Fluid sizing keeps it
   composed on mobile without manual breakpoints. */
.page-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    font-weight: 400;
    color: var(--text-primary);
    text-wrap: balance;
    margin: 0;
}

/* Page subtitle — the supporting line directly under page-title.
   Same serif voice, smaller and quieter; reads as a continuation of
   the title rather than as body copy. */
.page-subtitle {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0.4rem 0 0;
    max-width: 36rem;
    text-wrap: pretty;
}

/* Page header block — pairs page-title + page-subtitle with the
   right spacing below the shell. Use as the single canonical
   container for page headers. */
.page-header {
    /* No max-width — the parent .page-container (or page-specific
       container) governs width. .page-header is purely the vertical
       spacing block between the shell and the first content section. */
    margin: 0 0 1.75rem;
    padding-top: 0.25rem;
}

/* Section kicker — small uppercase label that introduces a section
   without competing with its heading. The strongest single brand
   element on utility pages. Replaces the JetBrains Mono uppercase
   patterns that had crept into the gallery sort strip, the sessions
   table headers, and similar surfaces. */
.section-kicker {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.6875rem;        /* 11px */
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

/* Section heading — used for major content divisions inside a page.
   Serif on long-form / editorial surfaces; the role spec allows sans
   on dense utility surfaces, but this base style is the editorial
   default. */
.section-heading {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.15;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0;
    text-wrap: balance;
}

/* Body copy — long-form prose. Comfortable reading rhythm. */
.body-copy {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.9375rem;        /* 15px */
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 64ch;
    text-wrap: pretty;
}

/* UI body — interface descriptions, secondary instructions, the
   line under a section-kicker when the section needs explanation. */
.ui-body {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.875rem;         /* 14px */
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Metadata — timestamps, panel composition, durations, view counts,
   visibility, status. Always sans, always quiet, never competing with
   the primary object on the row. Replaces JetBrains Mono timestamps
   on sessions and the mono panel/stats on gallery cards. */
.metadata {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.8125rem;        /* 13px */
    line-height: 1.45;
    color: var(--text-muted);
    font-weight: 400;
}

/* Metadata label — even quieter, used for inline labels like
   "Panel:" / "When:" that introduce a metadata value. */
.metadata-label {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.75rem;          /* 12px */
    color: var(--text-muted);
    font-weight: 400;
    opacity: 0.85;
    margin-right: 0.25rem;
}

/* Caption / fine print — modal support, helper text under inputs,
   "Already have an account?" footer lines, smoke-explanation copy. */
.caption {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.75rem;          /* 12px */
    line-height: 1.5;
    color: var(--text-muted);
}

/* Table header — used inside the My Sessions casebook and other
   tabular surfaces. Same family as section-kicker so they read as
   one system, slightly smaller and unbolded to settle into a row. */
.table-kicker {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.625rem;         /* 10px */
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ──────────────────────────────────────────────────────────────────────
   TEXT-TIER UTILITY CLASSES
   ──────────────────────────────────────────────────────────────────────
   Canonical text-color utilities. Map directly to the three text tiers
   defined in the theme variable blocks at the top of this file. Use
   these in markup instead of the Tailwind `text-zinc-*` classes — the
   text-zinc overrides further down still work, but new code should
   reach for these so theme swaps stay coherent.

       .text-primary    Primary content text. Headings, table cells,
                        the central object on a row.
       .text-secondary  Supporting body text. Paragraphs that explain
                        or describe rather than name.
       .text-muted      Quiet metadata, captions, helper text. Always
                        subordinate to the primary object nearby.

   No `--text-faint` tier — the system spec defines exactly three. If
   text needs to be quieter than .text-muted, it probably belongs in a
   role like .caption or should be reconsidered.
   ────────────────────────────────────────────────────────────────────── */

.text-primary    { color: var(--text-primary); }
.text-secondary  { color: var(--text-secondary); }
.text-muted      { color: var(--text-muted); }

/* Muted link — quiet at rest, lifts to primary on hover/focus. Use
   for the inline secondary links inside empty-state copy, "convene
   the first →" CTAs, and similar restrained recovery links. */
.link-muted {
    color: var(--text-muted);
    transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.link-muted:hover,
.link-muted:focus-visible {
    color: var(--text-primary);
}

/* ──────────────────────────────────────────────────────────────────────
   CONTAINER WIDTH SYSTEM
   ──────────────────────────────────────────────────────────────────────
   One canonical page width across the whole product. The shell and
   the page beneath it both consume the same token, so the wordmark
   always aligns with the page's content edge. When a surface needs a
   narrower content column (form, reading prose, composition), use a
   `.content-*` modifier that centers a narrower container inside the
   1080-px page width — the shell stays the same width regardless.

       --width-page       1080px   shell + outer page container
       --width-reading     720px   long-form prose columns
       --width-compose     640px   the question-entry form
       --width-form        480px   auth + narrow single-field forms
       --container-padding-x       shared horizontal padding everywhere

   Spec: docs/design/conclave-container-width-system.md.
   ────────────────────────────────────────────────────────────────────── */

:root {
    --width-page: 1080px;
    --width-reading: 720px;
    --width-compose: 640px;
    --width-form: 480px;
    --container-padding-x: clamp(1rem, 5vw, 2rem);
}

.page-container {
    max-width: var(--width-page);
    margin-inline: auto;
    padding-inline: var(--container-padding-x);
}
.content-reading {
    max-width: var(--width-reading);
    margin-inline: auto;
}
.content-compose {
    max-width: var(--width-compose);
    margin-inline: auto;
}
.content-form {
    max-width: var(--width-form);
    margin-inline: auto;
}

/* ══════════════════════════════════════════
   VIOLET → BRASS: comprehensive overrides
   Catches all violet Tailwind classes in templates.
   Values match the canonical brass palette.
   ══════════════════════════════════════════ */
.text-violet-400 { color: var(--accent) !important; }
.text-violet-300 { color: var(--accent-bright) !important; }
.text-violet-400\/70 { color: rgba(139, 105, 20, 0.7) !important; }
.hover\:text-violet-300:hover { color: var(--accent-bright) !important; }
.bg-violet-500\/20 { background-color: rgba(139, 105, 20, 0.1) !important; }
.bg-violet-500\/\[0\.08\] { background-color: rgba(139, 105, 20, 0.06) !important; }
.bg-violet-500\/70 { background-color: rgba(139, 105, 20, 0.5) !important; }
.border-violet-500\/40 { border-color: rgba(139, 105, 20, 0.25) !important; }
.border-violet-500\/15 { border-color: rgba(139, 105, 20, 0.1) !important; }
.border-violet-500\/10 { border-color: rgba(139, 105, 20, 0.06) !important; }
.border-violet-500\/20 { border-color: rgba(139, 105, 20, 0.12) !important; }
.peer:checked ~ .peer-checked\:bg-violet-600 { background-color: #8B6914 !important; }
.group:hover .group-hover\:bg-violet-500\/30 { background-color: rgba(139, 105, 20, 0.18) !important; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg-base);
    -webkit-font-smoothing: antialiased;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 16px;
}

/* ══════════════════════════════════════════
   NAV — compact, institutional
   ══════════════════════════════════════════ */
.nav-bar {
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}
.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    color: var(--text-muted);
}
.nav-link:hover:not(.active) {
    color: var(--text-primary);
    background: var(--pill-hover-bg);
}
.nav-link.active {
    color: var(--text-primary) !important;
    background: var(--pill-active-bg);
}

/* ══════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════ */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s;
}
.card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 2px 12px rgba(80, 60, 20, 0.06);
}
.card-glow:hover {
    border-color: rgba(139, 105, 20, 0.2);
    box-shadow: 0 2px 16px rgba(139, 105, 20, 0.06);
}

/* Stat cards */
.stat-card {
    position: relative;
    overflow: hidden;
    transition: all 0.15s;
}
.stat-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
    opacity: 0.3;
    transition: opacity 0.15s;
}
.stat-card:hover { border-color: var(--border-hover); }
.stat-card:hover::before { opacity: 0.8; }

/* ══════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════ */
.mono { font-family: 'JetBrains Mono', monospace; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Serif display headings */
.detail-title, .session-title,
.markdown-content h1, .markdown-content h2, .markdown-content h3 {
    font-family: 'Instrument Serif', Georgia, serif;
}

/* Vote numbers — serif for gravitas */
.vote-number {
    font-family: 'Instrument Serif', Georgia, serif;
}

/* ══════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 3px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
}
.badge-depth {
    font-weight: 800;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ══════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════ */
.input {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    transition: all 0.15s;
    outline: none;
}
.input::placeholder { color: var(--text-muted); }
.input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ══════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════ */
.btn-primary {
    background: linear-gradient(135deg, #B8864A, #9A7040);
    color: white;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 0.625rem 1.5rem;
    font-size: 0.8125rem;
    transition: all 0.15s;
    border: none;
    cursor: pointer;
}
.btn-primary:hover:not(:disabled) {
    box-shadow: 0 4px 16px rgba(196, 149, 106, 0.3);
}
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* ══════════════════════════════════════════
   PROGRESS / ANIMATIONS
   ══════════════════════════════════════════ */
.progress-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--progress-bg);
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.htmx-settling { opacity: 0.7; }
.htmx-swapping { opacity: 0.4; transition: opacity 0.1s; }
.htmx-added { opacity: 0; }
.htmx-added.htmx-settling { opacity: 1; transition: opacity 0.2s; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.tab-content { animation: tabFadeIn 0.2s ease-out; }
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

[x-cloak] { display: none !important; }
[x-collapse] { overflow: hidden; }

/* ══════════════════════════════════════════
   COST
   ══════════════════════════════════════════ */
.cost-value {
    color: var(--emerald);
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Pulse dot */
.pulse-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #059669;
    box-shadow: 0 0 6px rgba(5, 150, 105, 0.5);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

/* ══════════════════════════════════════════
   SESSION DETAIL — two-column layout
   ══════════════════════════════════════════ */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
    min-height: calc(100vh - 80px);
}

@media (max-width: 1024px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }
    .detail-sidebar {
        order: -1;
    }
}

.detail-main {
    padding-right: 2rem;
    border-right: 1px solid var(--border);
    min-width: 0;
}

@media (max-width: 1024px) {
    .detail-main {
        padding-right: 0;
        border-right: none;
    }
}

.detail-title {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* Sidebar */
.detail-sidebar {
    padding-left: 1.5rem;
}

@media (max-width: 1024px) {
    .detail-sidebar {
        padding-left: 0;
        margin-bottom: 1.5rem;
    }
}

.sidebar-inner {
    position: sticky;
    top: 72px;
}

.sidebar-heading {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.sidebar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    min-height: 2rem;
}

.sidebar-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.sidebar-value {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    text-align: right;
}

.sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 0.625rem 0;
}

.sidebar-pdf-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--accent);
    font-weight: 500;
    padding: 0.5rem 0;
    transition: color 0.15s;
}
.sidebar-pdf-link:hover { color: var(--accent-bright); }

/* Status pills */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0;
}
.status-ok { color: #059669; }
.status-warn { color: #d97706; }
.status-err { color: #dc2626; }

/* Detail tabs */
.detail-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.detail-tab {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
    margin-bottom: -1px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
}
.detail-tab:hover { color: var(--text-secondary); }
.detail-tab.active {
    color: var(--text-primary);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

/* ══════════════════════════════════════════
   ARENA-INSPIRED SESSION LIST
   ══════════════════════════════════════════ */
.arena-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.arena-search {
    position: relative;
    flex: 1;
    min-width: 180px;
}
.arena-search .search-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    pointer-events: none;
}
.arena-search-input {
    width: 100%;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.4375rem 0.75rem 0.4375rem 2rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    outline: none;
    transition: all 0.15s;
}
.arena-search-input::placeholder { color: var(--text-muted); }
.arena-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Depth pill filters */
.arena-pills {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.arena-pill {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.arena-pill:hover {
    color: var(--text-secondary);
    background: var(--pill-hover-bg);
}
.arena-pill.active {
    color: var(--text-primary);
    background: var(--pill-active-bg);
    border-color: var(--border-hover);
}

/* Sort pills */
.arena-sort {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}
.arena-sort-pill {
    padding: 0.1875rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.arena-sort-pill:hover { color: var(--text-secondary); }
.arena-sort-pill.active {
    color: var(--text-primary);
    background: var(--sort-active-bg);
    border-color: var(--border);
}

/* Arena table */
.arena-table-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
    overflow-y: visible;
}

.arena-table {
    width: 100%;
    font-size: 0.8125rem;
    border-collapse: collapse;
}

.arena-table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    background: var(--table-head-bg);
}

.arena-row {
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--row-border);
}
.arena-row:last-child { border-bottom: none; }
.arena-row:hover { background: rgba(196, 149, 106, 0.04); }
.arena-row td { padding: 0.5rem 0.625rem; }

.arena-topic {
    color: var(--text-secondary);
    font-weight: 500;
    transition: color 0.1s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 420px;
    display: block;
}
.arena-row:hover .arena-topic { color: var(--text-primary); }


/* ══════════════════════════════════════════
   OYEZ-INSPIRED JUDICIAL TAB
   ══════════════════════════════════════════ */

/* Vote result banner */
.vote-banner {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.vote-banner-inner { margin-bottom: 1.25rem; }

.vote-split {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.vote-number {
    font-size: 2.5rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.vote-number.vote-majority { color: #059669; }
.vote-number.vote-dissent { color: #dc2626; }
.vote-dash {
    font-size: 2rem;
    color: var(--text-muted);
    font-weight: 300;
}
.vote-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Vote strip */
.vote-strip {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.vote-dot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}
.vote-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: transform 0.15s;
}
.vote-dot:hover { transform: scale(1.15); }
.vote-dot.majority {
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.4);
    box-shadow: 0 0 8px rgba(5, 150, 105, 0.1);
}
.vote-dot.dissent {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.08);
}
.vote-dot-name {
    font-size: 0.5625rem;
    color: var(--text-muted);
    font-weight: 500;
    max-width: 72px;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
    word-break: break-word;
}

/* Opinion sections */
.opinion-section { }

.opinion-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}
.opinion-header.majority { color: #059669; }
.opinion-header.dissent { color: #dc2626; }
.opinion-header.neutral { color: var(--text-secondary); }

.opinion-count {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(120, 100, 60, 0.06);
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
}

.opinion-judges {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Judge cards — Oyez style */
.judge-card-oyez {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s;
}
.judge-card-oyez:hover { border-color: var(--border-hover); }

.judge-card-oyez.majority {
    border-left: 3px solid rgba(5, 150, 105, 0.4);
}
.judge-card-oyez.dissent {
    border-left: 3px solid rgba(220, 38, 38, 0.3);
}

.judge-card-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.judge-vote-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.judge-vote-indicator.majority { background: #059669; }
.judge-vote-indicator.dissent { background: #dc2626; }

.judge-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}
.judge-provider {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.judge-card-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.judge-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}


/* ══════════════════════════════════════════
   MODEL CARDS
   ══════════════════════════════════════════ */
.model-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: all 0.15s;
}
.model-card:hover {
    border-color: var(--border-hover);
}
.model-card .model-name { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); }
.model-card .model-provider { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; }
.model-card .model-stats { display: flex; gap: 1rem; margin-top: 0.75rem; }
.model-card .model-stats .stat-label {
    font-size: 0.625rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.model-card .model-stats .stat-value {
    font-weight: 700; font-variant-numeric: tabular-nums;
    margin-top: 0.125rem; font-size: 0.875rem;
}

.provider-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ══════════════════════════════════════════
   ACCORDION
   ══════════════════════════════════════════ */
.accordion-trigger {
    width: 100%; text-align: left;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    display: flex; align-items: center; justify-content: space-between;
    transition: all 0.15s; cursor: pointer;
}
.accordion-trigger:hover { border-color: var(--border-hover); background: var(--pill-hover-bg); }
.accordion-body {
    background: var(--accordion-body-bg); border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: 1rem; font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem; line-height: 1.7; color: var(--text-secondary); white-space: pre-wrap;
}

/* ══════════════════════════════════════════
   ROLE BADGES — warm institutional
   ══════════════════════════════════════════ */
.role-badge { font-size: 0.6875rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 2px; }
.role-bishop { background: rgba(196, 149, 106, 0.1); color: #9A7040; }
.role-priest { background: rgba(61, 139, 139, 0.1); color: #337474; }
.role-deacon { background: rgba(184, 150, 74, 0.1); color: #7A6520; }
.role-advocate { background: rgba(165, 74, 74, 0.1); color: #8C3D3D; }

/* ══════════════════════════════════════════
   SESSION ROWS (legacy)
   ══════════════════════════════════════════ */
.session-row { transition: background 0.1s; cursor: pointer; }
.session-row:hover { background: var(--bg-hover); }
.session-row:hover .session-topic { color: var(--text-primary); }
.session-topic { color: var(--text-secondary); transition: color 0.15s; font-weight: 500; }

/* Legacy tables */
table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
table tbody tr { transition: background 0.1s; }
table tbody tr:hover { background: var(--bg-hover); }

/* Legacy tab bar */
.tab-bar {
    border-bottom: 1px solid var(--border);
    gap: 0;
}
.tab-btn {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
    margin-bottom: -1px;
}
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active {
    color: var(--text-primary);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

/* Legacy session-hero and meta-grid */
.session-hero { padding: 1.5rem 0; }
.session-title {
    font-size: 1.5rem; font-weight: 400;
    color: var(--text-primary);
    letter-spacing: -0.01em; line-height: 1.3;
}
.session-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}
.meta-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
}
.meta-card .meta-label {
    font-size: 0.625rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 0.375rem;
}
.meta-card .meta-value {
    font-size: 1.25rem; font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════
   MARKDOWN — session summaries (serif headings)
   ══════════════════════════════════════════ */
.markdown-content { font-size: 1.0625rem; line-height: 1.85; }
.markdown-content h1 {
    font-size: 1.5rem; font-weight: 400; color: var(--md-heading);
    margin: 2rem 0 0.75rem; letter-spacing: -0.01em;
    font-style: italic;
}
.markdown-content h2 {
    font-size: 1.25rem; font-weight: 400; color: var(--md-heading2);
    margin: 1.75rem 0 0.625rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(196, 149, 106, 0.15);
}
.markdown-content h3 {
    font-size: 1.0625rem; font-weight: 400; color: var(--md-heading3);
    margin: 1.5rem 0 0.5rem;
}
.markdown-content h4 {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.9375rem; font-weight: 600; color: var(--md-heading4);
    margin: 1.125rem 0 0.375rem;
}
.markdown-content p { color: var(--md-text); line-height: 1.8; margin: 0.625rem 0; }
.markdown-content strong { color: var(--md-heading); font-weight: 700; }
.markdown-content em { color: var(--md-text); }
.markdown-content ul { color: var(--md-text); padding-left: 1.5rem; margin: 0.625rem 0; list-style-type: disc; }
.markdown-content ol { color: var(--md-text); padding-left: 1.5rem; margin: 0.625rem 0; list-style-type: decimal; }
.markdown-content li { margin: 0.375rem 0; line-height: 1.75; color: var(--md-text); }
.markdown-content li::marker { color: var(--accent); }
.markdown-content blockquote {
    border-left: 3px solid var(--accent);
    padding: 0.75rem 1.25rem; margin: 1rem 0;
    background: var(--blockquote-bg);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
}
.markdown-content code {
    background: var(--code-bg); padding: 0.15rem 0.4rem;
    border-radius: 2px; font-size: 0.85em; color: var(--code-color);
    font-family: 'JetBrains Mono', monospace;
}
.markdown-content pre {
    background: var(--pre-bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 1rem 1.25rem;
    overflow-x: auto; margin: 1rem 0;
}
.markdown-content pre code { background: none; padding: 0; font-size: 0.8125rem; color: var(--md-text); }
.markdown-content a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
.markdown-content a:hover { color: var(--md-heading); }
.markdown-content hr { border: none; border-top: 1px solid var(--hr-color); margin: 1.5rem 0; }
.markdown-content table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; }
.markdown-content th { text-align: left; padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--border); color: var(--text-primary); font-weight: 700; font-size: 0.8125rem; }
.markdown-content td { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--table-cell-border); color: var(--md-text); font-size: 0.875rem; }


/* ══════════════════════════════════════════
   SUMMARY TAB — structured sections
   ══════════════════════════════════════════ */
.summary-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    color: var(--md-heading);
    letter-spacing: -0.01em;
    line-height: 1.35;
    margin: 0 0 1.5rem;
}

.summary-section {
    margin-bottom: 1.5rem;
    position: relative;
}

.summary-section > .label {
    display: block;
    margin-bottom: 0.5rem;
}

.summary-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.summary-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}
.summary-toggle:hover {
    color: var(--text-secondary);
    background: var(--pill-hover-bg);
}

.summary-prompt-card {
    background: var(--blockquote-bg);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.summary-collapsed {
    max-height: 5rem;
}
.summary-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.5rem;
    background: linear-gradient(transparent, var(--bg-base));
    cursor: pointer;
}

.summary-hero {
    border-left: 3px solid var(--accent);
}

/* Key Moments — numbered list */
.summary-moments {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.summary-moment {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}
.summary-moment-num {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 0.8125rem;
    color: var(--accent);
    border: 1px solid rgba(196, 149, 106, 0.25);
    border-radius: 50%;
    margin-top: 0.125rem;
}

/* Scorecard table */
.summary-scorecard-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.summary-scorecard {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.summary-scorecard th {
    text-align: left;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.summary-scorecard td {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--table-cell-border);
    color: var(--md-text);
    white-space: nowrap;
}
.summary-scorecard td.sc-accept {
    color: #059669;
    font-weight: 600;
}
.summary-scorecard td.sc-reject {
    color: #dc2626;
    font-weight: 600;
}
.summary-scorecard td.sc-partial {
    color: #d97706;
    font-weight: 600;
}

/* Advocate cards (legacy format) */
.summary-adv-card {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--table-cell-border);
}
.summary-adv-card:last-child { border-bottom: none; }

/* Dissent card accent */
.summary-dissent-card {
    border-left: 3px solid rgba(220, 38, 38, 0.3);
}

/* Build This card accent */
.summary-build-card {
    border-left: 3px solid rgba(5, 150, 105, 0.3);
}

/* Brief content — clean reading */
.brief-content {
    font-size: 1.0625rem;
    line-height: 1.85;
}
.brief-content p {
    margin-bottom: 1rem;
}
.brief-content p:last-child {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════
   PROMPT TAB — formatted prompt
   ══════════════════════════════════════════ */
.prompt-formatted {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--md-text);
}
.prompt-formatted p {
    margin: 0 0 0.75rem;
}
.prompt-formatted p:last-child {
    margin-bottom: 0;
}
.prompt-list {
    margin: 0.5rem 0 1rem;
    padding-left: 1.5rem;
    color: var(--md-text);
    line-height: 1.75;
}
ol.prompt-list {
    list-style-type: decimal;
}
ul.prompt-list {
    list-style-type: disc;
}
.prompt-list li {
    padding: 0.25rem 0;
    padding-left: 0.25rem;
}

/* ══════════════════════════════════════════
   MAJORITY OPINION TAB
   ══════════════════════════════════════════ */
.majority-opinion-content {
    font-size: 1.0625rem;
    line-height: 1.85;
}
.majority-opinion-content h3 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.25rem;
    color: var(--md-heading2);
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.majority-opinion-content h3:first-child {
    margin-top: 0;
}
.majority-opinion-content h4 {
    font-size: 1rem;
    color: var(--md-heading3);
    margin: 1.5rem 0 0.5rem;
}
.majority-opinion-content hr {
    border: none;
    border-top: 1px solid var(--hr-color);
    margin: 1.5rem 0;
}
.majority-opinion-content ul,
.majority-opinion-content ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0 1rem;
}
.majority-opinion-content li {
    margin: 0.375rem 0;
}

/* ══════════════════════════════════════════
   DEBATE TAB — council performance cards
   ══════════════════════════════════════════ */
.debate-card {
    border-left: 3px solid var(--border);
    transition: border-color 0.15s;
}
.debate-card:hover {
    border-left-color: var(--accent);
}
.debate-card-header {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}
.debate-model-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.debate-rank {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--accent);
    font-family: 'Instrument Serif', Georgia, serif;
}
.debate-rank.withdrawn {
    color: var(--text-muted);
    font-family: inherit;
    font-style: italic;
}
.debate-position {
    margin-bottom: 0.625rem;
}
.debate-position:last-child {
    margin-bottom: 0;
}
.debate-position-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.debate-position-label.catalyst {
    color: var(--accent);
}
.debate-position-text {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--md-text);
    margin: 0;
}

/* ══════════════════════════════════════════
   NARRATIVE TAB
   ══════════════════════════════════════════ */
.narrative-card {
    max-width: 48rem;
}
.narrative-content {
    font-size: 1.0625rem;
    line-height: 1.85;
}
.narrative-content h1,
.narrative-content h2,
.narrative-content h3 {
    font-family: 'Instrument Serif', Georgia, serif;
    color: var(--md-heading);
    margin: 1.75rem 0 0.75rem;
}
.narrative-content h1:first-child,
.narrative-content h2:first-child,
.narrative-content h3:first-child {
    margin-top: 0;
}
.narrative-content h1 { font-size: 1.5rem; }
.narrative-content h2 { font-size: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
.narrative-content h3 { font-size: 1.0625rem; }
.narrative-content p {
    margin-bottom: 1rem;
}
.narrative-content blockquote {
    border-left: 3px solid var(--accent);
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    background: var(--blockquote-bg);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
}
.narrative-content hr {
    border: none;
    border-top: 1px solid var(--hr-color);
    margin: 1.5rem 0;
}
.narrative-content ul,
.narrative-content ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0 1rem;
}
.narrative-content li {
    margin: 0.375rem 0;
}
.narrative-content strong {
    color: var(--text-primary);
}
.narrative-content em {
    font-style: italic;
}

/* ── Panel Groups & Table ─────────────────── */
.panel-group {
    margin-bottom: 2rem;
}
.panel-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.panel-group-count {
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.panel-group-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}
.panel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.panel-table thead th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.panel-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}
.panel-table tbody tr:last-child td {
    border-bottom: none;
}
.panel-table tbody tr:hover {
    background: var(--bg-hover);
}
.panel-mono {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
}
.seat-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.seat-permanent {
    background: rgba(196, 149, 106, 0.15);
    color: var(--accent);
}
.seat-rotating {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}
.seat-dissent {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}
.vote-badge {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.vote-majority {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
}
.vote-dissent {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}