/* Design tokens, themes, resets, app-level layout */

:root {
  --bg: #f4f4f1;
  --surface: #ffffff;
  --surface2: #fafaf8;
  --border: #e4e4df;
  --border-strong: #d2d2cc;
  --ink: #1b1b1d;
  --muted: #79796f;
  --faint: #a4a49a;
  --accent: #0e8a4d;
  --accent-ink: #0a6e3d;
  --accent-soft: #e4f3ea;
  --danger: #c43a30;
  --danger-soft: #faeae8;
  --warn: #a8731c;
  --sel: #ecece8;
  --paper: #ffffff;
  --paper-ink: #26261f;
  --paper-frame: var(--border-strong);   /* preview sheet frame (light theme: subtle) */
  --paper-liner: #e9e2cf;                 /* EPL label backing roll */
  --shadow: 0 1px 2px rgba(20,20,15,.05), 0 8px 24px -12px rgba(20,20,15,.18);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  /* code colors */
  --c-tag: #1f5fa8;
  --c-attr: #7a5a10;
  --c-str: #0e7a48;
  --c-kw: #9a3aa0;
  --c-expr: #b4540a;
  --c-cm: #9b9b90;
}
[data-theme="dark"] {
  --bg: #131315;
  --surface: #1b1b1e;
  --surface2: #18181b;
  --border: #2a2a2f;
  --border-strong: #3a3a41;
  --ink: #e9e9e4;
  --muted: #93938a;
  --faint: #66665e;
  --accent: #3fbe80;
  --accent-ink: #5ed099;
  --accent-soft: #15301f;
  --danger: #e2645a;
  --danger-soft: #361d1a;
  --warn: #d2a04a;
  --sel: #26262b;
  /* dark theme: a dark "paper" with light ink (like the virtual-printer dark
     scheme) — the preview's paper + text + masked images all read from these */
  --paper: #202024;
  --paper-ink: #e9e9e4;
  --paper-frame: #555a5f;                 /* light frame around the dark sheet */
  --paper-liner: #34343a;                 /* neutral dark backing (not muddy green) */
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.6);
  --c-tag: #6aa5e8;
  --c-attr: #cfa84e;
  --c-str: #57c08a;
  --c-kw: #cf7fd4;
  --c-expr: #e89a5a;
  --c-cm: #6e6e66;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  display: grid;
  /* sidebar | middle | splitter | right | splitter | assistant
     widths driven by CSS vars so the draggable splitters and the
     sidebar/chat collapse can all adjust them from JS */
  --side-w: 230px;
  --right-w: 430px;
  --chat-w: 0px;
  --chat-split: 0px;
  /* the editor (middle) column floors at --mid-min: the smallest width its header still
     fits AFTER the adaptive cascade has exhausted every step (Run→icon, engine→short,
     title→70px, icons→⋯). Below this the right/chat panes give up width (minmax(0,…))
     instead — so neither the slider NOR opening the sidebar/assistant can squeeze the
     editor to nothing. Keep --mid-min in sync with EDITOR_FLOOR in layout.js. */
  --mid-min: 400px;   /* editor floor (collapsed header + headroom). Keep == EDITOR_FLOOR in layout.js */
  /* the results (right) column also floors — so opening the assistant (or dragging the
     chat splitter) can't crush the preview below what its header + printer row need. Its
     header drops the layout-button labels (→ icon-only) when narrow, see right.css. */
  --right-min: 490px;   /* results-pane floor. Keep == RIGHT_FLOOR in layout.js */
  grid-template-columns:
    var(--side-w) minmax(var(--mid-min), 1fr) 6px minmax(var(--right-min), var(--right-w)) var(--chat-split) minmax(0, var(--chat-w));
  overflow: hidden;
  /* smooth sidebar / assistant collapse-expand */
  transition: grid-template-columns .22s ease;
}
body.dragging { user-select: none; cursor: inherit; transition: none; }

/* draggable splitters */
.hsplit {
  cursor: col-resize;
  background: var(--border);
  transition: background .12s;
}
.vsplit {
  flex: none; height: 5px;
  cursor: row-resize;
  background: var(--border);
  transition: background .12s;
}
.hsplit:hover, .vsplit:hover,
body.dragging .hsplit.active, body.dragging .vsplit.active { background: var(--accent); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
button:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
::selection { background: var(--accent-soft); }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--faint); }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media (max-width: 1080px) {
  body { --side-w: 200px; }
}