/* The dig.bench leaderboard, ported from digbench.ai (Prefrontal-AI/public-web-pages):
   the DIG theme tokens and primitives from _components/digTheme.tsx (light theme),
   then the style blocks of DigLeaderboard.tsx, TierProgressChart.tsx and
   StrengthChart.tsx, verbatim apart from the template values filled in
   (7 tiers, 2 agentic tiers). leaderboard.js draws into .dig-root. */

/* ---- digTheme.tsx: tokens, light theme ---- */
.dig-root {
  --font-inter: "Google Sans Flex"; --font-geist-mono: "DM Mono";
  --sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  --col: 960px;
  --radius: 9px;
  color: var(--ink);
  font: 400 15px/1.6 var(--sans);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
.dig-root[data-theme="light"] {
  --ground: #f7f8fa; --surface: #ffffff; --sunken: #f1f3f6;
  --ink: #15171c; --ink-2: #3e434d; --muted: #6b7178; --faint: #848b94;
  --line: #e4e6ea; --line-2: #d2d6dd;
  --acc: #3f5f96; --acc-fill: #93aee8; --acc-ink: #16233d; --acc-soft: #e9eef9;
  --mark: #1c1f26; --mark-soft: #ccd1d8; --unit-off: #e8eaee;
  --warn: #a5620f; --ok: #127a53; --danger: #c4362c; --info: #2f6ae0;
  --shadow: 0 1px 2px rgba(16, 20, 30, 0.04);
  color-scheme: light;
}
.dig-root *, .dig-root *::before, .dig-root *::after { box-sizing: border-box; }
.dig-root :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 3px; }

/* Embedding in the blog: the site's column is 960px less its gutters, so the card
   breaks out of the 720px text column to the same 904px; and the blog's own
   .body / .body p rules are undone inside it. */
.lb-embed { margin: 1.6em -92px 1.8em; }
@media (max-width: 1000px) { .lb-embed { margin: 1.4em 0 1.6em; } }
.dig-root .body { max-width: none; margin: 0; padding: 0; }

.dig-root .dg-lab { font: 500 10.5px/1 var(--mono); letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted); }
.dig-root .dg-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); }
.dig-root .dg-cardhead { display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.dig-root p.dg-cap { margin: 11px auto 0; max-width: 70ch; text-align: center;
  font-size: 12px; line-height: 1.55; color: var(--muted); text-wrap: balance; }

/* Instant hover card */
.dig-root [data-tip] { position: relative; }
.dig-root [data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); z-index: 40;
  width: max-content; max-width: min(88vw, 400px); padding: 6px 10px;
  border-radius: 6px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink);
  font: 400 11px/1.45 var(--mono); letter-spacing: 0;
  text-align: left; text-transform: none; white-space: pre-line;
  box-shadow: var(--shadow); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .dig-root *, .dig-root *::before, .dig-root *::after {
    transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- DigLeaderboard.tsx ---- */
.lb-views { display: flex; justify-content: center; gap: 2px; margin: 14px 0 0; }
.lb-views button { padding: 6px 13px; border: 1px solid var(--line); border-radius: 7px;
  background: none; font: 400 12px/1 var(--mono); color: var(--muted);
  cursor: pointer; transition: color .12s, background .12s, border-color .12s; }
.lb-views button:hover { color: var(--ink); background: var(--sunken); }
.lb-views button[aria-selected="true"] { background: var(--acc-soft);
  border-color: color-mix(in srgb, var(--acc) 26%, transparent); color: var(--acc); }
.lb-views button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.lb .body { margin-top: 22px; }
.dig-root p.lb-cap { margin-top: 12px; max-width: none; }
@media (max-width: 620px) { .lb-views button { padding: 6px 9px; font-size: 11px; } }

/* ---- TierProgressChart.tsx (the Combined view) ---- */
.tp { --c-anthropic: #e8845a; --c-anthropic-2: #c96248;
  --c-openai: #a7b0bc; --c-google: #6ea8f0;
  --c-kimi: #8d7ae0; --c-glm: #a48ae8; --c-deepseek-pro: #bda5f0;
  --c-deepseek-flash: #d0bef6; --c-qwen: #e0d5fa;
  --human: #f2c94c; }
.dig-root[data-theme="light"] .tp { --c-anthropic: #b5744c;
  --c-anthropic-2: #9e4f3c; --c-openai: #5a626e; --c-google: #4a7ab0;
  --c-kimi: #5a4894; --c-glm: #7a68ad; --c-deepseek-pro: #9282c1;
  --c-deepseek-flash: #a99bd0; --c-qwen: #bdb1dd;
  --human: #8f6c00; }
.tp-plot { padding-left: 26px; }
.tp-ytitle { position: absolute; right: calc(100% + 10px); top: 50%;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  font: 400 10.5px/1 var(--mono); color: var(--muted);
  white-space: nowrap; }
.tp-grid { flex: 1; min-width: 0; display: grid;
  grid-template-columns: auto repeat(7, minmax(0, 1fr))
    22px repeat(2, minmax(0, 1fr));
  gap: 0 14px; align-items: end; padding: 4px 4px 0; }
.tp-yaxis { position: relative; height: 168px; width: 3em;
  margin-bottom: 4px;
  padding-right: 10px; border-right: 1px solid var(--line);
  font: 400 10.5px/1 var(--mono); color: var(--muted); }
.tp-tick { position: absolute; right: 10px; transform: translateY(-50%);
  white-space: nowrap; }
.tp-axiscol { flex: none; }
.tp-xlab:empty::before { content: "\200b"; }
.tp-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tp-track { position: relative; display: flex; align-items: flex-end;
  justify-content: center; gap: 2px; height: 172px; width: 100%;
  padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.tp-grid > .tp-col { grid-row: 2; }
.tp-leggroup { grid-row: 1; align-self: start; min-width: 0;
  margin: 0 0 18px; }
.tp-leggroup-models { grid-column: 2 / 9; }
.tp-leggroup-coding { grid-column: 10 / -1;
  justify-self: end; width: max-content; max-width: none; }
.tp-humanrow { grid-column: 2 / 9; pointer-events: none; }
.tp-humanrow-coding { grid-column: 10 / -1; }
.tp-humantrack { position: relative; height: 168px; width: 100%;
  margin-bottom: 4px; }
.tp-human { position: absolute; left: 0; right: 0;
  border-top: 2px dashed var(--human); pointer-events: auto; }
.tp-human-cap { position: absolute; top: 3px; right: 4px;
  white-space: nowrap; font: 500 10.5px/1 var(--mono); color: var(--human); }
.tp-bar { width: 100%; max-width: 9px; min-height: 1px; border-radius: 2px 2px 0 0; }
.tp-bar[data-state="zero"] { min-height: 2px; }
.tp-bar[data-state="unrun"] { background: none !important; min-height: 5px;
  border-left: 1px dashed var(--line-2); border-right: 1px dashed var(--line-2); }
.tp-xlab { font: 400 11px/1 var(--mono); color: var(--muted); }
.tp-legtitle { display: block; margin: 0 0 8px; font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tp-leg { display: grid; gap: 8px 20px;
  font: 400 11.5px/1.4 var(--mono); color: var(--ink-2); }
.tp-leggroup-models .tp-leg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp-leggroup-coding .tp-nm { white-space: nowrap; }
.tp-hatch { background-image: repeating-linear-gradient(45deg,
  rgba(255, 255, 255, 0.7) 0 2px, transparent 2px 6px); }
.tp-key { display: grid; grid-template-columns: 9px minmax(0, 1fr);
  align-items: center; gap: 8px; min-width: 0; }
.tp-sw { width: 9px; height: 9px; border-radius: 2px; }
.tp-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-xtitle { grid-column: 2 / 9; margin-top: 12px; text-align: center;
  font: 400 10.5px/1.4 var(--mono); color: var(--muted); }
@media (max-width: 760px) {
  .tp-grid { gap: 0 7px; }
  .tp-track { height: 136px; }
  .tp-yaxis, .tp-humantrack { height: 132px; }
  .tp-leggroup-models, .tp-leggroup-coding { grid-column: 1 / -1;
    justify-self: stretch; width: auto; }
  .tp-leggroup-models { grid-row: 1; }
  .tp-leggroup-coding { grid-row: 2; }
  .tp-grid > .tp-col { grid-row: 3; }
  .tp-leggroup-models .tp-leg { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .tp-bar { max-width: 6px; }
  .tp-leg { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 8px 16px; font-size: 10.5px; }
  .tp-grid { grid-template-columns: auto repeat(7, minmax(0, 1fr))
    10px repeat(2, minmax(0, 1fr)); }
  .tp-human-cap { white-space: normal; max-width: 46vw; text-align: right; }
}

/* ---- StrengthChart.tsx (the Tier breakdown view) ---- */
.ex-filter { display: flex; gap: 2px; padding: 10px 12px; overflow-x: auto;
  justify-content: center; justify-content: safe center;
  border-bottom: 1px solid var(--line); }
.ex-filter button { flex: none; padding: 6px 11px; border: 1px solid transparent;
  border-radius: 6px; background: none; cursor: pointer; color: var(--muted);
  font: 500 12px/1 var(--mono); letter-spacing: 0.02em; white-space: nowrap; }
.ex-filter button:hover { color: var(--ink); background: var(--sunken); }
.ex-filter button[aria-pressed="true"] { color: var(--acc-ink);
  background: var(--acc-fill); border-color: var(--acc-fill); }
.ex .dg-cardhead { position: relative; }
.ex-row { display: grid; align-items: center;
  grid-template-columns: 26px minmax(112px, 1fr) minmax(190px, 2.3fr) minmax(58px, auto);
  gap: clamp(8px, 1.6vw, 16px); padding: 9px 16px;
  border-bottom: 1px solid var(--line); }
.ex-row:last-child { border-bottom: 0; }
.ex-row .rk { font: 500 12px/1 var(--mono); color: var(--muted);
  font-variant-numeric: tabular-nums; }
.ex-row .nm { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.ex-unrun { font-style: normal; font-size: 11px; color: var(--faint);
  letter-spacing: 0.02em; }
.ex-row .v { text-align: right; font: 500 14px/1 var(--mono);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
/* .ex-top here is the site's .top, renamed so the blog's header rule of that name
   stays out of it */
.ex-row.ex-top .rk, .ex-row.ex-top .v { color: var(--acc); }
.ex-group { padding: 13px 16px 7px; border-bottom: 1px solid var(--line);
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted); }
.ex-rail { position: relative; height: 13px; }
.ex-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1.5px;
  background: var(--mark); transition: width .22s ease; }
.dig-root[data-theme="light"] .ex .ex-bar { background: #7b8698; }
@media (prefers-reduced-motion: reduce) { .ex-bar { transition: none; } }
@media (max-width: 760px) {
  .ex-row { grid-template-columns: 22px 1fr auto; gap: 4px 10px; padding: 11px 12px; }
  .ex-row .rk, .ex-row .nm, .ex-row .v { grid-row: 1; }
  .ex-rail { grid-column: 2 / -1; margin-top: 4px; }
}