/* ============================================================
   LE FRECCE DELLE FILE CHE SCORRONO DI LATO (07/10/2026)
   ------------------------------------------------------------
   IL TITOLARE: "importatissimo quando abbiamo lo scroll orizzontale non tutti i mouse lo hanno dobbiamo
   mettere le frecce destra e sinistra". Ha ragione: le file di Mood si trascinano col dito, si scorrono
   con la rotellina orizzontale e con la tastiera (il fuoco porta il riquadro in vista), ma con un mouse
   normale - che ha solo la rotellina verticale - quello che sta oltre il bordo NON si raggiunge, e quasi
   sempre la barra e' nascosta di proposito (`scrollbar-width: none`), quindi non c'e' nemmeno l'indizio
   che ci sia dell'altro.

   Sono le stesse frecce del binario (`binario.css`, 29/09/2026), dei giochi (`game.css`) e delle storie
   (`feed.html` + `stories.js`): stessi valori, un posto solo. Chi le disegna e' `mood-frecce.js`, che le
   attacca alle aree dichiarate la' dentro e le accende una per una solo quando da quella parte c'e'
   davvero ancora qualcosa.

   PERCHE' DUE FORME, e non una: attorno alle file di contenuto (le storie degli influencer) c'e' spazio,
   quindi la freccia sta FUORI, tonda, 34px come nel binario. Attorno alle linguette (le sezioni del
   Creator Hub, le aree di admin, i periodi di Insight) non c'e' spazio: li' due cerchi fuori dai bordi
   coprirebbero i tasti accanto, quindi la freccia sta DENTRO la riga, piu' piccola (28px) e senza ombra.
   =============== */
.mf-fila {position: relative;min-width: 0;margin-top: 1rem;}

.mf-fila > .mf-freccia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--mood-border, rgba(255, 255, 255, .18));
    border-radius: 50%;
    background: var(--mood-bg-card, rgb(255 255 255 / 95%));
    color: var(--mood-primary, #2b4ed0);
    box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform .15s ease, background .18s ease;
}
.mf-fila > .mf-freccia[hidden] { display: none; }
.mf-fila > .mf-freccia--prima { left: 4px; }
.mf-fila > .mf-freccia--dopo { right: 4px; }
.mf-fila > .mf-freccia:hover,
.mf-fila > .mf-freccia:focus-visible { transform: translateY(-50%) scale(1.08); }
.mf-fila > .mf-freccia svg,
.mf-fila > .mf-freccia i { width: 20px; height: 20px; pointer-events: none; }

/* LE FRECCE DENTRO (linguette troppo vicine ai bordi per stare fuori). */
.mf-fila--linguette { display: flex; align-items: center; gap: 2px; min-width: 0; }
.mf-fila--linguette > .mf-freccia {
    position: static;
    transform: none;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    box-shadow: none;
    background: transparent;
    border-color: transparent;
    color: var(--mood-text-muted, rgba(255, 255, 255, .6));
}
.mf-fila--linguette > .mf-freccia:hover,
.mf-fila--linguette > .mf-freccia:focus-visible {
    transform: none;
    background: var(--mood-bg-hover, rgba(255, 255, 255, .08));
    color: var(--mood-text, #fff);
}
.mf-fila--linguette > .mf-freccia svg,
.mf-fila--linguette > .mf-freccia i { width: 16px; height: 16px; }

/* LE LINGUETTE: il contenitore che scorre sta DENTRO il giro delle frecce, e perche' possa stringersi
   deve poter perdere la sua larghezza minima (altrimenti resta largo quanto il contenuto e le frecce lo
   spingono fuori dalla pagina). Vale per la striscia delle linguette, non per le frecce stesse. */
.mf-fila--linguette > :not(.mf-freccia) { min-width: 0; flex: 0 1 auto; }

/* SUL DITO non servono: la fila si trascina, e due bottoni sopra i riquadri sarebbero ingombro. E' la
   stessa scelta dichiarata del binario e dei giochi (`binario.css`). Chi ha un puntatore le vede.

   IL SELETTORE E' A DUE PEZZI, E NON E' UNO SFIZIO (07/10/2026): scritta come `.mf-freccia { display: none }`
   questa regola NON spegneva niente, perche' le regole della freccia stanno su `.mf-fila > .mf-freccia` (due
   pezzi) e vincono su una classe sola, qualunque sia l'ordine. Il difetto e' stato visto dalla prova, sul
   telefono vero: `col dito le frecce sono spente - 1 frecce disegnate` (una sola, perche' l'altra era spenta
   dal `[hidden]`). E' lo stesso inciampo del bollino della percentuale (`invite.css`, dove una regola larga
   su `span` rendeva il numero gigante e sbiadito): chi scrive una regola deve superare quella che vuole
   correggere. */
@media (hover: none) {
    .mf-fila > .mf-freccia,
    .mf-fila--linguette > .mf-freccia { display: none; }
}