/*
 * terse-explorer — the shell.
 *
 * Dark, thin-ruled and quiet: near-black grounds, one hairline weight, text
 * buttons with arrow glyphs, numbered section labels, and monospace for
 * anything that is TERSE. Nothing here is decorative — no gradients, no
 * shadows, no rounded chrome beyond what a hit target needs. The syntax
 * palette is next door in `css/highlight.css`.
 *
 * The design tokens are `apps/terse-browser`'s, unchanged, so the two apps are
 * recognisably the same family.
 *
 * Load order matters exactly once: this file must come after
 * `css/highlight.css`, because the layer's default foreground is set here and
 * every token colour there is more specific than it.
 */

/* ------------------------------------------------------------- the one knob --
   Every font size below is in `rem`, so this single number sizes the whole
   interface. 16px is the browser default; 21.33px is that plus a third, which
   is the size this page is read at. Change it and everything moves together.

   The two editor metrics below are the exception, and stay in px on purpose:
   the render layer and the textarea must agree on an INTEGER line box, and a
   line height derived from a fractional root would land on 26.99997px in one
   element and round differently in the other. See the two-layer rule. */

html {
  font-size: 21.33px;
}

:root {
  /* Tourbillon.ai brand palette — dark ("reverse") look, matching /welcome */
  --bg0: #0A0A0C;
  --bg1: #101013;
  --ink: #FCFCFC;
  --ink-dim: #9B9AA0;
  --accent: #6BC1EC;      /* brand blue, dark-bg variant */
  --accent-2: #FF6B57;    /* brand red, dark-bg variant */
  --brand-red: #E82813;
  --ok: #5eead4;
  --warn: #fbbf24;
  --err: #fb7185;

  /* One hairline weight for the whole page. Two would be a decision to make
     over and over; one is a grid. */
  --rule: rgba(232, 238, 248, 0.12);
  --rule-strong: rgba(232, 238, 248, 0.22);

  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* The editor metrics contract, in one place. See the two-layer rule below. */
  --code-size: 18px;
  --code-line: 27px;
  --code-pad-y: 11px;
  --code-pad-x: 13px;

  /* How wide the Examples column is when it is open. */
  --examples-width: min(23rem, 42vw);
}

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

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

/* The page is a three-row grid, and the first column is the Examples pane —
   zero-wide until it is opened, which is what makes it push the log rather
   than cover it. */
body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  /* The page never scrolls. The log scrolls, the drawer scrolls, the boxes
     scroll — the frame stays put, because the composer is anchored to the
     bottom of the viewport and a scrolling body would take it away. */
  overflow: hidden;
}

/* ------------------------------------------------------------- the masthead */

.masthead {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px 12px;
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

/* Tourbillon.ai home link: logo mark + wordmark, before the app title. */
.brand-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand-home svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: var(--ink);
  transition: fill 0.25s ease;
}
.brand-home:hover svg {
  fill: var(--brand-red);
}
.brand-home em {
  font-style: normal;
  color: var(--brand-red);
}
.brand-sep {
  color: var(--ink-dim);
  opacity: 0.5;
  align-self: center;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.brand h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.brand h1 .dim {
  color: var(--ink-dim);
}

.brand-tag {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.masthead-actions {
  display: flex;
  align-items: baseline;
  gap: 18px;
  white-space: nowrap;
}

.key-note {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

.key-note code {
  font: inherit;
  color: var(--accent);
}

.key-note.is-unavailable code {
  color: var(--err);
}

/* --------------------------------------------------------------- buttons --
   Text, a rule under it on hover, and an arrow where the action goes
   somewhere. No fills, no radii, no shadow. */

.button {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  cursor: pointer;
}

.button:hover:not(:disabled),
.button:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--brand-red);
  outline: none;
}

.button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.button.is-primary {
  color: var(--accent);
}

.button.is-primary:hover:not(:disabled),
.button.is-primary:focus-visible {
  border-bottom-color: var(--accent);
}

/* The one button on the page that is pressed all day gets a box around it —
   still a hairline, still no fill. */
.button.is-boxed {
  border: 1px solid var(--rule-strong);
  padding: 7px 14px;
}

.button.is-boxed.is-primary {
  border-color: rgba(107, 193, 236, 0.45);
}

.button.is-boxed:hover:not(:disabled),
.button.is-boxed:focus-visible {
  border-color: var(--accent);
}

.button .glyph {
  margin-left: 9px;
}

/* --------------------------------------------------------------- the log -- */

.log {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.log-empty {
  margin: auto;
  max-width: 46ch;
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.8125rem;
}

.log-empty code {
  font-family: var(--mono);
  color: var(--accent);
}

/* A section label: a dim ordinal, then the name, in the site's numbered
   style. */
.label {
  font-family: var(--mono);
  font-size: 0.65625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.label .ordinal {
  color: var(--rule-strong);
  margin-right: 7px;
}

/* ------------------------------------------------------------ log entries --
   One issue, one entry: the pair that was sent, the state that came back, and
   what the engine said about it. Rendered once — see js/log.js. */

.entry {
  border-top: 1px solid var(--rule);
  padding-top: 8px;
}

.entry-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.entry-toggle,
.entry-copy {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--ink-dim);
  background: none;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
}

.entry-toggle:hover,
.entry-copy:hover,
.entry-toggle:focus-visible,
.entry-copy:focus-visible {
  color: var(--accent);
  outline: none;
}

.entry-counts {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

.entry-body {
  padding: 8px 0 4px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The ratio the composer stood at when Issue was pressed, kept. It arrives as
   two custom properties (js/log.js) rather than as an inline template, so a
   narrow viewport can stack the pair the same way it stacks the composer. It
   is not draggable here: an entry is a record of what was sent, and a record
   whose shape can be edited afterwards is a worse record. */
.entry-pair {
  display: grid;
  grid-template-columns: var(--pair-left, 60fr) var(--pair-right, 40fr);
  gap: 0;
  align-items: start;
}

.entry-pane {
  min-width: 0;
  padding-right: 18px;
}

.entry-pane + .entry-pane {
  border-left: 1px solid var(--rule);
  padding-left: 18px;
  padding-right: 0;
}

.entry-pane .code,
.entry-state .code {
  margin: 5px 0 0;
}

.entry-state .label .ordinal {
  color: var(--ok);
}

.entry-diagnostics {
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.entry-summary {
  display: none;
  padding: 4px 0 2px 26px;
  font-family: var(--mono);
  font-size: 0.71875rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

.entry-summary p {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.entry.is-collapsed .entry-body {
  display: none;
}

.entry.is-collapsed .entry-summary {
  display: block;
}

/* --------------------------------------------------------- the examples --
   A column, not an overlay. Closed it is zero wide; open it takes width from
   the log and the log gets it back on close. The children keep the open width
   so nothing inside reflows while the column animates. */

.examples {
  grid-column: 1;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 0;
  overflow: hidden;
  background: var(--bg0);
  /* Zero-width, and that means zero: a hairline on a closed column is a 1px
     stripe down the side of the log that nobody asked for. The border arrives
     with the width. */
  border-right: 0 solid var(--rule);
  transition: width 0.18s ease-out;
}

.examples.is-open {
  width: var(--examples-width);
  border-right-width: 1px;
}

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

.examples-head,
.examples-intro,
.examples-list,
.examples-foot {
  width: var(--examples-width);
}

.examples-head,
.examples-intro,
.examples-foot {
  flex: 0 0 auto;
}

.examples-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--rule);
}

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

.examples-intro {
  margin: 0;
  padding: 12px 18px 10px;
  font-size: 0.75rem;
  color: var(--ink-dim);
}

.examples-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
}

.examples-item {
  margin: 0;
}

.examples-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  padding: 9px 18px 10px 16px;
  cursor: pointer;
  color: var(--ink-dim);
  font-family: var(--sans);
}

.examples-pick:hover,
.examples-pick:focus-visible {
  background: var(--bg1);
  color: var(--ink);
  outline: none;
}

.examples-pick.is-current {
  border-left-color: var(--accent);
  background: var(--bg1);
}

.examples-ordinal {
  grid-row: 1;
  font-family: var(--mono);
  font-size: 0.65625rem;
  letter-spacing: 0.1em;
  color: var(--rule-strong);
  padding-top: 2px;
}

.examples-pick.is-current .examples-ordinal {
  color: var(--accent);
}

.examples-title {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--mono);
  font-size: 0.71875rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.examples-blurb {
  grid-row: 2;
  grid-column: 2;
  font-size: 0.71875rem;
  line-height: 1.45;
  color: var(--ink-dim);
  padding-top: 3px;
}

.examples-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 14px;
  border-top: 1px solid var(--rule);
}

.examples-foot .spacer {
  flex: 1;
}

/* ---------------------------------------------------------- the composer -- */

.composer-region {
  grid-column: 2;
  grid-row: 3;
  position: relative;
  border-top: 1px solid var(--rule);
  padding: 12px 24px 14px;
  background: var(--bg0);
}

/* The two flexible columns come from js/split.js as custom properties, so this
   rule stays in charge of the layout and the drag stays in charge of the
   number — which is what lets the narrow-viewport rule below stack the two
   boxes at all. */
.composer {
  display: grid;
  grid-template-columns: var(--split-left, 60fr) 11px var(--split-right, 40fr);
  align-items: stretch;
}

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

.pane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Both heads are the same height or the two boxes start at different
     y-positions and the divider stops looking like one rule. */
  min-height: 26px;
  padding: 0 2px 6px;
}

.pane-head .label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#pane-declarations .pane-head .label {
  color: var(--accent-2);
}

#pane-declarations .pane-head .ordinal {
  color: rgba(255, 107, 87, 0.45);
}

#pane-queries .pane-head .label {
  color: var(--accent);
}

#pane-queries .pane-head .ordinal {
  color: rgba(107, 193, 236, 0.45);
}

/* The query pin: session-only, and sitting directly above the box it governs
   rather than down beside the button, because it is a property of the Query
   box and not of the act of issuing. */
.pin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-family: var(--mono);
  /* Sentence case, not the label uppercase used elsewhere: it is a sentence,
     and setting it in caps makes it half as wide again — which pushes the
     "Query" label into an ellipsis as soon as the Examples pane takes width
     off the composer. */
  font-size: 0.5875rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  white-space: nowrap;
  cursor: pointer;
}

.pin:hover {
  color: var(--ink);
}

.pin input {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* The other box's issue, without its lines: a glyph in the corner of the box
   that is not being read. */
.pane-badge {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1;
}

.pane-badge.is-error {
  color: var(--err);
}

.pane-badge.is-warning {
  color: var(--warn);
}

.pane-clear {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--ink-dim);
  background: none;
  border: 0;
  padding: 1px 3px;
  cursor: pointer;
}

.pane-clear:hover,
.pane-clear:focus-visible {
  color: var(--err);
  outline: none;
}

/* The drag handle between the two boxes. Thin, and the whole column is the
   hit target — a 1px line is a rule, not a control. */
.divider {
  position: relative;
  cursor: col-resize;
  touch-action: none;
  align-self: stretch;
  margin-top: 26px;
}

.divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--rule);
}

.divider:hover::before,
.divider.is-dragging::before,
.divider:focus-visible::before {
  background: var(--accent);
}

.divider:focus-visible {
  outline: none;
}

/* A full-width row across the bottom of the composer, ruled off from the
   boxes above it: the session's two memories on the left, the one button you
   press all day on the right. */
.composer-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.composer-foot .spacer {
  flex: 1;
}

/* ------------------------------------------------- the two-layer editor --
   Both layers are declared together and must stay that way: any metric that
   differs between them shears the overlay. See js/editor.js.

   The wrapper's height is set by js/split.js — the two boxes grow as one unit
   — so both layers fill it absolutely and neither one decides it. */

.terse-editor {
  position: relative;
  width: 100%;
  min-width: 0;
}

.terse-editor > pre.terse-layer,
.terse-editor > textarea {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 1px solid var(--rule);
  padding: var(--code-pad-y) var(--code-pad-x);
  width: 100%;
  height: 100%;
  font-family: var(--mono);
  font-size: var(--code-size);
  /* An integer, not a ratio: a fractional line box rounds differently in a
     textarea than in a pre, and the two drift apart down the page. */
  line-height: var(--code-line);
  font-variant-ligatures: none;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: left;
  white-space: pre;
  overflow-wrap: normal;
  tab-size: 4;
  -moz-tab-size: 4;
}

.terse-editor > pre.terse-layer {
  overflow: hidden;
  color: var(--ink);
  background: #060608;
  pointer-events: none;
}

.terse-editor > pre.terse-layer code {
  font: inherit;
  color: inherit;
}

.terse-editor > textarea {
  display: block;
  resize: none;
  color: transparent;
  background: transparent;
  caret-color: var(--accent);
  overflow: auto;
}

.terse-editor > textarea:focus {
  outline: none;
  border-color: var(--rule-strong);
}

#pane-declarations .terse-editor > textarea:focus {
  border-color: rgba(255, 107, 87, 0.55);
}

#pane-queries .terse-editor > textarea:focus {
  border-color: rgba(107, 193, 236, 0.55);
}

/* The selection is painted above the coloured layer, so it has to be
   see-through or it would hide the very text being selected. */
.terse-editor > textarea::selection {
  background: rgba(107, 193, 236, 0.28);
}

/* --------------------------------------------------- the diagnostics strip --
   Above the composer and OVER the log, never in the flow: what the page does
   as you type must not move the thing you are typing into. It grows upward
   from the composer's top edge and is capped by js/app.js at a share of the
   log's height, so a pathological pile cannot bury the log. */

.diagnostics {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  z-index: 5;
  overflow-y: auto;
  padding: 6px 24px 8px;
  background: rgba(10, 10, 12, 0.94);
  border-top: 1px solid var(--rule);
}

.diagnostics[hidden] {
  display: none;
}

.diagnostics-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 4px;
}

.diagnostics-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.71875rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.diagnostics-list .m-error {
  color: var(--err);
}

.diagnostics-list .m-warning {
  color: var(--warn);
}

.diagnostics-list .m-clean {
  color: var(--ok);
}

/* A pass is in flight; what is showing is the previous answer. */
.diagnostics.is-stale .diagnostics-list {
  opacity: 0.5;
}

/* ----------------------------------------------------------- the drawer --
   The state, slid in over the page. Not a column beside the log: the store is
   the longest text here and it would take the log's width away from it for
   the entire session, to show something that is only sometimes being read. */

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  width: 45vw;
  min-width: min(92vw, 26rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg0);
  border-left: 1px solid var(--rule-strong);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.18s ease-out, visibility 0s linear 0.18s;
}

.drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.18s ease-out;
}

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

.drawer-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--rule);
}

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

.drawer-note {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-dim);
}

.drawer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 20px 24px;
}

.drawer-body .code {
  margin: 0;
}

/* Any block of TERSE the page shows outside a box: the same metrics as the
   editor, minus the chrome an editor needs. */
.code {
  font-family: var(--mono);
  font-size: var(--code-size);
  line-height: var(--code-line);
  white-space: pre;
  overflow-x: auto;
  color: var(--ink);
  tab-size: 4;
  -moz-tab-size: 4;
}

.code.is-empty {
  color: var(--ink-dim);
  font-style: italic;
}

/* ------------------------------------------------------------ orientation --
   A spotlight and a card. The spotlight is one element placed over the target
   with a box-shadow wider than any viewport: the shadow dims the page and the
   element's own box is the hole. Shadows are not hit-tested, so the backdrop
   underneath is what actually catches clicks. See js/tour.js. */

.tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.tour-spot {
  position: fixed;
  z-index: 41;
  pointer-events: none;
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(4, 4, 5, 0.74);
}

.tour-spot[hidden] {
  display: none;
}

.tour-card {
  position: fixed;
  z-index: 42;
  width: min(24rem, 88vw);
  background: var(--bg1);
  border: 1px solid var(--rule-strong);
  padding: 13px 16px 12px;
}

.tour-step {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--rule-strong);
}

.tour-title {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.tour-body {
  margin: 0 0 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

.tour-foot {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tour-foot .spacer {
  flex: 1;
}

/* ------------------------------------------------------ the narrow view --
   No width to take, so nothing takes any: the two boxes stack, the divider
   goes away with the drag it exists for, the Examples pane becomes an overlay
   and the drawer takes the whole screen. The composer's cap moves to 90vh of
   the two boxes together — that number lives in js/app.js, because only script
   knows the composer is stacked. */

@media (max-width: 760px) {
  body {
    grid-template-columns: minmax(0, 1fr);
  }

  .log,
  .composer-region {
    grid-column: 1;
  }

  /* The masthead wraps to three rows at this width, and every pixel it takes
     is a pixel the log does not have — the composer is allowed 90vh of what is
     left under it. So it is tightened rather than merely re-flowed. */
  .masthead {
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 9px 14px 8px;
  }

  .masthead-actions {
    gap: 12px;
    flex-wrap: wrap;
    white-space: normal;
  }

  .brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }

  .brand h1 {
    font-size: 0.8125rem;
  }

  .brand-tag {
    font-size: 0.6875rem;
    white-space: normal;
  }

  .log {
    padding: 14px 14px 18px;
  }

  .entry-body,
  .entry-summary {
    padding-left: 14px;
  }

  /* The pair stacks for the same reason the composer does — and can, because
     js/log.js writes the ratio as custom properties rather than as an inline
     template. */
  .entry-pair {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  .entry-pane {
    padding-right: 0;
  }

  .entry-pane + .entry-pane {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: 10px;
  }

  .composer-region {
    padding: 10px 14px 12px;
  }

  .composer {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  /* The handle exists to drag one column against another; with one column
     there is nothing to drag, so it goes rather than sitting there inert. */
  .divider {
    display: none;
  }

  .diagnostics {
    padding-left: 14px;
    padding-right: 14px;
  }

  .examples {
    position: fixed;
    inset: 0;
    z-index: 25;
    width: 100%;
    border-right: 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.18s ease-out, visibility 0s linear 0.18s;
  }

  .examples.is-open {
    width: 100%;
    transform: none;
    visibility: visible;
    transition: transform 0.18s ease-out;
  }

  .examples-head,
  .examples-intro,
  .examples-list,
  .examples-foot {
    width: 100%;
  }

  .drawer {
    width: 100%;
    min-width: 0;
  }
}

/* ------------------------------------------------------------ scrollbars -- */

.log::-webkit-scrollbar,
.diagnostics::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar,
.examples-list::-webkit-scrollbar,
.code::-webkit-scrollbar,
.pane-out pre::-webkit-scrollbar,
.terse-editor > textarea::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.log::-webkit-scrollbar-thumb,
.diagnostics::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb,
.examples-list::-webkit-scrollbar-thumb,
.code::-webkit-scrollbar-thumb,
.pane-out pre::-webkit-scrollbar-thumb,
.terse-editor > textarea::-webkit-scrollbar-thumb {
  background: var(--rule);
}

.log::-webkit-scrollbar-thumb:hover,
.diagnostics::-webkit-scrollbar-thumb:hover,
.drawer-body::-webkit-scrollbar-thumb:hover,
.examples-list::-webkit-scrollbar-thumb:hover,
.code::-webkit-scrollbar-thumb:hover,
.pane-out pre::-webkit-scrollbar-thumb:hover,
.terse-editor > textarea::-webkit-scrollbar-thumb:hover {
  background: var(--rule-strong);
}