/* ═══════════════════════════════════════════════════════════════════
   blip — base.css : reset, tipografia di base, bottoni, campi.
   ═══════════════════════════════════════════════════════════════════ */

/* Rete anti-scroll laterale, una volta per tutto il sito (regola di Rami, hook pre-commit).
   Forma canonica a due dichiarazioni: `hidden` è il ripiego per Safari < 16, `clip` clippa
   senza fare del body un contenitore di scorrimento. Qui non ci sono elementi sticky né
   colonne fisse, quindi il caso «Tavoloso» del registro [webapp] 03/09/2026 non si applica;
   verificato con Playwright che la rotella scorre a 390 e 1440px. */
html, body {
  overflow-x: hidden !important;   /* ripiego: browser senza `clip`, Safari < 16 */
  overflow-x: clip !important;     /* la buona: clippa SENZA staccare position:sticky */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { display: block; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── focus visibile, sempre */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── logo */
.logo {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
}
.logo__bracket { font-weight: 500; color: var(--ink-70); }
.logo--login { font-size: var(--fs-logo); }
.logo--small { font-size: var(--fs-body); font-weight: 700; letter-spacing: 0; }
.logo--small .logo__bracket { color: var(--ink-50); }

/* ── bottoni */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--sp-8);
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--ink); color: var(--bg); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink-12); }
.btn--icon {
  width: 36px; min-height: 36px; padding: 0;
  background: var(--surface-2); color: var(--ink-70);
  list-style: none;
}
.btn--icon::-webkit-details-marker { display: none; }

@media (hover: hover) {
  .btn--primary:not(:disabled):hover { opacity: .92; transform: translateY(-1px); }
  .btn--secondary:not(:disabled):hover { border-color: var(--ink-30); }
  .btn--icon:hover { color: var(--ink); }
}

/* ── campi */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}
.field input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--sp-5);
  border-radius: var(--r-input);
  border: 1px solid var(--ink-06);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);            /* ≥16px: iOS non zooma */
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(143 191 134 / .25);
}
.field input:disabled { opacity: .5; }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field__error {
  color: var(--danger);
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: center;
}

/* ── titoli e didascalie comuni alle card */
.card__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--ink);
}
.card__caption {
  font-size: var(--fs-small);
  color: var(--ink-70);
  line-height: 1.35;
}
.card__caption--right { text-align: right; }
.card__meta {
  font-size: var(--fs-tiny);
  color: var(--ink-50);
}

/* stato: titolo + sottotitolo */
.state { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.state--right { text-align: right; }
.state__title { font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.state__sub { font-size: var(--fs-tiny); color: var(--ink-50); }