/* components/scroll-x.css — horizontal scroller with edge fades
 * (MOBILE_PLAN.md §2.8; paired with components/scroll-x.js).
 *
 * `.scroll-x` is the only thing allowed to scroll sideways. The page itself
 * never does: `overflow-x: auto` contains the wide content here, and the
 * offender list in the harness excludes descendants of this region.
 *
 * Edge fade: a `mask-image` gradient whose alpha hides the strip's edge where
 * content is hidden off-screen. It is painted per side from the scroll
 * attributes the JS maintains — `data-at-start` / `data-at-end` mark the ends
 * that have nothing hidden, so a gradient is applied only on an absent side.
 * The mask colour is the `--mask-opaque` token (tokens.css is the only file
 * allowed a colour literal); `transparent` is the allowed no-colour keyword.
 * Where `mask-image` is unsupported the declaration is dropped and there is
 * simply no fade.
 *
 * Reduced transparency: the fades apply by default and are removed under
 * `@media (prefers-reduced-transparency: reduce)` (mask-image: none), so a
 * user who asks for reduced transparency gets a hard edge. Never gate the
 * fade on a positive `not all and (…)` query: a browser that does not know
 * the feature (WebKit — every iOS browser — and default Firefox) treats the
 * whole query as false and would never show the LOCKED edge-fade cue.
 *
 * Reduced motion: this region never animates a scroll. `scroll-behavior` is
 * pinned to `auto` so a host page's smooth scrolling cannot leak in (focus
 * and keyboard scrolling stay instant), and nothing transitions — asserted
 * again under `prefers-reduced-motion: reduce`.
 *
 * No colour literals. No `env(safe-area` (tokens.css only). No `matchMedia`.
 */

.scroll-x {
  /* Contain the overflow: the strip scrolls, the page does not. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Both axes stay pannable so a horizontal strip never traps vertical
     page scrolling under a finger. */
  touch-action: pan-x pan-y;
  /* Instant scrolling always; see the reduced-motion note above. */
  scroll-behavior: auto;
  transition: none;
  animation: none;
  /* Fade run — how far in from each hidden edge the mask ramps. */
  --scroll-x-fade-w: 24px;
}

/* Fade only while the JS says content is hidden on a side (`data-fade` set,
   the side's end-attribute absent). Both ends present: no fade at all. */
/* Hidden on both sides: fade at both edges. */
.scroll-x[data-fade]:not([data-at-start]):not([data-at-end]) {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    var(--mask-opaque) var(--scroll-x-fade-w),
    var(--mask-opaque) calc(100% - var(--scroll-x-fade-w)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--mask-opaque) var(--scroll-x-fade-w),
    var(--mask-opaque) calc(100% - var(--scroll-x-fade-w)),
    transparent
  );
}

/* Hidden at the start only: fade at the start edge. */
.scroll-x[data-fade]:not([data-at-start])[data-at-end] {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    var(--mask-opaque) var(--scroll-x-fade-w)
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--mask-opaque) var(--scroll-x-fade-w)
  );
}

/* Hidden at the end only: fade at the end edge. */
.scroll-x[data-fade][data-at-start]:not([data-at-end]) {
  -webkit-mask-image: linear-gradient(
    to right,
    var(--mask-opaque) calc(100% - var(--scroll-x-fade-w)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    var(--mask-opaque) calc(100% - var(--scroll-x-fade-w)),
    transparent
  );
}

/* Reduced transparency removes the fade (a hard edge). Supported browsers
   honour it; unsupported ones keep the default fade — never the reverse. */
@media (prefers-reduced-transparency: reduce) {
  /* The SAME three state selectors as the fades above: @media adds no
     specificity, so a shorter selector here would lose the cascade. */
  .scroll-x[data-fade]:not([data-at-start]):not([data-at-end]),
  .scroll-x[data-fade]:not([data-at-start])[data-at-end],
  .scroll-x[data-fade][data-at-start]:not([data-at-end]) {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-x {
    scroll-behavior: auto;
    transition: none;
    animation: none;
  }
}