/* mobile-ergonomics.css — CDS mobile input ergonomics (Ben, 2026-07-23).
   Phone-width surfaces get thumb-sized, readable inputs. Any text-entry control at
   <16px font makes iOS Safari/WKWebView auto-zoom the viewport on focus, which is
   the "design doesn't work / jumpy zoom" defect in the iPhone shell — so every
   focusable text control is >=16px here. Scoped entirely to <=760px: desktop
   density is untouched. Loaded after app-extensions.css so its later rules win
   inside the same specificity. */

/* === Cross-platform (ALL widths) =========================================
   Ben 2026-07-25: "use the same changes for YB main app, i like them" — the
   composer geometry from the phone pass is the product-wide look now, so it
   lives OUTSIDE the media query and applies on web, desktop and mobile alike.
   Touch-target sizing and the 16px no-zoom floor stay phone-only below: they
   are device ergonomics, not design, and desktop density must not bloat. */
.box {
  padding: 6px 6px 6px 12px;
  gap: 6px;
  border-radius: 14px;
}
.box textarea {
  line-height: 1.4;
  padding: 8px 0;
  min-height: 20px;        /* single-line rest state; grows with content */
  max-height: 220px;
  border: 0;               /* the .box carries the border */
  border-radius: 0;
}

@media (max-width: 760px) {

  /* --- Text entry: readable and comfortable everywhere ------------------- */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,
  textarea,
  .form-field,
  .form-textarea {
    font-size: 16px;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 10px;
  }
  textarea,
  .form-textarea {
    min-height: 96px;
    line-height: 1.5;
  }

  /* --- Chat composer: the primary input, largest of all ------------------
     ITEM F (2026-07-24): the pill read oversized at rest — less rounding (was the full
     var(--r-pill), ~40px+ given the box's own height; capped at 14px here) and a slimmer
     rest-state height (padding + textarea padding both cut). Font stays AT the 16px iOS
     no-zoom floor — never lower, that rule is non-negotiable — the slimming comes from
     padding/line-height, not from shrinking text under 16px. */
  /* Geometry now lives in the cross-platform block above; phone width only has
     to hold the 16px iOS no-zoom floor. */
  .box textarea { font-size: 16px; }
  .send {
    width: 46px;
    height: 46px;
  }
  .send svg { width: 22px; height: 22px; }
  .clip {
    width: 44px;
    height: 44px;
  }

  /* --- Buttons: 44pt minimum tap targets --------------------------------- */
  .btn {
    font-size: 15px;
    padding: 12px 18px;
    min-height: 44px;
  }
  .icbtn {
    width: 44px;
    height: 44px;
  }
  .seg button,
  .seg .seg-item {
    min-height: 44px;
    font-size: 15px;
  }

  /* --- Auth / login card -------------------------------------------------- */
  .authc { padding: 26px 20px; }
  .gbtn {
    font-size: 16px;
    padding: 15px;
    min-height: 52px;
  }
  .auth-waitlist-button {
    font-size: 15px;
    min-height: 44px;
    padding: 12px 16px;
  }

  /* --- App header: one clean row, never a wrapped orphan cluster ---------- */
  /* _ds_bundle.css lets .top wrap at phone widths, which strands the nav
     icon buttons on a floating second row. Native-app pattern instead:
     logo mark only (wordmark hidden), all controls right-aligned in ONE row. */
  /* No overflow-x:auto here: since the 36px icon compaction the row FITS (YUM-516), and
     any overflow value except visible turns .top into a clip box that beheads the chat
     menu panel anchored inside it (only a sliver rendered below the bar). */
  .top {
    flex-wrap: nowrap;
    gap: 4px;
    padding: 10px 6px 10px 10px;
    align-items: center;
    overflow: visible;
    max-width: 100%;
    /* The bundle centres the bar with `margin: 0 auto`. Inside a flex COLUMN an auto margin
       on the cross axis cancels the stretch, so the bar collapsed to its padding — 16px wide,
       with the navigation spilling out of it. Full width, no auto margin. */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .top .word { display: none; }
  .top .icbtn {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
  }
  .top .model-toggle-wrap { gap: 8px; flex: 0 0 auto; }
  /* YUM-516 ("the navigation items are still cut off"): with the document controls and
     the Projects icon the row measured 486px on a 412px screen — Settings clipped off
     the edge. Two moves make it fit (~400px): the document open/minimize controls hide
     on a phone (documents stay reachable through file and chat cards), and the icon
     buttons compact from 40 to 36px with tighter gaps. */
  .top .nav-doc-btn { display: none; }

  /* YUM-517 (Ben 2026-08-03): a phone's top row is chat / projects / settings, nothing
     more. Files fold into the composer's attach menu and the Projects Files tab; the
     standalone deep-thinking toggle duplicates the model pill's bulb above and the
     composer's bulb below. */
  .top .nav-files-btn { display: none; }
  .top .think-toggle-btn { display: none; }

  /* YUM-517: the red fragments under the top icons were coach-mark tip bubbles (and
     their "i" badges) drawing clipped at phone widths. A 400px-wide working row has no
     room for floating tutorial chrome — tips are desktop-only. */
  .tip-bubble { display: none; }
  .tip-info { display: none; }

  /* YUM-517: the composer belongs on the bottom edge, thumb-reachable — not floating
     mid-screen under the prompt chips. The canvas mobile block above forces the shell
     to display:block/height:auto (its panes are position:fixed and don't care); restore
     the app column here so the last row really is the bottom of the screen. */
  .yarnball-app.yarnball-shell,
  .yarnball-shell.dock-rail {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }
  .yarnball-main { flex: 1 1 auto; min-height: 0; }
  .compwrap { margin-top: auto; }

  /* YUM-517: the corporate footer costs a full row of a small screen. */
  .app-footer { display: none; }

  /* YUM-517: the file drawer kept its desktop rail width (min(22vw,280px) ≈ a 90-200px
     strip) inside the now full-screen open dock — icons without names. On a phone the
     drawer IS the screen. !important: canvas.css sizes the panels through 3- and 4-class
     variants (.is-open.is-files-only, .is-files-mid.is-open.is-files-only, …) that a
     sane phone selector cannot outrank one by one. */
  .right-dock.is-open .right-dock-panels {
    width: 100% !important;
  }
  .right-dock.is-open .right-dock-panels > .files-drawer {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none;
    border-left: 0;
    border-right: 0;
  }

  /* --- Settings & generic form surfaces ---------------------------------- */
  .form-field.is-surface { padding: 13px 15px; }
  .field-stack { gap: 12px; }
  .action-row { gap: 12px; }
}


/* === Phone document surface, portrait AND landscape (YUM-517, Ben 2026-08-04) ===========
   Scoped by width OR height on purpose. A phone turned sideways is ~914 CSS px wide, which
   sails past a max-width:760px phone rule — so before this the document sheet fell back to
   the desktop dock and sat on top of the app's own navigation, clipping the icons in half.
   Height is what still says "phone" when the device is rotated: no phone is 520 px tall in
   landscape. Same one-panel-at-a-time design either way round. */
@media (max-width: 760px), (max-height: 520px) {
/* === Phone document surface (YUM-517, Ben 2026-08-03) ==========================
   canvas.css's phone block sizes the dock and the document pane with hard pixel
   arithmetic — `height:calc(100dvh - 151px)` for a 44px switch plus a 107px composer.
   Those numbers are wrong the moment anything moves: the composer is a different
   height once it wraps, and on rotation the pane keeps a portrait-shaped box, so the
   document ran under the composer and off the screen. Replaced here (this sheet loads
   after canvas.css) with a plain column that measures itself: dock top to bottom of the
   screen, the pane as the flexible row inside it. Nothing overlaps because nothing is
   positioned over anything — landscape included. */
/* The document does NOT cover the app. Ben, 2026-08-04: "the whole navbar on top
   disappeared" — it did, because this used to be a position:fixed sheet anchored at top:0,
   which lays over the top bar and leaves no way out of the document. It is now an ordinary
   row of the app's own column: the top bar keeps its place above it and the document takes
   exactly the space that is left. Nothing is positioned over anything, so nothing can be
   covered. */
/* THE one that broke the document view. canvas.css reserves a right-hand gutter the width
   of the desktop viewer so the dock can sit beside the page:
     .yarnball-shell.dock-open:has(.right-dock.is-doc-only .viewer-compact)
       { padding-right: calc(var(--viewer-side) + var(--dock-rail)) }
   canvas.js sets --viewer-side inline (520px). On a phone that gutter is the entire screen:
   the shell's content box measured 0px wide and every child collapsed with it — the top bar
   to 16px, the dock and the document to nothing. A phone has no side to dock to, so there is
   no width to reserve. !important because canvas.css pins this through five :has() variants
   that outrank any plain selector; naming them all here would rot the moment a sixth lands. */
.yarnball-shell,
.yarnball-shell.dock-open,
.yarnball-shell.dock-rail,
.yarnball-shell.tree-open {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Every state canvas.css pins with position:fixed has to be named here, or the one it names
   most specifically wins and the sheet floats over the app again. .is-doc-only (3 classes)
   and its :has(.viewer-compact) variant (4) both outrank a plain .right-dock.is-open — that
   is precisely why the first attempt at this fix changed nothing on screen. */
.right-dock.is-open,
.right-dock.is-open.is-doc-only,
.right-dock.is-open.is-files-only,
.right-dock.is-open.is-split,
.right-dock.is-open.is-files-tab-only,
.right-dock.is-open.is-doc-only:has(.viewer-compact) {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  z-index: auto;
}
/* A phone shows one thing at a time: while a document is open the chat list and its
   composer step aside rather than fighting it for the same column. The top bar's chat
   button is how you come back. */
.yarnball-shell:has(.right-dock.is-open) > .yarnball-main,
.yarnball-shell:has(.right-dock.is-open) > .compwrap {
  display: none;
}
/* The document's own toolbar wraps instead of running its controls off the right edge. */
.right-dock.is-open .dock-pane-actions,
.right-dock.is-open .canvas-head,
.right-dock.is-open .canvas-rich-toolbar {
  flex-wrap: wrap;
  row-gap: 6px;
}
/* wrap alone was not enough: the actions row is flex:0 0 auto, so it kept its 455px content
   width on a 412px screen and its buttons had no reason to wrap. Bounded to the parent, it
   wraps and every control stays on screen. */
.right-dock.is-open .dock-pane-actions {
  flex: 1 1 100%;
  max-width: 100%;
  min-width: 0;
}
.right-dock.is-open .right-dock-panels {
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}
.right-dock.is-open .canvas-pane {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.right-dock.is-open .canvas-body,
.right-dock.is-open .canvas-onlyoffice-wrap,
.right-dock.is-open .canvas-onlyoffice-host,
.right-dock.is-open .canvas-onlyoffice-mount,
.right-dock.is-open .docpv,
.right-dock.is-open .docpv-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}
/* The switch belongs IN the column, not fixed over it. */
.right-dock.is-open .canvas-mobile-switch {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
}
/* The last-chat-line overlay was pinned by the same broken arithmetic; on a phone the
   document owns the screen and the chat is one tap away. */
.right-dock.is-open .canvas-mobile-recent { display: none; }

/* While the document list IS open on a phone it is the screen, not a 300px slab parked over
   the document with the toolbar poking out behind it (Ben 2026-08-04: "the canvas keeps
   crashing the screen"). It sits above the dock so it is never half-covered, and its own
   content scrolls instead of running off the bottom. Picking a document closes it — see
   canvas.js. */
.canvas-tree.tree-drawer {
  width: 100vw;
  max-width: 100vw;
  z-index: 70;
  border-right: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
}
.canvas-tree.tree-drawer.collapsing { width: 0; padding-left: 0; padding-right: 0; }
/* The header wraps instead of pushing Close off the edge. */
.canvas-tree-head { flex-wrap: wrap; gap: 6px; row-gap: 8px; }

/* The short pull-out tab a collapsed file browser leaves behind: a thumb-sized handle on
   the edge, not a full-height rail. */
.right-dock.is-open .dock-files-tab {
  position: absolute;
  /* Mid-edge, not the top corner: at the top it landed on the document's own toolbar
     (theme picker, zoom) and read as part of it. Half way down the left edge it reads as
     what it is — a handle to pull the file list back out — and collides with nothing. */
  /* A true earmark: a slim edge grip. As a 72px labelled tab it lay across the document's
     text — icon only, hugging the edge, reachable without covering what you are reading. */
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: 69;
  width: 26px;
  min-width: 26px;
  min-height: 46px;
  padding: 0;
  justify-content: center;
  font-size: 0;
  opacity: .9;
  writing-mode: horizontal-tb;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* A modal must never be wider than the phone it is on. The CDS floors a dialog at
   320px, and a `wide` dialog at 480px, so a desktop modal cannot collapse into a
   narrow column. In CSS min-width beats max-width, so on a 402pt iPhone that 480px
   floor won the cascade outright: every wide modal rendered ~40px past each screen
   edge, clipping its own title and close button. On the Security panel that meant
   the "S" of "Security", the close X, and every green check badge were cut off
   (found in the iOS build 11 pass, 2026-08-18). Keep the floor as the intent it is,
   and let the viewport win whenever the viewport is the smaller of the two. */
.mcard { min-width: min(320px, 100%); }
.mcard.wide { min-width: min(480px, 100%); }
}