/* Stili comuni delle schermate di giglio-chat. Classi g-*, niente framework.
   Pensato per il Ranger2 (schermo piccolo, dita, a volte guanti): tocchi grandi, contrasto alto. */

:root {
  --g-sfondo: #f7f7f8;
  --g-carta: #ffffff;
  --g-testo: #14171a;
  --g-tenue: #5b6672;
  --g-bordo: #d8dde3;
  --g-accento: #1a5fb4;
  --g-accento-testo: #ffffff;
  --g-errore: #c62828;
  --g-ok: #1a7f37;
  --g-mio: #dceaff;
  --g-raggio: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --g-sfondo: #14171a;
    --g-carta: #1c2126;
    --g-testo: #eef1f4;
    --g-tenue: #9aa7b4;
    --g-bordo: #2b323a;
    --g-accento: #5fa8ff;
    --g-accento-testo: #0b1016;
    --g-errore: #ff8a80;
    --g-ok: #7ee2a8;
    --g-mio: #1f3550;
  }
}

* { box-sizing: border-box; }

.g-corpo {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--g-testo);
  background: var(--g-sfondo);
  -webkit-text-size-adjust: 100%;
}

.g-centrato {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

.g-scheda {
  width: 100%;
  max-width: 28rem;
  background: var(--g-carta);
  border: 1px solid var(--g-bordo);
  border-radius: var(--g-raggio);
  padding: 1.5rem;
}

.g-marchio { margin: 0 0 .5rem; font-size: 1.6rem; letter-spacing: .02em; }
.g-nota { margin: 0 0 1.2rem; color: var(--g-tenue); }

.g-etichetta { display: block; margin: 1rem 0 .35rem; font-size: .9rem; color: var(--g-tenue); }

.g-campo {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1.1rem;
  padding: .7rem .8rem;
  color: var(--g-testo);
  background: var(--g-sfondo);
  border: 1px solid var(--g-bordo);
  border-radius: var(--g-raggio);
}

.g-campo:focus { outline: 2px solid var(--g-accento); outline-offset: 1px; }

.g-bottone {
  margin-top: 1.2rem;
  width: 100%;
  min-height: 48px;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--g-accento-testo);
  background: var(--g-accento);
  border: 0;
  border-radius: var(--g-raggio);
}

.g-bottone[disabled] { opacity: .55; }

.g-sola-lettura { margin: 1rem 0 0; font-weight: 600; }
.g-esito { margin: .5rem 0 0; min-height: 1.4em; white-space: pre-wrap; }
.g-esito.g-errore { color: var(--g-errore); }

/* Striscia degli errori del client: sopra tutto, si chiude col tocco. */
.g-striscia {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: .55rem .8rem;
  padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
  font-size: .85rem;
  line-height: 1.3;
  color: #ffffff;
  background: #c62828;
  overflow-wrap: anywhere;
}