/*
 * Request-local stylesheet (Phase 3.0 trim).
 *
 * Shared layer is canonical for primitives — load order is:
 *   1. tokens.css       (--cm-* design tokens)
 *   2. typography.css   (Inter @font-face + base type rules)
 *   3. stylesheetv3.css (.button, .field, .error/.warning/.info/.success,
 *                        .closebtn, .messageText, .loader-*, .container,
 *                        .tooltip, .div-table primitives, input/select/
 *                        textarea primitives, hr, p, h1-h6, …)
 *   4. request/stylesheet.css  (this file — request-only overrides)
 *
 * Per-page leaves (Phases 3.1–3.4) will retire most of what is left below
 * to shared primitives. This file's job is to stop duplicating shared
 * rules and to use --cm-* tokens for color.
 */

/* The request site previously used a "Nexa" brand font; aligned to the
   shared Inter design system (typography.css's body Inter rule already
   wins now that the body override is gone). The /_shared/assets/fonts/
   request/Nexa.woff2 asset can be removed in a follow-up cleanup pass. */

/* stylesheetv3.css ships `body { display: none }` and /api pages flip it
   on via initializePage.js (adds .display-block). Request pages don't use
   that init helper, so re-show the body unconditionally here. Body
   font-size uses --cm-text-base (1rem ≈ 16px) for an accessibility-friendly
   default; per-page form rules (.form-row, .div-table, .form-body label)
   pin their own typography in pt where they need to be denser.

   Body is also flipped to a flex column to anchor the footer at the
   bottom without needing position:absolute on .page-footer. The previous
   layout had logo-div + page-container (min-height:100vh) + absolutely
   positioned footer as siblings, which left logo + 100vh stacked = ~107px
   of empty space below the footer on short pages. With body as the flex
   container, page-container fills with `flex: 1` and footer sits at the
   end of body in flow — no overflow. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-size: var(--cm-text-base);
  font-weight: var(--cm-fw-regular);
  line-height: var(--cm-lh-normal);
}

/* ---------- Page chrome ---------- */

/* Main content slot. Body is the flex column (see body rule above);
   .page-container takes flex:1 to grow into available space, pushing
   the footer to the natural bottom. stylesheetv3.css sets
   `.page-container { min-height: 100vh }` (line 290) which would force
   page-container alone to be viewport-tall regardless of flex sizing —
   override to `auto` so flex-basis + flex-grow control the height. */
.page-container {
  position: relative;
  width: 100%;
  flex: 1 0 auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Breathing room above the footer. The footer paints a 6px upward
     box-shadow (see .page-footer below) which projects over content
     when page-container's last child sits flush with the footer. The
     margin keeps the shadow from reading as content-overlap. */
  margin-bottom: var(--cm-space-6);
}

/* Vertical-centering modifier — used by short pages whose content is
   shorter than the available viewport (e.g. the request chooser landing,
   404). Without this, `.main-container` floats against the top of the
   page-container and leaves a big empty band before the footer. Long
   pages (patient/authorization, customer/upload) keep the default
   top-anchored layout. */
.page-container.page-container--vcenter {
  justify-content: center;
  /* Slight bottom padding biases the optical center upward — pure
     justify-content:center makes content feel sunk on tall viewports. */
  padding-bottom: var(--cm-space-10);
}

.main-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  /* margin-bottom dropped: the previous 150px gap pushed flow content past
     the absolute footer, contributing to the body overflow. With the
     flex-column body, footer is in flow at the end and natural padding
     handles the spacing. */
}

/* Chooser page-specific main-container — narrower than the form pages
   so the two side-by-side cards don't spread across the full viewport.
   Keeps the chooser feeling like a deliberate two-button choice rather
   than a sparse landing. Vertical spacing between heading and grid is
   handled by .chooser-page-heading's margin-bottom (rule below). */
.chooser-main-container {
  max-width: 880px;
}

.patient-main-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}

/* Request override: shared .logo-div is position:absolute, request flow
   wants it inline at the top of the page. Aligned to portal landing —
   transparent bg, centered logo, no surface fill or shadow. */
.logo-div {
  position: static;
  top: auto;
  left: auto;
  padding: 16px 10px;
  background-color: transparent;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.page-footer {
  /* Sits at the natural end of the body flex-column (see body rule). The
     previous absolute positioning pinned the footer to the page-container
     bottom but the flow content above (logo + page-container with
     min-height:100vh) pushed body height past viewport, leaving the
     viewport-bottom-empty-space artifact. */
  width: 100%;
  background-color: var(--cm-gray-900);
  color: var(--cm-text-on-dark);
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 -6px 2px 1px var(--cm-gray-900) !important;
}

.page-footer h4 {
  margin: 0px;
  padding: 5px;
  font-size: 10pt;
}

/* stylesheetv3.css line 5 has `* { color: var(--text-color) }` (a legacy
   gray cascade) which overrides the .page-footer white set above. Restore
   white for footer paragraphs (used on the chooser + 404 leaves where h4
   would skip from h1 → h4 and trip the heading-order rule). */
.page-footer p {
  color: var(--cm-text-on-dark);
  margin: 0px;
  padding: 5px;
  font-size: 10pt;
}

.page-footer a {
  color: var(--cm-text-on-dark);
}

/* stylesheetv3.css line 5 has `* { color: var(--text-color) }` which
   inherits onto inline children of .page-footer p (e.g.
   <span class="copyright-year">), making the year text render
   slate-700 on the dark footer bg. Restore white for any inline child
   inside the footer. */
.page-footer p span,
.page-footer .copyright-year {
  color: var(--cm-text-on-dark);
}

#navbar {
  padding: 0px;
  margin: 0px;
}

/* ---------- Form containers ---------- */

.form-container-div {
  display: flex;
  flex-direction: column;
  background-color: var(--cm-bg-surface);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-md);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 560px;
  padding: 32px 40px;
  box-sizing: border-box;
}

.patient-form-container-div {
  display: flex;
  flex-direction: column;
  background-color: var(--cm-bg-surface);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-md);
  align-items: center;
  justify-content: space-between;
  padding: 30px 50px;
  margin-bottom: 20px;
}

.form-div-col-direction {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.patient-main-container .form-div-col-direction {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.patient-main-container .form-div-row-direction {
  display: flex;
  flex-direction: row;
  align-items: top;
  justify-content: space-between;
}

.form-div-row-direction {
  display: flex;
  flex-direction: row;
  align-items: top;
  justify-content: space-between;
}

/* Request override: shared `hr` spans full width with --cm-text-body color.
   Request flow wants a centered, lighter divider between sections. */
hr {
  width: 50%;
  height: 1px;
  border: 0;
  border-top: 2px solid var(--cm-border);
  margin-bottom: 10px;
  margin-top: 10px;
}

/* Request override: shared p has 2px margin/padding; request body wants
   centered 12pt for the prose surrounding form fields. */
p {
  font-size: 12pt;
  text-align: center;
}

.vl-center-div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.vl {
  border-left: 2px solid var(--cm-border);
  height: 70%;
  margin-left: 20px;
  margin-right: 20px;
}

.form-header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding-bottom: 0px;
}

.form-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
  padding-top: 10px;
  padding-bottom: 10px;
}

.form-body .date-field {
  min-width: 100px;
}

.form-body label {
  font-size: 12pt;
  white-space: nowrap;
}

.form-body-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
  padding-top: 10px;
  padding-bottom: 10px;
}

.form-footer {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  padding-top: 30px;
  max-height: 110px;
}

.form-column {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
}

.form-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-width: 450px;
}

.form-row input {
  margin: 10px;
}

.button-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: center;
}

/* Request override: shared text/date/email/etc inputs use 5px/10px padding
   and a small radius; request flow wants larger, drop-shadowed pill inputs
   inside .form-row and .div-table. Tokenize colors. */
.form-row input[type='text'],
.form-row input[type='date'],
.form-row input[type='email'],
.form-row input[type='tel'],
.form-row select {
  padding: 12px;
  box-shadow: var(--cm-shadow-md);
  border: var(--cm-bg-surface);
  border-radius: var(--cm-radius-lg);
  width: 100%;
}

.div-table input[type='text'],
.div-table input[type='date'],
.div-table input[type='email'],
.div-table input[type='tel'],
.div-table select {
  padding: 12px;
  box-shadow: var(--cm-shadow-md);
  border: var(--cm-bg-surface);
  border-radius: var(--cm-radius-lg);
  width: 100%;
}

.form-row textarea {
  width: 400px;
  height: 100px;
  padding: 12px 20px;
  box-shadow: var(--cm-shadow-md);
  word-wrap: break-word;
  resize: none;
  margin: 10px;
  border: none;
}

.form-row select {
  cursor: pointer;
}

.form-row p {
  margin: 0px;
  padding: 0px;
}

.form-row h2 {
  margin: 0px;
  padding: 0px;
}

.form-row input:hover {
  margin: 10px;
  padding: 12px;
  box-shadow: var(--cm-shadow-md);
  border: var(--cm-bg-surface);
  background-color: var(--cm-bg-muted);
  color: var(--cm-text-body);
}

.signature-div p {
  text-align: left;
}

.signature-canvas {
  box-shadow: var(--cm-shadow-md);
  margin: 10px;
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24"><path d="M368.5 18.3l-50.1 50.1 125.3 125.3 50.1-50.1c21.9-21.9 21.9-57.3 0-79.2L447.7 18.3c-21.9-21.9-57.3-21.9-79.2 0zM279.3 97.2l-.5 .1-144.1 43.2c-19.9 6-35.7 21.2-42.3 41L3.8 445.8c-2.9 8.7-1.9 18.2 2.5 26L161.7 316.4c-1.1-4-1.6-8.1-1.6-12.4 0-26.5 21.5-48 48-48s48 21.5 48 48-21.5 48-48 48c-4.3 0-8.5-.6-12.4-1.6L40.3 505.7c7.8 4.4 17.2 5.4 26 2.5l264.3-88.6c19.7-6.6 35-22.4 41-42.3l43.2-144.1 .1-.5-135.5-135.5z" fill="%23000000"/></svg>')
      0 24,
    auto;
}

/* Dark-mode override: the inline SVG cursor above is hardcoded black, which
   becomes invisible against a dark canvas surface. Swap to a white-fill
   variant so the pen cursor stays visible at all surface brightnesses. */
:root.dark .signature-canvas {
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24"><path d="M368.5 18.3l-50.1 50.1 125.3 125.3 50.1-50.1c21.9-21.9 21.9-57.3 0-79.2L447.7 18.3c-21.9-21.9-57.3-21.9-79.2 0zM279.3 97.2l-.5 .1-144.1 43.2c-19.9 6-35.7 21.2-42.3 41L3.8 445.8c-2.9 8.7-1.9 18.2 2.5 26L161.7 316.4c-1.1-4-1.6-8.1-1.6-12.4 0-26.5 21.5-48 48-48s48 21.5 48 48-21.5 48-48 48c-4.3 0-8.5-.6-12.4-1.6L40.3 505.7c7.8 4.4 17.2 5.4 26 2.5l264.3-88.6c19.7-6.6 35-22.4 41-42.3l43.2-144.1 .1-.5-135.5-135.5z" fill="%23FFFFFF"/></svg>')
      0 24,
    auto;
}

/* ---------- Request CTA (request-local; per-page leaf 3.1 will migrate
   to .button shared primitive). The teal-700 → teal-900 gradient gives
   white-on-dark contrast that holds in both light and dark modes. ---------- */

.form-button-next {
  background-image: linear-gradient(92.88deg, var(--cm-teal-700) 0%, var(--cm-teal-900) 80%);
  border-radius: var(--cm-radius-lg);
  border-style: none;
  box-sizing: border-box;
  color: var(--cm-text-on-dark);
  cursor: pointer;
  flex-shrink: 0;
  font-size: var(--cm-text-base);
  font-weight: var(--cm-fw-regular);
  height: 35px;
  padding: 0 1.6rem;
  text-align: center;
  text-shadow: var(--cm-teal-700) 0 3px 8px;
  transition: all 0.5s;
  user-select: none;
}

.form-button-next:hover {
  box-shadow: var(--cm-shadow-md);
  transition-duration: 0.1s;
}

.form-button-next:focus-visible {
  outline: none;
  box-shadow: var(--cm-focus-ring);
}

@media (min-width: 768px) {
  .form-button-next {
    padding: 0 2.6rem;
  }
}

/* Request override: shared .container is full-width; request flow
   uses tighter inset margins around the wizard step indicator. */
.container {
  transform: translate(0%, 0%);
  margin: 20px;
}

/* ---------- Wizard step indicator (request-local) ---------- */

/* .steps was a <div> in the legacy markup. Per-page leaf 3.2 promoted it to
   <ol> with aria-label="Wizard progress" so assistive tech can announce the
   wizard as a numbered progress list. Reset list styles so the ol renders
   exactly like the legacy flex row of circles. */
.steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 500px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: var(--cm-bg-surface);
  border: 2px solid var(--cm-text-heading);
  border-radius: 50%;
  transition: background 1s;
}

.step i {
  font-size: 24pt;
}

.step.selected {
  border: 2px solid var(--cm-teal-700);
}

.step.selected i {
  color: var(--cm-teal-700);
}

.step.completed {
  border: 2px solid var(--cm-bg-muted);
  background: var(--cm-teal-700);
  color: var(--cm-text-on-dark);
  transition: background 1s;
}

.progress {
  position: absolute;
  width: 100%;
  height: 50%;
  border-bottom: 2px solid var(--cm-border-strong);
  z-index: -1;
}

.percent {
  position: absolute;
  width: 0;
  height: 100%;
  border-bottom: 2px solid var(--cm-teal-700);
  z-index: 1;
  transition: width 1s;
}

/* ---------- Customer upload card (request-local) ---------- */

.upload-form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 700px;
  padding: 50px;
  background-color: var(--cm-bg-surface);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-md);
  box-sizing: border-box;
}

.upload-form-container h1 {
  margin: 0px;
  padding: 0px;
}

.upload-form-container select {
  height: 30px;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 10px;
  border: 0px var(--cm-text-heading);
  font-size: 16px;
  font-weight: var(--cm-fw-regular);
  background: var(--cm-bg-body);
  box-shadow: var(--cm-shadow-sm);
  color: var(--cm-text-body);
  transition: all 0.15s ease;
  text-align: left;
}

.upload-form-container .file-block {
  width: 100%;
  max-width: 100%;
  color: var(--cm-text-body);
  padding: 5px;
  background: var(--cm-bg-surface);
  border-radius: var(--cm-radius-lg);
  border: 1px solid var(--cm-text-muted);
  cursor: pointer;
}

.upload-form-container p {
  text-align: center;
}

.upload-form-container h3 {
  text-align: center;
  font-weight: var(--cm-fw-bold);
  font-size: 12pt;
}

.drop-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 150px;
  padding: 20px;
  border-radius: var(--cm-radius-lg);
  border: 2px dashed var(--cm-text-muted);
  color: var(--cm-text-body);
  cursor: pointer;
  transition:
    background 0.2s ease-in-out,
    border 0.2s ease-in-out;
}

.drop-container:hover {
  background: var(--cm-bg-muted);
  border-color: var(--cm-text-heading);
}

.drop-container:hover .drop-title {
  color: var(--cm-text-heading);
}

.drop-title {
  color: var(--cm-text-body);
  font-size: 20px;
  font-weight: var(--cm-fw-regular);
  text-align: center;
  transition: color 0.2s ease-in-out;
}

.upload-form-footer {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
}

/* ---------- Form-container header (request-local) ----------
   Previously rendered with a 15px teal inset shadow on the left edge
   ("vertical accent bar"). Dropped to align with portal/api which use
   plain card chrome. h1/h2 weight dialed from semibold (600) → medium
   (500) so Inter doesn't read as institutional on a welcome surface. */

.form-container-div .header-div,
.patient-form-container-div .header-div {
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  display: flex;
  width: 100%;
}

.form-container-div h1,
.patient-form-container-div h1,
.chooser-page-heading h1 {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  /* Page-title h1 keeps semibold so it dominates the surface visually;
     h2 section headers use medium below for the contrast. */
  font-weight: var(--cm-fw-semibold);
}

/* Bottom margin on h1 replaces the previous padding-top/bottom: 30px on
   the heading itself, so card top padding (32px on .form-container-div)
   handles vertical inset and the heading just needs spacing to the next
   section. */
.form-container-div h1,
.chooser-page-heading {
  margin-bottom: 24px;
}

/* h2 = section start (inside a single-card layout) or card title (inside
   a chooser-card). Medium weight (lighter than h1) plus a thin bottom
   border across the card width reads as "section header" without the
   heaviness of an <hr>. */
.form-container-div h2,
.chooser-card h2 {
  font-weight: var(--cm-fw-medium);
  text-align: center;
  width: 100%;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cm-border);
}

/* ---------- Chooser landing 2-col grid (Phase 3.1).
   Replaces the legacy single .form-container-div with two side-by-side
   .chooser-card surfaces. The user is either a patient OR a third-party
   requestor — side-by-side reads as a parallel choice rather than a
   sequence. Mobile collapses to a single column.

   Each card mirrors .form-container-div chrome (white surface, rounded,
   shadow, 32px 40px padding) and uses display:flex/column with
   .section-cta margin-top: auto so CTAs align at the bottom regardless
   of which paragraph is taller. ---------- */
.chooser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  /* Was 1000px — tightened so the two cards read as a deliberate pair
     rather than a sparse split across a wide row. Aligns with the
     containing .chooser-main-container max-width. */
  max-width: 880px;
  align-items: stretch;
}

.chooser-card {
  display: flex;
  flex-direction: column;
  background-color: var(--cm-bg-surface);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-md);
  padding: 32px 40px;
  box-sizing: border-box;
}

.chooser-card .section-cta {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: 12px;
}

/* Facility-context line under the chooser h1 — populated by chooser.js
   with the validated facility name so the page confirms "you're in the
   right place" before the user commits to a path. The wrapper <p> is
   default display:none and shown by JS; this sizes the visible state.
   Sized one notch up from body (text-lg) so the facility name carries
   real weight as the page's anchor — it's the answer to "where am I?". */
.chooser-facility-context {
  margin: 6px 0 0;
  text-align: center;
  font-size: var(--cm-text-lg);
  color: var(--cm-text-muted);
  line-height: var(--cm-lh-snug);
}

.chooser-facility-name {
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
}

/* Card audience icon — circular badge above the h2 that gives an instant
   visual cue (person vs briefcase) for "patient" vs "third-party". The
   two cards use different palette stops so the choice is obvious before
   the user reads either label. Patient = teal soft (the brand interactive
   color), Third-Party = blue soft (cooler, more business-tonal). */
.chooser-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--cm-space-4);
  border-radius: 50%;
  font-size: 24px;
}

.chooser-card--patient .chooser-card__icon {
  background-color: var(--cm-teal-100);
  color: var(--cm-teal-700);
}

.chooser-card--third-party .chooser-card__icon {
  background-color: var(--cm-blue-100);
  color: var(--cm-navy);
}

@media (max-width: 700px) {
  .chooser-grid {
    grid-template-columns: 1fr;
    /* Horizontal breathing room on mobile so the cards (and h1 above)
       don't sit flush to the viewport edges. */
    padding: 0 20px;
    box-sizing: border-box;
  }

  .chooser-page-heading {
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* Tighter card padding on phone screens — 40px L/R was eating most of
     the narrow card width. */
  .chooser-card {
    padding: 28px 24px;
  }

  /* Slightly smaller icon badge on phone so the card feels balanced
     against the reduced card padding. */
  .chooser-card__icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

.form-container-div h3 {
  padding-left: 50px;
  padding-right: 50px;
  margin-top: 0px;
  font-weight: var(--cm-fw-regular);
}

/* ---------- Chooser section primitives (per-page leaf 3.1).
     Replaces the `<h3 style="text-align:center">` prose blocks (now `<p>`)
     and the `<br><br>` spacing primitives used to push the CTA away from
     the heading. .section-intro mirrors the legacy h3 inset (50px) and
     drops the bold weight; .section-cta gives the button room to breathe
     and centers it inside the section without a wrapping flex on the
     containing form-container-div. ---------- */

.form-container-div section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.form-container-div .section-intro {
  /* Cap line length for readability instead of fixed L/R padding —
     paragraph centers within section and reads at ~50ch. */
  max-width: 50ch;
  margin: 0 auto 16px;
  text-align: center;
}

.form-container-div .section-cta {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  margin-bottom: 8px;
}

/* ---------- 404 status indicator (request-local; per-page leaf 3.4).
     Uses --cm-text-heading for full contrast — the warning amber token
     (--cm-warning-500) is too light against white surface (2.14:1, fails
     WCAG 1.4.3 large-text 3:1). The "404" is decorative typographic
     emphasis with aria-hidden; semantic meaning is carried by the
     <h1>Page Not Found</h1>. ---------- */

.error-code {
  color: var(--cm-text-heading);
  font-size: 4rem;
  font-weight: var(--cm-fw-bold);
  line-height: 1;
  margin: 8px 0 16px;
  text-align: center;
}

/* ---------- Modal error overlay (request-local) ---------- */

#errorMessageDiv {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 250px);
  width: 500px;
  height: 200px;
  background-color: var(--cm-bg-surface);
  border-radius: var(--cm-radius-lg);
  padding: 20px;
  align-items: center;
  box-shadow: var(--cm-shadow-lg);
  box-sizing: border-box;
  padding-bottom: 40px;
  z-index: 100000;
}

#errorMessageInnerDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.errorMessageClose {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 20pt;
  color: var(--cm-text-muted);
  cursor: pointer;
}

/* ---------- Toast banners (request-local override of shared .error/
     .warning/.info/.success: request flow positions them as absolute
     centered overlays rather than the shared inline-flex layout). The
     .fail name is request-local; shared uses .error. ---------- */

.fail {
  display: none;
  padding: 20px;
  background-color: var(--cm-bg-danger);
  color: var(--cm-text-on-dark);
  margin-bottom: 15px;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: var(--cm-radius-lg);
  width: 500px;
  z-index: 1000000;
  margin-top: 25px;
}

.warning {
  display: none;
  padding: 20px;
  background-color: var(--cm-bg-warning);
  color: var(--cm-text-on-dark);
  margin-bottom: 15px;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: var(--cm-radius-lg);
  width: 500px;
  z-index: 1000000;
  margin-top: 25px;
}

.info {
  display: none;
  padding: 20px;
  background-color: var(--cm-blue-500);
  color: var(--cm-text-on-dark);
  margin-bottom: 15px;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: var(--cm-radius-lg);
  width: 500px;
  z-index: 1000000;
  margin-top: 25px;
}

.success {
  display: none;
  padding: 20px;
  background-color: var(--cm-teal-700);
  color: var(--cm-text-on-dark);
  margin-bottom: 15px;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: var(--cm-radius-lg);
  width: 500px;
  z-index: 1000000;
  margin-top: 25px;
}

/* ---------- Request-local div table (the shared .div-table primitive
     does not exist; this is the only definition). Tokenize colors. ---------- */

.div-table {
  display: table;
  width: auto;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

.div-table-header {
  display: table-row;
  width: auto;
  color: var(--cm-text-on-dark);
  background-color: var(--cm-gray-900);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.div-table-row {
  display: table-row;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.div-table-cell {
  display: table-cell;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

/* ---------- a11y helpers ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Patient Authorization wizard (Phase 3.2 overhaul)

   Replaces the legacy .patient-form-container-div + .form-row /
   .form-button-next vocabulary with a card-based, label-above
   layout matching the api side. Markup hooks the JS depends on
   are preserved: <li class="step" id="0..4">, .percent fill,
   .selected / .completed modifiers.
   ============================================================ */

/* Page heading sits above the wizard card, left-aligned to the
   card's outer edge. The visible h1 replaces the previous
   sr-only h1; semantic outline now flows h1 → h2 (per step). */
.page-heading {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 20px;
  padding: 0 8px;
  box-sizing: border-box;
}

.page-heading h1 {
  margin: 0 0 6px;
  /* Match portal landing's --cm-text-3xl (30px) on welcome/landing surfaces
     so the h1 reads as "page heading" not "section heading". Wizard
     surfaces (authorization step cards, upload form) use this same size
     since the page-heading sits above the card. (Cross-site alignment.) */
  font-size: var(--cm-text-3xl);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
  text-align: left;
}

.page-heading-meta {
  margin: 0;
  font-size: var(--cm-text-sm);
  color: var(--cm-text-muted);
  text-align: left;
}

/* ---------- Wizard stepper ----------
   Compact horizontal pill rail. Numeric markers, label below.
   Connector line runs behind the markers. JS toggles
   .selected (current) and .completed (passed) on each <li>. */

.wizard-stepper {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 24px;
  padding: 0 8px;
  box-sizing: border-box;
}

.wizard-track {
  position: absolute;
  top: 17px; /* aligns with vertical center of 34px markers */
  left: 24px;
  right: 24px;
  height: 2px;
  background: var(--cm-border);
  border-radius: 2px;
  z-index: 0;
}

.wizard-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--cm-teal-700);
  /* Clear the legacy `.percent` rule's border-bottom (line 504) which
     would draw a thin line along the fill bottom when both classes
     are present on the same element. */
  border: 0;
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Override the legacy `.steps` rule (line 451: width:500px,
   space-between flex). Wizard-scoped version stretches full-width
   and uses space-between to anchor first/last markers to the
   track ends so the fill line aligns. */
.wizard-stepper .steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  z-index: 1;
}

/* Override the legacy `.step` rule (line 461: 70px circle).
   New marker is a smaller 34px badge with label below — number
   visible by default, checkmark swapped in for completed steps. */
.wizard-stepper .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  flex: 0 0 auto;
}

.step-marker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cm-bg-surface);
  border: 2px solid var(--cm-border);
  color: var(--cm-text-muted);
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-semibold);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.wizard-stepper .step-num {
  display: inline;
}

/* Specificity bumped: FontAwesome's `.fa-solid { display: inline-block }`
   loads after this stylesheet, so a single-class `.step-check` rule loses
   the cascade tie-break. Scoping under `.wizard-stepper .step` makes this
   rule (0,3,0) win regardless of source order. Same fix below for the
   completed/selected variants. */
.wizard-stepper .step .step-check {
  display: none;
  font-size: 14px;
}

.step-label {
  font-size: 12px;
  font-weight: var(--cm-fw-medium);
  color: var(--cm-text-muted);
  text-align: center;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Current step: teal ring (selected accent), heading-colored number so
   the marker text reads at the same intensity as its label below. The
   previous color: var(--cm-teal-700) made the digit noticeably darker
   than the heading-color label, which read as low-contrast. */
.wizard-stepper .step.selected .step-marker {
  border-color: var(--cm-teal-700);
  color: var(--cm-text-heading);
  background: var(--cm-bg-surface);
}

.wizard-stepper .step.selected .step-label {
  color: var(--cm-text-heading);
  font-weight: var(--cm-fw-semibold);
}

/* Completed: filled teal, white check (number hidden). Hardcode white
   instead of var(--cm-text-on-dark) — the marker's background is
   always the teal-700 fill (theme-independent), so the contrast color
   should also be theme-independent white. The token resolves to white
   in both modes today, but a future theme tweak shouldn't accidentally
   flip the check icon to dark on the dark teal fill. */
.wizard-stepper .step.completed .step-marker {
  background: var(--cm-teal-700);
  border-color: var(--cm-teal-700);
  color: #ffffff;
}
.wizard-stepper .step.completed .step-marker > i,
.wizard-stepper .step.completed .step-num {
  color: inherit;
}

.wizard-stepper .step.completed .step-num {
  display: none;
}

.wizard-stepper .step.completed .step-check {
  display: inline-block;
}

.wizard-stepper .step.completed .step-label {
  color: var(--cm-text-body);
}

/* Mobile: hide the labels (markers + numbers + check still meaningful).
   Step indicator collapses to just the marker pill row. */
@media (max-width: 600px) {
  .step-label {
    display: none;
  }

  .wizard-track {
    top: 17px;
    left: 17px;
    right: 17px;
  }
}

/* ---------- Wizard card ----------
   White surface, rounded, soft shadow. Replaces the legacy
   .patient-form-container-div. Generous padding, header at top
   with title + subtitle, footer with right-aligned button group.

   The legacy `.patient-form-container-div` rule is left in place
   in this stylesheet for any sibling page still referencing it,
   but the authorization markup no longer uses that class. */
.wizard-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 40px;
  box-sizing: border-box;
  background-color: var(--cm-bg-surface);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-md);
}

.wizard-card-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cm-border);
}

.wizard-card-header h2 {
  margin: 0 0 4px;
  font-size: var(--cm-text-lg);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
  text-align: left;
  /* Override legacy `.patient-form-container-div h2` style if it leaks
     in via a stale page; this rule is more specific. */
  border-bottom: 0;
  padding-bottom: 0;
}

.wizard-card-subtitle {
  margin: 0;
  font-size: var(--cm-text-sm);
  color: var(--cm-text-muted);
  text-align: left;
  /* Override the request-local `p { font-size: 12pt; text-align: center }`
     rule (line 222) — wizard prose is left-aligned. */
}

.wizard-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cm-border);
  gap: 12px;
}

/* When only the Next button is rendered (step 1), the spacer fills
   the left side so Next sits on the right. */
.wizard-footer-spacer {
  flex: 1;
}

.wizard-card-footer .button {
  min-width: 110px;
}

.wizard-card-footer .button i {
  margin: 0 4px;
}

/* ---------- Wizard form layout ---------- */

.wizard-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Section grouping inside a step (e.g. "Send records to" /
   "Delivery" / "Contact" inside step 2). Legend acts as a small
   section header above grouped fields. */
.wizard-section {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-section-legend {
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  padding: 0;
  text-align: left;
}

.wizard-section-help {
  font-size: var(--cm-text-sm);
  color: var(--cm-text-muted);
  margin: 0 0 4px;
  text-align: left;
  /* Override the `p { text-align: center; font-size: 12pt }` from line 222. */
}

/* ---------- Field primitives ----------
   Two-column grid that auto-collapses to one column under 600px.
   .field-full spans both columns. */

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

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field-full {
  grid-column: 1 / -1;
}

.field > label {
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-medium);
  color: var(--cm-text-body);
  text-align: left;
  white-space: normal;
}

/* Bordered input vocabulary — replaces the puffy shadow-only
   inputs from `.form-row input[type='text']` (line 319). 1px
   border, medium radius, focus ring on keyboard focus. */
.field input[type='text'],
.field input[type='date'],
.field input[type='email'],
.field input[type='tel'],
.field input[type='number'],
.field select,
.field textarea {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: var(--cm-text-base);
  color: var(--cm-text-body);
  background: var(--cm-bg-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  box-sizing: border-box;
  box-shadow: none;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.field textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--cm-border-strong);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--cm-teal-700);
  box-shadow: var(--cm-focus-ring);
}

/* Checkbox row (label-after-input pattern) inline with the rest of
   the form. Same-as-patient toggle in step 2. */
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cm-text-sm);
  color: var(--cm-text-body);
  cursor: pointer;
}

.checkbox-row input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--cm-teal-700);
}

/* ---------- Record selector card-pair (step 3) ----------
   Replaces the radio + tooltip-icon pattern. The whole card is
   the click target; the hidden radio retains the original ID +
   name so authorization.js still reads .checked correctly. */

.record-card-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0;
}

.record-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--cm-bg-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  cursor: pointer;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}

.record-card:hover {
  border-color: var(--cm-border-strong);
  background: var(--cm-bg-muted);
}

.record-card input[type='radio'] {
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--cm-teal-700);
  cursor: pointer;
}

.record-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.record-card-title {
  font-size: var(--cm-text-base);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
}

.record-card-desc {
  font-size: var(--cm-text-sm);
  color: var(--cm-text-muted);
  line-height: var(--cm-lh-relaxed, 1.5);
  text-align: left;
}

.record-card:has(input[type='radio']:checked) {
  border-color: var(--cm-teal-700);
  background: var(--cm-bg-surface);
  box-shadow: 0 0 0 1px var(--cm-teal-700) inset;
}

.specific-records-detail {
  padding: 16px;
  background: var(--cm-bg-muted);
  border-radius: var(--cm-radius-md);
  margin-top: 4px;
}

/* ---------- Consent block (step 4) ----------
   Left-aligned, capped line length, denser type. Replaces the
   inline-styled <p style="inline-size: 600px; font-size: 10pt"> bricks. */

.consent-block {
  background: var(--cm-bg-muted);
  border-radius: var(--cm-radius-md);
  padding: 16px 20px;
  margin: 0 0 20px;
  max-width: 65ch;
}

.consent-lede {
  margin: 0 0 8px;
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
  text-align: left;
}

.consent-list {
  margin: 0 0 12px;
  padding: 0 0 0 20px;
}

.consent-list li {
  font-size: var(--cm-text-sm);
  color: var(--cm-text-body);
  line-height: 1.5;
  margin-bottom: 4px;
  text-align: left;
}

.consent-note {
  margin: 0;
  font-size: var(--cm-text-xs);
  color: var(--cm-text-muted);
  line-height: 1.5;
  text-align: left;
}

/* ---------- Signature pad (step 4) ---------- */

.signature-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.signature-instructions {
  margin: 0;
  font-size: var(--cm-text-sm);
  color: var(--cm-text-muted);
  text-align: left;
  align-self: flex-start;
}

.wizard-card .signature-canvas {
  width: 100%;
  max-width: 600px;
  height: 200px;
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  background: var(--cm-bg-surface);
  margin: 0;
  /* Keep the cursor SVG from the legacy `.signature-canvas` rule (line 381)
     — it cascades from the wider selector above. */
}

.signature-preview {
  max-width: 600px;
  width: 100%;
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
}

.signature-actions {
  display: flex;
  gap: 12px;
  align-self: flex-end;
}

/* ---------- Upload drop zones (step 5) ---------- */

.required-tag,
.optional-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: var(--cm-text-xs);
  font-weight: var(--cm-fw-medium);
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--cm-radius-sm, 4px);
  vertical-align: middle;
}

.required-tag {
  background: var(--cm-bg-danger);
  color: var(--cm-text-on-dark);
}

.optional-tag {
  background: var(--cm-bg-muted);
  color: var(--cm-text-muted);
}

/* Override the legacy `.drop-container` dashed style (line 566)
   when used inside the new wizard-card. Matches the bordered-input
   vocabulary and adds an icon row above the prompt. */
.wizard-card .drop-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 140px;
  padding: 16px;
  background: var(--cm-bg-surface);
  border: 1px dashed var(--cm-border-strong);
  border-radius: var(--cm-radius-md);
  color: var(--cm-text-body);
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease;
}

.wizard-card .drop-container:hover {
  background: var(--cm-bg-muted);
  border-color: var(--cm-teal-700);
}

.drop-icon {
  font-size: 28px;
  color: var(--cm-text-muted);
}

.wizard-card .drop-title {
  font-size: var(--cm-text-base);
  font-weight: var(--cm-fw-medium);
  color: var(--cm-text-body);
  text-align: center;
}

.drop-hint {
  font-size: var(--cm-text-xs);
  color: var(--cm-text-muted);
}

.wizard-card .file-block {
  /* Hide the native input — the surrounding label IS the click target. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* File count caption below the drop zone (customer/upload). aria-live=polite
   so screen readers hear the count change as the user adds files. */
.file-count {
  margin: 8px 0 0;
  font-size: var(--cm-text-xs);
  color: var(--cm-text-muted);
  text-align: center;
}

/* File list / thumbnails (customer/upload).
   Empty state shows a centered "No files selected" line; populated state
   replaces that with one .file-item per selected file: PDF first-page
   thumbnail (rendered via pdfjs), filename + size, remove button. */

.file-list {
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-list-empty {
  margin: 0;
  font-size: var(--cm-text-xs);
  color: var(--cm-text-muted);
  text-align: center;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--cm-bg-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
}

/* Thumbnail tile: 64px square that displays the PDF first page.
   The fallback fa-file-pdf icon sits centered behind the canvas so a
   pdfjs render failure (or pre-render flicker) shows the icon instead
   of an empty box. */
.file-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 80px;
  background: var(--cm-bg-muted);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.file-thumb i {
  position: absolute;
  font-size: 28px;
  color: var(--cm-text-muted);
}

.file-thumb-canvas {
  position: relative;
  z-index: 1;
  display: block;
  /* width/height set by JS in CSS pixels; this just stops the canvas
     from blowing the tile open before pdfjs reports back. */
  max-width: 100%;
  max-height: 100%;
}

/* Image thumbnails (PNG/JPG) layer over the fallback icon the same way
   the PDF canvas does. object-fit:cover crops to fill the 64×80 tile
   regardless of source aspect ratio. */
.file-thumb-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.file-name {
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-medium);
  color: var(--cm-text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-size {
  font-size: var(--cm-text-xs);
  color: var(--cm-text-muted);
}

.file-remove {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--cm-radius-sm);
  color: var(--cm-text-muted);
  cursor: pointer;
  font-size: 16px;
  transition:
    background 120ms ease,
    color 120ms ease;
}

.file-remove:hover {
  background: var(--cm-bg-muted);
  color: var(--cm-text-heading);
}

.file-remove:focus-visible {
  outline: none;
  box-shadow: var(--cm-focus-ring);
}

/* ---------- Confirmation page (patient/confirmation) ----------
   Single-card success screen: large check icon, title, lede, "what's next"
   bullets, thank-you outro. Uses .wizard-card chrome plus its own
   modifier .confirmation-card to center contents (the wizard variant is
   left-aligned to match form layouts). */

.wizard-card.confirmation-card {
  text-align: center;
  align-items: center;
}

.confirmation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--cm-bg-success, var(--cm-teal-700));
  color: var(--cm-text-on-dark);
  margin: 8px 0 16px;
}

/* Specificity bumped past stylesheetv3.css's `* { color: var(--text-color) }`
   so the check renders white on the teal disk. */
.wizard-card .confirmation-icon i {
  font-size: 40px;
  color: var(--cm-text-on-dark);
}

.confirmation-title {
  margin: 0 0 8px;
  /* Welcome/success surface — match the page-heading h1 size on the
     other request landing surfaces (--cm-text-3xl = 30px). */
  font-size: var(--cm-text-3xl);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
  text-align: center;
}

.confirmation-lede {
  margin: 0 0 24px;
  font-size: var(--cm-text-base);
  color: var(--cm-text-body);
  text-align: center;
  max-width: 50ch;
}

.confirmation-next {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.confirmation-next li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--cm-text-sm);
  color: var(--cm-text-body);
  line-height: 1.5;
}

.confirmation-next li i {
  flex: 0 0 auto;
  width: 24px;
  color: var(--cm-teal-700);
  font-size: 16px;
  margin-top: 2px;
  text-align: center;
}

.confirmation-thanks {
  margin: 0;
  font-size: var(--cm-text-sm);
  color: var(--cm-text-muted);
  text-align: center;
}

/* Optional CTA below the thank-you line (used by /customer/confirmation
   to offer "Submit another request"). Inherits .button chrome; this just
   adds top spacing and locks the link to button-style padding/height. */
.confirmation-cta {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Override the generic anchor underline so this reads as a button. */
  text-decoration: none;
}

/* ---------- Responsive collapse ---------- */

@media (max-width: 600px) {
  .wizard-card {
    padding: 24px 20px;
    border-radius: var(--cm-radius-md);
    /* Inset from viewport edges on phones — base rule sets width:100%
       which would otherwise let the card go flush to the viewport. */
    margin-left: 16px;
    margin-right: 16px;
    width: calc(100% - 32px);
  }

  .page-heading {
    padding: 0 16px;
  }

  .wizard-stepper {
    padding: 0 16px;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .record-card-group {
    grid-template-columns: 1fr;
  }

  .wizard-card-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .wizard-card-footer .button {
    width: 100%;
  }

  .wizard-footer-spacer {
    display: none;
  }
}