/* MyTube — foglio di stile unico.
 *
 * Due vincoli che hanno deciso la forma, non il gusto:
 *
 * 1. SI USA DAL TELEFONO, con un pollice. Quindi ogni cosa toccabile e almeno
 *    44px, e per gli istanti del taglio ci sono slider e stepper invece di
 *    campi di testo: scrivere "1:23,4" su una tastiera mobile mentre si cerca
 *    il punto giusto e il modo peggiore di fare questa operazione.
 * 2. LA CSP VIETA GLI STILI IN LINEA (src/security.js). Niente attributi
 *    `style=` nell'HTML: quello che cambia a runtime passa da classi, e le
 *    poche misure dinamiche (larghezza della barra, posizione della
 *    selezione) da proprieta custom impostate via CSSOM, che la CSP ammette.
 */

:root {
  color-scheme: dark;

  --fondo: #0d0f13;
  --fondo-scheda: #15181f;
  --fondo-campo: #0a0c10;
  --bordo: #262b35;
  --bordo-forte: #3a4150;

  --testo: #e8eaf0;
  --testo-tenue: #9aa3b2;
  --testo-debole: #6b7484;

  --accento: #ff4d4d;
  --accento-tenue: #3a1a1e;
  --ok: #4ade80;
  --attenzione: #fbbf24;

  --raggio: 14px;
  --raggio-piccolo: 10px;
  --tocco: 44px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--testo);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.guscio {
  max-width: 44rem;
  margin: 0 auto;
  /* `viewport-fit=cover` manda il contenuto SOTTO la barra di stato e sotto
   * la barra di casa: le due `env()` sono cio che lo riporta dentro. La prima
   * stesura aveva solo quella in basso, e il titolo finiva sotto l'orologio.
   * Le laterali servono in orizzontale, dove il notch mangia un bordo. */
  padding:
    calc(1.25rem + env(safe-area-inset-top))
    calc(1rem + env(safe-area-inset-right))
    3rem
    calc(1rem + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---------- testa ---------- */

.testa { padding: 0.5rem 0 0.25rem; }

.testa h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.sottotitolo {
  margin: 0.25rem 0 0;
  color: var(--testo-tenue);
  font-size: 0.95rem;
}

/* ---------- schede ---------- */

.scheda {
  background: var(--fondo-scheda);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.scheda[hidden], [hidden] { display: none !important; }

.testa-sezione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.scheda h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}

.etichetta {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--testo-debole);
}

.aiuto {
  margin: 0;
  font-size: 0.85rem;
  color: var(--testo-debole);
}

.meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--testo-tenue);
}

.gruppo {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gruppo legend { padding: 0; }

/* ---------- il campo: link incollato o parole da cercare ---------- */

.riga-campo {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Si punta alla RIGA e non al tipo di input: il campo e passato da
 * type="url" a type="search" quando e diventato anche una ricerca, e un
 * selettore legato al tipo gli aveva tolto lo stile di colpo. */
.riga-campo input {
  flex: 1 1 12rem;
  min-height: var(--tocco);
  padding: 0.6rem 0.75rem;
  background: var(--fondo-campo);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-piccolo);
  color: var(--testo);
  font-size: 1rem;
  /* 16px pieni: sotto, iOS ingrandisce la pagina al fuoco del campo. */
  -webkit-appearance: none;
  appearance: none;
}

.riga-campo input:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 1px;
}

.riga-campo input::placeholder { color: var(--testo-debole); }

/* Safari mette una sua X dentro type="search": stona con tutto il resto. */
.riga-campo input::-webkit-search-decoration,
.riga-campo input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* ---------- bottoni ---------- */

.bottone {
  min-height: var(--tocco);
  padding: 0.6rem 1rem;
  background: #1e232c;
  color: var(--testo);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-piccolo);
  font-size: 0.95rem;
  font-weight: 550;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bottone:hover:not(:disabled) { border-color: #4a5365; }
.bottone:active:not(:disabled) { transform: translateY(1px); }
.bottone:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

.bottone:disabled {
  opacity: 0.5;
  cursor: default;
}

.bottone.primario {
  background: var(--accento);
  border-color: var(--accento);
  color: #fff;
  font-weight: 600;
}

.bottone.primario:hover:not(:disabled) { background: #ff6161; border-color: #ff6161; }

.bottone.largo { width: 100%; }

.bottone.piccolo {
  min-height: 36px;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

/* ---------- segmenti (scelte) ---------- */

.segmenti {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.segmento {
  flex: 1 1 8rem;
  min-height: var(--tocco);
  padding: 0.5rem 0.75rem;
  background: var(--fondo-campo);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-piccolo);
  color: var(--testo-tenue);
  font-size: 0.95rem;
  font-weight: 550;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  line-height: 1.2;
}

.segmento[aria-pressed="true"] {
  background: var(--accento-tenue);
  border-color: var(--accento);
  color: var(--testo);
}

.segmento:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

.nota-segmento {
  font-size: 0.72rem;
  font-weight: 450;
  color: var(--testo-debole);
}

.segmento[aria-pressed="true"] .nota-segmento { color: var(--testo-tenue); }

/* ---------- la selezione sull'onda ---------- */

.selezione {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--bordo);
}

.onda-contenitore { position: relative; }

.onda {
  min-height: 96px;
  background: var(--fondo-campo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  overflow: hidden;
}

.stato-onda {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--testo-debole);
  pointer-events: none;
}

.stato-onda[hidden] { display: none; }

/* --- gli estremi, in una riga --- */

.estremi {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Due bottoni, non due etichette: toccandoli si sceglie quale estremo
 * comanda lo slider. Prima c'erano due slider interi, e su un telefono
 * costavano ~260px per fare la stessa cosa che ne fa uno. */
.estremo {
  flex: 1 1 0;
  min-height: var(--tocco);
  padding: 0.4rem 0.5rem;
  background: var(--fondo-campo);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-piccolo);
  color: var(--testo-tenue);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  line-height: 1.15;
  font: inherit;
}

.estremo[aria-pressed="true"] {
  background: var(--accento-tenue);
  border-color: var(--accento);
  color: var(--testo);
}

.estremo:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

.estremo-nome {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-debole);
}

.estremo[aria-pressed="true"] .estremo-nome { color: var(--accento); }

.estremo-valore {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--testo);
}

/* La durata della selezione e IL numero che conta per una suoneria: prima
 * era grigio fra due bottoni accesi e si perdeva. */
.estremo-durata {
  flex: 0 0 auto;
  min-width: 4rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accento);
}

/* --- la porzione, disegnata SOPRA l'onda --- */

.regione {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none; /* i tocchi devono arrivare all'onda sotto */
  border-radius: var(--raggio-piccolo);
  overflow: hidden;
}

/* Fuori dalla selezione si spegne: cosi si vede a colpo d'occhio cosa si
 * sta prendendo, invece di doverlo dedurre dai numeri. */
.regione-fuori {
  background: rgba(10, 12, 16, 0.68);
}

.regione-prima { width: var(--sel-inizio, 0%); }
.regione-dopo { width: var(--sel-dopo, 0%); }

.regione-dentro {
  flex: 1 1 auto;
  border-left: 2px solid var(--accento);
  border-right: 2px solid var(--accento);
  background: rgba(255, 77, 77, 0.07);
}

/* L'estremo che lo slider sta muovendo si ispessisce: senza, non si capisce
 * quale dei due si sposta. */
.selezione[data-attivo="inizio"] .regione-dentro { border-left-width: 4px; }
.selezione[data-attivo="fine"] .regione-dentro { border-right-width: 4px; }

.riga-ascolto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.suggerimento {
  flex: 1 1 10rem;
  font-size: 0.78rem;
  color: var(--testo-debole);
}

/* ---------- costo e avvisi ---------- */

.costo {
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: var(--fondo-campo);
  border-left: 3px solid var(--bordo-forte);
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--testo-tenue);
}

.costo.lento {
  border-left-color: var(--attenzione);
  color: var(--testo);
}

.avviso {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: var(--raggio-piccolo);
  font-size: 0.9rem;
  background: var(--accento-tenue);
  border: 1px solid var(--accento);
  color: var(--testo);
}

.avviso.buono {
  background: #10281a;
  border-color: #246b3f;
}

.avviso-inline {
  margin: 0;
  font-size: 0.88rem;
  color: var(--attenzione);
}

/* ---------- barra di avanzamento ---------- */

.barra {
  height: 10px;
  background: var(--fondo-campo);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  overflow: hidden;
}

.barra-dentro {
  height: 100%;
  width: var(--avanzamento, 0%);
  background: var(--accento);
  border-radius: 5px;
  transition: width 0.3s ease;
}

/* ---------- libreria ---------- */

.libreria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.voce {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--fondo-campo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
}

.voce-corpo {
  flex: 1 1 auto;
  min-width: 0;
}

.voce-titolo {
  display: block;
  font-size: 0.92rem;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voce-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--testo-debole);
  font-variant-numeric: tabular-nums;
}

.voce.scaduta .voce-titolo { color: var(--testo-debole); }

.voce-azioni {
  display: flex;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.scaduto-etichetta {
  font-size: 0.75rem;
  color: var(--attenzione);
  white-space: nowrap;
}

/* ---------- da tablet in su ---------- */

@media (min-width: 40rem) {
  .guscio { padding: 2rem 1.5rem 4rem; gap: 1.25rem; }
  .testa h1 { font-size: 1.9rem; }
  .scheda { padding: 1.25rem; }
  /* Su schermo largo l'onda puo essere piu alta: lo spazio verticale non e
   * piu la risorsa scarsa, e una forma d'onda piu alta si legge meglio. */
  .onda { min-height: 140px; }
  .estremo-valore { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .bottone:active:not(:disabled) { transform: none; }
}

/* ---------- risultati di ricerca ----------
 *
 * Righe toccabili: l'intera riga e il bersaglio, non un bottone dentro la
 * riga. Su un telefono mirare un bottone piccolo dentro un elenco e il modo
 * piu facile di aprire il video sbagliato.
 */

.risultati {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.risultato {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  min-height: 72px;
  padding: 0.5rem;
  background: var(--fondo-campo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  color: var(--testo);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.risultato:hover:not(:disabled) { border-color: var(--bordo-forte); }
.risultato:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

.risultato:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Spazio riservato prima che l'immagine arrivi: senza, l'elenco sobbalza
 * mentre le copertine si caricano una per una. */
.copertina {
  flex: 0 0 auto;
  width: 112px;
  height: 63px;
  object-fit: cover;
  background: #1b2029;
  border-radius: 6px;
}

.risultato-corpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
}

.risultato-titolo {
  font-size: 0.92rem;
  font-weight: 550;
  line-height: 1.3;
  /* Due righe e poi i puntini: un titolo YouTube puo essere lunghissimo e
   * farebbe crescere la riga fino a coprire lo schermo. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.risultato-meta {
  font-size: 0.78rem;
  color: var(--testo-debole);
  font-variant-numeric: tabular-nums;
}

.risultato-troppo {
  font-size: 0.78rem;
  color: var(--attenzione);
}

@media (min-width: 40rem) {
  .copertina { width: 140px; height: 79px; }
}

/* Una copertina che non arriva non deve mostrare l'icona di immagine rotta:
 * resta lo spazio, e l'elenco non sobbalza. */
.copertina.senza-immagine { visibility: hidden; }

/* ---------- la barra dell'azione principale ----------
 *
 * Fissa in fondo. Motivo misurato su iPhone: la pagina finiva SOTTO la barra
 * flottante di Safari, e lo slider «Fine» non era nemmeno raggiungibile.
 * `env(safe-area-inset-bottom)` tiene conto della barra di casa.
 */

.barra-azione {
  position: sticky;
  /* Si ferma SOPRA la barra di casa, non sotto. */
  bottom: env(safe-area-inset-bottom);
  z-index: 10;
  /* Solo laterale: il margine NEGATIVO in basso che c'era prima tirava su di
   * se la scheda successiva, e quando la barra non era agganciata finiva
   * sopra «I tuoi file» -- visibile nello screenshot che l'ha fatta trovare. */
  margin: 0 -1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(to top, var(--fondo) 60%, rgba(13, 15, 19, 0));
}

.barra-azione[hidden] { display: none !important; }

@media (min-width: 40rem) {
  .barra-azione { margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
}