/*
  Registration flow
  Multi-step trail, dynamic question rendering, upload dropzone, consent
  box, and review summary. Kept in its own file, same reasoning as
  sections.css, this density and behavior is specific to this one flow.
*/

.reg-shell {
  max-width: 680px;
  padding-block: 48px 96px;
}

.reg-step {
  display: none;
}

.reg-step.is-active {
  display: block;
}

/* Step trail, adapted from .steps-path but compact and numbered with
   completed/active state rather than four static informational cards */

.reg-trail {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.reg-trail-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.reg-trail-line {
  flex: 1;
  height: 2px;
  background-color: var(--color-border);
  min-width: 12px;
}

.reg-trail-dot.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.reg-trail-dot.is-done {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: #FFFFFF;
}

.reg-step-title {
  margin-bottom: 6px;
}

.reg-step-hint {
  margin-top: 18px;
  margin-bottom: 28px;
  font-size: 0.78rem;
}

.reg-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .reg-field-grid { grid-template-columns: 1fr; }
}

.reg-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.reg-checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.reg-checkbox-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

.reg-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  gap: 16px;
}

.reg-error {
  color: var(--color-danger);
  font-size: var(--fs-sm);
  margin-top: 6px;
  display: none;
}

.reg-error.is-visible {
  display: block;
}

/* Upload dropzone */

.reg-dropzone {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center;
  margin-bottom: 20px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.reg-dropzone.has-file {
  border-style: solid;
  border-color: var(--color-sage);
  background-color: var(--color-success-bg);
}

.reg-dropzone-status {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: 8px;
}

.reg-dropzone.has-file .reg-dropzone-status {
  color: var(--color-sage);
  font-weight: 600;
}

/* Consent box */

.consent-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  background-color: var(--color-surface);
  margin-bottom: 20px;
}

.consent-link-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.consent-link-row input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.consent-status-pending {
  color: var(--color-warning);
  font-weight: 600;
}

.consent-status-done {
  color: var(--color-sage);
  font-weight: 600;
}

/* Review summary */

.review-group {
  margin-bottom: 24px;
}

.review-group h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 10px;
}

.review-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}

.review-row dt {
  color: var(--color-text-muted);
}

.review-row dd {
  text-align: right;
  max-width: 60%;
}

/* Confirmation */

.confirmation-code {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin-block: 16px;
}