/* =====================================================================
   Registration form — stepper, fields, conditionals, consent
   ===================================================================== */

.page-register { background: var(--paper-2); }

.reg { padding: 118px 0 90px; }
.reg__wrap { max-width: 840px; }

.eyebrow {
  font-size: .78rem; font-weight: 500; letter-spacing: .18em;
  /* Gold (--gold-600) is 2.46:1 on --paper-2 here — under WCAG AA 4.5:1 for
     small text. Navy clears 8.98:1+ on white/--paper/--paper-2. */
  text-transform: uppercase; color: var(--navy-700); margin-bottom: 12px;
}

.reg__intro { text-align: center; margin-bottom: 34px; }
.reg__intro h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); color: var(--navy-800); }
/* .reg__intro has no card behind it — it sits directly on the page's
   --paper-2 body background (register.php AND nominate.php). --slate-500
   was 4.17:1 there — under AA 4.5:1. --slate-700 clears 8.02:1. */
.reg__sub { color: var(--slate-700); margin-top: 12px; max-width: 56ch; margin-inline: auto; }
/* --gold-600 is 2.77:1 on the white .reg__form behind every required-field
   asterisk — under AA 4.5:1. --navy-700 clears 10.10:1. */
.req { color: var(--navy-700); font-weight: 600; }

/* ---- Error summary ------------------------------------------------- */
.form-summary {
  background: var(--danger-bg); border: 1px solid #e9c9c6;
  color: #7a1b15; border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 26px; font-size: .96rem;
}
.form-summary strong { display: block; margin-bottom: 2px; }

/* ---- Stepper ------------------------------------------------------- */
.stepper {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; justify-content: space-between; gap: 6px;
}
/* --slate-400 was 2.62:1 on the dot's white fill / 2.33:1 on the page's
   --paper-2 behind the label — under WCAG AA 4.5:1 (this is a non-interactive
   progress indicator, not exempt as a "disabled" control). --slate-700
   clears 9.02:1 on white and 8.02:1 on --paper-2. It's a neutral grey-blue
   (vs. the saturated navy used by active/done below), so inactive steps
   still read as visually subordinate — the dot's empty white fill vs.
   active's solid navy-800 fill vs. done's gold-500+checkmark fill remains
   the primary state signal either way. */
.stepper__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; position: relative; color: var(--slate-700);
}
.stepper__dot {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: var(--white); border: 2px solid var(--border-2);
  color: var(--slate-700); font-weight: 600; z-index: 1;
  transition: all .35s var(--ease);
}
.stepper__dot .tick { width: 20px; height: 20px; display: none; }
.stepper__label { font-size: .82rem; font-weight: 500; letter-spacing: .01em; }

.stepper__item.is-active .stepper__dot {
  background: var(--navy-800); border-color: var(--navy-800); color: #fff;
  box-shadow: 0 0 0 5px rgba(24,50,84,.12);
}
.stepper__item.is-active { color: var(--navy-800); }
.stepper__item.is-done .stepper__dot {
  background: var(--gold-500); border-color: var(--gold-500); color: var(--ink);
}
.stepper__item.is-done .stepper__dot .num { display: none; }
.stepper__item.is-done .stepper__dot .tick { display: block; }
.stepper__item.is-done { color: var(--navy-700); }

.stepper__bar {
  height: 6px; background: var(--border); border-radius: 999px;
  overflow: hidden; margin-bottom: 34px;
}
.stepper__bar span {
  display: block; height: 100%; width: 20%;
  background: var(--navy-700);
  border-radius: 999px; transition: width .45s var(--ease);
}

/* Compact stepper (phones) — replaces the 10-dot row. Desktop hides it. */
.stepper-compact { display: none; }

@media (max-width: 720px) {
  .stepper { display: none; }              /* hide the cramped 10-dot row */
  .stepper-compact { display: block; }

  /* Strip + progress bar stick just under the (solid, fixed) navbar while the
     step scrolls. --nav-rail-h (66px, from Phase 1) is the navbar height.
     KEY ON-DEVICE TUNING POINT: the navbar auto-hides on scroll-down, which can
     leave a brief gap above the strip; tune the offset (or pin the navbar on
     form pages) during the browser pass. */
  .stepper-compact { position: sticky; top: var(--nav-rail-h); z-index: 20; background: var(--paper-2); padding-top: 10px; }
  .stepper__bar { position: sticky; top: calc(var(--nav-rail-h) + 54px); z-index: 20; margin-bottom: 18px; }

  .stepper-compact__trigger {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 48px; padding: 8px 4px;
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--font-body); color: var(--navy-800); text-align: start;
  }
  /* --gold-700 on this 14%-opacity gold pill composites to ~#eae8e2 over the
     sticky bar's --paper-2 background — only 2.85:1. --navy-700 clears
     8.24:1 on that composited tint. */
  .stepper-compact__count {
    flex: none; font-weight: 700; font-size: .82rem;
    color: var(--navy-700); background: rgba(207,167,98,.14);
    padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums;
  }
  .stepper-compact__title {
    flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 600;
    font-size: 1.05rem; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .stepper-compact__chevron { flex: none; color: var(--slate-400); }
}

/* ---- Form card ----------------------------------------------------- */
.reg__form {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 46px);
}

.step { border: 0; margin: 0; padding: 0; min-inline-size: auto; }
.step[hidden] { display: none; }
.step.is-active { animation: stepIn .4s var(--ease) both; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.step__legend { display: block; width: 100%; margin-bottom: 26px; padding: 0; }
.step__legend span {
  font-size: .76rem; font-weight: 600; letter-spacing: .16em;
  /* Same defect as .eyebrow: --gold-600 is 2.77:1 on the white .reg__form —
     under AA 4.5:1. --navy-700 clears 10.10:1. */
  text-transform: uppercase; color: var(--navy-700);
}
.step__legend h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--navy-800); margin-top: 6px; }

/* ---- Fields -------------------------------------------------------- */
.field { margin-bottom: 22px; }
.field > label, .field .label {
  display: block; font-size: .94rem; font-weight: 500;
  color: var(--slate-700); margin-bottom: 8px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

input[type="text"], input[type="date"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], textarea, select {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 13px 14px; min-height: 50px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%235d6f68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:hover, textarea:hover, select:hover { border-color: var(--slate-400); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--navy-700); background: #fff;
  box-shadow: 0 0 0 4px rgba(24,50,84,.12);
}

/* --slate-400 measured 2.62:1 on white / 2.46:1 on --paper — under WCAG AA
   4.5:1. --slate-700 clears 8.02:1+ on white/--paper/--paper-2. Changed here
   (not the --slate-400 token) because that token is still correctly used
   elsewhere for decorative/border purposes where low contrast is fine. */
.help { font-size: .82rem; color: var(--slate-700); margin-top: 6px; }

/* Errors */
.err { font-size: .84rem; color: var(--danger); margin-top: 6px; min-height: 0; }
.err:empty { display: none; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--danger); background: var(--danger-bg); }
.field.has-error input:focus, .field.has-error textarea:focus, .field.has-error select:focus { box-shadow: 0 0 0 4px rgba(179,38,30,.14); }
.consent.has-error { border-color: var(--danger); }

/* ---- Radios -------------------------------------------------------- */
.radio-row { display: flex; flex-wrap: wrap; gap: 12px; }
.radio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 560px) { .radio-grid { grid-template-columns: 1fr; } }

.radio {
  display: inline-flex; align-items: center; gap: 11px; cursor: pointer;
  border: 1.5px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 13px 16px; min-height: 50px; flex: 1 1 auto;
  background: var(--paper);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.radio:hover { border-color: var(--slate-400); }
.radio span { font-size: .96rem; color: var(--slate-700); }
.radio input { accent-color: var(--navy-700); width: 18px; height: 18px; flex: none; }
.radio:has(input:checked) {
  border-color: var(--navy-700); background: var(--navy-100);
  box-shadow: 0 0 0 3px rgba(24,50,84,.10);
}
.radio:has(input:checked) span { color: var(--navy-800); font-weight: 500; }
.radio--card { flex: 1 1 100%; }

/* ---- Conditional reveal ------------------------------------------- */
.conditional { display: none; }
.conditional.is-shown {
  display: block;
  animation: condIn .3s var(--ease) both;
}
.conditional.nested {
  border-left: 3px solid var(--navy-100);
  padding-left: 18px; margin-left: 2px;
}
@keyframes condIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Repeatable rows ---------------------------------------------- */
.repeatable__row {
  display: flex; gap: 10px; align-items: center; margin-bottom: 10px;
  animation: condIn .25s var(--ease) both;
}
.repeatable__row input { flex: 1; }
.icon-btn {
  flex: none; width: 50px; height: 50px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-2); background: var(--paper);
  display: grid; place-items: center; cursor: pointer; color: var(--slate-700);
  transition: all .2s var(--ease);
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.icon-btn--remove:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn--remove:disabled:hover { border-color: var(--border-2); color: var(--slate-700); background: var(--paper); }

.add-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1.5px dashed var(--border-2);
  color: var(--navy-800); font-family: var(--font-body); font-weight: 500;
  font-size: .92rem; padding: 11px 18px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all .2s var(--ease); margin-top: 4px;
}
.add-btn svg { width: 18px; height: 18px; }
/* :hover is defined once, below, under the gold-outline upgrade — that rule
   has equal specificity and comes later in the cascade, so a second
   .add-btn:hover here would only ever be dead/shadowed code. */

/* ---- File upload --------------------------------------------------- */
.visually-file {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
  clip: rect(0 0 0 0);
}
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; cursor: pointer;
  border: 1.5px dashed var(--border-2); border-radius: var(--radius);
  background: var(--paper); padding: 26px 18px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.dropzone:hover { border-color: var(--navy-700); background: var(--navy-100); }
.dropzone svg { width: 30px; height: 30px; color: var(--navy-700); margin-bottom: 4px; }
.dropzone__text { font-weight: 500; color: var(--slate-700); font-size: .95rem; }
/* --slate-400 was 2.46:1 on the dropzone's --paper background — under AA
   4.5:1. --slate-700 clears 8.48:1 there (and on white/--paper-2). */
.dropzone__hint { font-size: .8rem; color: var(--slate-700); }
.dropzone__file { font-size: .86rem; color: var(--navy-800); font-weight: 500; margin-top: 6px; }
.dropzone.has-file { border-style: solid; border-color: var(--navy-700); background: var(--navy-100); }
.visually-file:focus-visible + .dropzone,
.dropzone:focus-within { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.field.upload.has-error .dropzone { border-color: var(--danger); background: var(--danger-bg); }

/* ---- Consent ------------------------------------------------------- */
.consent {
  margin-top: 8px; padding: 24px; border-radius: var(--radius);
  background: var(--paper); border: 1.5px solid var(--border);
}
.consent h3 { font-size: 1.2rem; color: var(--navy-800); margin-bottom: 12px; }
.consent p { color: var(--slate-700); font-size: .96rem; margin-bottom: 10px; }
.checkbox {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.checkbox input { width: 22px; height: 22px; accent-color: var(--navy-700); flex: none; margin-top: 1px; }
.checkbox span { font-size: .98rem; color: var(--slate-700); font-weight: 500; }

/* ---- Turnstile (final step, above the nav buttons) ----------------- */
.reg__turnstile { margin-top: 22px; }

/* Group the bot-check with the submit button as one action unit.
   The challenge gates submission, so it should read as part of the action
   row — not floating above the nav's fields→action divider. We move that
   divider above the [challenge + button] pair and tighten the gap down to
   the button. Desktop only: on ≤720px the nav is a fixed bottom bar and
   the challenge scrolls as the last content element, so this doesn't apply
   (and these rules must not leak into that fixed-bar layout). */
@media (min-width: 721px) {
  /* Nominate: the challenge is a direct sibling just before the nav row. */
  .reg__turnstile:has(+ .reg__nav) {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }
  .reg__turnstile + .reg__nav {
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
  }
  /* Register: the challenge is the last item inside the final step's
     fieldset. Drop the nav divider only when that step actually carries a
     challenge AND the submit button is showing (i.e. the last step is
     active), so earlier steps — and the no-Turnstile config — keep their
     fields→action rule. */
  #step10:has(.reg__turnstile) + .reg__nav:has(#submitBtn:not([hidden])) {
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
  }
}

/* ---- Nav buttons --------------------------------------------------- */
.reg__nav {
  display: flex; align-items: center; gap: 12px;
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border);
}
.reg__nav-spacer { flex: 1; }
@media (max-width: 480px) {
  .reg__nav { flex-wrap: wrap; }
  .reg__nav .btn { flex: 1 1 auto; }
  .reg__nav-spacer { display: none; }
}

/* ---- Thank-you ----------------------------------------------------- */
.thanks {
  text-align: center; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(40px, 7vw, 72px) clamp(24px, 5vw, 60px); margin-top: 10px;
}
.thanks__icon {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 22px;
  display: grid; place-items: center;
  background: var(--navy-100); color: var(--navy-700);
  animation: pop .5s var(--ease) both;
}
.thanks__icon svg { width: 38px; height: 38px; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.thanks h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); color: var(--navy-800); }
.thanks__lead { color: var(--slate-500); max-width: 50ch; margin: 14px auto 0; font-size: 1.06rem; }
.thanks .btn { margin-top: 24px; }

/* =====================================================================
   New components: chips, multi-field repeatables
   ===================================================================== */


/* ---- Chips (multi-select pill grid) -------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--border-2);
  background: var(--paper);
  color: var(--slate-700);
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease), box-shadow .18s var(--ease);
  user-select: none;
}
.chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.chip:hover {
  border-color: var(--navy-700);
  background: var(--navy-100);
}

/* Selected chip: navy-tint fill + navy text + gold check prefix */
.chip.is-on {
  border-color: var(--navy-700);
  background: var(--navy-100);
  color: var(--navy-800);
  box-shadow: 0 0 0 3px rgba(24, 50, 84, .10);
}
/* Generated-content glyph, not prose, but it does render a visible
   character (WCAG's text SC doesn't carve out an exception for that) and
   --gold-500 was only 1.92:1 on the chip's own --navy-100 fill. Matches the
   chip's own selected-state text color (--navy-800, 11.09:1) rather than
   staying gold. */
.chip.is-on::before {
  content: "\2713";
  font-size: .78rem;
  font-weight: 800;
  color: var(--navy-800);
  flex: none;
}

/* Chips group heading (between target-position groups) */
.chips__group {
  width: 100%;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy-800);
  padding-bottom: 8px;
  margin: 14px 0 2px;
  border-bottom: 1px solid var(--border);
}
.chips__group:first-of-type { margin-top: 4px; }

/* Extra breathing room after each grouped chip row (proposed/target positions) */
.chips__group + .chips { margin-bottom: 28px; }

/* Optional count badge. DEAD CSS as of this audit: no .php template ever
   sets a `data-count` attribute on .chips__group (register.js/nominate.js
   query a *different*, nonexistent `[data-count]` node to write a live
   counter into, so this selector never matches anything in the DOM today).
   Fixed by analogy anyway, matching its .opt/.help/.dropzone__hint siblings
   in case it's ever wired up: --slate-400 was 2.62:1 on the white
   .reg__form — under AA 4.5:1. --slate-700 clears 9.02:1. */
.chips__group[data-count]::after {
  content: attr(data-count);
  margin-inline-start: 8px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--slate-700);
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Multi-field repeatable rows (rep-grid-*) ---------------------- */
/* Override the single-input flex layout with a proper column grid */
.repeatable__row.rep-grid-4,
.repeatable__row.rep-grid-3 {
  display: grid;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  animation: condIn .25s var(--ease) both;
}
/* 4-column grid: degree, specialization, university, year + remove btn */
.repeatable__row.rep-grid-4 {
  grid-template-columns: minmax(0,1.4fr) minmax(0,1.6fr) minmax(0,1.6fr) minmax(0,.8fr) 50px;
}
/* 3-column grid: name/employer, issuer/title, year + remove btn */
.repeatable__row.rep-grid-3 {
  grid-template-columns: minmax(0,1.6fr) minmax(0,1.6fr) minmax(0,.8fr) 50px;
}
/* Remove the flex:1 override from the base rule for grid children */
.repeatable__row.rep-grid-4 input,
.repeatable__row.rep-grid-3 input,
.repeatable__row.rep-grid-4 select,
.repeatable__row.rep-grid-3 select { flex: unset; }

/* Stack on narrow viewports */
@media (max-width: 700px) {
  .repeatable__row.rep-grid-4,
  .repeatable__row.rep-grid-3 {
    grid-template-columns: 1fr;
  }
  .repeatable__row.rep-grid-4 .icon-btn,
  .repeatable__row.rep-grid-3 .icon-btn {
    justify-self: end;
  }
}

/* Gold-outline add button (upgrade from dashed-border default) */
.add-btn {
  border-color: var(--gold-500);
  color: var(--navy-800);
}
.add-btn:hover {
  border-color: var(--gold-600);
  background: var(--navy-800);
  color: var(--white);
  border-style: solid;
}

/* ---- Dropzone: multiple filenames ---------------------------------- */
/* The [data-file-name] span may contain newline-separated names;
   display as a block that wraps naturally. */
.dropzone__file[data-file-name] {
  display: block;
  text-align: center;
  white-space: pre-line; /* honour \n separators injected by JS */
  word-break: break-word;
}

/* ---- Step animation (already in .step.is-active) — motion guard --- */
@media (prefers-reduced-motion: reduce) {
  .step.is-active { animation: none; }
  .conditional.is-shown { animation: none; }
  .repeatable__row { animation: none; }
}

/* Optional-field badge + inline help text.
   --slate-400 was 2.62:1 on white — under AA 4.5:1. --slate-700 clears
   9.02:1 on white (and 8.02:1+ on --paper/--paper-2). */
.opt { color: var(--slate-700); font-weight: 400; font-size: .85em; }
.field-help { display: block; color: var(--slate-500); font-size: .85rem; margin-top: 6px; }

/* ---- Phone (≤720px): the wizard nav becomes a sticky bottom bar -------- */
@media (max-width: 720px) {
  .reg__nav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
    margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    gap: 12px; border-top: 1px solid var(--border);
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
  }
  .reg__nav-spacer { display: none; }
  /* Back is compact at the start; Continue/Submit fills the rest. */
  #prevBtn { flex: 0 0 auto; min-height: 50px; }
  #nextBtn, #submitBtn, #nomSubmit { flex: 1 1 auto; min-height: 50px; }
  /* When Back is hidden (step 1), Continue still spans full width via flex.
     #nomSubmit is the single-button nomination bar — it fills the whole bar. */

  /* Offset the form so the last fields + the in-flow footer clear the bar.
     Scoped to .page-register (register + nominate, which carry the fixed bar)
     so the thank-you page (.page-thanks, no bar) gets no dead bottom space. */
  .page-register .reg { padding-bottom: 96px; }
}

/* ---- Phone (≤640px): full-bleed steps + larger touch targets ---------- */
@media (max-width: 640px) {
  .reg__wrap { padding-inline: 0; }
  .reg__intro { padding-inline: 16px; }
  .reg__form {
    border: 0; border-radius: 0; box-shadow: none;
    padding: 20px 16px;
  }
  .stepper-compact, .stepper__bar { margin-inline: 0; }

  /* Chips ≥44px tall for comfortable tapping. */
  .chip { min-height: 44px; padding: 11px 16px; }
  /* Remove-row buttons already 50px; ensure add-button is comfortable. */
  .add-btn { min-height: 44px; }
}

/* ---- Step sheet (phones): bottom-sheet jump list ---------------------- */
.step-sheet { display: none; }

@media (max-width: 720px) {
  .step-sheet {
    display: block; position: fixed; inset: 0; z-index: 110;   /* above the navbar (z-index 100) for a true modal scrim */
    background: rgba(13,31,54,.42);
    opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
  }
  .step-sheet.is-open { opacity: 1; visibility: visible; }
  .step-sheet__panel {
    position: absolute; inset-inline: 0; bottom: 0;
    background: var(--white); border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    max-height: 80vh; overflow-y: auto;
    transform: translateY(100%); transition: transform .3s var(--ease);
  }
  .step-sheet.is-open .step-sheet__panel { transform: translateY(0); }
  .step-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 4px; }
  .step-sheet__title { font-size: 1.1rem; }
  .step-sheet__close { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; color: var(--slate-700); cursor: pointer; }
  .step-sheet__list { list-style: none; margin: 0; padding: 0; }
  .step-sheet__item {
    display: flex; align-items: center; gap: 14px; width: 100%;
    min-height: 52px; padding: 8px 6px; background: transparent; border: 0;
    border-top: 1px solid var(--border); cursor: pointer; text-align: start;
    font-family: var(--font-body); color: var(--navy-800);
  }
  .step-sheet__item:disabled { color: var(--slate-400); cursor: default; }
  /* The badge's own --paper-2 fill: --slate-500 was 4.17:1 — under AA
     4.5:1. --slate-700 clears 8.02:1. (This default state only ever
     renders inside a genuinely :disabled future-step button, so it isn't
     the same "not exempt" case as the desktop .stepper__dot — but it's
     fixed the same way for a consistent, legible progress indicator on
     both breakpoints.) */
  .step-sheet__num {
    flex: none; width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 50%; font-weight: 700; font-size: .85rem;
    background: var(--paper-2); color: var(--slate-700); font-variant-numeric: tabular-nums;
  }
  .step-sheet__item.is-done .step-sheet__num { background: var(--gold-500); color: var(--navy-900); }
  .step-sheet__item.is-current .step-sheet__num { background: var(--navy-800); color: #fff; }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .step-sheet, .step-sheet__panel { transition: none; }
}