/* ===== Variabili: tema scuro di default ===== */
:root {
  --bg: #121212;
  --card: #1E1E1E;
  --card2: #2C2C2C;
  --text: #F4F4F4;
  --muted: #9B9B9B;
  --rt: #34D17A;                    /* verde = tempo reale */
  --rt-bg: rgba(52, 209, 122, .14);
  --err: #FF7A6B;
  --r: 16px;
  color-scheme: dark;
}

/* ===== Base (mobile-first) ===== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--bg); color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "SF Pro Text", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* margini sicuri per notch e barra home di iPhone */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.app { max-width: 560px; margin: 0 auto; padding: 12px 16px 40px; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer;
         transition: transform .12s, opacity .12s, background .2s; }
button:active { transform: scale(.94); opacity: .8; }          /* feedback al tap */
button:focus-visible, input:focus-visible { outline: 2px solid var(--rt); outline-offset: 2px; }

/* ===== Intestazione e pulsanti tondi ===== */
.top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
h1 { margin: 0; font-size: 28px; letter-spacing: -.02em; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; font-size: 24px; background: var(--card); }
.icon-btn.on { color: #FFC93C; }                                /* stella attiva */
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Ricerca ===== */
.search { display: flex; gap: 8px; }
.field { position: relative; flex: 1; }
.field input {
  width: 100%; height: 56px; padding: 0 48px 0 16px;
  border: 2px solid transparent; border-radius: var(--r);
  background: var(--card); color: var(--text);
  font-size: 22px; font-weight: 600;                            /* >=16px: iOS non zooma */
}
.field input::placeholder { color: var(--muted); font-weight: 400; }
.clear { position: absolute; right: 6px; top: 8px; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); }
.primary { height: 56px; padding: 0 22px; border-radius: var(--r); background: var(--rt); color: #0B1F14; font-weight: 700; }

/* ===== Chip fermate salvate (scroll orizzontale) ===== */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: flex; flex: none; align-items: center; background: var(--card); border-radius: 999px; border: 1px solid transparent; }
.chip.active { border-color: var(--rt); }
.chip-go { padding: 10px 6px 10px 16px; white-space: nowrap; }
.chip-x { padding: 10px 14px 10px 6px; color: var(--muted); }

/* ===== Barra di avanzamento 30s ===== */
.progress { height: 3px; margin: 14px 0; background: var(--card); border-radius: 3px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--rt); }
@keyframes fill { to { width: 100%; } }

/* ===== Header fermata ===== */
.card { background: var(--card); border-radius: var(--r); padding: 14px 16px; }
.stop-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stop-head h2 { margin: 0; font-size: 22px; }
.stop-head p { margin: 2px 0 0; color: var(--muted); }

/* ===== Lista passaggi ===== */
.list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px;
       background: var(--card); border-radius: var(--r); padding: 12px; }
.line { text-align: center; padding: 10px 0; border-radius: 12px; background: var(--card2);
        font-size: 22px; font-weight: 800; }
.dest b { display: block; font-size: 17px; font-weight: 600; }
.dest small { color: var(--muted); }
.time { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
        font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.time.rt { color: var(--rt); background: var(--rt-bg); }        /* tempo reale */
.time.sched { color: var(--muted); background: var(--card2); }  /* programmato */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rt); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }

.note { color: var(--muted); font-size: 14px; text-align: center; margin: 10px 0; }
.note.error { color: var(--err); }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition: none !important; } }