:root {
  --bg: #f1f5f9;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  /* one colour per stage, reused on its header + glow */
  --extract: #d97706;
  --transform: #7c3aed;
  --load: #0284c7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--ink); background: var(--bg); }

/* --- back link ----------------------------------------------------------- */
.back {
  position: absolute; top: 12px; right: 16px; z-index: 10;
  font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none;
  background: rgba(255, 255, 255, 0.8); padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line);
}
.back:hover { background: #fff; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 30px 22px 48px; }

/* --- header -------------------------------------------------------------- */
.head { margin-bottom: 26px; }
.head h1 { margin: 0 0 8px; font-size: 30px; }
.lede { font-size: 15px; line-height: 1.6; color: #334155; max-width: 720px; margin: 0; }
.lede strong { color: var(--ink); }

.controls { margin-top: 18px; display: flex; gap: 10px; align-items: center; }
.run {
  background: var(--transform); color: #fff; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; padding: 10px 18px; border-radius: 10px;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.28);
}
.run:disabled { background: #c4b5fd; cursor: default; box-shadow: none; }
.reset {
  background: #fff; color: #334155; border: 1px solid var(--line); cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 10px;
}
.reset:disabled { color: #cbd5e1; cursor: default; }

/* --- the pipeline -------------------------------------------------------- */
.pipeline {
  display: grid; gap: 6px; align-items: stretch;
  grid-template-columns: 1fr auto 1fr auto 1fr;
}
.flow {
  align-self: center; font-size: 22px; color: #cbd5e1; padding: 0 2px;
  transition: color 0.25s, transform 0.25s;
}
.flow.on { color: var(--transform); transform: scale(1.25); }

.stage {
  background: #fff; border: 1px solid var(--line); border-top: 4px solid #cbd5e1;
  border-radius: 14px; padding: 16px; opacity: 0.6;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  transition: opacity 0.3s, box-shadow 0.3s, transform 0.3s;
  display: flex; flex-direction: column;
}
.stage.reached { opacity: 1; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); }
.stage.active { box-shadow: 0 0 0 3px var(--c), 0 14px 30px rgba(15, 23, 42, 0.12); transform: translateY(-3px); }
.stage-extract { --c: var(--extract); }
.stage-transform { --c: var(--transform); }
.stage-load { --c: var(--load); }
.stage-extract { border-top-color: var(--extract); }
.stage-transform { border-top-color: var(--transform); }
.stage-load { border-top-color: var(--load); }

.stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stage-name { font-size: 16px; font-weight: 800; color: var(--c); }
.stage-badge {
  font-size: 11px; font-weight: 700; color: #475569; background: #f1f5f9;
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.stage-sub { margin: 6px 0 12px; font-size: 12.5px; color: var(--muted); }

/* the medallion layer label, folded into each stage's subtitle */
.medallion {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-right: 4px;
  vertical-align: 1px;
}
.m-bronze { color: #92400e; background: #fef3c7; }
.m-silver { color: #334155; background: #e2e8f0; }
.m-store { color: #075985; background: #e0f2fe; }

/* empty-until-played placeholder keeps the card's footprint while it waits */
.stage-body { flex: 1; }
.stage-empty {
  display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 168px;
  color: #94a3b8; font-size: 13px;
  border: 1.5px dashed #e2e8f0; border-radius: 10px; background: #fbfcfe;
}
.stage-empty-dot {
  width: 8px; height: 8px; border-radius: 999px; background: #cbd5e1;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* --- row tables (used by every stage) ------------------------------------ */
.rows { width: 100%; border-collapse: collapse; font-size: 12px; }
.rows th, .rows td {
  border: 1px solid #eef2f6; padding: 4px 7px; text-align: left;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rows thead th {
  background: #f8fafc; color: var(--muted); font-weight: 600;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em;
}
.rows .empty { color: #cbd5e1; font-style: italic; }
.rows tr.junk td { background: #fef2f2; color: #ef4444; text-decoration: line-through; }
.rows.clean td, .rows.dest td { color: #166534; font-weight: 500; }

/* --- source cards, stacked vertically (used by Extract and Transform) ----- */
.stack-note { margin: 0 0 10px; font-size: 11.5px; font-style: italic; color: var(--muted); }
.src-stack { display: flex; flex-direction: column; gap: 10px; }
.src-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff;
}
.src-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.src-name {
  font-size: 12.5px; font-weight: 800;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.src-kind { font-size: 10.5px; color: var(--muted); }

/* Extract: each raw card keeps its source's OWN (messy) column names. */
.stage-extract .src-card { background: #fffdf8; }
.stage-extract .src-name { color: #b45309; }
.src-in td { font-family: "SF Mono", Menlo, Consolas, monospace; color: #b45309; }
.src-in thead th { color: #b45309; }

/* Transform: the same sources cleaned onto one schema, dim until each is
   mapped, then lit green. */
.stage-transform .src-card {
  background: #fbfaff; opacity: 0.5;
  transition: opacity 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.stage-transform .src-card.mapped { opacity: 1; }
.stage-transform .src-card.mapping {
  opacity: 1; border-color: var(--transform);
  box-shadow: 0 0 0 2px var(--transform), 0 8px 20px rgba(124, 58, 237, 0.16);
}
.stage-transform .src-name { color: var(--transform); }

/* --- load: the database icon --------------------------------------------- */
.db { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.db-icon {
  position: relative; font-size: 36px; line-height: 1;
  filter: grayscale(0.7); transition: filter 0.3s, transform 0.3s;
}
.db-icon.filling { filter: grayscale(0); transform: scale(1.08); }
.db-count {
  position: absolute; bottom: -4px; right: -10px;
  background: var(--load); color: #fff; font-size: 11px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}
.db-label { font-size: 12px; font-weight: 700; color: var(--load); }
.rows.dest tr.placeholder td {
  color: #cbd5e1; font-style: italic; text-align: center; font-weight: 400;
}
.rows.dest tr.dropped { animation: drop 0.3s ease-out; }
@keyframes drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- stack the pipeline vertically on narrow screens --------------------- */
@media (max-width: 760px) {
  .pipeline { grid-template-columns: 1fr; }
  .flow { transform: rotate(90deg); justify-self: center; }
  .flow.on { transform: rotate(90deg) scale(1.15); }
  .stage-empty { min-height: 80px; }
}