/* ==========================================================================
   Midian Realms — tema.css
   Design system del sito pubblico (tutte le pagine con body.mr-sito).
   Riferimento: docs/superpowers/specs/2026-09-25-sito-pubblico-design/
   ========================================================================== */

:root {
  --mr-fondo: #15110d;
  --mr-fascia: #1b1612;
  --mr-carta: #18130f;
  --mr-profondo: #0f0c09;
  --mr-campo: #110d0a;
  --mr-linea: #2e251d;
  --mr-bordo: #3d3126;
  --mr-bordo-campo: #4a3b2c;
  --mr-oro: #d6b979;
  --mr-oro-chiaro: #e8cf97;
  --mr-oro-scuro: #8a6f44;
  --mr-oro-profondo: #6e5836;
  --mr-titolo: #f3ead9;
  --mr-testo: #efe6d6;
  --mr-corpo: #dccfb8;
  --mr-tenue: #bdae96;
  --mr-nota: #a3947c;
  --mr-accento: #9e2a17;
  --mr-accento-hover: #b3361f;
  --mr-su-accento: #fff4e0;

  /* Colori semantici dei topic del manuale (esiti, divieti): chiari, leggibili sul fondo scuro */
  --mr-rosso-chiaro: #e0826f;
  --mr-verde-chiaro: #8fc28a;
  --mr-viola-chiaro: #b9a3d6;

  --mr-font-titoli: 'Cinzel', Georgia, serif;
  --mr-font-testo: 'EB Garamond', Georgia, serif;

  /* Margine laterale unico: sezioni, menu e testata condividono lo stesso respiro dal bordo */
  --mr-margine-laterale: max(80px, calc((100% - 1280px) / 2));
}

/* ==========================================================================
   Base
   ========================================================================== */

/* scrollbar-gutter e overflow-x arrivavano da landing.css/midian-styles.css,
   che la home non carica più: restano qui per tutte le pagine pubbliche */
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

[id] {
  scroll-margin-top: 96px;
}

body.mr-sito {
  margin: 0;
  background: var(--mr-fondo);
  color: var(--mr-testo);
  font-family: var(--mr-font-testo);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* <picture> serve solo a scegliere il file (WebP o ripiego): non entra nel layout,
   l'<img> resta figlio diretto del contenitore come senza <picture> */
body.mr-sito picture {
  display: contents;
}

/* senza questa regola <source> conterebbe come elemento flex (gap doppio nel marchio) */
body.mr-sito picture > source {
  display: none;
}

/* Selezione del testo e barra di scorrimento sottile, come in midian-styles.css */
::selection {
  background: var(--mr-oro-scuro);
  color: var(--mr-titolo);
}

::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: var(--mr-linea);
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background-color: var(--mr-nota);
}

body.mr-sito h1,
body.mr-sito h2,
body.mr-sito h3,
body.mr-sito h4 {
  font-family: var(--mr-font-titoli);
  margin: 0;
  color: var(--mr-titolo);
}

body.mr-sito a {
  color: var(--mr-oro);
}

body.mr-sito a:hover {
  color: var(--mr-oro-chiaro);
}

body.mr-sito input::placeholder,
body.mr-sito textarea::placeholder {
  color: var(--mr-nota);
}

/* ==========================================================================
   Cursori della land (CLAUDE.md §6) — obbligatori, unica eccezione a !important
   ========================================================================== */

html,
body {
  cursor: url("../midian/midian/midian/Arrowb.cur"), auto !important;
}

a,
button,
input,
select,
textarea,
label,
summary,
[role="tab"] {
  cursor: url("../midian/midian/midian/Arrowc.cur"), pointer !important;
}

/* ==========================================================================
   Menu principale — .mr-nav
   ========================================================================== */

.mr-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 88px;
  box-sizing: border-box;
  padding: 0 var(--mr-margine-laterale);
  display: flex;
  align-items: center;
  gap: 40px;
  background: transparent;
  border-bottom: 1px solid rgba(214, 185, 121, 0.16);
  transition: background-color .25s ease, border-color .25s ease;
}

.mr-nav.is-scrolled {
  background: rgba(15, 12, 9, 0.96);
  border-bottom-color: var(--mr-linea);
}

.mr-nav__marchio {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.mr-nav__marchio img {
  width: 40px;
  height: 41px;
  display: block;
}

.mr-nav__nome {
  font-family: var(--mr-font-titoli);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--mr-titolo);
}

.mr-nav__pannello {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}

/* Il pannello usa il collapse di Bootstrap solo fino a 1280 px: sopra resta sempre visibile,
   con specificità più alta di .collapse:not(.show) di Bootstrap. */
.mr-nav .mr-nav__pannello.collapse {
  display: flex;
}

.mr-nav__link-list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.mr-nav__link {
  font-family: var(--mr-font-titoli);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--mr-testo);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.mr-nav__link[aria-current="page"] {
  font-weight: 700;
  color: var(--mr-oro-chiaro);
  border-bottom-color: var(--mr-oro);
}

.mr-nav__azioni {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mr-nav__apri {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(214, 185, 121, 0.35);
  border-radius: 3px;
  background: rgba(15, 12, 9, 0.4);
  color: var(--mr-oro-chiaro);
  margin-left: auto;
}

/* ==========================================================================
   Pulsanti — .mr-btn
   ========================================================================== */

.mr-btn {
  height: 48px;
  box-sizing: border-box;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 3px;
  font-family: var(--mr-font-titoli);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: url("../midian/midian/midian/Arrowc.cur"), pointer !important;
}

.mr-btn--primario {
  background: var(--mr-accento);
  border-color: rgba(255, 220, 180, 0.18);
  color: var(--mr-su-accento);
}

.mr-btn--primario:hover {
  background: var(--mr-accento-hover);
  color: var(--mr-su-accento);
}

.mr-btn--secondario {
  background: rgba(15, 12, 9, 0.35);
  border-color: var(--mr-oro-scuro);
  color: var(--mr-oro-chiaro);
}

.mr-btn--secondario:hover {
  background: rgba(15, 12, 9, 0.5);
  color: var(--mr-titolo);
}

/* Oro pieno: azione di accesso (Entra). Rosso = crea/registra, oro = accedi. */
.mr-btn--oro {
  background: var(--mr-oro);
  border-color: var(--mr-oro-chiaro);
  color: var(--mr-fondo);
}

.mr-btn--oro:hover {
  background: var(--mr-oro-chiaro);
  color: var(--mr-fondo);
}

/* Discreto: azione di esplorazione, volutamente diversa da Accedi (contorno oro).
   Selettore con body.mr-sito per battere body.mr-sito a (colore dei link). */
body.mr-sito .mr-btn--discreto {
  background: transparent;
  border-color: rgba(243, 234, 217, 0.32);
  color: var(--mr-corpo);
}

body.mr-sito .mr-btn--discreto:hover {
  background: rgba(243, 234, 217, 0.08);
  border-color: rgba(243, 234, 217, 0.6);
  color: var(--mr-titolo);
}

.mr-btn--tratteggiato {
  background: transparent;
  border: 1px dashed var(--mr-oro-scuro);
  color: var(--mr-oro-chiaro);
}

.mr-btn--tratteggiato:hover {
  background: rgba(214, 185, 121, 0.07);
}

.mr-btn--piccolo {
  height: 44px;
  font-size: 13px;
  padding: 0 20px;
}

.mr-btn--pieno {
  width: 100%;
}

.mr-link-btn {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--mr-font-testo);
  font-size: 16px;
  color: var(--mr-oro);
  text-decoration: underline;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.mr-link-btn:hover {
  color: var(--mr-oro-chiaro);
}

/* ==========================================================================
   Campi — .mr-campo
   ========================================================================== */

.mr-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mr-campo__riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mr-campo__aiuto {
  font-size: 16px;
  line-height: 1.45;
  color: var(--mr-tenue);
}

.mr-etichetta {
  font-family: var(--mr-font-titoli);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--mr-oro);
}

.mr-input {
  height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  background: var(--mr-campo);
  border: 1px solid var(--mr-bordo-campo);
  border-radius: 3px;
  font-family: var(--mr-font-testo);
  font-size: 18px;
  color: var(--mr-testo);
  width: 100%;
}

textarea.mr-input {
  height: 150px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
}

.mr-input:focus {
  outline: 2px solid var(--mr-oro);
  outline-offset: 1px;
  border-color: var(--mr-oro);
}

/* Campi compilati in automatico dal browser: il fondo azzurro di default va sostituito col tema */
.mr-sito input:-webkit-autofill,
.mr-sito select:-webkit-autofill,
.mr-sito textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--mr-campo) inset;
  -webkit-text-fill-color: var(--mr-testo);
  caret-color: var(--mr-testo);
}

.mr-sito input:autofill,
.mr-sito select:autofill,
.mr-sito textarea:autofill {
  box-shadow: 0 0 0 1000px var(--mr-campo) inset;
  -webkit-text-fill-color: var(--mr-testo);
  caret-color: var(--mr-testo);
}

.mr-select {
  position: relative;
}

.mr-select select.mr-input {
  appearance: none;
  padding-right: 40px;
}

.mr-select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--mr-oro);
  border-bottom: 2px solid var(--mr-oro);
  transform: rotate(45deg);
  pointer-events: none;
}

.mr-scelta {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.mr-scelta legend {
  padding: 0;
  margin-bottom: 8px;
  font-family: var(--mr-font-titoli);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--mr-oro);
}

.mr-scelta__opzioni {
  display: flex;
  gap: 8px;
}

.mr-scelta__opzione {
  flex-grow: 1;
  height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--mr-bordo-campo);
  border-radius: 3px;
  font-family: var(--mr-font-titoli);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--mr-tenue);
}

.mr-scelta__opzione input {
  margin: 0;
  accent-color: var(--mr-oro);
}

.mr-scelta__opzione:has(input:checked) {
  border-color: var(--mr-oro);
  background: rgba(214, 185, 121, 0.10);
  color: var(--mr-titolo);
}

.mr-oppure {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mr-oppure::before,
.mr-oppure::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--mr-bordo);
}

.mr-oppure span {
  font-size: 15px;
  font-style: italic;
  color: var(--mr-nota);
}

/* ==========================================================================
   Testata delle pagine interne — .mr-testata
   ========================================================================== */

.mr-testata {
  position: relative;
  height: 340px;
  overflow: hidden;
}

.mr-testata__sfondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mr-testata__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 12, 9, 0.86) 0%, rgba(15, 12, 9, 0.74) 55%, var(--mr-fondo) 100%);
}

.mr-testata__corpo {
  position: absolute;
  left: var(--mr-margine-laterale);
  right: var(--mr-margine-laterale);
  bottom: 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mr-briciole {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--mr-nota);
  flex-wrap: wrap;
}

.mr-briciole a {
  color: var(--mr-tenue);
  text-decoration: none;
}

.mr-briciole__separatore {
  color: var(--mr-oro-profondo);
}

.mr-briciole [aria-current="page"] {
  color: var(--mr-oro-chiaro);
}

.mr-testata__titolo {
  margin: 0;
  font-family: var(--mr-font-titoli);
  font-size: 52px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--mr-titolo);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.mr-testata__sottotitolo {
  margin: 0;
  max-width: 760px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--mr-corpo);
}

/* ==========================================================================
   Sezioni — .mr-sezione
   ========================================================================== */

.mr-sezione {
  box-sizing: border-box;
  padding: 128px 0;
}

.mr-sezione--compatta {
  padding: 52px 0;
}

.mr-sezione--fascia {
  background: var(--mr-fascia);
  border-top: 1px solid var(--mr-linea);
  border-bottom: 1px solid var(--mr-linea);
}

/* Niente margin auto: il margine laterale sta tutto nel padding, cosi' anche dentro
   una colonna flex (il footer) il contenitore resta a tutta larghezza */
.mr-contenitore {
  box-sizing: border-box;
  padding: 0 var(--mr-margine-laterale);
}

.mr-occhiello {
  margin: 0;
  font-family: var(--mr-font-titoli);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--mr-oro);
}

.mr-titolo-sezione {
  margin: 0;
  font-family: var(--mr-font-titoli);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--mr-titolo);
}

/* ==========================================================================
   Accesso — .mr-accesso
   ========================================================================== */

.mr-accesso {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mr-accesso--card {
  width: 400px;
  box-sizing: border-box;
  padding: 36px;
  background: rgba(21, 17, 13, 0.86);
  border: 1px solid rgba(214, 185, 121, 0.28);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}

.mr-accesso--fascia {
  flex-direction: row;
  align-items: center;
  gap: 56px;
  width: 100%;
}

.mr-accesso__corpo {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mr-accesso--fascia .mr-accesso__corpo {
  flex-grow: 1;
  min-width: 0;
  gap: 14px;
}

.mr-accesso__altro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mr-accesso--fascia .mr-accesso__altro {
  flex-direction: row;
  align-items: center;
  gap: 28px;
}

.mr-accesso__recupero {
  font-size: 15px;
  color: var(--mr-oro);
}

.mr-accesso--fascia .mr-accesso__recupero {
  font-size: 16px;
}

.mr-accesso__titolo {
  margin: 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mr-accesso__titolo h2 {
  font-size: 24px;
}

.mr-accesso__titolo p {
  margin: 0;
  font-size: 17px;
  color: var(--mr-tenue);
}

.mr-accesso--fascia .mr-accesso__titolo {
  width: 300px;
  flex-shrink: 0;
}

.mr-accesso--fascia .mr-accesso__titolo h2 {
  font-size: 26px;
}

.mr-accesso__campi {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mr-accesso--fascia .mr-accesso__campi {
  flex-direction: row;
  align-items: flex-end;
  gap: 12px;
}

.mr-accesso--fascia .mr-accesso__campi .mr-campo {
  flex: 1 1 0;
  min-width: 0;
}

.mr-accesso--fascia .mr-scelta {
  width: 240px;
  flex-shrink: 0;
}

.mr-accesso--fascia .mr-accesso__campi .mr-btn {
  flex-shrink: 0;
  height: 48px;
}

.mr-accesso__azioni {
  display: flex;
  align-items: center;
  gap: 28px;
}

.mr-accesso__nota {
  margin: 0;
  text-align: center;
  font-size: 15px;
  color: var(--mr-nota);
}

/* ==========================================================================
   Footer — .mr-footer
   ========================================================================== */

.mr-footer {
  box-sizing: border-box;
  padding: 72px 0 32px;
  display: flex;
  flex-direction: column;
  background: var(--mr-profondo);
  border-top: 1px solid var(--mr-linea);
}

.mr-footer__corpo {
  display: flex;
  gap: 80px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.mr-footer__marchio {
  width: 440px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mr-footer__marchio-riga {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mr-footer__marchio-riga img {
  width: 44px;
  height: 45px;
  display: block;
}

.mr-footer__marchio-riga span {
  font-family: var(--mr-font-titoli);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--mr-titolo);
}

.mr-footer__testo {
  margin: 0;
  max-width: 360px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--mr-tenue);
}

.mr-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.mr-footer__social a {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mr-bordo-campo);
  border-radius: 3px;
  color: var(--mr-oro);
}

.mr-footer__colonna {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mr-footer__colonna h4 {
  margin: 0 0 10px;
  font-family: var(--mr-font-titoli);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mr-oro);
}

.mr-footer__colonna a {
  min-height: 36px;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: var(--mr-corpo);
  text-decoration: none;
}

.mr-footer__base {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--mr-linea);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.mr-footer__base p {
  margin: 0;
  font-family: var(--mr-font-titoli);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--mr-nota);
}

.mr-footer__base a {
  font-size: 15px;
  color: var(--mr-nota);
  text-decoration: none;
}

/* ==========================================================================
   Manuale e regolamento — .mr-guida
   ========================================================================== */

.mr-guida {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 48px;
  align-items: flex-start;
  padding: 56px 0 104px;
}

.mr-indice {
  box-sizing: border-box;
  padding: 24px 14px;
  background: var(--mr-fascia);
  border: 1px solid var(--mr-bordo);
  border-radius: 4px;
}

.mr-indice > summary {
  display: none;
}

.mr-indice__gruppo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mr-indice__gruppo + .mr-indice__gruppo {
  margin-top: 22px;
}

.mr-indice__titolo {
  margin: 0;
  padding: 0 12px;
  font-family: var(--mr-font-titoli);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--mr-oro);
}

.mr-indice ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mr-indice__link {
  min-height: 36px;
  box-sizing: border-box;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 3px;
  font-size: 17px;
  color: var(--mr-corpo);
  text-decoration: none;
}

.mr-indice__link[aria-current="page"] {
  background: rgba(214, 185, 121, 0.14);
  font-weight: 500;
  color: var(--mr-titolo);
}

.mr-articolo {
  min-width: 0;
  box-sizing: border-box;
  padding: 52px 64px 48px;
  display: flex;
  flex-direction: column;
  background: var(--mr-carta);
  border: 1px solid var(--mr-bordo);
  border-radius: 4px;
}

.mr-articolo__meta {
  margin: 0 0 10px;
  font-family: var(--mr-font-titoli);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--mr-oro);
}

.mr-articolo__titolo {
  margin: 0 0 28px;
  font-family: var(--mr-font-titoli);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--mr-titolo);
}

.mr-articolo__corpo {
  max-width: 760px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--mr-corpo);
  overflow-wrap: break-word; /* URL lunghi nei topic: vanno a capo invece di allargare la pagina */
}

.mr-articolo__corpo p {
  margin: 0 0 16px;
}

.mr-articolo__corpo h3 {
  margin: 36px 0 14px;
  font-size: 20px;
  font-weight: 600;
  color: var(--mr-oro-chiaro);
}

.mr-articolo__corpo ul,
.mr-articolo__corpo ol {
  margin: 0 0 16px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mr-articolo__corpo li::marker {
  color: var(--mr-oro-scuro);
}

.mr-articolo__corpo strong {
  font-weight: 600;
  color: var(--mr-titolo);
}

.mr-articolo__corpo a {
  color: var(--mr-oro);
}

.mr-articolo__corpo table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
}

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

/* --- Topic convertiti nel tema (piano 2026-09-26 topic e legacy, step C e D) --- */

.mr-articolo__corpo h2 {
  margin: 44px 0 16px;
  font-family: var(--mr-font-titoli);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mr-titolo);
}

.mr-articolo__corpo > h2:first-child,
.mr-articolo__corpo > section:first-child > h2:first-child {
  margin-top: 0;
}

.mr-articolo__corpo th,
.mr-articolo__corpo td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--mr-linea);
  text-align: left;
  vertical-align: top;
}

.mr-articolo__corpo th {
  background: var(--mr-fascia);
  border-bottom-color: var(--mr-bordo);
  font-weight: 600;
  color: var(--mr-titolo);
}

.mr-articolo__corpo caption {
  padding: 0 0 10px;
  caption-side: top;
  text-align: left;
  font-size: 16px;
  color: var(--mr-nota);
}

/* Tabella in un contenitore scorrevole: sui telefoni scorre lei, non la pagina */
.mr-tabella {
  margin: 0 0 20px;
  overflow-x: auto;
}

.mr-tabella table {
  margin: 0;
}

.mr-tabella--larga table {
  min-width: 720px;
  font-size: 16px;
}

.mr-figura {
  margin: 20px 0;
  text-align: center;
}

.mr-figura img {
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

.mr-figura figcaption {
  margin-top: 8px;
  font-size: 15px;
  color: var(--mr-nota);
}

.mr-riquadro {
  padding: 14px 18px;
  background: var(--mr-fascia);
  border: 1px solid var(--mr-linea);
  border-left: 3px solid var(--mr-oro-scuro);
  border-radius: 0 4px 4px 0;
}

.mr-articolo__corpo details {
  margin: 0 0 12px;
  border: 1px solid var(--mr-linea);
  border-radius: 4px;
  background: var(--mr-fascia);
}

.mr-articolo__corpo summary {
  padding: 12px 16px;
  color: var(--mr-oro-chiaro);
}

.mr-articolo__corpo details[open] > summary {
  border-bottom: 1px solid var(--mr-linea);
}

.mr-articolo__corpo details > :not(summary) {
  margin-left: 16px;
  margin-right: 16px;
}

.mr-articolo__corpo details > :last-child:not(summary) {
  margin-bottom: 14px;
}

.mr-articolo__corpo details > :nth-child(2) {
  margin-top: 14px;
}

/* Badge di policy per i <details> del regolamento (topic 108): lo staff usa le classi combo-vietato e combo-monitorato */
.mr-articolo__corpo details.combo-vietato > summary::before,
.mr-articolo__corpo details.combo-monitorato > summary::before {
  display: inline-block;
  margin-right: 10px;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 10px;
  font-family: var(--mr-font-titoli);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  vertical-align: 2px;
}

.mr-articolo__corpo details.combo-vietato > summary::before {
  content: "VIETATO";
  color: var(--mr-rosso-chiaro);
}

.mr-articolo__corpo details.combo-monitorato > summary::before {
  content: "MONITORATO";
  color: var(--mr-oro);
}

/* Tabella dei manuali (topic 108): classi scelte dallo staff, ridefinite qui sotto il corpo per non
   prendere il .badge di Bootstrap */
.mr-articolo__corpo .books-table td.check {
  text-align: center;
}

.mr-articolo__corpo .books-table tr.group-header td {
  background: var(--mr-profondo);
  font-family: var(--mr-font-titoli);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mr-oro);
}

.mr-articolo__corpo .books-table .badge {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.mr-articolo__corpo .books-table .badge-wotc {
  color: var(--mr-oro-chiaro);
}

.mr-articolo__corpo .books-table .badge-3p {
  color: var(--mr-viola-chiaro);
}

.mr-articolo__corpo .books-table .check-si {
  color: var(--mr-verde-chiaro);
}

.mr-articolo__corpo .books-table .check-fix {
  color: var(--mr-oro);
}

.mr-articolo__corpo .books-table .check-no {
  color: var(--mr-rosso-chiaro);
}

.mr-articolo__corpo .books-table .note {
  font-size: 15px;
  color: var(--mr-nota);
}

/* Nessuna regola su span[style] o sui colori inline dei topic: decisione presa con l'utente. */

.mr-topic-frame {
  width: 100%;
  border: 0;
  display: block;
  min-height: 400px;
}

/* Topic "vetrina": la pagina interna di /manual/ occupa quasi tutta la card
   (i carousel sono larghi 1200 px; il limite di 760 px vale solo per i frammenti). */
.mr-articolo--largo {
  padding-left: 24px;
  padding-right: 24px;
}

.mr-vicini {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--mr-linea);
  display: flex;
  gap: 16px;
}

.mr-vicini__link {
  flex-grow: 1;
  flex-basis: 0;
  min-height: 72px;
  box-sizing: border-box;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--mr-bordo);
  border-radius: 3px;
  text-decoration: none;
}

.mr-vicini__link--successivo {
  align-items: flex-end;
  text-align: right;
}

.mr-vicini__link span:first-child {
  font-size: 15px;
  color: var(--mr-nota);
}

.mr-vicini__link span:last-child {
  font-family: var(--mr-font-titoli);
  font-size: 16px;
  font-weight: 600;
  color: var(--mr-oro-chiaro);
}

/* ==========================================================================
   Responsive — 1280px (menu a scomparsa), 992px e 576px
   ========================================================================== */

@media (max-width: 1280px) {
  .mr-nav__pannello {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--mr-profondo);
    border-bottom: 1px solid var(--mr-linea);
  }

  .mr-nav .mr-nav__pannello.collapse:not(.show) {
    display: none;
  }

  .mr-nav .mr-nav__pannello.show,
  .mr-nav .mr-nav__pannello.collapsing {
    display: flex;
  }

  .mr-nav__link-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .mr-nav__link {
    padding: 16px var(--mr-margine-laterale);
    border-bottom: 1px solid var(--mr-linea);
  }

  .mr-nav__azioni {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px var(--mr-margine-laterale);
  }

  .mr-nav__apri {
    display: flex;
  }
}

@media (max-width: 992px) {
  :root {
    --mr-margine-laterale: 20px;
  }

  .mr-nav {
    height: 64px;
    padding: 0 12px 0 20px;
    gap: 10px;
  }

  .mr-nav__nome {
    font-size: 14px;
  }

  .mr-testata {
    height: 260px;
  }

  .mr-testata__corpo {
    bottom: 24px;
  }

  .mr-testata__titolo {
    font-size: 34px;
  }

  .mr-testata__sottotitolo {
    font-size: 18px;
  }

  .mr-sezione {
    padding: 64px 0;
  }

  .mr-titolo-sezione {
    font-size: 32px;
  }

  .mr-accesso--fascia {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .mr-accesso--fascia .mr-accesso__campi {
    flex-direction: column;
    align-items: stretch;
  }

  .mr-accesso--fascia .mr-scelta {
    width: auto;
  }

  .mr-sezione--compatta {
    padding: 40px 0;
  }

  .mr-accesso--fascia .mr-accesso__titolo {
    width: auto;
  }

  .mr-footer {
    padding: 48px 0 28px;
  }

  .mr-footer__corpo {
    gap: 32px;
  }

  .mr-footer__base {
    flex-direction: column;
    align-items: flex-start;
  }

  .mr-guida {
    grid-template-columns: 1fr;
    padding: 32px 0 64px;
  }

  .mr-indice {
    padding: 0;
    background: transparent;
    border: 0;
  }

  .mr-indice > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    border: 1px solid var(--mr-oro-scuro);
    border-radius: 3px;
    background: rgba(15, 12, 9, 0.35);
    font-family: var(--mr-font-titoli);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--mr-oro-chiaro);
    list-style: none;
  }

  .mr-indice > summary::-webkit-details-marker {
    display: none;
  }

  .mr-indice[open] > summary {
    margin-bottom: 16px;
  }

  .mr-indice__gruppos,
  .mr-indice__gruppo {
    padding: 0 4px;
  }

  .mr-articolo {
    padding: 32px 24px 32px;
  }

  .mr-articolo__titolo {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .mr-sezione {
    padding: 48px 0;
  }

  .mr-testata__titolo {
    font-size: 28px;
  }

  .mr-accesso--card {
    width: 100%;
    padding: 24px;
  }

  .mr-footer__marchio {
    width: 100%;
  }

  .mr-footer__colonna {
    width: 100%;
  }
}