/* Citazioni: una scena ferma. Preambolo, frase e firma stanno ciascuno in un
   posto alto quanto il piu' lungo di tutti (le sagome invisibili le stampa il
   server), quindi la pagina non si muove ne' mentre si batte ne' quando la
   citazione cambia, a qualunque larghezza (Elind, 19/9). */
.tbp-footer-quotes { box-sizing:border-box; width:min(100%,760px); margin:32px auto; padding:32px clamp(16px,4vw,48px); background:#084828; color:#fff; text-align:center; font-family:inherit; border:0; border-radius:24px; }
.tbp-footer-quotes [hidden] { display:none !important; }
.tbp-footer-quotes .tbp-footer-quotes__face { display:block; width:84px; height:84px; margin:0 auto; object-fit:contain; background:transparent; }
/* Niente riquadro, niente virgolette, niente pastiglie: pagina bianca, il
   testo, la firma, due bottoni (Elind, 19/9: «tienilo bianco, minimal»). */
.tbp-footer-quotes .tbp-footer-quotes__scena { display:grid; gap:18px; justify-items:center; margin:0 auto; padding:8px 0 0; border:0; border-radius:0; background:transparent; }
.tbp-footer-quotes .tbp-footer-quotes__conto { margin:12px 0 0; font-size:12px; line-height:1.4; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.04em; color:inherit; opacity:.55; }
.tbp-footer-quotes .tbp-footer-quotes__quote { width:100%; padding:0; margin:0; border:0; color:inherit; font-style:normal; }
/* Un posto = una cella: dentro stanno tutte le sagome e il testo vivo, uno
   sull'altro. La cella e' alta quanto la sagoma piu' alta. */
.tbp-footer-quotes .tbp-footer-quotes__posto { display:grid; align-items:center; justify-items:center; width:100%; margin:0; }
.tbp-footer-quotes .tbp-footer-quotes__posto > * { grid-area:1 / 1; min-width:0; max-width:100%; text-align:center; }
.tbp-footer-quotes .tbp-footer-quotes__sagoma { visibility:hidden; pointer-events:none; user-select:none; }
.tbp-footer-quotes .tbp-footer-quotes__note { color:inherit; opacity:.82; font-size:13.5px; line-height:1.5; text-wrap:normal; }
/* Niente «balance» sulla frase in battitura: si ricalcola a ogni lettera e le
   parole saltano di riga sotto gli occhi di chi legge. */
.tbp-footer-quotes [data-quote-text] { color:inherit; font-size:clamp(19px,4.9vw,27px); line-height:1.5; font-weight:600; text-wrap:normal; }
.tbp-footer-quotes [data-quote-live]::after { content:""; display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-.16em; background:currentColor; opacity:0; }
.tbp-footer-quotes.is-battendo [data-quote-live]::after { opacity:.75; animation:tbp-citazione-cursore .9s steps(1) infinite; }
@keyframes tbp-citazione-cursore { 50% { opacity:0; } }
.tbp-footer-quotes .tbp-footer-quotes__credit { color:inherit; font-size:14px; line-height:1.5; }
.tbp-footer-quotes [data-quote-author] { font-weight:700; }
.tbp-footer-quotes a[data-quote-source] { color:inherit; text-decoration:underline; text-underline-offset:3px; margin-left:6px; white-space:nowrap; }
/* Due bottoni tondi con il solo segno: valgono in ogni lingua e, stretti al
   centro, non finiscono sotto la scheda di AI Colombo che galleggia a destra. */
.tbp-footer-quotes .tbp-footer-quotes__controls { display:flex; gap:12px; justify-content:center; margin-top:18px; }
.tbp-footer-quotes button { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; min-height:48px; padding:0; margin:0; border:1px solid currentColor; border-radius:50%; background:transparent; color:inherit; font:inherit; line-height:1; cursor:pointer; box-shadow:none; }
.tbp-footer-quotes button svg { display:block; }
.tbp-footer-quotes button[aria-pressed="true"] .tbp-footer-quotes__pausa,
.tbp-footer-quotes button:not([aria-pressed="true"]) .tbp-footer-quotes__riprendi { display:none; }
.tbp-footer-quotes :is(button,a):focus-visible { outline:3px solid #f1cd45; outline-offset:4px; }
.tbp-footer-quotes .screen-reader-text { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: reduce) {
  .tbp-footer-quotes.is-battendo [data-quote-live]::after { animation:none; opacity:0; }
}

/* 12/10 (CEO, analisi UX «Pub P38»): l'intestazione di questa pagina è quella di tutte le pagine interne.
   Qui c'erano regole solo sue («stesso ordine dell'home: logo, claim, menu», in colonna), scritte per
   l'intestazione di settembre: con quella di oggi le tessere del menu uscivano dalla testata e coprivano
   il titolo. Tolte: #masthead non si tocca più da questo foglio. */
html body.citazioni #main {
  /* Il tema, sotto gli 850 px, da' a #main «width: calc(100% - 20px)» e lo
     centra con i margini automatici. Qui i margini sono a zero, quindi senza
     la larghezza piena tutta la pagina stava 10 px a sinistra, con una striscia
     vuota a destra (Elind, 19/9). */
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
}
html body.citazioni .tbp-citations-page {
  box-sizing: border-box;
  min-height: min(460px, calc(100vh - 170px));
  display: grid;
  place-items: center;
  padding: clamp(20px, 3vh, 32px) 16px;
  background: #fff !important;
}
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes {
  width: min(100%, 760px);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #084828;
}
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes :is(.tbp-footer-quotes__heading,.tbp-footer-quotes__quote,[data-quote-text],.tbp-footer-quotes__credit,.tbp-footer-quotes__note,.tbp-footer-quotes__conto,a[data-quote-source]) { color: #084828 !important; -webkit-text-fill-color: currentColor !important; }
/* Il titolo: il tema lo portava a 34 px con le lettere spaziate, piu' grosso
   della citazione stessa. E' il nome della pagina, non il suo contenuto. */
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__heading {
  margin: 6px 0 16px !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}
/* Sul telefono lo spazio e' poco: meno aria sopra, volto piu' piccolo. Con le
   misure di prima i due bottoni finivano sotto la barra dell'app al primo
   sguardo (visto sul simulatore iPhone, 402x874). */
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__colombo {
  display: inline-block;
  border-radius: 50%;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__colombo:focus-visible { outline: 3px solid #b18a17; outline-offset: 4px; }
@media (max-width: 849px) {
  html body.citazioni .tbp-citations-page { padding-top: 4px !important; padding-bottom: 20px !important; min-height: 0 !important; }
  html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__face { width: 60px; height: 60px; }
  html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__heading { margin: 2px 0 10px !important; font-size: 20px !important; }
  html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__scena { gap: 14px; padding: 6px 4px 0; }
  html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__controls { margin-top: 12px; }
  /* La scheda di AI Colombo galleggia in basso a destra, proprio sulla firma
     della citazione: qui si nasconde finche' la chat e' chiusa. Colombo resta
     a portata di dito, e' il volto in cima alla pagina. */
  html body.citazioni .tbp-colombo-chat:not(.is-open) :is(.tbp-colombo-chat__launcher-wrap, .tbp-colombo-chat__launcher, .tbp-colombo-chat__dismiss, .tbp-colombo-chat__teaser) {
    display: none !important;
  }
}
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes :is(.tbp-footer-quotes__note, [data-quote-text], .tbp-footer-quotes__credit) { margin: 0 !important; }
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes [data-quote-text] { font-size: clamp(19px, 4.9vw, 27px) !important; line-height: 1.5 !important; font-weight: 600 !important; }
/* Tre misure secondo la lunghezza: il motto sta grande, il passo lungo piu'
   piccolo e con l'interlinea da lettura. La scena resta alta uguale. */
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__t--corta { font-size: clamp(23px, 6vw, 32px); line-height: 1.35; font-weight: 700; }
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__t--media { font-size: clamp(18px, 4.7vw, 25px); line-height: 1.45; }
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__t--lunga { font-size: clamp(15px, 3.95vw, 20px); line-height: 1.55; font-weight: 500; }
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__note { font-size: 13.5px !important; line-height: 1.5 !important; }
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__credit { font-size: 14px !important; line-height: 1.5 !important; }
/* I bottoni del tema sono rettangoli pieni in maiuscolo: qui sono due tondi. */
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__controls button {
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1.5px solid #084828 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #084828 !important;
  box-shadow: none !important;
  line-height: 1 !important;
}
html body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__controls button:hover {
  background: #084828 !important;
  color: #fff !important;
}
html body.citazioni:has(.tbp-citations-page) .tbp-mega-footer { margin-top: 0 !important; }

/* Tema scuro: il nero neutro del resto del sito, non piu' il verde scuro. */
html[data-tbp-theme="dark"] body.citazioni #main,
html[data-tbp-theme="dark"] body.citazioni .tbp-citations-page { background:var(--tbp-night-surface, #141414) !important; }
html[data-tbp-theme="dark"] body.citazioni #main .tbp-citations-page .tbp-footer-quotes :is(.tbp-footer-quotes__heading,.tbp-footer-quotes__quote,[data-quote-text],.tbp-footer-quotes__credit,.tbp-footer-quotes__note,.tbp-footer-quotes__conto,a[data-quote-source]) { color:var(--tbp-night-text, #ededed) !important; }
html[data-tbp-theme="dark"] body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__controls button { border-color:var(--tbp-night-text, #ededed) !important; color:var(--tbp-night-text, #ededed) !important; background:transparent !important; }
html[data-tbp-theme="dark"] body.citazioni #main .tbp-citations-page .tbp-footer-quotes .tbp-footer-quotes__controls button:hover { background:var(--tbp-night-text, #ededed) !important; color:#141414 !important; }