/* ============================================================
   Navigatore Adriatico-Ionico — sistema visivo (vedi design/README.md)
   Token come CSS custom properties con switch giorno/notte (luce rossa).
   ============================================================ */

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:#bfb295;
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--ink);
}

:root{
  --bg:#ece3d0; --grid:rgba(14,42,47,.05); --panel:#f5efe0; --panel2:#e3d8c0;
  --ink:#0e2a2f; --petrol:#1d4a50; --muted:#5c6f6d; --line:rgba(14,42,47,.18);
  --hair:rgba(14,42,47,.10); --accent:#cc2b1d; --accentSoft:rgba(204,43,29,.14);
  --instrBg:#0e2a2f; --instrFg:#ece3d0; --instrLabel:#7e9b97;
  --btnBg:#0e2a2f; --btnFg:#ece3d0; --map:#dfd4ba; --mapLine:rgba(14,42,47,.5);
}
[data-night="1"]{
  --bg:#0a0606; --grid:rgba(255,70,48,.045); --panel:#160a09; --panel2:#1d0c0a;
  --ink:#ff4630; --petrol:#c8281a; --muted:#8a2a20; --line:#5a140d;
  --hair:rgba(255,70,48,.14); --accent:#ff6a55; --accentSoft:rgba(255,70,48,.16);
  --instrBg:#140807; --instrFg:#ff4630; --instrLabel:#8a2a20;
  --btnBg:#c8281a; --btnFg:#0a0606; --map:#140807; --mapLine:rgba(255,70,48,.45);
}

@keyframes liveblink{ 0%,100%{opacity:1;} 50%{opacity:.2;} }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }

/* ---------- Frame ---------- */
.app{
  width:100vw; height:100dvh; height:100vh;
  display:flex; flex-direction:column;
  background:var(--bg);
  background-image:
    repeating-linear-gradient(0deg,transparent 0 47px,var(--grid) 47px 48px),
    repeating-linear-gradient(90deg,transparent 0 47px,var(--grid) 47px 48px);
  color:var(--ink);
  overflow:hidden; position:relative;
}
.content{ flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }

/* ---------- Tipografia / helper ---------- */
.mono{ font-family:'IBM Plex Mono', monospace; }
.display{ font-family:'Bricolage Grotesque', sans-serif; }

.kicker{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.26em; color:var(--accent); margin-bottom:7px; }
.h1{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:40px; line-height:.95; margin:0; letter-spacing:-.01em; }
.h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:24px; margin:0; }
.h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:18px; margin:0; }

.screen-pad{ padding:26px 30px 40px; }

/* mappa segnaposto carta nautica (sostituibile con tiles reali) */
.chartmap{ background-color:var(--map); }

/* ============================================================
   ROTTA
   ============================================================ */
.rotta-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; }
.rotta-totals{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--petrol); text-align:right; line-height:1.7; }

.params{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); margin-bottom:22px; }
.param{ background:var(--instrBg); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; }
.param-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; color:var(--instrLabel); text-transform:uppercase; }
.param-val{ font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:600; color:var(--instrFg); margin-top:6px; line-height:1; }
.param-val span{ font-size:13px; color:var(--instrLabel); margin-left:5px; }
.steppers{ display:flex; flex-direction:column; gap:5px; }
.stepper{ width:42px; height:34px; border:1px solid var(--instrLabel); background:transparent; color:var(--instrFg); font-size:20px; cursor:pointer; font-family:'IBM Plex Mono',monospace; }

.rotta-grid{ display:grid; grid-template-columns:440px 1fr; gap:20px; align-items:start; }

.map{ background:var(--panel2); border:1px solid var(--line); height:520px; position:relative; overflow:hidden; }
.map-slot{ position:absolute; inset:0; }
.leaflet-host{ width:100%; height:100%; background:var(--panel2); }
.map-tl{ position:absolute; top:10px; left:12px; z-index:600; pointer-events:none;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; color:var(--instrFg);
  background:rgba(14,42,47,.72); padding:4px 8px; }
/* mappa in modalità notte: scurita e tinta sul rosso, per preservare la vista */
[data-night="1"] .leaflet-host{ filter:brightness(.5) contrast(.95) sepia(.55) hue-rotate(-18deg) saturate(1.7); }
.leaflet-container{ font-family:'IBM Plex Sans',sans-serif; }
.leaflet-control-attribution{ font-size:9px !important; }

.legs{ display:flex; flex-direction:column; gap:10px; }
.origin-row{ display:flex; align-items:center; gap:10px; padding:0 2px 4px; cursor:pointer; }
.origin-badge{ width:30px; height:30px; border-radius:50%; background:var(--btnBg); color:var(--btnFg); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:13px; }
.origin-name{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:18px; }
.origin-tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); margin-left:auto; }

.leg{ border:1px solid var(--line); background:var(--panel); }
/* tappa in riserva: niente fondo rosso su tutta la card (sembrava pericolo) —
   l'avviso resta nel banner + numero serbatoio e barra in rosso */
.leg.is-reserve{ border-color:var(--line); background:var(--panel); }
.leg-inner{ display:flex; align-items:stretch; }
.leg-handle{ width:44px; flex-shrink:0; border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:var(--panel2); }
.leg-num{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink); }
.leg-drag{ font-size:14px; color:var(--muted); line-height:.7; letter-spacing:-1px; cursor:grab; }
.leg-body{ flex:1; padding:13px 16px; min-width:0; cursor:pointer; }
.leg-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.leg-title{ display:flex; align-items:center; gap:9px; min-width:0; }
.leg-name{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.leg-code{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); border:1px solid var(--line); padding:1px 6px; flex-shrink:0; }
.leg-btns{ display:flex; gap:4px; flex-shrink:0; }
.iconbtn{ width:30px; height:30px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font-size:13px; }
.iconbtn.danger{ border-color:var(--accent); color:var(--accent); font-size:14px; }

.leg-data{ display:flex; gap:24px; margin-top:11px; font-family:'IBM Plex Mono',monospace; }
.d-label{ font-size:9px; letter-spacing:.12em; color:var(--muted); }
.d-val{ font-size:18px; font-weight:600; margin-top:2px; }
.d-val .u{ font-size:11px; color:var(--muted); }
.leg-arrive{ margin-left:auto; text-align:right; }

.fuelbar{ height:7px; background:var(--hair); margin-top:11px; display:flex; }
.fuelbar-fill{ height:100%; }

.leg-warn{ margin-top:11px; display:flex; align-items:center; gap:9px; background:var(--accentSoft); border:1px solid var(--accent); padding:8px 12px; }
.warn-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); animation:liveblink 1.6s infinite; flex-shrink:0; }
.warn-text{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--accent); letter-spacing:.04em; }

.addbtn{ border:2px dashed var(--line); background:transparent; color:var(--petrol); font-family:'Space Grotesk',sans-serif; font-weight:600; cursor:pointer; }
.addbtn.leg-add{ height:54px; font-size:15px; margin-top:4px; }

/* ============================================================
   LOCALITÀ
   ============================================================ */
.loc-pad{ padding:16px 30px 48px; }

.hero{ position:relative; height:300px; border:1px solid var(--line); background:var(--panel2); overflow:hidden; }
.hero-map{ position:absolute; inset:0; z-index:0; }
.hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.28) 0, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 52%, rgba(0,0,0,.62) 100%); }
.hero-coord{ position:absolute; z-index:2; top:14px; left:16px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; color:var(--instrFg); text-shadow:0 1px 4px rgba(0,0,0,.7); }
.hero-caption{ position:absolute; z-index:2; left:16px; bottom:18px; }
.hero-kicker{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.2em; color:var(--accent); margin-bottom:4px; text-shadow:0 1px 4px rgba(0,0,0,.7); }
.hero-name{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:76px; line-height:.85; color:var(--instrFg); text-shadow:0 2px 12px rgba(0,0,0,.6); }
.compass{ position:absolute; z-index:2; right:16px; bottom:18px; width:54px; height:54px; border-radius:50%; border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; background:var(--bg); }
.compass-needle{ width:4px; height:38px; transform:rotate(-45deg); background:linear-gradient(180deg,var(--accent) 0 50%,var(--ink) 50%); border-radius:2px; }

.now-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-top:none; }
.now-cell{ background:var(--instrBg); padding:15px 16px; }
.now-k{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.14em; color:var(--instrLabel); text-transform:uppercase; }
.now-main{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:7px; }
.now-v{ font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:600; color:var(--instrFg); line-height:1; }
.now-ico{ color:var(--instrFg); display:flex; align-items:flex-end; flex-shrink:0; }
.now-s{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--accent); margin-top:5px; }

/* barra di stato meteo/maree + tasto Aggiorna */
.loc-status{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.loc-updated{ display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--muted); }
.loc-updated .dot{ width:8px; height:8px; border-radius:50%; background:var(--petrol); flex-shrink:0; }
.loc-updated.ok .dot{ background:var(--petrol); }
.loc-updated.stale .dot{ background:var(--accent); }
.loc-updated.demo .dot{ background:var(--muted); }
.loc-updated.busy .dot{ background:var(--petrol); animation:liveblink 1s infinite; }
.refresh-btn{ display:flex; align-items:center; gap:8px; min-height:44px; padding:9px 16px; border:none; background:var(--btnBg); color:var(--btnFg); cursor:pointer; font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:14px; }
.refresh-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.refresh-ico{ font-size:16px; line-height:1; }
.refresh-sub{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; opacity:.8; }

.section{ margin-top:24px; }
.section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.section-note{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); }

.tabs{ display:flex; border:1px solid var(--ink); }
.tab{ font-family:'IBM Plex Mono',monospace; font-size:12px; padding:9px 18px; cursor:pointer; border:none; background:transparent; color:var(--ink); letter-spacing:.04em; }
.tab + .tab{ border-left:1px solid var(--ink); }
.tab.is-on{ background:var(--btnBg); color:var(--btnFg); }

.hours{ display:grid; grid-template-columns:repeat(8,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.hour{ background:var(--panel); padding:14px 8px 12px; text-align:center; }
.hour-t{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--petrol); }
.hour-ico{ color:var(--ink); display:flex; align-items:center; justify-content:center; height:24px; margin:9px 0 7px; }
.hour-lbl{ display:block; font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
.hour-w{ display:block; font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600; line-height:1; margin-top:2px; }
.hour-u{ display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); margin-top:2px; }
.hour-hair{ height:1px; background:var(--hair); margin:11px 6px; }
.hour-line{ display:flex; align-items:baseline; justify-content:center; gap:6px; margin-top:5px; }
.hour-line .hour-lbl{ display:inline; }
.hour-val{ font-family:'IBM Plex Mono',monospace; font-size:13px; }

.masonry{ display:grid; grid-template-columns:1.4fr 1fr; gap:18px; margin-top:24px; align-items:stretch; }
.masonry-right{ display:flex; flex-direction:column; gap:18px; }
.masonry-right .sun{ flex:1; } /* il box Sole cresce per allineare la colonna al box Maree */
.refresh-box{ border:1px solid var(--line); background:var(--panel); padding:16px; display:flex; flex-direction:column; gap:12px; }
.refresh-box .refresh-btn{ width:100%; justify-content:center; }
.tides{ border:1px solid var(--line); background:var(--panel); padding:20px; }
.tide-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.tide-bars{ display:flex; align-items:flex-end; gap:5px; height:96px; margin-bottom:12px; }
.tide-bar{ flex:1; }
.tide-empty{ font-family:'IBM Plex Sans',sans-serif; font-size:13px; line-height:1.5; color:var(--muted); padding:18px 0 6px; }
.tide-empty b{ color:var(--ink); font-weight:600; }
.tide-events{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.tide-ev{ border-left:2px solid var(--petrol); padding-left:9px; }
.tide-ev-k{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); }
.tide-ev-t{ font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:600; margin-top:2px; }
.tide-ev-h{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--petrol); }

.sun{ border:1px solid var(--line); background:var(--instrBg); color:var(--instrFg); padding:20px; }
.sun-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; color:var(--instrLabel); margin-bottom:18px; }
.sun-row{ display:flex; justify-content:space-between; align-items:flex-end; }
.sun-k{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--instrLabel); }
.sun-v{ font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:600; }
.sun-bar{ height:2px; background:linear-gradient(90deg,var(--instrLabel),var(--accent)); margin-top:18px; }
.sun-foot{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--instrLabel); margin-top:10px; }

.restos{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.resto{ border:1px solid var(--line); background:var(--panel); transition:border-color .12s; }
.resto:hover{ border-color:var(--accent); }
.resto-ext{ font-size:11px; color:var(--accent); }
.resto-photo{
  display:block; width:100%; height:84px; padding:0; overflow:hidden;
  background-color:var(--panel2);
  background-image:repeating-linear-gradient(45deg,var(--hair) 0 9px,transparent 9px 18px);
  border:none; border-bottom:1px solid var(--line);
}
.resto-img{ width:100%; height:100%; object-fit:cover; display:block; }
[data-night="1"] .resto-img{ filter:brightness(.6) sepia(.45) hue-rotate(-18deg) saturate(1.5); }
.resto-addphoto{ cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em; color:var(--petrol); display:flex; align-items:center; justify-content:center; }
.resto-addphoto:hover{ color:var(--accent); }
.resto-body{ display:block; padding:11px 12px; text-decoration:none; color:inherit; }
.resto-name{ font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:13px; line-height:1.15; }
.resto-rating{ display:flex; align-items:center; gap:5px; margin-top:8px; }
.resto-star{ color:var(--accent); font-size:12px; }
.resto-val{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; }
.resto-rev{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); }
.resto-tag{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); margin-top:4px; }

.loc-bottom{ display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:18px; margin-top:24px; align-items:start; }
.panel{ border:1px solid var(--line); background:var(--panel); padding:20px; }

.contact{ padding:12px 0; border-top:1px solid var(--hair); }
.contact-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.contact-name{ font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:15px; flex:1; min-width:0; }
.contact-val{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--accent); font-weight:600; margin-top:5px; }

.gallery-stage{
  height:150px; border:1px solid var(--line); background:var(--panel2);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.gallery-img{ width:100%; height:100%; object-fit:cover; display:block; }
[data-night="1"] .gallery-img{ filter:brightness(.55) sepia(.5) hue-rotate(-18deg) saturate(1.6); }
.gallery-cap{ position:absolute; left:8px; bottom:8px; max-width:calc(100% - 16px); font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.02em; color:var(--instrFg); background:rgba(14,42,47,.72); padding:3px 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gallery-del{ position:absolute; top:8px; right:8px; z-index:3; width:28px; height:28px; border:1px solid var(--instrFg); background:rgba(14,42,47,.6); color:var(--instrFg); cursor:pointer; font-size:14px; line-height:1; }
.gallery-del:hover{ border-color:var(--accent); color:var(--accent); }
.gallery-tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); padding:6px 12px; border:1px dashed var(--line); }
.gallery-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border:1px solid var(--ink); background:var(--bg); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.gallery-arrow.prev{ left:14px; } .gallery-arrow.next{ right:14px; }
.gallery-dots{ display:flex; gap:6px; margin-top:12px; }
.gallery-dot{ flex:1; height:5px; background:var(--hair); }
.gallery-dot.is-on{ background:var(--accent); }

.note{ display:flex; gap:11px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--hair); }
.note-box{ width:22px; height:22px; flex-shrink:0; border:2px solid var(--ink); background:transparent; color:var(--btnFg); display:flex; align-items:center; justify-content:center; font-size:13px; margin-top:1px; cursor:pointer; }
.note.is-on .note-box{ background:var(--btnBg); }
.note-text{ font-family:'IBM Plex Sans',sans-serif; font-size:13px; line-height:1.35; color:var(--ink); flex:1; min-width:0; margin-top:1px; }
.note.is-on .note-text{ color:var(--muted); }

/* ============================================================
   A BORDO
   ============================================================ */
.bordo-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:18px; align-items:start; }
.card{ border:1px solid var(--line); background:var(--panel); padding:22px; }
.card-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.card-h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:20px; margin:0; }
.count{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent); }

.supply{ display:flex; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--hair); }
.supply-box{ width:24px; height:24px; flex-shrink:0; border:2px solid var(--ink); background:transparent; color:var(--btnFg); display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; }
.supply.is-on .supply-box{ background:var(--btnBg); }
.supply-text{ font-family:'IBM Plex Sans',sans-serif; font-size:15px; flex:1; min-width:0; color:var(--ink); }
.supply.is-on .supply-text{ color:var(--muted); }
.supply-qty{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); text-align:right; min-width:40px; }

.log-grid{ display:grid; grid-template-columns:78px 1fr 70px 64px; gap:8px; }
.log-head{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; color:var(--muted); padding-bottom:9px; border-bottom:1px solid var(--ink); }
.log-head .r{ text-align:right; }
.log-row{ font-family:'IBM Plex Mono',monospace; font-size:13px; padding:11px 0; border-bottom:1px solid var(--hair); align-items:baseline; }
.log-date{ color:var(--petrol); }
.log-pos{ font-family:'IBM Plex Sans',sans-serif; font-weight:600; }
.log-nm{ text-align:right; } .log-nm .kn{ color:var(--muted); }
.log-hrs{ text-align:right; color:var(--accent); }
.addbtn.log-add{ width:100%; height:46px; font-size:14px; margin-top:14px; }

.countries{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.country{ border:1px solid var(--line); background:var(--panel); }
.country.is-customs{ border-color:var(--accent); }
.flag{ height:60px; border-bottom:1px solid var(--line); }
.country-body{ padding:14px; }
.country-name{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:17px; }
.country-row{ display:flex; justify-content:space-between; margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:12px; }
.country-row.tight{ margin-top:7px; }
.country-row .lbl{ color:var(--muted); }
.country-row .val{ font-weight:600; }
.country-row .val.cust{ color:var(--petrol); }
.country.is-customs .country-row .val.cust{ color:var(--accent); }
.country-vhf{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); margin-top:12px; letter-spacing:.06em; }

.bordo-countries{ margin-bottom:22px; }
.bordo-2col{ display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start; }
.bordo-left{ display:flex; flex-direction:column; gap:18px; }

.crew{ border:1px solid var(--line); background:var(--instrBg); color:var(--instrFg); padding:22px; }
.crew-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.crew-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; color:var(--instrLabel); }
.crew-add-icon{ width:36px; height:36px; flex-shrink:0; border:1px solid var(--instrLabel); background:transparent; color:var(--instrFg); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.crew-add-icon:hover{ border-color:var(--accent); color:var(--accent); }
.crew-list{ display:flex; flex-direction:column; gap:18px; }
.crew-card{ position:relative; border-left:2px solid var(--accent); padding-left:14px; padding-right:30px; }
.crew-name{ display:block; font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:15px; color:var(--instrFg); }
.crew-phone{ display:block; font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--accent); margin-top:6px; }
.crew-x{ position:absolute; top:-2px; right:0; width:24px; height:24px; border:1px solid var(--instrLabel); background:transparent; color:var(--instrLabel); cursor:pointer; font-size:13px; line-height:1; }
.crew-x:hover{ border-color:var(--accent); color:var(--accent); }

/* ============================================================
   BOTTOM NAV
   ============================================================ */
.nav{ height:88px; flex-shrink:0; border-top:2px solid var(--ink); background:var(--panel); display:flex; align-items:stretch; }
.nav-btn{ flex:1; border:none; border-right:1px solid var(--hair); background:transparent; color:var(--ink); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; font-family:'IBM Plex Mono',monospace; }
.nav-btn.is-on{ background:var(--btnBg); color:var(--btnFg); }
.nav-icon{ font-size:20px; line-height:1; }
.nav-label{ font-size:13px; letter-spacing:.14em; font-weight:600; }
.night-btn{ width:120px; border:none; background:transparent; color:var(--accent); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; font-family:'IBM Plex Mono',monospace; }
.night-btn.is-on{ background:var(--btnBg); color:var(--btnFg); }
.night-icon{ font-size:20px; line-height:1; }
.night-label{ font-size:11px; letter-spacing:.12em; font-weight:600; }

/* ============================================================
   Scorecard Rotta (totali sotto la mappa)
   ============================================================ */
.route-col{ display:flex; flex-direction:column; gap:18px; }
.scorecard{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.score-cell{ background:var(--instrBg); padding:14px 16px; }
.score-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; color:var(--instrLabel); text-transform:uppercase; }
.score-val{ font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:600; color:var(--instrFg); margin-top:6px; line-height:1; }
.score-val .u{ font-size:13px; color:var(--instrLabel); margin-left:4px; }

/* ============================================================
   Campi editabili (contenteditable) + bottoni aggiungi/rimuovi
   ============================================================ */
.edit{ outline:none; cursor:text; border-bottom:1px dashed transparent; transition:border-color .12s; word-break:break-word; }
.edit:hover{ border-bottom-color:var(--hair); }
.edit:focus{ border-bottom-color:var(--accent); }
[contenteditable][data-ph]:empty:before{ content:attr(data-ph); color:var(--muted); opacity:.65; }

.minix{ width:26px; height:26px; flex-shrink:0; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:14px; line-height:1; }
.minix:hover{ border-color:var(--accent); color:var(--accent); }

.addbtn.sm{ width:100%; height:42px; font-size:13px; margin-top:14px; }
.addbtn.dark{ border-color:var(--instrLabel); color:var(--instrFg); }

/* ============================================================
   Giornale di bordo — tabella a tutta larghezza, voci editabili
   ============================================================ */
.logbook-wide{ margin-bottom:18px; }
.logw-cols{ }
.logw-head, .logw-row{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) 58px 58px 74px 92px 30px;
  gap:14px; align-items:center;
}
.logw-head{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.12em; color:var(--muted); padding-bottom:10px; border-bottom:1px solid var(--ink); }
.logw-entry{ padding:11px 0; border-bottom:1px solid var(--hair); }
.lw-date{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--petrol); }
.lw-pos{ font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:14px; min-width:0; }
.lw-num, .lw-wind{ font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; }
.lw-hrs{ font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; color:var(--accent); }
.logw-note{ display:block; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); margin-top:8px; padding-left:90px; }

/* ============================================================
   Responsive — iPad verticale / schermi stretti
   ============================================================ */
@media (max-width:1000px){
  .rotta-grid{ grid-template-columns:1fr; }
  .map{ height:340px; }
  .masonry{ grid-template-columns:1fr; }
  .loc-bottom{ grid-template-columns:1fr; }
  .bordo-2col{ grid-template-columns:1fr; }
  .restos{ grid-template-columns:repeat(3,1fr); }
  .countries{ grid-template-columns:repeat(3,1fr); }
  .logw-head{ display:none; }
  .logw-row{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; }
  .logw-row .lw-pos{ flex:1 0 100%; }
  .logw-note{ padding-left:0; }
}
@media (max-width:680px){
  .screen-pad{ padding:20px 16px 32px; }
  .loc-pad{ padding:12px 16px 36px; }
  .params{ grid-template-columns:1fr; }
  .now-strip{ grid-template-columns:repeat(2,1fr); }
  .hours{ grid-template-columns:repeat(4,1fr); }
  .restos{ grid-template-columns:repeat(2,1fr); }
  .countries{ grid-template-columns:repeat(2,1fr); }
  .crew-grid{ grid-template-columns:1fr; }
  .hero-name{ font-size:54px; }
  .h1{ font-size:32px; }
  .leg-data{ flex-wrap:wrap; gap:14px; }
}