/* «Stasera al bancone» and the «Stasera» deck («Tessera viva»; viste/app/dashboard.php, soci.php, _mazzo.php,
   stasera_fase.php, stasera_evento.php), drawn as the prototype (wave 6): the deck on the left, white cards with a
   coloured edge, their count big in the gym's colour and the edges of the cards under them showing; the wall of
   mini-cards on the right; the day's numbers in a quiet block under the deck. */

/* ------------------------------------------------------------------------------------------------ the desk */
.gx .banco { display: grid; grid-template-columns: 19rem minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "mazzo muro" "oggi muro"; gap: 24px; align-items: start }
.gx .banco > .mz { grid-area: mazzo; min-width: 0 }
.gx .banco > .muro { grid-area: muro; min-width: 0 }
.gx .banco > .oggi { grid-area: oggi; min-width: 0 }
.gx .banco--solo { grid-template-areas: "mazzo muro" }
.gx .muro-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px }
.gx .muro-testa h1, .gx .muro-testa h2 { margin: 0 auto 0 0; font-size: 21.6px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em }
.gx .muro-testa .btn svg { margin-left: -2px }
.gx .muro-testa .sl-chips, .gx .muro-testa .sl-find { width: 100%; order: 3 }
.gx .muro-conta { margin: 0; color: var(--ink-3); font-size: 14.7px }
@media (max-width: 63.99rem) {
  .gx .banco { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "mazzo" "muro" "oggi" }
}
@media (max-width: 47.99rem) {
  .gx .muro-testa { gap: 10px 12px }
  .gx .muro-testa h1, .gx .muro-testa h2 { flex: 1 1 auto }
}

/* ------------------------------------------------------------------------------------------------ the day, quiet */
.gx .oggi { padding: 16px 17.6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow) }
.gx .oggi h2 { margin: 0 0 8px; font-size: 16px }
.gx .oggi h3 { margin: 16px 0 6px; font-size: 14.4px; color: var(--ink-3); font-weight: 650 }
.gx .oggi-numeri { display: grid; gap: 0; margin: 0 }
.gx .oggi-numeri > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line) }
.gx .oggi-numeri > div:last-child { border-bottom: 0 }
.gx .oggi-numeri dt { font-size: 14.4px; color: var(--ink-2) }
.gx .oggi-numeri dt a { color: inherit }
.gx .oggi-numeri dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand); text-align: right; white-space: nowrap }
.gx .oggi-numeri dd em, .gx .oggi-numeri dd small { display: block; font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--ink-3) }
.gx .oggi-numeri dd em, .gx .oggi-numeri .is-due dd { color: var(--ko) }
.gx .oggi-az { margin: 12px 0 0 }
.gx .oggi-az .btn { width: 100% }
.gx .oggi-vuoto { margin: 0; color: var(--ink-3); font-size: 14.4px }
.gx .oggi-righe { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px }
.gx .oggi-righe li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding-bottom: 7px; border-bottom: 1px solid var(--line); font-size: 14.4px }
.gx .oggi-righe li:last-child { border-bottom: 0; padding-bottom: 0 }
.gx .oggi-righe time { color: var(--ink-3); font-size: 13.1px; font-variant-numeric: tabular-nums; border-left: 3px solid var(--c, transparent); padding-left: 6px }
.gx .oggi-righe a { color: var(--ink); font-weight: 600 }
.gx .oggi-righe small { display: block; color: var(--ink-3); font-size: 12.8px }
.gx .oggi-righe small.is-ko { color: var(--ko) }
.gx .oggi-righe b { font-size: 13.6px; font-variant-numeric: tabular-nums; text-align: right }
.gx .oggi-righe b small { color: var(--warn) }
.gx .oggi-righe b.is-full { color: var(--warn) }
.gx .oggi-righe li.is-off { opacity: .55 }

/* ------------------------------------------------------------------------------------------------ the deck */
.gx .mz-testa h2 { margin: 0; font-size: 21.6px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em }
.gx .mz-testa p { margin: 3.2px 0 16px; color: var(--ink-3); font-size: 14.7px; line-height: 1.45 }
.gx .mz-carte { list-style: none; margin: 0; padding: 0 0 12px; display: grid; gap: 18.4px }
/* each li holds the stacking: the two edges under a card sit behind it, not behind the page */
.gx .mz-carte > li { position: relative; z-index: 0 }
.gx .mz-carta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.4px 12px; align-items: center; min-height: 88px;
  padding: 13.6px 16px 14.4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink) !important;
  text-decoration: none !important; box-shadow: var(--shadow); transition: border-color .15s }
.gx .mz-carta::before, .gx .mz-carta::after { content: ''; position: absolute; z-index: -1; height: 8px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px }
.gx .mz-carta::before { left: 10px; right: 10px; bottom: -6px; background: #fbfbfc }
.gx .mz-carta::after { left: 20px; right: 20px; bottom: -11px; background: #f4f5f7 }
.gx .mz-carta:hover { border-color: var(--brand) }
.gx .mz-striscia { position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand) }
.gx .mz-carta--calda .mz-striscia { background: var(--accent) }
.gx .mz-nome { font-weight: 700; font-size: 16.3px; line-height: 1.3 }
.gx .mz-n { grid-row: span 2; align-self: center; font: 700 32px/1 var(--font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--brand) }
.gx .mz-det { font-size: 13.8px; line-height: 1.4; color: var(--ink-3) }
.gx .mz-carta--vuota .mz-n { color: #a3a9b6 }
.gx .mz-carta--vuota .mz-striscia { background: #cfd3db }
@media (max-width: 63.99rem) { .gx .mz-carte { grid-template-columns: 1fr 1fr; gap: 14.4px 12px } }
@media (max-width: 47.99rem) {
  .gx .mz-carta { min-height: 80px; padding: 11.2px 12px; grid-template-columns: minmax(0, 1fr); align-content: start }
  .gx .mz-n { grid-row: auto; font-size: 25.6px }
}

/* ------------------------------------------------------------------------------------------------ a phase, an event */
.gx .mz-lead { margin: 0 0 12px; color: var(--ink-3); font-size: 14.5px }
.gx .mz-vuoto { margin: 8px 0; padding: 28px 16px; text-align: center; color: var(--ink-3); background: var(--surface); border: 1px dashed #c9ced6; border-radius: 14px }
.gx .mz-eventi, .gx .mz-righe { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.gx .mz-evento { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; align-items: center; min-height: 68px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--ink); text-decoration: none !important }
.gx .mz-evento:hover { border-color: color-mix(in srgb, var(--brand-primary) 55%, var(--line)) }
.gx .mz-evento--fermo { border-left: 4px solid var(--brand-accent); padding-left: 13px }
.gx .mz-ev-nome { font-size: 16px; line-height: 1.3 }
.gx .mz-evento .mz-n { font-size: 28px }
.gx .mz-evento--vuoto .mz-n { color: #a3a9b6 }
.gx .mz-ev-chi { font-size: 14px; line-height: 1.35; color: var(--ink-3) }

.gx .mz-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 8px 12px 8px 8px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--surface) }
.gx .mz-riga > .st-esito { grid-column: 1 / -1; margin-top: 0 }
.gx .mz-riga-apri { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 2px 4px; border-radius: 10px; color: var(--ink); text-decoration: none !important; min-width: 0 }
.gx .mz-riga-apri:hover .mz-riga-nome { text-decoration: underline; text-underline-offset: 3px }
.gx .mz-av { flex: none; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--brand-primary-soft) }
.gx .mz-av--iniziali { display: grid; place-items: center; color: var(--brand-primary); font-weight: 700; font-size: 14px }
.gx .mz-riga-t { min-width: 0 }
.gx .mz-riga-nome { display: block; font-weight: 700; font-size: 16px; line-height: 1.3 }
.gx .mz-riga-fatti { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-2) }
.gx .mz-riga-az { margin: 0 }
.gx .mz-riga-az .btn, .gx a.mz-riga-az { min-height: 44px; white-space: nowrap; color: var(--brand-primary); border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--line)) }
.gx .mz-esiti:empty { display: none }
.gx .mz-esiti { margin-bottom: 10px }
@media (max-width: 559px) {
  .gx .mz-riga { grid-template-columns: minmax(0, 1fr) }
  .gx .mz-riga-az, .gx .mz-riga-az .btn { width: 100% }
}

@media (prefers-reduced-motion: reduce) {
  .gx .mz-carta { transition: none }
  .gx .mz-carta:active { transform: none }
}