.visualization {
  display: grid;
  gap: var(--space-4, 1.5rem);
  margin-block: var(--space-5, 2rem);
  padding-block: var(--space-4, 1.5rem);
  padding-inline: var(--space-4, 1.5rem);
  border: var(--border-strong, 2px solid currentColor);
  border-radius: 0.75rem;
  background: var(--color-surface, Canvas);
  color: var(--color-ink, CanvasText);
}

.visualization :is(button, input, select):focus-visible {
  outline: 3px solid var(--color-focus, currentColor);
  outline-offset: 3px;
}

.visualization :is(button, input, select) {
  min-inline-size: 24px;
  min-block-size: 24px;
}

.visualization__components,
.visualization__nodes,
.visualization__states,
.visualization__ordered-model,
.visualization__causal-model,
.visualization__relationships,
.visualization__timeline-phases,
.visualization__timeline-events,
.visualization__simulation-states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--space-3, 1rem);
  padding-inline-start: 0;
}

.visualization__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.75rem);
  align-items: center;
}

.visualization.is-enhanced .visualization__controls:not([hidden]) {
  border-block-start: 2px solid currentColor;
  padding-block-start: var(--space-3, 1rem);
}

.visualization__model-node.is-active,
.visualization__model-edge.is-active {
  border-block-end: 3px double currentColor;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
}

.visualization.is-complete {
  border-style: double;
  border-width: 4px;
}

.visualization.has-runtime-error {
  border-style: dashed;
}

.visualization.has-runtime-error .visualization__current-status {
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
}

.visualization__table {
  inline-size: 100%;
  border-collapse: collapse;
}

.visualization__table :is(th, td) {
  padding-block: var(--space-2, 0.75rem);
  padding-inline: var(--space-2, 0.75rem);
  border-block-end: 1px solid var(--color-border, currentColor);
  text-align: start;
}

.visualization__current-status,
.visualization [aria-current="step"] {
  border: 3px double currentColor;
  font-weight: 700;
}

.visualization__announcement {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.visualization [aria-current="step"]::before {
  content: "";
  display: inline-block;
  inline-size: 0.65em;
  block-size: 0.65em;
  margin-inline-end: 0.45em;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.visualization__nodes > *,
.visualization__states > *,
.visualization__ordered-model > *,
.visualization__components > *,
.visualization__timeline-phases > *,
.visualization__timeline-events > * {
  position: relative;
  padding-block: var(--space-2, 0.75rem);
  padding-inline: var(--space-3, 1rem);
  border: 1px solid var(--color-border, currentColor);
  border-radius: 0.5rem;
}

.visualization--flow,
.visualization--hierarchy,
.visualization--comparison,
.visualization--state-loop,
.visualization--causal,
.visualization--timeline,
.visualization--network,
.visualization--memory,
.visualization--matrix,
.visualization--state-machine {
  container-type: inline-size;
}

.visualization :is(dt, dd, li, th, td) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.visualization--comparison .visualization__table,
.visualization--matrix .visualization__table {
  inline-size: 100%;
}

.visualization--causal .visualization__causal-model {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-auto-flow: row;
  gap: var(--space-3, 1rem);
}

.visualization--hierarchy .visualization__hierarchy {
  display: block;
}

.visualization--hierarchy .visualization__hierarchy > ul {
  margin-block: 0;
  padding-inline-start: var(--space-3, 1rem);
  border-inline-start: 3px solid currentColor;
  list-style-type: disc;
}

.visualization--hierarchy .visualization__hierarchy > ul > li,
.visualization--hierarchy .visualization__hierarchy li > ul > li {
  margin-block: var(--space-2, 0.75rem);
  padding-block: var(--space-2, 0.75rem);
  padding-inline-start: var(--space-2, 0.75rem);
  border-inline-start: 2px solid currentColor;
}

.visualization--hierarchy .visualization__hierarchy li > ul {
  margin-block-start: var(--space-2, 0.75rem);
  margin-inline-start: var(--space-2, 0.75rem);
  padding-inline-start: var(--space-3, 1rem);
  border-inline-start: 2px solid currentColor;
  list-style-type: circle;
}

.visualization--flow .visualization__ordered-model,
.visualization--state-loop .visualization__nodes,
.visualization--state-machine .visualization__states,
.visualization--timeline .visualization__timeline-phases,
.visualization--network .visualization__components,
.visualization--network .visualization__nodes,
.visualization--memory .visualization__nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  grid-auto-flow: row;
  gap: var(--space-3, 1rem);
  /* Auto-fit can wrap between any DOM siblings, so a pseudo connector can
     point across a row boundary. Semantic markup already carries the meaning. */
}

@media (max-width: 20rem) {
  .visualization--flow .visualization__ordered-model,
  .visualization--state-loop .visualization__nodes,
  .visualization--causal .visualization__causal-model,
  .visualization--timeline .visualization__timeline-phases,
  .visualization--network .visualization__components,
  .visualization--network .visualization__nodes,
  .visualization--memory .visualization__nodes,
  .visualization--state-machine .visualization__states {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .visualization--hierarchy .visualization__hierarchy > ul {
    padding-inline-start: var(--space-2, 0.75rem);
  }

  .visualization--hierarchy .visualization__hierarchy > ul > li,
  .visualization--hierarchy .visualization__hierarchy li > ul > li {
    padding-inline-start: var(--space-1, 0.5rem);
  }

  .visualization--hierarchy .visualization__hierarchy li > ul {
    margin-inline-start: 0;
    padding-inline-start: var(--space-2, 0.75rem);
  }

}

@container (max-width: 20rem) {
  .visualization--flow .visualization__ordered-model,
  .visualization--state-loop .visualization__nodes,
  .visualization--causal .visualization__causal-model,
  .visualization--timeline .visualization__timeline-phases,
  .visualization--network .visualization__components,
  .visualization--network .visualization__nodes,
  .visualization--memory .visualization__nodes,
  .visualization--state-machine .visualization__states {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .visualization--hierarchy .visualization__hierarchy > ul {
    padding-inline-start: var(--space-2, 0.75rem);
  }

  .visualization--hierarchy .visualization__hierarchy > ul > li,
  .visualization--hierarchy .visualization__hierarchy li > ul > li {
    padding-inline-start: var(--space-1, 0.5rem);
  }

  .visualization--hierarchy .visualization__hierarchy li > ul {
    margin-inline-start: 0;
    padding-inline-start: var(--space-2, 0.75rem);
  }

}

@media (forced-colors: active) {
  .visualization,
  .visualization__nodes > *,
  .visualization__states > *,
  .visualization__components > *,
  .visualization__timeline-events > * {
    color: CanvasText;
    background: Canvas;
    border-color: currentColor;
  }

  .visualization :is(button, input, select):focus-visible {
    outline-color: Highlight;
  }

  .visualization__model-node.is-active,
  .visualization__model-edge.is-active,
  .visualization.is-complete,
  .visualization.has-runtime-error {
    border-color: currentColor;
  }

  .visualization--hierarchy .visualization__hierarchy > ul,
  .visualization--hierarchy .visualization__hierarchy > ul > li,
  .visualization--hierarchy .visualization__hierarchy li > ul > li,
  .visualization--hierarchy .visualization__hierarchy li > ul {
    border-color: currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visualization,
  .visualization * {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

@media print {
  .visualization__simulation-oracle,
  .visualization__simulation-oracle[hidden] {
    display: block !important;
  }

  .visualization__controls {
    display: none !important;
  }

  .visualization {
    break-inside: avoid;
    box-shadow: none;
  }

  .visualization--hierarchy .visualization__hierarchy > ul > li,
  .visualization--hierarchy .visualization__hierarchy li > ul > li {
    break-inside: avoid;
  }

  .visual-journey {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* Shared orientation layer: every page gets the same visible learning loop. */
.visual-journey {
  display: grid;
  gap: var(--space-3, 1.25rem);
  margin-block: 0 var(--space-5, 3.5rem);
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 0.125rem solid var(--color-accent, #075e68);
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgb(7 94 104 / 9%), transparent 62%),
    var(--color-surface, #fffdf8);
  box-shadow: var(--shadow-card, 0.25rem 0.3rem 0 rgb(23 32 51 / 12%));
}

.visual-journey > :last-child {
  margin-block-end: 0;
}

.visual-journey .eyebrow {
  margin-block-end: 0;
  color: var(--color-accent, #075e68);
  font: 700 0.8rem/1.2 var(--font-interface, ui-sans-serif, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.visual-journey__heading {
  margin-block: 0;
  font: 780 clamp(1.5rem, 1.3rem + 1vw, 2.25rem) / 1.2
    var(--font-interface, ui-sans-serif, sans-serif);
}

.diagram-card {
  display: grid;
  gap: var(--space-2, 0.75rem);
  margin: 0;
  padding: var(--space-3, 1.25rem);
  border: 0.0625rem solid var(--color-border, #746f65);
  border-radius: 0.5rem;
  background: var(--color-paper, #f7f3ea);
}

.diagram-card figcaption {
  color: var(--color-muted, #4c5665);
  font: 700 0.9rem/1.35 var(--font-interface, ui-sans-serif, sans-serif);
}

.mermaid-source {
  margin: 0;
  padding: var(--space-2, 0.75rem);
  overflow-x: auto;
  border-inline-start: 0.25rem solid var(--color-warm, #8a3b24);
  background: rgb(255 253 248 / 70%);
  color: var(--color-ink, #172033);
  font: 0.82rem/1.55 var(--font-mono, ui-monospace, monospace);
  white-space: pre-wrap;
}

/* Keep the authored Mermaid contract as a no-JS fallback, not duplicate
   content, once the bounded local renderer has produced the accessible SVG. */
.diagram-card.is-rendered .mermaid-source {
  display: none;
}

.diagram-stage {
  min-block-size: 7.5rem;
}

.diagram-graphic {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

.diagram-edge {
  stroke: var(--color-warm, #8a3b24);
  stroke-width: 2;
}

.diagram-arrowhead {
  fill: var(--color-warm, #8a3b24);
}

.diagram-node {
  fill: var(--color-surface, #fffdf8);
  stroke: var(--color-accent, #075e68);
  stroke-width: 2;
}

.diagram-label {
  fill: var(--color-ink, #172033);
  font: 700 14px var(--font-interface, ui-sans-serif, sans-serif);
  text-anchor: middle;
}

.visual-journey__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.75rem) var(--space-4, 2rem);
  margin: 0;
  padding-inline-start: 1.25rem;
}

@media (max-width: 42rem) {
  .visual-journey {
    border-radius: 0.5rem;
  }

  .diagram-graphic {
    max-inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual-journey,
  .visual-journey * {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}