@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/rajdhani-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/rajdhani-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/barlow-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/barlow-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/barlow-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/barlow-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Share Tech Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/share-tech-mono-400.woff2') format('woff2');
}

:root {
    color-scheme: dark;
    --app-bg-ground: #090f16;
    --app-surface-panel: #0e1722;
    --app-surface-card: #121e2b;
    --app-surface-elevated: #172636;
    --app-surface-inset: #060b10;
    --app-border-subtle: #1d2e40;
    --app-border-default: #253b52;
    --app-border-strong: #314d6b;
    --app-text-primary: #f0f6fc;
    --app-text-secondary: #b8cadb;
    --app-text-muted: #88a0b8;
    --app-swc-accent: #fbbf24;
    --app-font-display: 'Rajdhani', 'Barlow', sans-serif;
    --app-font-sans: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --app-font-mono: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Aliases for root & descendant consumers */
    --bg-color: var(--app-bg-ground);
    --surface-color: var(--app-surface-panel);
    --surface-panel: var(--app-surface-panel);
    --surface-card: var(--app-surface-card);
    --surface-elevated: var(--app-surface-elevated);
    --surface-sunken: var(--app-surface-inset);
    --card-bg: var(--app-surface-card);
    --surface-inset: var(--app-surface-inset);
    --border-color: var(--app-border-default);
    --border-strong: var(--app-border-strong);
    --text-primary: var(--app-text-primary);
    --text-color: var(--app-text-primary);
    --text-secondary: var(--app-text-secondary);
    --text-muted: var(--app-text-muted);
    --accent-color: var(--app-accent-color);
    --accent-bright: var(--app-accent-bright);
    --accent-soft: var(--app-accent-soft);
    --accent-surface: var(--app-accent-surface);
    --accent-border: var(--app-accent-border);
    --swc-accent: var(--app-swc-accent);
    --font-display: var(--app-font-display);
    --font-sans: var(--app-font-sans);
    --font-mono: var(--app-font-mono);
    --scrollbar-thumb: var(--app-border-strong);
    --scrollbar-track: var(--app-bg-ground);

    /* Motion tokens (mirrors MOTION_TOKENS in src/modules/Motion.js; see DESIGN.md §6) */
    --motion-duration-fast: 120ms;
    --motion-duration-base: 180ms;
    --motion-duration-slow: 240ms;
    --motion-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-ease-standard: ease;
    --motion-ease-settle: linear(0, 0.55 10%, 0.85 22%, 0.97 38%, 1.005 55%, 1);
    --motion-distance-rise: 4px;
    --motion-distance-lift: 2px;
    --motion-distance-slide: 12px;
    --motion-scale-enter: 0.98;
    --motion-scale-press: 0.97;

    /* Shared control transition list (InteractionMotion.js CONTROL_MOTION_STYLES): colour
       feedback plus the press settle. Every <button> gets it from the :where(button) default;
       only non-button controls opt in with transition: var(--control-transition). */
    --control-transition:
        color var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        scale var(--motion-duration-fast) var(--motion-ease-settle);

    /* Keyboard focus ring colour for every control (CONTROL_MOTION_STYLES :focus-visible rule
       and its grow-in), inherited into the shadow roots. modern-web-guidance: css, accessibility. */
    --focus-ring-color: var(--accent-color);
}

/* Reduced-motion contract (mirrors REDUCED_MOTION_TOKENS): movement off, shorter fades */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-duration-fast: 80ms;
        --motion-duration-base: 120ms;
        --motion-duration-slow: 160ms;
        --motion-distance-rise: 0px;
        --motion-distance-lift: 0px;
        --motion-distance-slide: 0px;
        --motion-scale-enter: 1;
        --motion-scale-press: 1;
    }
}

/* Pointer sheen on lift surfaces (InteractionMotion.js). Registered here, at document level,
   because @property inside a shadow root is ignored; the registration still applies inside
   every shadow tree (modern-web-guidance: interactive-content-reveal). */
@property --pointer-x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 50%;
}

@property --pointer-y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

@property --sheen-strength {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

/* Faction morph (#74): the faction-reactive accent tokens are registered as <color> so a
   Faction switch interpolates them instead of snapping. Every --accent-* alias (here and in
   each shadow root's :host) reads these through var(), so cards, badges, the header and chart
   frames follow. The single palette source is FACTION_THEMES in src/modules/theme.js:
   applyDocumentFactionTheme() writes these tokens inline on <html>; each initial-value is the
   default Faction's (PanOceania), which also covers first paint. Keep in sync with
   FACTION_ACCENT_PROPERTIES (tests/FactionMorph.test.js). modern-web-guidance: css,
   same-document-transitions. */
@property --app-accent-color {
    syntax: '<color>';
    inherits: true;
    initial-value: #00c8ff;
}

@property --app-accent-bright {
    syntax: '<color>';
    inherits: true;
    initial-value: #67e8f9;
}

@property --app-accent-soft {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(0, 200, 255, 0.14);
}

@property --app-accent-surface {
    syntax: '<color>';
    inherits: true;
    initial-value: #0c2436;
}

@property --app-accent-border {
    syntax: '<color>';
    inherits: true;
    initial-value: #009bc7;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        transition:
            --app-accent-color var(--motion-duration-slow) var(--motion-ease-standard),
            --app-accent-bright var(--motion-duration-slow) var(--motion-ease-standard),
            --app-accent-soft var(--motion-duration-slow) var(--motion-ease-standard),
            --app-accent-surface var(--motion-duration-slow) var(--motion-ease-standard),
            --app-accent-border var(--motion-duration-slow) var(--motion-ease-standard);
    }
}

/* While the accent tokens morph, an element-level colour transition that reads them would
   restart on every interpolated frame and trail the morph; holdFactionMorph() (theme.js)
   flags <html> for the morph's length so every surface follows the tokens live. */
:root[data-faction-morph] {
    --motion-duration-fast: 0s;
    --motion-duration-base: 0s;
}

/* Army emblem + Faction callsign crossfade: crossfadeFactionEmblem() (theme.js) starts a
   `faction`-typed view transition (ViewTransitions.js). The root is not captured, so the rest
   of the page stays live while only these two snapshots crossfade. Keyed off the transition's
   type, not a DOM marker, so concurrent tab / reorder transitions never strip it. */
:root:active-view-transition-type(faction) {
    view-transition-name: none;
}

:root:active-view-transition-type(faction) #active-army-logo {
    view-transition-name: faction-emblem;
}

:root:active-view-transition-type(faction) #active-faction-callsign {
    view-transition-name: faction-callsign;
    inline-size: fit-content;
}

::view-transition-group(faction-emblem),
::view-transition-group(faction-callsign) {
    animation-duration: var(--motion-duration-slow);
    animation-timing-function: var(--motion-ease-out-expo);
}

::view-transition-old(faction-emblem),
::view-transition-new(faction-emblem),
::view-transition-old(faction-callsign),
::view-transition-new(faction-callsign) {
    animation-duration: var(--motion-duration-slow);
    block-size: 100%;
}

* {
    box-sizing: border-box;
}

::selection {
    background: var(--accent-color);
    color: #060b10;
}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}

@supports not (scrollbar-color: auto) {
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    ::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
    }
    ::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
    }
}

body {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    font-family: var(--font-sans);
    color: var(--text-color);
    caret-color: var(--accent-color);
    line-height: 1.5;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
}

header {
    position: sticky;
    top: 0;
    inset-block-start: 0;
    z-index: 100;
    container-type: scroll-state;
    container-name: site-header;
    background-color: var(--surface-panel);
    padding: 0.85rem 2rem;
    border-bottom: 1px solid var(--accent-border);
    box-shadow: 0 6px 20px rgba(4, 9, 15, 0.65);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    flex-shrink: 0;
}

@container site-header scroll-state(stuck: top) {
    .header-main {
        gap: 0.75rem;
    }
}

/* Scroll-driven effects (#77). Decorative progressive enhancement: browsers without
   scroll-driven animations, and reduced motion, keep today's static look (no fallback).
   Only opacity / transform animate, so scrolling never re-runs layout.
   modern-web-guidance: scroll-entry-exit-effects, scrollytelling. */
@media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
        /* Sticky header: over the first 72px of page scroll a hairline accent glow and a
           deeper soft shadow fade in on a pseudo-element, on top of the resting shadow.
           Height and layout never change. */
        header::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            box-shadow:
                0 1px 0 0 var(--accent-color),
                0 2px 14px -2px var(--accent-soft),
                0 14px 30px -6px rgba(4, 9, 15, 0.75);
            opacity: 0;
            animation: header-scrolled linear both;
            animation-timeline: scroll(root block);
            animation-range: 0px 72px;
        }
    }

    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        /* One-time reveal: Unit cards and major sections fade in and rise
           --motion-distance-rise over the first 80px of scroll after their top edge enters
           the viewport. Content already past that point on first paint sits at the end
           state, so it never animates or flashes. */
        #unit-grid > unit-card,
        .rules-section,
        #app > :is(.charts-grid, .efficiency-charts-grid, coverage-matrix, compare-view, efficiency-table) {
            animation: scroll-reveal linear both;
            animation-timeline: view(block);
            animation-range: entry 0px entry 80px;
        }
    }
}

@keyframes header-scrolled {
    to {
        opacity: 1;
    }
}

@keyframes scroll-reveal {
    from {
        opacity: 0;
        transform: translateY(var(--motion-distance-rise));
    }
}

.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-brand {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.brand-identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.faction-emblem-frame {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-surface);
    border: 1px solid var(--accent-border);
    border-radius: 2px;
    flex-shrink: 0;
    padding: 4px;
}

.active-army-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

.brand-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.brand-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--text-color);
}

.faction-callsign {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-bright);
    background: var(--accent-surface);
    border: 1px solid var(--accent-border);
    padding: 0.12rem 0.5rem;
    border-radius: 2px;
    white-space: nowrap;
}

.app-version-badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--surface-inset);
    border: 1px solid var(--border-strong);
    padding: 0.12rem 0.48rem;
    border-radius: 2px;
    white-space: nowrap;
}

.sync-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--surface-inset);
    border: 1px solid var(--border-color);
    padding: 0.16rem 0.55rem;
    border-radius: 2px;
    width: fit-content;
}

.sync-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 1px;
    background: #22c55e;
    flex-shrink: 0;
}

.sync-status-label {
    font-family: var(--font-mono);
    color: var(--accent-bright);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}

.sync-status time {
    font-family: var(--font-mono);
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.army-picker {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    background: var(--surface-inset);
    padding: 0.45rem 0.75rem;
    border-radius: 2px;
    border: 1px solid var(--border-strong);
}

.picker-field {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.picker-field label {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.picker-field select {
    min-width: 190px;
    font-weight: 600;
}

.army-code-controls {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.army-code-trigger-btn {
    background: var(--accent-surface);
    border: 1px solid var(--accent-border);
    color: var(--accent-bright);
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.42rem 0.78rem;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
}

.army-code-trigger-btn:hover,
.army-code-trigger-btn[aria-expanded="true"] {
    background: var(--app-surface-elevated);
    border-color: var(--accent-color);
    color: var(--text-color);
}

.active-army-code-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-panel);
    border: 1px solid var(--accent-color);
    color: var(--text-color);
    padding: 0.25rem 0.55rem;
    border-radius: 2px;
    font-size: 0.8rem;
}

.active-army-code-chip[hidden] {
    display: none;
}

.army-code-chip-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-bright);
    background: var(--accent-surface);
    border: 1px solid var(--accent-border);
    padding: 0.04rem 0.36rem;
    border-radius: 2px;
}

.army-code-chip-name {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-color);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.army-code-chip-meta {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.clear-army-code-btn {
    background: var(--surface-inset);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.16rem 0.42rem;
    border-radius: 2px;
    cursor: pointer;
}

.clear-army-code-btn:hover {
    border-color: #f87171;
    color: #fecaca;
    background: #2c1218;
}

.army-code-popover {
    width: min(560px, calc(100vw - 2rem));
    background: var(--surface-panel);
    color: var(--text-color);
    border: 1px solid var(--accent-border);
    border-radius: 2px;
    padding: 1rem 1.15rem;
}

/* Top-layer enter/exit: fade + rise + slight scale in, quicker reverse out, backdrop fade
   (modern-web-guidance: animate-to-from-top-layer). Reduced motion leaves only the fade. */
@supports selector(:popover-open) {
    .army-code-popover {
        opacity: 0;
        translate: 0 var(--motion-distance-rise);
        scale: var(--motion-scale-enter);
        transition:
            opacity var(--motion-duration-fast) var(--motion-ease-out-expo),
            translate var(--motion-duration-fast) var(--motion-ease-out-expo),
            scale var(--motion-duration-fast) var(--motion-ease-out-expo),
            display var(--motion-duration-fast),
            overlay var(--motion-duration-fast);
        transition-behavior: allow-discrete;
    }

    .army-code-popover:popover-open {
        opacity: 1;
        translate: 0 0;
        scale: 1;
        transition-duration: var(--motion-duration-base);
    }

    @starting-style {
        .army-code-popover:popover-open {
            opacity: 0;
            translate: 0 var(--motion-distance-rise);
            scale: var(--motion-scale-enter);
        }
    }

    .army-code-popover::backdrop {
        background-color: rgba(6, 11, 16, 0);
        transition:
            background-color var(--motion-duration-fast) var(--motion-ease-out-expo),
            display var(--motion-duration-fast),
            overlay var(--motion-duration-fast);
        transition-behavior: allow-discrete;
    }

    .army-code-popover:popover-open::backdrop {
        background-color: rgba(6, 11, 16, 0.55);
        transition-duration: var(--motion-duration-base);
    }

    @starting-style {
        .army-code-popover:popover-open::backdrop {
            background-color: rgba(6, 11, 16, 0);
        }
    }
}

.army-code-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.55rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.army-code-popover-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-bright);
}

.army-code-popover-close {
    background: var(--surface-inset);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    cursor: pointer;
}

.army-code-popover-close:hover {
    border-color: var(--accent-color);
    color: var(--text-color);
}

.army-code-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.army-code-label {
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color);
}

.army-code-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.army-code-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.army-code-input {
    flex: 1 1 280px;
    background: var(--surface-inset);
    border: 1px solid var(--border-strong);
    color: var(--text-color);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
}

.army-code-input:focus {
    border-color: var(--accent-color);
}

.army-code-submit-btn {
    background: var(--accent-surface);
    border: 1px solid var(--accent-border);
    color: var(--accent-bright);
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.5rem 0.95rem;
    cursor: pointer;
    white-space: nowrap;
}

.army-code-submit-btn:hover {
    background: var(--app-surface-elevated);
    border-color: var(--accent-color);
    color: var(--text-color);
}

.army-code-error {
    margin-top: 0.25rem;
    padding: 0.6rem 0.75rem;
    background: #2c1218;
    border: 1px solid #f87171;
    border-radius: 2px;
    color: #fecaca;
    font-size: 0.8rem;
    line-height: 1.45;
}

.army-code-error[hidden] {
    display: none;
}

.army-code-error-header {
    margin-bottom: 0.2rem;
    font-family: var(--font-display);
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fecaca;
}

.army-code-error-body {
    margin: 0;
    color: var(--text-color);
}

.army-code-error-list {
    margin: 0.35rem 0 0 1.1rem;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #fecaca;
}

#main-nav {
    display: flex;
    gap: 0.35rem;
    position: relative;
    background: var(--surface-inset);
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 2px;
}

#main-nav::before {
    content: '';
    position: absolute;
    position-anchor: --active-tab;
    background: var(--accent-color);
    block-size: 2px;
    inset-block-start: anchor(bottom);
    inset-inline-start: anchor(left);
    inset-inline-end: anchor(right);
}

@media (prefers-reduced-motion: no-preference) {
    #main-nav::before {
        transition: inset var(--motion-duration-base) var(--motion-ease-out-expo);
    }
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 0.45rem 0.95rem;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 2px;
}

.nav-btn:hover {
    color: var(--text-color);
    background: var(--app-surface-elevated);
}

.nav-btn.active {
    color: var(--accent-bright);
    background: var(--accent-surface);
    border-color: var(--accent-border);
    anchor-name: --active-tab;
}

.nav-wip-badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 2px;
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.72);
    color: var(--swc-accent, #fbbf24);
    line-height: 1.25;
}

.efficiency-wip-banner {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.12) 0%, var(--surface-card) 75%);
    border: 1px solid rgba(251, 191, 36, 0.55);
    border-top: 2px solid var(--swc-accent, #fbbf24);
    border-radius: 3px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
}

.efficiency-wip-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.efficiency-wip-pill {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    background: rgba(251, 191, 36, 0.22);
    border: 1px solid rgba(251, 191, 36, 0.78);
    color: var(--swc-accent, #fbbf24);
}

.efficiency-wip-title {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--swc-accent, #fbbf24);
}

.efficiency-wip-body {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 68ch;
}

.efficiency-wip-body strong {
    color: var(--text-color);
}

@supports not (position-anchor: --active-tab) {
    #main-nav::before {
        display: none;
    }
}

/* Directional tab transitions (#75): switchTab() / hash back-forward (main.js) start a
   `tab` + `tab-forward|tab-backward` view transition (ViewTransitions.js). Only #app is
   captured: the header, Army picker, Main Nav and search bar stay live, so the anchored
   active-tab indicator above glides on its own `inset` transition. The new view fades in
   ~12px from the side of travel while the old one fades out the other way.
   modern-web-guidance: directional-navigation-transitions, same-document-transitions. */
:root:active-view-transition-type(tab) {
    view-transition-name: none;
}

:root:active-view-transition-type(tab) #app {
    view-transition-name: tab-view;
}

::view-transition-group(tab-view) {
    animation-duration: var(--motion-duration-base);
    animation-timing-function: var(--motion-ease-out-expo);
}

::view-transition-old(tab-view),
::view-transition-new(tab-view) {
    /* Pin both snapshots to the top so a taller / shorter view never stretches. */
    block-size: auto;
    animation-timing-function: var(--motion-ease-out-expo);
    animation-fill-mode: both;
}

::view-transition-old(tab-view) {
    animation-duration: var(--motion-duration-fast);
}

::view-transition-new(tab-view) {
    animation-duration: var(--motion-duration-base);
}

@keyframes tab-view-out-to-start {
    to {
        opacity: 0;
        transform: translateX(calc(-1 * var(--motion-distance-slide)));
    }
}

@keyframes tab-view-out-to-end {
    to {
        opacity: 0;
        transform: translateX(var(--motion-distance-slide));
    }
}

@keyframes tab-view-in-from-end {
    from {
        opacity: 0;
        transform: translateX(var(--motion-distance-slide));
    }
}

@keyframes tab-view-in-from-start {
    from {
        opacity: 0;
        transform: translateX(calc(-1 * var(--motion-distance-slide)));
    }
}

:root:active-view-transition-type(tab-forward)::view-transition-old(tab-view) {
    animation-name: tab-view-out-to-start;
}

:root:active-view-transition-type(tab-forward)::view-transition-new(tab-view) {
    animation-name: tab-view-in-from-end;
}

:root:active-view-transition-type(tab-backward)::view-transition-old(tab-view) {
    animation-name: tab-view-out-to-end;
}

:root:active-view-transition-type(tab-backward)::view-transition-new(tab-view) {
    animation-name: tab-view-in-from-start;
}

/* Table reorder (#76): animateRowReorder() (ViewTransitions.js) writes each row's name (from
   its stable option key) to --reorder-name for a `reorder`-typed transition of
   ≤ ROW_REORDER_MAX_ROWS rows; the name applies only while that type is active. Shadow-DOM rows
   (the Ranking Table) are reached through ::part(reorder-row): a name set from inside a shadow
   tree is tree-scoped and not captured by a document transition. Rows glide to their new
   positions; entering rows fade in and leaving rows fade out. The rest of the page stays live.
   modern-web-guidance: group-element-transitions, same-document-transitions. */
:root:active-view-transition-type(reorder) {
    view-transition-name: none;
}

:root:active-view-transition-type(reorder) [data-reorder-row],
:root:active-view-transition-type(reorder) ::part(reorder-row) {
    view-transition-name: var(--reorder-name, none);
    view-transition-class: reorder-row;
}

::view-transition-group(.reorder-row) {
    animation-duration: var(--motion-duration-slow);
    animation-timing-function: var(--motion-ease-out-expo);
}

::view-transition-new(.reorder-row):only-child {
    animation: reorder-row-fade-in var(--motion-duration-base) var(--motion-ease-standard) both;
}

::view-transition-old(.reorder-row):only-child {
    animation: reorder-row-fade-out var(--motion-duration-fast) var(--motion-ease-standard) both;
}

@keyframes reorder-row-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes reorder-row-fade-out {
    to {
        opacity: 0;
    }
}

/* Only the captured pieces animate; everything else under the overlay stays clickable. */
::view-transition {
    pointer-events: none;
}

/* The sticky header stays live during tab / reorder transitions, but the overlay paints above
   it; clip the overlay at the header's bottom edge (measured into --view-transition-clip-top
   by main.js at the end of the transition's DOM update) so snapshots of scrolled content never
   cover the header. Faction transitions (emblem in the header) are never clipped. */
:root:active-view-transition-type(tab)::view-transition,
:root:active-view-transition-type(reorder)::view-transition {
    clip-path: inset(var(--view-transition-clip-top, 0px) 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

#controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

input, select, button {
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
    color: var(--text-color);
    font-family: var(--font-sans);
    padding: 0.48rem 0.85rem;
    border-radius: 2px;
}

input::placeholder {
    color: var(--text-muted);
}

#search-input {
    flex-grow: 1;
    min-width: 220px;
    background: var(--surface-inset);
    border-color: var(--border-strong);
    font-size: 0.92rem;
}

#search-input:focus {
    border-color: var(--accent-color);
}

main {
    padding: 1.75rem 2rem 2.25rem;
    width: 100%;
    flex: 1 0 auto;
    display: block;
}

#app, #analytics-view {
    width: 100%;
}

.scope-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--surface-panel);
    border: 1px solid var(--border-color);
    border-radius: 2px;
}

.scope-banner-title-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-inline-size: 0;
}

.scope-army-emblem {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

.scope-banner h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent-bright);
    text-wrap: balance;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-inline-size: 0;
}

.scope-banner-list-name {
    display: inline-block;
    max-inline-size: min(360px, 50vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.scope-banner-army-sub {
    color: var(--text-secondary);
    font-size: 0.92em;
}

.scope-banner-meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.scope-banner .scope-meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.scope-refresh-badge {
    font-family: var(--font-mono);
    font-size: 0.73rem;
    color: var(--accent-bright);
    background: var(--accent-surface);
    border: 1px solid var(--accent-border);
    padding: 0.16rem 0.55rem;
    border-radius: 2px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.scope-refresh-badge time {
    color: var(--text-color);
    font-weight: 700;
}

.scope-list-pill {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-color);
    background: var(--surface-inset);
    border: 1px solid var(--accent-border);
    padding: 0.16rem 0.55rem;
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scope-list-name-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-inline-size: min(240px, 42vw);
    min-inline-size: 0;
    background: var(--accent-surface);
    color: var(--accent-bright);
}

.table-header-list-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-inline-size: min(240px, 42vw);
    min-inline-size: 0;
    padding: 2px 8px;
    border-radius: 2px;
    background: var(--accent-surface);
    border: 1px solid var(--accent-border);
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.25;
    vertical-align: middle;
}

.loaded-list-badge-prefix {
    flex-shrink: 0;
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.loaded-list-badge-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
    color: var(--accent-bright);
    text-transform: none;
}

.section-heading-with-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.unit-type-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    background: var(--surface-panel);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 0.6rem 0.95rem;
    margin-block-end: 1.25rem;
}

.type-filter-label {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-inline-end: 0.15rem;
}

.type-filter-chips {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.type-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    padding: 0.3rem 0.65rem;
    border-radius: 2px;
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.type-filter-chip:hover {
    border-color: var(--accent-color);
    color: var(--text-color);
    background: var(--app-surface-elevated);
}

.type-filter-chip.active,
.type-filter-chip[aria-pressed="true"] {
    background: var(--accent-surface);
    border-color: var(--accent-border);
    color: var(--accent-bright);
}

/* A chip that just became selected (re-rendered, so no transition can run) eases in from its
   resting colours while its tick draws in (CONTROL_MOTION_STYLES). Colour only, so it also
   plays under reduced motion, at the shortened durations. */
.type-filter-chip[aria-pressed="true"][data-tick-draw] {
    animation: type-chip-select-in var(--motion-duration-base) var(--motion-ease-standard);
}

@keyframes type-chip-select-in {
    from {
        background-color: var(--card-bg);
        border-color: var(--border-strong);
        color: var(--text-secondary);
    }
}

.type-filter-chip.empty-type {
    opacity: 0.48;
}

.type-chip-code {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.type-chip-count {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.04rem 0.36rem;
    border-radius: 2px;
    background: var(--surface-inset);
    color: var(--text-muted);
}

.type-filter-chip.active .type-chip-count,
.type-filter-chip[aria-pressed="true"] .type-chip-count {
    background: var(--bg-color);
    color: var(--accent-bright);
}

.type-filter-clear {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    padding: 0.28rem 0.65rem;
    border-radius: 2px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
}

.type-filter-clear:hover {
    border-color: #f87171;
    color: #fecaca;
    background: #2c1218;
}

.rules-view {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.rules-section {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.rules-section h3 {
    margin: 0.25rem 0 0 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-color);
}

#unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.25rem;
    width: 100%;
}

unit-card, .glossary-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}

/* Accessibility: the accent :focus-visible ring (and its grow-in) for every control lives in
   CONTROL_MOTION_STYLES (src/modules/InteractionMotion.js), shared with the shadow roots. */

.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    font-size: 1.1rem;
    background: var(--surface-panel);
    border: 1px solid var(--border-color);
    border-radius: 2px;
}

/* Compare Tab Controls & Charts */
.compare-controls-panel {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    background: var(--surface-panel);
    padding: 1.25rem;
    border-radius: 2px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.compare-slots-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.compare-slots-title {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.control-group > label,
.control-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.84rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.compare-presets {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.preset-btn {
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    padding: 0.34rem 0.75rem;
    border-radius: 2px;
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
}

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

.compare-slots-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

/* Card layer contract (InteractionMotion.js): a card's own rules sit in @layer card, so the
   unlayered lift always wins over them. */
@layer card {
    .compare-slot-card {
        background-color: var(--surface-inset);
        border: 1px solid var(--slot-accent, var(--border-color));
        --lift-accent: var(--slot-accent, var(--accent-color));
        border-radius: 2px;
        padding: 0.65rem 0.8rem;
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        min-inline-size: 0;
    }

    .compare-slot-card.empty {
        border-color: var(--border-color);
        opacity: 0.88;
    }
}

.compare-slot-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.compare-slot-label-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.compare-slot-dot {
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background: var(--slot-accent, var(--border-strong));
    flex-shrink: 0;
}

.compare-slot-card label {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.compare-slot-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.slot-code-toggle-btn,
.slot-code-clear-btn {
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    padding: 0.16rem 0.48rem;
    border-radius: 2px;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.slot-code-toggle-btn:hover,
.slot-code-toggle-btn[aria-expanded="true"] {
    border-color: var(--accent-border);
    background: var(--accent-surface);
    color: var(--accent-bright);
}

.slot-code-clear-btn:hover {
    border-color: #f87171;
    color: #fecaca;
    background: #2c1218;
}

.compare-slot-card select {
    width: 100%;
    padding: 0.42rem 0.55rem;
    font-size: 0.84rem;
}

.compare-slot-card select[hidden] {
    display: none;
}

.compare-slot-list-summary {
    background: var(--card-bg);
    border: 1px solid var(--accent-border);
    border-radius: 2px;
    padding: 0.45rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-inline-size: 0;
}

.slot-list-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-inline-size: 0;
}

.slot-list-name {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
}

.slot-list-parent-badge {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-bright);
    background: var(--accent-surface);
    border: 1px solid var(--accent-border);
    padding: 0.04rem 0.36rem;
    border-radius: 2px;
    white-space: nowrap;
}

.slot-list-meta-row {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.compare-slot-code-form {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    margin-top: 0.1rem;
    /* Slot-code panel reveal: fade + small drop in, quicker reverse out (allow-discrete
       holds display during the exit; modern-web-guidance: animate-element-entry-exit). */
    opacity: 1;
    translate: 0 0;
    transition:
        opacity var(--motion-duration-base) var(--motion-ease-out-expo),
        translate var(--motion-duration-base) var(--motion-ease-out-expo),
        display var(--motion-duration-base);
    transition-behavior: allow-discrete;
}

@starting-style {
    .compare-slot-code-form {
        opacity: 0;
        translate: 0 calc(-1 * var(--motion-distance-rise));
    }
}

.compare-slot-code-form[hidden] {
    display: none;
    opacity: 0;
    translate: 0 calc(-1 * var(--motion-distance-rise));
    transition-duration: var(--motion-duration-fast);
}

.compare-slot-code-input-row {
    display: flex;
    gap: 0.35rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.compare-slot-code-input {
    flex: 1 1 130px;
    min-inline-size: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
    color: var(--text-color);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    padding: 0.34rem 0.5rem;
}

.compare-slot-code-input:focus {
    border-color: var(--accent-color);
}

.slot-code-apply-btn,
.slot-code-cancel-btn {
    padding: 0.3rem 0.55rem;
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    white-space: nowrap;
}

.slot-code-apply-btn {
    background: var(--accent-surface);
    border: 1px solid var(--accent-border);
    color: var(--accent-bright);
}

.slot-code-apply-btn:hover {
    background: var(--app-surface-elevated);
    border-color: var(--accent-color);
    color: var(--text-color);
}

.slot-code-cancel-btn {
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
}

.slot-code-cancel-btn:hover {
    border-color: var(--accent-color);
    color: var(--text-color);
}

.compare-slot-code-error {
    font-size: 0.74rem;
    padding: 0.45rem 0.6rem;
}

.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.compare-charts-grid {
    margin-bottom: 1.75rem;
}

@media (max-width: 1100px) {
    .charts-grid {
        grid-template-columns: 1fr;
    }
    .compare-slots-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    header {
        padding: 0.85rem 1rem;
    }
    main {
        padding: 1.1rem 1rem 1.75rem;
    }
    .compare-slots-grid {
        grid-template-columns: 1fr;
    }
}

.chart-container {
    background: var(--surface-panel);
    padding: 1.25rem 1.5rem;
    border-radius: 2px;
    border: 1px solid var(--border-color);
    min-height: 360px;
    display: flex;
    flex-direction: column;
}

.chart-container h3 {
    margin: 0 0 0.85rem 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent-bright);
    text-align: center;
}

.chart-header {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.chart-header h3 {
    margin: 0;
}

.chart-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.chart-header-top h3 {
    text-align: start;
}

.chart-encoding-hint {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.73rem;
    color: var(--text-secondary);
    background: var(--surface-inset);
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    padding: 0.28rem 0.65rem;
    text-align: center;
}

.chart-mode-toggle {
    display: inline-flex;
    gap: 0.3rem;
    background: var(--surface-inset);
    padding: 0.2rem;
    border-radius: 2px;
    border: 1px solid var(--border-color);
}

.chart-mode-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 0.25rem 0.65rem;
    border-radius: 2px;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
}

.chart-mode-btn:hover {
    color: var(--text-color);
}

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

.chart-canvas-wrap {
    position: relative;
    height: 320px;
    width: 100%;
}

canvas {
    width: 100% !important;
    height: auto !important;
}

.chart-canvas-wrap canvas {
    height: 100% !important;
}

.efficiency-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.efficiency-charts-grid.scores-chart-row {
    grid-template-columns: 1fr;
}

.efficiency-chart-card {
    min-height: 0;
    padding: 1.1rem 1.25rem;
}

/* Top-10 Loadouts chart: main.js sets block-size from the row count
   (trooperScoresChartHeightPx); not positioned, so the unit hover layer keeps measuring the
   canvas against the chart card. */
.scores-top-chart-wrap {
    inline-size: 100%;
}

.scores-top-chart-wrap canvas {
    height: 100% !important;
}

.efficiency-chart-card h3 {
    margin: 0 0 0.65rem 0;
    font-size: 1.02rem;
}

@media (max-width: 1100px) {
    .efficiency-charts-grid {
        grid-template-columns: 1fr;
    }
}

/* Scores tab placeholder while the global Job distributions are computed in a Web Worker */
.scores-pending {
    display: grid;
    gap: 0.6rem;
    justify-items: start;
    background: var(--surface-panel);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.scores-pending label {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.scores-pending progress {
    accent-color: var(--accent-color);
    inline-size: min(100%, 32rem);
}

.scores-pending-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Site Footer & Legal Disclaimer */
.site-footer {
    margin-top: auto;
    background-color: var(--surface-panel);
    border-top: 1px solid var(--border-color);
    padding: 0.95rem 2rem;
    text-align: center;
}

.legal-disclaimer {
    margin: 0 auto;
    max-width: 72ch;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.legal-disclaimer small {
    font-size: inherit;
}

.legal-disclaimer strong {
    color: var(--text-secondary);
    font-weight: 600;
}