styles.css

/*
 * Code Explorer visual system
 *
 * The stylesheet is organized from global design tokens to reusable controls,
 * major workspace components, animations, and responsive overrides. Each rule
 * has a teaching comment that explains its responsibility and the categories
 * of CSS declarations used to fulfill that responsibility.
 */
/* Downloads the two type families used for prose and code-like interface text. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* Declares the dark theme design tokens. Components consume these variables instead of repeating raw colors, fonts, and shadows. */
:root {
  color-scheme: dark;
  --bg: #080a0e;
  --bg-raised: #0d1016;
  --panel: rgba(14, 18, 25, 0.88);
  --panel-solid: #0e1219;
  --panel-soft: #141922;
  --line: #242b37;
  --line-bright: #384355;
  --text: #ecf4f1;
  /* Secondary copy stays visibly distinct without becoming faint on dark panels. */
  --text-soft: #b4c0ca;
  /* Tiny technical labels need stronger contrast than decorative background details. */
  --text-dim: #87939e;
  --mint: #63f3c0;
  --mint-soft: rgba(99, 243, 192, 0.12);
  --purple: #a98bff;
  --purple-soft: rgba(169, 139, 255, 0.14);
  --amber: #ffc76a;
  --red: #ff6b7a;
  --cyan: #63d7ff;
  /* These preview tokens let the decorative terminal follow the selected site theme. */
  --terminal-bg: #0b0f15;
  --terminal-panel: #10151c;
  --terminal-line: #303a45;
  --terminal-text: #e7efec;
  --terminal-soft: #b7c3be;
  --terminal-dim: #7f8b96;
  --terminal-accent: #63f3c0;
  --terminal-keyword: #b69cff;
  --terminal-name: #72ddff;
  --terminal-sheen: rgba(255, 255, 255, 0.025);
  /* Code tokens use a high-contrast palette designed for long reading sessions. */
  --code-plain: #edf4f1;
  --code-keyword: #c4a7ff;
  --code-name: #edf4f1;
  --code-property: #79dcff;
  --code-string: #ffd58a;
  --code-number: #70e6b1;
  --code-operator: #c9d3cf;
  --code-comment: #89968f;
  --code-invalid: #ff8290;
  /* Study-editor tokens create an IDE surface without changing the main editor theme. */
  --study-editor-bg: #0b1017;
  --study-editor-raised: #101720;
  --study-editor-gutter: #080c12;
  --study-editor-line: #263241;
  --study-editor-note: rgba(169, 139, 255, 0.1);
  --study-editor-note-hover: rgba(169, 139, 255, 0.16);
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.32);
  --mono: "IBM Plex Mono", "Liberation Mono", monospace;
  --sans: "DM Sans", system-ui, sans-serif;
}

/* Overrides the shared design tokens for light mode while leaving every component rule unchanged. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2ee;
  --bg-raised: #f9fbf8;
  --panel: rgba(250, 252, 249, 0.9);
  --panel-solid: #fafcf9;
  --panel-soft: #edf2ed;
  --line: #d6ddd6;
  --line-bright: #bbc7bd;
  --text: #17211e;
  /* Secondary copy uses a darker value so normal-weight text remains easy to scan. */
  --text-soft: #46544f;
  /* Small labels pass a stronger contrast threshold against the light surfaces. */
  --text-dim: #5f6c67;
  --mint: #087f5b;
  --mint-soft: rgba(8, 127, 91, 0.1);
  --purple: #6d4bd3;
  --purple-soft: rgba(109, 75, 211, 0.1);
  --amber: #a96600;
  --red: #d33c52;
  --cyan: #05749a;
  /* Light preview values replace every dark terminal surface and text color together. */
  --terminal-bg: #fbfdfb;
  --terminal-panel: #f4f8f4;
  --terminal-line: #cad5cc;
  --terminal-text: #1d2925;
  --terminal-soft: #53625c;
  --terminal-dim: #74827c;
  --terminal-accent: #087f5b;
  --terminal-keyword: #6d4bd3;
  --terminal-name: #05749a;
  --terminal-sheen: rgba(8, 127, 91, 0.045);
  /* Light editor tokens preserve category differences without sacrificing contrast. */
  --code-plain: #17211e;
  --code-keyword: #6741c7;
  --code-name: #17211e;
  --code-property: #006f91;
  --code-string: #8c5200;
  --code-number: #087f5b;
  --code-operator: #46534e;
  --code-comment: #66756e;
  --code-invalid: #be2942;
  /* Light IDE tokens retain editor structure and contrast without becoming glaring white. */
  --study-editor-bg: #f7f9fc;
  --study-editor-raised: #e9eef4;
  --study-editor-gutter: #edf1f6;
  --study-editor-line: #cbd5df;
  --study-editor-note: rgba(109, 75, 211, 0.075);
  --study-editor-note-hover: rgba(109, 75, 211, 0.12);
  --shadow: 0 22px 70px rgba(40, 54, 47, 0.13);
}

/* Styles `*`. This component rule controls boundaries and focus treatment for the matching interface element. */
* {
  box-sizing: border-box;
}

/* Styles `html`. This component rule controls sizing and spacing, color and visual emphasis for the matching interface element. */
html {
  min-width: 320px;
  background: var(--bg);
  scroll-behavior: smooth;
}

/* Styles `body`. This component rule controls sizing and spacing, color and visual emphasis, typography, overflow behavior for the matching interface element. */
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 80% 10%, rgba(99, 243, 192, 0.07), transparent 28rem),
    radial-gradient(circle at 12% 80%, rgba(169, 139, 255, 0.06), transparent 32rem),
    var(--bg);
  font-family: var(--sans);
}

/* Styles `button, select, input`. This component rule controls typography for the matching interface element. */
button,
select,
input {
  font: inherit;
}

/* Styles `button, a`. This component rule controls color and visual emphasis for the matching interface element. */
button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* Styles `button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible`. This component rule controls boundaries and focus treatment for the matching interface element. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

/* Styles `.hidden`. This component rule controls layout for the matching interface element. */
.hidden {
  display: none !important;
}

/* Styles `.ambient-grid`. This component rule controls layout, sizing and spacing, color and visual emphasis for the matching interface element. */
.ambient-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(130, 150, 145, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 150, 145, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

/* Styles `.site-header`. This component rule controls layout, sizing and spacing, boundaries and focus treatment for the matching interface element. */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1440px, calc(100% - 48px));
  height: 76px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}

/* Styles `.brand`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography for the matching interface element. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font: 600 0.8rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-decoration: none;
}

/* Styles `.brand-mark`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--mint);
  border-radius: 8px;
  color: var(--mint);
  background: var(--mint-soft);
  box-shadow: inset 0 0 18px var(--mint-soft);
  letter-spacing: -0.15em;
}

/* Styles `.header-actions, .workspace-actions, .hero-actions`. This component rule controls layout, sizing and spacing for the matching interface element. */
.header-actions,
.workspace-actions,
.hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Both equally important learning destinations wrap as complete buttons instead of shrinking their labels. */
.hero-actions {
  flex-wrap: wrap;
}

/* Styles `.runtime-status`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, motion and interaction feedback for the matching interface element. */
.runtime-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  color: var(--text-dim);
  font: 500 0.68rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Styles `.status-dot`. This component rule controls sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
}

/* Defines the state-specific appearance of `.runtime-status.loading .status-dot`. The declarations control color and visual emphasis, motion and interaction feedback when that state class is present. */
.runtime-status.loading .status-dot {
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
  animation: pulse 1.2s infinite;
}

/* Defines the state-specific appearance of `.runtime-status.ready`. The declarations control color and visual emphasis when that state class is present. */
.runtime-status.ready {
  color: var(--mint);
}

/* Defines the state-specific appearance of `.runtime-status.ready .status-dot`. The declarations control color and visual emphasis when that state class is present. */
.runtime-status.ready .status-dot {
  background: var(--mint);
  box-shadow: 0 0 12px var(--mint);
}

/* Defines the state-specific appearance of `.runtime-status.error`. The declarations control color and visual emphasis when that state class is present. */
.runtime-status.error {
  color: var(--red);
}

/* Defines the state-specific appearance of `.runtime-status.error .status-dot`. The declarations control color and visual emphasis when that state class is present. */
.runtime-status.error .status-dot {
  background: var(--red);
}

/* Styles `.icon-button`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment, motion and interaction feedback for the matching interface element. */
.icon-button {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--bg-raised);
  font: 600 0.7rem/1 var(--mono);
  text-decoration: none;
  cursor: pointer;
  transition: 160ms ease;
}

/* Expands named header controls without changing their shared height or interaction style. */
.guide-button,
.theme-button {
  width: auto;
  min-width: 92px;
  padding: 0 13px;
  white-space: nowrap;
}

/* The theme wording is slightly wider than the guide wording in the selected monospace typeface. */
.theme-button {
  min-width: 96px;
}

/* Sizes the GitHub vector mark consistently while allowing the parent control to provide its color. */
.github-icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Defines hover feedback for `.icon-button:hover`, using color and visual emphasis, boundaries and focus treatment, motion and interaction feedback to confirm that the element is interactive. */
.icon-button:hover {
  border-color: var(--line-bright);
  color: var(--mint);
  transform: translateY(-1px);
}

/* Styles `main`. This component rule controls sizing and spacing for the matching interface element. */
main {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
}

/* Gives both pages one quiet ownership footer aligned with the shared content width. */
.site-footer {
  display: flex;
  width: min(1440px, calc(100% - 48px));
  min-height: 64px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  text-align: center;
}

/* Uses the interface's monospace voice for a compact, clearly secondary copyright line. */
.site-footer small {
  font: 600 0.64rem/1.5 var(--mono);
  letter-spacing: 0.08em;
}

/* Styles `.welcome-screen`. This component rule controls layout, sizing and spacing for the matching interface element. */
.welcome-screen {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(520px, 1.15fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: center;
  min-height: calc(100vh - 77px);
  padding: 72px 0 100px;
}

/* Styles `.eyebrow`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, motion and interaction feedback for the matching interface element. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mint);
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Styles `.eyebrow > span`. This component rule controls layout, sizing and spacing, color and visual emphasis for the matching interface element. */
.eyebrow > span {
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--mint);
  box-shadow: 0 0 12px var(--mint);
}

/* Styles `.hero-copy h1`. This component rule controls sizing and spacing, typography for the matching interface element. */
.hero-copy h1 {
  max-width: 700px;
  margin: 28px 0 24px;
  font-size: clamp(3rem, 5.6vw, 6.4rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
}

/* Styles `.hero-copy h1 em`. This component rule controls color and visual emphasis, typography for the matching interface element. */
.hero-copy h1 em {
  color: var(--mint);
  font-style: normal;
  text-shadow: 0 0 28px var(--mint-soft);
}

/* Styles `.hero-description`. This component rule controls sizing and spacing, color and visual emphasis, typography for the matching interface element. */
.hero-description {
  max-width: 600px;
  margin: 0 0 34px;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.7;
}

/* Styles `.primary-button, .secondary-button, .danger-button, .text-button`. This component rule controls sizing and spacing, typography, boundaries and focus treatment, motion and interaction feedback for the matching interface element. */
.primary-button,
.secondary-button,
.danger-button,
.text-button {
  min-height: 46px;
  padding: 0 20px;
  border-radius: 8px;
  font: 600 0.74rem/1 var(--mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 160ms ease;
}

/* Styles `.primary-button`. This component rule controls layout, sizing and spacing, color and visual emphasis, boundaries and focus treatment for the matching interface element. */
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid var(--mint);
  color: #06120e;
  background: var(--mint);
  box-shadow: 0 8px 32px var(--mint-soft);
  text-decoration: none;
}

/* Keeps primary-button text readable when the light palette changes the meaning of the shared background token. */
:root[data-theme="light"] .primary-button {
  color: white;
}

/* Defines hover feedback for `.primary-button:hover:not(:disabled)`, using motion and interaction feedback to confirm that the element is interactive. */
.primary-button:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* Styles `.primary-button.compact`. This component rule controls sizing and spacing for the matching interface element. */
.primary-button.compact {
  min-height: 38px;
  padding: 0 17px;
}

/* Defines the disabled state for `.primary-button:disabled`, using color and visual emphasis to show that interaction is temporarily unavailable. */
.primary-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Styles `.secondary-button, .text-button`. This component rule controls color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.secondary-button,
.text-button {
  border: 1px solid var(--line-bright);
  color: var(--text);
  background: var(--bg-raised);
}

/* Defines hover feedback for `.secondary-button:hover, .text-button:hover`, using color and visual emphasis, typography, boundaries and focus treatment to confirm that the element is interactive. */
.secondary-button:hover,
.text-button:hover {
  border-color: var(--mint);
  color: var(--mint);
}

/* Styles `.text-button`. This component rule controls sizing and spacing, typography for the matching interface element. */
.text-button {
  min-height: 38px;
  padding: 0 15px;
}

/* Makes unavailable secondary actions visibly inactive without suggesting that the page is loading. */
.text-button:disabled,
.secondary-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

/* Prevents disabled learning actions from receiving the ordinary mint hover treatment. */
.text-button:disabled:hover,
.secondary-button:disabled:hover {
  border-color: var(--line-bright);
  color: var(--text);
}

/* Styles `.danger-button`. This component rule controls sizing and spacing, color and visual emphasis, boundaries and focus treatment for the matching interface element. */
.danger-button {
  min-height: 38px;
  border: 1px solid var(--red);
  color: var(--red);
  background: rgba(255, 107, 122, 0.08);
}

/* Wraps topic chips into balanced rows, using a tighter horizontal gap and a roomier vertical gap for clear scanning. */
.feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 6px;
  margin-top: 38px;
}

/* Styles `.feature-chips span`. This component rule controls sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.feature-chips span {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  background: var(--bg-raised);
  font: 500 0.66rem/1 var(--mono);
}

/* Creates or styles the generated visual part `.feature-chips span::before`. It contributes color and visual emphasis without adding extra HTML. */
.feature-chips span::before {
  content: "# ";
  color: var(--purple);
}

/* Styles `.hero-terminal`. This component rule controls color and visual emphasis, boundaries and focus treatment, motion and interaction feedback, overflow behavior for the matching interface element. */
.hero-terminal {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  border-radius: 14px;
  color: var(--terminal-text);
  background: var(--terminal-bg);
  box-shadow: var(--shadow), 0 0 80px rgba(99, 243, 192, 0.04);
  transform: perspective(1100px) rotateY(-2deg) rotateX(1deg);
}

/* Creates or styles the generated visual part `.hero-terminal::before`. It contributes sizing and spacing, color and visual emphasis, motion and interaction feedback without adding extra HTML. */
.hero-terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, var(--terminal-sheen) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: scan 8s ease-in-out infinite;
}

/* Styles `.terminal-topbar, .terminal-footer`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.terminal-topbar,
.terminal-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 45px;
  padding: 0 18px;
  border-bottom: 1px solid var(--terminal-line);
  color: var(--terminal-dim);
  font: 500 0.62rem/1 var(--mono);
  letter-spacing: 0.08em;
}

/* Styles `.terminal-topbar > :last-child`. This component rule controls layout, color and visual emphasis for the matching interface element. */
.terminal-topbar > :last-child {
  justify-self: end;
  color: var(--terminal-accent);
}

/* Styles `.terminal-dots`. This component rule controls layout, sizing and spacing for the matching interface element. */
.terminal-dots {
  display: flex;
  gap: 6px;
}

/* Styles `.terminal-dots span`. This component rule controls sizing and spacing, color and visual emphasis, boundaries and focus treatment for the matching interface element. */
.terminal-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--terminal-line);
}

/* Styles `.terminal-dots span:first-child`. This component rule controls color and visual emphasis for the matching interface element. */
.terminal-dots span:first-child {
  background: #ff6b7a;
}

/* Styles `.terminal-dots span:nth-child(2)`. This component rule controls color and visual emphasis for the matching interface element. */
.terminal-dots span:nth-child(2) {
  background: #ffc76a;
}

/* Styles `.terminal-dots span:last-child`. This component rule controls color and visual emphasis for the matching interface element. */
.terminal-dots span:last-child {
  background: #63f3c0;
}

/* Styles `.terminal-body`. This component rule controls sizing and spacing for the matching interface element. */
.terminal-body {
  padding: clamp(25px, 4vw, 44px);
}

/* Styles `.terminal-code`. This component rule controls layout, sizing and spacing, typography for the matching interface element. */
.terminal-code {
  display: grid;
  grid-template-columns: 34px 1fr;
  row-gap: 4px;
  margin-bottom: 32px;
  font: 500 clamp(0.76rem, 1.1vw, 0.92rem)/2.1 var(--mono);
}

/* Styles `.terminal-code .line-number`. This component rule controls color and visual emphasis for the matching interface element. */
.terminal-code .line-number {
  color: var(--terminal-dim);
}

/* Defines the state-specific appearance of `.terminal-code .line-number.active`. The declarations control color and visual emphasis when that state class is present. */
.terminal-code .line-number.active {
  color: var(--terminal-accent);
}

/* Styles `.terminal-code code`. This component rule controls layout, sizing and spacing, color and visual emphasis, boundaries and focus treatment for the matching interface element. */
.terminal-code code {
  display: block;
  padding-left: 11px;
  color: var(--terminal-text);
  border-left: 1px solid transparent;
}

/* Defines the state-specific appearance of `.terminal-code code.active`. The declarations control color and visual emphasis, boundaries and focus treatment when that state class is present. */
.terminal-code code.active {
  border-left-color: var(--terminal-accent);
  color: var(--terminal-text);
  background: linear-gradient(90deg, var(--mint-soft), transparent 70%);
  box-shadow: -10px 0 30px var(--mint-soft);
}

/* Styles `.terminal-code i`. This component rule controls color and visual emphasis, typography for the matching interface element. */
.terminal-code i {
  color: var(--terminal-keyword);
  font-style: normal;
}

/* Styles `.terminal-code b`. This component rule controls color and visual emphasis, typography for the matching interface element. */
.terminal-code b {
  color: var(--terminal-name);
  font-weight: 500;
}

/* Styles `.trace-card-preview`. This component rule controls sizing and spacing, color and visual emphasis, boundaries and focus treatment for the matching interface element. */
.trace-card-preview {
  margin-left: 45px;
  padding: 20px;
  border: 1px solid var(--terminal-line);
  border-radius: 8px;
  background: var(--terminal-panel);
}

/* Styles `.trace-card-label`. This component rule controls sizing and spacing, color and visual emphasis, typography for the matching interface element. */
.trace-card-label {
  margin-bottom: 14px;
  color: var(--terminal-keyword);
  font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.11em;
}

/* Styles `.trace-card-preview p`. This component rule controls sizing and spacing, color and visual emphasis, typography for the matching interface element. */
.trace-card-preview p {
  margin: 0 0 20px;
  color: var(--terminal-soft);
  line-height: 1.55;
}

/* Styles `.trace-card-preview p code`. This component rule controls color and visual emphasis, typography for the matching interface element. */
.trace-card-preview p code {
  color: var(--terminal-accent);
  font-family: var(--mono);
}

/* Styles `.preview-change`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.preview-change {
  display: grid;
  grid-template-columns: 1fr 50px 30px 50px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--terminal-line);
  color: var(--terminal-dim);
  font: 500 0.72rem/1 var(--mono);
}

/* Styles `.preview-change strong`. This component rule controls color and visual emphasis, typography for the matching interface element. */
.preview-change strong {
  color: var(--terminal-accent);
  font-weight: 500;
}

/* Styles `.terminal-footer`. This component rule controls layout, boundaries and focus treatment for the matching interface element. */
.terminal-footer {
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--terminal-line);
  border-bottom: 0;
}

/* Styles `.terminal-footer span:first-child`. This component rule controls color and visual emphasis for the matching interface element. */
.terminal-footer span:first-child {
  color: var(--terminal-accent);
}

/* Styles `.terminal-footer span:last-child`. This component rule controls layout for the matching interface element. */
.terminal-footer span:last-child {
  justify-self: end;
}

/* Workspace */
/* Styles `.workspace`. This component rule controls sizing and spacing for the matching interface element. */
.workspace {
  padding: 42px 0 80px;
}

/* Styles `.workspace-heading`. This component rule controls layout, sizing and spacing for the matching interface element. */
.workspace-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
}

/* Styles the workspace page heading at the correct document-outline level. */
.workspace-heading h1 {
  margin: 7px 0 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.04em;
}

/* Styles `.back-button`. This component rule controls sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.back-button {
  display: inline-block;
  padding: 0;
  border: 0;
  color: var(--text-dim);
  background: none;
  font: 500 0.68rem/1 var(--mono);
  cursor: pointer;
}

/* Defines hover feedback for `.back-button:hover`, using color and visual emphasis to confirm that the element is interactive. */
.back-button:hover {
  color: var(--mint);
}

/* Styles `.workspace-grid`. This component rule controls layout, sizing and spacing for the matching interface element. */
.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.88fr);
  grid-template-areas:
    "editor story"
    "controls controls"
    "output output";
  gap: 12px;
}

/* Styles `.panel`. This component rule controls color and visual emphasis, boundaries and focus treatment, overflow behavior for the matching interface element. */
.panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
}

/* Styles `.editor-panel`. This component rule controls layout, sizing and spacing for the matching interface element. */
.editor-panel {
  grid-area: editor;
  min-height: 620px;
}

/*
  A selected reviewed question sits between the toolbar and source. The strip
  looks like an IDE task header, wraps long beginner wording, and remains text
  rather than editable Python.
*/
.selected-program-question {
  display: grid;
  gap: 5px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--purple) 9%, transparent), transparent 72%),
    var(--panel-soft);
}

/* The small label distinguishes curriculum context from learner source. */
.selected-program-question > span {
  color: var(--purple);
  font: 700 0.56rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The reviewed title is the primary question identifier. */
.selected-program-question strong {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.35;
}

/* Supporting objective text stays readable without dominating the editor. */
.selected-program-question p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.76rem;
  line-height: 1.45;
}

/* Styles `.story-panel`. This component rule controls layout, sizing and spacing for the matching interface element. */
.story-panel {
  grid-area: story;
  min-height: 620px;
}

/* Groups the expanded toolset into four stable learning areas above contextual secondary tabs. */
.learning-mode-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 44px;
  padding: 5px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-soft) 72%, transparent);
}

/* Gives primary learning modes a wide segmented-control target without visual clutter. */
.learning-mode {
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-dim);
  background: transparent;
  font: 600 0.67rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Uses a clear surface and mint edge to identify the selected learning area. */
.learning-mode.active {
  border-color: var(--line);
  color: var(--mint);
  background: var(--bg-raised);
  box-shadow: inset 0 -2px 0 var(--mint);
}

/* Completely removes secondary tabs belonging to other primary areas. */
.panel-tab.mode-hidden {
  display: none;
}

/* Styles `.controls-panel`. This component rule controls layout for the matching interface element. */
.controls-panel {
  grid-area: controls;
}

/* Styles `.output-panel`. This component rule controls layout for the matching interface element. */
.output-panel {
  grid-area: output;
}

/* Styles `.panel-header`. This component rule controls layout, sizing and spacing, color and visual emphasis, boundaries and focus treatment for the matching interface element. */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}

/* Styles `.panel-index, .panel-title, .file-label, .step-count, .section-label`. This component rule controls typography for the matching interface element. */
.panel-index,
.panel-title,
.file-label,
.step-count,
.section-label {
  font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.1em;
}

/* Styles `.panel-index`. This component rule controls sizing and spacing, color and visual emphasis for the matching interface element. */
.panel-index {
  margin-right: 10px;
  color: var(--mint);
}

/* Styles `.panel-title`. This component rule controls color and visual emphasis, typography for the matching interface element. */
.panel-title {
  color: var(--text-soft);
}

/* Styles `.file-label, .step-count`. This component rule controls color and visual emphasis, typography for the matching interface element. */
.file-label,
.step-count {
  color: var(--text-dim);
}

/* Keeps filename and editor display controls aligned inside the compact panel header. */
.editor-header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Gives the wrapping toggle the same quiet utility styling as other workspace controls. */
.editor-tool-button {
  white-space: nowrap;
  padding: 6px 9px;
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  color: var(--text-soft);
  background: var(--panel-solid);
  font: 600 0.62rem/1 var(--mono);
  cursor: pointer;
}

/* Disabled editor presentation tools remain visible while explaining that trace evidence is required. */
.editor-tool-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

/* The longer automatic-comments label stays compact beside Wrap on laptop headers. */
.automatic-comments-toggle {
  font-size: 0.58rem;
}

/* Uses the mint treatment to make enabled wrapping visible without relying on wording alone. */
.editor-tool-button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--mint) 45%, var(--line));
  color: var(--mint);
  background: var(--mint-soft);
}

/* Provides consistent hover feedback for either wrapping state. */
.editor-tool-button:hover {
  border-color: var(--mint);
  color: var(--mint);
}

/* Separates source-transfer actions slightly from display-only editor settings. */
.editor-font-control + .editor-clipboard-button {
  margin-left: 2px;
}

/* Groups the visible Font label and native size selector as one accessible control. */
.editor-font-control {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dim);
  font: 600 0.58rem/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Keeps the font-size selector compact while preserving a comfortable click target. */
.editor-font-control select {
  min-height: 29px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  color: var(--text);
  background: var(--panel-solid);
  font: 600 0.62rem/1 var(--mono);
  cursor: pointer;
}

/* Styles `.editor-shell`. This component rule controls sizing and spacing, color and visual emphasis, overflow behavior for the matching interface element. */
.editor-shell {
  height: 530px;
  overflow: auto;
  background: var(--panel-solid);
}

/* Styles `#editor, #editor > div`. This component rule controls sizing and spacing for the matching interface element. */
#editor,
#editor > div {
  height: 100%;
}

/* Styles `.fallback-editor`. This component rule controls sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.fallback-editor {
  width: 100%;
  height: 100%;
  padding: 22px;
  resize: none;
  border: 0;
  outline: 0;
  color: var(--text);
  background: var(--panel-solid);
  font: 500 var(--editor-font-size, 14px)/1.75 var(--mono);
  caret-color: var(--mint);
  tab-size: 4;
}

/* Preserves long source lines when wrapping is disabled in the fallback editor. */
.fallback-editor.wrap-disabled {
  overflow-wrap: normal;
  white-space: pre;
}

/* Hides only the fallback textarea presentation while its original value remains the source of truth. */
.fallback-editor.automatic-comments-hidden-source {
  display: none;
}

/* The textarea fallback displays a read-only commented study surface when widgets are unavailable. */
.fallback-learning-comments {
  display: none;
  min-height: 100%;
  margin: 0;
  padding: 22px;
  overflow: auto;
  color: var(--code-plain);
  background: var(--panel-solid);
  font: 500 var(--editor-font-size, 14px)/1.75 var(--mono);
  tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The visible class is controlled only by the non-destructive toolbar toggle. */
.fallback-learning-comments.visible {
  display: block;
}

/* Styles `.cm-editor`. This component rule controls sizing and spacing, color and visual emphasis, typography for the matching interface element. */
.cm-editor {
  height: 100%;
  color: var(--code-plain);
  background: var(--panel-solid);
  font: 500 var(--editor-font-size, 14px)/1.75 var(--mono);
}

/* Styles `.cm-editor.cm-focused`. This component rule controls boundaries and focus treatment for the matching interface element. */
.cm-editor.cm-focused {
  outline: none;
}

/* Styles `.cm-editor .cm-scroller`. This component rule controls sizing and spacing, typography for the matching interface element. */
.cm-editor .cm-scroller {
  padding: 18px 0;
  font-family: var(--mono);
}

/* Styles `.cm-editor .cm-content`. This component rule controls color and visual emphasis for the matching interface element. */
.cm-editor .cm-content {
  color: var(--code-plain);
  caret-color: var(--mint);
}

/*
 * Automatic comment widgets sit above their related source lines. They are not
 * editor document text, so line numbers, selection, tracing, and saved source
 * remain aligned with the learner's original Python.
 */
.cm-editor .cm-learning-comment {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 3px;
  padding: 8px 12px 8px calc(12px + var(--learning-comment-indent, 0ch));
  border-left: 2px solid var(--purple);
  color: var(--text-soft);
  background: color-mix(in srgb, var(--purple-soft) 62%, transparent);
  font: 500 0.88em/1.55 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  pointer-events: none;
}

/* The compact badge distinguishes generated trace evidence from editable Python. */
.cm-learning-comment-badge {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--purple) 48%, var(--line));
  border-radius: 999px;
  color: var(--purple);
  background: color-mix(in srgb, var(--purple-soft) 70%, var(--panel-solid));
  font: 700 0.68em/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The explanation remains ordinary readable prose instead of faint italic code. */
.cm-learning-comment-message {
  min-width: 0;
}

/* Styles `.cm-editor .cm-gutters`. This component rule controls sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.cm-editor .cm-gutters {
  min-width: 46px;
  border-right: 1px solid var(--line);
  color: var(--text-dim);
  background: var(--panel-solid);
}

/* Styles `.cm-editor .cm-activeLine, .cm-editor .cm-activeLineGutter`. This component rule controls color and visual emphasis for the matching interface element. */
.cm-editor .cm-activeLine,
.cm-editor .cm-activeLineGutter {
  background: var(--mint-soft);
}

/* Styles `.cm-editor .cm-activeLine`. This component rule controls sizing and spacing, color and visual emphasis for the matching interface element. */
.cm-editor .cm-activeLine {
  box-shadow: inset 2px 0 0 var(--mint);
}

/* Styles `.cm-editor .cm-selectionBackground, .cm-editor.cm-focused .cm-selectionBackground`. This component rule controls color and visual emphasis for the matching interface element. */
.cm-editor .cm-selectionBackground,
.cm-editor.cm-focused .cm-selectionBackground {
  background: var(--purple-soft) !important;
}

/* Styles `.cm-editor .tok-keyword, .cm-editor .tok-bool, .cm-editor .tok-null`. This component rule controls color and visual emphasis for the matching interface element. */
.cm-editor .tok-keyword,
.cm-editor .tok-bool,
.cm-editor .tok-null,
.cm-editor .tok-atom {
  color: var(--code-keyword) !important;
  font-weight: 600;
}

/* Variable names remain close to the main text color so ordinary code stays calm and readable. */
.cm-editor .tok-variableName {
  color: var(--code-name) !important;
}

/* Properties, function names, types, and classes receive cyan emphasis as named program structures. */
.cm-editor .tok-propertyName,
.cm-editor .tok-function,
.cm-editor .tok-typeName,
.cm-editor .tok-className,
.cm-editor .tok-definition {
  color: var(--code-property) !important;
}

/* Styles `.cm-editor .tok-string`. This component rule controls color and visual emphasis for the matching interface element. */
.cm-editor .tok-string,
.cm-editor .tok-literal {
  color: var(--code-string) !important;
}

/* Styles `.cm-editor .tok-number`. This component rule controls color and visual emphasis for the matching interface element. */
.cm-editor .tok-number {
  color: var(--code-number) !important;
}

/* Operators and punctuation stay visible without competing with names and values. */
.cm-editor .tok-operator,
.cm-editor .tok-punctuation {
  color: var(--code-operator) !important;
}

/* Styles `.cm-editor .tok-comment`. This component rule controls color and visual emphasis, typography for the matching interface element. */
.cm-editor .tok-comment {
  color: var(--code-comment) !important;
  font-style: italic;
}

/* Invalid tokens use the error color so malformed text is obvious in either theme. */
.cm-editor .tok-invalid {
  color: var(--code-invalid) !important;
  text-decoration: underline wavy currentColor;
}

/* Styles `.editor-footer`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 43px;
  padding: 0 16px;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  background: var(--bg-raised);
  font: 500 0.62rem/1 var(--mono);
}

/* Styles `.tabs-header`. This component rule controls sizing and spacing for the matching interface element. */
.tabs-header {
  padding-left: 8px;
}

/* Styles `.panel-tabs`. This component rule controls layout for the matching interface element. */
.panel-tabs {
  align-self: stretch;
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Hides the compact tab row scrollbar while preserving horizontal keyboard and touch scrolling. */
.panel-tabs::-webkit-scrollbar {
  display: none;
}

/* Styles `.panel-tab`. This component rule controls sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.panel-tab {
  position: relative;
  flex: 0 0 auto;
  padding: 0 9px;
  border: 0;
  color: var(--text-dim);
  background: none;
  font: 600 0.68rem/1 var(--mono);
  cursor: pointer;
}

/* Creates or styles the generated visual part `.panel-tab::after`. It contributes sizing and spacing, color and visual emphasis without adding extra HTML. */
.panel-tab::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  background: transparent;
}

/* Defines the state-specific appearance of `.panel-tab.active`. The declarations control color and visual emphasis when that state class is present. */
.panel-tab.active {
  color: var(--text);
}

/* Defines the state-specific appearance of `.panel-tab.active::after`. The declarations control color and visual emphasis when that state class is present. */
.panel-tab.active::after {
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
}

/* Styles `.tab-badge`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.tab-badge {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: 5px;
  place-items: center;
  border-radius: 999px;
  color: var(--purple);
  background: var(--purple-soft);
  font-size: 0.58rem;
}

/* Gives every educational view the same stable scrolling region inside the right panel. */
.story-view,
.variables-view,
.references-view,
.flow-view,
.loop-view,
.learning-view {
  height: 529px;
  overflow: auto;
}

/* Supplies consistent interior spacing for all newly grouped learning tools. */
.learning-detail,
.scenario-grid {
  padding: 22px;
}

/* Establishes the common elevated card used by comparisons, explanations, and scenarios. */
.learning-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
}

/* Keeps a technical label and its compact status aligned at opposite card edges. */
.learning-card-heading,
.structure-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Removes the default lower label gap when the label participates in a flex heading. */
.learning-card-heading .section-label {
  margin-bottom: 0;
}

/* Presents contextual counts as readable status pills in both themes. */
.context-badge {
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--mint);
  background: var(--mint-soft);
  font: 600 0.59rem/1 var(--mono);
}

/* Separates the state comparison from the main explanation without excessive vertical space. */
.before-after-card {
  margin-bottom: 24px;
}

/* Lays out a sequence of state transitions as a readable vertical table. */
.before-after-grid {
  display: grid;
  gap: 6px;
  margin-top: 13px;
}

/* Aligns name, prior value, arrow, and resulting value for fast visual comparison. */
.state-comparison-row {
  display: grid;
  grid-template-columns: minmax(68px, 0.7fr) minmax(70px, 1fr) 20px minmax(70px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text-soft);
  background: var(--panel-soft);
}

/* Highlights only rows that actually changed between adjacent snapshots. */
.state-comparison-row.changed {
  box-shadow: inset 2px 0 0 var(--mint);
}

/* Keeps possibly long representations contained inside the comparison grid. */
.state-comparison-row code {
  overflow: hidden;
  color: var(--text);
  font: 500 0.68rem/1.4 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Makes the transition arrow visible while keeping it visually secondary. */
.comparison-arrow {
  color: var(--mint);
  text-align: center;
}

/* Styles an empty comparison message consistently with other supporting copy. */
.learning-empty-copy {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* Gives the error coach an unmistakable but calm error boundary. */
.error-coach {
  margin-bottom: 24px;
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  background: color-mix(in srgb, var(--red) 7%, var(--bg-raised));
}

/* Keeps coach headings compact so the original Python message remains prominent. */
.error-coach h3 {
  margin: 5px 0 8px;
  color: var(--red);
  font-size: 0.95rem;
}

/* Styles the actionable error suggestion separately from the definition. */
.coach-tip {
  margin-bottom: 0;
  color: var(--text-soft);
}

/* Makes the exact observed condition the strongest element in its investigator card. */
.condition-code {
  display: block;
  overflow-x: auto;
  margin: 10px 0 14px;
  padding: 13px;
  border-radius: 7px;
  color: var(--cyan);
  background: var(--panel-solid);
  font: 600 0.82rem/1.5 var(--mono);
}

/* Gives true, false, and unknown outcomes a shared readable pill treatment. */
.condition-outcome {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--panel-soft);
  font: 600 0.65rem/1 var(--mono);
}

/* Uses mint for an observed true path. */
.condition-outcome.true {
  color: var(--mint);
  background: var(--mint-soft);
}

/* Uses the error accent for an observed false path without implying a program error. */
.condition-outcome.false {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

/* Wraps boolean components so narrow screens never force horizontal page scrolling. */
.condition-pieces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
}

/* Presents individual condition components as code tokens. */
.condition-piece {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: var(--panel-solid);
  font-size: 0.68rem;
}

/* Distinguishes the boolean relationship between adjacent expression pieces. */
.boolean-operator {
  color: var(--purple);
  font: 600 0.66rem/1 var(--mono);
  text-transform: uppercase;
}

/* Explains the investigator's safety boundary in intentionally quiet prose. */
.safety-note {
  margin: 18px 0 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* Centers the function flow while retaining a comfortable reading width. */
.function-journey {
  display: grid;
  width: min(430px, 100%);
  margin: 0 auto;
  justify-items: stretch;
}

/* Gives each function stage a distinct instrument-card surface. */
.journey-stage {
  padding: 14px 16px;
  border: 1px solid var(--line-bright);
  border-radius: 9px;
  background: var(--bg-raised);
}

/* Labels each function stage in the same technical language as the wider interface. */
.journey-stage span {
  display: block;
  margin-bottom: 8px;
  color: var(--mint);
  font: 600 0.59rem/1 var(--mono);
  letter-spacing: 0.1em;
}

/* Preserves local values on separate lines inside a function stage. */
.journey-stage code {
  color: var(--text);
  font: 500 0.74rem/1.55 var(--mono);
  white-space: pre-wrap;
}

/* Connects function stages without animated movement. */
.journey-connector {
  padding: 6px;
  color: var(--purple);
  text-align: center;
}

/* Holds persistent watched values above the selected variable details. */
.watch-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 0.73rem;
}

/* Cancels the normal section-label margin inside the horizontal watch strip. */
.watch-strip .section-label {
  width: 100%;
  margin-bottom: 2px;
}

/* Displays watched values as compact, clickable inspector shortcuts. */
.watch-chip,
.small-action,
.structure-choice {
  padding: 6px 9px;
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  color: var(--text-soft);
  background: var(--panel-solid);
  font: 600 0.62rem/1.2 var(--mono);
  cursor: pointer;
}

/* Aligns the dedicated Watches title with its persistent pin count. */
.watch-dashboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* Removes ordinary label spacing inside the dedicated watch heading. */
.watch-dashboard-heading .section-label {
  margin-bottom: 0;
}

/* Arranges watched variables in a responsive dashboard rather than a narrow chip strip. */
.watch-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Gives each watched name room for value, type, and management actions. */
.watch-dashboard-card {
  display: grid;
  gap: 13px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-raised);
}

/* Aligns a watched name with its current Python type. */
.watch-dashboard-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Resets the semantic watch-card heading to the compact dashboard scale. */
.watch-dashboard-card h3 {
  overflow: hidden;
  margin: 0;
  font-size: 0.92rem;
  text-overflow: ellipsis;
}

/* Keeps long watched values inside the card while preserving their exact representation in text. */
.watch-dashboard-card > code {
  overflow: hidden;
  color: var(--mint);
  font: 500 0.72rem/1.5 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Visually quiets a name that is not available at the selected trace position. */
.watch-dashboard-card.out-of-scope {
  opacity: 0.72;
}

/* Keeps inspect and removal controls grouped beneath one watched value. */
.watch-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Communicates that inspection is unavailable before a watched name enters scope. */
.watch-dashboard-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Uses mint to confirm selected watch and structure states. */
.small-action.active,
.structure-choice.active,
.watch-chip:hover,
.small-action:hover,
.structure-choice:hover {
  border-color: var(--mint);
  color: var(--mint);
}

/* Allows selection among several supported container values without another tab layer. */
.structure-picker {
  display: flex;
  overflow-x: auto;
  gap: 7px;
  margin-bottom: 14px;
  padding-bottom: 3px;
}

/* Resets structure card heading spacing inherited from ordinary semantic headings. */
.structure-heading h3 {
  margin: 0;
}

/* Arranges container positions as wrapping cells suitable for both indexes and dictionary keys. */
.structure-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

/* Separates each structure label from its value in a concrete visual unit. */
.structure-cell {
  display: grid;
  min-width: 72px;
  border: 1px solid var(--line-bright);
  border-radius: 7px;
  overflow: hidden;
  text-align: center;
}

/* Uses a quiet header for list indexes or dictionary keys. */
.structure-cell span {
  padding: 5px 8px;
  color: var(--text-dim);
  background: var(--panel-soft);
  font: 600 0.58rem/1 var(--mono);
}

/* Gives each structure value enough space to remain legible. */
.structure-cell code {
  overflow: hidden;
  padding: 10px 8px;
  color: var(--text);
  font: 500 0.7rem/1 var(--mono);
  text-overflow: ellipsis;
}

/* Explains whether a structure changed in place or was replaced. */
.mutation-note {
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--text-soft);
  background: var(--panel-soft);
  font-size: 0.82rem;
}

/* Marks confirmed same-object mutation with the teaching accent. */
.mutation-note.mutated {
  color: var(--mint);
  background: var(--mint-soft);
}

/* Adds category color to the full Mutation Explorer without relying on text alone. */
.mutation-explorer-card.mutation {
  border-color: color-mix(in srgb, var(--mint) 48%, var(--line));
}

/* Uses purple to distinguish a new object connection from an in-place change. */
.mutation-explorer-card.reassignment {
  border-color: color-mix(in srgb, var(--purple) 55%, var(--line));
}

/* Displays the detected object-change category as an uppercase status pill. */
.mutation-kind {
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--panel-soft);
  font: 600 0.58rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Uses mint for an in-place mutation. */
.mutation-kind.mutation {
  color: var(--mint);
  background: var(--mint-soft);
}

/* Uses purple for reassignment to a different object. */
.mutation-kind.reassignment {
  color: var(--purple);
  background: var(--purple-soft);
}

/* Places before and after reference diagrams around a compact identity connector. */
.mutation-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 18px 0;
}

/* Labels each captured side in the shared technical typography. */
.mutation-stage > span {
  display: block;
  margin-bottom: 8px;
  color: var(--text-dim);
  font: 600 0.58rem/1 var(--mono);
  letter-spacing: 0.08em;
}

/* Connects the variable name to its conceptual object without exposing RAM addresses. */
.mutation-reference {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

/* Gives the reference arrow the shared teaching accent. */
.mutation-reference > span {
  color: var(--mint);
}

/* Represents one conceptual Python object with a bounded value preview. */
.mutation-object {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 11px;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  background: var(--panel-solid);
}

/* Names conceptual objects A and B without pretending to display physical memory. */
.mutation-object small {
  color: var(--purple);
  font: 600 0.57rem/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Keeps the object contents readable within either diagram column. */
.mutation-object code {
  overflow: hidden;
  color: var(--text);
  font: 500 0.68rem/1.4 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* States whether identity remained stable between the two captured values. */
.mutation-connector {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--text-dim);
  text-align: center;
}

/* Keeps the identity label compact above its directional arrow. */
.mutation-connector span {
  max-width: 70px;
  font: 500 0.55rem/1.3 var(--mono);
  text-transform: uppercase;
}

/* Makes the transition direction visible between conceptual objects. */
.mutation-connector strong {
  color: var(--mint);
  font-size: 1.1rem;
}

/* Provides the plain-language conclusion beneath the reference diagram. */
.mutation-explanation {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

/* Explains whether another visible name shares the selected object. */
.alias-note {
  margin: 9px 0 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Displays the numeric coverage result beside a plain-language fraction. */
.coverage-summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}

/* Makes the percentage glanceable without becoming a decorative dashboard metric. */
.coverage-summary strong {
  color: var(--mint);
  font: 600 1.8rem/1 var(--mono);
}

/* Stacks clickable source coverage rows in document order. */
.coverage-list {
  display: grid;
  gap: 4px;
}

/* Aligns count, line number, and source while keeping learner text safely inside the panel. */
.coverage-line {
  display: grid;
  grid-template-columns: 34px 34px minmax(0, 1fr);
  gap: 7px;
  width: 100%;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-dim);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

/* Keeps source snippets on one scan-friendly row. */
.coverage-line code {
  overflow: hidden;
  color: var(--text-soft);
  font: 500 0.67rem/1.3 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Uses mint for source reached once. */
.coverage-line.reached {
  color: var(--mint);
  background: color-mix(in srgb, var(--mint-soft) 60%, transparent);
}

/* Uses amber for repeated lines so loops stand out immediately. */
.coverage-line.repeated {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, transparent);
}

/* Allows missed source to remain visible without competing with reached source. */
.coverage-line.missed {
  opacity: 0.72;
}

/* Adds a clear breakpoint dot to a clicked CodeMirror line number. */
.cm-lineNumbers .cm-gutterElement {
  position: relative;
  cursor: pointer;
}

/* Draws the breakpoint marker without changing gutter width or editor geometry. */
.cm-lineNumbers .cm-gutterElement.cm-breakpoint-gutter::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  transform: translateY(-50%);
}

/* Colors an active trace bookmark without changing the control's dimensions. */
.bookmark-button[aria-pressed="true"] {
  border-color: var(--amber);
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}

/* Creates a stable horizontal scroll region for wider loop comparisons. */
.loop-table-wrap {
  overflow-x: auto;
}

/* Separates the loop table from the iteration cards above it. */
.loop-table-label {
  margin-top: 26px;
}

/* Uses collapsed borders for a compact, familiar data-table representation. */
.loop-table {
  width: 100%;
  border-collapse: collapse;
  font: 500 0.65rem/1.35 var(--mono);
}

/* Defines consistent cells for headings and observed values. */
.loop-table th,
.loop-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
  text-align: left;
  white-space: nowrap;
}

/* Distinguishes column labels from captured values. */
.loop-table thead th {
  color: var(--text-dim);
  background: var(--panel-soft);
}

/* Allows an iteration number to navigate without looking like a large button. */
.loop-table button {
  border: 0;
  color: var(--mint);
  background: none;
  font: inherit;
  cursor: pointer;
}

/* Arranges input and comparison cards side by side when the workspace has enough width. */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Styles explanatory paragraphs within scenarios consistently. */
.scenario-grid p,
.scenario-card p {
  color: var(--text-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* Uses the available panel width now that Input and Compare are independent destinations. */
.scenario-card {
  width: min(620px, 100%);
  margin: 0 auto;
}

/* Makes prepared stdin comfortable for multiline editing in either theme. */
#programInputs {
  width: 100%;
  resize: vertical;
  padding: 11px;
  border: 1px solid var(--line-bright);
  border-radius: 7px;
  outline: 0;
  color: var(--text);
  background: var(--panel-solid);
  font: 500 0.72rem/1.5 var(--mono);
}

/* Shows keyboard focus on the Input Playground using the shared teaching accent. */
#programInputs:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px var(--mint-soft);
}

/* Reports prepared or consumed input beneath the textarea. */
.input-status {
  margin-top: 9px;
  color: var(--text-dim);
  font: 500 0.61rem/1.4 var(--mono);
}

/* Keeps the two capture actions aligned and able to wrap on a narrow card. */
.comparison-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

/* Provides a stable result surface before and after both comparison runs exist. */
.comparison-result {
  padding: 12px;
  border-radius: 7px;
  color: var(--text-dim);
  background: var(--panel-soft);
  font-size: 0.76rem;
}

/* Places captured runs next to each other for direct comparison. */
.run-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Stacks each run's input, output, and trace size inside a bounded card. */
.run-comparison-grid > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-raised);
}

/* Prevents captured program output from expanding the comparison horizontally. */
.run-comparison-grid pre,
.run-comparison-grid code {
  overflow: hidden;
  margin: 0;
  color: var(--text-soft);
  font: 500 0.62rem/1.4 var(--mono);
  text-overflow: ellipsis;
  white-space: pre-wrap;
}

/* States the first behavioral difference beneath both run cards. */
.comparison-conclusion {
  margin: 10px 0 0 !important;
  color: var(--text) !important;
}

/* Creates a chronological bookmark row with a large jump target and small removal action. */
.bookmark-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raised);
}

/* Highlights the bookmark matching the currently displayed trace position. */
.bookmark-row.active {
  border-color: var(--mint);
  box-shadow: inset 2px 0 0 var(--mint);
}

/* Allows the bookmark's full descriptive area to navigate to its trace step. */
.bookmark-jump {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

/* Truncates long bookmarked source while preserving it in the trace itself. */
.bookmark-jump code {
  overflow: hidden;
  color: var(--text-soft);
  font: 500 0.68rem/1.4 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gives bookmark removal a compact, clearly separate target. */
.bookmark-remove {
  align-self: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-dim);
  background: var(--panel-solid);
  cursor: pointer;
}

/*
 * Graph canvases manage their own pan and zoom interactions. Preventing their
 * parent views from scrolling stops canvas measurements from creating and
 * removing browser scrollbars, which previously made the panel appear to shake.
 */
.references-view,
.flow-view {
  overflow: hidden;
}

/* Styles `.empty-state`. This component rule controls layout, sizing and spacing, typography for the matching interface element. */
.empty-state {
  display: grid;
  height: 100%;
  padding: 40px;
  place-content: center;
  justify-items: center;
  text-align: center;
}

/* Styles `.empty-glyph`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.empty-glyph {
  display: grid;
  width: 76px;
  height: 76px;
  margin-bottom: 22px;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  color: var(--purple);
  background: var(--purple-soft);
  font: 500 1.25rem/1 var(--mono);
}

/* Styles `.empty-glyph.loop-glyph`. This component rule controls color and visual emphasis for the matching interface element. */
.empty-glyph.loop-glyph {
  color: var(--mint);
  background: var(--mint-soft);
}

/* Styles the semantic level-two headings used by every empty educational view. */
.empty-state h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

/* Styles `.empty-state p`. This component rule controls sizing and spacing, color and visual emphasis, typography for the matching interface element. */
.empty-state p {
  max-width: 310px;
  margin: 0;
  color: var(--text-soft);
  line-height: 1.6;
}

/* Styles `.empty-state code`. This component rule controls color and visual emphasis, typography for the matching interface element. */
.empty-state code {
  color: var(--mint);
  font-family: var(--mono);
}

/* Styles `.trace-content, .loop-content`. This component rule controls sizing and spacing for the matching interface element. */
.trace-content,
.loop-content {
  padding: 28px;
}

/* Styles `.trace-kicker`. This component rule controls sizing and spacing, color and visual emphasis, typography for the matching interface element. */
.trace-kicker {
  margin-bottom: 13px;
  color: var(--purple);
  font: 600 0.65rem/1 var(--mono);
  letter-spacing: 0.1em;
}

/* Styles `.executed-code`. This component rule controls sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment, overflow behavior for the matching interface element. */
.executed-code {
  overflow-x: auto;
  padding: 15px 16px;
  border-left: 2px solid var(--mint);
  color: var(--text);
  background: linear-gradient(90deg, var(--mint-soft), transparent);
  font: 500 0.82rem/1.5 var(--mono);
  white-space: pre;
}

/* Styles `.explanation`. This component rule controls sizing and spacing, color and visual emphasis, typography for the matching interface element. */
.explanation {
  margin: 20px 0 28px;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.65;
}

/* Separates console text produced by only the current step from cumulative output below. */
.step-output {
  margin: -8px 0 28px;
}

/* Presents one step's output as a compact terminal fragment. */
.step-output pre {
  overflow-x: auto;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--mint);
  background: var(--panel-solid);
  font: 500 0.72rem/1.5 var(--mono);
}

/* Styles `.section-label`. This component rule controls sizing and spacing, color and visual emphasis, typography for the matching interface element. */
.section-label {
  margin-bottom: 11px;
  color: var(--text-dim);
}

/* Styles `.change-section, .variables-section, .call-stack-section`. This component rule controls sizing and spacing for the matching interface element. */
.change-section,
.variables-section,
.call-stack-section {
  margin-top: 24px;
}

/* Styles `.change-list, .variables-grid`. This component rule controls layout, sizing and spacing for the matching interface element. */
.change-list,
.variables-grid {
  display: grid;
  gap: 7px;
}

/* Styles `.change-item, .variable-card`. This component rule controls layout, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.change-item,
.variable-card {
  display: grid;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-raised);
  font: 500 0.72rem/1.35 var(--mono);
}

/* Styles `.change-item`. This component rule controls layout, sizing and spacing for the matching interface element. */
.change-item {
  grid-template-columns: minmax(90px, 1fr) minmax(65px, auto) 24px minmax(65px, auto);
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
}

/* Styles `.change-item .change-name`. This component rule controls color and visual emphasis, typography, overflow behavior for the matching interface element. */
.change-item .change-name {
  overflow: hidden;
  color: var(--cyan);
  text-overflow: ellipsis;
}

/* Styles `.change-item .old-value`. This component rule controls color and visual emphasis, typography for the matching interface element. */
.change-item .old-value {
  color: var(--text-dim);
  text-align: right;
}

/* Styles `.change-item .arrow`. This component rule controls color and visual emphasis, typography for the matching interface element. */
.change-item .arrow {
  color: var(--text-dim);
  text-align: center;
}

/* Styles `.change-item .new-value`. This component rule controls color and visual emphasis, typography, overflow behavior for the matching interface element. */
.change-item .new-value {
  overflow: hidden;
  color: var(--mint);
  text-overflow: ellipsis;
  text-align: right;
}

/* Styles `.change-item.created`. This component rule controls color and visual emphasis, boundaries and focus treatment for the matching interface element. */
.change-item.created {
  border-color: color-mix(in srgb, var(--mint) 35%, var(--line));
}

/* Styles `.change-item.removed .new-value`. This component rule controls color and visual emphasis for the matching interface element. */
.change-item.removed .new-value {
  color: var(--red);
}

/* Styles `.no-changes`. This component rule controls sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.no-changes {
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--text-dim);
  font: 500 0.7rem/1.4 var(--mono);
}

/* Styles `.variables-grid`. This component rule controls layout for the matching interface element. */
.variables-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Styles `.variable-card`. This component rule controls layout, sizing and spacing for the matching interface element. */
.variable-card {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  width: 100%;
  min-height: 48px;
  padding: 8px 11px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Confirms that a compact variable card opens the deeper inspector. */
.variable-card:hover {
  border-color: var(--cyan);
  background: var(--panel-soft);
}

/* Styles `.variable-name`. This component rule controls color and visual emphasis, typography, overflow behavior for the matching interface element. */
.variable-name {
  overflow: hidden;
  color: var(--cyan);
  text-overflow: ellipsis;
}

/* Styles `.variable-value`. This component rule controls color and visual emphasis, typography, overflow behavior for the matching interface element. */
.variable-value {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  text-align: right;
}

/* Styles `.variable-type`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography for the matching interface element. */
.variable-type {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 0.58rem;
  text-align: right;
}

/* Styles `.call-stack`. This component rule controls layout, sizing and spacing for the matching interface element. */
.call-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 5px;
}

/* Styles `.stack-frame`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.stack-frame {
  display: grid;
  gap: 8px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--purple);
  border-radius: 6px;
  color: var(--text-soft);
  background: var(--purple-soft);
  font: 500 0.68rem/1.35 var(--mono);
}

/* Defines the state-specific appearance of `.stack-frame.active`. The declarations control color and visual emphasis, boundaries and focus treatment when that state class is present. */
.stack-frame.active {
  border-left-color: var(--mint);
  color: var(--text);
}

/* Aligns the function name and local-variable count in each expanded frame. */
.stack-frame-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Keeps the frame count visually secondary to the function name. */
.stack-frame-header span {
  color: var(--text-dim);
}

/* Stacks the visible local variables below their function-frame heading. */
.stack-frame-locals {
  display: grid;
  gap: 4px;
}

/* Pairs each local name with its safely shortened value. */
.stack-local-row {
  display: grid;
  grid-template-columns: minmax(80px, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  color: var(--text-dim);
}

/* Highlights local values while preventing long representations from widening the panel. */
.stack-local-row code {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  text-align: right;
  white-space: nowrap;
}

/* Explains an empty function frame without leaving a visually blank card. */
.stack-local-empty {
  color: var(--text-dim);
  font-style: italic;
}

/* Variable explorer */
/* Splits variable selection and deep inspection into two independently scrolling columns. */
.variables-content {
  display: grid;
  grid-template-columns: minmax(145px, 0.38fr) minmax(0, 1fr);
  gap: 1px;
  height: 100%;
  background: var(--line);
}

/* Holds scope groups and variable selection controls. */
.scope-browser {
  overflow: auto;
  padding: 18px 12px;
  background: var(--bg-raised);
}

/* Separates global and function-local names in the selector. */
.scope-group + .scope-group {
  margin-top: 20px;
}

/* Labels the source scope for the variables that follow. */
.scope-group h3 {
  margin: 0 7px 11px;
  color: var(--text-dim);
  font: 600 0.56rem/1 var(--mono);
  letter-spacing: 0.09em;
}

/* Presents one variable as a compact, keyboard-accessible inspector selector. */
.scope-variable {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 7px;
  width: 100%;
  margin-bottom: 7px;
  padding: 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

/* Marks the variable currently expanded in the inspector. */
.scope-variable.active,
.scope-variable:hover {
  border-color: var(--mint);
  background: var(--mint-soft);
  box-shadow: inset 3px 0 0 var(--mint);
  transform: translateX(2px);
}

/* Makes pointer movement feel intentional without delaying keyboard interaction. */
.scope-variable {
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

/* Keeps selected variable names and values on one compact row. */
.scope-variable strong,
.scope-variable code {
  overflow: hidden;
  font: 600 0.65rem/1.2 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Uses color to distinguish the Python name from its current representation. */
.scope-variable strong {
  color: var(--cyan);
}

/* Right-aligns values so similarly sized representations scan as a column. */
.scope-variable code {
  color: var(--text);
  text-align: right;
}

/* Places the Python type beneath the selected variable row. */
.scope-variable small {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font: 500 0.55rem/1 var(--mono);
  text-align: right;
}

/* Provides the scrollable detail surface for the selected variable. */
.variable-inspector {
  overflow: auto;
  padding: 24px;
  background:
    linear-gradient(135deg, var(--mint-soft), transparent 12rem),
    var(--panel-solid);
}

/* Aligns the selected name with its Python type badge. */
.inspector-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}

/* Uses the scope as a small orientation label above the variable name. */
.inspector-heading span:first-child {
  color: var(--mint);
  font: 600 0.56rem/1 var(--mono);
  letter-spacing: 0.09em;
}

/* Makes the selected Python name the inspector's visual anchor. */
.inspector-heading h3 {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 1.35rem;
}

/* Displays the Python type as a compact purple badge. */
.inspector-type {
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--purple) !important;
  background: var(--purple-soft);
}

/* Arranges value, lifetime, and mutability facts into responsive cards. */
.inspector-metadata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 28px;
}

/* Styles one variable fact without visually competing with nested contents. */
.inspector-metadata > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-raised);
  box-shadow: 0 8px 24px rgba(20, 35, 29, 0.04);
}

/* Keeps fact labels quiet and values readable. */
.inspector-metadata span {
  color: var(--text-dim);
  font: 500 0.55rem/1 var(--mono);
}

/* Prevents long values and alias lists from breaking the two-column fact grid. */
.inspector-metadata code {
  overflow: hidden;
  color: var(--text);
  font: 500 0.67rem/1.3 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Renders primitive values as index or key, value, and Python type. */
.value-tree-leaf {
  display: grid;
  grid-template-columns: minmax(70px, 0.7fr) minmax(0, 1.3fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  font: 500 0.64rem/1.3 var(--mono);
}

/* Colors tree labels, representations, and types according to their teaching role. */
.value-tree-leaf > span { color: var(--cyan); }
.value-tree-leaf code { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.value-tree-leaf small { color: var(--text-dim); }

/* Frames expandable Python containers without introducing another heavy panel. */
.value-tree-branch {
  margin-bottom: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-raised);
}

/* Makes container summaries clickable and consistent with the mono data language. */
.value-tree-branch summary {
  display: flex;
  justify-content: space-between;
  padding: 9px;
  color: var(--cyan);
  font: 600 0.65rem/1.3 var(--mono);
  cursor: pointer;
}

/* Shows the compact type and length summary on the opposite side of its label. */
.value-tree-branch summary code {
  color: var(--text-soft);
}

/* Indents nested children to communicate containment. */
.value-tree-children {
  padding: 0 8px 8px 14px;
}

/* Reports serializer truncation honestly when a large container exceeds preview limits. */
.value-tree-omitted {
  padding: 8px;
  color: var(--text-dim);
  font: 500 0.58rem/1.3 var(--mono);
}

/* Creates breathing room between nested contents and the history list. */
.inspector-history-label {
  margin-top: 24px;
}

/* Holds change-only history rows in execution order. */
.variable-history {
  display: grid;
  gap: 7px;
  padding-left: 13px;
  border-left: 1px solid var(--line-bright);
}

/* Makes each history event a button that can jump playback to its source step. */
.history-row {
  display: grid;
  grid-template-columns: 62px 64px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  position: relative;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--bg-raised);
  font: 500 0.6rem/1.25 var(--mono);
  text-align: left;
  cursor: pointer;
}

/* Adds a small timeline marker without introducing decorative clutter. */
.history-row::before {
  position: absolute;
  top: 50%;
  left: -18px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--panel-solid);
  border-radius: 50%;
  background: var(--text-dim);
  content: "";
  transform: translateY(-50%);
}

/* Connects the active history event to the playback position. */
.history-row.active,
.history-row:hover {
  border-color: var(--mint);
  background: var(--mint-soft);
  transform: translateX(2px);
}

/* Connects the highlighted history row to the mint trace-playback accent. */
.history-row.active::before,
.history-row:hover::before {
  background: var(--mint);
}

/* Keeps the small history movement smooth and restrained. */
.history-row {
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

/* Keeps the potentially long historical value safely inside its row. */
.history-row code {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  text-align: right;
  white-space: nowrap;
}

/* Graph views */
/* Gives the graph toolbar and canvas the full height of their parent tab panel. */
.graph-content {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* Explains graph semantics and keeps a small viewport-reset control nearby. */
.graph-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  background:
    linear-gradient(90deg, var(--mint-soft), transparent 45%),
    var(--bg-raised);
  /* Eleven-and-a-half pixel copy is the minimum comfortable size for this compact toolbar. */
  font: 500 0.72rem/1.5 var(--mono);
}

/* Arranges all graph magnification actions as one compact, stable-width instrument group. */
.graph-zoom-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

/* Gives the granular range enough travel while allowing it to shrink in narrow panels. */
.graph-zoom-slider {
  width: clamp(82px, 9vw, 124px);
  min-width: 70px;
  accent-color: var(--mint);
  cursor: pointer;
}

/* Keeps changing percentages from moving neighboring controls horizontally. */
.graph-zoom-value {
  width: 42px;
  color: var(--text-soft);
  font: 600 0.62rem/1 var(--mono);
  text-align: center;
}

/* Keeps the compact map label and explanation aligned as one readable unit. */
.graph-toolbar-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Lets the graph explanation wrap instead of widening the entire panel. */
.graph-toolbar-copy > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Introduces the graph explanation as guidance rather than loose body text. */
.graph-toolbar-label {
  flex: 0 0 auto;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--mint) 32%, var(--line));
  border-radius: 999px;
  color: var(--mint);
  background: var(--panel-solid);
  /* The pill remains compact while avoiding the blurred look of sub-nine-pixel text. */
  font: 700 0.6rem/1 var(--mono);
  letter-spacing: 0.08em;
}

/* Styles the graph Fit action as a quiet utility rather than a primary command. */
.graph-toolbar button {
  min-width: 58px;
  padding: 8px 11px;
  border: 1px solid var(--line-bright);
  border-radius: 7px;
  color: var(--text);
  background: var(--panel-solid);
  /* Utility actions use a full readable size because they are interactive text. */
  font: 600 0.7rem/1 var(--mono);
  cursor: pointer;
}

/* Overrides the general toolbar button width for the intentionally square step actions. */
.graph-toolbar .graph-zoom-step {
  min-width: 30px;
  width: 30px;
  padding: 8px 0;
}

/* Keeps the content-aware Fit action visually separate from incremental zoom steps. */
.graph-fit-button {
  margin-left: 3px;
}

/* Gives the utility action the same crisp hover language as workspace controls. */
.graph-toolbar button:hover {
  border-color: var(--mint);
  color: var(--mint);
  background: var(--mint-soft);
}

/* Reserves a stable drawing surface for Cytoscape in either graph mode. */
.graph-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  contain: layout paint;
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    radial-gradient(circle at center, var(--mint-soft), transparent 58%),
    var(--panel-solid);
  background-size: 28px 28px, 28px 28px, auto, auto;
  box-shadow: inset 0 1px 0 var(--line);
}

/* Shows progress and errors directly inside the drawing surface. */
.graph-canvas.loading::before,
.graph-canvas.failed::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(320px, calc(100% - 48px));
  padding: 18px 20px;
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--panel-solid) 92%, transparent);
  box-shadow: var(--shadow);
  content: attr(data-message);
  font: 600 0.68rem/1.5 var(--mono);
  text-align: center;
  transform: translate(-50%, -50%);
}

/* Uses a static accent while loading so the graph surface never pulses. */
.graph-canvas.loading::before {
  border-color: color-mix(in srgb, var(--mint) 45%, var(--line));
  color: var(--mint);
}

/* Uses the error color for the visible fallback without hiding other views. */
.graph-canvas.failed::before {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  color: var(--red);
}

/*
 * Honors operating-system motion preferences across loading feedback, hover
 * movement, and decorative effects for learners sensitive to animation.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Code execution heatmap */
/* Gives every executed source line a low-intensity mint wash. */
.cm-editor .cm-trace-line {
  background: color-mix(in srgb, var(--mint) 5%, transparent);
}

/* Increases the wash for lines executed more frequently, usually loop bodies. */
.cm-editor .cm-trace-intensity-2 {
  background: color-mix(in srgb, var(--mint) 10%, transparent);
}

/* Marks the hottest lines without overwhelming syntax colors. */
.cm-editor .cm-trace-intensity-3 {
  background: color-mix(in srgb, var(--mint) 16%, transparent);
}

/* Uses a brighter edge and wash for the trace step currently being explained. */
.cm-editor .cm-trace-current {
  background: color-mix(in srgb, var(--purple) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--purple);
}

/* Loop lab */
/* Styles `.loop-summary`. This component rule controls layout, sizing and spacing for the matching interface element. */
.loop-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

/* Styles `.loop-type, .iteration-count`. This component rule controls typography for the matching interface element. */
.loop-type,
.iteration-count {
  font: 600 0.65rem/1 var(--mono);
  letter-spacing: 0.08em;
}

/* Styles `.loop-type`. This component rule controls color and visual emphasis for the matching interface element. */
.loop-type {
  color: var(--purple);
}

/* Styles `.iteration-count`. This component rule controls color and visual emphasis for the matching interface element. */
.iteration-count {
  color: var(--mint);
}

/* Styles `.loop-source`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment, overflow behavior for the matching interface element. */
.loop-source {
  display: block;
  overflow-x: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: var(--bg-raised);
  font: 500 0.78rem/1.5 var(--mono);
  white-space: pre;
}

/* Styles `.loop-meter`. This component rule controls sizing and spacing, color and visual emphasis, boundaries and focus treatment, overflow behavior for the matching interface element. */
.loop-meter {
  height: 3px;
  margin: 22px 0 28px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
}

/* Styles `.loop-meter span`. This component rule controls layout, sizing and spacing, color and visual emphasis, motion and interaction feedback for the matching interface element. */
.loop-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--mint));
  box-shadow: 0 0 10px var(--mint);
  transition: width 220ms ease;
}

/* Styles `.iteration-list`. This component rule controls layout, sizing and spacing for the matching interface element. */
.iteration-list {
  display: grid;
  gap: 7px;
}

/* Styles `.iteration-item`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.iteration-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text-soft);
  background: var(--bg-raised);
  font: 500 0.68rem/1.35 var(--mono);
}

/* Defines the state-specific appearance of `.iteration-item.current`. The declarations control color and visual emphasis, boundaries and focus treatment when that state class is present. */
.iteration-item.current {
  border-color: var(--mint);
  background: var(--mint-soft);
}

/* Styles `.iteration-number`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.iteration-number {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  color: var(--text-dim);
  background: var(--panel-soft);
}

/* Defines the state-specific appearance of `.iteration-item.current .iteration-number`. The declarations control color and visual emphasis when that state class is present. */
.iteration-item.current .iteration-number {
  color: var(--bg);
  background: var(--mint);
}

/* Styles `.iteration-values`. This component rule controls color and visual emphasis, typography for the matching interface element. */
.iteration-values {
  color: var(--text-dim);
  text-align: right;
}

/* Playback and output */
/* Styles `.controls-panel`. This component rule controls layout, sizing and spacing for the matching interface element. */
.controls-panel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  min-height: 84px;
  padding: 14px 18px;
}

/* Styles `.playback-controls`. This component rule controls layout, sizing and spacing for the matching interface element. */
.playback-controls {
  display: flex;
  gap: 7px;
}

/* Styles `.control-button, .play-button`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.control-button,
.play-button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: 7px;
  color: var(--text-soft);
  background: var(--bg-raised);
  cursor: pointer;
}

/* Styles `.play-button`. This component rule controls sizing and spacing, color and visual emphasis, boundaries and focus treatment for the matching interface element. */
.play-button {
  width: 44px;
  border-color: var(--mint);
  color: var(--bg);
  background: var(--mint);
}

/* Defines hover feedback for `.control-button:hover:not(:disabled)`, using color and visual emphasis, boundaries and focus treatment to confirm that the element is interactive. */
.control-button:hover:not(:disabled) {
  border-color: var(--mint);
  color: var(--mint);
}

/* Defines the disabled state for `.control-button:disabled, .play-button:disabled`, using color and visual emphasis to show that interaction is temporarily unavailable. */
.control-button:disabled,
.play-button:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

/* Styles `.restart-button`. This component rule controls sizing and spacing for the matching interface element. */
.restart-button {
  margin-left: 4px;
}

/* Styles `.progress-area`. This component rule controls sizing and spacing for the matching interface element. */
.progress-area {
  min-width: 0;
}

/* Styles `#stepSlider`. This component rule controls sizing and spacing, color and visual emphasis, boundaries and focus treatment for the matching interface element. */
#stepSlider {
  width: 100%;
  height: 3px;
  margin: 0;
  appearance: none;
  border-radius: 4px;
  background: var(--line-bright);
  cursor: pointer;
}

/* Creates or styles the generated visual part `#stepSlider::-webkit-slider-thumb`. It contributes sizing and spacing, color and visual emphasis, boundaries and focus treatment without adding extra HTML. */
#stepSlider::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  appearance: none;
  border: 3px solid var(--panel-solid);
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
}

/* Creates or styles the generated visual part `#stepSlider::-moz-range-thumb`. It contributes sizing and spacing, color and visual emphasis, boundaries and focus treatment without adding extra HTML. */
#stepSlider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 3px solid var(--panel-solid);
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
}

/* Styles `.progress-labels`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography for the matching interface element. */
.progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: var(--text-dim);
  font: 500 0.56rem/1 var(--mono);
}

/* Styles `.speed-control`. This component rule controls layout, sizing and spacing, color and visual emphasis, typography for the matching interface element. */
.speed-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font: 600 0.6rem/1 var(--mono);
  letter-spacing: 0.08em;
}

/* Styles `.speed-control select`. This component rule controls sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.speed-control select {
  min-height: 34px;
  padding: 0 24px 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: var(--bg-raised);
  font: 500 0.66rem/1 var(--mono);
}

/* Styles `.clear-output`. This component rule controls sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.clear-output {
  padding: 5px 8px;
  border: 0;
  color: var(--text-dim);
  background: none;
  font: 500 0.62rem/1 var(--mono);
  cursor: pointer;
}

/* Defines hover feedback for `.clear-output:hover`, using color and visual emphasis to confirm that the element is interactive. */
.clear-output:hover {
  color: var(--red);
}

/* Styles `.console`. This component rule controls sizing and spacing, color and visual emphasis, typography, overflow behavior for the matching interface element. */
.console {
  min-height: 105px;
  max-height: 230px;
  margin: 0;
  overflow: auto;
  padding: 18px;
  color: var(--mint);
  background: var(--panel-solid);
  font: 500 0.76rem/1.65 var(--mono);
  white-space: pre-wrap;
}

/* Styles `.console-muted`. This component rule controls color and visual emphasis, typography for the matching interface element. */
.console-muted {
  color: var(--text-dim);
}

/* Styles `.console-error`. This component rule controls color and visual emphasis for the matching interface element. */
.console-error {
  color: var(--red);
}

/* Data Structures and Algorithms foundation */

/*
  The DSA workspace carries more simultaneous teaching controls than the Python
  workspace. A wider page boundary gives the editor and visualization panel
  useful laptop space without changing either landing-page composition.
*/
.dsa-page .site-header,
.dsa-page main,
.dsa-page .site-footer {
  width: min(1680px, calc(100% - 32px));
}

/* Gives workspace introductions a readable width without stretching body copy across the page. */
.workspace-heading-copy,
.dsa-heading-copy {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Separates the DSA editor and learning shell. */
.dsa-workspace-grid {
  display: grid;
  grid-template-columns: minmax(560px, 0.92fr) minmax(700px, 1.08fr);
  gap: 14px;
  margin-top: 24px;
}

/*
  The Python workspace assigns named grid areas to these shared panel classes.
  The separate DSA grid owns a simpler document order, so it must explicitly
  clear those inherited placements before sizing its two columns.
*/
.dsa-workspace-grid > .editor-panel,
.dsa-workspace-grid > .story-panel {
  grid-area: auto;
}

/*
  Both primary DSA panels use one explicit desktop height. A minimum alone would
  allow a long table or variable history to enlarge the complete grid row, so
  the learning stage would push playback and output farther down the page.
*/
.dsa-workspace-grid > .editor-panel,
.dsa-learning-panel {
  height: 690px;
  min-height: 690px;
}

/* The editor receives a generous laptop-height document without escaping its panel. */
.dsa-workspace-grid .editor-shell {
  height: 598px;
}

/* A visible selected question shares the fixed panel height with the source. */
.dsa-workspace-grid > .editor-panel.has-selected-question .editor-shell {
  height: 510px;
}

/* The DSA learning panel is a fixed grid whose center absorbs all remaining space. */
.dsa-learning-panel {
  display: grid;
  min-width: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

/* Desktop DSA tabs remain one readable horizontal row inside the wider learning panel. */
.dsa-view-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
}

/* The fixed tab-header height prevents view changes from moving the stage vertically. */
.dsa-learning-panel .tabs-header {
  height: 51px;
  min-height: 51px;
  padding-left: 6px;
}

/* Slightly tighter DSA tab spacing keeps all six Data labels readable on one row. */
.dsa-view-tabs .panel-tab {
  padding: 0 7px;
  font-size: 0.62rem;
}

/* The selected underline follows the tighter DSA label spacing. */
.dsa-view-tabs .panel-tab::after {
  right: 8px;
  left: 8px;
}

/*
  The stage owns vertical mouse, trackpad, touch, and keyboard scrolling. Its
  parent has a fixed height, so long views scroll here instead of expanding the
  complete workspace. A stable gutter prevents the content width from shifting
  when a scrollbar first becomes necessary.
*/
.dsa-view-stage {
  display: grid;
  min-height: 0;
  place-items: center;
  padding: clamp(22px, 4vw, 48px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background:
    linear-gradient(var(--graph-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--graph-grid) 1px, transparent 1px);
  background-size: 31px 31px;
}

/* Keyboard focus identifies the exact bounded region that arrow and page keys will scroll. */
.dsa-view-stage:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -3px;
}

/* The preview card uses strong hierarchy so an unavailable result still teaches the view's purpose. */
.dsa-view-preview {
  width: min(560px, 100%);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line-bright);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

/* The evidence badge uses text and a boundary, not color alone, to identify unavailable conclusions. */
.evidence-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--panel-soft);
  font: 700 0.55rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Purple distinguishes unavailable evidence from success and error states. */
.evidence-badge.unavailable {
  border-color: color-mix(in srgb, var(--purple) 48%, var(--line));
  color: var(--purple);
}

/* A small area label anchors the selected view inside the four-part navigation model. */
.dsa-view-area {
  display: block;
  margin-top: 22px;
  color: var(--text-dim);
  font: 700 0.58rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The selected view name remains prominent without competing with the workspace page title. */
.dsa-view-preview h2 {
  margin: 10px 0 12px;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

/* Purpose text explains the future learner question in comfortable prose. */
.dsa-view-preview > p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.96rem;
  line-height: 1.7;
}

/* The boundary callout prevents a polished shell from looking like a working result panel. */
.dsa-boundary-note {
  margin-top: 26px;
  padding: 16px;
  border-left: 3px solid var(--purple);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--purple) 7%, var(--panel-soft));
}

/* The boundary heading names the missing evidence before its explanation. */
.dsa-boundary-note strong {
  color: var(--text);
  font-size: 0.82rem;
}

/* Recovery copy stays quieter than the selected view purpose. */
.dsa-boundary-note p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* DSA runtime surfaces shared by every implemented curriculum chunk */

/* Observed and curriculum badges use separate text labels and distinct boundaries. */
.evidence-badge.observed {
  border-color: color-mix(in srgb, var(--mint) 55%, var(--line));
  color: var(--mint);
  background: var(--mint-soft);
}

/* Reviewed metadata uses purple so it cannot be mistaken for a measured runtime fact. */
.evidence-badge.curriculum {
  border-color: color-mix(in srgb, var(--purple) 52%, var(--line));
  color: var(--purple);
  background: color-mix(in srgb, var(--purple) 7%, var(--panel-soft));
}

/* A shortened badge warns that complete evidence exists but only part is displayed. */
.evidence-badge.shortened {
  border-color: color-mix(in srgb, var(--amber) 58%, var(--line));
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 7%, var(--panel-soft));
}

/* Runtime views fill the stable stage and scroll internally instead of resizing the workspace. */
.dsa-runtime-view {
  width: 100%;
  min-height: 100%;
  align-self: start;
  padding: clamp(18px, 3vw, 32px);
  color: var(--text);
  background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
}

/*
  Chunk 1 Trace views use a complete teaching workspace rather than the older
  generic article treatment. The shell fills the bounded stage, while each
  view body supplies a visual grammar that matches its programming concept.
*/
.dsa-trace-view {
  padding: 0;
  background: var(--panel-solid);
}

/*
  The hero answers a beginner's first questions before presenting detail:
  which view is open, what it teaches, which program ran, and which source line
  the visible evidence describes.
*/
.dsa-trace-hero {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--mint) 14%, transparent), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--purple) 7%, var(--panel-solid)), var(--panel-solid) 64%);
}

/* View identity stays readable even when the context facts wrap below it. */
.dsa-trace-identity {
  min-width: 0;
}

/* A small technical row separates evidence status from the plain-language title. */
.dsa-trace-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--text-dim);
  font: 700 0.56rem/1 var(--mono);
  letter-spacing: 0.09em;
}

/* Trace titles establish a stronger hierarchy than the old generic card heading. */
.dsa-trace-identity h2 {
  margin: 12px 0 7px;
  color: var(--text);
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
  letter-spacing: -0.025em;
}

/* The view question defines unfamiliar concepts through ordinary language. */
.dsa-trace-identity p {
  max-width: 720px;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Context facts use responsive cells so program names never force horizontal overflow. */
.dsa-trace-context {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(100px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}

/* Each context fact has a visible label and one bounded learner-facing value. */
.dsa-trace-context-fact {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--bg-raised) 97%, transparent);
}

.dsa-trace-context-fact span {
  color: var(--text-dim);
  font: 700 0.52rem/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dsa-trace-context-fact strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font: 650 0.68rem/1.35 var(--mono);
}

/* Executed source is visually attached to context without resembling an editable field. */
.dsa-trace-source {
  display: block;
  padding: 13px 15px;
  overflow-wrap: anywhere;
  border: 1px solid color-mix(in srgb, var(--mint) 36%, var(--line));
  border-radius: 9px;
  color: var(--text);
  background:
    linear-gradient(90deg, var(--mint-soft), transparent 75%),
    var(--code-bg);
  font: 650 0.76rem/1.55 var(--mono);
  white-space: pre-wrap;
}

/* Every purpose-specific Trace visual receives consistent breathing room. */
.dsa-trace-body {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 30px);
}

/*
  The designed empty state gives unused panel space a learning purpose. A new
  programmer sees what the view will answer and exactly how to produce evidence.
*/
.dsa-trace-empty-state {
  display: grid;
  width: min(620px, 100%);
  min-height: 330px;
  place-self: center;
  align-content: center;
  gap: 14px;
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--line-bright);
  border-radius: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--purple) 7%, transparent), transparent 50%),
    var(--bg-raised);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.12);
}

/* The technical glyph or number orients the eye without replacing real text. */
.dsa-trace-empty-glyph {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--purple) 50%, var(--line));
  border-radius: 16px;
  color: var(--purple);
  background: color-mix(in srgb, var(--purple) 8%, var(--panel-soft));
  font: 800 1.1rem/1 var(--mono);
}

.dsa-trace-empty-state h3 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 1.2rem;
}

/* Numbered actions turn an unavailable state into a short beginner workflow. */
.dsa-trace-next-steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  counter-reset: trace-empty-step;
  list-style: none;
}

.dsa-trace-next-steps li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.45;
  counter-increment: trace-empty-step;
}

.dsa-trace-next-steps li::before {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  color: var(--mint);
  background: var(--mint-soft);
  content: counter(trace-empty-step);
  font: 700 0.58rem/1 var(--mono);
}

/* Shared section headings pair a quiet purpose label with the current fact. */
.dsa-trace-section-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.dsa-trace-section-heading > span {
  color: var(--text-dim);
  font: 700 0.55rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.dsa-trace-section-heading > strong {
  color: var(--text);
  font-size: 0.78rem;
}

/* Quiet notes explain an absence without making it look like an application error. */
.dsa-trace-quiet-note {
  margin: 0;
  color: var(--text-dim) !important;
  font-size: 0.76rem;
  line-height: 1.55;
}

/* Boundary notes make uncertainty explicit without dominating observed evidence. */
.dsa-trace-boundary {
  margin: 12px 0 0;
  padding: 11px 13px;
  border-left: 3px solid var(--purple);
  color: var(--text-soft) !important;
  background: color-mix(in srgb, var(--purple) 6%, var(--panel-soft));
  font-size: 0.72rem;
  line-height: 1.55;
}

/* Algorithm Story uses two complementary columns: recorded sequence and current detail. */
.dsa-story-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(320px, 1.22fr);
  gap: 16px;
  align-items: stretch;
}

/* The ordered timeline retains semantic list order for nonvisual reading. */
.dsa-story-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dsa-story-entry {
  position: relative;
  padding-bottom: 9px;
}

/* A vertical rail makes chronology visible without animation. */
.dsa-story-entry:not(:last-child)::after {
  position: absolute;
  top: 38px;
  bottom: 0;
  left: 18px;
  width: 1px;
  background: var(--line-bright);
  content: "";
}

.dsa-story-entry button {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.dsa-story-entry button:hover {
  border-color: var(--line-bright);
  background: var(--panel-soft);
}

.dsa-story-entry button:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

/* The selected story entry combines text, shape, and accent color. */
.dsa-story-entry.current button {
  border-color: color-mix(in srgb, var(--mint) 48%, var(--line));
  background: var(--mint-soft);
}

.dsa-story-marker {
  display: grid;
  width: 38px;
  height: 38px;
  z-index: 1;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  color: var(--text-dim);
  background: var(--bg-raised);
  font: 700 0.58rem/1 var(--mono);
}

.dsa-story-entry.current .dsa-story-marker {
  border-color: var(--mint);
  color: var(--bg-raised);
  background: var(--mint);
}

.dsa-story-entry-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.dsa-story-entry-copy strong {
  color: var(--text);
  font: 700 0.64rem/1.2 var(--mono);
}

.dsa-story-entry-copy code {
  overflow-wrap: anywhere;
  color: var(--text-soft);
  font: 600 0.67rem/1.45 var(--mono);
}

.dsa-story-entry-copy > span {
  color: var(--text-dim);
  font: 500 0.55rem/1.3 var(--mono);
}

/* The selected observation receives a distinct instrument-like surface. */
.dsa-story-observation {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--mint) 40%, var(--line));
  border-radius: 12px;
  background:
    linear-gradient(145deg, var(--mint-soft), transparent 50%),
    var(--bg-raised);
}

.dsa-story-observation > p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.6;
}

.dsa-story-change-list {
  display: grid;
  gap: 8px;
}

.dsa-story-change {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(80px, 0.45fr) minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.dsa-story-change > span {
  color: var(--text-dim);
  font: 700 0.5rem/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dsa-story-change > strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.72rem;
}

.dsa-story-change > code {
  overflow-wrap: anywhere;
  color: var(--mint);
  font: 600 0.64rem/1.4 var(--mono);
}

/* Reviewed phases form a separate full-program map below observed step evidence. */
.dsa-story-curriculum,
.dsa-call-curriculum {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--purple) 38%, var(--line));
  border-radius: 12px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--purple) 7%, transparent), transparent 55%),
    var(--bg-raised);
}

.dsa-story-curriculum > p,
.dsa-call-curriculum > p {
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}

.dsa-story-phase-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 9px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.dsa-story-phase-map li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.dsa-story-phase-map span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 7px;
  color: var(--purple);
  background: color-mix(in srgb, var(--purple) 10%, transparent);
  font: 700 0.53rem/1 var(--mono);
}

.dsa-story-phase-map p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.7rem;
  line-height: 1.45;
}

.dsa-trace-boundary-card {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--purple);
  border-radius: 10px;
  background: var(--bg-raised);
}

.dsa-trace-boundary-card strong,
.dsa-trace-boundary-card p {
  margin: 0;
}

.dsa-trace-boundary-card p {
  color: var(--text-soft);
  font-size: 0.75rem;
  line-height: 1.55;
}

/* Before and After begins with counts so the learner knows where to focus. */
.dsa-state-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.dsa-state-metric {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-raised);
}

.dsa-state-metric strong {
  color: var(--text);
  font: 750 1.15rem/1 var(--mono);
}

.dsa-state-metric span {
  color: var(--text-dim);
  font: 700 0.52rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dsa-state-metric.created,
.dsa-change-card.created {
  border-left: 3px solid var(--cyan);
}

.dsa-state-metric.changed,
.dsa-change-card.changed {
  border-left: 3px solid var(--mint);
}

.dsa-state-metric.removed,
.dsa-change-card.removed {
  border-left: 3px solid var(--red);
}

.dsa-state-metric.unchanged,
.dsa-change-card.unchanged {
  border-left: 3px solid var(--text-dim);
}

.dsa-trace-inline-empty {
  display: grid;
  gap: 7px;
  padding: 22px;
  border: 1px dashed var(--line-bright);
  border-radius: 12px;
  background: var(--panel-soft);
}

.dsa-trace-inline-empty p {
  margin: 0;
  color: var(--text-soft);
}

/* Recorded type is supporting context below the main state transition. */
.dsa-change-type {
  color: var(--text-dim);
  font: 600 0.56rem/1.35 var(--mono);
}

/* Decisions use an explicit condition to result to destination path. */
.dsa-decision-route {
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) auto minmax(120px, 0.65fr) auto minmax(180px, 1fr);
  gap: 11px;
  align-items: stretch;
}

.dsa-decision-node {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 9px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-raised);
}

.dsa-decision-node > span {
  color: var(--text-dim);
  font: 700 0.53rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.dsa-decision-node code {
  overflow-wrap: anywhere;
  color: var(--text);
  font: 650 0.72rem/1.5 var(--mono);
}

.dsa-decision-node.result {
  justify-items: center;
  text-align: center;
}

.dsa-decision-node.result strong {
  font: 800 1rem/1 var(--mono);
}

.dsa-decision-node.result.true {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.dsa-decision-node.result.true strong {
  color: var(--mint);
}

.dsa-decision-node.result.false {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, var(--panel-soft));
}

.dsa-decision-node.result.false strong {
  color: var(--red);
}

.dsa-decision-node.result.unknown {
  border-color: var(--amber);
}

.dsa-decision-node.destination strong {
  color: var(--mint);
  font-size: 0.78rem;
}

.dsa-decision-connector {
  align-self: center;
  color: var(--mint);
  font: 800 1rem/1 var(--mono);
  transform: rotate(-90deg);
}

.dsa-decision-evidence {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-raised);
}

.dsa-decision-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.dsa-decision-values > div {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 10px;
  border-radius: 7px;
  background: var(--panel-soft);
}

.dsa-decision-values span {
  color: var(--text-dim);
  font: 700 0.54rem/1 var(--mono);
}

.dsa-decision-values code {
  overflow-wrap: anywhere;
  color: var(--mint);
  font: 650 0.67rem/1.4 var(--mono);
}

/* Call metrics make depth and the active frame understandable before the stack. */
.dsa-call-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.dsa-call-metrics > div {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raised);
}

.dsa-call-metrics strong {
  overflow-wrap: anywhere;
  color: var(--mint);
  font: 750 1rem/1.2 var(--mono);
}

.dsa-call-metrics span {
  color: var(--text-dim);
  font: 700 0.53rem/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* The semantic ordered list reads from global caller toward the active frame. */
.dsa-call-stack {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dsa-call-frame {
  position: relative;
  display: grid;
  gap: 11px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--text-dim);
  border-radius: 11px;
  background: var(--bg-raised);
}

.dsa-call-frame:not(:last-child)::after {
  position: absolute;
  bottom: -13px;
  left: 28px;
  width: 2px;
  height: 13px;
  background: var(--line-bright);
  content: "";
}

.dsa-call-frame.active {
  border-color: color-mix(in srgb, var(--mint) 55%, var(--line));
  border-left-color: var(--mint);
  background:
    linear-gradient(90deg, var(--mint-soft), transparent 58%),
    var(--bg-raised);
}

.dsa-call-frame-header {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
}

.dsa-call-frame-header > div {
  display: grid;
  gap: 5px;
}

.dsa-call-frame-header span {
  color: var(--text-dim);
  font: 700 0.52rem/1 var(--mono);
  letter-spacing: 0.07em;
}

.dsa-call-frame-header strong {
  color: var(--text);
  font-size: 0.88rem;
}

.dsa-call-frame-state {
  padding: 5px 7px;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
}

.dsa-call-frame.active .dsa-call-frame-state {
  border-color: var(--mint);
  color: var(--mint);
}

.dsa-call-frame-line {
  width: fit-content;
  color: var(--purple);
  font: 650 0.62rem/1 var(--mono);
}

.dsa-call-locals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
}

.dsa-call-locals > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 9px 10px;
  border-radius: 7px;
  background: var(--panel-soft);
}

.dsa-call-locals span {
  color: var(--text-dim);
  font: 700 0.52rem/1 var(--mono);
}

.dsa-call-locals code {
  overflow-wrap: anywhere;
  color: var(--mint);
  font: 650 0.65rem/1.4 var(--mono);
}

.dsa-return-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--mint);
  border-radius: 10px;
  background: var(--mint-soft);
}

.dsa-return-banner span {
  color: var(--text-dim);
  font: 700 0.54rem/1 var(--mono);
  letter-spacing: 0.07em;
}

.dsa-return-banner strong {
  overflow-wrap: anywhere;
  color: var(--mint);
  font: 750 0.8rem/1.4 var(--mono);
}

.dsa-call-curriculum {
  display: grid;
  gap: 9px;
}

/* Error Coach resembles a diagnostic surface while keeping guidance conservative. */
.dsa-error-diagnostic {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--red) 48%, var(--line));
  border-radius: 12px;
  background: var(--bg-raised);
}

.dsa-error-title {
  display: grid;
  gap: 8px;
  padding: 17px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--red) 8%, var(--panel-soft));
}

.dsa-error-title span,
.dsa-error-location > span,
.dsa-error-coaching-grid span {
  color: var(--text-dim);
  font: 700 0.54rem/1 var(--mono);
  letter-spacing: 0.07em;
}

.dsa-error-title strong {
  overflow-wrap: anywhere;
  color: var(--red);
  font: 750 0.86rem/1.5 var(--mono);
}

.dsa-error-location {
  display: grid;
  gap: 8px;
  padding: 17px;
}

.dsa-error-location strong {
  color: var(--text);
  font-size: 0.82rem;
}

.dsa-error-location code {
  padding: 11px 13px;
  overflow-wrap: anywhere;
  border-left: 3px solid var(--red);
  color: var(--text);
  background: var(--code-bg);
  font: 650 0.7rem/1.5 var(--mono);
  white-space: pre-wrap;
}

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

.dsa-error-coaching-grid > div {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-raised);
}

.dsa-error-coaching-grid p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.6;
}

.dsa-error-boundary {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--purple) 38%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--purple) 6%, var(--panel-soft));
}

.dsa-error-boundary strong,
.dsa-error-boundary p {
  margin: 0;
}

.dsa-error-boundary p {
  color: var(--text-soft);
  font-size: 0.76rem;
  line-height: 1.55;
}

/*
  Chunk 2 gives the six Data views a shared orientation system while preserving
  a different teaching grammar for values, watches, structures, references,
  mutations, and invariants.
*/
.dsa-data-view {
  padding: 0;
  background: var(--panel-solid);
}

/*
  The Data hero answers where the snapshot came from before showing values.
  Its quiet grid texture resembles a technical workspace without reducing text contrast.
*/
.dsa-data-hero {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(color-mix(in srgb, var(--line) 32%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 32%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 38%),
    var(--panel-solid);
  background-size: 28px 28px, 28px 28px, auto, auto;
}

/* Data identity remains the primary reading anchor above the context facts. */
.dsa-data-identity {
  min-width: 0;
}

/* Evidence and area identity use a compact technical line with real text. */
.dsa-data-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  color: var(--text-dim);
  font: 700 0.56rem/1 var(--mono);
  letter-spacing: 0.09em;
}

/* The view name has a stronger hierarchy than supporting context and values. */
.dsa-data-identity h2 {
  margin: 12px 0 7px;
  color: var(--text);
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
  letter-spacing: -0.025em;
}

/* Every Data view states its learner question in ordinary language. */
.dsa-data-identity p {
  max-width: 760px;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Context cells adapt to the number of relevant facts instead of forcing fixed columns. */
.dsa-data-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}

/* Each fact keeps its label and value together when the grid wraps. */
.dsa-data-context-fact {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--bg-raised) 97%, transparent);
}

/* Small uppercase labels identify context without competing with values. */
.dsa-data-context-fact span {
  color: var(--text-dim);
  font: 700 0.52rem/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Fact values wrap safely inside narrow context cells. */
.dsa-data-context-fact strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font: 650 0.68rem/1.35 var(--mono);
}

/* Executed source is attached to the snapshot context and remains visibly read only. */
.dsa-data-source {
  display: block;
  padding: 13px 15px;
  overflow-wrap: anywhere;
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--line));
  border-radius: 9px;
  color: var(--text);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 76%),
    var(--code-bg);
  font: 650 0.76rem/1.55 var(--mono);
  white-space: pre-wrap;
}

/* Purpose-specific Data visuals share stable spacing inside the bounded stage. */
.dsa-data-body {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 30px);
}

/* Empty Data views use the fixed panel height to teach how evidence becomes available. */
.dsa-data-empty-state {
  display: grid;
  width: min(620px, 100%);
  min-height: 330px;
  place-self: center;
  align-content: center;
  gap: 14px;
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--line-bright);
  border-radius: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 52%),
    var(--bg-raised);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.12);
}

/* The empty-state symbol is orientation only and never replaces its written reason. */
.dsa-data-empty-glyph {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cyan) 55%, var(--line));
  border-radius: 16px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 8%, var(--panel-soft));
  font: 800 1rem/1 var(--mono);
}

/* Empty-state reasons use a readable title scale. */
.dsa-data-empty-state h3 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 1.2rem;
}

/* Numbered actions turn missing evidence into an approachable beginner workflow. */
.dsa-data-next-steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  counter-reset: data-empty-step;
  list-style: none;
}

/* Each action reserves a stable number column and a wrapping instruction column. */
.dsa-data-next-steps li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.45;
  counter-increment: data-empty-step;
}

/* Generated numbers provide order without adding decorative HTML. */
.dsa-data-next-steps li::before {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 9%, var(--panel-soft));
  content: counter(data-empty-step);
  font: 700 0.58rem/1 var(--mono);
}

/* Shared section headings keep scope or fallback explanations beside their counts. */
.dsa-data-section-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* Heading copy can contain a technical label and one beginner explanation. */
.dsa-data-section-heading > div {
  display: grid;
  gap: 5px;
}

/* Technical section labels remain distinct from descriptive prose. */
.dsa-data-section-heading span {
  color: var(--text-dim);
  font: 700 0.56rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Supporting descriptions remain compact and readable. */
.dsa-data-section-heading p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.76rem;
  line-height: 1.5;
}

/* Counts use the project mono type without looking like primary headings. */
.dsa-data-section-heading > strong {
  color: var(--mint);
  font: 700 0.66rem/1 var(--mono);
}

/* Honest limits and inference boundaries share one recognizable treatment. */
.dsa-data-boundary {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--purple);
  color: var(--text-soft) !important;
  background: color-mix(in srgb, var(--purple) 6%, var(--panel-soft));
  font-size: 0.74rem;
  line-height: 1.55;
}

/* Inline absences look intentional without resembling runtime failures. */
.dsa-data-inline-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--line-bright);
  border-radius: 11px;
  color: var(--text-soft) !important;
  background: var(--panel-soft);
  text-align: center;
}

/* Variables begins with the one fact a learner usually seeks: how much state is visible. */
.dsa-data-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: baseline;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--mint) 36%, var(--line));
  border-radius: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mint) 9%, transparent), transparent 70%),
    var(--bg-raised);
}

/* The total visible state receives a concise heading. */
.dsa-data-overview strong {
  color: var(--mint);
  font-size: 1.1rem;
}

/* The changed-state explanation stays secondary. */
.dsa-data-overview p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
}

/* Every variable scope is a separate semantic section. */
.dsa-variable-scope {
  display: grid;
  gap: 14px;
}

/* Variable tiles use two columns on a typical laptop and wrap long values. */
.dsa-variable-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

/* One tile keeps name, current value, type, scope, and optional previous value together. */
.dsa-variable-tile {
  display: grid;
  min-width: 0;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-raised);
}

/* A changed variable uses a stronger border but retains its written state label. */
.dsa-variable-tile.changed,
.dsa-variable-tile.created {
  border-color: color-mix(in srgb, var(--mint) 56%, var(--line));
  box-shadow: inset 3px 0 0 var(--mint);
}

/* Name and change state share a stable header row. */
.dsa-variable-tile-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

/* Variable names remain the strongest item inside a tile. */
.dsa-variable-tile-heading strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.9rem;
}

/* Written change states make the border cue accessible without color. */
.dsa-variable-tile-heading span {
  color: var(--text-dim);
  font: 700 0.54rem/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Current values resemble read-only debugger data rather than editable source. */
.dsa-variable-current {
  display: block;
  padding: 12px;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--mint);
  background: var(--code-bg);
  font: 650 0.76rem/1.5 var(--mono);
  white-space: pre-wrap;
}

/* Type and scope labels occupy a quiet metadata row. */
.dsa-variable-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Metadata pills use complete text and never depend on color alone. */
.dsa-variable-meta span {
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font: 650 0.54rem/1 var(--mono);
}

/* The previous value appears only when it adds useful comparison evidence. */
.dsa-variable-previous {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* Previous labels establish the direction of comparison. */
.dsa-variable-previous span {
  color: var(--text-dim);
  font: 700 0.52rem/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Earlier values remain quieter than the current debugger value. */
.dsa-variable-previous code {
  overflow-wrap: anywhere;
  color: var(--text-soft);
  font: 600 0.68rem/1.45 var(--mono);
}

/* The Watches honesty note resembles an instrument briefing. */
.dsa-watch-explanation {
  display: grid;
  gap: 7px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--cyan) 6%, var(--bg-raised));
}

/* The suggestion boundary receives a concise title. */
.dsa-watch-explanation strong {
  color: var(--cyan);
  font-size: 0.82rem;
}

/* Watch explanation text remains supporting information. */
.dsa-watch-explanation p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.76rem;
  line-height: 1.55;
}

/* Watch tiles form one scan-friendly dashboard column. */
.dsa-watch-dashboard {
  display: grid;
  gap: 8px;
}

/* One watch row combines rank, name, value, and change state. */
.dsa-watch-tile {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raised);
}

/* Changed and created watches receive an instrument-like current-state edge. */
.dsa-watch-tile.changed,
.dsa-watch-tile.created {
  border-color: color-mix(in srgb, var(--mint) 50%, var(--line));
  background: color-mix(in srgb, var(--mint) 5%, var(--bg-raised));
}

/* Rank numbers help learners return to the same watch during playback. */
.dsa-watch-order {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-dim);
  font: 700 0.6rem/1 var(--mono);
}

/* Watch copy separates its name explanation from the live value. */
.dsa-watch-copy {
  display: grid;
  min-width: 0;
  gap: 7px;
}

/* The watch name and suggestion reason share one responsive row. */
.dsa-watch-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  align-items: baseline;
}

/* Watch names remain prominent but bounded. */
.dsa-watch-copy strong {
  overflow-wrap: anywhere;
  color: var(--text);
}

/* Suggestion reasons prevent a ranked name from looking manually selected. */
.dsa-watch-copy span {
  color: var(--text-dim);
  font: 600 0.52rem/1 var(--mono);
}

/* Current watch values wrap without widening the stage. */
.dsa-watch-copy code {
  overflow-wrap: anywhere;
  color: var(--mint);
  font: 650 0.72rem/1.45 var(--mono);
}

/* Written state badges remain legible in both themes. */
.dsa-watch-state {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font: 700 0.52rem/1 var(--mono);
  text-transform: uppercase;
}

/* Changed watches use the same mint cue as other observed updates. */
.dsa-watch-state.changed,
.dsa-watch-state.created {
  border-color: var(--mint);
  color: var(--mint);
}

/* Structure orientation introduces role, reading direction, and visible size. */
.dsa-structure-orientation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--purple) 35%, var(--line));
  border-radius: 12px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--purple) 7%, transparent), transparent 70%),
    var(--bg-raised);
}

/* Orientation copy follows label, role, and plain-language guide order. */
.dsa-structure-orientation > div:first-child {
  display: grid;
  gap: 7px;
}

/* Guide labels clearly distinguish reviewed and observed orientation. */
.dsa-structure-orientation span {
  color: var(--text-dim);
  font: 700 0.54rem/1 var(--mono);
  letter-spacing: 0.08em;
}

/* Reviewed role names are readable without hyphen decoding. */
.dsa-structure-orientation strong {
  color: var(--text);
  font-size: 0.95rem;
  text-transform: capitalize;
}

/* Structure reading guidance stays close to the representation it explains. */
.dsa-structure-orientation p {
  max-width: 760px;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* The shown-versus-recorded count prevents a bounded diagram from appearing complete. */
.dsa-structure-size {
  display: grid;
  min-width: 96px;
  place-items: center;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

/* The visible cell count is the focal metric. */
.dsa-structure-size strong {
  color: var(--mint);
  font: 800 1.35rem/1 var(--mono);
}

/* Count context defines what the metric means. */
.dsa-structure-size span {
  color: var(--text-dim);
  font: 650 0.52rem/1 var(--mono);
}

/* Reference honesty is presented before either visual representation. */
.dsa-reference-boundary {
  display: grid;
  gap: 7px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--purple) 38%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--purple) 6%, var(--bg-raised));
}

/* The conceptual-memory distinction is a primary teaching statement. */
.dsa-reference-boundary strong {
  color: var(--purple);
  font-size: 0.84rem;
}

/* Boundary prose defines identity tokens without unnecessary implementation detail. */
.dsa-reference-boundary p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.76rem;
  line-height: 1.55;
}

/* Interactive graph controls and canvas form one optional enhancement panel. */
.dsa-reference-interactive {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raised);
}

/* Reference controls keep status, Fit, and zoom in one readable row on laptops. */
.dsa-reference-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

/* Loading and fallback state are communicated with text rather than a spinner alone. */
.dsa-reference-status {
  margin: 0;
  color: var(--text-soft) !important;
  font: 600 0.62rem/1.4 var(--mono);
}

/* The zoom label keeps its slider and numerical value together. */
.dsa-reference-zoom {
  display: grid;
  grid-template-columns: auto minmax(90px, 150px) 44px;
  gap: 8px;
  align-items: center;
}

/* Zoom labels use the same technical vocabulary as graph controls elsewhere. */
.dsa-reference-zoom span,
.dsa-reference-zoom output {
  color: var(--text-dim);
  font: 650 0.56rem/1 var(--mono);
}

/* The output width remains stable as the percentage changes. */
.dsa-reference-zoom output {
  text-align: right;
}

/* The graph canvas remains bounded and pannable inside the learning stage. */
.dsa-reference-canvas {
  position: relative;
  height: 390px;
  min-height: 390px;
  background:
    linear-gradient(color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px),
    radial-gradient(circle at center, color-mix(in srgb, var(--mint) 8%, transparent), transparent 58%),
    var(--code-bg);
  background-size: 32px 32px, 32px 32px, auto, auto;
}

/* Loading and unavailable canvases state their condition inside the visual surface. */
.dsa-reference-canvas.loading::before,
.dsa-reference-canvas.unavailable::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--code-bg) 92%, transparent);
  content: attr(data-message);
  font: 650 0.7rem/1.5 var(--mono);
  text-align: center;
}

/* The semantic fallback is a first-class representation, not hidden error text. */
.dsa-reference-fallback {
  display: grid;
  gap: 14px;
}

/* Reference groups form one vertical reading path. */
.dsa-reference-map-list {
  display: grid;
  gap: 10px;
}

/* Each group keeps all aliases and their shared object in one bordered region. */
.dsa-reference-group {
  display: grid;
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-raised);
}

/* Shared aliases receive a stronger edge but retain the Shared reference text. */
.dsa-reference-group.shared {
  border-color: color-mix(in srgb, var(--mint) 52%, var(--line));
  box-shadow: inset 3px 0 0 var(--mint);
}

/* Object number and alias classification share the group header. */
.dsa-reference-group-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

/* Object numbers establish stable reading order. */
.dsa-reference-group-heading span {
  color: var(--text-dim);
  font: 700 0.54rem/1 var(--mono);
  letter-spacing: 0.08em;
}

/* Reference classification is visible without relying on border color. */
.dsa-reference-group-heading strong {
  color: var(--text);
  font-size: 0.78rem;
}

/* The fallback path directly connects names to their shared object. */
.dsa-reference-path {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) 44px minmax(180px, 1.2fr);
  gap: 12px;
  align-items: center;
}

/* Multiple alias names stack so each scope remains readable. */
.dsa-reference-names {
  display: grid;
  gap: 7px;
}

/* Each name pill states both its scope and identifier. */
.dsa-reference-names > span {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--cyan) 5%, var(--panel-soft));
}

/* Scope is supporting evidence above the reference name. */
.dsa-reference-names small {
  color: var(--text-dim);
  font: 600 0.5rem/1 var(--mono);
}

/* Reference names use the cyan name-node cue. */
.dsa-reference-names strong {
  overflow-wrap: anywhere;
  color: var(--cyan);
  font: 700 0.72rem/1.3 var(--mono);
}

/* The arrow expresses conceptual direction without animation. */
.dsa-reference-arrow {
  color: var(--mint);
  font: 800 1.3rem/1 var(--mono);
  text-align: center;
}

/* Object cards group recorded type and bounded display. */
.dsa-reference-object {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 12px 14px;
  border: 2px solid color-mix(in srgb, var(--mint) 58%, var(--line));
  border-radius: 10px;
  background: var(--code-bg);
}

/* Object type is a quiet category above its value. */
.dsa-reference-object span {
  color: var(--text-dim);
  font: 700 0.54rem/1 var(--mono);
  text-transform: uppercase;
}

/* Serialized object values wrap inside their conceptual node. */
.dsa-reference-object code {
  overflow-wrap: anywhere;
  color: var(--mint);
  font: 650 0.7rem/1.45 var(--mono);
  white-space: pre-wrap;
}

/* Mutation definitions appear before the step-specific evidence. */
.dsa-mutation-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Each definition uses a complete title and explanation. */
.dsa-mutation-legend > div {
  display: grid;
  gap: 7px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raised);
}

/* Mutation terminology receives a clear but compact heading. */
.dsa-mutation-legend strong {
  color: var(--text);
  font-size: 0.8rem;
}

/* Definition text stays readable without dominating the evidence below. */
.dsa-mutation-legend p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.74rem;
  line-height: 1.5;
}

/* A no-change result explains the selected-step boundary. */
.dsa-mutation-empty {
  display: grid;
  gap: 9px;
  padding: 20px;
  border: 1px dashed var(--line-bright);
  border-radius: 11px;
  background: var(--panel-soft);
}

/* No-change headings prevent empty space from looking broken. */
.dsa-mutation-empty strong {
  color: var(--text);
}

/* No-change explanations remain secondary. */
.dsa-mutation-empty p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.76rem;
  line-height: 1.55;
}

/* Multiple object changes form a vertical step-local timeline. */
.dsa-mutation-timeline {
  display: grid;
  gap: 13px;
}

/* One mutation card owns classification, values, operation, and aliases. */
.dsa-mutation-card {
  display: grid;
  gap: 15px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raised);
}

/* In-place mutation uses a mint edge and reassignment uses a purple edge. */
.dsa-mutation-card.mutated {
  border-left: 4px solid var(--mint);
}

.dsa-mutation-card.reassigned {
  border-left: 4px solid var(--purple);
}

/* Classification and written state share a responsive heading. */
.dsa-mutation-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

/* Technical mutation category sits above the affected name. */
.dsa-mutation-heading > div {
  display: grid;
  gap: 5px;
}

/* Category labels use the existing evidence typography. */
.dsa-mutation-heading span {
  color: var(--text-dim);
  font: 700 0.52rem/1 var(--mono);
  letter-spacing: 0.07em;
}

/* The affected name is the mutation card's primary identity. */
.dsa-mutation-heading strong {
  color: var(--text);
  font-size: 0.9rem;
}

/* The written result remains visible without its colored border. */
.dsa-mutation-kind {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-transform: uppercase;
}

/* Before, executed operation, and after form one connected horizontal journey. */
.dsa-mutation-journey {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.78fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

/* Values and the operation share consistent contained surfaces. */
.dsa-mutation-value,
.dsa-mutation-operation {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}

/* Result values receive a stronger observed-state boundary. */
.dsa-mutation-value.after {
  border-color: color-mix(in srgb, var(--mint) 48%, var(--line));
  background: color-mix(in srgb, var(--mint) 6%, var(--panel-soft));
}

/* The executed source occupies the center of the journey. */
.dsa-mutation-operation {
  border-color: color-mix(in srgb, var(--purple) 42%, var(--line));
  background: color-mix(in srgb, var(--purple) 6%, var(--code-bg));
}

/* Journey labels establish the before-to-after reading order. */
.dsa-mutation-value span,
.dsa-mutation-operation span {
  color: var(--text-dim);
  font: 700 0.52rem/1 var(--mono);
  letter-spacing: 0.07em;
}

/* Mutation values and source wrap without stretching the page. */
.dsa-mutation-value code,
.dsa-mutation-operation code {
  overflow-wrap: anywhere;
  color: var(--text);
  font: 650 0.68rem/1.45 var(--mono);
  white-space: pre-wrap;
}

/* Resulting values receive the established observed mint color. */
.dsa-mutation-value.after code {
  color: var(--mint);
}

/* Alias evidence stays attached to the resulting object. */
.dsa-mutation-aliases {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* The alias question is stated directly. */
.dsa-mutation-aliases > span {
  color: var(--text-dim);
  font: 650 0.56rem/1 var(--mono);
}

/* Alias pills wrap naturally on long names. */
.dsa-mutation-aliases > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Every alias is visible as text and shape. */
.dsa-mutation-aliases > div span {
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--line));
  border-radius: 999px;
  color: var(--cyan);
  font: 700 0.58rem/1 var(--mono);
}

/* Invariant terminology is defined before the reviewed checklist. */
.dsa-invariant-explanation {
  display: grid;
  gap: 7px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--purple) 38%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--purple) 6%, var(--bg-raised));
}

/* The definition is written as a complete sentence for first-time learners. */
.dsa-invariant-explanation strong {
  color: var(--purple);
  font-size: 0.82rem;
}

/* The evidence limitation follows immediately after the definition. */
.dsa-invariant-explanation p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.76rem;
  line-height: 1.55;
}

/* A lesson without a separate invariant receives a designed curriculum state. */
.dsa-invariant-empty {
  display: grid;
  gap: 9px;
  padding: 18px;
  border: 1px dashed var(--line-bright);
  border-radius: 11px;
  background: var(--panel-soft);
}

/* Empty-state text keeps its natural reading hierarchy. */
.dsa-invariant-empty strong,
.dsa-invariant-empty p {
  margin: 0;
}

/* The invariant checklist uses semantic order and custom visual numbers. */
.dsa-invariant-checklist {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One invariant card joins the rule and its current evidence status. */
.dsa-invariant-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-raised);
}

/* The explicit unavailable edge prevents absence of proof from looking like success. */
.dsa-invariant-card.unavailable {
  border-left: 4px solid var(--text-dim);
}

/* Checklist numbers establish reading order without implying pass counts. */
.dsa-invariant-number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-dim);
  font: 700 0.64rem/1 var(--mono);
}

/* Rule copy follows label, statement, and evidence order. */
.dsa-invariant-copy {
  display: grid;
  min-width: 0;
  gap: 9px;
}

/* Reviewed-rule labels identify curriculum context. */
.dsa-invariant-copy > span {
  color: var(--purple);
  font: 700 0.52rem/1 var(--mono);
  letter-spacing: 0.08em;
}

/* Invariant statements wrap as ordinary readable claims. */
.dsa-invariant-copy > strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* Evidence stays visually subordinate to the reviewed rule. */
.dsa-invariant-evidence {
  display: grid;
  gap: 7px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

/* Evidence notes distinguish observed line context from the unavailable verdict. */
.dsa-invariant-evidence p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.72rem;
  line-height: 1.5;
}

/* View headings keep a compact relationship with their evidence badge. */
.dsa-runtime-view > h2,
.dsa-evidence-card h2 {
  margin: 14px 0 10px;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
}

/* Normal learning prose stays readable at both desktop and narrow widths. */
.dsa-runtime-view p,
.dsa-evidence-card p {
  color: var(--text-soft);
  line-height: 1.6;
}

/* Evidence cards visually separate recorded facts, metadata, and unavailable conclusions. */
.dsa-evidence-card {
  margin-bottom: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raised);
}

/* Observed cards use the project mint cue while retaining a full text badge. */
.dsa-evidence-card.observed-card {
  border-left: 3px solid var(--mint);
}

/* Curriculum cards use a separate purple edge so source and runtime evidence do not blur together. */
.dsa-evidence-card.curriculum-card {
  border-left: 3px solid var(--purple);
}

/* Unavailable evidence remains present and explanatory rather than rendering a blank view. */
.dsa-evidence-card.unavailable-card {
  border-left: 3px solid var(--text-dim);
}

/* Line labels and source snippets resemble a readable debugger without reducing font clarity. */
.dsa-line-label {
  display: block;
  margin: 14px 0 8px;
  color: var(--text-dim);
  font: 700 0.6rem/1 var(--mono);
  letter-spacing: 0.08em;
}

/* Executed source preserves spacing and wraps long beginner expressions. */
.dsa-source-line {
  display: block;
  padding: 12px 14px;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--code-bg);
  font: 600 0.76rem/1.55 var(--mono);
  white-space: pre-wrap;
}

/* A named change summary highlights evidence without claiming a full algorithm interpretation. */
.dsa-change-summary {
  margin-bottom: 0;
  color: var(--mint) !important;
  font-family: var(--mono);
  font-size: 0.72rem;
}

/* Honesty notes consistently identify unavailable inference or evidence boundaries. */
.dsa-honesty-note {
  padding: 12px 14px;
  border-left: 3px solid var(--purple);
  background: color-mix(in srgb, var(--purple) 6%, var(--panel-soft));
  font-size: 0.76rem;
}

/* Reviewed phases form a normal readable sequence rather than a decorative diagram. */
.dsa-phase-list,
.dsa-invariant-list,
.dsa-edge-list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding-left: 24px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Variable cards use two columns while retaining natural wrapping for long values. */
.dsa-variable-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

/*
  Before and After is intentionally one column at every width. Each variable's
  earlier and later values remain in one uninterrupted top-to-bottom reading path.
*/
.dsa-change-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
}

/* State cards give names, types, and values their own stable hierarchy. */
.dsa-change-card,
.dsa-variable-card {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-raised);
}

/* The executed-step context sits above comparisons as a compact debugger cue. */
.dsa-step-context {
  display: grid;
  gap: 8px;
  margin: 15px 0 18px;
}

/* Step and line text remain visible independently from the source-code styling. */
.dsa-step-context-label {
  color: var(--text-dim);
  font: 700 0.6rem/1 var(--mono);
  letter-spacing: 0.07em;
}

/* The comparison heading introduces the list without competing with the view title. */
.dsa-change-heading {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.84rem;
}

/* A change card uses one full-width vertical sequence: name, Before, arrow, After. */
.dsa-change-card {
  gap: 10px;
  padding: 16px;
}

/* Name and change kind remain together at the start of each comparison. */
.dsa-change-card-header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

/* Before and After receive explicit labels, boundaries, and separate value rows. */
.dsa-change-state {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

/* State labels use text so color is never the only comparison cue. */
.dsa-change-state > span {
  color: var(--text-dim);
  font: 700 0.56rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The earlier value stays visually quieter than the resulting state below it. */
.dsa-change-state.before code {
  color: var(--text-soft);
}

/* The resulting value receives the existing mint observed-evidence treatment. */
.dsa-change-state.after {
  border-color: color-mix(in srgb, var(--mint) 45%, var(--line));
  background: var(--mint-soft);
}

/* The centered arrow reinforces the vertical reading direction without adding motion. */
.dsa-change-direction {
  color: var(--mint);
  font: 800 1rem/1 var(--mono);
  text-align: center;
}

/* Recorded values wrap instead of pushing the page wider. */
.dsa-change-card code,
.dsa-variable-card code {
  overflow-wrap: anywhere;
  color: var(--mint);
  font: 600 0.7rem/1.45 var(--mono);
}

/* Change type uses visible text instead of depending on green or red alone. */
.dsa-change-kind {
  color: var(--text-dim);
  font: 700 0.56rem/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Condition outcomes use a full bordered label and readable wording. */
.dsa-condition-result {
  width: fit-content;
  margin-top: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 700 0.65rem/1 var(--mono);
}

/* True and false states retain explicit text while adding familiar cues. */
.dsa-condition-result.true {
  border-color: var(--mint);
  color: var(--mint);
}

.dsa-condition-result.false {
  border-color: var(--red);
  color: var(--red);
}

.dsa-condition-result.unknown {
  border-color: var(--amber);
  color: var(--amber);
}

/* Stack, watch, reference, and mutation lists share a compact card language. */
.dsa-stack-list,
.dsa-watch-list,
.dsa-reference-list,
.dsa-mutation-list,
.dsa-comparison-run-list,
.dsa-input-log {
  display: grid;
  gap: 9px;
  margin-top: 15px;
}

/* Each list row remains readable when names and values wrap. */
.dsa-stack-frame,
.dsa-watch-row,
.dsa-reference-row,
.dsa-mutation-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(100px, 0.5fr) minmax(0, 1fr);
  gap: 7px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raised);
}

/* A row's code value spans the available width when present. */
.dsa-stack-frame code,
.dsa-reference-row code,
.dsa-mutation-row code {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
  color: var(--mint);
}

/* Structure cells wrap naturally and never create a horizontal page scrollbar. */
.dsa-structure-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 8px;
  margin-top: 16px;
}

/* Each conceptual cell visibly separates an index from its bounded value. */
.dsa-structure-cell {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raised);
}

.dsa-structure-cell span {
  color: var(--text-dim);
  font: 700 0.55rem/1 var(--mono);
}

.dsa-structure-cell code {
  overflow-wrap: anywhere;
  color: var(--mint);
  font: 600 0.68rem/1.4 var(--mono);
}

/* Stack cells form a vertical column so TOP and BASE match the taught orientation. */
.dsa-structure-cells.role-stack {
  grid-template-columns: minmax(150px, 320px);
  justify-content: center;
}

/* Queue and deque cells use one scrollable conceptual lane inside the bounded view. */
.dsa-structure-cells.role-queue,
.dsa-structure-cells.role-deque {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* Linked representations draw directional connectors without animating layout. */
.dsa-structure-cells.role-singly-linked-list .dsa-structure-cell,
.dsa-structure-cells.role-doubly-linked-list .dsa-structure-cell,
.dsa-structure-cells.role-circular-linked-list .dsa-structure-cell {
  position: relative;
  border-color: color-mix(in srgb, var(--mint) 55%, var(--line));
}

/* Shared connector placement is conceptual only and never claims a physical RAM address. */
.dsa-structure-cells.role-singly-linked-list .dsa-structure-cell:not(:last-child)::after,
.dsa-structure-cells.role-doubly-linked-list .dsa-structure-cell:not(:last-child)::after,
.dsa-structure-cells.role-circular-linked-list .dsa-structure-cell::after {
  content: "→";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -9px;
  color: var(--purple);
  font: 800 0.8rem/1 var(--mono);
  transform: translateY(-50%);
}

/* A two-headed symbol distinguishes reviewed previous and next relationships. */
.dsa-structure-cells.role-doubly-linked-list .dsa-structure-cell:not(:last-child)::after {
  content: "↔";
}

/* The final circular cell visibly returns toward the head instead of appearing terminated. */
.dsa-structure-cells.role-circular-linked-list .dsa-structure-cell:last-child::after {
  content: "↺";
}

/* Hash entries resemble bounded buckets while retaining their observed key and value text. */
.dsa-structure-cells.role-hash-table .dsa-structure-cell {
  border-left: 4px solid var(--purple);
}

/* Set membership uses a rounded boundary to distinguish unordered members from indexed cells. */
.dsa-structure-cells.role-set .dsa-structure-cell {
  border-radius: 999px;
  text-align: center;
}

/*
 * Tree-family records use a wider root-oriented grid. Serialized cells remain
 * conceptual fields rather than physical nodes or memory locations.
 */
.dsa-structure-cells.role-tree,
.dsa-structure-cells.role-binary-tree,
.dsa-structure-cells.role-binary-search-tree {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.dsa-structure-cells.role-tree .dsa-structure-cell:first-child,
.dsa-structure-cells.role-binary-tree .dsa-structure-cell:first-child,
.dsa-structure-cells.role-binary-search-tree .dsa-structure-cell:first-child {
  border-color: var(--mint);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--mint) 65%, transparent);
}

/* Heap and priority-queue cells keep the root visually prominent. */
.dsa-structure-cells.role-heap .dsa-structure-cell:first-child,
.dsa-structure-cells.role-priority-queue .dsa-structure-cell:first-child {
  border: 2px solid var(--mint);
  background: color-mix(in srgb, var(--mint) 9%, var(--bg-raised));
}

/* Trie entries resemble character edges and retain readable wrapped values. */
.dsa-structure-cells.role-trie .dsa-structure-cell {
  border-left: 4px solid var(--purple);
  border-radius: 4px 12px 12px 4px;
}

/* Union-Find cells emphasize conceptual parent links without implying RAM addresses. */
.dsa-structure-cells.role-union-find .dsa-structure-cell {
  border-left: 4px solid var(--mint);
  background: color-mix(in srgb, var(--mint) 7%, var(--bg-raised));
}

/*
 * Graph records use wider adjacency cards because a vertex can expose several
 * neighbors or weighted edges in one bounded serialized value.
 */
.dsa-structure-cells.role-graph {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.dsa-structure-cells.role-graph .dsa-structure-cell {
  border-top: 3px solid color-mix(in srgb, var(--purple) 65%, var(--line));
}

/*
  Chunk 3 gives the four Flow views a shared orientation system while keeping
  a different visual grammar for operations, transitions, debugger rows, and
  complexity evidence.
*/
.dsa-flow-view {
  padding: 0;
  background: var(--panel-solid);
}

/*
  The Flow hero uses a directional grid and mint glow to suggest ordered
  movement without animating or shifting the panel during playback.
*/
.dsa-flow-hero {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, transparent 0 47%, color-mix(in srgb, var(--line) 28%, transparent) 48% 49%, transparent 50%) 0 0 / 34px 34px,
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--mint) 10%, transparent), transparent 38%),
    var(--panel-solid);
}

/* The identity block anchors the learner before ordered evidence begins. */
.dsa-flow-identity {
  min-width: 0;
}

/* Evidence badges and the Flow label remain readable without relying on color. */
.dsa-flow-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  color: var(--text-dim);
  font: 700 0.56rem/1 var(--mono);
  letter-spacing: 0.09em;
}

/* Flow titles carry the same hierarchy as the redesigned Trace and Data areas. */
.dsa-flow-identity h2 {
  margin: 12px 0 7px;
  color: var(--text);
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
  letter-spacing: -0.025em;
}

/* The learner question explains why this view exists before showing details. */
.dsa-flow-identity p {
  max-width: 800px;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Context facts adapt to laptop and phone widths without page overflow. */
.dsa-flow-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}

/* Each context fact keeps its label and value together. */
.dsa-flow-context-fact {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--bg-raised) 97%, transparent);
}

/* Context labels identify the selected playback boundary. */
.dsa-flow-context-fact span {
  color: var(--text-dim);
  font: 700 0.52rem/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Context values wrap rather than widening the stage. */
.dsa-flow-context-fact strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font: 650 0.68rem/1.35 var(--mono);
}

/* The executed source line stays visibly read only beneath its boundary facts. */
.dsa-flow-source {
  display: block;
  padding: 13px 15px;
  overflow-wrap: anywhere;
  border: 1px solid color-mix(in srgb, var(--mint) 38%, var(--line));
  border-radius: 9px;
  color: var(--text);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mint) 7%, transparent), transparent 76%),
    var(--code-bg);
  font: 650 0.76rem/1.55 var(--mono);
  white-space: pre-wrap;
}

/* Purpose-specific Flow visuals use consistent spacing inside the bounded stage. */
.dsa-flow-body {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 30px);
}

/* Empty Flow states teach the short path from source to ordered evidence. */
.dsa-flow-empty-state {
  display: grid;
  width: min(620px, 100%);
  min-height: 330px;
  place-self: center;
  align-content: center;
  gap: 14px;
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--line-bright);
  border-radius: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--mint) 8%, transparent), transparent 52%),
    var(--bg-raised);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.12);
}

/* The visual mark supports orientation while the written reason remains primary. */
.dsa-flow-empty-glyph {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--mint) 55%, var(--line));
  border-radius: 16px;
  color: var(--mint);
  background: color-mix(in srgb, var(--mint) 8%, var(--panel-soft));
  font: 800 1rem/1 var(--mono);
}

/* Empty-state titles remain clear but smaller than the view title. */
.dsa-flow-empty-state h3 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 1.2rem;
}

/* Numbered actions turn missing evidence into a beginner workflow. */
.dsa-flow-next-steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  counter-reset: flow-empty-step;
  list-style: none;
}

/* Each action reserves a stable number column and a wrapping instruction. */
.dsa-flow-next-steps li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.45;
  counter-increment: flow-empty-step;
}

/* Generated numbers show order without decorative markup. */
.dsa-flow-next-steps li::before {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  color: var(--mint);
  background: color-mix(in srgb, var(--mint) 9%, var(--panel-soft));
  content: counter(flow-empty-step);
  font: 700 0.58rem/1 var(--mono);
}

/* Honest bounds and measurement caveats use one repeatable visual treatment. */
.dsa-flow-boundary {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--purple);
  color: var(--text-soft) !important;
  background: color-mix(in srgb, var(--purple) 6%, var(--panel-soft));
  font-size: 0.74rem;
  line-height: 1.55;
}

/* The selected operation summary answers the view's main question immediately. */
.dsa-flow-current-operation {
  display: grid;
  gap: 7px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--mint) 48%, var(--line));
  border-radius: 11px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mint) 9%, transparent), transparent 72%),
    var(--bg-raised);
}

/* A compact technical label separates the summary from the chronology. */
.dsa-flow-current-operation > span,
.dsa-flow-path-boundary > span {
  color: var(--text-dim);
  font: 700 0.54rem/1 var(--mono);
  letter-spacing: 0.08em;
}

/* Normalized event text is the selected operation's focal point. */
.dsa-flow-current-operation strong,
.dsa-flow-path-boundary strong {
  color: var(--mint);
  font-size: 0.94rem;
}

/* Event explanations remain supporting prose. */
.dsa-flow-current-operation p,
.dsa-flow-path-boundary p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* The operation list draws a stable vertical spine through recorded context. */
.dsa-flow-operation-spine {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Every operation owns one keyboard-focusable jump target. */
.dsa-flow-operation {
  position: relative;
  padding-left: 18px;
}

/* The connecting line never animates, preventing visual shaking during playback. */
.dsa-flow-operation::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 34px;
  width: 1px;
  background: var(--line-bright);
  content: "";
}

/* The first and last cards keep the spine within visible marker centers. */
.dsa-flow-operation:first-child::before {
  top: 34px;
}

.dsa-flow-operation:last-child::before {
  bottom: calc(100% - 34px);
}

/* Operation buttons retain readable two-column chronology. */
.dsa-flow-operation button {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 9px 12px 9px 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

/* Earlier and later context stays readable but quieter than the selected row. */
.dsa-flow-operation.earlier button,
.dsa-flow-operation.later button {
  opacity: 0.78;
}

/* The selected card uses text, border, marker shape, and color together. */
.dsa-flow-operation.current button {
  border: 1px solid color-mix(in srgb, var(--mint) 55%, var(--line));
  border-radius: 11px;
  background: var(--mint-soft);
  opacity: 1;
}

/* Numbered circular markers establish order along the spine. */
.dsa-flow-operation-marker {
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  color: var(--text-dim);
  background: var(--panel-solid);
  font: 700 0.58rem/1 var(--mono);
}

/* The selected marker becomes a rounded square so color is not the only cue. */
.dsa-flow-operation.current .dsa-flow-operation-marker {
  border: 2px solid var(--mint);
  border-radius: 9px;
  color: var(--mint);
}

/* Operation text keeps event, source, and position in a predictable order. */
.dsa-flow-operation-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.dsa-flow-operation-copy strong {
  color: var(--text);
  font-size: 0.78rem;
  text-transform: capitalize;
}

.dsa-flow-operation-copy code {
  overflow-wrap: anywhere;
  color: var(--mint);
  font: 650 0.68rem/1.45 var(--mono);
}

.dsa-flow-operation-copy > span {
  color: var(--text-dim);
  font: 600 0.54rem/1.35 var(--mono);
}

/* Algorithm Path begins with the exact selected line-to-line boundary. */
.dsa-flow-path-boundary {
  display: grid;
  gap: 7px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--cyan) 6%, var(--bg-raised));
}

/* The optional graph is enclosed as one replaceable enhancement. */
.dsa-flow-path-graph {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raised);
}

/* Graph status and controls remain visible above the bounded canvas. */
.dsa-flow-path-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

/* Status text explains loading, ready, playback waiting, or fallback state. */
.dsa-flow-path-status {
  margin: 0;
  color: var(--text-soft);
  font: 600 0.58rem/1.45 var(--mono);
}

/* Fit and zoom form one compact, keyboard-usable control group. */
.dsa-flow-path-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.dsa-flow-path-controls button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line-bright);
  border-radius: 7px;
  color: var(--text);
  background: var(--bg-raised);
  font: 700 0.58rem/1 var(--mono);
}

.dsa-flow-path-controls label {
  display: grid;
  grid-template-columns: auto minmax(90px, 140px) 42px;
  gap: 8px;
  align-items: center;
  color: var(--text-dim);
  font: 650 0.54rem/1 var(--mono);
}

.dsa-flow-path-controls input {
  min-width: 0;
}

.dsa-flow-path-controls output {
  color: var(--mint);
  text-align: right;
}

/* The canvas height remains fixed so graph loading never moves playback. */
.dsa-flow-path-canvas {
  position: relative;
  width: 100%;
  height: 390px;
  min-height: 390px;
  background:
    linear-gradient(color-mix(in srgb, var(--line) 38%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 38%, transparent) 1px, transparent 1px),
    var(--panel-solid);
  background-size: 32px 32px;
}

/* Loading and failure states retain an explicit message instead of a blank box. */
.dsa-flow-path-canvas.loading::before,
.dsa-flow-path-canvas.unavailable::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--panel-solid) 90%, transparent);
  content: attr(data-message);
  font: 650 0.64rem/1.5 var(--mono);
  text-align: center;
}

/* The semantic transition list is always present, including graph failure. */
.dsa-flow-transition-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each transition row keeps the absolute step number and source together. */
.dsa-flow-transition-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-raised);
}

/* The selected transition uses redundant current-step treatments. */
.dsa-flow-transition-list li.current {
  border: 2px solid var(--mint);
  background: var(--mint-soft);
}

.dsa-flow-transition-step {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-dim);
  font: 700 0.58rem/1 var(--mono);
}

.dsa-flow-transition-list li.current .dsa-flow-transition-step {
  border-radius: 8px;
  color: var(--mint);
  border-color: var(--mint);
}

.dsa-flow-transition-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.dsa-flow-transition-copy strong {
  color: var(--text);
  font-size: 0.76rem;
}

.dsa-flow-transition-copy code {
  overflow-wrap: anywhere;
  color: var(--text-soft);
  font: 600 0.66rem/1.45 var(--mono);
}

/* Line-frequency chips are clearly scoped to the selected playback prefix. */
.dsa-flow-line-frequency {
  display: grid;
  gap: 2px;
}

.dsa-flow-line-frequency h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.86rem;
}

/* The Step Table introduction teaches how playback controls the highlighted row. */
.dsa-flow-table-intro {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--mint) 38%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--mint) 5%, var(--bg-raised));
}

.dsa-flow-table-intro strong {
  color: var(--mint);
  font-size: 0.82rem;
}

.dsa-flow-table-intro p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.76rem;
  line-height: 1.5;
}

/* The debugger table keeps column context visible while its own rows scroll. */
.dsa-step-table thead {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--panel-soft);
  box-shadow: 0 1px 0 var(--line);
}

/* Source receives enough width to remain useful on a laptop. */
.dsa-step-table .dsa-step-source {
  min-width: 230px;
  overflow-wrap: anywhere;
  color: var(--text-soft);
  font: 600 0.64rem/1.45 var(--mono);
}

/* Complexity uses a stable two-column learning layout on wide screens. */
.dsa-flow-complexity .dsa-flow-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

/* One panel owns either measured evidence or reviewed context. */
.dsa-flow-complexity-panel {
  display: grid;
  min-width: 0;
  gap: 15px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raised);
}

/* Border colors separate evidence classes while written badges remain primary. */
.dsa-flow-complexity-panel.observed {
  border-top: 4px solid var(--mint);
}

.dsa-flow-complexity-panel.curriculum {
  border-top: 4px solid var(--purple);
}

.dsa-flow-complexity-panel.unavailable {
  grid-column: 2;
  border-top: 4px solid var(--line-bright);
}

.dsa-flow-complexity-panel h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.dsa-flow-complexity-panel > p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.76rem;
  line-height: 1.55;
}

/* Three measured values provide a quick, non-timing summary of the prefix. */
.dsa-flow-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dsa-flow-metric {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}

.dsa-flow-metric strong {
  color: var(--mint);
  font: 800 1.2rem/1 var(--mono);
}

.dsa-flow-metric span {
  color: var(--text-dim);
  font: 650 0.52rem/1.3 var(--mono);
}

/* Event bars compare counts only within this one recorded playback prefix. */
.dsa-flow-event-bars {
  display: grid;
  gap: 9px;
}

.dsa-flow-event-bar {
  display: grid;
  grid-template-columns: minmax(92px, 0.8fr) minmax(100px, 1.6fr) 34px;
  gap: 10px;
  align-items: center;
}

.dsa-flow-event-bar > span:first-child {
  overflow-wrap: anywhere;
  color: var(--text-soft);
  font: 650 0.56rem/1.25 var(--mono);
  text-transform: capitalize;
}

.dsa-flow-event-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.dsa-flow-event-fill {
  display: block;
  width: var(--event-share);
  height: 100%;
  border-radius: inherit;
  background: var(--mint);
}

.dsa-flow-event-bar strong {
  color: var(--mint);
  font: 750 0.62rem/1 var(--mono);
  text-align: right;
}

/* Reviewed time and space formulas remain visibly separate from measured bars. */
.dsa-flow-complexity-formulas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.dsa-flow-complexity-formula {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--purple) 38%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--purple) 5%, var(--panel-soft));
}

.dsa-flow-complexity-formula span {
  color: var(--text-dim);
  font: 700 0.52rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.dsa-flow-complexity-formula strong {
  overflow-wrap: anywhere;
  color: var(--purple);
  font: 800 1rem/1.2 var(--mono);
}

.dsa-flow-complexity-formula p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.72rem;
  line-height: 1.5;
}

/*
  Chunk 4 gives the three Labs views a shared experiment-notebook frame while
  preserving a distinct visual grammar for input, comparison, and edge cases.
*/
.dsa-labs-view {
  padding: 0;
  background: var(--panel-solid);
}

/*
  A ruled notebook background suggests deliberate experimentation without
  using animation or moving the complete learning panel.
*/
.dsa-labs-hero {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(color-mix(in srgb, var(--line) 24%, transparent) 1px, transparent 1px) 0 14px / 100% 26px,
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--purple) 9%, transparent), transparent 38%),
    var(--panel-solid);
}

/* The identity block keeps the experiment name and question together. */
.dsa-labs-identity {
  min-width: 0;
}

/* Evidence badges and the Labs label remain readable without relying on color. */
.dsa-labs-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  color: var(--text-dim);
  font: 700 0.56rem/1 var(--mono);
  letter-spacing: 0.09em;
}

/* Labs titles match the hierarchy of the redesigned Trace, Data, and Flow areas. */
.dsa-labs-identity h2 {
  margin: 12px 0 7px;
  color: var(--text);
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
  letter-spacing: -0.025em;
}

/* The question states the learning goal before configuration controls appear. */
.dsa-labs-question {
  max-width: 800px;
  margin: 0;
  color: var(--text) !important;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.5 !important;
}

/* Supporting copy explains the experiment workflow in ordinary language. */
.dsa-labs-description {
  max-width: 800px;
  margin: 7px 0 0;
  color: var(--text-soft) !important;
  font-size: 0.8rem;
  line-height: 1.55 !important;
}

/* Labs context facts adapt without creating horizontal page overflow. */
.dsa-labs-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}

/* One context fact preserves its label and wrapping value. */
.dsa-labs-context-fact {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--bg-raised) 97%, transparent);
}

/* Compact fact labels identify local state without dominating the view. */
.dsa-labs-context-fact span {
  color: var(--text-dim);
  font: 700 0.52rem/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Long program or comparison-group names wrap inside their own fact. */
.dsa-labs-context-fact strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font: 650 0.68rem/1.35 var(--mono);
}

/* Purpose-specific experiment components share measured internal spacing. */
.dsa-labs-body {
  display: grid;
  gap: 20px;
  padding: clamp(18px, 3vw, 30px);
}

/* Empty Labs states retain a deliberate notebook-like presentation. */
.dsa-labs-empty-state {
  display: grid;
  width: min(650px, 100%);
  min-height: 340px;
  place-self: center;
  align-content: center;
  gap: 15px;
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--line-bright);
  border-radius: 16px;
  background:
    linear-gradient(color-mix(in srgb, var(--line) 22%, transparent) 1px, transparent 1px) 0 16px / 100% 27px,
    linear-gradient(145deg, color-mix(in srgb, var(--purple) 7%, transparent), transparent 55%),
    var(--bg-raised);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.12);
}

/* The empty-state mark supports orientation while the written reason stays primary. */
.dsa-labs-empty-glyph {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--purple) 55%, var(--line));
  border-radius: 50%;
  color: var(--purple);
  background: color-mix(in srgb, var(--purple) 8%, var(--panel-soft));
  font: 800 0.78rem/1 var(--mono);
}

/* Missing-evidence reasons remain smaller than the view's main title. */
.dsa-labs-empty-state h3 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 1.18rem;
}

/* Numbered next actions show the shortest safe route into the experiment. */
.dsa-labs-next-steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  counter-reset: labs-empty-step;
  list-style: none;
}

/* Each next action reserves a stable number column and wrapping text. */
.dsa-labs-next-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.45;
  counter-increment: labs-empty-step;
}

/* Generated numbers communicate order without extra decorative markup. */
.dsa-labs-next-steps li::before {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: var(--purple);
  background: color-mix(in srgb, var(--purple) 9%, var(--panel-soft));
  content: counter(labs-empty-step);
  font: 700 0.58rem/1 var(--mono);
}

/* Repeated section headings create a visible prepare, observe, compare rhythm. */
.dsa-labs-section-heading {
  display: grid;
  gap: 7px;
}

/* Technical labels make experiment order visible without relying on position. */
.dsa-labs-section-heading > span {
  color: var(--purple);
  font: 750 0.54rem/1 var(--mono);
  letter-spacing: 0.08em;
}

/* Section titles are secondary to the active Labs view name. */
.dsa-labs-section-heading h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

/* Section guidance remains readable, compact, and naturally wrapping. */
.dsa-labs-section-heading p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.76rem;
  line-height: 1.55;
}

/* Evidence limits and honesty notes use one stable Labs treatment. */
.dsa-labs-boundary {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--purple);
  color: var(--text-soft) !important;
  background: color-mix(in srgb, var(--purple) 6%, var(--panel-soft));
  font-size: 0.74rem;
  line-height: 1.55 !important;
}

/* Small unavailable states fill a component without resembling a broken panel. */
.dsa-labs-empty-inline {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--line-bright);
  border-radius: 10px;
  color: var(--text-soft) !important;
  background: var(--panel-soft);
  font-size: 0.78rem;
  line-height: 1.55 !important;
}

/* The explicit privacy note belongs beside the input action it qualifies. */
.dsa-labs-privacy-note {
  margin: 0;
  color: var(--text-dim) !important;
  font: 600 0.58rem/1.55 var(--mono);
}

/* Input preparation and numbered order appear side by side on wider screens. */
.dsa-input-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 16px;
  align-items: start;
}

/* Composer and queue use independent cards so their roles are obvious. */
.dsa-input-composer,
.dsa-input-preview-panel,
.dsa-input-observed,
.dsa-comparison-route,
.dsa-comparison-desk,
.dsa-edge-method,
.dsa-edge-experiments {
  display: grid;
  min-width: 0;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raised);
}

/* The composer uses mint to identify editable local configuration. */
.dsa-input-composer {
  border-top: 4px solid var(--mint);
}

/* The queue uses purple to identify ordered experiment setup. */
.dsa-input-preview-panel {
  border-top: 4px solid var(--purple);
}

/* The input label keeps its instruction attached to the textarea. */
.dsa-input-label {
  display: grid;
  gap: 8px;
}

/* The visible label prevents the textarea from depending on placeholder text. */
.dsa-input-label > span {
  color: var(--text-dim);
  font: 700 0.56rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The prepared-input editor remains comfortable for deterministic multiline data. */
.dsa-input-textarea {
  width: 100%;
  min-height: 190px;
  margin: 0;
  padding: 14px;
  resize: vertical;
  border: 1px solid var(--line-bright);
  border-radius: 9px;
  outline: 0;
  color: var(--text);
  background: var(--code-bg);
  font: 600 0.78rem/1.6 var(--mono);
}

/* Keyboard focus is visible in light and dark themes. */
.dsa-input-textarea:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px var(--mint-soft);
}

/* Queue length and character bounds update without moving the run action. */
.dsa-input-queue-summary {
  margin: -3px 0 0;
  color: var(--text-dim) !important;
  font: 600 0.56rem/1.4 var(--mono);
}

/* The response queue follows the exact top-to-bottom worker consumption order. */
.dsa-input-queue,
.dsa-input-consumption-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each prepared response separates its visual number from the unchanged value. */
.dsa-input-queue-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}

/* Queue numbers are presentation only and never enter the worker value. */
.dsa-input-queue-number,
.dsa-input-consumption-number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  color: var(--purple);
  background: var(--panel-solid);
  font: 750 0.58rem/1 var(--mono);
}

/* Each queue value follows its response label in a predictable order. */
.dsa-input-queue-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.dsa-input-queue-copy strong {
  color: var(--text-dim);
  font: 700 0.54rem/1 var(--mono);
}

.dsa-input-queue-copy code {
  overflow-wrap: anywhere;
  color: var(--text);
  font: 650 0.7rem/1.4 var(--mono);
}

/* The queue-to-run status prevents stale observed prompts from looking current. */
.dsa-input-run-queue-status {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  font: 650 0.58rem/1.45 var(--mono);
}

/* Matching and changed states include explicit text in addition to color. */
.dsa-input-run-queue-status.matching {
  color: var(--mint);
  background: var(--mint-soft);
}

.dsa-input-run-queue-status.changed {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, var(--panel-soft));
}

.dsa-input-run-queue-status.unavailable {
  color: var(--text-dim);
  background: var(--panel-soft);
}

/* Observed input exchanges form a separate evidence section below preparation. */
.dsa-input-observed {
  border-top: 4px solid var(--cyan);
}

/* Each consumed prompt points to the returned response in one stable card. */
.dsa-input-consumption {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--cyan) 4%, var(--panel-soft));
}

/* Prompt and response labels prevent values from becoming an ambiguous log line. */
.dsa-input-consumption-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.dsa-input-consumption-copy > span {
  color: var(--text-dim);
  font: 700 0.5rem/1 var(--mono);
  letter-spacing: 0.06em;
}

.dsa-input-consumption-copy strong,
.dsa-input-consumption-copy code {
  overflow-wrap: anywhere;
  color: var(--text);
  font: 650 0.7rem/1.45 var(--mono);
}

.dsa-input-consumption-copy code {
  color: var(--mint);
}

/* Reviewed program choices occupy a vertical route that supports longer titles. */
.dsa-comparison-programs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Program choice buttons contain metadata and one explicit action state. */
.dsa-comparison-programs button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 86px;
  padding: 13px;
}

/* Program identity and complexity form a compact readable stack. */
.dsa-comparison-programs button > span {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.dsa-comparison-programs small {
  color: var(--purple);
  font: 750 0.52rem/1 var(--mono);
  letter-spacing: 0.06em;
}

.dsa-comparison-programs strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.78rem;
}

.dsa-comparison-programs button > span > span {
  color: var(--text-dim);
  font: 600 0.54rem/1.35 var(--mono);
}

/* Written current and load actions make button state independent from color. */
.dsa-comparison-programs em {
  color: var(--text-dim);
  font: 700 0.5rem/1 var(--mono);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.dsa-comparison-programs button.active em {
  color: var(--mint);
}

/* Two run slots support direct visual comparison without an unbounded history. */
.dsa-comparison-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Every slot reserves equal structure before and after a run exists. */
.dsa-comparison-slot {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 14px;
  min-height: 280px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-soft);
}

/* Filled run cards use a stronger edge while keeping written evidence primary. */
.dsa-comparison-slot.filled {
  border-top: 4px solid var(--mint);
}

/* Empty slots use a dashed boundary so absence is visible without color. */
.dsa-comparison-slot.empty {
  place-content: center;
  border-style: dashed;
}

.dsa-comparison-slot.empty p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.76rem;
  line-height: 1.55;
}

/* Run letter and program title remain together at the top of each slot. */
.dsa-comparison-slot-heading {
  display: grid;
  gap: 7px;
}

.dsa-comparison-slot-heading span {
  color: var(--purple);
  font: 750 0.54rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.dsa-comparison-slot-heading strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.9rem;
}

/* Three observed counts remain scannable without resembling a benchmark chart. */
.dsa-comparison-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.dsa-comparison-metrics > div {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raised);
}

.dsa-comparison-metrics strong {
  color: var(--mint);
  font: 800 1rem/1 var(--mono);
}

.dsa-comparison-metrics span {
  color: var(--text-dim);
  font: 650 0.5rem/1.3 var(--mono);
}

/* Definition-list semantics keep run labels associated with their values. */
.dsa-comparison-details {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
  gap: 7px 10px;
  margin: 0;
}

.dsa-comparison-details dt {
  color: var(--text-dim);
  font: 700 0.52rem/1.4 var(--mono);
}

.dsa-comparison-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-soft);
  font-size: 0.7rem;
  line-height: 1.4;
}

/* Output previews remain bounded inside their run slot. */
.dsa-comparison-output {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.dsa-comparison-output span {
  color: var(--text-dim);
  font: 700 0.5rem/1 var(--mono);
  letter-spacing: 0.06em;
}

.dsa-comparison-output pre {
  max-height: 140px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--code-bg);
  font: 600 0.62rem/1.5 var(--mono);
  white-space: pre-wrap;
}

/* The fairness check explicitly separates comparable setup from general proof. */
.dsa-comparison-assessment {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--amber) 6%, var(--panel-soft));
}

.dsa-comparison-assessment > span {
  color: var(--amber);
  font: 750 0.52rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.dsa-comparison-assessment strong {
  color: var(--text);
  font-size: 0.84rem;
}

.dsa-comparison-assessment p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.74rem;
  line-height: 1.5;
}

/* The edge-case method and reviewed questions use complementary visual roles. */
.dsa-edge-method {
  border-top: 4px solid var(--mint);
}

.dsa-edge-experiments {
  border-top: 4px solid var(--purple);
}

/* Four method steps create a visible predict, change, run, inspect cycle. */
.dsa-edge-method-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dsa-edge-method-steps li {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 7px;
  min-height: 120px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}

.dsa-edge-method-steps strong {
  color: var(--mint);
  font: 750 0.64rem/1 var(--mono);
}

.dsa-edge-method-steps span {
  color: var(--text-soft);
  font-size: 0.7rem;
  line-height: 1.5;
}

/* Reviewed prompts are ordered questions, not checkboxes or completion tasks. */
.dsa-edge-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dsa-edge-experiment-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--purple) 5%, transparent), transparent 60%),
    var(--panel-soft);
}

/* Prompt numbers establish reading order without suggesting completion status. */
.dsa-edge-experiment-number {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--purple);
  border-radius: 50%;
  color: var(--purple);
  background: var(--panel-solid);
  font: 750 0.58rem/1 var(--mono);
}

/* Prediction label, reviewed question, and method hint form one readable card. */
.dsa-edge-experiment-copy {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.dsa-edge-experiment-copy > span {
  color: var(--purple);
  font: 750 0.5rem/1 var(--mono);
  letter-spacing: 0.06em;
}

.dsa-edge-experiment-copy strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.45;
}

.dsa-edge-experiment-copy p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.7rem;
  line-height: 1.5;
}

/* Operation history uses source snippets below each normalized event label. */
.dsa-operation-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.dsa-operation-list li {
  display: grid;
  gap: 6px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raised);
}

.dsa-operation-list li.current {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.dsa-operation-list code {
  overflow-wrap: anywhere;
  color: var(--text-soft);
  font-size: 0.68rem;
}

/* The line path is a wrapping sequence because laptop users should not scroll it sideways. */
.dsa-path-strip,
.dsa-line-counts,
.dsa-complexity-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}

.dsa-path-strip span,
.dsa-line-counts span,
.dsa-complexity-counts span {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--bg-raised);
  font: 600 0.6rem/1 var(--mono);
}

.dsa-path-strip span.current {
  border-color: var(--mint);
  color: var(--mint);
}

/* Tables scroll inside their view only when many columns cannot fit. */
.dsa-table-wrap {
  max-width: 100%;
  margin-top: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.dsa-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-raised);
  font-size: 0.7rem;
}

.dsa-table-wrap th,
.dsa-table-wrap td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.dsa-table-wrap th {
  color: var(--text-dim);
  font: 700 0.56rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The selected Step Table row uses shape, text, and color as redundant cues. */
.dsa-table-wrap tbody tr.current {
  outline: 2px solid var(--mint);
  outline-offset: -2px;
  background: var(--mint-soft);
}

/* The step number and visible current-state label stack without widening the table. */
.dsa-step-number {
  display: grid;
  gap: 6px;
}

/* Current step remains understandable in monochrome and to low-vision learners. */
.dsa-current-step-label {
  width: fit-content;
  padding: 4px 6px;
  border: 1px solid var(--mint);
  border-radius: 999px;
  color: var(--mint);
  font: 700 0.5rem/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Related programs remain explicit buttons that load source only after a click. */
.dsa-related-programs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.dsa-related-programs button {
  min-height: 46px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--bg-raised);
  text-align: left;
  cursor: pointer;
}

.dsa-related-programs button.active {
  border-color: var(--mint);
  color: var(--mint);
}

/* Playback and console span both workspace columns below the editor and views. */
.dsa-playback-panel,
.dsa-console-panel {
  grid-column: 1 / -1;
}

/* The playback panel uses fixed controls, one flexible timeline, and fixed speed selection. */
.dsa-playback-panel {
  display: grid;
  min-height: 84px;
  grid-template-columns: auto minmax(280px, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 14px 18px;
}

/* A dedicated flex row prevents the four playback buttons from stacking independently. */
.dsa-playback-controls {
  display: flex;
  gap: 7px;
  align-items: center;
}

/* The DSA timeline fills the complete flexible middle column. */
#dsaTimeline {
  width: 100%;
  height: 3px;
  margin: 0;
  appearance: none;
  border-radius: 4px;
  background: var(--line-bright);
  cursor: pointer;
}

/* The WebKit thumb uses the same visible playback position language as Python. */
#dsaTimeline::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  appearance: none;
  border: 3px solid var(--panel-solid);
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
}

/* Firefox receives an equivalent bounded thumb instead of its browser default. */
#dsaTimeline::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 3px solid var(--panel-solid);
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
}

/* Console text stays inside a stable bounded region during playback. */
.dsa-console-panel pre {
  min-height: 105px;
  max-height: 240px;
  margin: 0;
  padding: 18px;
  overflow: auto;
  color: var(--mint);
  background: var(--code-bg);
  font: 500 0.74rem/1.6 var(--mono);
  white-space: pre-wrap;
}

/* Automatic comments replace only the editor surface with a bounded IDE presentation. */
.dsa-automatic-preview {
  display: grid;
  width: 100%;
  height: 100%;
  margin: 0;
  min-height: 0;
  grid-template-rows: 42px minmax(0, 1fr) 30px;
  overflow: hidden;
  color: var(--code-plain);
  background: var(--study-editor-bg);
}

/* The automatic surface follows the learner-selected editor font size. */
.dsa-automatic-preview .learning-comments-preview {
  font-size: var(--editor-font-size, 14px);
}

/* DSA program rows share the compact curriculum-explorer list geometry. */
.dsa-program-card {
  min-height: 0;
}

/* Time and space labels sit together but wrap rather than overflow. */
.dsa-program-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.dsa-program-meta span {
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font: 600 0.53rem/1 var(--mono);
}

/* The DSA preview specializes only the shared editor shell's outer spacing. */
.dsa-comment-preview-shell {
  margin: 18px 22px;
}

/* Examples */
/* Styles `.examples-dialog`. This component rule controls sizing and spacing, color and visual emphasis, boundaries and focus treatment, overflow behavior for the matching interface element. */
.examples-dialog {
  width: min(1360px, calc(100% - 32px));
  height: min(900px, calc(100vh - 32px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  border-radius: 14px;
  color: var(--text);
  background: var(--panel-solid);
  box-shadow: var(--shadow);
}

/* The open dialog reserves a fixed header and gives all remaining height to its browser body. */
.examples-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

/* Creates or styles the generated visual part `.examples-dialog::backdrop`. It contributes color and visual emphasis without adding extra HTML. */
.examples-dialog::backdrop {
  background: rgba(3, 5, 8, 0.78);
  backdrop-filter: blur(8px);
}

/* Styles `.dialog-header`. This component rule controls layout, sizing and spacing, boundaries and focus treatment for the matching interface element. */
.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 30px 22px;
  border-bottom: 1px solid var(--line);
}

/* Styles `.dialog-header h2`. This component rule controls sizing and spacing, typography for the matching interface element. */
.dialog-header h2 {
  margin: 10px 0 0;
  font-size: clamp(1.75rem, 2.4vw, 2.15rem);
}

/* Explains the fixed curriculum route without suggesting stored learner progress. */
.dialog-intro {
  margin: 9px 0 0;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* Divides curriculum navigation, program selection, and lesson details. */
.example-browser-body {
  display: grid;
  min-height: 0;
  grid-template-columns: 255px minmax(330px, 390px) minmax(420px, 1fr);
  overflow: hidden;
}

/* Places categories in a stable vertical sidebar that never needs horizontal scrolling. */
.example-browser-toolbar {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 14px;
  padding: 20px 18px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--panel-soft);
}

/* Groups the local-only catalog search label, field, and concise usage help. */
.example-search {
  display: grid;
  gap: 7px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* The explicit label keeps the search purpose visible after a learner starts typing. */
.example-search label {
  color: var(--text);
  font: 700 0.78rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A native search field supplies familiar keyboard, selection, and clear behavior. */
.example-search input {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  color: var(--text);
  background: var(--bg-raised);
  font: 600 0.82rem/1.4 var(--mono);
}

/* Placeholder contrast stays quieter than entered text while remaining readable. */
.example-search input::placeholder {
  color: var(--text-dim);
  opacity: 1;
}

/* Brief guidance explains multi-word narrowing without making the sidebar noisy. */
.example-search > span {
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* Labels the sidebar as a recommendation rather than a completion tracker. */
.example-curriculum-label {
  color: var(--text-dim);
  font: 750 0.82rem/1.35 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Stacks every category in the natural top-to-bottom reading direction. */
.example-filters {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

/* Gives each category a full-width row with room for its complete name and count. */
.example-filter {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--bg-raised);
  font: 650 0.96rem/1.4 var(--mono);
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}

/* Category totals make the larger curriculum easier to understand before filtering. */
.example-filter-count {
  display: inline-grid;
  min-width: 31px;
  height: 27px;
  place-items: center;
  border-radius: 999px;
  color: var(--text-dim);
  background: var(--panel-solid);
  font-size: 0.8rem;
  font-weight: 750;
}

/* Highlights the category whose program cards are currently displayed. */
.example-filter.active {
  border-color: var(--mint);
  color: var(--bg);
  background: var(--mint);
}

/* The active count remains legible against the mint selected-category surface. */
.example-filter.active .example-filter-count {
  color: var(--mint);
  background: var(--bg);
}

/* Keeps the visible and total program counts stable beside the scrolling filters. */
.example-count {
  color: var(--text-dim);
  font: 600 0.72rem/1.35 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* The middle pane owns its heading and independently scrolling program index. */
.example-results-pane {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid var(--line);
  background: var(--panel-solid);
}

/* The result heading explains the selection action and keeps count visible. */
.example-results-header {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

/* Program-library context uses a label and sentence instead of tiny metadata. */
.example-results-header > div {
  display: grid;
  gap: 5px;
}

.example-results-header > div > span {
  color: var(--purple);
  font: 700 0.72rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.example-results-header > div > strong {
  font-size: 0.92rem;
  line-height: 1.35;
}

/*
  A failed search receives a real result panel instead of an unexplained blank
  grid. Spanning both columns keeps the recovery action centered and readable.
*/
.example-search-empty {
  display: grid;
  width: min(520px, 100%);
  min-height: 250px;
  place-self: center;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 34px;
  border: 1px dashed var(--line-bright);
  border-radius: 12px;
  color: var(--text);
  background: var(--panel-soft);
  text-align: center;
}

/* The empty-result title identifies the outcome before offering recovery. */
.example-search-empty h3 {
  margin: 0;
  font-size: 1.25rem;
}

/* Recovery guidance stays bounded and calmer than the result title. */
.example-search-empty p {
  max-width: 390px;
  margin: 0;
  color: var(--text-soft);
  line-height: 1.65;
}

/* The reset control keeps a comfortable target without stretching unnecessarily. */
.example-search-empty button {
  margin-top: 5px;
}

/* Styles `.dialog-close`. This component rule controls sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment for the matching interface element. */
.dialog-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--bg-raised);
  font-size: 1.4rem;
  cursor: pointer;
}

/* The program index is one stable vertical reading route rather than a card mosaic. */
.example-grid {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  overflow-y: auto;
}

/* Each list row is a non-destructive selection control with a clear hierarchy. */
.example-card {
  display: grid;
  width: 100%;
  min-height: 158px;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: 8px 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--bg-raised);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

/* Guided checkpoints receive extra room and a subtle accent because they show prerequisites. */
.example-card.guided-checkpoint {
  min-height: 158px;
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
  background: color-mix(in srgb, var(--amber) 5%, var(--bg-raised));
}

/*
  DSA labels and titles are often longer than their Python counterparts. The
  extra height preserves two readable summary lines and the metadata badge
  without allowing any part of the selection row to overlap its neighbor.
*/
.example-card.dsa-program-card {
  min-height: 184px;
}

/* A stronger checkpoint hover preserves the card's project identity during selection. */
.example-card.guided-checkpoint:hover {
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 9%, var(--bg-raised));
}

/* Aligns the topic and difficulty labels at opposite sides of every card. */
.example-card-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

/* Defines hover feedback for `.example-card:hover`, using color and visual emphasis, boundaries and focus treatment, motion and interaction feedback to confirm that the element is interactive. */
.example-card:hover {
  border-color: var(--mint);
  background: var(--mint-soft);
}

/* The selected row stays visibly connected to the preview without relying on color alone. */
.example-card.active {
  border-color: var(--mint);
  box-shadow: inset 4px 0 0 var(--mint);
  background: var(--mint-soft);
}

/* Stable route numbers make search results and section browsing easy to cross-reference. */
.example-list-sequence {
  grid-column: 1;
  grid-row: 1 / -1;
  color: var(--purple);
  font: 700 0.8rem/1.4 var(--mono);
}

/* The row copy keeps topic, title, and summary in one natural reading column. */
.example-list-copy {
  display: grid;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  gap: 5px;
}

.example-list-copy > strong {
  font-size: 1rem;
  line-height: 1.4;
}

.example-list-summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Styles `.example-topic`. This component rule controls color and visual emphasis, typography, motion and interaction feedback for the matching interface element. */
.example-topic {
  min-width: 0;
  color: var(--purple);
  font: 700 0.76rem/1.3 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Uses a quiet badge to communicate the assumed experience level before selection. */
.example-level {
  width: fit-content;
  grid-column: 2;
  grid-row: 2;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  background: var(--panel-soft);
  font: 600 0.72rem/1.1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The right pane is the comfortable reading surface for one selected lesson. */
.example-preview {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 30px,
    var(--panel-soft);
}

/* The preview document uses familiar editorial spacing instead of dense cards. */
.example-preview-document {
  display: grid;
  gap: 20px;
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 28px 30px 40px;
}

/* The phone-only return control is hidden while all desktop panes remain visible. */
.example-preview-back {
  display: none;
}

.example-preview-eyebrow {
  color: var(--purple);
  font: 700 0.78rem/1.45 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.example-preview-document h3 {
  margin: -6px 0 0;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1.15;
}

.example-preview-description {
  max-width: 62ch;
  margin: -8px 0 0;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.7;
}

/* Facts use responsive cards with real definition-list semantics. */
.example-preview-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-raised);
}

.example-preview-facts > div {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.example-preview-facts dt,
.example-preview-group h4,
.example-preview-source h4,
.example-preview-complexity h4,
.example-preview-expected h4 {
  margin: 0;
  color: var(--text-dim);
  font: 700 0.75rem/1.3 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.example-preview-facts dd {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.45;
}

.example-preview-group,
.example-preview-source,
.example-preview-complexity,
.example-preview-expected {
  display: grid;
  gap: 10px;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raised);
}

.example-preview-group ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.example-preview-group li,
.example-preview-source > p,
.example-preview-complexity > p,
.example-preview-expected > p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.94rem;
  line-height: 1.6;
}

.example-preview-complexity-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.example-preview-complexity-values span {
  padding: 7px 9px;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  color: var(--mint);
  font: 700 0.78rem/1 var(--mono);
}

.example-preview-expected code {
  width: fit-content;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--mint);
  background: var(--code-bg);
  font-size: 0.86rem;
}

.example-preview-warning,
.example-preview-boundary {
  margin: 0;
  padding: 14px 16px;
  border-left: 4px solid var(--purple);
  color: var(--text-soft);
  background: color-mix(in srgb, var(--purple) 8%, var(--bg-raised));
  font-size: 0.94rem;
  line-height: 1.65;
}

.example-preview-warning {
  border-left-color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, var(--bg-raised));
}

/*
  Catalog source uses the same trustworthy visual language as Learning
  comments: file chrome, safe line numbers, syntax colors, and a status strip.
  JavaScript still opens the immutable plain source string, never these nodes.
*/
.example-source-editor {
  display: grid;
  min-height: 180px;
  max-height: 420px;
  overflow: hidden;
  grid-template-rows: 42px minmax(0, 1fr) 30px;
  border: 1px solid var(--study-editor-line);
  border-radius: 9px;
  background: var(--study-editor-bg);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}

/* Source-only rows use larger type than generated study copies for relaxed reading. */
.learning-comments-preview.example-source-document {
  padding: 8px 0 14px;
  /* A pixel floor prevents the source from inheriting the dialog's smaller metadata scale. */
  font-size: clamp(15px, 1rem, 17px);
  line-height: 1.75;
}

/* Wider source gutters keep two and three digit line numbers comfortably separated. */
.example-source-document .learning-preview-row {
  min-height: 30px;
  grid-template-columns: 62px minmax(0, 1fr);
}

/* A subtle current-file tint gives the preview an IDE surface without visual noise. */
.example-source-document .learning-preview-row:hover {
  background: color-mix(in srgb, var(--mint) 5%, var(--study-editor-bg));
}

/* The compact status bar remains presentation only and never enters source. */
.example-source-status {
  justify-content: space-between;
  font-size: 0.58rem;
}

.example-preview-open {
  width: 100%;
  min-height: 48px;
  font-size: 0.88rem;
}

/* Gives developing programs a distinct purple cue without suggesting an error state. */
.example-level.developing {
  border-color: color-mix(in srgb, var(--purple) 44%, var(--line));
  color: var(--purple);
}

/* Guided Challenge cards use amber to signal a larger program without implying an error. */
.example-level.guided.challenge {
  border-color: color-mix(in srgb, var(--amber) 48%, var(--line));
  color: var(--amber);
}

/* Styles `.example-card h3`. This component rule controls sizing and spacing, typography for the matching interface element. */
.example-card h3 {
  margin: 10px 0 7px;
  font-size: 1rem;
}

/* Styles `.example-card p`. This component rule controls sizing and spacing, color and visual emphasis, typography for the matching interface element. */
.example-card p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Clearly identifies examples that intentionally stop for an Error Coach lesson. */
.example-warning {
  width: fit-content;
  margin-top: 13px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--red) 48%, var(--line));
  border-radius: 999px;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, var(--bg-raised));
  font: 700 0.52rem/1 var(--mono);
  letter-spacing: 0.06em;
}

/* Stacks checkpoint prerequisites as fixed guidance, never as recorded progress. */
.example-prerequisites {
  display: grid;
  gap: 5px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Hides optional metadata completely when a normal concept card does not supply it. */
.example-prerequisites[hidden],
.example-warning[hidden] {
  display: none;
}

/* Uses the same quiet metadata language as best-view recommendations. */
.example-prerequisites > span {
  color: var(--text-dim);
  font: 600 0.52rem/1 var(--mono);
  letter-spacing: 0.1em;
}

/* Prerequisite concept names remain readable in both themes and can wrap naturally. */
.example-prerequisites strong {
  color: var(--amber);
  font: 600 0.62rem/1.45 var(--mono);
}

/* Anchors view recommendations to the card bottom so rows remain visually aligned. */
.example-views {
  display: grid;
  gap: 5px;
  margin-top: auto;
  padding-top: 17px;
}

/* Labels the recommendation as supporting metadata instead of part of the description. */
.example-views > span {
  color: var(--text-dim);
  font: 600 0.52rem/1 var(--mono);
  letter-spacing: 0.1em;
}

/* Keeps recommended view names readable and allows longer combinations to wrap. */
.example-views strong {
  color: var(--mint);
  font: 600 0.62rem/1.45 var(--mono);
}

/* Automatic Learning Comments uses a bounded IDE layout rather than one large plain text area. */
.learning-comments-dialog {
  width: min(1180px, calc(100% - 32px));
  height: min(900px, calc(100vh - 40px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  border-radius: 14px;
  color: var(--text);
  background: var(--panel-solid);
  box-shadow: var(--shadow);
}

/* The open dialog becomes a four-row application surface with a flexible editor center. */
.learning-comments-dialog[open] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

/* The preview backdrop matches the examples browser so modal behavior feels consistent. */
.learning-comments-dialog::backdrop {
  background: rgba(3, 5, 8, 0.78);
  backdrop-filter: blur(8px);
}

/* Keeps the title and safety state together without crowding the close action. */
.learning-comments-title-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* The read-only badge prevents the IDE appearance from implying a second editable document. */
.learning-comments-readonly {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--mint) 45%, var(--line));
  border-radius: 999px;
  color: var(--mint);
  background: var(--mint-soft);
  font: 700 0.54rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Keeps explanation-density controls visible while a long commented program is reviewed. */
.learning-comments-toolbar {
  z-index: 2;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

/* Presents the label and native select as one compact, keyboard-friendly control. */
.learning-comments-toolbar label {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
  align-items: center;
  color: var(--text-dim);
  font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Uses existing panel tokens so the detail selector remains readable in both themes. */
.learning-comments-toolbar select {
  min-height: 34px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line-bright);
  border-radius: 7px;
  color: var(--text);
  background: var(--bg-raised);
}

/* The summary explains the evidence and exact number of generated notes. */
.learning-comments-toolbar p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: right;
}

/* Groups the legend and evidence summary into one readable toolbar block. */
.learning-comments-toolbar-copy {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

/* The legend makes the two visual layers understandable before code is scanned. */
.learning-comments-legend {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  color: var(--text-dim);
  font: 600 0.56rem/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Each legend item keeps its swatch and label on one line. */
.learning-comments-legend > span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

/* Small colored squares echo the generated note and source colors used below. */
.learning-comments-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* Purple identifies trace-backed explanation throughout the application. */
.learning-legend-note {
  background: var(--purple);
}

/* Cyan identifies reviewed curriculum context that is not inferred from a trace. */
.learning-legend-curriculum {
  background: var(--cyan);
}

/* Mint identifies learner Python source and executable content. */
.learning-legend-source {
  background: var(--mint);
}

/* The editor shell supplies familiar chrome, a scrollable document, and a status bar. */
.learning-comments-editor {
  display: grid;
  min-height: 0;
  margin: 18px 22px;
  overflow: hidden;
  grid-template-rows: 42px minmax(0, 1fr) 30px;
  border: 1px solid var(--study-editor-line);
  border-radius: 10px;
  background: var(--study-editor-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

/* Editor chrome provides a file tab and mode context without adding interactive controls. */
.learning-comments-editor-chrome {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  padding: 0 12px;
  border-bottom: 1px solid var(--study-editor-line);
  background: var(--study-editor-raised);
}

/* Three small lights give the preview a recognizable development-tool silhouette. */
.learning-editor-lights {
  display: flex;
  gap: 5px;
  align-self: center;
  padding-right: 14px;
}

/* Shared light sizing keeps the decoration subtle rather than imitating window controls. */
.learning-editor-lights i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
}

/* Each light uses an existing semantic accent from the Code Explorer palette. */
.learning-editor-lights i:nth-child(1) { background: var(--red); }
.learning-editor-lights i:nth-child(2) { background: var(--amber); }
.learning-editor-lights i:nth-child(3) { background: var(--mint); }

/* The active file tab anchors the generated document to familiar main.py source. */
.learning-editor-tab {
  align-self: stretch;
  display: inline-flex;
  width: fit-content;
  gap: 8px;
  align-items: center;
  padding: 0 14px;
  border-right: 1px solid var(--study-editor-line);
  border-left: 1px solid var(--study-editor-line);
  color: var(--code-plain);
  background: var(--study-editor-bg);
  font: 600 0.68rem/1 var(--mono);
}

/* The language badge resembles an IDE file icon while staying text-accessible. */
.learning-editor-tab b {
  color: var(--cyan);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
}

/* Secondary tab text explains why this main.py view contains extra lines. */
.learning-editor-tab em {
  color: var(--text-dim);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 500;
}

/* The chrome mode label reinforces that this editor-like view is for study only. */
.learning-editor-mode {
  align-self: center;
  color: var(--text-dim);
  font: 600 0.54rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A scrollable code surface keeps syntax, generated notes, and line numbers visually separate. */
.learning-comments-preview {
  min-height: 0;
  padding: 10px 0 18px;
  overflow: auto;
  color: var(--code-plain);
  background: var(--study-editor-bg);
  font: 500 0.84rem/1.65 var(--mono);
  tab-size: 4;
  counter-reset: learning-preview-line;
}

/* Gives keyboard users a clear focus boundary when selecting or manually copying preview text. */
.learning-comments-preview:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -4px;
}

/* Every visual line owns a CSS-only gutter number and an exact selectable code row. */
.learning-preview-row {
  position: relative;
  display: grid;
  min-height: 27px;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;
  counter-increment: learning-preview-line;
}

/* CSS-generated numbers do not contaminate copied Python source. */
.learning-preview-row::before {
  content: var(--learning-preview-line);
  position: sticky;
  left: 0;
  align-self: stretch;
  padding: 3px 14px 3px 6px;
  border-right: 1px solid var(--study-editor-line);
  color: var(--text-dim);
  background: var(--study-editor-gutter);
  text-align: right;
  user-select: none;
}

/* Exact source characters wrap only inside the code column and preserve indentation. */
.learning-preview-code {
  display: block;
  min-width: 0;
  padding: 3px 18px;
  color: var(--code-plain);
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Generated notes receive a full-row tint and edge so they cannot be mistaken for Python. */
.learning-preview-row.trace-note {
  border-top: 1px solid color-mix(in srgb, var(--purple) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--purple) 18%, transparent);
  background: var(--study-editor-note);
}

/* Hover helps a learner follow one long wrapped note without adding motion. */
.learning-preview-row.trace-note:hover {
  background: var(--study-editor-note-hover);
}

/*
  Reviewed DSA context receives a separate cyan edge and tint. This preserves
  the evidence boundary even before a learner reads the note wording.
*/
.learning-preview-row.curriculum-note {
  border-color: color-mix(in srgb, var(--cyan) 25%, transparent);
  background: color-mix(in srgb, var(--cyan) 8%, var(--study-editor-bg));
}

/* Curriculum context keeps its distinct surface when the learner follows the row. */
.learning-preview-row.curriculum-note:hover {
  background: color-mix(in srgb, var(--cyan) 13%, var(--study-editor-bg));
}

/* The owned DSA prefix adopts the curriculum color only on reviewed context rows. */
.learning-preview-row.curriculum-note .learning-preview-note-prefix {
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--study-editor-line));
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, var(--study-editor-bg));
}

/* The owned prefix acts as a compact label but remains exact selectable document text. */
.learning-preview-note-prefix {
  margin-right: 8px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--purple) 48%, var(--study-editor-line));
  border-radius: 4px;
  color: var(--purple);
  background: color-mix(in srgb, var(--purple-soft) 72%, var(--study-editor-bg));
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Generated prose uses stronger contrast and line height than ordinary code comments. */
.learning-preview-note-message {
  color: var(--text-soft);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.65;
}

/* Lightweight syntax colors mirror the main editor's established token palette. */
.learning-token-keyword,
.learning-token-constant { color: var(--code-keyword); font-weight: 600; }
.learning-token-string { color: var(--code-string); }
.learning-token-number { color: var(--code-number); }
.learning-token-function { color: var(--code-property); }
.learning-token-operator { color: var(--code-operator); }
.learning-token-comment { color: var(--code-comment); font-style: italic; }
.learning-token-name { color: var(--code-name); }

/* The status strip closes the IDE frame with useful static document metadata. */
.learning-comments-status {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  border-top: 1px solid var(--study-editor-line);
  color: var(--text-dim);
  background: var(--study-editor-raised);
  font: 600 0.54rem/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Separates the safety explanation from the two deliberate export actions. */
.learning-comments-actions {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
}

/* Keeps the source-protection promise visible without competing with action labels. */
.learning-comments-actions p {
  max-width: 560px;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Groups Copy and Replace while keeping their different visual priorities. */
.learning-comments-actions > div {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
}

/* Styles `.toast`. This component rule controls sizing and spacing, color and visual emphasis, typography, boundaries and focus treatment, motion and interaction feedback for the matching interface element. */
.toast {
  position: fixed;
  z-index: 20;
  right: 20px;
  bottom: 20px;
  max-width: min(380px, calc(100% - 40px));
  padding: 12px 16px;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel-solid);
  box-shadow: var(--shadow);
  font: 500 0.7rem/1.5 var(--mono);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: 180ms ease;
}

/* Styles `.toast.visible`. This component rule controls color and visual emphasis, motion and interaction feedback for the matching interface element. */
.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Defines the state-specific appearance of `.toast.error`. The declarations control color and visual emphasis, boundaries and focus treatment when that state class is present. */
.toast.error {
  border-color: var(--red);
  color: var(--red);
}

/* Defines the soft opacity pulse used while the Python runtime is loading. */
@keyframes pulse {
  50% { opacity: 0.35; }
}

/* Defines the horizontal light sweep that gives the terminal preview a subtle active-screen effect. */
@keyframes scan {
  0%, 70% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Tablets use a two-stage catalog so neither list nor preview becomes cramped. */
@media (max-width: 1100px) {
  /* Route navigation and program rows remain visible until a program is selected. */
  .example-browser-body {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  /* Preview becomes a deliberate second stage at tablet width. */
  .example-preview {
    display: none;
  }

  .example-browser-body.mobile-preview-open {
    grid-template-columns: minmax(0, 1fr);
  }

  .example-browser-body.mobile-preview-open .example-browser-toolbar,
  .example-browser-body.mobile-preview-open .example-results-pane {
    display: none;
  }

  .example-browser-body.mobile-preview-open .example-preview {
    display: block;
  }

  /* A visible return control restores the previous catalog stage. */
  .example-preview-back {
    display: inline-flex;
    width: fit-content;
    min-height: 40px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--line-bright);
    border-radius: 8px;
    color: var(--text);
    background: var(--bg-raised);
    font: 700 0.78rem/1.2 var(--mono);
    cursor: pointer;
  }
}

/* Adapts the layout inside @media (max-width: 1050px) so the same interface remains usable on narrower screens. */
@media (max-width: 1050px) {
  /* Styles `.welcome-screen`. This component rule controls layout, sizing and spacing for the matching interface element. */
  .welcome-screen {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
    padding-top: 62px;
  }

  /* Styles `.workspace-grid`. This component rule controls layout for the matching interface element. */
  .workspace-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "editor"
      "controls"
      "story"
      "output";
  }

  /* Styles `.editor-panel, .story-panel`. This component rule controls sizing and spacing for the matching interface element. */
  .editor-panel,
  .story-panel {
    min-height: 560px;
  }

  /* Styles `.editor-shell`. This component rule controls sizing and spacing for the matching interface element. */
  .editor-shell {
    height: 470px;
  }

  /* Keeps every right-panel view aligned after the workspace becomes a single column. */
  .story-view,
  .variables-view,
  .references-view,
  .flow-view,
  .loop-view,
  .learning-view {
    height: 469px;
  }
}

/* Adapts the layout inside @media (max-width: 680px) so the same interface remains usable on narrower screens. */
@media (max-width: 680px) {
  /* Styles `.site-header, main`. This component rule controls sizing and spacing for the matching interface element. */
  .site-header,
  main,
  .site-footer {
    width: min(100% - 28px, 1440px);
  }

  /* Styles `.runtime-status`. This component rule controls layout for the matching interface element. */
  .runtime-status {
    display: none;
  }

  /* Styles `.welcome-screen`. This component rule controls sizing and spacing for the matching interface element. */
  .welcome-screen {
    gap: 48px;
    padding: 50px 0 70px;
  }

  /* Styles `.hero-copy h1`. This component rule controls typography for the matching interface element. */
  .hero-copy h1 {
    font-size: clamp(2.75rem, 14vw, 4.4rem);
  }

  /* Styles `.hero-actions`. This component rule controls layout for the matching interface element. */
  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  /* Styles `.hero-terminal`. This component rule controls motion and interaction feedback for the matching interface element. */
  .hero-terminal {
    transform: none;
  }

  /* Styles `.terminal-body`. This component rule controls sizing and spacing for the matching interface element. */
  .terminal-body {
    padding: 22px 16px;
  }

  /* Styles `.trace-card-preview`. This component rule controls sizing and spacing for the matching interface element. */
  .trace-card-preview {
    margin-left: 0;
  }

  /* Styles `.terminal-footer, .terminal-topbar`. This component rule controls sizing and spacing for the matching interface element. */
  .terminal-footer,
  .terminal-topbar {
    padding: 0 12px;
  }

  /* Styles `.terminal-footer`. This component rule controls sizing and spacing, typography for the matching interface element. */
  .terminal-footer {
    gap: 12px;
    font-size: 0.52rem;
  }

  /* Styles `.workspace`. This component rule controls sizing and spacing for the matching interface element. */
  .workspace {
    padding-top: 28px;
  }

  /* Styles `.workspace-heading`. This component rule controls layout, sizing and spacing for the matching interface element. */
  .workspace-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
  }

  /* Styles `.workspace-actions`. This component rule controls layout for the matching interface element. */
  .workspace-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* The third workspace action spans both columns so its longer label remains readable. */
  .workspace-actions .learning-comments-button {
    grid-column: 1 / -1;
  }

  /* Styles `.workspace-actions .primary-button, .workspace-actions .danger-button`. This component rule controls sizing and spacing for the matching interface element. */
  .workspace-actions .primary-button,
  .workspace-actions .danger-button {
    width: 100%;
  }

  /* Preserves room for the useful editor controls on narrow phone headers. */
  .editor-panel .panel-header {
    flex-wrap: wrap;
    gap: 8px;
    min-height: auto;
    padding: 8px 10px;
  }

  /* Places all editor actions on a dedicated row below the panel title on phones. */
  .editor-header-tools {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* The longer learning toggle receives its own row when phone width is limited. */
  .editor-header-tools .automatic-comments-toggle {
    flex: 1 1 100%;
  }

  /* The panel title already identifies the editor, so the filename can yield space on phones. */
  .editor-header-tools .file-label {
    display: none;
  }

  /* The select's values already include px, allowing the extra Font label to hide safely. */
  .editor-font-control > span {
    display: none;
  }

  /* Styles `.tabs-header`. This component rule controls layout, sizing and spacing for the matching interface element. */
  .tabs-header {
    align-items: stretch;
    flex-direction: column-reverse;
    height: auto;
    padding: 10px 8px 0;
  }

  /* Styles `.step-count`. This component rule controls layout, sizing and spacing for the matching interface element. */
  .step-count {
    align-self: flex-end;
    margin: 0 5px 7px;
  }

  /* Styles `.panel-tabs`. This component rule controls sizing and spacing for the matching interface element. */
  .panel-tabs {
    min-height: 39px;
  }

  /* Keeps the four primary areas equally sized and readable on phone widths. */
  .learning-mode-nav {
    min-height: 48px;
  }

  /* Uses slightly smaller type so all primary labels remain on one row. */
  .learning-mode {
    font-size: 0.6rem;
  }

  /* Styles `.trace-content, .loop-content`. This component rule controls sizing and spacing for the matching interface element. */
  .trace-content,
  .loop-content {
    padding: 21px 16px;
  }

  /* Reduces new learning-view padding while preserving comfortable touch targets. */
  .learning-detail,
  .scenario-grid {
    padding: 16px;
  }

  /* Stacks Input Playground above Compare Runs when two cards would be cramped. */
  .scenario-grid {
    grid-template-columns: 1fr;
  }

  /* Makes state transitions a labelled two-column comparison on narrow screens. */
  .state-comparison-row {
    grid-template-columns: minmax(65px, 0.7fr) minmax(0, 1fr);
  }

  /* Hides the decorative arrow after the mobile comparison becomes vertical. */
  .state-comparison-row .comparison-arrow {
    display: none;
  }

  /* Labels before and after values so the stacked mobile layout remains self-explanatory. */
  .state-comparison-row code::before {
    content: attr(data-label) ": ";
    color: var(--text-dim);
  }

  /* Stacks comparison runs inside a narrow Scenario Lab card. */
  .run-comparison-grid {
    grid-template-columns: 1fr;
  }

  /* Gives each watched variable the full phone width. */
  .watch-dashboard-grid {
    grid-template-columns: 1fr;
  }

  /* Stacks object states vertically so Mutation Explorer remains readable on phones. */
  .mutation-diagram {
    grid-template-columns: 1fr;
  }

  /* Rotates the conceptual transition into the vertical mobile reading direction. */
  .mutation-connector strong {
    transform: rotate(90deg);
  }

  /* Styles `.variables-grid`. This component rule controls layout for the matching interface element. */
  .variables-grid {
    grid-template-columns: 1fr;
  }

  /* Stacks variable selection above inspection when two columns would become cramped. */
  .variables-content {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(110px, 0.35fr) minmax(0, 1fr);
  }

  /* Converts the desktop divider into a horizontal boundary on small screens. */
  .scope-browser {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  /* Keeps metadata readable when the inspector has narrow horizontal space. */
  .inspector-metadata {
    grid-template-columns: 1fr;
  }

  /* Allows the graph explanation to wrap above its Fit control. */
  .graph-toolbar {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  /* Gives the complete graph control row the available phone width without overflow. */
  .graph-zoom-controls {
    width: 100%;
  }

  /* Lets the slider absorb remaining mobile space between fixed-size controls. */
  .graph-zoom-slider {
    flex: 1 1 auto;
    width: auto;
  }

  /* Styles `.change-item`. This component rule controls layout, sizing and spacing for the matching interface element. */
  .change-item {
    grid-template-columns: minmax(70px, 1fr) minmax(45px, auto) 18px minmax(45px, auto);
    padding: 7px 9px;
  }

  /* Styles `.controls-panel`. This component rule controls layout, sizing and spacing for the matching interface element. */
  .controls-panel {
    grid-template-columns: 1fr auto;
    gap: 18px 12px;
  }

  /* Styles `.playback-controls`. This component rule controls layout for the matching interface element. */
  .playback-controls {
    grid-column: 1;
    gap: 4px;
  }

  /* Fits five playback actions beside the speed selector without internal clipping. */
  .control-button,
  .play-button {
    width: 34px;
    height: 36px;
  }

  /* Keeps Play slightly more prominent while remaining inside the mobile grid. */
  .play-button {
    width: 38px;
  }

  /* Removes desktop-only separation when horizontal space is scarce. */
  .restart-button {
    margin-left: 0;
  }

  /* Styles `.progress-area`. This component rule controls layout for the matching interface element. */
  .progress-area {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Styles `.speed-control`. This component rule controls layout for the matching interface element. */
  .speed-control {
    grid-column: 2;
    grid-row: 1;
  }

  /* The mobile program list keeps the same compact vertical row system. */
  .example-grid {
    padding: 14px;
  }

  /* The first mobile stage stacks bounded navigation above the program list. */
  .example-browser-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(190px, 38%) minmax(0, 1fr);
  }

  /* The phone sidebar keeps vertical navigation and uses its own bounded scroll area. */
  .example-browser-toolbar {
    gap: 12px;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  /* The middle program pane becomes the second independently scrolling stage. */
  .example-results-pane {
    border-right: 0;
  }

  /* Preview is a deliberate second mobile screen rather than a cramped third pane. */
  .example-preview {
    display: none;
  }

  /* Selecting one program replaces navigation and list with its complete preview. */
  .example-browser-body.mobile-preview-open {
    grid-template-rows: minmax(0, 1fr);
  }

  .example-browser-body.mobile-preview-open .example-browser-toolbar,
  .example-browser-body.mobile-preview-open .example-results-pane {
    display: none;
  }

  .example-browser-body.mobile-preview-open .example-preview {
    display: block;
  }

  /* The return action makes the mobile two-stage navigation explicit. */
  .example-preview-back {
    display: inline-flex;
    width: fit-content;
    min-height: 40px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--line-bright);
    border-radius: 8px;
    color: var(--text);
    background: var(--bg-raised);
    font: 700 0.78rem/1.2 var(--mono);
    cursor: pointer;
  }

  /* Phone preview spacing preserves readable type without wasting width. */
  .example-preview-document {
    gap: 16px;
    padding: 18px 16px 30px;
  }

  /* Program facts stack when even two concise columns would become cramped. */
  .example-preview-facts {
    grid-template-columns: 1fr;
  }

  /* The phone keeps a substantial IDE preview without consuming the full dialog. */
  .example-source-editor {
    max-height: 360px;
  }

  /* Source stays comfortably readable while long lines wrap inside their code column. */
  .learning-comments-preview.example-source-document {
    /* Keep source legible on phones without requiring the learner to zoom the whole page. */
    font-size: 15px;
  }

  /* The source-only gutter gives more of the narrow surface back to indented Python. */
  .example-source-document .learning-preview-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  /* Compact source-only padding prevents wrapped expressions from becoming one-word columns. */
  .example-source-document .learning-preview-code {
    padding-inline: 8px;
  }

  /* Encoding details yield to the more useful language, line count, and preview state. */
  .example-source-status span:nth-child(3),
  .example-source-status span:nth-child(4) {
    display: none;
  }

  /* The search remains full width above the vertical mobile category list. */
  .example-search {
    width: 100%;
  }

  /* Mobile empty results use the card region without excessive vertical space. */
  .example-search-empty {
    min-height: 210px;
    padding: 24px 18px;
  }

  /* The count follows the vertical list and remains left-aligned on narrow screens. */
  .example-count {
    margin-top: 2px;
  }

  /* Compact rows show enough summary to choose while detail stays in preview. */
  .example-card {
    min-height: 158px;
  }

  /* Guided checkpoints no longer need oversized cards because preview owns detail. */
  .example-card.guided-checkpoint {
    min-height: 158px;
  }

  /* Comment controls stack above the preview on phones while retaining native keyboard behavior. */
  .learning-comments-toolbar,
  .learning-comments-actions {
    align-items: stretch;
    flex-direction: column;
  }

  /* The legend and evidence summary also stack so neither becomes cramped. */
  .learning-comments-toolbar-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  /* The evidence summary reads naturally from the left in the stacked layout. */
  .learning-comments-toolbar p {
    text-align: left;
  }

  /* Copy and Replace receive equal room and remain large enough for touch input. */
  .learning-comments-actions > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* The IDE frame uses the full available center area on a narrow phone. */
  .learning-comments-editor {
    margin: 12px;
    grid-template-rows: 40px minmax(0, 1fr) 28px;
  }

  /* Decorative lights yield room to the file name on narrow screens. */
  .learning-editor-lights {
    display: none;
  }

  /* Mobile chrome needs only the active file and its read-only mode. */
  .learning-comments-editor-chrome {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* Secondary file text is hidden before it forces the tab to wrap. */
  .learning-editor-tab em {
    display: none;
  }

  /* Smaller gutter and code padding preserve indentation without horizontal overflow. */
  .learning-preview-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  /* Phone line numbers remain readable without taking editor space from Python. */
  .learning-preview-row::before {
    padding-right: 9px;
  }

  /* Compact code padding keeps nested source readable at 390 pixels. */
  .learning-preview-code {
    padding: 3px 10px;
  }

  /* Smaller type preserves more horizontal room for indented Python source. */
  .learning-comments-preview {
    font-size: 0.76rem;
  }

  /* The long status label is redundant with the visible note legend on phones. */
  .learning-comments-status span:last-child {
    display: none;
  }

  /* The safety badge moves below the title when the heading needs the full width. */
  .learning-comments-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  /* Styles `.dialog-header`. This component rule controls sizing and spacing for the matching interface element. */
  .dialog-header {
    padding: 22px 18px 18px;
  }
}

/* Stacks DSA panels before either column becomes too narrow for source or one-row tabs. */
@media (max-width: 1320px) {
  /* One column preserves the complete editor and view stage without horizontal page scrolling. */
  .dsa-workspace-grid {
    grid-template-columns: 1fr;
  }

  /* Full-width DSA panels follow the same single-column document flow. */
  .dsa-playback-panel,
  .dsa-console-panel {
    grid-column: 1;
  }
}

/* Adapts DSA-specific content to the same narrow-phone boundary as the shared workspace. */
@media (max-width: 680px) {
  /* The DSA heading follows the shared stacked workspace action layout. */
  .workspace-heading-copy,
  .dsa-heading-copy {
    font-size: 0.86rem;
  }

  /*
    Shared phone tabs normally move the step count onto a separate row. The DSA
    panel has more named views, so it keeps one stable tab row plus one compact
    status row instead of allowing individual view labels to wrap.
  */
  .dsa-learning-panel .tabs-header {
    height: auto;
    min-height: 92px;
  }

  /*
    Only the tab strip may scroll horizontally on a narrow phone. This preserves
    complete labels without introducing horizontal overflow on the page.
  */
  .dsa-view-tabs {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* Mobile editor and learning panels remain bounded while providing useful study height. */
  .dsa-workspace-grid > .editor-panel,
  .dsa-learning-panel {
    height: 590px;
    min-height: 590px;
  }

  /* A slightly shorter source area keeps the view preview reachable on phones. */
  .dsa-workspace-grid .editor-shell {
    height: 492px;
  }

  /* A visible question shares the smaller mobile panel height with the source. */
  .dsa-workspace-grid > .editor-panel.has-selected-question .editor-shell {
    height: 404px;
  }

  /* Runtime cards use the phone width efficiently without touching panel edges. */
  .dsa-view-stage {
    padding: 16px;
  }

  /* Trace context becomes a simple two-column briefing instead of cramped facts. */
  .dsa-trace-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Story chronology sits above the selected observation on a narrow screen. */
  .dsa-story-grid {
    grid-template-columns: 1fr;
  }

  /* State counts remain compact while each full comparison card stays vertical. */
  .dsa-state-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Decision nodes retain the condition to result to destination reading order. */
  .dsa-decision-route {
    grid-template-columns: 1fr;
  }

  /* The same arrow now points down because the decision path is vertical. */
  .dsa-decision-connector {
    justify-self: center;
    transform: none;
  }

  /* Error meaning and the next experiment stack for comfortable phone reading. */
  .dsa-error-coaching-grid {
    grid-template-columns: 1fr;
  }

  /* Data context uses two readable columns before collapsing further on small phones. */
  .dsa-data-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Variable values receive a complete row instead of competing in narrow tiles. */
  .dsa-variable-dashboard {
    grid-template-columns: 1fr;
  }

  /* Watches keep rank and state visible while their value owns the middle width. */
  .dsa-watch-tile {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  /* Watch state moves below the value without changing its written meaning. */
  .dsa-watch-state {
    grid-column: 2;
    justify-self: start;
  }

  /* Structure orientation places the visible count below the reading guide. */
  .dsa-structure-orientation {
    grid-template-columns: 1fr;
  }

  /* The structure count aligns to the guide instead of occupying a separate column. */
  .dsa-structure-size {
    width: min(180px, 100%);
    justify-self: start;
  }

  /* Optional reference controls use two rows while preserving a full status message. */
  .dsa-reference-controls {
    grid-template-columns: auto minmax(0, 1fr);
  }

  /* Reference loading status spans the complete controls row. */
  .dsa-reference-status {
    grid-column: 1 / -1;
  }

  /* The optional graph remains useful without dominating the bounded phone view. */
  .dsa-reference-canvas {
    height: 330px;
    min-height: 330px;
  }

  /* Text reference paths use a natural top-to-bottom name to object sequence. */
  .dsa-reference-path {
    grid-template-columns: 1fr;
  }

  /* The same reference arrow points downward in the stacked reading path. */
  .dsa-reference-arrow {
    transform: rotate(90deg);
  }

  /* Mutation definitions and journeys stack in their semantic reading order. */
  .dsa-mutation-legend,
  .dsa-mutation-journey {
    grid-template-columns: 1fr;
  }

  /* Invariant numbers and rule text remain side by side until the smallest phones. */
  .dsa-invariant-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  /* Flow context uses two readable columns before collapsing on smaller phones. */
  .dsa-flow-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Graph controls use a second row so status text retains its full meaning. */
  .dsa-flow-path-toolbar {
    grid-template-columns: 1fr;
  }

  /* The optional graph remains useful without dominating the phone stage. */
  .dsa-flow-path-canvas {
    height: 330px;
    min-height: 330px;
  }

  /* Complexity evidence and reviewed context follow a clear top-to-bottom order. */
  .dsa-flow-complexity .dsa-flow-body {
    grid-template-columns: 1fr;
  }

  /* The unavailable reviewed card follows the observed evidence on phones. */
  .dsa-flow-complexity-panel.unavailable {
    grid-column: auto;
  }

  /* Labs context uses two columns before collapsing further on small phones. */
  .dsa-labs-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Input preparation appears before its ordered queue on a narrow screen. */
  .dsa-input-workspace {
    grid-template-columns: 1fr;
  }

  /* Related program choices retain complete metadata in one readable column. */
  .dsa-comparison-programs {
    grid-template-columns: 1fr;
  }

  /* Run A appears before Run B for a natural phone reading order. */
  .dsa-comparison-slots {
    grid-template-columns: 1fr;
  }

  /* Edge-case method steps form a compact two-column sequence on phones. */
  .dsa-edge-method-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Reviewed questions use the full phone width for prediction text. */
  .dsa-edge-card-list {
    grid-template-columns: 1fr;
  }

  /* Runtime cards use one readable column on a phone. */
  .dsa-change-grid,
  .dsa-variable-grid,
  .dsa-related-programs {
    grid-template-columns: 1fr;
  }

  /* Playback controls stack around a full-width timeline instead of compressing it. */
  .dsa-playback-panel {
    grid-template-columns: 1fr auto;
    gap: 18px 12px;
  }

  /* Buttons remain in the first row while the timeline receives a complete second row. */
  .dsa-playback-controls {
    grid-column: 1;
    grid-row: 1;
  }

  /* The DSA timeline never shares its width with controls on a narrow screen. */
  .dsa-progress-area {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Speed stays visible beside playback without compressing the slider. */
  .dsa-playback-panel .speed-control {
    grid-column: 2;
    grid-row: 1;
  }

  /* The read-only study frame uses the available phone width. */
  .dsa-comment-preview-shell {
    margin: 10px;
  }

  /* DSA program rows use the same compact mobile selection geometry. */
  .dsa-example-grid {
    display: flex;
  }

  .dsa-program-card {
    min-height: 184px;
  }
}

/* Adapts only the shared header when all named actions cannot fit beside the full brand on a narrow phone. */
@media (max-width: 470px) {
  /* Keeps the recognizable terminal mark while yielding space to explicit navigation labels. */
  .brand > span:last-child {
    display: none;
  }

  /* Very narrow screens give every Trace context fact a complete reading row. */
  .dsa-trace-context {
    grid-template-columns: 1fr;
  }

  /* Compact hero and body padding leaves more room for code and serialized values. */
  .dsa-trace-hero,
  .dsa-trace-body {
    padding: 16px;
  }

  /* Story change evidence stacks labels above values instead of squeezing them. */
  .dsa-story-change {
    grid-template-columns: 1fr;
  }

  /* Call summary facts stack so long function names never collide. */
  .dsa-call-metrics {
    grid-template-columns: 1fr;
  }

  /* Very narrow screens give every Data context fact a full row. */
  .dsa-data-context {
    grid-template-columns: 1fr;
  }

  /* Compact Data padding protects value width without removing hierarchy. */
  .dsa-data-hero,
  .dsa-data-body {
    padding: 16px;
  }

  /* Very narrow screens give every Flow fact a complete row. */
  .dsa-flow-context {
    grid-template-columns: 1fr;
  }

  /* Compact Flow padding protects source and table width. */
  .dsa-flow-hero,
  .dsa-flow-body {
    padding: 16px;
  }

  /* Graph controls stack so Fit and zoom never create page overflow. */
  .dsa-flow-path-controls {
    align-items: stretch;
    flex-direction: column;
  }

  /* Zoom keeps a usable slider even inside a 390-pixel viewport. */
  .dsa-flow-path-controls label {
    grid-template-columns: auto minmax(0, 1fr) 42px;
  }

  /* Observed metrics remain large enough to read in a single vertical column. */
  .dsa-flow-metric-grid,
  .dsa-flow-complexity-formulas {
    grid-template-columns: 1fr;
  }

  /* Event names move above their bars when horizontal room is limited. */
  .dsa-flow-event-bar {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  /* The bar owns the complete row beneath its event label. */
  .dsa-flow-event-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Very narrow screens give every Labs context fact a complete row. */
  .dsa-labs-context {
    grid-template-columns: 1fr;
  }

  /* Compact Labs padding protects input values and experiment questions. */
  .dsa-labs-hero,
  .dsa-labs-body {
    padding: 16px;
  }

  /* Comparison choices stack metadata above their explicit load state. */
  .dsa-comparison-programs button {
    grid-template-columns: 1fr;
  }

  /* Run metrics retain readable labels instead of becoming three thin columns. */
  .dsa-comparison-metrics {
    grid-template-columns: 1fr;
  }

  /* The full edge-case method becomes one top-to-bottom beginner workflow. */
  .dsa-edge-method-steps {
    grid-template-columns: 1fr;
  }

  /* Watch ranks become a smaller stable column beside long learner names. */
  .dsa-watch-tile {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 11px;
  }

  /* Reference zoom becomes a complete row below the Fit action. */
  .dsa-reference-controls {
    grid-template-columns: 1fr;
  }

  /* Fit and zoom both align to the available phone width. */
  .dsa-reference-controls .secondary-button,
  .dsa-reference-zoom {
    width: 100%;
  }

  /* The zoom range receives the remaining width between label and value. */
  .dsa-reference-zoom {
    grid-template-columns: auto minmax(0, 1fr) 44px;
  }

  /* Invariant cards stack their number above the reviewed statement. */
  .dsa-invariant-card {
    grid-template-columns: 1fr;
  }
}

/* Respects the learner's reduced-motion preference by minimizing decorative movement and transitions. */
@media (prefers-reduced-motion: reduce) {
  /* Creates or styles the generated visual part `*, *::before, *::after`. It contributes motion and interaction feedback without adding extra HTML. */
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}