/* ====================================================================
   Brandhunt · Email finder trace console
   Admin/owner only, so it deliberately does NOT wear the Scope design —
   it is an instrument panel. Everything is namespaced `eft-` and nothing
   here is used by any customer-facing surface.
   ==================================================================== */

.eft-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(120, 110, 98, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: eft-in 180ms ease-out;
}
[data-theme="dark"] .eft-overlay { background: rgba(6, 8, 12, 0.72); }
@keyframes eft-in { from { opacity: 0 } to { opacity: 1 } }

.eft {
    /* Its own palette rather than the Scope tokens — this is an instrument
       panel, not a product surface — but it still follows the app's
       [data-theme] toggle, because a console that stays dark when everything
       around it goes light is the thing people report as a bug.
       Light is the base; the dark block below only re-points the tokens. */
    --eft-bg:      #f7f5f2;
    --eft-panel:   #ffffff;
    --eft-panel-2: #f1eeea;
    --eft-line:    #e3ded7;
    --eft-ink:     #232120;
    --eft-ink-2:   #5c5751;
    --eft-ink-3:   #8b847c;
    /* Semantic hues are darkened for light mode: the dark-theme mint and amber
       fail contrast against white at 9px type. */
    --eft-pass:    #0f7a52;
    --eft-fail:    #a35c00;
    --eft-info:    #1d4ed8;
    --eft-skip:    #8b847c;
    --eft-accent:  #cf5f10;
    --eft-pass-bg: rgba(15, 122, 82, 0.10);
    --eft-fail-bg: rgba(163, 92, 0, 0.10);
    --eft-info-bg: rgba(29, 78, 216, 0.10);
    --eft-skip-bg: rgba(139, 132, 124, 0.12);
    --eft-cost-line: rgba(207, 95, 16, 0.35);
    --eft-shadow:  0 40px 80px -24px rgba(90, 78, 64, 0.35);

    width: min(1400px, 94vw);
    height: min(1100px, 92vh);
    display: flex; flex-direction: column;
    background: var(--eft-bg);
    color: var(--eft-ink);
    border: 1px solid var(--eft-line);
    border-radius: 16px;
    box-shadow: var(--eft-shadow);
    overflow: hidden;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.eft *, .eft *::before, .eft *::after { box-sizing: border-box; }

[data-theme="dark"] .eft {
    --eft-bg:      #0f1216;
    --eft-panel:   #151a21;
    --eft-panel-2: #1b222b;
    --eft-line:    #232c37;
    --eft-ink:     #e8edf3;
    --eft-ink-2:   #93a1b2;
    --eft-ink-3:   #64748b;
    --eft-pass:    #34d399;
    --eft-fail:    #fbbf24;
    --eft-info:    #60a5fa;
    --eft-skip:    #64748b;
    --eft-accent:  #f97316;
    --eft-pass-bg: rgba(52, 211, 153, 0.12);
    --eft-fail-bg: rgba(251, 191, 36, 0.12);
    --eft-info-bg: rgba(96, 165, 250, 0.12);
    --eft-skip-bg: rgba(100, 116, 139, 0.14);
    --eft-cost-line: rgba(249, 115, 22, 0.30);
    --eft-shadow:  0 40px 80px -24px rgba(0, 0, 0, 0.8);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.eft-head {
    position: relative;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    padding: 20px 56px 18px 24px;
    background: linear-gradient(180deg, var(--eft-panel), var(--eft-bg));
    border-bottom: 1px solid var(--eft-line);
}
.eft-head__eyebrow {
    font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--eft-accent);
}
.eft-head__name { margin: 6px 0 2px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.eft-head__title { font-size: 11.5px; color: var(--eft-ink-2); }

.eft-head__stats { display: flex; gap: 10px; flex-wrap: wrap; }
.eft-stat {
    min-width: 108px;
    padding: 9px 12px;
    background: var(--eft-panel-2);
    border: 1px solid var(--eft-line);
    border-radius: 9px;
}
.eft-stat__v { font-size: 14px; font-weight: 600; word-break: break-all; }
.eft-stat__k {
    margin-top: 3px;
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--eft-ink-3);
}
.eft-stat.is-verified  { border-color: var(--eft-pass); }
.eft-stat.is-verified  .eft-stat__k { color: var(--eft-pass); }
.eft-stat.is-probable  { border-color: var(--eft-fail); }
.eft-stat.is-probable  .eft-stat__k { color: var(--eft-fail); }
.eft-stat.is-not-found .eft-stat__k { color: var(--eft-ink-3); }

.eft-close {
    position: absolute; top: 16px; right: 16px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; line-height: 1;
    color: var(--eft-ink-2);
    background: var(--eft-panel-2);
    border: 1px solid var(--eft-line);
    border-radius: 8px;
    cursor: pointer;
}
.eft-close:hover { color: var(--eft-ink); border-color: var(--eft-ink-3); }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.eft-tabs {
    display: flex; gap: 2px;
    padding: 0 24px;
    background: var(--eft-panel);
    border-bottom: 1px solid var(--eft-line);
}
.eft-tab {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 14px;
    font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace;
    color: var(--eft-ink-3);
    background: none; border: 0; border-bottom: 2px solid transparent;
    cursor: pointer;
}
.eft-tab span {
    padding: 2px 6px; border-radius: 20px;
    font-size: 9px;
    background: var(--eft-panel-2); color: var(--eft-ink-2);
}
.eft-tab:hover { color: var(--eft-ink-2); }
.eft-tab.is-on { color: var(--eft-ink); border-bottom-color: var(--eft-accent); }

/* ── Body ─────────────────────────────────────────────────────────────── */
.eft-body { flex: 1; overflow-y: auto; padding: 20px 24px 28px; }
.eft-body::-webkit-scrollbar { width: 10px; }
.eft-body::-webkit-scrollbar-thumb { background: var(--eft-line); border-radius: 6px; }

/* ── Probability rail ─────────────────────────────────────────────────── */
.eft-rail {
    display: flex; align-items: flex-start; gap: 0;
    margin-bottom: 22px; padding: 16px 18px;
    background: var(--eft-panel);
    border: 1px solid var(--eft-line);
    border-radius: 12px;
    overflow-x: auto;
}
.eft-rail__point { min-width: 150px; flex: 1; }
.eft-rail__pct { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.eft-rail__meter {
    margin: 7px 0 7px;
    height: 4px; border-radius: 3px;
    background: var(--eft-panel-2);
    overflow: hidden;
}
.eft-rail__meter span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--eft-accent), var(--eft-pass));
}
.eft-rail__step { font-size: 9.5px; color: var(--eft-ink-3); }
.eft-rail__link {
    align-self: center;
    flex: 0 0 26px; height: 1px; margin: 0 10px;
    background: var(--eft-line);
}

/* ── Step cards ───────────────────────────────────────────────────────── */
.eft-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.eft-step {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    background: var(--eft-panel);
    border: 1px solid var(--eft-line);
    border-left-width: 3px;
    border-radius: 10px;
    overflow: hidden;
}
.eft-step.is-pass { border-left-color: var(--eft-pass); }
.eft-step.is-fail { border-left-color: var(--eft-fail); }
.eft-step.is-info { border-left-color: var(--eft-info); }
.eft-step.is-skip { border-left-color: var(--eft-skip); }

.eft-step__rail {
    display: flex; align-items: flex-start; justify-content: center;
    padding: 13px 0;
    background: var(--eft-panel-2);
}
.eft-step__n { font-size: 11px; font-weight: 600; color: var(--eft-ink-3); }
.eft-step__body { padding: 12px 14px 13px; min-width: 0; }
.eft-step__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.eft-step__name { font-size: 12.5px; font-weight: 600; }
.eft-step__verdict {
    padding: 2px 7px; border-radius: 20px;
    font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.eft-step.is-pass .eft-step__verdict { color: var(--eft-pass); background: var(--eft-pass-bg); }
.eft-step.is-fail .eft-step__verdict { color: var(--eft-fail); background: var(--eft-fail-bg); }
.eft-step.is-info .eft-step__verdict { color: var(--eft-info); background: var(--eft-info-bg); }
.eft-step.is-skip .eft-step__verdict { color: var(--eft-skip); background: var(--eft-skip-bg); }
.eft-step__pct { margin-left: auto; font-size: 15px; font-weight: 700; }

.eft-step__detail {
    margin: 6px 0 0;
    font-size: 11.5px; line-height: 1.55;
    color: var(--eft-ink-2);
    overflow-wrap: break-word;
}
.eft-step__meta { display: flex; gap: 6px; margin-top: 9px; }
.eft-chip {
    padding: 2px 7px; border-radius: 5px;
    font-size: 9px;
    color: var(--eft-ink-3);
    background: var(--eft-panel-2);
    border: 1px solid var(--eft-line);
}
.eft-chip.is-cost { color: var(--eft-accent); border-color: var(--eft-cost-line); }

/* ── The arithmetic ───────────────────────────────────────────────────── */
.eft-math {
    margin-top: 11px;
    padding: 11px 13px;
    background: var(--eft-bg);
    border: 1px solid var(--eft-line);
    border-radius: 8px;
}
.eft-math__row {
    display: grid;
    grid-template-columns: 20px 66px minmax(0, 1fr);
    gap: 10px; align-items: baseline;
    padding: 3px 0;
    font-size: 11px;
}
.eft-math__op  { color: var(--eft-ink-3); text-align: right; }
.eft-math__val { font-weight: 600; text-align: right; }
.eft-math__label { color: var(--eft-ink-2); font-size: 10.5px; overflow-wrap: break-word; }
.eft-math__row.is-total {
    margin-top: 5px; padding-top: 8px;
    border-top: 1px solid var(--eft-line);
}
.eft-math__row.is-total .eft-math__val { color: var(--eft-accent); font-size: 13px; }

/* ── Org chart variant (`oft-`) ───────────────────────────────────────────
   The org console answers with a roster, not a probability rail, so it is a
   narrower panel: verdict + tier strip up top, compact person grid below. */
.eft.is-org { width: min(880px, 94vw); height: min(860px, 92vh); }

.oft-verdict {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px; padding: 13px 16px;
    background: var(--eft-panel);
    border: 1px solid var(--eft-pass);
    border-left-width: 3px;
    border-radius: 11px;
}
.oft-verdict.is-none { border-color: var(--eft-line); }
.oft-verdict__title { font-size: 13.5px; font-weight: 700; }
.oft-verdict__detail { font-size: 11px; color: var(--eft-ink-2); }

.oft-run { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.oft-run__btn {
    padding: 6px 12px;
    font: 600 10.5px/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.04em;
    color: var(--eft-accent);
    background: none;
    border: 1px solid var(--eft-cost-line);
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
}
.oft-run__btn:hover:not(:disabled) { background: var(--eft-accent); color: var(--eft-bg); border-color: var(--eft-accent); }
.oft-run__btn:disabled { opacity: 0.6; cursor: default; }
.oft-run__error { font-size: 10.5px; color: var(--eft-fail); }

.oft-flow-intro { margin: 0 0 8px; font-size: 10.5px; color: var(--eft-ink-3); }

.oft-help { margin-bottom: 14px; }
.oft-help summary {
    font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--eft-ink-3);
    cursor: pointer;
    user-select: none;
}
.oft-help summary:hover { color: var(--eft-ink-2); }
.oft-help[open] summary { color: var(--eft-accent); }
.oft-help p {
    margin: 8px 0 0;
    padding: 11px 14px;
    font-size: 11px; line-height: 1.65;
    color: var(--eft-ink-2);
    background: var(--eft-panel);
    border: 1px solid var(--eft-line);
    border-radius: 9px;
}
.oft-help strong { color: var(--eft-ink); }

.oft-flow { display: flex; gap: 6px; margin-bottom: 18px; overflow-x: auto; }
.oft-stage {
    flex: 1; min-width: 118px;
    padding: 9px 11px;
    background: var(--eft-panel);
    border: 1px solid var(--eft-line);
    border-radius: 9px;
}
.oft-stage__k {
    font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--eft-ink-3);
}
.oft-stage__label { margin-top: 4px; font-size: 10px; line-height: 1.35; color: var(--eft-ink-2); }
.oft-stage.is-won  { border-color: var(--eft-pass); background: var(--eft-pass-bg); }
.oft-stage.is-won  .oft-stage__k { color: var(--eft-pass); }
.oft-stage.is-pass .oft-stage__k { color: var(--eft-info); }
.oft-stage.is-fail .oft-stage__k { color: var(--eft-fail); }
.oft-stage.is-idle { opacity: 0.55; }

.oft-people {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px;
}
.oft-person {
    padding: 11px 13px; min-width: 0;
    background: var(--eft-panel);
    border: 1px solid var(--eft-line);
    border-left: 3px solid var(--eft-info);
    border-radius: 10px;
}
.oft-person__head { display: flex; align-items: baseline; gap: 8px; }
.oft-person__n { font-size: 10px; font-weight: 600; color: var(--eft-ink-3); }
.oft-person__name { font-size: 12.5px; font-weight: 600; }
.oft-person__title { margin: 4px 0 0; font-size: 11px; line-height: 1.4; color: var(--eft-ink-2); }
.oft-person__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.eft-chip.is-link { color: var(--eft-info); text-decoration: none; }
.eft-chip.is-link:hover { border-color: var(--eft-accent); color: var(--eft-accent); }

@media (max-width: 720px) {
    .eft-overlay { padding: 0; }
    .eft { border-radius: 0; height: 100%; }
    .eft-math__row { grid-template-columns: 16px 54px minmax(0, 1fr); gap: 7px; }
    .oft-flow { flex-wrap: wrap; }
    .oft-people { grid-template-columns: 1fr; }
}