:root {
    --bg: #f5f6f7;
    --surface: #ffffff;
    --border: #dde1e4;
    --text: #1b1f22;
    --text-muted: #5b6570;
    --accent: #1a5276;
    --accent-2: #c0743b;
    --accent-3: #4b7a51;
    --accent-4: #6b4c8a;
    --grid: #e8ebed;
    --warm: #b3541e;
    --cool: #2c6e9e;
    --neutral: #6b7280;
    --confirmed: #3d7a4f;
    --caution: #b8860b;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0 0.55rem;
}

.site-header__logo {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.site-header__title {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.15;
}

.site-header__title-main {
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.site-header__title-sub {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent);
}

.site-header__auth {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.site-header__auth-name {
    white-space: nowrap;
}

.site-header__logout-form {
    display: inline;
}

.site-header__logout-btn {
    display: inline-block;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 5px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
}

.site-header__logout-btn:hover {
    color: var(--surface);
    background: var(--accent);
}

.site-header__login-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.3rem 0 0.75rem;
}

.tabs__item {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.tabs__item:hover {
    color: var(--text);
    background: var(--grid);
}

.tabs__item--active {
    color: var(--surface);
    background: var(--accent);
}

.tabs__item--active:hover {
    color: var(--surface);
    background: var(--accent);
}

.hydrograph-tabs, .precip-outlook-tabs {
    display: flex;
    gap: 1.25rem;
    border-bottom: 1px solid var(--border, #dde1e4);
    margin: 0.75rem 0 0;
}

.hydrograph-tab, .precip-outlook-tab {
    display: inline-block;
    padding: 0.55rem 0.1rem;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.hydrograph-tab:hover, .precip-outlook-tab:hover {
    color: var(--text);
}

.hydrograph-tab.active, .precip-outlook-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.hydrograph-pane {
    margin-top: 0.75rem;
}

.hydrograph-pane__intro {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
}

.hydrograph-pane__intro p {
    flex: 1;
    margin: 0;
}

.content {
    flex: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem;
    width: 100%;
}

.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.site-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

.site-footer__disclaimer {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.site-footer__copyright {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.panel h1 {
    font-size: 1.3rem;
    margin-top: 0;
}

.panel--with-info {
    position: relative;
}

.panel p {
    color: var(--text-muted);
    line-height: 1.5;
}

.field-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

select {
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text);
    margin-bottom: 0.75rem;
}

.series-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.series-toggles label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
}

.series-toggles input[type="checkbox"] {
    cursor: pointer;
}

.map-region-toggles {
    align-items: center;
}

.map-region-toggles__label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.map-region-toggles__swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
}

.chart {
    width: 100%;
    /* Positioning context for .chart-tooltip, which JS anchors to the
       cursor via container-relative left/top (see charts.js's
       attachTooltip). */
    position: relative;
}

.chart__svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Invisible hit-test surface for the shared hover tooltip (charts.js's
   attachTooltip) -- covers just the plot area (not the axis margins), added
   as the last SVG child so it sits above the line/bar paint underneath it. */
.chart__hover-overlay {
    fill: transparent;
    pointer-events: all;
}

.chart__crosshair {
    stroke: var(--text-muted);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    pointer-events: none;
}

.chart__gridline {
    stroke: var(--grid);
    stroke-width: 1;
}

.chart__zeroline {
    stroke: var(--text-muted);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.chart__axis-label {
    fill: var(--text-muted);
    font-size: 10px;
}

.chart__line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
}

.chart__line--0 {
    stroke: var(--accent);
}

.chart__line--1 {
    stroke: var(--accent-2);
}

.chart__line--2 {
    stroke: var(--accent-3);
}

.chart__line--3 {
    stroke: var(--accent-4);
}

.chart__bar--0 {
    fill: var(--accent);
}

.chart__bar--1 {
    fill: var(--accent-2);
}

.chart__legend {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

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

.chart__legend-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.15rem;
}

.chart__legend-swatch--0 {
    background: var(--accent);
}

.chart__legend-swatch--1 {
    background: var(--accent-2);
}

.chart__legend-swatch--2 {
    background: var(--accent-3);
}

.chart__legend-swatch--3 {
    background: var(--accent-4);
}

.chart__line--dashed {
    stroke-dasharray: 4 3;
}

.chart__legend-swatch--dashed {
    background: repeating-linear-gradient(to right, var(--text-muted) 0 4px, transparent 4px 7px);
}

.chart__legend-swatch--block {
    height: 0.7rem;
    border-radius: 2px;
}

/* Cursor-following hover readout for every SVG chart (charts.js's
   attachTooltip) -- same dark-box look as .map-tooltip, kept as a separate
   class since it's positioned relative to .chart rather than
   .maplibre-map, and its rows carry a small color swatch (chart__legend-
   swatch's own color modifiers) rather than a single value line. */
.chart-tooltip {
    position: absolute;
    z-index: 3;
    background: rgba(27, 31, 34, 0.92);
    color: #fff;
    border-radius: 4px;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.chart-tooltip__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.chart-tooltip__swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.15rem;
    flex: none;
}

.chart-tooltip__label {
    opacity: 0.85;
}

.chart-tooltip__value {
    font-weight: 700;
    margin-left: auto;
    padding-left: 0.6rem;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.status-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1rem 1.25rem;
}

.status-card__info-icon {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 50%;
    cursor: pointer;
}

.status-card__info-icon:hover {
    color: var(--surface);
    background: var(--accent);
}

/* Flows inline next to its paragraph (see .hydrograph-pane__intro) instead
   of overlaying it -- absolute top-right positioning works fine next to a
   short fixed-height heading, but here it would sit at an inconsistent spot
   next to a wrapping paragraph, closer to whichever line it happened to
   land on than a fixed gap. */
.status-card__info-icon--inline {
    position: static;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.status-card__label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-card__value {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0.35rem 0;
}

.status-card__unit {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

.status-card__meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.status-card__trend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.status-card__trend-year {
    color: var(--text-muted);
}

.status-card__trend-item--current {
    color: var(--text);
    font-weight: 600;
}

.status-card__trend-sep {
    color: var(--border);
}

.status-card__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.status-card__info-btn {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
}

.status-card__info-btn:hover {
    color: var(--surface);
    background: var(--accent);
}

dialog.modal {
    width: min(880px, 95vw);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--surface);
    color: var(--text);
}

dialog.modal--narrow {
    width: min(420px, 95vw);
}

dialog.modal::backdrop {
    background: rgba(20, 24, 28, 0.45);
}

.modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.modal__header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.modal__close {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}

.modal__close:hover {
    color: var(--text);
}

.info-modal__intro {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

.info-modal__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.88rem;
    margin: 0 0 1.1rem;
}

.info-modal__facts dt {
    color: var(--text-muted);
    font-weight: 600;
}

.info-modal__facts dd {
    margin: 0;
}

.info-modal__phases {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}

.info-modal__phase {
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
}

.info-modal__phase-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
}

.info-modal__phase-effect {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.info-modal__learn-more {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--surface);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 5px;
    text-decoration: none;
}

.info-modal__learn-more:hover {
    background: var(--text);
    border-color: var(--text);
}

.info-modal__map {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.enso-table-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.enso-table-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.enso-table-legend__item .enso-cell {
    display: inline-block;
    width: 13px;
    height: 13px;
    padding: 0;
    border: 1px solid var(--border);
}

.enso-table-wrap {
    overflow-x: auto;
    margin-bottom: 0.75rem;
}

.enso-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.enso-table th,
.enso-table td {
    border: 1px solid var(--border);
    padding: 0.3rem 0.4rem;
    text-align: center;
}

.enso-table thead th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--bg);
}

.enso-table tbody th {
    color: var(--text-muted);
    font-weight: 600;
    background: var(--bg);
}

.enso-cell--na {
    color: var(--text-muted);
}

.enso-cell--neutral { background: #eceff1; color: var(--text); }
.enso-cell--pos-1 { background: #fde3cf; color: var(--text); }
.enso-cell--pos-2 { background: #f4b483; color: var(--text); }
.enso-cell--pos-3 { background: #e08a4d; color: #fff; }
.enso-cell--pos-4 { background: var(--warm); color: #fff; }
.enso-cell--neg-1 { background: #dcebf6; color: var(--text); }
.enso-cell--neg-2 { background: #aed3ec; color: var(--text); }
.enso-cell--neg-3 { background: #6facd6; color: #fff; }
.enso-cell--neg-4 { background: var(--cool); color: #fff; }

.enso-cell--bom-fill {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.modal__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.modal__pagination button {
    font-family: inherit;
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.modal__pagination button:disabled {
    opacity: 0.4;
    cursor: default;
}

.modal__pagination button:not(:disabled):hover {
    border-color: var(--accent);
    color: var(--accent);
}

.modal__pagination span {
    color: var(--text-muted);
    min-width: 90px;
    text-align: center;
}

.modal-tabs {
    display: flex;
    gap: 1.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
}

.modal-tab {
    display: inline-block;
    padding: 0 0 0.55rem;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.modal-tab:hover {
    color: var(--text);
}

.modal-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.data-table-wrap {
    overflow-x: auto;
    margin-bottom: 0.75rem;
}

table.data-table--compact th,
table.data-table--compact td {
    padding: 0.4rem 0.45rem;
    white-space: nowrap;
}

table.data-table--compact td.outlook-current {
    padding: 0.35rem 0.4rem;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.badge--warm {
    background: var(--warm);
}

.badge--cool {
    background: var(--cool);
}

.badge--neutral {
    background: var(--neutral);
}

.badge--stale {
    background: transparent;
    border: 1px solid var(--warm);
    color: var(--warm);
}

.badge--confirmed {
    background: var(--confirmed);
}

.badge--caution {
    background: transparent;
    border: 1px solid var(--caution);
    color: var(--caution);
}

/* Outlook tab's 3-tier driver-confidence badges (High/Medium/Low), replacing
   the old binary Robust/Nominal badge -- a nominal (not-robust) relationship
   still gets a badge and an advisory, just downgraded and visually weaker. */
.badge--high {
    background: var(--confirmed);
}

.badge--medium {
    background: transparent;
    border: 1px solid var(--caution);
    color: var(--caution);
}

.badge--low {
    background: transparent;
    border: 1px dashed var(--text-muted);
    color: var(--text-muted);
}

.notice {
    font-size: 0.85rem;
    color: var(--warm);
    border: 1px solid var(--warm);
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
}

.source-cite {
    font-style: italic;
    font-weight: 600;
    color: var(--text);
}

.actionable-summary {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.actionable-summary li {
    border-left: 3px solid var(--accent);
    background: var(--bg);
    border-radius: 0 4px 4px 0;
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text);
}

.actionable-summary__meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

table.data-table th,
table.data-table td {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
}

table.data-table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

table.data-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

table.data-table td.outlook-current {
    font-weight: 700;
    background: rgba(26, 82, 118, 0.08);
    border-radius: 3px;
}

.outlook-map-row {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.outlook-map-row .maplibre-map {
    flex: 2 1 480px;
    min-width: 280px;
    height: 560px;
}

.basin-picker-map {
    height: 320px;
}

.basin-picker-detail {
    flex: 1 1 200px;
}

.outlook-detail {
    flex: 1 1 280px;
    min-width: 260px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1rem 1.1rem;
    align-self: stretch;
}

.outlook-detail__placeholder {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.outlook-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.outlook-detail__header h2 {
    font-size: 1.05rem;
    margin: 0;
}

.outlook-detail__sentence {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
}

.outlook-advisory {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.45rem 0.7rem;
    border-radius: 4px;
    margin-bottom: 0.6rem;
}

.outlook-advisory__arrow {
    font-size: 1.1rem;
    line-height: 1;
}

/* Styled by confidence tier, not direction -- the point is to make a weak
   (Low/Medium) signal visually read as weaker than a High-confidence one,
   regardless of which way it points. */
.outlook-advisory--tier-high {
    color: var(--confirmed);
    background: rgba(61, 122, 79, 0.12);
}

.outlook-advisory--tier-medium {
    color: var(--caution);
    background: rgba(184, 134, 11, 0.1);
}

.outlook-advisory--tier-low {
    color: var(--text-muted);
    background: rgba(107, 114, 128, 0.08);
    border: 1px dashed var(--border);
}

.outlook-detail__table {
    margin-top: 0.75rem;
    font-size: 0.8rem;
}

.outlook-detail__caption {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Precipitation outlook click panel (Impacts tab) -- a small card per
   3-month window (observed last 3 / composite-based next 3), each holding
   a one-line narrative plus a compact month-by-month table. */
.precip-card {
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border);
}

.precip-card__title {
    margin: 0 0 0.3rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.precip-card__note {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text);
}

/* table-layout: fixed + explicit per-column widths keep this table from
   ever sizing itself off the "nowrap" content of its widest cell (the
   Confidence badge) -- without it, the table -- and the sidebar around it --
   was growing past the panel's border on narrower content. Cells wrap
   instead of forcing extra width. */
table.precip-table {
    margin: 0;
    table-layout: fixed;
    width: 100%;
}

table.precip-table th,
table.precip-table td {
    white-space: normal;
    overflow-wrap: break-word;
}

.precip-table--3col th:nth-child(1), .precip-table--3col td:nth-child(1) { width: 32%; }
.precip-table--3col th:nth-child(2), .precip-table--3col td:nth-child(2) { width: 28%; }
.precip-table--3col th:nth-child(3), .precip-table--3col td:nth-child(3) { width: 40%; }

.precip-table--4col th:nth-child(1), .precip-table--4col td:nth-child(1) { width: 26%; }
.precip-table--4col th:nth-child(2), .precip-table--4col td:nth-child(2) { width: 22%; }
.precip-table--4col th:nth-child(3), .precip-table--4col td:nth-child(3) { width: 30%; }
.precip-table--4col th:nth-child(4), .precip-table--4col td:nth-child(4) { width: 22%; }

.precip-table--4col .badge {
    padding: 0.1rem 0.4rem;
    font-size: 0.68rem;
}

.precip-table__pct {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Ties table figures back to the map's own BrBG color scale -- brown for a
   dry departure, green for a wet one -- so the numbers and the map read as
   one system rather than two disconnected views. */
.precip-dev--dry {
    color: var(--accent-2);
    font-weight: 600;
}

.precip-dev--wet {
    color: var(--accent-3);
    font-weight: 600;
}

.precip-dev--neutral {
    color: var(--text-muted);
}

/* Temperature outlook click panel (Impacts tab) -- reuses .precip-card/
   .precip-table's structural layout (card/table skeleton), but its own
   color pair: the temperature map's colormap is RdBu_r (red=warm,
   blue=cool), not precip's BrBG (brown=dry, green=wet), so the wet/dry
   classes above would tie the numbers to the wrong scale. */
.temp-dev--cool {
    color: #2980b9;
    font-weight: 600;
}

.temp-dev--warm {
    color: #c0392b;
    font-weight: 600;
}

.temp-dev--neutral {
    color: var(--text-muted);
}

.outlook-now {
    color: var(--accent);
    font-weight: 600;
}

tr.outlook-current-row td {
    font-weight: 700;
    background: rgba(26, 82, 118, 0.08);
}

.maplibre-map {
    position: relative;
    width: 100%;
    height: 520px;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

/* Spinner overlay every map carries from creation (see maplibre_common.js's
   createMap/beginMapLoading/endMapLoading) -- covers the base style/tile
   load for every map, and is held open longer by callers with their own
   extra fetch (the pixel ENSO maps' JSON payload, the SST/atmos maps'
   per-month fetch) so the map never reads as "loaded" while still blank or
   showing a stale month. z-index above the raster/colorbar/tooltip layers
   below but under nothing -- there's nothing above a map's own overlay. */
.map-loader {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 246, 247, 0.6);
}

/* `.map-loader`'s own `display: flex` above (needed to center the spinner)
   otherwise beats the browser's built-in `[hidden] { display: none; }` --
   author rules win over the user-agent stylesheet even at equal
   specificity, so toggling the `hidden` attribute alone would do nothing
   visually. Every other `hidden`-toggled element in this file (.map-tooltip,
   etc.) works without this because none of them set their own `display`. */
.map-loader[hidden] {
    display: none;
}

.map-loader__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(27, 31, 34, 0.15);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: map-loader-spin 0.8s linear infinite;
}

@keyframes map-loader-spin {
    to { transform: rotate(360deg); }
}

/* A gridded raster map (SST / atmos) plus its below-map time-scrubber bar,
   joined into one bordered widget so the pair reads as a single control
   rather than two stacked cards. */
.map-widget {
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.map-widget .maplibre-map {
    height: 600px;
    border: none;
    border-radius: 0;
}

.map-time-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.map-time-bar__nav {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}

.map-time-bar__nav:hover {
    color: var(--text);
    border-color: var(--accent);
}

.map-time-bar__slider {
    flex: 1 1 auto;
    min-width: 0;
}

.map-time-bar__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 0.2rem;
}

.map-time-bar input[type="range"] {
    width: 100%;
    display: block;
}

.map-colorbar,
.map-legend {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* SST/atmos maps dock their colorbar bottom-right instead (matching the
   GloFAS/Copernicus-style reference layout); their attribution control is
   moved to bottom-left in JS (see maplibre_common.js's createMap) so the two
   never overlap. */
.map-widget .map-colorbar {
    left: auto;
    right: 0.75rem;
}

/* Without a cap, .map-colorbar's absolute positioning has no width to wrap
   against, so a long label (e.g. "2m temperature anomaly (°C vs. seasonal
   norm)") renders as one unbroken line and stretches the box wide enough to
   crowd the attribution control docked in the opposite corner -- cap it so
   the label wraps onto its own lines instead. box-sizing is border-box
   site-wide (see top of file), so this has to clear the .map-colorbar__bar/
   __ticks's own 180px width plus this box's padding (0.75rem each side) and
   border (1px each side), or the bar itself would be the thing clipped.
   Scoped to .map-colorbar only (not the shared rule above), since
   .map-legend's confidence-tier swatches lay out in a row and would wrap
   unintentionally under the same cap. */
.map-colorbar {
    max-width: 220px;
}

/* Cursor-following one-line hover readout (precip outlook map) -- absolute
   within the .maplibre-map container (already position: relative), moved by
   JS on every mousemove rather than CSS :hover since it has to track the
   pointer, not a fixed element. pointer-events: none so it never itself
   becomes the thing mouseleave fires on. */
.map-tooltip {
    position: absolute;
    z-index: 3;
    max-width: 260px;
    background: rgba(27, 31, 34, 0.92);
    color: #fff;
    border-radius: 4px;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Compact hover content (precipitation outlook map): a bold, direction-
   colored figure plus a small confidence tag -- a glanceable stat rather
   than a full sentence; the click panel carries the full basis. Colors are
   lightened versions of the click panel's brown/green (.precip-dev--dry/
   --wet) so they read against this tooltip's dark background. */
.map-tooltip__value {
    font-weight: 700;
    font-size: 0.88rem;
}

.map-tooltip__value--dry {
    color: #e0ab6f;
}

.map-tooltip__value--wet {
    color: #8fd0a0;
}

/* Temperature map's tooltip -- lightened versions of .temp-dev--warm/--cool,
   same rationale as the wet/dry pair above (readable against this
   tooltip's dark background). */
.map-tooltip__value--warm {
    color: #e08a72;
}

.map-tooltip__value--cool {
    color: #7fb3d9;
}

.map-tooltip__sep {
    margin: 0 0.35rem;
    opacity: 0.5;
}

.map-tooltip__tier {
    opacity: 0.85;
}

/* Vertical icon stack for switching which gridded variable a map shows,
   docked to the map's top-right corner. */
.map-variable-switcher {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(27, 31, 34, 0.85);
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.map-variable-switcher__item {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.map-variable-switcher__item svg {
    width: 19px;
    height: 19px;
}

.map-variable-switcher__item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.map-variable-switcher__item--active {
    background: var(--accent);
    color: #fff;
}

.map-colorbar__label {
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.map-colorbar__bar {
    width: 180px;
    height: 0.6rem;
    border-radius: 2px;
    border: 1px solid var(--border);
}

.map-colorbar__ticks {
    display: flex;
    justify-content: space-between;
    width: 180px;
    margin-top: 0.15rem;
    font-variant-numeric: tabular-nums;
}

.map-legend {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.map-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.map-legend__swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    opacity: 0.85;
}

.map-controls {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    display: flex;
    gap: 0.4rem;
}

.map-controls__item {
    font-family: inherit;
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-muted);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.map-controls__item:hover {
    color: var(--text);
}

.map-controls__item--active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.map-time-control {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    min-width: 220px;
}

.map-time-control__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    text-align: center;
}

.map-time-control input[type="range"] {
    width: 100%;
}

/* Rendered .md methodology/data-source docs (views.docs_page) -- server-side
   markdown -> HTML, styled here rather than relying on the raw stylesheet the
   source repo's own markdown renderer (e.g. GitHub) would apply. */
.markdown-body {
    line-height: 1.6;
    color: var(--text);
    max-width: 860px;
}

.markdown-body h1 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
}

.markdown-body h2 {
    font-size: 1.15rem;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
}

.markdown-body h3 {
    font-size: 1rem;
    margin: 1.5rem 0 0.5rem;
}

.markdown-body p,
.markdown-body li {
    color: var(--text-muted);
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 1.4rem;
}

.markdown-body li {
    margin-bottom: 0.3rem;
}

.markdown-body a {
    color: var(--accent);
}

.markdown-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.1rem 0.3rem;
}

.markdown-body pre {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    overflow-x: auto;
}

.markdown-body pre code {
    border: none;
    padding: 0;
    background: none;
}

.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 0.75rem 0 1.25rem;
    display: block;
    overflow-x: auto;
}

.markdown-body th,
.markdown-body td {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
}

.markdown-body th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.markdown-body blockquote {
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    border-left: 3px solid var(--border);
    color: var(--text-muted);
}

.markdown-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

/* Advisory tab's risk-level badges -- distinct from badge--high/--medium/--low
   (Outlook tab's driver-confidence tiers) since risk and confidence read in
   opposite directions: badge--high is styled green/"confirmed", which would
   look backwards for "Elevated risk". See views.py's ADVISORY_RISK_BADGE_CLASSES. */
.badge--elevated {
    background: var(--warm);
}

.badge--watch {
    background: transparent;
    border: 1px solid var(--caution);
    color: var(--caution);
}

.badge--advisory-normal {
    background: transparent;
    border: 1px solid var(--confirmed);
    color: var(--confirmed);
}

.country-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.25rem;
}

.country-picker__item {
    padding: 0.4rem 0.9rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
}

.country-picker__item:hover {
    color: var(--text);
}

.country-picker__item.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

.advisory-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.advisory-meta__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.advisory-export-btn {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border-radius: 4px;
    padding: 0.35rem 0.8rem;
    text-decoration: none;
    white-space: nowrap;
}

.advisory-export-btn:hover {
    opacity: 0.9;
}

.advisory-feedback-btn {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 0.35rem 0.8rem;
    white-space: nowrap;
    cursor: pointer;
}

.advisory-feedback-btn:hover {
    color: #fff;
    background: var(--accent);
}

.feedback-form {
    display: flex;
    flex-direction: column;
    margin-top: 0.75rem;
}

.feedback-form__sector,
.feedback-form__message {
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text);
    margin-bottom: 0.85rem;
}

.feedback-form__message {
    resize: vertical;
}

.feedback-form__sector:focus,
.feedback-form__message:focus {
    outline: none;
    border-color: var(--accent);
}

.feedback-form__status {
    min-height: 1.1rem;
    margin: -0.35rem 0 0.6rem;
    font-size: 0.82rem;
    color: var(--confirmed);
}

.feedback-form__status--error {
    color: var(--warm);
}

.advisory-sector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.advisory-sector-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1rem 1.1rem;
}

.advisory-sector-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.advisory-sector-card__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.advisory-sector-card__headline {
    margin: 0 0 0.4rem;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
}

/* Small "jump to source section" link -- next to a sector headline or the
   country's analogue badge. Same circular-badge visual language as
   .status-card__info-icon (which opens a modal); this one navigates to the
   exact report section a piece of advisory was drawn from instead. */
.advisory-source-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 0.15rem;
    border: 1px solid var(--accent);
    border-radius: 50%;
    color: var(--accent);
    font-size: 0.7rem;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
}

.advisory-source-link:hover {
    color: #fff;
    background: var(--accent);
}

.advisory-sector-card__reason {
    margin: 0 0 0.7rem;
}

.advisory-sector-card__reason-toggle {
    display: inline-block;
    cursor: pointer;
    list-style: none;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 0.12rem 0.5rem;
}

.advisory-sector-card__reason-toggle::-webkit-details-marker {
    display: none;
}

.advisory-sector-card__reason-toggle:hover {
    color: #fff;
    background: var(--accent);
}

.advisory-sector-card__reason[open] .advisory-sector-card__reason-toggle {
    margin-bottom: 0.5rem;
}

.advisory-sector-card__rationale {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.advisory-sector-card__suggestions-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.35rem;
}

.advisory-sector-card__actions {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.advisory-sector-card__actions li {
    margin-bottom: 0.3rem;
}

.advisory-sector-card__actions li:last-child {
    margin-bottom: 0;
}

/* Auth: login, "complete your account", and any other plain form panel. */
.auth-panel {
    max-width: 420px;
    margin: 2rem auto;
}

.auth-form {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text);
    margin-bottom: 0.85rem;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--accent);
}

.field-error {
    font-size: 0.8rem;
    color: var(--warm);
    margin: -0.6rem 0 0.85rem;
}

.password-requirements {
    list-style: none;
    margin: -0.35rem 0 0.85rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.password-requirements__item {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.password-requirements__item::before {
    content: "\2022";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.password-requirements__item--ok {
    color: var(--confirmed);
}

.password-requirements__item--ok::before {
    content: "\2713";
    color: #fff;
    background: var(--confirmed);
}

.password-requirements__item--bad {
    color: var(--warm);
}

.password-requirements__item--bad::before {
    content: "\2715";
    color: #fff;
    background: var(--warm);
}

.btn-primary {
    align-self: flex-start;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1.2rem;
    cursor: pointer;
    margin-top: 0.25rem;
}

.btn-primary:hover {
    opacity: 0.9;
}

.advisory-chat-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3.1rem;
    height: 3.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(20, 24, 28, 0.25);
    cursor: pointer;
    z-index: 20;
}

.advisory-chat-fab:hover {
    opacity: 0.92;
}

.advisory-chat-fab svg {
    width: 1.5rem;
    height: 1.5rem;
}