/* ════════════════════════════════════════════════
   MOBILE — every rule here is scoped to narrow
   viewports or coarse (touch) pointers. Desktop is
   completely unaffected by this file.
   ════════════════════════════════════════════════ */

/* Bottom tab bar exists in the DOM everywhere but only shows on mobile. */
.mtabs{display:none}

@media (max-width:768px){
  /* ── shell ─────────────────────────────────── */
  /* #sidebar / .rs-h get display:none below, which removes them from grid
     flow entirely — #detailArea then auto-places into column 1 (0 width)
     instead of the visual column 3, producing a blank screen. A single
     1fr track sidesteps the issue regardless of how many hidden siblings
     precede the one visible child. */
  .app-body{grid-template-columns:1fr !important}
  #sidebar,.rs-h{display:none !important}
  #btnTogSidebar{display:none !important}
  .mtabs{position:fixed;left:0;right:0;bottom:0;z-index:520;display:flex;justify-content:space-around;
    background:var(--surface);border-top:1px solid var(--border);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .mtab{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;
    color:var(--ink-3);font-family:inherit;font-size:9.5px;font-weight:600;letter-spacing:.02em;
    padding:4px 10px;cursor:pointer;min-width:60px;border-radius:8px}
  .mtab svg{width:20px;height:20px}
  .mtab.on{color:var(--ink)}
  .mtab.on svg{color:var(--accent)}

  /* the native shell draws edge-to-edge — keep the toolbar below the
     status bar / notch (no-op in browsers where the inset is 0) */
  #appToolbar{padding-top:env(safe-area-inset-top);height:calc(52px + env(safe-area-inset-top))}

  /* ── toolbar ───────────────────────────────── */
  .wm-logo{width:22px !important;height:22px !important;image-rendering:pixelated}
  .toolbar-title{font-size:16px}
  .format-badge{display:none}
  #appToolbar{padding-left:8px;padding-right:8px}
  /* in the editor the centered app title collides with the save cluster —
     the binder name (editable) is enough */
  #appShell.mode-editor .toolbar-title{display:none}
  .toolbar-binder-name{max-width:110px;font-size:13px}

  /* ── pages ─────────────────────────────────── */
  /* !important is load-bearing here: index.html has an unscoped inline
     .library-view{padding:36px 40px} rule (for desktop) that carries the
     same specificity and comes later in the cascade, so it was silently
     winning on mobile too — every mobile page was rendering with ~2x the
     intended side padding, which is also why the collection/wishlist grid
     below was fitting one column fewer than the math called for. */
  .library-view{padding:20px 16px calc(84px + env(safe-area-inset-bottom)) !important}
  .home-cards{grid-template-columns:repeat(4,1fr)}
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .page-footer{font-size:8px}

  /* ── binder editor ─────────────────────────── */
  .ct{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:5px 8px;scrollbar-width:none}
  .ct::-webkit-scrollbar{display:none}
  .ct-prog{padding-right:12px}
  .thumb-dock{display:none !important}
  .mob-hide{display:none !important}
  .detail-center{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .spread-nav-btn{width:38px;height:38px}

  /* ── modals ────────────────────────────────── */
  .cm-box{width:100vw !important;max-width:100vw !important;height:100dvh !important;max-height:100dvh !important;border-radius:0}
  .cm-search-layout{flex-direction:column}
  .cm-filters{width:100%;border-right:none;border-bottom:1px solid var(--e-b1);max-height:44dvh;overflow-y:auto;padding:8px 16px}
  .cm-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding:0 6px;gap:0}
  .cm-tabs::-webkit-scrollbar{display:none}
  /* tightened so all 5 tabs (search/collection/favorites/uploads/sleeves)
     fit on a single phone-width row without needing to scroll to discover
     uploads / sleeves */
  .cm-tab{white-space:nowrap;flex-shrink:0;padding:8px 7px;font-size:10px}
  /* collapsible filters — collapsed by default state is toggled via JS
     (class .collapsed on #cmFilters); auto-collapses after a search fires */
  .cm-filters-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
    background:none;border:none;padding:6px 2px;font-family:var(--font-body);font-size:11px;
    font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--e-t2);cursor:pointer}
  .cm-filters-toggle svg{transition:transform .2s ease}
  /* flex-shrink:0 is load-bearing: .cm-filters is a column flex container,
     and overflow:hidden (needed below for the collapse animation) resets a
     flex item's default min-height from "content size" to 0 — which let
     the flexbox algorithm actually SHRINK this element to fit .cm-filters'
     44dvh cap instead of overflowing it, clipping the bottom of the
     filter fields (the search button) with nothing left to scroll to,
     since .cm-filters itself never saw any overflow to scroll. */
  #cmFilterFields{overflow:hidden;max-height:600px;flex-shrink:0;transition:max-height .22s ease,opacity .18s ease,margin-top .22s ease}
  .cm-filters.collapsed #cmFilterFields{max-height:0;opacity:0;margin-top:0}
  .cm-filters.collapsed .cm-filters-toggle svg{transform:rotate(-90deg)}
  .cm-filters:not(.collapsed) #cmFiltersToggleLbl::after{content:''}
  /* slot detail becomes a bottom sheet */
  #slotDetailModal{align-items:flex-end}
  #slotDetailModal .sd-box{width:100vw;max-width:100vw;max-height:94dvh;border-radius:18px 18px 0 0;overflow-y:auto}
  /* The shared mo-rise entrance ends on transform:none, but it occasionally
     never advances past frame 0 — leaving translateY(12px) baked in, which
     pushes this bottom-aligned sheet below the viewport and clips its lower
     edge. The sheet doesn't need the lift; the overlay fade is enough. */
  #slotDetailModal .sd-box{animation:none !important;transform:none !important}
  .mo-box{max-width:94vw;max-height:92dvh;overflow-y:auto}
  /* flex-shrink:0 is load-bearing, same reasoning as #cmFilterFields above:
     overflow-x:auto (needed for horizontal scroll) resets this flex item's
     default min-height from "content size" to 0 inside .library-view's
     column flex layout, letting the flex algorithm shrink the whole tab
     bar down to ~1px instead of the panel just scrolling — collapsing the
     settings page's general/accessibility/account tabs to invisible. */
  .admin-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;flex-shrink:0}
  .lock-card{padding:24px 18px}

  /* smaller result tiles so more cards are visible at once once filters
     are collapsed */
  .cm-results .c-grid{grid-template-columns:repeat(4,1fr);gap:5px}
  .cm-results .c-tile-n{font-size:7px;padding:8px 3px 3px}

  /* overview grid smaller tiles */
  .overview-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr)) !important}

  /* card list view: illustrator/rarity are still one tap away (card detail
     modal) — drop them from the table so name/#/set aren't squeezed off */
  .card-list-table .cl-illus,.card-list-table .cl-rarity{display:none}

  /* collection + wishlist pages: was a hardcoded 3-per-row regardless of
     screen size. auto-fill + minmax fits as many columns as actually fit
     instead of a fixed count — 76px keeps essentially every phone (down to
     an iPhone SE at 375px, up through Pro Max sizes) at 4 per row, and it
     keeps growing from there as the viewport gets wider, eg. an iPad in
     portrait (768px, still inside this same mobile breakpoint) lands
     around 8 per row rather than staying stuck at 3. */
  #collPageGrid:not(.card-list),#favPageGrid:not(.card-list){
    grid-template-columns:repeat(auto-fill,minmax(76px,1fr)) !important;gap:7px}

  /* same fix for the add-card modal's own collection/favorites/sleeves tabs —
     these were pinned to their desktop minmax (150px for collection/
     favorites, 115px for sleeves), which only leaves room for ~2 columns at
     phone widths. Same 76px target, same reasoning as above. */
  #mt-collection .c-grid,#mt-favorites .c-grid,#mt-sleeves .c-grid{
    grid-template-columns:repeat(auto-fill,minmax(76px,1fr)) !important;gap:7px}

  /* uploads aren't a grid at all on desktop — .up-tile is flex-wrap sized to
     each image's own aspect ratio (height:200px, width:auto), which can't
     line up into even columns. On mobile it's forced into the same card
     grid as everything else, cropped to the same card aspect ratio so a
     row of uploads lines up like a row of cards. */
  .up-grid{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(76px,1fr)) !important;gap:7px}
  .up-tile{width:auto !important;height:auto !important;max-width:none !important;aspect-ratio:7/9.5}
  .up-tile img{width:100% !important;height:100% !important}

  /* the variant (R / H) chip sits in the same corner as the always-visible
     remove button on touch devices — drop the chip on phones; the holo
     shimmer + glow still mark the card as a variant */
  .slot .vh-chip{display:none}
}

/* .mob-only: hidden by default (desktop), shown only in the mobile layout */
.mob-only{display:none}
@media (max-width:768px){ .mob-only{display:flex}}

/* ── touch card drag & drop ──────────────────── */
.tdrag-ghost{position:fixed;left:0;top:0;z-index:3000;pointer-events:none;border-radius:6px;overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.4);opacity:.92;transform-origin:center}
.slot.tdrag-src{opacity:.35}
.slot.tdrag-over{outline:3px solid var(--accent);outline-offset:-2px}
/* instant feedback the moment a finger lands, before the hold is confirmed */
.slot.tdrag-pressing{transform:scale(.96);transition:transform .1s ease}
/* while a card is held, the page must not scroll or rubber-band under it */
html.card-dragging,html.card-dragging body{overflow:hidden;touch-action:none;overscroll-behavior:none}
/* same treatment for page tiles in the overview modal */
.ov-page.tdrag-pressing{transform:scale(.96);transition:transform .1s ease}
.ov-page.tdrag-src{opacity:.35}
.ov-page.tdrag-over{outline:3px solid var(--accent);outline-offset:-2px}

/* ── touch pointers (any size) ───────────────── */
@media (pointer:coarse){
  /* hover-revealed controls must be reachable by tap */
  .slot .own-chk{opacity:.55}
  .slot .own-chk.on{opacity:.55;pointer-events:auto}
  .slot .s-x{display:flex;opacity:.55}
  .up-del,.up-crop{display:flex;opacity:.55}
  /* 20px was well under the ~44px minimum touch target: a finger that missed
     hit the tile instead, which jumps to that page and closes the modal —
     making it look like delete did nothing. Keep the icon small but give it
     a finger-sized hit area. */
  .ov-page .ov-del{display:flex;opacity:.7;width:44px;height:44px;top:0;right:0;
    border-radius:0 8px 0 8px;background:rgba(18,18,22,.55)}
  /* precision hover-only merge gap handles are hidden — merging lives in the
     card detail sheet on touch */
  .mg-handle{display:none !important}
  /* larger effective touch targets */
  .ic-btn{min-width:34px;min-height:34px}
  .mtab{min-height:44px}
}