/* The playground: a toolbar, the editor beside its output; stacked on phones. */
body.page-playground { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.pg { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 12px max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)); }
.pg-bar { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 16px; border: var(--hair) solid var(--line); box-shadow: var(--shadow); flex-wrap: nowrap; }
.pg-spacer { flex: 1; }
.pg-select { position: relative; display: inline-flex; align-items: center; }
.pg-select select { appearance: none; -webkit-appearance: none; height: 32px; padding: 0 30px 0 14px; border-radius: 999px; border: var(--hair) solid var(--line); background: var(--fill); color: var(--fg); font: 500 14px var(--font); letter-spacing: -0.01em; cursor: pointer; max-width: 260px; text-overflow: ellipsis; }
.pg-select select:hover { background: var(--fill-2); }
.pg-select .chev { position: absolute; right: 10px; width: 14px; height: 14px; transform: rotate(90deg); pointer-events: none; color: var(--fg-3); }
.pg-select.small select { height: 28px; font-size: 13px; padding-left: 12px; }
.pg-select.block { display: flex; margin: 0 0 8px; }
.pg-select.block select { width: 100%; max-width: none; }
.pg-select option { color: initial; }
.pg-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pg-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); flex: none; transition: background-color .2s; }
.pg-status.ok .dot { background: var(--fg); }
.pg-status.busy .dot { animation: pulse 1s ease-in-out infinite; }
.pg-status.err .dot { background: var(--err); }
.pg-status.warn .dot { background: var(--warn); }
@keyframes pulse { 50% { opacity: .25; } }

.pg-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pg-pane { min-height: 0; min-width: 0; display: flex; flex-direction: column; border-radius: var(--r-l); border: var(--hair) solid var(--line); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.pane-head { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 16px; border-bottom: var(--hair) solid var(--line); background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); font-size: 13px; }
.pane-head .file { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pane-head .file .icon { width: 16px; height: 16px; }
.pane-note { color: var(--fg-3); font-size: 12px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor-host { flex: 1; min-height: 0; }
.editor-host .cm-editor { height: 100%; }

.tabs { gap: 2px; padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { appearance: none; border: 0; background: transparent; color: var(--fg-2); height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--font); cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; }
.tabs button .icon { width: 15px; height: 15px; }
.tabs button:hover { color: var(--fg); background: var(--fill); }
.tabs button[aria-selected="true"] { color: var(--fg); background: var(--fill-2); }
.tabs .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; display: inline-grid; place-items: center; background: var(--fill-2); color: var(--fg-2); }
.tabs .count.err { background: var(--err); color: #fff; }

.panel { flex: 1; min-height: 0; overflow: auto; }
.panel[hidden] { display: none !important; }
.panel.split { display: grid; grid-template-columns: 200px minmax(0, 1fr); overflow: hidden; }
.panel-tools { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: var(--hair) solid var(--line); background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 20px; color: var(--fg-2); font-size: 14px; }
.empty .icon { width: 18px; height: 18px; }

.problems { list-style: none; margin: 0; padding: 6px; }
.problems button { appearance: none; width: 100%; text-align: left; border: 0; background: transparent; color: var(--fg); border-radius: 10px; padding: 9px 10px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 10px; cursor: pointer; font: 13.5px/1.45 var(--font); }
.problems button:hover, .problems button:focus-visible { background: var(--fill); }
.problems .sev { width: 9px; height: 9px; border-radius: 50%; margin: 5px 0 0 4px; background: var(--fg-3); }
.problems .error .sev { background: var(--err); }
.problems .warning .sev { background: var(--warn); }
.problems .msg { overflow-wrap: anywhere; }
.problems .at { font: 12px var(--mono); color: var(--fg-3); white-space: nowrap; }
.problems .code { grid-column: 2; font: 11.5px var(--mono); color: var(--fg-3); }

.diagram-view { padding: 16px; display: flex; justify-content: center; align-items: flex-start; min-height: calc(100% - 50px); }
.diagram-view svg { max-width: 100%; height: auto; filter: grayscale(1); border-radius: 12px; background: #fff; box-shadow: 0 0 0 var(--hair) var(--line); }
:root[data-theme="dark"] .diagram-view svg { filter: grayscale(1) invert(.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .diagram-view svg { filter: grayscale(1) invert(.92); } }
.diagram-view .msg { color: var(--fg-2); font-size: 14px; padding: 8px; }

.files { border-right: var(--hair) solid var(--line); overflow: auto; padding: 8px; }
.files button { appearance: none; display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent; color: var(--fg-2); text-align: left; border-radius: 8px; padding: 6px 8px; font: 12.5px var(--mono); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files button .icon { width: 14px; height: 14px; flex: none; color: var(--fg-3); }
.files button:hover { background: var(--fill); color: var(--fg); }
.files button[aria-selected="true"] { background: var(--fill-2); color: var(--fg); font-weight: 600; }
.files .dir { font: 600 11px var(--font); color: var(--fg-3); padding: 10px 8px 4px; }
.files .notes { font-size: 12px; color: var(--fg-2); padding: 8px; margin: 0; }
.viewer { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 14px 16px; overflow: auto; font-size: 12.5px; line-height: 1.55; white-space: pre; min-height: 0; }

#sim-frame { filter: grayscale(1); display: block; width: 100%; height: calc(100% - 53px); border: 0; background: #fff; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 80; padding: 10px 18px; border-radius: 999px; border: var(--hair) solid var(--line); box-shadow: var(--shadow-lg); font-size: 14px; animation: pop .2s var(--ease); max-width: calc(100vw - 32px); }

/* the editor (CodeMirror), in the site's tokens */
.cm-editor { font-size: 13.5px; background: transparent; color: var(--fg); }
.cm-editor.cm-focused { outline: none; }
.cm-scroller { font-family: var(--mono); line-height: 1.6; }
.cm-editor .cm-gutters { background: transparent !important; border-right: var(--hair) solid var(--line) !important; color: var(--fg-3) !important; }
.cm-editor .cm-activeLineGutter, .cm-editor .cm-activeLine { background: var(--fill) !important; }
.cm-editor .cm-activeLineGutter { color: var(--fg); }
.cm-cursor { border-left-color: var(--fg); border-left-width: 1.5px; }
.cm-selectionBackground, .cm-editor .cm-content ::selection { background: var(--fill-2) !important; }
.cm-focused .cm-selectionBackground { background: rgba(127, 127, 127, .28) !important; }
.cm-matchingBracket { background: var(--fill-2); outline: var(--hair) solid var(--line-strong); }
.cm-lintRange-error { background-image: none !important; text-decoration: underline wavy var(--err); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cm-lintRange-warning { background-image: none !important; text-decoration: underline wavy var(--warn); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cm-lintRange-info, .cm-lintRange-hint { background-image: none !important; text-decoration: underline dotted var(--fg-3); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cm-lint-marker { width: 8px !important; height: 8px !important; border-radius: 50%; content: none !important; background: var(--fg-3); margin: 5px 2px 0; }
.cm-lint-marker-error { background: var(--err); }
.cm-lint-marker-warning { background: var(--warn); }
.cm-diagnostic-info, .cm-diagnostic-hint { border-left-color: var(--fg-3); }
.cm-tooltip { border: var(--hair) solid var(--line) !important; border-radius: 12px; background: var(--glass-strong) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--shadow-lg); color: var(--fg); overflow: hidden; }
.cm-tooltip-lint { font: 13px var(--font); }
.cm-diagnostic { padding: 6px 10px; border-left-width: 3px; }
.cm-diagnostic-error { border-left-color: var(--err); }
.cm-diagnostic-warning { border-left-color: var(--warn); }
.cm-panels { background: var(--glass-strong); color: var(--fg); border-color: var(--line) !important; }
.cm-panel.cm-search input, .cm-panel.cm-search button { font: 13px var(--font); }
.cm-textfield { background: var(--fill); border: var(--hair) solid var(--line); border-radius: 6px; color: var(--fg); }
.cm-button { background: var(--fill); border: var(--hair) solid var(--line); border-radius: 6px; color: var(--fg); background-image: none; }
.cm-searchMatch { background: var(--fill-2); outline: var(--hair) solid var(--line-strong); }
.cm-foldPlaceholder { background: var(--fill-2); border: 0; color: var(--fg-2); }
.cm-content { color: var(--syn-fg); }
.cm-tok-k { color: var(--syn-keyword); }
.cm-tok-kc { color: var(--syn-control); }
.cm-tok-p { color: var(--syn-property); }
.cm-tok-d, .cm-tok-t { color: var(--syn-type); }
.cm-tok-f { color: var(--syn-function); }
.cm-tok-c { color: var(--syn-keyword); }
.cm-tok-n { color: var(--syn-constant); }
.cm-tok-m { color: var(--syn-number); }
.cm-tok-s { color: var(--syn-string); }
.cm-tok-x { color: var(--syn-comment); font-style: italic; }
.cm-tok-o { color: var(--syn-operator); }
.cm-tok-v { color: var(--syn-variable); }
.cm-tok-g { color: var(--syn-tag); }

@media (max-width: 900px) {
  body.page-playground { height: auto; overflow: visible; }
  .pg { padding: 10px 12px 16px; }
  .pg-split { grid-template-columns: minmax(0, 1fr); }
  .pg-editor { height: 56vh; }
  .pg-output { height: 72vh; }
  .pg-bar { flex-wrap: wrap; position: sticky; top: calc(var(--topbar-h) + 6px); z-index: 20; }
  .pg-status { order: 5; flex-basis: 100%; padding: 2px 4px 0; }
  .btn-sm .lbl { display: none; }
  .btn-sm { padding: 0 10px; }
  .panel.split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .files { border-right: 0; border-bottom: var(--hair) solid var(--line); max-height: 150px; }
  .pg-bar > .pg-select { flex: 1; min-width: 0; }
  .pg-bar > .pg-select select { width: 100%; max-width: none; }
  .pg-spacer { display: none; }
}