/* public/styles/leaderboard.css */
.leaderboard-page{display:flex;flex-direction:column;color:var(--text-primary)}
/* Dossier-continuation mode (View Full Profile from a leaderboard row):
   let the column wrapper scroll as one unit instead of each card having its
   own scroll — otherwise flex-1 splits height 50/50 with a double scrollbar. */
body.leaderboard-dossier-mode #leaderboardPage{flex:none!important;overflow:visible!important}
body.leaderboard-dossier-mode #messagesContainer{flex:none!important;overflow:visible!important}
body.leaderboard-dossier-mode #lbColWrapper{overflow-y:auto}
/* Same layout treatment for synthetic roster lists (Top LOs at <lender> /
   Top Agents at <office>) when the user asks a question via the message
   box and the response renders in the chat stream below the roster. */
body.roster-question-mode #pinnedPage{flex:none!important;overflow:visible!important}
body.roster-question-mode #messagesContainer{flex:none!important;overflow:visible!important}
body.roster-question-mode #rosterColWrapper{overflow-y:auto}
.lb-controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-secondary)}
.lb-categories{display:flex;flex-wrap:wrap;gap:.5rem}
.lb-category-btn{padding:.55rem 1rem;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-secondary);border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .15s}
.lb-category-btn:hover{background:var(--bg-quaternary);color:var(--text-primary)}
.lb-category-btn--active{background:hsl(var(--primary));color:#fff;border-color:hsl(var(--primary))}
/* Bonzo/Datacenter/Elevate/Hiddenthings themes apply a blanket
   "button:not(.opp-card-why-toggle)" override at specificity (0,2,1) with
   !important, which wipes out the accent. Match that specificity (button +
   two classes) and !important so the accent wins at runtime. */
.leaderboard-page button.lb-category-btn.lb-category-btn--active{background:hsl(var(--primary)) !important;color:#fff !important;border-color:hsl(var(--primary)) !important}
.lb-mobile-only { display: none; }
.lb-filters{display:flex;gap:.5rem;align-items:center;margin-left:auto;flex-wrap:wrap}
@media (max-width: 640px) {
  /* Mobile: category <select> fills width, Filters icon button auto-width
     to its right, sort segmented moves inside the panel below. */
  .lb-categories { display: none; }
  .lb-controls > .lb-mobile-only { display: block; flex: 1 1 auto; min-width: 0; }
  .lb-controls > .lb-filters-toggle { flex: 0 0 auto; }
  .lb-filters { display: none; }
  .lb-filters.lb-filters--open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
    flex-basis: 100%;
    padding-top: .5rem;
  }
}
.lb-state-select{padding:.5rem .75rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:6px;font-size:.9rem;cursor:pointer}
.lb-segmented{display:inline-flex;border:1px solid var(--border-secondary);border-radius:6px;overflow:hidden;background:var(--bg-tertiary)}
.lb-segment{padding:.5rem .85rem;background:transparent;color:var(--text-secondary);border:none;cursor:pointer;font-size:.85rem;font-weight:500;font-family:inherit;transition:background .12s,color .12s}
.lb-segment:hover:not(.lb-segment--active){background:var(--bg-quaternary);color:var(--text-primary)}
.lb-segment--active{background:hsl(var(--primary));color:#fff}
.lb-segment + .lb-segment{border-left:1px solid var(--border-secondary)}
.lb-segmented--disabled{opacity:.55;pointer-events:none}
.lb-share-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-secondary);border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.lb-share-btn:hover{background:var(--bg-quaternary);color:var(--text-primary);border-color:hsl(var(--primary))}
.lb-share-btn--copied{background:hsl(var(--primary));color:#fff;border-color:hsl(var(--primary))}
.lb-share-btn--copied svg{color:#fff}
/* Themes with a blanket button:not(...) override need extra specificity to
   keep the active segment's accent color. Matches the category-btn pattern. */
.lb-segmented button.lb-segment.lb-segment--active{background:hsl(var(--primary))!important;color:#fff!important}
.lb-results{flex:1}
.lb-chat-turn{display:flex;flex-direction:column;gap:1rem;max-width:100%}
.lb-chat-assistant{align-self:stretch}
.lb-chat-answer{animation:lbFadeIn .22s ease-out}
.lb-debug-sql-row{display:flex;justify-content:flex-end;padding:.75rem 0 0}
.lb-view-sql-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-secondary);border-radius:6px;cursor:pointer;font-size:.8rem}
.lb-view-sql-btn:hover{background:var(--bg-quaternary);color:var(--text-primary)}
.lb-view-sql-btn svg{width:14px;height:14px}
@keyframes lbFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.lb-table tbody tr.lb-row{animation:lbRowIn .28s ease-out both;animation-delay:calc(var(--lb-row-idx,0) * 18ms)}
@keyframes lbRowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.lb-table{width:100%;border-collapse:collapse;font-size:.9rem}
.lb-table thead th{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--border-secondary);color:var(--text-muted);font-weight:600;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.lb-table tbody tr{cursor:pointer;transition:background .12s}
/* Scope hover to pointer devices. Without this, iOS Safari treats the
   first tap as a hover-reveal and only fires the click on the second
   tap — making every leaderboard card require two taps to open. */
@media (hover:hover){.lb-table tbody tr:hover{background:var(--bg-tertiary)}}
.lb-table tbody td{padding:.75rem .9rem;border-bottom:1px solid var(--border-secondary)}
.lb-col-rank{width:3rem;color:var(--text-muted);font-variant-numeric:tabular-nums;font-weight:600;text-align:center}
.lb-table thead th.lb-col-rank{text-align:center}
.lb-rank-medal{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:50%;color:#0b1220;font-weight:700;font-size:.82rem;line-height:1}
.lb-rank-medal--1{background:linear-gradient(135deg,#facc15 0%,#d4a017 100%)}
.lb-rank-medal--2{background:linear-gradient(135deg,#e5e7eb 0%,#9ca3af 100%)}
.lb-rank-medal--3{background:linear-gradient(135deg,#f2a468 0%,#b45309 100%);color:#fff}
.lb-col-metric{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.lb-col-metric--active{color:var(--text-primary);font-weight:600}
.lb-col-climb{white-space:nowrap;line-height:1.25}
.lb-climb{color:#22c55e;font-weight:600;font-variant-numeric:tabular-nums;font-size:.9rem}
.lb-climb-range{color:var(--text-muted);font-size:.72rem;font-variant-numeric:tabular-nums;margin-top:2px}
.lb-retention-rate{color:#22c55e;font-weight:600}
.lb-col-trend{width:120px;padding-left:.9rem}
.lb-sparkline{display:flex;align-items:flex-end;gap:2px;height:28px;width:100%}
.lb-sparkline-empty{color:var(--text-muted);font-size:.8rem}
.lb-col-name{font-weight:500}
.lb-my-rank-callout{display:inline;padding:0;margin:0;color:hsl(var(--primary));font-weight:700;font-size:inherit;font-family:inherit;line-height:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(59,130,246,.35);text-underline-offset:3px;transition:color .12s,text-decoration-color .12s}
.lb-my-rank-callout:hover{color:#60a5fa;text-decoration-color:#60a5fa}
/* Theme files ship a blanket `.<theme> button:not(...){border:1px solid !important}`
   at specificity (0,2,1). The `body.leaderboard-view-active button.<class>`
   selector below is (0,2,2), so it wins regardless of source order. */
body.leaderboard-view-active button.lb-my-rank-callout{background:none !important;border:none !important;outline:none !important;box-shadow:none !important}
body.leaderboard-view-active button.lb-my-rank-callout:focus,
body.leaderboard-view-active button.lb-my-rank-callout:focus-visible{outline:none !important;box-shadow:none !important;border:none !important}
.lb-row--flash{animation:lbRowHighlightPulse 1.6s ease-out 1}
.lb-row--active{background:var(--bg-quaternary)!important}
.lb-row--highlight{background:var(--bg-quaternary)!important;box-shadow:inset 3px 0 0 0 hsl(var(--primary));animation:lbRowHighlightPulse 1.6s ease-out 1}
@keyframes lbRowHighlightPulse{0%{background:rgba(59,130,246,.18)}100%{background:var(--bg-quaternary)}}
.lb-row--you{background:rgba(59,130,246,.08)!important;box-shadow:inset 3px 0 0 0 hsl(var(--primary))}
.lb-row--pinned td{border-top:1px solid var(--border-secondary)}
.lb-row--pinned{position:sticky;bottom:0;background:rgba(30,41,59,.96)!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:2}
.lb-row--pinned.lb-row--you{box-shadow:inset 3px 0 0 0 hsl(var(--primary)),0 -4px 12px rgba(0,0,0,.18)}
.lb-you-badge{display:inline-flex;align-items:center;padding:.1rem .45rem;margin-left:.4rem;background:hsl(var(--primary));color:#fff;border-radius:999px;font-size:.65rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
/* Shared-with-you row — injected at the top when an anon viewer arrives on
   a board via a spotlight share for an LO beyond top 50. Mirrors the you-row
   visual language but in green (distinct from the user's own row) and sticks
   to the top of the table since the visitor came specifically to see this LO. */
.lb-row--shared{background:rgba(16,185,129,.08)!important;box-shadow:inset 3px 0 0 0 #10b981}
.lb-row--pinned.lb-row--shared{top:0;bottom:auto;box-shadow:inset 3px 0 0 0 #10b981,0 4px 12px rgba(0,0,0,.18)}
.lb-shared-badge{display:inline-flex;align-items:center;padding:.1rem .45rem;margin-left:.4rem;background:#10b981;color:#fff;border-radius:999px;font-size:.65rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.lb-col-share{width:36px;text-align:center;padding:0 .25rem!important}

/* Anon-only header treatment: bigger title + filter-aware subtitle + a
   trust-chip row of brand stats. Authed users keep the compact existing
   header (no overrides applied). */
.lb-artifact--anon .lb-artifact-title {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: .15rem;
  column-gap: .65rem;
}
.lb-artifact--anon .lb-artifact-name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.lb-artifact--anon .lb-anon-subtitle {
  flex-basis: 100%;
  margin: .15rem 0 0;
  padding: 0;
  color: var(--text-secondary);
  font-size: .9rem;
  line-height: 1.45;
}

.lb-trust-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: 12px 16px;
  /* No border-top — `.lb-artifact-header` already supplies a `border-bottom`
     in mmi-one-shell.css. Stacking both showed as a slightly-thicker double
     line, more visible in anon mode where this row sits between header and
     controls. */
}
.lb-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: .8rem;
  white-space: nowrap;
}
.lb-trust-chip__icon { flex-shrink: 0; color: hsl(var(--primary)); opacity: .85; }
.lb-trust-chip--brand {
  background: transparent;
  border: 0;
  padding-left: 0;
}
.lb-trust-chip__link {
  color: hsl(var(--primary)) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.lb-trust-chip__link:hover { text-decoration-thickness: 2px; }

@media (max-width: 640px) {
  /* Hide the trust-chip row entirely on mobile — the meta breadcrumb ("Top
     50 · This year · Nationwide · Updated 3 hours ago") already covers what
     matters, and the credibility block earns its space on desktop where the
     visitor has room to read. */
  .lb-trust-chips { display: none; }
}

/* Mobile: hide the meta breadcrumb under the anon title (the subtitle and
   trust chip cover what it conveys, and on small screens the extra line
   makes the header feel cluttered). */
@media (max-width: 640px) {
  .lb-artifact--anon .lb-artifact-meta { display: none; }
}

/* Filters toggle — collapses the 3 selects on mobile into a single button
   with a count of non-default filters. Sort segmented stays visible. */
.lb-filters-toggle {
  display: none;
  align-items: center;
  gap: .35rem;
  padding: .45rem .75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
}
.lb-filters-toggle:hover { background: var(--bg-quaternary); }
.lb-filters-toggle__count { color: var(--text-tertiary); font-weight: 400; }
@media (max-width: 640px) {
  .lb-filters-toggle { display: inline-flex; }
}

.lb-row-share-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;color:var(--text-muted);border:1px solid transparent;border-radius:6px;cursor:pointer;transition:background .12s,color .12s,border-color .12s,opacity .12s;opacity:0}
.lb-row:hover .lb-row-share-btn,.lb-row--highlight .lb-row-share-btn,.lb-row--you .lb-row-share-btn,.lb-row--shared .lb-row-share-btn{opacity:1}
.lb-row-share-btn:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:hsl(var(--primary))}
@media (max-width:540px){.lb-col-share{display:none}}
/* Share-preview modal — backdrop + card + preview image + actions row */
.lb-share-preview-backdrop{position:fixed;inset:0;background:rgba(8,12,22,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:lbModalFade .12s ease-out}
@keyframes lbModalFade{from{opacity:0}to{opacity:1}}
.lb-share-preview{position:relative;background:var(--bg-secondary);border:1px solid var(--border-secondary);border-radius:14px;padding:1.25rem;width:min(640px,calc(100vw - 2rem));max-height:calc(100vh - 2rem);overflow:auto;color:var(--text-primary);box-shadow:0 20px 60px -10px rgba(0,0,0,.6);animation:lbModalRise .14s ease-out}
@keyframes lbModalRise{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.lb-share-preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.lb-share-preview-title{font-size:1rem;font-weight:600;margin:0}
.lb-share-preview-close{background:transparent;border:none;color:var(--text-muted);width:1.75rem;height:1.75rem;border-radius:6px;cursor:pointer;font-size:1.3rem;line-height:1;display:flex;align-items:center;justify-content:center}
.lb-share-preview-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.lb-share-preview-card{position:relative;border:1px solid var(--border-secondary);border-radius:10px;overflow:hidden;background:var(--bg-tertiary);aspect-ratio:1200/630;margin-bottom:.85rem}
.lb-share-preview-card img{width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .25s ease-out}
.lb-share-preview-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg-tertiary) 0%,var(--bg-quaternary) 50%,var(--bg-tertiary) 100%);background-size:200% 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite;opacity:1;transition:opacity .25s ease-out}
.lb-share-preview-card--ready img{opacity:1}
.lb-share-preview-card--ready .lb-share-preview-skeleton{opacity:0;pointer-events:none}
.lb-share-preview-url{display:flex;gap:.5rem;margin-bottom:.85rem}
.lb-share-preview-url input{flex:1;padding:.5rem .75rem;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-secondary);border-radius:6px;font-size:.85rem;font-family:inherit}
.lb-share-preview-copy{padding:.5rem 1rem;background:hsl(var(--primary));color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:.85rem;font-family:inherit;transition:background .12s}
.lb-share-preview-copy:hover{background:var(--accent-primary-hover,#2563eb)}
.lb-share-preview-copy--ok{background:#16a34a}
.lb-share-preview-networks{display:flex;gap:.5rem;flex-wrap:wrap}
.lb-share-network-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem .85rem;color:#fff;border:1px solid transparent;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:500;font-family:inherit;transition:filter .12s,box-shadow .12s}
/* Specificity (0,2,2) beats every theme's `.<theme> button:not(...){...!important}`
   blanket rule (0,2,1). Without this, themes overwrite the network color with
   their generic button background. */
body.leaderboard-view-active button.lb-share-network-btn{color:#fff !important;border:1px solid transparent !important}
body.leaderboard-view-active button.lb-share-network-btn:hover{filter:brightness(1.08);box-shadow:0 2px 6px rgba(0,0,0,.18)}
body.leaderboard-view-active button.lb-share-network-btn--linkedin{background:#0a66c2 !important}
body.leaderboard-view-active button.lb-share-network-btn--twitter{background:#000 !important}
body.leaderboard-view-active button.lb-share-network-btn--facebook{background:#1877f2 !important}
.lb-view-as-btn{display:inline-flex;align-items:center;gap:.4rem}
.lb-view-as-btn--active{background:hsl(var(--primary));color:#fff;border-color:hsl(var(--primary))}
.lb-view-as-btn--active:hover{background:var(--accent-primary-hover,#2563eb)}
/* Idle state: eye icon only — label is hidden until staff actually start
   impersonating. When active, label flips on so the staff member can see
   which NMLS they're viewing as ("Viewing as #1234"). */
.lb-view-as-btn .lb-view-as-label{display:none}
.lb-view-as-btn--active .lb-view-as-label{display:inline}
.lb-view-as-dialog{width:min(420px,calc(100vw - 2rem))}
.lb-view-as-hint{margin:0 0 .75rem;color:var(--text-muted);font-size:.85rem;line-height:1.4}
.lb-view-as-form{display:flex;gap:.5rem;margin-bottom:.75rem}
.lb-view-as-input{flex:1;padding:.5rem .75rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:6px;font-size:.9rem;font-family:inherit}
.lb-view-as-input:focus{outline:none;border-color:hsl(var(--primary))}
.lb-view-as-clear{display:block;width:100%;padding:.5rem;background:transparent;color:var(--text-muted);border:1px solid var(--border-secondary);border-radius:6px;cursor:pointer;font-size:.85rem;font-family:inherit;transition:background .12s,color .12s}
.lb-view-as-clear:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.lb-empty{padding:2.5rem;text-align:center;color:var(--text-muted);font-size:.95rem}
/* Clickable company name in any row — visually a link, behaves as a filter
   trigger. Hover lifts the underline + accent color so users discover the
   affordance. Inherits font/size from the cell so the table layout doesn't
   shift when a row swaps from plain text to a button. */
.lb-col-company-link{padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;text-align:left;text-decoration:none;transition:color .12s}
/* Same specificity-bump pattern as .lb-my-rank-callout — beats the
   `.<theme> button:not(...){border:!important}` rules that ship in every
   theme. Hover state forces a dashed under-rule via border-bottom (set in
   the bumped rule below so the !important + specificity both win). */
body.leaderboard-view-active button.lb-col-company-link{background:none !important;border:none !important;outline:none !important;box-shadow:none !important}
body.leaderboard-view-active button.lb-col-company-link:hover{color:hsl(var(--primary)) !important;border-bottom:1px dashed hsl(var(--primary)) !important}
body.leaderboard-view-active button.lb-col-company-link:focus,
body.leaderboard-view-active button.lb-col-company-link:focus-visible{outline:none !important;box-shadow:none !important;border:none !important}
/* "Filtered: <Company> ×" notice rendered above the table whenever the
   company filter is active. Muted background + accent border so it reads
   as scope context, not a primary action. Bigger than the inline .lb-you-
   badge — it's a top-of-table notice. */
.lb-filter-banner{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .85rem;padding:.45rem .75rem;background:rgba(59,130,246,.08);color:var(--text-primary);border:1px solid rgba(59,130,246,.4);border-radius:999px;font-size:.85rem}
.lb-filter-banner-label{color:var(--text-muted);font-weight:500}
.lb-filter-banner-value{color:var(--text-primary);font-weight:600}
.lb-filter-banner-clear{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;background:transparent;color:var(--text-muted);border:none;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;font-family:inherit;transition:background .12s,color .12s}
.lb-filter-banner-clear:hover{background:var(--bg-tertiary);color:var(--text-primary)}
/* Pin glyph beside the city is only shown in the mobile card layout
   below — hide it in the desktop table. */
.lb-loc-pin { display:none }
/* Progressive column drop on narrow viewports — hide in this order so the
   #/Name/Volume/Units columns (the rank story) survive longest. Retention
   rate has its own class and stays visible even on narrow widths since it's
   the headline metric for that category. */
@media (max-width:1100px){.lb-table .lb-col-loc{display:none}}
@media (max-width:900px){.lb-table .lb-col-avg{display:none}}
@media (max-width:700px){.lb-table .lb-col-company{display:none}}
@media (max-width:540px){.lb-table .lb-col-trend{display:none}}
/* Phone-width: ditch the table layout entirely and render each row as a
   self-contained card. Avoids horizontal scroll, preserves sticky on
   pinned rows (the rows are now block-flow, not table-row), and gives
   the columns we restored more breathing room. Source of truth for the
   markup is still <table>, so screen readers see proper row semantics
   above the visual reshape. */
@media (max-width:540px) {
  .lb-table { display:block; width:100% }
  .lb-table thead { display:none }
  .lb-table tbody { display:block }
  /* Flex + order + wrap lays each tr out as a multi-line card. Each
     direct-child <td> is one flex item; lines are formed by setting
     flex-basis:100% on the items that should start a new line and
     leaving the rest as auto-width so they flow inline. */
  .lb-table tbody tr.lb-row {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    column-gap:.6rem;
    row-gap:.55rem;
    background:var(--bg-secondary);
    border:1px solid var(--border-secondary);
    border-radius:10px;
    padding:.9rem .85rem;
    margin-bottom:.6rem;
  }
  .lb-table tbody td { border:none; padding:0; text-align:left; }
  /* Strip cell borders + text decoration in card mode. Has to match the
     theme override at mmi-one-shell.css:4193 which sets
     `body.has-mmi-one-shell .lb-table tbody td { border-bottom: 1px solid ... !important }`
     at specificity (0,2,2) — without the body.has-mmi-one-shell prefix
     here our rule loses despite being later in source order. */
  body.has-mmi-one-shell .lb-table tbody td,
  .lb-table tbody td,
  .lb-table tbody td *,
  .lb-table tbody td *::before,
  .lb-table tbody td *::after {
    text-decoration:none !important;
    border-bottom:none !important;
  }
  /* Larger profile avatar to anchor the card as a person, not a row. */
  .lb-table .lb-name-cell .lb-avatar {
    width:2.75rem;
    height:2.75rem;
  }
  /* Smaller rounded-rect rank badge (vs the previous larger circle) so
     it sits flush with the avatar rather than competing with it. */
  .lb-table .lb-rank-medal {
    width:1.75rem;
    height:1.75rem;
    border-radius:6px;
    font-size:.85rem;
  }

  /* Line 1: rank · name (grows) · share, all vertically centered. */
  .lb-table .lb-col-rank {
    flex:0 0 auto;
    width:auto;
    min-width:1.75rem;
    font-size:1rem;
    font-weight:600;
    order:1;
    text-align:center;
    align-self:center;
  }
  /* Constrain name so a long string truncates with an ellipsis instead
     of wrapping and pushing the share button to a new line. */
  .lb-table .lb-col-name {
    flex:1 1 0;
    min-width:0;
    overflow:hidden;
    font-weight:600;
    font-size:.95rem;
    order:2;
  }
  .lb-table .lb-name-cell { min-width:0 }
  /* Truncate only the name span itself, not the pinned "You" / "Shared
     with you" badges that also live inside .lb-name-cell. */
  .lb-table .lb-name-cell > span:not(.lb-you-badge):not(.lb-shared-badge) {
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .lb-table .lb-col-share {
    display:inline-block !important;
    flex:0 0 auto;
    width:auto;
    order:3;
    align-self:flex-start;
  }
  /* Share button on mobile: visible bordered box (no hover-only opacity),
     anchored to the top-right corner of the card via the flex-shrink:0
     above + align-self:flex-start. */
  .lb-table .lb-row .lb-row-share-btn {
    opacity:1 !important;
    width:36px !important;
    height:36px !important;
    background:rgba(255,255,255,.04) !important;
    border:1px solid var(--border-secondary) !important;
    border-radius:8px;
    color:var(--text-secondary) !important;
  }
  /* Line 2: company on its own line (override the <700px hide). */
  .lb-table .lb-col-company {
    display:block !important;
    flex:0 0 100%;
    font-size:.78rem;
    color:var(--text-muted);
    order:4;
  }
  /* Line 3: location on its own line with a small pin glyph (override the
     <1100px hide). Pin is visible only here, not in the desktop table. */
  .lb-table .lb-col-loc {
    display:flex !important;
    align-items:center;
    flex:0 0 100%;
    font-size:.75rem;
    color:var(--text-muted);
    opacity:.85;
    order:5;
  }
  /* Restore the pin glyph in card mode (global rule above hides it for
     the desktop table). */
  .lb-table .lb-col-loc .lb-loc-pin {
    display:inline-flex !important;
    flex:0 0 auto;
    margin-right:.3rem;
    color:var(--text-muted);
  }
  .lb-table .lb-col-climb { flex:0 0 auto; order:6; font-size:.85rem }

  /* Hero: whichever metric matches the active sort (.lb-col-metric--active).
     Caption sits ABOVE the big value (column flex) so the number gets full
     visual weight on its own line. */
  .lb-table .lb-col-metric.lb-col-metric--active {
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start;
    flex:0 0 100%;
    order:7;
    gap:.1rem;
    margin:.5rem 0 0;
    font-size:1.7rem;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    line-height:1.05;
    color:var(--text-primary);
  }
  .lb-table .lb-col-metric.lb-col-metric--active::before {
    content:attr(data-label);
    order:-1;
    font-size:.6rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-muted);
  }
  .lb-table .lb-col-metric.lb-col-metric--active::after { content:none }

  /* Supporting metrics: discrete label-above-value blocks, separated by
     flex column-gap only (no vertical divider rules — those read as
     visual chrome stacked across many cards). */
  .lb-table .lb-col-metric:not(.lb-col-metric--active),
  .lb-table .lb-col-avg:not(.lb-col-metric--active) {
    display:flex !important;
    flex-direction:column;
    flex:0 0 auto;
    order:8;
    margin:.45rem 1.5rem 0 0;
    padding:0;
    font-size:1rem;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    color:var(--text-primary);
    line-height:1.15;
  }
  .lb-table .lb-col-metric:not(.lb-col-metric--active)::before,
  .lb-table .lb-col-avg:not(.lb-col-metric--active)::before {
    content:attr(data-label) !important;
    order:-1;
    margin-bottom:.15rem;
    font-size:.6rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-muted);
  }
  .lb-table .lb-col-metric:not(.lb-col-metric--active)::after,
  .lb-table .lb-col-avg:not(.lb-col-metric--active)::after { content:none !important }

  /* Sparkline full-width. */
  .lb-table .lb-col-trend {
    display:block !important;
    flex:0 0 100%;
    order:9;
    padding-left:0 !important;
    margin-top:.25rem;
  }

  /* Left accent stripe colored by rank tier — gold/silver/bronze for top
     3 (matching the medal), subtle gray for the rest. :has() is supported
     in modern Safari + Chrome; on browsers without it the rule no-ops
     and the card just has its normal border. */
  .lb-table tbody tr.lb-row { border-left:4px solid var(--border-secondary) }
  .lb-table tbody tr.lb-row:has(.lb-rank-medal--1) { border-left-color:#facc15 }
  .lb-table tbody tr.lb-row:has(.lb-rank-medal--2) { border-left-color:#9ca3af }
  .lb-table tbody tr.lb-row:has(.lb-rank-medal--3) { border-left-color:#b45309 }

  /* Pinned rows keep their accent; sticky now derives from block-flow
     (display:flex) instead of table-row, which is reliable. */
  .lb-table tbody tr.lb-row--pinned { box-shadow:inset 3px 0 0 0 hsl(var(--primary)) }
  .lb-table tbody tr.lb-row--shared { box-shadow:inset 3px 0 0 0 #10b981 }
}
/* Mobile: collapse the share group to the generic copy-link button only, and
   shrink the View As button to its eye icon. */
@media (max-width:540px){
  .lb-social-btn{display:none}
  .lb-view-as-btn .lb-view-as-label{display:none}
}

/* ============================================================
   Anonymous clamp-warning modal — interstitial shown when an
   unauth viewer lands on a share URL with locked filters.
   ============================================================ */
.leaderboard-clamp-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}
.leaderboard-clamp-modal.entering { opacity: 1; pointer-events: auto; }
.leaderboard-clamp-modal.exiting { opacity: 0; pointer-events: none; }

.lcm-backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.lcm-content {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  max-width: 38rem;
  width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  /* Extra right padding gives the last-month sparkline tooltip room to render
     inside the modal instead of triggering a viewport horizontal scroll. */
  padding: 1.75rem 2.25rem 1.25rem 1.5rem;
  box-shadow: var(--shadow-dark-xl);
  transform: scale(0.96);
  transition: transform var(--transition-slow);
}
.leaderboard-clamp-modal.entering .lcm-content { transform: scale(1); }
.leaderboard-clamp-modal.exiting .lcm-content { transform: scale(0.96); }

.lcm-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
}
.lcm-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.lcm-title {
  margin: 0 2rem 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.lcm-preview { margin: 0 0 1rem; min-height: 4rem; }
.lcm-preview--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 0.875rem;
  padding: 1.5rem 0;
}

.lcm-card {
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  padding: 0.75rem;
}
.lcm-card-subhead {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0.25rem 0.5rem;
}
.lcm-row {
  display: grid;
  grid-template-columns: 1.5rem 2.25rem 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.25rem;
  border-top: 1px solid var(--border-secondary);
}
.lcm-row:first-of-type { border-top: 0; }
.lcm-row-rank {
  font-weight: 700;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.lcm-row--rank-1 .lcm-row-rank { color: #facc15; }
.lcm-row--rank-2 .lcm-row-rank { color: #9ca3af; }
.lcm-row--rank-3 .lcm-row-rank { color: #b45309; }
.lcm-row-name { font-weight: 600; color: var(--text-primary); font-size: 0.92rem; }
.lcm-row-co { color: var(--text-secondary); font-size: 0.8rem; }
.lcm-row-stat { text-align: right; }
.lcm-row-vol { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lcm-row-units { color: var(--text-tertiary); font-size: 0.78rem; }

/* Spotlight card — mirrors the mobile leaderboard row layout (rank badge +
   avatar + name/company/location, stat block, sparkline) so the modal feels
   like a single row pulled out of the table the viewer is about to land in. */
.lcm-snap {
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: 0.85rem;
  background: var(--bg-secondary);
}
.lcm-snap--primary { border-color: var(--border-primary); }

.lcm-card-head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}
.lcm-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.4rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.lcm-rank-badge--1 { background: #facc15; color: #1a1a1a; border-color: #facc15; }
.lcm-rank-badge--2 { background: #9ca3af; color: #1a1a1a; border-color: #9ca3af; }
.lcm-rank-badge--3 { background: #b45309; color: #ffffff; border-color: #b45309; }

.lcm-card-id { min-width: 0; }
.lcm-card-id .lcm-snap-name { font-size: 1rem; }
.lcm-card-loc {
  color: var(--text-tertiary);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.lcm-snap-name { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; }
.lcm-snap-co { color: var(--text-secondary); font-size: 0.82rem; }

.lcm-card-rank {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.25rem 0 0.85rem;
}
.lcm-snap-pill {
  display: inline-block;
  font-weight: 700;
  font-size: 0.92rem;
  color: #ffffff;
  background: hsl(var(--primary));
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}
.lcm-snap-suffix { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; }

.lcm-card-stats {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-secondary);
}
.lcm-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.lcm-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: 0.1rem;
}
.lcm-stat-value {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}
.lcm-stat-value--big { font-size: 1.6rem; line-height: 1.1; }

/* Shared sparkline lives at .lb-sparkline; the modal card just adds spacing. */
.lcm-snap--card .lb-sparkline {
  margin-top: 0.7rem;
}

.lcm-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.lcm-chips-label {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin-right: 0.25rem;
}
.lcm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.82rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
}
.lcm-chip--locked { color: var(--text-primary); }
.lcm-chip-lock { font-size: 0.75rem; opacity: 0.8; }

.lcm-cta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.lcm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
/* Primary CTA is an <a href> for middle-click/open-in-new-tab. The `a.X`
   selector + literal `#fff !important` guarantees contrast regardless of
   theme — `hsl(var(--primary-foreground))` resolves to a near-primary tone
   in some themes, which produced blue-on-blue on the previous attempt. */
.leaderboard-clamp-modal a.lcm-btn-primary,
.leaderboard-clamp-modal a.lcm-btn-primary:visited,
.leaderboard-clamp-modal a.lcm-btn-primary:hover {
  background: hsl(var(--primary));
  color: #ffffff !important;
  text-decoration: none !important;
}
.leaderboard-clamp-modal a.lcm-btn-primary:hover { filter: brightness(1.05); }
.leaderboard-clamp-modal .lcm-btn-secondary {
  background: transparent;
  color: var(--text-secondary) !important;
  border-color: var(--border-primary);
}
.leaderboard-clamp-modal .lcm-btn-secondary:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary) !important;
}

.lcm-footnote {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.4;
}