/*
 * FluentForm theme adapter (A-08c6)
 * ============================================================================
 *
 * WHAT THIS IS
 * ------------
 * A thin THEME-side adapter that maps FluentForm's plugin-generated markup onto
 * the theme's field and button tokens. It is an adapter, not a field system:
 * `.tr-field` classes are never written into plugin templates, the plugin's own
 * markup and frontend validation are untouched, and nothing here depends on the
 * plugin's internals beyond its public class names.
 *
 * WHERE IT CAME FROM
 * ------------------
 * These rules previously lived in `assets/css/theme-unified.css` under a
 * "FLUENT FORMS — THEME OVERRIDES" heading. That file is described as "design
 * tokens + base styles" and ships on every page; a third-party integration
 * block is neither, and A-20 already records the file's drift. Moving it here
 * puts it in the same place as the other integration adapters
 * (`user-hub-fields.css`, `user-hub-auth-fields.css`) and lets it load only
 * when FluentForm is actually active.
 *
 * ON `!important`
 * ---------------
 * Most flags are kept, deliberately. `fluentform-public-default.css` is a
 * plugin stylesheet outside theme control; it ships rules such as
 * `.ff-default .ff-el-form-control:focus { outline: none }` at (0,2,0), which
 * outranks any single-class theme rule, and its load order relative to the
 * theme is not guaranteed. A-08a already had to add an explicit `!important`
 * ring for exactly this reason, verified live. Flags were dropped only where
 * the declaration does not compete with a plugin rule at all — see the
 * `textarea` / `select` / `.ff-el-group` rules below, which never carried them.
 *
 * WHAT CHANGED IN A-08c6
 * ----------------------
 * 1. Submit label contrast. `.ff-btn-submit` set `color: #fff` on
 *    `--color-primary` (#00B4D8) — measured **2.46:1**, a WCAG 2.2 AA text
 *    failure (needs 4.5:1) on a form that renders in the footer, the sidebar
 *    and the newsletter section, i.e. essentially every page. The theme's own
 *    `.btn--primary` had already solved this with a dark on-primary
 *    foreground at 7.24:1; the adapter was simply contradicting the button
 *    system. Now reads the same token.
 * 2. Control font-size was `0.9375rem` (15px), below the 16px floor that stops
 *    iOS zooming the viewport on focus. Now 16px, matching
 *    `.tr-field__control`.
 * 3. Field colours now read the field-semantic tokens `--surface-sunken` and
 *    `--tiorai-field-border` — the same values `.tr-field__control` uses — so a
 *    FluentForm field and a `.tr-field` field are visually the same control.
 *    `--border-default` measured 1.13:1 against the field fill in light, which
 *    is why `--tiorai-field-border` exists (see TOKENS.md §1.3).
 * 4. Minimum target height raised to 44px, matching the shared control.
 */

/* ============================================================================
   PLUGIN CUSTOM PROPERTIES
   The plugin reads these itself, so setting them is the least invasive way to
   influence its own rules.
   ========================================================================== */

.ff-default {
  --fluentform-border-color: var(--tiorai-field-border);
  --fluentform-border-radius: var(--radius-md);
  --fluentform-secondary: var(--color-bg-secondary);
}

/* ============================================================================
   CONTROLS — input / textarea / select
   ========================================================================== */

.ff-el-form-control {
  background: var(--surface-sunken) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--tiorai-field-border) !important;
  border-radius: var(--radius-md) !important;
  font-family: inherit !important;
  /* 16px, not 0.9375rem. Below 16px iOS zooms the viewport on focus, and this
     form is on nearly every page. Matches `.tr-field__control`. */
  font-size: var(--font-size-base, 1rem) !important;
  min-height: 44px !important;
  padding: var(--space-3) var(--space-4) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* A-08a: `outline: none !important` removed here. Measured before that change:
   a focused control resolved to `outline-style: none` with a --color-primary
   border at 2.46:1 on the light surface and a 15% halo at ~1.1:1 — no passing
   indicator in light mode. The border and halo are kept as the plugin's own
   treatment; the ring paints over them. */
.ff-el-form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15) !important;
}

/* A-08a: removing the theme's own suppression was not sufficient. The plugin
   ships `.ff-default .ff-el-form-control:focus { outline: none }` in
   fluentform-public-default.css at (0,2,0), outside theme CSS, and it still
   beat the A-02 baseline — verified live. An explicit ring is required, exactly
   as for `.ff-btn-submit:focus-visible` below. Tokens only. */
.ff-el-form-control:focus-visible {
  outline: var(--tiorai-focus-ring-width) solid var(--tiorai-focus-ring-color) !important;
  outline-offset: var(--tiorai-focus-ring-offset) !important;
}

.ff-el-form-control::placeholder {
  color: var(--color-text-secondary) !important;
  opacity: 0.6;
}

.ff-el-form-control:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

textarea.ff-el-form-control {
  min-height: 100px;
  resize: vertical;
}

select.ff-el-form-control {
  appearance: auto;
}

/* ============================================================================
   LABELS, CHOICES, HELP AND ERROR TEXT
   ========================================================================== */

.ff-el-input--label label {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  font-size: var(--font-size-sm) !important;
  font-family: inherit !important;
  margin-bottom: var(--space-2) !important;
}

/* The plugin marks required fields with `.ff-el-is-required` and renders its
   own asterisk. Give it the same on-tint danger step `.tr-field__required`
   uses, rather than letting it inherit label colour. */
.ff-el-input--label.ff-el-is-required label:after {
  color: var(--tiorai-on-danger-tint) !important;
}

.ff-el-form-check-label {
  color: var(--color-text-secondary) !important;
  font-family: inherit !important;
}

.ff-el-form-check-input:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.ff-el-help-message {
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-xs) !important;
}

/* Validation output. The plugin generates and announces these itself, so the
   adapter only colours them — it adds no ARIA and no live region, because
   duplicating the plugin's own announcement would make errors read twice. */
.ff-el-is-error .ff-el-form-control {
  border-color: var(--tiorai-on-danger-tint) !important;
}

.ff-el-is-error .error,
.error.text-danger,
.ff-el-form-control ~ .error {
  color: var(--tiorai-on-danger-tint) !important;
  font-size: var(--font-size-xs) !important;
}

/* Success message after submission. Plugin-owned markup and announcement. */
.ff-message-success {
  color: var(--tiorai-on-success-tint) !important;
  border: 1px solid var(--tiorai-on-success-tint) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-4) !important;
  background: transparent !important;
}

/* ============================================================================
   SUBMIT BUTTON
   ----------------------------------------------------------------------------
   Reads `--color-text-on-brand`, the SAME token `.btn--primary` uses, rather
   than a literal. The previous `color: #fff` measured **2.46:1** against
   --color-primary — a WCAG 2.2 AA text failure (needs 4.5:1) on a form present
   on nearly every page.

   `--color-text-primary` was tried first and is WRONG: it flips with the
   theme, so it is dark in light mode (7.24:1, fine) but near-white in dark
   mode, which measured **2.36:1** — the same failure moved to the other
   theme. `--color-text-on-brand` is theme-stable by design because the brand
   fill is the same cyan in both themes. Measured after: 7.24:1 in both.
   ========================================================================== */

.ff-btn-submit {
  background: var(--color-primary) !important;
  color: var(--color-text-on-brand) !important;
  border: none !important;
  border-radius: var(--radius-full, 100px) !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: var(--font-size-sm) !important;
  min-height: 44px !important;
  padding: var(--space-3) var(--space-6) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, opacity 0.2s ease !important;
}

.ff-btn-submit:hover {
  background: var(--color-primary-dark) !important;
  opacity: 0.9 !important;
}

/* Submit loading / disabled. The plugin disables the button while a submission
   is in flight; give that state a visible treatment instead of leaving it
   identical to rest. */
.ff-btn-submit:disabled,
.ff-btn-submit.ff_working {
  opacity: 0.65 !important;
  cursor: progress !important;
  transform: none !important;
}

/* A-02: FluentForm ships its own button reset, so the global focus baseline
   does not reach this button. `!important` matches the block. */
.ff-btn-submit:focus-visible {
  outline: var(--tiorai-focus-ring-width) solid var(--tiorai-focus-ring-color) !important;
  outline-offset: var(--tiorai-focus-ring-offset) !important;
}

/* ============================================================================
   LAYOUT
   ========================================================================== */

.ff-el-group {
  margin-bottom: var(--space-4) !important;
}

/* ----------------------------------------------------------------------------
   COMPACT VARIANT — footer / sidebar / newsletter section
   ----------------------------------------------------------------------------
   One field and a button, inline, in a narrow column. This is a scoped layout
   modifier, NOT a second field system: colours, borders, focus and states all
   still come from the rules above. Only spacing changes.
   -------------------------------------------------------------------------- */

.newsletter-form-content .ff-el-group,
.tiorai-newsletter-modal .ff-el-group,
.footer-newsletter .ff-el-group {
  margin-bottom: var(--space-2) !important;
}

/* Reduced motion: the hover/loading transitions above are the only motion this
   adapter introduces. */
@media (prefers-reduced-motion: reduce) {
  .ff-el-form-control,
  .ff-btn-submit {
    transition: none !important;
  }
}