:root {
  --bg: #f1f5f9;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { color: var(--ink); background: var(--bg); }

/* The page is a column: an explanation header at the very top, then the split
   pane filling whatever's left. */
#app { height: 100vh; display: flex; flex-direction: column; }

/* The explanation that introduces the concept, shown above the demo. */
.page-head {
  flex: none; background: #fff; border-bottom: 3px solid var(--ink);
  padding: 14px 22px;
  display: flex; align-items: flex-start; gap: 16px;
}
.page-explain {
  margin: 0; max-width: 900px; font-size: 15px; line-height: 1.5; color: var(--ink);
}
/* The two controls — "← All concepts" and "▶ Play demo" — stack in a
   right-aligned column in the upper part of the header (no absolute
   positioning; pushed to the right edge with margin-left:auto). */
.page-controls {
  flex: none; margin-left: auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.page-head .play { margin: 0; }
.page-explain strong { color: #04263a; }

/* Full-height split: the top (context) pane sizes to its content, the database
   pane takes whatever's left. Both panes still scroll internally if needed. */
.split { flex: 1; min-height: 0; display: grid; grid-template-rows: auto 1fr; }
.pane { position: relative; padding: 18px 22px; overflow: auto; }

/* Cap the context pane at half the viewport; it still hugs its content below
   that, and scrolls internally (via .pane overflow) if it would grow taller. */
.pane-sheet { background: #ecfdf5; border-bottom: 3px solid var(--ink); max-height: 50vh; }
.pane-db { background: #0f172a; color: #e2e8f0; }

.pane-label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.badge {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
}
.badge-sheet { background: #047857; color: #fff; }
.badge-db { background: #38bdf8; color: #04263a; }
.pane-sub { color: var(--muted); font-size: 13px; }
.pane-db .pane-sub { color: #94a3b8; }

/* "Play demo" auto-tour button — sits at the top-right of the database pane and
   glows each table in turn, 2s apart. */
.play {
  margin-left: auto; background: transparent; color: #38bdf8;
  border: 1px solid #38bdf8; border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.play:hover { background: rgba(56, 189, 248, 0.14); }
.play.active { background: #38bdf8; color: #04263a; }

/* --- back link ----------------------------------------------------------- */
.back {
  font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none;
  background: #fff; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line);
}
.back:hover { background: var(--bg); }

/* --- spreadsheet (top) --------------------------------------------------- */
.workbook {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  max-width: 820px; margin: 0 auto; overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
/* Constant footprint sized to the tallest sheet, so switching sheets never
   shrinks the workbook and jolts the layout. --rows (the tallest sheet's row
   count) is set from the data in app.js; +1 covers the header row. Shorter
   sheets leave blank space below their rows, like empty spreadsheet cells. */
.grid-scroll { height: calc((var(--rows, 7) + 1) * 33px); overflow: auto; }
.grid-scroll .grid thead th { position: sticky; top: 0; z-index: 1; }
.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid th, .grid td {
  border: 1px solid #e5e7eb; padding: 6px 12px; text-align: left; white-space: nowrap;
}
.grid thead th { background: #f1f5f9; font-weight: 600; }
.grid .rownum {
  background: #f8fafc; color: var(--muted); text-align: center;
  width: 34px; font-variant-numeric: tabular-nums;
}
.sheet-tabs {
  display: flex; gap: 2px; padding: 6px 8px;
  background: #f1f5f9; border-top: 1px solid var(--line);
}
.sheet-tab {
  border: 1px solid transparent; border-bottom: none; background: #e2e8f0;
  color: #334155; font-size: 13px; font-weight: 600; padding: 6px 12px;
  border-radius: 7px 7px 0 0; cursor: pointer; border-top: 3px solid var(--c);
}
.sheet-tab.current { background: #fff; color: var(--ink); }
.sheet-tab:hover { background: #fff; }
.sheet-hint {
  max-width: 820px; margin: 10px auto 0; color: var(--muted); font-size: 13px;
}

/* --- database (bottom) --------------------------------------------------- */
.machines { display: flex; align-items: center; gap: 10px; font-size: 22px; margin-bottom: 16px; }
.machines .arrow { color: #64748b; font-size: 18px; }
.machines .db-can { font-size: 14px; font-weight: 700; color: #38bdf8; }

/* The ERD reads left-to-right, so both tables and the foreign key linking
   them are visible without scrolling. */
.erd-row {
  display: flex; align-items: flex-start; gap: 0;
  margin-bottom: 18px; flex-wrap: wrap;
}
.erd-table {
  flex: 1 1 0; min-width: 180px;
  background: #1e293b; border: 1px solid #334155; border-top: 4px solid var(--c);
  border-radius: 8px; overflow: hidden; transition: opacity 0.15s, box-shadow 0.15s;
}

/* crow's-foot-ish connector between two tables: "1 ──< ∞" + the linking column */
.erd-link {
  flex: 0 0 64px; align-self: center;
  display: flex; align-items: center; justify-content: center;
  position: relative; gap: 4px; padding: 0 4px;
}
.erd-line { height: 2px; flex: 1; background: #475569; min-width: 12px; }
.card-mark { color: #94a3b8; font-size: 13px; font-weight: 700; }
.erd-via {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 10px; color: #64748b;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
@media (max-width: 720px) {
  .erd-row { flex-direction: column; align-items: stretch; }
  /* In a column the main axis is height; erd-table's overflow:hidden forces
     min-height to 0, so flex-basis:0 would collapse each box to a thin line.
     Size them to their content instead. */
  .erd-table { flex: none; }
  .erd-link { flex-basis: auto; padding: 6px 0; }
  .erd-via { position: static; transform: none; }
}
.erd-table.dim { opacity: 0.32; }
.erd-table.glow { box-shadow: 0 0 0 2px var(--c); }
.erd-head {
  background: #0b1220; color: var(--c); font-weight: 700; font-size: 13px;
  padding: 6px 12px; font-family: "SF Mono", Menlo, Consolas, monospace;
}
.erd-cols { list-style: none; margin: 0; padding: 4px 0; }
.erd-cols li {
  display: flex; align-items: center; gap: 8px; padding: 3px 12px;
  font-size: 13px; font-family: "SF Mono", Menlo, Consolas, monospace; color: #cbd5e1;
}
.erd-cols li.is-fk { background: rgba(29, 78, 216, 0.16); }
.key { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.key.pk { background: #fde68a; color: #713f12; }
.key.fk { background: #1d4ed8; color: #dbeafe; }

.block-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #94a3b8; margin-bottom: 8px; margin-top: 4px;
}
.sql {
  background: #1e293b; border: 1px solid #334155; border-radius: 8px;
  padding: 12px 14px; margin: 0 0 14px; font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5; color: #e2e8f0; white-space: pre-wrap;
  transition: box-shadow 0.2s, border-color 0.2s;
}

/* Tour finale: after stepping through the tables, the query — the reason a
   database beats a spreadsheet — is spotlit. A soft amber pulse draws the eye
   down to it and its result. */
.query.spotlight .sql {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px #fbbf24, 0 0 26px rgba(251, 191, 36, 0.55);
  animation: query-pulse 1.1s ease-in-out infinite;
}
.query.spotlight .block-title { color: #fbbf24; }
@keyframes query-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #fbbf24, 0 0 20px rgba(251, 191, 36, 0.40); }
  50%      { box-shadow: 0 0 0 2px #fbbf24, 0 0 30px rgba(251, 191, 36, 0.70); }
}
.result-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.result-table th, .result-table td {
  border: 1px solid #334155; padding: 5px 10px; text-align: left;
}
.result-table thead th { background: #1e293b; color: #94a3b8; font-weight: 600; }
.result-table td { color: #e2e8f0; }