/* What a DSP did from their phone, as the office sees it: the ID step's
   links and the Emergency contacts card on the DSP page, the DSP's ID page,
   and Agreements with its versions. Shares the onboarding.css tokens. */

/* ── DSP page: the ID step and an agreement's View dialog ─────────────── */

.onboarding-step__confirmed {
  white-space: normal;
}

.onboarding-step__confirm {
  display: inline;
}

.agreed-dialog__fact {
  margin-bottom: 12px;
  line-height: 1.5;
}

.agreed-dialog__actions {
  justify-content: flex-start;
}

/* ── DSP page: Emergency contacts ─────────────────────────────────────── */

.emergency-contacts__empty {
  margin-top: 12px;
  color: var(--onboarding-muted);
}

.emergency-contacts__list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.emergency-contact {
  display: grid;
  grid-template-columns: minmax(10rem, 1.5fr) 1fr 1fr 1.5fr;
  column-gap: 16px;
  align-items: baseline;

  @media (width < 768px) {
    grid-template-columns: 1fr;
    row-gap: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--onboarding-rule);
  }
}

.emergency-contact__name { font-weight: 600; }
.emergency-contact__relationship { color: var(--onboarding-muted); }
.emergency-contact__email { overflow-wrap: anywhere; }

/* ── A DSP's ID page, Agreements: the back link ───────────────────────── */

.id-page__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  color: var(--onboarding-admin);

  svg { width: 16px; height: 16px; }
}

.id-page__back:hover {
  text-decoration: underline;
}

.id-page__intro,
.agreements__intro {
  margin-top: 8px;
  color: var(--onboarding-muted);
}

/* ── A DSP's ID page ──────────────────────────────────────────────────── */

.id-page__sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0;

  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}

.id-page__label {
  margin-bottom: 8px;
  font-weight: 600;
}

.id-page__image,
.id-page__file,
.id-page__none {
  display: block;
  width: 100%;
  border-radius: 12px;
  background: color-mix(in oklab, var(--color-base-content) 8%, var(--color-base-200));
}

.id-page__image {
  max-height: 32rem;
  object-fit: contain;
}

.id-page__file {
  height: 28rem;
}

.id-page__none {
  display: grid;
  place-items: center;
  height: 12rem;
  color: var(--onboarding-muted);
}

.id-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.id-page__confirmed {
  font-weight: 500;
}

/* ── Agreements ───────────────────────────────────────────────────────── */

.agreements .card {
  margin-top: 20px;
}

.agreements__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  @media (width < 640px) {
    flex-direction: column;
  }
}

.agreements__title {
  font-weight: 600;
}

.agreements__title:hover {
  text-decoration: underline;
}

.agreements__unwritten {
  color: #b7791f;
}

.agreements__action {
  color: var(--onboarding-admin);
  white-space: nowrap;
}

.agreements__action:hover {
  text-decoration: underline;
}

.agreements__table td,
.agreements__table th {
  white-space: nowrap;
}

.agreement__text {
  line-height: 1.6;
  max-width: 48rem;

  p + p { margin-top: 1em; }
}

.agreements__history-title {
  margin-top: 32px;
  font-size: 1.25rem;
  font-weight: 700;
}

.agreements__version-summary {
  padding: 16px 24px;
  cursor: pointer;
  font-weight: 600;
}

.agreements__version-text {
  padding: 0 24px 24px;
}

.agreement-form__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.agreement-form__text {
  min-height: 24rem;
  line-height: 1.5;
  font-size: 1rem;
}

.agreement-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}