/* Paryaj Million — UX polish layer (loaded after sigma.css).
   Additive only: accessibility, skeleton loaders, and data-saver mode.
   Semantic tokens use new --pm-* names so they never clash with sigma.css. */

:root {
  --pm-gold: #F5A623;
  --pm-gold-hi: #f7c900;
  --pm-green: #3fb950;
  --pm-red: #f85149;
  --pm-ink: #0d1117;
  --pm-surface: #161b22;
  --pm-border: #30363d;
  --pm-text: #e6edf3;
  --pm-muted: #8b949e;
}

/* ── Accessibility ─────────────────────────────────────────────────────── */
.bcp-skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100001;
  background: var(--pm-gold);
  color: #000;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: top .2s ease;
}
.bcp-skip:focus { top: 12px; outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Visible, brand-coloured keyboard focus (only for keyboard users). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.sigma-btn:focus-visible {
  outline: 3px solid var(--pm-gold) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}

/* ── Skeleton loaders ─────────────────────────────────────────────────── */
.skeleton,
.skeleton-text,
.skeleton-block {
  position: relative;
  overflow: hidden;
  background: #1c2530;
  border-radius: 8px;
}
.skeleton-text { height: .8em; margin: .35em 0; border-radius: 4px; }
.skeleton-block { min-height: 60px; }
.skeleton::after,
.skeleton-text::after,
.skeleton-block::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(245,166,35,.14), transparent);
  animation: bcp-shimmer 1.3s infinite;
}
@keyframes bcp-shimmer { 100% { transform: translateX(100%); } }

/* ── Data-saver mode (auto on Save-Data / metered, or user toggle) ──────── */
body.data-saver *,
body.data-saver *::before,
body.data-saver *::after {
  animation-duration: .001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001s !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
body.data-saver .bcp-mascotte,
body.data-saver .ticker,
body.data-saver video[autoplay] { display: none !important; }

/* ── Reduced motion (respect the OS setting site-wide) ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }
}