/* =======================================================================
   REEx Rankings Dashboard — scoped styles
   All selectors live under .reex-rankings-app to prevent Divi CSS bleed.
   ======================================================================= */
.reex-rankings-app, .reex-rankings-app *,
.reex-rankings-app *::before, .reex-rankings-app *::after {
  box-sizing: border-box;
}
/* When the shortcode forces a single segment, hide the tab bar. */
.reex-rankings-app.reex-rankings-app--single .reex-tabs { display: none; }
.reex-rankings-app {
  /* ===========================================================================
     REEx Rankings -- Design Tokens
     ---------------------------------------------------------------------------
     Single source of truth for visual styling. Edit values below to reskin.
     Brand: Cobalt Graphics / REEx
     Fonts: Poppins (loaded by parent site; falls back to system)
     ========================================================================== */

  /* -- Brand palette ------------------------------------------------------
     Sampled from rendered elements on the live site, NOT from a brand doc.
     The previous values here came from "REEx Brand Assets / colors.md" and
     led with #a61b0f -- Divi's legacy `accent_color` option, which appears
     nowhere in the current design. Teal is the interactive colour (links,
     solid CTAs, borders); gold is the secondary/outline accent.

     Contrast, computed rather than assumed:
       #0a8289 on white ......... 4.60:1  AA   (white text on a teal fill)
       #0a6a70 on white ......... 6.35:1  AA   (accent as TEXT)
       #0a6a70 on #f0f3f3 ....... 5.69:1  AA   (accent text on a striped row)
       #0a8289 on #f0f3f3 ....... 4.12:1  FAILS -> fills/borders only
       #07545a on white ......... 8.66:1  AA   (accent text, hovered)
       #525a5c on white ......... 7.06:1  AA   (muted)
       #5e4500 on #fff5d6 ....... 8.29:1  AA   (the gold callout pair, kept)
     -------------------------------------------------------------------- */
  --reex-brand-teal:      #0a8289;  /* primary: fills, borders, active state */
  --reex-brand-teal-deep: #0a6a70;  /* primary as TEXT on a light background */
  --reex-brand-teal-soft: #c4ecee;  /* tint: soft borders, highlights */
  --reex-brand-gold:      #f2a30f;  /* secondary: featured, division markers */
  --reex-brand-fg:        #181c1d;  /* body, headings */
  --reex-brand-bg:        #f5f6f6;  /* page / section background */
  --reex-brand-card:      #ffffff;  /* card surfaces */

  /* -- Semantic mapping ---------------------------------------------------- */
  --reex-bg:             var(--reex-brand-card);
  --reex-fg:             var(--reex-brand-fg);
  --reex-muted:          #525a5c;
  --reex-muted-2:        #8b9294;
  --reex-border:         #dde1e1;
  --reex-border-strong:  #c3caca;
  --reex-row-alt:        #f0f3f3;
  --reex-surface-alt:    var(--reex-brand-bg);
  --reex-accent:         var(--reex-brand-teal);
  --reex-accent-hover:   var(--reex-brand-teal-deep);
  /* The accent splits in two. As a FILL behind white text it is the bright
     teal; as TEXT on a light surface it must be the deep one, which is also
     what the site's own links use. The bright teal fails AA on the striped
     row background, so never set it as a text colour. */
  --reex-accent-text:       var(--reex-brand-teal-deep);
  --reex-accent-text-hover: #07545a;
  --reex-accent-fg:      #ffffff;
  --reex-accent-soft:    rgba(10, 130, 137, 0.12);
  --reex-accent-shadow:  rgba(10, 130, 137, 0.16);
  --reex-yellow:         var(--reex-brand-gold);
  --reex-yellow-bg:      #fff5d6;
  --reex-yellow-fg:      #5e4500;
  --reex-yellow-border:  var(--reex-brand-gold);

  /* -- Typography ---------------------------------------------------------- */
  --reex-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --reex-font-size-2xs:   9px;
  --reex-font-size-xs:   11px;
  --reex-font-size-sm:   12px;
  --reex-font-size-md:   13px;
  --reex-font-size-base: 14px;
  --reex-font-size-lg:   15px;
  --reex-font-size-xl:   18px;
  --reex-font-size-2xl:  22px;
  --reex-line-height:     1.5;

  /* -- Radii --------------------------------------------------------------- */
  --reex-radius-sm:   4px;
  --reex-radius:      6px;
  --reex-radius-md:   8px;
  --reex-radius-pill: 999px;

  /* -- Effects ------------------------------------------------------------- */
  --reex-shadow:       0 4px 16px rgba(24, 28, 29, 0.08);
  --reex-shadow-hover: 0 2px 12px var(--reex-accent-shadow);
  --reex-transition:   0.15s ease;

  /* -- Host applies font + base color -------------------------------------- */
  font-family: var(--reex-font);
  font-size: var(--reex-font-size-base);
  line-height: var(--reex-line-height);
  color: var(--reex-fg);
  background: transparent;
  position: relative;
}
.reex-rankings-app .reex-shell {
  max-width: 1440px;
  margin: 0 auto;
}
/* Toolbar -- search + sort pills in one row */
.reex-rankings-app .reex-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 12px;
}
.reex-rankings-app .reex-toolbar-search {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.reex-rankings-app .reex-toolbar-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--reex-muted);
  pointer-events: none;
  opacity: 0.65;
}
.reex-rankings-app .reex-toolbar-search input {
  width: 220px;
  padding: 8px 12px 8px 30px;
  border: 1px solid var(--reex-border);
  border-radius: var(--reex-radius);
  font: inherit;
  font-size: 13px;
  color: var(--reex-fg);
  background: var(--reex-bg);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reex-rankings-app .reex-toolbar-search input:focus {
  border-color: var(--reex-accent);
  box-shadow: 0 0 0 3px var(--reex-accent-soft);
}
/* Tabs */
.reex-rankings-app .reex-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--reex-border);
  margin-bottom: 12px;
}
.reex-rankings-app .reex-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--reex-muted);
  cursor: pointer;
  border-radius: var(--reex-radius) var(--reex-radius) 0 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.reex-rankings-app .reex-tab:hover {
  color: var(--reex-fg);
  background: var(--reex-row-alt);
}
.reex-rankings-app .reex-tab[aria-selected="true"] {
  color: var(--reex-accent-text);
  border-bottom-color: var(--reex-accent);
}
.reex-rankings-app .reex-tab[hidden] {
  display: none;
}
.reex-rankings-app .reex-tab:focus-visible {
  outline: 2px solid var(--reex-accent);
  outline-offset: 2px;
}
/* Segment meta */
.reex-rankings-app .reex-segment-meta {
  margin: 0 0 12px;
}
/* These two headings need an explicit colour, unlike the rest of the component.
   Divi's customizer sets `h1,h2,h3,h4,h5,h6 { color: var(--gcid-heading-color,#212121) }`,
   and an element selector beats an inherited value -- so any heading here that
   does not set its own colour renders in Divi's old #212121 rather than the
   brand #181c1d. Measured: these were the only two leaking. */
.reex-rankings-app .reex-segment-title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--reex-fg);
}
.reex-rankings-app .reex-segment-blurb {
  margin: 0;
  color: var(--reex-muted);
  font-size: 13px;
}
.reex-rankings-app .reex-result-count {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--reex-muted);
}
/* Sort pill bar -- sits inside the toolbar */
.reex-rankings-app .reex-sort-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 12px;
  background: var(--reex-row-alt);
  border: 1px solid var(--reex-border);
  border-radius: var(--reex-radius);
}
.reex-rankings-app .reex-sort-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--reex-muted);
  margin-right: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.reex-rankings-app .reex-sort-pill {
  appearance: none;
  background: var(--reex-bg);
  border: 1px solid var(--reex-border);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--reex-fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.reex-rankings-app .reex-sort-pill:hover {
  border-color: var(--reex-accent);
  color: var(--reex-accent-text);
}
.reex-rankings-app .reex-sort-pill[data-active="true"] {
  background: var(--reex-accent);
  border-color: var(--reex-accent);
  color: var(--reex-accent-fg);
  font-weight: 600;
}
.reex-rankings-app .reex-sort-pill[data-active="true"]:hover {
  background: var(--reex-accent-hover);
  border-color: var(--reex-accent-hover);
  color: var(--reex-accent-fg);
}
.reex-rankings-app .reex-sort-pill .reex-sort-arrow {
  font-size: 10px;
  line-height: 1;
}
/* Cards grid */
.reex-rankings-app .reex-cards-host {
  position: relative;
}
.reex-rankings-app .reex-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.reex-rankings-app .reex-division-header {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding: 10px 14px;
  background: var(--reex-yellow-bg);
  color: var(--reex-yellow-fg);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--reex-radius);
  border-left: 4px solid var(--reex-yellow-border);
}
.reex-rankings-app .reex-card {
  background: var(--reex-bg);
  border: 1px solid var(--reex-border);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  display: grid;
  /* Overall sits next to identity (per CBO feedback) so the score reads
     tightly with the company name rather than floating far-right. */
  grid-template-columns: 36px minmax(180px, 1.1fr) auto minmax(140px, 1.2fr) minmax(280px, 2.4fr) auto;
  grid-template-areas: "rank identity overall descriptor scores cta";
  align-items: center;
  gap: 4px 16px;
  position: relative;
}
.reex-rankings-app .reex-card:hover {
  border-color: var(--reex-accent);
  box-shadow: 0 2px 12px var(--reex-accent-shadow);
}
.reex-rankings-app .reex-card:focus-visible {
  outline: 2px solid var(--reex-accent);
  outline-offset: 2px;
}
.reex-rankings-app .reex-card-rank {
  grid-area: rank;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--reex-surface-alt);
  color: var(--reex-muted);
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.reex-rankings-app .reex-card-rank--top {
  background: var(--reex-accent);
  color: var(--reex-accent-fg);
}
.reex-rankings-app .reex-card-identity {
  grid-area: identity;
  min-width: 0;
}
.reex-rankings-app .reex-card-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--reex-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reex-rankings-app .reex-card-meta {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--reex-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reex-rankings-app .reex-card-overall {
  grid-area: overall;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.reex-rankings-app .reex-card-overall-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--reex-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.reex-rankings-app .reex-card-descriptor {
  grid-area: descriptor;
  margin: 0;
  font-size: 12px;
  color: var(--reex-fg);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.reex-rankings-app .reex-card-descriptor strong {
  font-weight: 600;
}
.reex-rankings-app .reex-card-scores {
  grid-area: scores;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 4px 6px;
  padding: 0;
  border-top: 0;
}
.reex-rankings-app .reex-score-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  padding: 2px 0;
  position: relative;
}
/* Instant hover tooltip on score cells. Uses data-tip rather than the
   native HTML `title` (which has a multi-second OS-level delay). */
.reex-rankings-app .reex-score-cell[data-tip]:hover::after,
.reex-rankings-app .reex-sort-pill[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--reex-fg);
  color: #fff;
  padding: 5px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.reex-rankings-app .reex-score-cell[data-tip]:hover::before,
.reex-rankings-app .reex-sort-pill[data-tip]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--reex-fg);
  pointer-events: none;
  z-index: 50;
}
.reex-rankings-app .reex-sort-pill {
  position: relative;
}
.reex-rankings-app .reex-score-cell-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--reex-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-height: 1.2;
}
/* Supporting (blurred) data inlined into each drawer score section.
   Sits beneath the score rows of the same section it relates to.
   Real values are stripped server-side; placeholder bullets are
   purely decorative -- DOM inspection reveals no underlying data. */
.reex-rankings-app .reex-supporting-inline {
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px dashed var(--reex-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reex-rankings-app .reex-supporting-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.reex-rankings-app .reex-supporting-group-title {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--reex-muted);
}
.reex-rankings-app .reex-supporting-group-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.reex-rankings-app .reex-supporting-cell {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.reex-rankings-app .reex-supporting-cell-label {
  font-size: 11px;
  color: var(--reex-fg);
  font-weight: 500;
  white-space: nowrap;
}
.reex-rankings-app .reex-supporting-cell-blur {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--reex-fg);
  filter: blur(3px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  font-weight: 700;
  line-height: 1;
}
.reex-rankings-app .reex-score-mini {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  position: relative;
}
.reex-rankings-app .reex-score-mini-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--reex-fg);
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.reex-rankings-app .reex-score-mini-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--reex-row-alt);
  overflow: hidden;
  position: relative;
}
.reex-rankings-app .reex-score-mini-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 2px;
}
.reex-rankings-app .reex-score-mini-empty .reex-score-mini-value {
  color: var(--reex-muted);
  font-weight: 400;
}
.reex-rankings-app .reex-score-cell.reex-score-cell--active .reex-score-cell-label {
  color: var(--reex-accent-text);
}
.reex-rankings-app .reex-score-cell.reex-score-cell--active .reex-score-mini-bar {
  height: 6px;
}
.reex-rankings-app .reex-card-cta {
  grid-area: cta;
  margin: 0;
  padding: 0 0 0 4px;
  border: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--reex-accent-text);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.reex-rankings-app .reex-card-cta-arrow {
  font-size: 14px;
  line-height: 1;
  transition: transform 0.15s ease;
  display: inline-block;
}
.reex-rankings-app .reex-card:hover .reex-card-cta-arrow {
  transform: translateX(3px);
}
.reex-rankings-app .reex-card:hover .reex-card-cta {
  color: var(--reex-accent-text-hover);
}
.reex-rankings-app .reex-card-cta-secondary {
  color: var(--reex-muted);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Score chip — coloured pill matching the existing palette */
.reex-rankings-app .reex-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  color: var(--reex-fg);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
}
.reex-rankings-app .reex-score-overall {
  min-width: 38px;
  height: 26px;
  font-size: 13px;
}
.reex-rankings-app .reex-score-empty {
  color: var(--reex-muted);
  background: transparent !important;
  font-weight: 400;
}
/* Drawer -- offset from the top so the host site's sticky navigation
   stays visible and clickable above it (80px desktop, 60px mobile).
   z-index sits at the top of the stack to clear any other page chrome
   below the nav. */
.reex-rankings-app .reex-drawer-backdrop {
  position: fixed;
  top: 80px;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(24, 28, 29, 0.4);
  z-index: 2147483646;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.reex-rankings-app .reex-drawer-backdrop[data-open="true"] {
  opacity: 1;
}
.reex-rankings-app .reex-drawer {
  position: fixed;
  top: 80px;
  right: 0;
  height: calc(100vh - 80px);
  width: min(480px, 100%);
  max-width: 100%;
  background: var(--reex-bg);
  z-index: 2147483647;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: -4px 0 24px rgba(24, 28, 29, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.reex-rankings-app .reex-drawer[aria-hidden="false"] {
  transform: translateX(0);
}
.reex-rankings-app .reex-drawer-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 20px;
  border-bottom: 1px solid var(--reex-border);
}
.reex-rankings-app .reex-drawer-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--reex-accent-text);
}
.reex-rankings-app .reex-drawer-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--reex-fg); /* see the note on .reex-segment-title */
}
.reex-rankings-app .reex-drawer-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--reex-muted);
}
.reex-rankings-app .reex-drawer-close {
  margin-left: auto;
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--reex-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  flex-shrink: 0;
}
.reex-rankings-app .reex-drawer-close:hover {
  background: var(--reex-row-alt);
  color: var(--reex-fg);
}
.reex-rankings-app .reex-drawer-body {
  overflow-y: auto;
  padding: 20px;
  flex: 1 1 auto;
}
.reex-rankings-app .reex-drawer-section {
  margin: 0 0 20px;
}
.reex-rankings-app .reex-drawer-section-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--reex-muted);
  border-bottom: 1px solid var(--reex-border);
  padding-bottom: 4px;
}
.reex-rankings-app .reex-drawer-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--reex-row-alt);
  font-size: 13px;
}
.reex-rankings-app .reex-drawer-row:last-child {
  border-bottom: 0;
}
.reex-rankings-app .reex-drawer-label {
  color: var(--reex-muted);
}
.reex-rankings-app .reex-drawer-value {
  font-weight: 600;
  text-align: right;
}
.reex-rankings-app .reex-drawer-link {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 14px;
  background: var(--reex-accent);
  color: var(--reex-accent-fg) !important;
  text-decoration: none !important;
  border-radius: var(--reex-radius);
  font-weight: 600;
  font-size: 13px;
}
.reex-rankings-app .reex-drawer-link:hover {
  background: var(--reex-accent-hover);
}
/* Metrics card strip */
.reex-rankings-app .reex-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 14px;
}
.reex-rankings-app .reex-metric-card {
  background: linear-gradient(180deg, var(--reex-bg) 0%, var(--reex-row-alt) 100%);
  border: 1px solid var(--reex-border);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
  position: relative;
  overflow: hidden;
}
.reex-rankings-app .reex-metric-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--reex-accent);
}
.reex-rankings-app .reex-metric-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--reex-muted);
  margin: 0;
}
.reex-rankings-app .reex-metric-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--reex-fg);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.reex-rankings-app .reex-metric-detail {
  font-size: 12px;
  color: var(--reex-muted);
  margin: 0;
  line-height: 1.35;
}
.reex-rankings-app .reex-metric-card--top3 .reex-metric-value {
  font-size: 14px;
  font-weight: 600;
}
.reex-rankings-app .reex-top3-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reex-rankings-app .reex-top3-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.reex-rankings-app .reex-top3-rank {
  flex: 0 0 18px;
  font-weight: 700;
  color: var(--reex-muted);
  font-variant-numeric: tabular-nums;
}
.reex-rankings-app .reex-top3-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--reex-fg);
  font-weight: 500;
}
.reex-rankings-app .reex-top3-score .reex-score {
  min-width: 28px;
  height: 20px;
  font-size: 11px;
  padding: 0 4px;
}
@media (max-width: 980px) {
  .reex-rankings-app .reex-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .reex-rankings-app .reex-metrics {
    grid-template-columns: 1fr;
  }
}

/* Footnote, empty state */
.reex-rankings-app .reex-footnote {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--reex-muted);
  font-style: italic;
}
.reex-rankings-app .reex-empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--reex-muted);
  font-size: 14px;
}
/* Responsive breakpoints */
@media (max-width: 1024px) {
  .reex-rankings-app .reex-card {
    grid-template-columns: 36px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "rank identity overall cta"
      "rank descriptor descriptor descriptor"
      "scores scores scores scores";
    gap: 6px 12px;
  }
  .reex-rankings-app .reex-card-scores {
    padding-top: 8px;
    border-top: 1px solid var(--reex-row-alt);
  }
}
@media (max-width: 720px) {
  /* Sticky nav is 60px tall on mobile; push drawer + backdrop below it. */
  .reex-rankings-app .reex-drawer-backdrop {
    top: 60px;
  }
  .reex-rankings-app .reex-drawer {
    top: 60px;
    height: calc(100vh - 60px);
    width: 100%;
  }
  .reex-rankings-app .reex-tab {
    padding: 10px 10px;
    font-size: 13px;
    flex: 1 1 auto;
    text-align: center;
  }
  .reex-rankings-app .reex-card {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank identity overall"
      "descriptor descriptor descriptor"
      "scores scores scores"
      "cta cta cta";
    gap: 6px 12px;
  }
  .reex-rankings-app .reex-card-cta {
    justify-content: flex-end;
  }
  .reex-rankings-app .reex-toolbar {
    flex-direction: column;
    gap: 8px;
  }
  .reex-rankings-app .reex-toolbar-search input {
    width: 100%;
  }
  .reex-rankings-app .reex-toolbar-search {
    width: 100%;
  }
  .reex-rankings-app .reex-sort-bar {
    padding: 6px 10px;
  }
  .reex-rankings-app .reex-sort-pill {
    padding: 4px 10px;
    font-size: 11px;
  }
}