/* Macchinata — stili condivisi.
   Font: Space Grotesk (testo e titoli) + Space Mono (codici, orari, etichette): retro-futuristico ma pulito.
   Tema scuro con una punta di "Rosso Ultra"; blu per le azioni, arancione per gli strumenti di chi organizza.
   Spaziature dalla scala 4 · 8 · 12 · 16 · 24 · 32 · 48. Raggi: 8 · 14 · pieno. */
:root{
  --ground:#151213; --surface:#1F1A1B; --surface-2:#2A2425; --line:#342D2E;
  --ink:#F3EFEF; --muted:#A99E9F;
  --accent:#4468F2; --accent-text:#9DB1FF;
  --ultra:#A3121D;
  --free:#36BE83; --taken:#6E6264; --mine:#4468F2; --driver:#EDAE3E;
  --danger:#F07A68; --focus:#FFC83D;
  --admin:#F5A524; --on-admin:#1C1408;
  --font-sans:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-sm:8px; --r-md:14px;
  /* carrozzeria del disegno generico */
  --body:#7E1018; --body-edge:#B42A34; --cabin:#14100F; --glass:#2B3238;
  color-scheme: dark;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding: env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
}
[hidden]{display:none !important}
a{color:var(--accent-text)}
a:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
.skip{position:absolute; left:16px; top:-64px; background:var(--focus); color:#151213; padding:8px 12px; border-radius:var(--r-sm); font-weight:600; z-index:20}
.skip:focus{top:16px}

h1{font-size:1.875rem; line-height:1.1; font-weight:700; letter-spacing:-.02em; margin:0}
h2{font-size:1.1875rem; line-height:1.25; font-weight:700; letter-spacing:-.01em; margin:0}
/* Etichetta sopra i titoli e dati "tecnici" (codici, orari): monospazio, maiuscolo, spaziato */
.eyebrow{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0}
.mono{font-family:var(--font-mono)}
h3{font-size:1rem; font-weight:600; margin:0}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.hint{color:var(--muted)}
.hint:empty{display:none}
.icon{width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Form e bottoni ---------- */
form{display:grid; gap:8px; margin:0}
label, .label{font-weight:600; font-size:.9375rem}
input, select, textarea{
  font:inherit; color:var(--ink); background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:12px; width:100%; min-height:48px;
}
textarea{min-height:96px; resize:vertical}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}
input[aria-invalid="true"], textarea[aria-invalid="true"]{border-color:var(--danger)}
.field{display:grid; gap:8px; grid-template-columns:minmax(0,1fr)}
.field-help{color:var(--muted); font-size:.875rem}
.field-error{color:var(--danger); font-size:.875rem; font-weight:600}
.field-error:empty{display:none}
.optional{font-weight:400; color:var(--muted)}

button, .button{
  font:inherit; font-weight:600; border:1px solid transparent; border-radius:var(--r-sm); padding:12px 16px; cursor:pointer;
  background:var(--accent); color:#fff; width:100%; min-height:48px; text-align:center; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:filter .12s, transform .1s;
}
button:focus-visible, .button:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
button:disabled{opacity:.5; cursor:progress}
button:active:not(:disabled), .button:active{transform:scale(.98)}
@media (hover:hover){ button:hover:not(:disabled), .button:hover{filter:brightness(1.1)} }
.ghost{background:var(--surface-2); color:var(--ink); border-color:var(--line)}
.danger{background:transparent; color:var(--danger); border-color:currentColor}
button.link, a.link{
  background:none; border:0; color:var(--muted); width:auto; padding:12px 0; min-height:44px;
  text-decoration:underline; text-underline-offset:3px; font-weight:500;
}
button.link.danger-text{color:var(--danger)}
.actions > .link, .section > .link, .stack > .link, .card > .link, .plain > .link{justify-self:start}
.row{display:flex; gap:8px}
.row > *{min-width:0}
.row > input, .row > select, .row > .grow{flex:1}
.row > button:first-child:not(.fit){flex:1}
.row > button.fit, .row > button.ghost, .row > .button.fit{width:auto; flex:none}
.actions{display:grid; gap:8px; grid-template-columns:minmax(0,1fr)}

/* Scelta a segmenti (numero di posti, dove ti siedi) */
fieldset{border:0; margin:0; padding:0; min-width:0}
legend{font-weight:600; font-size:.9375rem; padding:0; margin-bottom:8px}
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg label{position:relative; font-weight:500}
.seg input{position:absolute; opacity:0; width:1px; height:1px; min-height:0; pointer-events:none}
.seg span{
  display:inline-flex; align-items:center; justify-content:center; min-width:56px; min-height:44px; padding:0 16px;
  border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--line); cursor:pointer; transition:background .12s;
}
.seg input:checked + span{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.seg input:focus-visible + span{outline:2px solid var(--focus); outline-offset:2px}

.toast{min-height:1.5em; font-weight:600; font-size:.9375rem}
.toast.error{color:var(--danger)}
.toast.ok{color:var(--free)}
.toast:empty{min-height:0}

/* Superficie per un gruppo di contenuti */
.surface{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:16px}
.stack{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
.tag{font-size:.8125rem; color:var(--muted); font-weight:500}

/* ---------- Pagine semplici (home, nuovo viaggio, testi) ---------- */
.page{max-width:600px; margin:0 auto; padding:16px 16px 48px; display:grid; gap:24px; grid-template-columns:minmax(0,1fr)}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px}
.brand{font-weight:700; font-size:1.0625rem; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:8px; min-height:44px}
.brand::before{content:""; width:10px; height:10px; border-radius:3px; background:var(--ultra)}
.topbar.center{justify-content:center; padding:8px 0}
.brand.lg{font-size:1.625rem; letter-spacing:-.02em; gap:12px}
.brand.lg::before{width:16px; height:16px; border-radius:5px}
.back{color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:4px; min-height:44px; font-weight:500}
#view{display:grid; gap:24px; grid-template-columns:minmax(0,1fr)}
.head-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px}
.head-row .button{white-space:nowrap}
.lead{font-size:1.0625rem; color:var(--muted); max-width:40ch}

/* Elenco dei viaggi: righe separate da una linea. Dentro una scheda arriva ai bordi della scheda. */
.card > .list{border:0; border-radius:0; background:transparent; margin:0 -16px -16px; border-top:1px solid var(--line)}
.card > .list a:focus-visible{border-radius:0}
.card:has(> .list){overflow:hidden}
.list{list-style:none; margin:0; padding:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.list li + li{border-top:1px solid var(--line)}
.list a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:16px; color:var(--ink); text-decoration:none; align-items:center}
.list a:focus-visible{outline:2px solid var(--focus); outline-offset:-2px; border-radius:var(--r-md)}
@media (hover:hover){ .list a:hover{background:var(--surface-2)} }
.list .t{font-weight:600; overflow-wrap:anywhere}
.list .m{grid-column:1; color:var(--muted); font-size:.875rem}
.list .seats{grid-column:2; grid-row:1 / span 2; text-align:right; font-size:.875rem; color:var(--muted); white-space:nowrap}
.list .seats strong{display:block; color:var(--ink); font-size:1rem}
.empty{display:grid; gap:8px; padding:24px 16px; background:var(--surface); border:1px dashed var(--line); border-radius:var(--r-md)}
.skeleton{background:var(--surface); border-radius:var(--r-md); height:72px; animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}
.google{background:#fff; color:#1f1f1f}
.google svg{width:20px; height:20px}
.site-foot{max-width:600px; margin:0 auto; padding:0 16px 32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; font-size:.875rem; border-top:1px solid var(--line); padding-top:16px}
.foot-links{display:flex; flex-wrap:wrap; gap:4px 24px}
.site-foot:has(#account:empty){justify-content:flex-start}
/* "Esci": rosso opaco, in fondo alla pagina */
button.logout{color:color-mix(in srgb, var(--danger) 70%, var(--muted)); padding:12px 0; font-weight:600}
.site-foot a{color:var(--muted); display:inline-flex; align-items:center; min-height:44px}

/* ---------- Pagina del viaggio ---------- */
.wrap{
  max-width:1040px; margin:0 auto; padding:8px 16px 48px;
  display:grid; gap:16px 48px; grid-template-columns:minmax(0,1fr);
  grid-template-areas: "top" "head" "car" "panel";
}
.wrap > .topbar{grid-area:top}
@media (min-width:860px){
  .wrap{
    grid-template-columns:minmax(0,1fr) minmax(340px,400px);
    grid-template-areas: "top top" "car head" "car panel";
    grid-template-rows:auto auto 1fr;
  }
}
.trip-head{grid-area:head; display:grid; gap:12px}
/* Informazioni del viaggio: righe con icona, tutte allineate a sinistra */
.facts{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.facts li{display:flex; gap:12px; align-items:flex-start; color:var(--ink)}
.facts .icon{color:var(--muted); margin-top:2px}
.facts a{color:var(--ink); text-decoration-color:var(--muted); text-underline-offset:3px}
.facts .sub{color:var(--muted)}
.notes{color:var(--muted); white-space:pre-line; max-width:65ch}
.notes:empty{display:none}

.stage{
  grid-area:car; display:flex; justify-content:center; align-items:center;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--ultra) 16%, transparent), transparent);
}
.stage svg{width:100%; height:auto; max-height:min(60vh,620px); display:block}
@media (min-width:860px){ .stage svg{max-height:80vh} }
.bay path{stroke:var(--line); stroke-width:4; fill:none; stroke-linecap:round}
.car{animation:park .8s cubic-bezier(.2,.75,.2,1) both}
@keyframes park{from{transform:translateY(60px); opacity:0}}
.car .shell{fill:var(--body); stroke:var(--body-edge); stroke-width:3}
.car .cabin{fill:var(--cabin)}
.car .glass{fill:var(--glass)}
.car .lamp{fill:#F4E3C4; opacity:.85}
.car .tail{fill:#FF3B3B; opacity:.8}

.seat .cushion{fill:var(--free); fill-opacity:.88; transition:fill .2s, stroke .2s; stroke:rgba(255,255,255,.5); stroke-width:2; transform-box:fill-box; transform-origin:center}
.seat text{fill:#fff; font-weight:700; font-size:21px; text-anchor:middle; dominant-baseline:central; pointer-events:none; font-family:inherit}
.seat[data-seat]{cursor:pointer; outline:none}
.seat .hit{fill:transparent}
.seat.taken .cushion{fill:var(--taken)}
.seat.wheel .cushion{fill:var(--driver); fill-opacity:.5; stroke-dasharray:6 5}
.seat.wheel.taken .cushion{fill:var(--driver); fill-opacity:1; stroke-dasharray:none}
.seat.mine .cushion{fill:var(--mine); fill-opacity:1; stroke:#fff; stroke-width:4; stroke-dasharray:none}
.seat.mine text{font-size:18px; letter-spacing:.04em}
.seat.selected .cushion{stroke:#fff; stroke-width:5; fill-opacity:1}
.seat[data-seat]:focus-visible .cushion{stroke:var(--focus); stroke-width:5}
.seat.pop .cushion{animation:pop .35s ease-out}
@keyframes pop{40%{transform:scale(1.12)}}
@media (hover:hover){ .seat.free:hover .cushion{filter:brightness(1.12)} }

.panel{grid-area:panel; display:grid; gap:16px; align-self:start; grid-template-columns:minmax(0,1fr)}
.sheet{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; display:grid; gap:8px; grid-template-columns:minmax(0,1fr)}
.count{font-size:1.125rem; font-weight:700}
#action:not(:empty){margin-top:8px}
#action > *{animation:rise .2s ease-out}
@keyframes rise{from{opacity:0; transform:translateY(8px)}}
.seat-title{font-size:1rem; font-weight:600}
.details{display:grid; gap:24px; grid-template-columns:minmax(0,1fr)}
.legend{display:flex; flex-wrap:wrap; gap:4px 16px; margin:0; padding:0; list-style:none; font-size:.875rem; color:var(--muted)}
.legend li{display:flex; align-items:center; gap:8px}
.dot{width:12px; height:12px; border-radius:4px; display:inline-block}

.roster{margin:0; padding:0; list-style:none}
.roster li{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line)}
.roster li:last-child{border-bottom:0}
.roster .where{color:var(--muted)}
.roster .who{font-weight:600; text-align:right; overflow-wrap:anywhere}
.roster .who.vacant{color:var(--muted); font-weight:400}
.roster .who.you{color:var(--accent-text)}
/* Schede della pagina del viaggio: una per argomento, ben separate */
.sections{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
.sections:empty{display:none}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; display:grid; gap:12px; grid-template-columns:minmax(0,1fr)}
.card-head{display:grid; gap:4px}
/* Strumenti di chi organizza: schede arancioni */
.card.admin{border-color:color-mix(in srgb, var(--admin) 45%, var(--line)); background:color-mix(in srgb, var(--admin) 6%, var(--surface))}
.card.admin .eyebrow{color:var(--admin)}
.card.admin h2, .card.admin summary{color:var(--admin)}
button.admin-btn{background:var(--admin); color:var(--on-admin)}
button.admin-ghost{background:transparent; color:var(--admin); border-color:color-mix(in srgb, var(--admin) 55%, transparent)}
.plain{display:grid; justify-items:start}
.section{display:grid; gap:12px; grid-template-columns:minmax(0,1fr)}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.invite-code{font-family:var(--font-mono); font-size:1.75rem; font-weight:700; letter-spacing:.18em; line-height:1}
/* "Copia codice": il bottone diventa verde, l'icona si trasforma in una spunta che si disegna */
.copy-btn{position:relative; transition:background .2s, color .2s, border-color .2s}
.copy-btn .check{stroke-dasharray:24; stroke-dashoffset:24}
.copy-btn.copied{background:color-mix(in srgb, var(--free) 22%, var(--surface-2)); border-color:var(--free); color:var(--free)}
.copy-btn.copied .check{animation:draw .35s ease-out .05s forwards}
.copy-btn.copied{animation:bump .3s ease-out}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes bump{40%{transform:scale(1.05)}}
.people{list-style:none; margin:0; padding:0}
.people li{display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; padding:4px 0; border-bottom:1px solid var(--line)}
.people li:last-child{border-bottom:0}
.people .p-name{font-weight:600; overflow-wrap:anywhere}
.people .p-role{color:var(--muted); font-weight:400; font-size:.875rem; margin-left:8px}
.people .row{gap:16px}
summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600}
summary.as-h2{font-size:1.1875rem; font-weight:700; justify-content:space-between}
summary.as-h2::after{content:"+"; font-family:var(--font-mono); font-size:1.25rem}
details[open] > summary.as-h2::after{content:"−"}
summary.as-h2::-webkit-details-marker{display:none}
summary.as-h2{list-style:none}
summary:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}

/* Telefono: stato e azioni in un pannello fisso in basso, sopra la macchina. */
@media (max-width:859.98px){
  .wrap{padding-bottom:calc(var(--sheet-h, 140px) + 24px)}
  .sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:10; max-width:560px; margin:0 auto;
    border-radius:var(--r-md) var(--r-md) 0 0; border-bottom:0;
    padding:12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -12px 32px rgba(0,0,0,.35);
    transform:translateY(var(--kb, 0px));
    max-height:75vh; overflow:auto;
  }
  .sheet::before{content:""; display:block; width:36px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 8px}
  .sheet .count{font-size:1rem}
  .stage svg{max-height:min(56vh,620px)}
}

/* ---------- Pagine di testo (privacy, termini) ---------- */
.legal{display:block; max-width:calc(65ch + 32px)}
.legal h1{margin-bottom:4px}
.legal h2{margin:32px 0 8px}
.legal p, .legal li{line-height:1.6}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px; padding-left:1.2em}
.legal li{margin-bottom:8px}
.legal li ul{margin-top:8px}
.legal code{font-size:.875em; background:var(--surface-2); border-radius:4px; padding:0 4px}

@media (prefers-reduced-motion: reduce){
  .car, .seat.pop .cushion, .skeleton, .copy-btn.copied{animation:none}
  .copy-btn .check{stroke-dashoffset:0}
  .copy-btn.copied .check{animation:none}
  .seat .cushion, button, .button, .seg span{transition:none}
  #action > *{animation-name:fade}
}
@keyframes fade{from{opacity:0}}