/* =========================================================================
   UI for Amodeo (JMP, 2025) - Web Version
   Exact Desktop GUI Match (Windows Native Style)
   ========================================================================= */

/* Typography: Computer Modern stack for LaTeX-like visuals */

@font-face {
    font-family: 'Computer Modern Serif';
    src: url('fonts/cmunrm.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Computer Modern Serif';
    src: url('fonts/cmunti.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Computer Modern Serif';
    src: url('fonts/cmunbx.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Computer Modern Serif';
    src: url('fonts/cmunbi.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Color palette matching desktop exactly */
    --bg-window: #f5f7fb;
    --bg-elevated: #ffffff;
    --bg-sunken: #eef1f7;
    --text-primary: #1e2433;
    --text-secondary: #4b556b;
    --border-color: #cfd6e6;
    --accent: #485bb5;
    --accent-hover: #5d6fd8;
    --accent-active: #36469f;
    --accent-rgb: 72, 91, 181;
    --accent-hover-rgb: 93, 111, 216;
    --accent-active-rgb: 54, 70, 159;
    --accent-strong: #4053c6;
    --accent-soft: #6f81e3;
    --accent-strong-rgb: 64, 83, 198;
    --accent-soft-rgb: 111, 129, 227;
    --group-border: #d0d0d0;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Radii */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* Typography */
    --font-body: 'Computer Modern Serif', 'Computer Modern', 'CMU Serif', 'Latin Modern Roman', 'Times New Roman', 'Times', serif;
    --line-height-base: 1.2;
    /* Fixed label column width for control rows */
    --label-col: 45px;
    --label-col-wide: 150px;  /* For longer labels like Taylor Rule Sensitivities */
    /* Section-specific label/select sizing */
    --label-col-core: 180px;   /* Wider labels for Core/Pre-FOMC rows */
    --select-width-core: 240px; /* Narrower dropdowns for Core/Pre-FOMC */
    --value-col: 72px;
    --value-chip-bg: linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.05));
    --value-chip-border: rgba(var(--accent-rgb), 0.35);
    --value-chip-shadow: 0 2px 4px rgba(var(--accent-active-rgb), 0.12);

    /* Methodology layout tokens */
    --methodology-max-width: min(960px, 100%);
    --methodology-body-font: 12.608pt;
    --methodology-body-line-height: 1.9;
    --methodology-body-paragraph-space: 20px;
    --methodology-heading-font: 14.5pt;
    --methodology-heading-letter: 0.025em;
    --methodology-text-color: rgba(30, 36, 51, 0.92);
    --methodology-subtext-color: rgba(30, 36, 51, 0.78);

    /* Figure/caption tokens */
    --figure-max-width: 1080px;
    --figure-gap: 18px;
    --figure-caption-width: 680px;
    --figure-caption-font: 11.701pt;

    /* Table typography */
    --dm-table-font: clamp(9pt, 1.05vw, 12pt);

    /* Toolbar colors for Windows native look */
    --toolbar-bg-start: #f8f8f8;
    --toolbar-bg-end: #e8e8e8;
    --toolbar-border: #a0a0a0;
    --button-bg-start: #fcfcfc;
    --button-bg-end: #e8e8e8;
    --button-border: #adadad;
    --button-hover-bg-start: #ffffff;
    --button-hover-bg-end: #f2f2f2;
    --button-active-bg-start: var(--accent);
    --button-active-bg-end: var(--accent-active);
    --button-shadow: rgba(0, 0, 0, 0.08);

    /* Glass tokens for unified toolbar look */
    --glass-top: rgba(255, 255, 255, 0.65);
    --glass-bottom: rgba(255, 255, 255, 0.35);
    --glass-hover-top: rgba(255, 255, 255, 0.70);
    --glass-hover-bottom: rgba(255, 255, 255, 0.45);
    --glass-active-top: rgba(240, 240, 240, 0.95);
    --glass-active-bottom: rgba(228, 228, 228, 0.90);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-border-strong: rgba(0, 0, 0, 0.18);
    --glass-blur: saturate(140%) blur(6px);

    /* Layout tokens */
    --top-toolbar-height: clamp(34px, 3.6vw, 52px);
    --top-tab-gap: clamp(1px, 0.35vw, 6px);
    --top-tab-hover-corridor: var(--top-tab-gap);
    --top-tab-padding-inline: clamp(3px, 0.35vw, 8px);
    --top-tab-padding-block: clamp(4px, 0.6vw, 8px);
    --top-tab-min-height: clamp(30px, 3.6vw, 44px);
    /* Wider default tab width so top bar tab buttons are longer (fluid) */
    --top-tab-collapsed-width: clamp(40px, 4vw, 90px);
    --top-tab-expanded-fallback: clamp(120px, 16vw, 240px);
    --top-tab-title-font: clamp(8.6pt, 0.78vw, 10.5pt);
    --top-tab-title-font-active: clamp(9.6pt, 0.9vw, 11.4pt);
    --top-toolbar-anim-duration: 0.65s;
    --top-tab-focus-ring: rgba(var(--accent-strong-rgb), 0.45);
    --top-tab-ripple-color: rgba(var(--accent-rgb), 0.28);
    --top-tab-expand-duration: 1.45s;
    --top-tab-collapse-duration: 1.25s;
    --top-tab-sheen-duration: 1.3s;
    --top-tab-depth-scale: 1.018;
    --top-tab-expand-flare-duration: 0.95s;
    --top-tab-collapse-flare-duration: 0.78s;
    --top-tab-badge-diameter: clamp(16px, 1.8vw, 26px);
    --top-toolbar-side-btn-min: clamp(54px, 4vw, 88px);
    --top-toolbar-side-btn-font: clamp(8.7pt, 0.85vw, 10.2pt);
    --top-toolbar-side-btn-padding-x: clamp(6px, 0.5vw, 10px);
    --top-toolbar-side-btn-padding-y: clamp(4px, 0.55vw, 6px);
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-size: 11.096pt;
    color: var(--text-primary);
    background: var(--bg-window);
    overflow-x: hidden;
    overflow-y: auto;
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure ALL elements inherit the LaTeX font */
* {
    font-family: inherit;
}

/* Specifically target common elements to ensure consistent font */
button, input, select, textarea, label, div, span, p, h1, h2, h3, h4, h5, h6, th, td {
    font-family: var(--font-body);
}

/* =========================================================================
   TOP TOOLBAR — Forecast performance inspired aesthetic
   ========================================================================= */

.top-toolbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 245, 248, 0.94)) !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
    padding: clamp(4px, 0.6vw, 8px) clamp(4px, 0.8vw, 12px) !important;
    min-height: var(--top-toolbar-height) !important;
    height: auto !important;
    width: 100% !important;
    z-index: 1000 !important;
    box-shadow: 0 18px 32px -28px rgba(15, 23, 42, 0.16) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: toolbarFloat var(--top-toolbar-anim-duration) cubic-bezier(0.19, 1, 0.22, 1) both;
    transform-origin: top center;
}

.top-toolbar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.35));
    opacity: 0.8;
}

@keyframes toolbarFloat {
    0% {
        opacity: 0;
        transform: translateY(-12px) scaleY(0.98);
    }
    60% {
        opacity: 1;
        transform: translateY(0) scaleY(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes topTabRipple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.35;
    }
    70% {
        opacity: 0.15;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

@keyframes topTabSheen {
    0% {
        transform: translateX(-160%) skewX(-12deg);
        opacity: 0;
    }
    15% {
        opacity: 0.65;
    }
    50% {
        opacity: 0.35;
    }
    100% {
        transform: translateX(220%) skewX(-12deg);
        opacity: 0;
    }
}

@keyframes topTabBloom {
    0% {
        opacity: 0.1;
        transform: scale(0.6);
        filter: blur(26px);
    }
    55% {
        opacity: 0.7;
        transform: scale(1);
        filter: blur(14px);
    }
    100% {
        opacity: 0;
        transform: scale(1.25);
        filter: blur(32px);
    }
}

@keyframes topTabFlareSweep {
    0% {
        transform: translateX(-160%) scaleX(0.6);
        opacity: 0;
    }
    40% {
        opacity: 0.9;
    }
    100% {
        transform: translateX(180%) scaleX(1.1);
        opacity: 0;
    }
}

@keyframes topTabCurtain {
    0% {
        transform: translateX(0) scaleX(1);
        opacity: 0.55;
    }
    100% {
        transform: translateX(140%) scaleX(1.35);
        opacity: 0;
    }
}

@keyframes topTabCollapsePulse {
    0% {
        opacity: 0.35;
        transform: scale(1);
        filter: blur(10px);
    }
    100% {
        opacity: 0;
        transform: scale(1.25);
        filter: blur(24px);
    }
}

.top-toolbar-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 0 clamp(8px, 1.2vw, 18px);
    gap: clamp(8px, 1vw, 16px);
    pointer-events: none;
}

.topbar-left,
.topbar-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
    pointer-events: auto;
}

.topbar-left {
    justify-self: start;
}

.topbar-right {
    justify-self: end;
}

.view-switch {
    justify-self: center;
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.topbar-left .toolbar-btn,
.topbar-right .toolbar-btn {
    border-radius: 9px !important;
    border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 246, 248, 0.9)) !important;
    color: rgba(17, 24, 39, 0.82) !important;
    height: clamp(30px, 3.6vw, 42px) !important;
    padding: var(--top-toolbar-side-btn-padding-y) var(--top-toolbar-side-btn-padding-x) !important;
    min-width: auto;
    font-size: var(--top-toolbar-side-btn-font);
    gap: 4px;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    flex: 0 1 auto;
}

.topbar-left .toolbar-btn .text,
.topbar-right .toolbar-btn .text {
    white-space: nowrap;
    transition: opacity 0.2s ease, width 0.2s ease;
}

.topbar-left .toolbar-btn:hover,
.topbar-left .toolbar-btn:focus-visible,
.topbar-right .toolbar-btn:hover,
.topbar-right .toolbar-btn:focus-visible {
    border-color: rgba(var(--accent-rgb), 0.25) !important;
    color: rgba(var(--accent-strong-rgb), 0.9) !important;
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.12), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px);
    font-size: calc(var(--top-toolbar-side-btn-font) * 1.06) !important;
}

.topbar-right .toolbar-btn.primary {
    background: linear-gradient(180deg, rgba(245, 245, 247, 0.96), rgba(232, 233, 236, 0.92)) !important;
    border-color: rgba(var(--accent-rgb), 0.15) !important;
    color: rgba(17, 24, 39, 0.85) !important;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.topbar-right .toolbar-btn.primary:hover,
.topbar-right .toolbar-btn.primary:focus-visible {
    background: linear-gradient(180deg, rgba(232, 244, 255, 0.98), rgba(214, 229, 255, 0.92)) !important;
    border-color: rgba(var(--accent-rgb), 0.25) !important;
    color: rgba(var(--accent-strong-rgb), 0.95) !important;
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.12), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    font-size: calc(var(--top-toolbar-side-btn-font) * 1.06) !important;
}

.top-pressable {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    --press-x: 50%;
    --press-y: 50%;
    --press-radius: 64px;
}

.top-pressable::after {
    content: "";
    position: absolute;
    width: var(--press-radius);
    height: var(--press-radius);
    left: var(--press-x);
    top: var(--press-y);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 999px;
    pointer-events: none;
    background: var(--top-tab-ripple-color);
    opacity: 0;
}

.top-pressable.top-tab-press::after {
    animation: topTabRipple 420ms ease-out forwards;
}

body.non-chart-view #view-all-data {
    display: none !important;
}

.topbar-left .toolbar-btn.ghost,
.topbar-left .toolbar-btn.outline,
.topbar-right .toolbar-btn.ghost,
.topbar-right .toolbar-btn.outline {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 247, 249, 0.9)) !important;
}

.topbar-right .settings-dropdown {
    position: relative;
}

/* About launcher and page */
.about-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(17, 24, 39, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 242, 247, 0.92));
    font-size: clamp(8.5pt, 0.85vw, 10pt);
    font-weight: 600;
    color: rgba(17, 24, 39, 0.78);
    letter-spacing: 0.05em;
    min-width: clamp(48px, 4.4vw, 74px);
    height: clamp(24px, 2.8vw, 30px);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.about-trigger:hover,
.about-trigger:focus-visible {
    border-color: rgba(var(--accent-rgb), 0.45);
    color: rgba(var(--accent-strong-rgb), 0.95);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
    transform: translateY(-1px);
}
.about-trigger:focus-visible {
    outline: 2px solid rgba(var(--accent-strong-rgb), 0.6);
    outline-offset: 2px;
}

.about-page {
    display: none;
    width: 100%;
    min-height: calc(100vh - var(--top-toolbar-height));
    background: var(--bg-window);
    padding: clamp(20px, 3vw, 48px);
    overflow-y: auto;
}
body.about-page-visible .about-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2vw, 32px);
}
body.about-page-visible .app-main {
    display: none;
}
.about-page-inner {
    margin: 0 auto;
    width: min(960px, 100%);
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
    padding: clamp(20px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 32px);
}
.about-page-header {
    text-align: center;
    margin-bottom: clamp(24px, 3vw, 40px);
    font-family: "Latin Modern Roman", "Computer Modern", "CMU Serif", "Times New Roman", serif;
    color: var(--text-primary);
}
.jm-title-block {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.8vw, 10px);
    font-weight: 500;
    line-height: 1.25;
    color: rgba(17, 24, 39, 0.95);
}
.jm-line {
    display: block;
    margin: clamp(4px, 0.6vw, 8px) 0;
    color: rgba(17, 24, 39, 0.9);
}
.jm-title-main {
    font-size: clamp(20.8px, 2.56vw, 32px);
    letter-spacing: 0.01em;
    margin: 0;
}
.jm-title-sub {
    font-size: clamp(20.8px, 2.56vw, 32px);
    font-weight: 400;
    margin: 0;
    margin-top: clamp(2px, 0.2vw, 3px);
}
.jm-author {
    font-size: clamp(19px, 2.2vw, 26px);
    font-weight: 500;
    margin-top: clamp(12px, 1.4vw, 18px);
}
.jm-affiliation {
    font-size: clamp(17px, 1.9vw, 23px);
    font-weight: 400;
}
.jm-paper-type {
    font-size: clamp(16px, 1.7vw, 21px);
    font-variant: small-caps;
    letter-spacing: 0.2em;
    margin-top: clamp(12px, 1.5vw, 20px);
}
.jm-date {
    font-size: clamp(15px, 1.6vw, 19px);
    margin-top: clamp(10px, 1vw, 16px);
}
.author-asterisk {
    font-size: 0.75em;
    margin-left: 2px;
}
.about-hero {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    border-radius: 18px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    padding: clamp(20px, 3vw, 36px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 248, 253, 0.94));
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}
.about-portrait {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.25);
    background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(15,23,42,0.25));
}
.about-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.about-hero-body h3 {
    margin: 0;
    font-size: clamp(30px, 3vw, 40px);
    color: rgba(17, 24, 39, 0.95);
    line-height: 1.15;
}
.paper-title span {
    font-size: clamp(20px, 2.1vw, 28px);
    font-weight: 600;
    display: block;
    margin-top: 6px;
    color: rgba(17, 24, 39, 0.85);
}
.about-role {
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: clamp(15px, 1.45vw, 19px);
    color: rgba(var(--accent-strong-rgb), 0.92);
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.about-role .role-main {
    font-weight: 600;
}
.about-role .role-tag {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-strong-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.06);
    font-size: 0.9em;
    letter-spacing: 0.08em;
}
.about-footnote {
    margin: 0 auto clamp(16px, 2vw, 32px) auto;
    padding: 12px 18px;
    width: min(960px, 100%);
    font-size: 14px;
    color: rgba(17, 24, 39, 0.62);
    text-align: center;
    line-height: 1.4;
}
.about-bio-text {
    margin: 16px 0 20px 0;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(17, 24, 39, 0.88);
}
.about-meta-row {
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    background: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: rgba(17, 24, 39, 0.75);
}
.about-meta-row.compact {
    width: fit-content;
}
.meta-label {
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    color: rgba(17, 24, 39, 0.6);
}
.meta-value a {
    color: rgba(var(--accent-strong-rgb), 0.95);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.4);
    padding-bottom: 1px;
}
.meta-value a:hover,
.meta-value a:focus-visible {
    border-color: rgba(var(--accent-rgb), 0.85);
    outline: none;
}
.about-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 2vw, 24px);
}
.about-panel {
    border-radius: 14px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    padding: clamp(16px, 2vw, 26px);
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(247,249,253,0.9));
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}
.about-panel h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 20px;
    color: rgba(17, 24, 39, 0.92);
}
.about-panel p {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(17, 24, 39, 0.88);
}
.about-panel-credits {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(255,255,255,0.96));
}
.author-contact-card {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    background: rgba(248, 249, 252, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.author-contact-name {
    margin: 0 0 2px 0;
    font-weight: 600;
}
.author-contact-role {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: rgba(17, 24, 39, 0.8);
}
.author-contact-email {
    font-size: 13px;
    color: rgba(var(--accent-strong-rgb), 0.95);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.4);
    padding-bottom: 1px;
}
.author-contact-email:hover,
.author-contact-email:focus-visible {
    border-color: rgba(var(--accent-rgb), 0.85);
    outline: none;
}
.about-footer {
    display: flex;
    justify-content: flex-end;
}
.about-dismiss {
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    background: linear-gradient(180deg, rgba(248, 249, 252, 0.98), rgba(238, 240, 245, 0.94));
    color: rgba(17, 24, 39, 0.82);
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.about-dismiss:hover,
.about-dismiss:focus-visible {
    border-color: rgba(var(--accent-strong-rgb), 0.85);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
    transform: translateY(-1px);
    outline: none;
}

@media (min-width: 720px) {
    .about-content-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}
@media (max-width: 640px) {
    .about-hero {
        grid-template-columns: 1fr;
    }
    .about-page-inner {
        padding: 20px;
    }
    .about-footer {
        width: 100%;
    }
    .about-dismiss {
        width: 100%;
        text-align: center;
    }
}

/* Abstract hover tooltip next to "Full Sample" button */
.abstract-tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
}

.abstract-btn {
    border-radius: 9px;
    border: 1px solid rgba(17, 24, 39, 0.18);
    background: #ffffff;
    color: var(--text-primary);
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12.338pt;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.abstract-btn .abstract-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(17, 24, 39, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.096px;
    line-height: 18px;
    text-align: center;
}

.abstract-btn:hover,
.abstract-btn:focus-visible {
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    transform: translateY(-1px);
}

.abstract-btn.abstract-active {
    border-color: rgba(var(--accent-rgb), 0.55) !important;
    background: #ffffff !important;
    color: rgba(var(--accent-rgb), 0.95) !important;
    box-shadow: 0 6px 14px rgba(var(--accent-rgb), 0.2), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transform: none !important;
}

.abstract-btn.abstract-active:hover,
.abstract-btn.abstract-active:focus-visible {
    border-color: rgba(var(--accent-rgb), 0.6) !important;
    background: #ffffff !important;
    color: rgba(var(--accent-rgb), 1) !important;
    box-shadow: 0 7px 16px rgba(var(--accent-rgb), 0.24), 0 3px 6px rgba(0, 0, 0, 0.08) !important;
    transform: none !important;
}

.abstract-btn.abstract-active .abstract-icon {
    border-color: rgba(var(--accent-rgb), 0.45);
    background: #ffffff;
    color: rgba(var(--accent-rgb), 0.95);
}

.abstract-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    width: 1040px;
    max-width: min(1040px, 95vw);
    padding: 18px;
    border-radius: 10px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    background: #ffffff;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.18);
    color: var(--text-primary);
    font-size: 8.883pt;
    line-height: 1.45;
    z-index: 1200;
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
    transition:
        opacity 0.15s ease-out,
        transform 0.15s ease-out,
        visibility 0.15s ease-out;
    pointer-events: auto;
}

.abstract-tooltip.abstract-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-40%);
    pointer-events: none;
}

.abstract-tooltip::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 36px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-left: 1px solid rgba(17, 24, 39, 0.12);
    border-top: 1px solid rgba(17, 24, 39, 0.12);
    transform: rotate(45deg);
}

.abstract-title {
    font-weight: 700;
    font-size: 12.386pt;
    margin-bottom: 12px;
}


.top-tab-rail {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--top-tab-gap);
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
}

.top-tab-wrapper {
    --tab-anchor-shift: 0px;
    position: relative;
    display: flex;
    flex: 0 0 auto;
    padding: 0 var(--top-tab-hover-corridor);
    margin: 0 calc(var(--top-tab-hover-corridor) * -1);
    min-height: 0;
    transform: translateX(var(--tab-anchor-shift, 0px));
    transition:
        transform var(--top-tab-expand-duration) cubic-bezier(0.2, 0.8, 0.4, 1),
        filter var(--top-tab-expand-duration) ease;
}

.top-tab-wrapper::after {
    content: "";
    position: absolute;
    top: calc(var(--top-tab-hover-corridor) * -1);
    bottom: calc(var(--top-tab-hover-corridor) * -1);
    left: 0;
    right: 0;
    pointer-events: auto;
    z-index: 0;
}

.top-tab-wrapper:first-child {
    margin-left: 0;
    padding-left: 0;
}

.top-tab-wrapper:last-child {
    margin-right: 0;
    padding-right: 0;
}

.top-tab-card {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(1px, 0.3vw, 6px) !important;
    padding: var(--top-tab-padding-block) var(--top-tab-padding-inline) !important;
    padding-left: calc(var(--top-tab-padding-inline) * 0.75);
    padding-right: calc(var(--top-tab-padding-inline) * 0.45);
    margin: 0;
    border-radius: 10px !important;
    border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 246, 248, 0.92)) !important;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    height: auto !important;
    min-height: var(--top-tab-min-height);
    line-height: 1.3;
    width: auto;
    min-width: var(--top-tab-collapsed-width);
    flex: 0 1 auto;
    max-width: var(--top-tab-expanded-fallback);
    --tab-expanded-width: var(--top-tab-expanded-fallback);
    --tab-label-max: 0px;
    transform: scale(1);
    transform-origin: center;
    transition:
        max-width var(--top-tab-collapse-duration) cubic-bezier(0.15, 0.85, 0.3, 1.05),
        flex-basis var(--top-tab-collapse-duration) cubic-bezier(0.15, 0.85, 0.3, 1.05),
        transform var(--top-tab-collapse-duration) cubic-bezier(0.2, 0.8, 0.45, 1.05),
        box-shadow var(--top-tab-collapse-duration) ease,
        border-color var(--top-tab-collapse-duration) ease,
        color 0.45s ease,
        background var(--top-tab-collapse-duration) ease,
        filter var(--top-tab-collapse-duration) ease !important;
    overflow: hidden;
    position: relative;
    z-index: 1;
    isolation: isolate;
    --press-x: 50%;
    --press-y: 50%;
    --press-radius: 72px;
}

.top-tab-card::before {
    content: "";
    position: absolute;
    inset: -20% -10%;
    background: radial-gradient(circle at var(--press-x) var(--press-y), rgba(var(--accent-strong-rgb), 0.35), transparent 62%);
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.6, 1);
    mix-blend-mode: screen;
    filter: blur(20px);
}

.top-tab-card::after {
    content: "";
    position: absolute;
    top: -140%;
    bottom: -140%;
    width: 32%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    opacity: 0;
    transform: translateX(-160%) skewX(-12deg);
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.top-tab-card.active {
    max-width: var(--tab-expanded-max, var(--top-tab-expanded-fallback));
    flex: 0 1 var(--tab-expanded-max, var(--top-tab-expanded-fallback));
    justify-content: flex-start !important;
    gap: clamp(3px, 0.5vw, 8px) !important;
    padding-left: calc(var(--top-tab-padding-inline) * 0.95);
    padding-right: calc(var(--top-tab-padding-inline) * 0.75);
    transition-delay: 0s;
}

.top-tab-card.top-tab-expanded {
    max-width: var(--tab-expanded-max, var(--top-tab-expanded-fallback));
    flex: 0 1 var(--tab-expanded-max, var(--top-tab-expanded-fallback));
}
.top-tab-card:hover,
.top-tab-card:focus-visible,
.top-tab-wrapper:hover .top-tab-card,
.top-tab-wrapper.hover-hold .top-tab-card,
.top-tab-wrapper:focus-within .top-tab-card {
    max-width: var(--tab-expanded-max, var(--top-tab-expanded-fallback));
    flex: 0 1 var(--tab-expanded-max, var(--top-tab-expanded-fallback));
}
.top-tab-card:hover,
.top-tab-card:focus-visible,
.top-tab-wrapper:hover .top-tab-card,
.top-tab-wrapper.hover-hold .top-tab-card,
.top-tab-wrapper:focus-within .top-tab-card,
.top-tab-card.active,
.top-tab-wrapper.is-expanding .top-tab-card {
    --tab-motion-duration: var(--top-tab-expand-duration);
}

.top-tab-wrapper.is-collapsing .top-tab-card {
    --tab-motion-duration: var(--top-tab-collapse-duration);
}

/* Ensure smooth, visible collapse when hover ends */
.top-tab-card:not(:hover):not(.active):not(.top-tab-expanded) {
    /* Collapse width very quickly (but not 0s) so text wrapping snaps back without flicker */
    transition:
        max-width 60ms ease-out,
        flex-basis 60ms ease-out,
        transform var(--top-tab-collapse-duration) cubic-bezier(0.2, 0.8, 0.45, 1.05),
        box-shadow var(--top-tab-collapse-duration) ease,
        border-color var(--top-tab-collapse-duration) ease,
        color 0.45s ease,
        background var(--top-tab-collapse-duration) ease,
        filter var(--top-tab-collapse-duration) ease !important;
}

.top-tab-card:not(.active):hover,
.top-tab-wrapper:hover .top-tab-card:not(.active),
.top-tab-wrapper.hover-hold .top-tab-card:not(.active),
.top-tab-wrapper:focus-within .top-tab-card:not(.active) {
	transform: translateY(-2px) scale(1.02);
	border-color: rgba(17, 24, 39, 0.18) !important;
	box-shadow: 0 14px 32px rgba(17, 24, 39, 0.18), 0 4px 10px rgba(0, 0, 0, 0.08) !important;
	color: rgba(17, 24, 39, 0.92) !important;
	background: linear-gradient(180deg, rgba(17, 24, 39, 0.06), rgba(17, 24, 39, 0.03)) !important; /* subtle grey hover */
	filter: drop-shadow(0 15px 25px rgba(17, 24, 39, 0.18));
}

.top-tab-card:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--top-tab-focus-ring),
        0 0 0 6px rgba(var(--accent-rgb), 0.12),
        0 6px 16px rgba(var(--accent-rgb), 0.18);
}

.top-tab-card.active {
	border-color: rgba(var(--accent-rgb), 0.45) !important;
	background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.85)) !important;
	box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.28), 0 4px 12px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255,255,255,0.65) !important;
	color: #ffffff !important;
    transform: scale(var(--top-tab-depth-scale));
    filter: drop-shadow(0 24px 35px rgba(var(--accent-rgb), 0.28));
}

.top-tab-card.active:hover,
.top-tab-wrapper:hover .top-tab-card.active,
.top-tab-wrapper.hover-hold .top-tab-card.active,
.top-tab-wrapper:focus-within .top-tab-card.active {
	border-color: rgba(var(--accent-rgb), 0.45) !important;
	background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.97), rgba(var(--accent-rgb), 0.87)) !important;
	box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.32), 0 6px 16px rgba(var(--accent-rgb), 0.18) !important;
	color: #ffffff !important;
}

.top-tab-card.active:active {
	border-color: rgba(var(--accent-rgb), 0.45) !important;
	background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.93), rgba(var(--accent-rgb), 0.83)) !important;
	box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.18), 0 2px 6px rgba(var(--accent-rgb), 0.12) !important;
	color: #ffffff !important;
}

.top-tab-wrapper.is-expanding .top-tab-card {
    filter: drop-shadow(0 26px 42px rgba(var(--accent-rgb), 0.34));
}

.top-tab-wrapper.is-collapsing .top-tab-card {
    filter: drop-shadow(0 10px 24px rgba(15, 23, 42, 0.2));
}

.top-tab-wrapper.hover-hold .top-tab-card::before,
.top-tab-card.active::before {
    opacity: 0;
    transform: scale(1);
}

/* Glint animations disabled */
/*
.top-tab-wrapper.is-expanding .top-tab-card::before {
    animation: topTabBloom var(--top-tab-expand-flare-duration) ease-out forwards;
}

.top-tab-wrapper.is-collapsing .top-tab-card::before {
    animation: topTabCollapsePulse var(--top-tab-collapse-flare-duration) ease-out forwards;
}
*/

.top-tab-wrapper.hover-hold .top-tab-card::after,
.top-tab-card.active::after {
    opacity: 0;
}

/* Sheen/sweep animations disabled */
/*
.top-tab-wrapper.is-expanding .top-tab-card::after {
    opacity: 1;
    animation: topTabFlareSweep calc(var(--top-tab-expand-flare-duration) * 0.9) cubic-bezier(0.19, 0.78, 0.26, 1) forwards;
}

.top-tab-wrapper.is-collapsing .top-tab-card::after {
    opacity: 1;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.6), rgba(var(--accent-rgb), 0.28), transparent);
    animation: topTabCurtain var(--top-tab-collapse-flare-duration) ease forwards;
}
*/

.top-tab-badge {
    --top-tab-badge-bg: rgba(17, 24, 39, 0.08);
    --badge-diameter: var(--top-tab-badge-diameter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--badge-diameter);
    height: var(--badge-diameter);
    box-sizing: border-box;
    padding: 0 clamp(4px, 0.35vw, 8px);
    border-radius: 999px;
    background: var(--top-tab-badge-bg);
    color: rgba(17, 24, 39, 0.68);
    font-weight: 700;
    font-size: calc(var(--top-tab-title-font) * 0.92);
    font-family: var(--font-body);
    letter-spacing: 0.12px;
    line-height: 1;
    text-align: center;
    text-rendering: geometricPrecision;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: background 0.2s ease, color 0.2s ease;
}

.top-tab-card:not(.active):hover .top-tab-badge,
.top-tab-wrapper:hover .top-tab-card:not(.active) .top-tab-badge,
.top-tab-wrapper.hover-hold .top-tab-card:not(.active) .top-tab-badge,
.top-tab-wrapper:focus-within .top-tab-card:not(.active) .top-tab-badge {
	--top-tab-badge-bg: rgba(17, 24, 39, 0.10); /* neutral grey on hover */
	color: rgba(17, 24, 39, 0.80);
}

.top-tab-card.active .top-tab-badge {
    --top-tab-badge-bg: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.top-tab-card.active:hover .top-tab-badge,
.top-tab-wrapper:hover .top-tab-card.active .top-tab-badge,
.top-tab-wrapper.hover-hold .top-tab-card.active .top-tab-badge,
.top-tab-wrapper:focus-within .top-tab-card.active .top-tab-badge {
    --top-tab-badge-bg: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

.top-tab-card.active:active .top-tab-badge {
    --top-tab-badge-bg: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}

.top-tab-copy {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    opacity: 0.7;
    pointer-events: auto;
    transition: opacity 0.25s ease;
}

.top-tab-card:hover .top-tab-copy,
.top-tab-card:focus-visible .top-tab-copy,
.top-tab-wrapper:hover .top-tab-copy,
.top-tab-wrapper.hover-hold .top-tab-copy,
.top-tab-wrapper:focus-within .top-tab-copy,
.top-tab-card.active .top-tab-copy {
    opacity: 1;
}

.top-tab-title {
    position: relative;
    display: inline-block;
    min-width: 0;
    font-size: var(--top-tab-title-font);
    font-weight: 400;
    color: rgba(17, 24, 39, 0.65);
    letter-spacing: 0.05px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.3;
    max-width: 100%;
    word-wrap: break-word;
    transition: font-size 0.2s ease, color 0.3s ease, letter-spacing 0.2s ease;
}

.top-tab-title .top-tab-ghost {
    visibility: hidden;
    display: block;
    white-space: inherit;
}

.top-tab-title .top-tab-typed {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: inline-block;
    white-space: inherit;
}

.top-tab-card.active .top-tab-title {
    white-space: normal;
}

.top-tab-card.top-tab-expanded .top-tab-title,
.top-tab-wrapper.hover-hold:hover .top-tab-title {
    white-space: normal;
}

/* Force wrapping via JS-added class - higher specificity than hover-hold */
.top-tab-wrapper .top-tab-title.force-wrap-now {
    white-space: normal;
}

/* =========================================================================
   WRAPPED TABS (3.1, 3.2, 3.3, 3.4) - CONSOLIDATED OVERRIDES
   ========================================================================= */

/* Title: force wrapping + tighter line height */
#section-3-1-view .top-tab-title,
#predictive-view .top-tab-title,
#disagreement-view .top-tab-title,
#forecast-performance .top-tab-title {
    white-space: normal !important;
    line-height: 1.18;
}

/* Copy container: minimal gap between badge and title, align to top */
#section-3-1-view .top-tab-copy,
#predictive-view .top-tab-copy,
#disagreement-view .top-tab-copy,
#forecast-performance .top-tab-copy {
    gap: clamp(1px, 0.25vw, 3px);
    align-items: flex-start;
}

/* Prevent hover/active scaling from reflowing wrapped titles */
#section-3-1-view.top-tab-card .top-tab-title,
#section-3-1-view.top-tab-card:hover .top-tab-title,
#section-3-1-view.top-tab-card:focus-visible .top-tab-title,
#section-3-1-view.top-tab-card.active .top-tab-title,
.top-tab-wrapper:hover #section-3-1-view .top-tab-title,
.top-tab-wrapper.hover-hold #section-3-1-view .top-tab-title,
.top-tab-wrapper:focus-within #section-3-1-view .top-tab-title,
#predictive-view.top-tab-card .top-tab-title,
#predictive-view.top-tab-card:hover .top-tab-title,
#predictive-view.top-tab-card:focus-visible .top-tab-title,
#predictive-view.top-tab-card.active .top-tab-title,
.top-tab-wrapper:hover #predictive-view .top-tab-title,
.top-tab-wrapper.hover-hold #predictive-view .top-tab-title,
.top-tab-wrapper:focus-within #predictive-view .top-tab-title,
#disagreement-view.top-tab-card .top-tab-title,
#disagreement-view.top-tab-card:hover .top-tab-title,
#disagreement-view.top-tab-card:focus-visible .top-tab-title,
#disagreement-view.top-tab-card.active .top-tab-title,
.top-tab-wrapper:hover #disagreement-view .top-tab-title,
.top-tab-wrapper.hover-hold #disagreement-view .top-tab-title,
.top-tab-wrapper:focus-within #disagreement-view .top-tab-title,
#forecast-performance.top-tab-card .top-tab-title,
#forecast-performance.top-tab-card:hover .top-tab-title,
#forecast-performance.top-tab-card:focus-visible .top-tab-title,
#forecast-performance.top-tab-card.active .top-tab-title,
.top-tab-wrapper:hover #forecast-performance .top-tab-title,
.top-tab-wrapper.hover-hold #forecast-performance .top-tab-title,
.top-tab-wrapper:focus-within #forecast-performance .top-tab-title {
    font-size: var(--top-tab-title-font);
    letter-spacing: 0.05px;
}

/* Badge: smaller padding */
#section-3-1-view .top-tab-badge,
#predictive-view .top-tab-badge,
#disagreement-view .top-tab-badge,
#forecast-performance .top-tab-badge {
    margin-right: 1px;
    padding: 0 clamp(5px, 0.4vw, 9px);
}

/* Card: minimal padding; let width flex but cap per-tab */
#section-3-1-view.top-tab-card,
#predictive-view.top-tab-card,
#disagreement-view.top-tab-card,
#forecast-performance.top-tab-card {
    padding-left: clamp(2px, 0.25vw, 5px) !important;
    padding-right: clamp(2px, 0.25vw, 5px) !important;
    flex: 0 1 var(--wrapped-tab-max, 100%);
    max-width: var(--wrapped-tab-max, 100%);
}

/* Card active state: same width */
#section-3-1-view.top-tab-card.active,
#predictive-view.top-tab-card.active,
#disagreement-view.top-tab-card.active,
#forecast-performance.top-tab-card.active {
    padding-left: clamp(3px, 0.3vw, 6px) !important;
    padding-right: clamp(3px, 0.3vw, 6px) !important;
    max-width: var(--wrapped-tab-max, 100%);
}

/* Per-tab max widths to enforce wrapping */
#section-3-1-view {
    --wrapped-tab-max: 195px;
}

#predictive-view {
    --wrapped-tab-max: 200px;
}

#disagreement-view {
    --wrapped-tab-max: 280px;
}

#forecast-performance {
    --wrapped-tab-max: 230px;
}

.top-tab-card:hover .top-tab-title,
.top-tab-card:focus-visible .top-tab-title,
.top-tab-wrapper:hover .top-tab-title,
.top-tab-wrapper.hover-hold .top-tab-title,
.top-tab-wrapper:focus-within .top-tab-title {
    font-size: var(--top-tab-title-font-active);
    color: rgba(17, 24, 39, 0.92);
    letter-spacing: 0.2px;
}

/* Tabs 3.1, 3.2, 3.3, 3.4: Keep wrapping but allow font size to grow normally */
#section-3-1-view:hover .top-tab-title,
#section-3-1-view:focus-visible .top-tab-title,
#section-3-1-view.top-tab-card:hover .top-tab-title,
.top-tab-wrapper:hover #section-3-1-view .top-tab-title,
.top-tab-wrapper.hover-hold #section-3-1-view .top-tab-title,
.top-tab-wrapper:focus-within #section-3-1-view .top-tab-title,
#predictive-view:hover .top-tab-title,
#predictive-view:focus-visible .top-tab-title,
#predictive-view.top-tab-card:hover .top-tab-title,
.top-tab-wrapper:hover #predictive-view .top-tab-title,
.top-tab-wrapper.hover-hold #predictive-view .top-tab-title,
.top-tab-wrapper:focus-within #predictive-view .top-tab-title,
#disagreement-view:hover .top-tab-title,
#disagreement-view:focus-visible .top-tab-title,
#disagreement-view.top-tab-card:hover .top-tab-title,
.top-tab-wrapper:hover #disagreement-view .top-tab-title,
.top-tab-wrapper.hover-hold #disagreement-view .top-tab-title,
.top-tab-wrapper:focus-within #disagreement-view .top-tab-title,
#forecast-performance:hover .top-tab-title,
#forecast-performance:focus-visible .top-tab-title,
#forecast-performance.top-tab-card:hover .top-tab-title,
.top-tab-wrapper:hover #forecast-performance .top-tab-title,
.top-tab-wrapper.hover-hold #forecast-performance .top-tab-title,
.top-tab-wrapper:focus-within #forecast-performance .top-tab-title {
    white-space: normal !important;
}

.top-tab-card.active .top-tab-title {
    font-size: var(--top-tab-title-font-active);
    color: #ffffff;
    letter-spacing: 0.2px;
}

/* Tabs 3.1, 3.2, 3.3, 3.4: Keep wrapping when active */
#section-3-1-view.active .top-tab-title,
#section-3-1-view.top-tab-card.active .top-tab-title,
#predictive-view.active .top-tab-title,
#predictive-view.top-tab-card.active .top-tab-title,
#disagreement-view.active .top-tab-title,
#disagreement-view.top-tab-card.active .top-tab-title,
#forecast-performance.active .top-tab-title,
#forecast-performance.top-tab-card.active .top-tab-title {
    white-space: normal !important;
}

@media (prefers-reduced-motion: reduce) {
    .top-tab-card {
        transition: none !important;
    }
    .top-tab-copy {
        transition: none;
    }
    .top-tab-wrapper {
        transition: none;
        transform: translateX(0);
    }
    .top-toolbar {
        animation: none;
    }
    .top-pressable::after {
        display: none;
    }
    .top-tab-card::after,
    .top-tab-card::before {
        animation: none;
        transition: none;
    }
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.toolbar-separator {
    width: 1px;
    height: 36px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        #c0c0c0 10%,
        #9a9a9a 50%,
        #c0c0c0 90%,
        transparent 100%
    );
    margin: 0 6px;
    flex-shrink: 0;
}

/* Appearance drawer (top main menu) - TABBED INTERFACE matching desktop QTabWidget */
.appearance-only-sidebar {
    background: var(--bg-elevated);
    padding-left: 0;
    padding-right: 0;
}
.appearance-only-sidebar .appearance-help-text {
    font-style: italic;
    color: #666666;
    font-size: 10.886pt;
    margin: 8px 0 14px 0;
}

.settings-only-sidebar {
    background: var(--bg-elevated);
    padding-left: 0;
    padding-right: 0;
}
.settings-only-sidebar .settings-help-text {
    font-size: 12.096pt;
    color: #666666;
    margin: 12px 0;
    line-height: 1.5;
}
.settings-only-sidebar .settings-help-text p {
    margin: 8px 0;
}
.settings-only-sidebar .settings-help-text strong {
    color: #444444;
}

.hrs-only-sidebar {
    background: var(--bg-elevated);
    padding-left: 0;
    padding-right: 0;
}

.hrs-only-sidebar .tab-content-area {
    padding: 18px;
    overflow-y: auto;
}

.hrs-sidebar-intro {
    font-size: 12.701pt;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.hrs-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 16px;
}

.hrs-toggle-row-bottom {
    margin-top: 16px;
    padding: 16px 16px 20px 16px;
    border-top: 1px solid var(--border-color);
}

.hrs-toggle-note {
    font-size: 11.491pt;
    color: var(--text-secondary);
    margin: 8px 16px 0 16px;
    line-height: 1.4;
}

.hrs-toggle-label {
    font-size: 12.701pt;
    color: var(--text-secondary);
}

.hrs-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.hrs-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.hrs-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border-color);
    border-radius: 999px;
    transition: background 0.2s ease;
}

.hrs-switch-slider::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.hrs-switch input:checked + .hrs-switch-slider {
    background: var(--accent);
}

.hrs-switch input:checked + .hrs-switch-slider::before {
    transform: translateX(24px) translateY(-50%);
}

.hrs-sidebar-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 5px var(--space-3) 5px var(--space-3);
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    overflow: visible;
    margin: var(--space-5) 0 var(--space-2) 0;
}


.hrs-sidebar-group::after {
    content: attr(data-badge);
    position: absolute;
    top: -11px;
    left: var(--space-3);
    background: var(--bg-elevated);
    padding: 0 var(--space-2);
    font-weight: 700;
    font-size: 13.91pt;
    color: #000000;
    letter-spacing: 0.3px;
}


.hrs-sidebar-group + .hrs-sidebar-group {
    margin-top: 24px;
}

.hrs-group-title {
    font-size: 15.241pt;
    font-weight: 700;
    color: rgba(17, 24, 39, 0.9);
    letter-spacing: 0.25px;
}

.hrs-group-subtitle {
    font-size: 12.096pt;
    color: rgba(17, 24, 39, 0.58);
}

.hrs-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.hrs-item-title {
    font-size: 16.934pt;
    font-weight: 900;
    color: rgba(17, 24, 39, 0.9);
}

.hrs-item-subtitle {
    font-size: 12.096pt;
    color: rgba(17, 24, 39, 0.58);
}
.appearance-only-sidebar .appearance-tab-buttons {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-sunken);
    padding: 0 12px;
    margin-bottom: 0;
    min-height: 32px;
}
.appearance-only-sidebar .appearance-tab-btn {
    padding: 6px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 13.306px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.2;
}
.appearance-only-sidebar .appearance-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(0,0,0,0.03);
}
.appearance-only-sidebar .appearance-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.appearance-only-sidebar .appearance-tab-content-area {
    padding: 16px;
    max-height: none;
    overflow-y: auto;
}
.appearance-only-sidebar .appearance-tab-content {
    display: none;
}
.appearance-only-sidebar .appearance-tab-content.active {
    display: block;
}

.appearance-only-sidebar .appearance-section {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: var(--space-4);
    margin-bottom: 16px;
}
.appearance-only-sidebar .appearance-section h4 {
    margin: 0 0 12px 0;
    font-size: 16.934px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

/* Appearance sidebar measure-row: wider labels to prevent wrapping */
.appearance-only-sidebar .measure-row {
    grid-template-columns: auto minmax(140px, 1fr);
}

.appearance-only-sidebar .measure-row label {
    white-space: nowrap;
}

.appearance-only-sidebar .measure-row select,
.appearance-only-sidebar .measure-row input[type="text"],
.appearance-only-sidebar .measure-row input[type="number"] {
    width: 100%;
    max-width: 100%;
}

/* Compact param-control spacing in appearance sidebar */
.appearance-only-sidebar .param-control {
    margin: 8px 0;
}

.appearance-only-sidebar .checkbox-row {
    margin: 6px 0;
}


/* Toolbar Buttons - Flat variants */
.toolbar-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 6px 10px !important;
    height: 34px !important;
    border-radius: 6px !important;
    border: 1px solid var(--glass-border) !important;
    background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text-primary) !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    outline: none !important;
    box-shadow: inset 0 1px rgba(255,255,255,0.6);
}
.toolbar-btn i { font-size: 13.515pt; line-height: 1; }
.toolbar-btn .text { line-height: 1.2; font-weight: 500; }
.toolbar-btn:hover { background: linear-gradient(180deg, var(--glass-hover-top), var(--glass-hover-bottom)) !important; border-color: var(--glass-border-strong) !important; }
.toolbar-btn:active { background: linear-gradient(180deg, var(--glass-active-top), var(--glass-active-bottom)) !important; border-color: var(--glass-border-strong) !important; }

/* Variants all share glass base for unity */
.toolbar-btn.primary {
    background: linear-gradient(180deg, rgba(76,129,230,0.9), rgba(53,122,232,0.9)) !important;
    color: #fff !important; font-weight: 600 !important; border-color: var(--accent-active) !important;
}
.toolbar-btn.primary:hover { background: linear-gradient(180deg, rgba(90,163,240,0.95), rgba(53,122,232,0.95)) !important; }
.toolbar-btn[hidden] {
    display: none !important;
}
/* Override toolbar-btn transition for tabs - must come after .toolbar-btn rule */
.toolbar-btn.top-tab-card {
    transition:
        width var(--tab-motion-duration) cubic-bezier(0.15, 0.85, 0.3, 1.05),
        transform var(--tab-motion-duration) cubic-bezier(0.2, 0.8, 0.45, 1.05),
        box-shadow var(--tab-motion-duration) ease,
        border-color var(--tab-motion-duration) ease,
        color 0.45s ease,
        background var(--tab-motion-duration) ease,
        filter var(--tab-motion-duration) ease !important;
}
/* Exit Stop Motion button - red styling */
#exit-stop-motion {
    background: linear-gradient(180deg, rgba(220,53,69,0.9), rgba(200,35,51,0.9)) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-color: rgba(200,35,51,0.8) !important;
}
#exit-stop-motion:hover {
    background: linear-gradient(180deg, rgba(232,62,78,0.95), rgba(200,35,51,0.95)) !important;
    border-color: rgba(220,53,69,0.9) !important;
}
#exit-stop-motion:active {
    background: linear-gradient(180deg, rgba(200,35,51,0.95), rgba(180,25,41,0.95)) !important;
}

/* Settings Dropdown */
.settings-dropdown {
    position: relative;
}

.dropdown-arrow {
    font-size: 10.886px;
    margin-left: 3px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.settings-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.settings-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    min-width: 200px;
    padding: 6px;
    display: none;
    z-index: 2000;
    animation: dropdownFadeIn 0.15s ease-out;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.settings-dropdown.drop-up .settings-menu {
    top: auto;
    bottom: calc(100% + 6px);
    animation: dropdownFadeInUp 0.15s ease-out;
}

.settings-dropdown.open .settings-menu {
    display: block;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dropdownFadeInUp {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-item {
    display: block;
    width: 100%;
    padding: 7px 14px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 13.306pt;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s ease;
    font-family: inherit;
}

.menu-item:hover {
    background: #e5f3ff;
}

.menu-separator {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

/* Responsive: collapse labels on narrow widths, keep icons */
@media (max-width: 1280px) {
    .topbar-left .text, .topbar-right .text { display: none; }
    .toolbar-btn { padding: 6px !important; }
}

/* =========================================================================
   MAIN APPLICATION LAYOUT
   ========================================================================= */

.app-main {
    display: flex;
    height: calc(100vh - var(--top-toolbar-height));
    width: 100vw;
    overflow: hidden;
}

/* =========================================================================
   SIDEBAR - EXACT DESKTOP MATCH
   ========================================================================= */

.sidebar,
.mur-only-sidebar {
    flex: 0 1 18%;
    min-width: 450px;
    max-width: 560px;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
}

/* MUR sidebar should not shrink with window width; keep a firm width */
.mur-only-sidebar {
    flex: 0 0 450px; /* no shrink, fixed basis */
    min-width: 450px;
}

.sidebar-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-elevated);
}

.sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sidebar-header h1 {
    font-size: 19.354px;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.2px;
    margin-bottom: 10px;
    line-height: 1.2;
}

.sidebar-header .abstract-tooltip-wrapper {
    flex-shrink: 0;
    position: relative;
}

.sidebar-header .abstract-tooltip {
    position: fixed;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 1040px;
    max-width: min(1040px, calc(100vw - 40px));
    z-index: 10000;
}

.sidebar-header .abstract-tooltip::before {
    content: none;
}

.header-accent {
    display: none;
}

/* Tabs */
.tab-buttons {
    display: flex;
    background: var(--bg-elevated);
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    padding: 4px 4px 0 4px;
    gap: 2px;
    position: relative;
    z-index: 4;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    /* dual shadows for floating bar: one up, one down */
    box-shadow:
        0 16px 22px -14px rgba(9, 13, 20, 0.28),   /* bottom shadow softened */
        0 -12px 18px -14px rgba(9, 13, 20, 0.18);  /* top shadow softened */
}

.section-nav {
    display: grid;
    gap: 12px;
    margin: var(--space-2) 0 var(--space-3);
    padding: 0 var(--space-3);
}

.section-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    padding: 14px 10px;
    border-radius: 10px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    background: #ffffff;
    color: var(--text-primary);
    box-shadow: 0 12px 28px -20px rgba(15, 23, 42, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    cursor: pointer;
    position: relative;
}

.section-item:hover {
    transform: translateY(-1px);
    border-color: rgba(17, 24, 39, 0.22);
    box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.24);
    background: rgba(15, 23, 42, 0.04);
}

.section-item:focus-visible {
    outline: 2px solid rgba(15, 23, 42, 0.25);
    outline-offset: 3px;
}

.section-item.active {
	border-color: rgba(var(--accent-rgb), 0.45);
	box-shadow: 0 20px 36px -18px rgba(var(--accent-rgb), 0.18), 0 2px 6px rgba(var(--accent-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.65);
	background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.85));
}

.section-group + .section-item {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: rgba(17, 24, 39, 0.78);
    font-weight: 700;
    font-size: 14.515pt;
    font-family: var(--font-body);
    letter-spacing: 0.3px;
}

.section-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}

.section-title {
    font-size: 15.12pt;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}

.section-sub {
    font-size: 12.338pt;
    color: var(--text-secondary);
    line-height: 1.35;
    max-width: 240px;
}

.section-arrow {
    margin-left: auto;
    align-self: center;
    color: rgba(17, 24, 39, 0.65);
    font-size: 14.515pt;
    transition: transform 0.18s ease, color 0.18s ease;
}

.section-item:hover .section-arrow,
.section-item.active .section-arrow {
    color: rgba(17, 24, 39, 0.65);
}

.section-item.active .section-arrow {
    transform: translateX(2px);
}

.section-pane {
    display: none;
}

.section-pane.active {
    display: block;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 34px -28px rgba(9, 13, 20, 0.4);
    padding: var(--space-3);
    margin: 0 var(--space-3) var(--space-3);
    animation: sectionFade 0.22s ease;
}

.section-pane[data-section="hrs"],
.section-pane[data-section="gr"] {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: var(--space-3);
    margin: 0 0 var(--space-3);
}

.section-explainer {
    font-size: 13.306pt;
    color: var(--text-secondary);
    line-height: 1.55;
    display: grid;
    gap: var(--space-1);
}

@keyframes sectionFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1180px) {
    .section-item {
        flex-direction: column;
        align-items: stretch;
    }

    .section-arrow {
        align-self: flex-end;
        margin-top: 4px;
    }

    .section-sub {
        max-width: none;
    }
}

/* Hairline at the very bottom of the tab bar (kept separate from active underline) */
.tab-buttons::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px; /* sit just below bar so active underline stays crisp */
    height: 1px;
    background: rgba(17, 24, 39, 0.12);
    pointer-events: none;
    z-index: 0;
}

.tab-btn {
    background: transparent;
    color: var(--text-secondary);
    padding: 10px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    font-size: 13.306px;
    font-weight: 500;
    transition: all 0.15s ease;
    white-space: nowrap;
    position: relative;
}

.tab-btn:hover {
    background: rgba(0,0,0,0.02);
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--text-primary);
    font-weight: 600;
    border-bottom-color: var(--accent);
    margin-bottom: -1px;
    z-index: 1;
}

.tab-content-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 var(--space-3) var(--space-3) var(--space-3);
    background: var(--bg-elevated);
    position: relative;
}

/* Top fade for Forecasts tab only (avoid affecting Data panel) */
.tab-content-area #forecasts-tab {
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,0.6) 6px,
        rgba(0,0,0,1) 12px
    );
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,0.6) 6px,
        rgba(0,0,0,1) 12px
    );
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: tabFadeIn 0.2s ease-out;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Info Box */
.info-box {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-left: 4px solid var(--accent);
    padding: 15px 18px;
    margin-bottom: 28px;
    font-size: 12.701pt;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.info-box:hover {
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Group Boxes */
.group-box {
    background: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 12px;
    margin: var(--space-5) 0 var(--space-2) 0;
    padding: var(--space-4) var(--space-3) var(--space-3) var(--space-3);
    position: relative;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.group-box:hover {
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.group-box > *:first-child {
    margin-top: 0 !important;
}

.group-title {
    position: relative;
    display: block;
    margin-bottom: var(--space-2);
    padding: 0 0 6px 0;
    background: transparent;
    font-weight: 700;
    font-size: 13.91pt;
    color: #000000;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
}

/* Checkbox Rows */
.checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin: 9px 0;
    padding: 3px 0;
}

.checkbox-row label {
    font-size: 12.701pt;
    color: var(--text-primary);
    cursor: pointer;
    line-height: 1.4;
    order: 1;
    flex: 1;
}

.checkbox-row input[type="checkbox"] {
    order: 2;
    -webkit-appearance: none;
    appearance: none;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    background: var(--border-color);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background 0.2s ease;
}

.checkbox-row input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

.checkbox-row input[type="checkbox"]:checked {
    background: var(--accent);
}

.checkbox-row input[type="checkbox"]:checked::after {
    transform: translateX(24px) translateY(-50%);
}

.checkbox-row input[type="checkbox"]:focus-visible {
    outline: none;
}

/* Pre-FOMC Controls */
.pre-fomc-controls {
    margin: 0 0 12px 0;
    display: none;
    overflow: hidden; /* ensure container height animates smoothly */
}

.pre-fomc-controls.visible {
    display: block;
    animation: expandY 0.18s ease-out forwards; /* transform-based for smoothness */
}

@keyframes slideIn {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 1000px; }
}
@keyframes slideOut {
    from { opacity: 1; max-height: 1000px; }
    to { opacity: 0; max-height: 0; }
}
/* GPU-friendly transform animations for smoother transitions */
@keyframes expandY {
    from { opacity: 0; transform: scaleY(0.96); }
    to { opacity: 1; transform: scaleY(1); }
}
@keyframes collapseY {
    from { opacity: 1; transform: scaleY(1); }
    to { opacity: 0; transform: scaleY(0.96); }
}

.explanation-block {
    background: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 12px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    font-size: 12.096pt;
    line-height: 1.5;
    display: none;
    overflow: hidden; /* avoid content popping outside during animation */
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.explanation-block.visible {
    display: block;
    animation: expandY 0.18s ease-out forwards;
}

/* Smooth height wrapper for Pre-FOMC sections to prevent parent box jump */
.pre-fomc-wrapper {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: -6px; /* pull up to reduce gap after checkbox */
    transition: max-height 0.18s ease-out, opacity 0.18s ease-out;
}

.pre-fomc-wrapper.expanded {
    max-height: 500px; /* large enough for content */
    opacity: 1;
    transition: max-height 0.18s ease-out, opacity 0.18s ease-out;
}

.pre-fomc-wrapper.collapsing {
    max-height: 0;
    opacity: 0;
    transition: none; /* instant collapse */
}

/* keep scale from the top edge for better look */
.pre-fomc-controls, .explanation-block, .collapsible, #start-horizon-control, .pre-fomc-wrapper { 
    transform-origin: top; 
}

.explanation-title {
    margin: 6px 0;
    color: var(--text-primary);
}

/* Measure Rows */
.measure-row {
    display: grid;
    grid-template-columns: var(--label-col) 1fr;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    margin: var(--space-3) 0;
}

.measure-row label {
    justify-self: end;
    font-size: 12.701pt;
    color: var(--text-primary);
    text-align: right;
    font-weight: 500;
    padding-right: var(--space-2);
}

.measure-row select {
    min-width: 0;
    background: var(--bg-sunken);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 6px 8px;
    color: var(--text-primary);
    font-size: 12.701pt;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    max-width: 100%;
}

/* Core Measures and Pre-FOMC sections: label flexes, dropdown clamps */
/* Pre-FOMC: dynamic layout — fixed label, fluid select */
#pre-fomc-controls .measure-row {
    grid-template-columns: auto minmax(120px, 1fr);
}

#pre-fomc-controls .measure-row label {
    white-space: nowrap;
}

#pre-fomc-controls .measure-row select {
    width: 100%; /* expand/contract with available space */
    max-width: 100%;
    justify-self: stretch;
    min-width: 0; /* allow shrinking below intrinsic width */
}

/* Custom: Narrow just the Pre-FOMC mode dropdown so the long label stays on one line */
#pre-fomc-controls .measure-row:has(#pre_fomc_mode) {
    grid-template-columns: auto minmax(120px, 1fr);
}
#pre_fomc_mode {
    width: 100%;
}

/* Stack label above dropdown on narrow layouts to avoid overflow */
@media (max-width: 900px) {
    #pre-fomc-controls .measure-row:has(#pre_fomc_mode) {
        grid-template-columns: 1fr;
        row-gap: var(--space-2);
    }
    #pre_fomc_mode {
        justify-self: start;
        width: 160px;
    }
}

/* MPS Variable Section: compact layout with short label and narrow dropdown */
#mps-variable-section .measure-row {
    grid-template-columns: auto minmax(160px, 1fr);
}

#mps-variable-section .measure-row label {
    white-space: nowrap;
}

#mps-variable-section .measure-row select {
    width: 100%;
    max-width: 280px;
    min-width: 0;
}

/* Stack on very narrow layouts */
@media (max-width: 900px) {
    #mps-variable-section .measure-row {
        grid-template-columns: 1fr;
        row-gap: var(--space-2);
    }
    #mps-variable-section .measure-row select {
        max-width: 100%;
    }
}

/* Core Measures: equal select widths based on the longest label
   We make the section a 2-column grid and flatten rows with display: contents
   so all labels share column 1 and all selects share column 2. */
/* Core Measures: table layout so columns equalize across all rows */
#core-measures-section { 
    display: table; 
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0 var(--space-2);
}
#core-measures-section .measure-row { display: table-row; }
#core-measures-section .measure-row label, 
#core-measures-section .measure-row select {
    display: table-cell;
    vertical-align: middle;
    padding-right: var(--space-3);
}
#core-measures-section .measure-row label { white-space: nowrap; padding-right: var(--space-3); }
#core-measures-section .measure-row select { width: 100%; }

/* Smooth reveal/hide for Taylor Rule sections */
/* Note: Do not clamp overflow on group boxes; titles sit slightly above box */

/* Hidden by default until the toggle adds .visible */
#start-horizon-control:not(.visible) { display: none; }

/* When visible, animate in */
#start-horizon-control.visible { display: grid; animation: slideIn 0.25s ease-out forwards; }

/* Animate out while keeping layout during the transition */
#start-horizon-control.collapsing { display: grid; animation: slideOut 0.2s ease-in forwards; }

/* Generic collapsible wrapper used inside group boxes so titles are not clipped */
.collapsible {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.18s ease-out, opacity 0.18s ease-out;
}

.collapsible.visible {
    max-height: 800px; /* large enough for Taylor Rule content */
    opacity: 1;
    transition: max-height 0.18s ease-out, opacity 0.18s ease-out;
}

.collapsible.collapsing {
    max-height: 0;
    opacity: 0;
    transition: none; /* instant collapse */
}

/* Box-level fade used to hide entire group boxes when Taylor Rule is off */
.group-box.box-fade-in {
    animation: boxFadeIn 0.18s ease-out;
}
.group-box.box-fade-out {
    animation: boxFadeOut 0.18s ease-in;
}
@keyframes boxFadeIn { 
    from { opacity: 0; transform: translateY(-4px); } 
    to { opacity: 1; transform: translateY(0); } 
}
@keyframes boxFadeOut { 
    from { opacity: 1; transform: translateY(0); } 
    to { opacity: 0; transform: translateY(-4px); } 
}

/* Utility: fully hide element regardless of its normal display */
.is-hidden { display: none !important; }

.measure-row select:hover {
    border-color: var(--accent);
    background: #ffffff;
}

.measure-row select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

/* Math Display */
.math-display {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-left: 4px solid var(--accent);
    padding: 18px 22px;
    margin: 0 0 20px 0;
    text-align: center;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    font-size: var(--equation-card-block);
    line-height: 1.45;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    container-type: inline-size;
    container-name: equation-card;
    --equation-card-block: var(--equation-block-font);
    --equation-card-display: var(--equation-display-font);
}

/* Equation scaling tokens keep MathJax responsive */
:root {
    --equation-block-font: clamp(0.95rem, 0.6vw + 0.85rem, 1.35rem);
    --equation-block-font-lg: clamp(0.98rem, 0.68vw + 0.9rem, 1.42rem);
    --equation-display-font: clamp(1.15rem, 0.85vw + 1rem, 1.9rem);
    --equation-display-font-lg: clamp(1.18rem, 0.92vw + 1.02rem, 1.98rem);
    --equation-inline-font: clamp(0.92rem, 0.45vw + 0.82rem, 1.2rem);
    --equation-inline-font-lg: clamp(0.96rem, 0.6vw + 0.86rem, 1.48rem);
    --equation-caption-scale: 0.85;
}

mjx-container {
    max-inline-size: 100%;
    white-space: normal;
    display: inline-block;
}

mjx-container mjx-math {
    max-inline-size: 100%;
    transform-origin: left center;
}

/* Formula class for wrapping mathematical formulas */
.formula {
    margin: 16px 0;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    text-align: center;
    font-size: var(--equation-card-block);
    line-height: 1.45;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    container-type: inline-size;
    container-name: equation-card;
    --equation-card-block: var(--equation-block-font);
    --equation-card-display: var(--equation-display-font);
}

.formula .math {
    margin: 0;
}

.math-display .MathJax,
.math-display mjx-container,
.formula .MathJax,
.formula mjx-container,
.eq .MathJax,
.eq mjx-container {
    font-size: var(--equation-card-display);
    max-width: 100%;
    width: 100%;
    min-width: 0 !important;
    display: block;
    margin: 0 auto;
    line-height: 1.3;
    overflow: hidden;
    position: relative;
}

.math-display mjx-container,
.formula mjx-container,
.eq mjx-container {
    text-align: center;
    padding: 4px 0;
    overflow: hidden;
    display: block !important;
}

.math-display mjx-container > mjx-math,
.formula mjx-container > mjx-math,
.eq mjx-container > mjx-math {
    display: inline-block;
    max-width: 100%;
    min-width: 0 !important;
    transform: scale(1);
    transform-origin: center center;
}

@container equation-card (max-width: 960px) {
    .math-display .MathJax,
    .math-display mjx-container,
    .formula .MathJax,
    .formula mjx-container,
    .eq .MathJax,
    .eq mjx-container {
        font-size: calc(var(--equation-card-display) * 0.94);
        line-height: 1.3;
    }
}

@container equation-card (max-width: 780px) {
    .math-display .MathJax,
    .math-display mjx-container,
    .formula .MathJax,
    .formula mjx-container,
    .eq .MathJax,
    .eq mjx-container {
        font-size: calc(var(--equation-card-display) * 0.84);
        line-height: 1.25;
    }
}

@container equation-card (max-width: 620px) {
    .math-display .MathJax,
    .math-display mjx-container,
    .formula .MathJax,
    .formula mjx-container,
    .eq .MathJax,
    .eq mjx-container {
        font-size: calc(var(--equation-card-display) * 0.72);
        line-height: 1.2;
    }
}

@container equation-card (max-width: 500px) {
    .math-display .MathJax,
    .math-display mjx-container,
    .formula .MathJax,
    .formula mjx-container,
    .eq .MathJax,
    .eq mjx-container {
        font-size: calc(var(--equation-card-display) * 0.62);
        line-height: 1.15;
    }
}

@container equation-card (max-width: 380px) {
    .math-display .MathJax,
    .math-display mjx-container,
    .formula .MathJax,
    .formula mjx-container,
    .eq .MathJax,
    .eq mjx-container {
        font-size: calc(var(--equation-card-display) * 0.54);
        line-height: 1.1;
    }
}

.formula mjx-container mjx-math,
.eq mjx-container mjx-math {
    max-width: 100%;
}

/* Appendix-specific formula styling - larger equations */
.appendix-single-card .formula {
    padding: 24px 28px;
}

#appendix-b-b1-panel-container .formula,
#appendix-a-panel-container .formula,
#appendix-b-panel-container .formula,
.appendix-single-card .formula {
    --equation-card-block: var(--equation-block-font-lg);
    --equation-card-display: var(--equation-display-font-lg);
}

/* Appendix inline math styling - also larger */
#appendix-b-b1-panel-container .disagreement-html .MathJax,
#appendix-b-b1-panel-container .disagreement-html mjx-container,
#appendix-a-panel-container .disagreement-html .MathJax,
#appendix-a-panel-container .disagreement-html mjx-container,
#appendix-b-panel-container .disagreement-html .MathJax,
#appendix-b-panel-container .disagreement-html mjx-container,
.appendix-single-card .disagreement-html .MathJax,
.appendix-single-card .disagreement-html mjx-container {
    font-size: var(--equation-inline-font-lg);
}

/* Appendix .eq elements - larger styling */
#appendix-b-b1-panel-container .eq,
#appendix-a-panel-container .eq,
#appendix-b-panel-container .eq,
.appendix-single-card .eq {
    padding: 24px 28px;
    --equation-card-block: var(--equation-block-font-lg);
    --equation-card-display: var(--equation-display-font-lg);
}

.current-params {
    font-size: 13.91pt;
    color: var(--text-secondary);
    margin-top: 8px;
    font-weight: 500;
}

/* Parameter Controls */
.param-control {
    margin: var(--space-3) 0;
    display: grid;
    grid-template-columns: var(--label-col) var(--value-col) 1fr;
    align-items: center;
    column-gap: var(--space-2);
}

/* All sliders in appearance tab: match Taylor Rule Sensitivities narrow layout */
.appearance-only-sidebar .param-control {
    grid-template-columns: auto 55px 1fr;
}

/* Appearance Slider Container - matches Taylor Rule Sensitivities layout */
.appearance-slider-container {
    display: grid;
    grid-template-columns: auto 55px 1fr;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: var(--space-3);
    margin: var(--space-3) 0;
}

.appearance-slider-container .param-label {
    justify-self: start;
    font-family: var(--font-body) !important;
    font-size: 14.515pt !important;
    color: var(--text-primary);
    text-align: left;
    font-weight: 500;
}

.appearance-slider-container .param-label::after {
    content: ":";
    margin-left: 0;
    color: var(--text-primary);
    font-weight: 500;
}

.appearance-slider-container .param-value {
    font-family: var(--font-body) !important;
    font-style: normal;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14.515pt !important;
}

/* Align dropdown/input rows with sliders in appearance sections */
.appearance-section .measure-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--space-2);
    margin: var(--space-3) 0;
}

.appearance-section .measure-row label {
    justify-self: start;
    text-align: left;
    white-space: nowrap;
}

.appearance-section .measure-row label::after {
    content: ":";
    margin-left: 0;
}

.appearance-section .measure-row select,
.appearance-section .measure-row input[type="text"],
.appearance-section .measure-row input[type="number"],
.appearance-section .measure-row input[type="color"] {
    width: 100%;
    grid-column: 2;
}

/* Taylor Rule Sensitivity Controls - Single Grid Container */
.sensitivity-controls-container {
    display: grid;
    grid-template-columns: auto var(--value-col) 1fr;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: var(--space-3);
    margin: var(--space-3) 0;
}

.sensitivity-label {
    justify-self: end;
    font-family: var(--font-body) !important;
    font-size: 12.701pt !important;
    color: var(--text-primary);
    text-align: right;
    font-weight: 500;
}

.param-value,
.sensitivity-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--value-col);
    padding: 4px 10px;
    text-align: center;
    font-weight: 600;
    font-size: 12.701pt;
    color: var(--accent-active);
    background: var(--value-chip-bg);
    border: 1px solid var(--value-chip-border);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(var(--accent-active-rgb), 0.16);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.param-value:hover,
.sensitivity-value:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 10px rgba(var(--accent-active-rgb), 0.16);
}

.sensitivity-value {
    font-family: var(--font-body) !important;
    font-style: normal;
    font-size: 12.701pt !important;
}

.sensitivity-value::before {
    content: "=";
    margin: 0 6px 0 0;
    color: inherit;
    font-weight: inherit;
}

.sensitivity-slider {
    width: 100%;
    min-width: 0;
    height: 7px;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, var(--accent) 0%, var(--accent) 50%, #ddd 50%, #ddd 100%);
    outline: none;
    transition: background 0.15s;
}

.sensitivity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-hover), var(--accent));
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.sensitivity-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-hover), var(--accent));
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.param-label {
    justify-self: end;
    font-family: var(--font-body);
    font-size: 12.701pt;
    color: var(--text-primary);
    text-align: right;
    font-weight: 500;
}

.param-control-wide .param-label {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}


.param-label span {
    display: inline-block;
    min-width: var(--value-col);
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
}

.horizon-control .param-value,
.freq-control .param-value,
.param-control-wide .param-value {
    font-family: var(--font-body) !important; /* match math look */
    font-style: normal;
    color: var(--accent-active);
    font-weight: 600;
}
.horizon-control .param-value::before,
.freq-control .param-value::before,
.param-control-wide .param-value::before {
    content: "";
    margin: 0;
    color: var(--text-primary);
    font-weight: 500;
}

/* Ensure labels use the same font stack as values for perfect match */
.horizon-label,
.freq-label,
.param-control-wide .param-label {
    font-family: var(--font-body) !important;
    color: var(--text-primary);
    font-weight: 500;
}

/* Keep sizes consistent with label override further down */
.horizon-control .param-value,
.freq-control .param-value,
.param-control-wide .param-value {
    font-size: 12.701pt !important;
}

.param-slider {
    width: 100%;
    min-width: 0;
    height: 7px;
    border-radius: 4px;
    background: var(--bg-sunken);
    border: 1px solid var(--border-color);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.param-slider:hover {
    background: #e0e4ea;
}

.param-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-hover), var(--accent));
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: all 0.15s ease;
}

.param-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(135deg, var(--accent-active), var(--accent));
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.param-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-hover), var(--accent));
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Horizon Controls */
.horizon-control {
    margin: var(--space-2) 0;
    display: grid;
    grid-template-columns: 140px var(--value-col) 1fr;
    align-items: center;
    column-gap: var(--space-2);
}

.horizon-label {
    justify-self: start;
    font-family: var(--font-body);
    font-size: 12.701pt;
    color: var(--text-primary);
    text-align: left;
    font-weight: 500;
}

.horizon-label span {
    display: inline-block;
    min-width: var(--value-col);
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
}

.horizon-slider {
    width: 100%;
    min-width: 0;
    height: 7px;
    border-radius: 4px;
    background: var(--bg-sunken);
    border: 1px solid var(--border-color);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.horizon-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-hover), var(--accent));
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.horizon-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-hover), var(--accent));
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Frequency Controls */
.freq-control {
    display: grid;
    grid-template-columns: 140px var(--value-col) 1fr;
    align-items: center;
    column-gap: var(--space-2);
    margin: var(--space-2) 0;
}

.freq-label {
    justify-self: start;
    font-family: var(--font-body);
    font-size: 12.701pt;
    color: var(--text-primary);
    text-align: left;
    font-weight: 500;
    display: inline-flex;      /* vertically center the single glyph */
    align-items: center;
    line-height: 1;            /* trim vertical leading */
    transform: translateY(-1px); /* bump up slightly more */
}

.freq-label span {
    display: inline-block;
    min-width: var(--value-col);
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
}

.freq-slider {
    width: 100%;
    min-width: 0;
    height: 7px;
    border-radius: 4px;
    background: var(--bg-sunken);
    border: 1px solid var(--border-color);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.freq-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-hover), var(--accent));
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.freq-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-hover), var(--accent));
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.freq-note {
    font-size: 10.886pt;
    color: var(--text-secondary);
    margin-top: 2px;
    margin-bottom: var(--space-1);
}

/* Selected Dates */
.selected-dates-text {
    font-size: 12.701pt;
    color: var(--text-secondary);
    margin: 10px 0;
    font-style: italic;
}

.date-buttons {
    display: flex;
    gap: 10px;
    margin: 12px 0;
}

.date-btn {
    background: linear-gradient(to bottom, var(--accent-hover), var(--accent));
    color: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    padding: 7px 14px;
    border-radius: 12px;
    font-size: 12.701pt;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.date-btn:hover {
    background: linear-gradient(to bottom, var(--accent-active), var(--accent-strong));
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.date-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* =========================================================================
   MUR ANALYSIS SECTION
   ========================================================================= */

.radio-group {
    margin: 10px 0;
}

.analysis-btn {
    background: linear-gradient(to bottom, var(--accent-hover), var(--accent));
    color: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    padding: 9px 18px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13.306px;
    cursor: pointer;
    margin: 14px 0;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.analysis-btn:hover {
    background: linear-gradient(to bottom, var(--accent-active), var(--accent-strong));
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.analysis-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.methodology-section {
    margin: 20px auto;
    padding: 22px 28px 26px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    max-width: var(--methodology-max-width);
    width: 100%;
}

.methodology-section:hover {
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.14), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.methodology-section h4 {
    margin-bottom: 18px;
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--methodology-heading-font);
    letter-spacing: var(--methodology-heading-letter);
}

.methodology-body {
    font-size: var(--methodology-body-font);
    line-height: var(--methodology-body-line-height);
    color: var(--methodology-text-color);
    max-width: var(--methodology-max-width);
    width: 100%;
    margin: 0 auto;
    letter-spacing: 0.01em;
}

.methodology-body p {
    margin-bottom: var(--methodology-body-paragraph-space);
    color: var(--methodology-subtext-color);
    text-align: justify;
    hyphens: auto;
}

.methodology-body ul,
.methodology-body ol {
    margin: 0 0 var(--methodology-body-paragraph-space);
    padding-left: 1.4rem;
    color: var(--methodology-subtext-color);
}

.methodology-body li {
    margin-bottom: 6px;
}

.methodology-body h2,
.methodology-body h3,
.methodology-body h4 {
    margin: 28px 0 16px;
    line-height: 1.45;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: var(--methodology-heading-letter);
}

.methodology-body h2 {
    font-size: calc(var(--methodology-heading-font) * 1.1);
}

.methodology-body h3 {
    font-size: var(--methodology-heading-font);
}

.methodology-body h4 {
    font-size: calc(var(--methodology-heading-font) * 0.92);
}

.methodology-body > p.methodology-emphasis {
    font-size: calc(var(--methodology-body-font) * 1.12);
    font-weight: 500;
    line-height: calc(var(--methodology-body-line-height) * 1.02);
    color: rgba(17, 24, 39, 0.95);
    margin-bottom: 28px;
    padding: 28px 34px 32px;
    background: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.methodology-body.no-callout-intro > p.methodology-emphasis {
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    color: inherit;
    margin-bottom: var(--methodology-body-paragraph-space);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.methodology-body .math-display,
.methodology-body .eq,
.methodology-body .formula {
    margin: 24px 0;
}

.methodology-body .math {
    font-size: calc(var(--methodology-body-font) * 0.95);
    color: var(--methodology-text-color);
}

.methodology-body--math .math-display {
    text-align: center;
}

.math-methodology {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.math-methodology p {
    color: inherit;
}

.equations {
    margin: 20px 0;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.04) 0%, rgba(var(--accent-rgb), 0.01) 100%);
    border-radius: 10px;
    border-left: 4px solid var(--accent);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.08);
}

.eq {
    margin: 16px 0;
    padding: 14px 20px;
    text-align: center;
    font-size: var(--equation-card-block);
    line-height: 1.45;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-left: 4px solid var(--accent);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    container-type: inline-size;
    container-name: equation-card;
    --equation-card-block: var(--equation-block-font);
    --equation-card-display: var(--equation-display-font);
}

.definition {
    margin: 18px 0;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06) 0%, rgba(var(--accent-rgb), 0.02) 100%);
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    font-size: 13.306pt;
    color: var(--text-primary);
    line-height: 1.75;
    box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.06);
}

.rule {
    margin: 11px 0;
    font-size: 15.725px;
    color: var(--text-primary);
    line-height: 1.6;
}

.summary {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #d0dae6;
    font-size: 15.12px;
    color: var(--text-secondary);
    font-style: italic;
}

.content {
    color: var(--text-primary);
}

.summary-text {
    font-size: 15.725px;
    color: var(--text-primary);
    margin-top: 10px;
    text-align: center;
}

.debug-option {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

/* =========================================================================
   CHART AREA
   ========================================================================= */

.chart-area {
    flex: 1;
    background: var(--bg-elevated);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 0 48px; /* increased bottom padding so caption never gets cut off */
    gap: 8px;
}


.dm-panel-container,
.disagreement-panel-container {
    flex: 1 1 auto;
    display: none;
    overflow: hidden;
    background: var(--bg-elevated);
    min-width: 0;
}

.dm-panel-container.active,
.disagreement-panel-container.active {
    display: flex;
}

/* HRS Figures Panel */
.hrs-panel-container {
    flex: 1 1 auto;
    display: none;
    overflow: hidden;
    background: var(--bg-elevated);
    min-width: 0;
}

.hrs-panel-container.active {
    display: flex;
}

.hrs-panel-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px 52px 72px;
    scrollbar-gutter: stable both-edges;
    display: flex;
    justify-content: center;
}

.hrs-panel {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 20px;
}

.hrs-panel::after {
    content: "";
    display: block;
    height: 20px;
    flex-shrink: 0;
}

.hrs-header-card {
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.15);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 2px;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    width: 950px;
    margin-left: auto;
    margin-right: auto;
}

.hrs-header-card h2 {
    font-size: 16.934pt;
    margin-bottom: 12px;
    color: var(--text-primary);
    font-weight: 700;
}

.hrs-header-card p {
    font-size: 13.306pt;
    color: var(--text-secondary);
    line-height: 1.7;
}

.hrs-viewer-card {
    background: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.hrs-figure-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.hrs-viewer-image {
    width: 100%;
    max-width: 1100px;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    background: var(--bg-sunken);
}

.hrs-viewer-placeholder {
    width: 100%;
    max-width: 1100px;
    min-height: 320px;
    border-radius: 6px;
    border: 2px dashed var(--border-color);
    background: var(--bg-sunken);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--text-secondary);
}

.hrs-figure-caption {
    text-align: justify;
    width: 100%;
    max-width: var(--figure-caption-width) !important;
}

.hrs-figure-caption h3 {
    font-size: 15.725pt;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-weight: 700;
}

.hrs-figure-caption p {
    font-size: 13.306pt;
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: justify;
}

.hrs-info-section {
    background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 24px 28px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), inset 0 1px rgba(255,255,255,0.7);
}

.hrs-info-section h3 {
    font-size: 15.725pt;
    margin-bottom: 14px;
    color: var(--text-primary);
    font-weight: 700;
}

.hrs-info-section p {
    font-size: 13.306pt;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 10px;
}

/* Quarter Forecast Grid */
.hrs-quarter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
    gap: 32px;
    margin-top: 32px;
    margin-bottom: 80px;
}

.hrs-quarter-chart {
    background: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hrs-quarter-chart h3 {
    font-size: 14.515pt;
    margin: 0;
    color: var(--text-primary);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.2px;
}

#quarter-Q2 h3 {
    font-size: 18.144pt;
}

.hrs-quarter-grid #quarter-Q2 h3 {
    font-size: 16.33pt;
}

.hrs-quarter-chart .chart-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 5px;
    background: #c4c9d0;
    border-radius: 8px;
    border: none;
    box-shadow: 0 6px 14px rgba(30, 36, 51, 0.18), inset 0 2px 4px rgba(30, 36, 51, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    align-self: center;
    max-width: 100%;
    width: auto;
    flex: 0 0 auto;
    min-height: 3rem;
    aspect-ratio: auto;
    overflow: visible;
}

.quarter-chart-image {
    display: none;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    object-fit: contain;
}

.chart-loading {
    position: absolute;
    color: var(--text-secondary);
    font-size: 12.701pt;
    text-align: center;
    padding: 6px 12px;
    background: rgba(245, 247, 251, 0.92);
    border-radius: 4px;
    border: 1px solid rgba(30, 36, 51, 0.08);
    box-shadow: 0 4px 12px rgba(30, 36, 51, 0.08);
}

@media (max-width: 600px) {
    .hrs-quarter-grid {
        grid-template-columns: 1fr;
    }
}

.dm-panel-scroll,
.disagreement-panel-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px 52px 72px;
    scrollbar-gutter: stable both-edges;
    display: flex;
    justify-content: center;
}

.dm-panel,
.disagreement-panel {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 950px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 20px;
}

.dm-panel::after,
.disagreement-panel::after {
    content: "";
    display: block;
    height: 20px;
    flex-shrink: 0;
}

.dm-overview-card,
.disagreement-overview-card {
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.15);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 2px;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.dm-overview-card h2,
.disagreement-overview-card h2 {
    font-size: 16.934pt;
    margin-bottom: 12px;
    color: var(--text-primary);
    font-weight: 700;
}

.dm-overview-card p,
.disagreement-overview-card p {
    font-size: 13.306pt;
    color: var(--text-secondary);
    line-height: 1.7;
}

.dm-tabs-container,
.hrs-tabs-container,
.disagreement-tabs-container {
    flex: 0 0 auto;
    width: 100%;
    max-width: 960px;
    margin: 0 auto 24px;
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.15);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.dm-overview-card:hover,
.hrs-header-card:hover,
.hrs-viewer-card:hover,
.dm-section:hover,
.hrs-quarter-chart:hover,
.dm-tabs-container:hover,
.hrs-tabs-container:hover,
.disagreement-overview-card:hover,
.disagreement-section:hover,
.disagreement-tabs-container:hover {
    border-color: rgba(17, 24, 39, 0.25);
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.dm-tabs,
.hrs-tabs,
.disagreement-tabs {
    display: inline-flex;
    width: 100%;
    padding: 0;
    gap: 0;
    background: linear-gradient(180deg, #fafbfc 0%, #f4f5f7 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dm-tab,
.hrs-tab,
.disagreement-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 14px 20px;
    font-size: 13.306pt;
    font-weight: 400;
    color: rgba(30, 36, 51, 0.65);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-align: center;
}

.dm-tab::after,
.hrs-tab::after,
.disagreement-tab::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(17, 24, 39, 0.92);
    transform: scaleX(0);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-tab:hover,
.hrs-tab:hover,
.disagreement-tab:hover {
    background: rgba(255, 255, 255, 0.6);
    color: rgba(30, 36, 51, 0.9);
}

.dm-tab.active,
.hrs-tab.active,
.disagreement-tab.active {
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.85));
    color: #ffffff;
    font-weight: 400;
}

.dm-tab.active::after,
.hrs-tab.active::after,
.disagreement-tab.active::after {
    transform: scaleX(1);
}

.dm-tab-content,
.hrs-tab-content,
.disagreement-tab-content {
    display: none;
    padding: 32px 40px 40px;
    line-height: 1.75;
    font-size: 13.306pt;
    background: #ffffff;
    border-top: none;
    max-height: 600px;
    overflow-y: auto;
    container-type: inline-size;
    container-name: equation-inline;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.disagreement-methodology-text {
    width: 100%;
}

.methodology-body .eq,
.methodology-body .formula {
    margin: 28px 0;
    padding: 24px;
    background: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.callout-panel {
    font-size: calc(var(--methodology-body-font) * 1.12);
    font-weight: 500;
    line-height: calc(var(--methodology-body-line-height) * 0.98);
    color: rgba(17, 24, 39, 0.95);
    margin-bottom: 28px;
    padding: 28px 34px 32px;
    background: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.callout-panel p {
    margin-bottom: 18px;
    font-size: 12.386pt;
    font-weight: 400;
    color: rgba(17, 24, 39, 0.92);
    line-height: 1.95;
}

.callout-panel p:last-child {
    margin-bottom: 0;
}

.abstract-tooltip .callout-panel,
#abstract-overlay .callout-panel {
    margin-bottom: 0;
}

.abstract-title-block {
    text-align: center;
    margin-bottom: 20px;
}

.abstract-title-line {
    font-size: 17.418pt;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.35;
}

.abstract-title-line.secondary {
    font-size: 16.547pt;
    font-style: normal;
}

.abstract-metadata {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 18px 0 28px;
    font-size: 12.193pt;
    letter-spacing: 0.025em;
    color: rgba(17, 24, 39, 0.92);
    text-align: center;
}

.abstract-author {
    font-size: 13.064pt;
    font-weight: 600;
}

.abstract-affiliation {
    font-style: normal;
}

.abstract-note {
    text-transform: uppercase;
    font-variant: small-caps;
    font-size: 10.886pt;
    letter-spacing: 0.12em;
}

.abstract-heading {
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-size: 11.496pt;
    margin-bottom: 18px;
}

.abstract-keywords {
    margin-top: 18px;
    font-size: 10.712pt;
    line-height: 1.7;
    color: rgba(17, 24, 39, 0.92);
}

.abstract-keywords strong {
    letter-spacing: 0.06em;
}

.methodology-body .eq mjx-container,
.methodology-body .eq .MathJax,
.methodology-body .formula mjx-container,
.methodology-body .formula .MathJax {
    font-size: calc(var(--equation-display-font) * 0.9);
}

/* Appendix link styling - bold instead of underlined */
.appendix-link {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.appendix-link:hover,
.appendix-link:focus-visible {
    color: var(--accent-hover);
    text-decoration: none;
}

.appendix-link:focus-visible {
    outline: none;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.appendix-link:active {
    color: var(--accent-active);
}

/* Footnote markers: bold blue, hover-only (not clickable) */
.appendix-footnote,
.appendix-footnote sup {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}
.appendix-footnote {
    cursor: default;
}

/* Equation references: styled like appendix links */
.equation-ref {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.equation-ref:hover,
.equation-ref:focus-visible {
    color: var(--accent-hover);
    text-decoration: none;
}

.equation-ref:focus-visible {
    outline: none;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.equation-ref:active {
    color: var(--accent-active);
}

.equation-highlight {
    background: rgba(var(--accent-rgb), 0.18) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.45), 0 4px 12px rgba(var(--accent-rgb), 0.25) !important;
    border-radius: 10px !important;
    padding: 8px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: equationPulse 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.equation-highlight.equation-highlight-fade-out {
    background: rgba(var(--accent-rgb), 0) !important;
    box-shadow: 0 0 0 0px rgba(var(--accent-rgb), 0), 0 0px 0px rgba(var(--accent-rgb), 0) !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes equationPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.015);
    }
    100% {
        transform: scale(1);
    }
}

/* Appendix preview popover */
.appendix-preview-popover {
    position: absolute;
    left: 0;
    top: 0;
    width: min(920px, 92vw);
    max-height: 80vh;
    padding: 32px 38px;
    background: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.16), 0 4px 10px rgba(17, 24, 39, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -12px) scale(0.98);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    z-index: 2500;
    color: rgba(30, 36, 51, 0.9);
    line-height: 1.6;
    font-size: 13.5pt;
    overflow: hidden;
}

.appendix-preview-popover.drop-up {
    transform: translate(-50%, 12px) scale(0.98);
}

.appendix-preview-popover.equation-preview {
    width: min(1100px, 96vw);
    max-height: 85vh;
    padding: 36px 42px;
}

.appendix-preview-popover.appendix-preview-wide {
    width: min(1300px, 96vw);
}

.appendix-preview-popover.equation-preview .appendix-preview-content {
    max-height: calc(85vh - 120px);
    font-size: 14pt;
}

.appendix-preview-popover.equation-preview .appendix-preview-header {
    font-size: 15pt;
}

.appendix-preview-popover.figure-preview {
    width: min(1100px, 96vw);
    max-height: 75vh;
}

.appendix-preview-popover.figure-preview .appendix-preview-content {
    max-height: calc(75vh - 120px);
}

.appendix-preview-popover.figure-preview .disagreement-figure-container {
    margin: 0;
}

.appendix-preview-popover.figure-preview img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
}

.eq-preview-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 6px;
}

.appendix-preview-popover.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
}

.appendix-preview-popover.drop-up.visible {
    transform: translate(-50%, 0) scale(1);
}

.appendix-preview-header {
    font-size: 14.5pt;
    font-weight: 600;
    color: var(--accent-active);
    margin-bottom: 14px;
    text-align: left;
}

.appendix-preview-content {
    max-height: calc(80vh - 100px);
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-width: thin;
}

.appendix-preview-content p {
    margin-bottom: 12px;
}

.appendix-preview-content .formula,
.appendix-preview-content .eq {
    padding: 14px 16px;
    margin: 18px 0;
    font-size: 109.2%;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dm-tab-content.active,
.hrs-tab-content.active,
.disagreement-tab-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dm-html,
.hrs-html,
.disagreement-html {
    font-size: 12.641pt;
    color: rgba(30, 36, 51, 0.85);
    line-height: 1.75;
    container-type: inline-size;
    container-name: equation-inline;
}

.dm-html h2,
.hrs-html h2,
.disagreement-html h2 {
    color: var(--text-primary);
    font-size: 16.087pt;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(var(--accent-rgb), 0.2);
    letter-spacing: 0.01em;
}

.dm-html h2:first-child,
.hrs-html h2:first-child,
.disagreement-html h2:first-child {
    margin-top: 0;
}

.dm-html h3,
.hrs-html h3,
.disagreement-html h3 {
    color: var(--text-primary);
    font-size: 13.789pt;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}

.dm-html p,
.hrs-html p,
.disagreement-html p {
    margin-bottom: 14px;
    line-height: 1.8;
    text-align: justify;
    hyphens: auto;
}

.dm-html > p:first-child,
.hrs-html > p:first-child,
.disagreement-html > p:first-child {
    font-size: 12.641pt;
    font-weight: 400;
    line-height: 1.8;
    color: rgba(30, 36, 51, 0.85);
    margin: 0 0 14px 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.dm-html ul, .dm-html ol,
.hrs-html ul, .hrs-html ol,
.disagreement-html ul, .disagreement-html ol {
    margin-bottom: 14px;
    padding-left: 28px;
    line-height: 1.75;
}

.dm-html li,
.hrs-html li,
.disagreement-html li {
    margin-bottom: 6px;
}

.dm-html code,
.hrs-html code,
.disagreement-html code {
    background: rgba(var(--accent-rgb), 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 11.491pt;
    color: var(--accent-active);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
}

.dm-html pre,
.hrs-html pre,
.disagreement-html pre {
    background: linear-gradient(135deg, rgba(30, 36, 51, 0.04) 0%, rgba(30, 36, 51, 0.02) 100%);
    padding: 16px 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 16px 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dm-html pre code,
.hrs-html pre code,
.disagreement-html pre code {
    background: none;
    padding: 0;
    border: none;
    color: var(--text-primary);
}

.dm-html table,
.hrs-html table,
.disagreement-html table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dm-html th,
.hrs-html th,
.disagreement-html th {
    background: linear-gradient(180deg, var(--accent-hover), var(--accent));
    color: #ffffff;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12.066pt;
}

.dm-html td,
.hrs-html td,
.disagreement-html td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

.dm-html tr:last-child td,
.hrs-html tr:last-child td,
.disagreement-html tr:last-child td {
    border-bottom: none;
}

.dm-html tr:hover td,
.hrs-html tr:hover td,
.disagreement-html tr:hover td {
    background: rgba(var(--accent-rgb), 0.04);
}

/* Custom scrollbar for tab content */
.dm-tab-content::-webkit-scrollbar,
.hrs-tab-content::-webkit-scrollbar,
.disagreement-tab-content::-webkit-scrollbar {
    width: 10px;
}

.dm-tab-content::-webkit-scrollbar-track,
.hrs-tab-content::-webkit-scrollbar-track,
.disagreement-tab-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
}

.dm-tab-content::-webkit-scrollbar-thumb,
.hrs-tab-content::-webkit-scrollbar-thumb,
.disagreement-tab-content::-webkit-scrollbar-thumb {
    background: rgba(17, 24, 39, 0.3);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 30px;
}

.dm-tab-content::-webkit-scrollbar-thumb:hover,
.hrs-tab-content::-webkit-scrollbar-thumb:hover,
.disagreement-tab-content::-webkit-scrollbar-thumb:hover {
    background: rgba(17, 24, 39, 0.5);
    background-clip: padding-box;
}

.dm-html blockquote,
.hrs-html blockquote,
.disagreement-html blockquote {
    margin: 18px 0;
    padding: 14px 20px 14px 18px;
	border-left: none;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: rgba(30, 36, 51, 0.8);
}

.dm-html strong,
.hrs-html strong,
.disagreement-html strong {
    font-weight: 700;
    color: var(--text-primary);
}

.dm-html em,
.hrs-html em,
.disagreement-html em {
    font-style: italic;
    color: var(--accent-active);
}

.dm-html hr,
.hrs-html hr,
.disagreement-html hr {
    margin: 24px 0;
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.3) 50%, transparent 100%);
}

/* Make LaTeX formulas larger in DM sections */
.dm-html .MathJax,
.dm-html mjx-container,
.hrs-html .MathJax,
.hrs-html mjx-container,
.disagreement-html .MathJax,
.disagreement-html mjx-container {
    font-size: var(--equation-inline-font);
}

.dm-tab-content .MathJax,
.dm-tab-content mjx-container,
.disagreement-tab-content .MathJax,
.disagreement-tab-content mjx-container {
    font-size: var(--equation-inline-font);
}

@container equation-inline (max-width: 820px) {
    .dm-html .MathJax,
    .dm-html mjx-container,
    .hrs-html .MathJax,
    .hrs-html mjx-container,
    .disagreement-html .MathJax,
    .disagreement-html mjx-container,
    .dm-tab-content .MathJax,
    .dm-tab-content mjx-container,
    .disagreement-tab-content .MathJax,
    .disagreement-tab-content mjx-container,
    .dm-section .figure-caption .MathJax,
    .dm-section .figure-caption mjx-container,
    .disagreement-section .figure-caption .MathJax,
    .disagreement-section .figure-caption mjx-container {
        font-size: calc(var(--equation-inline-font) * 0.92);
        line-height: 1.35;
    }
}

@container equation-inline (max-width: 620px) {
    .dm-html .MathJax,
    .dm-html mjx-container,
    .hrs-html .MathJax,
    .hrs-html mjx-container,
    .disagreement-html .MathJax,
    .disagreement-html mjx-container,
    .dm-tab-content .MathJax,
    .dm-tab-content mjx-container,
    .disagreement-tab-content .MathJax,
    .disagreement-tab-content mjx-container,
    .dm-section .figure-caption .MathJax,
    .dm-section .figure-caption mjx-container,
    .disagreement-section .figure-caption .MathJax,
    .disagreement-section .figure-caption mjx-container {
        font-size: calc(var(--equation-inline-font) * 0.8);
        line-height: 1.3;
    }
}

@container equation-inline (max-width: 480px) {
    .dm-html .MathJax,
    .dm-html mjx-container,
    .hrs-html .MathJax,
    .hrs-html mjx-container,
    .disagreement-html .MathJax,
    .disagreement-html mjx-container,
    .dm-tab-content .MathJax,
    .dm-tab-content mjx-container,
    .disagreement-tab-content .MathJax,
    .disagreement-tab-content mjx-container,
    .dm-section .figure-caption .MathJax,
    .dm-section .figure-caption mjx-container,
    .disagreement-section .figure-caption .MathJax,
    .disagreement-section .figure-caption mjx-container {
        font-size: calc(var(--equation-inline-font) * 0.7);
        line-height: 1.25;
    }
}

@container equation-inline (max-width: 360px) {
    .dm-html .MathJax,
    .dm-html mjx-container,
    .hrs-html .MathJax,
    .hrs-html mjx-container,
    .disagreement-html .MathJax,
    .disagreement-html mjx-container,
    .dm-tab-content .MathJax,
    .dm-tab-content mjx-container,
    .disagreement-tab-content .MathJax,
    .disagreement-tab-content mjx-container,
    .dm-section .figure-caption .MathJax,
    .dm-section .figure-caption mjx-container,
    .disagreement-section .figure-caption .MathJax,
    .disagreement-section .figure-caption mjx-container {
        font-size: calc(var(--equation-inline-font) * 0.6);
        line-height: 1.2;
    }
}

.dm-section,
.disagreement-section {
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.15);
    border-radius: 12px;
    padding: 24px 24px 20px;
    margin-bottom: 32px;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: visible;
}

/* Appendix tab content should auto-size to displayed content */
#appendix-a-panel-container .disagreement-tab-content,
#appendix-b-panel-container .disagreement-tab-content,
#appendix-b-b1-panel-container .disagreement-tab-content,
.appendix-single-card .disagreement-tab-content {
    max-height: none;
    overflow: visible;
    min-height: 400px;
}

/* Ensure appendix html content is always visible */
#appendix-b-b1-panel-container .disagreement-html,
#appendix-a-panel-container .disagreement-html,
#appendix-b-panel-container .disagreement-html,
.appendix-single-card .disagreement-html {
    min-height: 300px;
    opacity: 1;
    visibility: visible;
}

.appendix-single-card .disagreement-figure-container {
    margin: 12px auto;
}

.appendix-single-card .disagreement-html + .disagreement-figure-container {
    margin-top: 8px;
}

.dm-section h3,
.disagreement-section h3 {
    font-size: 15.725pt;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-weight: 700;
    text-align: center;
}

.dm-section p:not(.figure-caption),
.disagreement-section p:not(.figure-caption) {
    margin-bottom: 18px;
    color: var(--text-secondary);
    text-align: center;
    font-size: 13.306pt;
}

.table-panel-title {
    margin: 32px 0 8px;
    text-align: left;
    font-size: 12.5pt;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--text-primary);
    text-transform: uppercase;
}

.table-panel-title:first-of-type {
    margin-top: 0;
}

.dm-table-container .table-panel-title {
    align-self: flex-start;
    padding-left: 4px;
}

.figure-block,
.disagreement-figure-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--figure-gap);
    margin: 24px auto;
    width: 100%;
    max-width: var(--figure-max-width);
}

.figure-block.dm-table-container,
.disagreement-figure-container.dm-table-container {
    align-items: stretch;
    max-width: none;
    width: 100%;
    gap: 8px;
}

.figure-block.dm-table-container .figure-caption,
.disagreement-figure-container.dm-table-container .figure-caption {
    max-width: var(--figure-caption-width);
}

.disagreement-figure {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    margin-bottom: 0;
}

.shock-selector-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
}

.shock-selector-panel label {
    font-size: 12pt;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.shock-dropdown {
    flex: 1;
    padding: 8px 12px;
    font-size: 11.5pt;
    color: var(--text-primary);
    background: var(--bg-window);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.shock-dropdown:hover {
    border-color: var(--accent);
    background: var(--bg-elevated);
}

.shock-dropdown:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(72, 91, 181, 0.1);
}

.shock-dropdown option {
    padding: 8px;
}

.figure-caption {
    font-size: var(--figure-caption-font);
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: justify;
    width: 100%;
    max-width: var(--figure-caption-width) !important;
    margin: 0 auto;
    padding: 0;
    container-type: inline-size;
    container-name: equation-inline;
    align-self: center;
}

/* Main interactive Figure 1 caption directly under the Taylor Rule chart */
#chart-area > .figure-caption {
    width: 100%;
    max-width: clamp(1400px, 95vw, 1700px) !important; /* override global caption width */
    margin-top: 6px;
    margin-bottom: 24px; /* increased to ensure full caption visibility */
    padding: 0 36px;
    text-align: left;
    flex: 0 0 auto;
    overflow: visible; /* ensure text never gets clipped */
    line-height: 1.6; /* ensure multi-line text has proper spacing */
    box-sizing: border-box; /* include padding in width calculation to match figure width */
    font-size: calc(var(--figure-caption-font) + 1pt); /* VM request: slightly larger caption */
}

.figure-caption strong {
    color: var(--text-primary);
    font-weight: 700;
}

.figure-caption mjx-container,
.figure-caption .MathJax {
    font-size: calc(var(--equation-inline-font) * var(--equation-caption-scale));
}

.dm-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--dm-table-font);
    color: var(--text-primary);
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-top: 2px solid #1f2933;
    border-bottom: 2px solid #1f2933;
    font-variant-numeric: tabular-nums;
}

.dm-table thead {
    background: #f8f9fb;
}

.dm-table th,
.dm-table td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
    word-break: break-word;
    white-space: normal;
}

.dm-table th + th,
.dm-table td + td {
    border-left: 1px solid #e2e8f0;
}

.dm-table th {
    color: #111827;
    font-weight: 600;
    letter-spacing: 0.1px;
    font-size: calc(var(--dm-table-font) * 1.02);
    text-transform: none;
    background: #f8fafc;
    border-bottom: 1px solid #cbd5e1;
}

.dm-table th:first-child,
.dm-table td:first-child {
    text-align: left;
}

.dm-table tbody tr:last-child td {
    border-bottom: none;
}

.dm-table td:last-child {
    font-weight: 600;
    color: #111827;
    font-size: var(--dm-table-font);
}

.chart-area > .chart-container {
    flex: 0 0 auto;
    width: 100%;
    max-width: clamp(1400px, 95vw, 1700px); /* roughly 85% of original width */
    padding: 18px 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    aspect-ratio: 14 / 8;
}

.chart-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 98%;
    height: 98%;
    max-width: 98%;
    max-height: 98%;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    object-fit: contain; /* preserve aspect ratio within container */
    display: block;
    opacity: 0;
}

.chart-img-active {
    opacity: 1;
    z-index: 1;
}

.chart-img-next {
    opacity: 0;
    z-index: 0;
}

.status-bar {
    display: none;
}

/* =========================================================================
   DATE MODAL
   ========================================================================= */

.date-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.date-modal-content {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    padding: 24px;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    animation: modalSlideIn 0.25s ease-out;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.date-modal h3 {
    margin-bottom: 18px;
    font-size: 18.144pt;
    color: var(--text-primary);
    font-weight: 700;
}

.date-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    max-height: 450px;
    overflow-y: auto;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    padding: 14px;
    border-radius: 6px;
    background: var(--bg-sunken);
}

.date-option {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.096pt;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.1s ease;
}

.date-option:hover {
    background: rgba(var(--accent-rgb), 0.08);
}

.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-buttons button {
    padding: 9px 18px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 12px;
    background: linear-gradient(to bottom, var(--accent-hover), var(--accent));
    color: #ffffff;
    cursor: pointer;
    font-size: 13.306px;
    font-weight: 600;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.modal-buttons button:hover {
    background: linear-gradient(to bottom, var(--accent-active), var(--accent-strong));
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.modal-buttons button:last-child {
    background: linear-gradient(to bottom, #7a8a9e, #6b7280);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.modal-buttons button:last-child:hover {
    background: linear-gradient(to bottom, #6b7280, #5a6270);
    box-shadow: 0 6px 16px rgba(107, 114, 128, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* =========================================================================
   STOP MOTION VIEWER STYLING (Data Tab)
   ========================================================================= */

.stop-motion-controls {
    display: flex;
    gap: 12px;
    margin: 16px 0;
    justify-content: center;
}

.stop-motion-btn {
    background-color: #697072;
    color: white;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 400;
    font-size: 16.934px;
    flex: 1;
    min-height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.stop-motion-btn:hover {
    background-color: #83888A;
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.stop-motion-btn:disabled {
    background-color: #a0a0a0;
    cursor: not-allowed;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.stop-motion-btn i {
    font-size: 14.515px;
}

.stop-motion-loading-bar {
    margin: 8px 0 12px 0;
    padding: 6px 0;
}

.loading-bar-text {
    font-size: 12.096pt;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-align: center;
}

.loading-bar-progress {
    width: 100%;
    height: 4px;
    background-color: var(--bg-sunken);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.loading-bar-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    border-radius: 2px;
    animation: loadingBarAnimation 1.5s ease-in-out infinite;
}

@keyframes loadingBarAnimation {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

.speed-control {
    margin: 16px 0;
}

.speed-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.speed-label-row label {
    font-size: 13.306px;
    color: var(--text-primary);
    font-weight: 500;
}

.speed-label-row span {
    font-size: 13.306px;
    color: var(--text-secondary);
    font-weight: bold;
}

.speed-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #e0e3e8;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.speed-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.speed-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.frame-info {
    margin: 16px 0;
    text-align: center;
}

.frame-counter {
    font-weight: bold;
    color: #333333;
    font-size: 14.515px;
    padding: 5px;
}

.vintage-info {
    font-style: italic;
    color: #666666;
    font-size: 13.306px;
    margin-top: 4px;
}

/* =========================================================================
   SCROLLBARS
   ========================================================================= */

.tab-content-area::-webkit-scrollbar,
.date-grid::-webkit-scrollbar,
.date-modal-content::-webkit-scrollbar {
    width: 12px;
}

.tab-content-area::-webkit-scrollbar-track,
.date-grid::-webkit-scrollbar-track,
.date-modal-content::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}

.tab-content-area::-webkit-scrollbar-thumb,
.date-grid::-webkit-scrollbar-thumb,
.date-modal-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: padding-box;
    min-height: 30px;
}

.tab-content-area::-webkit-scrollbar-thumb:hover,
.date-grid::-webkit-scrollbar-thumb:hover,
.date-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    background-clip: padding-box;
}

/* =========================================================================
   RESPONSIVE & ACCESSIBILITY
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus states for accessibility */
button:focus-visible,
select:focus-visible,
input[type="checkbox"]:focus-visible {
    outline: none;
}

/* Global Typography Override - Production Ready Sizes */
.toolbar-btn {
    font-family: var(--font-body) !important;
    font-size: 12.91pt !important;
}
.toolbar-btn .icon { font-size: 12.515pt; }

.sidebar-header h1 { font-size: 15.934pt; font-weight: 700; }

.tab-btn { font-size: 11.641pt; }

.group-title { font-size: 13.515pt !important; font-weight: 700 !important; }

.info-box { font-size: 12.306pt !important; }

.checkbox-row label { font-size: 12.701pt !important; }

.measure-row label { font-size: 12.701pt !important; }
.measure-row select { font-size: 12.701pt !important; }

.explanation-block { font-size: 11.701pt !important; }
.explanation-title { font-size: 11.701pt !important; }

.param-label, .horizon-label, .freq-label { font-size: 12.701pt !important; }

/* Loading Modal */
.loading-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.loading-content {
    background: white;
    padding: 40px 60px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f0f0f0;
    border-top: 4px solid var(--accent-strong);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.loading-text {
    font-size: 19.354px;
    font-weight: 600;
    color: #333;
    margin: 0;
    font-family: var(--font-body);
}

.disagreement-tabs .disagreement-tab::after {
    background: rgba(17, 24, 39, 0.55);
}

.disagreement-tabs .disagreement-tab.active {
    color: rgba(17, 24, 39, 0.9);
}

.disagreement-tabs .disagreement-tab.active::after {
    background: rgba(17, 24, 39, 0.92);
}

.disagreement-tabs .disagreement-tab:not(.active):hover {
    color: rgba(17, 24, 39, 0.85);
}

/* =========================================================================
   TAB VARIANTS — Segmented glass pills (harmonizes with top toolbar/buttons)
   ========================================================================= */
.dm-tabs.tabs--segmented,
.hrs-tabs.tabs--segmented,
.disagreement-tabs.tabs--segmented {
	gap: 6px;
	padding: 6px;
	background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
	border: 1px solid var(--glass-border);
	border-radius: 10px;
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.dm-tabs.tabs--segmented .dm-tab,
.hrs-tabs.tabs--segmented .hrs-tab,
.disagreement-tabs.tabs--segmented .disagreement-tab {
	flex: 1;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 8px 14px;
	color: var(--text-secondary);
	font-weight: 400;
}

/* Remove underline bar for segmented look */
.dm-tabs.tabs--segmented .dm-tab::after,
.hrs-tabs.tabs--segmented .hrs-tab::after,
.disagreement-tabs.tabs--segmented .disagreement-tab::after {
	content: none;
}

.dm-tabs.tabs--segmented .dm-tab:hover,
.hrs-tabs.tabs--segmented .hrs-tab:hover,
.disagreement-tabs.tabs--segmented .disagreement-tab:hover {
	background: rgba(var(--accent-rgb), 0.08);
	color: var(--text-primary);
	border-color: rgba(var(--accent-rgb), 0.18);
}

.dm-tabs.tabs--segmented .dm-tab.active,
.hrs-tabs.tabs--segmented .hrs-tab.active,
.disagreement-tabs.tabs--segmented .disagreement-tab.active {
	background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.85));
	color: #ffffff;
	border-color: rgba(var(--accent-rgb), 0.45);
	box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.dm-tabs.tabs--segmented .dm-tab:focus-visible,
.hrs-tabs.tabs--segmented .hrs-tab:focus-visible,
.disagreement-tabs.tabs--segmented .disagreement-tab:focus-visible {
	outline: 2px solid rgba(var(--accent-rgb), 0.45);
	outline-offset: 2px;
}

.appendix-single-card {
    padding: 20px 24px;
}

#appendix-b-dm-panel-container .disagreement-panel-scroll {
    padding: 24px 20px 72px !important;
}

#appendix-b-dm-panel-container .disagreement-panel {
    max-width: 2080px !important;
    margin: 0 auto;
}

#appendix-b-dm-panel-container .dm-table-container {
    max-width: 100%;
}

#appendix-b-dm-panel-container .dm-table {
    max-width: 100%;
    width: 100%;
}

#appendix-b-dm-panel-container .appendix-single-card {
    max-width: 100%;
    width: 100%;
}

#appendix-b-dm-panel-container .dm-table {
    font-size: calc(var(--dm-table-font) * 0.85);
}

#appendix-b-dm-panel-container .dm-table th {
    font-size: calc(var(--dm-table-font) * 0.88);
}

#appendix-b-dm-panel-container .dm-table td:last-child {
    font-size: calc(var(--dm-table-font) * 0.88);
}