/* ============================================================================
   repos-mobile.css — PHONE-ONLY layer for the Repo Library.

   Every rule lives inside `@media (max-width: 640px)`, so it is inert on
   tablets and desktops; the existing layout is untouched above the breakpoint.

   ⚠️ WHY THIS FILE HAS TO EXIST, rather than more rules in store-mobile.css:
   index.html loads the shared phone layer (/assets/css/app-mobile.css +
   /css/store-mobile.css) at line ~187, but `/apps/repos/repos.css` at line
   ~491 — three hundred lines LATER. repos.css also scopes its rules as
   `.repos-sidebar .ph-sb-item`, which outranks the shared layer's bare
   `.ph-sb-item` on specificity as well as order. So the store's phone layer
   could never reach this page from where it sits. This file loads AFTER
   repos.css and matches its specificity, which is the only thing that wins.

   Measured on the real page at 390×844 before any of it was written:
     • The left rail is `.repos-nav { flex-direction: column }` with
       `.ph-sb-item { width: 100% }`. repos.css:123 stacks it at ≤900px
       (`position:static`) but never changes its DIRECTION — so all 12 nav
       entries became a ~1,200px wall and you scrolled a full screen and a half
       of navigation before the first repository. It is a scrollable pill row
       here, the same shape work-mobile.css gives `.ph-sidebar`.
     • 🚨 `.rm-tabs` is `display:flex; flex-wrap:nowrap` with **scrollWidth 871
       inside a 388px box**, and its parent `.rm` is `overflow:hidden`. The
       popup has **8 tabs and only ~3 were reachable** — the other 5 were
       clipped with no scroll affordance and no way to get to them at all on a
       phone. This is the fix that actually mattered.
     • 45 controls measured under 32px tall — `.rp-card-foot-open` 25px,
       `.rp-card-send` 27px, the filter input 22px — all under the ~44px touch
       target a thumb needs.
     • The repo popup was a centred 88vh sheet; on a phone it is full-screen,
       matching the install modal in store-mobile.css.
   ============================================================================ */

@media (max-width: 640px) {

  /* ═══════════════════════════════════════════════════════════════════════
     THE RAIL → a horizontally scrollable pill row
     Same treatment work-mobile.css gives .ph-sidebar, so the two hubs feel
     like one product. Sticky, so navigation is always a thumb away.
     ═══════════════════════════════════════════════════════════════════════ */
  .repos-shell { grid-template-columns: 1fr !important; gap: 6px !important; }

  .repos-sidebar {
    position: sticky !important; top: 0; z-index: 60;
    display: flex !important; flex-direction: row; flex-wrap: nowrap;
    align-items: center; gap: 6px;
    width: 100% !important; max-width: 100vw;
    padding: 7px 10px !important;
    border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important;
    overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* ⚠️ NO scroll-snap here. `scroll-snap-type: x proximity` was tried and
       measured: because repos.js fills this rail AFTER first layout, the
       browser resolved a snap point against the half-built row and left it at
       **scrollLeft 907 of 2099** — the page opened on "Static Web Apps" with
       "All repositories", the active item, scrolled off to the left. Same rule
       with snapping off starts at 0. Snapping is a nicety; landing on the
       wrong entry is a bug. */
  }
  .repos-sidebar::-webkit-scrollbar { display: none; }

  /* The group headings (LIBRARY / COMMAND CENTER / THE STANDARD) are a
     vertical-list device; in one scrolling row the dividers carry the grouping
     and the headings would just eat width. */
  .repos-sidebar .ph-sb-label { display: none !important; }

  .repos-nav {
    flex-direction: row !important;
    flex: 0 0 auto;
    gap: 6px !important;
  }

  .repos-sidebar .ph-sb-item {
    width: auto !important; flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 13px !important;
    border-radius: 20px;
    white-space: nowrap;
    background: var(--border-s);
  }
  .repos-sidebar .ph-sb-txt { overflow: visible; text-overflow: clip; }
  /* The 3px left rail marks the active row in a vertical list. On a pill it
     reads as a stray tick, so the pill itself carries the state. */
  .repos-sidebar .ph-sb-item.is-active::before { display: none !important; }
  .repos-sidebar .ph-sb-item.is-active {
    background: color-mix(in srgb, var(--c-blue) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-blue) 38%, transparent);
  }
  /* Section rules become the vertical separators between groups. */
  .repos-sb-rule {
    width: 1px !important; height: 24px !important;
    flex: 0 0 auto; margin: 0 3px !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     THE REPO POPUP — full-screen sheet, and TABS YOU CAN ACTUALLY REACH
     ═══════════════════════════════════════════════════════════════════════ */
  .rm {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh !important; max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  /* 🚨 The one that mattered: 8 tabs, ~3 visible, 5 unreachable. The strip
     scrolls now instead of being clipped by .rm's overflow:hidden. */
  .rm-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 12px 0 !important;
    gap: 4px !important;
    /* No scroll-snap, for the same measured reason as the rail above. */
  }
  .rm-tabs::-webkit-scrollbar { display: none; }
  .rm-tab {
    flex: 0 0 auto !important;
    min-height: 40px;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
  }

  /* Header / action rows wrap rather than squeezing a title to nothing. */
  .rm-head, .rm-actions { flex-wrap: wrap !important; row-gap: 8px !important; }
  .rm-head > *, .rm-actions > * { min-width: 0; }
  .rm-body { padding-left: 12px !important; padding-right: 12px !important; }

  /* ═══════════════════════════════════════════════════════════════════════
     TOUCH TARGETS — 45 controls measured under 32px tall
     ═══════════════════════════════════════════════════════════════════════ */
  .rp-card-foot-open,
  .rp-card-send {
    min-height: 36px;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
  }
  .rp-card-foot { flex-wrap: wrap !important; gap: 6px !important; }

  /* 16px is the threshold below which iOS Safari zooms the page on focus —
     the field is readable AND the layout stops lurching. */
  .repos-page input[type="text"],
  .repos-page input[type="search"],
  .repos-page select,
  .rm input[type="text"],
  .rm input[type="search"],
  .rm select {
    font-size: 16px !important;
    min-height: 40px;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     CONTENT — one lane, nothing rigid
     ═══════════════════════════════════════════════════════════════════════ */
  .repos-main { min-width: 0; }
  .repos-crumb { flex-wrap: wrap !important; row-gap: 4px !important; }
  .rp-overview-grid { grid-template-columns: 1fr !important; }
  /* Scorecard tiles stay 2-up — several fit above the fold and they are
     numbers, not prose. */
  .ax-cards-row { flex-wrap: wrap !important; overflow-x: visible !important; }
  .ax-card { min-width: calc(50% - 5px) !important; }

  /* The Static Web App cards are already one lane at this width (auto-fill on a
     288px floor), so the only thing the phone needs is thumbs: the filter and
     sort chips are 24px controls on desktop, and the sort group's `margin-left:
     auto` would otherwise pin it to the right edge of a wrapped row. */
  .hs-tools { gap: 8px !important; }
  .hs-sorts { margin-left: 0 !important; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .hs-sorts::-webkit-scrollbar { display: none; }
  .hs-filt, .hs-sortb { min-height: 34px; padding: 7px 11px !important; }
  /* ⚠️ `.hs-c-figs` HAD A RULE HERE AND NO LONGER RENDERS ON A CARD — the
     three-figure grid moved into the app popup (see appCard). Removed rather
     than left to imply the card still has one. */

  .repos-page img,
  .repos-page svg,
  .rm img { max-width: 100%; }
}