/* The price list («Tessera viva», wave 4b): viste/app/abbonamenti.php (the wall and its chips), _piano_mini.php and
   _biglietto.php (the record cards of app-record.css), abbonamenti_gruppo.php (one zone's form). Shared tokens only.
   Prefix pn-. */

/* ------------------------------------------------------------------------------------------------ the wall */
.gx .pn-chips { margin: 0 0 1rem }
.gx a.sl-chip { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none }
.gx .pn-conta { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: .8rem;
  background: var(--bg); color: var(--ink-3) }
.gx .sl-chip.on .pn-conta { background: color-mix(in srgb, var(--surface) 20%, transparent); color: inherit }
.gx .pn-prezzo { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums }
.gx .rc-mini--spento .pn-prezzo, .gx .rc-mini--spento .rc-nome { color: var(--ink-2) }

/* ------------------------------------------------------------------------------------------------ one group's form */
.gx .pn-gruppo { max-width: 40rem }
.gx .pn-gruppo > label:first-of-type, .gx .pn-gruppo > .vd-methods:first-of-type { margin-top: 0 }
.gx .pn-gruppo-griglia { margin-top: 6px }
.gx .pn-eur-largo input { font-size: 1.3rem; min-height: 52px }
.gx .pn-spiega { margin: 12px 0 0; color: var(--ink-3); font-size: .9rem; line-height: 1.45 }
.gx .pn-visibile { margin-top: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; font-size: 1rem }
.gx .pn-visibile input { width: 22px; height: 22px; margin: 0 }
.gx .pn-effetti { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: .92rem; line-height: 1.45; color: var(--ink-2) }
.gx .pn-adesso { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--bg); font-size: .92rem }
.gx .pn-adesso span { color: var(--ink-3); font-weight: 600; margin-right: 4px }
.gx .ts-btn--pericolo { color: var(--ko) }

@media (max-width: 560px) {
  .gx .pn-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px }
  .gx .pn-chips .sl-chip { flex: none }
}