/* ARBI.RU — компоненты интерфейса в айдентике «АРБИТРАЖ!».
   Список совпадает с docs/architecture/06-design-system.md и со страницей /ru/styleguide. */

/* ---------------------------------------------------------------- кнопки */

.btn {
  --btn-bg: var(--lime-500);
  --btn-fg: var(--graphite-900);
  --btn-border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 22px;
  font: inherit; font-size: var(--step-14); font-weight: 640; letter-spacing: -0.01em;
  border-radius: var(--radius-md); border: 1px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-fg);
  text-decoration: none; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--lime-400); color: var(--graphite-900); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn--disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn .ico { transition: transform var(--t-fast); }
.btn:hover .ico--arrow { transform: translateX(3px); }

.btn--dark { --btn-bg: var(--graphite-900); --btn-fg: #fff; }
.btn--dark:hover { background: var(--graphite-800); color: #fff; }

.btn--secondary { --btn-bg: transparent; --btn-fg: var(--graphite-900); --btn-border: var(--graphite-900); }
.btn--secondary:hover { background: var(--graphite-900); color: #fff; }

.btn--quiet { --btn-bg: var(--paper); --btn-fg: var(--graphite-900); --btn-border: var(--line-300); }
.btn--quiet:hover { background: var(--paper-warm); border-color: var(--graphite-300); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--graphite-700); }
.btn--ghost:hover { background: var(--paper-warm); color: var(--graphite-900); box-shadow: none; }

.btn--danger { --btn-bg: var(--danger-600); --btn-fg: #fff; }
.btn--danger:hover { background: var(--danger-700); color: #fff; }

.btn--sm { min-height: 38px; padding: 7px 14px; font-size: var(--step-13); border-radius: var(--radius-sm); }
.btn--lg { min-height: 54px; padding: 15px 28px; font-size: var(--step-16); }
.btn--block { width: 100%; }

.ico { fill: currentColor; flex: none; display: inline-block; vertical-align: -3px; }
.ico--sm { vertical-align: -2px; }

/* ---------------------------------------------------------------- поля */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field__label { font-size: var(--step-13); font-weight: 620; color: var(--graphite-900); }
.field__req { color: var(--danger-600); margin-left: 2px; }
.field__hint { font-size: var(--step-13); color: var(--graphite-500); margin: 0; }
.field__error { font-size: var(--step-13); color: var(--danger-600); margin: 0; display: flex; align-items: center; gap: 6px; }
.input {
  width: 100%; min-height: 46px; padding: 11px 14px;
  font: inherit; font-size: var(--step-16); color: var(--graphite-900);
  background: var(--paper); border: 1px solid var(--line-300); border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder { color: var(--graphite-500); }
.input:hover { border-color: var(--graphite-300); }
.input:focus { outline: none; border-color: var(--graphite-900); box-shadow: 0 0 0 3px var(--lime-100); }
.input--area { min-height: 120px; resize: vertical; line-height: var(--leading-text); }
.input[aria-invalid="true"] { border-color: var(--danger-600); }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--step-14); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--graphite-900); flex: none; }

/* ---------------------------------------------------------------- поиск */

.search { position: relative; flex: 1 1 auto; min-width: 0; }
.search__input {
  width: 100%; min-height: 52px; padding: 12px 16px 12px 46px;
  border: 1px solid var(--line-300); border-radius: var(--radius-md);
  font: inherit; font-size: var(--step-16); color: var(--graphite-900); background: var(--paper);
}
.search__input::placeholder { color: var(--graphite-500); }
.search__input:focus { outline: none; border-color: var(--graphite-900); box-shadow: 0 0 0 3px var(--lime-100); }
.search__icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--graphite-500); pointer-events: none; }
.search--hero .search__input { min-height: 58px; border-radius: var(--radius-md); }
.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--paper); border: 1px solid var(--line-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-3); padding: 8px; max-height: 340px; overflow: auto;
}
.suggest[hidden] { display: none; }
.suggest__item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-xs); color: var(--graphite-700); text-decoration: none; font-size: var(--step-14); }
.suggest__item:hover, .suggest__item[aria-selected="true"] { background: var(--lime-050); color: var(--graphite-900); }
.suggest__kind { margin-left: auto; font-size: var(--step-12); color: var(--graphite-500); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------------------------------------------------------------- бейджи, чипы */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid transparent;
  font-size: var(--step-12); font-weight: 620; line-height: 1.5; white-space: nowrap;
}
.badge--ok { background: var(--ok-100); color: var(--ok-700); border-color: #c4e5cd; }
.badge--warn { background: var(--warn-100); color: var(--warn-700); border-color: #f0dcb4; }
.badge--danger { background: var(--danger-100); color: var(--danger-700); border-color: #f3cbc6; }
.badge--brand { background: var(--lime-500); color: var(--graphite-900); }
.badge--lime { background: var(--lime-100); color: var(--graphite-900); }
.badge--muted { background: var(--paper-warm); color: var(--graphite-500); border-color: var(--line-200); }
.badge--info { background: var(--info-100); color: var(--info-700); border-color: #cfe3ef; }
.badge--ai { background: var(--ai-100); color: var(--ai-700); border-color: #d6d2f2; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-200); background: var(--paper);
  font-size: var(--step-14); color: var(--graphite-700); text-decoration: none; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip:hover { border-color: var(--graphite-900); color: var(--graphite-900); }
.chip--active { background: var(--lime-500); border-color: var(--lime-500); color: var(--graphite-900); font-weight: 640; }
.chip__count { font-size: var(--step-12); color: var(--graphite-500); font-variant-numeric: tabular-nums; }
.chip--active .chip__count { color: var(--graphite-700); }

/* Плитка категории: иконка, название, стрелка — как в макете главной. */
/* Плитка «с чем нужна помощь»: по макету иконка сверху, подпись под ней, а внизу
   круглая стрелка. Стрелку рисуем кружком: в макете это заметная кнопка, а не
   тонкий значок — по ней видно, что плитка нажимается целиком. */
.tile {
  display: flex; flex-direction: column; gap: 14px; padding: 18px;
  background: var(--paper); border: 1px solid var(--line-200); border-radius: var(--radius-md);
  text-decoration: none; color: var(--graphite-900);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.tile:hover { border-color: var(--graphite-900); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.tile__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--lime-100); }
.tile__title { font-size: var(--step-16); font-weight: 620; }
.tile__arrow {
  margin-top: 2px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line-300); border-radius: 50%; color: var(--graphite-900);
}
.tile:hover .tile__arrow { background: var(--graphite-900); color: var(--lime-500); border-color: var(--graphite-900); }
.tile--active { background: var(--lime-100); border-color: var(--lime-400); }
.tile--active .tile__icon { background: rgba(19, 23, 14, 0.08); }

/* ---------------------------------------------------------------- аватар */

.avatar {
  width: var(--avatar-size, 48px); height: var(--avatar-size, 48px); flex: none;
  border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--graphite-900); color: var(--lime-500);
  font-weight: 650; text-decoration: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Запасной вариант без фотографии: инициалы на фирменной подложке.
   Так выглядит профиль, у которого снимка нет. Сделано намеренно заметным, а не
   бледным кружком: тёмный графит с салатовыми буквами читается как знак площадки,
   а не как недогруженная картинка. Показывать здесь выдуманное лицо нельзя —
   читатель поверит, что это тот самый человек. */
.avatar__initials {
  font-size: calc(var(--avatar-size, 48px) * 0.34); letter-spacing: 0.01em;
  font-family: var(--font-display); font-weight: 600;
}

/* ---------------------------------------------------------------- карточки */

.card {
  background: var(--paper); border: 1px solid var(--line-200);
  border-radius: var(--radius-lg); padding: 20px;
}
.card--pad-0 { padding: 0; overflow: hidden; }
.card--lime { background: var(--lime-050); border-color: var(--lime-100); }
.card--dark { background: var(--graphite-900); border-color: var(--graphite-900); color: var(--graphite-200); }
.card--dark h1, .card--dark h2, .card--dark h3 { color: #fff; }
.card--ai { background: var(--ai-050); border-color: var(--ai-100); }
.card--sand { background: var(--paper-sand); border-color: var(--line-200); }

.specialist-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper); border: 1px solid var(--line-200); border-radius: var(--radius-lg);
  padding: 20px;
  transition: box-shadow var(--t-medium), transform var(--t-medium), border-color var(--t-medium);
}
.specialist-card:hover { box-shadow: var(--shadow-2); border-color: var(--graphite-300); }
.specialist-card__head { display: flex; gap: 14px; align-items: flex-start; }
.specialist-card__who { min-width: 0; }
.specialist-card h3 { margin: 0 0 2px; font-size: var(--step-18); font-family: var(--font-ui); }
.specialist-card h3 a { color: var(--graphite-900); text-decoration: none; }
.specialist-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--lime-500); text-decoration-thickness: 3px; }
.specialist-card__role { margin: 0 0 8px; font-size: var(--step-13); color: var(--graphite-500); }
.specialist-card__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.specialist-card__about { margin: 0; font-size: var(--step-14); color: var(--graphite-700); }
.specialist-card__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.specialist-card__tags li {
  font-size: var(--step-12); color: var(--graphite-700); background: var(--paper-warm);
  border: 1px solid var(--line-200); border-radius: var(--radius-pill); padding: 4px 11px;
}
.specialist-card__foot {
  margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line-200);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.specialist-card__meta { display: flex; align-items: center; gap: 12px; font-size: var(--step-13); flex-wrap: wrap; }
.specialist-card__price { font-size: var(--step-16); font-weight: 620; color: var(--graphite-900); }
.specialist-card__price b { font-variant-numeric: tabular-nums; }
.rating { display: inline-flex; align-items: center; gap: 5px; color: var(--graphite-700); font-size: var(--step-13); }
.rating svg { color: var(--lime-600); }
.rating b { color: var(--graphite-900); font-variant-numeric: tabular-nums; }

/* Строка каталога: широкая карточка со специалистом, услугой и ценой справа. */
.spec-row {
  display: grid; gap: 18px; grid-template-columns: 1fr;
  background: var(--paper); border: 1px solid var(--line-200); border-radius: var(--radius-lg);
  padding: 18px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
@media (min-width: 768px) { .spec-row { grid-template-columns: 132px minmax(0, 1fr) 230px; } }
@media (min-width: 1100px) { .spec-row { grid-template-columns: 148px minmax(0, 1fr) 260px; } }
.spec-row:hover { border-color: var(--graphite-300); box-shadow: var(--shadow-2); }
.spec-row__photo { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--paper-warm); }
.spec-row__photo img { width: 100%; height: 100%; object-fit: cover; }
.spec-row__photo-fallback {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: var(--graphite-900); color: var(--lime-500); font-size: var(--step-30); font-weight: 650;
}
.spec-row__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.spec-row__name { font-size: var(--step-20); font-weight: 660; color: var(--graphite-900); text-decoration: none; font-family: var(--font-display); letter-spacing: -0.02em; }
.spec-row__name:hover { text-decoration: underline; text-decoration-color: var(--lime-500); }
.spec-row__state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step-13); color: var(--graphite-500); }
.spec-row__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-600); }
.spec-row__state--busy::before { background: var(--graphite-300); }
.spec-row__facts { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--step-13); color: var(--graphite-500); margin: 8px 0 10px; }
.spec-row__facts span { display: inline-flex; align-items: center; gap: 5px; }
.spec-row__offer {
  border: 1px solid var(--line-200); border-radius: var(--radius-md); padding: 12px 14px; background: var(--paper-sand);
  font-size: var(--step-13); color: var(--graphite-700);
}
.spec-row__offer-title { font-weight: 640; color: var(--graphite-900); font-size: var(--step-14); }
.spec-row__price { text-align: right; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.spec-row__price-value { font-family: var(--font-display); font-size: var(--step-24); color: var(--graphite-900); letter-spacing: -0.02em; }
.spec-row__price-note { font-size: var(--step-12); color: var(--graphite-500); }

/* Полоса сравнения внизу экрана — как в макете каталога. */
.compare-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--paper); border-top: 1px solid var(--line-200); box-shadow: var(--shadow-3);
  padding: 12px 0;
}
.compare-bar__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.compare-bar__item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step-14); }
.compare-bar__remove { border: 0; background: none; cursor: pointer; color: var(--graphite-500); padding: 2px; }
.compare-bar__remove:hover { color: var(--danger-600); }

.request-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper); border: 1px solid var(--line-200); border-radius: var(--radius-lg);
  padding: 20px; transition: box-shadow var(--t-medium), border-color var(--t-medium);
}
.request-card:hover { box-shadow: var(--shadow-2); border-color: var(--graphite-300); }
.request-card__head { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.request-card__title { font-size: var(--step-18); font-weight: 660; color: var(--graphite-900); text-decoration: none; line-height: var(--leading-normal); font-family: var(--font-display); letter-spacing: -0.02em; }
.request-card__title:hover { text-decoration: underline; text-decoration-color: var(--lime-500); }
.request-card__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--step-13); color: var(--graphite-500); margin: 0; }
.request-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.request-card__summary { margin: 0; font-size: var(--step-14); color: var(--graphite-700); }
.request-card__foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-200);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--step-13);
}
.request-card__stats { display: inline-flex; align-items: center; gap: 5px; color: var(--graphite-900); font-weight: 620; }

/* ---------------------------------------------------------------- уведомления */

.notice {
  display: flex; gap: 12px; padding: 16px;
  border-radius: var(--radius-md); border: 1px solid var(--line-200); background: var(--paper-warm);
}
.notice--info { background: var(--info-100); border-color: #cfe3ef; color: var(--info-700); }
.notice--ok { background: var(--ok-100); border-color: #c4e5cd; color: var(--ok-700); }
.notice--warn { background: var(--warn-100); border-color: #f0dcb4; color: var(--warn-700); }
.notice--danger { background: var(--danger-100); border-color: #f3cbc6; color: var(--danger-700); }
.notice--ai { background: var(--ai-050); border-color: var(--ai-100); color: var(--ai-700); }
.notice__body { min-width: 0; }
.notice__title { margin: 0 0 4px; font-weight: 650; color: inherit; }
.notice__text { font-size: var(--step-14); color: var(--graphite-700); }
.notice__text p { margin-bottom: 8px; }
.notice__actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  max-width: 380px; padding: 14px 16px;
  background: var(--graphite-900); color: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-3); display: flex; gap: 10px; align-items: flex-start;
  animation: toast-in var(--t-slow);
}
.toast[hidden] { display: none; }
.toast__close { background: none; border: 0; color: var(--graphite-500); cursor: pointer; padding: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- пустое состояние */

.empty {
  text-align: center; padding: 40px 20px;
  border: 1px dashed var(--line-300); border-radius: var(--radius-lg); background: var(--paper-warm);
}
.empty__icon { color: var(--graphite-500); margin-bottom: 10px; }
.empty__title { margin: 0 0 6px; font-size: var(--step-18); }
.empty__text { margin: 0 auto 16px; max-width: 46ch; color: var(--graphite-500); font-size: var(--step-14); }

/* ---------------------------------------------------------------- показатели */

.stat {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 20px;
  background: var(--paper); border: 1px solid var(--line-200); border-radius: var(--radius-md);
  text-decoration: none;
}
a.stat:hover { border-color: var(--graphite-900); }
.stat__label { font-size: var(--step-13); color: var(--graphite-500); }
.stat__value { font-family: var(--font-display); font-size: var(--step-38); color: var(--graphite-900); line-height: 1; letter-spacing: -0.03em; }
.stat__hint { font-size: var(--step-12); color: var(--graphite-500); }
/*   Зелёный в плитке — тёмный, а не средний.
 *
 *   `--ok-600` даёт на белом 4.93, а на тёплом фоне площадки — 4.49, то есть
 *   **ниже порога 4.5** для обычного текста. Плитка крупная, и на ней это
 *   проходит по большой букве, но запас в одну сотую — не запас.
 *
 *   В значках и уведомлениях проекта рядом уже стоит `--ok-700`: тёмный
 *   зелёный. Ставим тот же — и цвет состояния становится **одним на всей
 *   площадке**, а не двумя похожими. */
.stat--ok .stat__value { color: var(--ok-700); }
.stat--warn .stat__value { color: var(--warn-600); }
.stat--ai .stat__value { color: var(--ai-600); }
.stat--brand .stat__value { color: var(--graphite-900); }
.stat--lime { background: var(--lime-500); border-color: var(--lime-500); }
.stat--lime .stat__label, .stat--lime .stat__hint { color: var(--graphite-700); }

/* ---------------------------------------------------------------- таймлайн */

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline__item { position: relative; padding: 0 0 20px 26px; border-left: 1px solid var(--line-200); }
.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__dot {
  position: absolute; left: -5px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--lime-500); box-shadow: 0 0 0 3px var(--lime-050);
}
.timeline__title { margin: 0 0 2px; font-size: var(--step-14); font-weight: 620; color: var(--graphite-900); }
.timeline__time { font-size: var(--step-12); color: var(--graphite-500); }

/* Шаги дела: завершён — салатовый круг с галочкой, текущий — номер, ожидает — серый. */
.steps { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.steps__item { display: flex; align-items: center; gap: 10px; font-size: var(--step-14); }
.steps__num {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--paper-warm); color: var(--graphite-500); font-weight: 650; border: 1px solid var(--line-200);
}
.steps__item--done .steps__num { background: var(--lime-500); border-color: var(--lime-500); color: var(--graphite-900); }
.steps__item--current .steps__num { background: var(--lime-500); border-color: var(--lime-500); color: var(--graphite-900); }
.steps__title { font-weight: 620; color: var(--graphite-900); }
.steps__note { display: block; font-size: var(--step-12); color: var(--graphite-500); font-weight: 400; }
.steps__line { width: 40px; height: 1px; background: var(--line-300); }
@media (max-width: 767px) { .steps__line { display: none; } }

/* ---------------------------------------------------------------- прочее */

.progress { height: 8px; background: var(--paper-warm); border-radius: var(--radius-pill); overflow: hidden; border: 1px solid var(--line-200); }
.progress__bar { display: block; height: 100%; background: var(--lime-500); border-radius: var(--radius-pill); transition: width var(--t-medium); }
.progress__bar--ok { background: var(--ok-600); }
.progress__bar--dark { background: var(--graphite-900); }
.progress__label { margin: 6px 0 0; font-size: var(--step-13); color: var(--graphite-500); }
.progress__label b { color: var(--graphite-900); }

.crumbs { font-size: var(--step-13); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 16px; }
.crumbs li { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.crumbs__sep { color: var(--graphite-500); }
.crumbs a { color: var(--graphite-500); text-decoration: none; }
.crumbs a:hover { color: var(--graphite-900); text-decoration: underline; text-decoration-color: var(--lime-500); }

.pager { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.pager__link {
  min-width: 42px; height: 42px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-200); border-radius: var(--radius-sm); color: var(--graphite-700);
  text-decoration: none; font-size: var(--step-14);
}
.pager__link:hover { border-color: var(--graphite-900); color: var(--graphite-900); }
.pager__link--active { background: var(--graphite-900); border-color: var(--graphite-900); color: var(--lime-500); font-weight: 640; }
.pager__gap { color: var(--graphite-500); }

.eyebrow { font-size: var(--step-12); text-transform: uppercase; letter-spacing: 0.1em; color: var(--graphite-500); font-weight: 640; margin: 0 0 10px; }
.eyebrow--lime { color: var(--graphite-900); background: var(--lime-500); display: inline-block; padding: 3px 10px; border-radius: var(--radius-xs); }
.section-head { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head h1 { margin: 0; }
.section-head__text { margin: 10px 0 0; color: var(--graphite-500); max-width: 62ch; }

/* Подсветка части заголовка — приём из макета журнала и главной. */
.mark { background: var(--lime-500); padding: 0 8px; border-radius: 4px; box-decoration-break: clone; }

/* Список вопросов и ответов: раскрывается средствами браузера, без скрипта.
   Знак «плюс» меняется на «минус», а не поворачивается: так понятнее состояние. */
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px; padding: 18px 20px;
  font-weight: 620; color: var(--graphite-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--graphite-700); }
.faq-item__mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-300); position: relative; margin-top: 2px;
}
.faq-item__mark::before,
.faq-item__mark::after {
  content: ""; position: absolute; background: var(--graphite-700); border-radius: 1px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.faq-item__mark::before { width: 10px; height: 1.5px; }
.faq-item__mark::after { width: 1.5px; height: 10px; transition: opacity var(--t-fast); }
.faq-item[open] .faq-item__mark { background: var(--lime-500); border-color: var(--lime-500); }
.faq-item[open] .faq-item__mark::after { opacity: 0; }
.faq-item__body { padding: 0 20px 18px; border-top: 1px solid var(--line-200); padding-top: 14px; margin: 0 20px 18px; }
.faq-item__body p { max-width: 74ch; }

/* ---------------------------------------------------------------- таблицы */

/* Прокрутка внутри рамки: у таблицы своя горизонтальная прокрутка, страница целиком
   не двигается. */
.table-wrap { overflow-x: auto; border: 1px solid var(--line-200); border-radius: var(--radius-md); background: var(--paper); }

/* Полоса прокрутки видна: на широких таблицах это единственный признак того, что
   справа есть ещё колонки. Системная полоса в тёмной теме и на некоторых системах
   не показывается, пока не начнёшь прокручивать, и тогда обрезанный край выглядит
   как потеря данных. Проверено снимком docs/screens/34-admin-users-1024.png:
   от «Создан» видны первые знаки, колонок «Статус» и «Открыть» нет. */
.table-wrap { scrollbar-width: thin; scrollbar-color: var(--graphite-300) transparent; }
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-track { background: var(--paper-warm); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.table-wrap::-webkit-scrollbar-thumb { background: var(--graphite-200); border-radius: 6px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--graphite-300); }

/* Тень у правого края: признак того, что справа есть ещё колонки.
   Измерено на живой странице: рамка 663 пикселя, таблица 1039 — почти четыреста
   пикселей скрыто. Полосы прокрутки на телефоне не видно, и без тени обрезанный
   край читается как потеря данных. Тень проявляется только когда есть что показать:
   у коротких таблиц её не будет. */
.table-wrap { position: relative; }
.table-wrap--scroll::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  pointer-events: none; border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--paper) 78%);
  box-shadow: inset -3px 0 6px -3px rgba(19, 23, 14, 0.28);
}
table.table { width: 100%; border-collapse: collapse; font-size: var(--step-14); }
.table th, .table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line-200); vertical-align: top; }
.table th { background: var(--paper-warm); font-size: var(--step-12); text-transform: uppercase; letter-spacing: 0.06em; color: var(--graphite-500); font-weight: 640; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--lime-050); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table--zebra tbody tr:nth-child(even) { background: var(--surface); }

/* ---------------------------------------------------------------- герой главной */

.hero { padding: 40px 0 32px; background: var(--paper-warm); }
.hero__inner { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1100px) { .hero__inner { grid-template-columns: minmax(0, 1fr) 460px; gap: 48px; } }
.hero h1 { font-size: var(--step-38); max-width: 20ch; margin-bottom: 16px; }
@media (min-width: 960px) { .hero { padding: 64px 0 48px; } .hero h1 { font-size: var(--step-60); } }
.hero__lead { font-size: var(--step-18); color: var(--graphite-700); max-width: 52ch; margin-bottom: 24px; }
.hero__search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero__search .search { flex: 1 1 420px; }
.hero__search .btn { flex: 0 0 auto; }
.hero__hints { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; font-size: var(--step-13); color: var(--graphite-500); }
.hero__media { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--paper); border: 1px solid var(--line-200); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__portrait {
  display: grid; place-items: center; padding: 34px 28px 36px;
  background:
    radial-gradient(120% 90% at 80% 10%, var(--lime-100), transparent 60%),
    linear-gradient(180deg, var(--lime-050), var(--paper));
}
.hero__portrait .avatar { box-shadow: 0 18px 40px rgba(19, 23, 14, 0.18); }
/* Карточка специалиста стоит под портретом, а не поверх него: наложение ломало
   разметку на телефоне, где карточка выше иллюстрации. */
.hero__card {
  margin: 0 16px 16px;
  background: var(--paper); border-radius: var(--radius-md); padding: 14px 16px;
  border: 1px solid var(--line-200); box-shadow: var(--shadow-2);
}

/* ---------------------------------------------------------------- фильтры каталога */

.catalog { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.catalog > * { min-width: 0; }
@media (min-width: 1024px) { .catalog { grid-template-columns: 268px minmax(0, 1fr); } }
.filters { background: var(--paper); border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 18px; }
@media (min-width: 1024px) { .filters { position: sticky; top: 88px; } }

.filters__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.filters__title { font-size: var(--step-16); font-weight: 660; color: var(--graphite-900); }
.filters__reset { font-size: var(--step-13); color: var(--graphite-500); text-decoration: none; }
.filters__reset:hover { color: var(--graphite-900); text-decoration: underline; text-decoration-color: var(--lime-500); }

.filters__group { border-top: 1px solid var(--line-200); padding: 10px 0; }
.filters__group[open] { padding-bottom: 14px; }
.filters__group > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  font-size: var(--step-14); font-weight: 640; color: var(--graphite-900); padding: 4px 0;
}
.filters__group > summary::-webkit-details-marker { display: none; }
.filters__group > summary::after { content: '+'; color: var(--graphite-500); font-weight: 500; font-size: var(--step-18); line-height: 1; }
.filters__group[open] > summary::after { content: '−'; }
.filters__group > summary:hover { color: var(--graphite-700); }

.filters fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.filters legend { font-size: var(--step-13); font-weight: 640; color: var(--graphite-900); padding: 0; margin-bottom: 10px; }
/* Список значений внутри группы фильтров.
   Прокрутка внутри прокрутки: страница длинная, и раскрытая группа с семьюдесятью
   значениями выталкивает кнопку «Показать» далеко вниз. Поэтому список ограничен
   высотой и прокручивается сам.

   Здесь было две ошибки, и обе видно только глазами.

   1. При высоте 240 px двенадцать отраслей не помещались, и последняя обрезалась на
      середине слова. Сейчас высота 340 px: двенадцать отраслей помещаются целиком.
   2. Обрезанная строка выглядела как конец списка — человек не догадывался, что внутри
      можно прокручивать. Плавное затухание снизу показывает, что список продолжается.

   Поле снизу нужно для самого затухания: без него маска гасит текст последней строки,
   но строка остаётся в кадре и читается как обрезанная. */
.filters__list {
  list-style: none; padding: 0 0 18px; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
  max-height: 340px; overflow: auto; scrollbar-width: thin;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent calc(100% - 4px));
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent calc(100% - 4px));
}
.filters__list label { display: flex; align-items: center; gap: 8px; font-size: var(--step-14); cursor: pointer; padding: 4px 0; }
.filters__list input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--graphite-900); }
.filters__count { margin-left: auto; font-size: var(--step-12); color: var(--graphite-500); font-variant-numeric: tabular-nums; }
.filters__actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.filters__group .check { font-size: var(--step-14); padding: 3px 0; }

.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.list-head__count { font-size: var(--step-14); color: var(--graphite-500); }

/* ---------------------------------------------------------------- профиль специалиста */

.profile { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.profile > * { min-width: 0; }
@media (min-width: 1024px) { .profile { grid-template-columns: minmax(0, 1fr) 400px; } }
@media (min-width: 1240px) { .profile { grid-template-columns: minmax(0, 1fr) 420px; } }

.profile-cover { background: var(--paper-warm); padding: 28px 0; border-bottom: 1px solid var(--line-200); }
.profile-cover__inner { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .profile-cover__inner { grid-template-columns: 220px minmax(0, 1fr); } }
.profile-cover__photo { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
.profile-cover__photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-cover__name { font-size: var(--step-48); line-height: 1; margin: 6px 0 10px; }
.profile__head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.profile__title { margin: 0 0 6px; overflow-wrap: anywhere; }
.profile__facts { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.profile__facts li { display: flex; gap: 10px; font-size: var(--step-14); align-items: flex-start; }
.profile__facts svg { color: var(--graphite-500); margin-top: 3px; }
.aside { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) { .aside { position: sticky; top: 88px; } }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-200); margin-bottom: 24px; overflow-x: auto; }
.tabs__item {
  padding: 12px 14px; font-size: var(--step-14); font-weight: 600; color: var(--graphite-500);
  text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap;
}
.tabs__item:hover { color: var(--graphite-900); }
.tabs__item--active { color: var(--graphite-900); border-bottom-color: var(--lime-500); }

/* Прейскурант услуг: строки с ценой справа, как в макете профиля. */
.price-list { border: 1px solid var(--line-200); border-radius: var(--radius-md); overflow: hidden; }
.price-list__row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-bottom: 1px solid var(--line-200); background: var(--paper); text-decoration: none; color: var(--graphite-900);
  transition: background var(--t-fast);
}
.price-list__row:last-child { border-bottom: 0; }
.price-list__row:hover { background: var(--lime-050); }
.price-list__icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--paper-warm); }
.price-list__title { font-weight: 620; font-size: var(--step-16); }
.price-list__note { font-size: var(--step-13); color: var(--graphite-500); }
.price-list__value { margin-left: auto; font-family: var(--font-display); font-size: var(--step-20); letter-spacing: -0.02em; white-space: nowrap; }

/* ---------------------------------------------------------------- кабинеты и админка */

/* Сетки кабинетов: важно min-width: 0 у колонок. Без него широкие таблицы
   растягивают колонку и страница получает горизонтальную прокрутку. */
.desk-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.desk-grid > * { min-width: 0; }

/* Две колонки: содержимое дела и боковая колонка.
   Ширина боковой зависит от того, сколько места есть на самом деле.
   Измерено на живой странице (1024 пикселя, дело № 1): основной области достаётся
   600 пикселей, а боковой колонке при ширине 340 остаётся 240 — и список «Договорённость»
   схлопывается: подпись занимает 190 пикселей, значению остаётся 8, и «95000 ₽»
   печатается по одной цифре в строке. На 1440 и на 390 этого не видно.
   Поэтому на средней ширине боковая колонка уже, а с 1240 — прежняя. */
@media (min-width: 1024px) { .desk-grid { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (min-width: 1240px) { .desk-grid { grid-template-columns: minmax(0, 1fr) 380px; } }

.kv { display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr); gap: 10px 16px; font-size: var(--step-14); }
.kv dt { color: var(--graphite-500); }
.kv dd { margin: 0; color: var(--graphite-900); }

/* На средней ширине подпись и значение идут друг под другом, а не в две колонки.
   Измерено на живой странице: контейнер списка бывает 238 пикселей, подпись при
   этом занимает 190 и значению остаётся меньше пятидесяти. Тогда «95000 ₽» и
   «15 октября 2026, 09:53» печатаются по одной цифре в строке.
   Значение важнее подписи, поэтому на узком месте подпись уходит наверх. */
@media (max-width: 1239px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kv dt { margin-top: 8px; }
  .kv dt:first-child { margin-top: 0; }
}

.doc-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: var(--paper);
}
.doc-row + .doc-row { margin-top: 8px; }
.doc-row__icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--danger-100); color: var(--danger-700); font-size: 11px; font-weight: 700; }
.doc-row__title { font-size: var(--step-14); font-weight: 620; color: var(--graphite-900); }
.doc-row__note { font-size: var(--step-12); color: var(--graphite-500); }

.chat-list { display: flex; flex-direction: column; gap: 12px; }
.chat-msg { display: flex; gap: 10px; align-items: flex-start; }
.chat-msg__body { background: var(--paper-warm); border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--step-14); max-width: 46ch; }
.chat-msg--mine { flex-direction: row-reverse; }
.chat-msg--mine .chat-msg__body { background: var(--lime-100); }
.chat-msg__time { font-size: var(--step-12); color: var(--graphite-500); margin-top: 4px; }

/* Помощник АРБИ ИИ: отдельный цвет и знак, чтобы результат модели нельзя было
   спутать с ответом юриста. */
.ai-panel { border: 1px solid var(--ai-100); background: var(--ai-050); border-radius: var(--radius-lg); padding: 20px; }
.ai-bubble { display: flex; gap: 12px; align-items: flex-start; }
.ai-bubble__mark {
  width: 38px; height: 38px; flex: none; border-radius: var(--radius-sm);
  background: var(--graphite-900); display: grid; place-items: center;
}
.ai-bubble__mark svg { width: 20px; height: 20px; }
.ai-bubble__body { background: var(--lime-100); border-radius: var(--radius-md); padding: 12px 16px; font-size: var(--step-14); }
.ai-bubble__name { font-size: var(--step-13); font-weight: 640; color: var(--graphite-900); margin-bottom: 2px; }

/* ---------------------------------------------------------------- cookie и служебное */

.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  background: var(--graphite-900); color: #fff; border-radius: var(--radius-md);
  padding: 16px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  box-shadow: var(--shadow-3); max-width: 940px; margin: 0 auto;
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0; font-size: var(--step-14); color: var(--graphite-200); flex: 1 1 320px; }
.cookie a { color: var(--lime-500); }

.styleguide-block { margin-bottom: 44px; }
.styleguide-block > h2 { margin-bottom: 18px; }
.token-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.token { border: 1px solid var(--line-200); border-radius: var(--radius-sm); overflow: hidden; font-size: var(--step-12); }
.token__swatch { height: 58px; }
.token__meta { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; background: var(--paper); }
.token__name { font-family: var(--font-mono); color: var(--graphite-900); }
.token__value { color: var(--graphite-500); font-family: var(--font-mono); }

/* Поле загрузки файла: браузерное оформление слишком мелкое, поэтому задаём
   свои отступы и рамку — иначе поле выбивается из остальных полей формы. */
.input--file { padding: 10px 12px; cursor: pointer; }
.input--file::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 0; border-radius: var(--radius-xs);
  background: var(--lime-500); color: var(--graphite-900); font: inherit; font-weight: 620; cursor: pointer;
}
.input--file::file-selector-button:hover { background: var(--lime-600, var(--lime-500)); }

/* Строка загрузки материала: файл и подпись к нему стоят рядом, чтобы
   юрист заполнял их как одну запись, а не искал соответствие в двух полях. */
/* Строка загрузки материала.
   Файловое поле занимает всю ширину: у системного поля выбора файла своя
   минимальная ширина, и в узкой колонке имя документа обрезается до «Фа...ран».
   Вид документа и подпись стоят ниже, двумя колонками. */
.files-row { display: grid; gap: 8px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line-200); }
.files-row:last-of-type { border-bottom: 0; }
.files-row__meta { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px; }
@media (max-width: 640px) { .files-row__meta { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .files-row { grid-template-columns: minmax(0, 1fr); } }

/* Календарь: сетка месяца.
   Неделя начинается с понедельника, выходные рядом — так принято в рабочих
   календарях, и планировать неделю удобнее. */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal__head { font-size: var(--step-12); text-transform: uppercase; letter-spacing: .06em; color: var(--graphite-500); padding: 4px 8px; }
.cal__cell { min-height: 92px; padding: 6px 8px; border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: var(--paper); display: flex; flex-direction: column; gap: 4px; }
.cal__cell--empty { background: transparent; border-color: transparent; }
.cal__cell--today { border-color: var(--lime-500); border-width: 2px; background: var(--lime-050); }
.cal__day { font-size: var(--step-13); font-weight: 640; color: var(--graphite-500); }
.cal__cell--today .cal__day { color: var(--graphite-900); }
.cal__item { font-size: var(--step-12); line-height: 1.3; padding: 3px 5px; border-radius: 4px; background: var(--paper-warm); border-left: 3px solid var(--graphite-300, #c9c9c0); }
.cal__item--hearing { border-left-color: var(--lime-500); background: var(--lime-050); }
.cal__item--task { border-left-color: var(--graphite-500); }
.cal__time { color: var(--graphite-500); }
.cal__more { font-size: var(--step-12); color: var(--graphite-500); }
@media (max-width: 760px) {
  /* Сетка месяца на телефоне.
     Семь колонок с подписями не помещаются в узкий экран: без ограничения
     прокручивается вся страница, и это мешает читать остальное. Поэтому прокрутка
     остаётся внутри календаря, а страница целиком не двигается.

     Ширину ставим 100%, а не 420 пикселей: измерено на живой странице, что при
     420 календарь шире окна (449 против 342), и последняя колонка — воскресенье с
     сегодняшним числом — уезжает за край. Из семи колонок видно шесть, и человек
     не видит сегодняшний день. С уменьшенными отступами и шрифтом все семь
     помещаются: ячейка 46 пикселей вместо 55, строка 10 пикселей.
     Прокрутка остаётся запасным вариантом для очень узких экранов. */
  .cal-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal { min-width: 0; }
  .cal__cell { min-height: 58px; padding: 3px 4px; }
  .cal__item { font-size: 10px; padding: 2px 3px; }
  .cal__time { font-size: 10px; }
  /* Содержимое ячейки не должно задавать её ширину: сетка уже ограничена окном.
     Без этого длинное название («Заседание по делу») растягивает колонку, и сетка
     снова становится шире экрана. */
  .cal__cell > * { min-width: 0; overflow-wrap: anywhere; }
}
/* Лента специалистов: основная колонка и боковая.
   Лента читается сверху вниз, поэтому ширина колонки ограничена: длинная строка
   в юридическом тексте читается плохо. */
.feed { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.feed__main { min-width: 0; }
@media (max-width: 940px) {
  .feed { grid-template-columns: minmax(0, 1fr); }
}
/* Отклик без формы: для гостя показываем счётчик, но нажимать нечего. */
.chip--static { cursor: default; opacity: .85; }
.chip--static:hover { border-color: var(--graphite-200); color: inherit; }
button.chip { background: var(--paper); font: inherit; cursor: pointer; }

/* Длинные значения в списках сведений.
   Почта, ссылка на реестр и кадастровый номер — это одно слово без пробелов.
   Без переноса оно растягивает страницу шире экрана телефона, и двигается вся
   страница целиком. Переносим внутри слова: читается хуже, зато не ломается вид.
   Перенос наследуется ссылкой внутри ячейки — она тоже одно длинное слово. */
.kv dd, .kv dt { overflow-wrap: anywhere; word-break: break-word; }
.kv dd a { overflow-wrap: anywhere; word-break: break-word; }
.card a[href^="tel:"], .card a[href^="mailto:"] { overflow-wrap: anywhere; word-break: break-word; }
/* Блок с примером запроса и ответа на странице для разработчиков.
   Прокрутка внутри блока: длинная строка запроса не должна растягивать страницу
   на телефоне. */
.code { background: var(--graphite-900); color: var(--paper-warm); padding: 12px 14px; border-radius: var(--radius-sm);
  overflow-x: auto; font-size: var(--step-13); line-height: 1.5; margin: 0; }
.code code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; white-space: pre; }
/* ============================================================ Услуги, журнал, баннер

   Три блока главной, снятые с макета: карточки услуг как на бирже услуг, журнал
   крупным разбором и двумя материалами рядом, салатовая полоса для специалистов. */

/* --- Карточки услуг --- */
.svc-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.svc {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line-200);
  border-radius: var(--radius-lg); overflow: hidden;
}
.svc:hover { border-color: var(--graphite-900); }
.svc__media { display: block; position: relative; background: var(--lime-050); }
.svc__media img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: center 20%; }
.svc__initials {
  display: grid; place-items: center; aspect-ratio: 8 / 5;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-38);
  /* Тот же знак площадки, что и в кружке: тёмный графит с салатовыми буквами.
     Раньше здесь были серые буквы на светлом — выглядело как недогруженный снимок. */
  background: var(--graphite-900); color: var(--lime-500);
}
/* Тело карточки занимает всё оставшееся место: нижняя строка с ценой и сроком
   должна стоять на одной высоте во всех карточках, даже если описания разной длины. */
.svc__body { flex: 1 1 auto; padding: 16px 18px 12px; }
.svc__title { font-size: var(--step-18); line-height: 1.25; margin: 0 0 6px; }
.svc__lead { font-size: var(--step-14); color: var(--graphite-700); margin: 0 0 14px; }
.svc__who { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.svc__who-text { display: flex; flex-direction: column; min-width: 0; }
.svc__who-name { font-weight: 620; font-size: var(--step-14); }
.svc__who-role { font-size: var(--step-13); color: var(--graphite-500); }
.svc__rating { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: var(--step-13); color: var(--graphite-700); }
.svc__rating .ico { color: var(--lime-600); }
.svc__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--line-200); background: var(--paper-warm);
}
.svc__term { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step-13); color: var(--graphite-500); }
.svc__price { font-family: var(--font-display); font-weight: 600; font-size: var(--step-18); white-space: nowrap; }

/* --- Журнал --- */
.journal-row { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .journal-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.journal-row__side { display: grid; gap: 16px; }
.jcard {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--paper); border: 1px solid var(--line-200);
  border-radius: var(--radius-lg); padding: 18px; text-decoration: none; color: inherit;
}
.jcard:hover { border-color: var(--graphite-900); }
.jcard--lead { padding: 26px; background: var(--paper); }
.jcard__kind {
  align-self: flex-start; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--lime-100); font-size: var(--step-12); font-weight: 620; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.jcard__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-20); line-height: 1.2; }
.jcard--lead .jcard__title { font-size: var(--step-30); }
.jcard__lead { font-size: var(--step-16); color: var(--graphite-700); }
.jcard__meta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step-13); color: var(--graphite-500); margin-top: auto; }

/* --- Салатовая полоса для специалистов --- */
.promo-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; padding: 28px 32px; border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--lime-500) 0%, var(--lime-400) 62%, var(--lime-500) 100%);
}
.promo-banner__text { min-width: 0; }
.promo-banner h2 { margin: 0 0 6px; }
.promo-banner p { margin: 0; font-size: var(--step-18); color: var(--graphite-800); }
.promo-banner__action { flex: 0 0 auto; }
@media (max-width: 640px) { .promo-banner { padding: 22px 20px; } .promo-banner p { font-size: var(--step-16); } }

/* ============================================================ Страница услуги

   Устройство снято с биржи услуг: слева что сделают и что входит в работу, справа
   цена, срок и кнопка. Человек приходит решать вопрос, а не выбирать человека,
   поэтому услуга — отдельная страница со своим адресом, а не строка в профиле.

   Что заменено своим:
     * кнопка заказа с оплатой → «Описать задачу»: платформа не держит деньги клиента;
     * «45 заказов в очереди» → число дел в работе по нашим данным;
     * счётчик просмотров не показываем: он не помогает выбрать юриста. */

.svc-page { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .svc-page { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

.svc-page__main { min-width: 0; }
.svc-page__title { font-size: var(--step-30); line-height: 1.15; margin: 8px 0 18px; max-width: 30ch; }

/* Исполнитель: лицо, имя, роль, проверка и оценка — одной строкой, как на бирже услуг. */
.svc-page__provider { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.svc-page__provider-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.svc-page__provider-name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-20); }
.svc-page__provider-role { font-size: var(--step-14); color: var(--graphite-700); }
.svc-page__provider-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc-page__rating { display: inline-flex; align-items: center; gap: 5px; font-size: var(--step-14); color: var(--graphite-900); }
.svc-page__rating .ico { color: var(--lime-600); }

/* Загруженность: сколько дел в работе. На бирже услуг здесь «сколько заказов в очереди». */
.svc-page__queue {
  display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0;
  padding: 8px 14px; border-radius: var(--radius-pill); background: var(--paper-warm);
  font-size: var(--step-14); color: var(--graphite-700);
}

.svc-page__block { margin-top: 32px; }
.svc-page__block-title { font-size: var(--step-20); margin: 0 0 10px; }
.svc-page__text { font-size: var(--step-16); margin: 0; max-width: 70ch; }
.svc-page__list { margin: 0; padding-left: 20px; font-size: var(--step-16); line-height: 1.7; }
.svc-page__list li { margin-bottom: 6px; }
.svc-page__note { font-size: var(--step-13); color: var(--graphite-500); margin: 10px 0 0; max-width: 70ch; }

/* Пакеты работ: три варианта рядом, чтобы сравнивать, а не искать. */
.tier-list { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .tier-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier { background: var(--paper); border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 18px; }
.tier__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tier__name { font-weight: 620; font-size: var(--step-16); }
.tier__price { font-family: var(--font-display); font-weight: 600; font-size: var(--step-20); white-space: nowrap; }
.tier__term { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step-13); color: var(--graphite-500); margin: 8px 0 0; }
.tier__items { margin: 12px 0 0; padding-left: 18px; font-size: var(--step-14); line-height: 1.6; }
.tier__items li { margin-bottom: 5px; }

.svc-page__others { list-style: none; margin: 0; padding: 0; font-size: var(--step-16); }
.svc-page__others li { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line-200); }
.svc-page__others a { color: var(--graphite-900); }

/* Правая колонка: цена, срок и кнопка. Держим её на виду при прокрутке — человек
   читает описание и хочет видеть цену, не возвращаясь наверх. */
.svc-page__side { min-width: 0; }
@media (min-width: 1000px) { .svc-page__card { position: sticky; top: 20px; } }
.svc-page__card {
  background: var(--paper); border: 1px solid var(--line-200);
  border-radius: var(--radius-lg); padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.svc-page__price-block { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line-200); }
.svc-page__price { font-family: var(--font-display); font-weight: 600; font-size: var(--step-30); line-height: 1; }
.svc-page__unit { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--step-14); color: var(--graphite-500); }

/* ============================================================ Дела в судах

   Судебная практика специалиста на странице услуги. Ссылка ведёт на официальный
   сервис арбитражных судов с подставленным номером дела: собирать данные с сайтов
   судов автоматически нельзя (статья 272 УК РФ), поэтому карточку открывает человек. */

.case-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.case-list__item {
  background: var(--paper); border: 1px solid var(--line-200);
  border-radius: var(--radius-md); padding: 14px 16px;
}
.case-list__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* Номер дела — ссылка на официальный сервис. Подчёркивание оставлено: по нему видно,
   что это переход наружу, а не подпись. */
.case-list__number { font-family: var(--font-display); font-weight: 600; font-size: var(--step-18); color: var(--graphite-900); }
.case-list__court { font-size: var(--step-13); color: var(--graphite-500); }
.case-list__subject { font-size: var(--step-14); margin: 6px 0 0; color: var(--graphite-700); }
.case-list__status {
  display: inline-block; margin-top: 8px; padding: 3px 10px;
  border-radius: var(--radius-pill); background: var(--paper-warm);
  font-size: var(--step-12); color: var(--graphite-500);
}

/* ---------------------------------------------------------------- герой: пример работы */

.hero__demo {
  display: grid; gap: 10px; padding: 18px;
  background:
    radial-gradient(120% 80% at 85% 0%, var(--lime-100), transparent 55%),
    linear-gradient(165deg, var(--lime-050), var(--paper) 60%);
  box-shadow: var(--shadow-2);
}
.hero-demo__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-demo__hint { font-size: var(--step-12); color: var(--graphite-500); }
.hero-demo__task {
  background: var(--paper); border: 1px solid var(--line-200); border-radius: var(--radius-md);
  padding: 12px 14px; box-shadow: var(--shadow-1);
}
.hero-demo__label { font-size: var(--step-12); color: var(--graphite-500); text-transform: uppercase; letter-spacing: 0.06em; }
.hero-demo__title { font-family: var(--font-display); font-size: var(--step-20); letter-spacing: -0.02em; margin-top: 4px; }
.hero-demo__meta { font-size: var(--step-13); color: var(--graphite-500); margin-top: 4px; }
.hero-demo__offers { display: grid; gap: 8px; }
.hero-demo__offers-title { font-size: var(--step-13); color: var(--graphite-500); }
.hero-demo__offer {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line-200); border-radius: var(--radius-md);
  padding: 10px 12px; transition: border-color var(--t-fast), transform var(--t-fast);
}
.hero-demo__offer:hover { border-color: var(--graphite-300); transform: translateY(-1px); }
.hero-demo__avatar {
  width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 10px; background: var(--graphite-900); color: var(--lime-500);
  font-weight: 650; font-size: var(--step-14);
}
.hero-demo__who { display: grid; min-width: 0; gap: 2px; }
.hero-demo__who span { font-size: var(--step-12); color: var(--graphite-500); }
.hero-demo__price {
  margin-left: auto; text-align: right; display: grid; gap: 2px;
  font-weight: 660; color: var(--graphite-900); white-space: nowrap;
}
.hero-demo__price span { font-weight: 400; font-size: var(--step-12); color: var(--graphite-500); }
.hero-demo__foot { font-size: var(--step-13); color: var(--graphite-700); text-align: center; padding-top: 2px; }

/* ---------------------------------------------------------------- карточка: вторичные действия */

.spec-row__secondary { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; width: 100%; }
.spec-row__price { align-items: flex-end; }

/* Карточка каталога: плотнее и отзывчивее. Высота уменьшилась, потому что
   вторичные действия встали в строку, а не столбиком. */
.spec-row { padding: 16px; gap: 16px; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.spec-row:hover { transform: translateY(-1px); }
.spec-row__facts { margin: 6px 0 8px; }
.list-head { margin-bottom: 12px; }

/* ---------------------------------------------------------------- форма заявки */

.request-page { max-width: 1120px; }
.request-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .request-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
}
.request-main { min-width: 0; }
.request-aside { min-width: 0; }
@media (min-width: 1024px) { .request-aside { position: sticky; top: 88px; } }
.request-steps { margin: 0; padding-left: 18px; display: grid; gap: 10px; font-size: var(--step-14); color: var(--graphite-700); }
.request-steps li::marker { color: var(--graphite-900); font-weight: 660; }

/* Числа в таблицах не переносятся: «3 500 ₽» ломалось на «3» и «500 ₽». */
.table td.num, .table th.num { white-space: nowrap; }

/* Фильтры биржи заявок: поиск, отрасль, срочность и кнопка — в одну строку.
   Раньше select с width:100% заставлял каждый элемент переноситься на свою строку. */
.board-filters { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin: 24px 0; }
@media (min-width: 900px) {
  .board-filters { grid-template-columns: minmax(0, 1fr) 240px auto auto; align-items: center; }
}
.board-filters .search { min-width: 0; }
.board-filters .input { width: 100%; }
.board-filters .check { white-space: nowrap; }