/* Docusuite public form fill — page-local styles.
   Every color/space resolves to a --ehs-* token or an .ehs-* component from
   /branding/brand.css. NO bespoke hex. Page-local classes use the ff- prefix. */

.ff-main { max-width: 680px; padding-block: var(--ehs-s6) var(--ehs-s7); }

/* Masthead (persists on every step) */
.ff-masthead { margin-bottom: var(--ehs-s5); }
.ff-title { margin: 0 0 var(--ehs-s2); font: 800 clamp(24px, 5vw, 32px)/1.15 var(--ehs-font-display); color: var(--ehs-maroon); }
.ff-desc { margin: 0; font-size: 15px; line-height: 1.55; }

/* Progress */
.ff-progress { margin-bottom: var(--ehs-s4); }
.ff-progress__label { margin: 0 0 var(--ehs-s2); font-size: 13px; font-weight: 600; color: var(--ehs-muted); }
.ff-progress__label b { color: var(--ehs-maroon); }
.ehs-progress__bar { transition: width .25s ease; }

/* Section card */
.ff-card { padding: clamp(20px, 5vw, 36px); }
.ff-section__title { margin: 0; font: 700 20px/1.25 var(--ehs-font-display); color: var(--ehs-ink); }
/* Each step focuses its heading so keyboard tabbing resumes at the new section
   (the announcement itself comes from the aria-live progress label). A heading is
   a full-width block, so the ring drew a box across the whole top of the card for
   mouse users who never asked for it — and Chromium counts a programmatic focus()
   as :focus-visible, so that alone was not enough to suppress it. The marker class
   goes on at focus() time and comes off the moment the user touches a key, which
   leaves a real keyboard user with a real ring. */
.ff-section__title.ff-noring:focus, .ff-section__title.ff-noring:focus-visible,
.ff-done__title.ff-noring:focus, .ff-done__title.ff-noring:focus-visible { outline: none; }
.ff-section__title:focus-visible, .ff-done__title:focus-visible {
  outline: 2px solid var(--ehs-focus); outline-offset: 4px; border-radius: 4px;
}
.ff-section__rule { margin: var(--ehs-s3) 0 var(--ehs-s5); }
.ff-section__desc { margin: var(--ehs-s2) 0 0; font-size: 14px; line-height: 1.55; }
.ff-section .ehs-field + .ehs-field,
.ff-section .ehs-field + .ff-gridfield,
.ff-section .ehs-field + .ff-choices,
.ff-section .ehs-field + .ff-dayfield,
.ff-section .ff-gridfield + .ehs-field,
.ff-section .ff-dayfield + .ehs-field,
.ff-section .ff-choices + .ehs-field { margin-top: var(--ehs-s5); }
/* A section description is followed by a question, not welded to it. Every field
   type gets the same gap; text fields used to get 0 while the day picker got 16. */
.ff-section .ff-section__desc + .ehs-field,
.ff-section .ff-section__desc + .ff-gridfield,
.ff-section .ff-section__desc + .ff-choices,
.ff-section .ff-section__desc + .ff-dayfield { margin-top: var(--ehs-s4); }
.ff-section .ehs-gold-rule + .ff-gridfield,
.ff-section .ehs-gold-rule + .ff-choices,
.ff-section .ehs-gold-rule + .ehs-field,
.ff-section .ehs-gold-rule + .ff-gridfield,
.ff-section .ehs-gold-rule + .ff-dayfield,
.ff-section .ehs-gold-rule + .ff-choices { margin-top: 0; }

/* Mobile-friendly controls: 16px stops iOS auto-zoom; taller = easier target. */
.ff-card .ehs-input, .ff-card .ehs-textarea { font-size: 16px; padding: 12px 14px; }
.ff-card .ehs-textarea { min-height: 110px; }

.ff-gridfield, .ff-choices, .ff-dayfield { border: 0; padding: 0; margin: 0; min-width: 0; }
/* The day cards carry their own borders and gaps, so the fieldset only needs to
   space itself off the legend and hint above it. */
.ff-dayfield .ehs-daypick { margin-top: var(--ehs-s2); }
.ff-dayfield legend { padding: 0; }
.ff-dayfield .ehs-hint { display: block; margin-top: 4px; }
/* Time inputs sit inside a card that is already tight on a phone. */
.ff-dayfield .ehs-daypick__times .ehs-input { max-width: 100%; }
/* The times row is a grid, so the generic .ehs-field adjacency margin used
   between questions would drop the second column below the first. */
.ff-dayfield .ehs-daypick__times .ehs-field { margin-top: 0; }
.ff-choices .ehs-choice-card { margin-top: var(--ehs-s2); align-items: center; }
.ff-choices legend, .ff-gridfield legend { padding: 0; }

.ff-error { margin: var(--ehs-s1) 0 0; font-size: 13px; font-weight: 600; color: var(--ehs-bad-text); }

/* Grid: mobile-first = stacked rows with pill choices */
.ff-grid { margin-top: var(--ehs-s3); }
.ff-grid__head { display: none; }
.ff-grid__row { padding: var(--ehs-s3) 0; border-top: 1px solid var(--ehs-rule); }
.ff-grid__row:first-of-type { border-top: 0; }
.ff-grid__rowlabel { display: block; font-size: 15px; font-weight: 600; color: var(--ehs-ink); margin-bottom: var(--ehs-s2); }
.ff-grid__cell { display: inline-flex; margin-right: var(--ehs-s2); cursor: pointer; }
.ff-grid__cell input { position: absolute; opacity: 0; pointer-events: none; }
.ff-grid__pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 76px; padding: 10px 18px; font-size: 15px; font-weight: 600;
  color: var(--ehs-ink); background: var(--ehs-paper);
  border: 1px solid var(--ehs-rule-strong); border-radius: var(--ehs-r-pill);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ff-grid__cell:hover .ff-grid__pill { border-color: var(--ehs-maroon); }
.ff-grid__cell input:checked + .ff-grid__pill {
  border-color: var(--ehs-maroon); color: var(--ehs-maroon);
  background: var(--ehs-gold-pale); box-shadow: 0 0 0 3px rgb(var(--ehs-maroon-rgb) / .12);
}
.ff-grid__cell input:focus-visible + .ff-grid__pill { outline: 2px solid var(--ehs-focus); outline-offset: 2px; }
.ff-grid__row--bad .ff-grid__rowlabel { color: var(--ehs-bad-text); }
.ff-grid__row--bad { box-shadow: inset 2px 0 0 var(--ehs-bad-border); padding-left: var(--ehs-s3); }

/* >=560px: true matrix — headers appear, pills become plain radios in columns */
@media (min-width: 560px) {
  .ff-grid__head { display: grid; grid-template-columns: 1fr repeat(var(--ff-cols), 88px); padding-bottom: var(--ehs-s2); border-bottom: 2px solid var(--ehs-rule-strong); }
  .ff-grid__col { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ehs-muted); text-align: center; }
  .ff-grid__row { display: grid; grid-template-columns: 1fr repeat(var(--ff-cols), 88px); align-items: center; padding: 0; border-top: 1px solid var(--ehs-rule); }
  .ff-grid__row:first-of-type { border-top: 0; }
  .ff-grid__row:hover { background: var(--ehs-cream); }
  .ff-grid__rowlabel { margin: 0; padding: var(--ehs-s3) var(--ehs-s2) var(--ehs-s3) 0; font-weight: 400; }
  .ff-grid__cell { margin: 0; justify-content: center; align-self: stretch; align-items: center; }
  .ff-grid__cell .ff-grid__pill { min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: 0; }
  .ff-grid__cell input { position: static; opacity: 1; pointer-events: auto; width: 18px; height: 18px; }
  .ff-grid__row--bad { padding-left: var(--ehs-s3); }
}

/* Nav */
.ff-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--ehs-s3); margin-top: var(--ehs-s6); padding-top: var(--ehs-s5); border-top: 1px solid var(--ehs-rule); }
.ff-back-slot { display: inline-flex; }
@media (max-width: 480px) { .ff-nav .ff-next { flex: 1; justify-content: center; } }

.ff-foot { margin-top: var(--ehs-s5); font-size: 13px; text-align: center; }
.ff-foot a { color: var(--ehs-maroon); font-weight: 600; }

/* Honeypot — off-screen, NOT display:none (bots skip display:none fields) */
.ff-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ff-fatal { margin-top: var(--ehs-s5); }

/* Success / closed / not-found panels */
.ff-done { text-align: center; padding: var(--ehs-s7) var(--ehs-s5); margin-top: var(--ehs-s7); }
.ff-done__disc {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ehs-ok-pale); color: var(--ehs-ok);
  font-size: 30px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--ehs-s4);
}
.ff-done__disc--info { background: var(--ehs-info-pale); color: var(--ehs-info); }
.ff-done__title { margin: 0 0 var(--ehs-s3); font: 700 26px/1.2 var(--ehs-font-display); color: var(--ehs-maroon); }
.ff-done p { margin: 0 auto; max-width: 46ch; line-height: 1.6; }
.ff-done a { color: var(--ehs-maroon); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .ff-section { animation: ff-in .16s ease; }
  @keyframes ff-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}