/* ────────────────────────────────────────────────────────────────────────
   Universal mobile card-scroll  (lq-cardscroll)
   ────────────────────────────────────────────────────────────────────────
   App-wide rule: when a row of cards doesn't fit horizontally it should
   slide sideways instead of wrapping/stacking, and show a "there's more"
   affordance — a faded peek of the next card on the right plus a faint,
   nudging arrow. The cue is injected and driven automatically by
   lq-cardscroll.js from the row's REAL overflow, so it only appears when the
   cards genuinely don't fit and disappears once you reach the end.

   Two ways to opt a card row in:

   1. Turnkey (recommended for simple rows):
        <div class="lq-cardscroll lq-cardscroll--auto lq-peek-2"> …cards… </div>
      → on phones/tablets (≤900px) it becomes a swipeable single line with
        the next card peeking; above that it keeps its normal layout.

   2. Cue-only (when you control the scroll layout / breakpoint yourself,
      e.g. a kanban that swipes at ≤1024px):
        <div class="lq-cardscroll"> …cards… </div>   + your own overflow CSS
      → the fade + arrow cue still attaches automatically.

   Per-surface theming (optional): set these CSS vars on a container so the
   fade blends with the surface behind the row:
        --cardscroll-fade   (default: var(--bg) → app Bone)
        --cardscroll-arrow  (default: var(--text-muted))
   ──────────────────────────────────────────────────────────────────────── */

.lq-cardscroll-wrap { position: relative; }

.lq-cardscroll-cue {
  display: none;
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 64px;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  pointer-events: none;
  z-index: 2;
  color: var(--cardscroll-arrow, var(--text-muted, rgba(15, 22, 35, 0.55)));
  background: linear-gradient(
    to right,
    transparent,
    var(--cardscroll-fade, var(--bg, #F2EBDF)) 72%
  );
}
/* Only show while the track overflows and you haven't scrolled to the end. */
.lq-cardscroll-wrap.is-scrollable:not(.at-end) > .lq-cardscroll-cue { display: flex; }

.lq-cardscroll-cue svg {
  width: 22px; height: 22px;
  animation: lqcs-nudge 1.5s ease-in-out infinite;
}
@keyframes lqcs-nudge {
  0%, 100% { transform: translateX(0);   opacity: 0.5; }
  50%      { transform: translateX(3px); opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .lq-cardscroll-cue svg { animation: none; opacity: 0.7; }
}

/* ── Turnkey scroller layout for the common "stacks on mobile" rows ──────── */
@media (max-width: 900px) {
  .lq-cardscroll--auto {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .lq-cardscroll--auto::-webkit-scrollbar { display: none; }
  .lq-cardscroll--auto > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  /* Peek widths — how much of the next card shows. Pick one on the row. */
  .lq-cardscroll--auto.lq-peek-1 > * { flex-basis: 86%; }
  .lq-cardscroll--auto.lq-peek-2 > * { flex-basis: 46%; }
  .lq-cardscroll--auto.lq-peek-3 > * { flex-basis: 31%; }
}