/* ============================================================================
   Contributor profile — /leaderboard/contributors/<slug>
   ----------------------------------------------------------------------------
   Layers on top of leaderboard.css: the --lb-* tokens, .lb-avatar, .lb-cmd,
   .lb-btn, .lb-copy and .lb-page-btn all come from there, so one install reads
   the same here as it does on the board. Only profile-specific composition
   lives in this file.

   The page is a community profile, not an account dashboard: identity leads,
   the two datasets stay visibly apart, and every section can stand alone when
   the other has nothing in it.
   ============================================================================ */

.cp { background: var(--lb-raised); color: var(--lb-ink); font-family: var(--lb-sans); }
.cp-wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--lb-pad); }
.cp-section { padding-block: clamp(40px, 6vw, 64px); }

/* --------------------------------------------------------------- crumbs - */

.cp-crumbs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-top: 26px; font-size: 13px; color: var(--lb-ink-3); }
.cp-crumbs a { color: var(--lb-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.cp-crumbs a:hover { color: var(--lb-amber-deep); }
.cp-crumbs .sep { color: var(--lb-ink-3); }  /* a hairline token is a 1px
   border colour; as text it rendered at 1.47:1 against the page and was
   effectively invisible. --lb-ink-3 is the muted TEXT token. */
.cp-crumbs .here { color: var(--lb-ink); }

/* ------------------------------------------------------------------ hero - */

.cp-hero { padding-block: clamp(32px, 4vw, 52px) clamp(40px, 5vw, 64px); }
.cp-hero-inner { display: flex; align-items: flex-start; gap: clamp(22px, 3vw, 44px); }
/* The portrait anchors the hero without competing with the pseudonym: it is
   large enough to read as a character, small enough that the name stays the
   headline. */
.cp-portrait { --av-box: 156px; flex: 0 0 auto; border-radius: 26px; }
.cp-portrait .lb-avatar-img { border-radius: inherit; }
.cp-identity { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }

.cp-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-eyebrow .k {
  font-family: var(--lb-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lb-ink-3);
}
.cp-eyebrow .rule { width: 1px; height: 10px; background: var(--lb-hairline-strong); }
.cp-eyebrow .live {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--lb-mono);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lb-green-ink);
}
.cp-eyebrow .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--lb-green); flex: 0 0 auto; }

/* Name wraps rather than truncating — the pseudonym is the identity, so it is
   always shown whole. */
/* One text flow, not two flex items: the pseudonym wraps at its own hyphens
   and the tag rides along with the final segment, so it is never orphaned. */
.cp-name { margin: 0; }
.cp-name b {
  display: block; font-family: var(--lb-mono); font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.14; color: var(--lb-ink);
  overflow-wrap: break-word;
}
.cp-tail { white-space: nowrap; }
/* Named apart from `.cp-tag`, which is the section status pill further down —
   sharing the name silently rendered the pseudonym suffix as a 10px pill. */
.cp-name-tag {
  font-family: var(--lb-mono); font-size: clamp(17px, 2vw, 26px); font-weight: 500;
  font-style: normal; color: var(--lb-ink-3); margin-left: 0.28em;
}

.cp-privacy { display: flex; align-items: flex-start; gap: 9px; max-width: 660px; margin: 0; }
.cp-privacy svg { flex: 0 0 auto; margin-top: 3px; color: var(--lb-ink-3); }
.cp-privacy span { font-size: 14px; line-height: 22px; color: var(--lb-ink-2); text-wrap: pretty; }

.cp-facts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-fact {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--lb-hairline-strong);
  border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--lb-ink);
}
.cp-fact svg { color: var(--lb-ink-3); flex: 0 0 auto; }
.cp-facts .note { font-size: 13px; color: var(--lb-ink-3); }

.cp-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* The hero rail carries every earned badge; repeated cards elsewhere cap at
   two plus a count. Wraps on desktop, two balanced rows at tablet, and a
   wrapping rail on mobile — labels never shrink below the readable floor. */
.cp-badges { margin-top: 2px; }

/* ---------------------------------------------------------------- impact - */

.cp-impact {
  background: var(--lb-rail);
  border-top: 1px solid var(--lb-hairline); border-bottom: 1px solid var(--lb-hairline);
  padding-block: 34px;
}
.cp-stats { display: flex; align-items: stretch; }
.cp-stat { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; padding-inline: 20px; }
.cp-stat:first-child { padding-left: 0; }
.cp-stat:last-child { padding-right: 0; }
.cp-stat + .cp-stat { border-left: 1px solid var(--lb-hairline-strong); }
.cp-stat b {
  font-family: var(--lb-mono); font-size: clamp(26px, 2.6vw, 34px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.1; color: var(--lb-ink);
}
/* A zero is a real answer, not a gap — stated, but not shouted. */
.cp-stat[data-zero="true"] b { color: var(--lb-ink-3); }
.cp-stat .lab { font-size: 13px; font-weight: 600; color: var(--lb-ink); }
.cp-stat .sub { font-size: 12px; line-height: 18px; color: var(--lb-ink-3); text-wrap: pretty; }

/* -------------------------------------------------------------- sections - */

.cp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.cp-head-copy { display: flex; flex-direction: column; gap: 10px; max-width: 760px; min-width: 0; }
.cp-tag {
  align-self: flex-start; font-family: var(--lb-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 999px; padding: 4px 9px; white-space: nowrap;
}
.cp-tag--board { color: var(--lb-green-ink); background: var(--lb-green-tint); border: 1px solid var(--lb-green-tint); }
.cp-tag--beta { color: var(--lb-amber-deep); background: var(--lb-amber-tint); border: 1px solid var(--lb-amber-tint); }
/* Profile section titles sit one step below the page's own hero and its
   closing CTA — Paper puts them at 38/42 on desktop. The `h2` in the selector
   is required: leaderboard.css carries an element rule for `.lb h2`, and this
   page is inside `.lb`, so a bare class loses on specificity and collapses to
   the subordinate 24px. */
:root { --cp-h2: 26px; }
@media (min-width: 768px)  { :root { --cp-h2: 30px; } }
@media (min-width: 1024px) { :root { --cp-h2: 34px; } }
@media (min-width: 1440px) { :root { --cp-h2: 38px; } }

.cp h2.cp-h2, .cp-h2 {
  font-size: var(--cp-h2); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.1; margin: 0; color: var(--lb-ink); text-wrap: balance;
}
.cp-lede { margin: 0; font-size: 15px; line-height: 24px; color: var(--lb-ink-2); text-wrap: pretty; }

.cp-beta-section { background: var(--lb-canvas); border-top: 1px solid var(--lb-hairline); }

/* ----------------------------------------------------------------- table - */

.cp-table { width: 100%; border: 1px solid var(--lb-hairline); border-radius: var(--lb-radius); overflow: hidden; background: var(--lb-raised); }
.cp-row { display: flex; align-items: center; gap: 0; width: 100%; padding: 15px 20px; }
.cp-row + .cp-row, .cp-thead + .cp-row { border-top: 1px solid var(--lb-hairline); }
.cp-thead { background: var(--lb-rail); border-bottom: 1px solid var(--lb-hairline); padding-block: 12px; }
.cp-thead span {
  font-family: var(--lb-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lb-ink-3);
}
/* Fixed lanes, so the number column never moves between rows. */
.cp-c-model { flex: 1; min-width: 0; font-family: var(--lb-mono); font-size: 13.5px; color: var(--lb-ink); overflow-wrap: anywhere; }
.cp-c-machine { width: 160px; flex: 0 0 auto; font-size: 13px; color: var(--lb-ink-2); }
.cp-c-value { width: 150px; flex: 0 0 auto; text-align: right; font-family: var(--lb-mono); font-size: 17px; font-weight: 700; color: var(--lb-ink); white-space: nowrap; }
.cp-c-value i { font-family: var(--lb-sans); font-size: 11.5px; font-weight: 400; font-style: normal; color: var(--lb-ink-3); }
.cp-c-version { width: 120px; flex: 0 0 auto; text-align: right; font-family: var(--lb-mono); font-size: 12px; color: var(--lb-ink-3); }
.cp-c-date { width: 110px; flex: 0 0 auto; text-align: right; font-size: 12.5px; color: var(--lb-ink-3); }
.cp-c-go { width: 34px; flex: 0 0 auto; display: flex; justify-content: flex-end; color: var(--lb-amber-deep); }
a.cp-row { text-decoration: none; color: inherit; }
a.cp-row:hover { background: var(--lb-hover); }
a.cp-row:hover .cp-c-model { color: var(--lb-amber-deep); }

.cp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 14px 20px; background: var(--lb-rail); font-size: 12.5px; color: var(--lb-ink-3);
}
.cp-foot-note { min-width: 0; text-wrap: pretty; }

/* ---------------------------------------------------------- beta journal - */

.cp-timeline { display: flex; flex-direction: column; width: 100%; }
.cp-day { display: flex; align-items: center; gap: 14px; width: 100%; padding-bottom: 14px; }
.cp-day + .cp-entry { border-top: 1px solid var(--lb-hairline); }
.cp-timeline > .cp-day:not(:first-child) { padding-top: 26px; }
.cp-day .d { font-family: var(--lb-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lb-ink-3); white-space: nowrap; }
.cp-day .line { flex: 1; height: 1px; background: var(--lb-hairline); }
.cp-day .n { font-size: 12px; color: var(--lb-ink-3); white-space: nowrap; }
.cp-day .first { font-size: 12px; color: var(--lb-green-ink); white-space: nowrap; }

.cp-entry { display: flex; align-items: flex-start; gap: 20px; width: 100%; padding: 20px 0; border-top: 1px solid var(--lb-hairline); }
.cp-task {
  width: 74px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 0; border: 1px solid var(--lb-hairline-strong); border-radius: 999px;
  font-family: var(--lb-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lb-ink-2);
}
.cp-entry-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.cp-entry-model { font-family: var(--lb-mono); font-size: 13.5px; color: var(--lb-ink); overflow-wrap: anywhere; }
/* Exact repo id under the alias — the alias is the name, the repo id is the identity. */
.cp-entry-repo { font-family: var(--lb-mono); font-size: 11px; color: var(--lb-ink-3); overflow-wrap: anywhere; }
.cp-cta-lede a { color: var(--lb-amber-deep); text-decoration: none; font-weight: 500; }
.cp-cta-lede a:hover { text-decoration: underline; }
.cp-entry-meta { font-size: 12.5px; line-height: 19px; color: var(--lb-ink-3); text-wrap: pretty; }
.cp-entry-result { width: 250px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.cp-entry-result b { font-family: var(--lb-mono); font-size: 19px; font-weight: 700; color: var(--lb-ink); white-space: nowrap; }
.cp-entry-result span { font-size: 12px; color: var(--lb-ink-3); text-align: right; }
.cp-entry-time { width: 70px; flex: 0 0 auto; text-align: right; font-size: 12px; color: var(--lb-ink-3); }

/* ------------------------------------------------------------ states - */

/* Deliberately composed, not a dashed placeholder: a pose, a heading, an
   explanation of which dataset is empty and why, and one route onward. */
.cp-empty {
  display: flex; align-items: center; gap: 28px; width: 100%; padding: 34px 36px;
  border: 1px solid var(--lb-hairline); border-radius: 14px; background: var(--lb-raised);
}
.cp-empty-art { width: 112px; height: 112px; flex: 0 0 auto; }
.cp-empty-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cp-empty-copy { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.cp-empty-copy h3 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; color: var(--lb-ink); }
.cp-empty-copy p { margin: 0; font-size: 14px; line-height: 22px; color: var(--lb-ink-2); max-width: 620px; text-wrap: pretty; }
.cp-empty-copy a { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--lb-amber-deep); text-decoration: none; }
.cp-empty-copy a:hover { text-decoration: underline; text-underline-offset: 3px; }

.cp-error {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 18px 20px;
  border: 1px solid var(--lb-error-line); border-radius: var(--lb-radius);
  background: var(--lb-error-tint); color: var(--lb-error); font-size: 13.5px; line-height: 21px;
}
.cp-error svg { flex: 0 0 auto; margin-top: 2px; }

/* Skeletons reserve the real boxes, so nothing shifts when data lands. */
.cp-skel { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.cp-skel i { display: block; height: 12px; border-radius: 6px; background: var(--lb-rail); }
.cp-skel-row { display: flex; align-items: center; gap: 16px; width: 100%; padding: 15px 20px; border-top: 1px solid var(--lb-hairline); }
.cp-skel-row i:first-child { flex: 1; }
.cp-skel-row i:last-child { width: 120px; }
@media (prefers-reduced-motion: no-preference) {
  .cp-skel i, .cp-skel-row i { animation: cp-pulse 1.4s ease-in-out infinite; }
  @keyframes cp-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.55 } }
}

/* --------------------------------------------------------------- the CTA - */

/* The ending carries real weight: this is where a reader decides to join. */
.cp-cta {
  border-top: 1px solid var(--lb-hairline);
  padding-block: clamp(64px, 9vw, 124px);
  display: flex; align-items: center;
  min-height: min(760px, 100svh);
}
.cp-cta > .cp-wrap { width: 100%; }
.cp-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 960px; margin: 0 auto; text-align: center; }
.cp-cta-mascot { width: clamp(120px, 13vw, 176px); height: clamp(120px, 13vw, 176px); position: relative; }
.cp-cta-mascot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cp-cta-inner h2 {
  margin: 0; font-size: clamp(32px, 4.4vw, 58px); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.07; color: var(--lb-ink); text-wrap: balance;
}
.cp-cta-lede { margin: 0; font-size: clamp(15px, 1.7vw, 17px); line-height: 1.6; color: var(--lb-ink-2); max-width: 720px; text-wrap: pretty; }
.cp-cta .lb-cmd { width: min(620px, 100%); margin-top: 6px; }
.cp-trust { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 8px; }
.cp-trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lb-ink-2); }
.cp-trust-item b { color: var(--lb-ink); font-weight: 600; }
.cp-trust-item svg { flex: 0 0 auto; }
.cp-routes { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

/* Amber current page, per the Paper board. Scoped to the profile so the
   Leaderboard's own pager keeps its approved ink treatment. */
.cp .lb-page-btn[aria-current="page"] {
  background: var(--lb-amber-tint); border-color: var(--lb-amber); color: var(--lb-amber-deep);
}

/* ------------------------------------------------------- raw-data links - */

/* Code brackets, then "Open raw … JSON", then the external-link glyph. The
   label is what tells a reader they are leaving the designed site. */
.cp-raw { display: inline-flex; align-items: center; gap: 9px; }
.cp-raw .brackets { color: var(--lb-amber-deep); flex: 0 0 auto; }
.cp-raw .ext { color: var(--lb-ink-3); flex: 0 0 auto; }

/* ------------------------------------------------------------ responsive - */

@media (max-width: 1024px) {
  .cp-c-version { display: none; }
  .cp-entry-result { width: 190px; }
}

/* Six metrics: three abreast at tablet, then two, then stacked. */
@media (max-width: 1100px) {
  .cp-stats { flex-wrap: wrap; row-gap: 26px; }
  .cp-stat { flex: 1 1 calc(33.333% - 20px); }
  .cp-stat:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .cp-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cp-stat { flex: 1 1 calc(50% - 20px); }
  .cp-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}

@media (max-width: 760px) {
  .cp-hero-inner { flex-direction: column; gap: 20px; }
  .cp-portrait { --av-box: 92px; border-radius: 18px; }
  .cp-eyebrow { flex-direction: column; align-items: flex-start; gap: 7px; }
  .cp-eyebrow .rule { display: none; }
  .cp-empty { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .cp-empty-art { width: 80px; height: 80px; }
  /* The table stops being a table: each appearance becomes a stacked block so
     no field is dropped or squeezed. */
  .cp-thead { display: none; }
  .cp-row { flex-direction: column; align-items: flex-start; gap: 7px; padding: 16px; }
  .cp-c-machine, .cp-c-value, .cp-c-date { width: auto; text-align: left; }
  .cp-c-value { font-size: 21px; }
  .cp-c-go { display: none; }
  .cp-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cp-entry { flex-wrap: wrap; gap: 12px; }
  .cp-entry-copy { flex-basis: 100%; order: 2; }
  .cp-entry-result { width: auto; order: 3; align-items: flex-start; }
  .cp-entry-result span { text-align: left; }
  .cp-entry-time { order: 1; width: auto; margin-left: auto; }
  .cp-trust { flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
  .cp-routes { flex-direction: column; align-items: stretch; width: 100%; }
  .cp-routes > * { justify-content: center; }
}

@media (max-width: 420px) {
  .cp-stat { flex-basis: 100%; border-left: 0; padding-left: 0; padding-right: 0; }
  .cp-stat + .cp-stat { border-left: 0; }
  .cp-badges .lb-badge { font-size: 11px; padding: 4px 9px; }
}