/*
 * Water Supply Report Card
 * Site-owned styles for the WaterSupplyReportCard user control, in the "Ledger" layout:
 * one ruled table of indicators, the overall grade beside the title, the past year of
 * grades as a chart, and reservoir levels sized by capacity.
 * Class names are namespaced with "wsrc" so the control can be dropped on any page
 * without colliding with page or Bootstrap styles. Everything renders without JavaScript;
 * the control's small scripts add the enlarged view of each indicator chart and show a grade's
 * score at once on hover, focus or click.
 */

.wsrc {
    --wsrc-brand: #1857A5;
    --wsrc-ink: #1b1b1b;
    --wsrc-muted: #5a5a5a;
    --wsrc-surface: #ffffff;
    --wsrc-border: #d8dee6;
    --wsrc-rule: #1b1b1b;
    --wsrc-a: #1f7a4d;
    /* B and C were #4f9a3a and #b8860b, which read below the 4.5:1 contrast text needs on white. */
    --wsrc-b: #3f7f2e;
    --wsrc-c: #8a6a00;
    --wsrc-d: #c05621;
    --wsrc-f: #a12a2a;
    --wsrc-unknown: #6b7280;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    color: #1b1b1b;
    color: var(--wsrc-ink, #1b1b1b);
    margin: 30px 0 40px;
}

.wsrc a {
    color: #1857A5;
    color: var(--wsrc-brand, #1857A5);
}

/* ---------- Header: title on the left, overall grade on the right ---------- */

.wsrc__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 32px;
    padding-bottom: 14px;
    border-bottom: 3px solid #1b1b1b;
    border-bottom-color: var(--wsrc-rule, #1b1b1b);
    margin-bottom: 16px;
}

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

.wsrc__heading {
    font-family: 'Roboto Slab', Georgia, serif;
    color: #1857A5;
    color: var(--wsrc-brand, #1857A5);
    font-weight: 700;
    margin: 0 0 6px;
}

.wsrc__meta {
    margin: 0 0 8px;
    font-size: 16px;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

.wsrc__season {
    font-weight: 700;
    color: #1b1b1b;
    color: var(--wsrc-ink, #1b1b1b);
}

.wsrc__season::after {
    content: '\00b7';
    margin: 0 8px;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

.wsrc__summary {
    margin: 0;
    font-size: 17px;
    max-width: 70ch;
}

/* Overall grade sits beside the title rather than in a tile of its own. */
.wsrc__overall {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    text-align: left;
    border-left: 6px solid #6b7280;
    border-left-color: var(--wsrc-unknown, #6b7280);
    padding-left: 14px;
}

.wsrc__overall-label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 13px;
    font-weight: 700;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

.wsrc__overall-status {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: 16px;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

.wsrc__overall-grade {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 64px;
    line-height: 1;
    font-weight: 700;
}

.wsrc__overall--a { border-left-color: #1f7a4d; border-left-color: var(--wsrc-a, #1f7a4d); }
.wsrc__overall--b { border-left-color: #3f7f2e; border-left-color: var(--wsrc-b, #3f7f2e); }
.wsrc__overall--c { border-left-color: #8a6a00; border-left-color: var(--wsrc-c, #8a6a00); }
.wsrc__overall--d { border-left-color: #c05621; border-left-color: var(--wsrc-d, #c05621); }
.wsrc__overall--f { border-left-color: #a12a2a; border-left-color: var(--wsrc-f, #a12a2a); }

.wsrc__overall--a .wsrc__overall-grade { color: #1f7a4d; color: var(--wsrc-a, #1f7a4d); }
.wsrc__overall--b .wsrc__overall-grade { color: #3f7f2e; color: var(--wsrc-b, #3f7f2e); }
.wsrc__overall--c .wsrc__overall-grade { color: #8a6a00; color: var(--wsrc-c, #8a6a00); }
.wsrc__overall--d .wsrc__overall-grade { color: #c05621; color: var(--wsrc-d, #c05621); }
.wsrc__overall--f .wsrc__overall-grade { color: #a12a2a; color: var(--wsrc-f, #a12a2a); }

/* 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. */
.wsrc [title].wsrc__overall-grade,
.wsrc [title].wsrc__row-grade,
.wsrc [title].wsrc__mini-grade {
    cursor: help;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: #9aa5b1;
}

.wsrc [title].wsrc__overall-grade:focus-visible,
.wsrc [title].wsrc__row-grade:focus-visible,
.wsrc [title].wsrc__mini-grade:focus-visible {
    outline: 2px solid #1857A5;
    outline: 2px solid var(--wsrc-brand, #1857A5);
    outline-offset: 3px;
}

/* With the script running the title moves to data-wsrc-score, so the same hint carries over and a
   pointer cursor says the grade can be clicked. */
.wsrc .wsrc__has-score {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: #9aa5b1;
}

.wsrc .wsrc__has-score:focus-visible {
    outline: 2px solid #1857A5;
    outline: 2px solid var(--wsrc-brand, #1857A5);
    outline-offset: 3px;
}

/* 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: 8px 12px;
    border-radius: 4px;
    background: #1b1b1b;
    background: var(--wsrc-ink, #1b1b1b);
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

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

/* ---------- Notices ---------- */

.wsrc__stale,
.wsrc__notice {
    border-left: 4px solid #c05621;
    border-left-color: var(--wsrc-d, #c05621);
    background: #fdf6f0;
    padding: 10px 14px;
    margin: 0 0 16px;
    font-size: 15px;
}

.wsrc__notice {
    border-left-color: #1857A5;
    border-left-color: var(--wsrc-brand, #1857A5);
    background: #f0f5fb;
}

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

.wsrc__picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 18px;
    font-size: 15px;
}

.wsrc__picker-label {
    margin: 0;
    font-weight: 600;
}

.wsrc__picker-input {
    font: inherit;
    padding: 5px 8px;
    border: 1px solid #d8dee6;
    border-color: var(--wsrc-border, #d8dee6);
    border-radius: 4px;
    background: #ffffff;
    color: #1b1b1b;
    color: var(--wsrc-ink, #1b1b1b);
    min-width: 11em;
}

.wsrc__picker-button {
    font: inherit;
    font-weight: 600;
    padding: 6px 14px;
    border: 1px solid #1857A5;
    border-color: var(--wsrc-brand, #1857A5);
    border-radius: 4px;
    background: #1857A5;
    background: var(--wsrc-brand, #1857A5);
    color: #ffffff;
    cursor: pointer;
}

.wsrc__picker-button:hover,
.wsrc__picker-button:focus-visible {
    background: #134784;
}

.wsrc__picker-input:focus-visible,
.wsrc__picker-button:focus-visible,
.wsrc__picker-latest:focus-visible {
    outline: 2px solid #1857A5;
    outline: 2px solid var(--wsrc-brand, #1857A5);
    outline-offset: 2px;
}

.wsrc__picker-latest {
    font-weight: 600;
}

.wsrc__picker-range {
    flex-basis: 100%;
    margin: 0;
    font-size: 13px;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

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

.wsrc__ledger-wrap {
    margin-bottom: 26px;
}

.wsrc__ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.wsrc__ledger caption {
    text-align: left;
    padding: 0 0 8px;
    font-size: 15px;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

.wsrc__ledger th,
.wsrc__ledger td {
    padding: 12px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #d8dee6;
    border-bottom-color: var(--wsrc-border, #d8dee6);
}

.wsrc__ledger thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
    border-bottom: 2px solid #1b1b1b;
    border-bottom-color: var(--wsrc-rule, #1b1b1b);
    white-space: nowrap;
}

.wsrc__ledger tbody tr:last-child td {
    border-bottom: 2px solid #1b1b1b;
    border-bottom-color: var(--wsrc-rule, #1b1b1b);
}

.wsrc__ledger th:first-child,
.wsrc__ledger td:first-child {
    padding-left: 0;
}

.wsrc__ledger th:last-child,
.wsrc__ledger td:last-child {
    padding-right: 0;
}

.wsrc__row-label {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.wsrc__row-source {
    margin: 4px 0 0;
    font-size: 13px;
}

.wsrc__row-source a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wsrc__row-source .fa {
    font-size: 11px;
    margin-left: 3px;
}

.wsrc__row-grade {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

.wsrc__row-grade--a { color: #1f7a4d; color: var(--wsrc-a, #1f7a4d); }
.wsrc__row-grade--b { color: #3f7f2e; color: var(--wsrc-b, #3f7f2e); }
.wsrc__row-grade--c { color: #8a6a00; color: var(--wsrc-c, #8a6a00); }
.wsrc__row-grade--d { color: #c05621; color: var(--wsrc-d, #c05621); }
.wsrc__row-grade--f { color: #a12a2a; color: var(--wsrc-f, #a12a2a); }

.wsrc__row-grade--unknown,
.wsrc__row--unavailable .wsrc__row-grade {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
    white-space: normal;
}

.wsrc__row-status {
    font-weight: 600;
}

.wsrc__row-measure,
.wsrc__row-record {
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

/* ---------- 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: #f4f6f9;
    border-left: 1px solid #d8dee6;
    border-left-color: var(--wsrc-border, #d8dee6);
}

.wsrc__row-compare .wsrc__row-grade {
    font-size: 22px;
}

/* On its own line under the letter, so a long status doesn't wrap around it. */
.wsrc__row-compare-status {
    display: block;
    margin-top: 4px;
    font-weight: 600;
    white-space: normal;
}

.wsrc__overall {
    grid-template-rows: auto auto auto;
}

.wsrc__overall-compare {
    grid-column: 1 / span 2;
    grid-row: 3;
    margin: 6px 0 0;
    font-size: 14px;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

.wsrc__overall-compare-grade {
    font-family: 'Roboto Slab', Georgia, serif;
    font-weight: 700;
    font-size: 16px;
}

.wsrc__overall-compare-grade--a { color: #1f7a4d; color: var(--wsrc-a, #1f7a4d); }
.wsrc__overall-compare-grade--b { color: #4f9a3a; color: var(--wsrc-b, #4f9a3a); }
.wsrc__overall-compare-grade--c { color: #b8860b; color: var(--wsrc-c, #b8860b); }
.wsrc__overall-compare-grade--d { color: #c05621; color: var(--wsrc-d, #c05621); }
.wsrc__overall-compare-grade--f { color: #a12a2a; color: var(--wsrc-f, #a12a2a); }

.wsrc__picker-year {
    min-width: 9em;
}

@media (max-width: 699px) {
    /* Stacked rows: the comparison becomes its own labelled line inside the card. */
    .wsrc__ledger .wsrc__compare-col {
        border-left: 0;
        border-radius: 4px;
        padding: 6px 8px;
        margin: 4px 0;
    }
}

.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: #f7f8fa;
}

/* Per-indicator explainer. A native disclosure, so it needs no JavaScript and stays
   keyboard accessible. */
.wsrc__row-help {
    margin-top: 6px;
}

.wsrc__row-help > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #1857A5;
    color: var(--wsrc-brand, #1857A5);
    list-style: none;
}

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

.wsrc__row-help > summary .fa { margin-right: 4px; }

.wsrc__row-help > summary:focus-visible {
    outline: 2px solid #1857A5;
    outline: 2px solid var(--wsrc-brand, #1857A5);
    outline-offset: 2px;
}

.wsrc__row-help p {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    max-width: 44ch;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

/* Under about 700px the six columns cannot fit, so each row stacks into a labelled block. */
@media (max-width: 699px) {
    .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 td {
        display: block;
    }

    .wsrc__ledger tr {
        padding: 12px 0;
        border-bottom: 1px solid #d8dee6;
        border-bottom-color: var(--wsrc-border, #d8dee6);
    }

    .wsrc__ledger tbody tr:last-child {
        border-bottom: 2px solid #1b1b1b;
        border-bottom-color: var(--wsrc-rule, #1b1b1b);
    }

    .wsrc__ledger td {
        padding: 5px 0;
        border-bottom: 0;
        white-space: normal;
    }

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

    .wsrc__ledger td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 1px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: #5a5a5a;
        color: var(--wsrc-muted, #5a5a5a);
    }

    .wsrc__row-grade {
        font-size: 24px;
    }

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

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

.wsrc__history {
    border-top: 1px solid #d8dee6;
    border-top-color: var(--wsrc-border, #d8dee6);
    padding-top: 20px;
    margin-bottom: 26px;
}

.wsrc__section-heading {
    margin: 0 0 4px;
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    color: #1857A5;
    color: var(--wsrc-brand, #1857A5);
}

.wsrc__section-intro {
    margin: 0 0 14px;
    font-size: 15px;
    max-width: 70ch;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

.wsrc__chart {
    border: 1px solid #d8dee6;
    border-color: var(--wsrc-border, #d8dee6);
    border-radius: 6px;
    background: #ffffff;
    background: var(--wsrc-surface, #ffffff);
    padding: 10px 12px;
    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: #e8f3ec; }
.wsrc__band--b { fill: #eef5e9; }
.wsrc__band--c { fill: #fbf5e3; }
.wsrc__band--d { fill: #fbeee4; }
.wsrc__band--f { fill: #f9e8e8; }

.wsrc__band-label {
    font-size: 13px;
    font-weight: 700;
    fill: #5a5a5a;
    fill: var(--wsrc-muted, #5a5a5a);
}

.wsrc__season-rule {
    stroke: #b9c5d1;
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

/* A perfectly ordinary year scores 50; the dashed rule shows where that sits. */
.wsrc__normal-rule {
    stroke: #1b1b1b;
    stroke: var(--wsrc-ink, #1b1b1b);
    stroke-width: 1;
    stroke-dasharray: 6 4;
    opacity: .55;
}

.wsrc__normal-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    fill: #5a5a5a;
    fill: var(--wsrc-muted, #5a5a5a);
}

.wsrc__chart-line {
    fill: none;
    stroke: #1857A5;
    stroke: var(--wsrc-brand, #1857A5);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.wsrc__chart-endpoint {
    fill: #1857A5;
    fill: var(--wsrc-brand, #1857A5);
    stroke: #ffffff;
    stroke-width: 2;
}

/* The date the visitor chose, when it is not the latest one. */
.wsrc__chart-highlight-rule {
    stroke: #c05621;
    stroke: var(--wsrc-d, #c05621);
    stroke-width: 1.5;
}

.wsrc__chart-highlight {
    fill: #ffffff;
    stroke: #c05621;
    stroke: var(--wsrc-d, #c05621);
    stroke-width: 3;
}

/* The comparison year: dots rather than dashes, so it never reads as the "normal" rule,
   and a colour no grade or band uses. */
.wsrc__chart-compare-line {
    fill: none;
    stroke: #6b4fa0;
    stroke-width: 3;
    stroke-dasharray: 0.1 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wsrc__chart-compare-mark {
    fill: #ffffff;
    stroke: #6b4fa0;
    stroke-width: 2.5;
}

.wsrc__chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0 0 8px;
    font-size: 14px;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

.wsrc__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wsrc__legend-swatch {
    display: inline-block;
    width: 26px;
    height: 0;
    border-top: 3px solid #1857A5;
    border-top-color: var(--wsrc-brand, #1857A5);
}

.wsrc__legend-swatch--compare {
    border-top: 3px dotted #6b4fa0;
}

.wsrc__chart-tick {
    font-size: 12px;
    fill: #5a5a5a;
    fill: var(--wsrc-muted, #5a5a5a);
}

/* Small multiples: one compact chart per indicator, same bands and same time span. */
.wsrc__history-subheading {
    margin: 22px 0 10px;
    font-size: 16px;
    font-weight: 700;
}

.wsrc__mini-charts {
    list-style: none;
    padding: 0;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
}

.wsrc__mini {
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 0 14px;
}

@media (min-width: 700px) {
    .wsrc__mini-charts {
        margin-left: -7px !important;
        margin-right: -7px !important;
    }

    .wsrc__mini {
        flex-basis: calc(50% - 14px);
        max-width: calc(50% - 14px);
        margin-left: 7px;
        margin-right: 7px;
    }
}

/* Two to a row at most, even on wide screens: three made each chart too small to read. */

.wsrc__mini-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.wsrc__mini-label {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 700;
}

.wsrc__mini-open {
    align-self: center;
    border: 1px solid #d8dee6;
    border-color: var(--wsrc-border, #d8dee6);
    border-radius: 4px;
    background: #ffffff;
    color: #1857A5;
    color: var(--wsrc-brand, #1857A5);
    padding: 2px 7px;
    line-height: 1.4;
    cursor: pointer;
}

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

.wsrc__mini-open:hover,
.wsrc__mini-open:focus-visible {
    background: #eef2f6;
}

.wsrc__mini-open:focus-visible {
    outline: 2px solid #1857A5;
    outline: 2px solid var(--wsrc-brand, #1857A5);
    outline-offset: 2px;
}

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

/* Enlarged indicator chart. The dialog itself has no padding, so a click that lands on it
   directly is a click on the backdrop. */
.wsrc__dialog {
    padding: 0;
    border: 0;
    border-radius: 8px;
    width: min(960px, calc(100vw - 32px));
    max-width: none;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}

.wsrc__dialog::backdrop {
    background: rgba(15, 23, 42, .55);
}

.wsrc__dialog-inner {
    padding: 16px 18px 12px;
}

.wsrc__dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.wsrc__dialog-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.wsrc__dialog-close {
    border: 0;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    color: #1b1b1b;
    color: var(--wsrc-ink, #1b1b1b);
}

.wsrc__dialog-note {
    margin: 8px 0 0;
    font-size: 14px;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

.wsrc__mini-grade {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
}

.wsrc__mini-grade--a { color: #1f7a4d; color: var(--wsrc-a, #1f7a4d); }
.wsrc__mini-grade--b { color: #3f7f2e; color: var(--wsrc-b, #3f7f2e); }
.wsrc__mini-grade--c { color: #8a6a00; color: var(--wsrc-c, #8a6a00); }
.wsrc__mini-grade--d { color: #c05621; color: var(--wsrc-d, #c05621); }
.wsrc__mini-grade--f { color: #a12a2a; color: var(--wsrc-f, #a12a2a); }

.wsrc__mini-chart {
    border: 1px solid #d8dee6;
    border-color: var(--wsrc-border, #d8dee6);
    border-radius: 6px;
    background: #ffffff;
    background: var(--wsrc-surface, #ffffff);
    padding: 6px 8px;
    overflow: hidden;
}

/* 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;
}

.wsrc__history-facts {
    list-style: none;
    padding: 0;
    margin: 14px 0 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
}

.wsrc__history-facts li {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wsrc__history-term {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

.wsrc__history-value {
    font-size: 17px;
    font-weight: 700;
}

.wsrc__history-value a {
    text-decoration: none;
    border-bottom: 1px dotted #1857A5;
    border-bottom-color: var(--wsrc-brand, #1857A5);
}

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

.wsrc__reservoirs {
    border-top: 1px solid #d8dee6;
    border-top-color: var(--wsrc-border, #d8dee6);
    padding-top: 20px;
    margin-bottom: 26px;
}

/* 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 20px;
}

.wsrc__basin-bar {
    display: flex;
    height: 34px;
    border: 1px solid #d8dee6;
    border-color: var(--wsrc-border, #d8dee6);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background: #eef2f6;
}

/* One color per upper reservoir, in list order, shared by its basin block, legend swatch and
   gauge. Water-family blues and teals alternate so neighbors differ in hue as well as
   lightness, the last is a slate violet so it never reads as a teal, and every color keeps at least 3:1 contrast against the empty track. Color is
   never the only signal: the legend and each gauge carry the reservoir's name. */
.wsrc__res--1 { --wsrc-res: #0b2e59; }
.wsrc__res--2 { --wsrc-res: #1857a5; }
.wsrc__res--3 { --wsrc-res: #0e6f7e; }
.wsrc__res--4 { --wsrc-res: #2f7dc4; }
.wsrc__res--5 { --wsrc-res: #138a91; }
.wsrc__res--6 { --wsrc-res: #4b8fc8; }
.wsrc__res--7 { --wsrc-res: #6a64b8; }

.wsrc__basin-block--separate,
.wsrc__basin-legend--separate,
.wsrc__reservoir--separate {
    --wsrc-res: #6b7280;
}

.wsrc__basin-block {
    height: 100%;
    background: #1857A5;
    background: var(--wsrc-res, var(--wsrc-brand, #1857A5));
    border-right: 1px solid rgba(255, 255, 255, .7);
    box-sizing: border-box;
    min-width: 0;
}

.wsrc__basin-block--separate {
    background: #6b7280;
    background: var(--wsrc-unknown, #6b7280);
}

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

.wsrc__basin-typical {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: #1b1b1b;
    background: var(--wsrc-ink, #1b1b1b);
}

.wsrc__basin-legend {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 13px;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

.wsrc__basin-legend li::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    vertical-align: -1px;
    border-radius: 2px;
    background: #1857A5;
    background: var(--wsrc-res, var(--wsrc-brand, #1857A5));
}

.wsrc__basin-legend li.wsrc__basin-legend--separate::before {
    background: #6b7280;
    background: var(--wsrc-unknown, #6b7280);
}

.wsrc__basin-legend li.wsrc__basin-legend--empty::before {
    background: #eef2f6;
    border: 1px solid #d8dee6;
    box-sizing: border-box;
}

.wsrc__basin-legend li.wsrc__basin-legend--typical::before {
    width: 2px;
    border-radius: 0;
    background: #1b1b1b;
    background: var(--wsrc-ink, #1b1b1b);
}

/* Bar | Tiles tabs over the whole-basin view. Hidden until the script sets them up. */
.wsrc__basin-tabs {
    display: inline-flex;
    border: 1px solid #d8dee6;
    border-color: var(--wsrc-border, #d8dee6);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

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

.wsrc__basin-tabs button {
    border: 0;
    background: #ffffff;
    color: #1857A5;
    color: var(--wsrc-brand, #1857A5);
    font-size: 14px;
    font-weight: 700;
    padding: 5px 16px;
    cursor: pointer;
}

.wsrc__basin-tabs button + button {
    border-left: 1px solid #d8dee6;
    border-left-color: var(--wsrc-border, #d8dee6);
}

.wsrc__basin-tabs button[aria-selected="true"] {
    background: #1857A5;
    background: var(--wsrc-brand, #1857A5);
    color: #ffffff;
}

.wsrc__basin-tabs button:focus-visible {
    outline: 2px solid #1b1b1b;
    outline-offset: -3px;
}

/* Without the script both panels show, stacked; with it only one shows, right under the tabs. */
.wsrc__basin-panel + .wsrc__basin-panel {
    margin-top: 12px;
}

.wsrc__basin-tabs:not([hidden]) ~ .wsrc__basin-panel {
    margin-top: 0;
}

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

/* A key line with no swatch, such as what the tile sizes mean. */
.wsrc__basin-legend li.wsrc__basin-legend--unit::before {
    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: 4px;
    overflow: hidden;
    background: #ffffff;
}

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

@media (max-width: 600px) {
    .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 one blue,
   turning amber below usual and the report card's F red well below, so the low reservoirs
   stand out; the label, not the color, names the reservoir. */
.wsrc__tile {
    --wsrc-water: #1857A5;
    --wsrc-water: var(--wsrc-brand, #1857A5);
    position: absolute;
    box-sizing: border-box;
    border: 3px solid #ffffff;
    overflow: hidden;
}

.wsrc__tile--below,
.wsrc__basin-legend li.wsrc__basin-legend--below {
    --wsrc-water: #e8890c;
}

.wsrc__tile--well-below,
.wsrc__basin-legend li.wsrc__basin-legend--well-below {
    --wsrc-water: #a12a2a;
    --wsrc-water: var(--wsrc-f, #a12a2a);
}

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

.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: #1857A5;
    background: var(--wsrc-water, var(--wsrc-brand, #1857A5));
}

.wsrc__tile-label {
    position: absolute;
    top: 4px;
    left: 4px;
    max-width: calc(100% - 8px);
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .88);
    color: #1b1b1b;
    color: var(--wsrc-ink, #1b1b1b);
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

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

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

/* The usual level for the date: a dashed gray 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 #7b8794;
}

.wsrc__basin-legend li.wsrc__basin-legend--usual::before {
    width: 16px;
    height: 0;
    border-radius: 0;
    vertical-align: 3px;
    background: transparent;
    border-top: 2px dashed #7b8794;
}

/* 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;
    font-size: 12px;
}

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

.wsrc__basin-summary {
    margin: 8px 0 0;
    font-size: 15px;
}

.wsrc__reservoir-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px !important;
    display: flex;
    flex-wrap: wrap;
}

.wsrc__reservoir {
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #eaeef3;
}

@media (min-width: 700px) {
    .wsrc__reservoir-list {
        margin-left: -14px !important;
        margin-right: -14px !important;
    }

    .wsrc__reservoir {
        flex-basis: calc(50% - 28px);
        max-width: calc(50% - 28px);
        margin-left: 14px;
        margin-right: 14px;
    }
}

.wsrc__reservoir-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.wsrc__reservoir-name {
    font-size: 16px;
    font-weight: 700;
}

.wsrc__reservoir-name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #1857A5;
    border-bottom-color: var(--wsrc-brand, #1857A5);
}

.wsrc__reservoir-name a:hover,
.wsrc__reservoir-name a:focus-visible {
    color: #1857A5;
    color: var(--wsrc-brand, #1857A5);
}

.wsrc__reservoir-percent {
    font-size: 16px;
    font-weight: 700;
    color: #1857A5;
    color: var(--wsrc-brand, #1857A5);
    white-space: nowrap;
}

/* 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;
    background: #eef2f6;
    border: 1px solid #d8dee6;
    border-color: var(--wsrc-border, #d8dee6);
    border-radius: 3px;
    overflow: hidden;
    min-width: 28%;
}

.wsrc__gauge-fill {
    height: 100%;
    background: #1857A5;
    background: var(--wsrc-res, var(--wsrc-brand, #1857A5));
}

.wsrc__reservoir-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -1px;
    border-radius: 2px;
    background: #1857A5;
    background: var(--wsrc-res, var(--wsrc-brand, #1857A5));
}

.wsrc__gauge-typical {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: #1b1b1b;
    background: var(--wsrc-ink, #1b1b1b);
}

.wsrc__reservoir--separate .wsrc__gauge-fill {
    background: #6b7280;
    background: var(--wsrc-unknown, #6b7280);
}

.wsrc__reservoir-detail,
.wsrc__reservoir-compare {
    margin: 6px 0 0;
    font-size: 14px;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

.wsrc__reservoir-compare {
    margin-top: 1px;
}

.wsrc__reservoir-key {
    margin: 0;
    font-size: 14px;
    max-width: 80ch;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

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

.wsrc__explainer {
    border-top: 1px solid #d8dee6;
    border-top-color: var(--wsrc-border, #d8dee6);
    padding-top: 14px;
    max-width: 80ch;
}

.wsrc__explainer > summary {
    cursor: pointer;
    font-weight: 700;
    color: #1857A5;
    color: var(--wsrc-brand, #1857A5);
    font-size: 17px;
}

.wsrc__explainer p {
    font-size: 16px;
    margin-top: 10px;
}

/* 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. */
/* The site pads explainer paragraphs 10px each side; the table and list line up with them. */
.wsrc__weights-wrap {
    overflow-x: auto;
    margin-top: 12px;
    padding: 0 10px;
}

.wsrc__weights {
    border-collapse: collapse;
    width: 100%;
    font-size: 15px;
}

.wsrc__weights caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    padding: 0 0 6px;
    color: #1b1b1b;
    color: var(--wsrc-ink, #1b1b1b);
}

.wsrc__weights th,
.wsrc__weights td {
    padding: 6px 10px;
    border-bottom: 1px solid #eaeef3;
    text-align: right;
    vertical-align: bottom;
}

.wsrc__weights th[scope="row"],
.wsrc__weights thead th:first-child {
    text-align: left;
}

.wsrc__weights thead th {
    border-bottom: 2px solid #1b1b1b;
    border-bottom-color: var(--wsrc-rule, #1b1b1b);
    font-size: 14px;
    line-height: 1.25;
}

.wsrc__weights-months {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: #5a5a5a;
    color: var(--wsrc-muted, #5a5a5a);
}

.wsrc__weights .wsrc__weights-current {
    background: #eef4fb;
    font-weight: 700;
}

.wsrc__weights-why {
    margin: 12px 10px 0;
    padding-left: 20px;
    font-size: 15px;
}

.wsrc__weights-why li {
    margin-bottom: 4px;
}

@media (max-width: 600px) {
    .wsrc__weights {
        font-size: 14px;
    }

    .wsrc__weights th,
    .wsrc__weights td {
        padding: 5px 6px;
    }
}

.wsrc__unavailable {
    border: 1px solid #d8dee6;
    border-color: var(--wsrc-border, #d8dee6);
    border-radius: 6px;
    background: #f7f8fa;
    padding: 16px 18px;
    font-size: 17px;
}

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