/*
 * GEMOTVIS THEME SYSTEM
 *
 * Themes override CSS custom properties (--vis-*) defined in base.css.
 * Apply a theme by adding a class to #screen: theme-magi, theme-minimal.
 * No class = classic manuscript style (the default, styled in base.css).
 *
 * Select via ?theme= query parameter. Same HTML and JS for all themes.
 *
 * Architecture:
 *   base.css      — :root variables (classic defaults) + neutral structure
 *   themes.css    — theme-specific variable overrides + visual effects (this file)
 *   layout.css    — adaptive layouts (shared by all themes)
 *   app.js        — reads ?theme=, sets class, loads theme-specific fonts
 *
 * Adding a new theme:
 *   1. Add a #screen.theme-<name> block that overrides --vis-* variables
 *   2. Add any theme-specific visual effects (shapes, backgrounds, borders)
 *   3. Add font loading in app.js applyTheme() if using web fonts
 *   4. Add to VALID_THEMES array in app.js
 */


/* =============================================================================
   MAGI THEME — Evangelion CRT aesthetic
   Amber-on-black, scanlines, phosphor glow, tactical grid, boot sequence.
   ============================================================================= */

#screen.theme-magi {
    --vis-amber: #ff8c00;
    --vis-amber-dim: #cc7000;
    --vis-amber-glow: rgba(255, 140, 0, 0.5);
    --vis-green: #00ff41;
    --vis-green-dim: #00cc33;
    --vis-red: #ff2020;
    --vis-red-dim: #cc1a1a;
    --vis-blue: #4488ff;
    --vis-cyan: #00ffff;
    --vis-magenta: #ff00ff;
    --vis-yellow: #ffff00;
    --vis-bg: #050505;
    --vis-panel: #0c0c0c;
    --vis-panel-border: #2a2a2a;
    --vis-text: #ff8c00;
    --vis-text-dim: #884600;
    --vis-font: 'Courier New', 'Lucida Console', monospace;
    --vis-font-display: Impact, 'Arial Black', sans-serif;
    --glow-sm: 0 0 4px var(--vis-amber-glow);
    --glow-md: 0 0 8px var(--vis-amber-glow), 0 0 2px var(--vis-amber-glow);
    --glow-lg: 0 0 16px var(--vis-amber-glow), 0 0 4px var(--vis-amber-glow);
    --hazard-stripe: repeating-linear-gradient(
        45deg, #ffaa00 0px, #ffaa00 10px, #000 10px, #000 20px
    );
    --hazard-stripe-red: repeating-linear-gradient(
        45deg, #ff2020 0px, #ff2020 10px, #000 10px, #000 20px
    );

    background: #050505;
    text-transform: uppercase;
    animation: flicker 8s infinite;
}

/* --- MAGI: CRT effects --- */

#screen.theme-magi .scanlines {
    display: block;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px, transparent 2px,
        rgba(0, 0, 0, 0.08) 2px, rgba(0, 0, 0, 0.08) 4px
    );
}

#screen.theme-magi .scanlines::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 8px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 140, 0, 0.03),
        rgba(255, 140, 0, 0.06),
        rgba(255, 140, 0, 0.03),
        transparent
    );
    animation: scanSweep var(--scan-speed, 6s) linear infinite;
}

#screen.theme-magi[data-state="analyzing"] { --scan-speed: 2.5s; }
#screen.theme-magi[data-state="analyzing"] .scanlines::after {
    height: 12px;
    background: linear-gradient(to bottom, transparent, rgba(0, 255, 255, 0.04), rgba(0, 255, 255, 0.08), rgba(0, 255, 255, 0.04), transparent);
}

@keyframes scanSweep {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}

/* CRT vignette + curve illusion */
#screen.theme-magi::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 999;
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.96; }
    94% { opacity: 1; }
    96% { opacity: 0.98; }
    97% { opacity: 1; }
}

/* --- MAGI: tactical grid background --- */

#screen.theme-magi main {
    background:
        linear-gradient(rgba(255, 140, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 140, 0, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(255, 140, 0, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 140, 0, 0.06) 1px, transparent 1px);
    background-size:
        20px 20px, 20px 20px,
        100px 100px, 100px 100px;
    background-position: center center;
}

/* --- MAGI: HUD decorations --- */

#screen.theme-magi .hud-corners {
    display: block;
}

#screen.theme-magi .hud-corner {
    border-color: var(--vis-amber);
    border-style: solid;
    border-width: 0;
    opacity: 0.5;
}

#screen.theme-magi .hud-corner.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
#screen.theme-magi .hud-corner.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
#screen.theme-magi .hud-corner.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
#screen.theme-magi .hud-corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

#screen.theme-magi .edge-readout {
    display: block;
    color: rgba(255, 140, 0, 0.2);
}

/* --- MAGI: header glow --- */

#screen.theme-magi header {
    border-bottom: 2px solid var(--vis-amber);
    box-shadow: 0 2px 16px rgba(255, 140, 0, 0.1);
}

#screen.theme-magi .system-label {
    text-shadow: var(--glow-sm);
}

/* Chromatic aberration on topic */
#screen.theme-magi .topic-label {
    text-shadow:
        var(--glow-md),
        0.5px 0 1px rgba(0, 200, 255, 0.3),
        -0.5px 0 1px rgba(255, 0, 80, 0.2);
}

/* --- MAGI: status indicator glows --- */

#screen.theme-magi .status-indicator.online {
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.15);
}

#screen.theme-magi .status-indicator.offline {
    text-shadow: 0 0 8px rgba(255, 32, 32, 0.4);
}

#screen.theme-magi .status-indicator.analyzing {
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.2);
}

/* --- MAGI: nav tabs --- */

#screen.theme-magi .delib-tab:hover {
    text-shadow: var(--glow-sm);
}

#screen.theme-magi .delib-tab.active {
    background: rgba(255, 140, 0, 0.1);
    text-shadow: var(--glow-sm);
    box-shadow: 0 0 8px rgba(255, 140, 0, 0.1);
}

/* --- MAGI: diamond node — rotated square with amber glow --- */

#screen.theme-magi .diamond {
    transform: translate(-50%, -50%) rotate(45deg);
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.25) 0%,
        rgba(255, 140, 0, 0.08) 50%,
        rgba(255, 140, 0, 0.15) 100%
    );
    box-shadow:
        var(--glow-md),
        inset 0 0 30px rgba(255, 140, 0, 0.08),
        inset 0 0 60px rgba(255, 140, 0, 0.03);
}

#screen.theme-magi .diamond::after {
    border: 1px solid rgba(255, 140, 0, 0.15);
}

#screen.theme-magi .agent-name {
    text-shadow: var(--glow-md);
}

/* --- MAGI: vote glows --- */

#screen.theme-magi .vote-approve {
    text-shadow: 0 0 12px rgba(0, 255, 65, 0.7), 0 0 24px rgba(0, 255, 65, 0.3);
}

#screen.theme-magi .vote-deny {
    text-shadow: 0 0 12px rgba(255, 32, 32, 0.7), 0 0 24px rgba(255, 32, 32, 0.3);
}

#screen.theme-magi .vote-pass {
    text-shadow: var(--glow-md);
}

/* --- MAGI: conviction fills --- */

#screen.theme-magi .diamond.conviction-high {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.35) 0%, rgba(255, 140, 0, 0.15) 50%, rgba(255, 140, 0, 0.25) 100%);
}
#screen.theme-magi .diamond.conviction-med {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.2) 0%, rgba(255, 140, 0, 0.08) 50%, rgba(255, 140, 0, 0.15) 100%);
}
#screen.theme-magi .diamond.conviction-low {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.08) 0%, rgba(255, 140, 0, 0.02) 50%, rgba(255, 140, 0, 0.05) 100%);
}

/* --- MAGI: cluster fills + glows --- */

#screen.theme-magi .cluster-0 .diamond::after { border-color: rgba(255, 140, 0, 0.2); }

#screen.theme-magi .cluster-1 {
    border-color: var(--vis-cyan);
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0.06) 50%, rgba(0, 255, 255, 0.12) 100%) !important;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3), inset 0 0 30px rgba(0, 255, 255, 0.05) !important;
}
#screen.theme-magi .cluster-1::after { border-color: rgba(0, 255, 255, 0.2) !important; }

#screen.theme-magi .cluster-2 {
    border-color: var(--vis-magenta);
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.18) 0%, rgba(255, 0, 255, 0.05) 50%, rgba(255, 0, 255, 0.1) 100%) !important;
}

#screen.theme-magi .cluster-3 {
    border-color: var(--vis-green);
    background: linear-gradient(135deg, rgba(0, 255, 65, 0.18) 0%, rgba(0, 255, 65, 0.05) 50%, rgba(0, 255, 65, 0.1) 100%) !important;
}

/* --- MAGI: integrity warning with hazard glow --- */

#screen.theme-magi .integrity-warning .diamond {
    box-shadow: 0 0 20px rgba(255, 32, 32, 0.5), 0 0 40px rgba(255, 32, 32, 0.2) !important;
}

#screen.theme-magi .integrity-warning .diamond::after {
    border-color: var(--vis-red) !important;
    animation: warningPulse 1s ease-in-out infinite;
}

@keyframes warningPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* --- MAGI: emergency mode glows --- */

#screen.theme-magi.emergency-mode .vote-approve {
    text-shadow: 0 0 12px rgba(255, 32, 32, 0.7) !important;
}

/* --- MAGI: panel effects --- */

#screen.theme-magi .panel-header {
    background: rgba(255, 140, 0, 0.08);
    text-shadow: var(--glow-sm);
}

#screen.theme-magi .crux-claim {
    text-shadow: var(--glow-sm);
}

#screen.theme-magi .controversy-fill {
    box-shadow: 0 0 4px rgba(255, 32, 32, 0.4);
}

#screen.theme-magi .crux-item {
    border-bottom-color: rgba(255, 140, 0, 0.08);
}

#screen.theme-magi .audit-entry {
    border-bottom-color: rgba(255, 140, 0, 0.04);
}

#screen.theme-magi .metric-value {
    text-shadow: var(--glow-md);
}

/* --- MAGI: footer glow --- */

#screen.theme-magi footer {
    border-top: 2px solid var(--vis-amber);
    box-shadow: 0 -2px 16px rgba(255, 140, 0, 0.08);
}

/* --- MAGI: analysis pipeline glows --- */

#screen.theme-magi .analysis-bar {
    box-shadow: 0 2px 12px rgba(0, 255, 255, 0.05);
}

#screen.theme-magi .analysis-label {
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}

#screen.theme-magi .pipeline-stage.active {
    background: rgba(0, 255, 255, 0.12);
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.15);
}

#screen.theme-magi .pipeline-stage.done {
    background: rgba(0, 255, 65, 0.08);
    text-shadow: 0 0 4px rgba(0, 255, 65, 0.3);
}

/* --- MAGI: connection glows --- */

#screen.theme-magi .connection-agree {
    filter: drop-shadow(0 0 3px rgba(0, 255, 65, 0.3));
}

#screen.theme-magi .connection-disagree {
    filter: drop-shadow(0 0 3px rgba(255, 32, 32, 0.3));
}

#screen.theme-magi .connection-bridging {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
}

/* --- MAGI: tooltip --- */

#screen.theme-magi .agent-tooltip {
    background: #0c0c0c;
    box-shadow: var(--glow-lg), 0 4px 20px rgba(0, 0, 0, 0.9);
}

#screen.theme-magi .tooltip-header {
    background: rgba(255, 140, 0, 0.05);
    text-transform: uppercase;
}

#screen.theme-magi .tooltip-body {
    color: #bbb;
}

#screen.theme-magi .tooltip-footer {
    text-transform: uppercase;
}

/* --- MAGI: center panel --- */

#screen.theme-magi .center-panel {
    background: #0c0c0c;
    box-shadow: var(--glow-lg), 0 0 40px rgba(255, 140, 0, 0.08);
    color: #ddd;
}

#screen.theme-magi .panel-text {
    color: #ccc;
}

/* --- MAGI: boot sequence (only theme that shows it) --- */

body.boot-magi .boot-overlay {
    display: flex;
    background: #050505;
    animation: bootFade 0.5s ease-out 2.5s forwards;
}

body.boot-magi .boot-overlay .boot-text {
    text-transform: uppercase;
    color: #ff8c00;
    font-family: 'Courier New', 'Lucida Console', monospace;
    animation: bootLine 0.3s ease-out forwards;
}

body.boot-magi .boot-text:nth-child(1) { animation-delay: 0.2s; }
body.boot-magi .boot-text:nth-child(2) { animation-delay: 0.5s; }
body.boot-magi .boot-text:nth-child(3) { animation-delay: 0.8s; }
body.boot-magi .boot-text:nth-child(4) { animation-delay: 1.1s; color: #00ff41; }
body.boot-magi .boot-text:nth-child(5) { animation-delay: 1.4s; color: #00ff41; }
body.boot-magi .boot-text:nth-child(6) { animation-delay: 1.7s; color: #00ffff; font-size: 18px; letter-spacing: 6px; }

@keyframes bootLine {
    0% { opacity: 0; transform: translateY(5px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes bootFade {
    0% { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}

/* --- MAGI: multi-view glows --- */

#screen.theme-magi .multi-region {
    background: rgba(10, 10, 10, 0.6);
}

#screen.theme-magi .multi-region.focused {
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.15);
}

#screen.theme-magi .multi-region-title {
    background: rgba(255, 140, 0, 0.05);
}

#screen.theme-magi .multi-region-topic {
    text-shadow: var(--glow-sm);
}

#screen.theme-magi .multi-agent::before {
    transform: rotate(45deg);
    background: rgba(255, 140, 0, 0.15);
}

#screen.theme-magi .multi-agent.cluster-1::before {
    background: rgba(0, 255, 255, 0.12);
}

#screen.theme-magi .multi-agent.cluster-2::before {
    background: rgba(255, 0, 255, 0.1);
}

#screen.theme-magi .multi-agent.cluster-3::before {
    background: rgba(0, 255, 65, 0.1);
}

#screen.theme-magi .multi-region-status.analyzing {
    background: rgba(0, 255, 255, 0.05);
}

/* Focus flash on camera cut */
#screen.theme-magi[data-state="focusing"] .multi-canvas {
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

#screen.theme-magi[data-state="focusing"] .scanlines::after {
    height: 20px;
    background: linear-gradient(to bottom, transparent, rgba(255, 140, 0, 0.08), rgba(255, 140, 0, 0.15), rgba(255, 140, 0, 0.08), transparent);
}

/* --- MAGI: login form --- */

#screen.theme-magi .login-title {
    text-shadow: var(--glow-lg);
}

#screen.theme-magi .login-input {
    border-width: 2px;
    color: var(--vis-amber);
}

#screen.theme-magi .login-input:focus {
    box-shadow: var(--glow-md);
}

#screen.theme-magi .login-button {
    border-width: 2px;
    text-transform: uppercase;
}

#screen.theme-magi .login-button:hover {
    box-shadow: var(--glow-md);
}

#screen.theme-magi .login-error {
    text-shadow: 0 0 8px rgba(255, 32, 32, 0.4);
}

/* --- MAGI: cycle bar glow --- */

#screen.theme-magi .cycle-progress {
    box-shadow: 0 0 6px var(--vis-amber-glow);
}

/* --- MAGI: empty state glow --- */

#screen.theme-magi .empty-state {
    text-shadow: var(--glow-sm);
}

/* --- MAGI: reduced motion --- */

@media (prefers-reduced-motion: reduce) {
    #screen.theme-magi .scanlines, #screen.theme-magi .scanlines::after { display: none; }
    #screen.theme-magi::before { display: none; }
    #screen.theme-magi { animation: none; }
    #screen.theme-magi .integrity-warning .diamond::after { animation: none; }
    body.boot-magi .boot-overlay { display: none; }
}


/* =============================================================================
   GEMOT CLASSIC — Medieval manuscript enhancements
   The base.css defaults already use the classic palette. This section adds
   the manuscript-specific decorative details: parchment texture, rubrication,
   shield shapes, cartographic terrain, blackletter typography.
   Fonts: UnifrakturMaguntia (display), IM Fell English (body), Cinzel (numerals).
   Agent nodes are heraldic shields; connections are cartographic roads (KCD1 style).
   ============================================================================= */

/* Classic: boot sequence — opening the codex */
body.boot-classic .boot-overlay {
    display: flex;
    background: #F5E6C8;
    animation: bootFade 0.6s ease-out 1.8s forwards;
}

body.boot-classic .boot-overlay .boot-text {
    font-family: 'IM Fell English', 'Georgia', serif;
    color: #8B5A2B;
    opacity: 0;
    animation: classicBootIn 0.5s ease-out forwards;
}

/* Star ornament */
body.boot-classic .boot-text:nth-child(1) {
    font-size: 28px;
    color: #CFB53B;
    animation-delay: 0.1s;
}

/* "Gemot" in blackletter */
body.boot-classic .boot-text:nth-child(2) {
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 36px;
    color: #8B1A1A;
    letter-spacing: 4px;
    animation-delay: 0.4s;
}

/* "Deliberation Monitor" in small caps */
body.boot-classic .boot-text:nth-child(3) {
    font-family: 'IM Fell English SC', 'Georgia', serif;
    font-variant: small-caps;
    font-size: 12px;
    letter-spacing: 4px;
    color: #8B5A2B;
    animation-delay: 0.8s;
}

@keyframes classicBootIn {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Classic: ink bleed on text */
#screen.theme-classic {
    text-shadow: 0 0 0.5px rgba(44, 24, 16, 0.3);
}

/* Classic: parchment surface with aging, map border frame */
#screen.theme-classic main {
    background:
        radial-gradient(ellipse at 15% 25%, rgba(139, 90, 43, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 75% 15%, rgba(139, 90, 43, 0.06) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 70%, rgba(139, 90, 43, 0.07) 0%, transparent 30%),
        radial-gradient(ellipse at 40% 85%, rgba(139, 90, 43, 0.05) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(245, 230, 200, 0) 30%, rgba(210, 180, 140, 0.15) 100%);
    /* Double-rule map border + aged vignette */
    box-shadow:
        inset 0 0 80px rgba(139, 90, 43, 0.12),
        inset 0 0 0 8px var(--vis-bg),
        inset 0 0 0 9px rgba(139, 90, 43, 0.2),
        inset 0 0 0 13px var(--vis-bg),
        inset 0 0 0 14px rgba(139, 90, 43, 0.1);
}

/* Parchment grain overlay */
#screen.theme-classic main::before {
    content: '';
    position: absolute;
    inset: 0;
    filter: url(#parchment-grain);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: multiply;
}

/* Cartographic terrain features (KCD1 map inspired) */
#screen.theme-classic main::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.22;
    background:
        /* Forest clusters — groups of tree-like marks */
        radial-gradient(ellipse at 8% 35%, #2D6B3F 0px, #2D6B3F 3px, transparent 4px),
        radial-gradient(ellipse at 10% 33%, #2D6B3F 0px, #2D6B3F 3px, transparent 4px),
        radial-gradient(ellipse at 9% 37%, #2D6B3F 0px, #2D6B3F 2px, transparent 3px),
        radial-gradient(ellipse at 12% 34%, #2D6B3F 0px, #2D6B3F 2px, transparent 3px),
        radial-gradient(ellipse at 6% 36%, #2D6B3F 0px, #2D6B3F 1.5px, transparent 2.5px),
        radial-gradient(ellipse at 11% 38%, #2D6B3F 0px, #2D6B3F 1.5px, transparent 2.5px),
        /* Upper-right forest */
        radial-gradient(ellipse at 88% 22%, #2D6B3F 0px, #2D6B3F 3px, transparent 4px),
        radial-gradient(ellipse at 90% 20%, #2D6B3F 0px, #2D6B3F 3px, transparent 4px),
        radial-gradient(ellipse at 89% 24%, #2D6B3F 0px, #2D6B3F 2px, transparent 3px),
        radial-gradient(ellipse at 91% 22%, #2D6B3F 0px, #2D6B3F 2px, transparent 3px),
        radial-gradient(ellipse at 87% 23%, #2D6B3F 0px, #2D6B3F 1.5px, transparent 2.5px),
        radial-gradient(ellipse at 92% 19%, #2D6B3F 0px, #2D6B3F 1.5px, transparent 2.5px),
        /* Lower-right forest */
        radial-gradient(ellipse at 82% 75%, #2D6B3F 0px, #2D6B3F 2.5px, transparent 3.5px),
        radial-gradient(ellipse at 84% 73%, #2D6B3F 0px, #2D6B3F 3px, transparent 4px),
        radial-gradient(ellipse at 83% 77%, #2D6B3F 0px, #2D6B3F 2px, transparent 3px),
        radial-gradient(ellipse at 80% 74%, #2D6B3F 0px, #2D6B3F 1.5px, transparent 2.5px),
        /* River — winding blue-gray line across the map */
        linear-gradient(155deg, transparent 32%, rgba(46, 88, 148, 0.2) 32.3%, rgba(46, 88, 148, 0.25) 32.6%, rgba(46, 88, 148, 0.2) 32.9%, transparent 33.2%),
        linear-gradient(165deg, transparent 48%, rgba(46, 88, 148, 0.15) 48.2%, rgba(46, 88, 148, 0.2) 48.5%, rgba(46, 88, 148, 0.15) 48.8%, transparent 49%),
        /* Hill contour lines */
        radial-gradient(ellipse at 30% 60%, transparent 80px, rgba(139, 90, 43, 0.35) 81px, transparent 83px),
        radial-gradient(ellipse at 30% 60%, transparent 110px, rgba(139, 90, 43, 0.2) 111px, transparent 113px),
        radial-gradient(ellipse at 30% 60%, transparent 140px, rgba(139, 90, 43, 0.12) 141px, transparent 143px),
        radial-gradient(ellipse at 70% 35%, transparent 60px, rgba(139, 90, 43, 0.3) 61px, transparent 63px),
        radial-gradient(ellipse at 70% 35%, transparent 90px, rgba(139, 90, 43, 0.18) 91px, transparent 93px),
        /* Small hills */
        radial-gradient(ellipse at 55% 80%, transparent 40px, rgba(139, 90, 43, 0.18) 41px, transparent 43px),
        radial-gradient(ellipse at 20% 15%, transparent 30px, rgba(139, 90, 43, 0.12) 31px, transparent 33px);
}

/* Classic: double ink-rule header */
#screen.theme-classic header {
    border-bottom: none;
    background-image: linear-gradient(to right, var(--vis-panel-border), var(--vis-panel-border));
    background-size: 100% 1px;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-bottom: 10px;
    position: relative;
}

#screen.theme-classic header::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--vis-panel-border);
    opacity: 0.5;
}

/* Classic: rubricated topic title — large, bold blackletter */
#screen.theme-classic .topic-label {
    color: #6B1520;
    font-size: 20px;
    font-weight: bold;
}

/* Classic: small caps labels — readable dark ink */
#screen.theme-classic .system-label {
    font-family: 'IM Fell English SC', 'Georgia', serif;
    font-variant: small-caps;
    font-size: 15px;
    color: var(--vis-text);
}

#screen.theme-classic .status-indicator {
    font-family: 'IM Fell English SC', 'Georgia', serif;
    font-variant: small-caps;
}

/* Classic: settlement-style agent nodes — shield keep with crenellated wall base */

/* Settlement wall base behind the shield */
#screen.theme-classic .agent-node::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
    width: 110px;
    height: 40px;
    z-index: 1;
    background: linear-gradient(180deg, #C8B890, #B8A880);
    border: 1.5px solid rgba(139, 90, 43, 0.25);
    border-radius: 0 0 2px 2px;
    opacity: 0.4;
    /* Crenellation: stepped top border via box-shadow */
    box-shadow:
        -40px -6px 0 0 rgba(139, 90, 43, 0.15),
        -24px -6px 0 0 rgba(139, 90, 43, 0.15),
        -8px -6px 0 0 rgba(139, 90, 43, 0.15),
        8px -6px 0 0 rgba(139, 90, 43, 0.15),
        24px -6px 0 0 rgba(139, 90, 43, 0.15),
        40px -6px 0 0 rgba(139, 90, 43, 0.15);
}

/* Heraldic shield — the keep/citadel (public domain clip-path from Wikimedia Commons) */
#screen.theme-classic .diamond {
    clip-path: url(#shield);
    border-radius: 0;
    border: none;
    background: linear-gradient(180deg, #EDE0C4 0%, #E5D5B0 30%, #D8C8A0 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

/* Gold border ring behind shield */
#screen.theme-classic .diamond::after {
    clip-path: url(#shield);
    border: none;
    inset: -3px;
    background: linear-gradient(180deg, #CFB53B, #AF803C);
    z-index: -1;
}

/* Vote pennant — banner hanging beside the shield */
#screen.theme-classic .diamond-vote {
    position: absolute;
    top: 2px;
    right: -10px;
    left: auto;
    bottom: auto;
    width: auto;
    height: auto;
    display: block;
    align-items: initial;
    justify-content: initial;
    z-index: 6;
}

#screen.theme-classic .agent-vote {
    font-family: 'Cinzel', 'Georgia', serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 4px 8px 8px;
    display: block;
    text-align: center;
    min-width: 36px;
    line-height: 1.2;
    /* Pennant/gonfalon shape — pointed bottom */
    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
    text-shadow: none;
}

/* Pennant colors by vote */
#screen.theme-classic .agent-vote.vote-approve {
    background: #2D6B3F;
    color: #F5E6C8;
}

#screen.theme-classic .agent-vote.vote-deny {
    background: #E34234;
    color: #F5E6C8;
}

#screen.theme-classic .agent-vote.vote-pass {
    background: #8B5A2B;
    color: #EDE0C4;
}

/* Classic: rubricated panel headers with pilcrow — dark rubric for readability */
#screen.theme-classic .panel-header {
    font-family: 'IM Fell English SC', 'Georgia', serif;
    font-variant: small-caps;
    color: #8B1A1A;
    text-shadow: none;
    letter-spacing: 3px;
}

#screen.theme-classic .footer-panel .panel-header::before {
    content: '\00B6 '; /* pilcrow — scribal section mark */
    color: #CFB53B;
}

/* Classic: crux items as marginal glosses */
#screen.theme-classic .crux-item {
    border-left: 2px solid rgba(207, 181, 59, 0.3);
    padding-left: 8px;
    margin-left: 4px;
}

/* Classic: gold-leaf illuminated metrics */
#screen.theme-classic .metric-value {
    font-family: 'Cinzel', 'Georgia', serif;
    color: #AF803C;
    text-shadow: 0 1px 0 rgba(207, 181, 59, 0.3);
}

#screen.theme-classic .metric {
    background: linear-gradient(180deg, rgba(207, 181, 59, 0.03), rgba(207, 181, 59, 0.07));
    padding: 4px;
}

/* Classic: audit log as scribal chronicle */
#screen.theme-classic .audit-entry .timestamp { color: #2E5894; }
#screen.theme-classic .audit-entry .method { color: #8B1A1A; font-style: italic; }
#screen.theme-classic .audit-entry .agent { color: #120A8F; }

/* Manicule pointing hand on most recent entry */
#screen.theme-classic .audit-entry:first-child::before {
    content: '\261E '; /* pointing hand */
    color: #E34234;
}

/* Classic: hand-drawn road connections (bezier curves generated by JS) */
#screen.theme-classic .connection-line { stroke-linecap: round; stroke-linejoin: round; }
#screen.theme-classic .connection-agree { stroke-width: 2.5; }
#screen.theme-classic .connection-disagree { stroke-width: 1.5; stroke-dasharray: 4 4; }
#screen.theme-classic .connection-neutral { stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.4; }
#screen.theme-classic .connection-bridging { stroke-width: 3.5; }

/* Road waypoint markers (added by JS) */
#screen.theme-classic .road-waypoint {
    fill: #8B5A2B;
    opacity: 0.3;
}

/* Classic: center panel as ornate map cartouche */
#screen.theme-classic .center-panel {
    border: 2px solid #8B5A2B;
    outline: 1px solid rgba(139, 90, 43, 0.3);
    outline-offset: 3px;
    background: linear-gradient(180deg, #F5E6C8 0%, #EDE0C4 100%);
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 20px rgba(139, 90, 43, 0.05);
    position: relative;
}

/* Cartouche top ornament — fleuron line */
#screen.theme-classic .center-panel::before {
    content: '\2767\2014\2756\2014\2767';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: #CFB53B;
    background: var(--vis-bg);
    padding: 0 6px;
    white-space: nowrap;
    letter-spacing: 2px;
}

/* Cartouche bottom ornament */
#screen.theme-classic .center-panel::after {
    content: '\2619';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(207, 181, 59, 0.6);
    background: var(--vis-bg);
    padding: 0 6px;
}

/* Classic: double-rule footer */
#screen.theme-classic footer {
    border-top: none;
    position: relative;
}

#screen.theme-classic footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--vis-panel-border);
}

#screen.theme-classic footer::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--vis-panel-border);
    opacity: 0.5;
}

#screen.theme-classic .footer-panel {
    border-right-color: rgba(139, 90, 43, 0.3);
}

/* Classic: cluster colors (illuminated pigments) */
#screen.theme-classic .cluster-1 .diamond { background: linear-gradient(180deg, #D8D5F0, #C5C0E8) !important; }
#screen.theme-classic .cluster-1 .diamond::after { background: linear-gradient(180deg, #120A8F, #2142AB) !important; }
#screen.theme-classic .cluster-2 .diamond { background: linear-gradient(180deg, #E8D0E0, #D8C0D5) !important; }
#screen.theme-classic .cluster-2 .diamond::after { background: linear-gradient(180deg, #66023C, #8B2060) !important; }
#screen.theme-classic .cluster-3 .diamond { background: linear-gradient(180deg, #D0E8D5, #C0D8C5) !important; }
#screen.theme-classic .cluster-3 .diamond::after { background: linear-gradient(180deg, #2D6B3F, #43B3AE) !important; }

/* Classic: decorative corner marks + compass rose */
#screen.theme-classic .hud-corners { display: block; }

#screen.theme-classic .hud-corner {
    display: block;
    width: auto;
    height: auto;
    border: none;
    opacity: 0.15;
    font-size: 18px;
    color: #8B5A2B;
}

#screen.theme-classic .hud-corner.tl { top: 4px; left: 8px; }
#screen.theme-classic .hud-corner.tl::before { content: '\2619'; display: block; } /* ☙ reversed fleuron */

#screen.theme-classic .hud-corner.tr { top: 4px; right: 8px; }
#screen.theme-classic .hud-corner.tr::before { content: '\2767'; display: block; } /* ❧ fleuron */

#screen.theme-classic .hud-corner.bl { bottom: 4px; left: 8px; }
#screen.theme-classic .hud-corner.bl::before { content: '\2767'; display: block; transform: scaleX(-1); }

/* Compass rose — bottom right */
#screen.theme-classic .hud-corner.br {
    bottom: 8px;
    right: 8px;
    opacity: 0.12;
    font-size: 40px;
}
#screen.theme-classic .hud-corner.br::before { content: '\2726'; display: block; }
#screen.theme-classic .hud-corner.br::after {
    content: 'N';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'IM Fell English SC', serif;
    font-size: 10px;
    letter-spacing: 0;
}

/* Classic: fleuron divider */
#screen.theme-classic .nav-label::before {
    content: '\2767 ';
    color: #CFB53B;
}

/* Classic: cycle bar gold fill */
#screen.theme-classic .cycle-progress {
    background: linear-gradient(90deg, #AF803C, #CFB53B);
}

/* Classic: nav tabs */
#screen.theme-classic .delib-tab:hover { color: #8B1A1A; border-color: #8B1A1A; }
#screen.theme-classic .delib-tab.active { color: #8B1A1A; border-color: #8B1A1A; background: rgba(139, 26, 26, 0.04); }
#screen.theme-classic .delib-tab.analyzing { color: #120A8F; border-color: #120A8F; }

/* Classic: analysis bar */
#screen.theme-classic .analysis-label {
    font-family: 'IM Fell English SC', 'Georgia', serif;
    font-variant: small-caps;
}

/* Classic: tooltip */
#screen.theme-classic .tooltip-header {
    font-family: 'IM Fell English SC', 'Georgia', serif;
    font-variant: small-caps;
    color: #8B1A1A;
}

#screen.theme-classic .tooltip-footer { font-style: italic; }

/* Classic: login form */
#screen.theme-classic .login-title { color: #8B1A1A; }
#screen.theme-classic .login-subtitle { font-style: italic; }
#screen.theme-classic .login-button {
    font-family: 'IM Fell English SC', serif;
    font-variant: small-caps;
    letter-spacing: 3px;
}
#screen.theme-classic .login-button:hover { color: #8B1A1A; border-color: #8B1A1A; }

/* Classic: multi-view shields */
#screen.theme-classic .multi-region-topic { font-family: var(--vis-font-display); color: #8B1A1A; }
#screen.theme-classic .multi-agent::before {
    clip-path: url(#shield);
    border-radius: 0;
    transform: none;
    border: none;
    background: linear-gradient(180deg, #EDE0C4, #D8C8A0);
    box-shadow: 0 0 0 1.5px #8B5A2B;
}
#screen.theme-classic .multi-agent.cluster-1::before { background: linear-gradient(180deg, #D8D5F0, #C5C0E8); box-shadow: 0 0 0 1.5px #120A8F; }
#screen.theme-classic .multi-agent.cluster-2::before { background: linear-gradient(180deg, #E8D0E0, #D8C0D5); box-shadow: 0 0 0 1.5px #66023C; }
#screen.theme-classic .multi-agent.cluster-3::before { background: linear-gradient(180deg, #D0E8D5, #C0D8C5); box-shadow: 0 0 0 1.5px #2D6B3F; }

/* Classic: empty state */
#screen.theme-classic .empty-state { font-style: italic; letter-spacing: 1px; }


/* =============================================================================
   MINIMAL THEME — Clean, modern, no effects
   For embedding or professional presentations.
   ============================================================================= */

/* Minimal: boot sequence — clean fade */
body.boot-minimal .boot-overlay {
    display: flex;
    background: #ffffff;
    animation: bootFade 0.3s ease-out 0.8s forwards;
}

body.boot-minimal .boot-overlay .boot-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #2563eb;
    letter-spacing: 1px;
    opacity: 0;
    animation: minimalBootIn 0.4s ease-out 0.1s forwards;
}

@keyframes minimalBootIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

#screen.theme-minimal {
    --vis-amber: #2563eb;
    --vis-amber-dim: #64748b; /* slate-500 for readable secondary text on white */
    --vis-amber-glow: rgba(37, 99, 235, 0.15);
    --vis-green: #16a34a;
    --vis-green-dim: #22c55e;
    --vis-red: #dc2626;
    --vis-red-dim: #ef4444;
    --vis-blue: #3b82f6;
    --vis-cyan: #0891b2;
    --vis-magenta: #a855f7;
    --vis-yellow: #eab308;
    --vis-bg: #ffffff;
    --vis-panel: #f8fafc;
    --vis-panel-border: #e2e8f0;
    --vis-text: #1e293b;
    --vis-text-dim: #94a3b8;
    --vis-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --vis-font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    background: #ffffff;
}

/* Minimal: clean background */
#screen.theme-minimal main { background: #fafafa; }

/* Minimal: header — thin border, no shadow (Linear-style) */
#screen.theme-minimal header {
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: none;
}

/* Minimal: typography — Inter-like system font, clean weights */
#screen.theme-minimal .topic-label {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: #0f172a;
}

#screen.theme-minimal .system-label {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0;
    color: #0f172a;
}

/* Minimal: pill badges — soft backgrounds, no hard borders */
#screen.theme-minimal .status-indicator {
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 500;
    border: none;
}

#screen.theme-minimal .status-indicator.online { background: #dcfce7; color: #15803d; }
#screen.theme-minimal .status-indicator.offline { background: #fee2e2; color: #b91c1c; }
#screen.theme-minimal .status-indicator.analyzing { background: #e0f2fe; color: #0369a1; }

/* Minimal: circle agent nodes — white card with subtle shadow */
#screen.theme-minimal .diamond {
    border-radius: 50%;
    border: 1.5px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#screen.theme-minimal .diamond::after { border: none; }

/* Minimal: vote text — refined, not screaming */
#screen.theme-minimal .agent-vote {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.02em;
}

#screen.theme-minimal .vote-approve { color: #059669; }
#screen.theme-minimal .vote-deny { color: #dc2626; }
#screen.theme-minimal .vote-pass { color: #cbd5e1; font-size: 18px; }

/* Minimal: agent labels — clean, no uppercase */
#screen.theme-minimal .agent-name {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0;
    color: #374151;
}

#screen.theme-minimal .agent-model {
    color: #9ca3af;
    font-size: 10px;
}

/* Minimal: conviction — border weight only, no fill change */
#screen.theme-minimal .diamond.conviction-high { border-color: var(--vis-amber); border-width: 2px; }
#screen.theme-minimal .diamond.conviction-med { border-color: #d1d5db; }
#screen.theme-minimal .diamond.conviction-low { border-color: #e5e7eb; border-style: dashed; }

/* Minimal: clusters — soft colors */
#screen.theme-minimal .cluster-0 { border-color: #2563eb !important; }
#screen.theme-minimal .cluster-1 { border-color: #0891b2 !important; }
#screen.theme-minimal .cluster-2 { border-color: #a855f7 !important; }
#screen.theme-minimal .cluster-3 { border-color: #16a34a !important; }

/* Minimal: panel header — uppercase micro label (Vercel-style) */
#screen.theme-minimal .panel-header {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #6b7280;
    text-transform: uppercase;
    border-bottom: 1px solid #f0f0f0;
}

/* Minimal: center panel — floating card */
#screen.theme-minimal .center-panel {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    background: #ffffff;
}

/* Minimal: analysis pipeline — pill chips */
#screen.theme-minimal .analysis-bar {
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

#screen.theme-minimal .analysis-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #0369a1;
}

#screen.theme-minimal .pipeline-stage {
    border-radius: 999px;
    font-size: 10px;
    padding: 3px 8px;
    border: 1px solid #e5e7eb;
    color: #9ca3af;
}

#screen.theme-minimal .pipeline-stage.active {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}

#screen.theme-minimal .pipeline-stage.done {
    background: #dcfce7;
    border-color: #86efac;
    color: #15803d;
}

/* Minimal: nav tabs — pill buttons */
#screen.theme-minimal .delib-tab {
    border-radius: 999px;
    font-size: 12px;
    padding: 4px 14px;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    font-weight: 400;
}

#screen.theme-minimal .delib-tab:hover {
    background: #f9fafb;
    color: #374151;
}

#screen.theme-minimal .delib-tab.active {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
    font-weight: 500;
}

#screen.theme-minimal .delib-tab.analyzing {
    border-color: #7dd3fc;
    color: #0369a1;
}

/* Minimal: tooltip — floating card with soft shadow */
#screen.theme-minimal .agent-tooltip {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    background: #ffffff;
}

#screen.theme-minimal .tooltip-header {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#screen.theme-minimal .tooltip-body { color: #374151; font-size: 13px; }
#screen.theme-minimal .tooltip-footer { color: #9ca3af; font-size: 10px; }

/* Minimal: footer — clean dividers */
#screen.theme-minimal footer {
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
}

#screen.theme-minimal .footer-panel {
    border-right: 1px solid #f0f0f0;
}

/* Minimal: metrics — clean typography */
#screen.theme-minimal .metric-value {
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.02em;
    color: #0f172a;
}

#screen.theme-minimal .metric-label {
    font-size: 10px;
    color: #9ca3af;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Minimal: crux items */
#screen.theme-minimal .crux-claim {
    color: #1e293b;
    font-weight: 400;
    font-size: 12px;
}

#screen.theme-minimal .crux-meta { font-size: 10px; color: #9ca3af; }

/* Minimal: audit log */
#screen.theme-minimal .audit-entry { color: #6b7280; border-bottom-color: #f5f5f5; }
#screen.theme-minimal .audit-entry .timestamp { color: #9ca3af; }
#screen.theme-minimal .audit-entry .method { color: #2563eb; font-weight: 500; }
#screen.theme-minimal .audit-entry .agent { color: #0f172a; }

/* Minimal: connections — light, geometric */
#screen.theme-minimal .connection-agree { stroke: #22c55e; stroke-width: 1.5; }
#screen.theme-minimal .connection-disagree { stroke: #f87171; stroke-width: 1.5; }
#screen.theme-minimal .connection-neutral { stroke: #e5e7eb; }
#screen.theme-minimal .connection-bridging { stroke: #fbbf24; stroke-width: 2; }

/* Minimal: scrollbar */
#screen.theme-minimal ::-webkit-scrollbar-thumb { border-radius: 999px; background: #e5e7eb; }
#screen.theme-minimal ::-webkit-scrollbar-thumb:hover { background: #d1d5db; }

/* Minimal: login form */
#screen.theme-minimal .login-title { font-weight: 600; letter-spacing: -0.02em; }
#screen.theme-minimal .login-input { border-radius: 8px; border: 1px solid #d1d5db; }
#screen.theme-minimal .login-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); }
#screen.theme-minimal .login-button { border-radius: 8px; font-weight: 500; }
#screen.theme-minimal .login-button:hover { background: #eff6ff; }

/* Minimal: multi-view */
#screen.theme-minimal .multi-region { border-radius: 12px; background: #ffffff; border: 1px solid #e5e7eb; }
#screen.theme-minimal .multi-region.focused { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08); }
#screen.theme-minimal .multi-agent::before { border-radius: 50%; transform: none; border: 1.5px solid #d1d5db; background: #ffffff; }

/* Minimal: scrubber — subtle dots */
#screen.theme-minimal .scrubber-bar { background: #ffffff; border-top: 1px solid #f0f0f0; }
#screen.theme-minimal .scrubber-btn { border-radius: 4px; font-size: 11px; }
#screen.theme-minimal .scrubber-label { color: #9ca3af; }

/* Minimal: empty state */
#screen.theme-minimal .empty-state { color: #d1d5db; font-weight: 400; letter-spacing: 0; font-size: 16px; }
#screen.theme-minimal .empty-message { color: #d1d5db; }

/* Minimal: integrity warning */
#screen.theme-minimal .integrity-warning .diamond {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1) !important;
}


/* =============================================================================
   GASTOWN THEME — Steampunk-industrial aesthetic
   Inspired by Gas Town / Wasteland. Dark espresso background with brass/bronze
   metal accents. Cinzel display type, Crimson Text body. Riveted metal plates,
   brass glow effects, industrial warmth.
   ============================================================================= */

#screen.theme-gastown {
    --vis-amber: #8b5e3c;           /* warm brown */
    --vis-amber-dim: #7a6652;       /* muted brown */
    --vis-amber-glow: rgba(205, 127, 50, 0.2);
    --vis-green: #2e7d32;           /* operational green */
    --vis-green-dim: #4caf50;
    --vis-red: #8b2500;             /* burnt red / rust */
    --vis-red-dim: #a0522d;         /* sienna */
    --vis-blue: #70798c;            /* steel */
    --vis-cyan: #b87333;            /* copper */
    --vis-magenta: #6a1b9a;         /* purple */
    --vis-yellow: #cd7f32;          /* brass accent */
    --vis-bg: #e8dcc8;             /* warm parchment (from gastown) */
    --vis-panel: #f5e6d3;          /* light cream surface */
    --vis-panel-border: #c4a882;    /* warm tan border */
    --vis-text: #2c1810;           /* dark espresso text */
    --vis-text-dim: #5d4037;        /* medium brown */
    --vis-font: 'Crimson Text', 'Georgia', serif;
    --vis-font-display: 'Cinzel', 'Georgia', serif;
    --glow-sm: none;
    --glow-md: none;
    --glow-lg: none;

    background: #e8dcc8;
    text-transform: uppercase;
}

/* Gastown: boot sequence */
body.boot-gastown .boot-overlay {
    display: flex;
    background: #e8dcc8;
    animation: bootFade 0.5s ease-out 1.5s forwards;
}

body.boot-gastown .boot-overlay .boot-text {
    font-family: 'Cinzel', 'Georgia', serif;
    color: #cd7f32;
    text-transform: uppercase;
    letter-spacing: 4px;
    opacity: 0;
    animation: gastownBootIn 0.4s ease-out forwards;
}

body.boot-gastown .boot-text:nth-child(1) {
    font-size: 14px;
    color: #8b7355;
    animation-delay: 0.1s;
}

body.boot-gastown .boot-text:nth-child(2) {
    font-size: 22px;
    color: #3e2723;
    letter-spacing: 6px;
    animation-delay: 0.4s;
}

body.boot-gastown .boot-text:nth-child(3) {
    font-size: 10px;
    color: #2e7d32;
    animation-delay: 0.8s;
}

@keyframes gastownBootIn {
    0% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Gastown: dark brown header bar with brass accent line and rivets */
#screen.theme-gastown header {
    background: #3e2723;
    border-bottom: 3px solid #cd7f32;
    color: #f5e6d3;
    position: relative;
}

/* Brass rivets on header divider */
#screen.theme-gastown header::before,
#screen.theme-gastown header::after {
    content: '';
    position: absolute;
    bottom: -6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #d4a574 0%, #cd7f32 50%, #8b4513 100%);
    z-index: 11;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#screen.theme-gastown header::before { left: 24px; }
#screen.theme-gastown header::after { right: 24px; }

#screen.theme-gastown .system-label {
    font-family: 'Cinzel', serif;
    letter-spacing: 4px;
    color: #cd7f32;
}

/* Em-dash flanking decoration (like Gas Town Hall logo) */
#screen.theme-gastown .system-label::before { content: '\2014\00a0'; color: #cd7f32; }
#screen.theme-gastown .system-label::after { content: '\00a0\2014'; color: #cd7f32; }

#screen.theme-gastown .topic-label {
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
    color: #f5e6d3;
}

/* Gastown: status badges (on dark header) */
#screen.theme-gastown .status-indicator {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 2px;
}

#screen.theme-gastown .status-indicator.online {
    color: #4caf50;
    border-color: #4caf50;
}

#screen.theme-gastown .status-indicator.offline {
    color: #cd7f32;
    border-color: #cd7f32;
}

#screen.theme-gastown .status-indicator.analyzing {
    color: #cd7f32;
    border-color: #cd7f32;
}

/* Gastown: warm parchment background */
#screen.theme-gastown main {
    background: #e8dcc8;
}

/* Gastown: solid bordered diamond nodes on light background */
#screen.theme-gastown .diamond {
    border: 2px solid #8b5e3c;
    background: linear-gradient(135deg, #f5e6d3 0%, #e8dcc8 50%, #ddd0b8 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

#screen.theme-gastown .diamond::after {
    border: 1px solid rgba(139, 94, 60, 0.15);
}

#screen.theme-gastown .agent-name {
    letter-spacing: 2px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
}

/* Gastown: vote colors (on light background) */
#screen.theme-gastown .vote-approve { color: #2e7d32; }
#screen.theme-gastown .vote-deny { color: #8b2500; }
#screen.theme-gastown .vote-pass { color: #5d4037; }

/* Gastown: cluster colors (metals on light) */
#screen.theme-gastown .cluster-1 {
    border-color: #b87333 !important; /* copper */
}
#screen.theme-gastown .cluster-1 .diamond {
    background: linear-gradient(135deg, rgba(184, 115, 51, 0.1), rgba(245, 230, 211, 0.8)) !important;
}

#screen.theme-gastown .cluster-2 {
    border-color: #70798c !important; /* steel */
}

#screen.theme-gastown .cluster-3 {
    border-color: #8b4513 !important; /* bronze */
}

/* Gastown: dark brown footer bar */
#screen.theme-gastown footer {
    background: #3e2723;
    border-top: 3px solid #cd7f32;
    color: #f5e6d3;
}

#screen.theme-gastown .footer-panel {
    border-right-color: #5d4037;
}

/* Gastown: panel headers */
#screen.theme-gastown .panel-header {
    font-family: 'Cinzel', serif;
    letter-spacing: 3px;
    color: #cd7f32;
    background: transparent;
    border-bottom-color: #5d4037;
}

/* Gastown: footer text on dark background */
#screen.theme-gastown .crux-claim { color: #f5e6d3; }
#screen.theme-gastown .crux-meta { color: #d4a574; }
#screen.theme-gastown .metric-value { color: #cd7f32; font-family: 'Cinzel', serif; }
#screen.theme-gastown .metric-label { color: #d4a574; }
#screen.theme-gastown .audit-entry { color: #d4a574; border-bottom-color: #5d4037; }
#screen.theme-gastown .audit-entry .timestamp { color: #8b7355; }
#screen.theme-gastown .audit-entry .method { color: #cd7f32; }
#screen.theme-gastown .audit-entry .agent { color: #f5e6d3; }

/* Gastown: analysis bar — dark plate */
#screen.theme-gastown .analysis-bar {
    background: #3e2723;
    border-top-color: #5d4037;
    border-bottom: 3px solid #cd7f32;
    color: #f5e6d3;
}

#screen.theme-gastown .analysis-label {
    color: #cd7f32;
}

#screen.theme-gastown .pipeline-stage {
    border-color: #5d4037;
    color: #8b7355;
}

#screen.theme-gastown .pipeline-stage.active {
    border-color: #cd7f32;
    color: #cd7f32;
}

#screen.theme-gastown .pipeline-stage.done {
    border-color: #2e7d32;
    color: #4caf50;
}

/* Gastown: center panel — cream card with brown border */
#screen.theme-gastown .center-panel {
    background: #f5e6d3;
    border: 2px solid #8b5e3c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Gastown: tooltip — cream card */
#screen.theme-gastown .agent-tooltip {
    background: #f5e6d3;
    border: 1px solid #c4a882;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

#screen.theme-gastown .tooltip-header {
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #8b5e3c;
    border-bottom-color: #c4a882;
}

#screen.theme-gastown .tooltip-body { color: #2c1810; }
#screen.theme-gastown .tooltip-footer { color: #5d4037; text-transform: uppercase; }

/* Gastown: connections — industrial pipes (thick stroke, round caps) */
#screen.theme-gastown .connection-line {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6;
    opacity: 0.5;
}

#screen.theme-gastown .connection-agree { stroke: #5d4037; }
#screen.theme-gastown .connection-disagree { stroke: #5d4037; stroke-dasharray: 12 6; }
#screen.theme-gastown .connection-neutral { stroke: #8b7355; stroke-width: 3; stroke-dasharray: 4 4; opacity: 0.3; }
#screen.theme-gastown .connection-bridging { stroke: #cd7f32; stroke-width: 8; }

/* Pipe inner highlight — lighter stripe down the center */
#screen.theme-gastown .pipe-inner {
    stroke: #c4a882;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
    opacity: 0.4;
}

/* Pipe joints — small circles at connection endpoints */
#screen.theme-gastown .pipe-joint {
    fill: #5d4037;
    stroke: #8b7355;
    stroke-width: 1.5;
    opacity: 0.5;
}

/* Gastown: nav bar (dark brown, like header) */
#screen.theme-gastown #delib-nav {
    background: #4a3728;
    border-bottom-color: #5d4037;
}

#screen.theme-gastown .nav-label { color: #d4a574; }

#screen.theme-gastown .delib-tab {
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    color: #d4a574;
    border-color: #5d4037;
}

#screen.theme-gastown .delib-tab:hover {
    color: #cd7f32;
    border-color: #cd7f32;
}

#screen.theme-gastown .delib-tab.active {
    color: #f5e6d3;
    background: rgba(205, 127, 50, 0.1);
    border-color: #cd7f32;
}

/* Gastown: cycle bar */
#screen.theme-gastown .cycle-progress {
    background: #cd7f32;
}

/* Gastown: login form */
#screen.theme-gastown .login-title {
    font-family: 'Cinzel', serif;
    letter-spacing: 6px;
}

#screen.theme-gastown .login-input {
    border-color: #c4a882;
}

#screen.theme-gastown .login-input:focus {
    border-color: #8b5e3c;
    box-shadow: 0 0 0 2px rgba(139, 94, 60, 0.15);
}

#screen.theme-gastown .login-button {
    font-family: 'Cinzel', serif;
    letter-spacing: 3px;
}

#screen.theme-gastown .login-button:hover {
    background: rgba(139, 94, 60, 0.08);
}

/* Gastown: multi-view */
#screen.theme-gastown .multi-region {
    background: #f5e6d3;
    border-color: #c4a882;
}

#screen.theme-gastown .multi-region.focused {
    border-color: #cd7f32;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Gastown: scrubber (on dark analysis/footer area) */
#screen.theme-gastown .scrubber-bar {
    background: #3e2723;
    border-top-color: #5d4037;
}

#screen.theme-gastown .scrubber-btn { color: #cd7f32; border-color: #5d4037; }
#screen.theme-gastown .scrubber-btn:hover { border-color: #cd7f32; }
#screen.theme-gastown .scrubber-track { border-bottom-color: #5d4037; }
#screen.theme-gastown .scrubber-label { color: #8b7355; }
#screen.theme-gastown .scrubber-live { color: #4caf50; border-color: #4caf50; }

/* Gastown: empty state + empty messages in dark panels */
#screen.theme-gastown .empty-state {
    letter-spacing: 3px;
    font-family: 'Cinzel', serif;
}

#screen.theme-gastown .empty-message {
    color: #8b7355;
}

/* Gastown: scrollbar */
#screen.theme-gastown ::-webkit-scrollbar-track { background: #3e2723; }
#screen.theme-gastown ::-webkit-scrollbar-thumb { background: #5d4037; }
#screen.theme-gastown ::-webkit-scrollbar-thumb:hover { background: #cd7f32; }

/* Gastown: reduced motion */
@media (prefers-reduced-motion: reduce) {
    #screen.theme-gastown .status-indicator.analyzing { animation: none; }
    body.boot-gastown .boot-overlay { display: none; }
}