/* ============================================================================
   BlockGenie Codex — mobile layer (docs/50-mobile.md)
   Loaded LAST on every surface, after the surface's own sheet. It only bends
   layout at phone widths / coarse pointers; desktop is untouched except for
   two regressions it repairs (marked). Nothing in here invents a component:
   it enforces the floor — 16px inputs, 44px targets, no horizontal page
   scroll, drawers that close, sheets that fill the phone, tables that stack
   or scroll on their own, safe-area insets.

   Invariants it protects (docs/29, docs/37):
     .btn-send is never display:grid  ·  .slab track stays minmax(0,1fr)
     .stage min-height 0 (API)         ·  .app height bound (Desk)
   ========================================================================== */

/* ── desktop repairs (all widths) ─────────────────────────────────────── */
/* the shell nav's sheet footnote is a phone-only element; on desktop it was
   rendering inline inside the door list */
@media (min-width: 861px) {
  .pbar-nav .sheet-foot { display: none; }
}

/* ── phone floor ──────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* no page ever scrolls sideways; the surfaces that need a wide table or a
     long code line scroll it inside its own box (below) */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* micro type floor: 11px → 12px. Tapes, sources, counts, kbd hints. */
  :root { --t-micro: .75rem; }
  .prompt .pk, .command-option .command-meta, kbd,
  .pbar-k kbd, .sh-palette-search kbd, .pbar-user .who small,
  .params .in, .auth-hint, .out { font-size: 12px; }
  .g-lbl { font-size: 12px; }

  /* iOS zooms the page when a focused control is under 16px. Every text
     control on every surface reads at 16px on a phone. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea { font-size: 16px !important; }

  /* horizontal safe-area for notched phones held sideways */
  .pbar, .topbar, .composer-wrap, .view, .stage-scroll, .ck, .gate, .banner {
    padding-left: max(var(--s4, 16px), env(safe-area-inset-left));
    padding-right: max(var(--s4, 16px), env(safe-area-inset-right));
  }
  .sidebar { padding-left: max(var(--s3, 12px), env(safe-area-inset-left)); }
}

/* ── coarse pointers: 44px targets ────────────────────────────────────── */
@media (pointer: coarse), (max-width: 860px) {
  .icon-btn, .rail-toggle, .side-close, .palette-trigger, .pbar-k, .pbar-burger, .pbar-user,
  .chip, .btn, .btn-solid, .btn-outline, .btn-quiet, .btn-danger, .ghost-btn, .new-thread,
  .product-nav a, .nav-item, .presets button, .toc-nav a, .toc-nav .toc-op,
  .thread-menu button, .menu-opts button, .command-option, .sh-palette-item,
  .pbar-menu a, .pbar-menu button, .project-item, .project-panel-actions button,
  .files-list button, .act, .later-drop, .upload-label, .lamp-copy, #copyCode,
  .identity-row button, .identity-row select, .tbl button, .tbl select, .sh-table .actions > * {
    min-height: 44px;
  }
  .icon-btn, .rail-toggle, .side-close, .pbar-k, .pbar-burger, .later-drop { min-width: 44px; }
  .pbar-user { min-width: 44px; justify-content: center; }
  .side-search, .command-search, .sh-palette-search { min-height: 48px; }
  .side-search input, .command-search input, .sh-palette-search input { min-height: 44px; }
  .auth-slab input, .login-form input, .field-row input, .modal input, .modal select,
  .identity-form input, .identity-form select, .mint-row input, .slab-left input, .slab-left select { min-height: 44px; }
  .chat-item { min-height: 44px; align-content: center; }
  .prompt { min-height: 44px; }
  .attach-chip .drop { width: 28px; height: 28px; }

  /* the composer keeps its geometry (docs/29): Send stays a circle, one
     object, inline-flex — only its hit area grows */
  .btn-send { display: inline-flex; width: 44px; height: 44px; }
  .btn-send.is-steer { width: auto; min-height: 44px; }
  .btn-stop { width: 44px; height: 44px; }
  .attach-btn { width: 44px; height: 44px; }
  .seg button { min-height: 40px; padding: 0 var(--s3); }
  .model-btn { min-height: 40px; }
  .slab-foot { gap: var(--s2); }
  .slab-right { gap: var(--s2); }

  /* hover-only reveals become resting states on touch */
  .turn-actions, .code-copy, .turn-tape, .op-copy, .row-actions { opacity: 1; }
}

/* ── phones: drawers, sheets, dialogs, tables ─────────────────────────── */
@media (max-width: 720px) {
  /* the drawer slides in UNDER the product bar, never over it — otherwise the
     bar (z 70) covers the drawer's own close button (drawer z 60) */
  body:has(.pbar) .sidebar { top: var(--bar-h, 48px); height: auto; bottom: 0; padding-top: var(--s3); }
  body:has(.pbar) .scrim { top: var(--bar-h, 48px); }
  .sidebar { padding-bottom: max(var(--s3), env(safe-area-inset-bottom)); }
  .sidebar .side-top { display: flex; align-items: center; justify-content: space-between; }
  .sidebar .side-close { display: inline-grid; }
  .side-foot { padding-bottom: env(safe-area-inset-bottom); }

  /* the shell's own door sheet gets the same bottom inset and a real height */
  .pbar-nav.is-open { max-height: calc(100dvh - var(--bar-h, 48px)); }

  /* ⌘K becomes a full-screen sheet. dialog is fixed in the top layer, so
     inset:0 + margin:0 fills the phone; the list takes the rest of the height. */
  .command-dialog, .sh-palette {
    position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none;
    margin: 0; border: 0; border-radius: 0; box-shadow: none;
    display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top);
  }
  .command-dialog:not([open]), .sh-palette:not([open]) { display: none; }
  .command-dialog::backdrop, .sh-palette::backdrop { background: var(--ink, #0b0d11); }
  .command-search, .sh-palette-search { flex: none; min-height: 60px; }
  .command-results, .sh-palette-list { flex: 1 1 auto; max-height: none; overflow-y: auto; padding-bottom: max(var(--s5), env(safe-area-inset-bottom)); }
  .command-empty, .sh-palette-empty { flex: none; }
  /* there is no Esc key on a phone: the hint becomes the close control
     (mobile.js wires the click and relabels it) */
  .command-search kbd, .sh-palette-search kbd {
    min-height: 40px; min-width: 60px; display: inline-grid; place-items: center;
    padding: 0 var(--s3); border-bottom-width: 1px; border-radius: var(--r-md, 6px);
    font-family: var(--sans); font-size: var(--t-sm); letter-spacing: 0; text-transform: none;
    color: var(--bone); cursor: pointer;
  }
  /* rows: label on the first line, meta under it — never a fight for width */
  .command-option { grid-template-columns: 20px minmax(0, 1fr); row-gap: 2px; min-height: 52px; padding: var(--s2); }
  .command-option .command-label { grid-column: 2; white-space: normal; overflow: visible; }
  .command-option .command-meta { grid-column: 2; }
  .sh-palette-item { flex-wrap: wrap; min-height: 52px; }
  .sh-palette-item b { white-space: normal; flex: 1 1 100%; }
  .sh-palette-item small { flex: 1 1 100%; white-space: normal; padding-left: 28px; }

  /* modals: never taller than the phone, actions stack and stretch */
  .modal, .modal-wide { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; padding: var(--s5); }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions > .btn-solid, .modal-actions > .btn-outline, .modal-actions > .btn-danger { flex: 1 1 10rem; justify-content: center; }
  .files-actions { flex-direction: column; align-items: stretch; }
  .menu { max-height: calc(100dvh - 24px); overflow-y: auto; }

  /* the lamp (device code) — selectable as one object, room for the copy */
  .device-code { user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
  .device-code-row { align-items: flex-start; }
  .device-url a { overflow-wrap: anywhere; word-break: break-word; }

  /* API reference: parameter tables become stacked rows (need · name · in /
     notes), the intro curl wraps, the out tape scrolls inside itself */
  .params thead { display: none; }
  .params, .params tbody { display: block; width: 100%; overflow: visible; }
  .params tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s3); align-items: center; padding: var(--s2) 0; border-top: 1px solid var(--edge-soft); }
  .params td { display: block; border: 0; padding: 0; }
  .params td.desc { grid-column: 1 / -1; padding-top: 4px; }
  .params td.name { overflow-wrap: anywhere; }
  .intro pre, .ide-connect pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
  .out { overflow-x: auto; }
  .try .row, .try-actions { flex-wrap: wrap; }
  .side-search { min-height: 48px; }

  /* Cockpit and any shared table: the wrap scrolls, the page never does */
  .table-wrap, .sh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; }
  .facts, .fact { min-width: 0; }
  .fact > * { overflow-wrap: anywhere; }
  .cell-num { font-size: clamp(1.75rem, 8vw, 2.25rem); }

  /* Ops: identity rows stack — text above, controls in one wrapping row */
  .identity-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s2); align-items: center; }
  .identity-row > div:first-child { grid-column: 1 / -1; min-width: 0; margin-bottom: var(--s1); }
  .identity-row > div:first-child .tape { overflow-wrap: anywhere; }
  .identity-row > select, .identity-row > button { width: 100%; min-width: 0; justify-content: center; }
  .cron-row, .proj, .job { min-width: 0; }
  .split-main .files-head { flex-wrap: wrap; gap: var(--s2); }

  /* Checker: pills and probes wrap instead of clipping */
  .pills { flex-wrap: wrap; }
  .probe-code, .fact-v, .qright { overflow-wrap: anywhere; }

  /* product nav (pages without the shell bar): scrollable strip with insets */
  .product-nav { scrollbar-width: none; margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4); width: auto; }
  .product-nav::-webkit-scrollbar { display: none; }
  .product-nav a { min-height: 44px; }

  /* gate: one column, big door */
  .gate { padding-bottom: max(var(--s7), env(safe-area-inset-bottom)); }
  .gate-form .field-row > * { flex: 1 1 100%; }
  .field-row .btn-solid { justify-content: center; }
}

/* ── the short viewport (keyboard up, or landscape) ───────────────────── */
@media (max-width: 860px) and (max-height: 520px) {
  .hint, .empty .desk, .empty .starters, .empty-lede { display: none; }
  .empty .display { font-size: 1.75rem; }
  .topbar { min-height: 44px; padding-top: var(--s1); padding-bottom: var(--s1); }
  .composer-wrap { padding-bottom: max(var(--s2), env(safe-area-inset-bottom)); }
  .slab textarea { max-height: 96px; }
}

/* ── 360px: the tightest lane ─────────────────────────────────────────── */
@media (max-width: 380px) {
  .transcript, .composer-wrap, .topbar, .view, .stage-scroll { padding-left: var(--s3); padding-right: var(--s3); }
  .composer-wrap { padding-left: max(var(--s3), env(safe-area-inset-left)); padding-right: max(var(--s3), env(safe-area-inset-right)); }
  .slab { padding: var(--s2); }
  .seg button { padding: 0 10px; }
  .model-btn { padding-left: var(--s2); max-width: 9rem; }
  .top-title h1 { font-size: var(--t-ui); }
  .strip { grid-template-columns: minmax(0, 1fr); }
  .strip .cell:nth-child(even) { border-left: 0; }
  .strip .cell:nth-child(n + 2) { border-top: 1px solid var(--edge-soft); }
  .mint-row { grid-template-columns: minmax(0, 1fr); }
  .device-code { font-size: 1.375rem; letter-spacing: .14em; }
  .modal, .modal-wide { padding: var(--s4); }
  .display, .gate-display, .empty .display { font-size: clamp(1.875rem, 9vw, 2.25rem); }
}

/* ── forced colours keep the sheet edges ─────────────────────────────── */
@media (forced-colors: active) and (max-width: 720px) {
  .command-dialog, .sh-palette { border-top: 1px solid CanvasText; }
  .command-search kbd, .sh-palette-search kbd { border: 1px solid CanvasText; }
}