/* ===== Workbench playground =====
   Full-bleed IDE chrome (design A: "the playground is a tool, not a page").
   The chrome now follows the site's light/dark toggle (see Theme tokens below);
   only the editor/output panes follow the selectable code theme (--code-* from
   code_theme.css). Loaded only by the playground layout via
   stylesheet_link_tag. */

/* Mount-time cloak: this stylesheet is a render-blocking <head> link, so these
   apply before first paint. #app carries v-cloak until Vue compiles the template
   in place; hiding it suppresses the raw-template flash (mustaches + every
   mutually-exclusive status branch showing at once). The #pg-loading skeleton
   stands in while cloaked and is dropped the moment Vue removes the attribute. */
[v-cloak] { display: none; }

/* Cross-fade the skeleton into the mounted app. Both live in .pg-mount; once Vue
   lifts v-cloak the app renders solid in place and the skeleton is lifted onto an
   overlay above it and dissolved away.
   The mount fills whatever the body's flex column leaves below the site header
   (min-height: 0 so the flex item can actually shrink to the leftover space),
   and the mounted app / skeleton stretch to that height. */
.pg-mount { position: relative; flex: 1 1 auto; min-height: 0; }
.pg-mount > #app { height: 100%; }
#pg-loading { height: 100%; transition: opacity 0.35s ease; }
#app:not([v-cloak]) ~ #pg-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  #pg-loading { transition: none; }
}

/* ===== Theme tokens =====
   The workbench chrome is an alias layer over the Signature tokens, which
   signature.css defines on :root and which already
   switch with .dark on <html>. Aliasing rather than restating means the light
   and dark chrome cannot drift from the rest of the site — this block used to
   carry two full parallel palettes, and its comment still claimed to "match"
   greys that had moved on.

   Only semantic colour is declared outright below: ok/err/warn mean something
   the palette does not, so they stay literal and keep their own dark block.

   Editor/output panes are still not themed here — they track the selectable
   code theme (--code-*), so a dark code theme reads as a deliberate editor
   surface inside either chrome. */
.pg-body {
  --pg-bg: var(--sunk);          /* backdrop behind the panes */
  --pg-bar: var(--surface);      /* top toolbar + status bar surface */
  --pg-pane-h-bg: var(--sunk);   /* pane headers, docs companion */
  --pg-chip-bg: var(--sunk);
  --pg-chip-border: var(--rule);
  --pg-border: var(--rule);      /* general hairlines: bar/status + skeleton chips */
  --pg-border-2: var(--rule);    /* pane-h borders, gutter, docs edges */
  --pg-border-3: var(--rule-strong); /* control borders (kbd, disabled run) */
  --pg-text: var(--ink);
  --pg-text-2: var(--ink-soft);
  --pg-text-dim: var(--muted);
  --pg-text-dimmer: var(--faint);
  --pg-text-dimmest: var(--ghost);
  --pg-accent: var(--accent-fill);
  --pg-accent-hover: var(--accent);
  --pg-accent-link: var(--accent);
  --pg-ok: #15803D;            /* darker green for contrast on light */
  --pg-ok-dot: #16A34A;
  --pg-err-fg: #B91C1C;
  --pg-err-bg-soft: rgba(239, 68, 68, 0.12);
  --pg-err-bg-solid: #FDECEC;
  --pg-warn-fg: #B45309;
  --pg-warn-bg-soft: rgba(245, 158, 11, 0.16);
  --pg-warn-bg-solid: #FBF3DF;
  --pg-sk-line: rgba(0, 0, 0, 0.08);
  /* Marks drawn on the code itself (code_editor.js): change bars and search
     hits. The code ground is the code theme's, light or dark in either site
     mode, so these are mid tones with no dark-mode copy. */
  --pg-mark-add: #16A34A;
  --pg-mark-mod: #f59e0b;
  --pg-mark-del: #ef4444;
}
html.dark .pg-body {
  --pg-ok: #7BC77E;
  --pg-ok-dot: #4CAF50;
  --pg-err-fg: #FCA5A5;
  --pg-err-bg-soft: rgba(239, 68, 68, 0.18);
  --pg-err-bg-solid: #241318;
  --pg-warn-fg: #FCD34D;
  --pg-warn-bg-soft: rgba(245, 158, 11, 0.18);
  --pg-warn-bg-solid: #24200F;
  --pg-sk-line: rgba(255, 255, 255, 0.10);
}

/* ===== Chrome ===== */
/* Fixed-height column: shared site header on top (its own height), workbench
   filling the remainder. The header is sticky-positioned for the other pages;
   here nothing scrolls at the page level, so it simply stays put. */
body.pg-body { margin: 0; background-color: var(--pg-bg); color: var(--pg-text);
               display: flex; flex-direction: column; height: 100dvh; }

.pg-shell { display: flex; flex-direction: column; height: 100%; }

/* Top bar (toolbar only — wordmark/nav moved into the shared site header) */
.pg-bar {
  flex: none; display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.625rem; padding: 0.5rem 0.875rem;
  background: var(--pg-bar); border-bottom: 1px solid var(--pg-border);
}
.pg-back { color: var(--pg-text-2); font-size: 0.8125rem; text-decoration: none; }
.pg-back:hover { color: var(--pg-accent-link); }
.pg-notice { color: var(--pg-text-dim); font-size: 0.8125rem; }
.pg-bar-right { margin-left: auto; display: flex; align-items: center;
                flex-wrap: wrap; gap: 0.625rem; }

/* The buffer's name, as a tab. The toolbar had no subject before — three
   controls and a fill, with nothing saying what they act on. */
.pg-file {
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700;
  color: var(--pg-text); padding-bottom: 3px; border-bottom: 2px solid var(--pg-accent);
}

/* Every toolbar control is the header's version pill (.rv-pill in
   shared/_app_header): one 32px control line, --sunk ground, mono label in
   --faint over a bold mono value. The bar used to mix an outlined button, two
   native selects on a white ground and a fill — four control styles on one
   row, three of which appear nowhere else on the site. */
.pg-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px;
  padding: 0 10px; border: 1px solid var(--pg-chip-border); border-radius: var(--r-control);
  background: var(--pg-chip-bg); color: var(--pg-text-2); line-height: 1;
  font-family: var(--font-mono); font-size: 12px; cursor: pointer;
  transition: border-color .15s;
}
.pg-chip:hover:not(.is-disabled) { border-color: var(--pg-border-3); }
.pg-chip.is-disabled { color: var(--pg-text-dimmest); cursor: not-allowed; }
.pg-chip-label { color: var(--pg-text-dimmer); font-size: 11px; }
.pg-chip-select { cursor: default; }
.pg-chip select {
  background: transparent; border: 0; color: var(--pg-text); font-size: 13px;
  font-family: var(--font-mono); font-weight: 700; outline: none; cursor: pointer;
}
.pg-chip select:disabled { color: var(--pg-text-dimmest); cursor: not-allowed; }
.pg-chip select option { background-color: var(--pg-chip-bg); color: var(--pg-text); }
.pg-ok { color: var(--pg-ok); }

.pg-ready { display: inline-flex; align-items: center; gap: 0.375rem;
            color: var(--pg-ok); font-size: 0.8125rem; }
.pg-ready.is-loading { color: var(--pg-text-dim); }
.pg-dot { width: 7px; height: 7px; border-radius: var(--r-badge); background: var(--pg-ok-dot);
          display: inline-block; }

/* The one fill on the page, and the only control that is not a pill.
   --on-accent rather than #fff: in dark the fill is the lighter pink, where
   white text measures 2.99:1. Centered: during a long run the button keeps
   its Run width (runtime.js showLongRun), and Stop sits in the middle. */
.pg-run {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem; height: 32px;
  background: var(--pg-accent); color: var(--on-accent); font-weight: 700; font-size: 0.84375rem;
  border: 0; border-radius: var(--r-control); padding: 0 1rem; cursor: pointer;
}
/* The shortcut rides in the button rather than in the status bar, where it was
   a line of ambient text six feet from the thing it operates. */
.pg-run-kbd {
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1;
  border: 1px solid currentColor; border-radius: var(--r-control);
  padding: 2px 4px; opacity: 0.6;
}
.pg-run:hover:not(.is-disabled) { background: var(--pg-accent-hover); }
.pg-run.is-disabled { background: var(--pg-border-3); color: var(--pg-text-dimmest); cursor: not-allowed; }
/* 14px to match the docs code-bar play glyph; flex:none so it can't squash. */
.pg-run-icon { width: 0.875rem; height: 0.875rem; flex: none; }

/* Try strip: openings for an empty editor, under the toolbar. Quieter than the
   toolbar pills — these are content, not controls, so they carry no fill and no
   ground until hover. The "#" is the brand mark's red punctuation, the same
   rule the wordmark and every method heading follow. */
.pg-try {
  flex: none; display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.375rem 0.5rem; padding: 0.375rem 0.875rem;
  background: var(--pg-bar); border-bottom: 1px solid var(--pg-border);
}
.pg-try-lbl {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-text-dimmer);
  margin-right: 0.125rem;
}
.pg-try-chip {
  font-family: var(--font-mono); font-size: 12px; color: var(--pg-text);
  background: none; border: 1px solid transparent; border-radius: var(--r-control);
  padding: 2px 7px; cursor: pointer; line-height: 1.4;
}
.pg-try-chip:hover { border-color: var(--pg-chip-border); background: var(--pg-chip-bg); }
.pg-try-chip:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 1px; }
.pg-try-recv { color: var(--pg-text-dim); }
.pg-try-chip .sep { color: var(--pg-accent); }

/* Panes: the docs companion beside the editor-over-output stack. */
.pg-panes { flex: 1; display: flex; min-height: 0; }
.pg-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pg-stack { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Editor over output, at every width. Side by side gave half the workbench to
   a pane holding one comment line until the first run, while the editor — the
   only thing anyone types in — got the other half at half the line length.
   --output-basis is the drawer's share of the stack (set by Vue from the same
   20-80 number the drag stores); the editor takes what is left. */
.pg-editor { flex: 1 1 auto; }
/* Shut until a run has something to put in it: the header row over the one
   placeholder line that says what Run will do. */
.pg-output { flex: 0 0 auto; }
.pg-output.is-open { flex: 0 0 var(--output-basis, 40%); min-height: 250px; }
/* The scroll target after the last output line. It needs a box of its own:
   an empty inline span has no height to scroll to. */
.pg-output-end { display: inline-block; width: 1px; height: 1em; vertical-align: text-bottom; }
/* Matches the <pre>'s py-4, so scrolling the end marker into view lands on the
   true end instead of 16px short. */
.ruby-output { scroll-padding-block-end: 1rem; }
/* "Back to editor": phones only (shown in the max-width block below). The
   desktop editor never leaves the screen. */
.pg-to-editor { display: none; }
/* Collapsed: the header row alone. Hides the output, the diagnostics and the
   back-to-editor button with one rule, so none of them needs its own check. */
.pg-output.is-collapsed > :not(.pg-pane-h) { display: none; }

/* Section label, in the docs eyebrow's grammar: tracked mono caps at the text
   floor (--faint), not bold sans at --ghost. Same label, one less style. */
.pg-pane-h {
  flex: none; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.875rem; font-family: var(--font-mono); font-size: 10px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pg-text-dimmer);
  background: var(--pg-pane-h-bg); border-bottom: 1px solid var(--pg-border-2);
}
/* Fills the header row, so the whole bar is the click target. Inherits the
   label's mono caps. */
.pg-output-toggle {
  flex: 1; display: flex; align-items: center; gap: 0.375rem; align-self: stretch;
  margin: -0.375rem 0 -0.375rem -0.875rem; padding: 0.375rem 0 0.375rem 0.875rem;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.pg-output-toggle:hover { color: var(--pg-text-2); }
.pg-output-toggle:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: -2px; }
.pg-clear { margin-left: auto; text-transform: none; letter-spacing: 0;
            font-weight: 500; color: var(--pg-text-dimmer); font-size: 0.75rem;
            background: none; border: 0; cursor: pointer; }
.pg-clear:hover { color: var(--pg-text-2); }
/* Editor-header variant: sits after .pg-theme, whose margin-left:auto already
   pushes the group right — a second auto margin would split the free space
   and strand the button mid-header. */
.pg-clear.is-inline { margin-left: 0; }

.pg-theme { margin-left: auto; display: inline-flex; align-items: center;
            gap: 0.375rem; text-transform: none; letter-spacing: 0; }
.pg-theme span { text-transform: uppercase; letter-spacing: 0.08em; }
.pg-theme select {
  background: var(--pg-chip-bg); border: 1px solid var(--pg-chip-border); border-radius: var(--r-control);
  color: var(--pg-text-2); font-size: 0.75rem; padding: 0.0625rem 0.25rem;
  font-family: var(--font-mono); outline: none;
}
.pg-theme select option { background-color: var(--pg-chip-bg); color: var(--pg-text); }

.pg-diag-tab {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.0625rem 0.5rem; border-radius: var(--r-control); border: 0; cursor: pointer;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0;
  text-transform: none;
}
.pg-diag-tab.is-error { background: var(--pg-err-bg-soft); color: var(--pg-err-fg); }
.pg-diag-tab.is-warn { background: var(--pg-warn-bg-soft); color: var(--pg-warn-fg); }
.pg-diag-caret { transition: transform 120ms ease; display: inline-block; }
.pg-diag-caret.is-open { transform: rotate(180deg); }

/* Docs companion panel (only when a docs "Run" button handed off context) */
/* min-width: 0 is load-bearing: without it the flex default (min-width: auto)
   lets wide content — a long nowrap title, a wide example — inflate the panel
   past its 280px basis and shove the editor/output panes off to the right. */
.pg-docs { flex: 0 0 280px; min-width: 0; background: var(--pg-pane-h-bg); border-right: 1px solid var(--pg-border-2); }
.pg-docs .pg-pane-h { justify-content: space-between; gap: 0.375rem; }
.pg-docs-eyebrow { flex: none; }
/* flex:1 + min-width:0 so the ellipsis can actually engage (a nowrap flex
   child otherwise refuses to shrink and widens the whole panel). */
.pg-docs-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The method name is content, not chrome: opt it out of the pane header's
   bold uppercase + wide tracking, which made long labels look oversized and
   burn through the 280px panel width. */
.pg-docs-title-label { text-transform: none; letter-spacing: normal; font-size: 0.75rem; font-weight: 600; color: var(--pg-text-dim); }
.pg-docs-back { flex: none; text-transform: none; letter-spacing: 0;
                font-weight: 500; color: var(--pg-accent-link); font-size: 0.75rem;
                text-decoration: none; }
.pg-docs-x { flex: none; background: none; border: 0; cursor: pointer;
             color: var(--pg-text-dimmest); font-size: 0.75rem; line-height: 1;
             padding: 0.125rem 0.25rem; }
.pg-docs-x:hover { color: var(--pg-text-2); }
.pg-docs-body { padding: 0.875rem; overflow: auto; font-size: 0.8125rem;
                color: var(--pg-text-dim); }
.pg-docs-sig { font-size: 0.84375rem; font-weight: 600; color: var(--pg-text);
               margin-bottom: 0.625rem; line-height: 1.5; overflow-wrap: break-word; }
.pg-docs-summary { margin: 0 0 0.75rem; line-height: 1.55; }
.pg-docs-ex { position: relative; background: var(--pg-bg); border: 1px solid var(--pg-border);
              border-radius: var(--r-control); padding: 0.5625rem 0.6875rem;
              margin-bottom: 0.625rem; }
.pg-docs-ex pre { margin: 0; font-size: 0.75rem; line-height: 1.7;
                  color: var(--pg-text-2); white-space: pre; overflow-x: auto;
                  /* keep code clear of the floating Insert button */
                  padding-right: 3.5rem; }
.pg-docs-ex button {
  position: absolute; top: 0.375rem; right: 0.4375rem;
  font-size: 0.65625rem; font-weight: 600; color: #fff; background: var(--pg-accent);
  border: 0; border-radius: var(--r-control); padding: 0.1875rem 0.5rem; cursor: pointer;
}
.pg-docs-ex button:hover { background: var(--pg-accent-hover); }

/* Diagnostics lists (in the output pane) */
.pg-diag-list { flex: none; padding: 0.75rem 1rem; font-size: 0.8125rem;
                border-bottom: 1px solid var(--pg-border-2); }
.pg-diag-list.is-error { background: var(--pg-err-bg-solid); color: var(--pg-err-fg); }
.pg-diag-list.is-warn { background: var(--pg-warn-bg-solid); color: var(--pg-warn-fg); }
.pg-diag-head { font-weight: 700; margin-bottom: 0.375rem; }
.pg-diag-list ul { list-style: none; margin: 0; padding: 0; max-height: 8rem;
                   overflow: auto; }
.pg-diag-list li { display: flex; align-items: flex-start; gap: 0.5rem;
                   margin-bottom: 0.25rem; }
.pg-diag-list li button { flex: none; background: none; border: 0; padding: 0;
                          font-size: 0.75rem; cursor: pointer;
                          text-decoration: underline; color: inherit; }

/* Status bar — every piece of ambient status, always in the same place. */
.pg-status {
  flex: none; display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.375rem 1.125rem; padding: 0.3125rem 0.875rem;
  background: var(--pg-bar); border-top: 1px solid var(--pg-border);
  font-size: 0.75rem; color: var(--pg-text-dimmer);
}
.pg-seg { display: inline-flex; align-items: center; gap: 0.375rem; }
.pg-seg.is-ok { color: var(--pg-ok); }
.pg-seg.is-error { color: var(--pg-err-fg); }
.pg-seg-quiet { color: var(--pg-text-dimmest); }
.pg-status kbd {
  font-family: inherit; font-size: 0.6875rem; border: 1px solid var(--pg-chip-border);
  border-radius: var(--r-control); padding: 0 0.3125rem; color: var(--pg-text-dim); background: var(--pg-chip-bg);
}
.pg-status-end { margin-left: auto; display: inline-flex; align-items: center;
                 gap: 0.875rem; }
.pg-status a { color: var(--pg-text-dimmer); text-decoration: none; }
.pg-status a:hover { color: var(--pg-text-2); }

/* Legal strip (D6): the status bar's clothes, one row, below the workbench. */
.pg-legal {
  flex: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0.3125rem 0.875rem;
  background: var(--pg-bar); border-top: 1px solid var(--pg-border); font-size: 0.75rem;
}
.pg-legal a { color: var(--pg-text-dimmest); text-decoration: none; }
.pg-legal a:hover { color: var(--pg-text-2); }

/* ===== Skeleton placeholders (shimmer) ===== */
.pg-sk-chip { background: var(--pg-border); }
.pg-sk-run { background: rgba(225, 29, 72, 0.45); }
.pg-sk-editor { flex: 1 1 auto; }
.pg-sk-output { flex: 0 0 auto; }
.pg-sk-code {
  background: var(--code-bg, #272822);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.pg-sk-line {
  height: 0.7rem;
  background: var(--pg-sk-line);
}
/* The two placeholders had different radii before the Press sweep; they now
   share one, so the radius joins the group that already existed for them. */
.pg-sk-chip,
.pg-sk-line {
  border-radius: var(--r-control);
  animation: pg-sk-pulse 1.4s ease-in-out infinite;
}
@keyframes pg-sk-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-sk-chip, .pg-sk-line { animation: none; }
}

/* ===== Editor ===== */
/* The CodeMirror editor (playground/code_editor.js) fills this box. Its
   colors, gutters and line height live in the theme there; the box sets
   the ground and the type size, which the phone rule below raises to 16px. */
.ruby-editor-wrap {
  background: var(--code-bg, #272822);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* Output panel follows the selected code theme */
.ruby-output {
  background: var(--code-bg, #272822);
  color: var(--code-fg, #f8f8f2);
  min-height: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ruby-output.is-error { color: var(--code-operator, #f92672); }
.ruby-output .placeholder { color: var(--code-comment, #75715e); }
/* REPL return lines: tint the `=>` hashrocket so it stands apart from
   program (puts) output. */
.ruby-output .repl-rocket { color: var(--code-function, #66d9ef); font-weight: 600; }

/* Adjustable editor/output split. The drag gutter and resizing only apply on
   md+; below that the page scrolls and the panes take fixed min-heights, so
   there is no split to move. The drawer's height rides in --output-basis. */
.pg-gutter { display: none; }
@media (min-width: 768px) {
  .pg-gutter {
    display: block;
    flex: 0 0 auto;
    height: 8px;
    cursor: row-resize;
    position: relative;
    touch-action: none;
    /* The gutter sits between two panes painted by the selectable CODE theme
       (--code-bg), NOT the chrome, so a chrome-tinted line can match the code
       background and disappear. A translucent neutral gray instead reads as a
       seam on any surface — darker on light themes, lighter on dark ones. */
    background: rgba(128, 128, 128, 0.32);
  }
  .pg-gutter:hover,
  .pg-gutter.is-dragging { background: var(--pg-accent); }
  .pg-gutter::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 30px; height: 3px;
    border-radius: var(--r-badge);
    /* Beveled grip — light core + dark halo — so the handle is visible against
       any code-theme background, not just when the chrome and code themes agree. */
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  }
}
/* While dragging, lock the resize cursor and stop text selection page-wide. */
.pg-dragging-y, .pg-dragging-y * { cursor: row-resize !important; user-select: none !important; }

/* ===== Mobile ===== */
/* The editor text must stay >= 16px or iOS Safari auto-zooms on focus and
   leaves the page zoomed-in and unusable. The shell releases its fixed height
   (the page scrolls) and the panes stack: companion, editor, output. */
@media (max-width: 767px) {
  /* Release the fixed column: the page scrolls, the stacked panes (companion,
     editor >= 20rem, output >= 14rem) define the height — no min-height chase
     against the variable site-header height above. */
  body.pg-body { display: block; height: auto; }
  .pg-shell { height: auto; }
  .pg-panes { flex-direction: column; }
  .pg-docs { flex: none; border-right: 0; border-bottom: 1px solid var(--pg-border-2); }
  .pg-docs-body { max-height: 16rem; }
  /* Percentages of an auto-height stack resolve to nothing, so the drawer
     takes its content height here and the panes keep their min-heights. */
  .pg-editor, .pg-output, .pg-output.is-open { flex: none; min-height: 0; }
  .ruby-editor-wrap { font-size: 1rem; min-height: 20rem; }
  /* No fold column: it costs ~20px of a 390px line, and folding is a desk
     habit. Three classes and !important to beat CodeMirror's own
     `.cm-gutter { display: flex !important }`, injected after this file. */
  .ruby-editor-wrap .cm-gutters .cm-foldGutter { display: none !important; }
  .ruby-output { min-height: 14rem; }
  .pg-sk-code { min-height: 14rem; }
  .pg-kbd-hint { display: none; }
  /* The caret's line and column cost the status row a third line at 390px,
     and a phone has no arrow keys to move the caret by. */
  .pg-cursor-info { display: none; }
  /* Ends a long output, where a run leaves the reader. */
  .pg-to-editor { display: inline-flex; align-self: flex-end; height: 28px; margin: 0.5rem 0.875rem 0.75rem; }
}