@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================================
   TRENDSIC DYNAMICS - FACT FINDER - Signal design language
   Verbatim translation of docs/design/export/Fact Finder.dc.html into the real
   Durandal/Knockout factfinder module. Root class .ff-root carries every design
   token as a CSS var; markup uses var(--x, fallback). Namespaced .ff-* — inert
   on other pages. Reuses the EXISTING factfinder backend (FactFinderConfig /
   Contact FactFinder / FactFinder save). Config-gated fields get .disabledField.
   ============================================================================ */

.ff-root {
    /* shared */
    --brand-50:#EEF1FE; --brand-100:#DDE3FD; --brand-200:#C2CCFB; --brand-400:#7B8FF3; --brand-500:#5E76EE;
    --brand-600:#4C63E6; --brand-700:#3D4FC9; --brand-800:#3340A0; --brand-900:#28297A;
    --brand-grad:linear-gradient(135deg,#5E76EE,#8A63E8);
    --success:#15A06B; --danger:#E04646; --warning:#EE8A2E; --gold:#D99B12; --purple:#8B5CF6; --info:#4C6EF5;
    --r-md:12px; --r-lg:16px;
    --e1:0 1px 2px rgba(20,25,55,.06); --e2:0 8px 28px rgba(20,25,55,.14);
    --ease:cubic-bezier(.2,.8,.2,1);

    /* light (default) */
    --bg:#F5F6FB; --surface:#FFFFFF; --surface-2:#FAFBFE; --border:#E5E8F2; --border-strong:#D2D7E6;
    --text:#1A1D2E; --text-2:#4A4F63; --muted:#767C92; --faint:#A2A7BC;
    --info-bg:#ECEFFB; --info-fg:#3D4FC9; --ok-bg:#E2F6EE; --ok-fg:#0E6B47;
    --warn-bg:#FCEEDD; --warn-fg:#B5651A; --gold-bg:#FBF1D6; --gold-fg:#8A6A0C;
    --bad-bg:#FCE7E7; --bad-fg:#B3262B; --bad-line:#F4D4D4;
    --pur-bg:#EFE9FD; --pur-fg:#6D45C9; --neutral-bg:#F1F2F6; --neutral-fg:#6B7080;

    position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden;
    background:var(--bg); color:var(--text);
    font-family:'Plus Jakarta Sans',sans-serif;
}

.ff-root.dark {
    --bg:#0E1430; --surface:#161E3C; --surface-2:#1B2446; --border:#2A335C; --border-strong:#38436F;
    --text:#EEF1FB; --text-2:#B9C2E0; --muted:#8590B5; --faint:#6B7596;
    --info-bg:rgba(94,118,238,.16); --info-fg:#C2CCFB; --ok-bg:rgba(52,211,153,.15); --ok-fg:#5FE3B0;
    --warn-bg:rgba(238,138,46,.16); --warn-fg:#F0A961; --gold-bg:rgba(217,155,18,.16); --gold-fg:#F2C14E;
    --bad-bg:rgba(224,70,70,.16); --bad-fg:#F58A8A; --bad-line:rgba(224,70,70,.32);
    --pur-bg:rgba(139,92,246,.18); --pur-fg:#C3A8FB; --neutral-bg:rgba(255,255,255,.06); --neutral-fg:#8590B5;
}

.ff-root *{box-sizing:border-box}
.ff-root ::selection{background:#C2CCFB}
.ff-root .ff-scroll::-webkit-scrollbar{width:10px;height:10px}
.ff-root .ff-scroll::-webkit-scrollbar-thumb{background:var(--border-strong,#cfd4e4);border-radius:99px;border:2px solid transparent;background-clip:content-box}
.ff-root .ff-act{transition:filter .14s,background .14s,border-color .14s,box-shadow .14s;cursor:pointer}
.ff-root .ff-act:hover{filter:brightness(.98)}

@keyframes ff-slide{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes ff-spin{to{transform:rotate(360deg)}}

/* ---- sticky action bar ---- */
.ff-root .ff-bar{flex:none;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--e1);z-index:20}
.ff-root .ff-bar-inner{margin:0 auto;max-width:1240px;padding:14px 30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ff-root .ff-avatar{width:44px;height:44px;border-radius:12px;background:var(--brand-50);color:var(--brand-600);display:flex;align-items:center;justify-content:center;flex:none;font:800 15px 'Plus Jakarta Sans'}
.ff-root .ff-ident{min-width:0}
.ff-root .ff-ident-name{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--text);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-root .ff-ident-sub{font:500 11.5px 'IBM Plex Mono';color:var(--muted);margin-top:1px}
.ff-root .ff-progress{display:flex;align-items:center;gap:11px;flex:1;min-width:200px;max-width:340px}
.ff-root .ff-progress-track{flex:1;height:8px;border-radius:99px;background:var(--border);overflow:hidden}
.ff-root .ff-progress-fill{display:block;height:100%;background:var(--brand-grad);border-radius:99px;transition:width .3s}
.ff-root .ff-progress-num{font:700 12px 'IBM Plex Mono';color:var(--brand-700);white-space:nowrap}
.ff-root .ff-bar-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.ff-root .ff-dirty{font:600 11.5px 'Plus Jakarta Sans';color:var(--warn-fg);display:inline-flex;align-items:center;gap:6px}
.ff-root .ff-dirty-dot{width:7px;height:7px;border-radius:50%;background:var(--warning)}
.ff-root .ff-btn-ghost{height:42px;padding:0 20px;font:700 13px 'Plus Jakarta Sans';color:var(--text-2);background:var(--surface);border:1px solid var(--border-strong);border-radius:11px}
.ff-root .ff-btn-primary{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 24px;font:700 13.5px 'Plus Jakarta Sans';color:#fff;background:var(--brand-600);border:none;border-radius:11px;box-shadow:0 2px 8px rgba(76,99,230,.22)}
.ff-root .ff-btn-primary[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.ff-root .ff-spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:ff-spin .7s linear infinite;flex:none}

/* ---- body layout ---- */
.ff-root .ff-body{flex:1;min-height:0;display:flex;overflow:hidden}
.ff-root .ff-body-grid{margin:0 auto;max-width:1240px;width:100%;display:grid;grid-template-columns:238px minmax(0,1fr);gap:0}

/* ---- jump nav rail ---- */
.ff-root .ff-rail{height:100%;overflow:auto;padding:22px 14px 40px 30px;border-right:1px solid var(--border)}
.ff-root .ff-rail-title{font:700 10px 'Plus Jakarta Sans';letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 8px 10px}
.ff-root .ff-nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;background:transparent;transition:background .12s,color .12s}
.ff-root .ff-nav:hover{background:var(--surface-2)}
.ff-root .ff-nav.active{background:var(--brand-50)}
.ff-root .ff-nav-dot{width:9px;height:9px;border-radius:50%;flex:none}
.ff-root .ff-nav-dot.ok{background:var(--success)}
.ff-root .ff-nav-dot.warn{background:var(--warning)}
.ff-root .ff-nav.active .ff-nav-dot{box-shadow:0 0 0 3px var(--brand-100)}
.ff-root .ff-nav-label{flex:1;font-size:12.5px;font-weight:600;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-root .ff-nav.active .ff-nav-label{font-weight:700;color:var(--brand-700)}
.ff-root .ff-nav-count{font:600 10px 'IBM Plex Mono';color:var(--muted)}

/* ---- accordion main ---- */
.ff-root .ff-main{height:100%;overflow:auto;padding:22px 30px 80px 22px}
.ff-root .ff-form{display:flex;flex-direction:column;gap:12px}
.ff-root .ff-sec{background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--e1);overflow:hidden;scroll-margin-top:12px;transition:box-shadow .16s,border-color .16s}
.ff-root .ff-sec-head{display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;background:var(--surface)}
.ff-root .ff-sec-head.open{background:var(--surface-2)}
.ff-root .ff-sec-badge{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;font:800 15px 'IBM Plex Mono'}
.ff-root .ff-sec-badge.ok{background:var(--ok-bg);color:var(--ok-fg)}
.ff-root .ff-sec-badge.ok::after{content:'✓'}
.ff-root .ff-sec-badge.warn{background:var(--warn-bg);color:var(--warn-fg)}
.ff-root .ff-sec-badge.warn::after{content:'!'}
.ff-root .ff-sec-titles{flex:1;min-width:0}
.ff-root .ff-sec-title{font-size:14.5px;font-weight:800;color:var(--text)}
.ff-root .ff-sec-status{font-size:11.5px;font-weight:600;margin-top:2px}
.ff-root .ff-sec-status.ok{color:var(--ok-fg)}
.ff-root .ff-sec-status.warn{color:var(--warn-fg)}
.ff-root .ff-chev{color:var(--muted);font-size:12px;transition:transform .18s;transform:rotate(0deg)}
.ff-root .ff-chev.open{transform:rotate(180deg)}
.ff-root .ff-sec-body{padding:6px 18px 20px;border-top:1px solid var(--border)}
.ff-root .ff-subhead{font:700 10px 'Plus Jakarta Sans';letter-spacing:.06em;text-transform:uppercase;color:var(--brand-700);margin:18px 0 2px}

/* ---- field grid ---- */
.ff-root .ff-grid{display:grid;gap:14px 16px;margin-top:14px}
.ff-root .ff-grid.ff-cols-1{grid-template-columns:1fr}
.ff-root .ff-grid.ff-cols-3{grid-template-columns:repeat(3,1fr)}
.ff-root .ff-grid.ff-cols-4{grid-template-columns:repeat(4,1fr)}
.ff-root .ff-grid.ff-cols-6{grid-template-columns:repeat(6,1fr)}
.ff-root .ff-field.span-1{grid-column:span 1}
.ff-root .ff-field.span-2{grid-column:span 2}
.ff-root .ff-field.span-3{grid-column:span 3}
.ff-root .ff-label{font:600 10px 'Plus Jakarta Sans';letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block}

/* ---- inputs ---- */
.ff-root .ff-in{font:600 13.5px 'Plus Jakarta Sans';color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;padding:10px 12px;outline:none;width:100%}
.ff-root .ff-in:focus{border-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-50)}
.ff-root .ff-in[disabled]{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.ff-root .ff-in.ff-mono{font:600 13px 'IBM Plex Mono'}
.ff-root .ff-in.ff-r{text-align:right}
.ff-root select.ff-select{appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%23767C92' stroke-width='2'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.ff-root .ff-textarea{min-height:90px;resize:vertical;font:500 13.5px 'Plus Jakarta Sans';line-height:1.55}

/* money / affixed input group */
.ff-root .ff-money{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;overflow:hidden}
.ff-root .ff-money:focus-within{border-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-50)}
.ff-root .ff-money .ff-in{border:none;border-radius:0;box-shadow:none}
.ff-root .ff-money .ff-in:focus{box-shadow:none}
.ff-root .ff-affix{padding:0 11px;font:700 13px 'IBM Plex Mono';color:var(--muted);background:var(--surface-2);display:flex;align-items:center;border-right:1px solid var(--border);white-space:nowrap}
.ff-root .ff-affix.ff-affix-r{border-right:none;border-left:1px solid var(--border)}

/* radios */
.ff-root .ff-radio-row{display:flex;align-items:center;gap:18px;padding:9px 2px}
.ff-root .ff-radio{display:inline-flex;align-items:center;gap:7px;font:600 13px 'Plus Jakarta Sans';color:var(--text-2);cursor:pointer}
.ff-root .ff-radio input[type=radio]{accent-color:var(--brand-600);width:16px;height:16px;cursor:pointer}

/* ---- config-gated hidden field ---- */
.ff-root .disabledField{display:none}

/* ---- repeatable rows ---- */
.ff-root .ff-repeat{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.ff-root .ff-rep-item{border:1px solid var(--border);border-radius:11px;background:var(--surface-2);padding:14px 15px}
.ff-root .ff-rep-head{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.ff-root .ff-rep-tag{font:700 10.5px 'Plus Jakarta Sans';letter-spacing:.05em;text-transform:uppercase;color:var(--brand-700);background:var(--brand-50);border-radius:99px;padding:2px 9px}
.ff-root .ff-remove{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font:700 11px 'Plus Jakarta Sans';color:var(--bad-fg);background:var(--bad-bg);border-radius:8px;padding:5px 10px}
.ff-root .ff-rep-empty{padding:22px;text-align:center;border:1px dashed var(--border-strong);border-radius:11px;font-size:12.5px;color:var(--faint)}
.ff-root .ff-add{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font:700 12.5px 'Plus Jakarta Sans';color:var(--brand-700);background:var(--brand-50);border:1px solid var(--brand-100);border-radius:10px;padding:9px 15px}

/* ---- toast ---- */
.ff-root .ff-toast{position:absolute;bottom:22px;right:26px;z-index:2200;display:flex;align-items:flex-start;gap:11px;max-width:400px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--brand-500);border-radius:12px;box-shadow:var(--e2);padding:13px 15px;animation:ff-slide .28s var(--ease)}
.ff-root .ff-toast-icon{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex:none;font:800 13px 'IBM Plex Mono'}
.ff-root .ff-toast-icon.ok{background:var(--ok-bg);color:var(--ok-fg)}
.ff-root .ff-toast-icon.bad{background:var(--bad-bg);color:var(--bad-fg)}
.ff-root .ff-toast-icon.info{background:var(--brand-50);color:var(--brand-700)}
.ff-root .ff-toast-body{flex:1;min-width:0}
.ff-root .ff-toast-title{font-size:13px;font-weight:700;color:var(--text)}
.ff-root .ff-toast-msg{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.ff-root .ff-toast-close{cursor:pointer;color:var(--faint);font-size:16px;line-height:1;flex:none;padding:2px}

/* ---- responsive ---- */
@media (max-width:900px){
    .ff-root .ff-body-grid{grid-template-columns:1fr}
    .ff-root .ff-rail{display:none}
    .ff-root .ff-grid.ff-cols-6{grid-template-columns:repeat(2,1fr)}
    .ff-root .ff-grid.ff-cols-4{grid-template-columns:repeat(2,1fr)}
    .ff-root .ff-grid.ff-cols-3{grid-template-columns:1fr}
    .ff-root .ff-field.span-2,.ff-root .ff-field.span-3{grid-column:span 2}
    .ff-root .ff-bar-inner{padding:12px 16px}
    .ff-root .ff-main{padding:16px 14px 60px}
    .ff-root .ff-progress{order:5;max-width:100%;flex-basis:100%}
}