/* londontraffic.org — visual system
   Grounded in UK road signage: sign-blue motorway patches, primary-route
   green A-road patches, slate crossing pills, a dot-matrix VMS status ribbon,
   Archivo + IBM Plex Mono, on a clean light cartographic base. */

:root {
  --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#FBFCFE;
  --line:#E2E7EF; --line-strong:#CDD6E2;
  --ink:#16202C; --muted:#5A6B7B;
  --blue:#1B3A6B; --green:#0B6B3A; --slate:#33414F;
  --amber:#F2A900; --red:#C8102E;
  --display:'Archivo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow:0 1px 2px rgba(20,32,44,.06), 0 6px 20px -12px rgba(20,32,44,.25);
  --radius:12px;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--display); font-size:16px; line-height:1.5;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
.wrap { width:min(1180px, 100% - 2rem); margin-inline:auto; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { font-weight:700; line-height:1.15; letter-spacing:-.01em; margin:0; }
img { max-width:100%; }
:focus-visible { outline:3px solid var(--amber); outline-offset:2px; border-radius:4px; }

/* ---- VMS status ribbon (overhead dot-matrix sign) ---- */
.vms {
  background:#0E1620;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size:6px 6px;
  color:var(--amber); border-bottom:1px solid #060B12;
}
.vms-row { display:flex; align-items:center; gap:.8rem; min-height:38px; padding-block:.35rem; }
.vms-live {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.18em;
  color:#FFD25A; flex:none;
}
.vms-dot {
  width:9px; height:9px; border-radius:50%; background:#36D07A;
  box-shadow:0 0 0 0 rgba(54,208,122,.6); animation:pulse 2.4s infinite;
}
.vms-msg {
  font-family:var(--mono); font-size:.78rem; letter-spacing:.02em;
  text-shadow:0 0 8px rgba(242,169,0,.35);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vms-msg b { color:#FFE08A; font-weight:600; }
.vms-sev { color:#FF8A6E !important; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(54,208,122,.6);} 70%{box-shadow:0 0 0 7px rgba(54,208,122,0);} 100%{box-shadow:0 0 0 0 rgba(54,208,122,0);} }
@media (prefers-reduced-motion:reduce){ .vms-dot{ animation:none; } }

/* ---- Header + wordmark + road rail ---- */
.site-head { background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:600; }
.head-row { display:flex; align-items:center; justify-content:space-between; height:60px; }
.wordmark {
  font-family:var(--display); font-weight:800; font-size:1.32rem; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:.05em;
}
.wordmark b { color:var(--blue); font-weight:800; }
.wordmark-dot { width:8px; height:8px; border-radius:50%; background:var(--amber); margin-left:.35rem; }
.wordmark--sm { font-size:1.05rem; }
.head-nav { display:flex; gap:1.1rem; font-family:var(--mono); font-size:.8rem; font-weight:500; }
.head-nav a { color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.head-nav a:hover { color:var(--ink); text-decoration:none; }

.rail { background:var(--surface-2); border-bottom:1px solid var(--line); }
.rail-row { display:flex; gap:.4rem; overflow-x:auto; padding:.5rem 0; scrollbar-width:thin; }
.rail-row::-webkit-scrollbar { height:6px; }
.rail-row::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:99px; }
.rail-patch { flex:none; }
.rail-patch:hover { text-decoration:none; }

/* ---- Road-sign patches (the signature element) ---- */
.patch {
  font-family:var(--display); font-weight:700; color:#fff; display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:6px; font-size:.8rem; line-height:1.35; letter-spacing:.01em;
  border:2px solid rgba(255,255,255,.9); box-shadow:0 1px 0 rgba(0,0,0,.18); white-space:nowrap;
}
.patch--m { background:var(--blue); }
.patch--a { background:var(--green); }
.patch--x { background:var(--slate); border-radius:999px; font-weight:600; font-size:.72rem; padding:2px 10px; }

/* ---- Map ---- */
.map { width:100%; background:#dfe6ee; z-index:1; }
.map--home { height:56vh; min-height:340px; }
.map--road { height:46vh; min-height:300px; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:1.4rem; }
.leaflet-container { font-family:var(--display); }
.map-legend {
  font-family:var(--mono); font-size:.68rem; line-height:1.7; background:rgba(255,255,255,.95);
  padding:.5rem .6rem; border-radius:8px; box-shadow:var(--shadow); color:var(--ink);
}
.map-legend .ll { display:flex; align-items:center; gap:.4rem; }
.map-legend i { width:11px; height:11px; border-radius:50%; display:inline-block; }
.leaflet-popup-content { margin:.7rem .8rem; font-size:.85rem; }
.pop-loc { font-weight:700; margin:.25rem 0; }
.pop-upd { color:var(--muted); }
.pop-cam img { width:240px; max-width:60vw; border-radius:6px; display:block; }
.cam-pin span { display:block; width:14px; height:14px; border-radius:50%; background:var(--blue); border:2px solid #fff; box-shadow:0 1px 4px rgba(20,32,44,.5); }
.leaflet-marker-icon.cam-pin { background:transparent; border:0; }

/* ---- Sections / cards ---- */
main { display:block; }
.home-cols { display:grid; grid-template-columns:1fr; gap:1.2rem; padding-block:1.3rem; }
.sec-head, .page-head { display:flex; align-items:baseline; gap:.7rem; margin-bottom:.9rem; }
.sec-head h1 { font-size:1.5rem; }
.count { font-family:var(--mono); font-size:.74rem; color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:2px 9px; border-radius:999px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.05rem; box-shadow:var(--shadow); margin-bottom:1.1rem; }
.card h3 { font-size:1rem; margin-bottom:.7rem; }
.muted { color:var(--muted); }
.empty { background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--radius); padding:1.4rem; color:var(--muted); text-align:center; }

/* ---- Incident list ---- */
.inc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.inc { display:flex; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.inc-bar { width:6px; background:var(--sev,#5A6B7B); flex:none; }
.inc-body { padding:.7rem .85rem; min-width:0; flex:1; }
.inc-top { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.chip { color:#fff; font-family:var(--mono); font-size:.64rem; font-weight:600; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em; }
.inc-src { font-family:var(--mono); font-size:.64rem; color:var(--muted); margin-left:auto; }
.inc-loc { font-weight:600; margin-top:.4rem; }
.inc-upd { color:var(--muted); font-size:.88rem; margin:.3rem 0 0; }
.inc-meta { display:flex; justify-content:space-between; gap:.6rem; margin-top:.5rem; font-family:var(--mono); font-size:.64rem; color:var(--muted); flex-wrap:wrap; align-items:center; }
.inc-age { margin-left:auto; }
.inc-when { color:var(--muted); }
.inc-state { font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:999px; }
.inc-state--live { background:rgba(46,125,50,.14); color:#1B5E20; }
.inc-state--upcoming { background:rgba(242,169,0,.18); color:#8A6A00; }
.inc-state--ended { background:var(--surface); color:var(--muted); border:1px solid var(--line); }
.inc.hide { display:none; }

/* incident toolbar: search + severity filters + live toggle */
.inc-tools { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:.9rem; }
#inc-search { flex:1; min-width:200px; font-family:var(--display); font-size:.92rem; padding:.55rem .75rem; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); }
.inc-filters { display:flex; gap:.3rem; flex-wrap:wrap; }
.inc-fbtn { font-family:var(--mono); font-size:.7rem; padding:.35rem .62rem; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface); color:var(--muted); cursor:pointer; }
.inc-fbtn.is-on { background:var(--blue); border-color:var(--blue); color:#fff; }
.inc-livetoggle { font-family:var(--mono); font-size:.72rem; color:var(--muted); display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }
.inc-more { width:100%; margin-top:.7rem; padding:.6rem; font-family:var(--mono); font-size:.78rem; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--blue); cursor:pointer; }
.inc-more:hover { border-color:var(--blue); }
.inc-empty { margin-top:.7rem; color:var(--muted); font-size:.9rem; }

/* ---- Glance + road nav ---- */
.glance { list-style:none; margin:0; padding:0; }
.glance li { display:flex; align-items:center; gap:.5rem; padding:.4rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.glance li:last-child { border-bottom:0; }
.dot { width:11px; height:11px; border-radius:50%; flex:none; }
.glance-n { margin-left:auto; font-family:var(--mono); font-weight:600; }
.road-nav-group { margin-bottom:.85rem; }
.road-nav-label { font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); display:block; margin-bottom:.45rem; }
.road-nav-patches { display:flex; flex-wrap:wrap; gap:.4rem; }
.rn { position:relative; }
.rn:hover { text-decoration:none; }
.rn-badge { position:absolute; top:-7px; right:-7px; color:#fff; font-family:var(--mono); font-size:.6rem; font-weight:600; min-width:16px; height:16px; padding:0 3px; border-radius:99px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--surface); }

/* ---- Road page ---- */
.page { padding-block:1.3rem; }
.road-hero { display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.road-hero-id .patch { font-size:1.4rem; padding:6px 16px; border-radius:10px; border-width:3px; }
.road-hero-id .patch--x { font-size:1.05rem; }
.road-hero h1 { font-size:1.7rem; }
.road-cols { display:grid; grid-template-columns:1fr; gap:1.2rem; }
.road-main h2 { font-size:1.2rem; margin-bottom:.8rem; }
.more { font-family:var(--mono); font-size:.75rem; display:inline-block; margin-top:.6rem; }

/* ---- Camera gallery ---- */
.cam-tools { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
#cam-search { flex:1; min-width:220px; font-family:var(--display); font-size:.95rem; padding:.6rem .8rem; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); }
.toggle { font-family:var(--mono); font-size:.78rem; color:var(--muted); display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; }
.cam-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:.85rem; }
.cam-strip { display:grid; grid-template-columns:1fr; gap:.5rem; }
.cam { background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); min-width:0; }
.cam-img { position:relative; aspect-ratio:16/9; background:#0E1620; }
.cam-img img { width:100%; height:100%; object-fit:cover; display:block; }
.cam figcaption { padding:.5rem .6rem; font-size:.8rem; font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
.cam-view { display:block; font-weight:400; color:var(--muted); font-size:.7rem; font-family:var(--mono); margin-top:3px; }
.cam--off { opacity:.55; }
.cam-badge { position:absolute; top:6px; left:6px; background:rgba(14,22,32,.85); color:#FFD25A; font-family:var(--mono); font-size:.6rem; padding:2px 7px; border-radius:99px; letter-spacing:.05em; }
.cam.hide { display:none; }
.cam--clickable { cursor:pointer; }
.cam--clickable:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* ---- Camera lightbox ---- */
.cam-lb { position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center; padding:1rem; }
.cam-lb[hidden] { display:none; }
.cam-lb-backdrop { position:absolute; inset:0; background:rgba(8,14,20,.82); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.cam-lb-fig { position:relative; margin:0; width:100%; max-width:min(960px,92vw); background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 18px 50px rgba(8,14,20,.55); }
.cam-lb-imgwrap { background:#0E1620; aspect-ratio:16/9; }
.cam-lb-img { width:100%; height:100%; object-fit:contain; display:block; }
.cam-lb-cap { display:flex; flex-direction:column; gap:2px; padding:.7rem .9rem; font-size:.95rem; font-weight:600; }
.cam-lb-view { font-weight:400; color:var(--muted); font-size:.78rem; font-family:var(--mono); }
.cam-lb-x { position:absolute; top:.5rem; right:.5rem; z-index:2; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; font-size:1.5rem; line-height:1; color:#fff; background:rgba(8,14,20,.6); }
.cam-lb-x:hover { background:rgba(8,14,20,.88); }
@media (max-width:560px) {
  .cam-lb { padding:0; }
  .cam-lb-fig { max-width:100vw; height:100%; border-radius:0; display:flex; flex-direction:column; justify-content:center; }
}

/* ---- Charges & zones page ---- */
.charge-h { font-size:1.25rem; margin:1.7rem 0 .6rem; }
.charge-intro { margin-bottom:1rem; max-width:62ch; }
.charge-grid, .zone-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:1rem; }
.charge-card, .zone-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow); }
.charge-card-head, .zone-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.charge-card-head h3, .zone-card-head h3 { font-size:1.05rem; }
.charge-live { font-family:var(--mono); font-size:.72rem; color:var(--blue); white-space:nowrap; }
.charge-where { color:var(--muted); font-size:.85rem; margin:.4rem 0 .7rem; }
.zone-price { font-family:var(--display); font-weight:800; font-size:1.05rem; color:var(--blue); white-space:nowrap; }
.charge-rates { width:100%; border-collapse:collapse; margin:.1rem 0 .5rem; font-size:.82rem; }
.charge-rates th, .charge-rates td { text-align:left; padding:.34rem .4rem; border-bottom:1px solid var(--line); vertical-align:top; }
.charge-rates th[scope="row"] { font-weight:600; }
.charge-rates td { font-family:var(--mono); white-space:nowrap; }
.charge-meta { margin:.4rem 0 .8rem; }
.charge-meta dt { font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-top:.55rem; }
.charge-meta dd { margin:.12rem 0 0; font-size:.86rem; line-height:1.45; }
.charge-official { display:inline-block; font-weight:600; font-size:.82rem; color:var(--blue); }
.charge-disclaimer { color:var(--muted); font-size:.78rem; margin:1.7rem 0 .4rem; max-width:72ch; }

/* ---- Ads ---- */
.ad { margin:1rem auto; text-align:center; }
.ad--leaderboard { max-width:970px; padding-block:.6rem; }
.ad--box { min-height:200px; }
.ad--mobile { display:none; }
.ad ins { display:block; }
@media (max-width:560px) {
  .ad--leaderboard { display:none; }
  .ad--mobile { display:block; min-height:100px; }
  /* Keep in-content mobile ads to a medium-rectangle footprint.
     This sizes the slot (policy-safe) — it does NOT crop a served ad. */
  .ad--mobile ins,
  .ad--box ins { max-width:336px; margin-inline:auto; }
}

/* ---- Footer ---- */
.site-foot { background:#0E1620; color:#AEB9C6; margin-top:2rem; padding-block:2rem 1.4rem; }
.site-foot .wordmark { color:#fff; } .site-foot .wordmark b { color:#7FA7E6; }
.foot-grid { display:grid; grid-template-columns:1fr; gap:1.2rem; }
.site-foot h4 { color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem; }
.site-foot p { font-size:.82rem; line-height:1.6; margin:.3rem 0; }
.site-foot a { color:#9FC0F0; }
.copyright { font-family:var(--mono); font-size:.68rem; color:#6B7888; border-top:1px solid #1B2733; margin-top:1.4rem; padding-top:1rem; }

/* ---- Desktop ---- */
@media (min-width:980px) {
  .home-cols { grid-template-columns:1fr 330px; align-items:start; }
  .map--home { height:62vh; }
  .road-cols { grid-template-columns:1fr 320px; align-items:start; }
  .foot-grid { grid-template-columns:1.6fr 1fr 1fr; }
  .home-side, .road-side { position:sticky; top:76px; }
}
@media (max-width:560px) {
  .head-nav { gap:.7rem; font-size:.72rem; }
  .road-hero h1 { font-size:1.35rem; }
  .cam-strip { grid-template-columns:1fr; }
}