/* ide-responsive.css — the Studio scales with the browser.
 *
 * FOUNDER, 2026-09-12: "i like the way the ui is coming along but it has to scale with the browser
 * … nothing new so do not reinvent th arch jsut perfect it."
 *
 * So this file adds NO layout of its own. It names only selectors ide.html already defines, and it
 * does two things:
 *
 *   1. lets the existing flex rails actually shrink, and
 *   2. below the width where a rail stops fitting, stands that rail down — using the collapse
 *      machinery the page already has (`.sidebar.collapsed`, `.ai-pane.collapsed`,
 *      `.bottom-panel.collapsed`, and the three #toggle- buttons in the titlebar).
 *
 * WHY IT WAS NEEDED, measured 2026-09-12: ide.html carried 2,182 lines and **zero** `@media`
 * rules, while `html, body` carry `width:100vw; height:100vh; overflow:hidden`. So the layout was
 * an app shell that clips: a 48px activity bar + a 310px sidebar + a 380px assistant pane + a
 * 340px preview feed is 1,078px of fixed rail before the editor gets a pixel, and nothing
 * scrolled or gave way — the editor was simply cut off. The rails are kept; they now yield in a
 * stated order, widest-first: preview feed, then the command palette's box, then the assistant,
 * then the explorer.
 *
 * The load-bearing line is the first rule. A flex child defaults to `min-width:auto`, which means
 * it refuses to shrink below its content's intrinsic width — so one long line of code in the
 * editor, or one long path in the breadcrumbs, pushed the whole row wider than the viewport and
 * the body clipped it. `min-width:0` is what lets `flex:1` mean what it reads as.
 *
 * ON THE SYSTEM — Release 6, 2026-10-02. This file now reads layout.css's tokens (ide.html links layout.css
 * before its own style) and goes UP as well as down. Measured before, on the release's layout battery with a local
 * court: at 3,440 px the four rails were exactly their 1,440 px widths (48 + 310 + 380 + 340) and the editor a
 * 2,300 px slab of 13 px text; 9 scroll regions at 390 px and 5 at 1,440, none declared; DEV / TEST / PROD were
 * 36 x 17 px; the search box's text sat under the titlebar's buttons (40 overlaps at 768-1,920); the sandbox canvas
 * a 600 x 600 store stretched to 2,320 x 218. What changed, each by a rule below:
 *   - the rails are --rail (layout.css, 280 -> 420 px) and --ide-pane (256 -> 448 px) from 1,440 px, so they grow
 *     with the screen; the step-downs below 1,440 are as they were;
 *   - chrome type is --fs-ui (13 -> 17 px), the code font is --ide-code (14 -> 16 px) for the editor and its line
 *     numbers together, so they cannot drift apart;
 *   - every pane that scrolls carries data-pane in ide.html and is an inline-size container here, so a pane lays
 *     out by its own width (the Mac app's native WebView panes are smaller viewports of the same rules); the
 *     explorer scrolls in its view, not in the tree inside it; the status bar clips instead of scrolling;
 *   - targets: 24 px from 1,024 px (WCAG 2.5.8), --tap (44 px) below 1,024 or on a coarse pointer;
 *   - the five workspace actions are their own row (ide.html, .ide-actions) and the search box is an elastic flex
 *     item that clips its own text, so nothing in the titlebar is drawn under anything else;
 *   - the role cards are an auto-fit grid of at most four columns;
 *   - the sandbox canvas is a draw surface (surface.js sizes its store to its box; ide-controller.js draws the law's
 *     frame fitted inside it) and Franklin's rig a fixed frame letterboxed at its own aspect.
 */

:root {
  --ide-pane: clamp(16rem, 16vw, 28rem);                 /* the assistant and the live-cell feed: 256 -> 448 px */
  --ide-code: clamp(14px, 0.75rem + 0.3vw, 16px);         /* the editor and its line numbers: 14 -> 16 px */
}
/* rem stays the visitor's own setting (layout.css: html 100%); ide.html set html AND body to 13 px, which made every
   rem token 13/16 of itself (measured: the chooser's h1 at 22.75 px where the scale says 28) */
html { font-size: 100%; }
body { font-size: var(--fs-ui); }

/* ---- 1. the shrink fix: every rail on the row that must be allowed to give way ---- */
.app-body,
.main-workspace,
.editor-container,
.code-surface,
.tabs-bar,
.editor-actionbar,
.breadcrumbs,
.bottom-panel,
.panel-content,
.titlebar-left,
.titlebar-right,
.command-search { min-width: 0; }
.main-workspace,
.editor-container,
.panel-content { min-height: 0; }

/* ---- 2. the titlebar: three groups on one row; the MIDDLE one is elastic and clips its own text, so it can be
         narrow but never sits under a button (it was a fixed-width box drawn under the right group) ---- */
.titlebar { gap: 8px; flex-wrap: nowrap; }
.titlebar-left { flex: 0 1 auto; }
.titlebar-right { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin-inline-start: 0; }
.command-search { flex: 1 1 0; overflow: hidden; }
.command-search > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.titlebar .af-pill.af-bar { min-height: 28px; }

/* the workspace actions: their own row, right under the titlebar */
.ide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 12px;
  background: var(--bg-activity); border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; }
.ide-actions-gap { flex: 1 1 auto; }
.ide-exit { color: var(--text-muted); text-decoration: none; font-size: 11px; }

/* ---- 3. the panes: each declared pane (data-pane in ide.html) is an inline-size container and the ONE scroller
         of what it holds ---- */
[data-pane] { container-type: inline-size; }
.sidebar-view { overflow: auto; }
.file-tree { overflow: visible; }                 /* the explorer view scrolls; the tree inside it does not */
#courtPlayReceipt { max-height: none; overflow: visible; }
#study-bar textarea#study-stdin { field-sizing: content; resize: none; }
#study-bar[hidden] { display: none; }          /* studies-ide.js mounts it hidden; its own display:flex had overridden the attribute */
#ai-input { field-sizing: content; height: auto; min-height: 56px; }   /* the question box grows with the question; the assistant pane is the scroller */
.editor-container:has(> .ide-chooser:not([hidden])) > :not(.ide-chooser) { visibility: hidden; }   /* the chooser covers the editor; text under it is not drawn behind it */
/* Franklin's rig keeps its 420 px box; the chat log under it is the part of the assistant that gives (measured at
   1,920 x 1,080: the rig's box shrank to 4 px and the frame with it) */
#ai-rig-container { flex-shrink: 0; }
.ai-chat-log { min-height: 0; }
.ide-chooser h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.utc-grid { grid-template-columns: repeat(auto-fit, minmax(max(16rem, calc((100% - 30px) / 4)), 1fr)); }

/* the editor and its line numbers on one scale */
.code-textarea, .line-numbers { font-size: var(--ide-code); }

/* the checks bar keeps the height of what it says: shrunk by the column it measured 28 px for 70 px of text, centred, so its
   words ran 21 px up over the editor (measured at 390 px: over the chooser's text) */
.invariant-bar { flex-shrink: 0; flex-wrap: wrap; height: auto; min-height: 28px; row-gap: 2px; padding-block: 4px; }

/* the status bar is one row at every width; it clips (it scrolled sideways inside itself) */
.statusbar { overflow: hidden; }
.status-left,
.status-right { min-width: 0; overflow: hidden; flex-wrap: nowrap; }
.status-item { flex: 0 0 auto; white-space: nowrap; }

/* ---- 4. targets: every control at least 24 px (WCAG 2.5.8) ---- */
:where(.titlebar, .ide-actions, .app-body, .statusbar) :is(button, select, input:not([type=hidden]), summary, [role=button]) { min-height: 24px; }
:where(.titlebar, .ide-actions, .app-body, .statusbar) button { min-width: 24px; }
:where(.titlebar, .ide-actions, .app-body, .statusbar) a[href] { display: inline-flex; align-items: center; min-height: 24px; }

/* ---- 5. GOING UP: from 1,440 px the rails grow with the screen; from 1,920 the terminal and the live cell too ---- */
@media (min-width: 1440px) {
  .sidebar { width: var(--rail); }
  .ai-pane { width: var(--ide-pane); }
  .preview-feed { width: var(--ide-pane); }
}
@media (min-width: 1920px) {
  .bottom-panel { height: clamp(245px, 30vh, 560px); }
  .activity-bar { width: 56px; }
}
@media (min-width: 2560px) {
  .titlebar { height: 44px; }
  /* the activity rail grows with the other three (48 -> 56 -> 64 px, so 1.33x at 3,440 against 1,440; measured 2026-10-02:
     at 56 it was 1.167x, the one rail short of the 1.2x the item asks for); its targets grow with it */
  .activity-bar { width: 64px; }
  .activity-item { width: 44px; height: 44px; font-size: 1.25em; }
}

/* ---- 6. ≤1280px — the rails narrow. Nothing is lost yet. ---- */
@media (max-width: 1280px) {
  .sidebar { width: 248px; }
  .ai-pane { width: 300px; }
  .preview-feed { width: 280px; }
}

/* ---- 7. ≤1120px — the widest optional rails stand down (measured 2026-09-12 at 1,024 px: with the assistant
         present every source line truncated mid-word); the badges go, the wallet is capped ---- */
@media (max-width: 1120px) {
  .sidebar { width: 224px; }
  .ai-pane { display: none; }
  .preview-feed { display: none; }
  .kbd-shortcut { display: none; }
  .app-brand-badge { display: none; }
  .app-brand > span { display: none; }
  .wallet-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .titlebar-left { gap: 6px; }
  .env-btn { padding: 3px 8px; }
  .code-minimap { display: none; }
}

/* ---- 8. below 1,024 px, or any coarse pointer: every control is a full target (--tap, 44 px) ---- */
@media (max-width: 1023.98px), (pointer: coarse) {
  :where(.titlebar, .ide-actions, .app-body, .statusbar) :is(button, select, input:not([type=hidden]), summary, [role=button], a[href]) {
    min-height: var(--tap); min-width: var(--tap); }
  .titlebar { height: auto; min-height: 52px; }
  .env-btn { min-width: var(--tap); }
  .activity-item { min-height: var(--tap); min-width: var(--tap); }
  .tree-item { min-height: var(--tap); }
  .wallet-badge { min-height: var(--tap); display: inline-flex; align-items: center; }
  .titlebar.bar .af-pill.af-bar select { min-height: var(--tap); }   /* flash.js sets the bar picker 2 px under --tap */
}

/* ---- 9. ≤900px — the search box goes (⌘K still opens the palette); the explorer keeps shrinking ---- */
@media (max-width: 900px) {
  .command-search { display: none; }
  .sidebar { width: 196px; }
  .wallet-badge #wallet-label { display: none; }   /* the coin stays, its words are its title */
}

/* ---- 10. ≤720px — a tablet held upright ---- */
@media (max-width: 720px) {
  .window-dots { display: none; }
  .env-segmented { padding: 1px; }
  .env-btn { padding: 3px 7px; font-size: 11px; }
  .activity-bar { width: 48px; gap: 6px; }
  .sidebar { width: 168px; }
  .bottom-panel { height: min(245px, 40vh); }
}

/* ---- 11. below 640 px — a phone: actions show their icon, the button keeps its name ---- */
@media (max-width: 639.98px) {
  /* the workspace stacks and scrolls inside itself (a declared pane): the editor keeps 60dvh, so the first screen
     (the user-type chooser) is not squeezed into the row the bars leave (measured: its text ran under the checks bar) */
  .main-workspace { overflow-y: auto; }
  .main-workspace > .editor-container { flex: 0 0 auto; min-height: 60dvh; }
  .main-workspace > .bottom-panel { flex: 0 0 auto; }
  .main-workspace > :not(.editor-container) { flex-shrink: 0; }
  .ide-actions .lbl { display: none; }
  .line-numbers { display: none; }
  .sidebar { width: 144px; }
  .tabs-bar { overflow-x: auto; }
  .editor-tab { flex: 0 0 auto; }
  .breadcrumbs { display: none; }
  .bottom-panel { height: min(245px, 46vh); }
  /* a phone reads the chrome at the body scale (16 px), not the desktop UI scale (13 px at 390; measured 2026-10-02 the
     body read 13 LTR and 16.64 RTL, because layout.css raises only the RTL body) */
  body { font-size: var(--fs-body); }
  .toolbar-actions { gap: 4px; }
}

/* ---- 12. a short window, at any width: the terminal takes a share rather than a fixed 245px ---- */
@media (max-height: 640px) {
  .bottom-panel { height: 38vh; }
}
@media (max-height: 480px) {
  .bottom-panel { height: 42vh; }
}

/* ---- 13. Franklin's strip in the IDE. The IDE is an app shell (100vh, a flex column), and companion.js puts the strip
         in flow after it and opens it from 1,920 px. Open by default it took 635 of 1,080 px at 1,920 and left the
         editor, explorer and assistant 310 px (measured). Here it stays folded to its one-line head unless the
         visitor opens it (data-observer="open", their choice, remembered by companion.js). ---- */
#companion-strip.observer-flow:not([data-observer="open"]) .observer-body,
#companion-strip.observer-flow:not([data-observer="open"]) .observer-foot { display: none; }
body > #companion-strip.observer-flow { flex: 0 0 auto; }