/* ==========================================================================
   map-ui.css — /map, the 2.0 interface layer.           RF-MAP-2, 22 Sep 2026

   The owner's brief for 2.0: "a living journey, not a collection of blocks",
   a product on a par with Google Maps and Apple Maps. /map is the product, and
   its interface had grown in layers — map.html carries some 200 KB of inline
   rules written over a year of fixes, each one correct for its day. This file
   is the layer that composes them into one surface. It is loaded LAST, so it
   can set the composition without rewriting the rules underneath; nothing in
   map.js, no id and no data hook changes.

   What it does, and why:

   DESKTOP (901px and up)
   1. One screen of map. The shell was 100dvh tall under a 68px header, so the
      bottom 68px of the map — the zoom-out button and the view control among
      them — started below the fold. The shell now ends where the screen does.
   2. The column is one panel, full height, in the order a driver works:
      Explore / Route, then search, then location, then what to show, then the
      tools, then the answer. #panel-explore is unwrapped (display:contents
      while it is shown) so its search and results can take their place in
      that order; map.js still hides it with an inline display:none in Route
      mode, and that wins, because the unwrap only applies while it is shown.
   3. The in-panel logo is the second logo on one screen and goes; the site
      header already carries it (the same call RF-BRING-THE-LOGO-BACK made
      the other way round for the phone).
   4. One button family. The six tools are equal and quiet: Chat stops being
      a second primary, and Filters is the only one with an edge, because it
      is the one that changes what the map shows.
   5. Station cards read in the §7 order: name, what it is, status with its
      age, distance, and one action — Directions. Show on map stays, quiet.

   PHONE (900px and down)
   6. The floating search card is solid, not glass (H2 bans glassmorphism),
      and uses the panel radius and shadow tokens like every other surface.

   Every colour is a shell.css token. The !important flags are the price of
   sitting on top of rules that already carry them; each one is scoped to a
   selector this file owns.
   ========================================================================== */

/* ---- 1. one screen of map ---------------------------------------------- */
@media (min-width:901px){
  html.rf-map .map-shell{ height:calc(100dvh - var(--rf-header, 68px)) !important; }
  html.rf-map .map-canvas-wrap{ height:100% !important; }
}

/* ---- 2-5. the column ---------------------------------------------------- */
@media (min-width:901px){
  html.rf-map{ --rf-col-w:392px; --rf-col-x:12px; }

  html.rf-map .map-controls{
    top:12px !important; left:12px !important; bottom:12px !important;
    width:var(--rf-col-w) !important; height:auto !important; max-height:none !important;
    background:var(--rf-surface) !important; border:1px solid var(--rf-line) !important;
    border-radius:var(--rf-r-panel) !important; box-shadow:var(--rf-sh-3) !important;
    /* RF-THE-PANEL-SCROLLS (23 September 2026), P0. This line said
       overflow:hidden, with the scroll moved to .map-controls-body below. That
       is the arrangement map.html already documents as broken (RF-NO-CLIP, 22
       August): a <details> lays its content out inside the ::details-content
       slot, so the body is not a flex item of this box and flex:1/min-height:0
       do nothing. Measured on refuelia.com at 1568x1271: panel 1179px tall,
       body clientHeight = scrollHeight = 2768, twelve station rows ending at
       y=2239 behind a clipped edge, no scrollbar anywhere. The panel is the one
       element whose height is bounded, so the panel scrolls. */
    overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain;
    display:flex !important; flex-direction:column !important;
  }
  html.rf-map .map-controls > summary{ display:none !important; }
  html.rf-map .map-controls-body{
    flex:none; overflow:visible;
    display:flex !important; flex-direction:column; gap:12px;
    padding:16px 16px 20px !important; margin:0 !important;
    scrollbar-width:thin; scrollbar-color:var(--rf-line-strong) transparent;
  }
  html.rf-map .map-controls-body > *{ margin-top:0 !important; margin-bottom:0 !important; }

  /* the order a driver works in */
  html.rf-map .map-controls-body > .mode-tabs{ order:1; }
  html.rf-map #panel-explore:not([style*="none"]){ display:contents !important; }
  html.rf-map #panel-route{ order:2; }
  html.rf-map #map-search-form{ order:2; }
  html.rf-map #locate-btn{ order:3; }
  html.rf-map #veh-use-explore{ order:3; }
  html.rf-map .map-controls-body > .rf-keybar{ order:4; }
  html.rf-map .map-controls-body > .rf-actions{ order:5; }
  html.rf-map #explore-results{ order:6; padding-top:4px; border-top:1px solid var(--rf-line); }
  html.rf-map #rf-tools{ order:7; }
  html.rf-map #panel-explore > *:not(#map-search-form):not(#locate-btn):not(#veh-use-explore):not(#explore-results):not(#rf-tools){ order:8; }
  /* RF-STATUS-LINE-LAST (23 September 2026). The live status line had no order
     and so sat ABOVE Explore / Route; it goes 12px -> 31px -> 1px tall while the
     first load settles, and every control below it jumped twice (0.064 of the
     column's layout shift at 1350px). The map's own pill already says the same
     thing where the driver is looking; the line keeps its role="status" for
     screen readers and moves to the end of the column, where a change in its
     height moves nothing. */
  html.rf-map .map-controls-body > #map-status-text{ order:20; }

  /* Explore / Route: RF-NOT-GENERATED — two words on a rule, the current one
     underlined in the brand yellow. Was a pill tray inside a tray. */
  html.rf-map .mode-tabs{
    display:grid !important; grid-template-columns:1fr 1fr; gap:0 !important; padding:0;
    background:transparent; border:0; border-bottom:1px solid var(--rf-line); border-radius:0;
  }
  html.rf-map .mode-tab{
    min-height:40px; border-radius:0 !important; border:0 !important; border-bottom:3px solid transparent !important; margin-bottom:-1px;
    background:transparent !important;
    color:var(--rf-ink-2) !important; font:500 14px/1 var(--rf-text) !important; box-shadow:none !important;
    transition:border-color var(--rf-fast), color var(--rf-fast);
  }
  html.rf-map .mode-tab:hover{ color:var(--rf-ink) !important; }
  html.rf-map .mode-tab.active{ color:var(--rf-ink) !important; font-weight:600 !important;
    border-bottom-color:var(--rf-mark,var(--rf-brand)) !important; }
  html.rf-map .mode-tab:focus-visible{ outline:2px solid var(--rf-brand); outline-offset:2px; }

  /* search: one field, the icon inside it */
  html.rf-map #map-search-form{ position:relative; display:flex !important; gap:0 !important; }
  html.rf-map #map-search-input{
    width:100%; min-height:50px !important; padding:0 52px 0 16px !important;
    border-radius:var(--rf-r-ctl) !important; border:1px solid var(--rf-line-strong) !important;
    background:var(--rf-surface) !important; color:var(--rf-ink) !important;
    font:400 15.5px/1.2 var(--rf-text) !important; box-shadow:none !important;
  }
  html.rf-map #map-search-input::placeholder{ color:var(--rf-ink-3); }
  html.rf-map #map-search-input:focus{ outline:none; border-color:var(--rf-brand) !important; box-shadow:0 0 0 3px var(--rf-brand-dim) !important; }
  html.rf-map #map-search-form > button[type="submit"]{
    position:absolute; right:4px; top:4px; bottom:4px; width:42px; min-height:0 !important; height:auto !important;
    border-radius:6px !important; border:0 !important; background:var(--rf-cta-bg,var(--rf-brand)) !important; color:var(--rf-cta-ink,var(--rf-brand-ink)) !important;
  }
  html.rf-map #map-search-form > button[type="submit"]:hover{ background:var(--rf-cta-bg-hover,var(--rf-brand-hover)) !important; }

  html.rf-map #locate-btn{
    min-height:44px !important; border-radius:var(--rf-r-ctl) !important; background:transparent !important;
    border:1px solid var(--rf-line-strong) !important; color:var(--rf-ink) !important;
    font:600 14px/1 var(--rf-text) !important; box-shadow:none !important;
  }
  html.rf-map #locate-btn:hover{ background:var(--rf-raised) !important; border-color:var(--rf-brand-edge) !important; }

  /* what to show: the type key, flat in the column */
  html.rf-map .map-controls-body > .rf-keybar{
    background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }

  /* the tools: six equal, quiet controls */
  html.rf-map .rf-actions{
    display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important;
  }
  html.rf-map .rf-actions > .rf-act,
  html.rf-map #act-filters, html.rf-map #act-chat, html.rf-map #act-pick, html.rf-map #act-saved,
  html.rf-map #act-key, html.rf-map .rf-actions a.rf-act[href="/sponsor"]{
    grid-column:auto !important; grid-row:auto !important;
    /* RF-NOT-GENERATED: icon above the word (it reads faster in a 3-column
       grid), on a plain 8px outline — no fill, no shadow, no blur. */
    min-height:56px !important; padding:7px 4px 6px !important; border-radius:var(--rf-r-ctl) !important;
    display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:5px !important;
    background:transparent !important; border:1px solid var(--rf-line) !important; box-shadow:none !important;
    color:var(--rf-ink-2) !important; font:500 12px/1.1 var(--rf-text) !important; text-decoration:none !important;
  }
  html.rf-map .rf-actions .rf-act-ic{ color:inherit !important; display:inline-flex; }
  html.rf-map .rf-actions .rf-act-ic svg{ width:20px !important; height:20px !important; }
  html.rf-map .rf-actions > .rf-act:hover{ background:var(--rf-raised) !important; color:var(--rf-ink) !important; border-color:var(--rf-line-strong) !important; }
  html.rf-map #act-filters{ border-color:var(--rf-brand-edge) !important; color:var(--rf-ink) !important; }
  html.rf-map .rf-actions > .rf-act:focus-visible{ outline:2px solid var(--rf-brand) !important; outline-offset:2px; }

  /* the answer: station cards in the §7 order */
  html.rf-map #explore-results > p.mono{ font:600 11px/1.4 var(--rf-mono) !important; letter-spacing:.12em; text-transform:uppercase; color:var(--rf-ink-3) !important; margin:12px 0 8px !important; }
  html.rf-map .explore-result-item{
    /* RF-NOT-GENERATED: a list of stations is a list — rows on a rule. */
    padding:14px 2px 12px !important; margin:0 !important; border-radius:0 !important;
    background:transparent !important; border:0 !important; border-bottom:1px solid var(--rf-line) !important;
    box-shadow:none !important;
    transition:border-color var(--rf-fast), background-color var(--rf-fast);
  }
  html.rf-map .explore-result-item:hover{ background:var(--rf-bg-2) !important; }
  html.rf-map .explore-result-item .rf-tilename{ font:650 15px/1.3 var(--rf-text) !important; color:var(--rf-ink) !important; }
  html.rf-map .explore-result-item > span:first-child > span:last-child{ font:600 12.5px/1 var(--rf-mono) !important; color:var(--rf-ink-2) !important; }
  html.rf-map .explore-result-item > span:nth-child(2) span{ font-size:12.5px !important; color:var(--rf-ink-2) !important; }
  html.rf-map .explore-result-item .rf-bmark{ width:24px !important; height:24px !important; border-radius:7px !important;
    background:var(--rf-raised-2) !important; color:var(--rf-ink) !important; font-size:9.5px !important; }
  html.rf-map .explore-result-item .res-acts{ gap:8px !important; margin-top:10px !important; align-items:center; }
  /* Directions is the card's one action (§21), so it leads the row — drawn
     as an outline, not a fill: a list of eight filled buttons is eight
     primaries on one screen (§13). */
  html.rf-map .explore-result-item .res-acts a[href*="maps/dir"]{
    order:-1; display:inline-flex !important; align-items:center; min-height:34px; padding:0 14px; border-radius:9px;
    background:transparent !important; border:1px solid var(--rf-brand-edge); color:var(--rf-brand) !important;
    font:600 12.5px/1 var(--rf-text) !important; text-decoration:none !important;
  }
  html.rf-map .explore-result-item .res-acts a[href*="maps/dir"]:hover{ background:var(--rf-brand-dim) !important; border-color:var(--rf-brand); }
  html.rf-map .explore-result-item .res-focus{ min-height:34px; padding:0 8px !important; color:var(--rf-ink-2) !important;
    font:600 12.5px/1 var(--rf-text) !important; text-decoration:underline; text-underline-offset:3px; }
  html.rf-map .explore-result-item .res-focus:hover{ color:var(--rf-ink) !important; }

  /* Route mode: the route form carries its own fuel choice, so the Explore
     key and tools step out of the column instead of trailing under it. */
  html.rf-map .map-controls-body:has(#panel-route[style*="block"]) > .rf-keybar,
  html.rf-map .map-controls-body:has(#panel-route[style*="block"]) > .rf-actions{ display:none !important; }
  /* the panel's own buttons share the control radius */
  html.rf-map .map-controls .btn{ border-radius:var(--rf-r-ctl) !important; min-height:46px; box-shadow:none !important; }

  /* Chat and Profile take the column's place exactly, edge for edge, so the
     eye never has to find anything twice (the rule RF-THE-CHAT-IS-THE-COLUMN
     set; this just gives it the column's new geometry). */
  html.rf-map .rf-chatpanel{
    top:12px !important; left:12px !important; bottom:12px !important; width:var(--rf-col-w) !important;
    border-radius:var(--rf-r-panel) !important; border:1px solid var(--rf-line) !important;
    background:var(--rf-surface) !important; box-shadow:var(--rf-sh-3) !important;
  }

  /* the map's own controls, bottom right, clear of the edge */
  html.rf-map .rf-map-rail{ right:16px !important; bottom:24px !important; }
  html.rf-map .rf-map-rail .leaflet-bar{ border-radius:var(--rf-r-ctl) !important; overflow:hidden; border:1px solid var(--rf-line-strong) !important; box-shadow:var(--rf-sh-2) !important; }
  html.rf-map .rf-map-rail .leaflet-bar a{ background:var(--rf-surface) !important; color:var(--rf-ink) !important; border-color:var(--rf-line) !important; }
  html.rf-map .rf-map-rail .leaflet-bar a:hover{ background:var(--rf-raised) !important; }

  /* the one-line notice at the top of the map, centred on the open map, not the window */
  html.rf-map .rf-load-pill{ left:calc(var(--rf-col-w) + 24px + (100% - var(--rf-col-w) - 24px) / 2) !important; transform:translateX(-50%) !important; }
}

/* ---- 6. the phone --------------------------------------------------------- */
@media (max-width:900px){
  html.rf-map .rf-keybar{
    background:var(--rf-surface) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border:1px solid var(--rf-line-strong) !important; border-radius:var(--rf-r-panel) !important; box-shadow:var(--rf-sh-2) !important;
  }
  html.rf-map .rf-msearch-btn{ border-radius:var(--rf-r-ctl) !important; }
  /* RF-THUMB-SIZED-CHIPS (23 September 2026). Measured at 390px: the Fuel /
     EV / LPG / CNG / LNG / Hydrogen / Service chips were 24px tall — the one
     control a driver uses on every visit, at half a thumb. The row scrolls
     sideways, so an invisible enlarged hit area would be clipped by it; the
     chip itself grows to 36px, the same height as the tab bar's buttons. */
  html.rf-map .rf-keybar .rf-key{ min-height:36px; }
  html.rf-map .rf-map-rail .leaflet-bar,
  html.rf-map .rf-map-rail > .map-fab{ border-radius:var(--rf-r-ctl) !important; }

  /* RF-SHEETS-CLEAR-THE-CONSENT-BAR (23 September 2026), P0. A first visit
     shows the consent banner; shell.css lifts the tab bar above it by
     --rf-cc-h, and the three bottom sheets were never told. Measured in
     Chromium at 375/390/430 before the fix: the Filters sheet's last row
     ("+ More filters", then "long queue" once opened) and the More drawer's
     last button ("Estimate my range") sat under the banner at the end of their
     scroll, and elementFromPoint returned the banner's <p>. Each sheet now
     reserves the banner's height the same way it already reserves the bar's,
     so the end of every scroll is above both. --rf-cc-h is 0 once the banner
     is answered, so a returning driver sees exactly what they saw before. */
  /* [open] only: the collapsed sheet must not grow when the banner arrives
     after load (Lighthouse measured that as a 0.11 layout shift). */
  html.cc-banner-open.rf-map .map-controls[open]{
    padding-bottom:calc(var(--rf-tabbar-h,58px) + var(--rf-cc-h,0px)) !important;
  }
  html.cc-banner-open.rf-map .rf-filterpop{
    bottom:calc(var(--rf-tabbar-h,58px) + env(safe-area-inset-bottom,0px) + var(--rf-cc-h,0px)) !important;
    max-height:min(78dvh, calc(100dvh - var(--rf-tabbar-h,58px) - var(--rf-cc-h,0px) - 64px)) !important;
  }
  html.cc-banner-open.rf-map .sheet-body{
    padding-bottom:calc(var(--rf-tabbar-h,58px) + env(safe-area-inset-bottom,0px) + var(--rf-cc-h,0px) + 26px) !important;
  }
}

/* ---- 7. the station card (all widths) -------------------------------------
   The card is where a driver decides. It had four filled emerald controls on
   one screen (Confirm, Navigate, Send report, the Reports tab), the station
   name and its status line set in the display serif (§11: never in a data
   cell), and its buttons in Arial, because a <button> does not inherit the
   page's font unless it is told to. One primary now — Navigate, which is
   Directions (§21) — and every other control a step quieter. */
html.rf-map .station-sheet button,
html.rf-map .station-sheet input,
html.rf-map .station-sheet textarea{ font-family:var(--rf-text) !important; }
html.rf-map .station-sheet .sheet-panel{
  background:var(--rf-surface) !important; color:var(--rf-ink) !important;
  border:1px solid var(--rf-line) !important;
}
html.rf-map .station-sheet .sheet-title{
  font-family:var(--rf-text) !important; font-size:21px !important; font-weight:600 !important; letter-spacing:-.015em !important;
  line-height:1.25 !important; color:var(--rf-ink) !important;
}
html.rf-map .station-sheet .rf-cardstat-sub{ font-family:var(--rf-text) !important; color:var(--rf-ink-2) !important; }
html.rf-map .station-sheet .rf-cardstat{ border-radius:var(--rf-r-card) !important; }
/* RF-CARDSTAT-IN-DAYLIGHT (24 September 2026). Found on the phone pass: the
   status card at the top of every station sheet showed a lone grey dot. Its
   title ("Open by its timetable") and its confidence line were still in the
   old dark map's WHITE (#fff and rgba(255,255,255,.44)) on today's white sheet,
   and its frame was a 10%-white hairline — present, invisible. The card now
   speaks the light tokens, like the rest of the sheet. */
html.rf-map .rf-cardstat{ background:var(--rf-bg-2) !important; border-color:var(--rf-line-strong) !important; }
html.rf-map .rf-cardstat-txt b{ color:var(--rf-ink) !important; font-family:var(--rf-text) !important; }
html.rf-map .rf-cardstat-sub{ color:var(--rf-ink-2) !important; }
html.rf-map .rf-cardstat-meta{ color:var(--rf-ink-3) !important; font-family:var(--rf-text) !important; }
html.rf-map .rf-cardstat-g{ background:color-mix(in srgb, var(--rf-ok) 9%, var(--rf-surface)) !important; border-color:color-mix(in srgb, var(--rf-ok) 40%, transparent) !important; }
html.rf-map .rf-cardstat-y{ background:color-mix(in srgb, var(--rf-limited) 10%, var(--rf-surface)) !important; border-color:color-mix(in srgb, var(--rf-limited) 45%, transparent) !important; }
html.rf-map .rf-cardstat-r{ background:color-mix(in srgb, var(--rf-out) 8%, var(--rf-surface)) !important; border-color:color-mix(in srgb, var(--rf-out) 40%, transparent) !important; }

html.rf-map .station-sheet .sheet-ask{
  background:var(--rf-brand-dim) !important; border:1px solid var(--rf-brand-edge) !important; color:var(--rf-ink) !important;
  box-shadow:none !important; border-radius:var(--rf-r-card) !important;
}
html.rf-map .station-sheet .sheet-ask svg{ color:var(--rf-brand) !important; }
html.rf-map .station-sheet .sheet-ask:hover{ border-color:var(--rf-brand) !important; }

html.rf-map .station-sheet .sheet-act{
  background:transparent !important; border:1px solid var(--rf-line-strong) !important; color:var(--rf-ink) !important;
  box-shadow:none !important; border-radius:var(--rf-r-ctl) !important; font-weight:600 !important;
}
html.rf-map .station-sheet .sheet-act:hover{ background:var(--rf-raised) !important; }
html.rf-map .station-sheet .sheet-act.primary{
  background:var(--rf-brand) !important; border-color:var(--rf-brand) !important; color:var(--rf-brand-ink) !important;
}
html.rf-map .station-sheet .sheet-act.primary:hover{ background:var(--rf-brand-hover) !important; }

html.rf-map .station-sheet .btn.primary{
  background:transparent !important; border:1px solid var(--rf-brand-edge) !important; color:var(--rf-brand) !important;
  box-shadow:none !important; border-radius:var(--rf-r-ctl) !important;
}
html.rf-map .station-sheet .btn.primary:hover{ background:var(--rf-brand-dim) !important; }

html.rf-map .station-sheet .rf-tabs{
  background:var(--rf-bg-2) !important; border:1px solid var(--rf-line) !important; border-radius:var(--rf-r-ctl) !important; padding:4px !important;
}
html.rf-map .station-sheet .rf-tab{ border-radius:9px !important; background:transparent !important; color:var(--rf-ink-2) !important; box-shadow:none !important; }
html.rf-map .station-sheet .rf-tab.is-on{ background:var(--rf-raised) !important; color:var(--rf-ink) !important; box-shadow:inset 0 0 0 1px var(--rf-line-strong) !important; }

html.rf-map .station-sheet .report-fuel-chip,
html.rf-map .station-sheet .report-queue-chip{ border-radius:var(--rf-r-chip) !important; min-height:40px; }
html.rf-map .station-sheet .rf-cardstat,
html.rf-map .station-sheet .rf-cardstat *{ font-family:var(--rf-text) !important; }

/* RF-2.0 (seen on the test deploy): map.html's own head styles painted the
   current page in the menu as a solid emerald pill, `!important`. Every other
   page marks it with the road line under the word. One header, one "you are
   here". */
@media (min-width:768px){
  html.rf-map .site-nav .nav-links a.active[aria-current="page"]:not(.rfs-btn){
    background:none !important; color:var(--rf-ink) !important; box-shadow:none !important; }
}
html.rf-map .busy-dot.sched{ background:transparent !important; border:1.5px dashed var(--rf-ink-2); box-sizing:border-box }
html.rf-map .busy-dot.sched.sched-closed{ border-style:solid; border-color:var(--rf-ink-3) }

/* RF-LOCATE-B (24 September 2026). The owner's choice "B" for the locate
   control, the same idea as the home map's "Near me": it was a quiet outline
   (desktop) and a grey square beside the search (phone), and drivers did not
   see it. Now it is the yellow plate with a crosshair, it catches the light
   twice when the map opens and then stays still — no loop, and nothing under
   prefers-reduced-motion. The crosshair is a mask, not markup: #locate-btn's
   words are replaced by the language layer (data-i18n), which would take an
   inline <svg> with them. */
html.rf-map #locate-btn,
html.rf-map .rf-msearch-loc{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--rf-cta-bg, #FFC928) !important; color:var(--rf-cta-ink, #16181D) !important;
  border:1px solid #E0AE10 !important;
}
html.rf-map #locate-btn{ display:flex !important; align-items:center; justify-content:center; gap:8px; }
html.rf-map #locate-btn::before{
  content:""; width:18px; height:18px; flex:0 0 auto; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2v3m0 14v3M2 12h3m14 0h3'/%3E%3Ccircle cx='12' cy='12' r='1.8' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2v3m0 14v3M2 12h3m14 0h3'/%3E%3Ccircle cx='12' cy='12' r='1.8' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:rfLocBreathe 1.2s ease-in-out 1s 2;
}
html.rf-map .rf-msearch-loc svg{ animation:rfLocBreathe 1.2s ease-in-out 1s 2; }
html.rf-map #locate-btn:hover,
html.rf-map .rf-msearch-loc:hover{ background:var(--rf-cta-bg-hover, #FFD659) !important; border-color:#E0AE10 !important; }
html.rf-map #locate-btn::after,
html.rf-map .rf-msearch-loc::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  animation:rfLocSheen 1.1s ease-in-out .8s 2;
}
html.rf-map .rf-msearch-loc.is-locating{ background:var(--rf-cta-bg-hover, #FFD659) !important; }
@keyframes rfLocSheen{ to{ left:120%; } }
@keyframes rfLocBreathe{ 50%{ transform:scale(1.25); } }
@media (prefers-reduced-motion:reduce){
  html.rf-map #locate-btn::before, html.rf-map #locate-btn::after,
  html.rf-map .rf-msearch-loc::after, html.rf-map .rf-msearch-loc svg{ animation:none; }
}

/* RF-VEHICLE-FIT (24 September 2026) — "Suitable for" in the station sheet,
   rebuilt in the site's own vocabulary: a ruled list, drawn line icons, the
   state in words, and one question button. Colours: the words carry the
   meaning; "Doesn't fit" is the one warning and wears the status red. No
   green, no discs, no row of ten buttons. */
html.rf-map .veh-suit{ margin:16px 0 4px; padding:14px 0 0; border:0; border-top:1px solid var(--rf-line); border-radius:0; background:transparent; }
html.rf-map .veh-suit-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
html.rf-map .veh-suit-h{ margin:0; font:600 15px/1.3 var(--rf-text); color:var(--rf-ink); }
html.rf-map .veh-ask{ flex:none; min-height:34px; padding:0 12px; border-radius:8px; border:1px solid var(--rf-line-strong);
  background:var(--rf-surface); color:var(--rf-ink); font:600 13px/1 var(--rf-text); cursor:pointer; }
html.rf-map .veh-ask:hover{ border-color:var(--rf-ink-3); }
html.rf-map .veh-suit.is-asking .veh-ask{ background:var(--rf-cta-bg,#FFC928); border-color:var(--rf-cta-bg,#FFC928); color:var(--rf-cta-ink,#16181D); }
html.rf-map .veh-suit-grid{ list-style:none; margin:0; padding:0; display:block; }
html.rf-map .veh-cls{ display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 0; border-bottom:1px solid var(--rf-line); }
html.rf-map .veh-cls:last-child{ border-bottom:0; }
html.rf-map .veh-cls .veh-ic{ width:24px; height:24px; display:grid; place-items:center; flex:none; color:var(--rf-ink-2); font-size:0; }
html.rf-map .veh-cls .veh-lbl{ font:500 14px/1.2 var(--rf-text); color:var(--rf-ink); }
html.rf-map .veh-cls .veh-state{ width:auto; height:auto; margin-left:auto; border-radius:0; background:none !important;
  display:inline-flex; align-items:center; gap:6px; font:500 13.5px/1.2 var(--rf-text); color:var(--rf-ink-2); }
html.rf-map .veh-cls .veh-state::before{ content:""; width:14px; height:14px; flex:none; background:currentColor;
  -webkit-mask:var(--veh-mark) center/contain no-repeat; mask:var(--veh-mark) center/contain no-repeat; }
html.rf-map .veh-cls .veh-state.yes, html.rf-map .veh-cls .veh-state.typical{ color:var(--rf-ink);
  --veh-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
html.rf-map .veh-cls .veh-state.typical{ color:var(--rf-ink-2); }
html.rf-map .veh-cls .veh-state.no{ color:var(--rf-out,#C0392B);
  --veh-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }
html.rf-map .veh-cls .veh-state.unknown{ color:var(--rf-ink-3);
  --veh-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
html.rf-map .veh-cls .veh-cnt{ margin-left:0; font:400 12.5px/1 var(--rf-text); font-variant-numeric:tabular-nums; color:var(--rf-ink-3); white-space:nowrap; }
/* the question, only when the driver asked to answer it */
html.rf-map .veh-cls .veh-vote{ display:none; margin-left:auto; gap:6px; }
html.rf-map .veh-suit.is-asking .veh-cls .veh-state,
html.rf-map .veh-suit.is-asking .veh-cls .veh-cnt{ display:none; }
html.rf-map .veh-suit.is-asking .veh-cls .veh-vote{ display:inline-flex; }
html.rf-map .veh-cls .veh-v{ width:auto !important; height:34px !important; min-width:0 !important; min-height:34px !important; padding:0 12px !important;
  border-radius:8px !important; border:1px solid var(--rf-line-strong) !important; background:var(--rf-surface) !important;
  color:var(--rf-ink) !important; font:500 13px/1 var(--rf-text) !important; cursor:pointer; }
html.rf-map .veh-cls .veh-v:hover{ border-color:var(--rf-ink-3) !important; }
html.rf-map .veh-cls .veh-v[aria-pressed="true"]{ background:var(--rf-brand-dim,rgba(255,201,40,.22)) !important; border-color:var(--rf-mark,#FFC928) !important; font-weight:600 !important; }
html.rf-map .veh-suit-note{ margin:8px 0 0; font:400 12px/1.45 var(--rf-text); color:var(--rf-ink-3); }
@media (max-width:380px){ html.rf-map .veh-cls .veh-v{ padding:0 9px !important; font-size:12.5px !important; } }