/*
 * Оформление: Material Design 3 по дизайн-системе noxlovette/material
 * (https://github.com/noxlovette/material, MIT), как в анкете СБ (1.dseded.ru):
 * токены формы, высоты, движения и типографики перенесены как CSS-переменные,
 * компоненты повторены обычным CSS. Цветовая схема — синяя, сгенерирована из seed #1A73E8
 * алгоритмом Material (material-color-utilities, схема Fidelity), см. docs/architecture.md.
 * Шрифт Roboto — свой (assets/fonts), не с CDN.
 */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/roboto-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/roboto-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/roboto-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/roboto-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Токены ---------- */

:root {
  color-scheme: light;
  /* Цвет: синяя схема (светлая) */
  --primary: rgb(0 91 191);
  --on-primary: rgb(255 255 255);
  --primary-container: rgb(26 115 232);
  --on-primary-container: rgb(255 255 255);
  --secondary: rgb(71 94 140);
  --on-secondary: rgb(255 255 255);
  --secondary-container: rgb(178 201 254);
  --on-secondary-container: rgb(61 84 129);
  --tertiary: rgb(158 67 0);
  --on-tertiary: rgb(255 255 255);
  --tertiary-container: rgb(197 85 0);
  --on-tertiary-container: rgb(14 2 0);
  --error: rgb(186 26 26);
  --on-error: rgb(255 255 255);
  --error-container: rgb(255 218 214);
  --on-error-container: rgb(147 0 10);
  --surface: rgb(249 249 255);
  --on-surface: rgb(25 28 35);
  --on-surface-variant: rgb(65 71 84);
  --outline: rgb(114 119 133);
  --outline-variant: rgb(193 198 214);
  --inverse-surface: rgb(45 48 56);
  --inverse-on-surface: rgb(239 240 250);
  --inverse-primary: rgb(173 199 255);
  --surface-container-lowest: rgb(255 255 255);
  --surface-container-low: rgb(242 243 253);
  --surface-container: rgb(236 237 247);
  --surface-container-high: rgb(230 232 242);
  --surface-container-highest: rgb(224 226 236);
  --shadow: rgb(0 0 0);
  --scrim: rgb(0 0 0);

  /* Форма: rounding.css */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Высота: elevation.css */
  --elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--shadow) 30%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--shadow) 15%, transparent);
  --elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--shadow) 30%, transparent), 0 2px 6px 2px color-mix(in srgb, var(--shadow) 15%, transparent);
  --elevation-3: 0 1px 3px 0 color-mix(in srgb, var(--shadow) 30%, transparent), 0 4px 8px 3px color-mix(in srgb, var(--shadow) 15%, transparent);

  /* Движение: motion.css (пружины Expressive; для эффектов — без перерегулирования) */
  --ease-effects: cubic-bezier(0.34, 0.8, 0.34, 1);
  --ease-spatial: cubic-bezier(0.27, 1.06, 0.18, 1);
  --motion-fast-effects: 190ms cubic-bezier(0.31, 0.94, 0.34, 1);
  --motion-effects: 270ms var(--ease-effects);
  --motion-spatial: 490ms var(--ease-spatial);

  /* Типографика: typescale.css */
  --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --display-small: 400 2.25rem/2.75rem var(--font);
  --headline-medium: 400 1.75rem/2.25rem var(--font);
  --headline-small: 400 1.5rem/2rem var(--font);
  --title-large: 400 1.375rem/1.75rem var(--font);
  --title-medium: 500 1rem/1.5rem var(--font);
  --title-small: 500 0.875rem/1.25rem var(--font);
  --body-large: 400 1rem/1.5rem var(--font);
  --body-medium: 400 0.875rem/1.25rem var(--font);
  --body-small: 400 0.75rem/1rem var(--font);
  --label-large: 500 0.875rem/1.25rem var(--font);
  --label-medium: 500 0.75rem/1rem var(--font);

  /* Слои: layers.css */
  --z-bar: 30;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Цвет: синяя схема (тёмная) */
    --primary: rgb(173 199 255);
    --on-primary: rgb(0 46 104);
    --primary-container: rgb(26 115 232);
    --on-primary-container: rgb(255 255 255);
    --secondary: rgb(175 199 251);
    --on-secondary: rgb(21 48 91);
    --secondary-container: rgb(46 70 115);
    --on-secondary-container: rgb(158 181 232);
    --tertiary: rgb(255 182 145);
    --on-tertiary: rgb(85 33 0);
    --tertiary-container: rgb(197 85 0);
    --on-tertiary-container: rgb(14 2 0);
    --error: rgb(255 180 171);
    --on-error: rgb(105 0 5);
    --error-container: rgb(147 0 10);
    --on-error-container: rgb(255 218 214);
    --surface: rgb(16 19 26);
    --on-surface: rgb(224 226 236);
    --on-surface-variant: rgb(193 198 214);
    --outline: rgb(139 144 159);
    --outline-variant: rgb(65 71 84);
    --inverse-surface: rgb(224 226 236);
    --inverse-on-surface: rgb(45 48 56);
    --inverse-primary: rgb(0 91 192);
    --surface-container-lowest: rgb(11 14 21);
    --surface-container-low: rgb(25 28 35);
    --surface-container: rgb(29 32 39);
    --surface-container-high: rgb(39 42 49);
    --surface-container-highest: rgb(50 53 60);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast-effects: 0ms linear;
    --motion-effects: 0ms linear;
    --motion-spatial: 0ms linear;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
  }
  /* Снекбару длительность нужна: без неё он исчезал сразу. Без движения — только гаснет в конце. */
  .snackbar {
    animation: 6s linear both snackbar-still !important;
  }
}
@keyframes snackbar-still {
  0%, 95% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* Плавный переход между страницами (браузеры с View Transitions; остальные — как обычно). */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 150ms var(--ease-effects) both fade-out;
}
::view-transition-new(root) {
  animation: 300ms var(--ease-effects) 60ms both fade-in-up;
}

@keyframes fade-out {
  to { opacity: 0; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes ripple {
  from { transform: scale(0); opacity: 0.24; }
  to { transform: scale(1); opacity: 0; }
}

/* ---------- Основа ---------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface);
  color: var(--on-surface);
  font: var(--body-large);
  letter-spacing: 0.03rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p {
  margin: 0;
}

a {
  color: var(--primary);
}

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}

/* ---------- Верхняя панель ---------- */

.top-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 0 8px 0 16px;
  background: var(--surface);
  transition: background-color var(--motion-effects), box-shadow var(--motion-effects);
}
/* При прокрутке панель приподнимается (класс ставит app.js). */
.top-bar.scrolled {
  background: var(--surface-container);
  box-shadow: var(--elevation-2);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: var(--on-surface);
  font: var(--title-large);
  text-decoration: none;
}
.brand .icon {
  color: var(--primary);
}
.who {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--on-surface-variant);
  font: var(--body-medium);
}
.who-name {
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ссылка «Claude» в панели: на телефоне — только значок. */
.nav-link {
  padding: 0 12px;
}
.nav-link .icon {
  margin-left: 0;
}

main {
  max-width: 880px;
  margin: 0 auto;
  padding: 8px 16px 48px;
}

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

.btn,
.icon-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font: var(--label-large);
  letter-spacing: 0.006rem;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--motion-effects), background-color var(--motion-effects), transform var(--motion-spatial);
}
/* Слой состояния: наведение и фокус слегка окрашивают кнопку цветом её текста. */
.btn::before,
.icon-btn::before,
.card-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--motion-fast-effects);
  pointer-events: none;
}
.btn:hover::before,
.icon-btn:hover::before,
.card-link:hover::before {
  opacity: 0.08;
}
.btn:focus-visible::before,
.icon-btn:focus-visible::before,
.card-link:focus-visible::before,
.btn:active::before,
.icon-btn:active::before {
  opacity: 0.12;
}
:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
}

.btn {
  height: 40px;
  padding: 0 24px;
  border-radius: var(--radius-full);
}
.btn .icon {
  width: 18px;
  height: 18px;
  margin-left: -8px;
}
.btn-filled {
  background: var(--primary);
  color: var(--on-primary);
}
.btn-filled:hover {
  box-shadow: var(--elevation-1);
}
.btn-tonal {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.btn-text {
  background: transparent;
  color: var(--primary);
  padding: 0 12px;
}
.btn-large {
  height: 56px;
  padding: 0 28px;
  border-radius: var(--radius-lg);
  font: var(--title-medium);
}
.btn-large .icon {
  width: 24px;
  height: 24px;
}
.btn:active {
  transform: scale(0.97);
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--on-surface-variant);
}

/* Значок «Обновить» крутится, пока страница загружается (класс ставит app.js). */
.busy .icon {
  animation: spin 900ms linear infinite;
}

/* Кнопка во время запроса без перезагрузки (app.js ставит aria-busy): текст и значок прячутся, ширина та же,
   по центру — кольцо загрузки цвета текста кнопки. */
.btn-filled { --spinner: var(--on-primary); }
.btn-tonal { --spinner: var(--on-secondary-container); }
.btn-text { --spinner: var(--primary); }
button.btn[aria-busy='true'] {
  color: transparent;
  cursor: progress;
}
button.btn[aria-busy='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  margin: auto;
  border: 2px solid var(--spinner, currentColor);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

/* Волна от точки нажатия (app.js). */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
  animation: ripple 600ms var(--ease-effects) forwards;
}

/* ---------- Главная без входа ---------- */

.hero {
  display: grid;
  gap: 24px;
  margin-top: 24px;
  padding: 40px 32px;
  border-radius: var(--radius-xl);
  background: var(--primary-container);
  color: var(--on-primary-container);
  animation: fade-in-up var(--motion-spatial) both;
}
.hero h1 {
  font: var(--display-small);
  max-width: 14em;
}
.hero p {
  font: var(--body-large);
  max-width: 36em;
  opacity: 0.9;
}
.hero .btn-filled {
  justify-self: start;
}
.hero .hint {
  font: var(--body-medium);
  opacity: 0.8;
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.steps li {
  display: grid;
  gap: 8px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  font: var(--body-medium);
  color: var(--on-surface-variant);
  animation: fade-in-up var(--motion-spatial) both;
}
.steps li:nth-child(1) { animation-delay: 80ms; }
.steps li:nth-child(2) { animation-delay: 140ms; }
.steps li:nth-child(3) { animation-delay: 200ms; }
.steps .icon {
  color: var(--primary);
}
.steps b {
  color: var(--on-surface);
  font: var(--title-medium);
}

/* ---------- Заголовок страницы ---------- */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 16px 0 20px;
}
.page-head h1 {
  font: var(--headline-medium);
}
.page-head .sub {
  margin-top: 4px;
  color: var(--on-surface-variant);
  font: var(--body-medium);
}

.banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--error-container);
  color: var(--on-error-container);
  font: var(--body-medium);
  animation: fade-in-up var(--motion-spatial) both;
}

.empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--on-surface-variant);
}

/* ---------- Список вакансий ---------- */


.cards {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  box-shadow: var(--elevation-1);
  transition: box-shadow var(--motion-effects), transform var(--motion-spatial), background-color var(--motion-effects);
  animation: fade-in-up var(--motion-spatial) both;
}
.card:hover {
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}
/* Карточки появляются по очереди. */
.card:nth-child(2) { animation-delay: 30ms; }
.card:nth-child(3) { animation-delay: 60ms; }
.card:nth-child(4) { animation-delay: 90ms; }
.card:nth-child(5) { animation-delay: 120ms; }
.card:nth-child(6) { animation-delay: 150ms; }
.card:nth-child(7) { animation-delay: 180ms; }
.card:nth-child(8) { animation-delay: 210ms; }
.card:nth-child(n + 9) { animation-delay: 240ms; }

.card-link {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 16px 0 16px 16px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  color: inherit;
  text-decoration: none;
}
.card-title {
  font: var(--title-medium);
  color: var(--on-surface);
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--on-surface-variant);
  font: var(--body-medium);
}
.card .icon-btn {
  margin-right: 8px;
}
.card.archived {
  background: var(--surface-container-lowest);
  box-shadow: none;
  border: 1px solid var(--outline-variant);
}
.card.archived .card-title {
  color: var(--on-surface-variant);
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font: var(--label-medium);
}
.chip-on {
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.chip-off {
  border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
}
/* Своя вакансия — добавлена на сайте, на hh.ru её нет. */
.chip-own {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.chip-region {
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  font: var(--label-medium);
}
.card-count {
  margin-right: 4px;
}
.card-chevron {
  display: flex;
  margin-right: 16px;
  color: var(--on-surface-variant);
  transition: transform var(--motion-spatial);
}
.card:hover .card-chevron {
  transform: translateX(3px);
}

/* ---------- Объединённая вакансия ---------- */

.back {
  margin: 8px 0 -8px -12px;
}
.back .icon {
  margin-left: 0;
}
.head-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.head-chips:empty {
  display: none;
}
.head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  animation: fade-in-up var(--motion-spatial) both;
}
.panel:nth-of-type(2) { animation-delay: 50ms; }
.panel:nth-of-type(3) { animation-delay: 100ms; }
.panel:nth-of-type(4) { animation-delay: 150ms; }
.panel h2 {
  font: var(--title-medium);
}
.panel-hint,
.muted {
  color: var(--on-surface-variant);
  font: var(--body-medium);
}
.pre {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Вакансии группы: строка на регион. */
.rows {
  display: grid;
  margin: 0 -8px;
  padding: 0;
  list-style: none;
}
.row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  transition: background-color var(--motion-effects);
}
/* Разделитель между строками — прямой, с отступами, не повторяет скругление строки. */
.row + .row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  border-top: 1px solid var(--outline-variant);
}
.row:hover {
  background: color-mix(in srgb, var(--on-surface) 4%, transparent);
}
.row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 200px;
}
.row-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--on-surface);
  font: var(--title-small);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.row-title:hover {
  color: var(--primary);
  text-decoration: underline;
}
.row-title .icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
}
.row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--on-surface-variant);
  font: var(--body-medium);
}
.row.archived .row-title {
  color: var(--on-surface-variant);
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
}
.row form {
  margin: 0;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin: 0;
  font: var(--body-medium);
}
.facts dt {
  color: var(--on-surface-variant);
}
.facts dd {
  margin: 0;
  min-width: 0;
}

/* Поле ввода Material (outlined) с подписью над ним. */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
}
.field {
  display: grid;
  gap: 4px;
  flex: 1 1 260px;
  min-width: 0;
}
.field-label {
  color: var(--on-surface-variant);
  font: var(--body-small);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-xs);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  font: var(--body-large);
  transition: border-color var(--motion-fast-effects), box-shadow var(--motion-fast-effects);
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--on-surface);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.inline-form .btn {
  height: 48px;
}
/* Многострочное поле растёт по тексту (где браузер умеет field-sizing), но не выше экрана. */
.field textarea {
  height: auto;
  min-height: 120px;
  max-height: 70vh;
  padding: 12px 14px;
  resize: vertical;
  field-sizing: content;
}
.field textarea::placeholder,
.field input::placeholder {
  color: var(--on-surface-variant);
  opacity: 0.7;
}
/* Форма в столбик: поля одно под другим, кнопки внизу. */
.stack-form {
  display: grid;
  gap: 12px;
  margin: 0;
}
.stack-form .field {
  flex: none;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Выбор региона из подсказок hh.ru. */
.choices {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font: var(--body-large);
  cursor: pointer;
}
.choice:hover {
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
}
.choice input {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
}

/* Снекбар: сообщение о сделанном действии, появляется снизу и уходит сам. */
@keyframes snackbar {
  0% { opacity: 0; transform: translate(-50%, 16px); }
  6%, 90% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); visibility: hidden; }
}
.snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: calc(var(--z-bar) + 1);
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  max-width: calc(100vw - 32px);
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--radius-xs);
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  font: var(--body-medium);
  box-shadow: var(--elevation-3);
  animation: snackbar 6s var(--ease-effects) both;
}
.snackbar:hover,
.snackbar:focus-within {
  animation-play-state: paused;
}
.snackbar-action {
  flex: none;
  margin: -6px -8px -6px auto;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--inverse-primary);
  font: var(--label-large);
  text-decoration: none;
  cursor: pointer;
}
.snackbar-action:hover {
  background: color-mix(in srgb, var(--inverse-primary) 10%, transparent);
}
.snackbar-action:focus-visible {
  outline-color: var(--inverse-primary);
}
/* Ошибка действия без перезагрузки: полоса цвета ошибки слева. */
.snackbar-error {
  box-shadow: inset 4px 0 0 var(--error), var(--elevation-3);
}
/* Пояснение у кнопок формы: «Подтягиваем текст вакансии с hh.ru…» с кольцом загрузки. */
.form-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--on-surface-variant);
  font: var(--body-small);
}
.form-status::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
.form-status[hidden] {
  display: none;
}

/* ---------- Находки ежедневного поиска ---------- */

.chip-new {
  background: var(--tertiary);
  color: var(--on-tertiary);
}
.finds-section {
  margin-bottom: 24px;
  animation: fade-in-up var(--motion-spatial) both;
}
.finds-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.finds-head h2 {
  font: var(--title-large);
}
.finds-head .sub {
  margin-top: 2px;
  color: var(--on-surface-variant);
  font: var(--body-medium);
}
/* Фильтр-чипы Material: «Актуальные» / «Скрытые». */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-chips:empty {
  display: none;
}
.filter-chip {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  color: var(--on-surface-variant);
  font: var(--label-large);
  text-decoration: none;
  transition: background-color var(--motion-effects), border-color var(--motion-effects);
}
.filter-chip:hover {
  background: color-mix(in srgb, var(--on-surface-variant) 8%, transparent);
}
.filter-chip.selected {
  padding-left: 8px;
  border-color: transparent;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.filter-chip .icon {
  width: 18px;
  height: 18px;
}
.finds {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.find {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  box-shadow: var(--elevation-1);
  transition: box-shadow var(--motion-effects), transform var(--motion-spatial);
  animation: fade-in-up var(--motion-spatial) both;
}
.find:hover {
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}
.find:nth-child(2) { animation-delay: 40ms; }
.find:nth-child(3) { animation-delay: 80ms; }
.find:nth-child(4) { animation-delay: 120ms; }
.find:nth-child(5) { animation-delay: 160ms; }
.find:nth-child(6) { animation-delay: 200ms; }
.find:nth-child(n + 7) { animation-delay: 240ms; }
/* Длинный список находок (хранятся бессрочно): карточки за пределами экрана не отрисовываются. */
.finds > .find {
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
}
/* Карточка, обновлённая или возвращённая без перезагрузки (app.js), не «влетает» заново. */
.find.no-enter {
  animation: none;
}
.find.leaving {
  overflow: hidden;
  pointer-events: none;
}
.find:focus {
  outline: none;
}
.find:focus-visible {
  outline: 3px solid var(--secondary);
}
/* Новая находка — тонкая полоса цвета чипа «Новая» слева. */
.find.is-new {
  box-shadow: inset 4px 0 0 var(--tertiary), var(--elevation-1);
}
.find.is-new:hover {
  box-shadow: inset 4px 0 0 var(--tertiary), var(--elevation-2);
}
.find-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* Оценка ИИ: крупная цифра в скруглённом квадрате, цвет — по уровню. */
.score {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex: none;
  min-width: 52px;
  height: 40px;
  padding: 8px 8px 0;
  border-radius: var(--radius-md);
  font: 500 1.375rem/1.5rem var(--font);
}
.score small {
  font: var(--label-medium);
  opacity: 0.75;
}
.score-hi {
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.score-mid {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.score-lo {
  background: var(--surface-container-highest);
  color: var(--on-surface-variant);
}
.find-head {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.find-title {
  font: var(--title-medium);
  overflow-wrap: anywhere;
}
.find-meta,
.find-exp {
  color: var(--on-surface-variant);
  font: var(--body-medium);
}
.find-exp {
  overflow-wrap: anywhere;
}
.find-reason {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-container);
  font: var(--body-medium);
}
.find-reason b {
  font-weight: 500;
}
.find-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.find-actions form {
  margin: 0;
}
.find-actions .btn-tonal {
  margin-right: 4px;
}
.find-date {
  margin-left: auto;
  color: var(--on-surface-variant);
  font: var(--body-small);
}
/* Комментарий рекрутера к находке для Claude: показан под причиной оценки, правится в раскрывающемся блоке. */
.find-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  font: var(--body-medium);
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.find-note .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.find-note b {
  font-weight: 500;
}
.find-comment summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  color: var(--primary);
  font: var(--label-large);
  cursor: pointer;
  list-style: none;
}
.find-comment summary::-webkit-details-marker {
  display: none;
}
.find-comment summary:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.find-comment summary .icon {
  width: 18px;
  height: 18px;
}
.find-comment[open] summary {
  margin-bottom: 8px;
}
.find-comment[open] form {
  animation: fade-in-up var(--motion-spatial) both;
}
.finds-empty[hidden] {
  display: none;
}
.finds-head h2:focus {
  outline: none;
}
.finds-empty {
  padding: 20px;
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-lg);
  color: var(--on-surface-variant);
  font: var(--body-medium);
}

/* ---------- Подключить Claude ---------- */

/* Подсказка на главной, пока Claude не подключён. */
.promo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px 16px 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  font: var(--body-medium);
  text-decoration: none;
  animation: fade-in-up var(--motion-spatial) both;
  transition: box-shadow var(--motion-effects), transform var(--motion-spatial);
}
a.promo:hover {
  box-shadow: var(--elevation-1);
  transform: translateY(-1px);
}
.promo span {
  display: grid;
  gap: 2px;
  flex: 1;
}
.promo b {
  font: var(--title-medium);
}
.promo .icon:last-child {
  transition: transform var(--motion-spatial);
}
a.promo:hover .icon:last-child {
  transform: translateX(3px);
}

/* Адрес коннектора с кнопкой «Скопировать». */
.copy-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.copy-text {
  flex: 1 1 240px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-container-highest);
  color: var(--on-surface);
  font: 500 1rem/1.5rem ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
  user-select: all;
}
.copied .icon {
  animation: fade-in-up var(--motion-spatial) both;
}
code {
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--surface-container-high);
  font: 0.875em/1.4 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.copy-text code,
code.copy-text {
  padding: 12px 16px;
}

/* Промпт задачи по расписанию с кнопкой «Скопировать». */
.prompt-box {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.prompt {
  width: 100%;
  margin: 0;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--surface-container-highest);
  color: var(--on-surface);
  font: 0.875rem/1.5 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Пошаговая инструкция: номер в круге, заголовок шага и пояснение. */
.howto {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.howto li {
  position: relative;
  display: grid;
  gap: 2px;
  padding-left: 44px;
  color: var(--on-surface-variant);
  font: var(--body-medium);
  counter-increment: step;
}
.howto li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  font: var(--label-large);
}
.howto b {
  color: var(--on-surface);
  font: var(--title-small);
}

/* Экран согласия OAuth. */
.consent {
  display: grid;
  gap: 16px;
  max-width: 560px;
  margin: 24px auto 0;
  padding: 32px 28px 24px;
  border-radius: var(--radius-xl);
  background: var(--surface-container-low);
  box-shadow: var(--elevation-1);
  animation: fade-in-up var(--motion-spatial) both;
}
.consent-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.consent-icon .icon {
  width: 32px;
  height: 32px;
}
.consent h1 {
  font: var(--headline-small);
}
.consent-sub,
.consent-who {
  color: var(--on-surface-variant);
  font: var(--body-medium);
}
.consent-sub b {
  color: var(--on-surface);
  font-weight: 500;
}
.consent-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface-container);
  list-style: none;
  font: var(--body-medium);
}
.consent-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: fade-in-up var(--motion-spatial) both;
}
.consent-list li:nth-child(1) { animation-delay: 60ms; }
.consent-list li:nth-child(2) { animation-delay: 120ms; }
.consent-list li:nth-child(3) { animation-delay: 180ms; }
.consent-list .icon {
  width: 20px;
  height: 20px;
  margin-top: 0;
  color: var(--primary);
}
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px 0 0;
}

/* Критерии на странице группы. */
.crit {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}
.crit dt {
  color: var(--on-surface-variant);
}
.crit dd {
  margin: 0;
  min-width: 0;
}
.crit-list {
  margin: 0;
  padding-left: 18px;
}
.raw {
  margin-top: 8px;
}
.raw summary {
  width: max-content;
  color: var(--primary);
  font: var(--label-large);
  cursor: pointer;
}
.raw pre {
  max-height: 320px;
  margin: 8px 0 0;
  padding: 12px;
  overflow: auto;
  border-radius: var(--radius-sm);
  background: var(--surface-container-highest);
  font: 0.8125rem/1.4 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Страница ошибки ---------- */

.error-page {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-top: 32px;
  animation: fade-in-up var(--motion-spatial) both;
}
.error-page h1 {
  font: var(--headline-small);
}
.error-page p {
  color: var(--on-surface-variant);
}

@media (max-width: 600px) {
  .hero {
    padding: 28px 20px;
    border-radius: var(--radius-lg);
  }
  .hero h1 {
    font: var(--headline-medium);
  }
  .who-name,
  .nav-label {
    display: none;
  }
  .consent {
    margin-top: 8px;
    padding: 24px 20px 16px;
    border-radius: var(--radius-lg);
  }
  .crit {
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: 4px;
    padding-left: 12px;
    border-left: 2px solid var(--outline-variant);
  }
  .crit dd + dt {
    margin-top: 6px;
  }
  .panel {
    padding: 16px;
  }
  .facts {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .facts dd + dt {
    margin-top: 8px;
  }
}