/* ============================================================
   The Cutting Room — iOS layout (the phone door)
   Every rule is scoped under html.m-cut, which only exists when
   the editor is opened from the iOS app (?m=1). Desktop visitors
   never get the class, so nothing here can touch them.
   Same engine, every function — re-laid for a phone.
   ============================================================ */

html.m-cut, html.m-cut body { overflow-x: hidden; max-width: 100%; }
html.m-cut .page { padding-left: 12px; padding-right: 12px; }

/* ---------- masthead: compact, with a way back to the iOS app ---------- */
html.m-cut .masthead { align-items: center; gap: 10px; padding-top: calc(env(safe-area-inset-top) + 8px); }
html.m-cut .wordmark { font-size: 0.85rem; letter-spacing: 0.1em; }
html.m-cut .site-nav { display: none; }        /* the iOS app is the shell — no desktop nav */
html.m-cut .masthead-right { gap: 10px; }

/* ---------- unlock the desktop app-shell lock ---------- */
html.m-cut body.app-mode { overflow: auto; height: auto; min-width: 0; }
html.m-cut body.app-mode .page { height: auto; min-height: 100vh; }
html.m-cut body.app-mode #editor { display: block; height: auto; min-height: 0; }

/* ---------- the shell: three columns -> one phone column ---------- */
html.m-cut .app-shell,
html.m-cut .app-shell.shell-right {
  display: flex; flex-direction: column;
  grid-template-columns: none; grid-template-rows: none;
  width: 100%; min-width: 0; height: auto; gap: 0;
}
html.m-cut .shell-divider { display: none; }
html.m-cut .shell-pane,
html.m-cut .shell-right .shell-pane {
  width: 100%; min-height: 0; height: auto; overflow: visible;
  grid-column: auto !important; grid-row: auto !important;
}
/* stack order: film first, timeline under your thumbs, then words, then tools */
html.m-cut .pane-center   { order: 1; align-items: stretch; overflow: visible; }
html.m-cut .pane-timeline { order: 2; }
html.m-cut .pane-left     { order: 3; }
html.m-cut .pane-right    { order: 4; }

html.m-cut .pane-center .stage-col { width: 100%; }
html.m-cut .cut-stage, html.m-cut .stage-9x16 { max-height: 44vh; margin: 0 auto; }
html.m-cut .pane-tabs { flex-wrap: wrap; }
html.m-cut .pane-left .transcript-pane { max-height: 46vh; overflow-y: auto; }
html.m-cut .pane-timeline { max-height: none; overflow-x: auto; }
html.m-cut .pane-right .rail { width: 100%; }

/* ---------- TOUCH: the "it just drags the screen" fix ----------
   Anything you grab — chips, trim handles, the playhead, words,
   markers, sliders — claims the touch for itself, so the page
   stops scrolling underneath your finger. */
html.m-cut .tl-piece, html.m-cut .tl-chip, html.m-cut .tl-textrow .tl-chip,
html.m-cut .tl-handle, html.m-cut .tl-playhead, html.m-cut .tl-ruler,
html.m-cut .tl-lane, html.m-cut #overlay-lanes, html.m-cut #under-lanes,
html.m-cut #text-lanes, html.m-cut .lane-head, html.m-cut .film-head,
html.m-cut .tl-strip, html.m-cut .tl-thumbs, html.m-cut .capstrip,
html.m-cut .aroll-frame, html.m-cut .aroll-grip, html.m-cut .broll-frame,
html.m-cut .text-wrap, html.m-cut .cap-overlay, html.m-cut .cut-marker,
html.m-cut .pause-pill, html.m-cut input[type="range"] {
  touch-action: none;
}
/* plain taps stay snappy everywhere else (kills the 300ms double-tap wait) */
html.m-cut button, html.m-cut a, html.m-cut .word, html.m-cut .opt-pill,
html.m-cut .view-tab, html.m-cut .cq-pill, html.m-cut .seg-btn {
  touch-action: manipulation;
}
/* don't let a drag select text while trimming */
html.m-cut .pane-timeline, html.m-cut .pane-timeline * { -webkit-user-select: none; user-select: none; }
/* no rubber-band scroll-chaining while inside the timeline */
html.m-cut .pane-timeline { overscroll-behavior: contain; }

/* ---------- thumb-sized targets ---------- */
html.m-cut button, html.m-cut .opt-pill, html.m-cut .view-tab, html.m-cut .cq-pill {
  min-height: 40px;
}
html.m-cut .tl-handle { min-width: 18px; }
html.m-cut .word { padding: 3px 4px; line-height: 2.1; }

/* ---------- the chooser (clip list) on a phone ---------- */
html.m-cut #chooser-list a, html.m-cut #chooser-list .chooser-row { padding: 14px 4px; }