/* =============================================================================
 * df-components.css — the REAL product components, extracted VERBATIM from
 * web/src/app.css (the shipped app) for reuse on the marketing site.
 *
 * Provenance, stated honestly: the canonical brand kit documents these as
 * ".board > .row" and ".cli-think", but neither class name exists in the shipped
 * app CSS. The real leaderboard row is .brow (with .sig / .score children), and
 * .cli-think lives in marketing/index.html, not df-shell.css. What follows is
 * what actually ships today.
 *
 * Source: web/src/app.css @ 4412ae2. Every range below is asserted to start and end at
 * brace depth 0, so no rule is ever cut in half (a mid-rule cut silently kills
 * CSS parsing for everything after it — it did, once).
 *   lines 810-932  rank / who / avatar / ident / handle / meta — the row identity cluster
 *   lines 973-995  verified seal + unverified cli pill
 *   lines 1748-1797  compact builder rows: .brow, the build-signature equalizer, the reticle score
 *
 * Tokens resolve from /df-shell.css. Do not hand-edit: re-extract from app.css
 * so the marketing site and the app can never drift.
 * ============================================================================= */

/* ---- app.css:810-932 — rank / who / avatar / ident / handle / meta — the row identity cluster ---- */

/* rank ------------------------------------------------------- */
.rank {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 1rem;
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.rank.podium { color: var(--ink); }

.rank.top { color: var(--accent); }

/* teal brackets on the leader's rank, echoing the build[board] wordmark */
.rank .bk { color: var(--teal); }

/* Rank COLUMN vs sort COLUMN are distinct (spec gap-closing §0.6 BLOCKER): the rank always
   reflects Build Score position, never the row's index in the active sort. When the active
   sort is NOT Build Score, the whole column renders dimmed — it's shown for context, but
   Build Score isn't what ordered this list. */
.rank.inactive { opacity: .55; font-size: .82rem; }

/* builder identity ------------------------------------------ */
.who {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.avatar {
  position: relative;
  overflow: hidden;
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  border: 1px solid var(--ink);
}

/* GitHub avatar overlay: covers the initials; hides itself on load error, revealing them. */
.av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.row.leader .avatar { background: var(--accent); border-color: var(--accent); }

.ident {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.handle-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.handle {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.handle:hover { color: var(--accent); text-decoration: none; }

/* verified check — domain-link / social verifiability */
.check {
  display: inline-flex;
  width: 13px;
  height: 13px;
  color: var(--teal);
  flex: none;
}

.check svg { width: 100%; height: 100%; display: block; }

/* identity meta line: company - country - linked socials */
.meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: 0.02em;
  color: var(--gray-500);
  white-space: nowrap;
}

.co {
  color: var(--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sep { color: var(--gray-300); }

/* country as a mono ISO code chip (no flag emoji) */
.cc {
  font-weight: 700;
  font-size: .54rem;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  padding: .08rem .3rem;
  border: 1px solid var(--gray-300);
  flex: none;
}

/* ---- app.css:973-995 — verified seal + unverified cli pill ---- */

/* verified SEAL (badge-check) next to a verified handle/name */
.vbadge { display: inline-flex; width: 15px; height: 15px; color: var(--teal); flex: none; vertical-align: middle; }
.vbadge svg { width: 100%; height: 100%; display: block; }

/* unverified "cli" pill — the counterpart to the verified seal. A CLI/curl submission
   that hasn't been GitHub-verified. Muted by design: it's a status, not a demerit. */
.clipill {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .5rem;
  letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--gray-500);
  padding: .06rem .28rem;
  background: var(--gray-100);
  border: 1px solid var(--line);
  border-radius: 2px;
  vertical-align: middle;
}

/* ---- app.css:1748-1797 — compact builder rows: .brow, the build-signature equalizer, the reticle score ---- */
/* compact builder rows (right) */
.brow {
  position: relative;
  z-index: 1;
  min-height: 60px;
  display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) 4.4rem 4.8rem;
  align-items: center; gap: 0.7rem; padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background .14s var(--ease);
}
.brow:last-child { border-bottom: 0; }
.brow:hover { background: var(--gray-50); }
.brow.leader { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.brow.leader:hover { background: var(--accent-soft); }
.brow.mine:not(.leader) { box-shadow: inset 3px 0 0 var(--teal); background: var(--teal-soft); }
.brow .avatar { width: 32px; height: 32px; font-size: .72rem; }
.brow.leader .avatar { background: var(--accent); border-color: var(--accent); }
.brow .handle { font-size: .84rem; }
.brow .who { gap: 0.6rem; }
.cobadge {
  font-family: var(--mono); font-weight: 700; font-size: .5rem;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--gray-600);
  border: 1px solid var(--gray-300); padding: 0.08rem 0.3rem; white-space: nowrap;
}
.cobadge.ver { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* The badge doubles as the org's site link (its logo is pulled from the domain), so as an <a> it's
   clickable — the border tracks to the text colour on hover. */
a.cobadge { text-decoration: none; cursor: pointer; }
a.cobadge:hover { border-color: currentColor; }

/* THE SIGNATURE — build-signature equalizer (4 axes O/E/Q/C) */
.sig { display: inline-flex; align-items: flex-end; gap: 4px; justify-self: center; }
.sig .ax { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 11px; }
.sig .track { width: 8px; height: 22px; background: var(--gray-100); position: relative; display: block; }
.sig .fill { position: absolute; bottom: 0; left: 0; right: 0; background: var(--accent); transition: height .3s var(--ease); }
.brow.leader .sig .fill { background: var(--teal); }
.sig .k { font: 700 .46rem/1 var(--mono); color: var(--gray-400); text-transform: uppercase; }

/* THE SIGNATURE — reticle-framed build score (champion only) */
.score { position: relative; display: inline-grid; place-items: center; justify-self: center; padding: 0.2rem 0.4rem; min-width: 0; }
.score .v { font: 800 1.2rem/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.score .k { margin-top: 3px; font: 700 .48rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); }
.brow.leader .score .v { color: var(--accent); }
.score .t { display: none; position: absolute; width: 6px; height: 6px; border: 1.5px solid var(--accent); }
.brow.leader .score .t { display: block; }
.score .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.score .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.score .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.score .br { bottom: 0; right: 0; border-left: 0; border-top: 0; }