.contract-form {
  inline-size: 100%;
  /* HMS-637/1048: the room-type matrix needs the extra width to render
     without clipping — 80rem (1280px); inline-size caps it to the admin
     content column at narrower viewports. */
  max-width: 80rem;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

/* ── Header ─────────────────────────────────────── */

.contract-form__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wa-space-xs);
  margin-block-end: var(--wa-space-l);
}

.contract-form__title {
  margin: 0;
  font-family: var(--wa-font-family-heading);
  font-weight: var(--wa-font-weight-heading);
  font-size: var(--wa-font-size-2xl);
}

.contract-form__subtitle {
  margin: 0;
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

/* ── Step indicator ─────────────────────────────── */

/* HMS-1515 — Figma stepper: numbered circles, green check circles for done
   steps, filled circle for the current step, connector lines between steps.
   Mirrors the setup wizard's stepper pattern. */
.contract-form__steps {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wa-space-l) 0;
}

.contract-form__step {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

.contract-form__step:not(:last-child) {
  flex: 1;
}

/* HMS-1528 — the step num+label sit inside a real button; inherit the li's
   flex alignment and color so --current/--done styling keeps working, and
   give pointer + a focus ring. */
.contract-form__step-btn {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.contract-form__step-btn:focus-visible {
  outline: 2px solid var(--wa-color-brand-fill-loud);
  outline-offset: 2px;
  border-radius: var(--wa-border-radius-s);
}

.contract-form__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wa-color-neutral-90);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
  flex: none;
  margin-inline-end: var(--wa-space-s);
}

.contract-form__step-check {
  display: none;
}

.contract-form__step--done .contract-form__step-check {
  display: inline;
}

.contract-form__step--done .contract-form__step-n {
  display: none;
}

.contract-form__step--current {
  color: var(--wa-color-text-normal);
  font-weight: var(--wa-font-weight-heading);
}

.contract-form__step--current .contract-form__step-num {
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

.contract-form__step--done {
  color: var(--wa-color-success-60);
  font-weight: var(--wa-font-weight-heading);
}

.contract-form__step--done .contract-form__step-num {
  background: var(--wa-color-success-fill-loud, #16a34a);
  color: #fff;
}

.contract-form__step-conn {
  flex: 1;
  height: 2px;
  min-width: 16px;
  margin: 0 var(--wa-space-s);
  background: var(--wa-color-neutral-border-normal);
  border-radius: 1px;
}

.contract-form__step--done .contract-form__step-conn {
  background: var(--wa-color-success-fill-loud, #16a34a);
}

@media (max-width: 40rem) {
  .contract-form__step-label {
    display: none;
  }
}

/* ── Groups ─────────────────────────────────────── */

.contract-form__group {
  padding-block-start: var(--wa-space-l);
  /* HMS-1540 — bottom space so the NEXT group's top-border divider doesn't
     sit flush against the last field (was: last reminder checkbox ~0px from
     the divider). Symmetric with padding-block-start for even rhythm. */
  padding-block-end: var(--wa-space-l);
  border-block-start: 1px solid var(--wa-color-surface-border);
}

.contract-form__heading {
  margin: 0 0 var(--wa-space-m) 0;
  font-size: var(--wa-font-size-l);
}

/* ── Field grid ─────────────────────────────────── */

.contract-form__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--wa-space-m);
}

/* The grid's display beats the UA [hidden] rule — the room-block form's
   "+ New category…" fields would stay visible without this guard (same
   failure mode as wa-input[hidden] below). */
.contract-form__fields[hidden] {
  display: none;
}

/* ── Error panel ────────────────────────────────── */

/* HMS-640 — a 422 re-render is invisible when the messages read as a neutral
   note: danger surface + alert role so the failure reads as an error. */
.contract-form__errors {
  list-style: none;
  padding: var(--wa-space-m);
  margin: 0 0 var(--wa-space-l) 0;
  border: 1px solid var(--wa-color-danger-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}

.contract-form__errors li {
  padding-block: var(--wa-space-2xs);
  font-size: var(--wa-font-size-s);
}

.contract-form__errors li::before {
  content: "\f06a";
  font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", sans-serif;
  font-weight: 900;
  margin-right: var(--wa-space-xs);
}

/* ── Actions ────────────────────────────────────── */

.contract-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-s);
  margin-block-start: var(--wa-space-l);
}

/* ── Empty state ────────────────────────────────── */

.contract-form__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--wa-space-xs);
  padding: var(--wa-space-xl);
  margin-block-start: var(--wa-space-l);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-l);
}

.contract-form__empty-title {
  margin: 0;
  font-size: var(--wa-font-size-m);
}

.contract-form__empty-hint {
  margin: 0;
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

/* HMS-1508 — the empty state doubles as the step-2 room-types placeholder;
   the flex display on .contract-form__empty would beat the [hidden]
   attribute without this guard (same failure as .contract-form__fields). */
.contract-form__empty[hidden] {
  display: none;
}

.contract-form__empty-icon {
  font-size: 1.75rem;
  color: var(--wa-color-text-quiet);
}

.contract-form__empty wa-button {
  margin-block-start: var(--wa-space-s);
}

/* ── Wizard panels ──────────────────────────────── */

.contract-form__panel {
  display: block;
}

.contract-form__panel[hidden] {
  display: none;
}

/* ── Field grid (wizard variant) ────────────────── */

.contract-form__fields--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--wa-space-m);
}

/* ── Group header ───────────────────────────────── */

.contract-form__group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

/* wa-button's :host display beats the UA [hidden] rule — same failure as
   .contract-form__nav wa-button[hidden] below; the header's Add Room Type
   CTA must actually disappear while the step-2 empty state is up. */
.contract-form__group-header wa-button[hidden] {
  display: none;
}

/* ── Rate matrix ────────────────────────────────── */

.contract-form__matrix-wrap {
  overflow-x: auto;
  width: 100%;
  max-height: 60vh;
  overflow-y: auto;
  /* Right-edge shadow hints the table scrolls — same scroll-inside-the-wrap
     contract as .admin-table-wrap / .hotel-access__table-wrap. */
  box-shadow: inset -10px 0 10px -10px var(--wa-color-neutral-border-quiet);
}

.contract-form__matrix,
.contract-form__policy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.contract-form__matrix th,
.contract-form__matrix td,
.contract-form__policy-table th,
.contract-form__policy-table td {
  padding: var(--wa-space-xs);
  text-align: left;
  border-bottom: 1px solid var(--wa-color-neutral-border-normal);
}

/* HMS-637: keep matrix data cells on one line (the policy table may keep
   wrapping) and give numeric input cells a compact footprint. Headers may
   wrap to two lines — "Attendee Pays (Weekend)" on one line alone cost
   ~170px of matrix width and pushed Remove past the wrap at 1024. */
.contract-form__matrix td {
  white-space: nowrap;
}

.contract-form__matrix th {
  padding: var(--wa-space-2xs);
}

/* HMS-861: with many room types the matrix scrolls inside its wrap; pin the
   header so column labels stay visible. The opaque background keeps row text
   from bleeding through. */
.contract-form__matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--wa-color-surface-default);
}

.contract-form__matrix td {
  padding: var(--wa-space-2xs) var(--wa-space-xs);
  vertical-align: middle;
}

/* HMS-1527 — a room-type row is one line of controls: tighter vertical
   rhythm so several rows fit the wrap without scrolling. Headers keep
   their two-line room via .contract-form__th-sub. */
.contract-form__matrix .contract-form__matrix-row td {
  padding-top: var(--wa-space-3xs, 0.25rem);
  padding-bottom: var(--wa-space-3xs, 0.25rem);
}

/* wa-* hosts size themselves by `size`; the s-size controls still render
   ~34px tall inside the shadow. Dropping to a smaller effective footprint
   is done through line-height + the cells' padding above rather than
   restyling the shadow DOM, which the component's parts API doesn't
   expose for these parts. */
.contract-form__matrix .contract-form__matrix-row wa-input,
.contract-form__matrix .contract-form__matrix-row wa-select {
  line-height: 1.2;
}

/* HMS-861: each matrix row + its (possibly hidden) date-grid row is one room
   type — draw the divider above the block, not inside it. */
.contract-form__matrix .contract-form__matrix-row td {
  border-bottom: none;
  border-top: 2px solid var(--wa-color-neutral-border-normal);
}

.contract-form__matrix .contract-form__matrix-row wa-select {
  min-width: 6.5rem;
}

/* Room names and "Main block" clip inside a 6.5rem host — these two columns
   get a wider floor (the wrap scrolls horizontally, so the width is safe).
   HMS-1048 QA re-test: "Convention King" still clipped inside the 9rem
   floor — 12rem leaves ~8rem of display text. */
.contract-form__matrix .contract-form__matrix-row wa-select[data-contract-wizard-target='rowRoomType'] {
  min-width: 12rem;
}

/* HMS-1526: "Main block" is read-only text now — quiet like the computed
   cells, not a control. */
.contract-form__alloc-text {
  display: inline-block;
  padding: 0 var(--wa-space-2xs);
  color: var(--wa-color-text-quiet);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* wa-input's host defaults to ~196px — four of them alone overflowed the
   matrix past its wrap. Number cells need ~88px: the outlined host spends
   ~30px on padding/adornments, leaving ~58px — at 4rem a rate like 200.00
   clipped to "20". The per-date sub-row's inputs are excluded so they keep
   filling their .contract-form__dategrid cells. */
.contract-form__matrix .contract-form__matrix-row wa-input {
  width: 5.5rem;
}

/* HMS-1141: the Weekend Rate placeholder shows the base rate ("1220.00"). */
.contract-form__matrix .contract-form__matrix-row wa-input[name$='rate_dollars]'] {
  width: 7rem;
}

.contract-form__matrix .contract-form__matrix-dates td {
  padding: var(--wa-space-s);
  background: var(--wa-color-neutral-fill-quiet);
}

.contract-form__dategrid {
  display: grid;
  /* HMS-1550 — fixed-size cells. The parent td spans every matrix column,
     so when entered values stretch the table past its wrap (nowrap totals,
     pays columns) 1fr tracks resized every per-date input. A fixed track
     keeps each cell one size no matter what the row above does. */
  grid-template-columns: repeat(auto-fit, 110px);
  gap: var(--wa-space-xs);
}

/* HMS-1527 — the per-date grid under a row was the tallest part of a
   room-type entry; slightly smaller cells keep the labels readable. */
.contract-form__dategrid wa-input {
  width: 100%;
}

.contract-form__pays,
.contract-form__rowtotal {
  font-weight: 600;
}

/* "120 room-nights" never wraps or clips in the Total column. */
.contract-form__rowtotal {
  white-space: nowrap;
}

/* Header help icons on Rooms / night and Total. */
.contract-form__matrix th .fa-circle-info {
  margin-inline-start: var(--wa-space-2xs);
  cursor: help;
  color: var(--wa-color-text-quiet);
}

.contract-form__matrix-hint {
  color: var(--wa-color-text-quiet);
  font-size: 0.875rem;
  margin-top: var(--wa-space-xs);
}

/* HMS-859: second line of the rate headers — the (Sun–Thu)/(Fri–Sat) tag. */
.contract-form__th-sub {
  white-space: nowrap;
  display: block;
  font-weight: 400;
  font-size: 0.75em;
  color: var(--wa-color-text-quiet);
}

/* ── Room type cards (HMS-1527) ─────────────────── */

/* Step 2's room matrix is now a stack of white cards — one per room type —
   instead of a wide table: Room Details / Rates & Pricing / Stay Details
   sections plus a Nightly Inventory section at the bottom of each card.
   The div keeps the matrixWrap target name (the wizard toggles it) but
   drops the inner scroll — the page scrolls. */
.contract-form__rooms {
  display: grid;
  gap: var(--wa-space-m);
}

/* display:grid would beat the UA [hidden] rule — the wizard hides the whole
   stack while the empty state is up (same trap as .contract-form__empty). */
.contract-form__rooms[hidden] {
  display: none;
}

.contract-form__room-card {
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
}

/* The 422 row-error slot: empty it collapses so clean cards keep their
   rhythm. */
.contract-form__room-card__errors:empty {
  display: none;
}

.contract-form__room-card__head {
  display: flex;
  justify-content: flex-end;
}

.contract-form__room-card__section {
  padding-block: var(--wa-space-s);
  border-block-start: 1px solid var(--wa-color-neutral-border-quiet);
}

.contract-form__room-card__section:first-of-type {
  border-block-start: none;
  padding-block-start: 0;
}

.contract-form__room-card__title {
  margin: 0 0 var(--wa-space-xs) 0;
  font-size: var(--wa-font-size-s);
  font-weight: 600;
  color: var(--wa-color-text-quiet);
}

.contract-form__room-card__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--wa-space-s) var(--wa-space-m);
  align-items: start;
}

.contract-form__room-card__field {
  display: grid;
  gap: var(--wa-space-3xs, 0.25rem);
  align-content: start;
}

/* Matches the wa-* field labels so the read-only cells (Inventory
   Allocation, the two Attendee Pays outputs, Total) line up with real
   controls. */
.contract-form__room-card__label {
  font-size: var(--wa-font-size-s);
  font-weight: 600;
  color: var(--wa-color-text-quiet);
}

.contract-form__room-card wa-input,
.contract-form__room-card wa-select {
  width: 100%;
}

/* Total reads as the card's headline number — "visible and easy to
   identify" per the ticket. */
.contract-form__room-card__field--total .contract-form__rowtotal {
  font-size: var(--wa-font-size-m);
  font-weight: 700;
}

/* The Total hint sits in the field's grid — drop the hint class's own
   top margin so the gap alone spaces it. */
.contract-form__room-card__total-hint {
  margin-top: 0;
}

/* The per-date cells stretch into even columns across the card — "date
   fields clearly aligned" — instead of the table's fixed 110px tracks
   (which stay for the rate editor's real table). */
.contract-form__room-card .contract-form__dategrid {
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}

/* A replayed row error marks the card edge — the full-row danger tint is
   the clutter HMS-1544's rework removed. The --qty-error class stays a JS
   state marker only: no card rule, the field outlines carry the flag. */
.contract-form__room-card.contract-form__matrix-row--error {
  border-color: var(--wa-color-danger-fill-loud, #dc2626);
}

/* ── Policies ───────────────────────────────────── */

.contract-form__policy-label {
  color: var(--wa-color-text-normal);
  font-size: 0.875rem;
}

.contract-form__policy-value {
  font-weight: 600;
  margin-left: var(--wa-space-xs);
}

/* ── Review ─────────────────────────────────────── */

.contract-form__review {
  display: grid;
  grid-template-columns: minmax(160px, auto) 1fr;
  gap: var(--wa-space-xs) var(--wa-space-m);
  margin: 0;
}

.contract-form__review dt {
  color: var(--wa-color-text-quiet);
}

.contract-form__review dd {
  margin: 0;
  font-weight: 500;
}

/* HMS-1142 — Review renders one card per room type: name, the fact pairs,
   and the card's total line. */
.contract-form__review-cards {
  display: grid;
  gap: var(--wa-space-m);
  margin: 0;
  padding: 0;
}

.contract-form__review-room {
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  /* HMS-1542 — compact cards: the Figma summary keeps padding tight. */
  padding: var(--wa-space-s) var(--wa-space-m);
}

.contract-form__review-room-title {
  margin: 0 0 var(--wa-space-2xs) 0;
  font-size: 1rem;
}

.contract-form__review-room-meta {
  margin: 0;
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

.contract-form__review-total {
  font-weight: 600;
  margin: var(--wa-space-s) 0 var(--wa-space-m) 0;
}

.contract-form__review-empty {
  color: var(--wa-color-text-quiet);
}

/* ── Wizard navigation ──────────────────────────── */

.contract-form__nav {
  display: flex;
  gap: var(--wa-space-s);
  margin-top: var(--wa-space-l);
  /* HMS-1537 — Figma centers the wizard's Back/Cancel/Next row on every step. */
  justify-content: center;
  /* HMS-1541 — Figma draws a divider between the form body and the footer. */
  border-block-start: 1px solid var(--wa-color-surface-border);
  padding-block-start: var(--wa-space-l);
}

.contract-form__submit[hidden],
.contract-form__nav wa-button[hidden] {
  display: none;
}

/* ── Success dialog ─────────────────────────────── */

.contract-form__dialog-body {
  display: grid;
  /* HMS-1546 — the Figma modal runs a tight field rhythm. */
  gap: var(--wa-space-s);
}

/* wa-input's :host display beats the UA [hidden] rule — the dialog's
   new-category field would stay visible without this guard. */
.contract-form__dialog-body wa-input[hidden] {
  display: none;
}

/* HMS-1526 rework — QA: `disabled` alone left the field box white, so the
   constant "Main block" value still read as editable. Disabled fields in
   the dialog take the app's quiet gray (surface-lowered) and a quieter
   edge; ::part(base) reaches the shadow .text-field the host can't style. */
.contract-form__dialog-body wa-input[disabled]::part(base) {
  background: var(--wa-color-surface-lowered);
  border-color: var(--wa-color-neutral-border-quiet);
}

.contract-form__dialog-footer {
  display: flex;
  gap: var(--wa-space-s);
  /* HMS-1546 — Figma centers the modal's actions behind a divider. */
  justify-content: center;
}

/* HMS-1546 — the Figma modal is a compact panel; wa-dialog sizes the inner
   <dialog> from --width on the host (same pattern as sponsorship-dialog). */
wa-dialog.contract-form__room-dialog {
  --width: min(28rem, 94vw);
}

wa-dialog.contract-form__room-dialog::part(footer) {
  border-top: 1px solid var(--wa-color-surface-border);
  padding-top: var(--wa-space-m);
  justify-content: center;
}

wa-dialog.contract-form__room-dialog [slot="footer"] {
  flex: 1 1 auto;
  justify-content: center;
}

/* The "Options" group labels the two flag checkboxes like a field label. */
.contract-form__dialog-options {
  display: grid;
  gap: var(--wa-space-xs);
  margin: 0;
  padding: 0;
  border: 0;
}

.contract-form__dialog-options legend {
  padding: 0;
  font-size: var(--wa-font-size-s);
  font-weight: 600;
}

/* ── Conditional groups ─────────────────────────── */

/* HMS-1536 — Figma's shoulder settings sit inside one light-gray panel: the
   Hotel Opt-in select in column 1, the other four fields in a sub-grid beside
   it (grid-column 2/-1 keeps all five on ONE row), and the per-date inventory
   preview spanning the fields grid underneath. */
.contract-form__shoulder-panel {
  background: var(--wa-color-neutral-fill-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
}

.contract-form__shoulder-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--wa-space-m);
  align-items: start;
}

.contract-form__shoulder-fields {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wa-space-m);
  align-items: start;
}

.contract-form__shoulder-fields[hidden] {
  display: none;
}

/* The rate-model cell stacks the Custom-% input under its select. */
.contract-form__shoulder-cell {
  display: grid;
  gap: var(--wa-space-xs);
  align-content: start;
}

.contract-form__shoulder-preview {
  grid-column: 1 / -1;
}

.contract-form__shoulder-table {
  margin-top: var(--wa-space-2xs);
}

@media (max-width: 60rem) {
  .contract-form__shoulder-grid {
    grid-template-columns: 1fr 1fr;
  }
  .contract-form__shoulder-fields {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }
}

/* HMS-1157 — a 422 re-render flags the room row that conflicts (duplicate
   room type over the same window): tint the row and show the message under
   its room-type select. */
.contract-form__matrix .contract-form__matrix-row--error td {
  background: var(--wa-color-danger-fill-quiet);
}

.contract-form__row-error {
  margin: var(--wa-space-2xs) 0 0 0;
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-danger-on-quiet);
}

/* HMS-1538 — compact Figma policy table: the day/pct inputs sit inline inside
   the condition text; cells center vertically so badges and inputs align. */
.contract-form__policy-days {
  width: 4.5rem;
  display: inline-block;
  vertical-align: middle;
}

.contract-form__policy-table td {
  vertical-align: middle;
}

/* HMS-1538 rework — the > symbol, the number input and the "days before
   check-in" text share one flex row, so the wa-input's taller box can't
   knock the text off the baseline; consistent across all three rows. The
   label margins go to zero inside the row — the gap alone spaces it. */
.contract-form__policy-cond {
  display: flex;
  align-items: center;
  gap: var(--wa-space-2xs);
  flex-wrap: nowrap;
}

.contract-form__policy-cond .contract-form__policy-label {
  margin-inline: 0;
}

/* The bare number inputs still carry `required` (the server enforces it),
   but WA paints a "*" ::after on the label part even when the label is
   empty — that stray mark crowded the inputs. `content` is driven by this
   custom property, so `none` removes the pseudo-element outright. */
.contract-form__policy-table wa-input[required] {
  --wa-form-control-required-content: none;
}

/* Row separation ends at the last tier — no rule under "No Refund". */
.contract-form__policy-table tbody tr:last-child td {
  border-bottom: none;
}

.contract-form__policy-table .contract-form__policy-label {
  margin-inline: var(--wa-space-2xs);
}

/* HMS-1541 — the PCI reassurance callout under the Credit Card Guarantee
   Policy fields; the fields grid above has no bottom margin. No display
   override: document rules beat the shadow :host{display:flex}, so setting
   display here stacks the icon above the message instead of inline. */
.contract-form__cc-info {
  margin-block-start: var(--wa-space-m);
}

/* HMS-1542 — Review step: the Figma compact summary. The title's
   description sits snug under the heading; sections are bordered cards;
   Contract Details + Financial Terms share a two-up grid. */
.contract-form__review-desc {
  margin: calc(var(--wa-space-s) * -1) 0 var(--wa-space-m) 0;
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

.contract-form__review-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--wa-space-m);
  margin-block-end: var(--wa-space-m);
}

.contract-form__review-section {
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
  margin-block-end: var(--wa-space-m);
}

.contract-form__review-sections .contract-form__review-section {
  margin-block-end: 0;
}

.contract-form__review-section-title {
  margin: 0 0 var(--wa-space-s) 0;
  font-size: var(--wa-font-size-m);
}

.contract-form__review-banner {
  margin-block-start: var(--wa-space-l);
}

/* The callout's icon part stretches to full height with align-items:center,
   floating the icon mid-callout; pin it to the first line instead. */
.contract-form__review-banner::part(icon) {
  align-items: flex-start;
  padding-block-start: 0.15em;
}

.contract-form__field-error::part(base) {
  outline: 2px solid var(--wa-color-danger-fill-loud, #dc2626);
  outline-offset: 1px;
  border-radius: var(--wa-border-radius-s);
}