.rankings-view { padding-bottom: 0; }
.rankings-view .dashboard { padding-inline: 12px; }
.rankings-view .tabbar { display: none; }
.rankings-view .site-footer { position: static; }
.rankings-view .dashboard { padding-bottom: 12px; }

.rankings-page {
  display: grid;
  gap: 14px;
  max-width: 1560px;
  margin: 0 auto;
}

.rankings-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.rankings-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}

.rankings-heading { min-width: 0; }
.rankings-kicker,
.rankings-feature-kicker {
  color: #9fd0ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
.rankings-kicker i { margin-right: 6px; color: #f1c46b; }
.rankings-heading h2 {
  margin: 4px 0 2px;
  color: #f7fafc;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.rankings-heading p { margin: 0; color: #bdcfdb; font-size: 12px; }

.rankings-summary {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(112px, 1fr));
  gap: 8px;
  width: min(440px, 42%);
}
.rankings-summary div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 70px;
  padding: 10px 14px;
  border: 1px solid #748591;
  border-radius: 10px;
  background: linear-gradient(145deg, #53616c, #44525d);
}
.rankings-summary span { color: #c7d8e4; font-size: 10px; font-weight: 650; white-space: nowrap; }
.rankings-summary strong { margin-top: 3px; color: #f8fbff; font-size: 23px; line-height: 1; letter-spacing: -.035em; }

.rankings-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(390px, 1fr);
  gap: 14px;
}
.rankings-leader,
.rankings-profile,
.rankings-board {
  min-width: 0;
  border: 1px solid #748591;
  border-radius: 12px;
  background: linear-gradient(145deg, #4d5b67, #3c4a55);
  box-shadow: 0 12px 30px #19232b2b;
}
.rankings-leader {
  position: relative;
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 20px;
  min-height: 168px;
  padding: 13px;
  overflow: hidden;
  background: radial-gradient(circle at 79% 5%, #65b6f82c, transparent 43%), linear-gradient(135deg, #526470, #344958 70%);
}
.rankings-leader::after {
  position: absolute;
  top: -75px;
  right: -45px;
  width: 240px;
  height: 240px;
  border: 1px solid #cce6ff20;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.rankings-leader-photo { position: relative; width: 138px; height: 138px; }
.rankings-portrait {
  display: block;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid #a5c2d5;
  border-radius: 10px;
  background-color: #425463;
  background-image: url("../assets/umpires/fictional-umpires-contact-sheet.png");
  background-repeat: no-repeat;
  background-size: 300% 200%;
  background-position: var(--portrait-x) var(--portrait-y);
}
.rankings-portrait.is-featured { width: 138px; height: 138px; border-radius: 9px; }
.rankings-portrait.is-second-sheet { background-image: url("../assets/umpires/fictional-umpires-contact-sheet-2.png"); }
.rankings-leader-seal {
  position: absolute;
  right: -7px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid #f4d89d;
  border-radius: 6px;
  background: #1e3445;
  color: #ffe0a5;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 5px 13px #17212b85;
}
.rankings-leader-copy { z-index: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.rankings-leader-copy h3,
.rankings-profile-copy h3 { margin: 2px 0 0; color: #fff; font-size: 23px; line-height: 1.1; letter-spacing: -.035em; }
.rankings-leader-copy p,
.rankings-profile-copy p { margin: 3px 0 12px; color: #cbdbe5; font-size: 11px; }
.rankings-leader-metrics { display: flex; align-items: end; gap: clamp(18px, 3vw, 38px); }
.rankings-leader-metrics div,
.rankings-profile-metrics div { display: flex; flex-direction: column; gap: 2px; }
.rankings-leader-metrics strong { color: #f7fbff; font-size: 19px; line-height: 1; letter-spacing: -.035em; }
.rankings-leader-metrics div:first-child strong { color: #b9dcff; font-size: 35px; }
.rankings-leader-metrics small { font-size: 18px; }
.rankings-leader-metrics span,
.rankings-profile-metrics span { color: #c1d3df; font-size: 10px; white-space: nowrap; }

.rankings-profile {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 15px;
  min-height: 168px;
  padding: 13px;
  background: linear-gradient(125deg, #45535e, #32434e);
}
.rankings-profile > img {
  display: block;
  width: 120px;
  height: 140px;
  border: 1px solid #9bb9cc;
  border-radius: 9px;
  object-fit: cover;
  object-position: center 28%;
}
.rankings-profile-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.rankings-profile-copy h3 { font-size: 20px; }
.rankings-profile-copy p { margin-bottom: 8px; }
.rankings-profile-metrics { display: flex; gap: 22px; }
.rankings-profile-metrics strong { color: #f7fbff; font-size: 18px; line-height: 1; }
.rankings-profile-metrics div:first-child strong { color: #a7e3d7; }
.rankings-profile-copy button {
  align-self: flex-start;
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b9dcff;
  font-size: 11px;
  font-weight: 750;
}
.rankings-profile-copy button:hover { color: #fff; }
.rankings-profile-copy button i { margin-left: 5px; }

.rankings-board { padding: 13px 15px 14px; }
.rankings-board-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.rankings-board-heading h3 { margin: 3px 0 0; color: #fff; font-size: 18px; letter-spacing: -.025em; }
.rankings-board-heading h3 small { margin-left: 9px; color: #bbcedb; font-size: 11px; font-weight: 600; letter-spacing: 0; }
.rankings-tools { display: flex; align-items: center; gap: 8px; }
.rankings-search { position: relative; display: flex; align-items: center; }
.rankings-search i { position: absolute; left: 10px; color: #a8c1d3; font-size: 11px; pointer-events: none; }
.rankings-search input,
.rankings-sort select {
  height: 34px;
  border: 1px solid #899ba8;
  border-radius: 6px;
  outline: none;
  background: #354651;
  color: #eef6fa;
  font-size: 11px;
}
.rankings-search input { width: 175px; padding: 0 10px 0 30px; }
.rankings-search input::placeholder { color: #b8c8d2; }
.rankings-sort { display: flex; align-items: center; gap: 7px; color: #cbd9e3; font-size: 10px; white-space: nowrap; }
.rankings-sort select { min-width: 128px; padding: 0 7px; }
.rankings-search input:focus,
.rankings-sort select:focus { border-color: #b4dbff; box-shadow: 0 0 0 3px #b4dbff2b; }

.rankings-columns,
.rankings-row {
  display: grid;
  grid-template-columns: minmax(230px, 2fr) minmax(145px, 1.25fr) minmax(105px, .9fr) minmax(70px, .55fr) minmax(105px, .9fr) minmax(105px, .9fr);
  align-items: center;
  gap: 12px;
}
.rankings-columns { padding: 4px 13px 8px; color: #b7cbd8; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.rankings-row {
  min-height: 56px;
  margin-top: 4px;
  padding: 5px 13px;
  border: 1px solid #70838f;
  border-radius: 8px;
  background: linear-gradient(90deg, #53626d, #485661);
  transition: border-color .15s, background .15s;
}
.rankings-row:hover { border-color: #a3d0ee; background: linear-gradient(90deg, #5b6d78, #4b5e69); }
.rankings-row:first-child { border-color: #95bcd3; background: linear-gradient(90deg, #566c7a, #485d6c); }
.rankings-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rankings-rank { flex: 0 0 27px; color: #d4e2eb; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rankings-rank.is-top { color: #f0cb87; }
.rankings-person-copy { display: flex; flex-direction: column; min-width: 0; }
.rankings-person-copy strong { overflow: hidden; color: #f8fbfd; font-size: 13px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.rankings-person-copy span { overflow: hidden; margin-top: 3px; color: #c4d5df; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.rankings-accuracy { display: flex; flex-direction: column; gap: 5px; }
.rankings-accuracy > strong { color: #e8f6ff; font-size: 19px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rankings-accuracy > strong small { margin-left: 1px; font-size: 11px; }
.rankings-accuracy-track { display: block; width: min(130px, 100%); height: 4px; overflow: hidden; border-radius: 3px; background: #223743; }
.rankings-accuracy-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #61b5f1, #bee4ff); }
.rankings-value { display: flex; flex-direction: column; gap: 2px; }
.rankings-value strong { color: #f4f9fc; font-size: 14px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rankings-value span,
.rankings-change > span:last-child { color: #b9ccd8; font-size: 9px; }
.rankings-change { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.rankings-trend { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.rankings-trend.is-rising { color: #a7e3d7; }
.rankings-trend.is-falling { color: #ffc5a9; }
.rankings-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px; color: #d7e7ef; }
.rankings-empty i { color: #a9d4f6; font-size: 17px; }
.rankings-empty span { color: #b9cbd8; font-size: 11px; }
.rankings-more-wrap { display: flex; justify-content: center; padding-top: 13px; }
.rankings-more-wrap[hidden] { display: none; }
.rankings-more { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 205px; min-height: 34px; padding: 7px 16px; border: 1px solid #9bbdd2; border-radius: 7px; background: #354c5d; color: #dcefff; font-size: 11px; font-weight: 750; cursor: pointer; }
.rankings-more:hover { border-color: #d1eaff; background: #426078; color: #fff; }
.rankings-more:focus-visible { outline: 2px solid #c4e8ff; outline-offset: 3px; }
.rankings-more i { font-size: 9px; }
.rankings-disclosure { margin: -2px 2px 0; color: #c3d0d9; font-size: 10px; }
.rankings-disclosure i { margin-right: 5px; color: #a9d4f6; }

@media (max-width: 1220px) {
  .rankings-intro { align-items: flex-start; flex-direction: column; gap: 12px; }
  .rankings-summary { width: 100%; }
  .rankings-leader-metrics { gap: 10px; }
  .rankings-columns,
  .rankings-row { grid-template-columns: minmax(190px, 2fr) minmax(125px, 1.25fr) minmax(95px, .9fr) minmax(58px, .55fr) minmax(90px, .9fr) minmax(95px, .9fr); gap: 9px; }
}

@media (max-width: 1080px) {
  .rankings-feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  .rankings-columns { display: none; }
  .rankings-row { grid-template-columns: minmax(180px, 1.5fr) repeat(2, minmax(100px, 1fr)); gap: 9px 14px; padding: 12px; }
  .rankings-person { grid-row: span 3; }
}

@media (max-width: 760px) {
  .rankings-page { gap: 12px; }
  .rankings-intro { min-height: 0; }
  .rankings-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rankings-summary div { min-height: 63px; padding: 8px 10px; }
  .rankings-summary span { white-space: normal; line-height: 1.15; }
  .rankings-summary strong { font-size: 18px; }
  .rankings-board-heading { align-items: flex-start; flex-direction: column; }
  .rankings-tools { width: 100%; }
  .rankings-search { flex: 1; }
  .rankings-search input { width: 100%; }
}

@media (max-width: 520px) {
  .rankings-heading h2 { font-size: 23px; }
  .rankings-leader { grid-template-columns: 90px minmax(0, 1fr); gap: 12px; min-height: 150px; padding: 10px; }
  .rankings-leader-photo,
  .rankings-portrait.is-featured { width: 90px; height: 124px; }
  .rankings-portrait.is-featured { background-size: 360% 200%; background-position: 2% var(--portrait-y); }
  .rankings-leader-copy h3 { font-size: 18px; }
  .rankings-leader-copy p { margin-bottom: 7px; }
  .rankings-leader-metrics { gap: 11px; flex-wrap: wrap; }
  .rankings-leader-metrics strong { font-size: 14px; }
  .rankings-leader-metrics div:first-child strong { font-size: 27px; }
  .rankings-leader-metrics span { font-size: 8px; }
  .rankings-leader-seal { right: -5px; padding: 3px 5px; font-size: 10px; }
  .rankings-profile { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; min-height: 150px; padding: 10px; }
  .rankings-profile > img, .rankings-portrait.is-spotlight { width: 88px; height: 128px; }
  .rankings-profile-copy h3 { font-size: 18px; }
  .rankings-profile-metrics { gap: 12px; }
  .rankings-profile-metrics strong { font-size: 15px; }
  .rankings-profile-metrics span { font-size: 9px; }
  .rankings-board { padding: 12px 10px; }
  .rankings-tools { flex-wrap: wrap; }
  .rankings-sort { flex: 1; }
  .rankings-sort select { flex: 1; }
  .rankings-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rankings-person { grid-column: 1 / -1; grid-row: auto; }
  .rankings-accuracy { grid-column: 1 / -1; }
  .rankings-accuracy-track { width: 100%; }
  .rankings-value strong { font-size: 13px; }
}

@media print {
  .rankings-page { gap: 8px; }
  .rankings-tools,
  .rankings-profile-copy button { display: none; }
  .rankings-leader,
  .rankings-profile,
  .rankings-board,
  .rankings-row,
  .rankings-summary div { break-inside: avoid; box-shadow: none; }
}

/* Live data: CDN photos (silhouette icon behind the image as fallback), profile links, and states. */
.rankings-portrait.is-photo { position: relative; display: grid; place-items: center; background-image: none; color: #9fb2c1; font-size: 17px; }
.rankings-portrait.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.rankings-portrait.is-featured.is-photo { font-size: 44px; }
.rankings-portrait.is-spotlight { width: 120px; height: 140px; border-color: #9bb9cc; border-radius: 9px; font-size: 40px; }
.rankings-name { overflow: hidden; padding: 0; border: 0; background: none; color: #f8fbfd; font-size: 13px; font-weight: 700; line-height: 1.2; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.rankings-name:hover, .rankings-name:focus-visible { color: #b7dcff; text-decoration: underline; text-underline-offset: 2px; }
.rankings-trend.is-new { color: #d6e4ee; }
.rankings-profile.is-note { grid-template-columns: minmax(0, 1fr); align-content: center; }
.rankings-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 240px; color: #d1dce4; font-weight: 600; }
.rankings-loading i { color: #b7dcff; }
.rankings-unranked { border: 1px solid #637380; border-radius: 12px; background: linear-gradient(145deg, #414f5a, #37444e); }
.rankings-unranked summary { display: flex; align-items: center; gap: 8px; padding: 13px 16px; color: #d6e4ee; font-size: 12px; font-weight: 700; cursor: pointer; }
.rankings-unranked summary i { color: #f4c170; }
.rankings-unranked .rankings-rows { padding: 0 13px 13px; }
.rankings-trend.is-flat { color: #d6e4ee; }
@media (max-width: 520px) { .rankings-portrait.is-spotlight { width: 88px; height: 128px; font-size: 30px; } }