/* The editor as in the terminal: dark, monospace, the TUI's colors. */
:root {
  --bg: #16181d; --panel: #1d2027; --line: #3a3f4b; --text: #e6e6e6;
  --dim: #8a8f98; --bright: #ffd21f;
  --mono: JuliaMono, "DejaVu Sans Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font: 15px/1.35 var(--mono); }
.app { display: flex; flex-direction: column; height: 100vh; }
.toolbar { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.toolbar .logo { height: 34px; border-radius: 6px; margin-right: 6px; background: #fff; }
.toolbar .help { margin-left: auto; }
.toolbar button {
  font: inherit; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer;
}
.toolbar button:hover { border-color: var(--bright); }
/* minmax(0, ...): a pane's longest line never sizes its track (it
   scrolls inside the pane); --source and --output are the splits the
   dividers move (xetal-layout). */
.panes {
  flex: 1; min-height: 0; display: grid; gap: 0; padding: 8px;
  grid-template-columns: minmax(0, var(--source, 50%)) 8px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 8px minmax(0, var(--output, 32%));
  grid-template-areas: "source columns rendered" "rows rows rows" "output output output";
}
.divider { touch-action: none; position: relative; }
.divider.columns { grid-area: columns; cursor: col-resize; }
.divider.rows { grid-area: rows; cursor: row-resize; }
.divider::after {
  content: ""; position: absolute; border-radius: 2px; background: var(--line);
}
.divider.columns::after { left: 3px; width: 2px; top: 30%; bottom: 30%; }
.divider.rows::after { top: 3px; height: 2px; left: 40%; right: 40%; }
.divider:hover::after, .divider:active::after { background: var(--bright); }
.divider.columns:hover::after { left: 2px; width: 4px; top: 0; bottom: 0; }
.divider.rows:hover::after { top: 2px; height: 4px; left: 0; right: 0; }
.pane { min-width: 0; }
.toolbar button:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line); }
.pane { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.pane h2 { margin: 0; padding: 3px 10px; font-size: 13px; font-weight: normal; color: var(--dim); border-bottom: 1px solid var(--line); }
.pane.current { border: 3px solid var(--bright); }
.pane.current h2 { background: var(--bright); color: #1d2330; font-weight: bold; }
.source { grid-area: source; } .rendered { grid-area: rendered; } .output { grid-area: output; }
.pane textarea, .pane pre {
  flex: 1; margin: 0; padding: 8px 10px; overflow: auto; white-space: pre;
  font: inherit; color: var(--text); background: transparent; border: 0; outline: none; resize: none;
  font-variant-ligatures: none; caret-color: var(--bright);
}
.panes.zoomed { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "only"; }
.panes.zoomed .divider { display: none; }
.panes.zoomed .pane { display: none; }
.panes.zoomed .pane.current { display: flex; grid-area: only; }
/* Token classes, as xetal render --color draws them. */
.c-builtin { color: #5b9cff; } .c-userfunc { color: #3fbf5f; } .c-libfunc { color: #22b8c8; }
.c-lambdaarg { color: #d25fd2; } .c-number, .c-exponent { color: #e0b400; }
.c-string { color: #e8d27a; } .c-symbol { color: #7fbfff; } .c-quote { font-weight: bold; }
.c-comment { color: var(--dim); } .c-macro { color: #e0b400; font-weight: bold; }
.c-error { color: #ff6b6b; }

.pane pre .picture { display: block; margin: 8px 0; }
.pane pre .picture img { max-width: 100%; max-height: 420px; background: #fff; border-radius: 4px; }
/* While a run goes on: a spinner in the output pane's title, and Run
   shown as a red Stop. */
.panes.running .output h2::after {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px;
  vertical-align: middle; border: 2px solid var(--line); border-top-color: var(--bright);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.toolbar button.stop { color: #ff6b6b; border-color: #ff6b6b; }
.name-forms { width: 100%; max-width: 640px; border-radius: 6px; }
footer {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
  padding: 6px 12px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px;
}
footer a { color: var(--dim); } footer a:hover { color: var(--bright); }
footer .sep { opacity: 0.6; }
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 10; }
.dialog {
  position: relative; width: min(760px, 92vw); max-height: 86vh; overflow: auto;
  background: var(--panel); border: 2px solid var(--bright); border-radius: 10px;
  padding: 18px 24px; font: 14px/1.5 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
.dialog h1 { margin: 0 0 8px; font-size: 20px; color: var(--bright); }
.dialog h2 { margin: 16px 0 6px; font-size: 15px; color: var(--bright); }
.dialog code, .dialog table { font-family: var(--mono); font-size: 13px; }
.dialog td { padding: 2px 14px 2px 0; }
.dialog a { color: #7fbfff; }
.dialog .close {
  position: absolute; top: 8px; right: 10px; font-size: 22px; line-height: 1;
  background: none; border: 0; color: var(--dim); cursor: pointer;
}
.dialog .close:hover { color: var(--bright); }
.toolbar .name { color: var(--dim); font-size: 13px; }

/* Phones and narrow windows: the toolbar wraps (Open on its own line,
   every button reachable and big enough to tap), the panes stack (the
   ASCII, the drawing, the output, each scrolling inside), the page
   scrolls down to the footer, and nothing is wider than the screen. */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  .app { height: auto; min-height: 100vh; }
  .toolbar { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  .toolbar .logo { height: 30px; }
  .toolbar .open-menu { order: 10; flex: 1 1 100%; min-width: 0; }
  .toolbar .open-menu .open { width: 100%; }
  .open-menu .menu { width: calc(100vw - 16px); }
  .toolbar .name { display: none; }
  .toolbar button { min-height: 38px; padding: 4px 12px; }
  .panes { display: flex; flex-direction: column; flex: none; gap: 8px; padding: 6px; }
  .panes .divider { display: none; }
  .panes .source, .panes .rendered { height: 38vh; }
  .panes .output { height: 46vh; }
  .panes.zoomed .pane.current { height: 80vh; }
  footer { padding-bottom: 14px; }
}

/* A notebook: statements drawn indented above their output; the one
   Step ran last marked with a bright bar. */
.pane pre .statement { display: block; }
.pane pre .statement.current { border-left: 3px solid var(--bright); margin-left: -6px; padding-left: 3px; }
.toolbar button.on { border-color: var(--bright); color: var(--bright); }

/* Open: a menu of collapsible groups (Demos, Classics, Libraries, Misc,
   Your files), each header a caret, its name and a count. */
.open-menu { position: relative; }
.menu-backdrop { position: fixed; inset: 0; z-index: 40; }
.open-menu .menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 41;
  width: min(380px, calc(100vw - 24px)); max-height: min(72vh, calc(100vh - 96px));
  overflow-y: auto; padding: 4px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.open-menu .group:not(:last-child) { border-bottom: 1px solid var(--line); }
.toolbar .open-menu .menu button {
  display: flex; gap: 8px; align-items: center; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: 4px; color: var(--text);
}
.toolbar .open-menu .menu button:hover, .toolbar .open-menu .menu button:focus { background: var(--bg); outline: none; }
.toolbar .open-menu .group-header { font-weight: 700; padding: 8px 10px; }
.open-menu .caret { color: var(--bright); width: 12px; font-size: 11px; }
.open-menu .label { flex: 1; }
.open-menu .count { color: var(--dim); font-size: 12px; }
.toolbar .open-menu .item { padding: 5px 10px 5px 30px; font-size: 14px; }

/* The terminal: the line being typed for a waiting program, its cursor
   a block on the character under it. */
.pane pre .typing { color: var(--bright); }
.pane pre .typing .cursor { background: var(--bright); color: var(--bg); }
.pane.output pre:focus { outline: none; }

/* The terminal's grid (QD6): a program's placed and styled text. */
.pane pre .grid .bold { font-weight: 700; }
.pane pre .grid .fg-black { color: #3b3f4b; }
.pane pre .grid .fg-red { color: #ff6b6b; }
.pane pre .grid .fg-green { color: #5fd37a; }
.pane pre .grid .fg-yellow { color: #ffd21f; }
.pane pre .grid .fg-blue { color: #5b9cff; }
.pane pre .grid .fg-magenta { color: #d25fd2; }
.pane pre .grid .fg-cyan { color: #22b8c8; }
.pane pre .grid .fg-white { color: #ffffff; }
.pane pre .grid .bg-black { background: #000000; }
.pane pre .grid .bg-red { background: #8a1f1f; }
.pane pre .grid .bg-green { background: #1f6a32; }
.pane pre .grid .bg-yellow { background: #7a6400; }
.pane pre .grid .bg-blue { background: #1f3f8a; }
.pane pre .grid .bg-magenta { background: #6a1f6a; }
.pane pre .grid .bg-cyan { background: #135f68; }
.pane pre .grid .bg-white { background: #c8ccd4; color: #16181d; }