/* ============================================================
   BlueSystm — touch.css
   Rules that only apply when the page is being driven by fingers.

   LINKED AFTER EACH PAGE'S INLINE <style>, same as mobile-nav.css:
   these override rules of equal specificity, so source order is the
   only thing that decides them.
   ============================================================ */

/* ── Focus rings on touch ────────────────────────────────────
   `(hover: none) and (pointer: coarse)` together mean the PRIMARY input
   is a finger — a phone or a tablet. A desktop with a touchscreen still
   reports `hover: hover`, so it keeps everything below.

   :focus-visible is supposed to show the ring for keyboards and hide it
   for pointers, and on desktop it does. iOS Safari is looser: tap a
   button and the ring is left sitting on it afterwards, with nothing to
   dismiss it — you have to tap somewhere else. There is no keyboard to
   serve on a phone, so the ring is pure residue there.

   Links and buttons only. Text fields keep theirs on purpose: the ring
   is what tells you which field you are typing into, and it is supposed
   to persist while you type. That is not the annoyance being fixed. */
@media (hover: none) and (pointer: coarse) {
  a:focus,
  a:focus-visible,
  button:focus,
  button:focus-visible {
    outline: none;
  }
}

/* The drift itself. One set's distance, handed in by marquee-drift.js so the
   keyframe does not have to guess at a percentage of a gapped flex row. */
@keyframes stripDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--strip-set, 0px) * -1)); }
}

/* ── The footer band swipes ──────────────────────────────────────────
   Same reasoning as the trades band on the home page: a strip that moves
   by animation cannot be grabbed, and on a phone it should follow the
   thumb. The CSS animation stops and assets/js/marquee-drift.js keeps it
   moving on scrollLeft instead — same drift, but now a swipe can take it
   over. The duplicate set stays: it is what makes the wrap invisible.

   This one lives here rather than in home-mobile.css because the footer
   is on every page. */
@media (hover: none) and (pointer: coarse) {
  .site-footer .footer-band {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* the feathered edges are for something sliding past; a strip you
       are holding should not fade under your thumb */
    -webkit-mask-image: none;
            mask-image: none;
  }
  .site-footer .footer-band::-webkit-scrollbar { display: none; }
  .site-footer .footer-band-track { animation: none; }
}

/* The tap-to-lift — .is-pressed — lives in card-lift.css, which has to be
   linked after home-mobile.css to outrank it. See the note there. */