/* V03-E shared scroll hint: one small white chevron on the side of every [data-psg-scroller] that has more to show. Behaviour and
   placement: /r049/scrollhint.js (the button is absolutely positioned on the scroller's edge, 44 px tap area, 32 px visible disc).
   The theme styles every <button> as a bronze pill, so every visual property here is reset with !important. */
.psg-sh {
  position: absolute !important; z-index: 6; box-sizing: border-box !important;
  inline-size: 44px !important; block-size: 44px !important; min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: none !important; box-shadow: none !important; color: #fff !important;
  display: grid !important; place-items: center; cursor: pointer;
  font: inherit !important; line-height: 0 !important; letter-spacing: 0 !important; text-transform: none !important;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  opacity: 1; transition: opacity .18s ease;
}
.psg-sh[hidden] { display: none !important; }
.psg-sh.is-swap { opacity: 0; }
.psg-sh-disc {
  display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%;
  background: rgba(12, 12, 14, .52); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 10px rgba(0, 0, 0, .35);
  transition: transform .12s ease-out, background-color .18s ease;
}
.psg-sh svg { display: block; inline-size: 16px; block-size: 16px; }
/* the chevron points to where more content is (forward = right in LTR, left in RTL; back = the opposite): scrollhint.js draws it so */
@media (hover: hover) { .psg-sh:hover .psg-sh-disc { background: rgba(12, 12, 14, .72); } }
.psg-sh:active .psg-sh-disc { transform: scale(.92); }
.psg-sh:focus { outline: none !important; }
.psg-sh:focus-visible .psg-sh-disc { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 2px #0b0b0c, 0 0 0 4px #c4a57a; }
@media (prefers-reduced-motion: reduce) {
  .psg-sh, .psg-sh-disc, .psg-sh svg { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) { .psg-sh-disc { background: rgba(12, 12, 14, .9); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { .psg-sh-disc { background: #000; box-shadow: inset 0 0 0 1.5px #fff; } }
@media print { .psg-sh { display: none !important; } }

/* the R028 phone controls (dots, "1 of 4", arrows) are replaced by the hint wherever a rail carries it */
:is([data-psg-scroller], [data-psg-rail]) ~ .psg-rail-ctl { display: none !important; }