

/* Start:/local/templates/topdogsport/components/topdog/ranking.experience/default/style.css?178683643415791*/
.td-ranking { background: var(--color-background); }

.td-ranking-hero {
  padding: clamp(80px, 9vw, 130px) 0 clamp(72px, 8vw, 112px);
  color: var(--color-surface);
  background:
    linear-gradient(112deg, rgba(7, 29, 59, .98) 0%, rgba(7, 56, 119, .96) 58%, rgba(7, 89, 217, .9) 100%),
    radial-gradient(circle at 80% 18%, #16a7e8, transparent 32%);
}

.td-ranking-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .5fr);
  gap: clamp(55px, 9vw, 145px);
  align-items: end;
}

.td-ranking-hero .eyebrow,
.td-ranking-leader .eyebrow,
.td-ranking-context .eyebrow { color: #9fddff; }

.td-ranking-hero h1 {
  max-width: 900px;
  color: var(--color-surface);
  font-size: clamp(58px, 7vw, 98px);
  line-height: .9;
  letter-spacing: -.075em;
}

.td-ranking-hero__grid > div:first-child > p:last-child {
  max-width: 690px;
  margin-top: 28px;
  color: #d7ebfa;
  font-size: var(--type-body-large);
}

.td-ranking-hero__season {
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .3);
}

.td-ranking-hero__season span,
.td-ranking-hero__season small {
  display: block;
  color: #b9e4ff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.td-ranking-hero__season strong {
  display: block;
  margin-left: -7px;
  color: var(--color-surface);
  font-size: clamp(88px, 11vw, 150px);
  line-height: .88;
  letter-spacing: -.105em;
}

.td-ranking-hero__season small { margin-top: 14px; }

.td-ranking-controls {
  position: sticky;
  top: 88px;
  z-index: 12;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
}

.td-ranking-controls__grid {
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(240px, 1fr) 120px;
  gap: 24px;
  align-items: center;
}

.td-ranking-seasons__label,
.td-ranking-search label,
.td-ranking-controls__status span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The season lives in the URL, so it is a row of links rather than a control:
   a standing that cannot be cited cannot be argued with. */
.td-ranking-seasons__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.td-ranking-seasons__item {
  min-width: 66px;
  min-height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-muted);
  background: var(--color-surface);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 850;
  text-decoration: none;
}

.td-ranking-seasons__item[aria-current] {
  border-color: var(--color-deep-navy);
  color: var(--color-surface);
  background: var(--color-deep-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.td-ranking-search__controls { display: flex; gap: 8px; }

.td-ranking-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-deep-navy);
  background: var(--color-surface);
  font: inherit;
  font-weight: 800;
}

.td-ranking-search button {
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0 18px;
  border: 1px solid var(--color-primary-blue);
  border-radius: var(--radius-control);
  color: var(--color-surface);
  background: var(--color-primary-blue);
  font: inherit;
  font-weight: 850;
}

.td-ranking-controls__status { text-align: right; }
.td-ranking-controls__status strong { color: var(--color-primary-blue); font-size: 36px; line-height: 1; }

.td-ranking-leader {
  padding: var(--space-section) 0;
  color: var(--color-surface);
  background: var(--color-deep-navy);
}

.td-ranking-leader article {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) .75fr .7fr;
  gap: clamp(35px, 6vw, 90px);
  align-items: end;
}

.td-ranking-leader h2 { max-width: 650px; color: var(--color-surface); }

.td-ranking-leader__copy > p:not(.eyebrow) {
  max-width: 580px;
  margin-top: 17px;
  color: #bcd9ee;
}

.td-ranking-leader__copy > a {
  display: inline-flex;
  margin-top: 27px;
  color: #8edcff;
  font-weight: 850;
}

.td-ranking-leader dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.td-ranking-leader dl div,
.td-ranking-leader__last {
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.td-ranking-leader dt,
.td-ranking-leader__last span {
  color: #9bc2de;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.td-ranking-leader dd {
  color: var(--color-surface);
  font-size: clamp(39px, 4vw, 60px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.07em;
}

.td-ranking-leader__last strong,
.td-ranking-leader__last small { display: block; }
.td-ranking-leader__last strong { margin-top: 9px; color: var(--color-surface); font-size: 22px; }
.td-ranking-leader__last small { margin-top: 6px; color: #9bc2de; }

.td-ranking-board { padding: var(--space-section) 0; }

.td-ranking-heading {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  align-items: end;
  margin-bottom: 36px;
}

.td-ranking-heading > p { max-width: 500px; color: var(--color-muted); }

/* One table per group, rendered sequentially. «Все группы» can therefore never
   become a single merged table with a combined position: the absence of a
   cross-group place is structural here, not merely omitted. */
.td-ranking-group { margin-top: 34px; scroll-margin-top: 96px; }
.td-ranking-group[hidden] { display: none !important; }

.td-ranking-group__header {
  display: flex;
  gap: 20px;
  align-items: end;
  justify-content: space-between;
  padding: 0 4px 14px;
  border-bottom: 2px solid var(--color-deep-navy);
}

.td-ranking-group__header h3 {
  margin: 0;
  color: var(--color-deep-navy);
  font-size: clamp(23px, 2.2vw, 31px);
  line-height: 1;
  letter-spacing: -.045em;
}

.td-ranking-group__header > span {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.td-ranking-group__header > span strong {
  color: var(--color-primary-blue);
  font-size: 18px;
  font-variant-numeric: lining-nums tabular-nums;
}

.td-ranking-table-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--color-border);
  border-top: 0;
  background: var(--color-surface);
  scrollbar-width: thin;
}

.td-ranking-table-wrap:focus-visible {
  outline: 3px solid rgba(18, 101, 245, .2);
  outline-offset: 2px;
}

.td-ranking-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.td-ranking-table th {
  padding: 14px 18px;
  color: var(--color-muted);
  background: #f7f9fc;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
}

.td-ranking-table td { padding: 16px 18px; border-top: 1px solid var(--color-border); }
.td-ranking-table tbody tr[data-ranking-row]:hover { background: #f5faff; }

.td-ranking-table__place { width: 104px; }
.td-ranking-table__place strong {
  color: var(--color-primary-blue);
  font-size: 32px;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.06em;
}
.td-ranking-table__place span {
  display: block;
  color: var(--color-deep-navy);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.td-ranking-table__athlete { width: 34%; }
.td-ranking-table__athlete a,
.td-ranking-table__athlete b { display: block; color: var(--color-deep-navy); font-size: 18px; font-weight: 800; }
.td-ranking-table__athlete a { color: var(--color-primary-blue); text-decoration: none; }
.td-ranking-table__athlete a:hover,
.td-ranking-table__athlete a:focus-visible { text-decoration: underline; }
.td-ranking-table__athlete small { display: block; margin-top: 4px; color: var(--color-muted); }

.td-ranking-table__points strong {
  color: var(--color-deep-navy);
  font-size: 26px;
  font-variant-numeric: lining-nums tabular-nums;
}

.td-ranking-table__starts {
  color: var(--color-deep-navy);
  font-size: 18px;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 800;
}

.td-ranking-table__provenance { width: 210px; text-align: right; }

/* Provenance control. A real button, so Enter and Space activate it and the
   expanded state is announced rather than implied by a rotating glyph. */
.td-ranking-expander {
  min-height: 44px;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-primary-blue);
  background: var(--color-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.td-ranking-expander:hover,
.td-ranking-expander:focus-visible { border-color: var(--color-primary-blue); }

.td-ranking-expander__mark {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.td-ranking-expander[aria-expanded="true"] .td-ranking-expander__mark {
  transform: translateY(2px) rotate(-135deg);
}

.td-ranking-ledger-row[hidden] { display: none !important; }
.td-ranking-ledger-row > td { padding: 0; background: #f7fafd; }

.td-ranking-ledger { padding: 18px; }

.td-ranking-ledger__caption {
  margin: 0 0 12px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
}

.td-ranking-ledger__scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  scrollbar-width: thin;
}

.td-ranking-ledger__table { width: 100%; min-width: 620px; border-collapse: collapse; }

.td-ranking-ledger__table th,
.td-ranking-ledger__table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  text-align: left;
}

.td-ranking-ledger__table th {
  color: var(--color-muted);
  background: #f2f6fa;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.td-ranking-ledger__table td { color: var(--color-deep-navy); font-variant-numeric: lining-nums tabular-nums; }
.td-ranking-ledger__table a { color: var(--color-primary-blue); font-weight: 800; text-decoration: none; }
.td-ranking-ledger__table a:hover,
.td-ranking-ledger__table a:focus-visible { text-decoration: underline; }

/* The ledger states its own total, so the reader can check the row's claim
   without adding the column up themselves. */
.td-ranking-ledger__table tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--color-deep-navy);
  color: var(--color-muted);
  font-weight: 850;
}

.td-ranking-ledger__table tfoot strong {
  color: var(--color-deep-navy);
  font-size: 18px;
}

.td-ranking-passport-closed {
  display: inline-flex;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 800;
}

.td-ranking-context {
  padding: var(--space-section) 0;
  color: var(--color-surface);
  background: linear-gradient(135deg, #071d3b, #0a4da3);
}

.td-ranking-context__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; }
.td-ranking-context h2 { color: var(--color-surface); }
.td-ranking-context__grid > div:first-child > p:last-child { margin-top: 19px; color: #c2dff2; }
.td-ranking-context__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.td-ranking-context__cards article {
  min-width: 0;
  min-height: 285px;
  display: flex;
  flex-direction: column;
  padding: 23px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-editorial);
  background: rgba(255,255,255,.07);
}
.td-ranking-context__cards span { color: #aad2ed; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.td-ranking-context__cards strong { margin-top: 31px; color: var(--color-surface); font-size: 42px; letter-spacing: -.06em; }
.td-ranking-context__cards p,
.td-ranking-context__cards small { color: #b9d6ea; }
.td-ranking-context__cards small { margin-top: 9px; }
.td-ranking-context__cards a { margin-top: auto; padding-top: 22px; color: #8edcff; font-weight: 850; }

.td-ranking-state {
  padding: 29px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-editorial);
  background: var(--color-surface);
}
.td-ranking-state strong,
.td-ranking-state span { display: block; }
.td-ranking-state span { margin-top: 7px; color: var(--color-muted); }

.td-ranking--unavailable { min-height: 70vh; display: grid; align-items: center; }
.td-ranking__unavailable { padding-top: 80px; padding-bottom: 80px; }
.td-ranking__unavailable p:not(.eyebrow) { max-width: 760px; margin-top: 20px; color: var(--color-muted); font-size: var(--type-body-large); }
.td-ranking__unavailable a { display: inline-flex; margin-top: 28px; color: var(--color-primary-blue); font-weight: 850; }

[data-ranking-row][hidden],
[data-ranking-leader][hidden],
[data-ranking-empty][hidden],
[data-ranking-leader-empty][hidden] { display: none !important; }

@media (max-width: 1100px) {
  .td-ranking-leader article { grid-template-columns: 1fr 1fr; }
  .td-ranking-leader__copy { grid-column: 1 / -1; }
  .td-ranking-context__grid { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
  .td-ranking-controls { top: 72px; }
  .td-ranking-controls__grid { grid-template-columns: minmax(0, .9fr) minmax(220px, 1fr); padding: 15px 0; }
  .td-ranking-controls__status { display: none; }
  .td-ranking-heading { display: block; }
  .td-ranking-heading > p { margin-top: 16px; }
  .td-ranking-table th,
  .td-ranking-table td { padding-left: 13px; padding-right: 13px; }
  .td-ranking-context__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .td-ranking-hero { padding: 62px 0 72px; }
  .td-ranking-hero__grid { grid-template-columns: 1fr; gap: 50px; }
  .td-ranking-hero h1 { font-size: 49px; }
  .td-ranking-hero__season { max-width: 420px; }
  .td-ranking-controls { position: relative; top: auto; }
  .td-ranking-controls__grid { grid-template-columns: 1fr; gap: 17px; }
  /* No edge-bleed: a negative margin larger than the container gutter pushes
     the track past the viewport and makes the PAGE scroll sideways, which is
     the one thing the responsive contract forbids. The track scrolls inside
     the container instead. */
  .td-ranking-leader,
  .td-ranking-board,
  .td-ranking-context { padding: 68px 0; }
  .td-ranking-leader article { grid-template-columns: 1fr; gap: 35px; }
  .td-ranking-leader__copy { grid-column: auto; }
  /* The table keeps its shape and scrolls inside its own container; the page
     itself never scrolls sideways. The provenance ledger expands full width
     beneath the row it belongs to. */
  .td-ranking-group__header { padding-bottom: 12px; }
  .td-ranking-table th,
  .td-ranking-table td { padding: 13px 12px; }
  .td-ranking-table__provenance { width: 168px; }
  .td-ranking-expander__label { display: none; }
  .td-ranking-expander::before {
    content: "Старты";
    font-weight: 850;
  }
  .td-ranking-ledger { padding: 14px 12px; }
  .td-ranking-context__cards { grid-template-columns: 1fr; }
}

/* Focus is never signalled by colour alone. */
.td-ranking-seasons__item:focus-visible,
.td-ranking-search input:focus-visible,
.td-ranking-search button:focus-visible,
.td-ranking-expander:focus-visible,
.td-ranking-table__athlete a:focus-visible,
.td-ranking-ledger__table a:focus-visible,
.td-ranking-ledger__scroll:focus-visible {
  outline: 3px solid var(--color-primary-blue);
  outline-offset: 2px;
}

/* End */
/* /local/templates/topdogsport/components/topdog/ranking.experience/default/style.css?178683643415791 */
