/* ============================================================
   Algorithm Visualizer — page-level styles
   The design tokens come from tokens.css; everything here is
   layout glue + element styling for the live page.
   ============================================================ */

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  overflow-y: auto;
  overflow-x: auto;
  font-feature-settings: "ss01", "cv11";
}

#root {
  min-height: 100%;
}

/* Native form-control color inheritance */
input[type="range"] { accent-color: var(--accent); }

button {
  font-family: var(--font-body);
}

/* The page wants square corners; reset any UA defaults that round */
button, input { border-radius: 0; }

/* Scrubber track + tempo slider styling kept native */

/* --- Code view active-line border emulation done via class --- */
.code-line {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 1px 8px;
  margin: 0 -8px;
  border-left: 2px solid transparent;
  white-space: pre;
}
.code-line.active {
  background: var(--code-active-line);
  border-left: 2px solid var(--code-active-gutter);
}
.code-line .gutter {
  color: var(--ink-4);
  text-align: right;
  user-select: none;
}
.code-line.active .gutter {
  color: var(--code-active-gutter);
  font-weight: 600;
}

/* --- Pointer chip used in the bar pointer rail --- */
.chip {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--rule-strong);
  padding: 1px 6px;
  line-height: 1.2;
  white-space: nowrap;
}

/* --- Bar baseline rule --- */
.bars-row {
  border-bottom: 1px solid var(--rule-strong);
}

/* --- Trace log row hovers --- */
.trace-row { cursor: pointer; }
.trace-row:hover:not(.active) { background: var(--rule-faint); }

/* --- Catalogue tabs --- */
.cat-tab { transition: background 120ms var(--ease-out); }
.cat-tab:hover:not(.active) { background: var(--bg-tint); }

/* --- Transport keys --- */
.tkey {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0 10px;
  height: 32px;
  min-width: 32px;
  letter-spacing: 0.02em;
  box-shadow: 1px 1px 0 var(--rule-soft);
  cursor: pointer;
}
.tkey:hover { background: var(--bg-tint); }
.tkey:active { transform: translate(1px, 1px); box-shadow: none; }
.tkey.primary {
  background: var(--accent);
  color: var(--surface-2);
  border-color: var(--accent);
  box-shadow: none;
  min-width: 56px;
}
.tkey.primary:hover { background: var(--accent-hover); }
.tkey:disabled {
  color: var(--ink-5);
  border-color: var(--rule-soft);
  cursor: not-allowed;
  box-shadow: none;
}

/* --- Range / scrubber styling --- */
.scrubber-track {
  position: relative;
  height: 4px;
  background: var(--surface-sunken);
  border: 1px solid var(--rule-soft);
  cursor: pointer;
}
.scrubber-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--accent);
  pointer-events: none;
}
.scrubber-tick {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 4px;
  background: var(--ink-4);
  transform: translateX(-0.5px);
  pointer-events: none;
}

/* --- Eyebrow utility --- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* --- Marginalia card --- */
.marginalia-card {
  position: relative;
  padding: 12px 14px 12px 18px;
  background: var(--bg-tint);
  border: 1px solid var(--rule-faint);
  border-left: 3px solid var(--accent);
}

/* ============================================================
   Study companion shell
   ============================================================ */

:root {
  --viz-grid-cols: minmax(260px, 320px) minmax(460px, 1fr) minmax(240px, 280px);
  --catalogue-grid-cols: 1fr auto;
}

.app-shell {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}

.companion-header {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 24px 10px;
  border-bottom: 2px solid var(--ink);
  background: var(--surface);
}

.companion-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.companion-title h1,
.section-head h2,
.lecture-hero h2,
.viz-context h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
}

.companion-title h1 {
  font-size: 26px;
}

.companion-title p,
.section-head p,
.lecture-hero p,
.viz-context p {
  margin: 0;
  max-width: 74ch;
  color: var(--ink-2);
  line-height: 1.4;
}

.companion-title p {
  font-size: 13px;
}

.app-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--rule-soft);
}

.nav-tab,
.segmented button {
  border: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-tab {
  padding: 7px 10px;
  border-right: 1px solid var(--rule-soft);
}

.nav-tab:last-child {
  border-right: 0;
}

.nav-tab.active,
.segmented button.active {
  background: var(--ink);
  color: var(--bg);
}

.header-controls,
.segmented-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--ink);
}

.segmented button {
  padding: 5px 8px;
  border-right: 1px solid var(--rule-soft);
}

.segmented button:last-child {
  border-right: 0;
}

.study-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: calc(100vh - 105px);
}

.lecture-list {
  border-right: 1px solid var(--rule-soft);
  background: var(--surface);
  padding: 18px;
}

.panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 11px;
}

.lecture-row {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr 12px;
  gap: 10px;
  align-items: center;
  padding: 10px 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.lecture-row:hover,
.lecture-row.active {
  background: var(--bg-tint);
  border-color: var(--rule-faint);
}

.lecture-row strong,
.progress-row strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.lecture-row small {
  display: block;
  margin-top: 3px;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
}

.lecture-no {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}

.status-dot {
  width: 9px;
  height: 9px;
  border: 1px solid var(--ink-4);
  background: transparent;
}

.status-dot.done {
  background: var(--role-sorted);
  border-color: var(--role-sorted);
}

.lecture-detail,
.page-section,
.visualizer-page {
  padding: 24px 32px 40px;
}

.lecture-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lecture-hero,
.section-head,
.viz-context {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-soft);
}

.lecture-hero {
  display: grid;
  grid-template-columns: 1fr auto;
}

.lecture-hero h2,
.section-head h2,
.viz-context h2 {
  margin-top: 6px;
  margin-bottom: 8px;
  font-size: 32px;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.primary-action,
.secondary-action {
  border: 1px solid var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 9px 14px;
  text-transform: uppercase;
}

.primary-action {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface-2);
}

.secondary-action {
  background: var(--surface-2);
  color: var(--ink);
}

.mono-progress {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
}

.content-grid {
  display: grid;
  gap: 18px;
}

.content-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.study-panel {
  border-top: 1px solid var(--rule-soft);
  padding-top: 14px;
}

.compact-copy {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.55;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  background: var(--bg-tint);
  border: 1px solid var(--rule-faint);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  text-decoration: none;
}

.tag.clickable {
  cursor: pointer;
}

.goal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.goal-grid.single {
  grid-template-columns: 1fr;
}

.goal-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  min-height: 64px;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid var(--rule-faint);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.goal-card:hover {
  border-color: var(--rule-soft);
  background: var(--bg-tint);
}

.goal-card.mastered {
  border-left: 3px solid var(--role-sorted);
}

.goal-card strong {
  display: inline-block;
  min-width: 44px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
}

.goal-check {
  color: var(--role-sorted);
  font-family: var(--font-mono);
  font-weight: 700;
}

.concept-stack,
.tool-stack {
  display: grid;
  gap: 10px;
}

.concept-card {
  border: 1px solid var(--rule-faint);
  background: var(--surface);
}

.concept-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.concept-head strong {
  display: block;
  font-size: 14px;
}

.concept-head small {
  display: block;
  margin-top: 2px;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 10px;
}

.concept-card p {
  margin: 0;
  padding: 0 14px 14px;
  color: var(--ink-2);
  line-height: 1.55;
}

.tool-link {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule-faint);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}

.tool-link.live {
  cursor: pointer;
  border-left: 3px solid var(--accent);
}

.tool-link.planned {
  border-left: 3px solid var(--ink-5);
}

.tool-link span {
  font-weight: 700;
}

.tool-link small {
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.muted {
  color: var(--ink-4);
  font-style: italic;
}

.quiz-grid,
.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.quiz-card {
  border: 1px solid var(--rule-faint);
  background: var(--surface);
  padding: 14px;
}

.quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.quiz-card p {
  margin: 0 0 12px;
  line-height: 1.5;
}

.quiz-options {
  display: grid;
  gap: 8px;
}

.quiz-option {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--rule-faint);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.quiz-option span {
  display: inline-flex;
  justify-content: center;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
}

.quiz-option.correct {
  border-color: var(--role-sorted);
  background: color-mix(in srgb, var(--role-sorted) 15%, var(--surface));
}

.quiz-option.wrong {
  border-color: var(--role-swap);
  background: color-mix(in srgb, var(--role-swap) 12%, var(--surface));
}

.answer-note,
.attempt {
  font-family: var(--font-mono);
  font-size: 11px;
}

.answer-note.good,
.attempt.good {
  color: var(--role-sorted);
}

.answer-note.bad,
.attempt.bad {
  color: var(--role-swap);
}

.page-section {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.search-input {
  width: min(420px, 100%);
  border: 1px solid var(--ink);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.glossary-card {
  border-top: 2px solid var(--ink);
  background: var(--surface);
  padding: 14px 0 0;
}

.glossary-card h3 {
  margin: 5px 0 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
}

.glossary-card p {
  margin: 0 0 12px;
  color: var(--ink-2);
  line-height: 1.55;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.metric-card {
  border-top: 2px solid var(--accent);
  background: var(--surface);
  padding: 14px 0 0;
}

.metric-card strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
}

.progress-list {
  display: grid;
  gap: 8px;
}

.progress-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--rule-faint);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.progress-row span:last-child {
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ============================================================
   Embedded visualizer
   ============================================================ */

.visualizer-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.viz-context {
  align-items: start;
}

.visualizer-workbench {
  border: 1px solid var(--rule-soft);
  background: var(--bg);
}

.viz-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--surface);
}

.stat-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-cell span {
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
}

.stat-cell strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.stat-cell strong.accent {
  color: var(--accent);
}

.visualizer-grid {
  display: grid;
  grid-template-columns: var(--viz-grid-cols);
  min-height: 560px;
  border-bottom: 1px solid var(--rule-soft);
}

.viz-left-rail {
  border-right: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  min-width: 0;
}

.viz-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px 18px 14px;
  background: var(--bg);
}

.viz-frame {
  position: relative;
  padding: 20px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
}

.fig-label {
  position: absolute;
  top: -10px;
  left: 18px;
  background: var(--bg);
  padding: 0 10px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
}

.viz-right-rail {
  border-left: 1px solid var(--rule-soft);
  background: var(--surface);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.viz-legend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 4px;
}

.shortcut-hint {
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}

/* --- Structured visualizations for course topics --- */
.structured-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.diagram-svg {
  width: 100%;
  height: 210px;
  min-height: 0;
  overflow: visible;
}

.node-label,
.edge-label,
.node-sublabel {
  font-family: var(--font-mono);
  fill: var(--ink);
  dominant-baseline: middle;
  pointer-events: none;
}

.node-label {
  font-size: 3.1px;
  font-weight: 700;
}

.edge-label,
.node-sublabel {
  font-size: 2.7px;
  fill: var(--ink-3);
}

.edge-label {
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 2px;
}

.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--rule-faint);
  padding-top: 10px;
}

.meta-strip span {
  display: inline-flex;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-tint);
  border: 1px solid var(--rule-faint);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
}

.meta-strip strong {
  color: var(--accent);
  text-transform: uppercase;
}

.dp-grid {
  display: grid;
  gap: 4px;
  align-items: stretch;
}

.dp-corner,
.dp-head,
.dp-row-head,
.dp-cell {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-faint);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

.dp-corner,
.dp-head,
.dp-row-head {
  background: var(--bg-tint);
  color: var(--ink-3);
  font-size: 10px;
  text-transform: uppercase;
}

.dp-head.active,
.dp-row-head.active {
  border-color: var(--role-pivot);
  color: var(--role-pivot);
}

.dp-cell.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
}

.dp-cell.dependency {
  border-color: var(--role-pivot);
  background: color-mix(in srgb, var(--role-pivot) 14%, var(--surface-2));
}

.dp-cell.path {
  border-color: var(--role-sorted);
  background: color-mix(in srgb, var(--role-sorted) 14%, var(--surface-2));
}

.bucket-active {
  align-self: center;
  padding: 5px 10px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.array-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(42px, 1fr));
  gap: 8px;
}

.array-strip span,
.bucket span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid var(--ink);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
}

.bucket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.bucket {
  min-height: 64px;
  padding: 8px;
  border: 1px dashed var(--rule-soft);
  background: var(--bg-tint);
}

.bucket strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.bucket div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bucket span {
  min-width: 38px;
  min-height: 30px;
  border-color: var(--rule-soft);
}

.timeline-axis {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 10px;
}

.timeline-axis span {
  text-align: center;
}

.timeline-rows {
  display: grid;
  gap: 10px;
}

.timeline-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
}

.timeline-label {
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
}

.timeline-track {
  position: relative;
  height: 22px;
  background:
    linear-gradient(to right, var(--rule-faint) 1px, transparent 1px);
  background-size: 10% 100%;
  border-bottom: 1px solid var(--rule-soft);
}

.interval {
  position: absolute;
  top: 4px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--role-default);
  border: 1px solid var(--ink);
  color: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

.interval.active {
  background: var(--role-pivot);
}

.interval.selected {
  background: var(--role-sorted);
}

.interval.rejected {
  background: var(--role-eliminated);
  color: var(--ink-3);
}

.reduction-view {
  position: relative;
}

.reduction-view .diagram-svg {
  height: 70px;
  margin-bottom: -20px;
}

.reduction-boxes {
  display: grid;
  gap: 12px;
  align-items: stretch;
}

.reduction-box {
  min-height: 82px;
  padding: 10px;
  border: 1px solid var(--rule-soft);
  border-top: 3px solid var(--role-default);
  background: var(--surface-2);
}

.reduction-box strong,
.reduction-box span {
  display: block;
}

.reduction-box strong {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
}

.reduction-box span {
  color: var(--ink-3);
  line-height: 1.45;
}

.reduction-box.focus,
.reduction-box.pivot {
  border-top-color: var(--role-pivot);
}

.reduction-box.found {
  border-top-color: var(--role-sorted);
}

.reduction-box.swap {
  border-top-color: var(--role-swap);
}

@media (max-width: 1180px) {
  .companion-header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .header-controls {
    justify-content: flex-start;
  }

  .glossary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  :root {
    --viz-grid-cols: 1fr;
    --catalogue-grid-cols: 1fr;
  }

  .study-layout {
    grid-template-columns: 1fr;
  }

  .lecture-list {
    border-right: 0;
    border-bottom: 1px solid var(--rule-soft);
  }

  .lecture-hero,
  .section-head,
  .viz-context,
  .content-grid.two,
  .goal-grid,
  .quiz-grid,
  .tool-grid,
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .lecture-hero,
  .section-head,
  .viz-context {
    display: grid;
    align-items: start;
  }

  .viz-left-rail,
  .viz-right-rail {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--rule-soft);
  }
}

@media (max-width: 680px) {
  .companion-header,
  .lecture-detail,
  .page-section,
  .visualizer-page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .companion-title h1 {
    font-size: 28px;
  }

  .lecture-hero h2,
  .section-head h2,
  .viz-context h2 {
    font-size: 26px;
  }

  .app-nav,
  .header-controls {
    width: 100%;
  }

  .nav-tab {
    flex: 1 1 auto;
  }

  .lecture-row {
    grid-template-columns: 30px 1fr 12px;
  }

  .viz-stage {
    padding: 16px 12px;
  }

  .viz-legend-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .shortcut-hint {
    white-space: normal;
  }
}

/* ============================================================
   BFS view  (graph + FIFO queue + distance map)
   ============================================================ */

.bfs-view,
.dfs-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.bfs-stage,
.dfs-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
  gap: 16px;
  align-items: stretch;
}

.bfs-svg,
.dfs-svg {
  width: 100%;
  min-height: 280px;
  height: 100%;
  overflow: visible;
}

.bfs-distance,
.dfs-stack {
  background: var(--bg-tint);
  border: 1px solid var(--rule-faint);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bfs-distance-head,
.dfs-stack-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-faint);
  color: var(--ink-3);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

.dfs-stack-head .eyebrow,
.bfs-distance-head .eyebrow,
.dfs-timeline-head .eyebrow {
  font-weight: 600;
}

.dfs-stack-meta,
.bfs-fifo-meta,
.dfs-timeline-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}

.dfs-stack-meta strong,
.bfs-fifo-meta strong {
  color: var(--accent);
  font-weight: 700;
}

.bfs-distance-row {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
}

.bfs-distance-label {
  color: var(--ink-3);
  font-weight: 600;
}

.bfs-distance-vertices {
  color: var(--ink);
  letter-spacing: 0.1em;
}

.bfs-distance-empty,
.dfs-stack-empty,
.dfs-timeline-empty {
  color: var(--ink-4);
  font-style: italic;
  padding: 6px 0;
}

/* ---------- BFS FIFO queue strip ---------- */
.bfs-fifo {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bfs-fifo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.bfs-fifo-track {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bfs-fifo-end {
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bfs-fifo-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 auto;
}

.bfs-fifo-cell {
  min-width: 26px;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.bfs-fifo-cell.front {
  background: var(--role-compare);
  color: var(--surface-2);
  box-shadow: -2px 0 0 var(--accent);
}

.bfs-fifo-empty {
  color: var(--ink-4);
  font-style: italic;
}

/* ============================================================
   DFS view  (graph + recursion stack + d/f timeline)
   ============================================================ */

.dfs-stack-cells {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
}

.dfs-stack-arrow {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
}

.dfs-stack-arrow.base {
  color: var(--ink-4);
  margin-top: 2px;
}

.dfs-stack-cell {
  background: var(--surface-2);
  border: 1px solid var(--ink);
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dfs-stack-cell.top {
  border-color: var(--role-pivot);
  box-shadow: -3px 3px 0 var(--role-pivot);
}

.dfs-stack-cell-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.dfs-stack-cell-vertex {
  color: var(--ink);
  font-weight: 700;
}

.dfs-stack-cell-d {
  color: var(--ink-3);
  font-size: 10px;
}

.dfs-stack-cell-iter {
  color: var(--ink-3);
  font-size: 10px;
}

.dfs-iter {
  display: inline-block;
  padding: 0 3px;
  margin: 0 1px;
  color: var(--ink-2);
}

.dfs-iter.cur {
  background: var(--accent);
  color: var(--surface-2);
  font-weight: 700;
}

/* ---------- DFS d/f timeline ---------- */
.dfs-timeline {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dfs-timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 4px;
}

.dfs-timeline-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dfs-timeline-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: center;
}

.dfs-timeline-vertex {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

.dfs-timeline-track {
  position: relative;
  height: 14px;
  background: var(--bg-tint);
  border: 1px solid var(--rule-faint);
}

.dfs-timeline-bar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  background: var(--role-sorted);
  opacity: 0.85;
}

.dfs-timeline-bar.open {
  background: var(--role-compare);
}

.dfs-timeline-tick {
  position: absolute;
  top: -1px;
  bottom: -1px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--ink);
}

.dfs-timeline-tick.discover {
  border-color: var(--role-compare);
  color: var(--role-compare);
}

.dfs-timeline-tick.finish {
  border-color: var(--role-sorted);
  color: var(--role-sorted);
}

@media (max-width: 1100px) {
  .bfs-stage,
  .dfs-stage {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   MST (Kruskal) view
   ============================================================ */

.mst-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.mst-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
  gap: 16px;
  align-items: stretch;
}

.mst-svg {
  width: 100%;
  min-height: 280px;
  height: 100%;
  overflow: visible;
}

.mst-dsu,
.dijkstra-pq,
.flow-residual {
  background: var(--bg-tint);
  border: 1px solid var(--rule-faint);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.mst-dsu-head,
.dijkstra-pq-head,
.flow-residual-head,
.dijkstra-dist-head,
.flow-gauge-head,
.mst-edges-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-faint);
}

.mst-dsu-meta,
.dijkstra-pq-meta,
.flow-residual-meta,
.dijkstra-dist-meta,
.flow-gauge-meta,
.mst-edges-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0;
  text-transform: none;
}

.mst-dsu-meta strong,
.dijkstra-pq-meta strong,
.flow-residual-meta strong,
.dijkstra-dist-meta strong,
.flow-gauge-meta strong,
.mst-edges-meta strong {
  color: var(--accent);
}

.mst-dsu-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mst-dsu-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 8px;
  background: var(--surface-2);
  border: 1px solid var(--rule-faint);
}

.mst-dsu-rep {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

.mst-dsu-rep strong {
  color: var(--ink);
}

.mst-dsu-members {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
}

.mst-edges {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  padding: 10px 14px;
}

.mst-edges-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.mst-edge {
  display: grid;
  grid-template-columns: 32px 60px 1fr;
  gap: 12px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  border-left: 2px solid transparent;
}

.mst-edge-w {
  font-weight: 700;
  color: var(--ink-2);
}

.mst-edge-pair {
  color: var(--ink);
}

.mst-edge-mark {
  color: var(--ink-4);
  text-align: right;
}

.mst-edge-active {
  background: var(--bg-tint);
  border-left-color: var(--accent);
  color: var(--ink);
}

.mst-edge-active .mst-edge-mark {
  color: var(--accent);
  font-weight: 700;
}

.mst-edge-accepted {
  border-left-color: var(--role-sorted);
}

.mst-edge-accepted .mst-edge-mark {
  color: var(--role-sorted);
  font-weight: 700;
}

.mst-edge-rejected .mst-edge-mark {
  color: var(--role-swap);
  text-decoration: line-through;
}

.mst-edge-rejected .mst-edge-pair {
  text-decoration: line-through;
  color: var(--ink-4);
}

/* ============================================================
   Dijkstra view
   ============================================================ */

.dijkstra-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.dijkstra-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 200px);
  gap: 16px;
  align-items: stretch;
}

.dijkstra-svg {
  width: 100%;
  min-height: 280px;
  height: 100%;
  overflow: visible;
}

.dijkstra-pq-arrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

.dijkstra-pq-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dijkstra-pq-cell {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  background: var(--surface-2);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
}

.dijkstra-pq-cell.top {
  background: var(--role-pivot);
  color: var(--surface-2);
  border-color: var(--role-pivot);
  box-shadow: -3px 3px 0 var(--accent);
}

.dijkstra-pq-cell.top .dijkstra-pq-d {
  color: var(--surface-2);
}

.dijkstra-pq-d {
  color: var(--ink-3);
}

.dijkstra-pq-v {
  font-weight: 700;
}

.dijkstra-pq-empty {
  color: var(--ink-4);
  font-style: italic;
}

.dijkstra-dist {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  padding: 10px 14px;
}

.dijkstra-dist-grid {
  display: grid;
  grid-template-columns: 32px 60px 60px 1fr;
  gap: 0;
  margin-top: 6px;
  border: 1px solid var(--rule-faint);
}

.dijkstra-dist-col-head {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  background: var(--bg-tint);
  padding: 4px 8px;
  border-bottom: 1px solid var(--rule-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dijkstra-dist-cell {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  padding: 4px 8px;
  border-bottom: 1px solid var(--rule-faint);
}

.dijkstra-dist-cell.vertex {
  font-weight: 700;
  background: var(--bg-tint);
}

.dijkstra-dist-cell.value {
  text-align: right;
}

.dijkstra-dist-cell.tag {
  font-size: 10px;
  color: var(--ink-3);
}

.dijkstra-dist-cell.tag.settled {
  color: var(--role-sorted);
  font-weight: 700;
}

.dijkstra-dist-cell.tag.open {
  color: var(--role-compare);
}

/* ============================================================
   Max Flow view
   ============================================================ */

.flow-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.flow-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
  gap: 16px;
  align-items: stretch;
}

.flow-svg {
  width: 100%;
  min-height: 300px;
  height: 100%;
  overflow: visible;
}

.flow-residual-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flow-residual-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flow-residual-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flow-residual-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 3px 6px;
  background: var(--surface-2);
  border: 1px solid var(--rule-faint);
  font-family: var(--font-mono);
  font-size: 11px;
}

.flow-residual-row.back {
  border-left: 2px solid var(--role-swap);
  color: var(--role-swap);
}

.flow-residual-cap {
  font-weight: 700;
  color: var(--ink);
}

.flow-residual-row.back .flow-residual-cap {
  color: var(--role-swap);
}

.flow-residual-empty {
  color: var(--ink-4);
  font-style: italic;
  font-size: 11px;
}

.flow-gauge {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flow-gauge-bar {
  position: relative;
  height: 12px;
  background: var(--bg-tint);
  border: 1px solid var(--rule-faint);
}

.flow-gauge-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--accent);
  transition: width 200ms var(--ease-out);
}

.flow-gauge-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--ink);
  transform: translateX(-1px);
  transition: left 200ms var(--ease-out);
}

.flow-gauge-edges {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}

.flow-edge-row {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
}

.flow-edge-row.sat .flow-edge-num {
  color: var(--role-swap);
  font-weight: 700;
}

.flow-edge-pair {
  color: var(--ink);
}

.flow-edge-bar {
  position: relative;
  height: 6px;
  background: var(--bg-tint);
  border: 1px solid var(--rule-faint);
}

.flow-edge-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--role-sorted);
  transition: width 200ms var(--ease-out);
}

.flow-edge-row.sat .flow-edge-fill {
  background: var(--role-swap);
}

.flow-edge-num {
  text-align: right;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .mst-stage,
  .dijkstra-stage,
  .flow-stage {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   Unified TreeView (heap, BST, merge-sort recursion, recursion tree)
   ============================================================ */

.tree-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.tree-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
  gap: 16px;
  align-items: stretch;
}

.tree-svg {
  width: 100%;
  min-height: 280px;
  height: 100%;
  overflow: visible;
}

.tree-side {
  background: var(--bg-tint);
  border: 1px solid var(--rule-faint);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.tree-side-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-faint);
}

.tree-side-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

.tree-side-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tree-side-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  padding: 3px 0;
  font-family: var(--font-mono);
  font-size: 11px;
}

.tree-side-label {
  color: var(--ink-3);
}

.tree-side-value {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

.tree-side-value.active {
  color: var(--accent);
}

.tree-side-note {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

/* Node badge above a tree node */
.node-badge {
  font-family: var(--font-mono);
  font-size: 2.6px;
  font-weight: 700;
  fill: var(--surface-2);
  dominant-baseline: middle;
  pointer-events: none;
  letter-spacing: 0.04em;
}

/* ---------- Array strip below a tree ---------- */
.tree-array {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tree-array-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.tree-array-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

.tree-array-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tree-array-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 30px;
  padding: 4px 6px 2px;
  background: var(--surface-2);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
}

.tree-array-cell.role-active {
  background: var(--role-pivot);
  color: var(--surface-2);
}

.tree-array-cell.role-active .tree-array-index,
.tree-array-cell.role-swap .tree-array-index,
.tree-array-cell.role-compare .tree-array-index,
.tree-array-cell.role-found .tree-array-index {
  color: var(--surface-2);
  opacity: 0.85;
}

.tree-array-cell.role-swap {
  background: var(--role-swap);
  color: var(--surface-2);
}

.tree-array-cell.role-compare {
  background: var(--role-compare);
  color: var(--surface-2);
}

.tree-array-cell.role-found {
  background: var(--role-sorted);
  color: var(--surface-2);
}

.tree-array-value {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.tree-array-index {
  font-size: 9px;
  color: var(--ink-4);
  margin-top: 2px;
}

/* ---------- Merge buffer panel (merge sort) ---------- */
.merge-panel {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.merge-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.merge-panel-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

.merge-panel-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.merge-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 10px;
}

.merge-row-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

.merge-row-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.merge-cell {
  min-width: 22px;
  padding: 3px 6px;
  background: var(--surface-2);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  text-align: center;
}

.merge-cell.cur {
  background: var(--accent);
  color: var(--surface-2);
  border-color: var(--accent);
}

.merge-cell.out {
  background: var(--role-sorted);
  color: var(--surface-2);
  border-color: var(--role-sorted);
}

.merge-cell.empty {
  font-style: italic;
  color: var(--ink-4);
  background: transparent;
  border-style: dashed;
}

@media (max-width: 1100px) {
  .tree-stage { grid-template-columns: minmax(0, 1fr); }
}