/* shared-web/refresh.css — the pull-to-refresh indicator (shared-web/refresh.js).
   Symlinked into both apps as css/refresh.css. Self-contained .psrefresh-*
   classes over the apps' shared :root palette, with fallbacks. z-index 9100:
   above the sticky header (100) and the driver form's #reqProgress chip
   (9000), below the open nav menu (9997) and the toast (9999). The overlays
   (what's-new 9400, consent 9500, PSAuth) never meet it — the gesture does
   not start on them. The indicator parks above the viewport (top: -52px)
   and the module translates it down by the pull. */
#psRefreshIndicator {
  position: fixed;
  top: -52px;
  left: 50%;
  margin-left: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border, #E5E7EB);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  pointer-events: none;
  will-change: transform;
}
#psRefreshIndicator.is-pulling  { transition: none; }
#psRefreshIndicator.is-settling { transition: transform 0.22s ease-out; }

.psrefresh__arrow {
  display: block;
  font: bold 22px/1 Arial, sans-serif;
  color: var(--crimson, #8C0930);
  transition: transform 0.18s ease;
}
.psrefresh__arrow::before { content: '\2193'; }
#psRefreshIndicator.is-armed .psrefresh__arrow { transform: rotate(180deg); }

.psrefresh__spinner {
  display: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--border, #E5E7EB);
  border-top-color: var(--crimson, #8C0930);
  animation: psrefresh-spin 0.8s linear infinite;
}
#psRefreshIndicator.is-busy .psrefresh__arrow   { display: none; }
#psRefreshIndicator.is-busy .psrefresh__spinner { display: block; }

/* Screen-reader text only: "Pull to refresh" / "Release to refresh" / "Refreshing". */
.psrefresh__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@keyframes psrefresh-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #psRefreshIndicator.is-settling,
  .psrefresh__arrow { transition: none; }
}