/* Module 03 - subquery walkthrough.
   Rules are scoped under .sqmod: this module and the shared theme both use
   generic class names, so scoping lets the module keep its markup and JS
   untouched while the site theme owns everything outside it.
   Its palette and SQL token colours now carry the shared values. */

:root {
  --paper:#0e1116; --sheet:#161b22; --sheet-2:#131820; --sheet-3:#1b212b;
  --ink:#e9edf2; --ink-2:#cdd5e0; --ink-3:#b4becc;
  --rule:#2c3440; --rule-soft:#222935;
  --nc:#4d9bff; --nc-soft:#16243a; --nc-line:#31455f;
  --co:#e0a080; --co-soft:#2a1d16; --co-line:#6b4a35;
  --keep:#74dfa2; --keep-soft:#11291d;
  --warn:#f0c274;
  --kw:#7cb7f0; --str:#e0a080; --num:#b5cea8; --cmt:#8fbf8f;
  --f-disp:Arial,Helvetica,sans-serif;
  --f-body:Arial,Helvetica,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --sql-fs:15px; --sql-lh:1.55; --tbl-fs:14px; --tbl-pad:5px;
  --dat-fs:12.5px; --dat-pad:3.5px; --qt-fs:30px; --p-fs:17px;
  --pane-pad:20px 26px; --gap:12px;
}
@media (max-height:840px){
:root {--sql-fs:14px; --sql-lh:1.46; --tbl-fs:13.5px; --tbl-pad:4px; --dat-fs:12px; --dat-pad:2px; --qt-fs:28px; --p-fs:16.5px; --pane-pad:15px 22px; --gap:10px}}
@media (max-height:700px){
:root {--sql-fs:12.5px; --sql-lh:1.38; --tbl-fs:12px; --tbl-pad:2.5px; --dat-fs:10.5px; --dat-pad:1px; --qt-fs:23px; --p-fs:14.5px; --pane-pad:11px 18px; --gap:8px}}
.sqmod * {box-sizing:border-box}
.sqmod html,
.sqmod body {height:100%;margin:0}
.sqmod body {background:var(--paper); color:var(--ink); font-family:var(--f-body); line-height:1.5; -webkit-font-smoothing:antialiased}
.sqmod :focus-visible {outline:2px solid var(--nc); outline-offset:2px; border-radius:3px}
.sqmod .app {display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; overflow:hidden}
.sqmod .top {display:flex; align-items:center; gap:14px; padding:7px 16px; background:var(--sheet); border-bottom:1px solid var(--rule)}
.sqmod .brand {flex:0 0 auto}
.sqmod .brand b {font-family:var(--f-disp); font-weight:700; font-size:16.5px; letter-spacing:-.01em; display:block; line-height:1.15}
.sqmod .brand span {font-family:var(--f-disp); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.sqmod .chips {display:flex; align-items:center; gap:4px; flex:1 1 auto; overflow-x:auto; scrollbar-width:none}
.sqmod .chips::-webkit-scrollbar {height:0}
.sqmod .sec {font-family:var(--f-disp); font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); padding:0 6px 0 11px; white-space:nowrap; border-left:1px solid var(--rule); margin-left:3px}
.sqmod .sec:first-child {border-left:0; margin-left:0; padding-left:0}
.sqmod .chip {font-family:var(--f-disp); font-size:12.5px; font-weight:600; padding:4px 9px; border:1px solid var(--rule); border-radius:2px; background:var(--sheet); color:var(--ink-2); cursor:pointer; white-space:nowrap}
.sqmod .chip:hover {border-color:var(--ink-3); color:var(--ink)}
.sqmod .chip[data-k="nc"] {color:var(--nc); border-color:var(--nc-line)}
.sqmod .chip[data-k="co"] {color:var(--co); border-color:var(--co-line)}
.sqmod .chip.on {background:var(--nc); color:var(--paper); border-color:var(--nc)}
.sqmod [hidden] {display:none!important}
.sqmod .fs {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--f-disp); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--sheet); border:1px solid var(--rule); color:var(--ink-2);
  padding:5px 10px; border-radius:2px; cursor:pointer; line-height:1;
}
.sqmod .fs:hover {background:var(--nc); color:var(--paper); border-color:var(--nc)}
.sqmod .fs svg {display:block}
.sqmod .stage {display:grid; grid-template-columns:minmax(290px,27%) minmax(0,1fr); min-height:0; overflow:hidden}
.sqmod .data {border-right:1px solid var(--rule); background:var(--sheet-2); padding:8px 10px; overflow-y:auto; display:flex; flex-direction:column; gap:6px}
.sqmod .data-head {font-family:var(--f-disp); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between; gap:8px; flex:0 0 auto}
.sqmod .data-head em {font-style:normal; color:var(--co); letter-spacing:.05em; text-align:right}
.sqmod .tbl-wrap {flex:0 0 auto; background:var(--sheet); border:1px solid var(--rule); border-radius:3px; overflow:hidden}
.sqmod .tbl-name {font-family:var(--f-mono); font-size:11.5px; font-weight:700; padding:4px 8px; border-bottom:1px solid var(--rule); color:var(--ink-2); display:flex; justify-content:space-between; background:var(--sheet-2)}
.sqmod .tbl-name em {font-style:normal; color:var(--ink-3); font-weight:400}
.sqmod table.tbl {border-collapse:collapse; width:100%; font-family:var(--f-mono); font-size:var(--dat-fs); font-variant-numeric:tabular-nums; table-layout:fixed}
.sqmod table.tbl th {text-align:left; font-weight:700; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); padding:3px 8px; border-bottom:1px solid var(--rule); overflow:hidden}
.sqmod table.tbl td {padding:var(--dat-pad) 8px; border-bottom:1px solid var(--rule-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sqmod table.tbl tbody tr:last-child td {border-bottom:0}
.sqmod table.tbl .n {text-align:right}
.sqmod .tbl-wrap.dim tbody tr {opacity:.28; transition:opacity .15s, background-color .15s}
.sqmod .tbl-wrap.dim tbody tr.scope {opacity:.85; background:var(--sheet-2)}
.sqmod .tbl-wrap.dim tbody tr.hl {opacity:1; background:var(--nc-soft); box-shadow:inset 2px 0 0 var(--nc)}
.sqmod .tbl-wrap.dim tbody tr.hlc {opacity:1; background:var(--co-soft); box-shadow:inset 2px 0 0 var(--co)}
.sqmod .tbl-wrap.dim tbody tr.act {opacity:1; background:var(--co-soft); box-shadow:inset 3px 0 0 var(--co); font-weight:700}
@media (prefers-reduced-motion:reduce){
.sqmod .tbl-wrap.dim tbody tr {transition:none}}
.sqmod .pane {overflow-y:auto; padding:var(--pane-pad); min-width:0; background:var(--paper); display:flex}
.sqmod .pane-in {display:flex; flex-direction:column; gap:var(--gap); width:100%; min-height:0}
.sqmod .head {flex:0 0 auto; display:flex; flex-direction:column; gap:5px}
.sqmod .kicker {font-family:var(--f-disp); font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:8px}
.sqmod .kicker::before {content:""; width:18px; height:2px; background:currentColor}
.sqmod .pane[data-k="nc"] .kicker {color:var(--nc)}
.sqmod .pane[data-k="co"] .kicker {color:var(--co)}
.sqmod h2.qt {font-family:var(--f-disp); font-weight:700; font-size:var(--qt-fs); line-height:1.14; letter-spacing:-.02em; margin:0; text-wrap:balance}
.sqmod .cols {flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap) 20px; min-height:0; align-content:start}
.sqmod .col {display:flex; flex-direction:column; gap:var(--gap); min-height:0; min-width:0}
.sqmod .pane p {margin:0; color:var(--ink-2); font-size:var(--p-fs)}
.sqmod .pane p strong {color:var(--ink); font-weight:600}
.sqmod code {font-family:var(--f-mono); font-size:.86em; background:var(--sheet-2); border:1px solid var(--rule-soft); border-radius:2px; padding:0 3px; color:var(--ink)}
.sqmod .lbl {font-family:var(--f-disp); font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:8px; margin-bottom:calc(-1 * var(--gap) + 3px); flex:0 0 auto}
.sqmod .lbl::after {content:""; flex:1 1 auto; height:1px; background:var(--rule)}
.sqmod pre.sql {font-variant-numeric:tabular-nums; margin:0; background:var(--sheet-2); border:1px solid var(--rule); border-left:3px solid var(--nc); border-radius:3px; padding:9px 11px; overflow:auto; font-family:var(--f-mono); font-size:var(--sql-fs); line-height:var(--sql-lh); color:var(--ink); tab-size:2; flex:0 0 auto}
.sqmod .pane[data-k="co"] pre.sql {border-left-color:var(--co)}
.sqmod pre.sql.plain {border-left-color:var(--rule)}
.sqmod pre.sql .k {color:var(--kw); font-weight:700}
.sqmod pre.sql .s {color:var(--str)}
.sqmod pre.sql .nu {color:var(--num)}
.sqmod pre.sql .c {color:var(--cmt); font-style:italic}
.sqmod pre.sql .corr {background:var(--co-soft); border-radius:2px}
.sqmod .out {background:var(--sheet); border:1px solid var(--rule); border-radius:3px; overflow:hidden; flex:0 0 auto}
.sqmod .out-h {font-family:var(--f-disp); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); padding:4px 10px; border-bottom:1px solid var(--rule); background:var(--sheet-2); display:flex; justify-content:space-between; gap:8px}
.sqmod .out table {border-collapse:collapse; width:100%; font-family:var(--f-mono); font-size:var(--tbl-fs); font-variant-numeric:tabular-nums}
.sqmod .out th {text-align:left; font-weight:700; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); padding:4px 10px; border-bottom:1px solid var(--rule); white-space:nowrap}
.sqmod .out td {padding:var(--tbl-pad) 10px; border-bottom:1px solid var(--rule-soft); white-space:nowrap}
.sqmod .out tr:last-child td {border-bottom:0}
.sqmod .out .n {text-align:right}
.sqmod .note {border-left:3px solid var(--rule); padding:5px 0 5px 11px; font-size:calc(var(--p-fs) - 1px); color:var(--ink-2); flex:0 0 auto}
.sqmod .note.nc {border-left-color:var(--nc)}
.sqmod .note.co {border-left-color:var(--co)}
.sqmod .note.warn {border-left-color:var(--warn)}
.sqmod .note b {font-family:var(--f-disp); font-weight:700; color:var(--ink)}
.sqmod .split {display:grid; grid-template-columns:1fr 1fr; gap:9px; flex:0 0 auto}
.sqmod .cell {background:var(--sheet-2); border:1px solid var(--rule); border-radius:3px; padding:8px 10px}
.sqmod .cell h4 {font-family:var(--f-disp); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 3px}
.sqmod .cell p {font-size:calc(var(--p-fs) - 1.5px)}
.sqmod .badge {font-family:var(--f-disp); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:1px 5px; border-radius:2px; white-space:nowrap}
.sqmod .b-keep {background:var(--keep-soft); color:var(--keep)}
.sqmod .b-drop {background:var(--sheet-3); color:var(--ink-3)}
.sqmod .b-true {background:var(--keep-soft); color:var(--keep)}
.sqmod .b-false {background:var(--co-soft); color:var(--co)}
.sqmod .player {border:1px solid var(--co-line); border-radius:3px; overflow:hidden; background:var(--sheet); flex:0 0 auto}
.sqmod .pl-bar {display:flex; align-items:center; gap:5px; padding:5px 8px; background:var(--co-soft); border-bottom:1px solid var(--co-line)}
.sqmod .pl-ttl {font-family:var(--f-disp); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--co); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sqmod .pl-btn {font-family:var(--f-disp); font-size:12px; font-weight:700; background:var(--sheet); border:1px solid var(--co-line); color:var(--co); padding:3px 8px; border-radius:2px; cursor:pointer; line-height:1.3}
.sqmod .pl-btn:hover:not(:disabled) {background:var(--co); color:var(--paper); border-color:var(--co)}
.sqmod .pl-btn:disabled {opacity:.35; cursor:default}
.sqmod .pl-cnt {font-family:var(--f-mono); font-size:11.5px; font-weight:700; color:var(--co); font-variant-numeric:tabular-nums; white-space:nowrap; padding-right:3px}
.sqmod .pl-body {padding:8px 10px; display:flex; flex-direction:column; gap:7px}
.sqmod .pl-now {font-family:var(--f-disp); font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.sqmod .pl-exec {font-variant-numeric:tabular-nums; font-family:var(--f-mono); font-size:calc(var(--sql-fs) - .5px); background:var(--sheet-2); border:1px solid var(--rule); border-radius:2px; padding:5px 8px; color:var(--ink); overflow-x:auto; white-space:nowrap}
.sqmod .pl-exec .k {color:var(--kw); font-weight:700}
.sqmod .pl-exec .nu {color:var(--num)}
.sqmod .pl-exec .s {color:var(--str)}
.sqmod .pl-grid {display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 10px; align-items:baseline; margin:0}
.sqmod .pl-grid dt {font-family:var(--f-disp); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.sqmod .pl-grid dd {margin:0; font-family:var(--f-mono); font-size:calc(var(--tbl-fs) - .5px); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sqmod .pl-idle {font-size:calc(var(--p-fs) - 1px); color:var(--ink-2); font-family:var(--f-body); margin:0}
.sqmod .strip {display:flex; gap:3px; flex-wrap:wrap; border-top:1px solid var(--rule-soft); padding-top:7px}
.sqmod .tile {flex:1 1 auto; min-width:32px; text-align:center; font-family:var(--f-mono); font-size:11px; font-weight:700; padding:3px 2px; border:1px solid var(--rule); border-radius:2px; color:var(--ink-3); background:var(--sheet-2); line-height:1.25}
.sqmod .tile.keep {background:var(--keep-soft); border-color:var(--keep); color:var(--keep)}
.sqmod .tile.drop {background:var(--sheet-3); border-color:var(--rule); color:var(--ink-3)}
.sqmod .tile.now {outline:2px solid var(--co); outline-offset:1px; color:var(--co)}
.sqmod .bot {display:flex; align-items:center; gap:11px; padding:6px 16px; background:var(--sheet); border-top:1px solid var(--rule)}
.sqmod .nav {font-family:var(--f-disp); font-size:13.5px; font-weight:600; background:var(--sheet); border:1px solid var(--rule); color:var(--ink); padding:5px 12px; border-radius:2px; cursor:pointer}
.sqmod .nav:hover:not(:disabled) {background:var(--nc); color:var(--paper); border-color:var(--nc)}
.sqmod .nav:disabled {opacity:.3; cursor:default}
.sqmod .crumb {flex:1 1 auto; font-family:var(--f-disp); font-size:12px; color:var(--ink-3); letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sqmod .crumb b {color:var(--ink); font-weight:600}
.sqmod .credit {font-family:var(--f-disp); font-size:12px; color:var(--ink); white-space:nowrap; letter-spacing:.01em}
.sqmod .credit b {font-weight:700}
.sqmod .credit i {font-style:normal; color:var(--ink-3); padding:0 6px}
.sqmod .hint {font-family:var(--f-disp); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}


@media (max-width:900px){
.sqmod body {overflow:auto}
.sqmod .app {height:auto; min-height:100dvh; overflow:visible}
.sqmod .stage {grid-template-columns:1fr; overflow:visible}
.sqmod .data {border-right:0; border-bottom:1px solid var(--rule); overflow:auto; max-height:40vh; position:sticky; top:0; z-index:5}
.sqmod .pane {overflow:visible}
.sqmod .cols {grid-template-columns:1fr; overflow:visible}
.sqmod .split {grid-template-columns:1fr}
.sqmod .bot {position:sticky; bottom:0}
.sqmod .hint {display:none}
}