/* ============================================================================
   Find Customers v2 — unified front door (design handoff 2026-07-08)
   Content-area styles only. Viva shell (sidebar/topbar) is reused as-is.
   Tokens & measurements per docs/product/b2b-targeting/design-handoff-brief.md
   ========================================================================== */

.fc2 {
  --fc-ink: #16161D;
  --fc-accent: #7C3AED;
  --fc-accent-hover: #6D28D9;
  --fc-accent-soft: #F3EFFE;
  --fc-accent-soft-border: #E4DCFB;
  --fc-accent-chip-border: #C9B8F5;
  --fc-green: #16A34A;
  --fc-green-bright: #4ADE80;
  --fc-green-soft-bg: #EAF7EF;
  --fc-green-soft-border: #D3EEDD;
  --fc-amber: #D97706;
  --fc-text-2: #374151;
  --fc-text-muted: #6B7280;
  --fc-text-faint: #9AA2B1;
  --fc-line: #E8EAEE;
  --fc-line-row: #F0F1F4;
  --fc-page-bg: #F7F8FA;
  --fc-surface: #FFFFFF;
  --fc-input-bg: #F5F6F8;

  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--fc-ink);
  -webkit-font-smoothing: antialiased;
  background: var(--fc-page-bg);
  min-height: 100%;
}

.fc2 *, .fc2 *::before, .fc2 *::after { box-sizing: border-box; }
.fc2 .tnum { font-variant-numeric: tabular-nums; }

/* animations */
@keyframes fc-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes fc-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fc-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
/* An INDETERMINATE bar, for work whose length we genuinely cannot predict.
   fc-slide is an entrance (translateX 24px -> none, once); reusing it here would fade
   a bar in and then sit still, which is the thing this is meant to fix. */
@keyframes fc-indeterminate { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

.fc2 .fc-anim-fade { animation: fc-fade .22s ease; }

/* ── Drawer: enter once, then fill in quietly ──────────────────────────────
   The slide and the scrim fade are ENTER animations and belong to the open. They
   used to live inline on the markup, which meant every repaint that included the
   drawer replayed them — and a drawer open starts three loads, each of which
   repainted. That was the flash. `fc-enter` is set for exactly one paint (see
   state.drawerEnter); everything after it patches in place. */
.fc2 .fc-drawer.fc-enter { animation: fc-slide .26s cubic-bezier(.2, .8, .2, 1); }
.fc2 .fc-drawer-scrim.fc-enter { animation: fc-fade .2s ease; }

/* A placeholder that holds the space its value will take. The height is the point;
   the shimmer only says "still coming". */
.fc2 .fc-skel {
  background: linear-gradient(90deg, #F1F2F5 25%, #E8EAEE 37%, #F1F2F5 63%);
  background-size: 800px 100%;
  animation: fc-shimmer 1.4s infinite linear;
  border-radius: 6px;
}

/* Arriving vs changing — two different events, two different signals.
   A value landing on its placeholder fades up. A value that was already on screen
   and then moved tints once, so it is not silently different under the reader. */
@keyframes fc-settle { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@keyframes fc-updated-tint { from { background: var(--fc-accent-soft); } to { background: transparent; } }
.fc2 [data-drawer-sec].fc-settle { animation: fc-settle .18s ease-out; }
.fc2 [data-drawer-sec].fc-updated { animation: fc-updated-tint .7s ease-out; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .fc2 *, .fc2 *::before, .fc2 *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* hover helpers driven by data-hover-* on elements bound in JS */
.fc2 [data-hover] { transition: background .12s, border-color .15s, box-shadow .15s, color .12s; }

/* Reserve the scrollbar gutter so the centered content (and the describe input)
   keeps the SAME width whether the page is short (no scrollbar, e.g. before Find)
   or tall enough to scroll (scrollbar appears, e.g. after results load). Without
   this, the scrollbar showing up shifts/narrows the layout on that transition. */
.ai-main-content-scroll { scrollbar-gutter: stable; }

/* responsive: two-pane -> stacked on narrow viewports */
@media (max-width: 860px) {
  .fc2 .fc-twopane { flex-direction: column !important; }
  .fc2 .fc-rail { width: 100% !important; }
  .fc2 .fc-triptych { grid-template-columns: 1fr !important; }
  .fc2 .fc-target-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .fc2 .fc-drawer { width: 100% !important; }
}

/* Signals band — tier 2, between industry and location.
   Three groups side by side at full width; they were stacked only because the rail
   was 284px. flex-wrap so they reflow to two-up and then one-up rather than
   squeezing chips into a column of one. */
.fc2 .fc-sigband { display: flex; flex-wrap: wrap; gap: 26px 34px; }
.fc2 .fc-siggroup { flex: 1 1 240px; min-width: 210px; }
@media (max-width: 720px) {
  .fc2 .fc-sigband { gap: 18px; }
  .fc2 .fc-siggroup { flex: 1 1 100%; }
}

/* Step bands: the location body is columns at full width, same idea as the signals
   band. Both collapse to one column on narrow screens rather than squeezing. */
.fc2 .fc-cols { display: flex; flex-wrap: wrap; gap: 22px 30px; align-items: flex-start; }
.fc2 .fc-col { flex: 1 1 230px; min-width: 200px; }
@media (max-width: 720px) {
  .fc2 .fc-cols { gap: 16px; }
  .fc2 .fc-col { flex: 1 1 100%; }
}

/* No width jitter between the empty state and a page of results.
   This stylesheet is loaded ONLY by find-customers.html, so scoping to the shared
   scroll container is safe here.

   The container is max-width:1180px with identical padding in both states, so nothing
   in the layout changes width — but the page is short before you hit Find and long
   after, so the scrollbar appears and takes its width out of the content box. Every
   card, the search input included, steps sideways at the exact moment you're reading
   the result of your click. Reserving the gutter up front costs nothing and removes
   the shift entirely. */
.ai-main-content-scroll { scrollbar-gutter: stable; }

/* ── RESEARCH · narrow screens ──────────────────────────────────────────────
   Artboard K of the design handoff. The Research screens are built from CSS grids
   with fixed pixel tracks — the right shape at 1120px and impossible at 375px, where
   a `250px 96px 1fr 56px 190px` row is 600px of tracks in a 340px box.

   Everything below is a REFLOW, not a hide: no column is dropped, because a verdict
   the owner cannot see the cost or the reason for is the one thing these screens are
   not allowed to become. Rows become stacked cards, the stat band becomes 2x2, and
   the spend breakdown keeps its size — it is the receipt, and shrinking it on a phone
   would be shrinking it for the people most likely to be checking it in a hurry.

   Scoped to .fc2 so nothing here can reach another page's grid. */
@media (max-width: 760px) {
  /* The four dark stat tiles: 2x2 rather than four 90px columns. The dividers move
     with them, or the second row inherits a right border that now points at nothing. */
  .fc2 [data-research-stats] { grid-template-columns: 1fr 1fr !important; }
  .fc2 [data-research-stats] > div { border-right: none !important; border-bottom: 1px solid #33333E; }
  .fc2 [data-research-stats] > div:nth-child(odd) { border-right: 1px solid #33333E !important; }
  .fc2 [data-research-stats] > div:nth-child(n+3) { border-bottom: none; }

  /* Result rows: one column, in reading order — name, verdict, reason, then the
     actions. `justify-self:end` from the desktop grid has to be unset or the chips
     and buttons hug the right edge of a full-width card. */
  .fc2 [data-research-row] { grid-template-columns: 1fr !important; gap: 8px !important; }
  .fc2 [data-research-row] > * { justify-self: start !important; }
  /* The star column is a 24px track that becomes an empty line of its own. */
  .fc2 [data-research-row] > :first-child:empty { display: none; }
  .fc2 [data-research-head] { display: none !important; }   /* column headers with no columns */

  /* 44px minimum touch target — Right / Wrong / View are the whole feedback loop,
     and a 28px button on a phone is a button people stop pressing. */
  .fc2 [data-research-row] button { min-height: 44px; padding: 10px 16px !important; }

  /* The runs table on the landing screen, same treatment. */
  .fc2 [data-runs-row], .fc2 [data-runs-head] { grid-template-columns: 1fr !important; gap: 8px !important; }
  .fc2 [data-runs-head] { display: none !important; }
  .fc2 [data-runs-row] > * { justify-self: start !important; }
  .fc2 [data-runs-row] button { min-height: 44px; }

  /* The live feed's four tracks collapse the same way. */
  .fc2 [data-feed-row] { grid-template-columns: 1fr !important; gap: 6px !important; }
  .fc2 [data-feed-row] > * { justify-self: start !important; white-space: normal !important; }

  /* Zero state: the two explainer cards stack, and the funnel bars stop trying to
     hold a 300px minimum inside a 340px screen — the narrowing is the point, but not
     at the cost of the label being unreadable. */
  .fc2 .fc-research-cards { grid-template-columns: 1fr !important; }
  .fc2 [data-gate-bar] { min-width: 0 !important; }

  /* The drawer is a full-height sheet rather than a 560px panel off the right edge. */
  .fc2 .fc-drawer { width: 100% !important; }

  /* "94 of 100 credits" must not break after "of 100" — the number and its
     denominator are one fact, and splitting them reads as two. */
  .fc2 [data-research-stats] span { white-space: nowrap; }
}

/* Lead Lists index: the detail panel stacks under the table before the table's name
   column would have to give up width. The panel is sticky only beside the table. */
@media (max-width: 1050px) {
  .fc2 .fc-lists-body { grid-template-columns: minmax(0, 1fr) !important; }
  .fc2 [data-lists-panel] { position: static !important; }
}

/* Lead Lists index checkbox — 15px, radius 4, ink when checked or indeterminate.
   A real <input> so Space toggles it and screen readers announce it. */
.fc2 .fc-check {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; margin: 0; flex: none;
  border: 1.5px solid #D2D2DA; border-radius: 4px; background: #fff;
  cursor: pointer; display: inline-grid; place-items: center;
  transition: background .12s ease, border-color .12s ease;
}
.fc2 .fc-check::after {
  content: ''; width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg); opacity: 0;
}
.fc2 .fc-check:checked, .fc2 .fc-check:indeterminate { background: #17171A; border-color: #17171A; }
.fc2 .fc-check:checked::after { opacity: 1; }
.fc2 .fc-check:indeterminate::after { width: 8px; height: 0; border-left: 0; border-bottom: 2px solid #fff; transform: none; opacity: 1; }
.fc2 .fc-check:focus-visible { outline: 2px solid #7C3AED; outline-offset: 2px; }

/* On a phone the panel is a sheet (see viewOverview), so its in-flow cell is empty:
   let the table take the whole width. The sheet itself slides up like the drawer. */
.fc2 .fc-lists-body.fc-lists-phone { grid-template-columns: minmax(0, 1fr) !important; }
.fc2 .fc-lists-body.fc-lists-phone > [data-lists-panel] { display: none; }
@keyframes fc-rise { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.fc2 .fc-lists-sheet.fc-enter { animation: fc-rise .22s cubic-bezier(.2, .8, .2, 1); }