/*
 * Tema unico, scuro, con i pannelli in vetro smerigliato.
 *
 * La mappa occupa tutto e non viene mai coperta del tutto: barra in alto,
 * schede in basso, menu e pannelli sopra, tutti traslucidi. Il vetro non è
 * decorazione fine a sé stessa — serve a non perdere di vista dov'è la famiglia
 * mentre si fa altro.
 *
 * Le icone sono tutte Font Awesome, servite da questo dominio: niente emoji
 * nell'interfaccia, perché ogni sistema le disegna a modo suo e un'icona che
 * cambia faccia da un telefono all'altro non è un'icona.
 */

:root {
  --bg: #0b0f17;
  --surface: #121826;
  --surface-2: #1a2233;
  --line: #223047;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --accent-2: #2563eb;
  --ok: #22c55e;
  --warn: #f59e0b;
  --error: #ef4444;
  --radius: 16px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Il vetro: sfondo appena velato, bordo chiaro sottile, ombra profonda. */
  --glass-bg: rgba(15, 21, 33, .72);
  --glass-border: rgba(148, 163, 184, .18);
  --glass-shadow: 0 16px 40px rgba(2, 6, 12, .5);
}

* { box-sizing: border-box; }

/*
 * `hidden` deve vincere sempre.
 *
 * L'attributo `hidden` del browser vale `display: none`, ma è una regola
 * debolissima: qualunque classe che imposti `display` la scavalca. Il menu ha
 * `display: flex` — quindi restava aperto anche quando il codice lo dichiarava
 * chiuso, su telefono come su portatile. Stessa storia per la pastiglia della
 * velocità, che è `inline-flex`.
 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior: none;
}

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

/* Dove il vetro non è supportato si scurisce il fondo: leggibile comunque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(11, 15, 23, .94); }
}

#map { position: fixed; inset: 0; background: #0b0f17; }

/* Niente filtri: le tessere arrivano già scure e un filtro le sporcherebbe. */
.leaflet-container { background: #0b0f17; font: inherit; }
.leaflet-control-attribution { background: rgba(11, 15, 23, .7); color: var(--muted); }
.leaflet-control-attribution a { color: var(--accent); }
.leaflet-bar a {
  background: var(--glass-bg); color: var(--text); border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.leaflet-bar a:hover { background: var(--surface-2); }

/* ── barra in alto ── */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 15px; border-radius: 999px;
  font-weight: 700; letter-spacing: .2px; font-size: 15px;
  color: var(--text); font-family: inherit; cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.brand:hover { border-color: var(--accent); }
.brand:active { transform: scale(.97); }
.brand-pin { color: var(--accent); font-size: 15px; }
/* Le righe del menu, dentro lo stesso pezzo di vetro del marchio. */
.brand-lines {
  font-size: 14px; color: var(--muted);
  padding-left: 11px; margin-left: 1px;
  border-left: 1px solid var(--glass-border);
}
.brand[aria-expanded="true"] .brand-lines { color: var(--accent); }



.icon-btn {
  color: var(--text);
  width: 42px; height: 42px;
  border-radius: 14px;
  font-size: 16px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .15s, background .15s, transform .1s;
}
.icon-btn:active { transform: scale(.94); }
.icon-btn:hover { border-color: var(--accent); }
.icon-btn.active { border-color: var(--accent); background: rgba(56, 189, 248, .2); color: var(--accent); }
.icon-btn.ghost { background: transparent; border: 1px solid var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── menu a scomparsa ── */

/*
 * Sta sotto il marchio, non in mezzo allo schermo.
 *
 * È la stessa posizione che ha in tutte le altre applicazioni: si apre da dove
 * si è toccato, invece di comparire dall'altra parte della pagina obbligando
 * l'occhio ad attraversarla.
 */
.drawer {
  position: fixed;
  z-index: 900;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px;
}

@media (min-width: 760px) {
  .drawer {
    top: calc(66px + env(safe-area-inset-top, 0px));
    left: 12px;
    width: 330px;
    border-radius: 18px;
    max-height: min(calc(100vh - 96px), 660px);
    overflow-y: auto;
    animation: drawer-open .18s ease;
  }
  @keyframes drawer-open { from { opacity: 0; transform: translateY(-8px); } }
}

/* Telefono: pannello a tutta altezza da sinistra, come nelle altre app. */
@media (max-width: 759px) {
  .drawer {
    top: 0; bottom: 0; left: 0;
    width: min(86vw, 330px);
    border-radius: 0 20px 20px 0;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(18px + var(--safe-bottom));
    overflow-y: auto;
    animation: drawer-slide .2s ease;
  }
  @keyframes drawer-slide { from { opacity: 0; transform: translateX(-24px); } }
}

/* Intestazioni di gruppo: separano Mappa, Famiglia e Sistema. */
.nav-group {
  margin: 14px 12px 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: #64748b;
}
.nav-group:first-of-type { margin-top: 6px; }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--glass-border);
}
.drawer-me {
  display: flex; align-items: center; gap: 11px;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  padding: 4px; border-radius: 12px; text-align: left; min-width: 0;
}
.drawer-me img { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.drawer-me b { display: block; font-size: 15px; }
.drawer-me small { color: var(--muted); font-size: 12px; }

.drawer-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 12px;
  border: 1px solid transparent; border-radius: 14px;
  background: transparent; color: inherit; font: inherit; text-align: left;
  cursor: pointer; text-decoration: none;
}
.drawer-item:hover { background: rgba(148, 163, 184, .10); border-color: var(--glass-border); }
.drawer-item > i:first-child {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 11px; background: rgba(56, 189, 248, .14); color: var(--accent); font-size: 15px;
}
.drawer-item span { flex: 1; min-width: 0; }
.drawer-item b { display: block; font-size: 14.5px; font-weight: 600; }
.drawer-item small { color: var(--muted); font-size: 12px; }
.drawer-item.small { padding: 10px 12px; }
.drawer-item[aria-pressed="true"] .drawer-toggle { color: var(--accent); }
.drawer-toggle { color: var(--muted); font-size: 20px; }
.drawer-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--glass-border); }

/* ── avvisi ── */

/*
 * L'avviso è una barra di stato, in fondo.
 *
 * In alto è stato due volte nel posto sbagliato: da bordo a bordo passava sotto
 * i comandi, centrato copriva la ricerca. In fondo non c'è niente da coprire —
 * è il posto in cui i programmi mettono lo stato da sempre — e la mappa resta
 * intera.
 */
/*
 * Gli avvisi stanno sopra tutto, perché nascono da tutto.
 *
 * Stavano a quota 700, sotto il pannello (900) e sotto il velo (800). Ma quasi
 * tutti gli avvisi nascono proprio dai comandi del pannello — "telefono non
 * raggiungibile adesso: il comando parte appena torna online" è la risposta a
 * un pulsante che sta lì dentro — quindi finivano sistematicamente dietro alla
 * cosa che li aveva generati. Un avviso invisibile è peggio di nessun avviso:
 * si preme il pulsante, non succede niente di visibile, e si pensa che sia
 * rotto.
 */
.banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  padding: 10px 16px calc(10px + var(--safe-bottom));
  border-radius: 0;
  border-left: 0; border-right: 0; border-bottom: 0;
  font-size: 13.5px;
  line-height: 1.35;
  text-align: center;
}
/*
 * Su schermo largo si mette al centro, non a destra: a destra c'è il pannello e
 * a sinistra l'elenco delle persone. Il centro in basso è l'unica striscia che
 * resta libera in ogni situazione.
 */
@media (min-width: 760px) {
  .banner {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: 14px; max-width: 460px;
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  }
}
.banner.ok { border-color: rgba(34, 197, 94, .55); }
.banner.warn { border-color: rgba(245, 158, 11, .55); }
.banner.error { border-color: rgba(239, 68, 68, .6); }

/* ── segnaposto ── */

.pin-person {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--accent);
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  overflow: hidden; position: relative;
}
.pin-person img { width: 100%; height: 100%; display: block; }
.pin-person.stale { border-color: #64748b; filter: grayscale(.6); }
.pin-person.selected { border-color: #fbbf24; transform: scale(1.08); }
.pin-battery {
  position: absolute; right: -3px; bottom: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--error); color: #fff; font-size: 9px;
}

.pin-place, .pin-camera {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line);
  color: var(--text); font-size: 13px;
}
.pin-place { border-color: var(--ok); color: var(--ok); }
.pin-camera { border-color: var(--warn); color: var(--warn); }
.pin-camera.mobile { border-color: var(--error); color: var(--error); border-style: dashed; }
.pin-camera.tutor { border-color: #a855f7; color: #a855f7; }

.accuracy { stroke: #38bdf8; stroke-opacity: .35; fill: #38bdf8; fill-opacity: .10; stroke-width: 1; }
.place-area { stroke: #22c55e; stroke-opacity: .5; fill: #22c55e; fill-opacity: .08; stroke-dasharray: 4 4; }
.trail { stroke: #fbbf24; stroke-width: 4; stroke-opacity: .85; fill: none; }
.trail-start { stroke: #fbbf24; fill: #0b0f17; }
.route { stroke: #38bdf8; stroke-width: 6; stroke-opacity: .95; fill: none; stroke-linecap: round; }
.route-shadow { stroke: #0b0f17; stroke-width: 11; stroke-opacity: .8; fill: none; stroke-linecap: round; }
.route-start { stroke: #22c55e; fill: #0b0f17; stroke-width: 3; }
.route-end { stroke: #ef4444; fill: #0b0f17; stroke-width: 3; }

/* ── schede in basso ── */

/*
 * La striscia delle schede lascia libero l'angolo dei comandi di zoom.
 * Prima ci finiva sopra, e i pulsanti + e − diventavano intoccabili.
 */
.sheet {
  position: fixed;
  /*
   * Larghe quanto basta a leggere un nome e una percentuale, non di più.
   *
   * A tutta larghezza ogni scheda era una fascia da bordo a bordo con dentro
   * tre parole e un vuoto lungo mezzo schermo, e soprattutto copriva la mappa
   * proprio dove ci sono le persone. Trecentoventi pixel bastano per la riga
   * più lunga e lasciano vedere dove sono tutti.
   */
  left: 0; right: auto; bottom: 0;
  width: min(320px, calc(100% - 72px));
  /*
   * Nessun fondo dietro le schede.
   *
   * Il vetro c'era due volte — sotto l'elenco e sotto ogni scheda — e la mappa
   * spariva sotto un rettangolo grigio grande quanto la colonna. Le schede si
   * portano già il loro fondo: quello sotto era solo un velo in più.
   */
  background: transparent; border: 0; box-shadow: none; backdrop-filter: none;
  z-index: 500;
  padding: 4px 10px calc(8px + var(--safe-bottom));
  /*
   * Il foglio decide l'altezza, la lista dentro si adatta e scorre.
   *
   * Prima il foglio era alto 38vh e tagliava, e la lista dentro dichiarava 46vh
   * di altezza propria: il figlio era più alto del padre che lo nascondeva, e
   * il risultato è che le ultime persone finivano sotto il bordo dello schermo
   * senza alcun modo di raggiungerle — non erano nascoste, erano irraggiungibili,
   * che è peggio.
   *
   * Con la colonna flessibile il conto lo fa il browser: la lista prende lo
   * spazio che resta, qualunque esso sia, e se non basta scorre. Il `min-height`
   * a zero non è un vezzo: senza, un elemento flessibile si rifiuta di
   * rimpicciolirsi sotto il proprio contenuto e il taglio ricomparirebbe.
   */
  display: flex; flex-direction: column;
  max-height: 38vh; overflow: hidden;
}
/* Su schermo largo l'elenco sta in una colonna stretta: le schede sono righe,
   non pannelli, e quattrocentosessanta pixel le facevano sembrare vuote. */
/*
 * Su schermo largo la colonna era di 250 pixel, e ci stava dentro
 * "fuori dalle zone not…" invece di "fuori dalle zone note". Tagliare la riga
 * che spiega dov'è una persona per risparmiare settanta pixel di mappa è il
 * contrario di quello che serve a chi guarda.
 */
@media (min-width: 760px) { .sheet { right: auto; width: min(340px, 46vw); } }
.sheet.expanded { max-height: 74vh; }
/* Chiuso: resta solo la maniglia, e la mappa si vede tutta. */
.sheet.chiuso .cards, .sheet.chiuso .empty { display: none; }
.sheet.chiuso { padding-bottom: 4px; }
/*
 * La maniglia: piccola da vedere, grande da toccare.
 *
 * Era un trattino alto quattro pixel, e con l'elenco chiuso restava l'unico
 * appiglio per riaprirlo: chi lo chiudeva non riusciva più a centrarlo e
 * l'elenco spariva per sempre. Adesso la barretta è quella di prima, ma
 * l'area sensibile è alta ventidue pixel, e a elenco chiuso compare anche
 * una scritta che dice come si riapre.
 */
.sheet-handle {
  display: block; width: 100%; height: 22px; border: 0; padding: 0;
  background: transparent; cursor: pointer; position: relative;
}
/*
 * Una scheda con un'icona vera, non un trattino che sparisce.
 *
 * Prima era una lineetta grigia alta quattro pixel: sulla mappa si confondeva
 * con qualunque cosa ci fosse sotto, e chiudendo l'elenco spariva del tutto —
 * restava un comando invisibile per riaprire una cosa invisibile. Adesso è una
 * targhetta come le altre, con il simbolo delle persone e una freccia che dice
 * in che verso si va: si vede sempre, in tutti e tre gli stati.
 */
.sheet-handle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: auto; height: auto; margin: 0 auto 6px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.sheet-handle:hover { color: var(--accent); border-color: var(--accent); }
.sheet-handle::before {
  content: "";                 /* fa-users */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: static; width: auto; height: auto; margin: 0; background: none;
  font-size: 13px;
}
.sheet-handle::after {
  content: "";                 /* fa-chevron-down: chiudi */
  font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px;
}
.sheet.chiuso .sheet-handle::after { content: ""; }   /* riapri */
.sheet.chiuso .sheet-handle { height: auto; padding: 9px 16px; }

/*
 * Le schede si vedono tutte, senza scorrere.
 *
 * Prima stavano in un riquadro alto poco meno di un terzo dello schermo, con lo
 * scorrimento: con cinque persone in famiglia ne restavano fuori due, e per
 * sapere dov'erano bisognava scorrere una lista di cinque righe — che è il
 * genere di attrito che fa smettere di guardare. Adesso il foglio cresce fino a
 * metà schermo e le righe sono più strette, così ci stanno tutte.
 */
.cards {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
}

.card {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 5px 9px;
  border-radius: var(--radius);
  color: inherit; text-align: left; font: inherit; cursor: pointer;
}
.card.selected { border-color: #fbbf24; }
.card-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; }
.card-main { flex: 1; min-width: 0; }
.card-name { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
/*
 * La riga di dettaglio va a capo invece di essere troncata.
 *
 * "Casa · adesso" ci sta sempre; "fuori dalle zone note" no, ed è proprio
 * l'informazione che si guarda quando qualcuno non è dove dovrebbe essere. Due
 * righe costano otto pixel di altezza e valgono la frase intera.
 */
.card-detail {
  color: var(--muted); font-size: 11.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-side { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; }

.dot { width: 9px; height: 9px; border-radius: 50%; background: #475569; display: inline-block; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px rgba(34, 197, 94, .8); }
.dot.off { background: #475569; }

/* ── pannelli ── */

/*
 * Il velo scuro non serve: la mappa deve restare leggibile.
 *
 * Copriva tutto di grigio per "mettere a fuoco" la scheda aperta, ma la scheda
 * sta di lato e occupa un terzo dello schermo: gli altri due terzi sono la
 * mappa, cioè la ragione per cui si è aperta la scheda. Spegnere quello che si
 * sta guardando per far risaltare quello che si è appena aperto è un affare in
 * perdita.
 *
 * L'area resta e resta cliccabile — toccare fuori chiude, come prima —
 * semplicemente non si vede.
 */
.scrim { position: fixed; inset: 0; background: transparent; z-index: 800; }

.panel {
  position: fixed;
  z-index: 900;
  left: 0; right: 0; bottom: 0;
  max-height: 88vh; overflow-y: auto;
  border-radius: 22px 22px 0 0;
  padding: 16px 16px calc(24px + var(--safe-bottom));
}
@media (min-width: 760px) {
  .panel { left: auto; top: 12px; bottom: 12px; right: 12px; width: 420px; border-radius: 20px; }
}

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.panel-head h2 { margin: 0; font-size: 19px; }
.panel-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--glass-border); }
.panel-section h3 { margin: 0 0 10px; font-size: 15px; color: var(--muted); font-weight: 600; }

.muted { color: var(--muted); font-size: 14px; line-height: 1.5; }
.muted.small { font-size: 12px; }
.empty { color: var(--muted); font-size: 14px; text-align: center; padding: 18px 6px; }

/*
 * I comandi stanno tutti nella schermata, senza scorrere.
 *
 * Erano sette targhette alte cinquanta pixel: l'ultima — l'ascolto d'emergenza —
 * finiva sotto il bordo, e per trovarla bisognava scorrere proprio nel momento
 * in cui la si cerca in fretta. Stringerle di un terzo non toglie niente:
 * l'icona resta grande abbastanza da riconoscersi al volo e la scritta da
 * leggersi.
 */
.grid-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.action {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 5px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); color: inherit;
  font-size: 16px; cursor: pointer;
}
.action span { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.25; }
.action:hover { border-color: var(--accent); color: var(--accent); }
.action:hover span { color: var(--muted); }

.list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
/*
 * Le righe sono anche pulsanti, e i pulsanti non ereditano il colore del testo.
 *
 * "Casa" compariva scritto in nero su fondo scuro, cioè invisibile, e non per
 * un errore di colore: un <button> senza `color` usa quello predefinito del
 * browser, che è quasi nero, e nessuna regola qui glielo diceva. Le stesse
 * quattro parole — colore, carattere, allineamento, larghezza — servono a ogni
 * riga che sia anche un comando.
 */
.list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: inherit; font: inherit; text-align: left; width: 100%;
}
button.list-row { cursor: pointer; }
button.list-row:hover { border-color: var(--accent); }
.list-icon { width: 22px; text-align: center; color: var(--accent); }
.list-avatar { width: 36px; height: 36px; border-radius: 50%; }
.list-main { flex: 1; min-width: 0; }
.list-title { font-weight: 600; font-size: 15px; }
.list-sub { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; }

/*
 * Campi e comandi rimpiccioliti di un terzo.
 *
 * Il pannello del percorso occupava tutta l'altezza dello schermo per chiedere
 * due cose — da dove e verso dove — e offrirne tre. Era tutto enorme: etichette
 * grandi quanto i valori, riquadri alti quarantacinque pixel, spazi doppi. Un
 * pannello che chiede poco deve occupare poco, e lasciare vedere la mappa che
 * sta descrivendo.
 */
.field { display: block; margin-bottom: 9px; }
.field span { display: block; color: var(--muted); font-size: 11.5px; margin-bottom: 4px; }
.field input, .field select {
  width: 100%; padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; margin-bottom: 12px; }
.row { display: flex; gap: 8px; }

.btn {
  padding: 11px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 600; text-decoration: none; display: inline-block; text-align: center;
}
.btn:hover { border-color: var(--accent); }
/*
 * Il pulsante principale.
 *
 * Sfumatura dall'alto al basso, non in diagonale: in diagonale il colore cambia
 * anche da sinistra a destra e la scritta si trova sopra due fondi diversi.
 * Testo bianco, e nessun bordo — prima ce n'era uno trasparente che sul fondo
 * chiaro della sfumatura lasciava comunque una riga visibile.
 */
.btn.primary {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  border: 0;
  color: #fff;
  /* Senza bordo il pulsante sarebbe più basso degli altri di due pixel. */
  padding: 12px 17px;
}
.btn.primary:hover { background: linear-gradient(180deg, #60a5fa, #2563eb); }
.btn.primary:active { background: linear-gradient(180deg, #2563eb, #1e40af); }
.btn.danger { border-color: rgba(239, 68, 68, .5); color: #fecaca; }
.btn.wide { display: block; width: 100%; margin-bottom: 10px; }
.btn i { margin-right: 7px; }

/* ── icone scelte per i luoghi ── */

.icon-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.icon-pick button {
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 15px;
}
.icon-pick button.active { border-color: var(--accent); color: var(--accent); background: rgba(56, 189, 248, .14); }

/* ── percorso ── */

.steps { color: var(--muted); font-size: 14px; line-height: 1.7; padding-left: 20px; }
.route-steps { list-style: none; padding-left: 0; }
.route-steps li {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--text); font-size: 14px;
}
.route-steps li:last-child { border-bottom: 0; }
.route-steps li b { color: var(--muted); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.route-steps li:hover span { color: var(--accent); }
.route-steps i { color: var(--accent); width: 20px; text-align: center; margin-right: 8px; }

.list-pick { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
/*
 * I tre mezzi: staccati e della misura giusta.
 *
 * Erano incollati l'uno all'altro e alti come il pulsante principale, così la
 * scelta del mezzo sembrava importante quanto il calcolo del percorso. Sono una
 * preferenza, non l'azione: più piccoli e con aria in mezzo.
 */
.row { display: flex; gap: 10px; }
.chip { flex: 1; padding: 8px 6px; font-size: 12.5px; border-radius: 10px; }
.chip i { margin-right: 6px; }
.chip.active { border-color: var(--accent); background: rgba(56, 189, 248, .16); color: var(--accent); }

/* ── codice di abbinamento ── */

.code { display: flex; gap: 8px; justify-content: center; margin: 18px 0 10px; }
.code span {
  width: 46px; height: 60px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg);
  font-size: 30px; font-weight: 800; color: var(--accent);
  font-family: "SF Mono", Consolas, monospace;
}

/* ── diagnostica ── */

.log { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 8px 12px; margin-bottom: 8px; }
.log summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }
.log-message { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-when { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.log-detail { color: var(--muted); font-size: 12px; margin-top: 8px; line-height: 1.6; }
.log-detail pre {
  margin: 8px 0 0; padding: 10px; border-radius: 10px; background: var(--bg);
  overflow-x: auto; font-size: 11px; line-height: 1.5; color: #cbd5e1;
}
.log-level.crash { color: var(--error); }
.log-level.error { color: var(--warn); }
.log-level.info { color: var(--muted); }

/* ── accesso e download ── */

.login-page { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }
.login-card {
  width: 100%; max-width: 380px; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 34px 26px 28px;
}
.login-pin { font-size: 46px; color: var(--accent); }
.login-card h1 { margin: 8px 0 4px; font-size: 26px; }
.login-sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.login-button {
  display: block; padding: 14px 20px; border-radius: 12px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  color: #fff; font-weight: 700; text-decoration: none;
}
.login-note { margin: 18px 0 0; color: #64748b; font-size: 12px; line-height: 1.6; }
.login-error {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .12);
  color: #fecaca; font-size: 13px;
}
.download-card { max-width: 460px; }
.download-card .login-button { margin-bottom: 6px; }
.download-link { margin-top: 14px; }
.download-steps { text-align: left; margin-top: 22px; }
.download-steps li { margin-bottom: 8px; }

/* ── suggerimenti e domande dell'applicazione ── */

/*
 * Il browser ha i suoi, ma sono di un altro programma: carattere di sistema,
 * posizione decisa da altri, e sul telefono il `title` non compare proprio.
 * Questi hanno la faccia del resto dell'applicazione e funzionano ovunque.
 */
.tip {
  position: fixed;
  z-index: 1200;
  max-width: 260px;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  pointer-events: none;
}

.dialog-back {
  position: fixed; inset: 0; z-index: 1100;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(2, 6, 12, .6);
  animation: dialog-in .16s ease;
}
@keyframes dialog-in { from { opacity: 0; } }

.dialog {
  width: 100%; max-width: 380px;
  padding: 20px;
  border-radius: 18px;
}
.dialog h3 { margin: 0 0 8px; font-size: 17px; }
.dialog p { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.dialog-actions .btn { min-width: 110px; }

/* ── rifiniture ── */

/*
 * Barre di scorrimento sottili e scure.
 *
 * Quella di sistema, chiara e larga, tagliava in due il menu in vetro: si vedeva
 * prima lei del contenuto.
 */
.drawer, .panel, .cards, .sheet.expanded, .log-detail pre {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .35) transparent;
}
.drawer::-webkit-scrollbar, .panel::-webkit-scrollbar,
.cards::-webkit-scrollbar, .sheet.expanded::-webkit-scrollbar { width: 6px; }
.drawer::-webkit-scrollbar-thumb, .panel::-webkit-scrollbar-thumb,
.cards::-webkit-scrollbar-thumb, .sheet.expanded::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .32); border-radius: 999px;
}
.drawer::-webkit-scrollbar-track, .panel::-webkit-scrollbar-track { background: transparent; }

/* L'attribuzione: dovuta, ma non deve gridare. */
.leaflet-control-attribution {
  font-size: 10px; padding: 2px 6px; border-radius: 8px 0 0 0;
  background: rgba(11, 15, 23, .55); color: #64748b;
}
.leaflet-control-attribution a { color: #94a3b8; }

/* I comandi di zoom, in tinta con il resto. */
.leaflet-bar { border: 0; box-shadow: var(--glass-shadow); border-radius: 14px; overflow: hidden; }
.leaflet-bar a { width: 38px; height: 38px; line-height: 38px; font-size: 17px; border-bottom-color: var(--glass-border); }
.leaflet-bar a:first-child { border-radius: 14px 14px 0 0; }
.leaflet-bar a:last-child { border-radius: 0 0 14px 14px; }

/* Schede: un filo di respiro in più e lo stato più leggibile. */
.card { transition: transform .12s, border-color .12s; }
.card:hover { transform: translateY(-1px); }
.card.selected { box-shadow: 0 0 0 1px #fbbf24 inset, var(--glass-shadow); }
.card-battery { font-variant-numeric: tabular-nums; }

/* Il menu non deve mai finire sotto il bordo dello schermo. */
@media (min-width: 760px) {
  .drawer { max-height: min(calc(100vh - 96px), 640px); }
}

/* Titoli un po' più stretti: l'interfaccia sembra più curata e occupa meno. */
.drawer-item b, .panel-head h2, .card-name { letter-spacing: -.01em; }
.panel-head h2 { font-weight: 700; }

/* Il contenitore della mappa Google: occupa lo stesso posto di quella di base. */
#gmap { position: fixed; inset: 0; background: #0b0f17; }

/* La velocità che arriva dal telefono, accanto alla batteria. */
.card-speed {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(56, 189, 248, .16); border: 1px solid rgba(56, 189, 248, .4);
  color: var(--accent); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.card-speed small { font-size: 9.5px; font-weight: 600; opacity: .8; }
.card-speed i { font-size: 10.5px; }

/* ── spazi ── */

/*
 * Il pannello aveva tutto attaccato: campi, elenco dei suggerimenti e pulsante
 * si toccavano, e le tre parti sembravano una cosa sola. Qui si separano i
 * blocchi e si lascia aria dove l'occhio deve fermarsi.
 */
.panel { padding: 18px 18px calc(26px + var(--safe-bottom)); }
.panel-head { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--glass-border); }
.panel-body > .field:first-child { margin-top: 4px; }

.field { margin-bottom: 16px; }
.field span { margin-bottom: 7px; font-weight: 600; letter-spacing: .01em; }
.field input, .field select { padding: 12px 13px; }

/* I suggerimenti stanno sotto il campo a cui appartengono, non a mezz'aria. */
#route-results:not(:empty), #place-results:not(:empty) { margin: -8px 0 18px; }
#route-results .list-row, #place-results .list-row { padding: 11px 12px; }

/* La riga dei mezzi: stessa distanza fra i tre, e aria sotto. */
.row { gap: 10px; }
.panel-body > .row { margin-bottom: 18px; }
.chip { padding: 11px 8px; }

.panel-section { margin-top: 24px; padding-top: 18px; }
.panel-section h3 { margin-bottom: 12px; }
.grid-actions { gap: 7px; margin-top: 12px; }
.list { gap: 9px; }
.muted + .muted { margin-top: -6px; }
.btn.wide { margin-bottom: 12px; }
.btn.wide:last-child { margin-bottom: 0; }

/* Il pulsante mentre il telefono sta suonando: si vede da lontano. */
.action.ringing {
  border-color: var(--error);
  color: var(--error);
  background: rgba(239, 68, 68, .14);
  animation: suona 1.1s ease-in-out infinite;
}
@keyframes suona { 50% { background: rgba(239, 68, 68, .3); } }

/*
 * Le tacche della batteria: cinque barrette, come su un indicatore di segnale.
 *
 * Sono un giudizio, non una misura di fabbrica — un'app non può leggere la
 * capacità nominale di una batteria — e il colore lo dice: verde finché dura
 * come è sempre durata, ambra quando cala, rosso quando è metà di com'era.
 */
.tacche { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.tacca { width: 4px; border-radius: 1px; background: #334155; }
.tacca:nth-child(1) { height: 6px; }
.tacca:nth-child(2) { height: 8px; }
.tacca:nth-child(3) { height: 10px; }
.tacca:nth-child(4) { height: 12px; }
.tacca:nth-child(5) { height: 14px; }
.tacca.on { background: #22c55e; }
.tacche[data-salute="3"] .tacca.on { background: #f59e0b; }
.tacche[data-salute="2"] .tacca.on, .tacche[data-salute="1"] .tacca.on { background: #ef4444; }

/* Il riquadro che spiega la batteria: è nostro, non del sistema. */
.batteria-nota { display: flex; flex-direction: column; gap: 6px; }
.batteria-riga { display: flex; align-items: center; gap: 8px; }
.batteria-grafico { display: flex; align-items: flex-end; gap: 1px; height: 40px; margin-top: 4px; }
.batteria-colonna { width: 3px; border-radius: 1px 1px 0 0; background: #38bdf8; opacity: .75; }
.batteria-colonna.carica { background: #22c55e; }

/* ═════════════════════ ricerca e livelli ═════════════════════ */

/*
 * La barra di ricerca con il menu dentro, come su Google Maps.
 *
 * Lo stesso pezzo di vetro contiene le righe del menu, il campo e la lente:
 * è la disposizione che chiunque abbia usato una mappa riconosce senza
 * pensarci, e la familiarità vale più di qualunque idea originale.
 */
.cerca {
  display: flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 6px 4px 4px;
  width: min(420px, calc(100vw - 96px));
}
.cerca-menu, .cerca-vai {
  border: 0; background: transparent; color: var(--text);
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 15px;
}
.cerca-menu:hover, .cerca-vai:hover { background: #ffffff14; }
.cerca input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  color: var(--text); font: inherit; font-size: 14.5px; padding: 8px 0;
}
.cerca input::placeholder { color: var(--muted); }

.cerca-esiti {
  position: absolute; top: 56px; left: 0;
  width: min(420px, calc(100vw - 96px));
  border-radius: 14px; overflow: hidden; z-index: 600;
  max-height: 60vh; overflow-y: auto;
}
.cerca-esito {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.cerca-esito:hover { background: #ffffff10; }
.cerca-esito i { color: var(--muted); width: 18px; text-align: center; }
.cerca-esito small { display: block; color: var(--muted); font-size: 12px; }

/*
 * I livelli, in basso a sinistra: dove Google li mette da sempre.
 *
 * Il pulsante è piccolo e la scheda si apre solo quando serve, perché i
 * livelli si cambiano una volta ogni tanto e nel frattempo non devono rubare
 * spazio alla mappa.
 */
.livelli-apri {
  /* In alto a destra, sotto il mirino: in basso a sinistra finiva sopra
     l'ultima scheda, che è una persona vera che non si vedeva più. */
  position: fixed; right: 12px; top: 64px;
  z-index: 520; display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 12px; cursor: pointer;
  color: var(--text); font: inherit; font-size: 13px;
}
.livelli {
  position: fixed; right: 12px; top: 112px;
  z-index: 620; padding: 10px; border-radius: 14px; width: 250px;
}
.livelli-tipi { display: flex; gap: 8px; }
.livello {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 4px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; background: #ffffff0d; color: var(--text);
  font: inherit; font-size: 11.5px;
}
.livello.attivo { border-color: var(--accent); color: var(--accent); }
.livello i { font-size: 16px; }
.livelli-riga {
  display: flex; align-items: center; gap: 9px; padding: 9px 4px 2px;
  color: var(--text); font-size: 13.5px; cursor: pointer;
}

/* Con l'elenco delle persone aperto, i livelli si spostano sopra di esso. */

/* Le tacche nella scheda: piccole, accanto alla percentuale. */
.card-side .tacche { height: 11px; gap: 1.5px; }
.card-side .tacca { width: 3px; }
.card-side .tacca:nth-child(1) { height: 4px; }
.card-side .tacca:nth-child(2) { height: 6px; }
.card-side .tacca:nth-child(3) { height: 8px; }
.card-side .tacca:nth-child(4) { height: 9px; }
.card-side .tacca:nth-child(5) { height: 11px; }

/*
 * Il ruolo, detto con un'icona e un colore.
 *
 * Scritto per esteso mandava il nome a capo e raddoppiava l'altezza della riga:
 * con sette persone in famiglia, su un telefono, non ci stavano più nello
 * schermo. Il testo resta per chi usa un lettore di schermo, dentro l'etichetta.
 */
.ruolo { font-size: 12px; margin-left: 6px; vertical-align: baseline; }
.ruolo-admin { color: #fbbf24; }
.ruolo-famiglia { color: var(--accent); }

/*
 * I risultati della ricerca hanno l'aspetto del resto del pannello.
 *
 * Prendevano lo stile dei pulsanti chiari e sembravano incollati da un'altra
 * applicazione: fondo bianco su un'interfaccia scura, bordi diversi, spaziature
 * diverse. Adesso sono righe come tutte le altre.
 */
.cerca-esiti .cerca-esito { display: flex; align-items: center; gap: 4px; padding: 2px 6px; }
.cerca-esito-testo {
  flex: 1; display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 9px 8px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.cerca-esito-testo:hover { background: #ffffff10; }
.cerca-icona {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff14; color: var(--muted); font-size: 13px;
}
.cerca-nome { min-width: 0; }
.cerca-nome b { display: block; font-size: 14px; font-weight: 600; }
.cerca-nome small {
  display: block; color: var(--muted); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cerca-naviga {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: #ffffff12; color: var(--accent); cursor: pointer; font-size: 14px;
}
.cerca-naviga:hover { background: #ffffff20; }
.cerca-gruppo {
  padding: 10px 14px 4px; color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
}

/*
 * I telefoni di ciascuno, sotto il suo nome.
 *
 * Prima erano una riga di nomi separati da puntini: si leggeva quanti erano e
 * nient'altro. Un telefono ricollegato lascia dietro il vecchio collegamento,
 * che non manda più niente e sulla mappa non ha una scheda da aprire — quindi
 * restava lì per sempre. Ora ognuno è una riga con il suo cestino, e in fondo
 * il pulsante per aggiungerne uno: quello che si vede si può anche toccare.
 */
.telefoni {
  display: flex; flex-direction: column; gap: 4px;
  margin: -2px 0 10px 52px;
}
.telefono {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--radius);
  background: rgba(148, 163, 184, .10);
  font-size: 13px; color: var(--muted);
}
.telefono span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.telefono .icon-btn { flex: 0 0 auto; }
.btn.ghost.piccolo {
  align-self: flex-start; padding: 5px 10px; font-size: 13px;
  background: transparent; border: 1px dashed rgba(148, 163, 184, .45);
}

/*
 * Il risultato in evidenza, come lo fanno le mappe che si usano ogni giorno.
 *
 * Il tempo è il numero che si guarda: prima era una riga di titolo come tutte
 * le altre, in mezzo alle indicazioni. Adesso è la cosa più grande del
 * pannello, con la distanza accanto in piccolo, e sotto il pulsante per
 * partire. Le indicazioni passo passo restano, ma dopo: servono mentre si
 * guida, non mentre si sceglie.
 */
.riassunto-percorso {
  display: flex; align-items: baseline; gap: 10px;
  margin: 12px 0 8px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface-2);
}
.riassunto-percorso .tempo { font-size: 26px; font-weight: 700; line-height: 1; color: var(--accent); }
.riassunto-percorso .distanza { color: var(--muted); font-size: 13.5px; }
.riassunto-percorso .mezzo { margin-left: auto; color: var(--muted); font-size: 15px; }

/* Le scorciatoie dei luoghi stanno in fila, non una per riga. */
#route-noti { flex-direction: row; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
#route-noti .list-row { width: auto; padding: 7px 12px; border-radius: 999px; }
#route-noti .list-title { font-size: 13px; }