/* ============================================================
   Hawaiʻi Dashboard - Styles
   Flat design, Inter font, ocean teal (#0D7C8F) accent
   ============================================================ */

/*
 * Naming conventions (BEM-inspired):
 *
 * Blocks (components):       .card, .modal, .top-nav, .header
 * Elements (children):       .card-title, .modal-title, .top-nav-link
 *   -- separator: single hyphen between block and element name
 * Modifiers (state/variant): .card--improving, .modal-tab.active
 *   -- block modifiers use double-hyphen; state classes use plain adjective
 *
 * Page-scoped prefixes:
 *   .fyc-*   Change Summary page components  (five-year-change/, ten-year-change/)
 *   .sc-*    Scorecard sub-components          (Change Summary pages)
 *   .rh-*    Rank-history sub-components       (modal)
 *
 * CSS custom properties:  --hawaii-blue, --border, --radius, etc.
 *   -- all defined in :root; never overridden inline except for theming
 */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #F5F5F5;
    --card-bg: #FFFFFF;
    --text: #333333;
    --text-secondary: #555555;
    --text-muted: #555555;
    --hawaii-blue: #0D7C8F;
    --hawaii-blue-light: #EEF8FA;
    --hawaii-blue-hover: rgba(13, 124, 143, 0.3);
    --hawaii-blue-dark: #1a6b8a;
    --text-vintage: #626D76;
    --text-2xs: 0.7rem;
    --text-xs: 0.75rem;
    --text-sm: 0.82rem;
    --text-base: 0.88rem;
    --text-md: 0.95rem;
    --text-lg: 1.0rem;
    --text-xl: 1.1rem;
    --text-2xl: 1.35rem;
    --avg-gray-light: #F3F4F6;
    --positive: #059669;
    --positive-bg: rgba(5, 150, 105, 0.10);
    --negative: #C0392B;
    --negative-bg: rgba(192, 57, 43, 0.10);
    --neutral: #c08a1a;
    --neutral-bg: #fef9e7;
    --border: #EAEAEA;
    --radius: 8px;
    --radius-sm: 6px;
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --transition: 0.15s ease;
}

/* --- Global default link color ---
 * Existing scoped rules (.modal-source a, .cn-text a, .cn-cite, etc.)
 * already use --hawaii-blue and win on specificity. This rule catches
 * any plain <a> in content blocks (e.g. /off-the-charts/ posts) that
 * would otherwise fall back to the browser-default bright blue.
 */
a {
    color: var(--hawaii-blue);
}
a:hover {
    color: var(--hawaii-blue-dark);
}

/* --- Top Navigation --- */
.top-nav {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.6rem 1rem;
    background: var(--card-bg);
    overflow-x: auto;
    scrollbar-width: none;
}

.top-nav::-webkit-scrollbar {
    display: none;
}

.top-nav-link {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
}

.top-nav-link:hover {
    color: var(--text);
    background: rgba(0, 0, 0, 0.03);
}

.top-nav-link.active {
    color: var(--hawaii-blue);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--hawaii-blue);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0 0 4px 4px;
    z-index: 1000;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* --- Header --- */
.header {
    background: var(--bg);
    color: var(--text);
    padding: 2rem 1.5rem 2rem;
    text-align: center;
    border-bottom: 1px solid #dcdcdc;
}

.header-content {
    max-width: 800px;
    margin: 0 auto;
}

.header-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.header-subtitle {
    font-size: var(--text-md);
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
    font-weight: 400;
}

.header-subtitle-em {
    font-weight: 500;
    display: block;
    margin-top: 0.25rem;
}

.capability-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    margin-top: 1rem;
}
.capability-strip span,
.capability-strip a {
    font-size: var(--text-base);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.cap-sep {
    color: var(--border);
    font-variant: normal;
    text-transform: none;
}
/* --- Question dropdown --- */
.question-search-wrap {
    position: relative;
    flex-shrink: 0;
}

/* ---- Dropdown grammar (shared base) ------------------------------------
 * Any dropdown control (custom button or native <select>) composes onto
 * .dropdown-trigger for a single visual grammar: white bg, gray border,
 * dark text, teal chevron at rest, teal border on hover/open. Variant
 * classes below only add size-specific properties (padding, font-size,
 * width). See style_rules.md. */
.dropdown-trigger {
    font-family: inherit;
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    line-height: 1.3;
    text-align: left;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.dropdown-trigger:hover {
    border-color: var(--hawaii-blue);
}
.dropdown-trigger[aria-expanded="true"] {
    border-color: var(--hawaii-blue);
    box-shadow: 0 0 0 2px rgba(13,124,143,0.15);
}
.dropdown-trigger:focus-visible {
    outline: 2px solid var(--hawaii-blue);
    outline-offset: 2px;
}

.question-search-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: var(--text-xl);
    font-weight: 500;
}
.question-search-icon {
    flex-shrink: 0;
    color: var(--hawaii-blue);
    transition: transform var(--transition);
}
.question-search-trigger[aria-expanded="true"] .question-search-icon {
    transform: rotate(180deg);
}
.question-search-label {
    flex: 1;
}
.question-search-dropdown {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: auto;
    width: max-content;
    max-width: calc(100vw - 2rem);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 14px rgba(0,0,0,0.09);
    list-style: none;
    z-index: 200;
    max-height: 400px;
    overflow-y: auto;
}
.question-search-item {
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: var(--text-lg);
    white-space: nowrap;
}
.question-search-item:hover,
.question-search-item[aria-selected="true"] {
    background: var(--hawaii-blue-light);
    color: var(--hawaii-blue);
}
.question-search-trigger.active {
    border-color: var(--hawaii-blue);
    background: var(--hawaii-blue-light);
    color: var(--hawaii-blue);
}
.question-search-trigger.active .question-search-icon {
    display: none;
}
.question-search-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}
.question-search-clear {
    font-size: var(--text-md);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 0.2rem;
    margin-left: auto;
}
.question-search-clear:hover {
    color: var(--negative);
}

/* --- Jump to metric dropdown --- */
.metric-search-wrap {
    position: relative;
    flex-shrink: 0;
}

.metric-search-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem;
    font-size: var(--text-sm);
}
.metric-search-icon {
    flex-shrink: 0;
    color: var(--hawaii-blue);
    transition: transform var(--transition);
}
.metric-search-trigger[aria-expanded="true"] .metric-search-icon {
    transform: rotate(180deg);
}
.metric-search-label {
    flex: 1;
}
.metric-search-dropdown {
    position: absolute;
    top: calc(100% + 3px);
    right: 0;
    left: auto;
    width: max-content;
    max-width: calc(100vw - 2rem);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 14px rgba(0,0,0,0.09);
    list-style: none;
    z-index: 200;
    max-height: 340px;
    overflow-y: auto;
}
.metric-search-group-header {
    padding: 0.6rem 1rem 0.3rem;
    font-size: var(--text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
.metric-search-group-header:not(:first-child) {
    border-top: 1px solid var(--border);
}
.metric-search-item {
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    cursor: pointer;
    font-size: var(--text-lg);
    white-space: nowrap;
}
.metric-search-item:hover,
.metric-search-item[aria-selected="true"] {
    background: var(--hawaii-blue-light);
    color: var(--hawaii-blue);
}

/* --- Bundle entry points --- */
.bundle-section {
    background: var(--bg);
    padding: 0.65rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.explore-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.01em;
}



/* Hide non-matching cards and area headings when a bundle is active */
.bundle-active .card {
    display: none;
}

.bundle-active .card.bundle-match {
    display: block;
}

.bundle-active .area-section-heading {
    display: none;
}

/* Modal bundle nav bar */
.bundle-nav {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    background: var(--hawaii-blue-light);
    border-bottom: 1px solid rgba(13,124,143,0.2);
    font-size: var(--text-base);
}

.bundle-nav.visible { display: flex; }

.bundle-nav-label {
    flex: 1;
    font-weight: 600;
    color: var(--hawaii-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bundle-nav-counter {
    color: var(--text-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.bundle-nav-btn {
    background: none;
    border: 1px solid rgba(13,124,143,0.3);
    border-radius: var(--radius-sm);
    color: var(--hawaii-blue);
    font-size: var(--text-sm);
    padding: 0.4rem 0.75rem;
    min-height: 36px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.bundle-nav-btn:hover { background: var(--hawaii-blue); color: #fff; }
.bundle-nav-btn:disabled { opacity: 0.3; cursor: default; }

/* --- Dashboard Grid --- */
.dashboard-grid {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

/* --- Area chips: topic-first nav above the grid --- */
.area-chips {
    max-width: var(--content-max);
    margin: 1rem auto 1.25rem;
    padding: 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.area-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.area-chip:hover,
.area-chip:focus-visible {
    border-color: var(--hawaii-blue);
    background: var(--hawaii-blue-light);
    color: var(--hawaii-blue);
}

.area-chip:focus-visible {
    outline: 2px solid var(--hawaii-blue);
    outline-offset: 1px;
}

.area-chip-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.area-chip-icon svg {
    width: 14px;
    height: 14px;
}

/* On narrow widths, drop the icons to keep the chip row from stacking 5
   tall. The text alone is enough to navigate. */
@media (max-width: 540px) {
    .area-chip-icon { display: none; }
    .area-chip { padding: 0.5rem 0.75rem; }
}

/* --- Area section headings --- */
.area-section-heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    margin-top: 1.75rem;
}

.area-section-heading:first-child {
    margin-top: 0;
}

.area-section-icon {
    font-size: var(--text-xl);
    line-height: 1;
}

.area-section-icon svg {
    width: 18px;
    height: 18px;
}

.area-section-label {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

/* --- Card --- */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.25rem 1rem;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform 0.15s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.card:hover {
    border-color: var(--hawaii-blue);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}
.card.active {
    border-color: var(--hawaii-blue);
    background: var(--hawaii-blue-light);
    box-shadow: 0 2px 8px rgba(13,124,143,0.12);
}

.card:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.card:focus-visible {
    outline: 2px solid var(--hawaii-blue);
    outline-offset: 2px;
    border-color: var(--hawaii-blue);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}


/* Rank verdict: the second row of the median comparator block. Sized to
   mirror .comp-verdict on the year-change block so both rows of both
   blocks line up visually. */
.comp-rank {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-muted);
    display: inline-block;
}

/* 3-tier rank colors: mirrors Summary page National Ranking table.
   Top third → green, middle third → grey, bottom third → red. */
.comp-rank.rank-good { color: var(--positive); }
.comp-rank.rank-mid  { color: var(--neutral); }
.comp-rank.rank-bad  { color: var(--negative); }

/* Tier prefix sits inside the rank verdict and stays slightly less bold
   so the rank number reads as the dominant element. */
.comp-rank-tier {
    font-weight: 500;
}

/* Card footer: combines source attribution (left) with the "View by county"
   link (right) on a single low-weight row, separated from the comparisons by
   a thin divider. Either can be absent; the row collapses to one item. */
.card-footer {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.card-footer:has(.comp-county:only-child) {
    justify-content: center;
}

.card-source {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.2;
}

.comp-county {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--hawaii-blue);
    cursor: pointer;
    opacity: 0.8;
    display: inline-block;
    margin-left: auto;
    transition: opacity var(--transition);
}

.comp-county:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Touch devices have no hover; show the underline affordance at rest so the
   click target is discoverable. */
@media (hover: none) {
    .comp-county {
        opacity: 1;
        text-decoration: underline;
    }
}

/* Directional context chip: sits between the value and the chart so the
   reader knows whether an upward line is good or bad without parsing the
   green/red fill. Pill-shaped so it reads as a tag, not narrative italic. */
.card-direction {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: -0.1rem;
    margin-bottom: 0.6rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* Global chart key: single row above the dashboard grid that explains
   the line treatments used by every card chart below. SVG strokes match
   the chart's actual line treatment (HAWAII_BLUE 2px solid · #999 1.5px
   dashed) so the key reads as a true legend, not a generic icon. */
.chart-key {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.3rem;
    font-size: 12px;
    line-height: 1;
    color: var(--text-muted);
    margin: 0.25rem auto 1.5rem;
    padding: 0 1rem;
}

.chart-key-label {
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 10px;
    font-weight: 600;
    opacity: 0.7;
}

.chart-key-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.chart-key-stroke {
    flex-shrink: 0;
}

.card-metric {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    transition: color var(--transition);
}

.card:hover .card-metric,
.card:focus-visible .card-metric {
    color: var(--hawaii-blue);
}

.card-hero {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.card-hawaii-value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.card-unit,
.card-year {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
}

.card-sparkline {
    height: 56px;
    width: 100%;
}

/* --- Card Comparisons (the two key indicators) --- */
.card-comparisons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    overflow: hidden;
}

.card-comp {
    text-align: center;
    padding: 0.4rem 0.25rem;
    border-radius: var(--radius-sm);
}

.comp-label {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
    font-weight: 600;
    white-space: nowrap;
}

.comp-verdict {
    font-size: var(--text-base);
    font-weight: 700;
    font-family: var(--font-heading);
}

.comp-detail {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-top: 0.1rem;
}


.card-comp.positive .comp-verdict {
    color: var(--positive);
}

.card-comp.negative .comp-verdict {
    color: var(--negative);
}

.card-comp.neutral .comp-verdict {
    color: var(--neutral);
}

/* --- Modal --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-width: 1100px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.modal::-webkit-scrollbar { width: 4px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.modal-actions {
    position: sticky;
    top: 0.75rem;
    align-self: flex-end;
    margin-right: 1rem;
    margin-bottom: -2.5rem;
    display: flex;
    gap: 0.4rem;
    z-index: 10;
}

.modal-share-btn {
    height: 36px;
    padding: 0 0.85rem;
    gap: 0.4rem;
    border: 1px solid var(--hawaii-blue);
    background: var(--hawaii-blue);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--text-base);
    font-weight: 500;
    font-family: inherit;
    transition: all var(--transition);
}

.modal-share-btn svg { stroke: #fff; }

.modal-share-btn:hover {
    background: var(--hawaii-blue-dark);
    border-color: var(--hawaii-blue-dark);
    color: #fff;
}

.modal-share-btn.copied {
    background: var(--positive);
    border-color: var(--positive);
    color: #fff;
}

.modal-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    transition: background var(--transition);
    z-index: 10;
}

.modal-close:hover {
    background: var(--avg-gray-light);
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem 2rem 0;
}

.modal-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-icon svg {
    width: 32px;
    height: 32px;
}

.modal-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.modal-unit-label {
    font-size: var(--text-md);
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.modal-area {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.modal-vintage {
    font-size: var(--text-xs);
    color: var(--text-vintage);
    margin-top: 0.25rem;
    letter-spacing: 0.01em;
}

.modal-latest-monthly {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.card-latest-monthly {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* --- Modal Tabs --- */
.modal-tabs {
    display: flex;
    gap: 0;
    padding: 0 2rem;
    margin-top: 0.75rem;
    border-bottom: 2px solid var(--border);
    flex-shrink: 0;
}

.modal-tab {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 0.55rem 1.35rem 0.6rem;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.tab-sub {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    line-height: 1;
    display: block;
}

.modal-tab:hover .tab-sub,
.modal-tab.active .tab-sub {
    color: inherit;
    opacity: 0.7;
}

.modal-tab:hover {
    color: var(--text);
    border-bottom-color: var(--hawaii-blue-hover);
}

.modal-tab:focus-visible {
    outline: 2px solid var(--hawaii-blue);
    outline-offset: -2px;
    color: var(--text-secondary);
}

.modal-tab.active {
    color: var(--hawaii-blue);
    font-weight: 700;
    border-bottom-color: var(--hawaii-blue);
}

.modal-tab .tab-rank {
    font-size: var(--text-base);
    font-weight: inherit;
    color: inherit;
    margin-left: 0.2rem;
}

.modal-chart-container {
    padding: 1.5rem 1rem;
    height: 440px;
}


.modal-brief {
    padding: 1rem 2rem;
    font-size: var(--text-xl);
    line-height: 1.6;
    color: var(--text);
}

.modal-brief strong {
    font-weight: 600;
}

.modal-how-toggle summary {
    font-size: var(--text-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
}

.modal-how-toggle summary::before {
    content: "+ ";
    color: var(--hawaii-blue);
}

.modal-how-toggle[open] summary::before {
    content: "\2212  ";
    color: var(--hawaii-blue);
}

.modal-how-toggle summary::-webkit-details-marker {
    display: none;
}

.modal-source {
    font-size: var(--text-base);
    color: var(--text-muted);
    padding: 0.85rem 2rem;
    background: var(--bg);
    position: static;
}

.modal-official {
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding: 0.5rem 2rem 0;
    margin: 0;
}

/* Threshold dropdown: single trigger shows active state; menu reveals alternatives */
.threshold-toggle {
    display: inline-block;
    position: relative;
}
.threshold-trigger {
    font-size: var(--text-sm);
    padding: 0.2rem 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.threshold-trigger-caret {
    color: var(--hawaii-blue);
    transition: transform 0.15s;
}
.threshold-trigger[aria-expanded="true"] .threshold-trigger-caret {
    transform: rotate(180deg);
}
.threshold-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
    min-width: 100%;
    width: max-content;
    z-index: 200;
}
.threshold-option {
    padding: 0.45rem 1rem;
    font-size: var(--text-sm);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}
.threshold-option:hover {
    background: var(--hawaii-blue-light);
    color: var(--hawaii-blue);
}
.threshold-option.active {
    font-weight: 600;
    background: var(--bg);
}
.threshold-option.active::before {
    content: "\2713  ";
    color: var(--hawaii-blue);
    font-weight: 700;
}

.modal-source a {
    color: var(--hawaii-blue);
    text-decoration: none;
}

.modal-source a:hover {
    text-decoration: underline;
}

.source-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.chart-error::after {
    content: "Chart data unavailable";
    display: block;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
    padding: 2rem;
}

.csv-sep {
    margin: 0 0.5rem;
    opacity: 0.4;
}

/* --- Share & Cite panel --- */



/* --- Modal utilities (data table, chart note, toggle) --- */

.modal-chart-note {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: right;
    padding: 0.1rem 0.5rem 0;
    margin: 0;
}

.table-toggle-wrap {
    text-align: left;
    padding: 0 2rem 0.25rem;
}

.table-toggle {
    color: var(--hawaii-blue);
    text-decoration: none;
    border: 1px solid rgba(13,124,143,0.35);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    background: var(--hawaii-blue-light);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.table-toggle:hover {
    background: var(--hawaii-blue);
    color: #fff;
    border-color: var(--hawaii-blue);
}

.data-table {
    width: auto;
    border-collapse: collapse;
    font-size: var(--text-base);
    margin: 0 auto;
}

.data-table th {
    text-align: left;
    padding: 0.4rem 0.8rem;
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--text-base);
    text-transform: uppercase;
}

.data-table td {
    padding: 0.35rem 0.8rem;
    border-bottom: 1px solid #f0f0f0;
}

.data-table tr:hover td { background: #f9f9f9; }


.data-table .section-header td {
    font-weight: 700;
    padding-top: 1.5rem;
    border-bottom: 2px solid var(--border);
    font-size: var(--text-base);
    text-transform: uppercase;
    color: var(--text-muted);
}

.modal-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Rankings View --- */
.modal-rankings {
    padding: 1rem 2rem 2rem;
}

.rankings-subtitle {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.rankings-subtitle:empty {
    display: none;
    margin: 0;
}

.rankings-rank {
    font-size: var(--text-md);
    color: var(--hawaii-blue);
    font-weight: 600;
    margin-bottom: 1rem;
}

.rankings-rank:empty {
    display: none;
    margin: 0;
}

.trend-subtitle {
    padding: 1rem 2rem 0;
}

.rankings-chart-wrap {
    position: relative;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* --- Rank History View --- */
.modal-rank-history {
    padding: 1rem 2rem 1.5rem;
}
.rank-history-chart-wrap {
    position: relative;
    width: 100%;
}
/* Shared compare-with dropdown bar, between the tab row and the chart. Visible
 * on the Trend and Rank history tabs only; modal.js toggles display.           */
.compare-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 2rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.compare-label {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}
.compare-select {
    font-size: var(--text-sm);
    padding: 0.3rem 1.75rem 0.3rem 0.55rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230D7C8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 12px;
}
/* --- Rank History Narrative --- */
.rh-narrative {
    padding: 1.25rem 0 1.5rem;
    border-top: 1px solid var(--border);
}
.rh-narr-section {
    margin-bottom: 1.1rem;
}
.rh-narr-section:last-child {
    margin-bottom: 0;
}
.rh-narr-heading {
    font-size: var(--text-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.rh-narr-item {
    margin-bottom: 0.75rem;
}
.rh-narr-item:last-child {
    margin-bottom: 0;
}
.rh-narr-state {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.2rem;
}
.rh-narr-text {
    font-size: var(--text-xl);
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}
.rh-narr-explore {
    margin-bottom: 0.6rem;
}
.rh-narr-explore:last-child {
    margin-bottom: 0;
}
.rh-narr-source {
    display: inline-block;
    font-size: var(--text-xs);
    color: var(--hawaii-blue);
    text-decoration: none;
    margin-top: 0.3rem;
    opacity: 0.8;
}
.rh-narr-source:hover {
    opacity: 1;
    text-decoration: underline;
}

/* --- Consolidated narrative (test: metrics with countyNarrative field) --- */
.modal-consolidated {
    padding: 1.25rem 2rem 2rem;
    border-top: 1px solid var(--border);
}
.cn-section {
    margin-bottom: 2rem;
}
.cn-section:last-child {
    margin-bottom: 0;
}
.cn-heading {
    font-size: var(--text-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.cn-text {
    font-size: var(--text-xl);
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}
.cn-text:last-child { margin-bottom: 0; }
.cn-text a { color: var(--hawaii-blue); text-decoration: none; }
.cn-text a:hover { text-decoration: underline; }
.cn-focus-list { list-style: none; padding: 0; margin: 0; }
.cn-focus-list li { font-size: var(--text-xl); line-height: 1.65; color: var(--text-secondary); margin-bottom: 0.5rem; }
.cn-focus-list li:last-child { margin-bottom: 0; }
.cn-cite { color: var(--hawaii-blue); text-decoration: none; font-size: var(--text-xs); margin-left: 0.15rem; }
.cn-cite:hover { text-decoration: underline; }
.cn-item {
    margin-bottom: 0.85rem;
}
.cn-item:last-child { margin-bottom: 0; }
.cn-state {
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.cn-state--learn { color: var(--positive); }
.cn-state--caution { color: var(--negative); }
.cn-source {
    display: inline-block;
    font-size: var(--text-xs);
    color: var(--hawaii-blue);
    text-decoration: none;
    margin-top: 0.3rem;
    opacity: 0.8;
}
.cn-source:hover { opacity: 1; text-decoration: underline; }
.cn-data-note {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    border-left: 2px solid var(--neutral) !important;
}
.cn-data-note .cn-text {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* --- County View --- */
.modal-county {
    padding: 1rem 2rem 2rem;
}

.county-subtitle {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.county-note {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
    padding: 0.6rem 1rem;
    margin: 0.75rem 1rem 0;
    border-left: 3px solid var(--neutral);
    background: var(--neutral-bg);
    border-radius: 0 4px 4px 0;
}

.county-chart-container {
    height: 440px;
}

/* --- Go Deeper --- */
.go-deeper {
    border-top: none;
    padding: 2.5rem 1.5rem 2rem;
    max-width: 1320px;
    margin: 0 auto;
}

.go-deeper-inner {
    max-width: 1320px;
    margin: 0 auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
}

.go-deeper-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin-bottom: 0.35rem;
}

.go-deeper-subtitle {
    font-size: var(--text-md);
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.go-deeper-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
}

.go-deeper-heading {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.go-deeper-list {
    list-style: none;
}

.go-deeper-list li {
    padding: 0.3rem 0;
    line-height: 1.4;
}

.go-deeper-list li + li {
    border-top: none;
}

.go-deeper-list a {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--hawaii-blue);
    text-decoration: none;
    display: inline;
}

.go-deeper-list a:hover {
    text-decoration: underline;
}

.go-deeper-list span {
    font-size: var(--text-base);
    color: var(--text-muted);
    display: inline;
    margin-left: 0.1rem;
}

.go-deeper-list span::before {
    content: " \00b7 ";
    color: var(--border);
}

/* --- Footer --- */
.footer {
    text-align: center;
    padding: 1rem 1.5rem 1.5rem;
    color: var(--text-muted);
    font-size: var(--text-base);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.footer a {
    color: var(--hawaii-blue);
    text-decoration: none;
}

.footer p + p {
    margin-top: 0.35rem;
}

.footer-updated {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    opacity: 0.7;
}

.footer-attribution {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.footer-attribution a {
    color: #d03135;
    text-decoration: none;
    font-weight: 500;
}

.footer-attribution a:hover {
    text-decoration: underline;
}

/* --- Responsive --- */

@media (max-width: 700px) {
    .go-deeper-columns {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .go-deeper {
        padding: 2rem 1rem 1.5rem;
    }

    .top-nav-link {
        font-size: var(--text-sm);
        padding: 0.45rem 0.65rem;
    }

    /* Bundle bar + jump dropdown stack vertically on mobile */
    .bundle-section {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.65rem 1rem;
    }

    .question-search-wrap,
    .metric-search-wrap {
        width: 100%;
    }

    .question-search-trigger,
    .metric-search-trigger {
        width: 100%;
        justify-content: space-between;
    }

    .question-search-dropdown,
    .metric-search-dropdown {
        left: 0;
        right: 0;
        width: auto;
    }

    .header {
        padding: 1rem 1rem 0.75rem;
    }

    .header-title {
        font-size: 1.5rem;
    }

    .header-subtitle {
        font-size: var(--text-xs);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1rem;
    }

    .card {
        padding: 1.25rem;
        overflow: hidden;
    }

    .card-comparisons {
        gap: 0.25rem;
    }

    .comp-label {
        font-size: var(--text-2xs);
        letter-spacing: 0.02em;
    }

    .comp-verdict {
        font-size: 0.85rem;
    }

    .comp-detail {
        font-size: var(--text-2xs);
    }

    .card-comp {
        min-width: 0;
        overflow: hidden;
    }

    .modal-overlay {
        padding: 0.5rem;
    }

    .modal {
        max-height: 95vh;
    }

    /* Actions become a full-width sticky strip so they never float over body text.
       flex-shrink: 0 + min-height keeps iOS Safari from collapsing the strip to
       zero when the modal's flex column overflows max-height. */
    .modal-actions {
        position: sticky;
        top: 0;
        align-self: auto;
        width: 100%;
        margin-right: 0;
        margin-bottom: 0;
        background: var(--card-bg);
        border-bottom: 1px solid var(--border);
        padding: 0.4rem 0.5rem;
        justify-content: flex-end;
        gap: 0.25rem;
        z-index: 10;
        flex-shrink: 0;
        min-height: 44px;
    }

    .modal-share-btn .share-label {
        display: none;
    }

    .modal-share-btn {
        padding: 0 0.5rem;
    }

    .modal-header {
        padding: 1rem 1rem 0;
        align-items: flex-start;
    }

    .modal-close {
        top: 0.75rem;
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .modal-chart-container {
        padding: 1rem;
        height: min(280px, 42vh);
    }

    .modal-county {
        padding: 1rem 1rem 1.5rem;
    }

    .modal-rank-history {
        padding: 1rem 1rem 1.5rem;
    }

    .county-chart-container {
        height: min(280px, 42vh);
    }

    .modal-official {
        padding: 0.6rem 1rem;
        margin-top: 0.75rem;
    }

    .modal-source {
        padding: 0.75rem 1rem;
    }

    .modal-title {
        font-size: var(--text-xl);
    }

    .modal-tabs {
        padding: 0 1rem;
        margin-top: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .modal-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-sub {
        display: none;
    }

    .modal-tab {
        font-size: 0.8rem;
        padding: 0.55rem 0.7rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .modal-rankings {
        padding: 1rem 1rem 1.5rem;
    }

    /* Go Deeper: stack link + description vertically */
    .go-deeper-list li {
        display: flex;
        flex-direction: column;
    }

    .go-deeper-list span {
        margin-left: 0;
    }

    .go-deeper-list span::before {
        content: none;
    }

    /* Modal footer: tighten separator dots so row fits on one line */
    .csv-sep {
        margin: 0 0.2rem;
    }

    .modal-source {
        font-size: 0.72rem;
    }
}

/* --- Medium Phone --- */
@media (max-width: 480px) {
    .modal-title {
        font-size: var(--text-lg);
    }

    .modal-chart-container {
        height: min(250px, 40vh);
    }

    .county-chart-container {
        height: min(250px, 40vh);
    }

    .go-deeper-inner {
        padding: 1.25rem;
    }

    /* Stack the two card indicators so text stays legible on narrow screens */
    .card-comparisons {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* --- Small Phone --- */
@media (max-width: 380px) {
    .card {
        padding: 1rem;
    }

    .card-hawaii-value {
        font-size: 1.25rem;
    }

    .card-metric {
        font-size: 0.8rem;
    }

    .card-comp {
        padding: 0.3rem 0.15rem;
    }

    .comp-verdict {
        font-size: 0.78rem;
    }

    .comp-detail {
        font-size: 0.72rem;
    }

    .comp-label {
        font-size: 0.72rem;
    }
}

/* --- Loading Skeleton --- */
.card-skeleton {
    pointer-events: none;
}

.skel-line, .skel-block, .skel-half {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skel-short { width: 40%; height: 12px; margin-bottom: 0.6rem; }
.skel-medium { width: 70%; height: 14px; margin-bottom: 0.5rem; }
.skel-large { width: 35%; height: 24px; margin-bottom: 0.5rem; }
.skel-block { width: 100%; height: 56px; margin-bottom: 0.75rem; }
.skel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.skel-half { height: 48px; }

/* Modal chart skeleton */
.modal-chart-skeleton {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Rankings Scroll Hint --- */
.rankings-scroll-hint {
    text-align: center;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    padding: 0.5rem 0;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.rankings-scroll-hint.hidden {
    opacity: 0;
    pointer-events: none;
}

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

/* --- Print --- */
@page { size: landscape; }
@media print {
    body {
        background: white;
        color: black;
        font-size: 11pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .header {
        background: white;
        color: black;
        padding: 0.5rem 0;
        border-bottom: 2px solid #333;
    }

    .header-title {
        font-size: 18pt;
        color: black;
    }

    .header-subtitle {
        display: none;
    }

    .dashboard-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.6rem;
        padding: 0.5rem 0;
    }

    .card {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid #ccc;
        padding: 0.75rem;
        box-shadow: none;
    }

    .card:hover {
        border-color: #ccc;
        box-shadow: none;
    }

    .card-sparkline canvas {
        max-height: 36px;
    }

    .comp-rank,
    .comp-county {
        color: #333;
    }

    .card-comp.positive .comp-verdict {
        color: var(--positive) !important;
    }

    .card-comp.negative .comp-verdict {
        color: var(--negative) !important;
    }

    .top-nav,
    .skip-link,
    .card-skeleton,
    .rankings-scroll-hint,
    .modal-actions,
    .modal-close,
    .modal-tabs,
    .csv-download,
    .csv-sep,
    .go-deeper,
    .bundle-nav,
    .table-toggle-wrap {
        display: none !important;
    }

    /* Expand collapsed how-to-read toggles for print */
    details.modal-how-toggle,
    details.cn-section {
        display: block !important;
    }
    details.modal-how-toggle > * {
        display: block !important;
    }

    .footer {
        border-top: 1px solid #ccc;
        padding: 0.5rem 0;
        font-size: 8pt;
        color: #555;
        background: white;
    }

    /* When modal is open: print only modal content */
    body.modal-open .dashboard-grid,
    body.modal-open .header,
    body.modal-open .go-deeper,
    body.modal-open .footer {
        display: none !important;
    }

    body.modal-open .modal-overlay {
        display: block !important;
        position: static;
        background: none;
        padding: 0;
        opacity: 1;
    }

    body.modal-open .modal {
        max-width: 100%;
        max-height: none;
        overflow: visible;
        border: none;
        box-shadow: none;
    }

    /* When modal is closed: hide modal overlay */
    .modal-overlay {
        display: none !important;
    }

    .modal-chart-container {
        min-height: 380px;
        height: auto;
        padding: 1rem 0 1.5rem;
        overflow: visible;
        page-break-after: always;
    }

    .modal-official {
        background: none;
        border: none;
        border-top: 1px solid var(--border);
        padding: 0.5rem 0;
        margin: 0.5rem 0 0;
    }

    .modal-source {
        position: static;
        border-top: 1px solid var(--border);
        background: var(--card-bg);
    }

    .modal-source a::after {
        content: " (" attr(href) ")";
        font-size: 0.7rem;
        color: var(--text-muted);
    }

    .modal-rankings {
        page-break-before: avoid;
    }

    .rankings-chart-wrap {
        max-height: none;
        height: auto;
        overflow: visible;
        page-break-after: always;
    }

    h2, h3 {
        page-break-after: avoid;
    }
}

/* --- Question of the Day --- */
.qotd-claim {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--text, #222);
    margin: 0;
    max-width: 520px;
}
.qotd-btn {
    min-width: 140px;
    padding: 0.85rem 1.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hawaii-blue, #0D7C8F);
    background: transparent;
    border: 2px solid var(--hawaii-blue, #0D7C8F);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    min-height: 48px;
}
.qotd-btn:hover,
.qotd-btn:focus-visible {
    background: var(--hawaii-blue, #0D7C8F);
    color: #fff;
    outline: none;
}
/* Share button: visually identical to .modal-share-btn so the share affordance reads the same everywhere on the dashboard. .share-btn is the generic alias; .qotd-share-btn is kept for the QOTD-specific markup. */
.qotd-share-btn,
.share-btn {
    height: 36px;
    padding: 0 0.85rem;
    gap: 0.4rem;
    border: 1px solid var(--hawaii-blue, #0D7C8F);
    background: var(--hawaii-blue, #0D7C8F);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.qotd-share-btn svg,
.share-btn svg { stroke: #fff; }
.qotd-share-btn:hover,
.qotd-share-btn:focus-visible,
.share-btn:hover,
.share-btn:focus-visible {
    background: var(--hawaii-blue-dark, #075b6a);
    border-color: var(--hawaii-blue-dark, #075b6a);
    color: #fff;
    outline: none;
}
.qotd-share-btn.copied,
.share-btn.copied {
    background: var(--positive);
    border-color: var(--positive);
    color: #fff;
}
.qotd-verdict {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 999px;
}
.qotd-verdict--correct {
    color: var(--positive, #059669);
    background: var(--positive-bg, #e8f6ef);
}
.qotd-verdict--incorrect {
    color: var(--negative, #C0392B);
    background: var(--negative-bg, #fbecea);
}
.qotd-verdict-glyph {
    font-size: 1.25rem;
    line-height: 1;
}
/* Answer reveal is on its own line (separate from the verdict pill) so the
 * ✓/✗ glyph can't be misread as negating the revealed True/False. */
.qotd-answer-reveal {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text, #222);
    margin: 0.75rem 0 0.35rem;
}
.qotd-answer-reveal strong {
    font-weight: 700;
}
.qotd-answer-text {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text, #222);
    margin: 0;
    max-width: 520px;
}
.qotd-chart {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.qotd-chart-image {
    width: 100%;
    max-width: 540px;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--divider, rgba(0, 0, 0, 0.08));
}
.qotd-chart-canvas-wrap {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 340px;
    margin: 0 auto;
}
.qotd-chart-canvas {
    width: 100% !important;
    height: 100% !important;
}
@media (max-width: 600px) {
    .qotd-chart-canvas-wrap {
        height: 260px;
    }
}
.qotd-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.qotd-link {
    font-size: 0.95rem;
    color: var(--hawaii-blue, #0D7C8F);
    text-decoration: none;
    font-weight: 500;
}
.qotd-link:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .qotd-claim {
        font-size: 1.2rem;
    }
    .qotd-btn {
        width: 100%;
        min-width: 0;
    }
    .qotd-teaser-claim {
        font-size: 1.1rem;
    }
}

/* QOTD homepage teaser: styled as a white card so it pops against the
   gray page background. Negative top margin pulls it up so the card's
   border overlaps the header's bottom border (no gray gap between). */
.qotd-teaser {
    position: relative;
    max-width: 760px;
    margin: -1px auto 1.5rem;
    padding: 1.5rem 1.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    text-align: center;
}
/* Close button: matches .modal-close so the dismiss affordance reads the same across the site. */
.qotd-teaser-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--transition);
    z-index: 1;
}
.qotd-teaser-close:hover,
.qotd-teaser-close:focus-visible {
    background: var(--avg-gray-light);
    outline: none;
}
.qotd-teaser-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}
/* Proof (answered) state matches the old modal layout, rendered inline. */
.qotd-teaser-inner--proof {
    gap: 1rem;
}
.qotd-teaser-inner--proof .qotd-claim {
    font-size: 1.35rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--text, #222);
    margin: 0;
    max-width: 600px;
}
.qotd-teaser-footer {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    font-style: italic;
}
.qotd-teaser-eyebrow {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hawaii-blue, #0D7C8F);
    font-weight: 600;
}
.qotd-teaser-claim {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--text, #222);
    max-width: 600px;
}
.qotd-teaser-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.qotd-btn--inline {
    min-width: 120px;
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
    min-height: 44px;
}
@media (max-width: 600px) {
    .qotd-teaser {
        padding: 1.25rem 1rem;
        margin: 1rem auto 1.25rem;
    }
    .qotd-btn--inline {
        width: 100%;
        min-width: 0;
    }
    .qotd-teaser-buttons {
        flex-direction: column;
        gap: 0.6rem;
    }
}