/* LA STRISCIA A TEMPO (LTM) DEL SIMULATORE DEL SEMESTRE FILTRO — in cima alla home e alla dashboard.
 *
 * Founder, 25/9: «PICCOLO e LUNGO e messo IN ALTO, con la possibilità di chiuderlo con la X». Una
 * striscia bassa (56 px sul computer, 72 sul telefono) subito sotto la barra di navigazione: badge
 * «Evento a tempo» col punto che pulsa, «Simulatore del semestre filtro · gratis», il conto alla
 * rovescia a caselline, «Allenati», la X. Tutta la striscia è il link, tranne la X.
 *
 * Un foglio a parte e piccolo (style.css ha un tetto, seo-testa-pagine.test.js), nel <head> delle due
 * pagine che la mostrano: la striscia è la prima cosa di <main>, e senza il suo foglio si
 * disegnerebbe nuda e poi salterebbe. È SEMPRE indaco, come l'immagine di Higgsfield e come l'app:
 * i testi sono bianchi in tutti e due i temi (bianco sull'indaco più chiaro ≈ 5,5:1). I colori sono
 * gettoni del componente, presi dall'immagine: fuori da qui non servono.
 *
 * L'altezza è sua dal primo disegno (min-height) e le caselline hanno il loro posto già riservato:
 * il modulo le riempie senza spostare niente. */
.ltm-sf {
  --ltm-indaco-notte: #221ab0;
  --ltm-indaco: #2437d8;
  --ltm-indaco-chiaro: #2a5ff2; /* = il bordo sinistro dell'immagine, dove sfuma */
  --ltm-su-indaco: #ffffff;
  --ltm-casella: rgba(10, 14, 90, 0.42);
  --ltm-filo: rgba(255, 255, 255, 0.22);
  --ltm-punto: #ff4f6a;
  --ltm-velo-x: rgba(14, 20, 110, 0.55);
  --ltm-anello: #ffffff;
}
.ltm-sf[hidden] { display: none !important; }

.ltm-sf__wrap { max-width: 1120px; margin: 0 auto; padding: 12px 16px 0; }
.ltm-sf--dashboard .ltm-sf__wrap { max-width: 1180px; }
/* in dashboard la striscia sta sul fondo della PAGINA (non su una fascia sua: fra l'avviso della
   prova e la guida di benvenuto, che il JavaScript inserisce, una fascia bianca restava a metà), e
   tiene un respiro sotto, così la scheda che segue non la tocca */
.ltm-sf--dashboard .ltm-sf__wrap { padding-bottom: 12px; }

.ltm-sf__striscia {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 72px;
  overflow: hidden;
  border-radius: 16px;
  color: var(--ltm-su-indaco);
  background: linear-gradient(90deg, var(--ltm-indaco-notte) 0%, var(--ltm-indaco) 42%, var(--ltm-indaco-chiaro) 78%);
  box-shadow: 0 8px 22px -14px rgba(27, 39, 179, 0.6);
}
:root.dark .ltm-sf__striscia { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }

/* Skoo col camice e il cronometro, piccolo, ancorato a destra: il suo bordo sinistro è già sfumato
   nell'indaco (il ritaglio è fatto apposta, assets/img/banner-ltm-striscia.webp). */
.ltm-sf__img {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

/* Il link: telefono — badge e caselline sulla prima riga, il testo sotto (al più due righe corte). */
.ltm-sf__link {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-areas: "badge conto conto" "testo testo vai";
  align-items: center;
  align-content: center;
  gap: 5px 8px;
  min-width: 0;
  padding: 8px 88px 8px 12px;
  color: var(--ltm-su-indaco);
  text-decoration: none;
}
.ltm-sf__link:hover, .ltm-sf__link:focus { color: var(--ltm-su-indaco); text-decoration: none; }

.ltm-sf__badge {
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  background: var(--ltm-su-indaco);
  color: var(--ltm-indaco-notte);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Il badge: sul telefono (e fino a 979 px, dove l'etichetta «alla prima prova» non c'è) dice a
   cosa conta il conto — «Prima prova tra»; da 980 px torna «Evento a tempo», e l'etichetta fa il
   resto. Mai un conto senza riferimento: letto sotto «gratis» sembrerebbe la sua scadenza. */
.ltm-sf__badge-largo { display: none; }
.ltm-sf__punto {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ltm-punto);
}

.ltm-sf__testo {
  grid-area: testo;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.ltm-sf__gratis { font-weight: 800; }

/* Il conto: le caselline (o «Oggi alle 11») e, sul computer, l'etichetta «alla prima prova». */
.ltm-sf__conto {
  grid-area: conto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ltm-sf__conto:not(.ltm-sf__conto--pieno) { visibility: hidden; } /* niente caselline vuote */
.ltm-sf__caselle { display: inline-flex; gap: 4px; }
.ltm-sf__caselle[hidden], .ltm-sf__oggi[hidden] { display: none; }
.ltm-sf__casella, .ltm-sf__oggi {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 32px;
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--ltm-casella);
  box-shadow: inset 0 0 0 1px var(--ltm-filo);
  font-family: 'Space Grotesk', Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ltm-sf__casella small { margin-left: 1px; font-size: 0.78em; font-weight: 600; opacity: 0.85; }
.ltm-sf__etichetta { display: none; font-size: 13px; opacity: 0.92; white-space: nowrap; }

.ltm-sf__vai {
  grid-area: vai;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.ltm-sf__vai-testo { display: none; }
.ltm-sf__vai svg { width: 16px; height: 16px; }

.ltm-sf__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* La X: 44 px di area da toccare, un cerchio piccolo dentro; indaco scuro e un filo bianco, così
   il bianco non cade mai sui colori chiari dell'immagine. Sul telefono sta nell'angolo in alto, sopra
   il pendolo: il viso di Skoo resta libero. */
.ltm-sf__chiudi {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ltm-su-indaco);
  cursor: pointer;
}
.ltm-sf__chiudi span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ltm-velo-x);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.ltm-sf__chiudi svg { width: 12px; height: 12px; }
.ltm-sf__chiudi:hover span { background: rgba(14, 20, 110, 0.8); }

/* Il fuoco si vede sull'indaco: anello bianco DENTRO la striscia (fuori lo taglierebbe l'overflow;
   il *:focus-visible del sito è un'ombra del colore d'accento, che sul blu sparirebbe). */
.ltm-sf .ltm-sf__link:focus-visible {
  outline: 3px solid var(--ltm-anello);
  outline-offset: -4px;
  border-radius: 16px;
  box-shadow: none;
}
.ltm-sf .ltm-sf__chiudi:focus-visible { outline: none; box-shadow: none; }
.ltm-sf .ltm-sf__chiudi:focus-visible span { box-shadow: 0 0 0 3px var(--ltm-anello); }

/* Chiusa la striscia da tastiera, il fuoco va a ciò che veniva dopo (modules/banner-ltm.js): è un
   punto di partenza, non un comando, e l'anello del sito attorno a un titolo sarebbe solo rumore. */
.ltm-sf-dopo:focus, .ltm-sf-dopo:focus-visible { outline: none; box-shadow: none; }

/* Il punto pulsa solo a chi non ha chiesto di ridurre il movimento: altrimenti è un punto fermo. */
@media (prefers-reduced-motion: no-preference) {
  .ltm-sf__punto { animation: ltm-sf-pulsa 1.8s ease-out infinite; }
  .ltm-sf__vai svg { transition: transform 0.15s ease; }
  .ltm-sf__link:hover .ltm-sf__vai svg { transform: translateX(2px); }
}
@keyframes ltm-sf-pulsa {
  0% { box-shadow: 0 0 0 0 rgba(255, 79, 106, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(255, 79, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 79, 106, 0); }
}

/* Computer e tavolette larghe: tutto su una riga, alta 56 px, con l'etichetta e «Allenati». */
@media (min-width: 760px) {
  .ltm-sf__wrap { padding: 14px 20px 0; }
  .ltm-sf__striscia { min-height: 56px; }
  .ltm-sf__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 118px 8px 14px;
  }
  .ltm-sf__badge { font-size: 11px; padding: 4px 10px 4px 8px; }
  .ltm-sf__testo { font-size: 15px; white-space: nowrap; }
  .ltm-sf__casella, .ltm-sf__oggi { font-size: 14px; min-width: 36px; }
  .ltm-sf__etichetta { display: inline; }
  .ltm-sf__vai {
    margin-left: auto;
    padding: 6px 12px 6px 14px;
    border-radius: 999px;
    background: var(--ltm-su-indaco);
    color: var(--ltm-indaco-notte);
  }
  .ltm-sf__vai-testo { display: inline; }
  /* Skoo si sposta a sinistra della X e sfuma anche a destra: la X ha la sua colonna e non gli
     copre la faccia. */
  .ltm-sf__img {
    right: 44px;
    -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
    mask-image: linear-gradient(90deg, #000 78%, transparent);
  }
  .ltm-sf__chiudi { top: 50%; margin-top: -22px; }
}
/* Telefoni stretti (fino a 374 px): il testo un filo più piccolo, così sta su una riga, e la
   freccia lascia il posto (tutta la striscia resta il link). */
@media (max-width: 374px) {
  .ltm-sf__link { padding-right: 78px; }
  .ltm-sf__testo { font-size: 12px; letter-spacing: -0.01em; }
  .ltm-sf__vai { display: none; }
}
/* Da 980 px l'etichetta c'è: il badge torna «Evento a tempo». */
@media (min-width: 980px) {
  .ltm-sf__badge-largo { display: inline; }
  .ltm-sf__badge-stretto { display: none; }
}
/* Fra 760 e 980 px la riga è corta: via l'etichetta, «Allenati» resta (il badge fa da riferimento). */
@media (min-width: 760px) and (max-width: 979px) {
  .ltm-sf__etichetta { display: none; }
}