/* ==========================================================================
   Campus Forms — Structural Theme Traits
   Applied via classes on .cp-form-wrapper (frontend) and preview containers.
   ========================================================================== */

/* ---------- Expanded CSS Variable Fallbacks --------------------------------
   These extend the base set in forms.css. Themes override via inline style. */

.cp-form-wrapper.cp-form-flexible {
  --cp-form-font: var(--form-font, 'Inter', system-ui, sans-serif);
  --cp-form-heading-font: var(--form-heading-font, var(--cp-form-font));
  --cp-form-label-size: var(--form-label-size, 14px);
  --cp-form-spacing: var(--form-spacing, 20px);
  --cp-form-padding: var(--form-padding, 32px);
  --cp-btn-radius: var(--btn-radius, var(--cp-form-radius, 8px));
  --cp-btn-padding: var(--btn-padding, 10px 20px);
  font-family: var(--cp-form-font);
}

.cp-form-wrapper.cp-form-flexible .cp-form-title {
  font-family: var(--cp-form-heading-font);
}

.cp-form-wrapper.cp-form-flexible .cp-form-description {
  font-family: var(--cp-form-font);
}

.cp-form-wrapper.cp-form-flexible .cp-form {
  padding: var(--cp-form-padding);
}

.cp-form-wrapper.cp-form-flexible .cp-form-fields {
  gap: var(--cp-form-spacing);
}

.cp-form-wrapper.cp-form-flexible .cp-field-label {
  font-size: var(--cp-form-label-size);
  font-family: var(--cp-form-font);
}

.cp-form-wrapper.cp-form-flexible .cp-field-desc {
  font-family: var(--cp-form-font);
}

.cp-form-wrapper.cp-form-flexible .cp-input,
.cp-form-wrapper.cp-form-flexible .cp-select,
.cp-form-wrapper.cp-form-flexible .cp-textarea {
  font-family: var(--cp-form-font);
}

.cp-form-wrapper.cp-form-flexible .cp-btn-primary {
  border-radius: var(--cp-btn-radius);
  padding: var(--cp-btn-padding);
}

/* ==========================================================================
   FLEXIBLE FORMS — SEMANTIC COLOR + DEPTH TOKENS
   Scope locked to .cp-form-flexible to avoid legacy impact.
   ========================================================================== */

.cp-form-wrapper.cp-form-flexible {
  /* Surface hierarchy */
  --cp-surface-1: var(--cp-form-bg, #ffffff);
  --cp-surface-2: color-mix(in srgb, var(--cp-form-bg, #ffffff) 92%, var(--cp-form-text, #0f172a));
  --cp-surface-3: color-mix(in srgb, var(--cp-form-bg, #ffffff) 86%, var(--cp-form-border, #e2e8f0));
  --cp-surface-border: color-mix(in srgb, var(--cp-form-border, #e2e8f0) 90%, var(--cp-form-text, #0f172a));
  --cp-surface-border-strong: color-mix(in srgb, var(--cp-form-border, #e2e8f0) 74%, var(--cp-form-text, #0f172a));

  /* Text on surfaces */
  --cp-text-on-surface: var(--cp-form-text, #0f172a);
  --cp-text-on-surface-muted: var(--cp-form-muted, #64748b);
  --cp-text-on-accent: #ffffff;

  /* Semantic interactive states */
  --cp-state-hover: color-mix(in srgb, var(--cp-form-accent, #2563eb) 20%, var(--cp-surface-border-strong));
  --cp-state-active: color-mix(in srgb, var(--cp-form-accent, #2563eb) 34%, var(--cp-surface-border-strong));
  --cp-state-focus: color-mix(in srgb, var(--cp-form-accent, #2563eb) 72%, #ffffff);
  --cp-state-error: #dc2626;
  --cp-state-error-bg: color-mix(in srgb, #dc2626 9%, var(--cp-surface-1));
  --cp-state-success: #059669;
  --cp-state-success-bg: color-mix(in srgb, #059669 9%, var(--cp-surface-1));
  --cp-state-warn: #d97706;
  --cp-state-warn-bg: color-mix(in srgb, #d97706 10%, var(--cp-surface-1));
  --cp-state-info: #0891b2;
  --cp-state-info-bg: color-mix(in srgb, #0891b2 9%, var(--cp-surface-1));

  /* Depth system default (soft) */
  --cp-depth-shell: 0 10px 28px color-mix(in srgb, var(--cp-form-text, #0f172a) 13%, transparent);
  --cp-depth-card: 0 4px 16px color-mix(in srgb, var(--cp-form-text, #0f172a) 10%, transparent);
  --cp-depth-control: inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent);
  --cp-depth-cta: 0 6px 18px color-mix(in srgb, var(--cp-form-accent, #2563eb) 30%, transparent);
}

/* Explicit depth presets */
.cp-form-wrapper.cp-form-flexible.cp-depth-flat {
  --cp-depth-shell: none;
  --cp-depth-card: none;
  --cp-depth-control: none;
  --cp-depth-cta: none;
}

.cp-form-wrapper.cp-form-flexible.cp-depth-soft {
  --cp-depth-shell: 0 10px 28px color-mix(in srgb, var(--cp-form-text, #0f172a) 13%, transparent);
  --cp-depth-card: 0 4px 16px color-mix(in srgb, var(--cp-form-text, #0f172a) 10%, transparent);
  --cp-depth-control: inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent);
  --cp-depth-cta: 0 6px 18px color-mix(in srgb, var(--cp-form-accent, #2563eb) 30%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-depth-premium {
  --cp-depth-shell: 0 16px 40px color-mix(in srgb, var(--cp-form-text, #0f172a) 18%, transparent);
  --cp-depth-card: 0 10px 26px color-mix(in srgb, var(--cp-form-text, #0f172a) 16%, transparent);
  --cp-depth-control: inset 0 1px 0 color-mix(in srgb, #ffffff 62%, transparent), 0 1px 3px color-mix(in srgb, var(--cp-form-text, #0f172a) 8%, transparent);
  --cp-depth-cta: 0 12px 28px color-mix(in srgb, var(--cp-form-accent, #2563eb) 38%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-depth-dramatic {
  --cp-depth-shell: 0 20px 50px color-mix(in srgb, #000000 46%, transparent);
  --cp-depth-card: 0 12px 32px color-mix(in srgb, #000000 38%, transparent);
  --cp-depth-control: inset 0 1px 0 color-mix(in srgb, #ffffff 25%, transparent), 0 1px 2px color-mix(in srgb, #000000 30%, transparent);
  --cp-depth-cta: 0 14px 36px color-mix(in srgb, var(--cp-form-accent, #22d3ee) 46%, transparent);
}

/* Default preset mapping by existing theme wrappers */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-daily-standup,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-memo,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-blueprint {
  --cp-depth-shell: none;
  --cp-depth-card: none;
  --cp-depth-control: none;
  --cp-depth-cta: none;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-executive,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-boardroom,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-corner-office,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-client-portal,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-contract,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-reception-desk {
  --cp-depth-shell: 0 10px 28px color-mix(in srgb, var(--cp-form-text, #0f172a) 13%, transparent);
  --cp-depth-card: 0 4px 16px color-mix(in srgb, var(--cp-form-text, #0f172a) 10%, transparent);
  --cp-depth-control: inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent);
  --cp-depth-cta: 0 6px 18px color-mix(in srgb, var(--cp-form-accent, #2563eb) 30%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle {
  --cp-depth-shell: 0 16px 40px color-mix(in srgb, var(--cp-form-text, #0f172a) 18%, transparent);
  --cp-depth-card: 0 10px 26px color-mix(in srgb, var(--cp-form-text, #0f172a) 16%, transparent);
  --cp-depth-control: inset 0 1px 0 color-mix(in srgb, #ffffff 62%, transparent), 0 1px 3px color-mix(in srgb, var(--cp-form-text, #0f172a) 8%, transparent);
  --cp-depth-cta: 0 12px 28px color-mix(in srgb, var(--cp-form-accent, #2563eb) 38%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse {
  --cp-depth-shell: 0 20px 50px color-mix(in srgb, #000000 46%, transparent);
  --cp-depth-card: 0 12px 32px color-mix(in srgb, #000000 38%, transparent);
  --cp-depth-control: inset 0 1px 0 color-mix(in srgb, #ffffff 25%, transparent), 0 1px 2px color-mix(in srgb, #000000 30%, transparent);
  --cp-depth-cta: 0 14px 36px color-mix(in srgb, var(--cp-form-accent, #22d3ee) 46%, transparent);
}

/* ==========================================================================
   INPUT STYLES
   ========================================================================== */

/* -- Outline (default — no extra rules needed) -- */

/* -- Filled: tinted background, borderless until focus -- */
.cp-form-wrapper.cp-form-flexible.cp-trait-input-filled .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-trait-input-filled .cp-select,
.cp-form-wrapper.cp-form-flexible.cp-trait-input-filled .cp-textarea {
  border-color: transparent;
  background: var(--cp-surface-2, var(--cp-control-bg, #f1f5f9));
}
.cp-form-wrapper.cp-form-flexible.cp-trait-input-filled .cp-input:focus,
.cp-form-wrapper.cp-form-flexible.cp-trait-input-filled .cp-select:focus,
.cp-form-wrapper.cp-form-flexible.cp-trait-input-filled .cp-textarea:focus {
  border-color: var(--cp-state-focus, var(--cp-form-accent));
  background: var(--cp-surface-2, var(--cp-control-bg, #f1f5f9));
}

/* -- Underline: bottom border only -- */
.cp-form-wrapper.cp-form-flexible.cp-trait-input-underline .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-trait-input-underline .cp-select,
.cp-form-wrapper.cp-form-flexible.cp-trait-input-underline .cp-textarea {
  border: none;
  border-bottom: 2px solid var(--cp-control-border);
  border-radius: 0;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}
.cp-form-wrapper.cp-form-flexible.cp-trait-input-underline .cp-input:focus,
.cp-form-wrapper.cp-form-flexible.cp-trait-input-underline .cp-select:focus,
.cp-form-wrapper.cp-form-flexible.cp-trait-input-underline .cp-textarea:focus {
  border-bottom-color: var(--cp-state-focus, var(--cp-form-accent));
  box-shadow: none;
}

/* -- Pill: fully rounded inputs -- */
.cp-form-wrapper.cp-form-flexible.cp-trait-input-pill .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-trait-input-pill .cp-select,
.cp-form-wrapper.cp-form-flexible.cp-trait-input-pill .cp-textarea {
  border-radius: 999px;
  padding-left: 20px;
  padding-right: 20px;
}
.cp-form-wrapper.cp-form-flexible.cp-trait-input-pill .cp-textarea {
  border-radius: var(--cp-control-radius, 16px);
}

/* ==========================================================================
   LABEL POSITIONS
   ========================================================================== */

/* -- Top (default — no extra rules needed) -- */

/* -- Left: label and control side-by-side -- */
.cp-form-wrapper.cp-form-flexible.cp-trait-label-left .cp-field {
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 0 12px;
}
.cp-form-wrapper.cp-form-flexible.cp-trait-label-left .cp-field-label {
  padding-top: 10px;
  text-align: right;
  grid-column: 1;
  grid-row: 1;
}
.cp-form-wrapper.cp-form-flexible.cp-trait-label-left .cp-field > .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-trait-label-left .cp-field > .cp-select,
.cp-form-wrapper.cp-form-flexible.cp-trait-label-left .cp-field > .cp-textarea,
.cp-form-wrapper.cp-form-flexible.cp-trait-label-left .cp-field > .cp-field-control,
.cp-form-wrapper.cp-form-flexible.cp-trait-label-left .cp-field > div:not(.cp-field-label):not(.cp-field-desc) {
  grid-column: 2;
  grid-row: 1;
}
.cp-form-wrapper.cp-form-flexible.cp-trait-label-left .cp-field-desc {
  grid-column: 2;
  grid-row: 2;
}

/* -- Floating: labels inside inputs, animate up on focus/value -- */
.cp-form-wrapper.cp-form-flexible.cp-trait-label-floating .cp-field {
  position: relative;
}
.cp-form-wrapper.cp-form-flexible.cp-trait-label-floating .cp-field-label {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: var(--cp-form-label-size, 14px);
  color: var(--cp-text-on-surface-muted, var(--cp-form-muted));
  font-weight: 400;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 1;
  line-height: 1;
  background: transparent;
  padding: 0 4px;
  margin: 0;
}
.cp-form-wrapper.cp-form-flexible.cp-trait-label-floating .cp-field.is-focused .cp-field-label,
.cp-form-wrapper.cp-form-flexible.cp-trait-label-floating .cp-field.has-value .cp-field-label {
  top: -8px;
  left: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cp-state-focus, var(--cp-form-accent));
  background: var(--cp-surface-1, var(--cp-form-bg, #ffffff));
}
.cp-form-wrapper.cp-form-flexible.cp-trait-label-floating .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-trait-label-floating .cp-select,
.cp-form-wrapper.cp-form-flexible.cp-trait-label-floating .cp-textarea {
  padding-top: 14px;
}

/* ==========================================================================
   BUTTON STYLES
   ========================================================================== */

/* -- Solid (default — no extra rules needed) -- */

/* -- Outline: transparent bg, border accent -- */
.cp-form-wrapper.cp-form-flexible.cp-trait-btn-outline .cp-btn-primary {
  background: transparent;
  color: var(--cp-state-focus, var(--cp-form-accent));
  border: 2px solid var(--cp-state-focus, var(--cp-form-accent));
}
.cp-form-wrapper.cp-form-flexible.cp-trait-btn-outline .cp-btn-primary:hover {
  background: var(--cp-state-focus, var(--cp-form-accent));
  color: var(--cp-text-on-accent, #ffffff);
}

/* -- Gradient: accent-based gradient bg -- */
.cp-form-wrapper.cp-form-flexible.cp-trait-btn-gradient .cp-btn-primary {
  background: linear-gradient(135deg, var(--cp-state-focus, var(--cp-form-accent)), color-mix(in srgb, var(--cp-form-accent) 60%, #000));
  border: none;
  color: var(--cp-text-on-accent, #ffffff);
}
.cp-form-wrapper.cp-form-flexible.cp-trait-btn-gradient .cp-btn-primary:hover {
  filter: brightness(1.1);
}

/* -- Pill: fully rounded button -- */
.cp-form-wrapper.cp-form-flexible.cp-trait-btn-pill .cp-btn-primary {
  border-radius: 999px;
}

/* ==========================================================================
   FIELD DIVIDERS
   ========================================================================== */

/* -- None (default — no extra rules needed) -- */

/* -- Line: subtle bottom border between fields -- */
.cp-form-wrapper.cp-form-flexible.cp-trait-divider-line .cp-field {
  padding-bottom: var(--cp-form-spacing, 20px);
  border-bottom: 1px solid var(--cp-surface-border, var(--cp-form-border));
}
.cp-form-wrapper.cp-form-flexible.cp-trait-divider-line .cp-field:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* -- Card: each field in its own card container -- */
.cp-form-wrapper.cp-form-flexible.cp-trait-divider-card .cp-field {
  background: var(--cp-surface-2, color-mix(in srgb, var(--cp-form-bg) 90%, var(--cp-form-border)));
  border: 1px solid var(--cp-surface-border, var(--cp-form-border));
  border-radius: var(--cp-control-radius, 8px);
  padding: 16px;
  box-shadow: var(--cp-depth-card, none);
}

/* ==========================================================================
   FORM DENSITY
   ========================================================================== */

/* -- Comfortable (default — uses theme spacing) -- */

/* -- Compact: tighter padding and spacing -- */
.cp-form-wrapper.cp-form-flexible.cp-trait-density-compact .cp-form {
  padding: calc(var(--cp-form-padding, 32px) * 0.65);
}
.cp-form-wrapper.cp-form-flexible.cp-trait-density-compact .cp-form-fields {
  gap: calc(var(--cp-form-spacing, 20px) * 0.7);
}
.cp-form-wrapper.cp-form-flexible.cp-trait-density-compact .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-trait-density-compact .cp-select {
  height: 36px;
  font-size: 13px;
}
.cp-form-wrapper.cp-form-flexible.cp-trait-density-compact .cp-field-label {
  margin-bottom: 4px;
}

/* -- Spacious: generous padding and spacing -- */
.cp-form-wrapper.cp-form-flexible.cp-trait-density-spacious .cp-form {
  padding: calc(var(--cp-form-padding, 32px) * 1.25);
}
.cp-form-wrapper.cp-form-flexible.cp-trait-density-spacious .cp-form-fields {
  gap: calc(var(--cp-form-spacing, 20px) * 1.4);
}
.cp-form-wrapper.cp-form-flexible.cp-trait-density-spacious .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-trait-density-spacious .cp-select {
  height: 48px;
  font-size: 15px;
}
.cp-form-wrapper.cp-form-flexible.cp-trait-density-spacious .cp-textarea {
  min-height: 140px;
}
.cp-form-wrapper.cp-form-flexible.cp-trait-density-spacious .cp-field-label {
  margin-bottom: 8px;
}

/* ==========================================================================
   WOW LAYER — INTERACTION PACKS / TYPOGRAPHY MODES / ACCENT LAYER
   Flexible-only and optional class driven.
   ========================================================================== */

.cp-form-wrapper.cp-form-flexible {
  --cp-interaction-duration: 150ms;
  --cp-interaction-ease: ease;
  --cp-hover-lift: -1px;
  --cp-press-scale: 0.99;
  --cp-focus-ring-alpha: 0.18;
  --cp-state-focus-ring: color-mix(in srgb, var(--cp-form-accent, #2563eb) calc(var(--cp-focus-ring-alpha, 0.18) * 100%), transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-interaction-restrained {
  --cp-interaction-duration: 120ms;
  --cp-interaction-ease: ease-out;
  --cp-hover-lift: -1px;
  --cp-press-scale: 0.995;
  --cp-focus-ring-alpha: 0.16;
}

.cp-form-wrapper.cp-form-flexible.cp-interaction-balanced {
  --cp-interaction-duration: 150ms;
  --cp-interaction-ease: ease;
  --cp-hover-lift: -2px;
  --cp-press-scale: 0.99;
  --cp-focus-ring-alpha: 0.18;
}

.cp-form-wrapper.cp-form-flexible.cp-interaction-expressive {
  --cp-interaction-duration: 180ms;
  --cp-interaction-ease: cubic-bezier(.2,.8,.2,1);
  --cp-hover-lift: -3px;
  --cp-press-scale: 0.985;
  --cp-focus-ring-alpha: 0.22;
}

.cp-form-wrapper.cp-form-flexible.cp-interaction-strict {
  --cp-interaction-duration: 110ms;
  --cp-interaction-ease: linear;
  --cp-hover-lift: 0px;
  --cp-press-scale: 1;
  --cp-focus-ring-alpha: 0.24;
}

.cp-form-wrapper.cp-form-flexible .cp-input,
.cp-form-wrapper.cp-form-flexible .cp-select,
.cp-form-wrapper.cp-form-flexible .cp-textarea,
.cp-form-wrapper.cp-form-flexible .cp-btn-primary {
  transition:
    border-color var(--cp-interaction-duration) var(--cp-interaction-ease),
    box-shadow var(--cp-interaction-duration) var(--cp-interaction-ease),
    background-color var(--cp-interaction-duration) var(--cp-interaction-ease),
    color var(--cp-interaction-duration) var(--cp-interaction-ease),
    transform var(--cp-interaction-duration) var(--cp-interaction-ease);
}

.cp-form-wrapper.cp-form-flexible .cp-input:hover,
.cp-form-wrapper.cp-form-flexible .cp-select:hover,
.cp-form-wrapper.cp-form-flexible .cp-textarea:hover {
  border-color: var(--cp-state-hover, var(--cp-form-accent));
}

.cp-form-wrapper.cp-form-flexible .cp-input:focus,
.cp-form-wrapper.cp-form-flexible .cp-select:focus,
.cp-form-wrapper.cp-form-flexible .cp-textarea:focus {
  box-shadow: 0 0 0 3px var(--cp-state-focus-ring, color-mix(in srgb, var(--cp-form-accent, #2563eb) 20%, transparent));
}

.cp-form-wrapper.cp-form-flexible .cp-btn-primary:hover {
  transform: translateY(var(--cp-hover-lift));
}

.cp-form-wrapper.cp-form-flexible .cp-btn-primary:active {
  transform: scale(var(--cp-press-scale));
}

/* Typography modes */
.cp-form-wrapper.cp-form-flexible.cp-type-compact {
  --cp-form-label-size: 12px;
}

.cp-form-wrapper.cp-form-flexible.cp-type-compact .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-type-compact .cp-select {
  height: 36px;
  font-size: 13px;
  line-height: 1.35;
}

.cp-form-wrapper.cp-form-flexible.cp-type-compact .cp-textarea {
  font-size: 13px;
  line-height: 1.45;
  min-height: 88px;
}

.cp-form-wrapper.cp-form-flexible.cp-type-compact .cp-field-desc {
  font-size: 11px;
  line-height: 1.35;
}

.cp-form-wrapper.cp-form-flexible.cp-type-standard {
  --cp-form-label-size: 13px;
}

.cp-form-wrapper.cp-form-flexible.cp-type-standard .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-type-standard .cp-select {
  height: 40px;
  font-size: 14px;
  line-height: 1.4;
}

.cp-form-wrapper.cp-form-flexible.cp-type-standard .cp-textarea {
  font-size: 14px;
  line-height: 1.55;
  min-height: 104px;
}

.cp-form-wrapper.cp-form-flexible.cp-type-standard .cp-field-desc {
  font-size: 12px;
  line-height: 1.45;
}

.cp-form-wrapper.cp-form-flexible.cp-type-comfortable {
  --cp-form-label-size: 15px;
}

.cp-form-wrapper.cp-form-flexible.cp-type-comfortable .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-type-comfortable .cp-select {
  height: 46px;
  font-size: 15px;
  line-height: 1.45;
}

.cp-form-wrapper.cp-form-flexible.cp-type-comfortable .cp-textarea {
  font-size: 15px;
  line-height: 1.6;
  min-height: 130px;
}

.cp-form-wrapper.cp-form-flexible.cp-type-comfortable .cp-field-desc {
  font-size: 13px;
  line-height: 1.55;
}

/* Optional subtle accent layer */
.cp-form-wrapper.cp-form-flexible.cp-accent-subtle .cp-form-header {
  position: relative;
  padding-bottom: 10px;
}

.cp-form-wrapper.cp-form-flexible.cp-accent-subtle .cp-form-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(180px, 36%);
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cp-form-accent, #2563eb) 45%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-accent-subtle .cp-trait-divider-line .cp-field {
  border-bottom-color: color-mix(in srgb, var(--cp-form-accent, #2563eb) 20%, var(--cp-surface-border, var(--cp-form-border)));
}

.cp-form-wrapper.cp-form-flexible.cp-accent-subtle .cp-field-heading::before,
.cp-form-wrapper.cp-form-flexible.cp-accent-subtle .cp-heading::before {
  color: color-mix(in srgb, var(--cp-form-accent, #2563eb) 78%, var(--cp-text-on-surface, var(--cp-form-text)));
}

/* ==========================================================================
   CREATIVE THEME POLISH
   Scoped to flexible creative themes only.
   ========================================================================== */

/* Startup Garage — optimistic, rounded, kinetic */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage {
  --cp-interaction-duration: 170ms;
  --cp-interaction-ease: cubic-bezier(.2,.9,.2,1);
  --cp-hover-lift: -2px;
  --cp-press-scale: 0.985;
  --cp-focus-ring-alpha: 0.24;
  --cp-depth-cta: 0 14px 34px color-mix(in srgb, var(--cp-form-accent, #a855f7) 44%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-form {
  background:
    radial-gradient(130% 90% at 0% 0%, color-mix(in srgb, var(--cp-form-accent, #a855f7) 13%, transparent) 0%, transparent 60%),
    radial-gradient(120% 80% at 100% 100%, color-mix(in srgb, #22d3ee 12%, transparent) 0%, transparent 62%),
    var(--cp-surface-1, var(--cp-form-bg, #ffffff));
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-btn-primary {
  letter-spacing: 0.01em;
  font-weight: 700;
}

/* Creative Brief — vivid studio card with stronger CTA narrative */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief {
  --cp-interaction-duration: 180ms;
  --cp-interaction-ease: cubic-bezier(.2,.8,.2,1);
  --cp-hover-lift: -3px;
  --cp-press-scale: 0.984;
  --cp-focus-ring-alpha: 0.23;
  --cp-depth-cta: 0 16px 34px color-mix(in srgb, var(--cp-form-accent, #7c3aed) 46%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-form {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--cp-form-accent, #7c3aed) 9%, #ffffff) 0%, #ffffff 34%),
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, #ec4899 11%, transparent) 0%, transparent 58%),
    var(--cp-surface-1, var(--cp-form-bg, #ffffff));
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-form-title {
  letter-spacing: -0.01em;
  font-weight: 800;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-btn-primary {
  background: linear-gradient(135deg, var(--cp-form-accent, #7c3aed), color-mix(in srgb, #ec4899 72%, var(--cp-form-accent, #7c3aed)));
  border: 1px solid color-mix(in srgb, var(--cp-form-accent, #7c3aed) 54%, #ffffff);
  text-shadow: 0 1px 0 color-mix(in srgb, #000000 24%, transparent);
}

/* The Pitch — stage-light depth while preserving dark readability */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch {
  --cp-interaction-duration: 165ms;
  --cp-interaction-ease: cubic-bezier(.22,.76,.2,1);
  --cp-hover-lift: -2px;
  --cp-press-scale: 0.988;
  --cp-focus-ring-alpha: 0.28;
  --cp-state-focus: color-mix(in srgb, var(--cp-form-accent, #f97316) 76%, #ffffff);
  --cp-depth-cta: 0 16px 36px color-mix(in srgb, var(--cp-form-accent, #f97316) 48%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-form {
  background:
    radial-gradient(110% 100% at 50% 0%, color-mix(in srgb, var(--cp-form-accent, #f97316) 11%, transparent) 0%, transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, #ffffff 2%, var(--cp-surface-1, #18181b)) 0%, var(--cp-surface-1, #18181b) 100%);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-form-title {
  letter-spacing: -0.015em;
  font-weight: 800;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-btn-primary {
  background: linear-gradient(135deg, var(--cp-form-accent, #f97316), color-mix(in srgb, var(--cp-form-accent, #f97316) 64%, #b91c1c));
  border: 1px solid color-mix(in srgb, var(--cp-form-accent, #f97316) 62%, #ffffff);
  color: #ffffff;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-input:focus,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-select:focus,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-textarea:focus {
  background: color-mix(in srgb, #ffffff 5%, var(--cp-surface-1, #18181b));
}

/* Team Huddle — warm momentum and crisp completion cues */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle {
  --cp-interaction-duration: 160ms;
  --cp-interaction-ease: cubic-bezier(.2,.82,.25,1);
  --cp-hover-lift: -2px;
  --cp-press-scale: 0.987;
  --cp-focus-ring-alpha: 0.24;
  --cp-depth-cta: 0 14px 32px color-mix(in srgb, var(--cp-form-accent, #ea580c) 44%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-form {
  background:
    linear-gradient(160deg, color-mix(in srgb, #f59e0b 10%, var(--cp-form-bg, #fff7ed)) 0%, var(--cp-form-bg, #fff7ed) 34%),
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--cp-form-accent, #ea580c) 12%, transparent) 0%, transparent 60%);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-field {
  border-color: color-mix(in srgb, var(--cp-form-accent, #ea580c) 16%, var(--cp-surface-border, var(--cp-form-border)));
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-btn-primary {
  letter-spacing: 0.01em;
  font-weight: 700;
}

/* Shared creative CTA + state polish */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-btn-primary,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-btn-primary,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-btn-primary,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-btn-primary {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--cp-interaction-duration) var(--cp-interaction-ease),
    box-shadow var(--cp-interaction-duration) var(--cp-interaction-ease),
    filter var(--cp-interaction-duration) var(--cp-interaction-ease),
    opacity var(--cp-interaction-duration) var(--cp-interaction-ease);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-btn-primary::after,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-btn-primary::after,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-btn-primary::after,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-btn-primary::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, color-mix(in srgb, #ffffff 34%, transparent) 0%, transparent 62%);
  opacity: 0.35;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-btn-primary:hover,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-btn-primary:hover,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-btn-primary:hover,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-btn-primary:hover {
  filter: saturate(1.05) brightness(1.04);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-btn-primary:focus-visible,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-btn-primary:focus-visible,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-btn-primary:focus-visible,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-btn-primary:focus-visible {
  outline-offset: 3px;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-btn-primary:disabled,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-btn-primary:disabled,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-btn-primary:disabled,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-btn-primary:disabled {
  filter: grayscale(0.18) saturate(0.75);
  transform: none;
  box-shadow: none;
  opacity: 0.68;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-btn-primary:disabled::after,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-btn-primary:disabled::after,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-btn-primary:disabled::after,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-btn-primary:disabled::after {
  opacity: 0.08;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-input.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-select.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-textarea.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-input.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-select.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-textarea.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-input.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-select.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-textarea.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-input.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-select.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-textarea.is-invalid {
  border-color: var(--cp-state-error, #dc2626);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cp-state-error, #dc2626) 20%, transparent),
    var(--cp-depth-control, none);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-input.is-valid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-select.is-valid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-textarea.is-valid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-input.is-valid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-select.is-valid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-textarea.is-valid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-input.is-valid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-select.is-valid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-textarea.is-valid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-input.is-valid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-select.is-valid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-textarea.is-valid {
  border-color: var(--cp-state-success, #059669);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cp-state-success, #059669) 18%, transparent),
    var(--cp-depth-control, none);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-field-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-file-error {
  color: #fecaca;
  background: color-mix(in srgb, #dc2626 20%, var(--cp-surface-1, #18181b));
  border-color: color-mix(in srgb, #fecaca 32%, var(--cp-surface-border, #3f3f46));
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-pitch .cp-submit-feedback.is-success {
  color: #bbf7d0;
  background: color-mix(in srgb, #059669 16%, var(--cp-surface-1, #18181b));
  border-color: color-mix(in srgb, #bbf7d0 32%, var(--cp-surface-border, #3f3f46));
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-startup-garage .cp-submit-feedback.is-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-creative-brief .cp-submit-feedback.is-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-team-huddle .cp-submit-feedback.is-success {
  border-color: color-mix(in srgb, var(--cp-state-success, #059669) 36%, var(--cp-surface-border, var(--cp-form-border)));
}

/* Keep strict motion pack crisp but still thematic on creative themes */
.cp-form-wrapper.cp-form-flexible.cp-interaction-strict.cp-form-theme-startup-garage,
.cp-form-wrapper.cp-form-flexible.cp-interaction-strict.cp-form-theme-creative-brief,
.cp-form-wrapper.cp-form-flexible.cp-interaction-strict.cp-form-theme-the-pitch,
.cp-form-wrapper.cp-form-flexible.cp-interaction-strict.cp-form-theme-team-huddle {
  --cp-hover-lift: 0px;
  --cp-press-scale: 1;
}

/* ==========================================================================
   MINIMAL THEME REFINEMENT LAYER
   Scoped to flexible minimal themes only.
   ========================================================================== */

/* Daily Standup — disciplined monochrome with clearer hierarchy */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-daily-standup {
  --cp-surface-2: color-mix(in srgb, #ffffff 97%, #0f172a);
  --cp-surface-border: color-mix(in srgb, var(--cp-form-border, #e2e8f0) 82%, #0f172a);
  --cp-surface-border-strong: color-mix(in srgb, var(--cp-form-border, #e2e8f0) 58%, #0f172a);
  --cp-state-hover: color-mix(in srgb, var(--cp-form-accent, #0f172a) 26%, var(--cp-surface-border-strong));
  --cp-state-active: color-mix(in srgb, var(--cp-form-accent, #0f172a) 42%, var(--cp-surface-border-strong));
  --cp-focus-ring-alpha: 0.14;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-daily-standup .cp-form-title {
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-daily-standup .cp-field-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-daily-standup .cp-input::placeholder,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-daily-standup .cp-textarea::placeholder {
  color: color-mix(in srgb, var(--cp-text-on-surface-muted, #64748b) 92%, #ffffff);
}

/* The Memo — editorial paper texture and strict legibility */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-memo {
  --cp-surface-2: color-mix(in srgb, var(--cp-form-bg, #fffdf4) 95%, #3f3f46);
  --cp-surface-border: color-mix(in srgb, var(--cp-form-border, #e7ddc7) 82%, #713f12);
  --cp-surface-border-strong: color-mix(in srgb, var(--cp-form-border, #e7ddc7) 58%, #713f12);
  --cp-depth-shell: 0 10px 24px color-mix(in srgb, #713f12 13%, transparent);
  --cp-depth-control: none;
  --cp-state-focus-ring: color-mix(in srgb, var(--cp-form-accent, #a16207) 16%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-memo .cp-form {
  background-image:
    linear-gradient(to bottom, color-mix(in srgb, #d6d3c8 48%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in srgb, #d6d3c8 20%, transparent) 1px, transparent 1px);
  background-size: 100% 32px, 32px 100%;
  background-position: 0 0, 0 0;
  border-width: 1px;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-memo .cp-form-title,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-memo .cp-field-label {
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

/* Reception Desk — airy premium calm and approachable */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-reception-desk {
  --cp-surface-2: color-mix(in srgb, #f8fafc 90%, #ffffff);
  --cp-surface-3: color-mix(in srgb, #f8fafc 82%, #ffffff);
  --cp-surface-border: color-mix(in srgb, var(--cp-form-border, #e2e8f0) 88%, #0f172a);
  --cp-surface-border-strong: color-mix(in srgb, var(--cp-form-border, #e2e8f0) 66%, #0f172a);
  --cp-state-focus-ring: color-mix(in srgb, var(--cp-form-accent, #0ea5e9) 18%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-reception-desk .cp-form {
  background: linear-gradient(180deg, color-mix(in srgb, #ffffff 88%, #f0f9ff) 0%, #ffffff 58%);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-reception-desk .cp-form-header {
  margin-bottom: calc(var(--cp-form-spacing, 26px) * 0.95);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-reception-desk .cp-form-title {
  font-size: clamp(1.5rem, 2.3vw, 1.85rem);
  letter-spacing: -0.02em;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-reception-desk .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-reception-desk .cp-select,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-reception-desk .cp-textarea {
  background: color-mix(in srgb, var(--cp-control-bg, #f8fafc) 84%, #ffffff);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-reception-desk .cp-btn-primary {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cp-form-accent, #0ea5e9) 86%, #ffffff) 0%,
    var(--cp-form-accent, #0ea5e9) 100%
  );
}

/* The Blueprint — precision grid with clearer field states */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-blueprint {
  --cp-surface-2: color-mix(in srgb, var(--cp-form-bg, #edf7ff) 93%, #075985);
  --cp-surface-border: color-mix(in srgb, var(--cp-form-border, #bfdbfe) 84%, #075985);
  --cp-surface-border-strong: color-mix(in srgb, var(--cp-form-border, #bfdbfe) 60%, #075985);
  --cp-state-hover: color-mix(in srgb, var(--cp-form-accent, #0284c7) 30%, var(--cp-surface-border-strong));
  --cp-state-active: color-mix(in srgb, var(--cp-form-accent, #0284c7) 48%, var(--cp-surface-border-strong));
  --cp-state-focus-ring: color-mix(in srgb, var(--cp-form-accent, #0284c7) 20%, transparent);
  --cp-depth-shell: 0 6px 16px color-mix(in srgb, #0c4a6e 12%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-blueprint .cp-form {
  background-image:
    linear-gradient(to right, color-mix(in srgb, #93c5fd 18%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, #93c5fd 18%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-blueprint.cp-trait-label-left .cp-field {
  grid-template-columns: 156px 1fr;
  gap: 0 14px;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-blueprint .cp-field-label {
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-weight: 600;
}

/* ==========================================================================
   CORPORATE THEME POLISH
   Scoped to flexible corporate themes only.
   ========================================================================== */

/* The Executive — polished, restrained premium */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-executive {
  --cp-interaction-duration: 130ms;
  --cp-interaction-ease: ease-out;
  --cp-hover-lift: -1px;
  --cp-press-scale: 0.994;
  --cp-focus-ring-alpha: 0.18;
  --cp-state-error: #b91c1c;
  --cp-state-error-bg: color-mix(in srgb, #b91c1c 8%, var(--cp-surface-1, #ffffff));
  --cp-state-success: #047857;
  --cp-state-success-bg: color-mix(in srgb, #047857 9%, var(--cp-surface-1, #ffffff));
  --cp-depth-shell: 0 18px 44px color-mix(in srgb, #0f172a 14%, transparent);
  --cp-depth-control: inset 0 1px 0 color-mix(in srgb, #ffffff 78%, transparent), 0 2px 4px color-mix(in srgb, #0f172a 7%, transparent);
  --cp-depth-cta: 0 11px 26px color-mix(in srgb, var(--cp-form-accent, #1e40af) 33%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-executive .cp-form {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--cp-form-accent, #1e40af) 3.5%, #ffffff) 0%, #ffffff 56%),
    var(--cp-surface-1, #ffffff);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-executive .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-executive .cp-select,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-executive .cp-textarea {
  border-color: color-mix(in srgb, var(--cp-form-accent, #1e40af) 14%, var(--cp-control-border, #c4d0e0));
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-executive .cp-btn-primary {
  background: linear-gradient(135deg, var(--cp-form-accent, #1e40af), color-mix(in srgb, var(--cp-form-accent, #1e40af) 64%, #0b1738));
  border: 1px solid color-mix(in srgb, var(--cp-form-accent, #1e40af) 70%, #0b1738);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-executive .cp-field-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-executive .cp-file-error {
  border-color: color-mix(in srgb, var(--cp-state-error, #b91c1c) 34%, var(--cp-surface-border, #dbe4f0));
}

/* Boardroom — dark authority, dramatic contrast */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-boardroom {
  --cp-interaction-duration: 115ms;
  --cp-interaction-ease: linear;
  --cp-hover-lift: 0px;
  --cp-press-scale: 1;
  --cp-focus-ring-alpha: 0.24;
  --cp-state-error: #f87171;
  --cp-state-error-bg: color-mix(in srgb, #ef4444 16%, var(--cp-surface-1, #0b1220));
  --cp-state-success: #34d399;
  --cp-state-success-bg: color-mix(in srgb, #059669 20%, var(--cp-surface-1, #0b1220));
  --cp-depth-shell: 0 24px 54px color-mix(in srgb, #000000 56%, transparent);
  --cp-depth-control: inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent), 0 2px 6px color-mix(in srgb, #000000 30%, transparent);
  --cp-depth-cta: 0 13px 30px color-mix(in srgb, var(--cp-form-accent, #3cc8ff) 42%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-boardroom .cp-form {
  background:
    radial-gradient(140% 105% at 0% 0%, color-mix(in srgb, var(--cp-form-accent, #3cc8ff) 13%, transparent) 0%, transparent 52%),
    linear-gradient(165deg, color-mix(in srgb, #020617 88%, #1e293b), #0b1220 64%);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-boardroom .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-boardroom .cp-select,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-boardroom .cp-textarea {
  background: color-mix(in srgb, var(--cp-control-bg, #162338) 90%, #040a14);
  border-color: color-mix(in srgb, var(--cp-form-accent, #3cc8ff) 24%, var(--cp-control-border, #314866));
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-boardroom .cp-btn-primary {
  background: linear-gradient(135deg, var(--cp-form-accent, #3cc8ff), color-mix(in srgb, var(--cp-form-accent, #3cc8ff) 60%, #0b3b73));
  border: 1px solid color-mix(in srgb, var(--cp-form-accent, #3cc8ff) 66%, #93c5fd);
  color: #031528;
  font-weight: 700;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-boardroom .cp-field-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-boardroom .cp-file-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-boardroom .cp-submit-feedback.is-error {
  color: #fecaca;
  border-color: color-mix(in srgb, #fca5a5 36%, var(--cp-surface-border, #1f3048));
  background: color-mix(in srgb, #b91c1c 20%, var(--cp-surface-1, #0b1220));
}

/* Corner Office — luxe, warm, editorial */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-corner-office {
  --cp-interaction-duration: 165ms;
  --cp-interaction-ease: cubic-bezier(.22,.8,.2,1);
  --cp-hover-lift: -2px;
  --cp-press-scale: 0.987;
  --cp-focus-ring-alpha: 0.2;
  --cp-state-error: #c2410c;
  --cp-state-error-bg: color-mix(in srgb, #c2410c 10%, var(--cp-surface-1, #fcfaf4));
  --cp-state-success: #0f766e;
  --cp-state-success-bg: color-mix(in srgb, #0f766e 10%, var(--cp-surface-1, #fcfaf4));
  --cp-depth-shell: 0 22px 48px color-mix(in srgb, #2e2012 18%, transparent);
  --cp-depth-control: inset 0 1px 0 color-mix(in srgb, #ffffff 82%, transparent), 0 3px 8px color-mix(in srgb, #2e2012 8%, transparent);
  --cp-depth-cta: 0 14px 30px color-mix(in srgb, var(--cp-form-accent, #a16207) 38%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-corner-office .cp-form {
  background:
    radial-gradient(120% 95% at 100% 0%, color-mix(in srgb, #f59e0b 10%, transparent) 0%, transparent 55%),
    linear-gradient(162deg, color-mix(in srgb, #ffffff 94%, #fef3c7) 0%, var(--cp-surface-1, #fcfaf4) 58%);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-corner-office .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-corner-office .cp-select,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-corner-office .cp-textarea {
  border-color: color-mix(in srgb, var(--cp-form-accent, #a16207) 24%, var(--cp-control-border, #d8c8af));
  background: color-mix(in srgb, #ffffff 94%, #fef3c7);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-corner-office .cp-btn-primary {
  background: linear-gradient(135deg, var(--cp-form-accent, #a16207), color-mix(in srgb, var(--cp-form-accent, #a16207) 62%, #713f12));
  border: 1px solid color-mix(in srgb, var(--cp-form-accent, #a16207) 70%, #713f12);
  text-shadow: 0 1px 0 color-mix(in srgb, #000000 30%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-corner-office .cp-field-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-corner-office .cp-file-error {
  border-color: color-mix(in srgb, var(--cp-state-error, #c2410c) 36%, var(--cp-surface-border, #e8dece));
}

/* Client Portal — trustworthy SaaS, bright and guided */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-client-portal {
  --cp-interaction-duration: 145ms;
  --cp-interaction-ease: ease;
  --cp-hover-lift: -1px;
  --cp-press-scale: 0.99;
  --cp-focus-ring-alpha: 0.2;
  --cp-state-error: #c62828;
  --cp-state-error-bg: color-mix(in srgb, #c62828 8%, var(--cp-surface-1, #f5f9ff));
  --cp-state-success: #0a7a57;
  --cp-state-success-bg: color-mix(in srgb, #0a7a57 9%, var(--cp-surface-1, #f5f9ff));
  --cp-depth-shell: 0 16px 38px color-mix(in srgb, #153259 15%, transparent);
  --cp-depth-control: inset 0 1px 0 color-mix(in srgb, #ffffff 84%, transparent), 0 2px 5px color-mix(in srgb, #153259 7%, transparent);
  --cp-depth-cta: 0 12px 28px color-mix(in srgb, var(--cp-form-accent, #2563eb) 35%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-client-portal .cp-form {
  background:
    radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, #60a5fa 12%, transparent) 0%, transparent 54%),
    linear-gradient(160deg, color-mix(in srgb, #ffffff 92%, #dbeafe), var(--cp-surface-1, #f5f9ff) 62%);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-client-portal .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-client-portal .cp-select,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-client-portal .cp-textarea {
  border-color: color-mix(in srgb, var(--cp-form-accent, #2563eb) 20%, var(--cp-control-border, #cddcf1));
  background: color-mix(in srgb, #ffffff 96%, #e0edff);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-client-portal .cp-btn-primary {
  background: linear-gradient(135deg, var(--cp-form-accent, #2563eb), color-mix(in srgb, var(--cp-form-accent, #2563eb) 62%, #0f3a9f));
  border: 1px solid color-mix(in srgb, var(--cp-form-accent, #2563eb) 68%, #0f3a9f);
  font-weight: 700;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-client-portal .cp-field-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-client-portal .cp-file-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-client-portal .cp-submit-feedback.is-error {
  border-color: color-mix(in srgb, var(--cp-state-error, #c62828) 30%, var(--cp-surface-border, #d8e4f4));
}

/* The Contract — legal precision, almost print-like */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-contract {
  --cp-interaction-duration: 100ms;
  --cp-interaction-ease: linear;
  --cp-hover-lift: 0px;
  --cp-press-scale: 1;
  --cp-focus-ring-alpha: 0.14;
  --cp-state-error: #9f1239;
  --cp-state-error-bg: color-mix(in srgb, #9f1239 7%, var(--cp-surface-1, #fdfcf9));
  --cp-state-success: #166534;
  --cp-state-success-bg: color-mix(in srgb, #166534 8%, var(--cp-surface-1, #fdfcf9));
  --cp-depth-shell: 0 1px 0 color-mix(in srgb, #1c1917 18%, transparent);
  --cp-depth-control: none;
  --cp-depth-cta: none;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-contract .cp-form {
  background: var(--cp-surface-1, #fdfcf9);
  border-width: 1px;
  border-style: solid;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-contract .cp-input,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-contract .cp-select,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-contract .cp-textarea {
  border-color: var(--cp-control-border, #8f877d);
  box-shadow: none;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-contract .cp-btn-primary {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 13px;
  border-width: 1px;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-contract .cp-input.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-contract .cp-select.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-contract .cp-textarea.is-invalid {
  border-color: var(--cp-state-error, #9f1239);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cp-state-error, #9f1239) 14%, transparent);
}

/* Preserve strict profile if user selects strict interaction pack */
.cp-form-wrapper.cp-form-flexible.cp-interaction-strict.cp-form-theme-the-executive,
.cp-form-wrapper.cp-form-flexible.cp-interaction-strict.cp-form-theme-boardroom,
.cp-form-wrapper.cp-form-flexible.cp-interaction-strict.cp-form-theme-corner-office,
.cp-form-wrapper.cp-form-flexible.cp-interaction-strict.cp-form-theme-client-portal,
.cp-form-wrapper.cp-form-flexible.cp-interaction-strict.cp-form-theme-the-contract {
  --cp-hover-lift: 0px;
  --cp-press-scale: 1;
}

/* ==========================================================================
   PEOPLE + DARK THEME REFINEMENT LAYER
   Scoped to flexible remaining themes only.
   ========================================================================== */

.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse {
  --cp-theme-error-bg: var(--cp-state-error-bg, #fee2e2);
  --cp-theme-error-border: color-mix(in srgb, var(--cp-state-error, #dc2626) 38%, var(--cp-surface-border, #e2e8f0));
  --cp-theme-error-text: color-mix(in srgb, var(--cp-state-error, #dc2626) 84%, #111827);
  --cp-theme-invalid-bg: color-mix(in srgb, var(--cp-state-error, #dc2626) 8%, var(--cp-control-bg, #ffffff));
  --cp-theme-invalid-ring: color-mix(in srgb, var(--cp-state-error, #dc2626) 22%, transparent);
  --cp-theme-feedback-loading-bg: color-mix(in srgb, var(--cp-state-info, #0891b2) 11%, var(--cp-surface-1, #ffffff));
  --cp-theme-feedback-loading-border: color-mix(in srgb, var(--cp-state-info, #0891b2) 30%, var(--cp-surface-border, #e2e8f0));
  --cp-theme-feedback-loading-text: color-mix(in srgb, var(--cp-state-info, #0891b2) 86%, var(--cp-text-on-surface, #0f172a));
  --cp-theme-feedback-success-bg: color-mix(in srgb, var(--cp-state-success, #059669) 11%, var(--cp-surface-1, #ffffff));
  --cp-theme-feedback-success-border: color-mix(in srgb, var(--cp-state-success, #059669) 35%, var(--cp-surface-border, #e2e8f0));
  --cp-theme-feedback-success-text: color-mix(in srgb, var(--cp-state-success, #059669) 84%, var(--cp-text-on-surface, #0f172a));
  --cp-theme-feedback-error-bg: color-mix(in srgb, var(--cp-state-error, #dc2626) 11%, var(--cp-surface-1, #ffffff));
  --cp-theme-feedback-error-border: color-mix(in srgb, var(--cp-state-error, #dc2626) 35%, var(--cp-surface-border, #e2e8f0));
  --cp-theme-feedback-error-text: color-mix(in srgb, var(--cp-state-error, #dc2626) 84%, var(--cp-text-on-surface, #0f172a));
  --cp-theme-confirmation-bg: color-mix(in srgb, var(--cp-state-success, #059669) 10%, var(--cp-surface-1, #ffffff));
  --cp-theme-confirmation-border: color-mix(in srgb, var(--cp-state-success, #059669) 34%, var(--cp-surface-border, #e2e8f0));
  --cp-theme-confirmation-title: color-mix(in srgb, var(--cp-state-success, #059669) 88%, var(--cp-text-on-surface, #0f172a));
  --cp-theme-confirmation-text: color-mix(in srgb, var(--cp-state-success, #059669) 72%, var(--cp-text-on-surface, #0f172a));
  --cp-theme-confirmation-btn-bg: var(--cp-form-accent, #2563eb);
  --cp-theme-confirmation-btn-text: var(--cp-text-on-accent, #ffffff);
  --cp-theme-confirmation-btn-border: color-mix(in srgb, var(--cp-form-accent, #2563eb) 56%, var(--cp-surface-border-strong, #334155));
  --cp-theme-confirmation-focus: var(--cp-state-focus, var(--cp-form-accent, #2563eb));
}

/* HR OnBoard */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard {
  --cp-state-hover: color-mix(in srgb, #22c55e 26%, var(--cp-surface-border-strong));
  --cp-state-focus: #16a34a;
  --cp-state-focus-ring: color-mix(in srgb, #22c55e 23%, transparent);
  --cp-theme-confirmation-bg: linear-gradient(145deg, #ecfdf3 0%, #dcfce7 100%);
  --cp-theme-confirmation-title: #166534;
  --cp-theme-confirmation-text: #166534;
  --cp-theme-confirmation-btn-bg: #16a34a;
  --cp-theme-confirmation-btn-border: #15803d;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-form-header {
  border-bottom: 1px solid color-mix(in srgb, #22c55e 24%, var(--cp-surface-border));
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-trait-divider-card .cp-field {
  background: linear-gradient(155deg, #ffffff 0%, #f0fdf4 100%);
}

/* Town Hall */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall {
  --cp-state-hover: color-mix(in srgb, #f59e0b 28%, var(--cp-surface-border-strong));
  --cp-state-focus: #d97706;
  --cp-state-focus-ring: color-mix(in srgb, #f59e0b 23%, transparent);
  --cp-theme-confirmation-bg: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
  --cp-theme-confirmation-title: #92400e;
  --cp-theme-confirmation-text: #92400e;
  --cp-theme-confirmation-btn-bg: #d97706;
  --cp-theme-confirmation-btn-border: #b45309;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-trait-density-spacious .cp-field-label {
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Help Desk */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk {
  --cp-state-hover: color-mix(in srgb, #a855f7 30%, var(--cp-surface-border-strong));
  --cp-state-focus: #9333ea;
  --cp-state-focus-ring: color-mix(in srgb, #a855f7 22%, transparent);
  --cp-theme-confirmation-bg: linear-gradient(145deg, #faf5ff 0%, #f3e8ff 100%);
  --cp-theme-confirmation-title: #6b21a8;
  --cp-theme-confirmation-text: #6b21a8;
  --cp-theme-confirmation-btn-bg: #9333ea;
  --cp-theme-confirmation-btn-border: #7e22ce;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-trait-label-floating .cp-field.is-focused .cp-field-label,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-trait-label-floating .cp-field.has-value .cp-field-label {
  background: color-mix(in srgb, #faf5ff 84%, transparent);
}

/* The Survey */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey {
  --cp-state-hover: color-mix(in srgb, #6366f1 26%, var(--cp-surface-border-strong));
  --cp-state-focus: #4f46e5;
  --cp-state-focus-ring: color-mix(in srgb, #6366f1 21%, transparent);
  --cp-theme-confirmation-bg: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%);
  --cp-theme-confirmation-title: #3730a3;
  --cp-theme-confirmation-text: #3730a3;
  --cp-theme-confirmation-btn-bg: #4f46e5;
  --cp-theme-confirmation-btn-border: #4338ca;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-trait-divider-card .cp-field {
  border-left: 3px solid color-mix(in srgb, #6366f1 46%, transparent);
}

/* Dark theme discipline */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse {
  --cp-state-focus-ring: color-mix(in srgb, var(--cp-form-accent, #22d3ee) 18%, transparent);
  --cp-theme-error-bg: color-mix(in srgb, var(--cp-state-error, #ef4444) 14%, #0b1220);
  --cp-theme-error-border: color-mix(in srgb, var(--cp-state-error, #ef4444) 52%, var(--cp-surface-border, #334155));
  --cp-theme-error-text: #fee2e2;
  --cp-theme-invalid-bg: color-mix(in srgb, var(--cp-state-error, #ef4444) 12%, var(--cp-control-bg, #111827));
  --cp-theme-invalid-ring: color-mix(in srgb, var(--cp-state-error, #ef4444) 26%, transparent);
  --cp-theme-feedback-loading-text: #dbeafe;
  --cp-theme-feedback-success-text: #dcfce7;
  --cp-theme-feedback-error-text: #fee2e2;
  --cp-theme-confirmation-focus: color-mix(in srgb, var(--cp-form-accent, #22d3ee) 84%, #ffffff);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance {
  --cp-state-focus: #fde047;
  --cp-state-hover: color-mix(in srgb, #fde047 24%, var(--cp-surface-border-strong));
  --cp-state-focus-ring: color-mix(in srgb, #fde047 20%, transparent);
  --cp-theme-confirmation-bg: linear-gradient(145deg, #121212 0%, #1b1b1b 100%);
  --cp-theme-confirmation-border: #fde047;
  --cp-theme-confirmation-title: #fef08a;
  --cp-theme-confirmation-text: #fef9c3;
  --cp-theme-confirmation-btn-bg: #fde047;
  --cp-theme-confirmation-btn-text: #111827;
  --cp-theme-confirmation-btn-border: #facc15;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-form {
  border: 1px solid color-mix(in srgb, #fef3c7 34%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift {
  --cp-state-focus: #22d3ee;
  --cp-state-hover: color-mix(in srgb, #67e8f9 30%, var(--cp-surface-border-strong));
  --cp-theme-confirmation-bg: linear-gradient(145deg, #082f49 0%, #0f172a 100%);
  --cp-theme-confirmation-border: #0891b2;
  --cp-theme-confirmation-title: #a5f3fc;
  --cp-theme-confirmation-text: #cffafe;
  --cp-theme-confirmation-btn-bg: #06b6d4;
  --cp-theme-confirmation-btn-border: #0891b2;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-btn-primary {
  box-shadow: 0 8px 20px color-mix(in srgb, #22d3ee 28%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-btn-primary:hover {
  box-shadow: 0 10px 24px color-mix(in srgb, #22d3ee 32%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse {
  --cp-state-focus: #4ade80;
  --cp-state-hover: color-mix(in srgb, #86efac 28%, var(--cp-surface-border-strong));
  --cp-theme-confirmation-bg: linear-gradient(145deg, #052e16 0%, #14532d 100%);
  --cp-theme-confirmation-border: #22c55e;
  --cp-theme-confirmation-title: #bbf7d0;
  --cp-theme-confirmation-text: #dcfce7;
  --cp-theme-confirmation-btn-bg: #22c55e;
  --cp-theme-confirmation-btn-border: #16a34a;
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-trait-divider-card .cp-field {
  background: linear-gradient(160deg, #14532d 0%, #0f3f25 100%);
}

/* Validation and confirmation surfaces */
.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-field-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-field-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-field-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-field-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-field-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-field-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-field-error {
  background: var(--cp-theme-error-bg);
  border-color: var(--cp-theme-error-border);
  color: var(--cp-theme-error-text);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-input.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-select.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-textarea.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-input.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-select.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-textarea.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-input.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-select.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-textarea.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-input.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-select.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-textarea.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-input.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-select.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-textarea.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-input.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-select.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-textarea.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-input.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-select.is-invalid,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-textarea.is-invalid {
  background: var(--cp-theme-invalid-bg);
  box-shadow: 0 0 0 3px var(--cp-theme-invalid-ring);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-submit-feedback.is-loading,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-submit-feedback.is-loading,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-submit-feedback.is-loading,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-submit-feedback.is-loading,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-submit-feedback.is-loading,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-submit-feedback.is-loading,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-submit-feedback.is-loading {
  background: var(--cp-theme-feedback-loading-bg);
  border-color: var(--cp-theme-feedback-loading-border);
  color: var(--cp-theme-feedback-loading-text);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-submit-feedback.is-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-submit-feedback.is-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-submit-feedback.is-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-submit-feedback.is-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-submit-feedback.is-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-submit-feedback.is-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-submit-feedback.is-success {
  background: var(--cp-theme-feedback-success-bg);
  border-color: var(--cp-theme-feedback-success-border);
  color: var(--cp-theme-feedback-success-text);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-submit-feedback.is-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-submit-feedback.is-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-submit-feedback.is-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-submit-feedback.is-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-submit-feedback.is-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-submit-feedback.is-error,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-submit-feedback.is-error {
  background: var(--cp-theme-feedback-error-bg);
  border-color: var(--cp-theme-feedback-error-border);
  color: var(--cp-theme-feedback-error-text);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-form-confirmation.cp-conf-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-form-confirmation.cp-conf-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-form-confirmation.cp-conf-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-form-confirmation.cp-conf-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-form-confirmation.cp-conf-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-form-confirmation.cp-conf-success,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-form-confirmation.cp-conf-success {
  background: var(--cp-theme-confirmation-bg);
  border-color: var(--cp-theme-confirmation-border);
  box-shadow: var(--cp-depth-card, none);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-form-confirmation .cp-conf-title,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-form-confirmation .cp-conf-message,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-form-confirmation .cp-conf-title,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-form-confirmation .cp-conf-message,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-form-confirmation .cp-conf-title,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-form-confirmation .cp-conf-message,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-form-confirmation .cp-conf-title,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-form-confirmation .cp-conf-message,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-form-confirmation .cp-conf-title,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-form-confirmation .cp-conf-message,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-form-confirmation .cp-conf-title,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-form-confirmation .cp-conf-message,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-form-confirmation .cp-conf-title,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-form-confirmation .cp-conf-message {
  color: var(--cp-theme-confirmation-title);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-form-confirmation p,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-form-confirmation p,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-form-confirmation p,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-form-confirmation p,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-form-confirmation p,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-form-confirmation p,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-form-confirmation p,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-form-confirmation .cp-conf-reference,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-form-confirmation .cp-conf-reference,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-form-confirmation .cp-conf-reference,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-form-confirmation .cp-conf-reference,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-form-confirmation .cp-conf-reference,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-form-confirmation .cp-conf-reference,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-form-confirmation .cp-conf-reference,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-form-confirmation .cp-conf-redirect-timer,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-form-confirmation .cp-conf-redirect-timer,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-form-confirmation .cp-conf-redirect-timer,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-form-confirmation .cp-conf-redirect-timer,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-form-confirmation .cp-conf-redirect-timer,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-form-confirmation .cp-conf-redirect-timer,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-form-confirmation .cp-conf-redirect-timer {
  color: var(--cp-theme-confirmation-text);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-form-confirmation .cp-conf-download-btn,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-form-confirmation .cp-conf-unlock-document .cp-conf-unlock-btn,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-form-confirmation .cp-conf-download-btn,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-form-confirmation .cp-conf-unlock-document .cp-conf-unlock-btn,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-form-confirmation .cp-conf-download-btn,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-form-confirmation .cp-conf-unlock-document .cp-conf-unlock-btn,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-form-confirmation .cp-conf-download-btn,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-form-confirmation .cp-conf-unlock-document .cp-conf-unlock-btn,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-form-confirmation .cp-conf-download-btn,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-form-confirmation .cp-conf-unlock-document .cp-conf-unlock-btn,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-form-confirmation .cp-conf-download-btn,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-form-confirmation .cp-conf-unlock-document .cp-conf-unlock-btn,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-form-confirmation .cp-conf-download-btn,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-form-confirmation .cp-conf-unlock-document .cp-conf-unlock-btn {
  background: var(--cp-theme-confirmation-btn-bg);
  color: var(--cp-theme-confirmation-btn-text);
  border: 1px solid var(--cp-theme-confirmation-btn-border);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--cp-theme-confirmation-btn-bg) 34%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-form-confirmation .cp-conf-print,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-form-confirmation .cp-conf-print,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-form-confirmation .cp-conf-print,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-form-confirmation .cp-conf-print,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-form-confirmation .cp-conf-print,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-form-confirmation .cp-conf-print,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-form-confirmation .cp-conf-print {
  border-color: var(--cp-theme-confirmation-btn-border);
  color: var(--cp-theme-confirmation-title);
  background: color-mix(in srgb, var(--cp-theme-confirmation-btn-bg) 16%, transparent);
}

.cp-form-wrapper.cp-form-flexible.cp-form-theme-hr-onboard .cp-form-confirmation:focus,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-town-hall .cp-form-confirmation:focus,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-help-desk .cp-form-confirmation:focus,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-survey .cp-form-confirmation:focus,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-compliance .cp-form-confirmation:focus,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-midnight-shift .cp-form-confirmation:focus,
.cp-form-wrapper.cp-form-flexible.cp-form-theme-the-greenhouse .cp-form-confirmation:focus {
  outline-color: var(--cp-theme-confirmation-focus);
}

@media (prefers-reduced-motion: reduce) {
  .cp-form-wrapper.cp-form-flexible .cp-input,
  .cp-form-wrapper.cp-form-flexible .cp-select,
  .cp-form-wrapper.cp-form-flexible .cp-textarea,
  .cp-form-wrapper.cp-form-flexible .cp-btn-primary {
    transition: none !important;
    transform: none !important;
  }
}

/* Custom confirmation animations */
@keyframes ipConfFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ipConfSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ipConfScaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes ipConfPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes ipConfCheckPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ipConfFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ipConfShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes ipConfGlow { 0%,100% { box-shadow: 0 0 8px rgba(99,102,241,0.3); } 50% { box-shadow: 0 0 20px rgba(99,102,241,0.5); } }
@keyframes ipConfBorderPulse { 0%,100% { border-color: rgba(99,102,241,0.3); } 50% { border-color: rgba(99,102,241,0.7); } }
@keyframes ipConfStaggerIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.cp-conf-custom { animation: ipConfFadeIn 0.4s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .cp-conf-custom,
  .cp-conf-custom * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Progress indicator theme overrides → elements/layout/progress_indicator/element.theme.css */