/* ==========================================================================
   Vieritysvihje — horizontal scroll hint for data tables
   Pairs with static/table-scroll.js, which wraps every scroller at runtime:

     <div class="scroll-hint">                         <- card border + props
       <div class="scroll-hint-view">                  <- clips the fades
         <div class="table-wrap" data-hint-scroller>   <- the scroller
           <table>…</table>
         </div>
         <span class="scroll-hint-fade -l"></span>
         <span class="scroll-hint-fade -r"></span>
       </div>
       <div class="scroll-hint-rail"><span><i></i></span></div>
     </div>

   The script writes five custom properties on .scroll-hint and nothing else:
     --hint-l / --hint-r   0|1   edge fade opacity
     --hint-rail           0|1   rail opacity — 0 whenever the table fits
     --hint-w / --hint-x   %     rail thumb width and offset
   With JS off no wrapper is created, so every table keeps its current look.
   ========================================================================== */

.scroll-hint { position: relative; }

/* .table-wrap draws its own card. Once wrapped, the card moves out to the
   shell so the rail can sit inside the border, below the last row. */
.scroll-hint:has(> .scroll-hint-view > :is(.table-wrap, .tbl-card)) {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}
.scroll-hint > .scroll-hint-view > :is(.table-wrap, .tbl-card) {
  border: 0; border-radius: 0; background: transparent;
}

/* Lists keep their toolbars and outer card while the rail stays sticky. */
.tbl-card.scroll-hint-card, .retail-card.scroll-hint-card { overflow: visible; }
.scroll-hint-card > .tbl-toolbar,
.scroll-hint-card > .retail-card-head { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.scroll-hint-card > .scroll-hint > .scroll-hint-view { border-radius: 0; }
.scroll-hint-card > .scroll-hint:last-child > .scroll-hint-view { border-radius: 0 0 var(--r-lg) var(--r-lg); }

.scroll-hint-view {
  position: relative;
  overflow: hidden;                       /* clips the fades to the corners */
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* Touch devices have no usable native scrollbar, so the rail stands in for it.
   Pointer devices keep theirs — a native bar is draggable, the rail is not. */
@media (hover: none) {
  .scroll-hint-view > [data-hint-scroller] { scrollbar-width: none; }
  .scroll-hint-view > [data-hint-scroller]::-webkit-scrollbar { display: none; }
}

.scroll-hint-fade {
  position: absolute; top: 1px; bottom: 1px; z-index: 2;
  width: 34px; pointer-events: none;
  transition: opacity .18s ease;
}
.scroll-hint-fade.-l {
  left: 1px; opacity: var(--hint-l, 0);
  background: linear-gradient(to left, rgba(255,255,255,0), var(--card) 78%);
}
.scroll-hint-fade.-r {
  right: 1px; opacity: var(--hint-r, 0);
  background: linear-gradient(to right, rgba(255,255,255,0), var(--card) 78%);
}

/* Sticky, not static: in a tall register the rail stays at the bottom of the
   viewport while rows scroll under it, instead of sitting 2000px down the page.
   Needs no overflow:hidden ancestor between here and the page scroller. */
.scroll-hint-rail {
  position: sticky; bottom: 0; z-index: 3;
  padding: 11px 14px 9px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: linear-gradient(to top, var(--card) 62%, rgba(255,255,255,0));
  opacity: var(--hint-rail, 0);
  transition: opacity .18s ease;
}
.scroll-hint-rail > span {
  display: block; position: relative; overflow: hidden;
  height: 3px; border-radius: 2px; background: var(--line-2);
}
.scroll-hint-rail > span > i {
  position: absolute; top: 0; left: 0; height: 3px;
  width: var(--hint-w, 40%); transform: translateX(var(--hint-x, 0%));
  border-radius: 2px; background: var(--dim);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint-fade, .scroll-hint-rail { transition: none; }
}

/* The script gives an overflowing scroller a tab stop, so it needs a ring. */
.scroll-hint [data-hint-scroller]:focus-visible {
  outline: 2px solid var(--accent-1); outline-offset: -2px;
}

/* A fitting table must not reserve room for an invisible rail. */
.scroll-hint:not([data-overflow]) > .scroll-hint-rail { display: none; }
.scroll-hint:not([data-overflow]) > .scroll-hint-view { border-radius: var(--r-lg); }