/* ==========================================================================
   NADIR — waitlist dialog
   --------------------------------------------------------------------------
   Every call to action on the page routes here while the product pages are
   being rebuilt. Tokens come from apple.css; nothing new is introduced.
   ========================================================================== */

.wl-dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  border: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wl-dialog:not([open]) {
  display: none;
}

.wl-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
}

.wl-panel {
  position: relative;
  width: min(30rem, 100%);
  padding: 2.25rem 2rem 2rem;
  border: 1px solid var(--ap-rule, #2a2a2c);
  border-radius: var(--ap-radius-lg, 28px);
  background: var(--ap-panel, #1d1d1f);
  color: var(--ap-text, #f5f5f7);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .wl-dialog[open] .wl-panel {
    animation: wl-rise 260ms cubic-bezier(0.28, 0.11, 0.32, 1);
  }
}

@keyframes wl-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}

.wl-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ap-text-dim, #86868b);
  background: rgba(245, 245, 247, 0.07);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.wl-close:hover {
  color: var(--ap-text, #f5f5f7);
  background: rgba(245, 245, 247, 0.14);
}

.wl-kicker {
  margin: 0 0 0.5rem;
  color: var(--ap-accent, #ff7a45);
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wl-title {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.wl-lede {
  margin: 0 0 1.6rem;
  color: var(--ap-text-dim, #86868b);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.wl-field {
  display: block;
  margin-bottom: 1rem;
}

.wl-field > span {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ap-text-dim, #86868b);
}

.wl-field input,
.wl-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ap-rule, #2a2a2c);
  border-radius: 12px;
  color: var(--ap-text, #f5f5f7);
  background: #0b0b0c;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: border-color 160ms ease;
}

.wl-field textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.wl-field input:focus,
.wl-field textarea:focus {
  outline: none;
  border-color: var(--ap-accent, #ff7a45);
}

.wl-field input::placeholder,
.wl-field textarea::placeholder {
  color: #5a5a5f;
}

.wl-submit {
  width: 100%;
  min-height: 46px;
  margin-top: 0.4rem;
  border: 0;
  border-radius: 100px;
  color: #0b0b0c;
  background: var(--ap-text, #f5f5f7);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 160ms ease;
}

.wl-submit:hover {
  opacity: 0.86;
}

.wl-submit[disabled] {
  opacity: 0.55;
  cursor: default;
}

.wl-note {
  margin: 0.9rem 0 0;
  color: var(--ap-text-dim, #86868b);
  font-size: 0.8125rem;
  line-height: 1.45;
  text-align: center;
}

.wl-note[data-tone="error"] {
  color: #ff8a8a;
}

/* Success state replaces the form in place rather than swapping dialogs. */
.wl-done {
  text-align: center;
}

.wl-done-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  color: var(--ap-accent, #ff7a45);
  background: rgba(255, 122, 69, 0.14);
  font-size: 1.25rem;
}

body.wl-open {
  overflow: hidden;
}

/* The header actions and the footer call to action are buttons now that they
   open the dialog instead of navigating. Both classes were written for anchors,
   so strip the user-agent button chrome they never had to account for. */
body.ap-site .nav-actions button,
body.ap-site .footer-links button {
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

body.ap-site .nav-actions .nav-link-muted {
  padding: 0;
  font-family: var(--ap-font);
  line-height: 1;
}

body.ap-site .nav-actions .button-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ap-accent);
}

/* Standards named in the compliance band no longer link anywhere, so they read
   as labels rather than inheriting the link affordance from .ap-link. */
.ap-standard {
  color: var(--ap-text-dim, #86868b);
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}