/* Code Lab in the student app, clean and simple (pairs with code-lab-clean.js; founder 2026-10-09). Only on when the
   script has set html.lcl-on (app.tanimawoai.com). */

/* Tools that moved into More: still in the page (More and the command palette press them), just out of sight. */
html.lcl-on #codeLab :is([data-track="codelab-insert-open"], [data-track="codelab-check-open"], [data-track="codelab-class-open"],
  [data-track="codelab-site-details"], [data-track="codelab-site-sections"], [data-track="codelab-site-messages"],
  [data-track="codelab-restore-open"], [data-track="codelab-find-open"], [data-track="codelab-ask-side-toggle"],
  [data-track="codelab-sbs-open"], [data-track="codelab-apis-open"], #labUpload, #labExplainCode, #labShare, #labReset) {
  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important;
  margin: 0 !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; visibility: hidden !important;
}
html.lcl-on #codeLab :is(.lab-pbar, .lab-pbar-tools, .lab-tools, .lab-askai, .lab-askai-btns) { position: relative; }

/* Not needed in sight: the row above the editor, the status-bar tool buttons, Run while the preview updates as you
   type, the second "saved" note. Undo and Redo stay (founder 2026-10-09: "Keep the redo and undo buttons"). */
html.lcl-on .lab-home-bar,
html.lcl-on #codeLab :is(.lab-tool-sep, .plx-s-tools, .plx-s-btn, .lab-saved) { display: none !important; }
html.lcl-on #codeLab:has(#labAutoRun:checked) #labRun { display: none !important; }
html.lcl-on #codeLab .lab-askai-btns:not(:has([data-track="codelab-sbs-exit"])) { display: none !important; } /* its AI buttons are hidden in the app or in More */
html.lcl-on .lab-section { padding-top: 14px; }

/* The project bar: projects and New on the left; Publish and More on the right. */
html.lcl-on #codeLab .lab-pbar { flex-wrap: nowrap; align-items: center; }
html.lcl-on #codeLab .lab-pbar-tools { margin-left: auto; flex-wrap: nowrap; }
html.lcl-on #codeLab [data-track="codelab-publish-open"] { color: #fff; border-color: transparent; background: linear-gradient(135deg, #1f7bff, #38b6ff); box-shadow: 0 6px 18px -8px rgba(56, 182, 255, .8); }
html.lcl-on #codeLab [data-track="codelab-publish-open"]:hover { filter: brightness(1.08); }

/* More and its menu. */
.lcl-more { position: relative; flex: none; margin-left: 6px; }
.lcl-more-btn { position: relative; }
.lcl-more-btn[aria-expanded="true"] { border-color: rgba(56, 182, 255, .6); background: rgba(56, 182, 255, .14); }
.lcl-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50% !important; background: #ef4444; box-shadow: 0 0 0 2px #0b1330; }
.lcl-menu { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; width: 248px; max-height: calc(100vh - 130px); overflow-y: auto; padding: 6px;
  background: #0d1631; border: 1px solid rgba(120, 170, 255, .28); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .85); }
.lcl-group + .lcl-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .08); }
.lcl-head { margin: 4px 10px 2px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7f8fb5; }
.lcl-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; background: none; color: #dfe7ff;
  font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.lcl-item svg { flex: none; width: 17px; height: 17px; color: #7fb6ff; }
.lcl-item span { flex: 1; min-width: 0; }
.lcl-item:hover, .lcl-item:focus-visible { outline: none; background: rgba(56, 182, 255, .14); color: #fff; }
.lcl-badge { min-width: 20px; padding: 1px 6px; font-size: .72rem; text-align: center; color: #fff; background: #ef4444; }
.lcl-danger .lcl-item, .lcl-danger .lcl-item svg { color: #fca5a5; }
.lcl-danger .lcl-item:hover, .lcl-danger .lcl-item:focus-visible { background: rgba(239, 68, 68, .14); }

/* Phone: Publish and More keep their words (the other bar buttons are icons there), on their own line at the right;
   the menu opens as a sheet above the bottom menu. */
@media (max-width: 640px) {
  html.lcl-on #codeLab .lab-pbar { flex-wrap: wrap; overflow: visible; }
  html.lcl-on #codeLab .lab-pbar-tools { flex: 1 0 100%; justify-content: flex-end; gap: 8px; }
  html.lcl-on #codeLab .lab-pbar-tools [data-track="codelab-publish-open"], html.lcl-on #codeLab .lcl-more-btn { width: auto; padding: 0 14px; gap: 7px; }
  html.lcl-on #codeLab .lab-pbar-tools [data-track="codelab-publish-open"] span, html.lcl-on #codeLab .lcl-more-btn span { display: inline; }
  .lcl-more { margin-left: 0; }
  .lcl-menu { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: calc(100vh - 200px); z-index: 1000; }
}

/* Next to Code (2026-10-12): Quick website, Check, Restore, Find and replace and Explain in the row of the Code tab. On a computer they
   stay on that row: with room they show their names, in a narrow editor only their icons (the name is the tooltip). Phones: full rows. */
html.lcl-on #codeLab .lab-editor-bar { flex-wrap: wrap; gap: 8px; }
html.lcl-on #codeLab .lab-editor-bar > .lab-tools { flex: 1 0 100%; margin-left: 0; } /* Undo, Download, Upload: their own row under it */
.lcl-near { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; flex: 1 1 0; min-width: 0; container-type: inline-size; }
.lcl-near #labQuickSite { height: 34px; margin: 0; flex: none; }
.lcl-near-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 9px; border: 1px solid var(--border, rgba(70, 140, 255, .25)); border-radius: 999px;
  background: var(--bg-elevated, rgba(255, 255, 255, .04)); color: var(--text, #f2f7ff); font: 600 .78rem var(--font-body, inherit); cursor: pointer; white-space: nowrap; flex: none; }
.lcl-near-b span { display: none; }
.lcl-near-b:hover, .lcl-near-b:focus-visible { border-color: var(--accent, #3b82f6); background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent); }
.lcl-near-b svg { width: 15px; height: 15px; flex: none; }
.lcl-near-b[hidden] { display: none; }
/* Narrow: icons only. Middle: short names without icons. Wide: icons and full names. */
@container (min-width: 380px) { .lcl-near { gap: 5px; } .lcl-near #labQuickSite { padding: 0 12px; } .lcl-near-b { padding: 0 9px; } .lcl-near-b svg { display: none; } .lcl-near-b .lcl-l-short { display: inline; } }
@container (min-width: 560px) { .lcl-near-b { padding: 0 11px; } .lcl-near-b svg { display: block; } .lcl-near-b .lcl-l-short { display: none; } .lcl-near-b .lcl-l-full { display: inline; } }
#labAskAi.lcl-ask-empty { display: none !important; }
@media (max-width: 640px) {
  .lcl-near { flex: 1 1 100%; flex-wrap: wrap; container-type: normal; }
  .lcl-near #labQuickSite { flex: 1 1 100%; height: 42px; }
  .lcl-near-b { flex: 1 1 calc(50% - 6px); height: 40px; font-size: .8rem; }
  .lcl-near-b .lcl-l-full { display: inline; } .lcl-near-b .lcl-l-short { display: none; } .lcl-near-b svg { display: block; }
}