/*
 * Water Supply Report Card (/Conservation/ReportCard), on the design system (css/design-system.css,
 * docs/design-system.md): every color, size and gap below is a --wb-* token, Open Sans throughout, river blue
 * for every action and the system's own focus ring. The "Ledger" layout: one ruled table of indicators, the
 * overall grade beside the summary, the past year of grades as a chart, and reservoir levels sized by capacity.
 * Class names are namespaced "wsrc". Everything renders without JavaScript; the page script adds the enlarged
 * view of each indicator chart and shows a grade's score at once on hover, focus or click.
 *
 * The page's own tokens are the data colors the system has no role for: the five letter grades, drawn from the
 * district's meaning colors (A green, C sandstone, F mahogany, with B and D as steps between them that clear 4.5:1
 * on white), and the seven reservoir colors, water-family blues and teals plus the brand purple, each at least 3:1
 * against the empty track. Color is never the only signal: the letter and status text sit beside every grade, and
 * every reservoir block carries its name in the legend and on its own gauge.
 */

.wsrc {
    --wsrc-grade-a: var(--wb-garden-green-ink);
    --wsrc-grade-b: #3F7F2E;
    --wsrc-grade-c: var(--wb-sandstone-ink);
    --wsrc-grade-d: #B04A1A;
    --wsrc-grade-f: var(--wb-mahogany);
    --wsrc-grade-unknown: var(--wb-color-text-muted);
    --wsrc-band-a: var(--wb-surface-moss);
    --wsrc-band-b: #F1F6F1;
    --wsrc-band-c: var(--wb-surface-sand);
    --wsrc-band-d: #FBEFE6;
    --wsrc-band-f: var(--wb-surface-rose);
    --wsrc-track: var(--wb-color-surface-tint);
    --wsrc-compare: var(--wb-district-purple);
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-5);
}

/* The Section component spaces itself; the flex gap above handles everything else. */
.wsrc > .wb-section {
    margin-top: var(--wb-space-5);
}

/* Rules on a p or h3 are written as .wsrc .wsrc__x: the system's .wb-page p and .wb-page h3 margins outrank a
   single class, and the card's text sits in its own grids and flex rows that space it. */

/* ---------- Overview: season and summary on the left, the overall grade on the right ---------- */

.wsrc__overview {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wb-space-5) var(--wb-space-7);
}

.wsrc__title {
    flex: 1 1 320px;
    min-width: 0;
    max-width: var(--wb-measure);
}

.wsrc .wsrc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-space-1) var(--wb-space-3);
    margin: 0 0 var(--wb-space-2);
    font-size: var(--wb-text-sm);
    color: var(--wb-color-text-muted);
}

.wsrc__season {
    font-weight: 700;
    color: var(--wb-color-text-strong);
}

.wsrc .wsrc__summary {
    margin: 0;
}

/* A plain card: the grade's color is its left edge, with the letter and the status in words beside it. */
.wsrc__overall {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    column-gap: var(--wb-space-4);
    align-items: center;
    padding: var(--wb-space-4) var(--wb-space-5);
    border: 1px solid var(--wb-color-line);
    border-left: 6px solid var(--wsrc-grade-unknown);
    border-radius: var(--wb-radius-md);
    background: var(--wb-color-surface);
}

.wsrc .wsrc__overall-label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: var(--wb-tracking-label);
    text-transform: uppercase;
    color: var(--wb-color-text-muted);
}

.wsrc .wsrc__overall-status {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-weight: 600;
    color: var(--wb-color-text-strong);
}

.wsrc .wsrc__overall-grade {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    font-size: var(--wb-text-5xl);
    font-weight: 700;
    line-height: 1;
    color: var(--wb-color-heading);
    font-variant-numeric: tabular-nums;
}

.wsrc .wsrc__overall-compare {
    grid-column: 1 / span 2;
    grid-row: 3;
    margin: var(--wb-space-2) 0 0;
    font-size: var(--wb-text-sm);
    color: var(--wb-color-text-muted);
}

.wsrc__overall-compare-grade {
    font-weight: 700;
    color: var(--wb-color-text-strong);
}

.wsrc__overall--a { border-left-color: var(--wsrc-grade-a); }
.wsrc__overall--b { border-left-color: var(--wsrc-grade-b); }
.wsrc__overall--c { border-left-color: var(--wsrc-grade-c); }
.wsrc__overall--d { border-left-color: var(--wsrc-grade-d); }
.wsrc__overall--f { border-left-color: var(--wsrc-grade-f); }

.wsrc__overall--a .wsrc__overall-grade,
.wsrc__overall-compare-grade--a,
.wsrc__row-grade--a,
.wsrc__mini-grade--a { color: var(--wsrc-grade-a); }

.wsrc__overall--b .wsrc__overall-grade,
.wsrc__overall-compare-grade--b,
.wsrc__row-grade--b,
.wsrc__mini-grade--b { color: var(--wsrc-grade-b); }

.wsrc__overall--c .wsrc__overall-grade,
.wsrc__overall-compare-grade--c,
.wsrc__row-grade--c,
.wsrc__mini-grade--c { color: var(--wsrc-grade-c); }

.wsrc__overall--d .wsrc__overall-grade,
.wsrc__overall-compare-grade--d,
.wsrc__row-grade--d,
.wsrc__mini-grade--d { color: var(--wsrc-grade-d); }

.wsrc__overall--f .wsrc__overall-grade,
.wsrc__overall-compare-grade--f,
.wsrc__row-grade--f,
.wsrc__mini-grade--f { color: var(--wsrc-grade-f); }

/* Grades carry the numeric score in a hover title. The dotted rule and help cursor are the hint; the element is
   focusable so keyboard users reach the title too, and the system's [tabindex]:focus-visible ring marks it. */
.wsrc [title].wsrc__overall-grade,
.wsrc [title].wsrc__row-grade,
.wsrc [title].wsrc__mini-grade,
.wsrc .wsrc__has-score {
    cursor: help;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: var(--wb-color-control-edge);
}

/* With the script running the title moves to data-wsrc-score and a pointer says the grade can be clicked. */
.wsrc .wsrc__has-score {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* The score bubble. Fixed rather than absolute so the ledger's scrolling wrapper never clips it. */
.wsrc__score-tip {
    position: fixed;
    z-index: 1000;
    max-width: 280px;
    padding: var(--wb-space-2) var(--wb-space-3);
    border-radius: var(--wb-radius-sm);
    background: var(--wb-navy);
    color: var(--wb-color-on-dark-strong);
    font-size: var(--wb-text-sm);
    font-weight: 400;
    line-height: var(--wb-leading-snug);
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    box-shadow: var(--wb-shadow-float);
}

.wsrc__score-tip[hidden] {
    display: none;
}

/* ---------- Notes ---------- */

/* The card's flex gap spaces the notes; their own margins would double it. */
.wsrc > .wb-note {
    margin: 0;
}

/* ---------- Date chooser ---------- */

.wsrc__picker {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--wb-space-3) var(--wb-space-4);
    padding: var(--wb-space-5);
    border-radius: var(--wb-radius-md);
    background: var(--wb-color-surface-tint);
}

.wsrc__picker-field {
    flex: 0 1 320px;
    min-width: 0;
}

/* The caption of a static field (.wb-field__label), on a tint, so ink rather than ink-soft. */
.wsrc .wsrc__picker-label {
    display: block;
    margin: 0 0 var(--wb-space-2);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--wb-ink);
}

.wsrc__picker-input {
    max-width: 320px;
}

/* iOS Safari gives a native date input a minimum width from its own date text and ignores width: 100% below it, so
   on a phone the box ran past the tint. Dropping the native appearance lets it take the field's width; the value
   stays left-aligned like the other inputs instead of centred. */
input[type="date"].wsrc__picker-input {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
}

input[type="date"].wsrc__picker-input::-webkit-date-and-time-value {
    text-align: left;
}

.wsrc__picker-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wb-space-3);
}

.wsrc .wsrc__picker-range {
    flex-basis: 100%;
    margin: 0;
    color: var(--wb-ink-soft);
}

@media (max-width: 479px) {
    .wsrc__picker-field,
    .wsrc__picker-actions {
        flex-basis: 100%;
    }

    .wsrc__picker-input {
        max-width: none;
    }

    /* Full-width buttons, one above the other, are easier to hit with a thumb. */
    .wsrc__picker-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wsrc__picker-actions > .wb-btn {
        width: 100%;
    }
}

/* On a phone the grade card spans the column, like the panel under it. */
@media (max-width: 767px) {
    .wsrc__overall {
        flex-basis: 100%;
    }
}

/* ---------- The ledger ---------- */

.wsrc__ledger-wrap {
    margin: 0;
}

.wsrc .wsrc__row-label {
    margin: 0;
    font-weight: 700;
    color: var(--wb-color-text-strong);
}

.wsrc .wsrc__row-source {
    margin: var(--wb-space-1) 0 0;
    font-weight: 400;
}

.wsrc__row-source .fa {
    margin-right: var(--wb-space-1);
    font-size: 0.85em;
}

.wsrc__row-grade {
    font-size: var(--wb-text-2xl);
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wsrc__row-grade--unknown,
.wsrc__row--unavailable .wsrc__row-grade {
    font-size: var(--wb-text-sm);
    font-weight: 600;
    line-height: var(--wb-leading-snug);
    color: var(--wsrc-grade-unknown);
    white-space: normal;
}

.wsrc__row-status {
    font-weight: 600;
    color: var(--wb-color-text-strong);
}

.wsrc__row-measure,
.wsrc__row-record {
    color: var(--wb-color-text-muted);
}

.wsrc__row-weight {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* "23 years (2003–2025)" should never break inside the year range. */
.wsrc__row-record {
    white-space: nowrap;
}

.wsrc__row--unavailable td {
    background: var(--wb-color-surface-tint);
}

/* Per-indicator explainer. A native disclosure, so it needs no JavaScript and stays keyboard accessible. */
.wsrc__row-help {
    margin-top: var(--wb-space-2);
}

.wsrc__row-help > summary {
    cursor: pointer;
    font-size: var(--wb-text-sm);
    font-weight: 600;
    color: var(--wb-color-link);
    list-style: none;
}

.wsrc__row-help > summary::-webkit-details-marker {
    display: none;
}

.wsrc__row-help > summary:hover {
    color: var(--wb-color-link-hover);
    text-decoration: underline;
}

.wsrc__row-help > summary .fa {
    margin-right: var(--wb-space-1);
}

.wsrc .wsrc__row-help p {
    margin: var(--wb-space-2) 0 0;
    max-width: 44ch;
    font-size: var(--wb-text-sm);
    font-weight: 400;
    line-height: 1.55;
    color: var(--wb-color-text);
}

/* ---------- Comparison with an earlier year ---------- */

/* The chosen year's column is set apart with a faint fill so it reads as a different card, not another
   measurement of this one. */
.wsrc__ledger .wsrc__compare-col {
    background: var(--wb-color-surface-tint);
    border-left: 1px solid var(--wb-color-line);
}

.wsrc__row-compare .wsrc__row-grade {
    font-size: var(--wb-text-xl);
}

/* On its own line under the letter, so a long status doesn't wrap around it. */
.wsrc__row-compare-status {
    display: block;
    margin-top: var(--wb-space-1);
    font-weight: 600;
    color: var(--wb-color-text-strong);
    white-space: normal;
}

/* Under 768px the six columns cannot fit, so each row stacks into a labelled block. */
@media (max-width: 767px) {
    .wsrc__ledger thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .wsrc__ledger,
    .wsrc__ledger tbody,
    .wsrc__ledger tr,
    .wsrc__ledger th[scope="row"],
    .wsrc__ledger td {
        display: block;
    }

    .wsrc__ledger tr {
        padding: var(--wb-space-3) var(--wb-space-4);
        border-bottom: 1px solid var(--wb-color-line);
    }

    .wsrc__ledger tbody tr:last-child {
        border-bottom: 0;
    }

    .wsrc__ledger th[scope="row"],
    .wsrc__ledger td {
        padding: var(--wb-space-1) 0;
        border-bottom: 0;
        white-space: normal;
    }

    .wsrc__ledger td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: var(--wb-tracking-label);
        text-transform: uppercase;
        color: var(--wb-color-text-muted);
    }

    .wsrc__row--unavailable td {
        background: transparent;
    }

    /* Stacked, the comparison becomes its own labelled panel inside the row. */
    .wsrc__ledger .wsrc__compare-col {
        margin: var(--wb-space-1) 0;
        padding: var(--wb-space-2) var(--wb-space-3);
        border-left: 0;
        border-radius: var(--wb-radius-sm);
    }
}

/* ---------- Report card history ---------- */

.wsrc .wsrc__section-intro {
    margin: 0 0 var(--wb-space-4);
    max-width: var(--wb-measure);
}

.wsrc__chart {
    padding: var(--wb-space-2) var(--wb-space-3);
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-md);
    background: var(--wb-color-surface);
    overflow-x: auto;
}

.wsrc__chart-svg {
    display: block;
    width: 100%;
    height: auto;
    /* The chart keeps its aspect ratio, so on a narrow screen it would shrink until the band letters and month
       labels were unreadable. Below this width it scrolls instead. */
    min-width: 640px;
}

/* Grade bands use the real, uneven cutoffs from the grade ladder. */
.wsrc__band--a { fill: var(--wsrc-band-a); }
.wsrc__band--b { fill: var(--wsrc-band-b); }
.wsrc__band--c { fill: var(--wsrc-band-c); }
.wsrc__band--d { fill: var(--wsrc-band-d); }
.wsrc__band--f { fill: var(--wsrc-band-f); }

.wsrc__band-label {
    font-size: 14px;
    font-weight: 700;
    fill: var(--wb-color-text-muted);
}

.wsrc__season-rule {
    stroke: var(--wb-color-line);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

/* A perfectly ordinary year scores 50; the dashed rule shows where that sits. */
.wsrc__normal-rule {
    stroke: var(--wb-color-text-muted);
    stroke-width: 1;
    stroke-dasharray: 6 4;
}

.wsrc__normal-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--wb-tracking-label);
    text-transform: uppercase;
    fill: var(--wb-color-text-muted);
}

.wsrc__chart-line {
    fill: none;
    stroke: var(--wb-river);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.wsrc__chart-endpoint {
    fill: var(--wb-river);
    stroke: var(--wb-color-surface);
    stroke-width: 2;
}

/* The date the visitor chose, when it is not the latest one: a navy ring, so it is neither the line nor the
   comparison. */
.wsrc__chart-highlight-rule {
    stroke: var(--wb-navy);
    stroke-width: 1.5;
}

.wsrc__chart-highlight {
    fill: var(--wb-color-surface);
    stroke: var(--wb-navy);
    stroke-width: 3;
}

/* The comparison year: dots rather than dashes, so it never reads as the "normal" rule, in the brand purple no
   grade or band uses. */
.wsrc__chart-compare-line {
    fill: none;
    stroke: var(--wsrc-compare);
    stroke-width: 3;
    stroke-dasharray: 0.1 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wsrc__chart-compare-mark {
    fill: var(--wb-color-surface);
    stroke: var(--wsrc-compare);
    stroke-width: 2.5;
}

.wsrc .wsrc__chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-space-1) var(--wb-space-5);
    margin: 0 0 var(--wb-space-2);
    font-size: var(--wb-text-sm);
    color: var(--wb-color-text-muted);
}

.wsrc__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-space-2);
}

.wsrc__legend-swatch {
    display: inline-block;
    width: 26px;
    height: 0;
    border-top: 3px solid var(--wb-river);
}

.wsrc__legend-swatch--compare {
    border-top: 3px dotted var(--wsrc-compare);
}

.wsrc__chart-tick {
    font-size: 12px;
    fill: var(--wb-color-text-muted);
}

/* Small multiples: one compact chart per indicator, same bands and same time span. Two to a row at most, even on
   wide screens: three made each chart too small to read. */
.wsrc .wsrc__history-subheading {
    margin: var(--wb-space-5) 0 var(--wb-space-3);
}

.wsrc__mini-charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wb-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .wsrc__mini-charts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--wb-space-4) var(--wb-space-5);
    }
}

.wsrc__mini {
    min-width: 0;
}

.wsrc__mini-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wb-space-3);
    margin-bottom: var(--wb-space-1);
}

.wsrc__mini-label {
    flex: 1 1 auto;
    font-weight: 700;
    color: var(--wb-color-text-strong);
}

.wsrc__mini-grade {
    font-size: var(--wb-text-xl);
    font-weight: 700;
    white-space: nowrap;
}

/* The enlarge button: a quiet, 44px square target in the system's shape. */
.wsrc__mini-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-sm);
    background: var(--wb-color-surface);
    color: var(--wb-color-link);
    cursor: pointer;
    transition: border-color 0.15s var(--wb-ease), background-color 0.15s var(--wb-ease);
}

.wsrc__mini-open[hidden] {
    display: none;
}

.wsrc__mini-open:hover {
    border-color: var(--wb-color-primary);
    background: var(--wb-color-surface-tint);
    color: var(--wb-color-link-hover);
}

.wsrc__mini-chart {
    padding: var(--wb-space-2);
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-md);
    background: var(--wb-color-surface);
    overflow: hidden;
}

.wsrc__mini-chart--openable {
    cursor: zoom-in;
}

/* The compact charts have no month labels, so they stay readable when narrow and do not need the full chart's
   minimum width. */
.wsrc__mini-chart .wsrc__chart-svg {
    min-width: 0;
}

.wsrc__mini-chart .wsrc__chart-line {
    stroke-width: 3.5;
}

/* The compact charts draw at under half size, so the dots grow to stay visible. */
.wsrc__mini-chart .wsrc__chart-compare-line {
    stroke-width: 5;
    stroke-dasharray: 0.1 10;
}

/* Enlarged indicator chart: the system's dialog, widened for the chart. */
.wb-dialog.wsrc__dialog {
    max-width: 960px;
}

.wsrc__dialog .modal-title {
    font-size: var(--wb-text-xl);
    font-weight: 700;
    line-height: 1.3;
    color: var(--wb-color-heading);
}

.wsrc .wsrc__dialog-note {
    margin: var(--wb-space-2) 0 0;
    font-size: var(--wb-text-sm);
    color: var(--wb-color-text-muted);
}

/* Best, lowest and a year ago: a facts list, each value under its label, the pairs side by side from 480px. */
.wsrc__history-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wb-space-1) 0;
    margin: var(--wb-space-5) 0 0;
}

.wsrc__history-facts dt {
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: var(--wb-tracking-label);
    text-transform: uppercase;
    color: var(--wb-color-text-muted);
}

.wsrc__history-facts dd {
    margin: 0 0 var(--wb-space-3);
    font-size: var(--wb-text-lg);
    font-weight: 700;
}

@media (min-width: 480px) {
    .wsrc__history-facts {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: max-content;
        grid-template-rows: auto auto;
        gap: 2px var(--wb-space-6);
    }

    .wsrc__history-facts dt {
        grid-row: 1;
    }

    .wsrc__history-facts dd {
        grid-row: 2;
        margin: 0;
    }
}

/* ---------- Reservoir levels ---------- */

/* Whole-basin bar: water stacks from the left, one block per reservoir, empty capacity on the right, so a third
   of Willard Bay and a third of Causey never look alike. */
.wsrc__basin {
    margin: 0 0 var(--wb-space-5);
}

.wsrc__basin-bar {
    display: flex;
    position: relative;
    height: 34px;
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-sm);
    overflow: hidden;
    background: var(--wsrc-track);
}

/* One color per upper reservoir, in list order, shared by its basin block, legend swatch and gauge. The system's
   navy, river, Weber Basin Blue and District Purple, with three water teals and a sky-leaning blue between them so
   neighbors differ in hue as well as lightness; every one keeps at least 3:1 against the empty track. */
.wsrc__res--1 { --wsrc-res: var(--wb-navy); }
.wsrc__res--2 { --wsrc-res: var(--wb-river); }
.wsrc__res--3 { --wsrc-res: #0E6F7E; }
.wsrc__res--4 { --wsrc-res: var(--wb-basin-blue); }
.wsrc__res--5 { --wsrc-res: #138A91; }
.wsrc__res--6 { --wsrc-res: #4B8FC8; }
.wsrc__res--7 { --wsrc-res: var(--wb-district-purple); }

.wsrc__basin-block--separate,
.wsrc__basin-legend--separate,
.wsrc__reservoir--separate {
    --wsrc-res: var(--wb-slate-ink);
}

.wsrc__basin-block {
    box-sizing: border-box;
    height: 100%;
    min-width: 0;
    border-right: 2px solid var(--wb-color-surface);
    background: var(--wsrc-res, var(--wb-river));
}

.wsrc__basin-block--empty {
    border-right: 0;
    background: transparent;
}

.wsrc__basin-typical {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--wb-ink);
}

.wsrc__basin-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-space-1) var(--wb-space-4);
    margin: var(--wb-space-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--wb-text-sm);
    color: var(--wb-color-text-muted);
}

.wsrc__basin-legend li::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: var(--wb-space-2);
    vertical-align: -1px;
    border-radius: 2px;
    background: var(--wsrc-res, var(--wb-river));
}

.wsrc__basin-legend li.wsrc__basin-legend--empty::before {
    box-sizing: border-box;
    border: 1px solid var(--wb-color-line);
    background: var(--wsrc-track);
}

.wsrc__basin-legend li.wsrc__basin-legend--typical::before {
    width: 2px;
    border-radius: 0;
    background: var(--wb-ink);
}

/* A key line with no swatch, such as what the tile sizes mean. */
.wsrc__basin-legend li.wsrc__basin-legend--unit::before {
    display: none;
}

/* Bar | Tiles tabs over the whole-basin view, in the system's tab row look (.wb-tabs) but as buttons, since both
   views are on the page. Hidden until the script sets them up. */
.wsrc__basin-tabs {
    display: flex;
    gap: 0 var(--wb-space-1);
    margin-bottom: var(--wb-space-4);
    border-bottom: 1px solid var(--wb-color-line);
}

.wsrc__basin-tabs[hidden] {
    display: none;
}

.wsrc__basin-tabs button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--wb-space-3);
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    font-family: var(--wb-font);
    font-size: var(--wb-text-sm);
    font-weight: 600;
    color: var(--wb-navy);
    cursor: pointer;
    transition: border-color 0.15s var(--wb-ease), background-color 0.15s var(--wb-ease);
}

.wsrc__basin-tabs button:hover {
    background: var(--wb-mist);
    border-bottom-color: var(--wb-mist-deep);
}

.wsrc__basin-tabs button[aria-selected="true"] {
    border-bottom-color: var(--wb-river);
    color: var(--wb-river);
}

/* Without the script both panels show, stacked; with it only one shows, right under the tabs. */
.wsrc__basin-panel + .wsrc__basin-panel {
    margin-top: var(--wb-space-4);
}

.wsrc__basin-panel[hidden] {
    display: none;
}

/* Tiles: one per reservoir, area by capacity, water filling it from the bottom. The map keeps its proportions so
   areas stay true; a wide map on desktops, a square one on phones. */
.wsrc__tiles {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 2;
    border-radius: var(--wb-radius-sm);
    overflow: hidden;
    background: var(--wb-color-surface);
}

.wsrc__tiles--narrow {
    display: none;
    aspect-ratio: 1 / 1;
}

@media (max-width: 599px) {
    .wsrc__tiles--wide {
        display: none;
    }

    .wsrc__tiles--narrow {
        display: block;
    }
}

/* Each tile is a container: white where it is empty, water where it is not. Water is river blue, turning
   sandstone below usual and mahogany well below, so the low reservoirs stand out; the label, not the color, names
   the reservoir. */
.wsrc__tile {
    --wsrc-water: var(--wb-river);
    position: absolute;
    box-sizing: border-box;
    border: 3px solid var(--wb-color-surface);
    overflow: hidden;
}

.wsrc__tile--below,
.wsrc__basin-legend li.wsrc__basin-legend--below {
    --wsrc-water: var(--wb-sandstone-ink);
}

.wsrc__tile--well-below,
.wsrc__basin-legend li.wsrc__basin-legend--well-below {
    --wsrc-water: var(--wb-mahogany);
}

.wsrc__tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--wsrc-water);
    background: var(--wb-color-surface);
}

.wsrc__tile-water {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--wsrc-water);
}

.wsrc__basin-legend li.wsrc__basin-legend--near::before,
.wsrc__basin-legend li.wsrc__basin-legend--below::before,
.wsrc__basin-legend li.wsrc__basin-legend--well-below::before {
    background: var(--wsrc-water, var(--wb-river));
}

.wsrc__tile-label {
    position: absolute;
    top: var(--wb-space-1);
    left: var(--wb-space-1);
    box-sizing: border-box;
    max-width: calc(100% - var(--wb-space-2));
    padding: 1px var(--wb-space-2);
    border-radius: var(--wb-radius-sm);
    background: rgba(255, 255, 255, 0.9);
    font-size: var(--wb-text-sm);
    line-height: 1.35;
    color: var(--wb-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wsrc__tile-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wsrc__tile-percent {
    font-weight: 700;
}

/* The usual level for the date: a dashed line across the tile, quieter than the water so it reads as a reference
   rather than a second waterline. Drawn over the water. */
.wsrc__tile-usual {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    margin-bottom: -1px;
    border-top: 2px dashed var(--wb-slate-ink);
}

.wsrc__basin-legend li.wsrc__basin-legend--usual::before {
    width: 16px;
    height: 0;
    border-radius: 0;
    vertical-align: 3px;
    border-top: 2px dashed var(--wb-slate-ink);
    background: transparent;
}

/* Small tiles: name and percentage on one line, the name cut short so the percentage always shows. */
.wsrc__tile--compact .wsrc__tile-label {
    display: flex;
    gap: 3px;
}

.wsrc__tile--compact .wsrc__tile-name {
    flex: 0 1 auto;
    min-width: 0;
}

.wsrc__tile--compact .wsrc__tile-percent {
    flex: 0 0 auto;
}

.wsrc__tile--narrow .wsrc__tile-label,
.wsrc__tile--compact .wsrc__tile-label {
    top: 2px;
    left: 2px;
    max-width: calc(100% - 4px);
    padding: 0 3px;
}

.wsrc__tile--narrow .wsrc__tile-full,
.wsrc__tile--compact .wsrc__tile-full,
.wsrc__tile--tiny .wsrc__tile-label {
    display: none;
}

.wsrc .wsrc__basin-summary {
    margin: var(--wb-space-3) 0 0;
    font-weight: 600;
    color: var(--wb-color-text-strong);
}

/* One reservoir per row on phones, two from 768px. */
.wsrc__reservoir-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--wb-space-6);
    margin: 0 0 var(--wb-space-4);
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .wsrc__reservoir-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.wsrc__reservoir {
    min-width: 0;
    padding: var(--wb-space-3) 0;
    border-bottom: 1px solid var(--wb-color-line);
}

.wsrc__reservoir-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wb-space-3);
    margin-bottom: var(--wb-space-2);
}

.wsrc__reservoir-name {
    font-weight: 700;
    color: var(--wb-color-text-strong);
}

.wsrc__reservoir-percent {
    font-weight: 700;
    color: var(--wb-color-heading);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Gauge: the fill is the level on the report date, the marker is the usual level for that date. Bar width is
   scaled to capacity so bigger reservoirs get longer bars. */
.wsrc__gauge {
    position: relative;
    height: 14px;
    min-width: 28%;
    border: 1px solid var(--wb-color-line);
    border-radius: var(--wb-radius-sm);
    overflow: hidden;
    background: var(--wsrc-track);
}

.wsrc__gauge-fill {
    height: 100%;
    background: var(--wsrc-res, var(--wb-river));
}

.wsrc__reservoir-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: var(--wb-space-2);
    vertical-align: -1px;
    border-radius: 2px;
    background: var(--wsrc-res, var(--wb-river));
}

.wsrc__gauge-typical {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--wb-ink);
}

.wsrc .wsrc__reservoir-detail,
.wsrc .wsrc__reservoir-compare {
    margin: var(--wb-space-2) 0 0;
    font-size: var(--wb-text-sm);
    color: var(--wb-color-text-muted);
}

.wsrc .wsrc__reservoir-compare {
    margin-top: 2px;
}

.wsrc .wsrc__reservoir-key {
    margin: 0;
    max-width: var(--wb-measure);
    color: var(--wb-color-text-muted);
}

/* ---------- Explainer ---------- */

/* Seasonal weights: indicators down the side, seasons across, the report date's season shaded and labelled
   "(now)" so the shading is never the only cue. */
.wsrc__weights caption {
    caption-side: top;
    padding: var(--wb-space-3) var(--wb-space-4);
    text-align: left;
    font-weight: 700;
    color: var(--wb-color-text-strong);
}

.wsrc__weights th,
.wsrc__weights td {
    vertical-align: bottom;
}

.wsrc__weights-months {
    display: block;
    font-weight: 400;
    color: var(--wb-color-text-muted);
}

.wsrc__weights .wsrc__weights-current {
    background: var(--wb-sky-soft);
    font-weight: 700;
    color: var(--wb-ink);
}

.wsrc__weights-why {
    max-width: var(--wb-measure);
    margin: 0 0 var(--wb-space-4);
    padding-left: var(--wb-space-5);
}

.wsrc__weights-why li {
    margin-bottom: var(--wb-space-2);
}

.wsrc .wsrc__sources {
    margin: 0;
    color: var(--wb-color-text-muted);
}

@media print {
    .wsrc__picker {
        display: none;
    }
}