/* Comando — foglio di stile.
 *
 * Nero e giallo Cage Warriors. Il giallo e' preso dai loghi ufficiali:
 * 06_MEDIA/LOGHI/CW logos/CW_Landscape_YELLOW_RGB_LR.png, decodificato pixel
 * per pixel il 16 agosto 2026. E' un colore piatto, #F0F028, su tutti i 19.818
 * pixel opachi del file (e su tutti gli 837.786 del simbolo ad alta
 * risoluzione). Non e' stimato a occhio.
 *
 * IL GIALLO SI USA POCO. Sta sul conto alla rovescia, che deve dominare, e su
 * cio' che riguarda Gabry. Niente altro. Se fosse ovunque non evidenzierebbe
 * piu' niente.
 *
 * SI APRE DAL TELEFONO. Nessun tocco sotto i 44px, nessun testo sotto i 13px,
 * e il corpo a 17px perche' sotto i 16 iOS ingrandisce da solo i campi.
 *
 * Le classi dei grafici sono in archivio/stile-cruscotto.css.
 */

:root {
  --fondo:      #0A0A0A;   /* nero: e' meta' del marchio */
  --carta:      #141414;
  --carta-alta: #1C1C1C;
  --bordo:      #2B2B2B;
  --testo:      #F7F5F0;
  --fioco:      #9A948C;
  --fioco-piu:  #6E6862;

  --cw:         #F0F028;   /* giallo Cage Warriors, dal file */
  --cw-velo:    rgba(240,240,40,.10);
  --cw-bordo:   rgba(240,240,40,.42);

  --andrea:     #5BC8FF;   /* azzurro. Giallo/azzurro e' la coppia che regge
                              anche a chi non distingue i colori: si separano
                              per tinta, non per luminosita' */
  --andrea-velo: rgba(91,200,255,.10);
  --andrea-bordo: rgba(91,200,255,.42);

  --rosso:      #FF6B4A;   /* solo per lo scaduto e gli errori */

  --sp: 16px;
  --raggio: 14px;
  --tocco: 44px;           /* misura minima di qualunque cosa si tocchi */
  --testata: 150px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Una regola d'autore con display: batte [hidden] dello user agent. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--fondo);
  color: var(--testo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

.conto-numero { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .puntino { animation: none; opacity: .8; }
  * { transition: none !important; }
}

/* ---------------------------------------------------------- accesso */

.accesso { min-height: 100svh; display: grid; place-items: center; padding: var(--sp); }
.accesso-scatola { width: 100%; max-width: 380px; }
.accesso-occhiello {
  color: var(--cw); font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.accesso-titolo {
  font-size: clamp(52px, 18vw, 76px);
  font-weight: 900; letter-spacing: -.045em; line-height: .95;
  margin: 6px 0 10px;
}
.accesso-sotto { color: var(--fioco); margin-bottom: 28px; }

.etichetta {
  display: block; margin: 16px 0 6px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fioco);
}
input {
  width: 100%; min-height: var(--tocco); padding: 15px 14px;
  background: var(--carta); color: var(--testo);
  border: 1px solid var(--bordo); border-radius: 10px;
  font-size: 17px; font-family: inherit;
}
input:focus { outline: 2px solid var(--cw); outline-offset: 1px; }

button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

#bottone-accesso {
  width: 100%; min-height: 52px; margin-top: 26px; padding: 16px;
  background: var(--cw); color: #0A0A00;
  border: 0; border-radius: 10px;
  font-size: 17px; font-weight: 800; letter-spacing: .02em;
}
#bottone-accesso:disabled { opacity: .5; }

.errore {
  margin-top: 14px; padding: 12px 14px;
  background: rgba(255,107,74,.12); border: 1px solid rgba(255,107,74,.4);
  border-radius: 10px; color: #FFB7A3; font-size: 15px;
}

/* ---------------------------------------------------------- testata */

.testata {
  position: sticky; top: 0; z-index: 20;
  background: var(--fondo);
  border-bottom: 1px solid var(--bordo);
  padding: calc(env(safe-area-inset-top) + 12px) var(--sp) 12px;
}
.testata-riga { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.conto { display: flex; align-items: baseline; gap: 10px; min-width: 0; }

/* l'elemento dominante */
.conto-numero {
  font-size: clamp(62px, 22vw, 96px);
  font-weight: 900; letter-spacing: -.055em; line-height: .8;
  color: var(--cw);
}
.conto-unita {
  font-size: 13px; font-weight: 700; line-height: 1.15;
  letter-spacing: .1em; text-transform: uppercase; color: var(--testo);
}
.esci {
  background: none; border: 1px solid var(--bordo); color: var(--fioco);
  border-radius: 10px; min-height: var(--tocco); min-width: var(--tocco);
  padding: 0 14px; font-size: 14px; flex: none;
}
.aggiornamento { margin-top: 10px; font-size: 13.5px; color: var(--fioco); }

/* ---------------------------------------------------------- corpo */

main { padding: 4px var(--sp) 120px; max-width: 720px; margin: 0 auto; }

.caricamento { color: var(--fioco); padding: 40px 0; text-align: center; }
.puntino {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cw); animation: pulsa 1s infinite ease-in-out;
}
@keyframes pulsa { 0%,100% { opacity:.25 } 50% { opacity:1 } }

h2.sezione {
  font-size: 13px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fioco);
  margin: 36px 0 12px;
  scroll-margin-top: var(--testata);   /* la testata e' appiccicata */
}
h2.sezione:first-child { margin-top: 14px; }

.scheda {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 18px; margin-bottom: 12px;
}

/* --- chi e' il destinatario, senza bisogno di leggere --- */

.di-gabry  { border-left: 4px solid var(--cw); }
.di-andrea { border-left: 4px solid var(--andrea); }

.chi {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.chi.gabry  { color: var(--cw);     background: var(--cw-velo);     border: 1px solid var(--cw-bordo); }
.chi.andrea { color: var(--andrea); background: var(--andrea-velo); border: 1px solid var(--andrea-bordo); }

/* --- il compito da girare --- */

.compito-titolo { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.compito-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.compito-blocco { margin-top: 14px; }
.compito-etichetta {
  display: block; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fioco-piu);
  margin-bottom: 4px;
}
.compito-azione { font-size: 17px; font-weight: 600; line-height: 1.4; }
.compito-blocco p { font-size: 15.5px; }

.cartella {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  background: var(--carta-alta); border: 1px solid var(--bordo);
  border-radius: 8px; padding: 10px 12px;
  overflow-wrap: anywhere;
}
.manca { font-size: 14.5px; color: var(--cw); }

/* --- promemoria --- */

.promemoria { padding: 16px 16px 14px; }
.prom-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prom-testo { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.prom-note { font-size: 13.5px; color: var(--fioco-piu); margin-top: 5px; }
.prom-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px;
}
.quando { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--fioco); }
.quando.vicino  { color: var(--cw); }
.quando.scaduto { color: var(--rosso); }

/* --- il pulsante fatto: si tocca col pollice, quindi e' grande --- */

.fatto {
  min-height: var(--tocco); min-width: 108px;
  padding: 0 18px;
  background: transparent; color: var(--testo);
  border: 1px solid var(--bordo); border-radius: 999px;
  font-size: 14.5px; font-weight: 700;
  transition: background .12s, border-color .12s, color .12s;
}
.fatto:hover, .fatto:focus-visible { border-color: var(--fioco); }
.fatto:active { transform: scale(.97); }
.fatto[disabled] { opacity: .55; }
.fatto.gabry:active  { background: var(--cw-velo);     border-color: var(--cw-bordo); }
.fatto.andrea:active { background: var(--andrea-velo); border-color: var(--andrea-bordo); }

.riga-uscita { opacity: 0; transform: translateX(14px); transition: opacity .18s, transform .18s; }

/* --- idee --- */

.idea-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.idea-titolo { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.idea-descrizione { margin-top: 10px; font-size: 15.5px; }
.idea-pie { margin-top: 14px; font-size: 13px; color: var(--fioco-piu); }

.pillola {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--bordo); color: var(--fioco); white-space: nowrap;
}
.pillola.cw { color: var(--cw); border-color: var(--cw-bordo); background: var(--cw-velo); }

/* --- messaggi --- */

.avviso {
  border-left: 3px solid var(--rosso); background: rgba(255,107,74,.1);
  padding: 13px 15px; border-radius: 0 10px 10px 0; margin-bottom: 12px; font-size: 14.5px;
}

.vuoto {
  border: 1px dashed var(--bordo); border-radius: var(--raggio);
  padding: 20px 18px; margin-bottom: 12px;
}
.vuoto-titolo { font-weight: 700; margin-bottom: 6px; }
.vuoto p { color: var(--fioco); font-size: 14.5px; }

.nota-coda { font-size: 13px; color: var(--fioco-piu); margin-top: 6px; padding: 0 2px; }

/* --- il collegamento a PostFast --- */

.postfast {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; margin-top: 34px; padding: 0 18px;
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  color: var(--testo); text-decoration: none;
  font-size: 16px; font-weight: 700;
}
.postfast:hover, .postfast:focus-visible { border-color: var(--cw-bordo); color: var(--cw); }
.postfast .freccia { color: var(--fioco); font-size: 15px; font-weight: 400; }

/* ---------------------------------------------------------- barra */

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(14,14,14,.95); backdrop-filter: blur(12px);
  border-top: 1px solid var(--bordo);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra button {
  background: none; border: 0; color: var(--fioco);
  min-height: var(--tocco); padding: 15px 4px 16px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.barra button:active { color: var(--cw); }

@media (min-width: 720px) {
  .barra { grid-template-columns: repeat(3, auto); justify-content: center; gap: 8px; }
  .barra button { padding: 15px 30px 16px; }
}