/* Intake wizard, built to design-reference/intake.html.
   Layout only; every value is a token. */

/* ---------- wizard chrome ---------- */
.rfh-wizhead__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--rfh-4); padding: var(--rfh-6) var(--rfh-8);
}
.rfh-wizhead__brand img { display: block; height: auto; }
.rfh-wizhead__acts { display: flex; gap: var(--rfh-3); flex-wrap: wrap; }
.rfh-ghost-pill {
  display: inline-flex; align-items: center; min-height: var(--rfh-tap-min);
  padding: 0 var(--rfh-6); border: 1px solid var(--rfh-line);
  border-radius: var(--rfh-radius-pill); color: var(--rfh-ink);
  text-decoration: none; font-weight: 600;
}
.rfh-ghost-pill:hover { background: var(--rfh-surface); color: var(--rfh-ink); }

/* ---------- the shell ----------
   Three rules make the bar at the foot sit on the bottom edge of the screen,
   and all three are load-bearing. The shell is a flex column exactly as tall
   as the viewport; main takes up whatever slack is left; the bar is the
   shell's last child. Drop any one of them and a short step leaves the bar
   floating halfway up the page, because sticky only pins an element that
   would otherwise scroll out of view.

   The admin bar height is subtracted because WordPress shifts the document
   down by it when someone is signed in, and 100dvh would then overflow by
   exactly that much. The var is absent for signed-out visitors, so it falls
   back to zero. The plain 100vh above it is the fallback for browsers that do
   not understand dvh, which invalidates the whole calc. */
.rfh-shell {
  display: flex; flex-direction: column;
  min-height: 100vh;
  min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
.rfh-intake { flex: 1 1 auto; display: flex; flex-direction: column; }
.rfh-intake__inner {
  flex: 1 1 auto; width: 100%; max-width: 808px; margin: 0 auto;
  padding: var(--rfh-12) var(--rfh-6);
  display: flex; flex-direction: column; gap: var(--rfh-8);
}
.rfh-wizard__head { display: flex; flex-direction: column; gap: var(--rfh-3); }
.rfh-wizard__q { font: var(--rfh-h2); letter-spacing: var(--rfh-track-h2); margin: 0; }
.rfh-wizard__hint { margin: 0; }
.rfh-wizard fieldset { border: 0; margin: 0; padding: 0; }

/* ---------- choices, two up ---------- */

/* ---------- the note that explains what is not kept ---------- */
.rfh-keepnote {
  display: flex; gap: var(--rfh-4); align-items: flex-start;
  padding: var(--rfh-6); border-radius: var(--rfh-radius-card);
  background: var(--rfh-accent-tint); font: var(--rfh-small);
}
.rfh-keepnote svg { flex: 0 0 auto; margin-top: 1px; color: var(--rfh-accent); }

/* ---------- sticky footer with segmented progress ----------
   The footer is a child of the shell rather than of the 808px column, so it
   spans the viewport without the negative-margin breakout it used to need.
   The breakout has to stay gone: outside the column it would make the footer
   wider than the viewport and scroll the page sideways. */
.rfh-shell > .rfh-wizfoot {
  position: sticky; bottom: 0; background: var(--rfh-ground);
  border-top: 1px solid var(--rfh-line); box-shadow: var(--rfh-float);
  padding: 0 0 env(safe-area-inset-bottom, 0px);
}
/* One segment per section, each filling as that section is worked through.
   Anchored to the bottom of the screen in the sticky footer, aligned with the
   content column rather than capped, so it reads as a bar across the foot of
   the page rather than a widget sitting in it. */
.rfh-wizfoot__top { width: 100%; max-width: 808px; margin: 0 auto; padding: var(--rfh-3) var(--rfh-6) 0; }
.rfh-wizfoot__top:empty { display: none; }
.rfh-bar { display: flex; gap: 6px; }
.rfh-bar__seg {
  flex: 1 1 0; height: 6px; border-radius: var(--rfh-radius-pill);
  overflow: hidden; background: var(--rfh-line);
}
.rfh-bar__seg i { display: block; height: 6px; background: var(--rfh-ink); transition: width .2s var(--rfh-ease); }
@media (prefers-reduced-motion: reduce) { .rfh-bar__seg i { transition: none; } }
/* The shared wizard-footer component lays its inner out as a single row. Here
   it is the content column only, and the buttons and the disclaimer stack
   inside it, as they do in the design. Scoped to the shell so the component
   keeps its own behaviour on every other surface. */
.rfh-shell .rfh-wizfoot__inner {
  width: 100%; max-width: 808px; margin: 0 auto; padding: 0;
  display: block;
}
.rfh-wizfoot__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rfh-4); padding: var(--rfh-3) var(--rfh-6);
}
.rfh-wizfoot__next { min-width: 140px; }

/* The disclaimer is required on every page and the bar has to be the last
   thing in the document, so the two requirements meet here. */
.rfh-wizfoot__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--rfh-2) var(--rfh-4);
  margin: 0; padding: 0 var(--rfh-6) var(--rfh-3);
  color: var(--rfh-ink-2); font: var(--rfh-small);
}

/* The retired /intake/ flow still prints the disclaimer at the end of its
   content. It keeps its styling until that template goes. */
.rfh-wizard__disclaimer { margin: 0; color: var(--rfh-ink-2); font: var(--rfh-small); }

.rfh-screenout-ask {
  background: var(--rfh-stop-tint); border: 1px solid var(--rfh-stop);
  border-radius: var(--rfh-radius-card); padding: var(--rfh-6);
  margin: 0;
}
.rfh-screenout-ask p { margin: 0; color: var(--rfh-stop); }

.rfh-wizard__body > h2 { margin-top: var(--rfh-12); margin-bottom: var(--rfh-4); }
.rfh-wizard__body > p  { margin-bottom: var(--rfh-6); }
.rfh-wizard__body > .rfh-stub { margin-top: var(--rfh-8); }
.rfh-wizard__body > .rfh-btn { margin-top: var(--rfh-4); }

@media (max-width: 720px) {
  .rfh-wizhead__inner, .rfh-wizfoot__inner { padding-left: var(--rfh-6); padding-right: var(--rfh-6); }
}

/* ---------- engine additions ---------- */

.rfh-rhythms { display: flex; flex-direction: column; gap: var(--rfh-8); }
.rfh-rhythm { border: 0; margin: 0; padding: 0; }
.rfh-rhythm legend { padding: 0; margin-bottom: var(--rfh-4); font-weight: 600; }

.rfh-legalmark {
  margin: 0; padding: var(--rfh-3) var(--rfh-4);
  border-radius: var(--rfh-radius-field);
  background: var(--rfh-caution-tint); color: var(--rfh-caution);
  font: var(--rfh-small);
}

.rfh-end { display: flex; flex-direction: column; gap: var(--rfh-4); }
.rfh-end h1 { margin-bottom: var(--rfh-2); }
.rfh-end p { margin: 0; }
.rfh-end--stop h1 { color: var(--rfh-stop); }
.rfh-end--good h1 { color: var(--rfh-accent-press); }

/* Two answers instead of Back and Next (the outside-care question). */
.rfh-wizfoot__nav--choice { flex-wrap: wrap; }
@media (max-width: 480px) {
  .rfh-wizfoot__nav--choice { flex-direction: column-reverse; align-items: stretch; }
}