/* ==========================================================================
   Empovio — Create an account

   Sits on top of auth.css, which already owns the centred panel these screens
   live in. Only what the sign-in page has no equivalent of: the two-way
   chooser, the work-type cards, and the code shown once at the end.
   ========================================================================== */

.su-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: var(--sp-24);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-heading);
}

.su-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background-color: var(--n-900);
  color: var(--n-0);
  flex: none;
}

.su-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-16);
  padding: var(--sp-4) var(--sp-8);
  margin-left: calc(var(--sp-8) * -1);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: background-color var(--t-micro) var(--ease),
    color var(--t-micro) var(--ease);
}

.su-back:hover {
  background-color: var(--n-100);
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   The chooser — which of these two people are you
   -------------------------------------------------------------------------- */

.su-choices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin-top: var(--sp-24);
}

.su-choice {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  width: 100%;
  padding: var(--sp-16);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background-color: var(--n-0);
  text-align: left;
  transition: border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease),
    background-color var(--t-hover) var(--ease);
}

.su-choice:hover {
  border-color: var(--primary-200);
  background-color: var(--primary-25);
  box-shadow: var(--shadow-1);
}

.su-choice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-button);
  background-color: var(--primary-50);
  color: var(--primary-700);
  flex: none;
}

.su-choice__body {
  flex: 1;
  min-width: 0;
}

.su-choice__title {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.su-choice__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: var(--lh-snug);
}

.su-choice__go {
  flex: none;
  color: var(--text-disabled);
}

.su-choice:hover .su-choice__go {
  color: var(--primary-600);
}

/* --------------------------------------------------------------------------
   Work type — in-house or field

   Cards rather than a select: it is two options with a real consequence (a
   field employee gets a different workspace), and each needs a line saying so.
   A dropdown would hide both the choice and the explanation.
   -------------------------------------------------------------------------- */

.su-types {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.su-type {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  width: 100%;
  padding: var(--sp-12);
  border: 1px solid var(--border);
  border-radius: var(--r-button);
  background-color: var(--n-0);
  text-align: left;
  transition: border-color var(--t-hover) var(--ease),
    background-color var(--t-hover) var(--ease);
}

.su-type:hover {
  border-color: var(--border-strong);
}

.su-type.is-selected {
  border-color: var(--primary-600);
  background-color: var(--primary-25);
}

.su-type__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background-color: var(--n-100);
  color: var(--text-secondary);
  flex: none;
}

.su-type.is-selected .su-type__icon {
  background-color: var(--primary-100);
  color: var(--primary-700);
}

.su-type__body {
  flex: 1;
  min-width: 0;
}

.su-type__title {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.su-type__desc {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: var(--lh-snug);
}

/* The tick holds its space whether or not it is showing, so selecting a card
   does not shove its own text sideways. */
.su-type__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--primary-600);
  color: var(--n-0);
  flex: none;
  opacity: 0;
  transition: opacity var(--t-micro) var(--ease);
}

.su-type.is-selected .su-type__tick {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Code confirmation under the join field
   -------------------------------------------------------------------------- */

.su-ok {
  color: var(--success-700);
  font-weight: var(--fw-semibold);
}

.su-bad {
  color: var(--danger-700);
}

/* The code itself is read aloud and typed by hand, so it is spaced and
   monospaced wherever it appears. */
#join-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   The end of it
   -------------------------------------------------------------------------- */

.su-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-16);
  border-radius: 50%;
  background-color: var(--success-50);
  color: var(--success-600);
}

.su-facts {
  margin-top: var(--sp-24);
  border-top: 1px solid var(--border);
}

.su-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-small);
}

.su-fact__key {
  color: var(--text-secondary);
}

.su-fact__value {
  font-weight: var(--fw-semibold);
}

/* The new administrator's code, shown once. Loud on purpose — it is the only
   thing on this screen they cannot get back without going looking. */
.su-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  margin-top: var(--sp-24);
  padding: var(--sp-24) var(--sp-16);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
  background-color: var(--n-25);
  text-align: center;
}

.su-code__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.su-code__value {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  color: var(--text-primary);
}

.su-code__hint {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: var(--lh-snug);
  max-width: 40ch;
}

/* Sign-in page: the way through to here. */
.su-cta {
  margin-top: var(--sp-16);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  text-align: center;
}

.su-cta a {
  font-weight: var(--fw-semibold);
  color: var(--primary-600);
}

.su-cta a:hover {
  color: var(--primary-700);
}