/*
 * Componenti: superfici, tabelle, bottoni, form, esiti, modale, codici.
 *
 * Le classi .ucode sono la parte più importante di questo foglio: sono il
 * linguaggio visivo dei codici-erogazione, cioè dell'oggetto centrale del pilot.
 * Il prototipo ne prevedeva quattro varianti pensate per il ciclo delle
 * prestazioni; qui gli stati sono due — disponibile e erogato — più uno per la
 * donazione con resto in sospeso.
 */

/* --------------------------------------------------------------- superfici -- */

.panel {
  /* Senza min-width:0 una tabella larga dentro una colonna di griglia non lascia
     restringere la colonna, e il pannello sfora invece di far scorrere la tabella. */
  min-width: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
  font-weight: 780;
}

.panel-body {
  padding: 20px;
}

.empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed #d9cec2;
  border-radius: 14px;
  background: #fffaf5;
}

/* ------------------------------------------------------------ riquadri KPI -- */

/*
 * I quattro numeri in cima alla dashboard. Sono quelli del prototipo approvato,
 * misura per misura: 20px di spaziatura, valore a 31px con peso 820 e crenatura
 * negativa, e il cerchio di tinta che sborda dall'angolo in basso a destra.
 *
 * La tinta arriva da una classe e non da uno `style=` in linea come faceva il
 * prototipo: il contratto interno vieta gli stili in linea tranne le larghezze
 * delle barre, che sono un dato. Qui la tinta e' una scelta fissa per riquadro.
 */

.kpi {
  position: relative;
  overflow: hidden;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.kpi::after {
  content: "";
  position: absolute;
  right: -25px;
  bottom: -25px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--tone, var(--lavender));
  opacity: .6;
}

/* Il contenuto sopra il cerchio: senza, un valore lungo ci finisce sotto. */
.kpi > * {
  position: relative;
  z-index: 1;
}

.kpi-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.kpi-value {
  margin-top: 8px;
  font-size: 31px;
  font-weight: 820;
  letter-spacing: -.03em;
}

.kpi-note {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}

.kpi.tone-mint { --tone: var(--mint); }
.kpi.tone-amber { --tone: var(--amber); }
.kpi.tone-coral { --tone: var(--coral); }
.kpi.tone-lavender { --tone: var(--lavender); }

/* --------------------------------------------------------------- file --------- */
/*
   Il pulsante «Choose File» è del browser, e porta la lingua del browser: in
   un'interfaccia tutta in italiano era l'unico punto che parlava un'altra lingua,
   con un bordo e un font che non sono di nessun altro comando della pagina.

   L'input resta — è lui che apre il selettore e che porta il file — ed è nascosto
   con la tecnica di `.visually-hidden` e non con `display: none`: spento con
   `display` uscirebbe dall'ordine di tabulazione, e chi naviga da tastiera non
   potrebbe più scegliere un file. La `<label for>` fa da pulsante, e il contorno
   del fuoco va disegnato su di lei, perché il fuoco lo prende l'input invisibile.
*/

.file-field {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.file-azione {
  cursor: pointer;
}

.file-input:focus-visible + .file-azione {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* Il file scelto, o il fatto che non ce n'è uno: senza questa riga il nostro
   pulsante direbbe meno di quello del browser, che almeno stampava «no file
   selected» accanto a sé. */
.file-nome {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- bottoni -- */

.btn {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 720;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
  transition: transform .12s, box-shadow .12s;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

.btn-mint {
  background: var(--mint);
  border-color: var(--mint);
  color: #214f3b;
}

/* Il solo pulsante che porta fuori dall'applicazione. Neutro di proposito: è una
   verifica facoltativa, non il passo successivo, e in corallo si sarebbe letto come
   l'azione principale della riga. */
.btn-chain {
  background: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 70%, var(--ink));
  text-decoration: none;
  white-space: nowrap;
}

.btn-danger {
  background: #fff6f6;
  border-color: #e6baba;
  color: #9a3737;
}

.btn-small {
  padding: 7px 10px;
  font-size: 12px;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: #eee8e1;
}

/* ----------------------------------------------------------------- esiti --- */

.banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
}

.banner strong {
  white-space: nowrap;
}

.banner.ok { background: #edf8f1; border-color: #c7e3d2; color: #285d46; }
.banner.warn { background: #fff6e7; border-color: #eed39c; color: #79591d; }
.banner.danger { background: #fff0f0; border-color: #e8baba; color: #8d3535; }
.banner.info { background: #f0f4fb; border-color: #cbd9ed; color: #425a7c; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}

.chip.ok { background: #ddf1e6; color: #276246; }
.chip.warn { background: #fff0c6; color: #795b16; }
.chip.danger { background: #f7dddd; color: #923b3b; }
.chip.info { background: #e8e4f5; color: #665294; }
.chip.neutral { background: #eeeae5; color: #67615a; }

.progress {
  height: 9px;
  border-radius: var(--radius-pill);
  background: #eee7df;
  overflow: hidden;
}

.progress span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--coral), color-mix(in srgb, var(--coral) 55%, var(--amber)));
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  max-width: 420px;
  padding: 13px 16px;
  border-radius: 13px;
  background: #292825;
  color: #fff;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}

.toast.show {
  opacity: 1;
  transform: none;
}

.toast.error {
  background: #9f3d3d;
}

/* ----------------------------------------------------------------- dati ---- */

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

/* Dentro una colonna stretta la larghezza minima taglierebbe le ultime colonne:
   qui la tabella si adatta e i testi vanno a capo. */
.split .table,
.grid.two .table {
  min-width: 0;
}

.split .table td,
.grid.two .table td {
  overflow-wrap: anywhere;
}

.table th {
  padding: 11px 13px;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.table td {
  padding: 13px;
  border-bottom: 1px solid #eee6de;
  font-size: 13px;
  vertical-align: top;
}

.table tr:last-child td {
  border-bottom: 0;
}

.table tr:hover td {
  background: #fffaf4;
}

/* I pulsanti della riga stanno uno sotto l'altro, non in fila.
   In fila la colonna si allargava a ogni pulsante aggiunto — Attestato, Vedi su
   blockchain, Link donatore, Apri donazione — e quella larghezza la pagava la
   colonna dei codici, che è dove si lavora. Impilati, la colonna è larga quanto il
   pulsante più lungo e non di più. `align-items: stretch` li rende tutti della
   stessa larghezza: quattro pulsanti di larghezze diverse allineati a destra
   disegnano un bordo a gradini. */
.table td .actions {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  min-width: 132px;
}

/* Un pulsante impilato ha il testo al centro: allineato a sinistra, in una colonna
   di pulsanti della stessa larghezza, le etichette corte sembrano scivolate. */
.table td .actions .btn {
  text-align: center;
}

/* --- prossimo passo --- */

/* La cella che dice cosa fare adesso. Il pallino porta il tono, il testo porta il
   fatto: chi non distingue i colori legge la stessa cosa. */
.next-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 260px;
  line-height: 1.45;
}

.next-step .dot {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tono, var(--line));
  font-size: 10px;
  font-weight: 800;
}

/* Da fare adesso: è il tono che l'occhio deve trovare scorrendo la colonna. */
.next-step.act {
  --tono: var(--amber);
  font-weight: 600;
}

/* In attesa di qualcosa che non dipende da chi guarda. */
.next-step.wait {
  --tono: var(--lavender);
  color: var(--muted);
}

/* Chiuso senza aver prodotto nulla — un bonifico scartato. */
.next-step.off {
  --tono: var(--line);
  color: var(--muted);
}

.next-step.done {
  --tono: var(--mint);
  color: var(--mint-deep);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #eee7df;
}

.stat-row:last-child {
  border-bottom: 0;
}

.stat-row span:first-child {
  color: var(--muted);
}

/* Riepilogo in testa a una modale: le righe di dettaglio su cui si sta per agire.
   Prima era un `.panel` con l'ombra spenta a mano, in due punti diversi. */
.summary {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  padding: 4px 16px;
  margin-bottom: var(--gap);
}

.timeline {
  display: grid;
}

.timeline-item {
  position: relative;
  padding: 0 0 18px 26px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: -3px;
  width: 1px;
  background: #ddd2c8;
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 3px solid var(--paper);
  background: var(--mint);
}

.timeline-title {
  font-size: 13px;
  font-weight: 750;
}

.timeline-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}

/* ------------------------------------------------- codici-erogazione ------- */

.ucode-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 320px;
}

.ucode {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.ucode.spent { background: var(--unit-used-bg); color: var(--unit-used-ink); border-color: #9ccdb3; }
.ucode.free { background: var(--unit-free-bg); color: var(--unit-free-ink); border-color: var(--line); }

/* --- il codice come riquadro largo: da riscattare, o riscattato ---
   Era una pastiglia grigia di tre cifre, cliccabile senza dirlo. Qui il codice
   intero sta in cima, il nome della prestazione sotto e lo stato in fondo, in un
   riquadro largo quanto la cella. Le due varianti hanno la **stessa misura**: il
   `min-height` serve a questo, perché la riga dell'invito va a capo e quella di
   «Riscattato» no — senza, un codice riscattato si accorciava di un terzo e la
   colonna diventava un gradino. Su una donazione con molti codici la cella diventa
   alta, e va bene: un elenco di cose da fare che occupa spazio è un elenco di cose
   da fare. */

.ucode-azioni {
  display: grid;
  gap: 6px;
  max-width: 320px;
  margin-top: 6px;
}

.ucode-big {
  display: grid;
  align-content: start;
  gap: 2px;
  width: 100%;
  min-height: 76px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.ucode-big.free {
  background: var(--unit-free-bg);
  color: var(--unit-free-ink);
  cursor: pointer;
}

.ucode-big.free:hover {
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 9%, var(--paper));
  box-shadow: var(--shadow-hover);
}

.ucode-big.spent {
  background: var(--unit-used-bg);
  color: var(--unit-used-ink);
  border-color: #9ccdb3;
}

.ucode-big-codice {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

.ucode-big.free .ucode-big-codice { color: var(--ink); }

.ucode-big-nome {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.ucode-big-stato {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.3;
}

.ucode-big.free .ucode-big-stato { color: var(--coral-deep); }

.ucode-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding: 0 4px;
}

.ucode-legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--muted);
}

.ucode-legend i {
  display: grid;
  place-items: center;
  font-size: 9px;
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid transparent;
}

/* ----------------------------------------------------------------- form ---- */

.form {
  display: grid;
  gap: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.field {
  display: grid;
  gap: 6px;
  /* `.field` è una cella di `.form-grid` e viene tirata all'altezza della riga: senza
     questo lo spazio in eccesso finisce nelle sue righe automatiche — cioè nell'input —
     e un campo senza testo d'aiuto, accanto a uno che l'ha, diventa più alto. */
  align-content: start;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 11px;
  font-weight: 760;
  color: #5e5851;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #ddd3c9;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

.field textarea {
  min-height: 110px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Un'altezza sola per tutti i controlli, qualunque sia il tipo: «date» porta con sé il
   selettore del calendario e `select` la propria altezza intrinseca, e affiancati in una
   riga di due colonne quei due o tre pixel si vedono. Restano fuori i tipi che hanno
   una forma propria per disegno: spunta, colore, caricamento. */
.field input:not([type="checkbox"]):not([type="color"]):not([type="file"]),
.field select {
  height: 46px;
}

.field input[type="color"] {
  height: 42px;
  padding: 4px;
  cursor: pointer;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 13%, transparent);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}

.field .error {
  font-size: 11px;
  font-weight: 700;
  color: var(--danger);
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.field-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--coral);
}

.help {
  font-size: 11px;
  color: var(--muted);
}

/* ---------------------------------------------------------------- modale --- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(30, 27, 24, .55);
}

.modal {
  width: min(680px, 100%);
  max-height: 90vh;
  overflow: auto;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .25);
}

/* Più larga per l'esito di una verifica: tredici controlli su una colonna stretta
   diventano tredici righe che vanno a capo. */
.modal-wide {
  width: min(880px, 100%);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
}

.modal-body {
  padding: 20px;
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 20px 20px;
}


/* Un pulsante dentro una tabella non va a capo.
   «Registra erogazione» in una cella strizzata diventava «Registra erogazio / ne»:
   tre righe di pulsante, con la parola spezzata a metà. La tabella preferisce
   scorrere — `.table-wrap` lo fa già, con il suo `tabindex` e il suo ruolo — che
   spezzare l'etichetta di ciò su cui si deve cliccare. */
.table .actions .btn {
  white-space: nowrap;
}

/* ------------------------------------------------------------------------- */
/* I tre passi della configurazione iniziale                                 */
/*                                                                           */
/* Un indicatore che è anche il comando: il passo corrente è uno `<span>`,    */
/* gli altri due sono pulsanti veri. La differenza si vede — il corrente ha   */
/* il bordo del colore della Fondazione e il numero pieno — perché un         */
/* indicatore in cui tutti i passi si somigliano non dice a che punto si è,   */
/* che è la sola cosa per cui esiste.                                        */
/*                                                                           */
/* Non c'è nessuna linea di collegamento fra i tre riquadri: sotto gli 820px  */
/* diventano una colonna, e una linea orizzontale disegnata fra elementi che  */
/* si impilano resta appesa nel vuoto.                                       */
/* ------------------------------------------------------------------------- */

.passi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 var(--gap);
  padding: 0;
  list-style: none;
}

.passo-tocco {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
}

button.passo-tocco {
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}

button.passo-tocco:hover {
  border-color: color-mix(in srgb, var(--coral) 55%, var(--line));
  box-shadow: var(--shadow-hover);
}

.passo-numero {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.passo-testo {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.passo-testo b {
  font-size: 13px;
  font-weight: 720;
}

.passo-testo .tiny {
  color: var(--muted);
}

.passo.corrente .passo-tocco {
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 7%, var(--paper));
}

.passo.corrente .passo-numero {
  border-color: var(--coral);
  background: var(--coral);
  color: #fff;
}

/* Un passo già salvato: il numero verde è la stessa convenzione delle
   pastiglie di stato — verde vuol dire fatto — e non un secondo linguaggio. */
.passo.fatto .passo-numero {
  border-color: var(--mint);
  background: var(--mint);
  color: var(--unit-used-ink);
}

.passo.prossimo .passo-testo b {
  color: var(--muted);
}

@media (max-width: 820px) {
  .passi { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------------- */
/* Le prestazioni dichiarate dalla campagna                                  */
/*                                                                           */
/* Una riga per prestazione: codice, nome modificabile, stato. Non è una      */
/* `.form-grid` perché i campi non hanno etichette proprie — l'etichetta è la */
/* colonna — e perché il numero di righe lo decide chi compila: con dieci     */
/* prestazioni la maschera resta leggibile solo se ogni riga è una riga.      */
/* ------------------------------------------------------------------------- */

.prestazioni {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

/* Qui c'erano `max-height: 420px` e `overflow-y: auto`, per non far crescere la
   pagina con trenta righe. Guardando un fotogramma si vedeva il difetto che
   producevano: con dieci prestazioni la decima veniva tagliata a metà dal bordo del
   contenitore, senza barra visibile e senza alcun segno che l'elenco continuasse —
   cioè l'ultima riga esisteva e nessuno poteva sapere che c'era. Un riquadro che
   scorre dentro una pagina che scorre già è la forma peggiore di entrambi: la pagina
   cresce, e va bene, perché è l'unico posto in cui quelle righe si compilano. */

.prestazione {
  display: grid;
  /* 118px e non 74: il codice non è più un'etichetta ma una casella che si scrive, e
     deve mostrare per intero i sedici caratteri che il server accetta — un campo dove
     «MUS-INDIVIDUALE» scorre via mentre lo si digita si compila a tentoni. */
  grid-template-columns: 118px 1fr auto;
  align-items: center;
  gap: 10px;
}

/* Il codice si distingue per il carattere e per le maiuscole, **non** per la misura:
   rimpicciolire il testo accorcia la casella — 35px contro 41 — e le due caselle della
   stessa riga si disallineano. Non lo vede nessun controllo sull'HTML, che è valido in
   entrambi i casi; l'ha visto un browser aperto apposta. Stessa regola delle altezze
   dei campi nelle maschere. */
.prestazione input.prestazione-codice {
  /* `.mono` porta con sé `font-size: .9em`, ed è da lì che veniva la differenza di
     altezza fra le due caselle della stessa riga: stessa `padding`, stessa
     `line-height`, testo più piccolo, scatola più bassa. Qui il carattere resta
     monospaziato — serve a leggere un codice — e la misura torna quella del vicino. */
  font-size: inherit;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* `line-height` dichiarata, e non lasciata al carattere: le due caselle della riga sono
   una monospaziata e una no, e le metriche intrinseche dei due caratteri danno due
   altezze diverse — 39px e 41 — a parità di `font-size` e `padding`. Fissandola qui
   l'altezza dipende da ciò che il foglio decide, non dal font che il sistema trova. */
.prestazione input {
  width: 100%;
  padding: 8px 11px;
  line-height: 1.5;
  border: 1px solid #ddd3c9;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

/* Lo stesso alone dei campi delle maschere, con la stessa percentuale: due fuochi
   diversi nella stessa schermata si notano. */
.prestazione input:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 13%, transparent);
}

/* Una prestazione già assegnata a una donazione non si tocca: il campo lo dice
   con il colore, e l'attributo `readonly` con il comportamento. */
.prestazione input[readonly] {
  background: var(--paper-2);
  color: var(--muted);
}

.prestazione-stato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  min-width: 96px;
}

@media (max-width: 620px) {
  .prestazione {
    grid-template-columns: 58px 1fr;
  }

  .prestazione-stato {
    grid-column: 1 / -1;
    justify-content: flex-start;
    min-width: 0;
  }
}