.atleta-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.2rem 1rem 4rem;
}

/* Logo del cliente (skin attiva) accanto al nome in testata: nascosto finché atleta.js non lo
   valorizza (nessuna skin attiva = resta solo il testo, come sempre). */
.brand-logo-header {
  height: 1.4rem;
  width: auto;
  vertical-align: middle;
  margin-right: 0.4rem;
  border-radius: 4px;
}

.week-heading {
  margin: 1.6rem 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

.week-heading:first-child { margin-top: 0.4rem; }

.athlete-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  /* Logo NS come filigrana leggerissima dietro le righe: il colore fa da base leggibile (quasi
     opaca), l'immagine (già a bassissima opacità nel file stesso) resta visibile sopra. */
  background: color-mix(in srgb, var(--panel) 94%, transparent) center 55% / 90% auto no-repeat
    url("assets/brand/ns-logo-watermark.png");
}

.athlete-table {
  font-size: 0.82rem;
  background: transparent;
}

.athlete-table .col-identity {
  min-width: 128px;
  max-width: 150px;
  font-size: 0.8rem;
  /* styles.css imposta uno sfondo pieno (var(--panel)) su questa colonna per la versione sticky
     lato coach: qui va tolto del tutto, altrimenti si somma allo sfondo già semi-trasparente del
     contenitore (.athlete-table-scroll) e la filigrana sotto risulta quasi invisibile. */
  background: transparent;
  /* .timeline-table .col-identity (styles.css) la rende "sticky" durante lo scroll orizzontale per
     il coach: qui non serve (poche colonne, niente da tenere fissa) ed è proprio questo posizionamento
     a scontrarsi, in alcuni browser (Safari iOS), con la colonna Note più larga — risultato: i due si
     sovrappongono. Colonna normale, nel flusso della tabella come tutte le altre. */
  position: static;
  left: auto;
}

/* Nota atleta: stessa dimensione e interlinea del nome esercizio (.col-identity), mai tagliata —
   l'atleta deve poter leggere tutta la nota, anche lunga (più frasi). Serve una width vera (non solo
   max-width): con table-layout:auto una colonna con testo che va a capo tende a restringersi al
   minimo indispensabile invece di usare lo spazio libero, anche se il max-width lo permetterebbe. La
   tabella eccede lo schermo e scorre in orizzontale, come già succede per le altre colonne. */
/* min-width, non width/max-width: con table-layout:auto una td con testo che va a capo tratta
   "width" come un suggerimento morbido e la restringe comunque al minimo (persino a una singola
   parola) — min-width invece è un requisito che l'algoritmo delle tabelle rispetta davvero. */
.athlete-table .note-col { min-width: 320px; }
.athlete-table .note-col .note-clamp {
  display: block;
  min-width: 320px;
  font-size: 0.8rem;
  line-height: 1.2;
  /* .timeline-table td (styles.css) impone white-space:nowrap a tutte le celle della tabella
     (colonna identità esclusa, che ha gia' il proprio override): senza rimetterlo a normal qui
     il testo non andrebbe mai a capo, qualunque sia la larghezza della colonna. */
  white-space: normal;
  overflow-wrap: break-word;
}

.athlete-table th {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

/* Niente sticky verticale qui: le tabelle sono corte (poche righe a settimana), non serve scorrere
   in verticale, ed evita un artefatto di rendering nell'angolo dove la cella si incrocia con la
   colonna sticky orizzontale (col-identity). Si toglie solo "top" (non "position"), così la colonna
   identità resta sticky in orizzontale durante lo scroll laterale. Selettore con specificità
   maggiore di ".timeline-table thead th" in styles.css per vincere sempre, non solo per ordine. */
.timeline-table.athlete-table thead th {
  top: auto !important;
}

.athlete-table td { font-variant-numeric: tabular-nums; }

/* Giornate alternate tra viola e ciano (stessi colori del logo), leggerissime: bastano a distinguere
   a colpo d'occhio dove finisce un giorno e inizia il successivo senza competere con i numeri. */
.athlete-table tr.day-band-a td:not(.col-identity):not(.svolto-col) {
  background: color-mix(in srgb, var(--glow-cyan) 7%, transparent);
}

.athlete-table tr.day-band-b td:not(.col-identity):not(.svolto-col) {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* Riga marcata (bordo più spesso su tutte le celle, colonna esercizio inclusa): distingue i giorni
   anche a colori spenti/stampa, non solo con la tinta di sfondo. */
.athlete-table tr.day-start td {
  border-top: 2px solid var(--text);
}

.athlete-table .svolto-col input {
  width: 3.6rem;
  padding: 0.25rem 0.3rem;
  font-weight: 600;
}

.load-value { font-weight: 700; color: var(--accent); }
.load-pending { color: var(--muted); }

.error-box {
  background: var(--error-bg);
  border: 1px solid var(--danger);
  border-radius: 10px;
  padding: 1rem;
  color: var(--danger);
}

@media (max-width: 480px) {
  .athlete-table .col-identity { min-width: 108px; max-width: 120px; }
  .athlete-table { font-size: 0.76rem; }
  .athlete-table .svolto-col input { width: 3rem; }
}

.install-btn {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.install-btn:hover { filter: brightness(1.08); }

/* display:none di default e "riacceso" solo con :not([hidden]) su OGNI elemento che l'attributo
   hidden deve nascondere qui sotto (l'overlay e le due liste di passaggi): un display impostato
   sempre nella regola di classe vince comunque sulla regola [hidden] del browser (l'origine "author"
   batte sempre quella "user agent" a parità di specificità), quindi con "display: flex" scritto senza
   condizione l'elemento resterebbe visibile anche con l'attributo hidden presente. */
.install-instructions-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}

.install-instructions-overlay:not([hidden]) { display: flex; }

.install-instructions-sheet {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  padding: 1.4rem 1.4rem 2rem;
  width: 100%;
  max-width: 480px;
}

.install-instructions-sheet h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.install-instructions-sheet p { margin: 0 0 1rem; color: var(--muted); font-size: 0.85rem; }

.install-instructions-sheet ol {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 0.7rem;
}

.install-instructions-sheet ol:not([hidden]) { display: flex; }

.install-instructions-sheet li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.9rem;
}

.install-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, var(--panel));
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
}

.install-instructions-close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--muted);
  cursor: pointer;
}

/* Tempo di recupero (colonna dopo i Kg, solo se il coach l'ha attivata): centrato e su una riga sola. */
.athlete-table .rest-cell { text-align: center; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }