/* Global: anchor-link scroll offset for sticky header (64px) + 16px breathing room.
   Without this, jumping to #section hides the heading under .header. */
html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
}
:target {
  scroll-margin-top: 80px;
}

/* skeleton placeholders for CLS — used by /, /ovdp/, /ovdp-vs-deposit/.
   JS replaces parent innerHTML or runs innerHTML='' before appendChild, which
   removes skeleton automatically. Aria-hidden so screen readers skip. */

.skel-bar {
  display: inline-block;
  height: 12px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.5s infinite;
  border-radius: 4px;
  vertical-align: middle;
}
.skel-bar.w-20 { width: 20%; }
.skel-bar.w-30 { width: 30%; }
.skel-bar.w-40 { width: 40%; }
.skel-bar.w-50 { width: 50%; }
.skel-bar.w-60 { width: 60%; }
.skel-bar.w-70 { width: 70%; }
.skel-bar.w-80 { width: 80%; }
.skel-bar.w-90 { width: 90%; }

.skel-btn {
  display: inline-block;
  width: 92px;
  height: 28px;
  background: #e2e8f0;
  border-radius: 8px;
  vertical-align: middle;
}

.skel-row td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  font-size: 14px;
  vertical-align: middle;
}
.skel-row:last-child td { border-bottom: 0; }

.skel-card {
  background: var(--bg, #f1f5f9);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Respect reduced-motion preference — disable shimmer */
@media (prefers-reduced-motion: reduce) {
  .skel-bar { animation: none; }
}