/* =============================================================================
   Baltic Itinerary WebApp — app.css
   Token di colore, layout responsive, focus-visible e media queries.

   Requisiti coperti:
   - 3.1  Layout a colonna singola al breakpoint mobile (<=620px)
   - 3.2  Bersagli di tocco >= 44x44px CSS (tolleranza -2px)
   - 3.4  Nessuno scorrimento orizzontale del contenuto principale
   - 3.5  Scorrimento orizzontale confinato alla sola tabella oraria
   - 10.1 Testo normale contrasto >= 4.5:1
   - 10.2 Testo grande contrasto >= 3:1
   - 10.3 Bordi/indicatori di stato degli elementi interattivi >= 3:1
   - 10.4 Dimensioni testo in unita' relative (rem/em)
   - 10.6 Indicatore di focus visibile con contrasto >= 3:1
   - 10.10 Bersagli di tocco e assenza scroll orizzontale (rinvia a Req 3)
   - 10.11 Zoom testo fino al 200% senza perdita/senza scroll orizzontale
   - 10.12 prefers-reduced-motion: riduzione animazioni/transizioni
   - 10.13 prefers-color-scheme: palette chiara preservando i contrasti

   ---------------------------------------------------------------------------
   TABELLA DEI TOKEN — coppie primo-piano / sfondo e rapporto di contrasto.
   Ogni coppia e' documentata in forma machine-readable per il property test
   (Property 14, task 10.2). Formato:
     @contrast fg=<token> bg=<token> ratio=<valore> category=<normal|large|ui>
   Categorie e soglie WCAG_AA:
     normal  testo normale        >= 4.5:1
     large   testo grande / titoli >= 3:1
     ui      bordi/indicatori/focus >= 3:1

   --- TEMA SCURO (predefinito) ---
   @contrast fg=--text          bg=--bg         ratio=15.4 category=normal
   @contrast fg=--text          bg=--surface    ratio=13.9 category=normal
   @contrast fg=--text          bg=--surface-2  ratio=12.3 category=normal
   @contrast fg=--text-muted    bg=--bg         ratio=7.1  category=normal
   @contrast fg=--text-muted    bg=--surface    ratio=6.4  category=normal
   @contrast fg=--text-muted    bg=--surface-2  ratio=5.6  category=normal
   @contrast fg=--link          bg=--surface    ratio=6.6  category=normal
   @contrast fg=--link          bg=--surface-2  ratio=5.9  category=normal
   @contrast fg=--accent        bg=--surface    ratio=8.5  category=large
   @contrast fg=--warn          bg=--surface    ratio=9.2  category=normal
   @contrast fg=--bad           bg=--surface    ratio=5.9  category=normal
   @contrast fg=--on-accent     bg=--accent     ratio=9.0  category=normal
   @contrast fg=--on-accent2    bg=--link       ratio=7.7  category=normal
   @contrast fg=--border-interactive bg=--surface   ratio=3.8 category=ui
   @contrast fg=--border-interactive bg=--surface-2 ratio=4.3 category=ui
   @contrast fg=--border-interactive bg=--chip      ratio=3.9 category=ui
   @contrast fg=--focus-ring    bg=--bg         ratio=9.6  category=ui
   @contrast fg=--focus-ring    bg=--surface    ratio=8.7  category=ui
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. TOKEN DI COLORE — TEMA SCURO (predefinito)
   ----------------------------------------------------------------------------- */
:root {
  /* Superfici */
  --bg:          #0f1720;
  --bg-gradient: linear-gradient(160deg, #0b1219, #0f1720 40%);
  --surface:     #16212e;  /* pannelli / card */
  --surface-2:   #1d2b3a;  /* card interne / box */
  --chip:        #233242;  /* sfondo controlli chip/seg/stepper */

  /* Primo piano (testo) */
  --text:        #e8eef4;  /* testo principale */
  --text-muted:  #93a4b5;  /* testo secondario (>= 4.5:1 su tutte le superfici) */
  --link:        #5aa9ff;  /* collegamenti / accento secondario */

  /* Accenti e stato */
  --accent:      #4fd1a5;  /* verde: selezione, totali */
  --warn:        #ffb454;  /* ambra: avvisi / arrivo notturno / budget */
  --bad:         #ff6b6b;  /* rosso: superamento / errore */

  /* Testo su fondi accentati (dark-on-color) */
  --on-accent:   #062018;
  --on-accent2:  #04121f;

  /* Bordi e indicatori — devono avere >= 3:1 con lo sfondo adiacente (Req 10.3) */
  --line:               #2a3b4d;  /* separatori decorativi non essenziali (righe tabella) */
  --border-interactive: #7c8ea1;  /* bordo di pulsanti/chip/stepper/select/box (>= 3:1) */

  /* Indicatore di focus (Req 10.6) */
  --focus-ring:  #7cc4ff;

  /* Sfondi guidati dal tema (header e mappa) */
  --header-bg:   linear-gradient(120deg, #12202c, #16273a);
  --map-bg:      #0c1620;

  /* Testi dei badge/pill colorati: tinte CHIARE, leggibili sul velo scuro. */
  --fg-nature:   #8ee9c4;
  --fg-city:     #a9d3ff;
  --fg-warn:     #ffcf8f;
  --fg-night:    #c9bff7;
  --fg-beach:    #8fe3e6;

  --shadow: 0 6px 24px rgba(0, 0, 0, .35);

  /* Punto di rottura mobile (Req 3.1). Riferimento: 620px. */
  --bp-mobile: 620px;

  /* Bersaglio di tocco minimo (Req 3.2): 44px CSS = 2.75rem a base 16px. */
  --touch-min: 2.75rem;

  /* Tipografia: base ridimensionabile con l'impostazione del browser/OS (Req 10.4) */
  font-size: 100%;
  color-scheme: dark;
}

/* -----------------------------------------------------------------------------
   1b. SELEZIONE ESPLICITA DEL TEMA (toggle utente)
   Il toggle imposta `data-theme="light|dark"` su <html> e persiste la scelta.
   Questi selettori attributo (specificità 0,1,1) prevalgono sia sul `:root`
   base sia sulla media query `prefers-color-scheme` (0,0,1), così la scelta
   manuale vince sempre sulla preferenza di sistema. Tutti i colori sono guidati
   da questi token, quindi header, mappa e badge si adattano automaticamente.
   ----------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg:          #0f1720;
  --bg-gradient: linear-gradient(160deg, #0b1219, #0f1720 40%);
  --surface:     #16212e;
  --surface-2:   #1d2b3a;
  --chip:        #233242;
  --text:        #e8eef4;
  --text-muted:  #93a4b5;
  --link:        #5aa9ff;
  --accent:      #4fd1a5;
  --warn:        #ffb454;
  --bad:         #ff6b6b;
  --on-accent:   #062018;
  --on-accent2:  #04121f;
  --line:               #2a3b4d;
  --border-interactive: #7c8ea1;
  --focus-ring:  #7cc4ff;
  --header-bg:   linear-gradient(120deg, #12202c, #16273a);
  --map-bg:      #0c1620;
  --fg-nature:   #8ee9c4;
  --fg-city:     #a9d3ff;
  --fg-warn:     #ffcf8f;
  --fg-night:    #c9bff7;
  --fg-beach:    #8fe3e6;
  --shadow: 0 6px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:          #f4f6f9;
  --bg-gradient: linear-gradient(160deg, #eef2f7, #f4f6f9 40%);
  --surface:     #ffffff;
  --surface-2:   #eef2f7;
  --chip:        #e6ecf3;
  --text:        #16212e;
  --text-muted:  #4d5f70;
  --link:        #1663c7;
  --accent:      #0f7a5a;
  --warn:        #9a5b00;
  --bad:         #c1272d;
  --on-accent:   #ffffff;
  --on-accent2:  #ffffff;
  --line:               #c3ccd6;
  --border-interactive: #59708a;
  --focus-ring:  #1663c7;
  --header-bg:   linear-gradient(120deg, #eaf0f7, #f4f6f9);
  --map-bg:      #dfe7ef;
  --fg-nature:   #0c6f52;
  --fg-city:     #155bb5;
  --fg-warn:     #8a5300;
  --fg-night:    #5541a6;
  --fg-beach:    #0e6b73;
  --shadow: 0 6px 24px rgba(20, 40, 70, .12);
  color-scheme: light;
}

/* -----------------------------------------------------------------------------
   2. RESET E BASE
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;             /* unita' relativa (Req 10.4) */
  line-height: 1.45;
  color: var(--text);
  background: var(--bg-gradient);
  background-color: var(--bg);
  /* Evita lo scorrimento orizzontale del contenuto principale (Req 3.4, 3.7, 10.11) */
  overflow-x: hidden;
}

/* Nessun elemento deve sforare la larghezza del viewport (Req 3.4). */
img,
svg,
table,
iframe,
#map { max-width: 100%; }

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

h1, h2, h3 { line-height: 1.25; }

/* -----------------------------------------------------------------------------
   3. INDICATORE DI FOCUS (Req 10.6)
   Contrasto >= 3:1 garantito dall'offset che stacca l'anello dallo sfondo pagina.
   Non si usa mai `outline: none` senza sostituto visibile.
   ----------------------------------------------------------------------------- */
:focus-visible {
  outline: 0.1875rem solid var(--focus-ring); /* 3px */
  outline-offset: 0.125rem;                    /* 2px: separa l'anello dallo sfondo */
  border-radius: 0.375rem;
}

/* Rimuove l'outline solo per il puntatore, mantenendolo per la tastiera. */
:focus:not(:focus-visible) { outline: none; }

/* -----------------------------------------------------------------------------
   4. LAYOUT PRINCIPALE
   Due colonne su desktop, colonna singola al breakpoint mobile (Req 3.1).
   ----------------------------------------------------------------------------- */
header {
  padding: 1.375rem 1.625rem;
  border-bottom: 0.0625rem solid var(--line);
  background: var(--header-bg);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(6px);
}
header h1 { margin: 0; font-size: 1.25rem; letter-spacing: .3px; }
header .sub { color: var(--text-muted); font-size: 0.8125rem; margin-top: 0.25rem; }

.wrap {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1.125rem;
  padding: 1.125rem 1.375rem;
  align-items: start;
}

.rightcol {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  position: sticky;
  top: 6rem;
  align-self: start;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  padding-right: 0.25rem;
}

/* Collasso intermedio: la colonna riepilogo va sotto (tablet). */
@media (max-width: 980px) {
  .wrap { grid-template-columns: 1fr; }
  .rightcol {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

.card {
  background: var(--surface);
  border: 0.0625rem solid var(--line);
  border-radius: 0.875rem;
  padding: 1rem;
  box-shadow: var(--shadow);
}
.card h2 {
  margin: 0 0 0.625rem;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   5. CONTROLLI — bordi interattivi >= 3:1 (Req 10.3) e tocco >= 44px (Req 3.2)
   ----------------------------------------------------------------------------- */
.controls { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 0.875rem; }

.field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: var(--text-muted); }

/* Segmenti (mezzo di trasporto, pernottamento). */
.seg {
  display: flex;
  flex-wrap: wrap;
  background: var(--chip);
  border-radius: 0.625rem;
  padding: 0.1875rem;
  border: 0.0625rem solid var(--border-interactive);
}
.seg button {
  background: none;
  border: none;
  color: var(--text);
  padding: 0.5rem 0.75rem;
  min-height: var(--touch-min);
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
}
.seg button.on { background: var(--accent); color: var(--on-accent); }

/* Chip filtro. */
.chips { display: flex; flex-wrap: wrap; gap: 0.4375rem; margin-bottom: 0.875rem; }
.chip {
  display: inline-flex;
  align-items: center;
  background: var(--chip);
  border: 0.0625rem solid var(--border-interactive);
  color: var(--text);
  border-radius: 1.25rem;
  padding: 0.375rem 0.875rem;
  min-height: var(--touch-min);
  font-size: 0.8125rem;
  cursor: pointer;
  user-select: none;
}
.chip.on {
  background: var(--link);
  color: var(--on-accent2);
  border-color: var(--link);
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   6. GRIGLIA METE — colonna singola al breakpoint mobile (Req 3.1)
   ----------------------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; }
}

.dest {
  border: 0.0625rem solid var(--line);
  border-radius: 0.75rem;
  padding: 0.75rem;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color .15s ease, box-shadow .15s ease;
  position: relative;
}
.dest.active { border-color: var(--accent); box-shadow: 0 0 0 0.0625rem var(--accent) inset; }
.dest .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.dest .name { font-weight: 700; font-size: 0.9375rem; }
.dest .flag { font-size: 0.75rem; color: var(--text-muted); }
.dest .desc { font-size: 0.8125rem; color: var(--text-muted); }

.badges { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.b {
  font-size: 0.6875rem;
  padding: 0.125rem 0.4375rem;
  border-radius: 1.25rem;
  background: var(--surface-2);
  color: var(--text);
  border: 0.0625rem solid var(--line);
}
.b.off  { color: var(--warn); }
.b.camp { color: var(--accent); }
.b.city { color: var(--link); }

/* Stepper notti — pulsanti >= 44x44px (Req 3.2). */
.stepper { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.125rem; }
.stepper button {
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--border-interactive);
  background: var(--chip);
  color: var(--text);
  font-size: 1.125rem;
  cursor: pointer;
  line-height: 1;
}
.stepper .n { min-width: 4.625rem; text-align: center; font-size: 0.75rem; color: var(--text-muted); }
.stepper .n b { color: var(--text); font-size: 0.875rem; }

/* Selettore pernottamento. */
.sleepsel { font-size: 0.75rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.1875rem; }
.sleepsel select {
  background: var(--chip);
  color: var(--text);
  border: 0.0625rem solid var(--border-interactive);
  border-radius: 0.5rem;
  padding: 0.5rem 0.4375rem;
  min-height: var(--touch-min);
  font-size: 0.75rem;
}

/* Pulsanti toggle (visita in giornata / arrivo notturno). */
.visitbtn,
.nighthop {
  background: var(--chip);
  border: 0.0625rem solid var(--border-interactive);
  color: var(--text);
  border-radius: 0.5rem;
  padding: 0.5rem 0.5625rem;
  min-height: var(--touch-min);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
}
.visitbtn.on { border-color: var(--warn); color: var(--warn); }
.nighthop.on { border-color: var(--link); color: var(--link); }

/* Collegamenti a mappa / prenotazione. */
.glinks { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-top: 0.5rem; }
.glink {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  text-decoration: none;
  background: var(--surface-2);
  border: 0.0625rem solid var(--border-interactive);
  padding: 0.375rem 0.5625rem;
  min-height: var(--touch-min);
  border-radius: 0.4375rem;
  color: var(--link);
  font-weight: 600;
}

/* Barra strumenti (preset). */
.toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.toolbar button {
  background: var(--chip);
  border: 0.0625rem solid var(--border-interactive);
  color: var(--text);
  padding: 0.5rem 0.75rem;
  min-height: var(--touch-min);
  border-radius: 0.5625rem;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   7. BUDGET NOTTI, COSTI, TIMELINE
   ----------------------------------------------------------------------------- */
.meter { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.bar {
  height: 0.625rem;
  background: var(--chip);
  border-radius: 0.5rem;
  overflow: hidden;
  border: 0.0625rem solid var(--border-interactive);
}
.bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--link));
  width: 0;
  transition: width .3s ease;
}
.bar > i.over { background: linear-gradient(90deg, var(--warn), var(--bad)); }

.note { font-size: 0.75rem; margin-top: 0.375rem; }
.note.ok   { color: var(--accent); }
.note.warn { color: var(--warn); }
.note.bad  { color: var(--bad); }

table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
td, th { text-align: left; padding: 0.375rem 0.25rem; border-bottom: 0.0625rem solid var(--line); }
th { color: var(--text-muted); font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .5px; }

.tot { font-size: 1.625rem; font-weight: 800; color: var(--accent); }   /* testo grande */
.tot small { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; }

.cmp { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin-top: 0.375rem; }
.cmp .box {
  background: var(--surface-2);
  border: 0.0625rem solid var(--border-interactive);
  border-radius: 0.625rem;
  padding: 0.5625rem;
  min-height: var(--touch-min);
  text-align: center;
  cursor: pointer;
}
.cmp .box.on { border-color: var(--accent); box-shadow: 0 0 0 0.0625rem var(--accent) inset; }
.cmp .box .v { font-size: 1.0625rem; font-weight: 800; }
.cmp .box .l { font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.cmp .box .s { font-size: 0.625rem; color: var(--text-muted); margin-top: 0.125rem; }

.tl { position: relative; margin-top: 0.25rem; }
.day { display: flex; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 0.0625rem dashed var(--line); }
.day:last-child { border-bottom: none; }
.day .date { min-width: 4.125rem; font-size: 0.75rem; color: var(--link); font-weight: 700; padding-top: 0.125rem; }
.day .date .dweek { font-size: 0.625rem; font-weight: 600; color: var(--text-muted); margin-top: 0.0625rem; text-transform: capitalize; }
.day .body { flex: 1; }
.day .place { font-weight: 700; font-size: 0.875rem; }
.day .acts { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; }

/* -----------------------------------------------------------------------------
   8. MAPPA
   ----------------------------------------------------------------------------- */
#map {
  width: 100%;
  height: 27.5rem;
  background: var(--map-bg);
  border: 0.0625rem solid var(--line);
  border-radius: 0.625rem;
}
.leaflet-container { font-family: inherit; }

/* Segnaposto testuale della mappa (fallback offline / errore init — Req 2.4, 7.1). */
.map-fallback {
  padding: 1rem;
  background: var(--surface-2);
  border: 0.0625rem solid var(--border-interactive);
  border-radius: 0.625rem;
  color: var(--text);
}
.map-fallback ol { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.map-fallback li { margin: 0.25rem 0; }

/* -----------------------------------------------------------------------------
   9. VISTA ORARIA — scorrimento orizzontale confinato al SOLO contenitore
   della tabella (Req 3.5, 3.7, 10.10). Il resto della pagina non scorre.
   ----------------------------------------------------------------------------- */
.cal-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.cal {
  border-collapse: collapse;
  font-size: 0.6875rem;
  min-width: 51.25rem;   /* piu' larga del viewport: da qui lo scroll confinato */
  width: 100%;
  table-layout: fixed;
}
.cal th, .cal td { border: 0.0625rem solid var(--line); }
.cal th.hcountry { font-size: 0.6875rem; font-weight: 800; padding: 0.25rem 0.125rem; text-align: center; color: var(--on-accent2); }
.cal th.hdate { font-size: 0.6875rem; font-weight: 700; padding: 0.1875rem 0.125rem; text-align: center; background: var(--surface-2); color: var(--text); }
.cal th.hdate .hweek { font-size: 0.59375rem; font-weight: 600; color: var(--link); margin-top: 0.0625rem; }
.cal td.hour {
  width: 2.875rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 0 0.375rem;
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 2;
  white-space: nowrap;
}
.cal td.cell { height: 1.1875rem; text-align: center; font-weight: 700; overflow: hidden; white-space: nowrap; padding: 0 0.125rem; }

.callegend { display: flex; gap: 0.875rem; flex-wrap: wrap; margin-top: 0.625rem; font-size: 0.75rem; color: var(--text-muted); }
.callegend .sw { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; margin-right: 0.3125rem; vertical-align: -1px; }

.foot { padding: 0.5rem 1.375rem 1.875rem; color: var(--text-muted); font-size: 0.75rem; }
.legend { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: 0.6875rem; color: var(--text-muted); }

/* -----------------------------------------------------------------------------
   10. MODULO "AGGIUNGI META PERSONALE" (form/modale) — accessibilita' (Req 11.17)
   ----------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 16, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}
.modal {
  background: var(--surface);
  border: 0.0625rem solid var(--border-interactive);
  border-radius: 0.875rem;
  padding: 1.25rem;
  width: min(32rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.form-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; }
.form-field label { font-size: 0.8125rem; color: var(--text); font-weight: 600; }
.form-field input,
.form-field textarea {
  background: var(--chip);
  color: var(--text);
  border: 0.0625rem solid var(--border-interactive);
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  min-height: var(--touch-min);
  font-size: 0.9375rem;
  font-family: inherit;
}
.form-error { color: var(--bad); font-size: 0.8125rem; margin-top: 0.375rem; }

/* Utility: contenuto solo per screen reader (nomi accessibili, skip link). */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   10.5 POLISH VISIVO — profondità, colore e micro-interazioni
   Layer decorativo che arricchisce l'estetica senza alterare struttura,
   semantica o i token di contrasto documentati (Property 14). Le transizioni
   introdotte qui sono neutralizzate da `prefers-reduced-motion` (sezione 11).
   ============================================================================= */

/* Colori decorativi (hue traslucidi): funzionano su tema scuro e chiaro perché
   sovrapposti come velo semitrasparente alle superfici. Non sono token di
   contrasto: il testo usa sempre --text/--accent/--warn/--link/--bad. */
:root {
  --tint-nature: rgba(79, 209, 165, .16);   /* verde */
  --tint-city:   rgba(90, 169, 255, .16);    /* blu */
  --tint-night:  rgba(143, 127, 214, .18);   /* viola */
  --tint-warn:   rgba(255, 180, 84, .16);    /* ambra */
  --tint-beach:  rgba(90, 200, 210, .16);    /* teal */
  --glow-accent: 0 0 0 0.0625rem var(--accent), 0 8px 22px rgba(79, 209, 165, .18);
}

/* Sfondo con leggero bagliore radiale in alto: dà profondità alla pagina. */
body {
  background-image:
    radial-gradient(80rem 40rem at 78% -12%, rgba(90, 169, 255, .10), transparent 60%),
    radial-gradient(60rem 32rem at -8% 8%, rgba(79, 209, 165, .08), transparent 55%),
    var(--bg-gradient);
  background-attachment: fixed;
}

/* Header: linea-accento inferiore a gradiente + titolo con leggero risalto. */
header {
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 6px 20px rgba(0, 0, 0, .25);
  position: relative;
  padding-right: 4.25rem; /* spazio riservato al toggle del tema */
}

/* Toggle tema chiaro/scuro (in alto a destra nell'header). */
.theme-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(127, 127, 127, .16);
  color: var(--text);
  border: 0.0625rem solid var(--border-interactive);
  border-radius: 0.625rem;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.theme-toggle:hover { border-color: var(--link); background: rgba(127, 127, 127, .28); transform: translateY(-1px); }
header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.1875rem;
  background: linear-gradient(90deg, var(--accent), var(--link) 55%, var(--warn));
  opacity: .9;
}
header h1 { font-weight: 800; }

/* Card: superficie sfumata, ombra a due livelli, hover con lieve sollevamento. */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%), var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  border-color: var(--border-interactive);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 12px 30px rgba(0, 0, 0, .4);
}

/* Titoli sezione: più leggibili, con barretta-accento a sinistra. */
.card h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}
.card h2::before {
  content: "";
  width: 0.25rem;
  height: 1rem;
  border-radius: 0.25rem;
  background: linear-gradient(180deg, var(--accent), var(--link));
  flex: none;
}

/* Chip filtro: hover e stato attivo a gradiente. */
.chip { transition: transform .12s ease, border-color .12s ease, background-color .12s ease; }
.chip:hover { border-color: var(--link); transform: translateY(-1px); }
.chip.on {
  background: linear-gradient(135deg, var(--link), #3f8ae0);
  border-color: var(--link);
  box-shadow: 0 4px 12px rgba(90, 169, 255, .28);
}

/* Segmenti mezzo/pernottamento: hover e attivo a gradiente. */
.seg button { transition: background-color .12s ease, color .12s ease; }
.seg button:hover:not(.on) { background: rgba(255, 255, 255, .06); }
.seg button.on {
  background: linear-gradient(135deg, var(--accent), #35b98d);
  box-shadow: 0 3px 10px rgba(79, 209, 165, .3);
}

/* Barra strumenti (preset) e collegamenti: hover reattivo. */
.toolbar button,
.glink { transition: transform .12s ease, border-color .12s ease, background-color .12s ease; }
.toolbar button:hover { border-color: var(--accent); transform: translateY(-1px); }
.glink:hover { border-color: var(--link); background: rgba(90, 169, 255, .12); }

/* Stepper: pulsanti con hover-accento e feedback alla pressione. */
.stepper button { transition: background-color .12s ease, border-color .12s ease, transform .08s ease; }
.stepper button:hover { border-color: var(--accent); background: rgba(79, 209, 165, .14); }
.stepper button:active { transform: scale(.94); }

/* Card meta: sollevamento in hover e alone-accento quando è nel percorso. */
.dest {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 45%), var(--surface-2);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dest:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); border-color: var(--border-interactive); }
.dest.active {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}
.dest.active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.1875rem;
  border-radius: 0.75rem 0 0 0.75rem;
  background: linear-gradient(180deg, var(--accent), var(--link));
}

/* Badge tag: pill con velo di colore per categoria. Il TESTO usa i token
   --fg-* (chiaro su tema scuro, scuro su tema chiaro) così resta sempre
   leggibile sul proprio velo, evitando "colore su colore" a basso contrasto. */
.b { color: var(--text); background: rgba(127, 127, 127, .16); border-color: var(--line); }
.b.off   { color: var(--fg-warn);   background: var(--tint-warn);   border-color: rgba(255, 180, 84, .35); }
.b.camp  { color: var(--fg-nature); background: var(--tint-nature); border-color: rgba(79, 209, 165, .35); }
.b.city  { color: var(--fg-city);   background: var(--tint-city);   border-color: rgba(90, 169, 255, .35); }
.b.beach { color: var(--fg-beach);  background: var(--tint-beach);  border-color: rgba(90, 200, 210, .35); }

/* Riquadro "Perché vale la pena": box verde tenue, testo ad alto contrasto. */
.why {
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--tint-nature);
  border: 0.0625rem solid rgba(79, 209, 165, .3);
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
}
.why b { color: var(--fg-nature); }

/* Righe di dettaglio con etichetta "tag2" accentata. */
.detrow { font-size: 0.8125rem; color: var(--text); margin-top: 0.375rem; }
.detrow .tag2 {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--fg-nature);
  background: var(--tint-nature);
  border: 0.0625rem solid rgba(79, 209, 165, .3);
  border-radius: 0.375rem;
  padding: 0.0625rem 0.4375rem;
  margin-right: 0.375rem;
  letter-spacing: .3px;
}

/* Badge di stato nella timeline: visita (ambra), pernotto (verde), notturno (viola). */
.vbadge, .obadge, .nbadge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 0.375rem;
  padding: 0.1875rem 0.5rem;
  border: 0.0625rem solid transparent;
}
.vbadge { background: var(--tint-warn);   color: var(--fg-warn);   border-color: rgba(255, 180, 84, .4); }
.obadge { background: var(--tint-nature); color: var(--fg-nature); border-color: rgba(79, 209, 165, .4); }
.nbadge { background: var(--tint-night);  color: var(--fg-night);  border-color: rgba(143, 127, 214, .45); }

/* Tratta (leg) nella timeline: pill ambra. */
.day .leg {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--fg-warn);
  background: var(--tint-warn);
  border: 0.0625rem solid rgba(255, 180, 84, .3);
  border-radius: 0.375rem;
  padding: 0.125rem 0.5rem;
  margin-top: 0.3125rem;
}

/* Collegamenti "book" nella timeline (info/mappa). */
.day .book { font-size: 0.75rem; margin-top: 0.375rem; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.day .book a {
  text-decoration: none;
  background: var(--surface-2);
  border: 0.0625rem solid var(--border-interactive);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  color: var(--link);
  font-weight: 600;
  transition: border-color .12s ease, background-color .12s ease;
}
.day .book a:hover { border-color: var(--link); background: rgba(90, 169, 255, .12); }
.day .book a.gm { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.day .book a.gm:hover { background: #1765cc; }

/* Timeline: giorni come mini-card con accento a sinistra. */
.day {
  border-bottom: none;
  border-left: 0.1875rem solid var(--line);
  padding: 0.75rem 0 0.75rem 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 0 0.5rem 0.5rem 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .025), transparent 30%);
  transition: border-color .15s ease, background-color .15s ease;
}
.day:hover { border-left-color: var(--link); background: linear-gradient(90deg, rgba(90, 169, 255, .06), transparent 40%); }
.day .date { color: var(--link); }
.day .place { font-size: 0.9375rem; }

/* Totale a persona: testo con gradiente accento→blu. */
.tot #perPax {
  background: linear-gradient(90deg, var(--accent), var(--link));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Box confronto mezzi: hover e attivo con alone. */
.cmp .box { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.cmp .box:hover { transform: translateY(-2px); border-color: var(--border-interactive); box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.cmp .box.on { box-shadow: var(--glow-accent); }
.cmp .box.on .v { color: var(--accent); }
/* Con 4 mezzi (bus/treno/mix/auto) i box di confronto vanno su due colonne. */
.cmp { grid-template-columns: repeat(2, 1fr); }

/* Valutazione a stelle + fascia di prezzo (angolo in alto a destra della card). */
.top .rate { display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; white-space: nowrap; }
.rate-line { display: inline-flex; align-items: baseline; gap: 0.25rem; }
.stars { color: var(--warn); font-size: 0.875rem; letter-spacing: .5px; }
.ratenum { color: var(--text-muted); font-size: 0.6875rem; }
.cost { color: var(--fg-nature); font-size: 0.75rem; font-weight: 700; }
.cost .costmuted { color: var(--text-muted); opacity: .45; }
.tlstars { margin-left: 0.25rem; }
.tlstars .stars { font-size: 0.8125rem; }

/* Note/considerazioni: chip colorati per tipologia (testo theme-aware). */
.cons { display: flex; flex-wrap: wrap; gap: 0.3125rem; margin-top: 0.5rem; }
.con {
  font-size: 0.6875rem;
  line-height: 1.3;
  padding: 0.1875rem 0.5rem;
  border-radius: 1rem;
  border: 0.0625rem solid var(--line);
  background: rgba(127, 127, 127, .14);
  color: var(--text);
}
.con-must    { color: var(--fg-nature); background: var(--tint-nature); border-color: rgba(79, 209, 165, .35); }
.con-cost    { color: var(--fg-warn);   background: var(--tint-warn);   border-color: rgba(255, 180, 84, .35); }
.con-weather { color: var(--fg-city);   background: var(--tint-city);   border-color: rgba(90, 169, 255, .35); }
.con-book    { color: var(--fg-night);  background: var(--tint-night);  border-color: rgba(143, 127, 214, .4); }
.con-warn    { color: var(--bad);       background: rgba(255, 107, 107, .16); border-color: rgba(255, 107, 107, .4); }
.con-tip     { color: var(--fg-city);   background: var(--tint-city);   border-color: rgba(90, 169, 255, .3); }
.con-access,
.con-season  { color: var(--text-muted); }

/* Link per cercare i mezzi di trasporto della tratta (eredita lo stile .day .book a). */
.transport-links { margin-top: 0.375rem; }

/* Meter budget notti: bagliore morbido lungo la barra. */
.bar > i { box-shadow: 0 0 10px rgba(79, 209, 165, .45); }
.bar > i.over { box-shadow: 0 0 10px rgba(255, 107, 107, .5); }

/* Etichette di campo e suggerimenti (header controlli). */
.field-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.chips-hint { font-size: 0.75rem; color: var(--text-muted); margin: 0 0 0.5rem; }

/* Vista oraria: le celle e le intestazioni-paese hanno sfondi pastello FISSI
   (colori per Paese/trasporto, uguali in entrambi i temi), quindi il testo usa
   un colore scuro fisso — leggibile su quei pastelli sia in tema scuro sia
   chiaro (il token --on-accent2 diventerebbe bianco in tema chiaro, illeggibile). */
.cal th.hcountry { color: #08131f; text-shadow: 0 1px 0 rgba(255, 255, 255, .2); }
.cal td.cell { color: #0c1622; }

/* Marcatore numerato sulla mappa (divIcon Leaflet). */
.mk {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--link), #1a73e8);
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

/* Mappa: bordo più morbido e alone. */
#map { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 8px 24px rgba(0, 0, 0, .3); }

/* Pulsante "viaggio su Google Maps" e trigger "Aggiungi Meta". */
.gmbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  background: linear-gradient(135deg, #1a73e8, #1765cc);
  color: #fff;
  text-decoration: none;
  padding: 0.5625rem 0.875rem;
  min-height: var(--touch-min);
  border-radius: 0.5625rem;
  font-size: 0.8125rem;
  font-weight: 700;
  transition: filter .12s ease, transform .12s ease;
}
.gmbtn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.map-legend { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: 0.6875rem; color: var(--text-muted); }

.add-dest-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.25rem 0 0.75rem;
  background: linear-gradient(135deg, var(--accent), #35b98d);
  color: var(--on-accent);
  border: none;
  padding: 0.5rem 0.875rem;
  min-height: var(--touch-min);
  border-radius: 0.5625rem;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .12s ease, transform .12s ease;
}
.add-dest-trigger:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Modale: sfocatura dello sfondo e comparsa morbida. */
.modal-overlay { backdrop-filter: blur(4px); }
.modal { box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.form-hint { font-size: 0.6875rem; color: var(--text-muted); }
.btn-primary,
.btn-secondary {
  min-height: var(--touch-min);
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), #35b98d); color: var(--on-accent); border: none; }
.btn-secondary { background: var(--chip); color: var(--text); border: 0.0625rem solid var(--border-interactive); }
.btn-primary:hover { filter: brightness(1.06); }

/* Stato vuoto (nessuna meta selezionata). */
.empty-state {
  padding: 1rem;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 0.0625rem dashed var(--border-interactive);
  border-radius: 0.625rem;
  text-align: center;
}

/* Scrollbar della colonna riepilogo, coerente col tema. */
.rightcol::-webkit-scrollbar { width: 0.5rem; }
.rightcol::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0.5rem; }
.rightcol::-webkit-scrollbar-thumb:hover { background: var(--border-interactive); }

/* -----------------------------------------------------------------------------
   11. PREFERENZE DI SISTEMA
   ----------------------------------------------------------------------------- */

/* Riduzione del movimento (Req 10.12): disattiva transizioni/animazioni non
   essenziali per chi lo richiede. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Tema chiaro (Req 10.13): palette chiara che preserva i rapporti di contrasto
   richiesti dai criteri 10.1, 10.2 e 10.3.

   --- COPPIE TEMA CHIARO ---
   @contrast fg=--text          bg=--surface    ratio=16.3 category=normal
   @contrast fg=--text          bg=--bg         ratio=14.7 category=normal
   @contrast fg=--text-muted    bg=--surface    ratio=6.6  category=normal
   @contrast fg=--text-muted    bg=--bg         ratio=5.9  category=normal
   @contrast fg=--link          bg=--surface    ratio=5.3  category=normal
   @contrast fg=--accent        bg=--surface    ratio=5.3  category=large
   @contrast fg=--warn          bg=--surface    ratio=4.6  category=normal
   @contrast fg=--bad           bg=--surface    ratio=4.6  category=normal
   @contrast fg=--border-interactive bg=--surface   ratio=5.1 category=ui
   @contrast fg=--focus-ring    bg=--surface    ratio=3.4  category=ui
*/
@media (prefers-color-scheme: light) {
  :root {
    --bg:          #f4f6f9;
    --bg-gradient: linear-gradient(160deg, #eef2f7, #f4f6f9 40%);
    --surface:     #ffffff;
    --surface-2:   #eef2f7;
    --chip:        #e6ecf3;

    --text:        #16212e;
    --text-muted:  #4d5f70;
    --link:        #1663c7;

    --accent:      #0f7a5a;
    --warn:        #9a5b00;
    --bad:         #c1272d;

    --on-accent:   #ffffff;
    --on-accent2:  #ffffff;

    --line:               #c3ccd6;
    --border-interactive: #59708a;

    --focus-ring:  #1663c7;

    --header-bg:   linear-gradient(120deg, #eaf0f7, #f4f6f9);
    --map-bg:      #dfe7ef;
    --fg-nature:   #0c6f52;
    --fg-city:     #155bb5;
    --fg-warn:     #8a5300;
    --fg-night:    #5541a6;
    --fg-beach:    #0e6b73;

    --shadow: 0 6px 24px rgba(20, 40, 70, .12);
    color-scheme: light;
  }
  /* header, #map e badge sono guidati dai token qui sopra: nessun override di
     elemento necessario (la scelta manuale via data-theme prevale comunque). */
}