/* ==========================================================================
   BASE — reset, tipografia, icone, elementi trasversali (pin gate, toast)
   ========================================================================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  touch-action: manipulation;
  overscroll-behavior-y: contain;
}

h1, h2, h3, p { margin: 0; }

/* ---------- BOTTONI ---------- */
button {
  font-family: inherit;
  font-size: 100%;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  border: none;
  cursor: pointer;
  color: inherit;
  background: none;
}
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.4; cursor: default; }

/* ---------- FOCUS VISIBILE (accessibilità / contrasto) ---------- */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- ICONE VETTORIALI (tratto singolo, colore ereditato) ---------- */
.ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -0.14em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sprite-icone { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- PIN GATE ---------- */
#pin-gate {
  position: fixed; inset: 0; background: var(--color-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 100; padding: var(--space-5); gap: var(--space-3);
  text-align: center;
}
#pin-gate.nascosto { display: none; }
#pin-gate .logo { font-size: 44px; color: var(--color-brand-ink); line-height: 1; }
#pin-gate h1 { font-size: 22px; font-weight: 800; }
#pin-gate p { color: var(--color-text-secondary); font-size: 14px; margin-bottom: var(--space-2); }

#pin-gate input {
  width: min(280px, 82vw);
  font-size: 16px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  padding: 12px 14px;
}
#pin-gate input:focus { outline: none; border-color: var(--color-brand); box-shadow: var(--focus-ring); }
#pin-errore { color: var(--color-state-negative); font-size: 13px; font-weight: 600; min-height: 18px; }

#pin-submit {
  background: var(--color-brand); color: var(--color-text-on-brand);
  padding: 14px 40px; min-height: var(--tap-target);
  border-radius: var(--radius-md); font-weight: 800; font-size: 15px;
}

/* ---------- TOAST ---------- */
#toast {
  position: fixed;
  bottom: calc(var(--tabbar-height) + 14px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  max-width: calc(100vw - 32px);
  background: var(--color-toast-bg);
  color: var(--color-toast-text);
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: var(--shadow-raised);
}
#toast.visibile { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Senza capsula nav in basso (desktop / telefono ruotato) il toast sta più in basso */
@media (min-width: 900px) and (pointer: fine),
       (orientation: landscape) and (pointer: coarse) {
  #toast { bottom: calc(20px + env(safe-area-inset-bottom)); }
}