/* MB8 (spec 25 §5.1 / M7): the T319 list-XOR-full-preview law on the fn-*
   surface, phone only. The controller is runtime/files-nav-stack.js's fn
   half — it mirrors the legacy #files-split stack (static/files/file-preview.css
   §T319) onto #fn-layout via two classes it toggles:

     .fn-phone-stack         at ≤820px, always (phone layout baseline)
     .fn-phone-previewing    at ≤820px while a file is open

   Desktop (>820px) matches no rule in this file, so its two-pane rendering —
   chrome, geometry, hit targets — is untouched byte for byte.

   Measured law this file implements (repo browser harness, 390×844): the
   shell bounds every tab-panel row and hides body overflow on phone
   (foundation.css body{overflow:hidden}; shell.css phone grid rows), so the
   pre-MB8 stacked fn layout (styles.css ≤820 block: height:auto;
   overflow:visible) could not scroll at all — below-fold rows were
   unreachable by wheel AND touch. The stack re-bounds the surface and makes
   the ACTIVE list pane the scroll container, the same contract the desktop
   grid already uses; a pushed preview then replaces the list outright (list
   XOR preview — never both), and the open-tabs strip stays a desktop
   affordance.

   MB9 (spec 25 §5.1 / M8) adds the 44px pass on the same phone-scoped file:
   one 44px ⋯ per tree row opening the EXISTING actions menu (replacing the
   hover-gated 26px star+⋯ pair, which touch can neither see nor fire), 44px
   floors on the named toolbar/preview offenders, and the ⌘K chips dropped
   (a hardware shortcut phones lack). */

@media (max-width: 820px) {
  /* ── MB9: row actions — single always-visible 44px ⋯ (star moves into the
     menu as Pin/Unpin; core.js) ── */
  #files-tab .fn-tree-row {
    min-height: 44px;
    box-sizing: border-box;
  }
  #files-tab .fn-tree-row .fn-row-actions {
    opacity: 1;
    pointer-events: auto;
  }
  /* The star is sub-floor at 26px and its function now leads the ⋯ menu —
     hiding it rather than growing two 44px controls into every row. */
  #files-tab .fn-tree-row .fn-star {
    display: none;
  }
  /* The pinned ★ badge (a marker, not a control) keeps its place. */
  #files-tab .fn-ra-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 16px;
  }
  /* Timestamps/file-counts yield the row end to the ⋯ (they were the
     hover-swap partner of the actions pair; there is no hover here). */
  #files-tab .fn-tree-row .fn-row-end-slot > .fn-row-meta {
    display: none;
  }
  /* The ⋯ menu is now the row's primary affordance on phone: its items get
     the same floor (desktop keeps the compact menu). */
  #files-tab .fn-actions-menu button {
    min-height: 44px;
    box-sizing: border-box;
    padding-block: 10px;
  }

  /* ── MB9: toolbar floors (refresh 34×34, upload 31px tall) ── */
  #files-tab .fn-tab-refresh,
  #files-tab .fn-tab-upload {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
  }

  /* ── MB9: preview chrome floors (Read/Raw + zoom segments 22px tall,
     icon actions and close glyph sub-44) ──
     The head already wraps its control groups ≤480px (styles.css); extended
     to the whole phone surface since 44px-tall groups no longer fit one
     row. */
  #files-tab .fn-preview-head {
    flex-wrap: wrap;
  }
  #files-tab .fn-pm-btn {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
  }
  #files-tab .fn-pv-icon-btn,
  #files-tab .fn-preview-close {
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
    justify-content: center;
  }
  /* Breadcrumb segments (15px tall, an M8 offender) are already absent on
     phone: the MB8 stack replaces the path row with Back + name. Recorded
     here so the offender list and the layout stay in sync. */

  /* ── MB9: ⌘K dropped on phone ──
     The chip labels a hardware shortcut phones lack (search still opens from
     the Search tab, with the on-screen keyboard). The attribute selector is
     the Search tab's ⌘K count in index.html; .fn-search-hint is the input's
     trailing ⌘K. Real counts (Pinned/Recent) stay. */
  #files-tab .fn-page-tab[data-fn-view="search"] .fn-pt-count,
  #files-tab .fn-search-hint {
    display: none;
  }

  /* ── MB8: re-bound section — the desktop grid contract restored (styles.css's
     ≤820 block relaxes it to an in-flow page; with body overflow hidden that
     overflow was clipped, not scrollable). The page-tabs strip keeps its
     natural height; the layout eats the rest of the bounded row. */
  #files-tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #files-tab .fn-files-layout.fn-phone-stack {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  /* The visible pane owns the scroll — the exact contract the desktop rules
     in styles.css give .fn-pane, which the shared ≤820 block un-bounds. */
  #files-tab .fn-files-layout.fn-phone-stack .fn-files-side {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  #files-tab .fn-files-layout.fn-phone-stack .fn-pane:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* ── list XOR preview ── */
  #files-tab .fn-files-layout.fn-phone-stack.fn-phone-previewing {
    grid-template-columns: minmax(0, 1fr);
  }
  #files-tab .fn-files-layout.fn-phone-stack.fn-phone-previewing .fn-files-side {
    display: none;
  }
  /* The preview column takes the pane's grid cell explicitly: with the side
     display:none'd, auto-placement would otherwise leave it in the second
     (zero-width) track of the desktop two-track template. */
  #files-tab .fn-files-layout.fn-phone-stack.fn-phone-previewing .fn-preview-col {
    grid-column: 1;
    height: 100%;
    min-height: 0;
    margin-top: 0;
    order: 0;
  }
  /* ?view=full reading mode keeps its own two-track template (0 1fr, the
     round-8 collapse); same visual end state, so let the column stay in its
     second track there instead of forcing it into the zero-width one. */
  #files-tab .fn-files-layout.fn-phone-stack.fn-phone-previewing.fn-full-view .fn-preview-col {
    grid-column: 2;
  }

  /* The open-tabs strip is a desktop metaphor; tab state persists, so
     returning to desktop restores it (T319 assumption D). */
  #files-tab .fn-files-layout.fn-phone-stack .fn-file-tabs {
    display: none;
  }

  /* While pushed, the Pinned/Recent/Browse/Search row competes with the
     document for the phone's vertical budget; Back replaces it (the row —
     selection, counts, refresh — returns exactly as-is on back). Collapsed
     outright: reserving its ~150px as dead space behind a full-pane document
     is the very squeeze this law exists to remove. */
  #files-tab:has(.fn-files-layout.fn-phone-previewing) .fn-page-tabs {
    display: none;
  }

  /* The divider and collapse toggle are two-pane affordances; the phone
     stack has nothing to divide or collapse. */
  #files-tab .fn-files-layout.fn-phone-stack .fn-divider,
  #files-tab .fn-files-layout.fn-phone-stack .fn-side-toggle {
    display: none;
  }

  /* Pushed-preview head composition (spec §5.1 sketch): one tap row — Back,
     then the file name. The desktop path breadcrumb is desktop vocabulary
     (and, until the MB9 floor pass, sub-44 taps); the name's title attribute
     still carries the full path. Meta/mode/actions wrap below, unchanged. */
  #files-tab .fn-files-layout.fn-phone-previewing .fn-preview-head {
    gap: 2px;
  }
  #files-tab .fn-files-layout.fn-phone-previewing .fn-preview-id {
    flex: 1 1 auto;
  }
  #files-tab .fn-files-layout.fn-phone-previewing .fn-preview-path {
    display: none;
  }

  /* ── the Back control (44px floor, T312 law) ── */
  #files-tab .fn-files-layout.fn-phone-previewing .fn-phone-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-left: -10px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ui-text-soft);
  }
  #files-tab .fn-files-layout.fn-phone-previewing .fn-phone-back:hover {
    background: var(--ui-hover);
    color: var(--ui-text);
  }
  #files-tab .fn-files-layout.fn-phone-previewing .fn-phone-back:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: -2px;
  }
}

/* Desktop: the Back control does not exist visually (the controller still
   creates the element — this rule keeps even a pre-hydration flash
   impossible). The [hidden] attribute covers tab order; display:none here
   covers rendering at any width the media query above does not match. */
#files-tab .fn-phone-back { display: none; }