/* The dashboard's styles, after the original dashboard (Reference/ReferenceImages). */

:root {
  --page: #ece9a6;         /* pale yellow background, also the current tab */
  --bar: #4b8587;          /* the teal bars at the top and bottom */
  --brand: #3c8a8c;        /* "Catchment Catalyst" */
  --text: #1f1f1f;
  --yellow: #d8c54d;       /* tabs and text panels */
  --navy: #2c3e8f;         /* classification and risk panels */
  --navy-light: #4058bb;   /* EA scoring headings */
  --dark: #333333;         /* catchment name, ranking and table headings */
  --green: #8db95d;
  --green-light: #a8cd87;
  --purple: #9b70d4;
  --purple-light: #b192e0;
  --pink: #d27b80;
  --pink-light: #e2a0a3;
  --sky: #8fb1f1;
  --sky-light: #b2c9f5;
  --clay: #d58b5c;
  --clay-light: #e8bb9a;

  /* EA classification statuses. map.js colours the maps with these too. */
  --status-high: #5b80e3;
  --status-good: #7cbd4f;
  --status-supports-good: #7cbd4f;
  --status-not-high: #7cbd4f;
  --status-moderate: #f0d13c;
  --status-moderate-or-less: #f0d13c;
  --status-does-not-support-good: #f0d13c;
  --status-poor: #e9993b;
  --status-bad: #bf2228;
  --status-fail: #bf2228;
  --status-none: #d2d2d2;

  /* Risk levels, on the Risk Levels tiles */
  --risk-very-high: #bf2228;
  --risk-high: #e6993b;
  --risk-medium: #f0d13c;
  --risk-low: #95cf62;
  --risk-very-low: #5f9f45;
}
* { box-sizing: border-box; }
body {
  display: flex; flex-direction: column; min-height: 100vh;
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* The four views, as cards across the top of every page */
.views { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; padding: 16px 16px 24px; }
.view-card {
  display: flex; flex-direction: column; align-items: center; width: 216px; padding: 22px 14px 24px;
  border: 1px solid #ddd; background: #f8f8f8; color: #222; text-align: center; text-decoration: none;
}
.view-card:hover { border-color: #999; }
.view-card[aria-current="page"] { background: #d4d4d4; }
.view-card img { width: 179px; max-width: 100%; height: auto; margin-bottom: 18px; }
.view-card strong { margin-bottom: 10px; font: 700 1.55rem/1.15 Arial, Helvetica, sans-serif; }
.view-card span { font: .9rem/1.6 Arial, Helvetica, sans-serif; }

/* The dashboard's frame: the teal bars at the top and bottom, and the pale yellow inside */
.dashboard {
  display: flex; flex-direction: column; flex: 1 0 auto;
  background: var(--page); border-top: 12px solid var(--bar); border-bottom: 12px solid var(--bar);
}

/* The location's text under a dashboard, laid out as on the original (UnderWaterbodyDashboard.jpg):
   an introduction (on the Waterbody Dashboard, in a grey box), "Understanding the dashboard",
   then a section for each part, which opens and closes. text.py makes the HTML. */
.about {
  width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px 16px 8px;
  font: 1rem/1.55 Arial, Helvetica, sans-serif;  /* as on the original's page, like the cards at the top */
}
.about p, .about ul { margin: 0 0 14px; }
.about ul ul { margin: 4px 0 0; }
.about li + li { margin-top: 4px; }
.about h2 { margin: 30px 0 8px; font-size: 1.75rem; line-height: 1.25; }
.about h4 { margin: 20px 0 8px; font-size: 1.05rem; }
.about blockquote { margin: 0 0 24px; padding: 16px 20px; background: #d9d9d9; }
.about details { margin: 0 0 2px; background: #f3f3f3; }
.about summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  color: #9a9a9a; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; list-style: none;
}
.about summary::-webkit-details-marker { display: none; }
.about summary::after { content: "+"; color: #b0b0b0; font-size: 1.3rem; line-height: 1; }
.about details[open] > summary { color: #333; }
.about details[open] > summary::after { content: "\2212"; }  /* a minus sign */
.about summary:hover { color: #333; }
.about .section-body { padding: 6px 16px 4px; }
blockquote { margin: 0 0 14px; padding: 12px 16px; background: rgba(0, 0, 0, .1); }
blockquote > :last-child { margin-bottom: 0; }

/* Header: the name, the tabs, and a space for the location's logo */
.site-header { display: flex; align-items: flex-end; gap: 12px; padding: 16px 16px 0; background: #fff; }
.brand {
  flex: 0 0 auto; margin: 0 auto 12px 0;
  color: var(--brand); font-size: 2.6rem; font-weight: 700; line-height: 1.1; text-decoration: none;
}
.tabs { display: flex; flex: 0 1 auto; gap: 12px; min-width: 0; }
.tabs a {
  display: flex; flex: 0 1 auto; align-items: center; justify-content: center;
  width: 200px; height: 64px; padding: 0 12px; background: var(--yellow);
  font-size: 1.35rem; text-align: center; text-decoration: none; white-space: nowrap;
}
.tabs a:hover { background: #e3d36a; }
.tabs a[aria-current="page"] { background: var(--page); }
.logo { flex: 0 1 210px; }
.dashboard main { flex: 1 0 auto; padding: 8px; }
.site-footer { padding: 8px 16px; background: var(--bar); color: #fff; font-size: .8rem; }

/* Panels */
.panel { min-width: 0; padding: 8px 12px 12px; border-radius: 10px; }
.head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.head h2 { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.yellow { background: var(--yellow); }
.navy { background: var(--navy); color: #fff; }
.dark { background: var(--dark); color: #fff; }
.white { background: #fff; }
.green { background: var(--green); --row: var(--green-light); }
.purple { background: var(--purple); --row: var(--purple-light); }
.pink { background: var(--pink); --row: var(--pink-light); }
.sky { background: var(--sky); --row: var(--sky-light); }
.clay { background: var(--clay); --row: var(--clay-light); }
.grid { display: grid; gap: 8px; }
.text { font-size: .95rem; }
.text p, .text ul { margin: 0 0 .6em; }
.text ul { padding-left: 1.2em; }
.partial { font-size: .8rem; font-weight: 400; opacity: .85; white-space: nowrap; }
.scroll { overflow-x: auto; }
.map-box { height: 300px; margin-bottom: 10px; border-radius: 6px; background: rgba(255, 255, 255, .35); }

/* The "i" buttons, and the box each one opens */
.info {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: auto; padding: 0;
  border: 2.5px solid currentColor; border-radius: 50%; background: none;
  color: inherit; font: 700 16px/1 Georgia, "Times New Roman", serif;
}
button.info { cursor: pointer; }
span.info { opacity: .4; }
.info-box {
  max-width: min(440px, calc(100vw - 32px)); padding: 16px 20px;
  border: 0; border-radius: 10px; background: #fff; color: var(--text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}
.info-box::backdrop { background: rgba(0, 0, 0, .2); }
.info-box h3 { margin: 0 0 8px; }
.info-box p, .info-box ul { margin: 0 0 10px; }
.info-box ul { padding-left: 20px; }
.info-box > :last-child { margin-bottom: 0; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: 3px 8px; text-align: left; vertical-align: top; font-weight: 400; }
thead th { border-bottom: 2px solid rgba(0, 0, 0, .3); vertical-align: bottom; }
/* :where() keeps this weak, so the status colours win */
:where(.panel tbody) :is(td, th) { background: var(--row, transparent); border-bottom: 1px solid rgba(255, 255, 255, .45); }
tfoot th, tfoot td { border-top: 1px solid rgba(0, 0, 0, .3); font-weight: 700; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Sortable tables (sort.js): the headings become buttons, with an arrow */
th button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
th button::after { content: "↕"; margin-left: 6px; opacity: .35; }
th[aria-sort="ascending"] button::after { content: "▲"; opacity: 1; font-size: .8em; }
th[aria-sort="descending"] button::after { content: "▼"; opacity: 1; font-size: .8em; }

/* Statuses: map key, classification boxes and EA scores */
.status-high { background: var(--status-high); }
.status-good { background: var(--status-good); }
.status-supports-good { background: var(--status-supports-good); }
.status-not-high { background: var(--status-not-high); }
.status-moderate, .status-moderate-or-less, .status-does-not-support-good { background: var(--status-moderate); }
.status-poor { background: var(--status-poor); }
.status-bad { background: var(--status-bad); color: #fff; }
.status-fail { background: var(--status-fail); color: #fff; }
.status-none { background: var(--status-none); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 0 0 6px; }
.legend > span { display: inline-flex; align-items: center; gap: 4px; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }

/* The postcode search (postcode.js), under the map panel's heading. What it found goes
   beside the Go button, or below it if there isn't room. */
.postcode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.postcode input {
  flex: 0 1 6.5em; min-width: 0; padding: 5px 8px; border: 1px solid #999; border-radius: 4px;
  font: inherit; text-transform: uppercase;
}
.postcode button {
  padding: 5px 14px; border: 1px solid var(--dark); border-radius: 4px; background: var(--dark);
  color: #fff; font: inherit; cursor: pointer;
}
.postcode button:hover { background: #000; }
.postcode-message { flex: 1 1 9em; min-width: 0; margin: 0; font-size: .9rem; line-height: 1.3; }
.postcode-message:empty { display: none; }

/* The catchments by name (catchment-list.js), with its A to Z / By area switch beside it,
   or below it if there isn't room */
.catchment-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.catchment-list select {
  flex: 1 1 12em; min-width: 0; padding: 5px 6px; border: 1px solid #999; border-radius: 4px;
  background: #fff; color: var(--text); font: inherit; font-size: .95rem;
}
.list-order { display: flex; flex: 0 0 auto; }
.list-order label {
  position: relative; padding: 4px 9px; border: 1px solid var(--dark); font-size: .85rem;
  white-space: nowrap; cursor: pointer;
}
.list-order label:first-child { border-radius: 4px 0 0 4px; }
.list-order label + label { border-left: 0; border-radius: 0 4px 4px 0; }
.list-order label:has(input:checked) { background: var(--dark); color: #fff; }
.list-order label:has(input:focus-visible) { outline: 2px solid var(--navy-light); outline-offset: 2px; }
.list-order input { position: absolute; opacity: 0; pointer-events: none; }

/* Maps (map.js) */
.map { height: 360px; background: #fff; }
.map:not([data-links]) path.leaflet-interactive { cursor: inherit; }  /* catchments that can't be clicked */
.map-message { padding: 16px; }
.leaflet-container { font: inherit; background: #fff; }

/* ---------------------------------------------------------------------------
   Overview
   --------------------------------------------------------------------------- */
.overview {
  grid-template-columns: minmax(0, 683fr) minmax(0, 298fr) minmax(0, 697fr);
  grid-template-areas: "intro intro map" "photo counts map" "using using map";
}
.intro { grid-area: intro; min-height: 230px; }
.photo { grid-area: photo; min-height: 300px; border: 2px solid var(--dark); background: rgba(255, 255, 255, .35); }
.counts { grid-area: counts; border: 2px solid var(--dark); }
.counts .head h2 { font-weight: 400; }
.counts tbody tr:nth-child(even) td { background: #ececec; }
.using { grid-area: using; min-height: 260px; }
.overview-map { grid-area: map; display: flex; flex-direction: column; }
.overview-map .head h2 { font-weight: 400; }
.overview-map .map { flex: 1 1 auto; min-height: 520px; }

/* ---------------------------------------------------------------------------
   The catchment tabs: the side column and the catchment's name
   --------------------------------------------------------------------------- */
.catchment-page { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 3fr); gap: 8px; }
.side, .main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Sized to the panel (cqi: 1% of its width), so the heading fits on one line on most screens,
   but no smaller than the footer's text: it wraps instead on narrower ones. */
.map-panel { container-type: inline-size; }
.map-panel .head h2 { font-size: clamp(.8rem, 3.6cqi, 1.05rem); font-weight: 400; }
.ranking .head h2 { font-size: clamp(1.3rem, 1.6vw, 1.75rem); }
.ranking p { margin: 0; font-size: .9rem; }
.classification .head { justify-content: center; }
.years { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.years li {
  display: flex; flex-direction: column; align-items: center; min-height: 66px;
  padding: 8px 4px; border: 1px solid var(--navy); color: var(--text); font-size: 1.15rem;
}
.years strong { font-size: 1.2rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.small { min-height: 140px; }
.small .head h2 { font-size: 1.05rem; }
.list { margin: 0; padding: 0; list-style: none; font-size: .85rem; line-height: 1.35; }
.title-bar {
  margin: 0; padding: 8px 16px; border-radius: 10px;
  background: var(--dark); color: #fff; font-size: 2.6rem; line-height: 1.2; text-align: center;
}
.title-bar.none { font-size: 1.6rem; font-weight: 400; line-height: 1.95; }

/* Risk Levels tiles */
.risks-panel .head { justify-content: center; }
.risks-panel .head h2 { margin-left: auto; font-size: 1.5rem; font-weight: 400; }
.risks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.risks li {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 66px; padding: 4px; border-radius: 6px; background: rgba(255, 255, 255, .14); text-align: center;
}
.risk-level { min-height: 1.3em; font-size: 1.6rem; line-height: 1.3; }
.risks li:not(.risk-none) { color: var(--text); }
.risks li.risk-very-high { background: var(--risk-very-high); color: #fff; }
.risks .risk-high { background: var(--risk-high); }
.risks .risk-medium { background: var(--risk-medium); }
.risks .risk-low { background: var(--risk-low); }
.risks .risk-very-low { background: var(--risk-very-low); }

/* River Status */
.river-status {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(370px, auto) minmax(370px, auto);
  grid-template-areas: "why now risks" "hypothesis interventions interventions";
}
.why { grid-area: why; }
.now { grid-area: now; }
.river-status .risks-panel { grid-area: risks; }
.hypothesis { grid-area: hypothesis; }
.interventions { grid-area: interventions; }
.interventions thead th { background: var(--dark); color: #fff; border: 0; padding: 6px 8px 22px; }
.interventions .group th { padding-top: 8px; background: #fff; font-weight: 700; }
.interventions tbody td { background: #ececec; border-bottom: 1px solid #fff; }
.interventions tbody td + td { border-left: 1px solid #9aa9e0; }
.why .head h2, .now .head h2, .hypothesis .head h2 { font-size: 1.05rem; }
.why .text, .now .text, .hypothesis .text { max-height: 340px; overflow-y: auto; padding-right: 6px; }

/* EA Data */
.scoring { padding-bottom: 40px; }
.scoring .head h2 { font-size: 1.35rem; }
.scoring table { border: 2px solid #fff; }
.scoring th, .scoring td { border: 1px solid rgba(255, 255, 255, .25); text-align: right; }
.scoring thead th { background: var(--navy-light); color: #fff; text-align: left; }
.scoring thead .group { text-align: center; }
.scoring .item { width: 22%; text-align: left; }
.scoring tbody th.item { background: var(--navy-light); color: #fff; }
.scoring tbody td { color: var(--text); white-space: nowrap; }
:where(.scoring tbody) td, :where(.years) li { background: var(--status-none); }  /* statuses with no colour of their own */
.scoring .first-threshold { border-left: 6px solid #fff; }

/* Land Use Data */
.land-use {
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 2.6fr);
  grid-template-areas:
    "info info risks obstacles"
    "habitat habitat risks obstacles"
    "farms phosphate phosphate obstacles"
    "livestock phosphate phosphate obstacles";
}
.river-info { grid-area: info; min-height: 220px; }
.habitat { grid-area: habitat; min-height: 210px; }
.land-use .risks-panel { grid-area: risks; }
.land-use .risks { grid-template-columns: 1fr; }
.obstacles { grid-area: obstacles; }
.obstacles .scroll { max-height: 420px; overflow-y: auto; }
.discharges .total { font-weight: 700; }
.farms { grid-area: farms; }
.livestock { grid-area: livestock; min-height: 220px; }
.land-use .phosphate { grid-area: phosphate; }
.details thead th { background: var(--dark); color: #fff; border: 0; }
.details tbody th, .details tbody td { border-bottom: 1px solid #d8d8d8; }
.details tbody th { width: 40%; border-right: 1px solid #d8d8d8; }
.details tbody td { text-align: right; }

/* Sewerage Data */
.sewerage {
  grid-template-columns: minmax(0, 542fr) minmax(0, 320fr) minmax(0, 407fr);
  grid-template-areas:
    "intermittent intermittent outlets"
    "discharges discharges outlets"
    "discharges discharges properties"
    "continuous phosphate risks"
    "plans plans plans";
}
.intermittent { grid-area: intermittent; min-height: 70px; }
.intermittent .head h2, .continuous .head h2 { font-size: 1.05rem; }
.discharges { grid-area: discharges; min-height: 300px; }
.outlets { grid-area: outlets; }
.outlets .map-box { height: 220px; background: #eee; }
.properties { grid-area: properties; }
.properties dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 6px; margin: 0; }
.properties dt { font-weight: 700; }
.properties dd { margin: 0; }
.continuous { grid-area: continuous; min-height: 130px; }
.intermittent .text, .continuous .text { max-height: 130px; overflow-y: auto; }
.sewerage .phosphate { grid-area: phosphate; }
.sewerage .risks-panel { grid-area: risks; }
.plans { grid-area: plans; min-height: 200px; }

/* ---------------------------------------------------------------------------
   The Catchment Dashboard: one big map, with the panels laid over it
   --------------------------------------------------------------------------- */
.catchment-dashboard {
  display: grid; gap: 12px; min-height: 780px; padding: 12px; overflow: hidden;
  border-radius: 10px; background: #fff;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(0, 300px) minmax(0, 380px);
  grid-template-rows: auto minmax(24px, 1fr) auto;
}
.catchment-dashboard > .map { grid-area: 1 / 1 / -1 / -1; z-index: 0; height: auto; margin: -12px; }
.catchment-dashboard > :not(.map) { z-index: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.catchment-dashboard .leaflet-top.leaflet-left { left: 290px; }
.cd-areas { grid-area: 1 / 1 / 2 / 2; align-self: start; }
.cd-areas h2 { margin: 0 0 6px; font-size: 1rem; font-weight: 400; }
.area-buttons { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.area-buttons:last-child { margin-bottom: 0; }
.area-buttons a {
  display: block; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff;
  font-size: .9rem; text-decoration: none;
}
.area-buttons a:hover { border-color: #666; }
.area-buttons a[aria-current="page"] { border-color: #222; background: #222; color: #fff; }
.cd-counts { grid-area: 3 / 1 / 4 / 2; align-self: end; padding: 6px; }
.cd-counts thead th { font-weight: 700; }
.cd-counts tbody td { border-bottom: 1px solid #fff; }
.cd-story { grid-area: 1 / 3 / 2 / 5; min-height: 420px; }
.story-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-bottom: 10px; }
.story-buttons button {
  min-width: 120px; padding: 6px 10px; border: 1px solid #555; background: #ece7a0;
  color: var(--text); font: inherit; font-size: .88rem; line-height: 1.25; cursor: pointer;
}
.story-buttons button[aria-selected="true"] { background: var(--dark); color: #fff; }
.cd-story .text { max-height: 360px; overflow-y: auto; }
.tabs-ready .tab-title { display: none; }
.tab-title { margin: 0 0 6px; font-size: 1.05rem; }
.cd-figures {
  grid-area: 3 / 3 / 4 / 4; align-self: end;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; box-shadow: none !important;
}
.pill { margin: 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.cd-habitat { grid-area: 3 / 4 / 4 / 5; align-self: end; }
.cd-habitat .scroll { max-height: 180px; overflow-y: auto; }

/* ---------------------------------------------------------------------------
   Intervention Management and Catchment Insights: focus areas (placeholders)
   --------------------------------------------------------------------------- */
.focus-view { flex: 1 0 auto; width: 100%; max-width: 1000px; margin: 0 auto; padding: 8px 16px 40px; }
.under-development { margin: 0 0 18px; padding: 6px; background: #72b88f; font-weight: 700; text-align: center; }
.focus-heading { margin: 0 0 26px; font: 700 1.6rem/1.3 Arial, Helvetica, sans-serif; text-align: center; }
.focus-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 30px; }
.intervention-management .focus-buttons { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.focus-buttons button, .detail-buttons button {
  min-height: 54px; padding: 8px 14px; border: 1px solid #1d1d1d; border-radius: 28px;
  background: #1d1d1d; color: #fff; cursor: pointer;
  font: 700 .72rem/1.7 Arial, Helvetica, sans-serif; letter-spacing: .22em; text-transform: uppercase;
}
.focus-buttons button[aria-selected="true"], .detail-buttons button[aria-selected="true"] { background: #fff; color: #1d1d1d; }
.detail-buttons button[aria-selected="true"] { border-width: 2px; background: transparent; }
[data-tabs]:not(.tabs-ready) [role="tablist"] { display: none; }
.focus-panel { margin-bottom: 16px; padding: 8px 16px 16px; background: #ddd27b; }
.focus-panel h2 { margin: 0 0 8px; font: 700 1.5rem/1.3 Arial, Helvetica, sans-serif; }
.focus-body { padding: 16px; background: #f5f6f8; }
.focus-body p, .focus-body ul { margin: 0 0 12px; }
.focus-body > :last-child { margin-bottom: 0; }
.placeholder { color: #555; font-style: italic; }

/* ---------------------------------------------------------------------------
   Intervention Management, laid out as on the North Devon Biosphere's pages
   --------------------------------------------------------------------------- */
.focus-view.intervention-management { max-width: 1200px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; }
.intervention-management .focus-panel { padding: 4px 10px 20px; background: #e9cf76; }
.intervention-management .focus-panel > h2 { margin: 6px 0 14px; font-size: 1.85rem; }
.intervention-management .focus-body { margin-top: 20px; padding: 20px; background: #f4f7f8; line-height: 1.6; }
.intervention-management .focus-panel > h2 + .focus-body { margin-top: 0; }
.intervention-management .focus-body h2, .intervention-management .focus-body h3 { margin: 0 0 4px; font-size: 1rem; }
.intervention-management .focus-body ul { padding-left: 32px; }
.intervention-management .focus-body p { margin: 0 0 6px; }
/* Intervention Summary and Community Action: on white, with no boxes */
.intervention-management #intervention-summary, .intervention-management #community-action { padding: 4px 0 20px; background: none; line-height: 1.6; }

/* ---------------------------------------------------------------------------
   Catchment Insights, laid out as on the North Devon Biosphere's pages
   --------------------------------------------------------------------------- */
.focus-view.catchment-insights { max-width: 1200px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; }
.catchment-insights .focus-panel { padding: 4px 0 10px; background: none; }
.catchment-insights .focus-panel > h2 { margin: 6px 0 18px; font-size: 1.85rem; }
.insight-group { margin-bottom: 30px; padding: 20px; background: #3387a2; }
.insight-group h3 { margin: 0 0 20px; color: #232323; font-size: 1.5rem; line-height: 1.3; }
.questions { background: #e0e0e0; }
.question summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px;
  color: #8a8a8a; font-size: .95rem; text-transform: uppercase; cursor: pointer; list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: "+"; flex: none; color: #b0b0b0; font-size: 1.4rem; line-height: 1; }
.question[open] > summary::after { content: "\2212"; }  /* a minus sign */
.question .answer { padding: 10px 20px 20px; background: #fafafa; line-height: 1.6; }
.question .answer:empty { padding: 4px 20px; }
.question .answer > :last-child { margin-bottom: 0; }

.scroll-x { overflow-x: auto; }
.intervention-table, .intervention-overview { margin: 0 0 16px; background: #fff; font: .875rem/1.4 Arial, Helvetica, sans-serif; }
.intervention-table th, .intervention-table td { padding: 8px; border: 1px solid #999; vertical-align: middle; }
.intervention-table thead th { background: #0066cc; color: #fff; font-weight: 700; }
.intervention-table tbody tr:nth-child(even) { background: #f5f5f5; }
.intervention-table .c { text-align: center; }
.intervention-table a { color: inherit; }
.summary-table .part th { background: #d9eaf7; font-weight: 700; }
.summary-table .total th { background: #e8f4e8; font-weight: 700; }
.summary-table td:first-child { width: 48%; }
.intervention-overview th, .intervention-overview td { padding: 10px; border: 1px solid #ccc; vertical-align: top; }
.intervention-overview thead th { padding: 12px; background: #005a9c; color: #fff; font-weight: 700; }
.intervention-overview tbody tr:nth-child(odd) { background: #f7f7f7; }
.intervention-overview tbody th { width: 30%; font-weight: 700; }
.intervention-management .focus-body .intervention-title { margin: 0 0 12px; font-size: 1.6rem; line-height: 1.3; }
.intervention h4 { margin: 18px 0 6px; font-size: 1rem; }
.intervention h4.group { margin-top: 26px; color: #005a9c; font-size: 1.17rem; }
.detail-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 26px; margin-bottom: 14px; }

/* ---------------------------------------------------------------------------
   Narrower screens: one column
   --------------------------------------------------------------------------- */
@media (max-width: 1500px) {
  .brand { font-size: 2.1rem; }
  .tabs a { height: 54px; font-size: 1.1rem; }
  .logo { display: none; }
}
@media (max-width: 1100px) {
  .site-header { flex-wrap: wrap; padding: 12px 8px 0; }
  .brand { width: 100%; margin-bottom: 8px; font-size: 1.8rem; }
  .tabs { flex: 1 1 100%; gap: 6px; overflow-x: auto; }
  .tabs a { flex: 1 0 auto; width: auto; height: 46px; font-size: 1rem; }
  .catchment-page { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; }
  main .grid > .panel { grid-area: auto; }
  .why, .now, .hypothesis { min-height: 160px; }
  .overview-map .map { min-height: 420px; }
  .title-bar { font-size: 2rem; }
  .views { gap: 10px; padding: 10px 8px 14px; }
  .view-card { width: calc(50% - 5px); padding: 12px 8px 14px; }
  .view-card img { width: 120px; margin-bottom: 8px; }
  .view-card strong { margin-bottom: 4px; font-size: 1.15rem; }
  .view-card span { display: none; }
  .catchment-dashboard { display: flex; flex-direction: column; min-height: 0; padding: 8px; }
  .catchment-dashboard > .map { order: 0; height: 420px; margin: -8px -8px 0; }
  .catchment-dashboard > :not(.map) { align-self: stretch; box-shadow: none; }
  .catchment-dashboard .leaflet-top.leaflet-left { left: 0; }
  .cd-areas { order: 1; }
  .cd-story { order: 2; min-height: 0; }
  .cd-figures { order: 3; align-items: stretch; }
  .cd-counts { order: 4; }
  .cd-habitat { order: 5; }
  .story-buttons { justify-content: flex-start; }
  .focus-buttons, .intervention-management .focus-buttons, .detail-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}