/* Colour describes a control's role, independently of the current window or player colour. */
body:is(.airport-game-page--cockpit, .sky-site) {
    --ui-section-accent: #edc27b;
    --ui-section-ink: #ffe3ad;
    --ui-section-idle: #211f1b;
    --ui-section-hover: #342b20;
    --ui-section-active: #46351e;
    --ui-detail-accent: #c4a5f5;
    --ui-detail-ink: #f0e5ff;
    --ui-detail-idle: #222033;
    --ui-detail-hover: #352b48;
    --ui-detail-active: #48345f;
    --ui-action: #85dcc2;
    --ui-action-hover: #a3ecd6;
    --ui-action-ink: #092a24;
    --ui-control-focus: #f5f7ff;
}

/* Keep all existing grids, drawers and scroll areas. Only the controls get a new hierarchy. */
body.airport-game-page--cockpit[data-workspace] .airport-game__module-drawer[data-module-type]:is(
    [data-module-type="owned"], [data-module-type="routes"], [data-module-type="countries"],
    [data-module-type="airlines"], [data-module-type="space"], [data-module-type="finance"],
    [data-module-type="victory"], [data-module-type="leaderboard"], [data-module-type="contracts"],
    [data-module-type="markets"], [data-module-type="log"]
) {
    --ui-tab-accent: var(--ui-section-accent);
    --ui-tab-ink: var(--ui-section-ink);
    --ui-tab-idle: var(--ui-section-idle);
    --ui-tab-hover: var(--ui-section-hover);
    --ui-tab-active: var(--ui-section-active);

    & :is(.airport-game__hub-management-tabs, .hangar-inspector-nav, .space-program__tabs,
        .budget-filters, .fleet-builders) {
        --ui-tab-accent: var(--ui-detail-accent);
        --ui-tab-ink: var(--ui-detail-ink);
        --ui-tab-idle: var(--ui-detail-idle);
        --ui-tab-hover: var(--ui-detail-hover);
        --ui-tab-active: var(--ui-detail-active);
    }

    & :is(.airport-workspace__heading nav, .network-workspace__heading nav, .fleet-hangar__navigation nav,
        .space-workspace__heading nav, .budget-tabs, .standings-heading nav, .ops-tabs,
        .airport-game__hub-management-tabs, .hangar-inspector-nav, .space-program__tabs, .budget-filters, .fleet-builders) {
        border-bottom-color: color-mix(in srgb, var(--ui-tab-accent) 38%, #263443);

        /* Older component sheets use !important for transparent tabs and pressed buttons. */
        & > button {
            background: var(--ui-tab-idle) !important;
            color: var(--ui-tab-ink) !important;
            border-color: transparent !important;
            border-radius: 3px 3px 0 0;
            box-shadow: inset 0 -1px color-mix(in srgb, var(--ui-tab-accent) 45%, transparent);
        }
        & > button:is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], .is-active) {
            background: var(--ui-tab-active) !important;
            color: var(--ui-tab-ink) !important;
            border-bottom-color: var(--ui-tab-accent) !important;
            box-shadow: inset 0 -3px var(--ui-tab-accent);
            font-weight: 600;
        }
        & > button:hover:not(:disabled):not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-current="page"]):not(.is-active) {
            background: var(--ui-tab-hover) !important;
        }
        & > button :is(i, small, span) { color: inherit; }
        & > button::after { display: none; }
        & > button:focus-visible { outline: 2px solid var(--ui-control-focus); outline-offset: -4px; }
        & > button:disabled { opacity: .45; box-shadow: none; }
    }

    & :is(.airport-workspace__heading nav, .network-workspace__heading nav, .fleet-hangar__navigation nav,
        .space-workspace__heading nav, .budget-tabs, .standings-heading nav, .ops-tabs) > button { padding-inline: 10px; }
    & :is(.airport-game__hub-management-tabs, .hangar-inspector-nav) { gap: 4px; }

    /* A selected airport, aircraft or mission remains a blue location marker within its section. */
    & :is(.airport-workspace__row, .fleet-hangar__row, .space-workspace__item, .ops-choice)[aria-pressed="true"] {
        box-shadow: inset 0 0 0 1px #54c8e95c;
    }

    /* Settings use the detail colour; a saved choice must not look like a submit button. */
    & .hangar-choices button[aria-pressed="true"] {
        background: var(--ui-detail-active) !important;
        border-color: var(--ui-detail-accent) !important;
        color: var(--ui-detail-ink) !important;
        box-shadow: inset 0 -3px var(--ui-detail-accent);
    }

    & :is(.airport-game__management-upgrade-submit, .airport-game__route-management-create, [data-unique-upgrade],
        .network-primary, [data-fleet-buy], [data-fleet-action="aircraft_assigned"], .company-office__purchase button,
        .space-workspace__primary, .space-program__next button, [data-space-action], [data-space-project],
        [data-orbital-action], [data-station-module], .victory-choose, .standings-primary,
        .finance-payment-button, .ops-primary, .ops-empty button):not(:disabled):not([aria-disabled="true"]) {
        background: var(--ui-action) !important;
        border-color: var(--ui-action) !important;
        color: var(--ui-action-ink) !important;
        box-shadow: inset 0 1px #ffffff35;
        & :is(i, em, span, strong, small) { color: inherit; }
        &:hover { background: var(--ui-action-hover) !important; border-color: var(--ui-action-hover) !important; }
        &:focus-visible { outline: 2px solid var(--ui-control-focus); outline-offset: 3px; }
    }

    /* Expandable information stays blue; available equipment and improvements carry the detail accent. */
    & :is(.airport-game__management-upgrade-main, .airport-game__unique-upgrade) > i { color: var(--ui-detail-accent); }
    & .airport-game__management-upgrade-preview div:last-child { border-left: 2px solid #85dcc270; }
    & .airport-game__airport-net-result > strong { color: var(--panel-positive); }
}

body.airport-game-page--cockpit .route-wizard {
    & .route-wizard__steps [aria-current="step"] { border-color: var(--ui-detail-accent); color: var(--ui-detail-ink); background: var(--ui-detail-active); }
    & .route-wizard__primary:not(:disabled) {
        color: var(--ui-action-ink); background: var(--ui-action); border-color: var(--ui-action);
        &:hover { background: var(--ui-action-hover); }
    }
}

/* The same roles apply to the shared site navigation and account pages. */
body.sky-site {
    & .sky-site-header__nav > a.is-active, & .sky-site-header__more.is-active > summary {
        color: var(--ui-section-ink); background: var(--ui-section-active);
        box-shadow: inset 0 -3px var(--ui-section-accent);
    }
    & .sky-site-header__nav > a:hover, & .sky-site-header__more > summary:hover {
        color: var(--ui-section-ink); background: var(--ui-section-hover);
    }
    & .sky-site-header__dropdown { border-top: 3px solid var(--ui-detail-accent); }
    & .sky-site-header__dropdown a:is(:hover, :focus-visible, .is-active) {
        color: var(--ui-detail-ink); background: var(--ui-detail-active);
    }
    & .sky-site-header__group-label { color: var(--ui-detail-accent); }
    &.sky-career .profile-nav a { color: var(--ui-section-ink); }
    &.sky-career .profile-nav a[aria-selected="true"] {
        color: var(--ui-section-ink); background: var(--ui-section-active);
        box-shadow: inset 0 -3px var(--ui-section-accent);
    }
    &.sky-career .profile-nav a:hover:not([aria-selected="true"]) { background: var(--ui-section-hover); }
    &.sky-career .profile-nav a:focus-visible { outline-color: var(--ui-control-focus); }
    &.sky-departures .lobby-access__choice.is-selected {
        border-color: var(--ui-section-accent); box-shadow: inset 0 -3px var(--ui-section-accent);
        & :is(.lobby-access__icon, small, strong) { color: var(--ui-section-ink); }
    }
    &.sky-departures .lobby-access__choice:hover { border-color: var(--ui-section-accent); }
    & .game-guide__chapters a[aria-current="step"] {
        color: var(--ui-section-ink); background: var(--ui-section-active);
        box-shadow: inset 3px 0 var(--ui-section-accent);
        & > span { color: inherit; }
    }
    & :is(.sky-news-hub__anchors a, .site-reading-details > summary) { color: var(--ui-detail-ink); background: var(--ui-detail-idle); }
    & .sky-news-hub__anchors a { border-color: #685386; }
    & .site-reading-details[open] { border-color: #685386; }
    & :is(.sky-home__primary, .sky-auth__submit, .lobby-button--primary, .sky-site-header__cta--register,
        .profile-button--gold, .quest-primary):not(:disabled):not([aria-disabled="true"]) {
        background: var(--ui-action); border-color: var(--ui-action); color: var(--ui-action-ink);
        &:hover { background: var(--ui-action-hover); border-color: var(--ui-action-hover); }
    }
    & :is(a, button, summary):focus-visible { outline-color: var(--ui-control-focus); }
}

@media (forced-colors: active) {
    body:is(.airport-game-page--cockpit, .sky-site) :is(button, a):is([aria-selected="true"], [aria-pressed="true"], [aria-current="page"], [aria-current="step"]) {
        outline: 2px solid Highlight; outline-offset: -3px;
    }
}