/* Stili applicativi del Reader. Usati dai Web Components tramite <link> nello
   shadow DOM (vedi components/*.ts) oppure globalmente per le sezioni che non
   necessitano di incapsulamento. */

/* ---------- layout root ---------- */

.mb-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mb-space-3) var(--mb-space-4);
  border-bottom: 1px solid var(--mb-color-border);
  background: var(--mb-color-bg-elevated);
  position: sticky;
  top: 0;
  z-index: 20;
}

.mb-brand {
  font-family: var(--mb-font-ui);
  font-size: var(--mb-font-size-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mb-topbar-actions {
  display: flex;
  gap: var(--mb-space-2);
  align-items: center;
}

.mb-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0; /* permette al breadcrumb di troncare invece di spingere fuori la topbar */
}

/* Breadcrumb fissa in topbar: Libro › Topic, sempre visibile a differenza di
   quella nel corpo del testo (Unità › Capitolo), che scorre via col contenuto. */
.mb-topbar-crumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding-left: 0.5rem;
  margin-left: 0.1rem;
  border-left: 1px solid var(--mb-color-border);
  font-family: var(--mb-font-ui);
  font-size: var(--mb-font-size-sm);
  color: var(--mb-color-text-muted);
}
.mb-topbar-crumb-icon svg,
.mb-topbar-crumb-sep svg {
  width: 14px;
  height: 14px;
  display: block;
}
.mb-topbar-crumb-icon { flex: 0 0 auto; opacity: 0.7; }
.mb-topbar-crumb-sep { flex: 0 0 auto; opacity: 0.5; }
.mb-topbar-crumb-book {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.mb-topbar-crumb-topic {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mb-color-text);
  font-weight: 600;
}
@media (max-width: 640px) {
  .mb-topbar-crumb-book { display: none; }
  .mb-topbar-crumb-sep:first-child { display: none; }
}

/* ---------- breakpoint telefono (≤640px) ---------- */
/* Il resto del layout (sidebar a drawer, colonna di lettura a max-width
   fisso, toolbar icone già con flex-wrap) regge già bene su schermi stretti
   — vedi nota del 14/08. Qui si sistemano solo i punti verificati come
   effettivamente a rischio: la card Home (affiancava cover+testo senza
   possibilità di andare a capo) e le dimensioni minime di tocco dei
   controlli, sotto la soglia consigliata di 44px su elementi solo-icona. */
@media (max-width: 640px) {
  .mb-topbar { padding: var(--mb-space-2) var(--mb-space-3); }

  .mb-home { padding: var(--mb-space-5) var(--mb-space-3); }
  .mb-home-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mb-space-4);
  }
  .mb-home-meta .mb-description { max-width: 100%; }
  .mb-home-meta .mb-author,
  .mb-home-meta .mb-kicker { text-align: center; }

  .mb-onboarding-card { padding: var(--mb-space-5) var(--mb-space-4); }

  /* Target di tocco: 44px è la soglia minima raccomandata (Apple HIG /
     Material Design) per elementi interattivi solo-icona — sotto questa
     soglia diventano difficili da colpire col dito su schermi piccoli. */
  .mb-icon-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .mb-action-chip,
  .mb-icon-action {
    min-height: 44px;
  }
  .mb-outline-node,
  .mb-trail-item {
    min-height: 44px;
    padding-top: var(--mb-space-2);
    padding-bottom: var(--mb-space-2);
  }
}

/* ---------- Home ---------- */

.mb-home {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mb-space-6) var(--mb-space-4);
}

.mb-home-card {
  display: flex;
  gap: var(--mb-space-6);
  max-width: 52rem;
  align-items: flex-start;
}

.mb-cover {
  width: 12rem;
  height: 16.5rem;
  border-radius: var(--mb-radius-md);
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--mb-space-4);
  color: #fff;
  font-family: var(--mb-font-ui);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: var(--mb-shadow-card);
  background-size: cover;
}

.mb-home-meta { flex: 1; }

.mb-home-meta .mb-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--mb-font-size-xs);
  color: var(--mb-color-text-faint);
  margin-bottom: var(--mb-space-2);
}

.mb-home-meta h1 {
  font-family: var(--mb-font-ui);
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: var(--mb-space-2);
}

.mb-home-meta .mb-author {
  color: var(--mb-color-text-muted);
  margin-bottom: var(--mb-space-4);
}

.mb-home-meta .mb-description {
  font-family: var(--mb-font-ui);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--mb-color-text-muted);
  margin-bottom: var(--mb-space-5);
  max-width: 34rem;
}

.mb-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-2);
  background: var(--mb-color-accent);
  color: #fff;
  padding: 0.75rem 1.4rem;
  border-radius: var(--mb-radius-md);
  font-size: var(--mb-font-size-sm);
  font-weight: 600;
  transition: transform var(--mb-transition-fast), opacity var(--mb-transition-fast);
}
.mb-btn-primary:hover { opacity: 0.92; }
.mb-btn-primary:active { transform: scale(0.98); }

/* ---------- reader shell ---------- */
/* La sidebar è sempre un pannello a scomparsa (drawer), sia su desktop sia su
   mobile: di default lascia tutto lo spazio alla lettura, e si apre solo con
   l'icona ☰ nella topbar (nota tecnica del 12/08: prima occupava spazio fisso
   su desktop). */

.mb-reader-shell {
  flex: 1;
  position: relative;
  min-height: 0;
}

.mb-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(20rem, 88vw);
  background: var(--mb-color-bg-elevated);
  border-right: 1px solid var(--mb-color-border);
  display: flex;
  flex-direction: column;
  z-index: 40;
  transform: translateX(-100%);
  transition: transform var(--mb-transition-medium);
  box-shadow: var(--mb-shadow-card);
}
.mb-sidebar.mb-sidebar-open {
  transform: translateX(0);
}
.mb-sidebar.mb-sidebar-open::after {
  content: "";
  position: fixed;
  inset: 0;
  left: min(20rem, 88vw);
  background: rgba(20, 18, 14, 0.25);
  z-index: -1;
}

/* variante destra: usata dal pannello di stile "Aa", speculare alla sidebar
   di navigazione a sinistra invece di restare un piccolo popover */
.mb-sidebar-right {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--mb-color-border);
  transform: translateX(100%);
}
.mb-sidebar-right.mb-sidebar-open {
  transform: translateX(0);
}
.mb-sidebar-right.mb-sidebar-open::after {
  left: auto;
  right: min(20rem, 88vw);
}

.mb-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--mb-space-4);
}
.mb-sidebar-footer {
  padding: var(--mb-space-3) var(--mb-space-4);
  border-top: 1px solid var(--mb-color-border);
}
.mb-sidebar-exit {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--mb-font-size-sm);
  color: var(--mb-color-text-muted);
  padding: 0.3rem 0;
}
.mb-sidebar-exit:hover { color: var(--mb-color-accent); }

.mb-sidebar-section-title {
  font-size: var(--mb-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--mb-color-text-faint);
}
.mb-style-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mb-space-4);
}
.mb-style-close {
  color: var(--mb-color-text-muted);
  font-size: var(--mb-font-size-sm);
  padding: 0.2rem 0.4rem;
  border-radius: var(--mb-radius-sm);
}
.mb-style-close:hover { background: var(--mb-color-bg-inset); }
.mb-style-close svg {
  width: 16px;
  height: 16px;
  display: block;
}
.mb-style-future-title {
  margin: var(--mb-space-5) 0 var(--mb-space-3);
}

/* ---------- griglia di anteprime font, stile Apple Books ---------- */

.mb-font-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mb-space-2);
  margin: var(--mb-space-2) 0 var(--mb-space-5);
}
.mb-font-option {
  border: 1px solid var(--mb-color-border);
  border-radius: var(--mb-radius-md);
  padding: 0.55rem var(--mb-space-2);
  font-size: 0.95rem;
  color: var(--mb-color-text);
  text-align: center;
  background: var(--mb-color-bg-elevated);
}
.mb-font-option:hover { border-color: var(--mb-color-accent); }
.mb-font-option-active {
  border-color: var(--mb-color-accent);
  background: var(--mb-color-accent-soft);
  color: var(--mb-color-accent);
  font-weight: 600;
}

/* ---------- cursori (dimensione, spaziatura, interlinea, adattamento) ---------- */

.mb-slider-row {
  margin-bottom: var(--mb-space-4);
}
.mb-slider-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.mb-slider-value {
  font-size: var(--mb-font-size-xs);
  color: var(--mb-color-text-faint);
  font-variant-numeric: tabular-nums;
}
.mb-slider {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--mb-color-bg-inset);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
.mb-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mb-color-accent);
  cursor: pointer;
  border: 2px solid var(--mb-color-bg-elevated);
  box-shadow: var(--mb-shadow-card);
}
.mb-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mb-color-accent);
  cursor: pointer;
  border: 2px solid var(--mb-color-bg-elevated);
  box-shadow: var(--mb-shadow-card);
}

/* ---------- modalità di navigazione future, annidate nella tab "Home" ---------- */

.mb-nav-modes {
  margin-top: var(--mb-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-2);
}
.mb-nav-mode-card {
  display: flex;
  gap: var(--mb-space-3);
  align-items: flex-start;
  padding: var(--mb-space-3);
  border: 1px dashed var(--mb-color-border);
  border-radius: var(--mb-radius-md);
}
.mb-nav-mode-icon { font-size: 1.1rem; color: var(--mb-color-text-faint); }
.mb-nav-mode-title {
  font-family: var(--mb-font-ui);
  font-weight: 600;
  color: var(--mb-color-text-muted);
  font-size: 0.9rem;
}
.mb-nav-mode-hint {
  font-size: var(--mb-font-size-xs);
  color: var(--mb-color-text-faint);
  margin-top: 2px;
}

.mb-sidebar h2 {
  font-size: var(--mb-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mb-color-text-faint);
  margin-bottom: var(--mb-space-3);
}

.mb-sidebar-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--mb-space-4);
  background: var(--mb-color-bg-inset);
  border-radius: var(--mb-radius-md);
  padding: 2px;
}
.mb-sidebar-tab {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.4rem;
  border-radius: var(--mb-radius-sm);
  font-size: var(--mb-font-size-sm);
  color: var(--mb-color-text-muted);
}
.mb-sidebar-tab[aria-selected="true"] {
  background: var(--mb-color-bg-elevated);
  color: var(--mb-color-accent);
  box-shadow: var(--mb-shadow-card);
}

.mb-tab-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.mb-tab-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.mb-sidebar-hint {
  font-size: var(--mb-font-size-sm);
  color: var(--mb-color-text-muted);
  margin-bottom: var(--mb-space-4);
}

.mb-guide-card {
  border: 1px solid var(--mb-color-border);
  border-radius: var(--mb-radius-md);
  padding: var(--mb-space-4);
}
.mb-guide-card-title {
  font-family: var(--mb-font-ui);
  font-weight: 600;
  font-size: 1.05rem;
  margin: var(--mb-space-1) 0 var(--mb-space-3);
}
.mb-guide-here {
  display: inline-block;
  font-size: var(--mb-font-size-xs);
  color: var(--mb-color-accent);
  font-weight: 600;
}
.mb-guide-resume { width: 100%; justify-content: center; }

/* ---------- indice completo del libro (tab "Guida") ---------- */

.mb-outline-unit {
  margin-bottom: var(--mb-space-4);
}
.mb-outline-unit-title {
  font-size: var(--mb-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--mb-color-text-faint);
  margin-bottom: var(--mb-space-2);
}
.mb-outline-chapter {
  margin-bottom: var(--mb-space-3);
}
.mb-outline-chapter-title {
  font-family: var(--mb-font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--mb-color-text);
  margin-bottom: 2px;
}
.mb-outline-node {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.35rem var(--mb-space-2);
  border-radius: var(--mb-radius-sm);
  font-size: var(--mb-font-size-sm);
}
.mb-outline-node-built {
  color: var(--mb-color-text-muted);
}
.mb-outline-node-built:hover {
  background: var(--mb-color-bg-inset);
}
.mb-outline-node-current {
  background: var(--mb-color-accent-soft);
  color: var(--mb-color-accent);
  font-weight: 600;
}
.mb-outline-node-disabled {
  color: var(--mb-color-text-faint);
  cursor: default;
}
.mb-outline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mb-color-border);
  flex-shrink: 0;
}
.mb-outline-dot-visited {
  background: var(--mb-color-accent);
}
.mb-outline-tag {
  margin-left: auto;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mb-color-accent);
  font-weight: 700;
  white-space: nowrap;
}
.mb-outline-tag-guide {
  color: var(--mb-color-generated);
}

.mb-placeholder-pane {
  color: var(--mb-color-text-muted);
  font-size: var(--mb-font-size-sm);
}
.mb-placeholder-title {
  font-family: var(--mb-font-ui);
  font-weight: 600;
  color: var(--mb-color-text);
  margin-bottom: var(--mb-space-2);
}

/* ---------- traccia dinamica (sostituisce l'indice fisso) ---------- */

.mb-trail-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: var(--mb-space-2);
  border-radius: var(--mb-radius-sm);
  font-size: var(--mb-font-size-sm);
  color: var(--mb-color-text-muted);
  margin-bottom: 2px;
}
.mb-trail-item:hover { background: var(--mb-color-bg-inset); }
.mb-trail-item[aria-current="true"] {
  background: var(--mb-color-accent-soft);
  color: var(--mb-color-accent);
  font-weight: 600;
}
.mb-trail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.4em;
}
.mb-trail-topic-label {
  font-size: var(--mb-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mb-color-text-faint);
  margin: var(--mb-space-3) 0 var(--mb-space-1);
}
.mb-trail-empty {
  font-size: var(--mb-font-size-sm);
  color: var(--mb-color-text-faint);
}

.mb-topic-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.mb-topic-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Sempre visibile, non solo su mobile: la sidebar aperta copre per intero
   l'angolo in alto a sinistra (compreso il bottone ☰ della topbar, che finisce
   sotto di lei), quindi senza questo pulsante non ci sarebbe modo di
   richiuderla da desktop. */
.mb-sidebar-close {
  display: block;
  margin-bottom: var(--mb-space-4);
  font-size: var(--mb-font-size-sm);
  color: var(--mb-color-text-muted);
}
/* ---------- colonna di lettura ---------- */

.mb-reading-column {
  padding: var(--mb-space-5) var(--mb-space-4) var(--mb-space-6);
  overflow-y: auto;
}

/* 18/9 (bug segnalato da Giorgio: "la pagina non scrolla" - solo quando il
   Reader gira dentro l'app, non aprendo reader.maxibook.ai da solo). Causa:
   quando <maxibook-app embedded> e' montato dentro apps/web (sia in
   browser puro sia nella webview di Electron - vedi WebReaderMount in
   apps/web/App.js), il body della pagina ha overflow:hidden per design -
   e' il reset consigliato da Expo per le ScrollView di React Native Web
   (vedi apps/web/dist/index.html, "These styles disable body scrolling if
   you are using <ScrollView>"). La finestra/documento li' non scrollera'
   MAI, mentre tutto il resto del Reader (.mb-app con min-height:100vh,
   .mb-reading-column senza un'altezza propria vincolata) e' disegnato
   assumendo che sia la finestra a scrollare (vedi il commento in
   scrollReadingToTop(), maxibook-app.ts). Fix: solo in questo contesto,
   .mb-reading-column diventa lei stessa il pannello che scrolla, dentro il
   contenitore a dimensione fissa che gia' la ospita (containerRef in
   WebReaderMount e' "position:absolute; inset:0", quindi ha gia' un'
   altezza precisa - la sfruttiamo). Lo standalone (reader.maxibook.ai
   aperto direttamente, senza l'attributo embedded) resta invariato: li' il
   body puo' scrollare normalmente, niente di questo si applica. */
maxibook-app[embedded] {
  display: block;
  height: 100%;
}
maxibook-app[embedded] .mb-app {
  height: 100%;
  min-height: 0;
}
maxibook-app[embedded] .mb-reading-column {
  position: absolute;
  inset: 0;
}

.mb-reading-inner {
  max-width: var(--mb-content-width);
  margin: 0 auto;
}

.mb-progress-track {
  height: 4px;
  background: var(--mb-color-bg-inset);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--mb-space-5);
}
.mb-progress-fill {
  height: 100%;
  background: var(--mb-color-accent);
  transition: width var(--mb-transition-medium);
}

.mb-chapter-kicker {
  font-size: var(--mb-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mb-color-text-faint);
  margin-bottom: var(--mb-space-2);
}

/* ---------- breadcrumb (Unità › Capitolo): il contesto nell'indice reale del
   libro, distinto dal titolo di pagina — quello resta sempre il Knowledge
   Item corrente, per non fare confusione quando si salta da un punto all'altro ---------- */

.mb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-size: var(--mb-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mb-color-text-faint);
  margin-bottom: var(--mb-space-3);
}
.mb-breadcrumb-sep {
  opacity: 0.55;
}

/* ---------- avviso di esplorazione: compare quando si è saltati su un altro
   knowledge item via link inline, con un modo a un click per tornare esattamente
   al punto di partenza (non solo "riprendi la guida" al punto più avanzato) ---------- */

.mb-explore-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mb-space-3);
  background: var(--mb-color-generated-soft);
  border: 1px solid var(--mb-color-generated);
  border-radius: var(--mb-radius-md);
  padding: var(--mb-space-3) var(--mb-space-4);
  margin-bottom: var(--mb-space-4);
  font-size: var(--mb-font-size-sm);
  color: var(--mb-color-text);
}
.mb-explore-banner-back {
  background: transparent;
  border: 1px solid var(--mb-color-generated);
  color: var(--mb-color-generated);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.mb-explore-banner-back:hover {
  background: var(--mb-color-generated);
  color: #fff;
}

/* ---------- blocchi editoriali ---------- */

.mb-block { margin-bottom: var(--mb-space-4); }

.mb-block-heading {
  font-family: var(--mb-font-reading);
  font-size: 1.6rem;
  line-height: 1.3;
  margin-bottom: var(--mb-space-4);
  margin-top: var(--mb-space-2);
}

.mb-block-paragraph {
  font-family: var(--mb-font-reading);
  font-size: var(--mb-font-size-base);
  line-height: var(--mb-line-height-reading);
  letter-spacing: var(--mb-letter-spacing);
  color: var(--mb-color-text);
}

/* link inline nel testo (stile Wikipedia): cliccabili, ma senza il blu da
   link classico — restano parte della tipografia del libro */
.mb-inline-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--mb-color-accent);
  transition: background var(--mb-transition-fast);
}
.mb-inline-link:hover {
  background: var(--mb-color-accent-soft);
}

.mb-block-definition,
.mb-block-example,
.mb-block-deepDive,
.mb-block-question {
  border-radius: var(--mb-radius-md);
  padding: var(--mb-space-4);
  background: var(--mb-color-bg-inset);
  border-left: 3px solid var(--mb-color-border);
}

.mb-block-callout {
  font-family: var(--mb-font-reading);
  font-style: italic;
  color: var(--mb-color-text-muted);
  border-left: 3px solid var(--mb-color-accent);
  padding-left: var(--mb-space-4);
  font-size: 1.02rem;
  letter-spacing: var(--mb-letter-spacing);
}

.mb-block-label {
  font-size: var(--mb-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--mb-color-text-faint);
  margin-bottom: var(--mb-space-2);
}

.mb-block-definition .mb-block-term {
  font-family: var(--mb-font-reading);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: var(--mb-space-1);
}

.mb-block-body {
  font-family: var(--mb-font-reading);
  line-height: var(--mb-line-height-reading);
  letter-spacing: var(--mb-letter-spacing);
  font-size: 1.02rem;
}

/* blocchi "generated" hanno un'etichetta discreta e un bordo caldo,
   restando tipograficamente identici al resto del libro (brief §17/§12) */
.mb-block[data-origin="generated"] .mb-block-definition,
.mb-block[data-origin="generated"] .mb-block-example,
.mb-block[data-origin="generated"] .mb-block-deepDive {
  border-left-color: var(--mb-color-generated);
  background: var(--mb-color-generated-soft);
}

.mb-block-question {
  border-left-color: var(--mb-color-generated);
  background: var(--mb-color-generated-soft);
}
.mb-block-question .mb-block-label { color: var(--mb-color-generated); }
.mb-block-question .mb-question-text {
  font-family: var(--mb-font-reading);
  font-weight: 600;
  font-style: italic;
  margin-bottom: var(--mb-space-3);
}

/* ---------- action bar ---------- */

.mb-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-2);
  margin-top: var(--mb-space-3);
  margin-bottom: var(--mb-space-5);
}

.mb-action-chip {
  border: 1px solid var(--mb-color-border);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: var(--mb-font-size-sm);
  color: var(--mb-color-text);
  background: var(--mb-color-bg-elevated);
  transition: background var(--mb-transition-fast), border-color var(--mb-transition-fast);
}
.mb-action-chip:hover {
  border-color: var(--mb-color-accent);
  background: var(--mb-color-accent-soft);
}
.mb-action-chip[data-variant="continue"] {
  border-color: var(--mb-color-accent);
  color: var(--mb-color-accent);
  font-weight: 600;
}
.mb-action-chip[data-variant="jump"] {
  border-color: var(--mb-color-generated);
  color: var(--mb-color-generated);
  background: var(--mb-color-generated-soft);
  font-weight: 600;
}

/* ---------- branch ---------- */

.mb-branch {
  margin: var(--mb-space-4) 0;
  padding: var(--mb-space-4);
  border: 1px dashed var(--mb-color-border);
  border-radius: var(--mb-radius-lg);
  background: var(--mb-color-bg-elevated);
  animation: mb-branch-in var(--mb-transition-medium);
}
@keyframes mb-branch-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.mb-branch-header {
  display: flex;
  align-items: center;
  gap: var(--mb-space-2);
  font-size: var(--mb-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mb-color-generated);
  margin-bottom: var(--mb-space-3);
}
.mb-branch-header::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mb-color-generated);
}

/* ---------- skeleton di caricamento (feedback leggero, brief §22) ---------- */

.mb-skeleton {
  border-radius: var(--mb-radius-md);
  padding: var(--mb-space-4);
  background: var(--mb-color-bg-inset);
  border-left: 3px solid var(--mb-color-border);
}
.mb-skeleton-line {
  height: 0.85rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--mb-color-border) 25%, var(--mb-color-bg) 50%, var(--mb-color-border) 75%);
  background-size: 200% 100%;
  animation: mb-shimmer 1.4s ease infinite;
  margin-bottom: var(--mb-space-2);
}
.mb-skeleton-line:nth-child(1) { width: 40%; }
.mb-skeleton-line:nth-child(2) { width: 92%; }
.mb-skeleton-line:nth-child(3) { width: 78%; }
@keyframes mb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- toolbar fissa a icone (Chiarisci / Esempio / Chiedi / Continua) ---------- */

.mb-icon-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mb-space-3);
  margin-top: var(--mb-space-5);
  padding-top: var(--mb-space-4);
  border-top: 1px solid var(--mb-color-border);
}

.mb-icon-toolbar-secondary {
  display: flex;
  gap: var(--mb-space-2);
}

.mb-icon-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--mb-color-border);
  font-size: var(--mb-font-size-sm);
  color: var(--mb-color-text-muted);
  background: var(--mb-color-bg-elevated);
  transition: background var(--mb-transition-fast), border-color var(--mb-transition-fast);
}
.mb-icon-action span:first-child { font-size: 1rem; }
.mb-icon-action:hover {
  border-color: var(--mb-color-accent);
  color: var(--mb-color-accent);
}
.mb-icon-action-primary {
  border-color: var(--mb-color-accent);
  background: var(--mb-color-accent);
  color: #fff;
  font-weight: 600;
}
.mb-icon-action-primary:hover { opacity: 0.92; color: #fff; }
.mb-icon-action-end {
  background: var(--mb-color-bg-inset);
  border-color: var(--mb-color-border);
  color: var(--mb-color-text-muted);
  font-weight: 600;
}
.mb-icon-action-end:hover {
  background: var(--mb-color-accent-soft);
  color: var(--mb-color-accent);
  border-color: var(--mb-color-accent);
}
/* "Continua" quando si sta esplorando fuori dalla guida principale: stesso
   ruolo, ma un colore diverso (lo stesso "caldo" dei contenuti generati) per
   rendere subito evidente che non si sta più seguendo la narrazione principale */
.mb-icon-action-branch {
  border-color: var(--mb-color-generated);
  background: var(--mb-color-generated);
  color: #fff;
}
.mb-icon-action-branch:hover { opacity: 0.92; color: #fff; }

/* ---------- domanda libera ---------- */

.mb-ask-form {
  display: flex;
  gap: var(--mb-space-2);
  margin-top: var(--mb-space-3);
}
/* L'attributo HTML `hidden` da solo non basta: una regola per classe come
   quella sopra (display:flex) ha più specificità della regola dello user-agent
   che nasconde gli elementi con `hidden`, e quindi vince — il box restava
   sempre visibile. Va reso esplicito qui. */
.mb-ask-form[hidden] {
  display: none;
}

.mb-ask-input {
  flex: 1;
  font-family: var(--mb-font-ui);
  font-size: 1rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--mb-color-border);
  border-radius: var(--mb-radius-sm);
  background: var(--mb-color-bg-elevated);
  color: var(--mb-color-text);
}
.mb-ask-input:focus { border-color: var(--mb-color-accent); }

.mb-ask-submit {
  padding: 0.6rem 1rem;
  border-radius: var(--mb-radius-sm);
  background: var(--mb-color-accent);
  color: #fff;
  font-size: var(--mb-font-size-sm);
  font-weight: 600;
}
.mb-ask-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- controlli topbar (☰ e Aa) ---------- */

.mb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.7rem;
  border-radius: var(--mb-radius-sm);
  font-size: var(--mb-font-size-sm);
  color: var(--mb-color-text-muted);
  border: 1px solid transparent;
}
.mb-icon-btn:hover { background: var(--mb-color-bg-inset); }
.mb-aa-btn { font-family: var(--mb-font-ui); font-weight: 700; }
/* Un <svg> inline senza width/height esplicito non ha una dimensione
   intrinseca affidabile: senza questa regola veniva renderizzato enorme e
   "vuoto" a schermo — si vedeva solo il riquadro del bottone al passaggio del
   mouse, mai l'icona stessa. */
.mb-icon-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ---------- pannello "Aa": impostazioni di lettura ---------- */
/* Non più un popover assoluto: è il contenuto della sidebar destra
   (.mb-sidebar-right), quindi segue il normale flusso del documento. */

.mb-reading-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mb-space-3);
}
.mb-reading-panel-row:last-child { margin-bottom: 0; }
.mb-reading-panel-label {
  font-size: var(--mb-font-size-xs);
  color: var(--mb-color-text-faint);
}
.mb-segmented {
  display: flex;
  gap: 2px;
  background: var(--mb-color-bg-inset);
  border-radius: 999px;
  padding: 2px;
}
.mb-segmented button {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  color: var(--mb-color-text-muted);
  line-height: 1;
}
.mb-segmented button[aria-pressed="true"] {
  background: var(--mb-color-bg-elevated);
  color: var(--mb-color-accent);
  box-shadow: var(--mb-shadow-card);
}

/* ---------- onboarding: questionario di primo avvio ---------- */
/* Schermata a sé, centrata, senza topbar né sidebar — l'unica cosa da fare
   è rispondere (o saltare). Stessa estetica calda dell'app (sfondo crema,
   kicker in serif) così non sembra un modulo estraneo incollato prima. */

.mb-app-onboarding {
  min-height: 100vh;
  display: flex;
}
.mb-onboarding {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mb-space-5);
  background: var(--mb-color-bg);
}
.mb-onboarding-card {
  width: 100%;
  max-width: 30rem;
  background: var(--mb-color-bg-elevated);
  border: 1px solid var(--mb-color-border);
  border-radius: var(--mb-radius-lg);
  box-shadow: var(--mb-shadow-card);
  padding: var(--mb-space-6) var(--mb-space-5);
  text-align: center;
}
.mb-onboarding-kicker {
  font-family: var(--mb-font-ui);
  font-weight: 700;
  font-size: var(--mb-font-size-sm);
  letter-spacing: 0.04em;
  color: var(--mb-color-text-faint);
  text-transform: uppercase;
  margin-bottom: var(--mb-space-4);
}
.mb-onboarding-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mb-space-2);
  margin-bottom: var(--mb-space-5);
}
.mb-onboarding-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--mb-color-bg-inset);
  border: 1px solid var(--mb-color-border);
}
.mb-onboarding-dot-active {
  background: var(--mb-color-accent);
  border-color: var(--mb-color-accent);
  transform: scale(1.3);
}
.mb-onboarding-dot-done {
  background: var(--mb-color-accent-soft);
  border-color: var(--mb-color-accent-soft);
}
.mb-onboarding-question {
  font-family: var(--mb-font-ui);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mb-color-text);
  margin: 0 0 var(--mb-space-5);
}
.mb-onboarding-options {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-2);
  margin-bottom: var(--mb-space-4);
}
.mb-onboarding-option {
  width: 100%;
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-radius: var(--mb-radius-md);
  border: 1px solid var(--mb-color-border);
  background: var(--mb-color-bg);
  color: var(--mb-color-text);
  font-size: var(--mb-font-size-sm);
  line-height: 1.45;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mb-onboarding-option:hover {
  border-color: var(--mb-color-accent);
  background: var(--mb-color-accent-soft);
}
.mb-onboarding-skip {
  color: var(--mb-color-text-faint);
  font-size: var(--mb-font-size-xs);
}
.mb-onboarding-skip:hover { color: var(--mb-color-text-muted); }

/* Plugin JavaScript con auto-resize (?autosize=1): niente altezze vincolate, il Reader
   occupa quanto serve al suo contenuto e il sito ospitante adegua l'iframe. */
html[data-mb-autosize] maxibook-app[embedded] { height: auto; }
html[data-mb-autosize] maxibook-app[embedded] .mb-app { height: auto; min-height: 0; }
html[data-mb-autosize] maxibook-app[embedded] .mb-reading-column { position: static; }
html[data-mb-autosize] body { min-height: 0; }


/* ---------- segnalazione contenuto AI (policy Microsoft Store 11.16) ---------- */

.mb-report-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--mb-space-2);
  padding: var(--mb-space-2) var(--mb-space-4);
  border-top: 1px solid var(--mb-color-border);
  background: var(--mb-color-bg-elevated);
  font-family: var(--mb-font-ui);
  font-size: var(--mb-font-size-xs);
  color: var(--mb-color-text-muted);
  text-align: center;
}
.mb-report-link {
  color: var(--mb-color-accent);
  font-size: var(--mb-font-size-xs);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.mb-report-link:hover { opacity: 0.8; }

.mb-report-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mb-space-4);
}
.mb-report-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 14, 0.45);
}
.mb-report-dialog {
  position: relative;
  width: 100%;
  max-width: 28rem;
  max-height: 100%;
  overflow-y: auto;
  padding: var(--mb-space-5) var(--mb-space-4);
  border-radius: var(--mb-radius-md);
  background: var(--mb-color-bg-elevated);
  color: var(--mb-color-text);
  box-shadow: var(--mb-shadow-card);
  font-family: var(--mb-font-ui);
}
.mb-report-title {
  margin: 0 0 var(--mb-space-2);
  font-size: var(--mb-font-size-lg);
}
.mb-report-text {
  margin: 0 0 var(--mb-space-4);
  font-size: var(--mb-font-size-sm);
  color: var(--mb-color-text-muted);
}
.mb-report-form {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-2);
}
.mb-report-label {
  font-size: var(--mb-font-size-sm);
  font-weight: 600;
}
.mb-report-textarea {
  resize: vertical;
  min-height: 5.5rem;
  font-family: var(--mb-font-ui);
}
.mb-report-error {
  margin: 0;
  font-size: var(--mb-font-size-sm);
  color: #b3261e;
}
.mb-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--mb-space-2);
  margin-top: var(--mb-space-3);
}
.mb-report-cancel {
  padding: 0.6rem 1rem;
  border-radius: var(--mb-radius-sm);
  border: 1px solid var(--mb-color-border);
  font-size: var(--mb-font-size-sm);
  color: var(--mb-color-text);
  cursor: pointer;
}
.mb-report-cancel:disabled { opacity: 0.5; cursor: not-allowed; }