/* Onboardo self-serve registration (TASK-057). Layered on top of studio.css, which supplies the
   login card chrome (.login-wrap/.login-card/.field/.btn) reused here. Only registration-specific
   bits live in this file: the wider card, the slug + suffix row, live availability states and the
   terms checkbox. Kept as an external stylesheet (no inline <style>) so the page stays CSP-clean. */

.register-card {
  max-width: 460px;
}

.register-card h1 {
  font-size: 25px;
}

/* Subdomain input with a fixed ".onboardo.im" suffix pinned to the right. */
.slug-row {
  display: flex;
  align-items: stretch;
}

.slug-row .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.slug-suffix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-soft);
  background: var(--stone);
  border: 1px solid var(--line);
  border-left: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  white-space: nowrap;
}

/* Live availability hint under the slug field — colour reflects the check result. */
.slug-status[data-state="checking"] {
  color: var(--text-soft);
}

.slug-status[data-state="available"] {
  color: var(--green-deep);
  font-weight: 700;
}

.slug-status[data-state="taken"] {
  color: var(--red, #C0392B);
  font-weight: 700;
}

/* Terms + privacy consent. */
.terms-field {
  margin-top: 4px;
}

.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-soft);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.terms-check input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--green-deep);
}

.terms-check a {
  color: var(--green-deep);
  font-weight: 700;
}

/* Mark an invalid field when the server bounced the submit. */
.input.is-invalid {
  border-color: var(--red, #C0392B);
}