/* TaskBlink Data, the card system (DESIGN-BRIEF 2.5, 2.26; CONCEPT 6.1 to 6.6; BUILD-PLAN package A2).
   The prospect card, its skeleton, the photo hover and the arrival peek, the three column stacks, the photo
   tiles, the table view with its Columns popover, and the details drawer. Tokens come from tb.css.
   Every control is a 44 px target. */

/* ------------------------------------------------------------------ *
 * The card (400 wide on desktop, the column's width on phones)
 * ------------------------------------------------------------------ */
.tb-card {
  position: relative; width: 100%; max-width: 400px; box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card);
  transition: transform var(--t-glide) var(--ease), box-shadow var(--t-glide) var(--ease);
}
.tb-card.is-selected { box-shadow: var(--ring-brand); }

.tb-card__photo { position: relative; display: block; height: 168px; flex: none; overflow: hidden; background: var(--surface-3); }
.tb-card__photo-link {
  position: absolute; inset: 0; display: block; overflow: hidden; cursor: pointer;
  text-decoration: none; color: #FFFFFF; outline: none;
}
.tb-card__img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 50%; transition: transform var(--t-glide) var(--ease);
}
.tb-card__shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 72px; pointer-events: none;
  background: linear-gradient(to top, rgba(14,18,48,.45), rgba(14,18,48,0));
}
.tb-card__dim {
  position: absolute; inset: 0; pointer-events: none; background: rgba(14,18,48,.10);
  opacity: 0; transition: opacity var(--t-hover) var(--ease);
}
.tb-card__badges { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; }
.tb-card__badge {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--pill);
  background: rgba(14,18,48,.72); color: #FFFFFF; font: 600 12px/26px var(--font); white-space: nowrap;
}
.tb-card__badge .tb-icon { width: 12px; height: 12px; }
.tb-card__rating .tb-icon--star { fill: var(--star); stroke: var(--star); }
.tb-card__reviews { font-weight: 500; color: #E6E8F2; }
.tb-card__ext { display: none; align-items: center; }
.tb-card__ext-only { display: none; padding: 0 8px; }
.tb-card__gbp {
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 300ms var(--ease), transform 160ms var(--ease);
}
/* Keyboard focus on the photo shows what hover shows */
.tb-card__photo-link:focus-visible { box-shadow: inset 0 0 0 3px var(--brand); }
.tb-card__photo-link:focus-visible .tb-card__dim { opacity: 1; }
.tb-card__photo-link:focus-visible .tb-card__img { transform: scale(1.04); }
.tb-card__photo-link:focus-visible .tb-card__gbp { opacity: 1; transform: none; transition-duration: 160ms; }
/* The arrival peek: the chip alone, no dim, no lift (DESIGN-BRIEF 2.5) */
.tb-card__photo.is-peek .tb-card__gbp { display: inline-flex; opacity: 1; transform: none; transition-duration: 600ms; }

@media (hover: hover) {
  .tb-card:hover { transform: translateY(calc(var(--lift) * -1)); box-shadow: var(--sh-card-hover); }
  .tb-card.is-selected:hover { box-shadow: var(--ring-brand), var(--sh-card-hover); }
  .tb-card:hover .tb-card__img { transform: scale(1.04); }
  .tb-card__photo-link:hover .tb-card__dim { opacity: 1; }
  .tb-card__photo-link:hover .tb-card__gbp { opacity: 1; transform: none; transition-duration: 160ms; }
}
/* Touch screens have no hover: the rating badge ends with the external link icon */
@media (hover: none) {
  .tb-card__ext, .tb-card__ext-only { display: inline-flex; }
  .tb-card__gbp { display: none; }
}

.tb-card__select {
  position: absolute; z-index: 1; top: 4px; left: 4px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.tb-card__select input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand-strong); cursor: pointer; }

.tb-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.tb-card__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tb-card__cats:focus { outline: none; }
.tb-card__cat {
  height: 24px; box-sizing: border-box; padding: 0 10px; border-radius: var(--pill);
  background: var(--bg-soft); border: 1px solid var(--line); font: 500 12px/22px var(--font); color: var(--ink-2); white-space: nowrap;
}
.tb-card__cat-more { height: 24px; display: flex; align-items: center; }
.tb-card__more {
  height: 44px; min-width: 44px; margin: -10px 0; padding: 0 8px; border: 0; background: none; cursor: pointer;
  font: 600 12px/1 var(--font); color: var(--brand-text);
}
.tb-card__more:hover { color: var(--brand-ink); text-decoration: underline; }

.tb-card__name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-card__name { margin: 0; font: 600 17px/1.25 var(--font); letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.tb-card__claimed { display: inline-flex; flex: none; color: var(--brand-strong); }
.tb-card__claimed .tb-icon { width: 18px; height: 18px; }

.tb-card__info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font: 400 13px/1.45 var(--font); color: var(--ink-2); }
.tb-card__info-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-card__info-row > .tb-icon { width: 16px; height: 16px; color: var(--ink-3); }
.tb-card__addr { min-width: 0; overflow-wrap: anywhere; }
.tb-card__site {
  display: inline-flex; align-items: center; min-height: 44px; margin: -12.5px 0; min-width: 0;
  color: var(--brand-text); font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-card__site:hover { color: var(--brand-ink); text-decoration: underline; }
.tb-card__nosite { flex: none; }

.tb-card__reach { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-card__phone { font: 500 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }

.tb-card__meta { display: flex; align-items: center; justify-content: space-between; height: 44px; margin: -4px 0; }
.tb-card__counts { display: inline-flex; align-items: center; font: 500 12.5px/1 var(--font); color: var(--ink-2); white-space: nowrap; }
.tb-card__info-btn {
  width: 44px; height: 44px; margin: 0 0 0 -8px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); border-radius: var(--r-md);
}
.tb-card__info-btn:hover { color: var(--ink); }
.tb-card__info-btn .tb-icon { width: 16px; height: 16px; }
.tb-card__social { display: inline-flex; margin-right: -13px; }
.tb-card__social-link { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); border-radius: var(--r-md); }
.tb-card__social-link:hover { color: var(--ink); background: var(--surface-2); }
.tb-card__social-link .tb-icon { width: 18px; height: 18px; }
.tb-card__tip { margin: 0; font: 400 13px/1.5 var(--font); color: var(--ink-2); }

/* At a glance (CONCEPT 6.2): a two column grid under a hairline, known facts only */
.tb-card__facts {
  list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 8px;
}
.tb-card__fact { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 12.5px/18px var(--font); color: var(--ink); }
.tb-card__fact > .tb-icon { width: 14px; height: 14px; color: var(--ink-3); }
.tb-card__fact--wide { grid-column: 1 / -1; }
.tb-card__fact-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-card__soft { font-weight: 400; color: var(--ink-2); }

.tb-card__grown { display: flex; flex-direction: column; gap: 8px; }
.tb-card__grown:empty { display: none; }

.tb-card__actions { padding-top: 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; }
.tb-card__ask { padding: 0 18px; }
.tb-card__view { flex: 1; min-width: 0; }

/* Entrance (500 ms, staggered by the grid) and the just-landed brand tint on the stored facts */
.tb-card--enter { animation: tb-card-in var(--t-card) var(--ease) both; }
.tb-card--enter .tb-card__line { animation: tb-cards-landed 1.2s var(--ease) 300ms both; }
.tb-card--enter .tb-card__facts { animation: tb-cards-landed-block 1.2s var(--ease) 300ms both; }
.tb-card--leave { animation: tb-cards-out var(--t-exit) var(--ease-exit) forwards; pointer-events: none; }

/* The skeleton (the AnonResults artboard): the photo area and three shimmer lines, no caption */
.tb-card--skel { pointer-events: none; }
.tb-card--skel .tb-card__photo { border-radius: 0; }
.tb-card__skel-body { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 22px; }
.tb-card__skel-line { border-radius: var(--r-xs); height: 12px; }
.tb-card__skel-line--1 { width: 58%; height: 18px; }
.tb-card__skel-line--2 { width: 86%; animation-delay: .1s; }
.tb-card__skel-line--3 { width: 64%; animation-delay: .2s; }

/* ------------------------------------------------------------------ *
 * The grid: three column stacks, a card never moves sideways
 * ------------------------------------------------------------------ */
.tb-grid { width: 100%; }
.tb-grid__cols { display: flex; align-items: flex-start; gap: 24px; }
.tb-grid__col { flex: 1 1 0; min-width: 0; max-width: 400px; display: flex; flex-direction: column; gap: 24px; }
.tb-grid__blocked { max-width: 640px; padding: 40px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.tb-grid__blocked-text { margin: 0; font: 400 16px/1.55 var(--font); color: var(--ink-2); }
.tb-grid__retry .tb-icon { color: var(--ink-2); }
.tb-table__blocked { padding: 24px 0; }

/* ------------------------------------------------------------------ *
 * Photo tiles (2.26): 40 by default, 48 on the sheet, 32 in the table and Search History
 * ------------------------------------------------------------------ */
.tb-thumb {
  position: relative; display: inline-block; flex: none; width: 40px; height: 40px; box-sizing: border-box; vertical-align: middle;
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface-3);
}
.tb-thumb--32 { width: 32px; height: 32px; border-radius: var(--r-sm); }
.tb-thumb--48 { width: 48px; height: 48px; }
.tb-thumb--stack { border: 2px solid var(--surface); }
.tb-thumb--stack + .tb-thumb--stack { margin-left: -10px; }
.tb-thumb__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-thumb-link {
  display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  text-decoration: none; border-radius: var(--r-md);
}
.tb-thumb-link:focus-visible { outline: none; box-shadow: var(--ring-brand); }

/* ------------------------------------------------------------------ *
 * The table view (CONCEPT 6.5, the Table artboard)
 * ------------------------------------------------------------------ */
.tb-table-wrap {
  width: 100%; overflow-x: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card);
}
.tb-table {
  width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0;
  font: 400 13px/1.45 var(--font); color: var(--ink-2);
}
.tb-table th {
  position: sticky; top: 0; z-index: 1; height: 40px; padding: 0 8px; text-align: left; vertical-align: middle;
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
  font: 600 11px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.tb-table th.tb-table__sel, .tb-table td.tb-table__sel { width: 44px; padding: 0; text-align: center; }
.tb-table th.tb-table__sel + th, .tb-table td.tb-table__sel + td { padding-left: 4px; }
.tb-table__check {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -2px 0;
  vertical-align: middle; cursor: pointer;
}
.tb-table__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-strong); cursor: pointer; }
.tb-table__sort {
  display: inline-flex; align-items: center; gap: 4px; height: 44px; min-width: 44px; margin: -2px 0; padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; cursor: pointer;
}
.tb-table__sort:hover, .tb-table th[aria-sort] .tb-table__sort { color: var(--ink); }
.tb-table__sort .tb-icon { width: 12px; height: 12px; }
.tb-table tbody tr { height: 48px; }
.tb-table__th, .tb-table__td { vertical-align: middle; }
.tb-table td { padding: 0 8px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-table tbody tr:last-child td { border-bottom: 0; }
.tb-table tbody tr:hover { background: var(--surface-2); }
.tb-table tbody tr.is-selected { background: var(--brand-tint); }
.tb-table tbody tr.is-selected td { border-bottom-color: var(--brand-line); }
.tb-table__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-table__name .tb-thumb-link { margin: -6px; }
.tb-table tr.is-selected .tb-thumb { border-color: var(--brand-line); }
.tb-table__open {
  min-width: 0; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 600 13px/1.2 var(--font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-table__open:hover { color: var(--brand-text); }
.tb-table__claimed { display: inline-flex; flex: none; color: var(--brand-strong); }
.tb-table__claimed .tb-icon { width: 14px; height: 14px; }
.tb-table__rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: var(--ink); }
.tb-table__rating .tb-icon { width: 12px; height: 12px; color: var(--ink-3); }
.tb-table__td--mono { font: 500 12.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.tb-table__link {
  display: inline-flex; align-items: center; min-height: 44px; margin: -2px 0;
  color: var(--brand-text); font-weight: 500; text-decoration: none;
}
.tb-table__link:hover { color: var(--brand-ink); text-decoration: underline; }

/* The Columns popover (360 wide, anchored under "Columns"). Its button, open: the brand border and soft
   ring of the Table artboard, the chevron turned up (TB.ui.popover keeps the anchor's aria-expanded) */
.tb-colsbtn .tb-icon:last-child { width: 14px; height: 14px; color: var(--ink-3); }
.tb-btn[data-act="columns"] .tb-icon:last-child { transition: transform var(--t-chip) var(--ease); }
.tb-btn[data-act="columns"][aria-expanded="true"] { border-color: var(--brand-text); box-shadow: 0 0 0 3px rgba(239,6,192,.14); }
.tb-btn[data-act="columns"][aria-expanded="true"] .tb-icon:last-child { transform: rotate(180deg); }
.tb-cols-pop { padding: 6px 6px 0; }
.tb-cols { display: flex; flex-direction: column; }
.tb-cols__group { display: block; }
/* Each section head is a 44 px button drawn as a 34 px row (the artboard's -5 px margins) */
.tb-cols__head {
  width: 100%; height: 44px; margin: -5px 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; text-align: left; font: 600 13px/1 var(--font); color: var(--ink);
}
.tb-cols__head-in {
  width: 100%; height: 34px; padding: 0 10px; border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 8px;
}
.tb-cols__head:hover .tb-cols__head-in { background: var(--surface-2); }
.tb-cols__head:focus { outline: none; }
.tb-cols__head:focus-visible .tb-cols__head-in { box-shadow: var(--ring-brand); }
.tb-cols__chev { display: inline-flex; color: var(--ink-3); }
.tb-cols__chev .tb-icon { width: 14px; height: 14px; }
.tb-cols__name { flex: 1; }
.tb-cols__count { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.tb-cols__list {
  list-style: none; margin: 0 0 4px; padding: 0 0 0 22px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px;
}
.tb-cols__opt {
  height: 44px; box-sizing: border-box; padding: 0 8px 0 10px; border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 10px; font: 400 13px/1.2 var(--font); color: var(--ink); white-space: nowrap; cursor: pointer;
}
.tb-cols__opt:hover { background: var(--surface-2); }
.tb-cols__opt input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--brand-strong); cursor: pointer; }
.tb-cols__opt input:disabled { cursor: default; }
.tb-cols__note { margin: 6px -6px 0; padding: 12px 16px 14px; border-top: 1px solid var(--line); font: 400 12.5px/1.45 var(--font); color: var(--ink-3); }

/* ------------------------------------------------------------------ *
 * The details drawer (a right sheet; a bottom sheet on phones)
 * ------------------------------------------------------------------ */
.tb-drawer__head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tb-drawer__head .tb-thumb-link { flex: none; }
.tb-drawer__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-drawer__type { font: 500 13px/1.4 var(--font); color: var(--ink-2); }
.tb-drawer__addr { font: 400 13px/1.45 var(--font); color: var(--ink-3); }
.tb-drawer__gbp {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -8px 0 -10px;
  font: 500 14px/1 var(--font); color: var(--brand-text); text-decoration: none;
}
.tb-drawer__gbp:hover { color: var(--brand-ink); text-decoration: underline; }
.tb-drawer__gbp .tb-icon { width: 14px; height: 14px; }
.tb-drawer__sec { display: flex; flex-direction: column; gap: 8px; }
.tb-drawer__title { margin: 0; font: 600 11px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.tb-drawer__list { margin: 0; display: flex; flex-direction: column; }
.tb-drawer__row {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line); font: 400 14px/1.5 var(--font);
}
.tb-drawer__row:first-child { border-top: 0; }
.tb-drawer__row dt { color: var(--ink-3); font-size: 13px; }
.tb-drawer__row dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.tb-drawer__soft { color: var(--ink-2); }
.tb-drawer__mono { font: 500 13px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }
.tb-drawer__link {
  display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0;
  color: var(--brand-text); font-weight: 500; text-decoration: none;
}
.tb-drawer__link:hover { color: var(--brand-ink); text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * Phones: one 358 column, the photo 150 tall (the Phone artboard)
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .tb-card { max-width: none; }
  .tb-card__photo { height: 150px; }
  .tb-card__body { padding: 12px 16px 16px; gap: 6px; }
  .tb-card__info { gap: 4px; }
  .tb-card__name-row { flex-wrap: wrap; }
  .tb-card__meta { margin: -6px 0; }
  .tb-card__facts { padding-top: 10px; row-gap: 6px; }
  .tb-grid__cols, .tb-grid__col { gap: 16px; }
  .tb-grid__col { max-width: none; }
  .tb-drawer__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ------------------------------------------------------------------ *
 * Motion
 * ------------------------------------------------------------------ */
@keyframes tb-cards-landed {
  from { background-color: var(--brand-tint); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand-line), 0 0 0 4px rgba(239,6,192,.10); }
}
@keyframes tb-cards-landed-block { from { background-color: var(--brand-tint); } }
@keyframes tb-cards-out { to { opacity: 0; transform: translateY(-6px) scale(.96); filter: blur(2px); } }

@media (prefers-reduced-motion: reduce) {
  .tb-card, .tb-card__img, .tb-card__gbp, .tb-card__dim { transition-property: opacity, box-shadow; }
  .tb-card:hover, .tb-card.is-selected:hover { transform: none; }
  .tb-card:hover .tb-card__img, .tb-card__photo-link:focus-visible .tb-card__img { transform: none; }
  .tb-card__gbp, .tb-card__photo-link:hover .tb-card__gbp { transform: none; }
  .tb-btn[data-act="columns"] .tb-icon:last-child { transition: none; }
  @keyframes tb-cards-out { to { opacity: 0; } }
}

/* Phase B (BUILD-PLAN-B 4.15 H1, BI): the drawer's check sections from TB.checks.drawerSections, after phase A's
 * own; drawn only while features.checks or features.offers is on. */
.tb-drawer__b { display: flex; flex-direction: column; gap: 24px; }
.tb-drawer__b:empty { display: none; }

/* Enrichment columns (TB.table.render's opts.xcols, drawn only while classic's enrich.js is mounted on All businesses
 * through tb-enrich.js; tb-enrich.css styles enrich.js's own parts inside them): their labels as written, not in
 * capitals, and a small sort button beside enrich.js's header. The Columns popover's Enrichment section (opts.extra)
 * has a heading, not a toggle. */
.tb-table--xe th.tb-table__th--xe { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink-2); }
.tb-table__xh { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tb-table__xsort {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent;
  border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer;
}
.tb-table__xsort:hover, .tb-table__xsort.is-on { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.tb-table__xsort:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.tb-table__xsort .tb-icon { width: 12px; height: 12px; }
.tb-cols__head--static { cursor: default; }
.tb-cols__head--static:hover .tb-cols__head-in { background: transparent; }