/* ─── PAGE SCROLL CONTROL (components/ui/scroll-nav) ───────────────────────
   Part of the design system, kept in its own small file because the component
   links it itself: that way every host — the admin, the public site, a tenant
   front site, the customer portal, and ReVeRa's own shell, which deliberately
   does not load design-system.css — gets exactly the same control.

   Floating Back-to-top / Scroll-down pair at the bottom inline-end corner, so
   it mirrors itself in Arabic and Kurdish. public/js/byar-scroll-nav.js shows
   each button only when it means something, and sets --scroll-nav-lift to sit
   the pair ABOVE any other floating furniture in that corner.
   Colours come from the platform tokens; the fallbacks only apply on a host
   that defines none. */
.scroll-nav {
  --sn-bg: var(--bg2, #ffffff);
  --sn-ink: var(--text, #0f172a);
  --sn-line: var(--border, #cbd5e1);
  --sn-ring: var(--accent, #2563eb);
  position: fixed;
  z-index: 1150;
  inset-inline-end: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + var(--scroll-nav-lift, 0px));
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
[data-theme="dark"] .scroll-nav {
  --sn-bg: var(--bg2, #1e293b);
  --sn-ink: var(--text, #f1f5f9);
  --sn-line: var(--border, #475569);
}
.scroll-nav[data-sn-off] { display: none; }
.scroll-nav__btn {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 44px;
  min-block-size: 44px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--sn-line);
  background: var(--sn-bg);
  color: var(--sn-ink);
  box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .18s ease;
}
.scroll-nav__btn[hidden] { display: none; }
.scroll-nav__btn.is-entering { opacity: 0; }
.scroll-nav__btn:hover { border-color: var(--sn-ring); }
.scroll-nav__btn:focus-visible { outline: 3px solid var(--sn-ring); outline-offset: 2px; }
.scroll-nav__tip {
  position: absolute;
  inset-inline-end: calc(100% + .5rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: .3rem .6rem;
  border-radius: 8px;
  background: var(--sn-ink);
  color: var(--sn-bg);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.scroll-nav__btn:hover .scroll-nav__tip,
.scroll-nav__btn:focus-visible .scroll-nav__tip { opacity: 1; }
@media (hover: none) { .scroll-nav__btn:hover .scroll-nav__tip { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .scroll-nav__btn, .scroll-nav__tip { transition: none; }
}
@media print { .scroll-nav { display: none !important; } }