/* ── Le vesti dei comandi, da ol.css ──────────────────────────────────────────────────────
   Le regole che seguono vengono dal foglio di OpenLayers 10.9.0 (ol.css, licenza BSD-2,
   © OpenLayers Contributors), prese per quel che il progetto usa: i comandi (`ol-control`,
   `ol-zoom`, `ol-rotate`, `ol-full-screen`), la scala grafica, l'attribuzione, il viewport.
   Stanno qui e non più nel CDN perché dal settembre 2026 i comandi con queste classi li
   costruiscono TUTT'E DUE i motori — MapLibre, che è quello di tutti, e OpenLayers, che si
   carica solo dove WebGL manca — e il foglio deve vestirli anche quando OpenLayers non c'è.
   Le variabili `--ol-*` le leggono anche le regole nostre più in basso. */
:root,
:host {
    --ol-background-color: white;
    --ol-accent-background-color: #F5F5F5;
    --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
    --ol-partial-background-color: rgba(255, 255, 255, 0.75);
    --ol-foreground-color: #333333;
    --ol-subtle-foreground-color: #666666;
    --ol-brand-color: #00AAFF;
}

.ol-box {
    box-sizing: border-box;
    border-radius: 2px;
    border: 1.5px solid var(--ol-background-color);
    background-color: var(--ol-partial-background-color);
}

.ol-scale-line {
    background: var(--ol-partial-background-color);
    border-radius: 4px;
    bottom: 8px;
    left: 8px;
    padding: 2px;
    position: absolute;
}

.ol-scale-line-inner {
    border: 1px solid var(--ol-subtle-foreground-color);
    border-top: none;
    color: var(--ol-foreground-color);
    font-size: 10px;
    text-align: center;
    margin: 1px;
    will-change: contents, width;
    transition: all 0.25s;
}

.ol-unsupported {
    display: none;
}

.ol-viewport,
.ol-unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.ol-viewport canvas {
    all: unset;
    overflow: hidden;
}

.ol-viewport {
    touch-action: pan-x pan-y;
}

.ol-selectable {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

.ol-grabbing {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}

.ol-grab {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}

.ol-control {
    position: absolute;
    background-color: var(--ol-subtle-background-color);
    border-radius: 4px;
}

.ol-zoom {
    top: .5em;
    left: .5em;
}

.ol-rotate {
    top: .5em;
    right: .5em;
    transition: opacity .25s linear, visibility 0s linear;
}

.ol-rotate.ol-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s linear, visibility 0s linear .25s;
}

.ol-full-screen {
    right: .5em;
    top: .5em;
}

.ol-control button {
    display: block;
    margin: 1px;
    padding: 0;
    color: var(--ol-subtle-foreground-color);
    font-weight: bold;
    text-decoration: none;
    font-size: inherit;
    text-align: center;
    height: 1.375em;
    width: 1.375em;
    line-height: .4em;
    background-color: var(--ol-background-color);
    border: none;
    border-radius: 2px;
}

.ol-control button::-moz-focus-inner {
    border: none;
    padding: 0;
}

.ol-compass {
    display: block;
    font-weight: normal;
    will-change: transform;
}

.ol-touch .ol-control button {
    font-size: 1.5em;
}

.ol-control button:hover,
.ol-control button:focus {
    text-decoration: none;
    outline: 1px solid var(--ol-subtle-foreground-color);
    color: var(--ol-foreground-color);
}

.ol-zoom .ol-zoom-in {
    border-radius: 2px 2px 0 0;
}

.ol-zoom .ol-zoom-out {
    border-radius: 0 0 2px 2px;
}

.ol-attribution {
    text-align: right;
    bottom: .5em;
    right: .5em;
    max-width: calc(100% - 1.3em);
    display: flex;
    flex-flow: row-reverse;
    align-items: center;
}

.ol-attribution a {
    color: var(--ol-subtle-foreground-color);
    text-decoration: none;
}

.ol-attribution ul {
    margin: 0;
    padding: 1px .5em;
    color: var(--ol-foreground-color);
    text-shadow: 0 0 2px var(--ol-background-color);
    font-size: 12px;
}

.ol-attribution li {
    display: inline;
    list-style: none;
}

.ol-attribution li:not(:last-child):after {
    content: " ";
}

.ol-attribution img {
    max-height: 2em;
    max-width: inherit;
    vertical-align: middle;
}

.ol-attribution button {
    flex-shrink: 0;
}

.ol-attribution.ol-collapsed ul {
    display: none;
}

.ol-attribution:not(.ol-collapsed) {
    background: var(--ol-partial-background-color);
}

.ol-attribution.ol-uncollapsible {
    bottom: 0;
    right: 0;
    border-radius: 4px 0 0;
}

.ol-attribution.ol-uncollapsible img {
    margin-top: -.2em;
    max-height: 1.6em;
}

.ol-attribution.ol-uncollapsible button {
    display: none;
}

/* ── Il fumetto del pin ───────────────────────────────────────────────────────────────── */
.ol-popup {
    position: absolute;
    background-color: white;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    border-radius: 10px;
    border: 1px solid #cccccc;
    /* `--memo-popup-lift` è l'alzata che scopre il pin acceso sotto il fumetto: la scrive
       map_base.js (liftPopupOverPin) sull'elemento, alta quanto il pin selezionato, e la
       toglie quando il fumetto non sta su un pin; sullo spillo di un POI la scrive
       map_popup.js (liftPopupBy), alta quanto lo spillo. Senza nessuno che la scriva vale
       il ritto di sempre. */
    bottom: var(--memo-popup-lift, 12px);
    left: -50px;
    min-width: 320px !important;
    font-size: 60% !important;
    padding: 18px 0 14px 0;
}

:root[data-theme="dark"] .ol-popup,
:root[data-theme="dark"] .ol-popup .ol-popup-content,
:root[data-theme="dark"] #popup-content {
    color: var(--memo-color-dark-blue) !important;
}

.ol-popup .ol-popup-content {
    padding: 0 20px 0 20px;
}

.ol-popup::after,
.ol-popup::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup::after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup::before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.ol-popup-closer {
    text-decoration: none;
    color: #9d9d9d;
    position: absolute;
    top: 3px;
    right: 8px;
    margin: 0 0 2px 2px;
}

/* La fotografia del popup: stava tutta in stili inline scritti dal JS (map_popup.js), e da
   lì il telefono non poteva correggerla. La misura base è quella di sempre. */
.ol-popup-figure {
    height: 120px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* «vedi dettagli»: dentro il popup il corpo è al 60%, e con la vecchia classe very-small
   l'etichetta scendeva a 11 punti. Qui la sua misura è detta per intero, in rem, fuori
   dalla cascata del popup. */
.ol-popup .memo-btn {
    font-size: 0.7rem;
}

/* ── Il fumetto del pin, sul telefono: una scheda a fondo mappa ──────────────────────────
   Ancorato al pin, il fumetto da 320 punti sbordava dallo schermo ogni volta che il pin
   stava a destra del centro — titolo troncato, «vedi dettagli» tagliato — con la chiusura
   da 15×23 e i controlli della mappa sopra la fotografia. Qui smette di inseguire il pin:
   si stende sul bordo di sotto della mappa, a tutta larghezza, sopra i controlli. Gli
   !important servono contro i motori, che scrivono left/top inline a ogni render per
   tenerlo appeso al pin; la chiusura resta quella di sempre (la ×, il tocco sulla mappa,
   che chiudeva già). L'autoPan non scatta più da solo: con la scheda sempre dentro lo
   schermo non ha niente da correggere. Sul desktop non cambia nulla. */
@media (max-width: 767.98px) {
    .ol-popup {
        /* niente !important su posizione e transform: sul telefono la scheda non è più un
           overlay del motore (map_base.js la fa figlia della mappa), quindi non c'è
           nessuno stile inline da vincere — e il transform serve libero al trascinamento
           verso il basso che la chiude */
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        min-width: 0 !important;
        width: 100%;
        border: none;
        border-top: 1px solid #cccccc;
        border-radius: 12px 12px 0 0;
        font-size: 0.8rem !important;
        padding: 14px 0 10px 0;
        z-index: 10;
        max-height: calc(var(--memo-map-height, 90vh) - 60px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* la freccia indicava il pin: la scheda non lo indica più. Il ::before diventa la
       maniglia del foglio — la pastiglia orizzontale che annuncia «si trascina» — e va
       ripulito dai bordi che da freccia si portava dietro. */
    .ol-popup::after {
        content: none;
    }

    .ol-popup::before {
        content: "";
        border: none;
        top: 6px;
        left: 50%;
        width: 36px;
        height: 4px;
        margin-left: -18px;
        border-radius: 2px;
        background: #cccccc;
    }

    .ol-popup-figure {
        height: 160px;
        background-size: cover;
    }

    .ol-popup-closer {
        top: 0;
        right: 0;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }

    /* il link alla scheda diventa il pulsante pieno che è: largo, alto un dito */
    .ol-popup .memo-btn {
        display: block;
        text-align: center;
        font-size: 0.85rem;
        min-height: 44px;
        line-height: 2.2;
    }
}

.ol-popup small {
    white-space: nowrap;
}

/* L'attribuzione la impone la licenza dei dati, quindi è testo che deve essere leggibile.
   OpenLayers dà ai suoi link un #666 che sulla propria campitura (bianco al 75% sopra le
   tessere) fa 3,32:1 a 12px: sotto soglia. La regola presa da ol.css sta più in alto in
   questo foglio, quindi a parità di specificità basta l'ordine. */
.ol-attribution a {
    color: #444;
}

.geolocate_button {
    bottom: 35px !important;
    left: 0.5em !important;
}

/* One slot above the geolocate button (monument draft "Luogo" step only). */
.center_pin_button {
    bottom: 75px !important;
    left: 0.5em !important;
}

/* Offline dichiarato: niente tessere, ma la traccia e i pin restano leggibili su un
   fondo neutro invece che sul vuoto a scacchi. La classe la mette pathway_field.js. */
.map-offline {
    background: #e9e4d8;
}

.map_memo_button {
    top: 15px !important;
    right: 0.5em !important;
    width: 48px !important;
}

/* La colonna destra dei controlli, dall'alto: schermo intero (top 8, alto 36 — 54 sul
   touch, dove OL ingrandisce i bottoni), poi la ricerca, poi la bussola «Nord verso
   l'alto» (una sola, quella dei default: compare solo a mappa ruotata). I passi sono
   altezza del bottone più 4-8px d'aria: con i valori di prima la ricerca toccava lo
   schermo intero, e sul touch la bussola cadeva DENTRO la ricerca (115 contro una
   ricerca che finisce a 120). Misure verificate su screenshot desktop e cellulare. */
.ol-rotate {
    top: 52px !important;
}

.has_map_search .ol-rotate {
    top: 92px !important;
}

.ol-touch .ol-rotate {
    top: 68px !important;
}

/* ATTENZIONE ai composti: la classe ol-touch sta sul VIEWPORT di OpenLayers (o sul velo
   dei comandi di MapLibre), che sta dentro il riquadro dove stanno has_map_search e
   is_widget_map. «.ol-touch.has_map_search» non matcha mai (classi su elementi diversi):
   l'annidamento giusto è riquadro → viewport. */
.has_map_search .ol-touch .ol-rotate {
    top: 126px !important;
}

/* Nel widget l'angolo in alto a destra è del logo MEMO (top 15, alto ~50): la bussola
   gli sta sotto. Dopo le regole touch, così vince anche sui widget guardati col dito. */
.is_widget_map .ol-rotate {
    top: 75px !important;
}

.map_search_button {
    top: 52px !important;
    right: 0.5em !important;
}

.ol-touch .map_search_button {
    top: 68px !important;
}

.map_search_box {
    position: absolute;
    top: 0;
    right: calc(100% + 6px);
    /* due terzi del raddoppio provato (680px): i toponimi lunghi ci stanno per intero
       senza attraversare mezza mappa; sugli schermi piccoli comanda il max-width */
    width: 450px;
    max-width: calc(100vw - 80px);
    background-color: white;
    padding: 10px;
    border-radius: 4px;
    outline: 1px solid var(--ol-subtle-background-color);
    font-size: 70%;
    text-align: left;
    /* Il riquadro resta bianco in tutti i temi, quindi l'inchiostro si inchioda: col ruolo
       del corpo, la notte, diventerebbe chiaro su bianco. È una delle eccezioni dichiarate
       alla regola delle coppie (engine/tests/test_css_palette.py). */
    color: var(--memo-color-dark-blue, #243a62);
}

.map_search_row {
    display: flex;
    gap: 6px;
}

.map_search_box input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px;
    font-size: inherit;
    color: inherit;
    background-color: white;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

/* Reset OL's fixed 1.375em square so the button fits its "cerca" label. */
.map_search_box .map_search_submit {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 4px 10px;
    font-size: inherit;
}

.map_search_results {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    max-height: 40vh;
    overflow-y: auto;
}

.map_search_results:empty {
    margin: 0;
}

.map_search_empty {
    padding: 4px 8px;
    color: gray;
    font-style: italic;
}

/* Extra specificity plus explicit resets: OL's .ol-control button rules (fixed
   1.375em square, bold, tight line-height) and .ol-control-transparent button
   (white bg + outline) would otherwise squash the list entries. */
.map_search_box .map_search_result {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 4px 8px;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 4px;
    outline: none;
    color: inherit;
    font-size: inherit;
    font-weight: normal;
    line-height: 1.4;
    cursor: pointer;
}

.map_search_box .map_search_result:hover,
.map_search_box .map_search_result:focus {
    background-color: var(--ol-subtle-background-color, #f0f0f0);
}

.map_search_result small {
    display: block;
    color: gray;
}

#popup-content {
    text-align: center;
}

/* Lo zoom con la rotellina resta gated dal Ctrl/Cmd (cooperativeGestures di MapLibre), ma
   senza l'overlay «Usa Ctrl + scroll» che comparirebbe a ogni scroll — lo scroll semplice
   scorre la pagina in silenzio. Nascondiamo solo l'alert dello scroll; la guida ai gesti
   touch resta nel testo sopra la mappa. */
.maplibregl-cooperative-gesture-screen {
    display: none !important;
}


.ol-control-transparent {
    background: none !important;
}

.ol-control-transparent button {
    border-radius: 4px;
    background-color: white;
    outline: 1px solid var(--ol-subtle-background-color);
}

.ol-control-transparent button:hover {
    outline: 1px solid var(--ol-subtle-foreground-color);
}

.ol-box {
    background-color: white;
    padding: 10px;
    border-radius: 4px;
    outline: 1px solid var(--ol-subtle-background-color);
    font-size: 60%;
    position: relative;
    left: 60px;
    top: -130px;
}

/* Il pannello del cambio mappa si dimensionava sul contenuto e stava in 202 px: da quando ci sono
   le ortofoto storiche le voci portano anche regione e annata, e andavano a capo. Mezza volta più
   largo. Il max-width serve agli schermi piccoli: il pannello parte a 60 px dal bordo sinistro
   (vedi .ol-box qui sopra), quindi senza limite uscirebbe dalla mappa. */
#layer_selector_box {
    min-width: 303px;
    max-width: calc(100vw - 80px);
    /* Il pannello è più alto della mappa — 730 punti di voci contro i 560 della mappa sul
       telefono, e ancora meno sul percorso — e il viewport di OpenLayers taglia senza dire
       niente: metà menu era invisibile. Il tetto segue l'altezza vera della mappa (la
       variabile sta accanto a ogni height in questo foglio), i 100 punti sono l'aria che il
       pannello ha sopra di sé; quel che non ci sta scorre. overscroll-behavior: arrivati in
       fondo al pannello il gesto non deve mettersi a scorrere la pagina sotto. */
    max-height: calc(var(--memo-map-height, 90vh) - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Dove la finestra è larga il pannello si allarga, e le voci si dispongono su due colonne
   (.layer_menu_columns qui sotto). Il menu è lungo — cinque carte di base, i sentieri, cinque
   sfondi storici sotto quattro regioni, il cursore della trasparenza — e in colonna sola
   costringeva a scorrere anche su uno schermo che di larghezza ne aveva d'avanzo. La soglia è
   la finestra e non il dispositivo: 60 px di stacco dal bordo più 430 di pannello ci stanno da
   576 in su, telefono sdraiato compreso, dove le due colonne servono anzi di più perché
   l'altezza è poca. */
@media (min-width: 576px) {

    #layer_selector_box {
        min-width: 430px;
    }
}

/* Le due colonne del menu (le carte di base; i blocchi delle regioni negli sfondi storici).
   Quante siano non lo decide una soglia ma la larghezza vera del pannello: `auto-fit` conta
   quante colonne da 170 px ci entrano, e dove ne entra una sola — il telefono, dove il
   max-width qui sopra stringe il pannello a quel che resta dello schermo — il menu torna in
   colonna da sé, senza che nessuna media query debba indovinare il dispositivo.
   `align-items: start` perché i blocchi delle regioni hanno una voce o due e non devono
   stirarsi all'altezza del vicino. */
.layer_menu_columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    column-gap: 14px;
    align-items: start;
}

.ol-box:hover {
    outline: 1px solid var(--ol-subtle-foreground-color);
    transition: outline-color 0.25s ease;
}

.layerswitch_button {
    top: 105px !important;
    left: 0.5em !important;
}

.ol-touch .layerswitch_button {
    top: 155px !important;
}

.default_view_button {
    bottom: 35px !important;
    right: 0.5em !important;
}

/* «Fotografa la mappa» sta un passo sopra «Vista iniziale», in coda alla colonna destra: i
   due si guardano — uno riporta la mappa dov'era, l'altro se la porta via — e il passo è
   quello di sempre, altezza del bottone più aria. Sul telefono segue il compagno in cima
   (vedi la media query in fondo), con le stesse quattro varianti, perché quel pulsante
   cambia posto quattro volte: la ricerca dei toponimi sposta tutta la colonna di un posto, e
   col dito i bottoni di OpenLayers crescono di una volta e mezza. Nei widget non c'è: la
   fotografia è un comando del sito, non di una mappa incorporata altrove. */
.screenshot_button {
    bottom: 75px !important;
    right: 0.5em !important;
}

/* Il pulsante del rilievo sta a DESTRA dei comandi dello zoom, sulla loro stessa riga: si
   legge come un modo di guardare la mappa, non come uno dei bottoni impilati sul lato.
   Le misure sono in punti e non in em perché devono combaciare con un controllo che non è
   nostro: lo zoom di OpenLayers occupa da 13 a 49 punti dal bordo della mappa, e da 13 a
   66 in modalità tocco, dove i bottoni crescono di una volta e mezza (misurato in pagina).
   Quei quattro punti di stacco sono l'aria fra i due gruppi. */
.free_3d_button {
    top: 13px !important;
    left: 53px !important;
}

.ol-touch .free_3d_button {
    left: 70px !important;
}

/* Il riquadro porta la classe `d-block` di Bootstrap, che è un display !important: senza
   questa riga `hidden` non lo nasconderebbe. */
#map-canvas[hidden] {
    display: none !important;
}

#map-canvas {
    height: 90vh;
    /* la stessa misura, leggibile dai discendenti: il menu dei layer ci calcola il suo
       tetto (vedi #layer_selector_box), perché il viewport di OpenLayers taglia con
       overflow hidden tutto quel che sborda dalla mappa */
    --memo-map-height: 90vh;
    width: 100% !important;
    position: relative;
}

/* Con l'id: la regola di #map-canvas qui sopra scrive la stessa variabile, e su un id vince
   su una classe sola — l'altezza si salvava con l'!important, la variabile no, e sul percorso
   il menu dei layer si prendeva il tetto della mappa da 90vh dentro una mappa da 75: sul
   telefono sbordava di 160 punti sotto l'altimetria. */
#map-canvas.canvas-with-elevation {
    height: 75vh !important;
    --memo-map-height: 75vh;
}

/* A schermo intero (controllo OpenLayers) la mappa è alta quanto lo schermo, ma la
   variabile non lo sapeva: il menu dei layer restava tappato alla misura della mappa
   piccola — 460 punti dentro 844, misurato — e con lui la scheda del pin. */
#map-canvas:fullscreen {
    --memo-map-height: 100svh;
}

/* ── La mappa sul telefono ──────────────────────────────────────────────────────────────
   A 90vh, e cominciando sotto testata e titolo, il bordo di sotto della mappa cadeva fuori
   dallo schermo: su /monumenti/ la mappa andava da 630 a 1390 in una finestra da 844, cioè
   se ne vedeva la sola striscia in cima, e i comandi appoggiati in basso — geolocalizzazione
   e ritorno alla vista iniziale — non erano né visibili né raggiungibili. In più `vh` misura
   il viewport GRANDE, quello senza barra degli indirizzi: il riquadro era ancora più alto di
   quanto dicesse il numero. `svh` è il viewport piccolo, quello che si vede davvero con la
   barra aperta, ed è l'unità che la modale «sul campo» usa già.

   Il tetto in punti è per il telefono sdraiato, dove 70svh sarebbe una feritoia. */
@media (max-width: 767.98px) {

    #map-canvas {
        height: min(70svh, 560px);
        --memo-map-height: min(70svh, 560px);
    }

    /* Mappa e altimetria sono un attrezzo solo — si percorre il profilo e si accende il
       punto sul tracciato — e sul telefono non entravano mai nella stessa schermata: 633
       punti di mappa più 211 di grafico, in una finestra da 844, con il titolo in mezzo.
       45 + 20 = 65svh: ci stanno insieme, ed è la sola misura in cui quel legame si vede. */
    #map-canvas.canvas-with-elevation {
        height: 45svh !important;
        --memo-map-height: 45svh;
    }

    #pathway_elevation,
    #pathway_elevation_container {
        height: 20svh !important;
    }

    /* I due comandi appoggiati al bordo di sotto salgono in cima, in coda alle rispettive
       colonne: a sinistra sotto il cambio mappa, a destra sotto la ricerca. Le misure
       seguono i passi già stabiliti più in alto in questo foglio (altezza del bottone più
       aria), con la variante `.ol-touch`, che è quella che si applica davvero su un
       telefono: OL la mette sul viewport quando il puntatore è grosso. */
    .geolocate_button {
        top: 150px !important;
        bottom: auto !important;
    }

    .ol-touch .geolocate_button {
        top: 217px !important;
    }

    .default_view_button {
        top: 96px !important;
        bottom: auto !important;
    }

    .has_map_search .default_view_button {
        top: 136px !important;
    }

    .ol-touch .default_view_button {
        top: 130px !important;
    }

    .has_map_search .ol-touch .default_view_button {
        top: 188px !important;
    }

    .screenshot_button {
        top: 140px !important;
        bottom: auto !important;
    }

    .has_map_search .screenshot_button {
        top: 180px !important;
    }

    .ol-touch .screenshot_button {
        top: 192px !important;
    }

    .has_map_search .ol-touch .screenshot_button {
        top: 250px !important;
    }
}

/* La modale a tutto schermo del corredo sul campo — «portami lì» sulla scheda monumento,
   modalità cammino sul percorso: sopra la mappa della pagina (createMapModal ce la
   sposta dentro), sotto il pannello della bussola. Il display va rimesso a mano perché
   il default di <dialog> non conosce il flex; da chiusa resta il display: none suo. */
dialog.field-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    padding: 0;
    background: var(--bs-body-bg, #fff);
}

dialog.field-modal[open] {
    display: flex;
    flex-direction: column;
}

/* Alla mappa almeno un terzo dello schermo; il pannello sotto, se non ci sta, scorre.
   L'!important sull'altezza serve contro il 75vh !important di .canvas-with-elevation,
   che il canvas del percorso si porta dietro anche dentro la modale. */
.field-modal-map-slot {
    flex: 1 1 auto;
    min-height: 35dvh;
    position: relative;
}

.field-modal-map-slot #map-canvas {
    height: 100% !important;
}

/* Dentro la modale la posizione la segna già la bussola, col pin giallo a ogni
   rilevamento, e la modale è già a tutto schermo: il bottone della localizzazione
   sarebbe un doppione e quello dello schermo intero un modo di uscirne senza volerlo. */
.field-modal-map-slot .geolocate_button,
.field-modal-map-slot .ol-full-screen {
    display: none;
}

dialog.field-modal> :not(.field-modal-map-slot) {
    flex: 0 1 auto;
    overflow-y: auto;
}

/* La foto del bersaglio nel pannello e il suo fumetto (nome, e link sui percorsi):
   il fumetto sta DENTRO la scatola della foto — appeso al body finirebbe sotto la
   <dialog>, che tiene il resto della pagina inerte. */
.field-photo-box {
    position: relative;
    display: inline-block;
}

.field-photo-popup {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    right: 0;
    z-index: 5;
    width: max-content;
    max-width: min(16rem, 75vw);
    background: var(--memo-color-dark-blue, #243a62);
    color: #fff;
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.field-photo-popup a {
    color: inherit;
}

/* La riga sulla privacy in fondo ai pannelli sul campo è un pulsante (si tocca per
   nasconderla, e da tastiera si raggiunge), vestito da riga di testo: niente bordo né
   campitura, largo quanto il pannello, col corpo e il colore delle classi che porta. */
.field-privacy-note {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
}

#pathway_elevation {
    height: 25vh !important;
}

/* Sul touch il profilo si percorre col trascinamento orizzontale (pointer event in
   pathway_elevation.js): pan-y lascia al browser lo swipe verticale, che resta lo scroll
   della pagina. */
#pathway_elevation svg {
    touch-action: pan-y;
}

#pathway_elevation_container {
    height: 25vh !important;
}

/* Le tre legende delle fasce (fondo, vegetazione, esposizione) condividono classi e stile;
   i quadratini «non rilevato» portano il tratteggio come background-image dal JS. */
.surface_legend_item {
    margin-right: 0.7rem;
    white-space: nowrap;
}

.surface_legend_swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    margin-right: 0.3rem;
    vertical-align: -0.08rem;
}

/* Legenda del bottone POI: cerchietti negli stessi colori per categoria della pallina sul
   grafico e della capocchia dello spillo sulla mappa (i valori sono POI_COLOR_NAMES in
   map_colors.js) */
.poi_swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.85);
    margin-right: 0.25rem;
    vertical-align: -0.08rem;
}

#pathway_poi_toggle .poi_swatch {
    margin-left: 0.5rem;
}

.poi_swatch_water {
    background-color: rgb(48, 129, 208);
}

.poi_swatch_shelter {
    background-color: rgb(10, 105, 20);
}

.poi_swatch_emergency {
    background-color: rgb(225, 75, 65);
}

#pathway_poi_toggle {
    margin-bottom: 0.5rem;
}

/* Le gocce dei punti singoli sulla mappa di MapLibre (maplibre_map.js): inizio e fine del
   percorso, le tappe, il pin che scorre con l'hover sul profilo altimetrico, la propria
   posizione, il pin trascinabile del backoffice. Sono gli SVG del progetto — pin.svg,
   pin_empty.svg, pin_walk.svg, pin_star.svg — tinti in canvas e messi qui come sfondo, alla
   misura naturale della goccia: 29x55, come l'anchor [0.5, 1] di OpenLayers. L'immagine
   arriva quando l'SVG è decodificato, la misura c'è da subito, e MapLibre ancora l'elemento
   in basso: la punta sta sul punto anche prima che si veda. Non prendono i gesti: sotto ci
   sono i pin e i POI, che una scheda ce l'hanno — tranne le due varianti qui sotto. */
.maplibre-pin-marker {
    width: 29px;
    height: 55px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

/* Il pin trascinabile (passo «Luogo» delle bozze, indizi, taccuino) e le tappe (che il click
   toglie) i gesti li prendono eccome. */
.maplibre-pin-draggable {
    pointer-events: auto;
    cursor: grab;
}

.maplibre-pin-clickable {
    pointer-events: auto;
    cursor: pointer;
}

/* ── I comandi sulla mappa di MapLibre ──────────────────────────────────────────────────
   Stesso markup e stesse classi che i comandi avevano con OpenLayers e in questo foglio
   (maplibre_map.js li costruisce così apposta), appesi a un velo assoluto sopra la tela: le
   regole di sopra li vestono e li posizionano senza saperlo. Il velo non prende i gesti — li
   prendono i comandi, uno per uno — e sta sotto il fumetto, che copre tutto. */
/* MapLibre dà al proprio riquadro un corpo suo (12 punti, Helvetica): i comandi, che sono
   in em, ne uscirebbero grandi la metà. Il riquadro eredita invece dalla pagina, come fa
   quello di OpenLayers — è da lì che i 36 punti di un bottone vengono, di qua e di là. */
#map-canvas.maplibregl-map {
    font: inherit;
}

.map-chrome {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* L'ancora del fumetto: un punto 0×0 sul pin, mosso da MapLibre, dentro cui .ol-popup si
   dispone con le regole di sempre (bottom, left −50). Sopra i comandi. */
.map-popup-anchor {
    width: 0;
    height: 0;
    z-index: 3;
}

/* L'attribuzione di MapLibre col vestito di quella di OpenLayers non ripiegata: in basso a
   destra, dodici punti, la campitura bianca al 75% e l'angolo smussato in alto a sinistra. */
#map-canvas .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib {
    margin: 0;
    padding: 1px 0.5em;
    font-size: 12px;
    color: var(--ol-foreground-color);
    text-shadow: 0 0 2px var(--ol-background-color);
    background: var(--ol-partial-background-color);
    border-radius: 4px 0 0;
}

#map-canvas .maplibregl-ctrl-attrib a {
    color: #444;
    text-decoration: none;
}

/* «Copia il link a questa visuale»: linguetta attaccata al bordo inferiore destro della
   mappa (o dell'altimetria, dove c'è) — niente margini, angoli arrotondati solo sotto,
   bordo superiore assente perché il bordo è la mappa stessa. Sobrio come il testo
   d'aiuto sopra la mappa, stesso grigio. */
.map_share_link_row {
    margin: 0;
    text-align: right;
    line-height: 1;
}

/* Le due metà del testo d'aiuto sopra la mappa: col dito non si tiene premuto nessun tasto,
   e col mouse non si usano due dita. Sono nel template tutt'e due — le parole stanno lì,
   non nel foglio di stile — e qui si sceglie quale mostrare. `display: none` e non
   `visually-hidden`: la frase sbagliata non deve nemmeno essere letta da uno screen reader,
   visto che il paragrafo è l'aria-describedby della mappa. */
.map-help-coarse {
    display: none;
}

@media (pointer: coarse) {
    .map-help-fine {
        display: none;
    }

    .map-help-coarse {
        display: inline;
    }
}

/* Il --color-gray che stava qui non è mai esistito: nessun :root del progetto lo definisce,
   e a rendere era sempre il valore di ripiego. Il testo d'aiuto sopra la mappa, quello a cui
   il commento qui sopra dice di somigliare, passa adesso da .text-muted: il colore lo prende
   dal tema, e così fa questa linguetta — il #6c757d fisso sul fondo scuro stava a 3,75:1.
   Il filo del bordo resta il grigio di sempre, dichiarato per quel che è. */
.map_share_link {
    border: 1px solid #cccccc;
    border-top: none;
    /* Il lato destro è vivo: la linguetta sta agganciata al bordo destro dello schermo, su
       PC e telefono, e un bordo col suo raggio proprio sul filo dello schermo esce tagliato
       e sembra un difetto. Arrotondato resta il solo angolo in basso a sinistra. */
    border-right: none;
    border-radius: 0 0 0 4px;
    background: none;
    color: var(--memo-body-muted-text);
    font-size: 60%;
    padding: 1px 10px 1px 8px;
}

.map_share_link:hover {
    border-color: var(--memo-color-dark-blue, #243a62);
    color: var(--memo-body-text);
}

/* col tema scuro il bordo si schiarisce; l'inchiostro lo dà già il ruolo del corpo */
:root[data-theme="dark"] .map_share_link:hover {
    border-color: #cccccc;
}

/* Col dito la linguetta era alta 18px. Cresce solo in altezza e solo sul touch: la scritta
   resta della sua misura, e il bordo superiore che non c'è la tiene attaccata alla mappa
   come prima. Un ::after invisibile qui non andrebbe bene: si stenderebbe sopra la mappa,
   e le ruberebbe il trascinamento in quell'angolo. */
@media (pointer: coarse) {
    .map_share_link {
        min-height: 44px;
    }
}

div.elevation_tooltip {
    position: absolute;
    text-align: center;
    padding: 1em;
    font: 60% sans-serif;
    /* Fondo e testo dai ruoli del tema, non un colore fisso: con `lightsteelblue` e il testo
       ereditato dal corpo, di notte il fumetto scriveva chiaro su chiaro — 1,44:1, misurato.
       Ora fa 15,4 in chiaro, 11,9 in scuro e 17,9 in daltonico. */
    background: var(--memo-card-bg, lightsteelblue);
    color: var(--memo-body-text, #212529);
    border: 1px solid var(--memo-border-color, transparent);
    border-radius: 8px;
    pointer-events: none;
}

.grid .tick {
    stroke: lightgrey;
    opacity: 0.1;
}

.grid path {
    stroke-width: 0;
}

.layer>* {
    vertical-align: top;
    font-size: 85% !important;
}

.panel>ul {
    margin: 0.5em;
}

.layer>input {
    margin: 0.55em 0.5em 0 0;
}