/* Nexus sul telefono come un'app: safe area (notch, isola, barra home), campi che non
   ingrandiscono la pagina, gesti. Caricato per ultimo dal layout. Fuori dall'app installata e
   sui telefoni senza notch env(safe-area-inset-*) vale 0 e qui non cambia niente. */

/* ---- safe area ---- */
/* ai lati (telefono di traverso): la shell rientra dal notch, il cassetto e il pannello pure */
.shell { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.side { padding-left: max(18px, env(safe-area-inset-left)); }
.pannello {
  padding-top: max(clamp(18px, 3vw, 30px), env(safe-area-inset-top));
  padding-right: max(clamp(18px, 3vw, 30px), env(safe-area-inset-right));
}
.avviso { max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); }

/* in alto: nell'app la barra di stato e' trasparente e la pagina ci passa sotto */
@media (max-width: 900px) {
  .topbar { padding-top: max(6px, env(safe-area-inset-top)); }
  .side { padding-top: max(22px, env(safe-area-inset-top)); }
  .main { padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px)); }
}
@media (min-width: 901px) {
  .shell { padding-top: env(safe-area-inset-top); }
  .side { top: env(safe-area-inset-top); height: calc(100dvh - env(safe-area-inset-top)); }
}
/* una striscia del colore della pagina sotto l'orologio, cosi' il testo che scorre non ci finisce sotto */
html.nx-app body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top);
  background: var(--bg); z-index: 100; pointer-events: none;
}
/* la palette: sul telefono sta in alto, sotto l'orologio */
.px { padding-top: max(min(14vh, 140px), env(safe-area-inset-top)); }
@media (max-width: 767px) {
  .px { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .px-box { max-height: calc(100dvh - env(safe-area-inset-top)); }
}

/* ---- campi: niente zoom al tocco anche sull'iPad (sotto 768px lo fa gia' nexus.css) ---- */
@media (pointer: coarse) and (min-width: 768px) {
  input, select, textarea, input[type=search], .barra select, .barra input { font-size: 16px; }
}

/* ---- gesti ---- */
/* mentre una card si trascina la pagina non rimbalza e il browser non parte col suo "tira per aggiornare" */
html:has(.trascinando), html:has(.trascinando) body { overscroll-behavior: none; }
/* arrivata in fondo di lato, la bacheca non passa lo scorrimento alla pagina (niente "indietro" per sbaglio) */
.bacheca { overscroll-behavior-x: contain; }

/* il segno del "tira per aggiornare" dell'app installata (nexus-app.js) */
.nx-app-tira {
  position: fixed; top: calc(env(safe-area-inset-top) + 10px); left: 50%; z-index: 101;
  transform: translate(-50%, calc(var(--tira, 0px) - 64px)); opacity: 0;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-3); color: var(--muted); font-size: var(--fs-small); font-weight: 700; text-transform: lowercase;
  box-shadow: var(--ombra); pointer-events: none; transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.nx-app-tira.su { opacity: 1; }
.nx-app-tira.pronto { color: var(--white); border-color: var(--white); }
@media (prefers-reduced-motion: reduce) { .nx-app-tira { transition: none; } }

/* ---- la pagina d'ingresso ---- */
.cover-topbar {
  padding-top: max(clamp(18px, 3vw, 32px), env(safe-area-inset-top));
  padding-left: max(clamp(20px, 4vw, 48px), env(safe-area-inset-left));
  padding-right: max(clamp(20px, 4vw, 48px), env(safe-area-inset-right));
}
.cover-foot { padding-bottom: max(18px, env(safe-area-inset-bottom)); }