/*
 * Shared CSS for interactive visualizations
 * Used by DOM steppers (K1–K6) and future visualizations
 */

/* ── Self-hosted fonts ── */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }

/* Scrollbar color-scheme */
:root { color-scheme: dark; }
:root.light { color-scheme: light; }

/* ── Theme variables (dark) ── */
/* Teal-slate (hue 174) + #4db6ac primary + #ff9100 accent */
:root {
  --bg-controls: #141e1d;
  --bg-source: #172423;
  --bg-tree: #1c2a29;
  --border: rgba(255,255,255,0.06);
  --text: #e0e0e0;
  --text-dim: rgba(255,255,255,0.5);
  --text-dimmer: rgba(255,255,255,0.50);
  --text-dimmest: rgba(255,255,255,0.34);
  --line-num: rgba(255,255,255,0.34);
  --tab-bg: rgba(255,255,255,0.08);
  --tab-text: rgba(255,255,255,0.55);
  --accent: #4db6ac;
  --accent-bg: rgba(77,182,172,0.12);
  --accent-border: rgba(77,182,172,0.3);
  --accent-dim: rgba(77,182,172,0.85);
  --accent-dimmer: rgba(77,182,172,0.88);
  --accent-dimmest: rgba(77,182,172,0.88);
  --accent-node-bg: rgba(77,182,172,0.08);
  --accent-node-border: rgba(77,182,172,0.4);
  --accent-node-text: rgba(77,182,172,0.9);
  --accent-node-prop: rgba(77,182,172,0.88);
  --accent-node-val: rgba(77,182,172,0.90);
  --accent-dot: rgba(77,182,172,0.5);
  --accent-dot-current: rgba(77,182,172,0.9);
  --dot-future: rgba(255,255,255,0.15);
  --handle-bg: rgba(255,255,255,0.06);
  --handle-pill: rgba(255,255,255,0.18);
  --handle-hover: rgba(77,182,172,0.25);
  --handle-pill-hover: rgba(77,182,172,0.6);
  --node-bg: rgba(255,255,255,0.06);
  --node-border: rgba(255,255,255,0.1);
  --node-text: rgba(255,255,255,0.55);
  --card-bg: rgba(255,255,255,0.04);
  --card-border: rgba(255,255,255,0.08);
  --connector: rgba(255,255,255,0.08);
  --connector-active: rgba(77,182,172,0.2);
  --active-line-border: rgba(255,145,0,0.5);
  --active-line-bg: rgba(255,145,0,0.08);
  --btn-back-text: rgba(255,255,255,0.4);
  --btn-back-border: rgba(255,255,255,0.1);
  --btn-back-hover-border: rgba(255,255,255,0.2);
  --btn-back-hover-text: rgba(255,255,255,0.6);
  /* HTML syntax */
  --syn-tag: #80cbc4;
  --syn-attr: #ffcc80;
  --syn-val: #ff9100;
  --syn-eq: #e0e0e0;
  --syn-text: #e0e0e0;
  --syn-doctype: #78909c;
  /* JS syntax (Synthwave '84) */
  --js-keyword: #fede5d;
  --js-variable: #ff7edb;
  --js-operator: #ffffff;
  --js-global: rgba(255,255,255,0.5);
  --js-punct: #b6b1b1;
  --js-method: #36f9f6;
  --js-string: #ff8b39;
  --js-property: #36f9f6;
  --js-method-hl: rgba(54,249,246,0.08);
  /* Search states */
  --search-node-bg: rgba(255,255,255,0.08);
  --search-node-border: rgba(255,255,255,0.2);
  --search-value-hl: rgba(255,255,255,0.7);
  --match-indicator: rgba(77,182,172,0.4);
  /* Variable label */
  --var-line: rgba(200,160,255,0.3);
  --var-pill-bg: rgba(200,160,255,0.1);
  --var-pill-border: rgba(200,160,255,0.4);
  --var-pill-text: rgba(200,160,255,0.85);
}

/* ── Theme variables (light) ── */
/* #00796b primary + #ff9100 accent */
:root.light {
  --bg-controls: #eff5f4;
  --bg-source: #f8fbfb;
  --bg-tree: #f3f8f7;
  --border: rgba(0,0,0,0.08);
  --text: #212121;
  --text-dim: rgba(0,0,0,0.55);
  --text-dimmer: rgba(0,0,0,0.55);
  --text-dimmest: rgba(0,0,0,0.43);
  --line-num: rgba(0,0,0,0.42);
  --tab-bg: rgba(0,0,0,0.06);
  --tab-text: rgba(0,0,0,0.58);
  --accent: #00796b;
  --accent-bg: rgba(0,121,107,0.1);
  --accent-border: rgba(0,121,107,0.3);
  --accent-dim: rgba(0,121,107,0.97);
  --accent-dimmer: rgba(0,90,79,0.95);
  --accent-dimmest: #00796b;
  --accent-node-bg: rgba(0,121,107,0.08);
  --accent-node-border: rgba(0,121,107,0.35);
  --accent-node-text: rgba(0,90,79,0.95);
  --accent-node-prop: rgba(0,90,79,0.75);
  --accent-node-val: rgba(0,90,79,0.95);
  --accent-dot: rgba(0,121,107,0.45);
  --accent-dot-current: rgba(0,121,107,0.85);
  --dot-future: rgba(0,0,0,0.12);
  --handle-bg: rgba(0,0,0,0.06);
  --handle-pill: rgba(0,0,0,0.15);
  --handle-hover: rgba(0,121,107,0.2);
  --handle-pill-hover: rgba(0,121,107,0.5);
  --node-bg: rgba(0,0,0,0.04);
  --node-border: rgba(0,0,0,0.1);
  --node-text: rgba(0,0,0,0.55);
  --card-bg: rgba(0,0,0,0.03);
  --card-border: rgba(0,0,0,0.08);
  --connector: rgba(0,0,0,0.1);
  --connector-active: rgba(0,121,107,0.25);
  --active-line-border: rgba(255,145,0,0.5);
  --active-line-bg: rgba(255,145,0,0.06);
  --btn-back-text: rgba(0,0,0,0.45);
  --btn-back-border: rgba(0,0,0,0.12);
  --btn-back-hover-border: rgba(0,0,0,0.25);
  --btn-back-hover-text: rgba(0,0,0,0.6);
  /* HTML syntax */
  --syn-tag: #00796b;
  --syn-attr: #b35800;
  --syn-val: #b05000;
  --syn-eq: #333333;
  --syn-text: #212121;
  --syn-doctype: #546e7a;
  /* JS syntax (VSCode light) */
  --js-keyword: #0000FF;
  --js-variable: #001080;
  --js-operator: #000000;
  --js-global: rgba(0,0,0,0.55);
  --js-punct: #000000;
  --js-method: #795E26;
  --js-string: #A31515;
  --js-property: #001080;
  --js-method-hl: rgba(121,94,38,0.08);
  /* Search states */
  --search-node-bg: rgba(0,0,0,0.06);
  --search-node-border: rgba(0,0,0,0.2);
  --search-value-hl: rgba(0,0,0,0.7);
  --match-indicator: rgba(0,121,107,0.5);
  /* Variable label */
  --var-line: rgba(120,80,200,0.3);
  --var-pill-bg: rgba(120,80,200,0.06);
  --var-pill-border: rgba(120,80,200,0.35);
  --var-pill-text: rgba(120,80,200,0.95);
}

/* ── Body ── */
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-controls);
  color: var(--text);
  overflow: hidden;
  height: 100vh;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ── Panel layout ── */
.panels {
  display: flex;
  flex: 1;
  min-height: 0;
}

.source-panel {
  flex: none;
  width: 50%;
  background: var(--bg-source);
  display: flex;
  flex-direction: column;
  min-width: 120px;
  transition: background 0.3s ease;
}

.tree-panel {
  flex: 1;
  background: var(--bg-tree);
  display: flex;
  flex-direction: column;
  min-width: 120px;
  transition: background 0.3s ease;
}

/* ── Resize handle ── */
.resize-handle {
  width: 7px;
  cursor: col-resize;
  background: var(--handle-bg);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.resize-handle:hover,
.resize-handle.dragging { background: var(--handle-hover); }
.resize-handle .handle-pill {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 5px; height: 32px; border-radius: 3px;
  background: var(--handle-pill); transition: background 0.2s ease;
}
.resize-handle:hover .handle-pill,
.resize-handle.dragging .handle-pill { background: var(--handle-pill-hover); }

/* ── Panel headers ── */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.file-tab {
  background: var(--tab-bg);
  color: var(--tab-text);
  border-radius: 6px;
  padding: 4px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  border: none;
  cursor: default;
  transition: all 0.3s ease;
}

.tree-label {
  background: var(--accent-bg);
  color: var(--accent-dim);
  border-radius: 6px;
  padding: 4px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.status-text {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}
.source-status { color: var(--text-dimmest); }
.tree-status { color: var(--accent-dimmest); }

/* ── Source lines ── */
.source-lines {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
}

.source-line {
  display: flex;
  padding: 0 16px 0 0;
  transition: all 0.3s ease;
  border-left: 2px solid transparent;
}
.source-line.active {
  border-left-color: var(--active-line-border);
  background: var(--active-line-bg);
}
.source-line.done { opacity: 0.3; }

.line-number {
  display: inline-block;
  width: 36px;
  text-align: right;
  padding-right: 12px;
  color: var(--line-num);
  font-size: 12px;
  flex-shrink: 0;
  user-select: none;
}
.line-content { white-space: pre; }

/* ── Tree nodes ── */
.tree-content { flex: 1; padding: 16px 20px; overflow-y: auto; }
.document-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dimmer);
  margin-bottom: 8px;
}

.tree-node {
  position: relative;
  margin: 4px 0;
  transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.depth-0 { margin-left: 0; }

/* Connector lines */
.tree-children { position: relative; padding-left: 28px; }
.tree-children::before {
  content: '';
  position: absolute;
  left: 12px; top: 0; bottom: 0;
  border-left: 1px solid var(--connector);
}
.tree-children > .tree-node::before {
  content: '';
  position: absolute;
  left: -16px; top: 12px; width: 12px; height: 0;
  border-top: 1px solid var(--connector);
}
.tree-children > .tree-node.node-active::before { border-top-color: var(--connector-active); }
.tree-node.depth-0::before { display: none; }
.tree-children.clipped::before { bottom: auto; height: var(--trunk-height, 100%); }

/* Structural pills */
.node-pill {
  display: inline-block;
  background: var(--node-bg);
  border: 0.5px solid var(--node-border);
  border-radius: 4px;
  padding: 2px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--node-text);
  height: 24px;
  line-height: 20px;
  transition: all 0.3s ease;
}

/* Content cards */
.node-card {
  background: var(--card-bg);
  border: 0.5px solid var(--card-border);
  border-radius: 5px;
  padding: 6px 12px;
  width: 200px;
  transition: all 0.3s ease;
}
.node-card .tag-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  transition: color 0.3s ease;
}
.node-card .prop {
  display: flex;
  gap: 4px;
  margin-top: 2px;
  align-items: baseline;
}
.node-card .prop-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dimmest);
  transition: color 0.3s ease;
}
.node-card .prop-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent-dimmer);
  transition: color 0.3s ease;
}

/* Active node (teal) */
.tree-node.node-active .node-pill { background: var(--accent-node-bg); border-color: var(--accent-node-border); color: var(--accent-node-text); }
.tree-node.node-active .node-card { background: var(--accent-node-bg); border-color: var(--accent-node-border); }
.tree-node.node-active .node-card .tag-name { color: var(--accent-node-text); }
.tree-node.node-active .node-card .prop-name { color: var(--accent-node-prop); }
.tree-node.node-active .node-card .prop-value { color: var(--accent-node-val); }

/* ── Controls ── */
.controls {
  background: var(--bg-controls);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s ease;
}
.controls-left { display: flex; align-items: center; gap: 12px; }
.controls-right { display: flex; gap: 8px; }

.step-counter {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-dimmer);
}

.dots { display: flex; gap: 6px; align-items: center; }
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dot-future);
  transition: all 0.3s ease;
}
.dot.completed { background: var(--accent-dot); }
.dot.current { background: var(--accent-dot-current); width: 10px; height: 10px; }

/* Buttons */
.btn {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}
.btn-back {
  color: var(--btn-back-text);
  background: transparent;
  border: 0.5px solid var(--btn-back-border);
}
.btn-back:hover:not(:disabled) { border-color: var(--btn-back-hover-border); color: var(--btn-back-hover-text); }
.btn-back:disabled { opacity: 0.3; pointer-events: none; }

.btn-next {
  color: var(--accent-node-text);
  background: var(--accent-bg);
  border: 0.5px solid var(--accent-border);
}
.btn-next:hover:not(:disabled) { background: var(--accent-border); border-color: var(--accent-dim); }
.btn-next:disabled { opacity: 0.3; pointer-events: none; }

/* Auto-play */
.btn-play {
  width: 28px; height: 28px; padding: 0;
  background: var(--accent-bg);
  border: 0.5px solid var(--accent-border);
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.btn-play:hover { background: var(--accent-border); border-color: var(--accent-dim); }
.btn-play:disabled { opacity: 0.3; pointer-events: none; }
.btn-play svg { width: 14px; height: 14px; fill: var(--accent-node-text); }
.btn-play.playing { background: var(--active-line-bg); border-color: var(--active-line-border); }
.btn-play.playing svg { fill: var(--text); }

/* Reset */
.btn-reset {
  width: 28px; height: 28px; padding: 0;
  background: transparent;
  border: 0.5px solid var(--btn-back-border);
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.btn-reset:hover:not(:disabled) { border-color: var(--btn-back-hover-border); }
.btn-reset:disabled { opacity: 0.3; pointer-events: none; }
.btn-reset svg { width: 15px; height: 15px; }
.btn-reset .reset-arrow {
  stroke: var(--btn-back-text); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none; transition: stroke 0.2s ease;
}
.btn-reset:hover:not(:disabled) .reset-arrow { stroke: var(--btn-back-hover-text); }

/* Subtitle toggle */
.btn-subs {
  width: 28px; height: 28px; padding: 0;
  background: transparent;
  border: 0.5px solid var(--btn-back-border);
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  margin-left: 4px; position: relative;
}
.btn-subs:hover { border-color: var(--btn-back-hover-border); }
.btn-subs svg { width: 16px; height: 16px; }
.btn-subs .sub-icon {
  stroke: var(--btn-back-text); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none; transition: stroke 0.2s ease;
}
.btn-subs .sub-fill { fill: var(--btn-back-text); transition: fill 0.2s ease; }
.btn-subs:hover .sub-icon { stroke: var(--btn-back-hover-text); }
.btn-subs:hover .sub-fill { fill: var(--btn-back-hover-text); }
.btn-subs.active { background: var(--accent-bg); border-color: var(--accent-border); }
.btn-subs.active .sub-icon { stroke: var(--accent-node-text); }
.btn-subs.active .sub-fill { fill: var(--accent-node-text); }

/* Fullscreen button */
.btn-fullscreen {
  width: 28px; height: 28px; padding: 0;
  background: transparent;
  border: 0.5px solid var(--btn-back-border);
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  margin-left: 4px;
}
.btn-fullscreen:hover { border-color: var(--btn-back-hover-border); }
.btn-fullscreen svg { width: 16px; height: 16px; }
.btn-fullscreen .corner {
  stroke: var(--btn-back-text); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none; transition: stroke 0.2s ease;
}
.btn-fullscreen:hover .corner { stroke: var(--btn-back-hover-text); }

/* Zoom controls (fullscreen only) */
.zoom-controls {
  display: none;
  position: absolute;
  bottom: 180px;
  right: 12px;
  z-index: 20;
  flex-direction: row;
  gap: 4px;
}
:fullscreen .zoom-controls, .is-fullscreen .zoom-controls { display: flex; }
.btn-zoom {
  width: 32px; height: 32px; padding: 0;
  background: var(--bg-controls);
  border: 0.5px solid var(--btn-back-border);
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  font-size: 18px; font-weight: bold;
  color: var(--btn-back-text);
  font-family: 'Inter', sans-serif;
}
.btn-zoom:hover { border-color: var(--btn-back-hover-border); color: var(--btn-back-hover-text); }

/* ── Subtitle bar ── */
.subtitle-bar {
  background: var(--bg-controls);
  border-top: 1px solid var(--border);
  padding: 0; overflow: hidden; max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.subtitle-bar.visible { max-height: 60px; padding: 10px 20px; }
.subtitle-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.4;
  transition: opacity 0.25s ease;
}

/* ── Fullscreen scaling ── */
:fullscreen body,
::backdrop { background: var(--bg-controls); }

:fullscreen .source-lines, .is-fullscreen .source-lines { font-size: 17px; line-height: 1.8; padding: 20px 0; }
:fullscreen .line-number, .is-fullscreen .line-number { font-size: 15px; width: 48px; padding-right: 16px; }
:fullscreen .panel-header, .is-fullscreen .panel-header { padding: 14px 24px; }
:fullscreen .file-tab, .is-fullscreen .file-tab,
:fullscreen .tree-label, .is-fullscreen .tree-label { font-size: 13px; padding: 5px 16px; }
:fullscreen .status-text, .is-fullscreen .status-text { font-size: 13px; }
:fullscreen .tree-content, .is-fullscreen .tree-content { padding: 24px 32px; }
:fullscreen .document-label, .is-fullscreen .document-label { font-size: 13px; margin-bottom: 12px; }
:fullscreen .node-pill, .is-fullscreen .node-pill { font-size: 14px; padding: 4px 16px; height: 30px; line-height: 22px; }
:fullscreen .node-card, .is-fullscreen .node-card { width: 260px; padding: 8px 16px; border-radius: 6px; }
:fullscreen .node-card .tag-name, .is-fullscreen .node-card .tag-name { font-size: 14px; }
:fullscreen .node-card .prop-name, .is-fullscreen .node-card .prop-name,
:fullscreen .node-card .prop-value, .is-fullscreen .node-card .prop-value { font-size: 12px; }
:fullscreen .node-card .prop, .is-fullscreen .node-card .prop { margin-top: 3px; }
:fullscreen .tree-children, .is-fullscreen .tree-children { padding-left: 36px; }
:fullscreen .tree-children > .tree-node::before, .is-fullscreen .tree-children > .tree-node::before { left: -20px; width: 16px; }
:fullscreen .tree-children::before, .is-fullscreen .tree-children::before { left: 14px; }
:fullscreen .tree-node, .is-fullscreen .tree-node { margin: 6px 0; }
:fullscreen .controls, .is-fullscreen .controls { padding: 16px 28px; }
:fullscreen .step-counter, .is-fullscreen .step-counter { font-size: 14px; }
:fullscreen .dots, .is-fullscreen .dots { gap: 8px; }
:fullscreen .dot, .is-fullscreen .dot { width: 10px; height: 10px; }
:fullscreen .dot.current, .is-fullscreen .dot.current { width: 12px; height: 12px; }
:fullscreen .btn, .is-fullscreen .btn { font-size: 14px; padding: 8px 20px; }
:fullscreen .source-line, .is-fullscreen .source-line { padding: 0 24px 0 0; }
:fullscreen .subtitle-bar.visible, .is-fullscreen .subtitle-bar.visible { max-height: 100px; padding: 18px 36px; }
:fullscreen .subtitle-text, .is-fullscreen .subtitle-text { font-size: 32px; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .panels { flex-direction: column; }
  .source-panel { width: auto !important; flex: none; border-bottom: none; min-height: 60px; }
  .resize-handle { width: auto; height: 7px; cursor: row-resize; }
  .resize-handle .handle-pill { width: 32px; height: 5px; }
  .tree-panel { flex: 1; min-height: 60px; }
}