/* TheftScore brand layer: Redline mark + UI kit. Loads after brief.css.
   Signature details: bevelled bottom-right corner (the gauge's "redline" end),
   lime sweep bar on hover, 1px press. Motion only when the visitor allows it. */

:root {
  --cut: 9px;
  --cut-sm: 6px;
  --ease-out: cubic-bezier(.22, .8, .3, 1);
  --sweep: linear-gradient(var(--signal), var(--signal));
  --bm-arc: var(--forest);
  --bm-red: #a8182c;
  --bm-red-hot: #e2342a;
  --bm-fine: #9aa79f;
  --bm-needle: var(--ink);
  --bm-bg: var(--paper);
}

::selection { background: var(--signal); color: var(--ink); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--forest); }

/* ---------- logo ---------- */
.brand-mark .bm-arc { fill: var(--bm-arc); }
.brand-mark .bm-red, .brand-mark .bm-tick.is-red { fill: var(--bm-red); }
.brand-mark .bm-tick { fill: var(--bm-fine); }
.brand-mark .bm-needle path, .brand-mark .bm-hub { fill: var(--bm-needle); }
.brand-mark .bm-dot { fill: var(--bm-bg); }
.brand-mark .bm-needle { transform-box: view-box; transform-origin: 30px 30px; transform: rotate(40.8deg); }

.site-header .brand-mark { width: 38px; height: 30px; margin-right: .65rem; overflow: visible; }
.site-footer .brand-mark { width: 34px; height: 27px; margin-right: .6rem; }
.site-footer { --bm-arc: var(--paper); --bm-red: #e0533a; --bm-red-hot: #ff6a4d; --bm-fine: #6f8f7e; --bm-needle: var(--paper); --bm-bg: var(--ink); }
.brand strong { color: var(--forest); }
.site-footer .brand strong { color: var(--signal); }
@media (max-width: 420px) {
  .site-header .brand { font-size: 1.08rem; }
  .site-header .brand-mark { display: block; width: 28px; height: 22px; margin-right: .4rem; }
  .site-header .nav-toggle { width: 40px; padding: 0; justify-content: center; font-size: 0; }
  .site-header .nav-toggle::before { content: ""; width: 16px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-mark .bm-needle { transition: transform .7s var(--ease-out); }
  .brand-mark .bm-red, .brand-mark .bm-tick.is-red { transition: fill .3s ease; }

  /* First visit of the session: the needle sweeps up into the red and settles on 67 */
  .js:not(.bm-seen) .site-header .bm-needle { animation: bm-start 1.35s .15s backwards; }
  .js:not(.bm-seen) .site-header .bm-red,
  .js:not(.bm-seen) .site-header .bm-tick.is-red { animation: bm-hot 1.35s .15s backwards; }

  /* Hover: flick into the redline */
  .brand:hover .bm-needle, .brand:focus-visible .bm-needle { transform: rotate(80deg); transition: transform .42s cubic-bezier(.2, 1.5, .45, 1); }
  .brand:hover .bm-red, .brand:hover .bm-tick.is-red,
  .brand:focus-visible .bm-red, .brand:focus-visible .bm-tick.is-red { fill: var(--bm-red-hot); }

  /* Page loading: rev */
  body.is-navigating .site-header .bm-needle { animation: bm-rev .5s ease-in-out infinite alternate; }
}

@keyframes bm-start {
  0%   { transform: rotate(-120deg); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  45%  { transform: rotate(86deg);   animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  66%  { transform: rotate(30deg);   animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  83%  { transform: rotate(46deg);   animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  100% { transform: rotate(40.8deg); }
}
@keyframes bm-hot {
  0%, 30% { fill: var(--bm-red); }
  45%     { fill: var(--bm-red-hot); }
  70%, 100% { fill: var(--bm-red); }
}
@keyframes bm-rev {
  from { transform: rotate(-40deg); }
  to   { transform: rotate(86deg); }
}

/* ---------- buttons ---------- */
/* Shared mechanics for every button-like control */
:is(.btn, .button-link, .cta, .stolen-btn, .section-link, .saved-trigger, .nav-toggle, .quiet-button, .danger-button,
    .report-submit, .report-quiet, .report-danger, .filter-primary > button, .compare-selects button,
    .lab-add-bike > button, .lab-plan-action > button, .lab-quote-form > button, .lab-analysis-head button,
    .lab-runner-head > button, .lab-run-actions a, .lab-run-actions button, .watch-dialog-foot button,
    .home-following-head button, .home-return-actions button, .home-return-actions a,
    .plate-form button, .search-box button, .discovery-box button, .context-search button,
    .pattern-selector button, .report-link button, .analytics-consent button, .follow-actions a, .data-note-actions button) {
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 3px;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, background-size .32s var(--ease-out), transform .08s ease;
}
:is(.btn, .button-link, .cta, .stolen-btn, .section-link, .saved-trigger, .nav-toggle, .quiet-button, .danger-button,
    .report-submit, .report-quiet, .report-danger, .filter-primary > button, .compare-selects button,
    .lab-add-bike > button, .lab-plan-action > button, .lab-quote-form > button, .lab-analysis-head button,
    .lab-runner-head > button, .lab-run-actions a, .lab-run-actions button, .watch-dialog-foot button,
    .home-following-head button, .home-return-actions button, .home-return-actions a,
    .plate-form button, .search-box button, .discovery-box button, .context-search button,
    .pattern-selector button, .report-link button, .analytics-consent button, .follow-actions a, .data-note-actions button):active:not(:disabled) {
  transform: translateY(1px);
}

/* Primary: ink fill, paper type, forest on hover with a lime sweep along the base */
.btn.primary, button.primary, .button-link, .filter-primary > button, .compare-selects button,
.lab-add-bike > button, .lab-plan-action > button, .lab-quote-form > button, .lab-analysis-head button, .report-submit,
.plate-form button, .search-box button, .discovery-box button, .home-hero .discovery-box button, .context-search button,
.pattern-selector button, .report-link button {
  border-color: var(--ink);
  background: var(--ink) var(--sweep) no-repeat 0 100% / 0 3px;
  color: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.report-submit, .button-link { font-size: 1.1rem; }
.button-link { display: inline-flex; align-items: center; min-height: 48px; margin-top: 1.2rem; padding: 0 1.3rem; }
.discovery-box button, .home-hero .discovery-box button { font-size: .95rem; }
.btn.primary:hover, button.primary:hover, .button-link:hover, .filter-primary > button:hover, .compare-selects button:hover,
.lab-add-bike > button:hover, .lab-plan-action > button:hover, .lab-quote-form > button:hover, .lab-analysis-head button:hover,
.report-submit:hover:not(:disabled), .plate-form button:hover, .search-box button:hover, .discovery-box button:hover,
.context-search button:hover, .pattern-selector button:hover, .report-link button:hover,
.btn.primary[aria-pressed="true"] {
  border-color: var(--forest);
  background-color: var(--forest);
  background-size: 100% 3px;
  color: var(--paper);
}

/* Secondary: 2px ink outline, lime fill on hover */
.btn:not(.primary), .section-link, .site-header .saved-trigger, .site-header .nav-toggle,
.home-following-head button, .home-return-actions button, .home-return-actions a {
  border: 2px solid var(--ink);
  background-color: transparent;
  color: var(--ink);
}
.btn:not(.primary):hover, .section-link:hover, .site-header .saved-trigger:hover, .site-header .nav-toggle:hover,
.home-following-head button:hover, .home-return-actions button:hover, .home-return-actions a:hover {
  background-color: var(--signal);
  color: var(--ink);
}
.connected-actions .section-link.secondary { border-color: var(--ink); background-color: transparent; }
.connected-actions .section-link.secondary:hover { background-color: var(--signal); }
.section-link span { display: inline-block; transition: transform .25s var(--ease-out); }
.section-link:hover span { transform: translateX(4px); }

/* Small: dense toolbar buttons, 1px ink outline */
.quiet-button, .report-quiet, .lab-runner-head > button, .lab-run-actions a, .lab-run-actions button, .watch-dialog-foot button {
  border: 1px solid var(--ink);
  background-color: var(--panel);
  color: var(--ink);
}
.quiet-button:hover, .report-quiet:hover, .lab-runner-head > button:hover, .lab-run-actions a:hover,
.lab-run-actions button:hover, .watch-dialog-foot button:hover { border-color: var(--ink); background-color: var(--signal); color: var(--ink); }

/* Danger */
.danger-button { color: var(--alert); }
.danger-button:hover, .report-danger:hover { border-color: var(--alert); background-color: var(--alert); color: #fff; }
.report-danger { border-color: var(--alert); background-color: var(--alert); color: #fff; }
.report-danger:hover { border-color: #a91f17; background-color: #a91f17; }

/* Alert: the "Bike stolen?" call */
.stolen-btn { background-image: linear-gradient(#fff, #fff); background-size: 0 3px; }
.stolen-btn:hover { background-color: #a91f17; background-size: 100% 3px; }

/* On dark panels */
.follow-actions .cta { background: var(--signal) linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 0 3px; }
.follow-actions .cta:hover { border-color: var(--paper); background-color: var(--paper); background-size: 100% 3px; color: var(--ink); }
.follow-actions a:not(.cta):hover { border-color: var(--signal); color: var(--signal); }
.alert-panel .cta { background: #fff linear-gradient(var(--alert), var(--alert)) no-repeat 0 100% / 0 3px; }
.alert-panel .cta:hover { background-color: var(--paper); background-size: 100% 3px; color: var(--alert); }
.data-note-actions button:hover { border-color: var(--signal); color: var(--signal); }

/* Bevelled corner. True chamfer (border and focus ring follow it) where supported... */
@supports (corner-shape: bevel) {
  .btn, .button-link, .cta, .stolen-btn, .section-link, .site-header .saved-trigger, .site-header .nav-toggle,
  .report-submit, .report-quiet, .report-danger, .filter-primary > button, .compare-selects button,
  .lab-add-bike > button, .lab-plan-action > button, .lab-quote-form > button, .lab-analysis-head button,
  .home-following-head button, .home-return-actions button, .home-return-actions a,
  .follow-actions a, .analytics-consent button, .discovery-box button {
    border-bottom-right-radius: var(--cut);
    corner-shape: bevel;
  }
  .quiet-button, .lab-runner-head > button, .lab-run-actions a, .lab-run-actions button, .watch-dialog-foot button {
    border-bottom-right-radius: var(--cut-sm);
    corner-shape: bevel;
  }
  .site-header .saved-trigger span { border-bottom-right-radius: 4px; corner-shape: bevel; }
}
/* ...otherwise clip the filled buttons only, with the focus ring drawn inside the clip */
@supports not (corner-shape: bevel) {
  .btn.primary, .button-link, .stolen-btn, .report-submit, .report-danger, .filter-primary > button, .compare-selects button,
  .lab-quote-form > button, .lab-analysis-head button, .alert-panel .cta, .follow-actions .cta {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  }
  :is(.btn.primary, .button-link, .stolen-btn, .report-submit, .report-danger, .filter-primary > button, .compare-selects button,
      .lab-quote-form > button, .lab-analysis-head button, .alert-panel .cta, .follow-actions .cta):focus-visible {
    outline: 3px solid var(--signal); outline-offset: -6px; box-shadow: none;
  }
}

/* ---------- form controls ---------- */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23101712' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 11px 8px;
}
.report-field select { width: 100%; min-height: 50px; padding: .7rem 2.3rem .7rem .85rem; border: 1px solid var(--ink); border-radius: 0; background-color: var(--panel); color: inherit; font: inherit; }
:is(.filter-primary, .filter-secondary, .compare-selects, .pattern-selector, .report-field, .lab-quote-form, .watch-dialog-body) :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), textarea) {
  transition: border-color .15s ease, background-color .15s ease;
}
:is(.filter-primary, .filter-secondary, .compare-selects, .report-field, .lab-quote-form) :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), textarea):hover { border-color: var(--forest); }
:is(.filter-primary, .filter-secondary, .compare-selects, .report-field, .lab-quote-form) :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), textarea):focus-visible {
  border-color: var(--forest); background-color: #fff; outline: 3px solid var(--signal); outline-offset: 0; box-shadow: none;
}
input::placeholder, textarea::placeholder { color: #7a837c; opacity: 1; }
.plate-form input::placeholder { color: #6b5a0c; }

/* ---------- tabs and chips ---------- */
.home-tab-list button, .model-tab-list button { transition: background-color .15s ease, color .15s ease; }
.home-tab-list button[aria-selected="true"], .model-tab-list button[aria-selected="true"] { background: var(--ink); }

/* ---------- inline links ---------- */
main :is(p, li) a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-dark);
  text-underline-offset: .2em;
  transition: text-decoration-color .15s ease;
}
main :is(p, li) a:not([class]):hover { text-decoration-color: var(--forest); text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: reduce) {
  :is(.btn, .button-link, .cta, .stolen-btn, .section-link, .report-submit) { transition: none; }
  .section-link:hover span { transform: none; }
}

/* ---------- score scale, matched to the logo ---------- */
/* Forest tones up to 79, red from the 80 redline. Darker means more likely to be stolen. */
:root { --b1: #8aa797; --b2: #5f8a76; --b3: #33644f; --b4: #113d31; --b5: #d13b2a; --b6: #a8182c; }
.gauge .tick.is-red { stroke: var(--b6); }
.gauge .needle { stroke-width: 5; stroke-linecap: butt; }
.gauge .hub-dot { fill: var(--panel, #faf9f4); }
.gauge .zone.dim { opacity: .2; }
.tone-b1 { color: #4f7362; } .tone-b2 { color: #3f6b5a; } .tone-b3 { color: var(--b3); } .tone-b4 { color: var(--b4); }
.band-low, .band-lower { --risk: #4f7362; }
.band-typical { --risk: var(--b3); }
.band-elevated { --risk: var(--b4); }
.down, .movement.is-down { color: var(--b3); }
.movement.is-down { border-color: var(--b3); }
.bars .bar.last { fill: var(--ink); }

/* ---------- theft map ---------- */
/* Leaflet's own CSS loads after this file and sets display:block on marker icons, hence the doubled class */
.leaflet-marker-icon.live-map-cluster { display: grid; }
/* Grey base map so the numbered circles and red owner pins carry the colour */
/* Tall enough on desktop for mainland GB to fit at zoom 6 (about 704px of map) */
.live-map-canvas { background: #e6e5dd; }
@media (min-width: 900px) { .live-map-canvas { height: 720px; } }
.live-map-canvas .leaflet-tile { filter: grayscale(1) contrast(.8) brightness(1.08); }
.leaflet-marker-icon.live-map-place, .key-place { display: grid; place-items: center; border: 2px solid var(--paper); border-radius: 50%; background: var(--forest); color: var(--paper); box-shadow: 0 0 0 1px var(--forest), 0 1px 4px rgba(16,23,18,.28); font: 700 .78rem/1 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s ease; }
/* Groups: same forest disc with a lime ring, so they read as "more inside" */
.live-map-place.is-group, .key-place.is-group { box-shadow: 0 0 0 1px var(--forest), 0 0 0 4px var(--signal), 0 0 0 5px var(--forest), 0 1px 6px rgba(16,23,18,.3); font-weight: 800; }
.live-map-place:hover, .live-map-place:focus-visible { background: var(--ink); color: var(--paper); }
.live-map-place:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.key-place { flex: none; width: 24px; height: 24px; font-size: .66rem; cursor: default; }
.key-place.is-group { width: 26px; height: 26px; margin: 4px; }
.key-pin { width: 16px; height: 16px; }
.live-map-key { gap: .6rem 1.4rem; color: var(--ink); }
.live-map-key > span { gap: .5rem; }
.live-map-layer > span { white-space: nowrap; }
/* The row link must fill its flex row, or the counts sit beside the names instead of in a column */
.map-ranking li a { flex: 1; }
@media (max-width: 640px) {
  .live-map-key { display: grid; gap: .55rem; }
  .live-map-key a { justify-self: start; margin-left: 0; }
}

/* ---------- theft map: views, bike types, legend, newest reports, seasonality ---------- */
.live-map-switch { display: inline-flex; border: 1px solid var(--ink); }
.live-map-switch[hidden] { display: none; }
.live-map-switch button { min-height: 36px; padding: .45rem .8rem; border: 0; border-left: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: 600 .85rem/1 var(--sans); cursor: pointer; }
.live-map-switch button:first-child { border-left: 0; }
.live-map-switch button:hover { background: rgba(199,239,41,.25); }
.live-map-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.live-map-switch button:focus-visible, .live-map-chips button:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; position: relative; }
.live-map-controls { justify-content: flex-start; }
.live-map-controls .live-map-layer { margin-left: auto; }
.live-map-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 1rem; border-bottom: 1px solid var(--ink); }
.live-map-chips button { flex: none; min-height: 32px; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 .82rem/1 var(--sans); cursor: pointer; }
.live-map-chips button:hover { border-color: var(--ink); }
.live-map-chips button[aria-pressed="true"] { border-color: var(--forest); background: var(--forest); color: var(--paper); }
.live-map-legend { display: grid; gap: .35rem; padding: .7rem 1rem; border-top: 1px solid var(--ink); font: .8rem/1.3 var(--sans); }
.live-map-legend:empty { display: none; }
.live-legend-title { margin: 0; font-weight: 600; }
.live-legend-ramp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; max-width: 420px; }
.live-legend-ramp span { height: 12px; }
.live-legend-breaks { display: flex; justify-content: space-between; max-width: 420px; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.live-legend-gap { display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--muted); font-size: .75rem; }
.live-legend-gap i { width: 14px; height: 12px; }
.live-map-heat { pointer-events: none; }
/* Newest reports: a red dot with a ring that pulses outwards */
.leaflet-marker-icon.live-map-new, .key-new { display: grid; place-items: center; }
.live-map-new span, .key-new, .map-new i { position: relative; display: block; width: 10px; height: 10px; border: 2px solid var(--paper); border-radius: 50%; background: var(--very-high); box-shadow: 0 0 0 1px var(--very-high); }
.key-new { flex: none; }
.live-map-new span::after, .map-new i::after, .live-map-place.is-new::after, .live-map-pin.is-new span::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--very-high); border-radius: 50%; opacity: 0; pointer-events: none; }
.leaflet-marker-icon.live-map-place.is-new { position: absolute; }
.live-map-place.is-new { border-color: var(--very-high); }
.live-map-pin.is-new span { position: relative; }
.map-new { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .55rem 1rem; border-bottom: 1px solid var(--ink); background: rgba(199,239,41,.18); font: 600 .85rem/1.3 var(--sans); }
.map-new i { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .live-map-new span::after, .map-new i::after, .live-map-place.is-new::after, .live-map-pin.is-new span::after { animation: map-pulse 2.2s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .live-map-new span::after, .map-new i::after, .live-map-place.is-new::after { opacity: .5; }
}
@keyframes map-pulse { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
/* Region tooltips and popups */
.live-map-tip.live-region-tip { max-width: 260px; padding: .6rem .75rem; border: 1px solid var(--ink); border-radius: 0; background: var(--panel); color: var(--ink); box-shadow: 3px 3px 0 rgba(16,23,18,.18); white-space: normal; }
.live-region p { margin: .25rem 0 0; }
.live-region-name { display: block; font: 700 1rem/1.15 var(--sans); }
.live-region-value { font-weight: 600; }
.live-region-meta, .live-region-label { color: var(--muted); font-size: .8rem; }
.live-region-label { margin-top: .5rem !important; }
.live-region-change { font-size: .8rem; font-weight: 600; }
.live-region-change.is-up { color: var(--very-high); }
.live-region-change.is-down { color: var(--forest-2); }
.live-region-top { margin: .2rem 0 0; padding: 0; list-style: none; font-size: .82rem; }
.live-region-top li { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
/* Seasonality strip */
.season-strip { display: grid; gap: .7rem; padding: 1rem; border-top: 1px solid var(--ink); }
.season-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.season-heading h3 { margin: 0; font: 700 1.05rem/1.1 var(--display); text-transform: uppercase; }
.season-heading > span { color: var(--muted); font: .8rem/1.3 var(--sans); }
.season-bars { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 4px; height: 120px; margin: 0; padding: 0; list-style: none; }
.season-bars li { position: relative; display: grid; grid-template-rows: 1fr auto; height: 100%; outline: none; }
.season-bar { align-self: end; height: max(3px, var(--h)); border-radius: 3px 3px 0 0; background: var(--forest-2); opacity: .55; transition: height .35s ease, opacity .15s ease; }
.season-bars li.is-peak .season-bar { background: var(--forest); opacity: 1; }
.season-bars li.is-now .season-bar { background: var(--very-high); opacity: .85; }
.season-bars li:hover .season-bar, .season-bars li:focus-visible .season-bar { opacity: 1; }
.season-bars li:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.season-bars b { padding-top: .3rem; color: var(--muted); font: 500 .72rem/1 var(--sans); text-align: center; }
.season-bars li.is-now b { color: var(--very-high); font-weight: 700; }
.season-bars em { position: absolute; bottom: calc(var(--h) + 1.4rem); left: 50%; padding: .15rem .35rem; background: var(--ink); color: var(--paper); font: 600 .72rem/1 var(--sans); font-style: normal; white-space: nowrap; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.season-bars li.is-peak em, .season-bars li:hover em, .season-bars li:focus-visible em { opacity: 1; }
.season-bars:hover li.is-peak:not(:hover) em { opacity: 0; }
@media (max-width: 640px) {
  .live-map-controls { gap: .5rem; }
  .live-map-switch button { padding: .45rem .6rem; font-size: .8rem; }
  .live-map-controls .live-map-layer { margin-left: 0; }
  .season-bars b { font-size: .6rem; }
}

/* ---------- mobile menu ---------- */
/* Desktop keeps the inline text links; the search, descriptions and status only show in the sheet */
.site-header nav .nav-search, .site-header nav small, .site-header nav .nav-status { display: none; }
.nav-toggle i { display: none; }
@media (max-width: 980px) {
  .js .site-header .nav-toggle { gap: .5rem; }
  .nav-toggle i { position: relative; display: block; width: 16px; height: 2px; background: currentColor; transition: background-color .2s ease; }
  .nav-toggle i::before, .nav-toggle i::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; transition: transform .25s var(--ease-out, ease); }
  .nav-toggle i::before { transform: translateY(-5px); }
  .nav-toggle i::after { transform: translateY(5px); }
  .site-header .nav-toggle[aria-expanded="true"] { border-color: var(--ink); background: var(--ink); color: var(--signal); }
  .nav-toggle[aria-expanded="true"] i { background: transparent; }
  .nav-toggle[aria-expanded="true"] i::before { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] i::after { transform: rotate(-45deg); }
  .nav-open, .nav-open body { overflow: hidden; }
  /* above the map's Leaflet controls (z 1000) and the analytics banner while open */
  .nav-open .site-header { z-index: 1010; }

  .js .site-header nav.is-open {
    position: fixed; top: var(--nav-top, 64px); right: 0; bottom: 0; left: 0; z-index: 30;
    display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 1.1rem max(var(--gutter, 16px), env(safe-area-inset-right, 0px)) calc(1.2rem + env(safe-area-inset-bottom, 0px)) max(var(--gutter, 16px), env(safe-area-inset-left, 0px));
    overflow-y: auto; overscroll-behavior: contain; border-top: 0;
    background: var(--ink); color: var(--paper);
    /* faint road-grid, echoing the page background */
    background-image: linear-gradient(rgba(233,233,230,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(233,233,230,.04) 1px, transparent 1px);
    background-size: 48px 48px;
  }
  .js .site-header nav.is-open .nav-search { display: block; margin-bottom: 1rem; }
  .nav-search label { display: block; margin-bottom: .4rem; color: rgba(233,233,230,.7); font: 500 .8rem/1 var(--sans); }
  .nav-search > div { position: relative; display: flex; border: 2px solid var(--paper); background: var(--paper); }
  .nav-search input { flex: 1; min-width: 0; min-height: 46px; padding: 0 .8rem; border: 0; background: transparent; color: var(--ink); font: 500 1rem var(--sans); }
  .nav-search input:focus { outline: none; }
  .nav-search > div:focus-within { box-shadow: 0 0 0 3px var(--signal); }
  .nav-search button { padding: 0 1rem; border: 0; background: var(--signal); color: var(--ink); font: 700 1.05rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
  /* the animated rows below each form a stacking context, so lift the search and its list above them */
  .js .site-header nav.is-open .nav-search { position: relative; z-index: 5; }
  .nav-search .model-suggestions { position: absolute; top: 100%; left: -2px; right: -2px; z-index: 2; border: 2px solid var(--paper); background: var(--paper); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
  /* undo the header link styles that also match the suggestion links */
  .site-header nav .model-suggestions > a { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: .2rem; min-width: 0; min-height: 0; padding: .7rem .8rem; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink); font: inherit; }
  .site-header nav .model-suggestions > a:last-child { border-bottom: 0; }
  .site-header nav .model-suggestions > a:hover, .site-header nav .model-suggestions > a.is-active { background: var(--signal); }
  .site-header nav .model-suggestions > a > span:last-child { text-align: left; }

  .js .site-header nav.is-open > a {
    position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem;
    min-width: 0; min-height: 0; padding: .85rem 0 .85rem .9rem; border: 0; border-bottom: 1px solid rgba(233,233,230,.14);
    color: var(--paper); text-decoration: none;
  }
  .js .site-header nav.is-open > a::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; color: rgba(233,233,230,.45); font: 500 1.2rem/1 var(--sans); transition: transform .2s ease, color .2s ease; }
  .js .site-header nav.is-open > a::before { content: ""; position: absolute; top: .9rem; bottom: .9rem; left: 0; width: 3px; background: transparent; }
  .js .site-header nav.is-open > a span { font: 700 clamp(1.75rem, 8vw, 2.4rem)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
  .js .site-header nav.is-open > a small { display: block; margin-top: .3rem; color: rgba(233,233,230,.62); font: 400 .88rem/1.3 var(--sans); }
  .js .site-header nav.is-open > a:hover, .js .site-header nav.is-open > a:focus-visible { background: rgba(199,239,41,.07); color: var(--paper); }
  .js .site-header nav.is-open > a:hover::after, .js .site-header nav.is-open > a:focus-visible::after { color: var(--signal); transform: translateX(4px); }
  .js .site-header nav.is-open > a[aria-current="page"] { border-bottom: 1px solid rgba(233,233,230,.14); font-weight: inherit; }
  .js .site-header nav.is-open > a[aria-current="page"]::before { background: var(--signal); }
  .js .site-header nav.is-open > a[aria-current="page"] span { color: var(--signal); }
  .js .site-header nav.is-open .nav-status { display: flex; align-items: center; gap: .55rem; margin: auto 0 0; padding-top: 1.4rem; color: rgba(233,233,230,.62); font: 400 .8rem/1.3 var(--sans); }
  .nav-status i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
}
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  .js .site-header nav.is-open { animation: nav-sheet .28s var(--ease-out, ease) both; }
  .js .site-header nav.is-open > * { animation: nav-row .4s var(--ease-out, ease) both; }
  .js .site-header nav.is-open > :nth-child(2) { animation-delay: .04s; }
  .js .site-header nav.is-open > :nth-child(3) { animation-delay: .08s; }
  .js .site-header nav.is-open > :nth-child(4) { animation-delay: .12s; }
  .js .site-header nav.is-open > :nth-child(5) { animation-delay: .16s; }
  .js .site-header nav.is-open > :nth-child(6) { animation-delay: .2s; }
  .js .site-header nav.is-open > :nth-child(7) { animation-delay: .24s; }
  .nav-status i::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--signal); border-radius: 50%; animation: map-pulse 2.2s ease-out infinite; }
}
@keyframes nav-sheet { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes nav-row { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 420px) {
  /* icon-only toggle on small phones: drop the old ::before hamburger in favour of the animated one */
  .site-header .nav-toggle::before { content: none; }
  .site-header .nav-toggle [data-nav-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}