/* Phone review: one task at a time, without changing desktop preferences. */
.mobile-menu-toggle, .mobile-comments-toggle, .mobile-volume-toggle,
.dock-mobile-label, .dock-mobile-options, .dock-mobile-empty, .script-mobile-more { display: none; }
.frame-text-link { display: contents; }
.dock-item { display: contents; }
.player-transport .mobile-volume-toggle { display: none; }

.dialog.mobile-panel { display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 8px; }
.mobile-panel-head { display: flex; align-items: center; gap: 8px; flex: none; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.mobile-panel-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px; letter-spacing: 0; }
.mobile-panel-head .btn { flex: none; }
.mobile-panel-body { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; padding: 8px; }
.mobile-panel-body > .mi { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 4px; font-size: 15px; gap: 12px; text-align: left; white-space: normal; overflow-wrap: anywhere; color: var(--ink); }
.mobile-panel-body > .mi:hover { background: var(--bg-sunk); }
.mobile-panel-body > .mi:disabled { opacity: .4; }
.mobile-panel-body > .mi.danger { color: var(--danger); }
.mobile-panel-body > .mi > svg { flex: none; width: 20px; height: 20px; }
.mobile-panel-body > .mi[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.mobile-menu-chevron { margin-left: auto; }
.mobile-panel.full .mobile-panel-body { display: flex; padding: 0; overflow: hidden; }

@media (max-width: 700px) {
  .app :is(button, a), .dialog :is(button, a) { -webkit-tap-highlight-color: transparent; }
  .app { height: 100dvh; }
  .app .chrome .topbar.hdr { height: 52px; min-height: 52px; padding: 4px 8px; gap: 8px; }
  .app .chrome .topbar.hdr > .btn:not(.mobile-menu-toggle) { display: none; }
  .app .chrome .topbar.hdr .crumbs { flex: 1; min-width: 0; overflow: hidden; gap: 5px; }
  .app .chrome .topbar.hdr .crumbs a { max-width: 30%; }
  .app .chrome .topbar.hdr .crumbs .here { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app .chrome .topbar.hdr .spacer { display: none; }
  .app .chrome .topbar.hdr .crumb-logo { max-width: 24px; max-height: 24px; }
  .app .chrome .mobile-menu-toggle { display: inline-flex; width: 44px; height: 44px; flex: none; }
  .app .chrome .toolbar { height: auto; min-height: 54px; padding: 0 4px; overflow: visible; gap: 2px; }
  .app .chrome .toolbar > :not(.seg.center, .compare-tools-bar) { display: none; }
  .app .chrome .toolbar .seg.center { display: flex; flex: 1; min-width: 0; width: auto; padding: 0; gap: 0; align-self: flex-end; background: transparent; }
  .app .chrome .toolbar .seg.center button { flex: 1; min-width: 0; height: 50px; margin: 0; padding: 4px 1px; font-size: 11px; flex-direction: column; gap: 4px; border: 1px solid transparent; border-bottom: 0; border-radius: 14px 14px 0 0; letter-spacing: 0; }
  .app .chrome .toolbar .seg.center button[aria-pressed="true"] { height: 51px; margin-bottom: -1px; border-color: var(--line); box-shadow: none; background: var(--bg-sunk); }
  .app .chrome .toolbar .seg.center button[aria-pressed="true"] svg { color: var(--accent); }
  .app .chrome .toolbar .seg.center svg { width: 18px; height: 18px; }
  .app .chrome:has(.compare-tools-bar) .toolbar { flex-wrap: wrap; }
  .app .chrome .compare-tools-bar { order: 2; flex: 1 0 100%; justify-content: center; margin: 0; border-top: 1px solid var(--line); }
  .app .chrome .compare-tools-bar button { width: 44px; height: 40px; }
  .old-version-note { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  .old-version-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .old-version-note .mono, .old-version-note .muted, .old-version-note > div { display: none; }
  .old-version-note .btn { min-height: 44px; }
  .work > .tray, .work > .dock { display: none !important; }
  .work > .canvas-wrap { flex: 1 1 auto; width: 100%; min-height: 0; }
  .canvas-foot:not(.tracker-foot) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); flex: none; height: auto; min-height: 56px; gap: 0; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .canvas-foot .mobile-comments-toggle { display: inline-flex; grid-column: 2; grid-row: 1; height: 44px; padding: 0 14px; gap: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-raise); font-size: 13px; color: var(--ink); }
  .canvas-foot .playback-settings { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
  .canvas-foot .foot-details, .canvas-foot .zoom, .canvas-foot .spacer { display: none; }
  .canvas-wrap .help-fab { display: none; }

  .dialog-scrim { padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); }
  .dialog { max-width: 100%; max-height: calc(100dvh - 24px); overflow-y: auto; border-radius: 8px; }
  .dialog.mobile-panel { width: 100%; height: min(720px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); }
  .dialog-scrim:has(> .mobile-panel.full) { padding: 0; }
  .dialog.mobile-panel.full { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; animation: none; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .dialog .btn, .mobile-panel-head .btn, .pop .mi { min-height: 44px; }
  .dialog .btn.icon, .mobile-panel-head .btn.icon { min-width: 44px; }
  .dialog input:not([type="range"], [type="checkbox"], [type="radio"]), .dialog textarea, .dialog select { font-size: 16px; }
  .pop { max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px); overflow-y: auto; }
  .mobile-panel .tray { display: flex; flex: 1; min-height: 0; border: 0; width: 100% !important; }
  .mobile-panel .tray-head { padding: 4px 10px; min-height: 52px; }
  .mobile-panel .tray-head .t { display: none; }
  .mobile-panel .tray-head :is(.fbtn, .comment-state) { min-width: 44px; min-height: 44px; }
  .mobile-panel .tray-list { padding: 8px 12px; }
  .mobile-panel .tray .cmt .body { font-size: 15px; line-height: 1.5; }
  .mobile-panel .composer .cfield { font-size: 16px; min-height: 72px; max-height: 28dvh; }
  .mobile-panel .composer :is(.btn, .cb-send) { min-height: 44px; }
  .mobile-panel .tray .cmt .reply-btn { min-height: 36px; min-width: 36px; }
  .mobile-panel .dock { display: flex !important; flex: 1; flex-direction: column; width: 100%; min-height: 0; background: var(--bg); }
  .mobile-panel.full .dock .dock-list { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 8px 12px; overflow-y: auto; overflow-x: hidden; }
  .mobile-panel .dock-item { display: flex; align-items: center; min-width: 0; border-bottom: 1px solid var(--line); }
  .mobile-panel :is(.dock-tile, .dock-add) { width: 100%; height: auto; min-height: 64px; flex: none; min-width: 0; border-radius: 4px; padding: 8px; display: flex; align-items: center; gap: 12px; text-align: left; text-decoration: none; }
  .mobile-panel .dock-item .dock-tile { flex: 1; }
  .mobile-panel .dock-tile svg, .mobile-panel .dock-add svg { width: 22px; height: 22px; flex: none; }
  .mobile-panel .dock-mobile-label { display: grid; min-width: 0; gap: 3px; overflow-wrap: anywhere; font-size: 14px; }
  .mobile-panel .dock-mobile-label strong { font-weight: 550; }
  .mobile-panel .dock-mobile-label > span { font-size: 12px; color: var(--ink-3); }
  .mobile-panel .dock-mobile-options { display: inline-flex; flex: none; }
  .mobile-panel .dock-mobile-empty { display: block; padding: 20px 8px; color: var(--ink-3); }

  .review-player.native { height: calc(var(--float-h) + 88px + var(--subtitle-h)); }
  .player-float.float { top: 0; left: 0; right: 0; width: 100%; max-width: 100%; }
  .player-stage-row:not(.compare-side) > .player-stage-wrap.float { width: 100%; aspect-ratio: auto; }
  .player-stage-wrap.float, .player-stage.float { border-radius: 0; box-shadow: none; border: 0; }
  .player-stage-grip, .player-float .corner-grip, .player-shotmeta .shot, .player-shotmeta .frame-actions,
  .player-focus, .timeline-start-gutter, .tl-gutter, .row-grip { display: none !important; }
  .player-shotmeta { min-width: 0; width: 100%; }
  .player-float:not(.comparing) .player-shotmeta:has(> .player-tcbox:not([hidden]))::before,
  .frame-shuttle:has(> .player-tcbox:not([hidden]))::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line); pointer-events: none; }
  .player-shotmeta .player-meta-end { display: none; }
  .player-ruler-dock, .player-ruler-module { height: 44px; }
  .player-transport :is(button, .tp-play) { min-width: 44px; width: 44px; height: 44px; }
  .player-ruler-module { --ruler-shoulder: 10px; padding-inline: 0; }
  .player-transport { gap: 0; }
  .player-transport > .player-volume, .player-transport .transport-sep { display: none; }
  .player-transport .mobile-volume-toggle { display: grid; place-items: center; }
  .mobile-volume-pop .player-volume { display: flex; gap: 12px; padding: 4px 8px; }
  .mobile-volume-pop .player-volume button { width: 44px; height: 44px; }
  .mobile-volume-pop .player-volume input[type="range"] { width: 160px; height: 44px; }
  .tl { --gutter-w: 0px; overflow-x: clip; }
  .tl-cursor, .player-timeline-cursor, .player-timeline-flag { display: none; }
  .tl-row.comments { height: 40px; }
  .tl-comment-add, .tl-row.comments:not(:has(.tl-comment-pill)) { display: none; }
  .tl-comment-pill { min-height: 32px; }
  .tl-clip .clip-head { font-size: 9px; }
  .board { grid-template-columns: repeat(var(--mobile-board-columns, 2), minmax(0, 1fr)); gap: 12px 8px; padding: 12px 8px; }
  .board-card { min-width: 0; }
  .board-card .st-chip.ghost { display: none; }
  .board-card .caps { display: none; }
  .board-card .caps:has(> .player-subtitles:not([hidden])) { display: block; position: absolute; left: 8px; right: 8px; bottom: 28px; min-height: 48px; z-index: 6; }
  .board-cbdg::after { content: ""; position: absolute; inset: -8px; }
  .canvas-foot .playback-settings .btn { min-width: 44px; min-height: 44px; }
  .frame-cmts, .frame-corner-grip { display: none; }
  .frame-view { padding-inline: 0; }
  .frame-strip { margin-inline: 0; }
  .frame-col { width: 100% !important; gap: 8px; margin-top: 8px; }
  .frame-meta { gap: 8px; padding-inline: 8px; }
  .frame-meta .time, .frame-meta .duration { display: none; }
  .frame-meta .shot { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .frame-meta .frame-download { width: 44px; height: 44px; }
  .frame-meta .st-chip { max-width: 40%; min-height: 44px; overflow-wrap: anywhere; }
  .frame-stage-wrap, .frame-stage-wrap.resized { width: 100%; }
  .frame-stage { border-radius: 0; box-shadow: none; }
  .frame-stage > img { width: 100%; max-height: none; }
  .frame-pin { position: relative; top: auto; }
  .frame-nav { width: 44px; height: 64px; font-size: 32px; border-radius: 6px; }
  .frame-caps { padding-inline: 8px; }
  .fr-pill { min-height: 44px; white-space: normal; }
  .frame-composer { padding: 6px; background: transparent; border-radius: 0; box-shadow: none; }
  .frame-composer > :not(.tools), .frame-composer .vr, .frame-text-link { display: none; }
  .frame-composer .tools { gap: 0; flex-wrap: wrap; justify-content: center; }
  .frame-composer .tools .btn { width: 44px; height: 44px; flex: none; }

  .script-view-toolbar { flex-wrap: nowrap; overflow: visible; padding: 4px 6px; gap: 4px; }
  .script-view-toolbar > .spacer, .script-view-toolbar > .script-size-toggle, .script-view-toolbar > .script-sections-button { display: none; }
  .script-view-toolbar > .script-edit-error:empty { display: none; }
  .script-view-tools > :not([aria-label="Script display"], [aria-label="Edit script"], .script-mobile-more) { display: none; }
  .script-mobile-more { display: inline-flex; }
  .script-view-tools .btn { width: 44px; height: 44px; }
  .script-search { flex: 1; min-width: 0; }
  .script-search input { width: 100%; min-width: 0; font-size: 16px; height: 40px; }
  .script-search-results:not([hidden]) { flex-basis: 100%; }
  .script-view-toolbar:has(.script-search-results:not([hidden])) { flex-wrap: wrap; }
  .script-view.editing .script-view-toolbar { flex-wrap: wrap; }
  .script-view.editing .script-mobile-more { display: none; }
  .script-view.editing .script-edit-actions .btn, .script-edit-tools .btn { min-height: 40px; }
  .script-body, .comparing-scripts .script-body { --script-time-width: 44px; }
  .script-editor, .script-view.hide-thumbnails .script-editor { --script-thumbnail-rail: 0px; --script-gutter: 38px; --script-comments: 38px; }
  .script-view[data-text-size="small"] { --script-text-size: 12px; }
  .script-time-tick { font-size: 8px; padding-right: 2px; letter-spacing: 0; }
  .script-playhead-label { font-size: 8px; }
  .script-thumbnails { display: none !important; }
  .script-line-number { min-width: 28px; max-width: 34px; padding: 3px 2px; font-size: 9px; border-radius: 6px; overflow: visible; }
  .script-line-number::after { content: ""; position: absolute; inset: -9px -3px; }
  .script-cm .cm-content { margin-top: 8px; }
  .script-cm .cm-line { padding-inline: 8px; }
  .script-comment-rail { padding-left: 3px; gap: 0; }
  .script-comment-rail :is(.script-avatar, .script-line-comment) { width: 32px; height: 32px; }
  .script-comment-rail .script-line-comment { display: none; }
  .script-shuttle { height: 48px; justify-content: flex-end; }
  .script-shuttle > .player-tcbox { display: none; }
  .script-mobile-options { display: flex; flex-direction: column; gap: 8px; }
  .script-mobile-options > .btn { justify-content: flex-start; width: 100%; gap: 12px; }
  .script-mobile-options > .btn::after { content: attr(aria-label); font-size: 14px; }
  .script-mobile-options > .script-sections-button::after { content: none; }
  .script-mobile-options .script-size-toggle { display: flex; }
  .script-mobile-options .script-size-toggle button { flex: 1; height: 48px; font-size: 14px; }
}