/* ============================================================================
   River Thames Evidence Programme — shared stylesheet (site.css)
   The SINGLE stylesheet for every page. Palette + tokens carried over verbatim
   from the original programme dashboard so all pages read as one system.
   Deploy CSP allows: style-src 'self' 'unsafe-inline'; img-src 'self' data:.
   ========================================================================== */

:root{
  --navy:#0b2545; --navy2:#13315c; --teal:#0f6f7a; --teal-d:#0b565f;
  --river:#2a6f97; --ink:#1a2733; --body:#33424f; --muted:#5c6b78;
  --line:#dce4ec; --line2:#e9eef3; --bg:#f5f8fa; --card:#ffffff;
  --info:#1d5e8c; --info-bg:#e8f1f8;
  --shadow:0 1px 2px rgba(11,37,69,.06),0 3px 10px rgba(11,37,69,.05);
  --shadow-lift:0 2px 4px rgba(11,37,69,.08),0 10px 24px rgba(11,37,69,.10);
  --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased;
}
a{color:var(--river)}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--navy); line-height:1.25; margin:0 0 .5em}
p{margin:0 0 1em}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}

/* Keyboard users get a visible landing spot on every focusable element. */
a:focus-visible,.skip:focus,button:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:4px}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#fff; color:var(--navy); padding:12px 18px; font-weight:600;
  border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0}

/* ---------- Top navigation (links the two zones) ---------- */
nav.topnav{
  background:var(--navy); color:#eaf1f6;
  border-bottom:1px solid rgba(255,255,255,.08);
}
nav.topnav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; min-height:52px; flex-wrap:wrap;
}
nav.topnav .brand{
  display:inline-flex; align-items:center; gap:9px;
  color:#fff; font-weight:700; font-size:.94rem; letter-spacing:-.01em;
  text-decoration:none;
}
nav.topnav .brand svg{display:block; flex:0 0 auto}
nav.topnav .navlinks{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
nav.topnav .navlinks a{
  color:#cfe0ea; text-decoration:none; font-size:.86rem; font-weight:600;
  letter-spacing:.01em; padding:7px 12px; border-radius:999px;
  border:1px solid transparent;
}
nav.topnav .navlinks a:hover{color:#fff; background:rgba(255,255,255,.10); text-decoration:none}
nav.topnav .navlinks a[aria-current="page"]{
  color:#fff; background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.20);
}

/* ---------- Hero ---------- */
header.hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 55%,var(--teal-d) 100%);
  color:#eaf1f6; padding:56px 0 50px;
}
.eyebrow{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:#8fb8c9; margin-bottom:14px; font-weight:600;
}
header.hero h1{
  color:#fff; font-size:2.4rem; letter-spacing:-.02em;
  margin-bottom:.4em; max-width:22ch;
}
header.hero .standfirst,header.hero .mission{
  color:#cfe0ea; font-size:1.08rem; max-width:70ch; margin-bottom:22px;
}
header.hero .meta{display:flex; flex-wrap:wrap; gap:8px 10px; font-size:.82rem}
header.hero .meta span{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  padding:5px 12px; border-radius:999px; color:#eaf1f6;
}

/* ---------- Main / section cards ---------- */
main{padding:36px 0 56px}
section{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:28px 30px; margin:0 0 24px;
}
.kicker{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); font-weight:700; margin:0 0 6px;
}
section>h2{
  font-size:1.5rem; letter-spacing:-.01em; padding-bottom:12px;
  border-bottom:2px solid var(--line2); margin-bottom:18px;
}
.lede{font-size:1.05rem; color:var(--ink)}
section p:last-child{margin-bottom:0}

/* ---------- Stat tiles (big number + label + source line) ---------- */
.tiles{
  display:grid; gap:16px; margin:4px 0 4px; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.tile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px 16px; display:flex; flex-direction:column; min-width:0;
}
.tile .stat{
  color:var(--navy); font-size:2.15rem; line-height:1.05; font-weight:700;
  letter-spacing:-.02em; margin-bottom:8px;
}
.tile .stat .unit{font-size:1.05rem; font-weight:600; color:var(--muted); margin-left:2px}
.tile .stat-label{font-size:.9rem; color:var(--body); margin:0 0 10px}
.tile .src{margin-top:auto}

/* small source / citation line, used under tiles, tables and charts */
.src{
  font-size:.76rem; color:var(--muted); line-height:1.45;
  padding-top:8px; border-top:1px solid var(--line2);
}
.src.plain{border-top:none; padding-top:0}

/* sub-heading inside a section, and a small muted note line */
.subhead{font-size:1.06rem; color:var(--navy); margin:22px 0 8px}
.note{font-size:.82rem; color:var(--muted); line-height:1.5; margin:12px 0 0}
.sourcelist{
  margin:0; padding-left:20px; list-style:disc; display:grid; gap:7px;
  font-size:.84rem; color:var(--muted); line-height:1.5;
}
.sourcelist li strong{color:var(--body)}
.sourcelist code,.note code,table.data code,.caveats code{
  font-size:.92em; background:var(--line2); padding:1px 5px; border-radius:5px; color:var(--ink);
}

/* ---------- Provenance pills ---------- */
.prov{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 7px; border-radius:999px;
  border:1px solid; vertical-align:middle; white-space:nowrap;
}
.prov.raw{color:var(--teal-d); background:#e7f2f2; border-color:#bfe0e0}
.prov.pub{color:var(--info); background:var(--info-bg); border-color:#c9dcec}
.prov.derived{color:#7a5a12; background:#fbf3e0; border-color:#ecdcb4}
.prov.blocked{color:#8a3b3b; background:#f8e9e9; border-color:#e7c6c6}
.prov.gap{color:#5b3a72; background:#f1e9f6; border-color:#dbc9e6}

/* ---------- Figures / inline SVG charts ---------- */
figure.chart{
  margin:6px 0 4px; padding:0; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; background:var(--card);
}
figure.chart .chart-head{padding:16px 20px 4px}
figure.chart .chart-head h3{font-size:1.06rem; margin:0 0 4px}
figure.chart .chart-head p{font-size:.88rem; color:var(--muted); margin:0}
.svg-chart{width:100%; height:auto; display:block; padding:6px 14px 4px}
figure.chart figcaption{
  padding:10px 20px 16px; font-size:.8rem; color:var(--muted);
  border-top:1px solid var(--line2); background:#fbfdfe;
}
figure.chart figcaption strong{color:var(--body)}

/* ---------- Data tables ---------- */
.table-wrap{overflow-x:auto; margin:4px 0; -webkit-overflow-scrolling:touch}
table.data{
  border-collapse:collapse; width:100%; font-size:.9rem;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
table.data caption{
  text-align:left; font-size:.82rem; color:var(--muted);
  padding:0 0 10px; caption-side:top;
}
table.data thead th{
  background:var(--navy); color:#eaf1f6; text-align:left; font-weight:600;
  font-size:.82rem; letter-spacing:.02em; padding:10px 14px; white-space:nowrap;
}
table.data th[scope="row"]{
  background:var(--line2); color:var(--navy); font-weight:700; white-space:nowrap;
}
table.data td{padding:9px 14px; border-top:1px solid var(--line2); color:var(--body)}
table.data td.num,table.data th.num{text-align:right; font-variant-numeric:tabular-nums}
table.data tbody tr:nth-child(even) td{background:#fafcfd}
table.data tbody tr.is-peak td{background:#eef5f5}
table.data tbody tr.is-peak th[scope="row"]{background:#dcecec}

/* ---------- Caveats / "how to read this" box ---------- */
.caveats{
  background:var(--info-bg); border:1px solid #cddff0; border-left:4px solid var(--info);
  border-radius:0 var(--radius) var(--radius) 0; padding:20px 22px; margin:6px 0 0;
}
.caveats h3{font-size:1.06rem; color:var(--navy); margin:0 0 10px}
.caveats p{font-size:.92rem; margin:0 0 .8em}
.caveats ul{margin:0; padding-left:20px; display:grid; gap:8px}
.caveats li{font-size:.92rem; color:var(--body)}
.caveats li strong{color:var(--navy)}
.caveats :last-child{margin-bottom:0}

/* ---------- Ethos principles list (landing page) ---------- */
.principles{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px}
.principles li{
  padding:12px 16px; background:var(--info-bg); border-left:3px solid var(--info);
  border-radius:0 8px 8px 0; font-size:.95rem;
}
.principles strong{color:var(--navy)}

/* ---------- Document cards (zone indexes) ---------- */
.doc-grid{
  display:grid; gap:18px; margin:0; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.doc-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px 20px; transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.doc-card:hover{box-shadow:var(--shadow-lift); border-color:#c2d3e2; transform:translateY(-2px)}
.doc-card:focus-within{box-shadow:var(--shadow-lift); border-color:var(--teal)}
.doc-card h3{font-size:1.1rem; margin:0 0 .45em}
.doc-card h3 a{color:var(--navy); text-decoration:none}
.doc-card h3 a::after{content:""; position:absolute; inset:0; border-radius:var(--radius)}
.doc-card h3 a:hover{text-decoration:underline}
.doc-card p{font-size:.92rem; color:var(--body); margin:0 0 14px}
.doc-card .tag{
  align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; background:var(--teal);
  padding:3px 9px; border-radius:999px; margin-bottom:12px;
}
.doc-card .tag.news{background:var(--river)}
.doc-card .foot{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line2);
  font-size:.8rem; color:var(--muted); display:flex; justify-content:space-between; gap:10px;
}
.doc-card .open{color:var(--river); font-weight:600}

/* ---------- Footer ---------- */
footer.site{
  background:var(--navy); color:#c3d4e0; padding:34px 0 38px; font-size:.88rem;
}
footer.site .wrap>p{margin:0 0 .7em; max-width:80ch}
footer.site strong{color:#fff; font-weight:600}
footer.site a{color:#9ec7dd}
footer.site .rule{height:1px; background:rgba(255,255,255,.14); margin:16px 0}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  header.hero{padding:40px 0 34px}
  header.hero h1{font-size:1.75rem}
  header.hero .standfirst,header.hero .mission{font-size:1rem}
  section{padding:22px 20px}
  section>h2{font-size:1.3rem}
  .doc-grid{grid-template-columns:1fr}
  .tile .stat{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .doc-card{transition:none}
  .doc-card:hover{transform:none}
}

/* ---------- Print (keep pages print-clean) ---------- */
@media print{
  :root{--bg:#fff}
  body{background:#fff; font-size:12pt}
  nav.topnav,.skip{display:none}
  header.hero{background:none; color:var(--navy); padding:0 0 12px; border-bottom:2px solid var(--navy)}
  header.hero h1,.eyebrow,header.hero .standfirst,header.hero .mission{color:var(--navy)}
  header.hero .meta span{border:1px solid var(--line); color:var(--body); background:none}
  main{padding:14px 0}
  section,.tile,figure.chart,.doc-card{box-shadow:none; break-inside:avoid; page-break-inside:avoid}
  table.data thead th{background:#fff; color:var(--navy); border-bottom:2px solid var(--navy)}
  footer.site{background:none; color:var(--body); border-top:1px solid var(--line)}
  footer.site strong,footer.site a{color:var(--navy)}
  a{color:var(--navy)}
}

/* ============================================================================
   Interactive cross-correlation page (correlations.html) — the ONE flagship
   route where inline <script> is allowed. Styling stays in this shared sheet
   (style-src 'self'); classes are namespaced .cx-* so no other page is touched.
   Chart marks themselves are coloured with SVG presentation attributes, not CSS.
   ========================================================================== */
.cx-controls{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:2px 0 12px}
.cx-controls .cx-lab{font-size:.8rem; color:var(--muted); font-weight:600; margin-right:2px}
.cx-toggle{
  font:inherit; font-size:.82rem; font-weight:600; color:var(--navy);
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:6px 13px; cursor:pointer; line-height:1.2;
  display:inline-flex; align-items:center; gap:7px;
}
.cx-toggle:hover{border-color:#c2d3e2; background:#f7fafc}
.cx-toggle[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.cx-toggle .dot{width:11px; height:11px; border-radius:3px; flex:0 0 auto; background:currentColor}
.cx-legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin:2px 2px 12px; font-size:.82rem; color:var(--body)}
.cx-legend span{display:inline-flex; align-items:center; gap:7px}
.cx-legend i{width:14px; height:14px; border-radius:4px; flex:0 0 auto; display:inline-block}
.cx-legend i.ln{height:0; width:20px; border-radius:0; border-top:3px solid}
.cx-legend i.ring{background:#fff !important; border:2px solid}
.cx-legend i.dash{height:0; width:20px; border-radius:0; border-top:2px dashed}
.cx-legend i.band{border-radius:3px}
.cx-legend i.sw-teal{background:var(--teal)}
.cx-legend i.sw-river{background:var(--river)}
.cx-legend i.sw-navy{background:var(--navy)}
.cx-legend i.sw-teald{background:var(--teal-d)}
.cx-legend i.sw-navy2{background:var(--navy2)}
.cx-legend i.sw-stress{background:#f8e9e9; border:1px solid #e7c6c6}
.cx-legend i.sw-window{background:#dbe3ee}
.cx-legend i.ln.lnc-teal{border-top-color:var(--teal)}
.cx-legend i.ring.rc-navy{border-color:var(--navy)}
.cx-legend i.dash.dc-warm{border-top-color:#7a5a12}
.cx-legend i.dash.dc-stress{border-top-color:#8a3b3b}
.cx-hint{font-size:.78rem; color:var(--muted); margin:0 0 10px}
.cx-two{display:grid; gap:20px; grid-template-columns:1fr 1fr; align-items:start}
@media (max-width:820px){.cx-two{grid-template-columns:1fr}}
.cx-tip{
  position:fixed; z-index:60; pointer-events:none; max-width:260px;
  background:var(--ink); color:#eef4f8; border:1px solid rgba(255,255,255,.14);
  padding:9px 12px; border-radius:9px; font-size:.8rem; line-height:1.45;
  box-shadow:var(--shadow-lift); opacity:0; transform:translateY(3px);
  transition:opacity .12s ease, transform .12s ease;
}
.cx-tip.is-on{opacity:1; transform:translateY(0)}
.cx-tip b{color:#fff; display:block; margin-bottom:2px}
.cx-tip .k{color:#9fc7dd; font-weight:600}
figure.chart .cx-controls{padding:12px 20px 0; margin-bottom:6px}
figure.chart .cx-legend{padding:0 20px}
figure.chart .cx-hint{padding:0 20px}
details.cx-data{border-top:1px solid var(--line2); background:#fbfdfe}
details.cx-data>summary{
  cursor:pointer; padding:10px 20px; font-size:.82rem; font-weight:600; color:var(--river); list-style:none;
}
details.cx-data>summary::-webkit-details-marker{display:none}
details.cx-data>summary::before{content:"\25B8\00a0"; color:var(--muted)}
details.cx-data[open]>summary::before{content:"\25BE\00a0"}
details.cx-data .table-wrap{padding:0 16px 14px}
.cx-hit{cursor:pointer}
.cx-hit:focus-visible{outline:3px solid var(--teal); outline-offset:1px}
.cx-noscript{
  margin:0 20px 14px; padding:10px 14px; font-size:.84rem;
  background:var(--info-bg); border:1px solid #cddff0; border-radius:8px; color:var(--body);
}

@media print{
  .cx-controls,.cx-hint,.cx-tip,.cx-noscript{display:none !important}
  .cx-two{grid-template-columns:1fr}
  details.cx-data>summary{display:none}
  details.cx-data .table-wrap{display:block !important; padding:0}
}