/* Code Lab on a phone (founder request, 2026-10-04). Loaded last, so it only tidies what the
   other Code Lab styles leave rough below 640px: a shorter top, a compact Code / Preview switch,
   bigger tap targets, no iOS zoom on typing, a bottom sheet for Download, and a tidy Share window. */
@media (max-width: 640px) {
  /* The top: a shorter intro card, and the Code / Preview switch takes less room. */
  .lab-header.lh .lh-copy { padding: 14px 14px 16px; }
  .lab-header.lh h1 { font-size: 1.6rem; line-height: 1.12; margin-bottom: 8px; }
  .lab-header.lh p { font-size: 0.92rem; line-height: 1.5; }
  .lab-intro-bar { margin: 8px 0 6px; }
  .lab-view-switch { top: 64px; padding: 3px; gap: 3px; }
  .lab-view-btn { padding: 7px 0; font-size: 0.88rem; }

  /* The editor bar: tabs first, then one tidy row of tools with finger-sized buttons. */
  .code-lab .lab-editor-bar { padding: 8px 10px; row-gap: 8px; }
  .lab-tools { width: 100%; justify-content: space-between; gap: 6px; }
  .lab-tools .lab-icon-btn, .lab-tools .lab-share-btn { height: 40px; min-width: 40px; }
  .lab-tools .lab-run { height: 40px; padding: 0 18px; margin-left: auto; }
  .lab-tab { padding: 9px 12px; }
  /* Ask AI: one row that scrolls sideways instead of wrapping into two. */
  .lab-askai-btns { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .lab-askai-btns::-webkit-scrollbar { display: none; }
  .lab-askai-btn { flex-shrink: 0; height: 36px; }

  /* Typing: 16px stops iOS zooming the page when a box is tapped. */
  .lab-build-form textarea, .lab-dialog input, .lab-dialog textarea, .lab-dl-name input, #labBuildInput, .lab-account input { font-size: 16px; }
  .lab-build-form textarea { height: 52px; padding: 14px 12px; line-height: 1.25; }
  .lab-build-form .btn { height: 48px; }
  .lab-build > summary { padding: 12px 14px; }
  .lab-build-body { padding: 0 12px 12px; }
  .lab-build-thread { max-height: 38vh; }

  /* The code: a readable size, and room to work. */
  .lab-panel .CodeMirror, .lab-panel textarea.lab-plain { font-size: 14px; min-height: 300px; }
  .lab-keys { padding: 6px 8px; gap: 6px; }
  .lab-key { min-width: 40px; height: 40px; }
  .lab-editor-foot { flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; }
  .lab-frame { min-height: 70vh; }

  /* Download: a sheet at the bottom of the screen (the old menu hung off the right edge). */
  .lab-dl-menu { position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; max-height: 72vh; overflow-y: auto; z-index: 90; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55); }
  .lab-dl-menu button { padding: 13px 12px; }

  /* Share window: the gallery tick box sits beside its text. */
  .lab-gallery-opt { align-items: flex-start; }
  .lab-gallery-opt input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; margin: 2px 0 0; padding: 0; }
  .lab-dialog { max-height: 92vh; overflow-y: auto; width: calc(100vw - 24px); }

  /* Easier on a phone (founder 2026-10-05: "many users are using their phones to build websites"). */
  /* Build with AI first (playground-mobile.js moves it above the tabs): a card of its own. */
  .lab-build.lab-build-first { border-top: 0; border-bottom: 1px solid var(--border); }
  /* The tools: a word under every icon, then Run as one wide button underneath. */
  .lab-tools { flex-wrap: wrap; }
  .lab-tools > .lab-icon-btn, .lab-tools > .lab-dl { flex: 1 1 0; min-width: 0; }
  .lab-tools .lab-dl > .lab-icon-btn { width: 100%; }
  .lab-tools .lab-icon-btn, .lab-tools .lab-share-btn, .code-lab .lab-tools .lab-explain-code-btn { height: 54px; width: 100%; padding: 4px 2px; flex-direction: column; gap: 3px; justify-content: center; }
  .code-lab .lab-tools .lab-icon-btn span, .code-lab .lab-tools .lab-share-btn span, .code-lab .lab-tools .lab-explain-code-btn span, .code-lab .lab-tools #labReset span { display: block; font-size: 0.7rem; line-height: 1.1; font-weight: 600; }
  .code-lab .lab-tools #labReset { width: 100%; padding: 4px 2px; }
  .lab-tools .lab-run { flex: 1 0 100%; height: 48px; margin-left: 0; justify-content: center; font-size: 1rem; }
  /* Finger-sized: the Code / Preview switch, Ask AI, Clear chat, the live-preview tick box. */
  .lab-view-btn { padding: 11px 0; }
  /* A solid strip behind the pinned switch, so code and text never show around it while scrolling. */
  .lab-view-switch::before { content: ""; position: absolute; z-index: -1; left: -16px; right: -16px; top: -9px; bottom: -8px; background: var(--bg); }
  .lab-askai-btn { height: 44px; }
  .lab-askai-copy { min-width: 44px; }
  .lab-build-clear { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
  .lab-editor-foot label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
  #labAutoRun { width: 22px; height: 22px; }
  .lab-build .btn, .lba-note button, .lba-note .btn { min-height: 44px; }
  .lab-build-ideas button { min-height: 40px; padding: 8px 13px; font-size: 0.85rem; }
  /* Not on phones (founder 2026-10-06: "remove any feature that the mobile version doesn't need, only in the mobile
     version"): Upload (no code files on a phone; Paste AI answer does it), Redo (Undo stays), Find, and the
     "Update preview as I type" switch (the preview is not on screen while typing). Computers and tablets keep them
     all. Download came BACK on phones the same day: it is one of the most used tools (380 picture, 129 ZIP and
     104 page downloads in a day), and hiding it stopped phone downloads. */
  #labUpload, .lab-tools [aria-label="Redo"], .lab-tools .lab-tool-sep, .lab-tools [aria-label="Find in your code"], #labFind, #labReplace, .lab-editor-foot .lab-switch { display: none !important; }
  /* What is left (Undo, Reset, Download, Images, Explain, Share): one even row, Run underneath. */
  .lab-tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .lab-tools > * { min-width: 0; }
  .lab-tools .lab-run { grid-column: 1 / -1; width: 100%; }
  .lab-tools .lab-icon-btn[aria-label="Undo"]::after, .lab-tools .lab-icon-btn[aria-label="Redo"]::after { content: attr(aria-label); display: block; font-size: 0.7rem; line-height: 1.1; font-weight: 600; }
  .code-lab .lab-tools .lab-icon-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Tapping into the code: a 16px text box underneath stops iOS zooming the page (the code stays 14px). */
  .lab-panel .CodeMirror textarea { font-size: 16px; }
}
/* Sideways phones and small tablets (641-899px): the toolbar wraps so Run never runs off the screen. */
@media (min-width: 641px) and (max-width: 899px) {
  .lab-tools { flex-wrap: wrap; row-gap: 8px; min-width: 0; max-width: 100%; }
  .lab-view-switch::before { content: ""; position: absolute; z-index: -1; left: -24px; right: -24px; top: -9px; bottom: -8px; background: var(--bg); }
}
/* The smallest phones: slightly smaller tool words so Images and Explain fit whole. */
@media (max-width: 380px) {
  .lab-tools { gap: 4px; }
  .lab-tools .lab-icon-btn, .lab-tools .lab-share-btn, .code-lab .lab-tools .lab-explain-code-btn { padding: 4px 0; }
  .code-lab .lab-tools .lab-icon-btn span, .lab-tools .lab-icon-btn[aria-label="Undo"]::after, .lab-tools .lab-icon-btn[aria-label="Redo"]::after { font-size: 0.64rem; letter-spacing: -0.01em; }
}
@media (max-width: 360px) {
  .lab-header.lh h1 { font-size: 1.4rem; }
  .lab-tools .lab-run { padding: 0 14px; }
}

/* ===== Added 2026-10-06 (founder: "check the mobile version of Code Lab and make sure it fits nicely on
   phone"). Audit: 6 phones x 7 states (Code, editor, Build with AI, Preview, Publish, Paste, Pictures). ===== */

/* Publish dialog: on narrow phones the address row turns into a column, and the address input kept its
   "grow" setting, so it grew downwards to about 200px tall with ".tanimawoai.com" at the bottom. */
@media (max-width: 480px) {
  .lab-pub-addr > input { flex: 0 0 auto !important; height: auto !important; min-height: 44px; }
}

/* Preview tab: comfortable taps for Publish, the page tabs and the console's Clear. */
@media (max-width: 640px) {
  .lab-pbtn.lab-pub-moved, .lab-site-page, .lab-site-addpage { min-height: 40px; }
  #labConsoleClear { min-height: 36px; min-width: 48px; }
}

/* Phones held sideways (short screens): the top bar scrolls away on the Code Lab, so only the slim
   Code / Preview switch stays pinned (playground-mobile.js puts it under the top bar's real bottom,
   which is then the top of the screen). Bigger taps, and no iOS zoom in the Build with AI box. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  header.nav { position: relative !important; }
  .lab-view-switch { padding: 2px; }
  #labBuildInput { font-size: 16px; }
  #labBuildIdeas button { min-height: 40px; }
  .lab-build-clear { min-height: 36px; display: inline-flex; align-items: center; }
  .lab-tabs button, [id^="labTab-"] { min-height: 40px; }
  #labDownload, #labReset, .lab-tools .lab-icon-btn { min-width: 40px; min-height: 40px; }
  .lab-askai-btn { min-height: 40px; }
  .lab-askai-copy { min-width: 40px; }
  #labRun { min-height: 40px; }
  .lba-note-btn { min-height: 40px; }
  .lab-pbtn.lab-pub-moved, .lab-site-page, .lab-site-addpage { min-height: 40px; }
  #labConsoleClear { min-height: 36px; min-width: 48px; }
}

/* 2026-10-06 pass 2: very narrow phones (320-380px). The Ask-AI row was 328px wide on a 320px screen,
   so "Quick website" was cut off: each of the two buttons gets its own full row, and the
   ChatGPT / Claude / Gemini / Copy row wraps instead of running off the screen. */
@media (max-width: 380px) {
  #labAskAi .lab-paste-btn { flex: 1 1 100% !important; width: 100% !important; justify-content: center; }
  #labAskAi .lab-askai-btns { flex-wrap: wrap !important; max-width: 100%; }
  #labAskAi { max-width: 100%; }
}


/* 2026-10-07 (founder: phone users said they could not see Download, and some could not see Quick website).
   - Quick website sat beside Paste AI answer from 381px up. With the phone's text size turned up (Android
     "Font size"), the pair outgrew the row on 390-430px phones and Quick website was cut off at the right
     edge, so only some people saw it. Each button now gets its own full row on every phone.
   - Download was labelled "Save" in a six-across row (the full word did not fit), so people looking for
     Download did not find it. The six tools are now two rows of three, with room for the real word. */
@media (max-width: 640px) {
  #labAskAi .lab-paste-btn { flex: 1 1 100% !important; width: 100% !important; margin-left: 0; justify-content: center; }
  /* With big text the ChatGPT / Claude / Gemini row made the whole Ask AI box wider than the screen: the box now
     stays screen-wide and that row scrolls sideways inside it, as it always meant to. */
  #labAskAi { max-width: 100%; min-width: 0; }
  #labAskAi .lab-askai-btns { min-width: 0; max-width: 100%; }
  .lab-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .code-lab .lab-tools .lab-icon-btn span { white-space: normal; }
}