/* Phone-first chrome. CSS activates before the module arrives; desktop keeps
   its existing layout. Do not hide warnings, permissions, save or recording state. */
.phone-editor-nav { display: none; }
@media (max-width: 700px), (pointer: coarse) and (max-width: 1000px) and (max-height: 600px) {
  html { scroll-padding-top: max(12px, env(safe-area-inset-top)); scroll-padding-bottom: 140px; }
  body :is(input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea) { font-size: 16px; }
  body :is(button, summary, .primary-btn, .secondary-btn, .nav-editor-btn) { touch-action: manipulation; }

  /* The fifth navigation action used to land in the 42px Appearance column. */
  .landing-nav { position: relative; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); }
  .landing-nav-actions { display: grid; grid-template-columns: 44px repeat(3, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .landing-nav .nav-editor-btn { min-height: 48px; box-sizing: border-box; }
  .landing-nav .nav-open-studio { grid-column: 1 / -1; width: 100%; font-weight: 750; }
  .landing-nav-links, body[data-screen='landing'] [data-desktop-download] { display: none; }
  .landing .hero { padding: 22px 0 28px; gap: 24px; }
  .landing .hero h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); line-height: 1.04; }
  .landing .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .landing .hero-actions :is(button, a) { box-sizing: border-box; width: 100%; min-height: 48px; justify-content: center; margin: 0; }
  .landing .hero-proof { flex-wrap: wrap; gap: 10px; }
  .landing .marketing-stage { display: none; }
  .landing .recording-home { padding-top: 20px; }
  .landing .landing-section { padding-block: 36px; }

  body.editor .ed-pad { padding: 20px 14px; }
  body.editor .picker-heading-actions { gap: 8px; }
  body.editor .picker-heading-actions button { min-height: 48px; }
  body.editor .picker-library-tools { padding: 12px; }
  body.editor .picker-search-field { grid-column: 1 / -1; }
  body.editor .picker-sort-field { display: flex; align-items: center; gap: 10px; }
  body.editor .picker-sort-field select { min-width: 0; flex: 1; }
  body.editor .import-cta { padding: 14px; }
  body.editor .import-cta-btn { width: 100%; min-height: 48px; }
  body[data-screen='editor'] { height: auto; overflow: auto; }
  body[data-screen='editor'] #editor-screen { height: auto; margin-left: 0; padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
  body[data-screen='editor'] #edit-view { display: block; }
  body[data-screen='editor'] .ed-workspace { display: flex; flex-direction: column; height: auto; overflow: visible; padding: 8px; gap: 10px; }
  body[data-screen='editor'] .ed-stage { order: 1; }
  body[data-screen='editor'] .ed-dock { order: 2; min-height: 200px; }
  body[data-screen='editor'] .ed-rail-l { order: 3; scroll-margin-top: calc(var(--ed-header-h, 56px) + 12px); }
  body[data-screen='editor'] .ed-rail-r { order: 4; }
  body[data-screen='editor'] .ed-rail { min-width: 0; width: auto; }
  body[data-left='collapsed'] .ed-rail-l > :is(.rail-head, #transcript-panel, .editor-tool-context):not([hidden]),
  body[data-right='collapsed'] .ed-rail-r > :is(.rail-head, .ed-rail-scroll):not([hidden]) { display: revert; }
  body.editor :is(.ed-rail-toggle, .rail-collapse, .rail-expand) { display: none; }
  body[data-screen='editor'] .pv-monitor { padding: 0; }
  body[data-screen='editor'] .ed-header :is(button, .hbtn) { min-height: 44px; }
  body[data-screen='editor'] .build-stamp { bottom: calc(134px + env(safe-area-inset-bottom)); pointer-events: none; }
  body[data-screen='editor'] #editor-tool-rail[data-phone-tools-ready='true'] {
    position: fixed; inset: auto 0 0; width: auto; height: auto; max-height: none;
    display: flex; flex-direction: column; overflow: visible; gap: 0;
    padding: 0 max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
    background: var(--stage-1); border-top: 1px solid var(--line-strong); border-right: 0;
  }
  body.editor #editor-tool-rail[data-phone-tools-ready='true'] > .editor-rail-group { display: none; }
  body.editor #editor-tool-rail[data-phone-group='edit'] > .editor-rail-group-edit,
  body.editor #editor-tool-rail[data-phone-group='story'] > #editor-rail-story,
  body.editor #editor-tool-rail[data-phone-group='look'] > #editor-rail-look,
  body.editor #editor-tool-rail[data-phone-group='media'] > #editor-rail-media,
  body.editor #editor-tool-rail[data-phone-group='finish'] > #editor-rail-finish {
    display: flex; margin: 0; padding: 4px 0; border: 0; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain;
  }
  #editor-tool-rail[data-phone-tools-ready='true'] .editor-rail-group-title { display: none; }
  #editor-tool-rail[data-phone-tools-ready='true'] :is(.editor-rail-group-items, .editor-rail-action-slot) { display: flex; flex-direction: row; gap: 4px; }
  body.editor #editor-tool-rail[data-phone-tools-ready='true'] .editor-subtool-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 76px; width: 76px; min-height: 56px; padding: 5px 3px; text-align: center; }
  #editor-tool-rail[data-phone-tools-ready='true'] .editor-subtool-btn .hb-ico { width: 30px; min-width: 30px; max-width: 30px; min-height: 18px; }
  #editor-tool-rail[data-phone-tools-ready='true'] .editor-subtool-btn .hb-lbl { width: 100%; max-width: 100%; white-space: normal; font-size: 10px; line-height: 1.1; }
  body.editor #editor-tool-rail .phone-editor-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
  body.editor #editor-tool-rail .phone-editor-nav button { margin: 0; padding: 6px 2px; min-height: 48px; min-width: 0; border: 0; border-radius: 0; color: var(--ink-dim); background: transparent; font-size: 12px; }
  body.editor #editor-tool-rail .phone-editor-nav button[aria-pressed='true'] { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 -3px var(--accent); }

  body.studio .studio-header { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  body.studio .arm-preview-foot button { min-height: 44px; }
  body.studio .arm-enter-bar button { min-height: 48px; }
  body.studio .controls { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  body.studio .pt-rail { scroll-snap-type: x proximity; }
  body.studio .pt-rail-button { scroll-snap-align: start; }
  body.studio #editor-mode-bar { gap: 6px; padding: 2px 6px; min-height: 44px; flex-wrap: nowrap; }
  body.studio #editor-mode-bar #editor-mode-back { min-height: 44px; padding: 4px 8px; margin: 0; white-space: nowrap; font-size: 11px; }
  body.studio #editor-mode-bar #editor-mode-status { font-size: 10px; line-height: 1.2; }
  body.studio #editor-mode-frame { min-height: 0; }
}