/* Spinery — foglio di stile del sito pubblico (spinery.it).
   Specifica: 00-fondamenta-sito.md. È il foglio vero, non solo del mockup: i ritagli dell'app e le cornici
   del mockup stanno in mockup-sito.css. Token = quelli dell'app (../00-fondamenta.md §4.1).
   Nessuno script, nessuna risorsa di terzi: il carattere dei titoli è servito dal sito stesso. */

@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  /* nel mockup il file è quello già nel repository; sul sito sta in /fonts/ accanto al foglio */
  src: url("/fonts/archivo-narrow-700-latin.062eae97e7.woff2") format("woff2");
}

/* ---------- token: chiaro per primo, scuro dal sistema; nel mockup le classi tema-* li impongono ---------- */
/* W-11 (la pagina del disco condiviso, D-14) parte scura e passa alla chiara con la casella del tema, senza script: .condiviso porta
   i token scuri, .condiviso con la casella spuntata i chiari; nel mockup la cornice chiara mostra la pagina dopo il cambio */
:root, .tema-chiaro, .condiviso:has(.tema-casella:checked), .tema-chiaro .condiviso {
  --fondo: #f7f6f3; --superficie-2: #efece6; --testo: #1c1b19; --testo-2: #5f5b54; --testo-3: #6f6b63;
  --filetto: #e3e0d9; --accento: #ae7f1a; --accento-testo: #8a6414; --su-accento: #1c1b19;
  --allarme: #c4472f; --allarme-testo: #a3341f; --ok-testo: #2f6f4f;
  --targhetta: #f2e8d5; --targhetta-testo: #1c1b19; --targhetta-testo-2: #5f5b54;
  --fuoco: #1c1b19; --cornice-telefono: #1c1b19; --filo-telefono: #1c1b19;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0d1a24; --superficie-2: #16293a; --testo: #f2e8d5; --testo-2: #9db3bf; --testo-3: #9db3bf;
    --filetto: #223744; --accento: #e8b33c; --accento-testo: #e8b33c; --su-accento: #0d1a24;
    --allarme: #c4472f; --allarme-testo: #e8705a; --ok-testo: #7fc79b;
    --targhetta: #f2e8d5; --targhetta-testo: #0d1a24; --targhetta-testo-2: #4d5860;
    --fuoco: #e8b33c; --cornice-telefono: #05090d; --filo-telefono: #3a5161;
    color-scheme: dark;
  }
}
.tema-scuro, .condiviso {
  --fondo: #0d1a24; --superficie-2: #16293a; --testo: #f2e8d5; --testo-2: #9db3bf; --testo-3: #9db3bf;
  --filetto: #223744; --accento: #e8b33c; --accento-testo: #e8b33c; --su-accento: #0d1a24;
  --allarme: #c4472f; --allarme-testo: #e8705a; --ok-testo: #7fc79b;
  --targhetta: #f2e8d5; --targhetta-testo: #0d1a24; --targhetta-testo-2: #4d5860;
  --fuoco: #e8b33c; --cornice-telefono: #05090d; --filo-telefono: #3a5161;
  color-scheme: dark;
}

:root {
  --font-titolo: "Archivo Narrow", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, system-ui, sans-serif;
  --font-testo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-dati: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --gutter: 48px;
}

/* ---------- ossatura ---------- */
.sito {
  container: sito / inline-size;
  background: var(--fondo); color: var(--testo);
  font-family: var(--font-testo); font-size: 18px; line-height: 28px;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.sito *, .sito *::before, .sito *::after { box-sizing: border-box; }
/* il ripristino pesa zero (:where), così ogni componente a una classe vince senza prefissi */
:where(.sito) a { color: inherit; }
:where(.sito) :is(p, h1, h2, h3, ul, ol, figure, dl, dd) { margin: 0; }
:where(.sito) :is(ul, ol) { padding: 0; list-style: none; }
.sito h1, .sito h2, .sito h3 { text-wrap: balance; }
.sito :focus-visible { outline: 2px solid var(--fuoco); outline-offset: 3px; border-radius: 4px; }
.contenuto { max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.salta { position: absolute; left: 16px; top: -64px; z-index: 2; padding: 10px 16px; background: var(--fondo); color: var(--testo);
         font-weight: 600; font-size: 16px; line-height: 24px; text-decoration: none; border-radius: 8px; }
.salta:focus { top: 12px; }

/* il sito vero (src/Spinery.Site): la pagina stessa è il contenitore .sito; nel mockup lo è la cornice */
html:has(> body.sito) { background: var(--fondo); }
body.sito { margin: 0; }

/* ---------- testata ---------- */
.testata { position: relative; }
.testata .contenuto { display: flex; align-items: center; gap: 32px; min-height: 80px; }
.marchio { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none;
           font-family: var(--font-titolo); font-weight: 700; font-size: 26px; line-height: 1; }
.marchio svg { width: 34px; height: 34px; flex: none; }
.voci { display: flex; gap: 4px; margin-left: auto; }
.voci a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 16px; line-height: 24px;
          font-weight: 500; text-decoration: none; color: var(--testo); border-radius: 8px; }
.voci a:hover { text-decoration: underline; text-underline-offset: 4px; }
.voci a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accento); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.lingua { font-size: 15px; line-height: 22px; color: var(--testo-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.lingua:hover { color: var(--testo); text-decoration: underline; }
.menu-telefono { display: none; }

/* ---------- pulsanti ---------- */
.pulsante { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
            border-radius: 8px; font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pulsante.secondario { border: 1.5px solid var(--accento-testo); color: var(--testo); }
.pulsante.secondario:hover { background: var(--superficie-2); }
/* Il badge di Google Play: sul sito vero è l'immagine ufficiale (it/en) dalle linee guida di Google, alta 56;
   qui un segnaposto delle stesse misure. Nero in tutti e due i temi, come il badge ufficiale. */
.sito .play { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px 0 16px; border-radius: 8px;
        background: #000; color: #fff; text-decoration: none; border: 1px solid #a6a6a6; }
.play svg { width: 26px; height: 28px; flex: none; }
.play .righe { display: flex; flex-direction: column; line-height: 1.1; }
.play .su { font-size: 11px; letter-spacing: .02em; }
.play .negozio { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
/* sul sito vero il badge è un'immagine (it/en) alta 56: il collegamento non ridisegna nulla intorno */
.sito .play.immagine { height: auto; padding: 0; border: 0; background: none; }
.play.immagine img { display: block; width: auto; height: 56px; }

/* ---------- tipografia ---------- */
.display { font-family: var(--font-titolo); font-weight: 700; font-size: 68px; line-height: 70px; letter-spacing: -.01em; }
.titolo-2 { font-family: var(--font-titolo); font-weight: 700; font-size: 48px; line-height: 52px; letter-spacing: -.005em; }
.titolo-3 { font-size: 21px; line-height: 28px; font-weight: 600; }
.apertura { font-size: 21px; line-height: 32px; max-width: 34em; }
.secondario { color: var(--testo-2); }
.piccolo { font-size: 15px; line-height: 22px; }
.sito .collegamento { color: var(--accento-testo); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.sito .collegamento:hover { text-decoration-thickness: 2.5px; }
.sezione { padding: 128px 0 0; }
.sezione > .contenuto > .titolo-2 { max-width: 16em; }
.sezione .intro { margin-top: 16px; max-width: 36em; color: var(--testo-2); }

/* ---------- l'eroe: la sera e la notte, i due temi dell'app affiancati (00-fondamenta-sito §3) ----------
   Le due metà portano ciascuna il proprio tema (tema-chiaro / tema-scuro) e restano uguali qualunque sia il tema
   del sistema: sono il racconto, non l'aspetto della pagina. */
.giorno { display: grid; grid-template-columns: 1fr 1fr; }
/* altezza minima, non fissa: il testo ingrandito o più lungo (l'inglese) allunga la metà; si taglia solo il telefono, che
   sporge di 120 oltre il fondo della metà */
.giorno .meta { display: grid; grid-template-columns: minmax(0, 1fr) 236px; column-gap: 32px; min-height: 520px; overflow: hidden;
                padding: 56px var(--gutter) 0; background: var(--superficie-2); color: var(--testo); }
.giorno .sera { padding-left: max(var(--gutter), calc(50cqw - 600px)); }
.giorno .notte { padding-right: max(var(--gutter), calc(50cqw - 600px)); }
.giorno .display { font-size: 56px; line-height: 58px; color: var(--testo); }
.giorno .frase { margin-top: 20px; max-width: 16em; color: var(--testo-2); font-size: 19px; line-height: 29px; }
.giorno .telefono { width: 236px; align-self: start; margin-bottom: -120px; }
.solo-lettura { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dopo-giorno { padding: 48px 0 0; }
.dopo-giorno .contenuto { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.dopo-giorno .apertura { grid-column: 1 / 8; }
.dopo-giorno .azioni { grid-column: 8 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.dopo-giorno .nota-azione { max-width: 26em; }
.sito .in-prova { max-width: 30em; padding: 4px 0 4px 18px; border-left: 3px solid var(--accento); font-weight: 600; }

/* il menu del telefono: un details, senza script */
.menu-telefono .se-aperto, .menu-telefono[open] .se-chiuso { display: none; }
.menu-telefono[open] .se-aperto { display: inline; }
.tendina { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; background: var(--fondo); border-bottom: 1px solid var(--filetto);
           padding: 8px 16px 24px; display: flex; flex-direction: column; }
.tendina a:not(.play) { display: flex; align-items: center; min-height: 48px; border-top: 1px solid var(--filetto); font-size: 18px; font-weight: 500; text-decoration: none; }
.tendina .play { margin-top: 20px; align-self: flex-start; }

/* ---------- telefono: la cornice disegnata in CSS, dentro lo screenshot vero ---------- */
.telefono { position: relative; display: block; padding: 10px; border-radius: 44px; background: var(--cornice-telefono);
            outline: 1px solid var(--filo-telefono); outline-offset: -1px; }
.telefono .schermo { display: block; width: 100%; aspect-ratio: 1080 / 2400; border-radius: 34px; overflow: hidden; background: var(--superficie-2); }
.telefono img.schermo { height: auto; object-fit: cover; }
.telefono picture { display: block; }

/* ---------- stasera: dal disco in mano a quello da mettere su, tre passi in fila ---------- */
.passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 56px; }
.passi .telefono { width: 100%; max-width: 252px; }
.passi .titolo-3 { margin-top: 28px; }
.passi p { margin-top: 8px; font-size: 17px; line-height: 26px; color: var(--testo-2); max-width: 22em; }

/* ---------- il Curatore ---------- */
.curatore-sezione .contenuto { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.curatore-sezione .figura { grid-column: 2 / 5; grid-row: 1; }
.curatore-sezione .telefono { width: 100%; max-width: 280px; }
.curatore-sezione .testo { grid-column: 6 / 12; grid-row: 1; }
.curatore-sezione .testo p { margin-top: 20px; max-width: 32em; }
.curatore-sezione .testo .collegamento { margin-top: 20px; }
/* i collegamenti che stanno da soli, fuori da una frase: bersaglio da 44 */
.sito .collegamento.da-solo { display: inline-flex; align-items: center; min-height: 44px; }
.fornitori { margin-top: 20px; color: var(--testo-2); }

/* ---------- il prossimo: la banda della notte, sempre nel tema scuro come la metà destra dell'eroe ---------- */
.prossimo { margin-top: 128px; padding: 112px 0; background: var(--superficie-2); color: var(--testo); }
.prossimo .titolo-2 { max-width: 14em; }
.prossimo .intro { margin-top: 16px; max-width: 36em; color: var(--testo-2); }
.prossimo .coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px; }
.prossimo .coppia > div { display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 32px; align-items: start; }
.prossimo .telefono { width: 232px; }
.prossimo .coppia p { margin-top: 8px; font-size: 17px; line-height: 26px; color: var(--testo-2); max-width: 22em; }

/* ---------- anche: il resto, in tre colonne di testo (non tessere) ---------- */
.anche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; margin-top: 48px; }
.anche .titolo-3 { font-size: 18px; line-height: 26px; }
.anche p { margin-top: 6px; font-size: 17px; line-height: 26px; color: var(--testo-2); max-width: 24em; }

/* ---------- la promessa: banda a tutta larghezza ---------- */
.promessa { margin-top: 128px; background: var(--superficie-2); padding: 96px 0; }
.promessa .contenuto { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.promessa .titolo-2 { grid-column: 1 / 7; font-size: 60px; line-height: 62px; }
.promessa .corpo { grid-column: 8 / 13; }
.promessa .corpo p + p { margin-top: 16px; }
.promessa .collegamenti { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 0 28px; }

/* ---------- cosa arriva, in breve ---------- */
.arriva .contenuto { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.arriva .testa-arriva { grid-column: 1 / 5; }
.arriva .elenco { grid-column: 6 / 13; }
.arriva .elenco li { padding: 20px 0; border-top: 1px solid var(--filetto); }
.arriva .elenco li:last-child { border-bottom: 1px solid var(--filetto); }
.arriva .quando-arriva { display: block; font-size: 15px; line-height: 22px; color: var(--testo-2); }
.arriva .elenco strong { font-weight: 600; }
.arriva .collegamento { margin-top: 16px; }

/* ---------- chiusura e piede ---------- */
.chiusura { padding: 160px 0 128px; text-align: left; }
.chiusura .titolo-2 { font-size: 60px; line-height: 62px; max-width: 12em; }
.chiusura .titolo-2 + p { margin-top: 20px; }
.chiusura .azioni { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.piede { border-top: 1px solid var(--filetto); padding: 48px 0 56px; font-size: 16px; line-height: 24px; }
.piede .colonne { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.piede h2 { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--testo-2); }
.piede ul { margin-top: 8px; }
.piede li a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.piede li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sito .piede .claim { margin-top: 8px; }
.piede .firma { margin-top: 48px; color: var(--testo-2); font-size: 15px; line-height: 22px; }

/* ================= fra 760 e 1180: ogni metà dell'eroe va su una colonna, il telefono sotto il testo ================= */
@container sito (max-width: 1180px) {
  .giorno .meta { grid-template-columns: minmax(0, 1fr); }
  .giorno .display { font-size: 48px; line-height: 50px; }
  .giorno .telefono { width: 200px; margin: 32px 0 -150px; }
}

/* ================= sotto i 1000 la testata passa al menu (le voci non stanno più su una riga) ================= */
@container sito (max-width: 1000px) {
  .voci, .testata .lingua, .testata .pulsante { display: none; }
  .menu-telefono { display: block; margin-left: auto; }
  .menu-telefono summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
                           border: 1.5px solid var(--testo-2); border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; }
  .menu-telefono summary::-webkit-details-marker { display: none; }
}

/* ================= telefono: sotto i 760 di larghezza il sito diventa una colonna ================= */
@container sito (max-width: 760px) {
  .sito { font-size: 17px; line-height: 26px; }
  :is(.contenuto) { padding: 0 16px; }
  .testata .contenuto { min-height: 64px; gap: 8px; }
  .marchio { font-size: 23px; } .marchio svg { width: 30px; height: 30px; }

  .display { font-size: 46px; line-height: 48px; }
  .titolo-2 { font-size: 34px; line-height: 38px; }
  .titolo-3 { font-size: 19px; line-height: 26px; }
  .apertura { font-size: 18px; line-height: 28px; }
  .sezione { padding-top: 88px; }

  .giorno { grid-template-columns: 1fr; }
  .giorno .meta { display: block; min-height: 0; padding: 28px 16px 32px; }
  .giorno .sera, .giorno .notte { padding-left: 16px; padding-right: 16px; }
  .giorno .display { font-size: 44px; line-height: 46px; }
  .giorno .frase { margin-top: 12px; font-size: 17px; line-height: 26px; }
  .giorno .telefono { display: none; }
  .dopo-giorno { padding-top: 28px; }
  .dopo-giorno .contenuto { display: block; }
  .dopo-giorno .azioni { margin-top: 24px; }

  .prossimo { margin-top: 88px; padding: 64px 0; }
  .prossimo .coppia { grid-template-columns: 1fr; margin-top: 36px; }
  .prossimo .coppia > div { display: block; }
  .prossimo .telefono { width: 220px; }
  .prossimo .titolo-3 { margin-top: 20px; }

  .passi { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 36px -16px 0; padding: 0 16px 12px;
           scroll-padding-inline: 16px; }
  .passi li { flex: 0 0 76%; scroll-snap-align: start; }
  .passi .telefono { max-width: 220px; }
  .passi .titolo-3 { margin-top: 20px; }

  .curatore-sezione .contenuto { display: flex; flex-direction: column-reverse; gap: 36px; }
  .curatore-sezione .telefono { max-width: 236px; }

  .anche { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }

  .promessa { margin-top: 88px; padding: 56px 0; }
  .promessa .contenuto { display: block; }
  .promessa .titolo-2 { font-size: 38px; line-height: 42px; }
  .promessa .corpo { margin-top: 24px; }

  .arriva .contenuto { display: block; }
  .arriva .elenco { margin-top: 24px; }

  .chiusura { padding: 104px 0 88px; }
  .chiusura .titolo-2 { font-size: 38px; line-height: 42px; }
  .piede .colonne { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .piede .colonne > :first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) { .sito * { scroll-behavior: auto !important; transition: none !important; } }

/* ========== W-02, il Curatore e l'AI: componenti propri della pagina (ciascun agente scrive solo qui) ========== */
/* inizio W-02 */
/* Pagina di testo con l'indice in testa (00-fondamenta-sito §4): una colonna di 36 em dalla colonna 1, titoli di sezione in
   sistema 600 da 21; due ritagli dell'app accanto a «Cos'è». Tutto sotto .curatore-pagina finché le fondamenta (§8) non
   adottano l'indice, l'elenco a righe e i blocchi dei fornitori come componenti comuni. */
.curatore-pagina .testa-pagina { padding: 72px 0 0; }
.curatore-pagina .testa-pagina .contenuto { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.curatore-pagina .intro-pagina { grid-column: 1 / 8; }
.curatore-pagina .intro-pagina .apertura { margin-top: 28px; }
/* l'azione della pagina (dal 17/10, ADR-V2-013): il badge, come in Home, con la nota accanto; non più la console di un fornitore */
.curatore-pagina .azioni-pagina { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.sito .curatore-pagina .azioni-pagina .nota-azione { max-width: 20em; }
/* l'indice: le ancore della pagina, righe da 48 fra filetti, come il piè (testo pieno, sottolineato al passaggio) */
.curatore-pagina .indice { grid-column: 9 / 13; padding-top: 18px; }
.curatore-pagina .indice h2 { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--testo-2); }
.curatore-pagina .indice ul { margin-top: 8px; border-top: 1px solid var(--filetto); }
.curatore-pagina .indice li { border-bottom: 1px solid var(--filetto); }
.curatore-pagina .indice a { display: flex; align-items: center; min-height: 48px; font-size: 17px; line-height: 24px; font-weight: 500; text-decoration: none; }
.curatore-pagina .indice a:hover { text-decoration: underline; text-underline-offset: 4px; }

.curatore-pagina .parte { padding-top: 112px; scroll-margin-top: 24px; }
.curatore-pagina .parte h2 { font-size: 21px; line-height: 28px; font-weight: 600; }
.curatore-pagina .parte h3 { font-size: 18px; line-height: 26px; font-weight: 600; }
.curatore-pagina .colonna { max-width: 36em; }
.sito .curatore-pagina .parte h2 + p { margin-top: 16px; }
.sito .curatore-pagina .parte p + p, .sito .curatore-pagina .parte .righe-testo + p { margin-top: 16px; }
.sito .curatore-pagina .parte h3 + p { margin-top: 6px; }

/* l'elenco a righe: esempi, promesse, passi; filetti fra le righe, il verbo o la frase in 600 in testa, nessuna cifra */
.curatore-pagina .righe-testo { margin-top: 16px; border-top: 1px solid var(--filetto); }
.curatore-pagina .righe-testo li { padding: 12px 0; border-bottom: 1px solid var(--filetto); }
.curatore-pagina .righe-testo strong { font-weight: 600; }

/* le quote incluse (ADR-V2-013 §2): una riga per funzione fra filetti, il limite a margine in Archivo Narrow come il numero di
   una versione (W-05), il nome e cosa fa nella colonna di testo; nessun riquadro, nessuna icona, nessuna cifra isolata.
   Proposta per le fondamenta §8, «Quote incluse». Nel DOM il nome viene prima del limite, la griglia mette il limite a sinistra */
.curatore-pagina .quote { max-width: 880px; margin-top: 32px; border-top: 1px solid var(--filetto); }
.curatore-pagina .quote li { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-areas: "limite nome" "limite cosa";
                             column-gap: 32px; padding: 20px 0 22px; border-bottom: 1px solid var(--filetto); }
.curatore-pagina .quote h3 { grid-area: nome; font-size: 19px; line-height: 26px; font-weight: 600; }
.sito .curatore-pagina .quote .cosa { grid-area: cosa; margin-top: 4px; max-width: 34em; color: var(--testo-2); font-size: 17px; line-height: 26px; }
.sito .curatore-pagina .quote .limite { grid-area: limite; align-self: start; font-family: var(--font-titolo); font-weight: 700; font-size: 23px; line-height: 28px; }
/* le schede non hanno un limite: la riga lo dice in testo-2, senza il peso delle cifre */
.sito .curatore-pagina .quote .limite.fuori { color: var(--testo-2); }
.sito .curatore-pagina .quote + .colonna p { margin-top: 24px; }
/* un titolo di blocco dentro una sezione lunga («Come si mette una chiave») */
.sito .curatore-pagina .sotto-parte { margin-top: 40px; }
.sito .curatore-pagina .sotto-parte + .righe-testo { margin-top: 12px; }

/* la frase dell'informativa (F-1), riportata parola per parola: un filo a sinistra la separa dal nostro commento */
.sito .curatore-pagina .frase-informativa { margin-top: 20px; padding-left: 20px; border-left: 2px solid var(--testo-3); }
.sito .curatore-pagina .frase-informativa + p { margin-top: 20px; }

/* «Cos'è»: il testo a sinistra, i due telefoni affiancati a destra; sul telefono ciascuno sotto il suo testo */
.curatore-pagina .cos-e .contenuto { display: grid; grid-template-columns: minmax(0, 1fr) 264px 264px; column-gap: 32px; align-items: start; }
.curatore-pagina .cos-e .testo-a { grid-column: 1; grid-row: 1; max-width: 34em; }
.curatore-pagina .cos-e .testo-b { grid-column: 1; grid-row: 2; max-width: 34em; margin-top: 40px; }
.curatore-pagina .cos-e .chat-fig { grid-column: 2; grid-row: 1 / span 2; }
.curatore-pagina .cos-e .proposta-fig { grid-column: 3; grid-row: 1 / span 2; }
.curatore-pagina .figura-app .telefono { width: 100%; }
.curatore-pagina .figura-app figcaption { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--testo-2); }

/* i tre fornitori, dal 17/10 secondari (servono solo oltre i limiti): tre colonne di testo senza riquadro, nome in 600 da 17,
   il resto da 15–16; subgrid: le quattro righe di ogni blocco si allineano fra i tre, così i collegamenti stanno alla stessa altezza */
.curatore-pagina .fornitori-chiave { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; max-width: 1000px; margin-top: 40px; }
.curatore-pagina .fornitori-chiave > div { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-items: start;
                                           padding-top: 16px; border-top: 1px solid var(--filetto); }
.curatore-pagina .fornitori-chiave h4 { font-size: 17px; line-height: 24px; font-weight: 600; margin: 0; }
.sito .curatore-pagina .fornitori-chiave .nell-app { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--testo-2); }
.sito .curatore-pagina .fornitori-chiave .collegamento.da-solo { margin-top: 6px; justify-self: start; font-size: 16px; }
.sito .curatore-pagina .fornitori-chiave .indirizzo { margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--testo-2); overflow-wrap: anywhere; }
.curatore-pagina .altri { margin-top: 32px; }
.sito .curatore-pagina .altri p { font-size: 16px; line-height: 25px; color: var(--testo-2); }

.curatore-pagina .domanda + .domanda { margin-top: 32px; }
.curatore-pagina .domanda:first-of-type { margin-top: 24px; }
.sito .curatore-pagina .ancora-domande { margin-top: 56px; padding-bottom: 128px; }

/* la voce della pagina in cui si è, anche nella tendina del telefono (proposta per le fondamenta §4) */
.tendina a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accento); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* fra 760 e 1100 i due telefoni non stanno accanto al testo: vanno sotto, affiancati */
@container sito (max-width: 1100px) {
  .curatore-pagina .cos-e .contenuto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .curatore-pagina .cos-e .testo-a { grid-column: 1 / -1; }
  .curatore-pagina .cos-e .testo-b { grid-column: 1 / -1; grid-row: 2; }
  .curatore-pagina .cos-e .chat-fig { grid-column: 1; grid-row: 3; margin-top: 40px; max-width: 264px; }
  .curatore-pagina .cos-e .proposta-fig { grid-column: 2; grid-row: 3; margin-top: 40px; max-width: 264px; }
}

@container sito (max-width: 760px) {
  .curatore-pagina .testa-pagina { padding-top: 36px; }
  .curatore-pagina .testa-pagina .contenuto { display: block; }
  .curatore-pagina .intro-pagina .apertura { margin-top: 16px; }
  .curatore-pagina .indice { margin-top: 32px; padding-top: 0; }
  .curatore-pagina .parte { padding-top: 72px; }
  /* il titolo di sezione resta a 21 (non 19 come titolo-3): accanto alle domande da 17 deve restare un gradino sopra */
  .curatore-pagina .parte h3 { font-size: 17px; line-height: 26px; }
  .curatore-pagina .cos-e .contenuto { display: block; }
  .curatore-pagina .cos-e .testo-b { margin-top: 0; }
  .curatore-pagina .figura-app, .curatore-pagina .cos-e .chat-fig, .curatore-pagina .cos-e .proposta-fig { margin: 32px 0 36px; max-width: 236px; }
  .curatore-pagina .azioni-pagina { margin-top: 24px; }
  .curatore-pagina .quote { margin-top: 24px; }
  .curatore-pagina .quote li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nome" "limite" "cosa"; padding: 16px 0 18px; }
  .curatore-pagina .quote h3 { font-size: 17px; line-height: 24px; }
  .sito .curatore-pagina .quote .limite { margin-top: 2px; font-size: 19px; line-height: 24px; }
  .sito .curatore-pagina .quote .cosa { margin-top: 4px; }
  .curatore-pagina .fornitori-chiave { display: block; margin-top: 32px; }
  .curatore-pagina .fornitori-chiave > div { display: flex; flex-direction: column; align-items: flex-start; }
  .curatore-pagina .fornitori-chiave > div + div { margin-top: 24px; }
  .curatore-pagina .altri { margin-top: 28px; }
  .sito .curatore-pagina .ancora-domande { margin-top: 44px; padding-bottom: 88px; }
}
/* fine W-02 */


/* ========== W-03, la Guida: componenti propri della pagina (ciascun agente scrive solo qui) ========== */
/* inizio W-03 */
/* La guida: una pagina lunga con l'indice in testa e i compiti in due gruppi, «Il primo giorno» (una sequenza vera:
   elenco ordinato, senza cifre visibili) e «Poi, quando vuoi» (elenco semplice). Ogni compito: titolo con il verbo,
   due paragrafi, la strada nell'app (.percorso), al più uno screenshot a destra. */
.guida-testa { padding: 72px 0 0; }
.guida-testa .apertura { margin-top: 24px; }
.indice-guida { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: 56px; }
.indice-guida > div:first-child { grid-column: 1 / 6; }
.indice-guida > div:last-child { grid-column: 7 / 13; }
.indice-gruppo { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--testo-2); margin-bottom: 8px; }
.sito .indice-guida li a { display: flex; align-items: center; min-height: 48px; padding: 8px 0; border-top: 1px solid var(--filetto);
                     font-size: 18px; line-height: 26px; font-weight: 500; color: var(--testo); text-decoration: none; }
.indice-guida li:last-child a { border-bottom: 1px solid var(--filetto); }
.sito .indice-guida li a:hover { text-decoration: underline; text-underline-offset: 4px; }

.gruppo { padding: 128px 0 0; }
.gruppo .intro { margin-top: 12px; max-width: 36em; color: var(--testo-2); }
.compiti { margin-top: 40px; }
.compito { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start;
           grid-template-rows: auto 1fr; padding: 56px 0; border-top: 1px solid var(--filetto); scroll-margin-top: 24px; }
.compito .testo { grid-column: 1 / 8; grid-row: 1; }
.compito .dopo { grid-column: 1 / 8; grid-row: 2; justify-self: start; margin-top: 16px; }
.compito .figura { grid-column: 9 / 13; grid-row: 1 / span 2; }
.compito .telefono { width: 100%; max-width: 252px; }
.titolo-compito { font-family: var(--font-titolo); font-weight: 700; font-size: 32px; line-height: 36px; letter-spacing: -.005em; }
.sito .compito .testo p { margin-top: 12px; max-width: 36em; }
.sito .compito .testo .titolo-compito + p { margin-top: 16px; }
.compito .testo > .collegamento { margin-top: 12px; }
/* un compito con due strade (il Curatore: l'uso e, oltre i limiti, la chiave): il paragrafo dopo una banda prende aria */
.sito .compito .testo .percorso + p { margin-top: 20px; }
/* la strada nell'app, scritta come la si vede: una banda (angolo 0), le parole dei pulsanti fra virgolette basse */
.sito .compito .percorso { max-width: 40.5em; margin-top: 24px; padding: 14px 18px; background: var(--superficie-2); font-size: 16px; line-height: 24px; }
.percorso .nell-app { display: block; font-size: 15px; line-height: 22px; color: var(--testo-2); }
.percorso .strada { font-weight: 600; }
.percorso .freccia { font-weight: 400; color: var(--testo-2); }
/* arrivati da una voce dell'indice: il filo senape segna il compito, nel margine (lo stato del mockup, .mirato, sta in mockup-sito.css) */
.compito:target::before { content: ""; position: absolute; left: -24px; top: 56px; bottom: 56px; width: 3px; background: var(--accento); }

.guida-fine { padding: 128px 0; }
.guida-fine .apertura { margin-top: 20px; }
.guida-fine .collegamento.da-solo { margin-top: 12px; }

@container sito (max-width: 760px) {
  .guida-testa { padding-top: 40px; }
  .guida-testa .apertura { margin-top: 16px; }
  .indice-guida { display: block; margin-top: 36px; }
  .indice-guida > div + div { margin-top: 28px; }
  .sito .indice-guida li a { font-size: 17px; }
  .gruppo { padding-top: 88px; }
  .compiti { margin-top: 28px; }
  .compito { display: block; padding: 40px 0; }
  .titolo-compito { font-size: 27px; line-height: 31px; }
  .compito .figura { margin-top: 28px; }
  .compito .telefono { max-width: 220px; }
  .compito .dopo { margin-top: 16px; }
  .sito .compito .percorso { padding: 12px 14px; }
  .compito:target::before { left: -12px; top: 40px; bottom: 40px; }
  .guida-fine { padding: 88px 0; }
}
/* fine W-03 */


/* ========== W-04/W-05, Cosa arriva e Novità: componenti propri della pagina (ciascun agente scrive solo qui) ========== */
/* inizio W-04/W-05 */
/* Il percorso (.pagina-tempo): le due pagine sul tempo di Spinery, Cosa arriva (W-04) e Novità (W-05), che si richiamano.
   Pagine di testo (00-fondamenta-sito §4): una colonna di 36 em dalla colonna 1, titoli di blocco in sistema 600 da 21
   (.titolo-3), nessuna seconda cosa audace. La testa della colonna è la stessa delle pagine di testo W-06…W-10: va unita
   a quella nelle fondamenta. */
.pagina-tempo { padding: 72px 0 128px; }
.pagina-tempo .colonna { max-width: 36em; }
.pagina-tempo .apertura { margin-top: 24px; }
.sito .pagina-tempo .nota-testa { margin-top: 16px; color: var(--testo-2); }
.pagina-tempo .blocco { margin-top: 72px; }
.sito .pagina-tempo .nota-blocco { margin-top: 16px; color: var(--testo-2); }
.sito .pagina-tempo .testo-blocco { margin-top: 12px; }
.sito .pagina-tempo .manca { margin-top: 72px; }
/* l'ultima riga di Cosa arriva, la promessa (Davide, 16/10: chiude la pagina): il condensato dei titoli, sotto un filetto */
.sito .pagina-tempo .chiude { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--filetto); text-wrap: balance;
                          font-family: var(--font-titolo); font-weight: 700; font-size: 48px; line-height: 52px; letter-spacing: -.005em; }

/* Cosa arriva: righe a filetti come l'elenco della Home (.arriva); la distanza sta nel titolo del blocco, non in ogni riga */
.righe-arriva { margin-top: 16px; }
.righe-arriva li { padding: 18px 0; border-top: 1px solid var(--filetto); }
.righe-arriva li:last-child { border-bottom: 1px solid var(--filetto); }
.righe-arriva .cosa { display: block; font-weight: 600; }
.righe-arriva .perche { display: block; margin-top: 2px; color: var(--testo-2); }

/* Novità: una voce per versione; il numero e la data a margine (sono dati: dicono quale e quando), il titolo e le righe
   nella colonna di testo. Il numero è nel condensato dei titoli perché fa parte del titolo della voce. */
/* l'indice di pagina (fondamenta §4) ridotto ai numeri: la voce più recente resta in cima, le altre a un tocco */
.indice-versioni { display: flex; flex-wrap: wrap; gap: 0; margin: 20px 0 0 -12px; }
.sito .indice-versioni a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px;
                           color: var(--accento-testo); font-weight: 600; font-size: 16px; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.versione { scroll-margin-top: 16px; }
.versioni { margin-top: 48px; max-width: calc(152px + 36em); }
.versione { display: grid; grid-template-columns: 120px minmax(0, 36em); column-gap: 32px; padding: 36px 0 40px;
            border-top: 1px solid var(--filetto); }
.versione:last-child { border-bottom: 1px solid var(--filetto); }
.sito .versione .quando { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 4px; }
.versione .numero { font-family: var(--font-titolo); font-weight: 700; font-size: 34px; line-height: 36px; }
.versione time { font-size: 15px; line-height: 22px; color: var(--testo-2); }
.versione .titolo-3 { grid-column: 2; padding-top: 4px; }
.sito .versione .cambi { grid-column: 2; margin-top: 12px; padding-left: 1.2em; list-style: disc; }
.cambi li + li { margin-top: 8px; }
.cambi li::marker { color: var(--testo-3); }

/* il menu del telefono: la voce della pagina in cui si è, come nella testata del computer (componente della testata:
   va nelle fondamenta §8 insieme a .voci a[aria-current]) */
.tendina a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accento); text-decoration-thickness: 2px;
                                  text-underline-offset: 6px; font-weight: 600; }

@container sito (max-width: 760px) {
  .pagina-tempo { padding: 40px 0 88px; }
  .pagina-tempo .blocco { margin-top: 56px; }
  .sito .pagina-tempo .manca { margin-top: 56px; }
  .sito .pagina-tempo .chiude { margin-top: 48px; padding-top: 32px; font-size: 34px; line-height: 38px; }
  .versioni { margin-top: 48px; }
  .versione { display: block; padding: 28px 0 32px; }
  .sito .versione .quando { flex-direction: row; align-items: baseline; gap: 12px; margin-bottom: 4px; }
  .versione .numero { font-size: 28px; line-height: 32px; }
  .versione .titolo-3 { padding-top: 0; }
}

/* fine W-04/W-05 */


/* ========== W-06…W-10, le pagine di testo: componenti propri della pagina (ciascun agente scrive solo qui) ========== */
/* inizio W-06…W-10 */
/* Le pagine da leggere (Supporto, Privacy, Termini, Elimina l'account, 404): una colonna di 36 em dalla colonna 1,
   titolo d'apertura, nessuna immagine (00-fondamenta-sito §4). Tutto sta sotto .pagina-testo, così i nomi non
   toccano quelli delle altre pagine. */
.pagina-testo { padding: 96px 0 128px; }
.pagina-testo .testa-pagina { max-width: 40em; }
.pagina-testo .testa-pagina .apertura { margin-top: 24px; }
.sito .pagina-testo .data-pagina { margin-top: 24px; max-width: 40em; font-size: 15px; line-height: 22px; color: var(--testo-2); }

/* Supporto: l'apertura a sinistra e l'indirizzo a destra, come l'apertura e il badge della Home (.dopo-giorno) */
.pagina-testo .supporto-testa { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.pagina-testo .supporto-testa .testa-pagina { grid-column: 1 / 8; }
.pagina-testo .supporto-testa .scrivici { grid-column: 8 / 13; }
/* l'azione principale di Supporto: l'indirizzo stesso, grande, nel colore dei collegamenti */
.sito .pagina-testo .indirizzo-supporto { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-titolo);
  font-weight: 700; font-size: 40px; line-height: 44px; color: var(--accento-testo); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 7px; overflow-wrap: anywhere; }
.sito .pagina-testo .indirizzo-supporto:hover { text-decoration-thickness: 3px; }
.sito .pagina-testo .scrivici .piccolo { margin-top: 12px; max-width: 24em; color: var(--testo-2); }

/* le domande: righe separate da filetti, la domanda in 600, la risposta nel testo corrente */
.pagina-testo .sezione-testo { padding-top: 112px; }
.pagina-testo .domande { margin-top: 36px; max-width: 36em; }
.pagina-testo .domande li { padding: 28px 0; border-top: 1px solid var(--filetto); }
.pagina-testo .domande li:last-child { border-bottom: 1px solid var(--filetto); }
.pagina-testo .domande h3 { font-size: 21px; line-height: 28px; font-weight: 600; }
.sito .pagina-testo .domande p { margin-top: 8px; }
.sito .pagina-testo .chiusa { margin-top: 40px; max-width: 36em; }
.sito .pagina-testo .chiusa + .chiusa { margin-top: 12px; }

/* l'indice delle pagine lunghe: ancore sotto il titolo, due colonne sul computer, una sul telefono */
.pagina-testo .indice-pagina { margin-top: 40px; max-width: 36em; padding: 20px 0 12px; border-top: 1px solid var(--filetto); border-bottom: 1px solid var(--filetto); }
.pagina-testo .indice-pagina h2 { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--testo-2); }
.pagina-testo .indice-pagina ol { margin-top: 4px; columns: 2; column-gap: 32px; }
.pagina-testo .indice-pagina li { break-inside: avoid; }
.sito .pagina-testo .indice-pagina a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; line-height: 24px; font-weight: 500;
  color: var(--testo); text-decoration: underline; text-decoration-color: var(--accento); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.sito .pagina-testo .indice-pagina a:hover { text-decoration-thickness: 2.5px; }

/* il testo legale: il testo di oggi, impaginato; i titoli numerati sono quelli del testo */
.pagina-testo .legale { max-width: 36em; }
.pagina-testo .legale section { padding-top: 56px; }
.pagina-testo .legale h2 { font-size: 21px; line-height: 28px; font-weight: 600; }
.sito .pagina-testo .legale p { margin-top: 12px; }
.sito .pagina-testo .preambolo p { margin-top: 24px; }
.pagina-testo .legale ul { margin-top: 12px; padding-left: 1.25em; list-style: disc; }
.pagina-testo .legale li + li { margin-top: 12px; }
.pagina-testo .legale li::marker { color: var(--testo-2); }
.pagina-testo .legale strong { font-weight: 600; }
.sito .pagina-testo .legale a, .sito .pagina-testo .data-pagina a { color: var(--accento-testo); font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* Elimina l'account: le conseguenze prima del modulo, poi il modulo, l'unico del sito */
.pagina-testo .conseguenze { margin-top: 24px; max-width: 36em; padding-left: 1.25em; list-style: disc; }
.pagina-testo .conseguenze li + li { margin-top: 8px; }
.pagina-testo .conseguenze li::marker { color: var(--testo-2); }
.pagina-testo .modulo-sito { margin-top: 40px; max-width: 26em; }
.pagina-testo .modulo-sito label { display: block; font-size: 17px; line-height: 24px; font-weight: 600; }
.pagina-testo .modulo-sito input { display: block; width: 100%; height: 52px; margin-top: 8px; padding: 0 14px; font: inherit; font-size: 18px;
  color: var(--testo); background: var(--fondo); border: 1.5px solid var(--testo-2); border-radius: 8px; }
.pagina-testo .modulo-sito input[aria-invalid="true"] { border: 2px solid var(--allarme); padding: 0 13.5px; }
.sito .pagina-testo .modulo-sito .aiuto-campo { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--testo-2); }
.sito .pagina-testo .errore-campo { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 16px; line-height: 24px;
  font-weight: 600; color: var(--allarme-testo); }
.pagina-testo .errore-campo svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke: var(--allarme); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
/* il pulsante principale pieno: l'unico del sito (00-fondamenta-sito §8, «Modulo») */
.sito .pulsante.principale { margin-top: 24px; min-height: 52px; padding: 0 24px; border: 0; font-family: inherit; font-size: 17px;
  background: var(--accento); color: var(--su-accento); cursor: pointer; }
.sito .pulsante.principale:hover { text-decoration: underline; text-underline-offset: 4px; }
.sito .pagina-testo .dall-app { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--filetto); max-width: 36em; color: var(--testo-2); }
.sito .pagina-testo .dall-app p + p { margin-top: 12px; }

/* nel piè la voce della pagina in cui si è: la sottolineatura senape della testata */
.sito .piede a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accento); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* la pagina che non c'è */
.pagina-testo.non-trovata { padding: 160px 0 200px; }
.pagina-testo .rimandi { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 0 32px; font-size: 21px; line-height: 32px; }

@container sito (max-width: 760px) {
  .pagina-testo { padding: 40px 0 88px; }
  .pagina-testo .supporto-testa { display: block; }
  .pagina-testo .supporto-testa .scrivici { margin-top: 28px; }
  .sito .pagina-testo .indirizzo-supporto { font-size: 32px; line-height: 38px; }
  .pagina-testo .sezione-testo { padding-top: 72px; }
  .pagina-testo .domande { margin-top: 24px; }
  .pagina-testo .domande li { padding: 22px 0; }
  .pagina-testo .domande h3 { font-size: 19px; line-height: 26px; }
  .pagina-testo .indice-pagina { margin-top: 32px; }
  .pagina-testo .indice-pagina ol { columns: 1; }
  .pagina-testo .legale section { padding-top: 44px; }
  .pagina-testo .legale h2 { font-size: 19px; line-height: 26px; }
  .pagina-testo .modulo-sito { max-width: none; margin-top: 24px; }
  .pagina-testo .conseguenze { margin-top: 20px; }
  .sito .pulsante.principale { width: 100%; }
  .pagina-testo.non-trovata { padding: 72px 0 120px; }
  .pagina-testo .rimandi { flex-direction: column; font-size: 18px; line-height: 28px; }
}

/* fine W-06…W-10 */


/* ========== W-11, il disco condiviso (spinery.it/s/{codice}, inoltrato dal sito al server dell'app; 30-condividi.md): la pagina del server con l'aspetto del sito ========== */
/* inizio W-11 */
/* La pagina porta i suoi token (scuri di partenza, chiari con la casella: in cima al foglio) e il suo fondo */
.condiviso { background: var(--fondo); color: var(--testo); }
html:has(> body.condiviso) { background: #0d1a24; }
html:has(> body.condiviso .tema-casella:checked) { background: #f7f6f3; }

/* La testata breve: il marchio (porta alla Home), il tema e «Cos'è Spinery»; nessun menu, nessuna lingua (la sceglie il browser) */
.testata.breve .contenuto { gap: 16px; }
/* Il tema: una casella vera, nascosta alla vista ma non alla tastiera né al lettore di schermo, dentro la sua etichetta; l'interruttore
   disegnato dice lo stato con la posizione del pomello e il riempimento (non con il solo colore). Nessuno script, nessun cookie:
   il cambio vale finché la pagina resta aperta */
.testata.breve .tema { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; cursor: pointer;
  font-size: 16px; line-height: 24px; font-weight: 600; color: var(--testo-2); }
.sito .testata.breve .tema + .scopri { margin-left: 8px; }
.tema-casella { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.tema .sole { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.tema .pista { position: relative; width: 40px; height: 24px; flex: none; border-radius: 12px; border: 1.5px solid var(--testo-2); }
.tema .pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--testo-2); }
.tema-casella:checked + .pista, .tema-chiaro .tema .pista { background: var(--accento); border-color: var(--accento); }
.tema-casella:checked + .pista::after, .tema-chiaro .tema .pista::after { left: 19px; background: var(--su-accento); }
.tema:has(.tema-casella:focus-visible) .pista { outline: 2px solid var(--fuoco); outline-offset: 3px; }
.sito .testata.breve .scopri { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 16px;
  line-height: 24px; font-weight: 600; color: var(--accento-testo); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

/* Il disco: le immagini sono la cosa audace della pagina (come la copertina piena di S-22 nell'app), ferme a sinistra mentre si
   scorre (sticky, nessuno script); a destra chi lo condivide, il titolo e i blocchi delle fonti. Nel DOM la riga di chi condivide
   viene prima delle immagini: sul telefono la si legge per prima */
.disco { padding: 56px 0 0; }
.disco .contenuto { display: grid; grid-template-columns: 588px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 72px; align-items: start; }
.disco .immagini { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 32px; min-width: 0; }
.disco .testo-disco { grid-column: 2; grid-row: 2; min-width: 0; }
.sito .disco .chi { grid-column: 2; grid-row: 1; font-size: 19px; line-height: 28px; color: var(--testo-2); max-width: 26em; }
.sito .disco .chi strong { color: var(--testo); font-weight: 600; }
/* W-13: chi è della cerchia apre il disco nell'app quando il telefono non ha passato il link (a contorno: l'azione principale resta il badge). */
.sito .disco .chi .cerchia { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 17px; line-height: 26px; }
.sito .disco .chi .pulsante.secondario { color: var(--testo); text-decoration: none; }
.disco .display { margin-top: 20px; font-size: 76px; line-height: 76px; }
.sito .disco .chi-e { margin-top: 12px; font-size: 24px; line-height: 32px; font-weight: 600; }
.sito .disco .chi-e .anno { font-weight: 400; color: var(--testo-2); }

/* La galleria: la vista grande mostra la prima immagine (la copertina) o quella della miniatura toccata (:target, nessuno script);
   sul sito vero il server scrive anche le regole che segnano la miniatura scelta (.galleria:has(#img-N:target) a[href="#img-N"]) */
.galleria .vista { aspect-ratio: 1; background: var(--superficie-2); }
.galleria .vista > * { display: none; width: 100%; height: 100%; object-fit: cover; scroll-margin-top: 32px; }
.galleria .vista > :first-child { display: block; }
.galleria .vista:has(> :target:not(:first-child)) > :first-child { display: none; }   /* tornando alla copertina (#img-1) resta visibile */
.galleria .vista > :target { display: block; }
.galleria .vista.vuota { display: grid; place-items: center; color: var(--testo-3); }
.galleria .vista.vuota svg { display: block; width: 96px; height: 96px; }
.galleria .miniature { margin-top: 12px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.galleria .miniature a { display: block; aspect-ratio: 1; position: relative; }
/* la miniatura scelta: un filo sotto (una forma, non solo un colore) */
.galleria .miniature a[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 3px; background: var(--accento); }
/* sul sito vero: le immagini del server riempiono la vista e le miniature; la miniatura scelta segue :target (fino alle sei del catalogo) */
.galleria .miniature img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galleria:has(.vista > :target:not(:first-child)) .miniature a[aria-current="true"]::after { content: none; }
.galleria:has(#img-2:target) a[href="#img-2"]::after, .galleria:has(#img-3:target) a[href="#img-3"]::after, .galleria:has(#img-4:target) a[href="#img-4"]::after,
.galleria:has(#img-5:target) a[href="#img-5"]::after, .galleria:has(#img-6:target) a[href="#img-6"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 3px; background: var(--accento); }
/* l'attribuzione che Discogs chiede accanto ai suoi dati, con il collegamento alla pagina del disco su discogs.com (senza nofollow) */
.sito .attribuzione { margin-top: 20px; font-size: 15px; line-height: 22px; color: var(--testo-2); }
.sito .attribuzione a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accento-testo); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.sito .disco .attribuzione.ripetuta { display: none; }   /* sul telefono, in fondo ai dati: a 1440 basta quella sotto le immagini, sempre in vista */

/* I crediti: i primi dieci, poi «Vedi tutti» apre gli altri sotto di sé (details, nessuno script); aperto, la riga dice «Mostra meno» */
.disco .altri-crediti summary { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; cursor: pointer; list-style: none;
  color: var(--accento-testo); font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.disco .altri-crediti summary::-webkit-details-marker { display: none; }
.disco .altri-crediti .meno, .disco .altri-crediti[open] .piu { display: none; }
.disco .altri-crediti[open] .meno { display: inline; }
.disco .altri-crediti .crediti { margin-top: 0; border-top: 0; }

/* Crediti e dati tecnici piegati come nel dettaglio dell'app (S-22, Davide 20/10): la riga del titolo, col numero dei crediti e la
   freccia, apre il blocco; chiusi alla prima visita */
.disco .piegato summary { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; list-style: none; }
.disco .piegato summary::-webkit-details-marker { display: none; }
.disco .piegato .conta { min-width: 24px; padding: 1px 8px; border-radius: 12px; background: var(--superficie-2); color: var(--testo-2);
  font-size: 13px; line-height: 20px; font-weight: 700; text-align: center; }
.disco .piegato .freccia { width: 22px; height: 22px; margin-left: auto; fill: none; stroke: var(--testo-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.disco .piegato details[open] > summary .freccia { transform: rotate(180deg); }
.disco .piegato summary:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.disco .piegato details > summary { border-bottom: 1px solid var(--filetto); }
.disco .piegato details[open] > summary { border-bottom: 0; }
.disco .piegato + .piegato { margin-top: 8px; }   /* i due piegati di seguito fanno un elenco, come nell'app */

/* I blocchi delle fonti: un titolo di blocco in sistema 600 e i dati fra filetti */
.disco .blocco { margin-top: 48px; }
.disco .blocco h2 { font-size: 21px; line-height: 28px; font-weight: 600; }
.disco .blocco dt { font-size: 15px; line-height: 22px; color: var(--testo-2); }
.disco .blocco dd { margin: 2px 0 0; font-size: 18px; line-height: 26px; }
.disco .blocco .dati { font-family: var(--font-dati); font-size: 16px; }
/* l'edizione e i crediti: due colonne; i dati tecnici: il nome a sinistra e il valore a destra */
.disco :is(.edizione, .crediti) { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; border-top: 1px solid var(--filetto); }
.disco :is(.edizione, .crediti) > div { padding: 12px 0; border-bottom: 1px solid var(--filetto); }
.disco .tecnici { margin-top: 8px; border-top: 1px solid var(--filetto); }
.disco .tecnici > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--filetto); }
.disco .tecnici dd { margin: 0; }

/* La scaletta con le anteprime di iTunes. Il badge di Apple Music sta a destra del titolo della scaletta, vicino alle anteprime come
   chiedono i termini di Apple (Search API, «Legal»: badge accanto, attribuzione «provided courtesy of iTunes», solo streaming) */
.disco .capo-scaletta { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
/* il badge «Ascolta su Apple Music»: l'SVG ufficiale localizzato del kit di Apple (Apple Music Identity Guidelines; le regole in
   15-app-schermi.md §3e), mai ridisegnato: alto 40 (il minimo è 30), il bordo grigio fa parte del badge, uno spazio libero di 4
   tutto intorno (un decimo dell'altezza) che è anche il bersaglio da 48; collegato all'album su Apple Music */
.sito .apple { display: inline-block; padding: 4px; line-height: 0; text-decoration: none; border-radius: 8px; }
.sito .apple img { display: block; width: auto; height: 40px; }
.sito .disco .nota-anteprime { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--testo-2); max-width: 34em; }
.disco .scaletta h3 { margin-top: 20px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--testo-2); }
.disco .scaletta ol { margin-top: 4px; border-top: 1px solid var(--filetto); }
.disco .scaletta li { border-bottom: 1px solid var(--filetto); }
/* una traccia: la riga intera è il bersaglio (details/summary); aperta mostra il lettore del browser e lo avvia; il piccolo script
   della pagina ne tiene aperto uno solo */
.disco .scaletta :is(summary, li.senza) { display: grid; grid-template-columns: 44px 36px minmax(0, 1fr) auto; column-gap: 8px; align-items: center;
  min-height: 48px; font-size: 17px; line-height: 24px; }
.disco .scaletta summary { list-style: none; cursor: pointer; }
.disco .scaletta summary::-webkit-details-marker { display: none; }
.disco .scaletta .ascolta { width: 44px; height: 44px; display: grid; place-items: center; }
.disco .scaletta .tondo { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--accento-testo); color: var(--accento-testo); display: grid; place-items: center; }
.disco .scaletta .tondo svg { width: 14px; height: 14px; fill: currentColor; }
.disco .scaletta .tondo .chiudi { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; display: none; }
.disco .scaletta details[open] .tondo { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.disco .scaletta details[open] .tondo .apri { display: none; }
.disco .scaletta details[open] .tondo .chiudi { display: block; }
.disco .scaletta summary:hover .titolo { text-decoration: underline; text-underline-offset: 4px; }
.disco .scaletta .niente { width: 44px; text-align: center; color: var(--testo-3); font-size: 15px; }
.disco .scaletta .pos { font-family: var(--font-dati); font-size: 14px; color: var(--testo-2); }
.disco .scaletta .durata { font-size: 15px; color: var(--testo-2); font-variant-numeric: tabular-nums; }
/* nessuna anteprima per tutto il disco (iTunes non ha l'album): la colonna del ▶ sparisce */
.disco .scaletta.muta li.senza { grid-template-columns: 36px minmax(0, 1fr) auto; }
.disco .scaletta audio { display: block; width: calc(100% - 52px); height: 40px; margin: 2px 0 12px 52px; }

.sito .disco .nota-opera { margin-top: 28px; font-size: 17px; line-height: 26px; color: var(--testo-2); max-width: 30em; }
.sito .disco .in-fondo { margin-top: 28px; font-size: 15px; line-height: 22px; color: var(--testo-2); max-width: 30em; }
.sito .disco .in-fondo + .in-fondo { margin-top: 4px; }

/* La vetrina: la banda della promessa (superficie-2 a tutta larghezza), con il badge come azione principale della pagina */
.vetrina { margin-top: 112px; background: var(--superficie-2); padding: 88px 0 96px; }
.vetrina .contenuto { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.vetrina .titolo-2 { grid-column: 1 / 7; }
.vetrina .corpo { grid-column: 8 / 13; }
.sito .vetrina .corpo p + p { margin-top: 16px; }
.vetrina .azioni { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sito .vetrina .collegamento.da-solo { margin-top: 12px; }

/* Il piè breve: il marchio, tre collegamenti verso spinery.it, la firma della pagina e l'avviso sul marchio Discogs */
.piede.breve .riga-piede { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
.piede.breve .riga-piede nav { display: flex; flex-wrap: wrap; gap: 0 24px; margin-left: auto; }
.piede.breve .riga-piede nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.piede.breve .riga-piede nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.piede.breve .firma { margin-top: 24px; max-width: 46em; }
.piede.breve .firma.marchi { margin-top: 12px; }

/* Il link chiuso (scaduto, ritirato o inesistente): al posto della copertina la busta vuota, il segno del marchio in testo-3;
   nessun dato del disco, nessun nome */
.link-chiuso { padding: 56px 0 0; }
.link-chiuso .contenuto { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 56px; align-items: start; }
.link-chiuso .busta { width: 160px; margin-top: 8px; aspect-ratio: 1; background: var(--superficie-2); display: grid; place-items: center; color: var(--testo-3); }
.link-chiuso .busta svg { width: 56px; height: 56px; }
/* qui il disco non c'è: il badge subito sotto il testo, sopra la piega; la vetrina sotto racconta, senza un secondo badge */
.link-chiuso .azioni { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.vetrina.chiusa { margin-top: 88px; }
.sito .link-chiuso .apertura { margin-top: 24px; }
.sito .link-chiuso .apertura + p { margin-top: 16px; max-width: 34em; color: var(--testo-2); }

@container sito (max-width: 1180px) {
  .disco .contenuto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
  .disco .display { font-size: 60px; line-height: 62px; }
  .disco :is(.edizione, .crediti) { grid-template-columns: 1fr; }
  .disco .tecnici > div { grid-template-columns: 1fr; }
}
@container sito (max-width: 760px) {
  .testata.breve .contenuto { min-height: 64px; gap: 4px; }
  .testata.breve .tema .voce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .testata.breve .tema { gap: 8px; }
  .sito .testata.breve .tema + .scopri { margin-left: 4px; }
  .disco { padding-top: 8px; }
  .disco .contenuto { display: block; }
  .sito .disco .chi { font-size: 17px; line-height: 26px; }
  /* a filo, come la copertina piena dell'app; le miniature scorrono di lato se sono più di cinque */
  .disco .immagini { position: static; margin: 16px -16px 0; }
  .galleria .miniature { display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .galleria .miniature li { flex: none; width: 64px; scroll-snap-align: start; }
  .sito .disco .immagini .attribuzione { margin: 12px 16px 0; }
  .sito .disco .attribuzione.ripetuta { display: block; }
  .disco .display { margin-top: 16px; font-size: 46px; line-height: 48px; }
  .sito .disco .chi-e { font-size: 20px; line-height: 28px; margin-top: 8px; }
  .disco .blocco { margin-top: 36px; }
  .disco .blocco h2 { font-size: 19px; line-height: 26px; }
  .disco .blocco dd { font-size: 17px; line-height: 24px; }
  .disco :is(.edizione, .crediti) { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .disco .crediti { grid-template-columns: 1fr; }
  .disco .tecnici > div { grid-template-columns: 1fr; }
  .disco .scaletta :is(summary, li.senza) { grid-template-columns: 44px 32px minmax(0, 1fr) auto; column-gap: 6px; font-size: 16px; line-height: 22px; }
  .disco .scaletta audio { width: 100%; margin-left: 0; }
  .disco .scaletta.muta li.senza { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .vetrina { margin-top: 72px; padding: 56px 0 64px; }
  .vetrina .contenuto { display: block; }
  .vetrina .corpo { margin-top: 20px; }
  .piede.breve .riga-piede { flex-direction: column; align-items: flex-start; }
  .piede.breve .riga-piede nav { margin-left: 0; flex-direction: column; }
  .link-chiuso { padding-top: 24px; }
  .link-chiuso .contenuto { display: block; }
  .link-chiuso .busta { width: 72px; margin-top: 0; }
  .link-chiuso .busta svg { width: 32px; height: 32px; }
  .link-chiuso .display { margin-top: 20px; font-size: 40px; line-height: 42px; }
  .sito .link-chiuso .apertura { margin-top: 16px; }
  .link-chiuso .azioni { margin-top: 20px; }
  .vetrina.chiusa { margin-top: 56px; }
}
/* fine W-11 */

/* ========== W-12, l'invito (api.spinery.it/join?token=…): la pagina del server con l'aspetto del sito ========== */
/* inizio W-12 */
/* Segue il tema del sistema come il sito (nessun interruttore); testata e piè brevi di W-11, il resto suo. Il server sceglie la
   variante dallo User-Agent: Android apre l'app, un computer o un iPhone portano l'invito sul telefono (QR e indirizzo) */
.invito { background: var(--fondo); color: var(--testo); }
/* con il testo ingrandito «Cos'è Spinery» va sotto il marchio invece di uscire dalla pagina */
.invito .testata.breve .contenuto { flex-wrap: wrap; row-gap: 0; }
.accoglie { padding: 72px 0 128px; }
.accoglie .contenuto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.accoglie .corpo-invito { grid-column: 1 / 8; min-width: 0; }
/* chi non ha l'app: la colonna accanto, allineata all'apertura come il badge della Home (.dopo-giorno), sotto un filetto */
.accoglie .senza-app { grid-column: 9 / 13; margin-top: 88px; padding-top: 24px; border-top: 1px solid var(--filetto); min-width: 0; }
/* l'iniziale di chi invita, come il ritratto di S-03 nell'app: riconoscere la persona prima di leggere */
.invito .iniziale { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accento); color: var(--su-accento);
  font-family: var(--font-titolo); font-weight: 700; font-size: 32px; line-height: 1; }
/* il titolo è la pagina: chi invita e la cerchia, in grande (la cosa audace della pagina) */
.accoglie .display { margin-top: 24px; font-size: 76px; line-height: 78px; max-width: 11em; overflow-wrap: break-word; hyphens: manual; }
.sito .accoglie .apertura { margin-top: 24px; }
/* «Apri in Spinery»: il pulsante pieno, come quello di Elimina l'account (00-fondamenta-sito §8); un collegamento a spinery://join */
.sito .invito .pulsante.apri { margin-top: 36px; min-width: 280px; white-space: normal; text-align: center; padding: 12px 28px; font-size: 18px; line-height: 24px; }
.sito .invito .nota-apri { margin-top: 16px; max-width: 30em; font-size: 16px; line-height: 24px; color: var(--testo-2); }
.sito .senza-app p { margin-top: 8px; }
.sito .senza-app .play { margin-top: 20px; max-width: 100%; }
.senza-app .play .negozio { white-space: nowrap; }
/* sul sito vero il badge è l'immagine ufficiale: con il testo ingrandito si stringe con la colonna, in proporzione, senza tagli */
.senza-app .play.immagine img { max-width: 100%; height: auto; }
.sito .senza-app .piccolo { margin-top: 12px; }
/* la cerchia al completo: una frase, con il filo senape di «in prova» (forma, non solo colore) */
.sito .accoglie .completo { margin-top: 28px; max-width: 26em; padding: 4px 0 4px 18px; border-left: 3px solid var(--accento); font-size: 21px; line-height: 32px; font-weight: 600; }
.sito .accoglie .completo + .nota-apri { margin-top: 16px; font-size: 18px; line-height: 28px; }
/* l'invito che non vale più: il link chiuso di W-11, con un collegamento all'app per chi è già dentro */
.sito .invito-chiuso .gia-dentro { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--filetto); max-width: 34em; }
.sito .invito-chiuso .gia-dentro .collegamento { margin-top: 4px; }
.invito-chiuso { padding-bottom: 112px; }
/* dal computer: il QR (nero su bianco nei due temi, per le fotocamere; angolo 0) e l'indirizzo intero, selezionato con un clic */
.da-telefono { margin-top: 40px; display: grid; grid-template-columns: 184px minmax(0, 1fr); column-gap: 40px; align-items: start; }
.qr-blocco { margin: 0; }
.qr { width: 184px; height: 184px; padding: 8px; background: #fff; }
.qr svg { display: block; width: 100%; height: 100%; }
.sito .qr-blocco figcaption { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--testo-2); }
.sito .indirizzo-invito { margin-top: 12px; padding: 12px 14px; background: var(--superficie-2); font-family: var(--font-dati); font-size: 16px; line-height: 24px;
  overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
@container sito (max-width: 1180px) {
  .accoglie .display { font-size: 64px; line-height: 66px; }
  .accoglie .corpo-invito { grid-column: 1 / 9; }
  .accoglie .senza-app { grid-column: 9 / 13; }
}
@container sito (max-width: 760px) {
  .accoglie { padding: 24px 0 72px; }
  .accoglie .contenuto { display: block; }
  .invito .iniziale { width: 48px; height: 48px; font-size: 24px; }
  .accoglie .display { margin-top: 16px; font-size: 44px; line-height: 46px; }
  .sito .accoglie .apertura { margin-top: 16px; }
  .sito .invito .pulsante.apri { display: flex; width: 100%; min-width: 0; margin-top: 28px; }
  .accoglie .senza-app { margin-top: 48px; }
  .sito .accoglie .completo { font-size: 18px; line-height: 28px; }
  .sito .accoglie .completo + .nota-apri { font-size: 17px; line-height: 26px; }
  /* non si inquadra il proprio schermo: sul telefono resta l'indirizzo */
  .da-telefono { display: block; margin-top: 28px; }
  .qr-blocco { display: none; }
  .invito-chiuso { padding-bottom: 72px; }
}
/* fine W-12 */

/* Spinery — le poche regole del sito vero (src/Spinery.Site), aggiunte in coda a docs/v2/mockup/sito/sito.css quando il sito
   si genera (26-sito-e-versioni.md §2.2). Decisioni di Davide del 18/10: quattro lingue con il selettore, i video dell'app,
   «Funziona con», l'etichetta QR d'esempio. Stessi token, nessuna ombra, nessuno script. */

/* ---------- il selettore della lingua: un details, senza script ---------- */
.lingue { position: relative; }
.lingue > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
                    font-size: 15px; line-height: 22px; color: var(--testo-2); border-radius: 8px; }
.lingue > summary::-webkit-details-marker { display: none; }
.lingue > summary::after { content: ""; width: 7px; height: 7px; margin-left: 10px; border-right: 1.5px solid currentColor;
                           border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.lingue[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.lingue > summary:hover { color: var(--testo); }
.lingue ul { position: absolute; right: 0; top: 100%; z-index: 4; min-width: 200px; padding: 6px 0; background: var(--fondo);
             border: 1px solid var(--filetto); border-radius: 8px; }
.lingue ul a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 16px; line-height: 24px;
               color: var(--testo); text-decoration: none; white-space: nowrap; }
.lingue ul a:hover { background: var(--superficie-2); }
.lingue ul a[aria-current] { font-weight: 600; text-decoration: underline; text-decoration-color: var(--accento);
                             text-decoration-thickness: 2px; text-underline-offset: 6px; }
.bandiera { display: inline-block; flex: none; width: 20px; height: 14px; margin-right: 10px; vertical-align: -2px; outline: 1px solid var(--filetto); }

/* ---------- le righe vicino al badge: la lingua dell'app, l'accesso su invito ---------- */
.sito .nota-lingua, .sito .nota-invito { max-width: 30em; }
.sito .nota-invito { font-weight: 600; }
.guida-testa .nota-lingua { margin-top: 16px; }
.chiusura .nota-invito { flex-basis: 100%; max-width: none; }

/* ---------- l'eroe: i due telefoni interi (Davide, 18/10) ----------
   Nel mockup il telefono sporgeva oltre il fondo della metà e veniva tagliato; qui è più piccolo e intero, con il margine
   sotto, e resta sopra la piega con titolo e frase (a 1440 × 900 e a 390 × 844). Sul telefono le metà mostrano anche lui. */
.giorno .meta { grid-template-columns: minmax(0, 1fr) 210px; }
.giorno .telefono { width: 210px; margin-bottom: 48px; }
@container sito (max-width: 1180px) {
  .giorno .meta { grid-template-columns: minmax(0, 1fr); }
  .giorno .telefono { width: 200px; margin: 32px 0 48px; }
}
@container sito (max-width: 760px) {
  .giorno .telefono { display: block; width: 168px; margin: 20px 0 0; }
}

/* ---------- i video dell'app nella cornice del telefono ----------
   Uno per tema quando ci sono tutti e due (video-chiaro, video-scuro), altrimenti «solo». Partono da soli e in loop per
   tutti, anche con prefers-reduced-motion: deroga consapevole decisa da Davide il 18/10 (un fermo immagine con ▶ non si
   capisce che è un video e nessuno lo preme; 26-sito-e-versioni.md §2.2). */
.telefono video.schermo { height: auto; object-fit: cover; }
.video-app { display: block; }
.video-app video.schermo { display: none; }
.video-app video.solo, .video-app video.video-chiaro { display: block; }
@media (prefers-color-scheme: dark) {
  .video-app video.video-chiaro { display: none; }
  .video-app video.video-scuro { display: block; }
}

/* ---------- «Aggiungi il primo disco» nella Guida: cinque passi numerati, perché sono una sequenza vera ---------- */
.sito .compito .passi-aggiungi { margin-top: 16px; max-width: 36em; padding-left: 1.5em; list-style: decimal; }
.sito .compito .passi-aggiungi li { margin-top: 10px; padding-left: 4px; }
.sito .compito .passi-aggiungi li::marker { color: var(--testo-2); font-weight: 600; }
.sito .compito .passi-aggiungi strong { font-weight: 600; }

/* ---------- l'etichetta QR d'esempio nella Guida ---------- */
.compito .esempio-etichetta { margin-top: 24px; max-width: 360px; }
.compito .esempio-etichetta img { display: block; width: 100%; height: auto; border: 1px solid var(--filetto); }
.compito .esempio-etichetta figcaption { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--testo-2); }

/* ---------- la pagina di una condivisione (W-11) nella Guida: un telefono piccolo nel testo, con la didascalia ---------- */
.compito .esempio-pagina { margin-top: 28px; max-width: 220px; }
.compito .esempio-pagina .telefono { max-width: 220px; }
.compito .esempio-pagina figcaption { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--testo-2); }

/* ---------- «Funziona con»: solo testo, in fondo alla Home, sopra il piè ---------- */
.funziona-con { border-top: 1px solid var(--filetto); padding: 40px 0 64px; }
.funziona-con .contenuto { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.funziona-con h2 { grid-column: 1 / 4; font-size: 16px; line-height: 24px; font-weight: 600; }
.funziona-con ul { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 32px; }
.funziona-con li { font-size: 15px; line-height: 22px; color: var(--testo-2); }
.funziona-con li strong { display: block; color: var(--testo); font-weight: 600; }

@container sito (max-width: 1000px) {
  .funziona-con ul { grid-template-columns: repeat(2, 1fr); }
}
@container sito (max-width: 760px) {
  .funziona-con { padding: 32px 0 48px; }
  .funziona-con .contenuto { display: block; }
  .funziona-con ul { margin-top: 16px; grid-template-columns: 1fr; }
  .compito .esempio-etichetta { max-width: 100%; }
}