/* KALTERA account setup (Apply step 2): sections, repeating rows, initials, review and signature.
   Built from the V3 form styles (.field, .chip, .consent, .note) and tokens. */

.setup [hidden] {
  display: none !important;
}

/* While the account setup is open, the form gets more of the page width */
@media (min-width: 980px) {
  .page__grid:has([data-view="verify"]:not([hidden])) .page__aside {
    grid-column: 1 / span 4;
  }
  .page__grid:has([data-view="verify"]:not([hidden])) .page__main {
    grid-column: 5 / span 8;
  }
}

.setup {
  gap: 28px;
}
.setup__progress {
  position: relative;
  height: 2px;
  background: var(--rule);
  overflow: hidden;
}
.setup__progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0.125) * 100%);
  background: var(--heading);
  transition: width 420ms var(--ease-out);
}
.setup__intro {
  margin-bottom: 0;
}

.setup__step {
  display: grid;
  gap: 18px;
}
.setup__count {
  margin: 0;
}
.setup__title {
  margin: 0;
  color: var(--text);
}
.setup__title:focus {
  outline: none;
}
.setup__note {
  margin: 0;
  max-width: 60ch;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.6;
}
.setup__fields {
  display: grid;
  gap: 22px;
  margin-top: 6px;
}
.setup .intake__row--2 > [data-wide] {
  grid-column: 1 / -1;
}
.setup input[type="date"] {
  min-height: 52px;
}
.setup input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
}

/* The action row: the button and its links on one centre line, with one gap
   between neighbours. The controls used to be pushed apart by margin-left:auto
   (which put the button 918px away from the links on the code step) and nudged
   onto the line by two different hand-tuned offsets (16px of padding on the
   links, 16px of margin on the button), which left the button 8px lower than
   the links. The row is aligned and grouped instead, the way the approved
   mockup has it. */
.setup__nav {
  align-items: center;
  justify-content: flex-end;
  gap: 16px 24px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  margin-top: 6px;
}

/* Repeating rows: additional prescribers, authorized orderers */
.setup__rows {
  display: grid;
  gap: 16px;
}
.setup__row {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.32);
}
.setup__row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.setup__row-head .label {
  margin: 0;
}
.setup__remove {
  font-size: 13px;
}
.setup__empty {
  margin: 0;
  padding: 18px 20px;
  border: 1px dashed var(--rule-strong);
  border-radius: 12px;
  color: var(--ink-muted);
  font-size: 15px;
}
.setup__add {
  justify-self: start;
}
.setup__add .icon {
  width: 16px;
  height: 16px;
}
.setup__rows-error.is-visible {
  display: flex;
}

/* Attestations with initials */
.attest {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.attest__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 24px;
  align-items: start;
  padding-block: 20px;
  border-top: 1px solid var(--rule);
}
.attest__item:last-child {
  border-bottom: 1px solid var(--rule);
}
.attest__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}
.attest__n {
  font-family: var(--f-mono);
  color: var(--heading);
}
.attest .field input {
  text-transform: uppercase;
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.18em;
}
@media (max-width: 639px) {
  .attest__item {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .attest .field {
    max-width: 160px;
  }
}

/* Review */
.review {
  display: grid;
  gap: 4px;
}
.review__sec {
  padding-block: 16px;
  border-top: 1px solid var(--rule);
}
.review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.review__head .label {
  margin: 0;
}
.review__head .link-arrow {
  font-size: 13px;
}
.review dl {
  display: grid;
  gap: 6px;
  margin: 0;
}
.review__row {
  display: grid;
  grid-template-columns: minmax(140px, 0.42fr) minmax(0, 1fr);
  gap: 16px;
}
.review dt {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.6;
}
.review dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
@media (max-width: 639px) {
  .review__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Signing */
.sign {
  display: grid;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-strong);
}
.sign__cert {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}
.sign__date {
  display: flex;
  align-items: center;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 16px;
  color: var(--ink-muted);
}
.sign__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sign__modes {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  overflow: hidden;
}
.sign__mode {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.sign__mode[aria-pressed="true"] {
  background: var(--brass);
  color: #F5F8F7;
}
.sign__mode:focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: 2px;
}
.sign__pad {
  position: relative;
  height: 190px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: rgb(255 255 255 / 0.7);
  cursor: crosshair;
  touch-action: none;
}
.sign__pad canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sign__line {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 46px;
  height: 1px;
  background: var(--rule-strong);
  pointer-events: none;
}
.sign__hint {
  position: absolute;
  inset: auto 0 18px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
  pointer-events: none;
}
.sign__typed input {
  height: 84px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 34px;
  letter-spacing: 0.01em;
}
.sign__tools {
  display: flex;
  justify-content: flex-end;
}
.sign__tools .link-arrow {
  font-size: 13px;
}
.field.is-invalid .sign__pad {
  border-color: var(--heading);
  box-shadow: inset 0 0 0 1px var(--heading);
}
.sign__legal {
  margin: 0;
}

.setup__restart {
  display: flex;
  justify-content: flex-start;
}

/* Email confirmation (code) after signing */
.setup__verify .field__control {
  max-width: 260px;
}
.setup__verify [data-verify-code] {
  font-family: var(--f-mono);
  font-size: 22px;
  letter-spacing: 0.32em;
  text-align: center;
}
/* The code step carries the button and two links; the base row's gap holds. */

/* On a phone the row stops hugging the right edge. The button takes the full
   width on its own line with the links under it, the way the approved code
   step has it, rather than crowding onto one line. */
@media (max-width: 639px) {
  .setup__nav {
    justify-content: flex-start;
  }
  .setup__nav > .btn {
    order: -1;
    flex: 1 0 100%;
  }
}

/* ---------- The portal's one-page form (inside the portal shell) ----------
   The portal shell takes the public site's styles off the page, so this form carries its own look,
   built on the portal's tokens (assets/portal/tokens.css): three panels, one per section, the portal's
   inputs, chips and button, one spacing scale (8, 16, 24, 32). Everything is scoped to .setup--one, so
   the signed forms that still use the rules above are untouched. */
.setupPage { padding-bottom: 64px; }

.setup--one {
  display: block;
  max-width: none;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
}
.setup--one .k-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.setup--one .setup__intro {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 8px;
  color: var(--ink-muted);
  font-size: 13.5px;
}
/* The Account page's rows (.set: the title and lead at the left, the card at the right). */
.setup--one .setup__step { gap: 32px; }
.setup--one .setup__title { font-family: var(--f-display); font-weight: 300; font-size: 22px; line-height: 1.2; color: var(--teal); }
.setup--one .setup__fields { margin-top: 0; gap: 16px; }
.setup--one .panel__b { padding: 24px; }
.setup--one .intake__row--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.setup--one .setup__submit { border-top: 0; padding-top: 8px; }
/* City, state and ZIP: one line of an address. */
.setup--one .setup__three { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.7fr); gap: 16px 24px; }
.setup--one .setup__three > .field { grid-column: auto; }
.setup--one .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.setup--one .setup__submit .form-status { margin-bottom: 16px; }

.setup--one .field { display: grid; gap: 8px; align-content: start; min-width: 0; border: 0; padding: 0; margin: 0; }
.setup--one .field[hidden] { display: none; }
.setup--one .field__label,
.setup--one legend.field__label { padding: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-muted); }
.setup--one .field__label .opt { color: var(--ink-faint); }
.setup--one .field__control { position: relative; }
.setup--one .field__control input,
.setup--one .field__control select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sharp);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.setup--one .field__control input.is-mono { font-family: var(--f-mono); letter-spacing: 0.04em; }
.setup--one .field__control select {
  appearance: none;
  padding-right: 36px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2316262B' d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
}
.setup--one .field__control input:focus,
.setup--one .field__control select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
.setup--one .field__hint { margin: 0; font-size: 12.5px; color: var(--ink-muted); }
.setup--one .field__error { display: none; margin: 0; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.4; color: var(--bad); }
.setup--one .field.is-invalid .field__error { display: flex; }
.setup--one .field.is-invalid .field__control input,
.setup--one .field.is-invalid .field__control select { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-wash); }

/* The choice: two chips side by side, the chosen one filled. */
.setup--one .choices { display: flex; flex-wrap: wrap; gap: 8px; }
/* The portal's own .chip is a pill by itself; here the label is only the wrapper of the real pill (the span). */
.setup--one .chip { position: relative; display: inline-flex; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; }
.setup--one .chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.setup--one .chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--white);
  font-size: 14px;
}
.setup--one .chip .icon { display: none; }
.setup--one .chip input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--porcelain); }
.setup--one .chip input:checked + span .icon { display: inline-block; }
.setup--one .chip input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.setup--one .field.is-invalid .chip span { border-color: var(--bad); }

.setup--one .form-status { margin: 0; display: none; align-items: center; gap: 8px; color: var(--bad); font-size: 13.5px; }
.setup--one .form-status.is-visible { display: flex; }

.setup--one .setup__nav { display: flex; justify-content: flex-start; margin: 0; padding: 0; border: 0; }
.setup--one .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--r-sharp);
  background: var(--teal);
  color: var(--porcelain);
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.setup--one .btn:hover { background: var(--teal-deep); }
.setup--one .btn .icon.spin { display: none; }
.setup--one .btn.is-loading .icon--arrow { display: none; }
.setup--one .btn.is-loading .icon.spin { display: inline-block; animation: setupSpin 800ms linear infinite; }
.setup--one .btn[disabled] { opacity: 0.6; cursor: progress; }
@keyframes setupSpin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .setup--one .panel__b { padding: 16px; }
  .setup--one .intake__row--2 { grid-template-columns: minmax(0, 1fr); }
  .setup--one .setup__three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .setup--one .setup__three > .field:first-child { grid-column: 1 / -1; }
  /* iOS zooms the page when a field under 16px takes focus. */
  .setup--one .field__control input,
  .setup--one .field__control select { font-size: 16px; }
}
/* Every icon in the form has a size of its own: the portal's sprite icons are not sized by the site's .icon rule. */
.setup--one .icon { width: 16px; height: 16px; flex: none; fill: currentColor; }
.setup--one .icon--caret { display: none; }