/* ===================================================================== *
 * SONDAGGIO PRESENZE — CrossFit Iris                                      *
 * Identità "Iris dopo il tramonto": fondo indaco, accento viola Iris,     *
 * fasce desaturate per momento del giorno (palette neutra).              *
 * Tipi: Anton (display) · Inter (testo) · Space Mono (dati/cronometro).   *
 * ===================================================================== */

:root {
  --snd-ink:      #0A0918;
  --snd-ink-2:    #0E0C20;
  --snd-surface:  #15122E;
  --snd-surface-2:#1E1A41;
  --snd-line:     rgba(160,140,245,.16);
  --snd-line-2:   rgba(160,140,245,.28);

  --snd-iris:     #7B61FF;
  --snd-iris-2:   #A78BFA;
  --snd-accent:     #7B61FF;
  --snd-accent-2:   #8E78FF;

  --snd-chalk:    #F2F0FF;
  --snd-muted:    #9A93C8;
  --snd-faint:    #6E6896;

  --snd-radius:   16px;
  --snd-mono:     'Space Mono', ui-monospace, monospace;
}

/* I toggle nascosti spariscono anche con display flex/grid. */
.snd-week [hidden], .snd-load[hidden], .snd-load__row[hidden] { display: none !important; }

/* ---- Sfondo della pagina (override su cert.css) --------------------- */
body.public {
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(123,97,255,.16), transparent 60%),
    var(--snd-ink);
  color: var(--snd-chalk);
}

/* ---- Helper tipografici --------------------------------------------- */
.snd-eyebrow {
  font-family: var(--snd-mono);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--snd-iris-2); margin: 0 0 12px;
}
.snd-mono { font-family: var(--snd-mono); }

/* ===================================================================== */
/* CARD + HERO (vale per identify/done/returning/ineligible)             */
/* ===================================================================== */
body.public .card,
body.public .card-form {
  background:
    linear-gradient(180deg, rgba(123,97,255,.06), transparent 140px),
    var(--snd-surface);
  border: 1px solid var(--snd-line);
  border-radius: 22px;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03);
  padding: 30px 30px 34px;
}

.snd-hero { margin-bottom: 22px; }
.snd-hero__brow {
  font-family: var(--snd-mono); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--snd-iris-2);
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.snd-hero__brow::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--snd-line-2), transparent);
}
.snd-hero h1, body.public .card h1 {
  font-family: 'Anton', sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em; line-height: .96;
  font-size: clamp(34px, 7vw, 56px);
  margin: 0 0 12px; color: var(--snd-chalk);
}
.snd-hero h1 .snd-pop, body.public .card h1 .snd-pop { color: var(--snd-iris-2); }
body.public .lead { color: var(--snd-muted); font-size: 16px; line-height: 1.5; }

/* riga di puntini "momento del giorno" — piccola firma decorativa */
.snd-daydots { display: flex; gap: 7px; margin-top: 16px; }
.snd-daydots span { width: 9px; height: 9px; border-radius: 50%; opacity: .9; }

/* ===================================================================== */
/* BOTTONI + ALERT                                                       */
/* ===================================================================== */
body.public .btn {
  border-radius: 999px; font-weight: 700; letter-spacing: .01em;
  padding: 13px 26px; border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.snd-admin-actions .btn {
  border-radius: 999px; font-weight: 700; padding: 11px 20px; cursor: pointer;
  border: 1px solid var(--snd-line-2); color: var(--snd-chalk);
  background: var(--snd-surface-2); transition: border-color .12s, background .12s;
}
.snd-admin-actions .btn:hover { border-color: var(--snd-iris-2); background: rgba(123,97,255,.14); }
body.public .btn-primary {
  background: var(--snd-accent); color: #fff;
  box-shadow: 0 12px 30px -16px rgba(123,97,255,.7);
}
body.public .btn-primary:hover { background: var(--snd-accent-2); transform: translateY(-1px); }
body.public .btn-lg { padding: 15px 32px; font-size: 16px; }
body.public .btn-secondary {
  background: transparent; color: var(--snd-chalk); border-color: var(--snd-line-2);
}
body.public .btn-secondary:hover { border-color: var(--snd-iris-2); background: rgba(123,97,255,.10); }

body.public .alert { border-radius: 14px; padding: 14px 16px; font-size: 14.5px; }
body.public .alert-info {
  background: rgba(123,97,255,.10); border: 1px solid var(--snd-line-2); color: var(--snd-chalk);
}
body.public .alert-error {
  background: rgba(255,90,90,.10); border: 1px solid rgba(255,90,90,.45); color: #ffd9d9;
}

/* ===================================================================== */
/* IDENTIFICAZIONE                                                       */
/* ===================================================================== */
.snd-methods { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .snd-methods { grid-template-columns: 1fr; } }
.snd-method {
  display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
  padding: 14px 16px; border: 1px solid var(--snd-line); border-radius: 13px;
  background: var(--snd-surface-2); transition: border-color .12s, background .12s;
}
.snd-method:hover { border-color: var(--snd-line-2); }
.snd-method input { accent-color: var(--snd-accent); width: 18px; height: 18px; }
.snd-method span { font-weight: 600; font-size: 14.5px; }
.snd-method:has(input:checked) {
  border-color: var(--snd-accent); background: rgba(123,97,255,.12);
}

.snd-input {
  width: 100%; box-sizing: border-box; margin-top: 16px;
  padding: 16px 16px; font-size: 16px; color: var(--snd-chalk);
  border: 1px solid var(--snd-line-2); border-radius: 13px;
  background: var(--snd-ink-2); font-family: var(--snd-mono);
  transition: border-color .12s, box-shadow .12s;
}
.snd-input::placeholder { color: var(--snd-faint); }
.snd-input:focus {
  outline: none; border-color: var(--snd-iris);
  box-shadow: 0 0 0 4px rgba(123,97,255,.18);
}

/* ===================================================================== */
/* FORM — stato agosto (stat "tabellone")                                */
/* ===================================================================== */
.snd-stat {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; margin: 4px 0 8px;
  border: 1px solid var(--snd-line); border-radius: 16px;
  background: linear-gradient(180deg, rgba(123,97,255,.10), transparent), var(--snd-surface-2);
}
.snd-stat__k { font-family: var(--snd-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--snd-iris-2); }
.snd-stat__v { font-weight: 700; font-size: 15px; }
.snd-stat__badge {
  margin-left: auto; font-family: var(--snd-mono); font-weight: 700; font-size: 14px;
  padding: 6px 13px; border-radius: 999px; white-space: nowrap;
  background: rgba(123,97,255,.16); color: var(--snd-iris-2);
  border: 1px solid var(--snd-line-2);
}

/* ===================================================================== */
/* FORM — card settimana (riga "tabellone")                              */
/* ===================================================================== */
.snd-week {
  position: relative; border: 1px solid var(--snd-line); border-radius: 18px;
  padding: 18px 18px 6px; margin: 0 0 14px;
  background: var(--snd-surface);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.snd-week.is-on {
  border-color: rgba(123,97,255,.45);
  box-shadow: inset 3px 0 0 var(--snd-accent), 0 18px 50px -38px rgba(123,97,255,.6);
}

.snd-week__head { display: flex; align-items: center; gap: 14px; padding-bottom: 6px; }
.snd-week__num {
  font-family: 'Anton', sans-serif; font-size: 34px; line-height: .8;
  color: var(--snd-iris-2); opacity: .55; min-width: 46px;
}
.snd-week.is-on .snd-week__num { color: var(--snd-accent); opacity: 1; }
.snd-week__title { display: flex; flex-direction: column; line-height: 1.1; }
.snd-week__label {
  font-family: 'Anton', sans-serif; font-size: 18px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--snd-chalk);
}
.snd-week__dates { font-family: var(--snd-mono); font-size: 13px; color: var(--snd-muted); }

/* toggle Presente / Assente */
.snd-toggle {
  margin-left: auto; display: inline-flex; padding: 4px; gap: 4px;
  background: var(--snd-ink-2); border: 1px solid var(--snd-line); border-radius: 999px;
}
.snd-toggle__opt { position: relative; cursor: pointer; }
.snd-toggle__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.snd-toggle__opt span {
  display: block; padding: 8px 16px; border-radius: 999px; font-weight: 700;
  font-size: 13.5px; color: var(--snd-muted); transition: background .12s, color .12s;
  white-space: nowrap;
}
.snd-toggle__opt input:focus-visible + span { outline: 2px solid var(--snd-iris-2); outline-offset: 2px; }
.snd-toggle__opt:has(input:checked) span { color: #fff; background: var(--snd-accent); }
.snd-toggle__opt.is-no:has(input:checked) span { color: var(--snd-chalk); background: var(--snd-surface-2); }

/* Mobile: numero+titolo e toggle Presente/Assente non stanno su una sola
   riga (il toggle non si comprime → overflow orizzontale di tutta la pagina).
   Mandiamo il toggle a capo a tutta larghezza, con le due opzioni 50/50. */
@media (max-width: 560px) {
  .snd-week__head { flex-wrap: wrap; row-gap: 12px; }
  .snd-toggle { margin-left: 0; width: 100%; box-sizing: border-box; }
  .snd-toggle__opt { flex: 1; }
  .snd-toggle__opt span { text-align: center; }
}

/* Mobile: settimane a tutta larghezza (niente margini sx/dx). La card-form
   diventa full-bleed (via bordo/raggio laterali), le parti testuali restano
   rientrate per leggibilità; le .snd-week arrivano fino al bordo schermo. */
@media (max-width: 560px) {
  /* Card a tutta larghezza (full-bleed): il container del CONTENUTO non
     aggiunge margine, ci pensa il padding interno della card (16px) — così
     TUTTO il contenuto (settimane, hero, metodi identificazione, testi di
     ringraziamento, azioni) è rientrato uniformemente di 16px. */
  body.public main .container { padding: 0; }
  body.public .card-form {
    border-radius: 0; border-left: 0; border-right: 0;
    padding-left: 16px; padding-right: 16px;
  }
  /* Stesso margine (16px) anche nell'header. */
  header.topbar > .container { padding-left: 16px; padding-right: 16px; }

  /* Il badge "N×/sett" non flotta più a destra (sembrava scollegato): si
     impila sotto al blocco "Il tuo abbonamento", allineato a sinistra. */
  .snd-stat { flex-direction: column; align-items: flex-start; gap: 8px; }
  .snd-stat__badge { margin-left: 0; }
}

.snd-week__body { padding: 6px 2px 12px; }

/* griglia fasce */
.snd-slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 560px) { .snd-slot-grid { grid-template-columns: 1fr; } }

/* Ogni cella = tile fascia + (quando selezionata e in multi) lo slider sotto. */
.snd-slot-cell { --slot: var(--snd-iris); display: flex; flex-direction: column; }

/* `.form label.snd-slot` (specificità 0,2,1) per battere
   `.form label { display:block }` di cert.css (0,1,1): senza, orario e nome
   restano in linea invece di impilarsi su due righe.
   `--slot` arriva ereditato da `.snd-slot-cell` (NON ridichiararlo qui, o
   vincerebbe sul colore per-fascia impostato inline sulla cella). */
.form label.snd-slot {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px 14px; border-radius: 13px; cursor: pointer;
  border: 1px solid var(--snd-line); background: var(--snd-surface-2);
  transition: border-color .12s, background .12s, transform .08s;
}
.snd-slot:hover { border-color: var(--snd-line-2); }
.snd-slot input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.snd-slot__time { font-family: var(--snd-mono); font-weight: 700; font-size: 14px; color: var(--snd-chalk); }
.snd-slot__name { font-size: 12.5px; color: var(--snd-muted); }
.snd-slot:has(input:checked) {
  border-color: var(--slot);
  background: color-mix(in srgb, var(--slot) 12%, var(--snd-surface-2));
}
.snd-slot:has(input:checked) .snd-slot__name { color: var(--snd-chalk); }

/* ---- Barra di carico + slider (firma) ------------------------------ */
.snd-load { margin-top: 16px; }
.snd-load__bar {
  display: flex; height: 16px; border-radius: 999px; overflow: hidden;
  background: var(--snd-ink-2); border: 1px solid var(--snd-line); margin-bottom: 14px;
}
.snd-load__seg { height: 100%; transition: width .18s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }

/* Slider della fascia: compare SOTTO il tile selezionato, a tutta larghezza
   della cella (su mobile = full width → facile da trascinare). */
.snd-slot__pct { --val: 50;
  display: flex; align-items: center; gap: 12px; padding: 12px 4px 4px; }
.snd-slot__pct .snd-range { flex: 1 1 auto; min-width: 0; }
.snd-slot__pctval { font-family: var(--snd-mono); font-weight: 700; font-size: 14px;
  color: var(--snd-chalk); min-width: 42px; text-align: right; }

/* Riepilogo in fondo: orario → percentuale, una riga per fascia scelta. */
.snd-recap { display: flex; flex-direction: column; gap: 8px; }
.snd-recap__row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 13px; border: 1px solid var(--snd-line); border-radius: 11px;
  background: var(--snd-surface-2); }
.snd-recap__t { display: flex; align-items: center; gap: 9px;
  font-family: var(--snd-mono); font-size: 13px; color: var(--snd-chalk); }
.snd-recap__t::before { content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--slot, var(--snd-iris)); flex: none; }
.snd-recap__v { font-family: var(--snd-mono); font-weight: 700; font-size: 14px; color: var(--snd-chalk); }

input[type="range"].snd-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  background: transparent; cursor: pointer; margin: 0;
}
input[type="range"].snd-range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--slot) 0 calc(var(--val) * 1%),
    var(--snd-surface-2) calc(var(--val) * 1%) 100%);
}
input[type="range"].snd-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6px;
  border-radius: 50%; background: var(--snd-chalk); border: 3px solid var(--slot);
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.6);
}
input[type="range"].snd-range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--snd-surface-2); }
input[type="range"].snd-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--slot); }
input[type="range"].snd-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--snd-chalk);
  border: 3px solid var(--slot); box-shadow: 0 4px 12px -2px rgba(0,0,0,.6);
}
input[type="range"].snd-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(123,97,255,.3); }

/* ---- Azioni --------------------------------------------------------- */
.snd-actions { display: flex; gap: 12px; justify-content: space-between; align-items: center;
  margin-top: 22px; flex-wrap: nowrap; }

/* errori JS */
#snd-js-errors ul { margin: 8px 0 0; padding-left: 18px; }

/* page-load reveal */
@media (prefers-reduced-motion: no-preference) {
  body.public main .card { animation: snd-rise .5s cubic-bezier(.2,.7,.2,1) both; }
  .snd-week { animation: snd-rise .45s cubic-bezier(.2,.7,.2,1) both; }
  .snd-week:nth-child(2) { animation-delay: .04s; }
  .snd-week:nth-child(3) { animation-delay: .08s; }
  .snd-week:nth-child(4) { animation-delay: .12s; }
  @keyframes snd-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ===================================================================== */
/* STATO ABBONAMENTO — chip                                              */
/* ===================================================================== */
.snd-status-chip {
  display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px;
  font-family: var(--snd-mono); font-weight: 700;
  border: 1px solid var(--snd-line-2); white-space: nowrap;
}
.snd-st-active            { background: rgba(143,176,122,.16); border-color: rgba(143,176,122,.5);  color: #c9dcb6; }
.snd-st-renew             { background: rgba(123,97,255,.16);  border-color: var(--snd-iris);       color: #cdbcff; }
.snd-st-suspended_partial { background: rgba(201,166,107,.16); border-color: rgba(201,166,107,.55); color: #e3c7a0; }
.snd-st-suspended_full    { background: rgba(200,110,110,.16); border-color: rgba(200,110,110,.5);  color: #e0b3b3; }
.snd-st-expired, .snd-st-none { background: rgba(150,140,200,.14); color: var(--snd-muted); }
.snd-st-unknown           { background: rgba(150,140,200,.10); border-style: dashed; color: var(--snd-muted); }
.snd-status-note          { display: block; width: 100%; margin-top: 6px; font-size: 12px; color: var(--snd-muted); }
.snd-kpi--imp .snd-kpi-n  { color: var(--snd-iris); }
.snd-impbar               { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 14px 0 4px; }
.snd-imp-toggle           { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.snd-imp-toggle input     { accent-color: var(--snd-iris); width: 16px; height: 16px; }
.snd-imp-help             { flex: 1 1 320px; font-size: 12px; color: var(--snd-muted); }

/* ===================================================================== */
/* ADMIN (cruscotto + risposte)                                          */
/* ===================================================================== */
.snd-admin-head { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.snd-admin-actions { display: flex; gap: 10px; }

.snd-kpis { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.snd-kpi { display: flex; flex-direction: column; align-items: center;
  padding: 14px 22px; border: 1px solid var(--snd-line); border-radius: 14px;
  min-width: 130px; background: var(--snd-surface); }
.snd-kpi-n { font-family: 'Anton', sans-serif; font-size: 32px; line-height: 1; color: var(--snd-chalk); }
.snd-kpi-l { font-size: 12px; color: var(--snd-muted); margin-top: 4px; text-align: center; }

.snd-status-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.snd-status-bar-l { font-family: var(--snd-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--snd-muted); }

.snd-legend { font-size: 13px; color: var(--snd-muted); margin: 4px 0 14px; line-height: 1.5; }
.snd-legend .snd-cls { color: var(--snd-accent); }

.snd-heat-wrap { overflow-x: auto; }
.snd-heat, .snd-resp { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px; }
.snd-heat th, .snd-heat td, .snd-resp th, .snd-resp td {
  border-bottom: 1px solid var(--snd-line); padding: 9px 11px; text-align: center; vertical-align: middle; }
.snd-heat thead th { font-size: 13px; color: var(--snd-chalk); }
.snd-heat thead th small, .snd-row-h small { color: var(--snd-muted); font-weight: 400; font-family: var(--snd-mono); }
.snd-corner, .snd-row-h { text-align: left; font-family: 'Anton', sans-serif; font-weight: 400; letter-spacing: .02em; }
.snd-cell span, .snd-tot-col span { display: block; line-height: 1.4; }
.snd-cell-teste { font-size: 12px; color: var(--snd-muted); font-family: var(--snd-mono); }
.snd-cell-att { font-weight: 700; font-family: var(--snd-mono); }
.snd-cell-cls { font-size: 12px; color: var(--snd-accent); font-weight: 700; font-family: var(--snd-mono); }
.snd-cell--on { background: rgba(123,97,255,.10); }
.snd-tot-col { background: rgba(160,140,245,.07); font-size: 13px; }
.snd-grand { font-weight: 700; }
.snd-note { font-size: 13px; color: var(--snd-muted); margin-top: 12px; }

.snd-resp th, .snd-resp td { text-align: left; }
.snd-center { text-align: center; font-family: var(--snd-mono); }
.snd-resp-wk { white-space: normal; }
.snd-absent { color: var(--snd-faint); }
.snd-chip { display: inline-block; margin: 2px 3px 2px 0; padding: 2px 9px; font-size: 12px;
  font-family: var(--snd-mono); border: 1px solid var(--snd-line-2); border-radius: 999px; }
.container-wide { max-width: 1200px; }