/* ==========================================================================
   Il Laboratorio de Il Bosone
   La veste grafica riprende ilbosone.com (tema Jannah): stesse gradienti di
   header e barra di navigazione, stessa palette del footer, stesso stack di
   font di sistema, stesso comportamento del cambio aspetto chiaro/scuro.
   ========================================================================== */

:root {
  /* Colori ripresi dal CSS di ilbosone.com */
  --bos-header-grad: linear-gradient(90deg, #ececed, #abbac5);
  --bos-nav-grad: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
  --bos-footer: #4c5771;
  --bos-footer-box: linear-gradient(135deg, #040786, #4c5771);
  --bos-siteinfo: #3c4258;
  --bos-blue: #040786;
  --bos-link: #004e99;

  /* Colori del logo "il bosone" */
  --bos-azure: #1668f0;
  --bos-yellow: #f5c800;
  --bos-green: #00e344;

  --bos-bg: #f7f7f7;
  --bos-surface: #ffffff;
  --bos-border: #e5e6e9;
  --bos-text: #2c2f34;
  --bos-muted: #6d7178;
  --bos-heading: #101114;
  --bos-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  --bos-radius: 4px;

  --bos-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", "Open Sans", Arial, sans-serif;
}

[data-skin="dark"] {
  --bos-bg: #1f2024;
  --bos-surface: #27282c;
  --bos-border: #35363b;
  --bos-text: #c6c8cc;
  --bos-muted: #9a9da3;
  --bos-heading: #ffffff;
  --bos-link: #7fb4e8;
  --bos-header-grad: linear-gradient(90deg, #2b2c31, #3c4258);
  --bos-nav-grad: linear-gradient(135deg, #3c4258 0%, #2b2c31 100%);
  --bos-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

*, *::before, *::after { box-sizing: border-box; }

/* L'attributo hidden vale display:none nel foglio del browser, quindi
   qualunque display dichiarato qui lo batte. Senza questa riga il pulsante
   "Domanda successiva", che nasce con hidden, si vedeva come un rettangolo
   blu vuoto sotto le risposte. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bos-bg);
  color: var(--bos-text);
  font-family: var(--bos-font);
  font-size: 15px;
  line-height: 1.6;
  /* Una parola piu' larga della colonna (un titolo senza spazi, una URL in
     chiaro) su uno schermo da 320px produce scorrimento orizzontale su tutta
     la pagina. Questa riga chiude la categoria di problema in un colpo. */
  overflow-wrap: break-word;
}

a { color: var(--bos-link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  color: var(--bos-heading);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .5em;
}

img { max-width: 100%; height: auto; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* --------------------------------------------------------------- Header -- */

#theme-header,
#site-header {
  background: var(--bos-header-grad);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 104px;
  position: relative;
}

#logo img { display: block; max-height: 82px; width: auto; }

.header-icon-button {
  display: none;
  background: none;
  border: 0;
  padding: 6px;
  color: #2c2f34;
  cursor: pointer;
  line-height: 0;
}

.header-icon-button svg { width: 22px; height: 22px; fill: currentColor; }

[data-skin="dark"] .header-icon-button { color: #e8e9ec; }

/* ----------------------------------------------------------- Main nav --- */

#main-nav {
  background: var(--bos-nav-grad);
  border-top: 1px solid rgba(0, 0, 0, .06);
  position: sticky;
  top: 0;
  z-index: 40;
}

.main-menu-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.main-menu {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.main-menu > li { position: relative; }

.main-menu > li > a {
  display: block;
  padding: 13px 14px;
  color: #14161a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.main-menu > li > a:hover { color: var(--bos-blue); text-decoration: none; }

.main-menu > li.is-current > a {
  color: #fff;
  background: var(--bos-blue);
}

[data-skin="dark"] .main-menu > li > a { color: #e8e9ec; }
[data-skin="dark"] .main-menu > li > a:hover { color: #fff; }

.main-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--bos-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}

[data-skin="dark"] .main-menu .sub-menu { background: #27282c; }

.main-menu > li:hover > .sub-menu,
.main-menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-menu .sub-menu a {
  display: block;
  padding: 8px 16px;
  color: var(--bos-text);
  font-size: 13px;
}

.main-menu .sub-menu a:hover { color: var(--bos-blue); text-decoration: none; }

.nav-components {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.nav-components a,
.nav-components button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: #14161a;
  cursor: pointer;
}

[data-skin="dark"] .nav-components a,
[data-skin="dark"] .nav-components button { color: #e8e9ec; }

.nav-components svg { width: 16px; height: 16px; fill: currentColor; }
.nav-components a:hover { color: var(--bos-blue); }

.nav-search { display: flex; align-items: center; }

.nav-search input {
  width: 130px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 3px 0 0 3px;
  background: rgba(255, 255, 255, .8);
  color: #14161a;
  font-family: inherit;
  font-size: 12px;
}

.nav-search button {
  width: 32px;
  height: 30px;
  border-radius: 0 3px 3px 0;
  background: var(--bos-blue);
  color: #fff;
}

.nav-search button:hover { background: #0a0fb8; }

/* ------------------------------------------------------------- Content -- */

main { padding: 26px 0 40px; }

.page-head { margin-bottom: 22px; }

.breadcrumb {
  margin-bottom: 10px;
  color: var(--bos-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.breadcrumb a { color: var(--bos-muted); }

.page-head h1 { font-size: 30px; }

.page-head p.lead {
  margin: 0;
  max-width: 70ch;
  color: var(--bos-muted);
  font-size: 16px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.section-title::before {
  content: "";
  width: 4px;
  height: 18px;
  background: var(--bos-blue);
}

.card {
  background: var(--bos-surface);
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  box-shadow: var(--bos-shadow);
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 18px;
}

.tool-card { display: flex; flex-direction: column; padding: 20px; }

.tool-card .tool-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 2px;
  background: var(--bos-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.badge.badge-soft {
  background: rgba(4, 7, 134, .08);
  color: var(--bos-blue);
}

[data-skin="dark"] .badge.badge-soft { background: rgba(255, 255, 255, .1); color: #cfd3ff; }

.tool-card h3 { font-size: 19px; margin-bottom: 8px; }
.tool-card h3 a { color: inherit; }
.tool-card p { margin: 0 0 18px; color: var(--bos-muted); }
.tool-card .tool-foot { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.tool-card .tool-count { color: var(--bos-muted); font-size: 12px; }

.button {
  /* inline-flex + min-height: il bersaglio tattile arriva a 44px, la soglia
     sotto la quale Lighthouse segnala i tocchi troppo piccoli. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 3px;
  background: var(--bos-blue);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}

.button:hover { background: #0a0fb8; color: #fff; text-decoration: none; }

/* Un SVG in linea senza width e height vale 300x150: le frecce degli inviti
   vanno misurate a mano. */
.button svg { width: 14px; height: 14px; flex: none; margin-left: 2px; }

.button.button-ghost {
  background: transparent;
  border: 2px solid var(--bos-blue);
  color: var(--bos-blue);
  padding: 8px 16px;
}

.button.button-ghost:hover { background: var(--bos-blue); color: #fff; }

[data-skin="dark"] .button.button-ghost { border-color: #8f93ff; color: #b6b9ff; }

.button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------- Quiz -- */

.quiz-shell { max-width: 780px; margin: 0 auto; padding: 26px; }

.quiz-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--bos-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* La barra si riempie nel momento della risposta, non al cambio di domanda:
   e' il gesto che da' la sensazione di avanzare. scaleX invece di width per
   restare sul compositor. */
.quiz-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bos-border);
  overflow: hidden;
  margin-bottom: 22px;
}

.quiz-bar span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bos-blue), var(--bos-azure));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.quiz-question { font-size: 22px; margin-bottom: 20px; }

.quiz-options { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }

.quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--bos-border);
  border-radius: 3px;
  background: var(--bos-surface);
  color: var(--bos-text);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.quiz-option:hover:not(:disabled) {
  border-color: var(--bos-azure);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .07);
}

.quiz-option:active:not(:disabled) { transform: translateY(0); box-shadow: none; }

/* Dopo la risposta le opzioni che non sono ne' quella scelta ne' quella giusta
   sfumano: l'occhio va dove serve invece di rileggere quattro righe uguali. */
.quiz-option:disabled:not(.is-correct):not(.is-wrong):not(.is-chosen) { opacity: .5; }

.quiz-option .marker {
  transition: background .18s ease, color .18s ease;
  flex: 0 0 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(4, 7, 134, .08);
  color: var(--bos-blue);
  font-size: 12px;
  font-weight: 700;
}

[data-skin="dark"] .quiz-option .marker { background: rgba(255, 255, 255, .1); color: #cfd3ff; }

.quiz-option.is-correct { border-color: #0aa84f; background: rgba(10, 168, 79, .08); }
.quiz-option.is-correct .marker { background: #0aa84f; color: #fff; }
.quiz-option.is-wrong { border-color: #d13b3b; background: rgba(209, 59, 59, .08); }
.quiz-option.is-wrong .marker { background: #d13b3b; color: #fff; }
.quiz-option:disabled { cursor: default; }

.quiz-option.is-correct .marker,
.quiz-option.is-wrong .marker,
.quiz-option.is-chosen .marker { animation: bos-pop .3s ease-out; }

.quiz-feedback {
  border-left: 4px solid var(--bos-azure);
  padding: 14px 16px;
  margin-bottom: 20px;
  background: rgba(22, 104, 240, .06);
  border-radius: 0 3px 3px 0;
}

.quiz-feedback strong { color: var(--bos-heading); }
.quiz-feedback .source { display: block; margin-top: 12px; }

/* La fonte era testo grigio da 12px sotto la spiegazione: nessuno la vedeva.
   Ora e' l'unico elemento cliccabile del riquadro, con la freccia che scorre. */
.quiz-feedback .source a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bos-azure);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}

.quiz-feedback .source a svg { width: 13px; height: 13px; flex: none; transition: transform .15s ease; }
.quiz-feedback .source a:hover,
.quiz-feedback .source a:focus-visible { background: var(--bos-blue); color: #fff; text-decoration: none; }
.quiz-feedback .source a:hover svg,
.quiz-feedback .source a:focus-visible svg { transform: translateX(3px); }

.quiz-actions { display: flex; align-items: center; gap: 12px; }

/* Serie di risposte giuste: compare dalla seconda di fila e sparisce al primo
   errore. E' il richiamo piu' economico che c'e' per far arrivare qualcuno
   fino all'ultima domanda. */
.quiz-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 10px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8a00, #ff3d00);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  animation: bos-pop .32s ease-out;
}

.quiz-streak svg { width: 11px; height: 11px; flex: none; fill: currentColor; }

/* Anello del punteggio: il numero secco diceva quanto, l'anello dice quanto
   su quanto senza far leggere una frazione. */
.score-ring { display: grid; place-items: center; margin: 0 auto 8px; }
.score-ring > * { grid-area: 1 / 1; }
.score-ring svg { display: block; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.score-ring-track { stroke: var(--bos-border); }

.score-ring-fill {
  stroke: var(--bos-azure);
  /* stroke-dashoffset non gira sul compositor, ma non produce layout: un solo
     elemento per 900ms, e questo e' il momento in cui si decide se rifare il
     quiz o andare a leggere. */
  transition: stroke-dashoffset .9s cubic-bezier(.3, 0, .2, 1);
}

.score-ring-fill.is-high { stroke: #0aa84f; }
.score-ring-fill.is-low { stroke: #c47b00; }

.quiz-score { text-align: center; padding: 10px 0 4px; }
.quiz-score .score-value { font-size: 52px; font-weight: 800; color: var(--bos-blue); line-height: 1; }
.score-ring .score-value { margin: 0; font-size: 40px; }
.score-ring .score-total { font-size: 19px; font-weight: 700; color: var(--bos-muted); }
[data-skin="dark"] .quiz-score .score-value { color: #b6b9ff; }
.quiz-score .score-label { color: var(--bos-muted); font-size: 14px; }
.quiz-score h2 { margin-top: 18px; font-size: 24px; }

.leaderboard { margin: 26px 0 0; padding: 0; list-style: none; }
.leaderboard li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bos-border);
  font-size: 14px;
}
.leaderboard li:last-child { border-bottom: 0; }
.leaderboard .rank { width: 24px; color: var(--bos-muted); font-weight: 700; }
.leaderboard .pts { margin-left: auto; font-weight: 700; color: var(--bos-heading); }

.notice {
  padding: 16px 18px;
  border: 1px dashed var(--bos-border);
  border-radius: 3px;
  color: var(--bos-muted);
  text-align: center;
}

.error-page { text-align: center; padding: 60px 0; }
.error-page .code { font-size: 76px; font-weight: 800; color: var(--bos-blue); line-height: 1; }
[data-skin="dark"] .error-page .code { color: #b6b9ff; }
.error-page h1 { font-size: 32px; margin-top: 14px; }
.error-page p { color: var(--bos-muted); max-width: 52ch; margin: 0 auto 26px; }
.error-page .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.skeleton {
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bos-border) 25%, var(--bos-surface) 50%, var(--bos-border) 75%);
  background-size: 200% 100%;
  animation: bos-shimmer 1.2s infinite;
}

@keyframes bos-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* -------------------------------------------------------------- Footer -- */

#footer,
#site-footer {
  background-color: var(--bos-footer);
  color: #d3d7e0;
  padding: 40px 0 30px;
}

.footer-widgets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.footer-about { text-align: center; }
.footer-about img { width: 50px; margin: 0 auto 10px; display: block; }
.footer-about p { margin: 0; color: #fff; font-size: 14px; }
.footer-about em { color: #c3c8d4; font-style: italic; }

.footer-box {
  padding: 20px;
  background: var(--bos-footer-box);
  text-align: center;
}

.footer-box h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .6px;
}

.footer-box ul { margin: 0; padding: 0; list-style: none; }
.footer-box li + li { margin-top: 8px; }
.footer-box a { color: #fff; font-size: 14px; font-weight: 600; }
.footer-box a:hover { color: var(--bos-yellow); text-decoration: none; }

#site-info {
  background-color: var(--bos-siteinfo);
  padding: 16px 0;
}

.site-info-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.copyright-text { color: #b9bdc9; font-size: 10px; margin: 0; }

.social-icons { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.social-icons a:hover { background: var(--bos-blue); }
.social-icons svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------------------------------------------------------- Responsive -- */

@media (max-width: 991px) {
  .logo-row { justify-content: space-between; min-height: 84px; }
  #logo img { max-height: 58px; }
  .header-icon-button { display: inline-block; }

  #main-nav { position: static; }
  .main-menu-wrapper { flex-direction: column; align-items: stretch; padding: 0; }

  .main-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 6px 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
  }

  .main-menu.is-open { display: flex; }
  .main-menu > li > a { padding: 11px 4px; }
  .main-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0 0 6px 18px;
  }

  .nav-components { margin: 0 0 0 -4px; padding: 6px 0 10px; }
  .nav-search input { width: 100%; }
  .nav-search { flex: 1; }

  .footer-widgets { grid-template-columns: repeat(2, 1fr); }
  .page-head h1 { font-size: 25px; }
  .quiz-shell { padding: 20px; }
  .quiz-question { font-size: 19px; }
}

@media (max-width: 560px) {
  .footer-widgets { grid-template-columns: 1fr; }
  .site-info-inner { justify-content: center; text-align: center; }
}

/* ==========================================================================
   Laboratorio: catalogo, account, strumenti interattivi
   ========================================================================== */

.page-lead {
  margin: 0;
  max-width: 70ch;
  color: var(--bos-muted);
  font-size: 16px;
}

.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }

.hint { color: var(--bos-muted); font-size: 13px; line-height: 1.6; }
.hint a { color: var(--bos-link); }
[data-skin="dark"] .hint a { color: #9db8ff; }

/* Badge per famiglia di strumenti: colori dal logo. */
.badge-quiz { background: var(--bos-blue); }
.badge-calcolatore { background: var(--bos-azure); }
.badge-generatore { background: #8a2be2; }
.badge-test { background: #0aa84f; }
.badge-esplorazione { background: #c47b00; }

/* --- catalogo ------------------------------------------------------------ */

.catalogue-block { margin-bottom: 40px; }
.catalogue-block:last-child { margin-bottom: 0; }
.catalogue-block .section-title { margin-bottom: 14px; }
.section-count { margin-left: 4px; color: var(--bos-muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.section-more { margin-left: auto; font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* --- pannelli degli strumenti -------------------------------------------- */

.tool-shell { display: grid; gap: 22px; }

.tool-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: var(--bos-surface);
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  box-shadow: var(--bos-shadow);
}

.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 700; color: var(--bos-heading); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  background: var(--bos-bg);
  color: var(--bos-text);
  font-family: inherit;
  font-size: 15px;
}

.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid var(--bos-azure); outline-offset: 1px; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }

.check-inline { display: flex; align-items: center; gap: 8px; font-size: 14px; }

.check-group { border: 0; margin: 0; padding: 0; }
.check-group legend {
  padding: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--bos-heading);
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--bos-border);
}

.check-row input { margin-top: 3px; }
.check-main { display: grid; gap: 2px; flex: 1; font-size: 14px; }
.check-note { color: var(--bos-muted); font-size: 12px; }
.check-cost { font-weight: 700; white-space: nowrap; color: var(--bos-heading); }

/* --- risultati numerici -------------------------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stat {
  padding: 16px;
  background: var(--bos-surface);
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  text-align: center;
}

.stat-value { display: block; font-size: 26px; font-weight: 800; color: var(--bos-blue); line-height: 1.2; }
[data-skin="dark"] .stat-value { color: #b6b9ff; }
.stat-label { display: block; margin-top: 4px; color: var(--bos-muted); font-size: 12px; }

.table-wrap { overflow-x: auto; margin-bottom: 18px; }

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th,
.data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--bos-border); }
.data-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--bos-muted);
  white-space: nowrap;
}
.data-table tbody th { font-weight: 700; color: var(--bos-heading); }
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--bos-link);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.link-button:hover { text-decoration: underline; }
[data-skin="dark"] .link-button { color: #9db8ff; }

/* --- generatori ---------------------------------------------------------- */

.generated { padding: 22px; }
.generated h2 { font-size: 22px; margin-bottom: 12px; }
.generated-main { font-size: 18px; line-height: 1.6; margin: 0 0 14px; color: var(--bos-heading); }
.generated-side { margin: 0 0 10px; font-size: 14px; color: var(--bos-muted); }
.generated-side strong { color: var(--bos-heading); }
.generated-debunk summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--bos-link); }
.generated-debunk p { margin: 8px 0 0; font-size: 14px; color: var(--bos-muted); }

.name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.name-grid li {
  display: grid;
  gap: 2px;
  padding: 14px;
  background: var(--bos-surface);
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
}

.name-grid strong { font-size: 17px; color: var(--bos-heading); }
.name-grid span { font-size: 13px; color: var(--bos-muted); }

.prompt-box {
  margin: 0;
  padding: 18px;
  background: var(--bos-bg);
  border-bottom: 1px solid var(--bos-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.prompt-box + .quiz-actions { padding: 14px 18px; }

/* --- cronologia ---------------------------------------------------------- */

.timeline { margin: 0 0 18px; padding: 0; list-style: none; }

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bos-border);
}

.timeline-year {
  flex: 0 0 62px;
  font-size: 18px;
  font-weight: 800;
  color: var(--bos-blue);
}
[data-skin="dark"] .timeline-year { color: #b6b9ff; }

.timeline-body { display: grid; gap: 3px; flex: 1; min-width: 0; }
.timeline-body strong { font-size: 16px; color: var(--bos-heading); }
.timeline-meta { font-size: 12px; color: var(--bos-muted); font-weight: 700; }

.timeline-shift {
  flex: 0 0 auto;
  align-self: center;
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(22, 104, 240, .1);
  color: var(--bos-azure);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.toggle-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- mappa della criptozoologia ------------------------------------------ */

.crypto-map {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  margin-bottom: 20px;
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  /* Il planisfero e' un SVG disegnato da zero (scripts/generate-art.mjs) nella
     stessa proiezione equirettangolare con cui il modulo posiziona i punti:
     x = (lon + 180) / 360, y = (90 - lat) / 180. Con aspect-ratio 2/1 e
     background-size 100% 100% i punti cadono esattamente sulle terre emerse. */
  background: #eaf1f9 url("../img/mappa-mondo.svg") center / 100% 100% no-repeat;
  overflow: hidden;
}

[data-skin="dark"] .crypto-map {
  background: #1c1e24 url("../img/mappa-mondo-scura.svg") center / 100% 100% no-repeat;
}

.crypto-point {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--bos-blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: transform .15s ease;
}

.crypto-point:hover,
.crypto-point:focus-visible { transform: scale(1.35); z-index: 2; }
.crypto-point.is-active { transform: scale(1.5); z-index: 3; border-color: var(--bos-yellow); }

/* Gli stessi sei colori valgono per i punti sulla mappa e per i quadratini
   della legenda: prima i colori non erano spiegati da nessuna parte. */
.crypto-point.is-debunked, .crypto-key.is-debunked { background: #d13b3b; }
.crypto-point.is-explained, .crypto-key.is-explained { background: var(--bos-azure); }
.crypto-point.is-open, .crypto-key.is-open { background: #6d7178; }
.crypto-point.is-true, .crypto-key.is-true { background: #0aa84f; }
.crypto-point.is-extinct, .crypto-key.is-extinct { background: #8a2be2; }
.crypto-point.is-historic, .crypto-key.is-historic { background: #c47b00; }

.crypto-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: -8px 0 20px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--bos-muted);
}

.crypto-legend li { display: flex; align-items: center; gap: 7px; }

.crypto-key {
  width: 11px;
  height: 11px;
  border: 1px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.crypto-detail { padding: 22px; margin-bottom: 20px; }
.crypto-detail h2 { font-size: 22px; margin: 10px 0 4px; }
.crypto-meta { margin: 0 0 12px; color: var(--bos-muted); font-size: 13px; font-weight: 700; }
.crypto-detail p { margin: 0; line-height: 1.7; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* --- salvataggio dei risultati ------------------------------------------- */

.save-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}

.save-note { margin: 0; }

/* --- condivisione dei risultati ------------------------------------------
   Ogni bottone porta il colore della propria rete: e' l'unico segnale che si
   legge senza leggere, e su una riga di undici voci conta piu' dell'etichetta.
   Il testo e' bianco su tutti tranne "Condividi", che sta sul giallo del
   marchio e ha bisogno del blu per restare leggibile.
   ------------------------------------------------------------------------- */

.tool-footbar { display: grid; gap: 18px; }

.share-box {
  padding: 16px 18px;
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  background: var(--bos-surface);
}

.share-title {
  margin: 0 0 12px;
  color: var(--bos-heading);
  font-size: 14px;
  font-weight: 700;
}

.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 36px di altezza con 8px di gap: la riga resta compatta e i bersagli
     restano abbastanza distanti da non far sbagliare il tocco. */
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 3px;
  background: var(--bos-footer);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}

.share-btn svg { flex: none; fill: currentColor; }
.share-btn:hover { filter: brightness(1.12); }
.share-btn:active { transform: translateY(1px); }
.share-btn:focus-visible { outline: 2px solid var(--bos-azure); outline-offset: 2px; }

.share-native { background: var(--bos-yellow); color: var(--bos-blue); }
.share-whatsapp { background: #1ebe5d; }
.share-facebook { background: #1877f2; }
.share-messenger { background: #0084ff; }
.share-x { background: #16181c; }
.share-telegram { background: #229ed9; }
.share-threads { background: #16181c; }
.share-reddit { background: #ff4500; }
.share-linkedin { background: #0a66c2; }
.share-email { background: var(--bos-footer); }
.share-copy { background: var(--bos-blue); }

.share-feedback:empty { display: none; }
.share-feedback { margin: 10px 0 0; }

/* Sotto i 480px le etichette mangiano tre righe: restano le sole icone, con
   il nome della rete nel title e nel tooltip di sistema. */
@media (max-width: 480px) {
  .share-btn { padding: 0 11px; }
  .share-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .share-btn svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .share-btn { transition: none; }
  .share-btn:active { transform: none; }
}

/* --- test: esito e distribuzione ----------------------------------------- */

.outcome-title { font-size: 26px; margin: 6px 0 10px; color: var(--bos-blue); }
[data-skin="dark"] .outcome-title { color: #b6b9ff; }
.outcome-text { max-width: 58ch; margin: 0 auto 6px; color: var(--bos-muted); line-height: 1.7; }

.quiz-option.is-chosen { border-color: var(--bos-azure); background: rgba(22, 104, 240, .08); }
.quiz-option.is-chosen .marker { background: var(--bos-azure); color: #fff; }

.distribution { margin: 20px 0 0; padding: 0; list-style: none; text-align: left; }

.distribution li {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
}

.distribution .bar { height: 8px; border-radius: 4px; background: var(--bos-border); overflow: hidden; }
.distribution .bar i { display: block; height: 100%; background: var(--bos-azure); }
.distribution .pts { font-weight: 700; color: var(--bos-heading); }

.notice-good { border-color: #0aa84f; background: rgba(10, 168, 79, .08); }

/* --- accesso e area del lettore ------------------------------------------ */

.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(4, 7, 134, .08);
  color: var(--bos-blue);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* .nav-components a impone 30x30 a tutti i collegamenti della barra e vince
   per specificita': la pastiglia veniva ridotta a un quadratino con gli
   angoli tondi e il testo che ne usciva, e al passaggio del mouse il fondo
   blu si vedeva come un pallino sopra la scritta. */
.nav-components .account-chip {
  width: auto;
  height: auto;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
}

.nav-components .account-chip svg { width: 14px; height: 14px; }

/* Anche il colore va riportato dentro .nav-components: la regola generica
   .nav-components a:hover ha un selettore piu' specifico e altrimenti
   rimetterebbe il testo blu su fondo blu. */
.nav-components .account-chip:hover,
.nav-components .account-chip:focus-visible {
  background: var(--bos-blue);
  color: #fff;
  text-decoration: none;
}

[data-skin="dark"] .nav-components .account-chip:hover,
[data-skin="dark"] .nav-components .account-chip:focus-visible {
  background: var(--bos-azure);
  color: #fff;
}
[data-skin="dark"] .account-chip { background: rgba(255, 255, 255, .12); color: #cfd3ff; }

.nav-account { display: flex; align-items: center; }

.auth-card { max-width: 480px; margin: 0 auto; padding: 26px; }
.auth-card h1 { font-size: 24px; margin-bottom: 14px; }

.auth-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--bos-border); }

.auth-tab {
  padding: 8px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--bos-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.auth-tab.is-active { color: var(--bos-blue); border-bottom-color: var(--bos-blue); }
[data-skin="dark"] .auth-tab.is-active { color: #b6b9ff; border-bottom-color: #b6b9ff; }

.auth-form { display: grid; gap: 14px; }
.auth-form .button { justify-self: start; }

.auth-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid #d13b3b;
  border-radius: var(--bos-radius);
  background: rgba(209, 59, 59, .08);
  color: #a72a2a;
  font-size: 14px;
}
[data-skin="dark"] .auth-error { color: #ffb4b4; }

.account-block { padding: 24px; margin-bottom: 22px; }
.account-block h1 { font-size: 26px; margin-bottom: 4px; }
.account-block form { display: grid; gap: 14px; max-width: 460px; }

.saved-list { margin: 0; padding: 0; list-style: none; }

.saved-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bos-border);
}

.saved-item:last-child { border-bottom: 0; }
.saved-main { flex: 1; min-width: 0; }
.saved-main strong { color: var(--bos-heading); }
.saved-main p { margin: 4px 0 0; font-size: 14px; color: var(--bos-muted); }

.board-block { padding: 24px; margin-bottom: 22px; }
.board-block h3 { font-size: 18px; margin-bottom: 4px; }
.board-block h3 a { color: inherit; }
.board-block .leaderboard { margin-top: 12px; }

@media (max-width: 700px) {
  .stat-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .stat-value { font-size: 21px; }
  .timeline-item { flex-wrap: wrap; }
  .timeline-shift { align-self: flex-start; }
  .distribution li { grid-template-columns: 1fr auto; }
  .distribution .bar { grid-column: 1 / -1; }
  .check-row { flex-wrap: wrap; }
  .check-cost { margin-left: auto; }
}

/* ==========================================================================
   Pagine statiche degli strumenti: testo di contesto e articoli correlati.
   ========================================================================== */

/* Due colonne da 992px in su: lo strumento e i suoi inviti alla lettura a
   sinistra, il testo di contesto in una scheda a fianco. L'aside sta DOPO
   la colonna principale nel documento e viene spostato in seconda colonna
   solo dal media query: cosi' su telefono l'impilamento segue l'ordine del
   documento (strumento, inviti, testo) senza riordini artificiali.
   Nessun position: sticky sul lato, perche' un elemento appiccicato piu'
   alto della finestra si porta fuori vista la propria parte inferiore. */
.tool-layout {
  display: grid;
  gap: 26px;
  align-items: start;
}

.tool-main,
.tool-side { min-width: 0; }

/* A colonna unica il tetto sta sulla colonna e non sulla shell, cosi' gli
   inviti alla lettura restano allineati allo strumento invece di sporgere
   ai lati. A due colonne la larghezza la decide la griglia. */
.tool-main { max-width: 820px; margin: 0 auto; }
.tool-main .quiz-shell { max-width: none; margin: 0; }

@media (min-width: 992px) {
  .tool-layout { grid-template-columns: minmax(0, 1fr) 330px; }
  .tool-main { max-width: none; margin: 0; }
}

.tool-about {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  background: var(--bos-surface);
  box-shadow: var(--bos-shadow);
  color: var(--bos-text);
}

.about-title {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.35;
  color: var(--bos-heading);
}

.tool-about p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; }
.tool-about p:last-child { margin-bottom: 0; }

/* Elenco semplice a righe separate: lo usa il generatore "cosa guardare"
   per le alternative, che sono titoli e non collegamenti. */
.stack-list { margin: 12px 0 0; padding: 0; list-style: none; }

.stack-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--bos-border);
  font-size: 14px;
  line-height: 1.6;
  color: var(--bos-muted);
}

.stack-list li:last-child { border-bottom: 0; }
.stack-list strong { color: var(--bos-heading); }

/* --- inviti alla lettura -------------------------------------------------
   Prima gli articoli correlati erano un elenco puntato grigio in fondo alla
   pagina: il posto e l'aspetto di una nota a pie' di pagina. Sono il motivo
   per cui il Laboratorio esiste, quindi ora sono un pannello a se' con
   schede, occhiello e un invito esplicito a leggere. Le animazioni restano
   su transform e box-shadow: nessuna riga di layout viene ricalcolata.
   ------------------------------------------------------------------------ */

.read-next {
  margin: 34px 0 0;
  padding: 24px;
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  background:
    linear-gradient(180deg, rgba(22, 104, 240, .08), rgba(22, 104, 240, 0) 120px),
    var(--bos-surface);
  box-shadow: var(--bos-shadow);
}

[data-skin="dark"] .read-next {
  background:
    linear-gradient(180deg, rgba(22, 104, 240, .16), rgba(22, 104, 240, 0) 120px),
    var(--bos-surface);
}

.read-next-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--bos-azure);
}

.read-next-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.read-next-title { margin: 0 0 6px; font-size: 22px; line-height: 1.3; color: var(--bos-heading); }
.read-next-lead { margin: 0 0 18px; max-width: 60ch; font-size: 14px; color: var(--bos-muted); }

.read-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.read-card { display: flex; }

.read-card > a {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  width: 100%;
  padding: 15px 16px 13px;
  border: 1px solid var(--bos-border);
  border-left: 3px solid var(--bos-azure);
  border-radius: var(--bos-radius);
  background: var(--bos-bg);
  color: var(--bos-heading);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.read-card > a:hover,
.read-card > a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  border-color: var(--bos-azure);
  color: var(--bos-heading);
  text-decoration: none;
}

.read-card-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--bos-muted);
}

.read-card-title { font-size: 15px; font-weight: 700; line-height: 1.45; }

.read-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--bos-azure);
}

.read-card-cta svg { width: 13px; height: 13px; flex: none; transition: transform .16s ease; }
.read-card > a:hover .read-card-cta svg,
.read-card > a:focus-visible .read-card-cta svg { transform: translateX(4px); }

.read-next-more { margin: 18px 0 0; }

/* Gli inviti alla lettura portano fuori, verso gli articoli. Questa striscia
   porta dentro: tre altri strumenti del Laboratorio, sempre gli stessi tre
   per una data pagina, cosi' i collegamenti interni restano stabili. */
.next-up {
  margin: 22px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  background: var(--bos-surface);
}

.next-up-title {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--bos-heading);
}

.next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.next-card { display: flex; }

.next-card > a {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 9px;
  justify-items: start;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  background: var(--bos-bg);
  color: var(--bos-heading);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.next-card > a:hover,
.next-card > a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  border-color: var(--bos-azure);
  text-decoration: none;
}

.next-card-title { font-size: 14px; font-weight: 700; line-height: 1.4; }

/* Il filetto della scheda prende il colore della famiglia di strumenti,
   gli stessi sei colori dei badge. */
[data-lab-section="quiz"] .read-card > a { border-left-color: var(--bos-blue); }
[data-lab-section="test"] .read-card > a { border-left-color: #0aa84f; }
[data-lab-section="calcolatore"] .read-card > a { border-left-color: var(--bos-azure); }
[data-lab-section="generatore"] .read-card > a { border-left-color: #8a2be2; }
[data-lab-section="esplorazione"] .read-card > a { border-left-color: #c47b00; }

/* Nel riquadro del risultato il testo e' centrato: il pannello no. */
.quiz-score .read-next { text-align: left; margin-top: 28px; }

/* ==========================================================================
   Effetti sonori: interruttore, spento per impostazione predefinita.
   ========================================================================== */

.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 3px 9px;
  border: 1px solid var(--bos-border);
  border-radius: 999px;
  background: transparent;
  color: var(--bos-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.sound-toggle:hover { border-color: var(--bos-azure); color: var(--bos-azure); }
.sound-toggle[aria-pressed="true"] { border-color: var(--bos-azure); color: var(--bos-azure); }
.sound-toggle-icon { font-size: 12px; line-height: 1; }

.save-bar .sound-toggle { margin-left: auto; }
.quiz-progress-right { display: inline-flex; align-items: center; }

/* ==========================================================================
   Animazioni. Regola unica: si animano solo transform e opacity, cosi' il
   lavoro resta sul compositor e non genera ne' layout ne' spostamenti.
   ========================================================================== */

/* Niente spazio prenotato per spiegazione e pulsante "Avanti": prenotarlo
   lasciava un buco di 130px fra le risposte e gli inviti alla lettura, che si
   vedeva per tutta la durata della domanda. Lo spostamento che avviene quando
   la spiegazione compare non peggiora il CLS: la metrica scarta gli
   spostamenti nei 500ms successivi a un'interazione (hadRecentInput), e qui
   la spiegazione arriva solo dopo un clic. */

@keyframes bos-rise {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes bos-pop {
  0% { transform: scale(.94); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes bos-nudge {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-4px, 0, 0); }
  75% { transform: translate3d(4px, 0, 0); }
}

.quiz-feedback:not([hidden]) { animation: bos-rise .22s ease-out both; }
.quiz-option.is-correct { animation: bos-pop .28s ease-out; }
.quiz-option.is-wrong { animation: bos-nudge .26s ease-out; }
.quiz-score .score-value { animation: bos-pop .34s ease-out; }
.quiz-score .outcome-title { animation: bos-rise .3s ease-out both; }
.is-revealed { animation: bos-rise .24s ease-out both; }

@keyframes bos-drop {
  from { opacity: 0; transform: translate3d(0, -14px, 0) scale(.4); }
  60%  { transform: translate3d(0, 0, 0) scale(1.35); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes bos-sweep {
  from { opacity: 0; transform: translate3d(-10px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Entrata dei blocchi costruiti dal JavaScript. Restano fuori da questa regola
   il titolo e i paragrafi della pagina, che sono gia' nell'HTML: animarli
   ritarderebbe il primo disegno del testo e quindi peggiorerebbe l'LCP.
   Qui si muovono solo transform e opacity, che il browser gestisce nel
   compositore senza rifare il layout: nessun contributo al CLS. */
.quiz-shell > *,
.tool-shell > * { animation: bos-rise .32s ease-out both; }
.tool-shell > *:nth-child(2) { animation-delay: .05s; }
.tool-shell > *:nth-child(3) { animation-delay: .1s; }
.tool-shell > *:nth-child(n+4) { animation-delay: .14s; }

/* I punti della mappa cadono a uno a uno: il ritardo lo mette il modulo,
   proporzionale all'indice, cosi' l'effetto e' una pioggia da ovest a est. */
.crypto-point { animation: bos-drop .5s ease-out both; }
.crypto-detail { animation: bos-sweep .3s ease-out both; }

/* Righe delle tabelle e voci di cronologia: comparsa a scalare, con un tetto
   di dieci passi per non far attendere gli elenchi lunghi. */
.data-table tbody tr { animation: bos-sweep .3s ease-out both; }
.data-table tbody tr:nth-child(1) { animation-delay: .02s; }
.data-table tbody tr:nth-child(2) { animation-delay: .05s; }
.data-table tbody tr:nth-child(3) { animation-delay: .08s; }
.data-table tbody tr:nth-child(4) { animation-delay: .11s; }
.data-table tbody tr:nth-child(5) { animation-delay: .14s; }
.data-table tbody tr:nth-child(6) { animation-delay: .17s; }
.data-table tbody tr:nth-child(7) { animation-delay: .2s; }
.data-table tbody tr:nth-child(8) { animation-delay: .23s; }
.data-table tbody tr:nth-child(9) { animation-delay: .26s; }
.data-table tbody tr:nth-child(n+10) { animation-delay: .29s; }

/* L'interruttore dell'audio nella barra di navigazione resta un'icona sola:
   la scritta serve solo dove il pulsante e' in mezzo al contenuto. */
.nav-components .sound-toggle { border: 0; background: none; cursor: pointer; padding: 6px; }
.nav-components .sound-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.nav-components .sound-toggle-icon { font-size: 15px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .quiz-feedback:not([hidden]),
  .quiz-option.is-correct,
  .quiz-option.is-wrong,
  .quiz-score .score-value,
  .quiz-score .outcome-title,
  .quiz-shell > *,
  .tool-shell > *,
  .crypto-point,
  .crypto-detail,
  .data-table tbody tr,
  .is-revealed { animation: none; }
  .quiz-bar span { transition: none; }
  .quiz-streak { animation: none; }
  .score-ring-fill { transition: none; }
  .quiz-option.is-correct .marker,
  .quiz-option.is-wrong .marker,
  .quiz-option.is-chosen .marker { animation: none; }
  .quiz-option:hover:not(:disabled) { transform: none; }
  .next-card > a:hover,
  .next-card > a:focus-visible { transform: none; }
  .read-card > a:hover,
  .read-card > a:focus-visible { transform: none; }
  .read-card > a:hover .read-card-cta svg,
  .read-card > a:focus-visible .read-card-cta svg { transform: none; }
  .quiz-feedback .source a:hover svg,
  .quiz-feedback .source a:focus-visible svg { transform: none; }
}

@media (max-width: 640px) {
  .tool-about { padding: 16px; }

  /* Sotto i 16px iOS ingrandisce la pagina quando il campo prende il fuoco,
     e poi non la rimpicciolisce: i calcolatori diventavano inusabili. */
  .field input,
  .field select,
  .field textarea { font-size: 16px; }

  .read-next { padding: 18px 16px; }
  .read-next-title { font-size: 20px; }
  .read-grid { grid-template-columns: 1fr; }
  .next-up { padding: 16px; }
  .next-grid { grid-template-columns: 1fr; }

  /* Bersagli tattili: i nodi dell'albero stavano a 36px, il nome cliccabile
     nelle tabelle era alto quanto il testo e i punti sulla mappa erano 16px,
     anche addossati fra loro. I punti restano l'unico caso sotto la soglia:
     ingrandirli di piu' coprirebbe la mappa, e la tabella qui sotto elenca
     le stesse quattordici creature come righe cliccabili. */
  .tree-node { padding: 11px 15px; }
  .data-table .link-button { padding: 8px 0; }
  .crypto-point { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .crypto-legend { gap: 8px 14px; }
}

/* --- albero genealogico degli dei greci ---------------------------------- */

.tree-gen { margin-bottom: 18px; }

.tree-gen-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--bos-heading);
}

.tree-gen-hint { color: var(--bos-muted); font-size: 13px; font-weight: 400; }

.tree-row { display: flex; flex-wrap: wrap; gap: 8px; }

.tree-node {
  padding: 7px 13px;
  border: 1px solid var(--bos-border);
  border-radius: 999px;
  background: var(--bos-surface);
  color: var(--bos-text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  /* Solo transform e box-shadow: nessuna proprieta' che cambi il layout,
     quindi evidenziare un ramo non fa muovere i nodi accanto. */
  transition: transform .15s ease, box-shadow .15s ease;
}

.tree-node:hover,
.tree-node:focus-visible { transform: translateY(-2px); }

.tree-node.is-active {
  border-color: var(--bos-blue);
  background: var(--bos-blue);
  color: #fff;
}

[data-skin="dark"] .tree-node.is-active { background: var(--bos-azure); border-color: var(--bos-azure); }

.tree-node.is-parent { border-color: var(--bos-green); box-shadow: inset 0 0 0 2px var(--bos-green); }
.tree-node.is-child { border-color: var(--bos-yellow); box-shadow: inset 0 0 0 2px var(--bos-yellow); }

@media (prefers-reduced-motion: reduce) {
  .tree-node { transition: none; }
  .tree-node:hover, .tree-node:focus-visible { transform: none; }
}

/* Barra della quota di vita attesa nel calcolatore dell'eta' del cane.
   La larghezza cambia in transizione, non in animazione, e resta dentro un
   contenitore di altezza fissa: non sposta nulla intorno. */
.dog-bar {
  height: 10px;
  margin: 18px 0 10px;
  border-radius: 999px;
  background: var(--bos-border);
  overflow: hidden;
}

.dog-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bos-green), var(--bos-yellow) 62%, #d13b3b);
  transition: width .35s ease;
}

@media (prefers-reduced-motion: reduce) { .dog-bar span { transition: none; } }

/* --- fascia illustrata delle pagine degli strumenti ---------------------- */

.tool-hero {
  margin: 0 0 22px;
  border-radius: var(--bos-radius);
  overflow: hidden;
  border: 1px solid var(--bos-border);
}

/* aspect-ratio piu' gli attributi width/height nell'HTML: l'altezza e' nota
   prima che l'immagine arrivi, quindi il contenuto sotto non si muove. */
.tool-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 340;
}

.tool-hero figcaption {
  margin: 0;
  padding: 9px 14px;
  background: var(--bos-surface);
  border-top: 1px solid var(--bos-border);
  color: var(--bos-muted);
  font-size: 13px;
  line-height: 1.5;
}

.timeline-heading { font-size: 20px; margin: 28px 0 6px; color: var(--bos-heading); }

/* Contenuto iniziale delle pagine di elenco: i link agli strumenti in HTML.
   catalogo.js lo sostituisce con le schede quando il catalogo e' pronto. */
.catalogue-fallback { margin-top: 8px; }

.catalogue-links { margin: 0 0 22px; padding: 0; list-style: none; }

.catalogue-links li {
  padding: 12px 0;
  border-bottom: 1px solid var(--bos-border);
}

.catalogue-links li:last-child { border-bottom: 0; }

.catalogue-links a {
  font-size: 16px;
  font-weight: 700;
  color: var(--bos-heading);
  text-decoration: none;
}

.catalogue-links a:hover { color: var(--bos-azure); }

.catalogue-links .hint { display: block; margin-top: 3px; font-size: 13px; }

/* Miniature degli strumenti negli elenchi. L'SVG e' generato da
   scripts/generate-art.mjs con le stesse tinte del badge di famiglia, quindi
   una scheda si riconosce dal colore anche prima di leggere il titolo.
   width/height sono dichiarati nel markup: il browser riserva lo spazio e la
   griglia non salta quando l'immagine arriva. */
.tool-thumb {
  display: block;
  margin: -20px -20px 14px;
  line-height: 0;
  border-bottom: 1px solid var(--bos-border);
  background: var(--bos-bg);
}

.tool-thumb img {
  width: 100%;
  height: auto;
  border-radius: var(--bos-radius) var(--bos-radius) 0 0;
}

/* Se la miniatura non c'e' (strumento nel database ma non ancora nel
   catalogo delle illustrazioni) la scheda torna esattamente come prima. */
.tool-thumb[hidden] { display: none !important; }

.next-card > a { grid-template-rows: auto auto 1fr; }

.next-card-thumb {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

/* ---------------------------------------------------------------------------
   Vocabolario condiviso dei calcolatori, generatori ed esplorazioni.
   Cinque blocchi riusati da tutti gli strumenti invece di una manciata di
   classi per file: meno CSS da scaricare e un'interfaccia che si comporta
   allo stesso modo in tutto il Laboratorio.
   Le animazioni toccano solo transform e opacity, quindi restano sul
   compositor e non spostano nulla intorno.
   --------------------------------------------------------------------------- */

/* 1. Flusso di domande a due risposte. */
.flow {
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  background: var(--bos-surface);
  box-shadow: var(--bos-shadow);
  padding: 20px;
}

.flow-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(4, 7, 134, .1);
  overflow: hidden;
  margin-bottom: 16px;
}

[data-skin="dark"] .flow-bar { background: rgba(255, 255, 255, .12); }

.flow-bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--bos-azure);
  transform-origin: left center;
  transition: transform .28s ease;
}

.flow-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--bos-muted);
  margin-bottom: 8px;
}

.flow-question { font-size: 21px; line-height: 1.35; margin: 0 0 8px; color: var(--bos-heading); }
.flow-note { margin: 0 0 18px; color: var(--bos-muted); font-size: 14px; }

.flow-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.flow-choices .button { min-width: 132px; justify-content: center; }

.flow-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--bos-muted);
}

.flow-recap { margin: 0; padding: 0; list-style: none; font-size: 14px; }

.flow-recap li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bos-border);
}

.flow-recap li:last-child { border-bottom: 0; }
.flow-recap .flow-recap-no { color: var(--bos-muted); text-decoration: line-through; }

/* 2. Selettore visivo: una scheda per opzione, con la sua illustrazione. */
.picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr));
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  padding: 12px 8px;
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  background: var(--bos-bg);
  color: var(--bos-heading);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.picker-item:hover,
.picker-item:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  border-color: var(--bos-azure);
}

.picker-item[aria-pressed="true"] {
  border-color: var(--bos-azure);
  box-shadow: inset 0 0 0 2px var(--bos-azure);
}

.picker-art { display: block; width: 100%; height: auto; }
.picker-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.picker-meta { font-size: 12px; color: var(--bos-muted); line-height: 1.35; }

/* 3. Barre di confronto: l'ordine di grandezza si vede prima di leggerlo. */
.bars { margin: 18px 0 0; padding: 0; list-style: none; }

.bar-row { padding: 9px 0; border-bottom: 1px solid var(--bos-border); }
.bar-row:last-child { border-bottom: 0; }

.bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 5px;
  font-size: 14px;
}

.bar-name { font-weight: 700; color: var(--bos-heading); overflow-wrap: break-word; }
.bar-value { color: var(--bos-muted); font-size: 13px; white-space: nowrap; }

.bar-track {
  height: 12px;
  border-radius: 6px;
  background: rgba(4, 7, 134, .08);
  overflow: hidden;
}

[data-skin="dark"] .bar-track { background: rgba(255, 255, 255, .1); }

.bar-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--bos-azure);
  transform-origin: left center;
  transition: transform .5s ease;
}

.bar-row.is-you .bar-fill { background: var(--bos-blue); }
.bar-row.is-you .bar-name::after { content: " ← tu"; color: var(--bos-blue); font-size: 12px; }
.bar-note { margin: 5px 0 0; font-size: 12.5px; color: var(--bos-muted); line-height: 1.45; }

/* 4. Variabili scelte dal lettore: pastiglie a due stati. */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }

.chip {
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid var(--bos-border);
  border-radius: 999px;
  background: var(--bos-bg);
  color: var(--bos-heading);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.chip:hover, .chip:focus-visible { border-color: var(--bos-azure); }

.chip[aria-pressed="true"] {
  background: var(--bos-blue);
  border-color: var(--bos-blue);
  color: #fff;
}

.chip-group { margin-bottom: 14px; }

.chip-group > .chip-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--bos-muted);
  margin-bottom: 7px;
}

/* 5. Schede di dettaglio delle esplorazioni. */
.detail-card {
  border: 1px solid var(--bos-border);
  border-left: 3px solid var(--bos-azure);
  border-radius: var(--bos-radius);
  background: var(--bos-bg);
  padding: 16px 18px;
  margin-top: 16px;
}

.detail-card h3 { margin: 0 0 4px; font-size: 19px; }
.detail-card .detail-meta { margin: 0 0 10px; font-size: 13px; color: var(--bos-muted); }
.detail-card p { margin: 0 0 10px; }
.detail-card p:last-child { margin-bottom: 0; }

.entry-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry-button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-radius);
  background: var(--bos-bg);
  color: var(--bos-heading);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.entry-button:hover,
.entry-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .1);
  border-color: var(--bos-azure);
}

.entry-button[aria-pressed="true"] { border-color: var(--bos-azure); box-shadow: inset 0 0 0 2px var(--bos-azure); }
.entry-name { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.entry-meta { font-size: 12px; color: var(--bos-muted); }

@media (prefers-reduced-motion: reduce) {
  .flow-bar-fill,
  .bar-fill,
  .picker-item,
  .entry-button { transition: none; }
  .picker-item:hover,
  .picker-item:focus-visible,
  .entry-button:hover,
  .entry-button:focus-visible { transform: none; }
}

/* Righelli e grafici disegnati a mano dagli strumenti. Su telefono l'SVG non
   si rimpicciolisce (le etichette diventerebbero illeggibili): scorre in
   orizzontale dentro il suo contenitore. */
.scale-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  color: var(--bos-heading);
}

.scale-wrap svg { display: block; width: 100%; min-width: 560px; height: auto; }

/* ==========================================================================
   Blocchi introdotti con l'ampliamento di generatori ed esplorazioni.
   Nessuna proprieta' animata al di fuori di transform e opacity, e ogni
   miniatura ha width/height dichiarati nel markup: le schede non spostano
   il contenuto sotto mentre compaiono.
   ========================================================================== */

/* Attenuazione condivisa: i filtri non nascondono gli elementi, li mettono
   in ombra. Una mappa che si svuota fa perdere il colpo d'occhio. */
.crypto-point.is-dim { opacity: .2; transform: scale(.7); z-index: 0; }
.tree-node.is-dim { opacity: .34; }
.bar-row.is-dim { opacity: .3; }

/* Pallini di legenda: gli stessi colori dei punti sulla mappa, riusati per
   le relazioni dell'albero e per i formati della cronologia. */
.tree-legend,
.marvel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--bos-muted);
}

.tree-legend li,
.marvel-legend li { display: flex; align-items: center; gap: 7px; }

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bos-border);
}

.legend-active { background: var(--bos-blue); }
.legend-parent { background: var(--bos-green); }
.legend-child { background: var(--bos-yellow); }
.legend-film { background: var(--bos-blue); }
.legend-serie { background: var(--bos-azure); }
.legend-speciale { background: #c47b00; }
.legend-animazione { background: #8a2be2; }

/* Nodi dell'albero e delle epoche: l'esito e' una banda di colore a sinistra,
   quindi non entra in conflitto con l'evidenziazione del ramo selezionato. */
.tree-node.is-explained { box-shadow: inset 3px 0 0 var(--bos-azure); }
.tree-node.is-debunked { box-shadow: inset 3px 0 0 #d13b3b; }
.tree-node.is-open { box-shadow: inset 3px 0 0 #6d7178; }
.tree-node.is-true { box-shadow: inset 3px 0 0 #0aa84f; }
.tree-node.is-historic { box-shadow: inset 3px 0 0 #c47b00; }
.tree-node.is-extinct { box-shadow: inset 3px 0 0 #8a2be2; }

/* Unioni e discendenza nell'albero: una riga per coppia, i figli sotto. */
.tree-unions { margin: 6px 0 0; padding: 0; list-style: none; }

.tree-unions li {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bos-border);
}

.tree-unions li:last-child { border-bottom: 0; }

.tree-union-partner { font-size: 13px; font-weight: 700; color: var(--bos-muted); }
.tree-union-kids { font-size: 15px; overflow-wrap: break-word; }

/* --- cronologia Marvel: righe cliccabili e scheda del titolo ------------- */

.timeline-item { display: block; padding: 0; }

.timeline-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 12px 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}

.timeline-card:hover,
.timeline-card:focus-visible { transform: translateX(3px); background: rgba(22, 104, 240, .07); }

.timeline-item.is-active .timeline-card { background: rgba(22, 104, 240, .12); }
[data-skin="dark"] .timeline-item.is-active .timeline-card { background: rgba(255, 255, 255, .09); }

.marvel-poster { flex: 0 0 auto; display: block; border-radius: 4px; }

.marvel-detail { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.marvel-detail .marvel-poster { width: 280px; max-width: 100%; height: auto; }
.marvel-detail-body { flex: 1 1 260px; min-width: 0; }
.marvel-detail-body h2 { margin: 6px 0 4px; }

/* --- generatore di trame: copertina disegnata accanto al testo ----------- */

.plot-card { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.plot-cover { flex: 0 0 auto; width: 280px; max-width: 100%; height: auto; border-radius: 8px; }
.plot-body { flex: 1 1 260px; min-width: 0; }
.plot-body h2 { margin: 0 0 6px; }

/* --- generatore di multiversi: livello, verdetto e disegno --------------- */

.multi-card { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.multi-art { flex: 0 0 auto; width: 320px; max-width: 100%; height: auto; border-radius: 8px; }
.multi-body { flex: 1 1 260px; min-width: 0; }
.multi-body h2 { margin: 0 0 6px; }

.verdict {
  display: inline-block;
  margin: 4px 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.verdict-abitabile { background: rgba(10, 168, 79, .14); color: #067a39; }
.verdict-marginale { background: rgba(196, 123, 0, .16); color: #8a5600; }
.verdict-sterile { background: rgba(209, 59, 59, .14); color: #a52222; }

[data-skin="dark"] .verdict-abitabile { color: #6fe3a1; }
[data-skin="dark"] .verdict-marginale { color: #f0c46a; }
[data-skin="dark"] .verdict-sterile { color: #ff9c9c; }

/* --- generatore di complotti: anatomia della bufala ---------------------- */

.entry-list.anatomy .entry-name { color: var(--bos-heading); }
.entry-list.anatomy li { padding: 10px 0; }

@media (prefers-reduced-motion: reduce) {
  .timeline-card { transition: none; }
  .timeline-card:hover,
  .timeline-card:focus-visible { transform: none; }
  .crypto-point.is-dim { transform: none; }
}

@media (max-width: 600px) {
  .timeline-card { flex-wrap: wrap; gap: 10px; padding: 12px 4px; }
  .timeline-card .timeline-year { flex: 0 0 auto; }
  .marvel-detail .marvel-poster,
  .plot-cover,
  .multi-art { width: 100%; }
  .tree-legend,
  .marvel-legend { gap: 6px 12px; }
}