/* The record cards of wave 4b («Tessera viva»: a plan, a payment, a staff member, a settings section), on the anatomy of
   the prototype the owner chose (docs/ridisegno-tessera-viva/prototipo/index.html, .mini and .faccia): a header band in
   the gym's colour with the state on a pill, a white body, the prototype's radius and spacing. Only the shared tokens
   (tonus.css, the gym's --brand-*), the shared shadow and the app's own type: no colour, font or shadow of their own.
   The right column of a card is the member card's (app-tessera.css, ts-*). Prefix rc-. */

/* ------------------------------------------------------------------------------------------------ the walls */
.gx .rc-muro { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem }
.gx .rc-muro > li { min-width: 0 }
.gx .rc-legenda { margin: 1rem 0 0; font-size: .88rem; color: var(--ink-3) }

/* the mini card: band, body */
.gx .rc-mini { display: flex; flex-direction: column; height: 100%; min-height: 9.5rem; overflow: hidden; 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 a.rc-mini:hover { border-color: var(--brand-primary) }
.gx .rc-band { display: flex; align-items: center; gap: .5rem; min-height: 2.4rem; padding: .5rem .75rem; background: var(--brand-primary); color: var(--brand-on-primary);
  font-size: .78rem; font-weight: 650 }
.gx .rc-sigla { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--brand-accent); color: var(--brand-on-accent);
  font-size: .62rem; font-weight: 850; letter-spacing: .02em }
.gx .rc-sigla svg { width: 14px; height: 14px }
.gx .rc-band-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gx .rc-stato { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; flex: none; padding: .05rem .5rem; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--brand-on-primary) 16%, transparent) }
.gx .rc-mini--spento .rc-band { background: #5b6470; color: #fff }
.gx .rc-mini--spento .rc-stato { background: color-mix(in srgb, var(--surface) 16%, transparent) }
.gx .rc-corpo { display: grid; gap: .3rem; align-content: start; padding: .7rem .8rem .8rem }
.gx .rc-nome { font-size: 1.12rem; font-weight: 780; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere }
.gx .rc-riga { font-size: .88rem; color: var(--ink-2); overflow-wrap: anywhere }
.gx .rc-piccola { font-size: .8rem; color: var(--ink-3) }
.gx .rc-avviso { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 650; color: var(--warn) }
.gx .rc-avviso--ko { color: var(--ko) }
.gx .rc-avviso--ok { color: var(--ok) }
/* the warning sign of the prototype (wave 6), drawn in the line's colour; a tick for what is in order */
.gx .rc-avviso::before { content: ''; width: 17px; height: 17px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3z'/%3E%3Cpath d='M12 10v4M12 17v.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3z'/%3E%3Cpath d='M12 10v4M12 17v.5'/%3E%3C/svg%3E") center / contain no-repeat }
.gx .rc-avviso--ok::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") }

/* ------------------------------------------------------------------------------------------------ the big card */
.gx .rc-carta { perspective: 1400px }
.gx .rc-in { display: grid; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2, .8, .2, 1) }
.gx .rc-carta.tv--girata .rc-in { transform: rotateY(180deg) }
.gx .rc-faccia { grid-area: 1 / 1; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--shadow) }
.gx .rc-carta :focus-visible { outline: 3px solid var(--brand-accent); outline-offset: -3px }
/* the band of the big card: the gym's colour, the prototype's light slab and lines, the accent corner */
.gx .rc-testa { position: relative; display: grid; gap: .4rem; align-content: start; padding: 1.1rem 1.1rem 1.15rem; color: var(--brand-on-primary) !important;
  text-decoration: none !important; background-color: var(--brand-primary);
  background-image: linear-gradient(115deg, color-mix(in srgb, var(--brand-on-primary) 7%, transparent) 0 38%, transparent 38% 100%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--brand-on-primary) 3.5%, transparent) 0 2px, transparent 2px 9px) }
.gx .rc-testa::after { content: ''; position: absolute; right: 0; top: 0; width: 64px; height: 64px; background: var(--brand-accent); clip-path: polygon(0 0, 100% 0, 100% 100%); pointer-events: none }
.gx .rc-testa-riga { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; min-height: 1.9rem }
.gx .rc-palestra { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .95rem; letter-spacing: .01em }
.gx .rc-stato-grande { margin-left: auto; margin-right: 2.6rem; display: inline-flex; align-items: center; gap: .35rem; flex: none; padding: .15rem .65rem; border-radius: 999px;
  background: var(--surface); color: var(--brand-primary); font-weight: 800; font-size: .85rem }
/* the state on the big card: the word alone, as the prototype (wave 6) */
.gx .rc-cifra { position: relative; z-index: 1; margin: .5rem 0 0; font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.gx .rc-cifra small { font-size: .5em; font-weight: 700; color: inherit; letter-spacing: 0 }
.gx .rc-testa-sotto { position: relative; z-index: 1; font-size: .85rem; opacity: .9 }
.gx a.rc-testa:hover .rc-z-mat { background: color-mix(in srgb, var(--brand-on-primary) 26%, transparent) }
.gx .rc-testa .rc-z-mat { top: auto; bottom: .75rem; right: .75rem; color: var(--brand-on-primary); background: color-mix(in srgb, var(--brand-on-primary) 16%, transparent) }
.gx .rc-chi { position: relative; z-index: 1; display: flex; align-items: center; gap: .85rem; margin: .7rem 0 .2rem }
.gx .rc-avatar { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 50%; font-weight: 800; font-size: 1.1rem;
  background: color-mix(in srgb, var(--brand-on-primary) 16%, transparent); border: 2px solid color-mix(in srgb, var(--brand-on-primary) 50%, transparent) }
.gx .rc-nome-grande { margin: 0; font-size: 1.65rem; font-weight: 820; letter-spacing: -.02em; line-height: 1.05; overflow-wrap: anywhere }
.gx .rc-cod { margin: .2rem 0 0; font-size: .85rem; opacity: .85; font-variant-numeric: tabular-nums }
.gx .rc-chi .rc-nome-grande, .gx .rc-chi .rc-cod { display: block }
/* the white body and its zones */
.gx .rc-corpo-grande { padding: 1rem 1.1rem 1.1rem }
.gx .rc-nome-riga { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem }
.gx .rc-nome-riga .rc-nome-grande { color: var(--ink) }
.gx .rc-matita { flex: none; margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2) !important }
.gx .rc-matita:hover { border-color: var(--brand-primary); color: var(--brand-primary) !important }
.gx .rc-zone { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem }
.gx .rc-zona { position: relative; display: grid; align-content: start; gap: .2rem; min-height: 88px; padding: .6rem 2.4rem .65rem .7rem; border: 1.5px solid var(--line);
  border-radius: var(--radius); background: var(--bg); color: var(--ink) !important; text-decoration: none !important; transition: border-color .15s, background .15s }
.gx a.rc-zona:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft) }
.gx .rc-zona--largo { grid-column: 1 / -1; min-height: 0 }
.gx .rc-z-et { font-size: .78rem; font-weight: 650; color: var(--ink-3) }
.gx .rc-z-val { font-weight: 720; font-size: .98rem; line-height: 1.25; overflow-wrap: anywhere }
.gx .rc-z-sub { font-size: .82rem; color: var(--ink-2); overflow-wrap: anywhere }
.gx .rc-z-mat { position: absolute; right: .55rem; top: .55rem; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 7%, transparent) }
.gx .rc-zona--chiusa { opacity: .85 }
.gx .rc-zona--attenta { border-color: var(--warn); background: var(--warn-soft) }
.gx .rc-zona--attenta .rc-z-sub { color: var(--warn); font-weight: 700 }
.gx .rc-zona--grave { border-color: var(--ko); background: var(--ko-soft) }
.gx .rc-zona--grave .rc-z-sub { color: var(--ko); font-weight: 700 }
/* the back: the history, on the band's colour (tessera-viva.js turns the card) */
.gx .rc-retro { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem; border: 0;
  color: var(--brand-on-primary); background: var(--brand-primary) }
.gx .rc-retro-t { margin: 0; font-weight: 700; font-size: 1.05rem }
.gx .rc-reg { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; align-content: start; gap: .55rem; overflow: auto; flex: 1 1 auto; min-height: 0 }
.gx .rc-reg li { display: grid; gap: .1rem; padding-bottom: .5rem; border-bottom: 1px solid color-mix(in srgb, var(--brand-on-primary) 18%, transparent); font-size: .92rem }
.gx .rc-reg small { font-size: .78rem; color: inherit; opacity: .8 }
.gx .rc-reg-tutto { color: inherit !important; font-weight: 700; text-decoration: underline !important; text-underline-offset: 3px; min-height: 44px; display: inline-flex;
  align-items: center; margin-top: auto }

@media (max-width: 560px) {
  .gx .rc-muro { grid-template-columns: minmax(0, 1fr) }
  .gx .rc-nome-grande { font-size: 1.4rem }
  .gx .rc-cifra { font-size: 2.2rem }
  .gx .rc-zone { grid-template-columns: minmax(0, 1fr) }
  .gx .rc-zona { min-height: 0 }
}
@media (prefers-reduced-motion: reduce) { .gx .rc-in, .gx .rc-mini, .gx .rc-zona { transition: none !important } }