/* river.css — /river/{slug} (river.php). Moved out of the page's inline <style> on 2026-09-30, when the page gained
   its Gauges / Tributaries / Sewage tabs (public/river-tabs.js). Light page, like the rest of the classic chrome. */
:root { --rv-text:#1a2332; --rv-muted:#5a6a7e; --rv-border:#e2e8f0; --rv-bg:#f4f7fb; --rv-card:#fff; --rv-accent:#2563eb; --rv-soft:#eef3fc; }
body.rv-body { background: var(--rv-bg); }
.rv { max-width: 960px; margin: 0 auto; padding: 1.25rem 1rem 3rem; color: var(--rv-text); }
.rv-crumbs { font-size: .82rem; color: var(--rv-muted); margin-bottom: 1rem; }
.rv-crumbs a { color: var(--rv-accent); text-decoration: none; }
.rv h1 { font-size: clamp(1.6rem,4vw,2.3rem); font-weight: 800; margin: 0 0 .4rem; letter-spacing: -.02em; }
.rv-sub { color: var(--rv-muted); margin: 0 0 1rem; font-size: .95rem; }
.rv-muted { color: var(--rv-muted); }
.rv-strip { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.2rem; }
.rv-chip { background: var(--rv-card); border: 1px solid var(--rv-border); border-radius: 10px; padding: .55rem 1rem; font-size: .85rem; }
.rv-chip strong { display: block; font-size: 1.25rem; font-weight: 800; }
.rv-chip.rv-alert strong { color: #dc2626; }
.rv-note { background: #fff8ec; border: 1px solid #f2dfa0; border-radius: 10px; padding: .7rem 1rem; font-size: .88rem; margin-bottom: 1.2rem; color: #6b5200; }
.rv-warn { background: #fdf2f2; border: 1px solid #f1c3c3; border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1.2rem; }
.rv-warn h2 { font-size: .95rem; margin: 0 0 .5rem; }
.rv-warn-row { font-size: .88rem; padding: .25rem 0; }
.rv-sev { display: inline-block; font-size: .66rem; font-weight: 800; color: #fff; border-radius: 999px; padding: .12rem .55rem; margin-right: .4rem; vertical-align: middle; }
.rv-sev-1 { background: #7c1d1d; } .rv-sev-2 { background: #dc2626; } .rv-sev-3 { background: #e67e22; }
.rv-card { background: var(--rv-card); border: 1px solid var(--rv-border); border-radius: 14px; padding: 1.1rem 1.3rem; margin-bottom: 1rem; }
.rv-card h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .3rem; }
.rv-card .rv-cat-meta, .rv-cat-meta { font-size: .8rem; color: var(--rv-muted); margin: 0 0 .6rem; }
.rv-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rv-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rv-muted); padding: .4rem .5rem; border-bottom: 2px solid var(--rv-border); }
.rv-table td { padding: .5rem; border-bottom: 1px solid var(--rv-border); vertical-align: middle; }
.rv-table tr:last-child td { border-bottom: none; }
.rv-table a { color: var(--rv-accent); text-decoration: none; font-weight: 600; }
.rv-table td.rv-name a { display: inline-block; padding: .55rem 0; }   /* a 44 px tap target with the cell's own padding */
.rv-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-pill { display: inline-block; font-size: .68rem; font-weight: 800; border-radius: 999px; padding: .16rem .6rem; white-space: nowrap; }
.rv-pill.normal { background: #eafaf1; color: #1e7a45; }
.rv-pill.warning { background: #fff3e0; color: #b35c00; }
.rv-pill.danger { background: #fdecea; color: #c0392b; }
.rv-pill.low { background: #f0f3f6; color: #66788c; }
.rv-badge { display: inline-block; font-size: .64rem; font-weight: 700; color: #66788c; background: #f0f3f6; border-radius: 999px; padding: .1rem .5rem; margin-left: .35rem; }
.rv-badge-est { color: #7a5b00; background: #fff5d6; }
.rv-badge-water { color: #1d4f91; background: #e6f0fd; }
.rv-age { font-size: .72rem; color: var(--rv-muted); }
.rv-links { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.rv-links a { font-size: .85rem; font-weight: 700; text-decoration: none; padding: .55rem 1.1rem; border-radius: 99px; background: var(--rv-soft); color: var(--rv-accent);
    min-height: 44px; display: inline-flex; align-items: center; }
.rv-flow-hint { font-size: .74rem; color: var(--rv-muted); margin: .6rem 0 0; line-height: 1.5; }
.rv-flow-hint a { color: var(--rv-accent); }

/* Tabs. Without JavaScript they are in-page links and every panel shows, one after another. */
.rv-tabs { display: flex; gap: .25rem; margin: 0 0 1rem; border-bottom: 2px solid var(--rv-border); }
.rv-tab { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .45rem 1rem;
    font-weight: 700; font-size: .95rem; color: var(--rv-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.rv-tab:hover { color: var(--rv-text); }
.rv-tab[aria-selected="true"] { color: var(--rv-accent); border-bottom-color: var(--rv-accent); }
.rv-tab:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; border-radius: 6px; }
.rv-tab-n { font-size: .72rem; font-weight: 800; background: var(--rv-soft); color: var(--rv-accent); border-radius: 999px; padding: .05rem .45rem; }
.rv-panel { scroll-margin-top: 1rem; }
.rv-panel-h { font-size: 1.2rem; font-weight: 800; margin: 1.4rem 0 .6rem; }
.rv-js .rv-panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the tab names it */
.rv-lede { font-size: .9rem; color: #34495e; line-height: 1.55; margin: 0 0 .9rem; }
.rv-note-sm { font-size: .82rem; color: var(--rv-muted); line-height: 1.5; margin: .5rem 0; }
.rv-note-sm a { color: var(--rv-accent); }
.rv-sub-h { font-size: .98rem; font-weight: 800; margin: 1.2rem 0 .3rem; }

/* Gauges tab: the connector between two gauges. */
.rv-chain .rv-link td, .rv-table-compact .rv-link td { padding: .1rem .5rem .1rem 1.1rem; font-size: .76rem; color: var(--rv-muted); border-bottom: none; line-height: 1.4; }
.rv-chain tr:has(+ .rv-link) td, .rv-table-compact tr:has(+ .rv-link) td { border-bottom: none; }
.rv-link .rv-arrow { display: inline-block; width: 1em; text-align: center; font-weight: 800; color: var(--rv-accent); }
.rv-link-disputed td { color: #7a5b00 !important; }
.rv-link-disputed .rv-arrow, .rv-link-branch .rv-arrow { color: #7a5b00; }
.rv-link-unknown td { font-style: italic; }
.rv-other { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--rv-border); }
.rv-other h3 { font-size: .95rem; margin: 0 0 .2rem; }
.rv-where td { font-size: .78rem; color: var(--rv-muted); padding-top: 0; }
.rv-same { margin-top: -.2rem; }

/* Tributaries tab */
.rv-trib { border-top: 1px solid var(--rv-border); padding: .8rem 0 .4rem; }
.rv-trib:first-of-type { border-top: none; }
.rv-trib h3 { font-size: 1rem; margin: 0 0 .15rem; }
.rv-trib h3 a { color: var(--rv-text); text-decoration: none; border-bottom: 1px solid #c9d5e6; display: inline-block; padding: .35rem 0; }
.rv-trib-where { font-size: .86rem; margin: 0 0 .4rem; line-height: 1.5; }
.rv-trib-where a, .rv-trib-scope a, .rv-subtrib a, .rv-flows a { color: var(--rv-accent); text-decoration: none; font-weight: 600; }
.rv-trib-scope { font-size: .78rem; color: var(--rv-muted); margin: .3rem 0 0; line-height: 1.45; }
.rv-table-compact td { padding: .35rem .5rem; }
.rv-subtrib { margin: .5rem 0 .2rem; padding: .5rem .8rem; background: #f7f9fc; border-radius: 10px; }
.rv-subtrib h4 { font-size: .8rem; margin: 0 0 .3rem; color: var(--rv-muted); text-transform: uppercase; letter-spacing: .03em; }
.rv-subtrib ul { margin: 0; padding-left: 1rem; }
.rv-subtrib li { font-size: .84rem; line-height: 1.55; margin: .35rem 0; }
.rv-flows { margin-top: .9rem; padding: .7rem .9rem; background: var(--rv-soft); border-radius: 10px; }
.rv-flows h3 { font-size: .9rem; margin: 0 0 .2rem; }
.rv-flows p { font-size: .86rem; margin: 0; line-height: 1.5; }

/* Sewage tab */
.rv-sum p { font-size: .9rem; line-height: 1.55; margin: 0 0 .5rem; }
.rv-sum a { color: var(--rv-accent); text-decoration: none; font-weight: 600; }
.rv-sum-counts { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.rv-sum-counts li { font-size: .82rem; background: #f3f5f8; border-radius: 8px; padding: .35rem .65rem; }
.rv-sum-counts li.rv-sum-dis { background: #fdecea; color: #8a1c12; }
.rv-reach { border: 1px solid var(--rv-border); border-radius: 10px; margin: .45rem 0; background: #fff; }
.rv-reach-trib { margin-left: 1.1rem; border-left: 3px solid #c9d5e6; }
.rv-reach-sub { margin-left: 2.2rem; }
.rv-reach-cap { display: block; font-weight: 500; font-size: .74rem; color: var(--rv-muted); }
.rv-reach > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem .8rem;
    min-height: 44px; padding: .45rem .8rem; font-size: .9rem; }
.rv-reach > summary::-webkit-details-marker { display: none; }
.rv-reach > summary::before { content: '▸'; color: var(--rv-muted); margin-right: .1rem; }
.rv-reach[open] > summary::before { content: '▾'; }
.rv-reach-name { font-weight: 700; flex: 1 1 12rem; }
.rv-reach-n { font-size: .78rem; color: var(--rv-muted); white-space: nowrap; }
.rv-reach-dis { color: #b42318; }
.rv-ovl { list-style: none; margin: 0; padding: 0 .8rem .3rem; }
.rv-ovl li { padding: .1rem 0 .45rem; border-top: 1px solid #f1f4f8; overflow-wrap: anywhere; line-height: 1.35; }
.rv-ovl li > a { color: var(--rv-accent); font-weight: 700; text-decoration: none; display: inline-block; padding: .6rem 0 .15rem; }
.rv-ovl small { font-size: .78rem; color: var(--rv-muted); }
.rv-ovl small b { color: #34495e; }
.rv-ovs { display: inline-block; font-style: normal; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .08rem .5rem; margin-left: .2rem;
    white-space: nowrap; vertical-align: 1px; background: #eef2f6; color: #475467; }
.rv-ovs.s-discharging { background: #fdecea; color: #b42318; }
.rv-ovs.s-unknown, .rv-ovs.s-offline, .rv-ovs.s-nofeed { background: #fff; color: #667085; border: 1px dashed #c3cad4; }
.rv-tag { display: inline-block; font-style: normal; font-size: .64rem; font-weight: 700; color: #1d4f91; background: #e6f0fd; border-radius: 999px; padding: .06rem .45rem; margin-left: .25rem; }
.rv-attr { font-size: .7rem; color: #8492a3; line-height: 1.5; margin: .4rem 0 0; }

@media (max-width: 640px) {
    .rv { padding: 1rem 16px 2.5rem; }
    .rv-table .rv-hide-sm { display: none; }
    .rv-card { padding: .9rem .9rem; }
    .rv-tabs { gap: 0; flex-wrap: wrap; }   /* four tabs do not fit one phone row: the last wraps, full width */
    .rv-tab { flex: 1 1 auto; padding: .45rem .5rem; font-size: .9rem; }
    .rv-reach-trib { margin-left: .5rem; }
    .rv-reach-sub { margin-left: 1rem; }
    .rv-ovl { padding: 0 .6rem .3rem; }
}
.rv-more { font-size: .8rem; color: var(--rv-muted); margin: 0; padding: .1rem .8rem .6rem; line-height: 1.5; }
.rv-more a { color: var(--rv-accent); font-weight: 600; text-decoration: none; display: inline-block; padding: .55rem 0; }

/* Water quality tab (the body is includes/water-quality-render.php; public/water-quality.css styles its parts) */
#water-quality .wq-sys { background: var(--rv-card); border: 1px solid var(--rv-border); border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
#water-quality .wq-sys-h { font-size: 1.05rem; font-weight: 800; margin: 0 0 .4rem; }
#water-quality .wq-stretch-c { display: block; flex-basis: 100%; font-size: .74rem; font-weight: 500; color: var(--rv-muted); }
#water-quality .wq-more-a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; }
#water-quality .wq-table-stretch small { display: block; font-size: .76rem; color: var(--rv-muted); line-height: 1.35; }
#water-quality .wq-table-stretch td { vertical-align: top; }
#water-quality .wq-table-stretch td.num small { margin-top: -.5rem; }
@media (max-width: 640px) { #water-quality .wq-sys { padding: .85rem .8rem; } }
.rv-trib-c { padding: .55rem 0 .35rem; }
.rv-trib-c h3 { margin: 0; }
.rv-trib-c .rv-trib-where { margin: 0; }
.rv-trib-c .rv-trib-where a { display: inline-block; padding: .3rem 0; }
.rv-pill.old { background: #f3f4f6; color: #6b7280; font-weight: 700; }
/* Tributaries tab: streams without a gauge, each with its /stream/ page (includes/stream-pages.php stpRiverTributariesHtml()) */
.rv-ungauged-list { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
.rv-ungauged-list li { padding: .15rem 0; line-height: 1.4; }
.rv-ungauged-list a { color: var(--rv-accent); font-weight: 600; text-decoration: none; display: inline-block; padding: .3rem 0; }
.rv-ungauged-list small { color: var(--rv-muted); font-size: .76rem; }
.rv-ungauged h3 { font-size: .95rem; font-weight: 800; margin: .15rem 0 .3rem; }