/* pages.css -- the one stylesheet for every static, search-indexed page on crimeslog.com (FAQ, Coverage, the
   generated /uk/ police-area pages, and the pre-boot landing text in index.html). Taken from the Porthmadog station
   page design (user, 20-21 Sep 2026): MapLibre light-style paper and borders, the map's own category colours, navy
   header with the NavMenu logo and an orange call to action. Change the design here, once; bump ?v= where linked. */
:root{--paper:#ece5db;--card:#faf7f2;--line:#d8cdbd;--ink:#333;--muted:#6b6660;--navy:#03173d;--link:#1D4ED8;--road:#e8801e;--water:#a8cfe8}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',Arial,sans-serif;color:var(--ink);line-height:1.6;background:var(--paper)}
header{background:var(--navy);padding:4px 20px;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px}
header img{height:56px;width:auto;display:block}
header a.cta{background:var(--road);color:#fff;text-decoration:none;font-weight:700;font-size:.85rem;padding:8px 16px;border-radius:8px;white-space:nowrap}
/* Two columns that fill the screen: the page's own content on the left, a police-station photograph down the
   right third (user, 20 Sep 2026). The shell is 100dvh so the photo spans the device height whatever the
   chrome does on mobile, and the left column scrolls inside it. Below 900px the photo moves to the top and
   becomes a normal banner, so a phone gets the content first. */
.shell{display:flex;min-height:100dvh}
.content{flex:1 1 auto;overflow-y:auto;max-height:100dvh}
.photo{flex:0 0 33.333%;position:relative;background:#0f1b2d}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;font-size:.68rem;line-height:1.35;
    color:#f1ece6;background:linear-gradient(transparent,rgba(3,23,61,.88) 42%)}
.photo figcaption a{color:#cfe3ff}
main{max-width:780px;margin:0 auto;padding:22px 16px 56px}
@media(max-width:900px){
    .shell{display:flex;flex-direction:column;min-height:0}
    .content{max-height:none;overflow:visible}
    .photo{order:-1;flex:0 0 auto;width:auto;align-self:stretch;height:170px}
    .shell{overflow-x:hidden}
}
h1{color:var(--navy);font-size:1.6rem;line-height:1.25;margin:8px 0 6px}
h2{color:var(--navy);font-size:1.15rem;margin:26px 0 8px}
p.lead{font-size:1.02rem;color:#4a4540}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:7px 8px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{height:10px;border-radius:5px;min-width:3px}
.barcell{width:42%}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:-1px}
/* Quarters chart: a labelled scale on the left and the count above each bar, so the shape carries a number
   rather than only a silhouette (user, 20 Sep 2026). */
.chart{display:flex;gap:10px;margin:10px 0 26px}
.yaxis{flex:0 0 auto;width:42px;height:110px;position:relative;font-size:.62rem;color:var(--muted)}
.yaxis span{position:absolute;right:0;transform:translateY(-50%);font-variant-numeric:tabular-nums}
.plot{flex:1 1 auto;position:relative;height:110px}
.grid{position:absolute;left:0;right:0;border-top:1px dashed var(--line)}
.trend{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6px}
.trend div{flex:1;background:var(--water);border-radius:3px 3px 0 0;position:relative;min-height:2px}
.trend div b{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:.62rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.trend div span{position:absolute;bottom:-19px;left:0;right:0;text-align:center;font-size:.62rem;color:var(--muted)}
.btn{display:inline-block;background:var(--road);color:#fff;text-decoration:none;font-weight:700;padding:11px 24px;border-radius:8px;margin:6px 8px 6px 0}
.btn.ghost{background:transparent;color:var(--navy);border:2px solid var(--line)}
.note{font-size:.8rem;color:var(--muted)}
p.rate{margin:14px 0 2px;font-size:1rem}
nav.crumbs{font-size:.78rem;margin-bottom:2px;color:var(--muted)}
nav.crumbs a{color:var(--link);text-decoration:none}
a{color:var(--link)}
ul.nb{list-style:none;padding:0;margin:6px 0;display:flex;flex-wrap:wrap;gap:6px}
ul.nb li a{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.82rem;text-decoration:none}
footer{border-top:1px solid var(--line);padding:18px 20px;font-size:.78rem;color:var(--muted);text-align:center}
footer a{color:var(--link);text-decoration:none;margin:0 7px}
@media(max-width:520px){h1{font-size:1.35rem}.barcell{width:30%}header a.cta{font-size:.78rem;padding:7px 12px}}

/* Page-specific additions carried over from the older static pages */
ul.cities{columns:2;-webkit-columns:2;margin:8px 0;padding-left:20px}
ul.cities li{break-inside:avoid}
@media(max-width:520px){ul.cities{columns:1;-webkit-columns:1}}
main ul, main ol{padding-left:22px}
main li{margin:3px 0}
h3{color:var(--navy);font-size:1.02rem;margin:18px 0 6px}
.callout{background:#fbf1dc;border-left:3px solid var(--road);border-radius:0 8px 8px 0;padding:10px 14px;margin:14px 0;color:#6b4a12;font-size:.95rem}
.cta-block{text-align:center;margin:30px 0 10px}
.cta-block a{display:inline-block;background:var(--road);color:#fff;text-decoration:none;font-weight:700;font-size:1.02rem;padding:13px 28px;border-radius:10px}
code{background:#efe8dd;border:1px solid var(--line);padding:1px 6px;border-radius:4px;font-size:.85em;word-break:break-all}
/* Logo fills the header bar (user, 21 Sep 2026): 56 px in a 64 px bar, a little smaller on phones so the button fits. */
@media(max-width:520px){header{min-height:52px;padding:3px 12px}header img{height:46px}}
/* The orb (js/orb.js) replaces the header bar (user, 21 Sep 2026). It docks 52 px from the top and right; the page keeps
   its text clear of it -- a right-hand column on wide screens, content starting below it on narrower ones. orb.js
   computes both on load and resize. Station pages (body.has-photo) let the orb sit over the photo column instead. */
body.has-orb{padding-top:var(--orb-clear-top,0);padding-right:var(--orb-clear-right,0)}
body.has-orb.has-photo{padding-right:0}

/* ── Dark mode (user, 21 Sep 2026) ───────────────────────────────────────────────────────────────────────────────
   The colours of the map's own dark style (mapstyles/dark.json), as the light pages use the light map's: page = dark
   land #1a2332, cards = landuse #1e2840, lines = minor roads #2e3c50, text = place labels #c8d8e8, links = highway
   #4fc3f7, buttons = major roads #29b6f6, chart bars = medium roads #3a5a78. Crime-category colours stay as on the map.
   Chosen by the orb's toggle (saved as localStorage "crimeslog.theme", shared with the app), otherwise the device's own
   light/dark setting. */
:root[data-theme="dark"]{--paper:#1a2332;--card:#1e2840;--line:#2e3c50;--ink:#c8d8e8;--muted:#8fa3b8;--navy:#e8f1fa;
  --link:#4fc3f7;--road:#29b6f6;--water:#3a5a78;color-scheme:dark}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--paper:#1a2332;--card:#1e2840;--line:#2e3c50;--ink:#c8d8e8;--muted:#8fa3b8;--navy:#e8f1fa;
    --link:#4fc3f7;--road:#29b6f6;--water:#3a5a78;color-scheme:dark}
}
:root[data-theme="dark"] p.lead{color:#b3c4d6}
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .cta-block a{color:#0d1117}
:root[data-theme="dark"] .callout{background:#16304a;color:#cfe6fb}
:root[data-theme="dark"] code{background:#16213a}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) p.lead{color:#b3c4d6}
  :root:not([data-theme="light"]) .btn, :root:not([data-theme="light"]) .cta-block a{color:#0d1117}
  :root:not([data-theme="light"]) .callout{background:#16304a;color:#cfe6fb}
  :root:not([data-theme="light"]) code{background:#16213a}
}

/* Small CrimesLog logo before each page title (user, 21 Sep 2026). Its lettering is dark, so dark mode gives it a light
   rounded backing (the map's light paper) rather than letting the name disappear. */
h1 .title-logo{height:1.9em;width:auto;vertical-align:middle;margin:0 .45em .12em 0;border-radius:8px}
:root[data-theme="dark"] h1 .title-logo{background:#f8f4f0;padding:2px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) h1 .title-logo{background:#f8f4f0;padding:2px}}
@media(max-width:520px){h1 .title-logo{height:1.7em}}