/* =============================================================================
   app.css — layout e componenti. Consuma SOLO i token di theme.css.
   Se devi cambiare colori, forme o spaziature, non toccare questo file:
   agisci su theme.css.
   ============================================================================= */

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent }

html{
  -webkit-text-size-adjust:100%;   /* impedisce a iOS di ingrandire il testo in orizzontale */
  height:-webkit-fill-available;
}
body{
  margin:0;
  min-height:100dvh;               /* dvh segue la barra di Safari che appare e scompare */
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-grad) 260px);
  background-attachment:fixed;
  color:var(--txt);
  font-family:var(--font-ui);
  font-size:var(--fs-md);
  line-height:var(--lh-body);
  overscroll-behavior-y:none;      /* niente rimbalzo elastico sopra la barra */
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------- barra alta
   Titolo grande in linea col contenuto che, scorrendo, si contrae nella
   barra compatta traslucida: è il comportamento della navigation bar di iOS. */
.navbar{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding-top:var(--sat);
  height:calc(var(--navbar-h) + var(--sat));
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-bar);
  -webkit-backdrop-filter:var(--blur-bar); backdrop-filter:var(--blur-bar);
  border-bottom:1px solid transparent;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.navbar.show{ opacity:1; transform:none; border-bottom-color:var(--line) }
.navbar h2{
  margin:0; font-size:var(--fs-nav); font-weight:var(--fw-semi);
  letter-spacing:-.3px; color:var(--navy);
}

.wrap{
  max-width:var(--content-max);
  margin:0 auto;
  padding:
    calc(var(--sat) + var(--sp-3))
    calc(var(--sp-4) + var(--sar))
    calc(var(--tabbar-h) + var(--sab) + var(--sp-7))
    calc(var(--sp-4) + var(--sal));
}

.largetitle{
  font-size:var(--fs-title); font-weight:var(--fw-bold);
  letter-spacing:-.9px; line-height:var(--lh-tight);
  margin:var(--sp-3) 0 var(--sp-1);
  color:var(--navy);
}
.subtitle{ color:var(--txt-dim); font-size:var(--fs-sm); margin:0 0 var(--sp-2) }

h2.sect{
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.9px;
  color:var(--txt-faint); font-weight:var(--fw-semi);
  margin:var(--sp-6) 0 var(--sp-3);
}

/* ------------------------------------------------------------------ superfici */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-4);
  box-shadow:var(--shadow-card);
}
.note{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm); color:var(--txt-dim); margin:var(--sp-4) 0 0;
}
.note b{ color:var(--txt); font-weight:var(--fw-semi) }

/* -------------------------------------------------------------------- bottoni */
.btn{
  min-height:var(--tap-min);          /* target Apple: mai sotto 44px */
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--sp-2); padding:0 var(--sp-4);
  background:var(--surface-2); border:1px solid var(--line); color:var(--txt-dim);
  border-radius:var(--r-md); font:inherit; font-size:var(--fs-sm);
  cursor:pointer; transition:all var(--dur-fast) var(--ease);
}
.btn:active{ transform:scale(.97) }
.btn.primary{ border-color:var(--accent-line); color:var(--accent); background:var(--accent-bg) }

/* ------------------------------------------------------------------- località */
.locname{ font-size:var(--fs-lg); font-weight:var(--fw-semi); letter-spacing:-.2px }
.loccoord{ font-size:var(--fs-xs); color:var(--txt-faint); font-family:var(--font-num); margin-top:2px }
.srch{ display:flex; gap:var(--sp-2); margin-top:var(--sp-4) }
.srch input{
  flex:1; min-width:0; min-height:var(--tap-min);
  background:var(--surface-2); border:1px solid var(--line); color:var(--txt);
  border-radius:var(--r-md); padding:0 var(--sp-3);
  font:inherit; font-size:var(--fs-input);   /* 16px: sotto questa soglia iOS zooma */
}
.srch input:focus{ outline:none; border-color:var(--accent) }
.res{ list-style:none; margin:var(--sp-3) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1) }
.res li{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-3); font-size:var(--fs-sm); color:var(--txt-dim);
  min-height:var(--tap-min); display:flex; align-items:center; cursor:pointer;
}
.res li:active{ border-color:var(--accent); color:var(--txt) }

.radhead{ display:flex; justify-content:space-between; align-items:baseline;
          font-size:var(--fs-sm); color:var(--txt-dim); margin-top:var(--sp-5) }
.radhead b{ color:var(--accent); font-size:var(--fs-lg); font-family:var(--font-num) }
input[type=range]{ width:100%; margin:var(--sp-2) 0 0; accent-color:var(--accent); height:var(--tap-min) }
.msg{ font-size:var(--fs-xs); color:var(--txt-faint); margin-top:var(--sp-2); min-height:1em }
.msg.warn{ color:var(--warn) }

/* ------------------------------------------------------------ vento in diretta */
.live{
  /* il riquadro del vento e' "il mare": azzurro, non smeraldo come l'interfaccia */
  background:linear-gradient(135deg, var(--azure-bg), var(--surface) 66%);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4); box-shadow:var(--shadow-card);
}
.lrow{ display:flex; align-items:center; gap:var(--sp-4) }
.arrow{
  width:58px; height:58px; flex:0 0 58px; border-radius:var(--r-pill);
  background:var(--azure-bg); border:1px solid var(--azure-line);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:var(--azure);
  transition:transform .55s var(--ease-spring);
}
.lmain{ flex:1; min-width:0 }
.lw{ font-size:var(--fs-xl); font-weight:var(--fw-bold); letter-spacing:-.4px; line-height:var(--lh-tight) }
.lv{ font-size:var(--fs-sm); color:var(--txt-dim); margin-top:3px; font-family:var(--font-num) }
.lt{ font-size:var(--fs-xs); color:var(--txt-faint); margin-top:var(--sp-1) }
.pill{
  font-size:var(--fs-2xs); padding:2px 8px; border-radius:var(--r-pill);
  border:1px solid var(--ok-line); background:var(--ok-bg); color:var(--ok);
  letter-spacing:.4px; vertical-align:3px; margin-left:var(--sp-2); font-weight:var(--fw-medium);
}
.pill.man{ border-color:var(--warn-line); background:var(--warn-bg); color:var(--warn) }
.lacts{ display:flex; gap:var(--sp-2); margin-top:var(--sp-3); flex-wrap:wrap }
.skel{ color:var(--txt-faint); font-size:var(--fs-sm) }

.hrs{ display:flex; gap:var(--sp-1); overflow-x:auto; margin-top:var(--sp-4);
      padding-bottom:var(--sp-1); scrollbar-width:none }
.hrs::-webkit-scrollbar{ display:none }
.hr{ flex:0 0 42px; text-align:center; font-size:var(--fs-2xs); color:var(--txt-faint) }
.hr .bar{ height:40px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:var(--sp-1) }
.hr .bar i{ display:block; width:15px; border-radius:var(--r-sm) var(--r-sm) 0 0;
            background:var(--azure); opacity:.55 }
.hr.calm .bar i{ background:var(--ok); opacity:.9 }
.hr.windy .bar i{ background:var(--bad); opacity:.85 }
.hr .kn{ font-family:var(--font-num); color:var(--txt-dim); font-size:var(--fs-xs) }

/* --------------------------------------------------------------- rosa dei venti */
.winds{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2) }
@media (max-width:520px){ .winds{ grid-template-columns:repeat(4,1fr); gap:6px } }
.w{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-2) var(--sp-1); min-height:var(--tap-min);
  text-align:center; cursor:pointer; transition:all var(--dur-fast) var(--ease);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.w:active{ transform:scale(.96) }
.w.on{ background:var(--accent-bg); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset }
.w .ar{ font-size:var(--fs-lg); line-height:1; color:var(--txt-faint) }
.w.on .ar{ color:var(--accent) }
.w .nm{ font-size:var(--fs-xs); font-weight:var(--fw-semi); letter-spacing:-.1px }
.w .dg{ font-size:var(--fs-2xs); color:var(--txt-faint) }
.w.on .dg{ color:var(--accent) }

.verdict{
  margin-top:var(--sp-4); padding:var(--sp-4); border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--txt-dim);
}
.verdict b{ color:var(--txt) }

/* ------------------------------------------------------------------- spiagge */
ul.list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-2) }
li.b{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-3) var(--sp-4);
  background:var(--surface); box-shadow:var(--shadow-card);
  display:grid; grid-template-columns:1fr auto; gap:3px var(--sp-3); align-items:baseline;
}
li.b.ok  { background:var(--ok-bg);   border-color:var(--ok-line) }
li.b.mid { background:var(--warn-bg); border-color:var(--warn-line) }
li.b.bad { background:var(--bad-bg);  border-color:var(--bad-line) }
.bn{ font-weight:var(--fw-semi); font-size:var(--fs-lg); letter-spacing:-.25px }
.bk{ font-size:var(--fs-xs); color:var(--txt-faint); font-family:var(--font-num);
     white-space:nowrap; text-align:right }
.bm{ grid-column:1/-1; font-size:var(--fs-sm); color:var(--txt-dim); margin-top:2px }
.tags{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:var(--sp-2) }
.t{
  font-size:var(--fs-xs); padding:3px 8px; border-radius:var(--r-sm);
  background:var(--line-soft); color:var(--txt-dim); border:1px solid var(--line);
}
.t.g{ color:var(--ok);   border-color:var(--ok-line);   background:var(--ok-bg) }
.t.y{ color:var(--warn); border-color:var(--warn-line); background:var(--warn-bg) }
.t.r{ color:var(--bad);  border-color:var(--bad-line);  background:var(--bad-bg) }
.t a{ color:var(--azure); text-decoration:none; display:inline-flex; align-items:center }
.empty{ color:var(--txt-faint); font-size:var(--fs-sm); padding:var(--sp-3) 2px; font-style:italic }

/* -------------------------------------------------------------------- tabella */
.scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm) }
th,td{ text-align:left; padding:var(--sp-2); border-bottom:1px solid var(--line) }
th{ color:var(--txt-faint); font-size:var(--fs-2xs); text-transform:uppercase;
    letter-spacing:.7px; font-weight:var(--fw-semi) }
td.n{ font-family:var(--font-num); color:var(--txt-dim); white-space:nowrap }
.dot{ display:inline-block; width:8px; height:8px; border-radius:var(--r-pill);
      margin-right:6px; vertical-align:1px }
.dot.ok{ background:var(--ok) } .dot.mid{ background:var(--warn) } .dot.bad{ background:var(--bad) }

/* ------------------------------------------------------------------- consigli */
.tips{ display:flex; flex-direction:column; gap:var(--sp-2) }
.tip{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
      padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); color:var(--txt-dim) }
.tip b{ color:var(--txt); display:block; margin-bottom:2px; font-size:var(--fs-md);
        font-weight:var(--fw-semi) }

footer{
  margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--line);
  color:var(--txt-faint); font-size:var(--fs-xs); line-height:1.65;
}
footer a{ color:var(--txt-dim); text-decoration:none; border-bottom:1px dotted var(--txt-faint) }

/* ------------------------------------------------------------ barra a schede
   Fissata in basso, con l'area sicura dell'indicatore home già scontata. */
.tabbar{
  position:fixed; inset:auto 0 0 0; z-index:50;
  display:flex; align-items:stretch;
  height:calc(var(--tabbar-h) + var(--sab));
  padding:0 var(--sar) var(--sab) var(--sal);
  background:var(--surface-bar);
  -webkit-backdrop-filter:var(--blur-bar); backdrop-filter:var(--blur-bar);
  box-shadow:var(--shadow-bar);
}
.tab{
  flex:1; border:0; background:none; cursor:pointer; font:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--txt-faint); font-size:var(--fs-2xs); font-weight:var(--fw-medium);
  letter-spacing:.1px; transition:color var(--dur-fast) var(--ease);
  padding-top:4px;
}
.tab svg{ width:23px; height:23px; stroke:currentColor; fill:none;
          stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.tab.on{ color:var(--accent) }
.tab:active{ opacity:.6 }

/* ------------------------------------------------------------------- schermate */
.screen{ display:none }
.screen.on{ display:block; animation:fade var(--dur) var(--ease) }
@keyframes fade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }