.slides-root {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 7rem);
}

.slides-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-4);
}
.slides-header__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.slides-chapter {
  font-size: 0.78rem;
  color: var(--color-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  min-height: 1em;
  transition: opacity 220ms ease;
}
.slides-chapter--pulse {
  animation: chapter-fade 700ms ease-out;
  color: var(--color-ink-soft);
}
@keyframes chapter-fade {
  0%   { opacity: 0.3; letter-spacing: 0.15em; }
  100% { opacity: 1;   letter-spacing: 0.03em; }
}
@media (prefers-reduced-motion: reduce) {
  .slides-chapter--pulse { animation: none; }
}

.slides-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--color-line-soft);
  border-radius: 2px;
  overflow: hidden;
}

.slides-progress-fill {
  height: 100%;
  background: var(--color-accent);
  width: 0%;
  transition: width 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .slides-progress-fill { transition: none; }
}

.slides-count {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  min-width: 3.5em;
  text-align: right;
}

/* Stage fills remaining space; each slide handles its own centering */
.slides-stage {
  flex: 1;
  display: block;
  padding-bottom: var(--sp-4);
}

.slide {
  outline: none;
  max-width: 34rem;
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-4) 0 5.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--sp-2);
}
/* Only stretch to viewport when the card carries a viz/media that needs room */
.slide:has(.viz),
.slide:has(.quiz),
.slide:has(.vote),
.slide:has(.chart),
.slide:has(.code-runner),
.slide:has(.data-preview),
.slide:has(.figure),
.slide:has(.video-placeholder) {
  min-height: calc(100dvh - 12rem);
}

.slide[hidden] { display: none; }

.slides-resume {
  outline: none;
  max-width: 34rem;
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-4) 0;
  min-height: calc(100dvh - 12rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slides-resume .btn-row {
  margin-top: var(--sp-4);
}

/* Mobile-first sizes: compact and readable on 360-430px */
.slide__title {
  font-size: 1.35rem;           /* ~20-22px */
  line-height: 1.25;
  margin: 0 0 var(--sp-3);
  color: var(--color-ink);
}

.slide__title--sm {
  font-size: 1.2rem;
}

.slide__body {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 var(--sp-2);
}
.slide__body p {
  font-size: 1rem;              /* 16px */
  line-height: 1.55;
  color: var(--color-ink);
  margin: 0 0 var(--sp-4);
}
.slide__body p:last-child { margin-bottom: 0; }
.slide__body p + p { margin-top: 0; }
.slide__body a { color: #8b4a1e; }
.slide__body a:hover { color: #2a1f16; }

.slide__intro {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: 0 0 var(--sp-3);
}

.slide .callout {
  padding: var(--sp-3) var(--sp-4);
}

.slide .callout p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Sticky footer nav; solid background so viz content never bleeds through */
.slides-nav {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-4);
  background: var(--color-bg);
  border-top: var(--border-thin-soft);
  margin-top: auto;
  z-index: 1;
}

.slides-nav .btn {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
}

.slides-back[hidden] {
  visibility: hidden;
  display: inline-block;
}

.slides-next { margin-left: auto; }

.slides-next[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Visualization inside a slide: clear height so cy.fit has room */
.slide .viz {
  margin-top: var(--sp-2);
}

.slide .viz__stage {
  height: 45vh;
  min-height: 260px;
  max-height: 45vh;
}
.slide .viz--compact .viz__stage {
  height: 32vh;
  min-height: 220px;
  max-height: 340px;
}

/* Caption below viz/chart/diffusion — for text-viz-text single card */
.slide__caption {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: var(--sp-3) 0 0;
}

/* Chapter intro (full-card separator between chapters) */
.chapter-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  min-height: calc(100dvh - 12rem);
  text-align: center;
  animation: chapter-in 500ms ease-out both;
}
.chapter-intro__num {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.chapter-intro__title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0;
  max-width: 22ch;
}
@media (min-width: 768px) {
  .chapter-intro__title { font-size: 2.6rem; max-width: 24ch; }
}
.chapter-intro__hint {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: var(--sp-3) 0 0;
}
@keyframes chapter-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-intro { animation: none; }
}

/* Triple histogram (three mini-charts compared) */
.triple-histogram {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.triple__cell {
  padding: var(--sp-2);
  background: var(--color-surface);
  border: var(--border-thin-soft);
  border-radius: var(--radius-md);
}
.triple__title {
  font-size: 0.85rem;
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
  font-weight: 500;
}
.triple__meta {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-top: var(--sp-1);
}
.triple__empty {
  color: var(--color-muted);
  font-size: 0.85rem;
  padding: var(--sp-3);
}
@media (min-width: 768px) {
  .triple-histogram { grid-template-columns: 1fr 1fr 1fr; }
}

/* Notification-style panel (intercepted-message flavour) */
.notification-panel {
  background: var(--color-surface);
  border: var(--border-thin-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px rgba(40, 25, 15, 0.06);
  max-width: 28rem;
  width: 100%;
  margin: var(--sp-3) auto var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  animation: notif-fade 380ms ease-out both;
}
.notification-panel__meta {
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.3;
}
.notification-panel__meta--end {
  margin-top: var(--sp-1);
  font-style: italic;
}
.notification-panel__body {
  font-size: 1.05rem;
  color: var(--color-ink);
  line-height: 1.45;
  margin: var(--sp-2) 0;
  font-family: Georgia, "Times New Roman", serif;
}
@keyframes notif-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .notification-panel { animation: none; }
}

/* Intro can now contain block-level HTML (lists, paragraphs, strong) */
.slide__intro p {
  margin: 0 0 var(--sp-3);
}
.slide__intro p:last-child { margin-bottom: 0; }
.slide__intro ul {
  margin: 0 0 var(--sp-3);
  padding-left: 1.25rem;
}
.slide__intro li {
  margin: 0 0 var(--sp-2);
  line-height: 1.5;
}
.slide__intro li:last-child { margin-bottom: 0; }
.slide__intro strong { color: var(--color-ink); }

/* Body paragraphs already exist; make sure bold within body has weight */
.slide__body strong { color: var(--color-ink); }

/* Citation (small block below body/preview) */
.slide__citation {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-muted);
  margin: var(--sp-3) 0 0;
}
.slide__citation a {
  color: var(--color-accent, #8b4a1e);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 2px;
}

/* Data preview (monospace mini-block for raw data samples) */
.data-preview {
  background: var(--color-surface-alt, #f2ede5);
  border: var(--border-thin-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin: var(--sp-3) 0 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-ink);
  overflow-x: auto;
  white-space: pre;
}
.data-preview__legend {
  font-family: system-ui, sans-serif;
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin: var(--sp-2) 0 0;
  padding: 0 var(--sp-1);
  text-align: center;
}
.data-preview__caption {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-muted);
  margin: var(--sp-3) 0 0;
}

/* Vote block */
.vote {
  margin-top: var(--sp-3);
}
.vote__question {
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0 0 var(--sp-3);
}
.vote__options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.vote__option {
  min-height: 48px;
  justify-content: flex-start;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
}
.vote__option--picked {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}
.vote__reveal {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: var(--border-thin-soft);
}
.vote__reveal-msg {
  font-weight: 500;
  color: var(--color-ink);
  margin: 0 0 var(--sp-3);
  line-height: 1.4;
}
.vote__reveal-text {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 var(--sp-3);
}

/* Code runner (interactive) */
.code-viz {
  margin-bottom: var(--sp-3);
}
.code-runner__task {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-ink);
  padding: var(--sp-3);
  background: var(--color-surface-alt, #f2ede5);
  border-left: 3px solid var(--color-accent, #8b4a1e);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--sp-2);
}
.code-runner__result {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-ink);
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-surface);
  border: var(--border-thin-soft);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.code-runner__warn {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: var(--sp-2) 0 0;
}
.code-runner__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-3);
}
.code-runner__quick-label {
  font-size: 0.85rem;
  color: var(--color-muted);
}
.code-runner__quick-btn {
  padding: var(--sp-1) var(--sp-3);
  font-size: 0.9rem;
  min-width: 3rem;
  font-variant-numeric: tabular-nums;
}

/* Quizset (multiple sequential quizzes on one card) */
.quizset {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.quizset__q {
  padding: var(--sp-3);
  background: var(--color-surface);
  border: var(--border-thin-soft);
  border-radius: var(--radius-md);
}
.quizset__num {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}

/* Mirror (two networks side-by-side or toggled) */
.mirror {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.mirror__toggle {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-bottom: var(--border-thin-soft);
}
.mirror__toggle .btn {
  flex: 1;
  min-height: 40px;
  font-size: var(--fs-sm);
}
.mirror__cell {
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mirror__cap {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-ink);
  border-bottom: var(--border-thin-soft);
}
.mirror__stage {
  height: 260px;
  min-height: 220px;
  background: var(--color-bg);
}
/* Phone: toggle between sides, only one visible */
.mirror--left  .mirror__cell--right { display: none; }
.mirror--right .mirror__cell--left  { display: none; }
@media (min-width: 768px) {
  .mirror { grid-template-columns: 1fr 1fr; grid-template-areas: "toggle toggle" "l r"; }
  .mirror__toggle { grid-area: toggle; }
  .mirror__cell--left { grid-area: l; }
  .mirror__cell--right { grid-area: r; }
  /* Both visible on desktop */
  .mirror--left  .mirror__cell--right,
  .mirror--right .mirror__cell--left  { display: flex; }
  .mirror__toggle { display: none; }
  .mirror__stage { height: 320px; }
}

/* Recolor buttons pulse when active */
.recolor-btn.btn--primary { box-shadow: 0 0 0 3px rgba(139, 74, 30, 0.15); }

/* Mission mode */
.mission-presets {
  padding: var(--sp-2) 0 0;
  border-top: var(--border-thin-soft);
  margin-top: var(--sp-2);
}
.mission-presets__label {
  font-size: 0.8rem;
  color: var(--color-muted);
  align-self: center;
  margin-right: var(--sp-2);
}

/* Chart link target (list of names after tapping a row/bar) — LEGACY, unused
   now that freq has its own list state. Kept in case another chart wants it. */
.chart__link-target {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: #ede2cf;
  border-left: 3px solid #8b4a1e;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-ink);
  min-height: 3rem;
}

/* Freq third state: LISTA. Fills the whole card, replaces table + graph. */
.chart__freq-list {
  padding: var(--sp-2) 0;
}
.chart__freq-list__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.chart__freq-list__head {
  font-size: 1rem;
  color: var(--color-ink);
}
.chart__freq-list__ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 4px 12px;
  font-size: 0.92rem;
  color: var(--color-ink);
}
.chart__freq-list__ul li {
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--color-surface-alt, #f2ede5);
}
.chart__freq-list__deg {
  color: var(--color-ink-secondary, #5c5346);
  font-size: 0.85rem;
}
.chart__freq__tappable { cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.chart__freq__tappable:hover {
  background-color: #e8c9a0;
  color: #2a1f16;
}
.chart__freq__tappable:hover th { color: #2a1f16; }

.chart__toggle {
  display: flex;
  width: max-content;
  gap: 0;
  margin: 0 auto var(--sp-3);
  padding: 3px;
  background: var(--color-surface-alt, #f2ede5);
  border-radius: 999px;
}
.chart__freq-view { width: 100%; }
.chart__freq-view[hidden] { display: none !important; }
.chart__toggle__btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-ink-secondary, #5c5346);
  padding: 6px 18px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 999px;
  min-width: 84px;
  transition: background-color 150ms ease, color 150ms ease;
}
.chart__toggle__btn:hover { color: var(--color-ink); }
.chart__toggle__btn.is-active {
  background: var(--color-surface, #fbf7ef);
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 0 var(--sp-2);
  font-size: 0.8rem;
  color: var(--color-ink-secondary, #5c5346);
}
.chart__legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.chart__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.chart__svg-wrap--hbars { max-height: none; }

.sim-step__rules {
  background: var(--color-surface-alt, #f2ede5);
  border-radius: 8px;
  padding: var(--sp-3) var(--sp-4);
  margin: 0 auto var(--sp-3);
  max-width: 46rem;
}
.sim-step__rules-title {
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  text-transform: uppercase;
}
.sim-step__rules ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  color: var(--color-ink);
  line-height: 1.5;
}
.sim-step__rules li + li { margin-top: 0.35rem; }
.sim-step__count {
  text-align: center;
  font-size: 1.05rem;
  color: var(--color-ink);
  margin-top: var(--sp-3);
}
.sim-step__buttons { justify-content: center; }
.sim-step__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-3);
}
.sim-step__chips-label {
  font-size: 0.9rem;
  color: var(--color-ink);
}
.sim-step__chips-hint {
  font-size: 0.85rem;
  color: var(--color-ink-secondary, #5c5346);
  margin-left: var(--sp-1);
}
.sim-step__chip { min-width: 84px; }

/* Sim-step pre-controls: source picker + step buttons + counter, placed
   ABOVE the graph so the presenter can run without scrolling. Compact
   button size so the entire strip fits on one visual line at desktop. */
.sim-step__pre-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 auto 8px;
  max-width: 46rem;
}
.sim-step__pre-controls .sim-step__chips {
  margin-bottom: 0;
  gap: 4px;
}
.sim-step__pre-controls .btn,
.mission__pre-controls .btn {
  padding: 4px 12px;
  min-height: 30px;
  min-width: 0;
  font-size: 0.82rem;
  letter-spacing: 0;
  border-radius: 6px;
}
.sim-step__pre-controls .sim-step__chip {
  min-width: 0;
  padding: 4px 10px;
}
.sim-step__pre-controls .sim-step__buttons {
  gap: 6px;
  justify-content: center;
}
.sim-step__pre-controls .sim-step__count {
  font-size: 0.9rem;
  margin-top: 2px;
}
.slide .viz--sim-compact .viz__stage {
  height: 34vh;
  min-height: 220px;
  max-height: 340px;
}
@media (min-width: 768px) {
  .slide .viz--sim-compact .viz__stage {
    height: 40vh;
    min-height: 260px;
    max-height: 380px;
  }
}

/* Mission pre-controls: fișe + Trimite + step-bar + status ABOVE the graph.
   Compact so everything fits without scrolling on a laptop. */
.mission__pre-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 auto 8px;
  max-width: 46rem;
}
.mission__pre-controls .diff-count {
  text-align: center;
  font-size: 0.9rem;
  margin: 0;
}
.mission__pre-controls .mission-fiches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.mission__pre-controls .diff-buttons {
  gap: 6px;
  justify-content: center;
}
.mission__pre-controls .mission-step__count {
  font-size: 0.85rem;
}
/* Fișele compacte pentru pre-controls — trei pe un rând fără să domine cardul */
.mission__pre-controls .mission-fiche {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  padding: 4px 8px;
  font-size: 0.75rem;
  line-height: 1.25;
  border-radius: 5px;
}
.mission__pre-controls .mission-fiche__name {
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 1px;
}
.mission__pre-controls .mission-fiche__meta {
  font-size: 0.68rem;
  margin-bottom: 2px;
}
.mission__pre-controls .mission-fiche__row {
  font-size: 0.68rem;
  padding: 0;
  gap: 6px;
}
.mission__pre-controls .mission-fiche__row span { color: var(--color-muted); }
.mission__pre-controls .mission-fiche__row strong { margin-left: 2px; }

.lesson-table {
  width: 100%;
  max-width: 42rem;
  margin: var(--sp-3) auto;
  border-collapse: collapse;
  font-size: 0.95rem;
  color: var(--color-ink);
}
.lesson-table th,
.lesson-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-line-soft, #e5dccb);
  vertical-align: baseline;
}
.lesson-table th {
  font-weight: 500;
  color: var(--color-ink-secondary, #5c5346);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lesson-table td:last-child,
.lesson-table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.measure-tabs__tabs {
  display: flex;
  gap: 0;
  padding: 3px;
  background: var(--color-surface-alt, #f2ede5);
  border-radius: 999px;
  width: max-content;
  margin: 0 auto var(--sp-3);
}
.measure-tabs__tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-ink-secondary, #5c5346);
  padding: 6px 18px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 999px;
  min-width: 100px;
  transition: background-color 150ms ease, color 150ms ease;
}
.measure-tabs__tab:hover { color: var(--color-ink); }
.measure-tabs__tab.is-active {
  background: var(--color-surface, #fbf7ef);
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.measure-tabs__pane { width: 100%; }
.measure-tabs__map-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.measure-tabs__map-caption {
  text-align: center;
  font-size: 1rem;
  color: var(--color-ink);
  margin-top: var(--sp-2);
  padding: 0 var(--sp-3);
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}
.measure-tabs__paths-list {
  display: block;
  font-size: 0.85rem;
  margin-top: 0.35rem;
  line-height: 1.5;
}
.measure-tabs__map-detail {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-ink-secondary, #5c5346);
  min-height: 1.4rem;
  margin: var(--sp-2) 0 var(--sp-1);
}
/* Cytoscape container for the ego map — fixed height so cy renders. */
.measure-tabs__cy {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  height: 320px;
  background: var(--color-surface, #fbf7ef);
  border-radius: 6px;
}
@media (min-width: 768px) {
  .measure-tabs__cy { height: 360px; }
}

/* Strategy duel: two panels side by side on desktop, stacked on mobile. */
.strategy-duel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin: 0 auto;
  max-width: 780px;
}
@media (max-width: 720px) {
  .strategy-duel { grid-template-columns: 1fr; }
}
.strategy-duel__panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
}
.strategy-duel__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.strategy-duel__buttons .btn {
  padding: 3px 8px;
  font-size: 0.75rem;
  min-width: 0;
}
.strategy-duel__caption {
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-ink);
  line-height: 1.4;
}
.strategy-duel__compare {
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-ink);
  margin-top: var(--sp-3);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* Thesis card — closing slide, presentation-style. */
.thesis {
  max-width: 40rem;
  margin: var(--sp-6) auto;
  text-align: center;
  line-height: 1.45;
}
.thesis__num {
  font-size: 1.2rem;
  color: var(--color-ink);
  margin: 0 0 var(--sp-6);
  font-variant-numeric: tabular-nums;
}
.thesis__punch {
  font-size: 2rem;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.25;
  margin: var(--sp-8) auto var(--sp-6);
}
.thesis__note {
  font-size: 0.95rem;
  color: var(--color-ink-secondary, #5c5346);
  margin: 0 auto var(--sp-6);
  max-width: 34rem;
}
.thesis__end {
  font-size: 0.8rem;
  color: var(--color-ink-secondary, #5c5346);
  margin: var(--sp-6) 0 0;
  font-style: italic;
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .thesis__punch { font-size: 1.5rem; }
  .thesis__num { font-size: 1.05rem; }
}

/* Zone-overlap duel: two panels side by side on desktop, stacked on mobile. */
.overlap-duel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin: 0 auto;
  max-width: 900px;
}
@media (max-width: 720px) {
  .overlap-duel { grid-template-columns: 1fr; }
}
.overlap-duel__cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: stretch;
}
.overlap-duel__title {
  text-align: center;
  font-size: 1rem;
  color: var(--color-ink);
}
.overlap-duel__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  font-size: 0.88rem;
  color: var(--color-ink);
}
.overlap-duel__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.overlap-duel__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Compact stage for mission cards so the whole card fits in one viewport. */
.slide .viz--mission-compact .viz__stage {
  height: 30vh;
  min-height: 200px;
  max-height: 320px;
}
@media (min-width: 768px) {
  .slide .viz--mission-compact .viz__stage {
    height: 36vh;
    min-height: 240px;
    max-height: 360px;
  }
}

.mission-step {
  align-items: center;
  gap: var(--sp-3);
  justify-content: center;
  padding: var(--sp-2) 0;
}
.mission-step__count {
  font-size: 1rem;
  color: var(--color-ink);
}

.coverage-maps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin: 0 auto;
  max-width: 60rem;
}
.coverage-maps__cell {
  background: var(--color-surface, #fbf7ef);
  border-radius: 8px;
  padding: var(--sp-3);
  text-align: center;
}
.coverage-maps__cap {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
}
.coverage-maps__stat {
  font-size: 1.1rem;
  color: var(--color-ink);
  margin-top: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.coverage-maps__seeds {
  font-size: 0.78rem;
  color: var(--color-ink-secondary, #5c5346);
  margin-top: 0.35rem;
  line-height: 1.35;
}

.friends-tabs__tabs {
  display: flex;
  gap: 0;
  padding: 3px;
  background: var(--color-surface-alt, #f2ede5);
  border-radius: 999px;
  width: max-content;
  margin: 0 auto var(--sp-3);
}
.friends-tabs__tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-ink-secondary, #5c5346);
  padding: 6px 16px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 999px;
  min-width: 80px;
  transition: background-color 150ms ease, color 150ms ease;
}
.friends-tabs__tab:hover { color: var(--color-ink); }
.friends-tabs__tab.is-active {
  background: var(--color-surface, #fbf7ef);
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.friends-tabs__stage { max-width: 400px; margin: 0 auto; }
.friends-tabs__stat {
  text-align: center;
  font-size: 1rem;
  color: var(--color-ink);
  margin-top: var(--sp-2);
}
.friends-tabs__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: 0.82rem;
  color: var(--color-ink-secondary, #5c5346);
}
.friends-tabs__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.friends-tabs__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Character chips (C17) */
.char-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  padding: var(--sp-2);
}
@media (min-width: 768px) {
  .char-chips { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
.char-chip {
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}
.char-chip:hover { border-color: var(--color-line); }
.char-chip--active {
  border-color: var(--color-accent, #8b4a1e);
  background: var(--color-surface-alt, #f2ede5);
}
.char-chip__role {
  font-size: 0.7rem;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.char-chip__name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  color: var(--color-ink);
  margin: 2px 0;
}
.char-chip__stat {
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  line-height: 1.3;
}

/* Paradox block (C19) */
.paradox { margin-top: var(--sp-3); }
.paradox__vote { margin-bottom: var(--sp-4); }
.paradox__reveal { border-top: var(--border-thin-soft); padding-top: var(--sp-3); }
.paradox__subnet { margin: var(--sp-2) 0; }
.paradox__hint {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-ink);
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-surface-alt, #f2ede5);
  border-radius: var(--radius-sm);
  margin: var(--sp-2) 0;
}
.paradox__tracker {
  font-size: 0.9rem;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--sp-3);
  text-align: center;
}
.paradox__numbers {
  padding: var(--sp-3);
  background: var(--color-surface);
  border: var(--border-thin-soft);
  border-radius: var(--radius-md);
  margin-top: var(--sp-3);
}
.paradox__numbers p { margin: 0 0 var(--sp-2); font-size: 0.95rem; line-height: 1.5; }
.paradox__numbers p:last-child { margin-bottom: 0; }

/* 4-state paradox card */
.paradox__mechanism,
.paradox__application {
  border-top: var(--border-thin-soft);
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
}
.paradox__section-title {
  font-family: Georgia, serif;
  font-size: 1.15rem;
  color: var(--color-ink);
  margin: 0 0 var(--sp-3);
  font-weight: 500;
}
.paradox__msg {
  font-size: 1.05rem;
  color: var(--color-ink);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  background: #ede2cf;
  border-left: 3px solid #8b4a1e;
  border-radius: 4px;
}
.paradox__bars { margin: var(--sp-3) 0; }
.paradox__stat {
  font-size: 1rem;
  color: var(--color-ink);
  margin: var(--sp-3) 0;
  line-height: 1.5;
}
.paradox__punch {
  font-size: 1.5rem;
  color: var(--color-ink);
  margin: var(--sp-4) 0;
  text-align: center;
  font-weight: 500;
  line-height: 1.3;
}
.paradox__punch strong { color: #a3341f; font-size: 1.9rem; }
.paradox__note {
  font-size: 0.9rem;
  color: var(--color-ink-secondary, #5c5346);
  margin: var(--sp-3) 0 var(--sp-4);
  font-style: italic;
  line-height: 1.5;
}
.paradox__star { margin: var(--sp-3) 0 var(--sp-4); }
.paradox__mechanism p,
.paradox__application p {
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 var(--sp-3);
  color: var(--color-ink);
}
@media (max-width: 640px) {
  .paradox__punch { font-size: 1.2rem; }
  .paradox__punch strong { font-size: 1.5rem; }
}

/* Compare-three (three side-by-side / stacked networks) */
.compare-three {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.compare-three__cell {
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.compare-three__cap {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-ink);
  border-bottom: var(--border-thin-soft);
}
.compare-three__stage {
  height: 220px;
  min-height: 200px;
  background: var(--color-bg);
}
.compare-three__foot {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  border-top: var(--border-thin-soft);
}
@media (min-width: 768px) {
  .compare-three { grid-template-columns: 1fr 1fr 1fr; }
  .compare-three__stage { height: 260px; }
}

/* Chart (histogram, bars, ...) */
.chart {
  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  margin-top: var(--sp-2);
  max-height: 45vh;
  overflow: hidden;
}
@media (min-width: 768px) {
  .chart { max-height: 55vh; }
}
.chart__svg-wrap {
  overflow: visible;
}
/* Cap only the tall inline charts (histograms, states) so they do not blow
   past the viewport; freq bars are compact and paired with a table and a
   name list, so they get their natural size. */
.chart__svg-wrap:not(.chart__svg-wrap--freq) svg {
  max-height: 40vh;
}
@media (min-width: 768px) {
  .chart__svg-wrap:not(.chart__svg-wrap--freq) svg { max-height: 48vh; }
}
.chart__svg-wrap--freq svg {
  height: auto;
  max-height: none;
  display: block;
  margin: 0 auto;
}
.chart__svg-wrap--freq { overflow: visible; max-height: none; }
.chart__freq {
  border-collapse: collapse;
  margin: 0 auto var(--sp-2);
  font-size: 0.9rem;
  color: var(--color-ink);
}
.chart__freq th, .chart__freq td {
  padding: 3px 8px;
  text-align: right;
  border-bottom: 1px solid var(--color-line-soft);
  font-variant-numeric: tabular-nums;
}
.chart__freq th:first-child { text-align: left; }
.chart__freq__total th, .chart__freq__total td { font-weight: 500; }
.chart__note {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin: 0 auto var(--sp-3);
  padding: 0 var(--sp-2);
  text-align: center;
  max-width: 40rem;
}

.chart__svg-wrap {
  width: 100%;
}

.chart__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: 0 var(--sp-2);
}

.chart__slider {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  flex: 1;
  min-width: 200px;
}

.chart__slider input[type="range"] {
  flex: 1;
  min-width: 80px;
  accent-color: var(--color-accent);
}

.chart__slider output {
  min-width: 1.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.chart__meta {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin-left: auto;
}

/* Diffusion controls (part 2) */
.diffusion-controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--border-thin-soft);
  background: var(--color-surface);
}

.diff-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.diff-slider {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  flex: 1;
  min-width: 200px;
}

.diff-slider input[type="range"] {
  flex: 1;
  min-width: 100px;
  accent-color: var(--color-accent);
}

.diff-slider output {
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.diff-count {
  font-size: var(--fs-sm);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.diff-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.diff-buttons .btn {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
}

.diff-curve {
  display: block;
  width: 100%;
  height: 50px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}

.diff-hint {
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

/* Legend below the stage (compact so 9 chips fit on 2 rows on phone) */
.viz__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: var(--sp-2) var(--sp-3) 0;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  line-height: 1.4;
}

.viz__legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.viz__legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .viz__legend { font-size: var(--fs-xs); gap: var(--sp-2) var(--sp-3); }
  .viz__legend-dot { width: 10px; height: 10px; }
}

/* Sequential gradient legend for openness / degree schemes */
.viz__gradient {
  position: relative;
  width: 100%;
  max-width: 260px;
  height: 16px;
  border-radius: 8px;
  margin: 4px auto 0;
  border: 1px solid var(--color-line);
}
.viz__gradient-label {
  position: absolute;
  top: 18px;
  font-size: 0.7rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.viz__gradient-label--left  { left: 0; }
.viz__gradient-label--right { right: 0; }

/* Class-network mode: 9 aggregated nodes with log-scaled edges */
.class-net__stage {
  width: 100%;
  height: 460px;
  background: var(--color-page);
  border: 1px solid var(--color-line);
  border-radius: 6px;
  margin-bottom: var(--sp-2);
}
.class-net__info {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  padding: var(--sp-1) var(--sp-2);
  min-height: 1.5em;
}
.class-net__legend { margin-top: var(--sp-1); }

/* Mission candidate fișe: rând de cărți sub simulator */
.mission-fiches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
}
.mission-fiche {
  flex: 1 1 140px;
  min-width: 140px;
  max-width: 220px;
  background: var(--color-surface, #faf7f2);
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: var(--sp-2);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 150ms ease, border-color 150ms ease;
}
.mission-fiche:hover {
  background: rgba(0,0,0,0.03);
  border-color: var(--color-ink-soft);
}
.mission-fiche__name {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-ink);
}
.mission-fiche__meta {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-bottom: var(--sp-1);
}
.mission-fiche__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  padding: 2px 0;
}
.mission-fiche__row strong { font-variant-numeric: tabular-nums; color: var(--color-ink); }

/* Openness duo mode: two ego networks side by side, colored by class */
.openness-duo {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  margin-bottom: var(--sp-3);
}
@media (min-width: 720px) {
  .openness-duo { grid-template-columns: 1fr 1fr; }
}
.openness-duo__cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: rgba(0,0,0,0.02);
  border-radius: 6px;
  padding: var(--sp-2);
}
.openness-duo__cap { font-size: 0.98rem; }
.openness-duo__stage {
  height: 260px;
  background: var(--color-page);
  border-radius: 4px;
  border: 1px solid var(--color-line);
}
.openness-duo__nums {
  display: flex;
  gap: var(--sp-3);
  font-size: 0.82rem;
  color: var(--color-ink-soft);
}
.openness-duo__nums strong { font-variant-numeric: tabular-nums; }
.openness-duo__ranking {
  padding: var(--sp-2);
  background: rgba(0,0,0,0.03);
  border-radius: 4px;
  font-size: 0.88rem;
}
.openness-duo__ranking-title {
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--sp-1);
}
.openness-duo__ranking-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  padding: 2px 0;
  gap: var(--sp-2);
  color: var(--color-ink-soft);
}
.openness-duo__ranking-row strong { font-variant-numeric: tabular-nums; color: var(--color-ink); }

/* Duel mode UI (2 or 3 side-by-side ego diffusions) */
.duel {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
  margin-bottom: var(--sp-2);
}
@media (min-width: 720px) {
  /* Column count is set inline via grid.style.gridTemplateColumns to
     match the actual slot count (2 or 3). Fallback: 3-up on desktop. */
  .duel:not([style*="grid-template-columns"]) { grid-template-columns: repeat(3, 1fr); }
}
.duel__cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: rgba(0,0,0,0.02);
  border-radius: 6px;
  padding: var(--sp-2);
}
.duel__cap {
  font-size: 0.95rem;
}
.duel__cap-sub {
  color: var(--color-muted);
  font-size: 0.8rem;
  margin-left: var(--sp-1);
}
.duel__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  font-size: 0.78rem;
  color: var(--color-ink-soft);
}
.duel__stats strong { font-variant-numeric: tabular-nums; }
.duel__reach { margin-left: auto; }
.duel__stage {
  height: 220px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: var(--color-page);
}

/* Ranking (slopegraph) chart */
.chart__wrap--ranking { display: flex; flex-direction: column; gap: var(--sp-2); }
.chart__svg--ranking {
  width: 100%;
  max-width: 720px;
  height: auto;
  background: var(--color-page);
  border: 1px solid var(--color-line);
  border-radius: 4px;
}

/* Scatter + Strategies chart */
.chart__wrap--scatter,
.chart__wrap--strategies { display: flex; flex-direction: column; gap: var(--sp-2); }
.chart__meta--corr {
  font-size: 1.05rem;
  color: var(--color-ink);
  padding: var(--sp-1) var(--sp-2);
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
  align-self: flex-start;
}
.chart__meta--corr strong { font-variant-numeric: tabular-nums; }
.chart__svg--scatter,
.chart__svg--strategies {
  width: 100%;
  max-width: 720px;
  height: auto;
  background: var(--color-page);
  border: 1px solid var(--color-line);
  border-radius: 4px;
}
.chart__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

/* Try-break mode UI */
.try-break__modes { margin-bottom: var(--sp-2); }
.try-break__quick { flex-wrap: wrap; gap: var(--sp-1); }
.diff-hint--muted {
  font-size: 0.85rem;
  color: var(--color-muted);
  border-left: 3px solid var(--color-line);
  padding-left: var(--sp-3);
  margin-top: var(--sp-2);
}

/* Slightly bigger on wider screens, but keep line length short */
@media (min-width: 768px) {
  .slide { padding: var(--sp-5) 0; max-width: 36rem; }
  .slide__title { font-size: 1.7rem; }
  .slide__title--sm { font-size: 1.4rem; }
  .slide__body p { font-size: 1.1rem; }
  .slide__intro { font-size: 1.05rem; }
  .slide .viz__stage {
    height: 55vh;
    min-height: 320px;
    max-height: 55vh;
  }
  .slide .viz--compact .viz__stage {
    height: 38vh;
    min-height: 240px;
    max-height: 380px;
  }
}

@media (min-width: 1024px) {
  .slide { max-width: 40rem; }
}