/* Form unit styles. Uses only the business theme variables from components.css. */
.ff { display: grid; gap: var(--space-module-gap, 20px); }
.ff-progress { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.ff-progress li { display: flex; align-items: center; gap: 7px; color: var(--color-muted-foreground); font-size: 12px; }
.ff-progress li span { font: 500 11px var(--font-mono); color: var(--color-muted-foreground); }
.ff-progress li.current { color: var(--color-foreground); font-weight: 600; }
.ff-progress li.current span { color: var(--color-primary); }
.ff-progress li.done span { color: var(--color-success); }
.ff-progress li.skipped { text-decoration: line-through; text-decoration-color: var(--color-border); }
.ff-step h4 { margin-bottom: 4px; }
.ff-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.ff-field { display: grid; gap: 6px; align-content: start; }
.ff-field:has(.ff-chips), .ff-field:has(textarea) { grid-column: 1 / -1; }
.ff-label { color: var(--color-foreground); font-size: 12px; font-weight: 600; }
.ff-required { color: var(--color-danger); }
.ff-help { margin: 0; color: var(--color-muted-foreground); font-size: 12px; line-height: 1.5; }
.ff-input { width: 100%; min-height: 38px; padding: 8px 10px; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-foreground); font: 13px var(--font-sans); }
.ff-input:focus { border-color: var(--color-primary); outline: none; }
textarea.ff-input { resize: vertical; }
.ff-currency { display: flex; align-items: center; gap: 8px; }
.ff-currency > span { color: var(--color-muted-foreground); }
.ff-currency .ff-input { max-width: 140px; }
.ff-currency small { color: var(--color-muted-foreground); font-size: 11px; }
.ff-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-chip { padding: 6px 11px; background: transparent; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-foreground); font-size: 12px; cursor: pointer; }
.ff-chip:hover { border-color: var(--color-primary); }
.ff-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-foreground); }
.ff-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; cursor: pointer; }
.ff-check input { margin-top: 3px; accent-color: var(--color-primary); }
.ff-consent { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-background); }
.ff-simulated { display: grid; gap: 14px; justify-items: start; }
.ff-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ff-checks li { display: flex; align-items: center; gap: 8px; }
.ff-check-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); }
.ff-check-dot[data-status="verified"] { background: var(--color-success); }
.ff-check-dot[data-status="requires_input"] { background: var(--color-warning); }
.ff-actions-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ff-summary { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 8px 18px; margin: 0; font-size: 13px; }
.ff-summary dt { color: var(--color-muted-foreground); }
.ff-summary dd { margin: 0; }
.ff-error { margin: 14px 0 0; color: var(--color-danger); font-size: 12px; }
.ff-nav { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.ff-spacer { flex: 1; }
.ff-skip { padding: 8px 6px; background: none; border: 0; color: var(--color-muted-foreground); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ff-skip:hover { color: var(--color-foreground); }
.t-button:disabled { opacity: .5; cursor: not-allowed; }
.ff-profile { display: grid; gap: 18px; }
.ff-profile-head { display: flex; align-items: center; gap: 14px; }
.ff-profile-identity { flex: 1; min-width: 0; }
.ff-profile-head h4 { margin: 3px 0 2px; font: 500 22px/1.2 var(--font-display); }
.ff-profile-avatar { position: relative; display: grid; place-items: center; flex: 0 0 68px; width: 68px; height: 68px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-muted); color: var(--color-primary); font-size: 14px; font-weight: 600; }
.ff-profile-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 26%; }
.ff-profile-bio { max-width: 620px; margin: 7px 0 0; color: var(--color-muted-foreground); font-size: 12px; line-height: 1.5; }
.ff-profile-metrics { margin-bottom: 0; }
.ff-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ff-vendors { display: grid; gap: 10px; margin-top: var(--space-module-gap, 20px); }
.ff-vendor-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-border); font-size: 13px; }
.ff-vendor-row strong { flex: 1; }
.ff-source { color: var(--color-muted-foreground); font: 11px var(--font-mono); }
@media (max-width: 700px) { .ff-fields { grid-template-columns: 1fr; } .ff-summary { grid-template-columns: 1fr; } .ff-profile-head { align-items: flex-start; flex-wrap: wrap; } }