/* Phones and small tablets. Loaded last, so it has the final word at these
   widths; the width is the one compact.js asks about, so script and styles
   always agree.

   The binder page gives the binder the screen: one page at a time (state.js
   pagesShown), a toolbar that is one row of icons scrolling sideways, and the
   sidebar turned into a sheet — its Search / Sets / Value tabs are a bar along
   the bottom, and the panel slides up over the binder when a tab is tapped
   (app.js setSheet). Swipe across the binder to turn the page; press and hold
   a card to pick it up (dnd.js).

   Signed in, the app's own bottom bar (bottomnav.css) takes that strip: the
   dock gives way to it and the sheet rises from behind it, tabs on top. What
   is here is then the shared-link view's, and the base the bar builds on. */

@media (max-width: 980px) {
  :root { --dock-h: 50px; }

  /* ---- the stage has the screen; the sidebar is fixed along the bottom */
  .shell,
  .shell.is-filters-open {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .shell > .stage {
    grid-column: 1; grid-row: 1;
    padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
  }
  .sidebar-resizer { display: none; }

  .shell > .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* tabs at the bottom, the handle on top, the panel between */
    flex-direction: column-reverse;
    overflow: hidden;
    border: none; border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .25);
    transition: height var(--t-3) var(--ease-out), border-radius var(--t-3) var(--ease-out);
  }
  .shell.sheet-open > .sidebar {
    /* Up to 70% of the screen, always leaving a strip of binder showing above it —
       or wherever it was last dragged to (app.js sets --sheet-h). */
    height: var(--sheet-h, min(70dvh, calc(100dvh - 52px - 110px)));
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -16px 48px rgba(0, 0, 0, .5);
  }
  .shell > .sidebar .tabs { height: var(--dock-h); border-bottom: none; }
  .shell.sheet-open > .sidebar .tabs { border-top: 1px solid var(--line); }
  .shell > .sidebar .tab { height: var(--dock-h); font-size: 13.5px; }
  .shell > .sidebar .panel { padding: 10px 12px 12px; }

  /* Dragging the handle or the tab bar sizes the sheet under the finger, without easing. */
  .shell > .sidebar.is-dragging { transition: none; }
  .shell > .sidebar .tabs { touch-action: none; }
  .sheet-handle { touch-action: none; cursor: grab; }
  .sheet-handle {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 100%; height: 26px; padding: 0;
    background: none; border: none; cursor: pointer;
  }
  .sheet-handle > span { width: 42px; height: 5px; border-radius: 3px; background: var(--line); }
  .sheet-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

  /* The filters drawer opens from the search, over everything but itself. */
  .shell.is-filters-open::after { grid-row: 1; }

  /* ---- one page at a time: the spread switch has nothing to do */
  #spread-toggle { display: none; }

  /* ---- the toolbar keeps to paging, the value and the view; the rest of its
     commands are in the sheet's More tab (more-panel.js), so it never has to scroll */
  .toolbar .tool-group:has(#layout-select),
  .toolbar .tool-group:has(#btn-settings) { display: none; }
  .toolbar { justify-content: space-between; }
  .toolbar .tool-group.grow { flex: 0 1 auto; min-width: 0; justify-content: flex-end; gap: 6px; }
  .toolbar .view-btn { max-width: 40vw; }
  .toolbar .value-pill.has-est .value-pill-est { display: none; }

  /* ---- (fallback) one row, scrolling sideways only if something still does not fit */
  .toolbar {
    gap: 8px; padding: 0 8px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar .tool-group,
  .toolbar .tool-group.grow { flex: none; }
  .toolbar .btn-label,
  .toolbar .btn-label-late,
  .toolbar .lock-label,
  .toolbar .value-pill-word { display: none; }
  /* Swiping and the page menu cover first and last. */
  #page-first, #page-last { display: none; }
  .page-indicator { min-width: 0; }

  /* The value and the view give up width before anything scrolls: they shrink,
     their words trailing off; the completion is in the sheet's Value tab. */
  .toolbar .tool-group.grow { flex: 1 1 auto; min-width: 0; }
  .toolbar .value-pill { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toolbar .value-pill .vp-long { display: none; }
  .toolbar .value-pill .vp-short { display: inline; }
  .toolbar .view-btn { flex: 0 1 auto; min-width: 64px; gap: 5px; padding: 0 9px; }
  .toolbar .view-btn > svg:first-child { display: none; }
  .toolbar .view-btn-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #completion-pill { display: none !important; }

  /* Sideways strokes over the binder are ours (they turn the page); up and down still scroll. */
  .binder-frame { touch-action: pan-y; }
}

@media (max-width: 640px) {
  /* The arrows beside the binder give their room to it: swiping turns the page. */
  .binder-frame .page-arrow { display: none; }
  .binder-scroll { padding: 10px 8px; }
}

/* ---- touch screens anywhere */
@media (hover: none) {
  /* A held card must not bring up the system's image menu or select text. */
  .slot-card, .slot-card img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  /* Held long enough to be picked up. */
  .slot-card.is-armed {
    transform: scale(1.05);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .6), 0 0 0 2px var(--accent);
    z-index: 4;
  }
  /* Fingers need bigger targets than a pointer does. */
  .toolbar .btn { height: 36px; }
  .toolbar .btn-icon { width: 36px; }
  .topbar .btn-icon { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .shell > .sidebar { transition: none; }
}

/* ---- Binder settings on a phone: every section's tab in view, as chips that
   wrap, rather than a strip where the later ones (Pricing, Sharing, Protection)
   sit off the edge unseen. */
@media (max-width: 620px) {
  .modal-settings .set-nav { flex-wrap: wrap; overflow: visible; gap: 6px; }
  .modal-settings .set-tab { height: 32px; padding: 0 10px; gap: 7px; font-size: 12.5px; }
  /* One weight whichever is chosen: the bolder one pushed a chip onto another row, and the panel jumped. */
  .modal-settings .set-tab, .modal-settings .set-tab[aria-selected="true"] { font-weight: 600; }
}

/* ---- the top bar on a phone: signed in (hosted) it also carries the account
   button, and the nav and the buttons would run into each other. Theme is in
   Preferences, and the help is keyboard shortcuts, so those two step aside. */
@media (max-width: 480px) {
  #btn-theme, #btn-help { display: none; }
  body.is-signin #btn-theme { display: inline-flex; }
}

/* ---- dialogs on a phone: a solid ground. The frosted glass let the page
   read through behind the words (amounts, card art) in the light theme. */
@media (max-width: 640px) {
  .modal {
    /* the accent still washed into the top corners (design.css), over a solid ground */
    background:
      radial-gradient(85% 55% at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%),
      radial-gradient(65% 45% at 100% 0%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 70%),
      var(--bg-2);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .modal.modal-card { background: var(--bg-2); }
}

/* ---- the binder sheet's Value tab: the panel scrolls as one, rather than its
   two lists each squeezed into what was left (a row of each, or none). */
@media (max-width: 980px) {
  #sidebar .panel[data-panel="stats"] { overflow-y: auto; overscroll-behavior: contain; }
  #sidebar .panel[data-panel="stats"] > * { flex: none; }
  #sidebar .panel[data-panel="stats"] :is(.toplist, .pagebars) { max-height: none; overflow: visible; }
}

/* ---- a narrow phone's binder toolbar: "2 / 5" for "Page 2 of 5", and the
   plain "All cards" view as its eye alone, so the value is never cut short
   ("$37,03…"). A view that filters keeps its name: it is worth knowing. */
.page-indicator .pi-short { display: none; }
@media (max-width: 430px) {
  .page-indicator .pi-long {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .page-indicator .pi-short { display: inline; font-variant-numeric: tabular-nums; }
  .toolbar .value-pill { flex-shrink: 0; }
  .toolbar .view-btn:not(.is-filtered) { min-width: 0; padding: 0 9px; }
  .toolbar .view-btn:not(.is-filtered) > svg:first-child { display: block; }
  .toolbar .view-btn:not(.is-filtered) .view-btn-name { display: none; }
}

/* ---- a phone on its side: the Cards panel is short (about 280px), so its
   top gives way to the results — a slimmer handle and tabs, the game and the
   query on one row, and no count, sort or size row (they left the results
   half a row). */
@media (max-width: 980px) and (max-height: 500px) {
  .sheet-handle { height: 16px; }
  #sidebar .tab { height: 34px; }
  #sidebar .panel { padding-top: 8px; padding-bottom: 8px; }
  #sidebar .srch-top { flex-direction: row; align-items: center; }
  #sidebar .srch-top .srch-game { width: auto; flex: 0 1 190px; min-width: 120px; }
  #sidebar .srch-bar { display: none; }
}