/* playground.css - the Playground's layout, option B (owner and coordinator, 19 Oct 2026: "too cluttered and badly laid
   out"). Loaded after site.css on the playground only (build.py build_workspace). The editor gets the screen:
   - wide (900 px and up): editor and output side by side (or stacked), each pane's own head holding its controls;
     no bar of loose buttons over them. Code's head: the language menu, the file, the one tool for this language,
     More and Run. Output's head: the run's time and Clear.
   - phones: one pane at a time, the code pane's head on top, and a bar at the bottom with Code, Output and Run, clear of
     the safe area and above the on-screen keyboard (playground.js sets --pg-kb from visualViewport); while typing,
     the symbol row with Tab sits on that bar.
   Sentence case, 44 px targets, no pills, no hairlines; the dark slab in both themes. */

.page-pg .ws.pg-b { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--slab); box-shadow: none; border: 0; }
.pg-b .ws-split { flex: 1; min-height: 0; }

/* a pane's head: one 56 px row */
.pg-b .ws-head { display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 0 8px 0 10px; margin: 0; border: 0; border-radius: 0; background: var(--slab-2); color: var(--slab-mute); flex-wrap: nowrap; }
.pg-b .ws-out .ws-head { padding-left: 16px; background: var(--slab-2); }
.pg-b .ws-out .ws-head b { color: var(--slab-ink); font: 650 15px/1.2 var(--font); }
.pg-b .ws-head .run-state { margin: 0 0 0 6px; font: 500 13.5px/1.2 var(--mono); color: var(--slab-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pg-b .ws-head .ph-acts { margin-left: auto; display: flex; gap: 2px; }
.pg-b .ws-head.ws-bar { position: static; align-items: center; }
.pg-b .ws-tools { display: flex; flex: 0 1 auto; align-items: center; gap: 4px; margin-left: auto; padding: 0; flex-wrap: nowrap; min-width: 0; }
.pg-b .ws-tool, .pg-b .ws-head .btn { height: 44px; min-width: 44px; }
.pg-b .ws-tool { padding: 0 12px; border-radius: 10px; color: var(--slab-mute) !important; font: 600 14.5px/1 var(--font); }
.pg-b .ws-tool:hover { background: rgba(255, 255, 255, .08) !important; color: var(--slab-ink) !important; }
.pg-b .ws-tool:focus-visible, .pg-b .btn-run:focus-visible, .pg-b .ws-lang summary:focus-visible, .pg-b .pg-switch button:focus-visible { outline: 3px solid #5fe0e8; outline-offset: 2px; }
.pg-b .ws-more { width: 44px; padding: 0; justify-content: center; }
.pg-b .ws-more .icon { width: 20px; height: 20px; }
.pg-b .btn-viz .icon { width: 18px; height: 18px; }
.pg-b .btn-run { height: 44px; padding: 0 18px; gap: 8px; font-weight: 700; }
.pg-b .btn-run .icon { width: 16px; height: 16px; }
.pg-b .ws-kbd { margin-left: 4px; font: 500 12px/1 var(--mono); opacity: .8; }

/* the language menu: a real list of links (works without script) */
.pg-b .ws-lang { position: relative; flex: 0 1 auto; min-width: 0; }
.pg-b .ws-lang summary { max-width: 100%; }
.pg-b .ws-lang summary > span:not(.dot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-b .ws-lang summary { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 12px; border-radius: 10px; background: var(--slab-3); color: var(--slab-ink); font: 650 15px/1 var(--font); cursor: pointer; list-style: none; }
.pg-b .ws-lang summary::-webkit-details-marker { display: none; }
.pg-b .ws-lang summary .icon { width: 16px; height: 16px; }
.pg-b .ws-lang[open] summary .icon { transform: rotate(180deg); }
.pg-b .ws-lang-m { display: block; left: 0; min-width: 200px; }
.pg-b .ws-lang-m a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink); font: 550 15px/1.2 var(--font); text-decoration: none; }
.pg-b .ws-lang-m a:hover, .pg-b .ws-lang-m a:focus-visible { background: var(--paper-2); }
.pg-b .ws-lang-m a[aria-current="page"] { font-weight: 700; }
.pg-b .ws-lang .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pg-b .ws-fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; font: 500 14px/1 var(--mono); color: var(--slab-mute); }

/* the dataset: a labelled select */
/* the order in the head: the language's tool, then More, then Run */
.pg-b .ws-ds, .pg-b .btn-viz { order: 1; }
.pg-b .ws-more-wrap { order: 2; }
.pg-b .ws-tools > .btn-run, .pg-b .ws-tools > .btn-checkit { order: 3; }
.pg-b .ws-ds { display: inline-flex; min-width: 0; align-items: center; gap: 0; height: 44px; padding: 0 0 0 12px; border-radius: 10px; background: var(--slab-3); }
.pg-b .ws-ds-k { font: 500 13.5px/1 var(--font); color: var(--slab-mute); }
.pg-b .ws-ds select { height: 44px; max-width: 200px; padding: 0 10px 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--slab-ink); font: 600 14.5px/1 var(--font); }

/* More and its panels hang from the right edge */
.pg-b .ws-more-wrap { position: relative; }
.pg-b .ws-more-m, .pg-b .ws-new, .pg-b .ws-saves, .pg-b .ws-share { left: auto; right: 0; }
.pg-b .ws-more-m { min-width: 220px; }
.pg-b .ws-more-m button { min-height: 44px; }
.pg-b .ws-layout .wl-stack, .pg-b[data-layout="stack"] .ws-layout .wl-side { display: none; }
.pg-b[data-layout="stack"] .ws-layout .wl-stack { display: inline; }

/* the output: fills its pane; when empty it says so in the middle; the Learn line last and quiet */
.pg-b .ws-out { display: flex; flex-direction: column; border-radius: 0; }
.pg-b .ws-out .console { flex: 1; min-height: 0; overflow: auto; }
/* nothing run yet: the one line in the middle of the pane (the console centres it; the line itself stays one line) */
.pg-b .ws-out .console:has(> .pg-empty:only-child) { display: grid; place-items: center; }
.pg-b .ws-out .pg-empty { margin: 0; color: var(--slab-mute); text-align: center; }
.pg-b .ws-foot { flex: none; margin: 0; padding: 10px 16px 14px; font-size: 14px; color: var(--slab-mute); }
.pg-b .ws-foot a { display: inline-flex; align-items: center; min-height: 44px; color: #5fe0e8; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* the bottom bar: phones only */
.pg-b .ws-dock { display: none; }
.page-pg .pg-b ~ .ws-foot { display: none; }

@media (min-width: 900px) {
  .page-pg main { padding: 12px var(--gut) 12px; }
  /* the workspace fills the screen from where it starts (playground.js measures --pg-top: under the header and Code's tab
     row) to 12 px above the bottom, never under 480 px (coordinator, 19 Oct 2026) */
  .page-pg .ws.pg-b { height: max(480px, calc(100dvh - var(--pg-top, 116px) - 12px)); }
  .pg-b .ws-sep { background: var(--slab); }
}

@media (max-width: 899.98px) {
  /* the workspace is the screen under the header: the editor fills it, the bar sits on the keyboard */
  .page-pg main { padding: 0; }
  .page-pg .ws.pg-b { position: fixed; left: 0; right: 0; top: calc(var(--top-h) + var(--pg-vvt, 0px)); bottom: var(--pg-kb, 0px); height: auto; border-radius: 0; z-index: 5; }
  .pg-b .ws-split { display: block; }
  .pg-b .pg-pane { height: 100%; }
  .pg-b[data-show="code"] .ws-out, .pg-b[data-show="out"] .ws-code { display: none; }
  .pg-b .ws-code .editor .cm-editor, .pg-b .ws-out { min-height: 0; }
  .pg-b .ws-out .preview { min-height: 200px; }
  .pg-b .ws-kbd, .pg-b .ws-tools > .btn-run, .pg-b .ws-sep, .pg-b .ws-layout-li, .pg-b .ph-acts [data-act="maxout"] { display: none; }
  .pg-b .ws-head { gap: 4px; padding: 0 4px 0 8px; }
  .pg-b .btn-viz span { display: none; }
  .pg-b .btn-viz { width: 44px; padding: 0; justify-content: center; }
  .pg-b[data-runner="sql"] .ws-fname { display: none; }
  .pg-b .ws-ds select { max-width: 130px; }
  .pg-b .ws-dock { display: block; flex: none; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--slab-2); }
  html.pg-kb-open .pg-b .ws-dock { padding-bottom: 8px; }
  .pg-b .ws-dock-row { display: flex; align-items: center; gap: 8px; }
  .pg-b .pg-switch { display: grid; grid-template-columns: 1fr 1fr; flex: 1; gap: 4px; margin: 0; padding: 4px; border-radius: 12px; background: var(--slab); }
  .pg-b .pg-switch button { height: 44px; border: 0; border-radius: 9px; background: none; color: var(--slab-mute); font: 650 15px/1 var(--font); box-shadow: none; }
  .pg-b .pg-switch button[aria-selected="true"] { background: var(--slab-3); color: var(--slab-ink); }
  .pg-b .ws-dock-run { flex: none; height: 52px; padding: 0 22px; border-radius: 12px; font-size: 16.5px; }
  .pg-b .ws-foot { padding-bottom: 12px; }
  .pg-b .ws-saves, .pg-b .ws-share, .pg-b .ws-new { position: fixed; left: 12px; right: 12px; top: calc(var(--top-h) + 60px); width: auto; max-height: 60dvh; overflow: auto; }
  /* the symbol row while typing: Tab, then the symbols that are slow on a phone keyboard; it scrolls sideways */
  .pg-b .kbar { margin: -2px -4px 8px; }
  .pg-b .kbar .kb-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 4px; }
  .pg-b .kbar .kb-row::-webkit-scrollbar { display: none; }
  .pg-b .kbar .kb-k { flex: none; min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--slab-3); color: var(--slab-ink); font: 600 17px/1 var(--mono); }
  .pg-b .kbar .kb-tab { font: 650 15px/1 var(--font); padding: 0 14px; }
  /* typing with the keyboard up: Run moves onto the symbol row and the Code and Output row steps aside, and on a short
     screen the pane's head too, so the code keeps the room (320 x 568 with a keyboard leaves about 270 px) */
  .pg-b .kbar:not([hidden]) { display: flex; align-items: center; gap: 6px; }
  .pg-b .kbar .kb-row { flex: 1 1 auto; min-width: 0; }
  .pg-b .kbar .kb-run { flex: none; height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--teal-btn); color: #fff; font: 700 15.5px/1 var(--font); }
  html.pg-typing.pg-kb-open .pg-b .ws-dock-row { display: none; }
  html.pg-typing.pg-kb-open .pg-b .kbar { margin-bottom: 0; }
  html:not(.pg-kb-open) .pg-b .kbar .kb-run { display: none; }
  /* the Code tab row is not shown on the playground on a phone (coordinator, 19 Oct 2026): the header has the way out */
  .page-pg .cbl-sub { display: none; }
}
@media (max-width: 899.98px) and (max-height: 700px) {
  html.pg-typing.pg-kb-open .pg-b .ws-code .ws-head { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pg-b .ws-lang summary .icon { transition: none; } }