/* ZakoGo — packing.css
   Owner: M-PA (js/packing.js). Module-only extras.
   Tokens, shell and every shared component live in styles.css (F1) — do not
   redefine them here.

   Cosa vive qui e perché:
   - la card di avanzamento (montagna + conteggio + nome modificabile inline)
     ha una composizione che non esiste altrove;
   - la riga della lista ha due bersagli affiancati (spunta e apertura) e serve
     un bottone-corpo che non è una .row generica;
   - il segno "meno" dello stepper: icons.js non ha un'icona "minus" e la regola
     è di non usare glifi unicode, quindi è una barretta disegnata in CSS.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Header di avanzamento
   -------------------------------------------------------------------------- */

.pa-head:empty { display: none; }

.pa-progress { padding: 14px 16px; }
.pa-list { margin-top: 4px; }
.pa-head:not(:empty) + .pa-list { margin-top: 6px; }

/* wrapper role="progressbar" attorno alla montagna: non deve alterare il flex */
.pa-mtn {
  flex: 0 0 auto;
  line-height: 0;
}
.pa-mtn .mtn { width: 88px; }

.pa-progress .progress-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* "Zaino pronto" — appare solo a lista completata */
.pa-ready { margin-top: 8px; }

/* --- nome della lista: bottone che rivela la matita --- */

.pa-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 44px;
  margin-left: -8px;          /* allinea il testo alla colonna del conteggio */
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-soft);
  text-align: left;
  transition: background-color 140ms ease, color 140ms ease;
}
.pa-name .progress-name { margin-top: 0; min-width: 0; }
.pa-name .icn {
  flex: 0 0 auto;
  color: var(--ink-faint);
  transition: color 140ms ease;
}
.pa-name:active { background: var(--pine-050); color: var(--pine-900); }
.pa-name:active .icn { color: var(--pine-700); }

/* --- nome della lista in modifica: riga piena sotto la montagna --- */

.pa-rename {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.pa-rename .pa-name-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}
.pa-rename .btn-icon { width: 46px; height: 46px; }

/* --------------------------------------------------------------------------
   2. Gruppi
   -------------------------------------------------------------------------- */

.pa-group + .pa-group { margin-top: 4px; }

/* Intestazione di gruppo "semplice": testo forte, non display type. */
.pa-group .group-head {
  font-family: var(--font-ui);
  font-size: 15px;
  letter-spacing: .1px;
}
.pa-group:first-child .group-head { margin-top: 14px; }

/* --------------------------------------------------------------------------
   3. Righe voce
   -------------------------------------------------------------------------- */

.pa-row {
  gap: 10px;
  padding: 9px 12px 9px 14px;
  transition: background-color 200ms ease;
}

/* Corpo della riga: apre la sheet di modifica. È un bottone perché la spunta
   accanto è già un bottone e i bottoni non si annidano. */
.pa-open {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 2px 0 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  text-align: left;
}
.pa-open .row-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  transition: color 200ms ease;
}
.pa-open .badge-qty { flex: 0 0 auto; }
.pa-open .row-chevron {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--line-strong);
  transition: color 140ms ease, transform 140ms var(--ease-out);
}
.pa-open:focus-visible { outline-offset: -1px; }
.pa-open:active .row-chevron { color: var(--pine-700); transform: translateX(2px); }

/* Voce già nello zaino: sfondo neve, titolo barrato (styles.css) e badge spento. */
.pa-row.is-done { background: var(--pine-050); }
.pa-row.is-done .badge-qty {
  background: var(--snow);
  color: var(--ink-soft);
}
.pa-row.is-done .row-chevron { color: #D6DEDA; }

/* --------------------------------------------------------------------------
   4. Sheet: quantità e azione distruttiva
   -------------------------------------------------------------------------- */

.pa-qta-field .stepper { margin-top: 2px; }

/* Segno "meno": forma disegnata, non un glifo di testo né un'icona esterna. */
.pa-minus {
  display: block;
  width: 15px;
  height: 2.4px;
  border-radius: 2px;
  background: currentColor;
}

.pa-btn-del {
  margin-top: 22px;
  background: var(--berry-tint);
  color: var(--berry-ink);
  border-color: transparent;
}
.pa-btn-del .icn { color: var(--berry-ink); }
.pa-btn-del:active { background: #F3D2DF; }

/* --------------------------------------------------------------------------
   5. Hover — solo dispositivi con puntatore
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .pa-name:hover { background: var(--pine-050); color: var(--pine-900); }
  .pa-name:hover .icn { color: var(--pine-700); }
  .pa-open:hover .row-chevron { color: var(--pine-700); }
  .pa-btn-del:hover { background: #F3D2DF; }
}

/* --------------------------------------------------------------------------
   6. Schermi stretti
   -------------------------------------------------------------------------- */

@media (max-width: 359.98px) {
  .pa-progress { padding: 12px 13px; }
  .pa-mtn .mtn { width: 74px; }
  .progress-mtn { gap: 11px; }
  .pa-row { gap: 9px; padding-inline: 11px 10px; }
  .pa-open { gap: 8px; }
}

/* --------------------------------------------------------------------------
   7. Movimento ridotto
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pa-open:active .row-chevron { transform: none; }
}