:root {
    --wsu-crimson: #A60F2D;
    --wsu-crimson-dark: #860d25;
    --color-page: #f2f3f5;
    --color-surface: #fafbfc;
    --color-surface-raised: #fff;
    --color-text: #1f2937;
    --color-text-secondary: #374151;
    --color-text-subtle: #566273;
    --color-text-muted: #667386;
    --color-border: #e1e5eb;
    --color-border-strong: #cbd2dc;
    --color-accent-hover: #860d25;
    --color-accent-subtle: #fff1f3;
    --color-link: #860d25;
    --color-link-hover: #5f091b;
    --shadow-surface: 0 10px 30px rgba(15, 23, 42, 0.08);
    --focus-ring: 0 0 0 3px rgba(169, 21, 44, 0.22);
    --color-success-surface: #d9efdf;
    --color-success-border: #9ac8a7;
    --color-success-text: #1f5131;
    --color-danger-surface: #f5d9dc;
    --color-danger-border: #d88590;
    --color-danger-text: #681f2b;
    --color-overlay: rgba(17, 24, 39, 0.42);
    --color-control-disabled: #e1e5eb;
    --bs-body-font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
    --color-page: #181a1f;
    --color-surface: #22262c;
    --color-surface-raised: #2a2f37;
    --color-text: #f3f4f6;
    --color-text-secondary: #cbd5e1;
    --color-text-subtle: #aab4c0;
    --color-text-muted: #96a2b1;
    --color-border: #303840;
    --color-border-strong: #46505c;
    --color-accent-hover: #c34a61;
    --color-accent-subtle: #351d24;
    --color-link: #f18a9a;
    --color-link-hover: #ffb7c2;
    --shadow-surface: 0 10px 30px rgba(0, 0, 0, 0.32);
    --focus-ring: 0 0 0 3px rgba(222, 87, 109, 0.42);
    --color-success-surface: #285d43;
    --color-success-border: #4f9f73;
    --color-success-text: #e5f5eb;
    --color-danger-surface: #a83243;
    --color-danger-border: #e46d7d;
    --color-danger-text: #ffe7eb;
    --color-overlay: rgba(0, 0, 0, 0.62);
    --color-control-disabled: #454d57;
}

html {
    background: var(--wsu-crimson);
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}
body {
    margin: 0;
    font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--color-page);
    color: var(--color-text);
}

body:has(.legal-page) {
    background: var(--color-page);
}

body:has(.schedule-app) {
    background: var(--color-page);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

#content {
    padding-bottom: 28px;
}

#content:has(.schedule-app) {
    overflow: hidden;
    padding-bottom: 0;
}

#content:has(.legal-page) {
    padding-bottom: 0;
}
.app-navbar {
    background: linear-gradient(180deg, var(--wsu-crimson) 0%, var(--wsu-crimson-dark) 100%);
    min-height: 74px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.app-brand-title {
    color: #fff;
    font-size: 1.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
.app-brand-icon {
    border-radius: 8px;
    height: 46px;
    width: 46px;
}
.app-nav-actions {
    align-items: center;
    display: flex;
    gap: 18px;
}
.nav-action {
    align-items: center;
    background: transparent;
    border: 0;
    color: #fff;
    display: inline-flex;
    font-weight: 700;
    gap: 8px;
    padding: 8px 0;
}
.nav-action.dropdown-toggle::after {
    display: none;
}
.options-menu {
    --bs-dropdown-bg: var(--color-surface);
    --bs-dropdown-color: var(--color-text);
    --bs-dropdown-link-color: var(--color-text);
    border: 0;
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    min-width: 190px;
    padding: 10px 12px;
}
.options-menu .form-check-input {
    background-color: var(--color-surface);
    border-color: #6b7280;
}
.options-menu .form-check-input:checked {
    background-color: var(--wsu-crimson);
    border-color: var(--wsu-crimson);
}
.options-menu .form-check-label {
    color: var(--color-text);
    font-weight: 700;
}

.help-modal {
    --bs-modal-width: 640px;
}

.help-modal .modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.26);
}

.help-modal .modal-header {
    align-items: start;
    border-bottom: 1px solid var(--color-border);
    padding: 22px 24px 18px;
}

.help-kicker {
    color: var(--wsu-crimson);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.help-modal .modal-title {
    color: var(--color-text);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.2;
}

.help-modal .modal-body {
    padding: 20px 24px 24px;
}

.help-mode h2 {
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 12px;
}

.help-mode-mobile {
    display: none;
}

.help-card-list {
    display: grid;
    gap: 14px;
    margin: 0;
}

.help-card {
    align-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(150px, 42%) 1fr;
    overflow: hidden;
    padding: 10px;
}

.help-image-slot {
    align-items: center;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--color-page) 0%, #ebeef3 100%);
    border: 1px dashed #aeb6c4;
    border-radius: 6px;
    color: var(--color-text-secondary);
    display: flex;
    font-size: 0.82rem;
    font-weight: 800;
    justify-content: center;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.help-image-slot img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.help-image-slot span {
    padding: 0 14px;
}

.help-card h3 {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 4px;
}

.help-card p {
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin: 0;
}

.help-tips {
    background: #fff8e8;
    border: 1px solid #e9c46a;
    border-radius: 8px;
    color: var(--color-text-secondary);
    margin-top: 16px;
    padding: 14px 16px;
}

.help-tips h3 {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
    margin: 0 0 8px;
}

.help-tips ul {
    display: grid;
    gap: 7px;
    line-height: 1.45;
    margin: 0;
    padding-left: 20px;
}

.help-tips li {
    padding-left: 2px;
}

.help-note {
    background: var(--color-page);
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    color: var(--color-text-secondary);
    font-weight: 700;
    line-height: 1.5;
    margin-top: 18px;
    padding: 12px 14px;
}

.htmx-indicator {
    display: none;
    margin: 10px 0;
}
.htmx-request .htmx-indicator {
    display: block;
}
.htmx-request.htmx-indicator {
    display: block;
}

.site-footer {
    background: var(--color-page);
    backdrop-filter: blur(12px);
}

body:has(.schedule-app) .site-footer {
    height: 56px;
    overflow: hidden;
}

.site-footer-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    justify-content: center;
    min-height: 48px;
    padding-bottom: 6px;
    padding-top: 6px;
}

.site-footer-txt {
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    font-weight: 600;
}

.affiliation-disclaimer {
    flex-basis: 100%;
    font-size: 0.68rem;
    text-align: center;
}

.site-footer-link {
    color: var(--color-link);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
}

.site-footer-link:hover,
.site-footer-link:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.legal-page {
    background: var(--color-page);
    padding: 48px 20px 64px;
}

.legal-shell {
    margin: 0 auto;
    max-width: 860px;
}

.legal-kicker {
    color: var(--wsu-crimson);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.legal-shell h1 {
    color: var(--color-text);
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 8px;
}

.legal-updated {
    color: var(--color-text-muted);
    font-weight: 700;
    margin-bottom: 28px;
}

.legal-shell h2 {
    border-top: 1px solid var(--color-border-strong);
    color: var(--color-text);
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: 28px 0 10px;
    padding-top: 20px;
}

.legal-shell p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 16px;
}

.legal-shell ul {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 16px;
    padding-left: 22px;
}

.legal-shell a {
    color: var(--color-link);
    font-weight: 600;
}

.legal-shell a:hover,
.legal-shell a:focus-visible {
    color: var(--color-link-hover);
}

.legal-shell code {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    padding: 1px 4px;
}

.legal-shell li + li {
    margin-top: 6px;
}

@media (max-width: 760px) {
    body:has(.schedule-app) {
        --mobile-topbar-height: 84px;
        --mobile-footer-height: 56px;
        --mobile-app-chrome-height: calc(var(--mobile-topbar-height) + var(--mobile-footer-height));
    }

    body {
        background: var(--wsu-crimson);
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }

    body:has(.schedule-app) {
        padding-bottom: 0;
    }

    body:has(.schedule-app) .site-footer {
        height: var(--mobile-footer-height, 56px);
    }

    body:has(.legal-page) {
        padding-bottom: 0;
    }

    #content {
        background: var(--color-page);
    }

    .app-navbar {
        min-height: var(--mobile-topbar-height, 84px);
        padding-top: env(safe-area-inset-top);
    }

    .app-navbar .container-fluid {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-left: 20px !important;
        padding-right: 18px !important;
    }

    .app-navbar .navbar-brand {
        margin-right: 0;
        justify-self: center;
        min-width: 0;
        align-self: center;
    }

    .app-brand-title {
        font-size: 1.3rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    .app-brand-icon {
        height: 44px;
        width: 44px;
    }

    .app-nav-actions {
        align-items: center;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .nav-action {
        min-height: 34px;
        min-width: 0;
        padding: 0;
    }

    .help-modal .modal-dialog {
        margin: 14px;
    }

    .help-modal .modal-header {
        padding: 18px 18px 14px;
    }

    .help-modal .modal-title {
        font-size: 1.2rem;
    }

    .help-modal .modal-body {
        padding: 18px;
    }

    .help-mode-desktop {
        display: none;
    }

    .help-mode-mobile {
        display: block;
    }

    .help-card {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .help-image-slot {
        aspect-ratio: 16 / 9;
    }

    .weekend-option {
        display: none;
    }

    .site-footer-inner {
        gap: 2px 4px;
        min-height: 0;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .site-footer-txt,
    .site-footer-link {
        flex: 0 0 auto;
        font-size: clamp(0.38rem, 1.7vw, 0.58rem);
        line-height: 1.2;
        white-space: nowrap;
    }

    .affiliation-disclaimer {
        flex-basis: 100%;
        flex-shrink: 0;
    }

    .legal-page {
        padding: 36px 18px 48px;
    }

    .legal-shell h1 {
        font-size: 1.8rem;
    }

}

:root[data-theme="dark"] .help-image-slot {
    background: linear-gradient(135deg, #1f252c 0%, #29313a 100%);
    border-color: var(--color-border-strong);
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .help-tips {
    background: #332b1b;
    border-color: #8a6b2c;
    color: var(--color-text-secondary);
}

/* Keep theme changes gentle without overriding component motion transforms. */
:where(body, body *) {
    transition: background-color 160ms ease,
                color 160ms ease,
                border-color 160ms ease,
                box-shadow 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :where(body, body *) {
        transition-duration: 0ms !important;
    }
}