/* =============================================================
   Parea Sons — area personale

   Una colonna sola, stretta come una lettera: qui non si guarda, si
   compila. Tutto quello che serve sta in fila, senza niente ai lati
   che chieda attenzione.

   Due rossi, e non è una svista. --rosso è il colore
   dell'interfaccia: occhielli, bottoni, stati attivi. Gli errori
   usano --rosso-araldico, che è quello puro dello stemma: più acceso,
   così un guasto non si confonde con un'etichetta.
   ============================================================= */

.conto {
  padding: calc(var(--header-h) + var(--s-64)) 0 var(--s-96);
  background: var(--bianco-lino);
  min-height: 70vh;
}

.conto__inner {
  max-width: 34rem;
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
}

.conto__attesa {
  font-size: var(--t-20);
  color: var(--greige);
  text-align: center;
  padding-block: var(--s-64);
}

/* --- Testata --------------------------------------------------- */

.conto__testa {
  display: grid;
  justify-items: start;
  gap: var(--s-16);
  margin-bottom: var(--s-48);
}

.conto__titolo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--t-32), 5vw, var(--t-48));
  line-height: 1.06;
  letter-spacing: 0.02em;
}

.conto__testo {
  font-size: var(--t-16);
  line-height: 1.55;
  color: color-mix(in srgb, var(--inchiostro) 78%, transparent);
}

.conto__obbligatori {
  justify-self: end;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  margin: 0;
}

.conto__modulo { gap: var(--s-32); }

/* --- Campi -----------------------------------------------------
   .campo, .modulo, .bottone, i menu a tendina, le caselle di scelta
   e i messaggi d'errore stanno in panels.css: li usano anche la
   pagina informazioni e i pannelli. Qui c'è solo quello che serve
   in più, cioè la password.                                        */

.campo--password { display: grid; gap: var(--s-8); }

.campo__conpulsante {
  position: relative;
  display: grid;
}

.campo__conpulsante input { padding-right: var(--s-32); }

.campo__occhio {
  position: absolute;
  right: 0;
  bottom: var(--s-8);
  width: 24px;
  height: 24px;
  color: var(--greige);
  cursor: pointer;
  transition: color var(--t-rapido) var(--ease);
}

.campo__occhio:hover { color: var(--inchiostro); }

.campo__occhio svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

/* Occhio aperto quando la password si vede, sbarrato quando è
   coperta: lo stato lo dice il segno, non il colore. */
.campo__occhio[aria-pressed="true"] .occhio__taglio { opacity: 0; }

/* --- Le regole della password --------------------------------
   Il segno di spunta c'è o non c'è: la differenza è di forma, non
   solo di colore, così si legge anche a monitor spento sui grigi. */

.regole { display: grid; gap: var(--s-8); }

.regole__testa {
  font-size: var(--t-16);
  color: color-mix(in srgb, var(--inchiostro) 78%, transparent);
}

.regole__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-8);
}

.regola {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: var(--s-8);
  font-size: var(--t-16);
  color: var(--greige);
  transition: color var(--t-medio) var(--ease);
}

.regola[data-fatta="sì"] { color: var(--inchiostro); }

.regola__segno {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--oro);
  stroke-width: 1.6;
  stroke-linecap: square;
  /* Non disegnato finché la regola non è soddisfatta. */
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset var(--t-medio) var(--ease);
}

.regola[data-fatta="sì"] .regola__segno { stroke-dashoffset: 0; }

/* --- Consensi -------------------------------------------------
   .scelte e .scelta stanno in panels.css: le usa anche il modulo
   informazioni. Qui resta solo la data sotto ogni consenso.       */

.scelta__data { margin-left: calc(20px + var(--s-16)); margin-top: calc(var(--s-16) * -1); }
.scelta__data:empty { display: none; }

.scelta--obbligatoria { padding-top: var(--s-8); }

/* --- Testi legali ---------------------------------------------- */

.conto__legale {
  font-size: var(--t-16);
  line-height: 1.55;
  color: color-mix(in srgb, var(--inchiostro) 78%, transparent);
}

.conto__legale--stretto {
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
}

.conto__legale a,
.conto__blocco a,
.conto__avviso a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--oro);
}

.conto__legale a:hover,
.conto__blocco a:hover { color: var(--rosso); text-decoration-color: currentColor; }

/* Un bottone che si legge come un collegamento: sta dentro una
   frase, e aprire il pannello non è un'azione da bottone pieno. */
.conto__link {
  font: inherit;
  color: var(--inchiostro);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--oro);
  cursor: pointer;
}

.conto__link:hover { color: var(--rosso); text-decoration-color: currentColor; }

/* --- Avviso ---------------------------------------------------- */

.conto__avviso {
  border: 1px solid var(--filetto-forte);
  padding: var(--s-16) var(--s-24);
  margin-bottom: var(--s-32);
  font-size: var(--t-16);
  line-height: 1.5;
  color: color-mix(in srgb, var(--inchiostro) 82%, transparent);
}

/* --- Conferma -------------------------------------------------- */

.conto__parte--centrata {
  display: grid;
  justify-items: center;
  gap: var(--s-24);
  text-align: center;
  padding-block: var(--s-64);
}

.conto__parte--centrata .filetto { width: 64px; }
.conto__parte--centrata .bottone { width: auto; padding-inline: var(--s-64); }

.conto__fatto {
  font-size: clamp(var(--t-20), 3vw, var(--t-32));
  font-weight: 300;
  line-height: 1.3;
  text-wrap: balance;
}

.conto__fatto strong { font-weight: 500; }

/* --- Blocchi dell'area ----------------------------------------- */

.conto__blocco {
  border-top: 1px solid var(--filetto);
  padding-top: var(--s-32);
  margin-top: var(--s-48);
  display: grid;
  gap: var(--s-24);
}

.conto__blocco-titolo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-20);
  letter-spacing: 0.02em;
}

.conto__blocco--coda { justify-items: start; }
.conto__blocco--coda .bottone { width: auto; padding-inline: var(--s-48); }

/* --- I due diritti che si esercitano da qui ---------------------
   Un sottoblocco dentro «I tuoi diritti»: il titolo in Cinzel piccolo,
   come gli occhielli, perché è una voce e non una sezione. Niente
   filetto — nel blocco ce n'è già uno sopra, e il filetto che si apre
   dal centro è il gesto del sito, non un separatore da spargere. */

.diritto {
  display: grid;
  gap: var(--s-16);
  justify-items: start;
}

.diritto__titolo {
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
  color: var(--rosso);
}

.diritto .bottone { width: auto; padding-inline: var(--s-48); }

/* --- La cancellazione del profilo -------------------------------
   Sta in fondo, staccata, ed è l'unico posto del sito dove un blocco
   si separa dal resto con dello spazio invece che con un filetto: un
   filetto dice «qui comincia un'altra cosa», e questo non è un'altra
   cosa da leggere, è una cosa da non premere per sbaglio.

   Il titolo prende il rosso di lavoro. Non l'araldico: quello è dei
   segni minuti — il contatore della borsa, il cuore — e come testo dà
   4,29:1, sotto soglia. Qui è un titolo, e si legge. */

.conto__blocco--pericolo {
  margin-top: var(--s-96);
  justify-items: start;
}

.conto__blocco--pericolo .conto__blocco-titolo { color: var(--rosso); }
.conto__blocco--pericolo .bottone { width: auto; padding-inline: var(--s-48); }
.conto__blocco--pericolo .modulo { width: 100%; }

/* --- Le richieste d'ordine --------------------------------------
   Una richiesta è un documento, e si legge come un documento: il
   numero in evidenza perché è quello che si dice al telefono, i capi
   in elenco, il totale in fondo. Il filetto d'oro a sinistra è lo
   stesso segno dell'esito buono qui sotto — sta bene qui perché è il
   fondo chiaro dell'area, e l'oro solo lì si può usare (§2). */

.ordine {
  display: grid;
  gap: var(--s-16);
  border-left: 2px solid var(--oro);
  padding-left: var(--s-24);
}

.ordine + .ordine { margin-top: var(--s-32); }

.ordine__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-16);
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  margin: 0;
}

.ordine__testa strong {
  font-weight: 500;
  color: var(--inchiostro);
  letter-spacing: var(--tracking-largo);
}

/* Lo stato è un'informazione, non un allarme: resta greige come la
   data. Il rosso araldico in questo sito vuol dire guasto. */
.ordine__stato { text-transform: uppercase; }

.ordine__capi {
  list-style: none;
  display: grid;
  gap: var(--s-8);
  margin: 0;
  padding: 0;
  font-size: var(--t-16);
  line-height: 1.4;
}

.ordine .totale { border-top: 1px solid var(--filetto); padding-top: var(--s-16); }

/* --- Esiti ----------------------------------------------------- */

/* L'esito buono non può essere rosso — sarebbe un errore — e il verde
   in questa palette non esiste e non si inventa. È inchiostro pieno
   con un filetto d'oro davanti: si distingue dall'errore per colore
   e per segno, non solo per colore. */
[data-esito][data-tipo="bene"] {
  color: var(--inchiostro);
  border-left: 2px solid var(--oro);
  padding-left: var(--s-16);
}
[data-esito][data-tipo="errore"],
[data-errore][data-tipo="errore"] { color: var(--rosso-araldico); }

/* --- Larghezze minori ------------------------------------------ */

@media (max-width: 768px) {
  .conto { padding-top: calc(var(--header-h) + var(--s-32)); }
  .conto__parte--centrata .bottone { width: 100%; padding-inline: var(--s-24); }
}

/* --- Movimento ridotto ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .regola__segno,
  .scelta input[type="checkbox"]::after { transition: none; }
}

/* --- Il banco di casa --------------------------------------------

   Le richieste d'ordine di tutti, per chi le deve lavorare. Riusa la
   scheda `.ordine` così com'è — stesso filetto d'oro a sinistra, stessa
   testa, stessa lista dei capi — e aggiunge solo quello che a un
   cliente non serve: chi ha scritto, come lo si richiama, e a che punto
   siamo noi.

   IL FILETTO CAMBIA COLORE, e non è decorazione: una richiesta che
   nessuno ha ancora preso in mano ha il filetto ROSSO, le altre l'oro
   di sempre. È il solo segno che serve per capire, scorrendo, cosa
   aspetta una risposta. Il rosso è quello di lavoro, non l'araldico:
   qui non è un guasto, è una cosa da fare.                            */

.banco__conta {
  font-family: var(--font-dato);
  font-size: var(--t-13);
  letter-spacing: var(--tracking-dato);
  text-transform: uppercase;
  color: var(--greige);
  margin: 0 0 var(--s-24);
}

.banco__voce[data-stato="ricevuta"] { border-left-color: var(--rosso); }

.banco__chi {
  display: grid;
  gap: var(--s-8);
  font-size: var(--t-16);
  line-height: 1.4;
}

.banco__nome {
  font-family: var(--font-testo);
  font-size: var(--t-20);
  margin: 0;
}

.banco__riga { margin: 0; display: flex; gap: var(--s-8); flex-wrap: wrap; }

.banco__etichetta {
  font-family: var(--font-dato);
  font-size: var(--t-13);
  letter-spacing: var(--tracking-dato);
  text-transform: uppercase;
  color: var(--greige);
}

/* Il messaggio è prosa scritta da una persona: si legge come prosa, non
   come un campo di un modulo. */
.banco__messaggio {
  margin: 0;
  padding-left: var(--s-16);
  border-left: 1px solid var(--filetto);
  font-size: var(--t-16);
  line-height: 1.6;
  color: var(--inchiostro);
}

.banco__stato {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  flex-wrap: wrap;
  margin: 0;
}

.banco__stato select { min-width: 22ch; }

.banco__esito {
  font-family: var(--font-dato);
  font-size: var(--t-13);
  color: var(--greige);
}

/* =============================================================
   IL BANCO: GLI ORDINI, I RECESSI, IL MAGAZZINO

   Tutto quello che c'è qui sotto è una variante di `.ordine` e
   `.banco__*`, che esistevano già per le richieste. Il negozio non
   porta un linguaggio visivo nuovo: porta del denaro, e il denaro si
   vede da cosa dicono le parole, non da un colore in più.
   ============================================================= */

/* IL FILETTO ROSSO È QUELLO CHE ASPETTA. Per le richieste è
   `ricevuta`; per gli ordini sono i due stati in cui abbiamo incassato
   e non abbiamo ancora fatto niente. «da riconciliare» è il più
   urgente dei due — denaro preso e merce che non c'è — e prende lo
   stesso rosso, non uno più forte: un secondo rosso in una schermata
   toglierebbe forza al primo (§2 di SISTEMA.md). Lo dicono le parole,
   che sono «Pagato, ma manca la merce». */
.ordine[data-stato="pagato"],
.ordine[data-stato="da riconciliare"] { border-left-color: var(--rosso); }

/* Chiuso è chiuso: l'oro resta a quello che è in corso, e un ordine
   consegnato o rimborsato scende di tono invece di continuare a
   chiedere attenzione. */
.ordine[data-stato="consegnato"],
.ordine[data-stato="rimborsato"],
.ordine[data-stato="annullato"] { border-left-color: var(--filetto-forte); }

.banco__capi {
  display: grid;
  gap: var(--s-8);
  padding: var(--s-16) 0;
  border-top: 1px solid var(--filetto);
}

.banco__capo {
  margin: 0;
  font-family: var(--font-dato);
  font-size: var(--t-13);
  font-variant-numeric: tabular-nums;
}

/* --- La tracciatura ---------------------------------------------- */

/* Un modulo con un bottone, non due campi che si salvano da sé:
   incollare la tracciatura fa partire un'email al cliente, e salvare
   a ogni tasto vorrebbe dire mandargliene una per carattere. */
.banco__collo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8);
  padding-top: var(--s-16);
  border-top: 1px solid var(--filetto);
}

.banco__collo input {
  flex: 1 1 14ch;
  min-width: 12ch;
}

.banco__comandi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-16);
  margin: 0;
  padding-top: var(--s-16);
  border-top: 1px solid var(--filetto);
}

/* --- Il magazzino ------------------------------------------------ */

/* LE TAGLIE STANNO SU UNA RIGA, e il conto è quello che ce le tiene.
   La colonna dell'area personale è larga 480px. Quando erano sei —
   XS-XXL, fino al 15 settembre 2026 — con `minmax(96px)` e 16 di
   spazio ce ne stavano quattro e le altre due andavano a capo: una
   fila 4+2 legge come una scala rotta, e una scala di taglie letta a
   metà è il modo di caricare il magazzino sulla riga sbagliata.
   Il conto di allora era 6×64 + 5×8 = 424, dentro i 480 con margine.

   ADESSO SONO TRE (voce 27: S-M-L), e il difetto si è girato: con
   `1fr` tre caselle si stirerebbero a 154px l'una, cioè un campo da tre
   cifre largo quanto una parola. Il tetto a 96 le tiene alla loro
   misura e lascia lo spazio che avanza alla destra, dove non dà
   fastidio — una scala di tre taglie non deve riempire una colonna,
   deve leggersi come una scala.

   Misurato dal browser a 1440×900: contenitore 480, tre caselle da 96,
   una riga sola. Le tracce sono QUATTRO e non tre, e la ragione sta due
   regole più sotto: `.banco__etichetta` prende `1 / -1`, quindi occupa
   anche la quarta e `auto-fit` non la può collassare. Resta un posto
   vuoto da 96px in coda alla riga, invisibile perché dentro non c'è una
   cornice — ma va saputo prima di stupirsi del valore calcolato.

   `auto-fit` e non `repeat(3, …)`: quel numero viene da
   data/products.json, e scritto qui sarebbe una fila sbagliata che
   nessuno collega al JSON il giorno che la scala cambia ancora. */
.magazzino__colore {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 96px));
  gap: var(--s-8);
  align-items: end;
  margin-top: var(--s-24);
  padding-top: var(--s-16);
  border-top: 1px solid var(--filetto);
}

/* Il nome del colore prende la riga intera: sopra le caselle è la sua
   didascalia, incolonnato accanto sarebbe una taglia in più. */
.magazzino__colore > .banco__etichetta { grid-column: 1 / -1; }

.magazzino__cella {
  display: grid;
  gap: 2px;
  margin: 0;
}

.magazzino__cella label {
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
}

/* `tabular-nums` e non una larghezza fissa: le quantità si leggono
   incolonnate anche quando una è 3 e l'altra 128. */
.magazzino__cella input {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

/* --- Il periodo del registro ------------------------------------- */

.banco__periodo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-24);
  margin-bottom: var(--s-24);
}

.banco__periodo .campo { margin: 0; }

@media (max-width: 640px) {
  .banco__collo input { flex-basis: 100%; }

  /* Quando le taglie erano sei, su una colonna stretta si spezzavano
     tre e tre: due file piene invece di quattro e due. Adesso che sono
     tre la riga è una sola, e questa regola serve a un'altra cosa —
     toglie il tetto di 96px e le fa distendere per tutta la larghezza.
     Su un telefono lo spazio che avanza non è respiro, è una riga che
     comincia a sinistra e finisce a metà. */
  .magazzino__colore { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}