/* Gerico Banco — le pagine servite dal server (accesso e home provvisoria).
   Regole: ~/gerico/design-system/kit (01-LINGUAGGIO: nero, un solo giallo, display + corsivo
   editoriale; il testo chiaro è --g-paper, non bianco). Niente stili inline: CSP 'self'.
   Gli stili dell'app vera (React) arrivano con le tappe successive. */

.banco { min-height: 100vh; background: var(--g-black); color: var(--g-paper); font-family: var(--g-font-body); }
.banco [hidden] { display: none !important; }

/* Tipografia: il salto, non la scala */
.banco-kicker { font-family: var(--g-font-editorial); font-style: italic; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1; color: var(--g-paper); margin-bottom: 2px; }
.banco-titolo { font-family: var(--g-font-display); text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 4rem); line-height: var(--g-lh-display); letter-spacing: var(--g-ls-tight); color: var(--g-paper); overflow-wrap: break-word; margin-bottom: var(--g-space-4); }
.banco-testo { font-size: var(--g-t-body); line-height: var(--g-lh-body); color: var(--g-paper); margin-bottom: var(--g-space-4); max-width: 42ch; }
.banco-nota { font-size: var(--g-t-small); color: var(--g-muted); margin-top: 6px; }

/* Accesso: senza menù, al centro */
.banco--accesso { display: block; }
.banco-accesso { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; width: min(420px, 100%); margin: 0 auto; padding: var(--g-space-6) var(--g-space-3); }
.banco-accesso__logo { width: 132px; height: auto; margin-bottom: var(--g-space-6); }
.banco .banco-accesso__form { grid-template-columns: 1fr; gap: var(--g-space-3); max-width: none; }
.banco .g-form__actions { justify-content: flex-start; }   /* le azioni a sinistra: il kit le centra per le landing */
.banco-accesso__sotto { margin-top: var(--g-space-4); font-size: var(--g-t-small); color: var(--g-muted); }
.banco-accesso__sotto a { color: var(--g-muted); border-bottom: 1px solid var(--g-line); }
.banco-accesso__sotto a:hover { color: var(--g-yellow); border-color: var(--g-yellow); }
.banco-codice { font-family: var(--g-font-display); font-size: 30px; letter-spacing: .28em; height: 62px; max-width: 280px; }

/* QR: scuro su chiaro, dentro un riquadro chiaro suo */
.banco-qr { width: 220px; padding: 8px; background: var(--g-paper); border-radius: var(--g-r-field); margin-bottom: var(--g-space-3); }
.banco-qr svg { display: block; width: 100%; height: auto; }
.banco-dettaglio { margin-bottom: var(--g-space-4); font-size: var(--g-t-small); color: var(--g-muted); }
.banco-dettaglio summary { cursor: pointer; }
.banco-segreto { display: block; margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: .08em; color: var(--g-paper); user-select: all; }

/* Codici di riserva */
.banco-riserva { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-bottom: var(--g-space-4); }
.banco-riserva code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; letter-spacing: .06em; color: var(--g-paper); user-select: all; }

/* Home provvisoria */
.banco-barra { display: flex; align-items: center; justify-content: space-between; padding: var(--g-space-3) var(--g-pad-x); border-bottom: 1px solid var(--g-line); }
.banco-barra__logo img { width: 110px; height: auto; display: block; }
.banco-barra__esci { background: none; border: 1px solid var(--g-line); color: var(--g-paper); border-radius: var(--g-r-pill); padding: 8px 16px; font-size: var(--g-t-small); cursor: pointer; }
.banco-barra__esci:hover { background: var(--g-yellow); color: var(--g-black); border-color: var(--g-yellow); }
.banco-main { padding: var(--g-space-6) var(--g-pad-x); }