/* Route-only map workspace; homepage territory map remains independent. */
.bikefvg-route-page__map .bfvg-route-map {
  --bfvg-map-ink: var(--wp--preset--color--ink, #1e2420);
  --bfvg-map-accent: var(--wp--preset--color--accent, #1c6b7a);
  --bfvg-map-line: var(--wp--preset--color--divider, #d6cec4);
  position: relative;
  height: clamp(24rem, 40vw, 30rem) !important;
  min-height: 24rem !important;
  max-height: none !important;
  font-family: var(--wp--preset--font-family--body, Inter, sans-serif);
  font-size: 14px;
  line-height: 1.45;
}
.bikefvg-route-page__map .bfvg-route-map:is(:fullscreen, .leaflet-fullscreen-on, .leaflet-pseudo-fullscreen, .bfvg-map-is-fullscreen) {
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 0 !important;
}
.bfvg-route-map.leaflet-pseudo-fullscreen { position: fixed !important; inset: 0 !important; z-index: 100000 !important; }
.bfvg-route-map.bfvg-map-soft-basemap .leaflet-tile-pane {
  /* Preserve the administrator's basemap treatment, soften it for route reading. */
  filter: var(--bikefvg-map-basemap-filter) saturate(.48);
}
.bfvg-route-map .leaflet-control-attribution { max-width: min(100%, 44rem); font-size: 11px; line-height: 1.35; background: rgba(255,255,255,.94); color: #47564d; }
.bfvg-route-map .leaflet-control-attribution a { color: #125b6b; }
.bfvg-map-ui { position: absolute; inset: 0; z-index: 900; pointer-events: none; color: var(--bfvg-map-ink); font-size: 14px; line-height: 1.45; }
.bfvg-map-ui *, .bfvg-map-marker *, .bfvg-map-symbol { box-sizing: border-box; }
.bfvg-map-ui [hidden] { display: none !important; }
.bfvg-map-toolbar { position: absolute; top: 12px; left: 12px; right: 72px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; pointer-events: none; }
/*
 * .229 — "align-items:stretch" + "width:44px" fissi presumevano che OGNI
 * controllo del gruppo fosse un quadrato 44×44 (zoom, inquadra, posizione):
 * il pulsante schermo intero ora è più largo per la sua etichetta visibile
 * "Apri mappa" (vedi .bfvg-map-button--fullscreen/.leaflet-control-fullscreen
 * a sotto), quindi il gruppo si allinea al bordo destro (flex-end) e ogni
 * controllo mantiene la propria larghezza, invece di essere forzato a 44px
 * o di far traboccare un contenitore troppo stretto.
 */
.bfvg-map-navigation { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: auto; }
/* The empty space beside narrow controls must not intercept nearby markers. */
.bfvg-route-map .bfvg-map-navigation { pointer-events: none; }
.bfvg-route-map .bfvg-map-navigation > * { pointer-events: auto; }
.bfvg-map-navigation .leaflet-control { float: none; clear: none; margin: 0; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--bfvg-map-line), 0 1px 4px rgba(30,36,32,.08); }
.bfvg-map-navigation .leaflet-control a { box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 7px; color: var(--bfvg-map-ink); background-color: #fff; line-height: 1; text-decoration: none; }
.bfvg-map-navigation .leaflet-control-zoom a { font: 500 24px/1 var(--wp--preset--font-family--body, Inter, sans-serif); }
.bfvg-map-navigation .leaflet-control-zoom a:first-child { border-radius: 7px 7px 0 0; border-bottom: 1px solid var(--bfvg-map-line); }
.bfvg-map-navigation .leaflet-control-zoom a:last-child { border-radius: 0 0 7px 7px; border-bottom: 0; }
.bfvg-map-navigation .leaflet-control a:hover { background-color: #eff6f6; color: var(--bfvg-map-accent); }
.bfvg-map-navigation .leaflet-control a.leaflet-disabled { color: #8d958f; background-color: #f7f8f6; cursor: default; }
.bfvg-map-navigation .leaflet-control-fullscreen-button { background-image: none !important; }
/*
 * .229 — corregge un difetto segnalato da un test con un utilizzatore reale:
 * "Apri mappa"/"Esci da schermo intero" deve risaltare come l'azione
 * principale della barra mappa, non solo un'icona petrolio su sfondo
 * bianco come gli altri controlli (insufficiente, difetto esplicito). Sfondo
 * petrolio pieno, icona bianca, etichetta SEMPRE visibile accanto
 * all'icona (non solo per lo screen reader come gli altri pulsanti-icona):
 * larghezza automatica invece dei 44px fissi degli altri controlli di
 * navigazione, per fare spazio al testo.
 *
 * .231 — corregge un difetto riprodotto in Chromium CON I CSS REALI (non
 * isolati): il foglio di Waymark si carica DOPO bikefvg-route-map.css
 * nell'ordine reale della pagina (bikefvg-route-map non dichiara una
 * dipendenza sullo stylesheet di Waymark — il plugin lo accoda per conto
 * suo), quindi la sua `.leaflet-touch .leaflet-bar a{width:30px;
 * height:30px;...}` ha la STESSA specificità (0,2,1) della regola qui
 * sotto ed essendo caricata dopo VINCE il pareggio: il controllo torna a
 * 30×30px mentre il contenuto (icona+testo) resta quello pensato per la
 * dimensione allargata — l'etichetta deborda. Correggere solo l'ordine di
 * caricamento sarebbe fragile (dipende da un dettaglio interno del
 * plugin, mai garantito da una versione all'altra): le proprietà di
 * layout che Waymark potrebbe contendere (width, height, display, ecc.)
 * sono quindi tutte !important qui, l'unico modo per vincere
 * DETERMINISTICAMENTE la cascata a prescindere dall'ordine reale di
 * caricamento — verificato ricostruendo l'ordine reale (bikefvg-route-map.css
 * poi il CSS di Waymark) in tests/route-map-waymark-verify.js.
 */
.bfvg-map-navigation .leaflet-control-fullscreen a {
  box-sizing: border-box !important; width: auto !important; height: 44px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
  padding: 0 14px 0 12px !important; margin: 0 !important; border-radius: 7px !important;
  background-color: var(--bfvg-map-accent) !important; color: #fff !important;
  font: 600 14px/1.25 var(--wp--preset--font-family--body, Inter, sans-serif) !important;
  line-height: 1.25 !important; text-decoration: none !important;
}
.bfvg-map-navigation .leaflet-control-fullscreen a .bfvg-map-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.bfvg-map-navigation .leaflet-control-fullscreen a:hover { background-color: #15515d !important; color: #fff !important; }
.bfvg-map-navigation .leaflet-control-fullscreen a:focus-visible { outline: 3px solid var(--bfvg-map-accent); outline-offset: 2px; }
@media (max-width: 639px) {
  /* Poco spazio orizzontale: resta un pulsante-icona riconoscibile (sfondo
     petrolio, icona bianca), ma l'etichetta torna accessibile-solo, come gli
     altri controlli di navigazione — mai un'etichetta troncata o sovrapposta. */
  .bfvg-map-navigation .leaflet-control-fullscreen a { width: 44px !important; padding: 0 !important; }
  .bfvg-map-navigation .leaflet-control-fullscreen a > span:last-child {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.bfvg-map-navigation .leaflet-control-locate.active a { background-color: #e8f2f3; color: var(--bfvg-map-accent); }
.bfvg-map-button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 8px 12px; margin: 0; border: 1px solid var(--bfvg-map-line);
  border-radius: 8px; background: #fff; color: var(--bfvg-map-ink); text-decoration: none;
  font: 600 14px/1.25 var(--wp--preset--font-family--body, Inter, sans-serif);
  cursor: pointer; pointer-events: auto; box-shadow: 0 1px 4px rgba(30,36,32,.08);
}
.bfvg-route-map a.bfvg-map-button { color: var(--bfvg-map-ink); text-decoration: none; }
.bfvg-map-button:hover, .bfvg-map-button[aria-expanded="true"] { border-color: var(--bfvg-map-accent); background: #eff6f6; color: var(--bfvg-map-accent); }
.bfvg-map-button:disabled { opacity: .5; cursor: default; }
.bfvg-map-ui :is(button,a,input):focus-visible,
.bfvg-map-marker:focus-visible { outline: 3px solid var(--bfvg-map-accent, #1c6b7a); outline-offset: 3px; }
.bfvg-map-ui h3:focus { outline: none; }
.bfvg-map-button.is-icon { width: 44px; padding: 10px; flex: 0 0 44px; border: 0; background: transparent; box-shadow: none; }
.bfvg-map-navigation > .bfvg-map-button.is-icon { border: 1px solid var(--bfvg-map-line); background: #fff; box-shadow: 0 1px 4px rgba(30,36,32,.08); }
.bfvg-map-navigation > .bfvg-map-button.is-icon:hover { background: #eff6f6; border-color: var(--bfvg-map-accent); }
.bfvg-map-button.is-icon > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bfvg-map-button.is-primary, .bfvg-route-map a.bfvg-map-button.is-primary { background: var(--bfvg-map-accent); color: #fff; border-color: var(--bfvg-map-accent); }
/*
 * .229 — corregge lo stesso difetto ("solo icona petrolio su sfondo bianco")
 * anche sul pulsante schermo intero COSTRUITO (Network Map,
 * assets/js/bikefvg-route-network-controls.js, non un controllo nativo
 * Leaflet): stesso trattamento — sfondo petrolio pieno, icona/testo bianchi,
 * etichetta "Apri mappa"/"Esci da schermo intero" SEMPRE visibile (il
 * pulsante non usa più .is-icon, quindi la sua label non è più nascosta
 * come gli altri controlli-icona del gruppo di navigazione).
 */
.bfvg-map-button--fullscreen {
  width: auto; padding: 0 14px 0 12px; flex: 0 0 auto; border: 0;
  background-color: var(--bfvg-map-accent); color: #fff; box-shadow: 0 1px 4px rgba(30,36,32,.08);
}
.bfvg-map-button--fullscreen:hover { background-color: #15515d; color: #fff; border-color: transparent; }
.bfvg-map-button--fullscreen > span:last-child {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: nowrap;
  font: 600 14px/1.25 var(--wp--preset--font-family--body, Inter, sans-serif);
}
@media (max-width: 639px) {
  .bfvg-map-button--fullscreen { width: 44px; padding: 10px; }
  .bfvg-map-button--fullscreen > span:last-child {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.bfvg-map-total { min-width: 24px; padding: 2px 6px; border-radius: 12px; background: #eef1ed; color: #47564d; font-variant-numeric: tabular-nums; text-align: center; }
.bfvg-map-button.has-visible-services { border-color: var(--bfvg-map-accent); }
.has-visible-services .bfvg-map-total { background: var(--bfvg-map-accent); color: #fff; }
.bfvg-map-icon { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; line-height: 0; }
.bfvg-map-icon > svg { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; }
/*
 * .227 — corregge un difetto verificato: "Servizi vicini" e "Legenda"
 * condividevano un solo nodo .bfvg-map-panel, quindi non potevano mai
 * essere aperti insieme. Ora sono due elementi .bfvg-map-panel
 * INDIPENDENTI, impilati dentro .bfvg-map-panel-stack (l'unico elemento
 * davvero posizionato in modo assoluto): con un solo pannello aperto
 * quello prende tutta l'altezza disponibile (flex:1 1 0 su un unico
 * figlio visibile riempie il contenitore); con entrambi aperti si
 * dividono lo spazio verticalmente, mai sovrapposti, ciascuno con il
 * proprio scorrimento interno (.bfvg-map-panel-body) se il contenuto
 * eccede lo spazio disponibile.
 */
.bfvg-map-panel-stack, .bfvg-map-quick {
  position: absolute; top: var(--bfvg-toolbar-bottom, 70px); bottom: calc(var(--bfvg-credit-height, 28px) + 10px);
}
.bfvg-map-quick {
  right: 72px; width: 350px; max-width: calc(100% - 84px);
  display: flex; flex-direction: column; border: 1px solid var(--bfvg-map-line); border-radius: 12px;
  background: rgba(255,255,255,.98); box-shadow: 0 6px 24px rgba(30,36,32,.18); pointer-events: auto; overflow: hidden;
}
/* Fullscreen point details are positioned beside their marker by the map UI. */
.bfvg-map-ui .bfvg-map-quick.is-anchored { right: auto; bottom: auto; height: auto; max-width: none; }
.bfvg-map-quick.is-anchored .bfvg-map-expand { display: none; }
.bfvg-map-ui .bfvg-map-quick.is-anchored .bfvg-map-photo { display: block; }
.bfvg-map-panel-stack {
  left: 12px; width: 370px; max-width: calc(100% - 84px);
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
/*
 * .228 — corregge un difetto verificato: `flex: 1 1 0` costringeva OGNI
 * pannello aperto a dividersi in parti UGUALI l'intera altezza dello
 * stack, indipendentemente dal contenuto reale — con quattro categorie di
 * servizi (poche righe) il pannello occupava comunque metà schermo,
 * lasciando molto spazio bianco, e con due pannelli aperti insieme
 * ciascuno prendeva esattamente il 50% anche se uno aveva pochissimo
 * contenuto. `flex: 0 1 auto` fa sì che ogni pannello prenda SOLO
 * l'altezza che il suo contenuto richiede (fino al max-height sotto, oltre
 * il quale scorre) — mai una divisione forzata in parti uguali. */
.bfvg-map-panel {
  flex: 0 1 auto; min-height: 0; width: 100%; max-height: min(46vh, 420px);
  display: flex; flex-direction: column; border: 1px solid var(--bfvg-map-line); border-radius: 12px;
  background: rgba(255,255,255,.98); box-shadow: 0 6px 24px rgba(30,36,32,.18); pointer-events: auto; overflow: hidden;
}
.bfvg-map-panel[hidden] { display: none; }
/*
 * .230 — la proposta "lati opposti" della .229 è superata (istruzione
 * esplicita: "non vogliamo più legenda e servizi sui lati opposti della
 * mappa"), e corregge tre difetti riprodotti in Chromium sulla .229 con
 * quel layout: la legenda finiva sotto i controlli di destra (incluso il
 * pulsante di uscita), "saltava" a sinistra quando si chiudeva il pannello
 * servizi (.has-single-panel), e in landscape i due pannelli affiancati
 * coprivano quasi tutta la mappa. Nuova disposizione, entrambi i pannelli
 * SEMPRE nella zona sinistra (mai a ridosso dei controlli di destra):
 * - .order (sotto): legenda SEMPRE prima di servizi, a prescindere
 *   dall'ordine reale nel DOM (i due file di controllo, mappa principale e
 *   Network Map, li costruiscono in ordine diverso) — "legenda sopra,
 *   servizi sotto" in colonna, "legenda a sinistra, servizi a destra" in
 *   riga: stesso ordine visivo in entrambi i casi;
 * - schermo alto (default, sotto): colonna, come nella pagina normale;
 * - schermo basso ma largo (min-width:900px, prima query sotto): due
 *   colonne affiancate ma ENTRAMBE ancorate a sinistra (mai un pannello
 *   spinto verso i controlli di destra), larghezza ciascuna capped per non
 *   occupare "praticamente tutta la mappa";
 * - schermo basso E stretto: nessuna query dedicata — resta la colonna di
 *   default, già compatta (max-height limitata, scorrimento interno nel
 *   solo .bfvg-map-panel-body, mai nell'intestazione) con entrambe le
 *   intestazioni sempre visibili;
 * - con ENTRAMBI i pannelli aperti, si dividono lo spazio verticale (riga)
 *   o l'altezza (colonna) in parti UGUALI (:has() qui sotto) — una legenda
 *   lunga non spinge più il pannello servizi fuori dalla visuale, come
 *   capitava con flex:0 1 auto quando entrambi erano aperti; con un solo
 *   pannello aperto quello prende solo lo spazio che il contenuto richiede.
 */
.bfvg-map-panel.is-legend { order: 1; }
.bfvg-map-panel.is-services { order: 2; }
/* Un solo pannello aperto a schermo intero: sfrutta tutta l'altezza disponibile, non il limite pensato per la colonna singola della pagina normale. */
.bfvg-map-is-fullscreen .bfvg-map-panel-stack > .bfvg-map-panel,
.is-network-fullscreen .bfvg-map-panel-stack > .bfvg-map-panel {
  max-height: 100%;
}
.bfvg-map-panel-stack:has(> .bfvg-map-panel:not([hidden]) ~ .bfvg-map-panel:not([hidden])) > .bfvg-map-panel {
  flex: 1 1 0; max-height: 100%; min-height: 0;
}
@media (max-height: 640px) and (min-width: 900px) {
  .bfvg-map-is-fullscreen .bfvg-map-panel-stack,
  .is-network-fullscreen .bfvg-map-panel-stack {
    flex-direction: row; align-items: flex-start;
    width: min(44rem, calc(100% - 24px)); max-width: none;
  }
  .bfvg-map-is-fullscreen .bfvg-map-panel-stack > .bfvg-map-panel,
  .is-network-fullscreen .bfvg-map-panel-stack > .bfvg-map-panel {
    width: min(21rem, calc(50% - 8px)); flex: 0 0 auto; max-height: 100%;
  }
  .bfvg-map-is-fullscreen .bfvg-map-panel-stack:has(> .bfvg-map-panel:not([hidden]) ~ .bfvg-map-panel:not([hidden])) > .bfvg-map-panel,
  .is-network-fullscreen .bfvg-map-panel-stack:has(> .bfvg-map-panel:not([hidden]) ~ .bfvg-map-panel:not([hidden])) > .bfvg-map-panel {
    flex: 0 0 auto;
  }
}
.bfvg-map-panel-head { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 7px 6px 7px 14px; border-bottom: 1px solid var(--bfvg-map-line); background: #fff; }
.bfvg-map-ui .bfvg-map-panel-head h3 { flex: 1; min-width: 0; margin: 0; padding: 0; font: 700 17px/1.3 var(--wp--preset--font-family--display, 'Space Grotesk', sans-serif); color: var(--bfvg-map-ink); overflow-wrap: anywhere; }
.bfvg-map-panel-body, .bfvg-map-quick-content { padding: 14px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-gutter: stable; }
.bfvg-map-ui p { margin: 0 0 12px; padding: 0; font-size: 14px; line-height: 1.5; color: var(--bfvg-map-ink); }
.bfvg-map-ui .bfvg-map-meta, .bfvg-map-ui .bfvg-map-distance { color: #47564d; }
.bfvg-map-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.bfvg-map-quick-content .bfvg-map-actions { margin: 14px 0 0; }
.bfvg-map-filter { display: flex; align-items: center; gap: 9px; padding: 9px 0; min-height: 48px; cursor: pointer; border-top: 1px solid #e8e5df; }
.bfvg-map-filter input { width: 18px; height: 18px; margin: 0; accent-color: var(--bfvg-map-accent); flex-shrink: 0; }
.bfvg-map-filter > span:not(.bfvg-map-symbol) { flex: 1; }
.bfvg-map-filter small { font-size: 13px; font-variant-numeric: tabular-nums; }
.bfvg-map-filter-section-title { margin: 18px 0 8px; padding-top: 14px; border-top: 2px solid #d9e2de; font: 700 15px/1.3 var(--wp--preset--font-family--display, 'Space Grotesk', sans-serif); color: var(--bfvg-map-ink); }
.bfvg-map-filter-section-title + .bfvg-map-actions { margin-bottom: 4px; }
.bfvg-map-filter.is-poi-filter { border-top-color: #dfe7e3; }
.bfvg-map-ui .bfvg-map-filter-status { margin: 10px 0 0; font-size: 13px; }
.bfvg-map-ui .bfvg-map-legend { padding: 0; margin: 0; list-style: none; display: grid; gap: 12px; }
.bfvg-map-ui .bfvg-map-legend li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: 14px; line-height: 1.4; }
.bfvg-map-route-swatch { width: 28px; height: 5px; flex: 0 0 28px; border-radius: 5px; background: var(--wp--preset--color--action, #c93e15); outline: 2px solid #fff; box-shadow: 0 0 0 3px #d6cec4; }
.bfvg-map-photo { display: block; width: 100%; height: 145px; object-fit: cover; margin: 0 0 12px; border-radius: 7px; }
.bfvg-map-ui .bfvg-map-partner { display: inline-block; padding: 3px 7px; border: 1px solid var(--bfvg-map-line); border-radius: 5px; font-size: 12px; }
.bfvg-map-description { white-space: pre-line; }
.bfvg-map-group-row { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 52px; padding: 10px 0; margin: 0; border: 0; border-top: 1px solid #e8e5df; background: transparent; color: var(--bfvg-map-ink); text-align: left; font: inherit; cursor: pointer; }
.bfvg-map-group-row > span:last-child { flex: 1; min-width: 0; }
.bfvg-map-group-row strong, .bfvg-map-group-row small { display: block; font-size: 14px; line-height: 1.4; }
.bfvg-map-group-row small { margin-top: 3px; color: #47564d; font-size: 12px; }
.bfvg-map-expand { display: none; }

/* Geometric centring is identical for SVG and PNG, including nested holders. */
.bfvg-map-marker { background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 50%; }
.bfvg-map-marker-content { position: relative; display: grid; place-items: center; width: 100%; height: 100%; line-height: 0; }
.bfvg-map-symbol {
  display: inline-grid; place-items: center; width: var(--bfvg-symbol-size, 28px); height: var(--bfvg-symbol-size, 28px);
  flex: 0 0 var(--bfvg-symbol-size, 28px); margin: 0; padding: 0; line-height: 1;
  background: var(--bfvg-symbol-bg, #1c6b7a); color: var(--bfvg-symbol-fg, #fff);
  border: var(--bfvg-symbol-border, 2px) solid var(--bfvg-symbol-edge, #fff);
  border-radius: var(--bfvg-symbol-radius, 7px); box-shadow: var(--bfvg-symbol-shadow, 0 1px 4px rgba(30,36,32,.22));
  font: 700 12px/1 var(--wp--preset--font-family--body, Inter, sans-serif);
}
.bfvg-map-symbol__inner { display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.bfvg-map-symbol__inner > :is(svg,img) { display: block; width: 70% !important; height: 70% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain; object-position: center; }
.bfvg-map-marker:is(:hover, :focus-visible, .is-selected) .bfvg-map-symbol { outline: 2px solid var(--bfvg-map-accent, #1c6b7a); outline-offset: 2px; box-shadow: 0 2px 8px rgba(30,36,32,.3); }
.bfvg-map-count { position: absolute; bottom: 0; right: -2px; min-width: 18px; height: 18px; padding: 0 3px; display: grid; place-items: center; border-radius: 10px; background: #1c6b7a; color: #fff; border: 1px solid #fff; font: 700 10px/1 sans-serif; }
.bfvg-route-map .bfvg-map-endpoint-label { max-width: 10rem; padding: 5px 8px; border: 1px solid #d6cec4; border-radius: 6px; box-shadow: 0 1px 4px rgba(30,36,32,.12); color: #1e2420; background: rgba(255,255,255,.96); font: 600 12px/1.3 var(--wp--preset--font-family--body, Inter, sans-serif); white-space: normal; }
.bfvg-map-spread-status {
  position: absolute; left: 12px; bottom: calc(var(--bfvg-credit-height, 28px) + 10px);
  max-width: calc(100% - 76px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px; border: 1px solid var(--bfvg-map-line); border-radius: 10px;
  background: rgba(255,255,255,.97); pointer-events: auto; box-shadow: 0 2px 8px rgba(30,36,32,.15);
}
.bfvg-map-spread-status > span { flex: 1 1 130px; max-width: 28ch; font-size: 13px; line-height: 1.4; }
.bfvg-map-spread-status .bfvg-map-button { font-size: 13px; padding: 8px; }
.bfvg-map-spread-action { margin-bottom: 12px; }
.bfvg-map-marker.is-spread .bfvg-map-symbol { box-shadow: 0 2px 7px rgba(30,36,32,.35); }

/* Profile: selected values, graph and key share one compact reading order. */
.bikefvg-route-page #mappa h2 { font-size: clamp(1.8rem, 3vw, 2.25rem); max-width: none; }
.bikefvg-route-page .bikefvg-route-page__profile-panel { padding: 18px clamp(14px, 2vw, 24px); background: #fff; }
.bikefvg-route-page .bikefvg-route-page__profile-title { margin: 0 0 14px; font: 700 18px/1.3 var(--wp--preset--font-family--display, 'Space Grotesk', sans-serif); }
.bikefvg-route-page .bikefvg-route-page__elevation { --bfvg-elevation-height: clamp(9rem, 14vw, 10.5rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; font-family: var(--wp--preset--font-family--body, Inter, sans-serif); }
.bikefvg-route-page .bikefvg-route-page__elevation-chart { align-items: start; min-height: 0; height: auto; margin: 0; padding: 0; }
.bikefvg-route-page .bikefvg-route-page__elevation-plot { min-height: 0; height: auto; margin: 0; padding: 0; }
.bikefvg-route-page .bikefvg-route-page__elevation svg { height: var(--bfvg-elevation-height) !important; min-height: 0; max-height: none; aspect-ratio: auto; margin: 0; }
.bikefvg-route-page .bikefvg-route-page__elevation-readout { position: static; inset: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--bfvg-line); border-radius: 0; background: transparent; color: var(--wp--preset--color--ink); pointer-events: auto; font-family: inherit; }
.bikefvg-profile-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bikefvg-profile-field > span { color: #47564d; font: 400 13px/1.3 var(--wp--preset--font-family--body, Inter, sans-serif); }
.bikefvg-profile-field > strong { display: block; min-height: 1.5em; color: #1e2420; font: 500 16px/1.5 var(--wp--preset--font-family--mono, monospace); font-variant-numeric: tabular-nums; }
.bikefvg-profile-field + .bikefvg-profile-field { padding-left: 12px; border-left: 1px solid #e7e8e3; }
.bikefvg-route-page .bikefvg-route-page__elevation-areas polygon { fill-opacity: .15; }
.bikefvg-route-page .bikefvg-route-page__elevation-slopes polyline { stroke-width: 2.8; }
.bikefvg-route-page .bikefvg-route-page__elevation-grid line { stroke-opacity: .45; }
.bikefvg-route-page .bikefvg-route-page__elevation-x-axis { font-size: 12px; line-height: 1.4; min-height: 0; margin: 6px 0 0; padding: 0; }
.bikefvg-route-page .bikefvg-route-page__elevation-key { margin: 0; padding: 0; border: 0; }
.bikefvg-route-page .bikefvg-route-page__elevation-legend li { font-size: 14px; }
.bikefvg-route-page .bikefvg-route-page__elevation-details { margin: 0; padding: 8px 0 0; border: 0; border-top: 1px solid var(--bfvg-line); background: transparent; }
.bikefvg-route-page .bikefvg-route-page__elevation-help,
.bikefvg-route-page .bikefvg-route-page__elevation-note { margin: 8px 0 0; font-size: 13px; }

@media (max-width: 639px) {
  .bikefvg-route-page__map .bfvg-route-map { height: 26rem !important; min-height: 26rem !important; }
  .bfvg-map-toolbar { left: 10px; right: 66px; top: 10px; gap: 6px; }
  .bfvg-map-navigation { top: 10px; right: 10px; gap: 6px; }
  .bfvg-map-toolbar .bfvg-map-button { padding: 7px 8px; font-size: 13px; gap: 5px; }
  .bfvg-map-panel-stack, .bfvg-map-quick { left: 8px; right: 8px; top: auto; bottom: calc(var(--bfvg-credit-height, 25px) + 10px); width: auto; max-width: none; max-height: 52%; }
  .bfvg-map-quick { border-radius: 12px; }
  .bfvg-map-panel-stack { max-height: calc(100% - var(--bfvg-toolbar-bottom, 120px) - 36px); }
  .bfvg-map-quick.is-expanded { max-height: calc(100% - var(--bfvg-toolbar-bottom, 120px) - 36px); }
  .bfvg-map-panel-head { padding: 3px 4px 3px 12px; }
  .bfvg-map-ui .bfvg-map-panel-head h3 { font-size: 16px; }
  .bfvg-map-panel-body, .bfvg-map-quick-content { padding: 10px 12px; }
  .bfvg-map-quick:not(.is-expanded) .bfvg-map-photo { display: none; }
  .bfvg-map-photo { height: 130px; }
  .bfvg-map-expand { display: inline-flex; flex: 0 0 auto; min-height: 40px; width: 100%; border-radius: 0; border-width: 1px 0 0; }
  .bikefvg-route-page__map .bfvg-route-map:is(:fullscreen,.leaflet-fullscreen-on,.leaflet-pseudo-fullscreen,.bfvg-map-is-fullscreen) { height: 100dvh !important; min-height: 0 !important; }
  .bfvg-route-map .leaflet-control-attribution { font-size: 10px; }
  .bikefvg-profile-field > strong { font-size: 14px; }
  .bikefvg-profile-field > span { min-height: 2.6em; }
  .bikefvg-profile-field + .bikefvg-profile-field { padding-left: 8px; }
  .bikefvg-route-page .bikefvg-route-page__elevation-readout { gap: 8px; }
}
@media print {
  .bfvg-map-ui { display: none; }
}

/* Persistent desktop map for the itinerary workspace (test.114).
 * The map grows with the available viewport but remains comfortably below
 * full-screen height so controls and context are visible at once. */
@media (min-width: 75rem) {
  .bikefvg-route-page__workspace.has-sticky-map .bikefvg-route-page__workspace-map .bfvg-route-map {
    height: clamp(26rem, calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 10rem), 42rem) !important;
    min-height: 26rem !important;
    max-height: 42rem !important;
  }

  .bikefvg-route-page__workspace.has-sticky-map .bikefvg-route-page__workspace-map .bfvg-route-map:is(:fullscreen,.leaflet-fullscreen-on,.leaflet-pseudo-fullscreen,.bfvg-map-is-fullscreen) {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}