/* ==========================================================================
   Dactyl Smart Form — functional styling

   This is NOT decoration. Every rule below the divider makes the step
   mechanism actually work: one question visible at a time, Next/Back
   navigating between them, the review step showing what will be sent. Ship
   this form with no CSS at all and every .step renders at once, stacked —
   there is no other reason for it to look like a stepped form rather than
   one long page of every question together.

   Everything here is scoped under [data-smartform] specifically so it can
   never leak onto, or collide with, anything else on the site this gets
   pasted into. A site's own CSS almost certainly already has a .btn, a
   .field, an .input — this file uses those same names on purpose (they are
   part of the markup contract, see SMART-FORM.md), and scoping is what keeps
   two same-named rulesets from fighting each other outside this one
   component.

   Colours, radii and spacing below are ordinary defaults, not a brand — swap
   the custom properties at the top for this site's own palette rather than
   editing the rules that use them.
   ========================================================================== */

[data-smartform] {
  --sf-ink: #1a1a1a;
  --sf-ink-faint: #6b6b6b;
  --sf-border: #d8d8d8;
  --sf-accent: #0e7a86;
  --sf-accent-ink: #0a5a63;
  --sf-tint: #eef6f7;
  --sf-white: #ffffff;
  --sf-error: #b3261e;
  --sf-radius: 10px;
  --sf-radius-sm: 6px;

  max-width: 40rem;
  background: var(--sf-white);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  overflow: hidden;
  font-family: inherit;
  color: var(--sf-ink);
}

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

.finder__progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--sf-accent-ink);
  color: var(--sf-white);
}
.finder__bar {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.finder__bar i {
  display: block;
  height: 100%;
  background: var(--sf-white);
  transition: width 0.3s ease-out;
}
.finder__count {
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

.finder__body { padding: 1.25rem; }
@media (min-width: 640px) { .finder__body { padding: 1.75rem; } }

/* ------------------------------------------------------- The step mechanism
   THE LOAD-BEARING RULE. smartform.js only ever adds or removes the
   "is-active" class — it never touches display itself, on the assumption
   that CSS is what turns that class into something visible or not. */
.finder__steps { position: relative; overflow-anchor: none; }
.finder__steps.is-swapping { overflow: hidden; }

.step { display: none; }
.step.is-active { display: block; }
/* The outgoing step during stepswap.js's animated swap: kept painting, but
   taken out of flow and out of the way of clicks, so the incoming step can
   occupy the same space while both are visible for the crossfade. Written
   as a compound selector so it wins over the plain ".step" rule above. */
.step.step--leaving {
  display: block;
  position: absolute;
  inset: 0 0 auto 0;
  pointer-events: none;
}
.step h2 { margin: 0 0 0.35rem; }
.step > .lead { margin: 0 0 1rem; color: var(--sf-ink-faint); }

.finder__nav {
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sf-border);
}
.finder__nav--solo { min-height: 52px; }

/* ---------------------------------------------------------------- Buttons
   `hidden` is a UA-stylesheet rule, and ANY author rule that sets `display`
   beats it — .btn below is display:inline-flex, so smartform.js setting
   btnNext.hidden = true would pass every DOM check and the button would
   still be sitting right there. This is the fix. */
[data-smartform] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--sf-accent);
  color: var(--sf-white);
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
[data-smartform] .btn[hidden] { display: none; }
[data-smartform] .btn:hover { background: var(--sf-accent-ink); }
[data-smartform] .btn--ghost {
  background: transparent;
  color: var(--sf-ink);
  box-shadow: inset 0 0 0 1.5px var(--sf-border);
}
[data-smartform] .btn--ghost:hover { background: var(--sf-tint); }
[data-smartform] .btn--lg { min-height: 56px; padding: 0.9rem 2rem; font-size: 1.05rem; }
[data-smartform] .btn--block { width: 100%; }

/* ----------------------------------------------------------------- Fields */

.field { margin-bottom: 0.9rem; }
.field label { display: block; margin-bottom: 0.35rem; font-weight: 600; }
.field .hint { display: block; font-weight: 400; font-size: 0.85rem; color: var(--sf-ink-faint); margin-top: 0.15rem; }

[data-smartform] .input,
[data-smartform] .textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-white);
  color: var(--sf-ink);
  font: inherit;
}
[data-smartform] .textarea { min-height: 110px; resize: vertical; }
[data-smartform] .input:focus,
[data-smartform] .textarea:focus {
  outline: none;
  border-color: var(--sf-accent);
  box-shadow: 0 0 0 3px rgba(14, 122, 134, 0.18);
}
[data-smartform] .input[aria-invalid="true"],
[data-smartform] .textarea[aria-invalid="true"] { border-color: var(--sf-error); }

.error { display: none; margin-top: 0.35rem; color: var(--sf-error); font-size: 0.88rem; font-weight: 600; }
.error.is-shown { display: block; }

/* --------------------------------------------------------- Option tiles
   The native input is visually hidden but stays in the DOM (not
   display:none) so it's still focusable, checkable and announced by a
   screen reader — .option__dot is a decoration drawn beside it, not a
   replacement for it. */
.options { display: grid; gap: 0.65rem; }
@media (min-width: 560px) { .options--2 { grid-template-columns: repeat(2, 1fr); } }

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 64px;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-white);
  cursor: pointer;
}
.option:hover { border-color: var(--sf-accent); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option__dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--sf-border);
  flex: none;
  display: grid;
  place-items: center;
}
.option__dot::after {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--sf-white);
  transform: scale(0);
  transition: transform 0.15s ease-out;
}
.option__text { display: block; }
.option__title { display: block; font-weight: 600; line-height: 1.25; }
.option__sub { display: block; font-size: 0.85rem; color: var(--sf-ink-faint); }

.option:has(input:checked) { border-color: var(--sf-accent); background: var(--sf-tint); }
.option:has(input:checked) .option__dot { border-color: var(--sf-accent); background: var(--sf-accent); }
.option:has(input:checked) .option__dot::after { transform: scale(1); }
.option:has(input:focus-visible) { outline: 2px solid var(--sf-accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ Chips */

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 44px;
  padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--sf-border);
  border-radius: 999px;
  background: var(--sf-white);
  font-weight: 600;
  cursor: pointer;
}
.chip span:hover { border-color: var(--sf-accent); }
.chip input:checked + span { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-white); }
.chip input:focus-visible + span { outline: 2px solid var(--sf-accent); outline-offset: 2px; }

/* --------------------------------------------------------- Review step */

.sf-review {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--sf-radius-sm);
  background: var(--sf-tint);
  display: grid;
  /* The value column used to be a bare 1fr. A grid item's automatic minimum
     width defaults to its content's min-content size — but overflow-wrap:
     anywhere below (needed so a long, unbroken value like an email address
     doesn't overflow the card) tells the browser that content can break
     ANYWHERE, which collapses that min-content size toward a single
     character. Nothing then stops the 1fr track shrinking to match, so once
     this sits in a container narrower than the row's natural width — a
     sidebar contact form, not just a phone — every value wraps one letter
     per line. minmax(6rem, 1fr) puts a floor under the column so normal
     word-wrapping applies first, and overflow-wrap only kicks in for a
     genuinely long word once even that floor is full. */
  grid-template-columns: minmax(8rem, auto) minmax(6rem, 1fr);
  gap: 0.5rem 0.9rem;
  font-size: 0.92rem;
}
.sf-review dt { font-weight: 600; color: var(--sf-ink-faint); }
.sf-review dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Utility */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mt-md { margin-top: 1.25rem; }

/* The "Other" text box under a single-choice question. Hidden until its
   option is picked; stated with !important because a site's own .field rule
   can set display and would otherwise beat the hidden attribute. */
.sf-other[hidden] { display: none !important; }
.sf-other { margin-top: 0.85rem; }