/* Home page: "The Tyne sewage report". Set like a radio forecast: a general synopsis, then every stretch of the
   river read out in the same fixed order, one terse line each. Marks carry meaning, colour backs them up:
   solid red square = spilling, half-filled ochre square = spilled in 48 h, hatched grey square = no data,
   open ring = no alert. Red and ochre are used for nothing else. */

* { box-sizing: border-box; }
html { scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font: 400 17px/1.55 var(--text); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
button, select, input { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 2000; }
.skip:focus { top: 8px; }
* { scrollbar-color: var(--rule) transparent; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* ---- marks: the one icon system on the page ------------------------------------------------------- */
.mk { display: inline-block; width: 12px; height: 12px; flex: none; vertical-align: -1px; }
.mk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.m-fill-spill { fill: var(--spill); }
.m-line-recent { fill: var(--paper); stroke: var(--recent); stroke-width: 1.4; }
.m-fill-recent { fill: var(--recent); }
.m-line-nodata { fill: var(--paper); stroke: var(--nodata); stroke-width: 1.2; }
.m-hatch { stroke: var(--nodata); stroke-width: 1.1; fill: none; }
.m-line-clear { fill: none; stroke: var(--clear); stroke-width: 1.2; }

/* ---- masthead ------------------------------------------------------------------------------------- */
.mast { position: sticky; top: 0; z-index: 1100; background: var(--paper); border-bottom: 1px solid var(--rule); }
.mast-in { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px/1 var(--call); letter-spacing: 0.01em; text-transform: uppercase; }
.brand-mark { width: 46px; height: 10px; overflow: visible; }
.mast-nav { margin-left: auto; display: flex; gap: 22px; font-size: 15px; }
.mast-nav a { text-decoration: none; color: var(--ink-2); padding: 6px 0; }
.mast-nav a:hover { color: var(--ink); text-decoration: underline; }

/* ---- general synopsis ----------------------------------------------------------------------------- */
.synopsis { padding-top: 40px; padding-bottom: 36px; }
.title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 14px; border-bottom: 3px solid var(--rule-strong); }
h1 { font: 700 24px/1.1 var(--call); text-transform: uppercase; letter-spacing: 0.04em; }
.issued { margin: 0; color: var(--ink-2); font-size: 15px; }
.general { margin: 22px 0 0; max-width: 30em; font-size: clamp(25px, 2.9vw, 36px); line-height: 1.38; font-weight: 400; letter-spacing: -0.01em; text-wrap: pretty; }
.general strong { font-weight: 700; }
.general .say-spill { color: var(--spill); font-weight: 700; }
.caveat { margin: 14px 0 0; max-width: 56em; color: var(--ink-2); font-size: 16px; }
.caveat .mk { margin-right: 6px; }
.flood { margin: 20px 0 0; padding: 14px 16px; border: 3px solid var(--water-strong); background: var(--paper-2); max-width: 56em; font-size: 17px; }
.flood strong { font-weight: 700; }
.flood a { color: inherit; }
.conditions-line { margin: 10px 0 0; color: var(--ink-2); font-size: 16px; max-width: 56em; }
.dry-line { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--rule); max-width: 56em; font-size: 17px; }
.dry-line strong { font-weight: 700; }
.stretch .conditions { grid-column: 2; margin-top: 4px; font-size: 14.5px; color: var(--ink-2); }
.c-dry, .c-rain { margin: 2px 0 10px 26px; font-size: 15px; max-width: 46em; }
.c-dry strong { font-weight: 700; }
.c-rain { color: var(--ink-2); }
.stale { margin: 20px 0 0; padding: 14px 16px; border: 3px solid var(--ink); color: var(--ink); font-weight: 600; max-width: 56em; }
body.stale .board, body.stale .record-table { filter: grayscale(1); opacity: .55; }

/* ---- the board: litany + chart ------------------------------------------------------------------- */
.board { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }

.litany-head { display: flex; align-items: end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
h2 { font: 700 21px/1.15 var(--call); text-transform: uppercase; letter-spacing: 0.04em; }
.search input {
  width: 300px; max-width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper); color: var(--ink); font-size: 16px;
}
.search input::placeholder { color: var(--ink-2); opacity: 1; }
.search input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }

.key { list-style: none; margin: 14px 0 0; padding: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14.5px; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.key li { display: flex; align-items: center; gap: 7px; }

.stretches { list-style: none; margin: 0; padding: 0; }
.stretch { border-bottom: 1px solid var(--rule); }
.stretch > details > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) 1.25rem; gap: 2px 20px;
  padding: 16px 0 15px; align-items: baseline;
}
.stretch > details > summary::-webkit-details-marker { display: none; }
.stretch > details > summary:hover .name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.stretch .name { grid-row: 1 / 3; font: 700 22px/1.05 var(--call); text-transform: uppercase; letter-spacing: 0.03em; }
.stretch .name small { display: block; margin-top: 5px; font: 400 14px/1.3 var(--text); text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.stretch .report { font-size: 18px; line-height: 1.45; }
.stretch .report b { font-weight: 700; }
.stretch.is-spilling .report b.lead { color: var(--spill); }
.stretch .tally { grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }
.stretch .tally span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.stretch .tally .live { color: var(--ink); font-weight: 700; }
.stretch .tally .nil .mk { opacity: .45; }
.stretch .chev { grid-column: 3; grid-row: 1; align-self: center; width: 14px; height: 14px; color: var(--ink-2); transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.stretch details[open] > summary .chev { transform: rotate(180deg); }
.stretch details[open] > summary { padding-bottom: 12px; }
.stretch.flash .report { animation: flash 2.4s cubic-bezier(.16, 1, .3, 1); }
@keyframes flash { 0% { background: var(--flash); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .stretch.flash .report { animation: none; } .stretch .chev { transition: none; } }

/* inside a stretch: the overflows behind the line */
.proof { padding: 0 0 20px calc(11.5rem + 20px); }
.proof-h { margin: 0 0 6px; font-size: 14.5px; color: var(--ink-2); }
.overflows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.overflow { border-bottom: 1px solid var(--rule); }
.overflow > details > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 0 12px; padding: 10px 0; align-items: baseline;
}
.overflow > details > summary::-webkit-details-marker { display: none; }
.overflow .mk { align-self: center; }
.overflow .o-name { font-weight: 700; font-size: 16.5px; }
.overflow .o-when { text-align: right; white-space: nowrap; font-size: 15px; }
.overflow .o-meta { grid-column: 2 / 4; font-size: 14.5px; color: var(--ink-2); }
.overflow summary:hover .o-name { text-decoration: underline; text-underline-offset: 3px; }
.overflow.sel > details > summary { background: var(--paper-2); box-shadow: -8px 0 0 var(--paper-2), 8px 0 0 var(--paper-2); }
.show-rest { margin-top: 10px; border: 1px solid var(--rule); background: transparent; padding: 7px 14px; cursor: pointer; font-size: 15px; border-radius: 3px; }
.show-rest:hover { border-color: var(--ink); }
.search-empty { padding: 18px 0; color: var(--ink-2); }

/* an overflow's record (also used in map popups) */
.card { font-size: 15px; line-height: 1.5; padding: 2px 0 14px 26px; }
.card .c-status { font-weight: 700; margin: 0 0 6px; }
.card .c-status.spilling { color: var(--spill); }
.card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; }
.card dt { color: var(--ink-2); }
.card dd { margin: 0; }
.card .c-h { margin: 12px 0 4px; font: 700 15px/1.2 var(--call); text-transform: uppercase; letter-spacing: 0.04em; }
.card .c-h span { font: 400 13.5px var(--text); text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.card .hist { margin: 0; padding: 0; list-style: none; }
.card .hist li { padding: 1px 0; }
.card .hist li.blip { color: var(--ink-2); }
.card .hist li.blip::after { content: " · blip, not counted"; font-size: 13.5px; }
.card table { border-collapse: collapse; font-size: 14.5px; }
.card th { text-align: left; font-weight: 400; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding: 2px 16px 3px 0; }
.card td { padding: 3px 16px 2px 0; }
.card td.nd { color: var(--ink-2); font-style: italic; }
.card td.weak, .card td.dry { color: var(--ink); font-weight: 700; }
.card .note { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); max-width: 40em; }
.card .to-map { margin-top: 12px; border: 1px solid var(--rule); background: transparent; padding: 6px 12px; cursor: pointer; font-size: 14.5px; border-radius: 3px; }
.card .to-map:hover { border-color: var(--ink); }

/* ---- the chart (map) ----------------------------------------------------------------------------- */
.chart { position: sticky; top: 76px; }
.chart-frame { border: 1px solid var(--rule-strong); background: var(--paper); }
/* The map stays light in dark mode too (a pale chart reads better than a dark one): inside it, the light
   palette is put back, so its ground, tints, marks and labels are the same in both. */
@media (prefers-color-scheme: dark) {
  .chart-svg, .chart-key .sw, .chart-key .tk {
    --paper: #f3f6f8; --ink: #14213d; --ink-2: #46536a; --spill: #b4122b; --recent: #855400; --nodata: #5f6b7a;
    --clear: #46536a; --water: #9db4c7; --water-strong: #2f5f86; color-scheme: light; color: #14213d;
  }
}
.chart-svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 150px); background: var(--map-ground); --k: 1; }
.chart-svg .area { stroke: var(--ink-2); stroke-width: 0.6; stroke-opacity: .5; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill-opacity .3s; }
.chart-svg .st-plain { fill: var(--area-plain); }
.chart-svg .st-recent { fill: var(--area-recent); }
.chart-svg .st-spilling { fill: var(--area-spill); }
.chart-svg .area:hover { stroke: var(--ink); stroke-width: 1.4; stroke-opacity: .9; }
.chart-svg.has-open .area { fill-opacity: .4; }
.chart-svg.has-open .area.on { fill-opacity: 1; stroke: var(--ink); stroke-width: 2; stroke-opacity: 1; }
.chart-svg .estuary { fill: var(--water); pointer-events: none; }
.chart-svg .catchment-edge { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-opacity: .5; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.chart-svg .rivers path { fill: none; stroke: var(--water); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.chart-svg .rivers .main { stroke-width: 2.2; }
.chart-svg .rivers .burn { stroke-width: 0.9; }
.chart-svg.has-open .rivers .on { stroke: var(--water-strong); }
.chart-svg text { pointer-events: none; paint-order: stroke; stroke: var(--area-plain); stroke-width: calc(6px * var(--k)); stroke-linejoin: round; }
.chart-svg .area-label { font: 700 calc(26px * var(--k)) var(--call); letter-spacing: 0.08em; fill: var(--water-strong); text-anchor: middle; }
.chart-svg .area-label.on { fill: var(--ink); }
.chart-svg .town.east { text-anchor: end; }
.chart-svg .town { font: 400 calc(21px * var(--k)) var(--text); fill: var(--ink-2); text-anchor: middle; }
.chart-svg .mark { cursor: pointer; }
.chart-svg .mark.other { opacity: .3; }
.chart-svg .area-outline { fill: none; stroke: var(--ink); stroke-width: 1.8; vector-effect: non-scaling-stroke; pointer-events: none; }
.chart-svg .mark.sel { filter: drop-shadow(0 0 calc(3px * var(--k)) var(--ink)); }
.chart-svg.has-open .mark:not(.on) { opacity: .22; }
.map-toggle { display: none; }
.card-wait { margin: 0 0 14px 26px; color: var(--ink-2); font-size: 15px; }
.strip { display: block; width: 100%; max-width: 520px; height: 30px; margin: 2px 0 0; }
.strip .s-spill { fill: var(--ink); }
.strip .s-now { fill: var(--spill); }
.strip .s-unknown { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.strip .s-blip { stroke: var(--ink-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.strip .s-axis, .strip .s-tick { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.strip-key { display: flex; justify-content: space-between; max-width: 520px; margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
.chart-key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0 12px 10px; font-size: 14px; color: var(--ink-2); background: var(--paper); }
.chart-key span { display: inline-flex; align-items: center; gap: 7px; }
.chart-key .sw { width: 14px; height: 14px; border: 1px solid var(--ink-2); flex: none; }
.chart-key .st-spilling { background: var(--area-spill); } .chart-key .st-recent { background: var(--area-recent); } .chart-key .st-plain { background: var(--area-plain); }
.chart-note { margin: 0; padding: 9px 12px; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--rule); background: var(--paper); }

/* ---- the record ---------------------------------------------------------------------------------- */
.record, .find, .how { padding-top: 64px; }
.record h2, .find h2, .how h2 { padding-bottom: 12px; border-bottom: 3px solid var(--rule-strong); }
.record-lead { margin: 18px 0 20px; max-width: 40em; font-size: 21px; line-height: 1.4; }
.record-lead strong { font-weight: 700; }
.table-scroll { overflow-x: auto; }
.record-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; }
.record-table th { font: 700 14px/1.2 var(--call); text-transform: uppercase; letter-spacing: 0.05em; text-align: right; color: var(--ink-2); padding: 8px 0 8px 18px; border-bottom: 1px solid var(--rule-strong); vertical-align: bottom; }
.record-table th:first-child, .record-table td:first-child { text-align: left; padding-left: 0; }
.record-table td { text-align: right; padding: 9px 0 9px 18px; border-bottom: 1px solid var(--rule); }
.record-table td:first-child { font: 700 17px/1.2 var(--call); text-transform: uppercase; letter-spacing: 0.03em; }
.record-table .up { color: var(--ink); font-weight: 700; }
.record-table .down { color: var(--ink-2); }
.record-table tfoot td { border-top: 2px solid var(--rule-strong); border-bottom: 0; font-weight: 700; }
.record-note { margin: 12px 0 0; color: var(--ink-2); font-size: 15px; max-width: 56em; }

/* ---- find your MP -------------------------------------------------------------------------------- */
.find > p { margin: 18px 0 0; max-width: 40em; }
.find-form { margin-top: 18px; max-width: 640px; }
.find-form label { display: block; font-size: 15px; color: var(--ink-2); margin-bottom: 6px; }
.find-row { display: flex; gap: 10px; }
.find-row select { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--paper); font-size: 16px; }
.find-row button { height: 46px; padding: 0 20px; border: 0; border-radius: 3px; background: var(--ink); color: var(--paper); font-weight: 700; cursor: pointer; }
.find-row button:hover { background: var(--water-strong); }

/* ---- how this works ------------------------------------------------------------------------------ */
.how-lead { margin: 18px 0 0; max-width: 40em; font-size: 19px; }
.how-list { margin: 24px 0 0; display: grid; grid-template-columns: 15rem minmax(0, 46em); gap: 14px 28px; }
.how-list dt { font: 700 17px/1.4 var(--call); text-transform: uppercase; letter-spacing: 0.03em; }
.how-list dd { margin: 0; color: var(--ink); }

.foot { margin-top: 72px; border-top: 1px solid var(--rule); padding: 22px 0 48px; color: var(--ink-2); font-size: 14px; }
.foot p { margin: 0 0 8px; max-width: 70em; }

/* ---- narrower screens ---------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .board { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .chart { position: static; }
  .chart-svg { max-height: 75vh; }
  .map-toggle { display: block; width: 100%; height: 46px; margin-bottom: 12px; border: 1px solid var(--rule-strong); border-radius: 3px; background: transparent; font-weight: 700; cursor: pointer; }
  .chart.folded .chart-frame { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .wrap { padding-inline: 16px; }
  html { scroll-padding-top: 104px; }
  .mast-in { flex-wrap: wrap; gap: 0 16px; min-height: 0; padding-top: 12px; }
  .mast-nav { margin: 0 -16px; padding: 4px 16px 6px; width: calc(100% + 32px); overflow-x: auto; gap: 18px; font-size: 14.5px; white-space: nowrap; scrollbar-width: none; }
  .brand { font-size: 17px; }
  .synopsis { padding-top: 22px; padding-bottom: 26px; }
  .general { margin-top: 16px; }
  .search { width: 100%; }
  .search input { width: 100%; }
  .stretch > details > summary { grid-template-columns: minmax(0, 1fr) 1.25rem; padding: 14px 0 13px; }
  .stretch .name { grid-row: auto; grid-column: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; font-size: 20px; }
  .stretch .name small { margin-top: 0; }
  .stretch .report, .stretch .tally, .stretch .conditions { grid-column: 1 / -1; }
  .c-dry, .c-rain { margin-left: 0; }
  .stretch .report { font-size: 17px; margin-top: 4px; }
  .proof { padding-left: 0; }
  .card { padding-left: 0; }
  .how-list { grid-template-columns: 1fr; gap: 4px; }
  .how-list dd { margin-bottom: 12px; }
  .record-lead { font-size: 19px; }
  .find-row { flex-direction: column; }
  .find-row select { flex: none; }
}

/* Water quality bands, shared by the home page's water line and the water quality page (tests.css). */
/* One ramp for every band, badge and rating: solid fills, no outlines. Light mode runs pale to dark navy; dark mode
   runs dark to bright, so the worst is always the most prominent. Never red or ochre (those mean spilling). */
:root {
  --band0: #dde5ee; --band1: #c6d3e1; --band2: #8ea2ba; --band3: #4a5d78; --band4: #14213d;
  --bandtext0: #14213d; --bandtext1: #14213d; --bandtext2: #14213d; --bandtext3: #ffffff; --bandtext4: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --band0: #1b2840; --band1: #2f4562; --band2: #526b88; --band3: #a6b6ca; --band4: #e7ecf3;
    --bandtext0: #e7ecf3; --bandtext1: #e7ecf3; --bandtext2: #e7ecf3; --bandtext3: #0d1626; --bandtext4: #0d1626;
  }
}
.band.b0, .rating.r-excellent { background: var(--band0); color: var(--bandtext0); }
.band.b1, .rating.r-good { background: var(--band1); color: var(--bandtext1); }
.band.b2, .rating.r-sufficient { background: var(--band2); color: var(--bandtext2); }
.band.b3 { background: var(--band3); color: var(--bandtext3); }
.band.b4, .rating.r-poor { background: var(--band4); color: var(--bandtext4); }
.band { display: inline-block; padding: 0 6px; border-radius: 2px; font-weight: 700; font-size: 14px; line-height: 1.6; white-space: nowrap; }
.wq-line { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--rule); max-width: 56em; font-size: 17px; }
.wq-line > strong:first-child { font-weight: 700; }
.wq-line .band { margin: 0 2px; }
.wq-line a { color: inherit; }