/* ATTENZIONE: file posato dal ruolo Ansible «webmail».
 * Modificarlo a mano sul server e' inutile: la prossima esecuzione lo riscrive.
 *
 * La pagina di accesso alla webmail. E' UNA SUPERFICIE SOLA: la cabina scura
 * di RESERV occupa tutto lo schermo, e ogni cosa -- l'insegna del dominio, i
 * campi, la firma -- e' incisa dentro quella materia invece di stare in un
 * riquadro appoggiato sopra.
 *
 * I colori sono quelli del TEMA SCURO del pannello, presi tali e quali: e' la
 * stessa casa, e questa e' la terza porta dopo l'accesso al pannello e la
 * pagina pubblica della macchina.
 *
 * Non si chiama styles/styles.css DI PROPOSITO -- vedi meta.json.
 *
 * Nessun carattere da scaricare, e non e' pigrizia: questa pagina deve
 * aprirsi proprio quando il server e' in difficolta', e ogni dipendenza da un
 * altro host e' un modo in piu' di non aprirsi il giorno che serve. */

:root {
  --fondo:   #16222E;
  --fondo-2: #1D2C3B;
  --vivo:    #ECF2F7;
  --testo:   #C6D1DC;
  --tenue:   #76869B;
  --linea:   rgba(255, 255, 255, 0.09);
  --linea-2: rgba(255, 255, 255, 0.16);
  --azzurro: #82B8E8;
  --pieno:   #3E86CB;
  --pieno-2: #5299DB;
  --verde:   #4CC287;
  --rosso:   #F07B6C;
  --arancio: #F0A053;
  --reticolo:      rgba(198, 209, 220, 0.038);
  --reticolo-fine: rgba(198, 209, 220, 0.016);
  /* Le etichette dell'accesso sono FUNZIONALI, non didascalie: leggono piu'
     chiare del --tenue con cui la pagina di cortesia scrive le sue. */
  --et:         #8FA0B2;
  --segnaposto: #6E7F92;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --scatto: 140ms cubic-bezier(0.3, 0.7, 0.3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--testo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background: var(--fondo);
}

/* --- la cabina --------------------------------------------------------------
   La carta millimetrata vera ha due passi: il quadretto fine e il quadrone
   ogni quattro. Il fine sta sotto e quasi non si vede -- e' quello che da'
   profondita' al fondo senza che si riesca a dire perche'. */

.cabina {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 3vw, 2rem) clamp(1.1rem, 4vw, 3rem);
  background:
    radial-gradient(78% 52% at 16% -10%, rgba(130, 184, 232, 0.13), transparent 60%),
    radial-gradient(58% 44% at 104% 106%, rgba(235, 103, 10, 0.09), transparent 55%),
    linear-gradient(var(--reticolo) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, var(--reticolo) 1px, transparent 1px) 0 0 / 32px 100%,
    linear-gradient(var(--reticolo-fine) 1px, transparent 1px) 0 0 / 100% 8px,
    linear-gradient(90deg, var(--reticolo-fine) 1px, transparent 1px) 0 0 / 8px 100%,
    linear-gradient(165deg, var(--fondo-2), var(--fondo) 55%);
}

/* --- la barra in cima: coordinate, in punta di piedi ------------------------ */

/* Il fondo occupa tutto lo schermo, il contenuto no: su un monitor largo due
   colonne spalancate da un bordo all'altro non si leggono piu' come una cosa
   sola. La misura e' quella della pagina di cortesia. */
.barra,
.corpo,
.piede {
  width: 100%;
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--et);
  padding-bottom: clamp(0.9rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--linea);
}

.barra .qui { color: var(--testo); }

/* --- il corpo ---------------------------------------------------------------
   L'ordine cambia con la larghezza, e non e' un vezzo: su un telefono i campi
   devono stare SUBITO, non dopo tre righe d'aiuto da scorrere. Largo, l'aiuto
   scende sotto l'insegna e l'accesso tiene la colonna destra per intero. */

.corpo {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "insegna" "accesso" "aiuti";
  align-content: center;
  gap: clamp(1.6rem, 4vw, 2.4rem);
  padding: clamp(1.8rem, 5vw, 3.2rem) 0;
}

.insegna { grid-area: insegna; min-width: 0; }
.accesso { grid-area: accesso; min-width: 0; }
.aiuti   { grid-area: aiuti; }

@media (min-width: 62rem) {
  .corpo {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-areas: "insegna accesso" "aiuti accesso";
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: clamp(2.5rem, 6vw, 5rem);
    row-gap: 1.7rem;
  }
  .accesso { align-self: center; }
  /* il filo fra le colonne */
  .corpo::before {
    content: "";
    position: absolute;
    top: 4%;
    bottom: 4%;
    left: calc(51.9% - 0.5px);
    width: 1px;
    background: linear-gradient(transparent, var(--linea-2) 16%, var(--linea-2) 84%, transparent);
  }
}

/* Le squadrette agli angoli: il linguaggio line-art di RESERV, tratto
   costante da un pixel. Sono gli unici ornamenti della pagina. */
.squadra {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 0 solid var(--linea-2);
  opacity: 0.85;
}
.sq1 { top: 0; left: 0;  border-top-width: 1px;    border-left-width: 1px; }
.sq2 { top: 0; right: 0; border-top-width: 1px;    border-right-width: 1px; }
.sq3 { bottom: 0; left: 0;  border-bottom-width: 1px; border-left-width: 1px; }
.sq4 { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* --- l'insegna: di chi e' la posta ----------------------------------------- */

.insegna { animation: sale 620ms cubic-bezier(0.16, 1, 0.3, 1) both; }

.logo {
  display: block;
  height: clamp(38px, 6vw, 54px);
  width: auto;
  max-width: 100%;
  margin-bottom: 1.25rem;
}

/* Il nome del dominio quando non c'e' un marchio: la scritta del pannello che
   si distende. Il rientro ottico serve perche' l'ultima lettera porta la
   propria spaziatura a destra, e senza quel margine il blocco pende. */
.marchio {
  margin: 0 -0.26em 1.25rem 0;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(1.35rem, 4vw, 2.05rem);
  letter-spacing: 0.26em;
  color: var(--vivo);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  animation: distendi 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.claim {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 600;
  color: var(--vivo);
}

/* --- il verbale d'aiuto: la grammatica della pagina di cortesia ------------- */

.aiuti {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linea);
}

.aiuti li {
  display: grid;
  grid-template-columns: minmax(7.5rem, max-content) 1fr;
  align-items: baseline;
  column-gap: 1.5rem;
  row-gap: 0.15rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--linea);
  animation: sale 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.28s + var(--i) * 0.08s);
}

.aiuti .et {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--et);
}

.aiuti .vl { font-size: 0.87rem; }
.aiuti .vl b { color: var(--vivo); font-weight: 600; }

.aiuti code {
  font-family: var(--mono);
  font-size: 0.82em;
  color: var(--azzurro);
  background: rgba(130, 184, 232, 0.10);
  padding: 0.08em 0.34em;
  border-radius: 2px;
  overflow-wrap: anywhere;
}

@media (max-width: 34rem) {
  .aiuti li { grid-template-columns: 1fr; }
}

/* --- l'accesso -------------------------------------------------------------- */

.accesso { animation: sale 620ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }

.titolo {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--et);
}

/* Il modulo lo genera Roundcube, e lo genera come TABELLA a due colonne:
   td.title porta l'etichetta, td.input il campo, e il pulsante sta in un
   p.formbuttons. Qui la tabella si srotola in blocchi. Cambiare questi
   selettori senza guardare l'HTML vero e' il modo piu' rapido di rompere la
   pagina: si legge con «curl https://webmail.<dominio>/». */

.modulo table,
.modulo tbody { display: block; width: 100%; border-collapse: collapse; }

.modulo tr {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.95rem;
}

.modulo td { display: block; padding: 0; }

.modulo td.title label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--et);
}

.modulo input[type="text"],
.modulo input[type="email"],
.modulo input[type="password"] {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.78rem 0.85rem;
  border: 1px solid var(--linea-2);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--vivo);
  transition: border-color var(--scatto), box-shadow var(--scatto), background var(--scatto);
}

.modulo input::placeholder { color: var(--segnaposto); }
.modulo input:hover { background: rgba(255, 255, 255, 0.065); }

.modulo input:focus,
.modulo input:focus-visible {
  outline: none;
  border-color: var(--azzurro);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(130, 184, 232, 0.16);
}

/* Il riempimento automatico di Chrome dipinge il campo di bianco con un
   ombreggiatura interna, e su questo fondo diventa un rettangolo abbagliante.
   Si riporta al colore della cabina con la stessa tecnica: un'ombra interna
   spessa quanto il campo. */
.modulo input:-webkit-autofill,
.modulo input:-webkit-autofill:hover,
.modulo input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--vivo);
  -webkit-box-shadow: 0 0 0 1000px #223140 inset;
  caret-color: var(--vivo);
}

.modulo p.formbuttons { margin: 0.25rem 0 0; }

.modulo button.submit,
.modulo #rcmloginsubmit {
  width: 100%;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 0.92rem;
  padding: 0.82rem;
  border: none;
  border-radius: 2px;
  background: var(--pieno);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(62, 134, 203, 0.24);
  transition: background var(--scatto), transform var(--scatto), box-shadow var(--scatto);
}

.modulo button.submit:hover { background: var(--pieno-2); box-shadow: 0 4px 16px rgba(62, 134, 203, 0.32); }
.modulo button.submit:active { transform: translateY(1px); }
.modulo button.submit:focus-visible { outline: 2px solid var(--azzurro); outline-offset: 2px; }

.sotto {
  margin: 0.75rem 0 0;
  font-size: 0.76rem;
  color: var(--et);
}

/* --- i messaggi -------------------------------------------------------------
   rcmail.display_message() appende dentro #messagestack un
   <div class="<tipo> content">: «error», «warning», «confirmation», «loading».
   Il modello lo colloca sopra i campi, quindi qui basta vestirlo. */

#messagestack { margin-bottom: 1rem; }
#messagestack:empty { display: none; }

#messagestack .content {
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.5rem;
  border-left: 2px solid var(--tenue);
  background: rgba(255, 255, 255, 0.05);
  color: var(--testo);
  animation: sale 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#messagestack .error {
  border-left-color: var(--rosso);
  background: rgba(240, 123, 108, 0.10);
  color: #FFD9D2;
}
#messagestack .warning {
  border-left-color: var(--arancio);
  background: rgba(240, 160, 83, 0.10);
  color: #FFE7C9;
}
#messagestack .confirmation {
  border-left-color: var(--verde);
  background: rgba(76, 194, 135, 0.10);
  color: #D2F5E3;
}

/* --- il piede: la firma di RESERV ------------------------------------------ */

.piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.6rem;
  flex-wrap: wrap;
  padding-top: clamp(0.9rem, 2vw, 1.4rem);
  border-top: 1px solid var(--linea);
  animation: sale 520ms cubic-bezier(0.16, 1, 0.3, 1) 320ms both;
}

.firma { display: inline-flex; align-items: center; gap: 0.75rem; }

/* Il faro del pannello, contenuto: il cuore respira, un anello ogni tanto. */
.faro { position: relative; width: 9px; height: 9px; flex: none; }

.cuore {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--verde);
  animation: respiro 2.6s ease-out infinite;
}

.anello {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--verde);
  opacity: 0;
  animation: sonar 5.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.anello.b { animation-delay: 2.6s; }

.rs {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.32em;
  color: var(--vivo);
  margin-right: -0.32em;
}

.dettaglio { margin: 0; font-size: 0.74rem; color: var(--et); }
.dettaglio b { color: var(--testo); font-weight: 600; }

.piede .tls {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--tenue);
  white-space: nowrap;
}

/* --- senza JavaScript ------------------------------------------------------- */

.senza-js {
  margin: 0 auto;
  padding: 0.8rem 1rem;
  max-width: 44rem;
  font-size: 0.82rem;
  color: #FFE7C9;
  background: rgba(240, 160, 83, 0.12);
  border-left: 2px solid var(--arancio);
}

/* --- gli ingressi ----------------------------------------------------------- */

@keyframes sale {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes distendi {
  from { letter-spacing: 0.1em;  margin-right: -0.1em;  opacity: 0; }
  to   { letter-spacing: 0.26em; margin-right: -0.26em; opacity: 1; }
}

@keyframes respiro {
  0%   { box-shadow: 0 0 0 0 rgba(76, 194, 135, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(76, 194, 135, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 194, 135, 0); }
}

@keyframes sonar {
  0%   { transform: scale(1);   opacity: 0.5; }
  85%  { transform: scale(5.5); opacity: 0; }
  100% { transform: scale(5.5); opacity: 0; }
}

@media (max-width: 34rem) {
  .barra { font-size: 0.58rem; letter-spacing: 0.12em; }
  .piede { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .marchio { letter-spacing: 0.18em; margin-right: -0.18em; }
}

/* Chi ha chiesto meno movimento non lo riceve: niente sonar, niente ingressi.
   I contenuti restano tutti. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .anello { display: none; }
}