/* ═══ Phone layout (loads last, wins the cascade). Desktop is untouched.
   The editors restack into a column: canvas on top, active panel and
   properties under it, the tool rail pinned to the bottom like a tab bar.
   !important beats the inline widths the desktop splitters persist. ═══ */

@media (max-width: 820px) {

  /* ── app chrome ── */
  .topbar { padding: 0 8px; gap: 7px; }
  .topbar .logo span:not(.mark) { display: none; }   /* keep the mark, drop the word */
  .storage-meter { width: 96px; }
  .home-inner { padding: 16px 12px 40px; }
  .settings-inner { padding: 16px 12px 40px; }
  .ai-form-row { grid-template-columns: 1fr; gap: 4px; }
  .ai-conn-sub .ai-url { max-width: 160px; }

  /* ── editor top bar scrolls sideways instead of wrapping ── */
  .ed-top { overflow-x: auto; overflow-y: hidden; }
  .ed-top .title-input { width: 110px; flex: none; }
  .ed-top > * { flex: none; }

  /* ── editor shell restacks ── */
  .ed-main, .ve-main { flex-direction: column; overflow-y: auto; }
  .splitter { display: none; }

  .ed-rail {
    order: 10; position: sticky; bottom: 0; z-index: 6;
    flex-direction: row; width: 100% !important; height: auto;
    padding: 3px 6px calc(3px + env(safe-area-inset-bottom)); gap: 0;
    overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-top: 1px solid var(--stroke-soft);
    background: var(--bg-1);
  }
  .ed-rail button { width: auto; min-width: 56px; flex: none; padding: 8px 4px 7px; }

  /* image editor: the canvas stays PINNED at the top while panels scroll
     beneath it — you never lose sight of what you are editing. Pinch zooms,
     two fingers pan, double-tap toggles fit. */
  .ed-stage {
    order: 1; flex: none; height: 42vh; min-height: 220px;
    position: sticky; top: 0; z-index: 5;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
  }
  /* what you selected is editable right under the canvas — the tab content
     (templates, media, …) comes after */
  .ed-props {
    order: 2; width: 100% !important;
    border-left: 0; border-top: 1px solid var(--stroke-soft);
  }
  .ed-panel {
    order: 3; width: 100% !important; max-height: none;
    border-right: 0; border-top: 1px solid var(--stroke-soft);
  }

  /* video editor: stage + transport + timeline stay pinned together on top */
  .ve-center {
    order: 1; flex: none;
    position: sticky; top: 0; z-index: 5; background: var(--bg-0);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
  }
  /* flex:none matters: the desktop flex:1 basis lets the canvas dictate the
     height, which balloons past the viewport on phones */
  .ve-center .ed-stage, .ve-stage { height: 30vh; min-height: 170px; flex: none; position: static; box-shadow: none; }
  .ve-dock { height: 170px !important; }
  .ve-track { height: 56px; }
  .ve-tools { overflow-x: auto; }
  .ve-tools .btn { flex: none; }
  .fx-row input[type="range"].range { width: 64px; }

  /* video editor side panels stack under the pinned center */
  .ed-panel.collapsed { display: block; }        /* collapse is a desktop gesture */
  .ed-props.ve-props { flex-direction: column-reverse; }
  .ed-props.ve-props.collapsed { width: 100% !important; }
  .ed-props.ve-props.collapsed .tool-panel { display: flex; }
  .tool-rail {
    flex-direction: row; width: 100%; padding: 4px 6px;
    justify-content: space-around; overflow-x: auto;
    border-left: 0; border-bottom: 1px solid var(--stroke-soft);
  }
  .tool-rail button { min-width: 60px; }
  .tool-panel { max-height: 46vh; }

  /* touch targets */
  .btn-sm { min-height: 32px; }
  .layer-x { padding: 6px; }
  .ve-clip .grip, .ve-pill .pgrip { width: 16px; }

  /* hover-only affordances are always visible on touch */
  .project-card .menu-btn, .media-card .menu-btn, .media-mini-grid .cell .cell-ov { opacity: 1; }

  /* modals hug the small screen */
  .modal-veil { padding: 8px; }
  .modal.md-xl { height: 96vh; }
}