/* The landing leaderboard (#ranked-band).
   2026-10-23 redesign, the founder: "redesign the leaderboard look".
   The previous board was eight bordered cards with gold/silver/bronze
   rank chips, a repeated "Rating" label on every row and an underlined
   "Profile details" link under each name. It read as a widget.

   This is a ruled table in the site's own type: one column header, rows
   separated by rules, the rank as a numeral, the person round, the name
   as the link, a record line under it, and the rating as a number with a
   bar scaled to the visible board so the gaps between people read at a
   glance. Everything paints on the theme tokens, so the five themes get
   the same board without a per-theme override block. The globe aside and
   every id/class the renderer and the pfp module write are unchanged. */
#ranked-band.ranked-band{
  width:min(1240px,calc(100vw - 48px));
  position:relative;left:50%;transform:translateX(-50%);
  margin:clamp(28px,3.4vw,46px) 0 clamp(30px,3.8vw,52px);
  padding:0 !important;
  scroll-margin-top:76px;
}
.rb-wrap{width:100%;font-family:var(--font-body);color:var(--text,#1a1a1f)}

/* ── Header ─────────────────────────────────────────────────────── */
/* 2026-10-23: the actions sit UNDER the copy, left-aligned. At the right
   end of a space-between row they landed on top of the globe column and
   read as the globe's buttons ("position this better"). */
.rb-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin:0 0 24px}
.rb-head-copy{min-width:0;display:flex;flex-direction:column;gap:10px}
.rb-title{margin:0;font-family:var(--font-display);font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--text,#1a1a1f)}
.rb-sub{margin:0;font-size:.92rem;line-height:1.45;color:var(--text-dim,#4b443d);max-width:62ch}
.rb-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none}
.rb-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:3px;border:1px solid var(--border-strong,rgba(0,0,0,.18));font-size:.86rem;font-weight:700;letter-spacing:-.005em;color:var(--text,#1a1a1f);text-decoration:none;transition:border-color .16s ease,background .16s ease,color .16s ease}
.rb-action:hover{border-color:var(--text,#1a1a1f)}
.rb-action--primary{border-color:var(--accent-solid,#b91c1c);background:var(--accent-solid,#b91c1c);color:#fff}
.rb-action--primary:hover{background:#991b1b;border-color:#991b1b}
/* Trade: the market's own green, outlined, so it reads as a second door
   and never competes with Start a round. */
.rb-action--trade{border-color:var(--rb-up,#15803d);color:var(--rb-up,#15803d)}
.rb-action--trade:hover{background:var(--rb-up,#15803d);border-color:var(--rb-up,#15803d);color:#fff}
.rb-action--quiet{border-color:transparent;padding:0 6px;color:var(--text-dim,#4b443d);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--border-strong,rgba(0,0,0,.18))}
.rb-action--quiet:hover{border-color:transparent;color:var(--text,#1a1a1f)}
#ranked-band{--rb-up:#15803d;--rb-down:#b91c1c}
html:not([data-theme="light"]) #ranked-band{--rb-up:#4ade80;--rb-down:#f87171}
/* Share price on a listed debater's row (2026-10-23). Painted only after
   /api/value-market answers, and only for debaters with an open market,
   so an unlisted row never shows a dead chip. */
#ranked-band .rb-share{display:inline-flex;align-items:baseline;gap:5px;padding:1px 7px;border:1px solid color-mix(in srgb,var(--rb-up) 45%,transparent);border-radius:3px;font-family:var(--font-mono);font-size:.7rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--rb-up);text-decoration:none;white-space:nowrap;transition:background .14s ease,color .14s ease}
#ranked-band .rb-share:hover{background:var(--rb-up);color:#fff}
#ranked-band .rb-share .rb-share-lab{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
#ranked-band .rb-share .rb-share-chg{font-size:.64rem}
#ranked-band .rb-share .rb-share-chg.is-down{color:var(--rb-down)}
#ranked-band .rb-share:hover .rb-share-chg{color:#fff}

/* ── Layout: board + globe ──────────────────────────────────────── */
.rb-main{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,33vw,436px);gap:clamp(26px,3.4vw,52px);align-items:start}
.rb-globe{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;position:sticky;top:88px;align-self:start}
.rb-globe-canvas-wrap{position:relative;display:flex;justify-content:center;align-items:center;width:100%;max-width:384px;aspect-ratio:1;min-width:220px;min-height:220px}
.rb-globe-canvas{width:100%;height:100%;display:block;-webkit-mask-image:radial-gradient(circle at 50% 52%, #000 80%, transparent 98%);mask-image:radial-gradient(circle at 50% 52%, #000 80%, transparent 98%)}
.rb-globe-caption{margin:0;max-width:360px;text-align:center;font-size:.92rem;line-height:1.5;color:var(--text-dim,#4b443d)}
.rb-globe-caption b{color:var(--accent-solid,#b91c1c);font-variant-numeric:tabular-nums}
@media(max-width:980px){
  .rb-main{grid-template-columns:1fr;gap:22px}
  .rb-globe{position:static}
  .rb-globe-canvas-wrap{max-width:320px;min-width:0;min-height:200px}
}

/* ── The table ───────────────────────────────────────────────────── */
.rb-stage{position:relative;border-top:3px solid var(--accent-solid,#b91c1c);color:var(--text,#1a1a1f)}
#ranked-band .rb-board{display:flex;flex-direction:column}
#ranked-band .rb-cols,
#ranked-band .rb-row{display:grid;grid-template-columns:44px 52px minmax(0,1fr) minmax(150px,220px) auto;align-items:center;gap:14px}
#ranked-band .rb-cols{padding:12px 10px 10px;border-bottom:1px solid var(--border-strong,rgba(0,0,0,.18));font-family:var(--font-mono);font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim,#4b443d)}
#ranked-band .rb-cols > span:first-child{text-align:center}
#ranked-band .rb-cols .rb-col-rating{text-align:left}
#ranked-band .rb-cols .rb-col-chal{min-width:92px}
#ranked-band .rb-row{position:relative;min-height:72px;padding:10px 10px;border-bottom:1px solid var(--border,rgba(0,0,0,.08));color:var(--text,#1a1a1f);text-decoration:none;cursor:pointer;transition:background .14s ease}
#ranked-band .rb-row:hover{background:var(--accent-soft,rgba(220,38,38,.06))}
/* The leader gets a red rule at the left edge and nothing else. The
   old gold / silver / bronze chips are gone: a podium treatment on a
   board whose whole point is the gap between people was decoration. */
#ranked-band .rb-row--top::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;background:var(--accent-solid,#b91c1c)}
#ranked-band .rb-rk{display:block;text-align:center;font-family:var(--font-mono);font-size:1.2rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--text-dim,#4b443d)}
#ranked-band .rb-row--top .rb-rk{color:var(--accent-solid,#b91c1c)}
#ranked-band .rb-rk--silver,#ranked-band .rb-rk--bronze{color:var(--text,#1a1a1f)}
/* People are round (2026-09-24). */
#ranked-band .rb-ava{position:relative;display:grid;place-items:center;width:52px;height:52px;overflow:hidden;border:1px solid var(--border-strong,rgba(0,0,0,.18));border-radius:50%;background:var(--bg-card,rgba(0,0,0,.03));color:var(--text,#1a1a1f);font-size:.8rem;font-weight:900}
#ranked-band .rb-ava img,#ranked-band .rb-ava svg{display:block;width:100%;height:100%;object-fit:cover}
#ranked-band .rb-ava .rb-ava-art,#ranked-band .rb-ava .rb-ava-motion{position:absolute;inset:0;display:block;width:100%;height:100%}
#ranked-band .rb-ava-motion{transform-origin:50% 50%}
#ranked-band .rb-ava img{position:relative;z-index:1}
#ranked-band .rb-ava img.db-pfp{position:absolute;inset:0;z-index:0}
#ranked-band .rb-ava--anon{border-style:dashed}
#ranked-band .rb-who{display:flex;min-width:0;flex-direction:column;gap:3px}
#ranked-band .rb-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.02rem;font-weight:750;letter-spacing:-.015em;color:var(--text,#1a1a1f);text-decoration:none}
#ranked-band .rb-nm:hover{color:var(--accent-solid,#b91c1c)}
#ranked-band .rb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.78rem;line-height:1.3;color:var(--text-dim,#4b443d)}
#ranked-band .rb-meta b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text,#1a1a1f)}
#ranked-band .rb-ideology{font-size:.78rem;color:var(--text-dim,#4b443d)}
#ranked-band .rb-lead{display:inline-flex;align-items:center;padding:1px 6px;border-radius:3px;background:var(--accent-solid,#b91c1c);color:#fff;font-family:var(--font-mono);font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
#ranked-band .rb-pts{display:contents}
/* Rating: the number, then a bar scaled across the visible board. The
   renderer sets --rb-bar on each row (30% floor so the lowest row still
   has a bar). */
#ranked-band .rb-metric{display:flex;flex-direction:column;gap:6px;min-width:0}
#ranked-band .rb-metric-value{display:block;font-family:var(--font-mono);font-size:1.22rem;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--text,#1a1a1f)}
#ranked-band .rb-metric-label{display:none}
#ranked-band .rb-bar{position:relative;height:4px;width:100%;border-radius:2px;background:var(--border,rgba(0,0,0,.08));overflow:hidden}
#ranked-band .rb-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--rb-bar,30%);border-radius:2px;background:var(--accent-solid,#b91c1c);opacity:.85}
#ranked-band .rb-row--top .rb-bar::after{opacity:1}
#ranked-band .rb-chal-btn{display:inline-flex;align-items:center;justify-content:center;min-width:92px;min-height:36px;padding:0 12px;border:1px solid var(--accent-solid,#b91c1c);border-radius:3px;font-size:.74rem;font-weight:700;color:var(--accent-solid,#b91c1c);text-decoration:none;transition:background .14s ease,color .14s ease}
#ranked-band .rb-chal-btn:hover{background:var(--accent-solid,#b91c1c);color:#fff}
/* The open seat. */
#ranked-band .rb-row--ghost{border-bottom:0;background:transparent}
#ranked-band .rb-row--ghost .rb-ava{border-style:dashed;background:transparent;color:var(--text-dim,#4b443d)}
#ranked-band .rb-row--ghost .rb-nm{color:var(--text-dim,#4b443d);font-weight:600}
#ranked-band .rb-ghost-cta{grid-column:4 / -1;justify-self:end;font-size:.82rem;font-weight:700;color:var(--accent-solid,#b91c1c);white-space:nowrap}
#ranked-band .rb-row--ghost:hover .rb-ghost-cta{text-decoration:underline;text-underline-offset:3px}
/* Loading and empty states. */
#ranked-band .rb-loading{display:flex;flex-direction:column}
#ranked-band .rb-load-row{display:grid;grid-template-columns:44px 52px 1fr 92px;align-items:center;gap:14px;min-height:72px;padding:10px;border-bottom:1px solid var(--border,rgba(0,0,0,.08))}
#ranked-band .rb-load-row i{display:block;height:12px;border-radius:2px;background:linear-gradient(90deg,var(--border,rgba(0,0,0,.08)),var(--border-strong,rgba(0,0,0,.16)),var(--border,rgba(0,0,0,.08)));background-size:220% 100%;animation:rbShimmer 1.2s linear infinite}
#ranked-band .rb-load-row i:nth-child(1){width:22px;justify-self:center}#ranked-band .rb-load-row i:nth-child(2){width:52px;height:52px;border-radius:50%}#ranked-band .rb-load-row i:nth-child(4){width:92px;justify-self:end}
#ranked-band .rb-empty{padding:32px 18px;border-bottom:1px solid var(--border,rgba(0,0,0,.08));text-align:center;color:var(--text-dim,#4b443d)}
#ranked-band .rb-empty b{display:block;margin-bottom:6px;font-size:1.05rem;color:var(--text,#1a1a1f)}
#ranked-band .rb-empty a{display:inline-block;margin-top:12px;font-weight:700;color:var(--accent-solid,#b91c1c)}
@keyframes rbShimmer{to{background-position:-220% 0}}
@keyframes rbAvaSpin{to{transform:rotate(360deg)}}
@keyframes rbAvaBreathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes rbAvaDrift{0%,100%{transform:translateX(-5%)}50%{transform:translateX(5%)}}
/* Motion runs on the .rb-ava-motion span (an HTML element the compositor
   owns), never on the <g> inside the art; see standings.js. */
#ranked-band .rb-ava-motion.rb-ava-spin{will-change:transform;animation:rbAvaSpin 30s linear infinite}
#ranked-band .rb-ava-motion.rb-ava-breathe{will-change:transform,opacity;animation:rbAvaBreathe 9s ease-in-out infinite}
#ranked-band .rb-ava-motion.rb-ava-drift{will-change:transform;animation:rbAvaDrift 22s ease-in-out infinite}

/* ── Phones ──────────────────────────────────────────────────────── */
@media(max-width:760px){
  #ranked-band.ranked-band{width:calc(100vw - 28px);margin-top:28px}
  .rb-head{gap:15px}
  .rb-actions{width:100%}
  .rb-action{flex:1 1 auto}
  #ranked-band .rb-cols,
  #ranked-band .rb-row{grid-template-columns:30px 44px minmax(0,1fr) 72px;gap:10px}
  #ranked-band .rb-cols .rb-col-chal,#ranked-band .rb-row .rb-chal-btn{display:none}
  #ranked-band .rb-row{min-height:64px;padding:9px 6px}
  #ranked-band .rb-rk{font-size:1rem}
  #ranked-band .rb-ava{width:44px;height:44px}
  #ranked-band .rb-nm{font-size:.94rem}
  #ranked-band .rb-meta{font-size:.72rem}
  #ranked-band .rb-metric-value{font-size:1.06rem}
  #ranked-band .rb-ghost-cta{grid-column:3 / -1}
  #ranked-band .rb-load-row{grid-template-columns:30px 44px 1fr 72px;gap:10px;min-height:64px;padding:9px 6px}
}
@media(max-width:430px){
  .rb-title{font-size:1.72rem}
}
@media(prefers-reduced-motion:reduce){
  .rb-action,#ranked-band .rb-row{transition:none}
  #ranked-band .rb-load-row i,#ranked-band .rb-ava-spin,#ranked-band .rb-ava-breathe,#ranked-band .rb-ava-drift{animation:none}
}

/* 2026-10-29: the header is one plain label above the board. */
.rb-head{margin:0 0 14px}
.rb-label{margin:0;font-family:var(--font-display);font-size:1.2rem;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--text,#1a1a1f)}
.rb-label-link{display:inline-flex;align-items:baseline;gap:.4em;color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease}
.rb-label-arrow{font-weight:700;opacity:.55;transition:transform .14s ease,opacity .14s ease}
.rb-label-link:hover,.rb-label-link:focus-visible{color:var(--accent-solid,#b91c1c);border-bottom-color:currentColor}
.rb-label-link:hover .rb-label-arrow,.rb-label-link:focus-visible .rb-label-arrow{opacity:1;transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.rb-label-link,.rb-label-arrow{transition:none}}