/**
 * Horizontal-scroll affordance for data tables (paragraph--table).
 *
 * The table already lives in a .para-table__scroll wrapper (overflow-x:auto).
 * JS (table-scroll.js) sets .is-scrollable / .is-scroll-start / .is-scroll-end
 * on the .para--table wrapper. Here we paint edge fades + a right-pointing
 * chevron as OVERLAYS on that wrapper (pointer-events:none, above the table's
 * own cell backgrounds) so the hint can't be occluded by striped/white cells.
 * Shown only while there is hidden content in that direction; especially
 * useful on mobile where wide tables scroll.
 */
.para--table {
  position: relative;
}

.para--table::before,
.para--table::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 3rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}

/* Left fade — only a soft gradient (signals "scrolled, more to the left"). */
.para--table::before {
  left: 1px;
  border-radius: var(--radius-md, 6px) 0 0 var(--radius-md, 6px);
  background: linear-gradient(to right, var(--color-surface, #fff) 35%, rgba(255, 255, 255, 0));
}

/* Right fade + chevron — the primary "there's more →" affordance. */
.para--table::after {
  right: 1px;
  border-radius: 0 var(--radius-md, 6px) var(--radius-md, 6px) 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20'%3E%3Cpath d='M2 2l8 8-8 8' fill='none' stroke='%23334155' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(to left, var(--color-surface, #fff) 35%, rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat;
  background-position: right 0.6rem center, center;
  background-size: 12px 20px, 100% 100%;
}

/* Reveal each edge only while content is hidden in that direction. */
.para--table.is-scrollable:not(.is-scroll-start)::before {
  opacity: 1;
}
.para--table.is-scrollable:not(.is-scroll-end)::after {
  opacity: 1;
}

/* Gentle nudge on the chevron to draw the eye toward the scroll. */
@media (prefers-reduced-motion: no-preference) {
  .para--table.is-scrollable:not(.is-scroll-end)::after {
    animation: mvsd-table-nudge 1.6s ease-in-out infinite;
  }
}
@keyframes mvsd-table-nudge {
  0%, 100% { background-position: right 0.6rem center, center; }
  50%      { background-position: right 0.25rem center, center; }
}

/* Windows high-contrast / forced-colors: drop the decorative fades. */
@media (forced-colors: active) {
  .para--table::before,
  .para--table::after { display: none; }
}