/* Register page — paste form + ceremony status.
   Lives on top of the design tokens in style.css (paper/ink palette,
   typography). Keep this file small — it covers one page. */

#register-form {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
  max-width: 40rem;
}

#register-form label {
  font-weight: 600;
  color: var(--ink);
}

#register-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.95rem;
  background: var(--paper-warm);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  resize: vertical;
  min-height: 5rem;
}

#register-form textarea:focus {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
}

#register-form button {
  justify-self: start;
  background: var(--forest);
  color: var(--paper);
  border: 0;
  border-radius: var(--radius);
  padding: 0.6rem 1.4rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
#register-form button:hover { background: var(--forest-deep); }
#register-form button[disabled] { opacity: 0.6; cursor: progress; }

#register-form .error,
#ceremony .error {
  color: var(--terracotta);
  font-size: 0.95rem;
  margin: 0;
}

#ceremony {
  margin-top: 2rem;
  max-width: 40rem;
}
#ceremony .status {
  color: var(--forest-deep);
  font-weight: 600;
}

/* PRF-get() interstitial: shown between create() and get() so
   third-party iOS passkey managers have time to surface the
   freshly-minted credential to the OS picker (and we get a fresh
   user-gesture context for the second WebAuthn ceremony). */
#ceremony.prf-interstitial button {
  background: var(--forest);
  color: var(--paper);
  border: 0;
  border-radius: var(--radius);
  padding: 0.6rem 1.4rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.25rem;
}
#ceremony.prf-interstitial button:hover { background: var(--forest-deep); }
#ceremony.prf-interstitial button[disabled] { opacity: 0.6; cursor: progress; }
#ceremony.prf-interstitial .hint {
  color: var(--ink-soft, var(--ink));
  font-size: 0.9rem;
  opacity: 0.75;
}