/* Beacon — parish council platform.
   Hand-written. No framework, no build step, no utility classes.

   Colours are CSS custom properties so a production deployment can give each
   council a different accent without touching layout — the whole point of the
   theming approach copied from the housing portal. */

:root {
  --slate: #1a2332;
  --amber: #c8922a;
  --amber-pale: #faf4e4;
  /* Met Office Yellow, kept distinct from the amber used for road closures.
     A yellow warning and a road closure sharing one colour teaches people the
     colour means nothing, and the next one gets skimmed past.
     The TINT does the work, not the stripe: #fff000 against a near-white page
     is about 1.07:1, essentially invisible, so the band's background is what
     has to read as yellow rather than as the road band's warm beige. */
  --met-yellow: #fff000;
  --met-yellow-pale: #fff5b0;
  --stone: #f5f2ed;
  --surface: #ffffff;
  --surface-2: #faf9f7;
  --green: #2d6a4f;
  --green-light: #d8f3dc;
  --red: #c44d42;
  --red-light: #fde8e7;
  --blue: #2563eb;
  --blue-light: #eff6ff;
  --indigo: #6366f1;
  --grey: #6b7280;
  --line: #e5e7eb;
  --text: #1a2332;
  --font-scale: 1;
}

[data-theme="dark"] {
  --slate: #0e131b;
  --amber: #d9a542;
  --amber-pale: #2e2412;
  /* Dark mode keeps the same signal colour on the stripe — it is the thing that
     identifies the band — over a dark tint that text stays readable on. */
  --met-yellow: #fff000;
  --met-yellow-pale: #3d3907;
  --stone: #12171d;
  --surface: #1b222a;
  --surface-2: #232b35;
  --green: #4ba57c;
  --green-light: #16321f;
  --red: #e0736a;
  --red-light: #3a1f1d;
  --blue: #5b9dff;
  --blue-light: #1e2c40;
  --indigo: #8b8df3;
  --grey: #9aa6b2;
  --line: #2b333d;
  --text: #e6ebf1;
}

*, *::before, *::after { box-sizing: border-box; }
/* The A-/A+ controls scale --font-scale, which scales the ROOT font size.
   That only reaches the page if everything downstream is relative: an absolute
   `body { font-size: 15px }` ignores the root entirely, so the buttons changed
   the root and nothing visibly moved. Every screen font-size is rem for that
   reason. The print block keeps pt, which is correct for paper. */
html { font-size: calc(100% * var(--font-scale, 1)); }
body {
  margin: 0; background: var(--stone); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9375rem; line-height: 1.6;
}
/* Two widths, because two kinds of thing.
   --wrap: the content column. Cards, stats, grids. Widened from 960px, which
   left roughly 480px of dead margin either side on a 1920px monitor.
   --measure: long-form prose. A paragraph set 1200px wide runs to about 150
   characters a line, well past the 60-80 that is comfortable to read, so
   article text stays narrower INSIDE the wider column rather than inheriting
   it. */
:root { --wrap: 1200px; --measure: 72ch; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
a { color: var(--blue); }
a:hover { text-decoration: none; }
.muted { color: var(--grey); font-size: 0.8125rem; }
.r { text-align: right; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px 14px; z-index: 20; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---- header ---- */
.site-head { background: var(--slate); color: #fff; padding: 20px 0; }
.head-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.council-name {
  margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.625rem; font-weight: normal;
}
.council-name a { color: #fff; text-decoration: none; }
.domain { margin: 2px 0 0; font-size: 0.75rem; color: #9fb0c4; }
.clerk { text-align: right; font-size: 0.8125rem; }
.clerk p { margin: 1px 0; color: #cfd8e3; }
.clerk a { color: #cfd8e3; }
.controls { margin-top: 8px !important; }
.controls button {
  background: transparent; border: 1px solid #3d4c60; color: #cfd8e3;
  border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 0.75rem;
}
.controls button:hover { border-color: var(--amber); color: var(--amber); }

/* ---- next-meeting banner ---- */
.next-meeting { background: var(--amber); color: #1a1408; padding: 10px 0; font-size: 0.875rem; }

/* ---- tabs ---- */
.tabs {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.tabs-inner { display: flex; gap: 4px; overflow-x: auto; }
.tabs a {
  padding: 12px 14px; color: var(--grey); text-decoration: none; font-size: 0.8125rem;
  font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent;
}
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); border-bottom-color: var(--amber); }

main { padding: 24px 20px 48px; }

/* ---- alerts ---- */
.alerts { margin-bottom: 20px; }
.alert {
  border-left: 4px solid var(--grey); background: var(--surface);
  padding: 12px 16px; margin-bottom: 10px; border-radius: 0 6px 6px 0;
}
.alert p { margin: 4px 0; }
.alert-title { font-weight: 600; }
.alert-road  { border-left-color: var(--amber); background: var(--amber-pale); }
.alert-flood { border-left-color: var(--red);   background: var(--red-light); }
.alert-info  { border-left-color: var(--blue);  background: var(--blue-light); }
/* Environment Agency feed. Attribution is an Open Government Licence condition,
   and the fetch time is there so nobody has to guess how current it is. */
.alert-ea .ea-source, .alert-unknown .ea-source {
  font-size: 0.6875rem; color: var(--grey); margin-top: 6px;
}
/* The all-clear. Shown on the overview only: an active warning belongs on every
   page, reassurance belongs in one place or it becomes furniture nobody reads.
   Deliberately quiet — green, low contrast, no icon weight. It must never
   compete with a real warning for attention. */
.alert-clear {
  border-left-color: var(--green); background: var(--green-light);
}
.alert-clear .alert-title { font-weight: 600; color: var(--green); }
.alert-clear .ea-source { font-size: 0.6875rem; color: var(--grey); margin-top: 4px; }

/* "We could not check" is deliberately its own look — neither the calm of no
   warning nor the alarm of a real one. Absence of data is not absence of risk. */
.alert-unknown {
  border-left-color: var(--grey); background: var(--surface-2);
  border: 1px dashed var(--line); border-left: 4px solid var(--grey);
}
.flash { background: var(--green-light); border-left: 4px solid var(--green); padding: 12px 16px; margin-bottom: 16px; border-radius: 0 6px 6px 0; }

/* ---- cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 24px; margin-bottom: 20px;
}
.card h2, .card h3 { margin-top: 0; }
.page-h { font-family: Georgia, serif; font-weight: normal; font-size: 1.5rem; margin: 8px 0 4px; }
.lead { color: var(--grey); margin-top: 0; max-width: 66ch; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---- stats ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.stat-label { margin: 0; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); font-weight: 700; }
.stat-num { margin: 6px 0 0; font-size: 1.625rem; font-family: Georgia, serif; }
.stat-sub { margin: 0; font-size: 0.75rem; color: var(--grey); }

/* ---- badges ---- */
.badge {
  display: inline-block; font-size: 0.625rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 4px; font-weight: 700; vertical-align: middle;
}
.badge-amber  { background: var(--amber-pale); color: #8a6216; }
.badge-green  { background: var(--green-light); color: var(--green); }
.badge-indigo { background: var(--blue-light); color: var(--indigo); }
.badge-slate  { background: var(--slate); color: #fff; }
.badge-quiet  { background: var(--surface-2); color: var(--grey); border: 1px solid var(--line); }

/* ---- decisions ---- */
.dec { padding: 10px 0; border-bottom: 1px solid var(--line); }
.dec:last-child { border-bottom: 0; }
.dec-title { margin: 0 0 3px; font-weight: 600; }
.dec-meta { margin: 0; font-size: 0.75rem; color: var(--grey); }
.dec-full { padding: 10px 0; border-bottom: 1px solid var(--line); }
.dec-full summary { cursor: pointer; font-weight: 600; }
.meet-h { font-family: Georgia, serif; font-weight: normal; }

/* ---- bars ---- */
.bar-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 12px; align-items: center; padding: 6px 0; }
.bar-label { font-size: 0.8125rem; }
.bar-track { background: var(--line); height: 8px; border-radius: 4px; overflow: hidden; }
.bar-fill { background: var(--amber); height: 100%; border-radius: 4px; transition: width .3s ease; }
.bar-val { font-size: 0.8125rem; white-space: nowrap; }
.total { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }

/* ---- attendance ---- */
.att { margin: 12px 0; }
.att-label { margin: 0 0 4px; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); font-weight: 700; }
.att .bar-track { height: 6px; }
.att-num { margin: 4px 0 0; font-size: 0.75rem; color: var(--grey); }
.att-good { background: var(--green); }
.att-fair { background: var(--amber); }
.att-poor { background: var(--red); }

/* ---- councillors ---- */
.cllr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cllr-name { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.cllr-role { margin: 2px 0 8px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--amber); font-weight: 700; }
.cllr-port { font-size: 0.8125rem; }
.cllr-contact { font-size: 0.8125rem; margin: 4px 0; }
.cllr.vacant { opacity: .72; border-style: dashed; }
.email { cursor: pointer; }

/* ---- events ---- */
.ev, .ev-row { display: flex; gap: 14px; align-items: flex-start; }
.ev { padding: 8px 0; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }
.ev-date {
  flex: 0 0 48px; text-align: center; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 0;
}
.ev-day { display: block; font-size: 1.25rem; font-family: Georgia, serif; line-height: 1; }
.ev-mon { display: block; font-size: 0.625rem; letter-spacing: .08em; color: var(--grey); font-weight: 700; }
.ev-title { margin: 0 0 2px; font-weight: 600; }
.ev-meta { margin: 0 0 4px; font-size: 0.75rem; color: var(--grey); }
.ev-row.past { opacity: .65; }

/* ---- community ---- */
.cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 20px; }
.cp-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 20px; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: 8px; transition: transform .15s ease, box-shadow .15s ease;
}
.cp-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.cp-icon { font-size: 1.875rem; line-height: 1; }

/* ---- quick links ---- */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick-card {
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
  text-decoration: none; color: var(--text); background: var(--surface-2);
  display: flex; flex-direction: column; gap: 3px;
}
.quick-card span { font-size: 0.75rem; color: var(--grey); }
.quick-card:hover { border-color: var(--amber); }

/* ---- planning ---- */
.plan-ref { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 0.8125rem; font-weight: 700; }
.plan-addr { margin: 4px 0; font-weight: 600; }
.plan-view { border-left: 4px solid var(--grey); padding: 10px 14px; margin: 12px 0; border-radius: 0 6px 6px 0; background: var(--surface-2); }
.plan-view p { margin: 2px 0; }
.pv-h { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--grey); }
.plan-good  { border-left-color: var(--green); background: var(--green-light); }
.plan-bad   { border-left-color: var(--red);   background: var(--red-light); }
.plan-warn  { border-left-color: var(--amber); background: var(--amber-pale); }

/* ---- tables ---- */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.tbl th { text-align: left; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); border-bottom: 2px solid var(--line); padding: 8px 6px; }
.tbl td { border-bottom: 1px solid var(--line); padding: 8px 6px; vertical-align: top; }
.tag { display: inline-block; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 0.6875rem; }
.tag-cil { background: var(--amber-pale); border-color: var(--amber); color: #8a6216; }
.pager { font-size: 0.8125rem; display: flex; gap: 14px; align-items: center; }

/* ---- chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 0.75rem; padding: 3px 9px; border-radius: 12px; border: 1px solid var(--line); }
.chip-present   { background: var(--green-light); color: var(--green); border-color: var(--green); }
.chip-apologies { background: var(--amber-pale); color: #8a6216; border-color: var(--amber); }
.chip-absent    { background: var(--red-light); color: var(--red); border-color: var(--red); }

/* ---- minutes, converted from PDF ---- */
.minutes-content h3 { font-family: Georgia, serif; font-weight: normal; font-size: 1.0625rem; margin: 20px 0 6px; }
.minutes-item { margin-bottom: 4px; }
.minutes-content .resolution {
  border-left: 3px solid var(--green); background: var(--green-light);
  padding: 8px 12px; border-radius: 0 4px 4px 0;
}
.minutes-content .resolution.noted { border-left-color: var(--amber); background: var(--amber-pale); }
.minutes-content .action-item {
  border-left: 3px solid var(--blue); background: var(--blue-light);
  padding: 8px 12px; border-radius: 0 4px 4px 0;
}
.prose { max-width: 68ch; }
.prose h3 { font-family: Georgia, serif; font-weight: normal; }

/* ---- cta / forms ---- */
.cta { background: var(--amber-pale); border: 1px solid var(--amber); border-radius: 10px; padding: 18px 20px; margin-bottom: 20px; }
.cta p { margin: 4px 0; }
.plain { background: var(--blue-light); border-left: 4px solid var(--blue); padding: 14px 18px; border-radius: 0 8px 8px 0; margin-bottom: 20px; }
.form { display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.form label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); font-weight: 700; }
.form input, .form select, .form textarea {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.875rem;
}
.btn {
  background: var(--slate); color: #fff; border: 0; border-radius: 6px;
  padding: 10px 18px; font-size: 0.875rem; font-weight: 600; cursor: pointer; align-self: flex-start;
}
.btn:hover { background: var(--amber); color: #1a1408; }

/* ---- footer ---- */
.site-foot { background: var(--slate); color: #cfd8e3; padding: 28px 0; font-size: 0.8125rem; }
.site-foot a { color: #cfd8e3; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.foot-cols p { margin: 2px 0; }
.foot-h { font-weight: 700; color: #fff; margin-bottom: 6px !important; }
.updated { margin-top: 20px; color: #9fb0c4; }
.powered { margin-top: 6px; color: #9fb0c4; }

/* ---- responsive ---- */
@media (max-width: 700px) {
  .cols, .quick { grid-template-columns: 1fr; }
  .head-inner { flex-direction: column; }
  .clerk { text-align: left; }
  .bar-row { grid-template-columns: 1fr; gap: 3px; }
  .bar-val { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Printing a set of minutes or a payments list is a real parish workflow —
   a councillor takes paper into the meeting. Strip the furniture. */
@media print {
  .site-head, .site-foot, .tabs, .next-meeting, .controls, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card { border: 0; padding: 0; margin-bottom: 14px; }
  a { color: #000; text-decoration: underline; }
  .card, .minutes-item, tr { break-inside: avoid; }
}

/* Urgent treatment centre waiting times. The 999/111 card comes first and is
   visually louder than the figures below it on purpose: the numbers are a
   convenience, the phone numbers are the actual advice. */
.urgent-first { border-left: 4px solid var(--blue); }
.utc-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.utc-site { text-align: center; }
.utc-figure { font-size: 1.9rem; font-weight: 700; margin: 0.4rem 0 0; line-height: 1.15; }
.utc-label { margin: 0; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; }
.utc-sub { margin: 0.6rem 0 0; }

/* Local directory. */
.dir-jump { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0 0 1.5rem; }
.dir-cat { margin: 0 0 2rem; scroll-margin-top: 1rem; }
.dir-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.dir-entry h4 { margin: 0 0 0.4rem; }
.dir-meta { margin: 0.3rem 0; font-size: 0.92rem; }
.dir-key { display: inline-block; min-width: 3.6rem; color: var(--slate); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.04em; }

/* The two live feeds on the community landing page. Two columns on a desktop,
   stacked on a phone — the grid does that without a media query. */
.live-two { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin: 0 0 1.5rem; align-items: start; }
.live-col h3 { margin: 0 0 0.75rem; }
.live-boxes { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.live-box { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem;
  border: 1px solid var(--line); border-radius: 6px; text-align: center; }
.live-figure { font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
.live-name { font-size: 0.8rem; }
.live-sub { font-size: 0.85rem; color: var(--slate); }
.live-team { font-weight: 600; margin: 0 0 0.3rem; }
.live-next { margin: 0.7rem 0 0.3rem; }
.live-foot { margin: 0.9rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--line);
  font-size: 0.88rem; }
.cp-links { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; }

/* Community sub-navigation: a second, quieter row under the main tabs. Scrolls
   sideways on a phone rather than wrapping into three stacked rows. */
.subtabs { border-bottom: 1px solid var(--line); background: var(--surface); }
.subtabs-inner { display: flex; gap: 1.1rem; overflow-x: auto; padding: 0.45rem 1rem;
  scrollbar-width: none; }
.subtabs-inner::-webkit-scrollbar { display: none; }
.subtabs-inner a { white-space: nowrap; font-size: 0.9rem; color: var(--slate);
  text-decoration: none; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.subtabs-inner a:hover { color: var(--text); }
.subtabs-inner a.on { color: var(--text); font-weight: 600; border-bottom-color: var(--blue); }

/* Met Office severe weather warnings. Colours follow the Met Office's own
   Yellow/Amber/Red scale so the banner means what a resident already expects. */
.alert-banner { padding: 0.7rem 1rem; margin: 0 0 1rem; border-radius: 6px;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline;
  border-left: 5px solid; }
.warn-yellow { background: var(--met-yellow-pale); border-left-color: #908400; }
.warn-amber  { background: var(--amber-pale); border-left-color: #d97706; }
.warn-red    { background: var(--red-light);  border-left-color: var(--red); }
.wx-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.wx-cell { text-align: center; padding: 0.8rem; border: 1px solid var(--line); border-radius: 6px; }
.wx-val { font-size: 1.5rem; font-weight: 700; display: block; }
.wx-lab { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); }

/* Overview left column: the week ahead stacked above recent decisions. */
.col-stack { display: flex; flex-direction: column; gap: 20px; }
.wx-mini h2 { margin-bottom: 0.6rem; }
/* Seven narrow columns that scroll rather than wrap — a forecast that reflows
   into two rows of four reads as two different weeks. */
.wx-week { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(2.7rem, 1fr);
  gap: 0.35rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: 0.2rem; }
.wx-day { display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.5rem 0.2rem; border: 1px solid var(--line); border-radius: 6px; }
.wx-dow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); }
.wx-max { font-size: 1.05rem; font-weight: 700; }
.wx-min { font-size: 0.82rem; color: var(--slate); }
.wx-rain { font-size: 0.7rem; color: var(--slate); }
.wx-wet { color: var(--blue); font-weight: 600; }

/* ---- full-bleed announcement bands ----
   A band paints edge to edge; its inner .wrap keeps the words in the readable
   column. Alerts are environment, not content: a flood warning is a property of
   the place rather than an article about it, so it spans the viewport while the
   page beneath it stays a column. */
.band { width: 100%; border-bottom: 1px solid var(--line); padding: 12px 0; }
.band p { margin: 4px 0; }
.band-inner { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; }
.band + .band { border-top: 0; }
.band-road    { background: var(--amber-pale); box-shadow: inset 5px 0 0 var(--amber); }
.band-flood   { background: var(--red-light);  box-shadow: inset 5px 0 0 var(--red); }
.band-info    { background: var(--blue-light); box-shadow: inset 5px 0 0 var(--blue); }
.band-clear   { background: var(--green-light); box-shadow: inset 5px 0 0 var(--green); }
.band-unknown { background: var(--amber-pale); box-shadow: inset 5px 0 0 var(--amber); }
.band-flash   { background: var(--green-light); box-shadow: inset 5px 0 0 var(--green); }
.band-ea .ea-source { font-size: 0.6875rem; color: var(--grey); margin-top: 4px; }
/* Met Office severity colours, reused from the old inline banner. */
/* The stripe is a darker shade of the same hue: #fff000 itself is 1.07:1
   against a white page, so as a 5px rule it would be invisible. #908400 clears
   the 3:1 that WCAG 1.4.11 asks of a non-text element carrying meaning, against
   both the band tint (3.45:1) and the page (3.83:1). */
.band.warn-yellow { background: var(--met-yellow-pale); box-shadow: inset 5px 0 0 #908400; }
.band.warn-amber  { background: var(--amber-pale); box-shadow: inset 5px 0 0 #d97706; }
.band.warn-red    { background: var(--red-light);  box-shadow: inset 5px 0 0 var(--red); }
.band:first-of-type { border-top: 0; }
main.wrap { padding-top: 20px; }

/* The two-column sections get a gap wide enough to read as a deliberate pair
   rather than as a third column that failed to load. */
.cols { gap: 32px; }
.quick { gap: 16px; }

/* Long-form prose inside the wider column.
   The LINES are constrained, not the card. Narrowing the card itself would put
   dead space back beside it, which is the thing this whole change was undoing;
   narrowing the paragraphs keeps the card full width and the text readable. */
.prose > p, .prose > ul, .prose > ol, .prose > h3, .prose > h4,
.minutes-content p, .minutes-content h3,
p.lead { max-width: var(--measure); }

/* River gauges. Deliberately NOT alarm-coloured: a level above the normal range
   is a reading, not a warning, and warnings have their own band at the top. */
.riv-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.riv h3 { margin: 0 0 0.2rem; }
.riv-level { font-size: 2rem; font-weight: 700; margin: 0.5rem 0 0; line-height: 1.1; }
.riv-unit { font-size: 1rem; font-weight: 400; color: var(--slate); }
.riv-status { margin: 0.1rem 0 0.7rem; font-size: 0.9rem; }
.riv-high { box-shadow: inset 4px 0 0 var(--amber); }
.riv-high .riv-status { font-weight: 600; }

/* Today's date in the site header. Quiet — it is reassurance, not information. */
.today { margin: 2px 0 0; font-size: 0.8125rem; opacity: 0.75; }

/* Header links (clerk sign-in). Quiet, but reachable without scrolling. */
.head-links { margin: 6px 0 0; font-size: 0.8125rem; }
.head-links a { color: inherit; }

/* Demonstration notice. Deliberately the loudest band on the page: everything
   below it is fictional, including payments attributed to a real council. */
.band-demo { background: var(--slate); color: #fff; box-shadow: inset 5px 0 0 var(--amber); }
.band-demo a { color: #fff; }

/* The clerk's navigation. Visually distinct from the public tabs so it is
   obvious at a glance which side of the site you are on. */
.tabs-admin { background: var(--slate); }
.tabs-admin a { color: rgba(255,255,255,0.78); }
.tabs-admin a:hover { color: #fff; }
.tabs-admin a.on { color: #fff; border-bottom-color: var(--amber); }
.tabs-gap { flex: 1 1 auto; }

/* ---- platform: the councils list and the council form ---- */
/* A hint under a form field. Without this it inherits the label's uppercase
   bold, and a sentence of guidance rendered in small caps is unreadable. */
.form label .muted {
  display: block; margin-top: 4px;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.tag-demo {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px;
  background: var(--amber); color: #1a1408;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.btn-small { padding: 5px 12px; font-size: 0.8125rem; }
.btn-quiet { background: transparent; color: var(--grey); border: 1px solid var(--line); }
.btn-quiet:hover { background: var(--surface); color: var(--text); }

/* ---- roadworks ---- */
.rw-h { margin: 22px 0 10px; font-size: 1.0625rem; }
.rw-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.rw-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rw-head h4 { margin: 0; font-size: 1rem; }
.rw-tm { margin: 4px 0 10px; font-size: 0.875rem; color: var(--grey); }
/* A closure is the only thing on this page that changes what somebody does, so
   it is the only thing given colour. */
.rw-closed { border-left: 4px solid var(--amber); }
.rw-tag {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  background: var(--amber); color: #1a1408;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.rw-warn { border-left: 4px solid var(--amber); }
.rw-closure-note { background: var(--surface); }
.rw-cta-list { margin: 6px 0 10px 18px; font-size: 0.875rem; }
.rw-cta-list li { margin: 2px 0; }
/* A gauge that could not be read: present, visibly not a reading. */
.riv-out { opacity: 0.85; border-left: 4px solid var(--line); }
.riv-out .riv-status { color: var(--grey); }

/* ---- parish map (inline SVG, no tiles, no script) ---- */
.bm-fig { margin: 0 0 18px; }
.bm { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.bm-bg { fill: var(--surface); }
.bm-minor { stroke: var(--line); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bm-mid   { stroke: var(--grey); fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.bm-major { stroke: var(--text); fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.bm-water { stroke: #4f7fb5; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.bm-rail  { stroke: var(--grey); fill: none; stroke-dasharray: 6 5; opacity: .6; }
.bm-home  { fill: none; stroke: var(--text); stroke-width: 2.5; opacity: .65; }
.bm-pin circle { fill: var(--slate); stroke: var(--surface); stroke-width: 2.5; }
.bm-pin text { fill: #fff; font-size: 17px; font-weight: 700; }
.bm-pin-closed circle { fill: var(--amber); }
.bm-pin-closed text { fill: #1a1408; }
/* Labels carry a halo of the map's own background so a name stays readable
   where it crosses a road. paint-order is set as an attribute on each <text>
   rather than here, because it is the drawing order that matters and setting it
   in CSS is less widely honoured than the presentation attribute. Colours are
   all theme variables: the dark palette redefines them, so nothing needs a
   second rule. */
.bm-lbl      { stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.bm-lbl-place{ fill: var(--text); font-weight: 700; letter-spacing: .3px; }
.bm-lbl-poi  { fill: var(--grey); }
.bm-lbl-road { fill: var(--grey); font-style: italic; }
.bm-poi          { fill: var(--grey); stroke: var(--surface); stroke-width: 1.2; }
.bm-poi-church,
.bm-poi-hall     { fill: var(--text); }
.bm-poi-school,
.bm-poi-health   { fill: #4f7fb5; }
.bm-poi-green    { fill: #5f8f5a; }
.bm-fig figcaption { margin-top: 8px; font-size: 0.8125rem; }

/* Newsletter posts. Images are constrained rather than cropped: a clerk's
   photo comes out of a phone at whatever shape it likes, and a fixed aspect
   ratio would cut the top off the tree they wanted to show. */
.post-summary .post-thumb { width: 100%; max-width: 420px; height: auto; border-radius: 8px; margin: 10px 0; }
.post-figure { margin: 18px 0; }
.post-figure img { width: 100%; max-width: 640px; height: auto; border-radius: 8px; display: block; }
.post-figure figcaption { margin-top: 6px; font-size: 0.8125rem; }
.post-figure label { display: block; margin-top: 8px; font-size: 0.875rem; }
.post-figure label input { display: block; width: 100%; margin-top: 4px; }
.admin-hold { background: var(--amber-pale); border-left: 3px solid var(--amber);
              padding: 8px 12px; border-radius: 4px; }
/* The number on each card, matching its pin. */
.rw-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--slate); color: #fff;
  font-size: 0.75rem; font-weight: 700; flex: 0 0 auto;
}
/* A works outside the drawn area has a number but no pin, and says so. */
.rw-num-off { background: transparent; color: var(--grey); border: 1px dashed var(--line); }

table.stops { width:100%; border-collapse:collapse; font-size:.95rem; }
table.stops th { text-align:left; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); padding:.4rem .5rem;
  border-bottom:1px solid var(--line); font-weight:600; }
table.stops td { padding:.55rem .5rem; border-bottom:1px solid var(--line-soft,#eee); vertical-align:top; }
table.stops tr:last-child td { border-bottom:none; }
table.stops td.num { white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.line { display:inline-block; font-size:.78rem; font-weight:600; padding:.08rem .4rem;
  margin:0 .2rem .2rem 0; border:1px solid var(--line); border-radius:4px;
  background:var(--surface,#f6f6f6); font-variant-numeric:tabular-nums; }
tr.livrow td { padding-top:0; border-bottom:1px solid var(--line-soft,#eee); }
.livlabel { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin-right:.5rem; }
.dep { display:inline-block; margin:0 .9rem .2rem 0; font-size:.86rem; }
.dep strong { font-variant-numeric:tabular-nums; }
.livedot { color:#1a7f37; font-size:.6rem; vertical-align:middle; margin-left:.25rem; }
.place { margin:0 0 1rem; }
.placename { margin:0 0 .25rem; font-size:.98rem; }
.placename .muted { font-weight:400; margin-left:.4rem; }
.place table.stops { margin-left:.2rem; }
tr.cancelled td { opacity:.7; }
.cancel { color:#a8410a; font-weight:600; }
.bm-bus rect { fill:#b5480c; stroke:#fff; stroke-width:1.5; }
.bm-bus-wheel { fill:#3a2a1a; }
.bm-bus text { fill:#fff; font-size:10px; font-weight:700;
  paint-order:stroke; stroke:none; }
.buslist { list-style:none; padding:0; margin:.6rem 0 0; display:flex;
  flex-wrap:wrap; gap:.4rem 1rem; font-size:.9rem; }

/* Map zoom. ⚠️ The controls are added by script, so without JS there is no
   empty toolbar sitting above a map that cannot move. */
svg.bm.bm-zoomable { cursor: grab; touch-action: none; }
svg.bm.bm-grabbing { cursor: grabbing; }
.bm-zoom { display: flex; gap: .3rem; margin: .4rem 0 0; }
.bm-zoom button { width: 2rem; height: 2rem; padding: 0; margin: 0;
  font-size: 1rem; line-height: 1; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface, #fff); cursor: pointer; }
.bm-zoom button:hover { border-color: var(--accent); }