/* =============================================================================
   STNH Wiki - Styles
   Design matches stnh-blog.org: dark theme, gold accents, Star Trek fonts
   ============================================================================= */

/* Fonts */
@font-face {
    font-family: 'federation-ds9-title';
    src: url('fonts/federation-ds9-title.TTF') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tungsten-Light';
    src: url('fonts/Tungsten-Light.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Utility */
.hidden { display: none !important; }

html {
    font-size: var(--base-font-size, 118%);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg-deep);
    color: var(--text-primary);
    letter-spacing: 0.3px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    font-size: 0.85rem;
}

/* =============================================================================
   Theme Definitions
   ============================================================================= */

/* ── LCARS (Federation) ── Gold on dark navy */
[data-theme="lcars"] {
    --bg-deep: #07070c;
    --bg-primary: #0c0c14;
    --bg-card: rgba(16, 18, 30, 0.85);
    --bg-card-hover: rgba(24, 26, 42, 0.95);
    --text-primary: #d8dce6;
    --text-muted: #8a90a4;
    --text-bright: #f0f2f8;
    --accent: #c9a227;
    --accent-bright: #e8c840;
    --accent-dim: rgba(201, 162, 39, 0.5);
    --accent-glow: rgba(201, 162, 39, 0.15);
    --accent-border: rgba(201, 162, 39, 0.25);
    --accent-border-hover: rgba(201, 162, 39, 0.5);
    --select-bg: #141420;
    --select-bg-hover: #1a1a2a;
    --select-checked: #2a2840;
    --card-border: rgba(255, 255, 255, 0.06);
    --card-border-hover: rgba(255, 255, 255, 0.12);
    --bar-secondary: #cc8800;
    --bar-tertiary: #5588cc;
    --mod-events: #cc8800;
    --mod-tech: #5588cc;
    --mod-ships: #44aa99;
    --mod-buildings: #cc7755;
    --mod-traits: #9b88cc;
    --mod-governments: #cc6688;
    --mod-mega: #cc7733;
    --mod-anomalies: #6699cc;
    --mod-empires: #aa7799;
    --mod-economy: #66aa55;
}

/* ── Romulan ── Emerald green, secretive */
[data-theme="romulan"] {
    --bg-deep: #060c08;
    --bg-primary: #0a120c;
    --bg-card: rgba(12, 24, 16, 0.88);
    --bg-card-hover: rgba(20, 36, 24, 0.95);
    --text-primary: #c8d8cc;
    --text-muted: #7a9a84;
    --text-bright: #e4f0e8;
    --accent: #2ea55a;
    --accent-bright: #3cc76e;
    --accent-dim: rgba(46, 165, 90, 0.45);
    --accent-glow: rgba(46, 165, 90, 0.12);
    --accent-border: rgba(46, 165, 90, 0.3);
    --accent-border-hover: rgba(46, 165, 90, 0.55);
    --select-bg: #0e1810;
    --select-bg-hover: #142018;
    --select-checked: #1a3020;
    --card-border: rgba(46, 165, 90, 0.08);
    --card-border-hover: rgba(46, 165, 90, 0.2);
    --bar-secondary: #1e8a4a;
    --bar-tertiary: #88bbaa;
    --mod-events: #3cc76e;
    --mod-tech: #22aa88;
    --mod-ships: #55cc99;
    --mod-buildings: #88aa66;
    --mod-traits: #66ccaa;
    --mod-governments: #44bb77;
    --mod-mega: #77bb55;
    --mod-anomalies: #55bbbb;
    --mod-empires: #99aa77;
    --mod-economy: #44cc66;
}

/* ── Borg ── Neon green, cold, cybernetic */
[data-theme="borg"] {
    --bg-deep: #050705;
    --bg-primary: #0a0e0a;
    --bg-card: rgba(10, 16, 10, 0.9);
    --bg-card-hover: rgba(16, 24, 16, 0.95);
    --text-primary: #a0b8a0;
    --text-muted: #607860;
    --text-bright: #c8e8c8;
    --accent: #00cc44;
    --accent-bright: #00ff55;
    --accent-dim: rgba(0, 204, 68, 0.4);
    --accent-glow: rgba(0, 255, 85, 0.1);
    --accent-border: rgba(0, 204, 68, 0.3);
    --accent-border-hover: rgba(0, 255, 85, 0.5);
    --select-bg: #0a100a;
    --select-bg-hover: #101a10;
    --select-checked: #152415;
    --card-border: rgba(0, 204, 68, 0.1);
    --card-border-hover: rgba(0, 255, 85, 0.2);
    --bar-secondary: #009933;
    --bar-tertiary: #336633;
    --mod-events: #00dd55;
    --mod-tech: #00cc44;
    --mod-ships: #00bb66;
    --mod-buildings: #33aa44;
    --mod-traits: #00cc88;
    --mod-governments: #22bb33;
    --mod-mega: #44aa33;
    --mod-anomalies: #00ccaa;
    --mod-empires: #33bb55;
    --mod-economy: #00dd33;
}

/* ── Cardassian ── Ochre, warm sandstone */
[data-theme="cardassian"] {
    --bg-deep: #0c0906;
    --bg-primary: #141008;
    --bg-card: rgba(24, 20, 12, 0.88);
    --bg-card-hover: rgba(36, 28, 18, 0.95);
    --text-primary: #d8ccb8;
    --text-muted: #998870;
    --text-bright: #f0e4d0;
    --accent: #c4956a;
    --accent-bright: #daa878;
    --accent-dim: rgba(196, 149, 106, 0.45);
    --accent-glow: rgba(196, 149, 106, 0.12);
    --accent-border: rgba(196, 149, 106, 0.3);
    --accent-border-hover: rgba(196, 149, 106, 0.55);
    --select-bg: #181208;
    --select-bg-hover: #201a10;
    --select-checked: #302418;
    --card-border: rgba(196, 149, 106, 0.1);
    --card-border-hover: rgba(196, 149, 106, 0.22);
    --bar-secondary: #a07848;
    --bar-tertiary: #786040;
    --mod-events: #daa878;
    --mod-tech: #cc9966;
    --mod-ships: #b8a070;
    --mod-buildings: #ccaa55;
    --mod-traits: #bb8866;
    --mod-governments: #cc7744;
    --mod-mega: #aa9955;
    --mod-anomalies: #bbaa77;
    --mod-empires: #cc8855;
    --mod-economy: #aabb66;
}

/* ── Klingon ── Deep crimson, aggressive */
[data-theme="klingon"] {
    --bg-deep: #0a0506;
    --bg-primary: #120a0b;
    --bg-card: rgba(22, 12, 14, 0.9);
    --bg-card-hover: rgba(34, 18, 20, 0.95);
    --text-primary: #dcc8c8;
    --text-muted: #997878;
    --text-bright: #f0dada;
    --accent: #cc2233;
    --accent-bright: #ee3344;
    --accent-dim: rgba(204, 34, 51, 0.45);
    --accent-glow: rgba(238, 51, 68, 0.12);
    --accent-border: rgba(204, 34, 51, 0.3);
    --accent-border-hover: rgba(238, 51, 68, 0.55);
    --select-bg: #160a0c;
    --select-bg-hover: #201014;
    --select-checked: #301820;
    --card-border: rgba(204, 34, 51, 0.1);
    --card-border-hover: rgba(238, 51, 68, 0.22);
    --bar-secondary: #991122;
    --bar-tertiary: #664444;
    --mod-events: #ee3344;
    --mod-tech: #cc5544;
    --mod-ships: #dd4444;
    --mod-buildings: #bb6644;
    --mod-traits: #cc4466;
    --mod-governments: #dd2244;
    --mod-mega: #cc5533;
    --mod-anomalies: #bb5566;
    --mod-empires: #cc3355;
    --mod-economy: #cc6633;
}

/* ── Ferengi ── Latinum gold, opulent */
[data-theme="ferengi"] {
    --bg-deep: #0a0804;
    --bg-primary: #110e06;
    --bg-card: rgba(20, 18, 8, 0.9);
    --bg-card-hover: rgba(32, 28, 14, 0.95);
    --text-primary: #ddd4b8;
    --text-muted: #998c60;
    --text-bright: #f5eed0;
    --accent: #d4a017;
    --accent-bright: #f0ba20;
    --accent-dim: rgba(212, 160, 23, 0.5);
    --accent-glow: rgba(240, 186, 32, 0.15);
    --accent-border: rgba(212, 160, 23, 0.3);
    --accent-border-hover: rgba(240, 186, 32, 0.55);
    --select-bg: #141006;
    --select-bg-hover: #1c1810;
    --select-checked: #2c2418;
    --card-border: rgba(212, 160, 23, 0.1);
    --card-border-hover: rgba(240, 186, 32, 0.22);
    --bar-secondary: #b88a10;
    --bar-tertiary: #887020;
    --mod-events: #f0ba20;
    --mod-tech: #ccaa22;
    --mod-ships: #ddbb44;
    --mod-buildings: #cc9933;
    --mod-traits: #ddaa55;
    --mod-governments: #ccbb33;
    --mod-mega: #bbaa22;
    --mod-anomalies: #ddcc44;
    --mod-empires: #cc9944;
    --mod-economy: #bbcc33;
}

/* ── Light ── Clean, bright, PADD-inspired */
[data-theme="light"] {
    --bg-deep: #eaeef4;
    --bg-primary: #f4f6fa;
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-card-hover: rgba(255, 255, 255, 1);
    --text-primary: #2c3040;
    --text-muted: #6a7088;
    --text-bright: #181c28;
    --accent: #2266aa;
    --accent-bright: #2878cc;
    --accent-dim: rgba(34, 102, 170, 0.35);
    --accent-glow: rgba(34, 102, 170, 0.1);
    --accent-border: rgba(34, 102, 170, 0.3);
    --accent-border-hover: rgba(34, 102, 170, 0.5);
    --select-bg: #ffffff;
    --select-bg-hover: #f0f4fa;
    --select-checked: #e0e8f4;
    --card-border: rgba(0, 0, 0, 0.1);
    --card-border-hover: rgba(34, 102, 170, 0.3);
    --bar-secondary: #4488cc;
    --bar-tertiary: #88aacc;
    --mod-events: #cc8800;
    --mod-tech: #2266aa;
    --mod-ships: #228877;
    --mod-buildings: #aa6633;
    --mod-traits: #7755aa;
    --mod-governments: #aa3366;
    --mod-mega: #cc6622;
    --mod-anomalies: #3388aa;
    --mod-empires: #886688;
    --mod-economy: #448833;
}

/* Theme-independent variables */
:root {
    --max-width: 1240px;
    --type-country: #4a9eff;
    --type-ship: #4aff7a;
    --type-planet: #c97a3a;
    --type-fleet: #ff9a4a;
    --type-situation: #a64aff;
    --type-observer: #ff4a8a;
    --type-pop: #4affc8;
}

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

h1, h2, h3, h4 {
    font-family: 'federation-ds9-title', 'Tungsten-Light', Helvetica, sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
}

/* Header */
#masthead {
    background: var(--bg-primary);
    border-bottom: 2px solid var(--accent);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-title h1 {
    font-size: 1.4rem;
    white-space: nowrap;
}

.site-logo-link {
    text-decoration: none;
    color: inherit;
}

.site-logo-link:hover h1 {
    opacity: 0.8;
}

.site-title .accent {
    color: var(--accent);
}

.header-search {
    flex: 1;
    max-width: 500px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.header-search input {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.7rem;
    background: var(--select-bg);
    border: 1px solid var(--accent-border);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.8rem;
    letter-spacing: 1px;
    outline: none;
}

.header-search input:focus {
    border-color: var(--accent);
    background: var(--select-bg-hover);
}

.header-search input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.search-mode-toggle-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
}

.search-mode-toggle-wrap .toggle-label {
    font-size: 0.7rem;
    font-family: inherit;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color 0.2s;
}

.search-mode-toggle-wrap.active .toggle-label {
    color: var(--accent);
}

/* The pill track */
.toggle-track {
    position: relative;
    width: 30px;
    height: 16px;
    background: var(--select-bg);
    border: 1px solid var(--accent-border);
    border-radius: 9999px;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.search-mode-toggle-wrap.active .toggle-track {
    background: var(--accent);
    border-color: var(--accent);
}

/* The thumb */
.toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.2s, background 0.2s;
}

.search-mode-toggle-wrap.active .toggle-track::after {
    transform: translateX(14px);
    background: var(--bg-main, #0d0d1a);
}

.search-mode-toggle-wrap:hover .toggle-track {
    border-color: var(--accent-border-hover);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

/* Global Select Styling */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--select-bg);
    color: var(--text-primary);
    border: 1px solid var(--accent-border);
    border-radius: 4px;
    padding: 0.35rem 2rem 0.35rem 0.6rem;
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a90a4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 10px 6px;
}

select:hover {
    border-color: var(--accent-border-hover);
    background-color: var(--select-bg-hover);
}

select:focus {
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 2px var(--accent-glow);
    background-color: var(--select-bg-hover);
}

select option {
    background: var(--select-bg);
    color: var(--text-primary);
    padding: 0.4rem 0.6rem;
}

select option:checked {
    background: var(--select-checked);
    color: var(--text-bright);
}

/* Filter Bar */
#filter-bar {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--card-border);
    padding: 0.4rem 0;
    position: sticky;
    top: var(--filter-bar-top, 84px);
    z-index: 97;
}

/* Divider between functional groups in the filter bar */
.filter-group + .filter-group.view-mode-group,
.filter-group.view-mode-group + .filter-group {
    border-left: 1px solid var(--accent-border);
    padding-left: 0.6rem;
    margin-left: 0.1rem;
}

/* View mode segmented toggle (List / Map) — distinct from nav tabs and filter chips */
.view-mode-group {
    gap: 0;
    background: var(--bg-secondary, var(--bg-card));
    border: 1px solid var(--accent-border);
    border-radius: 5px;
    padding: 2px;
}

.view-mode-btn {
    padding: 0.18rem 0.6rem;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.view-mode-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.07);
}

.view-mode-btn.active {
    background: var(--accent-border);
    color: var(--accent-bright);
}

.filter-inner {
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.filter-group label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.filter-group select {
    max-width: 180px;
}

.filter-toggles {
    display: flex;
    gap: 0.75rem;
    font-size: 0.7rem;
}

.filter-toggles label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.2s;
    user-select: none;
}

.filter-toggles label:has(input:checked) {
    color: var(--accent);
}

.filter-toggles input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 16px;
    background: var(--select-bg);
    border: 1px solid var(--accent-border);
    border-radius: 9999px;
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
}

.filter-toggles input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.2s, background 0.2s;
}

.filter-toggles input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.filter-toggles input[type="checkbox"]:checked::before {
    transform: translateX(14px);
    background: var(--bg-main, #0d0d1a);
}

.filter-toggles label:hover input[type="checkbox"] {
    border-color: var(--accent-border-hover);
}

.filter-toggle-btn {
    display: none;
}

.tier-filter-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 160px;
}
.tier-filter-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: var(--text-muted);
}
.tier-filter-label strong {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.tier-range-wrap.inline {
    position: relative;
    height: 20px;
    flex: 1;
    min-width: 100px;
}
.tier-range-wrap.inline .tier-range-track {
    position: absolute;
    left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 3px;
    background: var(--accent-border);
    border-radius: 2px;
    pointer-events: none;
}
.tier-range-wrap.inline .tier-range-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0.7;
}
.tier-range-wrap.inline input[type="range"] {
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0; top: 50%;
    transform: translateY(-50%);
    background: transparent;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    margin: 0;
}
.tier-range-wrap.inline input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 0 0 1px var(--accent);
}
.tier-range-wrap.inline input[type="range"]::-moz-range-thumb {
    pointer-events: all;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 0 0 1px var(--accent);
}
.tier-range-wrap.inline input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.tier-range-wrap.inline input[type="range"]::-moz-range-track { background: transparent; }

.filter-stats {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--accent);
    display: flex;
    gap: 0.6rem;
    align-items: center;
    white-space: nowrap;
}
.filter-stats span + span::before {
    content: '·';
    margin-right: 0.6rem;
    opacity: 0.5;
}

/* Main Layout */
#main-content {
    padding: 1rem;
    display: flex;
    gap: 1rem;
    flex: 1;
    width: 100%;
}

/* Namespace Sidebar */
#namespace-sidebar {
    width: 220px;
    flex-shrink: 0;
    /* Sidebar lives inside #main-content which has padding: 1rem, so its
       available height is viewport minus the sticky headers (--detail-top)
       minus top+bottom padding (2rem). Footer is fixed and doesn't count. */
    height: calc(100vh - var(--detail-top, 160px) - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
    position: sticky;
    top: calc(var(--detail-top, 160px) + 1rem);
}

/* Chain mode: header (#namespace-sidebar > .sidebar-header) + the back
   button stay fixed at the top; only the tree scrolls internally. The
   curve animation stays inside .chain-nav-tree and never pushes the
   header around. */
#namespace-sidebar:has(.chain-nav) {
    display: flex;
    flex-direction: column;
    /* Use longhands — the base rule uses overflow-y: auto which would
       otherwise win over the shorthand cascade order and let the custom
       horizontal scrollbar drift below the visible area. */
    overflow-x: hidden;
    overflow-y: hidden;
}
#namespace-sidebar:has(.chain-nav) > .sidebar-header {
    flex-shrink: 0;
}
#namespace-sidebar:has(.chain-nav) > #namespace-tree {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;                /* sidebar-level y-scroll disabled while
                                        the tree scrolls internally */
    display: flex;
    flex-direction: column;
}
#namespace-sidebar:has(.chain-nav) .chain-nav {
    min-width: 0;
    overflow: hidden;
    /* Take the parent's full available height so the tree flex-grows within
       this wrapper and .chain-hscroll pins to its bottom edge. */
    flex: 1 1 auto;
    min-height: 0;
}

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

.sidebar-header h3 {
    font-size: 0.9rem;
    color: var(--accent);
}

#sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
}

.ns-faction-group {
    margin-bottom: 0.5rem;
}

.ns-faction-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    padding: 0.15rem 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ns-faction-label .count {
    font-size: 0.6rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.ns-list {
    padding-left: 0.5rem;
}

.ns-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem 0.3rem;
    font-size: 0.65rem;
    cursor: pointer;
    border-radius: 3px;
    color: var(--text-muted);
}

.ns-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}

.ns-item.active {
    background: var(--accent-glow);
    color: var(--accent);
}

.ns-item .badge {
    font-size: 0.55rem;
    background: var(--card-border);
    padding: 0.05rem 0.25rem;
    border-radius: 8px;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

/* Event List */
#event-list-panel {
    flex: 1;
    min-width: 0;
    max-height: calc(100vh - var(--detail-top, 160px) - 2rem - var(--footer-height, 38px));
    overflow-y: auto;
}

#main-content:has(#event-detail-panel:not(.hidden)) #event-list-panel {
    flex: 1;
}

#main-content:has(#event-detail-panel:not(.hidden)) #event-detail-panel {
    flex: 2;
}

#event-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Event Card */
.event-card {
    background: var(--bg-card);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    display: flex;
    gap: 0.75rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color 0.2s, background 0.2s;
}

.event-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-border);
}

.event-card.active {
    border-color: var(--accent);
}

.event-card-thumb {
    width: 100px;
    height: 43px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
}

.event-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-card-body {
    flex: 1;
    min-width: 0;
}

.event-card-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.event-card-name {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-card-id {
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.event-type-badge {
    display: inline-block;
    padding: 0 0.3rem;
    border-radius: 3px;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    white-space: nowrap;
}

.type-country_event { background: rgba(74, 158, 255, 0.2); color: var(--type-country); }
.type-ship_event { background: rgba(74, 255, 122, 0.2); color: var(--type-ship); }
.type-planet_event { background: rgba(201, 122, 58, 0.2); color: var(--type-planet); }
.type-fleet_event { background: rgba(255, 154, 74, 0.2); color: var(--type-fleet); }
.type-situation_event { background: rgba(166, 74, 255, 0.2); color: var(--type-situation); }
.type-observer_event { background: rgba(255, 74, 138, 0.2); color: var(--type-observer); }
.type-pop_event { background: rgba(74, 255, 200, 0.2); color: var(--type-pop); }

.event-card-snippet {
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pagination */
#pagination {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}

.page-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: 50%;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.7rem;
    transition: all 0.2s;
}

.page-btn:hover { background: var(--accent-border); }
.page-btn.active { background: var(--accent-bright); color: #000; border-color: var(--accent-bright); }
.page-btn:disabled,
.page-btn.disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* Sticky pagination: always pinned to the bottom of the scrollable list.
   On page 1 it slides out when scrolled to top (via .hide-at-top); from
   page 2 onwards it stays permanently visible regardless of scroll. */
#item-list-panel #pagination.pagination-sticky {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--bg-body) 65%, rgba(0,0,0,0));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
}
/* Page 1 only: while the list is at the top, tuck the sticky bar below
   the viewport so it can slide in as soon as the user starts to scroll. */
#item-list-panel.scroll-at-top #pagination.pagination-sticky.hide-at-top {
    transform: translateY(110%);
    pointer-events: none;
}

/* Event Detail Panel */
#event-detail-panel {
    flex: 2;
    min-width: 0;
    max-height: calc(100vh - 160px - var(--footer-height, 38px));
    overflow-y: auto;
    position: sticky;
    top: 80px;
    background: var(--bg-card);
    border-radius: 6px;
    padding: 1rem;
}

#event-detail-panel.hidden { display: none; }

.detail-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--card-border);
}

.detail-header h2 {
    font-size: 1rem;
    flex: 1;
    color: var(--accent);
}

#detail-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem;
}
#detail-close:hover { color: var(--text-primary); }

.detail-picture {
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.detail-picture img {
    max-width: 480px;
    height: auto;
    border-radius: 4px;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
}

.detail-meta-item {
    font-size: 0.6rem;
    padding: 0.1rem 0.4rem;
    background: var(--card-border);
    border-radius: 3px;
    color: var(--text-muted);
}

/* Resources tab: signed value chips next to a producer/consumer link.
   Theme-neutral colours — accents vary across themes, but +produce / -upkeep
   should always read as green/red regardless of palette. */
.resource-producer-value {
    color: #4ade80;
    font-weight: 600;
}
.resource-consumer-value {
    color: #f87171;
    font-weight: 600;
}

.detail-bio {
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.detail-section {
    margin-bottom: 0.75rem;
}

.detail-section-title {
    font-size: 0.7rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.3rem;
}

.detail-desc {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.detail-desc .conditional {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-style: italic;
    display: block;
    margin-top: 0.2rem;
}

/* Option Cards */
.option-card {
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    padding: 0.5rem;
    margin-bottom: 0.4rem;
    border-left: 3px solid var(--accent);
}

.option-name {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.option-allow, .option-trigger {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.option-effects {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.option-triggered-events {
    margin-top: 0.2rem;
}

.event-link {
    color: var(--accent);
    cursor: pointer;
    font-size: 0.6rem;
}
.event-link:hover {
    color: var(--accent-bright);
    text-decoration: underline;
}

/* Trigger/Effect blocks */
.code-block {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.55rem;
    background: rgba(0,0,0,0.4);
    padding: 0.3rem 0.5rem;
    border-radius: 3px;
    overflow-x: auto;
    line-height: 1.4;
    color: var(--text-muted);
}

/* =============================================================================
   Dual-View: Code / Human-Readable toggle
   ============================================================================= */

.dual-view .block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.dual-view .block-header h4 {
    font-size: 0.7rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

/* Default: show human-readable view */
.dual-view .human-view { display: block; }
.dual-view .code-view  { display: none; }

/* When toggled: show code view */
.dual-view.show-code .human-view { display: none; }
.dual-view.show-code .code-view  { display: block; }

/* Toggle button */
.view-toggle {
    background: transparent;
    border: 1px solid var(--card-border-hover);
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    line-height: 1;
    display: inline-flex;
    gap: 6px;
    transition: border-color 0.2s;
}
.view-toggle:hover {
    border-color: var(--accent-border-hover);
}

.dual-view:not(.show-code) .toggle-human { color: var(--accent-bright); }
.dual-view:not(.show-code) .toggle-code { opacity: 0.4; }
.dual-view.show-code .toggle-code { color: var(--accent-bright); }
.dual-view.show-code .toggle-human { opacity: 0.4; }

/* Global toggle */
.global-view-toggle {
    background: transparent;
    border: 1px solid var(--card-border-hover);
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.65rem;
    line-height: 1.2;
    transition: border-color 0.2s, color 0.2s;
}
.global-view-toggle:hover {
    border-color: var(--accent-border-hover);
    color: var(--text-primary);
}
.global-view-toggle.active {
    border-color: var(--accent-bright);
    color: var(--accent-bright);
}

/* Human-readable styling */
.human-view {
    font-size: 0.65rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: rgba(0,0,0,0.25);
    padding: 0.4rem 0.6rem;
    border-radius: 3px;
}
.human-view .condition {
    padding-left: 0.8em;
    border-left: 2px solid var(--card-border);
    margin: 0.15em 0;
}
.human-view .negation {
    color: #e06060;
    font-weight: 600;
}
.human-view .unknown {
    font-family: 'Consolas', 'Monaco', monospace;
    opacity: 0.65;
    font-size: 0.9em;
}
.human-view .h-line {
    padding: 0.05em 0;
}
.human-view em {
    color: var(--accent);
    font-style: normal;
    font-weight: 600;
}
.human-view .event-link {
    font-size: inherit;
}

/* Modifier values: positive (green) and negative (red) */
.human-view .mod-positive { color: #4caf50; font-weight: 600; }
.human-view .mod-negative { color: #e06060; font-weight: 600; }

/* Section/block labels */
.human-view .h-label {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95em;
}

/* Behind-the-scenes (hidden_effect, @variables, log) */
.human-view .h-behind-scenes {
    color: var(--text-muted);
    font-style: italic;
}

/* Inline condition connectors (or / and) */
.human-view .cond-join {
    color: var(--accent);
    font-weight: 600;
    margin: 0 0.25em;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* AI weight summary */
.human-view .ai-never  { color: #e06060; font-weight: 600; }
.human-view .ai-boost  { color: #4caf50; font-weight: 600; }
.human-view .ai-reduce { color: #f0a030; font-weight: 600; }
.human-view .ai-base   { color: var(--text-muted); font-size: 0.9em; }

/* Stronger names (traits, techs, civics etc) */
.human-view strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Related Events */
.related-events {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.related-event-tag {
    font-size: 0.6rem;
    padding: 0.1rem 0.35rem;
    background: var(--accent-glow);
    border-radius: 3px;
    cursor: pointer;
    color: var(--accent);
}
.related-event-tag:hover { background: var(--accent-border); }

/* Tech prerequisite link tags */
.tech-link {
    display: inline-block;
    font-size: 0.6rem;
    padding: 0.1rem 0.35rem;
    background: var(--accent-glow);
    border-radius: 3px;
    cursor: pointer;
    color: var(--accent);
    margin: 0.1rem;
}
.tech-link:hover {
    background: var(--accent-border);
    text-decoration: underline;
}

/* Wiki cross-links (universal) */
.wiki-link {
    color: var(--accent);
    cursor: pointer;
    font-size: inherit;
}
.wiki-link:hover {
    text-decoration: underline;
    color: var(--accent-bright);
}

/* Chain Viewer Modal */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal.hidden { display: none; }

.modal-content {
    background: var(--bg-deep);
    border: 1px solid var(--accent);
    border-radius: 8px;
    width: 90%;
    max-width: 1000px;
    max-height: 85vh;
    overflow: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--card-border);
}

.modal-header h2 {
    font-size: 1rem;
    color: var(--accent);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
}

#chain-viewer {
    min-height: 400px;
    padding: 1rem;
}

/* Footer — floats in the centre of the viewport bottom so it doesn't add
   to document height (no page scrollbar) and doesn't cover the sidebars
   left/right. Only the centred attribution label is visible. */
#site-footer {
    text-align: center;
    padding: 0.4rem 1rem;
    font-size: 0.65rem;
    color: var(--text-muted);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    background: var(--bg-deep);
    border: 1px solid var(--card-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    z-index: 10;
    pointer-events: auto;
    max-width: 60vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Search section divider */
.search-section-divider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
}

.search-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--accent-border);
}

/* Search Highlight */
mark {
    background: var(--accent-border);
    color: var(--text-primary);
    border-radius: 2px;
    padding: 0 2px;
}

/* Loading */
.loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.loading::after {
    content: '';
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-left: 0.5rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes galaxy-tooltip-in {
    from { opacity: 0; transform: scale(0.1); }
    to   { opacity: 1; transform: scale(1); }
}
.galaxy-tooltip.visible {
    animation: galaxy-tooltip-in 0.18s cubic-bezier(0.2, 0, 0.2, 1) both;
}

/* Scrollbar — thin, muted, matches the chain-nav custom bar */
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
[data-theme="light"] html { scrollbar-color: rgba(0,0,0,0.15) transparent; }


/* =============================================================================
   Scroll Fade Indicators (mask-image approach — full-width, edge-attached)
   ============================================================================= */

.scroll-fade {
    --_fade-size: 48px;
    --_fade-top: 0%;
    --_fade-bottom: 100%;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black var(--_fade-top),
        black var(--_fade-bottom),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black var(--_fade-top),
        black var(--_fade-bottom),
        transparent 100%
    );
    transition: -webkit-mask-image 0.2s, mask-image 0.2s;
}

.scroll-fade.scroll-at-top {
    --_fade-top: 0%;
}
.scroll-fade:not(.scroll-at-top) {
    --_fade-top: var(--_fade-size);
}
.scroll-fade.scroll-at-bottom {
    --_fade-bottom: 100%;
}
.scroll-fade:not(.scroll-at-bottom) {
    --_fade-bottom: calc(100% - var(--_fade-size));
}

/* iframe embed mode */
body.in-iframe {
    height: 100vh;
    overflow: hidden;
}

body.in-iframe #main-content {
    min-height: 0;
    overflow: hidden;
}

body.in-iframe #event-list-panel {
    min-height: 0;
    overflow-y: auto;
}

body.in-iframe #namespace-sidebar {
    position: static;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

body.in-iframe #event-detail-panel {
    position: static;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

body.in-iframe #site-footer {
    display: none;
}

/* =============================================================================
   Wiki Navigation Bar
   ============================================================================= */

#wiki-nav {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--accent-border);
    position: sticky;
    top: var(--header-height, 46px);
    z-index: 99;
}

.nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    gap: 0.2rem;
    padding: 0.4rem 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-link {
    color: var(--text-muted);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: color 0.2s, background 0.2s;
}

.nav-link:hover {
    color: var(--accent-bright);
    background: rgba(255,255,255,0.05);
}

.nav-link.active {
    color: var(--accent-bright);
    border-bottom: 2px solid var(--accent-bright);
}

.nav-link.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.nav-sep {
    display: inline-block;
    width: 1px;
    height: 1rem;
    background: var(--accent-border);
    margin: 0 0.2rem;
    align-self: center;
    opacity: 0.5;
}

/* =============================================================================
   Hub Page
   ============================================================================= */

.hub-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.hub-welcome {
    text-align: center;
    margin-bottom: 2rem;
}

.hub-welcome h2 {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
}

.hub-subtitle {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Stats Dashboard */
.stats-dashboard {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    flex: 1;
    min-width: 180px;
}

.stat-card.wide {
    flex: 2;
    min-width: 300px;
}

.stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 0.3rem;
}

.stat-value {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.stat-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stat-item {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
}

/* Section Cards */
.section-cards {
    display: grid;
    /* 12 columns so the first three cards span 4 each (3 per row) and the
       remaining four span 3 each (4 per row). Breaks down to 1fr per card
       under the mobile media query below. */
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}
.section-cards .section-card:nth-child(-n+3) { grid-column: span 4; }
.section-cards .section-card:nth-child(n+4)  { grid-column: span 3; }

.section-card {
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 1rem;
    transition: border-color 0.2s, background 0.2s;
}

.section-card:not(.disabled):hover {
    border-color: var(--accent-border);
    background: var(--bg-card-hover);
    cursor: pointer;
}

.section-card.disabled {
    opacity: 0.45;
}

.section-card h3 {
    font-size: 1rem;
    color: var(--accent);
    margin-bottom: 0.4rem;
}

.section-card p {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Card Count Badge (top-right corner) */
.card-count {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-bright);
    font-family: 'federation-ds9-title', 'Tungsten-Light', Helvetica, sans-serif;
    letter-spacing: 1px;
}

.section-card {
    position: relative;
}

/* Card Breakdown Tags */
.card-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.card-breakdown-tag {
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
    text-decoration: none;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    cursor: pointer;
}

.card-breakdown-tag:hover {
    color: var(--accent-bright);
    border-color: var(--accent-bright);
    background: rgba(255,255,255,0.06);
}

.card-breakdown-tag b {
    color: var(--text-primary);
    font-weight: 500;
}

/* Hub Meta (Total Items + Last Update) */
.hub-meta {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.hub-meta-item b {
    color: var(--accent-bright);
}

.hub-meta-sep {
    margin: 0 0.5rem;
    opacity: 0.4;
}

/* Update Notes Section */
.update-notes {
    margin-top: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 1.25rem;
}

.update-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.update-header h3 {
    font-size: 0.95rem;
    color: var(--accent);
    margin: 0;
}

.update-summary-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.update-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    letter-spacing: 0.3px;
}

.update-badge.added {
    background: rgba(54, 214, 115, 0.15);
    color: #36d673;
}

.update-badge.modified {
    background: rgba(255, 180, 0, 0.15);
    color: #ffb400;
}

.update-badge.removed {
    background: rgba(255, 83, 112, 0.15);
    color: #ff5370;
}

.update-module {
    border-top: 1px solid var(--card-border);
    padding-top: 0.6rem;
    margin-top: 0.6rem;
}

.update-module-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.3rem 0;
    user-select: none;
}

.update-module-header:hover {
    color: var(--accent);
}

.update-module-toggle {
    font-size: 0.6rem;
    color: var(--text-muted);
    transition: transform 0.15s;
    width: 0.8rem;
}

.update-module-toggle.expanded {
    transform: rotate(90deg);
}

.update-module-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.update-module-delta {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.update-module-body {
    padding: 0.3rem 0 0.3rem 1.3rem;
}

.update-module-body.collapsed {
    display: none;
}

.change-item {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.15rem 0;
    font-size: 0.72rem;
    line-height: 1.4;
}

.change-icon {
    font-weight: 700;
    flex-shrink: 0;
    width: 0.8rem;
    text-align: center;
}

.change-added .change-icon { color: #36d673; }
.change-modified .change-icon { color: #ffb400; }
.change-removed .change-icon { color: #ff5370; }

.change-item a {
    color: var(--text-primary);
    text-decoration: none;
}

.change-item a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.change-removed .change-id {
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.7;
}

.change-item-id {
    font-size: 0.6rem;
    color: var(--text-muted);
    opacity: 0.6;
}

.change-fields {
    display: inline-flex;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.change-field-tag {
    font-size: 0.58rem;
    background: rgba(255, 180, 0, 0.1);
    color: #ffb400;
    padding: 0.05rem 0.3rem;
    border-radius: 2px;
}

.update-no-changes {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem 0;
}

.update-history-toggle {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.7rem;
    background: var(--card-border);
    border: 1px solid var(--card-border-hover);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.update-history-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.update-history-entry {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--card-border);
    opacity: 0.8;
}

.update-history-entry .update-header h3 {
    font-size: 0.85rem;
}

/* Theme Picker */
.theme-picker {
    display: flex;
    align-items: center;
    gap: 3px;
    border-right: 1px solid var(--card-border);
    padding-right: 0.6rem;
}

.theme-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    padding: 0;
}

.theme-dot:hover {
    transform: scale(1.25);
}

.theme-dot.active {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
}

/* Hamburger Menu */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    margin-left: 0.5rem;
}

.hamburger-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-muted);
    border-radius: 1px;
    transition: transform 0.25s, opacity 0.25s;
}

.hamburger-btn.active .hamburger-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.hamburger-btn.active .hamburger-bar:nth-child(2) {
    opacity: 0;
}
.hamburger-btn.active .hamburger-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 768px) {
    .hamburger-btn {
        display: flex;
    }
    #wiki-nav .nav-inner {
        display: none;
        flex-direction: column;
        gap: 0.1rem;
        padding: 0.5rem 1rem;
    }
    #wiki-nav .nav-inner.nav-open {
        display: flex;
    }
    #wiki-nav .nav-inner .nav-link {
        padding: 0.4rem 0.6rem;
        width: 100%;
    }
}

/* Responsive */
@media (max-width: 1200px) {
    #namespace-sidebar { width: 180px; }
}

@media (max-width: 921px) {
    /* Was previously 118% as a tablet-readability nudge — fine for tablets
       but too chunky on phones, where every pixel of header height steals
       from the list. Drop to neutral so the page feels right at hand-held
       widths without giving up tablet legibility. */
    html { font-size: 100%; }

    .header-inner { flex-wrap: wrap; }
    .header-search { order: 3; max-width: 100%; flex-basis: 100%; }

    #main-content { flex-direction: column; }
    #namespace-sidebar {
        width: 100%;
        max-height: none;
        position: static;
    }
    #namespace-sidebar.collapsed { display: none; }
    #event-list-panel {
        max-height: none;
        overflow-y: visible;
    }
    #event-detail-panel {
        width: 100%;
        max-height: none;
        position: static;
    }

    /* Footer on mobile: drop the floating-label styling (fixed position,
       narrow width, nowrap). Layout falls back to a regular block footer
       at document end so nothing gets clipped on small screens. */
    #site-footer {
        position: static;
        left: auto;
        right: auto;
        margin: 0;
        width: auto;
        max-width: 100%;
        white-space: normal;
        border-radius: 0;
        border: none;
        border-top: 1px solid var(--card-border);
    }

    /* Mobile collapsible filters */
    .filter-toggle-btn {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        background: none;
        border: 1px solid var(--accent-border);
        color: var(--text-muted);
        padding: 0.3rem 0.7rem;
        border-radius: 4px;
        font-size: 0.75rem;
        cursor: pointer;
    }
    .filter-toggle-btn .toggle-arrow {
        transition: transform 0.2s;
    }
    .filter-toggle-btn.open .toggle-arrow {
        transform: rotate(180deg);
    }

    /* Hide collapsible children by default on mobile */
    .filter-inner > .filter-collapsible {
        display: none;
    }
    /* Show when toggled open */
    .filter-inner.filters-open > .filter-collapsible {
        display: flex;
    }
}

@media (max-width: 544px) {
    .filter-inner { flex-direction: column; align-items: stretch; }
    .filter-group { justify-content: space-between; }
    .filter-group select { flex: 1; }
    .event-card-thumb { display: none; }
    .section-cards { grid-template-columns: 1fr; }
    .section-cards .section-card:nth-child(-n+3),
    .section-cards .section-card:nth-child(n+4) { grid-column: auto; }
}

/* Phone-sized viewports: tighten the header so the list panel gets more
   of the screen. The 921px breakpoint already covers tablet collapse;
   this tier targets the phone form factor specifically. */
@media (max-width: 600px) {
    html { font-size: 95%; }
    #masthead .header-inner {
        padding: 0.25rem 0.5rem;
        gap: 0.4rem;
    }
    .site-title h1 { font-size: 1rem; }
    #site-footer { font-size: 0.65rem; padding: 0.3rem 0.5rem; }
    /* Filter bar tighter padding too */
    #filter-bar { padding: 0.3rem 0; }
    .filter-inner { padding: 0 0.5rem; gap: 0.4rem; }
}

/* =============================================================================
   Global Search (Hub)
   ============================================================================= */

.global-search-results {
    position: relative;
    width: 100%;
    z-index: 98;
}

.global-search-results.hidden {
    display: none;
}

.search-results-inner {
    background: var(--bg-card);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    padding: 0.75rem;
    max-height: 60vh;
    overflow-y: auto;
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 0;
    z-index: 98;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.search-results-header {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--card-border);
}

.search-synonym-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.8;
}
.search-synonym-hint b {
    color: var(--accent);
}

.search-no-results {
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 1rem;
    color: var(--text-muted);
    text-align: center;
    font-size: 0.8rem;
}

.search-group {
    margin-bottom: 0.6rem;
}

.search-group-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    margin-bottom: 0.3rem;
    padding: 0.2rem 0;
}

.search-result-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 3px;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.search-result-item:hover {
    background: var(--accent-glow);
}

.search-result-name {
    font-size: 0.8rem;
    color: var(--text-primary);
    flex-shrink: 0;
}

.search-result-id {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-meta {
    font-size: 0.6rem;
    color: var(--accent);
    margin-left: auto;
    flex-shrink: 0;
}

.search-result-flag {
    font-size: 0.6rem;
    color: var(--accent);
    background: var(--accent-glow, rgba(120, 180, 255, 0.08));
    border: 1px solid var(--accent-border, rgba(120, 180, 255, 0.25));
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: auto;
    font-family: monospace;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
}

.meta-tag-flag {
    color: var(--accent);
    background: var(--accent-glow, rgba(120, 180, 255, 0.08));
    border-color: var(--accent-border, rgba(120, 180, 255, 0.25));
}

/* Enhanced stat cards */
.stat-card.highlight {
    border-color: var(--accent-border);
    background: var(--accent-glow);
}

.stat-card.highlight .stat-value {
    font-size: 1.2rem;
    color: var(--accent);
}

.stat-card.clickable {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.stat-card.clickable:hover {
    border-color: var(--accent-border);
    background: var(--bg-card-hover);
}

.stat-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
    margin-top: 0.35rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.stat-part {
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.stat-part b {
    color: var(--text-primary);
    font-weight: 500;
}

/* Full Search Results Page */
.full-results {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem;
}

.full-results-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.btn-back {
    background: var(--bg-card);
    border: 1px solid var(--card-border-hover);
    color: var(--text-primary);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: border-color 0.2s;
}

.btn-back:hover {
    border-color: var(--accent);
}

.full-results-summary {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.full-results-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.type-filter-btn {
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    padding: 0.25rem 0.6rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s;
}

.type-filter-btn:hover {
    border-color: var(--accent-border);
    color: var(--text-primary);
}

.type-filter-btn.active {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
}

.full-results-group {
    margin-bottom: 1.25rem;
}

.full-results-group-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--accent-glow);
}

.full-results-group-title .count {
    font-weight: normal;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.full-results-list {
    display: flex;
    flex-direction: column;
}

.full-result-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.full-result-item:hover {
    background: var(--accent-glow);
}

.full-result-name {
    font-size: 0.8rem;
    color: var(--text-primary);
    flex-shrink: 0;
}

.full-result-id {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.full-result-meta {
    margin-left: auto;
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.meta-tag {
    font-size: 0.6rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
}

/* =============================================================================
   Content Module Pages (Ships, Buildings, Traits, Governments)
   ============================================================================= */

/* Content Layout (two-panel: list + detail) */
.content-layout {
    padding: 1rem;
    display: flex;
    gap: 1rem;
    flex: 1;
    width: 100%;
}

.content-layout #item-list-panel {
    flex: 1;
    min-width: 0;
    max-height: calc(100vh - var(--detail-top, 130px) - 2rem - var(--footer-height, 38px));
    overflow-y: auto;
}

.content-layout #item-list-panel.map-view {
    height: calc(100vh - var(--detail-top, 130px) - 2rem - var(--footer-height, 38px));
    overflow: hidden;
}

.content-layout #item-list-panel.map-view #galaxy-map-container {
    height: 100%;
}

/* In map-active mode the detail panel overlays the map as an absolute panel
   so the map container never changes width during open/close transitions.
   This prevents the SVG fit-scale from changing mid-animation. */
.content-layout.map-active {
    position: relative;
}
.content-layout.map-active #detail-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: clamp(280px, 36%, 440px);
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    align-self: unset;
    flex: none;
    z-index: 20;
    background: rgba(12, 12, 20, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--accent-border);
    box-shadow: -6px 0 28px rgba(0,0,0,0.55);
    border-radius: 0 6px 6px 0;
    /* Keep same transition but only animate transform + opacity — no flex-grow needed */
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.32s ease;
}
/* Override entering/leaving states for overlay variant (no flex-grow collapse) */
.content-layout.map-active #detail-panel.detail-entering {
    flex-grow: unset;
    padding: 1rem;
}
.content-layout.map-active #detail-panel.detail-leaving {
    flex-grow: unset;
    padding: 1rem;
}

.content-layout #detail-panel {
    flex: 2 1 0%;
    min-width: 0;
    max-height: calc(100vh - var(--detail-top, 130px) - 2rem - var(--footer-height, 38px));
    overflow-y: auto;
    overflow-x: hidden;
    position: sticky;
    top: calc(var(--detail-top, 130px) + 1rem);
    align-self: flex-start;
    background: var(--bg-card);
    border-radius: 6px;
    padding: 1rem;
    transition: flex-grow 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                padding   0.32s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.32s ease;
}

.content-layout #detail-panel.hidden { display: none; }

/* Slide-in start state — collapsed layout width + hidden opacity. JS removes this one frame after display:none is lifted. */
.content-layout #detail-panel.detail-entering {
    flex-grow: 0;
    overflow: hidden;
    padding: 0;
    transform: translateX(40px);
    opacity: 0;
}

/* Slide-out end state — collapses layout width + fades out. JS adds display:none once transition finishes. */
.content-layout #detail-panel.detail-leaving {
    flex-grow: 0;
    overflow: hidden;
    padding: 0;
    transform: translateX(40px);
    opacity: 0;
    pointer-events: none;
}

/* Placeholder state: shown before any item is picked. Panel shares space
   1:1 with the list and displays a themed screenshot that fades radially
   into the page background (no hard container edge). */
.content-layout #detail-panel.detail-placeholder {
    flex: 1 1 0%;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
}
#detail-panel.detail-placeholder .detail-header { display: none; }
#detail-panel.detail-placeholder #detail-content {
    width: 100%;
    height: 100%;
    min-height: 520px;
}

.detail-placeholder-img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%,
                        rgba(0,0,0,1) 55%,
                        rgba(0,0,0,0) 95%);
            mask-image: radial-gradient(ellipse at 30% 40%,
                        rgba(0,0,0,1) 55%,
                        rgba(0,0,0,0) 95%);
}

/* Tab Buttons */
.tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

/* Category Chip Bar */
.cat-chip-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem 0.2rem 0.4rem;
    background: var(--card-border);
    border: 1px solid var(--card-border-hover);
    border-radius: 12px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
    user-select: none;
}

.cat-chip:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.22);
}

.cat-chip.active {
    background: var(--accent-glow);
    color: var(--accent-bright);
    border-color: var(--accent-border-hover);
}

.cat-chip-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    opacity: 0.75;
    flex-shrink: 0;
}

.cat-chip.active .cat-chip-icon {
    opacity: 1;
}

.cat-chip-count {
    font-size: 0.58rem;
    opacity: 0.65;
    margin-left: 0.1rem;
}

.tab-btn {
    padding: 0.25rem 0.6rem;
    background: var(--card-border);
    border: 1px solid var(--card-border-hover);
    border-radius: 4px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.1);
}

.tab-btn.active {
    background: var(--accent-border);
    color: var(--accent-bright);
    border-color: var(--accent-border-hover);
}

/* Item Card (generic content card) */
.item-card {
    background: var(--bg-card);
    border-radius: 6px;
    margin-bottom: 0.35rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color 0.2s, background 0.2s;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.item-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-border);
}

.item-card.active {
    border-color: var(--accent);
}

/* Icon column — sits flush left at full card height */
.item-card-icon-col {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    background: rgba(255,255,255,0.04);
    border-right: 1px solid var(--card-border);
    padding: 0.3rem;
}

.item-card-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: auto;
    display: block;
}

/* Inline variant for item-card-header (e.g. ship components): small icon
   next to the name, no dedicated column. */
.item-card-icon-inline {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: auto;
    flex-shrink: 0;
    border-radius: 3px;
    background: rgba(255,255,255,0.04);
}

/* Icons inside global search results (preview dropdown + full results page). */
.search-result-icon,
.full-result-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    image-rendering: auto;
    flex-shrink: 0;
    border-radius: 2px;
    vertical-align: middle;
}
.full-result-icon {
    width: 24px;
    height: 24px;
}

.item-card-body {
    min-width: 0;
    flex: 1;
    padding: 0.5rem 0.75rem;
}

.item-card-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.1rem;
}

.detail-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: auto;
    margin-right: 0.6rem;
    vertical-align: middle;
    flex-shrink: 0;
}

.item-card-name {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-card-id {
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.item-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.1rem;
}

.item-card-description {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.detail-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0.5rem 0;
}

/* =============================================================================
   Quadrant Filter Ribbons + Badges
   ============================================================================= */

:root {
    --q-alpha-color: #1a55cc;
    --q-beta-color:  #b02020;
    --q-gamma-color: #8822cc;
    --q-delta-color: #0d7a50;
    --q-major-color: #1255bb;
    --q-alt-color:   #556678;
}

.quadrant-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

/* Quadrant ribbon buttons — base colour via CSS var, active state uses it */
.quadrant-btn.q-alpha { border-color: var(--q-alpha-color); }
.quadrant-btn.q-beta  { border-color: var(--q-beta-color);  }
.quadrant-btn.q-gamma { border-color: var(--q-gamma-color); }
.quadrant-btn.q-delta { border-color: var(--q-delta-color); }
.quadrant-btn.q-major { border-color: var(--q-major-color); }
.quadrant-btn.q-alt   { border-color: var(--q-alt-color);   }

.quadrant-btn.q-alpha.active, .quadrant-btn.q-alpha:hover { background: color-mix(in srgb, var(--q-alpha-color) 25%, transparent); color: #6699ff; border-color: var(--q-alpha-color); }
.quadrant-btn.q-beta.active,  .quadrant-btn.q-beta:hover  { background: color-mix(in srgb, var(--q-beta-color)  25%, transparent); color: #e86060; border-color: var(--q-beta-color);  }
.quadrant-btn.q-gamma.active, .quadrant-btn.q-gamma:hover { background: color-mix(in srgb, var(--q-gamma-color) 25%, transparent); color: #c070ff; border-color: var(--q-gamma-color); }
.quadrant-btn.q-delta.active, .quadrant-btn.q-delta:hover { background: color-mix(in srgb, var(--q-delta-color) 25%, transparent); color: #40d090; border-color: var(--q-delta-color); }
.quadrant-btn.q-major.active, .quadrant-btn.q-major:hover { background: color-mix(in srgb, var(--q-major-color) 25%, transparent); color: #6090ff; border-color: var(--q-major-color); }
.quadrant-btn.q-alt.active,   .quadrant-btn.q-alt:hover   { background: color-mix(in srgb, var(--q-alt-color)   25%, transparent); color: #aabbcc; border-color: var(--q-alt-color);   }

/* Quadrant badge pill inside cards */
.quadrant-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.quadrant-badge.q-alpha { background: color-mix(in srgb, var(--q-alpha-color) 20%, transparent); color: #6699ff; border: 1px solid var(--q-alpha-color); }
.quadrant-badge.q-beta  { background: color-mix(in srgb, var(--q-beta-color)  20%, transparent); color: #e86060; border: 1px solid var(--q-beta-color);  }
.quadrant-badge.q-gamma { background: color-mix(in srgb, var(--q-gamma-color) 20%, transparent); color: #c070ff; border: 1px solid var(--q-gamma-color); }
.quadrant-badge.q-delta { background: color-mix(in srgb, var(--q-delta-color) 20%, transparent); color: #40d090; border: 1px solid var(--q-delta-color); }
.quadrant-badge.q-major { background: color-mix(in srgb, var(--q-major-color) 20%, transparent); color: #6090ff; border: 1px solid var(--q-major-color); }
.quadrant-badge.q-alt   { background: color-mix(in srgb, var(--q-alt-color)   20%, transparent); color: #aabbcc; border: 1px solid var(--q-alt-color);   }

/* Colored left border on item cards by quadrant */
.item-card.q-border-alpha { border-left: 3px solid var(--q-alpha-color); }
.item-card.q-border-beta  { border-left: 3px solid var(--q-beta-color);  }
.item-card.q-border-gamma { border-left: 3px solid var(--q-gamma-color); }
.item-card.q-border-delta { border-left: 3px solid var(--q-delta-color); }
.item-card.q-border-major { border-left: 3px solid var(--q-major-color); }
.item-card.q-border-alt   { border-left: 3px solid var(--q-alt-color);   }

/* =============================================================================
   Relic Grid + Detail Overlay
   ============================================================================= */

/* Relic grid container */
.relic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    position: relative;
}

/* Individual relic tile button */
.relic-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem;
    background: var(--bg-card);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    animation: fadeInUp 0.22s ease-out both;
}
.relic-tile:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-border);
}
.relic-tile img { width: 48px; height: 48px; object-fit: contain; }
.relic-tile .relic-tile-name {
    font-size: 0.7rem;
    text-align: center;
    color: var(--text-primary);
    line-height: 1.2;
}

/* Detail overlay — positioned absolutely over the grid */
.relic-detail-overlay {
    position: absolute;
    background: rgba(12, 12, 20, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    overflow: hidden;
    z-index: 10;
    transition: top 0.35s cubic-bezier(0.4,0,0.2,1),
                left 0.35s cubic-bezier(0.4,0,0.2,1),
                width 0.35s cubic-bezier(0.4,0,0.2,1),
                height 0.35s cubic-bezier(0.4,0,0.2,1),
                opacity 0.25s ease;
}
.relic-detail-overlay .detail-inner {
    opacity: 0;
    transition: opacity 0.2s ease 0.2s;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}
.relic-detail-overlay.expanded .detail-inner {
    opacity: 1;
}

/* Overlay header: back button + icon + name */
.relic-overlay-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--accent-border);
}
.relic-overlay-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.relic-overlay-title h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-bright);
}
.relic-overlay-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Two-column layout */
.relic-overlay-columns {
    display: flex;
    gap: 1.5rem;
    flex: 1;
    justify-content: center;
}
.relic-overlay-col {
    flex: 1;
    min-width: 0;
    max-width: 420px;
}
.relic-overlay-col + .relic-overlay-col {
    border-left: 1px solid var(--accent-border);
    padding-left: 1.5rem;
}

/* Footer: ID + source file */
.relic-overlay-footer {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--card-border);
    font-size: 0.6rem;
    color: var(--text-muted);
    justify-content: center;
}

/* Back button inside overlay */
.relic-detail-back {
    background: none;
    border: 1px solid var(--accent-border);
    color: var(--text-muted);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: color 0.2s, border-color 0.2s;
}
.relic-detail-back:hover {
    color: var(--text-primary);
    border-color: var(--accent-border-hover);
}

/* =============================================================================
   Tradition Tree Blocks
   ============================================================================= */

/* Grid of tree blocks */
.tradition-trees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    position: relative;
}

/* Single tree block */
.tradition-tree-block {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 0.75rem;
    transition: border-color 0.2s;
}
.tradition-tree-block:hover {
    border-color: var(--card-border-hover);
}

/* Header: tree name + adopt button */
.tradition-tree-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--card-border);
}
.tradition-tree-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-bright);
    text-transform: capitalize;
}

/* Footer: finish button */
.tradition-tree-footer {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--card-border);
}

/* Bonus buttons (adopt/finish) */
.tradition-bonus-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    background: none;
    border: 1px solid var(--accent-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: all 0.2s;
}
.tradition-bonus-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-border-hover);
    background: var(--accent-glow);
}
.tradition-bonus-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Tree body (contains levels + SVG arrows) */
.tradition-tree-body {
    position: relative;
    min-height: 60px;
}

/* Level rows */
.tradition-level {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.tradition-level:last-of-type {
    margin-bottom: 0;
}

/* Node tile */
.tradition-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: border-color 0.2s, background 0.2s;
    width: 80px;
}
.tradition-node:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-border);
}
.tradition-node img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.tradition-node-name {
    font-size: 0.6rem;
    text-align: center;
    line-height: 1.1;
    color: var(--text-muted);
    word-break: break-word;
    max-width: 76px;
}

/* SVG arrows between nodes */
.tradition-arrows {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}
.tradition-arrows path {
    fill: none;
    stroke: var(--accent-dim);
    stroke-width: 1.5;
    marker-end: url(#arrowhead);
}

/* Tradition detail overlay (reuses relic overlay pattern, lives inside the grid) */
.tradition-detail-overlay {
    position: absolute;
    background: rgba(12, 12, 20, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    overflow: hidden;
    z-index: 10;
    transition: top 0.35s cubic-bezier(0.4,0,0.2,1),
                left 0.35s cubic-bezier(0.4,0,0.2,1),
                width 0.35s cubic-bezier(0.4,0,0.2,1),
                height 0.35s cubic-bezier(0.4,0,0.2,1),
                opacity 0.25s ease;
}
.tradition-detail-overlay .detail-inner {
    opacity: 0;
    transition: opacity 0.2s ease 0.2s;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}
.tradition-detail-overlay.expanded .detail-inner {
    opacity: 1;
}

/* Tree block staggered fade-in. --stagger is set per block in traits.js
   from its DOM index, so the wave scales to any number of visible trees
   and always flows top-left -> bottom-right with the grid layout. */
.tradition-trees-grid .tradition-tree-block {
    animation-name: fadeInUp;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-delay: calc(var(--stagger, 0) * 40ms);
}

/* =============================================================================
   Event Chain Grouping + Chain Navigation Sidebar
   ============================================================================= */

/* Chain-Head Card */
.chain-head {
    border-left: 3px solid var(--accent);
    position: relative;
}

.chain-badge,
.model-badge {
    font-size: 0.55rem;
    background: var(--accent-glow);
    color: var(--accent);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.chain-expand {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    align-self: center;
    flex-shrink: 0;
    transition: color 0.2s;
}
.chain-expand:hover {
    color: var(--accent);
}

/* Chain Group (collapsed members) */
.chain-group {
    padding-left: 1rem;
    border-left: 2px solid var(--accent-border);
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
}

.chain-group .chain-member {
    opacity: 0.9;
    border-left: none;
}

.chain-member-wrap.chain-hidden-extra {
    display: none;
}

.chain-show-more {
    background: var(--accent-glow);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    cursor: pointer;
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-family: inherit;
    width: 100%;
    margin-top: 0.3rem;
    transition: background 0.2s;
}
.chain-show-more:hover {
    background: var(--accent-glow);
}

/* Chain Navigation Sidebar */
.chain-nav {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 auto;
    min-height: 0;
}

.chain-nav-back {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-family: inherit;
    text-align: left;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: 0.3rem;
    flex-shrink: 0;
}
.chain-nav-back:hover {
    color: var(--accent);
    border-color: var(--accent-border);
}

.chain-nav-tree {
    display: flex;
    flex-direction: column;
    align-items: flex-start;     /* let items take intrinsic width so
                                    horizontal overflow triggers the x-scroll */
    gap: 0.1rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;          /* native x-bar is unreliable in this nesting;
                                    we draw our own below as .chain-hscroll */
    /* Custom thin scrollbar to match the muted sidebar aesthetic. */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-border) transparent;
}

/* Custom horizontal scrollbar rendered below the tree. Always visible while
   chain mode is active; thumb reflects the visible range of scrollLeft.
   Sticky at the bottom of .chain-nav so it stays pinned to the visible edge
   of the sidebar regardless of any enclosing scroll state. */
.chain-hscroll {
    flex-shrink: 0;
    height: 5px;
    margin-top: 2px;
    background: transparent;
    position: sticky;
    bottom: 0;
    z-index: 2;
    cursor: pointer;
}
.chain-hscroll-thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    min-width: 16px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.15s;
}
.chain-hscroll:hover .chain-hscroll-thumb,
.chain-hscroll.dragging .chain-hscroll-thumb {
    background: rgba(255, 255, 255, 0.25);
}
[data-theme="light"] .chain-hscroll-thumb {
    background: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .chain-hscroll:hover .chain-hscroll-thumb,
[data-theme="light"] .chain-hscroll.dragging .chain-hscroll-thumb {
    background: rgba(0, 0, 0, 0.25);
}
/* Invisible spacer that sits below the last row; JS sets its width to the
   widest row so the browser gets an honest overflow signal and the
   horizontal scrollbar stays in sync. Items alone don't drive the width
   because some CSS interactions keep collapsing them to container width. */
.chain-nav-tree.curve .chain-nav-spacer {
    display: block;
    height: 0;
    flex-shrink: 0;
    min-width: 100%;
}
.chain-nav-tree::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.chain-nav-tree::-webkit-scrollbar-thumb {
    background: var(--accent-border);
    border-radius: 3px;
}
.chain-nav-tree::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}
.chain-nav-tree::-webkit-scrollbar-track {
    background: transparent;
}

/* Items must not force their own width; we want the scroll area to expand
   only when any translateX actually needs more room. */
.chain-nav-tree .chain-nav-item {
    width: max-content;
    min-width: 100%;
}

.chain-nav-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.3rem;
    font-size: 0.6rem;
    cursor: pointer;
    border-radius: 3px;
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
    min-height: 1.3rem;
}

/* Curve mode: the rAF loop animates padding-left per item so items take
   up real layout width — this is what lets the horizontal scrollbar show
   up when any row extends past the sidebar edge. */
.chain-nav-tree.curve .chain-nav-item {
    will-change: padding-left;
}

.chain-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.chain-nav-item.active {
    background: var(--accent-glow);
    color: var(--accent);
}

.chain-nav-item.root {
    font-size: 0.65rem;
    font-weight: 600;
}

.chain-nav-arrow {
    color: var(--accent-border-hover);
    font-size: 0.55rem;
    flex-shrink: 0;
}

.chain-nav-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* In curve mode the tree scrolls horizontally, so names grow naturally to
   their full width instead of being ellipsed inside the 220px sidebar. */
.chain-nav-tree.curve .chain-nav-name {
    overflow: visible;
    text-overflow: clip;
    flex: 0 0 auto;
}
/* Force the item to hug its intrinsic content width so padding + name + id
   actually add up and trigger x-overflow on the tree. Without this the flex
   row would stay at the shrink-wrap width of the tree and the scrollbar
   never appears. */
.chain-nav-tree.curve .chain-nav-item {
    width: max-content;
    min-width: 100%;
    flex-shrink: 0;
}

.chain-nav-id {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    flex-shrink: 0;
    display: none;
}

.chain-nav-item:hover .chain-nav-id {
    display: inline;
}

/* 3D Ship Model Viewer */
.badge-vanilla {
    font-size: 0.65rem;
    background: #553300;
    color: #ffcc66;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.ship-viewer-container {
    margin: 0.5rem 0;
}

.ship-viewer-placeholder {
    width: 100%;
    height: 300px;
    background: #0a0a0a;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ship-viewer-placeholder canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.ship-viewer-load-btn {
    padding: 0.5rem 1.2rem;
    background: var(--accent-bright);
    color: #111;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.2s;
}

.ship-viewer-load-btn:hover {
    background: var(--accent-bright);
}

.ship-faction-select {
    display: block;
    margin-bottom: 0.4rem;
    padding: 0.3rem 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
}

.ship-faction-select:focus {
    outline: 1px solid var(--accent);
}

/* Area-colored badges for tech list */
.area-badge-physics { color: #2a7fff; }
.area-badge-engineering { color: #ffb400; }
.area-badge-society { color: #36d673; }

/* Effect/Unlock sections in tech detail panel */
.effects-section { margin: 0.75rem 0; padding: 0.5rem; background: rgba(0,0,0,0.2); border-radius: 6px; }
.unlocks-section { margin: 0.75rem 0; padding: 0.5rem; background: rgba(0,0,0,0.3); border-radius: 6px; border-left: 3px solid #ffd700; }
.effect-category, .unlock-category { margin: 0.4rem 0; }
.effect-category-label { font-weight: bold; color: var(--accent-bright); font-size: 0.85rem; }
.unlock-category-label { font-weight: bold; color: #ffd700; font-size: 0.85rem; display: block; margin-bottom: 4px; }
.effect-item, .unlock-item { margin-left: 1.2em; font-size: 0.85rem; line-height: 1.5; }
.unlock-type-img { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; }

/* View in Tree button */
.view-in-tree-btn {
    display: inline-block; margin: 0.5rem 0; padding: 6px 14px;
    background: rgba(60,128,255,0.15); color: #6aafff; border: 1px solid rgba(60,128,255,0.4);
    border-radius: 6px; font-size: 0.85rem; text-decoration: none; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.view-in-tree-btn:hover { background: rgba(60,128,255,0.3); border-color: #3c80ff; }

/* Tech properties table */
.tech-props-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tech-props-table td { padding: 3px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.tech-props-table td:first-child { color: #a0b0c0; white-space: nowrap; width: 1%; padding-right: 16px; }
.tech-props-table code { background: rgba(255,255,255,0.07); padding: 1px 5px; border-radius: 3px; font-size: 0.82rem; }

/* Empire autocomplete in tech list filter bar */
.empire-autocomplete {
    position: relative;
}
.empire-autocomplete input {
    width: 160px;
    padding: 0.35rem 1.8rem 0.35rem 0.6rem;
    background: var(--select-bg);
    border: 1px solid var(--accent-border);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
    cursor: pointer;
}
.empire-autocomplete input:focus {
    border-color: var(--accent);
    background: var(--select-bg-hover);
}
.empire-autocomplete input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}
.empire-autocomplete-arrow {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a90a4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.15s;
}
.empire-autocomplete input:focus ~ .empire-autocomplete-arrow {
    transform: translateY(-50%) rotate(180deg);
}
.empire-autocomplete .autocomplete-dropdown {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0;
    max-height: 280px; overflow-y: auto;
    background: var(--select-bg); border: 1px solid var(--accent);
    border-radius: 4px;
    z-index: 1000; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.empire-autocomplete .autocomplete-item {
    padding: 0.4rem 0.6rem; cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; border-bottom: 1px solid var(--card-border);
    font-size: 0.75rem; color: var(--text-primary);
}
.empire-autocomplete .autocomplete-item:last-child { border-bottom: none; }
.empire-autocomplete .autocomplete-item:hover,
.empire-autocomplete .autocomplete-item.highlighted { background: var(--select-bg-hover); color: var(--accent); }
.empire-autocomplete .autocomplete-item.autocomplete-selected { background: var(--select-bg-hover); font-weight: 600; }
.empire-autocomplete .ships-icon { color: var(--accent); margin-left: 6px; font-size: 0.8rem; opacity: 0.8; }

/* Responsive for content pages */
@media (max-width: 921px) {
    .content-layout { flex-direction: column; }
    /* Mobile list panel: keep it as its own scroll container so touch
       scroll actually works (the previous overflow-y: visible delegated
       scroll to the body, which the sticky header + filter bar then ate).
       Footer is position: static here, so it does not steal viewport
       height — drop it from the calc.

       The detail panel switches to a full-screen fixed overlay further
       down (around line 3730 — `.content-layout #detail-panel:not(.hidden)`),
       so we only style the static/hidden case here. */
    .content-layout #item-list-panel {
        max-height: calc(100vh - var(--detail-top, 130px) - 1rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .content-layout #detail-panel {
        width: 100%;
        max-height: calc(100vh - var(--detail-top, 130px) - 1rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: static;
    }
}

/* Relic grid — smaller tiles + single column on mobile */
@media (max-width: 921px) {
    .relic-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
    .relic-overlay-columns {
        flex-direction: column;
        gap: 0.75rem;
    }
    .relic-overlay-col + .relic-overlay-col {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--accent-border);
        padding-top: 0.75rem;
    }
    .relic-detail-overlay .detail-inner {
        padding: 1rem;
    }
}

/* Tradition trees — single column + smaller icons on mobile */
@media (max-width: 921px) {
    .tradition-trees-grid {
        grid-template-columns: 1fr;
    }
    .tradition-node img {
        width: 32px;
        height: 32px;
    }
    .tradition-node {
        width: 68px;
    }
    .tradition-node-name {
        font-size: 0.55rem;
        max-width: 64px;
    }
    .tradition-detail-overlay .detail-inner {
        padding: 0.75rem;
    }
    .tradition-detail-overlay .relic-overlay-columns {
        flex-direction: column;
        gap: 0.75rem;
    }
    .tradition-detail-overlay .relic-overlay-col + .relic-overlay-col {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--accent-border);
        padding-top: 0.75rem;
    }
}

/* Mobile Detail Overlay (<=921px) */
@media (max-width: 921px) {
    /* Events page overlay */
    #event-detail-panel:not(.hidden) {
        position: fixed;
        inset: 0;
        z-index: 150;
        max-height: none;
        width: 100%;
        border-radius: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--bg-deep);
        padding: 0;
    }

    /* Content pages overlay */
    .content-layout #detail-panel:not(.hidden) {
        position: fixed;
        inset: 0;
        z-index: 150;
        /* Force the box to fill the viewport. `inset: 0` alone leaves
           `height: auto`, and the browser then shrinks the panel to its
           content height instead of stretching it — the list under it
           bleeds through and the panel can't scroll because there is
           nothing to overflow. */
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--bg-deep);
        padding: 0;
        transform: none;
        opacity: 1;
        flex-grow: unset;
    }

    /* Desktop enter/leave Animationen auf Mobile deaktivieren (Empires-Page) */
    .content-layout #detail-panel.detail-entering,
    .content-layout #detail-panel.detail-leaving {
        position: fixed;
        inset: 0;
        z-index: 150;
        transform: none;
        opacity: 1;
        flex-grow: unset;
        overflow-y: auto;
        padding: 0;
    }

    /* Hide the placeholder screenshot on mobile: the list stays full width,
       detail panel becomes an overlay only once a real item is picked. */
    .content-layout #detail-panel.detail-placeholder { display: none; }

    /* Sticky Header im Overlay */
    #event-detail-panel:not(.hidden) .detail-header,
    .content-layout #detail-panel:not(.hidden) .detail-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--bg-deep);
        padding: 0.75rem 1rem;
        margin: 0;
        border-bottom: 1px solid var(--accent-border);
    }

    /* Content-Padding im Overlay */
    #event-detail-panel:not(.hidden) #event-detail,
    .content-layout #detail-panel:not(.hidden) #detail-content {
        padding: 1rem;
    }

    /* Touch-freundlicher Close-Button */
    #event-detail-panel:not(.hidden) #detail-close,
    .content-layout #detail-panel:not(.hidden) #detail-close {
        font-size: 1.4rem;
        padding: 0.5rem;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Body Scroll Lock (angewendet via JS) */
    body.overlay-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* =============================================================================
   Light Theme Overrides
   ============================================================================= */

[data-theme="light"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236a7088'/%3E%3C/svg%3E");
}

[data-theme="light"] .ns-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ns-item.active {
    background: rgba(34, 102, 170, 0.1);
}

[data-theme="light"] .event-card:hover {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(34, 102, 170, 0.3);
}

[data-theme="light"] .event-card.active {
    border-color: var(--accent);
}

[data-theme="light"] .ns-item .badge {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .item-card-icon-col {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .option-card {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .code-block {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .human-view {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .stat-item,
[data-theme="light"] .meta-tag {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .font-size-label {
    color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .search-results-inner {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* =============================================================================
   Page Load Animation — staggered fade-in wave
   ============================================================================= */

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

/* Structural elements: header → nav → filter → content → footer */
#masthead            { animation: fadeInUp 0.5s ease-out both; }
#wiki-nav            { animation: fadeInUp 0.45s ease-out 0.08s both; }
#filter-bar          { animation: fadeInUp 0.4s ease-out 0.16s both; }
#main-content        { animation: fadeInUp 0.45s ease-out 0.22s both; }
/* Mobile: kill the page-load fadeInUp on #main-content. With animation-
   fill-mode: both the final keyframe leaves a `transform: translateY(0)`
   permanently in effect, which makes #main-content a containing block
   for any position:fixed children — the detail-panel mobile overlay
   then anchors to #main-content (y=185 below the filter bar) instead
   of the viewport, killing its scroll. */
@media (max-width: 921px) {
    #main-content { animation: none; }
}
#site-footer         { animation: fadeInUp 0.35s ease-out 0.5s both; }

/* Hub page */
.hub-welcome         { animation: fadeInUp 0.5s ease-out 0.15s both; }
.hub-meta            { animation: fadeInUp 0.4s ease-out 0.22s both; }
.stats-dashboard     { animation: fadeInUp 0.4s ease-out 0.28s both; }

.section-card        { animation: fadeInUp 0.4s ease-out both; }
.section-card:nth-child(1)  { animation-delay: 0.30s; }
.section-card:nth-child(2)  { animation-delay: 0.36s; }
.section-card:nth-child(3)  { animation-delay: 0.42s; }
.section-card:nth-child(4)  { animation-delay: 0.48s; }
.section-card:nth-child(5)  { animation-delay: 0.54s; }
.section-card:nth-child(6)  { animation-delay: 0.60s; }
.section-card:nth-child(7)  { animation-delay: 0.66s; }
.section-card:nth-child(8)  { animation-delay: 0.72s; }
.section-card:nth-child(9)  { animation-delay: 0.78s; }
.section-card:nth-child(10) { animation-delay: 0.84s; }

/* Deferred content (counts + breakdown tags) — injected after data load.
   Staggered second wave via --stagger (set per card in hub.js). */
.card-count.card-deferred,
.card-breakdown.card-deferred {
    animation: fadeInUp 0.35s ease-out both;
    animation-delay: calc(var(--stagger, 0) * 60ms);
}

.stat-card           { animation: fadeInUp 0.35s ease-out both; }
.stat-card:nth-child(1)  { animation-delay: 0.22s; }
.stat-card:nth-child(2)  { animation-delay: 0.26s; }
.stat-card:nth-child(3)  { animation-delay: 0.30s; }
.stat-card:nth-child(4)  { animation-delay: 0.34s; }
.stat-card:nth-child(5)  { animation-delay: 0.38s; }

.update-notes        { animation: fadeInUp 0.45s ease-out 0.6s both; }

/* Item list cards — staggered fade-in */
.item-card { animation: fadeInUp 0.22s ease-out both; }

#item-list .item-card:nth-child(1)  { animation-delay: 0.02s; }
#item-list .item-card:nth-child(2)  { animation-delay: 0.05s; }
#item-list .item-card:nth-child(3)  { animation-delay: 0.08s; }
#item-list .item-card:nth-child(4)  { animation-delay: 0.11s; }
#item-list .item-card:nth-child(5)  { animation-delay: 0.14s; }
#item-list .item-card:nth-child(6)  { animation-delay: 0.17s; }
#item-list .item-card:nth-child(7)  { animation-delay: 0.20s; }
#item-list .item-card:nth-child(8)  { animation-delay: 0.23s; }
#item-list .item-card:nth-child(9)  { animation-delay: 0.26s; }
#item-list .item-card:nth-child(10) { animation-delay: 0.29s; }
#item-list .item-card:nth-child(11) { animation-delay: 0.32s; }
#item-list .item-card:nth-child(12) { animation-delay: 0.35s; }
#item-list .item-card:nth-child(13) { animation-delay: 0.38s; }
#item-list .item-card:nth-child(14) { animation-delay: 0.41s; }
#item-list .item-card:nth-child(15) { animation-delay: 0.44s; }

/* Event list cards — same pattern */
.event-card { animation: fadeInUp 0.22s ease-out both; }

#event-list .event-card:nth-child(1)  { animation-delay: 0.02s; }
#event-list .event-card:nth-child(2)  { animation-delay: 0.05s; }
#event-list .event-card:nth-child(3)  { animation-delay: 0.08s; }
#event-list .event-card:nth-child(4)  { animation-delay: 0.11s; }
#event-list .event-card:nth-child(5)  { animation-delay: 0.14s; }
#event-list .event-card:nth-child(6)  { animation-delay: 0.17s; }
#event-list .event-card:nth-child(7)  { animation-delay: 0.20s; }
#event-list .event-card:nth-child(8)  { animation-delay: 0.23s; }
#event-list .event-card:nth-child(9)  { animation-delay: 0.26s; }
#event-list .event-card:nth-child(10) { animation-delay: 0.29s; }
#event-list .event-card:nth-child(11) { animation-delay: 0.32s; }
#event-list .event-card:nth-child(12) { animation-delay: 0.35s; }
#event-list .event-card:nth-child(13) { animation-delay: 0.38s; }
#event-list .event-card:nth-child(14) { animation-delay: 0.41s; }
#event-list .event-card:nth-child(15) { animation-delay: 0.44s; }

/* Smooth theme transitions */
body {
    transition: background 0.4s ease, color 0.3s ease;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =============================================================================
   Borg Scanline Overlay
   ============================================================================= */

[data-theme="borg"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 85, 0.015) 2px,
        rgba(0, 255, 85, 0.015) 4px
    );
    pointer-events: none;
    z-index: 1;
}