/* ==========================================================================
   RARITEX — storia.css
   Vestito del riquadro «La storia di questa carta» (Fase 16), dentro la
   scheda del prodotto: le righe ripetibili anno + racconto, e l'anteprima
   di come la storia si vedrà sul sito.

   Solo classi NUOVE, tutte prefissate .storia-* : niente qui dentro
   ridefinisce una classe di admin.css. L'unico ritocco a una classe di
   admin.css (.adm-textarea, che nasce alta 90px per la descrizione del
   prodotto) sta DENTRO il perimetro del riquadro — .storia-riga .adm-textarea
   — e non esce di lì. Colori, ombre e caratteri escono dai token di base.css
   e dalle spie di stato di .admin-body (--st-warn, --st-bad, --font-mono).

   L'idea del vestito: una riga della storia è una TAPPA, e si deve leggere
   come tale anche mentre la si scrive. Perciò il numero è un pallino sulla
   linea del tempo, le due caselle stanno affiancate (l'anno stretto, il
   racconto largo) e sotto c'è la stessa linea del tempo del sito, che si
   riscrive mentre lui digita.
   ========================================================================== */

/* ==========================================================================
   1. INTRODUZIONE E AVVISI
   ========================================================================== */
.storia-intro {
  margin: 0 0 14px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.storia-intro b { color: var(--text); font-weight: 600; }

/* il rosso che compare quando il salvataggio si ferma: dice cosa manca e
   promette che quello che ha scritto è ancora lì */
.storia-avviso {
  margin: 0 0 14px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--st-bad) 45%, transparent);
  background: color-mix(in srgb, var(--st-bad) 9%, transparent);
  color: var(--st-bad);
  font-size: 0.8rem;
  line-height: 1.5;
}

.storia-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ==========================================================================
   2. LE RIGHE — [numero] [frecce] [anno + racconto] [togli]
   ========================================================================== */
.storia-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.storia-riga {
  display: grid;
  grid-template-columns: 26px auto minmax(0, 1fr) 28px;
  align-items: start;
  gap: 10px 12px;
  padding: 13px 14px;
  background: var(--surface);
  transition: background 0.18s ease;
}
.storia-riga + .storia-riga { border-top: 1px dashed var(--border); }
.storia-riga:hover { background: var(--surface-2); }
/* la riga in cui sta scrivendo si stacca dalle altre */
.storia-riga:focus-within { background: var(--surface-2); }

/* il numero della tappa: un pallino sulla linea del tempo, come sul sito */
.storia-num {
  justify-self: center;
  margin-top: 20px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-brand);
  color: var(--btn-primary-text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  box-shadow: 0 0 10px var(--glow-purple);
  cursor: default;
}

.storia-frecce {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 20px;
}
.storia-freccia {
  width: 27px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.58rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.storia-freccia:hover:not(:disabled) { border-color: var(--brand-teal); color: var(--accent-2); }
.storia-freccia:active:not(:disabled) { transform: scale(0.9); }
.storia-freccia:disabled { opacity: 0.28; cursor: not-allowed; }

/* le due caselle: l'anno stretto, il racconto tutto il resto */
.storia-campi {
  min-width: 0;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
}
.storia-campo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: text;
}
.storia-etichetta {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* l'anno è corto e si legge meglio in mono, come gli altri dati secchi */
.storia-campo.is-anno .adm-input {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  text-align: center;
}
/* .adm-textarea nasce alta 90px per la descrizione del prodotto: qui le
   righe sono tante e una frase sta in due righe, non in cinque */
.storia-riga .adm-textarea {
  min-height: 60px;
  font-size: 0.86rem;
  line-height: 1.5;
}

.storia-togli {
  margin-top: 20px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}
.storia-togli:hover {
  border-color: color-mix(in srgb, var(--st-bad) 50%, transparent);
  background: color-mix(in srgb, var(--st-bad) 10%, transparent);
  color: var(--st-bad);
}

/* nessuna riga ancora: si dice come si comincia */
.storia-vuoto {
  margin: 0;
  padding: 26px 18px;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  color: var(--text);
}
.storia-vuoto small {
  display: block;
  margin-top: 7px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ==========================================================================
   3. AGGIUNGI UNA RIGA
   ========================================================================== */
.storia-aggiungi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.storia-conta {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ==========================================================================
   4. ANTEPRIMA — la stessa linea del tempo che vedrà il cliente
   ========================================================================== */
.storia-vista {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.storia-vista-tit {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.storia-vista-vuota {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* copia fedele di .story del sito (storefront/src/styles/canale151/teca.css):
   filo verticale, pallini, anno in Unbounded e frase accanto */
.storia-anteprima {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.storia-anteprima li {
  position: relative;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.storia-anteprima li::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 8px var(--glow-purple);
}
.storia-anteprima strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.76rem;
  margin-right: 6px;
}

/* ==========================================================================
   5. IL PIEDE — cosa vede il cliente adesso, e i due pulsanti
   ========================================================================== */
.storia-piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.storia-piede-nota {
  flex: 1 1 280px;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.storia-piede.is-sporca .storia-piede-nota b { color: var(--st-warn); }
.storia-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

/* ==========================================================================
   6. SCHERMI STRETTI — le due caselle si mettono una sopra l'altra
   ========================================================================== */
@media (max-width: 720px) {
  .storia-riga {
    grid-template-columns: 26px auto minmax(0, 1fr);
    grid-template-areas:
      "num frecce campi"
      ".   .      togli";
    gap: 8px 10px;
  }
  .storia-num { grid-area: num; }
  .storia-frecce { grid-area: frecce; }
  .storia-campi { grid-area: campi; grid-template-columns: minmax(0, 1fr); }
  .storia-togli { grid-area: togli; justify-self: end; margin-top: 0; }
  .storia-campo.is-anno .adm-input { text-align: left; }
  .storia-azioni { width: 100%; margin-left: 0; }
  .storia-azioni .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   7. MENO MOVIMENTO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .storia-freccia,
  .storia-togli,
  .storia-riga { transition: none; }
  .storia-freccia:active:not(:disabled) { transform: none; }
}