/*
 * FAB stack (v16.17.2)
 *
 * Coordinates the three floating action buttons in the bottom-right
 * so they never overlap. Stack order (bottom → top):
 *
 *   slot 1 — back-to-top (.ns-btt)
 *   slot 2 — install PWA pill (.nspwa-install-pill)
 *   slot 3 — layout switcher (.ns-layout-picker-fab)
 *
 * Each FAB sets its own `bottom` value via this stylesheet, overriding
 * the legacy `bottom: 1.5rem` / `bottom: 20px` declarations from
 * style.css and inc/pwa.php (loaded later in the cascade because of
 * import order). When the mobile bottom-tab nav is present
 * (body.ns-has-mobile-tabs), the entire stack shifts up by 68px.
 *
 * Stack slot variables — easy to tune in one place.
 */
:root {
  --ns-fab-edge: 20px;
  --ns-fab-gap: 14px;
  --ns-fab-h: 42px;
  --ns-fab-slot-1: var(--ns-fab-edge);
  --ns-fab-slot-2: calc(var(--ns-fab-edge) + var(--ns-fab-h) + var(--ns-fab-gap));
  --ns-fab-slot-3: calc(var(--ns-fab-edge) + (var(--ns-fab-h) + var(--ns-fab-gap)) * 2);
}

body.ns-has-mobile-tabs {
  --ns-fab-edge: 84px;
}

.ns-btt {
  bottom: var(--ns-fab-slot-1) !important;
  right: var(--ns-fab-edge-r, 20px) !important;
  z-index: 90;
}

.nspwa-install-pill {
  bottom: var(--ns-fab-slot-2) !important;
  right: var(--ns-fab-edge-r, 20px) !important;
  z-index: 9999;
}

.ns-layout-picker-fab {
  bottom: var(--ns-fab-slot-3) !important;
  right: var(--ns-fab-edge-r, 20px) !important;
  z-index: 8500;
}

@media (max-width: 600px) {
  :root {
    --ns-fab-edge-r: 16px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ns-btt,
  .nspwa-install-pill,
  .ns-layout-picker-fab {
    transition: bottom 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.25s ease;
  }
}

/*
 * v16.18.0 — Scroll-collapse: when body.ns-fab-collapsed is set
 * (managed by fab-scroll-collapse.js), the labelled FABs shrink to
 * icon-only circles. The back-to-top FAB is already icon-only by
 * design and is unaffected.
 */
body.ns-fab-collapsed .ns-layout-picker-fab,
body.ns-fab-collapsed .nspwa-install-pill {
  padding: 0 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: hidden !important;
}
body.ns-fab-collapsed .ns-layout-picker-fab-label,
body.ns-fab-collapsed .nspwa-install-pill > *:not(.nspwa-install-pill-ico):not(svg) {
  opacity: 0;
  max-width: 0;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
}
.ns-layout-picker-fab-label,
.nspwa-install-pill > * {
  transition: opacity 0.2s ease, max-width 0.2s ease;
}
.ns-layout-picker-fab,
.nspwa-install-pill {
  transition: padding 0.2s ease, width 0.2s ease, height 0.2s ease, border-radius 0.2s ease, bottom 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.25s ease;
}