/* V6.6: focused six-step engineering Debug workflow. */

html body[data-active-panel="debug-lab"] .debug-training-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px clamp(18px, 2.5vw, 40px) 46px !important;
}

.debug-engineering-workflow {
  --debug-surface: var(--v51-card, #fff);
  --debug-surface-soft: var(--v51-card-soft, #f7f9fc);
  --debug-border: var(--v51-border, #dbe4f0);
  --debug-text: var(--v51-text, #0f172a);
  --debug-muted: var(--v51-muted, #64748b);
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
  color: var(--debug-text) !important;
}

html[data-theme="dark"] .debug-engineering-workflow {
  --debug-surface: #111827;
  --debug-surface-soft: #0d1728;
  --debug-border: #26364d;
  --debug-text: #edf4ff;
  --debug-muted: #9fb0c8;
}

.debug-workflow-hero {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 24px 26px !important;
  color: #edf5ff !important;
  background:
    radial-gradient(circle at 86% 15%, rgba(37, 99, 235, 0.27), transparent 36%),
    linear-gradient(135deg, #0b1729, #102742) !important;
  border: 1px solid rgba(96, 165, 250, 0.25) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14) !important;
}

.debug-workflow-hero > div {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.debug-workflow-hero button[data-debug-workflow-back] {
  width: fit-content !important;
  padding: 0 !important;
  color: #93c5fd !important;
  background: none !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.debug-workflow-hero > div > span {
  margin-top: 8px !important;
  color: #60a5fa !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

.debug-workflow-hero h2 {
  margin: 0 !important;
  color: #f8fbff !important;
  font-size: clamp(25px, 3vw, 38px) !important;
  line-height: 1.15 !important;
}

.debug-workflow-hero p {
  max-width: 780px !important;
  margin: 0 !important;
  color: #b9c9df !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.debug-workflow-hero > aside {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.debug-workflow-hero > aside :is(span, strong) {
  padding: 7px 10px !important;
  color: #dbeafe !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.debug-workflow-hero > aside strong {
  color: #fff !important;
  background: #2563eb !important;
  border-color: #2563eb !important;
}

.debug-workflow-progress {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 4px !important;
}

.debug-workflow-progress i {
  flex: 1 1 auto !important;
  height: 6px !important;
  overflow: hidden !important;
  background: var(--debug-border) !important;
  border-radius: 999px !important;
}

.debug-workflow-progress i b {
  display: block !important;
  height: 100% !important;
  background: #2563eb !important;
  border-radius: inherit !important;
  transition: width 0.25s ease !important;
}

.debug-workflow-progress > span {
  flex: 0 0 auto !important;
  color: var(--debug-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.debug-workflow-layout {
  display: grid !important;
  grid-template-columns: 216px minmax(0, 1fr) 310px !important;
  align-items: start !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.debug-workflow-step-rail,
.debug-workflow-stage,
.debug-workflow-aside > section {
  background: var(--debug-surface) !important;
  border: 1px solid var(--debug-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

.debug-workflow-step-rail {
  position: sticky !important;
  top: 88px !important;
  display: grid !important;
  gap: 4px !important;
  padding: 10px !important;
}

.debug-workflow-step-rail > button:not(.debug-workflow-reset) {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 9px 10px !important;
  color: var(--debug-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  text-align: left !important;
  cursor: pointer !important;
}

.debug-workflow-step-rail > button.current {
  background: rgba(37, 99, 235, 0.09) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}

.debug-workflow-step-rail > button.done { color: #15803d !important; }
.debug-workflow-step-rail > button.locked { opacity: 0.48 !important; cursor: default !important; }

.debug-workflow-step-rail > button i {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  color: var(--debug-muted) !important;
  background: var(--debug-surface-soft) !important;
  border: 1px solid var(--debug-border) !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.debug-workflow-step-rail > button.current i { color: #fff !important; background: #2563eb !important; border-color: #2563eb !important; }
.debug-workflow-step-rail > button.done i { color: #fff !important; background: #22c55e !important; border-color: #22c55e !important; }
.debug-workflow-step-rail button > span { display: grid !important; gap: 3px !important; min-width: 0 !important; }
.debug-workflow-step-rail button strong { color: inherit !important; font-size: 12px !important; }
.debug-workflow-step-rail button em { color: var(--debug-muted) !important; font-size: 10px !important; font-style: normal !important; line-height: 1.35 !important; }

.debug-workflow-reset {
  margin-top: 5px !important;
  padding: 10px !important;
  color: var(--debug-muted) !important;
  background: transparent !important;
  border: 1px dashed var(--debug-border) !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.debug-workflow-stage {
  min-width: 0 !important;
  min-height: 600px !important;
  padding: clamp(20px, 2.5vw, 32px) !important;
}

.debug-workflow-step-head {
  display: grid !important;
  gap: 6px !important;
  margin-bottom: 22px !important;
}

.debug-workflow-step-head > span {
  color: #2563eb !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
}

.debug-workflow-step-head h3 {
  margin: 0 !important;
  color: var(--debug-text) !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
}

.debug-workflow-step-head p {
  margin: 0 !important;
  color: var(--debug-muted) !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}

.debug-workflow-phenomena {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.debug-workflow-phenomena article,
.debug-workflow-confirmations label,
.debug-workflow-hypotheses label,
.debug-workflow-tools label,
.debug-workflow-plan label,
.debug-workflow-measurements article,
.debug-workflow-root-causes label,
.debug-workflow-evidence-summary p,
.debug-workflow-regression-ready,
.debug-workflow-before-after article,
.debug-workflow-report-grid article {
  background: var(--debug-surface-soft) !important;
  border: 1px solid var(--debug-border) !important;
  border-radius: 12px !important;
}

.debug-workflow-phenomena article {
  position: relative !important;
  display: grid !important;
  gap: 5px !important;
  min-height: 116px !important;
  padding: 15px !important;
}

.debug-workflow-phenomena article > span { color: var(--debug-muted) !important; font-size: 10px !important; font-weight: 800 !important; }
.debug-workflow-phenomena article > strong { color: var(--debug-text) !important; font-size: 24px !important; }
.debug-workflow-phenomena article > em { width: fit-content !important; padding: 3px 7px !important; border-radius: 999px !important; font-size: 9px !important; font-style: normal !important; font-weight: 900 !important; }
.debug-workflow-phenomena article > em.danger { color: #b91c1c !important; background: rgba(239, 68, 68, 0.12) !important; }
.debug-workflow-phenomena article > em.warn { color: #b45309 !important; background: rgba(245, 158, 11, 0.13) !important; }
.debug-workflow-phenomena article > em.success { color: #15803d !important; background: rgba(34, 197, 94, 0.12) !important; }
.debug-workflow-phenomena article > p { margin: auto 0 0 !important; color: var(--debug-muted) !important; font-size: 10px !important; }

.debug-workflow-confirmations {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.debug-workflow-confirmations label {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 14px !important;
  cursor: pointer !important;
}

.debug-workflow-confirmations input,
.debug-workflow-hypotheses input,
.debug-workflow-tools input,
.debug-workflow-plan input,
.debug-workflow-root-causes input {
  width: 17px !important;
  height: 17px !important;
  margin: 1px 0 0 !important;
  accent-color: #2563eb !important;
}

.debug-workflow-confirmations label > span { display: grid !important; gap: 4px !important; }
.debug-workflow-confirmations strong { color: var(--debug-text) !important; font-size: 12px !important; }
.debug-workflow-confirmations em { color: var(--debug-muted) !important; font-size: 10px !important; font-style: normal !important; line-height: 1.45 !important; }

.debug-workflow-primary {
  width: 100% !important;
  min-height: 48px !important;
  margin-top: 20px !important;
}

.debug-workflow-primary:disabled,
.debug-workflow-stage button:disabled {
  opacity: 0.43 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.debug-workflow-hypotheses,
.debug-workflow-tools,
.debug-workflow-root-causes {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.debug-workflow-hypotheses label,
.debug-workflow-tools label,
.debug-workflow-root-causes label {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-height: 136px !important;
  padding: 15px !important;
  cursor: pointer !important;
}

.debug-workflow-hypotheses label.selected,
.debug-workflow-tools label.selected,
.debug-workflow-root-causes label.selected,
.debug-workflow-plan label.selected {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.45) !important;
}

.debug-workflow-hypotheses label > span,
.debug-workflow-root-causes label > span {
  width: fit-content !important;
  padding: 3px 7px !important;
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.1) !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
}

.debug-workflow-hypotheses label > strong,
.debug-workflow-tools label > strong,
.debug-workflow-root-causes label > strong { color: var(--debug-text) !important; font-size: 13px !important; line-height: 1.45 !important; }
.debug-workflow-hypotheses label > em,
.debug-workflow-tools label > em,
.debug-workflow-root-causes label > em { color: var(--debug-muted) !important; font-size: 10px !important; font-style: normal !important; line-height: 1.45 !important; }

.debug-workflow-textarea {
  display: grid !important;
  gap: 7px !important;
  margin-top: 14px !important;
}

.debug-workflow-textarea > span { color: var(--debug-text) !important; font-size: 11px !important; font-weight: 850 !important; }
.debug-workflow-textarea textarea,
.debug-workflow-measurements select {
  width: 100% !important;
  color: var(--debug-text) !important;
  background: var(--debug-surface-soft) !important;
  border: 1px solid var(--debug-border) !important;
  border-radius: 10px !important;
}
.debug-workflow-textarea textarea { min-height: 92px !important; padding: 12px !important; resize: vertical !important; }

.debug-workflow-tools label > i {
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  place-items: center !important;
  color: #fff !important;
  background: #2563eb !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.debug-workflow-plan { display: grid !important; gap: 7px !important; margin-top: 16px !important; }
.debug-workflow-plan > header { display: flex !important; justify-content: space-between !important; gap: 12px !important; color: var(--debug-text) !important; }
.debug-workflow-plan > header span { color: var(--debug-muted) !important; font-size: 10px !important; }
.debug-workflow-plan label { display: grid !important; grid-template-columns: 18px 26px minmax(0, 1fr) !important; align-items: center !important; gap: 8px !important; padding: 10px 12px !important; cursor: pointer !important; }
.debug-workflow-plan label > span { display: grid !important; width: 24px !important; height: 24px !important; place-items: center !important; color: var(--debug-muted) !important; background: var(--debug-surface) !important; border: 1px solid var(--debug-border) !important; border-radius: 7px !important; font-size: 9px !important; font-weight: 900 !important; }
.debug-workflow-plan label > div { display: grid !important; gap: 2px !important; }
.debug-workflow-plan strong { color: var(--debug-text) !important; font-size: 11px !important; }
.debug-workflow-plan em { color: var(--debug-muted) !important; font-size: 9px !important; font-style: normal !important; }

.debug-workflow-measurements { display: grid !important; gap: 9px !important; }
.debug-workflow-measurements article { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 16px !important; padding: 14px !important; }
.debug-workflow-measurements article > div { display: grid !important; gap: 4px !important; }
.debug-workflow-measurements article > div > span { color: #2563eb !important; font-size: 9px !important; font-weight: 900 !important; }
.debug-workflow-measurements article strong { color: var(--debug-text) !important; font-size: 13px !important; }
.debug-workflow-measurements article p { margin: 0 !important; color: var(--debug-muted) !important; font-size: 10px !important; line-height: 1.5 !important; }
.debug-workflow-measurements article > label { display: grid !important; gap: 4px !important; min-width: 140px !important; }
.debug-workflow-measurements article > label span { color: var(--debug-muted) !important; font-size: 9px !important; font-weight: 800 !important; }
.debug-workflow-measurements select { min-height: 36px !important; padding: 0 9px !important; font-size: 10px !important; }

.debug-workflow-gate-note { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; margin-top: 14px !important; padding: 11px 13px !important; color: #92400e !important; background: rgba(245, 158, 11, 0.11) !important; border: 1px solid rgba(245, 158, 11, 0.22) !important; border-radius: 10px !important; font-size: 10px !important; }

.debug-workflow-evidence-summary { display: grid !important; gap: 7px !important; margin-bottom: 14px !important; }
.debug-workflow-evidence-summary p { display: grid !important; grid-template-columns: 58px minmax(0, 1fr) !important; gap: 9px !important; margin: 0 !important; padding: 10px !important; color: var(--debug-muted) !important; font-size: 10px !important; line-height: 1.5 !important; }
.debug-workflow-evidence-summary p span { color: #2563eb !important; font-weight: 900 !important; }

.debug-workflow-regression-ready { display: grid !important; gap: 10px !important; padding: 22px !important; }
.debug-workflow-regression-ready > span { color: #7c3aed !important; font-size: 10px !important; font-weight: 900 !important; }
.debug-workflow-regression-ready > strong { color: var(--debug-text) !important; font-size: 18px !important; line-height: 1.5 !important; }
.debug-workflow-regression-ready > p { margin: 0 !important; color: var(--debug-muted) !important; font-size: 11px !important; line-height: 1.6 !important; }
.debug-workflow-regression-ready > button { width: fit-content !important; margin-top: 5px !important; }

.debug-workflow-before-after { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; align-items: center !important; gap: 12px !important; }
.debug-workflow-before-after article { display: grid !important; gap: 7px !important; padding: 16px !important; }
.debug-workflow-before-after article > span { color: var(--debug-muted) !important; font-size: 10px !important; font-weight: 900 !important; }
.debug-workflow-before-after article > strong { color: var(--debug-text) !important; font-size: 12px !important; }
.debug-workflow-before-after article.after { border-color: rgba(34, 197, 94, 0.34) !important; }
.debug-workflow-before-after article.after em { color: #16a34a !important; font-size: 11px !important; font-style: normal !important; font-weight: 900 !important; }
.debug-workflow-before-after > i { color: #2563eb !important; font-style: normal !important; font-weight: 900 !important; }
.debug-workflow-confirmations.regression { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

.debug-workflow-aside { position: sticky !important; top: 88px !important; display: grid !important; gap: 10px !important; min-width: 0 !important; }
.debug-workflow-aside > section { display: grid !important; gap: 8px !important; padding: 15px !important; }
.debug-workflow-mentor { border-color: rgba(124, 58, 237, 0.3) !important; background: linear-gradient(145deg, rgba(124, 58, 237, 0.08), var(--debug-surface)) !important; }
.debug-workflow-mentor > span { color: #7c3aed !important; font-size: 10px !important; font-weight: 900 !important; }
.debug-workflow-mentor > strong { color: var(--debug-text) !important; font-size: 14px !important; line-height: 1.5 !important; }
.debug-workflow-mentor > p { margin: 0 !important; color: var(--debug-muted) !important; font-size: 10px !important; line-height: 1.6 !important; }
.debug-workflow-mentor > button { width: fit-content !important; margin-top: 3px !important; }
.debug-workflow-context > span { color: var(--debug-muted) !important; font-size: 10px !important; font-weight: 900 !important; }
.debug-workflow-context p { margin: 0 !important; color: var(--debug-muted) !important; font-size: 10px !important; line-height: 1.5 !important; }
.debug-workflow-context b { color: var(--debug-text) !important; }
.debug-workflow-timeline > header { display: flex !important; justify-content: space-between !important; gap: 8px !important; }
.debug-workflow-timeline > header strong { color: var(--debug-text) !important; font-size: 12px !important; }
.debug-workflow-timeline > header span { display: grid !important; width: 22px !important; height: 22px !important; place-items: center !important; color: #2563eb !important; background: rgba(37, 99, 235, 0.1) !important; border-radius: 50% !important; font-size: 9px !important; font-weight: 900 !important; }
.debug-workflow-empty { display: grid !important; gap: 4px !important; padding: 12px !important; color: var(--debug-muted) !important; background: var(--debug-surface-soft) !important; border: 1px dashed var(--debug-border) !important; border-radius: 10px !important; }
.debug-workflow-empty strong { color: var(--debug-text) !important; font-size: 10px !important; }
.debug-workflow-empty span { font-size: 9px !important; line-height: 1.45 !important; }
.debug-workflow-timeline-item { display: grid !important; grid-template-columns: 22px minmax(0, 1fr) !important; gap: 8px !important; padding: 9px 0 !important; border-bottom: 1px solid var(--debug-border) !important; }
.debug-workflow-timeline-item:last-child { border-bottom: 0 !important; }
.debug-workflow-timeline-item > i { display: grid !important; width: 22px !important; height: 22px !important; place-items: center !important; color: #fff !important; background: #2563eb !important; border-radius: 7px !important; font-size: 8px !important; font-style: normal !important; font-weight: 900 !important; }
.debug-workflow-timeline-item > div { display: grid !important; gap: 2px !important; min-width: 0 !important; }
.debug-workflow-timeline-item time { color: var(--debug-muted) !important; font-size: 8px !important; }
.debug-workflow-timeline-item strong { color: var(--debug-text) !important; font-size: 10px !important; }
.debug-workflow-timeline-item p { margin: 0 !important; color: var(--debug-muted) !important; font-size: 9px !important; line-height: 1.45 !important; }
.debug-workflow-timeline-item > em { grid-column: 2 !important; width: fit-content !important; padding: 2px 6px !important; border-radius: 999px !important; font-size: 8px !important; font-style: normal !important; font-weight: 900 !important; }
.debug-workflow-timeline-item > em.support { color: #15803d !important; background: rgba(34, 197, 94, 0.12) !important; }
.debug-workflow-timeline-item > em.exclude { color: #b45309 !important; background: rgba(245, 158, 11, 0.12) !important; }
.debug-workflow-timeline-item > em.uncertain,
.debug-workflow-timeline-item > em.pending { color: var(--debug-muted) !important; background: var(--debug-surface-soft) !important; }

.debug-workflow-report { display: grid !important; gap: 18px !important; }
.debug-workflow-report > header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; }
.debug-workflow-report > header > div { display: grid !important; gap: 5px !important; }
.debug-workflow-report > header span { color: #2563eb !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: 0.12em !important; }
.debug-workflow-report > header h3 { margin: 0 !important; color: var(--debug-text) !important; font-size: 24px !important; }
.debug-workflow-report > header em { padding: 6px 9px !important; color: #15803d !important; background: rgba(34, 197, 94, 0.12) !important; border-radius: 999px !important; font-size: 9px !important; font-style: normal !important; font-weight: 900 !important; }
.debug-workflow-report-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.debug-workflow-report-grid article { display: grid !important; gap: 6px !important; min-height: 108px !important; padding: 15px !important; }
.debug-workflow-report-grid article.wide { grid-column: 1 / -1 !important; min-height: 0 !important; }
.debug-workflow-report-grid article.ai { border-color: rgba(124, 58, 237, 0.3) !important; background: rgba(124, 58, 237, 0.07) !important; }
.debug-workflow-report-grid article > span { color: var(--debug-muted) !important; font-size: 9px !important; font-weight: 900 !important; }
.debug-workflow-report-grid article > strong { color: var(--debug-text) !important; font-size: 13px !important; line-height: 1.55 !important; }
.debug-workflow-report-grid article > p { margin: 0 !important; color: var(--debug-muted) !important; font-size: 10px !important; line-height: 1.5 !important; }
.debug-workflow-report-actions { display: flex !important; justify-content: flex-end !important; gap: 10px !important; }

.engineering-debug-route {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(80px, 1fr)) !important;
  gap: 8px !important;
  max-width: 860px !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.engineering-debug-route li {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 8px !important;
  color: #b9c9df !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 9px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.engineering-debug-route li i {
  display: grid !important;
  width: 24px !important;
  height: 24px !important;
  place-items: center !important;
  color: #bfdbfe !important;
  background: rgba(37, 99, 235, 0.24) !important;
  border-radius: 7px !important;
  font-style: normal !important;
}

.engineering-debug-route li.current { color: #fff !important; border-color: rgba(96, 165, 250, 0.5) !important; }
.engineering-debug-route li.done i { color: #fff !important; background: #22c55e !important; }

@media (max-width: 1280px) {
  .debug-workflow-layout { grid-template-columns: 190px minmax(0, 1fr) !important; }
  .debug-workflow-aside { position: static !important; grid-column: 1 / -1 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  .debug-workflow-hero { align-items: flex-start !important; flex-direction: column !important; }
  .debug-workflow-hero > aside { justify-content: flex-start !important; }
  .debug-workflow-layout { grid-template-columns: 1fr !important; }
  .debug-workflow-step-rail { position: static !important; grid-template-columns: repeat(6, minmax(112px, 1fr)) !important; overflow-x: auto !important; }
  .debug-workflow-step-rail > button:not(.debug-workflow-reset) { min-width: 112px !important; }
  .debug-workflow-reset { display: none !important; }
  .debug-workflow-aside { grid-column: auto !important; grid-template-columns: 1fr !important; }
  .debug-workflow-phenomena,
  .debug-workflow-hypotheses,
  .debug-workflow-tools,
  .debug-workflow-root-causes,
  .debug-workflow-confirmations,
  .debug-workflow-confirmations.regression,
  .debug-workflow-report-grid { grid-template-columns: 1fr !important; }
  .debug-workflow-report-grid article.wide { grid-column: auto !important; }
  .debug-workflow-before-after { grid-template-columns: 1fr !important; }
  .debug-workflow-before-after > i { transform: rotate(90deg) !important; text-align: center !important; }
  .engineering-debug-route { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 600px) {
  html body[data-active-panel="debug-lab"] .debug-training-shell { padding: 12px 10px 28px !important; }
  .debug-workflow-stage { min-height: 0 !important; padding: 18px !important; }
  .debug-workflow-measurements article { grid-template-columns: 1fr !important; }
  .debug-workflow-measurements article > label { min-width: 0 !important; }
  .debug-workflow-report > header,
  .debug-workflow-report-actions { align-items: stretch !important; flex-direction: column !important; }
  .debug-workflow-report-actions > button { width: 100% !important; }
  .engineering-debug-route { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}