/* =============================================================================
   Microbiome Metabolome Database — Johnson Lab, Yale University
   Stylesheet, redesigned 2026-05.

   Palette is grounded in Yale's brand identity (Yale Blue #00356B, Yale Blue
   accent variants, neutral grays). Type system pairs Source Serif 4 (display)
   with Inter (UI/body) for an academic, research-grade feel.

   Class names below match the existing layout.py / data-driven Dash markup
   so this drop-in replacement does not require changes to Python.
   ===========================================================================*/

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@300;400;500;600;700&display=swap');

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------------*/
:root {
    /* Brand */
    --yale-blue:        #00356B;   /* primary */
    --yale-blue-700:    #002a55;
    --yale-blue-500:    #0a4a8f;
    --yale-blue-300:    #286DC0;   /* link / accent */
    --yale-blue-100:    #d8e4f3;   /* tints */
    --yale-blue-050:    #eef3fb;
    --yale-accent:      #BD5319;   /* Yale orange — sparingly */

    /* Neutrals (cool gray scale) */
    --ink-900:          #0f1722;
    --ink-800:          #1f2937;
    --ink-700:          #374151;
    --ink-600:          #4b5563;
    --ink-500:          #6b7280;
    --ink-400:          #9ca3af;
    --ink-300:          #d1d5db;
    --ink-200:          #e5e7eb;
    --ink-100:          #f3f4f6;
    --ink-050:          #f8fafc;

    /* Semantic */
    --bg-page:          #f8fafb;
    --bg-card:          #ffffff;
    --bg-card-quiet:    #fbfcfd;
    --border-soft:      #e5e9f0;
    --border-strong:    #d3d9e2;

    /* Typography */
    --font-display:     'Source Serif 4', 'Source Serif Pro', 'Georgia', 'Times New Roman', serif;
    --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:        ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', monospace;

    /* Layout */
    --maxw-prose:       72ch;
    --maxw-content:     1200px;
    --maxw-wide:        1400px;
    --radius-sm:        4px;
    --radius-md:        6px;
    --radius-lg:        10px;

    /* Elevation */
    --shadow-soft:      0 1px 2px rgba(15, 23, 34, 0.04), 0 4px 12px rgba(15, 23, 34, 0.04);
    --shadow-card:      0 1px 2px rgba(15, 23, 34, 0.05), 0 8px 24px rgba(15, 23, 34, 0.06);
    --shadow-pop:       0 4px 12px rgba(15, 23, 34, 0.08), 0 16px 36px rgba(15, 23, 34, 0.08);

    /* Motion */
    --ease:             cubic-bezier(.4, 0, .2, 1);
    --t-fast:           120ms;
    --t-med:            220ms;
}

/* -----------------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html       { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "cv11";
    line-height: 1.6;
    color: var(--ink-800);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* dbc.Container fluid wrapper */
.container-fluid {
    background: var(--bg-page);
    min-height: 100vh;
    padding: 0;
    max-width: 100% !important;
}

a { color: var(--yale-blue-300); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--yale-blue); text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--yale-blue-300); outline-offset: 2px; border-radius: 2px; }

/* -----------------------------------------------------------------------------
   3. HEADER (sticky top bar)
   --------------------------------------------------------------------------*/
.header-bar {
    background: var(--yale-blue);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
}
.header-bar > .row { margin: 0; }

/* The "tab" wrapper is a Dash idiom — make it a flex bar */
.header-bar .tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--maxw-wide);
    margin: 0 auto;
    padding: 0.85rem 2rem;
}

/* Header brand mark — pseudo element so we don't have to touch layout.py */
.header-bar .tab::before {
    content: "Johnson Lab  ·  Yale School of Public Health";
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.94);
    flex: 1;
}

.moreinfo {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.moreinfo:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    text-decoration: none;
}
.moreinfo:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   4. TITLE / HERO
   --------------------------------------------------------------------------*/
.title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ink-900);
    text-align: center;
    margin: 4.5rem auto 0.75rem;
    max-width: var(--maxw-content);
    padding: 0 1.5rem;
    /* Remove old gradient text */
    background: none;
    -webkit-text-fill-color: initial;
    text-shadow: none;
}

.about-text {
    display: block;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--yale-blue-300);
    margin: 2.5rem 0 1rem;
}

.para {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ink-700);
    text-align: left;
    max-width: 90ch;
    margin: 0 auto 1.25rem;
    padding: 0 1.5rem;
    text-wrap: pretty;
}
.para + .para { margin-top: 0; }

/* -----------------------------------------------------------------------------
   5. QUICK-LINK CARDS (formerly purple-gradient pills)
   --------------------------------------------------------------------------*/
.table-container,
.table-container2 {
    width: 100%;
    margin: 2rem auto 0;
    display: flex;
    justify-content: center;
    padding: 0 1.5rem;
}
.table-container2 { margin-top: 1rem; margin-bottom: 3rem; }

.table-container table,
.table-container2 table {
    border-collapse: separate;
    border-spacing: 1rem;
    width: 100%;
    max-width: var(--maxw-content);
}

.btn-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 96px;
    padding: 1.1rem 1.4rem;

    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.005em;
    color: var(--yale-blue);

    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-soft);

    transition:
        transform var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        box-shadow var(--t-med) var(--ease),
        color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease);

    position: relative;
}
/* gold accent strip on left */
.btn-section::before {
    content: "";
    position: absolute;
    left: 0; top: 14%; bottom: 14%;
    width: 3px;
    background: var(--yale-blue-300);
    border-radius: 0 2px 2px 0;
    opacity: 0.7;
    transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn-section:hover {
    transform: translateY(-2px);
    color: var(--yale-blue);
    border-color: var(--yale-blue-300);
    box-shadow: var(--shadow-card);
    background: var(--bg-card);
    text-decoration: none;
}
.btn-section:hover::before {
    opacity: 1;
    background: var(--yale-accent);
}
.btn-section:active { transform: translateY(0); }

/* -----------------------------------------------------------------------------
   6. SECTION HEADINGS
   --------------------------------------------------------------------------*/
.section-heading {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.7rem, 3.2vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink-900);
    text-align: center;
    margin: 4rem auto 0.75rem;
    max-width: var(--maxw-content);
    padding: 0 1.5rem;
    position: relative;
}
.section-heading::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--yale-blue-300);
    border-radius: 2px;
    margin: 0.85rem auto 0;
}

.section-subheading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.3;
    color: var(--ink-700);
    text-align: center;
    margin: 0.25rem auto 1.25rem;
    max-width: var(--maxw-content);
    padding: 0 1.5rem;
}

.section-description {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-600);
    text-align: center;
    max-width: 90ch;
    margin: 0 auto 2.5rem;
    padding: 0 1.5rem;
    text-wrap: pretty;
}

.section-description-list {
    text-align: left;
    list-style: disc;
    padding-left: 1.4rem;
    margin: 0.75rem auto 0;
    max-width: 64ch;
}

.section-description-list li {
    margin: 0.4rem 0;
}

/* Feature cards — 3-up grid used under section sub-headings */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: var(--maxw-content);
    margin: 0.5rem auto 2.5rem;
    padding: 0 1.5rem;
}

.feature-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 12px;
    padding: 1.5rem 1.4rem 1.4rem;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.feature-card:hover {
    border-color: var(--yale-blue-300);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -14px rgba(0, 53, 107, 0.35);
}

.feature-card__index {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--yale-blue-300);
    margin-bottom: 0.6rem;
}

.feature-card__label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--ink-900);
    margin: 0 0 0.45rem;
}

.feature-card__body {
    font-family: var(--font-sans);
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--ink-600);
    margin: 0;
}

@media (max-width: 860px) {
    .feature-cards {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}

.main-section,
.section-spacing {
    margin: 3rem auto;
    max-width: var(--maxw-wide);
    padding: 0 1.5rem;
}

.border-line {
    height: 1px;
    background: var(--border-soft);
    margin: 4rem auto 0;
    max-width: var(--maxw-content);
    width: 100%;
}

/* -----------------------------------------------------------------------------
   7. TABS
   --------------------------------------------------------------------------*/
.tabs,
.dash-tabs-container {
    margin: 0 auto !important;
    max-width: var(--maxw-content) !important;
    width: 100% !important;
}
.dash-tabs {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--border-soft) !important;
    background: transparent !important;
}

.dash-tab {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--ink-600) !important;
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.01em !important;
    padding: 0.9rem 1.75rem !important;
    margin: 0 !important;
    min-width: 0 !important;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important;
    text-align: center !important;
}
.dash-tab:hover {
    color: var(--yale-blue) !important;
    background: transparent !important;
    border-color: var(--ink-300) !important;
}
.dash-tab--selected {
    background: transparent !important;
    color: var(--yale-blue) !important;
    border-bottom-color: var(--yale-blue) !important;
    font-weight: 600 !important;
}

/* Dash 2.17 dcc.Tabs DOM: <div class="tab-parent" flex-column> -> [.tab-container,
   .tab-content]. Verified by reading dash/dcc/dash_core_components.js source.
   Dash itself ships NO width rule for .tab-content — it relies on default block
   sizing. With our cards (.form-section, .outer-container) declaring
   `width: 100%`, that creates a circular sizing dependency: .tab-content sizes
   to its content's intrinsic width, but the content's width references
   .tab-content. Browsers resolve this to min-content in some contexts, which is
   what was collapsing the Top Metabolites + Cumulative form-sections to ~400 px.
   Set an explicit `width: 100%` here so .tab-content always fills .tab-parent. */
.tab-parent {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    align-items: stretch !important;
}
.tab-container {
    width: 100% !important;
    align-self: stretch !important;
}
.dash-tab-content,
.tab-content {
    display: block !important;
    width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 1.5rem 0 0 !important;
    margin: 0 auto !important;
    max-width: var(--maxw-content) !important;
}

/* -----------------------------------------------------------------------------
   8. FORMS
   --------------------------------------------------------------------------*/
.form-section {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 2rem 2rem 2.25rem;
    margin: 1.5rem auto;
    width: 100%;                       /* fill parent inside flex/loading wrappers */
    max-width: var(--maxw-content);
    box-shadow: var(--shadow-soft);
}
/* The double-card-in-card pattern in layout.py: collapse the inner one */
.form-section .form-section {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.select-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-700);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 1.5rem 0 0.5rem;
}

.select-input { margin-bottom: 1rem; }

/* Two flat groupings on the In Vitro / In Vivo scatter views — the
   selection (two dropdowns) and the filters (two radio rows) — separated
   only by a hairline so they read as one continuous form. */
.step-card {
    padding: 0;
    margin: 0;
}
.step-card + .step-card {
    margin-top: 1.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-soft);
}
.step-card .select-label:first-of-type { margin-top: 0.5rem; }
.or-divider {
    text-align: center;
    color: var(--ink-400);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin: 0.5rem 0 0.25rem;
    text-transform: uppercase;
}

/* Dash dropdown (react-select v1 markup) */
.Select-control,
.Select.is-open > .Select-control {
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important;
    min-height: 42px !important;
    background: var(--bg-card) !important;
    font-family: var(--font-sans) !important;
}
.Select-control:hover { border-color: var(--ink-400) !important; box-shadow: none !important; }
.Select.is-focused:not(.is-open) > .Select-control {
    border-color: var(--yale-blue-300) !important;
    box-shadow: 0 0 0 3px var(--yale-blue-100) !important;
}
.Select-placeholder {
    color: var(--ink-400) !important;
    font-size: 0.94rem !important;
    font-weight: 400 !important;
}
.Select-input > input { font-family: var(--font-sans) !important; color: var(--ink-800) !important; }
.Select-value-label { color: var(--ink-800) !important; font-weight: 500 !important; }
.Select-arrow-zone { color: var(--ink-400) !important; }
.Select-menu-outer {
    border: 1px solid var(--border-strong) !important;
    border-top: 1px solid var(--border-soft) !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    box-shadow: var(--shadow-card) !important;
    margin-top: 2px !important;
    z-index: 50 !important;
}
.Select-option {
    font-family: var(--font-sans) !important;
    font-size: 0.94rem !important;
    color: var(--ink-700) !important;
    padding: 0.55rem 0.85rem !important;
}
.Select-option.is-focused {
    background: var(--yale-blue-050) !important;
    color: var(--ink-900) !important;
}
.Select-option.is-selected {
    background: var(--yale-blue-100) !important;
    color: var(--yale-blue) !important;
}
/* Multi-select chips */
.Select--multi .Select-value {
    background: var(--yale-blue-050) !important;
    border: 1px solid var(--yale-blue-100) !important;
    color: var(--yale-blue) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.86rem !important;
    margin: 3px 4px 3px 0 !important;
}
.Select--multi .Select-value-icon {
    border-right: 1px solid var(--yale-blue-100) !important;
    color: var(--yale-blue-300) !important;
    padding: 1px 6px !important;
}
.Select--multi .Select-value-icon:hover {
    background: var(--yale-blue-100) !important;
    color: var(--yale-blue) !important;
}

/* Radio button group (.dbc.RadioItems with custom .form-check rendering) */
.radio-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 1.5rem;
}
.radio-horizontal .form-check {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
.radio-horizontal .form-check-input {
    margin: 0 0.45rem 0 0;
    accent-color: var(--yale-blue);
    width: 16px; height: 16px;
    cursor: pointer;
}
.radio-horizontal .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--yale-blue-100);
}
.radio-horizontal .form-check-label {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    background: var(--ink-100);
    border: 1px solid var(--ink-200);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-700);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}
.radio-horizontal .form-check-label:hover {
    background: var(--ink-200);
    color: var(--ink-900);
}
.radio-horizontal .form-check-input:checked + .form-check-label {
    background: var(--yale-blue);
    color: #fff;
    border-color: var(--yale-blue);
}

/* -----------------------------------------------------------------------------
   9. PLOT CONTAINERS
   --------------------------------------------------------------------------*/
.outer-container {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 1.5rem auto;
    width: 100%;                       /* dcc.Loading uses display:flex inline; without
                                          this, .outer-container collapses to content */
    max-width: var(--maxw-wide);
    box-shadow: var(--shadow-soft);
}
.outer-container.with-shadow { box-shadow: var(--shadow-card); }
.outer-container:hover { box-shadow: var(--shadow-card); }

.inner-container { width: 100%; }

.scatter-container,
.scatter-container-top {
    background: var(--bg-card-quiet);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin: 0.75rem auto;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    /* min-height kept low for the empty-state and "no selection" placeholders so
       the form section doesn't reserve a 600 px void above the fold. Plotly
       figures set their own height (520 px in dynamicPlots) once data lands. */
    min-height: 280px;
    max-height: 760px;
    /* Block layout: scatter figures use autosize and naturally fit the container
       width. The previous `display:flex; justify-content:stretch` was a no-op
       (stretch is not valid for justify-content) — it fell back to flex-start
       and pinned the empty-state figure to the left edge instead of centering
       its annotation. Plotly's own paper-coord centering then placed the
       message off-center inside its smaller-than-container figure box. */
    display: block;
    position: relative;
}
/* Plotly's outer wrapper inside the container should fill width so that
   `paper`-anchored annotations land in the visual center. */
.scatter-container > div,
.scatter-container > .js-plotly-plot {
    width: 100% !important;
}
/* `.scatter-container-top` hosts the co-occurrence scatter which uses an
   explicit, content-driven figure width (num_points * px) to allow horizontal
   scrolling for many x-tick labels. A blanket `width: 100% !important` would
   override Plotly's inline width and squash all labels into the viewport, so
   only enforce `min-width: 100%` here — that keeps the empty-state figure
   centered while letting Plotly's intrinsic width win when it's larger. */
.scatter-container-top > div,
.scatter-container-top > .js-plotly-plot {
    min-width: 100%;
}
.scatter-container-heat {
    background: var(--bg-card-quiet);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin: 0.75rem auto;
    width: 100%;
    max-width: 100%;
    min-height: 320px;
    max-height: 85vh;
    height: auto;
    overflow: auto;
    position: relative;
    display: block;
}

/* Custom scrollbars */
.scatter-container::-webkit-scrollbar,
.scatter-container-top::-webkit-scrollbar,
.scatter-container-heat::-webkit-scrollbar { width: 10px; height: 10px; }
.scatter-container::-webkit-scrollbar-track,
.scatter-container-top::-webkit-scrollbar-track,
.scatter-container-heat::-webkit-scrollbar-track { background: var(--ink-100); border-radius: 8px; }
.scatter-container::-webkit-scrollbar-thumb,
.scatter-container-top::-webkit-scrollbar-thumb,
.scatter-container-heat::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 8px; border: 2px solid var(--ink-100); }
.scatter-container::-webkit-scrollbar-thumb:hover,
.scatter-container-top::-webkit-scrollbar-thumb:hover,
.scatter-container-heat::-webkit-scrollbar-thumb:hover { background: var(--yale-blue-300); }

/* -----------------------------------------------------------------------------
   10. DASH LOADING
   --------------------------------------------------------------------------*/
/* dcc.Loading attaches an inline style {display:flex; alignItems:center; ...} which
   collapses non-flex children (.outer-container etc.) to their content. Override
   with !important so children that say `width: 100%` actually get full width.
   Match every Loading wrapper variant we use — `.loading-wrapper` (set by
   create_loading_wrapper) plus the raw dcc.Loading instances whose IDs contain
   "loading" (e.g. outer-container-plus-loading-scatter-top). */
.loading-wrapper,
[id*="loading"] {
    display: block !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    min-height: 0 !important;
    width: 100% !important;
}

/* Belt-and-suspenders: anywhere our cards or section containers might be inside a
   flex parent (Dash's tab content panel, dcc.Loading, etc.), force them to the
   full content width. The previous CSS relied on default block behavior which
   was being overridden in some tab branches. */
.form-section,
.outer-container,
.section-spacing,
.main-section {
    width: 100% !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
}
.dash-loading,
._dash-loading,
.dash-spinner {
    color: var(--yale-blue) !important;
}
._dash-loading-callback { background: rgba(255, 255, 255, 0.55) !important; }
.dropdown-loading { min-height: 56px; }

/* -----------------------------------------------------------------------------
   11. FOOTER
   --------------------------------------------------------------------------*/
.footer {
    background: var(--yale-blue-700);
    color: rgba(255, 255, 255, 0.86);
    padding: 3.5rem 0 1.25rem;
    margin-top: 4rem;
    border-top: 4px solid var(--yale-blue-300);
}
.footer-mega-menu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: var(--maxw-content);
    margin: 0 auto;
    padding: 0 2rem;
}
.menu-section h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.96);
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.menu-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Spread links across 2-3 columns instead of one tall stack. auto-fit + minmax
       collapses to a single column on narrow viewports automatically. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.25rem 2rem;
}
.menu-section li { margin: 0; }
.menu-section a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.92rem;
    font-weight: 400;
    padding: 0.4rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
    text-decoration: none;
}
.menu-section a::before {
    content: "›";
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1em;
    line-height: 1;
    transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.menu-section a:hover {
    color: #ffffff;
    text-decoration: none;
    gap: 0.7rem;
}
.menu-section a:hover::before {
    color: var(--yale-blue-300);
    transform: translateX(2px);
}
.copyright {
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    margin: 2.5rem auto 0;
    padding: 1.25rem 1rem 0;
    max-width: var(--maxw-content);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* -----------------------------------------------------------------------------
   12. POPUPS / MODAL OVERLAYS
   --------------------------------------------------------------------------*/
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 34, 0.55);
    display: none;
    z-index: 10000;
    backdrop-filter: blur(6px);
}
.popup-overlay:target {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.popup {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 2rem 2.25rem;
    max-width: 640px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-pop);
    animation: popupIn 220ms var(--ease);
}
@keyframes popupIn {
    from { opacity: 0; transform: translateY(-8px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.popup h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0 0 0.5rem;
    letter-spacing: -0.005em;
}
.popup .content {
    color: var(--ink-700);
    line-height: 1.7;
    font-size: 0.96rem;
}
.popup .content a { color: var(--yale-blue-300); }
.close {
    position: absolute;
    top: 0.75rem; right: 1rem;
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--ink-500);
    background: var(--ink-100);
    border-radius: 50%;
    text-decoration: none;
    transition: all var(--t-fast) var(--ease);
}
.close:hover { background: var(--ink-200); color: var(--ink-800); text-decoration: none; }

/* -----------------------------------------------------------------------------
   13. PLOTLY OVERRIDES (subtle)
   --------------------------------------------------------------------------*/
.modebar-container { display: none !important; } /* hide plotly modebar by default */
.scatter-container .modebar-container,
.scatter-container-top .modebar-container,
.scatter-container-heat .modebar-container { display: block !important; }
.modebar-btn--logo { display: none !important; }
.js-plotly-plot .plotly text { font-family: var(--font-sans) !important; }

/* -----------------------------------------------------------------------------
   14. UTILITY / MISC
   --------------------------------------------------------------------------*/
.btn-center { margin: 0 auto; }
.cell21, .cell22 { vertical-align: top; }

/* Section anchor offsets — so #section1 etc. don't hide under sticky header */
section[id], [id^="section"] { scroll-margin-top: 100px; }

/* Remove the Dash dev "undo/redo" UI in production */
._dash-undo-redo { display: none !important; }

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

/* -----------------------------------------------------------------------------
   15. RESPONSIVE
   --------------------------------------------------------------------------*/
@media (max-width: 1200px) {
    .header-bar .tab,
    .footer-mega-menu { padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (max-width: 992px) {
    .title { margin-top: 3rem; }
    .table-container table,
    .table-container2 table { border-spacing: 0.6rem; }
    .btn-section { min-height: 80px; padding: 1rem; font-size: 0.92rem; }
}
@media (max-width: 768px) {
    .header-bar .tab { flex-direction: row; gap: 1rem; padding: 0.7rem 1rem; }
    .header-bar .tab::before { font-size: 0.84rem; }
    .title { font-size: clamp(1.85rem, 6vw, 2.25rem); margin-top: 2.25rem; }
    .para { font-size: 1rem; padding: 0 1.25rem; }
    .form-section { padding: 1.25rem; }
    .table-container table,
    .table-container2 table { border-spacing: 0; width: 100%; }
    .table-container td,
    .table-container2 td { display: block; width: 100%; padding: 0.4rem 0; }
    .btn-section { min-height: 64px; }
    .dash-tab { padding: 0.7rem 1rem !important; font-size: 0.9rem !important; }
    .footer { padding: 2.5rem 0 1rem; }
    .popup { padding: 1.5rem; }
}

/* -----------------------------------------------------------------------------
   16. FORCED-COLOR / REDUCED-MOTION ACCESSIBILITY
   --------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}