/* Отклик — общие кирпичики интерфейса для приложения соискателя, кабинета и страницы для работодателей.
   Подключается после tokens.css. Цвета — только через токены. Свои стили каждое приложение пишет в своём
   styles.css; эти классы не переопределять «на месте» — нужно другое, заведите свой класс.

   Что есть: .btn (+ -primary -soft -ghost -danger -lg -sm -block -icon), .input .textarea .select, .field/.label/.hint/.err,
   .card, .chip (+ .on), .badge (+ -brand -accent -ok -warn -danger -info -muted), .st (плашка этапа отклика: .st-new …),
   .avatar, .sk (скелет загрузки), .empty, .tag, .salary, .verified, .count, .logo, .in-up/.in-pop (появление),
   .row/.col/.grow/.gap*, .muted/.sm/.ell/.h1…h4. */

/* ───────── типографика и утилиты ───────── */
.h1 { font-size: 30px; letter-spacing: -.02em; font-weight: 800; }
.h2 { font-size: 24px; letter-spacing: -.015em; }
.h3 { font-size: 19px; }
.h4 { font-size: 16px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.sm { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.b { font-weight: 700; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; }
.min0 { min-width: 0; }
.between { justify-content: space-between; }
.gap4 { gap: 4px; } .gap8 { gap: 8px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; } .gap24 { gap: 24px; }
.center { text-align: center; justify-content: center; }
.center-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.ok-t { color: var(--ok); } .warn-t { color: var(--warn); } .danger-t { color: var(--danger); }
.hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* появление элементов, которые рисует Preact (кривые и кадры Brain Motion): class="in-up" style="--d:80ms".
   Атрибут data-bm для таких элементов не годится: brain-motion.js видит только то, что было в странице при загрузке
   (или вызывайте BM.scan(узел) после вставки). */
.in-up { animation: bm-fade-up var(--bm-slow, .42s) var(--bm-ease-out, var(--ease)) var(--d, 0ms) both; }
.in-pop { animation: bm-pop .6s var(--bm-ease, var(--ease)) var(--d, 0ms) both; }

/* ───────── кнопки ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--r); background: var(--surface-2); color: var(--ink);
  font-weight: 650; font-size: var(--fs); line-height: 1.1; text-decoration: none !important; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  user-select: none; -webkit-user-select: none;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: default; transform: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-soft { background: var(--primary-soft); color: var(--primary-soft-ink); }
.btn-soft:hover { background: color-mix(in oklab, var(--primary-soft) 80%, var(--primary) 20%); }
.btn-ghost { background: transparent; border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: color-mix(in oklab, var(--danger-soft) 82%, var(--danger) 18%); }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: var(--fs-md); border-radius: var(--r-lg); }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-block { display: flex; width: 100%; }
.btn-icon { width: 44px; padding: 0; border-radius: 50%; background: transparent; color: var(--ink-2); }
.btn-icon:hover { background: var(--surface-2); }
.btn-icon.btn-sm { width: 34px; }
.linkish { background: none; border: 0; padding: 0; color: var(--primary); font-weight: 650; cursor: pointer; }
.linkish:hover { text-decoration: underline; }

/* ───────── поля ───────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); }
.hint { font-size: var(--fs-sm); color: var(--muted); }
.err { font-size: var(--fs-sm); color: var(--danger); }
.input, .textarea, .select {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--surface); color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--faint); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }

/* ───────── карточка ───────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
a.card, button.card { display: block; width: 100%; text-align: left; color: inherit; text-decoration: none !important;
  transition: border-color var(--t-fast), box-shadow var(--t), transform var(--t); }
a.card:hover, button.card:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); }

/* ───────── чипы (фильтры) и метки ───────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-full);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap; text-decoration: none !important; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip:hover { border-color: var(--faint); }
.chip.on, .chip[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-soft-ink); }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--ink-2); font-size: var(--fs-sm); }
.badge { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.badge-brand { background: var(--primary-soft); color: var(--primary-soft-ink); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-muted { background: var(--surface-2); color: var(--muted); }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full); background: var(--accent-strong); color: #1a1205; font-size: 11px; font-weight: 800; }

/* плашка этапа отклика: <span class="st st-interview">Собеседование</span> (подписи — dict.js, APP_STATUS) */
.st { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 650; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.st-invited { background: var(--st-invited-bg); color: var(--st-invited); }
.st-new { background: var(--st-new-bg); color: var(--st-new); }
.st-viewed { background: var(--st-viewed-bg); color: var(--st-viewed); }
.st-review { background: var(--st-review-bg); color: var(--st-review); }
.st-interview { background: var(--st-interview-bg); color: var(--st-interview); }
.st-offer { background: var(--st-offer-bg); color: var(--st-offer); }
.st-hired { background: var(--st-hired-bg); color: var(--st-hired); }
.st-rejected { background: var(--st-rejected-bg); color: var(--st-rejected); }
.st-declined { background: var(--st-declined-bg); color: var(--st-declined); }
.st-withdrawn { background: var(--st-withdrawn-bg); color: var(--st-withdrawn); }
.st-expired { background: var(--st-expired-bg); color: var(--st-expired); }

/* зарплата и «компания проверена» */
.salary { font-weight: 800; font-size: var(--fs-md); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.verified { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-size: var(--fs-sm); font-weight: 650; }

/* ───────── аватар, логотип компании ───────── */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2); font-weight: 700; font-size: 15px; overflow: hidden; object-fit: cover; }
.avatar.sq { border-radius: var(--r-sm); }           /* логотип компании — скруглённый квадрат */
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ───────── загрузка и пустые экраны ───────── */
.sk { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: sk 1.4s ease infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--muted); }
.empty .h3 { color: var(--ink); }

/* знак + название: <a class="logo"><img src="/shared/brand/mark.svg" …>Отклик</a>; в тёмной теме — mark-light.svg через <picture> или .logo-mark */
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 800; font-size: 20px; letter-spacing: -.02em; text-decoration: none !important; }
.logo-mark { flex: none; }                     /* размер — атрибутами width/height (компонент Mark) */
.logo-mark .bubble { fill: var(--ink); }
.logo-mark .check { stroke: var(--brand); fill: none; stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }