/* =========================================================
   LOCK STATUS
   ---------------------------------------------------------
   Version: 1.3.7
   Status: Production Locked
   Last Audit: 2026-02 (Brand Architecture Update)
   Locked By: Mission43 Core System

   This version is frozen.
   Visual changes require:
   - Token update only
   - CHANGELOG.md entry
   - Version bump
   ========================================================= */

/* =========================================================
   DESIGN SYSTEM GOVERNANCE
   ---------------------------------------------------------
   This file defines the canonical Mission43 form UI system.
   DO NOT:
   - Introduce new colors outside design tokens
   - Hardcode red / gray values outside :root
   - Override token usage inline in components

   All visual changes must flow through:
   - :root design tokens
   - Card system (Section 7A)
   - Input system (Section 4)

   This prevents brand drift across forms.
   ========================================================= */

/* =========================================================
   Mission43 Universal Form Core
   Version: 1.3.7
   Release: Stable Core – Mobile + UX Polish
   Hosted via Cloudflare Pages
   ========================================================= */

/* =========================================================
   FIELDHOUSE FONT LOADER
   ---------------------------------------------------------
   Loads Poppins only when referenced by brand tokens.
   Safe for Mission43 (falls back to Inter).
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

/* =========================================================
   TOKEN FREEZE NOTICE
   ---------------------------------------------------------
   These tokens define the Mission43 brand foundation.

   DO NOT modify directly without:
   - Brand review
   - Accessibility contrast validation
   - CHANGELOG.md entry
   - Version bump

   If a new color or spacing value is needed:
   1. Add a new token here
   2. Document usage
   3. Do NOT hardcode values in component sections

   This prevents long-term brand drift across forms.
   ========================================================= */

:root {
  --m43-red: #d41636;
  --m43-red-dark: #f02f4e;

  --m43-text-primary: #171717;
  --m43-text-muted: #6f7372;

  --m43-border: rgba(23, 23, 23, 0.28);
  --m43-fill: #f3f2f0;
  --m43-fill-focus: #ffffff;
  --m43-fill-complete: #f5f4f2;
  --m43-radius-input: 10px;
  --m43-radius-pill: 999px;

  /* Brand abstraction layer */
  --m43-font-body: Inter, 'Inter Placeholder', sans-serif;
  --m43-font-label: 'Inter Variable', Inter, sans-serif;

  --m43-accent: var(--m43-red);
  --m43-accent-dark: var(--m43-red-dark);
  --m43-accent-rgb: 212, 22, 54;
}

/* Fieldhouse Brand Override */
html[data-m43-brand='fieldhouse'] {
  --m43-font-body: Poppins, Inter, sans-serif;
  --m43-font-label: Poppins, Inter, sans-serif;

  --m43-accent: #e64c38;
  --m43-accent-dark: #c94432;
  --m43-accent-rgb: 230, 76, 56;
}

/* ---------------------------------------------------------
   Fieldhouse Visual Refinements
   - Slightly softer buttons
   - Warmer hover tone
   - Softer card borders
   --------------------------------------------------------- */

html[data-m43-brand='fieldhouse'] .wFormContainer .actions input[type='submit'],
html[data-m43-brand='fieldhouse'] .wFormContainer .wfPagingButtons input {
  border-radius: 12px !important; /* Softer than Mission43 */
  font-weight: 600 !important; /* Slightly stronger presence */
}

html[data-m43-brand='fieldhouse']
  .wFormContainer
  .actions
  input[type='submit']:hover,
html[data-m43-brand='fieldhouse'] .wFormContainer .wfPagingButtons input:hover {
  background: #d94a36 !important; /* Slightly warmer hover */
}

html[data-m43-brand='fieldhouse'] .wForm .choices .oneChoice label.postField {
  border: 1px solid rgba(23, 23, 23, 0.18) !important; /* Softer than default */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* =========================================================
   10. AUTOFILL NORMALIZATION (Chrome / Safari)
   Removes browser blue autofill and keeps brand fill
   ========================================================= */

.wForm input:-webkit-autofill,
.wForm input:-webkit-autofill:hover,
.wForm input:-webkit-autofill:focus,
.wForm textarea:-webkit-autofill,
.wForm select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--m43-fill) inset !important;
  box-shadow: 0 0 0 1000px var(--m43-fill) inset !important;
  -webkit-text-fill-color: var(--m43-text-primary) !important;
  border: 1px solid var(--m43-border) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Preserve focus ring even when autofilled */
.wForm input:-webkit-autofill:focus {
  border-color: var(--m43-accent) !important;
  box-shadow:
    0 0 0 3px rgba(var(--m43-accent-rgb), 0.12),
    0 0 0 1000px var(--m43-fill) inset !important;
}

/* =========================================================
   2. GLOBAL TYPOGRAPHY NORMALIZATION
   ========================================================= */

html[data-m43-brand='fieldhouse']
  .wFormContainer
  *:not(.htmlContent):not(.htmlContent *) {
  font-family: var(--m43-font-body) !important;
  color: var(--m43-text-primary);
}

html[data-m43-brand='fieldhouse'] body,
html[data-m43-brand='fieldhouse'] .wFormContainer,
html[data-m43-brand='fieldhouse'] .wFormContainer * {
  font-family: var(--m43-font-body) !important;
}

html[data-m43-brand='mission43']
  .wFormContainer
  *:not(.htmlContent):not(.htmlContent *) {
  font-family: var(--m43-font-body) !important;
  color: var(--m43-text-primary);
}

.wForm label.preField {
  font-family: var(--m43-font-label) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--m43-text-primary) !important;
}

/* =========================================================
   3. LAYOUT NORMALIZATION
   ========================================================= */

.wForm .oneField,
.wForm .inputWrapper {
  width: 100% !important;
  max-width: 100% !important;
}

.wForm .oneField {
  margin-bottom: 22px;
}

/* =========================================================
   4. INPUT SYSTEM
   ========================================================= */

.wForm input[type='text'],
.wForm input[type='email'],
.wForm input[type='tel'],
.wForm input[type='password'],
.wForm textarea,
.wForm select {
  appearance: none !important;
  font-family: var(--m43-font-label) !important;
  background: #ffffff !important;
  border: 1px solid var(--m43-border) !important;
  border-radius: var(--m43-radius-input) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 12px 14px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

/* =========================================================
   4A. SELECT + MULTI-SELECT + TEXTAREA REFINEMENTS
   Aligns advanced inputs with core input system
   ========================================================= */

/* --- Custom Select Arrow (Unified Brand Appearance) --- */
.wForm select:not([multiple]) {
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
}

/* Ensure select matches default field fill before interaction */
.wForm select {
  background-color: #ffffff !important;
}

/* --- Multi Select Alignment --- */

.wForm select[multiple] {
  padding: 12px 14px !important;
  min-height: 120px !important;
  font-weight: 500 !important;
  appearance: none !important;
  background-color: #ffffff !important;
}

/* --- Multi Select: Subtle Brand-Tinted Selected Options --- */
.wForm select[multiple] option:checked {
  background-color: rgba(var(--m43-accent-rgb), 0.08) !important;
  color: var(--m43-text-primary) !important;
}

/* Slight border emphasis when multi-select has value */
.wForm select[multiple].m43-has-value {
  border-color: rgba(23, 23, 23, 0.35) !important;
}

/* --- Textarea Refinement --- */
.wForm textarea {
  min-height: 120px !important;
  resize: vertical !important; /* Prevent diagonal OS chrome */
  background-color: #ffffff !important;
}

/* Ensure completed state works consistently */
.wForm select.m43-has-value,
.wForm textarea.m43-has-value {
  background: var(--m43-fill-complete) !important;
}

.wForm input:focus,
.wForm textarea:focus,
.wForm select:focus {
  outline: none !important;
  background: var(--m43-fill-focus) !important;
  border-color: var(--m43-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--m43-accent-rgb), 0.12) !important;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* --- Completed Field State --- */
.wForm input.m43-has-value,
.wForm textarea.m43-has-value,
.wForm select.m43-has-value {
  background: var(--m43-fill-complete) !important;
  transition: background 0.15s ease;
}

/* Allow FormAssembly conditional rules to hide buttons */
.wFormContainer .actions input[type='submit'],
.wFormContainer .wfPagingButtons input {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  background: var(--m43-accent) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  height: 40px !important;
  padding: 0 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  line-height: 1em !important;
  border: none !important;
}

.wFormContainer .actions input[type='submit']:hover,
.wFormContainer .wfPagingButtons input:hover {
  background: var(--m43-accent-dark) !important;
}

/* =========================================================
   5A. CONDITIONAL VISIBILITY SAFETY
   ---------------------------------------------------------
   Ensures FormAssembly native conditional rules can hide
   submit / paging buttons even when core styling applies.
   ========================================================= */

/* Respect FormAssembly hidden state classes globally */
.wForm .offstate,
.wForm .wf-acl-hidden {
  display: none !important;
}

/* If FA hides the actions container, ensure buttons stay hidden */
.wFormContainer .actions[style*='display:none'] input[type='submit'],
.wFormContainer .actions[style*='display: none'] input[type='submit'],
.wFormContainer .actions[style*='visibility:hidden'] input[type='submit'],
.wFormContainer .actions[style*='visibility: hidden'] input[type='submit'] {
  display: none !important;
}

/* Allow direct inline hide applied to button itself */
.wFormContainer .actions input[type='submit'][style*='display:none'],
.wFormContainer .actions input[type='submit'][style*='display: none'] {
  display: none !important;
}

/* =========================================================
   6. ERROR SYSTEM
   Subtle, modern, soft-background UI
   ========================================================= */

/* --- 6A. Summary Block --- */

.m43-error-summary {
  margin-bottom: 20px;
  padding: 16px 16px;
  background: rgba(var(--m43-accent-rgb), 0.08);
  border-left: 3px solid var(--m43-accent);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  animation: m43FadeIn 0.18s ease-out;
  scroll-margin-top: 32px;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.m43-error-summary.m43-summary-resolving {
  opacity: 0;
  transform: translateY(-4px);
}

.m43-error-summary strong {
  font-weight: 600;
  font-size: 15px;
  display: block;
  margin-bottom: 8px;
}

.m43-error-summary ul {
  margin: 0;
  padding-left: 18px;
}

.m43-error-summary li {
  margin-bottom: 6px;
}

/* --- 6A.1 Summary Enhancements --- */

.m43-error-summary-heading {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
  color: var(--m43-accent);
  display: flex;
  align-items: center;
  gap: 8px;
}

.m43-error-summary-heading::before {
  content: '⚠';
  font-size: 14px;
}

.m43-error-summary a {
  color: var(--m43-accent);
  text-decoration: underline;
  font-weight: 500;
}

.m43-error-summary a:hover {
  text-decoration: none;
}

/* --- 6B. Inline Field Error --- */

.m43-inline-error {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--m43-accent);
  line-height: 1.45;
  letter-spacing: -0.01em;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.m43-inline-error::before {
  content: '⚠';
  font-size: 12px;
  line-height: 1.2;
  margin-top: 2px;
  opacity: 0.9;
}

/* --- 6C. Field Error State --- */

.wForm input.m43-field-error,
.wForm textarea.m43-field-error,
.wForm select.m43-field-error {
  border-color: var(--m43-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--m43-accent-rgb), 0.12) !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* --- 6D. Field Container Error Highlight --- */

.wForm .oneField.m43-field-container-error {
  background: rgba(var(--m43-accent-rgb), 0.04);
  border-left: 3px solid var(--m43-accent);
  border-radius: 12px;
  padding: 8px 12px 12px 12px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}

/* --- Subtle shake on first invalid submit --- */
@keyframes m43SubtleShake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-2px);
  }
  40% {
    transform: translateX(2px);
  }
  60% {
    transform: translateX(-1px);
  }
  80% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}

.wForm .oneField.m43-shake {
  animation: m43SubtleShake 0.25s ease;
}

/* =========================================================
   7. CHOICES ALIGNMENT (Checkbox / Radio)
   ========================================================= */

.wForm .choices .oneChoice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 8px;
}

/* =========================================================
   7A. CARD-STYLE CHECKBOX / RADIO SYSTEM
   ========================================================= */

.wForm .choices .oneChoice {
  margin-bottom: 12px !important;
}

.wForm input[type='checkbox'],
.wForm input[type='radio'] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.wForm .choices .oneChoice label.postField {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  /* Card border uses --m43-border token.
     Do not hardcode border colors here.
     Selected state must remain red-only for clarity. */
  border: 1px solid var(--m43-border) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}

/* --- Neutralize FormAssembly default faux checkbox rendering --- */
.wForm .choices .oneChoice label.postField .input-checkbox-faux::before,
.wForm .choices .oneChoice label.postField .input-checkbox-faux::after {
  content: none !important;
}

.wForm .choices .oneChoice label.postField .input-checkbox-faux {
  box-shadow: none !important;
  background-image: none !important;
}

/* Faux checkbox alignment */
.wForm .choices .oneChoice label.postField .input-checkbox-faux {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  border: 1px solid var(--m43-border) !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

/* --- Radio Faux (Correct Class) --- */

.wForm .choices .oneChoice label.postField .input-radio-faux {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1px solid var(--m43-border) !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
  position: relative !important;
  box-shadow: none !important;
  background-image: none !important;
}

.wForm
  .choices
  .oneChoice
  input[type='radio']:checked
  + label.postField
  .input-radio-faux {
  background: var(--m43-accent) !important;
  border-color: var(--m43-accent) !important;
}

.wForm
  .choices
  .oneChoice
  input[type='radio']:checked
  + label.postField
  .input-radio-faux::after {
  content: '' !important;
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.wForm .choices .oneChoice input:checked + label.postField {
  background: rgba(var(--m43-accent-rgb), 0.06) !important;
  border-color: var(--m43-accent) !important;
}

/* Checked check indicator */
.wForm
  .choices
  .oneChoice
  input:checked
  + label.postField
  .input-checkbox-faux {
  background: var(--m43-accent) !important;
  border-color: var(--m43-accent) !important;
}

.wForm
  .choices
  .oneChoice
  input:checked
  + label.postField
  .input-checkbox-faux::after {
  content: '' !important;
  position: absolute !important;
  left: 4px !important;
  top: 1px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

@media (min-width: 769px) {
  .wForm .choices .oneChoice label.postField:hover {
    border-color: rgba(23, 23, 23, 0.35) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px);
    transition:
      border-color 0.15s ease,
      box-shadow 0.15s ease,
      transform 0.12s ease;
  }
}

/* -------------------------------------------------
   HARD RESET – Kill FormAssembly pseudo controls
   ------------------------------------------------- */

.wForm .choices .oneChoice::before,
.wForm .choices .oneChoice::after,
.wForm .choices .oneChoice label.postField::before,
.wForm .choices .oneChoice label.postField::after {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* =========================================================
   8. GUEST REPEATER GRID FIX (UNIVERSAL)
   ========================================================= */

@media (min-width: 768px) {
  .wForm .removeable.section.inline.group {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: start;
  }

  .wForm .removeable.section.inline.group > .oneField:nth-of-type(1) {
    grid-column: 1;
  }

  .wForm .removeable.section.inline.group > .oneField:nth-of-type(2) {
    grid-column: 2;
  }
}

/* =========================================================
   9. MOBILE OPTIMIZATION
   ========================================================= */

@media (max-width: 768px) {
  /* =========================================================
     TABLE COLUMN LAYOUT OVERRIDE (FormAssembly default 2-col layout)
     Forces columnLayout tables to stack on mobile
     ========================================================= */

  .wForm table.columnLayout,
  .wForm table.columnLayout tbody,
  .wForm table.columnLayout tr {
    display: block !important;
    width: 100% !important;
  }

  .wForm table.columnLayout td {
    display: block !important;
    width: 100% !important;
    padding-right: 0 !important;
  }

  .wFormContainer {
    padding: 0 16px;
  }

  .wFormContainer .actions input[type='submit'],
  .wFormContainer .wfPagingButtons input {
    width: 100% !important;
  }

  .wForm .oneField {
    margin-bottom: 18px;
  }

  /* --- Force inline grouped fields to stack on mobile --- */
  .wForm .section.inline,
  .wForm .inline.group,
  .wForm .oneField.inline {
    display: block !important;
    width: 100% !important;
  }

  /* Force grouped inline fields to stack on mobile */
  .wForm .section.inline .oneField {
    display: block !important;
    width: 100% !important;
  }

  .wForm .section.inline .oneField,
  .wForm .inline.group .oneField {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* =========================================================
     UNIVERSAL STACKING SAFETY (Mobile)
     Ensures all inline / grouped / column layouts stack
     ========================================================= */

  /* Kill any grid or flex multi-column layouts (safer version) */
  .wForm .section:not(.offstate):not(.wf-acl-hidden),
  .wForm .section.group:not(.offstate):not(.wf-acl-hidden),
  .wForm .section.inline.group:not(.offstate):not(.wf-acl-hidden),
  .wForm .removeable.section.inline.group:not(.offstate):not(.wf-acl-hidden) {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  /* Preserve FormAssembly hidden state */
  .wForm .offstate,
  .wForm .wf-acl-hidden {
    display: none !important;
  }

  /* --- HARD MOBILE STACK OVERRIDE (FormAssembly floats + inline fields) --- */

  /* Force all inline oneField blocks to stack */
  .wForm .oneField.inline,
  .wForm .inline .oneField,
  .wForm .section.inline .oneField {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Kill any float-based column behavior from themes */
  .wForm .oneField {
    float: none !important;
  }

  /* Ensure parent containers cannot constrain width */
  .wForm .section,
  .wForm .section.group,
  .wForm .section.inline {
    width: 100% !important;
  }

  /* Force all oneField blocks to full width */
  .wForm .oneField {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* Ensure input wrappers cannot sit side-by-side */
  .wForm .oneField .inputWrapper {
    width: 100% !important;
  }

  /* Remove left borders that feel heavy on mobile */
  .wForm .oneField.m43-field-container-error {
    border-left-width: 2px;
  }

  /* Tighten error spacing on mobile */
  .m43-error-summary {
    margin-bottom: 18px;
    padding: 14px 14px;
  }

  .wForm .oneField.m43-field-container-error {
    padding: 8px 10px 10px 10px;
  }

  .m43-inline-error {
    font-size: 12.5px;
  }

  /* --- Improve mobile tap targets for choices --- */
  .wForm .choices .oneChoice label.postField {
    padding: 16px 18px !important;
  }
}

/* =========================================================
   11. ACCESSIBILITY – Reduced Motion Support
   Prevents animation for users who prefer reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .wForm .oneField.m43-shake {
    animation: none !important;
  }

  .m43-error-summary,
  .wForm input,
  .wForm textarea,
  .wForm select,
  .wForm .choices .oneChoice label.postField {
    transition: none !important;
  }
}