/* dke-studio.css — the DKE Studio doc-page run affordance.
 *
 * DKE Studio is the human interface to DKE: the docs (tutorial / reference /
 * specification) and a live REPL are one surface. This stylesheet carries the
 * DOC-PAGE run pieces: the "Run" affordance on each runnable example and the
 * docking drawer they run in, plus the dock-scoped .pg-editor/.pg-result height
 * overrides. The run-panel component itself — the shared editor + result look —
 * lives in run-panel.css (Coherence Spec A3: one .css per component family),
 * which both this page and the standalone /studio/ REPL link; this file only
 * layers the dock overrides on top.
 *
 * The run client is /js/playground.js (drives #pg-source/#pg-run/#pg-result);
 * /js/dke-studio.js adds the doc-page inline-run wiring — every Run posts to the
 * existing /api/playground endpoint. */

/* ── Inline "Run" affordance on a runnable example (doc pages) ────────────── */
/* A pre.dpy is positioned so its Run button can sit at the top-right corner. */
.bs-doc pre.dpy { position: relative; }
.dke-run { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;
           font-family: var(--ls-font-mono, ui-monospace, monospace); font-size: 0.72rem;
           letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer;
           color: #cdeeee; background: rgb(var(--ls-studio-accent-rgb) / 0.14);
           border: 1px solid rgb(var(--ls-studio-accent-rgb) / 0.5); border-radius: 7px;
           padding: 0.28rem 0.6rem; transition: background .15s, border-color .15s; }
.dke-run:hover, .dke-run:focus { background: rgb(var(--ls-studio-accent-rgb) / 0.28);
           border-color: var(--ls-studio-accent); outline: none; }
.dke-run:disabled { opacity: 0.55; cursor: default; }

/* ── The docking run drawer (doc pages) ──────────────────────────────────── */
/* Idle: a slim bar fixed to the bottom. Active: expands to editor + result.
 * A body class (dke-dock-open) drives the expanded state; the drawer never
 * covers content permanently because its collapsed height is small and the
 * page gets bottom padding equal to the collapsed bar. */
.dke-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
            background: rgba(8,16,19,0.97); backdrop-filter: blur(6px);
            border-top: 1px solid rgb(var(--ls-studio-accent-rgb) / 0.35);
            box-shadow: 0 -8px 30px rgba(0,0,0,0.4); }
.dke-dock-bar { display: flex; align-items: center; gap: 0.9rem; cursor: pointer;
                padding: 0.6rem 1.1rem; max-width: 1100px; margin: 0 auto; }
.dke-dock-title { font-family: var(--ls-font-mono, ui-monospace, monospace);
                  font-size: 0.8rem; letter-spacing: 0.04em; color: #cdeeee; }
.dke-dock-sub { font-size: 0.78rem; color: rgba(255,255,255,0.45); }
.dke-dock-chevron { margin-left: auto; color: rgba(255,255,255,0.5);
                    transition: transform .2s; font-size: 0.9rem; }
.dke-dock-open .dke-dock-chevron { transform: rotate(180deg); }
.dke-dock-body { display: none; max-width: 1100px; margin: 0 auto;
                 padding: 0 1.1rem 1.1rem; }
.dke-dock-open .dke-dock-body { display: grid; gap: 0.9rem; }
@media (min-width: 900px) {
  .dke-dock-open .dke-dock-body { grid-template-columns: 1fr 1fr; align-items: start; }
  .dke-dock-body .dke-dock-run { grid-column: 1 / -1; }
}
.dke-dock-body .pg-editor { min-height: 150px; max-height: 40vh; }
.dke-dock-body .pg-result { max-height: 40vh; overflow: auto; }
.dke-dock-run { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
/* Keep the page clear of the collapsed bar. */
body.has-dke-dock { padding-bottom: 3.2rem; }