/* water-quality.css — the banked water samples (BACKLOG §2.47 item 11): the sampling-site page (/water-quality/site/…,
   .wqs) and the two blocks other pages embed: "Water samples upstream of this gauge" (.wqb, station page) and a river
   page's "Water quality" tab body (.wqr).

   Colours are tokens on .wq. Results are NEVER coloured good or bad: there is no score and no threshold here, so values
   are ink, qualified results ("below …") are italic, and the one accent is a neutral blue for links and the chart line.
   The blocks sit on light host pages (the station and river pages have no dark theme), so only the standalone page
   (.wqs) takes the dark tokens, and it sets color-scheme on body (the contract in public/styles.css). */

.wq {
    --wq-card: #fff; --wq-alt: #f7f9fc; --wq-border: #e3e8f0; --wq-line: #eef1f6;
    --wq-text: #17233d; --wq-muted: #56627a; --wq-faint: #8390a8; --wq-link: #1d6fb8;
    --wq-accent: #2f6db3; --wq-accent-soft: #e8f0fa; --wq-chip: #eef2f7; --wq-chip-q: #f3eefa; --wq-note: #f4f7fb;
    --wq-grid: #e8ecf2; --wq-cens: #7a5ab5;
    color: var(--wq-text);
}
.wq a { color: var(--wq-link); }
.wq .wq-note { background: var(--wq-note); border-left: 3px solid var(--wq-accent); padding: 8px 12px; border-radius: 6px;
    font-size: .88rem; color: var(--wq-muted); line-height: 1.5; margin: 0 0 12px; }
.wq .wq-sum { font-size: .95rem; line-height: 1.55; margin: 0 0 10px; color: var(--wq-text); }
.wq .wq-empty { font-size: .92rem; line-height: 1.55; color: var(--wq-muted); margin: 0 0 10px; }
.wq .wq-sub { font-size: .9rem; font-weight: 600; margin: 14px 0 6px; color: var(--wq-text); }
.wq .wq-more-n { font-size: .84rem; color: var(--wq-muted); margin: 8px 0 0; line-height: 1.5; }
.wq .wq-foot { font-size: .76rem; color: var(--wq-faint); line-height: 1.5; margin: 14px 0 0; }
.wq .wq-foot a { color: var(--wq-muted); }

/* a list of points */
.wq .wq-list { list-style: none; margin: 0; padding: 0; }
.wq .wq-list > li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-top: 1px solid var(--wq-line); }
.wq .wq-list > li:first-child { border-top: none; }
.wq .wq-name { font-weight: 650; text-decoration: none; }
.wq .wq-name:hover { text-decoration: underline; }
.wq .wq-where, .wq .wq-when { font-size: .82rem; color: var(--wq-muted); }
.wq .wq-when { color: var(--wq-text); font-variant-numeric: tabular-nums; }

/* result chips: ink, never traffic lights */
.wq .wq-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.wq .wq-chip { display: inline-flex; align-items: baseline; gap: 4px; font-size: .78rem; padding: 2px 8px; border-radius: 99px;
    background: var(--wq-chip); color: var(--wq-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wq .wq-chip-k { color: var(--wq-muted); font-weight: 600; }
.wq .wq-chip-q { background: var(--wq-chip-q); font-style: italic; }
.wq .wq-chip-d { color: var(--wq-faint); font-size: .72rem; font-style: normal; }

/* tables */
.wq .wq-table { width: 100%; border-collapse: collapse; font-size: .84rem; margin: 6px 0 0; }
.wq .wq-table th { text-align: left; font-weight: 600; color: var(--wq-muted); font-size: .76rem; padding: 6px 8px; border-bottom: 1px solid var(--wq-border); }
.wq .wq-table td { padding: 7px 8px; border-bottom: 1px solid var(--wq-line); vertical-align: top; line-height: 1.4; }
.wq .wq-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wq .wq-table .wq-q { font-style: italic; }
.wq details > summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--wq-link); padding: 6px 0; }
.wq .wq-more { margin-top: 8px; }

/* river tab: stretches */
.wq .wq-stretch { border: 1px solid var(--wq-border); border-radius: 10px; padding: 4px 12px 10px; margin: 10px 0; background: var(--wq-card); }
.wq .wq-stretch > summary { color: var(--wq-text); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.wq .wq-stretch-t a { font-weight: 650; }
.wq .wq-stretch-n { font-weight: 400; font-size: .8rem; color: var(--wq-muted); }
.wq .wq-stretch-r { font-weight: 400; font-size: .8rem; color: var(--wq-muted); }
.wq .wq-stretch-r::before { content: '· '; }

/* the SVG chart */
.wq .wq-chart { width: 100%; height: auto; display: block; }
.wq .wq-chart .wq-grid { stroke: var(--wq-grid); stroke-width: 1; }
.wq .wq-chart .wq-axis { stroke: var(--wq-faint); stroke-width: 1; }
.wq .wq-chart .wq-ax { fill: var(--wq-muted); font-size: 10px; font-family: inherit; }
.wq .wq-chart .wq-ax-u { font-weight: 600; }
.wq .wq-chart .wq-line { fill: none; stroke: var(--wq-accent); stroke-width: 1.3; stroke-linejoin: round; opacity: .75; }
.wq .wq-chart .wq-dot { fill: var(--wq-accent); stroke: var(--wq-card); stroke-width: 1; }
.wq .wq-chart .wq-cens { fill: var(--wq-card); stroke: var(--wq-cens); stroke-width: 1.5; }
.wq .wq-chart .wq-text-mark { stroke: var(--wq-faint); stroke-width: 1.5; }
.wq .wq-chart .wq-rug { stroke: var(--wq-faint); stroke-width: 1; }
.wq .wq-chart .wq-gap { fill: var(--wq-alt); stroke: var(--wq-line); stroke-dasharray: 3 3; }
.wq .wq-chart .wq-gap-t { font-style: italic; }

/* ── the sampling-site page ───────────────────────────────────────────────────────────────────────── */
.wqs { max-width: 980px; margin: 0 auto; padding: 18px 16px 64px; }
[data-theme="dark"] body:has(.wqs) { background: #0b1220; color-scheme: dark; }
[data-theme="dark"] .wqs {
    --wq-card: #121b2e; --wq-alt: #0f1727; --wq-border: #22304a; --wq-line: #1b2740;
    --wq-text: #e6edf6; --wq-muted: #a4b1c4; --wq-faint: #7d8ba2; --wq-link: #7cb8f0;
    --wq-accent: #7cb8f0; --wq-accent-soft: #13283d; --wq-chip: #1a2436; --wq-chip-q: #251d38; --wq-note: #111a2c;
    --wq-grid: #1f2b42; --wq-cens: #b79cf0;
}
.wqs .wq-crumbs { font-size: .84rem; color: var(--wq-muted); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.wqs .wq-crumbs a { color: var(--wq-muted); text-decoration: none; }
.wqs h1 { font-size: 1.7rem; line-height: 1.2; letter-spacing: -.02em; margin: 10px 0 6px; text-wrap: balance; }
.wqs .wq-lede { color: var(--wq-muted); font-size: .98rem; line-height: 1.5; margin: 0 0 14px; }
.wqs .wq-card { background: var(--wq-card); border: 1px solid var(--wq-border); border-radius: 12px; padding: 16px 18px; margin: 0 0 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.wqs .wq-card h2 { font-size: 1.1rem; margin: 0 0 10px; }
.wqs .wq-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 18px; margin: 0; }
.wqs .wq-facts div { min-width: 0; }
.wqs .wq-facts dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wq-faint); margin: 0 0 2px; }
.wqs .wq-facts dd { margin: 0; font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.wqs .wq-facts dd small { color: var(--wq-muted); font-size: .8rem; display: block; }
.wqs .wq-heads { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.wqs .wq-head { background: var(--wq-card); border: 1px solid var(--wq-border); border-radius: 12px; padding: 12px 14px 8px; min-width: 0; }
.wqs .wq-head h3 { font-size: .95rem; margin: 0; }
.wqs .wq-head .wq-basis { font-size: .78rem; color: var(--wq-muted); margin: 1px 0 6px; }
.wqs .wq-head .wq-latest { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0 0; }
.wqs .wq-head .wq-latest.wq-q { font-style: italic; font-weight: 600; font-size: 1.05rem; }
.wqs .wq-head .wq-latest-d { font-size: .8rem; color: var(--wq-muted); margin: 0 0 6px; }
.wqs .wq-head .wq-other { font-size: .76rem; color: var(--wq-muted); margin: 4px 0 2px; }
.wqs .wq-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .78rem; color: var(--wq-muted); margin: 4px 0 12px; align-items: center; }
.wqs .wq-key svg { vertical-align: -2px; }
.wqs .wq-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wqs .wq-table-all td:first-child { min-width: 180px; }
.wqs .wq-code { color: var(--wq-faint); font-size: .74rem; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
    .wqs { padding: 12px 16px 48px; }
    .wqs h1 { font-size: 1.4rem; }
    .wqs .wq-heads { grid-template-columns: 1fr; }
    .wq .wq-table-river thead { display: none; }
    .wq .wq-table-river tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--wq-line); }
    .wq .wq-table-river td { border: none; padding: 0; }
    .wq .wq-table-river td:nth-child(1) { grid-column: 1 / -1; font-weight: 600; }
    .wq .wq-table-river td:nth-child(2) { color: var(--wq-muted); font-size: .8rem; }
    .wq .wq-table-river td:nth-child(3) { text-align: right; font-size: .8rem; color: var(--wq-muted); }
    .wq .wq-table-river td:nth-child(4) { grid-column: 1 / -1; font-size: .8rem; }
    .wq .wq-table-river td:nth-child(5) { grid-column: 1 / -1; }
}