/* Scadenze as a deck («Tessera viva», wave 4a; viste/app/scadenze.php, _scadenze_*.php, scadenze_fase.php): the same
   cards as the «Stasera» deck on Oggi (app-stasera.css, .mz-*), here side by side, then each phase in full below. A row
   is a member with what is true now, a pill, the quick action and «Ricorda». Prefix sz-. */

.gx .sz { display: grid; gap: 22px }
.gx .sz-mazzo .mz-carte { grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: 20px 14px }
.gx .sz-mazzo .mz-carta { min-height: 104px }
.gx .sz-sezioni { display: grid; gap: 16px }
.gx .sz-sezione { margin: 0 }
.gx .sz-sezione:target { animation: st-arrivo 2.2s ease-out }
.gx .sz-sezione .ts-sez-testa h2 { display: inline-flex; align-items: center; gap: 8px }

.gx .sz-evento + .sz-evento { margin-top: 18px }
.gx .sz-evento h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 15.5px }
.gx .sz-ev-det { margin: 0 0 10px; color: var(--ink-3); font-size: 14px }
.gx .sz-ruolo { margin: 0 0 12px; padding: 10px 12px; border-radius: 11px; background: var(--bg); color: var(--ink-2); font-size: 14.5px }

.gx .sz-righe { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.gx .sz-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "chi pill" "az az"; gap: 6px 12px; align-items: center;
  padding: 8px 12px 10px 8px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface) }
.gx .sz-apri { grid-area: chi }
.gx .sz-pill { grid-area: pill; justify-self: end; white-space: nowrap }
.gx .sz-az { grid-area: az; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 56px }
.gx .sz-riga > .st-esito { grid-column: 1 / -1; margin: 0 }
.gx .sz-az .btn { min-height: 44px; gap: 6px; white-space: nowrap }
.gx .sz-primo { background: var(--brand-primary); color: var(--brand-on-primary) !important; border-color: var(--brand-primary) }
.gx .sz-ricorda { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto }
.gx .sz-nocontatto { color: var(--ink-3); font-size: 13.5px; margin-left: auto }
@media (min-width: 1100px) {
  /* wide screens: the actions sit on the same line as the member */
  .gx .sz-riga { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "chi pill az" }
  .gx .sz-az { padding-left: 0; justify-content: flex-end }
  .gx .sz-ricorda { margin-left: 0 }
  .gx dialog.st .sz-riga { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "chi pill" "az az" }
  .gx dialog.st .sz-az { padding-left: 56px; justify-content: flex-start }
  .gx dialog.st .sz-ricorda { margin-left: auto }
}
@media (max-width: 559px) {
  .gx .sz-az { padding-left: 0 }
  .gx .sz-az > .btn, .gx .sz-az > a.btn { flex: 1 1 auto }
  .gx .sz-ricorda { margin-left: 0; flex: 1 1 100% }
  .gx .sz-ricorda .btn { flex: 1 }
  .gx .sz-mazzo .mz-carte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px }
  .gx .sz-mazzo .mz-carta { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 13px 18px; min-height: 0 }
  .gx .sz-mazzo .mz-n { grid-row: auto; font-size: 30px }
  .gx .sz-mazzo .mz-det { font-size: 13px }
}