/* Stylesheet map, in file order; every section starts with a "=== NAME ===" banner. Design tokens live only in :root below.
   TOKENS AND BASE | HEADER | SHARED COMPONENTS | DASHBOARD | SYSTEMS (shell and rail, board and inspector, phone layout) | SYSTEM DETAIL |
   POWERS | POWER DETAIL | SYSTEM MARKET | VULNERABLE | CASCADE | MINING | ADMIN | FEEDBACK WIDGET | 404 AND ERROR | GUIDE |
   POWER SELECTION OVERLAY | BOARD PAGES (shared phone rules) | GLOBAL (interaction, accessibility, motion).
   Declarations in a rule follow one order: custom properties, content, layout (display, position, inset, flex and grid, alignment, size), box (margin, padding, overflow),
   type (font, colour, text), paint (background, border, shadow, opacity, filter, mask), motion (transform, transition, animation), interaction (cursor, pointer-events).
   Page sections are namespaced by class prefix and may beat earlier rules at equal specificity: keep the order.
   Breakpoints are em in @media and rem in @container, so the layouts follow the text size (1em = 16px at the default: 45em 720, 68.75em 1100, 93.75em 1500). */

/* === TOKENS AND BASE === */

:root {
    color-scheme: dark;

    /* --- Fonts (Iosevka is vendored; its @font-face is in App.razor) --- */
    --ed-font-sans: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --ed-font-mono: 'Iosevka', Consolas, 'Liberation Mono', Menlo, Monaco, monospace;

    /* --- Colour: channel triplets, so a tint is rgb(var(--ed-red-rgb) / .15) --- */
    --ed-accent-rgb: 255 113 0;
    --ed-blue-rgb: 10 157 255;
    --ed-cyan-rgb: 0 255 213;
    --ed-red-rgb: 255 51 51;
    --ed-green-rgb: 0 255 102;
    --ed-yellow-rgb: 255 170 0;
    --ed-fortified-rgb: 90 184 255;
    --ed-stronghold-rgb: 178 100 255;
    --ed-contested-rgb: 255 85 68;
    --ed-unoccupied-rgb: 160 168 176;
    --ed-muted-rgb: 149 160 171;
    --ed-surface-rgb: 22 27 34;
    --ed-body-rgb: 13 17 23;
    --ed-white-rgb: 255 255 255;
    --ed-black-rgb: 0 0 0;

    /* --- Colour: core --- */
    --ed-orange: #ff7100;
    --ed-orange-dim: #cc5a00;
    --ed-orange-glow: rgb(var(--ed-accent-rgb) / .4);
    --ed-blue: #0a9dff;
    --ed-cyan: #00ffd5;
    --ed-red: #ff3333;
    --ed-green: #00ff66;
    --ed-yellow: #ffaa00;
    --ed-red-soft: #ff7171;
    --ed-red-pale: #ffb3b3;
    --ed-red-solid: #d32f2f;        /* carries white text at 4.5:1 (--ed-red itself manages 3.6:1) */
    --ed-red-text: #ff6161;

    /* --- Colour: states (-text variants where the colour is the glyph) --- */
    --ed-state-stronghold: #b264ff;
    --ed-state-stronghold-text: #bf7eff;
    --ed-state-fortified: #5ab8ff;
    --ed-state-exploited: var(--ed-orange);
    --ed-state-contested: #ff5544;
    --ed-state-contested-text: #ff6b5c;
    --ed-state-unoccupied: #a0a8b0;

    /* --- Colour: surfaces and borders --- */
    --ed-bg-body: #0d1117;
    --ed-bg-body-grad: #141a22;
    --ed-bg-surface: #161b22;
    --ed-bg-elevated: #1c2129;
    --ed-bg-input: #222830;
    --ed-bg-hover: #282e38;
    --ed-bg-header: rgb(var(--ed-accent-rgb) / .08);
    --ed-border-subtle: #2d333b;
    --ed-border: rgb(var(--ed-accent-rgb) / .25);
    --ed-border-bright: rgb(var(--ed-accent-rgb) / .5);
    --ed-border-strong: #444c56;
    --ed-neutral: #6e7681;          /* 3:1 on the surface: non-text UI only (separators, dots, inactive icons) */

    /* --- Colour: text, each >= 4.5:1 on the surface --- */
    --ed-text: #e6edf3;
    --ed-text-secondary: #b0b8c1;
    --ed-text-muted: #98a3ae;
    --ed-text-orange: #ff9544;

    /* --- Type scale (rem; 11px is the floor) --- */
    --fs-2xs: .6875rem;   /* 11px  uppercase micro-labels, axis ticks, badges */
    --fs-xs: .75rem;      /* 12px  captions, secondary data, table meta */
    --fs-sm: .8125rem;    /* 13px  compact body, data rows */
    --fs-base: .875rem;   /* 14px  body copy, inputs */
    --fs-md: 1rem;         /* 16px  lead text, section titles */
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;      /* 24px  page titles, KPI values */
    --fs-3xl: 1.75rem;
    --fs-4xl: 2rem;        /* 32px  hero numerals */

    /* --- Line height (1 only for single-line numerals) --- */
    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    /* --- H1 tiers: a compact title in a header strip (board pages, Power detail, Admin) and a content page title (System detail, Market, Guide, 404, Error) --- */
    --h1-strip: var(--fs-lg);
    --h1-page: var(--fs-2xl);

    /* --- Tracking for uppercase labels --- */
    --ls-xs: .02em;
    --ls-sm: .04em;
    --ls-md: .08em;
    --ls-lg: .12em;
    --ls-xl: .16em;
    --ls-2xl: .2em;
    --ls-3xl: .3em;

    /* --- Spacing (4px base) --- */
    --space-0: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --page-gutter: var(--space-5);    /* side margin of every page shell: the header padding, 24px (12px under 45em, set below) */

    /* --- Interaction (WCAG 2.5.8: 24px; touch: 44px) --- */
    --tap-min: 44px;
    --tap-min-fine: 24px;
    --focus-ring: 2px solid var(--ed-text-orange);
    --focus-ring-offset: 3px;

    /* --- Layering: page content and popovers use 1-100 in their own sections; a showModal() dialog is in the top layer, above every number here.
       --z-header is deliberately under the modal tiers, so a modal and its backdrop cover the sticky header. The header's own dropdowns live
       inside its stacking context and only compete with its tiers (ticker badge 2, popups 3). --- */
    --z-header: 900;
    --z-feedback: 1040;             /* feedback tab; its panel is +1 */
    --z-modal: 1050;                /* the market dialog when showModal() failed: over the feedback panel, under the error bar */
    --z-error-bar: 1060;            /* #blazor-error-ui: must clear the feedback panel that shares its corner */
    --z-progress: 9999;             /* route progress bar, over the header */
    --z-skip: 10001;                /* skip link, over everything */

    /* --- Header geometry (interop.js sets --edhdr-live-h; pages clear --edhdr-sticky-h) --- */
    --edhdr-ticker-h: 26px;
    --edhdr-t2-h: 58px;
    --edhdr-t3-h: 36px;
    --edhdr-h: calc(var(--edhdr-ticker-h) + var(--edhdr-t2-h) + var(--edhdr-t3-h));
    --edhdr-live-h: var(--edhdr-h);
    --edhdr-sticky-h: var(--edhdr-live-h);
}
/* Plain top-level at-rules, not nested in :root: a browser without CSS nesting would drop the whole token block. */
@media (pointer: coarse) {
    :root { --edhdr-ticker-h: var(--tap-min); }
}
@media (width <= 68.75em) {
    :root { --edhdr-sticky-h: 0px; }    /* the unit stays: a bare 0 is invalid inside calc() */
}
@media (width <= 45em) {
    :root { --page-gutter: var(--space-3); }
}
* {
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
    /* Keeps focus, in-page links and scrollIntoView out from under a sticky header and the fixed Feedback tab (a 44px phone tab, 16px off the edge). */
    scroll-padding-top: calc(var(--edhdr-sticky-h) + var(--space-3));
    scroll-padding-bottom: calc(var(--tap-min) + var(--space-4) + env(safe-area-inset-bottom, 0px));
}

html, body {
    min-height: 100vh;
    margin: 0;
    font-family: var(--ed-font-sans);
    color: var(--ed-text);
    background: radial-gradient(ellipse at center, var(--ed-bg-body-grad) 0%, var(--ed-bg-body) 100%);
    background-attachment: fixed;
}

.badge, .panel-header, .stat-box, .back-link {
    -webkit-user-select: none;
    user-select: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    color: var(--ed-text);
    text-transform: uppercase;
    letter-spacing: var(--ls-sm);
}

h1 {
    font-size: var(--h1-page);
    color: var(--ed-orange);
    text-shadow: 0 0 20px var(--ed-orange-glow);
}

a {
    color: var(--ed-blue);
    text-decoration: none;
    transition: all .2s;
}

a:hover {
    color: var(--ed-orange);
    text-shadow: 0 0 8px var(--ed-orange-glow);
}

/* The original wash and glow, kept on purpose: badge contrast dips only during the first moments of a 2s fade. */
@keyframes row-highlight {
    0% {
        background: rgb(var(--ed-accent-rgb) / .3);
        box-shadow: inset 3px 0 0 var(--ed-orange), inset 0 0 20px var(--ed-orange-glow);
    }
    100% {
        background: transparent;
        box-shadow: inset 3px 0 0 transparent, inset 0 0 20px transparent;
    }
}

@keyframes live-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

/* --- Buttons and alerts --- */

.ed-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ed-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-sm);
    background: rgb(var(--ed-accent-rgb) / .15);
    border: 1px solid var(--ed-orange);
    transition: all .2s;
    cursor: pointer;
}

.ed-btn:hover {
    color: rgb(var(--ed-white-rgb));
    background: rgb(var(--ed-accent-rgb) / .3);
}

.ed-alert {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    font-size: var(--fs-base);
    background: rgb(var(--ed-red-rgb) / .1);
    border: 1px solid rgb(var(--ed-red-rgb) / .3);
    border-left: 3px solid var(--ed-red);
}

.ed-alert:has(> .ed-btn) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }

.ed-alert strong {
    font-size: var(--fs-xs);
    color: var(--ed-red-text);
    text-transform: uppercase;
    letter-spacing: var(--ls-sm);
}

/* --- Scrollbars and spinner --- */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--ed-bg-body);
}

::-webkit-scrollbar-thumb {
    background: var(--ed-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ed-orange);
}

.ed-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid var(--ed-border);
    border-top-color: var(--ed-orange);
    border-radius: 50%;
    animation: ed-spin 1s linear infinite;
}

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

/* --- Text utilities --- */

.text-orange { color: var(--ed-orange); }
.text-end { text-align: right; }
.text-center { text-align: center; }
.mono { font-family: var(--ed-font-mono); }

/* --- State chips --- */

/* State chip: one style everywhere. Stronghold and Contested text is lifted 25% toward white: their -text tokens miss 4.5:1 on a hovered row. */
.badge-state {
    --chip-a: .12;
    --chip-edge: var(--ed-neutral);
    --chip-rgb: var(--ed-muted-rgb);
    --chip-text: var(--ed-text-muted);
    flex-shrink: 0;
    padding: var(--space-0) 6px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--chip-text);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
    background: rgb(var(--chip-rgb) / var(--chip-a));
    border: 0;
    border-left: 2px solid var(--chip-edge);
}
.badge-stronghold {
    --chip-a: .22;
    --chip-edge: var(--ed-state-stronghold);
    --chip-rgb: var(--ed-stronghold-rgb);
    --chip-text: color-mix(in srgb, var(--ed-state-stronghold-text), rgb(var(--ed-white-rgb)) 25%);
}
.badge-fortified {
    --chip-a: .2;
    --chip-edge: var(--ed-state-fortified);
    --chip-rgb: var(--ed-fortified-rgb);
    --chip-text: var(--ed-state-fortified);
}
.badge-exploited {
    --chip-a: .22;
    --chip-edge: var(--ed-state-exploited);
    --chip-rgb: var(--ed-accent-rgb);
    --chip-text: var(--ed-text-orange);
}
.badge-contested,
.badge-turmoil {
    --chip-a: .2;
    --chip-edge: var(--ed-state-contested);
    --chip-rgb: var(--ed-contested-rgb);
    --chip-text: color-mix(in srgb, var(--ed-state-contested-text), rgb(var(--ed-white-rgb)) 25%);
}
.badge-unoccupied {
    --chip-a: .16;
    --chip-edge: var(--ed-text-muted);
    --chip-text: var(--ed-text-secondary);
}

.activity-new {
    animation: row-highlight 2s ease-out;
}

/* === HEADER: cockpit bar === */

.ed-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Three tiers: live ticker, brand/nav/search, pledged power/territory/cycle. Steps are in em (they follow the text size; px at 16px):
   1700 captions return, 1400 nav icons, 1280 territory chips, 1100 header goes static and the nav takes its own row, 900 ticker gone, 720 phone. */

/* The header's dropdowns live inside this stacking context, so they only compete with its own tiers (ticker badge 2, popups 3). */
.edhdr {
    --edhdr-ticker-bg: color-mix(in srgb, var(--ed-bg-body) 40%, rgb(var(--ed-black-rgb)));
    --edhdr-tier2-top: color-mix(in srgb, var(--ed-bg-body) 70%, var(--ed-bg-surface));
    --edhdr-tier3-bottom: color-mix(in srgb, var(--ed-bg-body) 75%, rgb(var(--ed-black-rgb)));
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* While sticky, a dropdown is capped to what is left of the viewport (the header never moves).
   The .edhdr prefix beats the panels' own max-height further down. */
@media (width > 68.75em) {
    .edhdr .edhdr-search-dropdown [role="listbox"] { max-height: min(360px, calc(100dvh - var(--edhdr-live-h) - var(--space-4))); }
    .edhdr .edhdr-power-dropdown { max-height: min(30rem, calc(100dvh - var(--edhdr-live-h) - var(--space-4))); }
    .edhdr-loc-dropdown {
        max-height: min(30rem, calc(100dvh - var(--edhdr-live-h) - var(--space-4)));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* --- Tier 1: live ticker --- */
.edhdr-ticker {
    display: flex;
    position: relative;
    align-items: center;
    height: var(--edhdr-ticker-h);
    overflow: hidden;
    background: var(--edhdr-ticker-bg);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .18);
}
.edhdr-ticker-badge {
    display: flex;
    position: absolute; top: 0; bottom: 0;
    left: 0;
    z-index: 2;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    width: 10rem;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--ed-green);
    letter-spacing: var(--ls-3xl);
    background: linear-gradient(90deg, var(--edhdr-ticker-bg) 0%, var(--edhdr-ticker-bg) 97%, transparent 100%);
}
.edhdr-pulse {
    width: 5px;
    height: 5px;
    background: var(--ed-green);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--ed-green);
    animation: edhdr-pulse 1.2s ease-in-out infinite;
}
.edhdr-pulse-orange {
    background: var(--ed-orange);
    box-shadow: 0 0 6px var(--ed-orange);
}
/* WCAG 2.2.2: the rail moves for over five seconds, so it has a pause control (edhdr-marquee.js drives aria-pressed). */
.edhdr-ticker-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min-fine);
    padding: 0;
    color: var(--ed-text-muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}
.edhdr-ticker-toggle:hover {
    color: var(--ed-text);
    background: rgb(var(--ed-white-rgb) / .08);
}
.edhdr-ticker-toggle .is-play,
.edhdr-ticker-toggle[aria-pressed="true"] .is-pause { display: none; }
.edhdr-ticker-toggle[aria-pressed="true"] .is-play { display: block; }

.edhdr-ticker-rail {
    display: flex;
    gap: 40px;
    padding-left: 10.5rem;
    /* Scrolled by edhdr-marquee.js in px/s (a % animation jumped when the rail width changed); the GPU-layer hints stop sub-pixel text shake. */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    white-space: nowrap;
    will-change: transform;
}
/* Items render three times so the marquee wraps without a seam; only the first copy is exposed to assistive tech. */
.edhdr-ticker-copy { display: contents; }
.edhdr-ticker-item {
    display: inline-flex;
    gap: var(--space-3);
    align-items: center;
    min-height: var(--tap-min-fine);
    font-size: var(--fs-2xs);
    color: var(--ed-text-secondary);
    letter-spacing: var(--ls-xs);
}
.edhdr-ticker-item.is-clickable:hover { text-shadow: none; }
.edhdr-ticker-item.is-clickable:hover .edhdr-ticker-text { color: var(--ed-text); }
.edhdr-ticker-tag {
    font-weight: 700;
    color: var(--ed-text-orange);
    letter-spacing: var(--ls-2xl);
}
.edhdr-ticker-tag.is-alert { color: var(--ed-red-text); }
.edhdr-ticker-text.is-alert { color: var(--ed-red-soft); }

/* Clipping containers cannot show the outset focus ring, so it is drawn inset. The selectors are long on purpose:
   the global :focus-visible rule (0,3,0) would beat shorter ones. */
.edhdr .edhdr-ticker :is(.edhdr-ticker-toggle, .edhdr-ticker-item):focus-visible,
.edhdr :is(.edhdr-power-dropdown, .edhdr-loc-dropdown) :is(.edhdr-power-dropdown-item, .edhdr-loc-result, .edhdr-loc-range-chip):focus-visible { outline-offset: -2px; }

@keyframes edhdr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
/* A glow rather than an opacity pulse for the alert badge: fading its fill would drop the
   white count below 4.5:1 for half of every cycle. */
@keyframes edhdr-glow {
    0%, 100% { box-shadow: 0 0 4px rgb(var(--ed-red-rgb) / .35); }
    50% { box-shadow: 0 0 10px rgb(var(--ed-red-rgb) / .75); }
}

/* --- Tier 2: brand, nav, search --- */
.edhdr-tier2 {
    display: flex;
    position: relative;
    gap: var(--space-5);
    align-items: center;
    min-height: var(--edhdr-t2-h);
    padding: 0 var(--space-5);
    background: linear-gradient(180deg, var(--edhdr-tier2-top) 0%, var(--ed-bg-body) 100%);
}

.edhdr-brand {
    display: flex;
    flex: none;
    gap: var(--space-3);
    align-items: center;
    color: inherit;
}
.edhdr-brand:hover { text-shadow: none; }
.edhdr-brand-logo {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 0 8px rgb(var(--ed-accent-rgb) / .5));
    object-fit: contain;
}
.edhdr-brand-text {
    display: flex;
    gap: var(--space-0);
    align-items: baseline;
    line-height: 1;
}
.edhdr-brand-ed {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--ed-orange);
    letter-spacing: var(--ls-sm);
    text-shadow: 0 0 10px rgb(var(--ed-accent-rgb) / .5);
}
.edhdr-brand-pp {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--ed-text);
    letter-spacing: var(--ls-2xl);
}
.edhdr-beta-tag {
    align-self: center;
    margin-left: var(--space-1);
    padding: var(--space-0) var(--space-1);
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--ed-orange);
    letter-spacing: var(--ls-md);
    border: 1px solid rgb(var(--ed-accent-rgb) / .5);
}

.edhdr-nav {
    display: flex;
    flex: none;
    gap: 0;
    margin-left: var(--space-2);
}
.edhdr-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* 10px 14px is optical, not on the scale: it is what lets the full row (icons included)
       fit from 1400px up, and it gives a 35px target inside the 58px tier. */
    padding: 10px 14px;
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-2xl);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ed-text-muted);
    transition: color .15s;
}
.edhdr-nav-link:hover { color: var(--ed-text); text-shadow: none; }
.edhdr-nav-icon { display: inline-flex; opacity: .55; }
.edhdr-nav-link.active { color: var(--ed-text); }
.edhdr-nav-link.active .edhdr-nav-icon { opacity: 1; }
.edhdr-nav-link.active::after {
    content: '';
    position: absolute;
    right: var(--space-3);
    bottom: -1px;
    left: var(--space-3);
    height: 2px;
    background: var(--ed-orange);
    box-shadow: 0 0 10px var(--ed-orange);
}

.edhdr-nav-link.is-alert { color: var(--ed-red-soft); }
.edhdr-nav-link.is-alert .edhdr-nav-icon { color: var(--ed-red-text); opacity: .8; }
.edhdr-nav-link.is-alert:hover { color: var(--ed-red-pale); }
.edhdr-nav-link.is-alert.active::after { background: var(--ed-red); box-shadow: 0 0 10px var(--ed-red); }
.edhdr-alert-badge {
    padding: 1px var(--space-1);
    font-weight: 700;
    color: rgb(var(--ed-white-rgb));
    letter-spacing: var(--ls-sm);
    background: var(--ed-red-solid);
    animation: edhdr-glow 2.2s ease-in-out infinite;
}

/* The search box is a flex item: flex-shrink plus min-widths on it and on the <input> (intrinsic ~128px) stop it widening the page, as it did from 900 to 1466px. */
.edhdr-search-container {
    position: relative;
    min-width: 160px;
    margin-left: auto;
}
/* The bordered element is the <input> itself, with the icon and the clear button laid over its padding: one control, and the standard focus
   ring lands on it. (The field used to be a bordered wrapper around a bare input, which needed its own substitute ring.) */
.edhdr-search {
    display: flex;
    position: relative;
    align-items: center;
}
.edhdr-search input {
    flex: 1;
    min-width: 0;
    min-height: 2rem;
    padding: 0 var(--space-6) 0 calc(var(--space-3) + 14px + var(--space-2));
    font-size: var(--fs-sm);
    color: var(--ed-text);
    letter-spacing: var(--ls-sm);
    background: var(--ed-bg-body);
    border: 1px solid var(--ed-neutral);
    transition: border-color .15s, box-shadow .15s;
}
.edhdr-search input:focus-visible {
    border-color: var(--ed-orange);
    box-shadow: 0 0 8px rgb(var(--ed-accent-rgb) / .4);
}
.edhdr-search-icon {
    position: absolute;
    left: var(--space-3);
    color: var(--ed-text-muted);
    transition: color .15s;
    pointer-events: none;
}
.edhdr-search:focus-within .edhdr-search-icon { color: var(--ed-orange); }
.edhdr-search-clear {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min-fine);
    padding: 0;
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: 1;
    color: var(--ed-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
}
.edhdr-search-clear:hover { color: var(--ed-orange); }

/* Anchored right and free to grow leftwards, so it can be wider than a squeezed box. The listbox scrolls, not the panel: options are never
   tab stops (focus stays in the input, aria-activedescendant), and a scroll container is only exempt from the "keyboard reachable" rule
   when it is the combobox popup itself. */
.edhdr-search-dropdown {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    z-index: 3;
    width: max(100%, 280px);
    max-width: calc(100vw - var(--space-4));
    background: var(--ed-bg-body);
    border: 1px solid rgb(var(--ed-accent-rgb) / .25);
    box-shadow: 0 8px 24px rgb(var(--ed-black-rgb) / .5);
}
.edhdr-search-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ed-orange), transparent);
    opacity: .5;
}
.edhdr-search-dropdown [role="listbox"] {
    max-height: 360px;
    overflow-y: auto;
}
.edhdr-search-result {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
    min-height: 2.25rem;
    padding: var(--space-2) var(--space-3);
    color: var(--ed-text);
    border-left: 2px solid transparent;
    transition: background .12s, border-color .12s, color .12s;
    cursor: pointer;
}
.edhdr-search-result:hover,
.edhdr-search-result.is-active {
    color: var(--ed-text-orange);
    background: rgb(var(--ed-accent-rgb) / .08);
    border-left-color: var(--ed-orange);
    text-shadow: none;
}
/* The highlight moves with the arrow keys (aria-activedescendant); the option never takes focus, so it draws its own ring. */
.edhdr-search-result.is-active { outline: 1px solid var(--ed-orange); outline-offset: -1px; }
.edhdr-search-result-dist {
    margin-left: auto;
    font-family: var(--ed-font-mono);
    font-size: var(--fs-2xs);
    color: var(--ed-orange);
    white-space: nowrap;
}
.edhdr-search-result + .edhdr-search-result {
    border-top: 1px solid rgb(var(--ed-accent-rgb) / .06);
}
.edhdr-search-result-name {
    min-width: 0;
    overflow: hidden;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--ls-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.edhdr-search-loading {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-md);
}
.edhdr-search-empty {
    padding: var(--space-3);
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
    text-align: center;
    letter-spacing: var(--ls-xs);
}

/* --- Tier 3: pledged power, territory, cycle --- */
.edhdr-tier3 {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    align-items: center;
    min-height: var(--edhdr-t3-h);
    padding: 0 var(--space-5);
    /* Power-color tint stacked on a solid base: the previous gradient faded to fully transparent
       past 55%, which let the page content bleed through the right half of the strip. */
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--power-color, var(--ed-orange)) 20%, transparent) 0%,
            color-mix(in srgb, var(--power-color, var(--ed-orange)) 4%, transparent) 30%,
            transparent 55%),
        linear-gradient(180deg, var(--ed-bg-body) 0%, var(--edhdr-tier3-bottom) 100%);
    border-top: 1px solid color-mix(in srgb, var(--power-color, var(--ed-orange)) 33%, transparent);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .18);
}
.edhdr-t3-ctx,
.edhdr-t3-territory,
.edhdr-cycle {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}
.edhdr-t3-ctx { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.edhdr-cycle { margin-left: auto; white-space: nowrap; }

/* The wrappers anchor the dropdowns to their own button. They (and the buttons in them) may shrink below their content, so a long system
   name is ellipsised rather than widening the page. */
.edhdr-power,
.edhdr-loc {
    display: flex;
    position: relative;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}
.edhdr-power-btn,
.edhdr-loc-btn { min-width: 0; max-width: 100%; }
.edhdr-power-name,
.edhdr-loc-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edhdr-power-btn {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    color: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
}
.edhdr-power-emblem {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: color-mix(in srgb, var(--power-color, var(--ed-orange)) 20%, transparent);
    border: 1px solid var(--power-color, var(--ed-orange));
    border-radius: 50%;
}
.edhdr-power-emblem img { filter: brightness(0) invert(1); }
.edhdr-power-label {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-2xl);
}
.edhdr-power-name {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--ls-md);
    /* The lifted variant of the identity colour: four powers are under 4.5:1 as plain text. */
    color: var(--power-text, var(--ed-orange));
    text-transform: uppercase;
}
.edhdr-chev {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-left: var(--space-0);
    color: var(--ed-text-muted);
    transition: transform .15s;
}
.edhdr-chev.open { transform: rotate(180deg); }

.edhdr-power-dropdown {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    z-index: 3;
    width: 240px;
    max-height: min(30rem, 70dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--ed-accent-rgb) / .3) transparent;
    background: var(--ed-bg-surface);
    border: 1px solid rgb(var(--ed-accent-rgb) / .25);
    box-shadow: 0 8px 32px rgb(var(--ed-black-rgb) / .6);
}
.edhdr-power-dropdown-header {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-xl);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .1);
}
.edhdr-power-dropdown-item {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    width: 100%;
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-xs);
    color: var(--ed-text-secondary);
    text-align: left;
    background: transparent;
    border: none;
    transition: background .15s, color .15s;
    cursor: pointer;
}
.edhdr-power-dropdown-item img {
    flex-shrink: 0;
    opacity: .55;
    filter: brightness(0) invert(1);
}
.edhdr-power-dropdown-item:hover {
    color: var(--ed-text);
    background: rgb(var(--ed-accent-rgb) / .1);
}
.edhdr-power-dropdown-item:hover img { opacity: .9; }
.edhdr-power-dropdown-item.active {
    color: var(--ed-orange);
    background: rgb(var(--ed-accent-rgb) / .14);
}
.edhdr-power-dropdown-item.active img { opacity: 1; }
.edhdr-power-dropdown-name { flex: 1; }
.edhdr-power-dropdown-check {
    flex-shrink: 0;
    margin-left: auto;
}
.edhdr-power-dropdown-sep {
    height: 1px;
    margin: var(--space-0) 0;
    background: rgb(var(--ed-accent-rgb) / .1);
}
.edhdr-power-dropdown-clear {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
}
.edhdr-power-dropdown-clear:hover {
    color: var(--ed-red-text);
    background: rgb(var(--ed-red-rgb) / .08);
}

.edhdr-divider {
    width: 1px;
    height: 18px;
    background: rgb(var(--ed-white-rgb) / .08);
}

/* --- Tier 3: current system (the origin of every distance) --- */
.edhdr-loc-btn {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-1) var(--space-2);
    color: inherit;
    white-space: nowrap;
    background: transparent;
    border: none;
    cursor: pointer;
}
.edhdr-loc-glyph {
    font-size: var(--fs-sm);
    line-height: 1;
    color: var(--ed-text-muted);
    transition: color .15s;
}
.edhdr-loc-btn.is-set .edhdr-loc-glyph { color: var(--ed-orange); }
.edhdr-loc-name {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-md);
}
.edhdr-loc-btn.is-set .edhdr-loc-name { color: var(--ed-text); }
.edhdr-loc-btn:hover .edhdr-loc-name { color: var(--ed-orange); }
.edhdr-loc-range {
    padding: 1px var(--space-1);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--ed-orange);
    letter-spacing: var(--ls-md);
    background: rgb(var(--ed-accent-rgb) / .12);
    border: 1px solid rgb(var(--ed-accent-rgb) / .3);
}

.edhdr-loc-dropdown {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    z-index: 3;
    width: 280px;
    padding-bottom: var(--space-1);
    background: var(--ed-bg-surface);
    border: 1px solid rgb(var(--ed-accent-rgb) / .25);
    box-shadow: 0 8px 32px rgb(var(--ed-black-rgb) / .6);
}

.edhdr-loc-search {
    display: flex;
    position: relative;
    align-items: center;
    margin: var(--space-3);
}
.edhdr-loc-search input {
    flex: 1;
    min-width: 0;
    padding: var(--space-1) var(--space-6) var(--space-1) calc(var(--space-2) + 1ch + var(--space-2));
    font-size: var(--fs-xs);
    color: var(--ed-text);
    background: rgb(var(--ed-black-rgb) / .35);
    border: 1px solid rgb(var(--ed-accent-rgb) / .2);
}
.edhdr-loc-search input:focus-visible { border-color: var(--ed-orange); }
.edhdr-loc-search-icon,
.edhdr-loc-spin {
    position: absolute;
    pointer-events: none;
}
.edhdr-loc-search-icon { left: var(--space-2); font-size: var(--fs-xs); color: var(--ed-text-muted); }
.edhdr-loc-spin {
    right: var(--space-2);
    font-size: var(--fs-2xs);
    color: var(--ed-orange);
    animation: edhdr-loc-spin .9s linear infinite;
}
@keyframes edhdr-loc-spin { to { transform: rotate(360deg); } }

.edhdr-loc-results { max-height: 220px; overflow-y: auto; scrollbar-width: thin; }
/* While a new query is pending the list is still the previous query's: dimmed (the markup also makes it inert). */
.edhdr-loc-results[aria-busy="true"] { opacity: .5; }
.edhdr-loc-result {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-xs);
    color: var(--ed-text-secondary);
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}
.edhdr-loc-result:hover,
.edhdr-loc-result.is-active {
    color: var(--ed-text);
    background: rgb(var(--ed-accent-rgb) / .1);
}
.edhdr-loc-result.is-active { outline: 1px solid var(--ed-orange); outline-offset: -1px; }
.edhdr-loc-result-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.edhdr-loc-current {
    display: flex;
    flex-direction: column;
    gap: var(--space-0);
    margin: var(--space-2) var(--space-3);
    padding: var(--space-1) var(--space-2);
    background: rgb(var(--ed-accent-rgb) / .07);
    border-left: 2px solid var(--ed-orange);
}
.edhdr-loc-current-name {
    font-size: var(--fs-xs);
    font-weight: 700;
}
.edhdr-loc-coords {
    font-family: var(--ed-font-mono);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
}

.edhdr-loc-hint {
    padding: 0 var(--space-3) var(--space-2);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ed-text-muted);
}
.edhdr-loc-ranges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
    padding: 0 var(--space-3) var(--space-2);
}
.edhdr-loc-range-chip {
    min-width: var(--tap-min-fine);
    padding: var(--space-0) var(--space-2);
    font-family: var(--ed-font-mono);
    font-size: var(--fs-2xs);
    color: var(--ed-text-secondary);
    background: rgb(var(--ed-white-rgb) / .04);
    border: 1px solid rgb(var(--ed-white-rgb) / .1);
    cursor: pointer;
}
.edhdr-loc-range-chip:hover { color: var(--ed-text); border-color: rgb(var(--ed-accent-rgb) / .4); }
.edhdr-loc-range-chip.is-active {
    color: var(--ed-orange);
    background: rgb(var(--ed-accent-rgb) / .16);
    border-color: var(--ed-orange);
}

.edhdr-territory-label {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-2xl);
}
.edhdr-territory-chips {
    display: flex;
    gap: var(--space-0);
    align-items: center;
}
.edhdr-territory-chip {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    min-height: var(--tap-min-fine);
    padding: var(--space-1) var(--space-2);
    color: inherit;
    border: none;
    border-right: 1px solid rgb(var(--ed-white-rgb) / .06);
}
.edhdr-territory-chip:last-child { border-right: none; }
.edhdr-territory-chip:hover { background: rgb(var(--ed-white-rgb) / .04); text-shadow: none; }
.edhdr-dot {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    background: var(--dot);
    border-radius: 50%;
    box-shadow: 0 0 4px color-mix(in srgb, var(--dot) 50%, transparent);
}
.edhdr-territory-key {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-2xl);
}
.edhdr-territory-count {
    font-family: var(--ed-font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ed-text);
    letter-spacing: var(--ls-sm);
}
.edhdr-territory-sep {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-2xl);
}
.edhdr-territory-total {
    font-family: var(--ed-font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--power-text, var(--ed-orange));
    letter-spacing: var(--ls-sm);
}

.edhdr-cycle-label {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-3xl);
}
.edhdr-cycle-time {
    font-family: var(--ed-font-mono);
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ed-text-orange);
    letter-spacing: var(--ls-sm);
    text-shadow: 0 0 8px rgb(var(--ed-accent-rgb) / .4);
}

/* Hit areas: the global :where() floor misses rows that set their own min-height and links, wrappers and chips.
   The ticker grows with them so nothing is clipped. */
@media (pointer: coarse) {
    .edhdr-ticker-toggle { width: var(--tap-min); }
    .edhdr-ticker-item { min-height: var(--tap-min); }
    .edhdr-nav-link,
    .edhdr-brand,
    .edhdr-territory-chip,
    .edhdr-search-result,
    .edhdr-power-dropdown-item,
    .edhdr-loc-result { min-height: var(--tap-min); }
    /* Five 44px rows end exactly on the cap, which hides that the list scrolls; half a row
       of the next one showing is the cue. */
    .edhdr-loc-results { max-height: calc(var(--tap-min) * 5.5); }
    .edhdr-search-clear,
    .edhdr-loc-range-chip { min-width: var(--tap-min); }
    .edhdr-search input { min-height: var(--tap-min); padding-right: var(--tap-min); }
    .edhdr-loc-search input { min-height: var(--tap-min); }
    .edhdr-search input,
    .edhdr-loc-search input { font-size: var(--fs-md); } /* under 16px, iOS zooms the page on focus */
}

/* --- Responsive ladder --- */

/* The steps are in em, so the one-row header must be in rem too, or it overflows at smaller text sizes (the search box spilled
   past the page edge). The space scale is re-stated in rem here; below this step the rows wrap and px stay. */
@media (width > 68.75em) {
    .edhdr {
        --space-0: .125rem;
        --space-1: .25rem;
        --space-2: .5rem;
        --space-3: .75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
    }
    .edhdr-brand-logo { width: 1.875rem; height: 1.875rem; }
    .edhdr-nav-link { padding-inline: .875rem; }
    .edhdr-nav-icon svg,
    .edhdr-search-icon { width: .875rem; height: .875rem; }
    .edhdr-search-container { flex-basis: 17.5rem; min-width: 10rem; }
    .edhdr-search input { padding-left: calc(var(--space-3) + .875rem + var(--space-2)); }
    .edhdr-search-dropdown { width: max(100%, 17.5rem); }
}

/* Captions return at 1700, not 1400: between the two, a pledged tier 3 (~1470px with the longest name) dropped the countdown to a second row. */
@media (width < 106.25em) {
    .edhdr-loc .edhdr-power-label,
    .edhdr-territory-label.is-lead { display: none; }
    .edhdr-territory-key,
    .edhdr-cycle-label { letter-spacing: var(--ls-lg); }
}

@media (width < 87.5em) {
    .edhdr-tier2 { gap: var(--space-4); }
    .edhdr-nav-icon { display: none; }
    .edhdr-nav-link { padding: 10px var(--space-2); letter-spacing: var(--ls-lg); }
    .edhdr-nav-link.active::after { right: var(--space-2); left: var(--space-2); }
}

@media (width < 80em) {
    .edhdr-t3-territory { display: none; }
}

/* Two-row tier 2 and a header that scrolls away: sticky would pin 150px+ of chrome here. The nav gets a row of its own, and scrolls sideways
   if its links outgrow it. The .edhdr prefix is deliberate: a later rule for the same element at equal specificity (the shared phone rules
   once set scroll-snap and 40px links here) would otherwise win by position. */
@media (width <= 68.75em) {
    .edhdr { position: static; }
    .edhdr-tier2 {
        flex-wrap: wrap;
        row-gap: var(--space-1);
        padding: var(--space-2) var(--space-5);
    }
    .edhdr-search-container { flex: 1 1 12rem; max-width: 28rem; }
    /* The scrollbar is hidden; interop.js scrolls the active/focused link into view and sets data-overflow so the fade shows only where cut off.
       No scroll-snap: it pulled a scripted position back and left the last tab half cut off. */
    .edhdr .edhdr-nav {
        order: 3;
        flex: 1 1 100%;
        min-width: 0;
        margin-left: 0;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .edhdr-nav::-webkit-scrollbar { display: none; }
    .edhdr-nav[data-overflow="end"] {
        -webkit-mask-image: linear-gradient(90deg, rgb(var(--ed-black-rgb)) calc(100% - 32px), transparent);
        mask-image: linear-gradient(90deg, rgb(var(--ed-black-rgb)) calc(100% - 32px), transparent);
    }
    .edhdr-nav[data-overflow="start"] {
        -webkit-mask-image: linear-gradient(90deg, transparent, rgb(var(--ed-black-rgb)) 32px);
        mask-image: linear-gradient(90deg, transparent, rgb(var(--ed-black-rgb)) 32px);
    }
    .edhdr-nav[data-overflow="both"] {
        -webkit-mask-image: linear-gradient(90deg, transparent, rgb(var(--ed-black-rgb)) 32px, rgb(var(--ed-black-rgb)) calc(100% - 32px), transparent);
        mask-image: linear-gradient(90deg, transparent, rgb(var(--ed-black-rgb)) 32px, rgb(var(--ed-black-rgb)) calc(100% - 32px), transparent);
    }
    .edhdr-nav-link { flex-shrink: 0; }
    /* overflow-y: hidden would clip the underline 1px below the link, and the focus ring outside it. */
    .edhdr-nav-link.active::after { bottom: 0; }
    .edhdr .edhdr-nav .edhdr-nav-link:focus-visible { outline-offset: -3px; }
    /* Dropdowns hang off the whole strip rather than their own button, so a button that has wrapped to the right-hand side cannot push its
       panel past the edge of the screen. */
    .edhdr-power,
    .edhdr-loc { position: static; }
    .edhdr-power-dropdown,
    .edhdr-loc-dropdown { left: var(--space-5); width: min(280px, calc(100vw - 2 * var(--space-5))); }
}

@media (width <= 56.25em) {
    .edhdr-ticker { display: none; }
}

@media (width <= 45em) {
    .edhdr .edhdr-tier2 { gap: var(--space-1); padding: var(--space-2) var(--space-3) 0; }
    /* At large text sizes the BETA tag wraps under the name instead of widening the page. */
    .edhdr .edhdr-brand { flex-wrap: wrap; max-width: 100%; min-height: var(--tap-min); }
    .edhdr .edhdr-search-container { flex-basis: 100%; max-width: none; }
    .edhdr .edhdr-nav { margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); }
    .edhdr .edhdr-nav-link { min-height: var(--tap-min); }

    .edhdr .edhdr-tier3 { gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); }
    .edhdr .edhdr-power-btn,
    .edhdr .edhdr-loc-btn { min-height: var(--tap-min); }
    .edhdr-divider { display: none; }
    .edhdr-t3-ctx { display: contents; }
    .edhdr-loc .edhdr-power-label { display: none; }
    .edhdr-cycle { gap: var(--space-2); }
    .edhdr-cycle-label { letter-spacing: var(--ls-md); }
    .edhdr-cycle-time { font-size: var(--fs-xs); }
    .edhdr-power-dropdown,
    .edhdr-loc-dropdown { right: var(--space-3); left: var(--space-3); width: auto; }
}
/* Narrow window with a mouse: the search field keeps a 40px floor (a coarse pointer gets 44px from the tap-target rule). */
@media (max-width: 37.5em) {
    .edhdr-search-container { order: 2; }
    .edhdr-search { min-height: 40px; }
}

.ed-spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid var(--ed-border);
    border-top-color: var(--ed-orange);
    border-radius: 50%;
    animation: ed-spin .8s linear infinite;
}

.ed-main {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.ed-content {
    flex: 1;
    width: 100%;
}

/* --- Route progress bar --- */
.nav-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--z-progress);
    height: 3px;
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
}

.nav-progress.active {
    opacity: 1;
}

.nav-progress-bar {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--ed-orange), var(--ed-text-orange), var(--ed-orange), transparent);
    box-shadow: 0 0 8px rgb(var(--ed-accent-rgb) / .6), 0 0 20px rgb(var(--ed-accent-rgb) / .3);
    animation: nav-progress-slide .8s ease-in-out infinite;
}

@keyframes nav-progress-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* --- Page entrance animation --- */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fade-in-up .3s ease-out both;
}

.fade-in-d1 {
    animation: fade-in-up .3s ease-out .05s both;
}

.fade-in-d2 {
    animation: fade-in-up .3s ease-out .1s both;
}

.fade-in-d3 {
    animation: fade-in-up .3s ease-out .15s both;
}

/* === SHARED COMPONENTS === */

.loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--ed-text-muted);
    text-align: center;
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-subtle);
}

.empty-state h4 {
    margin-bottom: 8px;
    color: var(--ed-text-secondary);
}

.empty-state p {
    margin: 0;
    color: var(--ed-text-muted);
}

.empty-state small {
    font-size: var(--fs-sm);
    color: var(--ed-text-muted);
}

.error-state {
    padding: 60px 20px;
    text-align: center;
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-subtle);
}

.error-state h4 {
    margin-bottom: 8px;
    color: var(--ed-text-secondary);
}

.error-state p {
    margin-bottom: 16px;
    color: var(--ed-text-muted);
}

.btn-retry {
    padding: 8px 16px;
    font-size: var(--fs-base);
    color: var(--ed-orange);
    background: transparent;
    border: 1px solid var(--ed-orange);
    cursor: pointer;
}

.btn-retry:hover {
    background: rgb(var(--ed-accent-rgb) / .1);
}

/* --- Panel --- */

.panel {
    display: flex;
    position: relative;
    flex-direction: column;
    overflow: hidden;
    background: var(--ed-bg-surface);
    border: 1px solid rgb(var(--ed-accent-rgb) / .15);
}

.panel::before,
.panel::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: 16px;
    height: 16px;
    border-style: solid;
    border-color: rgb(var(--ed-accent-rgb) / .3);
    border-width: 0;
    transition: all .25s;
}

.panel::before {
    top: -1px; left: -1px;
    border-top-width: 2px; border-left-width: 2px;
}

.panel::after {
    right: -1px; bottom: -1px;
    border-bottom-width: 2px; border-right-width: 2px;
}

.panel:hover::before,
.panel:hover::after {
    width: 22px;
    height: 22px;
    border-color: var(--ed-orange);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ed-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-sm);
    background: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .12) 0%, transparent 60%);
    border-bottom: 2px solid rgb(var(--ed-accent-rgb) / .2);
}

.panel-body {
    flex: 1;
    min-height: 0;
    padding: 16px;
}

.panel-body.no-pad {
    padding: 0;
}

/* --- Back link --- */

.back-link {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: var(--fs-sm);
    color: var(--ed-text-muted);
    transition: color .15s;
}

.back-link:hover { color: var(--ed-orange); }
.back-icon { font-size: var(--fs-md); }

/* --- Data table --- */

.ed-data-table {
    width: 100%;
    font-size: var(--fs-sm);
    border-spacing: 0;
}

.ed-data-table thead {
    background-color: var(--ed-bg-elevated);
    background-image: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .12) 0%, transparent 60%);
}

.ed-data-table th {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--ed-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-sm);
    box-shadow: inset 0 -2px 0 var(--ed-orange);
}

.ed-data-table td {
    color: var(--ed-text-secondary);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06);
}

.ed-data-table tbody tr {
    border-left: 2px solid transparent;
    transition: all .15s;
}

.ed-data-table tbody tr:hover {
    background: rgb(var(--ed-accent-rgb) / .08);
    border-left-color: var(--ed-orange);
}

.ed-data-table tbody tr:last-child td {
    border-bottom: none;
}

.page-intro {
    position: relative;
    margin: 0 0 28px;
    padding: 18px 22px 18px 24px;
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--ed-text-secondary);
    letter-spacing: var(--ls-xs);
    background:
        linear-gradient(135deg, rgb(var(--ed-accent-rgb) / .05) 0%, rgb(var(--ed-accent-rgb) / .015) 55%, transparent 100%),
        var(--ed-bg-surface);
    border: 1px solid rgb(var(--ed-accent-rgb) / .15);
    border-left: 3px solid var(--ed-orange);
}
.page-intro::before,
.page-intro::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-style: solid;
    border-color: rgb(var(--ed-accent-rgb) / .45);
    border-width: 0;
    pointer-events: none;
}
.page-intro::before {
    top: -1px; right: -1px;
    border-top-width: 2px; border-right-width: 2px;
}
.page-intro::after {
    right: -1px; bottom: -1px;
    border-bottom-width: 2px; border-right-width: 2px;
}
.page-intro strong {
    font-weight: 600;
    color: var(--ed-orange);
}

@media (max-width: 40em) {
    .page-intro {
        padding: 14px 16px 14px 18px;
    }
}

.clickable-row {
    cursor: pointer;
}

/* --- Power logos --- */

.power-logo {
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    filter: brightness(0) invert(1);
    transition: filter .15s;
    object-fit: contain;
}
.power-logo:hover {
    filter: brightness(0) invert(.7) sepia(1) saturate(5) hue-rotate(350deg);
}
.power-logo-sm { width: 16px; height: 16px; }

/* === DASHBOARD (/) === */
/* Also the cycle strip, stat tiles and movers that /powers and /powers/{id} borrow. Panel-width layouts use container queries; power colours on
   the dark surface are PowerColors.TextHex, passed in as --c. */

/* --- Cycle strip --- */

.cycle-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: center;
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--page-gutter);
    background: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .08), rgb(var(--ed-accent-rgb) / 0) 70%);
    border-bottom: 1px solid var(--ed-border);
}
.cycle-title-block { display: flex; flex-direction: column; gap: var(--space-1); min-width: 15rem; }
/* The long dashboard title may give way (and wrap) before the strip does; a short title (/powers) keeps its width. The basis is reset when stacked. */
.cycle-strip:has(> .trends) .cycle-title-block { flex: 3 1 20rem; max-width: 28rem; }
.cycle-strip .cycle-title {
    margin: 0;
    font-size: var(--h1-strip);
    font-weight: 700;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-md);
    text-shadow: none;
}
.cycle-tagline {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-xs);
}
.cycle-divider { color: var(--ed-border-subtle); }

.cycle-progress-block { flex: 1 1 18rem; min-width: 0; max-width: 460px; }
.cycle-progress-head {
    display: flex; flex-wrap: wrap; gap: var(--space-0) var(--space-2); align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}
.cycle-label {
    font-size: var(--fs-2xs); font-weight: 700;
    color: var(--ed-orange); text-transform: uppercase; letter-spacing: var(--ls-2xl);
    white-space: nowrap;
}
.cycle-reset {
    margin-left: auto;
    font-family: var(--ed-font-mono); font-size: var(--fs-xs);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-sm);
    white-space: nowrap;
}
.cycle-bar {
    position: relative; height: 4px;
    background: rgb(var(--ed-white-rgb) / .06);
    border: 1px solid var(--ed-border-subtle);
}
.cycle-bar-fill {
    height: 100%;
    background: var(--ed-orange);
    box-shadow: 0 0 8px var(--ed-orange-glow);
}
.cycle-bar-marker {
    position: absolute; top: -3px; bottom: -3px;
    width: 1px;
    background: var(--ed-text); opacity: .6;
}
.cycle-bar-labels {
    display: flex; justify-content: space-between;
    margin-top: var(--space-1); font-family: var(--ed-font-mono);
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
}

/* --- Galaxy trends --- */

.trends { display: flex; flex-direction: column; min-width: 0; }
.trends-label {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-2xs); line-height: var(--lh-snug);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-xl); }
.trends-body { display: flex; gap: var(--space-3); align-items: center; }
.trends-svg { display: block; flex: none; width: 180px; height: 48px; }
.trends-axis { stroke: var(--ed-border-subtle); stroke-width: .5; }
.trends-line { opacity: .55; fill: none; vector-effect: non-scaling-stroke; }
.trends-line-leader { opacity: 1; filter: drop-shadow(0 0 2px var(--c)); stroke-width: 1.5; }
.trends-unavailable { margin: 0; font-size: var(--fs-xs); font-style: italic; color: var(--ed-text-muted); }
.trends-legend {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: var(--space-0) var(--space-4);
    margin: 0; padding: 0; list-style: none;
}
.trends-legend-item {
    display: flex; gap: var(--space-1); align-items: center;
    font-size: var(--fs-xs); line-height: var(--lh-snug);
}
/* Only the swatch dims for the lines behind the leader; the name stays at full strength so it keeps its contrast. */
.trends-swatch { flex: none; width: 10px; height: 2px; background: var(--c); opacity: .55; }
.trends-legend-leader .trends-swatch { box-shadow: 0 0 3px var(--c); opacity: 1; }
.trends-name { min-width: 3.5rem; font-weight: 500; color: var(--c); }
.trends-legend-leader .trends-name { font-weight: 600; }
.trends-delta { font-family: var(--ed-font-mono); }
.trends-delta-up   { color: var(--ed-green); }
.trends-delta-down { color: var(--ed-red-text); }
.trends-delta-na   { color: var(--ed-text-muted); }

/* --- Stats row --- */

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 var(--page-gutter) var(--space-3);
}
.stat-box {
    position: relative;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-subtle);
}
.stat-box::before {
    content: '';
    position: absolute; top: 0; right: 0; left: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ed-orange), transparent);
    opacity: .45;
}
.stat-box-inner { display: flex; gap: var(--space-2); align-items: flex-end; justify-content: space-between; }
.stat-box-inner > * { min-width: 0; }
.stat-box-inner svg { max-width: 35%; }
.dash-spark { display: block; }
.stat-box .stat-label {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-2xs); line-height: var(--lh-snug);
    color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-sm);
}
.stat-box .stat-value {
    margin-bottom: var(--space-1);
    font-family: var(--ed-font-mono); font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-tight);
    text-shadow: 0 0 14px var(--ed-orange-glow);
}

/* --- Top movers --- */

.movers-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 var(--page-gutter) var(--space-3);
}
/* Title and rows wrap onto separate lines when the card is too narrow for both. Fixed flex bases make both cards wrap at the same width;
   a row never gets under 10.5rem. */
.movers-group {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
    align-items: center;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    background: rgb(var(--ed-surface-rgb) / .7);
    border: 1px solid var(--ed-border-subtle);
}
.movers-group-title {
    flex: 1 0 7.5rem; max-width: 11rem;
    margin: 0; font-size: var(--fs-2xs);
    line-height: var(--lh-snug); color: var(--ed-text-muted);
    letter-spacing: var(--ls-xl);
    text-wrap: balance; }
.movers-rows {
    display: grid; flex: 1 1 22rem;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--space-3) var(--space-4); min-width: 0;
}
.mover-row { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.mover-power-names { flex: 1; line-height: var(--lh-tight); }
.mover-shortname { font-size: var(--fs-sm); font-weight: 600; color: var(--c, var(--ed-text)); }
.mover-sub {
    font-family: var(--ed-font-mono); font-size: var(--fs-xs);
    color: var(--ed-text-muted);
    white-space: nowrap;
}
.mover-delta-big {
    font-family: var(--ed-font-mono);
    font-weight: 600;
    text-align: right;
}
.mover-delta-up   { color: var(--ed-green); }
.mover-delta-down { color: var(--ed-red-text); }
.mover-empty {
    grid-column: 1 / -1;
    padding: var(--space-1) 0;
    font-size: var(--fs-xs);
    font-style: italic;
    color: var(--ed-text-muted);
}

/* --- Priority split --- */

/* z-index lifts the picker list above the panels that follow. Columns are subgrids over two shared rows, so headers stay level when a hint wraps. */
.priority-split {
    display: grid; position: relative;
    z-index: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    gap: var(--space-3);
    margin: 0 var(--page-gutter) var(--space-3);
}
.ps-col {
    display: grid;
    grid-row: span 2;
    grid-template-rows: auto 1fr;
    grid-template-rows: subgrid;
    row-gap: 0;
    min-width: 0;
    background: rgb(var(--ed-surface-rgb) / .85);
    border: 1px solid var(--ed-border);
    border-top: 2px solid var(--ed-orange);
}
.ps-col-acquisition { border-top-color: var(--ed-cyan); }
.ps-col-defensive   { border-top-color: var(--ps-accent, var(--ed-text-muted)); }

.ps-col-header {
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: rgb(var(--ed-accent-rgb) / .06);
    border-bottom: 1px solid var(--ed-border);
}
.ps-col-acquisition .ps-col-header { background: rgb(var(--ed-cyan-rgb) / .06); }
.ps-col-defensive   .ps-col-header { background: color-mix(in srgb, var(--ps-accent, var(--ed-text-muted)) 10%, transparent); }

/* Accent chips sit on a solid underlay: stacked tints (chip over header) would drop the dimmer power colours under 4.5:1. */
.ps-side {
    padding: 1px var(--space-2); font-size: var(--fs-2xs); font-weight: 700;
    color: var(--ed-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-2xl);
    background: rgb(var(--ed-accent-rgb) / .15);
    border: 1px solid rgb(var(--ed-accent-rgb) / .4);
}
.ps-side-acquisition { color: var(--ed-cyan); background: rgb(var(--ed-cyan-rgb) / .15); border-color: rgb(var(--ed-cyan-rgb) / .4); }
.ps-side-defensive   { color: var(--ps-accent, var(--ed-text-muted)); background: linear-gradient(color-mix(in srgb, var(--ps-accent, var(--ed-text-muted)) 15%, transparent) 0 0) var(--ed-bg-surface); border-color: color-mix(in srgb, var(--ps-accent, var(--ed-text-muted)) 40%, transparent); }
.ps-side-muted       { color: var(--ed-text-muted); background: transparent; border-color: var(--ed-border-subtle); }

.ps-col-title { flex: 1 1 9rem; min-width: 0; line-height: var(--lh-snug); }
.ps-col-name {
    margin: 0;
    font-size: var(--fs-2xs); font-weight: 700;
}
.ps-col-hint { margin: 0; font-size: var(--fs-xs); font-style: italic; color: var(--ed-text-muted); }

.ps-order {
    display: flex;
    flex: none;
    margin-left: auto;
    border: 1px solid rgb(var(--ed-white-rgb) / .12);
}
.ps-order-btn {
    padding: var(--space-0) var(--space-2);
    font-family: var(--ed-font-mono);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-md);
    background: transparent;
    border: none;
    cursor: pointer;
}
.ps-order-btn:hover { color: var(--ed-text); }
.ps-order-btn[aria-pressed="true"] {
    color: var(--ed-orange);
    background: rgb(var(--ed-accent-rgb) / .16);
}

.ps-col-body { display: flex; flex-direction: column; container: ps / inline-size; }
.ps-empty-mini {
    padding: var(--space-5) var(--space-4);
    font-size: var(--fs-xs);
    color: var(--ed-text-muted); text-align: center;
}

.ps-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto .75rem;
    grid-template-areas: "left mid cell go";
    gap: var(--space-2); align-items: center;
    padding: var(--space-2) var(--space-3);
    color: inherit;
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06);
    transition: background .15s ease;
}
/* Rows that carry a distance get one more track; without the modifier the grid keeps its four,
   so a visitor who has not set a current system sees no empty column. */
.ps-row.has-dist {
    grid-template-areas: "left mid cell dist go";
    grid-template-columns: minmax(0, 1fr) auto auto auto .75rem;
}
.ps-row:hover { color: inherit; background: rgb(var(--ed-accent-rgb) / .08); text-shadow: none; }
.ps-row:hover .ps-go { color: var(--ed-orange); transform: translateX(2px); }
.priority-split .ps-col-body .ps-row:focus-visible { outline-offset: -2px; }
.ps-row-left { display: flex; flex-direction: column; grid-area: left; min-width: 0; line-height: var(--lh-snug); }
.ps-row-name {
    font-size: var(--fs-sm); font-weight: 600;
    overflow-wrap: anywhere;
}
.ps-row-meta {
    font-family: var(--ed-font-mono); font-size: var(--fs-xs);
    color: var(--ed-text-muted);
}
.ps-meta-warn { color: var(--ed-yellow); }
.ps-meta-bad  { color: var(--ed-red-text); }

.ps-row-mid { display: flex; flex-wrap: wrap; grid-area: mid; gap: var(--space-1); align-items: center; }
.ps-row-bar { display: flex; grid-area: cell; gap: var(--space-1); align-items: center; }
.ps-bar {
    position: relative; width: 3rem;
    height: 4px; overflow: hidden;
    background: rgb(var(--ed-white-rgb) / .1);
}
.ps-bar-fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: var(--ps-accent, var(--ed-orange));
    box-shadow: 0 0 4px var(--ps-accent, var(--ed-orange));
}
.ps-row-pct {
    min-width: 2.25rem; font-family: var(--ed-font-mono);
    font-size: var(--fs-xs);
    color: var(--ed-text-secondary); text-align: right;
}
.ps-row-gap {
    display: flex;
    grid-area: cell;
    gap: var(--space-1);
    align-items: baseline;
    justify-content: flex-end;
    min-width: 6.5rem;
    font-family: var(--ed-font-mono);
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-sm);
    white-space: nowrap;
}
.ps-row-gap .mono {
    font-weight: 600;
    color: var(--ed-text);
}
.ps-row-dist {
    grid-area: dist;
    min-width: 3.25rem;
    font-family: var(--ed-font-mono);
    font-size: var(--fs-xs);
    text-align: right;
    white-space: nowrap;
}
.ps-dist-near { color: var(--ed-green); }
.ps-dist-mid  { color: var(--ed-yellow); }
.ps-dist-far  { color: var(--ed-orange); }
.ps-dist-out  { color: var(--ed-red-text); }
.ps-dist-none { color: var(--ed-text-muted); }

.ps-go {
    display: inline-block;
    grid-area: go;
    font-family: var(--ed-font-mono);
    color: var(--ed-neutral);
    text-align: right;
    transition: all .15s ease;
}

.ps-kind {
    padding: 1px var(--space-1); font-size: var(--fs-2xs); font-weight: 700;
    letter-spacing: var(--ls-md);
}
.ps-kind-vul {
    color: var(--ed-yellow);
    background: rgb(var(--ed-yellow-rgb) / .08);
    border: 1px solid rgb(var(--ed-yellow-rgb) / .4);
}
.ps-kind-win {
    color: var(--ed-green);
    background: rgb(var(--ed-green-rgb) / .08);
    border: 1px solid rgb(var(--ed-green-rgb) / .4);
}
.ps-kind-lose {
    color: var(--ed-red-text);
    background: rgb(var(--ed-red-rgb) / .08);
    border: 1px solid rgb(var(--ed-red-rgb) / .4);
}

/* Narrow column: the system name gets its own line so it is never squeezed out by the chips. The selectors are prefixed to out-rank the shared
   phone rules at the end of the sheet. */
@container ps (max-width: 36rem) {
    .priority-split .ps-row {
        grid-template-areas: "left cell go" "mid mid mid";
        grid-template-columns: minmax(0, 1fr) auto .75rem;
        row-gap: var(--space-1);
    }
    .priority-split .ps-row.has-dist { grid-template-areas: "left cell go" "mid dist dist"; }
    .priority-split .ps-row-left { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-2); align-items: baseline; }
    .priority-split .ps-row-gap { min-width: 0; }
}

.ps-locked {
    display: flex; flex-direction: column;
    grid-column: span 2;
    grid-row: span 2;
    gap: var(--space-3);
    align-items: center;
    justify-content: center; min-width: 0;
    padding: var(--space-5) var(--space-6); text-align: center;
    background: rgb(var(--ed-surface-rgb) / .85); border: 1px solid var(--ed-border);
    border-top: 2px solid var(--ed-text-muted);
}
.ps-locked-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.ps-locked-icon {
    display: flex; align-items: center;
    justify-content: center;
    width: 2.5rem; height: 2.5rem; font-size: var(--fs-xl);
    color: var(--ed-text-muted); border: 1px solid var(--ed-border-subtle);
}
.ps-locked-title {
    margin: 0;
    font-size: var(--fs-base); font-weight: 600;
    text-transform: none;
}
.ps-locked-body {
    max-width: 60ch;
    margin: 0; font-size: var(--fs-sm);
    line-height: var(--lh-normal); color: var(--ed-text-muted);
}

.ps-picker { display: inline-flex; position: relative; flex: none; margin-left: auto; }
.ps-picker-center { margin-left: 0; }
.ps-picker-btn {
    display: inline-flex; gap: var(--space-2); align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-2xs); font-weight: 600;
    color: var(--ps-accent, var(--ed-orange)); text-transform: uppercase;
    letter-spacing: var(--ls-md);
    background: linear-gradient(color-mix(in srgb, var(--ps-accent, var(--ed-orange)) 15%, transparent) 0 0) var(--ed-bg-surface);
    border: 1px solid color-mix(in srgb, var(--ps-accent, var(--ed-orange)) 40%, transparent);
    cursor: pointer; }
.ps-picker-btn-lg { padding: var(--space-2) var(--space-4); }
.ps-picker-caret { margin-left: var(--space-0); }
.ps-picker-pop {
    position: absolute;
    top: calc(100% + var(--space-1)); right: 0;
    z-index: 20; min-width: 13.75rem; max-height: 20rem;
    overflow: auto;
    background: var(--ed-bg-elevated);
    border: 1px solid var(--ed-border);
    box-shadow: 0 8px 24px rgb(var(--ed-black-rgb) / .5);
}
.ps-picker-center .ps-picker-pop { right: auto; left: 50%; transform: translateX(-50%); }
.ps-picker-scrim { position: fixed; inset: 0; z-index: 10; }
.ps-picker-item {
    display: flex; gap: var(--space-2); align-items: center;
    width: 100%; padding: var(--space-2) var(--space-3);
    color: var(--ed-text); text-align: left; background: transparent;
    border: none; cursor: pointer;
}
.ps-picker-item:hover { background: var(--ed-bg-hover); }
/* Neutral fill with the identity colour on the edge: a tint of the power colour behind text in that colour put Archon under 4.5:1. */
.ps-picker-item.is-current { background: var(--ed-bg-hover); box-shadow: inset 3px 0 0 var(--c); }
.priority-split .ps-picker-pop .ps-picker-item:focus-visible { outline-offset: -2px; }
.ps-picker-name { color: var(--c, var(--ed-text)); }
.ps-picker-clear {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--ed-text-muted); text-transform: uppercase;
    letter-spacing: var(--ls-md); border-bottom: 1px solid var(--ed-border-subtle);
}

/* --- Powers overview table --- */

.composition-legend {
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
    font-size: var(--fs-2xs); color: var(--ed-text-muted);
    letter-spacing: var(--ls-md); }
.composition-legend span { display: inline-flex; gap: var(--space-1); align-items: center; }
.swatch { display: inline-block; width: 10px; height: 10px; }
.swatch-stronghold { background: var(--ed-state-stronghold); }
.swatch-fortified  { background: var(--ed-state-fortified); }
.swatch-exploited  { background: var(--ed-orange); }

.state-mix-bar {
    display: flex; width: 160px; max-width: 100%; height: var(--space-2);
    background: rgb(var(--ed-white-rgb) / .04);
}
.state-mix-stronghold { background: var(--ed-state-stronghold); }
.state-mix-fortified  { background: var(--ed-state-fortified); }
.state-mix-exploited  { background: var(--ed-orange); }
.state-mix-counts {
    display: flex; gap: var(--space-2); margin-top: var(--space-1);
    font-family: var(--ed-font-mono); font-size: var(--fs-xs);
    color: var(--ed-text-muted);
}

.cycle-delta-up   { color: var(--ed-green); }
.cycle-delta-down { color: var(--ed-red-text); }
/* A zero is neutral grey, not a faded green or red: a fade would fall under 4.5:1 for a figure the reader needs. */
.cycle-delta-up.cycle-delta-dim,
.cycle-delta-down.cycle-delta-dim { color: var(--ed-text-muted); }

.ov-scroll { position: relative; overflow-x: auto; container: ov / inline-size; }
.ov-table th, .ov-table td { padding: var(--space-2); }
.ov-table td.ov-power { padding: 0; }
.ov-table th { text-align: start; white-space: nowrap; }
.ov-table .text-end { text-align: end; }
.ov-table .power-cell { display: flex; gap: var(--space-2); align-items: center; padding-left: var(--space-2); white-space: nowrap; }
.ov-table .power-name { display: flex; flex: 1; align-items: center; min-height: var(--tap-min-fine); padding: var(--space-2) var(--space-2) var(--space-2) 0; }
.ov-sys, .ov-cp { font-variant-numeric: tabular-nums; }
.ov-delta { white-space: nowrap; }
.ov-delta > span + span { margin-left: var(--space-3); }
.ov-mix .state-mix-bar { width: 100%; min-width: 6rem; max-width: 10rem; }
.ov-na { color: var(--ed-text-muted); }
.ov-empty { padding: var(--space-5) var(--space-4); font-size: var(--fs-sm); color: var(--ed-text-muted); text-align: center; }

.ov-table tr.row-mine { background: color-mix(in srgb, var(--row-accent, var(--ed-orange)) 8%, transparent); }
.ov-table tr.row-mine > td:first-child { box-shadow: inset 3px 0 0 var(--row-accent, var(--ed-orange)); }
.ed-data-table tbody tr.row-updated { animation: row-highlight 2s ease-out; }

@container ov (max-width: 38rem) {
    .ov-table .ov-trend { display: none; }
}
/* One card per power. Switching table display off drops the table semantics, so the markup carries explicit roles; the header row stays for assistive tech but is clipped. */
@container ov (max-width: 31rem) {
    .ov-table, .ov-table tbody { display: block; }
    .ov-table thead {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0);
    }
    .ov-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "power sys delta" "mix trend cp";
        gap: var(--space-2) var(--space-3); align-items: center;
        padding: var(--space-3);
        border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06);
    }
    .ov-table tbody td { display: block; padding: 0; border: 0; }
    .ov-table tr.row-mine { border-left-color: var(--row-accent, var(--ed-orange)); }
    .ov-table tr.row-mine > td:first-child { box-shadow: none; }
    .ov-table .ov-trend { display: block; grid-area: trend; }
    .ov-power { grid-area: power; }
    .ov-sys   { grid-area: sys; }
    .ov-mix   { grid-area: mix; }
    .ov-cp    { grid-area: cp; }
    .ov-delta { grid-area: delta; }
    .ov-sys::after, .ov-cp::after { font-size: var(--fs-xs); color: var(--ed-text-muted); }
    .ov-sys::after { content: " systems"; }
    .ov-cp::after { content: " CP"; }
    .ov-table .power-cell { white-space: normal; }
    .ov-table tbody td.ov-empty { grid-column: 1 / -1; }
}
/* Large text or text spacing in a card this narrow (20rem follows the default font size): the cells wrap instead of sharing three columns, where the name ran into the system count. */
@container ov (max-width: 20rem) {
    .ov-table tbody tr { display: flex; flex-wrap: wrap; }
    .ov-power, .ov-mix, .ov-table tbody td.ov-empty { flex: 1 0 100%; }
    .ov-sys { order: 1; }
    .ov-delta { order: 2; margin-left: auto; }
    .ov-mix { order: 3; }
    .ov-table .ov-trend { order: 4; margin-right: auto; }
    .ov-cp { order: 5; margin-left: auto; }
    .ov-mix .state-mix-bar { min-width: 0; }
}

/* --- Live activity --- */

.panel-title { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.dashboard-grid .panel-header { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

.feed-filter { display: flex; gap: var(--space-1); }
.chip {
    padding: var(--space-1) var(--space-2); font-size: var(--fs-2xs); font-weight: 600;
    color: var(--ed-text-muted); text-transform: uppercase;
    letter-spacing: var(--ls-md);
    background: transparent;
    border: 1px solid var(--ed-border-subtle);
    cursor: pointer; }
.chip:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.chip[aria-pressed="true"] {
    color: var(--ed-orange);
    background: rgb(var(--ed-accent-rgb) / .18);
    border-color: var(--ed-orange);
}

.pulse-block {
    padding: var(--space-3) var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--ed-border-subtle);
}
.pulse-head {
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}
.pulse-label {
    margin: 0;
    font-size: var(--fs-2xs); line-height: var(--lh-snug);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-lg); }
.pulse-peak {
    font-family: var(--ed-font-mono); font-size: var(--fs-xs);
    color: var(--ed-orange);
}
.pulse-bars {
    display: flex; gap: var(--space-0); align-items: flex-end;
    height: 2.25rem;
}
.pulse-bar {
    flex: 1; min-height: 2px;
    background: rgb(var(--ed-accent-rgb) / .35);
}
.pulse-bar-recent {
    background: var(--ed-orange);
    box-shadow: 0 0 4px var(--ed-orange-glow);
}
.pulse-axis {
    display: flex; justify-content: space-between;
    margin-top: var(--space-1); font-family: var(--ed-font-mono);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
}
.pulse-unavailable { margin: 0; padding: var(--space-3) 0; font-size: var(--fs-xs); font-style: italic; color: var(--ed-text-muted); }

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-0);
    margin: 0;
    padding: var(--space-2);
    overflow-y: auto;
    container: feed / inline-size;
    list-style: none;
}
.activity-feed[data-held] { box-shadow: inset 0 2px 0 var(--ed-orange); }
.activity-feed-state { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.activity-feed-state .empty-state { flex: 1; background: transparent; border: 0; }
.activity-item {
    display: grid;
    grid-template-columns: 3.5rem 2.5rem minmax(0, 1fr) 5.75rem 5rem 5.5rem;
    grid-template-areas: "time type sys state power cp";
    gap: var(--space-2);
    align-items: center;
    min-height: var(--tap-min-fine);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    color: inherit;
    background: var(--ed-bg-elevated);
    border-left: 3px solid transparent;
    transition: border-left-color .2s ease;
}
.activity-item:hover { color: inherit; border-left-color: var(--ed-orange); text-shadow: none; }
.activity-mine {
    background: color-mix(in srgb, var(--row-accent, var(--ed-orange)) 10%, var(--ed-bg-elevated));
    border-left-color: var(--row-accent, var(--ed-orange));
}
.panel .activity-feed .activity-item:focus-visible { outline-offset: -2px; }

.activity-time {
    grid-area: time;
    font-family: var(--ed-font-mono);
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
}
.activity-type {
    grid-area: type;
    padding: var(--space-0) var(--space-2);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-align: center;
    letter-spacing: var(--ls-sm);
    background: linear-gradient(var(--tint), var(--tint)) var(--ed-bg-elevated);
}
.type-new    { --tint: rgb(var(--ed-green-rgb) / .18); color: var(--ed-green); }
.type-update { --tint: rgb(var(--ed-accent-rgb) / .18); color: var(--ed-text-orange); }
.activity-system { grid-area: sys; min-width: 0; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.activity-item:hover .activity-system { color: var(--ed-orange); }
.activity-item .badge-state { grid-area: state; justify-self: start; }
.activity-power {
    display: inline-flex;
    grid-area: power;
    gap: var(--space-1);
    align-items: center;
    justify-content: flex-end;
    font-size: var(--fs-xs);
    color: var(--ed-orange);
}
.activity-cp {
    grid-area: cp;
    font-size: var(--fs-xs);
    color: var(--ed-text-secondary);
    text-align: right;
    white-space: nowrap;
}
/* Half-width panel: the same one-line row on tracks sized to their widest content and a tighter gap, so rows stay one line
   (name column >= 10rem) and do not stretch the Powers Overview beside them. */
@container feed (max-width: 46rem) {
    .activity-item {
        column-gap: var(--space-1);
        grid-template-columns: 3.25rem 2.5rem minmax(0, 1fr) 5.75rem 4.5rem 5rem;
        padding-inline: var(--space-2);
    }
}
/* Phone-width panel: name and CP on the first line, the rest underneath. Flex with an explicit break (::after) so the second line wraps instead of colliding. */
@container feed (max-width: 31rem) {
    .activity-item { display: flex; flex-wrap: wrap; row-gap: var(--space-1); }
    .activity-item::after { content: ''; order: 2; flex-basis: 100%; }
    .activity-system { order: 1; flex: 1 1 8rem; }
    .activity-cp     { order: 1; margin-left: auto; }
    .activity-time, .activity-type, .activity-item .badge-state { order: 3; }
    .activity-power  { order: 3; margin-left: auto; }
}

@media (pointer: coarse) {
    .ps-row, .activity-item { min-height: var(--tap-min); }
    .ov-table .power-name { min-height: var(--tap-min); }
    .chip, .ps-order-btn { min-width: var(--tap-min); }
}

/* --- Dashboard grid --- */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 var(--page-gutter) var(--space-5);
}
.dashboard-grid > .panel { min-width: 0; }

.dash-error-title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-md);
    color: var(--ed-text-secondary);
    text-shadow: none;
}

/* Below ~1280px the strip wraps, and a divider would be stranded at the end of a line. */
@media (max-width: 80em) {
    .cycle-strip > .cycle-divider { display: none; }
}
/* Two panels side by side only while the half-width feed keeps single-line rows (~1150px); narrower, the taller feed left an empty band under the overview. */
@media (max-width: 71.875em) {
    .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 64em) {
    .cycle-strip:has(> .trends) .cycle-title-block { flex: none; max-width: none; }
    .cycle-title-block { min-width: 0; }
    .cycle-progress-block { flex: auto; width: 100%; max-width: none; }
    .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .priority-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .priority-split > .ps-col-defensive { grid-column: 1 / -1; }
    .priority-split > .ps-locked { grid-column: span 1; }
    .cycle-strip { flex-direction: column; gap: var(--space-4); align-items: stretch; }
}
@media (max-width: 45em) {
    .priority-split { grid-template-columns: minmax(0, 1fr); }
    .priority-split > .ps-col-defensive { grid-column: auto; }
    .movers-strip { grid-template-columns: minmax(0, 1fr); }
    .movers-group-title { flex: 1 1 100%; min-width: 0; }
    .movers-rows { column-gap: 22px; }
    .trends-body { flex-direction: column; align-items: stretch; }
    .trends-svg { width: 100%; }
    .trends-legend { column-gap: var(--space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .trends-name { min-width: 0; }
}
@media (max-width: 37.5em) {
    .cycle-strip { padding-block: 18px; }
    .cycle-progress-head { gap: var(--space-1) 10px; }
    .stats-row { gap: 10px; }
    .stat-box { padding: var(--space-3); }
    .stat-box .stat-value { font-size: var(--fs-xl); overflow-wrap: anywhere; }
    .stat-box-inner { flex-wrap: wrap; }
    .stat-box-inner svg { display: none; }
    .ed-content:has(.cycle-strip) .panel { overflow-x: auto; }
}

/* === SYSTEMS (/systems): page shell, filter rail, result card === */
/* Selectors are .sys- namespaced. */

/* --- Page shell --- */
.ed-content:has(.sys-page) {
    display: flex;
    flex-direction: column;
}
.sys-page {
    display: flex;
    flex: none;
    gap: var(--space-3);
    padding: 0 var(--page-gutter);
    color: var(--ed-text);
    background: var(--ed-bg-body);
}

/* --- Rail --- */
.sys-rail {
    --ctl-h: 28px;
    --ctl-h-lg: 36px;
    display: flex;
    position: relative;
    flex-direction: column;
    flex-shrink: 0;
    align-self: flex-start;
    width: 252px;
    background: var(--ed-bg-surface);
    border: 1px solid rgb(var(--ed-accent-rgb) / .15);
}

/* Bypass link for keyboard users: clipped until focused, then a bar across the top of the rail. It keeps its full size while hidden, so it is
   never a sub-minimum target (WCAG 2.5.8). */
.sys-skip:not(:focus) {
    position: absolute; width: 100%; padding: 0; overflow: hidden;
    white-space: nowrap; border: 0; clip-path: inset(50%);
}
.sys-skip:focus {
    display: block; width: 100%; padding: var(--space-2) var(--space-3);
    font-family: inherit; font-size: var(--fs-2xs); color: var(--ed-text-orange);
    text-align: center; text-transform: uppercase;
    letter-spacing: var(--ls-lg); background: var(--ed-bg-elevated); border: none; border-bottom: 1px solid var(--ed-border-subtle); cursor: pointer;
}

.sys-rail-head {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .12) 0%, transparent 60%);
    border-bottom: 2px solid rgb(var(--ed-accent-rgb) / .2);
}
.sys-rail-head-title {
    flex: 1;
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ed-orange);
}
.sys-rail-clearmini,
.sys-rail-toggle {
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-2xs);
    color: var(--ed-text-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
    background: rgb(var(--ed-accent-rgb) / .14);
    border: 1px solid rgb(var(--ed-accent-rgb) / .5);
    cursor: pointer;
}
.sys-rail-clearmini:hover,
.sys-rail-toggle:hover { background: rgb(var(--ed-accent-rgb) / .22); }
.sys-rail-toggle { display: none; }

.sys-rail-search {
    padding: var(--space-3);
    border-bottom: 1px solid var(--ed-border-subtle);
}
.sys-search-hint {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-1);
    font-family: var(--ed-font-mono);
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-sm);
}
.sys-search-hint kbd { font: inherit; }

.sys-rail-stack { flex: 1; min-height: 0; }

.sys-rail-foot {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgb(var(--ed-black-rgb) / .35);
    border-top: 1px solid rgb(var(--ed-accent-rgb) / .25);
}
.sys-rail-foot-btn {
    flex: 1;
    padding: var(--space-2);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-md);
    background: transparent;
    border: 1px solid var(--ed-border-subtle);
    transition: color .14s, border-color .14s, transform .14s;
    cursor: pointer;
}
.sys-rail-foot-btn:hover { color: var(--ed-orange); border-color: var(--ed-orange); transform: translateY(-1px); }
.sys-rail-foot-btn.primary {
    flex: 1.2;
    font-weight: 700;
    color: var(--ed-orange);
    background: rgb(var(--ed-accent-rgb) / .16);
    border-color: var(--ed-orange);
    box-shadow: 0 0 8px rgb(var(--ed-accent-rgb) / .4);
}
.sys-rail-foot-results { display: none; }

/* --- Rail accordion --- */
.sys-rail-section { border-bottom: 1px solid var(--ed-border-subtle); }
.sys-rail-section-title { margin: 0; }
.sys-rail-section-head {
    --focus-ring-offset: -2px;    /* full-width bar in a scrolling rail: an outset ring loses its edges to the scroller */
    display: flex;
    gap: var(--space-2);
    align-items: center;
    width: 100%;
    min-height: 2.5rem;
    padding: var(--space-3);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--ed-orange);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: var(--ls-2xl);
    background: transparent;
    border: none;
    cursor: pointer;
}
.sys-rail-section-head:hover { background: rgb(var(--ed-accent-rgb) / .06); }
/* Shared by the four filter rails (systems, vulnerable, cascade, mining): the 40px floor above would otherwise outrank the global touch floor. */
@media (pointer: coarse) { .sys-rail-section-head { min-height: var(--tap-min); } }
.sys-rail-section-chevron { flex-shrink: 0; min-width: 8px; color: var(--ed-text-muted); }
.sys-rail-section-head-l { flex: 1; letter-spacing: var(--ls-lg); }
.sys-rail-section-head-l.lit { color: var(--ed-text-orange); }
.sys-rail-section-count {
    padding: 1px 6px;
    font-family: var(--ed-font-mono);
    color: var(--ed-text-orange);
    background: rgb(var(--ed-accent-rgb) / .16);
    border: 1px solid rgb(var(--ed-accent-rgb) / .3);
}
/* Closed sections are not rendered: a clipped (max-height) body cut the faction suggestions off and capped long preset lists at 600px. */
.sys-rail-section-body { display: none; }
.sys-rail-section-body.open { display: block; }
.sys-rail-section-body-inner { padding: 0 var(--space-3) var(--space-3); }

/* --- Presets --- */
.sys-preset-list { display: flex; flex-direction: column; gap: var(--space-1); }
.sys-preset {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--ed-text-secondary);
    text-align: left;
    background: rgb(var(--ed-black-rgb) / .2);
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    transition: background-color .16s, border-color .16s;
}
.sys-preset:hover { background: rgb(var(--ed-accent-rgb) / .10); border-color: rgb(var(--ed-accent-rgb) / .4); }
.sys-preset.active {
    color: var(--ed-orange);
    background: rgb(var(--ed-accent-rgb) / .14);
    border-color: var(--ed-orange);
    border-left-color: var(--ed-orange);
    box-shadow: 0 0 10px rgb(var(--ed-accent-rgb) / .4);
}
.sys-preset-icon { width: 14px; font-size: var(--fs-2xs); color: var(--ed-text-muted); text-align: center; }
.sys-preset.active .sys-preset-icon { color: var(--ed-orange); }
.sys-preset-text { flex: 1; min-width: 0; line-height: var(--lh-tight); }
.sys-preset-name { font-weight: 600; overflow-wrap: anywhere; }
.sys-preset-hint { margin-top: var(--space-0); font-size: var(--fs-xs); font-style: italic; color: var(--ed-text-muted); }
.sys-preset-star { font-size: var(--fs-2xs); color: rgb(var(--ed-accent-rgb) / .6); }
.sys-preset.active .sys-preset-star { color: var(--ed-orange); }
.sys-preset-save {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-0);
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
    text-align: left;
    letter-spacing: var(--ls-sm);
    background: transparent;
    border: 1px dashed rgb(var(--ed-accent-rgb) / .3);
    transition: border-color .16s, color .16s;
    cursor: pointer;
}
.sys-preset-save:hover { color: var(--ed-orange); border-color: var(--ed-orange); }
.sys-preset-plus { color: var(--ed-orange); }

.sys-preset-main {
    display: flex;
    flex: 1;
    gap: var(--space-2);
    align-items: center;
    min-width: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* Rename and delete show on hover or focus, and always where there is no hover (touch). */
.sys-preset-actions { display: flex; gap: var(--space-1); opacity: 0; transition: opacity .14s; }
.sys-preset:hover .sys-preset-actions,
.sys-preset:focus-within .sys-preset-actions { opacity: 1; }
@media (hover: none) {
    .sys-preset-actions { opacity: 1; }
}
.sys-preset-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min-fine);
    height: var(--tap-min-fine);
    padding: 0;
    font-family: inherit;
    font-size: var(--fs-2xs);
    color: var(--ed-text-secondary);
    background: rgb(var(--ed-black-rgb) / .3);
    border: 1px solid var(--ed-border-subtle);
    transition: color .12s, border-color .12s;
    cursor: pointer;
}
.sys-preset-action:hover { color: var(--ed-orange); border-color: var(--ed-orange); }
.sys-preset-action.danger:hover { color: var(--ed-state-contested-text); border-color: var(--ed-state-contested); }

.sys-preset-edit {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background: rgb(var(--ed-accent-rgb) / .06);
    border: 1px solid rgb(var(--ed-accent-rgb) / .4);
    border-left: 3px solid var(--ed-orange);
}
.sys-preset-edit-input {
    flex: 1;
    min-width: 0;
    height: var(--tap-min-fine);
    padding: 0 var(--space-2);
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--ed-text);
    background: rgb(var(--ed-black-rgb) / .35);
    border: 1px solid var(--ed-border-subtle);
}
.sys-preset-edit-input:focus { border-color: var(--ed-orange); }
.sys-preset-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min-fine);
    height: var(--tap-min-fine);
    padding: 0;
    font-family: inherit;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--ed-text-secondary);
    background: rgb(var(--ed-black-rgb) / .3);
    border: 1px solid var(--ed-border-subtle);
    transition: color .12s, border-color .12s, box-shadow .12s;
    cursor: pointer;
}
.sys-preset-edit-btn.ok { color: var(--ed-orange); background: rgb(var(--ed-accent-rgb) / .18); border-color: var(--ed-orange); }
.sys-preset-edit-btn.ok:hover { box-shadow: 0 0 8px rgb(var(--ed-accent-rgb) / .4); }
.sys-preset-edit-btn.cancel:hover { color: var(--ed-state-contested-text); border-color: var(--ed-state-contested); }

/* --- Chips --- */
.sys-group-chip,
.sys-power-cell,
.sys-segment-cell,
.sys-state-chip {
    font-size: var(--fs-xs);
    background: rgb(var(--ed-black-rgb) / .25);
    border: 1px solid rgb(var(--ed-white-rgb) / .06);
    transition: background-color .14s, border-color .14s, color .14s, box-shadow .14s, transform .14s;
    cursor: pointer;
}
.sys-group-chip:hover,
.sys-power-cell:hover,
.sys-segment-cell:hover,
.sys-state-chip:hover { transform: translateY(-1px); }

/* --c is the identity colour (borders, tints); --ct is the same hue lifted to read as text (falls back to --c). */
.sys-group-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); }
.sys-group-chip {
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-md);
}
.sys-group-chip:hover { color: var(--ct, var(--c)); border-color: var(--c); }
.sys-group-chip.active {
    color: var(--ct, var(--c));
    background: color-mix(in srgb, var(--c) 13%, transparent);
    border-color: var(--c);
    box-shadow: 0 0 6px color-mix(in srgb, var(--c) 33%, transparent);
}

.sys-power-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
.sys-power-grid-dashed .sys-power-cell:not(.active) { border-style: dashed; }
/* A power list that failed to load says so in words rather than showing an empty grid. */
.sys-rail-note { margin: var(--space-1) 0 0; font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-muted); }
.sys-power-cell {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-weight: 500;
    color: var(--ed-text-secondary);
    text-align: left;
    border-left: 2px solid var(--c);
}
.sys-power-cell.active {
    color: var(--ct, var(--c));
    background: color-mix(in srgb, var(--c) 10%, transparent);
    border-color: var(--c);
    box-shadow: 0 0 6px color-mix(in srgb, var(--c) 25%, transparent);
}
.sys-power-cell-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sys-state-chips,
.sys-segment-grid-mono { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.sys-segment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
.sys-segment-cell {
    padding: var(--space-1) var(--space-2);
    font-weight: 600;
    color: var(--ed-text-secondary);
}
.sys-segment-cell.is-neg { --c: var(--ed-red-text); }
.sys-segment-cell.is-pos { --c: var(--ed-green); }
.sys-segment-cell.is-flat { --c: var(--ed-text-secondary); }
.sys-segment-cell.active {
    color: var(--ct, var(--c, var(--ed-orange)));
    background: color-mix(in srgb, var(--c, var(--ed-orange)) 13%, transparent);
    border-color: var(--c, var(--ed-orange));
    box-shadow: 0 0 6px color-mix(in srgb, var(--c, var(--ed-orange)) 33%, transparent);
}
.sys-segment-grid-mono .sys-segment-cell { font-family: var(--ed-font-mono); }

.sys-state-chip {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: baseline;
    align-content: center;
    padding: var(--space-1) var(--space-2);
    font-weight: 600;
    color: var(--ed-text-secondary);
    letter-spacing: var(--ls-sm);
}
.state-stronghold-chip { --c: var(--ed-state-stronghold); --ct: var(--ed-state-stronghold-text); }
.state-fortified-chip { --c: var(--ed-state-fortified); }
.state-exploited-chip { --c: var(--ed-state-exploited); }
.state-contested-chip { --c: var(--ed-state-contested); --ct: var(--ed-state-contested-text); }
.state-unoccupied-chip { --c: var(--ed-state-unoccupied); }
.sys-state-chip.active {
    color: var(--ct, var(--c));
    background: color-mix(in srgb, var(--c) 13%, transparent);
    border-color: var(--c);
    box-shadow: 0 0 6px color-mix(in srgb, var(--c) 33%, transparent);
}
.sys-state-chip-n { font-size: var(--fs-2xs); color: var(--ed-text-muted); }

/* --- Range fields --- */
.sys-range-row { display: flex; gap: var(--space-2); }
.sys-range-row-spaced { margin-top: var(--space-2); }
.sys-range-field { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sys-range-field label {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-xl);
}
.sys-range-field input {
    width: 100%;
    min-width: 0;
    height: var(--ctl-h);
    padding: 0 var(--space-2);
    font-family: var(--ed-font-mono);
    font-size: var(--fs-xs);
    color: var(--ed-text);
    background: rgb(var(--ed-black-rgb) / .35);
    border: 1px solid var(--ed-neutral);
    border-radius: 0;
}
.sys-range-field input:focus { border-color: var(--ed-orange); box-shadow: 0 0 8px rgb(var(--ed-accent-rgb) / .15); }

.sys-eyebrow {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-2xl);
}
.sys-eyebrow-spaced { margin-top: var(--space-2); }

.sys-origin-note {
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ed-text-muted);
}
.sys-origin-reset {
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--ed-orange);
    background: rgb(var(--ed-accent-rgb) / .1);
    border: 1px solid rgb(var(--ed-accent-rgb) / .3);
    cursor: pointer;
}
.sys-origin-reset:hover { background: rgb(var(--ed-accent-rgb) / .2); }

/* --- Search and faction input --- */
.sys-field { position: relative; }
.sys-search {
    display: flex;
    align-items: center;
    min-height: var(--ctl-h-lg);
    background: rgb(var(--ed-black-rgb) / .35);
    border: 1px solid var(--ed-neutral);
    transition: border-color .14s, box-shadow .14s;
}
.sys-search-small { min-height: var(--ctl-h); }
/* The field sits inside its box, so its ring is drawn inside it (negative offset) and the box adds the glow. */
.sys-search:focus-within { border-color: var(--ed-orange); box-shadow: 0 0 12px rgb(var(--ed-accent-rgb) / .4); }
.sys-rail .sys-search input:focus-visible { outline-offset: -2px; }
.sys-search-icon {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    width: var(--ctl-h-lg);
    color: var(--ed-text-muted);
    border-right: 1px solid var(--ed-border-subtle);
}
.sys-search-small .sys-search-icon { width: var(--ctl-h); }
.sys-search input {
    flex: 1;
    min-width: 0;
    padding: 0 var(--space-3);
    font-size: var(--fs-sm);
    color: var(--ed-text);
    background: transparent;
    border: none;
}
.sys-search-small input { font-size: var(--fs-xs); }
.sys-search-clear {
    width: var(--ctl-h);
    font-size: var(--fs-sm);
    color: var(--ed-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
}
.sys-search-clear:hover { color: var(--ed-orange); }
.sys-suggest {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    left: 0;
    z-index: 10;
    max-height: 240px;
    overflow-y: auto;
    background: var(--ed-bg-surface);
    border: 1px solid rgb(var(--ed-accent-rgb) / .25);
    box-shadow: 0 6px 16px rgb(var(--ed-black-rgb) / .45);
}
.sys-field-inline .sys-suggest { position: static; max-height: 12rem; margin-top: var(--space-1); box-shadow: none; }
.sys-suggest-item {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .05);
    cursor: pointer;
}
.sys-suggest-item:hover,
.sys-suggest-item.selected { color: var(--ed-orange); background: rgb(var(--ed-accent-rgb) / .10); }
/* Searching / no match / unavailable: said in words, never an empty list. */
.sys-suggest-note {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ed-text-muted);
}

/* --- Features --- */
.sys-feature-list { display: flex; flex-direction: column; gap: var(--space-1); }
.sys-feature {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--ed-text-secondary);
    text-align: left;
    background: rgb(var(--ed-black-rgb) / .2);
    border: 1px solid rgb(var(--ed-white-rgb) / .05);
    transition: background-color .14s, border-color .14s, color .14s;
    cursor: pointer;
}
.sys-feature:hover { background: rgb(var(--ed-accent-rgb) / .08); }
.sys-feature.active { color: var(--ed-orange); background: rgb(var(--ed-accent-rgb) / .10); border-color: rgb(var(--ed-accent-rgb) / .5); }
.sys-feature-check {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--space-4);
    height: var(--space-4);
    font-size: var(--fs-2xs);
    font-weight: 800;
    color: rgb(var(--ed-black-rgb));
    border: 1px solid var(--ed-neutral);
}
.sys-feature.active .sys-feature-check { background: var(--ed-orange); border-color: var(--ed-orange); }
.sys-feature-label { font-weight: 600; }
.sys-feature-sub { font-style: italic; color: var(--ed-text-muted); }
/* --- Main pane --- */
.sys-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-self: flex-start;
    min-width: 0;
    container: sysmain / inline-size;
}

.sys-mono-muted { font-family: var(--ed-font-mono); font-size: var(--fs-2xs); color: var(--ed-text-muted); }

.sys-active-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: rgb(var(--ed-accent-rgb) / .05);
    border: 1px solid rgb(var(--ed-accent-rgb) / .15);
    border-bottom: none;
}
.sys-active-label {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--ed-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-2xl);
}
.sys-active-pulse {
    width: 5px;
    height: 5px;
    background: var(--ed-orange);
    box-shadow: 0 0 6px rgb(var(--ed-accent-rgb) / .4);
    animation: sys-pulse 2s infinite;
}
@keyframes sys-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.sys-active-count {
    padding: 0 var(--space-1);
    font-family: var(--ed-font-mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: rgb(var(--ed-black-rgb));
    background: var(--ed-orange);
}
.sys-active-pills { display: flex; flex-wrap: wrap; flex: 1 1 20rem; gap: var(--space-1); min-width: 0; }
.sys-pill {
    display: inline-block;    /* not flex: an ellipsis needs a block container around the text */
    max-width: 100%;
    padding: var(--space-0) var(--space-2);
    overflow: hidden;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ct, var(--c, var(--ed-orange)));
    white-space: nowrap;
    text-overflow: ellipsis;
    background: color-mix(in srgb, var(--c, var(--ed-orange)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, var(--ed-orange)) 40%, transparent);
    transition: border-color .14s;
    cursor: pointer;
}
.sys-pill:hover { border-color: var(--c, var(--ed-orange)); }
.sys-pill-present { --c: var(--ed-blue); }
.sys-pill-neg { --c: var(--ed-red-text); }
.sys-pill-pos { --c: var(--ed-green); }
.sys-pill-flat { --c: var(--ed-text-secondary); }
.sys-pill-faction { --c: var(--ed-green); }
.sys-pill-x { font-size: var(--fs-2xs); line-height: 1; opacity: .7; }
.sys-clear-all {
    padding: var(--space-1) var(--space-3);
    font-family: inherit;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--ed-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
    background: transparent;
    border: 1px solid rgb(var(--ed-accent-rgb) / .35);
    transition: background-color .14s, box-shadow .14s;
    cursor: pointer;
}
.sys-clear-all:hover { background: rgb(var(--ed-accent-rgb) / .14); box-shadow: 0 0 8px rgb(var(--ed-accent-rgb) / .4); }

/* --- Result card --- */
/* The card holds RANK BY, header, rows and pager; it is also the target of the rail's "skip filters" button (focused from code, so no ring). */
.sys-table-wrap {
    position: relative;
    flex: 1;
    background: var(--ed-bg-surface);
    border: 1px solid rgb(var(--ed-accent-rgb) / .15);
    scroll-margin-top: var(--space-3);
}
.sys-table-wrap:focus-visible { outline: none; }
/* A reload keeps the old rows on screen, dimmed; the delay means a quick one never flickers. */
.sys-table-wrap [aria-busy="true"] { opacity: .5; transition: opacity .15s .15s; }
.sort-arrow { margin-left: 5px; color: var(--ed-neutral); }
.sort-arrow.active { color: var(--ed-orange); }
.sys-live-dot { width: 5px; height: 5px; background: var(--ed-green); border-radius: 50%; box-shadow: 0 0 4px var(--ed-green); opacity: .7; }

.sys-empty {
    padding: var(--space-7) var(--space-5);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--ed-text-muted);
    text-align: center;
}
.sys-empty-glyph { margin-bottom: var(--space-2); font-size: var(--fs-2xl); opacity: .4; }
.sys-empty > div:last-child { margin-top: var(--space-3); }
.sys-empty-btn {
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: var(--fs-2xs);
    color: var(--ed-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
    background: transparent;
    border: 1px solid var(--ed-orange);
    transition: background-color .14s;
    cursor: pointer;
}
.sys-empty-btn:hover { background: rgb(var(--ed-accent-rgb) / .12); }
.sys-error {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    background: rgb(var(--ed-yellow-rgb) / .1);
    border-left: 3px solid var(--ed-yellow);
}

.sys-pager {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-2xs);
    border-top: 1px solid var(--ed-border-subtle);
}
.sys-pager strong { color: var(--ed-text); }
.sys-pager-btns { display: flex; gap: var(--space-1); }
.sys-pager-btn {
    min-width: var(--tap-min-fine);
    padding: var(--space-1) var(--space-2);
    font-family: var(--ed-font-mono);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    background: transparent;
    border: 1px solid var(--ed-border-subtle);
    transition: color .12s, border-color .12s;
    cursor: pointer;
}
.sys-pager-btn:hover:not([aria-disabled="true"]) { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.sys-pager-btn.active { color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .16); border-color: rgb(var(--ed-accent-rgb) / .5); box-shadow: 0 0 8px rgb(var(--ed-accent-rgb) / .4); }
.sys-pager-btn[aria-disabled="true"] { opacity: .3; cursor: not-allowed; }

.power-logo-mask {
    display: inline-block; flex-shrink: 0;
    width: var(--pl-size); height: var(--pl-size);
    background-color: var(--pl-color);
    opacity: var(--pl-opacity, 1); -webkit-mask-image: var(--pl-url);
    mask-image: var(--pl-url); -webkit-mask-size: contain;
    mask-size: contain; -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat; -webkit-mask-position: center;
    mask-position: center;
}
/* === SYSTEM DETAIL (/systems/{id}) === */
/* Selectors are .sd- namespaced. .sd-mono, .sd-mute and .sd-error are shared with the boards and the power pages. */

.sdx-loading {
    display: flex; flex-direction: column; gap: var(--space-3); align-items: center;
    justify-content: center; min-height: 60vh; padding: var(--space-7) var(--space-5);
    font-size: var(--fs-sm); color: var(--ed-text-muted);
}
.sd-error {
    padding: 60px 28px;
    color: var(--ed-text-muted);
    text-align: center;
}

/* --- Hero (--accent and --state-color are set inline by SystemDetailHero.razor) --- */
.sd-hero {
    position: relative;
    background: var(--ed-bg-surface);
    border: 1px solid var(--accent, var(--ed-orange));
    box-shadow: inset 0 0 40px color-mix(in srgb, var(--accent, var(--ed-orange)) 5%, transparent);
}

.sd-hero-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--accent, var(--ed-orange));
    border-style: solid;
    border-width: 0;
}
.sd-tl { top: -1px; left:  -1px; border-top-width: 2px; border-left-width: 2px; }
.sd-tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.sd-bl { bottom: -1px; left:  -1px; border-bottom-width: 2px; border-left-width: 2px; }
.sd-br { right: -1px; bottom: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.sd-hero-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    padding: var(--space-4) var(--space-5) var(--space-3);
}
.sd-verdict {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--accent, var(--ed-orange));
    letter-spacing: var(--ls-xl);
}
.sd-hero-sep { color: var(--ed-neutral); }
.sd-verdict-detail { min-width: 0; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--ed-text-secondary); }
.sd-band-pill {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    align-items: center;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
    padding: var(--space-1) var(--space-3);
    background: rgb(var(--ed-body-rgb) / .6);
    border: 1px solid var(--ed-border-subtle);
}
.sd-band-state {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--state-text, var(--ed-state-fortified));
    text-transform: uppercase;
    letter-spacing: var(--ls-xl);
}
.sd-band-pct { font-family: var(--ed-font-mono); font-size: var(--fs-sm); }
.sd-band-cp { font-family: var(--ed-font-mono); font-size: var(--fs-xs); color: var(--ed-text-muted); }

/* --- Chart: the SVG holds only shapes (non-scaling strokes, stretched to the plot); labels are HTML laid over it, as SVG text shrank to 2-3px on a phone --- */
.sd-chart {
    --chart-h: 200px;
    display: grid;
    position: relative;
    column-gap: var(--space-2);
    grid-template-columns: 44px minmax(0, 1fr) var(--chart-end, 0);
    padding: 0 var(--space-4) 0 var(--space-3);
}
.sd-chart-conflict { --chart-end: 56px; }
.sd-chart-y,
.sd-chart-plot,
.sd-chart-end { position: relative; height: var(--chart-h); }
.sd-chart-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sd-chart-svg :is(line, polyline, path, rect) { vector-effect: non-scaling-stroke; }

.sd-chart-tick,
.sd-chart-tag,
.sd-chart-endlabel,
.sd-chart-now,
.sd-chart-xlabel {
    font-family: var(--ed-font-mono);
    font-size: var(--fs-2xs);
    line-height: 1;
    white-space: nowrap;
}
.sd-chart-tick { position: absolute; right: 0; color: var(--ed-text-muted); transform: translateY(-50%); }
.sd-chart-tick.is-goal { color: var(--ed-yellow); }
.sd-chart-tick.is-fail { color: var(--ed-red-text); }

.sd-chart-band-stronghold { fill: rgb(var(--ed-stronghold-rgb) / .10); }
.sd-chart-band-fortified  { fill: rgb(var(--ed-fortified-rgb) / .10); }
.sd-chart-band-exploited  { fill: rgb(var(--ed-accent-rgb) / .06); }
.sd-chart-band-failed     { fill: rgb(var(--ed-red-rgb) / .10); }
.sd-chart-grid { stroke: rgb(var(--ed-white-rgb) / .06); stroke-dasharray: 2 5; }
.sd-chart-grid.is-goal { stroke: rgb(var(--ed-yellow-rgb) / .45); stroke-dasharray: 4 3; }
.sd-chart-edge { stroke-dasharray: 3 3; }
.sd-chart-edge-exploited { stroke: rgb(var(--ed-accent-rgb) / .35); }
.sd-chart-edge-fortified { stroke: rgb(var(--ed-stronghold-rgb) / .35); }
.sd-chart-edge-failed { stroke: rgb(var(--ed-red-rgb) / .45); }
.sd-chart-area { fill: var(--ed-orange); fill-opacity: .18; }
.sd-chart-glow { opacity: .18; fill: none; stroke: var(--ed-orange); stroke-width: 6; }
.sd-chart-line { fill: none; stroke: var(--ed-orange); stroke-linejoin: round; stroke-width: 2.4; }
.sd-chart-now-line { stroke: var(--ed-orange); stroke-dasharray: 2 4; stroke-opacity: .35; }
.sd-chart-cursor { stroke: var(--ed-orange); stroke-dasharray: 3 3; stroke-opacity: .55; stroke-width: 1.2; }
.sd-chart-series { fill: none; stroke: var(--c); stroke-linejoin: round; stroke-width: 2.2; }
.sd-chart-hit rect { cursor: crosshair; fill: transparent; }

.sd-chart-tag {
    position: absolute; left: var(--space-2);
    padding: var(--space-0) var(--space-1);
    text-transform: uppercase; letter-spacing: var(--ls-lg);
    background: rgb(var(--ed-body-rgb) / .85);
    pointer-events: none;
}
.sd-chart-tag.is-stronghold { color: var(--ed-state-stronghold-text); }
.sd-chart-tag.is-fortified { color: var(--ed-state-fortified); }
.sd-chart-tag.is-exploited { color: var(--ed-text-orange); }
.sd-chart-tag.is-failed { color: var(--ed-red-text); }

.sd-chart-dot {
    position: absolute; width: 12px; height: 12px;
    background: var(--c, var(--ed-orange));
    border: 2px solid var(--ed-bg-body); border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.sd-chart-dot.is-hover {
    width: 14px; height: 14px; border-width: 4px;
    box-shadow: 0 0 0 2px var(--ed-orange);
}
.sd-chart-now {
    position: absolute; right: var(--space-3);
    display: flex; align-items: center; height: 22px; padding: 0 var(--space-2);
    font-size: var(--fs-xs); font-weight: 700;
    background: var(--ed-orange); color: var(--ed-bg-body);
    pointer-events: none;
    z-index: 1; /* above the hover dot, which sits on it at the right edge */
}
.sd-chart-endlabel {
    position: absolute; left: 0; font-weight: 700;
    color: var(--p-text); transform: translateY(-50%);
}
.sd-chart-x { position: relative; grid-column: 2; height: var(--fs-md); margin-top: var(--space-1); }
.sd-chart-xlabel { position: absolute; top: 0; color: var(--ed-text-muted); }
.sd-chart-xlabel.is-start { left: 0; }
.sd-chart-xlabel.is-mid { left: 50%; transform: translateX(-50%); }
.sd-chart-xlabel.is-end { right: 0; }
.sd-chart-note {
    display: flex; position: absolute; inset: 0; align-items: center; justify-content: center;
    padding: 0 var(--space-4); font-size: var(--fs-xs); line-height: var(--lh-snug);
    color: var(--ed-text-secondary); text-align: center; pointer-events: none;
}
.sd-chart-caption {
    grid-column: 2 / -1; margin: var(--space-1) 0 0;
    font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-muted);
}
.sd-chart-caption.is-alert { color: var(--ed-text-secondary); }

.sd-chart-tooltip {
    position: absolute;
    top: var(--space-2);
    z-index: 5;
    min-width: 150px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-2xs);
    color: var(--ed-text);
    background: linear-gradient(135deg, rgb(var(--ed-body-rgb) / .96) 0%, rgb(var(--ed-surface-rgb) / .96) 100%);
    border: 1px solid rgb(var(--ed-accent-rgb) / .55);
    border-left: 3px solid var(--ed-orange);
    box-shadow: 0 10px 22px rgb(var(--ed-black-rgb) / .55);
    transform: translateX(12px);
    animation: sdCttFade .10s ease-out;
    pointer-events: none;
}
.sd-chart-tooltip-right {
    border-left: 1px solid rgb(var(--ed-accent-rgb) / .55);
    border-right: 3px solid var(--ed-orange);
    transform: translateX(-12px) translateX(-100%);
}
@keyframes sdCttFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.sd-ctt-time {
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-md);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .18);
}
.sd-ctt-row {
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-0) 0;
}
.sd-ctt-k {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-md);
}
.sd-ctt-v { font-size: var(--fs-xs); font-weight: 700; }
.sd-ctt-state {
    margin-top: var(--space-1);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
}

.sd-cycle-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-5) var(--space-4);
    border-top: 1px solid var(--ed-border-subtle);
}
.sd-cycle-label {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-xl);
}
.sd-cycle-split { display: flex; flex: 1 1 240px; gap: var(--space-3); align-items: center; min-width: 0; }
.sd-cycle-r { font-family: var(--ed-font-mono); font-size: var(--fs-xs); color: var(--ed-green); white-space: nowrap; }
.sd-cycle-u { font-family: var(--ed-font-mono); font-size: var(--fs-xs); color: var(--ed-red-text); white-space: nowrap; }
.sd-cycle-bar {
    display: flex;
    flex: 1;
    min-width: 64px;
    height: var(--space-2);
    background: rgb(var(--ed-white-rgb) / .04);
}
.sd-cycle-bar-r { background: rgb(var(--ed-green-rgb) / .6); }
.sd-cycle-bar-u { background: rgb(var(--ed-red-rgb) / .65); }
.sd-cycle-net {
    display: flex; gap: var(--space-2); align-items: baseline;
    padding-left: var(--space-4); border-left: 1px solid var(--ed-border-subtle);
}
.sd-net-label { font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-lg); }
.sd-net-value { font-family: var(--ed-font-mono); color: var(--accent, var(--ed-orange)); }
@media (max-width: 35em) {
    .sd-cycle-net { order: 1; margin-left: auto; padding-left: 0; border-left: none; }
    .sd-cycle-split { order: 2; flex-basis: 100%; }
    .sd-hero-sep { display: none; }
}

.sd-hero-empty {
    margin: 0;
    padding: var(--space-3) var(--space-5) var(--space-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--ed-text-secondary);
    border-top: 1px solid var(--ed-border-subtle);
}

.sd-standing {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: rgb(var(--ed-body-rgb) / .6);
    border: 1px solid var(--ed-border-subtle);
    border-left: 2px solid var(--p-color);
}
.sd-cycle-row.sd-standings-row { gap: var(--space-2) var(--space-3); }
.sd-standing-rank { font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-lg); }
.sd-standing-name { font-size: var(--fs-xs); color: var(--ed-text); }
.sd-standing-pct  { font-family: var(--ed-font-mono); font-size: var(--fs-xs); color: var(--p-text); }

.sd-section-label {
    margin-bottom: var(--space-2);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
}
.sd-mono { font-family: var(--ed-font-mono); }
.sd-mute  { color: var(--ed-text-muted); }
.sd-text-orange-strong { font-weight: 600; color: var(--ed-orange); }
.sd-text-green         { color: var(--ed-green); }
.sd-text-red           { color: var(--ed-red-text); }
.sd-right { text-align: right; }

.sd-input {
    flex: 1; min-width: 160px;
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--ed-text);
    background: rgb(var(--ed-white-rgb) / .04);
    border: 1px solid var(--ed-neutral);
}
.sd-input:focus-visible { border-color: var(--ed-orange); }

/* --- Rail panels: presence, support chain, pilot activity and nearby share one shell, header, hint and empty state --- */
:is(.spx-panel, .ssx-panel, .spa-panel, .snx-panel) {
    min-width: 0;
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border);
}
:is(.spx-panel, .ssx-panel, .spa-panel, .snx-panel) > .panel-header {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
}
:is(.spx-panel, .ssx-panel, .spa-panel, .snx-panel) > .panel-header > h2 {
    margin: 0; font: inherit; color: inherit; letter-spacing: inherit;
}
:is(.spx-hint, .ssx-hint, .spa-hint, .snx-hint) {
    margin-left: auto; font-size: var(--fs-xs);
    color: var(--ed-text-muted); text-align: right;
    text-transform: none; letter-spacing: var(--ls-sm);
}
:is(.spx-empty, .ssx-empty, .spa-empty, .snx-empty) {
    padding: var(--space-5) var(--space-4); font-size: var(--fs-xs);
    line-height: var(--lh-snug); color: var(--ed-text-muted); text-align: center;
}
/* The lists, not the panels, are the containers: containment on the nearby panel would make the power menu's fixed click-catcher cover the panel instead of the page. */
:is(.ssx-list, .snx-list) { container: rail / inline-size; }
@media (min-width: 68.8125em) {
    :is(.ssx-list, .snx-list) { max-height: 22rem; overflow-y: auto; }
    :is(.ssx-head, .snx-head) { position: sticky; top: 0; z-index: 1; }
}

/* --- Nearby panel --- */
.sd-nearby-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .12);
}
.sd-filter-row {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.sd-filter-label {
    min-width: 50px;
    padding-top: var(--space-2);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
}
.sd-state-chips {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    gap: var(--space-1);
    min-width: 0;
}
.sd-state-chip,
.sd-state-chip-clear {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-sm);
    background: transparent;
    border: 1px solid rgb(var(--ed-white-rgb) / .06);
    cursor: pointer;
}
.sd-state-chip:hover,
.sd-state-chip-clear:hover { color: var(--ed-text); border-color: rgb(var(--ed-accent-rgb) / .5); }
.sd-state-chip-clear { font-size: var(--fs-xs); font-weight: 400; text-transform: none; }
.sd-state-chip-n {
    font-family: var(--ed-font-mono);
    font-weight: 500;
}
.sd-state-chip-on { background: rgb(var(--ed-accent-rgb) / .13); }
.sd-state-chip-on .sd-state-chip-n { color: inherit; }
.sd-state-chip-stronghold.sd-state-chip-on { color: var(--ed-state-stronghold-text); background: rgb(var(--ed-stronghold-rgb) / .13); border-color: var(--ed-state-stronghold); }
.sd-state-chip-fortified.sd-state-chip-on  { color: var(--ed-state-fortified); background: rgb(var(--ed-fortified-rgb) / .13); border-color: var(--ed-state-fortified); }
.sd-state-chip-exploited.sd-state-chip-on  { color: var(--ed-orange); background: rgb(var(--ed-accent-rgb) / .13); border-color: var(--ed-orange); }
.sd-state-chip-unoccupied.sd-state-chip-on { color: var(--ed-text-secondary); background: rgb(var(--ed-unoccupied-rgb) / .13); border-color: var(--ed-text-secondary); }
.sd-state-chip-contested.sd-state-chip-on  { color: var(--ed-state-contested-text); background: rgb(var(--ed-contested-rgb) / .13); border-color: var(--ed-state-contested); }

/* --- Activity log --- */
.sd-log-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    align-items: center;
    width: 100%;
    color: var(--ed-text);
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}
.sd-log-toggle:hover .sd-log-action { color: var(--ed-text-orange); }
.sd-log-caret {
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
    transition: transform .15s;
}
.sd-log-open .sd-log-caret { color: var(--ed-orange); transform: rotate(90deg); }
.sd-log-title {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--ed-orange);
    text-transform: uppercase;
}
.sd-log-count { font-size: var(--fs-xs); color: var(--ed-text-muted); }
.sd-log-action { margin-left: auto; font-size: var(--fs-xs); color: var(--ed-text-muted); }
.sd-log-body {
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-top: 1px solid rgb(var(--ed-accent-rgb) / .12);
}
.sd-log-empty { padding: var(--space-3) 0; font-size: var(--fs-xs); color: var(--ed-text-muted); }
.sd-log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-1);
    font-size: var(--fs-2xs);
}
.sd-log-meta .sd-section-label { margin-bottom: 0; }
.sd-log-scroll {
    max-height: 220px;
    overflow: auto;
    border: 1px solid rgb(var(--ed-white-rgb) / .05);
}
.sd-log-table th { padding: var(--space-1) var(--space-3); font-size: var(--fs-2xs); box-shadow: inset 0 -1px 0 rgb(var(--ed-accent-rgb) / .35); }
.sd-log-table td { padding: var(--space-1) var(--space-3); white-space: nowrap; }
.sd-log-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgb(var(--ed-surface-rgb) / .96);
    background-image: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .10) 0%, transparent 60%);
}

.sd-table {
    width: 100%;
    font-size: var(--fs-xs);
    border-collapse: collapse;
}
.sd-table th {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--ed-orange);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: var(--ls-md);
}
.sd-table td {
    padding: var(--space-2) var(--space-3);
    color: var(--ed-text-secondary);
    border-top: 1px solid rgb(var(--ed-white-rgb) / .06);
}
.sd-table th.sd-right, .sd-table td.sd-right { text-align: right; }

.sd-hero .sd-log {
    margin: 0 var(--space-4) var(--space-4);
    background: rgb(var(--ed-black-rgb) / .18);
    border: 1px solid rgb(var(--ed-accent-rgb) / .18);
}
.sd-hero .sd-log .sd-log-toggle { padding: var(--space-2) var(--space-3); }
.sd-hero .sd-log .sd-log-title { letter-spacing: var(--ls-lg); }

.sd-log-row { transition: background .10s, box-shadow .10s; }
.sd-log-row-hov {
    background: rgb(var(--ed-accent-rgb) / .14);
    box-shadow: inset 3px 0 0 var(--ed-orange);
}
.sd-log-row-hov td { color: var(--ed-text); }

/* --- Power dropdown --- */
.sd-pdd {
    position: relative;
    flex: 1;
    min-width: 0;
}
.sd-pdd-btn {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    color: var(--ed-text);
    text-align: left;
    letter-spacing: var(--ls-xs);
    background: rgb(var(--ed-white-rgb) / .04);
    border: 1px solid rgb(var(--ed-white-rgb) / .08);
    transition: border-color .12s, background .12s;
    cursor: pointer;
}
.sd-pdd-btn:hover {
    background: rgb(var(--ed-accent-rgb) / .06);
    border-color: rgb(var(--ed-accent-rgb) / .5);
}
.sd-pdd-open .sd-pdd-btn {
    background: rgb(var(--ed-accent-rgb) / .10);
    border-color: var(--ed-orange);
    box-shadow: 0 0 0 1px rgb(var(--ed-accent-rgb) / .25) inset;
}
.sd-pdd-btn-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-pdd-caret {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    transition: transform .15s, color .12s;
}
.sd-pdd-open .sd-pdd-caret {
    color: var(--ed-orange);
    transform: rotate(180deg);
}
.sd-pdd-glyph {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}
.sd-pdd-glyph-any {
    font-size: var(--fs-sm);
    line-height: 1;
    color: var(--ed-text-muted);
    letter-spacing: normal;
}
.sd-pdd-opt-on .sd-pdd-glyph-any,
.sd-pdd-btn:hover .sd-pdd-glyph-any { color: var(--ed-orange); }
.sd-pdd-swatch-empty {
    width: 12px;
    height: 12px;
    border: 1px dashed rgb(var(--ed-muted-rgb) / .5);
}

.sd-pdd-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
}
.sd-pdd-panel {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    left: 0;
    z-index: 100;
    max-height: 320px;
    overflow-y: auto;
    background: linear-gradient(135deg, rgb(var(--ed-surface-rgb) / .98) 0%, rgb(var(--ed-body-rgb) / .98) 100%);
    border: 1px solid rgb(var(--ed-accent-rgb) / .45);
    border-left-width: 3px;
    border-left-color: var(--ed-orange);
    box-shadow: 0 16px 36px rgb(var(--ed-black-rgb) / .55);
    animation: sdPddOpen .12s ease-out;
}
@keyframes sdPddOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sd-pdd-opt {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    color: var(--ed-text-secondary);
    text-align: left;
    letter-spacing: var(--ls-xs);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    transition: background .10s, color .10s, border-color .10s;
    cursor: pointer;
}
.sd-pdd-opt:hover {
    color: var(--ed-text);
    background: rgb(var(--ed-accent-rgb) / .08);
    border-left-color: rgb(var(--ed-accent-rgb) / .6);
}
.sd-pdd-opt-on {
    color: var(--ed-text);
    background: rgb(var(--ed-accent-rgb) / .14);
    border-left-color: var(--ed-orange);
}
.sd-pdd-opt-on .sd-pdd-opt-label {
    font-weight: 600;
    color: var(--ed-text-orange);
}
.sd-pdd-opt[style*="--p-color"]:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--p-color) 14%, transparent) 0%, transparent 70%);
    border-left-color: var(--p-color);
}
.sd-pdd-opt[style*="--p-color"].sd-pdd-opt-on {
    background: linear-gradient(90deg, color-mix(in srgb, var(--p-color) 22%, transparent) 0%, transparent 70%);
    border-left-color: var(--p-color);
}
.sd-pdd-opt[style*="--p-color"].sd-pdd-opt-on .sd-pdd-opt-label { color: var(--p-text); }
/* Wraps rather than ellipsises: in the narrow phone menu an ellipsis swallowed the PLEDGED tag along with the end of the name. */
.sd-pdd-opt-label {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    align-items: center;
    min-width: 0;
    line-height: var(--lh-snug);
    overflow-wrap: anywhere;
}
.sd-pdd-opt-tag {
    display: inline-block;
    padding: 1px var(--space-2);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--p-text);
    letter-spacing: var(--ls-lg);
    background: color-mix(in srgb, var(--p-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--p-color) 55%, transparent);
}
.sd-pdd-opt-n {
    flex-shrink: 0;
    min-width: 28px;
    padding: 1px var(--space-2);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-align: center;
    background: rgb(var(--ed-white-rgb) / .05);
}
.sd-pdd-opt-on .sd-pdd-opt-n {
    font-weight: 700;
    color: var(--ed-bg-body);
    background: var(--ed-orange);
}
/* The badge is dark text on a fill, so it takes the lifted text variant: Archon's raw colour (#990033) is 1.9:1 against it. */
.sd-pdd-opt[style*="--p-color"].sd-pdd-opt-on .sd-pdd-opt-n {
    color: var(--ed-bg-body);
    background: var(--p-text);
}
.sd-pdd-divider {
    height: 1px;
    margin: var(--space-1) 0;
    background: linear-gradient(90deg, transparent 0%, rgb(var(--ed-accent-rgb) / .18) 30%, rgb(var(--ed-accent-rgb) / .18) 70%, transparent 100%);
}

/* --- Market modal --- */

/* A native <dialog>: top layer, centred by the UA. Only [open] may set display, or it would show before showModal runs. */
.sd-modal { --edge: var(--space-5); }
.sd-modal::backdrop {
    background: rgb(var(--ed-black-rgb) / .72);
    backdrop-filter: blur(2px);
}
.sd-modal[open] {
    display: flex;
    flex-direction: column;
    width: min(1100px, calc(100% - 2 * var(--edge)));
    max-width: none;
    max-height: 86vh;
    padding: 0;
    overflow: visible;
    color: var(--ed-text);
    background: linear-gradient(135deg, rgb(var(--ed-surface-rgb) / .98) 0%, rgb(var(--ed-body-rgb) / .98) 100%);
    border: 1px solid rgb(var(--ed-accent-rgb) / .45);
    border-left: 3px solid var(--ed-orange);
    box-shadow: 0 24px 60px rgb(var(--ed-black-rgb) / .55);
}
/* If showModal() threw, the markup opens the dialog as a plain [open] box, which would sit in the page flow: pin it to the middle of the viewport, above the feedback tab. */
.sd-modal:not(:modal)[open] {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    height: fit-content;
    margin: auto;
}
.sd-modal::before,
.sd-modal::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--ed-orange);
    opacity: .85;
    pointer-events: none;
}
.sd-modal::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}
.sd-modal::after {
    right: -1px;
    bottom: -1px;
    border-left: none;
    border-top: none;
}
.sd-modal-head {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .18);
}
.sd-modal-title-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.sd-modal-eyebrow {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
}
.sd-modal-title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: var(--ls-xs);
    overflow-wrap: anywhere;
    text-shadow: 0 0 12px rgb(var(--ed-accent-rgb) / .3);
}
.sd-modal-meta {
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-sm);
}
.sd-modal-close {
    min-width: 32px;
    min-height: 32px;
    font-size: var(--fs-base);
    line-height: 1;
    color: var(--ed-text-secondary);
    background: transparent;
    border: 1px solid rgb(var(--ed-accent-rgb) / .25);
    cursor: pointer;
}
.sd-modal-close:hover {
    color: var(--ed-orange);
    background: rgb(var(--ed-accent-rgb) / .08);
    border-color: var(--ed-orange);
}
@media (pointer: coarse) {
    .sd-modal-close { min-width: var(--tap-min); min-height: var(--tap-min); }
}

.sd-modal-empty { padding: var(--space-5) var(--space-4); font-size: var(--fs-xs); color: var(--ed-text-muted); text-align: center; }

.sd-modal-filter {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgb(var(--ed-white-rgb) / .06);
}
.sd-modal-filter .sd-input {
    flex: 0 0 320px;
    min-width: 0;
}
.sd-modal-filter > span { font-size: var(--fs-xs); }
.sd-scroll-hint { display: none; margin-left: auto; font-size: var(--fs-xs); color: var(--ed-text-muted); }

.sd-modal-table-wrap {
    flex: 1;
    overflow: auto;
}

.sd-commodity-table {
    --ct-pad: var(--space-4);
    width: 100%;
    font-size: var(--fs-xs);
    border-spacing: 0;
}
.sd-commodity-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgb(var(--ed-surface-rgb) / .98);
    background-image: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .12) 0%, transparent 60%);
}
.sd-commodity-table th {
    padding: 0 var(--ct-pad);
    font-size: var(--fs-2xs);
    color: var(--ed-orange);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: var(--ls-md);
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 var(--ed-orange);
}
.sd-commodity-table th.sd-right { text-align: right; }
.sd-commodity-table thead th:hover { background: rgb(var(--ed-accent-rgb) / .10); }
.sd-sort-btn {
    --focus-ring-offset: -2px;
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    min-height: var(--tap-min-fine);
    padding: var(--space-2) 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    appearance: none;
}
@media (pointer: coarse) {
    .sd-sort-btn { min-width: var(--tap-min); min-height: var(--tap-min); padding-block: 0; }
    .sd-right .sd-sort-btn { justify-content: flex-end; }
}
.sd-commodity-table td,
.sd-commodity-table tbody th {
    padding: var(--space-2) var(--ct-pad);
    color: var(--ed-text-secondary);
    white-space: nowrap;
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06);
}
.sd-commodity-table tbody th {
    font-size: var(--fs-xs);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}
/* A row border does not render in the separate-borders model, so the hover bar is an inset shadow on the first cell. */
.sd-commodity-table tbody tr { transition: background .12s; }
.sd-commodity-table tbody tr:hover { background: rgb(var(--ed-accent-rgb) / .08); }
.sd-commodity-table tbody tr:hover > :first-child { box-shadow: inset 2px 0 0 var(--ed-orange); }
.sd-commodity-table tbody tr:last-child td,
.sd-commodity-table tbody tr:last-child th { border-bottom: none; }
.sd-ct-name { min-width: 180px; }
.sd-commodity-table th.sd-ct-name { position: sticky; left: 0; border-right: 1px solid var(--ed-border-subtle); }
.sd-commodity-table thead th.sd-ct-name { z-index: 2; background: var(--ed-bg-elevated); }
.sd-commodity-table tbody th.sd-ct-name { z-index: 1; background: var(--ed-bg-surface); }
.sd-commodity-table tbody tr:hover > th.sd-ct-name { background: color-mix(in srgb, var(--ed-orange) 8%, var(--ed-bg-surface)); }

@media (max-width: 45em) {
    .sd-modal { --edge: var(--space-3); }
    .sd-modal-filter { flex-wrap: wrap; }
    .sd-modal-filter .sd-input { flex: 1 0 100%; }
}
@media (max-width: 48em) {
    .market-page .filter-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .market-page .filter-input { flex: 1 0 100%; }
}
/* A phone cannot show all six columns: tighter cells and a right-edge fade as the "scrolls on" cue. A mask would clip the focus ring, so it lifts while the region has keyboard focus. */
@media (max-width: 37.5em) {
    .sd-scroll-hint { display: block; }
    :is(.sd-modal-table-wrap, .commodity-table-container):not(:focus-visible) {
        mask-image: linear-gradient(to right, rgb(var(--ed-black-rgb)) calc(100% - var(--space-5)), transparent);
    }
    .sd-commodity-table { --ct-pad: var(--space-3); }
    .sd-commodity-table :is(th, td):last-child { padding-right: var(--space-6); }
    .sd-ct-name { min-width: 0; }
    .sd-commodity-table tbody th.sd-ct-name { width: 8.5rem; white-space: normal; }
}
@media (max-height: 520px) {
    .sd-modal { --edge: var(--space-2); }
    .sd-modal[open] { max-height: calc(100% - 2 * var(--edge)); }
}

/* === POWERS (/powers) === */
/* The standings are a grid of divs with table roles: head and data rows share one column template, so cells line up. */

/* --- Shared by both power pages --- */
.pd-panel-title {
    margin: 0; font: inherit; color: inherit;
    letter-spacing: inherit; }
.pd-contents { display: contents; }

.pd-state-title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-md); color: var(--ed-text);
    letter-spacing: var(--ls-md); text-shadow: none;
}
.pd-state-actions {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    justify-content: center; margin-top: var(--space-4);
}
.pd-state-actions .ed-btn { min-height: var(--tap-min-fine); }
@media (pointer: coarse) {
    .pd-state-actions .ed-btn { min-height: var(--tap-min); }
}

.pd-sort__chip, .pdx-sort-chip {
    padding: var(--space-1) var(--space-2); font: inherit; font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-md); white-space: nowrap;
    background: transparent; border: 1px solid var(--ed-border-subtle);
    transition: background .15s, border-color .15s, color .15s;
    cursor: pointer;
}
.pd-sort__chip:hover, .pdx-sort-chip:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.pd-sort__chip.is-active, .pdx-sort-chip.is-active {
    color: var(--ed-text-orange);
    background: rgb(var(--ed-accent-rgb) / .16);
    border-color: var(--ed-border-bright);
}
@media (pointer: coarse) {
    .pd-sort__chip, .pdx-sort-chip { min-width: var(--tap-min); }
}

.pd-galaxy { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: flex-end; }
.pd-galaxy__label {
    margin-bottom: var(--space-1); font-size: var(--fs-2xs);
    color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl);
}
.pd-galaxy__figures {
    display: flex; gap: var(--space-2); align-items: baseline;
    font-family: var(--ed-font-mono);
}
.pd-galaxy__unit { font-size: var(--fs-2xs); color: var(--ed-text-muted); letter-spacing: var(--ls-lg); }
.pd-galaxy__deltas {
    display: flex; gap: var(--space-3);
    font-family: var(--ed-font-mono); }

.pd-stat-sub {
    margin-top: var(--space-1); font-family: var(--ed-font-mono); font-size: var(--fs-xs);
    line-height: var(--lh-snug); color: var(--ed-text-muted);
}

/* --- Page shell --- */
.pd-shell {
    display: grid;
    grid-template-columns: minmax(0, 2.35fr) minmax(320px, 1fr);
    gap: var(--space-3);
    align-items: start;
    margin: 0 var(--page-gutter);
}
/* Panels on a cycle-strip page scroll sideways on phones; their corner brackets overhang by 1px and made each a focusable-less scroll container, so clip instead. */
.ed-content:has(.cycle-strip) .pd-shell .panel { overflow-x: hidden; }
.pd-side { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.pd-shell .panel-header { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.pd-shell .pd-panel-title { white-space: nowrap; }
.pd-head-tools {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center;
    justify-content: flex-end;
}
.pd-head-hint {
    font-size: var(--fs-xs); color: var(--ed-text-muted);
    text-transform: none; letter-spacing: var(--ls-sm);
}
.pd-head-label {
    font-size: var(--fs-2xs); font-weight: 400;
    color: var(--ed-text-muted); letter-spacing: var(--ls-xl);
}

.pd-sort { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* --- Standings rows --- */
.pd-row {
    display: grid;
    column-gap: var(--space-3);
    grid-template-columns: 32px minmax(190px, 1.6fr) minmax(84px, .7fr) minmax(96px, .8fr)
                           minmax(150px, 1.2fr) minmax(92px, .8fr) minmax(132px, 1fr) 32px;
    align-items: center;
    padding: var(--space-2) var(--space-4);
}
.pd-row--head {
    align-items: end;
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--ed-orange);
    text-transform: uppercase; letter-spacing: var(--ls-md); background-color: var(--ed-bg-elevated);
    background-image: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .12) 0%, transparent 60%); border-left: 2px solid transparent;
    box-shadow: inset 0 -2px 0 var(--ed-orange);
}
.pd-row--data {
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06);
    border-left: 2px solid transparent;
    transition: background .15s, border-color .15s;
    cursor: pointer;
}
.pd-row--data:last-child { border-bottom: none; }
.pd-row--data:hover { background: rgb(var(--ed-accent-rgb) / .08); border-left-color: var(--ed-orange); }
.pd-row--data.is-selected {
    background: rgb(var(--ed-accent-rgb) / .07);
    border-left-color: var(--row-accent, var(--ed-orange));
}

.pd-rank {
    font-size: var(--fs-xs); color: var(--ed-text-muted);
}
.pd-rank--lead { color: var(--ed-text-orange); }

.pd-power { display: flex; gap: var(--space-3); align-items: center; min-width: 0; }
.pd-power__names { min-width: 0; }
/* Names wrap rather than ellipsise: "Arissa Lavigny-Duval" is the longest and must stay readable. */
.pd-power__names .pd-power__select { display: block; max-width: none; overflow: visible; text-overflow: clip; white-space: normal; }
.pd-power__name { display: block; font-size: var(--fs-sm); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.pd-power__tag {
    display: block; font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-lg);
}
.pd-power .power-logo { width: 24px; height: 24px; }
.pd-row--data:hover .power-logo {
    filter: brightness(0) invert(.7) sepia(1) saturate(5) hue-rotate(350deg);
}
.pd-pledge-tag {
    margin-left: var(--space-2); padding: 0 var(--space-1);
    color: var(--ed-text-orange);
    letter-spacing: var(--ls-md); border: 1px solid var(--ed-border-bright);
}

.pd-num {
    font-size: var(--fs-base);
    font-variant-numeric: tabular-nums; color: var(--ed-text);
}
.pd-num--sm { font-size: var(--fs-xs); }
.pd-cap { display: none; }

.pd-trend { display: flex; justify-content: center; }
.pd-comp .state-mix-bar { width: 100%; }
/* A swatch ahead of each count, so the three numbers are matched to the legend by colour as well as order. */
.pd-comp .state-mix-counts { font-variant-numeric: tabular-nums; }
.pd-comp .state-mix-counts span::before {
    content: ''; display: inline-block; width: 6px; height: 6px; margin-right: var(--space-1);
    background: var(--ed-state-stronghold);
}
.pd-comp .state-mix-counts span:nth-child(2)::before { background: var(--ed-state-fortified); }
.pd-comp .state-mix-counts span:nth-child(3)::before { background: var(--ed-state-exploited); }

.pd-cell--open { display: flex; align-self: stretch; }
.pd-open {
    display: flex; flex: 1; align-items: center; justify-content: center;
    min-height: var(--tap-min-fine);
    font-size: var(--fs-lg); line-height: 1; color: var(--ed-text-muted);
}
.pd-open:hover, .pd-row--data:hover .pd-open { color: var(--ed-text-orange); text-shadow: none; }
@media (pointer: coarse) {
    .pd-open { min-width: var(--tap-min); min-height: var(--tap-min); }
}

/* --- Reinforce / undermine flow --- */
.pd-flow { display: flex; gap: var(--space-0); align-items: center; justify-content: flex-end; height: 12px; }
.pd-flow__side { width: 50%; }
.pd-flow__side--left { display: flex; justify-content: flex-end; }
.pd-flow__axis { width: 1px; height: 12px; background: var(--ed-border-subtle); }
.pd-flow__bar { height: 6px; }
.pd-flow__bar--um   { background: rgb(var(--ed-red-rgb) / .85); }
.pd-flow__bar--rein { background: rgb(var(--ed-green-rgb) / .60); }
.pd-cell--flow .pd-num { margin-top: var(--space-0); }

/* --- Dossier panel --- */
.pd-dossier__head { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.pd-dossier__logo { width: 52px; height: 52px; }
.pd-dossier__name {
    margin: 0; font-size: var(--fs-lg); line-height: var(--lh-snug);
}
.pd-dossier__sub {
    margin-top: var(--space-1); font-size: var(--fs-2xs);
    color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-lg);
}

.pd-facts {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    margin-bottom: var(--space-4);
    background: var(--ed-border-subtle);
    border: 1px solid var(--ed-border-subtle);
}
.pd-fact { padding: var(--space-3); background: var(--ed-bg-surface); }
.pd-fact__label {
    margin-bottom: var(--space-1); font-size: var(--fs-2xs); line-height: var(--lh-snug);
    color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl);
}
.pd-standings-note {
    max-width: 75ch;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--ed-text-muted);
}
.pd-head-qual {
    display: block;
    font-weight: 400;
    color: var(--ed-text-muted);
}

.pd-fact__value {
    font-family: var(--ed-font-mono); font-variant-numeric: tabular-nums;
    color: var(--ed-text);
}

.pd-side__label {
    margin-bottom: var(--space-2); font-size: var(--fs-2xs);
    color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl);
}
.pd-mix { margin-bottom: var(--space-4); }
.pd-mix .state-mix-bar { width: 100%; margin-bottom: var(--space-2); }
.pd-mix__legend {
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
    font-size: var(--fs-xs); color: var(--ed-text-secondary);
}
.pd-mix__legend > span { display: inline-flex; gap: var(--space-1); align-items: center; }
.pd-mix__count { margin-left: var(--space-1); font-family: var(--ed-font-mono); font-variant-numeric: tabular-nums; color: var(--ed-text); }

.pd-press { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.pd-press__head {
    display: flex; justify-content: space-between;
    margin-bottom: var(--space-1); font-family: var(--ed-font-mono);
    font-size: var(--fs-xs); color: var(--ed-text-muted);
}
.pd-press__track { height: 6px; background: rgb(var(--ed-white-rgb) / .05); }
.pd-press__fill { height: 100%; opacity: .75; }
.pd-press__fill--rein { background: var(--ed-green); }
.pd-press__fill--um   { background: var(--ed-red); }

.pd-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pd-btn {
    display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: var(--tap-min-fine);
    padding: var(--space-2) var(--space-3); font: inherit;
    font-size: var(--fs-2xs); color: var(--ed-text-muted); text-align: center; text-transform: uppercase;
    letter-spacing: var(--ls-xl); background: transparent;
    border: 1px solid var(--ed-border-subtle); transition: background .15s, border-color .15s, color .15s;
    cursor: pointer;
}
.pd-btn:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.pd-btn--primary { color: var(--ed-text-orange); border-color: var(--ed-border-bright); }
.pd-btn--primary:hover { background: rgb(var(--ed-accent-rgb) / .12); text-shadow: none; }
.pd-btn.is-active {
    color: var(--ed-text-orange);
    background: rgb(var(--ed-accent-rgb) / .16);
    border-color: var(--ed-border-bright);
}
@media (pointer: coarse) {
    .pd-btn { min-height: var(--tap-min); }
}

/* --- Galaxy share --- */
.pd-share__bar {
    display: flex; height: 14px; margin-bottom: var(--space-3);
    background: rgb(var(--ed-white-rgb) / .04);
}
.pd-share__seg.is-dim { opacity: .62; }
.pd-share__legend { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-4); }
.pd-share__item {
    display: flex; gap: var(--space-2); align-items: center;
    padding-left: var(--space-1); font-size: var(--fs-xs);
    color: var(--ed-text-secondary); border-left: 2px solid transparent;
}
/* The selected power gets a rail as well as brighter text, so it is not marked by colour alone. */
.pd-share__item.is-selected { color: var(--ed-text); border-left-color: var(--ed-orange); }
.pd-share__swatch { flex-shrink: 0; width: 8px; height: 8px; }
.pd-share__name {
    flex: 1; min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pd-share__pct { font-family: var(--ed-font-mono); font-variant-numeric: tabular-nums; color: var(--ed-text-muted); }

/* --- Responsive --- */
@media (max-width: 87.5em) {
    .pd-shell { grid-template-columns: minmax(0, 1fr); }
    .pd-side  { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 61.25em) {
    .pd-row { grid-template-columns: 32px minmax(160px, 1.5fr) minmax(84px, .8fr) minmax(92px, .9fr) minmax(132px, 1.1fr) 32px; }
    .pd-trend, .pd-cell--comp { display: none; }
}
@media (max-width: 45em) {
    .pd-side { grid-template-columns: minmax(0, 1fr); }

    .pd-shell .pd-row {
        column-gap: var(--space-2);
        grid-template-areas:
            "rank power power power open"
            ".    sys   cp    flow  flow";
        grid-template-columns: 28px minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) var(--tap-min);
        row-gap: var(--space-1);
        align-items: start;
        padding: var(--space-2) var(--space-3) var(--space-3) var(--space-2);
    }
    .pd-shell .pd-row--head { display: none; }
    .pd-row--data > .pd-rank { grid-area: rank; align-self: start; padding-top: var(--space-1); }
    .pd-row--data > .pd-power { grid-area: power; align-self: center; }
    .pd-row--data > .pd-cell--sys  { grid-area: sys; }
    .pd-row--data > .pd-cell--cp   { grid-area: cp; }
    .pd-row--data > .pd-cell--flow { grid-area: flow; }
    .pd-row--data > .pd-cell--open { grid-area: open; align-self: center; }
    .pd-cap {
        display: block; margin-bottom: var(--space-0);
        font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--ed-text-muted);
        text-transform: uppercase; letter-spacing: var(--ls-md);
    }
    .pd-row .pd-cell { min-width: 0; text-align: left; }
    .pd-row .pd-cell .text-end { text-align: left; }
    .pd-cell--flow .pd-flow { justify-content: center; }
    .pd-head-tools { flex: 1 1 100%; justify-content: flex-start; }
    .pd-shell > .panel { min-width: 0; }
    .pd-shell .panel-header, .pd-head-tools { gap: var(--space-2); }
}
@media (max-width: 22.5em) {
    .pd-shell .pd-row {
        grid-template-areas:
            "rank power power power open"
            ".    sys   sys   cp    cp"
            ".    flow  flow  flow  flow";
        grid-template-columns: 28px repeat(3, minmax(0, 1fr)) var(--tap-min);
    }
}
@media (max-width: 30em) {
    .pd-sort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .pd-sort .pd-head-label { grid-column: 1 / -1; }
}

/* === POWER DETAIL (/powers/{id}) === */
/* --pc is the power's identity colour (fills, swatches); --pc-text is its lifted twin for anything that is read. */

.pdx-page { padding-bottom: var(--space-6); }

/* --- Identity strip --- */
.pdx-identity {
    position: relative;
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--page-gutter) var(--space-4);
    overflow: hidden;
    background: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .08), rgb(var(--ed-accent-rgb) / 0) 70%);
    border-bottom: 1px solid var(--ed-border);
}
/* The power's emblem, large and faint, cropped by the strip: a background (not an <img>), so its own box clips it and it adds no overflow. */
.pdx-identity::before {
    content: ''; position: absolute; inset: 0; background: var(--wm) no-repeat right -40px top -70px / 300px 300px;
    opacity: .05;
    filter: brightness(0) invert(1); pointer-events: none;
}
.pdx-id-row { display: flex; position: relative; gap: var(--space-5); align-items: center; }
.pdx-id-block { display: flex; gap: var(--space-4); align-items: center; min-width: 0; }
.pdx-id-text { min-width: 0; }
.pdx-logo { width: 72px; height: 72px; }

.pdx-back {
    display: inline-flex; position: relative; align-items: center;
    min-height: var(--tap-min-fine);
    font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase;
    letter-spacing: var(--ls-2xl);
}
.pdx-back:hover { color: var(--ed-text-orange); text-shadow: none; }
@media (pointer: coarse) {
    .pdx-back { min-height: var(--tap-min); }
}

.pdx-name-line { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: baseline; }
.pdx-name {
    margin: 0; font-size: var(--h1-strip); font-weight: 700; line-height: var(--lh-tight);
    color: var(--pc-text, var(--ed-text)); letter-spacing: var(--ls-md);
    text-shadow: none;
}
.pdx-short { font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl); }
.pdx-rank {
    padding: var(--space-0) var(--space-2); font-size: var(--fs-2xs); color: var(--rank-color, var(--ed-orange));
    letter-spacing: var(--ls-lg); border: 1px solid var(--rank-color, var(--ed-orange));
}
.pdx-rank.is-top { --rank-color: var(--ed-green); }
.pdx-rank.is-mid { --rank-color: var(--ed-yellow); }
.pdx-rank.is-low { --rank-color: var(--ed-red-text); }
.pdx-rank:not(.is-top):not(.is-mid):not(.is-low) { --rank-color: var(--ed-text-muted); }
.pdx-verdict-line { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; margin-top: var(--space-2); font-size: var(--fs-2xs); }
.pdx-verdict { font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-2xl); }
.pdx-verdict-sub { font-family: var(--ed-font-mono); font-size: var(--fs-xs); color: var(--ed-text-muted); }

.pdx-live { min-width: 210px; }
.pdx-live-head { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.pdx-live-dot {
    width: 7px; height: 7px; background: var(--ed-green);
    border-radius: 50%; box-shadow: 0 0 6px var(--ed-green);
    animation: pdx-blink 2s infinite;
}
.pdx-live-dot.is-quiet { background: var(--ed-yellow); box-shadow: 0 0 6px rgb(var(--ed-yellow-rgb) / .45); animation: none; }
.pdx-live-dot.is-dim { background: var(--ed-text-muted); box-shadow: none; animation: none; }
@keyframes pdx-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.pdx-live-label { font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-2xl); }
.pdx-live-row {
    display: flex; gap: var(--space-3); justify-content: space-between; margin-bottom: var(--space-0);
    font-family: var(--ed-font-mono); font-size: var(--fs-xs); color: var(--ed-text-muted);
}
.pdx-live-val { color: var(--ed-text); }
.pdx-live-spark { display: flex; gap: var(--space-0); align-items: flex-end; height: 26px; margin-top: var(--space-1); }
.pdx-live-bar { flex: 1; min-height: 2px; background: rgb(var(--ed-accent-rgb) / .35); }
.pdx-live-bar.is-now { background: var(--ed-orange); box-shadow: 0 0 4px var(--ed-orange-glow); }

/* --- Stat tiles --- */
.pdx-tiles {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3); margin: 0 var(--page-gutter) var(--space-3);
}
.pdx-tile { padding: var(--space-2) var(--space-3); }
@media (max-width: 37.5em) { .pdx-tile { padding: var(--space-3); } }
.pdx-tile::before {
    content: ''; position: absolute; top: 0; right: 0; left: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent, var(--ed-orange)), transparent);
    opacity: .55;
}
.pdx-tile--orange { --accent: var(--ed-orange); }
.pdx-tile--green  { --accent: var(--ed-green); }
.pdx-tile--red    { --accent: var(--ed-red); --accent-text: var(--ed-red-text); }
.pdx-tile-value {
    font-family: var(--ed-font-mono); font-size: var(--fs-2xl); font-weight: 300;
    line-height: 1;
    color: var(--accent-text, var(--accent, var(--ed-orange)));
}
.pdx-tile-sub {
    margin-top: var(--space-1); font-family: var(--ed-font-mono); font-size: var(--fs-xs);
    line-height: var(--lh-snug); color: var(--ed-text-muted);
}

/* --- Pressure strip --- */
.pdx-pressure-strip {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3); margin: 0 var(--page-gutter) var(--space-3);
}
.pdx-pressure-card {
    display: grid;
    column-gap: var(--space-3);
    grid-template-areas: "label value" "system value";
    grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-1); align-items: center;
    padding: var(--space-2) var(--space-3);
    color: var(--ed-text);
    background: rgb(var(--ed-surface-rgb) / .7);
    border: 1px solid var(--ed-border-subtle);
    border-left: 2px solid var(--accent, var(--ed-orange));
    transition: background .15s;
}
a.pdx-pressure-card:hover { color: var(--ed-text); background: rgb(var(--ed-accent-rgb) / .08); text-shadow: none; }
.pdx-pressure-card--red    { --accent: var(--ed-red); --accent-text: var(--ed-red-text); }
.pdx-pressure-card--yellow { --accent: var(--ed-yellow); }
.pdx-pressure-card--green  { --accent: var(--ed-green); }
.pdx-pressure-label {
    grid-area: label;
    font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-xl);
}
.pdx-pressure-system {
    display: flex; flex-wrap: wrap;
    grid-area: system; gap: var(--space-1) var(--space-2); align-items: center; min-width: 0;
}
.pdx-pressure-name { font-size: var(--fs-base); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.pdx-pressure-empty { grid-area: system; font-size: var(--fs-sm); color: var(--ed-text-muted); }
.pdx-pressure-value { grid-area: value; text-align: right; }
.pdx-pressure-num {
    display: block; font-family: var(--ed-font-mono);
    font-weight: 600; color: var(--accent-text, var(--accent, var(--ed-orange)));
}
.pdx-pressure-unit {
    font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-md);
}

/* --- Shell --- */
.pdx-shell {
    display: grid;
    grid-template-columns: minmax(0, 2.35fr) minmax(340px, 1fr);
    gap: var(--space-3); align-items: start; margin: 0 var(--page-gutter);
}
.pdx-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.pdx-page .panel-header { flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.pdx-head-hint {
    font-size: var(--fs-xs); color: var(--ed-text-muted);
    text-transform: none; letter-spacing: var(--ls-sm);
}

/* --- Trend chart --- */
.pdx-chart-legend {
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: center;
    font-size: var(--fs-xs); color: var(--ed-text-muted);
    text-transform: none; letter-spacing: var(--ls-md);
}
.pdx-chart-legend > span { display: flex; gap: var(--space-2); align-items: center; }
.pdx-line { width: 14px; height: 2px; }
.pdx-line.pc { background: var(--pc-text, var(--ed-blue)); }
.pdx-line.orange { height: 0; border-top: 2px dashed var(--ed-orange); }
.pdx-chart-now { font-weight: 700; color: var(--pc-text, var(--ed-text)); }

.pdx-chart { display: grid; grid-template-columns: 46px minmax(0, 1fr); padding: var(--space-3) var(--space-4) var(--space-2); }
.pdx-chart-yaxis {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
    height: 190px; padding: var(--space-0) var(--space-2) var(--space-0) 0;
    font-family: var(--ed-font-mono); font-size: var(--fs-2xs);
    line-height: 1; color: var(--ed-text-muted);
}
.pdx-chart-plot { position: relative; height: 190px; }
.pdx-chart-svg { display: block; width: 100%; height: 100%; }
.pdx-chart-svg * { vector-effect: non-scaling-stroke; }
.pdx-chart-grid { stroke: rgb(var(--ed-white-rgb) / .06); stroke-dasharray: 2 6; }
.pdx-chart-area { fill: var(--pc, var(--ed-blue)); fill-opacity: .14; }
.pdx-chart-line { fill: none; stroke: var(--pc-text, var(--ed-blue)); stroke-width: 2.4; }
.pdx-chart-cp { opacity: .8; fill: none; stroke: var(--ed-orange); stroke-dasharray: 4 3; stroke-width: 1.6; }
/* An element, not an SVG circle: the plot's non-uniform scale would squash a circle. */
.pdx-chart-dot {
    position: absolute; right: 0; width: 10px; height: 10px; margin: -5px -5px 0 0;
    background: var(--pc-text, var(--ed-blue)); border: 2px solid var(--ed-bg-body);
    border-radius: 50%; }
.pdx-chart-xaxis {
    display: flex; justify-content: space-between; margin-top: var(--space-2);
    font-family: var(--ed-font-mono); font-size: var(--fs-2xs); color: var(--ed-text-muted);
}

/* --- Target board --- */
/* Five toggle buttons are wider than a phone, so the strip scrolls inside itself; the buttons are focusable, so the scroller is keyboard-reachable. */
.pdx-tabs {
    display: flex; align-items: stretch;
    overflow-x: auto; scrollbar-width: none;
    background: rgb(var(--ed-body-rgb) / .5);
    border-bottom: 1px solid var(--ed-border-subtle);
}
.pdx-tabs::-webkit-scrollbar { display: none; }
/* Below ~910px the tabs overflow with the scrollbar hidden, so the right edge fades ("more this way"); the fade drops while a tab has the keyboard ring. */
@media (max-width: 57.5em) {
    .pdx-tabs:not(:has(:focus-visible)) {
        -webkit-mask-image: linear-gradient(90deg, rgb(var(--ed-white-rgb)) calc(100% - var(--space-4)), transparent);
        mask-image: linear-gradient(90deg, rgb(var(--ed-white-rgb)) calc(100% - var(--space-4)), transparent);
    }
}
.pdx-tab {
    display: flex; flex: 0 0 auto; gap: var(--space-2); align-items: center;
    padding: var(--space-3) var(--space-4); font: inherit; font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg); white-space: nowrap;
    background: transparent; border: 0;
    border-bottom: 2px solid transparent; transition: color .15s, background .15s;
    cursor: pointer;
}
.pdx-tab:hover { color: var(--ed-text-orange); }
.pdx-tab.is-active {
    color: var(--ed-text-orange);
    background: rgb(var(--ed-accent-rgb) / .16);
    border-bottom-color: var(--ed-orange);
}
.pdx-tab-count {
    padding: var(--space-0) var(--space-2); font-family: var(--ed-font-mono); color: var(--ed-text-muted); background: rgb(var(--ed-white-rgb) / .05);
}
.pdx-tab.is-active .pdx-tab-count { color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .16); }
/* The strip clips everything outside the tab's box, so the global outset ring would lose its edges: draw it inside the tab. */
.pdx-page .pdx-tabs .pdx-tab:focus-visible { outline-offset: calc(var(--focus-ring-offset) * -1); }

.pdx-toolbar {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center;
    padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--ed-border-subtle);
}
.pdx-filter {
    flex: 0 1 220px; min-width: 0; padding: var(--space-1) var(--space-3);
    font: inherit; font-size: var(--fs-sm);
    color: var(--ed-text); background: var(--ed-bg-input);
    border: 1px solid var(--ed-neutral);
}
.pdx-filter:focus { border-color: var(--ed-orange); box-shadow: 0 0 10px var(--ed-orange-glow); }
.pdx-toolbar-label {
    font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-xl);
}
.pdx-sort { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pdx-toolbar-count { margin-left: auto; text-align: right; }

.pdx-board-row {
    --pdx-hit: var(--tap-min-fine);
    display: grid;
    grid-template-columns: 30px minmax(160px, 1.25fr) 176px minmax(210px, 1.5fr) 130px 16px;
    gap: 0 var(--space-3); align-items: center; padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06);
    border-left: 2px solid transparent;
    transition: background .15s;
}
/* The chevron is drawn, not marked up; the second content declaration gives it empty alt text where supported, so it says nothing to a screen reader. */
.pdx-board-row:not(.pdx-board-row--head)::after {
    content: '\203A'; content: '\203A' / '';
    color: var(--ed-text-muted); text-align: right;
}
.pdx-board-row:hover { background: rgb(var(--ed-accent-rgb) / .08); }
.pdx-board-row.is-alert { border-left-color: var(--ed-red); }
.pdx-board-row--head {
    padding-top: var(--space-2); padding-bottom: var(--space-2); font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--ed-orange);
    text-transform: uppercase; letter-spacing: var(--ls-md); background-color: var(--ed-bg-elevated);
    background-image: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .12) 0%, transparent 60%); box-shadow: inset 0 -2px 0 var(--ed-orange); cursor: default;
}
.pdx-board-row--head:hover { background-color: var(--ed-bg-elevated); }
.pdx-cap { display: none; }

.pdx-idx { font-size: var(--fs-xs); color: var(--ed-text-muted); }
.pdx-idx.is-alert { color: var(--ed-text-orange); }

.pdx-sys { min-width: 0; }
.pdx-sys-name { font-size: var(--fs-base); line-height: var(--lh-snug); overflow-wrap: anywhere; }
/* The link is the row's primary control, so it is floored like the territory-history names. Its spare height already separates it from the chips,
   so the chip row's margin shrinks, the ring is drawn inside the box, and side padding is pulled back out by the margin. */
.pdx-sys-name .row-link {
    display: inline-flex; align-items: center; min-width: var(--pdx-hit); min-height: var(--pdx-hit);
    margin-inline: calc(var(--space-1) * -1); padding-inline: var(--space-1);
}
.pdx-page .pdx-sys-name .row-link:focus-visible { outline-offset: calc(var(--space-0) * -1); }
.pdx-sys-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; margin-top: var(--space-0); font-size: var(--fs-xs); }
@media (pointer: coarse) {
    .pdx-board-row { --pdx-hit: var(--tap-min); }
    .pdx-sys-meta { margin-top: 0; }
}
.pdx-dist { color: var(--ed-text-orange); white-space: nowrap; }

.pdx-cell { min-width: 0; }
.pdx-split-labels {
    display: flex; gap: var(--space-2); justify-content: space-between; margin-bottom: var(--space-1);
    font-size: var(--fs-xs);
}
.pdx-split { display: flex; gap: var(--space-0); align-items: center; height: 7px; }
/* A definite height, or the bars' height:100% resolves against nothing and they never rendered. */
.pdx-split-side { width: 50%; height: 100%; }
.pdx-split-side--left { display: flex; justify-content: flex-end; }
.pdx-split-bar { height: 100%; }
.pdx-split-axis { width: 1px; height: 9px; background: var(--ed-border-subtle); }

.pdx-meter { position: relative; height: 8px; background: rgb(var(--ed-white-rgb) / .05); }
.pdx-meter-fill { position: absolute; top: 0; bottom: 0; left: 0; opacity: .8; }
.pdx-meter-proj {
    position: absolute; top: -3px; bottom: -3px; width: 2px;
    background: var(--ed-text); opacity: .75;
}
.pdx-meter-caption {
    display: flex; flex-wrap: wrap; gap: 0 var(--space-2); justify-content: space-between; margin-top: var(--space-1);
    font-size: var(--fs-xs); color: var(--ed-text-muted);
}
.pdx-meter-value { color: var(--ed-text); }

.pdx-outlook {
    display: inline-block; padding: var(--space-1) var(--space-2);
    font-size: var(--fs-2xs); font-weight: 700; color: var(--o); text-transform: uppercase;
    letter-spacing: var(--ls-xl); border: 1px solid var(--o); }
.pdx-eta {
    margin-top: var(--space-1); font-size: var(--fs-xs);
    color: var(--ed-text-muted);
}

/* --- State breakdown --- */
.pdx-state-bar { width: 100%; height: 14px; margin-bottom: var(--space-4); }
.pdx-state-seg--other, .pdx-state-swatch--other { background: var(--ed-neutral); }
.pdx-state-rows {
    display: flex; flex-direction: column; gap: 1px;
    background: var(--ed-border-subtle); border: 1px solid var(--ed-border-subtle);
}
.pdx-state-row {
    display: flex; gap: var(--space-3); align-items: center;
    padding: var(--space-2) var(--space-3); background: var(--ed-bg-surface);
}
.pdx-state-swatch { flex-shrink: 0; width: 9px; height: 9px; }
.pdx-state-name { flex: 1; font-size: var(--fs-sm); }
.pdx-state-count { font-family: var(--ed-font-mono); font-variant-numeric: tabular-nums; }
.pdx-state-pct {
    min-width: 44px; font-family: var(--ed-font-mono); font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums; color: var(--ed-text-muted); text-align: right;
}

/* --- Territory history --- */
.pdx-terr-summary {
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4);
    font-family: var(--ed-font-mono);
    font-size: var(--fs-xs); border-bottom: 1px solid var(--ed-border-subtle);
}
.pdx-terr-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name time" "trans trans";
    gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06);
    border-left: 2px solid transparent; transition: background .15s; cursor: pointer;
}
.pdx-terr-row:hover { background: rgb(var(--ed-accent-rgb) / .08); border-left-color: var(--ed-orange); }
.pdx-terr-name {
    display: flex; grid-area: name; align-items: center; min-height: var(--tap-min-fine);
    font-size: var(--fs-sm); color: var(--ed-text); overflow-wrap: anywhere;
}
.pdx-terr-transition { display: flex; flex-wrap: wrap; grid-area: trans; gap: var(--space-1) var(--space-2); align-items: center; }
.pdx-terr-time { grid-area: time; font-size: var(--fs-xs); text-align: right; }
@media (pointer: coarse) {
    .pdx-terr-name { min-height: var(--tap-min); }
}

/* --- Responsive --- */
@media (max-width: 87.5em) {
    .pdx-shell { grid-template-columns: minmax(0, 1fr); }
    .pdx-col:last-child { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 73.75em) {
    .pdx-id-row { flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
    .pdx-id-row > .cycle-divider { display: none; }
    .pdx-id-block { flex: 1 1 100%; }
    .pdx-id-row > .cycle-progress-block { flex: 1 1 280px; width: auto; max-width: none; }
    .pdx-id-row > .pdx-live { flex: 0 1 260px; }
}
@media (max-width: 68.75em) {
    .pdx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 56.25em) {
    .pdx-pressure-strip { grid-template-columns: minmax(0, 1fr); }
    .pdx-col:last-child { grid-template-columns: minmax(0, 1fr); }

    .pdx-board-row {
        grid-template-columns: 28px minmax(0, 1.3fr) minmax(0, 1fr) 16px;
        grid-template-areas:
            "idx sys   outlook chev"
            ".   meter split   chev";
        gap: var(--space-3);
    }
    .pdx-board-row--head { display: none; }
    .pdx-board-row > .pdx-idx { display: flex; grid-area: idx; align-items: center; align-self: start; min-height: var(--pdx-hit); }
    .pdx-board-row > .pdx-sys { grid-area: sys; }
    .pdx-board-row > .pdx-cell--outlook { grid-area: outlook; justify-self: end; text-align: right; }
    .pdx-board-row > .pdx-cell--meter { grid-area: meter; }
    .pdx-board-row > .pdx-cell--split { grid-area: split; }
    .pdx-board-row:not(.pdx-board-row--head)::after {
        display: flex; grid-area: chev;
        align-items: center; align-self: start; justify-content: flex-end; min-height: var(--pdx-hit);
    }
    .pdx-cap {
        display: block; margin-bottom: var(--space-1);
        font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--ed-text-muted);
        text-transform: uppercase; letter-spacing: var(--ls-md);
    }
}
@media (max-width: 37.5em) {
    .pdx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pdx-id-block { gap: var(--space-3); }
    .pdx-logo { width: 56px; height: 56px; }
    .pdx-filter { flex: 1 1 100%; }
    .pdx-toolbar-count { flex: 1 1 100%; text-align: left; }
    .pdx-board-row {
        grid-template-areas:
            "idx sys   outlook chev"
            ".   meter meter   meter"
            ".   split split   split";
        grid-template-columns: 28px minmax(0, 1fr) auto 16px;
    }
}

/* Utilities shared by the power pages, their pagination and their empty states. */
.pd-mono { font-family: var(--ed-font-mono); font-variant-numeric: tabular-nums; }
.pd-muted { color: var(--ed-text-muted); }
.pd-green { color: var(--ed-green); }
.pd-red { color: var(--ed-red-text); }
.pd-empty { padding: 24px 20px; font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ed-text-muted); text-align: center; }
.pdx-toolbar > .pd-mono { font-size: var(--fs-2xs); }

/* === SYSTEMS (/systems): board, inspector, header strip, detail rail === */
/* Prefixes: .sbx board, .six inspector, .smx matching set, .sbh header strip, .spx/.ssx/.spa/.snx detail rail panels, .sdt dossier tabs, .ns sparkline. */

/* --- Shared themed scrollbar --- */
.sx-scroll { scrollbar-color: var(--ed-orange) rgb(var(--ed-body-rgb) / .6); scrollbar-width: thin; }
.sx-scroll::-webkit-scrollbar { width: 8px; }
.sx-scroll::-webkit-scrollbar-track { background: rgb(var(--ed-body-rgb) / .6); border-left: 1px solid var(--ed-border-subtle); }
.sx-scroll::-webkit-scrollbar-thumb { background: rgb(var(--ed-accent-rgb) / .45); }
.sx-scroll::-webkit-scrollbar-thumb:hover { background: var(--ed-orange); }

/* --- Header strip (.sbh) --- */
.sbh-strip {
    display: flex; flex-shrink: 0; gap: var(--space-3);
    align-items: center; margin-bottom: var(--space-3);
    padding: var(--space-3) var(--page-gutter);
    background: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .08), rgb(var(--ed-accent-rgb) / 0) 70%);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .25);
}
.sbh-title {
    margin: 0; font-size: var(--h1-strip); font-weight: 700; line-height: 1;
    color: var(--ed-text); text-transform: uppercase; letter-spacing: var(--ls-md);
}
.sbh-title-orange { color: var(--ed-orange); }
.sbh-tagline { font-size: var(--fs-xs); font-style: italic; color: var(--ed-text-muted); overflow-wrap: anywhere; }
.sbh-sep { color: var(--ed-border-subtle); }
.sbh-count { font-size: var(--fs-xl); color: var(--ed-orange); text-shadow: 0 0 14px rgb(var(--ed-accent-rgb) / .4); }
.sbh-count-label {
    font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-xl);
}
.sbh-spacer { flex: 1; }
.sbh-live {
    display: flex; gap: var(--space-2); align-items: center;
    font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase;
    letter-spacing: var(--ls-xl);
}

.sbh-screens { display: flex; }
.sbh-screen {
    display: flex; align-items: center; min-height: var(--tap-min-fine);
    padding: var(--space-2) var(--space-3); font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-xl);
    border: 1px solid var(--ed-border-subtle); transition: color .15s, border-color .15s;
}
.sbh-screen + .sbh-screen { border-left: none; }
a.sbh-screen:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); text-shadow: none; }
.sbh-screen.is-active {
    color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .16);
    border-color: rgb(var(--ed-accent-rgb) / .5); cursor: default;
}
.sbh-screen.is-disabled { opacity: .4; cursor: default; }

.sbh-toolbar {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center;
    padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--ed-border-subtle);
}
.sbh-toolbar-label {
    font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-xl);
}
.sbh-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.sbh-chip {
    padding: var(--space-1) var(--space-2); font-size: var(--fs-2xs);
    color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-lg);
    background: transparent; border: 1px solid var(--ed-border-subtle);
    transition: color .15s, border-color .15s; cursor: pointer;
}
.sbh-chip:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.sbh-chip.is-active {
    color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .16);
    border-color: rgb(var(--ed-accent-rgb) / .5);
}
.sbh-shown { margin-left: auto; font-size: var(--fs-xs); color: var(--ed-text-muted); }
/* --- Board table (.sbx): one grid for header and rows, laid out by the width of .sys-main (a size container): six columns from 880px, five from 700, cards below --- */
.sbx-head,
.sbx-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1.35fr) 128px minmax(180px, 1.05fr) 124px 96px;
    gap: 0 var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid transparent;
}

.sbx-head {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--ed-orange);
    text-transform: uppercase; letter-spacing: var(--ls-sm);
    background-color: var(--ed-bg-elevated); background-image: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .12) 0%, transparent 60%); box-shadow: inset 0 -2px 0 var(--ed-orange);
}
.sbx-h { min-width: 0; }
.sbx-h-short { display: none; }
.sbx-center { text-align: center; }
.sbx-sortable { padding-block: var(--space-1); user-select: none; }
.sbx-sortable:hover { color: var(--ed-text-orange); }
.sbx-sortable.is-sorted { color: var(--ed-text); }

.sbx-row {
    --sbx-line: var(--tap-min-fine);
    position: relative;
    padding-block: var(--space-3);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06);
    transition: background-color .15s;
    isolation: isolate;
    cursor: pointer;
}
.sbx-row:hover { background: rgb(var(--ed-accent-rgb) / .08); }
.sbx-row:has(.sbx-pick:focus-visible) { background: rgb(var(--ed-accent-rgb) / .08); }
.sbx-row.is-alert { border-left-color: var(--ed-red); }
.sbx-row.is-selected {
    background: rgb(var(--ed-accent-rgb) / .08);
    border-left-color: var(--row-accent, var(--ed-orange));
}

/* The rank button is the row's keyboard control (the row itself is not focusable); its ::after stretches over the whole row, so a tap anywhere lands on it.
   The other cells sit above that overlay, so the name link, tooltips and text selection keep working; a click on them bubbles to the row's own handler.
   The button fills the 28px rank column and no more: a wider one would push its focus ring into the name. */
.sbx-row > :not(.sbx-idx) { position: relative; z-index: 1; }
.sbx-pick { width: 100%; }
.sbx-pick::after { content: ""; position: absolute; inset: 0; }

.sbx-idx { font-size: var(--fs-2xs); color: var(--ed-text-muted); }
.sbx-idx.is-alert { color: var(--ed-text-orange); }

/* The name identifies a row and sibling names often differ only at the tail ("c14-2" vs "c12-17"), so a long one wraps instead of ending in an
   ellipsis, and balance keeps "GS-A c14-2" together rather than leaving a lone "2". */
.sbx-sys { min-width: 0; }
.sbx-sys-head { display: flex; flex-wrap: wrap; gap: var(--space-0) var(--space-2); align-items: center; }
.sbx-sys-name {
    display: flex; align-items: center; min-width: var(--tap-min-fine); max-width: 100%; min-height: var(--sbx-line);
    font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--ed-text);
    overflow-wrap: anywhere; text-wrap: balance;
}
.sbx-row:hover .sbx-sys-name { color: var(--ed-text-orange); }
.sbx-sys-sub {
    display: flex; gap: var(--space-2); align-items: center;
    font-size: var(--fs-xs); color: var(--ed-text-muted);
}
.sbx-faction { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sbx-dist { flex-shrink: 0; white-space: nowrap; }

.sbx-powers { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; min-width: 0; }
.sbx-ctrl { display: flex; gap: var(--space-2); align-items: center; white-space: nowrap; }
.sbx-ctrl-name { font-size: var(--fs-xs); color: var(--c); letter-spacing: var(--ls-sm); }
.sbx-unclaimed {
    font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase;
    letter-spacing: var(--ls-lg);
}
.sbx-rivals { display: inline-flex; gap: var(--space-1); align-items: center; }
.sbx-pips { display: flex; gap: var(--space-1); }
.sbx-pip { width: 6px; height: 6px; }
.sbx-more { font-size: var(--fs-2xs); color: var(--ed-text-muted); }

.sbx-cp { min-width: 0; }
.sbx-meter { position: relative; height: 9px; background: rgb(var(--ed-white-rgb) / .05); }
.sbx-meter-fill { position: absolute; top: 0; bottom: 0; left: 0; opacity: .8; }
.sbx-meter-proj {
    position: absolute; top: -3px; bottom: -3px; width: 2px;
    background: var(--ed-text); opacity: .75;
}
.sbx-meter-caption {
    display: flex; flex-wrap: wrap; gap: 0 var(--space-2); justify-content: space-between;
    margin-top: var(--space-1);
    font-size: var(--fs-xs); color: var(--ed-text-muted);
}
.sbx-meter-caption > :last-child { margin-left: auto; }
.sbx-meter-val { color: var(--ed-text); }

.sbx-spark { text-align: center; }
.sbx-net { display: block; margin-top: var(--space-1); font-size: var(--fs-xs); }
.ns-spark { display: block; }
.ns-empty { font-size: var(--fs-xs); color: var(--ed-text-muted); text-align: center; }

.sbx-outlook {
    display: inline-block; padding: var(--space-1) var(--space-2);
    font-size: var(--fs-2xs); font-weight: 700; color: var(--o); text-transform: uppercase;
    letter-spacing: var(--ls-xl); border: 1px solid var(--o); }
.sbx-updated { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--ed-text-muted); }

@container sysmain (max-width: 54.9375rem) {
    .sbx-head,
    .sbx-row { grid-template-columns: 28px minmax(0, 1.3fr) 112px minmax(160px, 1fr) 96px; }
    .sbx-h-net,
    .sbx-spark { display: none; }
}

@container sysmain (max-width: 43.6875rem) {
    .sbx-head {
        display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
        padding: var(--space-2) var(--space-3);
    }
    .sbx-h-rank,
    .sbx-h-full { display: none; }
    .sbx-h-short { display: inline; }
    .sbx-h-net { display: block; }
    .sbx-sortable { padding-inline: var(--space-2); }
    .sbx-head .sort-arrow:not(.active) { display: none; }

    .sbx-row {
        grid-template-columns: 28px minmax(0, 1fr) auto;
        grid-template-areas:
            "idx    sys    out"
            ".      powers powers"
            ".      cp     cp"
            ".      spark  spark";
        gap: var(--space-2) var(--space-3);
        align-items: start;
    }
    .sbx-idx { grid-area: idx; line-height: var(--sbx-line); }
    .sbx-sys { grid-area: sys; }
    .sbx-out { grid-area: out; max-width: 9rem; text-align: right; }
    .sbx-powers { grid-area: powers; }
    .sbx-cp { grid-area: cp; }
    .sbx-row > .sbx-spark {
        display: flex; grid-area: spark; gap: var(--space-3); align-items: center;
    }
    .sbx-spark .ns-spark { flex: none; width: 150px; max-width: 60%; }
    .sbx-net { margin-top: 0; text-align: left; }
    .sbx-outlook { margin-top: var(--space-1); }
}
@media (pointer: coarse) {
    .sbx-row { --sbx-line: var(--tap-min); }
}

/* The shared phone rules make .board-scroll scroll sideways. The layouts above never need that, so take it back (the page-scoped selector outranks it). */
.sys-page .board-scroll { overflow: visible; }
/* --- Inspector (.six) --- */
.six-panel { background: var(--ed-bg-surface); border: 1px solid var(--ed-border); }
.six-title,
.smx-title { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.six-hint {
    font-size: var(--fs-xs); color: var(--ed-text-muted);
    text-transform: none; letter-spacing: var(--ls-sm);
}
.six-placeholder { padding: var(--space-6) var(--space-4); font-size: var(--fs-sm); color: var(--ed-text-muted); text-align: center; }
.six-placeholder-glyph { margin-bottom: var(--space-3); font-size: var(--fs-2xl); color: var(--ed-border-subtle); }

.six-id { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.six-state-rail { flex-shrink: 0; width: 8px; height: 8px; margin-top: var(--space-2); }
.six-id-text { flex: 1; min-width: 0; }
.six-name {
    margin: 0; font-size: var(--fs-lg); line-height: var(--lh-snug);
    text-transform: none; letter-spacing: var(--ls-xs); overflow-wrap: anywhere;
}
.six-id-sub { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; margin-top: var(--space-1); }
.six-id-sub .sd-mono { font-size: var(--fs-xs); overflow-wrap: anywhere; }

.six-facts {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    margin: 0 0 var(--space-4);
    background: var(--ed-border-subtle); border: 1px solid var(--ed-border-subtle);
}
.six-fact { padding: var(--space-2) var(--space-3); background: var(--ed-bg-surface); }
.six-fact-label {
    margin-bottom: var(--space-1); font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-lg);
}
.six-fact-value { margin: 0; font-family: var(--ed-font-mono); font-size: var(--fs-base); }

.six-label {
    margin-bottom: var(--space-2); font-size: var(--fs-2xs);
    color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl);
}
.six-meter { position: relative; height: 12px; margin-bottom: var(--space-2); background: rgb(var(--ed-white-rgb) / .05); }
.six-meter-fill { position: absolute; top: 0; bottom: 0; left: 0; opacity: .8; }
.six-meter-proj { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ed-text); opacity: .8; }
.six-meter-caption {
    display: flex; flex-wrap: wrap; gap: 0 var(--space-2); justify-content: space-between;
    margin-bottom: var(--space-4); font-size: var(--fs-xs); color: var(--ed-text-muted);
}
.six-meter-val { color: var(--ed-text); }
.six-outlook.is-gain { color: var(--ed-green); }
.six-outlook.is-loss { color: var(--ed-red-text); }
.six-outlook.is-flat { color: var(--ed-text-muted); }
.six-outlook.is-lead { color: var(--ed-yellow); }

.six-presence { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.six-presence-row { display: flex; gap: var(--space-2); align-items: center; }
.six-swatch { flex-shrink: 0; width: 8px; height: 8px; }
.six-presence-name {
    flex: 1; min-width: 0; overflow: hidden; font-size: var(--fs-xs);
    color: var(--ed-text-secondary); white-space: nowrap; text-overflow: ellipsis;
}
.six-presence-role {
    font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase;
    letter-spacing: var(--ls-lg);
}
.six-presence-role.is-controlling { color: var(--ed-green); }
.six-presence-bar { flex-shrink: 0; width: 78px; height: 5px; background: rgb(var(--ed-white-rgb) / .05); }
.six-presence-bar > span { display: block; height: 100%; }
.six-presence-pct { min-width: 4ch; font-size: var(--fs-xs); color: var(--ed-text-muted); text-align: right; }

.six-actions { display: flex; gap: var(--space-2); }
.six-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min-fine);
    padding: var(--space-2) var(--space-3); font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-align: center; text-transform: uppercase; letter-spacing: var(--ls-xl);
    background: transparent; border: 1px solid var(--ed-border-subtle);
    transition: color .15s, border-color .15s, background-color .15s;
    cursor: pointer;
}
.six-btn:hover:not(:disabled) { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.six-btn:disabled { opacity: .45; cursor: not-allowed; }
.six-btn-primary {
    flex: 1; color: var(--ed-text-orange);
    background: rgb(var(--ed-accent-rgb) / .12); border-color: var(--ed-border-bright);
}
.six-btn-primary:hover { background: rgb(var(--ed-accent-rgb) / .2); text-shadow: none; }
/* --- Matching set (.smx) --- */
.smx-panel { background: var(--ed-bg-surface); border: 1px solid var(--ed-border); }
.smx-body { padding: var(--space-4); }
.smx-bar { display: flex; height: 12px; margin-bottom: var(--space-3); background: rgb(var(--ed-white-rgb) / .04); }
.smx-seg { min-width: 2px; }
.smx-legend { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-3); }
.smx-item { display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-xs); }
.smx-swatch { flex-shrink: 0; width: 8px; height: 8px; }
.smx-name { flex: 1; color: var(--ed-text-secondary); }
.smx-count { color: var(--ed-text-muted); }
.smx-note { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-muted); }

.smx-state-stronghold { background: var(--ed-state-stronghold); }
.smx-state-fortified  { background: var(--ed-state-fortified); }
.smx-state-exploited  { background: var(--ed-state-exploited); }
.smx-state-contested  { background: var(--ed-state-contested); }
.smx-state-unoccupied { background: var(--ed-state-unoccupied); }
.sdt-card {
    min-width: 0;
    container: sdt / inline-size;
    background: var(--ed-bg-surface);
    border: 1px solid rgb(var(--ed-accent-rgb) / .15);
}
@media (max-width: 45em) {
    .sdt-card { overflow-x: auto; }
}
.sdt-tabs {
    display: flex; align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgb(var(--ed-body-rgb) / .5); border-bottom: 1px solid var(--ed-border-subtle);
}
/* The tab strip and the rows sit in clipping boxes, so their ring is drawn inside them (a selector here would lose to the shared rule). */
.sdt-tab {
    --focus-ring-offset: -3px;
    display: flex; flex: 0 0 auto; gap: var(--space-2); align-items: center; min-height: var(--tap-min);
    padding: 0 var(--space-4); font: inherit; font-size: var(--fs-2xs);
    color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-lg);
    background: transparent; border: 0;
    border-bottom: 2px solid transparent; transition: color .15s, background .15s;
    cursor: pointer;
}
.sdt-tab:hover { color: var(--ed-text-orange); }
.sdt-tab.is-active {
    color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .16);
    border-bottom-color: var(--ed-orange);
}
.sdt-tab-count {
    padding: 1px var(--space-1);
    color: var(--ed-text-muted); background: rgb(var(--ed-white-rgb) / .05);
}
.sdt-tab.is-active .sdt-tab-count { color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .16); }
.sdt-tabs-fill { flex: 1; border-bottom: 2px solid transparent; }

.sdt-table { position: relative; }
.sdt-head { display: none; }
.sdt-row {
    display: grid;
    position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06);
    border-left: 2px solid transparent;
    transition: background .15s, border-color .15s;
}
.sdt-row:hover, .sdt-row:focus-within { background: rgb(var(--ed-accent-rgb) / .08); border-left-color: var(--ed-orange); }
.sdt-row > :first-child { grid-column: 1 / -1; }
.sdt-t-rings .sdt-row > :last-child { grid-column: 1 / -1; }
.sdt-t-factions .sdt-row > :nth-child(3) { order: 1; grid-column: 1 / -1; }

.sdt-cell {
    min-width: 0; font-size: var(--fs-xs); line-height: var(--lh-snug); overflow-wrap: anywhere;
}
.sdt-cell[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: var(--space-0);
    font-family: var(--ed-font-sans); font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-lg);
}
.sdt-cell-lg { font-size: var(--fs-sm); }
.sdt-mono { white-space: nowrap; }
.sdt-mute { color: var(--ed-text-muted); }
.sdt-stale { color: var(--ed-yellow); cursor: help; }
.sdt-dim { color: var(--ed-text-secondary); }
.sdt-blue { color: var(--ed-state-fortified); }
.sdt-amber { color: var(--ed-yellow); }
.sdt-econ { color: color-mix(in srgb, var(--ed-green) 50%, var(--ed-yellow)); }
.sdt-role { color: var(--ed-text-muted); }
.sdt-role.is-controlling { color: var(--ed-green); }

.sdt-link {
    --focus-ring-offset: -3px;
    display: flex; align-items: center; width: 100%;
    margin: 0; padding: 0; font: inherit; color: inherit; text-align: left;
    background: none; border: 0; cursor: pointer; appearance: none;
}
.sdt-link::after { content: ""; position: absolute; inset: 0; }
.sdt-link:hover, .sdt-row:hover .sdt-link { color: var(--ed-text-orange); }
.sdt-link::before { content: "\203A"; order: 1; margin-left: var(--space-2); color: var(--ed-text-muted); }
.sdt-row:hover .sdt-link::before { color: var(--ed-text-orange); }

.sdt-more {
    --focus-ring-offset: -3px;
    display: block; width: 100%; padding: var(--space-3);
    font: inherit; font-size: var(--fs-2xs); color: var(--ed-text-orange);
    text-transform: uppercase; letter-spacing: var(--ls-lg); background: transparent; border: 0;
    border-top: 1px solid var(--ed-border-subtle); transition: background .15s;
    cursor: pointer;
}
.sdt-more:hover { background: rgb(var(--ed-accent-rgb) / .08); }
.sdt-empty { padding: var(--space-5) var(--space-4); font-size: var(--fs-xs); color: var(--ed-text-muted); text-align: center; }

@container sdt (max-width: 37.5rem) {
    .sdt-tabs { mask-image: linear-gradient(to right, rgb(var(--ed-black-rgb)) calc(100% - var(--space-5)), transparent); }
}

@container sdt (min-width: 37.5625rem) {
    .sdt-head {
        display: grid; gap: 0 var(--space-3); align-items: center;
        padding: var(--space-2) var(--space-4);
        font-size: var(--fs-2xs);
        font-weight: 600;
        line-height: var(--lh-snug);
        color: var(--ed-orange); text-transform: uppercase; letter-spacing: var(--ls-sm);
        background-color: var(--ed-bg-elevated); background-image: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .12) 0%, transparent 60%); box-shadow: inset 0 -2px 0 var(--ed-orange);
    }
    .sdt-row { gap: 0 var(--space-3); align-items: center; }
    .sdt-t-stations .sdt-row { padding-block: 0; }
    .sdt-t-stations .sdt-link { min-height: var(--space-7); }
    .sdt-row > :first-child { grid-column: auto; }
    .sdt-t-rings .sdt-row > :last-child,
    .sdt-t-factions .sdt-row > :nth-child(3) { order: 0; grid-column: auto; }
    .sdt-cell[data-label]::before { display: none; }
    .sdt-right { text-align: right; }

    /* Fixed tracks are rem, so they grow with the text size (px at 16px: 6.875rem 110, 6.25rem 100, 6rem 96, 4.625rem 74, 7.5rem 120, 5.625rem 90). */
    .sdt-t-stations > :is(.sdt-head, .sdt-row)    { grid-template-columns: minmax(0, 1.5fr) 6.875rem minmax(0, 1.2fr) 6.25rem 6rem; }
    .sdt-t-factions > :is(.sdt-head, .sdt-row)    { grid-template-columns: minmax(0, 1.6fr) 6rem minmax(0, 1.1fr) 4.625rem; }
    .sdt-t-rings > :is(.sdt-head, .sdt-row)       { grid-template-columns: minmax(0, 1fr) 6.875rem 6.875rem minmax(0, 1.2fr); }
    .sdt-t-settlements > :is(.sdt-head, .sdt-row) { grid-template-columns: minmax(0, 1.3fr) 7.5rem minmax(0, 1.3fr) 6.875rem 5.625rem; }
}

/* --- Presence (.spx) --- */
.spx-rows {
    display: flex; flex-direction: column; gap: 1px;
    margin: 1px; background: var(--ed-border-subtle);
}
.spx-row { padding: var(--space-2) var(--space-3); background: var(--ed-bg-surface); }
.spx-row-head { display: flex; gap: var(--space-3); align-items: center; }
.spx-swatch { flex-shrink: 0; width: var(--space-2); height: var(--space-2); }
.spx-name {
    flex: 1; min-width: 0; font-size: var(--fs-sm); line-height: var(--lh-snug); overflow-wrap: anywhere;
}
.spx-role {
    font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase;
    letter-spacing: var(--ls-lg);
}
.spx-role.is-leading { color: var(--ed-green); }
.spx-cp { font-size: var(--fs-xs); color: var(--ed-text); }
.spx-pct { min-width: 6ch; font-size: var(--fs-xs); color: var(--ed-text-muted); text-align: right; }
.spx-bar { height: var(--space-1); margin-top: var(--space-2); background: rgb(var(--ed-white-rgb) / .05); }
.spx-bar > div { height: 100%; }

/* --- Support chain (.ssx) --- */
.ssx-banner {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center;
    padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ed-border-subtle);
}
.ssx-banner.is-supported  { background: rgb(var(--ed-green-rgb) / .06); }
.ssx-banner.is-vulnerable { background: rgb(var(--ed-red-rgb) / .08); }
.ssx-verdict {
    padding: var(--space-0) var(--space-2); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: var(--ls-xl); border: 1px solid currentColor;
}
.ssx-banner.is-supported  .ssx-verdict { color: var(--ed-green); }
.ssx-banner.is-vulnerable .ssx-verdict { color: var(--ed-red-text); }
.ssx-verdict-sub { min-width: 0; font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-muted); }
/* Explains why "primary anchor for N of M" is the number that matters. */
.ssx-note {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--ed-text-muted);
    background: var(--ed-bg-surface);
    border-left: 2px solid var(--ed-border-strong);
}
/* A link inside a sentence: underlined, so it is not told apart from the text by colour alone. */
.ssx-note a { color: var(--ed-text-orange); text-decoration: underline; text-underline-offset: 2px; }

.ssx-head, .ssx-row {
    display: grid; grid-template-columns: var(--space-2) minmax(0, 1fr) 74px 62px;
    gap: var(--space-3); align-items: center;
}
.ssx-head, .snx-head {
    padding: var(--space-1) var(--space-4);
    font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-md); background: var(--ed-bg-surface);
    border-bottom: 1px solid var(--ed-border-subtle);
}
.ssx-col-r, .snx-col-r { text-align: right; }

.ssx-row {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06);
    border-left: 2px solid transparent;
    transition: background .15s;
}
.ssx-row:hover { background: rgb(var(--ed-accent-rgb) / .08); }
.ssx-row.is-primary { border-left-color: var(--ed-green); }
/* The rows scroll inside their list, which would clip an outside focus ring. */
.ssx-row, .snx-row { --focus-ring-offset: -2px; }
.ssx-swatch { width: var(--space-2); height: var(--space-2); }
.ssx-main { min-width: 0; }
.ssx-name {
    display: block; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--ed-text);
    overflow-wrap: anywhere;
}
.ssx-role {
    display: block; margin-top: var(--space-0);
    font-size: var(--fs-2xs); line-height: var(--lh-snug); text-transform: uppercase; letter-spacing: var(--ls-lg);
}
.ssx-role.is-primary { color: var(--ed-green); }
.ssx-role.is-in { color: var(--ed-text-muted); }
.ssx-role.is-out { color: var(--ed-state-contested-text); }
.ssx-state { font-size: var(--fs-xs); color: var(--ed-text-muted); text-transform: none; letter-spacing: var(--ls-xs); }
.ssx-dist, .ssx-range { font-size: var(--fs-xs); color: var(--ed-text-muted); text-align: right; }
.ssx-more {
    padding: var(--space-2) var(--space-4); font-size: var(--fs-xs);
    color: var(--ed-text-muted); text-align: center; border-top: 1px solid var(--ed-border-subtle);
}

/* --- Pilot activity (.spa) --- */
.spa-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
    margin: 1px; background: var(--ed-border-subtle);
}
.spa-stat { min-width: 0; padding: var(--space-3); background: var(--ed-bg-surface); }
.spa-stat-label {
    margin-bottom: var(--space-1); font-size: var(--fs-2xs);
    color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-lg);
}
.spa-stat-value { font-family: var(--ed-font-mono); font-size: var(--fs-md); color: var(--ed-text); }
.spa-window {
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-xs); color: var(--ed-text-muted);
}

/* --- Nearby (.snx) --- */
.snx-head, .snx-row {
    display: grid; grid-template-columns: var(--space-2) minmax(0, 1fr) 62px 54px;
    gap: var(--space-3); align-items: center;
}
.snx-row {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06);
    border-left: 2px solid transparent;
    transition: background .15s, border-color .15s;
}
.snx-row:hover { background: rgb(var(--ed-accent-rgb) / .08); border-left-color: var(--ed-orange); }
.snx-row.is-pledged { border-left-color: var(--p-color, transparent); }
.snx-swatch { width: var(--space-2); height: var(--space-2); }
.snx-main { min-width: 0; }
.snx-name {
    display: block; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--ed-text);
    overflow-wrap: anywhere;
}
.snx-sub { display: flex; flex-wrap: wrap; gap: var(--space-0) var(--space-2); align-items: center; margin-top: var(--space-0); }
.snx-power {
    font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-md);
}
.snx-feats { display: flex; flex-shrink: 0; gap: var(--space-1); }
.snx-feat { font-size: var(--fs-xs); }
.snx-feat-rings { color: var(--ed-state-fortified); }
.snx-feat-settlements { color: color-mix(in srgb, var(--ed-green) 50%, var(--ed-yellow)); }
.snx-feat-hazres { color: var(--ed-state-contested-text); }
.snx-net { font-size: var(--fs-xs); color: var(--ed-text-muted); text-align: right; }
.snx-dist { font-size: var(--fs-xs); color: var(--ed-text-muted); text-align: right; }
@container rail (max-width: 23.75rem) {
    :is(.ssx-head, .ssx-row, .snx-head, .snx-row) {
        grid-template-columns: var(--space-2) minmax(0, 1fr) 56px 50px; gap: var(--space-2); padding-inline: var(--space-3);
    }
}

/* === SYSTEM MARKET (/systems/{id}/market) === */
/* Page chrome only: the commodity table is the dossier modal's (.sd-commodity-table). Its own class, not a <style> block in the page: the
   unscoped .back-link / .page-title rules there leaked onto every page while this one was open. */
.market-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-3) var(--page-gutter) var(--space-6);
}
.market-page .back-link { min-height: var(--tap-min-fine); margin-bottom: var(--space-2); }
@media (pointer: coarse) {
    .market-page .back-link { min-height: var(--tap-min); }
}
.market-title { margin: 0; font-weight: 700; }
.market-sub { margin: var(--space-1) 0 0; font-size: var(--fs-xs); color: var(--ed-text-muted); }
.market-title + .station-tabs,
.market-title + .market-loading,
.market-title + .market-empty { margin-top: var(--space-5); }
.market-sub + .station-tabs,
.market-sub + .market-loading,
.market-sub + .market-empty { margin-top: var(--space-5); }

.market-loading {
    display: flex; flex-direction: column; gap: var(--space-3); align-items: center;
    padding: var(--space-7) 0;
    font-size: var(--fs-sm); color: var(--ed-text-muted);
}
.market-empty {
    padding: var(--space-7) var(--space-5);
    color: var(--ed-text-muted);
    text-align: center;
}
.market-empty-icon {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--fs-4xl);
    opacity: .5;
}
.market-empty h2 { margin: 0 0 var(--space-2); font-size: var(--fs-md); color: var(--ed-text-secondary); }
.market-empty p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); }
.market-nomatch { margin: 0; padding: var(--space-5) var(--space-4); font-size: var(--fs-sm); color: var(--ed-text-muted); text-align: center; }

.station-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--ed-border-strong);
}
.station-tab {
    display: flex;
    flex-direction: column;
    gap: var(--space-0);
    align-items: flex-start;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    color: var(--ed-text-secondary);
    text-align: left;
    background: var(--ed-bg-input);
    border: 1px solid var(--ed-border-strong);
    transition: background .15s, border-color .15s, color .15s;
    cursor: pointer;
}
.station-tab:hover {
    background: rgb(var(--ed-accent-rgb) / .08);
    border-color: rgb(var(--ed-accent-rgb) / .3);
}
.station-tab[aria-pressed="true"] {
    color: var(--ed-text-orange);
    background: rgb(var(--ed-accent-rgb) / .15);
    border-color: var(--ed-orange);
}
.station-tab-name { font-size: var(--fs-sm); font-weight: 600; }
.station-tab-updated { font-size: var(--fs-xs); color: var(--ed-text-muted); }

.filter-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}
.filter-input {
    flex: 0 0 320px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    color: var(--ed-text);
    background: var(--ed-bg-input);
    border: 1px solid var(--ed-neutral);
    transition: border-color .15s;
}
.filter-input:focus-visible { border-color: var(--ed-orange); }
.filter-count { font-size: var(--fs-xs); color: var(--ed-text-muted); }

/* The page scrolls the rows, so the sticky header needs a bounded box. Under ~520px of height the cap is dropped (it left a 95px strip on a landscape phone). */
.commodity-table-container {
    max-height: max(20rem, calc(100vh - 280px));
    overflow: auto;
}
.market-table { font-size: var(--fs-sm); }

@media (max-width: 48em) {
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-input {
        flex: 1 1 auto;
    }
    .commodity-table-container {
        max-height: max(20rem, calc(100vh - 340px));
    }
}
@media (max-height: 520px) {
    .commodity-table-container { max-height: none; }
}

/* === SYSTEMS (/systems): page shells and phone layout === */
/* .sys-page is display:flex, not a grid: the rail (252px) and inspector (328px) are fixed-width children; the board takes the rest. */
.sys-inspect-col {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: var(--space-3); align-self: start; width: 328px;
}

.sdx-page > .sbh-strip { margin: 0; }

@media (max-width: 93.75em) {
    .sys-inspect-col { display: none; }
}

/* Stacked layout (tablets and phones): beside a 252px rail the board would be left with 460px at 768 and need a sideways scroll to reach its own data,
   so the rail moves above the results and folds down to its header and search field. */
@media (max-width: 64em) {
    .sys-page { flex-direction: column; }
    .sys-page .sys-rail { align-self: stretch; width: 100%; }
    .sys-page .sys-main { flex: none; align-self: stretch; width: 100%; }

    .sys-rail-toggle { display: inline-flex; align-items: center; }
    .sys-rail:not(.is-open) :is(.sys-rail-stack, .sys-rail-foot) { display: none; }
    .sys-rail.is-open .sys-rail-stack {
        max-height: clamp(16rem, 55vh, 32rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .sys-rail-foot-results { display: block; flex: 1.4; }

    .sys-power-grid { grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); }
    .sys-segment-grid { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
    .sys-rail-section-body-inner { max-width: 48rem; }
}

@media (max-width: 56.25em) {
    .sbh-sep { display: none; }
}

@media (max-width: 45em) {
    .sys-page { padding-bottom: var(--space-5); }
}

@media (max-width: 32.5em) {
    .sys-pager-btn:not(.active, .sys-pager-step) { display: none; }
}

@media (pointer: coarse) {
    .sys-rail input { font-size: var(--fs-md); } /* below 16px iOS zooms the page when a field is focused */
    .sys-search-hint span:last-child { display: none; }
    .sys-preset-action,
    .sys-preset-edit-btn,
    .sys-search-clear,
    .sys-segment-cell,
    .sys-pager-btn,
    .sbh-chip,
    .sbx-sortable,
    .sbx-sys-name { min-width: var(--tap-min); }
    .sbh-screen { min-height: var(--tap-min); }
    .sys-preset-action,
    .sys-preset-edit-btn { height: var(--tap-min); }
}
/* === VULNERABLE (/vulnerable) === */
/* Scoped under .vuln-screen (the page root) so it can beat the shared phone rules at the end of this file without !important.
   Prefixes: .vhd strip, .vuln page/rail/bar, .vbx board, .vspk sparkline, .vix inspector, .vrm risk mix.
   Tiers: >1500 inspector column; 1101-1500 inspector under the row; <=1100 stacked, rail folds; <=764 cards. */

.vuln-screen {
    --vuln-active: rgb(var(--ed-accent-rgb) / .16);
    --vuln-gap: var(--space-3);
    --vuln-hover: rgb(var(--ed-accent-rgb) / .08);
    --vuln-inspector-w: 328px;
    --vuln-line: rgb(var(--ed-accent-rgb) / .15);
    --vuln-rail-w: 252px;
}

/* Severity is text + colour everywhere it appears; this only supplies the colour. */
.vuln-sev-vulnerable { --sev: var(--ed-red); --sev-text: var(--ed-red-text); }
.vuln-sev-risk { --sev: var(--ed-yellow); --sev-text: var(--ed-yellow); }

.vuln-h2 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    letter-spacing: inherit;
}

/* --- Header strip --- */
.vhd-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: center;
    margin-bottom: var(--vuln-gap);
    padding: var(--space-3) var(--page-gutter) var(--space-4);
    background: linear-gradient(90deg, var(--ed-bg-header), transparent 70%);
    border-bottom: 1px solid var(--ed-border);
}
.vhd-title-block { display: flex; flex-direction: column; gap: var(--space-1); min-width: 260px; }
.vhd-title {
    margin: 0;
    font-size: var(--h1-strip);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--ed-text);
    letter-spacing: var(--ls-md);
    text-shadow: none;
}
.vhd-title-red { color: var(--ed-red-text); }
.vhd-tagline {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-xs);
}
.vhd-sep { color: var(--ed-border-subtle); }
.vhd-cycle { flex: 1 1 260px; max-width: 420px; }
.vhd-cycle-head { display: flex; gap: var(--space-2); align-items: baseline; justify-content: space-between; margin-bottom: var(--space-1); }
.vhd-cycle-name {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--ed-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-2xl);
}
.vhd-cycle-reset { font-size: var(--fs-xs); color: var(--ed-text-muted); }
.vhd-cycle-bar {
    position: relative;
    height: var(--space-1);
    background: rgb(var(--ed-white-rgb) / .06);
    border: 1px solid var(--ed-border-subtle);
}
.vhd-cycle-fill { height: 100%; background: var(--ed-orange); box-shadow: 0 0 8px var(--ed-orange-glow); }
.vhd-cycle-now {
    position: absolute;
    inset-block: calc(-1 * var(--space-1));
    width: 1px;
    background: var(--ed-text);
    opacity: .6;
}
.vhd-cycle-foot {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
}

.vhd-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: flex-end; }
.vhd-stat-label {
    margin-bottom: var(--space-1);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-xl);
}
.vhd-stat-values { display: flex; gap: var(--space-2); align-items: baseline; }
.vhd-stat-affected { color: var(--ed-red-text); }
/* A figure that has not loaded is a dash in the muted colour, never a red zero. */
.vhd-stat-affected.is-pending { color: var(--ed-text-muted); }
.vhd-stat-unit { font-size: var(--fs-2xs); color: var(--ed-text-muted); letter-spacing: var(--ls-lg); }
.vhd-live {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-xl);
    white-space: nowrap;
}
.vhd-live-dot {
    width: var(--space-2); height: var(--space-2); background: var(--ed-green);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--ed-green);
    animation: live-blink 2s ease-in-out infinite;
}

/* Severity switch. Buttons, not ARIA tabs: they refetch the board, they do not swap panels. */
.vhd-tabs { display: flex; margin-left: auto; }
.vhd-tab {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-3);
    font: inherit;
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-xl);
    background: transparent;
    border: 1px solid var(--ed-border-subtle);
    cursor: pointer;
}
.vhd-tab + .vhd-tab { border-left: none; }
.vhd-tab:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.vhd-tab.is-active {
    color: var(--ed-text-orange);
    background: var(--vuln-active);
    border-color: var(--ed-border-bright);
}
.vhd-tab-label { display: inline-flex; gap: var(--space-2); align-items: center; }
.vhd-tab-dot { width: 6px; height: 6px; background: var(--sev); border-radius: 50%; }
.vhd-tab-count { font-size: var(--fs-xs); color: var(--ed-text-muted); }
.vhd-tab.is-active .vhd-tab-count { color: var(--ed-text-orange); }

/* --- Explainer --- */
.vuln-explainer {
    margin: 0 var(--page-gutter) var(--vuln-gap);
    background: var(--ed-bg-surface);
    border: 1px solid var(--vuln-line);
    border-left: 3px solid var(--ed-orange);
}
.vuln-explainer > summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    color: var(--ed-text-secondary);
    list-style: none;
    cursor: pointer;
}
.vuln-explainer > summary::-webkit-details-marker { display: none; }
.vuln-explainer > summary::before {
    content: "\25B8";
    width: var(--space-2);
    font-size: var(--fs-2xs);
    color: var(--ed-orange);
}
.vuln-explainer[open] > summary::before { content: "\25BE"; }
.vuln-explainer > summary:hover { background: var(--vuln-hover); }
.vuln-explainer-title {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--ed-text-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-xl);
}
.vuln-explainer-hint { margin-left: auto; }
.vhd-legend-red { font-weight: 600; color: var(--ed-red-text); }
.vhd-legend-amber { font-weight: 600; color: var(--ed-yellow); }
.vuln-explainer-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: var(--space-4) var(--space-6);
    padding: var(--space-3) var(--space-4) var(--space-4);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--ed-text-secondary);
    border-top: 1px solid var(--ed-border-subtle);
}
.vuln-explainer-block { max-width: 75ch; }
.vuln-explainer-body p { margin: 0 0 var(--space-3); }
.vuln-explainer-body p:last-child { margin-bottom: 0; }
.vuln-explainer-body strong { font-weight: 600; color: var(--ed-text); }
.vuln-explainer-body .vhd-legend-red { color: var(--ed-red-text); }
.vuln-explainer-body .vhd-legend-amber { color: var(--ed-yellow); }
.vuln-explainer-body h2 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--ed-text-orange);
    letter-spacing: var(--ls-xl);
}
.vuln-legend { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.vuln-legend li { position: relative; padding-left: var(--space-4); }
.vuln-legend li::before {
    content: "";
    position: absolute;
    top: .6em;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--sev);
    border-radius: 50%;
}
.vuln-legend-key { font-family: var(--ed-font-mono); }

/* --- Page shell --- */
.vuln-screen .vuln-page {
    display: grid;
    grid-template-columns: var(--vuln-rail-w) minmax(0, 1fr) var(--vuln-inspector-w);
    grid-template-areas: "rail main inspect";
    gap: var(--vuln-gap);
    align-items: start;
    padding: 0 var(--page-gutter) var(--space-6);
}
.vuln-screen .vuln-main { grid-area: main; width: auto; min-width: 0; }
.vuln-inspect-col {
    display: flex;
    flex-direction: column;
    grid-area: inspect;
    gap: var(--vuln-gap);
    min-width: 0;
}
@media (min-width: 93.8125em) {
    .vuln-inspect-col {
        position: sticky;
        top: calc(var(--edhdr-sticky-h) + var(--space-5));
        max-height: calc(100vh - var(--edhdr-sticky-h) - var(--space-5) - var(--space-4));
        overflow-y: auto;
        scrollbar-color: var(--ed-orange) transparent;
        scrollbar-width: thin;
    }
}
@media (max-width: 93.75em) {
    .vuln-screen .vuln-page {
        grid-template-areas:
            "rail main"
            "rail inspect";
        grid-template-columns: var(--vuln-rail-w) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }
    .vuln-inspect-col > .vix-panel { display: none; }
}
@media (max-width: 68.75em) {
    .vuln-screen .vuln-page {
        grid-template-areas: "rail" "main" "inspect";
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }
}

/* --- Filter rail --- */
.vuln-screen .vuln-rail {
    display: flex;
    flex-direction: column;
    grid-area: rail;
    width: auto;
    min-width: 0;
    background: var(--ed-bg-surface);
    border: 1px solid var(--vuln-line);
}
.vuln-rail-head {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
}
.vuln-rail-title { display: flex; flex: 1; gap: var(--space-2); align-items: center; }
.vuln-rail-clear,
.vuln-rail-toggle {
    padding: var(--space-1) var(--space-2);
    font: inherit;
    font-size: var(--fs-2xs);
    color: var(--ed-text-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
    background: rgb(var(--ed-accent-rgb) / .14);
    border: 1px solid var(--ed-border-bright);
    cursor: pointer;
}
.vuln-rail-clear:hover,
.vuln-rail-toggle:hover { background: rgb(var(--ed-accent-rgb) / .22); }
.vuln-rail-toggle { display: none; gap: var(--space-1); align-items: center; }

.vuln-rail-search {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin: var(--space-3);
    padding: var(--space-1) var(--space-2);
    background: var(--ed-bg-input);
    border: 1px solid var(--ed-neutral);
}
.vuln-rail-search:focus-within { border-color: var(--ed-orange); }
.vuln-rail-search-icon { font-size: var(--fs-sm); color: var(--ed-text-muted); }
.vuln-rail-search input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--ed-text);
    background: transparent;
    border: 0;
}
.vuln-rail-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min-fine);
    font: inherit;
    font-size: var(--fs-md);
    line-height: 1;
    color: var(--ed-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.vuln-rail-search-clear:hover { color: var(--ed-text-orange); }

.vuln-rail-body { border-top: 1px solid var(--ed-border-subtle); }
.vuln-rail-body > * { min-width: 0; }

.vuln-power-hint { margin: 0 0 var(--space-2); font-size: var(--fs-xs); color: var(--ed-text-muted); }
.vuln-power-list { display: flex; flex-direction: column; gap: var(--space-1); }
.vuln-power {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font: inherit;
    text-align: left;
    background: var(--ed-bg-elevated);
    border: 1px solid var(--ed-border-subtle);
    border-left: 2px solid var(--c, var(--ed-orange));
    cursor: pointer;
}
.vuln-power:hover { background: var(--vuln-hover); }
.vuln-power.is-active { background: var(--vuln-active); border-color: var(--ed-border-bright); border-left-color: var(--c, var(--ed-orange)); }
.vuln-power-name {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-xs);
    color: var(--ed-text-secondary);
    overflow-wrap: anywhere;
}
.vuln-power.is-active .vuln-power-name { color: var(--ed-text); }
.vuln-pip {
    min-width: 2.2em;
    padding: 1px var(--space-1);
    font-size: var(--fs-2xs);
    text-align: center;
}
.vuln-pip-red { color: var(--ed-red-pale); background: rgb(var(--ed-red-rgb) / .16); }
.vuln-pip-yellow { color: var(--ed-yellow); background: rgb(var(--ed-yellow-rgb) / .14); }
.vuln-pip.is-zero { color: var(--ed-text-muted); background: transparent; }

.vuln-cp-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); margin-bottom: var(--space-2); }
.vuln-cp-chip {
    padding: var(--space-1) 0;
    font: inherit;
    font-family: var(--ed-font-mono);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    background: transparent;
    border: 1px solid var(--ed-border-subtle);
    cursor: pointer;
}
.vuln-cp-chip:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.vuln-cp-chip.is-active {
    color: var(--ed-text-orange);
    background: var(--vuln-active);
    border-color: var(--ed-border-bright);
}
.vuln-field { display: block; }
.vuln-field-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
}
.vuln-field input {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    font: inherit;
    font-family: var(--ed-font-mono);
    font-size: var(--fs-sm);
    color: var(--ed-text);
    background: var(--ed-bg-input);
    border: 1px solid var(--ed-neutral);
}
.vuln-field input:focus { border-color: var(--ed-orange); }
.vuln-field-note { margin-top: var(--space-2); font-family: var(--ed-font-mono); font-size: var(--fs-xs); color: var(--ed-text-muted); }

.vuln-feature-list { display: flex; flex-direction: column; gap: var(--space-1); }
.vuln-feature {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font: inherit;
    text-align: left;
    background: transparent;
    border: 1px solid var(--ed-border-subtle);
    cursor: pointer;
}
.vuln-feature:hover { border-color: var(--ed-orange); }
.vuln-feature.is-active { background: var(--vuln-hover); border-color: var(--ed-border-bright); }
.vuln-feature-box {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--space-4);
    height: var(--space-4);
    font-size: var(--fs-2xs);
    line-height: 1;
    color: var(--ed-text-orange);
    border: 1px solid var(--ed-neutral);
}
.vuln-feature.is-active .vuln-feature-box { border-color: var(--ed-orange); }
.vuln-feature-label { display: block; font-size: var(--fs-xs); color: var(--ed-text-secondary); }
.vuln-feature.is-active .vuln-feature-label { color: var(--ed-text); }
.vuln-feature-sub { display: block; font-size: var(--fs-xs); color: var(--ed-text-muted); }
.vuln-glyph-rings { color: var(--ed-state-fortified); }
.vuln-glyph-settlements { color: var(--ed-green); }

/* --- Board card --- */
.vuln-board {
    background: var(--ed-bg-surface);
    border: 1px solid var(--vuln-line);
}
.vuln-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--ed-border-subtle);
}
.vuln-toolbar-label {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-xl);
}
.vuln-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vuln-chip {
    padding: var(--space-1) var(--space-2);
    font: inherit;
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
    background: transparent;
    border: 1px solid var(--ed-border-subtle);
    cursor: pointer;
}
.vuln-chip [aria-hidden="true"] { margin-left: var(--space-1); }
.vuln-chip:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.vuln-chip.is-active {
    color: var(--ed-text-orange);
    background: var(--vuln-active);
    border-color: var(--ed-border-bright);
}
.vuln-shown { margin-left: auto; font-family: var(--ed-font-mono); font-size: var(--fs-xs); color: var(--ed-text-muted); }

.vuln-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--ed-border-subtle);
}
.vuln-pill {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font: inherit;
    font-size: var(--fs-xs);
    color: var(--ed-text-orange);
    background: rgb(var(--ed-accent-rgb) / .1);
    border: 1px solid var(--ed-border-bright);
    cursor: pointer;
}
.vuln-pill:hover { background: rgb(var(--ed-accent-rgb) / .2); }
.vuln-pill-clear { color: var(--ed-text-muted); background: transparent; border-color: var(--ed-border-subtle); }
.vuln-pill-clear:hover { color: var(--ed-text-orange); background: transparent; border-color: var(--ed-orange); }

.vuln-alert { margin: 0 var(--page-gutter) var(--vuln-gap); }
.vuln-board .vuln-alert { margin: var(--space-3) var(--space-4); }

.vuln-screen .vbx-head,
.vuln-screen .vbx-row {
    display: grid;
    grid-template-columns: 52px minmax(160px, .9fr) 88px minmax(140px, 1.1fr) 124px 132px;
    gap: 0 var(--space-3);
    align-items: center;
}
.vuln-screen .vbx-head {
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--ed-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-sm);
    background-color: var(--ed-bg-elevated);
    background-image: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .12) 0%, transparent 60%);
    border-left: 2px solid transparent;
    box-shadow: inset 0 -2px 0 var(--ed-orange);
}
.vbx-center { text-align: center; }
.vbx-sortable { text-align: left; user-select: none; }
.vbx-sortable:hover { color: var(--ed-text-orange); }

.vuln-screen .vbx-row {
    position: relative;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06);
    border-left: 2px solid transparent;
    transition: background .15s;
    isolation: isolate;
}
.vbx-row:hover { background: var(--vuln-hover); }
.vbx-row.is-selected {
    background: rgb(var(--ed-accent-rgb) / .1);
    border-left-color: var(--row-accent, var(--ed-orange));
}

/* The row's select button covers the whole row, so the entire row is one keyboard-reachable control. Cells sit above it and let clicks fall through
   (only links opt back in); they carry no title tooltips, which would swallow the click. The key under the board explains the marks. */
.vuln-screen .vbx-row > .vbx-pick {
    display: flex;
    position: absolute;
    inset: 0;
    gap: var(--space-2);
    align-items: center;
    padding: 0 var(--space-4) 0 calc(var(--space-4) + 2px);
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
}
.vuln-screen .vbx-row.is-selected > .vbx-pick { color: var(--ed-text-orange); }
.vuln-screen .vbx-row > .vbx-pick:focus-visible { outline-offset: -3px; }
.vuln-screen .vbx-row > :not(.vbx-pick) { position: relative; z-index: 1; pointer-events: none; }
.vuln-screen .vbx-row a { pointer-events: auto; }
.vbx-sev {
    flex-shrink: 0; width: 6px;
    height: 6px;
    background: var(--sev);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--sev);
}

.vbx-sys { min-width: 0; }
.vbx-sys-head { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
.vbx-sys-name {
    display: inline-flex;
    position: relative;
    z-index: 1;
    align-items: center;
    min-height: var(--tap-min-fine);
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
    color: var(--ed-text);
    overflow-wrap: anywhere;
}
.vbx-sys-name:hover { color: var(--ed-orange); text-shadow: none; }
.vbx-feats { display: flex; flex-shrink: 0; gap: var(--space-1); }
.vbx-feat { font-size: var(--fs-xs); }
.vbx-feat-rings { color: var(--ed-state-fortified); }
.vbx-feat-settlements { color: var(--ed-green); }
/* Spoken always, drawn only where the glyph has no tooltip (phone cards). */
.vbx-feat-word {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
}
.vbx-sys-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    align-items: baseline;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ed-text-muted);
}
.vbx-faction { min-width: 0; overflow-wrap: anywhere; }
.vbx-faction .power-logo-mask { display: none; }
.vbx-dist { white-space: nowrap; }

.vbx-power { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.vbx-power-name { font-size: var(--fs-xs); color: var(--c); letter-spacing: var(--ls-sm); white-space: nowrap; }
.vbx-unclaimed { font-size: var(--fs-2xs); color: var(--ed-text-muted); letter-spacing: var(--ls-lg); }

.vbx-meter { position: relative; height: var(--space-2); background: rgb(var(--ed-white-rgb) / .05); }
.vbx-meter-fill { position: absolute; inset-block: 0; left: 0; background: var(--sev); opacity: .85; }
.vbx-meter-proj {
    position: absolute;
    inset-block: calc(-1 * var(--space-1));
    width: 2px;
    background: var(--ed-text);
    opacity: .75;
}
.vbx-meter-caption {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    justify-content: space-between;
    margin-top: var(--space-2);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ed-text-muted);
}
.vbx-meter-val { color: var(--ed-text); }
.vbx-net.is-flat { color: var(--ed-text-muted); }

.vbx-spark { min-width: 0; }
.vspk { display: block; }
.vspk-empty {
    padding: var(--space-3) 0;
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
    text-align: center;
}
.vspk-fail { stroke: rgb(var(--ed-yellow-rgb) / .4); stroke-dasharray: 3 3; }
.vspk-line { fill: none; stroke: var(--vspk); stroke-width: 1.6; }
.vspk-area { fill: var(--vspk); fill-opacity: .16; }
.vspk-dot { fill: var(--vspk); }
.vspk-red { --vspk: var(--ed-red); }
.vspk-up { --vspk: var(--ed-green); }
.vspk-down { --vspk: var(--ed-yellow); }
.vspk-flat { --vspk: var(--ed-text-muted); }
.vbx-trend {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
    text-align: center;
}

.vbx-risk-cell { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; min-width: 0; }
.vbx-risk {
    display: inline-block;
    padding: 3px var(--space-2);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--sev-text);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
    border: 1px solid var(--sev);
}
.vbx-reason { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-secondary); overflow-wrap: anywhere; }
.vbx-updated { font-size: var(--fs-xs); color: var(--ed-text-muted); }

.vbx-detail {
    background: var(--ed-bg-elevated);
    border-bottom: 1px solid var(--ed-border-subtle);
    border-left: 2px solid var(--row-accent, var(--ed-orange));
}
@media (min-width: 93.8125em) {
    .vbx-detail { display: none; }
}

/* --- States: loading, empty, failed --- */
.vuln-loading {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
    min-height: 320px;
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
}
.vuln-empty { padding: var(--space-7) var(--space-4); text-align: center; }
.vuln-empty-glyph { margin-bottom: var(--space-3); font-size: var(--fs-2xl); color: var(--ed-green); }
.vuln-empty-glyph.is-warn { color: var(--ed-yellow); }
.vuln-empty-glyph.is-none { color: var(--ed-text-muted); }
.vuln-empty-title {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ed-text);
    letter-spacing: var(--ls-md);
}
.vuln-empty-sub { max-width: 52ch; margin: 0 auto var(--space-4); font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--ed-text-muted); }
/* One face for the empty/failure-state action on the three board pages. */
.vuln-empty-btn, .casc-empty-btn, .mine-empty-btn {
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-size: var(--fs-2xs);
    color: var(--ed-text-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-xl);
    background: rgb(var(--ed-accent-rgb) / .12);
    border: 1px solid var(--ed-border-bright);
    cursor: pointer;
}
.vuln-empty-btn:hover, .casc-empty-btn:hover, .mine-empty-btn:hover { background: rgb(var(--ed-accent-rgb) / .2); }

.vuln-key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ed-text-muted);
}
.vuln-key-item { display: inline-flex; gap: var(--space-1); align-items: center; }
.vuln-key-tick { width: 2px; height: var(--space-3); background: var(--ed-text); opacity: .75; }

.vuln-pager {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--ed-border-subtle);
}
.vuln-pager-info { font-size: var(--fs-xs); color: var(--ed-text-muted); }
.vuln-pager-info strong { font-weight: 400; color: var(--ed-text); }
.vuln-pager-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.vuln-pager-btn {
    min-width: var(--tap-min-fine);
    padding: var(--space-1) var(--space-2);
    font: inherit;
    font-family: var(--ed-font-mono);
    font-size: var(--fs-xs);
    color: var(--ed-text-secondary);
    background: transparent;
    border: 1px solid var(--ed-border-subtle);
    cursor: pointer;
}
.vuln-pager-btn:hover:not(:disabled) { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.vuln-pager-btn.active {
    color: var(--ed-text-orange);
    background: var(--vuln-active);
    border-color: var(--ed-border-bright);
}
.vuln-pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.vuln-pager-gap { color: var(--ed-text-muted); }
.vuln-pager-word { display: none; }

/* --- Inspector --- */
.vix-panel {
    container-type: inline-size;
    background: var(--ed-bg-surface);
    border: 1px solid var(--vuln-line);
}
.vix-panel.is-inline { background: transparent; border: 0; }
.vix-hint { font-size: var(--fs-xs); color: var(--ed-text-muted); text-transform: none; letter-spacing: var(--ls-sm); }
.vix-placeholder { padding: var(--space-6) var(--space-4); font-size: var(--fs-xs); color: var(--ed-text-muted); text-align: center; }
.vix-placeholder-glyph { margin-bottom: var(--space-2); font-size: var(--fs-2xl); color: var(--ed-neutral); }

.vix-body { display: grid; gap: var(--space-4); }
.vix-col { min-width: 0; }
@container (min-width: 35rem) {
    .vix-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
}

.vix-id { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.vix-sev-rail { flex-shrink: 0; width: 8px; height: 8px; margin-top: var(--space-2); background: var(--sev); }
.vix-id-text { flex: 1; min-width: 0; }
.vix-name {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-xs);
    overflow-wrap: anywhere;
}
.vix-id-sub { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; margin-top: var(--space-1); }
.vix-sev-badge {
    padding: var(--space-0) var(--space-2);
    font-size: var(--fs-2xs);
    color: var(--sev-text);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
    background: rgb(var(--ed-white-rgb) / .04);
    border: 1px solid var(--sev);
}
.vix-dist { font-size: var(--fs-xs); color: var(--ed-text-muted); }
.vix-close {
    min-width: var(--tap-min-fine);
    font: inherit;
    font-size: var(--fs-md);
    line-height: 1;
    color: var(--ed-text-muted);
    background: transparent;
    border: 1px solid var(--ed-border-subtle);
    cursor: pointer;
}
.vix-close:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }

.vix-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-bottom: var(--space-4);
    background: var(--ed-border-subtle);
    border: 1px solid var(--ed-border-subtle);
}
.vix-fact { min-width: 0; padding: var(--space-2) var(--space-3); background: var(--ed-bg-surface); }
.is-inline .vix-fact { background: var(--ed-bg-elevated); }
.vix-fact-label {
    margin-bottom: var(--space-1);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
}
.vix-fact-value { font-family: var(--ed-font-mono); font-size: var(--fs-base); color: var(--ed-text); }
.vix-fact-value.vix-fact-small { font-size: var(--fs-xs); color: var(--ed-text-secondary); }
.vix-fact-sub { font-size: var(--fs-xs); color: var(--ed-text-muted); }

.vix-label {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-xl);
}
.vix-label-row { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); align-items: baseline; justify-content: space-between; }
.vix-label-hint { font-size: var(--fs-xs); text-transform: none; letter-spacing: var(--ls-sm); }

.vix-meter { position: relative; height: var(--space-3); margin-bottom: var(--space-2); background: rgb(var(--ed-white-rgb) / .05); }
.vix-meter-fill { position: absolute; inset-block: 0; left: 0; background: var(--sev); opacity: .85; }
.vix-meter-proj {
    position: absolute;
    inset-block: calc(-1 * var(--space-1));
    width: 2px;
    background: var(--ed-text);
    opacity: .8;
}
.vix-meter-caption {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    justify-content: space-between;
    margin-bottom: var(--space-4);
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
}
.vix-meter-val { color: var(--ed-text); }
.vix-verdict.is-fall { color: var(--ed-red-text); }
.vix-verdict.is-up { color: var(--ed-green); }
.vix-verdict.is-flat { color: var(--ed-text-muted); }

.vix-support { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.vix-support-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-2);
    align-items: center;
    min-height: var(--tap-min-fine);
    padding: var(--space-2);
    background: var(--ed-bg-elevated);
    border-left: 2px solid var(--st, var(--ed-text-muted));
}
.is-inline .vix-support-row { background: var(--ed-bg-surface); }
.vix-support-row:hover { background: var(--vuln-hover); text-shadow: none; }
.vix-support-row.is-primary { background: rgb(var(--ed-green-rgb) / .06); }
.vix-state {
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--ls-sm);
    text-transform: uppercase;
    padding: var(--space-0) var(--space-1);
    color: var(--st);
    /* The tint sits on its own opaque base, not on the row behind it: a green wash or a lighter inline panel pushed the Stronghold chip under 4.5:1. */
    background: linear-gradient(var(--st-bg, transparent), var(--st-bg, transparent)), var(--ed-bg-surface);
}
.vix-support-name {
    min-width: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ed-text);
    overflow-wrap: anywhere;
}
.vix-support-dist { font-size: var(--fs-xs); color: var(--ed-text-muted); white-space: nowrap; }
.vix-support-dist.is-primary { color: var(--ed-green); }
.vix-support-dist.is-out { color: var(--ed-red-text); }
.vix-support-meta { display: flex; grid-column: 2 / -1; gap: var(--space-2); align-items: center; }
.vix-support-bar { flex: 1; height: var(--space-1); background: rgb(var(--ed-white-rgb) / .06); }
.vix-support-bar > span { display: block; height: 100%; background: var(--bar, var(--ed-green)); }
.vix-support-flag { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-sm); }
.vix-support-flag.is-primary { color: var(--ed-green); }
.vix-support-flag.is-out { color: var(--ed-red-text); }
.vix-support-loading {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3) 0 var(--space-4);
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
}
.vix-no-fallback,
.vix-failed {
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--ed-red-pale);
    background: rgb(var(--ed-red-rgb) / .07);
    border-left: 2px solid var(--ed-red);
}
.vix-failed { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.vix-retry {
    padding: var(--space-1) var(--space-3);
    font: inherit;
    font-size: var(--fs-2xs);
    color: var(--ed-text-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
    background: rgb(var(--ed-accent-rgb) / .12);
    border: 1px solid var(--ed-border-bright);
    cursor: pointer;
}
.vix-empty { padding: var(--space-2) 0 var(--space-4); font-size: var(--fs-xs); color: var(--ed-text-muted); }
.vix-more { padding: var(--space-1) 0 var(--space-4); font-size: var(--fs-xs); color: var(--ed-text-muted); text-align: center; }

.vix-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min-fine);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-size: var(--fs-xs);
    color: var(--ed-text-secondary);
    text-align: center;
    background: transparent;
    border: 1px solid var(--ed-border-subtle);
    cursor: pointer;
}
.vix-btn:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); text-shadow: none; }
.vix-btn-primary {
    flex: 1;
    font-size: var(--fs-2xs);
    color: var(--ed-text-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-xl);
    background: rgb(var(--ed-accent-rgb) / .12);
    border-color: var(--ed-border-bright);
}
.vix-btn-primary:hover { background: rgb(var(--ed-accent-rgb) / .2); }

/* --- Risk mix --- */
.vrm-panel {
    container-type: inline-size;
    background: var(--ed-bg-surface);
    border: 1px solid var(--vuln-line);
}
.vrm-hint { font-size: var(--fs-xs); color: var(--ed-text-muted); text-transform: none; letter-spacing: var(--ls-sm); }
.vrm-bar { display: flex; height: 12px; margin-bottom: var(--space-3); background: rgb(var(--ed-white-rgb) / .04); }
.vrm-seg { display: block; background: var(--sev); }
.vrm-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--ed-border-subtle);
    border: 1px solid var(--ed-border-subtle);
}
.vrm-row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); background: var(--ed-bg-surface); }
@container (min-width: 35rem) {
    .vrm-rows { flex-direction: row; }
    .vrm-row { flex: 1 1 0; min-width: 0; }
}
.vrm-swatch { flex-shrink: 0; width: var(--space-2); height: var(--space-2); background: var(--sev, var(--ed-neutral)); }
.vrm-text { flex: 1; min-width: 0; }
.vrm-name { display: block; font-size: var(--fs-xs); }
.vrm-sub { display: block; margin-top: var(--space-0); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-muted); }
.vrm-count { color: var(--sev-text, var(--ed-text)); }
.vrm-count.is-pending { color: var(--ed-text-muted); }
.vrm-delta { min-width: 6ch; font-size: var(--fs-xs); text-align: right; white-space: nowrap; }
.vrm-delta-flat { color: var(--ed-text-muted); }

/* Colour utilities, REQUIRED: these used to exist only as compounds (.sys-kpi-value.kpi-pos, .sys-cell-ru .kpi-pos), so a bare
   class="kpi-pos" inherited nothing. Components apply the bare class anywhere. */
.kpi-pos { color: var(--ed-green); }
.kpi-neg { color: var(--ed-red-text); }

@media (max-width: 68.75em) {
    .vuln-rail-toggle { display: inline-flex; }
    .vuln-screen .vuln-rail:not(.is-open) .vuln-rail-body { display: none; }
    .vuln-screen .vuln-rail.is-open .vuln-rail-body {
        display: grid;
        column-gap: var(--space-4);
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        align-items: start;
    }
    .vuln-rail-body > :first-child { grid-row: span 2; }
    .vuln-power-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
    .vhd-sep { display: none; }
}

/* Tablet: tighter tracks so the board still fits the 720px floor the shared phone rule sets. */
@media (max-width: 56.25em) {
    .vuln-screen .vbx-head,
    .vuln-screen .vbx-row {
        grid-template-columns: 44px minmax(140px, 1.3fr) 84px minmax(120px, 1fr) 100px 124px;
    }
}

@media (min-width: 47.8125em) and (max-width: 56.25em) {
    .vbx-fail-word { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); }
}

/* Cards instead of a sideways-scrolling table: below 764px the board no longer fits the 720px floor once the page gutters and card border are taken off. */
@media (max-width: 47.75em) {
    .vuln-screen .vuln-rail.is-open .vuln-rail-body { display: block; }
    .vuln-rail-body > :first-child { grid-row: auto; }
    .vuln-power-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .vhd-strip { padding-block: var(--space-3); }
    .vhd-stats { align-items: center; justify-content: space-between; width: 100%; }
    .vhd-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .vhd-tab { flex-direction: column; gap: var(--space-0); padding: var(--space-2) var(--space-1); letter-spacing: var(--ls-md); }

    .vuln-explainer > summary { align-items: flex-start; }
    .vuln-explainer-hint { flex-basis: 100%; }

    .vuln-screen .vbx-head { display: none; }
    .vuln-screen .board-scroll { overflow: visible; }
    .vuln-screen .board-scroll > .vbx-row {
        grid-template-columns: var(--tap-min) minmax(0, 1fr) minmax(0, 7.5rem);
        grid-template-areas:
            "idx   name  risk"
            "idx   sub   risk"
            "idx   feats risk"
            ".     meter meter"
            ".     spark spark";
        gap: var(--space-1) var(--space-3);
        align-items: start;
        padding: var(--space-3) var(--space-3) var(--space-3) var(--space-1);
    }
    .vbx-idx { grid-area: idx; }
    .vuln-screen .vbx-row > .vbx-pick { align-items: flex-start; padding: var(--space-4) 0 0 var(--space-4); }
    .vbx-sys { display: contents; }
    .vbx-sys-head { display: contents; }
    .vbx-sys-name { grid-area: name; }
    .vbx-feats { grid-area: feats; gap: var(--space-3); }
    .vbx-sys-sub { grid-area: sub; }
    .vbx-power { display: none; }
    .vbx-meter-cell { grid-area: meter; }
    .vbx-spark { display: flex; grid-area: spark; gap: var(--space-3); align-items: center; }
    .vbx-risk-cell { grid-area: risk; align-items: flex-end; text-align: right; }
    .vbx-faction .power-logo-mask { display: inline-block; margin-right: var(--space-1); vertical-align: middle; }
    .vbx-feat-word { position: static; width: auto; height: auto; margin: 0 0 0 var(--space-1); overflow: visible; clip: auto; }
    .vspk { flex: none; width: 140px; }
    .vbx-trend { margin-top: 0; text-align: left; }
    .vbx-meter-caption { margin-top: var(--space-1); }

    .vuln-pager { justify-content: center; }
    .vuln-pager-num, .vuln-pager-gap { display: none; }
    .vuln-pager-word { display: inline; }
    .vuln-pager-btns { justify-content: space-between; width: 100%; }
}

@media (pointer: coarse) {
    .vuln-screen :is(.vhd-tab, .vuln-chip, .vuln-cp-chip, .vuln-pill, .vuln-rail-clear, .vuln-rail-toggle,
        .vuln-rail-search-clear, .vuln-pager-btn, .vuln-feature, .vuln-power, .vbx-pick, .vbx-sys-name,
        .vix-btn, .vix-close, .vix-retry, .vix-support-row, .vuln-empty-btn, .vuln-alert-retry) {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
    }
    .vuln-rail-search input,
    .vuln-field input { font-size: var(--fs-md); }
}

/* === CASCADE (/cascade) === */
/* Prefixes: .chd strip, .casc page/rail/chips, .cbx board, .cin inspector. Tiers: >1500 sticky inspector column; <=1500 inspector under the row;
   <=1100 rail stacks and collapses; <=760 cards. */

.chd-strip, .chd-intro, .casc-page { --casc-gap: var(--space-3); }

.casc-sev--high { --sev: var(--ed-red); --sev-edge: var(--ed-red); --sev-text: var(--ed-red-text); }
.casc-sev--mid  { --sev: var(--ed-yellow); --sev-edge: var(--ed-yellow); --sev-text: var(--ed-yellow); }
.casc-sev--low  { --sev: var(--ed-text-secondary); --sev-edge: transparent; --sev-text: var(--ed-text-secondary); }

.casc-state {
    display: inline-block; padding: var(--space-0) var(--space-2); font-size: var(--fs-2xs);
    font-weight: 700; line-height: var(--lh-snug); text-transform: uppercase;
    letter-spacing: var(--ls-lg); white-space: nowrap;
}
.casc-state--stronghold { color: var(--ed-state-stronghold-text); background: rgb(var(--ed-stronghold-rgb) / .14); }
.casc-state--fortified  { color: var(--ed-state-fortified); background: rgb(var(--ed-fortified-rgb) / .14); }
.casc-state--exploited  { color: var(--ed-state-exploited); background: rgb(var(--ed-accent-rgb) / .14); }
.casc-state--unoccupied { color: var(--ed-state-unoccupied); background: rgb(var(--ed-unoccupied-rgb) / .14); }
.casc-dot--stronghold { background: var(--ed-state-stronghold); }
.casc-dot--fortified  { background: var(--ed-state-fortified); }

/* --- Header strip --- */
.chd-strip {
    display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center;
    margin-bottom: var(--casc-gap); padding: var(--space-3) var(--page-gutter) var(--space-4);
    background: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .08), rgb(var(--ed-accent-rgb) / 0) 70%);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .25);
}
.chd-title-block { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.chd-title {
    margin: 0; font-size: var(--h1-strip); font-weight: 700; line-height: var(--lh-tight);
    color: var(--ed-text); letter-spacing: var(--ls-md);
}
.chd-title-orange { color: var(--ed-orange); }
.chd-tagline { margin: 0; font-size: var(--fs-xs); font-style: italic; line-height: var(--lh-snug); color: var(--ed-text-muted); letter-spacing: var(--ls-xs); }
.chd-sep { color: var(--ed-border-subtle); }
@media (max-width: 82.5em) { .chd-strip > .chd-sep { display: none; } }

.chd-cycle { flex: 1 1 15rem; min-width: 0; max-width: 26rem; }
.chd-cycle-head { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); align-items: baseline; justify-content: space-between; margin-bottom: var(--space-1); }
.chd-cycle-name { font-size: var(--fs-2xs); font-weight: 700; color: var(--ed-orange); text-transform: uppercase; letter-spacing: var(--ls-2xl); white-space: nowrap; }
.chd-cycle-reset { font-size: var(--fs-xs); color: var(--ed-text-muted); letter-spacing: var(--ls-sm); }
.chd-cycle-bar { position: relative; height: 4px; background: rgb(var(--ed-white-rgb) / .06); border: 1px solid var(--ed-border-subtle); }
.chd-cycle-fill { height: 100%; background: var(--ed-orange); box-shadow: 0 0 8px rgb(var(--ed-accent-rgb) / .4); }
.chd-cycle-now { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--ed-text); opacity: .6; }
.chd-cycle-foot { display: flex; justify-content: space-between; margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--ed-text-muted); }

.chd-stats { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: flex-end; }
.chd-stat-label { margin-bottom: var(--space-1); font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl); }
.chd-stat-values { display: flex; gap: var(--space-2); align-items: baseline; }
.chd-stat-targets { color: var(--ed-orange); }
.chd-stat-falls { color: var(--ed-red-text); }
.chd-stat-unit { font-size: var(--fs-2xs); color: var(--ed-text-muted); letter-spacing: var(--ls-lg); }
.chd-live { display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl); }
.chd-live-dot {
    width: 8px; height: 8px; background: var(--ed-green);
    border-radius: 50%; box-shadow: 0 0 6px var(--ed-green);
    animation: chdBlink 2s infinite;
}
@keyframes chdBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.chd-tabs { display: flex; margin-left: auto; }
.chd-tab {
    display: flex; gap: var(--space-2); align-items: center;
    padding: var(--space-2) var(--space-3); font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-xl);
    background: transparent; border: 1px solid var(--ed-border-subtle); cursor: pointer;
}
.chd-tab + .chd-tab { margin-left: -1px; }
.chd-tab:hover { color: var(--ed-text); border-color: var(--ed-border-strong); }
.chd-tab.is-active { position: relative; color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .16); border-color: rgb(var(--ed-accent-rgb) / .5); }
.chd-tab-dot { width: 6px; height: 6px; border-radius: 50%; }
.chd-tab-count { color: var(--ed-text-muted); }
.chd-tab.is-active .chd-tab-count { color: var(--ed-text-orange); }

.chd-intro {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 75ch)); gap: var(--space-3) var(--space-6);
    justify-content: start; margin: 0 var(--page-gutter) var(--casc-gap);
}
.chd-intro p { margin: 0; }

/* --- Page shell --- */
/* --casc-sticky-top: where the inspector column sticks, just under the sticky site header (0 once it scrolls away).
   --casc-row-h: about one board row (a card on phones, taller for a finger); .cbx-detail scrolls its own row into view with it. */
.casc-page {
    --casc-sticky-top: calc(var(--edhdr-sticky-h) + var(--casc-gap));
    --casc-row-h: 4.25rem;
    display: flex; gap: var(--casc-gap); align-items: flex-start; padding: 0 var(--page-gutter) var(--space-6);
}
@media (pointer: coarse) { .casc-page { --casc-row-h: 5.25rem; } }
@media (max-width: 47.5em) { .casc-page { --casc-row-h: 10rem; } }
.casc-rail, .casc-board { background: var(--ed-bg-surface); border: 1px solid rgb(var(--ed-accent-rgb) / .15); }
.casc-rail { display: flex; flex: 0 0 244px; flex-direction: column; }
.casc-board { flex: 1; min-width: 0; }
.casc-inspect-col {
    position: sticky; top: var(--casc-sticky-top); flex: 0 0 392px;
    max-height: calc(100vh - var(--casc-sticky-top) - var(--casc-gap)); overflow-y: auto;
}
@media (max-width: 93.75em) { .casc-inspect-col { display: none; } }

/* --- Rail --- */
.casc-rail-head { gap: var(--space-2); }
.casc-rail-title { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.casc-rail-actions { display: flex; gap: var(--space-2); align-items: center; }
.casc-rail-clear, .casc-rail-toggle, .cin-close {
    padding: var(--space-1) var(--space-2); font-size: var(--fs-2xs); color: var(--ed-text-orange);
    text-transform: uppercase; letter-spacing: var(--ls-lg);
    background: rgb(var(--ed-accent-rgb) / .14); border: 1px solid rgb(var(--ed-accent-rgb) / .5); cursor: pointer;
}
.casc-rail-clear:hover, .cin-close:hover { background: rgb(var(--ed-accent-rgb) / .22); }
.casc-rail-toggle { display: none; color: var(--ed-text-secondary); background: transparent; border-color: var(--ed-border-strong); }
.casc-rail-toggle:hover { color: var(--ed-text); }

.casc-rail-search {
    display: flex; gap: var(--space-2); align-items: center; margin: var(--space-3);
    padding: 0 var(--space-2); background: var(--ed-bg-input); border: 1px solid var(--ed-neutral);
}
.casc-rail-search:focus-within { border-color: var(--ed-orange); }
.casc-rail-search-icon { font-size: var(--fs-sm); color: var(--ed-text-muted); }
.casc-rail-search input { flex: 1; min-width: 0; padding: var(--space-1) 0; font-size: var(--fs-xs); color: var(--ed-text); background: transparent; border: 0; }
.casc-rail-search-clear { min-width: var(--tap-min-fine); padding: 0; font-size: var(--fs-md); line-height: 1; color: var(--ed-text-muted); background: transparent; border: 0; cursor: pointer; }
.casc-rail-search-clear:hover { color: var(--ed-text-orange); }

.casc-rail-body { max-height: 760px; overflow-y: auto; scroll-padding-block: var(--space-2); border-top: 1px solid var(--ed-border-subtle); }
.casc-rail-foot { padding: var(--space-3); border-top: 1px solid var(--ed-border-subtle); }
.casc-rail-reset {
    width: 100%; padding: var(--space-2) 0;
    font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl);
    background: transparent; border: 1px solid var(--ed-border-subtle); cursor: pointer;
}
.casc-rail-reset:hover:not(:disabled) { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.casc-rail-reset:disabled { opacity: .5; cursor: default; }
.casc-rail-note { margin-top: var(--space-2); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-muted); }
.casc-key-orange { color: var(--ed-text-orange); }
.casc-key-red { color: var(--ed-red-soft); }

.casc-power-list { display: flex; flex-direction: column; gap: var(--space-1); }
.casc-power {
    display: flex; gap: var(--space-2); align-items: center; padding: var(--space-1) var(--space-2); text-align: left; background: var(--ed-bg-elevated);
    border: 1px solid var(--ed-border-subtle); border-left: 2px solid var(--c, var(--ed-border-subtle)); cursor: pointer;
}
.casc-power:hover { background: rgb(var(--ed-accent-rgb) / .1); }
.casc-power.is-active { background: rgb(var(--ed-accent-rgb) / .14); border-color: rgb(var(--ed-accent-rgb) / .5); border-left-color: var(--c, var(--ed-orange)); }
.casc-power-name { flex: 1; min-width: 0; overflow: hidden; font-size: var(--fs-xs); color: var(--ed-text-secondary); white-space: nowrap; text-overflow: ellipsis; }
.casc-power.is-active .casc-power-name { color: var(--ed-text); }
.casc-pip { padding: var(--space-0) var(--space-1); font-size: var(--fs-2xs); }
.casc-pip-orange { color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .14); }
.casc-pip-red { color: var(--ed-red-soft); background: rgb(var(--ed-red-rgb) / .16); }

.casc-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.casc-chip {
    flex: 1; padding: var(--space-1) var(--space-2); font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-lg); background: transparent; border: 1px solid var(--ed-border-subtle); cursor: pointer;
}
.casc-chip:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.casc-chip.is-active { color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .16); border-color: rgb(var(--ed-accent-rgb) / .5); }

.casc-field { display: block; }
.casc-field-label { display: block; margin-bottom: var(--space-1); font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-lg); }
.casc-field input {
    width: 100%; padding: var(--space-1) var(--space-2);
    font-size: var(--fs-xs); color: var(--ed-text); background: var(--ed-bg-input); border: 1px solid var(--ed-neutral);
}
.casc-field input:focus-visible { border-color: var(--ed-orange); }

.casc-feature-list { display: flex; flex-direction: column; gap: var(--space-1); }
.casc-feature {
    display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2);
    text-align: left; background: transparent; border: 1px solid var(--ed-border-subtle); cursor: pointer;
}
.casc-feature:hover { border-color: var(--ed-orange); }
.casc-feature.is-active { background: rgb(var(--ed-accent-rgb) / .1); border-color: rgb(var(--ed-accent-rgb) / .4); }
.casc-feature-box {
    display: flex; flex-shrink: 0; align-items: center;
    justify-content: center; width: 16px; height: 16px;
    font-size: var(--fs-xs); line-height: 1; color: var(--ed-text-orange); border: 1px solid var(--ed-neutral);
}
.casc-feature.is-active .casc-feature-box { border-color: var(--ed-orange); }
.casc-feature-label { display: block; font-size: var(--fs-xs); color: var(--ed-text-secondary); }
.casc-feature.is-active .casc-feature-label { color: var(--ed-text); }
.casc-feature-sub { display: block; margin-top: var(--space-0); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-muted); }

/* --- Board toolbar and states --- */
.casc-board-bar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ed-border-subtle); }
.casc-board-bar-label { font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl); }
.casc-board-bar .casc-chip { flex: 0 0 auto; }
.casc-board-count { margin-left: auto; font-size: var(--fs-xs); color: var(--ed-text-muted); }

.casc-loading { flex-direction: column; gap: var(--space-3); font-size: var(--fs-xs); color: var(--ed-text-muted); }
.casc-empty { padding: var(--space-7) var(--space-4); text-align: center; }
.casc-empty--error { border-left: 3px solid var(--ed-red); }
.casc-empty-title { margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: 400; color: var(--ed-text); text-transform: uppercase; letter-spacing: var(--ls-md); }
.casc-empty--error .casc-empty-title { color: var(--ed-red-text); }
.casc-empty-sub { max-width: 60ch; margin: 0 auto var(--space-4); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--ed-text-muted); }

/* --- Board rows: ONE grid for header and rows. Before changing the tracks, re-check that the system column still fits its coordinate line at the
   narrowest table width (761px). The first track is the select button: 24px for a mouse, 44px for a finger. --- */
.cbx-head, .cbx-row {
    --cbx-sel: var(--tap-min-fine);
    display: grid;
    grid-template-columns: var(--cbx-sel) minmax(160px, 1.35fr) 96px 84px minmax(120px, 1fr) 64px 64px;
    gap: 0 var(--space-2); align-items: center;
}
@media (pointer: coarse) { .cbx-head, .cbx-row { --cbx-sel: var(--tap-min); } }
/* The columns need 720px; below that the board scrolls inside its card (the card layout takes over at 760px). */
@media (max-width: 56.25em) { .board-scroll > .cbx-head, .board-scroll > .cbx-row { min-width: 720px; } }
.cbx-head {
    padding: var(--space-2) var(--space-3); font-size: var(--fs-2xs); font-weight: 600;
    color: var(--ed-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-sm); background: var(--ed-bg-elevated); background-image: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .12) 0%, transparent 60%); border-left: 3px solid transparent; box-shadow: inset 0 -2px 0 var(--ed-orange);
}
.cbx-head .cbx-right { text-align: right; }
.cbx-head .cbx-center { text-align: center; }

.cbx-row {
    position: relative; padding: var(--space-3); border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06); border-left: 3px solid var(--sev-edge, transparent);
    transition: background .15s;
    isolation: isolate;
}
.cbx-row:hover, .cbx-row:has(.cbx-select:focus-visible) { background: rgb(var(--ed-accent-rgb) / .08); }
.cbx-row.is-selected { background: rgb(var(--ed-accent-rgb) / .1); border-left-color: var(--pw, var(--ed-orange)); }

/* The row number is the real control; its ::after stretches over the whole row and takes every pointer event, so whatever a reader may copy or hover
   (system link, coordinates, CP figures, power name, glyphs) is lifted above it. The meter is click-through apart from its step marker. */
.cbx-select {
    display: flex; align-items: center; align-self: stretch; width: 100%; padding: 0;
    color: inherit; background: none; border: 0; cursor: pointer;
}
.cbx-select::after { content: ""; position: absolute; inset: 0; }
.cbx-feat, .cbx-coords, .cbx-dist, .cbx-deps, .cbx-power-name, .cbx-meter-caption > span { position: relative; z-index: 1; }
.cbx-idx { font-size: var(--fs-xs); color: var(--ed-text-muted); }
.cbx-select:hover .cbx-idx, .cbx-row.is-selected .cbx-idx { color: var(--ed-text-orange); }

.cbx-sys { min-width: 0; }
.cbx-sys-head { display: flex; gap: var(--space-2); align-items: center; }
.cbx-sys-name {
    display: inline-flex; position: relative; z-index: 1; align-items: center; min-width: var(--tap-min-fine); min-height: var(--tap-min-fine);
    font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--ed-text); overflow-wrap: anywhere; text-wrap: balance;
}
.cbx-sys-name:hover { color: var(--ed-orange); }
.cbx-feats { display: flex; flex-shrink: 0; gap: var(--space-1); }
.cbx-feat { font-size: var(--fs-xs); }
.cbx-feat-rings { color: var(--ed-state-fortified); }
.cbx-feat-settlements { color: var(--ed-green); }
.cbx-sys-sub { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); align-items: center; font-size: var(--fs-xs); color: var(--ed-text-muted); }
.cbx-deps { white-space: nowrap; }
.cbx-dist { color: var(--ed-orange); white-space: nowrap; }

.cbx-power { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.cbx-power-name { min-width: 0; font-size: var(--fs-xs); color: var(--c, var(--ed-text)); letter-spacing: var(--ls-sm); overflow-wrap: anywhere; }
.cbx-unclaimed { font-size: var(--fs-2xs); color: var(--ed-text-muted); letter-spacing: var(--ls-lg); }

.cbx-meter { position: relative; height: 8px; background: rgb(var(--ed-white-rgb) / .05); pointer-events: none; }
.cbx-meter-fill { position: absolute; inset: 0 auto 0 0; background: var(--ed-red); opacity: .85; }
.cbx-meter-step { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ed-text); opacity: .75; pointer-events: auto; }
.cbx-meter-caption { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); justify-content: space-between; margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--ed-text-muted); }
.cbx-meter-val { color: var(--ed-text); }
.cbx-meter-step-label { color: var(--ed-text-orange); }

.cbx-ru { font-size: var(--fs-xs); text-align: right; }
.cbx-ru > div + div { margin-top: var(--space-1); }
.cbx-pos { color: var(--ed-green); }
.cbx-um { color: var(--ed-red-soft); }
.cbx-muted { color: var(--ed-text-muted); }
.cbx-tag, .cbx-fall-tag { display: none; }

.cbx-fall { text-align: center; }
.cbx-fall-count { display: block; font-size: var(--fs-xl); font-weight: 700; line-height: 1; color: var(--sev-text); }
.cbx-fall-bar { height: 4px; margin-top: var(--space-1); background: rgb(var(--ed-white-rgb) / .06); }
.cbx-fall-bar > span { display: block; height: 100%; background: var(--sev); }

/* The inspector underneath its row, only where the page has no inspector column. html's scroll-padding-top already clears the sticky header;
   the margin stops it a row plus one tap target lower, so the top of its own row stays in view above it (the row is directly above it). */
.cbx-detail { display: none; scroll-margin-top: calc(var(--casc-row-h) + var(--tap-min)); }

/* --- Inspector --- */
.cin-set { display: flex; flex-direction: column; gap: var(--casc-gap); }
.cin-card { background: var(--ed-bg-surface); border: 1px solid rgb(var(--ed-accent-rgb) / .15); }
.cin-head { gap: var(--space-2); }
.cin-title { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.cin-head-hint { font-size: var(--fs-xs); color: var(--ed-text-muted); text-transform: none; letter-spacing: var(--ls-sm); }
.cin-body { padding: var(--space-3) var(--space-4); }
.cin-placeholder { font-size: var(--fs-xs); color: var(--ed-text-muted); }

.cin-identity { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.cin-sev { flex-shrink: 0; width: 8px; height: 8px; margin-top: var(--space-2); background: var(--sev); }
.cin-identity-main { flex: 1; min-width: 0; }
.cin-name { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: var(--ls-xs); overflow-wrap: anywhere; text-wrap: balance; }
.cin-identity-sub { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; margin-top: var(--space-1); }
.cin-coords { font-size: var(--fs-xs); color: var(--ed-text-muted); }

.cin-facts {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    margin: 0 0 var(--space-4); background: var(--ed-border-subtle); border: 1px solid var(--ed-border-subtle);
}
.cin-fact { padding: var(--space-2) var(--space-3); background: var(--ed-bg-surface); }
.cin-fact-label { margin: 0 0 var(--space-1); font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-lg); }
.cin-fact-value { margin: 0; font-size: var(--fs-base); }
.cin-fact-sev { color: var(--sev-text); }
.cin-fact-dim { color: var(--ed-text-secondary); }
.cin-pos { color: var(--ed-green); }
.cin-neg { color: var(--ed-red-text); }

.cin-section-label { margin-bottom: var(--space-2); font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl); }
.cin-section-rule { margin-top: var(--space-4); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .15); }
.cin-meter { position: relative; height: 11px; margin-bottom: var(--space-2); background: rgb(var(--ed-white-rgb) / .05); }
.cin-meter-fill { position: absolute; inset: 0 auto 0 0; background: var(--ed-red); opacity: .85; }
.cin-meter-step { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ed-text); opacity: .7; }
.cin-meter-caption { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); justify-content: space-between; font-size: var(--fs-xs); color: var(--ed-text-muted); }
.cin-meter-um { color: var(--ed-red-soft); }
.cin-meter-remaining { color: var(--ed-text-orange); }

.cin-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cin-step { display: flex; gap: var(--space-3); }
.cin-step-marker { display: flex; flex-direction: column; flex-shrink: 0; align-items: center; width: 26px; }
.cin-step-dot {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; font-size: var(--fs-2xs);
    font-weight: 700; color: var(--ed-orange);
    background: rgb(var(--ed-accent-rgb) / .12); border: 2px solid var(--ed-orange); border-radius: 50%;
}
.cin-step.is-final .cin-step-dot { color: var(--ed-red-text); background: rgb(var(--ed-red-rgb) / .12); border-color: var(--ed-red); }
.cin-step-connector { flex: 1; width: 2px; min-height: var(--space-4); background: linear-gradient(to bottom, var(--ed-orange) 0%, rgb(var(--ed-accent-rgb) / .15) 100%); }
.cin-step-body { flex: 1; min-width: 0; padding-bottom: var(--space-4); }
.cin-step.is-final .cin-step-body { padding-bottom: 0; }
.cin-step-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.cin-step-arrow { font-size: var(--fs-2xs); color: var(--ed-text-muted); }
.cin-step-cp {
    padding: var(--space-0) var(--space-2); font-size: var(--fs-2xs); font-weight: 700; background: rgb(var(--ed-white-rgb) / .05); border: 1px solid rgb(var(--ed-white-rgb) / .1);
}
.cin-step-lost {
    padding: var(--space-0) var(--space-2); font-size: var(--fs-2xs); font-weight: 700;
    color: var(--ed-red-soft); background: rgb(var(--ed-red-rgb) / .1); border: 1px solid rgb(var(--ed-red-rgb) / .25);
}
.cin-step-reason { margin-bottom: var(--space-2); font-size: var(--fs-xs); font-style: italic; line-height: var(--lh-snug); color: var(--ed-text-muted); }
.cin-step.is-final .cin-step-reason { font-style: normal; color: var(--ed-red-soft); }

.cin-lost, .cin-safe { margin: 0; padding: 0; list-style: none; }
.cin-lost { display: flex; flex-direction: column; border: 1px solid rgb(var(--ed-white-rgb) / .05); }
.cin-lost-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); align-items: center;
    min-height: var(--tap-min-fine); padding: 0 var(--space-2); font-size: var(--fs-xs);
    background: rgb(var(--ed-red-rgb) / .03); border-bottom: 1px solid rgb(var(--ed-white-rgb) / .025);
}
.cin-lost-row:last-child { border-bottom: none; }
.cin-lost-name, .cin-safe-name {
    display: flex; align-items: center; align-self: stretch; min-width: var(--tap-min-fine); min-height: var(--tap-min-fine);
    font-size: var(--fs-xs); color: var(--ed-text); overflow-wrap: anywhere;
}
.cin-lost-name:hover, .cin-safe-name:hover { color: var(--ed-orange); }
.cin-lost-dist { color: var(--ed-text-secondary); text-align: right; }
.cin-lost-cp { min-width: 6ch; color: var(--ed-text-muted); text-align: right; }

.cin-total {
    display: flex; gap: var(--space-2); align-items: baseline; justify-content: space-between;
    margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgb(var(--ed-accent-rgb) / .1);
}
.cin-total-label { font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl); }
.cin-total-value { font-size: var(--fs-xs); color: var(--ed-red-soft); }

.cin-safe { display: flex; flex-direction: column; gap: 1px; background: var(--ed-border-subtle); border: 1px solid var(--ed-border-subtle); }
.cin-safe-row { display: flex; gap: var(--space-2); align-items: center; min-height: var(--tap-min-fine); padding: 0 var(--space-3); background: var(--ed-bg-surface); }
.cin-safe-dot { flex-shrink: 0; width: 6px; height: 6px; background: var(--ed-green); }
.cin-safe-name { flex: 1; }
.cin-safe-dist { font-size: var(--fs-xs); color: var(--ed-text-muted); }
.cin-safe-empty {
    padding: var(--space-3); font-size: var(--fs-xs); line-height: var(--lh-normal);
    color: var(--ed-red-soft); background: rgb(var(--ed-red-rgb) / .07); border-left: 2px solid var(--ed-red);
}

@media (max-width: 93.75em) {
    /* The first row is "selected" by default for the column; with no column that is not worth a highlight. */
    .cbx-row.is-selected:not(.is-open) { background: transparent; border-left-color: var(--sev-edge, transparent); }
    .cbx-row.is-selected:not(.is-open):hover { background: rgb(var(--ed-accent-rgb) / .08); }
    .cbx-row.is-selected:not(.is-open) .cbx-idx { color: var(--ed-text-muted); }
    .cbx-detail {
        display: block; padding: var(--space-3);
        container-type: inline-size; font-family: var(--ed-font-sans);
        background: var(--ed-bg-body); border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .15); border-left: 3px solid var(--ed-orange);
    }
}
@container (min-width: 47.5rem) {
    .cin-set--inline { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}

@media (max-width: 68.75em) {
    .casc-page { flex-direction: column; align-items: stretch; }
    .casc-page .casc-rail { flex: none; width: 100%; }
    .casc-page .casc-board { width: 100%; }
    .casc-rail-toggle { display: inline-flex; align-items: center; }
    .casc-rail.is-collapsed .casc-rail-panel { display: none; }
    .casc-rail-body { max-height: none; overflow: visible; }
    .casc-power-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
}

@media (max-width: 47.5em) {
    .casc-board .cbx-head { display: none; }
    /* Three classes, so it also beats the 720px row minimum above. */
    .casc-board .board-scroll > .cbx-row {
        min-width: 0;
        grid-template-columns: var(--cbx-sel) auto minmax(0, 1fr) auto;
        /* The power sits under the "will fall" column, not beside it: at 320px the chip and a 1fr cell broke "Aisling" mid-word. */
        grid-template-areas:
            "sel sys   sys   fall"
            "sel state power power"
            "sel prog  prog  prog"
            "sel ru    ru    ru";
        gap: var(--space-1) var(--space-2);
        padding: var(--space-2) var(--space-3) var(--space-3) var(--space-1);
    }
    .cbx-select { grid-area: sel; align-items: flex-start; justify-content: center; padding-top: var(--space-3); }
    .cbx-sys { grid-area: sys; }
    .cbx-state-cell { grid-area: state; }
    .cbx-power { grid-area: power; }
    .cbx-prog { grid-area: prog; margin-top: var(--space-1); }
    .cbx-ru { display: flex; flex-wrap: wrap; grid-area: ru; gap: 0 var(--space-4); text-align: left; }
    .cbx-ru > div + div { margin-top: 0; }
    .cbx-fall { grid-area: fall; min-width: 3.5rem; }
    .cbx-tag { display: inline; color: var(--ed-text-muted); }
    .cbx-fall-tag { display: block; margin-top: var(--space-1); font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-md); }
    .cbx-detail { padding: var(--space-2); }
    .cin-body { padding: var(--space-3); }

    .chd-tabs { flex: 1 1 100%; }
    .chd-tab { flex: 1 1 auto; justify-content: center; padding-inline: var(--space-2); letter-spacing: var(--ls-md); }
}
@media (max-width: 45em) {
    .casc-page { padding-bottom: var(--space-5); }
    /* The desktop rule pins the chips at flex: 0 0 auto; wrapping the bar alone left the group wider than the screen. */
    .casc-board-bar .casc-chips { flex: 1 1 100%; }
}

@media (pointer: coarse) {
    .casc-rail-search-clear { min-width: var(--tap-min); }
    .casc-rail-search input, .casc-field input { font-size: var(--fs-md); }
    .cbx-sys-name, .cin-lost-name, .cin-safe-name { min-width: var(--tap-min); min-height: var(--tap-min); }
    .cin-lost-row, .cin-safe-row { min-height: var(--tap-min); }
}

/* === MINING (/mining) === */
/* Header strip, filter rail, board and inspector, matching /vulnerable and /cascade. Tiers: >1500 inspector column; <=1500 details under the row;
   <=1100 rail stacks behind a Filters toggle; <=820 one card per system. */

/* --- Header strip --- */
.mhd-strip {
    display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center;
    margin-bottom: var(--space-3); padding: var(--space-3) var(--page-gutter) var(--space-4);
    background: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .08), rgb(var(--ed-accent-rgb) / 0) 70%);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .25);
}
.mhd-title-block { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; max-width: 20rem; }
.mhd-title {
    margin: 0; font-size: var(--h1-strip); font-weight: 700; line-height: 1;
    color: var(--ed-text); letter-spacing: var(--ls-md);
}
.mhd-title-cyan { color: var(--ed-state-fortified); }
.mhd-tagline { margin: 0; font-size: var(--fs-xs); font-style: italic; line-height: var(--lh-snug); color: var(--ed-text-muted); letter-spacing: var(--ls-xs); text-wrap: balance; }
.mhd-sep { color: var(--ed-border-strong); }

.mhd-cycle { flex: 1 1 15rem; min-width: 0; max-width: 26rem; }
.mhd-cycle-head { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); align-items: baseline; justify-content: space-between; margin-bottom: var(--space-1); }
.mhd-cycle-name { font-size: var(--fs-2xs); font-weight: 700; color: var(--ed-text-orange); text-transform: uppercase; letter-spacing: var(--ls-2xl); white-space: nowrap; }
.mhd-cycle-reset { font-size: var(--fs-2xs); color: var(--ed-text-muted); letter-spacing: var(--ls-sm); white-space: nowrap; }
.mhd-cycle-bar { position: relative; height: var(--space-1); background: rgb(var(--ed-white-rgb) / .06); border: 1px solid var(--ed-border-subtle); }
.mhd-cycle-fill { height: 100%; background: var(--ed-orange); box-shadow: 0 0 8px rgb(var(--ed-accent-rgb) / .4); }
.mhd-cycle-now { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--ed-text); opacity: .6; }
.mhd-cycle-foot { display: flex; gap: var(--space-3); justify-content: space-between; margin-top: var(--space-1); font-size: var(--fs-2xs); color: var(--ed-text-muted); }

.mhd-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: flex-end; }
.mhd-stat-label {
    max-width: 14rem; margin-bottom: var(--space-1); overflow: hidden; font-size: var(--fs-2xs);
    color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl); white-space: nowrap; text-overflow: ellipsis;
}
.mhd-stat-values { display: flex; gap: var(--space-3); align-items: baseline; white-space: nowrap; }
.mhd-stat-results { color: var(--ed-state-fortified); }
.mhd-stat-range { color: var(--ed-text-orange); }
.mhd-stat-unit { font-size: var(--fs-2xs); color: var(--ed-text-muted); letter-spacing: var(--ls-lg); }
.mhd-live { display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl); white-space: nowrap; }
.mhd-live-dot {
    width: 7px; height: 7px; background: var(--ed-green);
    border-radius: 50%; box-shadow: 0 0 6px var(--ed-green);
    animation: mhdBlink 2s infinite;
}
@keyframes mhdBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.mhd-spacer { flex: 1; }

.mhd-tabs { display: flex; }
.mhd-tab {
    display: flex; gap: var(--space-2); align-items: center;
    padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-xl);
    background: transparent; border: 1px solid var(--ed-border-subtle); cursor: pointer;
}
.mhd-tab + .mhd-tab { margin-left: -1px; }
.mhd-tab:hover { color: var(--ed-text); }
.mhd-tab.is-active { position: relative; color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .16); border-color: rgb(var(--ed-accent-rgb) / .5); }
/* The dot carries the goal's meaning (reinforce green, undermine red, acquire blue); the word beside it carries it for everyone who cannot
   see the colour. */
.mhd-tab-dot { width: 6px; height: 6px; border-radius: 50%; }
.mhd-tab[data-goal="reinforce"] .mhd-tab-dot { background: var(--ed-green); }
.mhd-tab[data-goal="undermine"] .mhd-tab-dot { background: var(--ed-red); }
.mhd-tab[data-goal="acquire"] .mhd-tab-dot { background: var(--ed-state-fortified); }

/* --- Explainer --- */
.mhd-explain { margin: 0 var(--page-gutter) var(--space-3); }
.mhd-explain-toggle {
    display: flex; gap: var(--space-3); align-items: center; width: 100%; padding: var(--space-2) var(--space-3);
    font: inherit; font-size: var(--fs-xs); line-height: var(--lh-snug);
    color: var(--ed-text-muted); text-align: left;
    background: rgb(var(--ed-fortified-rgb) / .05); border: 1px solid var(--ed-border-subtle);
    border-left: 2px solid var(--ed-state-fortified); cursor: pointer;
}
.mhd-explain-toggle:hover { color: var(--ed-text-secondary); background: rgb(var(--ed-fortified-rgb) / .1); }
.mhd-explain-caret { font-size: var(--fs-2xs); color: var(--ed-state-fortified); }
.mhd-explain-text { min-width: 0; }
.mhd-explain-hint {
    margin-left: auto; font-size: var(--fs-2xs); color: var(--ed-state-fortified); text-transform: uppercase; letter-spacing: var(--ls-lg);
    white-space: nowrap;
}
.mhd-intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 75ch)); gap: var(--space-3) var(--space-6); margin: 0 var(--page-gutter) var(--space-3);
}
.mhd-intro p { margin: 0; }

/* --- Page shell --- */
.mine-page { display: flex; gap: var(--space-3); align-items: flex-start; padding: 0 var(--page-gutter) var(--space-6); }
/* 18.5rem is what the Reserve level row needs (266px of chips + 24px section padding + border). The rail used to say 252px but was
   stretched to that anyway by the unwrappable chip row's min-content. */
.mine-rail { display: flex; flex: 0 0 18.5rem; flex-direction: column; background: var(--ed-bg-surface); border: 1px solid rgb(var(--ed-accent-rgb) / .15); }
.mine-board { flex: 1; min-width: 0; container-type: inline-size; background: var(--ed-bg-surface); border: 1px solid rgb(var(--ed-accent-rgb) / .15); }
.mine-inspect-col { display: flex; flex: 0 0 392px; flex-direction: column; gap: var(--space-3); }

.mine-panel-title { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }

/* --- Rail --- */
.mine-rail-head { gap: var(--space-2); }
.mine-rail-head-actions { display: flex; gap: var(--space-2); align-items: center; }
.mine-rail-clear,
.mine-rail-toggle {
    padding: var(--space-1) var(--space-2); font: inherit; font-size: var(--fs-2xs); text-transform: uppercase;
    letter-spacing: var(--ls-lg); cursor: pointer;
}
.mine-rail-clear { color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .14); border: 1px solid rgb(var(--ed-accent-rgb) / .5); }
.mine-rail-clear:hover { background: rgb(var(--ed-accent-rgb) / .22); }
.mine-rail-toggle { display: none; color: var(--ed-text-secondary); background: transparent; border: 1px solid var(--ed-border-strong); }
.mine-rail-toggle:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.mine-rail-panel { display: flex; flex-direction: column; min-height: 0; }
/* No inner scroller: the groups (about 920px open) outgrow a laptop viewport and the lower ones sat behind a scrollbar nobody saw. The page scrolls them. */
.mine-rail-body { border-top: 1px solid var(--ed-border-subtle); }
.mine-rail-foot { padding: var(--space-3); border-top: 1px solid var(--ed-border-subtle); }
.mine-rail-reset {
    width: 100%; padding: var(--space-2) 0; font: inherit; font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-xl); background: transparent; border: 1px solid var(--ed-border-subtle); cursor: pointer;
}
.mine-rail-reset:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.mine-rail-note { margin-top: var(--space-2); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-muted); }

.mine-rail-search {
    display: flex; gap: var(--space-2); align-items: center;
    padding: var(--space-1) var(--space-2); background: var(--ed-bg-input); border: 1px solid var(--ed-neutral);
}
.mine-rail-search:focus-within { border-color: var(--ed-orange); }
.mine-rail-search-icon { font-size: var(--fs-2xs); color: var(--ed-text-muted); }
.mine-rail-search input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-sm); color: var(--ed-text); background: transparent; border: 0; }

/* The reference-system matches sit in the flow under the field: a floating list lost its last results behind the clipping accordion body and the scrolling rail. */
.mine-ref-spin { font-size: var(--fs-2xs); color: var(--ed-text-orange); animation: mhdBlink 1s infinite; }
.mine-ref-drop {
    max-height: 14rem; margin-top: var(--space-1); overflow-y: auto;
    background: var(--ed-bg-elevated); border: 1px solid rgb(var(--ed-accent-rgb) / .4);
}
.mine-ref-opt {
    display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; width: 100%;
    padding: var(--space-2); font: inherit; text-align: left; background: transparent;
    border: 0; border-bottom: 1px solid var(--ed-border-subtle); cursor: pointer;
}
.mine-ref-opt:hover { background: rgb(var(--ed-accent-rgb) / .14); }
.mine-ref-opt-name { font-size: var(--fs-sm); color: var(--ed-text); }
.mine-ref-opt-state { font-size: var(--fs-2xs); color: var(--ed-text-muted); }
.mine-ref-current {
    display: flex; flex-direction: column; gap: var(--space-0);
    margin-top: var(--space-2); padding: var(--space-1) var(--space-2);
    background: rgb(var(--ed-fortified-rgb) / .08); border-left: 2px solid var(--ed-state-fortified);
}
.mine-ref-current-name { font-size: var(--fs-xs); color: var(--ed-state-fortified); }
.mine-ref-coords { font-size: var(--fs-xs); color: var(--ed-text-muted); }

.mine-field { display: block; margin-top: var(--space-2); }
.mine-field-label { display: block; margin-bottom: var(--space-1); font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-lg); }
.mine-field-label-sep { margin-top: var(--space-3); }
.mine-field input,
.mine-select {
    width: 100%; padding: var(--space-1) var(--space-2); font: inherit;
    font-size: var(--fs-sm); color: var(--ed-text); background: var(--ed-bg-input); border: 1px solid var(--ed-neutral);
}
.mine-field input:focus, .mine-select:focus { border-color: var(--ed-orange); }

/* Chips start from content width and share the leftover; with basis 0 they shrank to slivers and "Common" ran past its border. */
.mine-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.mine-chip {
    flex: 1 0 auto; padding: var(--space-1) var(--space-2); font: inherit; font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-lg); white-space: nowrap; background: transparent; border: 1px solid var(--ed-border-subtle);
    cursor: pointer;
}
.mine-chips-inline .mine-chip,
.mine-chips-wrap .mine-chip { flex: 0 0 auto; }
.mine-chip:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.mine-chip.is-active { color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .16); border-color: rgb(var(--ed-accent-rgb) / .5); }

/* scroll-margin: "Choose your power" focuses this grid; keep it off the edge of the rail's scroller. */
.mine-power-list { display: flex; flex-wrap: wrap; gap: var(--space-1); scroll-margin-block: var(--space-6); }
.mine-power {
    display: flex; gap: var(--space-2); align-items: center; padding: var(--space-1) var(--space-2);
    font: inherit; background: transparent; border: 1px solid var(--ed-border-subtle); cursor: pointer;
}
.mine-power:hover { border-color: var(--c, var(--ed-orange)); }
.mine-power.is-active { background: color-mix(in srgb, var(--c, var(--ed-orange)) 16%, transparent); border-color: var(--c, var(--ed-orange)); }
.mine-power-name { font-size: var(--fs-2xs); color: var(--ed-text-secondary); letter-spacing: var(--ls-sm); }
.mine-power.is-active .mine-power-name { color: var(--ed-text); }

.mine-power-current {
    display: flex; gap: var(--space-2); align-items: center; width: 100%; padding: var(--space-2);
    font: inherit; text-align: left; background: color-mix(in srgb, var(--c, var(--ed-orange)) 12%, transparent);
    border: 1px solid var(--c, var(--ed-orange));
    cursor: pointer;
}
.mine-power-current:hover { background: color-mix(in srgb, var(--c, var(--ed-orange)) 20%, transparent); }
.mine-power-current-name { flex: 1; min-width: 0; overflow: hidden; font-size: var(--fs-xs); color: var(--ed-text); white-space: nowrap; text-overflow: ellipsis; }
.mine-power-change { font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-lg); }
.mine-power-current:hover .mine-power-change { color: var(--ed-text-orange); }

.mine-feature-list { display: flex; flex-direction: column; gap: var(--space-1); }
.mine-feature {
    display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2); font: inherit;
    text-align: left; background: transparent; border: 1px solid var(--ed-border-subtle); cursor: pointer;
}
.mine-feature:hover { border-color: var(--ed-orange); }
.mine-feature.is-active { background: rgb(var(--ed-accent-rgb) / .1); border-color: rgb(var(--ed-accent-rgb) / .4); }
.mine-feature-box {
    display: flex; flex-shrink: 0; align-items: center;
    justify-content: center; width: 16px; height: 16px;
    font-size: var(--fs-2xs); line-height: 1; color: var(--ed-text-orange); border: 1px solid var(--ed-neutral);
}
.mine-feature.is-active .mine-feature-box { border-color: var(--ed-orange); }
.mine-feature-label { display: block; font-size: var(--fs-xs); color: var(--ed-text-secondary); }
.mine-feature.is-active .mine-feature-label { color: var(--ed-text); }
.mine-feature-sub { display: block; margin-top: var(--space-0); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-muted); }

/* --- Board toolbar and pager --- */
.mine-board-bar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ed-border-subtle); }
.mine-board-bar-label { font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl); }
.mine-board-bar-spacer { flex: 1; }
.mine-board-count { font-size: var(--fs-2xs); color: var(--ed-text-muted); white-space: nowrap; }

.mine-pills { display: flex; flex-wrap: wrap; gap: var(--space-1); min-width: 0; }
.mine-pill {
    display: flex; gap: var(--space-1); align-items: center; padding: var(--space-1) var(--space-2);
    font: inherit; font-size: var(--fs-2xs);
    letter-spacing: var(--ls-sm); background: rgb(var(--ed-accent-rgb) / .12);
    border: 1px solid rgb(var(--ed-accent-rgb) / .4); cursor: pointer;
}
.mine-pill:hover { background: rgb(var(--ed-accent-rgb) / .22); border-color: var(--ed-orange); }
.mine-pill-k { color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-lg); }
.mine-pill-v { color: var(--ed-text-orange); }
.mine-pill-x { font-size: var(--fs-xs); line-height: 1; color: var(--ed-text-muted); }
.mine-pill:hover .mine-pill-x { color: var(--ed-red-text); }

.mine-empty { padding: var(--space-7) var(--space-4); text-align: center; }
.mine-empty-glyph { margin-bottom: var(--space-3); font-size: var(--fs-4xl); line-height: 1; color: var(--ed-border-strong); }
.mine-empty-title { margin-bottom: var(--space-1); font-size: var(--fs-sm); color: var(--ed-text); text-transform: uppercase; letter-spacing: var(--ls-md); }
.mine-empty-sub { max-width: 60ch; margin: 0 auto var(--space-4); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--ed-text-muted); }
.mine-empty.is-error .mine-empty-title { color: var(--ed-red-text); }
.mine-empty.is-error .mine-empty-glyph { color: rgb(var(--ed-red-rgb) / .5); }

.mine-skeleton { display: flex; flex-direction: column; }
.mine-skeleton-row {
    display: grid; grid-template-columns: var(--space-5) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-4); align-items: center; padding: var(--space-5) var(--space-4);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06);
}
.mine-skeleton-row span { height: var(--space-3); background: rgb(var(--ed-white-rgb) / .06); animation: mineSkeleton 1.4s ease-in-out infinite; }
@keyframes mineSkeleton { 50% { opacity: .35; } }

.mine-pager { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--ed-border-subtle); }
.mine-pager-info { font-size: var(--fs-2xs); color: var(--ed-text-muted); }
.mine-pager-info strong { font-weight: 600; color: var(--ed-text); }
.mine-pager-btns { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.mine-pager-btn {
    min-width: 28px; padding: var(--space-1) var(--space-2); font: inherit; font-size: var(--fs-2xs); color: var(--ed-text-muted);
    background: transparent; border: 1px solid var(--ed-border-subtle); cursor: pointer;
}
.mine-pager-btn:hover:not(:disabled) { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.mine-pager-btn.active { color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .16); border-color: rgb(var(--ed-accent-rgb) / .5); }
.mine-pager-btn:disabled { opacity: .35; cursor: not-allowed; }

/* --- Board rows: ONE grid for header and rows, plus an acquire variant. The board is only 740-860px wide at several window widths, so the name column
   is the heaviest track and the distance meter the lightest; minimums total ~710px (730 with the 44px touch index). --- */
.mbx-head, .mbx-row {
    --mbx-idx: 24px;
    display: grid;
    grid-template-columns: var(--mbx-idx) minmax(160px, 1.5fr) 108px minmax(88px, .7fr) minmax(140px, 1.3fr) 96px;
    gap: 0 var(--space-3); align-items: center;
}
.mbx-head.is-acquire, .mbx-row.is-acquire {
    grid-template-columns: var(--mbx-idx) minmax(160px, 1.4fr) minmax(130px, 1.1fr) minmax(88px, .8fr) 104px 96px;
}
.mbx-head {
    padding: var(--space-2) var(--space-4); font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--ed-text-orange);
    text-transform: uppercase; letter-spacing: var(--ls-md); background: var(--ed-bg-elevated); background-image: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / .12) 0%, transparent 60%); box-shadow: inset 0 -2px 0 var(--ed-orange);
}
.mbx-head .mbx-right { text-align: right; }
.mbx-head .mbx-center { text-align: center; }
.mbx-sort-label { display: none; }
.mbx-sortable { user-select: none; }
.mbx-sortable:hover { color: var(--ed-text); }
.mbx-sortable.is-sorted { color: var(--ed-text); }
.mbx-sellhead { display: flex; gap: var(--space-2); justify-content: flex-end; }
.mbx-sellhead .mbx-sortable { white-space: nowrap; }
.mbx-head .mbx-sort-dist { container: mbx-dist-head / inline-size; white-space: nowrap; }

.mbx-row {
    position: relative; padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .06); border-left: 3px solid var(--row-accent, transparent);
    transition: background .15s;
    cursor: pointer;
}
.mbx-row:hover { background: rgb(var(--ed-accent-rgb) / .08); }
.mbx-row.is-selected { background: rgb(var(--ed-accent-rgb) / .1); }

/* The keyboard's way into a row: the row itself is only a mouse and touch shortcut. */
.mbx-pick {
    display: flex; align-items: center; align-self: stretch; margin: 0;
    padding: 0; font-size: var(--fs-2xs); color: var(--ed-text-muted); text-align: left; background: none; border: 0; border-radius: 0;
    cursor: pointer; appearance: none;
}
.mbx-row.is-selected .mbx-pick { color: var(--ed-text-orange); }

.mbx-sys { min-width: 0; }
.mbx-sys-head { display: flex; gap: var(--space-2); align-items: center; }
/* The name tells rows apart (procedural designations differ only at the end), so it wraps instead of ending in an ellipsis. */
.mbx-sys-name {
    display: flex; align-items: center; min-width: 0; min-height: var(--tap-min-fine); padding: var(--space-1) 0;
    font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--ed-text); overflow-wrap: anywhere;
}
.mbx-sys-name:hover { color: var(--ed-text-orange); }
.mbx-feats { display: flex; flex-shrink: 0; gap: var(--space-1); }
.mbx-feat { font-size: var(--fs-xs); }
.mbx-feat-rings { color: var(--ed-state-fortified); }
.mbx-feat-haz { color: var(--ed-red-text); }
.mbx-sys-sub { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: center; font-size: var(--fs-xs); color: var(--ed-text-muted); }
.mbx-coords { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mbx-sec { flex-shrink: 0; letter-spacing: var(--ls-sm); }

.mbx-state-cell { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; min-width: 0; }
.mbx-state {
    display: inline-block; padding: var(--space-1) var(--space-2); font-size: var(--fs-2xs);
    font-weight: 700; color: var(--c, var(--ed-text-muted)); text-transform: uppercase;
    letter-spacing: var(--ls-lg); background: var(--bg, rgb(var(--ed-muted-rgb) / .14));
}
.mbx-power { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.mbx-power-name { font-size: var(--fs-2xs); color: var(--c, var(--ed-text)); letter-spacing: var(--ls-sm); white-space: nowrap; }

.mbx-dist { min-width: 0; }
.mbx-meter { position: relative; height: var(--space-2); background: rgb(var(--ed-white-rgb) / .05); }
.mbx-meter-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--c, var(--ed-neutral)); opacity: .85; }
.mbx-meter-caption { display: flex; justify-content: space-between; margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--ed-text-muted); }
.mbx-meter-val { color: var(--ed-text); }

.mbx-rings { min-width: 0; }
.mbx-hot-list { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.mbx-hot {
    display: inline-flex; gap: var(--space-1); align-items: center;
    max-width: 100%; padding: var(--space-0) var(--space-2); font-size: var(--fs-xs); line-height: var(--lh-snug);
    color: var(--ed-text-secondary); letter-spacing: var(--ls-sm); overflow-wrap: anywhere;
    background: rgb(var(--ed-fortified-rgb) / .1); border: 1px solid rgb(var(--ed-fortified-rgb) / .25);
}
.mbx-hot-n { font-weight: 700; color: var(--ed-state-fortified); }
.mbx-hot-more { padding: var(--space-0) var(--space-1); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-muted); border: 1px dashed var(--ed-border-strong); }
.mbx-rings-none { font-size: var(--fs-xs); color: var(--ed-text-muted); }

/* The hotspot matching the best-selling commodity, the one earning the price on that row. Lit, and marked with a diamond so it is not
   colour alone. */
.mbx-hot.is-money {
    color: var(--ed-text);
    background: rgb(var(--ed-green-rgb) / .12);
    border-color: rgb(var(--ed-green-rgb) / .5);
}
.mbx-hot.is-money::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; background: var(--ed-green); transform: rotate(45deg); }
.mbx-hot.is-money .mbx-hot-n { color: var(--ed-green); }

/* The tint is mixed into the board surface, not translucent: over a hover/selected tint it dragged the red and orange badges to 4.2-4.4:1. */
.mbx-reserve {
    padding: var(--space-0) var(--space-2); font-size: var(--fs-2xs); font-weight: 700; color: var(--c, var(--ed-text-muted));
    text-transform: uppercase; letter-spacing: var(--ls-md);
    white-space: nowrap;
    background: color-mix(in srgb, var(--c, var(--ed-text-muted)) 14%, var(--ed-bg-surface));
    border: 1px solid color-mix(in srgb, var(--c, var(--ed-text-muted)) 40%, transparent);
}

.mbx-sell { text-align: right; }
.mbx-sell-price { font-size: var(--fs-base); color: var(--ed-green); }
.mbx-sell-unit { font-size: var(--fs-2xs); color: var(--ed-text-muted); }
.mbx-sell-meta { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--ed-text-muted); }
.mbx-sell-meta abbr { text-decoration: none; }
.mbx-sell-none { font-size: var(--fs-xs); color: var(--ed-text-muted); }
.mbx-age {
    padding: var(--space-0) var(--space-1); font-size: var(--fs-2xs); color: var(--c, var(--ed-text-muted));
    white-space: nowrap;
    background: color-mix(in srgb, var(--c, var(--ed-text-muted)) 14%, var(--ed-bg-surface));
    border: 1px solid color-mix(in srgb, var(--c, var(--ed-text-muted)) 35%, transparent);
}

.mbx-race { min-width: 0; }
.mbx-race-bar { position: relative; height: var(--space-2); background: rgb(var(--ed-white-rgb) / .05); }
.mbx-race-mine { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ed-green); opacity: .8; }
.mbx-race-rival { position: absolute; top: calc(-1 * var(--space-1)); bottom: calc(-1 * var(--space-1)); width: 2px; background: var(--ed-red); }
.mbx-race-caption { display: flex; gap: var(--space-2); justify-content: space-between; margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--ed-text-muted); }
.mbx-race-you { color: var(--c, var(--ed-text-muted)); white-space: nowrap; }
.mbx-race-rival-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mbx-nearby { text-align: center; }
.mbx-nearby-count { font-size: var(--fs-lg); font-weight: 700; color: var(--ed-state-fortified); }
.mbx-nearby-label { display: block; font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-md); }
.mbx-nearby-hot { display: block; margin-top: var(--space-0); font-size: var(--fs-xs); color: var(--ed-text-muted); }

.mbx-detail {
    padding: var(--space-4); container-type: inline-size;
    background: var(--ed-bg-elevated); border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .25);
    border-left: 3px solid var(--ed-orange);
}
.mbx-row.is-open { border-bottom-color: transparent; }

/* --- Inspector --- */
.min-card { --min-list-max: 340px; background: var(--ed-bg-surface); border: 1px solid rgb(var(--ed-accent-rgb) / .15); }
.min-card.is-inline { --min-list-max: 360px; background: transparent; border: 0; }
.min-head-hint { font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: none; letter-spacing: var(--ls-sm); }
.min-body { padding: var(--space-4); }
.min-card.is-inline .min-body { padding: 0; }
.min-placeholder { padding: var(--space-7) var(--space-4); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--ed-text-muted); text-align: center; }
.min-placeholder-glyph { margin-bottom: var(--space-2); font-size: var(--fs-3xl); line-height: 1; color: var(--ed-border-strong); }

.min-identity { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.min-sev { align-self: stretch; width: 3px; background: var(--c, var(--ed-neutral)); }
.min-identity-main { flex: 1; min-width: 0; }
.min-name { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: var(--ls-xs); overflow-wrap: anywhere; }
.min-identity-sub { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-1); }
.min-state {
    display: inline-block; padding: var(--space-1) var(--space-2); font-size: var(--fs-2xs);
    font-weight: 700; color: var(--c, var(--ed-text-muted)); text-transform: uppercase;
    letter-spacing: var(--ls-lg); background: var(--bg, rgb(var(--ed-muted-rgb) / .14));
}
.min-coords { font-size: var(--fs-xs); color: var(--ed-text-muted); }

.min-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 var(--space-3); background: var(--ed-border-subtle); }
.min-fact { padding: var(--space-2) var(--space-3); background: var(--ed-bg-elevated); }
.min-fact-label { margin: 0 0 var(--space-1); font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-lg); }
.min-fact-value { margin: 0; color: var(--c, var(--ed-text)); }
.min-fact-dim { color: var(--ed-text-muted); }
.min-fact-sub { font-size: var(--fs-2xs); color: var(--ed-text-muted); }
.min-fact-small { font-size: var(--fs-xs); }

.min-sell { margin-bottom: var(--space-3); padding: var(--space-3); background: rgb(var(--ed-green-rgb) / .06); border-left: 2px solid var(--ed-green); }
.min-sell-head { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; justify-content: space-between; }
.min-sell-label { font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-lg); }
.min-sell-age { font-size: var(--fs-xs); color: var(--c, var(--ed-text-muted)); }
.min-sell-price { margin-top: var(--space-1); font-size: var(--fs-xl); color: var(--ed-green); }
.min-sell-unit { font-size: var(--fs-2xs); color: var(--ed-text-muted); }
.min-sell-stn { margin-top: var(--space-1); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-secondary); overflow-wrap: anywhere; }

.min-section-label { margin: 0 0 var(--space-2); font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: var(--ls-xl); }
.min-race { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.min-race-row { display: flex; gap: var(--space-2); align-items: center; }
.min-race-who { flex: 0 0 88px; overflow: hidden; font-size: var(--fs-xs); color: var(--ed-text-secondary); white-space: nowrap; text-overflow: ellipsis; }
.min-race-track { flex: 1; height: var(--space-2); background: rgb(var(--ed-white-rgb) / .05); }
.min-race-track > span { display: block; height: 100%; }
.min-race-track > .is-mine { background: var(--ed-green); }
.min-race-track > .is-rival { background: var(--ed-red); }
.min-race-val { flex: 0 0 4ch; font-size: var(--fs-xs); color: var(--ed-text); text-align: right; }

.min-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); }
.min-tab {
    flex: 1; padding: var(--space-2); font: inherit; font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-lg); background: transparent; border: 1px solid var(--ed-border-subtle); cursor: pointer;
}
.min-tab:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.min-tab.is-active { color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .16); border-color: rgb(var(--ed-accent-rgb) / .5); }

.min-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: var(--min-list-max); overflow-y: auto; }
.min-ring { padding: var(--space-2) var(--space-3); background: var(--ed-bg-elevated); border-left: 2px solid var(--ed-border-subtle); }
.min-ring.is-matched { border-left-color: var(--ed-state-fortified); }
.min-ring-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.min-ring-body { font-size: var(--fs-xs); }
.min-ring-class,
.min-ring-reserve { font-size: var(--fs-2xs); color: var(--c, var(--ed-text-muted)); text-transform: uppercase; letter-spacing: var(--ls-md); }
.min-ring-hots { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.min-hot {
    padding: var(--space-0) var(--space-2); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-secondary);
    white-space: nowrap; background: rgb(var(--ed-fortified-rgb) / .1); border: 1px solid rgb(var(--ed-fortified-rgb) / .25);
}
.min-hot-n { font-weight: 700; color: var(--ed-state-fortified); }
.min-empty-inline { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--ed-text-muted); }
.min-empty { padding: var(--space-4) var(--space-1); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--ed-text-muted); text-align: center; }

.min-near { padding: var(--space-2) var(--space-3); background: var(--ed-bg-elevated); border-left: 2px solid var(--ed-state-fortified); }
.min-near-head { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; }
.min-near-name { display: inline-flex; align-items: center; min-height: var(--tap-min-fine); font-size: var(--fs-xs); color: var(--ed-text); overflow-wrap: anywhere; }
.min-near-name:hover { color: var(--ed-text-orange); }
.min-near-dist { font-size: var(--fs-xs); color: var(--ed-text-muted); white-space: nowrap; }
.min-near-rings { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }

.min-stn { padding: var(--space-2) var(--space-3); background: var(--ed-bg-elevated); border-left: 2px solid var(--ed-green); }
.min-stn-head { display: flex; gap: var(--space-2); align-items: baseline; justify-content: space-between; }
.min-stn-name { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text); overflow-wrap: anywhere; }
.min-stn-price { font-size: var(--fs-xs); color: var(--ed-green); white-space: nowrap; }
.min-stn-sub { display: flex; gap: var(--space-2); justify-content: space-between; margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--ed-text-muted); }

.min-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.min-btn {
    display: flex; align-items: center; justify-content: center; min-height: var(--tap-min-fine); padding: var(--space-2) var(--space-3);
    font: inherit; font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-lg);
    background: transparent; border: 1px solid var(--ed-border-subtle); cursor: pointer;
}
.min-btn:hover { color: var(--ed-text-orange); border-color: var(--ed-orange); }
.min-btn-primary { flex: 1; color: var(--ed-text-orange); background: rgb(var(--ed-accent-rgb) / .12); border-color: rgb(var(--ed-accent-rgb) / .5); }
.min-btn-primary:hover { background: rgb(var(--ed-accent-rgb) / .2); }

/* --- Responsive --- */

/* The Distance suffix needs ~137px (144 with a four-digit range) and no board-wide breakpoint tracked that column, so the heading asks its own box.
   nowrap keeps a longer range on one line instead of orphaning the arrow. */
@container mbx-dist-head (max-width: 13.25em) {
    .mbx-head-range { display: none; }
}

@container (min-width: 40rem) {
    .mbx-detail .min-body { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
    .mbx-detail .min-summary > :last-child { margin-bottom: 0; }
}

@media (min-width: 93.8125em) {
    .mbx-detail { display: none; }
}
@media (max-width: 93.75em) {
    .mine-inspect-col { display: none; }
    /* With no inspector to feed, the default-selected first row is not "selected": only a row the visitor opened is lit. */
    .mbx-row.is-selected:not(.is-open) { background: transparent; border-left-color: transparent; }
    .mbx-row.is-selected:not(.is-open):hover { background: rgb(var(--ed-accent-rgb) / .08); }
    .mbx-row.is-selected:not(.is-open) .mbx-pick { color: var(--ed-text-muted); }
    .mbx-row.is-open { background: rgb(var(--ed-accent-rgb) / .1); border-left-color: var(--row-accent, var(--ed-orange)); }
    .mbx-row.is-open .mbx-pick { color: var(--ed-text-orange); }
}

/* Rail above the board, behind a toggle. */
@media (max-width: 68.75em) {
    .mine-page { flex-direction: column; align-items: stretch; }
    .mine-page > .mine-rail { flex: 0 0 auto; width: 100%; }
    .mine-rail .mine-rail-toggle { display: inline-flex; align-items: center; }
    .mine-rail:not(.is-open) .mine-rail-panel { display: none; }
    /* Filter groups flow into as many columns as fit. A column holds the Reserve level row (about 266px of chips) plus the section's 24px
       of padding, so 18.5rem; at 15rem it made four columns on a 1060px screen and the row stuck out of the rail. */
    .mine-rail .mine-rail-body { column-gap: var(--space-4); column-width: 18.5rem; }
    .mine-rail-body > .sys-rail-section { break-inside: avoid; }
}

@media (pointer: coarse) {
    .mbx-head, .mbx-row { --mbx-idx: var(--tap-min); }
    .mine-chip, .mine-pager-btn, .mine-rail-clear, .mine-rail-toggle, .mine-pill, .min-btn-icon { min-width: var(--tap-min); }
    .mbx-sys-name { min-width: var(--tap-min); min-height: var(--tap-min); }
    .min-near-name, .min-btn { min-height: var(--tap-min); }
    .mbx-pick { justify-content: center; }
}

@media (max-width: 80em) {
    .mhd-strip > .mhd-sep { display: none; }
}
@media (max-width: 56.25em) {
    .mhd-spacer { display: none; }
    .mhd-tabs { flex: 1 1 100%; }
    .mhd-tab { flex: 1; justify-content: center; min-width: 0; }
}
@media (max-width: 35em) {
    .mine-skeleton-row { grid-template-columns: var(--space-5) minmax(0, 1fr) minmax(0, 1fr); }
    .mine-skeleton-row span:nth-child(n+4) { display: none; }
}
@media (max-width: 25em) {
    .mhd-tab { padding: var(--space-2); letter-spacing: var(--ls-md); }
}

@media (max-width: 51.25em) {

    .mbx-head { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding: var(--space-3); }
    .mbx-head-idx, .mbx-colhead, .mbx-head-range { display: none; }
    /* A flex item with size containment would collapse to its padding. */
    .mbx-head .mbx-sort-dist { container-type: normal; }
    .mbx-sort-label { display: inline; color: var(--ed-text-muted); }
    .mbx-sortable, .mbx-sellhead .mbx-sortable { padding: var(--space-1) var(--space-2); border: 1px solid var(--ed-border-subtle); }
    .mbx-sellhead { display: contents; }

    .mbx-row, .mbx-row.is-acquire {
        grid-template-columns: var(--tap-min) minmax(0, 1fr) auto;
        grid-template-areas: "idx sys state" "idx dist dist" "idx rings rings" "idx sell sell";
        gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-3);
    }
    /* Nearby mining has a row of its own. Sharing the distance row made the distance meter whatever width the "N systems / M hotspots" text left
       over (9px on a 320px phone), so the bars of two cards could not be compared; now every card's track is as long as a Reinforce card's. */
    .mbx-row.is-acquire { grid-template-areas: "idx sys sys" "idx race race" "idx dist dist" "idx nearby nearby" "idx sell sell"; }
    .mbx-pick { grid-area: idx; justify-content: center; border-right: 1px solid var(--ed-border-subtle); }
    .mbx-sys { grid-area: sys; }
    .mbx-state-cell { grid-area: state; align-items: flex-end; }
    .mbx-race { grid-area: race; }
    .mbx-dist { display: flex; grid-area: dist; gap: var(--space-3); align-items: center; }
    .mbx-dist .mbx-meter { flex: 1; }
    .mbx-dist .mbx-meter-caption { margin-top: 0; white-space: nowrap; }
    .mbx-rings { grid-area: rings; }
    .mbx-nearby { display: flex; grid-area: nearby; gap: var(--space-2); align-items: baseline; justify-content: flex-start; text-align: left; }
    .mbx-nearby-label, .mbx-nearby-hot { display: inline; margin-top: 0; }
    .mbx-sell { display: flex; flex-wrap: wrap; grid-area: sell; gap: var(--space-1) var(--space-3); align-items: baseline; text-align: left; }
    .mbx-sell-meta { justify-content: flex-start; margin-top: 0; }

    .mbx-coords { white-space: normal; }

    .mbx-detail { padding: var(--space-3); border-left-width: 2px; }
}

/* Phone: --page-gutter already narrows the sides; these keep the vertical rhythm. */
@media (max-width: 45em) {
    .mine-page { padding-bottom: var(--space-5); }
    .mhd-strip { padding-bottom: var(--space-3); }
    .mine-board-bar { padding: var(--space-3); }
    .mine-board-bar-spacer { flex: 1 1 100%; height: 0; margin: calc(-1 * var(--space-1)) 0; }
}

/* === ADMIN (/admin, /admin/login) === */
/* Same tokens as the app. Buttons get the global 44px floor on coarse pointers; the min-width rules below finish the job for short labels. */

.adm-mono { font-family: var(--ed-font-mono); }

/* --- Login --- */
.adm-login {
    display: flex; align-items: center; justify-content: center;
    min-height: 70vh; padding: var(--space-5) var(--page-gutter);
}

.adm-login-card {
    width: 100%; max-width: 380px; padding: var(--space-6) var(--space-5);
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border);
    box-shadow: 0 0 40px rgb(var(--ed-black-rgb) / .5);
}

.adm-login-head { margin-bottom: var(--space-5); text-align: center; }

.adm-login-sigil {
    width: 44px; height: 44px; margin: 0 auto var(--space-4);
    border: 2px solid var(--ed-orange);
    box-shadow: 0 0 18px var(--ed-orange-glow);
    transform: rotate(45deg);
}

.adm-login-title {
    margin: 0; font-size: var(--h1-strip); font-weight: 700; line-height: var(--lh-tight);
    color: var(--ed-text); letter-spacing: var(--ls-xl);
    text-shadow: none;
}

.adm-login-sub {
    margin: var(--space-2) 0 0; font-size: var(--fs-2xs); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-md);
}

.adm-login-form { display: flex; flex-direction: column; gap: var(--space-2); }

.adm-login-label {
    font-size: var(--fs-2xs); font-weight: 700; color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-lg);
}

.adm-login-input {
    padding: var(--space-3); font-size: var(--fs-base);
    color: var(--ed-text); background: var(--ed-bg-input);
    border: 1px solid var(--ed-border-subtle);
}
.adm-login-input:focus { border-color: var(--ed-orange); }
.adm-login-input[aria-invalid="true"] { border-color: var(--ed-red-text); }

.adm-login-btn {
    margin-top: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--fs-xs);
    font-weight: 700; color: var(--ed-bg-body); text-transform: uppercase; letter-spacing: var(--ls-lg);
    background: var(--ed-orange); border: none; transition: background-color .15s ease;
    cursor: pointer;
}
.adm-login-btn:hover { background: var(--ed-text-orange); }

.adm-login-error {
    margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); line-height: var(--lh-snug);
    color: var(--ed-red-pale); background: rgb(var(--ed-red-rgb) / .1);
    border: 1px solid rgb(var(--ed-red-rgb) / .4);
}

.adm-login-foot {
    margin: var(--space-5) 0 0; font-size: var(--fs-2xs);
    color: var(--ed-text-muted); text-align: center; letter-spacing: var(--ls-sm);
}

/* --- Page frame --- */
.adm-page { max-width: 1200px; margin: 0 auto; padding: var(--space-4) var(--page-gutter) var(--space-6); }

/* --- Header strip --- */
.adm-strip {
    display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
    margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
    background: var(--ed-bg-header);
    border: 1px solid var(--ed-border);
    border-left: 3px solid var(--ed-orange);
}

.adm-strip-title { flex: 1 1 16rem; min-width: 0; }

.adm-title {
    margin: 0; font-size: var(--h1-strip); font-weight: 700; line-height: var(--lh-tight);
    color: var(--ed-text); letter-spacing: var(--ls-md);
    text-shadow: none;
}
.adm-title-accent { color: var(--ed-orange); }

.adm-tagline { margin: var(--space-1) 0 0; font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ed-text-muted); }

.adm-strip-controls { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.adm-range { display: flex; border: 1px solid var(--ed-border-subtle); }

.adm-range-btn {
    padding: var(--space-1) var(--space-3); font-size: var(--fs-2xs);
    font-weight: 700; color: var(--ed-text-muted); letter-spacing: var(--ls-md);
    background: transparent; border: none; cursor: pointer;
}
.adm-range-btn + .adm-range-btn { border-left: 1px solid var(--ed-border-subtle); }
.adm-range-btn:hover { color: var(--ed-text); background: var(--ed-bg-hover); }
.adm-range-btn.is-active { color: var(--ed-bg-body); background: var(--ed-orange); }

.adm-icon-btn {
    padding: var(--space-1) var(--space-3); font-size: var(--fs-xs);
    font-weight: 700; color: var(--ed-text-secondary); letter-spacing: var(--ls-md);
    background: var(--ed-bg-input); border: 1px solid var(--ed-border-subtle);
    cursor: pointer;
}
.adm-icon-btn:hover { color: var(--ed-text); border-color: var(--ed-border-strong); }
.adm-icon-btn:disabled { opacity: .5; cursor: default; }
.adm-signout:hover { color: var(--ed-red-pale); border-color: rgb(var(--ed-red-rgb) / .5); }

.adm-error {
    display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
    margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); font-size: var(--fs-xs); line-height: var(--lh-snug);
    color: var(--ed-red-pale); background: rgb(var(--ed-red-rgb) / .1);
    border: 1px solid rgb(var(--ed-red-rgb) / .4);
}
.adm-error-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* --- Stat tiles --- */
.adm-tiles {
    display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--space-4);
}
.adm-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 62.5em) {
    .adm-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .adm-tiles > :last-child:nth-child(odd) { grid-column: auto; }
}

.adm-tile {
    min-width: 0; padding: var(--space-3) var(--space-4);
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-subtle);
    border-top: 2px solid var(--ed-border-subtle);
}
.adm-tile.is-primary { border-top-color: var(--ed-orange); }
.adm-tile.is-alert { border-top-color: var(--ed-red); }

.adm-tile-label {
    font-size: var(--fs-2xs); font-weight: 700; line-height: var(--lh-snug); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-lg);
}

.adm-tile-value {
    margin-top: var(--space-2); font-size: var(--fs-3xl); font-weight: 700;
    line-height: var(--lh-tight); }
.adm-value-dim { color: var(--ed-text-muted); }

.adm-tile-foot {
    display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline;
    margin-top: var(--space-2); font-size: var(--fs-xs); line-height: var(--lh-snug);
}
.adm-tile-foot-dim { color: var(--ed-text-muted); }

.adm-delta { font-weight: 700; color: var(--ed-text-muted); }
.adm-delta.is-up { color: var(--ed-green); }
.adm-delta.is-down { color: var(--ed-red-text); }

/* --- Panels --- */
.adm-panel {
    min-width: 0; margin-bottom: var(--space-4); padding: var(--space-4);
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-subtle);
}

.adm-panel-head {
    display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
    margin-bottom: var(--space-4);
}

.adm-panel-title {
    margin: 0; font-size: var(--fs-xs); font-weight: 700; line-height: var(--lh-snug);
    color: var(--ed-text-secondary); letter-spacing: var(--ls-lg);
}

.adm-empty { margin: 0; padding: var(--space-4) 0; font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--ed-text-muted); }
.adm-empty.is-failed { color: var(--ed-red-text); }

.adm-split {
    display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--space-4);
}
.adm-split > .adm-panel { margin-bottom: 0; }
@media (max-width: 56.25em) { .adm-split { grid-template-columns: minmax(0, 1fr); } }

/* --- Chart --- */
/* The graphic is SVG stretched to the plot box (non-scaling strokes); the axis text is HTML, since SVG text rendered at 2px on a phone. */
.adm-chart {
    --adm-plot-h: 12.5rem;
    display: grid; column-gap: var(--space-2); grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-rows: var(--adm-plot-h) auto;
}
@media (max-width: 40em) { .adm-chart { --adm-plot-h: 10rem; grid-template-columns: 2.5rem minmax(0, 1fr); } }

.adm-chart-y { position: relative; }
.adm-chart-tick {
    position: absolute; right: 0; font-family: var(--ed-font-mono);
    font-size: var(--fs-2xs); line-height: 1; color: var(--ed-text-muted); transform: translateY(50%);
}
.adm-chart-tick:nth-child(1) { bottom: 0; }
.adm-chart-tick:nth-child(2) { bottom: 25%; }
.adm-chart-tick:nth-child(3) { bottom: 50%; }
.adm-chart-tick:nth-child(4) { bottom: 75%; }
.adm-chart-tick:nth-child(5) { bottom: 100%; }

.adm-chart-plot { position: relative; }
.adm-chart-svg { display: block; width: 100%; height: 100%; overflow: visible; }

.adm-chart-grid { stroke: rgb(var(--ed-white-rgb) / .06); vector-effect: non-scaling-stroke; }
.adm-chart-bar { fill: rgb(var(--ed-blue-rgb) / .35); }
.adm-chart-bar:hover { fill: rgb(var(--ed-blue-rgb) / .55); }
.adm-chart-line {
    fill: none; stroke: var(--ed-orange); stroke-linecap: round;
    stroke-linejoin: round; stroke-width: 2; vector-effect: non-scaling-stroke;
}
/* A zero-length segment with a round cap is a dot that never stretches with the box. */
.adm-chart-dot { stroke: var(--ed-orange); stroke-linecap: round; stroke-width: 6; vector-effect: non-scaling-stroke; }

.adm-chart-x { position: relative; grid-column: 2; height: 1.25rem; margin-top: var(--space-2); }
.adm-chart-xl {
    position: absolute; top: 0; font-family: var(--ed-font-mono); font-size: var(--fs-2xs);
    line-height: 1; color: var(--ed-text-muted); white-space: nowrap; transform: translateX(-50%);
}
@media (max-width: 40em) { .adm-chart-xl.is-optional { display: none; } }

.adm-legend { display: flex; gap: var(--space-4); margin-left: auto; }

.adm-legend-item {
    display: inline-flex; gap: var(--space-2); align-items: center;
    font-size: var(--fs-2xs); color: var(--ed-text-muted); text-transform: uppercase;
    letter-spacing: var(--ls-md);
}

.adm-swatch { display: inline-block; width: 10px; height: 10px; }
.adm-swatch-bar { background: rgb(var(--ed-blue-rgb) / .5); }
.adm-swatch-line { height: 3px; background: var(--ed-orange); }

.adm-data { margin-top: var(--space-3); padding-top: var(--space-1); border-top: 1px solid var(--ed-border-subtle); }
.adm-data > summary {
    display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-xs);
    color: var(--ed-text-secondary); letter-spacing: var(--ls-sm); cursor: pointer;
}
.adm-data > summary::before { content: '+'; width: 1ch; font-family: var(--ed-font-mono); color: var(--ed-text-muted); }
.adm-data[open] > summary::before { content: '\2212'; }
.adm-data > summary:hover { color: var(--ed-text); }
.adm-data-scroll { max-width: 32rem; max-height: 20rem; margin-top: var(--space-2); overflow: auto; }

/* --- Tables --- */
.adm-table { width: 100%; font-size: var(--fs-xs); border-collapse: collapse; }

.adm-table th {
    padding: var(--space-2); font-size: var(--fs-2xs);
    color: var(--ed-text-muted); text-align: left;
    text-transform: uppercase; letter-spacing: var(--ls-md);
    border-bottom: 1px solid var(--ed-border-subtle);
}

.adm-table td {
    padding: var(--space-2); line-height: var(--lh-snug); color: var(--ed-text-secondary);
    border-bottom: 1px solid rgb(var(--ed-white-rgb) / .04);
}
.adm-table tr:hover td { background: rgb(var(--ed-white-rgb) / .02); }

.adm-table .adm-num { text-align: right; white-space: nowrap; }
.adm-table .adm-num-dim { color: var(--ed-text-muted); }
.adm-table .adm-row-head {
    font-size: var(--fs-xs); font-weight: 400; color: var(--ed-text-secondary); text-transform: none;
    letter-spacing: normal; border-bottom: 1px solid rgb(var(--ed-white-rgb) / .04);
}

.adm-path { position: relative; overflow-wrap: anywhere; }
.adm-path-bar {
    position: absolute; top: var(--space-0); bottom: var(--space-0); left: 0;
    background: rgb(var(--ed-blue-rgb) / .12); pointer-events: none;
}
.adm-path a { position: relative; color: var(--ed-text); }
.adm-path a:hover { color: var(--ed-orange); text-decoration: underline; }
@media (pointer: coarse) {
    .adm-path a { display: flex; align-items: center; min-height: var(--tap-min); }
}

/* Stored path/URL that failed the href safety check - shown, never linked. */
.adm-path-unsafe { color: var(--ed-text-muted); text-decoration: line-through; cursor: help; }

/* --- Feedback inbox --- */
.adm-filters { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin-left: auto; }
.adm-filter-group { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }

.adm-tab {
    display: inline-flex; gap: var(--space-2); align-items: center;
    padding: var(--space-1) var(--space-3); font-size: var(--fs-2xs);
    font-weight: 700; color: var(--ed-text-muted); letter-spacing: var(--ls-sm);
    background: transparent; border: 1px solid var(--ed-border-subtle);
    cursor: pointer;
}
.adm-tab:hover { color: var(--ed-text); background: var(--ed-bg-hover); }
.adm-tab.is-active { color: var(--ed-text); background: rgb(var(--ed-accent-rgb) / .12); border-color: var(--ed-orange); }
.adm-tab-count { color: var(--ed-text-muted); }
.adm-tab.is-active .adm-tab-count { color: var(--ed-text-orange); }

.adm-feed { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.adm-feed-item {
    min-width: 0; padding: var(--space-3) var(--space-4);
    background: var(--ed-bg-elevated);
    border: 1px solid var(--ed-border-subtle);
    border-left: 3px solid var(--ed-border-subtle);
}
.adm-feed-item.is-new { border-left-color: var(--ed-orange); }

.adm-feed-head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; justify-content: space-between; }
.adm-feed-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-width: 0; }
.adm-feed-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-left: auto; }

.adm-badge {
    padding: var(--space-0) var(--space-2); font-size: var(--fs-2xs); font-weight: 700; line-height: var(--lh-snug);
    text-transform: uppercase; letter-spacing: var(--ls-md);
}
.adm-badge.is-bug { color: var(--ed-red-pale); background: rgb(var(--ed-red-rgb) / .14); border: 1px solid rgb(var(--ed-red-rgb) / .4); }
.adm-badge.is-feedback { color: var(--ed-blue); background: rgb(var(--ed-blue-rgb) / .14); border: 1px solid rgb(var(--ed-blue-rgb) / .4); }

.adm-badge-status { color: var(--ed-text-muted); border: 1px solid var(--ed-border-subtle); }
.adm-badge-status.is-new { color: var(--ed-text-orange); border-color: rgb(var(--ed-accent-rgb) / .5); }
.adm-badge-status.is-resolved { color: var(--ed-green); border-color: rgb(var(--ed-green-rgb) / .4); }

.adm-feed-page {
    display: inline-flex; align-items: center; min-height: var(--tap-min-fine);
    font-size: var(--fs-xs); color: var(--ed-text-secondary); overflow-wrap: anywhere;
}
.adm-feed-page:hover { color: var(--ed-orange); text-decoration: underline; }
@media (pointer: coarse) { .adm-feed-page { min-width: var(--tap-min); min-height: var(--tap-min); } }

.adm-feed-time { font-size: var(--fs-xs); color: var(--ed-text-muted); }

.adm-feed-message {
    max-width: 80ch; margin: var(--space-3) 0 0; font-size: var(--fs-sm); line-height: var(--lh-normal);
    color: var(--ed-text); white-space: pre-wrap; overflow-wrap: anywhere;
}

.adm-feed-meta {
    display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
    margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--ed-text-muted);
}
.adm-feed-contact { overflow-wrap: anywhere; }
.adm-feed-contact strong { color: var(--ed-text-secondary); }
.adm-feed-ua { cursor: help; }

.adm-mini {
    padding: var(--space-1) var(--space-3); font-size: var(--fs-2xs);
    font-weight: 700; color: var(--ed-text-muted); letter-spacing: var(--ls-sm);
    background: transparent; border: 1px solid var(--ed-border-subtle);
    cursor: pointer;
}
.adm-mini:hover { color: var(--ed-text); background: var(--ed-bg-hover); }
.adm-mini:disabled { opacity: .4; cursor: default; }
.adm-mini.is-ok:hover { color: var(--ed-green); border-color: rgb(var(--ed-green-rgb) / .5); }
.adm-mini.is-danger { min-width: 5rem; }
.adm-mini.is-danger:hover,
.adm-mini.is-danger.is-armed { color: var(--ed-red-pale); border-color: rgb(var(--ed-red-rgb) / .5); }
.adm-mini.is-danger.is-armed { background: rgb(var(--ed-red-rgb) / .14); }

.adm-link-btn {
    padding: 0 var(--space-1); font-size: var(--fs-xs); color: var(--ed-text-secondary);
    text-decoration: underline; text-underline-offset: 2px; background: none;
    border: none; cursor: pointer;
}
.adm-link-btn:hover { color: var(--ed-orange); }

.adm-notes { margin-top: var(--space-2); }

.adm-notes-input {
    width: 100%; padding: var(--space-2); font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--ed-text);
    background: var(--ed-bg-input); border: 1px solid var(--ed-border-subtle);
    resize: vertical;
}
.adm-notes-input:focus { border-color: var(--ed-orange); }

.adm-pager { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.adm-pager-label { font-size: var(--fs-xs); color: var(--ed-text-muted); }

@media (pointer: coarse) {
    .adm-range-btn, .adm-icon-btn, .adm-mini, .adm-tab { min-width: var(--tap-min); }
    .adm-link-btn { min-width: var(--tap-min); }
    /* iOS zooms the page when a focused field is under 16px. */
    .adm-login-input, .adm-notes-input { font-size: var(--fs-md); }
}

/* === FEEDBACK WIDGET (every page except /admin) === */

.fbw-tab {
    /* Bottom-right corner, not a rail up the right edge: the inspector columns run the full height of that edge and a rail would sit on their buttons. */
    position: fixed; z-index: var(--z-feedback);
    right: max(var(--space-4), env(safe-area-inset-right));
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); cursor: pointer;
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--ls-md); text-transform: uppercase;
    color: var(--ed-text); background: rgb(var(--ed-surface-rgb) / .95);
    border: 1px solid var(--ed-border);
    box-shadow: 0 4px 18px rgb(var(--ed-black-rgb) / .55);
    transition: background-color .15s ease, color .15s ease;
}
.fbw-tab:hover { color: var(--ed-orange); background: rgb(var(--ed-accent-rgb) / .18); }
.fbw-tab.is-open { display: none; }

.fbw-tab-icon { display: block; flex: none; width: 16px; height: 16px; }

@media (max-width: 45em) {
    .fbw-tab { right: max(var(--space-2), env(safe-area-inset-right)); bottom: max(var(--space-2), env(safe-area-inset-bottom)); justify-content: center; min-width: var(--tap-min); min-height: var(--tap-min); padding: var(--space-2); }
    .fbw-tab-label { display: none; }
}

.fbw-panel {
    display: flex; position: fixed; right: var(--space-4); bottom: var(--space-4);
    z-index: calc(var(--z-feedback) + 1);
    flex-direction: column;
    width: min(390px, calc(100vw - 2 * var(--space-4)));
    max-height: min(640px, calc(100vh - 2 * var(--space-4))); max-height: min(640px, calc(100dvh - 2 * var(--space-4))); overflow: hidden;
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border);
    box-shadow: 0 12px 44px rgb(var(--ed-black-rgb) / .6);
    animation: fbw-rise .16s ease-out;
}
.fbw-panel:focus { outline: none; }

@keyframes fbw-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fbw-head {
    display: flex; gap: var(--space-3); align-items: center;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    background: var(--ed-bg-header);
    border-bottom: 1px solid var(--ed-border);
}

.fbw-title {
    flex: 1; margin: 0; font-size: var(--fs-xs); font-weight: 700; line-height: var(--lh-snug);
    letter-spacing: var(--ls-lg); }

.fbw-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; font-size: var(--fs-xl); line-height: 1; color: var(--ed-text-muted);
    background: none; border: none; cursor: pointer;
}
.fbw-close:hover { color: var(--ed-orange); }

.fbw-body { padding: var(--space-4); overflow-y: auto; }

.fbw-types { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-4); }

.fbw-type {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-2) var(--space-3); color: inherit; text-align: left;
    background: var(--ed-bg-input); border: 1px solid var(--ed-border-subtle); cursor: pointer;
}
.fbw-type:hover { border-color: var(--ed-border-strong); }
.fbw-type[aria-pressed="true"] { background: rgb(var(--ed-accent-rgb) / .1); border-color: var(--ed-orange); }

.fbw-type-name {
    font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: var(--ls-md); }
.fbw-type-hint { font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--ed-text-muted); }

.fbw-field { margin-bottom: var(--space-4); }

.fbw-label {
    display: block; margin-bottom: var(--space-2);
    font-size: var(--fs-2xs); font-weight: 700; line-height: var(--lh-snug); color: var(--ed-text-muted);
    text-transform: uppercase; letter-spacing: var(--ls-md);
}
.fbw-optional { font-weight: 400; text-transform: none; letter-spacing: var(--ls-sm); }

.fbw-input {
    display: block; width: 100%; padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm); color: var(--ed-text); background: var(--ed-bg-input);
    border: 1px solid var(--ed-neutral);
}
.fbw-input:focus { border-color: var(--ed-orange); }
.fbw-input[aria-invalid="true"] { border-color: var(--ed-red-text); }
.fbw-textarea { line-height: var(--lh-normal); resize: vertical; }

.fbw-hint { margin: var(--space-2) 0 0; font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--ed-text-muted); }

.fbw-context {
    margin: 0 0 var(--space-4); font-size: var(--fs-2xs); line-height: var(--lh-normal); color: var(--ed-text-muted);
}
.fbw-path { font-family: var(--ed-font-mono); overflow-wrap: anywhere; }

.fbw-error {
    margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); line-height: var(--lh-snug);
    color: var(--ed-red-pale); background: rgb(var(--ed-red-rgb) / .1);
    border: 1px solid rgb(var(--ed-red-rgb) / .4);
}

.fbw-submit {
    width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--fs-2xs);
    font-weight: 700; color: var(--ed-bg-body); text-transform: uppercase; letter-spacing: var(--ls-lg);
    background: var(--ed-orange); border: none; cursor: pointer;
}
.fbw-submit:hover:not([aria-disabled="true"]) { background: var(--ed-text-orange); }
.fbw-submit[aria-disabled="true"] { opacity: .6; cursor: default; }

.fbw-thanks { margin: 0 0 var(--space-4); font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ed-text-secondary); }

@media (max-width: 40em) {
    .fbw-panel { right: var(--space-2); bottom: var(--space-2); width: calc(100vw - 2 * var(--space-2)); max-height: calc(100vh - 2 * var(--space-2)); max-height: calc(100dvh - 2 * var(--space-2)); }
}

@media (pointer: coarse) {
    .fbw-close { width: var(--tap-min); height: var(--tap-min); }
    /* iOS zooms the page when a focused field is under 16px. */
    .fbw-input { font-size: var(--fs-md); }
}

/* === 404 AND ERROR (NotFound.razor, Error.razor) === */

.nf {
    max-width: 620px;
    margin: 0 auto;
    padding: var(--space-7) var(--page-gutter) calc(var(--space-7) * 2);
    text-align: center;
}

.nf-code {
    font-family: var(--ed-font-mono);
    font-size: calc(var(--fs-4xl) * 2.4);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--ls-sm);
    /* The dim orange, not the accent at half opacity: that landed at 2.8:1, under the 3:1 a numeral this size needs. */
    color: var(--ed-orange-dim);
}

.nf-kicker {
    margin: 0;
    font-family: var(--ed-font-mono);
    font-size: var(--fs-base);
    color: var(--ed-text-orange);
    letter-spacing: var(--ls-xl);
}

.nf-title {
    margin: var(--space-4) 0 0;
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--ed-text);
    letter-spacing: var(--ls-xs);
    text-wrap: balance;
}

.nf-body {
    max-width: 46ch;
    margin: var(--space-3) auto 0;
    line-height: var(--lh-relaxed);
    color: var(--ed-text-muted);
}

.nf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-5);
}

.nf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-5);
    font-size: var(--fs-xs);
    color: var(--ed-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-strong);
}
.nf-btn:hover {
    color: var(--ed-text);
    background: var(--ed-bg-hover);
    border-color: var(--ed-border-bright);
    text-shadow: none;
}

.nf-btn-primary {
    color: var(--ed-text-orange);
    background: var(--ed-bg-header);
    border-color: var(--ed-border-bright);
}
.nf-btn-primary:hover {
    color: var(--ed-text-orange);
    background: rgb(var(--ed-accent-rgb) / .16);
}

.nf-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    font-size: var(--fs-sm);
    border-top: 1px solid var(--ed-border-subtle);
}
.nf-links-label {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-xl);
}
.nf-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nf-links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min-fine);
    color: var(--ed-text-orange);
}
.nf-links a:hover { text-decoration: underline; text-shadow: none; }
@media (pointer: coarse) { .nf-links a { justify-content: center; min-width: var(--tap-min); min-height: var(--tap-min); } }

.nf-ref {
    margin: var(--space-6) 0 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
    color: var(--ed-text-muted);
    overflow-wrap: anywhere;
}
.nf-ref code { font-family: var(--ed-font-mono); color: var(--ed-text-secondary); }

@media (max-width: 40em) {
    .nf { padding-block: var(--space-6) var(--space-7); }
    .nf-code { font-size: calc(var(--fs-4xl) * 1.8); }
    /* Share the row when both fit, otherwise one full-width button per row (never two different widths). */
    .nf-btn { flex: 1 1 0; white-space: nowrap; }
}

/* === GUIDE (/guide) === */
/* One prose column capped at 72ch; the section index sits beside it from 1101px (header sticky) and as a swipeable chip row above it below that.
   Own classes on purpose: the shared .page-explainer / .page-header rules were written for the dashboard footer and let paragraphs run the full
   container width. */

.guide {
    max-width: calc(72ch + 2 * var(--page-gutter));
    margin: 0 auto;
    padding: var(--space-5) var(--page-gutter) var(--space-7);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--ed-text-secondary);
}

.guide-head { margin-bottom: var(--space-5); }

.guide-title {
    margin: 0;
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--ed-text);
    letter-spacing: var(--ls-md);
    text-wrap: balance;
    text-shadow: none;
}
.guide-title-accent { color: var(--ed-orange); }

.guide-lede {
    max-width: 80ch;
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--ed-text-muted);
    text-wrap: pretty;
}

/* --- Section index --- */
.guide-toc {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-5);
    padding: var(--space-2) 0;
    border-block: 1px solid var(--ed-border-subtle);
}

.guide-toc-label {
    flex: none;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
}

.guide-toc-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-toc-list a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 var(--space-3);
    font-size: var(--fs-xs);
    color: var(--ed-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--ls-sm);
    white-space: nowrap;
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-subtle);
}
.guide-toc-list a:hover {
    color: var(--ed-text);
    background: var(--ed-bg-hover);
    border-color: var(--ed-border-bright);
    text-shadow: none;
}
@media (pointer: coarse) { .guide-toc-list a { min-height: var(--tap-min); } }

@media (max-width: 45em) {
    .guide-toc { flex-direction: column; gap: var(--space-2); align-items: stretch; }
    .guide-toc-list {
        --focus-ring-offset: -2px;    /* the scroller clips an outset ring top and bottom */
        flex-wrap: nowrap;
        padding-bottom: var(--space-1);
        overflow-x: auto;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
    }
    .guide-toc-list li { flex: none; scroll-snap-align: start; }
}

/* --- Prose --- */
.guide-body > section {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--ed-border-subtle);
}
.guide-body > section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.guide h2 {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-snug);
    color: var(--ed-orange);
    letter-spacing: var(--ls-md);
    text-wrap: balance;
    scroll-margin-top: var(--space-3);
}

.guide h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: var(--lh-snug);
    color: var(--ed-text);
    letter-spacing: var(--ls-md);
}

.guide p { margin: 0 0 var(--space-3); }
.guide p:last-child { margin-bottom: 0; }
.guide strong { font-weight: 700; color: var(--ed-text); }

/* Underlined, not just orange: a link in running text must not rely on colour alone. */
.guide p a {
    color: var(--ed-text-orange);
    text-decoration: underline;
    text-decoration-color: rgb(var(--ed-accent-rgb) / .5);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}
.guide p a:hover { color: var(--ed-orange); text-decoration-color: currentColor; text-shadow: none; }

.guide .guide-callout {
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    background: rgb(var(--ed-accent-rgb) / .06);
    border-left: 3px solid var(--ed-orange);
}

/* --- Tier cards --- */
.guide-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0;
    padding: 0;
    list-style: none;
}

.guide-tier {
    --guide-tier: var(--ed-border-strong);
    --guide-tier-text: var(--ed-text);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-subtle);
    border-top: 3px solid var(--guide-tier);
}
.guide-tier.is-exploited { --guide-tier: var(--ed-state-exploited); --guide-tier-text: var(--ed-text-orange); }
.guide-tier.is-fortified { --guide-tier: var(--ed-state-fortified); --guide-tier-text: var(--ed-state-fortified); }
.guide-tier.is-stronghold { --guide-tier: var(--ed-state-stronghold); --guide-tier-text: var(--ed-state-stronghold-text); }

.guide-tier .guide-tier-name {
    font-size: var(--fs-md);
    color: var(--guide-tier-text);
    text-transform: uppercase;
    letter-spacing: var(--ls-md);
}
.guide-tier-range {
    font-family: var(--ed-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ed-text);
}
.guide-tier-note { color: var(--ed-text-muted); }

/* --- Tool links --- */
.guide-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-2);
    margin: var(--space-4) 0;
    padding: 0;
    list-style: none;
}
.guide-tools > li { display: flex; }

.guide-tool {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    min-height: var(--tap-min);
    padding: var(--space-3) var(--space-4);
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-subtle);
}
.guide-tool:hover {
    background: var(--ed-bg-hover);
    border-color: var(--ed-border-bright);
    text-shadow: none;
}
.guide-tool-name {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ed-text-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-md);
}
.guide-tool:hover .guide-tool-name { color: var(--ed-orange); }
.guide-tool-desc { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--ed-text-muted); }

/* --- FAQ --- */
.guide-faq { padding: var(--space-3) 0; border-top: 1px solid var(--ed-border-subtle); }
.guide-faq:last-child { padding-bottom: 0; }

@media (min-width: 45em) {
    .guide { font-size: var(--fs-md); }
}

@media (min-width: 68.8125em) {
    .guide {
        display: grid;
        column-gap: var(--space-7);
        grid-template-columns: 13rem minmax(0, 72ch);
        justify-content: center;
        max-width: none;
    }
    .guide-head { grid-column: 1 / -1; }
    .guide-toc {
        display: block;
        position: sticky;
        top: calc(var(--edhdr-sticky-h) + var(--space-3));
        align-self: start;
        margin: 0;
        padding: 0;
        border: 0;
    }
    .guide-toc-label { display: block; margin-bottom: var(--space-3); }
    .guide-toc-list { flex-direction: column; flex-wrap: nowrap; gap: 0; border-left: 1px solid var(--ed-border-subtle); }
    .guide-toc-list a {
        min-height: 32px;
        margin-left: -1px;
        white-space: normal;
        background: none;
        border: 0;
        border-left: 2px solid transparent;
    }
    .guide-toc-list a:hover { background: none; border-left-color: var(--ed-orange); }
}

/* === POWER SELECTION OVERLAY === */
/* A native <dialog> opened with showModal: header and actions stay put and only the power grid scrolls, so "Track this power" stays reachable on a phone. */

.power-overlay {
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: var(--space-5);
    overflow: hidden;
    color: var(--ed-text);
    background: transparent;
    border: 0;
}
/* display:flex only while open: a bare display on <dialog> beats the UA's display:none. */
.power-overlay[open] { display: flex; }
.power-overlay.is-entering { animation: po-fade-in .4s ease forwards; }
.power-overlay.is-leaving { animation: po-fade-out .35s ease forwards; }

@keyframes po-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes po-fade-out { from { opacity: 1; } to { opacity: 0; } }

.power-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(var(--ed-black-rgb) / .85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.power-overlay-content {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    max-width: 820px;
    max-height: 100%;
    background: linear-gradient(180deg, var(--ed-bg-body) 0%, var(--ed-bg-body-grad) 100%);
    border: 1px solid var(--ed-border);
    box-shadow: 0 0 60px rgb(var(--ed-accent-rgb) / .08), inset 0 1px 0 rgb(var(--ed-accent-rgb) / .1);
    animation: po-slide-in .5s ease .1s both;
}

@keyframes po-slide-in {
    from { transform: translateY(20px) scale(.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.power-overlay-header {
    flex: none;
    padding: var(--space-6) var(--space-6) var(--space-4);
    text-align: center;
    background: linear-gradient(180deg, rgb(var(--ed-accent-rgb) / .06) 0%, transparent 100%);
    border-bottom: 1px solid rgb(var(--ed-accent-rgb) / .1);
}
/* Initial focus lands here so the dialog is announced, not on the first card (which would look pre-selected); not a control, so no ring. */
.power-overlay-header:focus { outline: none; }
.power-overlay-sigil {
    width: 40px;
    height: 2px;
    margin: 0 auto var(--space-4);
    background: linear-gradient(90deg, transparent, var(--ed-orange), transparent);
}
.power-overlay-title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--ed-orange);
    letter-spacing: var(--ls-lg);
    text-wrap: balance;
}
.power-overlay-subtitle {
    max-width: 60ch;
    margin: 0 auto;
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--ed-text-muted);
    text-wrap: balance;
}

.power-overlay-grid {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    grid-auto-rows: max-content;
    gap: var(--space-3);
    min-height: 0;
    padding: var(--space-5);
    overflow-y: auto;
    scrollbar-color: rgb(var(--ed-accent-rgb) / .3) transparent;
    scrollbar-width: thin;
}

.power-overlay-card {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
    min-width: 0;
    padding: var(--space-4) var(--space-3);
    overflow: hidden;
    font: inherit;
    color: inherit;
    background: rgb(var(--ed-white-rgb) / .02);
    border: 1px solid var(--ed-border-subtle);
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
}
.power-overlay-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center bottom, rgb(var(--ed-accent-rgb) / .06) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .3s;
}
.power-overlay-card:hover::before,
.power-overlay-card:focus-visible::before,
.power-overlay-card.selected::before {
    opacity: 1;
}
/* Hover is pure CSS: tracking it in C# cost a server round-trip and a re-render for every card the pointer crossed. */
.power-overlay-card:hover,
.power-overlay-card:focus-visible {
    border-color: rgb(var(--ed-accent-rgb) / .3);
    box-shadow: 0 4px 20px rgb(var(--ed-accent-rgb) / .08);
    transform: translateY(-2px);
}
.power-overlay-card.selected {
    background: rgb(var(--ed-accent-rgb) / .08);
    border-color: var(--ed-orange);
    box-shadow: 0 0 20px rgb(var(--ed-accent-rgb) / .12), inset 0 0 20px rgb(var(--ed-accent-rgb) / .04);
}
.power-overlay-card.selected::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ed-orange), transparent);
}

.power-overlay-logo {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    opacity: .55;
    filter: brightness(0) invert(1);
    transition: opacity .25s;
    object-fit: contain;
}
.power-overlay-card:hover .power-overlay-logo,
.power-overlay-card:focus-visible .power-overlay-logo {
    opacity: .8;
}
.power-overlay-card.selected .power-overlay-logo {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 6px rgb(var(--ed-accent-rgb) / .4));
}

.power-overlay-info {
    display: flex;
    position: relative;
    z-index: 1;
    flex-direction: column;
    gap: var(--space-0);
    align-items: center;
    min-width: 0;
    text-align: center;
}
.power-overlay-name {
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: var(--lh-snug);
    color: var(--ed-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--ls-sm);
    transition: color .2s;
}
.power-overlay-card.selected .power-overlay-name { color: var(--ed-text-orange); }
.power-overlay-fullname {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ed-text-muted);
}

/* Selected mark: the border colour alone would not say "selected". */
.power-overlay-check {
    display: flex;
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--ed-bg-body);
    background: var(--ed-orange);
    border-radius: 50%;
    animation: po-check-pop .25s ease;
}
@keyframes po-check-pop {
    from { transform: scale(0); }
    50% { transform: scale(1.2); }
    to { transform: scale(1); }
}

.power-overlay-status {
    flex: none;
    margin: 0;
    padding: var(--space-3) var(--space-4) 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ed-text-muted);
    text-align: center;
    border-top: 1px solid rgb(var(--ed-accent-rgb) / .08);
}
.power-overlay-actions {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6) var(--space-5);
}
.power-overlay-btn {
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-5);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-md);
    border: 1px solid transparent;
    transition: color .2s, border-color .2s, background-color .2s, box-shadow .2s;
    cursor: pointer;
}
.power-overlay-btn-skip {
    color: var(--ed-text-secondary);
    background: transparent;
    border-color: var(--ed-border-strong);
}
.power-overlay-btn-skip:hover {
    color: var(--ed-text);
    border-color: var(--ed-neutral);
}
.power-overlay-btn-confirm {
    color: var(--ed-text-orange);
    background: rgb(var(--ed-accent-rgb) / .15);
    border-color: var(--ed-orange);
}
.power-overlay-btn-confirm:hover:not(:disabled) {
    background: rgb(var(--ed-accent-rgb) / .25);
    box-shadow: 0 0 20px rgb(var(--ed-accent-rgb) / .15);
}
.power-overlay-btn-confirm:disabled {
    color: var(--ed-text-muted);
    background: transparent;
    border-color: var(--ed-border-subtle);
    cursor: default;
}

@media (max-width: 40em) {
    .power-overlay { padding: var(--space-3); }
    .power-overlay-header { padding: var(--space-5) var(--space-4) var(--space-3); }
    .power-overlay-sigil { margin-bottom: var(--space-3); }
    .power-overlay-title { font-size: var(--fs-xl); }
    .power-overlay-subtitle { font-size: var(--fs-sm); }
    .power-overlay-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
        padding: var(--space-3);
    }
    .power-overlay-card { gap: var(--space-1); padding: var(--space-3) var(--space-2); }
    .power-overlay-logo { width: 36px; height: 36px; }
    .power-overlay-actions {
        flex-direction: column-reverse;
        gap: var(--space-2);
        align-items: stretch;
        padding: var(--space-2) var(--space-4) var(--space-4);
    }
    .power-overlay-btn { width: 100%; }
}

/* Landscape phone: keep the grid on screen by trimming the chrome around it. */
@media (max-height: 520px) {
    .power-overlay { padding: var(--space-2); }
    .power-overlay-header { padding: var(--space-3) var(--space-4) var(--space-2); }
    .power-overlay-sigil, .power-overlay-subtitle { display: none; }
    .power-overlay-title { margin: 0; font-size: var(--fs-lg); }
    .power-overlay-status { padding-top: var(--space-2); }
    .power-overlay-actions { flex-direction: row; padding: var(--space-2) var(--space-4); }
    .power-overlay-btn { width: auto; }
}

/* === BOARD PAGES: shared phone and tablet rules === */
/* Wide content scrolls inside its own container so the page never scrolls sideways (CLAUDE.md); hiding columns was rejected: the numbers are what people came for. */

.board-scroll { min-width: 0; }

/* Sort headers carry a .visually-hidden "sorted ..." label; without a positioned ancestor, inside a sideways-scrolling board, that span escapes it and widens the page. */
.sbx-sortable, .vbx-sortable, .mbx-sortable { position: relative; }

@media (max-width: 56.25em) {
    .board-scroll { overflow-x: auto; overscroll-behavior-x: contain; }

    /* Header strips wrap and the cycle bar takes its own row: without flex-wrap the 260px title block plus the cycle caption blew past a 390px viewport. */
    .chd-strip, .vhd-strip, .mhd-strip, .sbh-strip, .pdx-id-row { flex-wrap: wrap; gap: 12px; }
    .vhd-title-block { min-width: 0; }
    .chd-cycle, .vhd-cycle, .mhd-cycle { flex: 1 1 100%; min-width: 0; max-width: 100%; }

    /* A chip group plus a right-aligned count: let the count drop to its own line rather than force the row wide. */
    .casc-chips,
    .vuln-toolbar > * { min-width: 0; }
}

/* --- Data rows in Iosevka: set on the container so names and numbers share one face (buttons inside use font-family: inherit) --- */
.board-scroll,
.pd-row,
.sdt-row,
.ssx-row,
.snx-row {
    font-family: var(--ed-font-mono);
}

/* === GLOBAL: interaction, accessibility, motion === */
:where(button, input, select, textarea) { font-family: inherit; }
:is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Hit areas. Zero specificity (:where), so a component can still pick its size but a fixed `height` cannot undercut the floor.
   Inline links in running text are exempt from WCAG 2.5.8, so plain <a> is not listed. */
:where(button, summary, select, [role="button"], [role="tab"],
       input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"])) {
    min-height: var(--tap-min-fine);
}
@media (pointer: coarse) {
    :where(button, summary, select, [role="button"], [role="tab"],
           input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"])) {
        min-height: var(--tap-min);
    }
}
:where(input, select, textarea) { accent-color: var(--ed-orange); }
/* Chrome's own placeholder grey is 3.2:1 on these fields. */
::placeholder { color: var(--ed-text-muted); opacity: 1; }
.skip-link {
    position: fixed; top: 8px; left: 12px; z-index: var(--z-skip);
    padding: 12px 18px; color: var(--ed-text); background: var(--ed-bg-surface);
    border: 1px solid var(--ed-orange); transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
/* A <button> that looks like the text around it (sort headers, row selectors); zero specificity, so component rules still win. */
:where(.btn-bare) {
    margin: 0; padding: 0; font: inherit; line-height: inherit;
    color: inherit; text-align: inherit; text-transform: inherit; letter-spacing: inherit; background: none;
    border: 0; border-radius: 0; cursor: pointer;
    appearance: none;
}
a.row-link { color: inherit; }
a.row-link:hover { color: var(--ed-text-orange); text-shadow: none; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0);
}

/* Removes movement only (slide/scale entrances, smooth scroll). Pulses, spinners, the route bar and row highlights
   keep running: they signal live/loading/updated without moving content, and Windows reports "reduce" whenever
   Animation effects is off, so a blanket rule froze them for most visitors. The ticker is script-driven and also runs. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
    .fade-in, .fade-in-d1, .fade-in-d2, .fade-in-d3, .power-overlay-content, .power-overlay-check, .fbw-panel, .sd-pdd-panel { animation: none !important; }
}
/* Route focus announces the heading without drawing a control-shaped border. */
.ed-content h1:focus, #main-content:focus { outline: none; }

/* --- Reconnect notice. blazor.web.js finds #components-reconnect-modal and toggles components-reconnect-show / -failed / -paused / -resume-failed /
   -rejected on it; without one it builds a white shadow-DOM dialog that this sheet cannot reach, so only its inherited text colour is fixed here. --- */
#components-reconnect-modal:not(.reconnect) { color: var(--ed-bg-body); }
/* A corner toast rather than a modal: the page behind stays readable, and the right corner belongs to the feedback tab. */
.reconnect {
    display: none;
    position: fixed;
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
    left: max(var(--space-4), env(safe-area-inset-left));
    z-index: var(--z-feedback);
    gap: var(--space-3);
    align-items: center;
    width: min(26rem, calc(100vw - 3 * var(--space-4) - var(--tap-min)));
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--ed-text);
    background: var(--ed-bg-elevated);
    border: 1px solid var(--ed-border-bright);
    border-left: 3px solid var(--ed-orange);
    box-shadow: 0 8px 28px rgb(var(--ed-black-rgb) / .55);
}
.reconnect:is(.components-reconnect-show, .components-reconnect-failed, .components-reconnect-paused, .components-reconnect-resume-failed, .components-reconnect-rejected) { display: flex; }
.reconnect > * { display: none; flex: none; margin: 0; }
.reconnect > .reconnect-wait, .reconnect > .reconnect-stop { flex: 1; }
.components-reconnect-show > :is(.reconnect-spin, .reconnect-wait) { display: block; }
:is(.components-reconnect-failed, .components-reconnect-paused, .components-reconnect-resume-failed, .components-reconnect-rejected) > :is(.reconnect-stop, .reconnect-btn) { display: block; }
.reconnect-btn {
    min-height: var(--tap-min);
    padding: 0 var(--space-4);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ed-text-orange);
    text-transform: uppercase;
    letter-spacing: var(--ls-lg);
    background: rgb(var(--ed-accent-rgb) / .15);
    border: 1px solid var(--ed-orange);
    cursor: pointer;
}
.reconnect-btn:hover { background: rgb(var(--ed-accent-rgb) / .3); }

/* Windows High Contrast repaints every background-color as Canvas, which erased the bars and legend swatches. They keep their own colours (and sit on a
   Canvas track), so the data stays readable; all text and borders still follow the system palette. */
@media (forced-colors: active) {
    :is(.pulse-bar, .pdx-live-bar, .ps-bar-fill, .pd-press__fill, .pd-flow__bar, .pd-share__seg, .pdx-state-seg, .vrm-seg, .cbx-fall-bar,
        .sd-cycle-bar-r, .sd-cycle-bar-u, .adm-chart-bar, .state-mix-bar > *, [class*="-fill"], [class*="swatch"]) {
        forced-color-adjust: none;
    }
}