/* ═══════════════════════════════════════════════════════════
   SETTORE STILI · 3. COMPONENTI — card, chip, bottoni, badge,
   codici copiabili. Riusati da tutte le sezioni.

   Le superfici hanno due pesi, di proposito:
   · le card grandi hanno il doppio bordo (--bezel): vetro in un
     vassoio, le cose che contano
   · le cose piccole e numerose hanno solo un filo (--ring), se no
     la pagina diventa un mare di cornici
   ═══════════════════════════════════════════════════════════ */

/* ── card ── */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)) var(--card);
  border-radius:var(--radius);
  box-shadow:var(--bezel),var(--shadow);padding:26px 28px;
}
.card h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
.card .muted{color:var(--ink2);font-size:14px}
@media(max-width:700px){ .card{padding:22px 20px} }

/* ── chip orizzontali scorrevoli (selettore giornate) ── */
.chiprow{
  display:flex;gap:10px;overflow-x:auto;padding:10px 4px 16px;margin:0 -4px;
  scroll-snap-type:x proximity;scrollbar-width:none;
}
.chiprow::-webkit-scrollbar{display:none}
.chip{
  flex:none;scroll-snap-align:start;
  background:var(--glass);box-shadow:var(--ring);border:0;border-radius:18px;
  padding:11px 16px 12px;text-align:left;min-width:136px;
  transition:transform .35s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.chip small{display:block;color:var(--ink2);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
.chip b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;margin-top:2px;white-space:nowrap}
.chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)}
.chip:active{transform:scale(.98)}
.chip.on{background:var(--ink);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--ink) 40%,transparent)}
.chip.on small{color:color-mix(in srgb,var(--on-accent) 65%,var(--ink))}
.chip.on b{color:var(--on-accent)}

/* ── badge e pillole ── */
.badge{
  display:inline-block;font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:999px;
  background:rgba(255,255,255,.07);color:var(--ink2);
}
.badge.blue{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
.badge.green{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.badge.orange{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange)}
.badge.red{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}

/* ── bottone pillola (mappa, azioni) ──
   Vetro chiaro di base; il bottone principale è bianco pieno.
   Premuto si abbassa appena, come un tasto vero. */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:rgba(255,255,255,.07);border:0;border-radius:999px;color:var(--ink);
  min-height:42px;padding:0 18px;font-size:14px;font-weight:600;letter-spacing:-.005em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.08);
  transition:background .3s var(--ease),transform .25s var(--ease),box-shadow .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.pill:hover{background:rgba(255,255,255,.12)}
.pill:active{transform:scale(.97)}
.pill:disabled{opacity:.5;cursor:default;transform:none}
.pill.on{
  background:var(--ink);color:var(--on-accent);
  box-shadow:0 12px 28px -12px rgba(200,215,255,.55),inset 0 -1px 0 rgba(0,0,0,.12);
}
.pill.on:hover{background:#fff}

/* ── codici prenotazione copiabili ── */
.pnr{
  display:inline-flex;align-items:center;gap:6px;
  margin:6px 8px 0 0;padding:5px 11px;border-radius:10px;
  background:rgba(255,255,255,.06);box-shadow:var(--ring);font-size:13.5px;font-weight:500;
  font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background .25s var(--ease);
}
.pnr:hover{background:color-mix(in srgb,var(--blue) 16%,transparent)}
.pnr.ok{background:color-mix(in srgb,var(--green) 22%,transparent)}
.pnr::after{content:"⌘C";font-size:10px;color:var(--ink2)}
.pnr.ok::after{content:"copiato"}

/* ── avvisi ── */
.warn{
  margin-top:10px;padding:11px 14px;border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--orange) 10%,transparent);
  box-shadow:inset 3px 0 0 var(--orange);
  font-size:14px;line-height:1.55;
}

/* ── icone dei mezzi ── */
.mico{display:inline-flex;width:22px;height:22px;flex:none;vertical-align:-5px}
.mico svg{width:100%;height:100%}

/* ── griglia statistiche ── */
.statgrid{display:flex;flex-wrap:wrap;gap:10px}
.stat{
  flex:1 1 120px;background:var(--glass);box-shadow:var(--ring);border-radius:18px;
  padding:13px 15px 14px;font-size:12.5px;color:var(--ink2);
}
.stat b{
  display:block;font-size:22px;font-weight:600;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:3px;
}
.stat.live b::after{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--green);margin-left:7px;vertical-align:middle;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 25%,transparent);
}
.stat.cold b{color:var(--teal)}
.stat.gold b{color:var(--orange)}

/* ── barrette fatica ── */
.effort{display:flex;gap:4px;margin-top:8px}
.effort i{width:16px;height:6px;border-radius:3px;background:var(--hair)}
.effort i.f{background:var(--orange)}

/* ── i campi: l'anello azzurro quando si scrive ──
   :where() tiene bassa la precedenza, così i campi con un fuoco
   disegnato apposta (la didascalia) restano come sono */
:where(input:not([type=checkbox]):not([type=radio]),select,textarea):focus-visible{
  outline:none;box-shadow:0 0 0 1.5px var(--blue),0 0 0 5px color-mix(in srgb,var(--blue) 20%,transparent);
}

/* ── i fumetti della mappa: scuri come la pagina ──
   Stanno qui e non nella mappa del viaggio perché li usa anche la
   pagina dei cari. */
.maplibregl-popup-content{
  font-family:var(--font)!important;border-radius:18px!important;
  padding:15px 17px!important;max-width:290px;
  background:#111830!important;color:var(--ink);
  box-shadow:0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.08),var(--shadow-lg)!important;
}
/* la punta del fumetto prende lo stesso colore, da qualunque lato stia */
.maplibregl-popup-anchor-top .maplibregl-popup-tip,.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-bottom-color:#111830!important}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-top-color:#111830!important}
.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:#111830!important}
.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:#111830!important}
.maplibregl-popup-close-button{color:var(--ink2);font-size:18px;right:6px;top:4px}
.maplibregl-popup-close-button:hover{background:none;color:var(--ink)}