/* KHAYUBDI OS 2.0 — DEV-06 Release Candidate */

.os-release-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at top, rgba(57,255,136,.14), transparent 36%), rgba(5,5,5,.96);
}

.os-release-panel {
  width: min(720px, 100%);
  max-height: 92vh;
  overflow: auto;
  display: grid;
  gap: var(--os-space-4);
  padding: var(--os-space-5);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius);
  background: linear-gradient(145deg, rgba(34,34,34,.98), rgba(13,13,13,.98));
  box-shadow: var(--os-shadow);
}

.os-brand-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--os-accent);
  color: #031008;
  font-weight: 950;
  font-size: 1.4rem;
}

.os-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.os-stepper span {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.os-stepper span.is-active {
  background: var(--os-accent);
}

.os-release-host {
  display: grid;
  gap: var(--os-space-4);
  margin-block: var(--os-space-4);
}

.os-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: none;
  place-items: center;
  padding: 16px;
  background: rgba(0,0,0,.7);
}

.os-dialog-backdrop.is-open {
  display: grid;
}

.os-dialog {
  width: min(520px, 100%);
  display: grid;
  gap: var(--os-space-4);
  padding: var(--os-space-5);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius);
  background: var(--os-bg-2);
  box-shadow: var(--os-shadow);
}

.os-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 400;
  transform: translateY(-140%);
}

.os-skip-link:focus {
  transform: translateY(0);
}

.os-high-contrast {
  --os-bg: #000;
  --os-bg-2: #111;
  --os-surface: #1b1b1b;
  --os-border: rgba(255,255,255,.32);
  --os-muted: #d4d4d4;
}

.os-dev-panel {
  border-color: rgba(251,191,36,.42);
}

@media (prefers-reduced-motion: reduce) {
  .os-release-overlay,
  .os-dialog {
    scroll-behavior: auto;
  }
}