/*
  <summary>
  Night console theme for Roadworks, the one stylesheet every page loads.
  Deep navy canvas, frosted glass panels with a one pixel light border,
  electric blue as the working colour and amber for warnings. A 64px icon rail
  on the left carries the navigation; the map pages fill the rest with the map
  and a 360px glass drawer on the right; the content pages sit on the canvas as
  glass cards. On a phone the rail becomes a bottom tab bar and the drawer
  becomes a bottom sheet.
  </summary>
  <remarks>
  Replaced the Bootstrap based theme on 07/10/2026 from the Night console
  concept in dev/ui-concepts/concept-b-night. Bootstrap is no longer loaded, so
  every control is styled here. The map tiles stay the standard OSM light tiles
  (project rule: no dark basemap), so the glass is kept dense enough to read
  against a light map. Class names that the scripts generate (legend-panel,
  road-search-suggestion, route-legend, webalert-modal, road-item, term-table,
  log-entry) are styled here under their existing names so the scripts need no
  cosmetic changes. The date picker in js/ukdate.js reads --text, --border,
  --card-bg, --accent and --card-shadow, which are mapped onto the palette at
  the top. Two gotchas: a bare `svg` size rule would squash Leaflet's overlay
  pane, so the icon rule excludes Leaflet's classes, and the map container needs
  its own stacking context (z-index 0) or Leaflet's panes paint over the
  floating chrome.
  </remarks>
*/

:root {
  color-scheme: dark;
  --canvas: #0B1220;
  --canvas-2: #111A2E;
  --glass: rgba(17, 26, 46, .78);
  --glass-strong: rgba(11, 18, 32, .9);
  --raised: rgba(255, 255, 255, .04);
  --raised-2: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);
  --ink: #F8FAFC;
  --ink-2: #CBD5E1;
  --muted: #8B9BB4;
  --blue: #38BDF8;
  --blue-deep: #0EA5E9;
  --blue-ink: #06141F;
  --blue-soft: rgba(56, 189, 248, .14);
  --blue-line: rgba(56, 189, 248, .4);
  --amber: #FBBF24;
  --amber-soft: rgba(251, 191, 36, .14);
  --red: #F87171;
  --red-soft: rgba(248, 113, 113, .14);
  --green: #4ADE80;
  --green-soft: rgba(74, 222, 128, .14);
  --violet: #A78BFA;
  --violet-soft: rgba(167, 139, 250, .16);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 24px 60px rgba(0, 0, 0, .5);
  --glow: 0 0 0 1px var(--blue-line), 0 0 48px rgba(56, 189, 248, .16);
  --radius: 14px;
  --rail: 64px;
  --drawer: 360px;
  --tabbar: 60px;
  /* Names the date picker in js/ukdate.js reads. */
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line-2);
  --card-bg: #16203A;
  --accent: var(--blue);
  --card-shadow: rgba(0, 0, 0, .6);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* The glow lives on html so it stays put while the document scrolls. A fixed
   background on a body that is also the scroller blanks frames mid scroll. */
html {
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(56, 189, 248, .12), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(56, 189, 248, .07), transparent 60%),
    var(--canvas);
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
svg:not(.leaflet-zoom-animated):not(.leaflet-tile):not(.leaflet-image-layer):not(.daychart) { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.num, time, code, .date, .version { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* Glass */
.glass { background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line-2); }
.glass-strong { background: var(--glass-strong); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--line-2); }

/* Rail */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0;
  background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid var(--line);
}
.rail .logo { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.rail .logo img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(56, 189, 248, .35), 0 0 18px rgba(56, 189, 248, .3); }
.rail a:not(.logo) {
  position: relative; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: background .15s, color .15s;
}
.rail a:hover { text-decoration: none; }
.rail a:not(.logo):hover { background: var(--raised-2); color: var(--ink); }
.rail a.active { background: var(--blue-soft); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-line); }
.rail a svg { width: 22px; height: 22px; stroke-width: 1.8; }
.rail a .lbl { display: none; }
.rail a[data-tip]::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: #1B2538; color: var(--ink); border: 1px solid var(--line-2);
  padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; box-shadow: var(--shadow);
}
.rail a[data-tip]:hover::after { opacity: 1; transform: translateY(-50%); }
.rail .spacer { flex: 1; }

/* Buttons */
.btn, button.primary, .button-grid button, a.button-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--raised); color: var(--ink-2); font-weight: 700; cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .05s, color .15s; white-space: nowrap; text-decoration: none;
}
.btn.small { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.btn.primary, button.primary { background: var(--blue); color: var(--blue-ink); border-color: transparent; box-shadow: 0 0 20px rgba(56, 189, 248, .25); }
.btn.primary:hover, button.primary:hover { background: #7DD3FC; }
.btn.ghost:hover, .button-grid button:hover, a.button-link:hover { background: var(--raised-2); border-color: rgba(255, 255, 255, .28); color: var(--ink); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.route-active { background: var(--amber); color: var(--blue-ink); border-color: transparent; box-shadow: 0 0 20px rgba(251, 191, 36, .3); }
button:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.iconbtn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--line-2); background: var(--raised); cursor: pointer; color: var(--ink-2); padding: 0; font-size: 18px; line-height: 1; }
.iconbtn:hover { background: var(--raised-2); color: var(--ink); }
.pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; }
.pill.good { background: var(--green-soft); color: var(--green); border-color: rgba(74, 222, 128, .3); }
.pill.warn { background: var(--amber-soft); color: var(--amber); border-color: rgba(251, 191, 36, .3); }
.pill.bad { background: var(--red-soft); color: var(--red); border-color: rgba(248, 113, 113, .3); }
.pill.big { font-size: 13px; padding: 6px 12px; align-self: flex-start; }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; font-weight: 800; color: var(--blue); margin: 0; }
.lede { color: var(--muted); font-size: 15px; max-width: 64ch; line-height: 1.6; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 12px; }

/* Segmented control */
.seg { display: inline-flex; background: rgba(0, 0, 0, .3); padding: 3px; border-radius: 10px; gap: 2px; border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-weight: 600; color: var(--muted); cursor: pointer; font-size: 13px; white-space: nowrap; transition: background .15s, color .15s; }
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--blue-soft); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-line); font-weight: 700; }

/* Inputs */
input, select { border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; background: rgba(0, 0, 0, .28); color: var(--ink); min-width: 0; }
input::placeholder { color: var(--muted); }
input:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
select option { background: var(--canvas-2); }
input.date, input.uk-date { width: 128px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
label > span.lbl-text { display: block; }
.uk-date-wrap { width: 100%; }
.uk-date-wrap .uk-date { width: 100%; }

/* Page layout */
.screen-map { position: fixed; inset: 0 0 0 var(--rail); display: flex; }
.stage { position: relative; flex: 1; min-width: 0; }
.stage #map { position: absolute; inset: 0; z-index: 0; }
.screen-page { padding-left: var(--rail); min-height: 100%; }
.page { max-width: 1120px; margin: 0 auto; padding: 40px 32px 80px; display: flex; flex-direction: column; gap: 20px; }
.page.narrow { max-width: 760px; }
.page.wide { max-width: 1280px; }
.page-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 8px; }
.page-foot { display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: 12.5px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.page-foot .version, .drawer-foot .version { padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 6px; }
.period-pick { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper strong { min-width: 150px; text-align: center; font-size: 15px; }
.custom-range { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

/* Cards */
.card { background: var(--glass); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.card.block { padding: 22px 24px; }
.card.block h2 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.card.block > .muted, .card.block > .lede { margin-bottom: 14px; }
.card.block .kicker { margin-bottom: 4px; }
.card.soft { background: var(--raised); box-shadow: none; color: var(--ink-2); }
.card.hero { box-shadow: var(--glow), var(--shadow); background: linear-gradient(160deg, rgba(56, 189, 248, .12), var(--glass) 55%); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card-head h3 { font-size: 13.5px; font-weight: 800; }
.card-head .muted { margin-bottom: 0; }
.card.block .card-head { margin-bottom: 14px; }

/* Floating map chrome */
.toolbar {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 14px; box-shadow: var(--shadow);
  max-width: calc(100% - 24px); margin: 0;
}
.toolbar-dates { display: flex; gap: 6px; align-items: center; padding-left: 10px; border-left: 1px solid var(--line-2); }
.toolbar-dates label { flex-direction: row; align-items: center; gap: 6px; }
/* Wide enough for dd/mm/yyyy plus the calendar button at any font: the
   date script pads the right by 34px for the button. */
.toolbar-dates input.date, .toolbar-dates input.uk-date { width: 158px; min-width: 158px; padding: 6px 8px; font-size: 14px; }
.toolbar-dates .uk-date-wrap { width: auto; }
/* Bottom left of the map: the last updated time, the Leaflet credit and the
   OSM attribution the tile policy requires, as one chip with thin dividers. */
.attrib { position: absolute; left: 16px; bottom: 10px; z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: 0; font-size: 11.5px; color: var(--muted); padding: 5px 10px; border-radius: 8px; max-width: calc(100% - 90px); }
.attrib > * + * { padding-left: 10px; margin-left: 10px; border-left: 1px solid var(--line-2); }
.attrib #lastUpdated { color: var(--ink); font-weight: 700; }
.attrib a { color: var(--ink-2); font-weight: 600; }
.attrib a:hover { color: var(--blue); }
#site-version.version-badge { position: absolute; top: 8px; right: 10px; z-index: 20; font-size: 11px; color: var(--muted); opacity: .8; pointer-events: none; }

/* Drawer */
.drawer { position: relative; width: var(--drawer); flex: none; z-index: 30; display: flex; flex-direction: column; border-top: 0; border-right: 0; border-bottom: 0; border-left: 1px solid var(--line-2); overflow: hidden; }
.drawer-grab { display: none; }
.drawer-view { flex: 1; min-height: 0; overflow: auto; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 16px; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.drawer-section { display: flex; flex-direction: column; gap: 10px; }
.drawer-section + .drawer-section { padding-top: 16px; border-top: 1px solid var(--line); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.drawer-head h3, .legend-header h4 { font-size: 15px; font-weight: 800; }
.drawer-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }

/* Road search */
.search { display: flex; flex-direction: column; gap: 6px; position: relative; }
.search-box { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 12px; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line-2); }
.search-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.search-box svg { color: var(--muted); flex: none; }
.search-box input { border: 0; padding: 0; flex: 1; background: transparent; font-size: 14px; box-shadow: none; min-width: 0; }
.search-box input:focus { box-shadow: none; }
.road-search-suggestions { display: none; flex-direction: column; gap: 2px; padding: 4px; border-radius: 10px; background: #16203A; border: 1px solid var(--line-2); box-shadow: var(--shadow); max-height: 220px; overflow: auto; }
.road-search-suggestions.open { display: flex; }
.road-search-suggestion { padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); font-size: 13px; }
.road-search-suggestion.is-active, .road-search-suggestion:hover { background: var(--blue-soft); color: var(--blue); }

.range-stat { font-size: 12.5px; font-weight: 700; color: var(--amber); background: var(--amber-soft); border: 1px solid rgba(251, 191, 36, .3); border-radius: 8px; padding: 7px 10px; }

/* Traffic info legend, built by js/roadworks.js */
.legend-panel { display: flex; flex-direction: column; gap: 2px; }
.legend-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.legend-actions { display: flex; gap: 2px; }
.legend-action-btn { border: 0; background: transparent; color: var(--blue); font-weight: 700; font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.legend-action-btn:hover { background: var(--blue-soft); }
.legend-row { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); }
.legend-row:hover { background: var(--raised); }
.legend-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); cursor: pointer; flex: none; }
.legend-row .line-swatch { width: 22px; height: 6px; border-radius: 3px; flex: none; box-shadow: 0 0 10px rgba(255, 255, 255, .15); }
.legend-row .label { flex: 1; }
.legend-row:has(input:not(:checked)) { opacity: .45; }
.legend-empty { margin: 4px 0; font-style: italic; color: var(--muted); font-size: 13px; }

/* Route legend, the works on the drawn route */
.route-legend { display: flex; flex-direction: column; gap: 6px; }
.route-legend h4 { font-size: 13px; font-weight: 800; color: var(--ink-2); }
.route-legend ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); max-height: 260px; overflow: auto; }
.route-legend li { display: flex; flex-direction: column; gap: 1px; padding: 9px 6px 9px 12px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--cat, var(--blue)); cursor: pointer; border-radius: 0 6px 6px 0; }
.route-legend li:hover { background: var(--raised); }
.route-legend .road-name { font-weight: 700; }
.route-legend .road-type, .route-legend li > span:not(.road-name) { font-size: 12px; color: var(--muted); }

/* Route planner */
.route-actions, .route-save-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.route-actions .btn, .route-save-actions .btn { flex: 1; }
.route-save-status { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.route-save-status:empty { display: none; }
.route-save-status a { font-weight: 700; }

/* Notice detail view inside the drawer */
.drawer-view.detail { padding-top: 14px; position: relative; }
.drawer-view.detail::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--cat, var(--blue)); box-shadow: 0 0 16px var(--cat, var(--blue)); }
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--blue); font-weight: 700; font-size: 13px; cursor: pointer; padding: 4px 8px 4px 2px; border-radius: 8px; }
.back:hover { background: var(--blue-soft); }
.back svg { width: 16px; height: 16px; }
.detail-body { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.typepill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--raised-2); border: 1px solid var(--line); font-size: 12px; font-weight: 700; align-self: flex-start; }
.typepill i { width: 10px; height: 10px; border-radius: 50%; background: var(--cat, var(--blue)); box-shadow: 0 0 8px var(--cat, var(--blue)); }
.detail-body h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.detail-body .parish { color: var(--muted); font-weight: 600; }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dates div { background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.dates span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800; }
.dates b { font-size: 15px; font-variant-numeric: tabular-nums; }
.dl { display: flex; flex-direction: column; gap: 12px; }
.dl div span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800; margin-bottom: 2px; }
.dl div p { color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }

/* Alert feeds dialog, built by js/roadworks.js */
.webalert-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; z-index: 1200; }
.webalert-modal.is-visible { display: flex; }
.webalert-modal__backdrop { position: absolute; inset: 0; background: rgba(3, 7, 18, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.webalert-modal__content { position: relative; z-index: 1; width: min(560px, 100%); max-height: calc(100% - 32px); overflow: auto; background: var(--glass-strong); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--line-2); border-radius: 18px; padding: 28px; box-shadow: var(--glow), var(--shadow-lg); display: flex; flex-direction: column; gap: 10px; }
.webalert-modal__content h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; padding-right: 40px; }
.webalert-modal__content > p { color: var(--muted); }
.webalert-modal__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--raised); color: var(--ink-2); font-size: 22px; line-height: 1; cursor: pointer; }
.webalert-modal__close:hover { background: var(--raised-2); color: var(--ink); }
.webalert-modal__controls, .webalert-modal__item-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.webalert-modal__controls input, .webalert-modal__item-controls input { flex: 1 1 240px; font-size: 12px; color: var(--ink-2); background: rgba(0, 0, 0, .3); }
.webalert-modal__list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.webalert-modal__item { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.webalert-modal__item-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.webalert-modal__item-title { font-weight: 700; }
.webalert-modal__item-feedback, .webalert-modal__feedback { font-size: 12.5px; color: var(--blue); min-height: 0; }
.webalert-modal__preview { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.webalert-modal__preview img { display: block; width: 100%; max-width: 320px; height: auto; border-radius: 8px; border: 1px solid var(--line-2); }
.webalert-modal__preview figcaption { font-size: 12px; color: var(--muted); }

/* Stats */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tiles.three { grid-template-columns: repeat(3, 1fr); }
.tile { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); min-width: 0; }
.tile-label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.tile strong { font-size: 36px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; overflow-wrap: anywhere; }
.tile.hero { box-shadow: var(--glow), var(--shadow); background: linear-gradient(160deg, rgba(56, 189, 248, .14), var(--glass) 60%); }
.tile.hero strong { color: var(--blue); text-shadow: 0 0 24px rgba(56, 189, 248, .45); }
.tile-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.map.inset { height: clamp(360px, 55vh, 620px); border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); }
.heat-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.heat-legend i { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #3B82F6, #22D3EE, #A3E635, #FACC15, #EF4444); }
.source { font-size: 12px; color: var(--muted); margin-top: 10px; }
.source a, .card.soft a { color: var(--blue); }

/* Ranked lists on the stats page, built by js/stats.js */
.stats-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.road-item { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.road-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.road-header .label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 700; color: var(--ink); min-width: 0; }
.road-header .rank { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--raised-2); font-weight: 800; font-size: 12px; color: var(--ink-2); margin-right: 10px; font-variant-numeric: tabular-nums; }
.road-item:first-child .rank { background: var(--blue); color: var(--blue-ink); box-shadow: 0 0 14px rgba(56, 189, 248, .5); }
.road-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.road-actions .count { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--blue); }
.road-toggle { border: 1px solid var(--line-2); background: var(--raised); color: var(--ink-2); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.road-toggle:hover { background: var(--raised-2); color: var(--ink); }
.road-details { border-top: 1px solid var(--line); padding-top: 10px; }
.road-detail-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.road-detail-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); font-size: 13px; }
.road-detail-dates { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.road-detail-title { font-weight: 600; color: var(--ink-2); }
.road-detail-road, .road-detail-reason { color: var(--muted); font-size: 12.5px; }
.road-detail-note { margin-top: 8px; color: var(--muted); font-size: 12px; font-style: italic; }
.stats-empty { color: var(--muted); font-style: italic; }

/* School term tables, built by js/stats.js */
#termTables { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.term-year h3 { font-size: 13px; font-weight: 800; margin: 0 0 8px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; }
.term-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.term-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.term-table td:last-child { text-align: right; white-space: nowrap; }
.term-table tr.half-term td:first-child { padding-left: 24px; color: var(--muted); font-size: 12.5px; }
.term-table tr.overlaps td { background: var(--blue-soft); color: var(--ink); font-weight: 700; }
.term-table tr.overlaps td:first-child { box-shadow: inset 3px 0 0 var(--blue); border-radius: 8px 0 0 8px; }
.term-table tr.overlaps td:last-child { border-radius: 0 8px 8px 0; }

/* Heat map controls and the measured lists, added 07/10/2026 */
.heat-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.heat-controls label.inline { flex-direction: row; align-items: center; gap: 8px; }
.heat-controls select { min-width: 200px; }
.heat-controls label.check { cursor: pointer; }
.heat-controls label.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.card.block > .heat-note { margin-bottom: 12px; font-size: 12.5px; }
.heat-wrap { position: relative; }
.heat-wrap .map.inset { z-index: 0; transition: height .25s ease; }
.heat-wrap.expanded .map.inset { height: calc(100vh - 150px); }
.heat-expand { position: absolute; top: 12px; left: 12px; z-index: 10; background: var(--glass-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.heat-overlay { position: absolute; top: 12px; right: 12px; z-index: 10; width: min(300px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); font-size: 12.5px; }
.heat-overlay-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.heat-overlay-head strong { font-size: 13px; }
.heat-overlay button.tiny { border: 0; background: transparent; color: var(--blue); font-weight: 700; font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.heat-overlay button.tiny:hover { background: var(--blue-soft); }
.heat-overlay.collapsed .heat-figures, .heat-overlay.collapsed .heat-top { display: none; }
.heat-overlay.collapsed { width: auto; }
.heat-overlay.collapsed .heat-overlay-head { margin-bottom: 0; }
.heat-figures { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.heat-figures dt { color: var(--muted); font-weight: 600; white-space: nowrap; }
.heat-figures dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.heat-top { margin: 10px 0 0; padding: 10px 0 0 0; list-style: none; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.heat-top li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; }
.heat-top li b { font-weight: 700; }
.heat-top li small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }
.heat-top li .w { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--blue); }
.heat-top-title { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800; margin-bottom: 4px; }
.measure-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.measure-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.measure-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.measure-label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; min-width: 0; }
.measure-label .rank { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--raised-2); font-weight: 800; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.measure-row:first-child .rank { background: var(--blue); color: var(--blue-ink); box-shadow: 0 0 14px rgba(56, 189, 248, .5); }
.measure-label small { flex-basis: 100%; color: var(--muted); font-weight: 400; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.measure-swatch { width: 22px; height: 6px; border-radius: 3px; flex: none; }
.measure-value { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.measure-bar { height: 6px; background: var(--raised-2); border-radius: 3px; overflow: hidden; }
.measure-bar i { display: block; height: 100%; background: var(--blue); border-radius: 3px; box-shadow: 0 0 10px rgba(56, 189, 248, .5); }
.measure-empty { color: var(--muted); font-style: italic; padding: 8px 0; }
.daychart { display: block; width: 100%; height: auto; margin-top: 6px; }
.daychart .grid { stroke: var(--line); stroke-width: 1; }
.daychart .axis { fill: var(--muted); font-size: 11px; font-family: inherit; }
.daychart .bar { fill: var(--blue); stroke: none; opacity: .85; }
.daychart .bar:hover { opacity: 1; filter: drop-shadow(0 0 6px rgba(56, 189, 248, .8)); }

/* Prose pages */
.prose { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--ink-2); padding: 28px 32px; line-height: 1.6; }
.prose h2 { font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 14px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0; padding-left: 20px; }
.timeline { display: flex; flex-direction: column; margin-top: 16px; border-left: 2px solid var(--line-2); }
.timeline div { padding: 6px 0 6px 18px; position: relative; }
.timeline div::before { content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px rgba(56, 189, 248, .7); }
.timeline span { display: inline-block; width: 110px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Development updates */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; background: transparent; padding: 10px 14px; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 8px; border-radius: 0; }
.tabs button:hover { color: var(--ink-2); }
.tabs button.active { color: var(--ink); border-bottom-color: var(--blue); }
.tabs .count { background: var(--raised-2); padding: 1px 8px; border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums; }
.status-row { display: flex; gap: 10px; flex-wrap: wrap; }
.status-chip { display: flex; align-items: baseline; gap: 8px; background: var(--glass); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.status-chip strong { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.status-chip span { font-size: 12px; color: var(--muted); font-weight: 700; }
.issue-table { width: 100%; border-collapse: collapse; }
.issue-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 6px 10px 10px; border-bottom: 1px solid var(--line-2); font-weight: 800; }
.issue-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; font-weight: 600; }
.issue-table tr:last-child td { border-bottom: 0; }
.issue-table .status-col { width: 150px; }
.issue-meta { color: var(--muted); font-size: 12.5px; font-weight: 400; margin-top: 2px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.status-pill[data-status="open"] { background: var(--red-soft); color: var(--red); border-color: rgba(248, 113, 113, .3); }
.status-pill[data-status="in-progress"] { background: var(--amber-soft); color: var(--amber); border-color: rgba(251, 191, 36, .3); }
.status-pill[data-status="planned"] { background: var(--violet-soft); color: var(--violet); border-color: rgba(167, 139, 250, .3); }
.status-pill[data-status="resolved"] { background: var(--green-soft); color: var(--green); border-color: rgba(74, 222, 128, .3); }

/* Admin console */
.secret { display: flex; flex-direction: column; gap: 4px; }
.secret-row { display: flex; gap: 8px; align-items: center; }
.secret-row input { width: 240px; }
.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.admin-grid .span2 { grid-column: span 2; }
.admin-grid .span3 { grid-column: span 3; }
.field-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0; }
.field-row.stack { flex-direction: column; align-items: stretch; }
.field-row label.grow { flex: 1; }
.field-row label.grow input { width: 100%; }
.button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.param-list { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.param-list strong { color: var(--ink-2); }
.param-list code, .lede code { background: rgba(0, 0, 0, .3); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.request-preview { margin-top: 14px; }
.request-preview h3 { margin: 0 0 6px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.request-preview pre, .code { background: rgba(0, 0, 0, .4); color: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: auto; margin: 0; white-space: pre-wrap; word-break: break-all; }
.loop-status { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.loop-status strong { font-size: 15px; }

/* Response log, built by admin/admin.html and auto.html */
.log { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 60vh; overflow: auto; }
.log-entry { background: var(--raised); border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.log-entry.success { border-left-color: var(--green); }
.log-entry.error { border-left-color: var(--red); }
.log-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.log-title, .log-entry h3 { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--blue); font-weight: 700; }
.log-status { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--raised-2); color: var(--ink-2); }
.log-entry.success .log-status { background: var(--green-soft); color: var(--green); }
.log-entry.error .log-status { background: var(--red-soft); color: var(--red); }
.log-entry time { font-size: 12px; color: var(--muted); }
.log-description { color: var(--ink-2); }
.log-details { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; margin: 6px 0 0; font-size: 13px; }
.log-details dt { font-weight: 700; color: var(--muted); }
.log-details dd { margin: 0; white-space: pre-line; color: var(--ink-2); overflow-wrap: anywhere; }
.log-entry pre { margin: 4px 0 0; font: 12px/1.5 ui-monospace, Menlo, monospace; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }

/* Auto loop and weekly scrape */
.progress-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.progress-head strong { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.status-box { padding: 14px 16px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.status-box strong { font-size: 17px; font-weight: 800; }
.stat-dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; }
.stat-dl > div { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.stat-dl dt { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.stat-dl dd { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-dl > div:last-child { box-shadow: var(--glow), var(--shadow); }
.stat-dl > div:last-child dd { color: var(--blue); text-shadow: 0 0 24px rgba(56, 189, 248, .45); }

/* Live buses: the drawer toggle and the map markers. A marker is a Leaflet
   divIcon: a round badge carrying the line number with a small arrow on its
   rim pointing the way the bus is heading. Amber means the bus has barely
   moved in five minutes; faded means its last report is getting old. */
.bus-toggle .bus-swatch { width: 22px; height: 14px; border-radius: 4px; background: var(--blue); flex: none; box-shadow: 0 0 10px rgba(56, 189, 248, .5); }
.bus-icon { background: none; border: 0; }
.bus-icon .bus-arrow { position: absolute; inset: 0; transform-origin: 50% 50%; }
.bus-icon .bus-arrow::before { content: ""; position: absolute; left: 50%; top: -2px; width: 0; height: 0; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.bus-icon.no-heading .bus-arrow { display: none; }
.bus-icon .bus-line { position: absolute; inset: 6px; border-radius: 50%; background: var(--blue); color: var(--blue-ink); font-weight: 800; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .55); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bus-icon.stalled .bus-line { background: var(--amber); animation: busPulse 1.8s ease-in-out infinite; }
.bus-icon.stale { opacity: .45; }
.bus-icon.stale .bus-line { animation: none; }
@keyframes busPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, .6), 0 2px 8px rgba(0, 0, 0, .55); } 50% { box-shadow: 0 0 0 9px rgba(251, 191, 36, 0), 0 2px 8px rgba(0, 0, 0, .55); } }
.bus-popup { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.bus-popup .bus-popup-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.bus-popup .bus-popup-line { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--blue); color: var(--blue-ink); font-size: 12px; }
.bus-popup.stalled .bus-popup-line { background: var(--amber); }
.bus-popup .muted { font-size: 12px; }
.bus-popup .bus-popup-flag { color: var(--amber); font-weight: 700; }

/* Leaflet */
.leaflet-container { font-family: inherit; background: var(--canvas); }
.leaflet-control-attribution { display: none; }
.leaflet-control-zoom { border: 1px solid var(--line-2) !important; border-radius: 10px !important; overflow: hidden; box-shadow: var(--shadow) !important; background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); margin: 0 16px 36px 0 !important; }
.leaflet-control-zoom a { width: 38px !important; height: 38px !important; line-height: 38px !important; background: transparent !important; color: var(--ink) !important; border: 0 !important; font-weight: 700; font-size: 18px; }
.leaflet-control-zoom a + a { border-top: 1px solid var(--line-2) !important; }
.leaflet-control-zoom a:hover { background: var(--raised-2) !important; color: var(--blue) !important; }
.leaflet-bar a.leaflet-disabled { opacity: .4; }
.leaflet-popup-content-wrapper { background: var(--glass-strong); color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-lg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.leaflet-popup-content { margin: 10px 14px; font-size: 13px; line-height: 1.4; }
.leaflet-popup-tip { background: #16203A; }
.leaflet-popup-close-button { color: var(--muted) !important; }
.leaflet-tooltip { background: #16203A; color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--shadow); font-weight: 700; font-size: 12px; padding: 4px 8px; }
.leaflet-tooltip-top::before { border-top-color: var(--line-2); }
.leaflet-routing-container { display: none !important; }
.leaflet-top.leaflet-left, .leaflet-top.leaflet-right { display: none; }

/* Narrow desktop: a side drawer needs room, so between a laptop and a
   tablet the drawer slims down and the toolbar stacks into two rows. */
@media (max-width: 1140px) {
  :root { --drawer: 320px; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 6px; }
  .toolbar-dates { padding-left: 0; border-left: 0; justify-content: space-between; }
  .toolbar-dates label span.lbl-text { display: none; }
  .toolbar-dates label { flex: 1; }
  .toolbar-dates .uk-date-wrap { width: 100%; }
  .toolbar-dates { flex-wrap: wrap; }
  .toolbar-dates label { flex: 1 1 140px; }
  .toolbar-dates input.date, .toolbar-dates input.uk-date { width: 100%; min-width: 140px; }
}

/* Tablet content pages */
@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .two { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr 1fr; }
  .admin-grid .span3 { grid-column: span 2; }
  .period-pick { align-items: flex-start; }
}

/* Tablet and phone map: the rail becomes a bottom tab bar and the drawer a
   bottom sheet. Below 900px there is no room for a side drawer beside a map. */
@media (max-width: 900px) {
  .rail {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; height: var(--tabbar);
    flex-direction: row; justify-content: space-around; align-items: stretch; gap: 0; padding: 4px 6px 6px;
    border-right: 0; border-top: 1px solid var(--line-2);
  }
  .rail .logo { display: none; }
  .rail .spacer { display: none; }
  .rail a:not(.logo) { width: auto; flex: 1; height: auto; flex-direction: column; gap: 2px; border-radius: 10px; }
  .rail a svg { width: 20px; height: 20px; }
  .rail a .lbl { display: block; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
  .rail a[data-tip]::after { display: none; }

  .screen-map { inset: 0 0 var(--tabbar) 0; flex-direction: column; }
  .stage { flex: 1; min-height: 0; }
  .drawer { width: auto; height: 62%; flex: none; border-left: 0; border-top: 1px solid var(--line-2); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); transition: height .25s ease; }
  /* Folded, the sheet is the handle and the date toolbar only, so the map
     keeps the rest of the screen. The script moves the toolbar in here. */
  .drawer.collapsed { height: auto; }
  .drawer.collapsed .drawer-view { display: none; }
  .drawer-grab { display: block; width: 48px; height: 5px; margin: 10px auto 2px; border-radius: 3px; background: var(--line-2); flex: none; cursor: pointer; position: relative; }
  .drawer-grab::before { content: ""; position: absolute; inset: -12px -40px; }
  .drawer-view { padding: 12px 14px 14px; gap: 12px; }
  .drawer .toolbar { position: static; left: auto; right: auto; transform: none; max-width: none; margin: 8px 60px 10px 12px; box-shadow: none; flex: none; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
  .drawer .toolbar-dates label { flex: 1 1 118px; }
  .drawer .toolbar-dates input.date, .drawer .toolbar-dates input.uk-date { min-width: 118px; }

  .toolbar { left: 12px; right: 12px; transform: none; max-width: none; }
  .toolbar .seg { display: grid; grid-template-columns: repeat(3, 1fr); }
  .toolbar .seg button { padding: 6px 4px; font-size: 12px; }
  .leaflet-control-zoom { margin: 0 12px 12px 0 !important; }
  .attrib { left: 8px; bottom: 8px; font-size: 10.5px; padding: 4px 8px; max-width: calc(100% - 76px); }
  .attrib > * + * { padding-left: 0; margin-left: 8px; border-left: 0; }
  #site-version.version-badge { top: auto; bottom: 6px; right: 8px; }

  .screen-page { padding-left: 0; padding-bottom: var(--tabbar); }
}

/* Phone content pages */
@media (max-width: 600px) {
  .detail-body h2 { font-size: 21px; }
  .page { padding: 24px 16px 60px; }
  .page-head h1 { font-size: 28px; }
  .tiles, .tiles.three, .stat-dl { grid-template-columns: 1fr; }
  .tile strong, .stat-dl dd { font-size: 32px; }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-grid .span2, .admin-grid .span3 { grid-column: span 1; }
  .prose { padding: 20px 18px; }
  .webalert-modal__content { padding: 22px 18px; }
  .issue-table th:nth-child(3), .issue-table td:nth-child(3) { display: none; }
  .log-details { grid-template-columns: 1fr; }
  .secret-row input { width: 100%; }
  .card-head { flex-direction: column; }
  .heat-overlay { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: 55%; }
  .heat-overlay:not(.collapsed) .heat-top { display: none; }
  .heat-wrap.expanded .map.inset { height: calc(100vh - 100px); }
  .heat-controls .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .heat-controls .seg button { padding: 7px 6px; font-size: 12.5px; }
  .heat-controls label.inline { width: 100%; }
  .heat-controls select { flex: 1; min-width: 0; }
}

/* Section navigation on long pages: a sticky pill bar on a wide screen, a
   floating button with a popover list on a phone. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 76px; }
.section-nav { position: sticky; top: 12px; z-index: 40; margin: -4px 0 0; }
.section-nav ul { list-style: none; margin: 0; padding: 5px; display: flex; gap: 2px; overflow-x: auto; background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line-2); border-radius: 999px; box-shadow: var(--shadow); scrollbar-width: none; }
.section-nav ul::-webkit-scrollbar { display: none; }
.section-nav a { display: inline-block; padding: 6px 12px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
.section-nav a:hover { color: var(--ink); background: var(--raised-2); text-decoration: none; }
.section-nav a.active { background: var(--blue-soft); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-line); }
.section-nav-toggle { display: none; }

/* Phone tab bar toggle on the map pages, created by js/roadworks.js. */
.nav-toggle { display: none; }

@media (max-width: 900px) {
  [id] { scroll-margin-top: 16px; }
  .section-nav { position: fixed; top: auto; bottom: calc(var(--tabbar) + 12px); right: 12px; margin: 0; z-index: 70; }
  .section-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-lg); }
  .section-nav-toggle svg { width: 22px; height: 22px; }
  .section-nav.open .section-nav-toggle { background: var(--blue); color: var(--blue-ink); border-color: transparent; }
  .section-nav ul { display: none; position: absolute; right: 0; bottom: 60px; flex-direction: column; min-width: 210px; border-radius: 14px; padding: 6px; }
  .section-nav.open ul { display: flex; }
  .section-nav a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 14px; }

  .rail { transition: transform .25s ease; }
  body.nav-hidden .rail { transform: translateY(100%); }
  body.nav-hidden .screen-map { bottom: 0; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; position: fixed; right: 12px; bottom: calc(var(--tabbar) + 10px); z-index: 70; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--ink); cursor: pointer; box-shadow: var(--shadow); transition: bottom .25s ease; }
  .nav-toggle svg { width: 18px; height: 18px; transition: transform .25s ease; }
  body.nav-hidden .nav-toggle { bottom: 10px; }
  body.nav-hidden .nav-toggle svg { transform: rotate(180deg); }
  body.nav-hidden .drawer .toolbar { margin-bottom: 14px; }
}