/* Styling for the nuaxiaExpress Interest Survey (Decipher/Forsta Plus,
 * selfserve/3252/260708). Full project history and context lives in
 * express_interest.md / qc_review_amendments.md, in the same project folder
 * as this file.
 *
 * What this file styles:
 *  - Header/logo bar injected by the companion JS (#nuaxia-survey-header)
 *  - Dropdown + open-text field rows: inline label+field layout, aligned
 *    into a consistent column, fixed-width boxes
 *  - Confirmation page card (#comment_confirmation)
 *  - "Why we ask this" step info-cards, adaptive across screen sizes
 *  - Searchable combobox overlay (.nuaxia-combobox) for the specialty/
 *    country dropdowns - built by makeSearchable() in the JS file
 *  - Location-step info banner (.nuaxia-info-banner)
 * None of the above is interactive - the same-page reveals, add/remove
 * secondary orgs, header injection, and step-card insertion are all done by
 * express_interest_reveal.js (loaded via ss:includeJS). This file only
 * covers what those elements look like once they exist.
 *
 * Loaded via ss:includeCSS on the <survey> tag, alongside
 * ss:includeJS="express_interest_reveal.js". Split out from that JS file
 * on 2026-07-23 (previously injected as a <style> tag by injectStyles()) so
 * that:
 *  - layout/branding still renders correctly even in an environment that
 *    blocks JavaScript outright (a real possibility for an HCP-facing
 *    survey - some hospital networks lock this down) - the interactive
 *    behavior above still requires JS and won't work without it, but the
 *    visual layer no longer does.
 *  - CSS-only tweaks no longer force a redownload/re-parse of the JS logic
 *    file, and vice versa.
 *  - no flash of unstyled content while the JS file loads/executes.
 *
 * Must be uploaded as a system file via Survey Editor -> More tools ->
 * Upload System Files, same as the JS file. Bump the ?v=N query string on
 * ss:includeCSS on every re-upload - same caching gotcha as the JS file
 * (the hosting response has no Cache-Control header), tracked
 * independently from the JS file's own ?v=N.
 *
 * Changelog:
 *  v1 (2026-07-23): initial split-out from express_interest_reveal.js's
 *    injectStyles() - all rules moved here verbatim, no visual change.
 *  v2 (2026-07-23): styles for the new searchable combobox overlay
 *    (.nuaxia-combobox) added alongside the JS's v13.
 *  v3 (2026-07-23): styles for the location-step info banner
 *    (.nuaxia-info-banner), added alongside the JS's v14.
 *  v4 (2026-07-23): hide the platform-default footer ("Accessibility
 *    Statement - Help"), per client request. No JS change needed.
 *  v5 (2026-07-24): tightened the gap between a field's title and its
 *    .instruction-text note (row-gap 8px->4px, note's own margin-top
 *    4px->0) so notes like contact_email's "(for nuaxia communications)"
 *    sit visibly closer to their field, per client feedback that the
 *    default spacing looked disconnected. Added styling for
 *    #question_contact_title_other (the "please specify" field revealed
 *    by contact_title's "Other" choice, added in JS v15) so it reads as
 *    a small attached note under Title rather than a separate full-size
 *    question - smaller blue label text, pulled up close to Title via
 *    negative margin-top. Companion JS v16 splits contact_profemail's
 *    "(if different)" qualifier onto its own instruction-text line,
 *    styled by the same tightened rule above.
 *  v6 (2026-07-24): follow-up fix to v5, same day - the -54px margin-top
 *    used to pull #question_contact_title_other up to Title visually
 *    crowded the "please specify" input against Title's own dropdown,
 *    reading as though it belonged to Title rather than as its own field
 *    (client feedback). Replaced with a non-negative approach: a
 *    "nuaxia-tight" class toggled on the TRIGGER question by JS v17's
 *    updated initSelectToggle() instead of a large negative margin on the
 *    revealed field - see the rule's own comment below for why. Also
 *    tightened .instruction-text notes further (margin-top 0 -> -3px,
 *    empirically the closest they can get without clipping into the input
 *    box above them) per client feedback the notes were still too far from
 *    their field.
 *  v7 (2026-07-24): client feedback that the whole survey read as
 *    left-anchored instead of centered on a wide desktop screen. Root cause
 *    (confirmed by measuring actual rendered geometry, not guessed): the
 *    survey's outer container IS centered by the theme, but #primary (the
 *    form) has no max-width, so on a wide screen it stretches far past what
 *    the fixed-width field rows fill - and the injected header bar spans the
 *    full page edge-to-edge with the logo pinned to the physical left, while
 *    the form renders as a narrower block beneath it. Added
 *    #primary{max-width:980px;margin:0 auto} and split the header into a
 *    full-width bar (background/border only) with a separately capped and
 *    centered .nuaxia-header-inner (companion JS v18 wraps the logo/tagline
 *    in that div) so the logo aligns with the form's own left edge. Verified
 *    980px doesn't cause overflow/wrapping on the widest existing layout
 *    (fields + step-card side by side).
 *  v8 (2026-07-24): manual client review round. Hides the "Verification
 *    follow-up" label above each branch's "I will email this later"
 *    checkbox (not in the flowchart mock-up - the row text alone already
 *    says what it means). Repositions inline validation error text to its
 *    own line below the field instead of before the label on the same line
 *    (was reading like "error text First name [box]" - client feedback).
 *    No JS change needed for either.
 *  v9 (2026-07-24): follow-up to v8's error-position fix, same day - only
 *    fixed Decipher's own .question-error class, missed our OWN client-side
 *    ".reveal-required-msg" div (enforceRequiredWhenVisible()/
 *    enforceAtLeastOneOfTwo(), express_interest_reveal.js) which has the
 *    identical unordered-flex-child bug and is a different class the v8 rule
 *    doesn't match. Caught live by the client on the merged Step 3 page.
 *    Checked the verification page's upload field too (a different question
 *    type, .question.image, block layout not flex) - confirmed its message
 *    already renders correctly in normal document order, no fix needed
 *    there.
 *  v10 (2026-07-24): styling for the new doctor_primaryspecialty_other /
 *    doctor_secondaryspecialty_other "please specify" fields (JS v20) - same
 *    treatment as contact_title_other, requested by the client to match.
 *  v11 (2026-07-24): real layout bug found via manual review - the hidden
 *    toggle_cfg_* config marker blocks (comment_hidden_<fieldId>, read by
 *    initSelectToggle()/initCheckboxToggle()/initRadioToggle() in the JS
 *    file) only hide their own INNER div via an inline style="display:none"
 *    - the OUTER <html> element Decipher renders around them was never
 *    hidden, and carries the platform's default question-block padding/
 *    margin even though its content is invisible. On the merged Step 3 page
 *    (hcptype + all three branches on one page, 4.15), blk_doctor's own two
 *    markers (toggle_cfg_doctor_primaryspecialty/secondaryspecialty) sit at
 *    the very end of blk_doctor, right before blk_nurse begins - so
 *    whenever Nurse or Other HCP is selected (not Doctor), those two empty-
 *    but-not-actually-hidden marker blocks land visibly between hcptype and
 *    the branch's first field, showing up as a real ~170px gap confirmed in
 *    the actual respondent view (?debug=respview), not just a QA/builder
 *    preview artifact (QA Codes mode adds its own "qaTab group" debug rows
 *    too, inflating the same gap further there, but the marker blocks alone
 *    already cause a real gap for actual respondents). Doctor never showed
 *    it because its own markers land after its own visible fields instead,
 *    with nothing after them but the (also correctly hidden) other two
 *    branches. Fixed generically for every toggle_cfg_* marker survey-wide,
 *    not just these two - they only ever exist to carry config data for the
 *    JS to read via getHiddenValue(), which queries by id and works
 *    identically whether the element is visually hidden or not.
 *  v12 (2026-07-24): manual review caught the searchable combobox's visible
 *    text input (.combobox-input, used for the specialty/country dropdowns)
 *    rendering in a visibly different font from every native field on the
 *    page. Root cause confirmed via computed style, not assumed: its
 *    font-family:inherit was resolving to "fontawesome" (picked up from an
 *    icon-related ancestor), not the theme's real text font. Set explicitly
 *    to match a native input's actual computed font ("Roboto Condensed
 *    Light", sans-serif, 15px) instead of relying on inheritance.
 */

/* v11 fix: collapse every hidden-config marker block to zero footprint.
 * These carry a fieldId:match=target1,target2 string for the JS toggle
 * functions to read (id="comment_hidden_<fieldId>") and are never meant to
 * be seen - only their inner div had display:none, leaving the outer <html>
 * element's default padding/margin to render as empty space wherever it
 * happens to land in document order (see the v11 changelog entry above for
 * the concrete case this was caught on). Matches by id prefix so it covers
 * every marker already on the survey (title, howheard, location, both
 * doctor specialty fields, all three hcptype branches, alerts, secondary-org
 * reveal) as well as any added later, not just the two that surfaced this. */
[id^="comment_toggle_cfg_"]{display:none!important;margin:0!important;padding:0!important;}

/* Full-width bar (background/border only) - the inner content is capped and
 * centered separately below, matching #primary's own cap, so the logo lines
 * up with the form's left edge rather than sitting at the physical page
 * edge while the form renders as a narrower centered column beneath it. */
#nuaxia-survey-header{background:#fff;border-bottom:3px solid #ffa300;font-family:Arial,Helvetica,sans-serif;}
.nuaxia-header-inner{display:flex;align-items:center;gap:16px;padding:16px 24px;max-width:980px;margin:0 auto;box-sizing:border-box;}
.nuaxia-header-inner img{height:28px;width:auto;display:block;}
.nuaxia-header-inner span{color:#26373e;font-size:14px;}
@media (max-width:480px){.nuaxia-header-inner span{display:none;}}

/* The survey's own content column (#primary) has no max-width by default and
 * stretches to fill whatever the page container is - on a wide desktop
 * screen the fixed-width field rows (label+input, capped well below this)
 * don't fill it, reading as left-anchored inside a much wider box rather
 * than as a centered, appropriately-sized page. Capping and centering it
 * here fixes that without touching the individual field-row widths, which
 * are already correctly sized. 980px comfortably fits the widest existing
 * layout (fields + step-card side by side, see .step-layout below) with
 * room to spare. */
#primary{max-width:980px;margin:0 auto;}

/* "I will email this later" checkbox on the verification page (per branch) -
 * the "Verification follow-up" label above it isn't in the flowchart
 * mock-up and is redundant with the row's own text ("I will email this
 * later to anna@nuaxia.com"). Hidden rather than removed from the XML so
 * the question's title requirement (section 4.4 - a real title is required,
 * an empty one throws a save error) doesn't have to change. */
#question_verify_doctor_emaillater .question-text,
#question_verify_nurse_emaillater .question-text,
#question_verify_other_emaillater .question-text{display:none;}

/* Validation error text was rendering as an unordered flex child (order 0 by
 * default), landing before the label in the row instead of below the field -
 * client feedback ("error text, First name, [box]" instead of the error
 * coming after). Pushed to its own line at the end of the row, after the
 * instruction-text note (order 3). */
.question.select .question-error,.question.text .question-error{order:4;flex:0 0 100%;}

/* Same fix as above, for our OWN client-side error messages - enforceRequiredWhenVisible()
 * and enforceAtLeastOneOfTwo() (express_interest_reveal.js) append a
 * ".reveal-required-msg" div directly into the question element, same as
 * Decipher's native .question-error, and it has the identical unordered-flex-
 * child problem (renders before the label instead of below the field) since
 * it's a different class the rule above doesn't touch. Missed this the first
 * time round - client feedback caught it live on the merged Step 3 page. */
.question.select .reveal-required-msg,.question.text .reveal-required-msg{order:4;flex:0 0 100%;}

/* Dropdown + open-text field rows: label and field sit side by side, sharing
 * a fixed-width label column so every row's field starts at the same x
 * position regardless of label length (a min-width alone lets long labels
 * widen their own row and throw off alignment with shorter ones). */
.question.select,.question.text{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;}
.question.select .question-text,.question.text .question-text{margin:0;order:1;flex:0 0 240px;width:240px!important;}
/* The theme's own CSS sets .answers-list to display:table with a near-full-
 * width computed width, which overflows the flex row and forces a wrap back
 * to stacked layout - overridden here. */
.question.select .answers-list,.question.text .answers-list{margin:0;order:2;width:auto!important;max-width:320px;flex:1 1 200px;}
/* Each <input>'s own native HTML "size" attribute (size="25"/"30"/"40"/"10"
 * per field in the XML) sets its rendered width independent of its
 * container - forcing a fixed width directly on the input/select overrides
 * that so every box in this layout is the same size. */
.question.select .answers-list select,.question.text .answers-list input{width:280px!important;max-width:100%;box-sizing:border-box;}
/* Some fields (e.g. contact_email's "(for nuaxia communications)" note)
 * still show a live .instruction-text line alongside the flexed row -
 * forcing it full-width and last keeps the label+field row intact with the
 * note dropping to its own line underneath. */
/* margin-top:-3px pulls the note up against the input box's own bottom edge
 * without overlapping it (confirmed empirically live - the input is taller
 * than the label text due to align-items:center, leaving ~12-13px of
 * unavoidable visual gap under the label that no amount of margin removes;
 * -3px is the most this can tighten before the note starts clipping into
 * the input box itself). */
.question.select .instruction-text,.question.text .instruction-text{order:3;flex:0 0 100%;margin-top:-3px;margin-bottom:0;color:#4685bf;font-size:13px;}

/* contact_title_other (the "please specify" field revealed by contact_title's
 * "Other" choice, see JS v15's initSelectToggle('toggleselect_title')) should
 * read as a small note attached to Title, not a separate full-size question -
 * pulled closer to Title and its label styled to match .instruction-text
 * (same blue/13px treatment) rather than a normal question-text label.
 * Deliberately NOT done with a large negative margin-top on the whole
 * question block - tried that first (-54px) and it visually crowded the
 * "please specify" input right up against Title's own dropdown, reading as
 * if it belonged to Title rather than as its own field (client feedback).
 * Instead: initSelectToggle() (JS v17) toggles a "nuaxia-tight" class on the
 * TRIGGER question (contact_title) whenever its matching choice is selected,
 * shrinking Title's own margin-bottom - a small, non-negative adjustment on
 * both sides that can't overlap or overflow. */
#question_contact_title.nuaxia-tight{margin-bottom:0;}
#question_contact_title_other{margin-top:2px;margin-bottom:6px;}
#question_contact_title_other .question-text{font-size:13px;color:#4685bf;}

/* doctor_primaryspecialty_other / doctor_secondaryspecialty_other (JS v20) -
 * same "please specify" treatment as contact_title_other above, requested by
 * the client to match. Both trigger selects use the searchable combobox
 * overlay (makeSearchable()), not a plain dropdown - verified live that the
 * extra combobox suggestion-panel markup doesn't change the tight spacing
 * needed, same values as contact_title work here too. */
#question_doctor_primaryspecialty.nuaxia-tight,
#question_doctor_secondaryspecialty.nuaxia-tight{margin-bottom:0;}
#question_doctor_primaryspecialty_other,
#question_doctor_secondaryspecialty_other{margin-top:2px;margin-bottom:6px;}
#question_doctor_primaryspecialty_other .question-text,
#question_doctor_secondaryspecialty_other .question-text{font-size:13px;color:#4685bf;}
@media (max-width:600px){
  .question.select,.question.text{display:block;}
  .question.select .question-text,.question.text .question-text{margin-bottom:8px;width:auto!important;}
  .question.select .answers-list,.question.text .answers-list{max-width:none;}
  .question.select .answers-list select,.question.text .answers-list input{width:100%!important;}
  .nuaxia-combobox .combobox-input,.nuaxia-combobox .combobox-panel{width:100%;}
}

/* Searchable combobox overlay (specialty/country dropdowns - see
 * makeSearchable() in express_interest_reveal.js). Sits next to the real
 * <select>, which is hidden but stays in the DOM as the actual submitted
 * value - this is purely the visible picker UI.
 *
 * font-family was "inherit" until a manual review caught it rendering in
 * the wrong font (2026-07-24) - confirmed via computed style that it was
 * actually resolving to font-family: fontawesome (picked up from some
 * icon-related ancestor in the inheritance chain, not the theme's own text
 * font), not a rendering glitch. Set explicitly to match the theme's real
 * native-input font instead of relying on inheritance - confirmed via
 * getComputedStyle on a real <input> (e.g. doctor_jobtitle): "Roboto
 * Condensed Light", sans-serif at 15px. */
.question .answers-list{position:relative;}
.nuaxia-combobox .combobox-input{width:280px;max-width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid #ccd0d5;border-radius:4px;font-size:15px;font-family:"Roboto Condensed Light",sans-serif;}
.nuaxia-combobox .combobox-panel{display:none;position:absolute;top:100%;left:0;z-index:50;width:280px;max-width:100%;max-height:240px;overflow-y:auto;background:#fff;border:1px solid #ccd0d5;border-top:none;box-shadow:0 4px 10px rgba(0,0,0,0.08);font-family:"Roboto Condensed Light",sans-serif;}
.nuaxia-combobox .combobox-panel.open{display:block;}
.nuaxia-combobox .combobox-option{padding:6px 8px;cursor:pointer;font-size:15px;}
.nuaxia-combobox .combobox-option.active,.nuaxia-combobox .combobox-option:hover{background:#eef3fb;}
.nuaxia-combobox .combobox-empty{padding:6px 8px;color:#888;font-size:14px;font-style:italic;}

/* Platform-default footer ("Accessibility Statement - Help") - client asked
 * to hide it (2026-07-23). */
.footer{display:none;}

/* Location-step info banner (injectLocationHint() in the JS file) - matches
 * the flowchart mock-up's "If you are in the US, you will be asked for your
 * State." hint, missing from the live survey until this pass. */
.nuaxia-info-banner{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 14px;background:#eef4fb;border:1px solid #d7e5f5;border-radius:6px;color:#26373e;font-size:13px;}
.nuaxia-info-banner svg{flex:0 0 18px;width:18px;height:18px;stroke:#26373e;fill:none;stroke-width:1.6;stroke-linecap:round;}

/* Standalone <html> blocks (not real questions) get id="comment_<label>",
 * not "question_<label>". */
#comment_confirmation{max-width:520px;margin:40px auto;padding:32px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.06);text-align:center;}
#comment_confirmation b{color:#26373e;font-size:20px;}

/* Step info-cards (flowchart mock-up "why we ask this" panels). Side by
 * side on wide screens, stacked below the fields on narrow ones. Scales up
 * on genuinely wide viewports instead of staying pinned at a fixed size,
 * while still shrinking gracefully down to the breakpoint - clamp()-based
 * padding/icon/text size so the whole card grows together, not just its
 * width. */
.step-layout{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;}
.step-fields{flex:3 1 480px;min-width:0;}
.nuaxia-step-card{flex:1 1 260px;min-width:220px;max-width:380px;background:#fff;border:1px solid #e2e5ea;border-radius:10px;padding:clamp(16px,2vw,28px);display:flex;flex-direction:column;gap:clamp(8px,1vw,14px);}
.nuaxia-step-card svg{width:clamp(28px,3vw,40px);height:clamp(28px,3vw,40px);stroke:#26373e;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.nuaxia-step-card p{margin:0;font-size:clamp(13px,1.1vw,16px);line-height:1.5;color:#26373e;}
@media (max-width:700px){
  .step-layout{display:block;}
  .nuaxia-step-card{width:100%;max-width:none;margin-top:20px;}
}