/* Il vestito della mappa del traffico.
 *
 * Sorgente unica: vive in valseriana/site/ e viene COPIATO negli altri
 * progetti da bin/sincronizza-casa.mjs, come _casa.css e _cruscotto.css.
 * Vedi agents/core/70-design.md.
 *
 * I gettoni sono quelli di casa: le quattro soglie del traffico arrivano da
 * _casa.css e non si ridefiniscono qui, o la mappa e l'elenco sotto
 * racconterebbero due storie dello stesso numero.
 */

/* ── il riquadro ───────────────────────────────────────────────────────── */
.telaio{margin-inline:auto;
  height:clamp(14rem,44vh,22rem);
  border:1px solid var(--rule);border-radius:.4rem;overflow:hidden;
  background:var(--rule-soft);position:relative;isolation:isolate;
}
/* lo sfondo di CARTO è grigio-blu: qui la carta è calda, e le tinte del
   traffico devono staccarci sopra senza gridare */
.telaio .leaflet-tile-pane{filter:sepia(.16) saturate(.68) brightness(1.04) contrast(.94)}
.telaio .leaflet-container{background:var(--rule-soft);font-family:var(--sans);outline:0}
.telaio .leaflet-control-attribution{
  background:color-mix(in srgb,var(--carta) 82%,transparent);
  font-size:.6rem;color:var(--ink-4)}
.telaio .leaflet-control-attribution a{color:var(--ink-3)}
.telaio .leaflet-control-zoom a{
  color:var(--ink-2);background:var(--carta);border-color:var(--rule);
  width:2rem;height:2rem;line-height:1.9rem;font-weight:700}
.telaio .leaflet-control-zoom a:hover{background:var(--rule-soft);color:var(--ink)}

/* senza Leaflet resta una carta muta: si vede la valle, non il paese sotto */
.telaio.senza-sfondo{display:block;background:var(--carta)}
.telaio.senza-sfondo::after{
  content:attr(data-nota);position:absolute;right:.4rem;bottom:.3rem;
  font-size:.6rem;color:var(--ink-4)}

/* il dito: finché la mappa è alla sua inquadratura non si trascina, così una
   pagina lunga si scorre anche col pollice sopra la mappa */
.telaio[data-mano=no] .leaflet-container{touch-action:pan-y}

/* ── quel che disegniamo noi ───────────────────────────────────────────── */
.strato{position:absolute;top:0;left:0;pointer-events:none;z-index:400;overflow:visible}
.strato .fondo{fill:none;stroke:var(--ink-4);stroke-opacity:.22;stroke-width:5;
  stroke-linecap:round;stroke-linejoin:round}
.strato .fondo.arco{stroke-opacity:.1;stroke-width:2.5;stroke-dasharray:1 5}
.strato .tratta{fill:none;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke-width .25s var(--molla)}
.strato .tratta.muta{stroke:var(--ink-4);stroke-opacity:.45;stroke-dasharray:2 4}
.strato .tratta.scelta,.strato .punta.scelta{filter:drop-shadow(0 0 3px var(--ink))}
.strato .punta{fill:var(--bg);stroke:none}
.strato .presa{fill:none;stroke:#000;stroke-opacity:0;stroke-width:16;
  pointer-events:stroke;cursor:pointer}
.strato .porta{fill:var(--carta);stroke:var(--ink-3);stroke-width:1.2}
.strato .nomeporta{font-size:9px;font-weight:700;fill:var(--ink-2);
  paint-order:stroke;stroke:var(--bg);stroke-width:2.5px;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){.strato .tratta{transition:none}}

/* ── i comandi ─────────────────────────────────────────────────────────── */
.mappa-comandi{margin:.5rem 0 0}
.mappa-comandi .modi{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none}
.mappa-comandi .modi::-webkit-scrollbar{display:none}
.mappa-comandi .modi button{
  flex:0 0 auto;min-height:2.25rem;padding:.3rem .7rem;font:inherit;font-size:.78rem;
  font-weight:700;background:var(--rule-soft);color:var(--ink-2);border:1px solid transparent;
  border-radius:999px;cursor:pointer;white-space:nowrap}
.mappa-comandi .modi button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.mappa-comandi .modi button:focus-visible{outline:2px solid var(--dawn-ink);outline-offset:2px}
/* sul telefono non c'è il passaggio del mouse: se al tocco non risponde niente,
   sembra che il tasto non abbia funzionato */
.mappa-comandi .modi button:active{transform:scale(.97)}
/* il taglio dei peggiori: è un interruttore, non uno dei tre modi, e si vede */
.mappa-comandi .modi .srotola,
.mappa-comandi .modi .srotola[aria-pressed=true]{
  margin-left:auto;background:none;border:1px dashed var(--rule);color:var(--ink-3)}
.mappa-comandi .modi .srotola:hover{border-color:var(--ink-4);color:var(--ink-2)}

.mappa-comandi .cursore{display:flex;align-items:center;gap:.5rem;margin:.45rem 0 0}
.mappa-comandi .gioca{
  flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--rule);
  background:var(--carta);color:var(--ink-2);font-size:.7rem;line-height:1;cursor:pointer}
.mappa-comandi .gioca:hover{border-color:var(--ink-4);color:var(--ink)}
.mappa-comandi .gioca:active{transform:scale(.93)}
.mappa-comandi .cursore input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--dawn-ink)}
.mappa-comandi .cursore .ora{
  flex:0 0 auto;font-size:.74rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
  min-width:8.5em;text-align:right}

/* ── la striscia dei sette giorni: comando del tempo e riassunto insieme ── */
.mappa-striscia{margin:.6rem 0 0;position:relative}
.mappa-striscia .giorno{display:flex;align-items:center;gap:.4rem;margin-bottom:2px}
.mappa-striscia .gg{
  flex:0 0 3.4rem;font-size:.62rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
.mappa-striscia .celle{flex:1 1 auto;display:grid;grid-template-columns:repeat(48,1fr);gap:1px}
.mappa-striscia .cella{
  height:.85rem;border:0;padding:0;border-radius:1px;cursor:pointer;
  background:var(--rule);min-width:0}
.mappa-striscia .cella.vuota{background:transparent;cursor:default}
.mappa-striscia .cella.muta{background:var(--rule)}
.mappa-striscia .cella.qui{outline:1.5px solid var(--ink);outline-offset:0;z-index:1}
.mappa-striscia .cella:active{outline:1.5px solid var(--ink-3);z-index:1}
.mappa-striscia .cella:focus-visible{outline:2px solid var(--dawn-ink);outline-offset:1px;z-index:2}
.mappa-striscia .ore{
  position:relative;height:.9rem;margin-left:3.8rem;font-size:.6rem;color:var(--ink-4);
  font-variant-numeric:tabular-nums}
.mappa-striscia .ore span{position:absolute;transform:translateX(-50%);top:.1rem}

/* ── la scheda della tratta toccata ────────────────────────────────────── */
.mappa-scheda{
  margin:.6rem 0 0;padding:.55rem .7rem;background:var(--carta);
  border:1px solid var(--rule);border-radius:.35rem}
.mappa-scheda .chi{margin:0;display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.mappa-scheda .chi b{font-size:.92rem}
.mappa-scheda .verso{font-size:.62rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
.mappa-scheda .quanto{margin:.15rem 0 0;font-size:.82rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.mappa-scheda .quanto b{font-size:1.05rem}

#mappa-legenda .avvertenza{color:var(--ink-4);font-style:italic}

/* da tablet in su la striscia respira: le celle diventano leggibili una a una */
@media (min-width:40rem){
  .mappa-striscia .cella{height:1rem}
  .telaio{height:clamp(16rem,50vh,26rem)}
}