/* Records and leaderboards page.
   Scoped to #records-root. Every class is prefixed rec- (plus shared pf-skel
   for skeletons). Colors, fonts and shadow come only from global CSS custom
   properties so light and dark mode flip automatically. */

.rec-wrap { width: 100%; }

/* ---------- skeletons ---------- */
.pf-skel {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
  border-radius: 4px;
}
.pf-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--ink) 10%, transparent), transparent);
  animation: pf-shimmer 1.25s infinite;
}
@keyframes pf-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .pf-skel::after { animation: none; } }
.pf-skel-line { height: 12px; margin: 8px 0; }
.pf-skel-row { height: 44px; margin: 10px 0; }
.pf-skel-big { height: 62px; width: min(360px, 80%); margin: 12px 0 16px; }

/* ---------- error ---------- */
.rec-error {
  font-family: var(--body);
  color: var(--ink2);
  padding: 28px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

/* ---------- intro ---------- */
.rec-intro {
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink2);
  margin: 0 0 26px;
  max-width: 68ch;
}

/* ---------- site at a glance ---------- */
.rec-glance {
  padding-bottom: 28px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--hair);
}
.rec-glance-title {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.rec-glance-top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 14px;
}
.rec-glance-num {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(46px, 12vw, 84px);
  line-height: .92;
  color: var(--ink);
  letter-spacing: -.01em;
}
.rec-glance-unit {
  font-family: var(--disp);
  font-weight: 500;
  font-size: clamp(18px, 4vw, 26px);
  color: var(--ink2);
}
.rec-facts {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.rec-facts li { display: flex; align-items: baseline; gap: 7px; }
.rec-facts-n {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
}
.rec-facts-l { font-family: var(--body); font-size: 14px; color: var(--muted); }

.rec-latest {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rec-latest-lab {
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.rec-latest-link {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  text-decoration: none;
  color: inherit;
  max-width: 640px;
}
.rec-latest-score {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(26px, 6vw, 34px);
  color: var(--accent);
  letter-spacing: -.01em;
}
.rec-latest-desc { font-family: var(--body); font-size: 15px; color: var(--ink2); }
@media (hover: hover) { .rec-latest-link:hover .rec-latest-desc { color: var(--ink); } }

/* ---------- sections ---------- */
.rec-section { margin-top: 34px; }
.rec-section-head {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}
.rec-section-title {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(24px, 5vw, 30px);
  line-height: 1.02;
  color: var(--ink);
  margin: 0;
}
.rec-section-desc {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  margin: 5px 0 0;
  max-width: 60ch;
}

/* ---------- card grid ---------- */
.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  align-items: start;
}
.rec-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 22px 22px 12px;
  display: flex;
  flex-direction: column;
}
.rec-card-title {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.rec-card-sub {
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
  margin: 6px 0 14px;
  max-width: 42ch;
}

/* ---------- ranked lists ---------- */
.rec-rank { list-style: none; margin: 0; padding: 0; }
.rec-item { border-top: 1px solid var(--hair); }
.rec-item:first-child { border-top: 0; }
.rec-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0 13px;
  text-decoration: none;
  color: inherit;
}
.rec-rk {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  padding-top: 2px;
}
.rec-name {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.rec-name.rec-mono {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: -.01em;
}
@media (hover: hover) { a.rec-row:hover .rec-name { color: var(--accent); } }
.rec-val {
  flex: 0 0 auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}
.rec-num {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rec-num-sm { font-size: 17px; }
.rec-sub2 {
  font-family: var(--body);
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

/* subtle bar scaled to the leader in the card, drawn along the row's bottom edge */
.rec-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 2px;
}
@media (hover: hover) { a.rec-row:hover .rec-bar { background: var(--accent); } }

/* ---------- feature (single record) cards ---------- */
.rec-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  padding: 4px 0 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hair);
}
.rec-hero-score {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(46px, 11vw, 60px);
  line-height: .9;
  color: var(--ink);
  letter-spacing: -.01em;
}
@media (hover: hover) { a.rec-hero:hover .rec-hero-score { color: var(--accent); } }
.rec-hero-meta { display: flex; flex-direction: column; gap: 1px; }
.rec-hero-league { font-family: var(--body); font-size: 15px; color: var(--ink2); }
.rec-hero-note {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- oldest / newest coverage ---------- */
.rec-span { display: flex; flex-direction: column; }
.rec-span-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--hair);
}
.rec-span-item:first-child { border-top: 0; }
.rec-span-lab {
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.rec-span-year {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .rec-span-item:hover .rec-span-name { color: var(--accent); } }
.rec-span-name { font-family: var(--body); font-size: 15px; color: var(--ink); }
.rec-span-note { font-family: var(--body); font-size: 12.5px; color: var(--muted); }

/* ---------- narrow screens ---------- */
@media (max-width: 420px) {
  .rec-grid { grid-template-columns: 1fr; gap: 14px; }
  .rec-card { padding: 18px 16px 8px; }
  .rec-card-title { font-size: 21px; }
  .rec-intro { font-size: 15px; }
}