/* ============================================================================
   SIForm — themeable layer.
   Loads after form.css and re-expresses the rendered form's visual properties
   through --ffs-* custom properties, each falling back to the stock look.
   With no style config the form renders exactly as before; the style engine
   (src/engine/styleEngine.js) only ever emits variable overrides.

   Scope covers the runtime form AND the builder canvas page, so the canvas is
   a live preview. `:where(#fb-canvas)` keeps the canvas scope at the same
   specificity as the runtime scope.
   ========================================================================== */

:is(.ff-form-root, :where(#fb-canvas) .fb-page) {
  --_primary: var(--ffs-primary, var(--accent, #6366f1));
  --_scale: var(--ffs-font-scale, 1);
  --_space: var(--ffs-space-scale, 1);

  font-family: var(--ffs-font-family, var(--font, 'Inter', 'Segoe UI', system-ui, sans-serif));
  background: var(--ffs-form-bg, var(--panel, #fff));
  border-radius: var(--ffs-form-radius, var(--radius-lg, 12px));
  border: var(--ffs-form-border-w, 1px) solid var(--ffs-form-border-color, var(--border, #e4e7ec));
  box-shadow: var(--ffs-form-shadow, var(--shadow-md, 0 4px 16px -2px rgba(16, 24, 40, .12)));
}

/* Form width/padding/alignment (runtime shell only — the canvas page is sized
   by the builder). */
body.ff-kiosk .ff-form-root {
  max-width: min(var(--ffs-form-max-w, 70rem), 100%);
  padding: max(var(--ffs-form-pad-t, var(--ffs-form-pad, var(--ff-pad))), env(safe-area-inset-top))
           max(var(--ffs-form-pad-r, var(--ffs-form-pad, var(--ff-pad))), env(safe-area-inset-right))
           max(var(--ffs-form-pad-b, var(--ffs-form-pad, var(--ff-pad))), env(safe-area-inset-bottom))
           max(var(--ffs-form-pad-l, var(--ffs-form-pad, var(--ff-pad))), env(safe-area-inset-left));
}
body.ff-kiosk[data-ff-align="left"] .ff-form-root { margin-inline: 0 auto; }
body.ff-kiosk[data-ff-align="right"] .ff-form-root { margin-inline: auto 0; }
.pv-frame.ff-form-root {
  padding: var(--ffs-form-pad-t, var(--ffs-form-pad, var(--ff-pad, 34px))) var(--ffs-form-pad-r, var(--ffs-form-pad, var(--ff-pad, 34px)))
           var(--ffs-form-pad-b, var(--ffs-form-pad, var(--ff-pad, 34px))) var(--ffs-form-pad-l, var(--ffs-form-pad, var(--ff-pad, 34px)));
}
/* The builder canvas shows the same padding as the live form. */
:where(#fb-canvas) .fb-page {
  padding: var(--ffs-form-pad-t, var(--ffs-form-pad, 34px)) var(--ffs-form-pad-r, var(--ffs-form-pad, 38px))
           var(--ffs-form-pad-b, var(--ffs-form-pad, 30px)) var(--ffs-form-pad-l, var(--ffs-form-pad, 38px));
}

/* Spacing scale. */
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .pv-row,
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .fb-row {
  gap: calc(var(--ff-gap, 1rem) * var(--_space));
}
.ff-form-root .pv-field { margin-bottom: var(--ffs-field-gap, calc(var(--ff-sp-2, .55rem) * var(--_space))); }
.ff-form-root .pv-section,
:where(#fb-canvas) .fb-page .fb-field.is-container { margin-bottom: var(--ffs-section-gap, var(--ff-sp-3, 1rem)); }

/* ------------------------------------------------------------- typography -- */

.ff-form-root .pv-form-head h1,
:where(#fb-canvas) .fb-page .fb-form-title {
  font-size: calc(var(--ffs-title-size, var(--ff-fs-title, 1.6rem)) * var(--_scale));
  font-family: var(--ffs-title-font, inherit);
  font-weight: var(--ffs-title-weight, 700);
  color: var(--ffs-title-color, inherit);
  text-transform: var(--ffs-title-transform, none);
  line-height: var(--ffs-title-lh, 1.2);
  letter-spacing: var(--ffs-title-ls, -0.01em);
  font-style: var(--ffs-title-style, normal);
}
.ff-form-root .pv-form-head p,
:where(#fb-canvas) .fb-page .fb-form-desc {
  font-size: calc(var(--ffs-desc-size, var(--ff-fs-desc, .9rem)) * var(--_scale));
  font-family: var(--ffs-desc-font, inherit);
  font-weight: var(--ffs-desc-weight, 400);
  color: var(--ffs-desc-color, var(--muted, #667085));
  text-transform: var(--ffs-desc-transform, none);
  line-height: var(--ffs-desc-lh, 1.55);
  letter-spacing: var(--ffs-desc-ls, normal);
}
.ff-form-root .pv-section-title,
.ff-form-root .pv-page-title,
:where(#fb-canvas) .fb-page .fb-section-title {
  font-size: calc(var(--ffs-section-size, 1em) * var(--_scale));
  font-family: var(--ffs-section-font, inherit);
  font-weight: var(--ffs-section-weight, 700);
  color: var(--ffs-section-color, inherit);
  text-transform: var(--ffs-section-transform, none);
  letter-spacing: var(--ffs-section-ls, normal);
}
.ff-form-root .pv-label,
:where(#fb-canvas) .fb-page .fb-label {
  font-size: calc(var(--ffs-label-size, var(--ff-fs-label, .9rem)) * var(--_scale));
  font-family: var(--ffs-label-font, inherit);
  font-weight: var(--ffs-label-weight, 600);
  color: var(--ffs-label-color, inherit);
  text-transform: var(--ffs-label-transform, none);
  line-height: var(--ffs-label-lh, 1.4);
  letter-spacing: var(--ffs-label-ls, normal);
  font-style: var(--ffs-label-style, normal);
  margin-bottom: var(--ffs-label-gap, var(--ff-sp-1, .3rem));
  justify-content: var(--ffs-label-align, flex-start);
}
.ff-form-root .pv-help,
:where(#fb-canvas) .fb-page .fb-help {
  font-size: calc(var(--ffs-help-size, var(--ff-fs-help, .8rem)) * var(--_scale));
  color: var(--ffs-help-color, var(--faint, #98a2b3));
  font-family: var(--ffs-help-font, inherit);
  font-weight: var(--ffs-help-weight, 400);
  font-style: var(--ffs-help-style, normal);
}
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .fb-req {
  color: var(--ffs-required-color, var(--danger, #e5484d));
}

/* ----------------------------------------------------------------- inputs -- */

:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-input {
  background: var(--ffs-input-bg, var(--panel, #fff));
  color: var(--ffs-input-color, inherit);
  border-width: var(--ffs-input-bw, 1px);
  border-color: var(--ffs-input-border, var(--border-strong, #cfd4dc));
  border-radius: var(--ffs-input-radius, var(--ffs-radius, var(--ff-radius, 10px)));
  min-height: var(--ffs-input-h, var(--ff-touch, 44px));
  padding-inline: var(--ffs-input-padx, var(--ff-sp-3, .8rem));
  font-size: calc(var(--ffs-input-size, var(--ff-fs-input, 1rem)) * var(--_scale));
  font-family: var(--ffs-input-font, inherit);
  font-weight: var(--ffs-input-weight, 400);
  transition: border-color var(--ffs-input-transition, 120ms), box-shadow var(--ffs-input-transition, 120ms), background var(--ffs-input-transition, 120ms);
}
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-input::placeholder {
  color: var(--ffs-placeholder-color, var(--faint, #98a2b3));
}
.ff-form-root .ff-input:hover:not(:disabled):not(:focus) {
  border-color: var(--ffs-input-hover-border, var(--ffs-input-border, var(--border-strong, #cfd4dc)));
}
.ff-form-root .ff-input:focus {
  border-color: var(--ffs-input-focus-border, var(--_primary));
  box-shadow: 0 0 0 3px var(--ffs-input-focus-ring, var(--accent-soft, rgba(99, 102, 241, .18)));
}
.ff-form-root .ff-input:disabled,
.ff-form-root .ff-input[readonly] {
  opacity: var(--ffs-input-disabled-op, .6);
  cursor: not-allowed;
}
.ff-form-root .ff-input[readonly] { cursor: default; background: var(--ffs-input-bg, var(--bg, #f4f5f7)); }
.ff-form-root .pv-field.has-error .ff-input {
  border-color: var(--ffs-error-border, var(--ffs-error-color, var(--danger, #e5484d)));
}
.ff-form-root .pv-field.is-valid .ff-input {
  border-color: var(--ffs-success-color, var(--success, #16a34a));
}

/* Option text (radio/checkbox/likert/consent) follows the input text color —
   without this, dark themes leave option labels invisible on dark surfaces. */
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-choice,
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-likert-opt,
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-toggle-text,
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-matrix {
  color: var(--ffs-input-color, inherit);
}

/* Choice/toggle/star accents follow the primary token. */
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-choice input,
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-matrix input { accent-color: var(--_primary); }
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-toggle input:checked + .ff-toggle-track { background: var(--_primary); }
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-slider-wrap input[type="range"] { accent-color: var(--_primary); }
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-star.is-on { color: var(--ffs-warning, #f59e0b); }
.ff-form-root .pv-progress-bar span { background: var(--_primary); }

/* ---------------------------------------------------------------- buttons -- */

:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-btn {
  font-size: calc(var(--ffs-button-size, var(--ff-fs-btn, .95rem)) * var(--_scale));
  font-family: var(--ffs-button-font, inherit);
  font-weight: var(--ffs-button-weight, 600);
  text-transform: var(--ffs-button-transform, none);
  letter-spacing: var(--ffs-button-ls, normal);
}
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-btn-primary {
  background: var(--ffs-btn-bg, var(--_primary));
  background-image: var(--ffs-btn-bg-image, none);
  color: var(--ffs-btn-color, #fff);
  border: var(--ffs-btn-bw, 0) solid var(--ffs-btn-border-color, transparent);
  border-radius: var(--ffs-btn-radius, var(--ffs-radius, var(--ff-radius, 10px)));
  box-shadow: var(--ffs-btn-shadow, none);
  padding-inline: var(--ffs-btn-padx, var(--ff-sp-4, 1.15rem));
  padding-block: var(--ffs-btn-pady, var(--ff-sp-2, .55rem));
  width: var(--ffs-btn-w, auto);
}
.ff-form-root .ff-btn-primary:hover {
  background: var(--ffs-btn-hover-bg, var(--accent-600, #4f46e5));
  background-image: var(--ffs-btn-bg-image, none);
  color: var(--ffs-btn-hover-color, var(--ffs-btn-color, #fff));
  filter: var(--ffs-btn-hover-filter, none);
}
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-btn-secondary {
  background: var(--ffs-btn2-bg, var(--panel, #fff));
  color: var(--ffs-btn2-color, inherit);
  border: var(--ffs-btn2-bw, 1px) solid var(--ffs-btn2-border-color, var(--border-strong, #cfd4dc));
  border-radius: var(--ffs-btn2-radius, var(--ffs-radius, var(--ff-radius, 10px)));
  box-shadow: var(--ffs-btn2-shadow, none);
  padding-inline: var(--ffs-btn2-padx, var(--ff-sp-4, 1.15rem));
  width: var(--ffs-btn2-w, auto);
}
:is(.ff-form-root, :where(#fb-canvas) .fb-page) .ff-btn-secondary:hover {
  background: var(--ffs-btn2-hover-bg, var(--bg, #f4f5f7));
  color: var(--ffs-btn2-hover-color, inherit);
}
.ff-form-root .ff-btn:focus-visible { outline-color: var(--ffs-input-focus-border, var(--_primary)); }

/* --------------------------------------------------------------- messages -- */

.ff-form-root .pv-error {
  color: var(--ffs-error-color, var(--danger, #e5484d));
  background: var(--ffs-error-bg, transparent);
  border-radius: 6px;
}
/* When a background/border is configured, the engine emits a rule adding the
   boxed padding — CSS alone can't branch on "variable is set". */
.ff-form-root .pv-success h2 { color: var(--ffs-success-color, inherit); }
.ff-form-root .pv-success-icon {
  background: var(--ffs-success-bg, #dcfce7);
  color: var(--ffs-success-color, var(--success, #16a34a));
}

/* --------------------------------------------------------------- sections -- */

.ff-form-root .pv-section,
:where(#fb-canvas) .fb-page .fb-field.is-container {
  background: var(--ffs-sec-bg, var(--bg, #f4f5f7));
  border: 1px solid var(--ffs-sec-border, var(--border, #e4e7ec));
  border-radius: var(--ffs-sec-radius, var(--ffs-radius, 12px));
  padding: var(--ffs-sec-pad, var(--ff-sp-4, 1.1rem));
}
.ff-form-root .pv-section-outline { background: transparent; }
.ff-form-root .ff-divider { border-top-color: var(--ffs-sec-divider, var(--border-strong, #cfd4dc)); }

/* ============================================================================
   Wizard variants (activated by data-wizard on the progress container).
   The markup is identical across variants; free ships bar/steps/breadcrumb,
   The Design module sets the attribute + variables for the rest.
   ========================================================================== */

.ff-form-root .pv-steps .pv-step-dot {
  background: var(--ffs-wz-upcoming, var(--bg, #f4f5f7));
  border-color: var(--ffs-wz-line, var(--border-strong, #cfd4dc));
  color: var(--ffs-wz-label, var(--muted, #667085));
  width: var(--ffs-wz-size, 26px);
  height: var(--ffs-wz-size, 26px);
}
.ff-form-root .pv-steps .pv-step.is-active .pv-step-dot {
  background: var(--ffs-wz-current, var(--_primary));
  border-color: var(--ffs-wz-current, var(--_primary));
  color: #fff;
}
.ff-form-root .pv-steps .pv-step.is-done .pv-step-dot {
  background: var(--ffs-wz-done-bg, var(--accent-soft, rgba(99, 102, 241, .15)));
  border-color: var(--ffs-wz-done, var(--_primary));
  color: var(--ffs-wz-done, var(--_primary));
}
.ff-form-root .pv-step-line { background: var(--ffs-wz-line, var(--border-strong, #cfd4dc)); }
.ff-form-root .pv-progress-bar { height: var(--ffs-wz-bar-h, 8px); }

/* -- numbered: large numerals, no circles -- */
.ff-form-root [data-wizard="numbered"] .pv-step-dot {
  background: transparent; border: 0; font-size: 1.3em; width: auto; height: auto;
}
.ff-form-root [data-wizard="numbered"] .pv-step.is-active .pv-step-dot { color: var(--ffs-wz-current, var(--_primary)); background: transparent; }
.ff-form-root [data-wizard="numbered"] .pv-step-line { height: 3px; border-radius: 2px; }

/* -- timeline: vertical rail with dots -- */
.ff-form-root [data-wizard="timeline"] { flex-direction: column; align-items: stretch; gap: 0; }
.ff-form-root [data-wizard="timeline"] .pv-step { padding: 0 0 var(--ff-sp-2, .5rem) 1.6rem; position: relative; }
.ff-form-root [data-wizard="timeline"] .pv-step-dot {
  position: absolute; left: 0; top: 0;
  width: 14px; height: 14px; font-size: 0;
}
.ff-form-root [data-wizard="timeline"] .pv-step::before {
  content: ''; position: absolute; left: 6px; top: 16px; bottom: -2px;
  width: 2px; background: var(--ffs-wz-line, var(--border-strong, #cfd4dc));
}
.ff-form-root [data-wizard="timeline"] .pv-step:last-child::before { display: none; }
.ff-form-root [data-wizard="timeline"] .pv-step-line { display: none; }

/* -- cards: each step is a pill/card -- */
.ff-form-root [data-wizard="cards"] { gap: var(--ff-sp-2, .5rem); }
.ff-form-root [data-wizard="cards"] .pv-step {
  border: 1px solid var(--ffs-wz-line, var(--border, #e4e7ec));
  border-radius: var(--ffs-radius, 10px);
  padding: var(--ff-sp-2, .5rem) var(--ff-sp-3, .8rem);
  flex: 1 1 8rem;
  background: var(--ffs-wz-upcoming, transparent);
}
.ff-form-root [data-wizard="cards"] .pv-step.is-active {
  border-color: var(--ffs-wz-current, var(--_primary));
  box-shadow: 0 0 0 3px var(--ffs-input-focus-ring, var(--accent-soft, rgba(99, 102, 241, .18)));
}
.ff-form-root [data-wizard="cards"] .pv-step.is-done { border-color: var(--ffs-wz-done, var(--_primary)); }
.ff-form-root [data-wizard="cards"] .pv-step-line { display: none; }

/* -- minimal: dots only -- */
.ff-form-root [data-wizard="minimal"] { justify-content: center; }
.ff-form-root [data-wizard="minimal"] .pv-step-label,
.ff-form-root [data-wizard="minimal"] .pv-step-line { display: none; }
.ff-form-root [data-wizard="minimal"] .pv-step-dot { width: 10px; height: 10px; font-size: 0; }

/* -- vertical wizard (any variant) -- */
.ff-form-root [data-wizard-vertical] { flex-direction: column; align-items: flex-start; }
.ff-form-root [data-wizard-vertical] .pv-step-line { width: 2px; min-width: 2px; height: 14px; flex: 0 0 auto; margin: 2px 0 2px calc(var(--ffs-wz-size, 26px) / 2); }

/* ============================================================================
   Animations (activated by data-ff-anim-* on the frame; the Design module sets these).
   All are opacity/transform only, and disabled under prefers-reduced-motion.
   ========================================================================== */

@keyframes ffa-fade { from { opacity: 0; } }
@keyframes ffa-slide { from { opacity: 0; transform: translateX(24px); } }
@keyframes ffa-slide-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes ffa-scale { from { opacity: 0; transform: scale(.96); } }
@keyframes ffa-zoom { from { opacity: 0; transform: scale(.8); } }
@keyframes ffa-flip { from { opacity: 0; transform: perspective(600px) rotateY(14deg); } }

[data-ff-anim-step="fade"] .pv-fields { animation: ffa-fade var(--ffs-anim-ms, 260ms) ease; }
[data-ff-anim-step="slide"] .pv-fields { animation: ffa-slide var(--ffs-anim-ms, 260ms) ease; }
[data-ff-anim-step="scale"] .pv-fields { animation: ffa-scale var(--ffs-anim-ms, 260ms) ease; }
[data-ff-anim-step="flip"] .pv-fields { animation: ffa-flip var(--ffs-anim-ms, 300ms) ease; }
[data-ff-anim-step="zoom"] .pv-fields { animation: ffa-zoom var(--ffs-anim-ms, 260ms) ease; }

[data-ff-anim-fields="fade"] .pv-field { animation: ffa-fade var(--ffs-anim-ms, 300ms) ease backwards; }
[data-ff-anim-fields="slide"] .pv-field { animation: ffa-slide-up var(--ffs-anim-ms, 300ms) ease backwards; }
[data-ff-anim-fields="scale"] .pv-field { animation: ffa-scale var(--ffs-anim-ms, 300ms) ease backwards; }
[data-ff-anim-fields] .pv-field:nth-child(-n+12) { animation-delay: calc(var(--ff-anim-i, 0) * 30ms); }

[data-ff-anim-success="zoom"] .pv-success { animation: ffa-zoom 380ms cubic-bezier(.2, .9, .3, 1.4); }
[data-ff-anim-success="fade"] .pv-success { animation: ffa-fade 380ms ease; }
[data-ff-anim-success="slide"] .pv-success { animation: ffa-slide-up 380ms ease; }

@media (prefers-reduced-motion: reduce) {
  [data-ff-anim-step] .pv-fields,
  [data-ff-anim-fields] .pv-field,
  [data-ff-anim-success] .pv-success { animation: none !important; }
}

/* ============================================================================
   Dark-mode variables (the Design module writes --ffs-dark-* under this attribute/media).
   ========================================================================== */

.pv-frame.pv-dark.ff-form-root,
[data-ff-scheme="dark"] .ff-form-root {
  background: var(--ffs-dark-bg, #16181d);
  --ffs-input-bg: var(--ffs-dark-input-bg, #1e2128);
  --ffs-input-border: var(--ffs-dark-border, #333845);
  --ffs-input-color: var(--ffs-dark-color, #e5e7eb);
  --ffs-label-color: var(--ffs-dark-color, #e5e7eb);
  --ffs-title-color: var(--ffs-dark-color, #e5e7eb);
}