/* The lesson, the timetable, the courses and the rooms («Tessera viva», wave 4a; viste/app/sessione.php,
   _lezione_carta.php, _lezione_zona.php, _carta_corsi.php, corsi_*.php). The cards and the mini-cards are the shared
   ones of the prototype (app-record.css, rc-); the right column is the member card's (app-tessera.css, ts-). Here only
   what is a lesson's own: its seats drawn one by one like the holes of a carnet, its zones as layers, the confirmations,
   «Scrivi ai prenotati», the calendar's filters. Only the shared tokens (tonus.css, app-base.css): no colours, fonts or
   shadows of its own; a course's colour is a dot, as in the calendar. Prefix lz- (lesson and zones), cw- (walls). */

/* ------------------------------------------------------------------------------------------------ the card */
/* the card itself is the shared one (app-record.css, rc-): here only what a lesson adds */
.gx .lz .rc-nome-riga .cc-dot, .gx .cw-nome .cc-dot { margin: 0; width: 14px; height: 14px }
.gx .lz--annullata .lz-nome, .gx .lz--annullata .lz-ora { text-decoration: line-through }
/* the seats, one by one: taken, present (ticked), free; the waiting list after a line */
.gx .lz-posti { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: -.2rem 0 .75rem; padding-bottom: .65rem; border-bottom: 1px dashed var(--line) }
.gx .lz-sedie { display: flex; flex-wrap: wrap; gap: 4px }
.gx .lz-sedie i { position: relative; display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--brand-accent) }
.gx .lz-sedie i.lz-s--presente { background: var(--ok) }
.gx .lz-sedie i.lz-s--presente::after { content: ''; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg) }
.gx .lz-sedie i.lz-s--libero { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink-3) 55%, transparent) }
.gx .lz-coda { display: inline-flex; align-items: center; gap: 4px; padding-left: .8rem; border-left: 1px solid var(--line); color: var(--warn); font-size: .82rem; font-weight: 700 }
.gx .lz-coda i { display: block; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--warn) }
.gx .lz-numeri { color: var(--ink-2); font-size: .92rem }
.gx .lz-numeri b { color: var(--ink) }

/* ------------------------------------------------------------------------------------------------ the right column */
.gx .lz-prossime { margin-top: 18px }
.gx .lz-mini-lezioni { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.gx .lz-mini-lezioni a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink) !important; text-decoration: none !important; font-size: .92rem }
.gx .lz-mini-lezioni a:hover { border-color: var(--brand-primary) }
.gx .lz-mini-lezioni .cc-dot { margin-right: 8px }

/* ------------------------------------------------------------------------------------------------ the full page below */
.gx .lz-sezioni { margin-top: 28px; display: grid; gap: 16px }
.gx .lz-sezioni > .card { margin: 0 }
@media (min-width: 1100px) { .gx div.lz-sezioni { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start } .gx div.lz-sezioni > #registro { grid-column: 1 / -1 } }
.gx .lz-registro { margin-top: 24px }

/* ------------------------------------------------------------------------------------------------ the zones, as layers */
.gx .lz-strato:empty { display: none }
.gx .lz-zona-sez > :first-child { margin-top: 0 }
.gx .lz-dati { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 8px; margin: 0 0 12px }
.gx .lz-dati > div { padding: 9px 12px; border-radius: var(--radius); background: var(--bg); min-width: 0 }
.gx .lz-dati dt { color: var(--ink-3); font-size: .8rem; font-weight: 600 }
.gx .lz-dati dd { margin: 2px 0 0; font-weight: 650; overflow-wrap: anywhere }
.gx .lz-nota { margin: 6px 0 10px; color: var(--ink-3); font-size: .9rem; line-height: 1.45 }
.gx .lz-perche { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; padding: 10px 12px; border-radius: var(--radius); background: var(--bg); color: var(--ink-2); font-size: .92rem; line-height: 1.45 }
.gx .lz-perche svg { flex: none; margin-top: 2px }
.gx .lz-blocchi { display: grid; gap: 14px }
/* a zone opened as a full page has room for its two forms side by side */
@media (min-width: 900px) { .gx #st-pagina > .lz-zona-sez .lz-blocchi { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.gx .lz-blocco { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface) }
.gx .lz-blocco h3, .gx .lz-prenota h3, .gx .lz-h3 { margin: 0 0 6px; font-size: 1rem }
.gx .lz-h3 { margin-top: 16px }
.gx .lz-form { margin: 0 }
.gx .lz-form label:first-of-type { margin-top: 4px }
.gx .lz-form select, .gx .lz-form input[type=text], .gx .lz-form input[type=number], .gx .lz-form input[type=date], .gx .lz-form input[type=time], .gx .lz-form textarea { width: 100% }
.gx .lz-form .btn { margin-top: 12px; min-height: 44px }
.gx .lz-form label.check { display: flex; gap: 10px; align-items: center; margin: 12px 0 0; font-weight: 500 }
.gx .lz-form label.check input { width: 20px; height: 20px; margin: 0 }
.gx .lz-conta { margin: 0 0 10px; color: var(--ink-2) }
.gx .lz-conta b { color: var(--ink); font-size: 1.5rem; font-weight: 800; margin-right: 2px; font-variant-numeric: tabular-nums }
.gx .lz-vuoto { margin: 8px 0; padding: 20px 16px; text-align: center; color: var(--ink-3); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius) }
.gx .lz-prenota { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--brand-primary-soft) }
.gx .lz-prenota .sel-statico { margin-top: 10px }
.gx .lz-prenota .cc-prenota .btn { width: 100%; min-height: 48px }
.gx .lz-piu { margin: 12px 0 0 }
.gx .lz-piu a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650 }

/* a person on the lesson: photo or initials, the name that opens the card, one line under it */
.gx .lz-righe { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.gx .lz-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px 8px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface) }
.gx .lz-riga > .st-esito { flex-basis: 100%; margin: 0 }
.gx .lz-chi { flex: 1 1 12rem; display: flex; align-items: center; gap: 10px; min-width: 0 }
.gx .lz-av { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--brand-primary-soft) }
.gx .lz-av--iniziali { display: grid; place-items: center; color: var(--brand-primary); font-weight: 700; font-size: .85rem }
.gx .lz-chi-t { display: grid; min-width: 0 }
.gx .lz-chi-nome { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 28px }
.gx a.lz-chi-nome { color: var(--ink) !important }
.gx a.lz-chi-nome:hover { text-decoration: underline; text-underline-offset: 3px }
.gx .lz-chi-t small { color: var(--ink-3); font-size: .82rem; line-height: 1.35; overflow-wrap: anywhere }
.gx .lz-riga .cc-pos { flex: none }
.gx .lz-riga .btn { min-height: 44px }
.gx .lz-togli { flex: 0 1 auto }
.gx .lz-togli[open] { flex-basis: 100% }
.gx .lz-togli > summary { display: inline-flex; align-items: center; min-height: 44px }
.gx .lz-riga--presenza .cc-att { margin-left: auto }
.gx .lz-riga--presenza .cc-att .btn { min-width: 96px; min-height: 44px }
@media (max-width: 559px) {
  .gx .lz-riga--presenza .cc-att { flex: 1 1 100%; margin-left: 0 }
  .gx .lz-riga--presenza .cc-att .btn { flex: 1 }
}

/* ------------------------------------------------------------------------------------------------ confirmations */
.gx .lz-conferma-sez { display: grid; gap: 12px }
.gx .lz-conferma-sez .flash { margin: 0 }
.gx .lz-prima-dopo { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 8px }
.gx .lz-prima-dopo p { margin: 0; padding: 10px 14px; border-radius: var(--radius); background: var(--bg); display: grid; gap: 2px }
.gx .lz-prima-dopo p + p { background: var(--brand-primary-soft) }
.gx .lz-prima-dopo span { color: var(--ink-3); font-size: .82rem; font-weight: 600 }
.gx .lz-prima-dopo b { font-size: 1rem }
.gx .lz-avviso { margin: 0; padding: 10px 14px; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); font-weight: 600; font-size: .92rem; line-height: 1.45 }
.gx .lz-conferma { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface) }
.gx .lz-conferma--rossa { border-color: var(--ko); background: var(--ko-soft) }
.gx .lz-conseguenza { margin: 0 0 6px; line-height: 1.5 }
.gx .lz-conferma label:not(.check) { margin-top: 10px }
.gx .lz-conferma input[type=text] { width: 100% }
.gx .lz-conferma label.check { display: flex; gap: 10px; align-items: center; margin: 12px 0 0; font-weight: 500 }
.gx .lz-conferma label.check input { width: 20px; height: 20px; margin: 0 }
.gx .lz-conferma-az { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px }
.gx .lz-conferma-az .btn { min-height: 46px; flex: 0 1 auto }
@media (max-width: 559px) { .gx .lz-conferma-az .btn { flex: 1 1 100% } }
.gx .lz-sp-cambia { padding: 12px 14px; border-radius: var(--radius); background: var(--bg) }
.gx .cg .cc-colors { margin-top: 12px }

/* ------------------------------------------------------------------------------------------------ «Scrivi ai prenotati» */
.gx .lz-scrivi { display: grid; gap: 12px }
.gx .lz-scrivi > .lz-nota { margin: 0 }
.gx .lz-scrivi-form { padding: 12px 14px; border-radius: var(--radius); background: var(--bg) }
.gx .lz-chips { border: 0; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.gx .lz-chips legend { padding: 0; margin: 0 0 6px; font-weight: 600; font-size: .9rem; color: var(--ink-2); width: 100% }
.gx .lz-chip { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); cursor: pointer; font-weight: 600 !important; font-size: .92rem }
.gx .lz-chip input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-primary) }
.gx .lz-chip:has(input:checked) { border-color: var(--brand-primary); background: var(--brand-primary-soft) }
.gx .lz-tutti { margin: 0 }
.gx .lz-tutti .btn { min-height: 46px; gap: 8px }
.gx .lz-scrivi-az { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto }
.gx .lz-scrivi-az .btn { gap: 6px }

/* ------------------------------------------------------------------------------------------------ the calendar */
.gx .lz-filtri { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px }
.gx .lz-filtri a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2) !important; text-decoration: none !important; font-weight: 600; font-size: .92rem }
.gx .lz-filtri a span { font-variant-numeric: tabular-nums; opacity: .75; font-weight: 700 }
.gx .lz-filtri a[aria-current] { border-color: var(--ink); background: var(--ink); color: var(--surface) !important }
.cc-slot.live { border-color: var(--c) }
.cc-slot.mine::after { content: ''; position: absolute; right: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c) }
.cc-slot { min-height: 44px }

/* ------------------------------------------------------------------------------------------------ the walls */
/* the mini-cards are the shared ones (app-record.css, rc-mini) */
.gx .cw-nome { display: flex; align-items: center; gap: .5rem }
.gx .cw-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.gx .cw-archivio { margin-top: 18px }
.gx .cw-archivio .rc-muro { margin-top: 8px }