/* OpenScores leaderboard - tokens follow the reference data-viz palette */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f3f2ee;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;
  --accent-ink: #1c5cab;
  --seq-100: #cde2fb; --seq-250: #86b6ef; --seq-400: #3987e5; --seq-450: #2a78d6; --seq-550: #1c5cab; --seq-700: #0d366b;
  --risk: #eb6834;
  --risk-ink: #b8451c;
  --risk-track: #fbe3d8;
  --good: #006300;
  --bad: #d03b3b;
  /* score bands (status palette: good / warning / critical, plus the neutral sequential hue) */
  --band-strong: #0ca30c; --band-fair: #2a78d6; --band-weak: #fab219; --band-concern: #d03b3b;
  --track: #e9e8e2;
  --shadow: 0 12px 40px rgba(11, 11, 11, 0.12);
  --radius: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232322; --ink: #ffffff; --ink-2: #c3c2b7;
    --muted: #898781; --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, 0.10);
    --accent: #3987e5; --accent-ink: #86b6ef;
    --seq-100: #104281; --seq-250: #1c5cab; --seq-400: #3987e5; --seq-450: #3987e5; --seq-550: #6da7ec; --seq-700: #b7d3f6;
    --risk: #d95926; --risk-ink: #f0a07f; --risk-track: #3a2419;
    --good: #0ca30c; --bad: #e66767; --track: #2c2c2a;
    --band-strong: #0ca30c; --band-fair: #3987e5; --band-weak: #fab219; --band-concern: #d03b3b;
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232322; --ink: #ffffff; --ink-2: #c3c2b7;
  --muted: #898781; --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, 0.10);
  --accent: #3987e5; --accent-ink: #86b6ef;
  --seq-100: #104281; --seq-250: #1c5cab; --seq-400: #3987e5; --seq-450: #3987e5; --seq-550: #6da7ec; --seq-700: #b7d3f6;
  --risk: #d95926; --risk-ink: #f0a07f; --risk-track: #3a2419;
  --good: #0ca30c; --bad: #e66767; --track: #2c2c2a;
  --band-strong: #0ca30c; --band-fair: #3987e5; --band-weak: #fab219; --band-concern: #d03b3b;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink); font-family: var(--font);
  font-size: 15px; line-height: 1.45;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 8px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark { width: 36px; height: 36px; border-radius: 10px; background: var(--accent); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; letter-spacing: -0.5px; }
.brand h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; }
.brand p { margin: 0; color: var(--ink-2); font-size: 13px; }
.nav { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.nav a { color: var(--ink-2); }
.nav a.active, .nav a:hover { color: var(--ink); }
.icon-btn { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 6px 10px; cursor: pointer; color: var(--ink-2); }
.icon-btn:hover { color: var(--ink); }

.banner { background: #fff7e0; color: #5a4300; border: 1px solid #f3dc9a; border-radius: 10px; padding: 10px 14px; margin: 10px 0 0; font-size: 14px; }
:root[data-theme="dark"] .banner { background: #2f2810; color: #f6dc8c; border-color: #5a4a18; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .banner { background: #2f2810; color: #f6dc8c; border-color: #5a4a18; } }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.tile .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.tile .value { font-size: 24px; font-weight: 600; margin-top: 2px; }
.tile .sub { color: var(--ink-2); font-size: 12px; }

/* controls */
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
.controls input[type="search"], .controls select {
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font: inherit; min-height: 38px;
}
.controls input[type="search"] { flex: 1 1 220px; }
.controls select { flex: 0 1 auto; max-width: 100%; }
.controls .count { color: var(--muted); font-size: 13px; margin-left: auto; }

/* table */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* fixed column widths: the project column takes whatever is left, so the
   board never grows wider than the page. Columns that narrow screens hide
   are all trailing ones, which keeps the fixed layout's cell-to-column
   mapping intact. */
col.c-rank { width: 44px; }
col.c-main { width: 190px; }
col.c-cat { width: 150px; }
col.c-stars { width: 86px; }
col.c-sub { width: 86px; }      /* fits "Sustainability" at 11px with 6px padding */
thead th {
  position: sticky; top: 0; background: var(--surface); z-index: 1; text-align: left; font-size: 12px;
  color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 10px 10px; border-bottom: 1px solid var(--grid); white-space: nowrap; cursor: pointer; user-select: none;
}
thead th.num { text-align: right; }
thead th[aria-sort="descending"], thead th[aria-sort="ascending"] { color: var(--ink); }
thead th .arrow { display: inline-block; width: 1em; opacity: 0.6; }
tbody td { padding: 10px 10px; border-bottom: 1px solid var(--grid); vertical-align: middle; overflow: hidden; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
tbody tr:last-child td { border-bottom: none; }
td.rank { color: var(--muted); font-variant-numeric: tabular-nums; width: 44px; text-align: right; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proj .name { font-weight: 600; }
.proj .owner { color: var(--muted); font-weight: 400; }
.proj .desc { color: var(--ink-2); font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { display: inline-block; font-size: 11px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; margin: 3px 4px 0 0; white-space: nowrap; }
.cat { font-size: 13px; color: var(--ink-2); }

/* score cells. The overall score is the primary figure: large number, full
   meter and 7-day delta. The five dimension scores are secondary: a small
   muted number over a short thin meter, so all of them fit without scrolling. */
.score { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 4px 8px; min-width: 104px; }
.score .d { grid-column: 2; font-size: 11px; line-height: 1; margin-top: -2px; }
.score .v { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.meter { height: 6px; border-radius: 4px; background: var(--track); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 4px; background: var(--band-fair); }
.meter.b-strong > i, .dot.b-strong { background: var(--band-strong); }
.meter.b-fair > i, .dot.b-fair { background: var(--band-fair); }
.meter.b-weak > i, .dot.b-weak { background: var(--band-weak); }
.meter.b-concern > i, .dot.b-concern { background: var(--band-concern); }
.score[title] { cursor: help; }
.score.overall { grid-template-columns: 52px 1fr; min-width: 150px; }
.score.overall .v { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; color: var(--ink); }
.score.overall .meter { height: 8px; }
thead th.main { color: var(--ink-2); white-space: normal; overflow: hidden; }
.score.sub { display: block; min-width: 0; width: 58px; }
.score.sub .v { display: block; text-align: left; font-size: 13px; font-weight: 500; color: var(--ink-2); line-height: 1.2; }
.score.sub .meter { height: 3px; width: 48px; margin-top: 3px; }
thead th.sub { text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 500; padding-left: 6px; padding-right: 6px; white-space: normal; }
td.sub { padding-left: 6px; padding-right: 6px; }
.delta { font-size: 11px; font-variant-numeric: tabular-nums; margin-left: 4px; white-space: nowrap; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--muted); }

.empty { padding: 40px; text-align: center; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; color: var(--muted); font-size: 12px; margin: 10px 2px 0; }
.legend-title { color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.legend-note { flex-basis: 100%; }
.foot { color: var(--muted); font-size: 12px; padding: 18px 0 40px; }

/* detail drawer */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 20; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(720px, 100%); background: var(--page);
  border-left: 1px solid var(--border); box-shadow: var(--shadow); transform: translateX(100%); transition: transform .2s;
  z-index: 21; overflow: auto; padding: 18px 20px 40px;
}
body.open .scrim { opacity: 1; pointer-events: auto; }
body.open .drawer { transform: none; }
.drawer-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.drawer h2 { margin: 0; font-size: 22px; letter-spacing: -0.2px; }
.drawer h2 small { color: var(--muted); font-weight: 400; font-size: 15px; }
.drawer .desc { color: var(--ink-2); margin: 6px 0 10px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-2); font-size: 13px; margin-bottom: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 10px 0 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.card .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.card .value { font-size: 26px; font-weight: 600; line-height: 1.1; margin: 2px 0; }
.card .band { color: var(--ink-2); font-size: 12px; }
.card .meter { height: 5px; margin: 4px 0 6px; }
.card.overall .meter { height: 8px; max-width: 260px; }
.card[title], .row[title] { cursor: help; }
.card.overall { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.card.overall .value { font-size: 40px; }
.spark { width: 100%; height: 64px; display: block; }
.spark .line { fill: none; stroke: var(--seq-450); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .area { fill: var(--seq-450); opacity: 0.12; }
.spark .dot { fill: var(--seq-450); stroke: var(--surface); stroke-width: 2; }
.spark .axis { stroke: var(--grid); stroke-width: 1; }
.spark-cap { color: var(--muted); font-size: 11px; margin-top: 2px; }

details.section { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin: 8px 0; }
details.section > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; list-style: none; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary .sum { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.comp { padding: 4px 14px 12px; }
.row { display: grid; grid-template-columns: 180px 1fr 44px 52px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; }
.row .k { color: var(--ink-2); }
.row .w { color: var(--muted); font-size: 11px; text-align: right; }
.row .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.row .meter { height: 8px; }
.row .hint { grid-column: 1 / -1; color: var(--muted); font-size: 11px; margin-top: -4px; }
.metrics { width: 100%; font-size: 13px; border-collapse: collapse; }
.metrics td { padding: 4px 6px; border-bottom: 1px solid var(--grid); }
.metrics td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metrics tr:last-child td { border-bottom: none; }
.flag { color: var(--muted); font-size: 11px; }

/* methodology page */
.prose { max-width: 820px; }
.prose h2 { margin-top: 32px; font-size: 20px; }
.prose h3 { margin-top: 22px; font-size: 16px; }
.prose p, .prose li { color: var(--ink-2); }
.prose code, .formula { font-family: var(--mono); font-size: 13px; }
.formula { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 10px 0; overflow-x: auto; color: var(--ink); white-space: pre; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 10px 0; }
.prose th, .prose td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.prose th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Narrow screens: keep the board readable without horizontal scrolling. The
   secondary dimension scores and the category move into the project drawer. */
@media (max-width: 1100px) {
  th.sub, td.sub, th.cat-col, td.cat-col { display: none; }
  col.c-cat, col.c-sub { width: 0; }
  col.c-main { width: 150px; }
  .score.overall { min-width: 120px; }
}
@media (max-width: 720px) {
  .brand p { display: none; }
  col.c-main { width: 108px; }
  col.c-stars { width: 62px; }
  tbody td, thead th { padding-left: 8px; padding-right: 8px; }
  .score.overall { grid-template-columns: 44px 1fr; min-width: 0; }
  .score.overall .v { font-size: 19px; }
  .score.overall .d { display: none; }
  .proj .chip { display: none; }
  td.num .delta { display: block; margin-left: 0; }
  .row { grid-template-columns: 1fr 44px 52px; }
  .row .meter { grid-column: 1 / -1; }
  .drawer { padding: 14px 16px 40px; }
  .card.overall { grid-template-columns: 1fr; }
}

/* catalog page */
.catalog-layout { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: start; }
.cats { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.cat-btn { display: flex; justify-content: space-between; gap: 8px; align-items: center; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; color: var(--ink-2); font-size: 13px; }
.cat-btn:hover { background: var(--surface-2); color: var(--ink); }
.cat-btn.active { background: var(--seq-100); color: var(--ink); font-weight: 600; }
.cat-btn b { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.cat-btn.active b { color: var(--ink-2); }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
table.catalog { min-width: 900px; }
table.catalog thead th { cursor: default; }
.more-wrap { padding: 12px; text-align: center; }
.pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 12px; border-top: 1px solid var(--grid); }
.pager .page-info { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; min-width: 180px; text-align: center; }
.icon-btn:disabled { opacity: 0.4; cursor: default; }
.icon-btn:disabled:hover { color: var(--ink-2); }
@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .cats { position: static; flex-direction: row; flex-wrap: wrap; }
}