/* ZakoGo — itinerario.css
   Owner: M-IT (js/itinerario.js). Module-only extras.
   Tokens, shell and every shared component live in styles.css (F1) — do not
   redefine them here.

   What is genuinely module-specific:
     1. la barra dei giorni del viaggio resa persistente (sticky) durante lo scorrimento
     2. l'intestazione del giorno
     3. la card "Prossima attività" su legno
     4. la timeline (binario verticale + pallini) e la card attività
     5. gli stati del trascinamento per riordinare
     6. due dettagli della sheet aggiungi/modifica
     7. il meteo: il chip nell'intestazione e la sheet dei giorni del viaggio
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Barra dei giorni — resta appesa sotto la topbar
   --------------------------------------------------------------------------
   #views ha 14px di padding superiore: con top:-14px la barra si aggancia a
   filo del bordo dell'area di scorrimento invece che 14px più in basso.
   -------------------------------------------------------------------------- */

.it-days {
  position: sticky;
  top: -14px;
  z-index: 6;
  padding-top: 16px;
  padding-bottom: 8px;
  background: var(--snow);
}

/* --------------------------------------------------------------------------
   2. Intestazione del giorno
   -------------------------------------------------------------------------- */

.it-dayhead {
  margin: 12px 2px 14px;
}
.it-daytitle {
  font-size: 21px;
  line-height: 1.15;
  color: var(--pine-900);
}
.it-daymeta {
  margin-top: 3px;
}
/* il chip meteo (aimeteo.js) arriva subito dopo i dati del giorno: gli serve
   solo un po' d'aria, resta dov'era e sopra la striscia dei pasti */
.it-dayhead > .chip { margin-top: 9px; }

/* --------------------------------------------------------------------------
   2bis. Striscia dei pasti (Colazione / Pranzo / Cena)
   --------------------------------------------------------------------------
   Una riga sola e quieta: non va mai a capo, sugli schermi stretti scorre.
   Il padding verticale lascia posto all'anello di fuoco (offset 2px).
   -------------------------------------------------------------------------- */

.it-pasti {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 5px 3px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.it-pasti::-webkit-scrollbar { display: none; }

.it-pasto { flex: 0 0 auto; }
.it-pasto .icn { color: var(--sunset-ink); }

/* --------------------------------------------------------------------------
   3. Hero "Prossima attività" (superficie legno)
   -------------------------------------------------------------------------- */

.it-hero {
  padding: 15px 16px 16px;
  margin-bottom: 18px;
}
.it-hero-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.2;
  color: var(--wood-ink);
}
.it-hero-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.it-hero-main {
  flex: 1 1 auto;
  min-width: 0;
}
.it-hero-open { margin-top: 0; }
/* sopra l'area cliccabile del titolo: spunta e chip restano raggiungibili */
.it-hero .zcheck,
.it-hero .act-chips { position: relative; z-index: 2; }
.it-hero-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  color: var(--pine-900);
  overflow-wrap: anywhere;
}
.it-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  margin-top: 4px;
  min-width: 0;
}
.it-hero-meta:empty { display: none; }
.it-hero-time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
  color: var(--pine-700);
}
.it-hero-place {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--wood-ink);
}
.it-hero-place > span { min-width: 0; overflow-wrap: anywhere; }
.it-hero-place .icn { color: var(--wood-ink); }

/* le chip quiete su legno hanno bisogno di un fondo pieno per staccare */
.it-hero .chip-quiet {
  background: var(--card);
  border-color: var(--wood-500);
  color: var(--pine-900);
}
.it-hero .zcheck { border-color: var(--wood-500); }

/* --------------------------------------------------------------------------
   4. Timeline: binario verticale + pallini di categoria
   -------------------------------------------------------------------------- */

.tl {
  position: relative;
  padding-left: 26px;
}
.tl::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  /* estremità completamente arrotondate: su 2px il pill si blocca a 1px, identico */
  border-radius: var(--radius-pill);
  background: var(--pine-100);
}

/* con una sola attività il binario sarebbe un trattino senza senso */
.tl:has(.tl-item:only-child)::before { display: none; }

.tl-item { position: relative; }
.tl-item + .tl-item { margin-top: 10px; }

.tl-item::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 21px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--card);
  border: 2.5px solid var(--c, var(--pine-500));
}
.tl-item.is-done::before {
  background: var(--sun);
  border-color: var(--sun-700);
}

/* --- card attività ------------------------------------------------------- */

.act-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px 13px 2px;
}
.act-card > .grip {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-top: 1px;
}
/* la spunta resta all'altezza dell'orario anche quando la card è alta */
.act-card > .zcheck {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin: 1px 0 0 2px;
}

.act-body {
  flex: 1 1 auto;
  min-width: 0;
}

.act-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 9px;
}
.act-time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
  color: var(--pine-700);
}
.act-time.is-empty { color: var(--ink-faint); letter-spacing: .2px; }

/* Il titolo è il bersaglio "apri": resta statico, così la sua area cliccabile
   (::after) si ancora alla card e la copre tutta, mentre grip, chip e spunta
   restano sopra (z-index 2). Un solo tab-stop per aprire l'attività. */
.act-open {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 0;
  text-align: left;
  background: none;
  border-radius: var(--radius-sm);
}
.act-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.act-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17.5px;
  line-height: 1.25;
  color: var(--pine-900);
  overflow-wrap: anywhere;
}

.act-place {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.act-place > span { min-width: 0; overflow-wrap: anywhere; }
.act-place .icn { color: var(--c, var(--pine-500)); }

.act-note {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.act-chips {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 9px;
}
.act-bell { cursor: default; }

/* --- stato fatto: la card si comprime --------------------------------- */

.act-card.is-done {
  padding-top: 9px;
  padding-bottom: 9px;
  background: var(--snow);
  box-shadow: 0 1px 4px rgba(18, 63, 46, .07);
}
.act-card.is-done .act-title {
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--pine-500);
  text-decoration-thickness: 2px;
}
.act-card.is-done .act-time { color: var(--ink-faint); }
.act-card.is-done .badge { opacity: .8; }

/* --------------------------------------------------------------------------
   5. Trascinamento per riordinare
   -------------------------------------------------------------------------- */

/* segnaposto: nessuno spostamento di layout, solo il vuoto tratteggiato */
.tl-item.is-drag-src {
  border-radius: var(--radius-lg);
  background: var(--pine-050);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.tl-item.is-drag-src .act-card { visibility: hidden; }
.tl-item.is-drag-src::before { opacity: .35; }

/* il clone che segue il dito (posizione e transform arrivano da JS) */
.tl-item.drag-ghost { list-style: none; }
.tl-item.drag-ghost::before { display: none; }
.tl-item.drag-ghost .act-card { background: var(--card); }

/* --------------------------------------------------------------------------
   5bis. Scheda attività (sola lettura)
   --------------------------------------------------------------------------
   Si legge dall'alto: orario grande, categoria, luogo, nota per intero.
   Nessun campo: la modifica sta nel piede della sheet.
   -------------------------------------------------------------------------- */

.itv-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.itv-time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  color: var(--pine-700);
}
.itv-time.is-empty {
  font-size: 15.5px;
  letter-spacing: 0;
  color: var(--ink-faint);
}

.itv-place {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
}
.itv-place-name {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 150px;
  min-width: 0;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--pine-900);
}
.itv-place-name > span { min-width: 0; overflow-wrap: anywhere; }
.itv-place-name .icn { flex: 0 0 auto; color: var(--c, var(--pine-500)); }

/* la nota si legge com'è stata scritta: a capo e spaziature restano */
.itv-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--snow);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--pine-900);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.itv-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.itv-line .icn { flex: 0 0 auto; color: var(--pine-500); }
.itv-done { color: var(--sun-ink); }
.itv-done .icn { color: var(--sun-ink); }

/* --------------------------------------------------------------------------
   6. Sheet aggiungi / modifica attività
   -------------------------------------------------------------------------- */

.it-time-field input[type="time"] { max-width: 190px; }

.it-form .req { color: var(--berry-ink); }

/* Posizione facoltativa: pannello richiudibile, aperto se le coordinate ci
   sono già. Stessa grammatica delle altre superfici della sheet. Il pannello
   "A piedi" (.walk-form, §9) è lo stesso pannello: le regole sono condivise. */
.it-pos,
.walk-form {
  margin-top: 15px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--card);
}
.it-pos > summary,
.walk-form > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
}
.it-pos > summary::-webkit-details-marker,
.walk-form > summary::-webkit-details-marker { display: none; }
.it-pos > summary::marker,
.walk-form > summary::marker { content: ""; }
.it-pos > summary:focus-visible,
.walk-form > summary:focus-visible { outline: 3px solid var(--focus-color); outline-offset: -2px; }
.it-pos > summary:active,
.walk-form > summary:active { background: var(--pine-050); }
.it-pos[open] > summary,
.walk-form[open] > summary {
  border-bottom: 1.5px solid var(--line);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.it-pos-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pine-900);
}
.it-pos > summary > .icn:first-child,
.walk-form > summary > .icn:first-child { color: var(--pine-700); flex: 0 0 auto; }
.it-pos > summary > .icn:last-child,
.walk-form > summary > .icn:last-child {
  color: var(--ink-faint);
  flex: 0 0 auto;
  transition: transform 160ms var(--ease-out);
}
.it-pos[open] > summary > .icn:last-child,
.walk-form[open] > summary > .icn:last-child { transform: rotate(180deg); color: var(--pine-700); }

/* il pannello si comporta come un campo: stesso stacco da quello che segue */
.it-pos + .field, .it-pos + .check-row,
.walk-form + .field, .walk-form + .check-row { margin-top: 15px; }

.it-pos-body { padding: 13px 12px 14px; }

.it-pos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* nella griglia i due campi stanno affiancati: niente stacco verticale */
.it-pos-grid .field + .field { margin-top: 0; }
.it-pos-grid input { font-size: 17px; letter-spacing: .2px; }

.it-fatto { margin-top: 15px; }

.it-delete {
  width: 100%;
  margin-top: 18px;
  color: var(--berry-ink);
}
.it-delete .icn { color: currentColor; }
.it-delete:active { background: var(--berry-tint); }

@media (hover: hover) and (pointer: fine) {
  .it-delete:hover { background: var(--berry-tint); }
  .it-pasto:hover { background: var(--sunset-tint); border-color: var(--sunset); color: var(--pine-900); }
  .it-hero .chip-quiet:hover { background: var(--wood-100); border-color: var(--wood-500); }
  .it-pos > summary:hover,
  .walk-form > summary:hover { background: var(--pine-050); }
}

@media (prefers-reduced-motion: reduce) {
  .it-pos > summary > .icn:last-child,
  .walk-form > summary > .icn:last-child { transition: none; }
}

/* --------------------------------------------------------------------------
   7. Meteo — il chip del giorno e la sheet "Meteo del viaggio" (SPEC §16.3)
   --------------------------------------------------------------------------
   Il markup è di meteo.js, il colore non è di nessuno dei due: ogni superficie
   porta data-accento e legge --c / --c-ink / --c-tint / --c-graf (styles.css
   §2). Qui dentro non si nomina MAI un accento, esattamente come fanno le
   categorie. Due regole guidano tutto:
     - su tinta si scrive e si disegna con --c-ink (Ink-on-Tint, ≥4.5:1);
     - su bianco l'icona passa a --c-graf, perché il giallo del sole su bianco
       non arriverebbe nemmeno a 2:1.
   L'accento resta un accento: fondo e struttura restano neve, bianco e pino.
   -------------------------------------------------------------------------- */

/* --- il chip nell'intestazione del giorno --------------------------------- */

/* Compatto e quieto: icona, "26° / 12°", e la goccia solo quando pioverà.
   Vive sul fondo neve, dove una tinta al 14% da sola sparirebbe: il filo
   dell'accento è quello che lo tiene su. */
.meteo-chip {
  gap: 7px;
  padding: 5px 11px 5px 9px;
  background: var(--c-tint, var(--pine-100));
  border-color: var(--c, var(--pine-500));
  color: var(--c-ink, var(--pine-900));
}
.meteo-chip-icn { display: flex; }
.meteo-chip-icn .icn { color: var(--c-ink, var(--pine-700)); }

.meteo-chip-temp {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}

/* la probabilità di pioggia da ≥50% in su: pastiglia bianca, numero in
   inchiostro di famiglia, e una goccia vera (un cerchio con un angolo solo) */
.meteo-chip-goccia {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 1px;
  padding: 2px 8px 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--c-ink, var(--pine-900));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.meteo-chip-goccia::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--c-graf, var(--pine-500));
}

/* --- la sheet: la striscia dei giorni del viaggio ------------------------- */

.meteo-sheet { padding-top: 2px; }

/* .scroll-x esce dal gutter della vista: dentro la sheet il bordo giusto è
   quello del corpo (20px). Scorre qui dentro, mai la pagina. */
.meteo-striscia {
  gap: 8px;
  margin-inline: -20px;
  padding: 3px 20px 12px;
}

.meteo-giorno {
  flex: 0 0 auto;
  scroll-snap-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  /* 74px non è un numero tondo: è quanto serve perché "26° / 12°" stia dentro
     con aria ai lati alla misura tiny, senza rimpicciolire i gradi */
  min-width: 74px;
  min-height: 98px;
  padding: 8px 7px 9px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-soft);
  transition:
    background-color 150ms var(--ease-out), border-color 150ms ease,
    color 150ms ease, transform 90ms ease;
}
.meteo-giorno-dow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.meteo-giorno-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--pine-900);
}
.meteo-giorno-icn {
  display: flex;
  margin: 3px 0 2px;
}
.meteo-giorno-icn .icn {
  width: 22px;
  height: 22px;
  stroke-width: 2.05;
  color: var(--c-graf, var(--ink-faint));
}
.meteo-giorno-temp {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0; /* qui ogni decimo di pixel serve al testo, non all'aria */
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* selezione: pieno pino, come i chip dei giorni dell'itinerario. L'icona passa
   a neve invece che al sole — su un fondo scuro il meteo deve restare
   riconoscibile, non diventare tutto giallo. */
.meteo-giorno.is-active {
  background: var(--pine-700);
  border-color: var(--pine-700);
  color: #DCEDE3;
  box-shadow: 0 2px 8px rgba(18,63,46,.22);
}
.meteo-giorno.is-active .meteo-giorno-num,
.meteo-giorno.is-active .meteo-giorno-icn .icn { color: var(--snow); }
.meteo-giorno.is-active .meteo-giorno-temp { color: #DCEDE3; }

/* i giorni passati si tolgono di mezzo senza diventare illeggibili: fondo neve
   e inchiostro tenue (4.62:1), mai opacity — che spegnerebbe il contrasto */
.meteo-giorno.is-passato:not(.is-active) {
  background: var(--snow);
  border-color: var(--line);
  color: var(--ink-faint);
}
.meteo-giorno.is-passato:not(.is-active) .meteo-giorno-num { color: var(--ink-soft); }
.meteo-giorno.is-passato:not(.is-active) .meteo-giorno-temp,
.meteo-giorno.is-passato:not(.is-active) .meteo-giorno-icn .icn { color: var(--ink-faint); }

/* --- il giorno in grande -------------------------------------------------- */

.meteo-dettaglio-giorno {
  margin-bottom: 12px;
  font-size: 19px;
  color: var(--pine-900);
}

/* icona (il pezzo forte), etichetta sopra, massima e minima sotto */
.meteo-dettaglio-top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 15px;
  margin-bottom: 16px;
}
.meteo-dettaglio-icn {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 25px;
  background: var(--c-tint, var(--pine-100));
  color: var(--c-ink, var(--pine-700));
}
.meteo-dettaglio-icn .icn {
  width: 54px;
  height: 54px;
  stroke-width: 1.6;
}
.meteo-dettaglio-label {
  align-self: end;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink-soft);
}
/* lo spazio prima della barra sta nel markup, ma è a inizio di uno span e il
   browser lo mangia: la distanza fra massima e minima la tiene il gap */
.meteo-dettaglio-temp {
  align-self: start;
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 2px;
}
.meteo-tmax {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  color: var(--pine-900);
}
.meteo-tmin {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}

/* le quattro righe di dati: dentro una sheet bianca la lista non è una card,
   è un riquadro quieto sul fondo neve */
.meteo-dati {
  background: var(--snow);
  box-shadow: none;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
}
.meteo-dati > :first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.meteo-dati > :last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.meteo-riga {
  min-height: 46px;
  padding: 9px 13px;
}
/* non è una riga che si tocca: non deve nemmeno accendersi sotto il dito */
.meteo-riga:active { background: transparent; }
.meteo-riga .row-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.meteo-riga-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  color: var(--pine-900);
}

/* --- la fascia oraria ----------------------------------------------------- */

/* Sotto la pioggia di montagna la domanda è una sola: "a che ora smette?".
   Curva della temperatura sopra, barrette della probabilità sotto, e le ore
   allineate alle une e alle altre. Fino a 300px di larghezza sta tutta dentro;
   sotto, scorre nel suo contenitore — mai la pagina. */
.meteo-ore {
  display: block;
  margin: 18px 0 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.meteo-ore-svg {
  display: block;
  width: 100%;
  min-width: 300px;
  height: auto;
}
.meteo-ore-velo { fill: var(--c-tint, var(--pine-050)); stroke: none; }
.meteo-ore-linea { stroke: var(--pine-700); stroke-width: 2.4; fill: none; }
.meteo-ore-dot { fill: var(--pine-700); stroke: none; }
.meteo-ore-base { stroke: var(--line-strong); stroke-width: 1.5; }

/* le barrette sono acqua: azzurre sempre, piene quando la probabilità supera
   la metà — la soglia oltre la quale conviene mettere in zaino la giacca */
.meteo-ora-prob { fill: var(--sky); fill-opacity: .3; stroke: none; }
.meteo-ora-prob.is-alta { fill-opacity: .85; }

.meteo-ore-testi { font-family: var(--font-ui); }
.meteo-ora-h { fill: var(--ink-faint); font-size: 12px; font-weight: 600; }
.meteo-ora-t {
  fill: var(--pine-900);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
}
.meteo-ora-pct {
  fill: var(--sky-ink);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
}

/* --- niente dati, e il piede della sheet ---------------------------------- */

/* Lo stato vuoto è una frase onesta, non un buco: il riquadro tratteggiato è
   lo stesso invito degli altri vuoti dell'app. */
.meteo-vuoto {
  display: grid;
  place-items: center;
  min-height: 128px;
  margin-top: 4px;
  padding: 24px 18px;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--line-strong);
  background: var(--snow);
  text-align: center;
}
.meteo-vuoto p {
  max-width: 30ch;
  font-size: 16px;
  line-height: 1.5;
}

.meteo-fonte {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: center;
}
/* l'esito di "Aggiorna" quando non arriva niente: una riga quieta, colore di
   avviso e non di errore — la rete che manca in montagna è la normalità */
.meteo-esito {
  margin-top: 8px;
  text-align: center;
  color: var(--wood-ink);
}
/* mentre aggiorna il bottone resta vivo: .48 lo farebbe sembrare rotto */
.meteo-aggiorna:disabled { opacity: .72; }

@media (hover: hover) and (pointer: fine) {
  .meteo-giorno:hover:not(.is-active) {
    background: var(--pine-050);
    border-color: var(--pine-500);
  }
}

/* --------------------------------------------------------------------------
   9. A piedi — il vincolo dei 20 minuti reso visibile (SPEC §17.2)
   --------------------------------------------------------------------------
   Tre stati scritti dal JS come classi, mai come colori:
     .is-ok     meadow — il tratto più lungo sta nel limite del gruppo;
     .is-oltre  berry  — lo supera, e il testo lo dice in chiaro;
     .is-ignoto quieto (chip) / legno (verdetto) — non si sa ancora.
   Ink-on-Tint: su tinta si scrive con l'inchiostro della famiglia
   (meadow-ink 5.25:1 su meadow-tint, berry-ink 6.21:1 su berry-tint,
   wood-ink 7.15:1 su wood-tint). L'accento puro resta sul bordo.
   -------------------------------------------------------------------------- */

/* --- il chip nella card e nella prossima attività ------------------------- */

/* Un bottone (apre la scheda sulla camminata): 44px dal ::before di
   button.chip. Sui telefoni "A piedi 25′, oltre 20′ senza sosta" non sta su
   una riga: il chip va a capo fra le due parti invece di uscire dalla card.
   radius-lg e non pill: su una riga (34px) il browser lo riduce a 17px ed è
   una pillola; su due righe resta un riquadro morbido, senza strozzare il testo. */
.walk-chip {
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 0;
  max-width: 100%;
  border-radius: var(--radius-lg);
  white-space: normal;
  text-align: left;
}
.walk-chip .icn { flex: 0 0 auto; color: currentColor; }
.walk-chip-main { white-space: nowrap; }
.walk-chip-extra { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }

/* i minuti parlano con la voce dei numeri (Baloo Numbers Rule) */
.walk-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}

.walk-chip.is-ok {
  background: var(--meadow-tint);
  border-color: var(--meadow);
  color: var(--meadow-ink);
}
.walk-chip.is-oltre {
  background: var(--berry-tint);
  border-color: var(--berry);
  color: var(--berry-ink);
}
/* .is-ignoto porta anche .chip-quiet: neve, filo e inchiostro tenue — e sul
   legno della prossima attività prende il fondo bianco di .it-hero .chip-quiet */

/* --- il blocco nella scheda in sola lettura ------------------------------- */

/* Riquadro neve come la nota (niente card nella card): titolo e totale in
   testa, il tratto più lungo in grande, il verdetto, poi i dettagli. */
.walk-view {
  margin-top: 14px;
  padding: 13px 14px 14px;
  border-radius: var(--radius-md);
  background: var(--snow);
}
.walk-view:focus { outline: none; }
.walk-view:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; }

.walk-view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}
.walk-view-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17.5px;
  line-height: 1.25;
  color: var(--pine-900);
}
.walk-view-title .icn { flex: 0 0 auto; color: var(--pine-500); }
.walk-view-tot {
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.walk-view-tot .walk-num { font-size: 17px; color: var(--pine-900); }

.walk-view-tratto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 9px;
  margin-top: 8px;
}
.walk-view-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
  color: var(--pine-900);
}
.walk-view.is-oltre .walk-view-big { color: var(--berry-ink); }
.walk-view-big-lbl {
  flex: 1 1 150px;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}

.walk-view-verdetto {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.walk-view-verdetto .icn { flex: 0 0 auto; margin-top: .5px; color: currentColor; }
.walk-view.is-ok .walk-view-verdetto { background: var(--meadow-tint); color: var(--meadow-ink); }
.walk-view.is-oltre .walk-view-verdetto { background: var(--berry-tint); color: var(--berry-ink); }
.walk-view.is-ignoto .walk-view-verdetto { background: var(--wood-tint); color: var(--wood-ink); }

.walk-view-dati {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
}
.walk-view-riga {
  display: grid;
  grid-template-columns: 7.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
}
.walk-view-riga dt {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-soft);
}
.walk-view-riga dd {
  margin: 0;
  min-width: 0;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--pine-900);
  overflow-wrap: anywhere;
}
/* "Non indicato": si vede che manca, senza gridare (ink-faint 4.62:1 su neve) */
.walk-view-riga.is-manca dd { color: var(--ink-faint); }

/* --- il pannello nel form di modifica ------------------------------------- */

/* i minuti si scrivono con la voce dei numeri, come le coordinate */
.walk-form input[inputmode="numeric"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}
/* dentro la griglia a due colonne l'unità "min" non ha bisogno di 56px */
.walk-form .input-group > input { padding-right: 46px; }
.walk-form .input-group > .unit { right: 12px; font-size: 15px; }

.walk-form .it-pos-grid + .help { margin-top: 8px; }
.walk-form-pend,
.walk-form-avviso-box + .field { margin-top: 15px; }

/* Avviso, non errore: oltre il limite si può salvare. Stesso linguaggio del
   verdetto della scheda — tinta berry, inchiostro berry, triangolo. */
.walk-form-avviso {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: var(--berry-tint);
  color: var(--berry-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}
.walk-form-avviso .icn { flex: 0 0 auto; color: currentColor; }

@media (hover: hover) and (pointer: fine) {
  .walk-chip.is-ok:hover { border-color: var(--meadow-ink); }
  .walk-chip.is-oltre:hover { border-color: var(--berry-ink); }
}

/* --------------------------------------------------------------------------
   8. Schermi stretti
   -------------------------------------------------------------------------- */

@media (max-width: 359.98px) {
  .it-daytitle { font-size: 20px; }
  .it-hero-title { font-size: 21px; }
  .tl { padding-left: 22px; }
  .tl-item::before { left: -21px; }
  .act-card { gap: 6px; }
  .it-pos-grid { gap: 8px; }
  .it-pos-grid input { font-size: 16px; padding-left: 11px; padding-right: 11px; }

  .meteo-giorno { min-width: 68px; padding-inline: 5px; }
  .meteo-dettaglio-icn { width: 68px; height: 68px; border-radius: 22px; }
  .meteo-dettaglio-icn .icn { width: 46px; height: 46px; }
  .meteo-tmax { font-size: 30px; }
  .meteo-dettaglio-top { column-gap: 12px; }
}