/* ============================================================
   PIGAFETTA.ai — foglio di stile unico.
   Ordine: 1) design system (ex styles.css)  2) raccordi Django
   (ex app.css)  3) stili spostati dai template (ex <style> inline).
   Esterni (leaflet, Google Fonts) restano file separati.
   ============================================================ */

/* ═══════════ 1. DESIGN SYSTEM (ex styles.css) ═══════════ */

/* =========================================================
   PIGAFETTA.ai MVP — Design System
   Tema nautico · responsive · light/dark
   ========================================================= */

:root{
  --navy-900:#1d1d1f;
  --navy-800:#2c2c2e;
  --navy-700:#3a3a3c;
  --sea-600:#0071e3;
  --sea-500:#0a84ff;
  --sea-400:#66aaff;
  --teal-500:#30b0c7;
  --sun-500:#ff9500;
  --sun-400:#ffb340;
  --coral-500:#ff6459;
  --green-500:#34c759;
  --amber-500:#ff9f0a;
  --red-500:#ff3b30;

  --bg:#f5f6fa;
  --bg-2:#eceef5;
  --backdrop:#e6e8f0;
  --surface:rgba(255,255,255,.62);
  --surface-2:rgba(116,128,160,.1);
  --line:rgba(30,40,80,.1);
  --line-2:rgba(30,40,80,.06);
  --text:#1a1a1c;
  /* Niente grigi nei testi (2026-08-17): i secondari erano #44444a e
     #74747c, entrambi più vicini al nero che al bianco per luminanza
     percepita, quindi collassano sul testo pieno. La gerarchia la fanno
     corpo e peso, non lo sbiadimento — che su una carta al sole è la
     prima cosa che si perde. I colori dell'app (mare, sole, corallo)
     restano come sono. */
  --text-2:#1a1a1c;
  --text-3:#1a1a1c;
  --shadow:0 1px 1px rgba(20,30,60,.04), 0 12px 32px rgba(31,41,90,.1);
  --shadow-lg:0 24px 60px rgba(31,41,90,.22);
  --radius:22px;
  --radius-sm:14px;
  --radius-lg:30px;
  --sidebar-w:264px;
  --topbar-h:64px;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Inter Tight','Inter',system-ui,sans-serif;
}

[data-theme="dark"]{
  --bg:#0d0d12;
  --bg-2:#13131a;
  --backdrop:#08080c;
  --surface:rgba(28,28,36,.6);
  --surface-2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.18);
  --line-2:rgba(255,255,255,.11);
  --text:#f5f5f7;
  --text-2:#f5f5f7;
  --text-3:#f5f5f7;
  --shadow:0 1px 1px rgba(0,0,0,.2), 0 12px 32px rgba(0,0,0,.35);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55)}

/* token grafici: usati da app.js / data.js via var() — le versioni differiscono solo per CSS */
:root{
  --chart-1:#0a84ff;
  --chart-2:#5e5ce6;
  --chart-3:#30b0c7;
  --warn:#ff9500;
  --bad:#ff3b30;
  --ink:#1a1a1c;
  --muted:#6b6b72;
  --purple:#bf5af2;
  --green:#34c759;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--backdrop);
  color:var(--text);
  font-size:17.5px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
/* «Testo grande» dalle impostazioni (UserProfile.text_size). Si scala l'INTERA
   pagina con zoom, non solo il font del body: quasi tutti i testi dell'app hanno
   una loro misura in px e col solo font-size resterebbero identici — cioè
   l'opzione non farebbe nulla proprio dove serve leggere. Con lo zoom crescono
   anche spaziature e controlli, che è quel che serve a un dito sotto il sole. */
body[data-text-size="lg"]{ zoom:1.3 }

/* ---------------- FRAME (telefono / tablet / desktop) ----------------
   Tre versioni, UNA struttura: le regole si appendono al `@container app`
   qui sotto, non a media query parallele da tenere allineate a mano. È la
   lezione del bug del 31/07, quando un blocco `@media (min-width:1024px)`
   aveva ricreato una seconda UI e schiacciato l'app in 280px su un monitor
   da 1440 (README §9, ADR-056 che supera ADR-047).

   Soglie:  telefono < 640px  ·  tablet 640-1024  ·  desktop > 1024
   Cambia la larghezza utile e la densità, NON la navigazione: sidebar a
   cassetto e dock in fondo restano ovunque — sono proprio la cosa che quel
   bug aveva rotto cercando di cambiarle. */
.frame{
  position:relative;
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  height:100vh;height:100dvh;
  overflow:hidden;
  background:var(--bg);
  /* le VISTE si adattano alla larghezza del FRAME (non della finestra) */
  container-type:inline-size;
  container-name:app;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none;cursor:pointer}
svg{display:block}
/* fix critico: [hidden] deve sempre vincere sugli stili .overlay/.popover (display:grid)
   altrimenti l'overlay invisibile intercetta tutti i click */
[hidden]{display:none!important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-3)}

/* ---------------- APP SHELL (mobile-only) ---------------- */
.app{display:block;height:100%}

/* ---------------- SIDEBAR (sempre off-canvas) ---------------- */
.sidebar{
  background:var(--surface);
  color:var(--text-2);
  display:flex;flex-direction:column;
  border-right:1px solid var(--line);
  position:absolute;top:0;left:0;height:100%;width:min(280px,84%);z-index:70;
  transform:translateX(-100%);transition:.28s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg);
}
.sidebar.open{transform:none}
/* scrim dietro la sidebar: sopra la dock (z50) e l'app, sotto la sidebar (z70) */
.sidebar-scrim{position:absolute;inset:0;z-index:65;background:rgba(25,25,30,.42);backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.28s cubic-bezier(.4,0,.2,1)}
.sidebar-scrim.show{opacity:1;pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;padding:18px 18px 16px}
.brand__logo{width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  background:var(--navy-900);
  display:grid;place-items:center}
.brand__logo svg{width:24px;height:24px}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__text strong{font-family:var(--display);font-size:19px;color:var(--text);letter-spacing:.1px}
.brand__text small{color:var(--text-3);font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.sidebar__close{display:grid;place-items:center;margin-left:auto;width:34px;height:34px;border-radius:50%;color:var(--text-3)}
.sidebar__close::before{content:"✕";font-size:18px}

.nav{flex:1;overflow-y:auto;padding:6px 12px 12px}
.nav__label{font-size:12.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--text-3);margin:16px 10px 6px}
.nav__item{display:flex;align-items:center;gap:12px;padding:9px 13px;border-radius:999px;color:var(--text-2);font-weight:500;position:relative;transition:.15s}
button.nav__item{width:100%;background:none;border:none;text-align:left;font:inherit;cursor:pointer}
.nav__item:hover{background:var(--surface-2);color:var(--text)}
.nav__item.is-active{background:var(--sea-600);color:#fff}
.nav__item.is-active::before{content:none}
.nav__ico{width:20px;height:20px;flex:0 0 auto;display:grid;place-items:center;opacity:.92}
.nav__ico svg{width:19px;height:19px}
.nav__txt{flex:1;font-size:15.5px}
.nav__badge{font-size:11.5px;font-weight:800;letter-spacing:.5px;background:var(--sea-600);color:#fff;padding:2px 7px;border-radius:20px}
.nav__dot{width:8px;height:8px;border-radius:50%;background:var(--amber-500);box-shadow:0 0 0 3px rgba(232,161,58,.2)}

.sidebar__foot{padding:12px;border-top:1px solid var(--line-2)}
.boatcard{margin-top:10px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:18px;padding:11px 12px;display:flex;gap:11px;align-items:center}
.boatcard__img{width:42px;height:42px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;flex:0 0 auto}
.boatcard__img svg{width:24px;height:24px;color:var(--sea-600)}
.boatcard__t{line-height:1.25;min-width:0}
.boatcard__t b{display:block;color:var(--text);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boatcard__t span{font-size:13px;color:var(--text-3)}
.tutorialcard{margin-top:10px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:10px}
.tutorialcard__t{margin:0;font-size:14px;line-height:1.4;color:var(--text-3)}
.tutorialcard .btn{width:100%;justify-content:center}

/* ---------------- TOUR GUIDATO ---------------- */

/* suggerimenti sotto un campo di testo (porti, ricambi): il campo resta
   scrivibile, l'elenco è un aiuto, non un vincolo */
.suggest{position:absolute;top:100%;left:0;right:0;margin-top:4px;
  background:var(--surface);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  max-height:240px;overflow-y:auto;z-index:10;
  box-shadow:var(--shadow);display:none}
.suggest.show{display:block}
.suggest__item{display:flex;align-items:center;gap:10px;padding:10px 12px;
  cursor:pointer;border-bottom:1px solid var(--line);font-size:15px}
.suggest__item:last-child{border:none}
.suggest__item:hover{background:var(--surface-2)}
.suggest__item b{font-weight:600}
.suggest__item span{color:var(--text-2);font-size:14px}
.suggest__item.is-active{background:rgba(10,132,255,.08);border-color:rgba(10,132,255,.2)}

/* onboarding: l'icona in cima alla modale sta sul fondo scuro dell'hero */
.ob-hero__ico{width:46px;height:46px;background:rgba(255,255,255,.18);color:#fff}
/* avanti sulle aree è una sola freccia: pulsante quadrato, non largo */
.btn--icon{padding:0;width:42px;justify-content:center}
/* indietro: freccia a specchio, un pulsante fantasma accanto ai dots */
#obBack .ico{transform:scaleX(-1)}
.ob .modal__body{max-height:min(46vh,420px);overflow-y:auto}

/* ---------------- MAIN ---------------- */
.main{display:flex;flex-direction:column;min-width:0;height:100%}
.topbar{height:var(--topbar-h);flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:0 12px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);position:relative;z-index:40}
.iconbtn{flex:0 0 auto}
.langtoggle{flex:0 0 auto}
.topbar__menu{display:grid}
.topbar__spacer{flex:1}
.tb-brand{display:flex;align-items:center;gap:9px;min-width:0}
.tb-brand__logo{width:30px;height:30px;flex:0 0 auto;border-radius:50%;color:#fff;
  background:var(--navy-900);display:grid;place-items:center}
.tb-brand__logo svg{width:18px;height:18px}
.tb-brand strong{font-family:var(--display);font-size:18px;letter-spacing:.2px;white-space:nowrap}
/* su telefono stretto mostro solo il logo (il nome completo è in sidebar) */
@container app (max-width:430px){ .tb-brand strong{display:none} }
.search{flex:1;min-width:0;display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:0 14px;height:40px;color:var(--text-3);transition:.15s}
.search kbd{display:none}
.search:focus-within{border-color:var(--sea-500);box-shadow:0 0 0 3.5px rgba(10,132,255,.22)}
.search svg{width:18px;height:18px;flex:0 0 auto}
.search input{flex:1;border:none;background:none;outline:none;color:var(--text);min-width:0}
.search kbd{font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--text-3)}

.iconbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--text-2);position:relative;transition:.15s;background:var(--surface)}
.iconbtn:hover{background:var(--surface-2);color:var(--text)}
.iconbtn svg{width:20px;height:20px}
.iconbtn--bell .dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--coral-500);border:2px solid var(--surface)}

.langtoggle{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.langtoggle button{padding:4px 12px;border-radius:999px;font-size:14px;font-weight:700;color:var(--text-3)}
.langtoggle button.is-active{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

.avatar{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;
  background:var(--sea-500);border:2px solid var(--surface)}

/* ---------------- VIEW ---------------- */
.view{flex:1;overflow-y:auto;padding:18px 16px 92px;scroll-behavior:smooth;position:relative}
.view--chat{padding:0;overflow:hidden}
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-family:var(--display);font-size:27px;font-weight:600;letter-spacing:-.2px}
.page-head p{color:var(--text-2);font-size:15.5px;margin-top:3px}
.page-head .spacer{flex:1}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--sea-600)}

/* ---------------- BUTTONS / CHIPS / BADGES ---------------- */
.btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font-weight:600;font-size:15.5px;
  background:var(--surface);border:1px solid var(--line);color:var(--text);transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--text-3);box-shadow:var(--shadow)}
.btn svg{width:17px;height:17px}
.btn--primary{background:var(--sea-600);border-color:var(--sea-600);color:#fff}
.btn--primary:hover{background:#0077ed;border-color:#0077ed;box-shadow:none}
.btn--ghost{background:transparent;border-color:transparent}
.btn--sm{height:32px;padding:0 14px;font-size:14.5px;border-radius:999px}
.btn--block{width:100%;justify-content:center}

.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:30px;font-size:14px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-2)}
.chip--clk{cursor:pointer;transition:.15s}
.chip--clk:hover{border-color:var(--sea-400);color:var(--text);background:var(--surface)}
.chip--active{background:var(--sea-600);border-color:var(--sea-600);color:#fff}
button.chip{cursor:pointer;font:inherit}
.chip svg{width:14px;height:14px}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:13px;font-weight:700}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--ok{background:rgba(52,199,89,.14);color:#248a3d}
.badge--warn{background:rgba(255,149,0,.15);color:#b25000}
.badge--bad{background:rgba(255,59,48,.12);color:#d70015}
.badge--info{background:rgba(10,132,255,.13);color:#0071e3}
.badge--muted{background:var(--surface-2);color:var(--text-3)}
[data-theme="dark"] .badge--ok{color:#30d158}
[data-theme="dark"] .badge--warn{color:#ff9f0a}
[data-theme="dark"] .badge--bad{color:#ff6961}
[data-theme="dark"] .badge--info{color:#6cb2ff}

/* ---------------- CARDS / GRID ---------------- */
.grid{display:grid;gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card--pad0{padding:0;overflow:hidden}
.card__head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.card__head h3{font-size:17px;font-weight:700;font-family:var(--display)}
.card__head .spacer{flex:1}
.card__ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto}
.card__ico svg{width:19px;height:19px}
.ic-sea{background:rgba(10,132,255,.13);color:var(--sea-600)}
.ic-sun{background:rgba(255,149,0,.15);color:#b25000}
.ic-teal{background:rgba(48,176,199,.15);color:#0e7c8c}
.ic-coral{background:rgba(255,69,58,.12);color:#d70015}
.ic-green{background:rgba(52,199,89,.14);color:#248a3d}

/* mobile-only: 2 colonne per le mini-stat, tutto il resto a piena larghezza */
.dash-grid{grid-template-columns:1fr 1fr}
.col-3{grid-column:span 1}
.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-12{grid-column:1 / -1}

/* stat cards */
.stat{display:flex;flex-direction:column;gap:6px}
.stat__top{display:flex;align-items:center;gap:10px}
.stat__val{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.4px;line-height:1}
.stat__lbl{color:var(--text-2);font-size:14.5px;font-weight:600}
.stat__sub{font-size:13.5px;color:var(--text-3);display:flex;align-items:center;gap:5px}

/* hero weather */
.hero{position:relative;overflow:hidden;color:#fff;border:none;
  background:var(--navy-900)}
.hero::after{content:none}
.hero>*{position:relative;z-index:1}
.hero .wx-temp{font-family:var(--display);font-size:48px;font-weight:600;line-height:1}
.hero .wx-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px}
.wx-metric{display:flex;align-items:center;gap:9px}
.wx-metric svg{width:22px;height:22px;opacity:.9}
.wx-metric b{display:block;font-size:17px;font-weight:700;line-height:1.1}
.wx-metric span{font-size:13px;opacity:.7}
.hero .wx-metric span{color:rgba(255,255,255,.7);opacity:1}

/* struttura widget a livelli (wx-body/wx-temp/wx-foot): stile base valido
   ovunque (home vera compresa). Nelle celle di /home/ e /test-widget/ viene
   sovrascritto con font in cq. */
.wx-body{display:flex;flex-direction:column;gap:8px}
.wx-body--empty{align-items:flex-start;gap:10px}
.wx-temp{font-family:var(--display);font-size:36px;font-weight:600;line-height:1;letter-spacing:-.5px}
.hero .wx-temp{font-size:48px}
.wx-wind{display:flex;align-items:center;gap:8px}
.wx-metrics{display:flex;gap:20px;flex-wrap:wrap;margin-top:6px}
.wx-foot{display:flex;align-items:center;gap:5px;font-size:14px;opacity:.75;margin-top:4px}

/* list rows */
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:13px;padding:13px 4px;border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:none}
a.row:hover{background:var(--surface-2);margin:0 -8px;padding-left:12px;padding-right:12px;border-radius:8px}
.row__ico{width:38px;height:38px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center}
.row__ico svg{width:19px;height:19px}
.row__main{flex:1;min-width:0}
.row__main b{font-size:15.5px;font-weight:600;display:block}
.row__main span{font-size:14px;color:var(--text-2)}
.row__end{text-align:right;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px}

/* progress */
.bar{height:8px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:6px;background:var(--sea-500)}
.bar--sun>i{background:var(--sun-500)}

/* ---------------- FORMS ---------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:14px;font-weight:600;color:var(--text-2)}
.input,.select,textarea.input{height:42px;border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:0 14px;outline:none;transition:.15s;width:100%;box-sizing:border-box;max-width:100%}
input[type=date]{padding-right:10px}@media(max-width:560px){input[type=date],input[type=time],input[type=datetime-local]{font-size:18px}.select{font-size:18px}}
textarea.input{height:auto;padding:11px 13px;resize:vertical;min-height:84px}
/* Occhio per mostrare la password. L'input resta a tutta larghezza e il
   pulsante ci sta sopra: incassarlo in una griglia cambierebbe l'altezza
   dei campi solo su quelli con l'occhio, disallineando il form. */
.pw-wrap{position:relative;display:block}
.pw-wrap .input{padding-right:44px}
.pw-eye{position:absolute;top:0;right:0;height:100%;width:42px;display:flex;
  align-items:center;justify-content:center;border:0;background:none;padding:0;
  cursor:pointer;color:var(--text-2);border-radius:0 14px 14px 0}
.pw-eye:hover{color:var(--text)}
.pw-eye:focus-visible{outline:2px solid var(--sea-500);outline-offset:-2px}
.pw-eye .ico{pointer-events:none}
.pw-eye .pw-ico--hide{display:none}
.pw-eye[aria-pressed="true"] .pw-ico--show{display:none}
.pw-eye[aria-pressed="true"] .pw-ico--hide{display:block}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--sea-500);box-shadow:0 0 0 3.5px rgba(10,132,255,.22);background:var(--surface)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238499ac' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.form-grid{display:grid;grid-template-columns:1fr;gap:0 18px}

.toggle{position:relative;width:44px;height:25px;border-radius:30px;background:var(--line);transition:.2s;flex:0 0 auto}
.toggle.on{background:var(--sea-500)}
.toggle::after{content:"";position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.toggle.on::after{left:21.5px}

/* tabs */
.tabs{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px;overflow-x:auto}
.tabs button{padding:8px 16px;border-radius:999px;font-weight:600;font-size:15px;color:var(--text-2);white-space:nowrap}
.tabs button.is-active{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

/* check item */
.checkitem{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:.15s;cursor:pointer;margin-bottom:9px}
.checkitem:hover{border-color:var(--sea-400)}
.checkitem.done{background:var(--surface-2);border-color:var(--line-2)}
.checkitem.done .checkitem__t b{text-decoration:line-through;color:var(--text-3)}
.cbox{width:24px;height:24px;border-radius:8px;border:2px solid var(--line);flex:0 0 auto;display:grid;place-items:center;transition:.15s}
.cbox svg{width:15px;height:15px;color:#fff;opacity:0;transform:scale(.5);transition:.15s}
.checkitem.done .cbox{background:var(--green-500);border-color:var(--green-500)}
.checkitem.done .cbox svg{opacity:1;transform:scale(1)}
.checkitem__t{flex:1}
.checkitem__t b{font-size:15.5px;font-weight:600;display:block}
.checkitem__t span{font-size:14px;color:var(--text-2)}

/* ---------------- TABLE ---------------- */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr.clk{cursor:pointer}
.tbl tr.clk:hover td{background:var(--surface-2)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;background:var(--surface-2);padding:2px 7px;border-radius:6px;border:1px solid var(--line-2)}

/* ---------------- CHAT ---------------- */
/* `grid-template-columns:minmax(0,1fr)` non è ridondante: senza colonne
   dichiarate la colonna implicita è `auto`, cioè si allarga al contenuto —
   una bolla lunga o una fila di suggerimenti sfondava i 390 px del
   telefono e la conversazione finiva tagliata a destra (misurato: figli a
   696 px dentro un `.chat` di 390). */
.chat{display:grid;grid-template-rows:1fr auto;grid-template-columns:minmax(0,1fr);position:absolute;inset:0;bottom:64px;background:var(--bg)}
.chat__scroll{overflow-y:auto;padding:26px 0 14px}
#homeWidgets{padding:0 16px 6px}
.chat__inner{max-width:var(--read-max,820px);margin:0 auto;padding:0 22px;display:flex;flex-direction:column;gap:18px}
/* i messaggi si appoggiano in basso, sopra la barra di scrittura, come in
   qualsiasi chat: partendo dall'alto una conversazione corta lasciava sotto
   una voragine vuota e l'ultimo messaggio finiva lontano da dove si scrive.
   `min-height:100%` serve perché flex-end da solo non ha spazio da cui
   spingere finché il contenuto non riempie la colonna. */
.chat__scroll--bottom .chat__inner{min-height:100%;justify-content:flex-end}
.msg{display:flex;gap:12px;max-width:90%}
.msg__av{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;color:#fff}
.msg--ai .msg__av{background:var(--sea-600)}
.msg--ai .msg__av svg{width:19px;height:19px}
.msg--me{align-self:flex-end;flex-direction:row-reverse}
.msg--me .msg__av{background:var(--sea-500);font-weight:700;font-size:14px}
.msg__body{display:flex;flex-direction:column;gap:8px;min-width:0}
.bubble{padding:12px 15px;border-radius:15px;font-size:16px;line-height:1.55;box-shadow:var(--shadow)}
.msg--ai .bubble{background:var(--surface);border:1px solid var(--line);border-top-left-radius:5px}
.msg--me .bubble{background:var(--sea-500);color:#fff;border-top-right-radius:5px}
.bubble p+p{margin-top:8px}
.bubble strong{font-weight:700}
.bubble ul{margin:6px 0 0;padding-left:18px}
.bubble li{margin:3px 0}
/* chat_wait.html: messaggi centrati, non allineati a sx/dx come .msg */
/* larghezza FISSA, non max-width: le bolle devono essere tutte uguali —
   con max-width una domanda di tre parole restava un francobollo accanto
   a una risposta lunga. Il blocco è centrato, il testo dentro allineato
   a sinistra (centrarlo rende faticosa la lettura di più righe). */
/* Il turno corrente (risposta + eventuale scheda meteo + mappa) sta dentro
   un div suo, che il poller sostituisce in blocco: senza questo il `gap`
   della colonna non arriva ai suoi figli — bolla e scheda si toccavano
   (misurati 0 px contro i 18 fra i messaggi). */
/* Le domande pronte sotto il box: pill in fila, che scorrono in
   orizzontale invece di andare a capo — su un telefono tre righe di
   suggerimenti mangerebbero la conversazione. La barra di scorrimento si
   nasconde: si trascina, non si guarda. */
/* `min-width:0` non è decorativo: senza, il contenuto in fila allarga il
   contenitore invece di scorrere dentro di esso, e l'intera pagina va in
   scorrimento orizzontale — titolo e box tagliati a destra. */
/* il riassunto del documento letto dall'AI: sotto il nome, in piccolo —
   è un'informazione utile, non il titolo della riga */
.doc-ai{display:block;font-size:14px;line-height:1.45;color:var(--text-2);
  margin-top:3px}

/* il canvas del vento animato: sta sopra le tessere ma non intercetta il
   mouse — la carta si deve poter trascinare attraverso */
.wind-canvas{position:absolute;pointer-events:none}

/* Selettore tema in fondo alla sidebar: tre stati, quello scelto acceso */
.themepick{display:flex;gap:4px;margin:0 10px 8px;padding:3px;border-radius:12px;
  background:var(--surface-2)}
.themepick button{flex:1;padding:6px 4px;border:0;border-radius:9px;font:inherit;
  font-size:13.5px;font-weight:600;color:var(--text-2);background:transparent;cursor:pointer}
.themepick button.is-active{background:var(--surface);color:var(--text);
  box-shadow:var(--shadow)}
/* la lingua è scesa qui dalla topbar: sta in riga sotto il tema */
.langtoggle--side{margin:0 10px 10px}

.chat-hints{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
  min-width:0;max-width:100%}
.chat-hints::-webkit-scrollbar{display:none}
.chat-hints form{flex:0 0 auto}
.chat-hint{padding:7px 13px;border-radius:20px;
  font:inherit;font-size:14.5px;font-weight:500;color:var(--text-2);
  background:var(--surface);border:1px solid var(--line);cursor:pointer}
.chat-hint:hover{color:var(--text);border-color:var(--sea-500)}

#chatAnswer{display:flex;flex-direction:column;gap:18px}

/* La scheda meteo sotto una risposta: larga quanto la bolla, come la
   mappa. I numeri stanno qui, così il testo sopra può commentare il tempo
   invece di ricopiarli. */
.chat-wx{width:80%;margin:0 auto;padding:14px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.chat-wx__head{display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;margin-bottom:10px;font-size:16px}
/* Il giorno mostrato pesa piu' dell'ora di aggiornamento: uno dice che
   cosa stai guardando, l'altra quanto e' fresco. */
.chat-wx__quando{font-size:13px;font-weight:600;color:var(--sea-600);
  text-transform:capitalize}
.chat-wx__gauges{gap:8px}
.chat-wx__gauges .gauge{padding:9px 6px}
.chat-wx__gauges .gauge b{display:block;font-size:17px}
.chat-wx__gauges .gauge span{font-size:13px;color:var(--text-2)}
.chat-wx__extra{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;
  font-size:14.5px;color:var(--text-2)}
/* il link alla carta col meteo: sotto i valori, prima dei giorni */
.chat-wx__open{display:inline-block;margin-top:10px;padding:5px 10px;
  border-radius:20px;font-size:14px;font-weight:600;text-decoration:none;
  color:var(--sea-500);background:var(--surface-2);border:1px solid var(--line)}
.chat-wx__open:hover{background:var(--surface)}
.chat-wx__days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.chat-wx__day{text-align:center;font-size:13.5px;line-height:1.5}
.chat-wx__day b{display:block;font-size:15px;color:var(--text)}

/* Il posto di cui parla la risposta, come pulsante: prima qui c'era
   un'anteprima quadrata larga quanto la bolla, che su un telefono
   rubava lo schermo per dire quello che il testo aveva gia' detto
   (call 2026-08-21). Chi vuole vedere dov'e' tocca e va sulla carta. */
.chat-map-btn{width:80%;margin:0 auto;display:flex;align-items:center;
  gap:10px;padding:11px 14px;border-radius:14px;text-decoration:none;
  color:var(--text);background:var(--surface);border:1px solid var(--line);
  font-size:15px;font-weight:600;transition:.15s}
.chat-map-btn:hover{background:var(--surface-2);border-color:var(--sea-500)}
.chat-map-btn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* la freccia guarda a destra: e' un "vai la'", non un "torna indietro" */
.chat-map-btn .ico:last-child{color:var(--text-3);transform:rotate(180deg)}

.chat-msg{width:80%;margin:0 auto;padding:12px 18px;border-radius:16px;font-size:16.5px;line-height:1.55;text-align:left;white-space:pre-wrap;color:var(--text)}
.chat-msg--user{background:var(--sea-500);color:#fff;box-shadow:var(--shadow)}
.chat-msg--ai{background:var(--surface);border:1px solid var(--line)}
.chat-retry{margin-top:10px}
/* la riga di istruzioni sopra la carta di scelta tappa: sta SOPRA la
   mappa, non accanto, se no su telefono le ruba mezzo schermo */
.pick-row{display:flex;align-items:center;gap:10px;margin-top:-6px}
.pick-hint{position:absolute;top:58px;left:12px;right:12px;z-index:600;
  display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);font-size:14.5px;
  box-shadow:0 2px 10px rgba(0,0,0,.12)}
.chat-msg--ai.is-pending{color:var(--text-2);font-style:italic}
/* La riga «sto leggendo i tuoi documenti…»: sta sopra la bolla, allineata
   con lei, e pesa poco - e' contorno, non risposta. Il puntino che pulsa
   dice che il lavoro e' in corso senza dover scrivere «attendere». */
.chat-stato{width:80%;margin:0 auto 6px;padding:0 18px;
  font-size:13.5px;color:var(--text-3);display:flex;align-items:center;gap:7px}
.chat-stato::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--sea-500);flex:0 0 auto;animation:statoPulsa 1.2s ease-in-out infinite}
@keyframes statoPulsa{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.chat-stato::before{animation:none;opacity:.8}}

/* I tre puntini dell'attesa: 0->1->2->3 e daccapo. Un'animazione sola su
   tre elementi sfasati nel tempo, invece di un timer in JavaScript —
   così continua a girare anche mentre la pagina fa altro. */
.dots-wait{display:inline-flex;gap:4px;align-items:center;height:1em}
.dots-wait i{width:6px;height:6px;border-radius:50%;background:currentColor;
  opacity:.25;animation:dotsWait 1.2s infinite ease-in-out}
.dots-wait i:nth-child(2){animation-delay:.2s}
.dots-wait i:nth-child(3){animation-delay:.4s}
@keyframes dotsWait{
  0%,60%,100%{opacity:.25;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}
/* chi ha chiesto meno animazioni nel sistema operativo non le vuole
   nemmeno qui: i puntini restano, fermi */
@media (prefers-reduced-motion: reduce){
  .dots-wait i{animation:none;opacity:.6}
}

/* il testo che arriva in streaming: il cursore dice che sta ancora
   scrivendo, e sparisce da solo quando il messaggio e' completo */
.chat-msg--ai.is-streaming::after{content:"";display:inline-block;
  width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;
  background:currentColor;animation:cursoreStream 1s steps(2) infinite}
@keyframes cursoreStream{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.toolchips{display:flex;flex-wrap:wrap;gap:6px}
.toolchip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--sea-600);background:rgba(10,132,255,.1);border:1px solid rgba(10,132,255,.25);padding:3px 10px;border-radius:20px}
.toolchip svg{width:12px;height:12px}
.chat-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);max-width:420px}
.chat-card__h{padding:11px 14px;font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;color:#fff;
  background:var(--navy-800)}
.chat-card__h svg{width:16px;height:16px}
.chat-card__b{padding:13px 14px;display:flex;flex-direction:column;gap:9px}
.kv{display:flex;justify-content:space-between;font-size:14.5px;gap:14px}
.kv span{color:var(--text-2)}.kv b{font-weight:700}
.safety-note{font-size:13px;color:var(--text-3);display:flex;gap:6px;align-items:flex-start;padding-top:2px}
.safety-note svg{width:13px;height:13px;flex:0 0 auto;margin-top:1px}
.typing{display:flex;gap:4px;padding:14px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chat__compose{border-top:1px solid var(--line);background:var(--surface);padding:14px 0}
.compose__inner{max-width:var(--read-max,820px);margin:0 auto;padding:0 22px}

/* home minimale: senza risposta, titolo + input centrati verticalmente,
   niente bordo/sfondo da barra in fondo (occupa tutta la .chat). Selettore
   doppio per battere le regole "vetro" di .chat__compose e del tema scuro. */
.chat__compose.chat__compose--center,
[data-theme="dark"] .chat__compose.chat__compose--center{
  grid-row:1 / -1;
  border-top:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  display:flex;align-items:center;justify-content:center;
  padding:24px 0;
}
.chat__compose--center .compose__inner{width:100%}
/* Il gruppo titolo+barra+suggerimenti si centra rispetto allo spazio fra
   topbar e dock, non rispetto al contenitore: e' quello che l'utente vede
   come «la schermata», e il cliente la trovava tutta appoggiata in alto
   (2026-08-22). `justify-content:center` sul contenitore che riempie
   l'altezza fa il lavoro senza numeri da indovinare. */
.home-ask__title{
  font-family:var(--display);
  /* +3px in entrambi gli estremi: 22->25 sul telefono, 34->37 su
     desktop (cliente, 2026-08-22) */
  font-size:clamp(25px,4.9cqw,37px);font-weight:700;line-height:1.15;
  text-align:center;margin-bottom:18px;letter-spacing:-.3px;
  display:flex;flex-direction:column;gap:4px;
}
/* Il nome tiene la misura del titolo, la frase sotto e' piu' piccola e
   piu' leggera: sono due piani, non due titoli. */
/* .62 e non .58: sul telefono il sottotitolo passa da 12,8 a 15,5px,
   su desktop da 19,7 a 23 - i 2-3px chiesti dal cliente valgono anche
   qui, e a 12,8px la frase si leggeva a fatica */
.home-ask__claim{font-size:.62em;font-weight:500;color:var(--text-2);
  letter-spacing:0}
.suggests{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:11px}
.suggests .chip{flex:0 0 auto;white-space:nowrap}
/* La barra e' a DUE righe: il testo sopra, i comandi sotto - graffetta a
   sinistra, dettatura e invio a destra (layout chiesto dal cliente il
   2026-08-21, docs/immagini/barra-chat-riferimento.jpg). Prima erano
   tutti in fila accanto al testo, e il campo si prendeva lo spazio che
   avanzava fra i pulsanti. */
.composebar{position:relative;display:flex;flex-direction:column;gap:6px;
  border:1px solid var(--line);background:var(--surface-2);
  border-radius:26px;padding:12px 12px 10px 18px;transition:.15s}
.composebar__azioni{display:flex;align-items:center;justify-content:space-between;gap:8px}
.composebar__sx,.composebar__dx{display:flex;align-items:center;gap:8px;min-width:0}
.composebar__btn{display:grid;place-items:center;flex:0 0 auto;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  color:var(--text-3);background:var(--surface);transition:.15s}
.composebar__btn:hover{color:var(--text);background:var(--surface-2)}
.composebar:focus-within{border-color:var(--sea-500);box-shadow:0 0 0 3.5px rgba(10,132,255,.22)}
.composebar textarea{flex:1;border:none;background:none;outline:none;resize:none;max-height:120px;padding:8px 0;line-height:1.4}
.composebar .send{width:36px;height:36px;border-radius:50%;background:var(--sea-600);color:#fff;display:grid;place-items:center;flex:0 0 auto;transition:.15s}
.composebar .send:hover{background:#0077ed}
.composebar .send svg{width:19px;height:19px}
.compose__hint{text-align:center;font-size:12.5px;color:var(--text-3);margin-top:8px}

/* ---------------- MAP ---------------- */
.mapwrap{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#dce6f2;min-height:380px}
.mapwrap svg{display:block;width:100%;height:100%}
.map-legend{position:absolute;left:14px;bottom:14px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:11px;padding:9px 12px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;box-shadow:var(--shadow)}
.map-legend div{display:flex;align-items:center;gap:7px;color:var(--text-2)}
.map-legend i{width:11px;height:11px;border-radius:50%}
.map-marker{cursor:pointer;transition:.15s}
.map-marker:hover{transform:scale(1.12)}
.map-tip{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:14px;box-shadow:var(--shadow-lg);pointer-events:none;transform:translate(-50%,-115%);white-space:nowrap;z-index:5}
.map-tip b{display:block;font-size:14.5px}
.map-tip span{color:var(--text-2);font-size:13px}
/* la parte dispositiva di un'ordinanza nel popup: è il testo che conta, quindi
   staccato e leggibile, ma con un tetto — se il provvedimento è lungo si scorre
   invece di allungare il popup oltre la carta */
.ord-disp{display:block;margin:6px 0;padding:7px 9px;border-radius:8px;
  background:var(--surface-2);color:var(--text);font-size:14.5px;line-height:1.4;
  max-height:150px;overflow-y:auto}

/* riga dell'elenco ordinanze (/ordinanze/): stesso simbolo della carta,
   a sinistra, per riconoscere la categoria senza aprire la riga */
.ordinanza-row{padding:14px 16px}
.ordinanza-row__ico{flex:none;width:28px;height:28px;display:grid;place-items:center}
.ordinanza-row__main{flex:1;min-width:0}

/* meteo forecast strip */
.fc-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.fc-day{flex:0 0 auto;width:84px;text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:12px 8px}
.fc-day b{font-size:14px;display:block}
.fc-day .fc-ico{margin:8px auto;width:30px;height:30px;color:var(--sun-500)}
.fc-day .fc-t{font-weight:700;font-size:16px}
.fc-day .fc-w{font-size:13px;color:var(--text-2);margin-top:3px}

/* gauges row */
.gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.gauge{text-align:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.gauge svg{margin:0 auto}
.gauge b{font-family:var(--display);font-size:22px;font-weight:600;display:block;margin-top:6px}
.gauge span{font-size:13.5px;color:var(--text-2)}

/* ---------------- DETAIL DRAWER ---------------- */
.drawer-bg{position:absolute;inset:0;background:rgba(25,25,30,.4);backdrop-filter:blur(2px);z-index:90;opacity:0;transition:.2s}
.drawer-bg.show{opacity:1}
.drawer{position:absolute;top:0;right:0;height:100%;width:min(460px,92vw);background:var(--surface);box-shadow:var(--shadow-lg);z-index:91;
  transform:translateX(100%);transition:.28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.drawer.show{transform:none}
.drawer__head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.drawer__head h3{font-family:var(--display);font-size:19px;flex:1}
.drawer__body{flex:1;overflow-y:auto;padding:20px}
.drawer__foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px}

/* ---------------- OVERLAY / ONBOARDING ---------------- */
.overlay{position:absolute;inset:0;background:rgba(25,25,30,.5);backdrop-filter:blur(4px);z-index:100;display:grid;place-items:center;padding:20px;opacity:0;transition:.2s;cursor:pointer}
.overlay .modal{cursor:default}
.overlay.show{opacity:1}
.modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:min(560px,100%);overflow:hidden;transform:translateY(12px);transition:.25s}
.overlay.show .modal{transform:none}
.modal__hero{padding:30px 30px 22px;color:#fff;position:relative;overflow:hidden;background:var(--navy-900)}
.modal__hero::after{content:none}
.modal__hero>*{position:relative}
.modal__hero h2{font-family:var(--display);font-size:25px;margin-top:10px}
.modal__hero p{color:rgba(255,255,255,.82);margin-top:8px;font-size:15.5px}
.modal__body{padding:22px 26px 24px}
.modal__foot{padding:0 26px 24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.modal__foot .dots{margin-right:auto}

/* Dialog «cambia lista» (cambusa): <dialog> nativo, si centra e gestisce il
   backdrop da solo — niente .overlay a mano. */
.list-switch {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0;
  width: min(420px, 92vw);
  background: var(--surface);
  color: inherit;
}
.list-switch::backdrop { background: rgba(25, 25, 30, .5); backdrop-filter: blur(4px); }
.list-switch__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.list-switch__head h3 { font-family: var(--display); font-size: 18px; }
.list-switch__body { padding: 10px; display: grid; gap: 4px; max-height: 60vh; overflow-y: auto; }
.list-switch__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: inherit; font-size: 16px; font-weight: 600;
}
.list-switch__item:hover { background: var(--surface-2); }
.list-switch__item.is-on { background: var(--surface-2); color: var(--sea-600); }
.list-switch__item--new { color: var(--sea-600); border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; margin-bottom: 4px; }
.modal__foot-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;flex:1 1 auto;min-width:0}
.modal__foot-actions .btn{flex:0 1 auto;min-width:0;white-space:nowrap}
.dots{display:flex;gap:7px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.2s}
.dots i.on{background:var(--sea-500);width:22px;border-radius:6px}
.tour-areas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tour-area{border:1px solid var(--line);border-radius:13px;padding:14px;cursor:pointer;transition:.15s}
.tour-area:hover{border-color:var(--sea-400);background:var(--surface-2)}
.tour-area .ta-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin-bottom:9px}
.tour-area b{font-size:15.5px;display:block}
.tour-area span{font-size:13.5px;color:var(--text-2)}

/* feedback stars */
.stars{display:flex;gap:6px}
.stars button{font-size:28px;color:var(--line);transition:.12s;line-height:1}
.stars button.on,.stars button:hover{color:var(--sun-500)}

/* ---------------- POPOVER (notifs) ---------------- */
.popover{position:absolute;top:60px;right:18px;width:340px;max-width:92vw;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-lg);z-index:80;overflow:hidden}
.popover__head,.popover__h{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700;display:flex;align-items:center;justify-content:center}
.notif{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.notif:last-child{border:none}
.notif__ico{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center}
.notif b{font-size:15px}.notif p{font-size:14px;color:var(--text-2)}
.notif small{font-size:13px;color:var(--text-3)}

/* ---------------- FAB / BOTTOMNAV ---------------- */
.fab{position:absolute;right:18px;bottom:82px;width:54px;height:54px;border-radius:50%;z-index:55;
  background:var(--sea-600);color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(0,113,227,.4);transition:.18s}
.fab:hover{transform:translateY(-2px) scale(1.03)}
.fab svg{width:24px;height:24px}

.bottomnav{display:flex;position:absolute;left:0;right:0;bottom:0;height:64px;z-index:50;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);justify-content:space-around;align-items:center;padding:0 6px}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-3);font-weight:600;flex:1;padding:6px 0}
.bottomnav a small{font-size:12px}
.bottomnav a svg{width:22px;height:22px}
.bottomnav a.is-active{color:var(--sea-600)}
/* selettore ad alta specificità per vincere su ".bottomnav a" e centrare l'icona */
.bottomnav a.bottomnav__cta{flex:0 0 auto;width:56px;height:56px;min-width:56px;max-width:56px;border-radius:50%;margin-top:-24px;padding:0;gap:0;
  display:grid;place-items:center;color:#fff;
  background:var(--sea-600);box-shadow:0 10px 24px rgba(0,113,227,.4)}
.bottomnav a.bottomnav__cta>span{display:grid;place-items:center;width:auto}
.bottomnav a.bottomnav__cta svg{width:26px;height:26px}

/* toasts */
.toasts{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{pointer-events:auto}
.toast{background:var(--navy-800);color:#fff;padding:12px 20px;border-radius:999px;box-shadow:var(--shadow-lg);font-size:15.5px;font-weight:500;
  display:flex;align-items:center;gap:10px;animation:toastin .3s;max-width:90vw}
.toast svg{width:18px;height:18px;color:var(--sea-400)}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}}

/* ---------------- PRINT REPORT (export PDF) ---------------- */
#printReport{display:none;color:#1d1d1f;font-family:'Inter',sans-serif;padding:28px 32px}
#printReport .pr-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #1d1d1f;padding-bottom:14px;margin-bottom:18px}
#printReport .pr-brand{font-family:'Inter Tight',sans-serif;font-size:24px;font-weight:700;color:#1d1d1f;letter-spacing:-.3px}
#printReport .pr-sub{font-size:14px;color:#1d1d1f;margin-top:2px}
#printReport .pr-boat{text-align:right;font-size:14px;color:#1d1d1f;line-height:1.5}
#printReport .pr-boat b{color:#1d1d1f;font-size:16px}
#printReport h2{font-family:'Inter Tight',sans-serif;font-size:17px;margin:18px 0 8px;color:#0071e3}
#printReport .pr-tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:6px}
#printReport .pr-tbl th{text-align:left;border-bottom:1.5px solid #cbd5e0;padding:6px 8px;font-size:13px;text-transform:uppercase;color:#64748b}
#printReport .pr-tbl td{padding:6px 8px;border-bottom:1px solid #e9eff4}
#printReport .pr-tbl .r{text-align:right}
#printReport .pr-tbl .pr-tot td{font-weight:800;border-top:2px solid #94a3b8}
#printReport .pr-foot{margin-top:22px;font-size:12.5px;color:#94a3b8;border-top:1px solid #e9eff4;padding-top:10px}
@media print{
  body{background:#fff!important;overflow:visible!important}
  .frame,.toasts{display:none!important}
  #printReport{display:block!important}
}

/* helpers */
.muted{color:var(--text-2)}.t3{color:var(--text-3)}
.flex{display:flex}.aic{align-items:center}.jcb{justify-content:space-between}.gap8{gap:8px}.gap12{gap:12px}.wrap{flex-wrap:wrap}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mb0{margin-bottom:0}.mb16{margin-bottom:16px}
.fz12{font-size:14px}.fz13{font-size:15px}.fw700{font-weight:700}
.divider{height:1px;background:var(--line);margin:16px 0}
.empty{text-align:center;padding:40px 20px;color:var(--text-3)}
/* solo l'icona grande dell'empty state: dentro un bottone resta quella del bottone
   (altrimenti la "+" di «Aggiungi il primo» diventa 46px e si scentra) */
.empty>svg{width:46px;height:46px;margin:0 auto 12px;opacity:.5}

/* fade-in views */
.fade{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}

/* ---------------- FEATURE UI (azioni rapide, meteo selector, video, voce) ---------------- */
.qa-btn{display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;width:100%}
.qa-btn:hover{border-color:var(--sea-400);box-shadow:var(--shadow)}
.qa-btn .qa-txt b{display:block;font-size:16px}
.qa-btn .qa-txt span{font-size:14px;color:var(--text-2)}
.cg-marker{transition:.15s}
.cg-marker:hover{transform:scale(1.12)}
.wx-loc{display:flex;align-items:center;gap:6px}
.wx-gps{width:34px;height:34px}
.wx-gps.is-active{background:rgba(10,132,255,.13);color:var(--sea-600)}
.vid-thumb{position:relative;height:150px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;
  background:var(--navy-800);font-size:14.5px;text-align:center;padding:0 16px}
.vid-thumb svg{opacity:.85}
.vid-play{position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--sea-600);display:grid;place-items:center;font-size:19px;box-shadow:var(--shadow-lg)}
.rec-wave{display:flex;align-items:center;gap:3px;margin-left:auto}
.rec-wave i{width:3px;height:12px;border-radius:3px;background:var(--coral-500);animation:rec 1s infinite ease-in-out}
.rec-wave i:nth-child(2){animation-delay:.15s}.rec-wave i:nth-child(3){animation-delay:.3s}.rec-wave i:nth-child(4){animation-delay:.45s}.rec-wave i:nth-child(5){animation-delay:.6s}
@keyframes rec{0%,100%{height:6px}50%{height:18px}}
/* selettore posizione meteo sull'hero della home */
.hero-loc{position:absolute;top:14px;right:14px;display:flex;gap:6px;z-index:2}
.hero-gps{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);cursor:pointer}
.hero-gps.is-active{background:rgba(255,255,255,.3)}
.hero-gps svg{width:15px;height:15px}
.hero-sel{height:32px;border-radius:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;font-size:14px;padding:0 26px 0 10px;cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.hero-sel option{color:#1d1d1f}
/* copy ambito nautico + chip CTA barca */
.compose__scope{display:flex;align-items:center;gap:7px;font-size:14.5px;color:var(--text-2);font-weight:500;margin-bottom:8px;padding:0 2px}
.compose__scope svg{width:14px;height:14px;color:var(--sea-600);flex:0 0 auto}
.chip--cta{background:rgba(10,132,255,.1);border-color:rgba(10,132,255,.28);color:var(--sea-600);font-weight:600}
.chip--cta:hover{background:rgba(10,132,255,.17)}
/* impostazioni */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.set-row:last-child{border-bottom:none}
.set-row b{display:block;font-size:15.5px}
.set-row span{font-size:14px;color:var(--text-2)}
.set-row .langtoggle button{min-width:46px}
/* input vocale chat */
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,.5)}50%{box-shadow:0 0 0 7px rgba(255,59,48,0)}}
/* notifica push simulata */
.push{position:absolute;top:14px;left:50%;transform:translate(-50%,-140%);z-index:130;width:min(380px,92%);
  background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  display:flex;gap:11px;padding:13px 14px;cursor:pointer;transition:.3s cubic-bezier(.4,0,.2,1);opacity:0}
.push.show{transform:translate(-50%,0);opacity:1}
.push__ico{width:36px;height:36px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center}
.push__ico svg{width:19px;height:19px}
.push__b{flex:1;min-width:0}
.push__x{width:26px;height:26px;border-radius:8px;color:var(--text-3);display:grid;place-items:center;flex:0 0 auto}
.push__x:hover{background:var(--surface-2)}

/* ---------------- BASE = MOBILE (frame stretto) ---------------- */
.page-head h1{font-size:24px}
.page-head{margin-bottom:18px}
.hero .wx-temp{font-size:42px}
.dash-grid{gap:14px}
.tour-areas{grid-template-columns:1fr}
.gauges{grid-template-columns:1fr 1fr}
/* telefoni molto stretti: mini-stat a colonna singola */
@media (max-width:360px){ .dash-grid{grid-template-columns:1fr} }

/* ---------------- FRAME LARGO = TABLET (container query) ---------------- */
/* si attiva sulla larghezza del FRAME: tablet o desktop. Su telefono resta mobile. */
@container app (min-width:680px){
  .view{padding:22px 24px 96px}
  .page-head h1{font-size:27px}
  .hero .wx-temp{font-size:48px}
  /* ripristino la griglia a 12 colonne dentro il frame */
  .dash-grid{grid-template-columns:repeat(12,1fr);gap:18px}
  .col-3{grid-column:span 3}
  .col-4{grid-column:span 4}
  .col-5{grid-column:span 5}
  .col-6{grid-column:span 6}
  .col-7{grid-column:span 7}
  .col-8{grid-column:span 8}
  .col-9{grid-column:span 9}
  .col-12{grid-column:span 12}
  .form-grid{grid-template-columns:1fr 1fr}
  .tour-areas{grid-template-columns:1fr 1fr}
  .gauges{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  /* bottom-nav raggruppata al centro invece che stirata sui bordi */
  .bottomnav{justify-content:center;gap:34px}
  .bottomnav a{flex:0 0 auto;min-width:76px}
}

/* =========================================================
   APPLE GLASS LAYER — frosted material over ambient backdrop
   ========================================================= */

/* sfondo ambientale colorato: dà al vetro qualcosa da sfocare */
.frame{background:
  radial-gradient(1100px 700px at 85% -15%,rgba(120,170,255,.55),transparent 60%),
  radial-gradient(900px 650px at -10% 25%,rgba(180,160,255,.45),transparent 60%),
  radial-gradient(1000px 700px at 55% 115%,rgba(120,215,255,.45),transparent 60%),
  var(--bg)}
[data-theme="dark"] .frame{background:
  radial-gradient(1100px 700px at 85% -15%,rgba(50,90,210,.4),transparent 60%),
  radial-gradient(900px 650px at -10% 25%,rgba(120,80,220,.3),transparent 60%),
  radial-gradient(1000px 700px at 55% 115%,rgba(30,140,200,.28),transparent 60%),
  var(--bg)}

/* materiale vetro: superfici principali */
.card,.popover,.drawer,.modal,.push,.checkitem,.fc-day,.gauge,
.msg--ai .bubble,.chat-card,.composebar,.map-legend,.map-tip,.chat-msg--ai{
  backdrop-filter:blur(28px) saturate(1.8);
  -webkit-backdrop-filter:blur(28px) saturate(1.8);
  border-color:rgba(255,255,255,.55);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.65)}
[data-theme="dark"] .card,[data-theme="dark"] .popover,[data-theme="dark"] .drawer,
[data-theme="dark"] .modal,[data-theme="dark"] .push,[data-theme="dark"] .checkitem,
[data-theme="dark"] .fc-day,[data-theme="dark"] .gauge,[data-theme="dark"] .msg--ai .bubble,
[data-theme="dark"] .chat-card,[data-theme="dark"] .composebar,
[data-theme="dark"] .map-legend,[data-theme="dark"] .map-tip,[data-theme="dark"] .chat-msg--ai{
  border-color:rgba(255,255,255,.12);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.09)}
.drawer,.modal,.popover{background:var(--surface)}
.fc-day,.gauge{background:var(--surface)}
.checkitem{background:var(--surface)}

/* barre di sistema in vetro */
.sidebar{background:rgba(255,255,255,.55);
  backdrop-filter:blur(34px) saturate(1.8);-webkit-backdrop-filter:blur(34px) saturate(1.8);
  border-right:1px solid rgba(255,255,255,.45)}
[data-theme="dark"] .sidebar{background:rgba(22,22,30,.62);border-right:1px solid rgba(255,255,255,.08)}
.topbar{background:rgba(255,255,255,.45);backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);
  border-bottom:1px solid rgba(255,255,255,.4)}
[data-theme="dark"] .topbar{background:rgba(18,18,26,.55);border-bottom:1px solid rgba(255,255,255,.08)}
.bottomnav{background:rgba(255,255,255,.5);backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);
  border-top:1px solid rgba(255,255,255,.4)}
[data-theme="dark"] .bottomnav{background:rgba(18,18,26,.6);border-top:1px solid rgba(255,255,255,.08)}
/* i tab inattivi in dark: bianchi, il grigio spariva sul vetro scuro */
[data-theme="dark"] .bottomnav a:not(.is-active):not(.bottomnav__cta){color:#fff}
/* il tab attivo in dark: blu più chiaro, --sea-600 spariva sul vetro scuro */
[data-theme="dark"] .bottomnav a.is-active{color:var(--sea-400)}
.chat{background:transparent}
/* stesso vetro della dock (.bottomnav): così barra e dock non staccano */
.chat__compose{background:rgba(255,255,255,.5);backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);
  border-top:1px solid rgba(255,255,255,.4)}
[data-theme="dark"] .chat__compose{background:rgba(18,18,26,.6);border-top:1px solid rgba(255,255,255,.08)}

/* hero e modal hero: gradiente blu→indigo stile Apple */
.hero{background:linear-gradient(135deg,#0a84ff 0%,#5e5ce6 100%)}
.modal__hero{background:linear-gradient(135deg,#0a84ff 0%,#5e5ce6 100%)}

/* toast scuro traslucido */
.toast{background:rgba(29,29,33,.78);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.12)}
.toast svg{color:#6cb2ff}

/* dettagli tipografici stile Apple */
.page-head h1{letter-spacing:-.6px}
.stat__val{letter-spacing:-.6px}
.brand__text strong{letter-spacing:-.3px}
.tb-brand strong{letter-spacing:-.3px}

/* pulsanti vetro */
.btn{backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6)}
.btn--primary,.btn--ghost{backdrop-filter:none;-webkit-backdrop-filter:none}
.iconbtn{background:rgba(255,255,255,.4)}
[data-theme="dark"] .iconbtn{background:rgba(255,255,255,.08)}
.iconbtn:hover{background:rgba(255,255,255,.7)}
[data-theme="dark"] .iconbtn:hover{background:rgba(255,255,255,.14)}

/* =========================================================
   V4 — "KEYNOTE GLASS": aurora animata, dock flottante,
   sidebar flottante, vetro più profondo, tipografia più grande
   ========================================================= */

/* --- fondale animato dietro tutto il contenuto ---
   Dieci macchie sfocate su due strati che derivano in modo INDIPENDENTE: tempi
   diversi e non multipli fra loro (29s e 43s), traiettorie diverse. Le fasi
   così non tornano mai in sincrono e il moto non si legge come un ciclo — è
   quel che lo fa sembrare organico invece che una gif che riparte.
   Sono correnti, non onde: nessun profilo disegnato, solo colore che si sposta.
   I colori restano nella stessa famiglia (blu/ciano/viola, un tocco di rosa):
   più macchie servono a variare il fondale, non a fare un arcobaleno. */
.app{position:relative;z-index:1}
.frame::before{content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;
  background:
    radial-gradient(30% 26% at 72% 20%,rgba(10,132,255,.72),transparent 62%),
    radial-gradient(26% 30% at 16% 66%,rgba(140,110,255,.62),transparent 62%),
    radial-gradient(24% 24% at 58% 104%,rgba(60,210,255,.58),transparent 62%),
    radial-gradient(20% 20% at 88% 80%,rgba(255,120,190,.34),transparent 62%),
    radial-gradient(22% 20% at 8% 14%,rgba(90,160,255,.5),transparent 62%),
    radial-gradient(18% 22% at 96% 46%,rgba(110,190,235,.44),transparent 62%);
  filter:blur(55px);
  animation:drift-a 29s ease-in-out infinite alternate}
[data-theme="dark"] .frame::before{background:
    radial-gradient(30% 26% at 72% 20%,rgba(10,110,255,.5),transparent 62%),
    radial-gradient(26% 30% at 16% 66%,rgba(120,80,240,.42),transparent 62%),
    radial-gradient(24% 24% at 58% 104%,rgba(30,180,240,.36),transparent 62%),
    radial-gradient(20% 20% at 88% 80%,rgba(220,80,170,.22),transparent 62%),
    radial-gradient(22% 20% at 8% 14%,rgba(50,110,220,.34),transparent 62%),
    radial-gradient(18% 22% at 96% 46%,rgba(60,140,200,.28),transparent 62%)}

/* secondo strato, più lento e più largo: attraversa il primo e ne rompe il ciclo */
.frame::after{content:"";position:absolute;inset:-15%;z-index:0;pointer-events:none;
  background:
    radial-gradient(34% 30% at 28% 28%,rgba(70,190,255,.5),transparent 62%),
    radial-gradient(30% 34% at 82% 58%,rgba(120,140,255,.44),transparent 62%),
    radial-gradient(28% 26% at 44% 90%,rgba(40,220,220,.38),transparent 62%),
    radial-gradient(24% 22% at 66% 8%,rgba(150,170,255,.36),transparent 62%);
  filter:blur(65px);
  animation:drift-b 43s ease-in-out infinite alternate}
[data-theme="dark"] .frame::after{background:
    radial-gradient(34% 30% at 28% 28%,rgba(40,120,220,.34),transparent 62%),
    radial-gradient(30% 34% at 82% 58%,rgba(90,90,210,.28),transparent 62%),
    radial-gradient(28% 26% at 44% 90%,rgba(20,160,180,.24),transparent 62%),
    radial-gradient(24% 22% at 66% 8%,rgba(80,100,200,.22),transparent 62%)}

@keyframes drift-a{
  0%{transform:translate3d(-9%,-6%,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(8%,10%,0) rotate(9deg) scale(1.2)}
  100%{transform:translate3d(-5%,8%,0) rotate(-7deg) scale(1.1)}}
/* traiettoria opposta e rotazione più ampia: i due strati non si accompagnano */
@keyframes drift-b{
  0%{transform:translate3d(10%,7%,0) rotate(-10deg) scale(1.12)}
  50%{transform:translate3d(-11%,-8%,0) rotate(7deg) scale(1)}
  100%{transform:translate3d(6%,-9%,0) rotate(12deg) scale(1.22)}}
@media (prefers-reduced-motion:reduce){
  .frame::before,.frame::after{animation:none}}

/* --- vetro più profondo + lift al passaggio --- */
.card{background:rgba(255,255,255,.5);
  backdrop-filter:blur(36px) saturate(1.9);-webkit-backdrop-filter:blur(36px) saturate(1.9);
  transition:transform .25s ease, box-shadow .25s ease}
[data-theme="dark"] .card{background:rgba(26,26,36,.52)}
.card:hover{transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(20,30,60,.06), 0 24px 55px rgba(31,41,90,.16), inset 0 1px 0 rgba(255,255,255,.65)}
[data-theme="dark"] .card:hover{
  box-shadow:0 4px 10px rgba(0,0,0,.25), 0 24px 55px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.09)}
.hero:hover{transform:none}

/* --- hero: gradiente più ricco + riflesso speculare --- */
.hero{background:linear-gradient(140deg,#0a84ff 0%,#5e5ce6 62%,#7d5ce6 100%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 88% -15%,rgba(255,255,255,.38),transparent 58%),
             radial-gradient(40% 50% at 8% 110%,rgba(255,255,255,.14),transparent 60%)}
.modal__hero{background:linear-gradient(140deg,#0a84ff 0%,#5e5ce6 62%,#7d5ce6 100%)}
.modal__hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 88% -15%,rgba(255,255,255,.35),transparent 58%)}

/* --- sidebar flottante arrotondata --- */
.sidebar{top:12px;left:12px;height:calc(100% - 24px);border-radius:28px;
  border:1px solid rgba(255,255,255,.5);overflow:hidden;
  transform:translateX(calc(-100% - 16px))}
[data-theme="dark"] .sidebar{border-color:rgba(255,255,255,.1)}

/* --- bottom nav a "dock" flottante --- */
.bottomnav{left:14px;right:14px;bottom:12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.5);box-shadow:var(--shadow-lg);padding:0 16px}
[data-theme="dark"] .bottomnav{border-color:rgba(255,255,255,.1)}
.view{padding-bottom:118px}
.fab{bottom:96px}
/* la barra di composizione poggia sul bordo alto della dock flottante
   (dock: bottom 12 + alta 64 = 76): niente fascia di sfondo nel mezzo */
.chat{bottom:76px}

/* --- topbar senza bordo, si fonde con lo sfondo --- */
.topbar{border-bottom:none;background:rgba(255,255,255,.28)}
[data-theme="dark"] .topbar{background:rgba(16,16,24,.4)}

/* --- CTA primario: gradiente Apple + bagliore --- */
.btn--primary{background:linear-gradient(180deg,#2b95ff,#0071e3);border-color:transparent;
  box-shadow:0 8px 20px rgba(0,113,227,.35), inset 0 1px 0 rgba(255,255,255,.35)}
.btn--primary:hover{background:linear-gradient(180deg,#3d9fff,#0077ed);border-color:transparent;
  box-shadow:0 10px 26px rgba(0,113,227,.45), inset 0 1px 0 rgba(255,255,255,.35)}
.composebar .send{background:linear-gradient(180deg,#2b95ff,#0071e3);
  box-shadow:0 6px 16px rgba(0,113,227,.35), inset 0 1px 0 rgba(255,255,255,.35)}
.fab{background:linear-gradient(180deg,#2b95ff,#0071e3)}
.bottomnav a.bottomnav__cta{background:linear-gradient(180deg,#2b95ff,#0071e3)}
.msg--me .bubble{background:linear-gradient(180deg,#1a8dff,#0a7aff)}
.nav__item.is-active{background:linear-gradient(180deg,#2b95ff,#0071e3);
  box-shadow:0 6px 14px rgba(0,113,227,.3), inset 0 1px 0 rgba(255,255,255,.3)}

/* --- avatar con anello --- */
.avatar{box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 0 0 4.5px rgba(10,132,255,.55)}
[data-theme="dark"] .avatar{box-shadow:0 0 0 2px rgba(20,20,28,.9), 0 0 0 4.5px rgba(10,132,255,.55)}

/* --- tipografia più grande e fluida (cqw = larghezza frame) --- */
.page-head h1{font-size:clamp(23px,3.4cqw,30px);letter-spacing:-.8px}
.stat__val{font-size:clamp(25px,3cqw,34px);letter-spacing:-.8px}
.hero .wx-temp{font-size:clamp(42px,7cqw,58px);letter-spacing:-1.5px}
.modal__hero h2{letter-spacing:-.5px}

/* --- micro-rifiniture --- */
.chip{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tabs{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.row__ico,.card__ico,.notif__ico,.push__ico{border-radius:12px}
.checkitem{border-radius:16px}
.chat-card{border-radius:18px}
.bubble{border-radius:18px}
.msg--ai .bubble{border-top-left-radius:6px}
.msg--me .bubble{border-top-right-radius:6px}

/* =========================================================
   V4.1 — BRAND REFINEMENT: marchio custom + wordmark serif
   ========================================================= */

/* marchio: badge in vetro con gradiente e àncora disegnata a tratto fine */
.brand__logo,.tb-brand__logo{
  background:linear-gradient(160deg,#2b95ff 0%,#4d6ef5 55%,#5e5ce6 100%);
  position:relative;
  box-shadow:0 6px 16px rgba(45,90,220,.38), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,40,.15)}
.brand__logo svg,.tb-brand__logo svg{display:none}
.brand__logo::after,.tb-brand__logo::after{content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='10.5' r='4.2'/%3E%3Cpath d='M24 14.7 L24 41'/%3E%3Cpath d='M15 21.5 L33 21.5'/%3E%3Cpath d='M9.5 28 C10.5 38.5 16 41.2 24 41.6 C32 41.2 37.5 38.5 38.5 28'/%3E%3C/svg%3E") center/60% no-repeat}
/* riflesso speculare sul badge */
.brand__logo::before,.tb-brand__logo::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(80% 60% at 30% 12%,rgba(255,255,255,.42),transparent 60%);pointer-events:none}

/* wordmark: Jost, geometrico stile Futura — lusso nautico, caps spaziate */
.brand__text strong,.tb-brand strong{
  font-family:'Jost','Inter Tight',sans-serif;font-weight:500;
  letter-spacing:3px;font-size:17.5px;color:var(--text);text-transform:uppercase}
.tb-brand strong{font-size:16.5px;letter-spacing:2.6px}
.brand__text small{letter-spacing:2.4px;font-size:11.5px;font-family:'Jost',sans-serif;font-weight:500}

/* coerenza: brand anche nel report PDF */
#printReport .pr-brand{font-family:'Jost',sans-serif;font-weight:500;letter-spacing:3px;text-transform:uppercase;font-size:22px}

/* =========================================================
   V4.2 — FIX DROPDOWN / SELECT
   ========================================================= */

/* niente anello di focus del sistema operativo (era arancione):
   focus ring brand ovunque */
:root{accent-color:var(--sea-500)}
select:focus,select:focus-visible,
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:none}
button:focus-visible,a:focus-visible{box-shadow:0 0 0 3px rgba(10,132,255,.35)}

/* select standard: vetro coerente col resto della UI */
.select{
  background-color:var(--surface);
  backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);
  border:1px solid var(--line);border-radius:999px;
  font-weight:600;color:var(--text);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2398989e' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.select:hover{border-color:var(--text-3)}
.select:focus{outline:none;border-color:var(--sea-500);
  box-shadow:0 0 0 3.5px rgba(10,132,255,.22);background-color:var(--surface)}

/* voci della tendina: niente eredità dal vetro, sfondo pieno leggibile */
.select option,.hero-sel option{background:#ffffff;color:#1d1d1f;font-weight:500}
[data-theme="dark"] .select option,[data-theme="dark"] .hero-sel option{background:#1e1e22;color:#f5f5f7}

/* selettore sull'hero: pill traslucida bianca, chevron bianco, focus bianco */
.hero-sel{border-radius:999px;background-color:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);font-weight:600}
.hero-sel:hover{background-color:rgba(255,255,255,.26)}
.hero-sel:focus{outline:none;border-color:rgba(255,255,255,.75);box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.hero-gps{border-radius:999px}

/* =========================================================
   LAYOUT REFINEMENT — struttura minimale
   (stesso linguaggio visivo, meno rumore)
   ========================================================= */

/* contenuto centrato con larghezza massima: niente widget stirati a tutto schermo */
.view>*{max-width:1140px;margin-left:auto;margin-right:auto}
#homeWidgets>div{max-width:1140px;margin:0 auto}

/* card più pulite: titolo semplice, senza chip-icona nell'intestazione */
.card__head>.card__ico{display:none}
/* eccezione: nel dettaglio di un porto la chip-icona ci sta e orienta (ancora, bussola) */
.view--osm-detail .card__head>.card__ico{display:grid}
.card__head{margin-bottom:12px}

/* azioni rapide: griglia di tile uniformi, icona e testo centrati */
.qa-label{font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-3);margin:4px 2px 10px}
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.qa-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
  padding:18px 12px;border-radius:18px;font-weight:600;font-size:15px;color:var(--text);cursor:pointer;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(28px) saturate(1.8);-webkit-backdrop-filter:blur(28px) saturate(1.8);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.65);
  transition:transform .2s ease, box-shadow .2s ease}
.qa-tile:hover{transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(20,30,60,.06), 0 20px 44px rgba(31,41,90,.14), inset 0 1px 0 rgba(255,255,255,.65)}
[data-theme="dark"] .qa-tile{background:rgba(26,26,36,.52);border-color:rgba(255,255,255,.12);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.09)}
[data-theme="dark"] .qa-tile:hover{box-shadow:0 4px 10px rgba(0,0,0,.25), 0 20px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.09)}
.qa-tile .card__ico{width:40px;height:40px;border-radius:13px}
.qa-tile>span:last-child{line-height:1.3}
@container app (max-width:520px){ .qa-grid{grid-template-columns:1fr 1fr} }


/* cambusa — voci con check (template reale "Standard Vela") */
.cb-item{display:flex;align-items:center;gap:11px;padding:8px 2px;border-bottom:1px solid var(--line-2);cursor:pointer}
.cb-item:last-child{border-bottom:none}
.cb-item .cbox{width:22px;height:22px;flex:0 0 auto}
.cb-item.done .cbox{background:var(--green-500);border-color:var(--green-500)}
.cb-item.done .cbox svg{opacity:1;transform:scale(1)}
.cb-item.done .cb-name{text-decoration:line-through;color:var(--text-3)}
.cb-name{flex:1;font-size:15.5px}
.cb-q{font-weight:700;font-size:15px;white-space:nowrap}


/* ============ WIDGET HOME PERSONALIZZABILI + editor ============ */
.radar-mini,.anchor-mini{border-radius:14px;overflow:hidden;line-height:0;border:1px solid var(--line-2)}
.webcam{position:relative;line-height:0;min-height:150px}
.webcam svg{display:block;width:100%;height:100%}
.webcam__live{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:20px;font-size:12.5px;font-weight:800;letter-spacing:.5px;color:#fff;
  background:rgba(224,88,75,.92);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.webcam__cap{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;font-size:13.5px;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.5),transparent)}

/* editor widget (drawer) — righe con switch iOS + frecce riordino */
.wed-row{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px solid var(--line-2)}
.wed-row:last-child{border-bottom:none}
.wed-ico{width:34px;height:34px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--text-2)}
.wed-row.is-on .wed-ico{background:rgba(10,132,255,.12);border-color:rgba(10,132,255,.28);color:var(--sea-600)}
.wed-name{flex:1;font-size:15.5px;font-weight:600;display:flex;align-items:center}
.wed-tools{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.iconbtn--xs{width:30px;height:30px;border-radius:9px;background:var(--surface);border:1px solid var(--line);color:var(--text-2)}
.iconbtn--xs:disabled{opacity:.35;cursor:default}
.wed-toggle{width:44px;height:26px;border-radius:20px;background:var(--line);border:none;position:relative;cursor:pointer;transition:.18s;flex:0 0 auto}
.wed-toggle i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.wed-toggle.is-on{background:var(--green-500)}
.wed-toggle.is-on i{left:21px}

/* ============ "COSA MI PREPARO OGGI?" — ricette ============ */
.pill-toggle{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:999px;
  font-size:14.5px;font-weight:600;cursor:pointer;color:var(--text-2);
  background:var(--surface);border:1px solid var(--line);transition:.15s}
.pill-toggle:hover{border-color:rgba(10,132,255,.4)}
.pill-toggle.is-on{background:var(--sea-600);border-color:var(--sea-600);color:#fff}
.recipe-card{display:flex;flex-direction:column;gap:7px;text-align:left;padding:14px;border-radius:16px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);transition:transform .18s ease,box-shadow .18s ease}
.recipe-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.recipe-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:16px;font-weight:700;color:var(--text)}
.recipe-card__top .badge{padding:2px 6px}
.recipe-card__meta{font-size:14px;color:var(--text-3);display:flex;align-items:center;gap:6px}
.recipe-card__ing{font-size:14px;color:var(--text-2)}
.rc-have{color:#248a3d;font-weight:600}
.rc-miss{color:var(--sun-500,#ff9500);font-weight:600}
[data-theme="dark"] .rc-have{color:#30d158}
.recipe-steps{margin:0;padding-left:20px;font-size:15.5px;line-height:1.6;color:var(--text)}
.recipe-steps li{margin-bottom:7px}


/* ============ HOME chat-first: hero + plancia vuota ============ */
.home-hero{padding:22px 20px 14px;text-align:left}
.home-hero__badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--sea-600);background:rgba(10,132,255,.1);border:1px solid rgba(10,132,255,.2);
  padding:4px 10px;border-radius:20px;margin-bottom:12px}
.home-hero__title{font-family:var(--display);font-size:clamp(24px,5cqw,32px);font-weight:700;line-height:1.1;margin-bottom:6px}
.home-hero__lead{display:flex;align-items:center;gap:8px;font-size:17px;color:var(--text-2);font-weight:500}
.home-hero__lead svg{color:var(--sea-600);flex:0 0 auto}
.home-hero__actions{margin-top:14px}
.home-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin:8px 16px 6px;
  padding:26px 18px;border-radius:20px;border:1.5px dashed var(--line);background:var(--surface)}
.home-empty__ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:var(--sea-600);
  background:rgba(10,132,255,.1);border:1px solid rgba(10,132,255,.18)}
.home-empty__t{font-weight:700;font-size:17px;margin-top:4px}
.home-empty__s{font-size:15px;color:var(--text-3);max-width:340px;line-height:1.5}
.home-empty .btn{margin-top:8px}

/* ============ risposta AI "breve + Approfondisci" ============ */
.deepen-lead{font-weight:500}
.deepen-btn{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:5px 11px;border-radius:20px;
  font-size:14.5px;font-weight:600;color:var(--sea-600);background:rgba(10,132,255,.09);border:1px solid rgba(10,132,255,.18);cursor:pointer}
.deepen-btn svg{transition:transform .2s}
.deepen-btn.is-open svg{transform:rotate(90deg)}
.deepen-body{display:none;margin-top:10px}
.deepen-body.show{display:block;animation:deepenIn .22s ease}
@keyframes deepenIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============ empty-state sezioni non registrato ============ */
.locked{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  margin:40px auto;max-width:440px;padding:34px 24px;border-radius:24px;border:1.5px dashed var(--line);background:var(--surface)}
.locked__ico{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;color:var(--sea-600);
  background:rgba(10,132,255,.1);border:1px solid rgba(10,132,255,.18)}
.locked h2{font-family:var(--display);font-size:22px}
.locked p{font-size:15.5px;color:var(--text-3);line-height:1.55}
.locked .btn{margin-top:6px}
.locked__hint{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--text-3);margin-top:2px}


/* ============ onboarding: anteprima plancia ============ */
.ob-plancia{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.ob-wid{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 10px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--text-2)}
.ob-wid__ico{width:30px;height:30px;border-radius:10px;display:grid;place-items:center}
.ob-demo{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:8px 12px;border-radius:12px;font-size:14.5px;
  color:var(--sea-600);background:rgba(10,132,255,.09);border:1px solid rgba(10,132,255,.18)}


/* ============ cambusa: aggiungi prodotto + rimuovi voce ============ */
.cb-add{display:flex;gap:8px;margin-bottom:12px}
.cb-add .input{flex:1;height:38px}
.cb-add .btn{flex:0 0 auto;height:38px}
.cb-del{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  color:var(--text-3);opacity:.55;transition:.15s;background:transparent;border:none;margin-left:2px}
.cb-item:hover .cb-del{opacity:1}
.cb-del:hover{color:var(--red-500,#ff3b30);background:rgba(255,59,48,.1)}


/* ============ logbook: questionario vocale ============ */
.quiz-flow{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;padding:4px 2px}
.quiz-q,.quiz-a{display:flex;gap:8px;align-items:flex-end}
.quiz-a{justify-content:flex-end}
.quiz-av{width:28px;height:28px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--sea-600)}
.quiz-bubble{max-width:78%;padding:9px 13px;border-radius:16px;font-size:15.5px;line-height:1.45;
  background:var(--surface);border:1px solid var(--line)}
.quiz-bubble--me{background:var(--sea-600);color:#fff;border-color:transparent;display:inline-flex;align-items:center;gap:8px}
.quiz-listen{opacity:.9;font-style:italic}
.rec-wave.sm{gap:2px}
.rec-wave.sm i{width:2.5px;height:12px}
.spec-badge{font-size:12px}


.push--alert{border-color:rgba(255,59,48,.4)!important;box-shadow:0 8px 30px rgba(255,59,48,.22),var(--shadow-lg)}
.push--alert .push__ico{animation:radarPulse 1.4s ease-in-out infinite}


/* hero title con icona chat inline (feedback Gianni: "chiedimi qualunque cosa sulla nautica" come titolo) */
.home-hero__title{display:flex;align-items:center;gap:10px}
.home-hero__title svg{color:var(--sea-600);flex:0 0 auto}

/* ============ SEGMENTED CONTROL (check-up: pre-partenza / chiusura) ============ */
.seg{display:inline-flex;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px}
.seg__btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 16px;border:0;border-radius:999px;
  background:transparent;color:var(--muted);font-weight:600;font-size:15px;cursor:pointer;transition:.18s}
.seg__btn svg{opacity:.85}
.seg__btn:hover{color:var(--text)}
.seg__btn.is-on{background:var(--sea-600);color:#fff}
.seg__btn.is-on svg{opacity:1}

/* ============ CASSETTA MEDICINALI / FARMACIA DI BORDO ============ */
.medkit__alert{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.medkit__alert>div:not(.spacer){display:flex;flex-direction:column;gap:2px}
.medkit__alert .btn{white-space:nowrap}
.medkit__alert--bad{border-left:4px solid var(--coral-500)}
.medkit__alert--warn{border-left:4px solid var(--sun-500)}
.medkit__alert--ok{border-left:4px solid var(--green-500)}
.medlist{display:flex;flex-direction:column}
/* titolo del gruppo di dotazioni (soccorso/emergenza/attrezzatura): deve
   leggersi come un'etichetta, non come una voce dell'elenco sotto */
.equip-group{font-size:14px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:6px}
.medrow{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"main qty badge" "main exp badge";
  align-items:center;column-gap:10px;row-gap:2px;padding:10px 0;border-top:1px solid var(--line-2)}
.medrow:first-child{border-top:0}
.medrow__main{grid-area:main;display:flex;flex-direction:column;gap:1px;min-width:0}
.medrow__main b{font-weight:600;font-size:15.5px}
.medrow__qty{grid-area:qty;white-space:nowrap;text-align:right}
.medrow__exp{grid-area:exp;text-align:right;white-space:nowrap}
.medrow .badge{grid-area:badge;justify-self:end}
.medrow--exp .medrow__main b{color:var(--coral-500)}
@media (max-width:560px){
  .medrow{grid-template-columns:1fr auto;grid-template-areas:"main badge" "qty exp"}
  .medrow__qty{text-align:left}
}

/* ============ WIDGET FASI LUNARI ============ */
.moon-w{display:flex;align-items:center;gap:12px;margin-top:4px}
.moon-emoji{font-size:40px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.18))}
.moon-main{display:flex;flex-direction:column;gap:1px}
.moon-main b{font-size:17px}
/* i quattro campi luna (Sorge, Tramonta, Piena, Nuova) in griglia 2×2 */
.moon-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:12px}
.moon-field{display:flex;flex-direction:column;gap:1px;min-width:0}
.moon-field span{font-size:14px}
.moon-field b{font-size:16px;white-space:nowrap}

/* ============ WIDGET PIANO VIAGGIO — strip tappe ============ */
.voy-strip{display:flex;align-items:center;gap:0}
.voy-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;border:2px solid var(--card,#fff)}
.voy-dot--ok{background:var(--green-500)}
.voy-dot--warn{background:var(--sun-500)}
.voy-dot--bad{background:var(--coral-500)}
.voy-seg{flex:1;height:2px;background:var(--line);min-width:14px}

/* ============ VISTA PIANO DI VIAGGIO ============ */
.voy-summary{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.voy-summary--warn{border-left:4px solid var(--sun-500)}
.voy-summary--ok{border-left:4px solid var(--green-500)}
.voy-summary>div:not(.spacer){display:flex;flex-direction:column;gap:2px}
.voy-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line-2);background:var(--surface)}
.voy-table{width:100%;border-collapse:collapse;min-width:640px;font-size:15.5px}
.voy-table th{text-align:left;font-weight:600;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;
  padding:12px 14px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.voy-table th svg{vertical-align:-2px;margin-right:3px}
.voy-table th.voy-day{color:var(--sun-500)}
.voy-table th.voy-night{color:var(--sea-600)}
.voy-row td{padding:12px 14px;vertical-align:top}
.voy-row td b{display:block;font-weight:600}
.voy-leg span,.voy-day span,.voy-night span{display:block;margin-top:2px}
.voy-row--warn{background:rgba(255,149,0,.05)}
.voy-row--bad{background:rgba(255,89,48,.06)}
.voy-note-row td{padding:0 14px 12px}
.voy-note{display:inline-flex;align-items:flex-start;gap:6px;font-size:14.5px;color:var(--muted);line-height:1.4}
.voy-note svg{flex:0 0 auto;margin-top:2px}
.voy-note--warn{color:#b25000}
.voy-note--bad{color:var(--coral-500)}
[data-theme="dark"] .voy-note--warn{color:#ff9f0a}
.voy-kv--warn{color:#b25000}
.voy-kv--bad{color:var(--coral-500)}
[data-theme="dark"] .voy-kv--warn{color:#ff9f0a}

/* ============ AZIONI CONTATTO DRAWER (porti) ============ */
.drawer-actions{display:flex;gap:8px;flex-wrap:wrap}
.drawer-actions .btn{flex:1 1 auto;justify-content:center;min-width:96px;text-decoration:none}

/* ============ NAV — nota mappa + azione cala ancora ============ */
.map-foot{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:12px 14px;flex-wrap:wrap}
.map-note{display:flex;align-items:flex-start;gap:6px;font-size:14px;color:var(--muted);line-height:1.4;margin:0;flex:1;min-width:200px}
.map-note svg{flex:0 0 auto;margin-top:2px}
.map-foot .btn{flex:0 0 auto}

/* ============ PIANO VIAGGIO — modalità CARD (tablet + mobile) vs TABELLA (desktop) ============ */
.voy-cards{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.voy-table-wrap{display:none}
.voy-card{display:flex;flex-direction:column;gap:10px}
.voy-card--warn{border-left:4px solid var(--sun-500)}
.voy-card--bad{border-left:4px solid var(--coral-500)}
.voy-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.voy-card__top b{font-weight:600;font-size:17px}
.voy-card__wx{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.voy-wx{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:14px;background:var(--surface-2)}
.voy-wx__k{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  display:flex;align-items:center;gap:4px;margin-bottom:3px}
.voy-wx__k svg{flex:0 0 auto}
.voy-wx--day .voy-wx__k{color:var(--sun-500)}
.voy-wx--night .voy-wx__k{color:var(--sea-600)}
.voy-wx b{font-weight:600;font-size:15.5px}
@container (max-width:520px){ .voy-card__wx{grid-template-columns:1fr} }
/* desktop largo → torna la tabella, via le card */
@container (min-width:1000px){
  .voy-table-wrap{display:block}
  .voy-cards{display:none}
}

/* dropdown menu — three dots menu pattern */
.dropdown{position:relative;display:inline-block}
.dropdown__btn{padding:4px}
.dropdown__menu{
  position:absolute;right:0;top:100%;margin-top:4px;
  background:var(--surface);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  min-width:180px;z-index:1000;
  box-shadow:var(--shadow)
}
.dropdown__item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;font-size:15.5px;color:var(--text);
  white-space:nowrap;cursor:pointer;
  border:none;background:none;width:100%;text-align:left;
  transition:background 150ms
}
.dropdown__item:first-child{border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.dropdown__item:last-child{border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.dropdown__item:hover{background:var(--surface-2)}
.dropdown__item--danger{color:var(--coral-500)}
.dropdown__item--danger:hover{background:rgba(255,107,107,.1)}

/* ═══════════ 2. RACCORDI DJANGO (ex app.css) ═══════════ */
/* Raccordi specifici della versione Django.
   `styles.css` resta il design system portato dal mockup: qui stanno solo le
   differenze dovute al fatto che ora il markup è server-side (link al posto di
   bottoni JS, form al posto di handler, ecc.). */

/* ============ TOKEN DI SPAZIATURA ============
   Una sola fonte di verità per i margini del contenuto. Nel mockup questi
   valori erano ripetuti a mano (.view 16px, #homeWidgets 16px, .home-hero
   20px) e infatti la home non si allineava alle altre pagine. */
:root {
  --page-pad-x: 16px;     /* margine orizzontale del contenuto, uguale ovunque */
  --page-pad-top: 18px;
  --content-max: 1024px;  /* quanto il frame: oltre non si va (vedi .frame) */
  --stack-gap: 18px;      /* respiro verticale fra i blocchi di una pagina */
  --read-max: 820px;      /* quanto e' larga una colonna di TESTO */
}

/* Tablet e desktop: cambiano larghezza utile e respiro, non la struttura.
   Le variabili si ridefiniscono su `.app`, che sta DENTRO il frame: il
   frame e' il container, e un elemento non risponde alla propria
   container query - messe su `.frame` restavano quelle di `:root` e la
   colonna di testo non si allargava (misurato: 820px anche a 1440).
   Le regole restano quelle di sopra — qui si spostano solo le variabili che
   quelle regole gia' leggono, cosi' non nascono due layout da allineare a
   mano (ADR-056, e il bug del 31/07 che quella strada l'aveva gia' provata). */
@container app (min-width:640px){
  .app{
    --page-pad-x: 28px;
    --page-pad-top: 24px;
    --stack-gap: 22px;
    --read-max: 900px;
  }
}
@container app (min-width:1024px){
  .app{
    --page-pad-x: 40px;
    --page-pad-top: 28px;
    --stack-gap: 26px;
    /* 1080 e non «tutto»: oltre i 100 caratteri per riga l'occhio perde
       il capo della riga successiva, ed e' la ragione per cui i giornali
       incolonnano invece di stirare */
    --read-max: 1080px;
  }
}

/* le pagine "normali" e la home devono partire dallo stesso margine */
.view {
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
  padding-top: var(--page-pad-top);
}
/* la home è una chat a tutta altezza: il padding lo mettono i suoi blocchi */
.view--chat {
  padding: 0;
}
.home-hero {
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}
.home-widgets {
  padding: 0 var(--page-pad-x) var(--stack-gap);
}
.home-widgets > .grid {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* icone: nello sprite l'elemento è <svg><use/></svg> */
.ico {
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
}

/* chip sopra la card meteo (sfondo scuro) */
.chip--onhero {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}

/* tessere "Cosa vuoi fare?" — nel mockup erano bottoni con stile inline */
.qa-tile {
  height: auto;
  padding: 14px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 150px;
  flex: 1;
  text-decoration: none;
}

/* il segmented control ora è fatto di link, non di bottoni */
.seg__btn {
  text-decoration: none;
}

/* le voci di check-up sono <button> dentro un form: azzero lo stile nativo */
.checkitem {
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* le card dei porti sono link */
.card.clk {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* la lingua è un form: i bottoni devono sembrare il toggle del mockup */
.langtoggle button {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* risposta chat: <details> nativo al posto del toggle JS */
.deepen > summary {
  cursor: pointer;
  list-style: none;
}
.deepen > summary::-webkit-details-marker {
  display: none;
}

/* ============ FORM, MESSAGGI, AZIONI DISTRUTTIVE ============ */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.form-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  color: var(--coral-500);
  margin-top: 6px;
}
.messages { margin-bottom: 16px; }
.message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 15.5px;
  font-weight: 500;
  background: rgba(52, 199, 89, .12);
  color: #248a3d;
}
.message--error { background: rgba(255, 59, 48, .1); color: var(--coral-500); }
[data-theme="dark"] .message { color: #30d158; }

.btn--danger { background: var(--coral-500); border-color: var(--coral-500); color: #fff; }
.btn--danger:hover { filter: brightness(1.05); }

/* il logout è un form: il bottone deve stare in riga con le altre icone */
.logout-form { display: inline-flex; }

/* i bottoni-icona delle card fornitori sono link */
a.iconbtn { display: inline-grid; place-items: center; text-decoration: none; }

/* azioni in coda a una riga di elenco: in orizzontale, non impilate
   (.row__end del design system è una colonna: serve un contenitore suo) */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: 10px;
}

/* la cassetta medicinali ora è modificabile: la griglia di riga ha una colonna
   in più per le azioni (senza, finivano a capo su una riga tutta loro) */
.medrow {
  grid-template-columns: 1fr auto auto auto;
  grid-template-areas:
    "main qty badge actions"
    "main exp badge actions";
}
.medrow .row-actions {
  grid-area: actions;
  align-self: center;
}
@media (max-width: 560px) {
  .medrow {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "main   badge"
      "qty    exp"
      "actions actions";
  }
  .medrow .row-actions { justify-content: flex-end; margin-left: 0; }
}

/* --- carta nautica (Leaflet + OpenSeaMap) --------------------------------- */
.seamap {
  /* la carta è la pagina, non una figurina: prende l'altezza che c'è, tolta
     la testata e il resto della card (call 2026-07-15). Il bottone schermo
     intero resta, per togliere di mezzo anche quelli. */
  height: clamp(320px, calc(100dvh - 260px), 900px);
  border-radius: 14px;
  /* z-index:0 crea uno stacking context: i pane di Leaflet (z 200-1000)
     restano confinati qui dentro e non coprono sidebar (z70) e dock (z50) */
  position: relative;
  z-index: 0;
  background: var(--bg-2, #e8eef2);
}
.seamap--mini { height: 240px; }
/* fuori dalla card: senza header né padding attorno, prende più altezza */
.seamap--page { height: clamp(400px, calc(100dvh - 150px), 1100px); }
/* pagina navigazione = solo carta: riempie l'altezza residua, niente scroll.
   La view è già flex-column: la mappa cresce a riempirla, senza scroll. */
/* Navigazione a tutto schermo: la carta è la view intera, i chip le
   galleggiano sopra e la dock in basso resta scoperta.
   --dock-gap = spazio che la carta lascia libero in fondo per la barra. */
.view--map {
  overflow: hidden;
  padding: 0;
  position: relative;
}
.view--map .seamap--page {
  position: absolute;
  inset: 0;                        /* bordo a bordo, fino in fondo sotto la dock */
  width: auto;
  max-width: none;                 /* annulla il .view>* 1140px centrato */
  height: auto;
  border-radius: 0;
  /* z:0 crea lo stacking context di Leaflet; la dock (z:50) resta sopra */
  z-index: 0;
}
/* i chip Ancora/Meteo galleggiano sopra la carta, dov'erano prima */
.view--map .page-head--float {
  position: absolute;
  inset: 14px 14px auto 14px;
  z-index: 5;
  margin: 0;
  display: flex;
  justify-content: flex-end;       /* pill a destra: a sinistra ci sono i controlli mappa */
  pointer-events: none;            /* i buchi tra i chip non catturano il tocco */
}
.view--map .page-head--float .chip { pointer-events: auto; }
/* seconda pill (Fondali/Mappa) sotto la prima (Carta/Meteo), sempre a destra */
.view--map .page-head--float2 { top: 62px; }

/* Controlli mappa (zoom ×2, posizione, layer, meteo): tutti a sinistra in
   alto, rotondi, solo icona, bianco pieno con icona nera. Flat: niente
   bordi, vetro o ombre. !important per battere leaflet.css (vendor). */
.seamap .leaflet-bar,
.seamap .leaflet-control-layers {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}
.seamap .leaflet-bar a,
.seamap .leaflet-control-layers-toggle {
  width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  border: none !important;
  border-bottom: none !important;      /* leaflet mette un divisore grigio */
  border-radius: 50% !important;       /* batte i :first/last-child a 4px */
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
  font-weight: 600;
}
/* lo zoom è due bottoni impilati: rotondi entrambi e staccati */
.seamap .leaflet-bar a + a { margin-top: 6px; }
.seamap .leaflet-bar a:hover,
.seamap .leaflet-bar a:focus,
.seamap .leaflet-control-layers-toggle:hover {
  background: #f4f4f4 !important;
  color: #000 !important;
}
/* pannello layer aperto: bianco piatto */
.seamap .leaflet-control-layers-expanded {
  border: none !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
  padding: 10px 12px;
}
.seamap-locate { font-size: 20px; line-height: 38px; text-align: center; }
/* il controllo Meteo mostra un'icona svg: flex per centrarla nel tondo */
.seamap-meteo-ctl {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.seamap-meteo-ctl svg { width: 18px; height: 18px; }
/* icona layer: la sprite PNG di leaflet è chiara e sparisce sul bianco;
   la sostituisco con un glifo scuro centrato */
.seamap .leaflet-control-layers-toggle {
  background-image: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.seamap .leaflet-control-layers-toggle::before {
  content: "▤";
  font-size: 21px;
  line-height: 1;
  color: #000;
}

/* --- cambusa alla Bring!: tessere tappabili ------------------------------- */
.bring-grid {
  display: grid;
  /* due colonne fisse: le voci si leggono meglio affiancate a coppie */
  grid-template-columns: 1fr 1fr;
  /* righe di altezza uguale: un nome lungo non alza la sua riga sulle altre */
  grid-auto-rows: 1fr;
  gap: 8px;
}
/* ogni tessera vive dentro il suo form: è il form a essere la cella, quindi
   deve passare l'altezza al bottone o le tessere restano di misure diverse */
.bring-grid > form { display: grid; }
@media (max-width: 480px) {
  .bring-grid { grid-template-columns: 1fr; }
}
/* le righe «da comprare» stanno in colonna singola: con lo stepper −/+ sono
   più larghe, e una sotto l'altra si scorrono meglio della griglia a coppie */
.bring-grid--rows { grid-template-columns: 1fr; grid-auto-rows: auto; }
/* Righe, non pulsantoni: una cambusa vera ha centinaia di voci, e la tessera
   quadrata costringeva a scorrere all'infinito (call 2026-07-23). Nome a
   sinistra, quantità a destra, sulla stessa riga. */
.bring-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  height: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(14, 122, 168, .18);
  border-radius: 10px;
  background: rgba(14, 165, 207, .06);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: transform .06s ease, background .15s ease;
}
.bring-tile:active { transform: scale(.98); }
.bring-tile b {
  font-size: 15.5px;
  line-height: 1.3;
  min-width: 0;                      /* un nome lungo va a capo, non sfonda */
  overflow-wrap: anywhere;
}
.bring-tile span {
  font-size: 14px;
  opacity: .7;
  white-space: nowrap;               /* «0,40 kg» non si spezza */
  flex: 0 0 auto;
}
.bring-tile--in {
  background: rgba(14, 122, 168, .16);
  border-color: rgba(14, 122, 168, .45);
  box-shadow: inset 0 0 0 1px rgba(14, 122, 168, .35);
}
.bring-tile--done {
  opacity: .55;
  background: rgba(34, 176, 125, .10);
  border-color: rgba(34, 176, 125, .35);
}
.bring-tile--done b { text-decoration: line-through; }

/* Badge di categoria dei porti: stessi colori dei marker sulla carta
   (LAYERS in core/views.py), così lista e mappa si leggono insieme. */
.badge--marina { background: rgba(14, 159, 216, .14); color: #0b7ba3; }
.badge--harbour { background: rgba(18, 58, 99, .14); color: #123a63; }
.badge--mooring { background: rgba(208, 154, 44, .16); color: #8a6316; }
[data-theme="dark"] .badge--marina { color: #4cc3ea; }
[data-theme="dark"] .badge--harbour { color: #7fa8d8; }
[data-theme="dark"] .badge--mooring { color: #e3b558; }

/* Scheda dettaglio di un oggetto OSM (porti/marine/ormeggi): un campo per riga,
   "Etichetta: valore" con l'etichetta in grassetto. */
.osm-fields__row { padding: 7px 0; border-bottom: 1px solid var(--surface-2); line-height: 1.5; word-break: break-word; }
.osm-fields__row:last-child { border-bottom: none; }
.osm-fields__row b { font-weight: 700; }

/* Card porti interamente cliccabile (pattern "stretched link"): la card resta
   un div, un <a> vuoto si stira a coprirla, i contatti stanno sopra e restano
   cliccabili a parte. */
.port-card { position: relative; }
.port-card__stretch { position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; }
.port-card:hover { border-color: var(--sea-400); }
.port-card__chips { position: relative; z-index: 2; }

/* La card "A pochi MN" è già un <a> (nessun link annidato dentro). */
.port-card--link { display: block; color: inherit; text-decoration: none; }
.port-card--link:hover { border-color: var(--sea-400); }
.badge--anchorage { background: rgba(46, 158, 91, .15); color: #24774a; }
[data-theme="dark"] .badge--anchorage { color: #5cc888; }

.seg--tabs { display: inline-flex; }

/* Pulsante «livelli della carta» (3 puntini): galleggia sulla mappa come
   faceva il vecchio tab Carta/Meteo (modello Windy). */
.iconbtn--onmap {
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  pointer-events: auto; box-shadow: var(--shadow);
}
[data-theme="dark"] .iconbtn--onmap { background: rgba(28, 30, 34, .92); }

/* Il selettore dell'ora: in basso a destra e RIALZATO sopra la dock, che
   su telefono occupa la fascia bassa (call 2026-08-21). La barra si apre
   a sinistra del pulsante, dove c'e' spazio: aprendola verso il basso
   finirebbe sotto la dock. */
.orologio{position:absolute;right:12px;bottom:88px;z-index:600;
  display:flex;align-items:center;gap:8px;flex-direction:row-reverse}
.orologio__barra{display:flex;align-items:center;gap:6px;padding:5px 8px;
  border-radius:22px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);box-shadow:var(--shadow)}
[data-theme="dark"] .orologio__barra{background:rgba(28,30,34,.94)}
.orologio__passo{width:30px;height:30px;font-size:19px;line-height:1;
  border-radius:50%;color:var(--text)}
/* tabular-nums: senza, l'ora balla a ogni cifra che cambia */
.orologio__quando{font-size:13.5px;font-weight:600;min-width:74px;
  text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.orologio__adesso{padding:3px 10px;font-size:12.5px}
@media (max-width:420px){
  .orologio__barra{padding:4px 6px}
  .orologio__quando{min-width:66px;font-size:13px}
}

/* Su certi telefoni il pannello usciva dallo schermo: tetto all'80% in
   entrambe le direzioni, col corpo che scorre se i livelli non ci stanno */
.layers-modal { width: min(360px, 80%); max-width: 80%; max-height: 80%;
  display: flex; flex-direction: column; }
.layers-modal__body { display: flex; flex-direction: column; gap: 16px;
  padding: 4px 20px 20px; overflow-y: auto; }
/* la riga di un livello: si accende quando è visibile, così si vede cosa è
   attivo senza leggere la posizione di ogni manopola */
.layer-slider { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; }
.layer-slider__label { font-size: 15px; color: var(--text-2); }
.layer-slider__value { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.layer-slider input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--sea-500); }
.layer-slider.is-on { border-color: var(--sea-500); background: color-mix(in srgb, var(--sea-500) 8%, transparent); }
.layer-slider.is-on .layer-slider__label { color: var(--text); font-weight: 600; }
.layer-slider.is-on .layer-slider__value { color: var(--sea-500); font-weight: 700; }

/* Riga della lista attiva: nome tappabile a sinistra, quantità correggibile
   a destra (call 2026-07-23: «due chili sono troppo pochi»). */
/* Riga prodotto «da comprare»: una sola pill coi segmenti attaccati, nell'ordine
   «−  Nome  qty  +». Bordo tondo solo agli estremi (primo e ultimo segmento). */
.qpill {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); overflow: hidden; min-height: 40px;
}
.qpill__form { display: flex; }
.qpill__btn {
  width: 40px; border: none; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--sea-600);
  display: grid; place-items: center; transition: background .12s ease;
}
.qpill__btn:hover { background: var(--surface-2); }
.qpill__btn--minus { border-right: 1px solid var(--line); }
.qpill__btn--plus  { border-left: 1px solid var(--line); }
/* il nome riempie il centro, tocco = nel carrello: è il button stesso */
.qpill__name {
  flex: 1; min-width: 0; border: none; background: none; cursor: pointer;
  text-align: left; padding: 0 12px; font: inherit; color: inherit;
  display: flex; align-items: center; overflow: hidden;
}
.qpill__name b { font-size: 15.5px; overflow-wrap: anywhere; }
.qpill__name:hover { background: var(--surface-2); }
/* la quantità, subito prima del «+» */
.qpill__val {
  flex: 0 0 auto; display: grid; place-items: center;
  padding: 0 10px; font-size: 14.5px; font-variant-numeric: tabular-nums;
  color: var(--text-2); white-space: nowrap;
}
/* voce comprata: barrata e spenta, resta nella sua card (niente carrello) */
.qpill--bought { opacity: .55; }
.qpill--bought .qpill__name b { text-decoration: line-through; }

/* ============ NIENTE MODALITÀ DESKTOP ============
   Il frame si ferma a 1024px (vedi in cima): sopra quella soglia non c'è una UI
   diversa, si vede la stessa del telefono centrata nello schermo. Quindi la
   sidebar resta un drawer e la dock resta in fondo a ogni larghezza — le regole
   che su desktop le trasformavano in colonna sono state tolte, insieme al loro
   bug (`.app` era una grid `280px 1fr` ma la sidebar sta fuori da `.app`, così
   il contenuto finiva schiacciato nei 280px). Le voci `desktop-nav` restano
   nascoste: duplicherebbero la dock, che ora c'è sempre. */
.desktop-nav { display: none; }

/* Barra tab dei porti: su schermi stretti i 4 tab scorrono in orizzontale
   invece di sforare fuori dalla pagina (l'overflow degli ancoraggi su mobile). */
.seg--ports {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;              /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.seg--ports::-webkit-scrollbar { display: none; }   /* WebKit */
.seg--ports .seg__btn { flex: 0 0 auto; white-space: nowrap; }

/* Home: barra del prompt più larga e prominente, con un titolo sopra (stile
   Claude) — «Chiedi di nautica a Pigafetta». Fix Pigafetta 2026-07-25. */
/* 960 era un numero fisso, e da quando la colonna del testo si allarga
   su desktop (1080) il campo di scrittura restava piu' stretto delle
   bolle sopra: si vedeva disallineato. Segue la stessa variabile. */
.compose__inner--wide { max-width: var(--read-max, 960px); }

/* Copia la risposta: appare passando sopra il messaggio, o sempre su
   touch dove il passaggio del dito non esiste. */
.chat-msg--ai{position:relative}
.chat-msg__copia{
  position:absolute;top:6px;right:6px;width:28px;height:28px;
  display:grid;place-items:center;border-radius:8px;
  color:var(--text-3);opacity:0;transition:opacity .15s;
  background:var(--surface);
}
.chat-msg--ai:hover .chat-msg__copia,
.chat-msg__copia:focus-visible{opacity:.85}
@media (hover:none){ .chat-msg__copia{opacity:.55} }

/* elenco chat: la riga apre, il pulsante accanto elimina */
/* ricerca nelle chat: il campo prende lo spazio, i bottoni no */
.composebar__clip.ha-file{color:var(--sea-500);background:rgba(10,132,255,.12)}
/* il nome del file scelto, accanto alla graffetta: senza, non si vede
   che l'allegato c'e' e si manda il messaggio credendo di averlo perso */
.composebar__clip-nome{max-width:52vw;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:12.5px;color:var(--text-3)}
/* dettatura in corso: il microfono pulsa, cosi' si vede che sta ascoltando */
.composebar__mic.in-ascolto{color:#fff;background:var(--coral-500);
  animation:micPulsa 1.4s ease-in-out infinite}
@keyframes micPulsa{0%,100%{box-shadow:0 0 0 0 rgba(255,100,89,.5)}
  50%{box-shadow:0 0 0 7px rgba(255,100,89,0)}}
@media (prefers-reduced-motion:reduce){.composebar__mic.in-ascolto{animation:none}}
/* Cosa sta facendo la dettatura, accanto alla graffetta. Tabular-nums
   sul conto dei secondi: senza, la riga balla a ogni cifra che cambia. */
.composebar__detta-stato{font-size:12.5px;color:var(--text-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:46vw}

.chat-cerca{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.chat-cerca .input{flex:1;min-width:0}

.row--conv{display:flex;align-items:center;gap:6px}
.row--conv .row__link{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.compose__title {
  text-align: center;
  font-family: var(--display, inherit);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
}
.composebar--lg {
  border-radius: 28px;
  padding: 10px 10px 10px 20px;
}
/* input chat più alto in home: circa 2,5× l'altezza di una riga singola.
   min-height sul textarea (non altezza fissa: cresce ancora scrivendo, fino a
   max-height). Niente align-items qui: la barra ora e' una colonna, e un
   flex-start ci schiaccerebbe i comandi tutti a sinistra invece di tenere
   la graffetta a un capo e dettatura e invio all'altro. */
.composebar--lg textarea {
  font-size: 17.5px; padding: 10px 0;
  min-height: 105px; max-height: 260px;
}

/* Marker della base «Custom»: un simbolo SVG per categoria (map-sprite.svg),
   al posto del pallino, senza sfondo né bordo. --pins-op viene dallo slider
   «Icone sulla carta» nel pannello livelli (app.js), 1 di default. */
.seamark-sym {
  opacity: var(--pins-op, 1);
}
.seamark-sym span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}
.seamark-sym svg { width: 100%; height: 100%; }

/* TEMPORANEO (testing): indicatore livello di zoom su «Custom», a destra sotto
   i pulsanti Carta/Meteo e Fondali/Chiara. Da rimuovere. */
.zoom-badge {
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font: 700 13px/1 var(--mono, monospace);
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
/* le due pill stanno a top 14 e 62 (alte ~40): il badge va sotto, a destra */
.view--map .leaflet-top.leaflet-right .zoom-badge {
  margin-top: 96px;
  margin-right: 14px;
}

/* ═══════════ 3. EX <style> INLINE (spostati dai template) ═══════════ */

/* --- ex checkup.html --- */
/* la matita spinge sé stessa e il «+» a destra dell'header */
.checkup-lists .card__head .section-edit { margin-left: auto; }
.checkup-lists { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }

/* modifica/elimina delle righe: nascosti finché non si preme la matita della
   sezione (che mette .is-editing sulla card) */
.checkup-section .row-actions { display: none; }
.checkup-section.is-editing .row-actions { display: inline-flex; }

/* card comprimibili in cambusa: <details>/<summary> al posto del div, niente
   marker nativo (freccia disegnata a mano, ruota quando aperta), «+» a destra */
.section-collapsible > summary { list-style: none; cursor: pointer; }
.section-collapsible > summary::-webkit-details-marker { display: none; }
.section-collapsible .card__head .section-add { margin-left: auto; }
/* la freccia compare solo se la sezione ha voci: vuota non si comprime */
.section-collapsible.has-items > summary::after {
  content: ""; width: 8px; height: 8px; margin-left: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s ease;
}
.section-collapsible.has-items[open] > summary::after { transform: rotate(-135deg); }
/* sezione vuota: il summary non deve reagire da toggle (niente contenuto) */
.section-collapsible:not(.has-items) > summary { cursor: default; }

/* barra di ricerca dentro il modale «Aggiungi prodotto» */
.list-switch__search { padding: 12px 14px 4px; }
.list-switch__search .input { width: 100%; }
.list-switch__item small { margin-left: auto; }
/* matita premuta: evidenziata, così si vede che la sezione è in modifica */
.section-edit[aria-pressed="true"] { background: var(--surface-2); color: var(--sea-600); }
.checkup-picker { flex: 1; min-width: 0; font-weight: 600; }

/* --- ex meteo.html: place picker --- */
.place-picker { position: relative; }
.place-picker__panel {
  position: absolute; left: 0; top: 100%; margin-top: 6px;
  width: 300px; max-width: 90vw;
  background: var(--surface); backdrop-filter: blur(20px);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); z-index: 1000; padding: 10px;
}
.place-picker__search { margin-bottom: 8px; }
.place-picker__list { max-height: 280px; overflow-y: auto; }
.place-picker__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; font-size: 15.5px; color: var(--text);
  cursor: pointer; border-radius: var(--radius-sm); transition: background 150ms;
}
.place-picker__item:hover { background: var(--surface-2); }
.place-picker__star { cursor: pointer; color: var(--sun-500); flex: 0 0 auto; font-size: 1.5em; line-height: 1; }

/* ═══════════ 4. UTILITY (sostituiscono gli style="" statici ricorrenti) ═══════════ */

/* larghezze massime dei blocchi di form/testo */
.mw-280 { max-width: 280px; }
.mw-320 { max-width: 320px; }
.mw-420 { max-width: 420px; }
.mw-480 { max-width: 480px; }
.mw-520 { max-width: 520px; }
.mw-560 { max-width: 560px; }
.mw-720 { max-width: 720px; }

/* margini verticali ricorrenti */
.mt-4 { margin-top: 4px; }  .mt-6 { margin-top: 6px; }  .mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; } .mt-18 { margin-top: 18px; } .mt-22 { margin-top: 22px; }
.mb-6 { margin-bottom: 6px; }  .mb-8 { margin-bottom: 8px; }  .mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; } .mb-14 { margin-bottom: 14px; } .mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.m-0 { margin: 0; }

/* flex helper per righe di form */
.fx-1 { flex: 1; }
.fx-1-min { flex: 1; min-width: 160px; }
.jc-center { justify-content: center; }
.fw-wrap { flex-wrap: wrap; }

/* blocco centrato (empty state / hero piccola) */
.center-block { text-align: center; }
.empty-pad { text-align: center; padding: 48px 24px; }

/* barra di avanzamento: la larghezza arriva da --w (dato dinamico dal template) */
.bar__fill { width: var(--w, 0%); }

/* pill categoria: colore da --cat (dato dinamico dal template) */
.cat-chip { background: color-mix(in srgb, var(--cat) 13%, transparent); color: var(--cat); }
.cat-text { color: var(--cat); }

/* card di conferma eliminazione: stretta, con barra corallo a sinistra.
   Il bottone di conferma usa .btn--danger, già definito nel design system. */
.card--confirm { max-width: 480px; border-left: 4px solid var(--coral-500); }

/* messaggio "nessun avviso" nel popover notifiche (ex style inline base.html) */
.notif-empty { padding: 10px 14px; }

/* opacità testo attenuato */
.op-70 { opacity: .7; }
.op-85 { opacity: .85; }
.op-90 { opacity: .9; }

/* larghezze fisse ricorrenti nei form */
.w-90 { width: 90px; }
.w-full { width: 100%; }

/* gap one-off */
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }

/* peso font medio ricorrente */
.fw-500 { font-weight: 500; }

/* margine sinistro piccolo (chip inline) */
.ml-6 { margin-left: 6px; }

/* testo in colore corallo (avvisi) */
.t-coral { color: var(--coral-500); }

/* variante flessibile con min-width 150px (campi form stretti) */
.fx-1-min150 { flex: 1; min-width: 150px; }

/* status: griglia schede pagine e label criteri */
.status-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.status-crit { font-weight: 500; font-size: 15.5px; }
.status-miss { font-weight: 500; font-size: 15px; }

/* costi: intestazione categoria nel raggruppamento spese */
.costs-cat-head { margin: 14px 0 4px; }

/* logbook: padding lista voci e valore miglia evidenziato */
.log-list { padding: 6px 18px; }
.log-miles { font-size: 18px; font-family: var(--display); }

/* logbook su mobile: la riga a 4 colonne (icona · testo · miglia · azioni) si
   stringe e va a capo brutta. Sotto i 640px si dispone in griglia: icona +
   testo in alto con le miglia a destra, i pulsanti su una riga sotto. */
@container (max-width:640px){
  .log-list .row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"ico main miles" "ico main actions";
    align-items:start; column-gap:12px; row-gap:2px;
  }
  .log-list .row>.row__ico{grid-area:ico;align-self:center}
  .log-list .row>.row__main{grid-area:main;min-width:0}
  .log-list .row>.row__end{grid-area:miles;align-items:flex-end}
  .log-list .row>.row-actions{grid-area:actions;justify-self:end;margin:2px 0 0}
  .log-list .row__main span{display:block}
  .log-list .row-actions .iconbtn{width:32px;height:32px}
}

/* logbook: tabs a larghezza contenuto (non a piena riga) */
.tabs--auto { width: auto; }

/* navigazione: empty-state senza posizione */
.nav-empty__ico { width: 56px; height: 56px; margin: 0 auto 16px; }
.nav-empty__lead { margin: 0 auto 20px; }

/* ─── classi semantiche estratte dagli style inline dei template ─── */

/* porti: testo dello stato vuoto nel widget */
.ports-empty { padding: 6px 0; }
.ports-empty--share { padding-bottom: 10px; }

/* ---- porti vicini: layout a griglia dentro la cella --------------------- */
.home2-cell__body .ports-grid, .tw-cell__body .ports-grid {
  flex: 1; min-height: 0; display: grid;
}
.home2-cell__body .ports-cell, .tw-cell__body .ports-cell {
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(2px, 1cqmin, 6px); min-width: 0; overflow: hidden;
  padding: clamp(6px, 3cqmin, 16px);
}
.home2-cell__body .ports-cell__ico, .tw-cell__body .ports-cell__ico {
  width: clamp(24px, 8cqmin, 34px); height: clamp(24px, 8cqmin, 34px);
  display: grid; place-items: center; border-radius: 8px; margin-bottom: 2px;
}
.home2-cell__body .ports-cell__ico svg, .tw-cell__body .ports-cell__ico svg { width: 55%; height: 55%; }
.home2-cell__body .ports-cell__name, .tw-cell__body .ports-cell__name {
  font-size: clamp(13px, 4.4cqmin, 18px); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home2-cell__body .ports-cell__meta, .tw-cell__body .ports-cell__meta {
  font-size: clamp(10px, 3.2cqmin, 13px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 1×1: due porti impilati (sopra/sotto), una sola divisoria orizzontale */
.wf-1x1 .ports-cell--extra { display: none; }
.wf-1x1 .ports-grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.wf-1x1 .ports-cell:first-child { border-bottom: 1px solid var(--line-2); }

/* 1×2: quattro porti a croce, divisorie a croce (1 verticale + 1 orizzontale) */
.wf-1x2 .ports-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.wf-1x2 .ports-cell:nth-child(odd)  { border-right: 1px solid var(--line-2); }
.wf-1x2 .ports-cell:nth-child(1),
.wf-1x2 .ports-cell:nth-child(2)    { border-bottom: 1px solid var(--line-2); }

/* lasttrip: rotta origine → destinazione in evidenza */
.lasttrip-route { font-size: 18px; font-weight: 700; }

/* editor widget: riga selezionabile, titolo e checkbox grande */
.row--pick { cursor: pointer; padding: 12px 14px; }
.widget-title { font-size: 18px; }
.widget-toggle { width: 24px; height: 24px; cursor: pointer; }

/* overview: card evidenziata in tinta sea */
.card--accent { background: rgba(14, 165, 207, .08); border-color: rgba(14, 165, 207, .2); }

/* settings: gruppo di segmenti largo quanto il contenuto */
.seg--fit { width: fit-content; }

/* suppliers: griglia a schede auto-fill e cella a piena larghezza */
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.grid-full { grid-column: 1 / -1; }

/* summary a pulsante nel form barca: piccolo margine verticale */
.summary-toggle { margin: 6px 0 14px; }

/* griglia dei dati tecnici della barca: colonne auto-fit, gap solo orizzontale */
.grid-tech { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }

/* testo introduttivo dell'onboarding: rientra un po' verso l'alto */
.intro-tight { margin: -2px 0 12px; }

/* mini-mappa nel dettaglio porto: altezza dedicata e angoli arrotondati */
.seamap--detail { height: 280px; border-radius: 12px; overflow: hidden; }

/* ═══════════ 5. CLASSI SEMANTICHE PAGINE (safety / cambusa / ports / boat) ═══════════ */

/* card informativa evidenziata in azzurro (safety, ports) */
.card--highlight { background: rgba(14,165,207,.08); border-color: rgba(14,165,207,.2); }

/* griglie auto-fit ricorrenti: la larghezza minima cambia per pagina */
.autofit-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.autofit-grid--220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.autofit-grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
/* elenco porti: colonne che si riempiono, minimo 290px */
.ports-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
/* elemento che occupa tutta la riga della griglia (empty state) */
.col-span-full { grid-column: 1 / -1; }

/* numero grande in stile display (recapiti emergenza, VHF) */
.safety-num { font-family: var(--display); font-size: 24px; font-weight: 800; margin: 4px 0; }
.safety-num--link { display: block; color: var(--sea-600); }
/* valore centrale della card contatto */
.safety-figure { font-family: var(--display); font-size: 26px; font-weight: 800; }
/* icona tonda centrata della card contatto */
.safety-contact__ico { width: 48px; height: 48px; margin: 0 auto 12px; }
/* etichetta sotto il numero della card contatto */
.safety-contact__title { display: block; margin: 6px 0 4px; }
/* numero progressivo delle linee guida */
.safety-step { font-weight: 800; font-family: var(--display); }
/* testo della linea guida: peso e dimensione dedicati */
.safety-guide-text { font-weight: 500; font-size: 15.5px; }
/* nota separata da una riga sopra */
.safety-divider-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* titolo sezione in stile display senza margini (cassetta medicinali) */
.title-display { font-family: var(--display); font-size: 24px; margin: 0; }

/* titolo card porto in stile display */
.port-card__title { font-family: var(--display); font-size: 18px; margin: 10px 0 4px; }
.port-card__title--sm { font-size: 17px; margin: 8px 0 2px; }
/* card porto vicino su sfondo semitrasparente */
.port-card--glass { background: rgba(255,255,255,.1); }
/* box di ricerca a larghezza contenuta */
.search--narrow { flex: 0 1 320px; }
/* nota fonte dati sopra l'elenco porti */
.ports-note { margin: 14px 0; }

/* riga chiave-valore che occupa lo spazio disponibile (impianti barca) */
.kv--fill { flex: 1; }

/* placeholder "coming soon" centrato con respiro verticale */
.coming-soon { text-align: center; padding: 24px 0; }

/* sottotitolo del modello barca sotto il titolo */
.boat-subtitle { margin: 2px 0 0; }
/* nota quota di archiviazione: rientra sotto il campo file */
.boat-storage-note { margin: -4px 0 8px; }
/* form inline (switch barca attiva) */
.d-inline { display: inline; }

/* ============================================================
   HOME SPERIMENTALE (/home/) — area widget 4×4 QUADRATA vera in alto, la barra
   di ricerca riempie lo spazio che avanza sotto. Niente scroll: topbar +
   quadrato 4×4 + bottomnav si disegnano per primi, la searchbar prende il resto.
   ============================================================ */
.view--home2 { padding: 0; overflow: hidden; }

.home2 {
  position: absolute; inset: 0; bottom: 64px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 16px;
  gap: 12px;
}

/* fascia della griglia, ancorata in alto; il resto va alla ricerca */
.home2__square {
  flex: 0 0 auto;
  min-height: 0;
  display: flex; align-items: flex-start; justify-content: center;
}

/* La griglia: 4 colonne, righe quadrate. Numero di righe (6 o 4) e altezza di
   riga (--cell) le decide JS (home2Grid), con un calcolo deterministico dallo
   spazio verticale reale — niente aspect-ratio né container query da indovinare.
   Le celle restano SEMPRE quadrate; se non c'è spazio per 6 righe se ne mostrano
   4 e le celle su righe 5-6 (home2-cell--tail) si nascondono. */
.home2__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, var(--cell, 1fr));
  grid-auto-rows: var(--cell, 1fr);
  grid-template-rows: repeat(var(--rows, 6), var(--cell, 1fr));
  min-height: 0; min-width: 0;
}
/* fuori dalle righe mostrate: la cella sparisce (mai schiacciata, mai tagliata) */
.home2__grid[data-rows="2"] .home2-cell[data-row="2"],
.home2__grid[data-rows="1"] .home2-cell[data-row="1"],
.home2__grid[data-rows="1"] .home2-cell[data-row="2"] { display: none; }

/* una cella: il widget dentro riempie e taglia l'overflow (niente scroll) */
.home2-cell {
  min-height: 0; min-width: 0;
  display: flex; position: relative;
}
/* container di dimensione: i widget dentro reagiscono alla misura della cella */
.home2-cell__body {
  flex: 1; min-width: 0; overflow: hidden; display: flex;
  container-type: size; container-name: cell;
}
.home2-cell__body > .card { flex: 1; margin: 0; overflow: hidden; }

/* Le due sole forme ammesse (altezza × larghezza): 1×1 (quadrato, mezza riga)
   e 1×2 (largo, tutta la riga). Il piazzamento sulla griglia lo scrive il
   template inline (grid-column/grid-row), non ci sono classi di forma. */

/* ============================================================
   WIDGET RESPONSIVI ALLA CELLA — tipografia e spaziature in unità container.
   Ogni cella (.home2-cell__body / .tw-cell__body) è un container `size` di
   nome `cell`. Dentro, font e gap sono espressi in cqmin (--u = 1% del lato
   minore della cella) invece che in px: così il widget scala con la sua misura,
   indipendente dalla dimensione vera del quadrato. clamp() tiene i limiti di
   leggibilità. Scoped alle celle: i widget sulla home vera restano invariati.
   ============================================================ */
.home2-cell__body, .tw-cell__body { --u: 1cqmin; }

/* --- tre livelli di dettaglio per forma di cella ---------------------------
   Agganciati alla CLASSE DI FORMA della cella (wf-1x1/wf-1x2/wf-4x4), non alla
   dimensione: così ogni forma è indipendente e si stila da sola. Nel 1×1
   restano solo gli elementi base; .w-3 compare nel 1×2 (largo). */
.wf-1x1 .w-3, .wf-1x1 .w-4,
.wf-1x2 .w-4 { display: none; }
/* alcuni contenuti (es. .boat-field) hanno un display:flex più a valle con pari
   specificità che rivincerebbe: qui rialziamo la specificità per tenerli nascosti */
.home2-cell__body.wf-1x1 .w-3, .home2-cell__body.wf-1x1 .w-4,
.home2-cell__body.wf-1x2 .w-4,
.tw-cell__body.wf-1x1 .w-3, .tw-cell__body.wf-1x1 .w-4,
.tw-cell__body.wf-1x2 .w-4 { display: none; }

/* i widget non hanno più testata (card__head): il corpo si centra
   verticalmente nella card che riempie la cella */
.home2-cell__body > .card,
.tw-cell__body > .card {
  padding: clamp(8px, 4cqmin, 18px);
  border-radius: clamp(10px, 3.5cqmin, 18px);
  display: flex; flex-direction: column; justify-content: center;
}
/* più trasparenti delle card normali: lasciano passare lo sfondo e le onde, così
   la barra di ricerca (opaca) resta l'elemento a fuoco */
.home2-cell__body > .card { background: rgba(255, 255, 255, .34); }
[data-theme="dark"] .home2-cell__body > .card { background: rgba(26, 26, 36, .36); }

/* testo corrente, etichette secondarie, valori */
.home2-cell__body .muted, .tw-cell__body .muted,
.home2-cell__body .fz13, .tw-cell__body .fz13,
.home2-cell__body .stat__sub, .tw-cell__body .stat__sub {
  font-size: clamp(10px, 3.4cqmin, 14px);
}
.home2-cell__body .stat__val, .tw-cell__body .stat__val {
  font-size: clamp(18px, 9cqmin, 34px);
}
.home2-cell__body .badge, .tw-cell__body .badge,
.home2-cell__body .chip, .tw-cell__body .chip {
  font-size: clamp(9px, 3cqmin, 13px);
}
.home2-cell__body .btn--sm, .tw-cell__body .btn--sm {
  font-size: clamp(10px, 3.2cqmin, 13px);
  padding: clamp(4px, 1.6cqmin, 8px) clamp(7px, 2.6cqmin, 12px);
}
.home2-cell__body .row, .tw-cell__body .row { gap: clamp(6px, 2.4cqmin, 12px); }

/* --- METEO nelle celle -----------------------------------------------------
   1×1: solo la temperatura, con l'icona posizione in alto a destra.
   1×2: temperatura + i valori (onda, hPa, vento) in fila sulla stessa riga. --- */
.home2-cell__body .wx-widget, .tw-cell__body .wx-widget { position: relative; }
/* icona posizione: sempre in alto a destra */
.home2-cell__body .wx-loc, .tw-cell__body .wx-loc {
  position: absolute; top: clamp(8px, 3cqmin, 16px); right: clamp(8px, 3cqmin, 16px);
  z-index: 2; opacity: .8; display: inline-flex;
}
.home2-cell__body .wx-loc svg, .tw-cell__body .wx-loc svg {
  width: clamp(14px, 5cqmin, 20px); height: clamp(14px, 5cqmin, 20px);
}
.home2-cell__body .wx-body--empty, .tw-cell__body .wx-body--empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: var(--text-2);
}
/* elementi comuni (font meteo +20% su richiesta) */
.home2-cell__body .wx-temp, .tw-cell__body .wx-temp {
  font-family: var(--display); font-weight: 600; line-height: 1;
  font-size: clamp(34px, 19.2cqmin, 72px); letter-spacing: -1px;
}
.home2-cell__body .wx-metric, .tw-cell__body .wx-metric {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15;
}
.home2-cell__body .wx-metric b, .tw-cell__body .wx-metric b {
  font-size: clamp(16px, 5.3cqmin, 22px); font-weight: 700; white-space: nowrap;
}
.home2-cell__body .wx-metric span, .tw-cell__body .wx-metric span {
  font-size: clamp(11px, 3.6cqmin, 14px); opacity: .75; white-space: nowrap;
}
.home2-cell__body .wx-metric svg, .tw-cell__body .wx-metric svg {
  width: clamp(16px, 5cqmin, 22px); height: clamp(16px, 5cqmin, 22px); flex: 0 0 auto;
}

/* ---- METEO 2×2: temp sopra, 3 valori sotto (niente pioggia), tutto
   centrato orizzontalmente ---- */
.wf-1x1 .wx-rain { display: none; }
.wf-1x1 .wx-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(8px, 4cqmin, 18px);
}
.wf-1x1 .wx-inline {
  display: flex; justify-content: center; gap: clamp(10px, 4cqmin, 22px);
}

/* ---- METEO 2×4: temp, onda, hPa, vento, pioggia in fila, centrati sia in
   verticale sia in orizzontale, senza andare a capo ---- */
.wf-1x2 .wx-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: clamp(14px, 5cqmin, 34px);
  flex-wrap: nowrap;
}
.wf-1x2 .wx-temp { flex: 0 0 auto; }
.wf-1x2 .wx-inline {
  display: flex; flex-direction: row; align-items: center;
  gap: clamp(14px, 5cqmin, 34px); flex-wrap: nowrap;
}

/* --- BARCA: nome in evidenza + field puliti (Modello/Carburante/Acqua/
   Autonomia). 2×2 mostra Carburante+Acqua; 2×4 tutti e 4 in fila. --- */
.home2-cell__body .boat-w, .tw-cell__body .boat-w {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(8px, 4cqmin, 16px);
}
.home2-cell__body .boat-head, .tw-cell__body .boat-head {
  display: flex; align-items: center; gap: clamp(6px, 2.5cqmin, 10px);
}
.home2-cell__body .boat-name, .tw-cell__body .boat-name {
  font-size: clamp(15px, 5.2cqmin, 24px); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.home2-cell__body .boat-head .row__ico, .tw-cell__body .boat-head .row__ico {
  flex: 0 0 auto;
}
.home2-cell__body .boat-field, .tw-cell__body .boat-field {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.home2-cell__body .boat-field span, .tw-cell__body .boat-field span {
  font-size: clamp(10px, 3.2cqmin, 13px);
}
.home2-cell__body .boat-field b, .tw-cell__body .boat-field b {
  font-size: clamp(14px, 4.6cqmin, 18px); white-space: nowrap;
}
/* 2×2: quattro field in griglia 2×2 (i w-3 restano nascosti) */
.wf-1x1 .boat-fields {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 4cqmin, 16px) clamp(14px, 6cqmin, 28px);
}
/* 2×4: tutti i field in fila, spaziati, senza andare a capo */
.wf-1x2 .boat-fields {
  display: flex; flex-direction: row; align-items: flex-start;
  gap: clamp(12px, 4cqmin, 28px); flex-wrap: wrap;
}

/* --- LUNA: emoji e nome fase scalano col widget --- */
.home2-cell__body .moon-emoji,
.tw-cell__body .moon-emoji {
  font-size: clamp(28px, 16cqmin, 64px); line-height: 1;
}
.home2-cell__body .moon-main b,
.tw-cell__body .moon-main b {
  font-size: clamp(13px, 4.5cqmin, 19px);
}
.home2-cell__body .moon-fields, .tw-cell__body .moon-fields {
  gap: clamp(6px, 3cqmin, 12px) clamp(10px, 4cqmin, 18px);
  margin-top: clamp(8px, 4cqmin, 14px);
}
.home2-cell__body .moon-field span, .tw-cell__body .moon-field span {
  font-size: clamp(10px, 3.2cqmin, 13px);
}
.home2-cell__body .moon-field b, .tw-cell__body .moon-field b {
  font-size: clamp(12px, 4cqmin, 16px);
}

/* --- righe di elenco (tides, alerts, ports): titolo e sottotitolo --- */
.home2-cell__body .row__main b, .tw-cell__body .row__main b {
  font-size: clamp(12px, 4cqmin, 16px);
}
.home2-cell__body .row__main span, .tw-cell__body .row__main span {
  font-size: clamp(10px, 3.2cqmin, 13px);
}
.home2-cell__body .row__ico, .tw-cell__body .row__ico {
  width: clamp(26px, 9cqmin, 40px);
  height: clamp(26px, 9cqmin, 40px);
  flex: 0 0 auto;
}
.home2-cell__body .row__ico svg, .tw-cell__body .row__ico svg { width: 50%; height: 50%; }

/* --- specifici di singoli widget --- */
.home2-cell__body .lasttrip-route, .tw-cell__body .lasttrip-route {
  font-size: clamp(13px, 4.6cqmin, 20px);
}
.home2-cell__body .kv, .tw-cell__body .kv {
  font-size: clamp(12px, 4cqmin, 16px);
}
/* paragrafi liberi (note, messaggi "condividi posizione") */
.home2-cell__body .card > p, .tw-cell__body .card > p {
  font-size: clamp(10px, 3.4cqmin, 14px);
}
/* gap fra headline e blocchi: proporzionale, così i widget non si stirano */
.home2-cell__body .mt8, .tw-cell__body .mt8 { margin-top: clamp(4px, 2cqmin, 8px); }
.home2-cell__body .mb-6, .tw-cell__body .mb-6 { margin-bottom: clamp(3px, 1.6cqmin, 6px); }

/* barra di ricerca: occupa TUTTA l'area residua sotto il quadrato, in altezza
   e larghezza — la composebar si stira per riempirla */
.home2__compose {
  flex: 1 1 auto;               /* si prende tutto lo spazio che avanza sotto la griglia */
  min-height: 100px;            /* ma non scende mai sotto i 100px */
  display: flex;
  padding: 4px 0;
}
/* Stessa famiglia dei widget, ma più SOLIDA: la barra è la parte viva dell'app,
   i widget sono contorno. Il contrasto lo fa la trasparenza — i widget lasciano
   passare lo sfondo (vedi .home2-cell__body > .card), la barra molto meno. */
.home2__compose .composebar {
  width: 100%;
  height: 100%;
  border-radius: 18px;           /* quanto i widget al loro massimo */
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(36px) saturate(1.9);
  -webkit-backdrop-filter: blur(36px) saturate(1.9);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .home2__compose .composebar {
  background: rgba(26, 26, 36, .84);
}
.home2__compose .composebar textarea {
  max-height: none;              /* può crescere quanto l'area */
  flex: 1 1 auto;                /* l'altezza che avanza sopra i comandi */
  /* Qui lo spazio e' quello che avanza sotto la griglia dei widget, non
     tutto lo schermo: con i 105px fissi della home grande il campo si
     prendeva tutto e la riga dei comandi finiva FUORI dalla barra, sotto
     la dock - il pulsante invio non si riusciva a toccare (visto in
     produzione il 2026-08-22, dopo che la barra e' diventata a colonna). */
  min-height: 0;
}
/* Placeholder in grande finché la barra è vuota: la misura (--ph-size) la calcola
   home-grid.js perché stia su una riga sola, in larghezza e in altezza. Appena si
   digita, `is-empty` cade e il testo torna alla dimensione normale.
   `nowrap` sul campo vuoto: il testo si stringe, non va mai a capo (il wrap
   normale torna appena si scrive). */
.home2__compose .composebar textarea.is-empty {
  white-space: nowrap;
}
/* colore pieno, non il grigio di default del browser: è l'invito principale
   dell'app e si legge in barca, in piena luce (call Gianni 31/07) */
.home2__compose .composebar textarea::placeholder {
  color: var(--text);
  opacity: 1;                    /* Firefox lo smorza da sé */
}
.home2__compose .composebar textarea.is-empty::placeholder {
  font-size: var(--ph-size, inherit);
  transition: font-size .12s ease-out;
}
.home2__compose .composebar .send { align-self: flex-end; }

/* ============================================================
   BANCO WIDGET (/test-widget/) — full-bleed: niente topbar, bottomnav né
   sidebar, solo sfondo e widget su una griglia leggermente visibile. Celle di
   dimensione reale fissa (base 88px): ogni forma occupa C×R celle-base, la
   griglia sotto rende leggibile la misura senza etichette.
   ============================================================ */
.tw-page .topbar,
.tw-page .bottomnav,
.tw-page .sidebar,
.tw-page .sidebar-scrim { display: none !important; }
.tw-page .app { grid-template-columns: 1fr; }         /* niente colonna sidebar su desktop */

.view--tw {
  padding: 0;
  max-width: none;
  height: 100%;              /* riempie .main, il contenuto in eccesso scrolla */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.view--tw > * { max-width: none; margin: 0; }         /* annulla il .view>* 1140px */

.tw {
  --tw-unit: 88px;
  --tw-gap: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tw-unit));
  grid-auto-rows: var(--tw-unit);
  grid-auto-flow: row dense;
  gap: var(--tw-gap);
  justify-content: center;
  align-content: start;
  padding: 24px;
  /* la griglia leggermente visibile dietro le tessere: un reticolo di
     celle-base (unit + gap) così la misura di ogni widget si legge a occhio */
  background-image:
    linear-gradient(to right, rgba(127, 127, 140, .14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(127, 127, 140, .14) 1px, transparent 1px);
  background-size: calc(var(--tw-unit) + var(--tw-gap)) calc(var(--tw-unit) + var(--tw-gap));
  background-position: 24px 24px;
}

/* ogni tessera è una cella container (i widget reagiscono alla misura) */
.tw-cell {
  position: relative; display: flex;
  min-width: 0; min-height: 0;
}
.tw-cell__body {
  flex: 1; min-width: 0; overflow: hidden; display: flex;
  container-type: size; container-name: cell;
}
.tw-cell__body > .card { flex: 1; margin: 0; overflow: hidden; }

/* le tre sole forme (altezza × larghezza), su celle-base quadrate: 2×2,
   2×4 (basso e largo), 4×4 */
.tw .s-2x2 { grid-row: span 2; grid-column: span 2; }
.tw .s-2x4 { grid-row: span 2; grid-column: span 4; }
.tw .s-4x4 { grid-row: span 4; grid-column: span 4; }

/* pulsante fluttuante sulla home (/) in alto a destra: porta alla plancia widget */
/* bottone tondo flottante sopra una vista a tutta pagina (la chat non ha
   una page-head dove metterlo): «home a widget» in / e «nuova chat» in
   /chat/<id>/ */
.home-widgets-btn, .chat-float-btn{
  position:absolute; top:14px; right:16px; z-index:20;
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; color:var(--text);
  background:rgba(255,255,255,.6); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow); text-decoration:none;
}
.home-widgets-btn:hover, .chat-float-btn:hover{background:rgba(255,255,255,.85)}
/* l'elenco delle chat sta accanto al «+», a sinistra di lui: chiesto
   dal cliente il 2026-08-21, «elenco chat dove c'e' la chat in essere,
   vicino a +» */
.chat-float-btn--lista{right:64px}
/* in home il pulsante del quadro strumenti sta gia' a destra: la
   cronologia gli si mette accanto, alla stessa distanza */
.home-widgets-btn--lista{right:64px}
[data-theme="dark"] .home-widgets-btn,
[data-theme="dark"] .chat-float-btn{background:rgba(28,30,34,.6);color:#fff}

/* ============================================================
   EDITOR HOME (/edit-home/) — griglia 2×3 con widget trascinabili.
   Niente testata né pulsanti: si trascina, si tocca «+» per aggiungere, e ogni
   modifica valida si salva da sé.
   ============================================================ */
.eh{display:block}

/* la griglia editabile: stesse proporzioni della home (celle quadrate) */
.eh__grid{
  position:relative;
  aspect-ratio:2 / 3; width:100%; max-width:420px; margin-inline:auto;
  display:grid; gap:10px;
  border:1px solid var(--line); border-radius:16px; padding:10px;
  transition:opacity .15s;
}
.eh.is-saving .eh__grid{opacity:.75}   /* feedback discreto mentre salva */

/* il «+» su una cella libera */
.eh-add{
  display:grid; place-items:center;
  border:1px dashed var(--line); border-radius:12px;
  background:transparent; color:var(--text-3);
  font-size:28px; font-weight:400; line-height:1; cursor:pointer;
  transition:.15s;
}
.eh-add:hover{background:var(--surface-2);color:var(--text-2);border-style:solid}

/* scelta del widget da aggiungere */
.eh__picker{width:min(420px,100%)}
.eh__picker-head{
  display:flex;align-items:center;gap:12px;
  padding:18px 20px 0 26px;
}
.eh__picker-head h3{flex:1;font-family:var(--display);font-size:19px;font-weight:700}
.eh__picker-list{display:flex;flex-direction:column;gap:6px}
.eh-pick{
  display:flex;align-items:center;gap:10px;width:100%;
  border:1px solid var(--line);background:var(--surface-2);border-radius:12px;
  font:inherit;font-size:16px;font-weight:600;padding:11px 14px;cursor:pointer;
  color:inherit;text-align:left;
}
.eh-pick:hover{background:var(--surface)}
.eh-pick svg{flex:0 0 auto;color:var(--sea-600)}
/* una tessera-widget sulla griglia */
.eh-tile{
  position:relative; min-width:0; min-height:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:8px 10px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  cursor:grab; user-select:none; touch-action:none;
}
.eh-tile.is-dragging{cursor:grabbing;opacity:.9;box-shadow:var(--shadow-lg);z-index:5}
.eh-tile.is-invalid{outline:2px solid var(--coral-500);outline-offset:-2px}
.eh-tile__name{display:flex;align-items:center;gap:6px;min-width:0;
  font-weight:700;font-size:15px;line-height:1.2}
.eh-tile__name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eh-tile__name svg{flex:0 0 auto;color:var(--sea-600)}
.eh-tile__actions{display:flex;gap:4px;align-self:flex-end}
.eh-tile__btn{
  border:1px solid var(--line);background:var(--surface-2);border-radius:8px;
  font:inherit;font-size:13px;font-weight:700;padding:2px 6px;cursor:pointer;color:inherit;line-height:1.4;
}
.eh-tile__btn:hover{background:var(--surface)}
.eh-tile__btn--rm:hover{background:rgba(255,59,48,.12);border-color:rgba(255,59,48,.3)}

/* toast di errore (spazio finito / salvataggio) */
.eh-flash{
  position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(10px);
  background:var(--navy-900);color:#fff;padding:10px 16px;border-radius:12px;
  font-size:15px;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;
  transition:.2s;z-index:100;max-width:90vw;
}
.eh-flash.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   LEGENDA DELLA CARTA (/legenda/) — non linkata, si digita l'URL
   ============================================================ */
/* i simboli vanno mostrati come si vedono in mare: stessa misura, niente
   ricolorazione (i colori stanno dentro il simbolo, non li eredita) */
.legend-sym{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
/* Simbolo e nome, niente altro: a due colonne dove ci stanno, così tutta la
   legenda si abbraccia con un'occhiata invece di scorrere. */
.legend-grid{display:grid;grid-template-columns:1fr;gap:8px}
@container app (min-width:560px){.legend-grid{grid-template-columns:1fr 1fr}}
.legend-item{display:flex;align-items:center;gap:10px;min-width:0}
.legend-item b{font-weight:600;font-size:15px;overflow-wrap:anywhere}
/* la provenienza è una nota, non parte del nome: pesa meno */
.legend-origin{font-weight:400;font-size:13px;color:var(--muted)}
.map-sym{display:block}