/* Доповнення до стилів прототипу.

   Окремий файл, а не правки в app.css: там лежить точна копія прототипу,
   і її корисно тримати незайманою, щоб було видно, де ми свідомо розійшлись.

   Причина існування файлу: у прототипі всі дії — це <button> з JS-обробником,
   а в нас справжня навігація посиланнями. Класи кнопок на <a> лягають майже
   повністю, крім браузерних типових для посилань. */

a.btn,
a.gbtn,
a.nav-item,
a.row-link,
.demo-note a,
.auth-box a {
  text-decoration: none;
}

a.btn,
a.gbtn,
a.nav-item,
a.row-link {
  color: inherit;
}

a.btn-primary {
  color: #fff;
}

.demo-note a,
.auth-box a:not(.gbtn) {
  color: var(--brand);
  font-weight: 500;
  border-bottom: 1px solid rgba(30, 46, 82, 0.25);
}

.demo-note a:hover,
.auth-box a:not(.gbtn):hover {
  border-bottom-color: var(--brand);
}

/* Ліва панель входу: логотип притиснутий до кута, решта — по центру. */
.auth-art {
  position: relative;
  justify-content: center;
  gap: 40px;
}

.auth-art .brand {
  position: absolute;
  top: 40px;
  left: 44px;
  padding: 0;
}


/* Посилання всередині тексту.

   Раніше це закривалось точково на сторінці входу, і скрізь інде лишались
   браузерні типові: фіолетовий колір відвіданого й підкреслення. Тут одне
   правило на весь контент, крім елементів, які виглядають як кнопки. */

.page a:not(.btn):not(.nav-item):not(.row-link):not(.name),
.hint a,
.banner a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 46, 82, 0.25);
}

.page a:not(.btn):not(.nav-item):not(.row-link):not(.name):hover,
.hint a:hover,
.banner a:hover {
  border-bottom-color: var(--brand);
}

a.name {
  color: inherit;
  text-decoration: none;
}

a.name:hover {
  color: var(--brand);
}

/* Довгий текст у списках, що випадають.

   Без цього назва вакансії або пошта кандидата лізе під стрілку.
   Повне значення лишається доступним як підказка при наведенні (title). */

select.input {
  text-overflow: ellipsis;
  padding-right: 30px;
}

select.input option {
  /* Список, що розкривається, не обрізаємо: там місця більше,
     і людині потрібно бачити різницю між схожими назвами. */
  white-space: normal;
}


/* Логотип веде на головну. Типові стилі посилання тут не потрібні. */

a.brand {
  text-decoration: none;
  color: inherit;
}

a.brand:hover b {
  color: var(--brand);
}


/* Крихти в шапці.

   У .topbar стоїть gap:12px на всіх дітей, тому слеш-роздільник отримував
   по 12 пікселів з обох боків, а кнопка «назад» додавала власні відступи —
   разом виходило розсипано. Тут крихти живуть окремою групою зі своїм
   щільним проміжком (B18). */

.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.crumbs .btn-ghost {
  padding-left: 6px;
  padding-right: 6px;
}

.crumbs .crumb {
  color: var(--line2);
}

.crumbs h1 {
  min-width: 0;
}


/* Порожній стан селекта.

   Підказка «Оберіть…» показується приглушено, як placeholder у полі вводу:
   вона каже, що вибирати, і водночас видно, що вибір ще не зроблений. */

select.input:has(option[value=""]:checked) {
  color: #A6ADB6;
}

select.input option {
  color: var(--ink);
}


/* Блок вердикту у звіті. */

/* B22. У прототипі абзаци обмежені 62 символами — це добре для суцільного
   тексту на всю сторінку, але тут колонка й так вузька, і обмеження
   лишало порожню половину. */

.verdict-main p {
  max-width: none;
}

/* Чип автентичності поруч зі значком вердикту має ту саму вагу: це два
   висновки одного рівня, а не висновок і примітка до нього. */

.vhead .chip {
  height: 34px;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
}

.vhead .chip .dot {
  display: none;
}

/* Обмежена оцінка. Жовтий тут означає «не є вимірюванням досвіду»,
   а не «посередній результат» — тому поруч завжди стоїть пояснення. */

.score-num.capped {
  color: var(--warn);
}

.meter.capped i {
  background: var(--warn);
}


/* Чип рішення рекрутера.

   Мусить відрізнятись від чипа вердикту моделі з першого погляду: це два
   різні джерела висновку, і плутати їх не можна. Галочка замість крапки,
   суцільна рамка кольору висновку. */

.chip.decided {
  gap: 5px;
  border-style: solid;
  font-weight: 600;
}

.chip.decided svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}


/* Вихід усередині картки акаунта. */

.who .logout {
  margin-left: auto;
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
}

.who .logout:hover {
  color: var(--bad);
  background: rgba(0, 0, 0, .04);
}


/* --- Косметика, 27.07.2026 ------------------------------------------- */

/* Іконка бренду тепер з власним прозорим фоном, тож підкладка під нею
   зайва: на світлих поверхнях вона давала сірий квадрат, на темній
   панелі входу — світлий. */
.mark,
.auth-art .mark {
  background: transparent;
}

/* Ліва панель входу: вміст по центру.
   Логотип лишається в куті — він абсолютно спозиційований вище. */
.auth-art {
  align-items: center;
  text-align: center;
}

.auth-art .thesis,
.auth-art .sub {
  margin-left: auto;
  margin-right: auto;
}

/* Усередині картки-прикладу рядки компетенцій читаються лише зліва. */
.auth-art .preview {
  text-align: left;
  width: 100%;
}

/* Privacy Policy в куті сторінки входу, без рамки.
   Раніше посилання жило в блоці .demo-note — тій самій пунктирній
   коробці, що й нотатка режиму розробки, і виглядало як друга дія
   поруч із входом. */
.auth-form {
  position: relative;
}

.auth-legal {
  position: absolute;
  right: 28px;
  bottom: 22px;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.auth-legal:hover {
  color: var(--ink2);
  border-bottom-color: var(--line2);
}

/* Вступний текст форми кандидата на всю ширину контейнера.
   У app.css стоїть max-width:60ch — класична межа читабельності,
   але при ширині колонки 720px вона лишала праворуч порожнечу. */
.cand-intro p {
  max-width: none;
}


/* --- Банер лімітів безкоштовного тарифу (C12.8) ----------------------- */

/* Жовтий, а не червоний: це межа тарифу, а не поломка й не помилка
   користувача. Показується постійно, доки межа не знята, тому не має
   кричати — з червоною смугою на кожному відкритті списку працювати
   неможливо. */
.limit-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  margin: 0 0 18px;
  border: 1px solid #f2d98c;
  border-left: 3px solid #e0a800;
  border-radius: 10px;
  background: #fdf8e8;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b5313;
}

.limit-note .ic {
  flex: 0 0 auto;
  display: flex;
  padding-top: 1px;
  color: #b8860b;
}

.limit-note b {
  color: #4a3808;
  font-weight: 600;
}

.limit-note .cta {
  margin-top: 4px;
}

.limit-note a {
  color: #6b5313;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.limit-note a:hover {
  color: #4a3808;
}