/**
 * @file
 * Webform theming layer (#886). Token-driven styles for the application form
 * wizard: card wrapper, responsive layout, all field types (text, select,
 * textarea, checkbox, radio, file, date), states (focus, error, disabled,
 * readonly), and navigation buttons.
 *
 * Scoped to .webform-submission-form to avoid interfering with admin forms
 * or Olivero's global form rules. Attaches via the tpemis_ui/webform library
 * and depends on tpemis_ui/tokens for --tp-* custom properties.
 *
 * Mobile-first: single column on small screens, optional two-column layout
 * on wider screens via .webform-two-col composites.
 */

/* --------------------------------------------------------------------------
 * Card wrapper
 * -------------------------------------------------------------------------- */
.webform-submission-form {
  background: var(--tp-color-surface-default);
  border: 1px solid var(--tp-color-border-default);
  border-radius: var(--tp-border-radius-md);
  padding: var(--tp-spacing-6);
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  margin-bottom: var(--tp-spacing-8);
  font-family: var(--tp-font-family-sans);
  box-sizing: border-box;
}

@media (min-width: 48rem) {
  .webform-submission-form {
    padding: var(--tp-spacing-8);
  }
}

/* Step-progress separator. */
.webform-submission-form .tp-steps {
  margin-bottom: var(--tp-spacing-6);
  padding-bottom: var(--tp-spacing-6);
  border-bottom: 1px solid var(--tp-color-border-default);
}

/* --------------------------------------------------------------------------
 * Form-item — vertical label / control / help / error stack
 * -------------------------------------------------------------------------- */
.webform-submission-form .form-item {
  display: flex;
  flex-direction: column;
  gap: var(--tp-spacing-2);
  margin-bottom: var(--tp-spacing-4);
}

.webform-submission-form .form-item:last-child {
  margin-bottom: 0;
}

/* Labels. */
.webform-submission-form .form-item label,
.webform-submission-form .form-item .form-item__label {
  font-size: var(--tp-font-size-sm);
  font-weight: var(--tp-font-weight-medium);
  color: var(--tp-color-text-default);
  line-height: 1.4;
}

/* Required asterisk.
 * :not(label) prevents the rule from matching the label element itself,
 * which Drupal adds class="form-required" to when a field is required —
 * without the guard the entire label text turns danger-red. The separate
 * ::after rule catches Olivero/Drupal 11 which places the asterisk as a
 * pseudo-element directly on the label. */
.webform-submission-form .form-item .form-required:not(label),
.webform-submission-form .form-item label .form-required {
  color: var(--tp-color-danger);
  margin-inline-start: 2px;
}
.webform-submission-form .form-item label.form-required::after {
  color: var(--tp-color-danger);
}

/* Help / description text. */
.webform-submission-form .form-item .form-item__description,
.webform-submission-form .form-item .description {
  margin: 0;
  font-size: var(--tp-font-size-sm);
  color: var(--tp-color-text-muted);
  line-height: 1.5;
}

/* Inline error message. */
.webform-submission-form .form-item .form-item__error-message {
  margin: 0;
  font-size: var(--tp-font-size-sm);
  color: var(--tp-color-danger);
}

/* --------------------------------------------------------------------------
 * Text inputs
 * -------------------------------------------------------------------------- */
.webform-submission-form input:not([type='submit']):not([type='button']):not([type='image']):not([type='reset']):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']) {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--tp-spacing-4);
  border: 1px solid var(--tp-color-border-default);
  border-radius: var(--tp-border-radius-sm);
  font-size: var(--tp-font-size-md);
  font-family: var(--tp-font-family-sans);
  color: var(--tp-color-text-default);
  background-color: var(--tp-color-surface-default);
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.webform-submission-form input:not([type='submit']):not([type='button']):not([type='image']):not([type='reset']):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden'])::placeholder {
  color: var(--tp-color-text-muted);
}

.webform-submission-form input:not([type='submit']):not([type='button']):not([type='image']):not([type='reset']):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']):focus {
  outline: none;
  border-color: var(--tp-color-brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-color-brand-primary) 18%, transparent);
}

.webform-submission-form input:disabled,
.webform-submission-form input[readonly] {
  background-color: var(--tp-color-surface-subtle);
  color: var(--tp-color-text-muted);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
 * Select dropdown
 * Both selectors are required:
 * - .webform-submission-form select (0,1,1): covers admin theme (no .tp-main)
 * - .tp-main .webform-submission-form select (0,2,1): frontend theme; higher
 *   specificity beats tpemis-forms.css (.tp-main select, 0,1,1) so the
 *   right-padding chevron space is not collapsed.
 * -------------------------------------------------------------------------- */
.webform-submission-form select,
.tp-main .webform-submission-form select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 2.5rem 0 var(--tp-spacing-4, 1rem);
  border: 1px solid var(--tp-color-border-default);
  border-radius: var(--tp-border-radius-sm, 6px);
  font-size: var(--tp-font-size-md, 1rem);
  font-family: var(--tp-font-family-sans, system-ui, sans-serif);
  color: var(--tp-color-text-default);
  /* background shorthand would wipe out the svg — use separate props. */
  background-color: var(--tp-color-surface-default);
  background-image: url("data:image/svg+xml,%3csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1l7 7 7-7' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--tp-spacing-4, 1rem) center;
  background-size: 16px 10px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.webform-submission-form select:focus,
.tp-main .webform-submission-form select:focus {
  outline: none;
  border-color: var(--tp-color-brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-color-brand-primary) 18%, transparent);
}

.webform-submission-form select:disabled,
.tp-main .webform-submission-form select:disabled {
  background-color: var(--tp-color-surface-subtle);
  color: var(--tp-color-text-muted);
  cursor: not-allowed;
}

/* Multiple-select: restore normal scroll-based appearance. */
.webform-submission-form select[multiple],
.tp-main .webform-submission-form select[multiple] {
  min-height: 8rem;
  padding: var(--tp-spacing-2, 0.5rem);
  background-image: none;
  appearance: auto;
  -webkit-appearance: auto;
}

/* --------------------------------------------------------------------------
 * Textarea
 * -------------------------------------------------------------------------- */
.webform-submission-form textarea {
  display: block;
  width: 100%;
  min-height: 7rem;
  padding: var(--tp-spacing-3) var(--tp-spacing-4);
  border: 1px solid var(--tp-color-border-default);
  border-radius: var(--tp-border-radius-sm);
  font-size: var(--tp-font-size-md);
  font-family: var(--tp-font-family-sans);
  color: var(--tp-color-text-default);
  background-color: var(--tp-color-surface-default);
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.webform-submission-form textarea::placeholder {
  color: var(--tp-color-text-muted);
}

.webform-submission-form textarea:focus {
  outline: none;
  border-color: var(--tp-color-brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-color-brand-primary) 18%, transparent);
}

.webform-submission-form textarea:disabled {
  background-color: var(--tp-color-surface-subtle);
  color: var(--tp-color-text-muted);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
 * Error state — red border on any control inside an errored form-item.
 * Covers both .has-error (legacy) and .form-item--error (Drupal BEM).
 * -------------------------------------------------------------------------- */
.webform-submission-form .form-item.has-error input,
.webform-submission-form .form-item.has-error select,
.webform-submission-form .form-item.has-error textarea,
.webform-submission-form .form-item--error input,
.webform-submission-form .form-item--error select,
.webform-submission-form .form-item--error textarea {
  border-color: var(--tp-color-danger);
}

.webform-submission-form .form-item.has-error input:focus,
.webform-submission-form .form-item.has-error select:focus,
.webform-submission-form .form-item.has-error textarea:focus,
.webform-submission-form .form-item--error input:focus,
.webform-submission-form .form-item--error select:focus,
.webform-submission-form .form-item--error textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-color-danger) 18%, transparent);
}

/* --------------------------------------------------------------------------
 * Checkboxes and radios
 * Native controls sized to 18px with brand accent; label inline.
 * -------------------------------------------------------------------------- */
.webform-submission-form input[type='checkbox'],
.webform-submission-form input[type='radio'] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  vertical-align: middle;
  accent-color: var(--tp-color-brand-primary);
  cursor: pointer;
}

/* Checkbox/radio groups: the form-item wraps a list of label+input pairs. */
.webform-submission-form .js-form-type-checkbox,
.webform-submission-form .js-form-type-radio {
  flex-direction: row;
  align-items: center;
  gap: var(--tp-spacing-2);
}

.webform-submission-form .js-form-type-checkbox label,
.webform-submission-form .js-form-type-radio label {
  font-weight: var(--tp-font-weight-regular, 400);
  cursor: pointer;
}

/* Checkboxes group container (webform renders as nested form-items). */
.webform-submission-form .form-type--checkboxes,
.webform-submission-form .form-type--radios {
  display: flex;
  flex-direction: column;
  gap: var(--tp-spacing-2);
}

/* --------------------------------------------------------------------------
 * File upload
 * -------------------------------------------------------------------------- */
.webform-submission-form input[type='file'] {
  display: block;
  width: 100%;
  padding: var(--tp-spacing-3);
  border: 1px dashed var(--tp-color-border-default);
  border-radius: var(--tp-border-radius-sm);
  font-size: var(--tp-font-size-sm);
  font-family: var(--tp-font-family-sans);
  color: var(--tp-color-text-muted);
  background-color: var(--tp-color-surface-subtle);
  cursor: pointer;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
 * Fieldset / composite groups — section card style (matches submission view).
 * The legend becomes a section header row: icon indicator + bold title.
 *
 * Both selectors required:
 * - .webform-submission-form fieldset (0,1,1): base + admin theme
 * - .tp-main .webform-submission-form fieldset (0,2,1): frontend theme;
 *   higher specificity beats tpemis-forms.css (.tp-main fieldset, 0,1,1)
 *   which would otherwise apply padding and break the full-width legend.
 * -------------------------------------------------------------------------- */
.webform-submission-form fieldset,
.tp-main .webform-submission-form fieldset {
  border: 1px solid var(--tp-color-border-default);
  border-radius: var(--tp-border-radius-sm, 6px);
  padding: 0;
  margin-bottom: var(--tp-spacing-6, 1.5rem);
  /* overflow:hidden was clipping admin contextual-links dropdowns
     (position:absolute children of Gin's fieldset group wrapper).
     The legend gets its own top border-radius instead so the header
     background stays inside the fieldset corners without clipping. */
}

/* Legend as a section header row — matches the submission view card style.
 * Only legend is targeted (not .fieldset__label) because .fieldset__label is
 * a <span> INSIDE legend; styling both would double-apply padding and the
 * icon ::before, producing two icon boxes in the header. */
.webform-submission-form fieldset legend {
  display: flex;
  align-items: center;
  gap: var(--tp-spacing-3);
  width: 100%;
  padding: var(--tp-spacing-4) var(--tp-spacing-6);
  border-bottom: 1px solid var(--tp-color-border-default);
  /* Top corners match the fieldset border-radius so the header background
     stays inside the rounded corners without needing overflow:hidden on the
     fieldset (which would clip admin contextual-links dropdowns). */
  border-radius: var(--tp-border-radius-sm, 6px) var(--tp-border-radius-sm, 6px) 0 0;
  background: var(--tp-color-surface-subtle);
  font-size: var(--tp-font-size-md, 1rem);
  font-weight: var(--tp-font-weight-bold, 700);
  color: var(--tp-color-text-default);
  letter-spacing: normal;
  text-transform: none;
  box-sizing: border-box;
}

/* .fieldset__label is the text <span> inside <legend>. The portal theme sets
 * color: white on it (for Olivero's dark gray legend background). On our
 * light-gray legend that makes the text invisible; override it here.
 * Specificity (0,2,2) beats .fieldset__label (0,1,0). */
.webform-submission-form fieldset legend .fieldset__label {
  color: inherit;
  padding: 0;
  line-height: inherit;
}

/* Icon indicator: a 32x32 SVG rendered via content:url() so the icon is a
 * replaced element (not a background). This avoids the background-repeat
 * tiling issue that occurred with background-image on legend::before in the
 * Gin admin theme. The SVG encodes both the tinted rounded-rect background
 * and the section icon (horizontal lines). Only on legend::before (not
 * .fieldset__label::before) to avoid the double-icon issue described above. */
.webform-submission-form fieldset legend::before {
  /* SVG: 32x32 rounded rect (brand-primary 12% fill) + 3-line list icon. */
  content: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='4' fill='%231b3a6b' fill-opacity='0.12'/%3E%3Cpath d='M10 12h12M10 16h8M10 20h10' stroke='%231b3a6b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  display: block;
  flex-shrink: 0;
  min-width: 32px;
  width: 32px;
  max-width: 32px;
  min-height: 32px;
  height: 32px;
  max-height: 32px;
}

/* Fields inside the fieldset get standard padding. */
.webform-submission-form fieldset .fieldset__wrapper,
.webform-submission-form fieldset > .form-item,
.webform-submission-form fieldset > .js-form-item,
.webform-submission-form fieldset > .webform-element {
  padding: var(--tp-spacing-4) var(--tp-spacing-6);
}

/* Remove top margin on first item inside the padded wrapper. */
.webform-submission-form fieldset .fieldset__wrapper > .form-item:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
 * Responsive two-column field layout
 * Drupal Webform's "columns" layout group renders a
 * .webform-flex--container wrapper with .webform-flex children. On mobile
 * these stack; on wider screens they sit side by side at equal width.
 * -------------------------------------------------------------------------- */
.webform-submission-form .webform-flex--container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 48rem) {
  .webform-submission-form .webform-flex--container {
    flex-direction: row;
    gap: var(--tp-spacing-6);
  }

  .webform-submission-form .webform-flex--container .webform-flex {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
 * Navigation / action buttons
 * -------------------------------------------------------------------------- */
.webform-submission-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-spacing-4);
  margin-top: var(--tp-spacing-8);
  padding-top: var(--tp-spacing-6);
  border-top: 1px solid var(--tp-color-border-default);
  align-items: center;
}

/* Primary action (Next / Submit). */
.webform-submission-form .form-actions input[type='submit']:not(.webform-button--previous),
.webform-submission-form .form-actions button[type='submit']:not(.webform-button--previous) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--tp-spacing-6);
  border: none;
  border-radius: var(--tp-border-radius-sm);
  background: var(--tp-color-brand-primary);
  color: var(--tp-color-text-on-primary);
  font-size: var(--tp-font-size-md);
  font-weight: var(--tp-font-weight-medium);
  font-family: var(--tp-font-family-sans);
  cursor: pointer;
  transition: background 0.15s ease;
}

.webform-submission-form .form-actions input[type='submit']:not(.webform-button--previous):hover,
.webform-submission-form .form-actions button[type='submit']:not(.webform-button--previous):hover {
  background: var(--tp-color-brand-secondary);
}

/* Previous button — outline style, pushed to the left. */
.webform-submission-form .form-actions .webform-button--previous {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--tp-spacing-6);
  border: 1px solid var(--tp-color-border-default);
  border-radius: var(--tp-border-radius-sm);
  background: var(--tp-color-surface-default);
  color: var(--tp-color-text-default);
  font-size: var(--tp-font-size-md);
  font-weight: var(--tp-font-weight-medium);
  font-family: var(--tp-font-family-sans);
  cursor: pointer;
  margin-inline-end: auto;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.webform-submission-form .form-actions .webform-button--previous:hover {
  background: var(--tp-color-surface-subtle);
  border-color: var(--tp-color-text-muted);
}

/* Save Draft button — secondary style. */
.webform-submission-form .form-actions .webform-button--draft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--tp-spacing-6);
  border: 1px solid var(--tp-color-border-default);
  border-radius: var(--tp-border-radius-sm);
  background: var(--tp-color-surface-default);
  color: var(--tp-color-text-default);
  font-size: var(--tp-font-size-md);
  font-weight: var(--tp-font-weight-medium);
  font-family: var(--tp-font-family-sans);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.webform-submission-form .form-actions .webform-button--draft:hover {
  background: var(--tp-color-surface-subtle);
}

/* On mobile: stack buttons full-width for easy tapping. */
@media (max-width: 47.9375rem) {
  .webform-submission-form .form-actions {
    flex-direction: column;
  }

  .webform-submission-form .form-actions input[type='submit'],
  .webform-submission-form .form-actions button[type='submit'],
  .webform-submission-form .form-actions .webform-button--previous,
  .webform-submission-form .form-actions .webform-button--draft {
    width: 100%;
    margin-inline-end: 0;
  }
}

/* webform-progress.html.twig emits a .webform-progress__status div that
 * shows "N of total (X%)" when wizard_progress_pages/percentage are enabled.
 * Our .tp-stepper__caption already carries that info; hide the duplicate. */
.webform-submission-form .webform-progress__status {
  display: none;
}

/* --------------------------------------------------------------------------
 * Horizontal connected-circles stepper (.tp-stepper)
 *
 * Rendered by webform-progress-tracker--tpemis-ui.html.twig and
 * webform-progress-bar--tpemis-ui.html.twig. Each step is a flex column
 * (marker above, label below). Connecting lines are drawn via ::after on
 * each step except the last. The caption line below the stepper always shows
 * the current step number and title in full — useful on mobile where labels
 * are hidden to keep the step dots compact.
 * -------------------------------------------------------------------------- */
.tp-stepper {
  padding: var(--tp-spacing-6) 0 var(--tp-spacing-4);
  border-bottom: 1px solid var(--tp-color-border-default);
  margin-bottom: var(--tp-spacing-6);
}

.tp-stepper__list {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each step: column of marker + label, equal share of available width. */
.tp-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-spacing-2);
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

/* Connecting line: drawn as ::after on every step except the last.
   It spans from the center of this step to the center of the next (50% → 150%
   in the step's coordinate system) by starting at 50% left and running
   the full width of the step. The overlap makes them connect. */
.tp-stepper__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--tp-color-border-default);
  z-index: 0;
}

/* Completed-step connector is brand primary. */
.tp-stepper__step--complete:not(:last-child)::after {
  background: var(--tp-color-brand-primary);
}

/* Marker circle — base. */
.tp-stepper__marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: var(--tp-font-size-sm);
  font-weight: var(--tp-font-weight-bold);
  font-family: var(--tp-font-family-sans);
  line-height: 1;
  flex-shrink: 0;
}

/* Completed marker — filled, acts as a button.
 * The button also carries class "progress-marker" so webform.wizard.pages.js
 * can wire up click navigation. tpemis-forms.css has a rule
 * .tp-main .webform-progress .progress-marker { background: surface-subtle }
 * at specificity (0,3,0). We use (0,4,0) here to keep the brand-primary fill
 * regardless of source order (module CSS loads before theme CSS but lower
 * specificity loses). */
.tp-stepper__marker--complete,
.tp-main .webform-progress .tp-stepper__marker--complete {
  background: var(--tp-color-brand-primary);
  border: 2px solid var(--tp-color-brand-primary);
  color: var(--tp-color-text-on-primary);
  cursor: pointer;
  /* Reset browser button defaults that bleed through in Olivero. */
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  font: inherit;
  transition: background 0.15s ease, transform 0.1s ease;
}

.tp-stepper__marker--complete:hover {
  background: var(--tp-color-brand-secondary);
  border-color: var(--tp-color-brand-secondary);
  transform: scale(1.08);
}

.tp-stepper__marker--complete:focus-visible {
  outline: 2px solid var(--tp-color-brand-primary);
  outline-offset: 3px;
}

/* Current marker — outlined. */
.tp-stepper__marker--current {
  background: var(--tp-color-surface-default);
  border: 2px solid var(--tp-color-brand-primary);
  color: var(--tp-color-brand-primary);
}

/* Reached-ahead marker (#1337) — the user has already visited this step and
 * can jump to it, but has since moved to an earlier step. Clickable, like the
 * completed marker, but shows the step number (not a check) on a subtle brand
 * tint so it reads as "available" and stays distinct from both the plain
 * current outline and the filled completed marker. Specificity mirrors
 * --complete so the theme's .progress-marker override cannot flatten it. */
.tp-stepper__marker--visited,
.tp-main .webform-progress .tp-stepper__marker--visited {
  background: color-mix(in srgb, var(--tp-color-brand-primary) 8%, var(--tp-color-surface-default));
  border: 2px solid var(--tp-color-brand-primary);
  color: var(--tp-color-brand-primary);
  cursor: pointer;
  /* Reset browser button defaults that bleed through in Olivero. */
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  font: inherit;
  transition: background 0.15s ease, transform 0.1s ease;
}

.tp-stepper__marker--visited:hover {
  background: color-mix(in srgb, var(--tp-color-brand-primary) 16%, var(--tp-color-surface-default));
  transform: scale(1.08);
}

.tp-stepper__marker--visited:focus-visible {
  outline: 2px solid var(--tp-color-brand-primary);
  outline-offset: 3px;
}

/* Upcoming marker — gray outline. */
.tp-stepper__marker--upcoming {
  background: var(--tp-color-surface-default);
  border: 2px solid var(--tp-color-border-default);
  color: var(--tp-color-text-muted);
}

/* Step label — hidden on small screens (caption line provides context). */
.tp-stepper__label {
  font-size: var(--tp-font-size-xs);
  line-height: 1.3;
  text-align: center;
  color: var(--tp-color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 90%;
}

.tp-stepper__step--complete .tp-stepper__label,
.tp-stepper__step--visited .tp-stepper__label {
  color: var(--tp-color-text-default);
}

.tp-stepper__step--current .tp-stepper__label {
  color: var(--tp-color-brand-primary);
  font-weight: var(--tp-font-weight-medium);
}

/* Caption line — always visible. */
.tp-stepper__caption {
  margin: var(--tp-spacing-4) 0 0;
  font-size: var(--tp-font-size-sm);
  color: var(--tp-color-text-muted);
}

/* On small screens: hide per-step labels (too cramped), rely on caption. */
@media (max-width: 47.9375rem) {
  .tp-stepper__label {
    display: none;
  }

  .tp-stepper__marker {
    width: 28px;
    height: 28px;
    font-size: var(--tp-font-size-sm);
  }

  .tp-stepper__step:not(:last-child)::after {
    top: 14px;
  }
}

/* Many-step forms (9+ steps): reduce marker size so they fit on any screen.
 * :has() lets us target based on child count without JS. Falls back gracefully
 * in older engines — markers just stay 28px on mobile, which is still usable. */
@supports selector(:has(*)) {
  @media (max-width: 47.9375rem) {
    .tp-stepper__list:has(.tp-stepper__step:nth-child(9)) .tp-stepper__marker {
      width: 20px;
      height: 20px;
      font-size: var(--tp-font-size-2xs);
    }

    .tp-stepper__list:has(.tp-stepper__step:nth-child(9)) .tp-stepper__step:not(:last-child)::after {
      top: 10px;
    }
  }
}

/* On medium+ screens: show labels. */
@media (min-width: 48rem) {
  .tp-stepper__label {
    display: -webkit-box;
  }
}