/* ══ Pagine fuori dall'app (accesso, uscita, ritorno dalla banca, consenso degli assistenti) ══════════════
   Stesso mondo «Linee d'acqua» di stile-linee.css, ridotto all'essenziale: laguna di notte (scuro) e di
   giorno (chiaro), superfici piatte con un filo, Overpass per il testo, pulsanti a pillola con il bordo e
   l'azione principale in smalto pieno. Il tema arriva dallo stesso script dell'<head> di app.php
   (scelta salvata, altrimenti il sistema). Token copiati da stile-linee.css: se cambiano lì, qui uguali. */
:root {
  color-scheme: dark;
  --font: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #0b1c4b; --surface: #0e2257; --surface-2: #14286a; --hair: #26407f;
  --control: #8c9ccb; --ink: #f4f0e6; --ink-2: #cbd4ef; --ink-3: #b2bee3;
  --accent-ink: #b9ccff; --crit-ink: #ffb0a8; --focus-ring: #f4f0e6;
  --btn-bg: #f4f0e6; --btn-ink: #0b1533;
  /* la prua di Freeboard (Rive, motion.js): stessi colori di stile-linee.css */
  --rv-ink: #f4f0e6; --rv-below: #3b5596; --rv-mint: #62e6b0; --rv-foam: #c8f8e3; --rv-wire: #26407f; --rv-gap: var(--surface); --rv-sky: #f4f0e6; --rv-glow: #f4f0e6;
  /* movimento (DESIGN.md › Motion › Freeboard): gli stessi tempi e curve di stile-linee.css */
  --m-micro: 120ms; --m-emph: 480ms;
  --m-standard: cubic-bezier(.2, 0, 0, 1); --m-decel: cubic-bezier(0, 0, .2, 1); --m-accel: cubic-bezier(.3, 0, 1, 1);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #edf1f7; --surface: #fbfaf5; --surface-2: #eef0f5; --hair: #cdd4e4;
  --control: #5a6690; --ink: #0b1533; --ink-2: #26325a; --ink-3: #3a466f;
  --accent-ink: #1a43a0; --crit-ink: #9c1c1c; --focus-ring: #0b1533;
  --btn-bg: #0e2257; --btn-ink: #f4f0e6;
  --rv-ink: #0b1533; --rv-below: #a7b3d0; --rv-mint: #2fc795; --rv-foam: #9fe7cb; --rv-wire: #b8c2d6; --rv-sky: #7b88b3; --rv-glow: #9db8ff;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #edf1f7; --surface: #fbfaf5; --surface-2: #eef0f5; --hair: #cdd4e4;
    --control: #5a6690; --ink: #0b1533; --ink-2: #26325a; --ink-3: #3a466f;
    --accent-ink: #1a43a0; --crit-ink: #9c1c1c; --focus-ring: #0b1533;
    --btn-bg: #0e2257; --btn-ink: #f4f0e6;
    --rv-ink: #0b1533; --rv-below: #a7b3d0; --rv-mint: #2fc795; --rv-foam: #9fe7cb; --rv-wire: #b8c2d6; --rv-sky: #7b88b3; --rv-glow: #9db8ff;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { accent-color: var(--ink); caret-color: var(--ink); }
::selection { background: var(--ink); color: var(--bg); }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; word-spacing: .03em;
  -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.card { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 32px 28px; width: 100%; max-width: 400px; }
.card.center { text-align: center; }
.card.center > p { margin-bottom: 18px; }
/* Marchio: il tondo di una fermata (come la sezione attiva nella navigazione) e il nome */
.logo { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--btn-bg); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--btn-bg); margin-left: 5px; flex: none; }
/* La prua di Freeboard nell'accesso: sale dall'acqua e dondola (Rive). Spazio riservato prima che arrivi, il
   disegno fermo in SVG solo se Rive non parte (senza JavaScript, o runtime non scaricato) */
.rv { display: block; position: relative; flex: none; }
.rv > .rv-c, .rv > .rv-still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rv > .rv-c { opacity: 0; transition: opacity 240ms cubic-bezier(.2, 0, 0, 1); }
.rv.rv-on > .rv-c { opacity: 1; }
.rv-js .rv:not(.rv-fail) > .rv-still { display: none; }
.rv-logo { width: 64px; aspect-ratio: 136 / 120; margin: -6px 0 -6px -6px; }
@media (prefers-reduced-motion: reduce) { .rv > .rv-c { transition: none; } }
.brand { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 14px; }

p { color: var(--ink); }
.lead { margin-bottom: 12px; }
ul { margin: 0 0 14px 20px; }
li { margin-bottom: 6px; color: var(--ink-2); }
li::marker { color: var(--ink-3); }
.muted { color: var(--ink-2); }
.small { font-size: 13.5px; margin-bottom: 18px; }
.hint { font-size: 13.5px; color: var(--ink-2); text-align: center; margin-top: 20px; }

label { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
input[type=text], input[type=password] { width: 100%; min-height: 48px; background: var(--surface); border: 2px solid var(--control); border-radius: 10px;
  color: var(--ink); font: inherit; font-size: 16px; padding: 10px 12px; margin-bottom: 16px; }
input[type=text]:hover, input[type=password]:hover { border-color: var(--ink-2); }
input[type=text]:focus-visible, input[type=password]:focus-visible { outline-offset: 2px; border-color: var(--ink); }
/* «Ricordami»: tutta la riga (alta 44) è l'etichetta della casella */
.remember-row { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; }

/* Casella «Bacino»: copia di .cbx-box in stile-linee.css (DESIGN.md › Interruttori e caselle), con --btn-bg/--btn-ink
   al posto di --ln-btn-bg/--ln-btn-ink. L'acqua sale (480 ms, decelera), poi la spunta si disegna (260 ms da 200 ms);
   spegnendo la spunta sparisce (120 ms) e l'acqua scende (360 ms, accelera). Riduci movimento: stato finale subito. */
.cbx-box { --cbx: 20px; position: relative; display: inline-block; flex: none; width: var(--cbx); height: var(--cbx);
  border: 2px solid var(--control); border-radius: 6px; transition: border-color 0s 300ms; }
@media (pointer: coarse) { .cbx-box { --cbx: 24px; border-radius: 7px; } .cbx-well { border-radius: 4px; } }
.cbx-box > input[type=checkbox] { position: absolute; z-index: 2; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); margin: 0; padding: 0;
  opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.cbx-box:has(> input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.cbx-box:has(> input:is(:checked, :indeterminate)) { border-color: var(--btn-bg); transition-delay: 0s; }
@media (hover: hover) { :is(label:hover > .cbx-box, .cbx-box:hover):has(> input:not(:checked):not(:indeterminate):not(:disabled)) { border-color: var(--ink); transition-delay: 0s; } }
.cbx-box:has(> input:disabled) { opacity: .5; }
.cbx-well { position: absolute; inset: 0; border-radius: 3px; overflow: hidden; pointer-events: none; }
.cbx-water { position: absolute; inset: -3px -8px 0 -8px; background: var(--btn-bg); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' preserveAspectRatio='none'%3E%3Cpath d='M0 3Q6 0 12 3T24 3T36 3T48 3V24H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' preserveAspectRatio='none'%3E%3Cpath d='M0 3Q6 0 12 3T24 3T36 3T48 3V24H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  transform: translate(6px, 118%); transition: transform 360ms var(--m-accel); }
.cbx-box > input:checked ~ .cbx-well .cbx-water { transform: translate(0, 0); transition: transform var(--m-emph) var(--m-decel); }
.cbx-box > input:indeterminate ~ .cbx-well .cbx-water { transform: translate(3px, 52%); transition: transform var(--m-emph) var(--m-decel); }
.cbx-svg { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); overflow: visible; pointer-events: none; }
.cbx-ck { fill: none; stroke: var(--btn-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0;
  transition: stroke-dashoffset var(--m-micro) var(--m-accel), opacity 0s var(--m-micro); }
.cbx-box > input:checked:not(:indeterminate) ~ .cbx-svg .cbx-ck { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 260ms var(--m-standard) 200ms, opacity 0s 200ms; }
@media (prefers-reduced-motion: reduce) { .cbx-box, .cbx-box * { transition: none !important; } }
@media (forced-colors: active) {
  .cbx-box { border: 0; }
  .cbx-box > input[type=checkbox] { inset: 0; width: 100%; height: 100%; opacity: 1; -webkit-appearance: auto; appearance: auto; }
  .cbx-box > :not(input) { display: none; }
}

/* Pulsanti a pillola con il bordo da 2px; l'azione principale in smalto pieno */
button { display: block; width: 100%; min-height: 48px; border-radius: 999px; border: 2px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink);
  font: inherit; font-size: 16px; font-weight: 800; padding: 10px 18px; cursor: pointer; margin-top: 8px; transition: border-color .2s cubic-bezier(.16, 1, .3, 1); }
button:hover { border-color: var(--ink); }
button:active { transform: scale(.98); }
button.secondary { background: transparent; border-color: var(--control); color: var(--ink); font-weight: 700; }
button.secondary:hover { border-color: var(--ink); background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { button { transition: none; } button:active { transform: none; } }

a { color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.card > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin-top: 10px; }

/* Errori e avvisi: filo e fondo tinti, testo nell'inchiostro normale (mai solo colore: la frase dice cosa fare) */
.error { background: color-mix(in srgb, var(--crit-ink) 14%, var(--surface)); border: 1px solid var(--crit-ink); border-radius: 10px;
  color: var(--ink); font-size: 14px; padding: 10px 12px; margin-bottom: 16px; overflow-wrap: anywhere; }
.error b { font-weight: 800; }
p.error { margin-bottom: 18px; }

@media (max-width: 420px) { .card { padding: 26px 20px; } body { font-size: 16px; } }