/* ===== Code Lab (codelab.html) ===== */
:root {
  --code-bg: #0b1022;
  --code-gutter: #0e1430;
  --code-text: #e6e8f5;
  --code-muted: #6c7396;
  --code-tag: #ff7ab2;
  --code-attr: #ffd479;
  --code-string: #7ee2a8;
  --code-keyword: #b79bff;
  --code-number: #ffa36c;
  --code-prop: #6fd6ff;
  --code-def: #8bc4ff;
  --code-select: rgba(31, 123, 255, 0.3);
}
:root[data-theme="light"] {
  --code-bg: #fbfbff;
  --code-gutter: #f1f1fa;
  --code-text: #1b1f3a;
  --code-muted: #8a90ad;
  --code-tag: #c2185b;
  --code-attr: #9a6700;
  --code-string: #1a7f37;
  --code-keyword: #6f42c1;
  --code-number: #b4490c;
  --code-prop: #0b6fa4;
  --code-def: #1f5fbf;
  --code-select: rgba(91, 69, 255, 0.18);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --code-bg: #fbfbff;
    --code-gutter: #f1f1fa;
    --code-text: #1b1f3a;
    --code-muted: #8a90ad;
    --code-tag: #c2185b;
    --code-attr: #9a6700;
    --code-string: #1a7f37;
    --code-keyword: #6f42c1;
    --code-number: #b4490c;
    --code-prop: #0b6fa4;
    --code-def: #1f5fbf;
    --code-select: rgba(91, 69, 255, 0.18);
  }
}

.lab-header { padding: 40px 0 0; }
.lab-header h1 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: 8px; }
.lab-header .lede { font-size: 1rem; }
.lab-section { padding: 24px 0 72px; }
/* Full page width on every screen (founder request), with a gutter that grows a little on big screens. */
.lab-container { max-width: none; margin: 0 auto; padding: 0 clamp(16px, 2vw, 40px); }
@media (max-width: 560px) { .lab-container { padding: 0 16px; } }

.code-lab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.lab-left, .lab-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 900px) {
  .lab-right { position: sticky; top: 92px; align-self: start; height: calc(100vh - 112px); min-height: 520px; }
  .lab-right .lab-frame { min-height: 0; }
  .lab-panel .CodeMirror, .lab-panel textarea.lab-plain { min-height: 440px; }
}

/* ----- Lesson card ----- */
.lab-lesson {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px 22px;
}
.lab-lesson-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.lab-select {
  flex: 1 1 240px; max-width: 360px; min-width: 0;
  font: inherit; font-size: 0.92rem; color: var(--text);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 12px; cursor: pointer;
}
.lab-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lab-progress { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--text-muted); }
.lab-progress-track { width: 90px; height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.lab-progress-bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 6px; transition: width 0.5s ease; }
.lab-lesson-track { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2); }
.lab-lesson-title { font-size: 1.35rem; margin: 4px 0 10px; }
.lab-lesson-intro { font-size: 0.95rem; color: var(--text-muted); }
.lab-lesson-intro p { margin: 0 0 10px; }
.lab-lesson-intro code, .lab-task code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em;
  background: var(--surface-2); color: var(--text); padding: 1px 6px; border-radius: 6px;
}
.lab-lesson-intro pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem;
  background: var(--code-bg); color: var(--code-text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 10px; overflow-x: auto; white-space: pre;
}
.lab-tasks-head { font-size: 0.9rem; margin: 14px 0 8px; }
.lab-lesson.is-free .lab-tasks-head { display: none; }
.lab-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lab-task { display: flex; align-items: flex-start; gap: 10px; font-size: 0.93rem; line-height: 1.5; }
.lab-task-box {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
  border: 2px solid var(--border); background: var(--bg-elevated); position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lab-task.is-done .lab-task-box { background: var(--success); border-color: var(--success); }
.lab-task.is-done .lab-task-box::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #0a0e1a; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.lab-task.is-done .lab-task-text { color: var(--text-muted); }
.lab-done {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--success) 14%, transparent); border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
  font-size: 0.93rem;
}
.lab-done[hidden] { display: none; }
.lab-done.pop { animation: labpop 0.5s ease; }
@keyframes labpop { 0% { transform: scale(0.96); opacity: 0; } 60% { transform: scale(1.02); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .lab-done.pop { animation: none; } }
.lab-lesson-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.lab-lesson-nav .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ----- Editor ----- */
.lab-editor {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.lab-editor-bar, .lab-preview-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.lab-editor-bar { justify-content: space-between; }
.lab-tabs {
  display: flex; gap: 2px; padding: 4px; border-radius: 12px;
  background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid var(--border);
}
.lab-tab {
  font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
  background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 14px; cursor: pointer;
}
.lab-tab:hover { color: var(--text); }
.lab-tab[aria-selected="true"] { color: var(--text); background: var(--code-bg); border-color: var(--border); }
.lab-tab:focus-visible, .lab-icon-btn:focus-visible, .lab-view-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lab-tools {
  display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 12px;
  background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid var(--border);
}
.lab-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0;
  color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
}
.lab-icon-btn:hover { color: var(--text); border-color: var(--accent); }
.lab-icon-btn svg { width: 17px; height: 17px; }
.lab-run { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; }
.lab-run svg { width: 14px; height: 14px; }
.lab-panel { flex: 1 1 auto; min-height: 0; display: flex; }
.lab-panel[hidden] { display: none; }
.lab-panel .CodeMirror, .lab-panel textarea.lab-plain { flex: 1 1 auto; height: auto; min-height: 380px; }
/* Hide only the original textareas (direct children) that CodeMirror replaces. A plain
   ".lab-panel textarea" also hid CodeMirror's own hidden input, so the editor could
   never take focus and nobody could type in it. */
.lab-panel > textarea { display: none; }
.lab-panel textarea.lab-plain {
  display: block; width: 100%; resize: vertical; border: 0; outline: 0; padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.6;
  background: var(--code-bg); color: var(--code-text); tab-size: 2;
}
.lab-editor-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px;
  padding: 8px 12px; font-size: 0.8rem; color: var(--text-muted); background: var(--surface); border-top: 1px solid var(--border);
}
.lab-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.lab-switch input { accent-color: var(--accent); width: 16px; height: 16px; }

/* CodeMirror theme from the site tokens (works in dark and light mode) */
.lab-panel .CodeMirror {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.6;
  background: var(--code-bg); color: var(--code-text);
}
.lab-panel .CodeMirror-gutters { background: var(--code-gutter); border-right: 1px solid var(--border); }
.lab-panel .CodeMirror-linenumber { color: var(--code-muted); padding: 0 10px 0 6px; }
.lab-panel .CodeMirror-cursor { border-left: 2px solid var(--accent-2); }
.lab-panel .CodeMirror-selected, .lab-panel .CodeMirror-focused .CodeMirror-selected { background: var(--code-select); }
.lab-panel .CodeMirror-line::selection, .lab-panel .CodeMirror-line > span::selection, .lab-panel .CodeMirror-line > span > span::selection { background: var(--code-select); }
.lab-panel .CodeMirror-activeline-background { background: rgba(127, 127, 160, 0.08); }
.lab-panel .CodeMirror-matchingbracket { color: var(--code-text) !important; outline: 1px solid var(--accent-2); }
.lab-panel .CodeMirror-lines { padding: 10px 0; }
.lab-panel .cm-tag { color: var(--code-tag); }
.lab-panel .cm-bracket { color: var(--code-muted); }
.lab-panel .cm-attribute { color: var(--code-attr); }
.lab-panel .cm-string, .lab-panel .cm-string-2 { color: var(--code-string); }
.lab-panel .cm-keyword { color: var(--code-keyword); }
.lab-panel .cm-number, .lab-panel .cm-atom { color: var(--code-number); }
.lab-panel .cm-property { color: var(--code-prop); }
.lab-panel .cm-def, .lab-panel .cm-variable-2, .lab-panel .cm-variable-3 { color: var(--code-def); }
.lab-panel .cm-variable, .lab-panel .cm-operator { color: var(--code-text); }
.lab-panel .cm-qualifier, .lab-panel .cm-builtin { color: var(--code-attr); }
.lab-panel .cm-comment { color: var(--code-muted); font-style: italic; }
.lab-panel .cm-error { color: #ff6b6b; }

/* ----- Preview ----- */
.lab-preview {
  display: flex; flex-direction: column; flex: 1 1 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.lab-dots { display: inline-flex; gap: 6px; margin-right: 4px; }
.lab-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.lab-dots i:nth-child(2) { background: #febc2e; }
.lab-dots i:nth-child(3) { background: #28c840; }
.lab-preview-title { font-size: 0.85rem; font-weight: 600; }
.lab-run-status { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
/* The preview is always a white page, like a fresh browser tab, whatever the site theme. */
.lab-frame { flex: 1 1 auto; width: 100%; min-height: 460px; border: 0; background: #fff; display: block; }

.lab-console {
  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.lab-console summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none;
  font-size: 0.85rem; font-weight: 600; background: var(--surface);
}
.lab-console summary::-webkit-details-marker { display: none; }
.lab-console summary::before { content: "\25B8"; color: var(--text-muted); transition: transform 0.2s ease; }
.lab-console[open] summary::before { transform: rotate(90deg); }
.lab-console-count {
  min-width: 20px; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem; text-align: center;
  background: var(--surface-2); color: var(--text);
}
.lab-console-clear { margin-left: auto; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.lab-console-out {
  max-height: 180px; min-height: 60px; overflow-y: auto; padding: 8px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5;
}
.lab-console-out:empty::before { content: "console.log() output and errors appear here."; display: block; padding: 4px 14px; color: var(--code-muted); }
.lab-log { padding: 3px 14px; color: var(--code-text); white-space: pre-wrap; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); }
.lab-log-warn { color: var(--code-attr); background: color-mix(in srgb, var(--code-attr) 8%, transparent); }
.lab-log-error { color: #ff7b7b; background: rgba(255, 90, 90, 0.08); }

.lab-footnote { margin: 18px 0 0; text-align: center; font-size: 0.85rem; color: var(--text-muted); }
.lab-footnote kbd {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; padding: 1px 6px;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface);
}

/* Bigger preview: hide the lesson and code, preview takes the full width */
.code-lab.is-expanded { grid-template-columns: minmax(0, 1fr); }
.code-lab.is-expanded .lab-left { display: none; }
.code-lab.is-expanded .lab-frame { min-height: 70vh; }
.code-lab.is-expanded .lab-right { position: static; height: auto; }

/* Phone view switch, hidden on wide screens */
.lab-view-switch { display: none; }

@media (max-width: 899px) {
  .code-lab { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lab-view-switch {
    display: flex; position: sticky; top: 72px; z-index: 5;
    padding: 4px; gap: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .lab-view-btn {
    flex: 1; font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--text-muted);
    background: transparent; border: 0; border-radius: 999px; padding: 9px 0; cursor: pointer;
  }
  .lab-view-btn[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
  .code-lab[data-view="code"] .lab-right { display: none; }
  .code-lab[data-view="preview"] .lab-left { display: none; }
  .lab-expand { display: none; }
  .lab-panel .CodeMirror, .lab-panel textarea.lab-plain { min-height: 320px; }
  .lab-frame { min-height: 62vh; }
  .lab-run-status { display: none; }
  .lab-footnote-keys { display: none; }
}
@media (max-width: 420px) {
  .lab-lesson { padding: 16px; }
  .lab-tab { padding: 6px 11px; }
  .lab-progress-track { display: none; }
}

/* ----- Student account link ----- */
.lab-account-row { margin: -6px 0 14px; font-size: 0.84rem; }
.lab-link-btn {
  font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--accent-2); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.lab-link-btn:hover { color: var(--text); }
.lab-account-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--text-muted); }
.lab-account-status span { color: var(--success); font-weight: 600; }
.lab-account-status a { color: var(--accent-2); font-weight: 600; }
.lab-account-status[hidden], .lab-account[hidden], #labAccountBtn[hidden] { display: none; }
.lab-account {
  margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border: 1px solid var(--border); font-size: 0.88rem; color: var(--text-muted);
}
.lab-account p { margin: 0 0 10px; }
.lab-account a { color: var(--accent-2); }
.lab-account-form { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-account-form input, .lab-dialog input, .lab-dialog textarea {
  flex: 1 1 200px; min-width: 0; font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px;
}
.lab-account-form input:focus-visible, .lab-dialog input:focus-visible, .lab-dialog textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lab-account-msg { margin: 8px 0 0; font-size: 0.84rem; color: var(--text-muted); }
.lab-account-msg:empty { display: none; }
#labAccountVerify .partner-status-lookup { display: flex; gap: 8px; }

/* ----- AI tutor ----- */
.lab-hint-wrap { margin-top: 14px; }
.lab-hint-btn {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 0.88rem; font-weight: 600;
  color: var(--text); cursor: pointer; padding: 9px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lab-hint-btn:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); border-color: var(--accent); }
.lab-hint-btn:disabled { opacity: 0.6; cursor: wait; }
.lab-hint-btn svg { width: 17px; height: 17px; color: var(--accent-2); flex-shrink: 0; }
.lab-hint-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lab-hint {
  position: relative; margin-top: 12px; padding: 14px 16px 14px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--border));
}
.lab-hint[hidden] { display: none; }
.lab-hint-tag {
  display: inline-block; margin-bottom: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-2);
}
.lab-hint-text { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.lab-hint-text code, .lab-explain code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em;
  background: var(--surface-2); color: var(--text); padding: 1px 5px; border-radius: 5px;
}
.lab-hint.is-loading .lab-hint-text { color: var(--text-muted); }
.lab-hint.is-loading .lab-hint-tag::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent-2); animation: labblink 1s ease-in-out infinite; vertical-align: middle; }
@keyframes labblink { 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .lab-hint.is-loading .lab-hint-tag::after { animation: none; } }

/* "Explain this error" in the console */
.lab-log-error { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.lab-log-error > span { flex: 1 1 220px; }
.lab-explain-btn {
  font: inherit; font-family: var(--font-body); font-size: 0.76rem; font-weight: 600; color: #ffd0d0; cursor: pointer;
  background: rgba(255, 120, 120, 0.12); border: 1px solid rgba(255, 120, 120, 0.4); border-radius: 999px; padding: 2px 10px;
}
.lab-explain-btn:hover { background: rgba(255, 120, 120, 0.22); }
.lab-explain-btn:disabled { opacity: 0.6; cursor: wait; }
:root[data-theme="light"] .lab-explain-btn { color: #b42318; }
.lab-explain {
  flex-basis: 100%; margin: 4px 0 2px; padding: 8px 10px; border-radius: 8px;
  font-family: var(--font-body); font-size: 0.86rem; line-height: 1.55; color: var(--code-text);
  background: var(--surface); border-left: 3px solid var(--accent-2); white-space: pre-wrap;
}

/* ----- Certificate call to action ----- */
.lab-cert-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 0.93rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.lab-cert-cta[hidden] { display: none; }
.lab-shared-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-notice { padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255, 180, 80, 0.12); border: 1px solid rgba(255, 180, 80, 0.4); color: var(--text); }

/* ----- Share button ----- */
.lab-share-btn { width: auto; padding: 0 12px; gap: 6px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text); }
@media (max-width: 420px) { .lab-share-btn span { display: none; } .lab-share-btn { width: 36px; padding: 0; } }

/* ----- Phone symbol keys ----- */
.lab-keys { display: none; }
@media (max-width: 899px), (pointer: coarse) {
  .lab-keys {
    display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--border);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .lab-keys::-webkit-scrollbar { display: none; }
}
.lab-key {
  flex: 0 0 auto; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 8px; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 17px; font-weight: 600; color: var(--text);
  background: var(--code-bg); border: 1px solid var(--border); touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.lab-key:active { background: var(--accent); color: #fff; border-color: var(--accent); }
.lab-key-wide { min-width: 52px; font-family: var(--font-body); font-size: 0.8rem; }

/* ----- Share dialog ----- */
.lab-dialog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 22px 22px 20px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
.lab-dialog::backdrop { background: rgba(5, 8, 20, 0.65); backdrop-filter: blur(2px); }
.lab-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.lab-dialog-head h2 { font-size: 1.25rem; margin: 0; }
.lab-dialog label { display: block; margin: 12px 0 6px; font-size: 0.86rem; font-weight: 600; }
.lab-dialog label span { font-weight: 400; color: var(--text-muted); }
.lab-dialog input, .lab-dialog textarea { width: 100%; }
.lab-dialog textarea { resize: vertical; }
.lab-dialog .btn-block { margin-top: 16px; }
.lab-dialog-note { margin: 0 0 4px; font-size: 0.88rem; color: var(--text-muted); }
.lab-dialog-note strong { color: var(--text); }
.lab-dialog-error { margin: 10px 0 0; font-size: 0.85rem; color: #ff8a8a; }
.lab-dialog-error:empty { display: none; }
.lab-share-url { display: flex; gap: 8px; margin: 12px 0 14px; }
.lab-share-url input { flex: 1 1 auto; font-size: 0.9rem; }
.lab-share-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lab-social {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text); text-decoration: none; font-size: 0.8rem; font-weight: 600; transition: transform 0.15s ease, border-color 0.15s ease;
}
.lab-social:hover { transform: translateY(-2px); border-color: currentColor; }
.lab-social svg { width: 24px; height: 24px; }
.lab-social-wa svg { color: #25d366; }
.lab-social-fb svg { color: #1877f2; }
.lab-social-tg svg { color: #2aabee; }
.lab-social-in svg { color: #0a66c2; }
.lab-social-mail svg { color: var(--accent-2); }
.lab-share-native[hidden] { display: none; }
.lab-showcase { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.88rem; }
.lab-showcase .btn { margin-top: 10px; }

/* Narrow phones: the editor toolbar holds 3 tabs, 3 tool buttons and Run. */
.lab-editor-bar { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 480px) {
  .lab-editor-bar { padding: 8px; gap: 6px; }
  .lab-tab { padding: 6px 9px; }
  .lab-tools { gap: 4px; margin-left: auto; }
  .lab-tools .lab-icon-btn { width: 34px; height: 34px; }
  .lab-run { padding: 8px 12px; }
}

/* ===== Code Lab extras (playground-extras.js) ===== */
/* Weekly challenge card */
.lab-challenge-card {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; width: 100%; text-align: left;
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-2) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.lab-challenge-card:hover { transform: translateY(-1px); border-color: var(--accent); }
.lab-challenge-card[hidden] { display: none; }
.lab-challenge-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2); }
.lab-challenge-card strong { font-size: 0.95rem; }
.lab-challenge-meta { font-size: 0.82rem; color: var(--text-muted); margin-left: auto; }
.lab-challenge-board {
  margin: 12px 0 4px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border: 1px solid var(--border);
}
.lab-challenge-board h3 { font-size: 0.92rem; margin: 0 0 6px; color: var(--text); }
.lab-challenge-board ol { margin: 0 0 8px; padding-left: 22px; color: var(--text); font-size: 0.9rem; }
.lab-challenge-board p { margin: 0 0 6px; font-size: 0.88rem; }
.lab-challenge-board .lab-challenge-note { font-size: 0.8rem; margin: 0; }

/* Track certificate */
.lab-track-cert { margin-top: 12px; }

/* Explain this code */
.lab-explain-code-btn { width: auto; padding: 0 10px; gap: 5px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text); }
.lab-explain-code-btn svg { width: 15px; height: 15px; color: var(--accent-2); }
.lab-explain-code-btn:disabled { opacity: 0.6; cursor: progress; }
.lab-explain-code {
  margin: 0; padding: 10px 14px 12px; font-size: 0.9rem; line-height: 1.55;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-bottom: 1px solid var(--border);
}
.lab-explain-code[hidden] { display: none; }
.lab-explain-code-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.lab-explain-close { font: inherit; font-size: 1.3rem; line-height: 1; padding: 0 6px; color: var(--text-muted); background: none; border: 0; cursor: pointer; }
.lab-explain-code-text { margin: 0; white-space: pre-wrap; }
.lab-explain-code-text code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.86em; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); }
.lab-explain-code.is-loading .lab-explain-code-text { color: var(--text-muted); }
@media (max-width: 560px) { .lab-explain-code-btn span { display: none; } .lab-explain-code-btn { width: 36px; padding: 0; } }

/* Collapsible lesson on phones */
.lab-collapse-btn, .lab-collapse-summary { display: none; }
@media (max-width: 899px) {
  .lab-collapse-btn {
    display: inline-flex; align-items: center; gap: 4px; float: right; margin: -2px 0 0 10px;
    font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--accent-2);
    background: none; border: 0; padding: 4px 0; cursor: pointer;
  }
  .lab-collapse-btn svg { width: 16px; height: 16px; }
  .lab-lesson.is-collapsed { padding-bottom: 14px; }
  .lab-lesson.is-collapsed > *:not(.lab-lesson-bar):not(.lab-collapse-btn):not(.lab-collapse-summary) { display: none !important; }
  .lab-lesson.is-collapsed .lab-lesson-bar { margin-bottom: 10px; }
  .lab-lesson.is-collapsed .lab-collapse-summary { display: block; font-size: 0.88rem; font-weight: 600; line-height: 1.4; color: var(--text); padding-top: 2px; }
}

/* Code-along banner (students) and teacher controls */
.lab-along {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px;
  border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, #ef4444 45%, transparent);
  background: color-mix(in srgb, #ef4444 10%, var(--surface)); font-size: 0.92rem;
}
.lab-along[hidden] { display: none; }
.lab-along-live {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; color: #fff; background: #ef4444;
  padding: 3px 8px; border-radius: 999px; animation: labLive 1.6s ease-in-out infinite;
}
@keyframes labLive { 50% { opacity: 0.55; } }
.lab-along-text { flex: 1 1 220px; min-width: 0; }
.lab-along .is-fresh { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
@media (prefers-reduced-motion: reduce) { .lab-along-live { animation: none; } }
.lab-teach {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; padding: 10px 14px;
  border-radius: var(--radius-sm); border: 1px dashed var(--accent); background: var(--surface); font-size: 0.88rem;
}
.lab-teach input:not([type]) {
  flex: 1 1 200px; min-width: 0; font: inherit; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text);
}
.lab-teach-msg { color: var(--text-muted); font-size: 0.82rem; }

/* Share dialog: gallery opt-in */
.lab-gallery-opt { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 12px; font-size: 0.88rem; line-height: 1.45; color: var(--text-muted); cursor: pointer; }
.lab-gallery-opt input { margin-top: 3px; flex-shrink: 0; }
.lab-header-links { margin: 6px 0 0; font-size: 0.95rem; font-weight: 600; }
.lab-header-links a { color: var(--accent-2); text-decoration: none; }
.lab-header-links a:hover { text-decoration: underline; }


/* ===== Studio layout (founder request, 2026-10-02) =====
   Computers: the code editor and the live preview form one "studio" window: a shared
   toolbar row, a gradient line along the top, one divider between them and one status
   bar along the bottom (editor footer + console). The lesson card sits below in two
   columns: the lesson on the left, the tasks card (.lab-lesson-side) on the right.
   Layout only: .lab-left is display: contents, so every script and id stays the same.
   Phones keep the Code / Preview switch. */

/* ----- Everywhere ----- */
.lab-section { position: relative; isolation: isolate; }
.lab-section::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 900px; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 50% at 22% 45%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 45% at 80% 50%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 70%);
}
.lab-header h1 { font-family: var(--font-head); letter-spacing: -0.02em; }

/* Language tabs read like file tabs, each with its language colour */
.lab-tab { display: inline-flex; align-items: center; gap: 7px; position: relative; }
.lab-tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f97316; opacity: 0.55; transition: opacity 0.2s ease; }
.lab-tab[data-lang="css"]::before { background: #38bdf8; }
.lab-tab[data-lang="js"]::before { background: #facc15; }
.lab-tab[aria-selected="true"]::before { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
/* The active tab is now a filled chip inside the tabs segment, so the old underline that hung
   below the bar is dropped; a soft lift sets the chip apart instead. */
.lab-tab[aria-selected="true"]::after { content: none; }
.lab-tab[aria-selected="true"] { box-shadow: 0 1px 2px color-mix(in srgb, #000 16%, transparent); }
.lab-run {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 0;
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.lab-run:hover { filter: brightness(1.08); }

/* Preview bar looks like a small browser: the title becomes an address pill */
.lab-preview-title {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  padding: 5px 14px 5px 10px; border-radius: 999px; font-weight: 600; font-size: 0.8rem;
  background: var(--code-bg); border: 1px solid var(--border); color: var(--text);
}
.lab-preview-title::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent);
  animation: labPulse 2.4s ease-in-out infinite;
}
@keyframes labPulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, #22c55e 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .lab-preview-title::before { animation: none; } }

/* Lesson card */
.lab-lesson { border-radius: 20px; padding: 24px 26px; }
.lab-lesson-track {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: 0.72rem; background: color-mix(in srgb, var(--accent-2) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent);
}
.lab-lesson-title { font-family: var(--font-head); font-size: clamp(1.4rem, 2vw, 1.75rem); letter-spacing: -0.015em; margin: 12px 0 12px; }
.lab-lesson-intro { font-size: 1rem; line-height: 1.7; }
.lab-progress-track { width: 140px; height: 8px; }
.lab-lesson-side {
  margin-top: 18px; padding: 18px 20px; border-radius: 16px;
  background: var(--bg-elevated); border: 1px solid var(--border);
}
.lab-lesson-side .lab-tasks-head {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--font-head); font-size: 1rem;
}
.lab-lesson-side .lab-tasks-head::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lab-lesson-side .lab-tasks { gap: 4px; }
.lab-lesson-side .lab-task { padding: 8px 10px; margin: 0 -10px; border-radius: 10px; transition: background 0.2s ease; }
.lab-lesson-side .lab-task:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.lab-lesson-side .lab-task.is-done .lab-task-text { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--success) 60%, transparent); }
.lab-lesson-side .lab-account-row { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.lab-lesson-side .lab-challenge-card { margin: 12px 0 0; }
.lab-lesson-side .lab-account { margin: 12px 0 0; background: var(--surface); }
.lab-lesson.is-free .lab-lesson-side .lab-tasks:empty + .lab-hint-wrap { margin-top: 0; }
.lab-lesson-nav { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.lab-lesson-nav .btn { display: inline-flex; align-items: center; gap: 8px; }
#labPrev::before, #labNext::after {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
#labPrev::before { transform: scaleX(-1); }
#labNext:not(:disabled) {
  color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}

/* ----- Computers: the studio window ----- */
@media (min-width: 900px) {
  .code-lab {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "editor preview" "lesson lesson";
    grid-template-rows: minmax(540px, calc(100vh - 170px)) auto;
    column-gap: 0; row-gap: 28px;
  }
  .code-lab .lab-left { display: contents; }
  .code-lab .lab-lesson { grid-area: lesson; }

  /* Left half: editor */
  .code-lab .lab-editor {
    grid-area: editor; min-height: 0; position: relative;
    border-radius: 20px 0 0 20px; border-right: 0;
  }
  .code-lab .lab-editor .lab-panel, .code-lab .lab-editor .CodeMirror { height: 100%; }
  .code-lab .lab-editor .CodeMirror, .code-lab .lab-panel textarea.lab-plain { min-height: 0; }

  /* Right half: preview + console */
  .code-lab .lab-right {
    grid-area: preview; position: relative; top: auto; height: auto; min-height: 0; align-self: stretch; gap: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 0 20px 20px 0; overflow: hidden;
  }
  /* One shadow under the whole window (a grid item behind both halves), so neither
     half's shadow falls across the other */
  .code-lab { isolation: isolate; }
  .code-lab::before {
    content: ""; grid-area: 1 / 1 / 2 / -1; z-index: -1; border-radius: 20px; pointer-events: none;
    box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--accent) 60%, transparent), var(--shadow);
  }
  .code-lab .lab-preview { border: 0; border-radius: 0; background: var(--surface); }
  .code-lab .lab-right .lab-frame { min-height: 0; margin: 0 12px 12px; width: calc(100% - 24px); border-radius: 12px; box-shadow: 0 0 0 1px var(--border), 0 12px 30px -16px rgba(0, 0, 0, 0.45); }
  .code-lab .lab-console { border: 0; border-top: 1px solid var(--border); border-radius: 0; }

  /* One gradient line across the top of both halves */
  .code-lab .lab-editor::before, .code-lab .lab-right::before {
    content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, var(--accent), var(--accent-2), #22c55e); background-size: 200% 100%;
  }
  .code-lab .lab-editor::before { background-position: 0 0; }
  .code-lab .lab-right::before { background-position: 100% 0; }

  /* Shared toolbar row and status bar: same heights on both sides */
  .code-lab .lab-editor-bar, .code-lab .lab-preview-bar { min-height: 60px; padding: 10px 12px; }
  .code-lab .lab-preview-bar { border-bottom: 0; }
  .code-lab .lab-editor-foot, .code-lab .lab-console summary { min-height: 46px; padding-top: 0; padding-bottom: 0; }

  /* Bigger preview: the right half becomes the whole window */
  .code-lab.is-expanded { grid-template-columns: minmax(0, 1fr); grid-template-areas: "preview"; grid-template-rows: auto; }
  .code-lab.is-expanded .lab-editor, .code-lab.is-expanded .lab-lesson { display: none; }
  .code-lab.is-expanded .lab-right { border-radius: 20px; }
}
/* Medium screens: tools get tight, so the Share / Explain labels hide */
@media (min-width: 900px) and (max-width: 1239px) {
  .code-lab .lab-share-btn span, .code-lab .lab-explain-code-btn span { display: none; }
  .code-lab .lab-share-btn, .code-lab .lab-explain-code-btn { width: 34px; padding: 0; }
  .code-lab .lab-tab { padding: 6px 10px; }
  .code-lab .lab-tools { gap: 4px; }
  .code-lab .lab-tools .lab-icon-btn { width: 34px; height: 34px; }
  .code-lab .lab-run { padding: 8px 12px; }
}
@media (min-width: 1100px) { .code-lab .lab-editor-bar { flex-wrap: nowrap; } }
@media (max-width: 560px) { .lab-lesson-side { padding: 14px; } .lab-lesson { padding: 18px 16px; } }

/* ----- Wide screens: lesson in two columns ----- */
@media (min-width: 1100px) {
  .code-lab .lab-lesson {
    display: grid; column-gap: 44px; padding: 26px 30px;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto;
  }
  .code-lab .lab-lesson > * { grid-column: 1; }
  .code-lab .lab-lesson > .lab-lesson-bar { grid-column: 1 / -1; grid-row: 1; }
  .code-lab .lab-lesson > .lab-lesson-track { grid-row: 2; justify-self: start; }
  .code-lab .lab-lesson > .lab-lesson-title { grid-row: 3; }
  .code-lab .lab-lesson > .lab-lesson-intro { grid-row: 4; }
  .code-lab .lab-lesson > .lab-lesson-side { grid-column: 2; grid-row: 2 / 6; margin-top: 0; align-self: start; }
  .code-lab .lab-lesson > .lab-lesson-nav { grid-column: 1 / -1; grid-row: 6; }
  .code-lab .lab-lesson-bar { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
}

/* The Code Lab page (data-mode="free") is a free editor: no lesson panel, except the
   card for a shared project someone opened from a link. The lessons are on code-lessons.html. */
.code-lab[data-mode="free"] .lab-lesson:not(.is-shared) { display: none; }
/* No "Updated 12:22 AM" time beside Live preview on the Code Lab (founder request). */
.code-lab[data-mode="free"] .lab-run-status { display: none; }
.code-lab[data-mode="free"] #labRefresh { margin-left: auto; } /* the time used to push the preview buttons to the right */

/* Ask an AI (code-lab-ai.js): ChatGPT, Claude, Gemini, Copy prompt and Paste AI answer
   (founder, 2026-10-03). They always sit on their own full-width row inside the editor bar, right
   under the HTML / CSS / JS tabs, divided from them by a hairline — so the Run tools keep the
   tabs' line to themselves and the AI buttons never get squeezed, at any editor width (founder,
   2026-10-05). The bar is still a query container (used below at 440px). The note floats under it. */
.lab-editor-bar, .code-lab .lab-editor-bar { position: relative; flex-wrap: wrap; row-gap: 6px; container-type: inline-size; container-name: labbar; }
/* (Overrides the earlier one-line rule at 1100px+: the AI row always takes its own line.) */
.lab-askai {
  order: 3; flex-basis: 100%; display: flex; align-items: center; gap: 7px;
  margin: 4px 0 0; padding: 9px 2px 0; border-top: 1px solid var(--border);
}
.lab-askai-label { font-size: 0.76rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.lab-askai-btns { display: flex; align-items: center; gap: 5px; }
.lab-askai-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 7px; border-radius: 999px; font: 600 0.8rem var(--font-body, inherit); white-space: nowrap;
  color: var(--text); text-decoration: none; background: var(--bg-elevated); border: 1px solid var(--border); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.lab-askai-btn:hover, .lab-askai-btn:focus-visible { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, var(--bg-elevated)); color: var(--text); }
.lab-askai-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lab-askai-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.lab-askai-copy { width: 32px; padding: 0; justify-content: center; color: var(--text-muted); }
.lab-askai-copy .lab-askai-tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lab-askai-msg { position: absolute; z-index: 6; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(520px, calc(100% - 20px)); margin: 0;
  padding: 7px 12px; border-radius: 10px; font-size: 0.8rem; line-height: 1.4; color: var(--text); background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent-2) 50%, var(--border)); box-shadow: var(--shadow); }
.lab-askai-msg:empty { display: none; }
/* Thin dividers set the sub-groups apart inside the segments: brand pills | Copy prompt,
   pills | Paste AI answer, and the project actions | Run. Drawn as absolute pseudo-elements so
   they never become flex items or shift the layout. (2026-10-05, grouped-segment toolbar.) */
.lab-askai-copy, .lab-askai .lab-paste-btn, .lab-run { position: relative; }
.lab-askai-copy { margin-left: 4px; }
.lab-askai .lab-paste-btn { margin-left: 6px; }
.lab-run { margin-left: 6px; }
.lab-askai-copy::before, .lab-askai .lab-paste-btn::before, .lab-run::before {
  content: ""; position: absolute; left: -3px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--border); pointer-events: none;
}
/* When Paste AI answer drops to its own full-width line on phones, the divider makes no sense. */
@media (max-width: 640px) { .lab-askai .lab-paste-btn::before { display: none; } }
/* Very narrow bars: the AI label hides and the brand buttons share the row evenly. */
@container labbar (max-width: 440px) {
  .lab-askai-label { display: none; }
  .lab-askai-btns { width: 100%; }
  .lab-askai-btn:not(.lab-askai-copy) { flex: 1 1 0; justify-content: center; padding: 0 6px; }
}

/* Undo / Redo / Find controls and the find bar (code-lab-find.js, user request 2026-10-05).
   Undo, Redo and Find sit at the front of the tools group, split from the project actions by a hairline.
   The find bar drops in under the toolbar; matches are highlighted inside the code. */
.lab-tool-sep { align-self: stretch; width: 1px; margin: 3px 3px; background: var(--border); flex: none; }
.lab-tools .lab-icon-btn[disabled] { opacity: 0.38; cursor: default; }
.lab-tools .lab-icon-btn[disabled]:hover { color: var(--text-muted); border-color: var(--border); }
.lab-find {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.lab-find[hidden] { display: none; }
.lab-find-ic { display: inline-flex; flex: none; color: var(--text-muted); }
.lab-find-ic svg { width: 17px; height: 17px; }
.lab-find input[type="search"] {
  flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--code-bg); color: var(--text); font: inherit; font-size: 0.9rem;
}
.lab-find input[type="search"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.lab-find-count { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lab-find-count.is-none { color: #ff8a8a; }
.lab-find-other { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.lab-find-other button { font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--accent-2); background: none; border: 0; padding: 2px 5px; border-radius: 6px; cursor: pointer; }
.lab-find-other button:hover, .lab-find-other button:focus-visible { background: color-mix(in srgb, var(--accent-2) 14%, transparent); outline: none; }
.lab-find .lab-icon-btn { width: 32px; height: 32px; }
/* Match highlights inside CodeMirror: every hit a soft fill, the current one ringed, with the code still readable. */
.lab-panel .CodeMirror .lab-find-hit { background: rgba(250, 204, 21, 0.28); border-radius: 2px; }
.lab-panel .CodeMirror .lab-find-cur { background: rgba(249, 115, 22, 0.34); box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.95); border-radius: 2px; }
@media (max-width: 560px) { .lab-find-other { display: none; } }
/* Replace row (code-lab-find.js, founder 2026-10-06: replace all at once). */
.lab-replace { flex-wrap: wrap; }
.lab-replace input[type="search"] { flex: 1 1 180px; }
.lab-find .lab-icon-btn.is-on { color: var(--accent-2); border-color: var(--accent); }
.lab-rep-btn { height: 34px; padding: 0 12px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text); cursor: pointer;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; white-space: nowrap; }
.lab-rep-btn:hover, .lab-rep-btn:focus-visible { border-color: var(--accent); outline: none; }
.lab-rep-btn.is-all { color: #fff; background: var(--accent); border-color: var(--accent); }
.lab-rep-only { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.lab-dialog .lab-rep-only, .lab-rep-only { margin: 0; font-weight: 400; }
.lab-rep-only input { width: auto; margin: 0; }
.lab-rep-msg { flex: 1 0 100%; font-size: 0.8rem; color: var(--text-muted); }
.lab-rep-msg:empty { display: none; }

/* No footer on the Code Lab (founder, 2026-10-03): the Supporters bar that site-links.js adds
   at the very bottom reads as a footer here, so it is hidden on this page too. */
.sup-bar { display: none !important; }

/* Download menu: website files as a ZIP, or one .html file (playground.js) */
.lab-dl { position: relative; }
/* Opens to the right of the button: the button now sits at the left of the editor bar, and a menu
   opening leftwards went under the app menu and was cut off. */
.lab-dl-menu { position: absolute; left: 0; right: auto; top: calc(100% + 8px); z-index: 40; width: min(300px, 86vw); padding: 6px; border-radius: 14px;
  background: var(--surface, #071a40); border: 1px solid var(--border); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6); }
.lab-dl-menu[hidden] { display: none; }
.lab-dl-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.lab-dl-menu button:hover, .lab-dl-menu button:focus-visible { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: none; }
.lab-dl-menu strong { display: block; font-size: 0.9rem; }
.lab-dl-menu small { display: block; margin-top: 2px; font-size: 0.78rem; line-height: 1.35; color: var(--text-muted); }
/* Narrow editor bars: icon-only Download, so the tools stay on the tabs' line */
@container labbar (max-width: 800px) { .lab-dl .lab-share-btn span { display: none; } .lab-dl .lab-share-btn { width: 34px; padding: 0; } }

/* Reset in Free play: "Code cleared. Undo" for a few seconds (playground.js) */
.lab-undo { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 12px; background: rgba(10, 14, 26, 0.95); color: #fff; border: 1px solid rgba(255, 255, 255, 0.15);
  font: 600 0.88rem Inter, system-ui, sans-serif; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.6); }
.lab-undo button { border: 0; background: none; padding: 0 2px; color: var(--accent-2, #38b6ff); font: inherit; text-decoration: underline; cursor: pointer; }
/* Reset keeps its label (founder asked for a visible Reset) wherever it fits on the tabs line */
@container labbar (max-width: 650px) { #labReset span { display: none; } #labReset { width: 34px; padding: 0; } }

/* Your name on the project (Download menu) and the maker line on a shared project. */
.lab-dl-name { display: block; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.lab-dl-name span { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.lab-dl-name input { width: 100%; box-sizing: border-box; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 0.9rem; }
.lab-dl-name input:focus { outline: 2px solid var(--accent-2); outline-offset: 0; }
.lab-dl-nameerr { margin: 0 12px 6px; font-size: 0.8rem; color: #ff8a8a; }
.lab-dl-nameerr[hidden] { display: none; }
.lab-owner { margin: 0 0 8px; font-size: 0.82rem; font-weight: 600; color: var(--accent-2); }

/* "You earned a certificate!" after publishing a project (certificate.html?project=). */
.lab-cert-btn { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, #f5b82e 18%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); border: 1px solid color-mix(in srgb, #f5b82e 55%, transparent); }
.lab-cert-btn[hidden] { display: none; }
.lab-cert-btn svg { width: 28px; height: 28px; flex-shrink: 0; color: #f5b82e; }
.lab-cert-btn strong { display: block; font-size: 0.95rem; }
.lab-cert-btn small { display: block; font-size: 0.82rem; color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.lab-cert-btn:hover { border-color: #f5b82e; }

/* "Certificate Unlocked!" pop-up: NovaCDN's gold achievement toast. */
.lab-cert-toast { position: fixed; top: 76px; right: 18px; z-index: 2000; display: flex; align-items: flex-start; gap: 12px; width: min(330px, calc(100vw - 36px)); box-sizing: border-box;
  padding: 14px 40px 14px 16px; border-radius: 12px; color: #2a1a00; background: linear-gradient(135deg, #ffd56b, #f5b82e); border: 2px solid #ffe08a;
  box-shadow: 0 0 30px rgba(245, 184, 46, 0.45), 0 18px 40px -16px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateX(24px); transition: opacity 0.3s, transform 0.3s; }
.lab-cert-toast.on { opacity: 1; transform: none; }
.lab-ct-ic svg { width: 26px; height: 26px; margin-top: 2px; }
.lab-ct-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lab-ct-tx small { font-weight: 800; font-size: 0.84rem; }
.lab-ct-tx strong { font-family: var(--font-head, inherit); font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.lab-ct-tx span { font-size: 0.82rem; opacity: 0.85; }
.lab-ct-pill { align-self: flex-start; margin-top: 8px; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 0.78rem; color: #2a1a00; text-decoration: none; background: rgba(42, 26, 0, 0.14); }
.lab-ct-pill:hover { background: rgba(42, 26, 0, 0.24); }
.lab-ct-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: #2a1a00; font-size: 1.2rem; line-height: 1; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .lab-cert-toast { transition: none; } }

/* Share a certificate: icons in the Share window, and a second pill on the gold pop-up. */
.lab-cert-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.lab-cert-share[hidden] { display: none; }
.lab-cert-share span { margin-right: 4px; }
.lab-cs { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid color-mix(in srgb, #f5b82e 45%, transparent); color: #fff; }
.lab-cs svg { width: 16px; height: 16px; }
.lab-cs:hover { border-color: #f5b82e; background: color-mix(in srgb, #f5b82e 12%, transparent); }
.lab-cs-fb svg { color: #1877f2; } .lab-cs-in svg { color: #0a66c2; } .lab-cs-tg svg { color: #229ed9; }
.lab-ct-pills { display: flex; gap: 6px; flex-wrap: wrap; }

/* Hide / show the intro (button above it). */
.lab-intro-bar { display: flex; justify-content: flex-end; width: min(100% - 32px, 1240px); margin: 10px auto -6px; }
.lab-intro-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  font: 600 0.82rem/1 var(--font-body, Inter, system-ui, sans-serif); cursor: pointer; }
.lab-intro-toggle:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent-2) 55%, transparent); }
.lab-intro-toggle:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.lab-intro-toggle svg { width: 14px; height: 14px; transition: transform 0.2s; }
html.lab-intro-off .lab-intro-toggle svg { transform: rotate(180deg); }
html.lab-intro-off #labIntro { display: none; }

/* Full page preview: the preview fills the whole window (html.lab-full, playground.js setFull). */
.lab-full-close { display: none; }
html.lab-full, html.lab-full body { overflow: hidden !important; }
/* Nothing of the website over the full page preview: the menu, the notice bars, pop-ups. */
html.lab-full body > header.nav, html.lab-full .beta-bar, html.lab-full #taaBanner, html.lab-full .ach-toast, html.lab-full .chat-launcher, html.lab-full .chat-panel,
html.lab-full .sup-wrap, html.lab-full .lab-intro-bar { visibility: hidden !important; }
html.lab-full .lab-preview { position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; display: flex !important; flex-direction: column; margin: 0 !important;
  width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; border-radius: 0 !important; background: #0b1022; transform: none !important; }
html.lab-full .lab-preview .lab-frame { flex: 1 1 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html.lab-full .lab-preview-bar { flex: 0 0 auto; padding: 8px 12px; }
html.lab-full .lab-preview-title, html.lab-full .lab-run-status { visibility: hidden; }
html.lab-full .lab-full-close { display: inline-flex; align-items: center; gap: 6px; position: fixed; z-index: 2147483001; top: 8px; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(11, 16, 34, 0.92); color: #fff; font: 600 0.86rem/1 var(--font-body, Inter, system-ui, sans-serif); cursor: pointer; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6); }
html.lab-full .lab-full-close svg { width: 15px; height: 15px; }
html.lab-full .lab-full-close:focus-visible { outline: 2px solid var(--accent-2, #38b6ff); outline-offset: 2px; }
/* In the app (founder 2026-10-10: "when I click on the full page to preview ... there no option there to click"): the Code
   Lab's isolated layers (.lab-section, .code-lab) kept the full page UNDER the app's menu and top bar, which covered
   "Close full screen" and the shrink button. In full screen the preview rises above everything, and the app's bars hide. */
html.lab-full .lab-section, html.lab-full .code-lab { isolation: auto !important; }
html.lab-full :is(.as-side, .as-top, .as-tabs, .as-alerts, .as-vbar, .as-scrim) { visibility: hidden !important; }
/* phones too: the button shows on every screen size */
.lab-preview-bar .lab-expand { display: inline-grid !important; }

/* Code Lab without the site menu and notice bar (body.lab-bare, codelab.html only; founder 2026-10-06).
   Code Lessons shares this file and keeps its menu, so everything here is scoped to .lab-bare. */
.lab-bare #taaBanner { display: none !important; } /* the class announcement banner (site-links.js) is part of the top bar too */
.lab-home-bar { padding: 14px clamp(16px, 2vw, 40px) 0; display: flex; flex-wrap: wrap; gap: 10px; } /* lines up with .lab-container */
.lab-howto { padding: 6px 14px 6px 12px; color: var(--accent-2); }
.lab-howto svg { flex: none; }
.lab-home {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px;
  color: var(--text); text-decoration: none; font-size: 0.92rem; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); transition: border-color 0.15s ease, color 0.15s ease;
}
.lab-home:hover, .lab-home:focus-visible { border-color: var(--accent); color: var(--accent-2); }
.lab-home img { width: 36px; height: 36px; display: block; }
.lab-home b { font-weight: 700; }
@media (min-width: 900px) {
  .lab-bare .code-lab { grid-template-rows: minmax(540px, calc(100vh - 90px)) auto; }
}
@media (max-width: 899px) {
  .lab-bare .lab-view-switch { top: 8px; }
}
@media (max-width: 640px) {
  .lab-home-bar { padding: 10px 16px 0; }
  .lab-home { font-size: 0.86rem; }
  .lab-home img { width: 30px; height: 30px; }
}
.lab-bare .lab-section { padding-top: 14px; }
.lab-tab[hidden] { display: none !important; } /* one Code tab: hidden CSS / JS tabs stay hidden */
#labRefresh { display: none !important; } /* same as Run; the preview also updates by itself */
.code-lab[data-mode="free"] #labExpand { margin-left: auto; }
/* Share, Messages and Class are removed from the Code Lab (founder 2026-10-12) */
#labShare, #codeLab [data-track="codelab-site-messages"], #codeLab [data-track="codelab-class-open"] { display: none !important; }
/* Insert, Sections, My website and APIs are removed from the Code Lab (founder 2026-10-12: "only keep Check") */
#codeLab [data-track="codelab-insert-open"], #codeLab [data-track="codelab-site-sections"], #codeLab [data-track="codelab-site-details"], #codeLab [data-track="codelab-apis-open"] { display: none !important; }
#labDomainBtn { display: none !important; } /* only in the More menu (code-lab-clean.js) */
.lab-dom-dialog { width: min(520px, calc(100vw - 32px)); }
.lab-dom-dialog .lab-dom-pick { width: 100%; margin: 4px 0 12px; padding: 9px 10px; font: inherit; color: var(--text); background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; }
/* Explain and + Page are removed from the Code Lab (founder 2026-10-12) */
#labExplainCode, .lab-site-addpage { display: none !important; }

/* The Wrap switch next to HTML / CSS / JS (founder 2026-10-17: websites "look messy" in the editor). A website
   built with AI can hold one enormous line - a picture written into the code, a map outline, a whole section
   with no breaks - and folding that to fit turns it into dozens of rows of nonsense. */
.lab-wrap-tab { margin-left: auto; font-size: 0.74rem; opacity: 0.85; }
.lab-wrap-tab[aria-pressed="false"] { color: var(--accent-2); }