/* =====================================================================
 * VDS 2026 — Marketing Growth Assessment (Gravity Forms)
 *
 * The GF rebuild of section 10's quiz. Deliberately a THIRD sheet, and the
 * reasoning matters (see handoff.md §4, gotcha #13):
 *
 *   vds26-shell.css  loads sitewide  — tokens, .vds-btn, header/footer
 *   vds26-home.css   loads on the HOMEPAGE ONLY — every section's styles
 *   vds26-assessment.css  loads wherever this FORM renders
 *
 * The form has to be reviewable on a preview page before anyone decides
 * whether it replaces section 10, and the homepage sheet scopes everything
 * to `.bakery.home` — a class that does not exist anywhere else. A component
 * that can only be styled on the page it might never land on cannot be
 * evaluated. So this component owns its own names (`.vds-gfq-*`, never the
 * JS quiz's `.vds-quiz-*`) and its own sheet, and renders identically on any
 * page. If it does replace section 10, nothing here collides with the
 * homepage sheet, because no selector is shared.
 *
 * Tokens come from the shell sheet, which loads everywhere, so dark mode
 * tracks the `data-theme` toggle for free.
 *
 * SPECIFICITY. option-page-styles.css sets `body span`, `body p`, `body li`,
 * `form label` and `button` (gotcha #22), and Gravity Forms' own four sheets
 * load AFTER vds26-shell.css. Every rule that sets type or colour therefore
 * carries the `body #content` prefix, and every state carries the same
 * prefix as its base rule (gotcha #25).
 *
 * The wrapper class is `vds26-assessment-form_wrapper`: Gravity Forms appends
 * `_wrapper` to the form's cssClass. The form itself gets the bare class.
 * ===================================================================== */

/* --- The card ------------------------------------------------------- *
 * Same treatment as the JS quiz's `.vds-quiz`: one surface, capped well
 * under the container, because a five-option question spanning 1200px puts
 * the radio a screen away from its label. */
body #content .vds26-assessment-form_wrapper{
  position:relative;max-width:760px;margin:0 auto;
  background:var(--vds-surface);border:1px solid var(--vds-border);
  border-radius:var(--vds-r-xl);
  box-shadow:var(--vds-card-shadow-lg,var(--vds-card-shadow));
  padding:clamp(1.4rem,1rem + 1.6vw,2.4rem);
  font-family:var(--vds-font-body,inherit)}
/* GF's legacy sheet sets its own wrapper margins. */
body #content .vds26-assessment-form_wrapper form{margin:0}

/* --- Progress ------------------------------------------------------- *
 * GF writes the fill width AND its colours as an inline style attribute, so
 * the fill colour is not ours to set from here — it is set in the form
 * definition (build-gf-assessment.py) to --vds-red's literal value. What is
 * styleable is the track, the height and the label. The percentage text GF
 * prints inside the fill is hidden: at 6px it is unreadable, and the
 * "Step 1 of 5" title above it says the same thing accessibly. */
body #content .vds26-assessment-form_wrapper .gf_progressbar_wrapper{
  padding:0;margin:0 0 clamp(1.1rem,2.2vw,1.6rem);border:0}
body #content .vds26-assessment-form_wrapper h3.gf_progressbar_title{
  font-family:var(--vds-font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--vds-ink-2);
  margin:0 0 .55rem;line-height:1.2}
body #content .vds26-assessment-form_wrapper .gf_progressbar{
  height:6px;border-radius:var(--vds-r-pill);background:var(--vds-surface-2);
  overflow:hidden;padding:0;border:0;box-shadow:none}
body #content .vds26-assessment-form_wrapper .gf_progressbar_percentage{
  height:6px;border-radius:var(--vds-r-pill);
  transition:width var(--vds-t-slow,.5s) ease}
body #content .vds26-assessment-form_wrapper .gf_progressbar_percentage span{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  body #content .vds26-assessment-form_wrapper .gf_progressbar_percentage{
    transition:none}
}

/* --- The question --------------------------------------------------- */
body #content .vds26-assessment-form_wrapper ul.gform_fields{
  margin:0;padding:0;list-style:none}
body #content .vds26-assessment-form_wrapper li.gfield{
  margin:0;padding:0;list-style:none}
body #content .vds26-assessment-form_wrapper label.gfield_label{
  display:block;font-family:var(--vds-font-display);font-weight:600;
  font-size:var(--vds-step-1);line-height:1.3;color:var(--vds-ink);
  letter-spacing:-.01em;margin:0 0 clamp(.9rem,2vw,1.2rem);
  text-wrap:auto}
body #content .vds26-assessment-form_wrapper label.gfield_label
  .gform-field-label__text{font-size:inherit;font-weight:inherit;
  line-height:inherit;color:inherit}
/* Every question is required and every question is a radio group, so five
   red asterisks add nothing but noise. The required state is still in the
   accessibility tree via aria-required and still enforced on submit. */
body #content .vds26-assessment-form_wrapper .gfield_required{display:none}

/* --- Options -------------------------------------------------------- *
 * The whole row is the hit target, not the 16px dot. The native input stays
 * in the DOM, focusable and operable, positioned transparent under the drawn
 * control rather than display:none'd — a display:none radio is unreachable
 * by keyboard and drops out of the form. Same construction as the JS quiz. */
body #content .vds26-assessment-form_wrapper ul.gfield_radio{
  display:grid;grid-template-columns:1fr;gap:.55rem;margin:0;padding:0;
  list-style:none}
body #content .vds26-assessment-form_wrapper ul.gfield_radio>li.gchoice{
  position:relative;margin:0;padding:0;list-style:none}
body #content .vds26-assessment-form_wrapper li.gchoice input[type="radio"]{
  position:absolute;opacity:0;width:1.05rem;height:1.05rem;margin:0;
  top:.9rem;left:.9rem}
body #content .vds26-assessment-form_wrapper li.gchoice label{
  position:relative;display:block;
  padding:.75rem .9rem .75rem 2.5rem;
  border:1px solid var(--vds-border);border-radius:var(--vds-r-md);
  background:var(--vds-bg);cursor:pointer;
  font-family:var(--vds-font-body,inherit);font-weight:400;
  font-size:.94rem;line-height:1.45;color:var(--vds-ink-2);
  transition:border-color var(--vds-t-base),background var(--vds-t-base),
             color var(--vds-t-base)}
body #content .vds26-assessment-form_wrapper li.gchoice label::before{
  content:"";position:absolute;left:.9rem;top:.93rem;
  width:1.05rem;height:1.05rem;
  border:2px solid var(--vds-border-strong,var(--vds-border));
  border-radius:50%;background:var(--vds-bg);
  transition:border-color var(--vds-t-base),box-shadow var(--vds-t-base)}
body #content .vds26-assessment-form_wrapper li.gchoice label::after{
  content:"";position:absolute;left:1.18rem;top:1.21rem;
  width:.49rem;height:.49rem;border-radius:50%;background:var(--vds-red);
  transform:scale(0);transition:transform var(--vds-t-base)}
body #content .vds26-assessment-form_wrapper li.gchoice label:hover{
  border-color:rgba(217,33,40,.32);color:var(--vds-ink)}
body #content .vds26-assessment-form_wrapper
  li.gchoice input[type="radio"]:checked+label{
  border-color:var(--vds-red);background:var(--vds-surface-2);
  color:var(--vds-ink)}
body #content .vds26-assessment-form_wrapper
  li.gchoice input[type="radio"]:checked+label::after{transform:scale(1)}
body #content .vds26-assessment-form_wrapper
  li.gchoice input[type="radio"]:checked+label::before{
  border-color:var(--vds-red)}
/* The native input is transparent, so its own focus ring is invisible.
   Draw it on the control the user can actually see. */
body #content .vds26-assessment-form_wrapper
  li.gchoice input[type="radio"]:focus+label::before{
  box-shadow:0 0 0 3px rgba(217,33,40,.35)}
body #content .vds26-assessment-form_wrapper
  li.gchoice input[type="radio"]:focus+label{border-color:var(--vds-red)}
@media (prefers-reduced-motion:reduce){
  body #content .vds26-assessment-form_wrapper li.gchoice label::after{
    transition:none}
}

/* --- Page nav ------------------------------------------------------- *
 * GF's page buttons are <button>s it renders itself; there is no way to give
 * them our .vds-btn class from the form definition, so the primitive is
 * restated here against GF's own classes. Next/Submit read as primary, Back
 * as the quiet ghost — the same pairing section 10 uses. */
body #content .vds26-assessment-form_wrapper .gform_page_footer{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin:clamp(1.1rem,2.2vw,1.5rem) 0 0;padding:0;border:0}
/* Page 1 has no Back, so a lone Next would sit left under space-between. */
body #content .vds26-assessment-form_wrapper
  .gform_page_footer:not(:has(.gform_previous_button)){justify-content:flex-end}
body #content .vds26-assessment-form_wrapper .gform_page_footer button,
body #content .vds26-assessment-form_wrapper .gform_page_footer input[type="submit"],
body #content .vds26-assessment-form_wrapper .gform_footer button,
body #content .vds26-assessment-form_wrapper .gform_footer input[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--vds-font-display);font-weight:600;font-size:1rem;
  line-height:1.2;padding:.95rem 1.7rem;border-radius:var(--vds-r-pill);
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  width:auto;margin:0;text-transform:none;letter-spacing:normal;
  /* --vds-grad-brand-deep, NOT --vds-grad-brand: the light end of the plain
     brand gradient is #ed4753, which caps white at 3.73:1 — under AA. This
     button carries 16px white text, so it takes the deep ramp (gotcha #39).
     audit.py caught it; it is not visible by looking at the page. */
  background:var(--vds-grad-brand-deep);color:#fff;
  box-shadow:0 8px 20px rgba(217,33,40,.32);
  transition:transform var(--vds-t-base),box-shadow var(--vds-t-base),
             background var(--vds-t-base),color var(--vds-t-base),
             border-color var(--vds-t-base)}
body #content .vds26-assessment-form_wrapper .gform_page_footer button:hover,
body #content .vds26-assessment-form_wrapper .gform_footer button:hover{
  color:#fff;transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(217,33,40,.42)}
body #content .vds26-assessment-form_wrapper
  .gform_page_footer button.gform_previous_button{
  background:transparent;color:var(--vds-ink);
  border-color:var(--vds-border-strong,var(--vds-border));box-shadow:none}
body #content .vds26-assessment-form_wrapper
  .gform_page_footer button.gform_previous_button:hover{
  background:var(--vds-surface-2);color:var(--vds-ink);
  border-color:var(--vds-ink);box-shadow:none;transform:translateY(-1px)}
body #content .vds26-assessment-form_wrapper .gform_page_footer button:focus-visible,
body #content .vds26-assessment-form_wrapper .gform_footer button:focus-visible{
  outline:3px solid rgba(217,33,40,.45);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  body #content .vds26-assessment-form_wrapper .gform_page_footer button,
  body #content .vds26-assessment-form_wrapper .gform_footer button{
    transition:none}
  body #content .vds26-assessment-form_wrapper .gform_page_footer button:hover,
  body #content .vds26-assessment-form_wrapper .gform_footer button:hover{
    transform:none}
}
/* The hidden Score field is machinery, not a question. GF hides it, but its
   list item still occupies the footer's flow in some GF versions. */
body #content .vds26-assessment-form_wrapper li.vds-gfq-score{display:none}

/* --- Validation ----------------------------------------------------- *
 * Unavoidable here in a way it is not in the JS quiz: GF validates on the
 * server, so "pick an answer" is a real state this form can reach. */
body #content .vds26-assessment-form_wrapper .gform_validation_errors{
  background:var(--vds-surface-2);border:1px solid var(--vds-red);
  border-radius:var(--vds-r-md);padding:.8rem 1rem;
  margin:0 0 1.1rem;box-shadow:none}
body #content .vds26-assessment-form_wrapper .gform_validation_errors h2,
body #content .vds26-assessment-form_wrapper .gform_validation_errors ol,
body #content .vds26-assessment-form_wrapper .gform_validation_errors li,
body #content .vds26-assessment-form_wrapper .gform_validation_errors a{
  font-family:var(--vds-font-body,inherit);font-size:.92rem;line-height:1.5;
  color:var(--vds-ink);margin:0}
body #content .vds26-assessment-form_wrapper .validation_message{
  font-size:.86rem;line-height:1.4;color:var(--vds-accent-ink);
  background:none;border:0;padding:.5rem 0 0;margin:0}
body #content .vds26-assessment-form_wrapper li.gfield_error{
  background:none;border:0;padding:0;margin:0}

/* --- The result ----------------------------------------------------- *
 * Emitted by the three conditional confirmations in the form definition.
 *
 * NOT scoped to the form wrapper, and that is the point: on an AJAX submit
 * Gravity Forms REPLACES #gform_wrapper_3 with #gform_confirmation_wrapper_3,
 * which does NOT carry the form's cssClass. Everything scoped to the form
 * wrapper simply stops existing at the moment the result appears — the ring
 * computed `background-image: none` and the whole result state rendered
 * unstyled. Gotcha #42. The `.vds-gfq-*` names are unique to this component,
 * so an unscoped rule collides with nothing.
 *
 * The ring is a conic-gradient driven by one custom property, which GF
 * substitutes server-side into the style attribute — the same technique and
 * the same look as the JS quiz, without needing our JS to run. */
body #content .vds-gfq-result{text-align:center}
body #content .vds-gfq-ring{
  --vds-gfq-pct:0%;
  position:relative;width:150px;height:150px;margin:0 auto 1.1rem;
  border-radius:50%;
  background:
    conic-gradient(var(--vds-red) 0 var(--vds-gfq-pct),
                   var(--vds-surface-2) var(--vds-gfq-pct) 100%)}
body #content .vds-gfq-ring::before{
  content:"";position:absolute;inset:12px;border-radius:50%;
  background:var(--vds-surface)}
body #content .vds-gfq-score{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--vds-font-display);
  font-weight:800;font-size:var(--vds-step-3);line-height:1;
  color:var(--vds-ink)}
/* --vds-grad-brand-deep, not --vds-grad-brand: small white text on the light
   end of the brand gradient is 3.73:1, under AA (gotcha #39). */
body #content .vds-gfq-tier{
  display:inline-block;font-family:var(--vds-font-display);font-weight:700;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--vds-grad-brand-deep);
  padding:.35rem .85rem;border-radius:var(--vds-r-pill);margin:0 0 .8rem}
body #content h3.vds-gfq-head{
  font-family:var(--vds-font-display);font-weight:600;
  font-size:var(--vds-step-2);line-height:1.2;letter-spacing:-.02em;
  color:var(--vds-ink);margin:0 0 .7rem;text-wrap:balance}
body #content .vds-gfq-body{
  font-size:1.05rem;line-height:1.6;color:var(--vds-ink-2);
  max-width:46ch;margin:0 auto 1.4rem}
body #content .vds-gfq-actions{
  display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:0}
/* GF's confirmation wrapper carries its own legacy padding/border. */
body #content .gform_confirmation_message{
  padding:0;margin:0;border:0;background:none}

/* --- Narrow --------------------------------------------------------- */
@media (max-width:480px){
  body #content .vds26-assessment-form_wrapper .gform_page_footer{
    flex-direction:column-reverse;align-items:stretch}
  body #content .vds26-assessment-form_wrapper .gform_page_footer button{
    width:100%}
}

/* --- Overrides -------------------------------------------------------
 * Requested directly by the user, 2026-09-10. Kept at the bottom of the
 * sheet and left as written rather than folded into the rules above: the
 * base declarations already set both of these (`margin:0 auto 1.4rem` on
 * the body, `color:#fff` on the tier), so something later in the cascade
 * was beating them on the live page and the !important is doing real work.
 * Fold these in only after finding what wins — silently merging them would
 * reintroduce the bug. */
p.vds-gfq-body {
    margin-left: auto !important;
    margin-right: auto !important;
}
body #content .vds-gfq-tier {
    color: #fff !important;
}