/* Lightweight, square-edged tier insignia. No images or external fonts. */
.rox-tier {
  --tier-color: #b4bac4;
  --tier-fill: #191c21;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 28px;
  height: 21px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--tier-color);
  border-radius: 0;
  background: var(--tier-fill);
  color: var(--tier-color);
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  transform: none;
}
.rox-tier b { font: inherit; }
.rox-tier-roman { color: inherit; font: inherit; letter-spacing: .04em; }
.rox-tier[data-tier="E15"] { --tier-color: #ffda18; --tier-fill: #29230a; }
.rox-tier[data-tier="E30"] { --tier-color: #e8b75c; --tier-fill: #241d10; }
.rox-tier[data-tier="TOP100"] { --tier-color: #d6dce5; --tier-fill: #20242b; }
.rox-tier[data-tier="S"] { --tier-color: #c4a0ff; --tier-fill: #23192f; }
.rox-tier[data-tier="A"] { --tier-color: #83b8ff; --tier-fill: #142237; }
.rox-tier[data-tier="B"] { --tier-color: #66d3cc; --tier-fill: #102928; }
.rox-tier[data-tier="C"] { --tier-color: #a3cc8c; --tier-fill: #20291b; }
.rox-tier[data-tier="D"] { --tier-color: #cec1a4; --tier-fill: #29251c; }
.rox-tier[data-tier="E"] { --tier-color: #b4bac4; --tier-fill: #1c1f24; }
.rox-tier[data-tier="F"] { --tier-color: #999999; --tier-fill: #1a1a1a; }
.rox-tier.is-unranked { --tier-color: #888; --tier-fill: #171717; font-size: 8px; }
button.rox-tier { cursor: pointer; }
button.rox-tier:hover { filter: brightness(1.15); }
button.rox-tier:focus-visible { outline: 2px solid var(--tier-color); outline-offset: 3px; }
.athlete-page-name-heading { display: flex; min-width: 0; align-items: center; gap: 8px; }
.athlete-page-name-heading h1 { flex: 0 1 auto; min-width: 0; }
.athlete-tier-detail {
  max-width: 430px;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: #111;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.athlete-tier-detail strong { display: block; margin-bottom: 2px; color: var(--text); }
.athlete-tier-detail p { margin: 0; }
.rankings-page .ranking-athlete .athlete-name > .rox-tier {
  min-width: 25px;
  height: 19px;
  overflow: visible;
  padding: 0 4px;
  font-size: 9px;
  transform: none;
}
.race-athlete-name-line { align-items: center; }
.race-athlete-name-line > .rox-tier,
.wave-athlete-identity > .rox-tier,
.wave-search-athlete > .rox-tier { height: 19px; padding: 0 4px; font-size: 9px; }
.wave-athlete-identity > strong,
.wave-search-athlete > strong { min-width: 0; flex: 0 1 auto; }
.wave-team-member { grid-template-columns: 26px minmax(0, 1fr) auto auto; }
.wave-athlete-flag-placeholder { display: block; background: #fff; }
@media (max-width: 760px) {
  .athlete-page-name-heading { gap: 5px; }
  .athlete-page-name-heading .rox-tier { height: 19px; padding: 0 4px; font-size: 9px; }
  .rankings-page .ranking-athlete .athlete-name > .rox-tier { gap: 2px; min-width: 18px; height: 16px; padding: 0 3px; font-size: 8px; }
  .race-athlete-name-line > .rox-tier,
  .wave-athlete-identity > .rox-tier,
  .wave-search-athlete > .rox-tier { gap: 2px; min-width: 18px; height: 16px; padding: 0 3px; font-size: 8px; }
  .wave-athlete-identity,
  .wave-search-athlete { gap: 4px; }
  .race-athlete-name-line > .race-athlete-link,
  .race-athlete-name-line > strong {
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .wave-table th:nth-child(3), .wave-table td:nth-child(3) { width: 53px; padding-left: 3px; padding-right: 3px; text-align: right; }
  .wave-table th:nth-child(4), .wave-table td:nth-child(4) { display: table-cell; width: 63px; padding-left: 3px; padding-right: 7px; text-align: right; }
  .wave-table th:nth-child(5), .wave-table td:nth-child(5),
  .wave-table th:nth-child(6), .wave-table td:nth-child(6) { display: none; }
  .wave-team-member { grid-template-columns: 22px minmax(0, 1fr) auto; }
}