/* Global header consistency (synced to index header look) */

/* Global typography normalization (reduced size variants) */
:root {
    --type-xs: 0.78rem;
    --type-sm: 0.86rem;
    --type-base: 0.95rem;
    --type-md: 1.03rem;
    --type-lg: 1.18rem;
    --type-xl: clamp(1.48rem, 2.35vw, 1.98rem);
    --type-display: clamp(2.02rem, 4.5vw, 3.18rem);
    --transit-header-bubble-offset: 10px;
}

body {
    font-size: var(--type-base);
}

:where(main, section, article, aside, footer) :where(p, li, td, th, label, input, select, textarea, button) {
    font-size: var(--type-base);
}

:where(main, section, article, aside, footer) :where(.note, .status, .label, .meta, .k, .m, .caption, .eyebrow, .small, .subline, .chip, .badge, .chart-source) {
    font-size: var(--type-sm) !important;
}

:where(main, section, article, aside, footer) :where(.btn, .button, [class$='-btn']) {
    font-size: var(--type-sm) !important;
}

header {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    width: 100% !important;
    margin: 0 auto !important;
    border-bottom: 1px solid rgba(190, 222, 255, 0.2) !important;
    background: linear-gradient(180deg, rgba(16, 26, 43, 0.56), rgba(7, 11, 18, 0.42)) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28) !important;
    -webkit-backdrop-filter: blur(10px) saturate(108%) !important;
    backdrop-filter: blur(10px) saturate(108%) !important;
    transition: top 0.34s ease, width 0.34s ease, border-radius 0.34s ease, box-shadow 0.34s ease, background 0.34s ease, border-color 0.34s ease !important;
}

header.is-bubble {
    top: max(12px, calc(env(safe-area-inset-top, 0px) + var(--transit-header-bubble-offset, 10px))) !important;
    width: min(1120px, 92vw) !important;
    border: 1px solid rgba(187, 220, 255, 0.14) !important;
    border-radius: 18px !important;
    background: linear-gradient(170deg, rgba(22, 35, 55, 0.28), rgba(8, 13, 21, 0.2)) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

header nav.container {
    width: 100% !important;
    max-width: none !important;
    padding: 6px 22px !important;
}

header.is-bubble nav.container {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

header nav,
header .topbar {
    min-height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

header.is-bubble nav,
header.is-bubble .topbar {
    min-height: 60px !important;
}

header .nav-right,
header .actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
}

header .account-wrap,
header .menu-wrap {
    position: relative !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Header control buttons: no dark top/bottom edge */
header .lang-toggle,
header .account-btn,
header .menu-btn,
header .button {
    border-color: rgba(190, 224, 255, 0.28) !important;
    background: rgba(188, 225, 255, 0.15) !important;
    box-shadow: 0 6px 14px rgba(4, 12, 24, 0.18) !important;
    -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
    backdrop-filter: blur(8px) saturate(110%) !important;
}

header.is-bubble .lang-toggle,
header.is-bubble .account-btn,
header.is-bubble .menu-btn,
header.is-bubble .button {
    border-color: rgba(198, 228, 255, 0.24) !important;
    background: rgba(199, 230, 255, 0.14) !important;
    box-shadow: 0 4px 10px rgba(3, 10, 20, 0.14) !important;
}

header .back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(167, 208, 252, 0.2) !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--muted, #a1a1a6) !important;
    text-decoration: none !important;
    font-size: 0.92rem !important;
}

header .back:hover {
    color: var(--text, #f5f5f7) !important;
    border-color: rgba(190, 224, 255, 0.28) !important;
    background: rgba(188, 225, 255, 0.08) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

header .lang-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid rgba(167, 208, 252, 0.26) !important;
    border-radius: 999px !important;
    height: 36px !important;
    padding: 3px 4px !important;
}

header .account-btn,
header .menu-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(167, 208, 252, 0.24) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transform: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

header .account-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #d9e6f7 !important;
    fill: none !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

header .menu-btn {
    flex-direction: column !important;
    gap: 4px !important;
    line-height: 0 !important;
    color: #f2f7ff !important;
    -webkit-text-fill-color: #f2f7ff !important;
}

header .menu-btn span {
    display: block !important;
    width: 16px !important;
    height: 2px !important;
    flex: 0 0 2px !important;
    background: #f2f7ff !important;
    border-radius: 0 !important;
    opacity: 1 !important;
}

header .lang-btn {
    border: 0 !important;
    background: transparent !important;
    color: var(--muted, #a1a1a6) !important;
    font-size: 0.78rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.03em !important;
    height: 28px !important;
    width: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transform: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

header .lang-btn.is-active {
    color: #ffffff !important;
    background: #2b2b33 !important;
}

header .nav-links a {
    color: var(--muted, #a1a1a6) !important;
    text-decoration: none !important;
    font-size: 0.96rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
}

header .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 0 0 22px !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: nowrap !important;
}

header .nav-links > li,
header .nav-links > * {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

header .nav-links a:visited,
header .back:visited {
    color: var(--muted, #a1a1a6) !important;
}

header .nav-links a:hover {
    color: var(--text, #f5f5f7) !important;
}

header .lang-btn,
header .menu-btn,
header .account-btn,
header .nav-links a,
header .button,
header .back {
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
    transform: none !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
}

header .lang-btn:hover,
header .menu-btn:hover,
header .account-btn:hover,
header .nav-links a:hover,
header .button:hover,
header .back:hover {
    transform: none !important;
}

header.is-bubble .logo,
header.is-bubble .brand,
header.is-bubble .nav-links a {
    color: #e8f1ff !important;
    text-shadow: 0 1px 6px rgba(2, 8, 16, 0.62) !important;
}

header .lang-btn,
header.is-bubble .lang-btn {
    text-shadow: none !important;
    filter: none !important;
}

header .lang-btn:not(.is-active),
header.is-bubble .lang-btn:not(.is-active) {
    background: transparent !important;
    box-shadow: none !important;
}

header.is-bubble .lang-btn.is-active {
    background: rgba(8, 14, 24, 0.48) !important;
    color: #ffffff !important;
}

header.is-bubble .account-btn svg {
    stroke: #f1f7ff !important;
}

header.is-bubble .menu-btn span {
    background: #f2f7ff !important;
}

header .subpage-menu {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 10px) !important;
    min-width: 250px !important;
    max-height: min(70vh, 560px) !important;
    overflow: auto !important;
    padding: 8px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(167, 208, 252, 0.3) !important;
    background: linear-gradient(170deg, rgba(25, 39, 62, 0.9), rgba(9, 14, 24, 0.9)) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42) !important;
    -webkit-backdrop-filter: blur(14px) saturate(115%) !important;
    backdrop-filter: blur(14px) saturate(115%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-6px) scale(0.98) !important;
    transform-origin: top right !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
    z-index: 220 !important;
}

header .subpage-menu.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

header :where(.account-menu) {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(167, 208, 252, 0.3);
    background: linear-gradient(170deg, rgba(25, 39, 62, 0.9), rgba(9, 14, 24, 0.9));
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    backdrop-filter: blur(14px) saturate(115%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

header :where(.account-menu).is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

header .subpage-menu a,
header .account-menu a,
header .account-menu button {
    font-size: 0.9rem !important;
}

header .subpage-menu a:visited,
header .account-menu a:visited {
    color: #d2d7e2 !important;
}

header .subpage-menu .menu-group-title {
    display: block !important;
    color: #d2d7e2 !important;
    font-size: 0.9rem !important;
    padding: 9px 10px !important;
    border-radius: 9px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    border-top: 0 !important;
    font-weight: 400 !important;
    letter-spacing: 0.012em !important;
    word-spacing: 0.08em !important;
    text-transform: none !important;
    font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif !important;
    text-align: left !important;
}

header .subpage-menu .menu-group-title:first-child {
    margin-top: 0 !important;
    border-top: 0 !important;
}

header .subpage-menu a.menu-subitem {
    padding-left: 22px !important;
    font-size: 0.9rem !important;
    color: #c8d8ee !important;
}

header .subpage-menu a.menu-rootitem {
    padding-left: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: #d2d7e2 !important;
}

/* Global text-button sizing (Whoop sync-size family) */
.btn,
.button,
.pill-btn,
.archive-btn {
    --transit-btn-primary-bg: linear-gradient(170deg, #2f7dff 0%, #2567f2 50%, #1d53d8 100%);
    --transit-btn-primary-bg-hover: linear-gradient(170deg, #3a86ff 0%, #2b72ff 50%, #225edf 100%);
    --transit-btn-primary-border: rgba(154, 206, 255, 0.62);
    --transit-btn-primary-border-hover: rgba(182, 222, 255, 0.76);
    --transit-btn-primary-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(10, 28, 78, 0.52),
        0 0 14px 1px rgba(100, 181, 246, 0.54),
        0 0 28px 6px rgba(100, 181, 246, 0.22),
        0 12px 28px rgba(25, 84, 192, 0.46),
        0 0 0 1px rgba(18, 57, 129, 0.3);
    --transit-btn-primary-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -1px 0 rgba(10, 28, 78, 0.52),
        0 0 18px 2px rgba(100, 181, 246, 0.7),
        0 0 42px 10px rgba(100, 181, 246, 0.28),
        0 15px 30px rgba(28, 95, 215, 0.52),
        0 0 0 1px rgba(22, 66, 148, 0.34);
    --transit-btn-secondary-bg: linear-gradient(170deg, #2b3442 0%, #242d3b 52%, #202835 100%);
    --transit-btn-secondary-bg-hover: linear-gradient(170deg, #313b4b 0%, #293344 52%, #242d3b 100%);
    --transit-btn-secondary-border: rgba(168, 184, 208, 0.34);
    --transit-btn-secondary-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(7, 12, 22, 0.54),
        0 0 10px 0 rgba(119, 174, 255, 0.2),
        0 0 24px 4px rgba(89, 144, 227, 0.12),
        0 10px 22px rgba(2, 7, 16, 0.3),
        0 0 0 1px rgba(8, 16, 30, 0.18);
    --transit-btn-secondary-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(7, 12, 22, 0.54),
        0 0 14px 0 rgba(119, 174, 255, 0.28),
        0 0 30px 6px rgba(89, 144, 227, 0.16),
        0 12px 24px rgba(2, 7, 16, 0.33),
        0 0 0 1px rgba(8, 16, 30, 0.2);
    --transit-btn-danger-bg: linear-gradient(170deg, #7b2434 0%, #651d2b 48%, #4f1621 100%);
    --transit-btn-danger-bg-hover: linear-gradient(170deg, #8a293b 0%, #722130 48%, #5b1a27 100%);
    --transit-btn-danger-border: rgba(255, 153, 170, 0.44);
    --transit-btn-danger-border-hover: rgba(255, 176, 191, 0.52);
    --transit-btn-danger-shadow:
        inset 0 1px 0 rgba(255, 214, 222, 0.24),
        inset 0 -1px 0 rgba(34, 7, 12, 0.62),
        0 8px 18px rgba(22, 5, 9, 0.34),
        0 0 0 1px rgba(45, 9, 16, 0.22);
}

.btn,
.button {
    font-size: 0.84rem !important;
    letter-spacing: 0.01em !important;
}

/* Global action-button language derived from the landing hero CTA */
.btn,
.button {
    border: 1px solid var(--transit-btn-primary-border) !important;
    background: var(--transit-btn-primary-bg) !important;
    color: #f8fbff !important;
    box-shadow: var(--transit-btn-primary-shadow) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease !important;
}

.btn:hover,
.button:hover {
    transform: translateY(-2px) !important;
    border-color: var(--transit-btn-primary-border-hover) !important;
    background: var(--transit-btn-primary-bg-hover) !important;
    box-shadow: var(--transit-btn-primary-shadow-hover) !important;
}

.btn:active,
.button:active {
    transform: translateY(1px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(8, 20, 58, 0.64),
        0 5px 12px rgba(24, 82, 189, 0.34),
        0 0 0 1px rgba(16, 52, 121, 0.3) !important;
}

.btn.secondary,
.button.alt,
.button.secondary {
    border-color: var(--transit-btn-secondary-border) !important;
    background: var(--transit-btn-secondary-bg) !important;
    color: #dce5f3 !important;
    box-shadow: var(--transit-btn-secondary-shadow) !important;
}

.btn.secondary:hover,
.button.alt:hover,
.button.secondary:hover {
    background: var(--transit-btn-secondary-bg-hover) !important;
    box-shadow: var(--transit-btn-secondary-shadow-hover) !important;
}

.btn.danger {
    border-color: var(--transit-btn-danger-border) !important;
    background: var(--transit-btn-danger-bg) !important;
    color: #ffeef2 !important;
    box-shadow: var(--transit-btn-danger-shadow) !important;
}

.btn.danger:hover {
    border-color: var(--transit-btn-danger-border-hover) !important;
    background: var(--transit-btn-danger-bg-hover) !important;
}

.btn:disabled,
.button:disabled,
button[disabled].btn,
button[disabled].button {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    filter: saturate(0.72) !important;
}

/* Typography spacing consistency across subpages */
html,
body {
    background: #020812 !important;
    background-color: #020812 !important;
    overscroll-behavior-y: none !important;
    letter-spacing: 0.01em !important;
    font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif !important;
}

button,
input,
select,
textarea,
option,
label {
    font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo,
.brand {
    font-family: "Sora", "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif !important;
}

/* Keep top-left brand mark identical to homepage sizing on every subpage */
header .logo,
header .brand {
    font-family: "Sora", "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 650 !important;
    font-size: 1.1rem !important;
    line-height: normal !important;
    letter-spacing: 0.012em !important;
    word-spacing: 0.11em !important;
    text-decoration: none !important;
}

header .logo-symbol,
header .brand-symbol {
    width: 1rem !important;
    height: 1rem !important;
    flex: 0 0 1rem !important;
    line-height: 1 !important;
    --logo-gap: 12%;
}

p,
li,
label,
th,
td,
.btn,
.button,
.lead,
.note,
.status,
.subtitle,
.source,
.footnote,
.subscription-label,
.subscription-note,
.newsletter-status,
.alerts-title {
    letter-spacing: 0.01em !important;
    word-spacing: 0.08em !important;
}

.btn,
.button,
header .back,
header .nav-links a,
header .subpage-menu a,
header .account-menu a,
header .account-menu button {
    font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif !important;
    letter-spacing: 0.012em !important;
    word-spacing: 0.08em !important;
}

@media (max-width: 860px) {
    header nav.container {
        padding: 6px 14px !important;
    }
    header .nav-right,
    header .actions {
        gap: 8px !important;
        width: auto !important;
        justify-content: flex-end !important;
    }
    header .back {
        display: none !important;
    }
    header .nav-links {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    header .nav-links > * {
        display: none !important;
    }
    header .nav-links > .mobile-dashboard,
    header .nav-links > .mobile-dashboard-link {
        display: block !important;
        list-style: none !important;
        flex: 0 0 auto !important;
    }
    header .nav-links .mobile-dashboard-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 36px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(167, 208, 252, 0.3) !important;
        background: rgba(188, 225, 255, 0.14) !important;
        color: #eaf2ff !important;
        white-space: nowrap !important;
        font-size: 0.86rem !important;
        text-decoration: none !important;
    }
}