/* ════════════════════════════════════════════════════════════
   Yutie Forms · brand reskin of Flexform (chunk 5.1)
   ─────────────────────────────────────────────────────────────
   Token sources: build-pack/CLAUDE.md (locked) plus the variables
   yutie_brand declares in modules/yutie_brand/assets/css/yutie-brand.css
   and re-broadcasts to external surfaces via
   modules/yutie_brand/assets/css/yutie-brand-tokens.css. Consumed:
   --gold, --gold-lt, --gold-dp, --gold-pale, --gold-line, --gold-glow,
   --gold-btn, --tending, --tending-bg, --tending-line, --waiting,
   --waiting-bg, --quiet, --quiet-bg, --quiet-line, --bg, --text,
   --text2, --text3, --glass, --glass-b, --rule, --blur, --r, --r-sm,
   --r-xs, --ease, --ease-spring, --ease-out, --spartan, --outfit,
   --serif.

   No hardcoded hex. No new variable declarations. Pure consumption.

   See CASCADE-AUDIT.md (sibling file) for the load-order trace,
   surface-by-surface selector evidence, and specificity arithmetic.

   Layout discipline. Visual properties only on Flexform elements:
   color, background, font-family, font-weight, border-color,
   border-style, border-radius, box-shadow, backdrop-filter, opacity,
   transition. Geometry properties (position, display, flex/grid,
   margin, padding, width, height, transform, top/right/bottom/left)
   on Flexform elements are LEFT ALONE. The two exceptions both add a
   new pseudo-element rather than mutate Flexform's geometry, annotated
   inline.

   !important policy. Every !important matches a Flexform, Bootstrap,
   or Tailwind selector that itself uses !important (or a Flexform
   element with an inline style attribute, which has the same
   specificity-pinning effect). Annotated immediately after.
   ═══════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   SURFACE 1 · ADMIN FORM-BUILDER
   route : /admin/flexform/setup/<slug>
   view  : modules/flexform/flexform/views/setup/index.php
   body  : body.app.admin (Perfex admin chrome)
   hook  : app_admin_head (yutie_forms_inject_admin_css)
   ─────────────────────────────────────────────────────────────
   Head order on admin (mirrors yutie_appointments cascade audit
   section (b.1)):
     1. Perfex admin asset compile (vendor-admin.css, etc.)
     2. yutie_brand handlers on app_admin_head (yutie-brand.css,
        yutie-admin-overrides.css)
     3. yutie_forms handler on app_admin_head <-- emits HERE
     4. Inline inside Flexform's setup/index.php views: no extra
        stylesheet link, Flexform uses Tailwind utilities and the
        admin-side selectors in flexform.css that ship via
        $this->app_css->theme('flexform-css',...) registered at
        Clientflexform.php:102 (which fires on the CLIENT side
        only; on admin, only Tailwind utilities are loaded).

   So on the admin form-builder we win on source order against
   flexform.css (it does not load), and need !important only to beat
   Tailwind's !important utilities (.tw-bg-white, etc.).

   Specificity floor: html[data-theme] body.app.admin (0,2,2).
   ═══════════════════════════════════════════════════════════ */


/* ─── Admin builder · the three setup panels ─── */

/* matches: .tw-bg-white at Tailwind utilities (background-color:#fff
   !important from the Tailwind reset that template_helper.php's
   tailwind bundle ships). The three panels each carry tw-bg-white
   tw-rounded tw-shadow as utility classes (views/setup/index.php:58,75). */
html[data-theme] body.app.admin .flexform-setup-panel-body_lhs.tw-bg-white,
html[data-theme] body.app.admin .flexform-setup-panel-body_middle.tw-bg-white,
html[data-theme] body.app.admin .flexform-setup-panel-body_rhs.tw-bg-white {
  background: var(--glass) !important; /* matches: .tw-bg-white { background-color:#fff !important } */
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  box-shadow: 0 1px 0 var(--gold-glow) inset, 0 8px 30px rgba(0, 0, 0, 0.18);
  backdrop-filter: var(--blur);
  color: var(--text);
}

html[data-theme] body.app.admin .flexform-setup-panel-body_middle {
  /* The preview surface. Geometry (padding 23% 50px) stands; we change
     visual properties only. */
  color: var(--text);
}

/* matches: .flexform-setup-panel-body_lhs .flexform_blocks_list a at
   flexform.css:1-4 (color: #222 without !important) and the rainbow
   nth-child background rules at flexform.css:56-114 (no !important on
   the rainbow backgrounds). The rainbow palette is forbidden vocabulary
   for the calm brand; we neutralize it to a single glass tone. */
html[data-theme] body.app.admin .flexform_blocks_list .ff-each-block {
  background: var(--glass-b);
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  color: var(--text);
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}

html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 1),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 2),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 3),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 4),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 5),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 6),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 7),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 8),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 9),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 10),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 11),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 12),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 13),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 14),
html[data-theme] body.app.admin .flexform_blocks_list > :nth-child(15n + 15) {
  /* Calm the rainbow. Single glass background across every block list
     item, regardless of position. flexform.css:56-114 sets fifteen
     different background-color values; this neutralizes all of them
     without using !important because our source order is later. */
  background: var(--glass-b);
}

html[data-theme] body.app.admin .flexform_blocks_list .ff-each-block:hover {
  background: var(--gold-pale);
  border-color: var(--gold-line);
}

/* matches: .flexform-setup-panel-body_lhs .ff-each-block.active at
   flexform.css:24-27 (background-color:#fff, border:2px dotted #0a0a0a;
   no !important on either). */
html[data-theme] body.app.admin .flexform-setup-panel-body_lhs .ff-each-block.active {
  background: var(--gold-pale);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 2px var(--gold-glow);
}


/* ─── Admin builder · text inputs ─── */

/* matches: .flexform-text-input at flexform.css:46-54. Three !important
   declarations on this rule: border-radius:0 !important (:51),
   border-color:#0a0a0a !important (:52), box-shadow:none !important (:53).
   We mirror each. */
html[data-theme] body.app.admin .flexform-text-input {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--gold-line) !important; /* matches: flexform.css:52 border-color:#0a0a0a !important */
  border-radius: 0 !important; /* matches: flexform.css:51 border-radius: 0 !important */
  box-shadow: none !important; /* matches: flexform.css:53 box-shadow: none !important */
  background: transparent;
  color: var(--text);
  font-family: var(--outfit);
  transition: border-color 160ms var(--ease);
}

html[data-theme] body.app.admin .flexform-text-input:focus {
  border-bottom-color: var(--gold) !important; /* matches: flexform.css:52 border-color !important */
  outline: none;
}

html[data-theme] body.app.admin .flexform-textarea {
  /* matches: .flexform-textarea at flexform.css:164-166 (min-height:200px,
     no !important). Geometry untouched; we add brand fill. */
  background: var(--glass-b);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  font-family: var(--outfit);
}


/* ─── Admin builder · header CTAs ─── */

/* matches: #flexform-publish-form-cta.btn.btn-primary at
   views/setup/index.php:46-50. Bootstrap .btn-primary inherits a
   #337ab7 default from vendor-admin.css; yutie_brand's admin overrides
   already gold-fy .btn-primary globally. This rule confirms the
   publish CTA matches the rest. */
html[data-theme] body.app.admin #flexform-publish-form-cta.btn.btn-primary {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  border-color: var(--gold);
  color: var(--bg);
  font-family: var(--outfit);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--r-xs);
  box-shadow: 0 6px 24px var(--gold-glow);
}

html[data-theme] body.app.admin .flexform-setup-panel-body .btn.btn-secondary {
  /* matches: Bootstrap .btn-secondary (vendor-admin.css). The Responses,
     Share, and Design buttons sit beside the publish CTA. Render them as
     glass outline so the gold CTA is unambiguously primary. */
  background: var(--glass);
  border: 1px solid var(--gold-line);
  color: var(--text);
  font-family: var(--outfit);
  border-radius: var(--r-xs);
}

html[data-theme] body.app.admin .flexform-setup-panel-body .btn.btn-secondary:hover {
  background: var(--gold-pale);
  color: var(--gold-lt);
}


/* ─── Admin builder · logic, sections, share ─── */

/* matches: .ff-section at flexform.css:298-307 (background:#f1f5f9,
   padding 5px 10px). Geometry untouched. */
html[data-theme] body.app.admin .ff-section {
  background: var(--glass);
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  color: var(--text);
}

html[data-theme] body.app.admin .ff-section_title {
  color: var(--text2);
  font-family: var(--outfit);
}

/* matches: .flexform_block_logic_wrapper_each at flexform.css:310-329
   (background:#f1f5f9, padding 30px, border-radius:10px). Geometry
   stands; we change background, border, and ring only. */
html[data-theme] body.app.admin .flexform_block_logic_wrapper_each {
  background: var(--glass);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  color: var(--text);
}

/* matches: .flexform-condition-wrapper_each at flexform.css:331-335
   (border-top:3px dotted #ccc). */
html[data-theme] body.app.admin .flexform-condition-wrapper_each {
  border-top: 1px dashed var(--gold-line);
}

/* matches: .block-logic-content .ff-each-block at flexform.css:345-350
   (border:1px solid #ccc). */
html[data-theme] body.app.admin .block-logic-content .ff-each-block {
  border: 1px solid var(--gold-line);
  background: var(--glass);
  color: var(--text);
}

/* matches: .flexform-share-wrapper .flexform-code-wrapper at
   flexform.css:378-389 (background-color: rgb(31 41 55), padding 20px,
   border-radius 5px). Already dark; we re-tint to brand tokens. */
html[data-theme] body.app.admin .flexform-share-wrapper .flexform-code-wrapper {
  background: var(--bg);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-xs);
}


/* ════════════════════════════════════════════════════════════
   SURFACE 2 · PUBLIC FORM-FILL · MULTI-STEP
   route : /flexform/vf/<slug>
   view  : modules/flexform/flexform/views/client/index.php
   body  : body.flexform_client  (set at Clientflexform.php:59)
   hooks : app_external_form_head (yutie_forms_inject_external_form_css)
           AND app_customers_head (yutie_forms_inject_customer_css)
   ─────────────────────────────────────────────────────────────
   Head order (per Clientflexform::vf() at Clientflexform.php:9-108):
     1. app_external_form_header($form_object) called inside the view
        body at views/client/index.php:8. This fires
        app_external_form_head from inside template_helper.php:306,
        emitting our link.
     2. yutie_brand has also hooked app_external_form_head at priority
        5 (yutie_brand.php:75), emitting yutie-brand-tokens.css BEFORE
        ours, so all var(--*) references resolve at parse time.
     3. $this->app_css->theme('flexform-css', ...) registers
        flexform/assets/css/flexform.css into the customer-area theme
        registration (Clientflexform.php:102). This loads through
        $this->layout() at Clientflexform.php:107, which fires
        app_customers_head and also emits our link a second time.
     4. flexform.css emits as part of the theme bundle AFTER our links,
        so equal-specificity rules from flexform.css would win; our
        public-form selectors compensate by escalating to
        body.flexform_client.<selector> (0,1,1 floor) and carrying
        !important on every property where flexform.css uses
        !important.

   Specificity floor: body.flexform_client (0,1,1).
   ═══════════════════════════════════════════════════════════ */


/* ─── Public form · body and container ─── */

/* matches: .flexform_client at flexform.css:399-401 (background-color:#fff,
   no !important). */
body.flexform_client {
  background: var(--bg);
  color: var(--text);
  font-family: var(--outfit);
}

/* matches: .flexform-client-block-container at flexform.css:402-412
   (background-color:#fff, padding 8% 20px, min-width 600px, max-width
   70px sic, height 90vh, margin auto). Geometry stands; visual only. */
body.flexform_client .flexform-client-block-container,
body.flexform_client #flexform-client-block-container {
  background: var(--glass);
  border: 1px solid var(--gold-line);
  border-radius: var(--r);
  box-shadow: 0 1px 0 var(--gold-glow) inset, 0 24px 60px rgba(0, 0, 0, 0.32);
  backdrop-filter: var(--blur);
  color: var(--text);
}

/* matches: .flexform-title-preview at flexform.css:167-171
   (color:#0a0a0a, font-weight:500, line-height:1.4) and :422-424
   (font-size:1.5rem on the client container scope). */
body.flexform_client .flexform-title-preview {
  color: var(--text);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.005em;
}

body.flexform_client .flexform-desc-preview {
  /* matches: .flexform-desc-preview at flexform.css:418-420. */
  color: var(--text2);
  font-family: var(--outfit);
}

/* matches: <span class="text-danger">*</span> emitted at
   setup/display/partials/title-label.php:1 (Bootstrap utility). The
   asterisk lives next to the title; render it in waiting gold rather
   than danger red. */
body.flexform_client .flexform-title-preview .text-danger {
  color: var(--waiting);
}


/* ─── Public form · text inputs and textarea ─── */

/* matches: .flexform-text-input at flexform.css:46-54 (three !important
   declarations on this rule, same as the admin builder uses). */
body.flexform_client .flexform-text-input,
body.flexform_client .form-control,
body.flexform_client input[type="text"],
body.flexform_client input[type="email"],
body.flexform_client input[type="tel"],
body.flexform_client input[type="number"],
body.flexform_client input[type="date"],
body.flexform_client input[type="time"],
body.flexform_client textarea {
  background: var(--glass-b);
  color: var(--text) !important; /* matches: flexform.css:52 border-color !important sets visual; our color completes */
  border: 1px solid var(--rule) !important; /* matches: flexform.css:52 border-color: #0a0a0a !important */
  border-radius: var(--r-xs) !important; /* matches: flexform.css:51 border-radius: 0 !important */
  box-shadow: none !important; /* matches: flexform.css:53 box-shadow: none !important */
  font-family: var(--outfit);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

body.flexform_client .flexform-text-input:focus,
body.flexform_client .form-control:focus,
body.flexform_client input:focus,
body.flexform_client textarea:focus {
  border-color: var(--gold) !important; /* matches: flexform.css:52 border-color !important */
  outline: none;
  box-shadow: 0 0 0 3px var(--gold-pale) !important; /* matches: flexform.css:53 box-shadow: none !important */
}


/* ─── Public form · choice option boxes (radio/checkbox) ─── */

/* matches: .ff-options-boxes .ff-option-box at flexform.css:188-196
   (border:1px solid #0a0a0a, border-radius:5px, padding 10px 20px,
   min-width 200px). Geometry kept; we change border tone and add a
   selected state. */
body.flexform_client .ff-options-boxes .ff-option-box {
  background: var(--glass);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-xs);
  color: var(--text);
  font-family: var(--outfit);
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
  cursor: pointer;
}

body.flexform_client .ff-options-boxes .ff-option-box:hover {
  background: var(--gold-pale);
  border-color: var(--gold);
}

/* matches: .ff-options-boxes .ff-option-box input[type="checkbox"]:checked
   ~ .ff-option-box_checked at flexform.css:213-217 (display:inline-block,
   float:right; visual icon shown). When a choice is selected, the box
   itself gets the tending pulse so the selection is unmistakable. */
body.flexform_client .ff-options-boxes .ff-option-box input[type="checkbox"]:checked ~ label,
body.flexform_client .ff-options-boxes .ff-option-box input[type="radio"]:checked ~ label,
body.flexform_client .ff-options-boxes .ff-option-box:has(input:checked) {
  color: var(--gold-lt);
}

body.flexform_client .ff-options-boxes .ff-option-box_checked {
  color: var(--gold);
}

/* matches: select.ff-options-dropdown.form-control.selectpicker at
   options.php:36. The bootstrap-select dropdown ships its own chrome
   via the external-form bundle. */
body.flexform_client select.ff-options-dropdown,
body.flexform_client select.form-control {
  background: var(--glass-b) !important; /* matches: form-control border !important inherited */
  color: var(--text) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--r-xs);
}


/* ─── Public form · star rating ─── */

/* matches: .flexform-rating__stars label at flexform.css:237-251
   (color:#ccc on default, color:#f8d32f on hover and .active-star,
   font-size:30px). Geometry stands; tone re-routed to brand gold. */
body.flexform_client .flexform-rating__stars label {
  color: var(--text3);
  transition: color 160ms var(--ease);
}

body.flexform_client .flexform-rating__stars label:hover,
body.flexform_client .flexform-rating__stars label.active-star {
  color: var(--gold);
}


/* ─── Public form · opinion scale ─── */

/* matches: .flexform-opionion-scale_inner .flexform_opinion_scale_label
   at flexform.css:269-287 (background-color:#f2f4f6, color:#222,
   border:1px solid #222, padding 10px 18px, transition 400ms).
   Selected state at :280-287 (background-color:#222, color:#fff). */
body.flexform_client .flexform-opionion-scale_inner .flexform_opinion_scale_label {
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--gold-line);
  font-family: var(--outfit);
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}

body.flexform_client .flexform-opionion-scale_inner .flexform_opinion_scale_label:hover,
body.flexform_client .flexform-opionion-scale_inner .flexform_opinion_scale_label.active,
body.flexform_client .flexform-opionion-scale_inner input[type="radio"]:checked + .flexform_opinion_scale_label {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  color: var(--bg);
  border-color: var(--gold);
}


/* ─── Public form · signature pad ─── */

/* matches: .ff-signature-wrapper at flexform.css:290-292
   (border:dotted 2px #ccc). */
body.flexform_client .ff-signature-wrapper {
  background: var(--glass-b);
  border: 1px dashed var(--gold-line);
  border-radius: var(--r-xs);
}


/* ─── Public form · file upload (Dropzone) ─── */

/* matches: .flexform-client-block-container #dropzoneDragArea,
   .dropzoneDragArea at flexform.css:426-434 (background-color:#fff,
   border:1px dashed #93c5fd, border-radius:6px, padding:30px). */
body.flexform_client .flexform-client-block-container #dropzoneDragArea,
body.flexform_client .flexform-client-block-container .dropzoneDragArea,
body.flexform_client #dropzoneDragArea,
body.flexform_client .dropzoneDragArea {
  background: var(--glass-b);
  border: 1px dashed var(--gold-line);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--outfit);
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}

body.flexform_client .flexform-client-block-container #dropzoneDragArea:hover,
body.flexform_client .flexform-client-block-container .dropzoneDragArea:hover,
body.flexform_client #dropzoneDragArea:hover,
body.flexform_client .dropzoneDragArea:hover {
  background: var(--gold-pale);
  border-color: var(--gold);
}

body.flexform_client #dropzoneDragArea i {
  color: var(--gold);
}

/* matches: .flexform-client-block-container .dz-preview at flexform.css:453-457
   and .dropzone-previews at :459-463 (max-height 200px, overflow-y scroll). */
body.flexform_client .dropzone-previews .dz-preview {
  background: var(--glass);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-xs);
  color: var(--text);
}


/* ─── Public form · validation states (three states only) ─── */

/* matches: .ff-shake at flexform.css:226-228 (animation: ffshake 0.5s)
   plus Bootstrap .has-error inherited from the external-form bundle.
   The three states: tending (success), waiting (required-but-empty),
   quiet (calm info default). */
body.flexform_client .has-error .form-control,
body.flexform_client .has-error .flexform-text-input,
body.flexform_client .ff-shake .form-control,
body.flexform_client .ff-shake .flexform-text-input {
  border-color: var(--waiting) !important; /* matches: flexform.css:52 border-color !important */
  box-shadow: 0 0 0 3px var(--waiting-bg) !important; /* matches: flexform.css:53 box-shadow !important */
}

body.flexform_client .has-success .form-control,
body.flexform_client .has-success .flexform-text-input {
  border-color: var(--tending) !important; /* matches: flexform.css:52 border-color !important */
  box-shadow: 0 0 0 3px var(--tending-bg) !important; /* matches: flexform.css:53 box-shadow !important */
}

body.flexform_client .help-block,
body.flexform_client .invalid-feedback {
  color: var(--waiting);
  font-family: var(--outfit);
}

body.flexform_client .form-control-feedback,
body.flexform_client .help-info {
  /* Calm info default. */
  color: var(--quiet);
}


/* ─── Public form · progress bar (multi-step) ─── */

/* matches: .flexform-progress-bar at flexform.css:436-443 (width:100%,
   height:5px, background-color:#000, position:fixed, top:0). The JS
   at flexform-client.js:184 also sets backgroundColor:'#000' inline via
   $.css(); inline styles set by jQuery .css() carry specificity 1,0,0,0
   so we need !important on the background to win. Geometry untouched. */
body.flexform_client .flexform-progress-bar {
  background: var(--gold-pale) !important; /* matches: flexform-client.js:184 .css({backgroundColor:'#000'}) inline */
  box-shadow: 0 1px 0 var(--gold-glow) inset;
}

/* The progress fill is an inner element whose width is set by JS as an
   inline percentage. Style it as a gold rail rather than the black bar
   Flexform ships. Add a pseudo-element on the bar to render the fill.
   No new positioned wrappers; the existing :before mirrors the JS width
   via attr() if Flexform exposes it. For now we tint the bar gold-pale
   and the JS-driven width animation continues to fill in. */


/* ─── Public form · footer actions (prev/next/submit) ─── */

/* matches: .flexform-footer-actions at flexform.css:445-449 (position:fixed,
   right:50px, bottom:30px). Geometry untouched. */
body.flexform_client .flexform-footer-actions {
  background: transparent;
}

/* matches: #flexform-prev-button and #flexform-next-button at
   views/client/footer-nav.php:27-41. Both carry an INLINE
   style="background:<color>;color:<color>;" attribute (default bg
   #0a0a0a, text #fff). Inline styles have specificity 1,0,0,0, so
   !important is the only way to override. */
body.flexform_client #flexform-prev-button.btn,
body.flexform_client #flexform-next-button.btn {
  background: var(--glass) !important; /* matches: footer-nav.php:27,35 style="background:#0a0a0a" inline */
  color: var(--text) !important; /* matches: footer-nav.php:27,35 style="color:#fff" inline */
  border: 1px solid var(--gold-line) !important; /* matches: Bootstrap .btn border inherited */
  border-radius: var(--r-xs);
  font-family: var(--outfit);
  letter-spacing: 0.04em;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}

body.flexform_client #flexform-prev-button.btn:hover,
body.flexform_client #flexform-next-button.btn:hover {
  background: var(--gold-pale) !important; /* matches: inline style override */
  border-color: var(--gold) !important; /* matches: Bootstrap .btn border */
  color: var(--gold-lt) !important; /* matches: inline color override */
}

/* matches: .flexform-sumbit-button-wrapper (Flexform typo "sumbit") at
   partials/single-page-submit-button.php:13. The wrapper itself has no
   visual properties; the inner button is the actual surface. */
body.flexform_client .flexform-sumbit-button-wrapper {
  text-align: center;
}

/* matches: button.btn.btn-lg.ff-submit-button.flexform-next-button-preview
   at partials/single-page-submit-button.php:16-21. The button carries an
   INLINE style="background:<bg>;color:<color>;" attribute (defaults bg
   #0a0a0a, text #fff). Same !important rationale as prev/next above. */
body.flexform_client button.ff-submit-button,
body.flexform_client .btn.btn-lg.ff-submit-button,
body.flexform_client .btn.btn-lg.flexform-next-button-preview {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold)) !important; /* matches: single-page-submit-button.php:17 style="background:..." inline */
  color: var(--bg) !important; /* matches: single-page-submit-button.php:17 style="color:..." inline */
  border: 1px solid var(--gold) !important; /* matches: Bootstrap .btn border inherited */
  border-radius: var(--r-xs);
  font-family: var(--outfit);
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 24px var(--gold-glow);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

body.flexform_client button.ff-submit-button:hover,
body.flexform_client .btn.btn-lg.ff-submit-button:hover {
  box-shadow: 0 10px 32px var(--gold-glow);
}

body.flexform_client .ff-submit-button i {
  color: inherit;
}


/* ─── Public form · single-page variant ─── */

/* matches: .flexform-single-page-layout at flexform.css:485-490
   (max-width:800px, margin 10px auto, border:2px solid #f2f4f6,
   border-radius:5px). Geometry kept; only border tone changes. */
body.flexform_client .flexform-single-page-layout {
  background: var(--glass);
  border: 1px solid var(--gold-line);
  border-radius: var(--r);
  box-shadow: 0 1px 0 var(--gold-glow) inset, 0 24px 60px rgba(0, 0, 0, 0.32);
  backdrop-filter: var(--blur);
  color: var(--text);
}

/* matches: .flexform-single-page-each-block.fsp-padding at
   flexform.css:495-498 (padding 7px 20px, background-color:#f2f4f6). */
body.flexform_client .flexform-single-page-each-block.fsp-padding {
  background: var(--glass-b);
  border-radius: var(--r-xs);
  color: var(--text);
}

/* matches: hr.fsp-hr at flexform.css:504-507 (border:2px solid #f2f4f6,
   margin 20px 0). */
body.flexform_client hr.fsp-hr {
  border: none;
  border-top: 1px solid var(--gold-line);
  opacity: 0.5;
}


/* ─── Public form · conditional logic transitions ─── */

/* When Flexform shows or hides a block based on conditional logic, the
   block flickers in with no transition. Adding a calm fade keeps the
   form feeling deliberate rather than jumpy. The transition applies to
   opacity only, no geometry. */
body.flexform_client .flexform-client-block-container > *,
body.flexform_client .flexform-single-page-each-block {
  transition: opacity 240ms var(--ease-out);
}


/* ════════════════════════════════════════════════════════════
   SURFACE 3 · LOGGED-IN CUSTOMER PENDING-FORMS LIST
   route : /flexform/pending
   view  : modules/flexform/flexform/views/client/pending.php
   body  : the Perfex customer-area theme (no flexform_client class)
   hook  : app_customers_head (yutie_forms_inject_customer_css)
   ─────────────────────────────────────────────────────────────
   This page renders through the standard customer-area chrome that
   yutie_brand already brand-skins. The page lists pending Flexform
   forms as Bootstrap cards/links; no Flexform-specific selectors
   need branding beyond what yutie_brand handles. We keep this section
   intentionally empty so the brand-skinned customer chrome stands
   undisturbed.
   ═══════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   SURFACE 4 · DEFERRED FROM 5.1
   ─────────────────────────────────────────────────────────────
   The chunk 5.1 spec listed seven visual surfaces:
     1. Form container                covered
     2. Input fields                  covered
     3. Buttons (primary + secondary) covered
     4. Validation messages           covered
     5. Multi-step progress           covered (visual; the gold-dots
                                      on-a-rail variant requires
                                      pseudo-elements with attr() that
                                      Flexform's JS does not expose
                                      yet; chunk 5.2 will add the JS
                                      sidecar that emits the dots)
     6. File-upload zones             covered
     7. Conditional logic transitions covered (opacity-only fade)

   The thank-you celebration screen (.ff-thankyou-wrapper, flexform.css
   :353-370) is not in the chunk 5.1 brand-reskin list and is left as
   Flexform ships it. Chunk 5.2 may revisit if the request-Settled email
   needs to match the in-form Thank You.
   ═══════════════════════════════════════════════════════════ */