/* HOI4 Division Designer Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: #141414; /* Match window background */
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Screen Reader Only - for SEO and accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #141414; /* Match window background to prevent flash */
    color: #e0e0e0;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh; /* Use dynamic viewport height on mobile to account for browser UI */
    margin: 0;
    padding: 0;
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #141414;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.1s ease-out, visibility 0.1s ease-out;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loading-logo {
    height: 44px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    animation: loadingLogoFade 2s ease-in-out infinite;
}

@keyframes loadingLogoFade {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    color: #c8a96e;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Mobile adjustments for loading screen */
@media (max-width: 768px) {
    .loading-logo {
        height: 36px;
        max-width: 160px;
    }
    
    .loading-text {
        font-size: 12px;
    }
    
    .loading-content {
        gap: 15px;
    }
}

.hoi4-window {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh; /* Use dynamic viewport height on mobile to account for browser UI */
    background: #1c1c1c;
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.hoi4-window.loaded {
    opacity: 1;
}

/* Title Bar */
.hoi4-title-bar {
    background: linear-gradient(to bottom, #222222, #1c1c1c);
    border-bottom: 1px solid rgb(40, 40, 40);
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 600;
    /* Ensure no transparency issues */
    background-color: #1c1c1c;
    background-image: linear-gradient(to bottom, #222222, #1c1c1c);
    /* Ensure it stays above other sticky elements */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Set navbar height as CSS variable for use by other sticky elements */
.hoi4-title-bar {
    --navbar-height: auto;
}

.title-bar-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.hoi4-title {
    font-size: 14px;
    font-weight: bold;
    color: #e0e0e0;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0; /* desktop: no offset; mobile overrides with -10px in media queries */
}


.hoi4-title .title-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.hoi4-title .title-logo {
    height: 28px;
    margin-top:3px;
    width: auto;
    max-width: none;
    object-fit: contain;
    align-self: center;
    cursor: pointer;
    transition: opacity 0.15s ease-out;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.hoi4-title .title-logo:hover {
    opacity: 0.82;
}

.title-bar-tabs {
    display: flex;
    gap: 2px;
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    padding: 2px;
}

.title-tab {
    background: none;
    border: none;
    color: #888;
    font-size: 12px;
    font-family: inherit;
    padding: 5px 14px;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.title-tab.is-active {
    background: #1e2e14;
    color: #c8e6a0;
}

.title-tab:hover:not(.is-active) {
    background: #1e1e1e;
    color: #ccc;
}

.nav-dropdown-current {
    background: #1e2e14;
    color: #c8e6a0;
    font-size: 12px;
    padding: 5px 14px;
    border-radius: 2px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: default;
}

.title-bar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.account-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #222;
    text-decoration: none;
    transition: border-color 0.15s, opacity 0.15s;
    opacity: 0.7;
    flex-shrink: 0;
}

.account-icon-btn:hover {
    border-color: #c8a96e;
    opacity: 1;
}

.account-icon-btn.designer-library-icon {
    color: #fff;
}

/* ── Skin picker ──────────────────────────────────────────────────────── */

.skin-picker {
    position: relative;
}

.skin-picker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 1.5rem;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    border: 1px solid #2e2e2e;
    background: #1a1a1a;
    color: #e0e0e0;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.skin-picker-trigger-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    line-height: 1.2;
}

.skin-picker-trigger-prefix {
    flex-shrink: 0;
    opacity: 0.72;
    font-weight: 500;
}

.skin-picker-trigger-sep {
    flex-shrink: 0;
    opacity: 0.45;
    font-weight: 400;
}

.skin-picker-trigger-current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.footer-content-start .skin-picker-trigger {
    max-width: min(100%, 20rem);
    flex-shrink: 1;
    min-width: 0;
}

.skin-picker-trigger-chevron {
    flex-shrink: 0;
    opacity: 0.65;
    transition: transform 0.15s ease, opacity 0.15s;
}

.skin-picker-trigger[aria-expanded="true"] .skin-picker-trigger-chevron {
    transform: rotate(180deg);
}

.skin-picker-trigger:hover {
    border-color: #c8a96e;
    color: #c8a96e;
    background: #1f1f1f;
}

.skin-picker-trigger:hover .skin-picker-trigger-chevron {
    opacity: 1;
}

.skin-picker-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: #141414;
    border: 1px solid #222;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 300;
    overflow: hidden;
}

.skin-picker-header {
    padding: 10px 12px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
}

.skin-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: #aaa;
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.skin-picker-option:hover {
    background: #1a1a1a;
    color: #d8d8d8;
}

.skin-picker-option.is-active {
    color: #d8d8d8;
}

.skin-picker-option.is-active .skin-picker-swatch {
    box-shadow: 0 0 0 2px #c8a96e;
}

.skin-picker-option.is-locked {
    opacity: 0.5;
}

.skin-picker-option.is-locked:hover {
    opacity: 0.7;
}

.skin-picker-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #333;
    flex-shrink: 0;
}

.skin-picker-swatch--founding {
    background: linear-gradient(135deg, #e8e0ce, #d4c5a0);
    border-color: #b8a882;
}

.skin-picker-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.skin-picker-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skin-picker-desc {
    font-size: 0.68rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skin-picker-lock {
    color: #555;
    flex-shrink: 0;
}

.skin-picker-footer {
    padding: 8px 12px;
    border-top: 1px solid #1e1e1e;
}

.skin-picker-supporter-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 500;
    color: #a08050;
    text-decoration: none;
    transition: color 0.15s;
}

.skin-picker-supporter-link:hover {
    color: #c8a96e;
}

.skin-picker-supporter-link svg {
    color: #c8a96e;
    opacity: 0.7;
}

.title-bar-year-selector {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    border: 1px solid #3d3d3d;
    border-radius: 3px;
    background: #222222;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
    margin-top: 4px;
}

.year-label-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    background: #1c1c1c;
    border-right: 1px solid #222222;
    font-size: 11px;
    font-weight: 600;
    color: #a0a0a0;
    white-space: nowrap;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.title-bar-year-selector .year-select {
    padding: 5px 20px 5px 8px;
    border: none;
    border-radius: 0;
    background: #222222;
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    min-width: 60px;
    width: auto;
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23b0b0b0' d='M5 7.5L1.5 4h7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-color: #222222;
    padding-right: 22px;
}

.title-bar-year-selector .year-select option {
    background: #1c1c1c;
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
}

.title-bar-year-selector:hover {
    border-color: #474747;
}

.title-bar-year-selector:hover .year-select {
    background-color: #313131;
}

.title-bar-year-selector .year-select:focus {
    outline: none;
    background-color: #313131;
}

.title-bar-year-selector:focus-within {
    border-color: #c8a96e;
    box-shadow: 0 0 0 2px rgba(200, 169, 110, 0.2);
}

.title-bar-year-selector .year-select option {
    background: #1c1c1c;
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
}


/* Main Content */
.hoi4-main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Left Panel */
.hoi4-left-panel {
    width: 60%;
    background: #1c1c1c;
    border-right: 2px solid #3d3d3d;
    display: flex;
    flex-direction: column;
    padding: 15px;
    overflow-y: auto;
}

.hoi4-left-panel[hidden],
.hoi4-right-panel[hidden] {
    display: none;
}

/* Right Panel - Stats */
.hoi4-right-panel {
    width: 40%;
    background: #1e1e1e;
    overflow-y: auto;
    padding: 15px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    max-height: 100dvh;
    z-index: 100;
}

.hoi4-division-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.division-header-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.division-icon-selector {
    width: 40px;
    height: 40px;
    background: #222222;
    border: 2px solid #3d3d3d;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.division-icon-selector:hover {
    border-color: #4f4f4f;
    background: #313131;
}

.division-icon-display {
    font-size: 24px;
    line-height: 1;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.division-icon-image {
    width: 150%;
    height: 150%;
    object-fit: contain;
    image-rendering: crisp-edges;
}

.division-icon-fallback {
    font-size: 24px;
    line-height: 1;
}

.division-icon-picker-image {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: crisp-edges;
}

.division-name-input {
    flex: 1;
    min-width: 150px;
}

.division-name-input input {
    background: #222222;
    border: 1px solid #3d3d3d;
    color: #e0e0e0;
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 13px;
    width: 100%;
}

.division-name-input input:focus {
    outline: none;
    border-color: #6b5a3e;
}

.year-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.year-selector label {
    color: #a0a0a0;
    font-size: 12px;
}

.year-select {
    background: #222222;
    border: 1px solid #3d3d3d;
    color: #e0e0e0;
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 13px;
    cursor: pointer;
}

.year-select:hover {
    border-color: #4f4f4f;
}

.year-select:focus {
    outline: none;
    border-color: #c8a96e;
}

/* Section Header */
.section-header {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
    justify-content: flex-start;
    align-items: center;
}

.section-label {
    font-size: 13px;
    font-weight: 600;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 15px;
}

.template-warning-indicator {
    position: absolute;
    top: -12px;
    right: -2px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    line-height: 1;
    color: rgb(159, 142, 85);
    background: #1c1c1c;
    border: 1px solid rgb(159, 142, 85);
    border-radius: 4px;
    cursor: default;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.template-warning-indicator .template-warning-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.template-warning-indicator.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.division-grid-wrapper {
    position: relative;
}

/* Prevent text/image selection and iOS callout on long press (tooltips work; no selection) */
.support-combat-container {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

/* Prevent long-press from "picking up" or saving slot images (unit icons, badges) */
.support-combat-container img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    pointer-events: auto; /* keep taps/clicks working */
}

.support-combat-container.template-invalid {
    border-color: rgb(159, 142, 85);
    background: rgba(159, 142, 85, 0.04);
}

/* Ensure h1 doesn't break layout */
h1.sr-only {
    margin: 0;
    padding: 0;
}

/* Support and Combat Container */
.support-combat-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #202020;
    border: 1px solid #3d3d3d;
    border-radius: 0 3px 3px 3px;
    padding: 15px;
    min-height: 400px;
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.support-combat-container > #resource-icons {
    position: absolute;
    bottom: 0;
    right: 12px;
    transform: translateY(50%);
    background: #222222;
    border: 1px solid #4a4a4a;
    border-radius: 10px;
    padding: 2px 8px;
    display: none; /* shown by JS when resources exist */
}

.support-column {
    width: 70px;
    flex-shrink: 0;
}

.combat-column {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Ensure consistent alignment across browsers */
    align-items: stretch;
    justify-content: flex-start;
}

/* Slot Grid */
.slot-grid {
    display: grid;
    gap: 8px;
    margin-bottom: 0;
    overflow: visible;
}

.support-slots {
    grid-template-columns: repeat(1, 1fr);
    justify-items: center;
}

.combat-slots {
    grid-template-columns: repeat(5, 1fr);
}

.slot {
    width: 100%;
    height: 60px;
    background: #222222;
    border: 2px dashed #3d3d3d;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    aspect-ratio: 1;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

.support-slots .slot {
    height: 60px;
    width: 60px;
}

.slot:hover {
    border-color: #4f4f4f;
    background: #313131;
}

.slot.filled {
    border: 1px solid #548475;
    background: #1e1e1e;
}

/* Unit in slot is disabled by current tech/doctrine (e.g. from template load).
   Tank designer reuses the same classes on .td-slot-cell for invalid modules. */
.slot.slot-unit-disabled,
.td-slot-cell.slot-unit-disabled {
    opacity: 0.55;
    filter: grayscale(0.7);
}
.slot.slot-unit-disabled .slot-content {
    cursor: default;
}

.slot.add-slot {
    border-style: solid;
    border-color: #3d3d3d;
}

.slot.add-slot .slot-icon {
    font-size: 48px;
    font-weight: bold;
    color: #8a8a8a;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-2px);
}

.slot.locked {
    background: #1a1a1a;
    border: 2px solid #282828;
    cursor: not-allowed;
}

.slot.locked .slot-icon {
    font-size: 32px;
    opacity: 0.4;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === New game-update layout: width badge, support-on-right, regimental row === */

/* Combat width badge: pediment-style badge overlapping the top of the combat grid.
   Sits inside .combat-column (which is position: relative) so it auto-centers over
   the combat area regardless of how wide the support column is. */
.combat-width-badge {
    position: absolute;
    top: -29px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    height: 26px;
    padding: 0 10px;
    background: #1c1c1c;
    border: 1px solid #4a4a4a;
    border-radius: 13px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    cursor: default;
}

/* Outward-pointing triangles flanking the value inside the bubble — visually
   represent the "width" the number measures. Pure CSS borders, color matches
   the value text so the indicator reads as a single gold motif. */
.combat-width-badge::before,
.combat-width-badge::after {
    content: '';
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.combat-width-badge::before {
    border-right: 5px solid #c8a96e;
}

.combat-width-badge::after {
    border-left: 5px solid #c8a96e;
}

.combat-width-badge-value {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Support column label (inside the right-side support column) */
.support-column-label {
    font-size: 9px;
    font-weight: 600;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-align: center;
    padding: 4px 0 8px;
    border-bottom: 1px solid #2e2e2e;
    margin-bottom: 8px;
}

/* Regimental support row: extends combat columns at the bottom. Visual placeholder
   only for now (rules TBD), so cells are styled like locked slots and non-interactive. */
.regimental-support-row {
    margin-top: 14px;
    padding: 8px 6px 8px;
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35);
}

.regimental-slots {
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 6px;
    --regimental-height: 54px;
}

.regimental-slot-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 2px;
    height: var(--regimental-height);
    box-sizing: border-box;
}

.regimental-slots .slot {
    height: var(--regimental-height);
    aspect-ratio: auto;
    width: 100%;
}

/* Match side support column icon size — regimental cells are wide, so center a fixed icon box */
.regimental-slots .slot.filled .slot-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
}

.regimental-slots .unit-image {
    width: 100%;
    height: 100%;
    padding: 4px;
    box-sizing: border-box;
}

/* Unlocked add-cell mirrors the combat/support add-slot affordance so the row
   reads as interactive once a column meets the battalion threshold. */
.regimental-slots .slot.locked {
    background: #1a1a1a;
    border: 2px solid #282828;
    cursor: not-allowed;
}

.regimental-slots .slot.locked:hover {
    background: #1a1a1a;
    border-color: #282828;
}

.regimental-slots .slot.locked .slot-icon {
    font-size: 26px;
    color: #5a5a5a;
    opacity: 0.5;
}

.regimental-slots .slot.add-slot .slot-icon {
    font-size: 36px;
}

.regimental-support-label {
    font-size: 9px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    text-align: center;
    padding-top: 4px;
}

/* Remove action at top of support company modal */
#support-remove-action {
    padding: 0 0 1.2rem;
    border-bottom: 1px solid #3a3a3a;
    margin-bottom: 0.5rem;
}

#support-remove-btn {
    width: 100%;
    background: #3a1e1e;
    border-color: #6a3a3a;
    color: #e8a0a0;
}

#support-remove-btn:hover {
    background: #5a2a2a;
    border-color: #8a4a4a;
    color: #ffbcbc;
}

/* Onboarding Hint – same attention effect as dev log (rotating conic gradient ring + bubble-style tooltip) */
@property --onboarding-ring-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes onboardingRingFlow {
    to {
        --onboarding-ring-angle: 360deg;
    }
}

.slot.onboarding-hint {
    position: relative;
    border-color: transparent;
    border-style: solid;
    border-width: 2px;
    background: transparent;
    overflow: visible;
    z-index: 10;
}

/* Rotating gradient ring behind (matches version pill / dev log) – only the 2px ring shows */
.slot.onboarding-hint::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 5px;
    background: conic-gradient(
        from var(--onboarding-ring-angle, 0deg),
        #1a2f2a,
        rgba(84, 132, 117, 0.35),
        #1a2f2a,
        rgba(84, 132, 117, 0.8),
        #1a2f2a,
        rgba(160, 204, 188, 0.5),
        #1a2f2a
    );
    z-index: 0;
    animation: onboardingRingFlow 3.5s linear infinite;
}

/* Dark fill on top of gradient so only the border ring is visible */
.slot.onboarding-hint::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(145deg, #474747 0%, #2a2a2a 100%);
    border-radius: 3px;
    z-index: 1;
}

/* Slot content above the fill so icon/label remain visible (don't target tooltip – it must stay position: absolute) */
.slot.onboarding-hint > .slot-content {
    position: relative;
    z-index: 2;
}

/* Onboarding hint tooltip – same style as version-new-bubble (dev log) */
.onboarding-hint-tooltip {
    position: absolute;
    bottom: calc(100% + 16px);
    left: 0;
    background: linear-gradient(145deg, #2d2d2d 0%, #252525 100%);
    border: 1px solid #5a5a5a;
    border-radius: 8px;
    padding: 10px 16px;
    color: #e0e0e0;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10001;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
    letter-spacing: 0.3px;
    animation: onboardingTooltipBounce 2s ease-in-out infinite;
}

.onboarding-hint-tooltip .onboarding-hint-tooltip-cta {
    color: #a0ccbc;
    font-weight: 600;
}

@keyframes onboardingTooltipBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Arrow pointing down to the slot (matches bubble caret) */
.onboarding-hint-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: var(--caret-left, 30px);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #252525;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.onboarding-hint-tooltip::before {
    content: '';
    position: absolute;
    bottom: -9px;
    left: var(--caret-left, 30px);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #5a5a5a;
    z-index: -1;
}

.slot.large-slot {
    grid-column: 1 / -1;
    height: 80px;
    margin-top: 8px;
    aspect-ratio: auto;
}

.slot-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.slot-unlock-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    z-index: 2;
    cursor: default;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

.slot-unlock-badge-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
    opacity: 0.95;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}


/* Smaller requirement badges on support company slots to avoid overlapping the company logo */
.support-slots .slot-unlock-badge {
    width: 12px;
    height: 12px;
    top: 2px;
    right: 2px;
    border-radius: 2px;
}
.support-slots .slot-unlock-badge-icon {
    width: 9px;
    height: 9px;
}

.slot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 32px;
}

.unit-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

/* Make combat unit icons slightly smaller to reduce pixelation */
.combat-slots .unit-image {
    padding: 8px;
}

.unit-image-modal {
    width: 48px;
    height: 48px;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

.slot-icon-fallback {
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Actions */
/* Terrain Effects Section */
.terrain-effects-section {
    margin-top: 15px;
    padding: 15px;
    background: #202020;
    border: 1px solid #3d3d3d;
    border-radius: 3px;
}

.terrain-effects-section .section-label {
    font-size: 13px;
    font-weight: bold;
    color: #c0c0c0;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.terrain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.terrain-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #222222;
    border: 1px solid #3d3d3d;
    border-radius: 2px;
    font-size: 12px;
    gap: 0px;
    min-height: 40px; /* Reserve space to prevent layout shift */
}

.terrain-name {
    color: #e0e0e0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 80px;
}

.terrain-icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    object-fit: contain;
    image-rendering: crisp-edges;
    flex-shrink: 0;
}

.terrain-values-container {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

.terrain-modifier {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 50px;
}

.terrain-mod-label {
    font-size: 10px;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.terrain-mod-value-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0; /* Allow container to shrink if needed */
}

.terrain-mod-label-container {
    display: flex;
    align-items: center;
    position: relative;
    /* No gap needed - icons are absolutely positioned and don't take space */
}

.terrain-mod-value {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-align: right;
    white-space: nowrap;
    position: relative;
    min-width: 40px; /* Reserve space to prevent layout shift when values load */
    display: inline-block; /* Ensure min-width is respected */
}

.terrain-mod-value.positive {
    color: #5cb87a;
}

.terrain-mod-value.negative {
    color: #ff6b6b;
}

.terrain-mod-value.neutral {
    color: #e0e0e0;
}

.hoi4-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #3d3d3d;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}


.saved-templates-section {
    display: flex;
    gap: 5px;
    align-items: center;
    flex: 1;
    min-width: 180px;
}

/* Custom Dropdown for Templates */
.custom-dropdown {
    position: relative;
    min-width: 180px;
}

.dropdown-header {
    background: #1c1c1c;
    border: 1px solid #3d3d3d;
    color: #e0e0e0;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.dropdown-header:hover {
    border-color: #4f4f4f;
    background: #222222;
}

.dropdown-arrow {
    font-size: 10px;
    margin-left: 8px;
    opacity: 0.7;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1c1c1c;
    border: 1px solid #3d3d3d;
    border-radius: 3px;
    margin-top: 2px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dropdown-option {
    padding: 8px 10px;
    color: #e0e0e0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    border-bottom: 1px solid #222222;
}

.dropdown-option:last-child {
    border-bottom: none;
}

.dropdown-option:hover {
    background: #222222;
}

.dropdown-option.load-template {
    font-style: italic;
    opacity: 0.7;
}

.dropdown-section-header {
    font-weight: bold;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 10px 4px 10px;
    cursor: default;
    pointer-events: none;
    border-top: 1px solid #3d3d3d;
    margin-top: 4px;
}

.dropdown-section-header:first-of-type {
    border-top: none;
    margin-top: 0;
}

.dropdown-option.preset-template {
    opacity: 0.95;
}

.dropdown-option-name {
    flex: 1;
}

.comparison-option-name {
    flex: 1;
    min-width: 0;
}

.comparison-option-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 8px;
    color: rgb(159, 142, 85);
    line-height: 1;
    cursor: default;
}
.comparison-option-warning .comparison-option-warning-icon {
    width: 14px;
    height: 14px;
    min-width: 14px;
    flex-shrink: 0;
    display: block;
    color: rgb(159, 142, 85);
}

/* Infeasible baseline option: stats will show "-" when selected (missing research/doctrine) */
.comparison-dropdown-option[data-feasible="false"] {
    opacity: 0.95;
}

.dropdown-option-delete {
    margin-left: 10px;
    padding: 2px 6px;
    background: transparent;
    border: none;
    color: #ff6b6b;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.7;
    border-radius: 2px;
}

.dropdown-option-delete:hover {
    opacity: 1;
    background: #5a2a2a;
}

/* Locked dropdown option (Pro save, over-cap for non-Pro user). */
.dropdown-option.is-locked {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.5);
}
.dropdown-option.is-locked:hover {
    opacity: 0.7;
    background: inherit;
}
.dropdown-option.is-locked .dropdown-option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropdown-option-lock {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 6px;
    padding: 0 3px;
    border-radius: 2px;
    background: rgba(212, 144, 10, 0.16);
    border: 1px solid rgba(212, 144, 10, 0.45);
    color: #f3c97a;
    font-size: 8px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.dropdown-option-locked-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(212, 144, 10, 0.16);
    border: 1px solid rgba(212, 144, 10, 0.5);
    color: #f3c97a;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dropdown-template-counter {
    padding: 8px 10px;
    font-size: 11px;
    color: #a0a0a0;
    text-align: center;
    border-top: 1px solid #222222;
    background: #1e1e1e;
    font-style: italic;
}

.dropdown-template-counter.caution {
    color: #ffa500;
}

.dropdown-template-counter.warning {
    color: #ff6b6b;
    font-weight: 600;
}




.hoi4-btn.delete-btn {
    padding: 5px 8px;
    font-size: 14px;
    min-width: auto;
    color: #e07070;
    border-color: #5a2a2a;
}

.hoi4-btn.delete-btn:hover {
    background: #5a2a2a;
    border-color: #7a3a3a;
}

.hoi4-btn {
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    color: #e0e0e0;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.hoi4-btn:hover {
    background: #222222;
    border-color: #3a3a3a;
}

/* Beta badge for doctrine button */
.beta-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 5px;
    background: #6a4a2a;
    border: 1px solid #8a6a3a;
    color: #ffd700;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2px;
    margin-left: 4px;
    line-height: 1;
}

/* Comparison Grid button */
.comparison-grid-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #1a1a1a;
    border-color: #2e2e2e;
    color: #e0e0e0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.comparison-grid-btn:hover {
    background: #222222;
    border-color: #c8a96e;
    color: #e0e0e0;
}

.comparison-grid-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* About button icon styling */
#about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 5px 12px;
}

#about-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border: none;
}

.about-btn-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Logo dropdown menu */
.logo-menu {
    position: relative;
}

.logo-menu-trigger {
    display: flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #555;
    transition: color 0.15s;
}

.logo-menu-trigger:hover {
    color: #888;
}

.logo-menu-trigger:hover .title-logo {
    opacity: 0.82;
}

.logo-menu-chevron {
    flex-shrink: 0;
    transition: transform 0.15s;
    color: #c8a96e;
}

.logo-menu-trigger[aria-expanded="true"] .logo-menu-chevron {
    transform: rotate(180deg);
}

.logo-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 190px;
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 200;
    overflow: hidden;
    font-weight: normal;
}

.logo-menu-dropdown[hidden] {
    display: none;
}

.logo-menu-designers {
    margin: 0.3rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #222;
    overflow: hidden;
}

.logo-menu-designers .nav-dropdown-item {
    padding-left: 0.75rem;
}


/* Nav buttons: slightly darker than navbar so they differentiate */
.title-bar-actions .hoi4-btn {
    background: #1a1a1a;
    border-color: #2e2e2e;
}

.title-bar-actions .hoi4-btn:hover {
    background: #222222;
    border-color: #3a3a3a;
}

#doctrine-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

#doctrine-btn:hover {
    border-color: #3d3d3d;
}

.doctrine-btn-icon,
.technologies-btn-icon,
.special-projects-btn-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.title-bar-actions .hoi4-btn .doctrine-btn-icon,
.title-bar-actions .hoi4-btn .technologies-btn-icon {
    opacity: 0.95;
}

.title-bar-actions .hoi4-btn:hover .doctrine-btn-icon,
.title-bar-actions .hoi4-btn:hover .technologies-btn-icon {
    opacity: 0.95;
}

/* When doctrines are applied, button keeps default styling; only the green dot (.doctrine-active-indicator) shows active state */

.doctrine-active-indicator {
    display: inline-block;
    color: #4e7e5f;
    font-size: 8px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.hoi4-btn.primary {
    background: #c8a96e;
    border-color: #c8a96e;
    color: #1a1208;
    font-weight: 600;
}

.hoi4-btn.primary:hover {
    background: #d9ba7f;
    border-color: #d9ba7f;
    color: #1a1208;
}

.hoi4-btn.save-btn {
    background: #1a2f2a;
    border-color: #548475;
    color: #a0ccbc;
}

.hoi4-btn.save-btn:hover {
    background: #243f37;
    border-color: #649485;
    color: #a0ccbc;
}

/* Disabled Save (invalid design) - matches the disabled Share button. The
   in-progress `.is-saving` state (id-scoped below) has higher specificity, so it
   still wins while a save is running. */
.hoi4-btn.save-btn:disabled {
    background: transparent;
    border-color: #3d3d3d;
    color: #555;
    cursor: default;
    pointer-events: none;
}

/* Share icon button */
.share-icon-btn {
    padding: 6px 10px;
    min-width: auto;
}

/* Publish split-dropdown */
.pub-split {
    position: relative;
}

.pub-split-btn {
    gap: 6px;
}

.hoi4-btn.pub-split-btn {
    background: #2a2010;
    border-color: #c8a96e;
    color: #c8a96e;
    font-weight: normal;
}

.hoi4-btn.pub-split-btn:hover {
    background: #352815;
    border-color: #d9ba7f;
    color: #d9ba7f;
}


.pub-split-menu {
    position: absolute;
    top: 0;
    left: calc(100% + 4px);
    background: #222222;
    border: 1px solid #3d3d3d;
    border-radius: 4px;
    min-width: 210px;
    z-index: 500;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .pub-split-menu {
        left: auto;
        right: 0;
        top: calc(100% + 4px);
    }
}

.pub-split-menu[hidden] {
    display: none;
}

.pub-split-item[hidden] {
    display: none;
}

.pub-split-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    color: #e0e0e0;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.pub-split-item:hover {
    background: #313131;
}

.pub-split-item:disabled {
    color: #444;
    cursor: default;
    pointer-events: none;
}

.pub-split-item:disabled .pub-split-label {
    color: #444;
}

.pub-split-item:disabled .pub-split-desc {
    color: #383838;
}

.pub-split-btn:disabled {
    background: transparent;
    border-color: #3d3d3d;
    color: #555;
    cursor: default;
    pointer-events: none;
}

.pub-split-item + .pub-split-item {
    border-top: 1px solid #3d3d3d;
}

.pub-split-label {
    font-size: 12px;
    font-weight: 600;
    color: #e0e0e0;
}

.pub-split-desc {
    font-size: 11px;
    color: #777;
}

#copy-link-btn.copied .pub-split-label,
#save-template-btn.copied,
#td-save-btn.copied,
#sd-save-btn.copied {
    color: #a0ccbc;
    animation: pulse 0.3s ease-in-out;
}

#td-save-btn.is-saving,
#sd-save-btn.is-saving,
#air-save-btn.is-saving {
    color: #c8c8c8;
    opacity: 0.85;
    cursor: progress;
    pointer-events: none;
}

#save-template-btn:disabled {
    background: transparent;
    border-color: #3d3d3d;
    color: #555;
    cursor: default;
    pointer-events: none;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}


/* Comparison Tools Section */
/* Stats-tools cluster: sticky parent wrapping the comparison bar and the
   adjusted-stats bar so they scroll as a single attached unit. The cluster
   owns the border, shadow and rounded corners; the inner bars are seamless
   zones inside it. Used by the division designer right panel. (Tank/ship
   still use the standalone .comparison-tools-section markup.) */
.stats-tools-cluster {
    position: sticky;
    top: 0;
    z-index: 100;
    margin-bottom: 12px;
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    /* No overflow:hidden here - the Compare Against dropdown menu (and any
       other absolutely-positioned popover anchored inside) needs to escape
       the wrapper. Child backgrounds get explicit corner radii instead so
       the visual seal is preserved. */
}

.comparison-tools-section {
    padding: 8px 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1a1a1a;
    border: 1px solid rgba(139, 122, 90, 0.45);
    border-radius: 5px;
    flex-wrap: wrap;
    position: sticky;
    top: 0; /* On desktop, stick at top of its scroll container */
    z-index: 100;
    /* Ensure background covers content when sticky */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* When the comparison bar lives inside a cluster, the wrapper owns the
   visual frame - strip the standalone styling. */
.stats-tools-cluster .comparison-tools-section {
    position: static;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
}

/* ── Adjusted-stats bar (top zone of .stats-card) ────────────────────────
   Mutually-exclusive view switcher: totals, or stat ratios per IC/manpower/
   width/supply. It uses the same dark/gold palette as the designer chrome so
   the control reads as part of the stats card. */
.stats-adjusted-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    background:
        linear-gradient(180deg, rgba(80, 66, 42, 0.12) 0%, rgba(80, 66, 42, 0.05) 100%),
        #1a1a1a;
    border: 0;
    flex-wrap: wrap;
}

/* ── Stats card ──────────────────────────────────────────────────────────────
   Wraps the efficiency bar + all stat sections as one unit. The bar transforms
   the stats directly below it, so they live in the same card. Sits on the
   parchment; the card's border defines the unit. The bar gets its own rounded
   top corners (instead of being clipped by the card's overflow:hidden) so the
   bar can be sticky — position:sticky doesn't work inside overflow:hidden. */
.stats-card {
    border: 1px solid #8b7a5a;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.05);
    margin-top: 0;
}

/* Efficiency bar as the top zone of the stats card. Sticks just below the
   comparison-tools-section (which sticks at top:0) so the view-mode tabs stay
   visible while the user scrolls through stat sections. */
.stats-card > .stats-adjusted-bar {
    position: sticky;
    top: 47px;
    z-index: 99;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid rgba(139, 122, 90, 0.45);
    box-shadow: inset 0 -1px 0 rgba(200, 169, 110, 0.08);
    margin-bottom: 0;
}

/* Seam glow only when a real denominator is on (not Totals). The Totals tab has
   data-denom=""; the bar mirrors that to its own data-denom, so attribute
   selectors on the bar tell us when to glow. */
.stats-card > .stats-adjusted-bar:not([data-denom=""]) {
    border-bottom-color: rgba(200, 169, 110, 0.72);
    box-shadow: inset 0 -1px 0 rgba(200, 169, 110, 0.18);
}

/* Stat sections inside the card: keep their internal layout but reset their
   own outer margins so they live as flush rows of the card. The card itself
   provides the outer padding. */
.stats-card > .stats-section {
    padding: 14px 16px 14px;
    margin: 0;
    border-bottom: 1px dashed rgba(80, 66, 42, 0.25);
}

.stats-card > .stats-section:last-child {
    border-bottom: 0;
}

/* Text-tab denominators. Light idle treatment so the bar reads as a quiet
   secondary control; the active option lights up with a gold underline and
   text color, and reveals its inline hint. No background fill - the underline
   does the work. */
.sab-tabs {
    display: flex;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 2px;
}

.sab-tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 4px 2px;
    margin: 0;
    cursor: pointer;
    color: #888;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.02em;
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    transition: color 120ms ease;
}

/* Subtle 1px underline rail sitting just below the baseline, neutral when
   idle and gold when active. Animates with a transform so the active state
   feels confirmed without being noisy. */
.sab-tab::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: -1px;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: center;
    transition: opacity 140ms ease, transform 140ms ease;
    pointer-events: none;
}

.sab-tab:hover {
    color: #e0d3b8;
}

.sab-tab:hover::after {
    opacity: 0.35;
    transform: scaleX(0.8);
}

.sab-tab[aria-pressed="true"] {
    color: #c8a96e;
}

.sab-tab[aria-pressed="true"]::after {
    background: #c8a96e;
    opacity: 1;
    transform: scaleX(1);
    height: 2px;
    box-shadow: 0 0 6px rgba(200, 169, 110, 0.5);
}

.sab-tab:focus-visible {
    outline: none;
    color: #ebebeb;
}
.sab-tab:focus-visible::after {
    background: #c8a96e;
    opacity: 0.8;
    transform: scaleX(1);
}

/* Inline cue: hidden on idle tabs, revealed only on the pressed tab so the
   explanation rides along with the active option instead of a sidebar label. */
.sab-tab-hint {
    display: none;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #6f6f6f;
    line-height: 1;
}
.sab-tab-hint::before {
    content: '·';
    margin-right: 5px;
    color: rgba(139, 122, 90, 0.55);
}
.sab-tab[aria-pressed="true"] .sab-tab-hint {
    display: inline;
}

/* Reset chip: appears only when an option is active (hidden attribute is
   toggled by JS). Sits on the trailing edge of the bar. */
.sab-reset {
    appearance: none;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    background: transparent;
    border: 1px solid #2a2a2a;
    border-radius: 999px;
    color: #888;
    font-family: inherit;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.sab-reset[hidden] { display: none; }

.sab-reset:hover {
    color: #ebebeb;
    border-color: #3a3a3a;
    background: rgba(255, 255, 255, 0.03);
}

.sab-reset svg { opacity: 0.7; }

.comparison-baseline-control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

.comparison-label {
    font-size: 11px;
    color: #d0d0d0;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Adjust label width for longer text */
.comparison-baseline-control .comparison-label {
    min-width: 110px;
}

.comparison-baseline-control .comparison-dropdown {
    flex: 1 1 0;
    min-width: 120px;
    max-width: 100%;
}

.comparison-baseline-control .comparison-dropdown .dropdown-header {
    min-width: 0;
}

.comparison-dropdown-warning-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 6px;
    color: rgb(159, 142, 85);
}
.comparison-dropdown-warning-icon[hidden] {
    display: none !important;
}
.comparison-dropdown-warning-icon .comparison-warning-icon-svg {
    width: 14px;
    height: 14px;
}

.dropdown-header.comparison-dropdown-invalid {
    border-color: rgb(159, 142, 85);
}

/* Prevent text/icon selection and iOS callout on long-press (tooltip still shows) */
.comparison-dropdown .dropdown-header {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Selected "Compare Against" label (division/tank/ship): truncate long template
   titles with an ellipsis instead of stretching the dropdown. */
.comparison-dropdown-text {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.comparison-dropdown .dropdown-header .dropdown-arrow {
    flex-shrink: 0;
}

.comparison-template-select {
    flex: 1 1 0;
    min-width: 120px;
    max-width: 100%;
    padding: 6px 10px;
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    border-radius: 3px;
    color: #e0e0e0;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23b0b0b0' d='M5 7.5L1.5 4h7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-color: #1a1a1a;
    padding-right: 28px;
}

.comparison-template-select:hover {
    border-color: #3a3a3a;
    background-color: #222222;
}

.comparison-template-select:focus {
    outline: none;
    border-color: #c8a96e;
    background-color: #222222;
    box-shadow: 0 0 0 2px rgba(200, 169, 110, 0.2);
}

.stats-control-item .hoi4-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Baseline Comparison Indicators */
.baseline-comparison {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-weight: 600;
    font-size: 10px;
    line-height: 1.2;
    text-align: right;
    margin-top: 2px;
    display: inline-block;
}

/* Baseline comparisons for terrain section (dark background) */
.terrain-mod-value-container .baseline-comparison.positive {
    color: #5cb87a;
    opacity: 0.9;
}

.terrain-mod-value-container .baseline-comparison.negative {
    color: #cc6666;
    opacity: 0.9;
}

/* Baseline comparisons for stats section (light parchment background) */
.stats-parchment .baseline-comparison.positive {
    color: #2d7a2d;
    opacity: 1;
}

.stats-parchment .baseline-comparison.negative {
    color: #8b2d2d;
    opacity: 1;
}

/* Highlight animation for comparison indicators when they first appear */
/* Removed scaling animation - percentages no longer grow when they appear */
.baseline-comparison.comparison-highlight {
    animation: comparisonPulse 2s ease-out;
}

@keyframes comparisonPulse {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* Highlight stat rows that have positive comparisons (green) */
/* Removed background highlighting - using chevron arrows only */

.template-bottom-bar {
    display: flex;
    align-items: center;
    flex-basis: 100%;
    padding-bottom: 4px;
}

.production-cost {
    margin-left: auto;
    margin-bottom: 0;
    font-size: 11px;
    color: #a0a0a0;
    text-align: right;
    position: relative; /* For absolute positioning of change icon */
    flex-shrink: 0;
}

.production-cost #cost-min,
.production-cost #cost-max {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #c4a86f;
    position: relative;
}

/* Production cost change icon - positioned inline before the label text */
.cost-change-icon {
    position: relative;
    display: inline-block;
    margin-right: 4px;
    margin-left: 0;
    vertical-align: middle;
    margin-top: -1px; /* Fine-tune vertical alignment to center with text baseline */
}

/* Cost label span - inline container */
#cost-label {
    display: inline;
    position: relative;
    white-space: nowrap; /* Prevent wrapping that might affect width */
}

.production-cost .baseline-comparison {
    margin-left: 8px;
}

.production-cost .baseline-comparison.positive {
    color: #5cb87a;
    opacity: 0.9;
}

.production-cost .baseline-comparison.negative {
    color: #cc6666;
    opacity: 0.9;
}

/* Resource Requirements Display - Inline with Production Cost */
.resource-separator {
    color: #4f4f4f;
    margin: 0 6px;
    display: none; /* Hidden by default, shown when resources exist */
}

.resource-icons {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    vertical-align: middle;
}

.resource-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    cursor: default;
    opacity: 0.85;
}

/* Right Panel - Stats */
.hoi4-right-panel {
    width: 40%;
    background: #1e1e1e;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow flex child to shrink */
    height: 100%; /* Fill available height in flex container */
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    max-height: 100dvh;
    z-index: 100;
}

.stats-parchment {
    background: linear-gradient(to bottom, #d4c5a0, #c4b590);
    border: 2px solid #8b7a5a;
    border-radius: 5px;
    padding: 15px;
    color: #1c1c1c;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    flex: 1 1 auto; /* Grow to fill space, allow shrinking, basis is content size */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.stats-section {
    margin-bottom: 25px;
}

.stats-section:last-child {
    margin-bottom: 0;
}

/* ── Indicators ──────────────────────────────────────────────────────────────
   At-a-glance summary scores at the top of the stats panel. Dark "medallion"
   badges on the cream parchment - deliberately distinct from the plain
   label:value rows below. Horizontally scrollable for when the list grows
   (defaults + custom). */
.stats-indicators {
    margin-bottom: 25px;
}

.stats-indicators-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 5px;
    border-bottom: 1px solid #8b7a5a;
}

.stats-indicators-title {
    font-weight: bold;
    font-size: 14px;
    color: #1e1e1e;
}

.stats-indicators-scroll {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(80, 66, 42, 0.5) transparent;
    -webkit-overflow-scrolling: touch;
}

.stats-indicators-scroll > :first-child {
    margin-left: auto;
}

.stats-indicators-scroll > :last-child {
    margin-right: auto;
}

.stats-indicators-scroll::-webkit-scrollbar {
    height: 6px;
}
.stats-indicators-scroll::-webkit-scrollbar-track {
    background: rgba(80, 66, 42, 0.12);
    border-radius: 3px;
}
.stats-indicators-scroll::-webkit-scrollbar-thumb {
    background: rgba(80, 66, 42, 0.45);
    border-radius: 3px;
}

.stat-indicator {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.32rem;
    text-align: center;
}

.stat-indicator-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 2.6rem;
    padding: 0 0.65rem;
    border-radius: 999px;
    box-sizing: border-box;
    background: linear-gradient(165deg, rgba(34, 31, 26, 0.97) 0%, rgba(18, 17, 15, 0.98) 100%);
    border: 1px solid rgba(200, 169, 110, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 2px 6px rgba(0, 0, 0, 0.3);
}

.stat-indicator-circle--change-positive {
    animation: statIndicatorPositivePulse 8s ease-out;
}

.stat-indicator-circle--change-negative {
    animation: statIndicatorNegativePulse 8s ease-out;
}

@keyframes statIndicatorPositivePulse {
    0%, 18% {
        border-color: rgba(92, 184, 122, 0.95);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.09),
            0 2px 6px rgba(0, 0, 0, 0.3),
            0 0 0 2px rgba(92, 184, 122, 0.28),
            0 0 12px rgba(92, 184, 122, 0.42);
    }
    100% {
        border-color: rgba(200, 169, 110, 0.45);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            0 2px 6px rgba(0, 0, 0, 0.3);
    }
}

@keyframes statIndicatorNegativePulse {
    0%, 18% {
        border-color: rgba(204, 102, 102, 0.95);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.09),
            0 2px 6px rgba(0, 0, 0, 0.3),
            0 0 0 2px rgba(204, 102, 102, 0.24),
            0 0 12px rgba(204, 102, 102, 0.38);
    }
    100% {
        border-color: rgba(200, 169, 110, 0.45);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            0 2px 6px rgba(0, 0, 0, 0.3);
    }
}

.stat-indicator-value {
    display: block;
    max-width: 100%;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #f2eee6;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stat-indicator-value--sm {
    font-size: 0.84rem;
    letter-spacing: -0.04em;
}

.stat-indicator-value--xs {
    font-size: 0.74rem;
    letter-spacing: -0.05em;
}

.stat-indicator-label {
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5f5238;
    max-width: 5.5rem;
}

/* Delta vs. comparison baseline - only present when comparing. */
.stat-indicator-delta {
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.stat-indicator-delta.positive {
    color: #2d7a2d;
}

.stat-indicator-delta.negative {
    color: #9e3333;
}

/* "Just configured" confirmation - a one-shot ripple-out glow when a stat is
   pinned/updated. Replaces the previous toast notification with in-strip
   feedback. Runs once; subsequent renders within the ~1.2s window keep the
   class so the user always sees the full animation. */
@keyframes stat-indicator-confirm-pin {
    0% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            0 2px 6px rgba(0, 0, 0, 0.3),
            0 0 0 0 rgba(200, 169, 110, 0.65);
    }
    60% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            0 2px 14px rgba(200, 169, 110, 0.55),
            0 0 0 8px rgba(200, 169, 110, 0);
    }
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            0 2px 6px rgba(0, 0, 0, 0.3);
    }
}
.stat-indicator--just-changed .stat-indicator-circle {
    animation: stat-indicator-confirm-pin 1.2s ease-out 1;
}

/* Add-specific entrance: a quick, restrained fade + scale-up with a tiny
   overshoot. The previous spring-bounce read as too animated for a stat
   panel; this version keeps the "something just landed" cue but stays in
   the background. The glow ripple on the inner circle does the heavier
   semantic work in parallel. */
@keyframes stat-indicator-enter {
    0%   { opacity: 0; transform: scale(0.9); }
    70%  { opacity: 1; transform: scale(1.03); }
    100% { transform: scale(1); }
}
.stat-indicator--just-added {
    animation: stat-indicator-enter 320ms cubic-bezier(0.22, 1.0, 0.36, 1) both;
}
.stat-indicator--just-added .stat-indicator-circle {
    animation: stat-indicator-confirm-pin 1.2s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
    .stat-indicator--just-changed .stat-indicator-circle,
    .stat-indicator--just-added,
    .stat-indicator--just-added .stat-indicator-circle {
        animation: none;
    }
}

/* "Leaving" - badge fades + shrinks in place when the user removes it.
   The remove handler holds the next re-render for ~350ms so the user sees
   the animation rather than a hard pop. */
@keyframes stat-indicator-leave {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.6); }
}
.stat-indicator--leaving {
    animation: stat-indicator-leave 350ms ease-out forwards;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .stat-indicator--leaving { animation: none; opacity: 0.4; }
}

/* Indicator hover tooltip (uses the project tooltip system; classes style the
   inner HTML built by indicators.js). */
.indicator-tip-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.4rem;
}
.indicator-tip-name {
    font-size: 13px;
    font-weight: 700;
    color: #f2eee6;
}
.indicator-tip-kind {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c8a96e;
}
.indicator-tip-formula {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 5px 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}
.indicator-tip-formula-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
}
.indicator-tip-formula code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: #e8d5a8;
    word-break: break-word;
}
.indicator-tip-hint {
    margin-top: 0.45rem;
    font-size: 10px;
    color: #888;
    font-style: italic;
}

/* Drag affordance + states. Badges are draggable; the dragged item dims,
   and the hovered target shows a thin gold rail on the drop side to
   telegraph where the dragged badge will land. */
.stat-indicator {
    cursor: grab;
}
.stat-indicator:active {
    cursor: grabbing;
}
.stat-indicator--dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.stat-indicator--drop-before {
    box-shadow: inset 3px 0 0 #c8a96e;
    border-radius: 4px;
}
.stat-indicator--drop-after {
    box-shadow: inset -3px 0 0 #c8a96e;
    border-radius: 4px;
}

/* Add-custom chip - sits at the end of the strip. */
.stat-indicator-add {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    width: 4.5rem;
    height: 2.6rem;
    padding: 0 0.55rem;
    margin-top: 0;
    background: transparent;
    border: 1px dashed rgba(80, 66, 42, 0.5);
    border-radius: 999px;
    color: #6b5d42;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.stat-indicator-add:hover {
    border-color: rgba(80, 66, 42, 0.85);
    color: #3e3526;
    background: rgba(80, 66, 42, 0.06);
}

.stat-indicator-add-glyph {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
}

.stat-indicator-add-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Custom badges are buttons (click to edit) - reset button chrome. */
button.stat-indicator {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

button.stat-indicator:hover .stat-indicator-circle {
    border-color: rgba(210, 90, 195, 0.85);
}

/* ── Custom indicator builder modal (dark themed, sits over the app) ─────── */
.ind-builder-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}
.ind-builder-overlay[hidden] { display: none; }

.ind-builder {
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    color: #d8d8d8;
    font-family: 'Inter', sans-serif;
}

.ind-builder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #262626;
    background: linear-gradient(180deg, rgba(210, 90, 195, 0.08) 0%, transparent 100%);
}

.ind-builder-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ebebeb;
}

.ind-builder-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.ind-builder-close:hover { color: #ebebeb; }

.ind-builder-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.ind-builder-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ind-builder-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
}

.ind-builder-name,
.ind-builder-formula {
    background: #131313;
    border: 1px solid #2e2e2e;
    border-radius: 5px;
    color: #ebebeb;
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
    font-family: inherit;
    outline: none;
}
.ind-builder-formula {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8rem;
}
.ind-builder-name:focus,
.ind-builder-formula:focus {
    border-color: rgba(210, 90, 195, 0.55);
}

.ind-builder-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: #131313;
    border: 1px solid #242424;
    border-radius: 5px;
    min-height: 1.6rem;
}
.ind-builder-preview-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777;
}
.ind-builder-preview-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    color: #e6b3cf;
}
.ind-builder-preview-error {
    font-size: 0.74rem;
    color: #d98a8a;
    margin-left: auto;
    text-align: right;
}

.ind-builder-ops {
    display: flex;
    gap: 0.35rem;
}
.ind-builder-op {
    flex: 1;
    background: #1d1d1d;
    border: 1px solid #2e2e2e;
    border-radius: 5px;
    color: #d0d0d0;
    font-size: 0.9rem;
    padding: 0.35rem 0;
    cursor: pointer;
    font-family: inherit;
}
.ind-builder-op:hover { background: #262626; border-color: #3a3a3a; }

.ind-builder-stats {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 2px;
}
.ind-builder-stat-group-title {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #c8a96e;
    margin-bottom: 0.3rem;
}
.ind-builder-stat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.ind-builder-stat-chip {
    background: #1d1d1d;
    border: 1px solid #2a2a2a;
    border-radius: 999px;
    color: #c0c0c0;
    font-size: 0.72rem;
    padding: 0.22rem 0.55rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.ind-builder-stat-chip:hover {
    background: rgba(210, 90, 195, 0.1);
    border-color: rgba(210, 90, 195, 0.5);
    color: #e6b3cf;
}

.ind-builder-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #b4b4b4;
    cursor: pointer;
}

.ind-builder-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid #262626;
}
.ind-builder-foot-spacer { flex: 1; }

.ind-builder-delete,
.ind-builder-cancel,
.ind-builder-save {
    border-radius: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 0.95rem;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
}
.ind-builder-delete {
    background: transparent;
    border-color: rgba(158, 51, 51, 0.5);
    color: #d98a8a;
}
.ind-builder-delete:hover { background: rgba(158, 51, 51, 0.12); }
.ind-builder-cancel {
    background: transparent;
    border-color: #2e2e2e;
    color: #c0c0c0;
}
.ind-builder-cancel:hover { border-color: #3a3a3a; color: #ebebeb; }
/* Commit action: same bordered/tinted pattern as the designer's Save Template
   (.hoi4-btn.save-btn) and doctrine/tech Apply (.btn-primary) buttons — dark
   tinted background, mid-tone border, light text — in the Pro purple palette. */
.ind-builder-save {
    background: #2e1a2c;
    border-color: #8a4f82;
    color: #d9aed2;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ind-builder-save:hover {
    background: #3c2339;
    border-color: #9a5f92;
    color: #ecc4e6;
}
.ind-builder-save:disabled {
    background: #241420;
    border-color: #4a2f46;
    color: #6a5a64;
    cursor: not-allowed;
}

/* ── Add Focus Stat modal (unified Pin / Custom flow) ──────────────────────
   Same chrome as the Pro builder; tabs hide the Custom pane for free users.
   The pin pane reuses the chip styling pattern, the custom pane mirrors the
   formula editor. Class prefix `.ks-` is retained from the section's previous
   name to avoid a churn-only diff across CSS + JS. */
.ks-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}
.ks-overlay[hidden] { display: none; }

.ks {
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    color: #d8d8d8;
    font-family: 'Inter', sans-serif;
}

.ks-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #262626;
    background: linear-gradient(180deg, rgba(200, 169, 110, 0.06) 0%, transparent 100%);
}
.ks-title { font-size: 0.95rem; font-weight: 700; color: #ebebeb; }
.ks-close {
    background: none; border: none; color: #888;
    font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.ks-close:hover { color: #ebebeb; }

/* Pin / Custom tab strip (hidden for free users → only the Pin pane shows). */
.ks-tabs {
    display: flex;
    gap: 0;
    padding: 0 1rem;
    border-bottom: 1px solid #262626;
}
.ks-tabs[hidden] { display: none; }
.ks-tab {
    background: transparent;
    border: 0;
    color: #888;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.6rem 0.95rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 120ms ease, border-color 120ms ease;
}
.ks-tab:hover { color: #d8d8d8; }
.ks-tab--active {
    color: #ebebeb;
    border-bottom-color: #c8a96e;
}
.ks-tab[data-pane="custom"].ks-tab--active {
    border-bottom-color: #d680c4;
    color: #e6b3cf;
}
.ks-tab-pro {
    font-size: 0.5rem;
    font-weight: 700;
    color: #f2cae8;
    text-shadow: 0 0 5px rgba(210, 90, 195, 0.32), 0 1px 0 rgba(20, 4, 18, 0.85);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(145deg, #3c1640 0%, #62205a 45%, #310d30 100%);
    border: 1px solid rgba(210, 90, 195, 0.4);
    border-radius: 2px;
    padding: 0 3px;
    line-height: 1.3;
}

/* Shared pane chrome */
.ks-pane { padding: 0.9rem 1rem 1.1rem; }
.ks-pane[hidden] { display: none; }
.ks-sub {
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #aaa;
}
.ks-sub code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    color: #e6b3cf;
    background: rgba(210, 90, 195, 0.07);
    padding: 0 4px;
    border-radius: 3px;
}

/* Pin chips - used by both panes (custom pane uses for stat insertion). */
.ks-pin-groups,
.ks-custom-groups {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.ks-pin-group-title {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #c8a96e;
    margin-bottom: 0.32rem;
}
.ks-pin-chips {
    display: flex; flex-wrap: wrap; gap: 0.32rem;
}
.ks-pin-chip {
    background: #1d1d1d;
    border: 1px solid #2a2a2a;
    border-radius: 999px;
    color: #c0c0c0;
    font-family: inherit;
    font-size: 0.74rem;
    padding: 0.28rem 0.65rem;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.ks-pin-chip:hover {
    background: rgba(200, 169, 110, 0.1);
    border-color: rgba(200, 169, 110, 0.5);
    color: #e8d5a8;
}
.ks-pin-chip--pinned {
    opacity: 0.4;
    cursor: not-allowed;
    background: #131313;
}
.ks-pin-chip--pinned:hover {
    background: #131313;
    border-color: #2a2a2a;
    color: #c0c0c0;
}

/* Edit mode: the stat currently pinned by the indicator being edited shows
   highlighted gold so the user can see what they're editing. */
.ks-pin-chip--current {
    background: rgba(200, 169, 110, 0.18);
    border-color: rgba(200, 169, 110, 0.7);
    color: #ead7b0;
    cursor: default;
    box-shadow: 0 0 0 1px rgba(200, 169, 110, 0.2);
}
.ks-pin-chip--current:hover {
    background: rgba(200, 169, 110, 0.18);
    border-color: rgba(200, 169, 110, 0.7);
    color: #ead7b0;
}

/* Inline "remove it from focus" link inside the pin-pane sub copy
   (edit mode only). Reads as part of the sentence rather than a button. */
.ks-pin-remove {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #d98a8a;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 100ms ease;
}
.ks-pin-remove:hover { color: #f0a8a8; }
.ks-pin-remove:disabled { opacity: 0.5; cursor: not-allowed; }

/* Custom-pane form pieces */
.ks-field { display: flex; flex-direction: column; gap: 0.32rem; margin-bottom: 0.7rem; }
.ks-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
}
.ks-name, .ks-formula {
    background: #131313;
    border: 1px solid #2e2e2e;
    border-radius: 5px;
    color: #ebebeb;
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
    font-family: inherit;
    outline: none;
}
.ks-formula {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8rem;
}
.ks-name:focus, .ks-formula:focus {
    border-color: rgba(210, 90, 195, 0.55);
}
.ks-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: #131313;
    border: 1px solid #242424;
    border-radius: 5px;
    margin-bottom: 0.7rem;
    min-height: 1.6rem;
}
.ks-preview-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777;
}
.ks-preview-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    color: #e6b3cf;
}
.ks-preview-error {
    font-size: 0.74rem;
    color: #d98a8a;
    margin-left: auto;
    text-align: right;
}
.ks-ops {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.7rem;
}
.ks-op {
    flex: 1;
    background: #1d1d1d;
    border: 1px solid #2e2e2e;
    border-radius: 5px;
    color: #d0d0d0;
    font-size: 0.9rem;
    padding: 0.35rem 0;
    cursor: pointer;
    font-family: inherit;
}
.ks-op:hover { background: #262626; border-color: #3a3a3a; }
/* Direction picker - replaces the higher-is-better checkbox with a two-button
   segmented control. The active button gets the Pro magenta accent and a
   filled background; the inactive one stays neutral. Used by both the new
   add-modal Custom pane and the existing indicator-builder (edit flow). */
.ks-direction {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.85rem 0 0.4rem;
}
.ks-direction-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
}
.ks-direction-pick {
    display: inline-flex;
    background: #131313;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}
.ks-dir {
    appearance: none;
    background: transparent;
    border: 0;
    color: #888;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    padding: 5px 11px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 120ms ease, color 120ms ease;
}
.ks-dir:hover { color: #d8d8d8; }
.ks-dir svg { color: currentColor; }
.ks-dir--active {
    background: rgba(210, 90, 195, 0.18);
    color: #e6b3cf;
    box-shadow: inset 0 0 0 1px rgba(210, 90, 195, 0.4);
}
.ks-dir--active:hover { color: #e6b3cf; }
.ks-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.ks-cancel, .ks-save {
    border-radius: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 0.95rem;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
}
.ks-cancel {
    background: transparent;
    border-color: #2e2e2e;
    color: #c0c0c0;
}
.ks-cancel:hover { border-color: #3a3a3a; color: #ebebeb; }
.ks-save {
    background: #c8628f;
    color: #1a1014;
}
.ks-save:hover { background: #cb70d0; }
.ks-save:disabled {
    background: #3a2a32;
    color: #7a6a72;
    cursor: not-allowed;
}

/* Custom-pane Pro teaser (free signed-in users) */
.ks-teaser {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.4rem 0.2rem;
    text-align: center;
}
.ks-teaser-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ks-teaser-title {
    font-size: 1rem;
    font-weight: 600;
    color: #ebebeb;
    letter-spacing: 0.01em;
}
.ks-teaser-pro {
    font-size: 0.55rem;
    font-weight: 700;
    color: #f2cae8;
    text-shadow: 0 0 6px rgba(210, 90, 195, 0.35), 0 1px 0 rgba(20, 4, 18, 0.85);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(145deg, #3c1640 0%, #62205a 45%, #310d30 100%);
    border: 1px solid rgba(210, 90, 195, 0.45);
    border-radius: 3px;
    padding: 1px 5px;
    line-height: 1.3;
}
.ks-teaser-sub {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #aaa;
    max-width: 28rem;
}
.ks-teaser-example {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.7rem 1rem;
    background: rgba(210, 90, 195, 0.06);
    border: 1px solid rgba(210, 90, 195, 0.22);
    border-radius: 4px;
    width: 100%;
    max-width: 22rem;
}
.ks-teaser-formula {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.82rem;
    color: #e6b3cf;
    letter-spacing: 0.01em;
}
.ks-teaser-label {
    font-size: 0.72rem;
    color: #8a8a8a;
    font-style: italic;
}
.ks-teaser-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 1.1rem;
    background: rgba(210, 90, 195, 0.08);
    border: 1px solid rgba(210, 90, 195, 0.4);
    color: #f0b5e8;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 3px;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    margin-top: 0.2rem;
}
.ks-teaser-cta:hover {
    background: rgba(210, 90, 195, 0.16);
    border-color: rgba(210, 90, 195, 0.65);
    color: #f2cae8;
}
.ks-teaser-cta:focus-visible {
    outline: 2px solid rgba(210, 90, 195, 0.6);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Unified PRO badge typography — every "PRO" chip across the app uses Russo One
   to match the /pro page hero badge. Keeps the brand mark visually consistent
   whether it shows on the profile, nav, designer picker locks, or any Pro nudge.
───────────────────────────────────────────────────────────────────────────── */
.tier-badge.tier-pro .tier-pro-label,
.nav-tier-badge--pro,
.pro-picker-sort-badge,
.pro-picker-sort-badge--locked,
.psup-pro-badge,
.psup-title-pro,
.pcpu-pro-badge,
.pcpu-pro-tag,
.comparison-paths-pro-hint-badge,
.comparison-candidate-action-pro,
.ks-tab-pro,
.ks-teaser-pro,
.pro-demo-sort-badge,
.pro-demo-profile-badge,
.pcpu-pro-badge {
    font-family: 'Russo One', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

/* Canonical PRO chip letter-spacing — keeps every inline "PRO" mark in sync with
   the /pro hero badge (0.16em). Tightened to 0.14em so chips at 9–10px stay
   readable; individual rules must not override this or the brand mark drifts. */
.tier-badge.tier-pro .tier-pro-label,
.nav-tier-badge--pro,
.pro-picker-sort-badge,
.pro-picker-sort-badge--locked,
.psup-pro-badge,
.psup-title-pro,
.pcpu-pro-badge,
.comparison-paths-pro-hint-badge,
.ks-tab-pro,
.ks-teaser-pro,
.pro-demo-sort-badge,
.pro-demo-profile-badge {
    letter-spacing: 0.14em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Shared .psup-* preview component (used by the Pro sort upgrade nudge modal
   AND by the /pro Dynamic Sort feature visual). Lives here in style.css so it's
   available on every page, including /pro which doesn't load tank-designer.css.
───────────────────────────────────────────────────────────────────────────── */

/* Inline PRO chip rendered next to a dialog/modal title (mirrors .ks-teaser-pro) */
.psup-title-pro {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #f2cae8;
    text-shadow: 0 0 6px rgba(210, 90, 195, 0.35), 0 1px 0 rgba(20, 4, 18, 0.85);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(145deg, #3c1640 0%, #62205a 45%, #310d30 100%);
    border: 1px solid rgba(210, 90, 195, 0.45);
    border-radius: 3px;
    padding: 1px 5px;
    line-height: 1.3;
}

/* Mini feature preview mockup — magenta-tinted to match .ks-teaser-example */
.psup-preview {
    border: 1px solid rgba(210, 90, 195, 0.22);
    border-radius: 7px;
    overflow: hidden;
    background: rgba(210, 90, 195, 0.04);
    width: 100%;
    max-width: 22rem;
}

.psup-sort-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: #1e1e1b;
    border-bottom: 1px solid #2a2a26;
}

.psup-pro-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #f2cae8;
    text-shadow: 0 0 6px rgba(210, 90, 195, 0.35), 0 1px 0 rgba(20, 4, 18, 0.85);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(145deg, #3c1640 0%, #62205a 45%, #310d30 100%);
    border: 1px solid rgba(210, 90, 195, 0.4);
    border-radius: 3px;
    padding: 1px 4px;
}

.psup-sort-icon {
    color: #6a6a64;
    flex-shrink: 0;
}

.psup-sort-label {
    font-size: 12px;
    color: #c8a96e;
    font-weight: 500;
}

.psup-sort-dir {
    color: #8a8a84;
    font-weight: 400;
}

.psup-rows {
    display: flex;
    flex-direction: column;
}

.psup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid #222220;
    transition: background 0.1s;
}

.psup-row:last-child {
    border-bottom: none;
}

.psup-row--top {
    background: rgba(200, 169, 110, 0.04);
}

.psup-row--dim {
    opacity: 0.55;
}

.psup-module-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background-color: #2a2a26;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #363630;
    flex-shrink: 0;
}

.psup-module-name {
    font-size: 12px;
    color: #b8b8b0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.psup-row--top .psup-module-name {
    color: #d4cfc4;
}

/* Mirrors the actual .pro-picker-sort-stat-bubble shown in the live picker — magenta,
   not green. Three levels just attenuate opacity/intensity to suggest a sort gradient. */
.psup-bubble {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
    color: #f2cae8;
    text-shadow: 0 1px 0 rgba(20, 4, 12, 0.85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.psup-bubble--high {
    background: linear-gradient(145deg, #3c1640 0%, #62205a 100%);
    border: 1px solid rgba(210, 90, 195, 0.55);
}

.psup-bubble--mid {
    background: linear-gradient(145deg, #3a0d3c 0%, #5e1657 100%);
    border: 1px solid rgba(210, 90, 195, 0.4);
    color: #f0c0e8;
}

.psup-bubble--low {
    background: rgba(210, 90, 195, 0.1);
    border: 1px solid rgba(210, 90, 195, 0.28);
    color: #d8a8cc;
    text-shadow: none;
    box-shadow: none;
}


.stats-section-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 12px;
    color: #1e1e1e;
    border-bottom: 1px solid #8b7a5a;
    padding-bottom: 5px;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 3px;
    margin: 1px 0;
}
.stat-row[hidden] {
    display: none;
}

/* Highlight animation for changed stats - positive (green) */
/* Highlight animation for changed stats - positive (green) - matches comparison style */
/* Old highlight classes removed - now using change icons instead */

/* Change icon styles for stats, terrain, and production cost */
/* Using CSS-based chevron arrows (similar to the image) */
.change-icon {
    position: absolute;
    left: -12px; /* Position to the left of the label text */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    z-index: 1;
    margin-top: -1px; /* Fine-tune vertical alignment to center with text baseline */
}

/* Up chevron (pointing up) */
.change-icon.change-up {
    border-bottom: 6px solid;
    border-top: none;
    animation: changeIconUp 8s ease-out forwards;
    margin-top: 1px; /* Shift 2px lower than base -1px */
}

/* Down chevron (pointing down) */
.change-icon.change-down {
    border-top: 6px solid;
    border-bottom: none;
    animation: changeIconDown 8s ease-out forwards;
}

/* Color for positive changes (green) */
.change-icon.positive {
    border-bottom-color: #5cb87a;
    border-top-color: #5cb87a;
    filter: drop-shadow(0 0 2px rgba(92, 184, 122, 0.6));
}

/* Color for negative changes (red) */
.change-icon.negative {
    border-bottom-color: #cc6666; /* For up arrow */
    border-top-color: #cc6666; /* For down arrow */
}

/* Terrain change icons - absolutely positioned to the left of labels, don't affect layout */
.terrain-label-icon {
    position: absolute !important;
    left: -10px !important; /* Position to the left of the label */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Center vertically with label */
    margin-top: 0 !important;
    
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    display: block !important; /* Ensure icon is visible */
    pointer-events: none; /* Don't interfere with clicks */
    /* Match label font size (10px) with proportional arrow size */
}

/* Up chevron for terrain labels */
.terrain-label-icon.change-up {
    border-bottom: 4px solid;
    border-top: none;
    animation: changeIconUp 8s ease-out forwards;
}

/* Down chevron for terrain labels */
.terrain-label-icon.change-down {
    border-top: 4px solid;
    border-bottom: none;
    animation: changeIconDown 8s ease-out forwards;
}

/* Color for positive terrain label icons (green) */
.terrain-label-icon.positive {
    border-bottom-color: #5cb87a;
    border-top-color: #5cb87a;
    filter: drop-shadow(0 0 2px rgba(92, 184, 122, 0.6));
}

/* Color for negative terrain label icons (red) */
.terrain-label-icon.negative {
    border-bottom-color: #cc6666; /* For up arrow */
    border-top-color: #cc6666; /* For down arrow */
}

@keyframes changeIconUp {
    0% {
        opacity: 1;
        transform: translateY(-50%) translateY(-2px) scale(1.3);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) translateY(-2px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) translateY(-4px) scale(0.7);
    }
}

@keyframes changeIconDown {
    0% {
        opacity: 1;
        transform: translateY(-50%) translateY(2px) scale(1.3);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) translateY(2px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) translateY(4px) scale(0.7);
    }
}

.stat-row .baseline-comparison {
    order: 1;
    min-width: 65px;
    text-align: right;
}

.stat-row .stat-value {
    order: 2;
}

.stat-row .stat-unit {
    order: 3;
}

/* Adjusted-stats view (efficiency / Pro).
   When the user picks a denominator on .stats-adjusted-bar, the render loop
   tags each row as either --adjusted (was divided by the denominator) or
   --unadjusted (intensive stat that doesn't scale - left raw and dimmed).
   The unit suffix is appended via ::after so the textContent stays clean
   (highlighting/diff logic in updateStat parses the numeric value). */
.stat-row[data-adjust-unit] .stat-value::after {
    margin-left: 3px;
    color: #8b6f3f;
    font-size: 0.78em;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.02em;
}
.stat-row[data-adjust-unit="IC"]   .stat-value::after { content: ' /IC'; }
.stat-row[data-adjust-unit="MP"]   .stat-value::after { content: ' /MP'; }
.stat-row[data-adjust-unit="W"]    .stat-value::after { content: ' /W'; }
.stat-row[data-adjust-unit="sup"]  .stat-value::after { content: ' /sup'; }
.stat-row[data-adjust-unit="fuel"] .stat-value::after { content: ' /fuel'; }

/* Intensive rows when an efficiency view is active: visibly de-emphasised
   so users see at a glance "this stat wasn't affected". Tooltip on the row
   explains why. */
.stat-row--unadjusted {
    opacity: 0.45;
}
.stat-row--unadjusted .stat-value {
    color: #6a6a6a;
}

.stat-icon {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.stat-label {
    flex: 1;
    color: #3d3d3d;
    order: 0;
    position: relative; /* For absolute positioning of change icons */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    line-height: 1.4; /* Ensure consistent line height for better arrow alignment */
    display: flex;
    align-items: center; /* Vertically center content */
}

.stat-value {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.03em;
    color: #1e1e1e;
    min-width: 60px;
    text-align: right;
    position: relative;
}

/* Loading state for stat values (on beige/parchment background) */
.stat-value.loading {
    color: transparent;
    user-select: none;
}

.stat-value.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(139, 122, 90, 0.4) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: stat-loading-wave 1.5s ease-in-out infinite;
    border-radius: 2px;
}

@keyframes stat-loading-wave {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Loading state for production cost values */
#cost-min.loading,
#cost-max.loading {
    color: transparent;
    user-select: none;
    position: relative;
}

#cost-min.loading::after,
#cost-max.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(74, 74, 74, 0.3) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: stat-loading-wave 1.5s ease-in-out infinite;
    border-radius: 2px;
}

/* Loading state for terrain modifier values */
.terrain-mod-value.loading {
    color: transparent !important;
    user-select: none;
    position: relative;
}

.terrain-mod-value.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(74, 74, 74, 0.3) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: stat-loading-wave 1.5s ease-in-out infinite;
    border-radius: 2px;
}

.stat-unit {
    font-size: 11px;
    color: #4f4f4f;
}

/* Modal */
.hoi4-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.hoi4-modal.active {
    display: flex;
}

.modal-content {
    background: #1c1c1c;
    border: 2px solid #3d3d3d;
    border-radius: 5px;
    width: 600px;
    max-height: 80vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.comparison-modal-content {
    width: 95vw;
    max-width: 1400px;
    max-height: 90vh;
}

.comparison-modal-content .modal-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.comparison-filter-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #b0b0b0;
    cursor: pointer;
    user-select: none;
}

.comparison-filter-label:hover {
    color: #e0e0e0;
}

/* Toggle switch: hide native checkbox, show custom pill switch */
.comparison-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.comparison-toggle-input:focus-visible + .comparison-toggle-switch {
    outline: 2px solid #c8a96e;
    outline-offset: 2px;
}

.comparison-toggle-switch {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    padding: 2px;
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px solid #2e2e2e;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.comparison-toggle-switch::after {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #c0c0c0;
    transition: transform 0.2s ease;
}

.comparison-toggle-input:checked + .comparison-toggle-switch {
    background: #1e1e1e;
    border-color: #c8a96e;
}

.comparison-toggle-input:checked + .comparison-toggle-switch::after {
    transform: translateX(20px);
    background: #c4a86f;
}

.comparison-toggle-label {
    flex: 0 0 auto;
    color: #808090;
    transition: color 0.2s ease;
}

.comparison-toggle-input:checked ~ .comparison-toggle-label {
    color: #fff;
}

.comparison-filter-label:hover .comparison-toggle-label {
    color: #a0a0a8;
}

.comparison-filter-label:hover .comparison-toggle-input:checked ~ .comparison-toggle-label {
    color: #fff;
}

.about-modal-content {
    width: 600px;
    max-width: 90vw;
    max-height: 85vh;
}

.doctrine-modal-content {
    width: 86vw;
    max-width: 1800px; /* Increased for high-resolution displays */
    max-height: 90vh;
}

/* Technologies modal: more height for tech tree view */
#technologies-modal .doctrine-modal-content {
    max-height: 95vh;
}

/* Scale up modal on very high resolution displays */
@media (min-width: 1920px) {
    .doctrine-modal-content {
        max-width: 2000px;
    }
}

@media (min-width: 2560px) {
    .doctrine-modal-content {
        max-width: 2400px;
    }
}

.about-modal-body {
    padding: 24px 28px;
    overflow-y: auto;
    color: #e0e0e0;
    line-height: 1.5;
    font-size: 13px;
    background: #1c1c1c;
}

/* About splash / landing layout */
.about-welcome {
    text-align: center;
    margin-bottom: 28px;
}

.about-welcome .about-logo {
    max-width: 280px;
    width: 100%;
    height: auto;
    margin-bottom: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.about-tagline {
    font-size: 15px;
    color: #b0b0b0;
    margin: 0;
    font-style: italic;
}

.about-disclaimer {
    font-size: 11px;
    color: #777;
    margin: 10px 0 0;
    font-style: italic;
}

.about-capabilities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin-bottom: 20px;
}

.about-capability {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid #222222;
    border-bottom: 1px solid #222222;
    border-radius: 4px;
}

.about-capability-title {
    font-size: 13px;
    font-weight: 600;
    color: #c4a86f;
}

.about-capability-desc {
    font-size: 12px;
    color: #b8b8b8;
    line-height: 1.4;
}

.about-stats-note {
    font-size: 12px;
    color: #888;
    text-align: center;
    margin: 0 0 20px;
    font-style: italic;
}

.about-feedback {
    text-align: center;
}

.about-feedback .feedback-link {
    display: inline-block;
    width: auto;
    padding: 8px 20px;
}

.about-section {
    margin-bottom: 20px;
}

.about-section:last-child {
    margin-bottom: 0;
}

.about-section h4 {
    font-size: 14px;
    color: #c4a86f;
    margin-bottom: 12px;
    border-bottom: 1px solid #3d3d3d;
    padding-bottom: 5px;
    font-weight: bold;
}

.about-section p {
    margin-bottom: 8px;
    color: #d0d0d0;
    font-size: 13px;
}

.about-section ul {
    margin-left: 18px;
    margin-bottom: 12px;
    color: #d0d0d0;
    font-size: 13px;
}

.about-section li {
    margin-bottom: 6px;
}

.feature-group {
    margin-bottom: 15px;
    padding: 12px 15px;
    background: #1e1e1e;
    border: 1px solid #222222;
    border-left: 3px solid #c8a96e;
    border-radius: 3px;
}

.feature-group:last-child {
    margin-bottom: 0;
}

.feature-group h5 {
    font-size: 13px;
    color: #c4a86f;
    margin-bottom: 8px;
    font-weight: 600;
}

.feature-group p {
    margin-bottom: 8px;
    color: #d0d0d0;
    font-size: 13px;
}

.feature-group ul {
    margin-top: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}

.feature-group li {
    margin-bottom: 5px;
}

.about-section strong {
    color: #e0e0e0;
    font-weight: 600;
}

.about-links {
    list-style: none;
    margin-left: 0;
}

.about-links li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.about-links li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #c8a96e;
}

.about-links a {
    color: #c8a96e;
    text-decoration: none;
    transition: color 0.2s;
}

.about-links a:hover {
    color: #9abfff;
    text-decoration: underline;
}

.feedback-button-container {
    margin-top: 12px;
    width: 100%;
}

.feedback-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 5px 12px;
    background: #a07038;
    border: 1px solid #c8a96e;
    border-radius: 3px;
    color: #e0e0e0;
    text-decoration: none;
    font-weight: normal;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.feedback-link:hover {
    background: #c8a96e;
    border-color: #6aaa6a;
    color: #e0e0e0;
    text-decoration: none;
}

.modal-body.comparison-modal-body {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.comparison-loading {
    padding: 40px;
    text-align: center;
    color: #a0a0a0;
    font-size: 14px;
}

.comparison-table-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.comparison-bench {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.comparison-bench-layout {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.comparison-picker-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 360px;
    max-width: 92%;
    height: 100%;
    background: #1c1c1c;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 20;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow: hidden;
}

.comparison-picker-panel.is-open {
    transform: translateX(0);
}

.comparison-picker-panel-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 0;
}

.comparison-picker-panel-close {
    background: none;
    border: none;
    color: #a0a0a0;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.comparison-picker-panel-close:hover {
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.08);
}

.comparison-picker-panel .comparison-picker-search {
    flex-shrink: 0;
    margin: 0 12px;
    width: auto;
}

.comparison-picker-panel .comparison-candidate-list {
    flex: 1;
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 0 12px 12px;
}

.comparison-picker-heading,
.comparison-workspace-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.comparison-picker-heading span,
.comparison-workspace-intro h4 {
    color: #e0e0e0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.comparison-picker-heading strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(200, 169, 110, 0.16);
    color: #d8bd83;
    font-size: 12px;
}

.comparison-picker-copy,
.comparison-workspace-intro p {
    color: #8b8b8b;
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}

.comparison-picker-search {
    width: 100%;
    background: #121212;
    border: 1px solid #333;
    border-radius: 6px;
    color: #e0e0e0;
    font: inherit;
    font-size: 12px;
    padding: 9px 10px;
}

.comparison-picker-search:focus,
.comparison-card-path-select:focus {
    outline: none;
    border-color: rgba(200, 169, 110, 0.7);
    box-shadow: 0 0 0 2px rgba(200, 169, 110, 0.12);
}

.comparison-candidate-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 7px;
    overflow: auto;
    padding-right: 2px;
}

.comparison-candidate-card {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: #171717;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    color: #d7d7d7;
    cursor: pointer;
    padding: 8px;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.comparison-candidate-card:hover:not(:disabled) {
    background: #1f1f1f;
    border-color: rgba(200, 169, 110, 0.38);
    transform: translateY(-1px);
}

.comparison-candidate-card:disabled {
    cursor: default;
}

.comparison-candidate-card.is-selected {
    border-color: rgba(126, 158, 102, 0.55);
    background: rgba(34, 54, 31, 0.32);
}

.comparison-candidate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    object-fit: contain;
    color: #b8b8b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.comparison-candidate-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comparison-candidate-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.comparison-candidate-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 650;
}

.comparison-candidate-card.is-invalid {
    border-color: rgba(159, 142, 85, 0.45);
    background: rgba(40, 35, 18, 0.35);
}

.comparison-candidate-card.is-invalid:hover:not(:disabled) {
    border-color: rgba(200, 175, 95, 0.7);
    background: rgba(46, 40, 22, 0.5);
}

.comparison-candidate-card.is-invalid .comparison-candidate-title {
    color: #b9b09a;
}

.comparison-candidate-card.is-invalid .comparison-candidate-action {
    color: rgb(159, 142, 85);
}

.comparison-candidate-warning {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: rgb(159, 142, 85);
    line-height: 1;
    cursor: default;
}

/* Wrapper that pairs the (optional) warning icon with the action label so
   they share the card's right column and stay vertically centered together. */
.comparison-candidate-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Greyed-out action label on disabled candidate cards. Used for:
   - Free user's current card (action is "+ Duplicate", Pro-gated via section header)
   - Free user's already-added non-current cards (action is "Added" status)
   - Replace mode cards that aren't valid swap targets */
.comparison-candidate-card:disabled .comparison-candidate-action {
    color: #6a6a6a;
}

/* Mint accent on the source label of the current build card so users can spot
   it at a glance in the unified list (replaces the standalone mint badge that
   used to sit in the title row). */
.comparison-candidate-card.is-current .comparison-candidate-source {
    color: #a0d0b2;
}

/* Disabled current card – not yet selected (e.g. Pro-gated duplicate):
   dial the highlight way down so it reads as locked, not active. */
.comparison-candidate-card:disabled.is-current:not(.is-selected) {
    background: #1a1a1a;
    border-color: #2e2e2e;
    cursor: not-allowed;
}

.comparison-candidate-card:disabled.is-current:not(.is-selected) .comparison-candidate-source {
    color: #6e8a78;
}

.comparison-candidate-card:disabled.is-current:not(.is-selected) .comparison-candidate-title {
    color: #888;
}

.comparison-candidate-card:disabled.is-current:not(.is-selected) .comparison-candidate-icon {
    opacity: 0.55;
    filter: grayscale(0.4);
}

.comparison-candidate-card:disabled.is-current:not(.is-selected) .comparison-candidate-action {
    color: #555;
}

/* Disabled current card – already selected/added: keep the green highlight
   so it reads as "Added", just remove hover behaviour and the click cursor. */
.comparison-candidate-card:disabled.is-current.is-selected {
    cursor: default;
}

/* Locked (over-limit) candidate card styling. */
.comparison-candidate-card.is-locked {
    opacity: 0.65;
    cursor: not-allowed;
}

.comparison-candidate-card.is-locked:hover {
    background: #171717;
    border-color: #2a2a2a;
    transform: none;
}

.comparison-candidate-card.is-locked .comparison-candidate-icon {
    opacity: 0.6;
    filter: grayscale(0.4);
}

.comparison-candidate-card.is-locked .comparison-candidate-action,
.comparison-candidate-card:disabled .comparison-candidate-action {
    color: #6a6a6a !important;
}

.comparison-candidate-locked-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(212, 144, 10, 0.16);
    border: 1px solid rgba(212, 144, 10, 0.5);
    color: #f3c97a;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.comparison-candidate-warning-icon {
    pointer-events: none;
}

.comparison-candidate-source,
.comparison-selected-card-source,
.comparison-focused-template-header small {
    color: #777;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.comparison-candidate-action {
    color: #c8a96e;
    font-size: 11px;
    font-weight: 700;
}

.comparison-candidate-card.is-selected .comparison-candidate-action {
    color: #8bb47a;
}

.comparison-workspace {
    min-width: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.comparison-workspace-intro {
    background: transparent;
    border: none;
    padding: 10px 8px 0;
    flex-shrink: 0;
}

.comparison-workspace-intro-copy {
    flex: 1;
    min-width: 0;
}

.comparison-workspace-intro h4 {
    margin: 0 0 3px;
}

.comparison-pro-pill {
    flex-shrink: 0;
    border: 1px solid rgba(200, 169, 110, 0.38);
    border-radius: 999px;
    color: #d6b875;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 6px 9px;
    text-transform: uppercase;
}

.comparison-pro-pill.is-locked {
    border-color: rgba(120, 120, 120, 0.3);
    color: #858585;
}

.comparison-selected-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
}

.comparison-selected-card {
    background: #191919;
    border: 1px solid #303030;
    border-radius: 7px;
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.comparison-selected-card.is-current {
    border-color: rgba(200, 169, 110, 0.38);
    box-shadow: inset 3px 0 0 rgba(200, 169, 110, 0.75);
}

.comparison-selected-card.is-baseline {
    border-color: rgba(200, 169, 110, 0.8);
    box-shadow: 0 0 0 1px rgba(200, 169, 110, 0.2), 0 8px 24px rgba(0, 0, 0, 0.22);
}

.comparison-selected-card-top {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.comparison-selected-card-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.comparison-selected-card-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comparison-selected-card-title {
    color: #e6e6e6;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comparison-selected-card-remove {
    width: 24px;
    height: 24px;
    border: 1px solid #3b3b3b;
    border-radius: 999px;
    background: #111;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.comparison-selected-card-remove:hover {
    color: #f0b0a8;
    border-color: rgba(224, 112, 112, 0.55);
}

.comparison-baseline-btn {
    width: 100%;
    background: #111;
    border: 1px solid #333;
    border-radius: 5px;
    color: #9d9d9d;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 8px;
    text-transform: uppercase;
}

.comparison-baseline-btn:not(:disabled):hover {
    border-color: rgba(200, 169, 110, 0.55);
    color: #d8bd83;
}

.comparison-baseline-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.comparison-selected-card-paths {
    display: grid;
    gap: 6px;
}

.comparison-card-path-select {
    width: 100%;
    background: #111;
    border: 1px solid #333;
    border-radius: 5px;
    color: #d7d7d7;
    font: inherit;
    font-size: 11px;
    padding: 7px 8px;
}

.comparison-shared-context-pill {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #303030;
    border-radius: 5px;
    color: #8d8d8d;
    font-size: 11px;
    padding: 7px 8px;
}

.comparison-focused-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid #2e2e2e;
    border-radius: 3px;
    background: #161616;
}

.comparison-bench-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.comparison-add-template-btn {
    min-width: 132px;
}

.comparison-selection-count {
    color: #777;
    font-size: 12px;
}

.comparison-setup-empty {
    display: flex;
    min-height: 190px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    border: 1px dashed rgba(200, 169, 110, 0.24);
    border-radius: 9px;
    background: rgba(20, 20, 20, 0.55);
    color: #aaa;
    text-align: center;
    padding: 28px;
}

.comparison-setup-empty-mark {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(200, 169, 110, 0.35);
    border-radius: 999px;
    color: #c8a96e;
    font-size: 22px;
    line-height: 1;
}

.comparison-setup-empty strong {
    color: #ddd;
    font-size: 14px;
}

.comparison-setup-empty p {
    max-width: 420px;
    color: #777;
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}

.comparison-table.comparison-focused-table {
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

/* Every header cell sticks to the top of the scroll container during vertical
   scroll. Applying sticky to each <th> directly (rather than the <tr>) is the
   reliable cross-browser pattern - sticky on <tr> drops the inner <th>'s
   sticky-left in Safari and older Chrome. */
.comparison-focused-table thead th {
    position: sticky;
    top: 0;
    z-index: 12;
}

/* Corner cell - sticky on BOTH axes so it stays put while the row scrolls
   horizontally and the column scrolls vertically. Higher z-index than the
   row's other headers so they slide underneath. Selector specificity matches
   the .comparison-focused-table thead th rule above so this z-index wins. */
.comparison-focused-table thead th.comparison-focused-stat-header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 15;
    min-width: 170px;
    max-width: 170px;
    text-align: left !important;
    background: #202020 !important;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.45);
}

/* Body row labels - sticky-left only; the thead handles the top-stick. */
.comparison-focused-stat-label {
    position: sticky;
    left: 0;
    z-index: 13;
    min-width: 170px;
    max-width: 170px;
    text-align: left !important;
    background: #202020 !important;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.45);
}

.comparison-focused-template-header {
    min-width: 190px;
    max-width: 220px;
    vertical-align: top;
    background: #202020 !important;
    padding: 14px 14px 12px !important;
    position: relative;
}

.comparison-focused-template-header.is-current {
    background: #1f2a23 !important;
    box-shadow: inset 0 2px 0 #4e7e5f;
    vertical-align: middle;
}


.comparison-focused-template-header.is-baseline {
    box-shadow: inset 0 -2px 0 #5e5e5e;
}

.comparison-focused-add-header {
    min-width: 120px;
    max-width: 140px;
    vertical-align: middle;
    background: #181818 !important;
    color: #a0a0a0;
    cursor: pointer;
    padding: 12px 10px;
    text-align: center !important;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.comparison-focused-add-header:hover,
.comparison-focused-add-header:focus-visible {
    background: #1f211d !important;
    color: #c8c8c8;
    outline: none;
}

.comparison-focused-add-header.is-active {
    background: #1f2a23 !important;
    color: #a0d0b2;
}

.comparison-focused-add-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 auto 4px;
    border: 1px dashed #5e5e5e;
    border-radius: 999px;
    font-size: 18px;
    line-height: 1;
    transition: border-color 0.15s ease;
}

.comparison-focused-add-header:hover .comparison-focused-add-mark,
.comparison-focused-add-header:focus-visible .comparison-focused-add-mark {
    border-color: #707070;
}

.comparison-focused-add-header.is-active .comparison-focused-add-mark {
    border-style: solid;
    border-color: #4e7e5f;
}

.comparison-focused-add-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.comparison-table td.comparison-focused-add-cell {
    min-width: 120px;
    max-width: 140px;
    background: #141414;
}

.comparison-focused-template-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.comparison-focused-template-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #2e2e2e;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.25);
    padding: 0;
    font: inherit;
    color: inherit;
}

.comparison-focused-template-icon.is-swap-trigger {
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.comparison-focused-template-icon.is-swap-trigger:hover,
.comparison-focused-template-icon.is-swap-trigger:focus-visible {
    border-color: #707070;
    background: rgba(255, 255, 255, 0.04);
    outline: none;
}

.comparison-focused-template-header.is-current .comparison-focused-template-icon {
    border-color: rgba(78, 126, 95, 0.55);
    background: rgba(78, 126, 95, 0.10);
}

.comparison-focused-template-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.comparison-focused-template-icon-fallback {
    color: #c8c8c8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.comparison-focused-template-name {
    display: block;
    max-width: 100%;
    color: #e6e6e6;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none;
}

.comparison-focused-template-header.is-current .comparison-focused-template-name {
    color: #e6e6e6;
}

.comparison-focused-template-source {
    display: inline-block;
    color: #8b8b8b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.comparison-focused-template-header.is-current .comparison-focused-template-source {
    color: #a0d0b2;
}

/* Pro per-column path attach chips - sit between the source label and the
   "Click to change" hint. Two small pill buttons (Research / Doctrine) that
   open an anchored popover with the user's saved paths. Free users see the
   chips as muted PRO-gated buttons that nudge to the upgrade page. */
.comparison-focused-paths {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-top: 8px;
    align-self: stretch;
}

/* Pro paths upsell — compact button on the intro row (desktop), after first column added. */
.comparison-paths-pro-hint {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    flex-shrink: 0;
    gap: 5px;
    width: auto;
    max-width: 100%;
    background: rgba(210, 90, 195, 0.06);
    border: 1px solid rgba(210, 90, 195, 0.32);
    border-radius: 3px;
    color: #d0d0d0;
    font: inherit;
    font-size: 10px;
    line-height: 1.2;
    padding: 5px 8px;
    margin-top: 1px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.comparison-paths-pro-hint:hover,
.comparison-paths-pro-hint:focus-visible {
    background: rgba(210, 90, 195, 0.12);
    border-color: rgba(210, 90, 195, 0.55);
    color: #f0f0f0;
    outline: none;
}

.comparison-paths-pro-hint-badge {
    flex-shrink: 0;
    background: rgba(210, 90, 195, 0.16);
    border: 1px solid rgba(210, 90, 195, 0.5);
    border-radius: 2px;
    color: #e6b3cf;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 1px 4px;
}

.comparison-paths-pro-hint-label {
    font-weight: 600;
    line-height: 1.3;
}

/* Compare-paths upgrade modal — window chrome inherits from the unified
   .hoi4-dialog base (see tank-designer.css). Only body layout + preview-specific
   styles remain here. */
.pro-compare-paths-upgrade-modal-overlay {
    z-index: 1100;
}

/* Body layout — centered teaser column (mirrors .ks-teaser, padding matches .ks-pane) */
.hoi4-dialog-body.pro-compare-paths-upgrade-dialog-body {
    padding: 0.9rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    text-align: center;
}

.pro-compare-paths-upgrade-dialog-body .hoi4-dialog-actions {
    margin-top: 0.2rem;
}

.pcpu-preview {
    position: relative;
    border: 1px solid #2e2e2a;
    border-radius: 7px;
    overflow: hidden;
    background: #161614;
    padding: 12px;
    width: 100%;
    max-width: 22rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pcpu-col-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pcpu-col-icon {
    width: 36px;
    height: 36px;
    border: 1px solid #2e2e2a;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.pcpu-col-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pcpu-col-name {
    color: #e6dcc8;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pcpu-col-source {
    color: #8b8b8b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pcpu-chips {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pcpu-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(200, 169, 110, 0.08);
    border: 1px solid rgba(200, 169, 110, 0.45);
    border-radius: 3px;
    color: #e6c987;
    font-size: 10px;
    padding: 5px 7px;
}

.pcpu-chip-label {
    flex-shrink: 0;
    color: #b5996c;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pcpu-chip-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
}

.pcpu-chip-caret {
    flex-shrink: 0;
    color: #b5996c;
    font-size: 9px;
}

.pcpu-pro-tag {
    position: absolute;
    top: 10px;
    right: 10px;
}

.pcpu-pro-badge {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(145deg, #3c1640 0%, #62205a 45%, #310d30 100%);
    border: 1px solid rgba(210, 90, 195, 0.5);
    border-radius: 2px;
    color: #f2cae8;
    text-shadow: 0 0 6px rgba(210, 90, 195, 0.35), 0 1px 0 rgba(20, 4, 18, 0.85);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    padding: 1px 5px;
}

.comparison-focused-path-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    color: #c8c8c8;
    font: inherit;
    font-size: 10px;
    padding: 4px 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.comparison-focused-path-chip:hover {
    background: #1c1c1c;
    border-color: #3a3a3a;
    color: #e6e6e6;
}

.comparison-focused-path-chip.has-override {
    background: rgba(200, 169, 110, 0.08);
    border-color: rgba(200, 169, 110, 0.45);
    color: #e6c987;
}

.comparison-focused-path-chip.has-override:hover {
    background: rgba(200, 169, 110, 0.14);
    border-color: rgba(200, 169, 110, 0.65);
}

/* Tanks chip is free-tier — use the muted-green "attached" treatment instead
   of gold so it doesn't read as a Pro-locked override. */
.comparison-focused-path-chip.is-tanks.has-override {
    background: rgba(78, 126, 95, 0.12);
    border-color: rgba(78, 126, 95, 0.55);
    color: #a0d0b2;
}

.comparison-focused-path-chip.is-tanks.has-override:hover {
    background: rgba(78, 126, 95, 0.18);
    border-color: rgba(78, 126, 95, 0.75);
}

.comparison-focused-path-chip.is-tanks.has-override .comparison-focused-path-chip-label {
    color: #8aa898;
}

.comparison-focused-path-chip.is-pro-gated {
    color: #707070;
    cursor: pointer;
}

.comparison-focused-path-chip.is-pro-gated:hover {
    color: #8a8a8a;
}

.comparison-focused-path-chip-label {
    flex-shrink: 0;
    color: #707070;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comparison-focused-path-chip.has-override .comparison-focused-path-chip-label {
    color: #b5996c;
}

.comparison-focused-path-chip-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    text-align: right;
}

.comparison-focused-path-chip-caret {
    flex-shrink: 0;
    color: #707070;
    font-size: 9px;
}

.comparison-focused-path-chip-pro {
    flex-shrink: 0;
    background: rgba(200, 169, 110, 0.16);
    border: 1px solid rgba(200, 169, 110, 0.45);
    border-radius: 2px;
    color: #c8a96e;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 1px 4px;
}

.comparison-focused-picker-popover {
    position: absolute;
    top: calc(100% + 4px);
    z-index: 40;
    background: #1c1c1c;
    border: 1px solid #2e2e2e;
    border-radius: 3px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    padding: 8px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

/* Template picker - right-side slide-in panel with a dim backdrop so the
   workspace behind it visually recedes. Replaces the old in-column popover
   which was hard to separate from the data cells. */
.comparison-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(1px);
    z-index: 25;
    cursor: pointer;
    animation: comparison-picker-backdrop-in 0.18s ease;
}

@keyframes comparison-picker-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.comparison-picker-side-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 92%;
    height: 100%;
    background: #1c1c1c;
    border-left: 1px solid #2e2e2e;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    z-index: 26;
    overflow: hidden;
    animation: comparison-picker-panel-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes comparison-picker-panel-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.comparison-picker-side-panel-header {
    position: relative;
    padding: 18px 44px 14px 18px;
    border-bottom: 1px solid #2a2a2a;
    background: #1f1f1f;
}

.comparison-picker-side-panel-eyebrow {
    display: block;
    color: #c8a96e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.comparison-picker-side-panel-title {
    margin: 0 0 6px;
    color: #f0e7d0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comparison-picker-side-panel-subtitle {
    margin: 0;
    color: #8b8b8b;
    font-size: 12px;
    line-height: 1.45;
}

.comparison-picker-side-panel-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #9a9a9a;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.comparison-picker-side-panel-close:hover {
    background: #242424;
    border-color: #3a3a3a;
    color: #e6e6e6;
}

.comparison-picker-side-panel-search {
    margin: 12px 14px 0;
    background: #121212;
    border: 1px solid #2e2e2e;
    border-radius: 3px;
    color: #e0e0e0;
    font: inherit;
    font-size: 12px;
    padding: 8px 10px;
    flex-shrink: 0;
}

.comparison-picker-side-panel-search:focus {
    outline: none;
    border-color: rgba(200, 169, 110, 0.6);
    box-shadow: 0 0 0 2px rgba(200, 169, 110, 0.12);
}

.comparison-picker-side-panel-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px 14px;
}

/* Magenta PRO pill placed beside the disabled "+ Duplicate" action label
   on the current card for free users. Communicates the gating inline without
   re-introducing a section divider. Matches the magenta Pro brand tokens used
   by .comparison-paths-pro-hint-badge and .pcpu-pro-badge. */
.comparison-candidate-action-pro {
    flex-shrink: 0;
    background: rgba(210, 90, 195, 0.18);
    border: 1px solid rgba(210, 90, 195, 0.55);
    border-radius: 3px;
    color: #e6b3cf;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 2px 6px;
    line-height: 1.2;
    text-shadow: 0 0 6px rgba(210, 90, 195, 0.35);
}

.comparison-focused-picker-popover.is-path {
    left: 6px;
    right: 6px;
    max-height: 280px;
}

.comparison-focused-picker-popover.is-tanks {
    left: 6px;
    right: 6px;
    max-height: 360px;
    min-width: 240px;
}

.comparison-tanks-popover-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comparison-tanks-popover-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comparison-tanks-popover-section + .comparison-tanks-popover-section {
    border-top: 1px solid #303030;
    margin-top: 10px;
    padding-top: 12px;
}

.comparison-tanks-popover-section-header {
    color: #d4b070;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 4px 6px;
}

.comparison-tanks-popover-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.comparison-tanks-popover-card.is-invalid {
    color: #b9b09a;
    cursor: pointer;
}

.comparison-tanks-popover-card.is-invalid:hover {
    color: #e0d2a8;
}

.comparison-tanks-popover-card.is-outdated:not(.is-active) {
    color: #b8a37a;
}

.comparison-tanks-popover-card-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comparison-tanks-popover-card-badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.comparison-tanks-popover-card-outdated {
    font-size: 9px;
    font-weight: 700;
    color: #7a5a20;
    background: #2a1e00;
    border: 1px solid #3a2a00;
    border-radius: 2px;
    padding: 1px 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comparison-tanks-popover-card-warning {
    color: #d4a04f;
    font-size: 12px;
    line-height: 1;
    padding-left:5px;
}

.comparison-focused-picker-popover.is-template {
    max-height: 420px;
}

/* Add column is narrow — let the picker extend left with a comfortable minimum width. */
.comparison-focused-picker-popover.is-template-add {
    right: 0;
    width: min(320px, 92vw);
}

/* Replace picker is anchored to a template column — match that column's width. */
.comparison-focused-picker-popover.is-template-replace {
    left: 6px;
    right: 6px;
}

.comparison-focused-picker-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}

.comparison-focused-picker-popover-header span {
    color: #e6dcc8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comparison-focused-picker-popover-header strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(200, 169, 110, 0.16);
    color: #d8bd83;
    font-size: 11px;
    flex-shrink: 0;
}

.comparison-focused-picker-popover-close {
    background: none;
    border: none;
    color: #a0a0a0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.comparison-focused-picker-popover-close:hover {
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.08);
}

.comparison-focused-picker-popover-search {
    width: 100%;
    background: #121212;
    border: 1px solid #333;
    border-radius: 4px;
    color: #e0e0e0;
    font: inherit;
    font-size: 11px;
    padding: 7px 8px;
    flex-shrink: 0;
}

.comparison-focused-picker-popover-search:focus {
    outline: none;
    border-color: rgba(200, 169, 110, 0.7);
    box-shadow: 0 0 0 2px rgba(200, 169, 110, 0.12);
}

.comparison-focused-picker-popover-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    min-height: 0;
}

.comparison-focused-picker-popover-option {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: #d7d7d7;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    padding: 6px 8px;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}

.comparison-focused-picker-popover-option:hover {
    background: #242424;
    color: #f0f0f0;
}

.comparison-focused-picker-popover-option.is-active {
    background: rgba(200, 169, 110, 0.14);
    color: #e6c987;
}

.comparison-focused-picker-popover-option.is-clear {
    color: #9a9a9a;
    border-bottom: 1px solid #2a2a2a;
    margin-bottom: 2px;
    padding-bottom: 8px;
}

.comparison-focused-picker-popover-option.is-clear:hover {
    color: #d0d0d0;
}

.comparison-focused-picker-popover-empty {
    color: #707070;
    font-size: 11px;
    padding: 6px 8px;
    text-align: center;
}

.comparison-focused-picker-template-list {
    gap: 6px;
}

.comparison-focused-picker-template-list .comparison-candidate-card {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 7px;
}

.comparison-focused-picker-template-list .comparison-candidate-icon {
    width: 26px;
    height: 26px;
}

.comparison-focused-picker-template-list .comparison-candidate-title {
    font-size: 12px;
}

.comparison-focused-picker-template-list .comparison-candidate-source,
.comparison-focused-picker-template-list .comparison-candidate-action {
    font-size: 10px;
}

.comparison-column-hint {
    display: block;
    margin-top: 5px;
    color: #8f7d5f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comparison-column-remove {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 8px;
    right: 8px;
    border: 1px solid #383838;
    border-radius: 5px;
    background: #121212;
    color: #8f8f8f;
    cursor: pointer;
    line-height: 1;
}

.comparison-column-remove:hover {
    border-color: rgba(224, 112, 112, 0.55);
    color: #e0a09a;
}

.comparison-focused-table .comparison-focused-group-row td {
    background: #262626 !important;
    color: #d6d6d6;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 12px 0;
    text-align: left;
    text-transform: uppercase;
    border-top: 1px solid #3a3a3a;
    border-bottom: 2px solid #3a3a3a;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

.comparison-focused-table .comparison-focused-group-row .comparison-focused-group-label {
    position: sticky;
    left: 0;
    display: inline-block;
    padding: 0 3px;
    background: #262626;
    z-index: 1;
}

.comparison-focused-stat-label {
    color: #d0d0d0 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

.comparison-table td.comparison-value-cell {
    background: #181818;
    color: #d7d7d7;
    font-weight: 600;
}

.comparison-table td.current-template-cell.comparison-value-cell {
    background: #1c211d !important;
    color: #e6e6e6 !important;
}

/* Heatmap palette scoped to the focused comparison table.
   All calculable cells (including the current column) are colored
   relative to the average of every column for that row.
   Teal-green (matching the save button family) = better than the group,
   warm brick-red (matching the delete button family) = worse,
   intensity follows magnitude. */
.comparison-focused-table td.comparison-value-cell.heatmap-cell {
    transition: background 0.18s ease, color 0.18s ease;
}

.comparison-focused-table td.comparison-value-cell.heatmap-cell.heatmap-neutral {
    background: #181818 !important;
    color: #a8a8a8 !important;
}

.comparison-focused-table td.comparison-value-cell.heatmap-cell.heatmap-good-light {
    background: rgba(84, 132, 117, 0.12) !important;
    color: #9fc8b8 !important;
}

.comparison-focused-table td.comparison-value-cell.heatmap-cell.heatmap-good {
    background: rgba(84, 132, 117, 0.26) !important;
    color: #b8dccc !important;
    font-weight: 700;
}

.comparison-focused-table td.comparison-value-cell.heatmap-cell.heatmap-excellent {
    background: rgba(84, 132, 117, 0.42) !important;
    color: #d4ead9 !important;
    font-weight: 700;
}

.comparison-focused-table td.comparison-value-cell.heatmap-cell.heatmap-poor {
    background: rgba(180, 78, 95, 0.12) !important;
    color: #c89a9c !important;
}

.comparison-focused-table td.comparison-value-cell.heatmap-cell.heatmap-bad {
    background: rgba(180, 78, 95, 0.26) !important;
    color: #dca8a8 !important;
    font-weight: 700;
}

.comparison-focused-table td.comparison-value-cell.heatmap-cell.heatmap-bad-dark {
    background: rgba(180, 78, 95, 0.42) !important;
    color: #ecb4b2 !important;
    font-weight: 700;
}


.comparison-empty-state {
    color: #888;
    padding: 28px;
    text-align: center;
}

@media (max-width: 900px) {
    .comparison-bench {
        grid-template-columns: 1fr;
    }

    .comparison-picker-panel {
        width: 100%;
        max-width: 100%;
    }

    .comparison-workspace-intro {
        align-items: stretch;
        flex-direction: column;
    }

    .comparison-paths-pro-hint {
        align-self: stretch;
    }

    .comparison-selected-cards {
        grid-template-columns: 1fr;
    }

    .comparison-focused-stat-header,
    .comparison-focused-stat-label {
        min-width: 135px !important;
        max-width: 135px !important;
        font-size: 10px !important;
        padding-left: 6px !important;
        padding-right: 4px !important;
    }

    .comparison-focused-template-header {
        /* min-width: 55px !important;
        max-width: 55px !important; */
        padding: 6px 4px 6px !important;
    }

    .comparison-focused-template-icon {
        width: 28px;
        height: 28px;
    }

    .comparison-focused-template-icon img {
        width: 20px;
        height: 20px;
    }

    .comparison-focused-template-name {
        font-size: 10px;
    }

    .comparison-focused-table {
        font-size: 10px;
        min-width: 0 !important;
        width: auto !important;
    }

    .comparison-table td.comparison-value-cell,
    .comparison-focused-table td {
        padding: 4px 6px !important;
    }
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: #1e1e1e;
}

/* Transposed table styles */
.comparison-table.transposed {
    width: auto;
    min-width: 100%;
}

/* Sticky header rows - grouped together for vertical scrolling */
.comparison-table thead tr {
    position: sticky;
    background: #1e1e1e;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.comparison-table thead tr:first-child {
    top: 0;
    z-index: 14; /* Group header row - above stat headers but below template name */
    isolation: isolate; /* Create stacking context to prevent interference with child sticky elements */
}

.comparison-table thead tr:nth-child(2) {
    top: 32px; /* Position below first header row (group headers) */
    z-index: 13; /* Below first row (14) but above content */
}

.comparison-table thead tr::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #3d3d3d;
    z-index: 1;
}

.comparison-table th {
    background: #1e1e1e;
    color: #e0e0e0;
    padding: 8px 10px;
    text-align: center;
    font-weight: 600;
    border: 1px solid #3d3d3d;
    white-space: nowrap;
    position: relative;
}

.comparison-table thead th {
    background: #1e1e1e !important;
}

.comparison-table th.template-name-header {
    position: sticky;
    left: 0;
    z-index: 15;
    background: #1e1e1e !important;
    min-width: 180px;
    max-width: 180px;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-weight: 600;
    color: #e0e0e0;
    vertical-align: middle;
    isolation: isolate; /* Create new stacking context */
}

.comparison-table td {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: 6px;
    border: 1px solid #222222;
    text-align: right;
    color: #e0e0e0;
}

.comparison-table td.template-name {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: normal;
    position: sticky;
    left: 0;
    z-index: 5;
    background: #1a1a1a;
    text-align: left;
    min-width: 180px;
    max-width: 180px;
    color: #e0e0e0;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    word-wrap: break-word;
}

.comparison-table tr.current-template td.template-name {
    background: #1a1a1a;
    border-left: 3px solid #c8a96e;
    z-index: 14; /* Higher than stat headers (9) and regular template-name (5), but below template-name-header (15) */
}

.comparison-table .template-name-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* Allow flex items to shrink */
    overflow: hidden;
    width: 100%; /* Ensure container takes full cell width */
}

.comparison-table .template-name-icon .template-icon-emoji {
    flex-shrink: 0;
}

.comparison-table .template-name-icon .template-name-text {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.comparison-table .template-name-icon .current-badge,
.comparison-table .template-name-icon .baseline-badge,
.comparison-table .template-name-icon .preset-source-badge {
    flex-shrink: 0; /* Don't shrink badges - they must always be visible */
    flex-grow: 0; /* Don't grow badges */
    white-space: nowrap;
}

.comparison-table .template-name-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.comparison-table tr.current-template {
    background: #1a1a1a;
    position: sticky;
    top: 64px; /* Position below both header rows (32px first row + 32px second row) */
    z-index: 10; /* Above regular rows but below headers */
}

.comparison-table tr.current-template td.template-name {
    background: #1a1a1a;
    border-left: 3px solid #c8a96e;
    z-index: 14; /* Higher than stat headers (9) and regular template-name (5), but below template-name-header (15) */
}

.comparison-table tr.separator {
    height: 3px;
    background: #3d3d3d;
}

.comparison-table tr.separator td {
    padding: 0;
    border: none;
}

.comparison-table tr:hover {
    background: #222222;
}

.comparison-table tr.current-template:hover {
    background: #222222;
}

/* Invalid template: cannot be compared accurately with current research/doctrine */
.comparison-table td.template-name.comparison-name-invalid {
    border-left: 3px solid rgb(159, 142, 85);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.comparison-table .comparison-grid-invalid-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 14px;
    margin-left: 4px;
    color: rgb(159, 142, 85);
    line-height: 1;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.comparison-table .comparison-grid-invalid-warning .comparison-grid-invalid-warning-icon {
    width: 14px;
    height: 14px;
    min-width: 14px;
    flex-shrink: 0;
    display: block;
    color: rgb(159, 142, 85);
}

/* Preset templates: slightly muted shade to distinguish from user-saved */
.comparison-table tr.preset-template-row {
    background: #2a2a2e;
}

.comparison-table tr.preset-template-row td.template-name {
    background: #2a2a2e;
    color: #a0a0a8;
}

.comparison-table tr.preset-template-row:hover {
    background: #323238;
}

.comparison-table tr.preset-template-row:hover td.template-name {
    background: #323238;
}

/* Heatmap cell colors */
.comparison-table td.heatmap-cell {
    font-weight: 500;
}

/* Green shades - better than baseline (3 shades) */
.comparison-table td.heatmap-good-light {
    background: #2a5a2a;
    color: #8fd48f;
}

.comparison-table td.heatmap-good {
    background: #1a5a1a;
    color: #a8d4a8;
}

.comparison-table td.heatmap-excellent {
    background: #0a5a0a;
    color: #c4a86f;
}

/* Red shades - worse than baseline (3 shades) */
.comparison-table td.heatmap-poor {
    background: #4a2a2a;
    color: #d48f8f;
}

.comparison-table td.heatmap-bad {
    background: #5a1a1a;
    color: #e07070;
}

.comparison-table td.heatmap-bad-dark {
    background: #6a0a0a;
    color: #e85555;
}

.comparison-table td.heatmap-average {
    background: #3a3a2a;
    color: #e0e0e0;
}

.comparison-table td.heatmap-neutral {
    background: #1c1c1c;
    color: #a0a0a0;
}

.comparison-table th.stat-group-header {
    background: #1e1e1e !important;
    font-weight: bold;
    color: #c4a86f;
    text-align: left;
    padding-left: 12px;
    border-bottom: 2px solid #3d3d3d;
    border-right: 1px solid #3d3d3d;
    border-top: 1px solid #222222;
    padding: 8px 10px;
    position: sticky;
    top: 0;
    left: 180px; /* Position after template name column (180px wide on desktop) */
    z-index: 11; /* Match thead tr z-index level */
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.4); /* Horizontal shadow + drop shadow */
    will-change: transform; /* Optimize for sticky positioning */
    isolation: isolate; /* Create new stacking context to prevent parent sticky interference */
}

.comparison-table th.stat-group-header:last-child {
    border-right: none;
    position: sticky; /* Ensure last header also sticks */
    top: 0;
    left: 180px; /* Explicitly set left position for last header */
    z-index: 11;
    isolation: isolate; /* Ensure stacking context */
}

/* Transposed table - template headers */
.comparison-table .template-header {
    min-width: 100px;
    max-width: 140px;
    vertical-align: bottom;
    padding: 12px 8px;
    text-align: center;
    background: #222222 !important;
}

/* Template headers no longer exist in transposed layout - removed */

.comparison-table thead .template-header.current-template {
    background: #1a160a !important;
}

.comparison-table .template-header-icon {
    font-size: 24px;
    margin-bottom: 6px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-table .template-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.comparison-table .template-header-name {
    font-size: 11px;
    font-weight: 600;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: 100%;
}

.comparison-table .current-badge {
    display: block;
    font-size: 9px;
    color: #a0d0b2;
    font-weight: normal;
    margin-top: 2px;
}

.comparison-table .baseline-badge {
    display: block;
    font-size: 9px;
    color: #a0a0a0;
    font-weight: normal;
    margin-top: 2px;
}

.comparison-table .preset-source-badge {
    display: block;
    font-size: 9px;
    color: #8a9dad;
    font-weight: normal;
    margin-top: 2px;
}

.comparison-table .template-header.selected-baseline {
    background: #1a1a1a !important;
    border: 2px solid #c8a96e;
    box-shadow: 0 0 8px rgba(200, 169, 110, 0.5);
}

.comparison-table .template-header.baseline-header {
    background: #1e1e1e;
}

.comparison-table .template-header.baseline-header.selected-baseline {
    background: #1a1a1a !important;
    border: 2px solid #c8a96e;
    box-shadow: 0 0 8px rgba(200, 169, 110, 0.5);
}

.comparison-table .template-header[style*="cursor: pointer"]:hover {
    background: #3d3d3d !important;
    transition: background 0.2s;
}

.comparison-table .empty-cell {
    background: #1e1e1e;
    border: 1px solid #222222;
}

.comparison-table .baseline-template-cell {
    background: #1a1a1a;
    border: 1px solid #222222;
}

.comparison-table .template-name-header {
    min-width: 180px;
    max-width: 180px;
    width: 180px;
    background: #222222 !important; /* Match table header background */
    position: sticky;
    left: 0;
    z-index: 15;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
    border-right: none;
}

.comparison-table thead .template-name-header {
    background: #222222 !important;
}

.comparison-table .stat-header {
    background: #222222 !important;
    color: #e0e0e0;
    padding: 8px 10px;
    text-align: center;
    font-weight: 600;
    border: 1px solid #3d3d3d;
    white-space: nowrap;
    min-width: 80px;
    position: relative;
    z-index: 9; /* Lower than template-name-header (15) and group headers (13) */
}

/* Stat group row */
.comparison-table .stat-group-row {
    background: #2a2a2a;
}

.comparison-table .stat-group-label {
    font-weight: bold;
    color: #c4a86f;
    padding: 10px 12px;
    text-align: left;
    border-top: 2px solid #3d3d3d;
    border-bottom: 1px solid #222222;
    position: sticky;
    left: 0;
    z-index: 7;
    background: #2a2a2a;
}

/* Remove stat-group-row and stat-label-cell styles as they're no longer used in transposed layout */
.comparison-table .stat-label-cell {
    display: none; /* Not used in transposed layout */
}

/* Stat label cell */
.comparison-table .stat-label-cell {
    text-align: left;
    font-weight: 500;
    color: #b0b0b0;
    padding: 6px 12px;
    background: #2a2a2a !important;
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 6;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
    border-right: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Current template column highlight */
.comparison-table td.current-template-cell {
    /* No longer needs sticky positioning in transposed layout */
}

/* Solid background for sticky current template cells when not in heatmap mode */
.comparison-table td.current-template-cell:not(.heatmap-cell) {
    background: #1a1a1a !important;
}

/* Heatmap colors should override the background - Green shades */
.comparison-table td.current-template-cell.heatmap-good-light {
    background: #2a5a2a !important;
    color: #8fd48f !important;
}

.comparison-table td.current-template-cell.heatmap-good {
    background: #1a5a1a !important;
    color: #a8d4a8 !important;
}

.comparison-table td.current-template-cell.heatmap-excellent {
    background: #0a5a0a !important;
    color: #c4a86f !important;
}

/* Heatmap colors should override the background - Red shades */
.comparison-table td.current-template-cell.heatmap-poor {
    background: #4a2a2a !important;
    color: #d48f8f !important;
}

.comparison-table td.current-template-cell.heatmap-bad {
    background: #5a1a1a !important;
    color: #e07070 !important;
}

.comparison-table td.current-template-cell.heatmap-bad-dark {
    background: #6a0a0a !important;
    color: #e85555 !important;
}

.comparison-table td.current-template-cell.heatmap-average {
    background: #3a3a2a !important;
    color: #e0e0e0 !important;
}

.comparison-table td.current-template-cell.heatmap-neutral {
    background: #1c1c1c !important;
    color: #a0a0a0 !important;
}

.comparison-selector-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comparison-selector-section button {
    margin-left: auto;
}

.modal-header {
    background: #222222;
    padding: 15px;
    border-bottom: 1px solid #3d3d3d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h3 {
    font-size: 16px;
    color: #e0e0e0;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header-actions .btn {
    /* Use hoi4-btn style to match app */
    background: #222222;
    border: 1px solid #3d3d3d;
    color: #e0e0e0;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    min-width: 70px;
}

.modal-header-actions .btn:hover {
    background: #313131;
}

.modal-header-actions .btn-primary {
    background: #2a4633;
    border-color: #4e7e5f;
    color: #a0d0b2;
}

.modal-header-actions .btn-primary:hover {
    background: #3a5645;
    border-color: #5e8e6f;
}

.modal-close {
    background: transparent;
    border: none;
    color: #e0e0e0;
    font-size: 24px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    line-height: 1;
}

/* ── Two-zone (stacked) header for Doctrine + Research modals ────────────────
   An identity zone (modal type kicker + loaded-path name) and an actions zone.
   Scoped to .doctrine-modal-content so other modals keep the flex header.
   Desktop: kicker over path on the left, actions spanning both rows on the
   right. Mobile: kicker + actions on row 1, path name full-width on row 2. */
.doctrine-modal-content .modal-header.modal-header--stacked {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "kicker actions"
        "path   actions";
    align-items: center;
    column-gap: 12px;
    row-gap: 1px;
}

.doctrine-modal-content .modal-header-kicker {
    grid-area: kicker;
    align-self: end;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #e6e6e6;
}

.doctrine-modal-content .modal-header-actions {
    grid-area: actions;
    align-self: center;
}

.modal-header-path {
    grid-area: path;
    align-self: start;
    justify-self: start; /* shrink to content so only the text is the click target */
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: #aeaeae;
}

.modal-header-path__icon {
    flex-shrink: 0;
    color: #c8a24e;
}

/* Count of user selections on top of defaults, shown as an inline pill after the
   path name — kept out of the icon corner so it never overlaps the modal title. */
.modal-header-path__count {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    color: #1e1e1e;
    background: #b8e0b8;
    border: 1px solid #c8a96e;
    border-radius: 8px;
}

.modal-header-path__count[hidden] {
    display: none;
}

/* Clickable path name opens the read-only selection-order drawer. */
.modal-header-path[role="button"] {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 5px;
    margin: -2px -5px; /* keep alignment while giving the hover target breathing room */
}
.modal-header-path[role="button"]:hover {
    background: rgba(255, 255, 255, 0.06);
}
.modal-header-path[role="button"]:hover .modal-header-path__name {
    color: #ffffff;
}
.modal-header-path[aria-expanded="true"] .modal-header-path__icon {
    color: #e0b15a;
}

/* Selection-order drawer: read-only "steps to replicate this path". Slides in
   from the right edge of the modal frame. */
.doctrine-modal-content {
    position: relative;
}

.selection-order-panel {
    position: absolute;
    top: 0; /* set to header height on open so the header stays usable */
    bottom: 0;
    right: 0;
    width: 300px;
    max-width: 86%;
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    border-left: 1px solid #3d3d3d;
    box-shadow: -10px 0 26px rgba(0, 0, 0, 0.45);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    will-change: transform;
}

.selection-order-panel.is-open {
    transform: translateX(0);
}

.selection-order-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    border-bottom: 1px solid #333333;
    background: #222222;
    flex-shrink: 0;
}

.selection-order-panel__title {
    font-size: 13px;
    font-weight: 700;
    color: #e0e0e0;
    letter-spacing: 0.02em;
}

.selection-order-panel__close {
    background: none;
    border: none;
    color: #bbbbbb;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    width: 28px;
    height: 28px;
}

.selection-order-panel__close:hover {
    color: #ffffff;
}

.selection-order-panel__sub {
    padding: 9px 14px 4px;
    font-size: 11px;
    color: #8a8a8a;
    flex-shrink: 0;
}

.selection-order-panel__list {
    list-style: none;
    margin: 0;
    padding: 6px 8px 14px;
    overflow-y: auto;
    flex: 1;
}

.selection-order-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
}

.selection-order-row + .selection-order-row {
    border-top: 1px solid #262626;
}

/* Mirrors the .path-order-badge used on research/doctrine nodes. */
.selection-order-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #1e1e1e;
    background: #b8e0b8;
    border: 1px solid #c8a96e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.selection-order-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: #111111 center / contain no-repeat;
    border: 1px solid #333333;
}

.selection-order-icon--blank {
    background-color: #1e1e1e;
}

.selection-order-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.selection-order-label {
    font-size: 13px;
    color: #e6e6e6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selection-order-kind {
    font-size: 10px;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.selection-order-empty {
    padding: 14px 10px;
    color: #888888;
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
}

.modal-header-path__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No path loaded - muted, outlined icon. */
.modal-header-path[data-empty="true"] {
    color: #767676;
    font-weight: 500;
    font-style: italic;
}

.modal-header-path[data-empty="true"] .modal-header-path__icon {
    color: #5a5a5a;
}

/* "Edited" tag - loaded path has unsaved changes. */
.modal-header-path__tag {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-style: normal;
    color: #e0b15a;
    background: rgba(200, 162, 78, 0.14);
    border: 1px solid rgba(200, 162, 78, 0.4);
    border-radius: 3px;
    padding: 1px 5px;
    line-height: 1.45;
}

.modal-header-path[data-dirty="true"] .modal-header-path__icon {
    color: #e0b15a;
}

/* Brief glow when the loaded path name changes (load / save). */
.modal-header-path--changed .modal-header-path__name {
    animation: modalHeaderPathPop 1s ease;
}

@keyframes modalHeaderPathPop {
    0% { color: #c8a24e; }
    100% { color: inherit; }
}

/* Apply button: label by default; an icon stands in on mobile to save width. */
.modal-apply-btn__icon {
    display: none;
}

@media (max-width: 640px) {
    /* Path name gets its own full-width row so it's never truncated or hidden
       behind the buttons; kicker + actions share the top row. (Centering the
       actions against both rows isn't viable here - it either squeezes the name
       to an ellipsis or overlaps the buttons, so the name keeps its own row.) */
    .doctrine-modal-content .modal-header.modal-header--stacked {
        grid-template-areas:
            "kicker actions"
            "path   path";
        row-gap: 5px;
    }
    .doctrine-modal-content .modal-header-kicker {
        align-self: center;
    }
    .doctrine-modal-content .modal-header-actions {
        align-self: center;
        gap: 6px;
    }
    .modal-header-path {
        align-self: center;
        font-size: 12px;
    }
    /* Tighten the action row + collapse Apply to an icon so Recommend, ⋯,
       Apply and × all fit comfortably. */
    .doctrine-modal-content .modal-header-actions .btn {
        min-width: 0;
        padding: 6px 9px;
    }
    .modal-apply-btn__label {
        display: none;
    }
    .modal-apply-btn__icon {
        display: inline-flex;
    }
}

/* Profile actions dropdown (⋯) in Doctrine and Technologies modals */
.profile-actions-dropdown {
    position: relative;
}

.profile-actions-dropdown .btn-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #141414;
    border-color: #4a4a4a;
    color: #aaaaaa;
}
.profile-actions-dropdown .btn-icon:hover {
    background: #1e1e1e;
    border-color: #606060;
    color: #cccccc;
}

.profile-actions-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 160px;
    background: #1c1c1c;
    border: 1px solid #3d3d3d;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1002;
    padding: 4px 0;
}

.profile-actions-menu[aria-hidden="false"] {
    display: block;
}

.profile-actions-menu button,
.profile-actions-menu .profile-actions-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    text-align: left;
    background: none;
    border: none;
    color: #e0e0e0;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.profile-actions-menu button:hover,
.profile-actions-menu .profile-actions-item:hover {
    background: #222222;
}

.profile-actions-menu .profile-actions-item.profile-name {
    font-weight: normal;
}

.profile-actions-menu .profile-name-row {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    min-width: 0;
}

.profile-actions-menu .profile-name-row .profile-actions-item.profile-name {
    flex: 1;
    min-width: 0;
    padding: 6px 8px 6px 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-actions-menu .profile-name-row .profile-delete-btn {
    flex-shrink: 0;
    width: auto;
    min-width: auto;
    margin: 0 6px 0 0;
    padding: 4px 6px;
    background: transparent;
    border: none;
    color: #ff6b6b;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    opacity: 0.75;
    border-radius: 2px;
}

.profile-actions-menu .profile-name-row .profile-delete-btn:hover {
    opacity: 1;
    background: #5a2a2a;
}

/* Locked Pro path row (over-cap, non-Pro). */
.profile-actions-menu .profile-name-row.is-locked {
    opacity: 0.6;
    filter: grayscale(0.5);
}
.profile-actions-menu .profile-name-row.is-locked:hover {
    opacity: 0.75;
}
.profile-actions-menu .profile-actions-item.profile-name.is-locked {
    cursor: not-allowed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.profile-name-lock {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(212, 144, 10, 0.16);
    border: 1px solid rgba(212, 144, 10, 0.45);
    color: #f3c97a;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.profile-actions-menu .profile-actions-back {
    color: #9a9a9a;
    font-size: 12px;
}

.profile-actions-menu .profile-list-header {
    padding: 6px 14px;
    font-size: 11px;
    color: #9a9a9a;
    text-transform: uppercase;
    border-bottom: 1px solid #222222;
    margin-bottom: 4px;
}

.profile-actions-menu .profile-list-counter {
    padding: 6px 14px;
    font-size: 11px;
    color: #9a9a9a;
    text-align: center;
    border-top: 1px solid #222222;
    margin-top: 4px;
    background: #1e1e1e;
}

.profile-actions-menu .profile-list-counter.caution {
    color: #ffa500;
}

.profile-actions-menu .profile-list-counter.warning {
    color: #ff6b6b;
    font-weight: 600;
}

.profile-actions-menu .profile-save-form {
    padding: 8px 14px 10px;
    border-bottom: 1px solid #222222;
}

.profile-actions-menu .profile-save-form .profile-save-name-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #e0e0e0;
    background: #1e1e1e;
    border: 1px solid #3d3d3d;
    border-radius: 3px;
}

.profile-actions-menu .profile-save-form .profile-save-name-input::placeholder {
    color: #7a7a7a;
}

.profile-actions-menu .profile-save-form .profile-save-name-input:focus {
    outline: none;
    border-color: #4f4f4f;
}

.profile-actions-menu .profile-save-form button[type="submit"] {
    display: block;
    width: 100%;
    padding: 8px 14px;
    text-align: left;
    background: #7a5828;
    border: none;
    color: #e0e0e0;
    font-size: 13px;
    cursor: pointer;
    border-radius: 3px;
}

.profile-actions-menu .profile-save-form button[type="submit"]:hover {
    background: #a07038;
}

/* Profile save/delete success feedback (same pattern as template save/share) */
.profile-actions-menu .profile-save-form button[type="submit"].profile-action-success {
    background: #3d6b3d;
    border-color: #4a8a4a;
    animation: profileActionPulse 0.35s ease-in-out;
}

.profile-actions-menu .profile-delete-btn.profile-action-success {
    background: #3d6b3d !important;
    color: #a8e0a8 !important;
    animation: profileActionPulse 0.35s ease-in-out;
}

@keyframes profileActionPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.modal-search {
    padding: 10px 15px;
    background: #1c1c1c;
    border-bottom: 1px solid #3d3d3d;
    flex-shrink: 0;
}

.modal-search input {
    width: 100%;
    padding: 8px 12px;
    background: #1e1e1e;
    border: 1px solid #3d3d3d;
    border-radius: 3px;
    color: #e0e0e0;
    font-size: 14px;
}

.modal-search input:focus {
    outline: none;
    border-color: #5a8a8a;
}

.modal-search input::placeholder {
    color: #888;
}

.modal-body {
    padding: 20px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Modal Loading Overlays - with 0.1s fade-out transition only */
.modal-loading-overlay,
.doctrine-loading-overlay,
.special-forces-loading-overlay {
    opacity: 1;
    visibility: visible;
}

.modal-loading-overlay.hidden,
.doctrine-loading-overlay.hidden,
.special-forces-loading-overlay.hidden {
    transition: opacity 0.1s ease-out, visibility 0.1s ease-out;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.modal-category-header {
    font-size: 13px;
    font-weight: bold;
    color: #c0c0c0;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 0;
    border-bottom: 1px solid #3d3d3d;
    margin-bottom: 5px;
}

.modal-category-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.modal-option {
    position: relative;
    background: #222222;
    border: 1px solid #3d3d3d;
    border-radius: 3px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.modal-option-unlock-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    z-index: 2;
    cursor: default;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}
.modal-option.disabled .modal-option-unlock-badge {
    pointer-events: auto;
}

.modal-option-unlock-badge-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
    opacity: 0.95;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}


.modal-option:hover {
    background: #313131;
    border-color: #4f4f4f;
}

.modal-option.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Design-gated units (e.g. NSB amphibious) keep pointer events so their hover
   tooltip can explain the requirement; the click handler still blocks selection. */
.modal-option.disabled.modal-option--gated {
    pointer-events: auto;
}

.modal-option-icon {
    font-size: 32px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-option-icon-container {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cell-level loading spinner (shown within icon containers) */
.cell-loading-spinner {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        #1e1e1e 0%,
        #1c1c1c 20%,
        #1e1e1e 40%,
        #1e1e1e 100%
    );
    background-size: 200% 100%;
    border-radius: 50%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.cell-loading-spinner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(200, 169, 110, 0.15) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.grand-doctrine-icon-container .cell-loading-spinner,
.sub-doctrine-icon-container .cell-loading-spinner,
.special-forces-node-icon-container .cell-loading-spinner,
.sub-doctrine-icon-container .cell-loading-spinner {
    /* Inherits full width/height from container */
    /* Uses darker background for doctrine modals */
}

/* Lighter variant for modal options (units/support companies selection) */
.modal-option-icon-container .cell-loading-spinner {
    background: linear-gradient(
        90deg,
        #222222 0%,
        #313131 20%,
        #222222 40%,
        #222222 100%
    );
    background-size: 200% 100%;
}

.modal-option-icon-container .cell-loading-spinner::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(200, 169, 110, 0.1) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
}

.modal-option-name {
    font-size: 12px;
    color: #e0e0e0;
}

/* Unit / support company preview tooltip (add-unit modal) – uses .custom-tooltip base */
.unit-preview-tooltip {
    background: rgba(0, 0, 0, 0.95);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    max-width: 400px;
    line-height: 1.35;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.unit-preview-tooltip__name {
    margin-bottom: 3px;
    font-size: 11px;
    color: #e8e8e8;
    font-weight: bold;
}
.unit-preview-tooltip__requirement {
    margin-bottom: 3px;
    font-size: 10px;
    color: #f0c070;
}
.unit-preview-tooltip__context-note {
    margin-bottom: 3px;
    font-size: 9px;
    color: #a0a0a0;
}
.unit-preview-tooltip__section {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 4px;
    padding-top: 4px;
}
.unit-preview-tooltip__subheader {
    margin-top: 3px;
    font-size: 10px;
}
.unit-preview-tooltip__subheader > span {
    color: #fff;
    font-style: italic;
}
.unit-preview-tooltip__subheader table {
    margin-top: 1px;
}
.unit-preview-tooltip__stat-label {
    padding-right: 8px;
    color: #b0b0b0;
    font-size: 10px;
    white-space: nowrap;
}
.unit-preview-tooltip__stat-value {
    font-size: 10px;
}
.unit-preview-tooltip__terrain-label {
    padding-right: 8px;
    color: #b0b0b0;
    font-size: 10px;
    white-space: nowrap;
}
.unit-preview-tooltip__terrain-value {
    padding-left: 4px;
    font-size: 10px;
}

/* Loading placeholder while fetching unit preview (same shimmer as app) */
.unit-preview-tooltip__loading {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 4px;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.unit-preview-tooltip__loading-line {
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        #2a2a2a 0%,
        #222222 25%,
        #2a2a2a 50%,
        #2a2a2a 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.unit-preview-tooltip__loading-line--short {
    width: 70%;
}

/* Delta (contribution) mode: label cell has arrow like template stats */
.unit-preview-tooltip__stat-label--delta,
.unit-preview-tooltip__terrain-label--delta {
    position: relative;
    padding-left: 14px;
}
.unit-preview-tooltip__change-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    z-index: 1;
}
.unit-preview-tooltip__change-icon.change-up {
    border-bottom: 5px solid;
    border-top: none;
}
.unit-preview-tooltip__change-icon.change-down {
    border-top: 5px solid;
    border-bottom: none;
}
.unit-preview-tooltip__change-icon.positive {
    border-bottom-color: #5cb87a;
    border-top-color: #5cb87a;
}
.unit-preview-tooltip__change-icon.negative {
    border-bottom-color: #cc6666;
    border-top-color: #cc6666;
}

/* Custom tooltip containers: base positioning and visual variants */
.custom-tooltip {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    display: none;
    white-space: normal;
}
.custom-tooltip.tooltip--generic {
    background: rgba(0, 0, 0, 0.95);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    max-width: 350px;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.custom-tooltip.info-tooltip {
    background: rgba(0, 0, 0, 0.95);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    max-width: 400px;
    line-height: 1.35;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Shared informative tooltip styling (doctrine, technology) – inner content and matches unit preview look */
.info-tooltip {
    font-size: 11px;
    line-height: 1.35;
}
.info-tooltip__name {
    margin-bottom: 3px;
    font-size: 11px;
    color: #e8e8e8;
    font-weight: bold;
}
.info-tooltip__section {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 4px;
    padding-top: 4px;
}
.info-tooltip__subheader {
    margin-top: 3px;
    font-size: 10px;
}
.info-tooltip__subheader > span {
    color: #fff;
    font-style: italic;
}
.info-tooltip__body {
    font-size: 10px;
    color: #e0e0e0;
    margin-top: 2px;
}
.info-tooltip__line {
    margin-top: 2px;
    font-size: 10px;
}
.info-tooltip__label {
    color: #b0b0b0;
    margin-right: 4px;
}
/* Requirement text (e.g. tech locked, special project) – same amber as locked unit tooltips */
.info-tooltip__requirement {
    margin-bottom: 3px;
    font-size: 10px;
    color: #f0c070;
}

/* Stats tooltip (main panel) – slightly larger body text for readability */
#main-stats-tooltip .info-tooltip__body {
    font-size: 12px;
}

/* Icon Picker Styles */
.icon-option {
    background: #222222;
    border: 1px solid #3d3d3d;
    border-radius: 3px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 90px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-option:hover {
    background: #313131;
    border-color: #4f4f4f;
    transform: scale(1.1);
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 15px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1e1e1e;
}

::-webkit-scrollbar-thumb {
    background: #3d3d3d;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4f4f4f;
}

/* Desktop: Constrain window to viewport height so footer stays at bottom */
@media (min-width: 769px) {
    .hoi4-window {
        height: 100vh; /* Use fixed height on desktop instead of min-height */
        min-height: 100vh; /* Fallback for older browsers */
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .hoi4-window {
        height: 100vh;
        height: 100dvh; /* Use dynamic viewport height on mobile to account for browser UI */
        overflow-y: auto;
        width: 100%;
        overflow-x: hidden;
    }
    
    .hoi4-main-content {
        flex-direction: column;
        overflow: visible;
        height: auto;
        position: relative;
    }
    
    .hoi4-left-panel {
        width: 100%;
        border-right: none;
        padding: 8px;
        overflow: visible;
        position: relative;
        /* Ensure sticky children can stick relative to viewport */
        min-height: 0;
    }
    
    .hoi4-division-header {
        position: relative;
        padding: 6px 0;
        margin-bottom: 8px;
        gap: 8px;
    }
    
    .custom-dropdown {
        position: relative;
    }
    
    .dropdown-menu {
        z-index: 1001;
    }
    
    /* Make the grid section truly sticky on mobile - stick directly below navbar with no gap */
    .hoi4-section {
        position: -webkit-sticky; /* Safari support */
        position: sticky;
        top: 0; /* Will be adjusted by JavaScript to match navbar height exactly */
        margin-top: 0; /* Remove any top margin */
        background: #1c1c1c;
        z-index: 20;
        padding: 15px 10px;
        margin: 0 -10px 10px -10px;
        border-bottom: 1px solid #4a4a4a;
        /* Ensure it stays sticky across the entire scroll area */
        align-self: flex-start;
        width: calc(100% + 20px); /* Account for negative margin */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        /* Ensure it stays sticky even when scrolling past parent */
        will-change: transform;
    }
    
    .hoi4-right-panel {
        position: relative;
        z-index: 1;
        /* Ensure it scrolls behind the sticky section */
        background: #1e1e1e;
        display: block; /* Override flex on mobile */
        width: 100%; /* Full width on mobile */
        padding: 10px; /* Consistent padding */
        height: auto; /* Let content determine height */
        min-height: 0; /* Allow shrinking if needed */
        overflow: visible; /* Ensure content is not clipped */
        max-height: none; /* Remove any max-height constraints */
    }
    
    .stats-parchment {
        position: relative;
        z-index: 1;
        flex: none; /* Override flex growth on mobile - let content determine size */
        min-height: auto; /* Remove min-height constraint on mobile */
        height: auto; /* Let content determine height */
        display: flex; /* Keep flex for internal layout */
        flex-direction: column; /* Keep column layout */
    }
    
    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .terrain-effects-section {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    
    /* Make terrain grid single column on mobile */
    .terrain-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    
    /* Adjust terrain row for mobile - more compact horizontal layout */
    .terrain-row {
        flex-direction: row;
        align-items: flex-start;
        padding: 4px 6px;
        gap: 6px;
    }
    
    .terrain-name {
        flex: 0 0 70px;
        font-size: 11px;
        min-width: 80px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .terrain-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    
    .terrain-values-container {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        gap: 8px; /* Reduced spacing for mobile */
        align-items: flex-start;
        min-width: 0;
    }
    
    .terrain-modifier {
        flex: 0 0 65px;
        width: 65px;
        min-width: 65px;
        max-width: 65px;
        gap: 1px;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    
    .terrain-mod-label {
        font-size: 9px;
        letter-spacing: 0.3px;
        text-align: center;
        width: 100%;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Adjust icon position for smaller mobile labels */
    .terrain-label-icon {
        left: -9px !important; /* Slightly closer on mobile due to smaller font */
    }
    
    .terrain-mod-value-container {
        gap: 2px;
        align-items: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .terrain-mod-value {
        font-size: 11px;
        text-align: center;
        width: 100%;
        white-space: nowrap;
    }
    
    .terrain-mod-value-container .baseline-comparison {
        font-size: 9px;
        white-space: nowrap;
    }
    
    
    /* Compact top: title bar */
    .hoi4-title-bar {
        padding: 8px 10px;
        flex-direction: row;
        align-items: center;
        align-content: center;
        justify-content: space-between;
        gap: 6px;
        min-height: 44px;
    }
    
    .title-bar-actions {
        width: auto;
        justify-content: flex-end;
        flex-wrap: wrap;
        align-items: center;
        display: flex;
        gap: 6px;
    }
    
    .title-bar-year-selector {
        margin: 0;
        gap: 0;
    }
    
    .year-label-badge {
        padding: 4px 5px;
        font-size: 10px;
    }
    
    .title-bar-year-selector .year-select {
        min-width: 64px;
        font-size: 11px;
        padding: 4px 18px 4px 6px;
        padding-right: 20px;
    }
    
    .title-bar-actions .hoi4-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 5px 8px;
        font-size: 11px;
    }
    
    #about-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
    
    #about-btn .about-btn-icon {
        margin: 0;
        display: block;
    }
    
    #doctrine-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
    
    #doctrine-btn .doctrine-btn-icon {
        margin: 0;
        display: block;
    }
    
    .title-bar-year-selector {
        margin: 0;
    }
    
    .hoi4-title {
        font-size: 12px;
        display: flex;
        align-items: center;
    }
    
    .hoi4-title .title-logo {
        height: 28px;
        width: auto;
        max-width: none;
    }

    
    /* Keep side-by-side layout on mobile, just scale down */
    .support-combat-container {
        flex-direction: row;
        gap: 6px;
        padding: 8px;
        min-height: auto;
    }
    
    .support-column {
        width: 50px;
        flex-shrink: 0;
    }
    
    .combat-column {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    
    .production-cost {
        text-align: right;
    }

    .template-bottom-bar {
        padding-bottom: 8px;
        padding-top:4px;
    }

    .resource-icon {
        width: 14px;
        height: 14px;
    }
    
    /* Keep 5-column grid, reduce gap */
    .combat-slots {
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
    }
    
    /* Scale down slot sizes - but make icons bigger */
    .slot {
        height: 50px;
    }

    .support-slots .slot {
        height: 50px;
        width: 50px;
    }

    .support-slots {
        gap: 4px;
    }

    .support-column-label {
        font-size: 8px;
        padding: 2px 0 6px;
        margin-bottom: 6px;
        letter-spacing: 0.5px;
    }

    .regimental-slots {
        gap: 4px;
        --regimental-height: 45px;
        margin-bottom: 0;
    }

    .regimental-slot-container {
        padding: 4px;
    }

    .regimental-slots .slot {
        width: 100%;
    }

    .regimental-slots .slot.filled .slot-icon {
        width: 50px;
        height: 50px;
    }

    .regimental-slots .unit-image {
        padding: 2px;
    }

    .regimental-slots .slot .slot-icon {
        font-size: 22px;
    }

    .regimental-support-row {
        margin-top: 8px;
        /* padding: 6px 6px 0; */
    }

    .regimental-support-label {
        display: none;
    }

    .combat-width-badge {
        top: -23px;
        height: 22px;
        min-width: 36px;
        padding: 0 9px;
    }

    .combat-width-badge::before,
    .combat-width-badge::after {
        border-top-width: 3px;
        border-bottom-width: 3px;
    }

    .combat-width-badge::before {
        border-right-width: 4px;
    }

    .combat-width-badge::after {
        border-left-width: 4px;
    }

    .combat-width-badge-value {
        font-size: 11px;
    }
    
    .slot.large-slot {
        height: 60px;
        margin-top: 4px;
    }
    
    .slot-icon {
        font-size: 32px;
    }
    
    .slot.add-slot .slot-icon {
        font-size: 40px;
    }
    
    .slot.locked .slot-icon {
        font-size: 28px;
    }
    
    /* Make unit images bigger on mobile by reducing padding */
    .unit-image {
        padding: 2px;
    }
    
    .combat-slots .unit-image {
        padding: 4px;
    }
    
    .support-slots .unit-image {
        padding: 2px;
    }
    
    /* Onboarding hint tooltip on mobile */
    .onboarding-hint-tooltip {
        font-size: 11px;
        padding: 8px 12px;
        bottom: calc(100% + 10px);
        border-radius: 6px;
    }
    
    .stats-parchment {
        padding: 10px;
    }
    
    /* Fix change icon alignment on mobile */
    .stat-label {
        line-height: 1.5; /* Slightly larger line-height for better mobile alignment */
        min-height: 20px; /* Ensure consistent height */
        display: flex;
        align-items: center;
    }
    
    .change-icon {
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0; /* Reset margin-top on mobile for better alignment */
    }
    
    .cost-change-icon {
        /* Slightly adjust spacing on mobile */
        margin-right: 3px;
        margin-top: 0;
    }
    
    .stat-row {
        align-items: center;
        min-height: 24px; /* Ensure consistent row height on mobile */
    }
    
    
    .comparison-tools-section {
        padding: 8px 10px;
        gap: 8px;
        flex-direction: row;
        align-items: center;
        position: sticky;
        top: 0; /* Will be adjusted by JavaScript to match navbar height exactly */
        z-index: 100;
        background: #1c1c1c;
        border-bottom: 1px solid #222222;
        margin-bottom: 12px;
    }
    
    .comparison-baseline-control {
        flex: 1 1 0;
        min-width: 0;
    }
    
    .comparison-label {
        min-width: 90px;
        font-size: 10px;
    }
    
    .comparison-baseline-control .comparison-label {
        min-width: 90px;
    }

    .comparison-baseline-control .comparison-dropdown {
        min-width: 0;
    }

    .comparison-baseline-control .comparison-dropdown .dropdown-header {
        font-size: 11px;
        padding: 5px 8px;
        min-width: 0;
        max-width: 100%;
    }

    .comparison-grid-btn {
        flex-shrink: 0;
        padding: 5px 10px;
        font-size: 10px;
    }
    .comparison-grid-btn > span {
        display: none;
    }
    .comparison-grid-btn svg {
        width: 12px;
        height: 12px;
    }

    /* Stats-tools cluster + adjusted-stats bar - mobile. The wrapper owns
       the border/radius/shadow; inner bars are seamless zones. */
    .stats-tools-cluster {
        margin-bottom: 12px;
        background: #1c1c1c;
        border: 1px solid #222;
        border-radius: 3px;
    }
    .stats-adjusted-bar {
        padding: 3px 10px;
        gap: 10px;
        background:
            linear-gradient(180deg, rgba(80, 66, 42, 0.22) 0%, rgba(80, 66, 42, 0.10) 100%),
            #1c1c1c;
        border: 0;
        border-top: 1px solid rgba(139, 122, 90, 0.32);
    }

    /* Mobile: keep the stats-adjusted-bar sticky; its top is set dynamically
       by updateStickySectionPositions() so it lands flush under the
       navbar-anchored comparison bar. Square the corners since the rounded
       desktop look reads odd against the full-bleed mobile flow. */
    .stats-card > .stats-adjusted-bar {
        border-radius: 0;
    }
    .sab-tabs { gap: 12px; padding-left: 0; }
    .sab-tab { font-size: 10px; padding: 3px 1px; }
    .sab-tab-hint { display: none !important; }
    .sab-reset { padding: 2px 7px 2px 5px; font-size: 8px; }
    .sab-reset svg { width: 9px; height: 9px; }

    .hoi4-division-header {
        gap: 8px;
    }
    
    .division-header-row {
        gap: 6px;
    }
    
    /* First row: Icon, Name Input, Load Template */
    .division-header-row:first-child {
        flex-wrap: wrap;
    }
    
    .division-icon-selector {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }
    
    .division-icon-display,
    .division-icon-fallback {
        font-size: 18px;
    }
    
    .division-name-input {
        flex: 1;
        min-width: 100px;
    }
    
    .division-name-input input {
        padding: 5px 8px;
        font-size: 12px;
    }
    
    .saved-templates-section {
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
        order: -1; /* Move above name input on mobile */
    }
    
    .division-icon-selector {
        order: 0; /* Keep icon on the left */
    }
    
    .division-name-input {
        order: 1; /* Name input after icon */
    }
    
    .custom-dropdown {
        width: 100%;
        min-width: 0;
    }
    
    .dropdown-header {
        width: 100%;
    }
    
    /* Second row: Reset and Save buttons */
    .division-header-row:last-child {
        width: 100%;
    }
    
    .year-selector {
        flex: 1;
        min-width: 50px;
    }
    
    .division-header-row .hoi4-btn {
        flex: 1;
        min-width: 72px;
        font-size: 11px;
        padding: 5px 8px;
    }

    .division-header-row .pub-split {
        flex: 1;
    }

    .division-header-row .pub-split .pub-split-btn {
        width: 100%;
    }
    
    .about-modal-content {
        width: 95vw;
        max-width: 95vw;
        max-height: 90vh;
    }
    
    .about-modal-body {
        padding: 15px;
        font-size: 12px;
    }
    
    .about-capabilities {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 16px;
    }
    
    .about-capability {
        padding: 10px 12px;
    }
    
    .about-capability-title {
        font-size: 12px;
    }
    
    .about-capability-desc {
        font-size: 11px;
    }
    
    .about-section {
        margin-bottom: 15px;
    }
    
    .about-section h4 {
        font-size: 13px;
    }
    
    .about-section p,
    .about-section ul,
    .about-section li {
        font-size: 12px;
    }
    
    .about-section ul {
        margin-left: 15px;
    }
    
    .feature-group {
        padding: 10px;
        margin-bottom: 15px;
    }
    
    .feature-group h5 {
        font-size: 12px;
    }
    
    .feature-group p,
    .feature-group ul,
    .feature-group li {
        font-size: 12px;
    }
    
    .feedback-button-container {
        margin-top: 15px;
        width: 100%;
    }
    
    .feedback-link {
        display: block;
        width: 100%;
        text-align: center;
        padding: 8px 12px;
    }
    
    /* Reduce left padding on comparison table cells for mobile */
    .comparison-table th {
        padding: 8px 4px 8px 4px; /* Reduce left/right padding from 10px to 4px */
    }
    
    .comparison-table td {
        padding: 6px 4px 6px 4px; /* Reduce left/right padding from 6px to 4px */
    }
    
    .comparison-table th.stat-group-header {
        padding: 8px 4px 8px 4px; /* Reduce left/right padding */
        left: 150px; /* Adjust sticky position to match template column width (150px on mobile) */
    }
    
    .comparison-table .stat-group-label {
        padding: 10px 4px; /* Reduce left/right padding from 12px to 4px */
    }
    
    .comparison-table .stat-header {
        padding: 8px 4px; /* Reduce left/right padding from 10px to 4px */
    }
    
    .comparison-table td.template-name {
        padding: 6px 4px 6px 4px; /* Reduce left/right padding for template name cell */
        min-width: 150px; /* Reduce width on mobile from 180px */
        max-width: 150px; /* Reduce width on mobile from 180px */
    }
    
    .comparison-table th.template-name-header {
        padding: 8px 4px 8px 4px; /* Reduce left/right padding for template name header */
        min-width: 150px; /* Reduce width on mobile from 150px */
    }
    
    /* Reduce padding on comparison modal body for mobile - override modal-body padding */
    .modal-body.comparison-modal-body,
    .comparison-modal-body {
        padding: 0 !important; /* Ensure no padding on mobile, override any other rules */
    }
    
    /* Reduce padding on comparison table container for mobile if needed */
    .comparison-table-container {
        padding: 0; /* Remove any padding on mobile */
    }
    
    /* Smaller fonts in comparison grid on mobile so text fits inline */
    .comparison-table th,
    .comparison-table td {
        font-size: 11px;
    }
    
    .comparison-table th.template-name-header,
    .comparison-table th.stat-group-header {
        font-size: 10px;
    }
    
    .comparison-table .stat-header {
        font-size: 10px;
    }
    
    .comparison-table td.template-name,
    .comparison-table .template-name-icon .template-name-text,
    .comparison-table .template-name-icon .template-icon-emoji {
        font-size: 11px;
    }
    
    .comparison-table .template-name-icon .current-badge,
    .comparison-table .template-name-icon .baseline-badge,
    .comparison-table .template-name-icon .preset-source-badge {
        font-size: 8px;
    }
    
    .comparison-table .template-name-icon img {
        width: 20px;
        height: 20px;
    }
    
    /* Comparison modal header + toggle: smaller so label fits inline on mobile */
    .comparison-modal-content .modal-header h3 {
        font-size: 14px;
    }
    
    .comparison-filter-label.comparison-toggle-wrap {
        gap: 6px;
    }
    
    .comparison-toggle-label {
        font-size: 11px;
    }
}

/* Very Compact Mobile - for very small screens */
@media (max-width: 480px) {
    .hoi4-title-bar {
        padding: 8px 10px;
        gap: 6px;
        min-height: 44px;
        align-items: center;
        align-content: center;
    }
    
    .title-bar-actions {
        gap: 4px;
        flex-wrap: wrap;
    }
    
    .year-label-badge {
        padding: 4px 5px;
        font-size: 9px;
        letter-spacing: 0.3px;
    }
    
    .title-bar-year-selector .year-select {
        min-width: 60px;
        font-size: 10px;
        padding: 4px 18px 4px 5px;
        padding-right: 20px;
        background-position: right 6px center;
    }
    
    .title-bar-actions .hoi4-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    #about-btn,
    #doctrine-btn {
        padding: 4px 8px;
        margin: 0;
    }
    
    .title-bar-year-selector {
        margin: 0;
    }
    
    .about-btn-icon,
    .doctrine-btn-icon,
    .technologies-btn-icon,
    .special-projects-btn-icon {
        width: 18px;
        height: 18px;
    }
    
    .hoi4-title {
        font-size: 11px;
    }
    
    .hoi4-title .title-logo {
        height: 26px;
        margin-top:3px;
    }
}

/* Long Press Visual Feedback */
.long-press-active {
    opacity: 0.7;
    transform: scale(0.98);
    transition: opacity 0.1s, transform 0.1s;
}

/* Doctrine Modal Styles */
.doctrine-modal-body {
    padding: 20px;
    overflow-y: auto;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Technologies modal: darker encapsulated box around tree (same style as special-forces column) */
#technologies-modal #technologies-tab-content {
    background: #191919;
    border: 2px solid #353535;
    border-radius: 6px;
    padding: 15px;
    padding-bottom: 36px; /* Extra space so tech nodes stay clearly above the horizontal scrollbar */
    box-sizing: border-box;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* center when tree fits (JS toggles .tree-overflows when it overflows) */
    overflow-x: auto; /* when tree is wider than modal, scroll so left side stays visible */
    scrollbar-width: thin;
    scrollbar-color: #3d3d3d #1e1e1e; /* Match global scrollbar styling, but ensure solid track under research tree */
}

/* Research modal: ensure horizontal scrollbar has a solid, opaque track above the tech content */
#technologies-modal #technologies-tab-content::-webkit-scrollbar {
    width: auto;
    height: 8px;
}

#technologies-modal #technologies-tab-content::-webkit-scrollbar-track {
    background: #1e1e1e;
    border-radius: 4px;
}

#technologies-modal #technologies-tab-content::-webkit-scrollbar-thumb {
    background: #3d3d3d;
    border-radius: 4px;
}

#technologies-modal #technologies-tab-content::-webkit-scrollbar-thumb:hover {
    background: #474747;
}

/* When tree is wider than modal, left-align so left side isn't clipped */
#technologies-modal #technologies-tab-content.tree-overflows {
    align-items: flex-start;
}

/* Research modal: body contains main content + sliding projects panel */
.technologies-modal-body-with-panel {
    position: relative;
    overflow: hidden;
}

.technologies-main-content {
    transition: margin-right 0.25s ease;
}

/* Sliding side panel for Projects (overlays right side of modal) */
.technologies-projects-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 90%;
    height: 100%;
    background: #1c1c1c;
    border-left: 2px solid #222222;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    z-index: 10;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow: hidden;
}

.technologies-projects-panel.is-open {
    transform: translateX(0);
}

.technologies-projects-panel-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #1c1c1c;
    border-bottom: 1px solid #222222;
}

.technologies-projects-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
}

.technologies-projects-panel-close {
    background: none;
    border: none;
    color: #a0a0a0;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.technologies-projects-panel-close:hover {
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.08);
}

/* Specialization tabs inside the projects panel (Air, Land, Naval, Nuclear) */
.technologies-projects-panel-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    padding: 8px 12px 0;
    background: #1c1c1c;
    border-bottom: 1px solid #222222;
}
.technologies-projects-panel-tabs .projects-panel-spec-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #a0a0a0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.technologies-projects-panel-tabs .projects-panel-spec-btn:hover {
    color: #d0d0d0;
    background: rgba(255, 255, 255, 0.06);
}
.technologies-projects-panel-tabs .projects-panel-spec-btn.active {
    color: #a0d0b2;
    background: #2a4633;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Green dot indicator next to special projects tab labels when that tab has a selection (like doctrine button) */
.special-projects-tab-indicator {
    display: none;
    margin-left: 4px;
    color: #6a8430;
    font-size: 8px;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}
.special-projects-tab-indicator.visible {
    display: inline-block;
}

.technologies-projects-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    max-width: 100%;
}

#technologies-modal .technologies-projects-panel-body .special-projects-content,
#technologies-modal .technologies-projects-panel-body .special-projects-sections {
    width: 100%;
    box-sizing: border-box;
}

#technologies-modal .technologies-projects-panel-body .special-projects-sections {
    gap: 20px;
}

#technologies-modal .technologies-projects-panel-body .special-projects-spec-section {
    width: 100%;
    box-sizing: border-box;
}

#technologies-modal .technologies-projects-panel-body .sub-doctrine-nodes {
    width: 100%;
    box-sizing: border-box;
}

#technologies-modal .technologies-projects-panel-body .sub-doctrine-node {
    width: 100%;
    box-sizing: border-box;
}

#technologies-modal .technologies-projects-panel-body .sub-doctrine-icon-container {
    width: 52px;
    height: 52px;
}

#technologies-modal .technologies-projects-panel-body .sub-doctrine-icon {
    width: 52px;
    height: 52px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* Requirement-type badge on disabled special project nodes (research / doctrine / special project) */
#technologies-modal .technologies-projects-panel-body .sub-doctrine-node {
    position: relative;
}
#technologies-modal .technologies-projects-panel-body .sub-doctrine-node .special-project-requirement-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}
#technologies-modal .technologies-projects-panel-body .sub-doctrine-node .special-project-requirement-badge-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
    opacity: 0.95;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* Special projects (inside Research modal): vertical sections like sub-doctrines (Land, Air, Naval, Nuclear) */
.special-projects-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.special-projects-sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#special-projects-modal .special-projects-spec-section .doctrine-section-title {
    margin-bottom: 8px;
}

#special-projects-modal .special-projects-spec-section .sub-doctrine-nodes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Research modal: tree sizes to content (capped at 1600px), centered in tab content with slight nudge left for optical balance (year column on left in vertical trees) */
#technologies-modal #technologies-tab-content .technologies-tree {
    width: max-content;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-right: 24px; /* optical nudge left so tree doesn’t feel shifted right */
}

/* Technologies modal: tree wrap and path/leads_to connector lines */
.technologies-tree-wrap {
    position: relative;
}

/* Engineering tree: rockets/nuclear grouping (experimental rockets subtree + atomic research) */
.technologies-tree-group.technologies-tree-group-rockets-nuclear {
    position: relative;
    padding: 8px 0;
    margin: 4px 0;
}

.technologies-tree-group.technologies-tree-group-rockets-nuclear .technologies-tree-group-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(28, 21, 21, 0.35);
    border-radius: 0 6px 6px 0;
    z-index: 0;
    pointer-events: none;
}

.technologies-tree-group.technologies-tree-group-rockets-nuclear .technologies-tree-level-row {
    position: relative;
    z-index: 1;
}

/* Vertical layout (engineering): rockets/nuclear as a vertical strip on the right; one single rectangle */
.technologies-tree-group-rockets-nuclear--vertical {
    padding: 4px 8px;
    margin-left: 4px;
}

.technologies-tree-group-rockets-nuclear--vertical .technologies-tree-year-cell {
    position: relative;
    z-index: 1;
}

/* Single continuous rectangle for rockets/nuclear section, aligned at top of section (from 1940 row) */
.technologies-tree-rockets-nuclear-strip-bg {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background: rgba(28, 21, 21, 0.35);
    border-radius: 0 6px 6px 0;
}

/* Two-section engineering layout: left = main tree (all years), right = rockets/nuclear with own year axis, both aligned at top */
.technologies-tree-level-grid--two-section {
    align-items: flex-start;
}

.technologies-tree-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.technologies-tree-cols {
    position: relative;
    z-index: 1;
}

/* Infantry/Support: fixed column width and center content so year label and nodes align under the year */
.technologies-tree-cols .technologies-tree-col {
    align-items: center;
    width: 118px;
    min-width: 118px;
    max-width: 118px;
    box-sizing: border-box;
}

.technologies-tree-cols .technologies-tree-col .technologies-tree-node {
    margin-left: auto;
    margin-right: auto;
}

/* Sticky year labels: stay visible when scrolling the tree */
.technologies-tree-header-row {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    background: transparent;
    padding-bottom: 4px;
    margin-bottom: 0;
}

/* Year labels in header row: same width as year cells below, text centered */
.technologies-tree-header-row .technologies-tree-year-label {
    display: block;
    text-align: center;
    box-sizing: border-box;
}

/* Horizontal trees (infantry/support): year sits in a fixed-width wrapper so it centers over the nodes (same idea as vertical trees) */
.technologies-tree-col-year-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 4px;
}

.technologies-tree-col-year-wrapper .technologies-tree-year {
    margin-bottom: 0;
}

/* Level rows (level grid): stretch cells to row height so cell content can be centered vertically */
.technologies-tree-level-row {
    align-items: stretch;
}

/* MTG naval: compact gap between 1922, 1923, 1924 columns (no extra spacing) */
#technologies-modal .technologies-tree[data-area="MTG_naval"] .technologies-tree-level-row .technologies-tree-year-cell[data-year="1923"],
#technologies-modal .technologies-tree[data-area="MTG_naval"] .technologies-tree-level-row .technologies-tree-year-cell[data-year="1924"],
#technologies-modal .technologies-tree[data-area="MTG_naval"] .technologies-tree-header-row .technologies-tree-year-header[data-year="1923"],
#technologies-modal .technologies-tree[data-area="MTG_naval"] .technologies-tree-header-row .technologies-tree-year-header[data-year="1924"] {
    margin-left: -6px;
}

/* Vertical layout (armor, artillery, engineering, industry): year labels on the left, one row per year */
.technologies-tree-level-grid--vertical .technologies-tree-year-row {
    align-items: center;
    overflow: visible;
}

/* Vertical trees (artillery, armor, engineering, industry): year label column - narrow, consistent width (4 digits), text centered */
#technologies-modal .technologies-tree-level-grid--vertical .technologies-tree-year-row-label,
#technologies-modal .technologies-tree-level-grid--vertical .technologies-tree-year-header.technologies-tree-year-row-label {
    flex-shrink: 0;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    text-align: center !important;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* Industry: tighter horizontal spacing between columns */
.technologies-tree-level-grid--vertical.technologies-tree-level-grid--industry .technologies-tree-year-row {
    gap: 4px;
}
.technologies-tree-level-grid--vertical.technologies-tree-level-grid--industry .technologies-tree-year-cell {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}
.technologies-tree-level-grid--vertical.technologies-tree-level-grid--industry .technologies-tree-year-row-label {
    min-width: 40px !important;
    width: 40px !important;
    max-width: 40px !important;
}

/* Engineering: unlabeled row for radio/mechanical_computing - hide label, minimal height between 1936 and 1937 */
.technologies-tree-level-grid--vertical .technologies-tree-year-row--compact {
    min-height: 0;
    margin-top: -6px;
    margin-bottom: -6px;
}
.technologies-tree-level-grid--vertical .technologies-tree-year-row--compact .technologies-tree-year-header {
    visibility: hidden;
}

.technologies-tree-level-header-cell {
    min-height: 0;
    font-weight: 600;
    color: #a0a0a0;
}

/* Year labels: non-interactive labels to relate technologies to a given year */
.technologies-tree-year-label {
    margin-bottom: 4px;
}

.technologies-tree-level-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Technologies tree node: image front and center, label below (same width/height across trees). Compact desktop. Above connector lines. */
.technologies-tree-node {
    position: relative;
    z-index: 2;
    width: 118px;
    min-width: 118px;
    max-width: 118px;
    height: 88px;
    min-height: 88px;
    max-height: 88px;
    flex: 0 0 118px;
    box-sizing: border-box;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

.technologies-tree-node-requires-project {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 2px;
    z-index: 3;
    cursor: default;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

.technologies-tree-node-requires-project-icon {
    width: 10px;
    height: 10px;
    object-fit: contain;
    opacity: 0.95;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* Placement overrides: shift node within its column (e.g. toward end of 1936 column) */
.technologies-tree-node--place-end {
    margin-left: 36px;
}

/* Single control for all “place-end” nodes (engineering: radio, mechanical_computing; industry: concentrated/dispersed, synth_oil, fuel_refining, construction1, excavation1). Increase padding-left to move them further right. */
.technologies-tree-year-cell--place-end {
    justify-content: center !important;
    margin-left: 0;
    box-sizing: border-box;
}

.technologies-tree-level-grid--vertical .technologies-tree-node--place-end {
    margin-left: 0;
    margin-top: 10px;
}

/* Don't add margin-top when using align-bottom (engineering radio/mechanical computing) */
.technologies-tree-level-grid--vertical .technologies-tree-node--place-end.technologies-tree-node--align-bottom {
    margin-top: 0;
}

/* Engineering 1936 hierarchy: nudge parent up (children are on separate Summer 1936 row) */
#technologies-modal .technologies-tree-level-grid.technologies-tree-level-grid--vertical .technologies-tree-year-cell .technologies-tree-node--align-top {
    margin-top: -20px !important;
    margin-bottom: 0 !important;
}

#technologies-modal .technologies-tree-level-grid.technologies-tree-level-grid--vertical .technologies-tree-year-cell .technologies-tree-node--align-bottom {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

.technologies-tree-node-icon-container {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.technologies-tree-node-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    opacity: 0.85;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.technologies-tree-node.selected .technologies-tree-node-icon {
    filter: drop-shadow(0 0 6px rgba(78, 126, 95, 0.6));
    opacity: 1;
}

/* Path order badge: selection order counter at top-left corner, sitting slightly outside the node */
.path-order-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #1e1e1e;
    background: #b8e0b8;
    border: 1px solid #c8a96e;
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Allow badge/bubble to sit outside without being clipped (override inline overflow on tech nodes) */
.technologies-tree-node:has(.path-order-badge),
.technologies-tree-node:has(.doctrine-focus-bubble),
.sub-doctrine-node:has(.path-order-badge),
.sf-sub-doctrine-node:has(.path-order-badge),
.special-forces-grand-card:has(.path-order-badge),
.grand-doctrine-option:has(.path-order-badge) {
    overflow: visible !important;
}

/* ── Scan Path toggle button ─────────────────────────────────────────────────
   Sits in the doctrine/research modal header next to the ⋯ menu. Toggles the
   Scan Path strip below the header. Magenta-accented when the strip is open. */
.doctrine-focus-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: #222;
    border: 1px solid #3d3d3d;
    border-radius: 3px;
    color: #888;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.doctrine-focus-toggle-btn:hover {
    background: #2b2b2b;
    border-color: rgba(210, 90, 195, 0.4);
    color: #cfa9c4;
}

.doctrine-focus-toggle-btn[aria-pressed="true"] {
    background: rgba(210, 90, 195, 0.12);
    border-color: rgba(210, 90, 195, 0.5);
    color: #e6b3cf;
}

.doctrine-focus-toggle-btn__pro {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 2px;
    color: #d9a8cc;
    background: rgba(210, 90, 195, 0.14);
    border: 1px solid rgba(210, 90, 195, 0.4);
}

.doctrine-focus-toggle-btn[aria-pressed="true"] .doctrine-focus-toggle-btn__pro {
    background: linear-gradient(145deg, #3c1640 0%, #62205a 100%);
    color: #f2cae8;
    border-color: rgba(210, 90, 195, 0.6);
}

/* ── Scan Path strip ─────────────────────────────────────────────────────────
   A full-width strip between the modal header and the body tabs, toggled by the
   header button (hidden by default). PRO badge + "Scan Path" anchored left; the
   design picker + stat dropdown on the right. Neutral at rest; magenta tint +
   border when a stat is active. On irrelevant tabs (--disabled) it greys out. */
.doctrine-focus {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    background: #1c1c1c;
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
    transition: background 0.18s ease, border-color 0.18s ease;
    min-height: 36px;
}

/* Left side: PRO badge + sonar icon + feature name */
.doctrine-focus__feature {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.doctrine-focus__feature-name {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.doctrine-focus.is-active .doctrine-focus__feature-name {
    color: #d0d0d0;
}

/* Right side: template name + select grouped on the right */
.doctrine-focus__controls {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    min-width: 0;
}

.doctrine-focus[hidden] {
    display: none;
}

.doctrine-focus.is-active {
    background: rgba(210, 90, 195, 0.065);
    border-bottom-color: rgba(210, 90, 195, 0.28);
}

/* PRO pill — same dark-magenta brand as the picker sort badge. */
.doctrine-focus__pro {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 2px;
    color: #f2cae8;
    background: linear-gradient(145deg, #3c1640 0%, #62205a 100%);
    border: 1px solid rgba(210, 90, 195, 0.5);
    text-shadow: 0 1px 0 rgba(20, 4, 12, 0.85);
    flex-shrink: 0;
}

/* Binoculars / target icon */
.doctrine-focus__icon {
    color: #555;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.doctrine-focus.is-active .doctrine-focus__icon {
    color: #d080c0;
}

/* "Optimise {name} for" label */
.doctrine-focus__label {
    font-size: 12px;
    color: #777;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Design/template name within the label */
.doctrine-focus__target {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: #aaa;
    font-weight: 600;
}

.doctrine-focus.is-active .doctrine-focus__label {
    color: #999;
}

.doctrine-focus.is-active .doctrine-focus__target {
    color: #e6b3cf;
}

/* Inline stat dropdown — transparent/neutral at rest */
.doctrine-focus__select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: #888;
    border: 1px solid #333;
    border-radius: 3px;
    font-size: 12px;
    font-family: inherit;
    min-height: 32px;
    padding: 5px 26px 5px 10px;
    cursor: pointer;
    width: clamp(180px, 14vw, 220px);
    outline: none;
    transition: border-color 0.15s ease, color 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.doctrine-focus__select:hover {
    border-color: rgba(210, 90, 195, 0.45);
    color: #ccc;
}

.doctrine-focus.is-active .doctrine-focus__select {
    color: #f2cae8;
    border-color: rgba(210, 90, 195, 0.5);
    font-weight: 600;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23d25ac3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Small "on" connective between the design picker and the stat select. */
.doctrine-focus__on {
    font-size: 12px;
    color: #777;
    flex-shrink: 0;
}

.doctrine-focus.is-active .doctrine-focus__on {
    color: #999;
}

/* ── Scan Path design picker (custom dropdown) ────────────────────────────────
   Replaces the native design <select> so each saved division shows its icon and
   infeasible ones (units unavailable under their own research) can be flagged. */
.doctrine-focus__design-picker {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.doctrine-focus__design-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: clamp(210px, 18vw, 260px);
    min-height: 32px;
    background: transparent;
    color: #c8b3c2;
    border: 1px solid #333;
    border-radius: 3px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 9px 4px 5px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.doctrine-focus__design-trigger:hover,
.doctrine-focus.is-active .doctrine-focus__design-trigger {
    border-color: rgba(210, 90, 195, 0.45);
    color: #e6b3cf;
}

.doctrine-focus__design-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.doctrine-focus__design-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doctrine-focus__design-suffix {
    color: #7d7d7d;
    font-weight: 500;
    flex-shrink: 0;
}

.doctrine-focus__design-caret {
    color: #666;
    flex-shrink: 0;
    margin-left: 1px;
    transition: color 0.15s ease;
}

.doctrine-focus.is-active .doctrine-focus__design-caret,
.doctrine-focus__design-picker.is-open .doctrine-focus__design-caret {
    color: #d25ac3;
}

/* Selected target whose stats can't be calculated — amber, like invalid baselines. */
.doctrine-focus__design-trigger.is-invalid {
    border-color: rgba(212, 160, 60, 0.6);
    color: #e2b869;
}

.doctrine-focus__design-warn {
    color: #e0a63a;
    flex-shrink: 0;
}

/* Dropdown popup */
.doctrine-focus__design-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 200px;
    max-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
    background: #1c1c1c;
    border: 1px solid #3a3a3a;
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.doctrine-focus__design-menu[hidden] {
    display: none;
}

.doctrine-focus__design-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 7px;
    background: none;
    border: none;
    border-radius: 3px;
    font: inherit;
    font-size: 12px;
    color: #d8d8d8;
    text-align: left;
    cursor: pointer;
}

.doctrine-focus__design-option:hover {
    background: rgba(210, 90, 195, 0.12);
    color: #f2cae8;
}

.doctrine-focus__design-option.is-selected {
    background: rgba(210, 90, 195, 0.16);
    color: #f2cae8;
}

.doctrine-focus__design-option-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.doctrine-focus__design-option-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doctrine-focus__design-option .doctrine-focus__design-suffix {
    flex: 0 0 auto;
}

/* Infeasible designs (sorted last by JS): muted, amber warning glyph. */
.doctrine-focus__design-option.is-invalid {
    color: #9a9a9a;
}

.doctrine-focus__design-option.is-invalid:hover {
    background: rgba(212, 160, 60, 0.12);
    color: #e2b869;
}

.doctrine-focus__design-option.is-invalid .doctrine-focus__design-warn {
    margin-left: auto;
}

/* Dropdown popup (browser-rendered) — dark-theme list + optgroup headers. */
.doctrine-focus__select optgroup {
    background: #1c1c1c;
    color: #c8a96e;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 11px;
}

.doctrine-focus__select option {
    background: #1c1c1c;
    color: #d8d8d8;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* Non-Pro: the strip is still full-width but the whole inner row is a button
   that opens the Pro upgrade modal on click. */
.doctrine-focus--locked {
    cursor: pointer;
}

.doctrine-focus__locked {
    display: flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

/* Upgrade CTA that appears on the right for non-Pro */
.doctrine-focus__upgrade {
    margin-left: auto;
    font-size: 11px;
    color: #b87faa;
    white-space: nowrap;
    opacity: 0.75;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.doctrine-focus--locked:hover .doctrine-focus__upgrade {
    opacity: 1;
    color: #f2cae8;
}

.doctrine-focus--locked .doctrine-focus__pro {
    background: rgba(210, 90, 195, 0.1);
    border-color: rgba(210, 90, 195, 0.35);
    text-shadow: none;
    color: #d9a8cc;
}

.doctrine-focus--locked:hover .doctrine-focus__pro {
    background: linear-gradient(145deg, #3c1640 0%, #62205a 100%);
    border-color: rgba(210, 90, 195, 0.6);
    color: #f2cae8;
}

/* Fake select shown in the non-Pro bar */
.doctrine-focus__select--mock {
    font-size: 12px;
    color: #555;
    border: 1px solid #2e2e2e;
    border-radius: 3px;
    padding: 3px 8px;
    background: transparent;
    user-select: none;
}

/* Greyed-out state: strip stays visible on every tab, but on tabs whose
   doctrines don't affect the design being edited it's muted and inert. The
   slot stays hoverable so its `title` tooltip (the reason) can show. */
.doctrine-focus--disabled {
    opacity: 0.38;
    filter: grayscale(0.6);
    cursor: not-allowed;
}

.doctrine-focus--disabled .doctrine-focus__select,
.doctrine-focus--disabled .doctrine-focus__locked {
    pointer-events: none;
}

.doctrine-focus--disabled:hover {
    background: #1c1c1c;
    border-bottom-color: #2a2a2a;
}

@media (max-width: 640px) {
    /* On phones the strip opens as a compact stacked control: feature label on
       top, then large tap targets for design + stat. This keeps long design and
       custom-indicator names from pushing the modal wider than the viewport. */
    .doctrine-focus {
        flex-wrap: wrap;
        gap: 6px 8px;
        padding: 8px 10px 9px;
        align-items: flex-start;
    }
    .doctrine-focus__feature {
        min-width: 0;
    }
    .doctrine-focus__controls {
        margin-left: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        width: 100%;
        min-width: 0;
    }
    .doctrine-focus__label,
    .doctrine-focus__on {
        display: none;
    }
    .doctrine-focus__design-picker,
    .doctrine-focus__design-mount {
        width: 100%;
        min-width: 0;
    }
    .doctrine-focus__target {
        max-width: 100%;
    }
    .doctrine-focus__design-trigger {
        justify-content: flex-start;
        width: 100%;
        max-width: none;
        min-height: 34px;
        padding: 5px 8px 5px 5px;
    }
    .doctrine-focus__design-name {
        min-width: 0;
        flex: 1 1 auto;
    }
    .doctrine-focus__select {
        width: 100%;
        max-width: none;
        min-height: 34px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .doctrine-focus__design-menu {
        left: auto;
        right: 0;
        width: 100%;
        min-width: 0;
        max-width: min(420px, calc(100vw - 28px));
        max-height: min(320px, 48vh);
    }
    .doctrine-focus__locked {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .doctrine-focus__locked .doctrine-focus__controls {
        flex: 1 1 100%;
    }
    .doctrine-focus__upgrade {
        margin-left: 0;
        white-space: normal;
    }
    .doctrine-focus__select--mock {
        min-height: 30px;
        display: inline-flex;
        align-items: center;
    }
}

.doctrine-focus-bubble {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    border-radius: 3px;
    color: #f2cae8;
    background: linear-gradient(145deg, #3c1640 0%, #62205a 100%);
    border: 1px solid rgba(210, 90, 195, 0.55);
    text-shadow: 0 1px 0 rgba(20, 4, 12, 0.85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.doctrine-focus-bubble--negative {
    background: linear-gradient(145deg, #2a1119 0%, #3d1726 100%);
    border-color: rgba(180, 90, 120, 0.4);
    color: #c89aaa;
}

.doctrine-focus-bubble--zero,
.doctrine-focus-bubble--missing {
    background: rgba(210, 90, 195, 0.08);
    border-color: rgba(210, 90, 195, 0.25);
    color: #b89aa3;
    text-shadow: none;
    box-shadow: none;
}

/* The single biggest booster in the visible tab - brighter fill + glow so the
   best pick for the chosen stat reads at a glance. */
.doctrine-focus-bubble--top {
    background: linear-gradient(145deg, #7a2a6f 0%, #b03ca0 100%);
    border-color: #e6b3cf;
    color: #fff0fa;
    box-shadow: 0 0 0 2px rgba(210, 90, 195, 0.25), 0 0 10px rgba(210, 90, 195, 0.55);
}

/* Winner node: the option/node holding the top bubble in its branch/view gets a
   magenta ring + glow so the "best pick" stands out as a whole, not just its
   bubble. A box-shadow ring follows each node's own border-radius and adds no
   layout shift. Scoped to the node types the focus controls annotate. */
.grand-doctrine-option.doctrine-focus-winner,
.sub-doctrine-node.doctrine-focus-winner,
.sf-sub-doctrine-node.doctrine-focus-winner,
.technologies-tree-node.doctrine-focus-winner {
    box-shadow: 0 0 0 2px #d25ac3, 0 0 12px rgba(210, 90, 195, 0.55);
    position: relative;
    z-index: 2;
}

/* Research tree: reposition bubble as a corner badge (top-right, slightly outside)
   so it doesn't obscure the node icon, which varies in size across the tree. */
.technologies-tree-node .doctrine-focus-bubble {
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
}

.technologies-tree-node-label {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    box-sizing: border-box;
}

.technologies-tree-node-icon-container .cell-loading-spinner {
    width: 32px;
    height: 32px;
}

/* Small nodes: icon only, no text, slightly smaller (game-style). Scaled proportionally. */
.technologies-tree-node--small .technologies-tree-node-icon-container {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

.technologies-tree-node--small .technologies-tree-node-icon {
    width: 44px;
    height: 44px;
}

.technologies-tree-node--small .technologies-tree-node-icon-container .cell-loading-spinner {
    width: 24px;
    height: 24px;
}

.technologies-tree-node--small .technologies-tree-node-label {
    display: none;
}

/* XSmall nodes: smallest size, icon only; top-right of parent, edging outside parent node */
.technologies-tree-node--xsmall .technologies-tree-node-icon-container {
    width: 25px;
    height: 25px;
    min-width: 25px;
}
.technologies-tree-node--xsmall .technologies-tree-node-icon,
.technologies-tree-node-icon--xsmall {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    object-fit: contain;
}
.technologies-tree-node--xsmall .technologies-tree-node-icon-container .cell-loading-spinner {
    width: 14px;
    height: 14px;
}
.technologies-tree-node--xsmall .technologies-tree-node-label {
    display: none;
}
.technologies-tree-node-with-xsmall {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    overflow: visible;
    box-sizing: border-box;
}
/* Keep parent node size stable so xsmall position doesn't shift on select/toggle */
.technologies-tree-node-with-xsmall > .technologies-tree-node:first-child {
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
}
.technologies-tree-node-with-xsmall > .technologies-tree-node--xsmall {
    box-sizing: border-box;
}

/* Technologies tree node: disabled when parent not selected (progressive availability, same as doctrine/special forces) */
.technologies-tree-node.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    border: 2px solid #222222 !important;
    background: #1c1c1c !important;
}

.technologies-tree-node.disabled .technologies-tree-node-label {
    color: #555;
}

.technologies-tree-node.disabled:hover {
    background: #1c1c1c !important;
    border-color: #222222 !important;
    box-shadow: none;
}

/* Mobile: Technologies tree (research) – slightly larger nodes for better tap/readability */
@media (max-width: 768px) {
    /* Research area: horizontal scrollable tabs (same as desktop), swipe to scroll; dropdown hidden */
    #technologies-modal .technologies-area-dropdown-wrap {
        display: none;
    }
    #technologies-modal .technologies-tabs-row .doctrine-type-toggle#technologies-tabs {
        display: flex !important;
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
        /* Inset shadows so horizontal tab strip feels contained */
        box-shadow: inset 12px 0 14px -8px rgba(0, 0, 0, 0.55), inset -12px 0 14px -8px rgba(0, 0, 0, 0.55);
    }
    #technologies-modal .technologies-tabs-row .doctrine-type-toggle#technologies-tabs::-webkit-scrollbar {
        display: none;
    }
    /* Tech tree: keep scrollbar visible on mobile so resized windows can still scroll horizontally */
    #technologies-modal #technologies-tab-content {
        -webkit-overflow-scrolling: touch;
    }
    #technologies-modal .technologies-tabs-row .doctrine-type-toggle#technologies-tabs .doctrine-type-btn {
        flex: 0 0 auto;
        min-width: 110px;
        width: auto;
    }
    #technologies-modal .technologies-area-dropdown-wrap #technologies-area-select {
        min-height: 40px;
        height: 40px;
        box-sizing: border-box;
    }
    #technologies-modal .technologies-tree-wrap {
        gap: 8px !important;
        padding: 6px 4px !important;
    }

    #technologies-modal .technologies-tree-level-grid {
        gap: 6px !important;
    }

    #technologies-modal .technologies-tree-level-row,
    #technologies-modal .technologies-tree-header-row {
        gap: 8px !important;
        min-height: 78px !important;
    }

    /* Year header: fixed width so columns align with year cells below (override JS inline width) */
    #technologies-modal .technologies-tree-year-header {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        font-size: 9px !important;
        text-align: center !important;
    }
    /* Vertical trees: keep narrow year column (same as desktop), not 96px */
    #technologies-modal .technologies-tree-level-grid--vertical .technologies-tree-year-row-label,
    #technologies-modal .technologies-tree-level-grid--vertical .technologies-tree-year-header.technologies-tree-year-row-label {
        width: 40px !important;
        min-width: 32px !important;
        max-width: 32px !important;
    }

    #technologies-modal .technologies-tree-cols {
        gap: 8px !important;
    }

    #technologies-modal .technologies-tree-col {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        gap: 4px !important;
    }

    #technologies-modal .technologies-tree-col-year-wrapper {
        width: 96px !important;
        min-width: 96px !important;
    }

    #technologies-modal .technologies-tree-year {
        font-size: 9px !important;
        margin-bottom: 2px !important;
    }

    /* Research nodes: slightly bigger for less cramped feel */
    #technologies-modal .technologies-tree-node {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;
        flex: 0 0 88px !important;
        padding: 4px 5px !important;
        gap: 4px !important;
    }

    #technologies-modal .technologies-tree-node-icon-container {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    #technologies-modal .technologies-tree-node-icon {
        width: 40px !important;
        height: 40px !important;
    }

    #technologies-modal .technologies-tree-node-icon-container .cell-loading-spinner {
        width: 22px !important;
        height: 22px !important;
    }

    #technologies-modal .technologies-tree-node-label {
        font-size: 9px !important;
        line-height: 1.2 !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }

    /* Small nodes (icon-only) on mobile */
    #technologies-modal .technologies-tree-node--small {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        flex: 0 0 52px !important;
        padding: 4px !important;
    }

    #technologies-modal .technologies-tree-node--small .technologies-tree-node-icon-container {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }

    #technologies-modal .technologies-tree-node--small .technologies-tree-node-icon {
        width: 30px !important;
        height: 30px !important;
    }

    #technologies-modal .technologies-tree-node--small .technologies-tree-node-icon-container .cell-loading-spinner {
        width: 18px !important;
        height: 18px !important;
    }
    /* xsmall wrapper: match parent node size on mobile so xsmall sits on parent's top-right (same as desktop) */
    #technologies-modal .technologies-tree-node-with-xsmall {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;
    }
    #technologies-modal .technologies-tree-node-with-xsmall:has(> .technologies-tree-node--small:first-child) {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
    }

    #technologies-modal .technologies-tree-node--xsmall {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
    }
    #technologies-modal .technologies-tree-node--xsmall .technologies-tree-node-icon-container,
    #technologies-modal .technologies-tree-node--xsmall .technologies-tree-node-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }

    /* Year cell: fixed width to match year header so columns align (override JS inline width) */
    #technologies-modal .technologies-tree-year-cell {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        gap: 4px !important;
    }

    #technologies-modal .technologies-tree-connector {
        margin: 0 !important;
    }

    #technologies-modal .technologies-tree-level-group {
        gap: 4px !important;
    }

    #technologies-modal #technologies-tab-content {
        min-height: 280px !important;
    }
}

/* Doctrine Type Toggle */
.doctrine-type-toggle {
    display: flex;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100%;
    gap: 2px;
    background: #1e1e1e;
    border-radius: 6px;
    padding: 2px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    box-sizing: border-box;
    align-items: stretch;
    min-height: 36px;
}

.doctrine-type-btn {
    flex: 1 1 50% !important;
    min-width: 0;
    width: 50%;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: #b0b0b0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    line-height: 1.4;
    white-space: nowrap;
    margin: 0;
}

/* Research modal: tabs row - tech tabs 90%, Projects is a small circular button */
.technologies-tabs-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin-bottom: 0;
}

/* Mobile-only research area dropdown (shown via media query below) */
.technologies-area-dropdown-wrap {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    align-items: stretch;
}

#technologies-area-select {
    width: 100%;
    min-width: 0;
    padding: 8px 12px;
    font-size: 13px;
    color: #e0e0e0;
    background: #1e1e1e;
    border: 1px solid #222222;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aaa' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

#technologies-area-select:hover {
    border-color: #3d3d3d;
    background-color: #222;
}

#technologies-area-select:focus {
    outline: none;
    border-color: #5a7a5a;
    box-shadow: 0 0 0 2px rgba(200, 169, 110, 0.25);
}

.technologies-tabs-row .doctrine-type-toggle {
    flex: 1 1 90%;
    min-width: 0;
    width: 90% !important;
    max-width: 90%;
}

/* Research modal: desktop - horizontally scrollable tab strip */
#technologies-modal .technologies-tabs-row .doctrine-type-toggle#technologies-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #3d3d3d #1e1e1e;
}

#technologies-modal .technologies-tabs-row .doctrine-type-toggle#technologies-tabs::-webkit-scrollbar {
    height: 3px;
}

#technologies-modal .technologies-tabs-row .doctrine-type-toggle#technologies-tabs::-webkit-scrollbar-track {
    background: #1e1e1e;
}

#technologies-modal .technologies-tabs-row .doctrine-type-toggle#technologies-tabs::-webkit-scrollbar-thumb {
    background: #3d3d3d;
    border-radius: 2px;
}

#technologies-modal .technologies-tabs-row .doctrine-type-toggle#technologies-tabs .doctrine-type-btn {
    flex: 0 0 auto;
    min-width: 100px;
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: 0.4px;
}

.technologies-projects-tab-wrap {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Circular icon-only Projects button (overrides .doctrine-type-btn flex/width) */
.projects-btn-round {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 50%;
    flex: 0 0 40px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1e1e1e;
    border: 1px solid rgb(0, 0, 0);
}

.projects-btn-round .technologies-projects-tab-icon {
    margin-right: 0;
    width: 20px;
    height: 20px;
    opacity: 0.92;
}
.projects-btn-round:hover .technologies-projects-tab-icon {
    opacity: 1;
}
.projects-btn-round.active .technologies-projects-tab-icon {
    opacity: 1;
}

.projects-btn-round:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #3d3d3d;
}

.projects-btn-round.active {
    background: #2a4633;
    border-color: #4e7e5f;
}

/* Visual cue: green border when some special projects are selected */
.projects-btn-round.has-special-projects-selected {
    border-color: #4e7e5f;
    box-shadow: 0 0 0 1px rgba(78, 126, 95, 0.4);
}
.projects-btn-round.has-special-projects-selected:hover {
    border-color: #5e8e6f;
}
.projects-btn-round.has-special-projects-selected.active {
    border-color: #4e7e5f;
}

.technologies-projects-tab-wrap .doctrine-type-btn:not(.projects-btn-round) {
    flex: 1 1 auto;
    width: 100%;
}

.technologies-tab-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
}

.technologies-projects-tab-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    flex-shrink: 0;
    object-fit: contain;
}

.doctrine-type-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #d0d0d0;
}

.doctrine-type-btn.active {
    background: #2a4633;
    color: #a0d0b2;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(78, 126, 95, 0.4);
}

.doctrine-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    min-height: 0; /* Allow flex children to shrink */
    flex: 1; /* Take available space */
}

#land-doctrine-content {
    display: flex;
}

#special-forces-doctrine-content {
    display: none;
}

.doctrine-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative; /* Create positioning context for sticky children */
}

.doctrine-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #3d3d3d;
    padding-bottom: 8px;
}

/* Grand Doctrine Grid */
.grand-doctrine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

/* Always clickable – clear interactive cue */
.grand-doctrine-option {
    position: relative;
    padding: 10px;
    background: #272727;
    border: 2px solid #5e5e5e;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    opacity: 0.85;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.grand-doctrine-option:hover {
    background: #2e2e2e;
    border-color: #707070;
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.grand-doctrine-option.selected {
    background: #2a4633;
    border-color: #4e7e5f;
    box-shadow: 0 0 10px rgba(78, 126, 95, 0.3);
    opacity: 1;
}

.grand-doctrine-icon-container {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4px auto;
}

.grand-doctrine-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin: 0;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    opacity: 0.6;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.grand-doctrine-option.selected .grand-doctrine-icon {
    filter: drop-shadow(0 0 8px rgba(78, 126, 95, 0.6));
    opacity: 1;
}

.grand-doctrine-option-name {
    font-size: 12px;
    font-weight: 600;
    color: #a0a0a0;
    text-transform: capitalize;
    margin-top: 4px;
    line-height: 1.2;
}

.grand-doctrine-option.selected .grand-doctrine-option-name {
    color: #a0d0b2;
}

/* Sub-Doctrine Container */
.sub-doctrine-container {
    display: flex;
    flex-direction: row;
    gap: 15px;
    overflow-y: hidden;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: #3d3d3d #1e1e1e;
    position: sticky;
    bottom: 0;
    background: #1c1c1c; /* Match modal background so content doesn't show through */
    z-index: 10;
    margin-top: auto; /* Push to bottom of flex container */
    margin-bottom: 0;
    padding-bottom: 20px; /* Extra padding to account for scrollbar */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow to separate from content */
}

.sub-doctrine-container::-webkit-scrollbar {
    width: auto;
    height: 8px !important;
}

.sub-doctrine-container::-webkit-scrollbar-track {
    background: #1e1e1e !important;
    border-radius: 4px;
}

.sub-doctrine-container::-webkit-scrollbar-thumb {
    background: #3d3d3d !important;
    border-radius: 4px;
}

.sub-doctrine-container::-webkit-scrollbar-thumb:hover {
    background: #474747 !important;
}

.sub-doctrine-column {
    min-width: 200px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #1c1c1c;
    border: 2px solid #222222;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sub-doctrine-column-title {
    font-size: 12px;
    font-weight: 600;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 12px;
    background: #1c1c1c;
    border-bottom: 1px solid #3d3d3d;
    margin-bottom: 12px;
    text-align: center;
}

.sub-doctrine-nodes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Clickable when a grand doctrine is selected */
.sub-doctrine-node {
    position: relative;
    padding: 12px;
    background: #272727;
    border: 2px solid #5e5e5e;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    justify-content: center;
    opacity: 0.85;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.sub-doctrine-node:hover {
    background: #2e2e2e;
    border-color: #707070;
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Disabled until a grand doctrine is selected – darker border = non-interactive */
.sub-doctrine-node.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    border: 2px solid #2e2e2e;
    background: #222222;
}

.sub-doctrine-node.disabled .sub-doctrine-node-name {
    color: #555;
}

.sub-doctrine-node.disabled:hover {
    background: #222222;
    border-color: #2e2e2e;
    box-shadow: none;
}

/* Special forces tree uses locked instead of disabled for blocked nodes */
.sub-doctrine-node.locked {
    opacity: 0.6;
    cursor: not-allowed;
    border: 2px solid #2e2e2e;
    background: #222222;
}

.sub-doctrine-node.locked .sub-doctrine-node-name {
    color: #555;
}

.sub-doctrine-node.locked:hover {
    background: #222222;
    border-color: #2e2e2e;
    box-shadow: none;
}

.sub-doctrine-node.selected {
    background: #2a4633;
    border-color: #4e7e5f;
    box-shadow: 0 0 8px rgba(78, 126, 95, 0.3);
    opacity: 1;
}

.sub-doctrine-icon-container {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.sub-doctrine-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 6px;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    opacity: 0.6;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.sub-doctrine-node.selected .sub-doctrine-icon {
    filter: drop-shadow(0 0 6px rgba(78, 126, 95, 0.6));
    opacity: 1;
}

.sub-doctrine-node-name {
    font-size: 12px;
    font-weight: 500;
    color: #a0a0a0;
    text-transform: capitalize;
    margin-top: 4px;
}

.sub-doctrine-node.selected .sub-doctrine-node-name {
    color: #a0d0b2;
}

.sub-doctrine-tiers {
    display: none;
    gap: 6px;
    margin-top: 6px;
    justify-content: center;
    align-items: center;
    position: relative;
}

.sub-doctrine-node.selected .sub-doctrine-tiers {
    display: flex;
}

.sub-doctrine-node.selected .sub-doctrine-tiers::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background: linear-gradient(to right, 
        rgba(200, 169, 110, 0.3) 0%, 
        rgba(200, 169, 110, 0.5) 20%, 
        rgba(200, 169, 110, 0.5) 80%, 
        rgba(200, 169, 110, 0.3) 100%);
    z-index: 0;
    border-radius: 1px;
}

.sub-doctrine-tier-btn {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 600;
    background: #1e1e1e;
    border: 1px solid #222222;
    border-radius: 3px;
    color: #a0a0a0;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0.6;
    position: relative;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.sub-doctrine-node.selected .sub-doctrine-tier-btn {
    opacity: 1;
}

.sub-doctrine-tier-btn:hover {
    background: #1c1c1c;
    border-color: #474747;
    color: #999;
}

.sub-doctrine-tier-btn.active {
    background: #2a4633;
    border-color: #4e7e5f;
    color: #a0d0b2;
    box-shadow: 0 0 4px rgba(78, 126, 95, 0.4);
}

.sub-doctrine-tier-btn.active:hover {
    background: #3a5645;
    border-color: #5e8e6f;
}

.sub-doctrine-tier-0 {
    width: 12px;
    height: 12px;
    min-width: 12px;
    padding: 0;
    border-radius: 50%;
    background: #1e1e1e;
    border: 1px solid #222222;
    opacity: 0.6;
}

.sub-doctrine-node.selected .sub-doctrine-tier-0 {
    opacity: 1;
}

.sub-doctrine-tier-0.active {
    background: #2a4633;
    border-color: #4e7e5f;
    box-shadow: 0 0 4px rgba(78, 126, 95, 0.4);
}

.sub-doctrine-tier-0:hover {
    background: #1c1c1c;
    border-color: #474747;
}

.sub-doctrine-tier-0.active:hover {
    background: #3a5645;
    border-color: #5e8e6f;
}

.doctrine-placeholder {
    padding: 40px;
    text-align: center;
    color: #a0a0a0;
    font-size: 14px;
    font-style: italic;
}

/* Special Forces Doctrine Tree */
.special-forces-grand-section {
    padding: 18px 20px 0;
}

.special-forces-section-kicker {
    color: #8f8f8f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.special-forces-grand-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.special-forces-grand-card {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-height: 116px;
    padding: 14px;
    background:
        linear-gradient(135deg, rgba(78, 126, 95, 0.16), transparent 45%),
        #1c1c1c;
    border: 1px solid #333;
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    user-select: none;
    -webkit-user-select: none;
}

.special-forces-grand-card:hover {
    border-color: #707070;
    background:
        linear-gradient(135deg, rgba(78, 126, 95, 0.22), transparent 45%),
        #232323;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.special-forces-grand-card.selected:hover {
    border-color: #6a9a7b;
    background:
        linear-gradient(135deg, rgba(78, 126, 95, 0.34), transparent 52%),
        #243a2c;
    box-shadow: 0 0 12px rgba(78, 126, 95, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.special-forces-grand-card.selected {
    border-color: #4e7e5f;
    background:
        linear-gradient(135deg, rgba(78, 126, 95, 0.28), transparent 52%),
        #203427;
    box-shadow: 0 0 10px rgba(78, 126, 95, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.special-forces-grand-icon-container {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #151515;
    border: 1px solid #333;
    border-radius: 6px;
}

.special-forces-grand-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

.special-forces-grand-body {
    min-width: 0;
}

.special-forces-grand-name {
    color: #d4d4d4;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 6px;
}

.special-forces-grand-desc {
    color: #8f8f8f;
    font-size: 11px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.special-forces-grand-meta,
.special-forces-node-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.special-forces-grand-meta span,
.special-forces-node-meta span,
.special-forces-node-meta {
    color: #b8a56d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.special-forces-grand-meta span,
.special-forces-node-meta span {
    padding: 2px 5px;
    background: rgba(184, 165, 109, 0.1);
    border: 1px solid rgba(184, 165, 109, 0.24);
    border-radius: 999px;
}

.special-forces-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Desktop: All trees side by side with horizontal scroll */
@media (min-width: 769px) {
    .special-forces-container {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: visible;
        position: relative;
        background: transparent;
        box-shadow: none;
        padding: 20px;
        gap: 10px;
        display: flex;
        align-items: stretch; /* Make all columns the same height */
    }
    
    .special-forces-selector {
        display: none; /* Hide selector on desktop - show all trees */
    }
    
    .special-forces-column {
        min-width: 280px;
        flex: 0 0 auto; /* Don't shrink, don't grow */
        display: flex;
        flex-direction: column;
        align-self: stretch; /* Stretch to match tallest column */
    }
}

/* Mobile: Keep original side-by-side view */
@media (max-width: 768px) {
    .special-forces-container {
        flex-direction: row;
        overflow-x: scroll;
        overflow-y: visible;
        padding-bottom: 10px;
        scrollbar-width: thin;
        scrollbar-color: #3d3d3d #1e1e1e;
        position: sticky;
        bottom: 0;
        background: #1c1c1c;
        z-index: 10;
        margin-top: auto;
        margin-bottom: 0;
        padding-bottom: 20px;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
        align-items: stretch; /* Make all columns the same height */
    }
    
    .special-forces-selector {
        display: none; /* Hide selector on mobile */
    }
    
    .special-forces-column {
        align-self: stretch; /* Stretch to match tallest column */
        min-width: 260px; /* Slightly smaller min-width on mobile */
    }
    
    .special-forces-tier .sf-sub-doctrine-node {
        min-width: 120px; /* Larger minimum on mobile for better visibility */
        flex: 1 1 0; /* Ensure nodes are flexible */
    }
    
    .special-forces-tier {
        width: 100%;
        min-width: 0; /* Allow tier to shrink */
    }
}

/* Scrollbar styling for desktop (horizontal scroll) */
@media (min-width: 769px) {
    .special-forces-container::-webkit-scrollbar {
        width: auto;
        height: 8px;
    }
    
    .special-forces-container::-webkit-scrollbar-track {
        background: #1e1e1e;
        border-radius: 4px;
    }
    
    .special-forces-container::-webkit-scrollbar-thumb {
        background: #3d3d3d;
        border-radius: 4px;
    }
    
    .special-forces-container::-webkit-scrollbar-thumb:hover {
        background: #474747;
    }
    
    .special-forces-container {
        scrollbar-width: thin;
        scrollbar-color: #3d3d3d #1e1e1e;
    }
}

/* Scrollbar styling only for mobile (horizontal scroll) */
@media (max-width: 768px) {
    .special-forces-container::-webkit-scrollbar {
        width: auto;
        height: 8px !important;
    }

    .special-forces-container::-webkit-scrollbar-track {
        background: #1e1e1e !important;
        border-radius: 4px;
    }

    .special-forces-container::-webkit-scrollbar-thumb {
        background: #3d3d3d !important;
        border-radius: 4px;
    }

    .special-forces-container::-webkit-scrollbar-thumb:hover {
        background: #474747 !important;
    }
}

.special-forces-column {
    min-width: 280px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #1c1c1c;
    border: 2px solid #222222;
    border-radius: 6px;
    padding: 15px;
    overflow: visible;
    max-width: 100%;
    box-sizing: border-box;
}

.special-forces-column-title {
    font-size: 12px;
    font-weight: 600;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 12px;
    background: #1c1c1c;
    border-bottom: 1px solid #3d3d3d;
    margin-bottom: 15px;
    text-align: center;
}

.special-forces-tree {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative; /* Allow absolute positioning of SVG overlay */
    width: 100%;
    box-sizing: border-box;
    flex: 1; /* Fill remaining space in column */
    min-height: 0; /* Allow flex item to shrink */
}

.special-forces-type-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.special-forces-type-title {
    color: #7f7f7f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

.special-forces-tree-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Behind nodes */
}

.special-forces-tier {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2; /* Above SVG lines */
    width: 100%;
    box-sizing: border-box;
    min-width: 0; /* Allow flex items to shrink below content size */
}

.special-forces-node {
    padding: 12px;
    background: #1e1e1e;
    border: 2px solid #3d3d3d;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    flex: 1 1 0; /* Grow and shrink equally, base size 0 */
    min-width: 100px; /* Reduced minimum width to allow better fitting */
    max-width: 100%; /* Don't exceed tier width */
    position: relative;
    z-index: 3; /* Above SVG lines and tiers */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    box-sizing: border-box;
    overflow: hidden; /* Prevent content from overflowing */
    word-wrap: break-word; /* Break long words if needed */
}

/* Desktop: Larger nodes and padding */
@media (min-width: 769px) {
    .special-forces-node {
        min-width: 110px; /* Reduced minimum to allow better fitting */
        padding: 16px;
    }
    
    .special-forces-node-icon {
        width: 48px;
        height: 48px;
    }
    
    .special-forces-node-name {
        font-size: 13px;
    }
}

/* High-resolution displays: Even larger nodes */
@media (min-width: 1920px) {
    .special-forces-node {
        min-width: 130px; /* Reduced minimum but still flexible */
        padding: 18px;
    }
    
    .special-forces-node-icon {
        width: 56px;
        height: 56px;
    }
    
    .special-forces-node-name {
        font-size: 14px;
    }
}

@media (min-width: 2560px) {
    .special-forces-node {
        min-width: 150px; /* Reduced minimum but still flexible */
        padding: 20px;
    }
    
    .special-forces-node-icon {
        width: 64px;
        height: 64px;
    }
    
    .special-forces-node-name {
        font-size: 15px;
    }
}

.special-forces-node:not(.sf-sub-doctrine-node):hover {
    background: #1c1c1c;
    border-color: #474747;
}

/* Clickable – clear interactive cue */
.special-forces-node.available {
    border: 2px solid #3d3d3d;
    cursor: pointer;
    opacity: 0.85;
}

.special-forces-node.available:not(.sf-sub-doctrine-node):hover {
    background: #1c1c1c;
    border-color: #4f4f4f;
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.special-forces-node.exclusive-alternative {
    border-color: #5b4f31;
}

/* Locked (prerequisites not met) – darker border = non-interactive */
.special-forces-node.locked {
    opacity: 0.6;
    cursor: not-allowed;
    border: 2px solid #222222;
    background: #1c1c1c;
}

.special-forces-node.locked:hover {
    background: #1c1c1c;
    border-color: #222222;
    box-shadow: none;
}

.special-forces-node.selected {
    background: #2a4633;
    border-color: #4e7e5f;
    box-shadow: 0 0 10px rgba(78, 126, 95, 0.3);
    opacity: 1;
}

/* Root nodes use the same styling as other nodes */

.special-forces-node-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.special-forces-node-icon-container {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.special-forces-node-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    opacity: 0.6;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.special-forces-node.selected .special-forces-node-icon {
    filter: drop-shadow(0 0 6px rgba(78, 126, 95, 0.6));
    opacity: 1;
}

/* Tier stars removed - no longer displaying tier indicators */

.special-forces-node-name {
    font-size: 11px;
    font-weight: 500;
    color: #a0a0a0;
    line-height: 1.3;
    margin-top: 6px;
    width: 100%;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.special-forces-node.selected .special-forces-node-name {
    color: #a0d0b2;
}

.special-forces-node.locked .special-forces-node-name {
    color: #555;
}

.special-forces-reward-pips {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 9px;
}

.special-forces-reward-pip {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #85784f;
    font-size: 9px;
    font-weight: 700;
    background: #171717;
    border: 1px solid #3b3421;
    border-radius: 50%;
}

.special-forces-node.selected .special-forces-reward-pip {
    color: #cbd8b8;
    border-color: #67845f;
    background: #26372a;
}

/* Mobile Responsive for Doctrine Modal */
@media (max-width: 768px) {
    .doctrine-modal-content {
        width: 95vw;
        max-height: 95vh;
    }

    .doctrine-modal-body {
        padding: 15px;
        gap: 15px;
    }

    .doctrine-type-toggle {
        padding: 2px;
        /* margin-bottom: 15px; */
        min-height: 32px;
    }

    .doctrine-type-btn {
        padding: 6px 10px;
        font-size: 11px;
        min-height: 28px;
    }

    /* Doctrine tabs on mobile: let each tab size to its label and fill the row,
       scrolling horizontally if they can't all fit — the same approach as the
       research modal's tab strip. The default fixed 4-up split (flex 1 1 50% +
       overflow:hidden) squeezed the tabs and clipped the long "Special Forces"
       label ("SPECIAL FORCE…") on a phone. flex-shrink:0 means a tab never
       shrinks below its text, so nothing is ever clipped. */
    #doctrine-modal .doctrine-type-toggle {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #doctrine-modal .doctrine-type-toggle::-webkit-scrollbar {
        display: none;
    }
    #doctrine-modal .doctrine-type-btn {
        flex: 1 0 auto !important;
        width: auto !important;
        min-width: 0;
        white-space: nowrap;
    }

    .grand-doctrine-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .grand-doctrine-option {
        padding: 8px;
    }
    
    .grand-doctrine-icon {
        width: 40px;
        height: 40px;
        margin: 0;
    }
    
    .grand-doctrine-option-name {
        font-size: 11px;
    }

    .sub-doctrine-container {
        flex-direction: column;
        gap: 20px;
        overflow-x: visible;
        overflow-y: visible; /* Remove overflow-y so sticky works with parent scroll */
        position: relative; /* Override sticky on mobile */
        margin-bottom: 0; /* Reset margin on mobile */
        padding-bottom: 15px; /* Reset padding on mobile */
    }

    .sub-doctrine-column {
        min-width: 100%;
        width: 100%;
        background: #1c1c1c;
        border: 2px solid #222222;
        border-radius: 6px;
        padding: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .sub-doctrine-column-title {
        font-size: 12px;
        padding: 12px 12px 12px 12px; /* Extra top padding to compensate for negative top value (12px + 15px) */
        background: #1c1c1c;
        border: 1px solid #3d3d3d;
        border-radius: 4px;
        margin-bottom: 12px;
        color: #a0a0a0;
        font-weight: 600;
        /* Sticky positioning on mobile - sticks to top of visible area when scrolling */
        position: -webkit-sticky; /* Safari support */
        position: sticky;
        top: -15px; /* Negative value to account for modal body padding, connects to top edge */
        margin-top: 0;
        z-index: 10;
        /* Ensure solid background so content doesn't show through when scrolling */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        /* Remove top border radius when stuck to create seamless connection */
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        /* Center content vertically and horizontally */
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 51px; /* Ensure consistent height: 27px top + 12px bottom + line-height */
    }
    
    /* Ensure the column itself allows sticky positioning */
    .sub-doctrine-column {
        position: relative;
    }

    .sub-doctrine-node {
        padding: 10px;
    }

    .sub-doctrine-icon {
        width: 28px;
        height: 28px;
    }
    
    .sub-doctrine-node-name {
        font-size: 11px;
    }
    
    /* Sub-doctrine tier buttons on mobile */
    .sub-doctrine-tiers {
        gap: 4px;
        margin-top: 8px;
    }
    
    .sub-doctrine-tier-btn {
        min-width: 28px;
        height: 28px;
        padding: 0 6px;
        font-size: 11px;
        border-radius: 4px;
    }
    
    .sub-doctrine-tier-0 {
        width: 16px;
        height: 16px;
        min-width: 16px;
        border-radius: 50%;
    }
    
    /* Special Forces Mobile */
    .special-forces-grand-section {
        padding: 15px 15px 16px;
    }

    .special-forces-grand-grid {
        grid-template-columns: 1fr;
    }

    .special-forces-grand-card {
        min-height: 0;
        padding: 12px;
    }

    .special-forces-container {
        flex-direction: column;
        gap: 20px;
        padding: 15px;
        min-width: 320px; /* Prevent container from shrinking too small on mobile */
        overflow-x: visible;
        overflow-y: visible; /* Remove overflow-y so sticky works with parent scroll */
        position: relative; /* Override sticky on mobile */
        margin-bottom: 0; /* Reset margin on mobile */
        padding-bottom: 15px; /* Reset padding on mobile */
    }
    
    .special-forces-column {
        min-width: 100%;
        width: 100%;
        position: relative; /* Allow sticky positioning */
    }
    
    .special-forces-column-title {
        /* Sticky positioning on mobile - sticks to top of visible area when scrolling */
        position: -webkit-sticky; /* Safari support */
        position: sticky;
        top: -15px; /* Negative value to account for modal body padding, connects to top edge */
        padding: 12px 12px 12px 12px; /* Extra top padding to compensate for negative top value (12px + 15px) */
        margin-top: 0;
        z-index: 10;
        /* Ensure solid background so content doesn't show through when scrolling */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        /* Remove top border radius when stuck to create seamless connection */
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        /* Center content vertically and horizontally */
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 55px; /* Ensure consistent height: 27px top + 12px bottom + line-height */
    }
    
    .special-forces-tier {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .special-forces-tier .sf-sub-doctrine-node {
        width: 100%; /* One subdoctrine per row on mobile so mastery levels fit */
        min-width: 0;
        max-width: 100%;
        height: auto;
    }
}

/* SF sub-doctrine cards share .sub-doctrine-node visuals; keep tree layout only here */
.sf-sub-doctrine-node {
    flex: 1 1 0;
    min-width: 100px;
    max-width: 100%;
    z-index: 3;
    box-sizing: border-box;
    overflow: visible;
}

@media (min-width: 769px) {
    .special-forces-tier .sf-sub-doctrine-node {
        min-width: 110px;
    }
}

@media (min-width: 1920px) {
    .special-forces-tier .sf-sub-doctrine-node {
        min-width: 130px;
    }
}

@media (min-width: 2560px) {
    .special-forces-tier .sf-sub-doctrine-node {
        min-width: 150px;
    }
}

/* Main Footer */
/* Main Footer - always visible at bottom of window */
.main-footer {
    width: 100%;
    background: linear-gradient(to top, #222222, #1c1c1c);
    border-top: 1px solid #3d3d3d;
    min-height: 1.5rem; /* 24px equivalent at 16px base */
    flex-shrink: 0; /* Prevent footer from shrinking */
}

/* Footer Content */
.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem; /* 12px equivalent at 16px base */
    padding: 0.25rem 1.25rem; /* 4px 20px equivalent at 16px base */
    min-height: 1.5rem; /* 24px equivalent at 16px base */
}

.footer-content-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Skin picker in footer - open upward so the menu stays in view */
.main-footer .skin-picker-dropdown {
    top: auto;
    bottom: calc(100% + 8px);
    right: auto;
    left: 0;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem; /* 6px equivalent at 16px base */
    color: #e0e0e0;
    text-decoration: none;
    font-size: 0.75rem; /* 12px equivalent at 16px base */
    font-weight: 500;
    padding: 0.25rem 0.625rem; /* 4px 10px equivalent at 16px base */
    border-radius: 12px;
    transition: all 0.2s ease;
    border: 1px solid #2e2e2e;
    background: #1a1a1a;
}

/* Remove button styling when link contains version label */
.footer-link:has(.version-label) {
    padding: 0;
    background: transparent;
    border: none;
}

.footer-icon {
    width: 0.875rem; /* 14px equivalent at 16px base */
    height: 0.875rem; /* 14px equivalent at 16px base */
    flex-shrink: 0;
}

/* Designer footer: Discord-only feedback (icon link) */
.footer-link.footer-link--discord {
    padding: 0.25rem 0.5rem;
    gap: 0;
}
.footer-link.footer-link--discord .footer-discord-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    display: block;
}
.footer-link.footer-link--discord:hover {
    color: #94a8ff;
    border-color: #4a5680;
}

.version-label {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03125rem; /* 0.5px equivalent at 16px base */
    color: #c0c0c0;
    background: #1a1a1a;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 12px;
    padding: .25rem .625rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s ease;
}

/* Beta indicator inside the version pill (footer) – compact style for pill context */
.version-pill-beta {
    font-size: 0.5625rem; /* 9px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #c4a86f;
    background: rgba(138, 106, 58, 0.35);
    border: 1px solid rgba(138, 106, 58, 0.6);
    border-radius: 6px;
    padding: 0.125rem 0.375rem;
    line-height: 1;
    margin-left: 0.125rem;
}

/* Wrapper for version link + new-version bubble */
.version-link-wrapper {
    position: relative;
    display: inline-flex;
}

/* When new-release bubble is visible, gradient border: animate the gradient angle so colors flow (shape stays fixed) */
@property --version-pill-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes version-pill-gradient-flow {
    to {
        --version-pill-angle: 360deg;
    }
}
/* Gradient ring: ::before extends 2px outside wrapper; link sits on top so the ring shows around the pill */
.version-link-wrapper.has-new-bubble::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 14px;
    background: conic-gradient(
        from var(--version-pill-angle, 0deg),
        #474747,
        rgba(200, 169, 110, 0.35),
        #474747,
        rgba(200, 169, 110, 0.7),
        #474747,
        rgba(200, 169, 110, 0.4),
        #474747
    );
    z-index: 0;
    animation: version-pill-gradient-flow 3.5s linear infinite;
}
.version-link-wrapper.has-new-bubble > .footer-link {
    position: relative;
    z-index: 1;
}
.version-link-wrapper.has-new-bubble .version-label {
    border-color: transparent;
}

/* New version bubble – appears above version pill, caret on right pointing down to pill (from bottom-right) */
.version-new-bubble {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    right: 0;
    left: auto;
    min-width: 18rem;
    max-width: 28rem;
    padding: 0.625rem 2rem 0.75rem 0.75rem; /* extra right padding for dismiss button */
    background: linear-gradient(145deg, #363636 0%, #1e1e1e 100%);
    border: 1px solid #363636;
    border-top: 1px solid rgba(200, 169, 110, 0.35);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #e0e0e0;
    z-index: 1000;
    white-space: normal;
    pointer-events: auto;
}
.version-new-bubble[hidden] {
    display: none !important;
}
/* Caret on the right side, pointing down to the version pill */
.version-new-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 1rem;
    left: auto;
    margin-left: 0;
    border: 6px solid transparent;
    border-top-color: #363636;
}
.version-new-bubble::before {
    content: '';
    position: absolute;
    top: 100%;
    right: 1rem;
    left: auto;
    margin-left: 0;
    border: 5px solid transparent;
    border-top-color: #2a2a2a;
    z-index: 1;
}
.version-new-bubble-kicker {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c4a86f;
    margin-bottom: 0.2rem;
}
.version-new-bubble-text {
    display: block;
    font-weight: 700;
    font-size: 0.8125rem;
    color: #f0f0f0;
    margin-bottom: 0.35rem;
}
.version-new-bubble-desc {
    display: block;
    color: #b8b8b8;
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.4;
}
.version-new-bubble-link {
    color: #c4a86f;
    font-weight: 600;
    text-decoration: none;
}
.version-new-bubble-link:hover {
    color: #a8c4ff;
    text-decoration: underline;
}
/* Dismiss button – visible pill-style button */
.version-new-bubble-dismiss {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid #474747;
    background: #313131;
    color: #e0e0e0;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.version-new-bubble-dismiss:hover {
    color: #fff;
    background: #505050;
    border-color: #4f4f4f;
}
.version-new-bubble-dismiss:focus {
    outline: 1px solid #c4a86f;
    outline-offset: 2px;
}

.footer-link:hover {
    color: #ffffff;
    background: #222222;
    border-color: #3a3a3a;
    text-decoration: none;
}

/* Remove hover effect on link wrapper when it contains version label */
.footer-link:has(.version-label):hover {
    background: transparent;
    border: none;
}

.footer-link:hover .version-label,
.version-label:hover {
    background: #222222;
    border-color: #3a3a3a;
    color: #e0e0e0;
    cursor: pointer;
}

.footer-link:active {
    background: rgba(255, 255, 255, 0.05);
}

.footer-link:has(.version-label):active {
    background: transparent;
}

.version-label:active {
    background: #1a1a1a;
}

.footer-discord-wrapper {
    position: relative;
    display: inline-flex;
    border-radius: 14px;
}


.footer-discord-wrapper.has-discord-new::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 14px;
    background: conic-gradient(
        from var(--discord-ring-angle, 0deg),
        #3a3a5a,
        rgba(114, 137, 218, 0.4),
        #3a3a5a,
        rgba(114, 137, 218, 0.8),
        #3a3a5a,
        rgba(114, 137, 218, 0.45),
        #3a3a5a
    );
    z-index: 0;
    animation: discord-ring-flow 3.5s linear infinite;
}

.footer-discord-wrapper.has-discord-new > .footer-link.footer-link--discord {
    position: relative;
    z-index: 1;
}

@property --discord-ring-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes discord-ring-flow {
    from { --discord-ring-angle: 0deg; }
    to   { --discord-ring-angle: 360deg; }
}

.discord-new-bubble {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    right: -3px;
    left: auto;
    min-width: 16rem;
    max-width: 24rem;
    padding: 0.625rem 2rem 0.75rem 0.75rem;
    background: linear-gradient(145deg, #2d2d2d 0%, #252525 100%);
    border: 1px solid #5a5a5a;
    border-top: 1px solid rgba(114, 137, 218, 0.4);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #e0e0e0;
    z-index: 1000;
    white-space: normal;
    pointer-events: auto;
}

.discord-new-bubble[hidden] {
    display: none !important;
}

.discord-new-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 1rem;
    left: auto;
    border: 6px solid transparent;
    border-top-color: #5a5a5a;
}

.discord-new-bubble::before {
    content: '';
    position: absolute;
    top: 100%;
    right: 1rem;
    left: auto;
    border: 5px solid transparent;
    border-top-color: #252525;
    z-index: 1;
}

.discord-new-bubble-kicker {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7289da;
    margin-bottom: 0.2rem;
}

.discord-new-bubble-text {
    display: block;
    font-weight: 700;
    font-size: 0.8125rem;
    color: #f0f0f0;
    margin-bottom: 0.35rem;
}

.discord-new-bubble-desc {
    display: block;
    color: #b8b8b8;
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.4;
}

.discord-new-bubble-link {
    color: #7289da;
    font-weight: 600;
    text-decoration: none;
}

.discord-new-bubble-link:hover {
    color: #8fa3e8;
    text-decoration: underline;
}

.discord-new-bubble-dismiss {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid #4a4a5a;
    background: #2a2a32;
    color: #e0e0e0;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.discord-new-bubble-dismiss:hover {
    color: #fff;
    background: #3d3d48;
    border-color: #5a5a6a;
}
.discord-new-bubble-dismiss:focus {
    outline: 1px solid #7289da;
    outline-offset: 2px;
}

/* Mobile adjustments for footer */
@media (max-width: 768px) {
    .main-footer {
        position: relative !important; /* Ensure footer flows naturally at end of content on mobile */
        margin-top: 0; /* Remove auto margin, let it flow naturally */
        flex-shrink: 0;
        order: 999; /* Ensure footer is last in flex container */
        z-index: 1; /* Ensure footer is above other content */
    }
    
    .footer-content {
        gap: 0.625rem; /* 10px equivalent at 16px base */
        padding: 0.25rem 0.75rem; /* 4px 12px equivalent at 16px base */
        flex-wrap: wrap;
    }
    
    .footer-link {
        font-size: 0.6875rem; /* 11px equivalent at 16px base */
        padding: 0.25rem 0.5rem; /* 4px 8px equivalent at 16px base */
        gap: 0.375rem; /* 6px equivalent at 16px base */
    }
    
    .footer-icon {
        width: 0.8125rem; /* 13px equivalent at 16px base */
        height: 0.8125rem; /* 13px equivalent at 16px base */
    }
    
    .version-label {
        font-size: 0.6875rem; /* 11px equivalent at 16px base */
        padding: .25rem .625rem; 
    }

    .version-pill-beta {
        font-size: 0.5rem;
        padding: 0.0625rem 0.25rem;
    }

    /* On mobile, bubble is hidden until footer scrolls into view; then it animates from the dev log pill */
    .version-link-wrapper.has-new-bubble.mobile-bubble-pending .version-new-bubble {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-50%) scale(0.6) translateY(12px);
    }
    .version-link-wrapper.has-new-bubble.mobile-bubble-in-view .version-new-bubble {
        animation: mobile-bubble-reveal-from-pill 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .version-new-bubble {
        max-width: min(24rem, calc(100vw - 2rem));
        left: 50%;
        margin-left: -85px;
        transform: translateX(-50%);
        transform-origin: 50% 100%; /* grow from bottom (pill) */
    }

    .footer-discord-wrapper.has-discord-new.mobile-bubble-pending .discord-new-bubble {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: scale(0.6) translateY(12px);
    }
    .footer-discord-wrapper.has-discord-new.mobile-bubble-in-view .discord-new-bubble {
        animation: discord-mobile-bubble-reveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .discord-new-bubble {
        max-width: min(20rem, calc(100vw - 2rem));
        right: -3px;
        left: auto;
        transform: none;
        transform-origin: 100% 100%;
    }
}

@keyframes mobile-bubble-reveal-from-pill {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) scale(0.6) translateY(12px);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) scale(1) translateY(0);
    }
}

@keyframes discord-mobile-bubble-reveal {
    from {
        opacity: 0;
        visibility: hidden;
        transform: scale(0.6) translateY(12px);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: scale(1) translateY(0);
    }
}

/* Bug Report Form Styles */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e0e0e0;
}

.form-group .required {
    color: #ff6b6b;
}

.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    padding: 0.5rem;
    background: #1c1c1c;
    border: 1px solid #3d3d3d;
    border-radius: 3px;
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #c8a96e;
    box-shadow: 0 0 0 2px rgba(200, 169, 110, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* Bug & feedback modal: step 1 = choice, step 2 = form */
.bug-feedback-step {
    outline: none;
}
.bug-feedback-step-hidden {
    display: none !important;
}
.bug-feedback-step-1-prompt {
    font-size: 0.9375rem;
    color: #d0d0d0;
    margin: 0 0 1.25rem 0;
}
.bug-feedback-choices {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}
.bug-feedback-choice-btn {
    flex: 1;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    font-size: 0.875rem;
    border: 1px solid #474747;
    background: #222222;
    color: #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.bug-feedback-choice-btn:hover {
    background: #313131;
    border-color: #4f4f4f;
    color: #fff;
}
.bug-feedback-choice-icon {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
}
.bug-feedback-choice-label {
    font-weight: 500;
    line-height: 1.2;
}

.feedback-discord-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    border: 1px solid #4a4a4a;
    background: #2a2a2a;
    transition: background 0.2s, border-color 0.2s;
    width: 100%;
    margin-top: 0.75rem;
}

.feedback-discord-link svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.feedback-discord-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #5a5a5a;
    color: #ffffff;
}

.bug-feedback-back {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0;
    border: none;
    background: none;
    color: #c4a86f;
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
}
.bug-feedback-back:hover {
    color: #a8c4ff;
    text-decoration: underline;
}

.bug-report-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
    line-height: 1.6;
}

.bug-report-message.success {
    background: #1a3a1a;
    border: 2px solid #a07038;
    color: #d4aa5a;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bug-report-message.success a {
    color: #d4aa5a;
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s ease;
}

.bug-report-message.success a:hover {
    color: #e8cc88;
    text-decoration: underline;
}

.bug-report-message.error {
    background: #4a2a2a;
    border: 1px solid #6a4a4a;
    color: #ff9090;
}

.feedback-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
    line-height: 1.6;
}
.feedback-message.error {
    background: #4a2a2a;
    border: 1px solid #6a4a4a;
    color: #ff9090;
}

/* Toast Notification Styles */
.toast-container {
    position: fixed;
    top: 70px;
    left: 50%;
    margin-left: -250px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
    width: 500px;
    max-width: calc(100vw - 40px);
    padding: 0 20px;
}


.toast {
    background: #1e1e1e;
    border: 1px solid #6abf69;
    color: #d8d8d8;
    padding: 0.875rem 1.125rem;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    width: 100%;
    pointer-events: auto;
    animation: toastSlideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    line-height: 1.5;
    position: relative;
}

.toast.error {
    border-color: #e07070;
}

.toast.warning {
    border-color: rgba(212, 144, 10, 0.55);
    background: linear-gradient(0deg, rgba(212, 144, 10, 0.06), rgba(212, 144, 10, 0.06)), #1e1e1e;
}

.toast-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #ebebeb;
    line-height: 1.35;
    padding-right: 1.5rem;
}

.toast--has-detail .toast-header {
    align-items: flex-start;
}

.toast-detail {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.45;
    color: #888;
}

.toast.error .toast-detail {
    color: #888;
}

.toast-header::before {
    content: "✓";
    font-size: 0.875rem;
    font-weight: bold;
    color: #6abf69;
    flex-shrink: 0;
}

.toast.error .toast-header::before {
    content: "✕";
    color: #e07070;
}

.toast.warning .toast-header::before {
    content: "!";
    color: rgba(240, 217, 166, 0.95);
}

.toast.warning .toast-header {
    color: rgba(240, 217, 166, 0.95);
}

.toast.warning .toast-detail {
    color: rgba(240, 217, 166, 0.72);
}

/* Over-limit save warning: no leading glyph, amber-tinted CTA. */
.toast.toast--save-limit .toast-header::before {
    content: none;
}

.toast.toast--save-limit .toast-header {
    padding-right: 1.75rem;
    letter-spacing: 0.01em;
}

.toast.toast--save-limit .toast-body {
    gap: 0.5rem;
}

.toast.toast--save-limit .toast-link {
    color: rgba(240, 217, 166, 0.95);
    margin-top: 0.4rem;
    font-weight: 600;
}

.toast.toast--save-limit .toast-link:hover {
    color: rgba(255, 232, 184, 1);
}

.toast-body {
    font-size: 0.8125rem;
    color: #aaa;
}

.toast.error .toast-body {
    color: #aaa;
}

.toast-link {
    color: #c8a96e;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.2s ease;
    margin-top: 0.25rem;
}

.toast-link:hover {
    color: #d9be8a;
}

.toast-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.toast-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: #555;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background 0.15s ease, color 0.15s ease;
}

.toast-close:hover {
    background: #2a2a2a;
    color: #aaa;
}

.toast.error .toast-close {
    color: #555;
}

.toast.error .toast-close:hover {
    background: #2a2a2a;
    color: #aaa;
}

@keyframes toastSlideIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.toast.closing {
    animation: toastSlideOut 0.3s ease-in forwards;
}

/* Mobile adjustments for toast */
@media (max-width: 768px) {
    .toast-container {
        top: 60px;
        left: 10px;
        right: 10px;
        margin-left: 0;
        width: auto;
        padding: 0;
        max-width: calc(100vw - 20px);
    }
    
    .toast {
        width: 100%;
    }
}

/* ── Site layout (keeps footer at bottom while content loads) ─────────────── */

.site-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-layout > .landing-footer {
  margin-top: auto;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.landing-footer {
  border-top: 1px solid #181818;
  padding: 1.5rem 2.5rem;
  background: #0f0f0f;
}

.landing-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.landing-footer-inner .footer-note {
  text-align: right;
}

@media (max-width: 600px) {
  .landing-footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.75rem;
  }

  .landing-footer-inner .footer-note {
    text-align: center;
  }
}

.footer-brand {
  font-size: 0.6rem;
  font-weight: 600;
  color: #5a5550;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: #7a7068;
  text-decoration: none;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
}

.footer-links a:hover {
  color: #b0a898;
}

/* Footer: Designer dropdown (division vs tank; opens upward) */
.footer-designer-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1.35;
}

.footer-designer-trigger {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: #7a7068;
  text-decoration: none;
  transition: color 0.15s;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.footer-designer-trigger:hover {
  color: #b0a898;
}

/* Chevron points up when closed (menu opens above); flips down when open */
.footer-designer-chevron {
  opacity: 0.55;
  flex-shrink: 0;
  transition: transform 0.15s ease, opacity 0.15s;
}

.footer-designer-trigger[aria-expanded="true"] .footer-designer-chevron {
  transform: rotate(180deg);
  opacity: 0.85;
}

.footer-designer-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 188px;
  background: #141414;
  border: 1px solid #222;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 200;
  overflow: hidden;
}

.footer-designer-dropdown .footer-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.9rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.8rem;
  color: #888;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  box-sizing: border-box;
}

.footer-designer-dropdown .footer-dropdown-item:hover {
  background: #1a1a1a;
  color: #d8d8d8;
}

.footer-designer-dropdown .footer-dropdown-item.is-current {
  color: #c8a96e;
  background: rgba(200, 169, 110, 0.08);
}

.footer-designer-dropdown .footer-dropdown-item.is-current:hover {
  color: #d9be8a;
  background: rgba(200, 169, 110, 0.12);
}

.footer-note {
  font-size: 0.68rem;
  color: #5a5550;
}

/* ── Tank Equipment Button & Modal ───────────────────────────────────────── */
.tank-equipment-btn {
    position: absolute;
    top: 0;
    right: 24px;
    transform: translateY(-100%);
    background: #1c1c1c;
    border: 1px solid #3a3a3a;
    border-bottom: none;
    color: #aaa;
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 12px;
    cursor: pointer;
    border-radius: 3px 3px 0 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.tank-equipment-btn:hover {
    background: #2a2a2a;
    border-color: #c8a96e;
    color: #c8a96e;
}

.tank-equip-modal-box {
    width: 520px;
    max-width: 95vw;
}

.tank-equip-modal-body {
    padding: 12px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.tank-equip-modal-body--loading {
    min-height: 140px;
    justify-content: center;
    align-items: center;
}

.tank-equip-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #999;
    font-size: 13px;
}

.tank-equip-modal-loading-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid #383838;
    border-top-color: #c8a96e;
    border-radius: 50%;
    animation: tank-equip-modal-spin 0.65s linear infinite;
}

@keyframes tank-equip-modal-spin {
    to {
        transform: rotate(360deg);
    }
}

.tank-equip-modal-error {
    margin: 0;
    text-align: center;
    color: #e6a07a;
    font-size: 13px;
}

/* ── Per-type section ── */
.tank-equip-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tank-equip-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.tank-equip-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
}

.tank-equip-empty-note {
    font-size: 12px;
    font-style: italic;
    color: #888;
    padding: 6px 4px;
}

.tank-equip-designer-link {
    font-size: 11px;
    color: #c8a96e;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.tank-equip-designer-link:hover {
    color: #d9be8a;
    text-decoration: none;
}

.tank-equip-designer-cta {
    display: block;
    font-size: 11px;
    color: #c8a96e;
    text-decoration: none;
    padding: 8px 0 4px;
    transition: color 0.15s;
}
.tank-equip-designer-cta:hover {
    color: #e0c898;
    text-decoration: none;
}

/* ── Design option cards ── */
.tank-equip-design-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #181818;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.tank-equip-design-card:hover {
    background: #1e1e1e;
    border-color: #3d3d3d;
}

.tank-equip-design-card.is-selected {
    background: #2a4633;
    border-color: #4e7e5f;
    box-shadow: 0 0 8px rgba(78, 126, 95, 0.3);
}

/* Radio dot */
.tank-equip-card-radio {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #444;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
}

.tank-equip-design-card.is-selected .tank-equip-card-radio {
    background: #4e7e5f;
    border-color: #4e7e5f;
}

/* Card content */
.tank-equip-card-info {
    flex: 1;
    min-width: 0;
}

.tank-equip-card-name {
    font-size: 12px;
    font-weight: 600;
    color: #d0d0d0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tank-equip-design-card.is-selected .tank-equip-card-name {
    color: #a0d0b2;
}

.tank-equip-design-card.is-invalid {
    opacity: 0.45;
    cursor: default;
}

.tank-equip-design-card.is-invalid .tank-equip-card-radio {
    border-color: #555;
}

/* Outdated chassis (newer year available with current tech) - matches tank designer saved cards */
.tank-equip-design-card.is-outdated:not(.is-invalid) {
    background: #1a1610;
    border-color: #3a2818;
}

.tank-equip-design-card.is-outdated:not(.is-invalid):hover {
    background: #221c14;
    border-color: #4a3220;
}

.tank-equip-design-card.is-outdated.is-selected:not(.is-invalid) {
    background: #2a4430;
    border-color: #4e7e5f;
}

.tank-equip-outdated-label {
    flex-shrink: 0;
}

/* Ephemeral row from a shared/published design (still listed under saved designs with _isShared) */
.tank-equip-design-card.is-shared {
    cursor: default;
    border-color: #3a3060;
    background: #1a1830;
}

.tank-equip-design-card.is-shared.is-selected {
    background: #1e2240;
    border-color: #5a58a0;
}

.tank-equip-design-card.is-shared.is-selected .tank-equip-card-radio {
    background: #5a58a0;
    border-color: #5a58a0;
}

.tank-equip-design-card.is-shared.is-selected .tank-equip-card-name {
    color: #a0a8d8;
}

/* Template still references this build, but it is not in the current saved-designs list (e.g. deleted) */
.tank-equip-design-card.is-template-override {
    cursor: default;
    border-color: #4a4034;
    background: #1e1c18;
}

.tank-equip-design-card.is-template-override.is-selected {
    background: #262218;
    border-color: #6b5c42;
}

.tank-equip-design-card.is-template-override.is-selected .tank-equip-card-radio {
    background: #6b5c42;
    border-color: #6b5c42;
}

.tank-equip-design-card.is-template-override.is-selected .tank-equip-card-name {
    color: #c9b896;
}

.tank-equip-warning-badge {
    font-size: 11px;
    color: rgb(159, 142, 85);
    flex-shrink: 0;
    cursor: default;
    padding: 0 2px;
}

.tank-equip-card-sub {
    font-size: 10px;
    color: #555;
}

/* Stat chips */
.tank-equip-card-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
    flex-shrink: 0;
}

.tank-equip-stat-chip {
    font-size: 10px;
    color: #888;
    display: flex;
    gap: 3px;
    align-items: center;
}

.tank-equip-stat-label {
    color: #555;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}