/* ═══════════════════════════════════════
   ELITE CS v4 — BASE
   Typography, icons, accessibility, keyframes
   ═══════════════════════════════════════ */

/* ─── Skip Link (Accessibility) ─── */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--s4);
  background: var(--teal);
  color: white;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
  transition: top var(--dur-micro) var(--ease);
}

.skip-link:focus {
  top: var(--s4);
}

/* ─── Focus Visible ─── */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--teal-soft);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none; /* handled by .mw-input:focus */
}

/* ─── Phosphor Icons ─── */
.ph, .ph-fill, .ph-bold {
  vertical-align: -0.125em;
}

/* ─── Typography Utilities ─── */
.page-title {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-bright);
}

.page-sub {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-top: var(--s1);
}

.sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s4);
}

.sec-title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.01em;
}

.sec-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-left: var(--s3);
}

/* ─── Keyframes ─── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes drift {
  from { transform: translateY(-8px) scale(0.97); }
  to { transform: translateY(18px) scale(1.04); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes backdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}