/* Code Lab professional editor look (playground-fx.js, founder 2026-10-08: "Make it a beautiful professional coding
   playground"). Scoped to #codeLab / html.plx. Themes redefine the --code-* colours playground.css already uses. */

/* ---------- Themes ---------- */
#codeLab.plx-t-midnight { --code-bg: #0d1117; --code-gutter: #0d1117; --code-text: #e6edf3; --code-muted: #6e7681; --code-tag: #7ee787; --code-attr: #79c0ff; --code-string: #a5d6ff; --code-keyword: #ff7b72; --code-number: #79c0ff; --code-prop: #d2a8ff; --code-def: #ffa657; --code-select: rgba(56,139,253,.28); --plx-line: rgba(110,118,129,.12); --plx-ed-bar: #010409; --plx-mini: rgba(201,209,217,.5); --plx-accent: #2f81f7; }
#codeLab.plx-t-dracula { --code-bg: #282a36; --code-gutter: #282a36; --code-text: #f8f8f2; --code-muted: #6272a4; --code-tag: #ff79c6; --code-attr: #50fa7b; --code-string: #f1fa8c; --code-keyword: #ff79c6; --code-number: #bd93f9; --code-prop: #8be9fd; --code-def: #50fa7b; --code-select: rgba(68,71,90,.9); --plx-line: rgba(68,71,90,.55); --plx-ed-bar: #21222c; --plx-mini: rgba(248,248,242,.45); --plx-accent: #bd93f9; }
#codeLab.plx-t-ocean { --code-bg: #0f1c2e; --code-gutter: #0f1c2e; --code-text: #d6e4f5; --code-muted: #5d7a9a; --code-tag: #5ccfe6; --code-attr: #ffd580; --code-string: #bae67e; --code-keyword: #ffa759; --code-number: #f29e74; --code-prop: #73d0ff; --code-def: #d4bfff; --code-select: rgba(64,156,255,.25); --plx-line: rgba(93,122,154,.16); --plx-ed-bar: #0a1422; --plx-mini: rgba(214,228,245,.45); --plx-accent: #39bae6; }
#codeLab.plx-t-light { --code-bg: #ffffff; --code-gutter: #ffffff; --code-text: #1f2328; --code-muted: #8c959f; --code-tag: #116329; --code-attr: #0550ae; --code-string: #0a3069; --code-keyword: #cf222e; --code-number: #0550ae; --code-prop: #8250df; --code-def: #953800; --code-select: rgba(84,174,255,.3); --plx-line: rgba(140,149,159,.12); --plx-ed-bar: #f6f8fa; --plx-mini: rgba(31,35,40,.4); --plx-accent: #0969da; }

/* ---------- Editor ---------- */
.plx #codeLab .lab-panel .CodeMirror { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--plx-fs, 14px); line-height: 1.65; font-variant-ligatures: contextual; }
.plx #codeLab .lab-panel .CodeMirror-gutters { border-right: 1px solid color-mix(in srgb, var(--code-muted) 25%, transparent); }
.plx #codeLab .lab-panel .CodeMirror-linenumber { color: color-mix(in srgb, var(--code-muted) 80%, transparent); }
.plx #codeLab .lab-panel .CodeMirror-cursor { border-left: 2px solid var(--plx-accent, #2f81f7); box-shadow: 0 0 8px var(--plx-accent, #2f81f7); }
.plx #codeLab .lab-panel .plx-active { background: var(--plx-line); }
.plx #codeLab.plx-noline .lab-panel .plx-active { background: none; }
.plx #codeLab .lab-panel .plx-active-gutter .CodeMirror-linenumber { color: var(--code-text); }
.plx #codeLab .lab-panel .CodeMirror-matchingbracket { outline: 1px solid var(--plx-accent); background: color-mix(in srgb, var(--plx-accent) 20%, transparent); }
.plx #codeLab .lab-panel { position: relative; }
.plx #codeLab .lab-editor { transition: box-shadow .3s; }
.plx #codeLab.plx-focus .lab-editor { box-shadow: 0 0 0 1px color-mix(in srgb, var(--plx-accent) 55%, transparent), 0 18px 50px -24px var(--plx-accent); }

/* File tabs: the language plus its file name, with a coloured file mark */
.plx #codeLab .lab-tab.plx-ftab { display: inline-flex; align-items: center; gap: 6px; }
.plx #codeLab .plx-fname { font: 500 .72rem "JetBrains Mono", ui-monospace, monospace; color: color-mix(in srgb, currentColor 60%, transparent); }
.plx #codeLab .lab-tab[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--plx-accent, #2f81f7); }

/* ---------- Toolbars: compact, one line each, scroll instead of being cut off (computers) ---------- */
@media (min-width: 1001px) {
  .plx #codeLab .lab-pbar { padding: 8px 10px !important; gap: 6px !important; }
  .plx #codeLab .lab-pbar .lab-pbtn { height: 30px !important; padding: 0 10px !important; font-size: .8rem !important; }
  .plx #codeLab .lab-pbar-tools { flex-wrap: wrap !important; gap: 6px !important; }
  /* Compact controls: more height for the code. */
  .plx #codeLab .lab-tools .lab-icon-btn { height: 30px !important; min-width: 30px; }
  .plx #codeLab .lab-tools .lab-run { height: 30px !important; }
  .plx #codeLab .lab-askai-btn { height: 28px !important; font-size: .76rem !important; }
  .plx #codeLab .lab-askai .lab-paste-btn { height: 30px !important; font-size: .8rem !important; }
  .plx #codeLab .lab-askai { padding-top: 6px !important; margin-top: 2px !important; }
  .plx #codeLab .lab-tabs .lab-tab { height: 32px !important; }
  /* Wrap rather than cut off: every tool and AI button stays visible (the AI row keeps its own line, founder 2026-10-05). */
  .plx #codeLab .lab-tools, .plx #codeLab .lab-askai, .plx #codeLab .lab-askai-btns { flex-wrap: wrap !important; row-gap: 6px; max-width: 100%; min-width: 0; }
  .plx #codeLab .lab-tools { margin-left: 0 !important; }
  .plx #codeLab .lab-editor-bar { gap: 8px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
}
.plx-s-tools { margin-left: auto; display: inline-flex !important; gap: 2px; }
.plx-tool { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; opacity: .85; }
.plx-tool svg { width: 13px; height: 13px; }
.plx-tool:hover, .plx-tool[aria-pressed="true"] { opacity: 1; color: #fff; background: color-mix(in srgb, var(--plx-accent, #2f81f7) 35%, transparent); }
#codeLab.plx-t-light .plx-tool:hover { color: #1f2328; }
.plx-cmd-btn { color: #fff; background: color-mix(in srgb, var(--plx-accent, #2f81f7) 22%, transparent); opacity: 1; }

/* ---------- Status bar ---------- */
.plx-status { display: flex; align-items: center; gap: 14px; height: 28px; padding: 0 10px; overflow: hidden; white-space: nowrap; font: 500 .72rem "JetBrains Mono", ui-monospace, monospace; color: #c9d1d9; background: var(--plx-ed-bar, #010409); border-top: 1px solid rgba(255,255,255,.06); }
#codeLab.plx-t-light .plx-status { color: #57606a; border-top-color: rgba(0,0,0,.08); }
.plx-status > span { display: inline-flex; align-items: center; gap: 5px; }
.plx-s-lang .plx-dot { width: 8px; height: 8px; border-radius: 50%; }
.plx-d-html { background: #e34c26; } .plx-d-css { background: #2965f1; } .plx-d-js { background: #f0db4f; }
.plx-s-run i { width: 7px; height: 7px; border-radius: 50%; background: #3fb950; }
.plx-s-run.is-on i { animation: plxPulse 1s ease-out 2; }
.plx-s-run b { font-weight: 500; }
@keyframes plxPulse { 0% { box-shadow: 0 0 0 0 rgba(63,185,80,.7); } 100% { box-shadow: 0 0 0 8px rgba(63,185,80,0); } }
.plx-s-btn { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; opacity: .8; }
.plx-s-btn:hover { opacity: 1; color: var(--plx-accent); }
.plx-s-btn svg { width: 15px; height: 15px; }
@media (max-width: 760px) { .plx-status { gap: 10px; } .plx-status > span:nth-child(n+4):not(.plx-s-tools) { display: none; } .plx-tool span { display: none; } }

/* ---------- Preview: address bar, loading line, device frame ---------- */
.plx #codeLab .lab-preview { position: relative; }
.plx-addr { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; height: 30px; margin: 0 10px; padding: 0 12px; overflow: hidden; white-space: nowrap; font: 500 .78rem "JetBrains Mono", ui-monospace, monospace; color: #8b949e; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.plx-addr svg { flex-shrink: 0; width: 13px; height: 13px; color: #3fb950; }
.plx-addr b { font-weight: 500; color: #e6edf3; overflow: hidden; text-overflow: ellipsis; }
.plx-load { position: absolute; left: 0; top: 0; height: 2px; width: 0; z-index: 5; background: linear-gradient(90deg, #22d3ee, #8b5cf6, #ec4899); pointer-events: none; opacity: 0; }
.plx-loading .plx-load { animation: plxLoad .9s cubic-bezier(.2,.7,.2,1); }
@keyframes plxLoad { 0% { width: 0; opacity: 1; } 70% { width: 85%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
@media (max-width: 1100px) { .plx-addr { display: none; } }
.plx #codeLab .lab-preview.plx-device .lab-frame { box-shadow: 0 0 0 10px #11151c, 0 0 0 12px #2b3240, 0 30px 60px -20px rgba(0,0,0,.8), 0 0 40px -10px color-mix(in srgb, var(--plx-accent, #2f81f7) 60%, transparent); margin-top: 18px !important; margin-bottom: 18px !important; }


/* ---------- Split handle ---------- */
.plx #codeLab { position: relative; }
.plx-split { position: absolute; z-index: 6; width: 12px; cursor: col-resize; touch-action: none; }
.plx-split i { position: absolute; left: 5px; top: 50%; width: 2px; height: 46px; margin-top: -23px; background: rgba(255,255,255,.18); transition: background .2s, height .2s; }
.plx-split:hover i, .plx-split:focus-visible i, .plx-dragging .plx-split i { height: 90px; margin-top: -45px; background: var(--plx-accent, #2f81f7); box-shadow: 0 0 10px var(--plx-accent, #2f81f7); }
.plx-split:focus-visible { outline: none; }
.plx-dragging, .plx-dragging * { user-select: none !important; cursor: col-resize !important; }
.plx-dragging iframe { pointer-events: none; }

/* ---------- Minimap ---------- */
.plx-mini { position: absolute; right: 0; top: 0; z-index: 4; width: 64px; cursor: pointer; background: color-mix(in srgb, var(--code-bg) 80%, transparent); border-left: 1px solid color-mix(in srgb, var(--code-muted) 20%, transparent); }
@media (min-width: 1001px) { .plx #codeLab .lab-panel .CodeMirror-vscrollbar { right: 64px; } .plx #codeLab .lab-panel .CodeMirror-sizer { margin-right: 64px; } }
@media (max-width: 1000px) { .plx-mini { display: none; } }

/* ---------- Popover, palette, shortcuts ---------- */
.plx-pop { position: fixed; z-index: 3000; width: 260px; padding: 14px; color: #e6edf3; background: #161b22; border: 1px solid #30363d; box-shadow: 0 24px 60px -20px rgba(0,0,0,.8); animation: plxIn .18s ease both; font-size: .85rem; }
.plx-pop strong { display: block; margin: 0 0 10px; font-size: .9rem; }
.plx-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 12px; }
.plx-theme { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid #30363d; background: #0d1117; color: #c9d1d9; font: inherit; font-size: .8rem; cursor: pointer; }
.plx-theme[aria-pressed="true"] { border-color: #2f81f7; color: #fff; box-shadow: 0 0 0 1px #2f81f7; }
.plx-theme i { width: 18px; height: 18px; flex-shrink: 0; }
.plx-sw-midnight i { background: linear-gradient(135deg, #0d1117 50%, #ff7b72 50%); } .plx-sw-dracula i { background: linear-gradient(135deg, #282a36 50%, #ff79c6 50%); }
.plx-sw-ocean i { background: linear-gradient(135deg, #0f1c2e 50%, #5ccfe6 50%); } .plx-sw-light i { background: linear-gradient(135deg, #fff 50%, #cf222e 50%); border: 1px solid #30363d; }
.plx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #21262d; }
.plx-stepper { display: inline-flex; align-items: center; gap: 8px; }
.plx-step { width: 28px; height: 28px; border: 1px solid #30363d; background: #0d1117; color: #e6edf3; font: inherit; font-size: 1rem; cursor: pointer; }
.plx-chk input { width: 16px; height: 16px; accent-color: #2f81f7; }
.plx-pal { position: fixed; inset: 0; z-index: 3000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(1,4,9,.55); backdrop-filter: blur(3px); animation: plxIn .15s ease both; }
.plx-pal-box { width: min(620px, 100%); color: #e6edf3; background: #161b22; border: 1px solid #30363d; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); overflow: hidden; animation: plxDrop .2s cubic-bezier(.2,.7,.2,1) both; }
.plx-pal-box input { width: 100%; height: 50px; padding: 0 16px; border: 0; border-bottom: 1px solid #30363d; outline: none; background: #0d1117; color: #fff; font: inherit; font-size: 1rem; }
.plx-pal-box ul { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.plx-pal-box li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; font-size: .9rem; cursor: pointer; }
.plx-pal-box li.is-on { background: rgba(56,139,253,.18); box-shadow: inset 2px 0 0 #2f81f7; }
.plx-pal-box li.plx-pal-none { color: #8b949e; cursor: default; }
.plx-pal-box kbd, .plx-keys dt { font: 500 .74rem "JetBrains Mono", ui-monospace, monospace; padding: 2px 7px; color: #c9d1d9; background: #21262d; border: 1px solid #30363d; }
.plx-keys .plx-pal-box { padding: 18px 20px; }
.plx-keys strong { display: block; font-size: 1.05rem; margin: 0 0 12px; }
.plx-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; align-items: center; }
.plx-keys dt { justify-self: start; }
.plx-keys dd { margin: 0; color: #c9d1d9; font-size: .9rem; }
.plx-keys p { margin: 14px 0 0; color: #8b949e; font-size: .8rem; }
@keyframes plxIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes plxDrop { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Focus mode: only the editor and the preview, full screen ---------- */
html.plx-zen, html.plx-zen body { overflow: hidden !important; }
html.plx-zen #codeLab { position: fixed !important; inset: 0 !important; z-index: 2500 !important; margin: 0 !important; padding: 8px !important; height: 100vh !important; grid-template-rows: minmax(0, 1fr) !important; background: #010409; }
html.plx-zen #codeLab .lab-pbar-tools, html.plx-zen #codeLab .lab-askai, html.plx-zen #codeLab .lab-keys, html.plx-zen #codeLab .lab-build, html.plx-zen #codeLab .lab-lesson { display: none !important; }
html.plx-zen #codeLab .lab-left, html.plx-zen #codeLab .lab-right, html.plx-zen #codeLab .lab-editor, html.plx-zen #codeLab .lab-preview { height: 100% !important; min-height: 0 !important; max-height: none !important; }
html.plx-zen #codeLab .lab-editor { display: flex; flex-direction: column; }
html.plx-zen #codeLab .lab-panel:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; }
html.plx-zen #codeLab .lab-panel .CodeMirror { height: 100% !important; flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) { .plx-load, .plx-s-run i, .plx-pop, .plx-pal, .plx-pal-box { animation: none !important; } }

/* Status bar on a narrow editor: the position, language and the tools stay; the rest hides. */
.plx-status.is-narrow > span:not(.plx-s-pos):not(.plx-s-lang):not(.plx-s-tools):not(.plx-s-run) { display: none; }
.plx-status.is-narrow .plx-s-run b { display: none; }
.plx-status.is-tiny .plx-tool span, .plx-status.is-tiny .plx-s-lang { display: none; }
.plx-status .plx-s-tools { flex-shrink: 0; }
/* The status bar never shrinks inside the editor column; the footer above it is slimmer. */
.plx-status { flex: 0 0 auto; }
@media (min-width: 901px) { .plx #codeLab .lab-editor-foot { min-height: 36px !important; } }
.plx #codeLab .lab-panel:not([hidden]) { min-height: 0; flex: 1 1 auto; }
/* Preview bar: the title on one line; the address bar only when there is room. */
.plx #codeLab .lab-preview-title { white-space: nowrap; }
.plx #codeLab .lab-preview.plx-narrow .plx-addr { display: none; }
/* Focus mode hides the app frame itself (menu, top bar, phone tabs, the welcome-back note), so the editor and preview
   fill the whole screen: the Code Lab sits inside a lower stacking layer than the app frame. */
html.plx-zen .as-side, html.plx-zen .as-top, html.plx-zen .as-tabs, html.plx-zen .lab-home-bar, html.plx-zen .chat-launcher, html.plx-zen .taa-sup-bar { display: none !important; }
html.plx-zen body, html.plx-zen body.as-on { padding: 0 !important; }
@media (max-width: 760px) { .plx #codeLab .plx-fname { display: none; } }