/**
 * QueryQuest Story Engine v2.0 — Stylesheet
 * 3-panel layout: Flow diagram | Main stage | Row tracker
 */

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── App shell ──────────────────────────────────────────── */
.qe-app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e0e0e0;
  overflow: visible;
  width: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* Scroll hint — appears on right edge of wide tables */
.qe-tbl [style*="overflow-x:auto"]::after {
  content: '';
  display: none; /* subtle — table scroll handles itself */
}

/* ── Top bar ────────────────────────────────────────────── */
.qe-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  gap: 12px;
  flex-wrap: wrap;
}
.qe-topbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.qe-lang-pill {
  background: #1e1e2e;
  color: #cba6f7;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 5px;
}
.qe-diff-pill {
  font-size: 11px; font-weight: 500;
  padding: 3px 9px; border-radius: 5px;
}
.qe-diff-beginner     { background: #E1F5EE; color: #085041; }
.qe-diff-intermediate { background: #FAEEDA; color: #633806; }
.qe-diff-advanced     { background: #FCEBEB; color: #A32D2D; }

.qe-lesson-title {
  font-size: 13px; font-weight: 500; color: #333;
}
.qe-progress-wrap { display: flex; align-items: center; gap: 8px; }
.qe-progress-track {
  width: 100px; height: 4px;
  background: #e8e8e8; border-radius: 4px; overflow: hidden;
}
.qe-progress-fill {
  height: 100%; background: #1D9E75; border-radius: 4px;
  transition: width 0.3s ease;
}
.qe-prog-label { font-size: 11px; color: #5C5C5C; white-space: nowrap; }

/* ── Question banner ────────────────────────────────────── */
.qe-qbanner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 18px;
  background: #E6F1FB; border-bottom: 1px solid #B5D4F4;
}
.qe-qlabel {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #185FA5;
  background: #B5D4F4; padding: 2px 7px; border-radius: 4px;
  white-space: nowrap; margin-top: 2px;
}
.qe-qtext { font-size: 13px; color: #0C447C; font-weight: 500; line-height: 1.5; }

/* ── 3-panel body: flow | main stage | concept/mistake panel ── */
.qe-body {
  display: grid;
  grid-template-columns: 170px 1fr 190px;
  min-height: 360px; /* just enough to look decent on short steps */
  overflow: visible;
}

/* ── LEFT: flow diagram ─────────────────────────────────── */
.qe-flow {
  background: #f7f7f7;
  border-right: 1px solid #f0f0f0;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  overflow-y: visible;
}
.qe-flow-title {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: #6B6B6B; margin-bottom: 12px; align-self: flex-start;
}

/* flow nodes */
.qe-flow-node {
  width: 136px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #fff;
  cursor: pointer;
  transition: all .18s;
  text-align: left;
}
.qe-flow-node:hover { border-color: #1D9E75; background: #f0faf6; }
.qe-fn-active  { border-color: #1D9E75 !important; background: #E1F5EE !important; }
.qe-fn-done    { opacity: .65; }
.qe-fn-error   { border-color: #F09595 !important; background: #FCEBEB !important; }

.qe-fn-label { font-size: 11px; font-weight: 500; color: #333; margin-bottom: 2px; }
.qe-fn-active .qe-fn-label { color: #085041; }
.qe-fn-error  .qe-fn-label { color: #A32D2D; }
.qe-fn-rows   { font-size: 10px; color: #5C5C5C; }
.qe-fn-active .qe-fn-rows  { color: #0F6E56; }

/* node type colors on left border */
.qe-flow-table   { border-left: 3px solid #378ADD; }
.qe-flow-join    { border-left: 3px solid #1D9E75; }
.qe-flow-filter  { border-left: 3px solid #EF9F27; }
.qe-flow-group   { border-left: 3px solid #8B5CF6; }
.qe-flow-agg     { border-left: 3px solid #8B5CF6; }
.qe-flow-result  { border-left: 3px solid #1D9E75; }
.qe-flow-error   { border-left: 3px solid #E24B4A; }
.qe-flow-default { border-left: 3px solid #ccc; }
.qe-flow-question { border-left: 3px solid #378ADD; }
.qe-flow-code    { border-left: 3px solid #EF9F27; }
.qe-flow-compare { border-left: 3px solid #1D9E75; }
.qe-flow-loop     { border-left: 3px solid #EF9F27; }
.qe-flow-function { border-left: 3px solid #378ADD; }
.qe-flow-variable { border-left: 3px solid #8B5CF6; }

/* connector between nodes */
.qe-flow-connector {
  width: 1px; min-height: 20px;
  background: #ddd;
  margin: 0 auto;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.qe-flow-count {
  position: absolute;
  left: 6px;
  font-size: 9px; color: #6B6B6B;
  white-space: nowrap;
}

/* ── MAIN: stage ────────────────────────────────────────── */
.qe-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.qe-stage {
  flex: 1;
  padding: 16px 20px;
  overflow-y: visible;
  overflow-x: hidden;
  min-width: 0;
}

/* Row tracker — hidden, replaced by inline row badges */
.qe-tracker { display: none; }

@keyframes qeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qe-stage-in { animation: qeIn .28s ease; }

/* step header */
.qe-step-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 10px;
}
.qe-step-n {
  width: 24px; height: 24px; border-radius: 50%;
  background: #198663; color: #fff;
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.qe-step-title { font-size: 14px; font-weight: 600; color: #1a1a1a; }

/* narration */
.qe-narration {
  border-left: 2.5px solid #1D9E75;
  border-radius: 0 7px 7px 0;
  background: #f7f7f7;
  padding: 8px 12px;
  font-size: 12.5px; color: #555; line-height: 1.6;
  margin-bottom: 12px;
}

/* ── Tables ─────────────────────────────────────────────── */
.qe-tables {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;        /* do NOT wrap — scroll instead */
  align-items: flex-start;
  margin-bottom: 12px;
  overflow-x: auto;         /* if tables overflow, scroll the row */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;      /* space for scrollbar */
}

/* When a show_tables step has 3+ tables, the 3rd+ table renders here:
   full width, no horizontal scroll needed, fully visible at once. */
.qe-tables-full {
  margin-top: -4px; /* tighten gap from the row above */
}
.qe-tables-full .qe-tbl {
  flex: 1 1 100%;
  max-width: 100%;
  min-width: 0;
}
.qe-tables-full .qe-tbl table { white-space: normal; } /* allow natural width, no forced scroll */

/* A lone table has nothing to sit beside it, so the 340px 3-up cap
   just leaves dead space at the panel's right edge (the Cheat Sheet
   result table). Let it fill the container instead. ::after is a
   pseudo-element and doesn't count as a child, so :only-child still
   matches correctly here. */
.qe-tables > .qe-tbl:only-child {
  flex: 1 1 100%;
  max-width: 100%;
  min-width: 0;
}
.qe-tables > .qe-tbl:only-child table { white-space: normal; }

/* ── Practice Problems additions ─────────────────────────── */
.qe-allproblems {
  border: 1px solid #e8e8e8; border-radius: 9px;
  margin-bottom: 12px; overflow: hidden;
}
.qe-allproblems-head {
  padding: 7px 12px; background: #f0f0f0; color: #333;
  font-size: 11px; font-weight: 600;
}
.qe-allproblems-list { margin: 0; padding: 8px 12px 10px 12px; list-style: none; counter-reset: none; }
.qe-allproblems-item {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid #f5f5f5;
}
.qe-allproblems-item:first-child { border-top: 0; }
.qe-allproblems-n {
  flex: 0 0 auto; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EEEDFE; color: #3C3489;
  border-radius: 5px; font-size: 11px; font-weight: 700;
}
.qe-allproblems-body { display: flex; flex-direction: column; min-width: 0; }
.qe-allproblems-title { font-size: 12.5px; font-weight: 600; color: #333; line-height: 1.4; }
.qe-allproblems-summary { font-size: 11.5px; color: #666; line-height: 1.5; margin-top: 1px; }

.qe-sampledata, .qe-expected { margin-top: 12px; }
.qe-sampledata-head, .qe-expected-head {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #6b6b6b; margin-bottom: 6px;
}
.qe-expected-head { color: #085041; }
.qe-sampledata-note, .qe-expected-note {
  font-size: 12px; color: #666; line-height: 1.55; margin-top: 6px;
}

/* visible cue when a table row can scroll — fading edge, impossible to miss */
.qe-tables {
  position: relative;
}
.qe-tables::after {
  content: '';
  position: sticky;
  right: 0;
  top: 0;
  width: 18px;
  height: 100%;
  flex-shrink: 0;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.9));
  pointer-events: none;
  margin-left: -18px;
}

/* Every table gets a scroll wrapper so it never squishes */
.qe-tbl {
  border: 1px solid #e8e8e8;
  border-radius: 9px;
  overflow: hidden;
}

/* The min/max width caps exist so SEVERAL tables fit side by side in a
   .qe-tables flex row — they are meaningless for a standalone table.
   _tResult, the cheat sheet and the practice recap all call _table()
   directly with no .qe-tables wrapper, so a global cap left them
   stopping at 340px with dead space to the right. */
.qe-tables > .qe-tbl {
  flex-shrink: 0;            /* NEVER shrink — maintain min readable width */
  min-width: 200px;          /* enough for 3-4 columns to be readable */
  max-width: 340px;          /* cap width so 3 tables fit reasonably */
}

/* The actual table scrolls inside the wrapper */
.qe-tbl-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.qe-tbl-head {
  padding: 7px 12px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}

/* table color themes */
.qe-tbl-default .qe-tbl-head { background: #f0f0f0; color: #333; }
.qe-tbl-blue    .qe-tbl-head { background: #E6F1FB; color: #0C447C; }
.qe-tbl-teal    .qe-tbl-head { background: #E1F5EE; color: #085041; }
.qe-tbl-amber   .qe-tbl-head { background: #FAEEDA; color: #633806; }
.qe-tbl-purple  .qe-tbl-head { background: #EEEDFE; color: #3C3489; }
.qe-tbl-result  .qe-tbl-head { background: #198663; color: #fff; }
.qe-tbl-error   .qe-tbl-head { background: #FCEBEB; color: #A32D2D; }
.qe-tbl-gray    .qe-tbl-head { background: #f0f0f0; color: #666; }

/* The actual <table> element — never wraps, always readable */
.qe-tbl table {
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;  /* KEY: cells stay on one line, no wrapping */
  width: 100%;
}
.qe-tbl th {
  background: #fafafa;
  padding: 5px 10px;
  text-align: left;
  font-size: 11px; font-weight: 600; color: #666;
  border-top: 1px solid #f0f0f0;
  white-space: nowrap;
}
.qe-tbl td {
  padding: 5px 10px;
  border-top: 1px solid #f5f5f5;
  color: #1a1a1a;
  white-space: nowrap; /* cells never wrap — content stays readable */
}
.qe-tbl tr:hover td { background: #fafafa; }

.qe-th-hl { background: #FAEEDA !important; color: #412402 !important; }
.qe-td-hl { background: #FFF3CC !important; color: #633806 !important; font-weight: 600; }

@keyframes qeTrIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.qe-tr-in  { animation: qeTrIn .35s ease both; }
.qe-tr-hl td { background: #E1F5EE !important; color: #085041 !important; font-weight: 500; }
.qe-tr-gone td {
  background: #FCEBEB !important; color: #A32D2D !important;
  text-decoration: line-through; opacity: .7;
}

/* ── Question breakdown ─────────────────────────────────── */
.qe-needs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px; margin-bottom: 10px;
}
.qe-need {
  border-radius: 10px; padding: 11px 10px; text-align: center;
  animation: qeIn .35s ease both;
}
.qe-need-blue   { background: #E6F1FB; }
.qe-need-teal   { background: #E1F5EE; }
.qe-need-amber  { background: #FAEEDA; }
.qe-need-purple { background: #EEEDFE; }
.qe-need-icon   { font-size: 20px; margin-bottom: 5px; }
.qe-need-label  { font-size: 11.5px; font-weight: 600; margin-bottom: 3px; }
.qe-need-from   { font-size: 10px; line-height: 1.4; }
.qe-need-blue   .qe-need-label { color: #0C447C; }
.qe-need-blue   .qe-need-from  { color: #185FA5; }
.qe-need-teal   .qe-need-label { color: #085041; }
.qe-need-teal   .qe-need-from  { color: #0F6E56; }
.qe-need-amber  .qe-need-label { color: #633806; }
.qe-need-amber  .qe-need-from  { color: #854F0B; }
.qe-need-purple .qe-need-label { color: #3C3489; }
.qe-need-purple .qe-need-from  { color: #534AB7; }

.qe-note {
  background: #f7f7f7; border-radius: 8px;
  padding: 8px 12px; font-size: 12px; color: #555; line-height: 1.6;
}

/* ── Produces row ───────────────────────────────────────── */
.qe-produces-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 6px 0 8px;
}
.qe-produces-arrow { font-size: 11px; color: #5C5C5C; }
.qe-prod-pill {
  background: #E1F5EE; color: #085041;
  border: 1px solid #5DCAA5;
  border-radius: 20px; padding: 3px 12px;
  font-size: 12px; font-weight: 600;
}

/* ── Code block ─────────────────────────────────────────── */
.qe-code {
  background: #1e1e2e; border-radius: 9px;
  padding: 12px 14px; margin-bottom: 10px;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 12px; line-height: 1.9; overflow-x: auto;
}
.qe-cl { display: block; color: #cdd6f4; padding: 1px 5px; border-radius: 3px; }
.qe-cl-active { background: rgba(250,199,117,.15); border-left: 2px solid #EF9F27; padding-left: 9px; }
.qe-cl-error  { background: rgba(234,75,74,.15);   border-left: 2px solid #E24B4A; padding-left: 9px; }
.qe-cl-fixed  { background: rgba(29,158,117,.15);  border-left: 2px solid #1D9E75; padding-left: 9px; }
.qe-kkw { color: #cba6f7; }
.qe-kfn { color: #89dceb; }
.qe-kst { color: #a6e3a1; }
.qe-kcm { color: #585b70; font-style: italic; }

/* ── Line explanations ──────────────────────────────────── */
.qe-explains { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.qe-ex {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 6px 10px; border-radius: 7px; font-size: 12px;
}
.qe-ex-good    { background: #E1F5EE; }
.qe-ex-warn    { background: #FAEEDA; }
.qe-ex-error   { background: #FCEBEB; }
.qe-ex-neutral { background: #f5f5f5; }
.qe-ex-code {
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 10.5px;
  background: rgba(0,0,0,.07); padding: 1px 6px; border-radius: 3px;
  white-space: nowrap; flex-shrink: 0;
}
.qe-ex-desc { line-height: 1.4; }
.qe-ex-good    .qe-ex-desc { color: #085041; }
.qe-ex-warn    .qe-ex-desc { color: #633806; }
.qe-ex-error   .qe-ex-desc { color: #A32D2D; }
.qe-ex-neutral .qe-ex-desc { color: #555; }

/* ── JOIN ───────────────────────────────────────────────── */
.qe-join-top {
  display: flex; gap: 6px; align-items: flex-start; margin-bottom: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.qe-join-src { flex: 0 0 auto; min-width: 220px; } /* never shrink, never crop */
.qe-join-conn {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding-top: 26px; min-width: 62px; flex-shrink: 0;
}
.qe-join-type {
  font-size: 9px; font-weight: 700; color: #198663;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}
.qe-join-svg { width: 56px; height: 28px; }
@keyframes qeConnPulse { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
.qe-join-line { animation: qeConnPulse .8s linear infinite; }
.qe-join-on {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 9px; color: #198663; margin-top: 3px; text-align: center;
}
.qe-join-result-label {
  font-size: 11.5px; color: #666; text-align: center; padding: 5px 0 3px;
}
.qe-join-note {
  background: #FAEEDA; border: 1px solid #FAC775;
  border-radius: 7px; padding: 7px 10px;
  font-size: 11.5px; color: #633806; margin-top: 6px;
}

/* row box (rows in/out summary) */
.qe-rowbox {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #f7f7f7; border: 1px solid #e8e8e8;
  border-radius: 7px; padding: 6px 10px;
  font-size: 11.5px; margin: 6px 0;
}
.qe-rowbox-err { background: #FCEBEB; border-color: #F09595; }
.qe-rb-in   { color: #085041; font-weight: 600; }
.qe-rb-sep  { color: #767676; }
.qe-rb-lost { color: #A32D2D; font-weight: 600; }
.qe-rb-out  { color: #085041; font-weight: 600; }

/* ── Aggregate ──────────────────────────────────────────── */
.qe-agg {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.qe-agg-lbl {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #6B6B6B; margin-bottom: 4px;
}
.qe-agg-lbl-after { color: #198663; }
.qe-agg-mid { text-align: center; }
.qe-agg-fn {
  background: #1e1e2e; color: #89dceb;
  font-family: 'SF Mono','Fira Code', monospace; font-size: 11px;
  padding: 3px 8px; border-radius: 5px; display: inline-block; margin-bottom: 3px;
}
.qe-agg-by {
  background: #1e1e2e; color: #cba6f7;
  font-family: 'SF Mono','Fira Code', monospace; font-size: 10px;
  padding: 2px 8px; border-radius: 5px; display: inline-block;
}
/* Two-sided concept comparison ({before:{label,desc}} shape) — the
   description line under each side's label. */
.qe-compare-desc {
  font-size: 12px; color: #4A4A4A; line-height: 1.6; padding: 6px 12px;
}
/* Deliberately-empty aggregate pane, e.g. "no tables exist yet". */
.qe-agg-empty {
  font-size: 11.5px; color: #6B6B6B; font-style: italic;
  padding: 8px 4px; text-align: center;
}
/* ── Column-set view (highlight_columns with a flat column list) ── */
.qe-colset {
  background: #fff; border: 1.5px solid #e5e5ea; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px;
}
.qe-colset-head {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #6B6B6B; margin-bottom: 10px;
}
.qe-colchips { display: flex; flex-wrap: wrap; gap: 8px; }
.qe-colchip {
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px;
  padding: 6px 11px; border-radius: 7px;
  background: #f4f4f6; border: 1.5px solid #e5e5ea; color: #3A3A3A;
}
.qe-colchip-on {
  background: #E8F6F0; border-color: #198663; color: #12654A; font-weight: 600;
}
.qe-colscan {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0f0f0;
  font-size: 12px; color: #5C5C5C;
}
.qe-colscan-n { font-weight: 700; color: #3A3A3A; font-variant-numeric: tabular-nums; }
.qe-colscan-out { color: #12654A; }
.qe-colscan-arr { margin: 0 8px; color: #6B6B6B; }

/* ── Row-flow strip for error_explain steps ── */
.qe-rowflow {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: #fff; border: 1.5px solid #e5e5ea; border-radius: 10px;
  padding: 16px; margin-bottom: 12px;
}
.qe-rowflow-cell { text-align: center; min-width: 92px; }
.qe-rowflow-n {
  font-size: 22px; font-weight: 700; color: #3A3A3A;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.qe-rowflow-l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: #6B6B6B; margin-top: 3px;
}
.qe-rowflow-out .qe-rowflow-n { color: #12654A; }
.qe-rowflow-op-none {
  color: #5C5C5C !important; background: #f4f4f6 !important; font-size: 15px !important;
}
.qe-rowflow-op {
  font-size: 12px; font-weight: 600; color: #C6342F;
  background: #FDECEC; border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
.qe-agg-arr { font-size: 18px; color: #198663; margin-top: 5px; }
.qe-agg-rule {
  background: #f0faf6; border: 1px solid #5DCAA5;
  border-radius: 7px; padding: 8px 12px;
  font-size: 12px; color: #085041; line-height: 1.6;
}

/* ── Result & learned ───────────────────────────────────── */
.qe-ok-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #E1F5EE; border: 1px solid #5DCAA5; color: #085041;
  border-radius: 7px; padding: 5px 11px;
  font-size: 12px; font-weight: 600; margin-bottom: 10px;
}
.qe-learned {
  background: #fafafa; border: 1px solid #f0f0f0;
  border-radius: 9px; padding: 10px 12px; margin-top: 10px;
}
.qe-learned-h {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #6B6B6B; margin-bottom: 7px;
}
.qe-learned-row {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12px; color: #333; padding: 4px 0;
  border-bottom: 1px solid #f0f0f0; line-height: 1.5;
}
.qe-learned-row:last-child { border: none; }
.qe-lnum {
  width: 18px; height: 18px; border-radius: 50%;
  background: #E1F5EE; color: #085041;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}

/* ── Error explain ──────────────────────────────────────── */
.qe-err-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #FCEBEB; border: 1px solid #F09595; color: #A32D2D;
  border-radius: 7px; padding: 5px 11px;
  font-size: 12px; font-weight: 600; margin-bottom: 8px;
}
.qe-err-label { font-size: 11.5px; font-weight: 600; color: #666; margin-bottom: 5px; }
.qe-err-explain {
  background: #FAEEDA; border: 1px solid #FAC775;
  border-radius: 7px; padding: 9px 12px;
  font-size: 12px; color: #633806; line-height: 1.6; margin-top: 6px;
}

/* ── Compare (LEFT vs INNER JOIN) ───────────────────────── */
.qe-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.qe-compare-side { border-radius: 10px; overflow: hidden; border: 1px solid #e0e0e0; }
.qe-compare-label {
  padding: 7px 12px; font-size: 11.5px; font-weight: 700;
}
.qe-compare-green .qe-compare-label { background: #E1F5EE; color: #085041; }
.qe-compare-red   .qe-compare-label { background: #FCEBEB; color: #A32D2D; }
.qe-compare-blue  .qe-compare-label { background: #E6F1FB; color: #0C447C; }
.qe-compare-amber .qe-compare-label { background: #FAEEDA; color: #633806; }
.qe-compare-code {
  background: #1e1e2e; padding: 6px 12px;
  font-family: 'SF Mono','Fira Code', monospace;
  font-size: 11px; color: #cba6f7;
}
.qe-compare-verdict {
  padding: 6px 12px; font-size: 11.5px; font-weight: 600;
}
.qe-cv-good { background: #E1F5EE; color: #085041; }
.qe-cv-bad  { background: #FCEBEB; color: #A32D2D; }
.qe-cv-info { background: #FAEEDA; color: #633806; }

/* ── Variable state panel (Python) ────────────────────── */
.qe-vars-head {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #6B6B6B; margin-bottom: 8px;
}
.qe-vars-empty { font-size: 11.5px; color: #767676; font-style: italic; }
.qe-vars {
  background: #fafafa; border: 1px solid #f0f0f0; border-radius: 9px;
  padding: 10px 12px; margin-bottom: 10px;
}
.qe-var-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 8px; border-radius: 6px;
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px;
  transition: background .3s;
}
.qe-var-changed {
  background: #E1F5EE;
  animation: qeVarPulse .6s ease;
}
@keyframes qeVarPulse {
  0%   { background: #9FE1CB; }
  100% { background: #E1F5EE; }
}
.qe-var-name  { color: #3078C0; font-weight: 600; min-width: 60px; }
.qe-var-eq    { color: #767676; }
.qe-var-value { color: #1a1a1a; font-weight: 600; flex: 1; }
.qe-var-type  {
  font-size: 9.5px; color: #666666; background: #eee;
  padding: 1px 6px; border-radius: 4px; font-family: -apple-system, sans-serif;
}

/* ── Call stack visualizer (Python) ───────────────────── */
.qe-stack {
  background: #fafafa; border: 1px solid #f0f0f0; border-radius: 9px;
  padding: 10px 12px; margin-bottom: 10px;
}
.qe-stack-frame {
  background: #fff; border: 1px solid #e8e8e8; border-radius: 7px;
  padding: 8px 10px; margin-bottom: 6px;
  animation: qeIn .25s ease both;
}
.qe-stack-frame:last-child { margin-bottom: 0; }
.qe-stack-active { border-color: #1D9E75; background: #f0faf6; }
.qe-stack-frame-head { display: flex; align-items: center; gap: 7px; }
.qe-stack-top {
  font-size: 9px; font-weight: 700; color: #198663;
  background: #E1F5EE; padding: 1px 6px; border-radius: 4px;
}
.qe-stack-frame-name {
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px;
  font-weight: 600; color: #1a1a1a;
}
.qe-stack-frame-vars {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px;
}
.qe-stack-var {
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 10.5px;
  color: #555; background: #f4f4f6; padding: 2px 7px; border-radius: 4px;
}

/* ── Loop iteration indicator (Python) ────────────────── */
.qe-loop-current {
  background: #E1F5EE; border: 1px solid #5DCAA5; border-radius: 9px;
  padding: 12px 14px; margin-bottom: 10px; text-align: center;
}
.qe-loop-current-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #0F6E56; margin-bottom: 4px;
}
.qe-loop-current-val {
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 16px;
  font-weight: 700; color: #085041;
}
.qe-loop-hist {
  background: #fafafa; border: 1px solid #f0f0f0; border-radius: 9px;
  padding: 10px 12px;
}
.qe-loop-hist-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0; border-bottom: 1px solid #f0f0f0;
  font-size: 11.5px;
}
.qe-loop-hist-row:last-child { border: none; }
.qe-loop-hist-i {
  width: 20px; height: 20px; border-radius: 50%;
  background: #eee; color: #5C5C5C; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.qe-loop-hist-v {
  font-family: 'SF Mono', 'Fira Code', monospace; color: #333; font-weight: 600;
}
.qe-loop-hist-r { color: #5C5C5C; font-style: italic; }

/* ── Insight bar ────────────────────────────────────────── */
.qe-insight {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 16px;
  background: #FAEEDA; border-top: 1px solid #FAC775;
  font-size: 12px; color: #633806; line-height: 1.6;
}

/* ── Nav bar ────────────────────────────────────────────── */
.qe-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: #fafafa; border-top: 1px solid #f0f0f0;
}
.qe-dots { display: flex; gap: 5px; }
.qe-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ddd; border: none; cursor: pointer; padding: 0;
  transition: all .2s;
}
.qe-dot-a { width: 18px; border-radius: 3px; background: #1D9E75; }
.qe-dot-d { background: #9FE1CB; }
.qe-btn {
  padding: 7px 16px; border-radius: 7px;
  border: 1px solid #ddd; background: #fff;
  color: #555; font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all .18s;
}
.qe-btn:hover:not(:disabled) { background: #f5f5f5; }
.qe-btn:disabled { opacity: .3; cursor: default; }
.qe-btn-next { background: #E1F5EE; border-color: #5DCAA5; color: #085041; }
.qe-btn-next:hover:not(:disabled) { background: #9FE1CB; }
.qe-btn-finish { background: #198663 !important; border-color: #198663 !important; color: #fff !important; }


/* ── RIGHT: concept card + mistake detector ─────────────── */
.qe-tracker { display: none; } /* old tracker — fully removed */

.qe-concept {
  border-left: 1px solid #f0f0f0;
  padding: 14px 11px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: visible;
}
.qe-concept-title {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: #6B6B6B; margin-bottom: 10px;
}
.qe-concept-divider {
  height: 1px; background: #ebebeb;
  flex-shrink: 0; margin: 10px 0;
}
.qe-concept-sub {
  font-size: 9px; font-weight: 700; color: #6B6B6B;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 5px;
}
.qe-concept-rule {
  background: #E6F1FB; border-radius: 7px; padding: 9px 10px;
  font-size: 11px; color: #0C447C; line-height: 1.6;
}
.qe-concept-mistake {
  background: #FCEBEB; border-radius: 7px; padding: 9px 10px;
  font-size: 11px; color: #A32D2D; line-height: 1.6;
}
.qe-concept-syntax {
  background: #1e1e2e; border-radius: 7px; padding: 9px 10px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px; color: #cba6f7; line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
/* error step — mistake detector mode */
.qe-mistake-bug {
  background: #FCEBEB; border-radius: 7px; padding: 9px 10px;
}
.qe-mistake-bug-title {
  font-size: 10px; font-weight: 700; color: #A32D2D; margin-bottom: 4px;
}
.qe-mistake-bug-body { font-size: 11px; color: #A32D2D; line-height: 1.55; }
.qe-mistake-flow {
  background: #fff; border: 1px solid #f0f0f0; border-radius: 7px;
  padding: 9px 10px; font-size: 10.5px; color: #555; line-height: 2;
}
.qe-mistake-flow-lost { color: #A32D2D; font-weight: 600; }
.qe-mistake-fix {
  background: #E1F5EE; border-radius: 7px; padding: 9px 10px;
  font-size: 11px; color: #085041; line-height: 1.6;
}


/* The Test node must look like every other node until it is REACHED.
   These rules previously forced a green active-looking border with
   !important, so Test appeared highlighted from step 1 — overriding the
   qe-fn-active / qe-fn-done state the engine was correctly computing.
   Styling now applies only in those states. */
.qe-flow-test.qe-fn-active{border-color:#198663;background:#F2FBF7}
.qe-flow-test.qe-fn-active .qe-flow-label{color:#12654A;font-weight:650}
.qe-flow-test.qe-fn-done .qe-flow-label{color:#12654A}
.qe-quiz-data{border:1.5px solid #e5e5ea;border-radius:11px;padding:13px 15px;margin-bottom:15px;background:#fafafa}
.qe-quiz-data-head{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5C5C5C;margin-bottom:9px}
.qe-quiz-type{float:right;font-size:9px;font-weight:700;letter-spacing:.05em;color:#5C5C5C;
  background:#f2f2f4;border-radius:4px;padding:2px 7px;text-transform:none}
.qe-quiz-opts.tf{flex-direction:row;gap:10px}
.qe-quiz-opts.tf .qe-quiz-opt{flex:1}
.qe-quiz-input{
  width:100%;box-sizing:border-box;font-family:'SF Mono','Fira Code',monospace;
  font-size:13px;color:#1d1d1f;background:#fff;border:1.5px solid #e5e5ea;
  border-radius:9px;padding:11px 13px;min-height:44px;resize:vertical;line-height:1.55;
}
.qe-quiz-input:focus{outline:none;border-color:#198663;box-shadow:0 0 0 3px rgba(25,134,99,.13)}
.qe-quiz-input.correct{border-color:#198663;background:#F3FBF7}
.qe-quiz-input.wrong{border-color:#C6342F;background:#FEF7F7}
.qe-quiz-answer{margin-top:8px;font-size:12.5px;color:#5C5C5C}
.qe-quiz-answer code{font-family:'SF Mono','Fira Code',monospace;background:#f2f2f4;
  padding:2px 7px;border-radius:4px;color:#12654A}
/* ── POST-STORY QUIZ ───────────────────────────────────────────── */
.qe-quiz{max-width:720px;margin:0 auto;padding:4px 0 12px}
.qe-quiz-head{margin-bottom:18px}
.qe-quiz-badge{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.07em;
  color:#fff;background:#198663;border-radius:4px;padding:3px 8px}
.qe-quiz-sub{display:block;font-size:12.5px;color:#5C5C5C;margin-top:7px}
.qe-quiz-q{border:1.5px solid #e5e5ea;border-radius:11px;padding:15px 16px;margin-bottom:13px;background:#fff}
.qe-quiz-q.q-right{border-color:#198663;background:#F5FBF8}
.qe-quiz-q.q-wrong{border-color:#C6342F;background:#FEF7F7}
.qe-quiz-num{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#6B6B6B;margin-bottom:7px}
.qe-quiz-prompt{font-size:14px;font-weight:600;color:#1d1d1f;line-height:1.5;margin-bottom:11px}
.qe-quiz-opts{display:flex;flex-direction:column;gap:8px}
.qe-quiz-opt{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  font:inherit;font-size:13.5px;color:#3A3A3A;cursor:pointer;background:#fff;
  border:1.5px solid #e5e5ea;border-radius:9px;padding:11px 13px;min-height:44px;
  transition:border-color .15s ease,background .15s ease}
.qe-quiz-opt:hover:not(:disabled){border-color:#198663;background:#F7FBF9}
.qe-quiz-opt.picked{border-color:#198663;background:#EAF6F1}
.qe-quiz-opt.correct{border-color:#198663;background:#E4F5EC;color:#12654A;font-weight:600}
.qe-quiz-opt.wrong{border-color:#C6342F;background:#FCEBEB;color:#9E2A26}
.qe-quiz-opt:disabled{cursor:default}
.qe-quiz-letter{flex:0 0 auto;width:22px;height:22px;border-radius:5px;background:#f2f2f4;
  font-size:11px;font-weight:700;color:#5C5C5C;display:flex;align-items:center;justify-content:center}
.qe-quiz-opt.correct .qe-quiz-letter{background:#198663;color:#fff}
.qe-quiz-opt.wrong .qe-quiz-letter{background:#C6342F;color:#fff}
.qe-quiz-optext{flex:1 1 auto;line-height:1.45}
.qe-quiz-mark{flex:0 0 auto;font-weight:700}
.qe-quiz-explain{margin-top:11px;padding:10px 12px;border-radius:8px;background:#FFF8E8;
  border-left:3px solid #EF9F27;font-size:12.5px;color:#5A4A22;line-height:1.6}
.qe-quiz-result{margin-top:16px;padding:14px 16px;border-radius:10px;font-size:13.5px;
  font-weight:600;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.qe-quiz-result.ok{background:#E4F5EC;color:#12654A}
.qe-quiz-result.no{background:#FCEBEB;color:#9E2A26}
.qe-quiz-retry{margin-left:auto}
@media (max-width:640px){
  .qe-quiz-q{padding:13px}
  .qe-quiz-prompt{font-size:13.5px}
  .qe-quiz-opt{font-size:13px;padding:10px 11px}
  .qe-quiz-retry{margin-left:0;width:100%}
}

/* ── Finish screen ──────────────────────────────────────── */
.qe-finish {
  text-align: center; padding: 28px 16px; animation: qeIn .3s ease;
}
.qe-finish-check {
  width: 50px; height: 50px; border-radius: 50%;
  background: #198663; color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.qe-finish-h   { font-size: 17px; font-weight: 700; color: #1a1a1a; margin-bottom: 5px; }
.qe-finish-sub { font-size: 12.5px; color: #666; margin-bottom: 18px; }

/* ── Responsive ─────────────────────────────────────────── */
/* ── Tablet: drop to two columns, keep the concept panel ── */
@media (max-width: 900px) {
  .qe-body { grid-template-columns: 1fr 190px; }
  /* Query Flow becomes a horizontal strip above the stage rather than a
     left rail — it still shows where you are in the query. */
  .qe-flow {
    grid-row: 1; grid-column: 1 / -1;
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    /* Left padding MUST match .qe-qbanner (18px) or the strip visibly
       fails to line up with the question above it — the reported bug.
       The base rule's 10px was inherited from the vertical rail. */
    padding: 10px 18px;
    /* A right border belongs to a left-hand rail, not a top strip. */
    border-right: 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0;
  }
  .qe-flow::-webkit-scrollbar { display: none; }
  /* In row mode the heading is a label beside the nodes, not above
     them — the 12px bottom margin pushed it out of vertical centre. */
  .qe-flow-title {
    margin-bottom: 0; align-self: center; flex: 0 0 auto;
    max-width: 52px; line-height: 1.25;
  }
  .qe-flow-node { flex: 0 0 auto; min-width: 116px; }
  /* Keeps the last node clear of the right edge while scrolling. */
  .qe-flow > :last-child { margin-right: 4px; }
  /* The vertical connectors between stacked nodes make no sense once
     the rail is horizontal. */
  .qe-flow-connector, .qe-flow-link { display: none; }
}

/* ── Phone: single column, everything stacked and still present ── */
@media (max-width: 640px) {
  .qe-body { grid-template-columns: 1fr; }
  .qe-agg  { grid-template-columns: 1fr; }
  .qe-compare { grid-template-columns: 1fr; }
  .qe-join-top { flex-direction: column; }
  .qe-rowflow { gap: 10px; padding: 12px; }

  /* These used to be display:none, which silently removed KEY CONCEPT,
     COMMON MISTAKE, SYNTAX and the Mistake Detector from every lesson on
     a phone — the highest-value teaching content on the page. They now
     move below the stage instead of disappearing. */
  .qe-concept {
    grid-row: auto; grid-column: 1 / -1;
    border-left: 0; border-top: 1px solid #ececf0;
    padding-left: 0; padding-top: 14px; margin-top: 12px;
  }
  .qe-stage { min-height: 0; }
  .qe-tbl table { font-size: 12px; }
  .qe-tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .qe-lesson-title { font-size: 14px; }
  /* Banner and flow strip stay aligned at the tighter phone padding. */
  .qe-qbanner { padding: 10px 14px; }
  .qe-flow { padding: 10px 14px; }
  .qe-qtext { font-size: 13.5px; }
  .qe-step-title { font-size: 15px; }
  .qe-narration { font-size: 13.5px; }
  /* 44px tap targets for the step controls. */
  .qe-btn { min-height: 44px; padding: 11px 18px; font-size: 14px; }
  .qe-nav-row { gap: 10px; }
  .qe-colchips { gap: 6px; }
  .qe-colchip { font-size: 11.5px; padding: 5px 9px; }
}

@media (max-width: 640px) {
  /* The code-line explanation put a nowrap code chip beside its text in
     a flex ROW, so on a phone the chip kept its full width and the
     explanation was crushed into a one-word-per-line column. Stacking
     gives the prose the full width. */
  .qe-ex { flex-direction: column; gap: 5px; }
  .qe-ex-code { white-space: normal; word-break: break-word; max-width: 100%; }
  .qe-concept-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Long unbroken strings — table names, SQL fragments, file paths —
     were running past the rounded boxes that contain them. Nothing in
     a lesson body should ever print outside its own card. */
  .qe-stage, .qe-stage * { min-width: 0; }
  .qe-err-label, .qe-err-badge, .qe-result-note, .qe-insight,
  .qe-narration, .qe-concept-box, .qe-ex, .qe-ex-code,
  .qe-tbl td, .qe-tbl th, .qe-colchip, .qe-rowflow-l {
    overflow-wrap: anywhere; word-break: break-word;
  }
  .qe-tbl { max-width: 100%; }
}

@media (max-width: 480px) {
  /* Step controls were sized for a desktop rail and dominated the
     screen once everything else stacked. */
  .qe-btn { min-height: 40px; padding: 8px 12px; font-size: 13px; }
  .qe-btn-primary { min-height: 40px; }
  .qe-nav-row { gap: 8px; align-items: center; }
  .qe-dots { gap: 4px; }
  .qe-dot { width: 5px; height: 5px; }
  .qe-dot-a { width: 14px; }
  .qe-stage { padding: 12px 12px 4px; }
  .qe-step-title { font-size: 14.5px; }
  .qe-narration { font-size: 13px; line-height: 1.6; }
  .qe-concept { font-size: 13px; }
  .qe-rowflow-n { font-size: 19px; }
  .qe-colset, .qe-rowflow { padding: 12px; }
}

@media (max-width: 420px) {
  .qe-head { flex-wrap: wrap; gap: 6px; }
  .qe-agg-mid { padding: 8px 0; }
  .qe-btn { padding: 8px 10px; font-size: 12.5px; }
  .qe-flow-node { min-width: 104px; }
  .qe-ex { font-size: 11.5px; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .qe-stage-in, .qe-tr-in, .qe-need { animation: none; }
  .qe-join-line { animation: none; }
  .qe-progress-fill { transition: none; }
}