/* The page's styling: a workbench of three panes under a short header.
 *
 * Every colour is a custom property on :root. Light is the default; the dark
 * values stand twice, once for a system preference the page follows and once
 * for an explicit choice. theme.mjs reads the --term-* and --ansi-*
 * properties, so the terminal takes its colours from here too.
 *
 * The palette has no red. The one blue is the link and primary accent, the
 * one orange the second; no state is told by colour alone. The --syn-*
 * properties are the editor's syntax colours: blue for keywords, orange for
 * strings, violet for numbers and labels, grey for comments; weight and slant
 * tell them apart as well.
 */

:root {
  color-scheme: light;

  --bg: #f3f4f7;
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --ink: #1b1d22;
  --ink-2: #3d424b;
  --dim: #646a75;
  --line: #d8dbe2;
  --line-2: #e8eaef;

  --accent: #0072b2;
  --accent-ink: #ffffff;
  --orange: #e69f00;
  --orange-soft: #fbf1d9;

  /* Syntax highlighting in the editor; troupe-editor.mjs reads these. */
  --syn-keyword: var(--accent);
  --syn-constant: #5b3fb8;
  --syn-string: #9a6500;
  --syn-label: #5b3fb8;
  --syn-comment: var(--dim);
  --syn-operator: var(--ink-2);

  --term-bg: #fafbfc;
  --term-fg: #1b1d22;
  --term-cursor: #0072b2;
  --term-selection: #0072b240;
  --ansi-black: #1b1d22;
  --ansi-red: #9f2b86;
  --ansi-green: #00704f;
  --ansi-yellow: #9a6500;
  --ansi-blue: #0072b2;
  --ansi-magenta: #5b3fb8;
  --ansi-cyan: #0a7b8a;
  --ansi-white: #7c838e;
  --ansi-bright-black: #5b606b;
  --ansi-bright-red: #b8449c;
  --ansi-bright-green: #008a62;
  --ansi-bright-yellow: #b37a00;
  --ansi-bright-blue: #2a8fce;
  --ansi-bright-magenta: #7357d1;
  --ansi-bright-cyan: #1a93a3;
  --ansi-bright-white: #a0a6b0;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(20, 24, 32, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #111317;
    --panel: #191c22;
    --panel-2: #1f2329;
    --ink: #e6e8ec;
    --ink-2: #c4c8d0;
    --dim: #959ba7;
    --line: #2d323b;
    --line-2: #262a32;

    --accent: #56b4e9;
    --accent-ink: #0b1a24;
    --orange: #e69f00;
    --orange-soft: #3a2e12;

    --syn-keyword: var(--accent);
    --syn-constant: #a995ee;
    --syn-string: #e69f00;
    --syn-label: #a995ee;
    --syn-comment: var(--dim);
    --syn-operator: var(--ink-2);

    --term-bg: #0e1013;
    --term-fg: #e6e8ec;
    --term-cursor: #56b4e9;
    --term-selection: #56b4e950;
    --ansi-black: #2d323b;
    --ansi-red: #d98cc0;
    --ansi-green: #3fbf96;
    --ansi-yellow: #f0cf5a;
    --ansi-blue: #56b4e9;
    --ansi-magenta: #a995ee;
    --ansi-cyan: #5fd0dc;
    --ansi-white: #c4c8d0;
    --ansi-bright-black: #6b7280;
    --ansi-bright-red: #eba8d3;
    --ansi-bright-green: #6fd9b3;
    --ansi-bright-yellow: #f6df85;
    --ansi-bright-blue: #8fcff3;
    --ansi-bright-magenta: #c3b4f6;
    --ansi-bright-cyan: #8fe3eb;
    --ansi-bright-white: #f2f3f5;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #111317;
  --panel: #191c22;
  --panel-2: #1f2329;
  --ink: #e6e8ec;
  --ink-2: #c4c8d0;
  --dim: #959ba7;
  --line: #2d323b;
  --line-2: #262a32;

  --accent: #56b4e9;
  --accent-ink: #0b1a24;
  --orange: #e69f00;
  --orange-soft: #3a2e12;

  --syn-keyword: var(--accent);
  --syn-constant: #a995ee;
  --syn-string: #e69f00;
  --syn-label: #a995ee;
  --syn-comment: var(--dim);
  --syn-operator: var(--ink-2);

  --term-bg: #0e1013;
  --term-fg: #e6e8ec;
  --term-cursor: #56b4e9;
  --term-selection: #56b4e950;
  --ansi-black: #2d323b;
  --ansi-red: #d98cc0;
  --ansi-green: #3fbf96;
  --ansi-yellow: #f0cf5a;
  --ansi-blue: #56b4e9;
  --ansi-magenta: #a995ee;
  --ansi-cyan: #5fd0dc;
  --ansi-white: #c4c8d0;
  --ansi-bright-black: #6b7280;
  --ansi-bright-red: #eba8d3;
  --ansi-bright-green: #6fd9b3;
  --ansi-bright-yellow: #f6df85;
  --ansi-bright-blue: #8fcff3;
  --ansi-bright-magenta: #c3b4f6;
  --ansi-bright-cyan: #8fe3eb;
  --ansi-bright-white: #f2f3f5;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ---- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 0 4px;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- header -------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.site-header h1 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.site-header .title p {
  margin: 4px 0 0;
  color: var(--dim);
  font-size: 13px;
  max-width: 70ch;
}

#status { color: var(--ink-2); font-weight: 500; }

.site-controls { display: flex; align-items: center; gap: 12px; padding-top: 2px; }

.level-choice input { font: inherit; font-family: var(--mono); font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: inherit; }

.theme-choice, .sample-choice, .level-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  font-size: 12.5px;
}

/* The sample selector gives way before the buttons wrap under the heading. */
.sample-choice { flex: 1 1 10rem; min-width: 0; }
.sample-choice select { flex: 1 1 auto; min-width: 0; max-width: 100%; }

/* ---- the workbench ------------------------------------------------------- */

.workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  max-width: 1720px;
  margin: 0 auto;
}

@media (min-width: 960px) {
  .workbench { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 20px; gap: 20px; }
  .pane-stages { grid-column: 1 / -1; }
}

.pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pane-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  min-height: 46px;
}

.pane-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.spacer { flex: 1 1 auto; }

.hint { color: var(--dim); font-size: 12.5px; }
.pane-head .hint { flex-basis: 100%; }

@media (min-width: 1280px) {
  .pane-head .hint { flex-basis: auto; flex: 1 1 0; min-width: 0; }
}

.pane-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  min-height: 34px;
  padding: 7px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--dim);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* An error is set off by weight and a bar, not by a hue. */
.error-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
}
.error-text:not(:empty) {
  flex-basis: 100%;
  color: var(--ink);
  font-weight: 500;
  border-left: 3px solid var(--orange);
  background: var(--orange-soft);
  padding: 6px 10px;
  margin: 2px 0;
  border-radius: 0 4px 4px 0;
}

/* ---- code: the editor, the stage view, the terminal ---------------------- */

.editor, .code-view {
  margin: 0;
  padding: 12px 14px;
  border: 0;
  outline: none;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  tab-size: 2;
  color: var(--ink);
  background: var(--panel);
}

/* The program pane and the terminal pane have a height of their own, set
   here and changed by dragging a pane's corner; the editor and the terminal
   fill what the pane's head and foot leave. The page keeps the two panes
   the same height when they sit side by side. The terminal's rows are
   fitted to its box, so no height here may follow the content. */
.pane-editor, .pane-terminal {
  height: 560px;
  min-height: 240px;
  resize: vertical;
}
.editor {
  display: block;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  white-space: pre;
  overflow: auto;
  caret-color: var(--accent);
}
.editor::placeholder { color: var(--dim); opacity: 1; }
.editor:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }

/* The program editor is CodeMirror, mounted in the host; it fills the host
 * and scrolls inside it. The focus ring is the host's, drawn over the gutter. */
/* The files of the program, as tabs above the editor. */
.file-tabs { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; padding: 6px 8px 0;
             border-bottom: 1px solid var(--line); background: var(--panel-2); }
.file-tabs button { border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; padding: 4px 10px;
                    font-family: var(--mono); font-size: 12.5px; color: var(--dim); background: transparent; }
.file-tabs button[aria-selected="true"] { color: var(--ink); background: var(--panel); border-color: var(--line); font-weight: 600; }
.file-tabs button .close { margin-left: 8px; color: var(--dim); }
.file-tabs button .close:hover { color: var(--ink); }
.file-tabs .add-file { font-family: inherit; }
.file-tabs .new-file { font: inherit; font-family: var(--mono); font-size: 12.5px; padding: 3px 6px; margin-bottom: 4px;
                       border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: inherit; width: 14rem; }
#source-editor { display: flex; flex-direction: column; padding: 0; }
#source-editor .cm-editor { flex: 1 1 0; min-height: 0; height: 100%; }
#source-editor:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }

.editor-small {
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
}

.code-view {
  white-space: pre;
  overflow: auto;
  max-height: 520px;
  min-height: 96px;
}
.code-view-small {
  min-height: 0;
  max-height: 360px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
}
.code-view-small:empty { display: none; }

.terminal {
  flex: 1 1 0;
  min-height: 0;
  padding: 10px 12px;
  background: var(--term-bg);
  overflow: hidden;            /* the terminal is fitted to this box */
}
.terminal .xterm { height: 100%; }
.terminal .xterm-viewport { background-color: var(--term-bg) !important; }  /* xterm.css paints it black */

/* ---- controls ------------------------------------------------------------ */

button, select {
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, box-shadow 120ms;
}
button:hover:not(:disabled) { border-color: var(--dim); background: var(--panel-2); }
button:active:not(:disabled) { transform: translateY(1px); }

select { padding-right: 8px; }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  padding-inline: 16px;
}
button.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); filter: brightness(1.08); }

/* Disabled: a dashed border and a fainter face. */
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  border-style: dashed;
  box-shadow: none;
}
button.primary:disabled { background: var(--panel-2); color: var(--dim); border-color: var(--dim); }

.row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- the stages pane ----------------------------------------------------- */

.pane-stages details + details { border-top: 1px solid var(--line); }

summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--panel-2);
  user-select: none;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid var(--dim);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  flex: none;
}
details[open] > summary::before { transform: rotate(90deg); }
details[open] > summary { border-bottom: 1px solid var(--line); }
summary:hover { color: var(--ink); }

.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 6px 10px 0;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.tabs:empty { display: none; }

/* The selected tab is bold with a bar under it; the others are plain and dim. */
.tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  padding: 6px 10px 7px;
  margin-bottom: -1px;
  background: transparent;
  color: var(--dim);
  font-size: 12.5px;
  white-space: nowrap;
}
.tabs button:hover:not(:disabled) { background: var(--panel-2); color: var(--ink); border-color: transparent; }
.tabs button[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.ir { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; }
.ir .hint { margin: 0; max-width: 80ch; }
/* A blob is one long base64 line: it wraps, and the text area grows to its
   content (the page sets its height), so the whole of every blob is in view. */
.ir .editor-small { min-height: 72px; resize: vertical; overflow: hidden;
                    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }

/* ---- phone --------------------------------------------------------------- */

@media (max-width: 600px) {
  .site-header { padding: 16px 16px 14px; }
  .workbench { padding: 12px; gap: 12px; }
  .pane-head, .pane-foot, summary, .ir { padding-inline: 12px; }
  .pane-editor, .pane-terminal { height: 440px; }
  .editor, .code-view { padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}