/* =====================================================================
   modules/base/assets/styles.phone.css — phone shell overrides

   Loaded via <link media="(max-width: 450px)">, so no @media wrapper here.
   Must load after styles.css: equal specificity, later wins.

   The file tree fills the page; the editor slides in over it. `.collapsed`
   keeps its meaning (aside hidden) — only the mechanism changes from
   margin-left to translateX.
   ===================================================================== */

Sidenav {
  > aside {
    width: 100%;
    border-right: none;

    /* Inset shadow toward main is pointless at full width. */
    &::after { display: none; }
  }

  > main {
    position: absolute;
    inset: 0;
    margin-left: 0;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }

  &.collapsed > main {
    transform: translateX(0);
  }
}

/* Back button already unloads the file — a second close is redundant. */
Editorhead .eh-close { display: none; }

/* ---------- PaneStack: list + detail inside one editor ----------

   Classes and back registration come from views/PaneStack.js. Collapsing the
   editor's own columns stays with the module, since its selectors are more
   specific than these. */

PaneStack {
  position: relative;

  > .pane-detail {
    position: absolute;
    inset: 0;
    z-index: 2;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }

  &.showing-detail > .pane-detail {
    transform: translateX(0);
  }
}