/*
 * Candidate assessment - JetFormBuilder skin.
 *
 * Additive. Loads AFTER main.css and never replaces it, so this file holds the
 * whole form skin and nothing else: promoting the flow to the live homepage is
 * then a matter of enqueueing this same stylesheet there.
 *
 * Every rule is scoped under .ah-candidate so nothing leaks to a future page
 * that uses JetFormBuilder.
 */

/* ------------------------------------------------------------------ *
 * Shared chrome
 * ------------------------------------------------------------------ */

/* JFB's progress bar is the state signal the theme rail mirrors, never a
   visible control. It stays in the DOM - the rail reads active-page /
   passed-page off it - and main.js takes it out of the accessibility tree. */
/* ONE blue in this flow.
   The form drew its selected cards, rail dots, checkboxes, radios, section bars
   and calendar from --accent (#2A68A6), while its own buttons already resolved
   to --cta (#12769B) - so a selected step card never matched the Get Started
   button beside it. Renz asked for the button blue (2026-09-11).

   Rebinding the token on the SECTION beats rewriting 37 call sites: the rail
   and every control live inside it, custom properties inherit, and anything
   added here later picks the right blue up for free. The four existing
   var(--cta, var(--accent)) fallbacks now resolve to the same colour either way.

   White text stays AA on it - 5.13:1, against 5.79:1 on the old accent - which
   covers the filled cards, the bars, the tick and the selected calendar day.
   The --accent-wash / --accent-band tints are still derived from the OLD accent.
   Nothing in this file uses them; re-derive them if that ever changes. */
.ah-candidate--jfb {
    --accent: var(--cta);
    --accent-deep: var(--cta-deep);
}

.ah-candidate--jfb .jet-form-builder-progress-pages { display: none; }

.ah-candidate--jfb .jet-form-builder-row { margin-block: 0 var(--block-gap); }
.ah-candidate--jfb .jet-form-builder-row:last-child { margin-block-end: 0; }
.ah-candidate--jfb .jet-form-builder__label-text {
    font-size: var(--t-14);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink);
}
.ah-candidate--jfb .jet-form-builder__required { color: var(--accent); }

/* ------------------------------------------------------------------ *
 * Step 1 - focus-area cards
 *
 * Values mirror .ah-option__label in main.css so the JetFormBuilder build
 * is indistinguishable from the static section it replaces. If those
 * change, change them here too - they are deliberately duplicated rather
 * than shared, because main.css must keep working for the live homepage
 * until this flow is promoted.
 * ------------------------------------------------------------------ */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-focus) .jet-form-builder__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-focus) .jet-form-builder__fields-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-focus) .jet-form-builder__field-wrap { margin: 0; }
.ah-candidate--jfb .ah-q-focus {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-focus) .jet-form-builder__field-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: clamp(128px, 11.7vw, 168px);
    margin: 0;
    padding: 22px 24px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-focus) .jet-form-builder__field-label:hover {
    border-color: #B9C4D0;
    transform: translateY(-2px);
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-focus) .jet-form-builder__field-label span {
    font-size: var(--t-24);
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: uppercase;
    line-height: 1.2;
}
/* The drawing. JFB emits no image per option, so it is attached as a
   background - the URLs, with filemtime on them, come from the inline block
   in sections-v4/candidate.php. */
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-focus) .jet-form-builder__field-label::after {
    content: "";
    flex: none;
    width: 74px;
    height: 74px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .8;
}
/* Selected: flat accent, white label, and the black line art inverted to
   white - the same treatment main.css gives .ah-scalpimg, where white art
   reads at 5.79:1 on this blue against 3.63:1 for the black original. */
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-focus:checked) .jet-form-builder__field-label {
    border-color: transparent;
    color: #fff;
    background: var(--accent);
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-focus:checked) .jet-form-builder__field-label::after {
    filter: invert(1);
    opacity: 1;
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-focus:focus-visible) .jet-form-builder__field-label {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * Step 2 - age range, gender, prior treatments
 * ------------------------------------------------------------------ */

/* Shared: every choice input in this flow is driven from its label. */
.ah-candidate--jfb .ah-q-age,
.ah-candidate--jfb .ah-q-gender {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
}

/* Age range - four pills across. */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-age) .jet-form-builder__fields-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-age) .jet-form-builder__field-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin: 0;
    padding: 14px 24px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--t-18);
    cursor: pointer;
    transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-age) .jet-form-builder__field-label:hover { border-color: #B9C4D0; }
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-age:checked) .jet-form-builder__field-label {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-age:focus-visible) .jet-form-builder__field-label,
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-gender:focus-visible) .jet-form-builder__field-label,
.ah-candidate--jfb .ah-q-tried:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Biological gender - two wide cards, glyph right. The glyphs are not in
   JFB's markup and are decorative, so they come from CSS - the same reason
   inc/icons.php keeps glyphs out of inc/content.php. */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-gender) .jet-form-builder__fields-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 592px;
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-gender) .jet-form-builder__field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 96px;
    margin: 0;
    padding: 24px 28px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: var(--t-18);
    cursor: pointer;
    transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-gender) .jet-form-builder__field-label:hover { border-color: #B9C4D0; }
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-gender) .jet-form-builder__field-label::after {
    flex: none;
    font-size: 30px;
    line-height: 1;
    color: var(--accent);
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-gender[value="male"]) .jet-form-builder__field-label::after { content: "\2642"; }
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-gender[value="female"]) .jet-form-builder__field-label::after { content: "\2640"; }
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-gender:checked) .jet-form-builder__field-label {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-gender:checked) .jet-form-builder__field-label::after { color: #fff; }

/* Prior treatments - two columns of checkbox pills. The box is the real
   input restyled rather than a hidden input plus a drawn square, so the
   native checked state, focus ring and hit target all survive. */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-tried) .jet-form-builder__fields-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-tried) .jet-form-builder__field-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px 22px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--t-16);
    cursor: pointer;
    transition: border-color .25s var(--ease);
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-tried) .jet-form-builder__field-label:hover { border-color: #B9C4D0; }
.ah-candidate--jfb .ah-q-tried {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    display: grid;
    place-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid #B9C4D0;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}
.ah-candidate--jfb .ah-q-tried:checked {
    border-color: var(--accent);
    background: var(--accent);
}
.ah-candidate--jfb .ah-q-tried:checked::after {
    content: "";
    width: 10px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    /* The 10x5 box is centred by place-content, but the INK is not: the two
       strokes sit on its bottom and left edges, so after rotating -45deg the
       marks bounding box runs -3.18 to +5.30 about the centre - 1.06px low.
       Rotate first, then lift by exactly that. The old translate(1px,-2px)
       was a hand-nudge that overshot: 0.71px left and 1.06px high. */
    transform: translate(0, -1.06px) rotate(-45deg);
}

/* ------------------------------------------------------------------ *
 * Steps 3 and 4 - text, date and time inputs
 * ------------------------------------------------------------------ */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-text),
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-date),
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-time) { max-width: 592px; }
.ah-candidate--jfb .ah-q-text,
.ah-candidate--jfb .ah-q-date,
.ah-candidate--jfb .ah-q-time {
    width: 100%;
    min-height: 56px;
    padding: 14px 20px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm, 10px);
    background: var(--surface);
    font: inherit;
    font-size: var(--t-16);
    color: var(--ink);
    transition: border-color .25s var(--ease);
}
.ah-candidate--jfb .ah-q-text:hover,
.ah-candidate--jfb .ah-q-date:hover,
.ah-candidate--jfb .ah-q-time:hover { border-color: #B9C4D0; }
.ah-candidate--jfb .ah-q-text:focus-visible,
.ah-candidate--jfb .ah-q-date:focus-visible,
.ah-candidate--jfb .ah-q-time:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: transparent;
}
.ah-candidate--jfb .ah-q-text::placeholder { color: var(--slate); opacity: .7; }

/* ------------------------------------------------------------------ *
 * Navigation and submit
 * ------------------------------------------------------------------ */
.ah-candidate--jfb .jet-form-builder__next-page-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: var(--block-gap);
}
.ah-candidate--jfb .jet-form-builder__next-page,
.ah-candidate--jfb .jet-form-builder__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 16px 36px;
    border: 0;
    border-radius: 999px;
    background: var(--cta, var(--accent));
    color: #fff;
    font: inherit;
    font-size: var(--t-16);
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.ah-candidate--jfb .jet-form-builder__next-page:hover,
.ah-candidate--jfb .jet-form-builder__submit:hover {
    background: var(--cta-deep, var(--accent));
    transform: translateY(-2px);
}
.ah-candidate--jfb .jet-form-builder__prev-page {
    background: transparent;
    border: 1px solid var(--hairline);
    color: var(--ink);
    min-height: 56px;
    padding: 16px 32px;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .25s var(--ease);
}
.ah-candidate--jfb .jet-form-builder__prev-page:hover { border-color: #B9C4D0; }

/* ------------------------------------------------------------------ *
 * Step 1 - upload panel
 *
 * Mirrors .ah-upload in main.css: title over a dashed drop zone in a 57%
 * left column, with the selfie drawing bleeding the panel on the right.
 * JFB gives the row three children (label, field, desc) and no slot for
 * artwork, so the drawing is a background on the row itself and the URL -
 * which needs filemtime - is set as --ah-selfie by the inline block in
 * sections-v4/candidate.php.
 * ------------------------------------------------------------------ */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) {
    display: grid;
    grid-template-columns: minmax(0, 57%) 1fr;
    align-content: start;
    gap: 12px 24px;
    margin-top: var(--block-gap);
    padding: 28px 32px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background-color: var(--surface);
    background-image: var(--ah-selfie, none);
    background-repeat: no-repeat;
    background-position: right 48px bottom -1px;
    background-size: auto 104%;
}
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) .jet-form-builder__label { grid-area: 1 / 1; margin: 0; }
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) .jet-form-builder__field-wrap { grid-area: 2 / 1; }
/* The panel copy already reads inside the drop zone, so JFB's description,
   which carries the same sentence, would repeat it. */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) .jet-form-builder__desc { display: none; }
.ah-candidate--jfb .jet-form-builder-advanced-media__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 104px;
    padding: 20px;
    border: 1px dashed #C7D0DA;
    border-radius: var(--r-sm, 10px);
    background: transparent;
    text-align: center;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}
.ah-candidate--jfb .jet-form-builder-advanced-media__dropzone:hover {
    border-color: var(--accent);
    background: rgba(42, 104, 166, .04);
}
.ah-candidate--jfb .jet-form-builder-advanced-media__placeholder {
    font-size: var(--t-18);
    font-weight: 500;
    color: var(--ink);
}
.ah-candidate--jfb .jet-form-builder-advanced-media__browse {
    border: 0;
    background: transparent;
    color: var(--cta, var(--accent));
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* JetFormBuilder ships .layout-column .jet-form-builder__field.checkradio-field
   { width: auto }, which is 0,3,0 and collapsed the restyled box to 2px inside
   the flex label. Matching its weight is not enough - load order between the
   two stylesheets is not guaranteed - so the box rules are restated here at
   0,4,0, close to the element rather than as a blanket !important. */
.ah-candidate--jfb .jet-form-builder__field-label .jet-form-builder__field.ah-q-tried {
    flex: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------ *
 * Responsive
 *
 * The focus-card breakpoints are lifted from main.css deliberately: 1009
 * is where "HAIRLINE RESTORATION" starts spilling its box against the
 * 74px drawing (2px over at 960, 20px at 901), and 640 is where two-up
 * stops fitting at all. Same numbers, so the two builds break identically.
 * ------------------------------------------------------------------ */
@media (max-width: 1009px) {
    .ah-candidate--jfb .jet-form-builder-row:has(.ah-q-focus) .jet-form-builder__fields-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-focus) .jet-form-builder__field-label {
        min-height: 128px;
    }
}

@media (max-width: 860px) {
    .ah-candidate--jfb .jet-form-builder-row:has(.ah-q-age) .jet-form-builder__fields-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* The drawing is a background, so it cannot reflow above the drop zone the
       way the static panel's <img> does. Below this width the panel needs its
       full measure for the zone itself. */
    .ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) {
        grid-template-columns: 1fr;
        background-image: none;
    }
}

@media (max-width: 640px) {
    .ah-candidate--jfb .jet-form-builder-row:has(.ah-q-focus) .jet-form-builder__fields-group {
        grid-template-columns: 1fr;
    }
    .ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-focus) .jet-form-builder__field-label {
        min-height: 96px;
    }
    .ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-focus) .jet-form-builder__field-label::after {
        width: 58px;
        height: 58px;
    }
    .ah-candidate--jfb .jet-form-builder-row:has(.ah-q-tried) .jet-form-builder__fields-group {
        grid-template-columns: 1fr;
    }
    .ah-candidate--jfb .jet-form-builder-row:has(.ah-q-gender) .jet-form-builder__fields-group {
        grid-template-columns: 1fr;
        max-width: none;
    }
    .ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) { padding: 22px; }
    .ah-candidate--jfb .jet-form-builder__next-page-wrap { gap: 12px; }
    .ah-candidate--jfb .jet-form-builder__next-page,
    .ah-candidate--jfb .jet-form-builder__prev-page,
    .ah-candidate--jfb .jet-form-builder__submit { flex: 1 1 auto; padding-inline: 20px; }
}

/* ------------------------------------------------------------------ *
 * Rail - completed steps
 * main.css only styles .is-active; the flow needs the passed state too.
 * In the comp a passed dot is an accent ring on a pale fill, label bold.
 * ------------------------------------------------------------------ */
.ah-candidate--jfb .ah-steps__item.is-done .ah-steps__dot {
    background: #DCE7F3;
    box-shadow: inset 0 0 0 2px var(--accent);
}
.ah-candidate--jfb .ah-steps__item.is-done .ah-steps__label { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ *
 * Step 3 - duration rows and the details group
 * Full-width pill rows with the native radio restyled as a ring, so the
 * checked state, focus ring and hit target all stay native.
 * ------------------------------------------------------------------ */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-duration) .jet-form-builder__fields-group {
    display: grid;
    gap: 14px;
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-duration) .jet-form-builder__field-label {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    margin: 0;
    padding: 16px 22px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--t-16);
    cursor: pointer;
    transition: background .25s var(--ease);
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-duration) .jet-form-builder__field-label:hover { background: #F6F8FA; }
.ah-candidate--jfb .jet-form-builder__field-label .jet-form-builder__field.ah-q-duration {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
    padding: 0;
    border: 1px solid #B9C4D0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}
.ah-candidate--jfb .ah-q-duration:checked { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px #fff; }
.ah-candidate--jfb .ah-q-duration:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ah-candidate--jfb .jet-form-builder-row.field-type-heading-field { margin-top: calc(var(--block-gap) * 1.5); }
.ah-candidate--jfb .jet-form-builder-row.field-type-heading-field .jet-form-builder__label-text { font-size: var(--t-14); }
.ah-candidate--jfb .jet-form-builder-row.field-type-heading-field .jet-form-builder__desc { color: var(--slate); }

/* ------------------------------------------------------------------ *
 * Step 4 - section bars, specialist pill, schedule head
 * ------------------------------------------------------------------ */
.ah-candidate--jfb .ah-acc { margin-block: var(--block-gap); }
.ah-candidate--jfb .ah-acc__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 58px;
    padding: 10px 12px 10px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: var(--t-18);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.ah-candidate--jfb .ah-acc__title { flex: 1 1 auto; }
.ah-candidate--jfb .ah-acc__avatars { display: inline-flex; flex: none; }
.ah-candidate--jfb .ah-acc__avatars img {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px #fff;
}
.ah-candidate--jfb .ah-acc__avatars img + img { margin-left: -10px; }
.ah-candidate--jfb .ah-acc__icon {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.7);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.ah-candidate--jfb .ah-acc__chev {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition: transform .3s var(--ease);
}
.ah-candidate--jfb .ah-acc__bar[aria-expanded="false"] .ah-acc__chev { transform: rotate(180deg); }

/* A bar collapses what follows it by setting [hidden] (main.js). The rule
   behind that attribute lives in the UA sheet, at the very BOTTOM of the
   cascade, so ANY author display beats it - and both collapsible groups set
   one: JFBs .jet-form-builder-row is display:flex and so is .ah-specialist.
   The chevron flipped and aria-expanded went false while nothing actually
   moved. An attribute selector cannot outrank a class on its own, so this is
   one of the few places !important is the correct tool rather than a shortcut.
   Scoped to the flow so it cannot reach the rest of the page. */
.ah-candidate--jfb [hidden] { display: none !important; }

.ah-candidate--jfb .ah-specialist {
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(100%, 520px);
    margin: var(--block-gap) auto;
    padding: 8px 8px 8px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) 0%, #7F94A8 55%, #C9AE8F 100%);
    color: #fff;
    text-decoration: none;
    font-size: var(--t-14);
}
.ah-candidate--jfb .ah-specialist .ah-acc__avatars img { width: 32px; height: 32px; }
.ah-candidate--jfb .ah-specialist__text { flex: 1 1 auto; opacity: .95; }
.ah-candidate--jfb .ah-specialist__cta { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ah-candidate--jfb .ah-specialist__arrow {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.ah-candidate--jfb .ah-sched__head { text-align: center; max-width: 640px; margin: calc(var(--block-gap) * 1.5) auto var(--block-gap); }
.ah-candidate--jfb .ah-sched__title { margin: 0 0 16px; font-size: var(--t-40, 40px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.ah-candidate--jfb .ah-sched__body { margin: 0; color: var(--ink); font-size: var(--t-16); line-height: 1.6; }

/* JFB's own notice is replaced by the theme's confirmation panel. */
.ah-candidate--jfb .jet-form-builder-message--success { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ------------------------------------------------------------------ *
 * Step 4 - protocol cards
 * A radio whose option labels carry the whole card (JFB passes labels
 * through wp_kses_post, so the spans survive). The card is the label.
 * ------------------------------------------------------------------ */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-protocol) .jet-form-builder__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-protocol) .jet-form-builder__fields-group { display: grid; gap: 20px; }
.ah-candidate--jfb .ah-q-protocol { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-protocol) .jet-form-builder__field-label {
    display: block;
    margin: 0;
    padding: 24px 28px;
    border: 1px solid var(--ink);
    border-radius: 18px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-protocol) .jet-form-builder__field-label > span {
    display: grid;
    grid-template-columns: 190px minmax(0, 1.2fr) minmax(0, 1fr) auto;
    grid-template-areas: "media body meta btn" "name body meta btn";
    align-items: center;
    column-gap: 28px;
}
.ah-candidate--jfb .ah-proto__media { grid-area: media; align-self: end; }
.ah-candidate--jfb .ah-proto__media img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; }
.ah-candidate--jfb .ah-proto__name { grid-area: name; align-self: start; margin-top: 12px; font-size: var(--t-20); font-weight: 500; }
.ah-candidate--jfb .ah-proto__body { grid-area: body; font-size: var(--t-14); line-height: 1.6; color: var(--ink); }
.ah-candidate--jfb .ah-proto__meta { grid-area: meta; display: grid; gap: 10px; justify-items: start; }
.ah-candidate--jfb .ah-proto__tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-protocol[value="medications"]) .ah-proto__tag { background: var(--accent); }
.ah-candidate--jfb .ah-proto__point {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--t-14);
}
.ah-candidate--jfb .ah-proto__point::before {
    content: "";
    flex: none;
    width: 16px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A68A6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ah-candidate--jfb .ah-proto__btn {
    grid-area: btn;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid #B9C4D0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
}
.ah-candidate--jfb .ah-proto__btn-select { display: none; }
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-protocol:checked) .jet-form-builder__field-label { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-protocol:checked) .ah-proto__btn { background: var(--ink); border-color: var(--ink); color: #fff; }
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-protocol:checked) .ah-proto__btn-view { display: none; }
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-protocol:checked) .ah-proto__btn-select { display: inline; }
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-protocol:focus-visible) .jet-form-builder__field-label { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------------ *
 * Step 4 - the two paths
 * .ah-paths / .ah-path open in one Custom HTML block and close in a later
 * one; the fields between them become their children once parsed.
 * ------------------------------------------------------------------ */
.ah-candidate--jfb .ah-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ah-candidate--jfb .ah-path {
    padding: 28px;
    border: 1px solid var(--ink);
    border-radius: 18px;
    background: var(--surface);
}
.ah-candidate--jfb .ah-path__head { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: var(--t-20); font-weight: 500; }
.ah-candidate--jfb .ah-path__num {
    display: inline-grid; place-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #E4EDF7;
    color: var(--accent);
    font-size: var(--t-14); font-weight: 600;
}
.ah-candidate--jfb .ah-path .jet-form-builder-row { margin-block: 0 18px; }
.ah-candidate--jfb .ah-path .jet-form-builder__label-text { font-size: var(--t-14); letter-spacing: 0; text-transform: none; font-weight: 600; }
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-photos) .jet-form-builder__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-photos) .jet-form-builder-advanced-media__dropzone {
    min-height: 176px;
    border: 1px dashed var(--ink);
    background: linear-gradient(180deg, #F7F9FB 0%, #DCE8F3 100%);
}
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-photos) .jet-form-builder-advanced-media__dropzone::before {
    content: "";
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A68A6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17a4 4 0 0 1-.6-7.95A6 6 0 0 1 18 8a4 4 0 0 1 0 8h-1'/%3E%3Cpath d='M12 12v8M9 15l3-3 3 3'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-photos) .jet-form-builder-advanced-media__placeholder { font-size: var(--t-14); font-weight: 700; }
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-photos) .jet-form-builder-advanced-media__message { font-size: 12px; color: var(--slate); }
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-photos) .jet-form-builder-advanced-media__browse { font-size: var(--t-14); }

.ah-candidate--jfb .ah-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.ah-candidate--jfb .ah-guide {
    position: relative;
    aspect-ratio: 4 / 5;
    display: grid; place-items: center;
    border-radius: 8px;
    background: linear-gradient(180deg, #E7EBEF, #CBD3DB);
    overflow: hidden;
}
.ah-candidate--jfb .ah-guide img { width: 58%; height: auto; opacity: .55; filter: grayscale(1); }
.ah-candidate--jfb .ah-guide span { position: absolute; left: 12px; bottom: 10px; font-size: 10px; font-weight: 600; letter-spacing: .08em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }

.ah-candidate--jfb .ah-q-location {
    width: 100%;
    min-height: 52px;
    padding: 12px 44px 12px 16px;
    border: 1px solid #B9C4D0;
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
    appearance: none; -webkit-appearance: none;
    font: inherit; font-size: var(--t-14); color: var(--ink);
}

/* Time slots - three across, selected is an accent ring. */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-slot) .jet-form-builder__fields-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ah-candidate--jfb .ah-q-slot { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-slot) .jet-form-builder__field-label {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; margin: 0; padding: 10px;
    border: 1px solid #C7D0DA; border-radius: 8px;
    background: #fff; font-size: var(--t-14); cursor: pointer;
    transition: border-color .2s var(--ease), color .2s var(--ease);
}
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-slot:checked) .jet-form-builder__field-label { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-weight: 600; }
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-slot:focus-visible) .jet-form-builder__field-label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Path buttons: the photo path is an outline pill, the booking path solid ink. */
.ah-candidate--jfb .ah-path .jet-form-builder__next-page-wrap { margin-top: 8px; }
.ah-candidate--jfb .ah-path .jet-form-builder__submit { width: 100%; }
.ah-candidate--jfb .ah-jfb-submit--photos { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.ah-candidate--jfb .ah-jfb-submit--photos:hover { background: #F3F5F7; }
.ah-candidate--jfb .ah-jfb-submit--book { background: var(--ink); }
.ah-candidate--jfb .ah-jfb-submit--book:hover { background: #000; }
.ah-candidate--jfb .ah-path--book .jet-form-builder__prev-page { display: none; }

/* ------------------------------------------------------------------ *
 * Calendar (built by main.js over the native date input)
 * ------------------------------------------------------------------ */
.ah-candidate--jfb .ah-cal__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ah-candidate--jfb .ah-cal { border: 1px solid #C7D0DA; border-radius: 10px; padding: 14px 16px 12px; background: #fff; }
.ah-candidate--jfb .ah-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: var(--t-14); font-weight: 600; }
.ah-candidate--jfb .ah-cal__nav { display: inline-flex; gap: 4px; }
.ah-candidate--jfb .ah-cal__nav button {
    width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
    font: inherit; font-size: 16px; color: var(--ink);
}
.ah-candidate--jfb .ah-cal__nav button:hover { background: #F0F3F6; }
.ah-candidate--jfb .ah-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ah-candidate--jfb .ah-cal__wd { text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--slate); padding: 4px 0 6px; }
.ah-candidate--jfb .ah-cal__day {
    height: 34px; border: 0; border-radius: 6px; background: transparent;
    font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.ah-candidate--jfb .ah-cal__day:hover:not(:disabled) { background: #EEF3F8; }
.ah-candidate--jfb .ah-cal__day.is-outside { color: #B9C4D0; }
.ah-candidate--jfb .ah-cal__day:disabled { color: #C7D0DA; cursor: default; }
.ah-candidate--jfb .ah-cal__day.is-today { box-shadow: inset 0 0 0 1px #C7D0DA; }
.ah-candidate--jfb .ah-cal__day.is-selected { background: var(--accent); color: #fff; font-weight: 600; }
.ah-candidate--jfb .ah-cal__day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ------------------------------------------------------------------ *
 * Confirmation
 * ------------------------------------------------------------------ */
.ah-candidate--jfb .ah-done { position: relative; padding-block: 8px 24px; }
.ah-candidate--jfb .ah-done__card {
    position: relative; z-index: 1;
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 48px 40px 36px;
    border: 1px solid var(--ink);
    border-radius: 18px;
    background: linear-gradient(170deg, #F6F2EA 0%, #F7F7F7 45%, #BFD4E8 100%);
    text-align: center;
}
.ah-candidate--jfb .ah-done__check {
    display: block; width: 160px; height: 160px; margin: 0 auto 36px;
    border-radius: 50%;
    background: #F0F2F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A68A6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E") center / 56px no-repeat;
    box-shadow: 0 0 0 1px #DCE2E8, 0 0 0 20px rgba(255,255,255,.35);
}
.ah-candidate--jfb .ah-done__title { margin: 0 0 16px; font-size: var(--t-32, 30px); font-weight: 500; letter-spacing: -.01em; }
.ah-candidate--jfb .ah-done__body { margin: 0 auto 32px; max-width: 420px; color: var(--slate); font-size: var(--t-16); line-height: 1.65; }
.ah-candidate--jfb .ah-done__cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 56px; padding: 16px 44px;
    border-radius: 999px; background: var(--ink); color: #fff;
    font-weight: 600; text-decoration: none;
    transition: background .25s var(--ease);
}
.ah-candidate--jfb .ah-done__cta:hover { background: #000; }
.ah-candidate--jfb .ah-done__ref {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 32px 0 0; padding: 8px 16px;
    border-radius: 999px; color: #fff;
    /* Sampled from the mockup (2026-09-11), not eyeballed: fitting dL/dx and
       dL/dy across the artworks interior gives a ~163deg axis running #476A95
       at the top left to #A0ADBC at the bottom right. Replaces #C9DAEA, against
       which white measured 1.43:1 - effectively illegible, which is what the
       text-shadow below was papering over. White now clears 5.58:1 at the dark
       end.
       The light stop is held at #5A769B rather than the sampled #A0ADBC, at
       Renzs call on 2026-09-11: the artwork value dropped white to 2.28:1,
       under AA for this 13px text - and the reference number, the one thing a
       patient may need to read back, sits at exactly that end. The pill now
       runs 5.58:1 down to 4.67:1, so every character clears AA. Keep any future
       light stop at or darker than #5A769B. */
    background: linear-gradient(163deg, #476A95 0%, #5A769B 100%);
    font-size: 13px; font-weight: 600; letter-spacing: .02em;
    text-shadow: 0 1px 1px rgba(0,0,0,.15);
}
.ah-candidate--jfb .ah-done__card { display: grid; justify-items: center; }
.ah-candidate--jfb .ah-done__card::after { content: ""; order: 5; width: 100%; height: 1px; margin-top: 28px; background: rgba(17,17,17,.12); }
.ah-candidate--jfb .ah-done__ref { order: 6; margin-top: 20px; }
.ah-candidate--jfb .ah-done__shield { width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.5 8.5-7 10-3.5-1.5-7-5-7-10V6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ah-candidate--jfb .ah-done__help { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--slate); }
.ah-candidate--jfb .ah-done__help a { color: var(--cta, var(--accent)); text-decoration: none; }
.ah-candidate--jfb .ah-done__photo {
    position: absolute; z-index: 0;
    width: 240px; height: auto; aspect-ratio: 5 / 6; object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
/* Both confirmation photos became LANDSCAPE 1600x1067 on 2026-09-11, so the
   cropping here is horizontal now, not vertical - any vertical tuning would be
   describing the old portrait sources and doing nothing.

   --a is a 4/3 box against a 1.5 source: cover scales it to the box height and
   trims only 177px of width, so centred is right and both men stay in frame. */
.ah-candidate--jfb .ah-done__photo--a {
    left: 0; bottom: 0; transform: rotate(-4deg);
    width: 270px; aspect-ratio: 4 / 3;
}

/* --b keeps the base 5/6 portrait box, and that is the aggressive one: the same
   1.5 source scaled to 288px tall is 432px wide against a 240px box, so 44% of
   the width is discarded. Centred, the hand mirror runs off the right edge; 65%
   re-centres the frame on the mirror (source x 462-1351) and loses the blurred
   foreground shoulder. Re-derive if the box ratio or the photo changes. */
.ah-candidate--jfb .ah-done__photo--b {
    right: 0; top: -20px; transform: rotate(3deg);
    object-position: 65% 50%;
}

/* ------------------------------------------------------------------ *
 * Responsive - step 4 and confirmation
 * ------------------------------------------------------------------ */
@media (max-width: 1100px) {
    .ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-protocol) .jet-form-builder__field-label > span {
        grid-template-columns: 160px minmax(0, 1fr) auto;
        grid-template-areas: "media body btn" "name body btn" "meta meta meta";
        row-gap: 16px;
    }
    .ah-candidate--jfb .ah-proto__meta { grid-auto-flow: column; align-items: center; gap: 18px; }
    .ah-candidate--jfb .ah-done__photo { display: none; }
}

@media (max-width: 860px) {
    .ah-candidate--jfb .ah-paths { grid-template-columns: 1fr; }
    .ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-protocol) .jet-form-builder__field-label > span {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "media" "name" "body" "meta" "btn";
        row-gap: 12px;
    }
    .ah-candidate--jfb .ah-proto__name { margin-top: 0; }
    .ah-candidate--jfb .ah-proto__meta { grid-auto-flow: row; gap: 10px; }
    .ah-candidate--jfb .ah-proto__btn { justify-self: start; }
    .ah-candidate--jfb .ah-specialist { flex-wrap: wrap; border-radius: 24px; }
    .ah-candidate--jfb .ah-specialist__text { flex-basis: 100%; }
}

@media (max-width: 640px) {
    .ah-candidate--jfb .ah-acc__bar { font-size: var(--t-16); }
    .ah-candidate--jfb .ah-path { padding: 20px; }
    .ah-candidate--jfb .jet-form-builder-row:has(.ah-q-slot) .jet-form-builder__fields-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ah-candidate--jfb .ah-done__card { padding: 36px 22px 28px; }
    .ah-candidate--jfb .ah-done__check { width: 120px; height: 120px; margin-bottom: 28px; background-size: 44px; }
    .ah-candidate--jfb .ah-sched__title { font-size: var(--t-32, 30px); }
}

/* Every input this skin drives from its label is hidden the same way, at
   0,4,0: JFB's .layout-column .jet-form-builder__field { width: 100% } is
   0,2,0 and .checkradio-field { width: auto } is 0,3,0, and the date input
   in particular came out 1440px wide once positioned - 761px of document
   overflow on step 4. */
.ah-candidate--jfb .jet-form-builder .jet-form-builder__field.ah-q-focus,
.ah-candidate--jfb .jet-form-builder .jet-form-builder__field.ah-q-age,
.ah-candidate--jfb .jet-form-builder .jet-form-builder__field.ah-q-gender,
.ah-candidate--jfb .jet-form-builder .jet-form-builder__field.ah-q-protocol,
.ah-candidate--jfb .jet-form-builder .jet-form-builder__field.ah-q-slot,
.ah-candidate--jfb .jet-form-builder .jet-form-builder__field.ah-cal__native {
    position: absolute;
    width: 1px;
    height: 1px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* JFB paints every span inside a checkradio label as display:flex
   (.jet-form-builder__field-wrap.checkradio-wrap span, 0,2,1), which flattened
   the protocol card's meta column into a row and pushed a point 8px off the
   viewport at 390. The card internals are restated here above that weight. */
.ah-candidate--jfb .jet-form-builder__field-wrap.checkradio-wrap .ah-proto__meta { display: grid; }
.ah-candidate--jfb .jet-form-builder__field-wrap.checkradio-wrap .ah-proto__media,
.ah-candidate--jfb .jet-form-builder__field-wrap.checkradio-wrap .ah-proto__name,
.ah-candidate--jfb .jet-form-builder__field-wrap.checkradio-wrap .ah-proto__body { display: block; }
.ah-candidate--jfb .jet-form-builder__field-wrap.checkradio-wrap .ah-proto__tag { display: inline-flex; }
.ah-candidate--jfb .jet-form-builder__field-wrap.checkradio-wrap .ah-proto__btn { display: inline-flex; }
.ah-candidate--jfb .jet-form-builder__field-wrap.checkradio-wrap .ah-proto__btn-view,
.ah-candidate--jfb .jet-form-builder__field-wrap.checkradio-wrap .ah-proto__btn-select { display: inline; }
.ah-candidate--jfb .jet-form-builder__field-wrap.checkradio-wrap .ah-proto__btn-select,
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-protocol:checked) .ah-proto__btn-view { display: none; }
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-protocol:checked) .ah-proto__btn-select { display: inline; }

/* --- No JFB tick marks anywhere in this flow (2026-09-10) ------------------
   JFB draws its own indicator as a pseudo-element on the label's span - a
   circle for radios (its per-block radio.css:
   .field-type-radio-field .jet-form-builder__field-label.for-radio > span::before,
   1.2em, 1px #ADB5BD) and a rounded square for checkboxes. None of the comps
   have it: the focus cards, age pills, gender cards, protocol cards and time
   slots all signal selection with the card itself, and where a mark IS drawn
   (the duration rows, the "have you tried" boxes) this skin draws it from the
   REAL input, so JFB's pseudo was a second, unstyled marker beside it.

   Renz spotted the circles on step 1; they were on every choice field.

   Four classes deep because JFB's own rule is 0,3,1 and its per-block CSS is
   enqueued at render time - after this file, which loads in the head - so
   matching its weight would lose on order. */
.ah-candidate--jfb .jet-form-builder .jet-form-builder-row .jet-form-builder__field-label > span::before,
.ah-candidate--jfb .jet-form-builder .jet-form-builder-row .jet-form-builder__field-label > span::after {
    content: none;
}

/* --- Step 1 advances on choice, so it has no Continue (2026-09-10) ---------
   Renz asked for the button to go: picking a card or attaching a photo moves
   the patient on. The button stays in the DOM and stays focusable - it is the
   keyboard path, since arrow keys must be free to browse the radio group
   without firing navigation - and it reveals itself when it takes focus. */
.ah-candidate--jfb .jet-form-builder-page[data-page="1"] .jet-form-builder__next-page-wrap {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.ah-candidate--jfb .jet-form-builder-page[data-page="1"] .jet-form-builder__next-page-wrap:focus-within {
    position: static;
    width: auto;
    height: auto;
    margin-top: var(--block-gap);
    overflow: visible;
    clip-path: none;
    white-space: normal;
}

/* --- Step 1 upload panel: to the static comp (2026-09-10) ------------------
   Renz asked the JFB build to match the section it replaces. The six cards
   already did, to the pixel; the panel did not - 335px tall against 217 -
   because JFB's dropzone carries a separator, a browse button, a restrictions
   block and a 0/1 counter, where the comp has one glyph and one line.

   Values below are lifted from .ah-upload / .ah-upload__drop in main.css so
   the two builds measure the same.

   Every rule is scoped to the row holding .ah-q-upload: step 4's photo path
   uses the SAME addon classes and its comp DOES show the restrictions line,
   so hiding these globally would break it. */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) {
    padding: 26px;
    column-gap: clamp(20px, 3vw, 44px);
    row-gap: 0;
    align-items: end;
    background-position: right 26px bottom -1px;
    background-size: auto 100%;
}
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) .jet-form-builder__label-text {
    font-size: var(--t-16);
    letter-spacing: .02em;
}
/* The counter and the "or" separator are the only bare spans in there; the
   placeholder is the line the comp keeps. */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) .jet-form-builder-advanced-media__dropzone > span:not(.jet-form-builder-advanced-media__placeholder),
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) .jet-form-builder-advanced-media__message {
    display: none;
}
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) .jet-form-builder-advanced-media__dropzone {
    gap: 10px;
    min-height: 0;
    margin-top: 16px;
    padding: 26px;
    border: 1.5px dashed #B9C4D0;
    border-radius: var(--r-sm, 8px);
    background: none;
    cursor: pointer;
}
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) .jet-form-builder-advanced-media__dropzone:hover {
    border-color: var(--accent);
    background: rgba(42, 104, 166, .04);
}
/* The comp's upload glyph, the same path sections/candidate.php draws. */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) .jet-form-builder-advanced-media__dropzone::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4m0 0-4 4m4-4 4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) .jet-form-builder-advanced-media__placeholder {
    font-size: var(--t-18);
    font-weight: 500;
    color: var(--ink);
}
/* The picker opens from THIS button - the dropzone itself only listens for
   drag events - so it is hidden, not removed, and main.js forwards a click on
   the zone to it. It reappears when it takes focus, for the keyboard. */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) .jet-form-builder-advanced-media__browse {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
}
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) .jet-form-builder-advanced-media__browse:focus-visible {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* --- The panel sits the same 16px below the cards as they sit apart --------
   Renz, 2026-09-10. It was 77px: this skin's generic row rhythm put
   --block-gap (72 at desktop) under the card row AND over the panel, which
   collapse to 72, plus the 5px padding-bottom JFB gives every row.

   16px is not arbitrary - it is the card grid's own gap, and the same value
   the static section uses (.ah-upload { margin-top: 16px }), so the panel now
   reads as a fourth item in the stack rather than a separate block. */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-focus) {
    margin-bottom: 0;
    padding-bottom: 0;
}
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) {
    margin-top: 16px;
}

/* --- Focus cards: hover takes the selected fill (2026-09-10) ---------------
   Same change as .ah-option__label in main.css, so the two builds keep
   matching. The drawing is a background here rather than an <img>, so the
   invert lands on ::after instead of .ah-scalpimg. */
@media (hover: hover) {
    .ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-focus) .jet-form-builder__field-label:hover {
        border-color: transparent;
        background: var(--accent);
        color: #fff;
        transform: none;
    }
    .ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-focus) .jet-form-builder__field-label:hover::after {
        filter: invert(1);
        opacity: 1;
    }
}

/* --- Step 2 to the comp: borders, spacing, real checkboxes (2026-09-10) ----
   Measured off the Step 2 mockup, which is '1:1 with the rendered form (its
   pill text reads 16.7px against our 18), so its pixel values are used as-is.

   1. THE CHECKBOXES WERE GONE. JFB's checkbox.css hides the real input
      (.field-type-checkbox-field .jet-form-builder__field.checkboxes-field
      { position:absolute; z-index:-1; opacity:0 }) because it normally draws
      the box as the span::before that this skin suppresses everywhere. The
      input is styled as the box here, so it has to come back out of hiding.
   2. Borders go from the pale --hairline to --ink, as the comp draws them and
      as the step 3 and 4 cards in this same flow already do.
   3. Spacing to the comp: 11px between the two checkbox columns (was 20), 20px
      between their rows (was 14), and the two group gaps re-cut - the comp
      gives MORE air before "biological gender" and LESS before "have you
      tried", where this skin had a flat 72 under every row. */

.ah-candidate--jfb .jet-form-builder-row .jet-form-builder__field.ah-q-tried {
    position: static;
    z-index: auto;
    opacity: 1;
}

.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-age) .jet-form-builder__field-label,
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-gender) .jet-form-builder__field-label,
.ah-candidate--jfb .jet-form-builder__field-wrap:has(.ah-q-tried) .jet-form-builder__field-label {
    border-color: var(--ink);
}

.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-tried) .jet-form-builder__fields-group {
    gap: 20px 11px;
}

/* Comp: 125px from the pills to the gender cards, 75px from those to the
   first checkbox row. The row rhythm contributes 72 of each, so these two
   override only the difference. */
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-age) { margin-bottom: 94px; }
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-gender) { margin-bottom: 44px; }

@media (max-width: 640px) {
    .ah-candidate--jfb .jet-form-builder-row:has(.ah-q-age) { margin-bottom: var(--block-gap); }
    .ah-candidate--jfb .jet-form-builder-row:has(.ah-q-gender) { margin-bottom: var(--block-gap); }
}

/* --- 8px under every question label (2026-09-10) ---------------------------
   Renz. JFB's row is a flex column with no row-gap, so the labels sat hard on
   their controls - measured 0px on all three of step 2.

   The step 1 upload panel is exempt: its title-to-dropzone distance was set to
   the static comp's 16px in the pass above, and another 8 would undo that.
   Labels this skin hides (the focus cards, the protocol cards, step 4's photo
   field) are absolutely positioned, so the padding costs them no layout. */
.ah-candidate--jfb .jet-form-builder-row > .jet-form-builder__label {
    padding-bottom: 16px;
}
.ah-candidate--jfb .jet-form-builder-row:has(.ah-q-upload) > .jet-form-builder__label {
    padding-bottom: 0;
}

/* --- Step 3: duration left, details right (2026-09-10) --------------------
   Renz: the duration field was not visibly selectable, it should take half the
   width with the patient's details beside it, and those inputs needed the same
   border, radius and rhythm as the rest of the form.

   NOT SELECTABLE was the same defect the checkboxes had: JFB's radio.css hides
   the real input (position:absolute; z-index:-1; opacity:0) because it draws
   its own marker as the span::before this skin suppresses. The ring is styled
   on the input, so the input has to come back. */
.ah-candidate--jfb .jet-form-builder-row .jet-form-builder__field.ah-q-duration {
    position: static;
    z-index: auto;
    opacity: 1;
}

/* The page is the grid: the duration row takes the left column, .ah-details
   (opened and closed by two Custom HTML blocks around the heading and the
   three inputs) takes the right, and the nav spans both. */
/* JFB hides an inactive page with .jet-form-builder-page--hidden. Any display
   value set on a page must NOT outrank that, or the page stays in the flow
   forever underneath the active one - which is how step 3's nav row appeared a
   second time under step 2. Restated at 0,4,0 so a later display rule cannot
   silently unhide a page, and the grid below is scoped to the visible state. */
.ah-candidate--jfb .jet-form-builder .jet-form-builder-page.jet-form-builder-page--hidden {
    display: none;
}
.ah-candidate--jfb .jet-form-builder-page[data-page="3"]:not(.jet-form-builder-page--hidden) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 64px);
    align-items: start;
}
.ah-candidate--jfb .jet-form-builder-page[data-page="3"] > .jet-form-builder__next-page-wrap {
    grid-column: 1 / -1;
}
.ah-candidate--jfb .jet-form-builder-page[data-page="3"] > .jet-form-builder-row:has(.ah-q-duration) {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* The details stack: one group, not four rows of the 72px section rhythm - and
   sized so the column ENDS level with the duration pills opposite. The
   arithmetic is load-bearing. A pills top is a hard border edge, but a labels
   top is a LINE BOX and the glyph sits 4.77px inside it at Inter 12/18/400, so
   level line boxes LOOK out of true. The heading gap is therefore 11px, not 16:
   5 + 21 + 11 + 4.77 puts FULL NAMEs CAP top on the first pills border top,
   42px down both columns, with 0.23px residual.

   Both columns also END level, and that is why FULL NAME / EMAIL / PHONE keep
   8px under them while every other label in the form carries 16px:
     left   5 + 21 + 16 + 4x60 + 3x14      = 324
     right  5 + 21 + 11 + 3x(18+8+60) + 2x14.5 = 324
   At 16px on these three the right needs 282px before a single pixel of gap,
   which forces a 2.4px field gap - tighter than a label sits above its own
   input, so every label would read as belonging to the field ABOVE it. Renz
   picked the 8px over widening the pill gaps (2026-09-10). */
.ah-candidate--jfb .ah-details { display: grid; padding-top: 5px; }
.ah-candidate--jfb .ah-details .jet-form-builder-row {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 14.5px;
}
.ah-candidate--jfb .ah-details .jet-form-builder-row:last-child { margin-bottom: 0; }
.ah-candidate--jfb .ah-details .jet-form-builder-row.field-type-heading-field { margin-bottom: 11px; }

/* ...and these three keep the 8px they had before every other label went to
   16px. That is precisely what lets the column END level with the pills as
   well as start level - see the arithmetic above. */
.ah-candidate--jfb .ah-details .jet-form-builder-row.field-type-text-field > .jet-form-builder__label {
    padding-bottom: 8px;
}

/* Secondary to the question opposite: smaller, and --slate rather than --ink,
   so YOUR DETAILS reads as the quieter half of the step. The 17px line box is
   load-bearing - it is what keeps this column bottom level with the pills. */
.ah-candidate--jfb .ah-details .field-type-text-field .jet-form-builder__label-text {
    font-size: var(--t-12);
    line-height: 18px;
    font-weight: 400;
    letter-spacing: .08em;
    color: var(--slate);
}

/* Inputs to match the pills they now sit beside. */
.ah-candidate--jfb .ah-q-text {
    min-height: 60px;
    padding: 16px 24px;
    border: 1px solid var(--ink);
    border-radius: 999px;
}
.ah-candidate--jfb .ah-q-text:hover { border-color: var(--ink); background: #F6F8FA; }

@media (max-width: 860px) {
    .ah-candidate--jfb .jet-form-builder-page[data-page="3"]:not(.jet-form-builder-page--hidden) { grid-template-columns: minmax(0, 1fr); }
    .ah-candidate--jfb .jet-form-builder-page[data-page="3"] > .jet-form-builder-row:has(.ah-q-duration) {
        margin-bottom: var(--block-gap);
    }
}

/* A JFB row is a COLUMN flex container that JFB also sets flex-wrap: wrap on.
   Harmless while every row is full width and free to grow - but the moment a
   row is a grid item with a definite track height (the details column above),
   the label and the input no longer fit in the offered height and the input
   wraps into a SECOND COLUMN, 592px to the right, taking the page 493px wide.
   It is circular too: the track is sized from an item that shrinks itself to
   fit whatever height it is offered. Rows here never wrap into a second
   column. */
.ah-candidate--jfb .jet-form-builder-row { flex-wrap: nowrap; }

/* The duration ring's base rule is 0,4,0 (it had to be, to beat JFB's own
   .layout-column sizing) while its :checked rule was only 0,3,0 - so the base
   white background won and the checked ring never painted. Only the
   box-shadow, which the base never sets, was getting through. Restated at
   0,4,1. */
.ah-candidate--jfb .jet-form-builder__field-label .jet-form-builder__field.ah-q-duration:checked {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px #fff;
}


/* Calendar breathing room on small phones (2026-09-11).
   At 320 the day cells measured 25.7x34 - past the 24x24 minimum, but only by
   1.7px and only 4px apart. The gap was never the problem; nested horizontal
   padding was. The chain ran .ah-paths 280 -> .ah-path 280 with 20px a side ->
   .ah-cal 238 with another 16px a side, leaving 204px to split seven ways.
   Trimming only the INLINE padding keeps the cards vertical rhythm and the
   calendars border, and hands the grid ~40px back. The dropzone, the clinic
   select and the time slots gain the same width for free.
   Must stay AFTER the max-width:640 block, which sets .ah-path padding at the
   same specificity - source order is what decides it. */
@media (max-width: 400px) {
    .ah-candidate--jfb .ah-path { padding-inline: 12px; }
    .ah-candidate--jfb .ah-cal { padding-inline: 6px; }
}