.profession-ranking { max-width: 1000px; padding-top: 20px; padding-bottom: 40px; }
.profession-ranking__lead { max-width: 780px; }
.profession-ranking__meta { color: #666; font-size: 14px; }
.profession-ranking__filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 24px 0; }
.profession-ranking__filters label { flex: 1 1 220px; margin: 0; min-width: 0; }
.profession-ranking__filters input,.profession-ranking__filters select { display: block; width: 100%; margin-top: 6px; min-height: 44px; }
.profession-ranking__filters .btn { min-height: 44px; }
.profession-ranking__results { list-style: none; padding: 0; margin: 20px 0; }
.profession-ranking__item { display: grid; grid-template-columns: 36px minmax(0, 1fr) 235px; gap: 16px; padding: 24px 0; border-top: 1px solid #e4e4e4; }
.profession-ranking__rank { color: #707070; font-size: 18px; font-variant-numeric: tabular-nums; }
.profession-ranking__name { display: inline-block; font-size: 21px; line-height: 1.3; margin-bottom: 6px; }
.profession-ranking__sphere { color: #656565; font-size: 13px; }
.profession-ranking__description { margin: 8px 0 0; font-size: 15px; line-height: 1.5; }
.profession-ranking__salary { text-align: right; font-size: 18px; line-height: 1.5; font-weight: 600; font-variant-numeric: tabular-nums; }
.profession-ranking__salary span { display: block; }
.profession-ranking__salary small { display: block; color: #656565; font-size: 12px; font-weight: 400; }
.profession-ranking__method { margin-top: 32px; max-width: 800px; }
.profession-ranking__method summary { cursor: pointer; font-weight: 600; margin-bottom: 12px; }
.profession-ranking__empty { padding: 24px 0; }
@media (max-width: 600px) {
  .profession-ranking__item { grid-template-columns: 28px minmax(0, 1fr); gap: 8px 12px; }
  .profession-ranking__salary { grid-column: 2; text-align: left; }
  .profession-ranking__salary span { display: inline; }
  .profession-ranking__name { font-size: 19px; }
}

.profession-ranking__vacancies { font-size: 20px; margin-bottom: 4px; }
.profession-ranking__optional-salary { margin-top: 12px; font-size: 15px; font-weight: 400; }

.profession-ranking__navigation { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.profession-ranking__navigation a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border: 1px solid #d8d8e0; border-radius: 8px; font-size: 15px; line-height: 1.4; }
.profession-ranking__navigation a[aria-current="page"] { background: #4949e7; border-color: #4949e7; color: #fff; }
.profession-ranking__navigation a:focus-visible { outline: 2px solid #25258b; outline-offset: 3px; }