/* Token di burraco.com: quelli della direzione A "Il Manuale" piu le aggiunte del giro 2 (marcate "nuovo").
   Il bordeaux e quello del logo nuovo (C15, 19/10/2026): #961830 misurato sul PNG, al posto del vecchio #8C1D2C.
   Font self-hosted (woff2, SIL OFL 1.1) in /assets/fonts: Literata 400/400i/600/700 e Source Sans 3 400/600/700. */

:root {
  /* colore (direzione A) */
  --carta: #FAF6EE;            /* sfondo pagina */
  --carta-2: #F1EADB;          /* pannelli, indice, "In breve" */
  --bianco: #FFFDF9;           /* schede e facce delle carte */
  --inchiostro: #261E19;       /* testo (15,2:1 su carta) */
  --testo-2: #5A4E45;          /* testo secondario (7,5:1 su carta) */
  --bordeaux: #961830;         /* marchio, link, pulsante primario, risposta Staff: stesso colore del logo (7,9:1 su carta) */
  --bordeaux-scuro: #7A1327;   /* hover del pulsante primario */
  --bordeaux-chiaro: #F5E6E3;  /* fondo della risposta Staff e di "Errore comune" */
  --ocra: #6B4E0C;             /* "Attenzione" (6,5:1 su ocra chiaro) */
  --ocra-chiaro: #F8EBC8;
  --filo: #D9CDB6;             /* filetti decorativi */
  --filo-scuro: #BFB29A;       /* bordi di tabelle e schede */
  --bordo-campo: #6F6254;      /* bordo di campi e chip (5,5:1, minimo richiesto 3:1) */
  --seme-rosso: #B3202E;       /* semi di cuori e quadri */

  /* colore (nuovo) */
  --blu: #2F4A63;              /* nuovo: secondo dorso delle carte e "Bozza automatica" nell'area Staff */
  --blu-chiaro: #E3EAF1;       /* nuovo: fondo della bozza automatica e del dorso B */
  --blu-filo: #9FB2C4;         /* nuovo: tratteggio della bozza e disegno del dorso B */

  /* tipografia */
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --corpo: 19px;               /* 18px sotto i 375 px, 20px da 720 px in su */
  --interlinea: 1.65;
  --ui-testo: 18px;
  --ui-etichetta: 16px;        /* minimo assoluto per etichette e date */

  /* forma e spazio */
  --raggio: 6px;
  --bersaglio-min: 48px;       /* altezza minima di pulsanti e link di navigazione (obiettivo del brief: 44) */
  --colonna-testo: 68ch;
  --larghezza-max: 1120px;

  /* carte (nuovo): proporzioni della carta del logo (30 x 43) */
  --carta-larghezza: 44px;     /* carta singola nel testo: 44 x 62 */
  --carta-proporzione: 60 / 86;
}


/* burraco.com - base: font, reset, tipografia, testata, piede, pulsanti, campi.
   Va caricato dopo token.css. Nessun servizio esterno: i font sono in ../fonts (licenza OFL). */

@font-face { font-family: "Literata"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/literata-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/literata-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/literata-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/literata-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

/* ---------- reset e testo ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top = altezza della testata fissa + un respiro: ancore (#d-<id>, indice, "Vai al contenuto") e focus da tastiera
   non finiscono sotto la testata (WCAG 2.4.11). Nelle pagine senza testata (area Staff) --testata-h vale 0 e il respiro e 24 px come prima. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--testata-h) + var(--respiro-ancora)); scroll-behavior: smooth; accent-color: var(--bordeaux); }
:root { --testata-h: 0px; --respiro-ancora: 24px; }
/* pagine con la testata fissa: valori di RIPIEGO (senza JavaScript), misurati sul sito costruito; app.js li sostituisce con l'altezza reale */
.con-testata { --testata-h: 69px; --respiro-ancora: 12px; }            /* telefono con JavaScript: barra compatta (Cerca e Menu chiusi) */
.con-testata.no-js { --testata-h: 133px; }                              /* telefono senza JavaScript: il campo di ricerca resta sempre visibile */
@media (min-width: 915px) { .con-testata, .con-testata.no-js { --testata-h: 137px; } }   /* testata larga: logo, ricerca e menu su una riga */
body { margin: 0; background: var(--carta); color: var(--inchiostro); font: 400 var(--corpo)/var(--interlinea) var(--serif); font-kerning: normal; overflow-wrap: break-word; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
::selection { background: var(--bordeaux-chiaro); color: var(--inchiostro); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--bordeaux); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -64px; background: var(--inchiostro); color: var(--carta); padding: 12px 16px; font: 600 18px var(--ui); z-index: 30; }
.skip:focus { top: 8px; }
.ic { width: 22px; height: 22px; flex: none; fill: currentColor; }
.ic--s { width: 18px; height: 18px; }
.wrap { width: min(100% - 32px, var(--larghezza-max)); margin-inline: auto; }
.solo-schermo-largo { display: none; }
.solo-telefono { display: block; }
@media (min-width: 720px) {
  :root { --corpo: 20px; }
  .solo-schermo-largo { display: block; }
  .solo-telefono { display: none; }
}
@media (max-width: 374px) { :root { --corpo: 18px; } }

/* Il rombo: unico segno ricorrente del marchio (gli angoli della carta del logo). */
.rombo { display: inline-block; width: .55em; height: .55em; background: var(--bordeaux); transform: rotate(45deg) scale(.82); flex: none; }
.kicker { display: flex; align-items: center; gap: 10px; font: 700 16px/1.3 var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--bordeaux); margin: 0 0 8px; }
.kicker::before { content: ""; width: 9px; height: 9px; background: var(--bordeaux); transform: rotate(45deg); flex: none; }

/* ---------- testata ---------- */
/* Testata FISSA con effetto vetro (21/10/2026): resta visibile scorrendo la pagina, cosi la ricerca e sempre a portata.
   - sticky (non fixed): non toglie spazio al contenuto, quindi nessun salto di layout al caricamento;
   - sfondo trasparente all'80% + sfocatura moderata: il testo che scorre sotto si intravede, le voci restano leggibili
     (anche con testo nero pieno sotto il contrasto resta oltre 4,5:1, vedi scripts/verifica/interazioni-testata.mjs);
   - z-index 20: sopra ai contenuti (anche alla colonna .guida__lato, sticky ma senza z-index) e sotto a "Vai al contenuto" (30) e
     al riquadro sticky dell'area Staff (30), che non ha questa testata; un eventuale dialog/modale va sopra a 20;
   - ripiego: senza backdrop-filter sfondo quasi opaco (@supports not). NESSUNA regola per prefers-reduced-transparency (decisione del
     proprietario, 21/10/2026: come su www.bitnrg.com l'effetto vetro c'e sempre, qualunque sia l'impostazione di Windows);
   - --testata-h e l'altezza della testata (ripiego qui sotto, esatta e dinamica da app.js): usata da scroll-padding-top e dal lato sticky. */
.testata { container-type: inline-size; position: sticky; top: 0; z-index: 20; background: rgba(250, 246, 238, 0.8); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); border-top: 4px solid var(--bordeaux); border-bottom: 1px solid var(--filo); box-shadow: 0 6px 14px -8px rgba(38, 30, 25, .35); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .testata { background: rgba(250, 246, 238, 0.97); }
}
/* Su telefono e tablet stretto il pannello di Cerca e Menu non supera mai l'altezza dello schermo: scorre dentro la testata */
@media (max-width: 914px) {
  .testata { max-height: 100vh; max-height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .menu a:focus-visible, .azione:focus-visible, .marchio:focus-visible { outline-offset: -4px; }
}
.testata__in { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 16px; min-height: 64px; }
.marchio { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; min-height: 48px; }
.marchio img { display: block; height: 36px; width: auto; }
.marchio__tag { display: none; font: 600 17px/1.2 var(--ui); color: var(--testo-2); letter-spacing: .02em; padding-left: 16px; border-left: 1px solid var(--filo); }
.azioni { display: flex; gap: 2px; }
.azione { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 12px; background: none; border: 0; border-radius: var(--raggio); color: var(--inchiostro); font: 600 18px var(--ui); cursor: pointer; }
.azione:hover, .azione[aria-expanded="true"] { background: var(--carta-2); }
.cerca { display: flex; gap: 8px; padding: 0 16px 12px; }
.js .cerca:not(.is-open) { display: none; }
.cerca input { flex: 1; min-width: 0; }
.js .menu:not(.is-open) { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filo); }
.menu li { border-bottom: 1px solid var(--filo); }
.menu a { display: flex; align-items: center; min-height: 54px; padding: 0 16px; font: 600 20px var(--ui); color: var(--inchiostro); text-decoration: none; }
.menu a:hover, .menu a[aria-current] { background: var(--carta-2); color: var(--bordeaux); }
.menu a[aria-current] { box-shadow: inset 5px 0 0 var(--bordeaux); }

/* Testata larga (contenitore da 900 px): logo, ricerca e 7 voci su una riga sotto. Sotto i 900 px
   (tablet verticale, finestre strette) passa al menu compatto con i due pulsanti. */
@container (min-width: 900px) {
  .testata__box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); column-gap: 32px; align-items: center; padding-inline: max(16px, calc((100cqw - var(--larghezza-max)) / 2)); }
  .testata__in { padding: 16px 0 6px; }
  .marchio__tag { display: block; }
  .azioni { display: none; }
  .cerca, .js .cerca:not(.is-open) { display: flex; padding: 10px 0 0; }
  .menu, .js .menu:not(.is-open), .no-js .menu { display: block; grid-column: 1 / -1; border-top: 2px solid var(--inchiostro); margin-top: 8px; }
  .menu ul { display: flex; flex-wrap: wrap; gap: 0 28px; border: 0; padding: 0; }
  .menu li { border: 0; }
  .menu a { min-height: 52px; padding: 0; font-size: 19px; box-shadow: none !important; background: none !important; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 8px; text-decoration-thickness: 3px; }
  .menu a:hover, .menu a[aria-current] { text-decoration-color: var(--bordeaux); }
}

.no-js-solo { display: none; }
.no-js .no-js-solo { display: inline-flex; text-decoration: none; }
.no-js .azioni .azione[data-toggle] { display: none; }
@container (max-width: 899px) { .no-js .menu { display: none; } }
.copiato:empty { display: none; }

/* ---------- pulsanti e campi ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: var(--raggio); border: 2px solid var(--bordeaux); font: 700 19px var(--ui); cursor: pointer; text-decoration: none; text-align: center; }
.btn--primario { background: var(--bordeaux); color: #fff; }
.btn--primario:hover { background: var(--bordeaux-scuro); border-color: var(--bordeaux-scuro); }
.btn--secondario { background: transparent; color: var(--bordeaux); }
.btn--secondario:hover { background: var(--bordeaux-chiaro); }
.btn--neutro { background: transparent; color: var(--inchiostro); border-color: var(--bordo-campo); }
.btn--neutro:hover { background: var(--carta-2); }
.btn--s { min-height: 48px; padding: 0 16px; font-size: 18px; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--carta-2); border-color: var(--filo-scuro); color: var(--testo-2); cursor: not-allowed; }
.btn--blocco { width: 100%; }
.vai { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font: 700 19px var(--ui); }

input[type="search"], input[type="text"], input[type="email"], select, textarea {
  width: 100%; min-height: 52px; padding: 10px 14px; font: 400 19px/1.4 var(--serif); color: var(--inchiostro); background: #fff;
  border: 2px solid var(--bordo-campo); border-radius: var(--raggio);
}
select { font-family: var(--ui); font-weight: 600; font-size: 18px; appearance: none; padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' stroke='%23261E19' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center / 22px; }
textarea { min-height: 140px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #6A5E54; opacity: 1; }
input:disabled, select:disabled, textarea:disabled { background: var(--carta-2); border-color: var(--filo-scuro); color: var(--testo-2); cursor: not-allowed; }
.campo { margin-bottom: 18px; }
.campo label, .campo__t { display: block; font: 700 18px var(--ui); margin-bottom: 6px; }
.campo__aiuto { display: block; font: 400 17px/1.4 var(--ui); color: var(--testo-2); margin-bottom: 6px; }
.campo--errore input, .campo--errore textarea, .campo--errore select { border-color: var(--bordeaux); border-width: 3px; background: var(--bordeaux-chiaro); }
.campo__errore { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; font: 700 17px/1.35 var(--ui); color: var(--bordeaux); }
.campo__errore .ic { margin-top: 2px; }
.spunta { display: grid; grid-template-columns: 48px 1fr; align-items: start; margin: 0 0 8px; }
.spunta input { appearance: none; width: 28px; height: 28px; margin: 10px 10px 10px 0; border: 2px solid var(--bordo-campo); border-radius: 4px; background: #fff; display: grid; place-content: center; cursor: pointer; }
.spunta input::before { content: ""; width: 14px; height: 8px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) translate(1px, -1px) scale(0); }
.spunta input:checked { background: var(--bordeaux); border-color: var(--bordeaux); }
.spunta input:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.spunta label { font: 600 18px/1.45 var(--ui); padding: 10px 0; cursor: pointer; }
.spunta--errore input { border-color: var(--bordeaux); border-width: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; background: transparent; color: var(--inchiostro); border: 2px solid var(--bordo-campo); border-radius: var(--raggio); font: 600 18px/1.2 var(--ui); cursor: pointer; text-decoration: none; }
a.chip:hover, button.chip:hover { background: var(--carta-2); border-color: var(--inchiostro); }
.chip[aria-pressed="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); }
.badge { display: inline-block; font: 700 16px/1.2 var(--ui); padding: 3px 8px; background: var(--carta-2); color: var(--inchiostro); border-radius: 3px; vertical-align: middle; }
.etichetta { display: inline-block; font: 700 16px/1.2 var(--ui); letter-spacing: .02em; padding: 4px 9px; background: var(--bordeaux); color: #fff; border-radius: 3px; }
.etichetta--s { font-size: 16px; padding: 2px 7px; vertical-align: 1px; }

/* turnstile: segnaposto del controllo anti-bot (circa 300 x 65 px) */
.turnstile { display: flex; align-items: center; gap: 12px; width: min(100%, 300px); min-height: 65px; padding: 0 14px; margin: 0 0 18px; border: 1px solid var(--bordo-campo); border-radius: var(--raggio); background: #fff; font: 600 18px var(--ui); }
.turnstile__box { width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--inchiostro); border-radius: 4px; background: var(--inchiostro); color: #fff; flex: none; }
.turnstile__m { margin-left: auto; font: 400 16px/1.2 var(--ui); color: var(--testo-2); text-align: right; }

/* ---------- piede ---------- */
.piede { container-type: inline-size; margin-top: 40px; background: var(--carta-2); border-top: 1px solid var(--filo-scuro); padding: 32px 0 40px; }
.piede__marchio { display: inline-flex; min-height: 48px; align-items: center; }
.piede__marchio img { height: 32px; }
.piede__nota { font: 400 17px/1.55 var(--ui); color: var(--testo-2); max-width: 60ch; margin: 12px 0 20px; }
.piede__cols { display: grid; gap: 18px 24px; margin-bottom: 20px; }
.piede__col h2 { font: 700 16px/1.3 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--testo-2); margin: 0 0 4px; }
.piede__col ul { list-style: none; margin: 0; padding: 0; }
.piede__col a { display: flex; align-items: center; min-height: 44px; font: 600 18px var(--ui); color: var(--inchiostro); }
.piede__col a:hover { color: var(--bordeaux); }
.piede__col .piede__gioca { color: var(--bordeaux); }
.piede__copy { font: 400 16px var(--ui); color: var(--testo-2); margin: 0; padding-top: 16px; border-top: 1px solid var(--filo-scuro); }
@container (min-width: 560px) { .piede__cols { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 900px) { .piede__cols { grid-template-columns: repeat(4, 1fr); } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }


/* burraco.com - componenti riutilizzabili (riquadri, tabelle, schede domanda, moduli, messaggi). */

/* ---------- briciole ---------- */
.briciole { font: 400 17px/1.5 var(--ui); color: var(--testo-2); padding: 10px 0; }
.briciole ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.briciole li { display: flex; align-items: center; }
.briciole li + li::before { content: "\203A"; margin: 0 8px; color: var(--testo-2); }
.briciole a { color: var(--testo-2); display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }

/* ---------- invito a giocare (altro sito) ---------- */
.invito { border: 2px dashed var(--bordo-campo); border-radius: var(--raggio); padding: 20px; max-width: 760px; background: transparent; }
.invito__k { display: flex; align-items: center; gap: 8px; font: 700 16px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--testo-2); margin: 0 0 4px; }
.invito__t { font-size: 22px; margin-bottom: 6px; }
.invito__p { font-size: 18px; margin-bottom: 12px; }
.invito__nota { display: block; font: 400 16px/1.3 var(--ui); color: var(--testo-2); margin-top: 6px; }

/* ---------- In breve ---------- */
.inbreve { background: var(--carta-2); border-top: 4px solid var(--bordeaux); padding: 18px 20px 8px; margin: 0 0 24px; border-radius: 0 0 var(--raggio) var(--raggio); }
.inbreve__t { font: 700 17px var(--ui) !important; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 10px !important; color: var(--bordeaux); }
.inbreve__l { list-style: none; margin: 0; padding: 0; font-size: 18px; line-height: 1.55; }
.inbreve__l li { position: relative; padding: 0 0 12px 26px; }
.inbreve__l li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 10px; height: 10px; background: var(--bordeaux); transform: rotate(45deg); }

/* ---------- indice dei contenuti ---------- */
.toc { background: var(--carta-2); border-radius: var(--raggio); margin: 0 0 24px; }
.toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 18px; font: 700 17px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--testo-2); cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary .ic { transition: transform .15s; }
.toc[open] summary .ic { transform: rotate(180deg); }
.toc__t { font: 700 17px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--testo-2); margin: 0 0 6px; padding: 14px 18px 0; }
.toc__l { margin: 0; padding: 0 18px 10px 42px; font: 400 19px/1.35 var(--ui); }
.toc__l a { font-weight: 600; display: block; padding: 8px 0; min-height: 44px; text-decoration: none; color: var(--inchiostro); }
.toc__l a:hover { color: var(--bordeaux); text-decoration: underline; }
.toc__l a[aria-current="true"] { color: var(--bordeaux); box-shadow: -14px 0 0 -10px var(--bordeaux); }
.toc__l li::marker { font-weight: 700; color: var(--bordeaux); }
.toc--lato { display: none; }
.toc--mobile { margin-top: 0; }
@media (min-width: 1000px) { .toc--lato { display: block; } .toc--mobile { display: none; } }

/* ---------- riquadri nel testo ---------- */
.callout { border-left: 6px solid; border-radius: 0 var(--raggio) var(--raggio) 0; padding: 14px 18px 4px; margin: .6em 0 1.2em; max-width: var(--colonna-testo); font-size: 18.5px; }
.callout__t { display: flex; align-items: center; gap: 8px; font: 700 17px var(--ui); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.callout--errore { background: var(--bordeaux-chiaro); border-color: var(--bordeaux); }
.callout--errore .callout__t { color: var(--bordeaux); }
.callout--attenzione { background: var(--ocra-chiaro); border-color: var(--ocra); }
.callout--attenzione .callout__t { color: var(--ocra); }
.callout__fonte { font: 400 16px var(--ui); color: var(--testo-2); }
/* ---------- tabelle ---------- */
.tabella-wrap { max-width: var(--colonna-testo); margin: 1.6em 0; }
.tabella { width: 100%; border-collapse: collapse; font: 400 18px/1.45 var(--ui); background: var(--bianco); font-variant-numeric: lining-nums tabular-nums; }
.tabella caption { text-align: left; font: 700 19px var(--serif); padding: 0 0 8px; }
.tabella th, .tabella td { text-align: left; padding: 12px 14px; border: 1px solid var(--filo-scuro); vertical-align: top; }
.tabella thead th { background: var(--carta-2); font-weight: 700; }
.tabella tbody th { font-weight: 700; }
.tabella .num { text-align: right; white-space: nowrap; font-weight: 700; }
.segnaposto { color: var(--testo-2); font-style: italic; }
@media (max-width: 639px) {
  .tabella--impilata { background: transparent; }
  .tabella--impilata caption { display: block; }
  .tabella--impilata thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .tabella--impilata, .tabella--impilata tbody, .tabella--impilata tr, .tabella--impilata th, .tabella--impilata td { display: block; }
  .tabella--impilata tr { border: 1px solid var(--filo-scuro); margin-bottom: 12px; background: var(--bianco); }
  .tabella--impilata th, .tabella--impilata td { border: 0; padding: 10px 14px; }
  .tabella--impilata tbody th { background: var(--carta-2); }
  .tabella--impilata td::before { content: attr(data-label); display: block; font-size: 16px; font-weight: 700; color: var(--testo-2); text-transform: uppercase; letter-spacing: .05em; }
}

/* ---------- guide correlate ---------- */
.correlate { margin: 2.4em 0 0; max-width: var(--colonna-testo); }
.correlate__t { font-size: 22px !important; margin: 0 0 8px !important; }
.correlate__l { list-style: none; margin: 0; padding: 0; }
.correlate__l li { border-top: 1px solid var(--filo); }
.correlate__l li:last-child { border-bottom: 1px solid var(--filo); }
.correlate__l a { display: grid; grid-template-columns: 1fr 22px; column-gap: 8px; align-items: center; min-height: 66px; padding: 8px 2px; text-decoration: none; color: var(--inchiostro); }
.correlate__n { font: 600 20px/1.3 var(--serif); grid-column: 1; }
.correlate__d { grid-column: 1; font: 400 17px var(--ui); color: var(--testo-2); }
.correlate__l .ic { grid-column: 2; grid-row: 1 / span 2; color: var(--bordeaux); }
.correlate__l a:hover .correlate__n { color: var(--bordeaux); text-decoration: underline; }

/* ---------- messaggi di sistema ---------- */
.avviso { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-left: 6px solid var(--inchiostro); border-radius: 0 var(--raggio) var(--raggio) 0; background: var(--carta-2); font: 400 18px/1.45 var(--ui); margin: 0 0 18px; }
.avviso .ic { margin-top: 2px; }
.avviso p { margin: 0 0 .4em; }
.avviso p:last-child { margin: 0; }
.avviso strong { display: block; font-size: 19px; }
.avviso--ok { border-color: var(--inchiostro); background: var(--carta-2); }
.avviso--errore { border-color: var(--bordeaux); background: var(--bordeaux-chiaro); color: var(--inchiostro); }
.avviso--errore strong { color: var(--bordeaux); }
.avviso--attenzione { border-color: var(--ocra); background: var(--ocra-chiaro); }
.avviso--attenzione strong { color: var(--ocra); }
.avviso--info { border-color: var(--bordo-campo); background: var(--bianco); border-top: 1px solid var(--filo-scuro); border-right: 1px solid var(--filo-scuro); border-bottom: 1px solid var(--filo-scuro); }
.avviso__elenco { margin: 6px 0 0; padding-left: 22px; }
.avviso__elenco a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.copiato { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font: 700 17px var(--ui); color: var(--inchiostro); }

/* ---------- scheda domanda (voce piatta: regola e testo, non una scatola) ---------- */
.dom { display: grid; gap: 4px 28px; padding: 24px 0 22px; border-top: 1px solid var(--filo-scuro); scroll-margin-top: 24px; position: relative; }
.dom__chi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; font: 400 17px/1.4 var(--ui); color: var(--testo-2); margin: 0 0 4px; }
.nome { font-weight: 700; color: var(--inchiostro); font-size: 18px; }
.dom__t { margin: 0 0 4px; font-size: var(--corpo); line-height: 1.6; overflow-wrap: anywhere; white-space: pre-line; }
.dom__corpo { min-width: 0; }
.dom:target, .dom.is-evidenziata { background: var(--carta-2); margin-inline: -16px; padding-inline: 16px; box-shadow: inset 6px 0 0 var(--bordeaux); border-top-color: transparent; }
.dom:target .dom__chi, .dom.is-evidenziata .dom__chi { color: var(--inchiostro); }
.dom__marca { display: none; align-items: center; gap: 6px; font: 700 16px var(--ui); color: var(--bordeaux); margin: 0 0 6px; }
.dom:target .dom__marca, .dom.is-evidenziata .dom__marca { display: flex; }
.risposte { margin-top: 14px; display: grid; gap: 12px; }
/* alias dei vecchi link #comment-<id>: segnaposto invisibile, fuori dal flusso (non occupa spazio ne cella di griglia) */
/* Campo trappola dei moduli (honeypot): fuori dallo schermo, mai visibile ne raggiungibile col Tab */
.trappola { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.alias { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; scroll-margin-top: 24px; }
.risp { position: relative; scroll-margin-top: 24px; }
.risp:target, .risp.is-evidenziata { outline: 3px solid var(--bordeaux); outline-offset: 3px; }
/* la domanda raggiunta da un link ha gia lo sfondo evidenziato: niente secondo contorno dal focus dato via script */
.dom[tabindex="-1"]:focus { outline: none; }
.risp--staff { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; background: var(--bordeaux-chiaro); border-left: 5px solid var(--bordeaux); border-radius: 0 var(--raggio) var(--raggio) 0; padding: 14px 16px 6px 12px; }
.risp--staff .avatar { width: 40px; height: 40px; align-self: start; }
.risp__chi { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font: 400 17px/1.4 var(--ui); color: var(--testo-2); margin: 0; }
.risp--staff .risp__chi { color: var(--bordeaux); }
.risp--staff .risp__chi time { color: var(--testo-2); }
.risp__nome { font-weight: 700; font-size: 18px; color: var(--bordeaux); flex: 0 0 100%; }
.risp--staff .risp__t { grid-column: 1 / -1; margin: 8px 0 8px; }
.risp__t { margin: 8px 0 8px; font-size: var(--corpo); line-height: 1.6; overflow-wrap: anywhere; white-space: pre-line; }
.risp--utente { border-left: 3px solid var(--filo-scuro); padding: 2px 0 0 14px; }
.risp--utente .risp__chi { color: var(--testo-2); }
.risp--utente .nome { font-size: 18px; }
.risp__a { font: 600 17px var(--ui); color: var(--testo-2); margin: 2px 0 0; }
.risp-altre > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 12px; border: 2px solid var(--bordeaux); border-radius: var(--raggio); color: var(--bordeaux); font: 700 18px var(--ui); cursor: pointer; list-style: none; }
.risp-altre > summary::-webkit-details-marker { display: none; }
.risp-altre > summary:hover { background: var(--bordeaux-chiaro); }
.risp-altre > summary .ic { transition: transform .15s; }
.risp-altre[open] > summary .ic { transform: rotate(180deg); }
.risp-altre .s-aperto, .risp-altre[open] .s-chiuso { display: none; }
.risp-altre[open] .s-aperto { display: inline; }
.risp-altre__corpo { display: grid; gap: 12px; margin-top: 12px; }
.dom__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin: 6px 0 0; }
.azione-testo { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0; background: none; border: 0; font: 700 17px var(--ui); color: var(--bordeaux); cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.azione-testo:hover { text-decoration-thickness: 3px; }
.dom__rispondi { margin: 8px 0 0; }

/* paginazione "Mostra altre domande" */
.pagina { display: grid; gap: 10px; margin: 8px 0 0; padding-top: 18px; border-top: 1px solid var(--filo-scuro); }
.pagina__stato { font: 600 17px var(--ui); color: var(--testo-2); margin: 0; }
.pagina__barra { height: 6px; background: var(--carta-2); border-radius: 3px; overflow: hidden; border: 1px solid var(--filo-scuro); }
.pagina__barra i { display: block; height: 100%; background: var(--bordeaux); }

/* ---------- modulo "Fai la tua domanda" ---------- */
.modulo { background: var(--bianco); border: 2px solid var(--bordeaux); border-radius: var(--raggio); padding: 22px 18px 20px; margin: 0 0 24px; }
.modulo__t { font-size: 24px; margin-bottom: 6px; }
.modulo__lead { font: 400 18px/1.5 var(--ui); color: var(--testo-2); margin-bottom: 18px; }
.modulo__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.modulo__nota { font: 400 17px/1.45 var(--ui); color: var(--testo-2); margin: 16px 0 0; }
.simili { background: var(--carta-2); border-radius: var(--raggio); padding: 14px 16px 6px; margin: 0 0 18px; }
.simili__t { font: 700 18px var(--ui); margin: 0 0 4px; }
.simili ul { list-style: none; margin: 0; padding: 0; }
.simili li { border-top: 1px solid var(--filo-scuro); padding: 4px 0; }
.simili li:first-child { border-top: 0; }
.simili a { display: inline-block; font: 600 19px/1.4 var(--serif); padding: 6px 0; }
.simili .etichetta--s { margin-left: 4px; }
.riga-email[hidden], .js-email[hidden] { display: none; }
.modulo-ok { display: grid; gap: 4px; }
.modulo-ok__t { display: flex; gap: 10px; align-items: center; font: 700 22px var(--serif); margin: 0 0 6px; }
.rispondi-avviso { background: var(--carta-2); border-radius: var(--raggio); padding: 12px 16px; margin: 0 0 18px; font: 400 18px/1.45 var(--ui); }

/* ---------- risultati ---------- */
.risultati { list-style: none; margin: 0 0 12px; padding: 0; }
.risultati > li { padding: 18px 0; border-top: 1px solid var(--filo-scuro); }
.risultati > li:last-child { border-bottom: 1px solid var(--filo-scuro); }
.ris__t { display: inline-block; font: 600 21px/1.35 var(--serif); padding: 8px 0; }
.ris__estratto { margin: 6px 0 6px; font-size: 18px; line-height: 1.55; }
.ris__estratto .etichetta { margin-right: 6px; }
.ris__meta { font: 400 17px/1.4 var(--ui); color: var(--testo-2); margin: 0; }
.ris__percorso { font: 600 17px/1.4 var(--ui); color: var(--testo-2); margin: 0 0 2px; }
.scheletro { display: grid; gap: 10px; padding: 18px 0; border-top: 1px solid var(--filo-scuro); }
.scheletro i { display: block; height: 16px; background: var(--carta-2); border-radius: 3px; border: 1px solid var(--filo); }
.scheletro i:nth-child(1) { width: 70%; height: 22px; }
.scheletro i:nth-child(3) { width: 40%; }

/* ---------- bozza automatica (solo area Staff) ---------- */
.bozza { margin: 0 0 18px; border: 3px dashed var(--blu); border-radius: var(--raggio); background: repeating-linear-gradient(135deg, var(--blu-chiaro) 0 14px, #EEF2F6 14px 28px); padding: 14px 16px 6px; }
.bozza__testa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.bozza__etichetta { display: inline-flex; align-items: center; gap: 6px; font: 700 16px var(--ui); letter-spacing: .06em; text-transform: uppercase; background: var(--blu); color: #fff; padding: 4px 10px; border-radius: 3px; }
.bozza__avviso { font: 700 17px var(--ui); color: var(--blu); }
.bozza__t { font: 400 18px/1.55 var(--ui); font-style: italic; color: var(--inchiostro); background: rgba(255,255,255,.7); padding: 10px 12px; border-radius: 4px; margin: 0 0 10px; }
.bozza__fonti { font: 400 16px/1.45 var(--ui); color: var(--testo-2); }
.bozza__fonti strong { color: var(--blu); }

/* senza JavaScript: niente comandi che non potrebbero funzionare (le domande si vedono tutte, la ricerca porta ai risultati) */
.no-js .pagina, .no-js .qa__stato, .no-js [data-rispondi], .no-js [data-copia], .no-js [data-qa-barra] { display: none; }

.t-nota { font: 400 17px/1.5 var(--ui); color: var(--testo-2); }


/* burraco.com - layout delle pagine: home, guida, domande, ricerca, indice, sezione, regolamenti,
   404, pagina di testo, area Staff, tavole dei componenti. */


/* ---------- home ---------- */
.apertura { padding: 28px 0 32px; }
.apertura h1 { font-size: 34px; margin-bottom: 12px; }
.apertura__s { font: 400 20px/1.5 var(--ui); color: var(--testo-2); margin-bottom: 22px; max-width: 52ch; }
.ricerca { display: grid; gap: 10px; }
.ricerca .btn { width: 100%; }
.ricerca label { font: 700 18px var(--ui); display: block; margin-bottom: 6px; }
.esempi { margin: 18px 0 0; }
.esempi__t { font: 700 16px/1.3 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--testo-2); margin: 0 0 8px; }
.blocco { padding: 36px 0; border-top: 1px solid var(--filo); }
.blocco--carta { background: var(--carta-2); }
.blocco__t { font-size: 26px; margin-bottom: 18px; }
.blocco__sotto { font: 400 18px/1.5 var(--ui); color: var(--testo-2); margin: -10px 0 18px; max-width: 60ch; }

.argomenti { list-style: none; margin: 0; padding: 0; }
.argomenti li { border-top: 1px solid var(--filo-scuro); }
.argomenti li:last-child { border-bottom: 1px solid var(--filo-scuro); }
.argomenti a { display: grid; grid-template-columns: 1fr 22px; column-gap: 8px; align-items: center; padding: 14px 4px; color: var(--inchiostro); text-decoration: none; min-height: 72px; }
.argomenti a .argomenti__t, .argomenti a .argomenti__d { grid-column: 1; }
.argomenti a .ic { grid-column: 2; grid-row: 1 / span 2; color: var(--bordeaux); }
.argomenti a:hover .argomenti__t { color: var(--bordeaux); text-decoration: underline; text-decoration-thickness: 2px; }
.argomenti__t { display: block; font: 600 21px/1.3 var(--serif); }
.argomenti__d { display: block; font: 400 17px/1.4 var(--ui); color: var(--testo-2); margin-top: 2px; }

.ultime { list-style: none; margin: 0; padding: 0; }
.ultime li { border-top: 1px solid var(--filo-scuro); }
.ultime li:last-child { border-bottom: 1px solid var(--filo-scuro); }
.ultime a { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: start; padding: 14px 2px; color: var(--inchiostro); text-decoration: none; min-height: 72px; }
.ultime a:hover .ultime__q { color: var(--bordeaux); text-decoration: underline; text-decoration-thickness: 2px; }
.ultime img { width: 32px; height: 32px; margin-top: 2px; }
.ultime__q { display: block; font: 600 20px/1.4 var(--serif); }
.ultime__m { display: block; font: 400 17px/1.4 var(--ui); color: var(--testo-2); margin-top: 2px; }
.duecol { display: grid; gap: 40px; }
.link-tutte { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 10px; font: 700 19px var(--ui); }
.piu-lette { list-style: none; margin: 0; padding: 0; counter-reset: pl; }
.piu-lette li { border-top: 1px solid var(--filo-scuro); }
.piu-lette li:last-child { border-bottom: 1px solid var(--filo-scuro); }
.piu-lette a { display: grid; grid-template-columns: 1fr 22px; align-items: center; gap: 8px; min-height: 64px; padding: 8px 2px; font: 600 20px/1.4 var(--serif); color: var(--inchiostro); text-decoration: none; }
.piu-lette a:hover { color: var(--bordeaux); text-decoration: underline; }
.piu-lette .ic { color: var(--bordeaux); }
.chisiamo { max-width: 62ch; }

/* ---------- guida ---------- */
.guida { padding-top: 12px; padding-bottom: 40px; }
.guida__testa { padding: 8px 0 20px; }
.guida__testa h1 { font-size: 33px; margin-bottom: 12px; }
.guida__meta { font: 400 17px/1.5 var(--ui); color: var(--testo-2); margin: 0; }
.guida__meta a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.guida__griglia { display: block; }
.prosa > p, .prosa > ul, .prosa > ol { max-width: var(--colonna-testo); hyphens: auto; -webkit-hyphens: auto; }
.prosa h2 { font-size: 26px; margin: 1.5em 0 .5em; scroll-margin-top: 20px; }
.prosa h3 { font-size: 21px; margin: 1.4em 0 .4em; }
.prosa .tabella-wrap, .prosa .callout { max-width: var(--colonna-testo); }
.blocco-invito { margin: 2.4em 0 0; }
.guida .qa { margin-top: 56px; }
@media (min-width: 720px) {
  .guida__testa h1 { font-size: 46px; }
}
@media (min-width: 1000px) {
  .guida__griglia { display: grid; grid-template-columns: 250px minmax(0, 720px); column-gap: 64px; justify-content: center; align-items: start; }
  /* la colonna laterale parte SOTTO la testata fissa (non sotto di essa): top e altezza massima seguono --testata-h */
  .guida__lato { position: sticky; top: calc(var(--testata-h) + 16px); max-height: calc(100vh - var(--testata-h) - 32px); max-height: calc(100dvh - var(--testata-h) - 32px); overflow: auto; }
  .guida__testa, .guida .briciole { max-width: 1034px; margin-inline: auto; }
  .guida .qa, .guida .blocco-invito--largo { max-width: 1034px; margin-inline: auto; }
}

/* ---------- domande e risposte (sezione della guida e liste) ---------- */
.qa { margin-top: 48px; padding-top: 28px; border-top: 4px solid var(--inchiostro); }
.qa__testa h2 { font-size: 30px; margin-bottom: 6px; }
.qa__lead { font: 400 18px/1.5 var(--ui); color: var(--testo-2); margin-bottom: 16px; }
/* Il filtro "Cerca tra queste domande" non c'e piu (21/10/2026): la barra ha solo il pulsante "Fai la tua domanda" */
.qa__barra { display: grid; gap: 12px; margin: 0 0 18px; }
.qa__stato { font: 600 17px var(--ui); color: var(--testo-2); margin: 0 0 8px; min-height: 1.4em; }
.qa__lista { list-style: none; margin: 0; padding: 0; }
.qa__fine { margin-top: 32px; padding: 24px 18px; background: var(--carta-2); border-radius: var(--raggio); text-align: center; }
.qa__fine p { font: 700 22px/1.3 var(--serif); margin: 0 0 14px; }
@media (min-width: 720px) {
  .qa__barra { justify-items: start; }
  .dom { grid-template-columns: 180px minmax(0, 1fr); padding: 28px 0 26px; }
  .dom__chi { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 2px; }
  .dom__corpo { max-width: 38em; }
}

/* ---------- ricerca ---------- */
.pagina-stretta { width: min(100% - 32px, 820px); margin-inline: auto; padding: 12px 0 32px; }
.pagina-stretta h1 { font-size: 34px; margin: 6px 0 12px; }
.cerca-riga { display: grid; gap: 10px; margin-bottom: 18px; }
.cerca-riga .btn { width: 100%; }
.cerca-riepilogo { font: 400 18px/1.5 var(--ui); color: var(--testo-2); margin: 0 0 18px; }
.gruppo-ris { margin-top: 30px; }
.gruppo-ris h2 { font-size: 26px; margin-bottom: 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gruppo-ris h2 small { font: 600 17px var(--ui); color: var(--testo-2); }
.nessuno { background: var(--bianco); border: 1px solid var(--filo-scuro); border-radius: var(--raggio); padding: 22px 18px; margin-top: 30px; }
.nessuno h2 { font-size: 24px; margin-bottom: 8px; }
.nessuno__cta { text-align: center; background: var(--carta-2); border-radius: var(--raggio); padding: 24px 18px; margin-top: 30px; }
.nessuno__cta p { font: 700 22px/1.3 var(--serif); margin: 0 0 14px; }
.elenco-link { list-style: none; margin: 8px 0 0; padding: 0; }
.elenco-link li { border-top: 1px solid var(--filo-scuro); }
.elenco-link li:last-child { border-bottom: 1px solid var(--filo-scuro); }
.elenco-link a { display: grid; grid-template-columns: 1fr 22px; align-items: center; min-height: 56px; padding: 8px 2px; font: 600 20px/1.35 var(--serif); color: var(--inchiostro); text-decoration: none; }
.elenco-link a:hover { color: var(--bordeaux); text-decoration: underline; }
.elenco-link .ic { color: var(--bordeaux); }
@media (min-width: 720px) {
  .cerca-riga { grid-template-columns: minmax(0, 1fr) auto; }
  .cerca-riga .btn { width: auto; min-width: 140px; }
  .pagina-stretta h1 { font-size: 40px; }
}

/* ---------- indice domande e risposte ---------- */
.pagina-largo { padding: 12px 0 40px; }
.pagina-largo h1 { font-size: 34px; margin: 6px 0 10px; }
.pagina-largo__lead { font: 400 20px/1.5 var(--ui); color: var(--testo-2); max-width: 56ch; }
.idx-cerca { max-width: 780px; margin: 18px 0 28px; }
.idx-griglia { display: grid; gap: 40px; }
.idx-sez { margin: 0 0 30px; }
.idx-sez__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 24px; margin: 0 0 6px; padding-bottom: 8px; border-bottom: 3px solid var(--inchiostro); }
.idx-sez__t a { text-decoration-thickness: 2px; display: inline-block; padding: 8px 0; }
.idx-sez__n { font: 600 17px var(--ui); color: var(--testo-2); }
.idx-sez__l { list-style: none; margin: 0; padding: 0; }
.idx-sez__l li { border-bottom: 1px solid var(--filo); }
.idx-sez__l a { display: flex; align-items: center; min-height: 56px; padding: 8px 2px; font: 600 19px/1.4 var(--serif); color: var(--inchiostro); text-decoration: none; }
.idx-sez__l a:hover { color: var(--bordeaux); text-decoration: underline; }
.idx-sez__tutte { margin-top: 4px; }
.altre-pagine { list-style: none; margin: 8px 0 0; padding: 0; columns: 1; }
.altre-pagine li { break-inside: avoid; border-bottom: 1px solid var(--filo); }
.altre-pagine a { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 52px; font: 600 19px var(--serif); color: var(--inchiostro); text-decoration: none; }
.altre-pagine a:hover { color: var(--bordeaux); }
.altre-pagine span { font: 400 17px var(--ui); color: var(--testo-2); white-space: nowrap; }
.idx-lato { align-self: start; }
.idx-cta { text-align: center; background: var(--carta-2); border-radius: var(--raggio); padding: 22px 18px; margin-top: 28px; }
.idx-cta p { font: 700 22px/1.3 var(--serif); margin: 0 0 14px; }
.idx-modulo { margin-top: 28px; }
@media (min-width: 720px) { .pagina-largo h1 { font-size: 46px; } .altre-pagine { columns: 2; column-gap: 32px; } }
@media (min-width: 1000px) { .idx-griglia { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 56px; } }

/* ---------- pagina di sezione ---------- */
.sez-elenco { list-style: none; margin: 0; padding: 0; }
.sez-elenco li { border-top: 1px solid var(--filo-scuro); }
.sez-elenco li:last-child { border-bottom: 1px solid var(--filo-scuro); }
.sez-elenco a { display: grid; grid-template-columns: 1fr 22px; column-gap: 12px; align-items: center; padding: 16px 2px; min-height: 76px; color: var(--inchiostro); text-decoration: none; }
.sez-elenco a:hover .sez-elenco__t { color: var(--bordeaux); text-decoration: underline; text-decoration-thickness: 2px; }
.sez-elenco__t { font: 600 22px/1.3 var(--serif); }
.sez-elenco__d { grid-column: 1; font: 400 17px/1.45 var(--ui); color: var(--testo-2); margin-top: 2px; }
.sez-elenco .ic { grid-column: 2; grid-row: 1 / span 2; color: var(--bordeaux); }
.sez-elenco__nuova { display: inline-block; font: 700 16px var(--ui); background: var(--carta-2); padding: 2px 8px; border-radius: 3px; margin-left: 8px; vertical-align: 2px; color: var(--testo-2); }

/* ---------- 404 ---------- */
.errore-pagina { padding: 36px 0 12px; max-width: 760px; }
.errore-pagina h1 { font-size: 34px; margin-bottom: 10px; }
@media (min-width: 720px) { .errore-pagina { padding-top: 56px; } .errore-pagina h1 { font-size: 46px; } }

/* ---------- pagina di testo (istituzionale) ---------- */
.testo-griglia { display: block; }
.testo-nav { margin: 0 0 24px; }
.testo-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.testo-corpo h1 { font-size: 34px; margin-bottom: 14px; }
.testo-corpo h2 { font-size: 26px; margin: 1.6em 0 .5em; }
.segnaposto-legale { border: 2px dashed var(--bordo-campo); background: var(--bianco); border-radius: var(--raggio); padding: 14px 18px 4px; margin: 0 0 1.2em; font-size: 18px; max-width: var(--colonna-testo); }
.segnaposto-legale__t { display: inline-block; font: 700 16px var(--ui); letter-spacing: .06em; text-transform: uppercase; background: var(--ocra-chiaro); color: var(--ocra); padding: 3px 8px; border-radius: 3px; margin-bottom: 8px; }
.testo-corpo > p, .testo-corpo > ul { max-width: var(--colonna-testo); }
@media (min-width: 720px) { .testo-corpo h1 { font-size: 46px; } }
@media (min-width: 1000px) {
  .testo-griglia { display: grid; grid-template-columns: 240px minmax(0, 720px); column-gap: 64px; justify-content: center; }
  .testo-nav ul { flex-direction: column; gap: 0; }
  .testo-nav .chip { border: 0; border-radius: 0; border-left: 4px solid var(--filo); min-height: 52px; }
  .testo-nav .chip[aria-current] { border-left-color: var(--bordeaux); color: var(--bordeaux); }
}
.testo-nav .chip[aria-current] { background: var(--carta-2); }

/* ---------- area Staff ---------- */
.staff-barra { background: var(--carta); border-top: 4px solid var(--blu); border-bottom: 1px solid var(--filo-scuro); }
.staff-barra__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 64px; padding: 6px 0; }
.staff-barra__marchio { display: flex; align-items: center; gap: 12px; font: 700 20px var(--ui); color: var(--inchiostro); text-decoration: none; min-height: 48px; }
.staff-barra__marchio img { width: 40px; height: 40px; }
.staff-barra__marchio small { display: block; font: 400 16px/1.2 var(--ui); color: var(--testo-2); }
.staff-barra__utente a { display: inline-flex; align-items: center; min-height: 44px; }
.no-js .staff-tabs { display: none; }
.staff-barra__utente { margin-left: auto; font: 400 17px var(--ui); color: var(--testo-2); display: flex; align-items: center; gap: 12px; }
.staff-tabs { display: flex; gap: 0; overflow-x: auto; margin: 16px 0 0; border-bottom: 3px solid var(--inchiostro); scrollbar-width: thin; }
.staff-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; background: transparent; border: 0; border-radius: var(--raggio) var(--raggio) 0 0; font: 700 18px var(--ui); color: var(--inchiostro); cursor: pointer; white-space: nowrap; }
.staff-tab:hover { background: var(--carta-2); }
.staff-tab[aria-selected="true"] { background: var(--inchiostro); color: var(--carta); }
.staff-tab .conta { display: inline-block; min-width: 28px; padding: 1px 7px; border-radius: 10px; background: var(--bordeaux); color: #fff; font: 700 16px/1.4 var(--ui); text-align: center; }
.staff-tab[aria-selected="true"] .conta { background: var(--carta); color: var(--inchiostro); }
.staff-nota { font: 400 17px/1.5 var(--ui); color: var(--testo-2); margin: 12px 0 16px; max-width: 80ch; }
.staff-pannello { padding-bottom: 28px; }
.staff-grid { display: grid; gap: 20px; }
.staff-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--filo-scuro); border-radius: var(--raggio); background: var(--bianco); align-self: start; }
.staff-lista li + li { border-top: 1px solid var(--filo); }
.staff-voce { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 12px 14px; min-height: 76px; cursor: pointer; color: var(--inchiostro); font: 400 17px/1.4 var(--ui); border-left: 6px solid transparent; }
.staff-voce:hover { background: var(--carta-2); }
.staff-voce[aria-current="true"] { background: var(--carta-2); border-left-color: var(--bordeaux); }
.staff-voce__t { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 17px; color: var(--testo-2); }
.staff-voce__t b { color: var(--inchiostro); font-size: 18px; }
.staff-voce__x { display: block; margin: 2px 0 6px; font: 400 17px/1.4 var(--serif); color: var(--inchiostro); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tag { display: inline-block; font: 700 16px/1.2 var(--ui); padding: 3px 8px; border-radius: 3px; border: 1px solid var(--bordo-campo); color: var(--inchiostro); background: transparent; }
.tag--bozza { border-color: var(--blu); color: var(--blu); background: var(--blu-chiaro); }
.tag--privacy { border-color: var(--bordeaux); color: var(--bordeaux); background: var(--bordeaux-chiaro); }
.tag--alto { border-color: var(--bordeaux); color: var(--bordeaux); }
.staff-dett { background: var(--bianco); border: 1px solid var(--filo-scuro); border-radius: var(--raggio); padding: 18px 16px 8px; min-width: 0; }
.staff-dett[hidden] { display: none; }
.staff-dett__meta { font: 400 17px/1.45 var(--ui); color: var(--testo-2); margin: 0 0 10px; }
.staff-dett__meta b { color: var(--inchiostro); }
.staff-dett__q { font: 600 21px/1.45 var(--serif); margin: 0 0 16px; overflow-wrap: anywhere; white-space: pre-line; }
.staff-dett__torna { display: inline-flex; margin: 0 0 8px; }
.staff-simili { background: var(--carta-2); border-radius: var(--raggio); padding: 12px 16px 6px; margin: 0 0 18px; }
.staff-simili h3 { font: 700 18px var(--ui); margin: 0 0 4px; }
.staff-simili ul { list-style: none; margin: 0; padding: 0; }
.staff-simili li { padding: 3px 0; border-top: 1px solid var(--filo-scuro); font: 400 17px/1.4 var(--ui); }
.staff-simili li:first-child { border-top: 0; }
.staff-simili a { display: inline-block; font: 600 18px/1.4 var(--serif); padding: 6px 0; }
.staff-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; padding-top: 14px; border-top: 1px solid var(--filo-scuro); }
.staff-azioni .btn { flex: 1 1 auto; }
.staff-nota-azioni { font: 400 16px/1.45 var(--ui); color: var(--testo-2); margin: 0 0 10px; }
.staff-cerca { display: grid; gap: 10px; margin: 0 0 16px; max-width: 640px; }
.staff-tabella-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (min-width: 960px) {
  .staff-grid { grid-template-columns: 360px minmax(0, 1fr); gap: 24px; }
  .staff-lista { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
  .staff-dett { padding: 22px 26px 10px; }
  .staff-dett__torna { display: none; }
  .staff-azioni .btn { flex: 0 0 auto; }
}
.js .staff-pannello[hidden] { display: none; }

/* ---------- stampa: per chi stampa una regola ---------- */
@media print {
  .testata, .piede, .skip, .qa__barra, .blocco-invito, .invito, .toc--lato, .toc--mobile, .modulo, .dom__azioni, .risp-altre > summary { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  a { color: inherit; text-decoration: none; }
  .guida__griglia { display: block; }
  .inbreve, .callout, .esempio, .risp--staff { break-inside: avoid; }
  .risp-altre:not([open]) > .risp-altre__corpo { display: none; }
}

/* ---------- home e pagine: adattamento a schermi larghi ---------- */
@media (min-width: 720px) {
  .apertura { padding: 52px 0 48px; }
  .apertura h1 { font-size: 52px; }
  .apertura__s { font-size: 22px; }
  .ricerca { grid-template-columns: 1fr auto; max-width: 780px; align-items: end; }
  .ricerca .btn { width: auto; min-width: 140px; }
  .blocco { padding: 52px 0; }
  .blocco__t { font-size: 30px; margin-bottom: 24px; }
  .argomenti { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  .argomenti li:nth-last-child(2) { border-bottom: 1px solid var(--filo-scuro); }
  .duecol { grid-template-columns: 1fr 1fr; column-gap: 56px; }
}
@media (min-width: 1000px) {
  .argomenti { grid-template-columns: repeat(3, 1fr); }
  .argomenti li:nth-last-child(3) { border-bottom: 1px solid var(--filo-scuro); }
}
@media (min-width: 900px) { .cerca-riga--solo-piccolo { display: none; } }
@media (max-width: 719px) {
  .staff-tabs { flex-wrap: wrap; gap: 6px; border-bottom: 0; }
  .staff-tab { border: 2px solid var(--bordo-campo); border-radius: var(--raggio); min-height: 48px; }
}
@media (min-width: 720px) { .staff-tabs { flex-wrap: wrap; } }
/* fregio di fine guida: filetto, rombo, filetto (il segno del marchio come punto fermo) */
.fregio { display: flex; align-items: center; gap: 14px; margin: 2.4em 0 0; max-width: var(--colonna-testo); }
.fregio::before, .fregio::after { content: ""; flex: 1; height: 1px; background: var(--filo-scuro); }
.fregio .rombo { width: 12px; height: 12px; transform: rotate(45deg); }



/* ---------- aggiunte per Eleventy ---------- */
/* senza JavaScript i moduli non si aprono: spariscono i pulsanti che li aprono (c'e un avviso nel <noscript>) */
.no-js [data-apri] { display: none; }
.avviso__invio { margin: 6px 0 0; }
/* invito a giocare: il testo "solo PC e tablet" vale anche per un telefono girato in orizzontale (schermo basso e tattile) */
@media (min-width: 720px) and (pointer: coarse) and (max-height: 500px) {
  .solo-schermo-largo { display: none; }
  .solo-telefono { display: block; }
}
/* contenuti importati (Markdown): immagini, tabelle semplici e citazioni senza classi */
.prosa img { display: block; height: auto; max-width: 100%; margin: 1.4em 0; border-radius: var(--raggio); }
.prosa > table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.6em 0; font: 400 18px/1.45 var(--ui); background: var(--bianco); }
.prosa > table th, .prosa > table td { text-align: left; padding: 12px 14px; border: 1px solid var(--filo-scuro); vertical-align: top; }
.prosa > table thead th { background: var(--carta-2); font-weight: 700; }
.prosa blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--filo-scuro); max-width: var(--colonna-testo); }