/* ===========================================================================
   polish.css — shared polish layer for AdjusterRate
   Loaded AFTER each page's inline <style> so it acts as the single source of
   truth for cross-cutting polish: focus, scrollbar, selection, motion, and a
   couple of accessibility-driven variable corrections. Page-specific layout
   stays in the templates; only system-wide concerns live here.
   =========================================================================== */

:root {
  /* Contrast fix: the per-page --muted (#6b7280) fails WCAG AA on --bg.
     Override once here so every page gets readable secondary text. */
  --muted: #828d9c;
  /* Some pages (index, firm) reference --primary-bg only on pricing; provide a
     safe fallback so future use never renders transparent. */
  --primary-bg: #1c1a3a;
  /* Focus ring shared token. */
  --focus-ring: 0 0 0 3px rgba(108, 99, 255, 0.45);
}

/* ── Selection + tap highlight ───────────────────────────────────────────── */
::selection {
  background: rgba(108, 99, 255, 0.32);
  color: #fff;
}
* {
  -webkit-tap-highlight-color: rgba(108, 99, 255, 0.18);
}

/* ── Smooth, accessible scroll ───────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Custom thin scrollbar (dark) ────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: #2c3142 transparent;
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2c3142;
  border-radius: 8px;
  border: 2px solid var(--bg, #0f1117);
}
::-webkit-scrollbar-thumb:hover { background: #3a4154; }

/* ── Focus-visible rings on every interactive element ────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.rating-btn:focus-visible,
th.sortable:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius, 8px);
  position: relative;
  z-index: 1;
}
/* Inputs already draw their own ring on :focus — keep it crisp on keyboard too. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--primary, #6c63ff);
}
/* Never show the default outline when focus isn't from the keyboard. */
:focus:not(:focus-visible) { outline: none; }

/* ── Entrance motion ─────────────────────────────────────────────────────── */
@keyframes ar-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
main,
.page {
  animation: ar-fade-up 0.24s ease both;
}

/* ── Skeleton shimmer for locked placeholders ────────────────────────────── */
.locked-bar,
.metric-locked {
  position: relative;
  overflow: hidden;
}
.locked-bar::after,
.metric-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  );
  animation: ar-shimmer 1.6s ease-in-out infinite;
}
@keyframes ar-shimmer {
  100% { transform: translateX(100%); }
}

/* ── Header nav link (replaces inline onmouseover/onmouseout hover) ──────── */
.nav-link {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}
.nav-link:hover { color: var(--text); }

/* ── Faint empty-state icons are too faint — lift them slightly ──────────── */
.empty-card svg,
.empty-state svg { opacity: 0.4; }

/* ── Respect reduced-motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}