: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);
}

/* The Profile pane (ADR-0044): flame graphs, root on top. */
.flame-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 0;
}

.flame-tabs button {
  padding: 2px 10px;
  border: 1px solid var(--line);
  background: var(--bar);
  color: var(--fg);
  cursor: pointer;
}

.flame-tabs button.active {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 12px 0;
  font-size: 12px;
}

.crumb {
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0 4px;
}

.crumb::after {
  content: "›";
  color: var(--muted);
  margin-left: 4px;
}

.crumb:last-child::after {
  content: "";
}

/* The chart scrolls inside a fixed height, which the handle at its bottom
   edge drags taller or shorter, so a deep stack does not take the pane. */
.flame {
  flex: none;
  margin: 6px 12px;
  padding: 4px;
  height: 280px;
  min-height: 96px;
  resize: vertical;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  max-width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bar);
  /* Repaints inside the chart stay inside it. */
  contain: paint;
}

.flame-head .spacer {
  flex: 1;
}

.flame-head button,
.flame-head .button {
  padding: 2px 10px;
  border: 1px solid var(--line);
  background: var(--bar);
  color: var(--fg);
  border-radius: 3px;
  font: inherit;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

/* A row never grows past the box above it: slivers beyond the edge are
   clipped by the row rather than pushing the chart wider. */
.flame-node {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

/* A box, coloured by what it is (`--h`, `--s`, `--l`), as wide as its
   total time: a darker start for its own time, the rest for what it
   called, each hovered on its own. The label lies over the parts as a
   second item in the same grid cell: nothing here is positioned, since a
   positioned box is a paint layer, and thousands of them made every
   repaint, hit test and compositing pass of the chart slow. */
.flame-box {
  display: grid;
  /* The one column never outgrows the box: the label's padding would
     otherwise widen a sliver's parts past it. */
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  box-sizing: border-box;
  height: 20px;
  margin-bottom: 2px;
  border-radius: 3px;
  color: #1a1a1a;
  cursor: zoom-in;
  /* The frame, shown on the hovered label and its kin. */
  --same: color-mix(in srgb, var(--fg) 55%, transparent);
  outline: 1.5px solid transparent;
  outline-offset: -1.5px;
}

.flame-box > * {
  grid-area: 1 / 1;
  min-width: 0;
}

.flame-parts {
  display: flex;
  height: 100%;
  border-radius: 3px;
  overflow: hidden;
}

.flame-part {
  display: block;
  min-width: 0;
  height: 100%;
}

/* The hovered part lightens through its colour alone: a `filter` here
   would make and unmake a paint layer on every box crossed, and each
   time the browser repainted the whole page. */
.flame-part {
  --boost: 0%;
}

.flame-part.own {
  background: hsl(var(--h) var(--s) calc(var(--l) - 12% + var(--boost)));
}

.flame-part.called {
  background: hsl(var(--h) var(--s) calc(var(--l) + var(--boost)));
}

.flame-part:hover {
  --boost: 5%;
}

/* The label lets the pointer through to the parts under it. */
.flame-label {
  padding: 0 5px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

/* The hovered box, and every other box of the same label, gets a frame
   and a bolder label; nothing moves. */
.flame-box.same {
  outline-color: var(--same);
}

.flame-box.same .flame-label {
  font-weight: 600;
}

.flame-box:hover {
  outline-color: var(--fg);
}

.flame-box.lit {
  --h: 50;
  --s: 100%;
  --l: 62%;
  outline-color: var(--fg);
}

.flame-box.dim {
  opacity: 0.3;
}

.flame-children {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Each child takes its share of the row, never less than a sliver; the
   parent's own time is the gap before them. */
.flame-col {
  min-width: 3px;
  max-width: 100%;
}

.flame-self {
  min-width: 0;
  height: 0;
}

/* The legend: a chip per kind on show. */
.flame-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.flame-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    hsl(var(--h) var(--s) calc(var(--l) - 12%)) 50%,
    hsl(var(--h) var(--s) var(--l)) 50%
  );
}

/* The tooltip follows the pointer, kept inside the window. */
.flame-tip {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(
    min(calc(var(--x) + 14px), calc(100vw - 300px)),
    calc(var(--y) + 16px)
  );
  will-change: transform;
  display: none;
  z-index: 20;
  width: 280px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pane);
  color: var(--fg);
  font-size: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.flame-tip.shown {
  display: block;
}

.flame-tip .tip-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  word-break: break-all;
}

.flame-tip .tip-kind {
  margin: 1px 0 6px 16px;
  color: var(--muted);
  font-size: 11px;
}

.flame-tip dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 0 0 6px;
}

.flame-tip dt {
  color: var(--muted);
}

.flame-tip dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.flame-tip .on {
  color: var(--fg);
  font-weight: 600;
}

.flame-tip dt.on {
  color: var(--accent);
}

/* How much of the box is its own time. */
.flame-tip .tip-bar {
  height: 6px;
  border-radius: 3px;
  background: hsl(var(--h) var(--s) var(--l));
  overflow: hidden;
}

.flame-tip .tip-bar i {
  display: block;
  height: 100%;
  background: hsl(var(--h) var(--s) calc(var(--l) - 12%));
}

.flame-table {
  margin: 0 12px 10px;
  border-collapse: collapse;
  font-size: 12px;
}

.flame-table td {
  padding: 1px 10px 1px 0;
  border-bottom: 1px solid var(--line);
}

.flame-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.flame-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 0;
  font-size: 12px;
}

.flame-controls label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.flame-search {
  font: inherit;
  font-size: 12px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--pane);
  color: var(--fg);
}

/* The Bytecode pane: one row per instruction, coloured by kind, with the
   profile's hits and time beside it after a profiled run (ADR-0044). */
.code {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre;
  overflow: auto;
}

.code .code-fn {
  display: block;
  font-weight: 600;
}

.code .code-head {
  color: var(--muted);
}

.code .op {
  display: block;
  cursor: pointer;
  border-radius: 2px;
}

.code .op:hover {
  background: var(--selection);
}

.code .op .pc {
  color: var(--muted);
}

.code .op .cost {
  display: inline-block;
  min-width: 16ch;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.code .op .cost.hot {
  color: var(--error);
}

.code .op .cost.warm {
  color: var(--warning);
}

.code .op .at {
  color: var(--muted);
}

.code .op.kind-flow .name { color: #8a2be2; }
.code .op.kind-call .name { color: var(--accent); }
.code .op.kind-load .name { color: var(--ok); }
.code .op.kind-store .name { color: #b26a00; }
.code .op.kind-const .name { color: #6b6b6b; }
.code .op.kind-type .name { color: #00838f; }
.code .op.kind-make .name { color: #ad1457; }
.code .op.kind-other .name { color: var(--fg); }

/* Unexecuted instructions fade back after a profiled run. */
.code .op.cold {
  opacity: 0.55;
}

/* A drop-down of checkboxes: what the flame graph leaves out. */
.menu {
  position: relative;
}

.menu summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  list-style: none;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bar);
  color: var(--fg);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.menu summary::-webkit-details-marker {
  display: none;
}

.menu summary::after {
  content: " ▾";
  color: var(--muted);
}

/* How many kinds are hidden; the button keeps its width either way. */
.menu .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 10px;
  line-height: 1;
}

.menu .badge.none {
  background: var(--line);
  color: var(--muted);
}

.menu[open] summary {
  border-color: var(--accent);
}

.menu-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 280px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pane);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.menu-list label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.menu-list label input {
  margin-top: 3px;
}

.menu-list small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

/* The Bytecode pane's sections: one per function, folded by its header,
   the body indented under the header's text. */
.code .code-section + .code-section {
  margin-top: 12px;
}

.code .code-section > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.code .code-body {
  padding-left: 2ch;
}

.code .code-section > summary::-webkit-details-marker {
  display: none;
}

.code .code-section > summary::before {
  content: "▾ ";
  color: var(--muted);
}

.code .code-section:not([open]) > summary::before {
  content: "▸ ";
}

.code .code-section > summary .cost {
  font-weight: 400;
  min-width: 0;
}

/* What an instruction names, in words; its raw payload fades back. */
.code .op .detail {
  color: var(--fg);
}

.code .op .payload {
  color: var(--muted);
  opacity: 0.7;
}

/* A jump's target in its detail, and the row it lands on when clicked. */
.code .op .detail .jump {
  color: var(--accent);
  text-decoration: underline dotted;
}

.code .op.jumped {
  background: var(--selection);
  outline: 1px solid var(--accent);
  transition: background 300ms ease, outline-color 300ms ease;
}

/* A setting in a pane's bar, beside its selects. */
.pane-bar .pane-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  white-space: nowrap;
}