/* Omissify — pagine Login e Account. Sopra tokens.css e site.css.
   I campi seguono il componente "Modulo" del BRANDBOOK.md §12; la password
   sotto il nastro è quella del riquadro dell'estensione (popup.css). */

[hidden] { display: none !important; }

/* Il footer resta in fondo anche quando la pagina è corta. */
body.area { min-height: 100svh; display: flex; flex-direction: column; }
.area__main { flex: 1; width: min(100% - 2 * var(--space-5), 440px); padding-block: var(--space-8) var(--space-9); }
.area__main--larga { width: min(100% - 2 * var(--space-5), var(--container-narrow)); }
.area__main h1 { font-size: var(--text-h2); letter-spacing: -0.02em; }
.area__nota { color: var(--color-text-muted); font-size: var(--text-small); margin: var(--space-2) 0 0; }
.area__nota strong { color: var(--color-text); font-weight: 500; overflow-wrap: anywhere; }

/* Le sezioni dell'account: filetto sopra, come i punti del sito. */
.area__blocco { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.area__titolo { font-size: var(--text-h3); margin-bottom: var(--space-3); }
.area__blocco > p { margin: 0 0 var(--space-3); max-width: 60ch; }
.area__blocco > .area__nota { margin-bottom: var(--space-3); }

/* ---- Modulo (BRANDBOOK.md §12) ---- */
.modulo { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); max-width: 440px; }
.modulo label { font-size: var(--text-small); font-weight: 500; color: var(--color-ink); }
.modulo label:not(:first-child), .modulo__blocco label { margin-top: var(--space-3); }
.modulo__blocco { display: flex; flex-direction: column; gap: var(--space-2); }
.modulo input {
  min-width: 0; height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--color-text-muted); border-radius: var(--radius-sm);
  background: var(--color-paper); color: var(--color-text);
  font: 400 var(--text-body)/1 var(--font-sans);
}
/* Campo selezionato: un solo bordo, nero e più spesso (l'ombra interna non sposta il testo),
   al posto del contorno staccato che si sommava al bordo. */
.modulo input:focus,
.modulo input:focus-visible { outline: none; border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
/* Errore: bordo 2 px nero sui campi del modulo, messaggio in rosso sotto. */
.modulo:has(.errore:not([hidden])) input { border-width: 2px; border-color: var(--color-ink); }
.modulo > .btn { margin-top: var(--space-4); align-self: flex-start; }
.btn:disabled { color: var(--color-text-muted); border-color: var(--color-text-muted); background: var(--color-surface); cursor: default; }

.errore { margin: var(--space-1) 0 0; font-size: var(--text-small); line-height: 1.4; color: var(--color-error); }
.avviso { margin-top: var(--space-1); }

/* La password sotto un nastro nero che si allunga a ogni carattere; il testo
   vero è trasparente, il nastro lo disegna js/password.js. */
.campo-password { position: relative; display: flex; }
.campo-password input { flex: 1; padding-right: 48px; }
.campo-password input[type="password"] { color: transparent; caret-color: var(--color-text); }
.nastro-password {
  --h: 16px;
  position: absolute; left: calc(var(--space-3) + 1px); top: 50%; height: var(--h); width: 0; transform: translateY(-50%);
  background: var(--color-ink); pointer-events: none;
  clip-path: polygon(
    calc(100% - 0.0457*var(--h)) 0%, 100% 9.4%, calc(100% - 0.0467*var(--h)) 18%, calc(100% - 0.0137*var(--h)) 27.7%,
    calc(100% - 0.049*var(--h)) 36.4%, calc(100% - 0.0155*var(--h)) 46.9%, calc(100% - 0.0389*var(--h)) 53.6%,
    calc(100% - 0.0043*var(--h)) 65.2%, calc(100% - 0.0555*var(--h)) 70.4%, calc(100% - 0.005*var(--h)) 84.1%,
    calc(100% - 0.0403*var(--h)) 91.5%, calc(100% - 0.017*var(--h)) 100%,
    calc(0.037*var(--h)) 100%, calc(0.0103*var(--h)) 89.6%, calc(0.0416*var(--h)) 82.9%, 0 75.2%,
    calc(0.0542*var(--h)) 62.5%, calc(0.007*var(--h)) 55.4%, calc(0.045*var(--h)) 46.2%, calc(0.006*var(--h)) 38.1%,
    calc(0.0438*var(--h)) 27.1%, calc(0.0151*var(--h)) 16.9%, calc(0.0392*var(--h)) 6.9%, calc(0.0057*var(--h)) 0%
  );
}
.occhio {
  position: absolute; right: 2px; top: 2px; bottom: 2px; width: 44px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-text-muted); cursor: pointer;
}
.occhio:hover { color: var(--color-ink); }
.occhio svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.occhio .occhio-chiuso, .occhio[aria-pressed="true"] .occhio-aperto { display: none; }
.occhio[aria-pressed="true"] .occhio-chiuso { display: block; }

/* Collegamenti sotto il modulo: parole sottolineate, non pulsanti. */
.collegamenti { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin: var(--space-6) 0 0; font-size: var(--text-small); color: var(--color-text-muted); }
.link {
  border: 0; background: none; padding: 0; min-height: 24px; cursor: pointer;
  font: 500 var(--text-small)/1.4 var(--font-sans); color: var(--color-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.link:hover { text-decoration-thickness: 2px; }

/* ---- Computer collegati ---- */
.computer { list-style: none; margin: var(--space-4) 0; padding: 0; }
.computer li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border);
}
.computer li:first-child { border-top: 1px solid var(--color-border); }
.computer__nome { font-weight: 500; color: var(--color-ink); }
.computer__date { font-size: var(--text-small); color: var(--color-text-muted); }

.scopri__bar button.btn { font-family: var(--font-sans); }
/* La barra in alto delle pagine Login e Account: logo a sinistra, "Esci" a destra. */
.area .scopri__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-4); }

/* ---- Impostazioni: la scadenza a tre caselle, come nel riquadro dell'estensione ---- */
.impostazioni__etichetta { font-size: var(--text-small); font-weight: 500; color: var(--color-ink); margin: var(--space-4) 0 var(--space-2); }
.selettore { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 440px; border: 1px solid var(--color-ink); border-radius: var(--radius-sm); overflow: hidden; }
.selettore button {
  min-height: 44px; padding: 0 var(--space-2); border: 0; border-left: 1px solid var(--color-ink);
  background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-small)/1 var(--font-sans); cursor: pointer;
}
.selettore button:first-child { border-left: 0; }
.selettore button:hover { background: var(--color-surface); }
.selettore button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.selettore button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -5px; }
.conferma { max-width: 440px; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-error); border-radius: var(--radius-sm); }
.conferma p { margin: 0 0 var(--space-3); font-size: var(--text-small); }
.conferma__pulsanti { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.impostazioni__spunta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); font-size: var(--text-small); color: var(--color-ink); }
.impostazioni__spunta input { width: 18px; height: 18px; accent-color: var(--color-ink); }

/* ---- Dizionario: le parole, con la scadenza e "Elimina" ---- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dizionario__aggiungi { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.dizionario__aggiungi input { flex: 1 1 14em; min-width: 0; }
.dizionario__aggiungi input, .dizionario__aggiungi select, .dizionario__elenco select, .dizionario__elenco input {
  height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-text-muted); border-radius: var(--radius-sm);
  background: var(--color-paper); color: var(--color-text); font: 400 var(--text-small)/1 var(--font-sans);
}
.dizionario__elenco { list-style: none; margin: 0; padding: 0; }
.dizionario__elenco li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-small);
}
.dizionario__elenco li:first-child { border-top: 1px solid var(--color-border); }
.dizionario__elenco .cresce { flex: 1 1 10em; min-width: 0; font-weight: 500; color: var(--color-ink); font-size: var(--text-body); overflow-wrap: anywhere; }
.dizionario__elenco .tipo, .dizionario__elenco .scade { color: var(--color-text-muted); }
.dizionario__elenco .scelta { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.dizionario__elenco input[type="number"] { width: 6em; }
.dizionario__elenco button {
  min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--color-ink); border-radius: var(--radius-sm);
  background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-small)/1 var(--font-sans); cursor: pointer;
}
.dizionario__elenco button:hover { background: var(--color-surface); }
.dizionario__elenco .nota { color: var(--color-text-muted); }

/* Il tuo piano: i due pulsanti per abbonarsi, uno accanto all'altro (8 novembre 2026). */
.piano-pulsanti { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 var(--space-2); }
#piano-gestisci { margin-top: var(--space-2); }