:root {
  --bg: #f3f3f3;
  --fg: #1f1f1f;
  --muted: #6b6b6b;
  --line: #d4d4d4;
  --pane: #ffffff;
  --bar: #f7f7f7;
  --accent: #1f6feb;
  --accent-fg: #ffffff;
  --error: #c62828;
  --warning: #b26a00;
  --unimplemented: #6a1b9a;
  --ok: #2e7d32;
  --tint-error: #fdecea;
  --tint-warning: #fff4e0;
  --tint-ok: #e8f5e9;
  --ins-bg: #e6ffec;
  --ins-fg: #116329;
  --del-bg: #ffebe9;
  --del-fg: #82071e;
  --selection: rgba(31, 111, 235, 0.22);
  --active-line: rgba(127, 127, 127, 0.1);
  --drop: rgba(31, 111, 235, 0.18);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --fg: #e6e6e6;
    --muted: #9a9a9a;
    --line: #333333;
    --pane: #1b1b1b;
    --bar: #222222;
    --accent: #4c8dff;
    --accent-fg: #ffffff;
    --error: #ff6b6b;
    --warning: #ffb74d;
    --unimplemented: #ce93d8;
    --ok: #81c784;
    --tint-error: #3a1f1f;
    --tint-warning: #3a2e1a;
    --tint-ok: #1e3320;
    --ins-bg: #12261e;
    --ins-fg: #7ee2a8;
    --del-bg: #2d1518;
    --del-fg: #ff9b9b;
    --selection: rgba(76, 141, 255, 0.3);
    --active-line: rgba(255, 255, 255, 0.06);
    --drop: rgba(76, 141, 255, 0.22);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.4 system-ui, sans-serif;
  overflow: hidden;
}

.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bar);
}

.bar h1 {
  margin: 0 8px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.spacer {
  flex: 1;
}

.field {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

button,
select {
  font: inherit;
  color: var(--fg);
  background: var(--pane);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
}

button.run {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}

/* The tiles. */

.workbench {
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 6px;
  gap: 0;
}

.column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pane);
  overflow: hidden;
}

.gutter {
  flex: 0 0 6px;
  touch-action: none;
}

.gutter.x {
  cursor: col-resize;
}

.gutter.y {
  cursor: row-resize;
}

.gutter:hover {
  background: var(--accent);
  opacity: 0.4;
}

.pane-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--bar);
  font-size: 12px;
  overflow-x: auto;
}

.pane-bar select,
.pane-bar button {
  padding: 2px 6px;
  font-size: 12px;
}

.pane-bar select.view {
  font-weight: 600;
}

.pane-bar button {
  border-color: transparent;
  background: none;
  color: var(--muted);
}

.pane-bar button:hover {
  color: var(--fg);
  border-color: var(--line);
}

.vs {
  color: var(--muted);
}

.pane-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.pane-body > .dump,
.pane-body > .diff,
.pane-body > ul,
.pane-body > p,
.pane-body > h3 {
  padding: 10px 12px;
}

.pane-body > h3 + pre,
.pane-body > .out,
.pane-body > .crash {
  margin: 0 12px 10px;
}

.pane-body > h3 {
  padding-bottom: 0;
}

.editor {
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  outline: none;
  resize: none;
  background: var(--pane);
  color: var(--fg);
  font: 13px/1.5 var(--mono);
  tab-size: 4;
}

.status {
  padding: 4px 12px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
}

.status.ok {
  background: var(--tint-ok);
  color: var(--ok);
}

.status.warning {
  background: var(--tint-warning);
  color: var(--warning);
}

.status.error {
  background: var(--tint-error);
  color: var(--error);
}

h3 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

pre {
  margin: 0;
  font: 13px/1.5 var(--mono);
  white-space: pre;
}

.muted {
  color: var(--muted);
  margin: 0;
}

.diags,
.notes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.diag {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.notes {
  margin: 4px 0 0 24px;
  color: var(--muted);
}

.notes li {
  padding: 1px 0;
}

.level {
  font-weight: 600;
}

.level.error {
  color: var(--error);
}

.level.warning {
  color: var(--warning);
}

.level.unimplemented {
  color: var(--unimplemented);
}

button.link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  font-family: var(--mono);
  text-decoration: underline;
  cursor: pointer;
}

.crash {
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--tint-error);
}

.crash .notes {
  color: var(--fg);
  margin-left: 0;
  font-family: var(--mono);
  font-size: 12px;
}

/* The diff pane. */

.diff-summary {
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.diff span {
  display: block;
}

.diff .ins {
  background: var(--ins-bg);
  color: var(--ins-fg);
}

.diff .del {
  background: var(--del-bg);
  color: var(--del-fg);
}

@media (max-width: 800px) {
  .workbench {
    flex-direction: column;
    overflow: auto;
  }

  .gutter.x {
    display: none;
  }

  .column {
    flex: none !important;
    min-height: 50vh;
  }

  .bar h1 {
    display: none;
  }
}

/* Dragging panes. */

.pane-bar {
  cursor: grab;
}

.pane.dragging {
  opacity: 0.5;
}

/* The landing zone, drawn over the pane's content. */
.pane.drop-left::after,
.pane.drop-right::after,
.pane.drop-top::after,
.pane.drop-bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: var(--drop);
  border: 2px solid var(--accent);
  border-radius: 6px;
}

.pane.drop-left::after {
  right: 50%;
}

.pane.drop-right::after {
  left: 50%;
}

.pane.drop-top::after {
  bottom: 50%;
}

.pane.drop-bottom::after {
  top: 50%;
}

.hint {
  color: var(--muted);
  font-size: 12px;
}

/* The editor (CodeMirror), themed to the page. */

.cm-host {
  flex: 1;
  display: flex;
  min-height: 0;
}

.pane .cm-editor {
  flex: 1;
  min-width: 0;
  min-height: 0;
  font-size: 13px;
}

.pane .cm-editor.cm-focused {
  outline: none;
}

.cm-bolt-hover {
  padding: 6px 8px;
  max-width: 480px;
}

.cm-bolt-hover pre {
  margin: 0 0 4px;
  font-size: 12px;
}

.cm-bolt-hover div {
  color: var(--muted);
  font-size: 12px;
}

/* Token classes, as the language server's legend names them. */

.tok-keyword {
  color: #a626a4;
}

.tok-string {
  color: #50a14f;
}

.tok-number {
  color: #986801;
}

.tok-comment {
  color: #a0a1a7;
  font-style: italic;
}

.tok-operator {
  color: #0184bc;
}

.tok-function {
  color: #4078f2;
}

.tok-type,
.tok-enum-member {
  color: #c18401;
}

.tok-parameter {
  color: #e45649;
}

.tok-property {
  color: #e45649;
}

.tok-namespace {
  color: #0184bc;
}

.tok-macro {
  color: #a626a4;
}

@media (prefers-color-scheme: dark) {
  .tok-keyword {
    color: #c678dd;
  }

  .tok-string {
    color: #98c379;
  }

  .tok-number {
    color: #d19a66;
  }

  .tok-comment {
    color: #7f848e;
  }

  .tok-operator {
    color: #56b6c2;
  }

  .tok-function {
    color: #61afef;
  }

  .tok-type,
  .tok-enum-member {
    color: #e5c07b;
  }

  .tok-parameter,
  .tok-property {
    color: #e06c75;
  }

  .tok-namespace {
    color: #56b6c2;
  }

  .tok-macro {
    color: #c678dd;
  }
}

.status.running {
  background: var(--tint-warning);
  color: var(--warning);
}

button.stop:disabled {
  opacity: 0.5;
  cursor: default;
}

.pane-title {
  font-weight: 600;
  padding: 0 4px;
}

.of {
  color: var(--muted);
}

.empty {
  margin: auto;
  color: var(--muted);
}

/* The run/stop control at the top of an editor pane. */
.pane-bar button.icon {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
}

.pane-bar button.icon.play {
  color: var(--ok);
}

.pane-bar button.icon.stop {
  color: var(--warning);
}

.pane-bar button.icon:hover {
  color: var(--fg);
}

/* The output pane: one section per phase, its timing beside the title. */
.phase {
  padding: 10px 12px 4px;
}

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

.phase h3 {
  margin-bottom: 6px;
}

.phase .timing {
  margin-left: 8px;
  font-family: var(--mono);
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
}

.phase pre,
.phase .muted,
.phase .crash {
  margin: 0 0 8px;
}

/* The intro shown on arrival: a card over a dimmed page. Clicking the
   backdrop closes it. */

.intro-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
  animation: intro-in 160ms ease-out;
  transition: opacity 200ms ease;
}

.intro-backdrop.closing {
  opacity: 0;
  pointer-events: none;
}

@keyframes intro-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-backdrop {
    animation: none;
    transition: none;
  }
}

.intro {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--pane);
  color: var(--fg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.intro h2 {
  margin: 0 32px 10px 0;
  font-size: 18px;
  font-weight: 600;
}

.intro p,
.intro ul {
  margin: 0 0 10px;
}

.intro ul {
  padding-left: 20px;
}

.intro li + li {
  margin-top: 4px;
}

.intro code {
  font-family: var(--mono);
  font-size: 13px;
}

.intro-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.intro-foot {
  color: var(--muted);
  font-size: 13px;
}

.intro-close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.4;
}

.intro-close:hover {
  color: var(--fg);
}