:root{
  --green:#035b4a; --aqua:#3beacd;           /* colori del marchio */
  --ink:#06352c; --ink-2:#4d6b64;            /* testo e testo secondario */
  --blue:#0063d3; --map:#eeece8; --white:#fff; --line:#e1e9e6; --soft:#eef4f2;
  --late-bg:#ffe9d6; --late-fg:#8a3a00;
  --ok-bg:#e1f3e6; --ok-fg:#1d5e33;
  --early-bg:#dff7f2; --early-fg:#035b4a;
  --font:'Atkinson Hyperlegible Next',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{height:100%;background:var(--green)} /* lo stesso verde dietro la barra del telefono */
body{
  height:100%; height:100dvh; margin:0;
  display:flex; flex-direction:column; overflow:hidden;
  font:15px/1.4 var(--font);
  color:var(--ink); background:var(--map);
}

/* Testata: a tutta larghezza, il colore continua sotto la barra di stato e dietro gli angoli arrotondati */
.topbar{
  position:relative; z-index:1000; flex:0 0 auto;
  margin-bottom:-20px; /* gli angoli arrotondati sporgono sulla mappa */
  padding:calc(14px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 18px calc(20px + env(safe-area-inset-left));
  background:var(--green); color:var(--white); border-radius:0 0 22px 22px;
  box-shadow:0 2px 12px rgba(3,53,44,.3);
}
/* logo | ADDOSTA | stato, e sotto la frase per tutta la larghezza */
.topbar-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:12px; align-items:center;
  max-width:960px; margin:0 auto;
}
.logo{grid-row:1 / span 2;width:50px;height:50px;display:block}
.brand{margin:0;font:400 27px/1.05 'Titan One',var(--font);letter-spacing:.8px}
.tagline{grid-column:2 / span 2;margin:3px 0 0;font-size:14px;font-weight:700;color:var(--aqua)}
.status{
  justify-self:end; display:flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px; background:var(--white); color:var(--green);
  font-size:13px; font-weight:700; white-space:nowrap;
}
.dot{width:8px;height:8px;border-radius:50%;background:#1f9d4c}
.dot.err{background:#c62828}
.notice{
  max-width:960px; margin:10px auto 0; padding:8px 12px; border-radius:10px;
  background:rgba(59,234,205,.18); color:var(--white); font-size:13px; font-weight:600;
}

/* La mappa occupa lo spazio che resta tra testata e scheda */
#map{position:relative;flex:1 1 auto;min-height:0;background:var(--map);font:inherit}

/* Marker dei bus */
.bus-marker{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-width:36px;height:28px;padding:0 8px;
  border-radius:8px; border:2px solid var(--white);
  font-weight:800; font-size:15px; white-space:nowrap;
  box-shadow:0 2px 6px rgba(3,53,44,.3);
  cursor:pointer; transition:transform .15s ease;
}
.bus-marker:hover{transform:scale(1.1)}
.bus-marker.stopped{opacity:.85}
.bus-marker.stale{filter:grayscale(1);opacity:.5}
.bus-marker .arrow{
  position:absolute; top:-8px; right:-8px;
  width:16px;height:16px;border-radius:50%;
  background:var(--green); color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:9px; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.bus-marker .arrow[hidden]{display:none}

/* Scheda che sale dal basso: è nel flusso della pagina, quindi la mappa si accorcia */
.sheet{
  position:relative; z-index:1000; flex:0 0 auto;
  display:grid; grid-template-rows:0fr;
  margin-top:0; border-radius:22px 22px 0 0;
  background:var(--white); box-shadow:0 -4px 16px rgba(3,53,44,.18);
  transition:grid-template-rows .3s ease, margin-top .3s ease;
}
.sheet.open{grid-template-rows:1fr; margin-top:-22px}
.sheet-inner{overflow:hidden;min-height:0}
.sheet-handle{width:40px;height:5px;border-radius:3px;background:#c5d3cf;margin:10px auto 0}
.sheet-body{
  max-width:560px; margin:0 auto;
  padding:12px calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
  display:flex; flex-direction:column; gap:14px;
}
.card-head{display:flex;gap:12px;align-items:center}
.line-badge{
  min-width:44px;height:36px;padding:0 8px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(3,53,44,.15);
}
.card-title{flex-grow:1;min-width:0}
.card-title h2{margin:0;font-size:19px;font-weight:800;line-height:1.15}
.card-title p{margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.card-close{
  width:44px;height:44px;margin:-6px -10px 0 0;flex-shrink:0;align-self:flex-start;
  border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.card-close:hover{background:var(--soft)}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tile{padding:12px;border-radius:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile span{font-size:12px;font-weight:600}
.tile strong{font-size:17px;font-weight:800;overflow-wrap:anywhere}
.tile-next{background:var(--green);color:var(--white)}
.tile-next span{color:var(--aqua)}
.tile-late{background:var(--late-bg);color:var(--late-fg)}
.tile-ontime{background:var(--ok-bg);color:var(--ok-fg)}
.tile-early{background:var(--early-bg);color:var(--early-fg)}
.tile-plain{background:var(--soft);color:var(--ink)}

/* Fermate: precedente, prossima, successive */
.stepper{display:grid;margin:0;padding:0;list-style:none}
.stepper li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.stepper li::before{
  content:''; position:absolute; top:6px; right:50%; width:100%; height:3px; background:var(--green);
}
.stepper li:first-child::before{display:none}
.stepper li.passed::before, .stepper li.next::before{background:#b8c9c4}
.stepper .dot{
  position:relative; z-index:1; width:14px;height:14px;border-radius:50%;
  background:var(--green); border:3px solid var(--green);
}
.stepper li.passed .dot{background:#b8c9c4;border-color:#b8c9c4}
.stepper li.next .dot{background:var(--aqua);border:4px solid var(--green);width:16px;height:16px;margin-top:-1px}
.stepper .name{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 2px}
.stepper li.next .name{font-weight:800;color:var(--ink)}

.card-foot{margin:0;font-size:13px;color:var(--ink-2)}
.card-warn{margin:0;padding:8px 12px;border-radius:10px;background:var(--late-bg);color:var(--late-fg);font-size:13px;font-weight:600}

/* Controlli Leaflet */
.leaflet-top{top:20px} /* sotto gli angoli della testata */
.leaflet-bottom{bottom:0}
.leaflet-touch .leaflet-bar, .leaflet-bar{border:0;border-radius:24px;box-shadow:0 2px 8px rgba(3,53,44,.25);overflow:hidden}
.leaflet-bar a, .leaflet-touch .leaflet-bar a{
  width:48px;height:48px;line-height:48px;
  background:var(--white);color:var(--ink);border-bottom:1px solid var(--line);
  font-size:22px;
}
.leaflet-bar a:last-child{border-bottom:0}
.leaflet-control-locate{display:flex !important;align-items:center;justify-content:center;cursor:pointer}
.leaflet-control-locate.on{color:#00876f}
.leaflet-control-attribution{background:rgba(255,255,255,.85) !important;color:var(--ink-2) !important;font:11px/1.4 var(--font)}
.leaflet-control-attribution a{color:var(--ink) !important}
.leaflet-tooltip{font:600 13px/1.3 var(--font);color:var(--ink);border-radius:8px}
#map:has(+ .sheet.open) .leaflet-bottom{bottom:22px} /* sopra gli angoli della scheda */

/* Su touch lo zoom si fa con le dita */
@media (pointer:coarse){
  .leaflet-control-zoom{display:none}
}
@media (max-width:420px){
  .logo{width:44px;height:44px}
  .brand{font-size:24px}
  .tagline{font-size:12px}
  .status{padding:5px 10px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .sheet{transition:none}
}