/* ==========================================================================
   LE PAGINE LEGALI — barra sobria, testo leggibile (24/09/2026)
   --------------------------------------------------------------------------
   PERCHE' QUESTO FOGLIO ESISTE. Misurato il 24/09/2026 su /privacy dal vivo:
   `font-family: Times`, fondo trasparente, testo nero, `data-theme` assente, e
   come unico foglio `mood-ui.css`. Cioe' la pagina NON caricava il foglio base
   del sito (`mood.css`) e usciva col carattere del navigatore: «così è proprio
   abbozzato» (il titolare). Le regole `.legale` in `mood-ui.css` non bastano da
   sole: danno spaziature e tabelle, non il carattere ne' i colori del tema.

   COSA FA, in ordine:
   1. la barra in alto, sobria: indietro + marchio + dove sei (sticky, 54px);
   2. la colonna di lettura (misura comoda per un testo lungo) e la tipografia;
   3. la veste dei titoli che escono dal Markdown (`dev-md-*`): il testo lo
      scrive il titolare in Markdown, quindi le classi sono quelle del
      renderizzatore, e vanno vestite qui;
   4. il telefono: barra piu' bassa, tabelle che scorrono invece di uscire.
   Non serve nessun `!important`: questo foglio arriva DOPO `mood-ui.css` e
   parla solo di questa pagina.
   ========================================================================== */

/* --- 1. La barra ------------------------------------------------------------------------ */
.legale-barra {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 14px;
    background: color-mix(in srgb, var(--mood-bg-card, #15152A) 92%, transparent);
    border-bottom: 1px solid var(--mood-border, #2A2A4A);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.85rem;
}
.legale-barra__indietro {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px 7px 8px;
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 999px;
    color: var(--mood-text, #F0F0FF);
    font-weight: 600;
    line-height: 1;
}
.legale-barra__indietro:hover,
.legale-barra__indietro:focus-visible {
    background: var(--mood-bg-hover, #1E1E3A);
    color: var(--mood-text, #F0F0FF);
}
.legale-barra__indietro svg { width: 18px; height: 18px; }
/* IL MARCHIO NON C'È PIÙ NELLA BARRA (24/09/2026). Il titolare: «non serve che metti [icona + «Mood»], è già
   questo [«Indietro»] ... semmai un link a feed sì». Tolto il blocco del marchio; al suo posto un link al
   feed, che è la versione SEMPRE uguale di «Indietro»: quello torna dove si era se si arriva da dentro
   Mood, e al feed se si arriva da fuori; questo va al feed, punto. Stessa pillola, stessa altezza. */
.legale-barra__feed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 999px;
    color: var(--mood-text-muted, #8888AA);
    font-weight: 600;
    font-size: 0.86rem;
    text-decoration: none;
}
.legale-barra__feed:hover,
.legale-barra__feed:focus-visible {
    background: var(--mood-bg-hover, #1E1E3A);
    color: var(--mood-text, #F0F0FF);
}
.legale-barra__feed svg { width: 16px; height: 16px; flex: 0 0 auto; }
.legale-barra__dove {
    margin-left: auto;
    color: var(--mood-text-muted, #8888AA);
    font-weight: 600;
    white-space: nowrap;
    /* IL TITOLO SI TRONCA, NON SI SCHIACCIA (24/09/2026). Misurato su 390 px: con «Indietro» e «Vai al feed»
       accanto, il titolo finiva a larghezza ZERO — invisibile, e con il testo che poteva dipingere sopra le
       pillole. Adesso si accorcia con i puntini e resta leggibile per quello che ci sta: il titolo intero è
       l'<h1> qui sotto, questo è solo il promemoria di dove si è. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* SU TELEFONO IL TITOLO NELLA BARRA NON C'È (24/09/2026). Con «Indietro» e «Vai al feed» accanto non resta
   spazio: misurato a 390 px il titolo finiva a larghezza ZERO — invisibile, ma con il testo ancora dipinto
   sopra le pillole. Il titolo intero è l'<h1> subito sotto: quello nella barra era un promemoria, e su uno
   schermo stretto costava più di quello che diceva. */
@media (max-width: 620px) {
    .legale-barra__dove { display: none; }
}


/* --- 2. La colonna di lettura ------------------------------------------------------------ */
.legale {
    max-width: 720px;
    padding: 26px 18px 96px;
    color: var(--mood-text, #F0F0FF);
}
.legale h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}
.legale .sotto {
    color: var(--mood-text-muted, #8888AA);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 18px;
}
.legale h2 {
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    margin: 30px 0 8px;
    padding-top: 2px;
}
.legale h3 { font-size: 0.98rem; margin: 18px 0 6px; }
.legale p, .legale li { font-size: 0.93rem; line-height: 1.62; }
.legale p { margin: 10px 0; }
.legale li { margin: 5px 0; }
.legale strong { font-weight: 700; }
.legale ul, .legale ol { padding-left: 22px; margin: 10px 0; }
.legale table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.legale th, .legale td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--mood-border, #2A2A4A);
    font-size: 0.9rem;
    line-height: 1.5;
    vertical-align: top;
}
.legale th { color: var(--mood-text-muted, #8888AA); font-weight: 600; width: 42%; }
.legale .scatola {
    background: var(--mood-bg-card, #15152A);
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 14px;
    padding: 4px 14px 10px;
}
.legale .scatola table { margin: 6px 0; }
.legale .scatola tr:last-child th,
.legale .scatola tr:last-child td { border-bottom: 0; }
.legale a { color: var(--mood-primary-light, #A29BFE); }
.legale a:hover { text-decoration: underline; }
[data-theme="light"] .legale a { color: var(--mood-primary, #6C5CE7); }

/* L'indice: chiuso di suo, cosi' il testo lungo non raddoppia la pagina */
.legale-indice {
    margin: 16px 0 4px;
    padding: 10px 14px;
    background: var(--mood-bg-card, #15152A);
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 14px;
}
.legale-indice summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--mood-text, #F0F0FF);
}

/* --- 3. Il testo che arriva dal Markdown (`dev-md-*`) ------------------------------------ */
.dev-md-list li:nth-child(odd),
.dev-md-list li:nth-child(even),
.legale-indice li:nth-child(odd),
.legale-indice li:nth-child(even){
    background: transparent;
}
.legale-corpo .dev-md-h2,
.legale-corpo .dev-md-h3,
.legale-corpo .dev-md-h4 {
    letter-spacing: -0.01em;
    margin: 28px 0 8px;
}
.legale-corpo .dev-md-h2 { font-size: 1.1rem; }
.legale-corpo .dev-md-h3 { font-size: 0.98rem; }
.legale-corpo .dev-md-h4 { font-size: 0.93rem; color: var(--mood-text-muted, #8888AA); }
.legale-corpo .dev-md-h2:first-child,
.legale-corpo .dev-md-h3:first-child { margin-top: 8px; }
/* Il cancelletto che il renderizzatore appende a ogni titolo: nel diario di
   sviluppo serve, in una pagina legale no. */
.legale-corpo .dev-md-anchor { display: none; }
.legale-corpo .dev-md-p { margin: 10px 0; }
.legale-corpo .dev-md-list { padding-left: 22px; margin: 10px 0; }
.legale-corpo .dev-md-quote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 3px solid var(--mood-primary, #6C5CE7);
    background: var(--mood-bg-card, #15152A);
    border-radius: 0 12px 12px 0;
    color: var(--mood-text-muted, #8888AA);
}
.legale-corpo .dev-md-hr {
    border: 0;
    border-top: 1px solid var(--mood-border, #2A2A4A);
    margin: 26px 0;
}
.legale-corpo .dev-md-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 12px 0;
}
.legale-corpo .dev-md-table { margin: 0; min-width: 520px; }
.legale-corpo .dev-md-pre {
    overflow-x: auto;
    background: var(--mood-bg-card, #15152A);
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.82rem;
}
.legale-corpo .dev-md-code,
.legale-corpo .dev-md-inline {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86em;
}
.legale-corpo .dev-md-img { width: auto; max-width: 100%; height: auto; border-radius: 12px; }
.legale-corpo .dev-md-h2 a, .legale-corpo .dev-md-h3 a { text-decoration: none; }

/* --- 4. Telefono, e chi stampa ------------------------------------------------------------ */
@media (max-width: 720px) {
    .legale-barra { height: 50px; padding: 0 10px; gap: 8px; }
    .legale-barra__dove { display: none; }
    .legale { padding: 20px 14px 80px; }
    .legale h1 { font-size: 1.32rem; }
    .legale h2 { font-size: 1.04rem; }
    .legale p, .legale li { font-size: 0.92rem; }
    .legale th, .legale td { font-size: 0.86rem; padding: 8px; }
    .legale th { width: 38%; }
    .legale-corpo .dev-md-table { min-width: 440px; }
}

/* Chi stampa una pagina legale (un avvocato, un verificatore) non ha bisogno
   della barra ne' dei rimandi: il testo e basta. */
@media print {
    .legale-barra, .legale-indice, .legale-altrove { display: none; }
    .legale { max-width: none; padding: 0; }
}

.legale-indice ol { margin: 10px 0 2px; padding-left: 20px; }
.legale-indice li { font-size: 0.88rem; }
.legale-indice a { color: var(--mood-text, #F0F0FF); }
.legale-indice a:hover { color: var(--mood-primary-light, #A29BFE); }

.legale-aggiornato { margin-top: 34px; }
.legale-altrove { margin-top: 6px; font-size: 0.88rem; font-weight: 600; }

/* ==========================================================================
   GLI ALTRI DOCUMENTI (24/09/2026)
   --------------------------------------------------------------------------
   Da due pagine legali a cinque: in fondo a ogni documento si elencano gli altri quattro. Serve a chi
   legge (da «Termini» si arriva alle «Regole» senza tornare indietro) e serve ai verificatori degli
   store, che così vedono che tutti i documenti sono pubblici.
   ========================================================================== */
.legale-altrove:not(:empty) { display: block; }
.legale-altrove__dove {
    display: block;
    margin-bottom: 2px;
    font-weight: 500;
    color: var(--mood-text-muted, #8888AA);
}
.legale-altrove a { margin-right: 10px; white-space: nowrap; }
.legale-altrove a::after { content: ' ·'; color: var(--mood-text-muted, #8888AA); font-weight: 400; }
.legale-altrove a:last-child { margin-right: 0; }
.legale-altrove a:last-child::after { content: ''; }