/* base/accessibility.css — Skip links, focus, visibility utilities. */

/* ── Skip navigation ── */

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: var(--z-max);
  padding: 0.75rem 1rem;
  background: var(--palette-gray-900);
  color: var(--text-on-dark);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ── Visibility ── */

.hidden,
.is-hidden {
  display: none !important;
}

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

/* ── Loading indicator ── */

#loading-indicator.loading-hidden {
  display: none !important;
}

#main-content.main-visible {
  display: block !important;
  visibility: visible !important;
  min-height: 60vh;
}

/* ── Auth-conditional visibility ── */

[data-auth-required].auth-visible,
[data-user-only].auth-visible,
[data-admin-only].auth-visible  { display: block !important; }

[data-auth-required].auth-hidden,
[data-user-only].auth-hidden,
[data-admin-only].auth-hidden   { display: none !important; }

[data-guest-only].guest-visible { display: block !important; }
[data-guest-only].guest-hidden  { display: none !important; }

.nav-element-visible  { display: inline-block !important; }
.nav-element-hidden   { display: none !important; }
.user-info-visible    { display: block !important; }
.user-info-hidden     { display: none !important; }

/* ── Force-show / force-hide (JS-driven) ── */

.force-visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.force-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ── Display utilities (React-migration safe) ── */

.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }