/* ============================================================================
   Request Telehealth Visit — the 3-step flow      Redmine #82407

   Composition only. Every part comes from a DS recipe built elsewhere:
     modal.css    Modal / Default + parts       COMPONENTS.md §4.1, §4.4
     stepper.css  the Step N of 3 + bar         §19.2, bound
     field.css    Input / Default + Base        §2.1–2.3
     button.css   Button / Default              §1.1
     toast.css    Toast                         §10.1, re-bound

   TODO(tokens): every bare px length in this file is a SIZE or a BREAKPOINT.
   DESIGN.md §12.4 records both as not built.
   ========================================================================== */

.thv__step[hidden] {
  display: none;
}

.thv__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.thv__lede,
.thv__para {
  margin: 0;
  color: var(--color-content-primary);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
}

/* --- Step 1 — Important notice -------------------------------------------
   `Alert` (§3) would be the DS set for a persistent in-page message, and §3 is
   "the cleanest page audited so far". It is not used here: the notice IS the
   step's whole content, not an aside within other content, and the ticket
   gives it its own screen with its own CTA. So this is the step surface
   carrying `soft/warning/default` with the paired `on-soft/warning` ink —
   DESIGN.md §4.4, root CLAUDE.md non-negotiable 6. */
.thv__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-soft-warning-default);
  color: var(--color-on-soft-warning);
  border-radius: var(--shape-radius-card);
}

.thv__notice-icon {
  flex: none;
  margin-block-start: 2px; /* optical: aligns the glyph to the first line */
}

.thv__notice-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.thv__notice-body p {
  margin: 0;
}

/* --- Step 3 — the form -------------------------------------------------- */
.thv__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Fields that appear only once an earlier answer unlocks them. The ticket is
   explicit that this is a VISIBILITY rule, not a disabled state: child #86773
   is titled "No disabled fields", and the description strikes through the
   earlier "disabled" wording in favour of "not visible". */
.thv__conditional[hidden] {
  display: none;
}

/* Footer: Back sits left of the Continue/Submit pair, using the DS footer's
   "extra action, cancel, primary" order from §4.4. */
.thv__footer-back {
  margin-inline-end: auto;
}

/* The header stacks the stepper above the title, with the close affordance
   beside both — `Modal / Default / Header` (§4.4) is a title bar, so the
   stepper is an addition to it, not a replacement for it. */
.thv__head {
  display: flex;
  flex: 1 1 auto;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--space-xs);
}

/* The title takes focus on each step change so the change is announced. It is
   not interactive, so it gets no ring of its own beyond base.css's. */
.thv__title:focus {
  outline: none;
}
.thv__title:focus-visible {
  outline: var(--shape-focus-width) solid var(--color-border-focus);
  outline-offset: var(--shape-focus-offset);
}