/* The editor, the left rail and the three result panes.
 *
 * Everything here is prefixed `pgc-` (playground component) and every root
 * class is applied by the component's own constructor. The prefix exists
 * because the page shell's playground.css uses `pg-` for a different set of
 * things -- `.pg-pane` there is a top-level column, `.pg-editor` is a static
 * pre -- and two stylesheets disagreeing about what a class means is a bug
 * that only shows up once both are linked.
 *
 * Every colour is a site.css token. Blue (--acc) appears on the active tab
 * underline, on SQL keywords, on the current row's edge and behind a changed
 * line; amber (--amber) appears only where a person has to act or read
 * something -- drift, a modified buffer, a stale plan, a failed read. There
 * is no green and no red on this page.
 *
 * The one new token here is the editor's selection colour, which has to be
 * translucent: the textarea's text is transparent and the highlighting shows
 * through from the layer behind it, so an opaque selection would hide the
 * very thing being selected. */

:root {
  --pgc-sel: rgba(60, 110, 170, 0.24);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pgc-sel: rgba(120, 170, 220, 0.28);
  }
}

:root[data-theme="dark"] {
  --pgc-sel: rgba(120, 170, 220, 0.28);
}

/* ---------- Shared chrome ---------- */

/* The strip over each pane is the application's frame, on --code; the
   selected tab takes the document's own surface, so it reads as the front of
   what is under it (see "Colour discipline" at the top of playground.css). */
.pgc-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--code);
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-right: 16px;
  min-width: 0;
}

/* The tabs keep their width; the note beside them gives way first. A tab
   list allowed to shrink ran its last tab over the note in a narrow pane. */
.pgc-tablist {
  display: flex;
  flex: none;
  gap: 2px;
}

.pgc-tab {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font: 500 13.5px var(--sans);
  color: var(--mute);
  white-space: nowrap;
  cursor: pointer;
}

.pgc-tab:hover {
  color: var(--fg2);
}

/* The phone's first tab over the results: the file and table list. The
   list is the page's rail, shown under this strip when the view is chosen;
   where the rail is beside the panes, the tab is not drawn. */
.pgc-tab-workspace {
  display: none;
}

.pgc-tab.is-active {
  color: var(--fg);
  background: var(--bg);
  border-bottom-color: var(--acc);
}

.pgc-tab:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

/* The note beside the tabs -- the database's address, the buffer's state --
   shows whole or not at all: cut to its first letter it says nothing. It
   takes the room the tabs leave, and where its text does not fit it wraps,
   as one piece, onto a second line the note clips. The ::before is the first
   line: as tall as the bar, and whatever width the text leaves it. */
.pgc-tabmeta {
  flex: 1 1 0;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  font: 12px var(--mono);
  color: var(--mute);
  white-space: nowrap;
}

.pgc-tabmeta::before {
  content: "";
  flex: 1 0 0;
  height: 100%;
}

.pgc-tabmeta.is-amber {
  color: var(--amber);
}

/* The editor's whole-screen button, and schema.sql's Save while it is on.
   The page decides where the button is drawn (playground.css); it has no
   place beside a pane that is already large. */
.pgc-ed-full {
  display: none;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--fg2);
  cursor: pointer;
}

.pgc-ed-full:hover {
  background: var(--bg);
  color: var(--fg);
}

.pgc-ed-full:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

.pgc-ed-full-close,
.pgc-ed-full[aria-pressed="true"] .pgc-ed-full-open {
  display: none;
}

.pgc-ed-full[aria-pressed="true"] .pgc-ed-full-close {
  display: block;
}

.pgc-ed-save {
  flex: none;
  padding: 6px 14px;
  font-size: 13.5px;
}

.pgc-ed-save[hidden] {
  display: none;
}

/* Saved is a state, not an action: it reads as the note beside it. */
.pgc-ed-save[aria-disabled="true"],
.pgc-ed-save[aria-disabled="true"]:hover {
  border-color: transparent;
  background: none;
  color: var(--mute);
  cursor: default;
}

/* A trailing note: `PK`, `28 KiB`, `not in schema.sql`. */
.pgc-mark {
  font-size: 11.5px;
  color: var(--mute);
}

.pgc-mark-amber {
  color: var(--amber);
}

.pgc-hint {
  font: 12.5px var(--sans);
  color: var(--mute);
}

.pgc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Editor ---------- */

.pgc-editor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.pgc-ed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

/* One block of metrics, shared by the three layers that must line up: the
   numbers, the highlight overlay and the textarea the caret lives in. Change
   any of these and change all three. */
.pgc-ed-nums,
.pgc-ed-overlay,
.pgc-ed-input {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 21px;
  letter-spacing: 0;
  tab-size: 2;
  -moz-tab-size: 2;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: normal;
}

.pgc-ed-gutter {
  padding: 14px 10px 14px 14px;
  border-right: 1px solid var(--line2);
  overflow: hidden;
  user-select: none;
}

.pgc-ed-nums {
  display: block;
  text-align: right;
  white-space: pre;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.pgc-ed-code {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.pgc-ed-overlay {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 14px 0;
  width: max-content;
  min-width: 100%;
  white-space: pre;
  color: var(--fg);
  pointer-events: none;
}

.pgc-ed-line {
  display: block;
  padding: 0 16px;
}

/* Lines that differ from the file as it was seeded, the way an editor marks
   them against the last commit: added lines green, changed lines blue, each
   with a bar in the gutter and a tint across the line, and a triangle in the
   gutter where lines were removed. The tints are the two colours mixed into
   the page, so they stay quiet under the text in either theme. The
   full-bleed background is why the horizontal padding lives on the line
   rather than on the overlay. */
.pgc-ed-line.is-added {
  background: color-mix(in oklab, var(--pg-done) 13%, var(--bg));
}

.pgc-ed-line.is-modified {
  background: color-mix(in oklab, var(--acc) 11%, var(--bg));
}

.pgc-ed-num {
  display: block;
  position: relative;
}

/* The bar sits in the gutter's right padding, against its border. */
.pgc-ed-num.is-added::after,
.pgc-ed-num.is-modified::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  width: 3px;
  background: var(--pg-done);
}

.pgc-ed-num.is-modified::after {
  background: var(--acc);
}

.pgc-ed-num.has-removed-above::before,
.pgc-ed-num.has-removed-below::before {
  content: "";
  position: absolute;
  top: -4px;
  right: -11px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--mute);
}

.pgc-ed-num.has-removed-below::before {
  top: auto;
  bottom: -4px;
}

/* A marked line number opens what the seeded file had there. It stays a line
   number to look at: only the pointer, the hover colour and a focus ring say
   it is a button. */
button.pgc-ed-num {
  appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: right;
  cursor: pointer;
}

button.pgc-ed-num:hover {
  color: var(--fg);
}

button.pgc-ed-num:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -1px;
}

/* The peek: the run against the seeded file, and its revert. The popover
   helper places it under the mark; the top layer puts it over the code. */
.pgc-ed-peek {
  inset: auto;
  margin: 0;
  width: max-content;
  min-width: 280px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  color: var(--fg);
}

/* Only the display waits for the popover to open. A closing popover is
   still drawn while it fades, and a gap set only while open went first. */
.pgc-ed-peek {
  gap: 10px;
  justify-items: start;
}

.pgc-ed-peek:popover-open {
  display: grid;
}

.pgc-ed-peek-title {
  margin: 0;
  font: 600 13px var(--sans);
}

.pgc-ed-peek .btn {
  padding: 5px 12px;
  font-size: 13px;
}

/* Lines removed and added, as a unified diff prints them: removed lines
   grey with a minus, added lines on the tint the editor gives new lines. */
.pgc-diff {
  justify-self: stretch;
  margin: 0;
  padding: 8px 0;
  border: 1px solid var(--line2);
  border-radius: 2px;
  background: var(--bg);
  font: 12px/1.6 var(--mono);
  color: var(--fg2);
  overflow-x: auto;
  white-space: pre;
}

.pgc-diff > span {
  display: block;
  padding: 0 10px;
}

.pgc-diff-add {
  background: color-mix(in oklab, var(--pg-done) 13%, var(--bg));
  color: var(--fg);
}

.pgc-diff-del,
.pgc-diff-gap {
  color: var(--mute);
}

.pgc-t-keyword {
  color: var(--acc);
}

.pgc-t-comment {
  color: var(--mute);
}

.pgc-t-string {
  color: var(--fg2);
}

.pgc-ed-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  /* The characters are drawn by the overlay underneath; this layer
     contributes the caret, the selection and the editing behaviour. */
  color: transparent;
  caret-color: var(--fg);
  white-space: pre;
  overflow: auto;
  resize: none;
  scrollbar-width: thin;
}

.pgc-ed-input:focus {
  outline: 0;
}

.pgc-ed-input::selection {
  background: var(--pgc-sel);
}

.pgc-ed-input:read-only {
  caret-color: transparent;
}

.pgc-ed-run {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}

/* The guide put a query here for the visitor to run (Editor.offerRun). The
   row takes the guide's colour, Run takes the accent and pulses once, so the
   button the step is waiting on is the one the eye lands on. The guide never
   presses it. */
.pgc-ed-run.is-offered {
  background: var(--pg-guide);
}

.pgc-ed-run .btn.is-offered {
  border-color: var(--acc);
  background: var(--acc);
  color: var(--bg);
}

.pgc-ed-run .btn.is-offered:hover {
  border-color: var(--fg);
  background: var(--fg);
}

@media (prefers-reduced-motion: no-preference) {
  .pgc-ed-run .btn.is-offered {
    animation: pgc-offer 1.6s ease-out 1;
  }
}

@keyframes pgc-offer {
  from {
    outline: 2px solid var(--acc);
    outline-offset: 0;
  }
  to {
    outline: 2px solid transparent;
    outline-offset: 10px;
  }
}

.pgc-ed-notice {
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  font: 12.5px/1.5 var(--sans);
  color: var(--amber);
}

.pgc-strip {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 16px;
  border-top: 1px solid var(--line);
  font: 12px var(--mono);
  color: var(--mute);
}

/* ---------- Left rail ---------- */

.pgc-rail {
  padding: 16px 0;
  display: grid;
  gap: 20px;
  align-content: start;
  min-width: 0;
  overflow: auto;
}

.pgc-rail-group {
  display: grid;
  gap: 4px;
}

.pgc-rail-head {
  padding: 0 16px 4px;
}

.pgc-rail-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 5px 16px;
  border: 0;
  background: none;
  text-align: left;
  font: 13px var(--mono);
  color: var(--fg2);
  cursor: pointer;
}

.pgc-rail-row.is-static {
  cursor: default;
}

.pgc-rail-row:hover:not(.is-static) {
  color: var(--fg);
}

/* The edge marker sits on the inside so it cannot be mistaken for a border
   between the rail and the editor. */
.pgc-rail-row.is-current {
  color: var(--fg);
  background: var(--accbg);
  box-shadow: inset -2px 0 0 var(--acc);
}

.pgc-rail-row:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

.pgc-rail-glyph {
  color: var(--mute);
  flex-shrink: 0;
}

.pgc-rail-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pgc-rail-row .pgc-mark {
  margin-left: auto;
  padding-left: 8px;
  flex-shrink: 0;
}

.pgc-rail-cols {
  padding: 2px 16px 4px 40px;
  display: grid;
  gap: 2px;
  font: 12px var(--mono);
  color: var(--fg2);
}

.pgc-rail-col {
  display: block;
  overflow-wrap: anywhere;
}

.pgc-rail-colname {
  color: var(--fg2);
}

.pgc-rail-col .pgc-mark {
  margin-left: 6px;
}

.pgc-rail-empty {
  padding: 2px 16px 4px;
  font: 12.5px/1.5 var(--sans);
  color: var(--mute);
}

/* ---------- Result panes ---------- */

.pgc-panes {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}
.pgc-panes > .pgc-tabbar { gap: 6px; padding-right: 8px; }

/* Full records and result panels use native dialogs above the workspace. */
.pgc-overlay {
  padding: 0;
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg);
  background: var(--bg);
  margin: auto;
}
.pgc-overlay[open] { display: flex; flex-direction: column; }
.pgc-overlay::backdrop { background: rgb(0 0 0 / 45%); }
.pgc-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.pgc-overlay-title { font: 500 18px var(--sans); margin: 0; overflow-wrap: anywhere; }
.pgc-overlay-body { padding: 20px; min-height: 0; overflow: auto; }
.pgc-overlay-close[hidden], .pgc-expand[hidden] { display: none; }
.pgc-record-fields { display: grid; grid-template-columns: minmax(90px, 24%) minmax(0, 1fr); margin: 0; }
.pgc-record-fields dt, .pgc-record-fields dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line2); overflow-wrap: anywhere; }
.pgc-record-fields dt { padding-right: 20px; color: var(--mute); font: 500 13px var(--mono); }
.pgc-record-value { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.65 var(--mono); }
.pgc-record-kind { display: block; color: var(--mute); font: 12px/1.65 var(--mono); }
.pgc-data-row { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .pgc-data-row:hover { background: var(--pgc-sel); }
}
.pgc-data-row:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; background: var(--pgc-sel); }
.pgc-expand { flex: none; background: none; color: var(--mute); border: 1px solid var(--line); border-radius: 2px; width: 32px; height: 32px; cursor: pointer; font-size: 21px; }
.pgc-expand:hover, .pgc-expand:focus-visible { color: var(--acc); border-color: var(--acc); }
.pgc-results-overlay { width: calc(100vw - 32px); height: calc(100dvh - 32px); }
.pgc-results-overlay > .pgc-overlay-body { flex: 1; display: flex; padding: 0; overflow: hidden; }
.pgc-results-overlay .pgc-expanded { display: grid; width: 100%; height: 100%; border: 0; grid-template-rows: auto minmax(0, 1fr); }
.pgc-results-overlay .pgc-expanded .pgc-tab-workspace { display: none; }
@media (max-width: 600px) {
  .pgc-panes .pgc-tab { padding-inline: 10px; font-size: 12.5px; }
  .pgc-overlay { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .pgc-overlay-head { padding: 12px; }
  .pgc-overlay-body { padding: 12px; }
  .pgc-record-fields { grid-template-columns: minmax(0, 1fr); }
  .pgc-record-fields dt { border: 0; padding-bottom: 0; }
  .pgc-results-overlay { height: calc(100dvh - 16px); }
  .pgc-results-overlay .pgc-pane-head { align-items: start; flex-direction: column; gap: 6px; }
  .pgc-results-overlay .pgc-pane-status-line { white-space: normal; }
}

.pgc-pane {
  /* All three share one grid row, so switching tabs cannot change the height
     of the column. */
  grid-row: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

/* An author `display` declaration beats the user agent's `[hidden]` rule, so
   every element here that sets `display` has to opt back out explicitly. */
.pgc-pane[hidden],
.pgc-ed-run[hidden],
.pgc-ed-notice[hidden] {
  display: none;
}

.pgc-pane-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 16px 0;
  min-width: 0;
}

.pgc-pane-title {
  font: 500 15px var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pgc-pane-status-line {
  font: 12px var(--mono);
  color: var(--mute);
  white-space: nowrap;
  flex-shrink: 0;
}

.pgc-pane-status-line.is-amber {
  color: var(--amber);
}

.pgc-pane-body {
  padding: 14px 16px 16px;
  display: grid;
  /* Every row as tall as what it holds, so the body is the thing that
     scrolls. With auto rows a short pane shrank them instead: measured at a
     202px pane, the table's row came out 47px and the 118px table ran over
     the note below it. */
  grid-auto-rows: max-content;
  gap: 14px;
  align-content: start;
  overflow: auto;
  min-height: 0;
}

.pgc-pane-note {
  font: 13.5px/1.55 var(--sans);
  color: var(--fg2);
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.pgc-pane-note.is-amber {
  color: var(--amber);
}

/* Consecutive notes are one block of prose, not a stack of dividers. */
.pgc-pane-note + .pgc-pane-note {
  border-top: 0;
  padding-top: 0;
  margin-top: -6px;
}

.pgc-plan-refresh {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  justify-items: start;
}

.pgc-plan-refresh-label {
  font: 500 12px var(--sans);
  color: var(--fg2);
}

.pgc-plan-command {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--code);
  color: var(--fg);
  font: 12px/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pgc-plan-refresh-button {
  padding: 6px 12px;
  font-size: 13px;
}

/* ---------- Empty, loading, error ---------- */

.pgc-pane-status {
  display: grid;
  gap: 8px;
  justify-items: start;
  align-content: start;
  padding: 4px 0;
}

.pgc-pane-status-head {
  font: 500 13.5px var(--sans);
  color: var(--amber);
}

/* The message the runtime produced, kept verbatim and kept on screen. */
.pgc-pane-status-detail {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--code);
  font: 12.5px/1.6 var(--mono);
  color: var(--fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow: auto;
}

.pgc-pane-status-note {
  font: 13.5px/1.55 var(--sans);
  color: var(--mute);
  text-wrap: pretty;
}

.pgc-pane-spin {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--line);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: pgc-spin 0.7s linear infinite;
}

@keyframes pgc-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pgc-pane-spin {
    animation: none;
  }
}

/* ---------- Tables ---------- */

/* Wide row sets scroll inside the pane body, which is the column's only
   scroller; the page itself never scrolls sideways.
 *
 * This wrapper deliberately does NOT set `overflow`. A scroll container has an
 * automatic minimum size of zero, so as a grid item it gets shrunk to fit
 * instead of making its parent scroll -- which cost the last table row three
 * pixels and produced no scrollbar to recover them with. */
.pgc-table-wrap {
  min-width: 0;
}

.pgc-table {
  border-collapse: collapse;
  width: 100%;
  font: 13px var(--mono);
}

.pgc-th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  font: 500 12px var(--mono);
  letter-spacing: 0.04em;
  color: var(--mute);
  white-space: nowrap;
}

.pgc-th.is-new {
  color: var(--fg);
}

.pgc-th .pgc-mark {
  margin-left: 6px;
}

.pgc-td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line2);
  color: var(--fg);
  white-space: pre;
  vertical-align: top;
}

.pgc-td.is-null {
  color: var(--mute);
}

.pgc-table tr.is-pending .pgc-td {
  color: var(--mute);
}

/* The sort control is an affordance, not a label: it appears when the header
   is pointed at or focused, and stays visible on the column being sorted. */
.pgc-sort {
  margin-left: 6px;
  padding: 0 2px;
  border: 0;
  background: none;
  font: 11px var(--mono);
  color: var(--mute);
  cursor: pointer;
  opacity: 0;
  transition: opacity 90ms linear;
}

.pgc-th:hover .pgc-sort,
.pgc-sort:focus-visible,
.pgc-sort.is-sorted {
  opacity: 1;
}

.pgc-sort:hover {
  color: var(--fg);
}

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

.pgc-sort:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

.pgc-flags {
  font-size: 13px;
  max-width: none;
}

/* ---------- Plan ---------- */

.pgc-plan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.pgc-plan-item {
  display: grid;
  gap: 6px;
}

.pgc-plan-note {
  font: 12.5px/1.5 var(--sans);
  color: var(--mute);
}

.pgc-plan-sql,
.pgc-plan-raw {
  margin: 0;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pgc-plan-meta {
  font: 12.5px/1.5 var(--sans);
  color: var(--mute);
}

/* ---------- Narrow screens ---------- */

/* At mobile widths the page shell shows one column at a time, so the panes
   only have to stop insisting on their desktop heights. */
@media (max-width: 900px) {
  .pgc-rail {
    padding: 12px 0;
  }

  .pgc-pane-head {
    flex-wrap: wrap;
    gap: 4px 16px;
  }

  .pgc-pane-status-line {
    white-space: normal;
  }
}