/* Pagina "Rotture di magazzino" (Acquisti > Fresco).
   Le rotture che contano sono poche, quindi la forma e' una SCHEDA per rottura e non una
   tabella: ognuna deve raccontare da sola cos'e' successo, quanto e' costato, come si e'
   fatto quel conto e quando rientra la merce.
   Ombre solo dalla scala --shadow-1/2/3, focus con outline, accenti laterali con border-left:
   le tre regole dure del design system. */

.app-main:has(.rupture-page) {
  max-width: 1120px;
}

/* Da quando misuriamo: un limite dichiarato del dato, non un allarme. */
.rupture-notice {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  background: #fef7e0;
  border-left: 4px solid #d9b23c;
  border-radius: var(--radius-small);
  font-size: 0.86rem;
  color: #7a5d00;
}

.rupture-hint {
  margin: 0.15rem 0 0.8rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--gray-text);
}

/* ---- filtri ---------------------------------------------------------------------------- */

.rupture-filters {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.rupture-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

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

.rupture-kpi {
  margin-bottom: 1.5rem;
}

/* La riga piccola sotto l'etichetta dice cosa il numero NON contiene: e' la parte che lo
   tiene onesto. */
.hub-stat-note {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--gray-logo);
}

/* ---- la scheda di una rottura ----------------------------------------------------------- */

.rupture-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.rottura {
  padding: 1.1rem 1.3rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

/* Ancora senza merce: il danno di questa rottura sta crescendo mentre la si guarda. */
.rottura.is-open {
  border-left-color: var(--danger);
}

.rottura-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.rottura-identita {
  flex: 1 1 22rem;
  min-width: 0;
}

.rottura-nome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.rottura-quando {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  color: var(--gray-text);
}

.rottura-cluster {
  font-weight: 600;
  color: var(--navy);
}

.rottura-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.5rem 0 0;
}

/* Il numero grosso sta a destra e da solo: e' quello che si guarda per primo e quello che
   si cita quando se ne parla con qualcun altro. */
.rottura-danno {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  padding: 0.5rem 0.9rem;
  background: #fdf1f0;
  border: 1px solid var(--danger);
  border-radius: var(--radius-small);
  text-align: right;
}

/* Non quantificabile: niente listino o niente storico. Grigio e non rosso, perche' non e'
   un danno grande ne' piccolo — e' un danno che non sappiamo misurare. */
.rottura-danno.is-ignoto {
  background: var(--bg);
  border-color: var(--border);
}

.rottura-danno.is-ignoto .rottura-danno-valore,
.rottura-danno.is-ignoto .rottura-danno-label {
  color: var(--gray-text);
}

.rottura-danno-valore {
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--danger);
}

.rottura-danno-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--danger);
}

/* ---- il conto -------------------------------------------------------------------------- */

.rottura-conto-dettaglio > div,
.rottura-conto-dettaglio > p {
  margin-top: 0.7rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--bg);
  border-radius: var(--radius-small);
}

.rottura-conto h4 {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-logo);
}

.rottura-conto-intro {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}

.rottura-tabella {
  background: var(--surface);
}

/* La quota di ordini ancora da fare e' la colonna che spiega tutto: si legge per prima. */
.rottura-quota {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--danger);
}

/* La formula in chiaro: chili + chili = chili x prezzo = euro. Senza questa riga il numero
   grosso in alto resta una affermazione da prendere per buona. */
.rottura-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0.8rem 0 0;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--gray-text);
}

.rottura-formula-pezzo {
  padding: 0.15rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.rottura-formula-piu {
  font-weight: 700;
  color: var(--gray-logo);
}

.rottura-formula-totale {
  font-size: 1.05rem;
  color: var(--danger);
}

.rottura-avviso {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #7a5c0e;
}

/* ---- il rientro ------------------------------------------------------------------------ */

.rottura-rientro {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gray-logo);
  border-radius: var(--radius-small);
}

/* Gia' ordinata: non c'e' niente da fare, si aspetta. */
.rottura-rientro.is-arrivo {
  background: #eefaf4;
  border-color: #1a7f5a;
  border-left-color: #1a7f5a;
}

/* Non ordinata e ancora senza merce: e' qui che il buyer deve agire. */
.rottura-rientro.is-scoperto {
  background: #fdeae2;
  border-color: #e08a5e;
  border-left-color: var(--semaforo-arancio);
}

.rottura-rientro h4 {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-logo);
}

.rottura-rientro-testo {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}

.rottura-rientro-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0.7rem 0 0;
}

/* Ordinare adesso e' l'unica cosa che accorcia la rottura che si sta guardando: e' un tasto
   pieno, non un link fra i tanti. Il giro ordinario resta accanto, in tono minore. */
.rottura-rientro-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--navy);
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  transition: background 0.15s ease;
}

.rottura-rientro-cta:hover,
.rottura-rientro-cta:focus-visible {
  background: var(--navy-bright);
}

.rottura-rientro-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}

/* ---- approfondimento ------------------------------------------------------------------- */

.rottura-approfondisci {
  margin-top: 0.9rem;
  border-top: 1px solid var(--border-soft);
  padding-top: 0.7rem;
}

.rottura-approfondisci > summary {
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--navy);
}

.rottura-approfondisci > summary:hover {
  text-decoration: underline;
}

.rupture-detail-block {
  margin-top: 1rem;
}

.rupture-detail-block h5 {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-logo);
}

.rupture-decisions {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
}

.rupture-decisions li {
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.rupture-diary tbody tr.is-vuoto th[scope="row"] {
  border-left-color: var(--danger);
}

.rupture-diary .is-entrata {
  font-weight: 600;
  color: #146346;
}

.rupture-diary .is-uscita {
  color: var(--gray-text);
}

/* ---- etichette condivise ---------------------------------------------------------------- */

.rupture-cause {
  display: inline-block;
  padding: 0.12rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
}

.rupture-cause.is-arrivo {
  background: #fdeae2;
  border: 1px solid #e08a5e;
  color: #b3402a;
}

.rupture-cause.is-picco {
  background: var(--azure-soft);
  border: 1px solid var(--navy);
  color: var(--navy);
}

.rupture-cause.is-sotto {
  background: #fdf3d7;
  border: 1px solid #d9b23c;
  color: #7a5c0e;
}

.rupture-cause.is-ignota {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--gray-text);
}

.rupture-scope {
  font-size: 0.76rem;
  color: var(--gray-text);
}

.rupture-scope.is-buco {
  font-weight: 600;
  color: #b3402a;
}

.rupture-open {
  padding: 0.1rem 0.5rem;
  background: #fdeae2;
  border: 1px solid #e08a5e;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  color: #b3402a;
}

.rupture-nd {
  font-size: 0.78rem;
  color: var(--gray-logo);
}

.rupture-price-note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  color: var(--gray-text);
}

.rupture-price-note.is-sospetto {
  font-weight: 600;
  color: var(--semaforo-arancio);
}

/* ---- cosa resta fuori ------------------------------------------------------------------- */

.rupture-escluse {
  margin-top: 1.75rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}

.rupture-escluse > summary {
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--gray-text);
}

.rupture-escluse-count {
  margin-left: 0.4rem;
  padding: 0 0.5em;
  background: var(--bg);
  border-radius: 999px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--gray-text);
}

.rupture-escluse-list {
  margin: 0.4rem 0 0.6rem;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--gray-text);
}

@media (max-width: 600px) {
  .rottura-danno {
    align-items: flex-start;
    text-align: left;
  }
}

/* ---- i fatti in riga e il grafico della singola rottura --------------------------------- */
/* Sostituiscono il grafico unico "curva ordini con un pallino per rottura", bocciato perche'
   metteva articoli diversi sugli stessi assi e non si leggeva (2026-08-03). Qui il numero e'
   uno solo ed e' per articolo: quanta parte della giornata e' rimasta senza merce. */

.rottura-fatti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.2rem;
  margin: 0.9rem 0 0.8rem;
}

.rottura-fatto dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-logo);
}

.rottura-fatto dd {
  margin: 0.1rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* LA CURVA DEGLI ORDINI. Area sotto = 100% degli ordini del giorno, coda rossa = quelli
   arrivati a scaffale vuoto. La disegna il server in SVG; rupture_curve_controller muove
   solo il mirino e i numeri della testata. */
.rottura-curva {
  margin: 0 0 1.1rem;
}

.rottura-curva-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1.6rem;
  margin-bottom: 0.55rem;
}

.rottura-curva-intestazione {
  display: flex;
  flex: 1 1 28rem;
  flex-direction: column;
  gap: 0.2rem;
}

.rottura-curva-titolo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-logo);
}

/* La frase che spiega il disegno a chi lo vede per la prima volta. Sta sopra il grafico e non
   in un tooltip: una spiegazione che bisogna scoprire non l'ha letta nessuno. */
.rottura-curva-spiega {
  max-width: 72ch;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--gray-text);
}

/* LA LETTURA. Sta in testata e non dentro il disegno, perche' un fumetto che insegue il
   cursore copre proprio la parte che si sta guardando. Cambia di continuo mentre il dito si
   muove, quindi ha misure fisse: un riquadro che si allarga a ogni numero fa ballare la
   pagina intera. */
.rottura-curva-lettura {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 0 0.9rem;
  align-self: flex-start;
  min-height: 2.6rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rottura-curva.is-attiva .rottura-curva-lettura {
  border-color: var(--navy-bright);
  box-shadow: 0 0 0 3px rgb(53 71 171 / 12%);
}

/* Lettura fissata con un clic: resta ferma finche' non si clicca di nuovo. */
.rottura-curva.is-fissata .rottura-curva-lettura {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgb(38 50 126 / 18%);
}

.rottura-curva-ora {
  padding-right: 0.9rem;
  border-right: 1px solid var(--border);
  font-weight: 700;
  white-space: nowrap;
}

.rottura-curva-cella {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  white-space: nowrap;
}

.rottura-curva-cella strong {
  font-weight: 700;
}

.rottura-curva-cella.is-costo strong {
  color: var(--danger);
}

.rottura-curva-lettura-eti {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-logo);
}

/* IL PANNELLO, CHIARO. Il fondo scuro era un'idea sbagliata: dentro una pagina bianca fa
   pesare il grafico più del testo che lo spiega, e su una scheda che si scorre a decine
   diventa una macchia. Qui il disegno sta sulla stessa carta di tutto il resto — a portare il
   significato sono i due colori della linea, non lo sfondo. */
.rottura-curva-pannello {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-small);
  background: linear-gradient(180deg, var(--surface) 0%, #f7f9fc 100%);
}

/* Larghezza piena e altezza a seguire: la proporzione la decide il viewBox, cosi' il disegno
   riempie il contenitore invece di stare incolonnato al centro fra due bande vuote — che era
   anche il motivo per cui il mirino cadeva lontano dal punto guardato. */
.rottura-curva-svg {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: pan-y;
}

.rottura-curva-svg:focus-visible {
  outline: 2px solid var(--navy-bright);
  outline-offset: -2px;
}

/* L'onda sotto la linea, azzurra e sfumata verso il fondo. */
.rottura-curva-grad .stop-alto {
  stop-color: #3547ab;
  stop-opacity: 0.3;
}

.rottura-curva-grad .stop-basso {
  stop-color: #3547ab;
  stop-opacity: 0.02;
}

/* I DUE COLORI DELLA LINEA, verificati sul fondo chiaro: separazione ampia anche per chi non
   distingue rosso e verde, e contrasto sufficiente sulla carta. La parte rossa porta comunque
   il tratteggio, cosi' il significato non sta mai nel solo colore. */
.rottura-curva-grad-filo .stop-prima {
  stop-color: #3547ab;
}

.rottura-curva-grad-filo .stop-dopo {
  stop-color: #c4342b;
}

.rottura-curva-filo {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* LA FASCIA: il tempo in cui la merce e' mancata. Il fondo attraversa tutta l'altezza perche'
   e' un periodo, non un valore; l'onda ridipinta dentro e' quello che e' costato. */
.rottura-curva-fascia .is-fondo {
  fill: rgb(196 52 43 / 6%);
}

.rottura-curva-fascia .is-trama {
  opacity: 0.6;
}

.rottura-curva-fascia .is-onda {
  fill: rgb(196 52 43 / 34%);
}

/* Il tratteggio: e' la codifica secondaria che rende la fascia riconoscibile anche a chi non
   distingue i colori, in stampa e in bianco e nero. */
.rottura-curva-riga {
  stroke: rgb(196 52 43 / 16%);
  stroke-width: 2;
}

/* La fascia e il taglio si spostano col dito: senza una transizione il salto da un campione
   all'altro sembra uno sfarfallio invece di un movimento. */
.rottura-curva-fascia .is-onda,
.rottura-curva-fascia rect {
  transition: none;
}

.rottura-curva-griglia line {
  stroke: var(--border-soft);
  stroke-width: 1;
}

.rottura-curva-montante line {
  stroke: #c4342b;
  stroke-width: 2;
  stroke-dasharray: 7 6;
}

.rottura-curva-montante circle {
  fill: #c4342b;
  stroke: var(--surface);
  stroke-width: 3;
}

/* La fine di una rottura ancora aperta non e' un fatto: e' adesso. */
.rottura-curva-montante.is-aperto line {
  stroke-dasharray: 2 7;
  opacity: 0.7;
}

.rottura-curva-montante.is-aperto circle {
  fill: var(--surface);
  stroke: #c4342b;
}

.rottura-curva-etichetta {
  fill: #c4342b;
  font-size: 19px;
  font-weight: 700;
}

.rottura-curva-scala text {
  fill: var(--gray-logo);
  font-size: 17px;
}

.rottura-curva-asse {
  fill: var(--gray-logo);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.rottura-curva-unita {
  fill: var(--gray-logo);
  font-size: 16px;
  letter-spacing: 0.02em;
}

/* Il disegno si compone al primo sguardo, nel verso in cui si legge: la linea corre da sinistra
   a destra e la fascia cresce dietro di lei. */
@media (prefers-reduced-motion: no-preference) {
  .rottura-curva-filo {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: rottura-traccia 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }

  .rottura-curva-area {
    opacity: 0;
    animation: rottura-emergi 0.9s ease-out 0.45s forwards;
  }

  .rottura-curva-fascia {
    opacity: 0;
    animation: rottura-emergi 0.7s ease-out 1s forwards;
  }

  .rottura-curva-bordi,
  .rottura-curva-scala {
    opacity: 0;
    animation: rottura-emergi 0.5s ease-out 1.3s forwards;
  }
}

@keyframes rottura-traccia {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes rottura-emergi {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Il mirino compare solo quando si sta leggendo. */
.rottura-curva-cursore {
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.rottura-curva.is-attiva .rottura-curva-cursore {
  opacity: 1;
}

.rottura-curva-cursore line {
  stroke: rgb(26 29 33 / 30%);
  stroke-width: 1.5;
}

.rottura-curva-cursore circle {
  transition: cx 0.08s linear, cy 0.08s linear;
}

.rottura-curva-cursore .is-nucleo {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 2.5;
}

.rottura-curva-cursore .is-anello {
  fill: rgb(53 71 171 / 10%);
  stroke: rgb(53 71 171 / 35%);
  stroke-width: 1.5;
}

/* IL CONTO, SOTTO IL DISEGNO. Ogni addendo sta sotto l'onda da cui viene e la somma e' l'euro
   scritto in cima alla scheda: il verdetto era "non si capisce come calcoli la perdita", e la
   risposta non e' una nota a pie' di pagina ma il conto in chiaro. */
.rottura-curva-conto {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem 0.9rem;
  margin-top: 0.6rem;
  font-variant-numeric: tabular-nums;
}

.rottura-curva-addendo {
  display: flex;
  flex-direction: column;
  padding-right: 0.9rem;
  border-right: 1px solid var(--border);
  line-height: 1.3;
}

.rottura-curva-addendo strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--danger);
}

.rottura-curva-addendo-eti {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-logo);
}

/* I chili gia' ordinati e mai consegnati non stanno nella curva: non sono distribuiti nel
   tempo, sono un fatto. Segnati diversamente perche' sono un addendo di natura diversa. */
.rottura-curva-addendo.is-sospeso strong {
  color: var(--ink);
}

.rottura-curva-addendo.is-totale {
  padding-right: 0;
  border-right: 0;
}

.rottura-curva-addendo.is-totale strong {
  font-size: 1.35rem;
}

/* La perdita del giorno dopo si conta ma non si disegna: qui c'e' scritto da dove esce, ed e'
   la risposta a "non si capisce come calcoli la perdita totale del giorno dopo". */
.rottura-curva-coda {
  max-width: 92ch;
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--gray-text);
}

/* Un addendo che non ha ancora finito di crescere: dirlo evita che il numero sembri definitivo
   quando la merce e' ancora fuori. */
.rottura-curva-incorso {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--semaforo-arancio);
}

.rottura-curva-continua {
  fill: #c4342b;
  font-size: 18px;
  font-weight: 700;
}

.rottura-curva-conto.is-nudo {
  display: block;
  font-size: 0.88rem;
  color: var(--gray-text);
}

@media (max-width: 600px) {
  .rottura-curva-lettura {
    align-self: stretch;
    font-size: 0.85rem;
  }

  .rottura-curva-spiega {
    font-size: 0.86rem;
  }

  .rottura-curva-addendo strong {
    font-size: 0.95rem;
  }
}

/* Quanto gira l'articolo: distingue una rottura su merce di tutti i giorni da una su merce
   che si muove ogni tanto — cioe' un problema da un fatto della vita. */
.rottura-rotazione {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--gray-text);
}

.rottura-rotazione strong {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

.rottura-rotazione.is-alta strong {
  color: var(--navy);
}

/* Il conto: c'e' ma sta chiuso. Si apre quando qualcuno vuole difendere il numero. */
.rottura-conto-dettaglio,
.rottura-approfondisci {
  margin-top: 0.7rem;
}

.rottura-conto-dettaglio > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}

@media (max-width: 600px) {
  .rottura-fatti {
    gap: 0.6rem 1.4rem;
  }

  .rottura-fatto dd {
    font-size: 1.1rem;
  }
}