/* ===========================================================================
   VISTA CAMPO — intensita' MINIMA.
   Si attiva con `<body class="campo">` quando la sezione aperta e' di campo
   (ronde, timbratura, incasso sul campo).

   La regola, da `06-viste-e-ruoli.md` e `08-prototipo-interfaccia.md`:
   contrasto e dimensione prima di tutto, si lavora al buio, nessun nucleo
   animato, bersagli oltre 78px. Un'interfaccia che impressiona ma fa sbagliare
   una guardia alle tre di notte e' un fallimento, per quanto bella sia.

   ⚠️ 78px vale ANCHE per la casella del codice: si scrive con i guanti.
   =========================================================================== */

body.campo{ --scala:1.16 }

/* Nessun nucleo sul campo: ogni pixel e' un bersaglio. */
body.campo .palco,
body.campo .palco-chat{display:none}

/* Niente animazioni: distraggono, e di notte abbagliano. */
body.campo *,
body.campo *::before,
body.campo *::after{
  animation-duration:0s !important;
  animation-iteration-count:1 !important;
  transition-duration:0s !important;
}

body.campo .main{gap:14px}

/* Bersagli grandi. */
body.campo button.agisci,
body.campo .schede button,
body.campo form.campi input,
body.campo form.campi select,
body.campo form.campi textarea{
  min-height:78px;
  font-size:calc(16px * var(--scala));
}
body.campo button.agisci{
  letter-spacing:.14em;
  width:100%;
  padding:0 18px;
}
body.campo .azioni{flex-direction:column;gap:12px}
body.campo .schede{gap:10px}
body.campo .schede button{flex:1 1 150px}
body.campo form.campi{grid-template-columns:minmax(0,1fr);gap:14px}

/* ⭐ Il bersaglio piu' importante di tutti: il campo del codice del punto.
   Testo grande, monospazio, tutto maiuscolo: si confronta con un'etichetta
   stampata, al buio, con i guanti. */
body.campo input.codice{
  min-height:78px;
  font:600 calc(20px * var(--scala))/1.2 var(--f-mono);
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
}

/* Le righe di elenco sul campo diventano bersagli, non testo. */
body.campo .righe li{padding:14px 0;font-size:calc(15px * var(--scala))}
body.campo button.bersaglio{
  display:block;width:100%;min-height:78px;text-align:left;cursor:pointer;
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--fg);
  padding:12px 14px;border-radius:3px;margin-bottom:10px;
  font-size:calc(15px * var(--scala));line-height:1.4;
}
body.campo button.bersaglio:hover{border-color:var(--state)}
body.campo button.bersaglio small{display:block;color:var(--muted);font-size:calc(12.5px * var(--scala))}

/* Lo stato di una riga in coda: si vede da lontano, e si legge senza colore
   (chi non distingue il verde dal rosso deve capire lo stesso). */
.coda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.coda li{
  border:1px solid var(--line-2);background:var(--panel);padding:10px 12px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  font-size:13.5px;
}
.coda li .motivo{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.coda li.in-attesa{border-left:3px solid var(--warn)}
.coda li.inviata{border-left:3px solid var(--talk)}
.coda li.rifiutata{border-left:3px solid var(--think)}

/* L'avvertenza su HTTPS: fotocamera e GPS funzionano solo su `https://` o
   `localhost`. Su `http://10.0.0.x` il browser non li chiede nemmeno — e la
   pagina lo scrive, invece di sembrare rotta. */
.avvertenza-contesto{
  margin:0;padding:11px 13px;border:1px dashed var(--warn);color:var(--warn);
  font:12px/1.55 var(--f-body);
}

@media (max-width:860px){
  body.campo .main{padding:12px}
  body.campo .chat{display:none}  /* sul campo tre azioni e basta: la chat non serve */
}