/* ==========================================================================
   Rift — pagina «Per chi si allena» (/atleti/). Si carica dopo site.css e
   solo in questa pagina: token, tasti, cornici e anteprime dell'app vengono
   da lì, qui c'è solo la composizione. Colori solo da var(--…), angoli
   var(--r), fili da 1px, niente ombre; l'arancio resta al tasto e ai segnali.
   ========================================================================== */

/* ── Hero: il titolo a sinistra; a destra la seduta di oggi e due messaggi ── */
.atleti-hero { padding-top: clamp(28px, 3.4vw, 56px); }
.atleti-hero-griglia {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 13fr);
  align-items: center;
  gap: var(--sp-6) clamp(32px, 4vw, 72px);
}
.atleti-hero-testo { display: grid; gap: var(--sp-5); align-content: center; padding-bottom: var(--sp-7); }
.atleti-hero-testo .lead { max-width: 44ch; }
.atleti-hero-testo .stato { margin-top: 0; }
.atleti-hero-testo .accesso-anticipato { margin: 0; justify-content: flex-start; text-align: left; }
.pagina-atleti .tasti .condividi-esito { flex-basis: 100%; margin-top: 0; }
.pagina-atleti .tasti .condividi-esito:empty { min-height: 0; }
.pagina-atleti .tasti .condividi-campo { flex-basis: 100%; margin-top: 0; }

/* La scena: il telefono sfuma in basso; i messaggi gli stanno sopra, di lato */
.atleti-scena { position: relative; height: clamp(560px, 45vw, 650px); }
.scena-telefono {
  position: absolute; left: 0; top: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 56%, transparent 90%);
}
.scena-telefono .telefono { --lato: clamp(270px, 22.5vw, 320px); }
.messaggio {
  position: absolute; z-index: 2;
  display: grid; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--superficie);
  border: var(--bordo-forte);
  border-radius: var(--r);
}
.messaggio-preparatore { right: 0; top: 17%; width: min(340px, 54%); }
.messaggio-team { right: 0; top: 60%; width: min(340px, 54%); }
/* Fra 1001 e 1320px la colonna è stretta: i messaggi non devono coprire il telefono */
@media (max-width: 1320px) { .messaggio-preparatore, .messaggio-team { width: min(340px, 48%); } }
.messaggio-chi { display: flex; align-items: center; gap: var(--sp-3); }
.messaggio-faccia {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px;
  border: 1px solid var(--filo-forte); border-radius: var(--r-tondo);
  overflow: hidden;
  font-size: var(--t-minimo); font-weight: var(--p-forte); color: var(--inchiostro-2);
}
.messaggio-faccia img { width: 100%; height: 100%; object-fit: cover; }
.messaggio-chi b { display: block; font-size: var(--t-corpo); font-weight: var(--p-forte); line-height: 1.3; }
.messaggio-chi small { display: block; font-size: var(--t-micro); font-weight: var(--p-forte); letter-spacing: var(--spaziatura-maiuscolo); text-transform: uppercase; color: var(--muto); }
.messaggio-testo { font-size: var(--t-medio); line-height: 1.45; color: var(--inchiostro); text-wrap: pretty; }
.messaggio-testo b { font-weight: var(--p-forte); }
.messaggio-check {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--superficie-2); border: var(--bordo); border-radius: var(--r);
}
.messaggio-check .ico { color: var(--inchiostro-2); }
.messaggio-check b { display: block; font-size: var(--t-corpo); font-weight: var(--p-medio); line-height: 1.3; }
.messaggio-check small { display: block; font-size: var(--t-minimo); color: var(--muto); }

@media (max-width: 1000px) {
  .atleti-hero-griglia { grid-template-columns: minmax(0, 1fr); }
  .atleti-hero-testo { padding-bottom: 0; }
  .atleti-scena { display: grid; height: auto; width: 100%; max-width: 500px; margin-inline: auto; }
  .scena-telefono { position: relative; justify-self: center; height: clamp(420px, 96vw, 540px); overflow: clip; }
  .scena-telefono .telefono { --lato: min(68vw, 300px); }
  .messaggio { position: relative; inset: auto; width: min(340px, 88%); }
  .messaggio-preparatore { justify-self: start; margin-top: calc(-1 * clamp(150px, 36vw, 210px)); }
  .messaggio-team { justify-self: end; margin-top: var(--sp-3); }
}
@media (max-width: 600px) {
  .messaggio { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .messaggio-testo { font-size: var(--t-corpo); }
}

/* ── Con o senza preparatore: la matrice ──────────────────────────────── */
#con-o-senza { padding-top: clamp(64px, 7vw, 112px); }
.matrice { width: 100%; border-collapse: collapse; table-layout: fixed; border-bottom: var(--bordo); }
.matrice-angolo { width: 24%; }
.matrice thead th {
  padding: 0 var(--sp-5) var(--sp-4);
  text-align: left; vertical-align: bottom;
  border-bottom: 1px solid var(--inchiostro);
}
.matrice thead .matrice-angolo { border-bottom: 1px solid var(--inchiostro); }
.matrice thead th + th { border-left: var(--bordo); }
.modo-nome {
  display: block;
  font-family: var(--font-titolo); font-weight: var(--p-titolo);
  font-size: clamp(24px, 2.5vw, 36px); line-height: 1.12;
  text-transform: uppercase; letter-spacing: var(--spaziatura-titolo);
  color: var(--inchiostro);
  text-wrap: balance;
}
.modo-sotto { display: block; margin-top: var(--sp-2); font-size: var(--t-piccolo); font-weight: var(--p-normale); line-height: var(--i-media); color: var(--muto); }

.matrice tbody th, .matrice tbody td { padding: 18px var(--sp-5); border-top: var(--bordo); text-align: left; vertical-align: top; }
.matrice tbody th { padding-left: 0; font-size: var(--t-medio); font-weight: var(--p-forte); line-height: var(--i-media); color: var(--inchiostro); }
.matrice tbody td + td { border-left: var(--bordo); }
.matrice .matrice-gruppo th {
  padding: var(--sp-6) 0 var(--sp-3);
  border-top: 0;
  font-size: var(--t-minimo); font-weight: var(--p-forte);
  letter-spacing: var(--spaziatura-maiuscolo); text-transform: uppercase;
  color: var(--muto);
}
.matrice tbody:first-of-type .matrice-gruppo th { padding-top: var(--sp-5); }

/* Una casella: il segno a sinistra, la nota accanto */
.matrice td:not([colspan]) { position: relative; padding-left: calc(var(--sp-5) + 34px); }
.segno { position: absolute; left: var(--sp-5); top: 17px; width: 22px; height: 22px; }
.spunta { width: 22px; height: 22px; fill: none; stroke: var(--inchiostro); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.segno[data-v="no"]::before { content: ""; position: absolute; left: 3px; top: 10px; width: 16px; height: 2px; background: var(--filo-forte); }
.nota { display: block; font-size: var(--t-medio); line-height: var(--i-corpo); color: var(--inchiostro-2); text-wrap: pretty; }
.matrice .assente .nota { color: var(--muto); }

.matrice-nota { margin-top: var(--sp-4); font-size: var(--t-piccolo); color: var(--muto); max-width: 80ch; }

/* Sul telefono: le due colonne restano in cima mentre scorri le righe */
@media (max-width: 760px) {
  .matrice, .matrice thead, .matrice tbody { display: block; }
  .matrice thead { position: sticky; top: 0; z-index: 2; background: var(--fondo); }
  .matrice thead tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--inchiostro); }
  .matrice thead .matrice-angolo { display: none; }
  .matrice thead th { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom: 0; }
  .matrice thead th + th { padding-left: var(--sp-3); }
  .modo-nome { font-size: 19px; line-height: 1.15; }
  .modo-sotto { margin-top: 2px; font-size: var(--t-minimo); }
  .matrice tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--bordo); }
  .matrice tbody tr.matrice-gruppo { display: block; border-top: 0; }
  .matrice .matrice-gruppo th { display: block; padding: var(--sp-5) 0 var(--sp-2); }
  .matrice tbody th { grid-column: 1 / -1; padding: var(--sp-4) 0 var(--sp-2); border-top: 0; }
  .matrice tbody td { border-top: 0; padding: 0 var(--sp-3) var(--sp-4) 0; }
  .matrice td:not([colspan]) { padding-left: 30px; }
  .matrice td:not([colspan]) + td { padding-left: calc(var(--sp-3) + 30px); }
  .matrice td + td .segno { left: var(--sp-3); }
  .segno { left: 0; top: 0; }
  .nota { font-size: var(--t-corpo); }
}

/* ── Una giornata con Rift: tre schermate vere dell'app su una linea del tempo ── */
.giornata .sezione-testa { max-width: none; }
.giornata-fila {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px);
  margin: 0; padding: 0; list-style: none;
}
/* La linea del giorno passa dietro le ore */
.giornata-fila::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: var(--rail-filo); }
.giornata-momento { position: relative; display: grid; justify-items: start; align-content: start; gap: var(--sp-4); }
.giornata-momento .telefono { --lato: clamp(220px, 22vw, 290px); margin-top: var(--sp-2); }
.giornata-momento h3 { margin-top: var(--sp-2); font-family: var(--font-titolo); font-weight: var(--p-titolo); text-transform: uppercase; font-size: clamp(24px, 2.2vw, 32px); line-height: var(--i-stretta); letter-spacing: var(--spaziatura-titolo); color: var(--inchiostro); }
.giornata-momento > p:last-child { max-width: 34ch; font-size: var(--t-medio); line-height: var(--i-corpo); color: var(--inchiostro-2); text-wrap: pretty; }
.giornata-ora { display: inline-flex; align-items: center; gap: var(--sp-2); padding-right: var(--sp-3); background: var(--rail-fondo); font-size: var(--t-minimo); font-weight: var(--p-forte); letter-spacing: var(--spaziatura-maiuscolo); text-transform: uppercase; color: var(--accento-testo); }
.giornata-ora span { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.giornata-ora span::before { content: ""; width: 11px; height: 11px; border: 2px solid var(--accento); border-radius: 50%; background: var(--rail-fondo); }
.giornata-ora .ico { width: 16px; height: 16px; }

/* Sotto: il dubbio e il dolore, due riquadri brevi */
.giornata-piu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: clamp(48px, 6vw, 80px); }
.giornata-riquadro { display: grid; align-content: start; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--rail-filo); border-radius: var(--r); }
.giornata-riquadro p:not([class]) { font-size: var(--t-medio); line-height: var(--i-corpo); color: var(--inchiostro-2); text-wrap: pretty; }
.giornata-riquadro b { color: var(--inchiostro); font-weight: var(--p-forte); }
.giornata-avviso { font-size: var(--t-piccolo); color: var(--rail-testo); }

.giornata-anche { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.giornata-anche li { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 10px 14px; border: 1px solid var(--rail-filo); border-radius: var(--r); font-size: var(--t-corpo); color: var(--inchiostro-2); }
.giornata-anche li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accento); }

/* Sul telefono: i tre momenti scorrono di lato, uno per volta */
@media (max-width: 900px) {
  /* 2px sopra: il contorno del fuoco (offset -2px, site.css) resta fuori dalle ore, che hanno il fondo pieno; la linea scende con loro */
  .giornata .giornata-fila { display: flex; gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margine); padding-inline: var(--margine); padding-top: 2px; margin-inline: calc(-1 * var(--margine)); scrollbar-width: none; }
  .giornata-fila::-webkit-scrollbar { display: none; }
  .giornata-fila::before { top: 11px; left: var(--margine); right: auto; width: calc(3 * min(72vw, 300px) + 2 * var(--sp-5)); }
  .giornata-momento { flex: 0 0 min(72vw, 300px); scroll-snap-align: start; }
  .giornata-momento .telefono { --lato: min(64vw, 260px); }
  .giornata-piu { grid-template-columns: minmax(0, 1fr); }
}

/* ── Decidi tu: la scrivania del preparatore, con due segni ─────────────── */
.consenso-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-7) clamp(32px, 5vw, 88px); align-items: center; }
.consenso-testo { display: grid; gap: var(--sp-4); align-content: center; }
.consenso-testo .lead { margin-top: var(--sp-2); }
.consenso-testo .punti { margin-top: var(--sp-3); }
.consenso-vista { display: grid; gap: var(--sp-5); min-width: 0; }
.consenso-vista .browser-schermo { position: relative; }
.riquadro {
  position: absolute;
  border: 1px dashed var(--inchiostro-2);
  border-radius: var(--r);
  pointer-events: none;
}
.riquadro b, ol.legenda b {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--r);
  background: var(--inchiostro); color: var(--fondo);
  font-size: var(--t-minimo); font-weight: var(--p-forte); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.riquadro b { position: absolute; top: -12px; right: 12px; }
/* Le percentuali sono i bordi delle carte in consenso-dark-r-1440.webp (1440x690):
   se si rifà lo scatto vanno rimisurate (bordi a 1px più chiari dello sfondo). */
.r-sempre { left: calc(1.18% - 3px); top: calc(36.8% - 4px); width: calc(58.6% + 6px); height: calc(20.4% + 8px); }
.r-concesso { left: calc(1.18% - 3px); top: calc(70.7% - 4px); width: calc(97.6% + 6px); height: calc(26.8% + 8px); }
/* ol: la legenda del confronto (un ul, in site.css) carica anche questo file in Funzioni */
ol.legenda { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
ol.legenda li { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3); align-items: start; font-size: var(--t-corpo); line-height: 1.5; color: var(--inchiostro-2); }
ol.legenda li span { padding-top: 1px; }
@media (max-width: 1000px) {
  .consenso-griglia { grid-template-columns: minmax(0, 1fr); }
}
/* Sul telefono lo screenshot è piccolo: il numero sta sopra l'angolo del riquadro, fuori, e non copre niente */
@media (max-width: 600px) {
  .riquadro b { width: 18px; height: 18px; top: auto; bottom: calc(100% + 3px); right: -1px; font-size: var(--t-micro); }
}

/* ── Cosa Rift non fa: un registro di confini, ognuno con il suo «no» ───── */
.non-fa { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--inchiostro); }
.non-fa li {
  display: grid;
  grid-template-columns: 64px minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--sp-2) var(--sp-5);
  align-items: baseline;
  padding-block: var(--sp-5);
  border-bottom: var(--bordo);
}
.non-fa li::before {
  content: "";
  align-self: start;
  width: 28px; height: 2px;
  margin-top: 0.62em;
  background: var(--filo-forte);
  transform-origin: left;
}
.non-fa h3 {
  font-family: var(--font-titolo); font-weight: var(--p-titolo);
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.14;
  text-transform: uppercase; letter-spacing: var(--spaziatura-titolo);
  color: var(--inchiostro);
}
.non-fa p { color: var(--inchiostro-2); max-width: 46ch; text-wrap: pretty; }
@media (max-width: 760px) {
  .non-fa li { grid-template-columns: 40px minmax(0, 1fr); }
  .non-fa li::before { width: 22px; margin-top: 0.5em; }
  .non-fa p { grid-column: 2; }
}

/* ── Movimento: entrate, segni che si disegnano, telefoni che salgono ───── */
@media (prefers-reduced-motion: no-preference) {
  /* La matrice: le righe arrivano una dopo l'altra e le spunte si disegnano */
  .js .matrice tbody tr:not(.matrice-gruppo) { opacity: 0; }
  .js .matrice.in tbody tr { opacity: 1; transition: opacity var(--m-ingresso) var(--curva); transition-delay: calc(var(--r, 0) * 60ms); }
  .js .matrice .spunta path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .matrice.in .spunta path { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--curva); transition-delay: calc(var(--r, 0) * 60ms + 240ms); }
  .js .matrice .segno[data-v="no"]::before { scale: 0 1; transform-origin: left; }
  .js .matrice.in .segno[data-v="no"]::before { scale: 1 1; transition: scale 600ms var(--curva); transition-delay: calc(var(--r, 0) * 60ms + 240ms); }

  /* I segni sulla scrivania compaiono dopo la cornice */
  .js .consenso-vista .riquadro { opacity: 0; scale: 0.98; }
  .js .consenso-vista.in .riquadro { opacity: 1; scale: 1; transition: opacity var(--m-ingresso) var(--curva), scale var(--m-ingresso) var(--curva); transition-delay: 500ms; }
  .js .consenso-vista.in .r-concesso { transition-delay: 700ms; }

  /* Il «no» di ogni confine si disegna da sinistra */
  .js .non-fa li::before { scale: 0 1; }
  .js .non-fa li.in::before { scale: 1 1; transition: scale 600ms var(--curva) 200ms; }

  /* Allo scorrimento i telefoni salgono piano; nella hero i messaggi un po' più svelti */
  @supports (animation-timeline: view()) {
    .atleti-scena .scena-telefono { animation: atleti-sale-piano linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .atleti-scena .messaggio { animation: atleti-sale-svelto linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .atleti-scena .messaggio-team { animation-name: atleti-sale-piu-svelto; }
  }
}
@keyframes atleti-sale-piano { to { transform: translateY(-20px); } }
@keyframes atleti-sale-svelto { to { transform: translateY(-56px); } }
@keyframes atleti-sale-piu-svelto { to { transform: translateY(-88px); } }

/* ── Impaginato centrato (vedi site.css) ─────────────────────────────────── */
.matrice, .giornata-fila, .giornata-piu, .consenso-griglia, .atleti-hero-griglia { max-width: var(--largo); margin-inline: auto; }
/* I tre momenti: telefono, ora e testo al centro della loro colonna */
.giornata-momento { justify-items: center; text-align: center; }
.giornata-momento > p:last-child { margin-inline: auto; }
/* Cosa Rift non fa: al centro, e la spiegazione sotto il suo titolo invece che sul lato */
.non-fa { max-width: var(--quadro); margin-inline: auto; }
.non-fa li { grid-template-columns: 64px minmax(0, 1fr); }
.non-fa p { grid-column: 2; max-width: 64ch; }
@media (max-width: 760px) { .non-fa li { grid-template-columns: 40px minmax(0, 1fr); } }