/* TaskBlink Data, All businesses (BUILD-PLAN 4 A8). The frame of DESIGN-BRIEF 1.5 and 2.20: row 1 the title,
   the tag chip and the toolbar; row 3 the live status or the receipt and select all; the money strip; the
   filter chips (A3); the grid or the table (A2). Phones (brief 2.20, Phone artboard): one row with Filters,
   the Export icon and select all, and a sticky bottom bar with Send. Tokens and components are tb.css's. */

.tb-biz { padding-top: 16px; padding-bottom: 80px; }

/* ---- Row 1: "All businesses", the tag, the toolbar ---- */
.tb-biz__row1 { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tb-biz__title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.tb-biz__h1 { margin: 0; flex: none; font: 600 22px/1.25 var(--font); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.tb-biz__h1:focus { outline: none; }
.tb-biz__tags { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-biz__count { font: 500 13px/1 var(--font-mono); color: var(--ink-3); }
.tb-biz__tag { max-width: 320px; }
.tb-biz__tag button.tb-tagchip__words { height: 44px; min-height: 44px; margin: -6px 0; }
.tb-biz__tag .tb-tagchip__words:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 3px; }
.tb-biz__tag--pending { width: 200px; padding: 0 12px; }
.tb-biz__tagskel { display: block; width: 100%; height: 12px; border-radius: var(--pill); }

.tb-biz__tools { flex: none; display: flex; align-items: center; gap: 8px; }
.tb-biz__filters { padding: 0 16px; }
.tb-biz__filters .tb-icon, .tb-biz__pfilters .tb-icon { color: var(--ink-3); }
.tb-biz__fcount {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--brand-tint);
  color: var(--brand-ink); font: 600 12px/20px var(--font-mono); text-align: center;
}
/* Cards | Table: a 44 tall track whose segments are the 44 tall buttons (brief 2.3, Results artboard) */
.tb-biz__seg { height: 44px; padding: 0; gap: 0; border-radius: var(--r-md); }
.tb-biz__seg .tb-seg__btn { height: 44px; min-height: 44px; padding: 0 14px; gap: 7px; border-radius: var(--r-md); font-size: 14px; }
.tb-biz__seg .tb-seg__btn[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--line), var(--sh-card); }
.tb-biz__export .tb-icon { color: var(--ink-2); }
.tb-biz__export.tb-btn--primary .tb-icon { color: currentColor; }
.tb-biz__send { padding: 0 18px; }
.tb-biz__offers { padding: 0 16px; }

/* ---- Row 3: the live status or the receipt, select all ---- */
.tb-biz__row3 { margin-top: 16px; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tb-biz__status { min-width: 0; display: flex; align-items: center; gap: 12px; }
.tb-biz__status:empty { min-height: 1px; }
/* The status, the receipt and the money strip are tb.css's .tb-status / .tb-timer, .tb-receipt and .tb-nudge
   (brief 2.13); these only add the numbers' weight and the receipt's link size. */
.tb-biz__status .tb-timer { flex: none; }
.tb-biz__status .tb-icon--spinner { width: 14px; height: 14px; }
.tb-biz__n { font-family: var(--font-mono); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tb-biz__receipt { min-width: 0; }
.tb-biz__r1 { overflow-wrap: anywhere; }
.tb-biz__r2 .tb-link { font-size: 12.5px; }

.tb-biz__row3-end { flex: none; display: flex; align-items: center; gap: 12px; font: 400 13px/1 var(--font); color: var(--ink-2); }
.tb-biz__all { height: 44px; margin: -6px -10px -6px 0; display: inline-flex; align-items: center; gap: 0; cursor: pointer; }
.tb-biz__all .tb-check__box { width: 18px; height: 18px; border-radius: 5px; }
.tb-biz__all .tb-check__box .tb-icon { width: 12px; height: 12px; }
.tb-biz__allwords { padding-right: 10px; font: 400 13px/1 var(--font); color: var(--ink-2); white-space: nowrap; }
.tb-biz__allwords .tb-biz__n, .tb-biz__bcount .tb-biz__n { font-weight: 600; }
/* "Clear" after "3 of 50 selected" (Table artboard): a quiet brand-text button in a 44 tall hit area */
.tb-biz__clearsel {
  height: 44px; min-height: 44px; margin: -6px -8px -6px -10px; padding: 0 8px; border: 0; border-radius: var(--r-sm);
  background: none; font: 500 13px/1 var(--font); color: var(--brand-text); cursor: pointer;
}
.tb-biz__clearsel:hover { text-decoration: underline; text-underline-offset: 3px; }
.tb-biz__clearsel:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.tb-biz__cols .tb-icon { color: var(--ink-2); }

/* ---- The money strip: tb.css's .tb-nudge, brand tint, never red (OutOfCredits artboard) ---- */
.tb-biz__strip { margin-top: 18px; }
.tb-biz__stripadd { flex: none; }

/* ---- Chips (A3), the grid, the table, empty states, more ---- */
.tb-biz__chips { margin-top: 16px; }
.tb-biz__body { margin-top: 20px; }
.tb-biz__grid { position: relative; min-height: 1px; }
.tb-biz__table { overflow-x: auto; }
.tb-biz__empty { padding: 48px 0 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tb-biz__emptyhead { margin: 0; }
.tb-biz__emptytext { margin: 0; max-width: 640px; font: 400 15px/1.5 var(--font); color: var(--ink-2); }
.tb-biz__emptysentence { width: 100%; max-width: 900px; }
.tb-biz__more { margin: 32px 0 0; display: flex; justify-content: center; }
.tb-biz__sentinel { height: 1px; }

/* ---- Find more: the sentence in a 520 popover (brief 2.2) ---- */
.tb-biz__findpop { padding: 16px; border-radius: var(--r-lg); }
.tb-biz__find { display: flex; flex-direction: column; gap: 10px; }
.tb-biz__cost { margin: 0; font: 400 12.5px/1.45 var(--font); color: var(--ink-3); }
.tb-biz__cost:empty { display: none; }
.tb-biz__err { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tb-biz__errtext { margin: 0; font: 500 13px/1.45 var(--font); color: var(--ink); }
.tb-biz__sugs { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Phone-only parts, hidden on wider screens ---- */
.tb-biz__phonebar, .tb-biz__bottombar { display: none; }

@media (max-width: 640px) {
  .tb-biz { padding-top: 8px; padding-bottom: 104px; }
  .tb-biz__row1 { min-height: 0; }
  .tb-biz--titled .tb-biz__row1 { display: none; }
  .tb-biz__h1 { font-size: 17px; }
  .tb-biz__tools, .tb-biz__row3-end { display: none; }
  .tb-biz__tag { max-width: 100%; }

  .tb-biz__phonebar { margin-top: 8px; min-height: 44px; display: flex; align-items: center; gap: 8px; }
  .tb-biz__pfilters { flex: none; padding: 0 12px 0 14px; gap: 7px; }
  .tb-biz__pexport { flex: none; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
  .tb-biz__phonebar .tb-biz__all, .tb-biz__pcount { margin-left: auto; }
  .tb-biz__pcount { font: 400 13px/1 var(--font); color: var(--ink-2); }

  .tb-biz__row3 { margin-top: 8px; align-items: flex-start; }
  .tb-biz__status { flex-wrap: wrap; row-gap: 6px; }
  .tb-biz__strip { flex-wrap: wrap; padding: 8px 8px 8px 16px; }
  .tb-biz__strip .tb-nudge__text { flex-basis: calc(100% - 24px); }
  .tb-biz__body { margin-top: 16px; }
  .tb-biz__table { display: none; }

  .tb-biz__bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; min-height: 72px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -14px 32px -18px rgba(14,18,48,.28);
  }
  .tb-biz__bcount { flex: none; margin: 0; font: 600 15px/1.3 var(--font); color: var(--ink); white-space: nowrap; }
  .tb-biz__bactions { flex: none; display: flex; align-items: center; gap: 8px; }
  .tb-biz__boffers { width: 164px; height: 52px; min-height: 52px; padding: 0 14px; border-radius: 12px; white-space: normal; line-height: 1.2; text-align: left; }
  .tb-biz__bsend { padding: 0 16px; }
  .tb-biz__findpop { padding: 12px; }
}

/* Phase B slots (BUILD-PLAN-B 4.15 H2, BI). tb-businesses.js makes each only when a phase B hook draws into it
 * (features.checks or features.offers), so a phase A page never has them. Row 3's left side: the run's status line
 * (TB.generate.statusLine) and the check chips (TB.checks.chipsRow); above the grid: the offers banner
 * (TB.offers.banner) and the filter nudge (TB.checks.nudge); ?want=1: "Want to know more?" beside the grid. */
.tb-biz__brow3 { min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tb-biz__bstatus, .tb-biz__bchips { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tb-biz__babove { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.tb-biz__bbanner:empty, .tb-biz__bnudge:empty, .tb-biz__bstatus:empty, .tb-biz__bchips:empty, .tb-biz__babove:empty { display: none; }
.tb-biz__bwant { min-width: 0; }
.tb-biz[data-want="1"] .tb-biz__body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 24px; align-items: start; }
.tb-biz[data-want="1"] .tb-biz__bwant { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: 88px; }
.tb-biz[data-want="1"] .tb-biz__body > :not(.tb-biz__bwant) { grid-column: 1; }
.tb-biz__bwant[hidden] { display: none; }
@media (max-width: 1080px) {
  .tb-biz[data-want="1"] .tb-biz__body { display: block; }
  .tb-biz[data-want="1"] .tb-biz__bwant { position: static; margin-bottom: 16px; }
}

/* ---- Blinker (tb-blinker.js; only for an account it is on for): its box in row 1, just before the toolbar. Row 1
 * has no width to spare for it (less with Generate Offers for List, or with the panel docked beside the page), so
 * with Blinker the row wraps instead: the button and then the toolbar go under the title and the tag, never over
 * them, each line at the right. On phones row 1 gives way to the top bar's title; with Blinker it stays, holding
 * only the button. ---- */
.tb-blinker { flex: none; display: flex; align-items: center; margin-left: auto; }
.tb-biz[data-blinker] .tb-biz__row1 { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
.tb-biz[data-blinker] .tb-biz__title { margin-right: auto; }
.tb-biz[data-blinker] .tb-biz__tools { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
@media (max-width: 640px) {
  .tb-biz--titled[data-blinker] .tb-biz__row1 { display: flex; justify-content: flex-end; }
  .tb-biz--titled[data-blinker] .tb-biz__title { display: none; }
}

/* ---- Enrichment (tb-enrich.js; only for an account Blinker is on for): classic's runs bar (#l-enrich-bar, which
 * enrich.js fills) sits above the table and never over the cards; on Cards, Row 3's "See N enrichment columns" brings
 * the table. ---- */
.tb-enrich { margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.tb-biz:not([data-mode="table"]) .tb-enrich { display: none; }
.tb-biz__xe .tb-icon { color: var(--ink-2); }
/* Up to 960 px wide its words would push Row 3's status onto more lines (and the cards down) as it comes, a moment
 * after the first paint: there it is the table icon and the count (data-n), its words kept as its name. */
@media (max-width: 960px) {
  .tb-biz__xe .tb-biz__xe-words { display: none; }
  .tb-biz__xe::before { content: attr(data-n); order: 1; font-variant-numeric: tabular-nums; }
}