/* Plain, conventional ranking-site styling: white page, navy header, blue links, grey table header. Light only. */
:root {
  --bg: #ffffff;
  --page: #f4f6f9;
  --ink: #1a1f36;
  --ink-2: #3c4257;
  --muted: #5a6275;
  --line: #e1e5ec;
  --navy: #0b2a5b;
  --blue: #1458c4;
  --blue-soft: #e8f0fc;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1200px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 15px/1.55 var(--font); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
.num, .mono, td.pct, td.score, .rk b { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
[hidden], tr[hidden] { display: none !important; }

/* Header */
.mast { background: var(--navy); color: #fff; }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.brand { color: #fff; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a { color: rgba(255,255,255,.85); font-weight: 500; font-size: 14.5px; padding: 7px 12px; border-radius: 6px; }
.nav a:hover { background: rgba(255,255,255,.1); text-decoration: none; color: #fff; }
.nav a[aria-current="page"] { background: #fff; color: var(--navy); }

/* Page heading */
.hero, .page-head { padding-block: 32px 18px; }
.hero { display: block; }
.kicker { display: none; }
h1 { font-size: clamp(26px, 3.6vw, 34px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--navy); }
.hero p.lede, .page-head p { font-size: 16px; color: var(--ink-2); max-width: 80ch; margin: 8px 0 0; }
.pledge { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pledge li { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; color: var(--ink-2); }
.edition { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-block: 10px; font-size: 13.5px; color: var(--muted); }
.edition b { color: var(--ink); font-weight: 600; }

/* Controls */
.controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; padding: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px 8px 0 0; border-bottom: 0; margin-top: 8px; }
.ctl { display: grid; gap: 5px; min-width: 0; }
.ctl label, .ctl .lab { font-size: 12px; font-weight: 600; color: var(--muted); }
.ctl input, .ctl select { font: 500 14.5px/1.2 var(--font); color: var(--ink); background: #fff; border: 1px solid #878fa0; border-radius: 6px; padding: 9px 11px; min-width: 0; }
.ctl.grow { flex: 1 1 240px; }
.ctl.grow input { width: 100%; }
.seg { display: inline-flex; border: 1px solid #878fa0; border-radius: 6px; overflow: hidden; }
.seg button { font: 600 14px/1 var(--font); color: var(--ink-2); background: #fff; border: 0; padding: 10px 13px; cursor: pointer; }
.seg button + button { border-left: 1px solid #878fa0; }
.seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.viewnote { font-size: 13px; color: var(--muted); margin: 0; padding: 0 16px 12px; background: var(--bg); border: 1px solid var(--line); border-top: 0; border-bottom: 0; }

/* Ranking table */
.board { background: var(--bg); border: 1px solid var(--line); border-radius: 0 0 8px 8px; overflow: hidden; }
.board-scroll { overflow-x: auto; }
table.rank { width: 100%; border-collapse: collapse; min-width: 720px; }
table.rank th { background: #eef1f6; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.rank th.r, table.rank td.r { text-align: right; }
table.rank td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.rank tbody tr:nth-child(even):not(.group) { background: #fafbfd; }
table.rank tbody tr:hover:not(.group) { background: var(--blue-soft); }
td.rk { width: 80px; }
.rk b { font-weight: 700; font-size: 17px; color: var(--navy); }
.rk b.band { font-size: 14px; }
.uni a { font-weight: 600; font-size: 15px; color: var(--ink); }
.uni a:hover { color: var(--blue); }
.uni small { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; }
td.score { font-weight: 700; font-size: 15px; color: var(--navy); }
td.pct { font-size: 14px; color: var(--ink-2); }
td.pct.on { color: var(--blue); font-weight: 600; }
td.range { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
tr.group td { background: var(--page); font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 8px 14px; }
.more { display: flex; justify-content: center; gap: 12px; padding: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.btn { font: 600 14px/1 var(--font); padding: 10px 16px; border-radius: 6px; border: 1px solid var(--navy); background: #fff; color: var(--navy); cursor: pointer; }
.btn:hover { background: var(--navy); color: #fff; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.axis, .pl { display: none; }
@media (max-width: 640px) {
  table.rank { min-width: 0; }
  table.rank .hide-sm { display: none; }
  table.rank th, table.rank td { padding-inline: 10px; }
  td.rk { width: 48px; }
  table.rank th { white-space: normal; }
  table.rank th, table.rank td { padding-inline: 8px; }
}
i.est { font-style: normal; color: var(--muted); }

/* Prose pages */
.prose { font-size: 16px; line-height: 1.65; color: var(--ink); max-width: 76ch; }
.prose h2 { font-size: 22px; font-weight: 700; color: var(--navy); margin: 36px 0 10px; }
.prose h3 { font-size: 17px; font-weight: 600; margin: 24px 0 6px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose code { font-size: 13.5px; background: #eef1f6; padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.prose .tbl { overflow-x: auto; margin: 8px 0 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.45; }
.prose th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: #eef1f6; }
.prose th, .prose td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding-block: 8px 56px; }
.two > article { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 28px 20px; min-width: 0; }
@media (max-width: 900px) { .two { grid-template-columns: minmax(0, 1fr); gap: 20px; } .two > article { padding: 4px 18px 16px; } }
.aside { font-size: 14px; color: var(--ink-2); align-self: start; display: grid; gap: 12px; }
.aside .card { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.aside h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--navy); }
.hash { font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }

/* University page */
.u-head { padding-block: 28px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; }
@media (max-width: 760px) { .u-head { grid-template-columns: minmax(0, 1fr); } }
.u-head h1 { font-size: clamp(26px, 4vw, 36px); }
.u-head .where { color: var(--muted); font-size: 14.5px; display: flex; gap: 14px; flex-wrap: wrap; }
.u-head .kicker { display: block; font-size: 13.5px; margin: 0 0 6px; }
.bigrank { background: var(--navy); color: #fff; border-radius: 8px; padding: 14px 20px; text-align: left; min-width: 220px; }
.bigrank .n { font-size: 40px; font-weight: 800; line-height: 1; }
.bigrank .n.band { font-size: 28px; }
.bigrank .sub { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 6px; }
.bigrank .sub + .sub { margin-top: 2px; }
.u-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding-block: 4px 56px; }
.panel { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; grid-column: span 6; min-width: 0; }
.panel.wide { grid-column: span 12; }
@media (max-width: 900px) { .panel { grid-column: span 12; } }
.panel h2 { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.panel p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-2); }
.meter { display: grid; grid-template-columns: 140px minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding-block: 8px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.meter:last-of-type { border-bottom: 0; }
.meter .bar { height: 8px; background: #eef1f6; border-radius: 4px; overflow: hidden; }
.meter .bar i { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
.meter .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; font-size: 14.5px; margin: 0; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv dd small { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.kv a.src { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 6px; border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; }
.kv a.src:hover { color: var(--blue); border-color: var(--blue); text-decoration: none; }
.fieldrow { display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(80px, 150px); gap: 12px; align-items: center; padding-block: 8px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.fieldrow:last-child { border-bottom: 0; }
.fieldrow .num { text-align: right; font-weight: 600; }
.spark svg { width: 100%; height: 120px; display: block; }
.spark .ln { fill: none; stroke: var(--blue); stroke-width: 2; }
.spark .gd { stroke: var(--line); stroke-width: 1; }
.spark .tx { fill: var(--muted); font: 10.5px var(--font); }
.spark .dt { fill: var(--blue); }
.others { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 600px) { .others { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.others div { background: #eef1f6; border-radius: 6px; padding: 12px; }
.others b { display: block; font-size: 22px; font-weight: 800; color: var(--navy); }
.others b.us { color: var(--blue); }
.others span { font-size: 12.5px; color: var(--muted); }
.note { font-size: 13px; color: var(--muted); }
.note a, .prose a, .kv dd, .hash { overflow-wrap: anywhere; }

/* Footer */
footer.site { background: var(--navy); color: rgba(255,255,255,.8); margin-top: 24px; padding-block: 22px 32px; font-size: 13.5px; }
footer.site .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
@media (max-width: 700px) { footer.site .wrap { grid-template-columns: minmax(0, 1fr); } }
footer.site a { color: #fff; }