/* ====================================================================
   LM Brand Directory v2 (/pages) — 3-column redesign
   Design ref: /designs/brand-directory/Brand Directory.html

   Layout: filter bar + main grid (2/3) + sticky Premium sidebar (1/3).
   Premium brands are sidebar-exclusive. No "More filters" drawer — all
   7 filters live in one flex-wrap row.

   All colours via design tokens (--lm-*) with literal fallbacks.
==================================================================== */

.lm-bd-page {
  --bd-client: var(--lm-client, #00363f);
  --bd-client-strong: var(--lm-client-strong, #012a31);
  --bd-client-soft: var(--lm-client-soft, #eef5f6);
  --bd-client-soft-2: var(--lm-client-soft-2, #cfe1e4);
  --bd-client-text: var(--lm-client-text, #012a31);
  --bd-gold: var(--lm-gold, #C6A15B);
  --bd-gold-soft-2: var(--lm-gold-soft-2, #f5deb3);
  --bd-bg: var(--lm-bg, #fff);
  --bd-surface: var(--lm-surface, #f8fafc);
  --bd-surface-2: var(--lm-surface-2, #f1f5f9);
  --bd-text: var(--lm-text, #0f172a);
  --bd-text-2: var(--lm-text-secondary, #475569);
  --bd-muted: var(--lm-muted, #64748b);
  --bd-border: var(--lm-border, #e2e8f0);
  --bd-border-2: var(--lm-border-2, #eef2f6);
  --bd-primary: var(--lm-primary, #0f6f4f);
  --bd-primary-soft: var(--lm-primary-soft, #f3f8f5);
  --bd-primary-soft-2: var(--lm-primary-soft-2, #dcebe2);
  --bd-primary-text: var(--lm-primary-text, #0a5439);
  --bd-r-card: 12px;
  --bd-r-btn: 8px;
  --bd-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 0 rgba(15,23,42,.02);
  --bd-shadow-md: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);

  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Header ── */
.lm-bd-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--bd-text);
}

/* ====================================================================
   3-column shell — main (2fr) + sidebar (1fr, sticky)
==================================================================== */
.lm-bd-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 24px;
  align-items: start;
}
.lm-bd-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lm-bd-sidebar {
  position: sticky;
  top: 16px;
  align-self: start;
  /* v2.2i — reserve room at the bottom so the last premium card isn't
     hidden behind the fixed .lm-rail-footer (shared partial). Matches the
     .lm-rail padding-bottom on /profile. */
  padding-bottom: 80px;
}

/* ====================================================================
   Filter bar — single flex-wrap row, no drawer
==================================================================== */
.lm-bd-filterbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bd-bg);
  border: 1px solid var(--bd-border);
  border-radius: var(--bd-r-card);
  box-shadow: var(--bd-shadow-sm);
}
.lm-bd-filter-row {
  display: flex;
  align-items: center;
  /* gap: 10px; */
  flex-wrap: wrap;
  justify-content: space-between;
}
.lm-bd-filter-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--bd-border-2);
}
.lm-bd-filter-row2[hidden] { display: none; }
.lm-bd-filter-row2-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  /* v2.2c — anchor for the right-edge fade gradient (::after below). */
  position: relative;
}
/* v2.2c — Right-edge gradient fade: pills scroll horizontally and slide
   "under" this fade before they reach the Clear-all / Sort cluster on
   the right. Mirrors the /people .dc-filters-row2-left.has-chips pattern.
   pointer-events:none so the fade never blocks pill ✕ clicks. */
.lm-bd-filter-row2-left::after {
  content: "";
  position: absolute;
  top: 0; right: -2px;
  height: 100%;
  width: 36px;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, var(--bd-bg) 75%, var(--bd-bg) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Hide the fade when there are no active pills (empty wrap). */
.lm-bd-filter-row2-left:not(:has(.lm-bd-active-chip))::after { display: none; }
.lm-bd-filter-row2-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lm-bd-fw { position: relative; }

/* Chip-style filter button */
.lm-bd-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bd-bg);
  border: 1px solid var(--bd-border);
  color: var(--bd-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.lm-bd-chip:hover { background: var(--bd-surface-2); border-color: #cbd5e1; }
.lm-bd-chip svg { color: var(--bd-muted); flex: none; }
.lm-bd-chip.is-active {
  background: var(--bd-client-soft);
  color: var(--bd-client-text);
  border-color: var(--bd-client-soft-2);
}
.lm-bd-chip.is-active svg { color: var(--bd-client-text); }
.lm-bd-chip-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bd-client-soft);
  color: var(--bd-client-text);
  font-size: 11px;
  font-weight: 700;
}
.lm-bd-chip.is-active .lm-bd-chip-count {
  background: rgba(0,54,63,.16);
}

/* v2.2 — Selected-count overlay badge on a chip (e.g. Industries).
   Mirrors the header notification-badge pattern: positioned absolutely
   over the top-right corner of the chip so the chip width never changes
   when the count appears / changes. The wrapper .lm-bd-fw is
   position:relative (line ~117), which anchors this absolute child. */
.lm-bd-chip-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bd-client);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--bd-bg);
  box-sizing: content-box;
  pointer-events: none;
  z-index: 2;
}
.lm-bd-chip-badge[hidden] { display: none; }

/* Toggles */
.lm-bd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--bd-border);
  background: var(--bd-bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--bd-text);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.lm-bd-toggle svg { color: var(--bd-muted); flex: none; }
.lm-bd-switch {
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--bd-surface-2);
  border: 1px solid var(--bd-border);
  position: relative;
  flex: none;
  transition: background 120ms, border-color 120ms;
}
.lm-bd-switch::after {
  /* v2.2k FIX — knob vertically centred (was top:1, shifted upward inside
     the 18px track because the 12px knob + 1px border maths left a 5px
     gap at the bottom). top:50% + translateY(-50%) keeps it dead-centre
     regardless of track height. */
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bd-bg);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: left 150ms;
}
.lm-bd-toggle.is-on .lm-bd-switch { background: var(--bd-primary); border-color: var(--bd-primary); }
.lm-bd-toggle.is-on .lm-bd-switch::after { left: 15px; }
/* Verified-only toggle — client-teal accent */
.lm-bd-toggle.is-on {
  background: var(--bd-client-soft);
  border-color: var(--bd-client-soft-2);
  color: var(--bd-client-text);
}
.lm-bd-toggle.is-on svg { color: var(--bd-client-text); }
/* Hiring-now toggle — green accent + pulse vibe */
.lm-bd-toggle-hiring.is-on {
  background: var(--bd-primary-soft);
  border-color: var(--bd-primary-soft-2);
  color: var(--bd-primary-text);
}
.lm-bd-toggle-hiring.is-on svg { color: var(--bd-primary-text); }

/* Active filter pills (row 2).
   v2.2c — horizontal scroll (not wrap), mirroring /people Discover Talents:
   pills sit in a single row that scrolls horizontally; the parent
   .lm-bd-filter-row2-left renders a right-edge fade gradient under which
   the pills slide before reaching the Clear-all + Sort cluster.

   Scrollbar is hidden (Firefox / IE / WebKit). flex-shrink:0 on each pill
   so they never compress; flex:1 + min-width:0 on the parent .lm-bd-filter-row2-left
   already allow the row to take up the available width. */
.lm-bd-active-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lm-bd-active-chips::-webkit-scrollbar { display: none; width: 0; height: 0; }
.lm-bd-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: var(--bd-client-soft);
  color: var(--bd-client-text);
  border: 1px solid var(--bd-client-soft-2);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}
.lm-bd-active-chip button {
  /* v2.2 — explicit inline-flex centering + line-height:1 so the ✕ SVG
     sits dead-centre inside the circular hit area regardless of the
     parent's text line-height. Previous `display:grid; place-items:center`
     was correct in principle but inherited baseline alignment from the
     parent active-chip pushed the icon down by ~1px. */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,54,63,.16);
  color: var(--bd-client-text);
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms;
}
.lm-bd-active-chip button svg { display: block; }
.lm-bd-active-chip button:hover { background: rgba(0,54,63,.32); }

/* v2.2l — Premium variant of the active filter pill (used when the user
   filters by tier=Premium). Matches the "View Profile" CTA + Premium
   tier badge: navy gradient bg, gold border, cream/wheat text. Plus a
   gold diamond ::before, same one used on the Premium badge in the
   card name row. */
.lm-bd-active-chip-premium {
  background: linear-gradient(135deg, #1f2937, #0F172A);
  color: #f5deb3;
  border-color: #d4a93f;
  position: relative;
  padding-left: 22px;
}
.lm-bd-active-chip-premium::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--bd-gold, #C6A15B);
  transform: translateY(-50%) rotate(45deg);
}
.lm-bd-active-chip-premium button {
  background: rgba(212,169,63,.18);
  color: #f5deb3;
}
.lm-bd-active-chip-premium button:hover {
  background: rgba(212,169,63,.32);
}
.lm-bd-clear-all {
  background: transparent;
  border: none;
  color: var(--bd-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.lm-bd-clear-all:hover { background: var(--bd-surface-2); color: var(--bd-text); }

/* ── Popovers ── */
.lm-bd-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 220px;
  background: var(--bd-bg);
  border: 1px solid var(--bd-border);
  border-radius: 10px;
  box-shadow: var(--bd-shadow-md);
  padding: 10px;
}
.lm-bd-pop-wide { min-width: 280px; }
.lm-bd-pop-right { left: auto; right: 0; }
.lm-bd-pop-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--bd-border);
  border-radius: 8px;
  color: var(--bd-muted);
  margin-bottom: 8px;
}
.lm-bd-pop-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--bd-text);
}
.lm-bd-pop-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.lm-bd-pop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bd-border-2);
}
.lm-bd-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  color: var(--bd-text);
  cursor: pointer;
  text-align: left;
  transition: background 120ms;
}
.lm-bd-pop-item:hover { background: var(--bd-surface-2); }
.lm-bd-pop-item.is-selected { background: var(--bd-client-soft); color: var(--bd-client-text); }
.lm-bd-pop-check {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--bd-client);
  flex: none;
}
.lm-bd-pop-item.is-selected .lm-bd-pop-check { color: var(--bd-client-text); }

/* v2.2m — Single-select popovers (Company type, Tier) render their
   selection indicator as a RADIO circle instead of a check mark. Makes
   the affordance obvious: only one option at a time. Industries (multi)
   still uses the check mark. Scoped to the two specific popover IDs. */
#lm-bd-pop-ctype .lm-bd-pop-check,
#lm-bd-pop-tier .lm-bd-pop-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--bd-border);
  background: var(--bd-bg);
  position: relative;
  display: inline-block;
  transition: border-color 120ms, background 120ms;
}
/* Hide the inherited SVG check inside — radio variant uses a CSS dot. */
#lm-bd-pop-ctype .lm-bd-pop-check svg,
#lm-bd-pop-tier .lm-bd-pop-check svg { display: none; }
/* Selected radio: client-tinted ring + filled centre dot. */
#lm-bd-pop-ctype .lm-bd-pop-item.is-selected .lm-bd-pop-check,
#lm-bd-pop-tier .lm-bd-pop-item.is-selected .lm-bd-pop-check {
  border-color: var(--bd-client);
}
#lm-bd-pop-ctype .lm-bd-pop-item.is-selected .lm-bd-pop-check::after,
#lm-bd-pop-tier .lm-bd-pop-item.is-selected .lm-bd-pop-check::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--bd-client);
}
/* Hover ring (unselected) — subtle tint so users see the radio is live */
#lm-bd-pop-ctype .lm-bd-pop-item:hover .lm-bd-pop-check,
#lm-bd-pop-tier .lm-bd-pop-item:hover .lm-bd-pop-check {
  border-color: var(--bd-muted-2, #94a3b8);
}
.lm-bd-clear-link {
  /* v2.2d — visible bordered button instead of link-like text.
     Matches the .lm-bd-btn-primary footprint (height-wise) so both
     buttons in .lm-bd-pop-foot line up evenly. */
  background: var(--bd-bg);
  border: 1px solid var(--bd-border);
  color: var(--bd-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: var(--bd-r-btn);
  transition: background 120ms, border-color 120ms, color 120ms;
}
.lm-bd-clear-link:hover {
  background: var(--bd-surface-2);
  border-color: #cbd5e1;
  color: var(--bd-text);
}
.lm-bd-btn-primary {
  background: var(--bd-client);
  color: #fff;
  border: 1px solid var(--bd-client);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--bd-r-btn);
  cursor: pointer;
  transition: background 120ms;
}
.lm-bd-btn-primary:hover { background: var(--bd-client-strong); }

/* Checkbox option (industries multi-select) */
.lm-bd-check-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--bd-text);
  transition: background 120ms;
}
.lm-bd-check-opt:hover { background: var(--bd-surface-2); }
.lm-bd-check-opt input { position: absolute; opacity: 0; pointer-events: none; }
.lm-bd-check-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--bd-border);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--bd-bg);
  color: transparent;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.lm-bd-check-opt input:checked ~ .lm-bd-check-box {
  background: var(--bd-client);
  border-color: var(--bd-client);
  color: #fff;
}
.lm-bd-check-label { flex: 1; }

/* ====================================================================
   v2.2 — Location picker (continent ▸ country, Stage 1).
   Structurally mirrors /people's .dc-loc-* picker but namespaced to
   .lm-bd-loc-* so the two pickers stay independent. Country counts come
   from LMBrandDirectory::get_location_tree() which excludes the active
   country filter from its WHERE — so picking Germany doesn't zero
   France's count.
==================================================================== */
.lm-bd-loc-list {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lm-bd-loc-region {
  border-radius: 6px;
}
.lm-bd-loc-region-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 0;
}
.lm-bd-loc-region-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 6px 8px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--bd-text);
  cursor: pointer;
  text-align: left;
  transition: background 120ms;
}
.lm-bd-loc-region-toggle:hover { background: var(--bd-surface-2); }
.lm-bd-loc-region-chev-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.lm-bd-loc-region-chev {
  color: var(--bd-muted);
  transition: transform 150ms;
  transform: rotate(-90deg);
}
.lm-bd-loc-region.is-open .lm-bd-loc-region-chev {
  transform: rotate(0deg);
}
.lm-bd-loc-region-name { flex: 1; }
.lm-bd-loc-count {
  color: var(--bd-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.lm-bd-loc-select-all {
  background: transparent;
  border: none;
  color: var(--bd-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: lowercase;
  transition: background 120ms, color 120ms;
}
.lm-bd-loc-select-all:hover {
  background: var(--bd-surface-2);
  color: var(--bd-client-text);
}
.lm-bd-loc-region-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 22px; /* indent under the chevron */
  padding-bottom: 4px;
}
.lm-bd-loc-region-body[hidden] { display: none; }
.lm-bd-loc-country {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--bd-text);
  transition: background 120ms;
  position: relative;
}
.lm-bd-loc-country:hover { background: var(--bd-surface-2); }
.lm-bd-loc-country input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lm-bd-loc-check-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--bd-border);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--bd-bg);
  color: transparent;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.lm-bd-loc-country input:checked ~ .lm-bd-loc-check-box {
  background: var(--bd-client);
  border-color: var(--bd-client);
  color: #fff;
}
.lm-bd-loc-flag {
  /* Flag emoji — keep rectangular per design rules (no border-radius). */
  font-size: 16px;
  line-height: 1;
  flex: none;
}
.lm-bd-loc-country-name { flex: 1; }
.lm-bd-loc-empty {
  padding: 16px 12px;
  color: var(--bd-muted);
  font-size: 13px;
  text-align: center;
}

/* ====================================================================
   Result count strip  (count left · view toggle right)
==================================================================== */
.lm-bd-result-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--bd-muted);
  padding: 0 4px;
}
.lm-bd-result-count strong { color: var(--bd-text); font-weight: 600; }
.lm-bd-count-dot { margin: 0 4px; color: var(--lm-muted-2, #94a3b8); }
/* "Y with active casting calls" — clickable shortcut that filters the
   grid to brands with `page_active_casting_calls > 0`. Plain text-like
   button by default (preserves the previous inline-text look); active
   state fills with the brand-primary accent for clear feedback. */
.lm-bd-count-casting-btn {
  display: inline;
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 8px;
  border-radius: 999px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lm-bd-count-casting-btn:hover {
  background: var(--bd-client-soft, #eef5f6);
  border-color: var(--bd-client-soft-2, #cfe1e4);
}
.lm-bd-count-casting-btn.is-active {
  background: var(--bd-client);            /* matches "View Profile" CTA */
  color: #fff;
  border-color: var(--bd-client);
}
.lm-bd-count-casting-btn.is-active span[data-bd-count-casting] {
  color: #fff;
}
.lm-bd-count-casting-btn.is-active:hover {
  background: var(--bd-client-strong);
  border-color: var(--bd-client-strong);
}

/* Result-strip right cluster — "All my brands" shortcut + view toggle. */
.lm-bd-result-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.lm-bd-mine-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bd-bg, #fff);
  border: 1px solid var(--bd-border, #e2e8f0);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bd-text, #0f172a);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.lm-bd-mine-btn:hover {
  background: var(--bd-client-soft, #eef5f6);
  border-color: var(--bd-client-soft-2, #cfe1e4);
}
.lm-bd-mine-btn.is-active {
  background: var(--bd-client);
  border-color: var(--bd-client);
  color: #fff;
}
.lm-bd-mine-btn.is-active:hover {
  background: var(--bd-client-strong);
  border-color: var(--bd-client-strong);
}
.lm-bd-mine-btn svg { flex: none; }
.lm-bd-mine-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--bd-text-2, #475569);
  background: var(--bd-surface-2, #f1f5f9);
  border-radius: 999px;
  margin-left: 2px;
}
.lm-bd-mine-btn.is-active .lm-bd-mine-count {
  color: var(--bd-client);
  background: #fff;
}

/* ── v2.2 — view-mode toggle (List / Grid) ── */
.lm-bd-view-toggle {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--bd-border);
  border-radius: var(--bd-r-btn);
  background: var(--bd-surface);
}
.lm-bd-view-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--bd-muted);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.lm-bd-view-btn:hover { color: var(--bd-text); }
.lm-bd-view-btn.is-active {
  background: var(--bd-client);
  color: #fff;
}

/* ====================================================================
   Main results — list (default) + grid view modes
==================================================================== */
.lm-bd-results { display: flex; flex-direction: column; gap: 18px; }
/* shared fade used when JS swaps between view modes / filter results */
.lm-bd-results-inner { transition: opacity 200ms ease; }
.lm-bd-results.is-switching .lm-bd-results-inner { opacity: 0; }

/* grid view — 2 cards per row */
.lm-bd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* ====================================================================
   List view — 3-line rows, generous spacing (the default view)
==================================================================== */
.lm-bd-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* v2.2n — Card uses the lighter hover surface as its permanent
   background, so every row reads "hover-lit" by default. Border is
   always visible; hover just adds a soft shadow lift. */
.lm-bd-list-row {
  background: var(--bd-surface);
  border: 1px solid var(--bd-border);
  border-radius: var(--bd-r-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--bd-shadow-sm);
  transition: border-color 120ms, box-shadow 120ms;
}
.lm-bd-list-row:hover {
  border-color: #dbe2ea;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.05);
}

/* Line 1 — logo + (name / location stacked) + actions.
   align-items:center so the name+location block is vertically centred
   against the 60px logo; the actions cluster opts out (align-self) and
   stays pinned to the top-right. */
.lm-bd-list-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lm-bd-list-logo {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--bd-border);
  background: var(--bd-bg);
  overflow: hidden;
  display: grid;
  place-items: center;
  text-decoration: none;
}
.lm-bd-list-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-bd-list-logo-glyph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1d6877, #062731);
  color: #fff;
  font-weight: 700;
  font-size: 22px;
}
/* identity column — name on top, location stacked right under it.
   gap:6px gives the location a touch of air below the name. The column
   is centred against the logo via the parent's align-items:center. */
.lm-bd-list-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lm-bd-list-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lm-bd-list-name {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--bd-text);
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lm-bd-list-name:hover { color: var(--bd-client-text); }
.lm-bd-list-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  color: var(--bd-muted);
  min-width: 0;
}
.lm-bd-list-loc svg { flex: none; }
.lm-bd-list-loc > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lm-bd-list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  align-self: flex-start; /* stay pinned top-right while the id column centres */
}
/* the list reuses .lm-bd-foot-btn / .lm-bd-foot-bookmark from the card —
   but here the buttons must NOT stretch (flex:1 made "View Profile →"
   too tall and wrapped the arrow). Natural width, single line. */
.lm-bd-list-actions .lm-bd-foot-btn {
  flex: none;
  white-space: nowrap;
}

/* Line 2 — meta row. v2.2 list-tweak: NOT indented — the meta row and
   the description line up flush-left with the logo (same left edge),
   per UX feedback. Starts with the industry; location is on Line 1. */
.lm-bd-list-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: var(--bd-muted);
  line-height: 1.5;
}
.lm-bd-list-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.lm-bd-list-meta-item strong { color: var(--bd-text); font-weight: 600; }
.lm-bd-list-meta-sep { color: var(--lm-muted-2, #94a3b8); }
.lm-bd-list-casting svg { flex: none; }
/* v2.2l — list-meta industry/ctype pills sized to match the casting-calls
   pill alongside them (font-size 11px, padding 4px 10px). Was 10px/2px7px
   which made them visibly shorter than the casting pill. */
.lm-bd-list-meta .lm-bd-pill { font-size: 11px; padding: 4px 10px; }
/* Stats now live inside the meta row — pushed to the right, no top margin, kept on one line. */
.lm-bd-list-meta .lm-bd-list-stats { margin-top: 0; margin-left: auto; flex-wrap: nowrap; white-space: nowrap; }

/* Line 3 — description */
.lm-bd-list-bio {
  /* v2.2i — bumped from 13 → 14px (better read at row width) and locked
     to TWO lines via line-clamp + min-height so short and long blurbs
     line up on the row below. Lives between meta and events now. */
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--bd-text-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.5em * 2);
}

/* ── Main-grid brand card — content-focused, no cover banner ── */
/* v2.2n — Card uses the lighter hover surface as its permanent
   background, so every card always looks "hover-lit". Border stays
   visible (it's the rounded ring); hover adds a soft shadow lift. */
.lm-bd-card {
  background: var(--bd-surface);
  border: 1px solid var(--bd-border);
  border-radius: var(--bd-r-card);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--bd-shadow-sm);
  transition: border-color 120ms, box-shadow 120ms;
  position: relative;
  /* v2.2i fix — without min-width:0 a card with long event-pill nowrap
     content would force itself wider than its grid track, pushing the
     2-column layout outside the .lm-bd-main column and overlapping the
     Premium sidebar. */
  min-width: 0;
}
/* v2.2g — Premium grid card: golden border matching the sidebar accent.
   Applied when the user filters by tier=Premium and the brand's admin
   is on package 8 + subscribed (= is_premium in the adapted card).
   Also used by .lm-bd-list-row when rendered in list view. */
.lm-bd-card.is-premium,
.lm-bd-list-row.is-premium {
  border-color: var(--bd-gold, #C6A15B);
  box-shadow: 0 1px 2px rgba(198,161,91,.12), 0 8px 24px rgba(198,161,91,.10);
  background: linear-gradient(180deg, rgba(198,161,91,.04) 0%, var(--bd-surface) 60%);
}
.lm-bd-card.is-premium:hover,
.lm-bd-list-row.is-premium:hover {
  border-color: var(--bd-gold, #C6A15B);
  box-shadow: 0 2px 4px rgba(198,161,91,.16), 0 12px 32px rgba(198,161,91,.14);
}
.lm-bd-card:hover { border-color: #dbe2ea; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.05); }
/* v2.1 — the card is an <article>; the body is an inner block-link to
   /pages/{slug}, the footer buttons sit outside it so their clicks
   don't navigate. */
.lm-bd-card-body {
  display: flex;
  flex-direction: column;
  /* v2.2j — even tighter gap (was 8): header → bio → events should feel
     like one cluster, not three stacked blocks.
     v2.2l — anchor shrinks to its content (no flex:1); the extras
     sibling carries the flex:1 instead so the footer still pins to the
     bottom of the card without creating dead space between bio and
     events on stats-less cards. */
  gap: 6px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
/* v2.2i — interactive content (events toggle, stats) lives in a sibling
   .lm-bd-card-body-extras OUTSIDE the body anchor so the <button> inside
   doesn't violate HTML5 (which would auto-close the <a> early and break
   the grid layout). Same vertical rhythm as the body block. */
.lm-bd-card-body-extras {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* v2.2j — was 8px, dropped to match the in-anchor gap so the visual
     rhythm is uniform across the anchor boundary. */
  margin-top: 6px;
  min-width: 0;
  /* v2.2l — extras grow to fill the card so the footer (a sibling of
     this block) stays pinned to the bottom on every card, no matter
     how much content is in the row. Content inside extras stays
     top-aligned via padding-bottom: 0 on the last child; the empty
     space falls AFTER stats, never between bio and events. */
  flex: 1;
}
.lm-bd-card-body-extras:empty {
  /* When there's no extras content, this block still occupies the
     remaining vertical space so the footer stays at the bottom. */
  display: block;
  flex: 1;
  margin-top: 0;
}
.lm-bd-card-header { display: flex; align-items: flex-start; gap: 14px; }
.lm-bd-card-logo {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  background: var(--bd-bg);
  border: 1px solid var(--bd-border);
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  align-self: start;
}
.lm-bd-card-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-bd-card-logo-glyph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1d6877, #062731);
  color: #fff;
  font-weight: 700;
  font-size: 24px;
}
.lm-bd-card-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
.lm-bd-card-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lm-bd-card-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--bd-text);
  line-height: 1.2;
}
.lm-bd-shield {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--bd-client);
  color: #fff;
  flex: none;
}
.lm-bd-shield svg { width: 11px; height: 11px; }
.lm-bd-tier {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
}
.lm-bd-tier-business {
  background: var(--bd-surface);
  color: var(--bd-text-2);
  border-color: var(--bd-border);
}
.lm-bd-tier-verified {
  background: var(--bd-primary-soft);
  color: var(--bd-primary-text);
  border-color: var(--bd-primary-soft-2);
}
.lm-bd-tier-premium {
  /* v2.2l revert — back to dark-navy badge with cream text (the gold/black
     variant is on the row-2 active filter pill instead, see below). */
  background: #0f172a;
  color: #f5deb3;
  border-color: #0f172a;
  position: relative;
  padding-left: 16px;
}
.lm-bd-tier-premium::before {
  /* v2.2l — combine translate + rotate into ONE transform so the diamond
     is reliably centred vertically. The previous `rotate: 45deg` property
     was applied after transform: translateY(-50%) and some browsers
     reset the translate, dropping the diamond ~1-2px below the baseline. */
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #f5deb3;
  transform: translateY(-50%) rotate(45deg);
}
.lm-bd-card-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--bd-muted);
}
.lm-bd-card-loc svg { color: var(--bd-muted); flex: none; }
/* country flag — sits AFTER the country name.
   Sngine's twemoji swaps the emoji character for an <img class="emoji">
   loaded from an external CDN. Two things matter:
   1. give the <img> a FIXED height so the box doesn't jump/reflow while
      the CDN image is still loading (this is the "jumping flag" fix);
   2. zero the border-radius so the flag stays rectangular. */
.lm-bd-flag {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  line-height: 1;
}
.lm-bd-flag .emoji,
.lm-bd-flag img {
  height: 13px !important;
  width: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  display: inline-block;
  vertical-align: middle;
}
.lm-bd-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--bd-surface);
  color: var(--bd-text-2);
  border: 1px solid var(--bd-border);
}
.lm-bd-pill-more { background: transparent; border-style: dashed; color: var(--bd-muted); }

/* v2.2e — Industry pill: briefcase icon (same SVG as the Industries
   filter chip) prefixes the label so the role of the pill reads at a
   glance. Icon inherits text colour, so dark/light themes follow. */
.lm-bd-pill-industry { gap: 5px; }
.lm-bd-pill-industry svg { color: var(--bd-muted); flex: none; }

/* v2.2f — Company-type pill: building icon (same as the Company type
   filter chip). Visually paired with the industry pill but slightly
   lighter so the eye lands on the industry first. */
.lm-bd-pill-ctype { gap: 5px; }
.lm-bd-pill-ctype svg { color: var(--bd-muted); flex: none; }
/* v2.1 card-tweaks — Row 3: all industry chips (iGaming first) on their
   own line, just below the location. The "New" marker shares this line
   when the brand has no booking history. */
.lm-bd-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 3px; /* a touch more breathing room below the location */
}
.lm-bd-card-tags .lm-bd-pill { font-size: 10px; padding: 2px 7px; }
/* "New" marker on a main-grid card — green, rectangular, light fill
   (distinct from the rounded grey .lm-bd-stat-new used in the sidebar). */
.lm-bd-new-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--bd-primary-soft);
  color: var(--bd-primary-text);
  border: 1px solid var(--bd-primary-soft-2);
}
.lm-bd-card-bio {
  margin: 0;
  /* v2.2i — line-clamp:2 (was 3) so the card stays compact. min-height
     removed: if the description is a single line, events stick close to
     the bio instead of an empty 2nd line creating dead space. */
  font-size: 14px;
  color: var(--bd-text-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* v2.1 card-tweaks — Hiring now + casting calls share one flex line. */
.lm-bd-card-activity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* v2.2k — Casting Calls pill: now carries the pulsing green dot that
   used to live on the (removed) Hiring-now pill. Same primary-green
   palette so the "actively engaged" signal stays consistent. */
.lm-bd-casting-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bd-primary-soft);
  color: var(--bd-primary-text);
  border: 1px solid var(--bd-primary-soft-2);
}
.lm-bd-casting-pill svg { flex: none; }
.lm-bd-hiring-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bd-primary-soft);
  color: var(--bd-primary-text);
  border: 1px solid var(--bd-primary-soft-2);
}
.lm-bd-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bd-primary);
  box-shadow: 0 0 0 0 rgba(15,111,79,.55);
  animation: lm-bd-pulse 1.8s ease-out infinite;
}
@keyframes lm-bd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(15,111,79,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(15,111,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(15,111,79,0); }
}

/* v2.2i — Icon-only Hiring indicator (Premium sidebar). Renders just the
   pulsing green dot. v2.2j: replaced the slow native title= tooltip with
   a CSS pseudo-element tooltip that appears instantly on hover.
   data-tooltip attribute holds the text; the ::before/::after build the
   bubble + arrow above the dot. */
.lm-bd-hiring-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  cursor: default;
  flex: none;
  position: relative;
}
.lm-bd-hiring-dot .lm-bd-pulse {
  width: 8px;
  height: 8px;
}
.lm-bd-hiring-dot::before,
.lm-bd-hiring-dot::after {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 80ms;
  z-index: 1000;
}
.lm-bd-hiring-dot::before {
  content: attr(data-tooltip);
  transform: translateX(-50%);
  padding: 5px 9px;
  background: var(--bd-primary, #0f6f4f);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(15,111,79,.25);
}
.lm-bd-hiring-dot::after {
  content: "";
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--bd-primary, #0f6f4f);
}
.lm-bd-hiring-dot:hover::before,
.lm-bd-hiring-dot:hover::after,
.lm-bd-hiring-dot:focus::before,
.lm-bd-hiring-dot:focus::after {
  opacity: 1;
}

/* ── v2.1 — Stats line (inside body link) ── */
.lm-bd-card-stats {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--bd-muted);
  /* v2.2l — was margin-top:auto which forced stats to the card bottom
     and created a second gap above events. Tight flow instead. */
  padding-top: 0;
}
.lm-bd-card-stats strong {
  color: var(--bd-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* v2.2j — List row stats line (rating + bookings + talents), sits BELOW
   events. Same typography as the grid card stats; flows in normal order
   (no margin-top:auto since list rows aren't flex columns). */
.lm-bd-list-stats {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--bd-muted);
  margin-top: 8px;
}
.lm-bd-list-stats strong {
  color: var(--bd-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── v2.1 — Footer buttons (outside the body link) ── */
.lm-bd-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bd-border-2);
}
.lm-bd-foot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--bd-r-btn);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.lm-bd-foot-quick {
  background: var(--bd-bg);
  color: var(--bd-text);
  border: 1px solid var(--bd-border);
}
.lm-bd-foot-quick svg { width: 15px; height: 15px; opacity: .85; }
.lm-bd-foot-quick:hover { background: var(--bd-surface-2); border-color: #cbd5e1; }
.lm-bd-foot-quick:hover svg { opacity: 1; }
.lm-bd-foot-view {
    background: linear-gradient(135deg, #318b99, var(--bd-elite-bg, #154f5d));
  color: #fff;
  /* border: 1px solid var(--bd-client); */
}
.lm-bd-foot-view:hover { background: var(--bd-client-strong); }

/* v2.2h — Premium "View Profile" CTA: navy gradient + gold border + cream
   text/icon. Mirrors the Elite-tier primary button on /people Discover.
   Used in:
   • the Premium sidebar (every .lm-bd-side-card is premium by definition)
   • the grid + list views when a card has .is-premium (i.e. user filtered
     by tier=Premium and these brands are surfaced in the centre column).
*/
.lm-bd-side-card .lm-bd-foot-view,
.lm-bd-card.is-premium .lm-bd-foot-view,
.lm-bd-list-row.is-premium .lm-bd-foot-view {
  background: linear-gradient(135deg, #318b99, var(--bd-elite-bg, #0F172A));
  /* border: 1.5px solid #f5deb3; */
  /* color: #f5deb3; */
}
.lm-bd-side-card .lm-bd-foot-view:hover,
.lm-bd-card.is-premium .lm-bd-foot-view:hover,
.lm-bd-list-row.is-premium .lm-bd-foot-view:hover {
  background: linear-gradient(135deg, #273548, #131c2e);
  border-color: #e0b966;
  color: #f5deb3;
}
.lm-bd-foot-bookmark {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--bd-r-btn);
  background: var(--bd-bg);
  border: 1px solid var(--bd-border);
  color: var(--bd-muted);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.lm-bd-foot-bookmark svg { width: 16px; height: 16px; }
.lm-bd-foot-bookmark:hover { background: var(--bd-surface-2); color: var(--bd-text); }
.lm-bd-foot-bookmark.is-saved {
  background: var(--bd-client-soft);
  border-color: var(--bd-client-soft-2);
  color: var(--bd-client-text);
}
.lm-bd-foot-bookmark.is-saved svg { fill: currentColor; }

/* ====================================================================
   Quick Profile modal
==================================================================== */
.lm-bd-qp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15,23,42,.55);
  /* Re-declare the --bd-* tokens on the overlay itself. The modal is
     position:fixed and may sit outside .lm-bd-page in the DOM — without
     this, var(--bd-bg) etc. resolve to nothing and the card renders
     transparent (content bleeds through onto the page behind it). */
  --bd-bg: var(--lm-bg, #fff);
  --bd-surface: var(--lm-surface, #f8fafc);
  --bd-surface-2: var(--lm-surface-2, #f1f5f9);
  --bd-text: var(--lm-text, #0f172a);
  --bd-text-2: var(--lm-text-secondary, #475569);
  --bd-muted: var(--lm-muted, #64748b);
  --bd-border: var(--lm-border, #e2e8f0);
  --bd-border-2: var(--lm-border-2, #eef2f6);
  --bd-client: var(--lm-client, #00363f);
  --bd-client-strong: var(--lm-client-strong, #012a31);
  --bd-client-soft: var(--lm-client-soft, #eef5f6);
  --bd-client-soft-2: var(--lm-client-soft-2, #cfe1e4);
  --bd-client-text: var(--lm-client-text, #012a31);
  --bd-gold: var(--lm-gold, #C6A15B);
  --bd-gold-soft-2: var(--lm-gold-soft-2, #f5deb3);
  --bd-primary: var(--lm-primary, #0f6f4f);
  --bd-primary-soft: var(--lm-primary-soft, #f3f8f5);
  --bd-primary-soft-2: var(--lm-primary-soft-2, #dcebe2);
  --bd-primary-text: var(--lm-primary-text, #0a5439);
  --bd-r-card: 12px;
  --bd-r-btn: 8px;
}
.lm-bd-qp-overlay[hidden] { display: none; }
/* hard fallback: never let the card itself render transparent */
.lm-bd-qp-card { background: var(--bd-bg, #fff); }
.lm-bd-qp-card {
  width: min(620px, 100%);
  max-height: 88vh;
  background: var(--bd-bg);
  border: 1px solid var(--bd-border);
  border-radius: var(--bd-r-card);
  box-shadow: 0 24px 60px rgba(15,23,42,.30);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.lm-bd-qp-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.14);
  color: #fff;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: background 120ms;
}
.lm-bd-qp-close:hover { background: rgba(255,255,255,.28); }
.lm-bd-qp-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #1d6877 0%, #062731 100%);
  color: #fff;
}
/* v2.1 — larger logo (80x80), matching the main-grid / sidebar cards */
.lm-bd-qp-logo {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  flex: none;
  border: 2px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.10);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 30px;
  color: #fff;
  overflow: hidden;
}
.lm-bd-qp-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-bd-qp-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lm-bd-qp-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lm-bd-qp-name { margin: 0; font-size: 20px; font-weight: 700; color: #fff; }
.lm-bd-qp-shield {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(255,255,255,.20);
  color: #fff;
}
.lm-bd-qp-shield svg { width: 12px; height: 12px; }
.lm-bd-qp-tier.lm-bd-qp-tier { /* override dark premium badge on the hero */
  background: rgba(0,0,0,.32);
  border-color: rgba(0,0,0,.32);
}
.lm-bd-qp-loc {
  font-size: 13px;
  color: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lm-bd-qp-loc svg { flex: none; }
/* Row 3 — industry pill UNDER the location, on the dark hero. The pill
   gets a light-on-dark treatment so it reads against the gradient. */
.lm-bd-qp-inds-row { display: flex; flex-wrap: wrap; gap: 5px; }
.lm-bd-qp-primary-pill {
  background: rgba(255,255,255,.16);
  color: #fff;
  border-color: rgba(255,255,255,.22);
}
.lm-bd-qp-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lm-bd-qp-bio {
  margin: 0;
  font-size: 14px;
  color: var(--bd-text-2);
  line-height: 1.55;
}
.lm-bd-qp-block { display: flex; flex-direction: column; gap: 8px; }
.lm-bd-qp-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bd-muted);
}
/* Casting Calls label row: heading left, "Hiring now" pill right. */
.lm-bd-qp-cc-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lm-bd-qp-hiring-inline { flex: none; }
.lm-bd-qp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bd-border);
  border: 1px solid var(--bd-border);
  border-radius: 10px;
  overflow: hidden;
}
.lm-bd-qp-stat {
  background: var(--bd-bg);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.lm-bd-qp-stat .v {
  font-size: 18px;
  font-weight: 700;
  color: var(--bd-text);
  font-variant-numeric: tabular-nums;
}
.lm-bd-qp-stat .l {
  font-size: 11px;
  color: var(--bd-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.lm-bd-qp-industries { display: flex; flex-wrap: wrap; gap: 6px; }
.lm-bd-qp-calls-note { margin: 0; font-size: 13px; color: var(--bd-muted); }

/* Upcoming events — one row per event: name + place·date meta line */
.lm-bd-qp-events { display: flex; flex-direction: column; gap: 8px; }
.lm-bd-qp-event {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--bd-border);
  border-radius: 8px;
  background: var(--bd-surface);
}
.lm-bd-qp-event-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bd-text);
}
.lm-bd-qp-event-meta {
  font-size: 12px;
  color: var(--bd-muted);
}
/* Casting-call rows in the QP modal are links → /casting/{id}. */
a.lm-bd-qp-event { text-decoration: none; transition: border-color 120ms, background 120ms; }
a.lm-bd-qp-event:hover { border-color: var(--bd-client); background: var(--bd-surface-2); }
/* Past casting calls — muted, consistent with the directory card past pills
   (opacity + grayscale + hover-restore). */
.lm-bd-cc-past .lm-bd-qp-event {
  opacity: 0.65;
  filter: grayscale(40%);
  transition: opacity .2s, filter .2s, border-color 120ms, background 120ms;
}
.lm-bd-cc-past .lm-bd-qp-event:hover { opacity: 1; filter: none; }
.lm-bd-cc-past .lm-bd-qp-event-name { color: var(--bd-text-2); font-weight: 500; }
.lm-bd-cc-past .lm-bd-qp-event-meta { color: var(--bd-muted); }

/* Follow — social link chips. Icon-only round buttons. */
.lm-bd-qp-social { display: flex; flex-wrap: wrap; gap: 8px; }
.lm-bd-qp-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-decoration: none;
  background: var(--bd-surface);
  color: var(--bd-text-2);
  border: 1px solid var(--bd-border);
  transition: background 120ms, border-color 120ms, color 120ms;
}
.lm-bd-qp-social-link svg { width: 17px; height: 17px; }
.lm-bd-qp-social-link:hover {
  background: var(--bd-client-soft);
  color: var(--bd-client-text);
  border-color: var(--bd-client-soft-2);
}

.lm-bd-qp-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--bd-border);
  background: var(--bd-bg);
}
/* "Get in touch" and "View full profile" split the footer 50/50. */
.lm-bd-qp-getintouch {
  flex: 1;
  text-align: center;
  text-decoration: none;
  padding: 9px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--bd-client-text);
  background: var(--bd-bg);
  border: 1px solid var(--bd-border);
  border-radius: var(--bd-r-btn);
  transition: background 120ms;
}
.lm-bd-qp-getintouch:hover { background: var(--bd-client-soft); }
.lm-bd-qp-viewfull {
  flex: 1;
  text-align: center;
  text-decoration: none;
  padding: 10px 16px;
}

@media (max-width: 600px) {
  .lm-bd-qp-stats { grid-template-columns: repeat(2, 1fr); }
  .lm-bd-qp-hero { flex-direction: column; }
}

/* ── Load more ── */
.lm-bd-load-more-wrap {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}
.lm-bd-load-more {
  padding: 11px 24px;
  border-radius: var(--bd-r-btn);
  background: var(--bd-bg);
  border: 1px solid var(--bd-border);
  font-weight: 600;
  font-size: 14px;
  color: var(--bd-text);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.lm-bd-load-more:hover { background: var(--bd-surface-2); border-color: #cbd5e1; }
.lm-bd-load-more[disabled] { opacity: .6; cursor: default; }

/* ── Empty state ── */
.lm-bd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 48px 20px;
  color: var(--bd-muted);
}
.lm-bd-empty-icon { color: var(--lm-muted-2, #94a3b8); }
.lm-bd-empty-title { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: var(--bd-text); }
.lm-bd-empty-desc { margin: 0; font-size: 13px; max-width: 380px; }
.lm-bd-empty-btn {
  margin-top: 8px;
  padding: 9px 18px;
  border-radius: var(--bd-r-btn);
  background: var(--bd-client);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms;
}
.lm-bd-empty-btn:hover { background: var(--bd-client-strong); }

/* ====================================================================
   Premium Brands — right sticky sidebar
==================================================================== */
.lm-bd-sidebar-inner {
  background: var(--bd-surface);
  border: 1px solid #b39c63;
  border-radius: var(--bd-r-card);
  box-shadow: var(--bd-shadow-sm);
  overflow: hidden;
}
.lm-bd-sidebar-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--bd-border-2);
  background: linear-gradient(180deg, rgba(198,161,91,.07) 0%, var(--bd-surface) 100%);
  /* v2.2g — title + "View all" share one row */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lm-bd-sidebar-viewall {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #b28f4e;
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms;
}
.lm-bd-sidebar-viewall:hover { color: var(--bd-text); text-decoration: none; }
.lm-bd-sidebar-viewall svg { color: currentColor; flex: none; }
.lm-bd-sidebar-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--bd-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lm-bd-diamond {
  width: 12px;
  height: 12px;
  background: var(--bd-gold);
  rotate: 45deg;
  border-radius: 2px;
  flex: none;
}
.lm-bd-sidebar-list {
  display: flex;
  flex-direction: column;
}
/* v2.1 — large premium cards (was compact). Each card is a vertical
   block: top row (logo + identity), then chips, bio, stats, hiring,
   and a full-width View Profile button. ~360-400px tall. */
/* v2.2n — Sidebar cards adopt the same "always hover-lit" surface as
   the main grid: each card sits on --bd-surface with a thin separator
   between them. Single, calm look — no per-card hover background swap. */
.lm-bd-side-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--bd-surface);
  border-bottom: 1px solid var(--bd-border-2);
  color: inherit;
  text-decoration: none;
}
.lm-bd-side-card:last-child { border-bottom: none; }
.lm-bd-side-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.lm-bd-side-logo {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  border: 2px solid var(--bd-gold-soft-2);
  background: var(--bd-bg);
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
}
.lm-bd-side-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-bd-side-logo-glyph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1d6877, #062731);
  color: #fff;
  font-weight: 700;
  font-size: 28px;
}
.lm-bd-side-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 2px;
}
.lm-bd-side-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.lm-bd-side-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--bd-text);
  line-height: 1.2;
}
.lm-bd-side-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--bd-muted);
}
.lm-bd-side-loc svg { flex: none; }
.lm-bd-side-flag {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  line-height: 1;
}
.lm-bd-side-flag .emoji,
.lm-bd-side-flag img {
  height: 13px !important;
  width: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  display: inline-block;
  vertical-align: middle;
}
.lm-bd-side-loc span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lm-bd-side-inds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}
.lm-bd-side-inds .lm-bd-pill { font-size: 10px; padding: 2px 7px; }
.lm-bd-side-bio {
  margin: 0;
  font-size: 12.5px;
  color: var(--bd-text-2);
  line-height: 1.5;
  /* v2.2e — 3-line clamp before ellipsis (was a flat truncate:90 in PHP). */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lm-bd-side-stats {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--bd-muted);
}
.lm-bd-side-stats strong { color: var(--bd-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.lm-bd-side-hiring {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bd-primary-soft);
  color: var(--bd-primary-text);
  border: 1px solid var(--bd-primary-soft-2);
}
/* Sidebar card footer — same 3-button footer as the main-grid card, but
   the sidebar column is narrow (~300px), so tighten the buttons a touch
   and let them wrap to 2 rows if the names don't fit on one line. */
.lm-bd-side-card .lm-bd-card-foot {
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
}
.lm-bd-side-card .lm-bd-foot-btn {
  font-size: 12px;
  padding: 7px 10px;
  flex: 1 1 auto;
}
.lm-bd-side-card .lm-bd-foot-bookmark {
  width: 32px;
  height: 32px;
}
/* shared stat helpers (also used by the main grid card) */
.lm-bd-stat-dot { color: var(--lm-muted-2, #94a3b8); }
.lm-bd-stat-rating { color: var(--lm-warning, #f59e0b); }
.lm-bd-stat-rating strong { color: var(--lm-warning, #f59e0b); }
.lm-bd-stat-new {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bd-muted);
  background: var(--bd-surface-2);
  border: 1px solid var(--bd-border);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ====================================================================
   v2.2e — Upcoming events block (shared across card, list-row, sidebar).
   Mirrors /pages/{slug} brand-detail UX: first N pills inline, +N toggle
   button at the end of the row, extras revealed via JS class flip with a
   max-height transition. Colours match the brand-detail `.lm-pill.event`
   (client-soft tint, matching border, JetBrains-ish meta typography).
==================================================================== */
.lm-bd-card-events,
.lm-bd-list-events,
.lm-bd-side-events {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* v2.2j — margin-top removed; the parent flex column gap is the single
     source of vertical rhythm. Was creating double spacing on top of the
     parent gap. */
  margin-top: 0;
  font-size: 12px;
  color: var(--bd-text-2);
  min-width: 0;
}
/* v2.2f — tighter spacing in the Premium sidebar: events sit closer to
   the row above. The sidebar uses flex-direction:column with gap:10px,
   so a negative margin-top pulls events upward without affecting other
   stacked rows. Net distance ≈ 10 - 6 = 4px between desc and events. */
.lm-bd-side-events { margin-top: -6px; font-size: 11.5px; }
.lm-bd-events-icon {
  flex: none;
  color: var(--bd-client);
  margin-top: 4px; /* baseline align with the first pill row */
}
.lm-bd-events-content {
  display: flex;
  flex-direction: column;
  gap: 0;            /* no gap collapsed → row height == visible pills */
  min-width: 0;
  flex: 1;
}
/* v2.2f — single-line constraint by default: pills lay out left to right
   in one row, no wrap. Pills that overflow horizontally are hidden by JS
   (.lm-bd-event-pill.is-hidden) until the user clicks +N. On .is-expanded
   the container becomes flex-wrap:wrap and JS unhides everything, so the
   pills flow onto subsequent rows BELOW the existing one.

   v2.2g flash fix — overflow:hidden CLIPS pills that haven't been hidden
   yet so they don't visually bleed past the card while JS is mid-measure.
   The row is also visibility:hidden until JS adds .is-fitted, which
   prevents the brief pre-measure flicker on slow connections / SSR. */
.lm-bd-event-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
  /* min-height keeps the row tall enough for the icon to vertically
     centre against, even while JS hasn't measured yet (avoids a flash). */
  min-height: 24px;
  overflow: hidden;
  visibility: hidden;
}
.lm-bd-event-pills.is-fitted { visibility: visible; }
.lm-bd-event-pills.is-expanded {
  /* v2.2o — On expand: keep flex layout with wrap so the first line
     (visible pill + +N toggle) stays put. Revealed pills are forced
     onto their own rows below via a 100%-wide flex-break wrapper
     injected by JS (see fitEventsRow). overflow:visible so wrapped
     rows aren't clipped. */
  flex-wrap: wrap;
  overflow: visible;
}
.lm-bd-event-pill.is-hidden { display: none; }
.lm-bd-event-pills.is-expanded .lm-bd-event-pill.is-hidden {
  /* Revealed pills hug content width — no stretch to container edge. */
  display: inline-flex;
  flex: 0 0 auto;
  max-width: 100%;
}
/* Line-break sibling: zero-height, 100%-wide flex item. Sits between
   the first row and each revealed pill so flex-wrap pushes everything
   after it onto a new row. JS inserts these elements when expanding. */
.lm-bd-event-pills .lm-bd-event-break {
  flex: 0 0 100%;
  width: 100%;
  height: 0;
  display: none;
}
.lm-bd-event-pills.is-expanded .lm-bd-event-break {
  display: block;
}
/* v2.2o — When a visible pill needs to share its row with the +N
   toggle but doesn't have room, JS tags it .is-clipped AND sets an
   inline max-width = leftover room. The event-name truncates with
   an ellipsis. Guarantees +N stays on the same line as the pill. */
.lm-bd-event-pill.is-clipped {
  min-width: 0;
  overflow: hidden;
}
.lm-bd-event-pill.is-clipped .lm-bd-event-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lm-bd-event-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bd-client-soft);
  color: var(--bd-client-text);
  border: 1px solid var(--bd-client-soft-2);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.lm-bd-event-pill svg { color: var(--bd-client); flex: none; }
.lm-bd-event-name { font-weight: 600; }
.lm-bd-event-sep { color: var(--bd-muted-2, #94a3b8); font-weight: 400; }
.lm-bd-event-date { color: var(--bd-text-secondary, var(--bd-text-2)); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Past casting calls (.lm-bd-cc-past row) — muted grey so concluded calls
   read as secondary next to the current (open) row. Uses theme-adaptive
   --bd-* vars so it greys correctly in dark mode too. */
.lm-bd-cc-past .lm-bd-event-pill {
  background: var(--bd-surface-2);
  color: var(--bd-text-2);
  border-color: var(--bd-border);
  opacity: 0.65;
  filter: grayscale(40%);
  font-size: 11px;
  transition: opacity .2s, filter .2s;
}
/* Hover restores a past pill to full so it reads as clickable. */
.lm-bd-cc-past .lm-bd-event-pill:hover {
  opacity: 1;
  filter: none;
}
.lm-bd-cc-past .lm-bd-event-pill svg,
.lm-bd-cc-past .lm-bd-events-icon { color: var(--bd-muted); }
.lm-bd-cc-past .lm-bd-event-name { color: var(--bd-text-2); }
.lm-bd-cc-past .lm-bd-event-date { color: var(--bd-muted); }

/* Toggle button: same chip family but transparent until hovered. Chevron
   rotates 180° when expanded; the button itself stays clickable to
   collapse. */
.lm-bd-events-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid var(--bd-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--bd-text-secondary, var(--bd-text-2));
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  white-space: nowrap;
}
.lm-bd-events-toggle:hover {
  background: var(--bd-surface);
  border-color: var(--bd-client);
  color: var(--bd-client-text);
}
.lm-bd-events-toggle svg {
  color: var(--bd-muted);
  transition: transform 220ms ease;
}
.lm-bd-events-toggle:hover svg { color: var(--bd-client); }
.lm-bd-events-toggle.is-expanded svg { transform: rotate(180deg); }
.lm-bd-events-toggle-count { font-variant-numeric: tabular-nums; }

/* v2.2f — extras no longer live in a separate sibling container. The
   formerly-hidden pills sit inside the same .lm-bd-event-pills and are
   shown via .is-expanded → wrap (see rules above). */

/* Sidebar size modifier — smaller pills + tighter padding so events fit
   in the narrow Premium column. */
.lm-bd-side-events .lm-bd-event-pill {
  padding: 2px 7px;
  font-size: 11px;
  gap: 4px;
}
.lm-bd-side-events .lm-bd-events-toggle {
  padding: 2px 7px;
  font-size: 10.5px;
}

/* Hiring-now pill — small variant for the Premium sidebar id row, where
   it shares a flex line with the industry pill + the New tag. */
.lm-bd-hiring-pill-sm {
  font-size: 10px;
  padding: 2px 8px;
  letter-spacing: .04em;
  gap: 5px;
}
.lm-bd-hiring-pill-sm .lm-bd-pulse {
  width: 5px;
  height: 5px;
}

.lm-bd-sidebar-seeall {
  display: block;
  padding: 12px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  /* gold, matching the "View all" link at the top of the premium sidebar */
  color: #b28f4e;
  background: var(--bd-surface);
  border-top: 1px solid var(--bd-border-2);
  text-decoration: none;
  transition: background 120ms, color 120ms;
}
.lm-bd-sidebar-seeall:hover { background: var(--bd-surface-2); color: var(--bd-gold, #C6A15B); }
.lm-bd-sidebar-empty {
  margin: 0;
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--bd-muted);
}

/* ====================================================================
   Responsive
==================================================================== */
/* Filter-row gap is tight (2px) by default so all chips fit one row on
   a 14" MacBook (≈1512px viewport) — at a wider gap "Hiring now" wraps
   to a 2nd line. Only external/large monitors (1600px+) get the roomier
   10px gap, where there's genuinely spare width. */
@media (min-width: 1600px) {
  .lm-bd-filter-row { gap: 10px; }
}
@media (max-width: 1024px) {
  /* sidebar drops below the grid; no longer sticky */
  .lm-bd-layout { grid-template-columns: 1fr; }
  .lm-bd-sidebar { position: static; }
}
@media (max-width: 767px) {
  /* Page shell — full bleed, no side margins */
  .lm-bd-page { padding: 0 0 80px; max-width: 100%; width: 100%; margin: 0; overflow-x: clip; background: var(--bd-bg); }
  .lm-bd-main { background: var(--bd-bg); }

  /* Single-column layout */
  .lm-bd-layout { grid-template-columns: 1fr; gap: 0; }
  .lm-bd-main { order: 1; min-width: 0; overflow-x: clip; background: var(--bd-bg); }
  .lm-bd-sidebar { position: static; order: 3; min-width: 0; padding: 16px 12px 20px; }

  /* Hide view toggle */
  .lm-bd-view-toggle { display: none !important; }

  /* Result count */
  .lm-bd-result-count { padding: 8px 12px 4px; }

  /* Filter bar */
  .lm-bd-filterbar { border-radius: 0; border-left: none; border-right: none; padding: 10px 0; }
  .lm-bd-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 12px 4px;
    gap: 8px;
  }
  .lm-bd-filter-row::-webkit-scrollbar { display: none; }
  .lm-bd-chip { flex: 0 0 auto; white-space: nowrap; }
  .lm-bd-toggle { flex: 0 0 auto; white-space: nowrap; }
  .lm-bd-filter-row2 { flex-direction: column; align-items: stretch; padding: 0 12px 8px; }
  .lm-bd-filter-row2-right { justify-content: space-between; }
  .lm-bd-pop { left: 8px; right: 8px; min-width: 0; max-width: none; }

  .lm-bd-grid { grid-template-columns: 1fr; }

  /* List results — card style with gap and rounded borders */
  .lm-bd-results { gap: 10px; padding: 0 12px; }
  .lm-bd-list-row {
    padding: 14px 12px;
    border-radius: var(--bd-r-card);
    border: 1px solid var(--bd-border);
    margin-bottom: 0;
    overflow: hidden;
    max-width: 100%;
  }
  .lm-bd-list-row:first-child { border-top: 1px solid var(--bd-border); }

  /* Logo — same size as premium sidebar */
  .lm-bd-list-logo { width: 72px; height: 72px; border-radius: 14px; flex: none; }
  .lm-bd-list-logo-glyph { font-size: 26px; }

  /* Name */
  .lm-bd-list-name { font-size: 15px; white-space: normal; }

  /* Stats */
  .lm-bd-list-stats { font-size: 13.5px; gap: 6px; margin-top: 6px; }

  /* Events — constrain width so JS fitEventsRow measures correctly */
  .lm-bd-list-events { min-width: 0; overflow: hidden; }
  .lm-bd-events-content { min-width: 0; overflow: hidden; flex: 1; }

  /* Actions — own row below logo+name */
  .lm-bd-list-head { flex-wrap: wrap; align-items: center; gap: 10px; }
  .lm-bd-list-id { flex: 1; min-width: 0; align-self: center; }
  .lm-bd-list-actions { flex: 0 0 100%; width: 100%; order: 10; margin-top: 2px; }
  .lm-bd-list-actions .lm-bd-foot-btn { flex: 1; min-height: 42px; justify-content: center; font-size: 13px; white-space: nowrap; }
  .lm-bd-list-actions .lm-bd-foot-bookmark { flex: 0 0 44px; width: 44px; height: 44px; }

  /* Premium sidebar — vertical stack */
  .lm-bd-sidebar-inner { border-radius: var(--bd-r-card); overflow: visible; }
  .lm-bd-sidebar-list { flex-direction: column; overflow-x: visible; gap: 0; }
  .lm-bd-side-card { min-width: 0; max-width: none; width: 100%; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-bd-pulse { animation: none; }
  .lm-bd-results-inner { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Dark theme — most --bd-* tokens flow from --lm-* (which dark-mode
   already redefines globally), but several --bd-client-* aliases were
   stuck on light defaults. Plus a handful of LITERAL colour values
   (white fade gradients, white rgba bookmark backdrop, primary-text
   links on dark surface) need explicit dark fallbacks. v2.2m fixes
   everything that became invisible / illegible on /pages dark mode.
   ─────────────────────────────────────────────────────────────────── */
html[data-lm-theme="dark"] .lm-bd-page {
  /* v2.2m — master dark teal #318b99 (matches .lm-brand-page). */
  --bd-client:        #318b99;
  --bd-client-strong: #45a8b8;
  --bd-client-soft:   rgba(49,139,153,.22);
  --bd-client-soft-2: rgba(49,139,153,.42);
  --bd-client-text:   #b5d8e0;
  /* Primary-soft (used by hiring/casting pills) — same idea. */
  --bd-primary-soft:   rgba(46,161,111,.16);
  --bd-primary-soft-2: rgba(46,161,111,.32);
  --bd-primary-text:   #7adfb3;
}

/* Logo glyph fallback (light defaulted to a teal gradient that washed
   out against dark surfaces). */
html[data-lm-theme="dark"] .lm-bd-card-logo-glyph,
html[data-lm-theme="dark"] .lm-bd-side-logo-glyph {
  background: linear-gradient(135deg, #2a4a52, #14242a);
}

/* v2.2n — Hover border on dark theme. The light-theme #dbe2ea reads
   as bright white against dark surfaces; use a muted steel tone that
   stays subtle while still signaling the hit-target. */
html[data-lm-theme="dark"] .lm-bd-card:hover,
html[data-lm-theme="dark"] .lm-bd-list-row:hover {
  border-color: #3a4450;
}

/* Premium tier badge (navy slab on light → translucent-cream on dark). */
html[data-lm-theme="dark"] .lm-bd-tier-premium {
  background: rgba(245,222,179,.10);
  color: #f5deb3;
  border-color: rgba(245,222,179,.28);
}

/* Chip hover border on row 1 — light hardcoded #cbd5e1 was too bright. */
html[data-lm-theme="dark"] .lm-bd-chip:hover { border-color: var(--bd-muted, #6e7681); }

/* Filter-row-2 right-edge fade gradient — was always white. */
html[data-lm-theme="dark"] .lm-bd-filter-row2-left::after {
  background: linear-gradient(to right, rgba(13,17,23,0) 0%, var(--bd-bg) 75%, var(--bd-bg) 100%);
}

/* See all premium link in the sidebar — was --bd-client-text on
   --bd-surface, both light defaults. Now uses the dark teal accent. */
html[data-lm-theme="dark"] .lm-bd-sidebar-seeall {
  color: #d4a93f;
  background: rgba(127,199,210,.06);
  border-top-color: var(--bd-border-2);
}
html[data-lm-theme="dark"] .lm-bd-sidebar-seeall:hover {
  background: rgba(127,199,210,.14);
}
html[data-lm-theme="dark"] .lm-bd-sidebar-viewall {
  color: #d4a93f;
}
html[data-lm-theme="dark"] .lm-bd-sidebar-viewall:hover {
  color: #f5deb3;
}

/* Banner-overlay bookmark on brand detail — dark theme override lives
   in lm-brand.css (the stylesheet for the brand detail page), right
   next to the default rules. Putting it here had no effect because
   lm-brand-directory.css doesn't load on /pages/{slug}. */

/* Events row icon (↗ upcoming, ↙ past) — --lm-muted in dark renders
   close to background; bump the contrast. Past variant stays slightly
   dimmer to keep the visual hierarchy. */
html[data-lm-theme="dark"] .lm-bd-events-icon,
html[data-lm-theme="dark"] .lm-events-row-icon {
  color: #b3bcc4;
}
html[data-lm-theme="dark"] .qi-row.events[data-events-row="past"] .lm-events-row-icon {
  color: #8a8f96;
}

/* Event / date pills inside cards + brand detail — the light variant
   used a near-white background which became "white blocks" on dark. */
html[data-lm-theme="dark"] .lm-bd-event-pill,
html[data-lm-theme="dark"] .lm-pill.event {
  background: rgba(127,199,210,.12);
  color: #cfe1e4;
  border-color: rgba(127,199,210,.28);
}
html[data-lm-theme="dark"] .lm-bd-event-pill svg,
html[data-lm-theme="dark"] .lm-pill.event svg {
  color: #7fc7d2;
}
html[data-lm-theme="dark"] .lm-bd-event-sep,
html[data-lm-theme="dark"] .lm-pill.event .lm-pill-event-sep {
  color: var(--bd-muted-2, #6e7681);
}
html[data-lm-theme="dark"] .lm-bd-event-date,
html[data-lm-theme="dark"] .lm-pill.event .lm-pill-event-date {
  color: #b3bcc4;
}
/* +N toggle button — keep the outline button shape but readable on dark. */
html[data-lm-theme="dark"] .lm-bd-events-toggle,
html[data-lm-theme="dark"] .lm-events-toggle {
  background: transparent;
  border-color: var(--bd-border, #2a3038);
  color: #b3bcc4;
}
html[data-lm-theme="dark"] .lm-bd-events-toggle:hover,
html[data-lm-theme="dark"] .lm-events-toggle:hover {
  background: rgba(127,199,210,.10);
  border-color: var(--bd-client, #5fa6b1);
  color: var(--bd-client-text, #cfe1e4);
}

/* Quick Profile modal footer — dark theme */
html[data-lm-theme="dark"] .lm-bd-qp-foot {
  background: var(--lm-bg, #1e252b);
  border-top-color: var(--lm-border, #2d3748);
}
html[data-lm-theme="dark"] .lm-bd-qp-getintouch {
  color: #7fc7d2;
}
html[data-lm-theme="dark"] .lm-bd-qp-getintouch:hover {
  background: rgba(127,199,210,.12);
  color: #b5d8e0;
}

/* ============================================================
   Dark theme — lift the "black" buttons/pills.
   The card foot buttons (bookmark, Preview) and the top filter chips use
   var(--bd-bg), which in dark resolves to the page-darkest colour, so they
   blended into the cards as black slabs. Raise them to a visible elevated
   surface with a readable border (one step above the card). View Brand stays
   teal; open/active filter states stay green — only the inactive fills change.
   ============================================================ */
html[data-lm-theme="dark"] .lm-bd-foot-bookmark,
html[data-lm-theme="dark"] .lm-bd-foot-quick,
html[data-lm-theme="dark"] .lm-bd-chip,
html[data-lm-theme="dark"] .lm-bd-toggle:not(.is-on) {
  background: var(--lm-surface-2, #222a33);
  border-color: var(--lm-border, #2a3038);
  color: var(--lm-text, #e6e8eb);
}
html[data-lm-theme="dark"] .lm-bd-foot-bookmark:hover,
html[data-lm-theme="dark"] .lm-bd-foot-quick:hover,
html[data-lm-theme="dark"] .lm-bd-chip:hover,
html[data-lm-theme="dark"] .lm-bd-toggle:not(.is-on):hover {
  background: var(--lm-surface, #1c232c);
  border-color: var(--lm-muted-2, #6e7681);
}
/* "Hiring now" pill in dark theme — same elevated surface as the filter
   chips (Location / Company Type / Industries), not a black slab. */
html[data-lm-theme="dark"] .lm-bd-hiring-pill,
html[data-lm-theme="dark"] .lm-bd-hiring-pill-sm {
  background: var(--lm-surface-2, #222a33);
  border-color: var(--lm-border, #2a3038);
}