/*
 * vs-intake.css
 *
 * Styles for the <vs-intake> element. Every colour, radius, font, size and
 * spacing value comes from a --vs-* custom property whose default is declared
 * on the element itself. To re-skin the form, redefine the properties on the
 * element, for example `vs-intake { --vs-accent: #0A7; }` or
 * `.home vs-intake { ... }`. The defaults sit in :where(vs-intake), which has
 * zero specificity, so any rule that targets the element overrides them
 * whatever the stylesheet order.
 *
 * The defaults read the page theme (site/assets/themes.css) first, so the form
 * takes the look of whatever [data-theme] it sits under. The literal after
 * each comma is the Field Manual value, used when no theme is loaded.
 *
 * Theme names the element reads but never declares, because declaring them
 * here would hide the theme's own value: --vs-line, --vs-line-strong,
 * --vs-shadow, --vs-plate-1, --vs-highlight, --vs-font-mono,
 * --vs-display-weight, --vs-display-track, --vs-r and --vs-bar-h. Set them on
 * the element to override them for the form alone.
 *
 * Mobile-first, works from 360px. Tap targets are at least 44px. Focus rings
 * are always visible. Step transitions animate opacity and transform only,
 * and prefers-reduced-motion turns every transition off and stops the spinners.
 */

:where(vs-intake) {
  /* Colour. Field Manual: bone ground, paper cards, near-black ink, one
     safety orange for the action and the selected state. */
  --vs-canvas: var(--sc-canvas, #EFEDE5);
  --vs-surface: var(--sc-surface, #F8F7F2);
  /* Hover fill for secondary buttons, which sit on the paper panel. */
  --vs-surface-raised: var(--sc-canvas, #EFEDE5);
  --vs-field: var(--sc-surface, #F8F7F2);
  --vs-ink: var(--sc-ink, #161715);
  --vs-ink-soft: var(--sc-ink-soft, #5B5E56);
  /* Placeholders and hints are small text: they keep the 4.5:1 of ink-soft. */
  --vs-ink-muted: var(--sc-ink-soft, #5B5E56);
  --vs-accent: var(--sc-accent, #DF5F0A);
  --vs-accent-hover: color-mix(in oklab, var(--vs-accent) 88%, var(--vs-ink));
  --vs-accent-edge: color-mix(in oklab, var(--vs-accent) 80%, var(--vs-ink));
  --vs-accent-ink: var(--sc-accent-ink, #161715);
  /* The accent only clears 3:1 on bone. Any orange text uses this darker
     stop instead: 5.2:1 on bone and on the selected card, 5.7:1 on paper. */
  --vs-accent-text: color-mix(in oklab, var(--vs-accent) 70%, var(--vs-ink));
  --vs-accent-soft: color-mix(in oklab, var(--vs-highlight, #F8D9BE) 40%, var(--vs-surface));
  --vs-error: var(--vs-accent-text);
  --vs-error-soft: color-mix(in oklab, var(--vs-highlight, #F8D9BE) 55%, var(--vs-surface));
  /* Focus as on the homepage (engine/scrollcraft.css and css/home.css):
     an accent ring 3px out, and an ink ring on the accent button. */
  --vs-focus: var(--sc-accent, #DF5F0A);
  --vs-focus-on-accent: var(--sc-ink, #161715);
  --vs-focus-offset: 3px;
  /* Hairlines come from the theme. Card edges are the hairline; the edge of
     a text field or a radio or check ring must reach 3:1 (3.9:1 on paper). */
  --vs-rule: var(--vs-line, rgba(22, 23, 21, 0.14));
  --vs-rule-strong: var(--vs-line-strong, rgba(22, 23, 21, 0.28));
  --vs-control-line: color-mix(in oklab, var(--vs-ink) 55%, transparent);
  --vs-track: var(--vs-plate-1, #DAD7CA);

  /* Type: the theme's display, text and mono faces. */
  --vs-font-display: var(--sc-font-display, "Archivo", system-ui, sans-serif);
  --vs-font-text: var(--sc-font-text, "IBM Plex Sans", system-ui, sans-serif);
  --vs-font-label: var(--vs-font-mono, "IBM Plex Mono", ui-monospace, monospace);
  --vs-text-size: 1rem;
  --vs-text-small: 0.9375rem;
  --vs-text-tiny: 0.8125rem;
  --vs-text-error: 0.875rem;
  --vs-text-line: 1.5;
  --vs-label-size: 0.75rem;
  --vs-label-track: 0.08em;
  --vs-question-size: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
  --vs-question-line: 1.16;
  --vs-question-weight: var(--vs-display-weight, 600);
  --vs-question-track: -0.022em;
  --vs-title-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  --vs-title-line: 1.04;
  --vs-title-track: var(--vs-display-track, -0.03em);

  /* Buttons: the homepage .btn (css/home.css). */
  --vs-button-height: 2.75rem;
  --vs-button-pad: 1.125rem;
  --vs-button-size: var(--sc-t-sm, 0.9375rem);
  --vs-button-weight: var(--vs-display-weight, 600);
  --vs-button-track: -0.005em;

  /* Shape: one radius for the page, as on the homepage. */
  --vs-radius: var(--vs-r, 6px);
  --vs-radius-sm: var(--vs-r, 6px);
  --vs-radius-xs: 3px;
  --vs-border: 1px;
  --vs-selected-edge: 2px;
  /* A heading scrolled into view clears the fixed site bar. */
  --vs-scroll-margin: calc(var(--vs-bar-h, 0px) + 1rem);

  /* Space */
  --vs-space-1: 4px;
  --vs-space-2: 8px;
  --vs-space-3: 12px;
  --vs-space-4: 16px;
  --vs-space-5: 24px;
  --vs-space-6: 32px;
  --vs-space-7: 48px;
  --vs-control-height: 48px;
  --vs-card-min-height: 56px;
  --vs-options-gap: var(--vs-space-2);
  --vs-progress-gap: var(--vs-space-6);
  --vs-help-gap: var(--vs-space-5);
  --vs-key-size: 26px;
  --vs-mark-size: 18px;
  --vs-progress-height: 3px;
  --vs-max-width: 40rem;
  --vs-stage-min-height: 28rem;

  /* Motion */
  --vs-motion: 180ms;
  --vs-motion-fast: 120ms;
  --vs-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

vs-intake {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--vs-max-width);
  color: var(--vs-ink);
  font-family: var(--vs-font-text);
  font-size: var(--vs-text-size);
  line-height: var(--vs-text-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

vs-intake *,
vs-intake *::before,
vs-intake *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Progress                                                            */
/* ------------------------------------------------------------------ */

.vs-intake__progress {
  height: var(--vs-progress-height);
  background: var(--vs-track);
  border-radius: 0;
  overflow: hidden;
  margin: 0 0 var(--vs-progress-gap);
}

.vs-intake__progress-bar {
  height: 100%;
  background: var(--vs-accent);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform calc(var(--vs-motion) * 2) var(--vs-ease);
}

/* ------------------------------------------------------------------ */
/* Stage and steps                                                     */
/* ------------------------------------------------------------------ */

.vs-intake__form {
  margin: 0;
}

.vs-intake__stage {
  position: relative;
  min-height: var(--vs-stage-min-height);
}

/* The end screen is the last thing shown, so it needs no room held for a
   taller step after it. */
.vs-intake__stage:has(> .vs-intake__step--end) {
  min-height: 0;
}

.vs-intake__step {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--vs-motion) var(--vs-ease), transform var(--vs-motion) var(--vs-ease);
}

.vs-intake__step.is-entering {
  opacity: 0;
  transform: translateY(var(--vs-space-2));
}

.vs-intake__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.vs-intake__legend {
  display: block;
  padding: 0;
  margin: 0 0 var(--vs-space-2);
  max-width: none;
}

/* Headings receive programmatic focus so screen readers announce the new
   question. They are not in the tab order, so no ring is drawn. */
.vs-intake__legend,
.vs-intake__title,
.vs-intake__status {
  scroll-margin-top: var(--vs-scroll-margin);
}

.vs-intake__legend:focus,
.vs-intake__legend:focus-visible,
.vs-intake__title:focus,
.vs-intake__title:focus-visible,
.vs-intake__status:focus,
.vs-intake__status:focus-visible {
  outline: none;
}

/* The step label is set like the homepage's mono labels (.sc-label). */
.vs-intake__count {
  display: block;
  margin-bottom: var(--vs-space-3);
  font-family: var(--vs-font-label);
  font-size: var(--vs-label-size);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--vs-label-track);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--vs-ink-soft);
}

.vs-intake__question,
.vs-intake__title {
  display: block;
  max-width: 30ch;
  font-family: var(--vs-font-display);
  font-size: var(--vs-question-size);
  font-weight: var(--vs-question-weight);
  line-height: var(--vs-question-line);
  letter-spacing: var(--vs-question-track);
  color: var(--vs-ink);
  text-wrap: balance;
}

/* Multi-sentence questions put each sentence on its own line(s). */
.vs-intake__sentence {
  display: block;
}

.vs-intake__help {
  margin: 0 0 var(--vs-help-gap);
  max-width: 48ch;
  color: var(--vs-ink-soft);
  font-size: var(--vs-text-small);
}

/* ------------------------------------------------------------------ */
/* Option cards                                                        */
/* ------------------------------------------------------------------ */

.vs-intake__options {
  display: flex;
  flex-direction: column;
  gap: var(--vs-options-gap);
  margin: 0;
}

.vs-intake__option {
  position: relative;
}

.vs-intake__input {
  position: absolute;
  top: 50%;
  left: var(--vs-space-3);
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* A paper card on a hairline. Hover steps the edge up to the strong line;
   the selected card takes a 2px accent edge and a filled check. */
.vs-intake__card {
  display: flex;
  align-items: center;
  gap: var(--vs-space-3);
  min-height: var(--vs-card-min-height);
  padding: var(--vs-space-3) var(--vs-space-4);
  border: var(--vs-border) solid var(--vs-rule);
  border-radius: var(--vs-radius);
  background: var(--vs-surface);
  color: var(--vs-ink);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--vs-motion-fast) var(--vs-ease), border-color var(--vs-motion-fast) var(--vs-ease), box-shadow var(--vs-motion-fast) var(--vs-ease), transform var(--vs-motion-fast) var(--vs-ease);
}

.vs-intake__card:hover {
  border-color: var(--vs-rule-strong);
}

.vs-intake__card:active {
  transform: translateY(1px);
}

.vs-intake__key {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--vs-key-size);
  height: var(--vs-key-size);
  border: var(--vs-border) solid var(--vs-rule-strong);
  border-radius: var(--vs-radius-xs);
  font-family: var(--vs-font-label);
  font-size: var(--vs-label-size);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--vs-ink-soft);
  background: transparent;
  transition: background-color var(--vs-motion-fast) var(--vs-ease), border-color var(--vs-motion-fast) var(--vs-ease), color var(--vs-motion-fast) var(--vs-ease);
}

.vs-intake__key:empty {
  visibility: hidden;
}

.vs-intake__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--vs-text-size);
  line-height: 1.35;
}

.vs-intake__mark {
  flex: none;
  position: relative;
  width: var(--vs-mark-size);
  height: var(--vs-mark-size);
  border: calc(var(--vs-border) * 1.5) solid var(--vs-control-line);
  border-radius: 50%;
  transition: background-color var(--vs-motion-fast) var(--vs-ease), border-color var(--vs-motion-fast) var(--vs-ease);
}

.vs-intake__step--multi .vs-intake__mark {
  border-radius: var(--vs-radius-xs);
}

.vs-intake__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 30%;
  height: 55%;
  border: solid var(--vs-accent-ink);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform var(--vs-motion-fast) var(--vs-ease);
}

.vs-intake__input:checked + .vs-intake__card {
  border-color: var(--vs-accent);
  background: var(--vs-accent-soft);
  box-shadow: inset 0 0 0 calc(var(--vs-selected-edge) - var(--vs-border)) var(--vs-accent);
}

/* The number stays text: the darker accent stop, never the bright one. */
.vs-intake__input:checked + .vs-intake__card .vs-intake__key {
  border-color: var(--vs-accent);
  color: var(--vs-accent-text);
}

.vs-intake__input:checked + .vs-intake__card .vs-intake__mark {
  background: var(--vs-accent);
  border-color: var(--vs-accent);
}

.vs-intake__input:checked + .vs-intake__card .vs-intake__mark::after {
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.vs-intake__input:focus-visible + .vs-intake__card {
  outline: 2px solid var(--vs-focus);
  outline-offset: var(--vs-focus-offset);
}

.vs-intake__input[aria-invalid="true"] + .vs-intake__card {
  border-color: var(--vs-error);
}

/* ------------------------------------------------------------------ */
/* Text controls                                                       */
/* ------------------------------------------------------------------ */

.vs-intake__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vs-space-4);
}

.vs-intake__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vs-intake__field-label {
  margin: 0 0 var(--vs-space-2);
  font-size: var(--vs-text-small);
  font-weight: 500;
  color: var(--vs-ink);
}

.vs-intake__optional {
  font-weight: 400;
  color: var(--vs-ink-soft);
}

.vs-intake__text,
.vs-intake__select,
.vs-intake__textarea {
  width: 100%;
  min-height: var(--vs-control-height);
  margin: 0;
  padding: var(--vs-space-3) var(--vs-space-4);
  border: var(--vs-border) solid var(--vs-control-line);
  border-radius: var(--vs-radius-sm);
  background: var(--vs-field);
  color: var(--vs-ink);
  font: inherit;
  font-size: var(--vs-text-size);
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--vs-motion-fast) var(--vs-ease), background-color var(--vs-motion-fast) var(--vs-ease);
}

.vs-intake__textarea {
  resize: vertical;
  min-height: calc(var(--vs-control-height) * 2.6);
}

.vs-intake__text::placeholder,
.vs-intake__textarea::placeholder {
  color: var(--vs-ink-muted);
  opacity: 1;
}

.vs-intake__text:hover,
.vs-intake__select:hover,
.vs-intake__textarea:hover {
  border-color: var(--vs-ink-soft);
}

.vs-intake__text:focus,
.vs-intake__select:focus,
.vs-intake__textarea:focus {
  border-color: var(--vs-ink);
  outline: none;
}

.vs-intake__text:focus-visible,
.vs-intake__select:focus-visible,
.vs-intake__textarea:focus-visible {
  outline: 2px solid var(--vs-focus);
  outline-offset: var(--vs-focus-offset);
}

.vs-intake__select {
  padding-right: calc(var(--vs-space-4) * 2.5);
  background-image: linear-gradient(45deg, transparent 50%, var(--vs-ink-soft) 50%), linear-gradient(135deg, var(--vs-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.vs-intake__select option {
  background: var(--vs-field);
  color: var(--vs-ink);
}

.vs-intake__text[aria-invalid="true"],
.vs-intake__select[aria-invalid="true"],
.vs-intake__textarea[aria-invalid="true"] {
  border-color: var(--vs-error);
}

.vs-intake__field-error,
.vs-intake__error {
  margin: var(--vs-space-2) 0 0;
  min-height: calc(var(--vs-text-error) * 1.45);
  font-size: var(--vs-text-error);
  line-height: 1.45;
  color: var(--vs-error);
}

.vs-intake__field-error:empty,
.vs-intake__error:empty {
  margin-top: var(--vs-space-2);
}

.vs-intake__counter {
  margin: var(--vs-space-2) 0 0;
  min-height: calc(var(--vs-text-tiny) * 1.45);
  font-size: var(--vs-text-tiny);
  color: var(--vs-ink-soft);
  text-align: right;
}

.vs-intake__counter.is-over {
  color: var(--vs-error);
}

.vs-intake__field--text .vs-intake__counter {
  margin-top: var(--vs-space-1);
}

.vs-intake__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* Buttons and actions                                                 */
/* ------------------------------------------------------------------ */

.vs-intake__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vs-space-3);
  margin-top: var(--vs-space-5);
}

/* The homepage button (css/home.css .btn, .btn--primary, .btn--ghost). */
.vs-intake__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--vs-button-height);
  min-width: 44px;
  padding: 0 var(--vs-button-pad);
  border: var(--vs-border) solid transparent;
  border-radius: var(--vs-radius);
  font: inherit;
  font-family: var(--vs-font-display);
  font-size: var(--vs-button-size);
  font-weight: var(--vs-button-weight);
  letter-spacing: var(--vs-button-track);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--vs-motion-fast) var(--vs-ease), border-color var(--vs-motion-fast) var(--vs-ease), transform var(--vs-motion-fast) var(--vs-ease);
}

.vs-intake__button:active {
  transform: translateY(1px);
}

.vs-intake__button:focus-visible {
  outline: 2px solid var(--vs-focus);
  outline-offset: var(--vs-focus-offset);
}

.vs-intake__button--primary {
  background: var(--vs-accent);
  border-color: var(--vs-accent-edge);
  color: var(--vs-accent-ink);
}

.vs-intake__button--primary:hover {
  background: var(--vs-accent-hover);
}

/* An accent ring would vanish against the accent fill. */
.vs-intake__button--primary:focus-visible {
  outline-color: var(--vs-focus-on-accent);
}

.vs-intake__button--secondary {
  background: transparent;
  border-color: var(--vs-rule-strong);
  color: var(--vs-ink);
}

.vs-intake__button--secondary:hover {
  background: var(--vs-surface-raised);
  border-color: var(--vs-ink);
}

/* Long end-screen labels wrap on a narrow phone instead of overflowing. */
@media (max-width: 459px) {
  .vs-intake__end-actions .vs-intake__button {
    white-space: normal;
    min-height: 3rem;
    padding-block: var(--vs-space-2);
    line-height: 1.2;
    text-align: center;
  }
}

.vs-intake__button[disabled] {
  cursor: default;
  opacity: 0.6;
}

/* While sending, the primary button keeps its full colour (its label is the
   status) and shows a spinner; only Back is dimmed. */
.vs-intake__step.is-busy .vs-intake__button--primary[disabled] {
  opacity: 1;
  cursor: progress;
}

.vs-intake__step.is-busy .vs-intake__next::before,
.vs-intake__spinner {
  content: "";
  display: inline-block;
  flex: none;
  width: 0.9em;
  height: 0.9em;
  margin-right: var(--vs-space-2);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.05em;
  animation: vs-intake-spin 0.8s linear infinite;
}

.vs-intake__spinner {
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.35em;
  vertical-align: 0.02em;
}

@keyframes vs-intake-spin {
  to {
    transform: rotate(360deg);
  }
}

/* While a send error is shown, Retry in the notice is the one way forward. */
.vs-intake__step.has-notice .vs-intake__next,
.vs-intake__step.has-notice .vs-intake__hint {
  display: none;
}

/* The class rule above sets display, which would beat the browser's [hidden] rule. */
.vs-intake__button.is-hidden,
.vs-intake__button[hidden] {
  display: none;
}

.vs-intake__hint {
  font-family: var(--vs-font-label);
  font-size: var(--vs-label-size);
  letter-spacing: 0.01em;
  color: var(--vs-ink-muted);
}

@media (hover: none), (pointer: coarse) {
  .vs-intake__hint {
    display: none;
  }
}

.vs-intake__fine-print {
  margin: var(--vs-space-4) 0 0;
  font-size: var(--vs-text-tiny);
  color: var(--vs-ink-soft);
}

.vs-intake__fine-print a,
.vs-intake__body a {
  color: var(--vs-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.vs-intake__fine-print a {
  /* A 44px tall hit area without changing the line height. */
  display: inline-block;
  padding: 14px 0;
  margin: -14px 0;
}

.vs-intake__fine-print a:focus-visible {
  outline: 2px solid var(--vs-focus);
  outline-offset: -10px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------ */
/* Notices, status and end screen                                      */
/* ------------------------------------------------------------------ */

.vs-intake__notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vs-space-3);
  margin-top: var(--vs-space-4);
  padding: var(--vs-space-3) var(--vs-space-4);
  border: var(--vs-border) solid var(--vs-error);
  border-left-width: 3px;
  border-radius: var(--vs-radius-sm);
  background: var(--vs-error-soft);
}

.vs-intake__notice[hidden] {
  display: none;
}

.vs-intake__notice:focus {
  outline: none;
}

.vs-intake__notice:focus-visible {
  outline: 2px solid var(--vs-focus);
  outline-offset: var(--vs-focus-offset);
}

.vs-intake__notice-text {
  flex: 1 1 16rem;
  margin: 0;
  font-size: var(--vs-text-small);
  color: var(--vs-ink);
}

.vs-intake__status {
  margin: 0;
  padding-top: var(--vs-space-6);
  font-family: var(--vs-font-display);
  font-size: var(--vs-question-size);
  font-weight: var(--vs-question-weight);
  line-height: var(--vs-question-line);
  letter-spacing: var(--vs-question-track);
  color: var(--vs-ink-soft);
  outline: none;
}

.vs-intake__step--status .vs-intake__actions {
  padding-top: 0;
}

.vs-intake__title {
  margin: 0 0 var(--vs-space-4);
  max-width: 20ch;
  font-size: var(--vs-title-size);
  line-height: var(--vs-title-line);
  letter-spacing: var(--vs-title-track);
  outline: none;
}

.vs-intake__body {
  margin: 0 0 var(--vs-space-6);
  max-width: 52ch;
  font-size: calc(var(--vs-text-size) * 1.0625);
  color: var(--vs-ink-soft);
}

.vs-intake__end-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vs-space-3);
}

/* ------------------------------------------------------------------ */
/* Live region and honeypot                                            */
/* ------------------------------------------------------------------ */

.vs-intake__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.vs-intake__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Wider screens                                                       */
/* ------------------------------------------------------------------ */

@media (min-width: 560px) {
  .vs-intake__fields {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--vs-space-4);
  }

  .vs-intake__field[data-field="name"],
  .vs-intake__field[data-field="email"] {
    grid-column: 1 / -1;
  }
}

/* Short phone screens: a tighter rhythm keeps Continue above the fold on the
   six-option multi-select at 360 by 740. Cards stay above 44px. */
@media (max-width: 559px) and (max-height: 820px) {
  :where(vs-intake) {
    --vs-card-min-height: 48px;
    --vs-options-gap: 6px;
    --vs-progress-gap: var(--vs-space-5);
    --vs-help-gap: var(--vs-space-4);
  }

  .vs-intake__card {
    padding-block: 10px;
  }

  .vs-intake__count {
    margin-bottom: var(--vs-space-2);
  }

  .vs-intake__actions {
    margin-top: var(--vs-space-4);
  }
}

/* ------------------------------------------------------------------ */
/* Forced colours (Windows high contrast)                              */
/* ------------------------------------------------------------------ */

@media (forced-colors: active) {
  .vs-intake__progress {
    height: 8px;
    border: 1px solid CanvasText;
    background: Canvas;
  }

  .vs-intake__progress-bar {
    forced-color-adjust: none;
    background: Highlight;
  }

  .vs-intake__button--primary {
    border-width: 3px;
  }

  .vs-intake__input:checked + .vs-intake__card {
    border-width: 3px;
    border-color: Highlight;
  }
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  vs-intake,
  vs-intake *,
  vs-intake *::before,
  vs-intake *::after {
    transition: none !important;
    animation: none !important;
  }

  .vs-intake__step.is-entering {
    opacity: 1;
    transform: none;
  }

  .vs-intake__card:active,
  .vs-intake__button:active {
    transform: none;
  }
}