/* Кар'єрний компас 2.0 — оформлення за дизайн-системою «Атмосферна Школа».
   Мобайл-first, але на десктопі використовує ширину: сітка карток у дві
   колонки, показники профілю двома блоками поруч. Текстові абзаци при цьому
   лишаються вузькими — довгий рядок читати важко. */

:root {
  --atmo-bg: #E8EEFF;
  --atmo-bg-gradient: linear-gradient(160deg, #EAF2FF 0%, #DCE9FF 45%, #E7E2FF 100%);
  --atmo-surface: #FFFFFF;
  --atmo-surface-hover: #F5F7FF;
  /* ── Основний колір дії — синій ─────────────────────────────────────
     Він узятий із «Особистостей АтмоСил»: там синьою є кнопка «Почати
     тест», і людина, яка приходить із того продукту, впізнає її одразу.
     Раніше тут був зелений — і виходило, що два тести однієї школи
     виглядають як два різні сервіси.

     Зелений нікуди не подівся, але отримав одну чітку роль: усе добре,
     що вже є (гроші, підтверджений напрям, пройдений крок). Синій —
     те, що можна зробити. Коли кожен колір означає одне, екран не
     доводиться розшифровувати. */
  --atmo-primary: #2563EB;         /* дії: кнопки, посилання, активне */
  --atmo-primary-dark: #1D4ED8;    /* наведення на кнопку */
  --atmo-primary-soft: #60A5FA;    /* заливки без тексту: прогрес, бари */
  --atmo-primary-light: #EFF4FF;   /* фон активного табу й підсвічування */

  /* Зелений — «це вже добре»: підтверджений напрям, зарплата, готовність. */
  /* Зелених у продукті рівно один — той, яким сказано «це вже твоє».
     Тут був другий (#15803D) зі своїм значенням «це добре»: на одній
     сторінці «Ти вже приносиш 4 з 7» і «Твоя сила № 1» світились
     двома різними зеленими, тобто код розпадався саме там, де мав
     упізнаватись. Оцінки й факти перейшли на нейтральне чорнило. */
  --atmo-success: var(--entry-fast-text);
  --atmo-success-light: #E9F7EF;
  --atmo-accent-yellow: #FAEC5A;
  --atmo-accent-green: #D4F5C4;
  --atmo-text: #1E293B;
  /* Тихе чорнило: підписи, примітки, «← назад». Було #64748B — на білій
     картці це 4,76:1, але на фоні сторінки (#E8EEFF) падало до 4,10:1,
     і разом із ним падав кожен підпис, який лежить не на картці: «назад»,
     ролі на картках професій, теги умов, примітки цінностей. Один токен —
     одинадцять місць одразу. Тепер 5,50 на картці й 4,74 на фоні. */
  --atmo-text-secondary: #5B6A80;
  /* НЕ для тексту. На тексті цей сірий давав 2,56:1 — нижче за мінімум навіть
     для графіки, тож усі підписи переведено на --atmo-text-secondary. Тут він
     лишається для рамок, стрілок і плейсхолдерів, де контраст не критичний.
     Двох рівнів сірого для тексту в цій палітрі немає: другий нечитабельний. */
  --atmo-text-muted: #94A3B8;
  --atmo-border: #E2E8F0;

  /* ── МОВА ВАЖЛИВОСТІ: п'ять ролей ────────────────────────────────────────
     Кожен елемент екрана несе рівно одну роль, у ролі сталий код, незмінний
     від першого питання до фіналу. Людина вивчає мову на легких екранах
     тесту — і в результаті вже не витрачає ресурс на розшифровку.

     Нових відтінків тут нема: усі кольори вже були в продукті. Змінилось
     інше — кожен звужений до ОДНОГО значення. Раніше синій означав і
     «натисни», і «це важливо», і «ось число» (шість різних значень на
     один код), а зелений стояв і на активі людини, і на властивості
     професії. Полісемія і є те, що змушувало розшифровувати.

     ГОЛОВНЕ  кольору не має взагалі — тільки розмір, позиція і повітря.
              Якби воно мало колір, кольорове було б на кожному екрані
              і перестало б щось означати.
     ОПОРА    знімає тривогу ПЕРЕД проханням. Наша територія — тому
              блакитна, з боку кнопок.
     ДІЯ      синій. І більше ніде.
     ВЖЕ ТВОЄ актив ЛЮДИНИ. Її територія — тому зелена. Властивість
              професії («можна починати вже зараз») сюди НЕ належить.
     ОБЕРЕЖНІСТЬ реальний ризик: роки навчання, гроші, незворотність.
              Бурштин плюс іконка — культурний код, а не вивчений: у тесті
              ця роль не трапляється жодного разу, і в результаті людина
              бачить її вперше. Тому вона мусить читатись без навчання. */
  --role-support-bg: var(--atmo-primary-light);
  --role-support-ink: var(--atmo-text);
  --role-yours-bg: var(--atmo-accent-green);
  --role-yours-ink: var(--entry-fast-text);
  --role-care-bg: var(--warn-bg);
  --role-care-ink: var(--warn-text);
  /* Нейтральний чип: факт про об'єкт, який НЕ є ні активом людини, ні
     ризиком. Сюди ж іде ваучер — право на нього мають не всі, а умовне
     не можна фарбувати як безумовне. Краще сіре, ніж фальшиво-зелене. */
  /* «Перші гроші» — власна пара кольорів, а не чужий токен.
     Спершу тут стояв var(--entry-fast-text) як фон: у світлій темі це
     темно-зелений і білий текст на ньому читався, а в темній той самий
     токен світлішає — і білим по світло-зеленому вийшов контраст 1,56.
     Смуга має бути насиченою в ОБОХ темах, тому кольори свої. */
  --fp-bg: #166534;
  --fp-ink: #FFFFFF;
  --role-fact-bg: #EDF1F7;
  /* Не --atmo-text-secondary: на світло-сірому чипі він давав 4,2:1, тобто
     трохи нижче за мінімум для тексту такого кегля. Тон із тієї ж родини,
     на пів кроку темніший. */
  --role-fact-ink: #4E5A70;
  /* Чорнило, що лягає на синю заливку (кнопки, активний пункт навігації).
     Окремий токен потрібен тому, що в темній темі сама заливка світлішає. */
  /* ── Типографічні рівні ─────────────────────────────────────────────────
     Той самий принцип, що з кольором: не градація, а ролі. Кожен рівень —
     один кегль і одна вага, незмінні на всіх екранах. Людина вчить систему
     на легких екранах тесту і зчитує її в результаті, не думаючи.

     Замір до зведення: 45 різних сходинок «кегль+вага» на 18 екранах, і
     шість різних кеглів у ролі «найбільше на екрані». Тег h1 розтягнувся
     від 15 до 40px, тобто перестав будь-що означати. Два найбільші об'єкти
     результату були числами, а не сенсом — рівно те саме, що ми вже
     знайшли з кольором.

     ГОЛОВНЕ    те, заради чого екран існує. Одне на екран.
     РОЗДІЛ     назва зони чи блока всередині екрана.
     ОБ'ЄКТ     назва речі у списку: професія, двері, крок, напрям.
     ЗМІСТ      текст, який читають. Вага 600 означає «це можна натиснути».
     ЯРЛИК      рубрика великими літерами. Ніколи не конкурує з головним.
     ТЛО        примітки й довідка. Вага 600 — табличний факт-число. */
  --t-main: 26px;      --t-main-w: 700;
  --t-section: 20px;   --t-section-w: 700;
  --t-object: 18px;    --t-object-w: 700;
  --t-body: 17px;      --t-body-w: 400;   --t-act-w: 600;
  --t-label: 13px;     --t-label-w: 700;
  --t-quiet: 14.5px;   --t-quiet-w: 400;  --t-fact-w: 600;
  /* Виняток, а не рівень: дві точки на весь продукт, де на екрані нема
     нічого, крім самого заголовка. */
  --t-cover: 38px;
  --on-primary: #fff;
  /* Обведення тихої кнопки НА залитому тлі: те саме чорнило, приглушене.
     Літерал rgba(255,255,255,.4) працював тільки у світлій темі. */
  --on-primary-soft: rgba(255, 255, 255, .4);
  /* Хрестик відмови: рівно 3:1 до білого — нижня межа для елементів
     керування. Тихіше вже означало б «натисни наосліп». */
  /* Хрестик «не моє» лишається тихим — дія зворотна й наслідків не має,
     кричати їй нема про що. Але 3,00:1 — це вже не тихо, а ледь видно. */
  --dismiss-ink: #6A7789;
  /* Фінал — єдиний акорд у продукті, і тон у нього власний.
     Зелений тут означав би «вже твоє», а фінал говорить інше: «ти дійшов».
     Теплий глиняний не трапляється більше ніде, тому його нема з чим
     сплутати — він не код стану, він кінець дороги. Від бурштину
     обережності відрізняється тим, що рожевіший і без жодного ⚠. */
  --fin-bg-1: #FBEDE9;
  --fin-bg-2: #FDF5F2;
  --fin-line: #F0D3C8;
  --fin-accent: #9C5744;

  /* Рівні показників. Зеленого й нейтрального в палітрі системи вистачає,
     а от кольору «низько» в ній немає — беремо приглушений теплий тон
     тієї ж пастельної родини, без жодного натяку на сигнальний червоний. */
  --level-high-text: #35682C;
  --level-low-text: #9A5B4C;

  /* Закріплені призначення. Кожен із цих кольорів має рівно одну роль
     і ніде більше в інтерфейсі не з'являється. */
  --match-high: #16A34A;          /* цифра відсотка від 85 */
  --entry-edu-bg: #EDE4FF;        /* бейдж «Вища освіта» */
  --entry-edu-text: #6B21A8;
  --entry-fast-bg: var(--atmo-accent-green);   /* бейдж «Курси» */
  --entry-fast-text: #166534;
  /* «Жовта» лінія: попередження, «варто знати», «можна на себе».
     Раніше ці кольори стояли літералами прямо в правилах і не мали пари
     для темної теми — заголовок «Варто знати» давав контраст 2.3:1 і
     фактично зникав. Тепер це токени, і темний блок їх переозначує. */
  --warn-text: #92400E;           /* текст на янтарному фоні або на сторінці */
  --warn-bg: rgba(251, 191, 36, .18);
  --own-text: #7A5B00;            /* «можна робити на себе» */
  /* Шкала згоди в тесті: кружки і підписи під ними. */
  /* Шкала згоди: нейтральне чорнило, градацію несуть розмір і знак.
     Середній кружок трохи світліший — він і за розміром найменший. */
  --scale-ink: #475569;
  /* Не світліше за це: середній кружок і так найменший, і разом із блідим
     контуром він починав читатися як вимкнений, а не як «складно сказати». */
  --scale-ink-soft: #7A8699;
  --own-bg: rgba(250, 236, 90, .3);
  --bar-you: var(--atmo-primary-soft);  /* бар «у тебе» */
  --bar-role: #CBD5E1;             /* бар «у професії» і другорядні бари */
  --bar-empty: #F1F5F9;            /* незаповнена частина будь-якого бару */
  /* Рівень показника більше не кодується кольором «зелений-синій-червоний»:
     синій тепер означає дію, і смужка в ньому читалась би як кнопка.
     Замість трьох кольорів — один тон різної насиченості, а сам рівень
     видно з довжини смужки й числа поруч. Виняток лишається один:
     помітно слабка вісь, її варто бачити відразу. */
  --bar-strong: #334155;
  --bar-normal: #94A3B8;
  --bar-weak: #C2410C;


  /* ── Шість інтересів — шість кольорів ───────────────────────────────
     Ті самі, що на «профілі інтересів» у «Особистостях АтмоСил»:
     руки помаранчеві, аналіз синій, творчість фіолетова, люди зелені,
     вплив малиновий, порядок бірюзовий.

     Це не прикраса. Коли вісь має свій колір, людина впізнає її скрізь
     однаково: у шестикутнику профілю, у смужці з балом і в тегу на
     картці професії — і не мусить щоразу читати назву. Усі шість
     проходять AA на білому (від 5,0 до 6,3), тому ними можна писати,
     а не тільки заливати. */
  --axis-R: #C2410C;   /* Реалістичний — руки й техніка */
  --axis-I: #2563EB;   /* Дослідницький — аналіз */
  --axis-A: #7C3AED;   /* Художній — творчість */
  --axis-S: #4D7C0F;   /* Соціальний — люди (оливковий, щоб не збігався
                          з «вже твоє»: чипи осей стоять поруч із ним) */
  --axis-E: #BE123C;   /* Підприємницький — вплив */
  --axis-C: #0F766E;   /* Традиційний — порядок */

  --axis-R-bg: #FFF1E8;
  --axis-I-bg: #EFF4FF;
  --axis-A-bg: #F4EEFF;
  --axis-S-bg: #E9F7EF;
  --axis-E-bg: #FFEDF1;
  --axis-C-bg: #E6F5F3;

  /* Текст читає аудиторія 35-60 років, тому основний шрифт — Onest:
     високі рядкові літери й широкі просвіти, добре тримається на 17-18px.
     Заголовки лишаються на Manrope — він характерніший і працює на великих
     розмірах. Обидва лежать у public2/fonts, інтернет не потрібен. */
  --atmo-font-primary: 'Onest', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --atmo-font-display: 'Manrope', var(--atmo-font-primary);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .03);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .05), 0 8px 20px rgba(0, 0, 0, .05);
  /* Радіусів було десять (2, 4, 6, 10, 12, 16, 18, 20, 28 і коло) —
     тобто форма нічого не кодувала, бо не повторювалась. Лишається
     чотири, за призначенням: поверхня, орган керування, чип, коло. */
  --radius-card: 16px;
  --radius-button: 12px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --radius-input: 10px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--atmo-bg);
  background-image: var(--atmo-bg-gradient);
  /* fixed-attachment прибрано 29.08: на телефонах він дає смикання при
     скролі (а iOS його взагалі ігнорує), і композитор інколи малює лише
     фон без вмісту. Градієнт просто тягнеться по висоті сторінки. */
  color: var(--atmo-text);
  font-family: var(--atmo-font-primary);
  line-height: 1.65;
}

/* Розмір основного тексту стоїть на BODY, а не на HTML — і це важливо.
   Якщо задати його кореню, всі інші rem почнуть рахуватись від нього:
   1.5rem перетворилось би на 25.5px замість 24px, і сторінка тихо
   виросла б на 6% (спіймано 04.09.2026 одразу після переходу на rem).
   Корінь лишається таким, як його налаштувала людина у себе в браузері
   чи телефоні — саме від нього ми й хочемо рахувати. */
body { font-size: 1.0625rem; }

/* ── Кільце фокуса (04.09.2026) ────────────────────────────────────────
   Продукт мав рівно одне правило :focus-visible на 150 кнопок — усе
   інше покладалось на браузерне кільце. Воно є, але кожен браузер малює
   його по-своєму, і на синій кнопці на синьому тлі його майже не видно.
   Для людини, яка йде клавіатурою, це різниця між «я бачу, де я» і
   «я загубився».

   Кільце двошарове навмисно: темна лінія плюс світлий ореол навколо неї
   (або навпаки в темній темі). Так воно лишається помітним на будь-якому
   тлі — і на білій картці, і на синій кнопці, і на фотографії професії.

   :focus-visible, а не :focus — миша кільця не вмикає, тільки клавіатура.
   Тому для того, хто клікає, нічого не змінюється. */
:root { --focus-ring: #0B1220; --focus-halo: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root { --focus-ring: #FFFFFF; --focus-halo: #0B1220; }
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
  border-radius: 6px;
}
/* Обгортка екрана, на яку ми переводимо фокус при зміні екрана, кільця
   не отримує: вона не інтерактивна, і рамка навколо всього екрана
   читалась би як помилка. Фокус там потрібен лише для того, щоб Tab пішов
   далі з правильного місця, а не з початку документа. */
#screen:focus, #screen:focus-visible,
#screen > .fade:focus, #screen > .fade:focus-visible {
  outline: none; box-shadow: none;
}

/* ── прогрес ─────────────────────────────────────────────────────────── */
/* Прогрес більше не приклеєний до верху вікна: він стоїть у колонці
   безпосередньо над питанням, тому читається як частина цього екрана. */
#progress {
  max-width: 620px; margin: 20px auto -4px;
  padding: 0 20px; width: 100%;
}
#progress.hidden { display: none; }
.pbar { display: flex; align-items: center; gap: 14px; }
/* Прогрес — ТЛО-ФАКТ: повідомляє, а не просить. Синій знято, бо він стояв
   угорі кожного зі 110 екранів на елементі, який нічого не пропонує
   натиснути, — і саме там людина найчастіше вчила, що синій «просто важливо». */

/* ── екран ───────────────────────────────────────────────────────────── */
main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) { main { padding: 56px 32px 80px; } }

/* Екрани самого тесту лишаються вузькими: одне питання по центру
   на весь монітор читалось би гірше, ніж у колонці. */
main.narrow { max-width: 620px; }

/* Довгий текст обмежуємо навіть у широкому layout */
.prose { max-width: 62ch; font-size: 1.0625rem; line-height: 1.7; }

.fade { animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* h1 був розтягнутий від 15 до 40px по різних екранах — тобто тег, який
   мав би означати «головне», не означав нічого. Тепер він і є рівень
   ГОЛОВНЕ, один на всіх екранах. Виняток лишається рівно один — перший
   екран продукту, де на сторінці нема нічого, крім заголовка. */
h1 {
  font-family: var(--atmo-font-display);
  font-size: var(--t-main); line-height: 1.25; margin: 0 0 14px;
  font-weight: var(--t-main-w); letter-spacing: -.02em;
}
h2 { font-family: var(--atmo-font-display); font-size: 1.5rem; line-height: 1.3; margin: 34px 0 14px; font-weight: 700; }
h3 { font-family: var(--atmo-font-display); font-size: 1.1875rem; margin: 0 0 12px; font-weight: 600; color: var(--atmo-text); }
p  { margin: 0 0 16px; }
.muted { color: var(--atmo-text-secondary); }
.small { font-size: 1rem; }

/* Кегль головного не залежить від ширини: система має бути та сама
   на телефоні й на комп'ютері, інакше вона не система. */

.panel {
  background: var(--atmo-surface);
  border: 1px solid #DBE6FF;                /* легкий блакитний контур */
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
  margin-bottom: 20px;
}
/* Екран однієї професії тримаємо щільніше: там багато коротких блоків,
   і зайве повітря розтягує його на кілька екранів прокрутки. */
.detail .panel { padding: 18px 20px; margin-bottom: 12px; }
.detail h3 { margin-bottom: 8px; }
.detail .facts { gap: 8px; }
.detail .natural, .detail .reserved { padding: 16px 20px; margin-bottom: 12px; }

/* Дві колонки на десктопі, одна на телефоні */
.cols { display: grid; gap: 20px; }
@media (min-width: 768px) { .cols { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ── Екран питання про напрям ────────────────────────────────────────── */
/* Момент визнання: велике зображення сили, свій відтінок фону під кожну
   з трьох АтмоСил, м'яка поява. Кольори ті самі, що й у карток сил
   на сторінці результату. */
.gift {
  border-radius: var(--radius-card);
  padding: 20px 22px 18px;
  margin-bottom: 20px;
  text-align: center;
  animation: rise .4s ease both;
}
.gift.tone1 { background: rgba(34, 197, 94, .14); }
.gift.tone2 { background: rgba(168, 85, 247, .14); }
.gift.tone3 { background: rgba(250, 204, 21, .20); }

.gift .gimg {
  width: 104px; height: 104px; object-fit: contain;
  border-radius: var(--radius-card);
  animation: pop .6s .12s cubic-bezier(.22, 1, .36, 1) both;
}
.gift .gimg.emoji { display: inline-flex; align-items: center; justify-content: center; font-size: 4rem; }
.gift .gname { font-weight: 700; font-size: 1.1875rem; margin-top: 10px; letter-spacing: -.01em; }
/* Повідомлення — по лівому краю: центрований абзац на 4-5 рядків
   читається важко, око губить початок рядка. */
.gift .gmessage { margin: 12px auto 0; max-width: 52ch; text-align: left; }
.gift .gintro {
  margin: 0; font-size: 1.125rem; line-height: 1.5; font-weight: 600;
  color: var(--atmo-text); letter-spacing: -.01em;
}
.gift .gdetail {
  margin: 10px 0 0; font-size: 1rem; line-height: 1.6;
  color: var(--atmo-text-secondary);
}
.gift .gdetail strong { color: var(--atmo-text); font-weight: 600; }

/* розрив між карткою-подарунком і питанням */
.gsplit {
  height: 1px; background: var(--atmo-border);
  max-width: 120px; margin: 0 auto 14px;
}

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.72) translateY(10px); } 65% { opacity: 1; transform: scale(1.06) translateY(0); } 100% { opacity: 1; transform: scale(1); } }

/* текст питання */
/* ГОЛОВНЕ екранів питань — один кегль на всі типи.
   Було три: .question 24px, .ask-main 26px і h1 32px на екранах навичок,
   цінностей та самооцінки. Мова не встигає вивчитись, якщо «те, заради
   чого екран існує» щоразу іншого розміру. */
.question {
  font-family: var(--atmo-font-display); font-size: 1.625rem; line-height: 1.22;
  font-weight: 700; letter-spacing: -.01em; margin: 0 0 18px;
}
.hint { color: var(--atmo-text-secondary); font-size: 1rem; margin: -12px 0 20px; }

/* ── кнопки ──────────────────────────────────────────────────────────── */
.option {
  display: block; width: 100%; text-align: left;
  background: var(--atmo-surface); color: var(--atmo-text);
  border: 1px solid var(--atmo-border); border-radius: var(--radius-button);
  padding: 16px 18px; margin-bottom: 12px;
  font: inherit; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background .12s, border-color .12s, transform .06s;
}
.option:hover { background: var(--atmo-surface-hover); }
.option:active { transform: scale(.995); }
/* Обрана відповідь — рамкою й кольором тексту, БЕЗ заливки.
   Заливка --atmo-primary-light закріплена за ОПОРОЮ, і це не дрібниця:
   людина бачить обрану відповідь ~110 разів за прохід. Якби «обрано» і
   «опора» мали однакове тло, опора не стала б окремим знаком — вона
   читалась би як «щось тут вибрано», і вся мова розсипалась би на
   найповторюванішому елементі продукту.
   Рамка 2px плюс синій текст і так не залишають сумнівів, що обрано. */
.option.picked {
  border-color: var(--atmo-primary);
  border-width: 2px;
  background: var(--atmo-surface);
  color: var(--atmo-primary);
  font-weight: 600;
}

.button {
  display: block; width: 100%;
  background: var(--atmo-primary); color: var(--on-primary);
  border: none; border-radius: var(--radius-button);
  padding: 16px 24px; margin-top: 12px;
  font: inherit; font-weight: 600; cursor: pointer;
  transition: opacity .12s, transform .06s;
}
.button:active { transform: scale(.995); }
.button[disabled] { background: var(--atmo-border); color: var(--atmo-text-secondary); cursor: default; }
/* Три ролі кнопок, щоб колір щось означав:
   заповнена зелена — головна дія кроку;
   біла з рамкою — додаткова дія на цьому ж екрані;
   синя зі стрілкою — вихід на зовнішній сайт. */
.button.secondary {
  background: var(--atmo-surface); color: var(--atmo-text);
  border: 1.5px solid var(--atmo-border);
}
.button.secondary:hover { border-color: var(--atmo-primary); color: var(--atmo-primary); }
.button.external { text-decoration: none; text-align: center; }
@media (min-width: 768px) {
  .actions { display: flex; gap: 16px; }
  .actions .button { margin-top: 20px; }
}

/* «Назад» лишається дією (тому синє), але перестає бути найпершим, що
   бачить око. Позиція «перше, вгорі» за кодом належить ГОЛОВНОМУ, а тиха
   службова кнопка забирала її 110 разів поспіль. Розмір і насиченість —
   те, що відрізняє службу від змісту. */
.back {
  background: none; border: none; padding: 4px 0; margin-bottom: 10px;
  color: var(--atmo-primary); font: inherit; font-size: 0.875rem;
  opacity: .75; cursor: pointer;
}
.back:hover { opacity: 1; }
/* Ціль натискання «назад» — 44px, не міняючи вигляду.
   Заміряно на телефоні: кнопка була 65×32, тобто єдина на екрані нижча
   за норму. Просто додати відступи не можна — вона підросла б і зсунула
   заголовок питання. Тому площу для пальця розширює невидимий шар:
   текст лишається там, де був, а натиснути можна на 44 пікселях.
   Для аудиторії 45+ на телефоні це різниця між «натиснув» і «промазав». */
.back { position: relative; }
.back::before {
  content: ''; position: absolute; left: -10px; right: -10px;
  top: 50%; transform: translateY(-50%); height: 44px;
}

/* ── картки професій ─────────────────────────────────────────────────── */
.cards { display: grid; gap: 20px; }
@media (min-width: 768px) {
  .cards { grid-template-columns: 1fr 1fr; align-items: start; }
  /* найкращий збіг займає обидві колонки — це головна картка екрана */
  .cards .card.first { grid-column: 1 / -1; }
}

.card {
  background: var(--atmo-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
  border: none;
  width: 100%; text-align: left; font: inherit; color: inherit;
  display: block; cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
.card:hover { background: var(--atmo-surface-hover); box-shadow: var(--shadow-lift); }
.card.first { box-shadow: var(--shadow-lift); }
.card.first .name { font-size: 1.4375rem; }

/* Шапка картки: відсоток великий ліворуч, назва й напрям поруч.
   Це єдина точка входу — око чіпляється за число, далі йде по назві. */
.cardhead { display: flex; align-items: baseline; gap: 16px; }
.titles { flex: 1 1 auto; min-width: 0; }
.card .name { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.cluster { color: var(--atmo-text-secondary); font-size: 1rem; margin-top: 4px; }
.card .why {
  margin-top: 14px;
  font-size: 1rem; line-height: 1.5; color: var(--atmo-text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .more { margin-top: 16px; color: var(--atmo-primary); font-size: 1rem; font-weight: 500; }

/* Відсоток збігу. Синій тут не використовуємо: синій — колір дії
   (посилання, кнопки). Високий збіг підсвічуємо зеленим, решта — текстовим. */
.card .pc {
  font-size: 2.125rem; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--atmo-text); flex: 0 0 auto;
}
.card .pc.high { color: var(--match-high); }
.card.first .name { font-size: 1.4375rem; }
.card.first .pc { font-size: 3rem; }

.level {
  display: inline-block; margin-bottom: 14px;
  background: var(--atmo-accent-yellow); color: var(--atmo-text);
  font-size: 0.875rem; font-weight: 600; letter-spacing: .01em;
  padding: 5px 12px; border-radius: var(--radius-pill);
}

/* Бейджі під описом. Тип входу має закріплений колір і більше ніде
   в інтерфейсі цими кольорами нічого не фарбується:
   зелений = швидкий вхід через курси, лавандовий = вища освіта. */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }

.pill {
  display: inline-flex; align-items: center;
  font-size: 0.9375rem; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.pill.fast { background: var(--entry-fast-bg); color: var(--entry-fast-text); }
.pill.edu { background: var(--entry-edu-bg); color: var(--entry-edu-text); }

/* Сильна сторона — нейтральна капсула: вона підпис, а не сигнал */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--atmo-surface); border: 1px solid var(--atmo-border);
  border-radius: var(--radius-pill);
  padding: 5px 12px; font-size: 0.9375rem; color: var(--atmo-text-secondary);
}

/* ── «Чому саме ця професія»: бейджі без чисел ──────────────────────── */
.params { margin-top: 26px; border-top: 1px solid var(--atmo-border); padding-top: 20px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags .tag {
  display: inline-flex; align-items: center;
  background: var(--bar-empty); border: 1px solid var(--atmo-border);
  border-radius: var(--radius-pill); padding: 6px 14px;
  font-size: 0.9375rem; color: var(--atmo-text); margin: 0;
}

/* ── Бар зі шкалою кольору ───────────────────────────────────────────── */
.srow { margin-bottom: 14px; }
.srow .label { display: flex; justify-content: space-between; gap: 12px; font-size: 1rem; margin-bottom: 6px; }
.srow .val { font-weight: 600; }
.srow .track { height: 6px; border-radius: 3px; background: var(--bar-empty); overflow: hidden; }
.srow .track > span { display: block; height: 100%; border-radius: 3px; }
.srow .track.strong > span { background: var(--bar-strong); }
.srow .track.normal > span { background: var(--bar-normal); }
.srow .track.weak > span { background: var(--bar-weak); }

/* Бейджі під описом. Тип входу має закріплений колір і більше ніде
   в інтерфейсі цими кольорами нічого не фарбується:
   зелений = швидкий вхід через курси, лавандовий = вища освіта. */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }

.pill {
  display: inline-flex; align-items: center;
  font-size: 0.9375rem; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.pill.fast { background: var(--entry-fast-bg); color: var(--entry-fast-text); }
.pill.edu { background: var(--entry-edu-bg); color: var(--entry-edu-text); }

/* Сильна сторона — нейтральна капсула: вона підпис, а не сигнал */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--atmo-surface); border: 1px solid var(--atmo-border);
  border-radius: var(--radius-pill);
  padding: 5px 12px; font-size: 0.9375rem; color: var(--atmo-text-secondary);
}

/* ── «Чому саме ця професія»: парні бари ────────────────────────────── */
.params { margin-top: 26px; border-top: 1px solid var(--atmo-border); padding-top: 20px; }
.param { margin-bottom: 20px; }
.param:last-child { margin-bottom: 0; }
.param .pname { font-weight: 600; font-size: 1.0625rem; margin-bottom: 8px; }

.dual { display: flex; flex-direction: column; gap: 4px; }
.line { display: flex; align-items: center; gap: 10px; }
.line .who {
  flex: 0 0 80px; text-align: right;
  font-size: 0.9375rem; color: var(--atmo-text-secondary);
}
.line .track {
  flex: 1 1 auto; height: 8px; border-radius: 4px;
  background: var(--bar-empty); overflow: hidden;
}
.line .track > span { display: block; height: 100%; border-radius: 4px; background: var(--bar-you); }
.line.role .track > span { background: var(--bar-role); }
.line .val {
  flex: 0 0 auto; min-width: 34px;
  font-size: 0.9375rem; font-weight: 600; color: var(--atmo-text);
}
.line .val .ok { color: var(--match-high); font-style: normal; }

/* умови праці — без чисел, тому лишаються рядком */
.param.cond .nums { font-size: 0.875rem; color: var(--atmo-text-secondary); }
.param.cond .nums.ok { color: var(--entry-fast-text); }
.param.cond .nums.no { color: var(--level-low-text); }

/* Бейджі під описом. Тип входу має закріплений колір і більше ніде
   в інтерфейсі цими кольорами нічого не фарбується:
   зелений = швидкий вхід через курси, лавандовий = вища освіта. */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }

.pill {
  display: inline-flex; align-items: center;
  font-size: 0.9375rem; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.pill.fast { background: var(--entry-fast-bg); color: var(--entry-fast-text); }
.pill.edu { background: var(--entry-edu-bg); color: var(--entry-edu-text); }

/* Сильна сторона — нейтральна капсула: вона підпис, а не сигнал */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--atmo-surface); border: 1px solid var(--atmo-border);
  border-radius: var(--radius-pill);
  padding: 5px 12px; font-size: 0.9375rem; color: var(--atmo-text-secondary);
}

/* ── «Чому саме ця професія» — параметри з цифрами ───────────────────── */

/* акцентна картка — АтмоСили */
.accent {
  background: rgba(250, 236, 90, .25);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  box-shadow: none;
}
.accent .aname { font-weight: 600; font-size: 1.125rem; }
.accent .ashort { color: var(--atmo-text-secondary); font-size: 1rem; margin-top: 2px; }
.accent .along { margin-top: 10px; font-size: 1rem; }
/* ── АтмоСили ────────────────────────────────────────────────────────── */
.forces { display: grid; gap: 16px; margin-bottom: 8px; }
@media (min-width: 768px) { .forces { grid-template-columns: repeat(3, 1fr); } }
/* Пояснення перед картками — темний блок із жовтою смужкою зверху */
.about-forces {
  background: #1E293B;
  border-top: 4px solid var(--atmo-accent-yellow);
  padding: 24px;
  box-shadow: none;
}
.about-forces .atitle { font-weight: 600; font-size: 1.0625rem; color: #fff; margin-bottom: 8px; }
.about-forces p {
  font-size: 1.0625rem; line-height: 1.6;
  color: rgba(255, 255, 255, .85); max-width: none; width: 100%;
}
.about-forces b { color: #fff; font-weight: 600; }

/* Три яскраві картки: колір закріплений за порядковим номером сили */
.forces { display: grid; gap: 12px; margin-bottom: 20px; }
@media (min-width: 768px) { .forces { grid-template-columns: repeat(3, 1fr); } }

/* Картки АтмоСил.
   Раніше це були заливки насиченим кольором із білим текстом — і текст
   на них майже не читався: 2.3:1 на зеленому, 1.5:1 на жовтому при
   мінімальних 4.5:1 за WCAG. Тому колір лишається як впізнаваний акцент
   (рамка, номер, підкладка під зображенням), а текст ліг на світлий фон
   того ж відтінку: контраст піднявся до 12:1. */
.force {
  position: relative; overflow: hidden;
  border: none; font: inherit; cursor: pointer; width: 100%;
  border-radius: var(--radius-card);
  padding: 26px 24px 24px;
  background: #fff; color: var(--atmo-text);
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 28px rgba(16, 24, 40, .07);
  transition: transform .14s ease, box-shadow .14s ease;
}
/* кольорова смуга зверху замість рамки навколо: колір лишається впізнаваним,
   але картка перестає виглядати як обведений прямокутник */
.force::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--fc-strong);
}
/* м'який кольоровий світлотінь у верхньому куті — дає глибину без заливки */
.force::after {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 180px; height: 180px; border-radius: 50%;
  background: var(--fc-soft); opacity: .8; pointer-events: none;
}
.force > * { position: relative; z-index: 1; }
.force:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 18px 40px rgba(16, 24, 40, .10); }
.force:active { transform: translateY(-1px); }

/* Картки «твоя сила» фарбувались за порядковим номером: перша зелена,
   друга фіолетова, третя бурштинова. Номер картки не значить нічого, а
   всі три кольори в продукті вже зайняті («вже твоє», вісь інтересів,
   обережність) — тобто екран сам собі створював три хибні коди. Тепер
   картки нейтральні, а єдина дія на них синя, як усі дії. */
.force.c1, .force.c2, .force.c3 {
  --fc-strong: var(--atmo-text-secondary);
  --fc-soft: var(--role-fact-bg);
}

.force .fnum {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fc-strong);
}
.force .fimg {
  width: 84px; height: 84px; margin: 14px 0 16px;
  border-radius: 50%; object-fit: contain;
  background: var(--fc-soft); padding: 10px;
  box-shadow: 0 6px 16px rgba(16, 24, 40, .10);
}
.force .fimg.emoji { display: flex; align-items: center; justify-content: center; font-size: 2.375rem; }
.force .fname { font-weight: var(--t-object-w); font-size: var(--t-object); line-height: 1.2; color: var(--atmo-text); letter-spacing: -.01em; }
.force .fshort { font-size: 1.0625rem; line-height: 1.5; color: var(--atmo-text-secondary); margin-top: 10px; }

.force .fnat { margin-top: 18px; padding-top: 16px; width: 100%; border-top: 1px solid var(--atmo-border); }
.force .fnat-label {
  font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase;
  color: var(--atmo-text-secondary); font-weight: var(--t-label-w); margin-bottom: 10px;
}
.force .fnat-item {
  font-size: 1rem; line-height: 1.45; margin-top: 9px;
  padding-left: 20px; position: relative; color: var(--atmo-text);
}
.force .fnat-item::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--fc-strong);
}
.force .flink {
  display: flex; align-items: center; gap: 10px;
  margin-top: 20px; font-size: 1rem; font-weight: 700; color: var(--atmo-primary);
}
.force .farrow {
  position: static; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--atmo-primary-light); color: var(--atmo-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9375rem; line-height: 1;
}

/* ── RIASEC — повні результати ───────────────────────────────────────── */
.eyebrow {
  text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--t-label); color: var(--atmo-text-secondary); font-weight: var(--t-label-w);
  margin: 32px 0 12px;
}
.riasec { display: grid; gap: 12px; margin-bottom: 12px; }
@media (min-width: 768px) { .riasec { grid-template-columns: repeat(3, 1fr); } }

.rcard {
  background: var(--atmo-surface);
  border-radius: var(--radius-button);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
/* Найвищий показник: синій бордер і підсвічений фон — це ключовий вектор */
.rcard.top {
  background: var(--atmo-primary-light);
  border: 1.5px solid var(--atmo-primary);
  padding: 14.5px;                      /* бордер не має зсувати вміст */
}
.rcard.top .rscore { color: var(--atmo-primary); }
/* Найнижчий показник: м'яке рожеве тло без бордера. Помітно з першого
   погляду, але слабше за акцент найвищого — «слабке» не має кричати
   голосніше за «сильне». */
.rcard.weak {
  background: var(--role-care-bg);
  border: 1.5px solid #FCA5A5;
  padding: 14.5px;                      /* бордер не має зсувати вміст */
}
.rhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rname { font-weight: 600; font-size: 1.0625rem; }
.rscore { font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; color: var(--atmo-text); }
.rcard.weak .rscore { color: var(--bar-weak); }
.rcard .rtrack {
  height: 6px; border-radius: 3px; background: var(--bar-empty);
  overflow: hidden; margin: 8px 0 10px;
}
.rcard .rtrack > span { display: block; height: 100%; border-radius: 3px; background: var(--bar-normal); }
.rcard.weak .rtrack > span { background: var(--bar-weak); }
.rtext { font-size: 0.9375rem; line-height: 1.5; color: var(--atmo-text-secondary); }

/* картки посередині лишаються нейтральними: виділені тільки крайні */

/* ── Провідна комбінація ─────────────────────────────────────────────── */
.combo {
  background: var(--atmo-primary-light);
  border: 2px solid var(--atmo-primary);
  padding: 20px 24px;
  box-shadow: none;
}
.combo .eyebrow { color: var(--atmo-primary); margin: 0 0 8px; }
.combo .formula { font-weight: 700; font-size: 1.125rem; line-height: 1.3; color: var(--atmo-text); }
.combo p { font-size: 1.0625rem; line-height: 1.6; color: var(--atmo-text); max-width: none; width: 100%; }

/* ── Зірочки-індикатори цінностей ───────────────────────────────────── */
.stars { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.starcell { text-align: center; }
.starwrap { width: 76px; margin: 0 auto; }
.star { width: 100%; height: auto; display: block; }
.star .star-bg { fill: none; stroke: var(--bar-empty); stroke-width: 7; stroke-linejoin: round; }
.star .star-fill {
  fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke-dasharray .4s ease;
}
.star.strong .star-fill { stroke: var(--bar-strong); }
.star.normal .star-fill { stroke: var(--bar-normal); }
.star.weak   .star-fill { stroke: var(--bar-weak); }
.star .star-num { font-size: 1.375rem; font-weight: 700; fill: var(--atmo-text); }
.starlabel { font-size: 0.9375rem; font-weight: 600; color: var(--atmo-text); margin-top: 4px; color: var(--atmo-text-secondary); }

/* Практична порада за цінностями */
.advice {
  background: var(--atmo-primary-light);
  border-left: 4px solid var(--atmo-primary);
  border-radius: var(--radius-card);
  padding: 20px 24px; margin-bottom: 20px;
}
.advice .alabel { font-weight: 700; font-size: 0.875rem; letter-spacing: 1px; color: var(--atmo-primary); text-transform: uppercase; }

/* ── Модалка «інші професії» ────────────────────────────────────────── */
/* Лежить поверх сторінки результатів: сама сторінка нікуди не дівається,
   тому після закриття людина повертається в те саме місце скролу. */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(30, 41, 59, .45);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade .18s ease;
}
@media (min-width: 768px) { .overlay { align-items: center; padding: 32px; } }
body.locked { overflow: hidden; }

.sheet {
  background: var(--atmo-surface);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  width: 100%; max-width: 900px; max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);
}
@media (min-width: 768px) { .sheet { border-radius: var(--radius-card); max-height: 86vh; } }

.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--atmo-border);
}
.sheet-close {
  background: none; border: none; font-size: 1.25rem; line-height: 1;
  color: var(--atmo-text-secondary); cursor: pointer; padding: 4px 8px;
}
.sheet-body { padding: 20px 24px 24px; overflow-y: auto; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.filter {
  background: var(--atmo-surface); border: 1px solid var(--atmo-border);
  border-radius: var(--radius-pill); padding: 8px 16px;
  font: inherit; font-size: 0.9375rem; color: var(--atmo-text); cursor: pointer;
}
.filter:hover { background: var(--atmo-surface-hover); }
.filter.on { background: var(--atmo-primary-light); border-color: var(--atmo-primary); color: var(--atmo-primary); font-weight: 600; }

.search {
  display: flex; align-items: center; gap: 10px;
  background: var(--atmo-surface); border: 1px solid var(--atmo-border);
  border-radius: var(--radius-card); padding: 4px 16px; margin-bottom: 14px;
}
.search input { border: none; padding: 12px 0; background: none; flex: 1 1 auto; }
.search input:focus { outline: none; }

.legend-levels { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 16px; font-size: 0.9375rem; }
.legend-levels .lv { color: var(--atmo-text-secondary); }

.others-list { display: grid; gap: 12px; }
.orow {
  display: flex; align-items: center; gap: 16px;
  width: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--atmo-surface); border: 1px solid #DBE6FF;
  border-radius: var(--radius-card); padding: 18px 20px; cursor: pointer;
  box-shadow: var(--shadow-card);
}
.orow:hover { background: var(--atmo-surface-hover); }
.orow .oicon {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--radius-button);
  background: var(--atmo-accent-green); display: flex; align-items: center; justify-content: center;
}
.orow .obody { flex: 1 1 auto; min-width: 0; }
.orow .oname { color: var(--atmo-primary); font-weight: 600; }
.orow .odesc { color: var(--atmo-text-secondary); font-size: 1rem; margin-top: 4px; }
.orow .olevel { font-size: 1.25rem; flex: 0 0 auto; }
.orow .oarrow { color: var(--atmo-text-secondary); font-size: 1.375rem; flex: 0 0 auto; }

/* ── Модалка АтмоСили ───────────────────────────────────────────────── */
/* ── Екран деталей професії ─────────────────────────────────────────── */
.detail-head { display: flex; gap: 24px; align-items: flex-start; }
.detail-head img.dphoto { object-fit: cover; display: block; }
.detail-head .dphoto {
  width: 220px; height: 220px; flex: 0 0 220px;
  border-radius: var(--radius-card); background: var(--atmo-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; color: var(--atmo-text-secondary);
}
.dhead-text { flex: 1 1 auto; min-width: 0; }
.dcluster { color: var(--atmo-primary); font-size: 1rem; font-weight: 600; }
.dsub { font-size: 1rem; color: var(--atmo-text-secondary); margin-bottom: 8px; }
@media (max-width: 600px) {
  .detail-head { flex-direction: column; }
  .detail-head .dphoto { width: 100%; height: 220px; flex: none; }
}

/* Чіпи АтмоСил: колір той самий, що й у картках сил на сторінці результату */
.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-pill); padding: 6px 14px;
  font-size: 0.9375rem; font-weight: 500;
}
.fchip.c1 { background: rgba(34, 197, 94, .18); }
.fchip.c2 { background: rgba(168, 85, 247, .18); }
.fchip.c3 { background: rgba(250, 204, 21, .25); }

/* Природний вибір — зелений блок, як у референсі */
.natural {
  background: var(--role-yours-bg); border-left: 4px solid var(--atmo-success-light);
  border-radius: var(--radius-card); padding: 20px 24px; margin-bottom: 20px;
}
.natural .nlabel { color: var(--entry-fast-text); font-size: 0.875rem; font-weight: 700; letter-spacing: 1px; }
.natural .ntitle { font-weight: 700; font-size: 1.125rem; margin-top: 6px; }

/* Місце під дані, яких ще нема */
.reserved {
  background: var(--atmo-surface); border: 1.5px dashed var(--atmo-border);
  border-radius: var(--radius-card); padding: 20px 24px; margin-bottom: 20px;
}
.reserved .rlabel { font-weight: 600; font-size: 1.0625rem; }
.reserved .rnote { color: var(--atmo-text-secondary); font-size: 0.9375rem; margin-top: 6px; }

/* Навички — насичені чіпи, а не сірі плашки */
.panel .tags .tag { background: var(--atmo-primary-light); border-color: transparent; color: var(--atmo-primary); font-weight: 500; }

/* Зарплата */
.pay { display: grid; gap: 12px; }
@media (min-width: 600px) { .pay { grid-template-columns: 1fr 1fr; } }
.paycard {
  background: rgba(212, 245, 196, .45); border: none;
  border-radius: var(--radius-button); padding: 14px 16px;
}
.paycard .pkey { font-size: 0.9375rem; color: var(--entry-fast-text); }
.paycard .pval { font-weight: 700; font-size: 1.25rem; margin-top: 4px; color: var(--entry-fast-text); }

/* Практична інформація — ваучер, ліцензування, бар'єри — жовтим акцентом */
.fact.practical { background: rgba(250, 236, 90, .22); border-top: none; border-radius: var(--radius-button); padding: 12px 14px; }
/* Янтарна плитка освітлює тло, і тихий сірий підпис падав на ній до
   3,74:1. Тут підпису потрібне повне чорнило. */
.fact.practical .fkey { color: var(--atmo-text); }

.switch-note { background: rgba(250, 236, 90, .22); border-color: transparent; }

/* ── Твоя готовність ─────────────────────────────────────────────────── */
.readiness { padding: 0; overflow: hidden; }
.rd-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; background: none; border: none; font: inherit; color: inherit;
  padding: 16px 20px; cursor: pointer; text-align: left;
}
.rd-title { font-weight: 600; }
.rd-hint { font-size: 0.9375rem; color: var(--atmo-primary); margin-top: 4px; }
.rd-arrow { color: var(--atmo-primary); font-size: 1.125rem; flex: 0 0 auto; }
.rd-body { padding: 0 20px 18px; }
.rd-line { font-size: 1rem; padding: 8px 0; border-top: 1px solid var(--atmo-border); }
.rd-line.ok { color: var(--entry-fast-text); }
.rd-line.todo, .rd-line.missing { color: var(--level-low-text); }
.rd-line.neutral { color: var(--atmo-text-secondary); }

/* Навички двома підписаними групами: спершу те, що людина вже вміє
   (це опора), під ним — що ще належить освоїти. Раніше обидва види чіпів
   лежали в одному рядку й розрізнялись тільки кольором. */
.rd-group { padding: 12px 0; border-top: 1px solid var(--atmo-border); }
.rd-group:first-child { border-top: none; padding-top: 0; }
.rd-glabel {
  font-size: 0.875rem; font-weight: 600; letter-spacing: .02em;
  color: var(--atmo-text-secondary); margin-bottom: 8px;
}
.rd-glabel.has { color: var(--entry-fast-text); }
/* назва попередньої роботи — джерело переносу, дрібним під підписом групи */
.rd-gnote {
  font-size: 0.875rem; color: var(--atmo-text-secondary);
  margin: -4px 0 8px;
}

/* ── «Ти не починаєш з нуля» ─────────────────────────────────────────────
   Блок стоїть перед картками професій: спершу опора, потім варіанти.
   Оформлення тепліше за звичайну панель, але без святковості — це
   констатація факту з даних, а не привітання. */
.carried { border-left: 3px solid var(--atmo-accent-green); }
.ca-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.ca-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--atmo-accent-green); color: var(--entry-fast-text);
}
.ca-title { margin: 0 0 3px; font-size: 1.25rem; }
.ca-sub { font-size: 0.9375rem; color: var(--atmo-text-secondary); }
.ca-tags { margin-bottom: 12px; }
/* лічильник «у скількох професіях з пʼяти» — усередині чіпа, приглушено */
.ca-count {
  margin-left: 7px; padding: 0 6px; border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .10); font-size: 0.8125rem; font-weight: 600;
}
.ca-note { margin: 0; font-size: 0.875rem; color: var(--atmo-text-secondary); }

.skchip {
  display: inline-flex; align-items: center;
  border: 1px dashed var(--atmo-border); background: transparent;
  border-radius: var(--radius-pill); padding: 5px 12px;
  font-size: 0.9375rem; color: var(--atmo-text-secondary);
}
.skchip.has {
  border-style: solid; border-color: transparent;
  background: var(--atmo-accent-green); color: var(--entry-fast-text); font-weight: 500;
}

/* підпис-пояснення під варіантом відповіді */
.option .onote { font-size: 0.9375rem; color: var(--atmo-text-secondary); margin-top: 3px; }
/* Підпис під варіантом лишається тлом навіть у вибраному стані: синій
   усередині вибраної кнопки множив сині поверхні без жодного нового сенсу. */
.option.picked .onote { color: var(--atmo-text-secondary); }

/* ── Пошук попередньої професії ──────────────────────────────────────────
   Варіантів 252, тому замість списку — поле пошуку. Поле навмисно того ж
   розміру й форми, що й .option: це той самий крок анкети, просто з іншим
   способом відповіді. */
.psearch-input {
  display: block; width: 100%;
  background: var(--atmo-surface); color: var(--atmo-text);
  border: 1px solid var(--atmo-border); border-radius: var(--radius-button);
  padding: 16px 18px; margin-bottom: 12px;
  font: inherit; box-shadow: var(--shadow-card);
  transition: border-color .12s;
}
.psearch-input::placeholder { color: var(--atmo-text-secondary); opacity: .8; }
.psearch-input:focus {
  outline: none; border-color: var(--atmo-primary);
  /* Напівпрозорий синій, а не --atmo-primary-light: цей токен зарезервовано
     за ОПОРОЮ і не має з'являтися як обвід фокуса. */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
.psearch-results:not(:empty) { margin-bottom: 12px; }
.psearch-item { margin-bottom: 8px; }
/* «Не знайшов свою роботу» — повноцінна відповідь, а не відмова, тому
   виглядає як варіант, просто відокремлений від знайдених збігів. */
.psearch-none { margin-top: 18px; border-style: dashed; }

/* Бейджі відповідності цінностям */
.vbadges { display: grid; gap: 10px; }
.vbadge {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(250, 236, 90, .22); border-radius: var(--radius-button);
  padding: 12px 14px; font-size: 1rem;
}
.vbadge .vicon { font-size: 1.125rem; line-height: 1.3; }
.vbadge .vnote { color: var(--atmo-text-secondary); }

/* Факти про професію */
.facts { display: grid; gap: 12px; }
@media (min-width: 768px) { .facts { grid-template-columns: 1fr 1fr; } }
.fact { border-top: 1px solid var(--atmo-border); padding-top: 10px; }
.fact .fkey { font-size: 0.9375rem; color: var(--atmo-text-secondary); }
.fact .fval { font-weight: 600; margin-top: 2px; }

/* ── Підібрані напрями: горизонтальні картки з номером і статусом ────── */
.profs { display: grid; gap: 12px; }

/* Кнопка «показати ще»: на всю ширину, пунктирна рамка, плюс зліва */
.more-profs {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 12px;
  background: var(--atmo-surface);
  border: 1.5px dashed var(--atmo-border);
  border-radius: var(--radius-card);
  padding: 18px 24px; font: inherit; font-weight: 500;
  color: var(--atmo-primary); cursor: pointer;
}
.more-profs:hover { background: var(--atmo-surface-hover); border-color: var(--atmo-primary); }
.more-profs .plus {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  background: var(--atmo-primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.0625rem; line-height: 1;
}
.prof {
  display: flex; align-items: flex-start; gap: 16px;
  width: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--atmo-surface);
  /* Рамка по всьому периметру. Світло-сірий --atmo-border (0.8px) на білій
     картці всередині напівпрозорої зони був практично невидимий, тому тон
     помітніший і товщина більша — картка має читатись як окремий об'єкт. */
  border: 1.5px solid #CBD5E1;
  border-left: 4px solid var(--atmo-primary);
  border-radius: var(--radius-card);
  padding: 20px 24px; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background .12s;
}
.prof:hover { background: var(--atmo-surface-hover); }
.prof .body { flex: 1 1 auto; min-width: 0; }

/* Перший рядок картки: назва і відсоток. Це дві речі, за якими людина
   сканує список, тому вони на одному рівні й найбільші на картці. */
.prof-top { display: flex; align-items: baseline; gap: 16px; }
/* ГОЛОВНЕ картки. Було 20px проти 22–34px у відсотка поруч — назва того,
   що людина обирає, програвала числу, яке продукт сам називає «не шансом
   влаштуватись». Тепер назва найбільша на картці й нічим із нею не
   конкурує: відсоток пішов у рядок фактів. */
/* Назва речі у списку — свій рівень: більший за текст, менший за
   головне екрана. Один і той самий на картці професії, на дверях
   хвоста, у рядку вибору, у кроці маршруту й у переліку напрямів. */
.prof .name {
  font-weight: var(--t-object-w); font-size: var(--t-object); line-height: 1.25; letter-spacing: -.01em;
  flex: 1 1 auto; min-width: 0;
}

/* Чипи ролей на картці: «вже твоє» і «обережність» в одному ряду. */
.prof-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ТЛО-ФАКТ: той самий регістр, що й зарплата — табличні цифри, чорнило,
   без кольору ролі. */
.prof-fact {
  margin-top: 8px; font-size: 0.90625rem; color: var(--atmo-text-secondary);
  font-variant-numeric: tabular-nums;
}

.prof .desc {
  font-size: 1.0625rem; line-height: 1.5; color: var(--atmo-text-secondary);
  margin-top: 6px; width: 100%;
  /* Два рядки на згорнутій картці. На телефоні опис розтягувався на п'ять
     рядків, картка виростала до 450px, і на екран не вміщалось навіть двох
     варіантів — порівнювати ставало нічим. Повний опис нікуди не дівся:
     він на екрані самої професії. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Один рядок бейджів замість чотирьох окремих поверхів. Роль, складність
   переходу і рідкісні позначки лежать поруч і переносяться разом. */
.prof-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.prof-meta .pm { margin: 0; }

/* Явна дія замість «уся картка клікабельна й здогадайся сам» */
.prof-more {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 14px;
  font-size: 0.9375rem; font-weight: 600; color: var(--atmo-primary);
}
.prof:hover .prof-more { text-decoration: underline; text-underline-offset: 3px; }

/* Дві дрібні дії картки в стовпчик праворуч: «+» до порівняння і «✕». */
.prof-acts { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* Підтверджений напрям: людина сама сказала «так» на це питання */
.confirmed-note {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--own-bg);
  border-radius: var(--radius-pill); padding: 5px 12px;
  font-size: 0.9375rem; font-weight: 500;
}

/* ── Ранній результат після анкети ───────────────────────────────────────
   Перша користь за ~9 екранів замість ~110. Оформлення навмисно спокійне:
   це ще не рекомендація, і виглядати вона має як чесний перший погляд,
   а не як святковий фінал. */
.qk-eyebrow {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--atmo-primary);
}
/* Головне число екрана: скільки професій доступні вже зараз. Для людини,
   яка сумнівається, чи є взагалі щось для неї, це і є відповідь. */
.qk-reach {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--atmo-accent-green); border-radius: var(--radius-card);
  padding: 16px 18px; margin: 18px 0 20px;
}
/* Вступний рядок блоку «наступна сходинка»: пояснює числа під ним.
   Колір — токен, а не літерал, інакше в темній темі текст зникає
   на темно-зеленому фоні (той самий шов, що й у .tr-now). */
.qk-reach-lead { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--atmo-text); }
/* Один рядок = одне велике число з поясненням. Числа двох рядків стоять
   в одну колонку (однакова мінімальна ширина), щоб око читало їх парою:
   «доступно N — з них M безкоштовно». */
.qk-reach-row { display: flex; gap: 16px; align-items: center; }
.qk-reach-num {
  flex: 0 0 auto; min-width: 62px; text-align: center;
  font-family: var(--atmo-font-display); font-variant-numeric: tabular-nums;
  font-size: 2.5rem; line-height: 1; color: var(--entry-fast-text);
}
.qk-reach-text { font-size: 1rem; line-height: 1.45; }
.qk-reach-sub { margin-top: 5px; font-weight: 600; color: var(--entry-fast-text); }
/* Вилка стартових зарплат — чесні числа з бази, одразу під першим числом */
.qk-reach-pay {
  margin-top: 5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Тижневий чек-ін ───────────────────────────────────────────────────────
   Банер-зустріч після повернення і кнопка «нагадати через тиждень». */
.checkin {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--atmo-accent-green); border-radius: var(--radius-card);
  padding: 16px 18px; margin-bottom: 16px;
}
.checkin-ico { font-size: 1.75rem; line-height: 1; }
.checkin-text { flex: 1 1 240px; font-size: 1rem; line-height: 1.45; }
.checkin-btn {
  flex: 0 0 auto; padding: 10px 18px; font: inherit; font-weight: 600;
  background: var(--atmo-surface); color: var(--atmo-primary-hover);
  border: none; border-radius: var(--radius-pill); cursor: pointer;
}
.remind-row { margin: 6px 0 14px; }
.remind-btn {
  padding: 10px 18px; font: inherit; font-size: 0.9375rem; font-weight: 600;
  color: var(--atmo-text-secondary); background: var(--atmo-surface);
  border: 1.5px dashed var(--atmo-border); border-radius: var(--radius-pill);
  cursor: pointer;
}
.remind-btn:hover { border-color: var(--atmo-primary); color: var(--atmo-primary); }
.remind-btn:disabled { cursor: default; color: var(--atmo-primary-hover); border-style: solid; }

/* ── Картка для радника і відкриття за кодом ───────────────────────────────
   Одна сторінка, яку друкують або показують з телефона. Стримана, без
   тіней і кольорових заливок — це документ, а не екран. */
.wcode-link {
  margin-top: 18px; background: none; border: none; padding: 0;
  font: inherit; font-size: 0.90625rem; color: var(--atmo-text-secondary);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.wcode-link:hover { color: var(--atmo-primary); }

.code-input {
  display: block; width: 100%; max-width: 280px; margin: 6px 0 4px;
  padding: 14px 16px; font: inherit; font-size: 1.375rem; letter-spacing: .12em;
  font-family: var(--atmo-font-display); font-weight: 700;
  border: 1.5px solid var(--atmo-border); border-radius: var(--radius-input);
  background: var(--atmo-surface);
}
.code-input:focus { outline: none; border-color: var(--atmo-primary); }

.advisor-card { border: 1.5px solid var(--atmo-border); }
.ac-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding-bottom: 14px; border-bottom: 1.5px solid var(--atmo-border);
}
.ac-brand { font-family: var(--atmo-font-display); font-weight: 800; font-size: 1.0625rem; }
.ac-date { margin-top: 4px; font-size: 0.875rem; color: var(--atmo-text-secondary); }
.ac-code { text-align: center; flex: 0 0 auto; }
.ac-code-label { font-size: 0.78125rem; font-weight: 700; letter-spacing: .12em; color: var(--atmo-text-secondary); }
.ac-code-value {
  font-family: var(--atmo-font-display); font-weight: 800; font-size: 1.875rem;
  letter-spacing: .1em; border: 2px solid var(--atmo-text); border-radius: var(--radius-button);
  padding: 2px 12px; margin-top: 2px;
}
.ac-target { padding: 16px 0 6px; }
.ac-target-label {
  font-size: 0.78125rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--atmo-primary);
}
.ac-target-name { font-family: var(--atmo-font-display); font-weight: 800; font-size: 1.625rem; margin: 3px 0 10px; }
.ac-facts { display: flex; flex-direction: column; gap: 5px; }
.ac-fact { display: flex; gap: 12px; font-size: 0.96875rem; }
.ac-k { flex: 0 0 110px; color: var(--atmo-text-secondary); }
.ac-v { font-weight: 600; }
.ac-block { margin-top: 16px; }
.ac-block-title {
  font-size: 0.78125rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--atmo-text-secondary); margin-bottom: 7px;
}
.ac-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-tag {
  border: 1px solid var(--atmo-border); border-radius: var(--radius-pill);
  padding: 4px 11px; font-size: 0.875rem;
}
.ac-tag.has { border-color: var(--atmo-primary-soft); color: var(--atmo-primary-hover); }
.ac-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px dashed var(--atmo-border); font-size: 0.96875rem;
}
.ac-row-name { font-weight: 600; }
.ac-row-match { font-variant-numeric: tabular-nums; color: var(--atmo-text-secondary); }
.ac-note {
  margin-top: 18px; padding: 12px 14px; font-size: 0.875rem; line-height: 1.5;
  color: var(--atmo-text-secondary); background: var(--atmo-bg);
  border-radius: var(--radius-button);
}
.ac-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ── Результат-сторіз ──────────────────────────────────────────────────────
   Повноекранний оверлей у завченому форматі: смужки прогресу зверху,
   тап праворуч — далі, ліворуч — назад. Один сенс на кадр. */
.stories {
  position: fixed; inset: 0; z-index: 200;
  background: #10162A;
  display: flex; flex-direction: column;
}
body.st-open { overflow: hidden; }

.st-bars {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; gap: 5px; padding: 12px 14px 0;
}
.st-bar {
  flex: 1 1 0; height: 4px; border-radius: 4px;
  background: rgba(255, 255, 255, .28); overflow: hidden;
}
.st-bar-fill { display: block; height: 100%; width: 0; background: #FFFFFF; }
.st-bar.done .st-bar-fill { width: 100%; }
.st-bar.act .st-bar-fill { width: 100%; opacity: .85; }

.st-close {
  position: absolute; top: 26px; right: 14px; z-index: 7;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #FFFFFF;
  font-size: 1.125rem; cursor: pointer;
}

.st-tap { position: absolute; top: 0; bottom: 0; z-index: 5; cursor: pointer; }
.st-tap-left { left: 0; width: 34%; }
.st-tap-right { right: 0; width: 66%; }

.st-frame {
  flex: 1 1 auto; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* тони кадрів: пастель системи, бузковий відкриттів, чорнильний, фото */
.st-frame.tone-pastel { background: linear-gradient(160deg, #E8EEFF 0%, #D4E0FF 55%, #EDE4FF 100%); color: var(--atmo-text); }
.st-frame.tone-gem { background: linear-gradient(160deg, #EFEAFF 0%, #E0D8F9 60%, #EDE4FF 100%); color: #3B3663; }
.st-frame.tone-ink,
.st-frame.tone-final { background: linear-gradient(165deg, #1A2340 0%, #10162A 70%); color: #FFFFFF; }
.st-frame.tone-photo { background: #10162A; color: #FFFFFF; }

.st-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .92;
}
.st-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 22, 42, .35) 0%,
    rgba(16, 22, 42, .05) 35%, rgba(16, 22, 42, .82) 100%);
}

.st-body {
  position: relative; z-index: 4; max-width: 520px; padding: 40px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; animation: stIn .35s ease both;
}
/* на фото-кадрах текст їде вниз, як підпис у сторіз */
.tone-photo .st-body { justify-content: flex-end; height: 100%; padding-bottom: 68px; }
@keyframes stIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .st-body { animation: none; } }

.st-image { width: min(46vh, 320px); max-width: 78%; border-radius: 24px; }
.st-emoji { font-size: 5.25rem; line-height: 1; }
.st-big { font-family: var(--atmo-font-display); font-size: 7.5rem; font-weight: 800; line-height: 1; }
.st-kicker {
  font-family: var(--atmo-font-display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: .12em; text-transform: uppercase; opacity: .75;
}
.st-title {
  font-family: var(--atmo-font-display); font-weight: 800;
  font-size: clamp(1.875rem, 6vw, 2.625rem); line-height: 1.15; text-wrap: balance;
}
.st-text { margin: 0; font-size: 1.125rem; line-height: 1.5; opacity: .85; max-width: 42ch; }
.tone-photo .st-title,
.tone-photo .st-kicker { text-shadow: 0 2px 14px rgba(16, 22, 42, .6); }

.st-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.st-chip {
  background: var(--atmo-surface); border-radius: var(--radius-pill);
  padding: 10px 18px; font-weight: 600; font-size: 1.0625rem;
  box-shadow: 0 4px 16px rgba(30, 41, 59, .08);
}

.st-stats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.st-stat {
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px);
  border-radius: var(--radius-pill); padding: 8px 16px;
  font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums;
}

.st-cta { position: relative; z-index: 6; margin-top: 10px; }

/* Кнопка повторного перегляду в шапці результату */
/* «Як історію» — інший спосіб подивитись те саме, а не наступний крок.
   Поки обидві кнопки такту 1 були обведені синім, необов'язковий гак важив
   рівно стільки ж, скільки дорога вперед, — а в темній темі навіть більше,
   бо його заливка світліша за тло. Тепер вага різна: «Далі» веде,
   «Як історію» тихо пропонує інший вигляд того самого. */
.hero-story-btn {
  margin-top: 16px; padding: 10px 14px; font: inherit; font-size: 0.96875rem;
  font-weight: 600; color: var(--atmo-text-secondary); background: none;
  border: none; border-radius: var(--radius-pill);
  cursor: pointer;
}
.hero-story-btn:hover { background: var(--atmo-surface-hover); color: var(--atmo-text); }

/* Кнопка «Поділитись портретом» на панелі архетипу: тиха дія, не конкурує
   з жодним числом чи текстом поруч. */
.hero-share {
  margin-top: 14px; padding: 9px 18px; font: inherit; font-size: 0.9375rem;
  font-weight: 600; color: var(--atmo-primary); background: none;
  border: 1.5px solid var(--atmo-primary); border-radius: var(--radius-pill);
  cursor: pointer;
}
.hero-share:hover { background: var(--atmo-primary-light); }
.hero-share:disabled { opacity: .6; cursor: default; }

/* ── Навчання коштом держави (ваучерний блок) ──────────────────────────────
   М'яка жовта підкладка — той самий акцент, що й у нотатки про ваучер
   у маршруті: «жовте = гроші держави» читається наскрізно. */
.vch-panel { background: rgba(250, 236, 90, .16); }
.vch-title {
  display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
  font-size: var(--t-section); font-weight: var(--t-section-w);
}
.vch-lead { margin: 0 0 14px; color: var(--atmo-text-secondary); }
.vch-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.vch-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--atmo-surface); border: 1.5px solid var(--atmo-border);
  border-radius: var(--radius-button); padding: 12px 14px;
  font: inherit; cursor: pointer;
}
.vch-row:hover { border-color: var(--atmo-primary); }
.vch-row-main { flex: 1 1 auto; min-width: 0; }
.vch-name { font-weight: var(--t-object-w); font-size: var(--t-object); line-height: 1.3; }
.vch-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px;
  font-size: 0.875rem; color: var(--atmo-text-secondary);
  font-variant-numeric: tabular-nums;
}
.vch-mark { color: var(--atmo-primary); font-weight: 600; }
.vch-limited { color: var(--atmo-text-secondary); }
.vch-go { flex: 0 0 auto; color: var(--atmo-text-secondary); font-size: 1.125rem; }
.vch-steps { margin: 0 0 4px; padding-left: 22px; }
.vch-steps li { margin-bottom: 6px; font-size: 0.96875rem; color: var(--atmo-text-secondary); }

/* ── Реакція на п'ятірку одним тапом ───────────────────────────────────────
   Один рядок під картками: питання і п'ять реакцій. Після тапа картка
   замінюється рядком подяки, при наступних заходах не показується. */
.fvr-card,
.pm-card {
  background: var(--atmo-surface); border: 1.5px solid var(--atmo-border);
  border-radius: var(--radius-card); padding: 16px 18px; margin-top: 14px;
}
.fvr-title {
  font-family: var(--atmo-font-display); font-weight: 700; font-size: 1rem;
  margin-bottom: 10px; text-align: center;
}
.fvr-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* Без емодзі кнопка стала однорядковою: підпис бере на себе всю вагу,
   тому він більший, а падінги — з боків, а не згори-знизу. */
.fvr-opt {
  display: flex; align-items: center; justify-content: center;
  background: var(--atmo-surface); border: 1.5px solid var(--atmo-border);
  border-radius: var(--radius-button); padding: 11px 16px;
  font: inherit; cursor: pointer; color: var(--atmo-text-secondary);
}
.fvr-opt:hover { border-color: var(--atmo-primary); color: var(--atmo-primary); }
.fvr-lab { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
/* На вузькому екрані п'ять підписів не влазять в один рядок. Стискаємо
   падінги, щоб ряд лишався однією групою у два рядки, а не колонкою з
   п'яти — інакше він читається як ще один список рішень. */
@media (max-width: 480px) {
  .fvr-opt { padding: 9px 11px; }
  .fvr-lab { font-size: 0.875rem; }
}
.fvr-done {
  background: var(--atmo-primary-light); border-radius: var(--radius-card);
  padding: 13px 18px; margin-top: 14px; text-align: center;
  font-weight: 600; color: var(--atmo-primary-hover);
}

/* Міні-дзеркало після архетипу: та сама механіка одним тапом, що й реакція
   на п'ятірку, — людина вже знає цей патерн. Відповідь лишається на екрані
   назавжди: це її слово у діалозі з портретом, а не службова подяка. */
.pm-card { margin-bottom: 18px; }
.pm-done {
  background: var(--atmo-bg); border: 1.5px dashed var(--atmo-border);
  border-radius: var(--radius-card); padding: 13px 18px; margin-bottom: 18px;
  font-size: 0.96875rem; color: var(--atmo-text-secondary); text-align: center;
}

.qk-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.qk-card {
  background: var(--atmo-surface); border: 1.5px solid var(--atmo-border);
  border-left: 4px solid var(--atmo-primary);
  border-radius: var(--radius-card); padding: 16px 18px;
}
.qk-name { font-weight: 700; font-size: 1.1875rem; line-height: 1.25; }
.qk-take { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 10px; }
.qk-take-label { font-size: 0.9375rem; color: var(--atmo-text-secondary); }
.qk-facts {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  margin-top: 12px; font-size: 0.9375rem;
}
/* Зарплата — візуальний якір картки: велике число, поруч дрібне пояснення */
.qk-pay {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
}
.qk-pay-num {
  font-family: var(--atmo-font-display); font-weight: 700; font-size: 1.375rem;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.qk-pay-hint { font-size: 0.8125rem; color: var(--atmo-text-secondary); }
/* Ваучер — НЕЙТРАЛЬНИЙ, а не зелений.
   Зелений у мові ролей означає актив ЛЮДИНИ: те, що вже її і чого ніхто
   не забере. Право на ваучер мають не всі (45+, ВПО, ветерани, люди з
   інвалідністю), а при достроковому припиненні навчання гроші повертають.
   Умовне не можна кодувати як безумовне — краще сіре, ніж фальшиво-зелене.
   Сам ваучер як тема — окрема задача; тут лише знято невірний код. */
.qk-voucher {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--atmo-text-secondary); font-weight: 600;
}
.qk-tr { color: var(--atmo-text-secondary); }
.qk-below { margin-top: 9px; font-size: 0.875rem; color: var(--atmo-text-secondary); }

/* Реакція на професію. Дві дії рівної ваги: тут людина не «оцінює тест»,
   а відсіює й відкладає — обидва варіанти однаково нормальні. */
/* Одна дія на картку: кнопка більше не тягнеться на всю ширину —
   на пів картки вона читалась би як головна дія екрана, а це тихе
   відхилення. Тримається праворуч, під фактами про професію. */
.qk-acts { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.qk-act {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--atmo-surface); border: 1.5px solid var(--atmo-border);
  border-radius: var(--radius-button); padding: 10px 14px;
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--atmo-text-secondary);
  cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.qk-act:hover { border-color: var(--atmo-primary); color: var(--atmo-primary); }
.qk-act.yes.on {
  background: var(--atmo-accent-green); border-color: transparent;
  color: var(--entry-fast-text);
}
/* «Цікаво» — це відповідь, а не властивість професії. Усі відповіді
   в продукті сині; зелений тут обіцяв би, що робота вже твоя. */
.qk-card.qk-on { border-left-color: var(--atmo-primary); }

/* Відхилена професія згортається в рядок: більше не забирає уваги,
   але рішення видно й можна повернути. */
.qk-card.qk-off { border-left-color: var(--atmo-border); background: var(--atmo-bg); }
.qk-off-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.qk-off-name { flex: 1 1 auto; font-size: 1rem; color: var(--atmo-text-secondary); }
.qk-undo {
  flex: 0 0 auto; background: none; border: none; padding: 0; font: inherit;
  font-size: 0.9375rem; font-weight: 600; color: var(--atmo-primary); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.qk-why { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 12px; }
.qk-why-label { font-size: 0.875rem; color: var(--atmo-text-secondary); width: 100%; }
/* Обраний стан — рамкою, не заливкою: блакитне тло належить ОПОРІ. */
.dm-reason.on {
  border-color: var(--atmo-primary); border-width: 2px;
  color: var(--atmo-primary); font-weight: 600;
}

/* ── Смужка фактів на картці професії ────────────────────────────────────
   П'ять чисел, за якими ухвалюється рішення, одним поглядом. Раніше вони
   були розсипані по чотирьох панелях, і щоб зібрати відповідь, картку
   доводилось прогортати всю. */
.fstrip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--atmo-border);
  border: 1px solid var(--atmo-border); border-radius: var(--radius-card);
  overflow: hidden; margin-bottom: 16px;
}
.fs-item { background: var(--atmo-surface); padding: 14px 16px; }
.fs-k {
  font-size: 0.78125rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--atmo-text-secondary); margin-bottom: 5px;
}
.fs-v { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.fs-v.good { color: var(--entry-fast-text); }

/* Дві дії наприкінці картки — без панелі й пояснень навколо */
.detail-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.detail-acts .button { width: auto; max-width: none; margin: 0; flex: 1 1 220px; }

/* ── Згортані блоки картки ───────────────────────────────────────────────
   За замовчуванням згорнуте все, крім того, що людина тут РОБИТЬ.
   Швидкий шлях за замовчуванням, глибина — на відстані одного тапу. */
.fold { padding: 0; }
.fold-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; background: none; border: none; font: inherit; color: inherit;
  padding: 16px 20px; cursor: pointer; text-align: left;
}
.fold-head:hover { background: var(--atmo-surface-hover); }
.fold-texts { min-width: 0; }
.fold-title { font-size: var(--t-object); font-weight: var(--t-object-w); line-height: 1.25; }
.fold-note { font-size: 0.9375rem; color: var(--atmo-text-secondary); margin-top: 3px; }
.fold-arrow { flex: 0 0 auto; color: var(--atmo-primary); font-size: 1.125rem; }
.fold-body { padding: 0 20px 18px; }
/* Тихе згортання: та сама форма, менша вага. Для чистого тла — контексту,
   який людина розкриває сама, якщо схоче. На екрані питання заголовок
   у 19px був би другим за гучністю після самого питання. */
.fold-quiet { margin-bottom: 16px; }
/* ── Двері хвоста ────────────────────────────────────────────────────────
   Та сама форма згортання, що на детальці — жодної нової мови. Різниця
   лише в тому, що двері стоять переліком і читаються як список кімнат:
   між ними менше повітря, ніж між панелями, і вони не мають тіні, бо
   тінь робила б із кожних окремий об'єкт замість одного переліку. */
#zone-why > .fold.door { margin-bottom: 8px; }
/* Двері мають бути дверима, а не картками.
   По 82px кожні вони самі створювали скрол там, де мав бути компактний
   перелік кімнат: чотири двері з'їдали 700px — майже цілий екран на те,
   щоб просто перелічити, куди можна зайти. Тепер ~62px: удвічі щільніше
   за картку і все ще вдвічі більше за мінімальну ціль для пальця. */
.fold.door { box-shadow: none; }
.fold.door .fold-head { padding: 12px 18px; align-items: flex-start; }
/* Двері хвоста мали 17px проти 19px на детальці проти 15px у тихому
   згортанні — три кеглі на один компонент. Тепер спільний рівень. */
.fold.door .fold-title { line-height: 1.3; }
/* Підпис дверей — найкоротша відповідь на їхнє питання, а не анонс.
   Читабельний, але не сперечається з назвою. */
.fold.door .fold-note { font-size: 0.90625rem; line-height: 1.4; margin-top: 2px; }

.fold-quiet .fold-head { padding: 11px 16px; }
/* Тихе згортання — не назва об'єкта, а керування в тлі: рівень ЗМІСТ,
   вага дії. */
.fold-quiet .fold-title { font-size: var(--t-body); font-weight: var(--t-act-w); color: var(--atmo-text-secondary); }
/* Значки (стрілка дверей, хрестик «не моє») тримаємо на одному розмірі:
   це орнамент, і двох різних його калібрів на екрані бути не має. */
.fold-quiet .fold-arrow { font-size: 1rem; color: var(--atmo-text-secondary); }
.fold-quiet .fold-body { padding: 0 16px 14px; }
/* Панелі всередині згортання не мають малювати другу рамку поверх першої */
.fold-body .panel { border: none; box-shadow: none; padding: 0; margin: 0 0 14px; }

/* ── Місток між профілем і рекомендаціями ────────────────────────────────
   Стоїть першим у розділі «Чому саме ці варіанти» і називає конкретні
   професії. Без нього розділ читався як загальний текст про людину,
   не пов'язаний із тим, що їй порадили. */
.why-bridge {
  background: var(--atmo-surface); border: 1.5px solid var(--atmo-border);
  border-left: 4px solid var(--atmo-primary);
  border-radius: var(--radius-card); padding: 18px 20px; margin-bottom: 18px;
}
.wb-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--atmo-primary); margin-bottom: 10px;
}
.wb-text { margin: 0 0 10px; font-size: 1.0625rem; line-height: 1.55; max-width: 62ch; }
.wb-text:last-child { margin-bottom: 0; }

/* Відхилила всі три. Текст нічого не стверджує про людину — лише про сет. */
.qk-miss {
  background: var(--atmo-surface-hover); border-radius: var(--radius-button);
  padding: 13px 15px; margin-bottom: 18px;
  font-size: 0.9375rem; line-height: 1.5; color: var(--atmo-text-secondary);
}
.qk-note {
  margin-top: 14px; font-size: 0.9375rem; line-height: 1.5;
  color: var(--atmo-text-secondary);
}

/* ── Заміна професії ─────────────────────────────────────────────────────
   Рядок замість системного confirm(). Нативний діалог блокує сторінку
   й вимагає прочитати текст, перш ніж щось станеться, — для людини, яка
   звикла швидко тикати й дивитись, що буде, це стоп-кран. Тут дія вже
   сталася, а поруч лежить «Повернути». */
.dm-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--atmo-surface); border: 1.5px solid var(--atmo-border);
  border-left: 4px solid var(--atmo-primary);
  border-radius: var(--radius-card); padding: 14px 16px; margin: 0 0 14px;
}
.dm-body { flex: 1 1 auto; min-width: 0; }
.dm-head {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  font-size: 1rem; line-height: 1.45;
}
.dm-undo {
  background: none; border: none; padding: 0; font: inherit; font-size: 0.9375rem;
  font-weight: 600; color: var(--atmo-primary); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; flex: 0 0 auto;
}
.dm-ask { font-size: 0.9375rem; color: var(--atmo-text-secondary); margin-top: 10px; }
.dm-reasons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.dm-reason {
  background: var(--atmo-bg); border: 1px solid var(--atmo-border);
  border-radius: var(--radius-pill); padding: 6px 13px;
  font: inherit; font-size: 0.9375rem; color: var(--atmo-text-secondary); cursor: pointer;
  transition: border-color .12s, color .12s;
}
.dm-reason:hover { border-color: var(--atmo-primary); color: var(--atmo-primary); }
.dm-x {
  flex: 0 0 auto; background: none; border: none; padding: 2px 4px;
  font: inherit; font-size: 1rem; color: var(--atmo-text-secondary); cursor: pointer;
}

/* ── Дії наприкінці результату ───────────────────────────────────────────
   Одна головна, три тихі поруч, зворотний зв'язок текстом. Раніше тут було
   п'ять однакових кнопок плюс окрема картка вакансій: коли все однакової
   ваги, головного нема. */
.footer-acts { display: flex; flex-direction: column; gap: 14px; }
.ft-primary { width: 100%; max-width: none; margin: 0; }
.ft-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ft-row .button { width: auto; max-width: none; margin: 0; flex: 1 1 180px; }
.ft-feedback {
  align-self: flex-start; background: none; border: none; padding: 0;
  font: inherit; font-size: 0.9375rem; color: var(--atmo-text-secondary); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.ft-feedback:hover { color: var(--atmo-text-secondary); }

/* Той самий сигнал, сказаний один раз над списком, коли він стоїть
   майже на всіх картках. */
/* Стрічка про підтверджені напрями була суцільною жовтою плашкою на всю
   ширину — найгучніший об'єкт над картками, хоч це нагадування, а не
   висновок. Той самий прийом, що вже застосований до «Ти не з нуля» й до
   опори в маршруті: колір лишається, вага падає до смуги збоку. */
.dir-note {
  display: flex; align-items: center; gap: 8px;
  background: none; border-left: 3px solid var(--own-text);
  border-radius: 0; padding: 2px 0 2px 14px; margin: 0 0 18px;
  font-size: var(--t-quiet); color: var(--atmo-text-secondary);
}
.dir-note .ic { color: var(--own-text); }
/* Чіпи з балами осей і рангові бейджі «ТОП / СИЛЬНИЙ» зі згорнутої картки
   прибрані — разом із їхніми стилями. Бали осей живуть на екрані професії
   й у розділі «Чому саме ці варіанти», а замість рангу на картці стоїть
   сам відсоток збігу — тепер тлом-фактом у рядку .prof-fact. */

/* Блок стилю мислення: фото архетипу зліва, текст поруч на всю решту ширини.
   Обмеження .prose тут навмисно не застосовуємо — абзац і так у колонці. */
.style-block { display: flex; gap: 20px; align-items: flex-start; }
.style-block .archetype {
  width: 280px; height: 280px; flex: 0 0 280px;
  border-radius: var(--radius-card); object-fit: cover;
  box-shadow: var(--shadow-card);
}
@media (max-width: 600px) { .style-block .archetype { width: 100%; height: auto; max-width: 300px; flex: none; align-self: center; } }
.style-block > div { flex: 1 1 auto; min-width: 0; }
.style-block .atitle { font-weight: 700; font-size: 1.25rem; margin-bottom: 8px; }
.lead { font-size: 1.0625rem; line-height: 1.65; width: 100%; }
@media (max-width: 600px) { .style-block { flex-direction: column; } }

/* Перелік наступних кроків */
ol.next { margin: 0 0 20px; padding-left: 20px; }
ol.next li { margin-bottom: 8px; }

/* Шапка екрана деталей: той самий рядок «відсоток + назва», що й у картці */
.panel .cardhead .pc {
  font-size: 2.5rem; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--atmo-text); flex: 0 0 auto;
}
.panel .cardhead .pc.high { color: var(--match-high); }
.panel .cardhead h1 { font-size: var(--t-main); line-height: 1.2; }
.panel .cardhead .badges { margin-top: 10px; }

/* інфо-блок */
.info {
  background: var(--atmo-surface);
  border: 1px solid var(--atmo-border);
  border-radius: var(--radius-button);
  padding: 16px; margin-bottom: 16px;
  display: flex; gap: 12px; align-items: flex-start;
  font-style: italic; color: var(--atmo-text-secondary); font-size: 1rem;
}
.info .icon { font-style: normal; font-size: 1.125rem; line-height: 1.2; }

/* ── плейсхолдери під фото ───────────────────────────────────────────── */
.photo {
  background: var(--atmo-border);
  border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--atmo-text-secondary); font-size: 1.75rem;
  overflow: hidden;
}
.photo.square { aspect-ratio: 1 / 1; width: 100%; }
.photo.portrait { aspect-ratio: 4 / 3; width: 100%; margin-bottom: 20px; }
.photo.wide { aspect-ratio: 16 / 9; width: 100%; margin-bottom: 20px; }
.photo.thumb { width: 56px; height: 56px; flex: 0 0 56px; border-radius: var(--radius-button); font-size: 1.25rem; }

/* ── показники профілю ───────────────────────────────────────────────── */
/* Плашка на кожен показник: іконка, назва, велике число, рядок пояснення
   і смужка заповнення. Компактніше за суцільні бари й читається як картка. */
.plate {
  border-radius: var(--radius-button);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--atmo-surface);
  border: 1px solid var(--atmo-border);
}
.plate .row { display: flex; align-items: baseline; gap: 10px; }
.plate .ico { font-size: 1.125rem; }
.plate .pname { font-weight: 600; flex: 1 1 auto; }
.plate .score { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
.plate .about { font-size: 0.9375rem; color: var(--atmo-text-secondary); margin-top: 6px; }
.plate .track { height: 6px; border-radius: 999px; background: var(--atmo-border); margin-top: 10px; overflow: hidden; }
.plate .track > span { display: block; height: 100%; border-radius: 999px; }
.plate .star { color: var(--atmo-primary); font-size: 0.9375rem; font-weight: 600; }

.plate.high { background: rgba(212, 245, 196, .45); border-color: transparent; }
.plate.high .score { color: var(--level-high-text); }
.plate.high .track > span { background: var(--level-high-text); }

.plate.mid .score { color: var(--atmo-text-secondary); }
.plate.mid .track > span { background: var(--atmo-text-muted); }

.plate.low { background: rgba(246, 220, 214, .5); border-color: transparent; }
.plate.low .score { color: var(--level-low-text); }
.plate.low .track > span { background: var(--level-low-text); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.9375rem; color: var(--atmo-text-secondary); margin-top: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; font-style: normal; }

/* ── цінності (дзеркало) ─────────────────────────────────────────────── */
.value-row { margin-bottom: 14px; }
.value-row .label { display: flex; justify-content: space-between; gap: 12px; font-size: 1rem; margin-bottom: 6px; }
.bar { height: 8px; background: var(--bar-empty); border-radius: 4px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--bar-role); border-radius: 4px; }
/* Кольоровий бар = «це ти позначив як важливе». Зірочка більше не потрібна:
   колір каже те саме, але без зайвого символу в підписі. */
.value-row.accent-bar .label { font-weight: 600; }
.value-row.accent-bar .bar > span { background: var(--bar-you); }

/* вибір трьох цінностей */
.pick { position: relative; padding-right: 52px; }
.pick .check {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--atmo-border);
}
.pick.picked .check { background: var(--atmo-primary); border-color: var(--atmo-primary); }
.pick.picked .check::after {
  content: ''; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid var(--on-primary); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── напрями ─────────────────────────────────────────────────────────── */
.directions { display: grid; gap: 16px; }
@media (min-width: 768px) { .directions { grid-template-columns: 1fr 1fr; align-items: start; } }
.direction {
  background: var(--atmo-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.direction > button {
  display: block; width: 100%; text-align: left; background: none;
  border: none; padding: 20px 24px; font: inherit; color: inherit; cursor: pointer;
}
.direction .title { font-weight: 600; font-size: 1.125rem; }
.direction .expl { color: var(--atmo-text-secondary); font-size: 1rem; margin-top: 6px; }
.direction .body { padding: 0 24px 20px; }
.direction .row { padding: 12px 0; border-top: 1px solid var(--atmo-border); display: flex; gap: 12px; align-items: center; }
.direction .row .r-name { font-weight: 500; }

/* ── список усіх професій ────────────────────────────────────────────── */
.list { display: grid; gap: 0; }
@media (min-width: 768px) { .list { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.list-row { padding: 14px 0; border-bottom: 1px solid var(--atmo-border); display: flex; gap: 12px; align-items: center; }
.list-row .n { font-weight: 500; }
.list-row .pc { margin-left: auto; color: var(--atmo-primary); font-weight: 600; font-size: 0.875rem; }

/* ── форма фідбеку ───────────────────────────────────────────────────── */
.row10 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
@media (min-width: 768px) { .row10 { grid-template-columns: repeat(10, 1fr); } }
.row10 button {
  padding: 14px 0; border: 1px solid var(--atmo-border); border-radius: var(--radius-button);
  background: var(--atmo-surface); font: inherit; font-weight: 500; cursor: pointer;
  color: var(--atmo-text);
}
.row10 button.picked { border-color: var(--atmo-primary); border-width: 2px; color: var(--atmo-primary); font-weight: 700; }

label.field { display: block; margin: 20px 0 8px; font-weight: 600; font-size: 1.0625rem; }
input[type=text], input[type=number], textarea {
  width: 100%; padding: 14px 16px; font: inherit;
  border: 1px solid var(--atmo-border); border-radius: var(--radius-input);
  background: var(--atmo-surface); color: var(--atmo-text);
}
input:focus, textarea:focus { outline: 2px solid var(--atmo-primary-light); border-color: var(--atmo-primary); }
textarea { min-height: 110px; resize: vertical; }

/* ── святкування й тип ───────────────────────────────────────────────── */
.done { text-align: center; }
.done .big { font-size: 3.5rem; margin-bottom: 8px; }
.type-letters {
  font-size: 3.25rem; font-weight: 700; letter-spacing: 2px;
  margin: 4px 0; color: var(--atmo-primary);
}

/* ── Стартовий екран ──────────────────────────────────────────────────────
   Дві колонки: текст ліворуч, ілюстрація праворуч. На вузькому екрані
   ілюстрація йде під текст, щоб перший погляд одразу падав на заголовок. */
main.welcome { max-width: 1040px; }

.wgrid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) { .wgrid { grid-template-columns: 1fr 0.85fr; gap: 48px; } }

.wlead { color: var(--atmo-text-secondary); margin: 0 0 20px; max-width: 46ch; }

/* факти про тест — окремими чипсами, а не одним реченням */
.wchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.wchip {
  background: var(--atmo-surface); border: 1px solid var(--atmo-border);
  border-radius: var(--radius-pill); padding: 7px 14px;
  font-size: 1rem; font-weight: 600; color: var(--atmo-text-secondary);
}

/* як відповідати: кожен пункт — окремий рядок із галочкою */
.wrules {
  background: var(--atmo-surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 6px 20px; margin: 26px 0 0;
}
.wrule {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--atmo-border);
  font-size: 1.0625rem; line-height: 1.5;
}
.wrule:last-child { border-bottom: none; }
.wtick {
  flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; background: var(--atmo-primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 700;
}

.wstart { max-width: 380px; }
.wsocial {
  margin-top: 12px; font-size: 1rem; color: var(--atmo-text-secondary);
  text-align: center; max-width: 380px;
}

/* ілюстрація: плавна поява, щоб вхід у тест відчувався подією */
.wart { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.wimg {
  width: 100%; max-width: 380px; border-radius: var(--radius-card);
  display: block; animation: wfade .7s ease both;
}
@keyframes wfade {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* тизер результату: три картки АтмоСил, поки що розмиті */
.wteaser { width: 100%; max-width: 380px; animation: wfade .7s .15s ease both; }
.wteaser-note {
  text-align: center; font-size: 0.9375rem; color: var(--atmo-text-secondary); margin-top: 10px;
}

/* На вузькому екрані ілюстрація компактніша: інакше кнопка «Почати тест»
   і тизер їдуть надто далеко вниз. */
@media (max-width: 859px) {
  .wimg { max-width: 240px; }
  .wteaser { max-width: 320px; }
}

/* ── Одна група навичок — власний екран тесту ────────────────────────────
   Групи більше не живуть в акордеоні всі разом: кожна тепер окремий крок
   у загальній послідовності тесту, розкиданий між психологічними блоками.
   Іконка в кольоровому колі — щоб екран впізнавався з першого погляду. */
.skg-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 4px; }
.skg-icon {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.skg-icon .ic { width: 24px; height: 24px; }
.skg-kicker {
  font-size: var(--t-label); font-weight: var(--t-label-w); letter-spacing: .05em; text-transform: uppercase;
  color: var(--atmo-text-secondary); margin-bottom: 2px;
}
.skg-list { display: grid; gap: 8px; margin: 16px 0 20px; }
/* Рядки чек-листа щільніші за звичайну опцію й без тіні.
   Тінь і подвійний відступ (gap 8 + margin 12) робили з переліку навичок
   стос окремих карток: кожен рядок виглядав як самостійне рішення, і
   п'ять-дев'ять таких читались як стіна. Тут рішення дрібне й однотипне,
   тому й форма — рядок списку, а не картка. */
/* Розмір дотику НЕ чіпаємо: сусіднє правило вище задає більші відступи
   свідомо — на телефоні палець влучає не так точно, як миша, а аудиторія
   45+ це відчуває першою. Прибираємо лише те, що робило зі списку стос
   карток: тінь під кожним рядком і другий відступ поверх grid-gap. */
.skg-list .option.pick { margin-bottom: 0; box-shadow: none; }
.skg-list .option.pick + .option.pick { margin-top: 0; }
/* Друга частина великої групи: тихий підпис, щоб та сама назва вдруге
   не читалась як «я застряг». */
.skg-part {
  margin-top: 4px; font-size: 0.875rem; color: var(--atmo-text-secondary);
}

/* ── Кільце готовності в блоці «Твоя готовність» ──────────────────────── */
.rd-head { display: flex; align-items: center; gap: 14px; }
.rd-texts { flex: 1 1 auto; min-width: 0; }
.ringwrap { flex: 0 0 48px; width: 48px; }
.ring { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--bar-empty); stroke-width: 6; }
.ring-fill { fill: none; stroke-width: 6; stroke-linecap: round; }
.ring.strong .ring-fill { stroke: var(--bar-strong); }
.ring.normal .ring-fill { stroke: var(--bar-normal); }
.ring.weak   .ring-fill { stroke: var(--bar-weak); }
.ring-num {
  font-size: 0.9375rem; font-weight: 700; fill: var(--atmo-text);
  transform: rotate(90deg); transform-origin: 24px 24px;
}

/* ── Знак питання біля терміна ────────────────────────────────────────── */
.qmark {
  margin-left: 6px; width: 18px; height: 18px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--atmo-primary); color: var(--on-primary);
  font-size: 0.78125rem; font-weight: 700; line-height: 18px;
}
.narrow-sheet { max-width: 520px; }

/* ── Блок «перейти до вакансій» ───────────────────────────────────────── */
.jobs {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  justify-content: space-between;
}
.jobs-title { font-weight: 600; }
.jobs-note { font-size: 1rem; color: var(--atmo-text-secondary); margin-top: 4px; }
.jobs-btn { width: auto; max-width: none; text-decoration: none; text-align: center; flex: 0 0 auto; }
@media (max-width: 600px) { .jobs-btn { width: 100%; } }

/* ── Фільтр «за ваучером» у списку інших професій ─────────────────────── */
.filter.voucher { border-color: var(--atmo-primary); color: var(--atmo-primary); font-weight: 600; }
.filter.voucher.on { background: var(--atmo-primary); color: var(--on-primary); }

/* Найсильніший критерій у чіпах картки професії */

/* Картка тексту за парою цінностей: та сама серія, що «Провідна комбінація»
   зверху і «Що з цим робити далі» знизу, тому теж з іконкою й акцентом. */
.panel.valuecombo {
  border: 1px solid rgba(46, 130, 87, .30);
  border-left: 4px solid var(--atmo-primary);
  position: relative;
}
.valuecombo .vc-icon { font-size: 1.375rem; margin-bottom: 6px; }

/* На телефоні статус переїжджає під номер, а не забирає ширину в тексту:
   інакше мітка «✨ Збігається…» ламається на три рядки в вузькій колонці. */
@media (max-width: 600px) {
  .prof { flex-wrap: wrap; padding: 18px; gap: 12px; }
  .prof .status { order: 3; margin-left: auto; }
  .prof .body { flex: 1 1 100%; order: 2; }
  .prof .num { order: 1; }
  .confirmed-note { font-size: 0.875rem; padding: 4px 10px; }
}

/* ── Бейдж збігу під ним підпис, що це за число ───────────────────────── */
.status-note { font-size: 0.875rem; color: var(--atmo-text-secondary); margin-top: 4px; }

/* ── Ваучер як дія ────────────────────────────────────────────────────── */
.voucher-cta {
  display: inline-block; margin-top: 2px;
  color: var(--atmo-primary); font-weight: 600; font-size: 1.0625rem;
  text-decoration: none; border-bottom: 1.5px solid currentColor;
}
.voucher-cta:hover { opacity: .8; }
.fnote { font-size: 0.875rem; color: var(--atmo-text-secondary); margin-top: 4px; }

/* ── «Варто знати»: бурштиновий акцент, відмінний від зеленого ────────── */
.panel.worth {
  background: rgba(251, 191, 36, .10);
  border: 1px solid rgba(217, 119, 6, .35);
  border-left: 4px solid #D97706;
}
.worth-head { display: flex; align-items: center; gap: 10px; }
.worth-icon { font-size: 1.25rem; }
.panel.worth h3 { color: var(--warn-text); }

/* ── Стартовий екран: більший кегль ──────────────────────────────────────
   Це перший екран і єдиний, який людина читає «здалеку», ще не втягнувшись
   у тест, тому текст тут крупніший за решту інтерфейсу. */
main.welcome h1 { font-size: var(--t-cover); line-height: 1.15; }
.wlead { font-size: 1.125rem; line-height: 1.6; }
.wchip { font-size: 1.0625rem; padding: 9px 16px; }
.wrule { font-size: 1.0625rem; padding: 16px 0; gap: 14px; }
.wtick { flex: 0 0 24px; width: 24px; height: 24px; font-size: 0.875rem; }
.wstart { font-size: 1.125rem; padding: 16px 24px; max-width: 400px; }
.wsocial { font-size: 1.0625rem; max-width: 400px; }
.wteaser-note { font-size: 1rem; }

@media (max-width: 600px) {
  main.welcome h1 { font-size: 1.875rem; }
  .wlead { font-size: 1.125rem; }
  .wrule { font-size: 1.0625rem; }
}



/* ── Свідомий вибір трьох цінностей ──────────────────────────────────── */
.chosen-note {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--atmo-border);
}
.cn-label {
  font-size: var(--t-label); font-weight: var(--t-label-w);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--atmo-text-secondary);
}
.cn-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.cn-chip {
  background: var(--atmo-primary-light); color: var(--atmo-primary);
  border-radius: var(--radius-pill); padding: 6px 14px;
  font-size: 1rem; font-weight: 600;
}
.cn-text { margin: 0; font-size: 1rem; color: var(--atmo-text-secondary); max-width: 62ch; }

/* ── Зонування екранів тесту ─────────────────────────────────────────────
   Питання, варіанти відповіді й прогрес лежать в одній видимій області.
   Причина не декоративна: коли текст питання просто висить на фоні, око
   щоразу заново шукає, де починається і де закінчується поточний крок.
   Спільна рамка (принцип «спільної області» в гештальті) склеює їх у один
   об'єкт, і людина бачить рівно одну задачу за раз. Прогрес усередині тієї
   ж рамки показує, що це той самий крок, а не окремий елемент сторінки. */
body.zoned #quiz {
  /* Ширина СТАЛА, а не за вмістом. Було: auto-поля в flex-колонці
     вимикають розтягування, і картка стискалась під довжину питання —
     заміряно на шести питаннях RIASEC: ширина 535…771, лівий край гуляв
     на 119px. Через це хрестики й сердечка на кожному питанні стояли в
     новому місці, і в них доводилось цілитись заново. */
  width: 100%;
  max-width: 860px;
  margin: 28px auto 48px;
  background: var(--atmo-surface);
  border-radius: 24px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
body.zoned #progress {
  max-width: none; width: auto;
  margin: 0; padding: 16px 28px 2px;
}
body.zoned main#screen,
body.zoned main.narrow {
  max-width: none;
  margin: 0;
  padding: 6px 28px 24px;
}
@media (max-width: 600px) {
  /* на телефоні лишаємо поля з боків, інакше картка зливається з екраном */
  /* на телефоні поля з боків: width:auto, інакше 100% плюс поля дає
     горизонтальне переповнення */
  body.zoned #quiz { width: auto; margin: 12px 12px 24px; border-radius: var(--radius-card); }
  body.zoned #progress { padding: 18px 20px 4px; }
  body.zoned main#screen, body.zoned main.narrow { padding: 6px 20px 24px; }
}

/* Варіанти відповіді: більша площа дотику й чіткіший стан вибору —
   на телефоні палець влучає не так точно, як миша. */
body.zoned .option { padding: 14px 18px; font-size: 1.0625rem; line-height: 1.4; margin-bottom: 8px; }
body.zoned .option + .option { margin-top: 8px; }

/* ── «Що потрібно вміти»: трекер ─────────────────────────────────────────
   Кожен пункт можна натиснути. Позначене стає зеленим із галочкою, лічильник
   і смужка вгорі показують масштаб: скільки з цієї роботи вже знайоме. */
.panel.steps { border-left: 4px solid var(--atmo-primary); }
.steps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.steps h3 { font-size: var(--t-section); font-weight: var(--t-section-w); }
.steps-count { font-size: 0.9375rem; color: var(--atmo-text-secondary); white-space: nowrap; }
.steps-count .sc-num { font-weight: 700; color: var(--atmo-primary); font-size: 1.0625rem; }
.steps-track {
  height: 8px; border-radius: 999px; background: var(--bar-empty);
  margin: 14px 0 4px; overflow: hidden;
}
.steps-track span {
  display: block; height: 100%; width: 0;
  background: var(--atmo-primary); border-radius: 999px;
  transition: width .25s ease;
}
.steps-lead { margin: 12px 0 16px; color: var(--atmo-text-secondary); font-size: 1rem; max-width: 60ch; }
/* Підводка трекера — це заклик до дії, а не примітка.
   Клас власний, а не спільний .big: службовий .big нижче у файлі — це
   зелене коло 72×72 для екранів «дякуємо», і воно накладало на цей абзац
   розміри й фон, перетворюючи його на кружок. */
.steps-lead-strong {
  font-size: 1.0625rem; line-height: 1.5; color: var(--atmo-text-secondary);
  font-weight: 400; margin: 10px 0 20px;
}

/* Кроки йдуть драбинкою: кожен наступний трохи правіше й нижче, між ними —
   лінія. Так список читається як шлях із початком і кінцем, а не як перелік
   вимог. Зсув росте лише до п'ятого кроку, інакше довгі списки поїхали б
   за край екрана. */
.steplist { list-style: none; margin: 0; padding: 0; display: block; }
.steplist li { position: relative; }
.steplist li + li { margin-top: 10px; }

/* лінія, що з'єднує кружечки сусідніх кроків */
.steplist li + li::before {
  content: ''; position: absolute;
  left: -12px; top: -14px; width: 2px; height: 22px;
  background: var(--atmo-border); border-radius: 2px;
}
.steplist li.on + li::before,
.steplist li.on::before { background: var(--level-high-text); opacity: .35; }


.step {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--atmo-bg);
  border: 1.5px solid transparent; border-radius: var(--radius-button);
  padding: 14px 16px; font-size: 1.0625rem; line-height: 1.45;
  cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s, transform .06s;
}
.step:hover { border-color: var(--atmo-primary); }
.step:active { transform: scale(.995); }
.step.on { background: var(--atmo-accent-green); border-color: transparent; }
.stepbox {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  /* Не білий літерал, а поверхня картки: у темній темі білий кружечок
     світився плямою, а синій номер на ньому падав до 2,70:1. */
  background: var(--atmo-surface); color: var(--atmo-primary);
  border: 1.5px solid var(--atmo-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9375rem; font-weight: 700;
}
.step.on .stepbox { background: var(--level-high-text); border-color: transparent; color: #fff; }
.steptext { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.steps-summary { margin: 16px 0 0; font-size: 1rem; font-weight: 500; color: var(--atmo-text); }

/* ── Зонування сторінки результатів ──────────────────────────────────────
   Довгий звіт без поділу читається як суцільна стрічка: людина не розуміє,
   скільки ще попереду, і не може повернутись до потрібного шматка. Тому
   чотири зони з власними заголовками й навігація, яка підсвічує поточну. */
.znav {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 0 12px; margin-bottom: 8px;
  background: linear-gradient(180deg, rgba(234, 242, 255, .96) 70%, rgba(234, 242, 255, 0));
  backdrop-filter: blur(6px);
}
.znav-item {
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-size: 0.9375rem; font-weight: 600; text-decoration: none;
  color: var(--atmo-text-secondary); background: rgba(255, 255, 255, .75);
  border: 1px solid transparent; transition: background .15s, color .15s;
}
.znav-item:hover { color: var(--atmo-primary); }
/* Поточна зупинка — чорнилом і крапкою на лінії, а не синьою заливкою.
   Залитий синій у продукті означає справжнє рішення; на навігації він
   казав «тут теж треба щось вирішити», хоч карта нічого не вирішує. */
.znav-item.on {
  background: var(--atmo-surface); color: var(--atmo-text);
  font-weight: 700; box-shadow: inset 0 -2px 0 0 var(--atmo-text);
}
/* Зупинка, до якої ще рано: видно, що попереду, і видно, що не зараз. */
.znav-item.znav-locked {
  color: var(--atmo-text-secondary); opacity: .55; cursor: default;
}
.znav-item.znav-locked:hover { background: var(--atmo-surface); }

.zone { margin: 0 0 56px; scroll-margin-top: 80px; }
.zone-head { margin: 0 0 20px; }
.zone-title {
  font-family: var(--atmo-font-display);
  font-size: var(--t-section); line-height: 1.25; font-weight: var(--t-section-w); margin: 0;
  letter-spacing: -.02em;
}
.zone-note { margin: 8px 0 0; color: var(--atmo-text-secondary); font-size: 1.0625rem; max-width: 60ch; }
/* Заголовки всередині зони — того самого рівня РОЗДІЛ, що й заголовок
   зони: обидва називають блок, і різниця між ними в положенні, а не в
   кеглі. Це правило старше за .zone-title, тож саме воно й тримало
   зону на 21px попри токен. */
.zone h2 { font-size: var(--t-section); font-weight: var(--t-section-w); margin-top: 28px; }

@media (max-width: 600px) {
  .znav { gap: 4px; padding: 8px 0 10px; overflow-x: auto; flex-wrap: nowrap; }
  .znav-item { white-space: nowrap; font-size: 0.875rem; padding: 7px 13px; }
  .zone { margin-bottom: 40px; }
  .zone-title { font-size: var(--t-section); }
  .zone-note { font-size: 1rem; }
}

/* Кільце готовності зі згорнутої картки прибране разом зі стилями: поруч
   із ним стояв відсоток збігу, і два кола з різними числами читались як
   одне. Трекер лишився на екрані професії (.steplist). */

.print-btn { margin-top: 12px; }

/* ── Друк ────────────────────────────────────────────────────────────────
   На папері немає ні наведення, ні кліків: усе інтерактивне ховаємо,
   кольорові підкладки прибираємо, щоб не з'їдати тонер, а картки не
   розриваємо між сторінками. */
@media print {
  body { background: #fff !important; }
  .znav, .more-profs, .print-btn, .actions, .jobs-btn, #progress,
  .rd-head .rd-arrow, .rd-hint, .farrow, .flink, .back,
  .no-print, .hero-story-btn, .hero-share, .fvr-card, .pm-card, .stories { display: none !important; }
  .advisor-card { border-color: #999 !important; }
  main, main.narrow { max-width: none; padding: 0; }
  .panel, .prof, .force, .card, .zone { box-shadow: none !important; break-inside: avoid; }
  .zone { margin-bottom: 24px; }
  .zone-title { font-size: 20pt; }
  .force { border: 1px solid #999 !important; background: #fff !important; }
  .prof { border-left: 3px solid #999; }
  .rd-body { display: block !important; }
  /* Такт сил на екрані займає весь екран, щоб бути однією думкою. На папері
     ця висота перетворилась би на порожню сторінку перед списком. */
  .takt-forces { min-height: 0 !important; padding: 0 !important; gap: 12px; }
  .tf-list { flex-direction: row !important; max-width: none !important; }
  .tf-item:hover { background: none !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* ── Об'єм: зони як «подушки» над фоном ──────────────────────────────────
   Раніше блоки просто лежали на градієнті й зливались із ним. Тепер кожна
   зона — напівпрозора біла поверхня з розмиттям і м'якою тінню, а вже на
   ній лежать білі картки. Виходить три шари: фон → поверхня зони → картка.
   Саме різниця між шарами, а не самі кольори, дає відчуття глибини. */
/* Зона — це групування, а не предмет.
   Була напівпрозорою білою панеллю з блюром і подвійною тінню, а всередині
   неї лежали білі картки з власними тінями. Виходило три майже однакові
   світлі шари один в одному: тло сторінки, панель зони, картка. Око не
   могло відділити предмет від підкладки — саме це й читалось як каша.
   Тепер шарів два: кольорове тло сторінки і білі картки на ньому.
   Зону тримають заголовок і повітря, а не ще одна поверхня. */
.zone {
  background: none; border: none; border-radius: 0;
  padding: 0; box-shadow: none;
}

/* Картки всередині зони мають бути помітно «ближчими» за саму зону,
   тому тінь у них двошарова: щільна близька плюс широка розсіяна. */
.zone .panel,
.zone .prof,
.zone .card {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 22px rgba(16, 24, 40, .06);
}
.prof {
  transition: transform .14s ease, box-shadow .14s ease, background .12s;
}
.zone .prof:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 5px rgba(16, 24, 40, .07), 0 18px 38px rgba(16, 24, 40, .11);
}

/* Екрани тесту лежать на тій самій логіці шарів, лише щільніше. */
body.zoned #quiz {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 20px 50px rgba(16, 24, 40, .10);
}

@media (max-width: 600px) {
  .zone { padding: 18px 16px 22px; border-radius: 22px; }
}

/* Наведення на картку професії на дотику не має «залипати» */
@media (hover: none) {
  .zone .prof:hover, .force:hover { transform: none; }
}

/* Картка професії теж лежить на «подушці»: та сама логіка шарів, що й у
   зонах результату — фон, поверхня, картки на ній. */
main.detail {
  background: rgba(255, 255, 255, .52);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--radius-card);
  padding: 30px;
  margin: 24px auto 48px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 16px 40px rgba(16, 24, 40, .07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
main.detail .panel { box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 22px rgba(16, 24, 40, .06); }

@media (max-width: 600px) {
  main.detail { padding: 18px 16px 22px; border-radius: 22px; margin: 12px 12px 24px; }
}

/* ── Відкрита картка АтмоСили ────────────────────────────────────────────
   Це найцінніший екран продукту: тут людині розповідають про її талант.
   Тому шапка велика, з портретом сили й кольоровим світлом позаду, а зміст
   нижче — спокійними блоками, щоб довгий текст не втомлював. */
.force-sheet { max-width: 1020px; overflow: hidden; }
.force-sheet.c1 { --fc-strong: #15803D; --fc-soft: #E7F8ED; }
.force-sheet.c2 { --fc-strong: #7E22CE; --fc-soft: #F4EBFE; }
.force-sheet.c3 { --fc-strong: #B45309; --fc-soft: #FDF3E0; }

.fhero {
  position: relative;
  display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
  padding: 34px 34px 30px;
  /* Другий стоп був білим літералом: у темній темі шапка виходила
     наполовину темною, наполовину білою — шов просто по діагоналі. */
  background: linear-gradient(160deg, var(--fc-soft) 0%, var(--atmo-surface) 78%);
  border-bottom: 1px solid var(--atmo-border);
}
.fhero-close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--atmo-surface); border: 1px solid var(--atmo-border);
  font-size: 1rem; color: var(--atmo-text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.fhero-close:hover { background: var(--atmo-surface-hover); color: var(--atmo-text); }

/* портрет сили: кольорове світло позаду дає об'єм без важкої заливки */
.fhero-art { position: relative; flex: 0 0 auto; }
.fhero-art::before {
  content: ''; position: absolute; inset: -18px; border-radius: 50%;
  background: var(--fc-strong); opacity: .14; filter: blur(14px);
}
.fhero .fs-img {
  position: relative;
  width: 132px; height: 132px; border-radius: 50%;
  object-fit: contain; background: var(--atmo-surface); padding: 12px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}
.fhero .fs-img.emoji { display: flex; align-items: center; justify-content: center; font-size: 3.5rem; }

.fhero-text { flex: 1 1 320px; min-width: 0; }
.fhero-pill {
  display: inline-block; padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--fc-strong); color: var(--on-primary);
  font-size: 0.78125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.fhero-name {
  font-family: var(--atmo-font-display);
  font-size: 2.125rem; line-height: 1.15; margin: 12px 0 0;
  letter-spacing: -.02em; color: var(--atmo-text);
}
.fhero-tagline {
  margin: 10px 0 0; font-size: 1.1875rem; line-height: 1.5;
  color: var(--atmo-text-secondary); max-width: 46ch;
}

/* рівень прояву: три щаблі, останній активний */
.fmeter { margin-top: 22px; }
.fm-label {
  font-size: 0.78125rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--atmo-text-secondary); margin-bottom: 10px;
}
.fm-steps { display: flex; align-items: center; gap: 0; }
.fm-step { display: flex; align-items: center; gap: 8px; }
.fm-step + .fm-step::before {
  content: ''; width: 34px; height: 2px; margin: 0 10px;
  background: var(--atmo-border); border-radius: 2px;
}
.fm-dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--atmo-surface); border: 2px solid var(--atmo-border);
  display: flex; align-items: center; justify-content: center;
  /* Зірочка ховається, зливаючись із власним фоном, і проявляється,
     коли крок залито. Раніше це робив білий літерал — і працювало
     тільки у світлій темі. */
  font-size: 0.8125rem; color: var(--atmo-surface);
}
.fm-name { font-size: 0.875rem; color: var(--atmo-text-secondary); }
.fm-step.on .fm-dot { background: var(--fc-strong); border-color: var(--fc-strong); color: var(--on-primary); }
.fm-step.on .fm-name { color: var(--fc-strong); font-weight: 700; }
.fm-note { margin-top: 12px; font-size: 0.9375rem; color: var(--atmo-text-secondary); }

/* ── зміст під шапкою ── */
.force-body { overflow-y: auto; padding: 30px 34px 34px; }
.fs-about {
  margin: 0; font-size: 1.25rem; line-height: 1.6; font-weight: 500;
  color: var(--atmo-text); max-width: 62ch;
}
.fs-quote {
  margin: 26px 0 0; padding: 22px 26px 22px 58px; position: relative;
  background: var(--fc-soft); border-radius: var(--radius-card);
  font-size: 1.1875rem; line-height: 1.55; font-style: italic; color: var(--atmo-text);
}
.fs-quote::before {
  content: '“'; position: absolute; left: 18px; top: 4px;
  font-size: 3.75rem; line-height: 1; color: var(--fc-strong); opacity: .45;
  font-family: Georgia, serif;
}

.fs-cols { display: grid; gap: 0; }
@media (min-width: 860px) { .fs-cols { grid-template-columns: 1fr 1fr; gap: 32px; } }

.fsection { margin-top: 32px; }
.fs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fs-head h3 { font-size: 1.1875rem; color: var(--atmo-text); }
.fs-icon {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px;
  background: var(--fc-soft); display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
}
.fs-items { display: grid; gap: 8px; }
.fs-item {
  background: var(--atmo-surface); border: 1px solid var(--atmo-border);
  border-radius: 12px; padding: 13px 16px;
  font-size: 1rem; line-height: 1.45;
}
.fsection.develop .fs-item { border-left: 3px solid var(--fc-strong); }

@media (max-width: 600px) {
  .fhero { padding: 26px 20px 24px; gap: 20px; }
  .fhero .fs-img { width: 104px; height: 104px; }
  .fhero-name { font-size: 1.6875rem; }
  .fhero-tagline { font-size: 1.0625rem; }
  .force-body { padding: 22px 20px 26px; }
  .fs-about { font-size: 1.125rem; }
  .fs-quote { font-size: 1.0625rem; padding: 18px 20px 18px 48px; }
  .fm-step + .fm-step::before { width: 18px; margin: 0 6px; }
  .fm-name { font-size: 0.8125rem; }
}

/* ── Коротка репліка над питанням ────────────────────────────────────────
   З'являється кілька разів за весь тест і гасне сама. Займає окремий рядок
   під смужкою прогресу, щоб не зсувати питання. */
/* Поки репліки нема, вона не займає місця: раніше під смужкою прогресу
   постійно висіла порожня смуга у 44 пікселі. Тепер блок розкривається
   плавно разом із появою тексту й так само згортається. */
.pnudge {
  display: flex; align-items: center; gap: 10px;
  max-height: 0; margin-top: 0; overflow: hidden;
  opacity: 0; transform: translateY(-4px);
  transition: max-height .35s ease, margin-top .35s ease,
              opacity .35s ease, transform .35s ease;
}
.pnudge.on { max-height: 60px; margin-top: 12px; opacity: 1; transform: none; }
/* Спливаюча репліка стояла одразу в ДВОХ чужих кодах: синій текст читався
   як дія, блакитне коло — як опора. А вона ні те, ні те: це тихе
   повідомлення про те, де людина зараз. */
.pn-icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--role-fact-bg);
  display: flex; align-items: center; justify-content: center;
  /* 04.09.2026: усередині тепер мальована іконка, а не емодзі. */
  color: var(--atmo-primary);
}
.pn-icon .ic { width: 17px; height: 17px; }
.pn-text {
  font-size: 0.9375rem; line-height: 1.35; font-weight: 500;
  color: var(--atmo-text-secondary);
}

/* Картка тесту має бути заввишки як її вміст.
   Причина попередньої «порожньої висоти»: main тягнеться на min-height:100vh
   і центрує вміст — на екрані питання це розтягувало саму картку на весь
   екран. Тепер тягнеться сторінка, а картка тримається свого вмісту й
   лишається по центру завдяки автоматичним полям. */
body.zoned { display: flex; flex-direction: column; min-height: 100vh; }
body.zoned #quiz { margin-top: auto; margin-bottom: auto; }
/* auto, а не 0: інакше у flex-контейнері вміст стискається нижче власної
   висоти й довгий екран (чек-лист із 30 навичок) обрізається рамкою */
body.zoned main#screen,
body.zoned main.narrow { min-height: auto; }

/* Картка тесту має зручний мінімальний розмір.
   Без нього коротке питання з двома відповідями стискало вікно до 300px —
   воно виглядало загубленим посеред екрана, а сусіднє питання з п'ятьма
   відповідями було вдвічі більшим, і рамка «стрибала» від екрана до екрана.
   Тепер вона тримає спокійну висоту, а росте лише коли вмісту справді більше. */
body.zoned #quiz {
  display: flex; flex-direction: column;
  min-height: min(520px, 74vh);
}
/* короткий вміст стоїть по центру картки, а не тулиться до верху */
body.zoned main#screen,
body.zoned main.narrow { flex: 1 1 auto; justify-content: center; }

@media (max-width: 600px) {
  body.zoned #quiz { min-height: min(440px, 68vh); }
}

@media (max-width: 600px) {
  /* на телефоні репліка лягає у два рядки — резервуємо під них місце,
     щоб її поява не штовхала питання вниз */
  .pnudge { align-items: flex-start; }
  .pnudge.on { max-height: 80px; }
  .pn-icon { width: 28px; height: 28px; flex: 0 0 28px; font-size: 0.9375rem; }
  .pn-text { font-size: 0.9375rem; }
}

/* ── Вилка зарплати на картці професії в списку ──────────────────────── */
/* Зарплата — ТЛО-ФАКТ, а не «вже твоє».
   Зелений у мові ролей означає актив ЛЮДИНИ. Зарплата — властивість
   професії: вона не стає твоєю від того, що ти прочитав картку. Поки
   смужка була зеленою, на одній картці стояли три різні зелені речі
   (перенесені навички, «можна починати вже зараз» і гроші), і зелений
   не означав уже нічого. Гроші нікуди не поділись — вони лишились
   найпомітнішим фактом рядка за рахунок ваги цифр, а не кольору. */
.paystrip {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 9px 14px;
  background: var(--role-fact-bg); border-radius: var(--radius-pill);
  font-size: 1rem; line-height: 1.3; color: var(--atmo-text);
}
.ps-icon {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--atmo-surface); color: var(--atmo-text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9375rem; font-weight: 700;
}
.ps-text b { font-weight: 700; }
.ps-arrow { opacity: .6; }

/* дрібний підпис із терміном біля зрозумілого заголовка */
.eb-note { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .65; }

/* ── «Як туди зайти»: три кроки ──────────────────────────────────────── */
.panel.entrypath { border-left: 4px solid var(--atmo-primary); }
.ep-list { display: grid; gap: 4px; }
.ep-step { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; }
.ep-step + .ep-step { border-top: 1px solid var(--atmo-border); }
.ep-num {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--atmo-primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
}
.ep-body { flex: 1 1 auto; min-width: 0; }
.ep-title { font-weight: 700; font-size: 1.125rem; margin-bottom: 6px; }
.ep-text { font-size: 1.0625rem; line-height: 1.5; }
.ep-money { margin-top: 6px; font-size: 1.0625rem; font-weight: 600; color: var(--atmo-primary); }
.ep-note { margin-top: 8px; font-size: 0.9375rem; color: var(--atmo-text-secondary); }

/* ваучер — не примітка, а окремий помітний рядок */
.ep-voucher {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 12px; padding: 14px 16px;
  background: var(--own-bg); border-radius: var(--radius-button);
}
.ep-vicon { font-size: 1.25rem; line-height: 1.3; }
.ep-vtext { font-size: 1rem; line-height: 1.45; }
.ep-vlink {
  display: inline-block; margin-top: 8px;
  font-weight: 700; font-size: 1rem; color: var(--atmo-primary);
  text-decoration: none; border-bottom: 1.5px solid currentColor;
}

/* Ознака «цю роботу можна робити на себе» — окремо від типу входу,
   бо це інша вісь: не «скільки вчитися», а «на кого працювати». */
/* «Можна на себе» — властивість професії. Жовтий тепер належить
   ОБЕРЕЖНОСТІ (реальний ризик), і мітка формату роботи не має його носити. */
.pill.own { background: var(--role-fact-bg); color: var(--role-fact-ink); }
.ownnote {
  margin-top: 10px; font-size: 0.9375rem; font-weight: 600; color: var(--role-fact-ink);
  display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--role-fact-bg);
}

/* ── Шапка сторінки результату ───────────────────────────────────────────
   Одна цілісна картка замість заголовка, фото й тексту трьома окремими
   блоками. Числа внизу відповідають на «що я отримав» ще до прокрутки. */
.panel.hero {
  display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
  padding: 28px;
}
.hero-photo {
  width: 260px; height: 260px; flex: 0 0 260px;
  border-radius: 22px; object-fit: cover;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}
.hero-body { flex: 1 1 340px; min-width: 0; }
.hero-eyebrow {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--atmo-primary);
}
/* h2. у селекторі — не дрібниця: правило .zone h2 (21px) специфічніше за
   самий клас, і панель архетипу всередині зони «Чому саме так» отримувала
   21px замість 32 — головний емоційний заголовок читався як рядовий. */
/* Заголовок такту 1 — це тепер СУТЬ, ціле речення, а не двослівна назва.
   Тому кегль трохи менший за колишні 32px: речення на два рядки в 32px
   перетворюється на банер, а тут потрібне впізнавання, не гасло. */
h2.hero-title {
  margin: 0; font-family: var(--atmo-font-display);
  font-size: 1.625rem; line-height: 1.28; font-weight: 700;
  letter-spacing: -.015em; color: var(--atmo-text);
  text-wrap: balance; max-width: 24ch;
}
/* Умовна назва типу — тихий підпис під суттю. Раніше вона стояла
   заголовком, і перше, що бачив скептик, була придумана нами метафора. */
.hero-kind {
  margin-top: 8px; font-size: 0.90625rem; line-height: 1.45;
  color: var(--atmo-text-secondary);
}
.hero-lead { margin: 12px 0 0; font-size: 1.125rem; line-height: 1.6; max-width: 56ch; }

/* Практична шапка: без портрета, тому текст займає всю ширину.
   Головний рядок — висновок, а не назва архетипу. */
.hero-practical { padding: 30px 28px; }
.hero-verdict {
  margin: 14px 0 0; font-size: 1.1875rem; line-height: 1.55;
  max-width: 62ch; color: var(--atmo-text);
}

/* Стилі .scenarios/.sc-* видалено разом із блоком сценаріїв (редизайн
   флоу, 29.08): роль-картки дублювали картки п'ятірки. Ролі лишились
   мітками .rolenote нижче. */

/* Бейджі на картці професії: роль (з assignRoles) і складність переходу.
   Обидва — рядки-пігулки під назвою, у тій самій системі, що .ownnote. */
.rolenote, .trnote {
  margin-top: 8px; font-size: 0.875rem; font-weight: 600;
  display: inline-block; padding: 3px 11px; border-radius: var(--radius-pill);
  margin-right: 6px;
}
/* Мітка ролі — тло-факт. Синій означає ДІЮ, а мітка нічого не просить;
   до того ж --atmo-primary-light закріплений за ОПОРОЮ. */
.rolenote { background: var(--role-fact-bg); color: var(--atmo-text-secondary); }
/* «Найлегший перехід» — властивість професії, а не актив людини:
   мітки ролей у п'ятірці всі однакові й нейтральні, різницю несе текст. */
.rn-easiest { background: var(--role-fact-bg); color: var(--role-fact-ink); }
/* Бурштин тут не за роллю: «найбільший дохід» — не ризик. */
.rn-income { background: var(--role-fact-bg); color: var(--role-fact-ink); }
.rn-bold { background: var(--role-fact-bg); color: var(--role-fact-ink); }
/* Складність переходу — нейтральніша за роль, тому без заливки кольором ролі */
.trnote { background: var(--atmo-surface-hover); color: var(--atmo-text-secondary); }
/* «Можна починати вже зараз» — факт про професію, а не актив людини:
   зелений тут не за роллю. Ризикові стани (.tr-prep, .tr-long) свій код
   отримують окремо — це роль «обережність». */
.tr-now { background: var(--role-fact-bg); color: var(--atmo-text-secondary); }
.tr-long { background: var(--role-fact-bg); color: var(--role-fact-ink); }

/* ── Порівняння професій ─────────────────────────────────────────────────
   Позначка «+» на картці. Стоїть у тому ж куті, що й хрестик «не про мене»,
   але вище: обидві дії про картку, і тримати їх поруч зрозуміліше, ніж
   розкидати по протилежних краях. */
.cmp-toggle {
  /* .prof — це flex-рядок (номер | тіло | «не про мене» | статус), і
     position:relative на ньому немає. Тому кнопка — звичайний flex-елемент,
     а не абсолютно позиціонована: інакше вона рахувала б координати від
     сторінки й поїхала б у випадкове місце. */
  flex: 0 0 auto; align-self: flex-start; margin-top: 2px;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--atmo-border); background: var(--atmo-surface);
  color: var(--atmo-text-secondary); font-size: 1.0625rem; line-height: 1;
  cursor: pointer; padding: 0;
  transition: background .12s, border-color .12s, color .12s;
}
.cmp-toggle:hover { border-color: var(--atmo-primary); color: var(--atmo-primary); }
.cmp-toggle.on {
  background: var(--atmo-primary); border-color: var(--atmo-primary); color: var(--on-primary);
}
/* Стеля в три професії: кнопка лишається видимою, але явно неактивною —
   мовчазна відмова на клік читалась би як поламана кнопка. */
.cmp-toggle.full { opacity: .35; cursor: not-allowed; }

.cmp-hint {
  margin: 14px 0 0; font-size: 0.9375rem; color: var(--atmo-text-secondary);
}

/* Смужка внизу екрана. Зафіксована, бо рішення про порівняння визріває
   під час гортання списку — кнопка має бути під рукою будь-коли. */
.cmp-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 18px; border-radius: var(--radius-card);
  /* Заливка — чорнило сторінки, тож текст на ній має бути кольором
     ЗВОРОТНИМ до чорнила, а не завжди білим: у темній темі чорнило
     світле, і білий текст на ньому давав 1,18:1 — тобто нічого. */
  background: var(--atmo-text); color: var(--on-primary);
  box-shadow: 0 10px 30px rgba(16, 24, 40, .28);
  max-width: calc(100vw - 32px);
}
.cmp-bar-text { font-size: 0.9375rem; font-weight: 500; }
.cmp-bar-btns { display: flex; gap: 8px; }
.cmp-bar .button { width: auto; margin: 0; padding: 8px 16px; font-size: 0.9375rem; }
.cmp-bar .cmp-clear { background: transparent; color: var(--on-primary); border-color: var(--on-primary-soft); }
.cmp-bar .cmp-go[disabled] { opacity: .45; cursor: not-allowed; }

/* Таблиця. Три колонки на телефоні не вміщаються, тому скрол горизонтальний
   і ТІЛЬКИ всередині цього контейнера — сама сторінка вбік не їде. */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 460px; }
.cmp-table th, .cmp-table td {
  text-align: left; padding: 12px 14px; vertical-align: top;
  border-bottom: 1px solid var(--atmo-border); font-size: 0.9375rem;
}
.cmp-table thead th { border-bottom: 2px solid var(--atmo-border); }
.cmp-corner { width: 32%; min-width: 150px; }
.cmp-name { font-family: var(--atmo-font-display); font-size: 1.0625rem; line-height: 1.25; }
.cmp-cluster { font-size: 0.8125rem; color: var(--atmo-text-secondary); margin-top: 3px; }
.cmp-key { font-weight: 600; }
.cmp-note { font-size: 0.8125rem; font-weight: 400; color: var(--atmo-text-secondary); margin-top: 2px; }
.cmp-empty { color: var(--atmo-text-secondary); }
/* Підсвічуємо тільки те, що однозначно на користь людини: ваучер є,
   ліцензія не потрібна. Решта — факти без оцінки. */
.cmp-good { color: var(--entry-fast-text); font-weight: 600; }
.cmp-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.cmp-skill {
  font-size: 0.8125rem; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--atmo-surface-hover); color: var(--atmo-text-secondary);
}
.cmp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cmp-actions .button { width: auto; margin: 0; flex: 1 1 200px; }
.cmp-actions .cmp-pick.on { border-color: var(--atmo-primary); color: var(--atmo-primary); }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px;
  padding-top: 20px; border-top: 1px solid var(--atmo-border);
}
.hero-stat {
  display: flex; align-items: baseline; gap: 8px;
  background: var(--atmo-primary-light); border: none;
  border-radius: var(--radius-pill); padding: 9px 16px;
  font: inherit; text-align: left;
}
.hero-stat.link { cursor: pointer; transition: background .12s; }
.hero-stat.link:hover { background: var(--atmo-surface-hover); }
.hs-value { font-size: 1.25rem; font-weight: 700; color: var(--atmo-primary); }
.hs-label { font-size: 0.9375rem; color: var(--atmo-text-secondary); }

@media (max-width: 600px) {
  .panel.hero { padding: 20px; gap: 18px; }
  .hero-photo { width: 100%; height: auto; max-width: 300px; flex: none; margin: 0 auto; }
  /* селектор із h2 — щоб перебити базовий h2.hero-title, як і в основному правилі */
  h2.hero-title { font-size: 1.625rem; }
  .hero-lead { font-size: 1.0625rem; }
}

/* ── Стартовий екран: назва продукту, спокій і тези про тест ──────────── */
.wbrand {
  font-size: 0.9375rem; font-weight: 700; letter-spacing: .06em;
  /* Той самий синій, але темніший: назва лежить прямо на фоні сторінки,
     а не на картці, і на основному синьому давала 4,46:1 при потрібних 4,5. */
  text-transform: uppercase; color: var(--atmo-primary-dark); margin-bottom: 10px;
}
.wcalm {
  margin-top: 14px; font-size: 0.9375rem; line-height: 1.5;
  color: var(--atmo-text-secondary); max-width: 400px;
}

/* чотири обіцянки — те, що тест справді робить */
.wteaser-note {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--atmo-text-secondary); text-align: center; margin-bottom: 12px;
}
.wpromises { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wpromise {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 16px 14px; border-radius: 16px;
  font-size: 0.9375rem; line-height: 1.35; font-weight: 600; color: var(--atmo-text);
  background: var(--atmo-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
}
/* кожна плитка свого відтінку — щоб блок не читався як ще один список */
.wpromise.t1 { background: var(--role-yours-bg); }
.wpromise.t2 { background: var(--atmo-primary-light); }
.wpromise.t3 { background: var(--role-care-bg); }
.wpromise.t4 { background: var(--atmo-primary-light); }
.wp-icon { font-size: 1.5rem; line-height: 1; }
.wp-text { display: block; }

/* Попередження на картці: професія з твого напряму, але з навчанням */
.studynote {
  margin-top: 8px; display: inline-block; font-size: 0.875rem; font-weight: 600;
  color: var(--warn-text); background: var(--warn-bg);
  padding: 4px 12px; border-radius: var(--radius-pill);
}

/* Одне речення суті архетипу — з файлу «АтмоПрофілі». Читається як девіз,
   тому більший кегль і темніший колір, ніж у наступному абзаці. */
/* .hero-essence лишається для інших екранів (двері «Що тест побачив у
   тобі» показують той самий текст під назвою архетипу). У такті 1 суть
   тепер сама є заголовком. */
.hero-essence {
  margin: 12px 0 0; font-size: 1.25rem; line-height: 1.45;
  font-weight: 600; color: var(--atmo-text); max-width: 52ch;
}
.hero-lead { color: var(--atmo-text-secondary); }
@media (max-width: 600px) { .hero-essence { font-size: 1.125rem; } }

/* ── Вікно «ще варіанти» ─────────────────────────────────────────────────
   Раніше шістнадцять чіпсів напрямів займали дві третини висоти, а список
   професій починався нижче краю екрана. Тепер зверху пошук і два фільтри,
   повний перелік напрямів розкривається за потреби. */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.filter-clusters {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding: 12px;
  background: var(--atmo-bg); border-radius: var(--radius-button);
  max-height: 190px; overflow-y: auto;
}
.filter.toggle { font-weight: 600; }
.filter.clear { border-color: transparent; color: var(--atmo-text-secondary); }
.filter.small { font-size: 0.875rem; padding: 6px 12px; }

.others-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin: 18px 0 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--atmo-border);
}
.others-count { font-size: 0.9375rem; font-weight: 700; color: var(--atmo-text); }
.legend-levels { display: flex; gap: 12px; flex-wrap: wrap; }
.legend-levels .lv { font-size: 0.875rem; color: var(--atmo-text-secondary); }

/* поле пошуку помітніше: це головний інструмент цього вікна */
.sheet-body .search {
  display: flex; align-items: center; gap: 10px;
  background: var(--atmo-surface); border: 1.5px solid var(--atmo-border);
  border-radius: var(--radius-button); padding: 4px 14px;
}
.sheet-body .search:focus-within { border-color: var(--atmo-primary); }
.sheet-body .search input {
  flex: 1 1 auto; border: none; outline: none; background: none;
  font: inherit; font-size: 1.0625rem; padding: 12px 0;
}

@media (max-width: 600px) {
  /* у вікні «ще варіанти» на телефоні список має починатись вище:
     робимо пошук і фільтри компактнішими */
  .sheet-body .search input { font-size: 1rem; padding: 10px 0; }
  .filter-row { margin-top: 10px; gap: 6px; }
  .filter-row .filter { font-size: 0.875rem; padding: 7px 12px; }
  .others-head { margin: 12px 0 8px; }
  .legend-levels .lv { font-size: 0.8125rem; }
}

/* ── Спрощена картка професії ────────────────────────────────────────────
   Було вісім елементів: номер, назва, опис, мітка напряму, зарплата,
   «не про мене», чіпи, а праворуч бейдж із підписом і кільце з підписом.
   Стало чотири рівні: назва → опис → зарплата → критерії, і два акценти
   праворуч (відсоток і кільце). Підписи винесені один раз над списком. */
/* .profs-hint (три речення застережень НАД картками) замінено на
   .profs-note під картками — див. кінець файлу, редизайн флоу 29.08. */
.confirmed-note {
  font-size: 0.875rem; padding: 4px 12px;
  background: rgba(250, 236, 90, .35);
}


/* ── Картка професії: один екран — одна думка ────────────────────────────
   Шапка тепер відповідає на «що це за робота і скільки платять», решта
   акцентів іде далі по прокрутці окремими блоками. */
.dhead-desc {
  margin: 12px 0 0; font-size: 1.0625rem; line-height: 1.55;
  color: var(--atmo-text-secondary); max-width: 58ch;
}
.detail-head .paystrip { margin-top: 16px; }
.whyblock .whyline {
  font-size: 1rem; line-height: 1.5; padding: 10px 0 0;
  color: var(--atmo-text); font-weight: 600;
}


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

/* Теги й «не про мене» в одному рядку: теги ліворуч, відмова праворуч.
   Теги — спокійні: увага має йти на назву й зарплату, а не на критерії. */

/* ── Стартовий екран: три кроки одним рядком ─────────────────────────────
   Раніше це був окремий блок під першим екраном, і сторінка виглядала
   розірваною. Тепер кроки стоять між чипсами й кнопкою — компактно,
   в одну лінію, як шлях: думаєш → цікаво → професії. */
.wsteps {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 4px 0 22px;
}
.wstep {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9375rem; line-height: 1.3; color: var(--atmo-text-secondary);
}
.ws-icon { font-size: 1.125rem; }
.ws-arrow { color: var(--atmo-text-secondary); margin-left: 6px; }

/* Поради «як відповідати» на передишці перед першим блоком питань — тепер
   двома короткими чипсами (той самий стиль, що й факти на стартовому
   екрані), а не абзацом із трьох речень. */
.itips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.itip { color: var(--atmo-text-secondary); }
.itip .ic { color: var(--atmo-primary); }

/* ── Зона сил: заголовок трійки з поясненням на вимогу ───────────────────
   Було три схожі тексти підряд — заголовок зони, підзаголовок і темний
   блок «Що таке АтмоСили». Лишився один заголовок і рядок про те, звідки
   ці три взялись; сам термін пояснюється зі знака питання. */
.zone-lead {
  margin: 0 0 22px; font-size: 1.0625rem; line-height: 1.65;
  color: var(--atmo-text-secondary); max-width: 62ch;
}
.forces-head { margin: 26px 0 14px; }
.forces-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--atmo-font-display);
  font-size: var(--t-section); font-weight: var(--t-section-w); letter-spacing: -.01em;
}
.forces-sub { margin-top: 6px; font-size: 1rem; color: var(--atmo-text-secondary); }

/* ── Дисципліна кольору всередині картки професії ────────────────────────
   На одному екрані було до семи кольорових плям — око не знає, за що
   чіплятись. Лишаємо рівно два змістові акценти:
     зелений — те, що можна зробити (кроки, трекер) і гроші;
     жовтий  — ваучер, бо це виняткова можливість.
   Решта — нейтральні поверхні. */
.panel.steps .step { background: var(--role-fact-bg); }
.panel.steps .step.on { background: var(--atmo-accent-green); }

/* чіпи сил усередині «Чому саме ця професія» — просто підписи, не акценти:
   свої кольори вони мають у власній зоні на сторінці результатів */
.whyblock .fchip,
.whyblock .fchip.c1,
.whyblock .fchip.c2,
.whyblock .fchip.c3 {
  background: var(--role-fact-bg); color: var(--atmo-text); border: 1px solid var(--atmo-border);
}

/* переліки-теги в умовах роботи — нейтральні */
main.detail .panel .tags .tag {
  background: var(--role-fact-bg); color: var(--atmo-text-secondary); border-color: var(--atmo-border);
}

/* «що ця робота дає з важливого тобі»: жовтий лишається за ваучером,
   тут достатньо нейтральної плашки з кольоровою іконкою */
.vbadge { background: var(--role-fact-bg); }

/* Кнопка «Подивитись вакансії» була суцільно синьою — третій колір на екрані,
   де вже є зелений (дія) і жовтий (ваучер). Робимо її обведеною із зеленим
   текстом: вона лишається помітною, але не сперечається з головною кнопкою,
   а те, що це перехід на інший сайт, показує стрілка в самому написі. */
.button.external {
  background: var(--atmo-surface); color: var(--atmo-primary);
  border: 1.5px solid var(--atmo-primary);
}
.button.external:hover { background: var(--atmo-primary-light); border-color: var(--atmo-primary); }

/* ── Відмова від професії: хрестик на картці ─────────────────────────────
   Напис «Не про мене» читався як заклик і конкурував із назвою професії.
   Тепер це маленький сірий ✕ у правому нижньому куті картки: помітний
   тому, хто його шукає, і невидимий для решти.

   Клас називався .notme — від того самого напису, якого вже нема, і під
   ним лежали ДВА правила: мертвий стиль тексту й цей. Тепер ім'я говорить,
   що це за елемент, і правило одне.

   Тихість тут заслужена: прибране лишається в переліку внизу зони, і
   повернути його можна будь-коли. Але це єдиний орган керування цією дією,
   тому чорнило підняте рівно до 3:1 — нижньої межі для елементів
   керування. Тихо — так, але не невидимо. */
.card-dismiss {
  /* Ці чотири рядки прийшли з видаленого правила-двійника: воно давало
     кнопці «без хрому», а це — вигляд. Поки правил було два, ніхто цього
     не бачив; коли лишилось одне, кнопка одразу показала сіру рамку
     браузера. Тепер усе, що потрібно хрестику, лежить в одному місці. */
  background: none; border: none; font: inherit; cursor: pointer;
  width: 30px; height: 30px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; text-decoration: none;
  font-size: 1rem; line-height: 1; color: var(--dismiss-ink);
  transition: background .15s ease, color .15s ease;
}
.card-dismiss:hover { background: var(--atmo-surface-hover); color: var(--atmo-text-secondary); }

/* ── Слабші осі інтересів — компактним рядком ────────────────────────────
   Розлогий опис лишається трьом провідним осям. Решта — назва, смужка,
   бал: інформація на місці, ваги на екрані не додає. */
.rrest {
  background: var(--atmo-surface); border-radius: var(--radius-button);
  padding: 14px 16px; box-shadow: var(--shadow-card);
}
@media (min-width: 768px) { .rrest { grid-column: 1 / -1; } }
.rrest-label {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--atmo-text-secondary); margin-bottom: 10px;
}
.rrow {
  display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto;
  align-items: center; gap: 12px; padding: 7px 0;
}
.rr-name { font-size: 1.0625rem; color: var(--atmo-text); }
.rr-score { font-size: 1.0625rem; font-weight: 700; color: var(--atmo-text-secondary); min-width: 32px; text-align: right; }
.rrtrack { display: block; height: 6px; border-radius: 3px; background: var(--atmo-bg); overflow: hidden; }
.rrtrack > span { display: block; height: 100%; border-radius: 3px; background: var(--bar-normal); }
.rrow.weak .rrtrack > span { background: var(--bar-weak); }
.rrow.weak .rr-score { color: var(--bar-weak); }
@media (max-width: 600px) {
  .rrow { grid-template-columns: minmax(100px, 1fr) 1.2fr auto; gap: 8px; }
}

/* Обраний топ-3 тепер відкриває блок цінностей, тому верхньої лінії-роздільника
   йому вже не треба — під ним іде вся шкала. */
.chosen-note.lead-note { margin-top: 0; padding-top: 0; border-top: none; }

/* ── Контурні іконки ─────────────────────────────────────────────────────
   Один розмір, одна товщина лінії, колір від тексту поруч. Замінили набір
   різностильних емодзі, який на кожній системі малювався по-своєму. */
.ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  vertical-align: -0.18em;
}
.ic svg { width: 100%; height: 100%; display: block; }
.ic-cta { width: 1.05em; height: 1.05em; }

/* ── Хрестик відмови: одна точка на всіх картках ─────────────────────────
   Прив'язаний до нижнього правого кута самої картки, а не до колонки
   з текстом, ширина якої залежить від бейджа праворуч. */
.prof { position: relative; }
.prof .card-dismiss { position: absolute; right: 12px; bottom: 10px; }
@media (max-width: 600px) {
  .prof .card-dismiss { right: 6px; bottom: 6px; }
}

/* ── Головна кнопка стартового екрана ────────────────────────────────────
   На цьому екрані людина ухвалює одне рішення, тому кнопка займає всю
   ширину колонки й помітно більша за решту. Колір лишається брендовим
   зеленим: синя кнопка була б єдиною синьою в усьому продукті й читалась
   би як чужий елемент. Помітність дає розмір, глибина й тінь, а не
   другий фірмовий колір. */
.wstart {
  max-width: 100%; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1.25rem; font-weight: 700; padding: 20px 24px;
  /* Градієнт іде згори вниз від брендового зеленого до темнішого:
     так кнопка має обʼєм, і при цьому білий текст на будь-якій її точці
     лишається контрастнішим за поріг AA (4.72 угорі, 6.3 унизу). */
  background: linear-gradient(180deg, var(--atmo-primary) 0%, var(--atmo-primary-dark) 100%);
  background-color: var(--atmo-primary);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.wstart:hover {
  transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: 0 12px 26px rgba(37, 99, 235, .34);
}
.wstart .ic { transition: transform .14s ease; }
.wstart:hover .ic { transform: translateX(3px); }

/* Що знімає останній опір перед натисканням: ціна і швидкість. */
.wfree {
  margin-top: 10px; text-align: center; font-size: 0.9375rem;
  color: var(--atmo-text-secondary);
}

/* чипси-факти тепер із іконкою */
.wchip { display: inline-flex; align-items: center; gap: 7px; }
.wchip .ic { color: var(--atmo-primary); }
.ws-icon { color: var(--atmo-primary); font-size: 1.1875rem; display: inline-flex; }
.ws-arrow { display: inline-flex; }

@media (min-width: 768px) {
  .wstart { font-size: 1.3125rem; max-width: 100%; }
  .wsocial { max-width: 100%; }
}

/* Стрілка «назад» дивиться вліво — це та сама намальована стрілка,
   просто розвернута, щоб не тримати в наборі другий, дзеркальний контур. */
.back .ic-back { transform: rotate(180deg); }
.back { display: inline-flex; align-items: center; gap: 8px; }

/* Іконки в дрібних службових місцях наслідують колір тексту, але там,
   де поруч зелений акцент, підхоплюють його. */
/* зелений — «це вже добре» (підтверджений напрям), синій — «це можна зробити» */
.confirmed-note .ic, .whyline .ic { color: var(--atmo-success); }
.tip-mark .ic, .worth-icon .ic, .vc-icon .ic, .alabel .ic, .ep-vicon .ic { color: var(--atmo-primary); }
.confirmed-note, .whyline, .alabel { display: flex; align-items: center; gap: 8px; }
.vicon .ic { color: var(--atmo-primary); }
.ps-arrow .ic { width: .9em; height: .9em; opacity: .75; }
.farrow .ic { width: 1em; height: 1em; }
.lv { display: inline-flex; align-items: center; gap: 6px; }
.search .ic { color: var(--atmo-text-secondary); }

/* Великий знак на службових екранах (дякуємо / збережено): раніше тут
   стояло емодзі, тепер — контурна іконка в кольоровому колі. */
/* Було: зелений фон (код ВЖЕ ТВОЄ) плюс синя іконка (код ДІЇ) — два
   робочі коди витрачені на декорацію, яка нічого не означає. І вона ж
   стояла найпершою й найбільшою на екрані, тобто в позиції ГОЛОВНОГО. */
.big {
  width: 56px; height: 56px; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--role-fact-bg);
  color: var(--atmo-text-secondary);
}
.big .ic { width: 26px; height: 26px; }

/* ── Зона «Обери одну професію» ──────────────────────────────────────────
   Практичний фініш сторінки: п'ять рядків, один вибір, одна кнопка.
   Свідомо без карток і фото — тут людина не вивчає, а вирішує, і зайве
   оформлення тільки сповільнювало б. */
/* Обгортка вибору — не поверхня, а просто ритм: опора, рядки, дія. */
.pickwrap { display: flex; flex-direction: column; gap: 14px; }
.pickwrap .pick-cards { display: flex; flex-direction: column; gap: 8px; }
.pickwrap .pick-go { align-self: flex-start; margin: 4px 0 0; }

/* Компактний вибір: список згорнутий у рядок.
   Раніше тут удруге лежали ті самі п'ять карток із назвами, зарплатами
   й відсотками — сторінка показувала один список двічі поспіль. */
.pick-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.pick-select {
  flex: 1 1 260px; min-width: 0;
  background: var(--atmo-surface); color: var(--atmo-text);
  border: 1.5px solid var(--atmo-border); border-radius: var(--radius-button);
  padding: 14px 16px; font: inherit; font-size: 1.0625rem; cursor: pointer;
}
.pick-select:focus {
  outline: none; border-color: var(--atmo-primary);
  box-shadow: 0 0 0 3px var(--atmo-primary-light);
}
.pick-go { flex: 0 0 auto; width: auto; max-width: none; margin: 0; }
/* Згасання поверх вимкненого стану опускало напис нижче за читабельне.
   Сірої заливки з .button[disabled] досить, щоб кнопка читалась як неактивна. */
.pick-go[disabled] { cursor: not-allowed; }


.pick-note { margin-top: 10px; font-size: 0.9375rem; color: var(--atmo-text-secondary); }

/* ── Маршрут до обраної професії ─────────────────────────────────────────
   Кроки з конкретними діями; скільки їх — залежить від того, що є в даних
   саме для цієї професії. Смуга ліворуч — той самий знак «це можна
   зробити», що й у решті продукту. */
.planpanel { margin-top: 16px; border-left: 4px solid var(--atmo-primary); }
.pl-head {
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* Єдине кільце в продукті — і воно про дію людини, а не про оцінку системи:
   скільки пунктів вона сама закрила. */
/* Кільце маршруту з підписом. Підпис обов'язковий: кільце рахує лише
   навички, і без слова «навички» число «2/2» читалось як «маршрут пройдено». */
.pl-ring-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pl-ring-cap {
  font-size: 0.78125rem; font-weight: 600; letter-spacing: .04em;
  color: var(--atmo-text-secondary); text-transform: lowercase;
}
.pl-ring { flex: 0 0 auto; width: 52px; height: 52px; }
.pl-ring .ring { width: 52px; height: 52px; }
.pl-ring .ring-fill { stroke: var(--atmo-success); transition: stroke-dasharray .35s ease; }
.pl-ring .ring-num { font-size: 0.9375rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .pl-ring .ring-fill { transition: none; } }
.pl-eyebrow {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--atmo-primary); margin-bottom: 4px;
}
.pl-name { margin: 0; font-size: var(--t-object); font-weight: var(--t-object-w); }
/* .pl-step/.pl-num/.pl-body видалено разом зі стіною розгорнутих кроків:
   маршрут тепер — стрічка .steptrack + панель одного кроку .pl-panel
   (див. кінець файлу). */
/* Заголовок кроку — це головне у вигляді маршруту: екран існує заради
   того, щоб цей крок зробити. Назва професії поруч — уже відомий
   контекст, тому вона на рівень нижче. */
.pl-title {
  font-family: var(--atmo-font-display);
  font-size: var(--t-main); font-weight: var(--t-main-w);
  line-height: 1.3; margin-bottom: 8px;
}
.pl-text { margin: 0 0 12px; font-size: 1.0625rem; line-height: 1.55; color: var(--atmo-text-secondary); }
.pl-btn { width: auto; max-width: none; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
/* Ряд готових пошуків вакансій: три кнопки поруч, на вузькому екрані — колонкою */
.pl-jobrow { display: flex; flex-wrap: wrap; gap: 10px; }
.pl-voucher {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(250, 236, 90, .22); border-radius: var(--radius-button);
  padding: 12px 14px; font-size: 1rem; line-height: 1.5; margin-bottom: 12px;
}
.pl-voucher .ic { color: var(--atmo-text); margin-top: 2px; }
.pl-vlink {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  color: var(--atmo-primary); font-weight: 600;
}
.pl-change {
  margin-top: 16px; background: none; border: none; padding: 0;
  font: inherit; font-size: 1rem; color: var(--atmo-text-secondary);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.pl-change:hover { color: var(--atmo-text-secondary); }

/* Опора перед списком справ: що людина вже приносить із собою.
   Стоїть до першого кроку і навмисно не має номера — це не дія. */
/* Опора має підтримувати, а не переважати.
   Суцільна зелена панель на 200px стояла над самим завданням і була
   найгучнішим об'єктом екрана маршруту — тобто нагадування «ти вже дещо
   вмієш» кричало голосніше за те, що робити далі. Колір лишається (це
   справді «вже твоє»), але вага падає: тонка зелена смуга збоку замість
   заливки, і чипи щільніші. */
.pl-carry {
  background: none; border-left: 3px solid var(--atmo-accent-green);
  border-radius: 0; padding: 2px 0 2px 14px; margin-bottom: 16px;
}
.pl-carry-label {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--entry-fast-text); margin-bottom: 7px;
}
/* Чипи в опорі щільніші за звичайні: їх тут буває чотири-п'ять, і
   повнорозмірними вони з'їдали пів екрана. */
.pl-carry .tags { gap: 5px; }
.pl-carry .skchip.has { font-size: 0.875rem; padding: 4px 10px; background: var(--role-yours-bg); }
.pl-link {
  margin-top: 12px; background: none; border: none; padding: 0;
  font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--entry-fast-text);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* Чек-лист «що освоїти». Пункти клікабельні й переживають перезавантаження:
   це список справ, до якого повертаються, а не разова позначка. */
.pl-checks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pl-check {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: var(--atmo-surface); border: 1px solid var(--atmo-border);
  border-radius: var(--radius-button); padding: 11px 14px;
  font: inherit; font-size: 1rem; color: inherit; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pl-check:hover { border-color: var(--atmo-primary); }
.pl-check.on { background: var(--atmo-accent-green); border-color: transparent; }
.pl-check.on span:last-child { text-decoration: line-through; opacity: .65; }
.pl-box {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px;
  /* Фон — токен, а не білий літерал: у темній темі біла плитка світилась
     плямою на темній картці, а світло-зелена галочка на ній зникала. */
  border: 1.5px solid var(--atmo-border); background: var(--atmo-surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700; color: var(--entry-fast-text);
}
.pl-check.on .pl-box { border-color: transparent; }
.pl-progress { font-size: 0.9375rem; color: var(--atmo-text-secondary); margin-top: 2px; }

/* Нейтральна примітка всередині кроку: пояснення абревіатури,
   відсутність ваучера. Не попередження — просто уточнення. */
.pl-note {
  background: var(--atmo-surface-hover); border-radius: var(--radius-button);
  padding: 11px 14px; font-size: 0.9375rem; line-height: 1.5;
  color: var(--atmo-text-secondary); margin-bottom: 12px;
}

@media (max-width: 600px) {
  .pickrow { gap: 10px; padding: 12px 12px; }
  .pk-name { font-size: 1.0625rem; }
  .pl-btn { width: 100%; justify-content: center; }
}

/* Три рівні входу в професію раніше розрізнялись кольоровими кружечками
   (💚 🟠 🟣). Іконки замінили їх формою, але колір теж має значення —
   він упізнається швидше за контур, тому лишається на самій іконці. */
.lvl-natural .ic, .lvl-natural { color: var(--role-yours-ink); }
.lvl-maybe   .ic, .lvl-maybe   { color: var(--role-fact-ink); }
.lvl-hard    .ic, .lvl-hard    { color: var(--role-care-ink); }
.orow .olevel .ic { width: 22px; height: 22px; }

/* ── Шість інтересів: колір як підпис ────────────────────────────────────
   Кожна вісь має свій колір і тримає його скрізь — у шестикутнику профілю,
   у картці з балом, у компактному рядку і в тезі на картці професії.
   Людині не треба щоразу читати назву: помаранчеве — це руки, фіолетове —
   творчість. Колір тут несе зміст, а не прикрашає. */
.chip.ax-R, .rcard.ax-R, .rrow.ax-R { --ax: var(--axis-R); --ax-bg: var(--axis-R-bg); }
.chip.ax-I, .rcard.ax-I, .rrow.ax-I { --ax: var(--axis-I); --ax-bg: var(--axis-I-bg); }
.chip.ax-A, .rcard.ax-A, .rrow.ax-A { --ax: var(--axis-A); --ax-bg: var(--axis-A-bg); }
.chip.ax-S, .rcard.ax-S, .rrow.ax-S { --ax: var(--axis-S); --ax-bg: var(--axis-S-bg); }
.chip.ax-E, .rcard.ax-E, .rrow.ax-E { --ax: var(--axis-E); --ax-bg: var(--axis-E-bg); }
.chip.ax-C, .rcard.ax-C, .rrow.ax-C { --ax: var(--axis-C); --ax-bg: var(--axis-C-bg); }

.rcard[class*="ax-"] { border-top: 3px solid var(--ax); }
.rcard[class*="ax-"] .rname { color: var(--ax); font-weight: 700; }
.rcard[class*="ax-"] .rscore { color: var(--ax); }
.rcard[class*="ax-"] .rtrack > span { background: var(--ax); }
.rcard.weak[class*="ax-"] .rtrack > span { background: var(--ax); opacity: .45; }

.rrow[class*="ax-"] .rr-name { color: var(--ax); font-weight: 600; }
.rrow[class*="ax-"] .rrtrack > span { background: var(--ax); opacity: .55; }
.rrow[class*="ax-"] .rr-score { color: var(--ax); }

/* Тег інтересу на картці професії теж носить колір своєї осі — так видно,
   що «Художній 75» у списку і фіолетовий сектор у профілі — одне й те саме. */
/* Тег інтересу на картці професії лишається тихим — він не основа картки,
   і заливати його кольором означало б знову перетягнути на нього увагу.
   Але зв'язок із шестикутником потрібен, тому попереду тега стоїть
   маленька кольорова крапка тієї самої осі. Помаранчева крапка тут і
   помаранчевий промінь у профілі — очевидно одне й те саме. */
.prof .chip[class*="ax-"] { display: inline-flex; align-items: center; gap: 7px; }
.prof .chip[class*="ax-"]::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ax); flex: 0 0 auto;
}

/* ── Шестикутник профілю інтересів ───────────────────────────────────────
   Одна картинка замість шести смужок: видно форму людини цілком — де
   витягнуто, де просіло. Смужки лишаються нижче, для тих, кому потрібні
   числа. Так само зроблено в «Особистостях АтмоСил», тому людина, яка
   бачила той тест, читає цей графік без пояснень. */
.radarwrap {
  display: grid; gap: 20px; align-items: center;
  background: var(--atmo-surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 22px; margin-bottom: 14px;
}
@media (min-width: 760px) { .radarwrap { grid-template-columns: 320px 1fr; gap: 32px; } }
.radar { width: 100%; max-width: 320px; margin: 0 auto; display: block; }
.radar .grid { fill: none; stroke: var(--atmo-border); stroke-width: 1; }
.radar .spoke { stroke: var(--atmo-border); stroke-width: 1; }
.radar .shape { fill: rgba(37, 99, 235, .10); stroke: var(--atmo-primary); stroke-width: 2.5; stroke-linejoin: round; }
.radar .dot { stroke: #fff; stroke-width: 2; }
.radar .alabel { font-size: 0.78125rem; font-weight: 700; font-family: var(--atmo-font-primary); }

.radar-legend { display: grid; gap: 8px; }
.rl-row { display: grid; grid-template-columns: 14px minmax(96px, auto) 1fr auto; gap: 10px; align-items: center; }
.rl-dot { width: 12px; height: 12px; border-radius: 50%; }
.rl-name { font-size: var(--t-body); font-weight: var(--t-act-w); }
.rl-track { height: 8px; border-radius: 4px; background: var(--bar-empty); overflow: hidden; }
.rl-track > span { display: block; height: 100%; border-radius: 4px; }
.rl-score { font-size: var(--t-body); font-weight: var(--t-act-w); min-width: 30px; text-align: right; }
@media (max-width: 600px) {
  .rl-row { grid-template-columns: 12px minmax(84px, auto) 1fr auto; gap: 8px; }
  .rl-name, .rl-score { font-size: var(--t-quiet); }
}

/* ── Шкала згоди: п'ять кружків замість п'яти рядків тексту ──────────────
   Зліва «ні» — теплим малиновим, справа «так» — зеленим, посередині
   «не знаю» — сірий. Розмір теж несе зміст: чим упевненіша відповідь,
   тим більший круг. Так само зроблено в «Особистостях АтмоСил». */
.sscale { margin-top: 26px; }
.sdots {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: nowrap;
}
.sdot {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--atmo-surface); cursor: pointer;
  padding: 0; flex: 0 0 auto;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.sdot.lg { width: 68px; height: 68px; border: 2.5px solid currentColor; }
.sdot.md { width: 56px; height: 56px; border: 2px solid currentColor; }
.sdot.sm { width: 46px; height: 46px; border: 2px solid currentColor; }
.sdot .sd-sign { display: block; }
.sdot.lg .sd-sign { width: 28px; height: 28px; }
.sdot.md .sd-sign { width: 22px; height: 22px; }
.sdot.sm .sd-sign { width: 20px; height: 20px; }
.sd-sign svg { width: 100%; height: 100%; display: block; }

/* ── Шкала в мові ролей ──────────────────────────────────────────────────
   Кольору тут більше нема, і це найважливіша правка розкочування.

   Було: ліві два кружки малинові, праві два зелені. Людина бачить цю шкалу
   ~57 разів поспіль — тобто саме вона й навчає мову. І навчала неправильної:
   «зелений = мені подобається». З цим значенням людина приходила в результат,
   де зелений мусить означати «вже твоє» — її власний актив. Найповторюваніший
   елемент продукту працював проти найціннішого коду.

   Напрямок шкали й без кольору заданий тричі: розміром (великий → малий →
   великий), знаком (хрестик проти сердечка) і підписами країв словами.
   Колір був четвертим, зайвим — і найдорожчим. */
.sdot.no  { color: var(--scale-ink); }
/* Сірий середнього кружка був занадто світлий: 2,56:1 — контур не читався
   ні як текст, ні навіть як графічний елемент (мінімум 3:1). Беремо той самий
   сірий, що й другорядний текст, — 4,76:1. */
.sdot.mid { color: var(--scale-ink-soft); }
.sdot.yes { color: var(--scale-ink); }

.sdot:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(16, 24, 40, .12); }
.sdot:hover { background: var(--atmo-surface-hover); }
/* Обраний стан — синій, як усі інші відповіді в продукті. Одна відповідь —
   один код, незалежно від того, якою формою її питають. */
.sdot.picked { background: var(--atmo-primary); border-color: var(--atmo-primary); }
.sdot.picked .sd-sign { color: var(--on-primary); }

/* Крайні формулювання лишаються словами — і тепер вони єдині називають
   напрямок, бо колір зі шкали знято. Тому вони прив'язані до ширини самої
   шкали, а не розтягнуті на всю картку: підпис має стояти під своїм краєм,
   інакше він не прив'язується до кружка очима. */
.sends {
  display: flex; justify-content: space-between; gap: 16px;
  max-width: 356px; margin: 14px auto 0;
  font-size: 0.875rem; color: var(--atmo-text-secondary);
}
/* Підписи країв більше не пофарбовані, зате взяли на себе роботу кольору:
   вони єдині називають напрямок словами, тому трохи темніші за звичайне тло. */
.sends span:first-child, .sends span:last-child {
  color: var(--atmo-text); font-weight: 600;
}

@media (max-width: 420px) {
  .sdots { gap: 8px; }
  .sdot.lg { width: 58px; height: 58px; }
  .sdot.md { width: 48px; height: 48px; }
  .sdot.sm { width: 40px; height: 40px; }
  .sends { font-size: 0.875rem; }
}

/* ── Бейдж збігу — зелений, а не синій ───────────────────────────────────
   Синій в оновленій палітрі означає «це можна натиснути». Бейдж «ТОП · 96%»
   нічого не робить — він оцінює, тому колір у нього зелений: «це добре».
   Інакше на картці професії з'являлось би дві синіх плями, і людина не
   розуміла б, яка з них кнопка. */

/* Відсоток збігу в шапці й число готовності — факт, а не набуток:
   зелений тут читався б як «це в тебе вже є», хоча це міра близькості.
   Вагу числу дає кегль, а не фарба. */
.hs-value { color: var(--atmo-text); }

/* ── Кругові вимірники «наскільки підходить ця роль» ─────────────────────
   Головний візуальний акцент картки професії: збіг розкладений на реальні
   складові — інтереси, робочий день, готовність. Товста дуга з круглими
   кінцями, число всередину, колір за змістом кільця. */
.rolefit .meters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px;
  margin: 6px 0 4px;
}
.meter-item { text-align: center; flex: 0 0 auto; width: 108px; }
.meter { width: 100px; height: 100px; display: block; margin: 0 auto; }
.meter .m-bg { fill: none; stroke: var(--bar-empty); stroke-width: 11; }
.meter .m-fill {
  fill: none; stroke-width: 11; stroke-linecap: round;
  transition: stroke-dasharray .6s ease;
}
.meter .m-num {
  font-family: var(--atmo-font-display); font-weight: 800; font-size: 1.875rem;
  text-anchor: middle; dominant-baseline: central;
}
.meter .m-pct { font-size: 1rem; font-weight: 700; }
.m-label { font-size: 1rem; font-weight: 600; margin-top: 6px; color: var(--atmo-text); }
.m-note { font-size: 0.8125rem; color: var(--atmo-text-secondary); margin-top: 2px; }

/* Висновок під кільцями: жовтою плашкою, як інші «зверни увагу» на сторінці. */
.rf-take {
  margin: 14px 0 0; padding: 12px 16px; border-radius: var(--radius-button);
  background: var(--atmo-primary-light); font-size: 1rem; line-height: 1.5;
}
.rf-take b { color: var(--atmo-text); }

@media (max-width: 480px) {
  /* Кілець тепер до чотирьох (інтереси, стиль мислення, робочий день,
     готовність). У ряд по чотири на вузькому екрані вони стають надто
     дрібними, тому розкладаємо сіткою 2×2. */
  .rolefit .meters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; }
  .meter-item { width: auto; }
  .meter { width: 100%; max-width: 104px; height: auto; }
  .meter .m-num { font-size: 1.625rem; }
  .m-label { font-size: 0.875rem; }
}

/* ── Легенда радара: рядок розкриває опис осі ────────────────────────────
   Замінила окремий блок із шести карток. Клік по напряму показує його
   пояснення прямо під рядком — без повторення всього переліку. */
.rl-hint { font-size: 0.8125rem; color: var(--atmo-text-secondary); margin-bottom: 8px; }
.rl-item { border-bottom: 1px solid var(--atmo-border); }
.rl-item:last-child { border-bottom: none; }
.radar-legend .rl-row {
  display: grid; grid-template-columns: 14px minmax(96px, auto) 1fr auto 16px;
  gap: 10px; align-items: center; width: 100%;
  background: none; border: none; padding: 11px 2px; cursor: pointer;
  font: inherit; text-align: left;
}
.radar-legend .rl-row:hover .rl-name { text-decoration: underline; }
.rl-caret {
  width: 10px; height: 10px; border-right: 2px solid var(--atmo-text-muted);
  border-bottom: 2px solid var(--atmo-text-muted); transform: rotate(45deg);
  transition: transform .15s ease; justify-self: end; margin-top: -3px;
}
.rl-row.open .rl-caret { transform: rotate(-135deg); margin-top: 3px; }
.rl-desc {
  padding: 0 2px 14px 24px; font-size: 0.9375rem; line-height: 1.55;
  color: var(--atmo-text-secondary);
}
@media (max-width: 600px) {
  .radar-legend .rl-row { grid-template-columns: 12px minmax(80px, auto) 1fr auto 14px; gap: 8px; }
}

/* ширший радар — трохи більше місця під підписи */
.radar { max-width: 340px; }

/* Три риси мислення простими словами у шапці профілю. */
.hero-traits { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.htrait {
  font-size: 0.875rem; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--atmo-primary-light); color: var(--atmo-primary);
  font-weight: 600;
}

/* ── Момент самоусвідомлення «а що скажеш ти сам?» ───────────────────────
   Тепла людська пауза серед тесту: людина сама називає силу, у відповідь —
   маленьке відкриття. Це задає місію продукту, тому оформлення м'якше й
   особистіше за звичайні питання. */
/* Надзаголовок предмета, а не дія — той самий код, що в .ask-ctx. */
.sv-eyebrow {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--atmo-text-secondary); margin-bottom: 8px;
}

/* Сітка плиток замість списку рядків: два стовпці, іконка над коротким
   написом. Її можна зчитати одним поглядом, не читаючи рядок за рядком —
   саме це і було проблемою старого вигляду з текстовими кнопками. */
.sv-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px;
}
.sv-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; font: inherit; font-size: 1rem; font-weight: 600;
  background: var(--atmo-surface); color: var(--atmo-text);
  border: 1.5px solid var(--atmo-border); border-radius: var(--radius-card);
  padding: 20px 12px; cursor: pointer; line-height: 1.3;
  transition: border-color .14s ease, background .14s ease, transform .12s ease;
}
.sv-tile:hover { border-color: var(--atmo-primary); background: var(--atmo-primary-light); transform: translateY(-2px); }
.sv-tile.picked { border-color: var(--atmo-primary); border-width: 2px; }
.sv-tile-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Не --atmo-primary-light: це код ОПОРИ, а тут іконка варіанта. */
  background: var(--role-fact-bg); color: var(--atmo-text-secondary);
}
.sv-tile-icon .ic { width: 22px; height: 22px; }
@media (max-width: 420px) {
  .sv-tile { padding: 16px 10px; font-size: 0.9375rem; }
  .sv-tile-icon { width: 38px; height: 38px; }
}

/* Опорний зміст (чесність продукту про межі власного висновку) стояв
   сірим тлом рівно перед кнопкою. Позиція була правильна, коду бракувало. */
.sv-note {
  background: var(--role-support-bg); color: var(--role-support-ink);
  border-radius: var(--radius-button); padding: 10px 14px; margin: 16px 0 18px;
  font-size: 0.90625rem; line-height: 1.5;
}

/* ── Картка-інсайт: спільний формат для самооцінки й рефлексій ───────────
   Кольоровий бейдж з іконкою зверху, лічильник «Інсайт N з M», заголовок і
   текст. Той самий формат скрізь — людина одразу впізнає «це знову той
   самий тип моменту», а не гадає, що за новий екран перед нею. */
.insight-card {
  background: var(--atmo-surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 26px 24px; margin: 4px 0 4px;
}
.insight-badge {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.insight-badge .ic { width: 26px; height: 26px; }
.insight-tag {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--atmo-text-secondary);
}
/* ГОЛОВНЕ вставного екрана — сам зміст рефлексії, а не назва рубрики.
   Було навпаки: «Що тебе тягне» стояло як h1 у 32px, а речення про людину —
   19px під ним. Тепер вага відповідає ролі. */
.insight-text {
  margin: 0; font-family: var(--atmo-font-display);
  font-size: var(--t-main); line-height: 1.4; font-weight: var(--t-main-w);
  letter-spacing: -.01em; color: var(--atmo-text);
}
.insight-card h1 {
  font-family: var(--atmo-font-primary); font-size: var(--t-label); font-weight: var(--t-label-w);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--atmo-text-secondary); margin: 4px 0 12px;
}
/* Бейдж — тло: 52px кольорове коло було першим і найпомітнішим об'єктом
   екрана, тобто стояло в позиції головного, нічого не означаючи. */
.insight-badge {
  width: 32px; height: 32px; margin-bottom: 10px;
  background: var(--role-fact-bg); color: var(--atmo-text-secondary);
}
.insight-badge .ic { width: 18px; height: 18px; }

/* Дзеркало на сторінці результатів: що сказав сам — що побачив тест. */
.selfview-mirror { border-left: 4px solid var(--atmo-primary); }
.svr-eyebrow {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--atmo-primary); margin-bottom: 6px;
}
.svr-text { margin: 0; font-size: 1.0625rem; line-height: 1.6; }

/* ── Підсумок п'ятірки в цифрах ──────────────────────────────────────────
   Стилі .fivesum/.fs-* видалено разом із зарплатними пілюлями (редизайн
   флоу, 29.08): агрегована вилка по п'яти різних професіях дублювала
   зарплати, які й так стоять на кожній картці. */

/* ── MBTI: вибір «або» замість списку ────────────────────────────────────
   У MBTI завжди рівно два протилежних варіанти. Дві плитки впритул одна
   до одної з невеликим «або» між ними читаються як вибір напряму, а не
   як список, з якого треба щось вилучити. */
.vs { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 10px 0 14px; }
.vs-opt {
  display: flex; align-items: center; gap: 16px; text-align: left;
  width: 100%; font: inherit; cursor: pointer;
  background: var(--atmo-surface); color: var(--atmo-text);
  border: 1.5px solid var(--atmo-border); border-radius: var(--radius-card);
  padding: 22px 20px; font-size: 1.125rem; line-height: 1.4;
  box-shadow: var(--shadow-card);
  transition: border-color .14s ease, background .14s ease, transform .1s ease;
}
.vs-opt:hover { border-color: var(--atmo-primary); transform: translateY(-1px); }
/* Заливка знята: --atmo-primary-light закріплений за ОПОРОЮ. Рамка 2px
   і залите синє коло з літерою і так однозначно кажуть «обрано». */
.vs-opt.picked { border-color: var(--atmo-primary); border-width: 2px; }
.vs-letter {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--atmo-bg); color: var(--atmo-text-secondary);
  font-weight: 700; font-size: 0.9375rem;
}
.vs-opt.picked .vs-letter { background: var(--atmo-primary); color: var(--on-primary); }
.vs-or {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--atmo-bg); border: 1.5px solid var(--atmo-border);
  border-radius: var(--radius-pill); padding: 4px 14px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--atmo-text-secondary);
}

/* ── Умови праці: кружечок-індикатор замість голого рядка ────────────────
   Той самий візуальний знак вибору, що в чек-листі навичок і в трійці
   цінностей — послідовність мови в усьому тесті. */
.opt-mark { display: flex; align-items: center; gap: 14px; }
.opt-dot {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--atmo-border);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.opt-mark.picked .opt-dot { background: var(--atmo-primary); border-color: var(--atmo-primary); }
.opt-mark.picked .opt-dot .ic { width: 14px; height: 14px; }

@media (max-width: 420px) {
  .vs-opt { padding: 18px 16px; font-size: 1.0625rem; gap: 12px; }
  .vs-letter { flex-basis: 30px; width: 30px; height: 30px; }
}

/* ── Полірування за UI-аудитом 28.08.2026 ────────────────────────────────── */

/* Порожній хвіст зони: останній блок не має тягнути за собою свій нижній
   відступ — інакше зона закінчується великою порожньою «кишенею». */
.zone > :last-child { margin-bottom: 0 !important; }

/* Числа шапки результату на телефоні: замість трьох рядків на пів екрана —
   компактні таблетки, що стають по дві в ряд. */
@media (max-width: 480px) {
  .hero-stats { gap: 8px; padding-top: 14px; margin-top: 16px; }
  .hero-stat { padding: 7px 12px; font-size: 0.875rem; gap: 6px; }
}

/* «Менше руху» — системне налаштування, яке досі поважалось лише в одному
   місці. Тепер воно глушить усі декоративні анімації й переходи основної
   оболонки (у дуо це давно робить calmMotion). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Смужки прогресу сторіз губились на світлих фото — легка тінь-підкладка. */
.st-bars {
  padding-bottom: 10px;
  background: linear-gradient(180deg, rgba(16, 22, 42, .35), rgba(16, 22, 42, 0));
  border-radius: 0;
}
/* Класична назва осі — дрібним рядком у розгортці легенди радара */
.rl-classic { font-size: 0.8125rem; color: var(--atmo-text-secondary); margin-bottom: 6px; }
/* Чипи фактів на пастельному кадрі сторіз (професія без фото) */
.tone-pastel .st-stat {
  background: var(--atmo-surface); color: var(--atmo-text);
  box-shadow: 0 4px 14px rgba(30, 41, 59, .10);
}
/* Вибір професії картками (замість системного select) */
.pick-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pickrow2 {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--atmo-surface); border: 1.5px solid var(--atmo-border);
  border-radius: var(--radius-button); padding: 10px 12px;
  font: inherit; cursor: pointer; transition: border-color .12s, background .12s;
}
.pickrow2:hover { border-color: var(--atmo-primary); }
.pickrow2.on { border-color: var(--atmo-primary); background: var(--atmo-primary-light); }
.pk2-photo {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 12px;
  object-fit: cover; background: var(--atmo-bg);
}
.pk2-body { flex: 1 1 auto; min-width: 0; }
.pk2-name { font-weight: var(--t-object-w); font-size: var(--t-object); line-height: 1.25; }
.pk2-meta { font-size: 0.875rem; color: var(--atmo-text-secondary); margin-top: 2px; }
.pk2-check {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--atmo-border); display: grid; place-items: center;
  font-size: 0.875rem; color: transparent;
}
.pickrow2.on .pk2-check { background: var(--atmo-primary); border-color: var(--atmo-primary); color: var(--on-primary); }
/* Порівняння: на вузьких екранах — картки зі снапом, на широких — таблиця */
.cmp-cards { display: none; }
@media (max-width: 640px) {
  .cmp-desktop { display: none; }
  .cmp-cards {
    display: flex; gap: 12px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 -4px 6px; padding: 4px;
  }
  .cmp-card {
    flex: 0 0 86%; scroll-snap-align: center;
    background: var(--atmo-surface); border: 1.5px solid var(--atmo-border);
    border-radius: var(--radius-card); padding: 14px 16px;
  }
  .cmp-card .cmp-name { font-weight: 700; font-size: 1.0625rem; }
  .cmp-card .cmp-cluster { font-size: 0.8125rem; color: var(--atmo-text-secondary); margin-bottom: 10px; }
  .cmp-crow {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 7px 0; border-bottom: 1px dashed var(--atmo-border); font-size: 0.90625rem;
  }
  .cmp-crow:last-child { border-bottom: none; }
  .cmp-ckey { color: var(--atmo-text-secondary); }
  .cmp-cval { font-weight: 600; text-align: right; }
  .cmp-cval.cmp-good { color: var(--atmo-primary-hover); }
  .cmp-cval.cmp-empty { color: var(--atmo-text-secondary); font-weight: 400; }
  .cmp-cards-hint {
    flex: 0 0 auto; align-self: center; padding: 0 10px;
    font-size: 0.8125rem; color: var(--atmo-text-secondary); white-space: nowrap;
  }
}
/* ── Екран напряму (редизайн 28.08): напрям — головний, сила — бейдж ────── */
/* ── Класи ролей ──────────────────────────────────────────────────────────
   Один вигляд на роль, від першого питання до фіналу. Ці три класи —
   і є вся мова; решта стилів лише не має їм суперечити. */

/* ГОЛОВНЕ: блок «про що цей екран». Надзаголовок — предмет питання,
   заголовок — саме питання. Кольору нема, вагу несуть розмір і повітря. */
.ask { margin: 0 0 18px; }
.ask-ctx {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--atmo-text-secondary); margin-bottom: 8px;
}
.ask-main {
  font-family: var(--atmo-font-display); font-weight: 700;
  font-size: 1.625rem; line-height: 1.22; letter-spacing: -.01em; margin: 0;
}

/* ОПОРА: те саме на всіх екранах — м'який блакитний, дрібне, над проханням. */
/* ОПОРА — свій рівень, як і задумано: сталий менший кегль плюс фон.
   Кегль у неї спільний із тлом навмисно — відрізняє її саме фон, тобто
   код ролі, а не ще одна сходинка розміру. */
.role-support {
  background: var(--role-support-bg); color: var(--role-support-ink);
  border-radius: var(--radius-button); padding: 10px 14px; margin: 0 0 16px;
  font-size: var(--t-quiet); font-weight: var(--t-quiet-w); line-height: 1.5;
}

/* ВЖЕ ТВОЄ і ОБЕРЕЖНІСТЬ: чипи однакової форми, різні за кодом. */
.role-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-pill); padding: 4px 11px;
  font-size: 0.84375rem; font-weight: 600; white-space: nowrap;
}
.role-chip.yours { background: var(--role-yours-bg); color: var(--role-yours-ink); }
.role-chip.care  { background: var(--role-care-bg);  color: var(--role-care-ink); }
.role-chip.fact  { background: var(--role-fact-bg);  color: var(--role-fact-ink); }
.role-chip .ic { width: 15px; height: 15px; flex: 0 0 auto; }

.hintcard {
  border-radius: var(--radius-card); padding: 22px 24px; margin-bottom: 18px;
  background: var(--atmo-primary-light);
}
.hintcard.tone2 { background: var(--atmo-primary-light); }
.hintcard.tone3 { background: var(--role-care-bg); }
.hint-force {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .75); border-radius: var(--radius-pill);
  padding: 5px 12px 5px 6px; font-size: 0.84375rem; font-weight: 600;
  color: var(--atmo-text-secondary); margin-bottom: 14px;
}
.hf-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.hf-emoji { font-size: 1.125rem; padding-left: 6px; }
.hint-kicker {
  font-size: var(--t-label); font-weight: var(--t-label-w); letter-spacing: .08em;
  text-transform: uppercase; color: var(--atmo-text-secondary); margin-bottom: 4px;
}
/* Ярлик підказки більше не фарбується за «тоном» картки: тон — це варіант
   оформлення, а не інший сенс, і два зайві відтінки читались як код. */
.hint-cluster {
  font-family: var(--atmo-font-display); font-weight: 800;
  font-size: clamp(1.375rem, 4.5vw, 1.75rem); line-height: 1.2; margin: 0 0 10px;
}
.hint-q { margin-top: 0; }
.hint-opts { display: flex; flex-direction: column; gap: 10px; }
.hopt { display: flex; align-items: center; gap: 12px; }
.hopt-ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.9375rem; font-weight: 700;
  border: 2px solid var(--atmo-border); color: var(--atmo-text-secondary);
}
/* Усі три відповіді однакові до вибору. Раніше «так» було підсвічене синім,
   а «ні» — теплим: із трьох рівноправних варіантів один виглядав як
   рекомендований, тобто екран підказував відповідь замість питати. */
.hopt-yes .hopt-ico, .hopt-no .hopt-ico { border-color: var(--atmo-border); color: var(--atmo-text-secondary); }
.hopt.picked .hopt-ico { background: var(--atmo-primary); border-color: var(--atmo-primary); color: var(--on-primary); }
/* «Ти позначив розглянув би» — чесний слід реакцій раннього результату */
.considered { margin-top: 14px; }
.cons-title { margin: 0 0 4px; font-size: 1.125rem; }
.cons-lead { margin: 0 0 12px; color: var(--atmo-text-secondary); font-size: 0.9375rem; }
.cons-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px dashed var(--atmo-border);
}
.cons-row:last-child { border-bottom: none; padding-bottom: 0; }
.cons-main { flex: 1 1 auto; min-width: 0; }
.cons-name { font-weight: 600; font-size: 1rem; }
.cons-match { margin-left: 8px; color: var(--atmo-text-secondary); font-weight: 700; font-size: 0.875rem; }
.cons-why { font-size: 0.875rem; color: var(--atmo-text-secondary); margin-top: 2px; }
.cons-open {
  flex: 0 0 auto; padding: 8px 14px; font: inherit; font-size: 0.875rem; font-weight: 600;
  color: var(--atmo-primary); background: none; border: 1.5px solid var(--atmo-primary);
  border-radius: var(--radius-pill); cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   ТЕМНА ТЕМА (29.08.2026)
   ══════════════════════════════════════════════════════════════════════════
   Слідує за системним налаштуванням телефона/комп'ютера — перемикача нема
   свідомо: аудиторія 35–60 не шукає перемикачів, вона очікує, що застосунок
   поводиться як телефон. Побудовано на тих самих токенах: тут лише інші
   значення тих самих ролей плюс точкові переозначення там, де світлий
   колір був прошитий літералом. Ролі кольорів не змінюються: синій — дія,
   зелений — «вже добре», шість кольорів осей — ті самі, лише світліші,
   щоб тримати контраст на темному. */
@media (prefers-color-scheme: dark) {
  :root {
    /* У темній темі смуга інвертується: темно-зелений на темному тлі
       злився б із карткою і перестав бути помітним. */
    --fp-bg: #9FDDB4;
    --fp-ink: #10281A;
    --atmo-bg: #0F1526;
    --atmo-bg-gradient: linear-gradient(160deg, #141C33 0%, #0F1526 45%, #181430 100%);
    --atmo-surface: #1B2540;
    --atmo-surface-hover: #22304F;

    --atmo-primary: #6D9BFF;
    --atmo-primary-dark: #86ACFF;
    --atmo-primary-soft: #4A7BE0;
    --atmo-primary-light: #1E2C50;

    /* Другого зеленого нема й тут: токен успадковує --entry-fast-text. */
    --atmo-success-light: #1B3626;
    --atmo-accent-yellow: #C9B945;
    --atmo-accent-green: #1F3A2A;
    --atmo-text: #E7EDF8;
    --atmo-text-secondary: #A2B0C9;
    --atmo-text-muted: #74829D;
    --atmo-border: #2B3A5C;

    --level-high-text: #A5DFAF;
    --level-low-text: #E19B84;

    --match-high: #4ED08C;
    --entry-edu-bg: #2C2350;
    --entry-edu-text: #C9B4F5;
    --entry-fast-text: #9FDDB4;
    /* «Жовта» лінія в темній темі. Фон лишаємо напівпрозорим — він і в
       світлій темі напівпрозорий, тож панелі з ним («підтверджений напрям»,
       ваучер у кроці входу) виглядають однаково. Змінюється тільки текст:
       темно-янтарний на темному фоні не читався взагалі. */
    --warn-text: #E5A860;
    --warn-bg: rgba(251, 191, 36, .16);
    /* Ролі спираються на токени вище, тож переозначувати треба лише той,
       у якого власне значення: нейтральний чип у темній темі. */
    --role-fact-bg: #232B3A;
    /* Чорнило нейтрального факту теж має власне значення — без темної пари
       воно лишалось темно-сірим на темному фоні (2,04:1). */
    --role-fact-ink: #93A2B8;
    /* Синя заливка в темній темі світла, тож чорнило на ній — темне. */
    --on-primary: #0E1626;
    --on-primary-soft: rgba(14, 22, 38, .45);
    /* 4,38:1 на картці — трохи нижче за 4,5. Дія лишається тихою,
       але тихість не має коштувати читабельності. */
    --dismiss-ink: #8B98AC;
    --fin-bg-1: #2E1F1A;
    --fin-bg-2: #241814;
    --fin-line: #4A342A;
    --fin-accent: #E3B08C;
    --own-text: #E0CE7A;
    --scale-ink: #C6D2E8;
    --scale-ink-soft: #8E9AAD;
    --own-bg: rgba(250, 236, 90, .14);
    --bar-role: #3A4A6B;
    --bar-empty: #223050;
    --bar-strong: #C6D2E8;
    --bar-normal: #74829D;
    --bar-weak: #E07A4C;

    --axis-R: #F0824C;
    --axis-I: #6D9BFF;
    --axis-A: #B79AFB;
    --axis-S: #A3C556;   /* оливковий, як у світлій — не зелений «вже твоє» */
    --axis-E: #F0708E;
    --axis-C: #38B8AC;
    --axis-R-bg: #3A2418;
    --axis-I-bg: #1E2C50;
    --axis-A-bg: #2C2350;
    --axis-S-bg: #1B3626;
    --axis-E-bg: #3A1F28;
    --axis-C-bg: #163331;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .3);
  }

  /* Зона більше не поверхня в жодній темі — інакше шари не збігались би
     між світлою й темною, і та сама сторінка читалась би по-різному. */
  main.detail {
    background: rgba(21, 30, 52, .62);
    border-color: rgba(255, 255, 255, .06);
  }
  .znav-item { background: rgba(27, 37, 64, .8); }
  .hint-force, .ps-icon { background: rgba(255, 255, 255, .1); }

  /* Пастельні тони сил (кастом-властивості карток і модалок) */
  .force.c1, .force-sheet.c1 { --fc-strong: #4EC584; --fc-soft: #1B3626; }
  .force.c2, .force-sheet.c2 { --fc-strong: #B79AFB; --fc-soft: #2C2350; }
  .force.c3, .force-sheet.c3 { --fc-strong: #E8B45C; --fc-soft: #3A2E16; }

  /* Панелі-настрої з прошитими світлими тонами */
  .rcard.weak { background: #33222A; border-color: #6B3A46; }
  .natural { background: #1B3626; border-left-color: #3FA873; }
  .rn-income { background: #3A2E16; color: #E8B45C; }
  .rn-bold { background: #2C2350; color: #C9B4F5; }
  .wpromise.t1 { background: #1B3626; }
  .wpromise.t2 { background: #1E2C50; }
  .wpromise.t3 { background: #3A2E16; }
  .wpromise.t4 { background: #2C2350; }
  .panel.steps .step, .vbadge, main.detail .panel .tags .tag { background: #223050; }
  .whyblock .fchip.c3 { background: #223050; }
  .sdot.no:hover { background: #3A1F28; }
  .sdot.mid:hover { background: #223050; }
  .sdot.yes:hover { background: #1B3626; }
  .hintcard { background: #1E2C50; }
  .hintcard.tone2 { background: #2C2350; }
  .hintcard.tone3 { background: #3A2E16; }
  .hopt-no .hopt-ico { border-color: #6B3A46; color: #E19B84; }

  /* Жовті «державні» панелі: той самий сенс, темна підкладка */
  .vch-panel { background: rgba(201, 185, 69, .1); }
  .pl-voucher { background: rgba(201, 185, 69, .12); }
  .worth-duo { background: rgba(201, 185, 69, .12); }
  .hl, .qk-below { color: var(--atmo-text-secondary); }

  /* Сторіз: пастельні кадри стають нічними, чорнильні лишаються собою */
  .st-frame.tone-pastel { background: linear-gradient(160deg, #1A2440 0%, #141C33 55%, #221A3E 100%); color: var(--atmo-text); }
  .st-frame.tone-gem { background: linear-gradient(160deg, #241E45 0%, #1B1836 60%, #221A3E 100%); color: #CFC4F5; }
  .st-chip { background: var(--atmo-surface); color: var(--atmo-text); }
  .tone-pastel .st-stat { background: var(--atmo-surface); color: var(--atmo-text); }

  /* Друк завжди світлий: чорнило по білому, як і було */
}

/* Іконки груп навичок: кольори класами (замість інлайну), щоб темна тема
   могла їх переозначити. Порядок — як у SKILLGROUP_LOOK в app.js. */
/* Шість кольорових кіл зведено до одного нейтрального.
   Кольори тут були суто для впізнавання групи, але серед них — синій
   (код ДІЇ), зелений (код ВЖЕ ТВОЄ) і бурштиновий (код ОБЕРЕЖНОСТІ).
   Декоративне призначення не виправдовує витрати трьох робочих кодів:
   групу і так називає заголовок поруч. */
.sglook-0, .sglook-1, .sglook-2, .sglook-3, .sglook-4, .sglook-5 {
  background: var(--role-fact-bg); color: var(--atmo-text-secondary);
}
@media (prefers-color-scheme: dark) {
  /* Нейтральна пара до світлої: кола не кодують нічого, групу називає
     заголовок поруч, а іконка вже її розрізняє. */
}
@media (prefers-color-scheme: dark) {
  .znav { background: linear-gradient(180deg, rgba(15, 21, 38, .96) 70%, rgba(15, 21, 38, 0)); }
}

/* Кнопки-рядки успадковують колір тексту (UA-чорний ламав темну тему) */
.hero-stat, .vch-row, .pickrow2 { color: var(--atmo-text); }

@media (prefers-color-scheme: dark) {
  /* трохи світліший muted: дрібний текст 13px має тримати 4.5:1 */
  :root { --atmo-text-muted: #8794AF; }
  /* картки й модалка АтмоСил: біла підкладка -> поверхня теми
     (кольоровий настрій лишається у --fc-soft колі та акцентах) */
  .force, .force-sheet { background: var(--atmo-surface); }
}
/* Приклади професій напряму — одразу під назвою, курсивом-підказкою */
.hint-ex { font-size: 0.90625rem; color: var(--atmo-text-secondary); margin: -2px 0 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   ХВИЛЯ 1 ДИЗАЙН-ВЕКТОРА (29.08): ієрархія і ритм
   ══════════════════════════════════════════════════════════════════════════
   Три правила: числа-герої більші за назви; повітря МІЖ смисловими блоками
   помітно більше, ніж усередині; другорядне — текстом, не панелями.
   Логіка не чіпалась — лише вага, розміри й відстані. */

/* Число-герой у таблетках шапки результату: цифра зверху, підпис під нею.
   Раніше «5 професій підібрано» читалось одним рядком одного розміру. */
.hero-stat { flex-direction: column; align-items: flex-start; gap: 1px; padding: 12px 18px 10px; }
.hs-value {
  font-family: var(--atmo-font-display); font-size: 2.375rem; font-weight: 800;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.hs-label { font-size: 0.84375rem; line-height: 1.25; }
@media (max-width: 480px) {
  .hero-stat { padding: 10px 14px 8px; }
  .hs-value { font-size: 1.875rem; }
}

/* .pmatch-num прибрано разом із виносним відсотком на картці. Він був
   найгучнішим елементом продукту (34px, вага 800) — при тому, що продукт
   сам підписує під п'ятіркою «відсоток — це не шанс влаштуватись».
   Тепер це тло-факт у рядку .prof-fact, тим самим регістром, що й зарплата. */

/* Повітря між зонами вдвічі більше за повітря всередині: межі смислових
   блоків мають зчитуватись без читання заголовків */
.zone { margin-bottom: 104px; }
.zone-head { margin-bottom: 26px; }
@media (max-width: 600px) { .zone { margin-bottom: 64px; } }

/* Ваучерний блок: кількість — великим числом поруч із текстом */
.vch-lead-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.vch-big {
  flex: 0 0 auto; font-family: var(--atmo-font-display); font-size: var(--t-main);
  font-weight: var(--t-main-w); line-height: 1; font-variant-numeric: tabular-nums;
  /* Нейтральне: ваучер — умова, а не набуток. І це факт усередині блока,
     а не заголовок сторінки: 46px робили його найбільшим об'єктом
     результату — більшим за те, заради чого результат існує. */
  color: var(--atmo-text);
}
.vch-lead-row .vch-lead { margin: 2px 0 0; }

/* ── Міст «259 → 5» ──────────────────────────────────────────────────────
   Був єдиною майже-чорною вставкою сторінки. Код, який трапляється рівно
   один раз, — це не код, а прикраса: розшифрувати його нема з чим, зате
   він робив доказ роботи алгоритму найважчим об'єктом усієї зони пояснень.
   Тепер це нейтральний блок, а вагу числам дає кегль — рівно так само, як
   у містку такту 2, де порожнеча важить більше за будь-яку фарбу. */
.ink-bridge {
  background: var(--role-fact-bg);
  color: var(--atmo-text); border-radius: var(--radius-card);
  padding: 24px 26px; margin-bottom: 18px;
}
.ib-nums {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--atmo-font-display); font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.ib-total { font-size: var(--t-main); font-weight: 400; color: var(--atmo-text-secondary); }
.ib-arrow { font-size: var(--t-main); font-weight: 400; color: var(--atmo-text-secondary); }
.ib-five { font-size: var(--t-main); color: var(--atmo-text); }
.ib-text { margin: 10px 0 0; font-size: var(--t-quiet); line-height: 1.5; color: var(--atmo-text-secondary); max-width: 56ch; }
@media (max-width: 480px) {
  .ink-bridge { padding: 20px; }
  /* кегль тепер спільний із головним, окремих мобільних значень не треба */
}
/* Темної пари не треба: --role-fact-bg і --atmo-text її вже мають. */
/* Друкований примірник маршруту: на екрані його нема, на папері він
   замінює підсумок. */
.plan-print { display: none; }

@media print {
  .ink-bridge { display: none !important; }
  .plan-print { display: block !important; }
  .planpanel, .pl-open, .pl-change, .remind-row { display: none !important; }
  .pp-step { margin: 0 0 14px; page-break-inside: avoid; }
  .pp-num { font-weight: 700; margin-bottom: 4px; }
  /* На папері двері відчинені всі: натиснути на аркуш не можна. */
  .fold-body { display: block !important; }
  .fold-arrow { display: none !important; }
}

/* ── Хвиля 3: жива поява результату ─────────────────────────────────────────
   Картки п'ятірки не з'являються всі одразу, а «проявляються» з кроком:
   око встигає зареєструвати кожну як окрему відповідь, а не стіну карток.
   Клас .profs-in вішає скрипт лише при ПЕРШОМУ показі результату. */
/* backwards, НЕ both: прихованість діє лише під час затримки самої
   анімації. Якщо анімацію щось вимкне (розширення, старий браузер),
   картки просто стоять видимі — головний контент не можна ставити
   в залежність від того, чи програвся ефект. */
.profs-in .prof { animation: prof-rise .4s ease backwards; }
.profs-in .prof:nth-child(1) { animation-delay: .05s; }
.profs-in .prof:nth-child(2) { animation-delay: .13s; }
.profs-in .prof:nth-child(3) { animation-delay: .21s; }
.profs-in .prof:nth-child(4) { animation-delay: .29s; }
.profs-in .prof:nth-child(5) { animation-delay: .37s; }
@keyframes prof-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .profs-in .prof { animation: none; }
}

/* ── Редизайн флоу результату (29.08): менше вітрини, більше шляху ────────
   Нові дрібні елементи. Великі зміни — це ВИДАЛЕННЯ: сценарні картки і
   зарплатні пілюлі прибрані, ваучер і «варто знати» переїхали в тиху зону
   наприкінці, на картці щонайбільше дві мітки. */

/* Один тихий рядок чесних меж ПІД картками (замість трьох речень над ними).
   Колір — основний текст із прозорістю, а не text-secondary: рядок лежить
   на тлі сторінки (не панелі), і secondary там не добирав контрасту 4.5:1. */
.profs-note {
  margin: 14px 0 0; font-size: 0.90625rem; line-height: 1.5;
  color: var(--atmo-text); opacity: .78; max-width: 66ch;
}

/* Позначка «старт нижчий за твою межу» на картці: бурштин, не червоний —
   це чесне уточнення, а не помилка чи вирок */
/* Роль ОБЕРЕЖНІСТЬ: ті самі токени, що й у .role-chip.care, плюс знак.
   Літерали #92610C/#FCF4E4 знято — вони не мали пари для темної теми. */
.floor-note {
  display: inline-flex; align-items: flex-start; gap: 7px;
  margin-top: 8px; font-size: 0.875rem; line-height: 1.45;
  color: var(--role-care-ink); background: var(--role-care-bg);
  border-radius: var(--radius-button); padding: 7px 12px; align-self: flex-start;
}
.floor-note .ic { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }

/* Рядок про межу доходу НАД картками. Єдине пояснення, яке стоїть вище
   за п'ятірку: це не методика, а суперечність із тим, що людина сама
   назвала умовою, і кнопка поруч дозволяє її розв'язати не виходячи
   з екрана. Тому й вигляд інший, ніж у тихих приміток унизу: рамка,
   а не сірий текст. */
.floor-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  margin: 0 0 14px; padding: 10px 14px;
  font-size: 0.9375rem; line-height: 1.45;
  color: var(--role-care-ink); background: var(--role-care-bg);
  border-radius: var(--radius-card);
}
.floor-line .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.floor-line span { flex: 1 1 240px; }
.floor-line .pc2-link { flex: 0 0 auto; }
/* Важіль увімкнено — стан спокійний, бо це вже виконана обіцянка,
   а не попередження. */
.floor-line.on { color: var(--role-support-ink); background: var(--role-support-bg); }

/* Тиха зона «Наостанок»: довідка після всього — менший заголовок,
   менше повітря, без пункту в навігації зон */
.zone-quiet { margin-bottom: 60px; }
.zone-quiet .zone-title { font-size: var(--t-section); opacity: .85; }

/* «Що ми врахували з твоїх перших відповідей» — розписка по анкеті */
.intake-echo { margin-bottom: 22px; }
.ie-title { margin: 0 0 16px; font-size: var(--t-section); font-weight: var(--t-section-w); }
.ie-row { display: flex; gap: 12px; margin: 0 0 14px; }
.ie-check {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--atmo-accent-green); color: var(--entry-fast-text);
  display: inline-flex; align-items: center; justify-content: center;
}
.ie-check svg { width: 14px; height: 14px; }
.ie-label {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--atmo-text-secondary);
}
.ie-text { font-size: 0.96875rem; line-height: 1.55; margin-top: 2px; }
.ie-honest {
  margin: 18px 0 0; padding: 12px 16px; font-size: 0.9375rem; line-height: 1.55;
  background: var(--atmo-surface-hover); border-radius: 12px;
  color: var(--atmo-text);
}

/* Підпис під «Як туди зайти»: звідки зарплатні цифри і де реальні */
.ep-source {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--atmo-border);
  font-size: 0.875rem; line-height: 1.5; color: var(--atmo-text-secondary);
}

@media (prefers-color-scheme: dark) {
  .floor-note { background: #3A2E14; color: #E8C275; }
  .ie-honest { background: #1B2440; }
}

/* ── Результат, який не губиться + текст про себе (29.08) ────────────────── */

/* Банер режиму перегляду за кодом: одна дія — забрати результат собі */
.bycode-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--atmo-primary-light);
  border: 1px solid var(--atmo-primary);
  border-radius: var(--radius-card); padding: 14px 18px; margin-bottom: 18px;
}
.bb-icon { flex: 0 0 auto; display: inline-flex; color: var(--atmo-primary); }
.bb-icon svg { width: 22px; height: 22px; }
.bb-text { flex: 1 1 260px; font-size: 0.9375rem; line-height: 1.5; }
.bb-btn {
  flex: 0 0 auto; font: inherit; font-weight: 700; font-size: 0.9375rem;
  background: var(--atmo-primary); color: var(--on-primary); border: none;
  border-radius: var(--radius-pill); padding: 10px 20px; cursor: pointer;
}
.bb-btn:hover { filter: brightness(1.06); }
.bb-btn.quiet {
  background: transparent; color: var(--atmo-primary);
  border: 1px solid var(--atmo-primary);
}

/* Код повернення у діях наприкінці: код великим моноширинним, пояснення тихе */
.ft-code {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 16px 0 4px; padding: 12px 14px;
  background: var(--atmo-surface-hover); border-radius: 12px;
}
.ft-code-value {
  flex: 0 0 auto;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 1.375rem; font-weight: 700; letter-spacing: .08em;
  color: var(--atmo-primary); padding-top: 1px;
}
/* основний текст із прозорістю замість text-secondary: на сірому тлі
   surface-hover secondary давав 4.45:1 — на волосок нижче норми 4.5 */
.ft-code-text { font-size: 0.84375rem; line-height: 1.5; color: var(--atmo-text); opacity: .8; }

/* Текст про себе: поле-чернетка, яке правлять перед копіюванням */
.aboutme-lead { margin: 0 0 12px; font-size: 0.9375rem; line-height: 1.55; }
.aboutme-field {
  width: 100%; box-sizing: border-box; resize: vertical;
  font: inherit; font-size: 0.96875rem; line-height: 1.55;
  color: var(--atmo-text); background: var(--atmo-surface);
  border: 1.5px solid var(--atmo-border); border-radius: 12px;
  padding: 12px 14px; min-height: 150px;
}
.aboutme-field:focus { outline: none; border-color: var(--atmo-primary); }
.aboutme-note {
  margin: 10px 0 14px; font-size: 0.84375rem; line-height: 1.5;
  color: var(--atmo-text-secondary);
}

@media (prefers-color-scheme: dark) {
  .bycode-banner { background: #1B2440; border-color: #3D5AFE; }
  .bb-btn { background: #3D5AFE; }
  .bb-btn.quiet { background: transparent; color: #8FA3FF; border-color: #3D5AFE; }
  .ft-code-value { color: #8FA3FF; }
}

/* ── Експертний прохід «преміум-просто» (29.08) ───────────────────────────
   Точкові вирівнювання, знайдені виміром: різнобій руйнує відчуття якості
   сильніше, ніж будь-яка окрема прикраса його створює. */

/* Тиха зона «Наостанок» була ГОЛОСНІШОЮ (22px) за головні зони (21px) —
   рівно навпаки до її ролі. Тепер вона справді тиха. */
.zone-quiet .zone-title { font-size: var(--t-section); opacity: .7; }

/* H3 на сторінці результату жили трьома розмірами (19/20/21px).
   Один рівень ієрархії — один розмір: 20px. */
.vch-title { font-size: var(--t-section); }
.worth h3, .valuecombo h3 { font-size: 1.25rem; }

/* Ряд другорядних дій наприкінці: сітка з рівними клітинками замість
   флекса, де одна кнопка з довшим текстом ставала вдвічі вищою за сусідні
   й ламала ряд. Рівні висоти в ряду — базова ознака доглянутості. */
.footer-acts .ft-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-auto-rows: 1fr; gap: 10px;
}
.footer-acts .ft-row .button { width: 100%; height: 100%; }

/* ── «Що змінилось» + пояснення чужинця + розвилка (29.08, ніч) ─────────── */

/* Панель порівняння з минулим проходженням */
.again { margin-bottom: 22px; }
.ag-title { margin: 0 0 6px; font-size: 1.25rem; }
.ag-lead { margin: 0 0 16px; font-size: 0.9375rem; line-height: 1.55; color: var(--atmo-text-secondary); }
.ag-row { display: flex; gap: 12px; margin: 0 0 12px; }
.ag-label {
  flex: 0 0 118px; font-size: 0.8125rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--atmo-text-secondary); padding-top: 2px;
}
.ag-text { font-size: 0.96875rem; line-height: 1.55; }
/* Ядро — головний рядок: підсвічуємо зеленим, це сигнал стабільності */
.ag-row.ag-core .ag-label { color: var(--entry-fast-text); }
.ag-row.ag-core .ag-text { font-weight: 600; }

/* Рядок над картками про професії, що втримались */
.again-core {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--atmo-accent-green); color: var(--entry-fast-text);
  border-radius: 12px; font-size: 0.90625rem; line-height: 1.5; font-weight: 600;
}
.again-core svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }

/* Пояснення професії, що випадає з ряду п'ятірки, — тихий рядок причини */
/* ── «Чому саме тобі» — це якір картки, а не примітка ────────────────────
   Рядок був найтихішим на картці: 13,5px, курсив, прозорість .75 — тобто
   дрібніший і блідіший за опис професії, який однаковий для всіх. Виходило
   навпаки до змісту: спільне звучало голосно, особисте — пошепки.

   Тепер це помітно інший рід тексту: повний колір, звичайне накреслення й
   тонка синя риска зліва. Риска робить головну роботу — око бачить, що цей
   рядок належить ЇЙ, ще до того, як прочитає перше слово. Курсив зняв:
   на телефоні він читається повільніше, а цей рядок мусять прочитати. */
.prof-why {
  margin-top: 10px; padding-left: 10px;
  border-left: 2px solid var(--atmo-primary);
  font-size: var(--t-quiet); line-height: 1.5;
  color: var(--atmo-text);
}

/* ── Компетентнісні шаблони + предметні шляхи (29.08, ніч) ──────────────── */

/* Вкладки .am-tabs/.am-tab видалено разом із самими вкладками: три
   заготовки «про себе» тепер стоять одна під одною на одному екрані —
   з вкладками дві з трьох лишались непоміченими. */

/* Скрипт розмови у маршруті: готові слова, з якими прийти в центр
   зайнятості. Виглядає як репліка — лівий кант і легкий фон. */
.pl-say {
  margin: 10px 0; padding: 10px 14px;
  border-left: 3px solid var(--atmo-primary);
  background: var(--atmo-primary-light);
  border-radius: 0 10px 10px 0;
  font-size: 0.90625rem; line-height: 1.55;
}

/* Зелений варіант примітки маршруту: «у тебе це вже є» */
.pl-note.pl-good { background: var(--atmo-accent-green); color: var(--entry-fast-text); }

@media (prefers-color-scheme: dark) {
  .pl-say { background: #1B2440; border-left-color: #3D5AFE; }
}

/* ── Один екран «Що говорити на співбесіді» + шапка з образом (29.08) ───── */

/* Секції заготовок одна під одною — без вкладок */
.am-section { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--atmo-border); }
.am-section:first-of-type { border-top: none; padding-top: 0; }
.am-title { margin: 0 0 4px; font-size: 1.0625rem; }
.am-hint { margin: 0 0 10px; font-size: 0.875rem; color: var(--atmo-text-secondary); }
/* Пояснення порожнього розділу навичок: примітка, а не помилка,
   тому тон тихий — той самий, що й в інших службових рядках. */
.am-empty-note {
  margin: 0 0 18px; padding: 12px 14px; font-size: 0.90625rem; line-height: 1.5;
  color: var(--atmo-text-secondary); background: var(--atmo-surface-hover);
  border-radius: var(--radius-button);
}
/* Пропозиції з опису колишньої роботи. Стоять ПІД полем і візуально
   окремо від нього: у полі — те, що людина стверджує, тут — те, що вона
   ще не підтвердила. Мітки — кнопки: натиснула, і рядок пішов у поле. */
.am-suggest { margin: 10px 0 0; padding: 12px 14px;
  background: var(--atmo-surface-hover); border-radius: var(--radius-button); }
.am-suggest .am-hint { margin: 0 0 8px; }
.am-suggest .pc2-pill { cursor: pointer; border: none; font: inherit; }

.am-copy { margin-top: 8px; }

/* Дії шапки результату: головна кнопка веде до карток, сторіз — тиха */
.hero-ctas { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.hero-ctas .hero-go { width: auto; }

/* Фото професії в практичній шапці — трохи менше за архетипне */
/* Такт 1: портрет менший і збоку. На мобільному він займав половину
   першого екрана, і людина після ста питань бачила спершу картинку,
   а дію мусила шукати скролом. */
.hero-practical .hero-photo { width: 96px; height: 96px; flex: 0 0 96px; border-radius: var(--radius-card); }
@media (max-width: 600px) {
  /* І на вузькому екрані портрет лишається збоку, а не на всю ширину:
     такт 1 має вміститись у перший екран цілком. */
  .hero-practical .hero-photo { width: 72px; height: 72px; max-width: none; flex: 0 0 72px; margin: 0; }
}

/* Розвилка п'ятірки — тихий рядок впритул до карток, на яких її мітки */
.fork-note {
  margin: 0 0 12px; font-size: 0.90625rem; line-height: 1.5;
  color: var(--atmo-text); opacity: .8; max-width: 66ch;
}

/* Дзеркало плаского профілю: бурштин — це пояснення особливості, не помилка */
.flat-note {
  margin: 0 0 14px; padding: 12px 16px;
  background: var(--role-fact-bg); color: var(--role-fact-ink);
  border-radius: 12px; font-size: 0.90625rem; line-height: 1.55; max-width: 70ch;
}

/* Чипи .hero-chips/.hchip видалено разом із практичними числами шапки
   (три такти, 29.08): гроші й ваучер — мова зони варіантів, вони живуть
   на самих картках; шапка говорить лише голосом ідентичності. */

/* Міст як такт-перехід між «хто ти» і «які варіанти»: стоїть окремо,
   з повітрям з обох боків — двері між кімнатами, а не перший експонат */
.ink-bridge { margin: 36px 0 28px; }

/* ── Справжній місток між тактами (29.08, фінал) ──────────────────────────
   Найтихіший момент сторінки: один рядок без панелі, з повітрям з обох
   боків. Вага дана простором, а не фарбою. */
.takt-bridge {
  margin: 44px auto 36px; text-align: center;
  font-family: var(--atmo-font-display); font-weight: 600;
  color: var(--atmo-text); opacity: .85; letter-spacing: -.01em;
}

/* Міст «259→5» у зоні пояснень — звичайні відступи блока в панельному ряду */
#zone-why .ink-bridge { margin: 0 0 22px; }

/* Підпис під картками тепер може мати два абзаци — однією мовою */
.profs-note p { margin: 0 0 8px; }
.profs-note p:last-child { margin-bottom: 0; }

/* Стрічка «Ти не з нуля» використовує .again-core (зелений рядок = «вже
   добре») — окремих стилів їй не треба. Стилі .flat-note і .carried/.ca-*
   лишаються для сумісності зі старими збереженнями, але з результату
   жовта плашка і біла панель прибрані. */

/* ── ТАКТ 1 — власний екран ──────────────────────────────────────────────
   Порожнеча під шапкою добирається до висоти вікна, і міст завжди
   починається за згином, а не разом із шапкою на високому екрані.
   svh, а не vh: на телефоні панель браузера не має з'їдати такт. */
.takt-one { min-height: calc(100vh - 64px); }
@supports (height: 100svh) { .takt-one { min-height: calc(100svh - 64px); } }

/* ── ТАКТ 2 ──────────────────────────────────────────────────────────────
   Найпорожніший такт сторінки — і тому найпомітніший. Повітря тут і є
   інструментом: між тактами 1 і 3 має бути видих, а не ще один блок.
   Тому відступи більші за будь-які інші на сторінці, а всередині — рівно
   один сильний рядок і один тихий. */
/* Такт 2 займає власний екран, а не проміжок між блоками: інакше він
   потрапляє в поле зору разом із тактом 1 і перестає бути паузою.
   Вертикальне центрування робить порожнечу навколо рядка навмисною. */
.takt-bridge {
  max-width: 46ch; margin: 0 auto; opacity: 1;
  /* 80vh, а не 62: такт 1 має бути чистим видихом, і поки міст видно
     краєм ока, він лишається частиною першого екрана, а не паузою після
     нього. Ризик тут один — щоб такт 1 не прочитався як «це все». Його
     знімає карта зон угорі: вона названа до того, як людина скролить,
     і показує, що попереду ще двоє дверей. */
  min-height: 80vh; display: flex; flex-direction: column; justify-content: center;
}
.takt-bridge .tb-turn {
  margin: 0 0 14px; font-family: var(--atmo-font-display);
  font-size: var(--t-main); line-height: 1.4; font-weight: var(--t-main-w);
  letter-spacing: -.015em; color: var(--atmo-text);
}
.takt-bridge .tb-proof {
  margin: 0; font-family: var(--atmo-font-primary);
  font-size: 0.9375rem; line-height: 1.55; font-weight: 400;
  color: var(--atmo-text-secondary); letter-spacing: 0;
}
@media (max-width: 720px) {
  .takt-bridge { min-height: 72vh; }
  /* кегль головного той самий на будь-якій ширині */
}

/* ── Трекер маршруту: стрічка кроків + панель одного кроку (29.08) ──────── */

/* Стрічка: рівна горизонтальна вісь, статус видно без читання */
.steptrack {
  display: flex; align-items: flex-start;
  margin: 18px 0 0; padding: 4px 0 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.steptrack::-webkit-scrollbar { display: none; }
.st-node {
  flex: 0 0 auto; min-width: 68px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--atmo-text-secondary);
}
.st-dot {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9375rem; font-weight: 700;
  background: var(--atmo-surface-hover); color: var(--atmo-text-secondary);
  border: 2px solid transparent;
  transition: transform .12s, background .12s;
}
.st-lab { font-size: 0.78125rem; font-weight: 600; line-height: 1.2; text-align: center; }
/* зроблено: зелений з галочкою */
.st-node.done .st-dot { background: var(--atmo-accent-green); color: var(--entry-fast-text); }
.st-node.done .st-lab { color: var(--entry-fast-text); }
/* активний: синій, трохи більший — «ти тут» */
/* «Ти тут» — чорнилом, як і поточна зупинка в карті зон. Був залитий
   синій, тобто маркер позиції говорив кодом дії: ніби тут щось треба
   вирішити, хоч він лише показує місце. */
.st-node.act .st-dot {
  background: var(--atmo-text); color: var(--atmo-bg); transform: scale(1.12);
}
.st-node.act .st-lab { color: var(--atmo-primary); }
/* сегмент лінії: залитий, коли попередній крок закрито */
.st-seg {
  flex: 1 1 22px; height: 3px; margin-top: 16px; min-width: 14px;
  background: var(--atmo-border); border-radius: 2px;
}
.st-seg.filled { background: var(--entry-fast-text); }

/* Панель одного кроку */
.pl-panel { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--atmo-border); }

/* Кнопка-статус кроку */
.st-mark {
  margin-top: 14px; font: inherit; font-size: 0.9375rem; font-weight: 700;
  padding: 10px 20px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1.5px solid var(--atmo-primary); background: transparent;
  color: var(--atmo-primary);
}
.st-mark.on {
  background: var(--atmo-accent-green); border-color: transparent; color: var(--entry-fast-text);
}
.st-auto { margin-top: 12px; font-size: 0.875rem; color: var(--atmo-text-secondary); }

/* Спойлер репліки: лінк-розкривач замість завжди відкритого блока */
.say-fold { margin: 10px 0; }
.say-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.90625rem; font-weight: 600;
  color: var(--atmo-primary); text-decoration: underline;
  text-underline-offset: 3px;
}
.say-toggle.open { text-decoration: none; opacity: .75; }
.say-fold .pl-say { margin-top: 8px; }

@media (prefers-color-scheme: dark) {
  .st-seg.filled { background: #2E7D5B; }
}

/* ── Фінальний акорд + гачок глибини (29.08) ─────────────────────────────── */

/* Гачок у шапці: тихий рядок-лінк до найціннішого розділу */
/* «Перевір мене: 6 осей, 3 сили, 7 цінностей» — той елемент, що хотів бути
   двома ролями: за змістом опора (знімає недовіру), за формою посилання.
   Рішення: вигляд опори, афорданс посилання стрілкою. Синього тексту тут
   більше нема — синій означає дію, а поруч стоїть головна кнопка екрана,
   і два синіх сусіди змагались би за той самий клік. */
.hero-deep {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 9px 13px;
  background: var(--role-support-bg); color: var(--role-support-ink);
  border: none; border-radius: var(--radius-button); cursor: pointer; text-align: left;
  font: inherit; font-size: 0.875rem; line-height: 1.45;
}
.hero-deep::after { content: '↓'; opacity: .55; font-size: 0.9375rem; }
.hero-deep:hover { filter: brightness(.97); }

/* ── Перелік прибраного ──────────────────────────────────────────────────
   Тихий блок унизу зони: він не змагається з картками, але й не ховається.
   Саме він робить хрестик безпечним, тому живе постійно, а не як спливний
   рядок на одну дію. */
/* Перелік прибраного — тихе згортання, а не панель: розгорнутим він ріс
   разом із кількістю прибраного, тобто службова інформація займала тим
   більше місця, чим більше людина працювала з видачею. */
.dm-ledger { margin-top: 18px; }
.dm-ledger .fold-body { padding: 0 16px 14px; }
.dm-led-head {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--atmo-text-secondary);
  margin-bottom: 6px;
}
.dm-led-note {
  font-size: 0.875rem; line-height: 1.5; color: var(--atmo-text-secondary);
  margin-bottom: 10px; max-width: 62ch;
}
.dm-led-list { display: flex; flex-direction: column; gap: 2px; }
.dm-led-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 5px 0;
}
.dm-led-name { font-size: var(--t-object); font-weight: var(--t-object-w); color: var(--atmo-text); }
.dm-led-back {
  flex: 0 0 auto; background: none; border: none; padding: 2px 0;
  font: inherit; font-size: 0.90625rem; font-weight: 600; cursor: pointer;
  color: var(--atmo-primary);
  border-bottom: 1.5px solid currentColor;
}
.dm-led-back:hover { filter: brightness(1.1); }

/* ── Маршрут: карта дороги, не гра ───────────────────────────────────────
   Механіка тут та сама, що в мовних застосунках: видно ціле, фокус на
   поточному, пройдене накопичується. Естетика — навмисно протилежна.
   Жодних балів, серій, святкувань і персонажів: для людини 45+, ВПО чи
   після декрету ігровий вигляд читається як «несерйозно, не для мене».
   Тому це стримана карта дороги в наявній мові продукту. */
.planfull { padding: 0; }

/* Трек липкий: усю дорогу видно завжди. Це і є та опора через видиме —
   ціле винесене в карту, і його не треба тримати в голові. */
.pl-sticky {
  position: sticky; top: 0; z-index: 20;
  margin: 0 0 18px; padding: 12px 0 10px;
  background: var(--atmo-bg);
  border-bottom: 1px solid var(--atmo-border);
}
/* Кінечність сказана словами, а не тільки намальована: на п'яти вузлах
   це один погляд, але напис знімає останній сумнів «а скільки ще». */
.pl-counter {
  margin-top: 8px; text-align: center;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--atmo-text-secondary);
}

/* Підсумок маршруту на сторінці результату: зупинка на карті зон не
   порожня, видно рух — але сама робота живе в окремому вигляді. */
.pl-summary { margin: 14px 0 16px; }
.pl-sum-now {
  font-family: var(--atmo-font-display); font-size: 1.125rem; font-weight: 700;
  color: var(--atmo-text);
}
.pl-sum-done { margin-top: 4px; font-size: 0.90625rem; color: var(--atmo-text-secondary); }
.pl-open { width: auto; margin-top: 0; }

@media (max-width: 480px) {
  .pl-sticky { padding: 10px 0 8px; }
}
/* ── Розвилка після п'ятірки ─────────────────────────────────────────────
   Вузол шляху, тому має вагу панелі — але ваги різні всередині: перша
   кнопка це дорога, друга це присутні двері, третя це виноска. Раніше
   тут стояла одна гучна кнопка каталогу на 259 позицій. */
.fork {
  margin-top: 26px; padding: 20px;
  background: var(--role-support-bg); border-radius: var(--radius-card);
}
.fork-q {
  font-family: var(--atmo-font-display); font-size: var(--t-section); line-height: 1.3;
  font-weight: var(--t-section-w); color: var(--atmo-text); margin-bottom: 14px;
}
.fork-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.fork-go {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--atmo-surface); color: var(--atmo-primary);
  border: 1.5px solid var(--atmo-primary); border-radius: var(--radius-button);
  padding: 12px 20px; font: inherit; font-size: 1rem; font-weight: 600;
  cursor: pointer;
}
.fork-go:hover { background: var(--atmo-primary-light); }
.fork-go .ic { width: 18px; height: 18px; }
.fork-alt {
  background: none; border: 1.5px solid var(--atmo-border);
  border-radius: var(--radius-button); padding: 12px 18px;
  font: inherit; font-size: 1rem; color: var(--atmo-text-secondary);
  cursor: pointer;
}
.fork-alt:hover { border-color: var(--atmo-text-secondary); color: var(--atmo-text); }
.fork-list {
  display: block; margin-top: 12px; background: none; border: none; padding: 0;
  font: inherit; font-size: 0.90625rem; color: var(--atmo-text-secondary);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Владнаний вибір: зона лишається зупинкою на карті, але з відкритої
   задачі стає фактом. */
.picked-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  padding: 14px 18px; background: var(--role-fact-bg); border-radius: 12px;
}
.pr-label {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--atmo-text-secondary);
}
.pr-name { font-size: var(--t-object); font-weight: var(--t-object-w); color: var(--atmo-text); }
.pr-change {
  margin-left: auto; background: none; border: none; padding: 2px 0;
  font: inherit; font-size: 0.90625rem; font-weight: 600; color: var(--atmo-primary);
  border-bottom: 1.5px solid currentColor; cursor: pointer;
}

/* ── Перепідбір ──────────────────────────────────────────────────────────
   Людина приходить сюди в найнижчому ресурсі — щойно розчарувалась. Тому
   на екрані рівно один розгорнутий важіль, другий за тихими дверима, а
   третього (дохід) нема взагалі: він не впливає на добір. */
.rp-said {
  margin: 16px 0; padding: 12px 16px;
  background: var(--role-fact-bg); border-radius: 12px;
  font-size: 0.9375rem; line-height: 1.5; color: var(--atmo-text);
}
.rp-lever { margin: 18px 0 4px; }
.rp-lever-title {
  font-family: var(--atmo-font-display); font-size: var(--t-section); font-weight: var(--t-section-w);
  color: var(--atmo-text); margin-bottom: 8px;
}
.rp-lead { margin: 0 0 12px; font-size: 0.9375rem; line-height: 1.5; color: var(--atmo-text-secondary); }
.rp-dirs { display: grid; gap: 10px; }
.rp-dir {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 12px 14px; background: var(--atmo-surface);
  border: 1px solid var(--atmo-border); border-radius: 12px;
}
.rp-dir-name { font-size: var(--t-object); font-weight: var(--t-object-w); color: var(--atmo-text); }
.rp-dir-opts { display: flex; gap: 6px; }
.rp-opt {
  background: var(--atmo-surface); border: 1.5px solid var(--atmo-border);
  border-radius: var(--radius-pill); padding: 7px 14px;
  font: inherit; font-size: 0.9375rem; color: var(--atmo-text-secondary); cursor: pointer;
}
.rp-opt.on {
  background: var(--atmo-primary); border-color: var(--atmo-primary);
  color: var(--on-primary); font-weight: 600;
}
.rp-opt.wide { display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: 13px 16px; }
.rp-opts { display: block; }
/* Режим «звузити»: один рух на рядок. Людина, яка не знає, чого хоче,
   часто добре знає, чого не хоче — і три кнопки тут були б зайвою роботою. */
.rp-off {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 16px; background: var(--atmo-surface);
  border: 1px solid var(--atmo-border); border-radius: 12px;
  font: inherit; cursor: pointer;
}
.rp-off-box {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
  border: 1.5px solid var(--atmo-border); display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.875rem; line-height: 1;
  color: var(--atmo-text-secondary);
}
.rp-off.on { border-color: var(--atmo-text-secondary); }
.rp-off.on .rp-off-box {
  background: var(--role-fact-bg); border-color: var(--atmo-text-secondary);
  color: var(--atmo-text);
}
.rp-off.on .rp-dir-name { color: var(--atmo-text-secondary); text-decoration: line-through; }

.rp-open { margin-top: 12px; font-size: 0.90625rem; color: var(--atmo-text-secondary); }
.rp-note {
  margin: 18px 0; padding: 14px 16px;
  background: var(--role-fact-bg); border-radius: 12px;
  font-size: 0.9375rem; line-height: 1.55; color: var(--atmo-text-secondary);
}
.rp-nudge {
  margin: 20px 0 8px; font-size: 0.90625rem; line-height: 1.5;
  color: var(--atmo-text-secondary);
}

/* Рядок «що змінилось після уточнення» — та сама граматика, що й рядок
   про заміну картки: тихо, з хрестиком, без панелі-святкування. */
.rp-diff {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 14px; padding: 12px 14px;
  background: var(--role-fact-bg); border-radius: 12px;
}
.rp-diff-body { flex: 1 1 auto; min-width: 0; }
.rp-diff-head {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--atmo-text-secondary); margin-bottom: 3px;
}
.rp-diff-text { font-size: 0.9375rem; line-height: 1.5; color: var(--atmo-text); }
/* Фінал — акорд, а не робочий такт.
   Був зеленим, тобто говорив кодом «вже твоє»: тим самим, яким на картках
   позначено те, що людина вже вміє. Але фінал не про набуток, він про
   пройдений шлях, і другий сенс на тому самому коді плутав обидва.
   Тепер у нього власний теплий тон, якого нема більше ніде. */
.finale {
  background: linear-gradient(160deg, var(--fin-bg-1) 0%, var(--fin-bg-2) 100%);
  border: 1px solid var(--fin-line);
  margin-top: 40px;
}
.fin-title { margin: 0 0 8px; font-size: var(--t-section); font-weight: var(--t-section-w); }
.fin-text { margin: 0 0 14px; font-size: 1rem; line-height: 1.6; max-width: 62ch; }
.fin-go { width: auto; }
.fin-save {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px dashed var(--fin-line);
}
.fin-save-label { font-size: 0.875rem; font-weight: 600; color: var(--fin-accent); margin-bottom: 8px; }
.fin-code-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Код результату — квиток, а не системна помилка.
   34px моноширинним із широким розрядженням і без жодної рамки читались
   як дамп консолі: найбільший об'єкт фіналу виглядав так, ніби щось
   пішло не так. Моноширинний лишається (код диктують і набирають, тут
   важливо не сплутати літери), але тепер він у рамці-квитку, меншим
   кеглем і теплим чорнилом акорду. */
.fin-code {
  display: inline-block; padding: 7px 14px;
  border: 1.5px dashed var(--fin-line); border-radius: var(--radius-button);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: var(--t-object); font-weight: var(--t-object-w); letter-spacing: .08em;
  color: var(--atmo-text);
}
.fin-copy { width: auto; }
.fin-save-note { margin: 10px 0 0; font-size: 0.84375rem; line-height: 1.5; color: var(--atmo-text); opacity: .75; }

/* Низ картки професії: головна дія — залита, другорядна — обведена.
   Дві однаково обведені кнопки не вели нікуди: око не знало, що тут
   основне. Вакансії = перевірка реальності вибору, це і є головна дія. */
.detail-acts .button.external {
  background: var(--atmo-primary); color: var(--on-primary); border: none;
}
.detail-acts .button.external:hover { background: #1D4ED8; }

/* Розписка «рахую від твоєї точки» на швидкому результаті */
.qk-mirror {
  margin: 0 0 16px; padding: 10px 14px;
  background: var(--atmo-primary-light); border-radius: 12px;
  font-size: 0.90625rem; line-height: 1.55; color: var(--atmo-text);
}
@media (prefers-color-scheme: dark) {
  .qk-mirror { background: #1B2440; }
}

/* ── Правки сприйняття ранніх екранів (29.08, рецензія) ──────────────────── */

/* Інсайт самооцінки: вага перевернута — вибір (повтор кліку) меншим,
   пояснення (сенс) головним */
/* Два претенденти на ГОЛОВНЕ розведено. Повтор власного кліку («Доводити
   справу до ладу») інформації не несе — він опускається в тло; ГОЛОВНИМ
   стає те, заради чого екран існує: що ця сила означає. */
.sv-flip .sv-picked {
  margin: 4px 0 10px; font-size: 0.9375rem; font-weight: 600;
  color: var(--atmo-text-secondary);
}
.sv-flip .sv-main {
  font-family: var(--atmo-font-display); font-size: var(--t-main); line-height: 1.35;
  font-weight: var(--t-main-w); letter-spacing: -.01em; color: var(--atmo-text);
}

/* Картка напряму: одна ієрархія тексту замість п'яти рівнів.
   Головна думка — темна й більша; деталі та приклади — тихіші. */
.gintro { font-size: 1.0625rem; line-height: 1.55; color: var(--atmo-text); margin: 10px 0 0; }
.gdetail { font-size: 0.90625rem; line-height: 1.55; color: var(--atmo-text-secondary); margin: 8px 0 0; }
.hint-ex { margin-top: 10px; font-size: 0.84375rem; color: var(--atmo-text-secondary); }
/* Питання — головна дія екрана, воно має важити більше за передмову */
.hint-q { font-size: var(--t-main); font-weight: var(--t-main-w); }

/* Спільний знаменник на швидкому результаті — один рядок над картками */
.qk-common {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--atmo-accent-green); border-radius: 12px;
}
.qk-common .qk-take-label { color: var(--entry-fast-text); font-weight: 600; font-size: 0.875rem; }

/* Опції зі станом-колом праворуч: текст не має налазити на коло */
/* Місце під кружечок праворуч. Селектор мусить бути не слабшим за
   body.zoned .option вище (0,2,1), інакше padding-right просто не
   доїжджає — і довга назва навички лягає під сам контрол. Саме це й
   відбувалось: «Вирішення конфліктів та деескалація» налазило на кружечок
   на 22px. Стосується не лише навичок — те саме правило тримає екран
   цінностей. */
body .option.pick, .option.pick { padding-right: 56px; }

@media (prefers-color-scheme: dark) {
  .qk-common { background: #1D3A2A; }
}

/* ── ГОЛОВНЕ на решті екранів питань ─────────────────────────────────────
   Глобальний h1 — 32px, і на екранах навичок, цінностей та самооцінки
   він робив «заради чого цей екран» більшим, ніж на самих питаннях (26px).
   Три різні кеглі для однієї ролі — це рівно те, через що мова не
   встигає вивчитись за прохід. Тут вони зводяться до одного. */
#quiz .skg-head h1,
#quiz .sv-eyebrow + h1,
/* Правило лишається для міжрядка й трекінгу; кегль тепер спільний. */
#quiz main > .fade > h1 {
  font-size: var(--t-main); line-height: 1.22; letter-spacing: -.01em;
}


/* ── ТАКТ 1: тебе побачили ───────────────────────────────────────────────
   Портрет зменшений і відсунутий убік: на мобільному він займав половину
   першого екрана, і людина після ста питань бачила спершу картинку, а
   дію мусила шукати скролом. Тепер у першому екрані вміщається все, що
   такт має сказати, — і вихід із нього. */
.hero-photo {
  width: 96px; height: 96px; flex: 0 0 96px;
  border-radius: var(--radius-card); object-fit: cover;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .10);
}

/* Упізнаваний факт: те, що людина сама набрала в анкеті. Тло-факт за
   кодом — він нічого не просить і нічого не стверджує понад сказане. */
.hero-facts { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; }
/* Повернені людині її ж слова — це ТЛО, а не об'єкт.
   У плашці вони виглядали точно так само, як «Як це порахувалось» одразу
   під ними: дві однакові коробки поспіль, з яких одна інертний текст, а
   друга кнопка. Око вчилось формі, яка нічого не означає. Тепер факт —
   просто рядок, а плашка лишилась там, де вона щось робить. */
.hero-fact {
  display: inline-flex; align-items: flex-start; gap: 8px;
  color: var(--atmo-text-secondary);
  padding: 0; font-size: 0.90625rem; line-height: 1.45;
  align-self: flex-start;
}
/* Печатка — виняток: вона справді чип ролі «вже твоє», і форма в неї
   та сама, що в зелених чипів на картках. */
.hero-fact.seal {
  border-radius: var(--radius-button); padding: 9px 13px;
}
.hero-fact .ic { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
/* Печатка збігу — єдиний випадок, коли в такті 1 з'являється зелений:
   це справді актив людини, підтверджений її ж відповідями. */
.hero-fact.seal { background: var(--role-yours-bg); color: var(--role-yours-ink); }

/* Тиха дія переходу: контур, не заливка. Заливна синя на сторінці одна. */
.takt-go {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--atmo-surface); color: var(--atmo-primary);
  border: 1.5px solid var(--atmo-primary); border-radius: var(--radius-button);
  padding: 11px 20px; font: inherit; font-size: 1rem; font-weight: 600;
  cursor: pointer;
}
.takt-go:hover { background: var(--atmo-primary-light); }
.takt-go .ic { width: 18px; height: 18px; }

/* ── Карта: четвертий пункт — хвіст, не етап ─────────────────────────────
   Візуально відділений проміжком і тихішим тоном: три такти — це дорога,
   а «як порахувалось» — двері збоку від неї. */
.znav-item.znav-tail { margin-left: auto; opacity: .8; font-weight: 500; }
@media (max-width: 560px) {
  .znav-item.znav-tail { margin-left: 0; }
}

/* ── Хвіст: візуально тихіший за такти ───────────────────────────────────
   Довідка й розбір стоять після фіналу, і вони мають читатись як додаток,
   а не як продовження дороги. */
.zone-tail { opacity: .92; }

/* ── Картка «першого погляду»: ущільнена ─────────────────────────────────
   Було п'ять поверхів (назва / чипи навичок / зарплата / ваучер+перехід /
   примітка про межу), і три такі картки давали екран, який доводиться
   долати. Тепер факти лежать в одному ряду, а опис ролі — те, чого тут
   не було зовсім, — стоїть одразу під назвою двома рядками. */
.qk-desc {
  margin: 4px 0 10px; font-size: 0.9375rem; line-height: 1.45;
  color: var(--atmo-text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.qk-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 10px;
}
.qk-facts .qk-pay-num { font-size: 1.125rem; }
.qk-card { padding: 16px 18px; }
.qk-take { margin-top: 2px; }

/* Сьомий варіант на екрані «головна сила»: відповідь на інше питання
   («а якщо ніяка?»), тому стоїть окремо від сітки шести, а не в ній. */
.sv-skip {
  display: block; width: 100%; margin-top: 14px;
  background: var(--atmo-surface); border: 1.5px dashed var(--atmo-border);
  border-radius: var(--radius-button); padding: 14px 18px;
  font: inherit; font-size: 1rem; font-weight: 500;
  color: var(--atmo-text-secondary); cursor: pointer;
}
.sv-skip:hover { border-color: var(--atmo-primary); color: var(--atmo-primary); }


/* Дія картки стоїть у тому самому ряду, що й факти, а не окремим поверхом:
   інакше під нею лишався порожній рядок, і картка знову росла. */
.qk-card .qk-acts { margin-top: -2px; margin-left: auto; }
.qk-card .qk-act { padding: 7px 14px; font-size: 0.9375rem; }
.qk-facts { width: 100%; }
.qk-card { display: flex; flex-wrap: wrap; align-items: center; }
.qk-card .qk-name, .qk-card .qk-desc, .qk-card .qk-take { width: 100%; }
.qk-card .floor-note { width: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   ЗВЕДЕННЯ ХВОСТА ТИПОГРАФІКИ
   ══════════════════════════════════════════════════════════════════════════
   Хребет (головне / розділ / об'єкт) зведено вище, по місцю. Тут — чотири
   родини дрібного тексту, які роз'їхались історично: у кожної була своя
   сходинка на кожному екрані, хоч роль скрізь та сама.

   Правила стоять останніми у файлі свідомо: вони мають перебивати старі
   значення, а переписувати два десятки місць по одному — це та сама
   розсипаність, тільки в новій редакції. */

/* ЧИПИ — дрібні мічені токени: ролі, цінності, риси, оцінки, факти на
   картці. Спільна форма отримує спільний рівень: факт. Було 13.5, 14,
   14.5, 15 і 16 із трьома різними вагами. */
.role-chip, .cn-chip, .fvr-lab, .htrait, .vch-mark, .prof-fact, .skchip {
  font-size: var(--t-quiet); font-weight: var(--t-fact-w);
}

/* НАВІГАЦІЯ — карта зон. Мала три різні ваги на одному контролі (600 для
   звичайного, 700 для поточного, 500 для хвоста), хоч поточну зупинку вже
   позначають чорнило й лінія знизу. Вага більше нічого не кодує. */
.znav-item, .znav-item.on, .znav-item.znav-tail {
  font-size: var(--t-quiet); font-weight: var(--t-fact-w);
}

/* ЯРЛИКИ — рубрики й мітки. Великі літери — це вжиток, а не частина
   рівня: назва кроку в маршруті теж ярлик, але без верхнього регістру. */
.advice .alabel, .fin-save-label, .st-lab, .pl-counter {
  font-size: var(--t-label); font-weight: var(--t-label-w);
}

/* ТЛО — примітки, довідка, тихі підписи. Були 13, 13.5, 14, 15, 15.5. */
.hero-kind, .fold-note, .fold.door .fold-note, .fork-list, .fin-save-note,
.rl-hint, .rl-classic, .ib-text, .ie-text, .tb-proof, .ft-feedback,
.ie-honest, .vch-limited, .hero-deep, .pm.rolenote, .pm.trnote {
  font-size: var(--t-quiet); font-weight: var(--t-quiet-w);
}

/* ЗМІСТ — те, що читають. Дрібніші за 17px абзаци підтягуються до рівня:
   різниця в один-два пікселі не кодує нічого, а око все одно її ловить. */
.fin-text, .forces-sub, .fnat-item, .cn-text, .rp-lead, .pl-sum-done {
  font-size: var(--t-body); font-weight: var(--t-body-w);
}
/* ДІЯ — той самий кегль, що зміст: вагою сказано, що це можна натиснути.
   Кнопка не має бути більшою за те, про що вона: колір уже все сказав. */
.takt-go, .fork-go, .fork-alt, .hero-story-btn, .prof-more, .hero-share,
.pr-change, .pl-change, .say-toggle, .fvr-title, .rl-name {
  font-size: var(--t-body); font-weight: var(--t-act-w);
}

/* Мобільні перевизначення кеглів прибрано: система має бути та сама на
   будь-якій ширині, інакше вона не система. Місце економимо відступами. */
@media (max-width: 600px) {
  .znav-item { font-size: var(--t-quiet); }
}
@media (max-width: 480px) {
  .fvr-lab { font-size: var(--t-quiet); }
}

/* Рештки, які не взяли через старшинство селекторів: у кожної був
   двослівний селектор, сильніший за родинне правило вище. Дописуємо їх
   тим самим списком, а не переписуємо по місцю — так видно, що це один
   і той самий рівень, а не двадцять окремих рішень. */
.takt-bridge .tb-proof, .pl-progress, .vch-steps li, .starlabel {
  font-size: var(--t-quiet); font-weight: var(--t-quiet-w);
}
.force .fnat-item, .small, .panel .hero-essence, .panel .hero-body .hero-essence {
  font-size: var(--t-body); font-weight: var(--t-body-w);
}
@media (max-width: 600px) { .hero-essence { font-size: var(--t-body); } }

/* Останні розсипані місця, знайдені промірoм живого DOM: чек-лист маршруту,
   контекст напряму, рядок сходинок, мета-рядок ваучера, посилання на силі
   та два h3, що лишились із власними значеннями. Ролі в них звичайні —
   зміст, факт і розділ, — просто до системи вони не були підключені. */
.pl-check, .dir-note, .ps-text, .flink, .flink span { font-size: var(--t-body); }
.flink span { font-weight: var(--t-act-w); }
.vch-meta, .vch-meta span { font-size: var(--t-quiet); font-weight: var(--t-quiet-w); }
.panel.valuecombo h3, .worth-head h3 {
  font-size: var(--t-section); font-weight: var(--t-section-w);
}

/* Зарплата на картці була 17/700 — найгучніше після назви професії й
   голосніше за опис самої роботи. За роллю це факт: людині він потрібен,
   але картку веде не він. Табличні цифри лишаються, кричати перестають.
   Правило дописане останнім, бо .ps-text підключений до рівня «зміст»
   вище, а тут йому потрібен рівень «факт». */
.prof .prof-salary, .prof .ps-text, .prof .ps-text b {
  font-size: var(--t-quiet); font-variant-numeric: tabular-nums;
}
.prof .ps-text { font-weight: var(--t-quiet-w); }
.prof .ps-text b { font-weight: var(--t-fact-w); }

/* ══════════════════════════════════════════════════════════════════════════
   ФОРМА: ЧОТИРИ ОРГАНИ КЕРУВАННЯ ЗАМІСТЬ ДВАДЦЯТИ ДВОХ
   ══════════════════════════════════════════════════════════════════════════
   Промір живого DOM: 22 різні «шкури» кнопок — свої фон, рамка, радіус і
   відступи майже в кожної. Кнопка з рамкою 0.8px і радіусом 20px поруч із
   кнопкою без рамки й радіусом 10px не читаються як один вид предмета,
   тому око щоразу заново вирішує, що з цього можна натиснути.

   Ролей насправді чотири, і вони збігаються з мовою важливості:
     ДІЯ        — залита синім. Одна на екран, на справжньому рішенні.
     ДРУГА ДІЯ  — обведена. Скільки завгодно.
     ТИХА ДІЯ   — текст із підкресленням, без коробки.
     ІКОНКА     — коло.
   Розмір у всіх однаковий: кнопка не має бути більшою за те, про що вона. */

/* ДРУГА ДІЯ — один вигляд для всіх обведених. Були: біла з синьою рамкою,
   прозора з сірою, біла з сірою, з радіусами 12 і 20. */
.takt-go, .fork-go, .fork-alt, .hero-share, .hero-story-btn,
.button.secondary, .button.external {
  background: var(--atmo-surface);
  border: 1.5px solid var(--atmo-border);
  border-radius: var(--radius-button);
  padding: 13px 20px;
  color: var(--atmo-text);
  box-shadow: none;
}
.takt-go:hover, .fork-go:hover, .fork-alt:hover, .hero-share:hover,
.hero-story-btn:hover, .button.secondary:hover, .button.external:hover {
  border-color: var(--atmo-primary); color: var(--atmo-primary);
  background: var(--atmo-surface);
}
/* Дорога вперед серед обведених виділяється синім чорнилом і рамкою —
   але не заливкою: заливка закріплена за справжнім рішенням. */
.takt-go, .fork-go, .button.external {
  border-color: var(--atmo-primary); color: var(--atmo-primary);
}

/* ТИХА ДІЯ — без коробки взагалі. */
.fork-list, .pr-change, .say-toggle, .prof-more, .ft-feedback, .pl-change, .pl-link {
  background: none; border: none; padding: 0;
  /* Тиха дія — єдина синя, що лежить ПРЯМО НА ФОНІ сторінки, без картки
     під собою. Основний синій дає там 4,46:1 (на білій картці — 5,17),
     тож саме тут беремо темніший відтінок того самого синього. Заливки
     кнопок лишаються на --atmo-primary: у них фон свій. */
  color: var(--atmo-primary-dark);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--atmo-primary-dark) 35%, transparent);
}

/* ІКОНКА — коло одного розміру. */
.card-dismiss, .cmp-toggle, .qmark {
  border-radius: var(--radius-round);
}

/* Опора й тихі плашки більше не мають власних радіусів: та сама форма,
   що в органів керування, бо стоять із ними в одному ряду. */
.role-support, .hero-deep, .hero-fact.seal, .rp-said, .rp-note,
.dm-ledger, .picked-row, .rp-diff, .fork {
  border-radius: var(--radius-button);
}

/* Головна дія була вищою за решту (16/24 проти 13/20) — тобто в одному
   ряду стояли кнопки різного зросту. Первинність каже колір, а не розмір:
   заливка вже все сказала. Тепер усі органи керування одного зросту. */
.button { padding: 13px 20px; }

/* Рамка картки професії відрізнялась від усіх інших на один відтінок —
   різниця, яку око ловить, а розум не може пояснити. */
.prof { border-color: var(--atmo-border); }

/* Розвилка була світло-синьою панеллю. Поки зона теж була панеллю, це
   якось трималось; на кольоровому тлі сторінки вона зникла — на скріні
   видно, що блок ні на чому не стоїть. Вузол шляху має бути предметом,
   тобто такою самою білою карткою, як усе інше. */
.fork {
  background: var(--atmo-surface);
  border: 1px solid var(--atmo-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px;
}

/* «Ти не з нуля» була суцільною насиченою зеленою плашкою з напівжирним
   текстом — найгучніший об'єкт у своєму ряду, хоч це нагадування, а не
   висновок. Той самий прийом, що вже застосований до опори в маршруті:
   колір лишається (це справді «вже твоє»), вага падає до смуги збоку. */
.again-core {
  background: none;
  border-left: 3px solid var(--atmo-accent-green);
  border-radius: 0;
  padding: 2px 0 2px 14px;
  font-weight: 400;
  color: var(--atmo-text);
}

/* Підпис під картками — довідка про те, що означає відсоток і зарплати.
   Це тло, а не зміст: стояв 17-м кеглем і читався як абзац, який треба
   прочитати, хоч його читають лише ті, у кого виникло питання. */
.profs-note p { font-size: var(--t-quiet); line-height: 1.55; }

/* Код і кнопка копіювання стояли різного зросту: пунктирна коробка з
   власними відступами поруч із кнопкою з іншими. Один ряд — один зріст. */
.fin-code {
  padding: 13px 20px; line-height: 1.2;
}
.fin-code-row { align-items: stretch; }
.fin-code-row .button { display: inline-flex; align-items: center; }

/* Кнопки в одному ряду не мають нести власних вертикальних відступів —
   інакше вони стоять на різній висоті, хоч ряд і вирівняний. */
.hero-ctas > * { margin-top: 0; margin-bottom: 0; }
.fork-acts > *, .fin-code-row > *, .detail-acts > * { margin-top: 0; margin-bottom: 0; }

/* Тіней було шість, і дві з них робили одну й ту саму роботу — піднімали
   картку над тлом, тільки різною силою. Різниця, яку око ловить, а розум
   пояснити не може, — це і є шум. Лишається одна тінь картки й одна
   сильніша для того, що людина тримає пальцем (наведення). */
.panel, .prof, .force, main.detail .panel, .zone .panel {
  box-shadow: var(--shadow-card);
}
.prof:hover, .force:hover, .orow:hover {
  box-shadow: var(--shadow-lift);
}

/* Мобільні відступи зони теж більше не панельні: зона — це повітря. */
@media (max-width: 600px) { .zone { padding: 0; border-radius: 0; } }

/* ══════════════════════════════════════════════════════════════════════════
   ТАКТ 1: ОБРАЗ, ЦИТАТА, ДОРОГА
   ══════════════════════════════════════════════════════════════════════════
   Композиція була розбалансована: маленький портрет збоку, велике речення
   на три рядки поруч і дрібний сірий рядок з назвою типу під ним. Образ і
   його ім'я жили окремо, а речення важило більше за все навколо.
   Тепер це три речі замість п'яти: фігура (портрет із табличкою), цитата
   й дорога вниз. */

.hero-figure { position: relative; flex: 0 0 auto; align-self: flex-start; }
.hero-practical .hero-figure .hero-photo,
.hero-figure .hero-photo {
  display: block; width: 176px; height: 176px; flex: 0 0 176px;
  border-radius: var(--radius-card); object-fit: cover;
  box-shadow: var(--shadow-card);
}
/* Табличка на непрозорій підкладці: напис поверх фотографії інакше тоне
   в ній — світлий на світлому, темний на темному, залежно від кадру. */
.hero-badge {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  background: var(--atmo-surface);
  border: 1px solid var(--atmo-border);
  border-radius: var(--radius-button);
  padding: 7px 11px 8px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .16);
}
.hero-badge-label {
  display: block;
  font-size: var(--t-label); font-weight: var(--t-label-w);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--atmo-text-secondary); margin-bottom: 1px;
}
.hero-badge-name {
  display: block; font-family: var(--atmo-font-display);
  font-size: var(--t-object); font-weight: var(--t-object-w);
  line-height: 1.15; color: var(--atmo-text); letter-spacing: -.01em;
}

/* Цитата: репліка, а не заголовок. Ліва лінія кольором дії — той самий
   прийом, що в опори, тільки без заливки: це не прохання, це дзеркало. */
.hero-quote {
  margin: 2px 0 0; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--atmo-primary);
  font-family: var(--atmo-font-display);
  font-size: 1.1875rem; line-height: 1.42; font-weight: 500;
  letter-spacing: -.01em; color: var(--atmo-text);
  max-width: 46ch;
}

/* Три ряди дій ідуть згори вниз у порядку руху, тому кожен на своєму
   рядку, а не всі в одну лінію. */
.hero-ctas { margin-top: 16px; }
.hero-ctas-go { margin-top: 14px; }
.hero-ctas-deep { margin-top: 18px; }

@media (max-width: 600px) {
  .hero-figure .hero-photo { width: 148px; height: 148px; flex-basis: 148px; }
  .hero-quote { font-size: var(--t-object); padding-left: 13px; }
}

/* Портрет 176px був завузький для таблички: підпис і назва вбирались у два
   рядки кожен, і плашка накривала обличчя. Ширший кадр — і те, й те стає
   в один рядок, а табличка лишається смугою внизу. */
.hero-figure .hero-photo,
.hero-practical .hero-figure .hero-photo {
  width: 224px; height: 224px; flex-basis: 224px;
}
.hero-badge { left: 10px; right: 10px; bottom: 10px; padding: 8px 12px 9px; }
.hero-badge-name { font-size: 1.25rem; }

/* Цитата в м'якій рамці, а не з синьою лінією: синій закріплений за дією,
   а цитата нічого не просить — вона дзеркало. Нейтральне тло читається
   як репліка й не додає ще одного кольорового коду. */
.hero-quote {
  padding: 14px 18px; border-left: none;
  background: var(--role-fact-bg);
  border-radius: var(--radius-card);
  margin-bottom: 2px;
}

@media (max-width: 600px) {
  .hero-figure .hero-photo,
  .hero-practical .hero-figure .hero-photo {
    width: 100%; height: auto; aspect-ratio: 1 / 1; flex-basis: auto;
  }
  .hero-figure { width: 100%; }
}

/* Табличка переїхала З фотографії ПІД неї.
   На кадрі 224px ні підпис, ні назва не вбирались в один рядок, і плашка
   накривала 39% портрета — тобто закривала обличчя, заради якого фото тут
   і стоїть. Під кадром вона тієї самої ширини, нічого не затуляє, і довгі
   назви архетипів переносяться спокійно. */
.hero-figure { display: flex; flex-direction: column; gap: 8px; width: 224px; }
.hero-badge {
  position: static; left: auto; right: auto; bottom: auto;
  padding: 10px 14px 11px;
  box-shadow: none;
  background: var(--role-fact-bg);
  border-color: transparent;
}
.hero-badge-name { font-size: 1.25rem; }

@media (max-width: 600px) {
  .hero-figure { width: 100%; }
}

/* ── Кроки результату ────────────────────────────────────────────────────
   Дорога далі — та сама кнопка, що на екранах тесту: людина вже сто разів
   бачила її внизу й натискає не читаючи. */
.step-foot {
  display: flex; align-items: center; gap: 12px;
  margin: 28px 0 8px; flex-wrap: wrap;
}
.step-back {
  background: none; border: none; padding: 2px 0;
  font: inherit; font-size: var(--t-quiet); font-weight: var(--t-fact-w);
  color: var(--atmo-text-secondary); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.step-back:hover { color: var(--atmo-text); }
.step-next { margin-left: auto; }

/* Пройдені зупинки в карті — тихіші за майбутні не стають: карта показує
   дорогу, а не досягнення. Різниця лише в тому, де людина зараз. */
.znav-item.znav-done { color: var(--atmo-text-secondary); }

/* Милиці, якими такти імітували кроки, більше не потрібні: крок і є крок. */
.takt-one { min-height: 0; }
.takt-bridge { min-height: 0; margin: 8vh auto; }
@media (max-width: 720px) { .takt-bridge { min-height: 0; } }

/* Карта кроків липне до верху: дорогу видно завжди, а не тільки коли
   людина доскролила до неї. */
.znav {
  position: sticky; top: 0; z-index: 30;
  margin: 0 0 22px; padding: 10px 0;
  background: var(--atmo-bg);
}

/* ══════════════════════════════════════════════════════════════════════════
   СЛІД КРОКІВ
   ══════════════════════════════════════════════════════════════════════════
   Перший екран нікуди не квапить — і це правильно. Але людині з малим
   ресурсом треба показати, що низ узагалі є, не кажучи цього словами.
   Слід — напівпрозорі стрілки вниз: вони ведуть око, а не інструктують. */
.trail {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 10px 0; pointer-events: none;
}
.trail-a {
  display: inline-flex; color: var(--atmo-text-secondary); opacity: .28;
  animation: trailPulse 2.4s ease-in-out infinite;
}
.trail-a svg { width: 22px; height: 22px; }
@keyframes trailPulse { 0%,100% { opacity: .16 } 50% { opacity: .42 } }
@media (prefers-reduced-motion: reduce) {
  .trail-a { animation: none; opacity: .26; }
}

/* Правил для сліду за текстом більше нема: він лишався текстурою під
   рядками навіть на найменшій прозорості. Слід живе тільки в порожнечі
   між блоками. */

/* «Далі» на тактах — по центру й нижче: спуск закінчується дією, а не
   краєм екрана. */
.step-foot-mid { justify-content: center; margin-top: 8px; }
.step-foot-mid .step-next { margin-left: 0; }
.step-foot-mid .step-back { position: absolute; left: 0; }
.step-foot { position: relative; }


/* ── Карта: зупинки мають читатись як зупинки ────────────────────────────
   Були світлими плашками зі світлим текстом і зливались із рештою.
   Тепер у них темна рамка, темне чорнило й тонована заливка — та сама
   логіка, що в таблички архетипу: предмет, а не текст. */
.znav-item {
  background: var(--role-fact-bg);
  border: 1.5px solid var(--atmo-text);
  color: var(--atmo-text);
  border-radius: var(--radius-button);
  padding: 8px 14px;
}
.znav-item.znav-done { background: var(--atmo-surface); color: var(--atmo-text-secondary); border-color: var(--atmo-border); }
.znav-item.on {
  background: var(--atmo-text); color: var(--atmo-bg);
  border-color: var(--atmo-text); box-shadow: none;
}
.znav-item.znav-locked { border-color: var(--atmo-border); }
.znav-item:hover { border-color: var(--atmo-text); }

/* Карта як призначення спуску: не липка, по центру, з повітрям навколо. */
.znav.znav-target {
  position: static; justify-content: center; margin: 4px 0 10px;
  background: none; padding: 0;
}

/* Кнопка в картці — по центру: спуск починається з неї, і вона має бути
   на осі сліду, а не збоку. */
.hero-ctas-go { display: flex; justify-content: center; }

/* Рядок фактів картки: табличні цифри в регістрі тла. Замінив плашку з
   кружечком-іконкою і окремий рядок відсотка — три елементи на два числа. */
.prof-facts {
  margin-top: 10px;
  font-size: var(--t-quiet); font-weight: var(--t-fact-w);
  font-variant-numeric: tabular-nums;
  color: var(--atmo-text-secondary);
}

/* Опора отримує тонку рамку.
   Її тло — світло-синє, і на білій панелі вона читалась. Коли зони
   перестали бути панелями, опора опинилась на світло-синьому тлі
   сторінки й майже зникла: код ролі лишився, а видимого предмета не
   стало. Рамка того ж кольору тримає її на будь-якій підкладці. */
.role-support {
  border: 1px solid color-mix(in srgb, var(--atmo-primary) 22%, transparent);
}

/* Підказка про порівняння стоїть під списком і мовчить, поки не потрібна. */
.cmp-hint { margin-top: 4px; }

/* Запитання й відповіді. Питання — голосом людини, тому воно об'єкт;
   відповідь — звичайний текст. Між парами повітря більше, ніж усередині
   пари: так видно, де закінчується одна думка. */
.faq { display: flex; flex-direction: column; gap: 22px; }
.faq-q {
  font-size: var(--t-object); font-weight: var(--t-object-w);
  line-height: 1.3; color: var(--atmo-text); margin-bottom: 6px;
}
.faq-a {
  margin: 0; font-size: var(--t-body); line-height: 1.6;
  color: var(--atmo-text-secondary); max-width: 62ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   ВСЕРЕДИНІ ДВЕРЕЙ ПАНЕЛЕЙ НЕМА
   ══════════════════════════════════════════════════════════════════════════
   Двері самі є поверхнею — білою карткою на кольоровому тлі. Усередині
   них лежали ще панелі: розписка по анкеті, портрет, дзеркало, комбінація,
   цінності, ваучер, «Варто знати». Виходило біле на білому — та сама каша,
   яку ми прибрали із зон, тільки на поверх глибше.

   Тепер усередині дверей зміст, а не предмети: відступи від самих дверей,
   ритм — повітрям. Виняток один — картки АтмоСил: вони клікабельні й
   мусять лишатись предметами, тому отримують рамку замість заливки. */
.fold-body .panel {
  background: none; border: none; box-shadow: none;
  padding: 0; border-radius: 0;
}
.fold-body > * { margin-bottom: 22px; }
.fold-body > *:last-child { margin-bottom: 0; }

.fold-body .force {
  background: none; border: 1px solid var(--atmo-border);
  border-radius: var(--radius-card); padding: 20px 18px 18px;
  box-shadow: none;
}
.fold-body .force:hover { border-color: var(--atmo-primary); box-shadow: none; }

/* Порожній вузол відгуку лишав по собі відступ, хоч нічого не показує. */
.fold-body .fvr-card:empty, .fold-body .pm-card:empty { display: none; margin: 0; }

/* Групи дій наприкінці: назва групи — ярлик, ряд кнопок під нею.
   П'ять рівноправних кнопок в один ряд не мали головного, і людина не
   натискала жодної; названі групи дають наміру ім'я. */
.ft-group-label {
  font-size: var(--t-label); font-weight: var(--t-label-w);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--atmo-text-secondary);
  margin: 18px 0 8px;
}
.ft-group-label:first-child { margin-top: 0; }
.footer-acts { background: none; border: none; box-shadow: none; padding: 0; }
.ft-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-row .button { width: auto; margin: 0; }
.ft-feedback { margin-top: 20px; }

/* Підсумок маршруту на сторінці результату.
   Трек звідси прибрано: дві карти одна над одною не показують дороги.
   Лишились назва професії, місце на шляху й саме завдання поточного кроку. */
.planpanel .pl-name {
  font-size: var(--t-object); font-weight: var(--t-object-w);
  color: var(--atmo-text); margin: 0;
}
.pl-sum-label {
  margin-top: 10px;
  font-size: var(--t-label); font-weight: var(--t-label-w);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--atmo-text-secondary);
}
.planpanel .pl-sum-now {
  margin-top: 3px;
  font-family: var(--atmo-font-display);
  font-size: var(--t-section); font-weight: var(--t-section-w);
  line-height: 1.3; color: var(--atmo-text);
}
.pl-sum-acts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  margin-top: 18px;
}
.pl-sum-acts .pl-open { margin: 0; }

/* Центрована карта при переповненні недосяжна зліва.
   `justify-content: center` у flex-контейнері, що переповнився, зсуває
   вміст в обидва боки — і початок стрічки стає недоступним навіть
   прокруткою (відома поведінка flexbox). На телефоні саме туди й
   потрапляє перша зупинка. Тому центруємо тільки коли влазить. */
.znav.znav-target { justify-content: flex-start; }
@media (min-width: 601px) {
  .znav.znav-target { justify-content: center; }
}

/* Шов із реєстру: плаваюча смужка порівняння (z-index 60) лежала ПОВЕРХ
   відкритого порівняння (overlay, z-index 50) — тобто перекривала рівно
   те, заради чого її натиснули. Ховаємо її, поки відкрито будь-який
   оверлей: тіло в цей момент має клас locked. */
body.locked .cmp-bar, body.st-open .cmp-bar { display: none; }

/* Мертве правило: .button.external нижче отримує обведений вигляд разом
   з усіма другорядними діями, тож ця залита версія вже не діє. */

/* ── Привідкриті двері ───────────────────────────────────────────────────
   Рядок, який видно ще до відчинення, і запрошення під ним. Відступи
   збігаються з .fold-head (20px), щоб текст стояв в одній колонці із
   заголовком, а не сходинкою. */
.fold-peek { padding: 0 20px 16px; }
.fold-peek .peek-text {
  margin: 0; font-size: var(--t-body); font-weight: var(--t-body-w);
  line-height: 1.55; color: var(--atmo-text);
}
/* Запрошення — тиха дія тієї ж граматики, що й решта тихих дій сторінки. */
.fold-more {
  margin-top: 10px; background: none; border: none; padding: 0;
  font: inherit; font-size: var(--t-quiet); font-weight: var(--t-act-w);
  color: var(--atmo-primary-dark); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--atmo-primary-dark) 35%, transparent);
}
/* У привідкритих дверей стрілка в шапці зайва: запрошення нижче каже те
   саме словами, і два сигнали про одну дію сперечаються за увагу. */
.fold-peeking > .fold-head .fold-arrow { display: none; }
.fold-peeking > .fold-head { padding-bottom: 8px; }

/* ── «Чому саме ці п'ять» ────────────────────────────────────────────────
   Тиха дія прямо під картками. По центру: це не пункт списку й не частина
   картки, а окремий вихід із неї. */
.why-jump {
  display: block; margin: 18px auto 0; background: none; border: none;
  padding: 6px 4px; font: inherit; font-size: var(--t-body);
  color: var(--atmo-primary-dark); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--atmo-primary-dark) 35%, transparent);
}

/* ── Такт сил: окремий екран між портретом і списком ─────────────────────
   Читається з одного погляду: підпис, три названі речі, поворот. Ніякого
   тіла тексту — довгий опис живе в аркуші сили, куди ведуть самі картки.

   Без карток і рамок. Перша версія була в картках, і три картки з
   портретом усередині виросли до 692px: разом із картою кроків і кнопкою
   «Далі» сторінка ставала 956px при вікні 812 — тобто дія, заради якої
   екран існує, опинялась за краєм, і людині доводилось гортати. Екран,
   який має віддати ресурс, натомість його забирав.

   Кольору тут свідомо НЕМА. Картки сил уже позбавили фарбування за
   порядковим номером (див. .force.c1 вище): номер не значить нічого, а
   зелений, синій і бурштиновий у продукті вже зайняті — «вже твоє», дія
   й обережність. Три кольори тут повернули б рівно ті три хибні коди. */
.takt-forces {
  /* 300px давало сторінку 804px при вікні 800 — тобто смугу гортання
     на рівному місці, і разом із нею зсув усього вмісту вбік. */
  min-height: calc(100svh - 320px);
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center;
  padding: 8px 0; gap: 22px;
}
.tf-eyebrow {
  font-size: var(--t-label); font-weight: var(--t-label-w);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--atmo-text-secondary);
}
.tf-list {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 22px; width: 100%; max-width: 380px;
}
/* Сила — не картка, а названа річ на тлі сторінки. Натиснути можна
   (відкриється аркуш сили), але в спокої вона нічого не обіцяє: жодної
   рамки, жодної заливки. */
.tf-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; border-radius: var(--radius-card);
  padding: 6px 12px; font: inherit; color: inherit;
  cursor: pointer; text-align: center;
}
.tf-item:hover { background: var(--atmo-surface-hover); }
.tf-img { width: 56px; height: 56px; object-fit: contain; }
.tf-img.emoji { font-size: 2.25rem; line-height: 56px; }
.tf-name {
  font-size: var(--t-object); font-weight: var(--t-object-w);
  line-height: 1.2; letter-spacing: -.01em; color: var(--atmo-text);
}
.tf-short {
  font-size: var(--t-quiet); font-weight: var(--t-quiet-w);
  line-height: 1.4; color: var(--atmo-text-secondary);
}

/* На широкому екрані три сили стають рядом: одна лінія читається швидше
   за три поверхи, а місця по горизонталі там досить. */
@media (min-width: 720px) {
  .tf-list { flex-direction: row; max-width: 680px; gap: 12px; }
  .tf-item { flex: 1 1 0; }
  .tf-img { width: 64px; height: 64px; }
}

/* ── Прокладка «Далі — п'ять професій» ───────────────────────────────────
   Тихий екран між силами і списком. Тут нема жодної дії, крім «Далі», і
   нема чого розглядати — тільки прочитати. Тому ні карток, ні рамок, ні
   іконок: три такти згори вниз, кожен своєю вагою.

   Перша версія була переліком входів у підбір. Усе правда, але читалось
   як квитанція: складники замість сенсу. Тепер три речення — що зараз
   буде, звідки воно взялось, і чиє тут останнє слово. */
.takt-basis {
  min-height: calc(100svh - 320px);
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center;
  padding: 8px 0; gap: 20px;
}
.takt-basis .tb-lead {
  margin: 0; max-width: 20ch;
  font-size: var(--t-main); font-weight: var(--t-main-w);
  line-height: 1.25; letter-spacing: -.02em; color: var(--atmo-text);
  text-wrap: balance;
}
.takt-basis .tb-body {
  margin: 0; max-width: 34ch;
  font-size: var(--t-body); font-weight: var(--t-body-w);
  line-height: 1.55; color: var(--atmo-text);
  text-wrap: pretty;
}
/* Останній такт — про владу людини над списком. Тихіший за решту: він не
   переконує, а просто лишається сказаним. */
.takt-basis .tb-close {
  margin: 0; max-width: 32ch;
  font-size: var(--t-quiet); font-weight: var(--t-quiet-w);
  line-height: 1.5; color: var(--atmo-text-secondary);
}

/* ── Дорога назад після стрибка «Чому саме ці п'ять» ─────────────────────
   Повноцінна кнопка, а не тихе посилання: людина сюди не збиралась, і
   дорога назад має бути помітнішою за все навколо, поки вона не
   зорієнтувалась. Стоїть першою в розділі. */
.back-to-profs {
  max-width: 340px; margin: 0 auto 22px;
}

@media print {
  .takt-basis { min-height: 0 !important; padding: 0 !important; }
  .back-to-profs { display: none !important; }
}

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

   Ще гірше було поруч: у двох карток набір збігався повністю, і два
   однакові зелені стовпці поспіль читались як механічна підстановка
   профілю на все підряд. Механізм проти цього в коді є (commonTransfers),
   але він виносить нагору лише те, що спільне для ВСІХ трьох.

   Компактний рядок лишає той самий зміст і ту саму зелень «це вже твоє»,
   але втричі нижчий — і повтор перестає читатись як штамп. */
.qk-card .qk-take { gap: 4px 10px; align-items: baseline; }
.qk-card .qk-take .skchip.has {
  background: none; padding: 0; border: none;
  font-size: var(--t-quiet); font-weight: var(--t-fact-w);
  color: var(--entry-fast-text);
}
/* Роздільник між навичками — крапка, а не рамка. */
.qk-card .qk-take .skchip.has + .skchip.has::before {
  content: "·"; margin-right: 8px; color: var(--atmo-text-secondary);
  font-weight: 400;
}

/* ── Чип, довший за картку ───────────────────────────────────────────────
   .role-chip має white-space: nowrap — на широкому екрані це правильно,
   пігулка не має ламатись на два рядки. Але на телефоні чип «Ваучер:
   держава може оплатити навчання» виходить 346px у картці шириною 311:
   виміряно, текст обрізається на пів слова.

   І обрізається саме те, що для аудиторії Служби зайнятості найцінніше —
   що держава заплатить за навчання. Тому на вузькому екрані дозволяємо
   цьому чипу переноситись: краще дві рядки, ніж половина обіцянки. */
@media (max-width: 420px) {
  /* Те саме тепер стосується картки професії: чип «Спершу вчитись: 1–3
     роки · навчання може оплатити держава» виходить 485px там, де картка
     має ~296px. Обрізалась би рівно друга половина — та, заради якої
     рядок і дописано. */
  .qk-card .role-chip, .prof .role-chip {
    white-space: normal; align-items: flex-start;
    max-width: 100%; line-height: 1.3;
  }
  .qk-card .role-chip .ic, .prof .role-chip .ic { margin-top: 2px; }
}

/* ── Ієрархія в блоці чисел ──────────────────────────────────────────────
   Тут вийшло навпаки: підрядки були жирніші й темніші за самі підписи, які
   вони уточнюють. Найгучніше на екрані звучало застереження «якщо
   підходиш за умовами» — тобто застереження перекрикувало факт, який
   застерігало.

   Порядок ваги має бути: число -> що воно означає -> уточнення. Вилка
   зарплат лишається помітною (це те, по що люди приходять), але вже не
   голосніша за підпис; умова ваучера стає тихою, як їй і належить. */
.qk-reach-pay {
  font-weight: var(--t-fact-w); color: var(--atmo-text);
}
.qk-reach-sub {
  font-weight: var(--t-quiet-w); font-size: var(--t-quiet);
  color: var(--atmo-text-secondary);
}

/* ── Цитата на вітальному екрані ─────────────────────────────────────────
   Останнє, що людина бачить перед рішенням. Тому вона тиха: не заклик і
   не обіцянка, а думка, поруч із якою можна постояти секунду.

   Курсив і тонка лінія ліворуч замість лапок-картинок: цитата має
   читатись як цитата, але не важити більше за кнопку над нею. */
.wquote {
  margin: 18px 0 0; padding: 2px 0 2px 14px;
  border-left: 2px solid var(--atmo-border);
  max-width: 400px;
}
.wquote p {
  margin: 0; font-size: var(--t-body); font-style: italic;
  line-height: 1.5; color: var(--atmo-text-secondary);
}
.wquote cite {
  display: block; margin-top: 4px; font-style: normal;
  /* --atmo-text-muted у цьому проєкті прямо позначений «НЕ для тексту»:
     на ньому виходило 2,21:1. Атрибуція — теж текст. */
  font-size: var(--t-quiet); color: var(--atmo-text-secondary);
}

/* Цитата як підзаголовок: стоїть одразу під назвою, тож трохи більша й
   ближча до заголовка, ніж коли вона була приміткою внизу. */
.wquote-lead {
  margin: 0 0 18px; padding-left: 16px;
}
.wquote-lead p { font-size: var(--t-section); line-height: 1.4; }

/* ── Уточнення під числом ────────────────────────────────────────────────
   Було просто ще одним рядком тексту під підписом, і чотири рядки блоку
   зливались в один. Чип має власну межу — окремішність видно без
   розділових знаків, а сама форма вже знайома з карток професій.

   Підкладка напівпрозора, а не суцільна: чип лежить на зеленому полі,
   і будь-який власний колір там сперечався б із ним. Прозорість працює
   в обох темах — світлішає на світлому, темнішає на темному. */
.qk-chip {
  display: inline-block; margin-top: 8px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .75);
  font-size: var(--t-quiet); font-weight: var(--t-fact-w);
  line-height: 1.35; color: var(--atmo-text);
}
@media (prefers-color-scheme: dark) {
  /* На темно-зеленому полі біла плівка засвітилась би плямою. */
  .qk-chip { background: rgba(255, 255, 255, .10); }
}

/* Підпис під числом лишається звичайним текстом — саме він головний,
   а чип під ним лише уточнює. */
.qk-reach-text > div:first-child { line-height: 1.35; }

/* ── Тег інсайту ─────────────────────────────────────────────────────────
   Замість двох сірих рядків капслоком — одна плашка: номер і тема. Око
   бачить один об'єкт і одразу переходить до речення під ним, заради
   якого екран і існує. */
.insight-card h1.insight-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 5px 12px;
  border-radius: var(--radius-pill); background: var(--role-fact-bg);
  font-family: var(--atmo-font-primary);
  font-size: var(--t-quiet); font-weight: var(--t-fact-w);
  letter-spacing: 0; text-transform: none; line-height: 1.3;
  color: var(--atmo-text-secondary);
}
/* Номер тихіший за тему: він орієнтир, а не зміст. */
.insight-card h1.insight-chip .ic-num {
  font-variant-numeric: tabular-nums;
  padding-right: 8px; border-right: 1px solid var(--atmo-border);
}
.insight-card h1.insight-chip .ic-topic { color: var(--atmo-text); }

/* Прохання над чек-листом навичок: коротке й на кожному екрані групи. */
.skg-ask {
  margin: 12px 0 14px; font-size: var(--t-body); font-weight: var(--t-act-w);
  color: var(--atmo-text);
}

/* ── Питання про напрям: хто тут головний ────────────────────────────────
   Раніше головним було саме питання (26px), а назва напряму стояла над
   ним дрібним сірим капслоком. Рішення було свідоме — щоб контекст не
   перебивав прохання. Але на живому вийшло навпаки: питання «наскільки
   професії ЦЬОГО напряму тобі відгукуються?» без назви не означає
   нічого, тож людина однаково мусила спершу прочитати дрібний рядок,
   а він для цього не призначений.

   Тепер ієрархія відповідає змісту: спершу ПРО ЩО питаємо, потім що
   саме питаємо. Це не два претенденти на головне, а порядок читання. */
.ask-ctx {
  font-family: var(--atmo-font-display);
  font-size: var(--t-main); font-weight: var(--t-main-w);
  line-height: 1.2; letter-spacing: -.02em; text-transform: none;
  color: var(--atmo-text); margin-bottom: 6px; text-wrap: balance;
}
.ask-main {
  font-family: var(--atmo-font-primary);
  font-size: var(--t-body); font-weight: var(--t-body-w);
  line-height: 1.45; letter-spacing: 0;
  color: var(--atmo-text-secondary); margin: 0;
}

/* Опора — тихий рядок, а не панель: у формі панелі вона мала ширину,
   радіус і заливку кнопок під нею й читалась як четвертий варіант. */
.ask-note {
  margin: 0 0 14px; font-size: var(--t-quiet); font-weight: var(--t-quiet-w);
  line-height: 1.5; color: var(--atmo-text-secondary);
}

/* Двері з описом напряму — тло, тож і важать менше за кнопки вибору. */
.hint-fold .fold-head { padding: 9px 14px; }
.hint-fold .fold-title { font-size: var(--t-quiet); }

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

   Але й три повноцінні картки не годяться: саме через них цей екран
   колись не вміщався в телефон і кнопка «Далі» їхала за край. Тому
   форма різна за шириною: на телефоні одна спільна рамка з тонкими
   лініями між силами — компактно, але з межею; на широкому три окремі
   картки, бо там місця вдосталь. */
.tf-list {
  background: var(--atmo-surface); border: 1px solid var(--atmo-border);
  border-radius: var(--radius-card); gap: 0; overflow: hidden;
}
.tf-item { padding: 16px 18px; border-top: 1px solid var(--atmo-border); }
.tf-item:first-child { border-top: none; }

@media (min-width: 720px) {
  /* Рамка переходить із групи на кожну силу окремо. */
  .tf-list {
    background: none; border: none; overflow: visible;
    gap: 14px; max-width: 720px;
  }
  .tf-item {
    background: var(--atmo-surface); border: 1px solid var(--atmo-border);
    border-radius: var(--radius-card); padding: 22px 18px;
  }
  .tf-item:hover { border-color: var(--atmo-primary); }
}

/* ── Заголовок зони читається першим ─────────────────────────────────────
   Був 20px при підписі 17px — різниця замала, щоб око саме обрало, з
   чого починати, і зона читалась суцільним текстом. Тепер заголовок
   на рівні головного (26px), а підпис лишається тілом тексту: між
   ними видно сходинку, і перший погляд потрапляє куди треба. */
/* .zone .zone-title, а не просто .zone-title: правило .zone h2 нижче
   специфічніше і саме воно тримало зону на 20px попри токен. Внутрішні
   h2 лишаються на 20px — так між заголовком зони та заголовками всередині
   зʼявляється сходинка, якої досі не було. */
.zone .zone-title { font-size: var(--t-main); font-weight: var(--t-main-w); }
@media (max-width: 600px) {
  .zone .zone-title { font-size: var(--t-main); }
}
.zone-note {
  font-size: var(--t-body); font-weight: var(--t-body-w); line-height: 1.5;
}

/* ── Підпис над блоком у «Глибше» ────────────────────────────────────────
   Драбина цього розділу була 26 -> 20 -> 18 -> 17 -> 13 капслоком, і
   саме останньою сходинкою набирали цілі речення. Капслок годиться для
   мітки на два слова; речення в ньому читається по літері.

   Тепер підпис блоку — звичайне речення тілом тексту, тихішим кольором.
   Драбина стає рівною: заголовок розділу, заголовок блоку, назва
   обʼєкта, текст. Без п'ятої сходинки, яка була ні тим, ні тим. */
.block-cap {
  margin: 0 0 10px; font-size: var(--t-body); font-weight: var(--t-body-w);
  line-height: 1.45; color: var(--atmo-text-secondary);
}

/* ── Кнопки успадковують шрифт сторінки ──────────────────────────────────
   Браузер задає елементам форми ВЛАСНИЙ шрифт, і він не успадковується.
   Через це на кожному екрані продукту сиділа частка Arial: карта кроків,
   кружечок «+» біля професії, знак «?» біля АтмоСил. Виміряно сканером:
   Arial траплявся на ВСІХ семи екранах результату.

   Окремі місця це вже лікували вручну через font: inherit — але лише ті,
   де хтось помітив. Правило нижче закриває і решту, і майбутні. */
button, input, select, textarea { font-family: inherit; }

/* ── Три зайві сходинки в шрифтовій драбині ──────────────────────────────
   Сканер по всіх екранах показав те, чого око не рахує, але відчуває:
   у тілі тексту жило ТРИ розміри (14,5 · 15 · 17) і ТРИ ваги на 17px
   (400 · 600 · 700). Різниця між 14,5 і 15 непомітна як задум і помітна
   як неохайність, а третя вага не мала власного значення.

   Зводимо: 15 -> 14,5 (той самий токен тихого тексту), жирне в абзаці
   -> та сама вага, що й у решти виділень. */
.rl-hint, .rl-desc, .rl-classic, .fold-note { font-size: var(--t-quiet); }
b, strong { font-weight: var(--t-act-w); }

/* Питання про портрет і про п'ятірку — це текст, а не заголовок розділу,
   тож і шрифт у нього основний, а не дисплейний. */
.fvr-title { font-family: var(--atmo-font-primary); }

/* ── Ще дві сходинки, які нічого не значили ──────────────────────────────
   Число збігу в списку напрямів стояло 16/700 — окремий розмір і окрема
   вага заради самого себе. Той самий сигнал дає 17/600, вже наявне поруч.

   Кружечок «?» біля сил був набраний дисплейним шрифтом: він там ні
   заголовок, ні число, тож бере основний, як решта підписів. */
.qmark { font-family: var(--atmo-font-primary); }

/* Рядок над кодом результату — ціле речення, набране як мітка (13/700).
   Мітками роблять підписи на два слова; речення в цій вазі й розмірі
   тисне і додає екрану ще одну сходинку. Це тихий супровідний текст. */
.fin-save-label {
  font-size: var(--t-quiet); font-weight: var(--t-quiet-w);
  letter-spacing: 0; color: var(--atmo-text-secondary);
}

/* ── Останні одинадцять розмірів, що жили самі по собі ───────────────────
   Обхід усіх екранів шляху показав рівно одинадцять місць, де текст
   набраний 14, 15 або 16 пікселями — тобто повз три ролі, на яких
   тримається решта: тіло (17), тихе (14,5), мітка (13).

   Різниця між 14 і 14,5 або між 16 і 17 не читається як задум — вона
   читається як недбалість: сусідні абзаци злегка різні, і око щоразу
   мусить наново вирішувати, чи це той самий рівень тексту.

   Кожен рядок нижче — не «зменшити/збільшити», а «яка це роль».
   Розміри тут не з голови: усі беруться з тих самих токенів. */

/* Тихий супровід: підписи, примітки, дрібні пояснення. */
.back, .skg-part, .wfree, .ws-label, .option .onote, .wbrand {
  font-size: var(--t-quiet);
}
.sends span { font-size: var(--t-quiet); }

/* Тіло тексту: те, що справді читають реченнями. */
.qk-reach-text, .qk-reach-lead, .sv-skip { font-size: var(--t-body); }
.sv-skip { font-weight: var(--t-body-w); }
.sv-tile { font-size: var(--t-body); font-weight: var(--t-act-w); }

/* Відсоток збігу під назвою професії і підказка про порівняння — обидва
   тихий супровід, а стояли на власних 14 і 15. */
.pk2-meta, .cmp-hint { font-size: var(--t-quiet); }

/* Синє «назад» на підфарбованому тлі дзеркала давало 4,46 при потрібних
   4,5 — рівно той випадок, для якого в проєкті є темніший синій: він для
   синього, що лежить просто на тлі сторінки, а не на білій картці. */
.back { color: var(--atmo-primary-dark); }

/* ── Репліки для живої розмови мусять доїхати до паперу ──────────────────
   sayFold гасить текст репліки ІНЛАЙНОВИМ display:none, а інлайновий
   стиль б’є будь-яке правило без !important. Друковані правила вище
   відкривають .fold-body і .rd-body, але для .pl-say правила не було
   ніде — тож людина, яка друкує результат САМЕ щоб піти з ним у центр
   зайнятості, отримувала на аркуші заголовок «Що сказати раднику»,
   під яким порожньо.

   Це два речення, написані для того, кому соромно просити, — і губились
   вони рівно там, де потрібні. Саму кнопку-перемикач на папері ховаємо:
   на аркуші нема чого перемикати. */
@media print {
  .pl-say { display: block !important; }
  .say-toggle { display: none !important; }
}

/* ── Шкала має читатись як шкала, а не як п'ять окремих кнопок ──────────
   Перша жива людина сказала: питання «читаються складно візуально». На
   екрані п'ять кружків висять окремо, і напрямок доводиться щоразу
   вичитувати з підписів на краях. А цей екран людина бачить 57 разів.

   Кольору сюди повертати не можна — див. коментар вище: зелений навчав би
   «зелений = подобається», а в результаті зелений означає «вже твоє».
   Тому підсилюємо те, що вже несе зміст:

   Знаки всередині більшають. Хрестик і серце — єдине, що відрізняє «ні»
   від «так» на однокольоровій шкалі, і вони були дрібні: 28px у кружку
   58px. Тепер їх справді видно.

   Пробував ще з'єднати кружки тонкою лінією, щоб вони читались як одна
   вісь. Не вийшло й прибрано: проміжки між кружками на телефоні всього
   8px, тож лінія видна як чотири рисочки — це шум, а не вісь. */

.sdot.lg .sd-sign { width: 34px; height: 34px; }
.sdot.md .sd-sign { width: 27px; height: 27px; }
.sdot.sm .sd-sign { width: 22px; height: 22px; }
@media (max-width: 420px) {
  .sdot.lg .sd-sign { width: 30px; height: 30px; }
  .sdot.md .sd-sign { width: 24px; height: 24px; }
  .sdot.sm .sd-sign { width: 20px; height: 20px; }
}

/* ── «Нічого з цього» ─────────────────────────────────────────────────────
   Стоїть останнім у списку, бо саме там око шукає варіанти. Але це не
   така сама відповідь, як решта: у неї нема кружечка-позначки, бо її не
   вмикають і вимикають — нею виходять. Тому й вигляд тихіший: пунктирна
   рамка замість суцільної, текст другорядним кольором.

   Тонка рамка й відступ згори відділяють її від справжніх навичок: це
   не шоста навичка в переліку, а вихід із нього. */
.skg-none {
  margin-top: 4px; border-style: dashed;
  color: var(--atmo-text-secondary); box-shadow: none;
}
.skg-none:hover { border-style: solid; color: var(--atmo-text); }

/* ── Смужка доказів: що саме збіглося з тобою ────────────────────────────
   Людина не повірила п'ятірці, бо картка не показувала нічого її власного.
   Перший підхід дав один чип — «Аналітика» — і живий відгук був: нічого
   не пояснює. Іменник без відношення до людини читається як ярлик на
   професії, а не як доказ про неї.

   Тому тут не чипи, а рядки: значок + фраза, у якій завжди сказано, ЧОМУ
   це про неї. Значок стоїть у власній колонці сталої ширини — так три
   рядки читаються одним рухом ока згори вниз, а не як розсипані плашки.

   Тло ледь помітне: смужка має відділятись від опису професії, але не
   змагатися з назвою за увагу. Це доказ, а не нагорода. */
.prof-proofs {
  margin-top: 10px; padding: 10px 12px;
  background: var(--role-fact-bg); border-radius: var(--radius-card);
  display: grid; gap: 6px;
}
.pp-row { display: flex; align-items: flex-start; gap: 9px; }
.pp-icon {
  flex: 0 0 18px; width: 18px; text-align: center; line-height: 1.45;
  font-size: 0.875rem;
}
.pp-text {
  font-size: var(--t-quiet); font-weight: var(--t-quiet-w);
  line-height: 1.45; color: var(--atmo-text);
}

/* ── «Уяви свій день» ────────────────────────────────────────────────────
   Єдина кнопка на картці, яку хочеться натиснути з цікавості, а не з
   обов'язку. Тому вона єдина тут кольорова: тонка синя рамка й синє
   чорнило на світлому тлі — запрошення, а не дія.

   Око замість стрілки: воно обіцяє «побачиш», і це рівно те, що
   всередині. Іконка-стрілка обіцяла б перехід на інший екран, а текст
   розгортається тут-таки. */
.day-block { margin-top: 10px; }
.day-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--atmo-primary-light);
  border: 1px solid var(--atmo-primary);
  color: var(--atmo-primary-dark);
  font: inherit; font-size: var(--t-quiet); font-weight: var(--t-act-w);
  cursor: pointer;
}
.day-btn:hover { background: var(--atmo-surface); }
.day-btn.open { background: var(--atmo-surface); }
.day-eye { font-size: 0.9375rem; line-height: 1; }
.day-arrow { font-size: 0.8125rem; line-height: 1; opacity: .8; }


/* ── Хмаринка «Уяви свій день» ───────────────────────────────────────────
   Текст про робочий день — єдине місце в результаті, де людині дозволено
   не рахувати, а уявити. Розгорнутий просто в картці, він читався як ще
   один абзац серед зарплат і строків: той самий сухий регістр.

   Тому форма робить половину роботи. Заокруглення більші за все інше в
   продукті (44px проти 16), небесний градієнт замість білого, дві
   кульки-хвостики знизу, як у хмарці думки. Око розуміє, що зараз буде
   не звіт, ще до першого слова.

   Поява — м'яке спливання знизу з легким збільшенням. Для тих, хто
   вимкнув анімації в системі, вона не програється взагалі. */
.day-overlay {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px;
}
.cloud {
  position: relative; max-width: 460px; width: 100%;
  border-radius: 44px;
  background: linear-gradient(160deg, #FFFFFF 0%, #F3F7FF 55%, #EAF1FF 100%);
  box-shadow: 0 24px 60px rgba(30, 50, 100, .22), 0 2px 0 rgba(255,255,255,.9) inset;
  padding: 30px 30px 34px;
  animation: cloud-in .34s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes cloud-in {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cloud { animation: none; } }

/* Хвостик: дві кульки, що ведуть униз до картки, з якої хмаринка виросла. */
.cloud-tail {
  position: absolute; left: 46px; border-radius: 50%;
  background: var(--atmo-primary-light); box-shadow: 0 8px 20px rgba(30, 50, 100, .14);
}
.cloud-tail.t1 { width: 26px; height: 26px; bottom: -16px; }
.cloud-tail.t2 { width: 13px; height: 13px; bottom: -38px; left: 34px; }

.cloud-close {
  position: absolute; top: 16px; right: 18px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.7); border: 1px solid var(--atmo-border);
  color: var(--atmo-text-secondary); font: inherit; font-size: 0.9375rem;
  line-height: 1; cursor: pointer;
}
.cloud-close:hover { background: #fff; color: var(--atmo-text); }

.cloud-eyebrow {
  font-size: var(--t-label); font-weight: var(--t-label-w);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--atmo-primary); margin-bottom: 6px;
}
.cloud-name {
  margin: 0 0 14px; font-family: var(--atmo-font-display);
  font-size: var(--t-section); font-weight: var(--t-section-w);
  line-height: 1.2; color: var(--atmo-text); text-wrap: balance;
}
/* Текст мрії — більший і повітряніший за звичайний абзац: його читають
   повільно, і саме тому він тут головний. */
.cloud-text {
  margin: 0; font-size: 1.125rem; line-height: 1.65;
  color: var(--atmo-text); max-width: 42ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cloud {
    background: linear-gradient(160deg, #1B2440 0%, #16203A 60%, #131C33 100%);
  }
  :root:not([data-theme="light"]) .cloud-tail { background: #131C33; }
  :root:not([data-theme="light"]) .cloud-close { background: rgba(255,255,255,.08); }
}
@media (max-width: 420px) {
  .cloud { border-radius: 34px; padding: 26px 22px 30px; }
  .cloud-text { font-size: var(--t-body); }
  .cloud-tail.t1 { left: 32px; }
  .cloud-tail.t2 { left: 22px; }
}

/* Силует хмари: три опуклості поверх верхнього краю. Вони того самого
   кольору, що й верх градієнта панелі, тож зливаються з нею в одну форму,
   а не читаються як окремі кружки. Лежать ПІД вмістом (z-index 0 проти 1),
   щоб не перекривати текст. */
/* Тільки ВМІСТ підіймаємо над опуклостями. Спершу тут стояло
   `.cloud > *`, і воно перебивало position:absolute у кнопки закриття та
   в декоративних кульок — хрестик виїжджав у потік і ставав поруч із
   заголовком. Піднімати треба саме те, що має бути зверху, а не всіх
   дітей підряд. */
.cloud-body { position: relative; z-index: 1; }
.cloud-close { z-index: 2; }
.cloud::before, .cloud::after {
  content: ''; position: absolute; z-index: 0; border-radius: 50%;
  background: #FFFFFF; pointer-events: none;
}
.cloud::before { width: 104px; height: 104px; top: -34px; left: 34px; }
.cloud::after  { width: 76px;  height: 76px;  top: -26px; right: 56px; }
.cloud .cloud-bump {
  position: absolute; z-index: 0; border-radius: 50%;
  background: #FFFFFF; pointer-events: none;
  width: 60px; height: 60px; top: -18px; right: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cloud::before,
  :root:not([data-theme="light"]) .cloud::after,
  :root:not([data-theme="light"]) .cloud .cloud-bump { background: #1B2440; }
}
@media (max-width: 420px) {
  .cloud::before { width: 82px; height: 82px; top: -26px; left: 26px; }
  .cloud::after  { width: 58px; height: 58px; top: -20px; right: 44px; }
  .cloud .cloud-bump { width: 46px; height: 46px; top: -14px; right: 14px; }
}

/* ── Докази і шкали пліч-о-пліч ──────────────────────────────────────────
   Ліворуч — чому підходить, праворуч — наскільки. Одне навпроти одного:
   око читає рядок доказу й одразу бачить, чим він підкріплений.
   На вузькому екрані стовпці складаються в один, бо поруч вони стали б
   двома колонками по 140px, у яких не поміщається жодна фраза. */
.prof-evidence {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 14px; align-items: start; margin-top: 10px;
}
.prof-evidence .prof-proofs { margin-top: 0; }
@media (max-width: 560px) {
  .prof-evidence { grid-template-columns: 1fr; gap: 10px; }
}

/* Шкали: тонкі, без зайвих рамок. Число праворуч від підпису, а не над
   смужкою — так рядок читається як речення «Дохід — 80%». */
.prof-bars { display: grid; gap: 9px; }
.pb-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 3px;
}
.pb-label {
  font-size: var(--t-label); font-weight: var(--t-label-w);
  color: var(--atmo-text); letter-spacing: .01em;
}
.pb-num {
  font-size: var(--t-label); font-weight: var(--t-label-w);
  color: var(--atmo-text-secondary); font-variant-numeric: tabular-nums;
}
.pb-track {
  height: 7px; border-radius: 999px; background: var(--bar-empty);
  overflow: hidden;
}
.pb-fill { display: block; height: 100%; border-radius: 999px; background: var(--atmo-primary); }

/* Колір за цінністю — той самий на всіх картках. */
/* Бурштин #D97706 давав проти доріжки 2,91 при потрібних 3 для графіки —
   виміряно на живому. Беремо на пів тону темніший відтінок того ж кольору. */
.val-dokhid    .pb-fill { background: #B45309; }
.val-hnuchkist .pb-fill { background: #0284C7; }
.val-tvorchist .pb-fill { background: #7C3AED; }
.val-dopomoha  .pb-fill { background: #DB2777; }
.val-zrostannia .pb-fill { background: #15803D; }
.val-vplyv     .pb-fill { background: #EA580C; }
.val-prestyzh  .pb-fill { background: #9333EA; }

/* Причина «не в п'ятірці» на рядку ваучерного списку: професія з відсотком
   вищим за п'ятірку поруч із «5 найточніших» без пояснення читалась як
   суперечність. */
.vch-why { display: block; margin-top: 4px; font-size: 0.78125rem; line-height: 1.4; color: var(--atmo-text-secondary); }

/* ═══════════════════════════════════════════════════════════════════════
   КАРТКА ПРОФЕСІЇ «ЯК СПРАВА» (02.09.2026) — professionCardV2 в app.js
   Одна колонка, один герой (гроші), кольори лише як код:
   зелений — вже твоє, бурштин — обережно, синій — дія.
   ═══════════════════════════════════════════════════════════════════════ */
.prof.pc2 {
  display: flex; flex-direction: column; align-items: stretch; gap: 18px;
  padding: 22px 24px 22px; cursor: default;
  border-left: 1.5px solid #CBD5E1;
  border-radius: 22px;
}
.prof.pc2:hover { background: var(--atmo-surface); }
.zone .prof.pc2:hover { transform: none; box-shadow: var(--shadow-card); }

.pc2-head { display: flex; align-items: center; gap: 16px; cursor: pointer; border-radius: 12px; }
.pc2-head:focus-visible { outline: 2px solid var(--atmo-primary); outline-offset: 4px; }
.pc2-photo {
  width: 64px; height: 64px; flex: 0 0 auto; object-fit: cover; border-radius: 16px;
  background: var(--role-fact-bg);
}
.pc2-photo-empty { display: flex; align-items: center; justify-content: center; font-size: 1.75rem; }
.pc2-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc2-name {
  font-family: var(--atmo-font-display); font-size: 1.5rem; font-weight: 800;
  line-height: 1.15; letter-spacing: -.02em;
}
.pc2-cap, .pc2-note { font-size: 0.84375rem; line-height: 1.35; color: var(--atmo-text-secondary); }
.pc2-note b { color: var(--atmo-text); font-weight: 700; }

/* Три плитки: гроші ширші й більші за решту — герой один. */
.pc2-tiles { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 12px; }

/* Смужка про ринок: не плитка в ряду, а окремий факт іншого роду —
   про роботодавців, а не про роботу. Фони тільки токенами. */
.pc2-market { margin-top: 12px; padding: 14px 18px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 4px; }
.pc2-market.yours { background: var(--role-yours-bg); }
.pc2-market.fact { background: var(--role-fact-bg); }
.pc2-market.care { background: var(--role-care-bg); }
.mk-big { font-size: 1.1875rem; font-weight: 800; line-height: 1.25; color: var(--atmo-text); }
.mk-src { margin-top: 2px; opacity: .85; }
@media (max-width: 600px) { .mk-big { font-size: 1.0625rem; } }
.pc2-tiles.two { grid-template-columns: 1.7fr 1fr; }
.pc2-tile {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 16px 18px 14px; border-radius: 16px; min-width: 0;
}
.pc2-tile.fact  { background: var(--role-fact-bg); }
.pc2-tile.yours { background: var(--role-yours-bg); }
.pc2-tile.yours .pc2-big, .pc2-tile.yours .pc2-note { color: var(--role-yours-ink); }
.pc2-tile.care  { background: var(--role-care-bg); }
.pc2-tile.care .pc2-big, .pc2-tile.care .pc2-note { color: var(--role-care-ink); }
.pc2-money { background: var(--role-fact-bg); }
.pc2-big {
  font-family: var(--atmo-font-display); font-size: 2.375rem; font-weight: 800;
  line-height: 1; letter-spacing: -.025em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pc2-big-s { font-size: 1.375rem; line-height: 1.1; white-space: normal; }
.pc2-unit { font-size: 1.125rem; font-weight: 700; letter-spacing: 0; }

/* Ярлики блоків: одна рубрика, один колір-код. */
.pc2-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--atmo-text-secondary);
}
.pc2-label .ic { width: 15px; height: 15px; }
.pc2-label.yours  { color: var(--role-yours-ink); }
.pc2-label.care   { color: var(--role-care-ink); }
.pc2-label.action { color: var(--atmo-primary-dark); }

/* Чому ти */
.pc2-why {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 20px; border-radius: 16px; border: 1px solid var(--atmo-border);
}
.pc2-phrase {
  font-family: var(--atmo-font-display); font-size: 1.1875rem; font-weight: 800; line-height: 1.3;
}
.pc2-edu { font-size: 0.9375rem; line-height: 1.4; color: var(--atmo-text-secondary); }
.pc2-edu.care { color: var(--role-care-ink); }
.pc2-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pc2-pill {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; line-height: 1; white-space: nowrap;
}
.pc2-pill.yours { background: var(--role-yours-bg); color: var(--role-yours-ink); }
.pc2-pill.fact  { background: var(--role-fact-bg);  color: var(--role-fact-ink); }
.pc2-pill.care  { background: var(--role-care-bg);  color: var(--role-care-ink); }
.pc2-scale { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc2-segs { display: flex; gap: 4px; }
.pc2-seg { width: 16px; height: 6px; border-radius: 999px; background: var(--atmo-border); }
.pc2-seg.on { background: var(--role-yours-ink); }

/* Що важко — бурштин, на всю ширину, не дрібніше за плюси. */
.pc2-hard {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-radius: 16px;
  background: var(--role-care-bg); color: var(--role-care-ink);
}
.pc2-hard > .ic { width: 22px; height: 22px; flex: 0 0 auto; }
.pc2-hard > div { display: flex; flex-direction: column; gap: 3px; }
.pc2-hard-text { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }

/* Перший крок — синій, дія. */
.pc2-step {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px; border-radius: 16px; background: var(--atmo-primary-light);
}
.pc2-step > div:last-child { display: flex; flex-direction: column; gap: 3px; }
.pc2-step-time {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 0 0 64px; color: var(--atmo-primary-dark);
  font-size: 0.78125rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.pc2-step-time .ic { width: 26px; height: 26px; }
.pc2-step-title {
  font-family: var(--atmo-font-display); font-size: 1.1875rem; font-weight: 800; line-height: 1.3;
}

/* Дії: одна велика кнопка на всю ширину, під нею тихі посилання. */
.pc2-actions { display: flex; flex-direction: column; gap: 12px; }
.pc2-try {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 14px 24px;
  background: var(--atmo-primary); color: var(--on-primary);
  border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 1.125rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .25);
  transition: background .12s, transform .12s;
}
.pc2-try:hover { background: var(--atmo-primary-dark); }
.pc2-try:active { transform: translateY(1px); }
.pc2-try .ic { width: 20px; height: 20px; }
.pc2-quiet { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.pc2-link {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font: inherit; font-size: 0.90625rem; font-weight: 600; color: var(--atmo-text-secondary);
}
.pc2-link:hover { color: var(--atmo-primary); text-decoration: underline; text-underline-offset: 3px; }
.pc2-link.on { color: var(--role-yours-ink); }
.pc2-link.full { opacity: .45; cursor: not-allowed; }
.pc2-link.dismiss { color: var(--dismiss-ink); }

/* Печатки — згорнуто під кнопкою, для тих, хто хоче переконатись. */
.pc2-more { border-top: 1px solid var(--atmo-border); padding-top: 14px; }
.pc2-more summary {
  cursor: pointer; list-style: none;
  font-size: 0.78125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--role-yours-ink); display: flex; align-items: center; justify-content: space-between;
}
.pc2-more summary::-webkit-details-marker { display: none; }
.pc2-more summary::after {
  content: ''; width: 8px; height: 8px; border-right: 2px solid var(--atmo-text-secondary);
  border-bottom: 2px solid var(--atmo-text-secondary); transform: rotate(45deg); margin-right: 4px;
  transition: transform .15s;
}
.pc2-more[open] summary::after { transform: rotate(-135deg); }
.pc2-seals { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pc2-seal {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1 1 0; min-width: 96px; text-align: center;
}
.pc2-ring {
  width: 50px; height: 50px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 3px #FFFFFF;
  font-family: var(--atmo-font-display); font-size: 0.8125rem; font-weight: 800;
}
.pc2-ring .ic { width: 22px; height: 22px; }
.pc2-seal.ok .pc2-ring   { background: var(--role-yours-bg); color: var(--role-yours-ink); border: 2px solid var(--role-yours-ink); }
.pc2-seal.mid .pc2-ring  { background: var(--role-fact-bg);  color: var(--role-fact-ink);  border: 2px solid #94A3B8; }
.pc2-seal.care .pc2-ring { background: var(--role-care-bg);  color: var(--role-care-ink);  border: 2px solid var(--role-care-ink); }
.pc2-seal-t { font-size: 0.875rem; font-weight: 700; line-height: 1.2; }
.pc2-seal-c { font-size: 0.78125rem; line-height: 1.3; color: var(--atmo-text-secondary); }
.pc2-force {
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
  padding: 14px 18px; border-radius: 16px; background: var(--role-fact-bg);
}
.pc2-force > .ic { width: 26px; height: 26px; flex: 0 0 auto; color: var(--role-yours-ink); }
.pc2-force > .ic svg { fill: currentColor; stroke: none; }
.pc2-force > div { display: flex; flex-direction: column; gap: 3px; }
.pc2-force-title {
  font-family: var(--atmo-font-display); font-size: 1.0625rem; font-weight: 800; line-height: 1.3;
}
.pc2-force-title mark {
  background: var(--role-yours-bg); color: var(--role-yours-ink); border-radius: 6px; padding: 1px 6px;
}
.pc2-ring .ic svg { fill: none; }
.pc2-seal .pc2-ring .ic svg path[d^="M12 3l2.2"] { fill: currentColor; stroke: none; }

@media (max-width: 600px) {
  .prof.pc2 { padding: 18px 16px; gap: 14px; }
  .pc2-tiles, .pc2-tiles.two { grid-template-columns: 1fr 1fr; }
  .pc2-money { grid-column: 1 / -1; }
  .pc2-big { font-size: 2.125rem; }
  .pc2-big-s { font-size: 1.375rem; }
  .pc2-name { font-size: 1.375rem; }
  .pc2-step { gap: 14px; }
  .pc2-seal { min-width: 84px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЕКРАН «ПРИМІРЯТИ» (03.09.2026) — renderDetails в app.js, макет «C, дві
   колонки». Та сама мова, що й картка .pc2-*: зелений — вже твоє,
   бурштин — обережно, синій — дія.
   ═══════════════════════════════════════════════════════════════════════ */
.dt-card { display: flex; flex-direction: column; gap: 22px; padding: 26px 28px; border-radius: 22px; }
.dt-head { display: flex; align-items: center; gap: 16px; }
.dt-photo { width: 72px; height: 72px; flex: 0 0 auto; object-fit: cover; border-radius: 18px; background: var(--role-fact-bg); }
.dt-photo-empty { display: flex; align-items: center; justify-content: center; color: var(--atmo-text-muted); }
.dt-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dt-name { font-family: var(--atmo-font-display); font-size: 1.625rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: 0; }

.dt-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dt-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dt-col .pc2-tiles, .dt-col .pc2-tiles.two { gap: 10px; grid-template-columns: 1fr 1fr; }
.dt-col .pc2-money { grid-column: 1 / -1; }
.dt-box { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--atmo-border); background: var(--atmo-surface); }
.dt-box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dt-day { background: var(--role-fact-bg); border-color: var(--role-fact-bg); }
.dt-quote { font-family: var(--atmo-font-display); font-size: 1.1875rem; font-weight: 700; line-height: 1.45; }

/* Щоденні задачі */
.dt-progress { display: flex; align-items: center; gap: 10px; }
.dt-count { font-size: 0.84375rem; color: var(--atmo-text-secondary); }
.dt-count b { color: var(--atmo-text); }
.dt-tasks { display: flex; flex-direction: column; gap: 8px; }
.dt-task {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--atmo-border);
  background: var(--atmo-surface); color: var(--atmo-text); cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.3;
}
.dt-task:hover { background: var(--atmo-surface-hover); }
.dt-task.on { background: var(--role-yours-bg); border-color: var(--role-yours-bg); color: var(--role-yours-ink); }
.dt-cb {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 8px; box-sizing: border-box;
  border: 2px solid #CBD5E1; background: var(--atmo-surface);
  display: inline-flex; align-items: center; justify-content: center;
}
.dt-task.on .dt-cb { background: var(--role-yours-ink); border-color: var(--role-yours-ink); color: #FFFFFF; }
.dt-cb .ic { width: 14px; height: 14px; }

/* Наскільки це природно */
.dt-mind { display: flex; align-items: flex-start; gap: 12px; }
.dt-mind-ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--role-yours-ink); }
.dt-mind-ic svg { fill: currentColor; stroke: none; }
.dt-mind-t { font-size: 0.96875rem; font-weight: 700; line-height: 1.3; }
.dt-inds { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; border-top: 1px solid #EEF2F7; }
.dt-ind { display: flex; flex-direction: column; gap: 6px; }
.dt-ind-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.dt-ind-head b { font-size: 0.9375rem; }
.pc2-note.ok { color: var(--role-yours-ink); font-weight: 600; }
.pc2-note.care { color: var(--role-care-ink); font-weight: 600; }
.dt-ind-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: start; gap: 10px; }
.dt-track { position: relative; height: 12px; margin: 4px 0 20px; border-radius: 999px; background: var(--role-fact-bg); }
.dt-fill { position: absolute; left: 0; top: 0; height: 12px; border-radius: 999px; background: var(--role-yours-ink); opacity: .85; }
.dt-mark { position: absolute; top: -4px; width: 3px; height: 20px; margin-left: -1.5px; border-radius: 2px; background: var(--atmo-text); }
.dt-mark-lbl { position: absolute; top: 18px; transform: translateX(-50%); white-space: nowrap; font-size: 0.78125rem; font-weight: 600; color: var(--atmo-text); }
.dt-me { font-family: var(--atmo-font-display); font-size: 0.8125rem; font-weight: 800; color: var(--role-yours-ink); white-space: nowrap; margin-top: 2px; }
.dt-pair { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: stretch; gap: 6px; }
.dt-tile { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--role-fact-bg); font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.dt-tile .pc2-label { font-size: 0.78125rem; }
.dt-tile.ok { background: var(--role-yours-bg); color: var(--role-yours-ink); }
.dt-eq { align-self: center; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--role-fact-bg); color: var(--atmo-text-secondary); font-weight: 800; }
.dt-eq.ok { background: var(--role-yours-bg); color: var(--role-yours-ink); }
.dt-eq .ic { width: 14px; height: 14px; }

/* Трекер шляху */
.dt-stations { display: flex; align-items: flex-start; }
.dt-st { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; position: relative; text-align: center; }
.dt-st-line { position: absolute; left: 50%; top: 13px; width: 100%; height: 2px; background: var(--atmo-border); z-index: 0; }
.dt-st.done .dt-st-line { background: var(--role-yours-ink); }
.dt-st-ring {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--atmo-font-display); font-size: 0.78125rem; font-weight: 800;
  /* Номер кроку теж текст: --atmo-text-muted тут давав 2,56:1. */
  background: var(--atmo-surface); color: var(--atmo-text-secondary); border: 2px solid var(--atmo-border);
}
.dt-st.done .dt-st-ring { background: var(--role-yours-bg); color: var(--role-yours-ink); border-color: var(--role-yours-bg); }
.dt-st.now .dt-st-ring { background: var(--atmo-primary); color: #FFFFFF; border-color: var(--atmo-primary); box-shadow: 0 0 0 4px #DBE7FF; }
.dt-st.care .dt-st-ring { background: var(--role-care-bg); color: var(--role-care-ink); border-color: var(--role-care-ink); box-shadow: 0 0 0 4px rgba(251, 191, 36, .18); }
.dt-st-ring .ic { width: 14px; height: 14px; }
.dt-st-t { font-size: 0.78125rem; font-weight: 700; line-height: 1.2; }
/* Майбутні кроки приглушені, але читабельні. --atmo-text-muted тут
   давав 2,56:1 — той самий сірий, який у власному коментарі до токена
   підписаний «НЕ для тексту». Приглушеність робимо прозорістю, а не
   нечитабельним кольором. */
.dt-st.todo .dt-st-t { color: var(--atmo-text-secondary); opacity: .8; }
.dt-st.now .dt-st-t, .dt-st.care .dt-st-t { font-weight: 800; }
.dt-now { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--atmo-primary-light); }
.dt-now-t { font-size: 0.9375rem; font-weight: 700; line-height: 1.3; }

/* Документи */
.dt-doc { display: flex; align-items: flex-start; gap: 10px; }
.dt-doc-ring { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--role-fact-bg); color: var(--role-fact-ink); }
.dt-doc.done .dt-doc-ring { background: var(--role-yours-bg); color: var(--role-yours-ink); }
.dt-doc.now .dt-doc-ring { background: var(--atmo-primary); color: #FFFFFF; }
.dt-doc.care .dt-doc-ring { background: var(--role-care-bg); color: var(--role-care-ink); }
.dt-doc-ring .ic { width: 13px; height: 13px; }
.dt-doc-t { font-size: 0.9375rem; font-weight: 700; line-height: 1.3; }

/* Дії */
.dt-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.dt-take { width: 100%; }
.dt-jobs {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 13px 24px; border-radius: 14px; border: 1.5px solid #CBD5E1; background: var(--atmo-surface);
  color: var(--atmo-text); font-size: 1rem; font-weight: 700; text-decoration: none;
}
.dt-jobs:hover { border-color: var(--atmo-primary); color: var(--atmo-primary); }
.dt-jobs .ic { width: 16px; height: 16px; }

/* Схожі */
.dt-sim { display: flex; flex-direction: column; }
.dt-sim-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  padding: 10px 0; border: 0; border-bottom: 1px solid #EEF2F7; background: none; color: var(--atmo-text); cursor: pointer; font: inherit;
}
.dt-sim-row:last-child { border-bottom: 0; }
.dt-sim-row:hover .dt-sim-name { color: var(--atmo-primary); }
.dt-sim-row .ic { width: 18px; height: 18px; color: var(--atmo-text-secondary); }
.dt-sim-name { font-size: 0.9375rem; font-weight: 700; line-height: 1.25; }

@media (max-width: 900px) {
  .dt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dt-card { padding: 18px 16px; gap: 16px; }
  .dt-name { font-size: 1.375rem; }
  .dt-quote { font-size: 1.0625rem; }
  .dt-st-t { font-size: 0.78125rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ПЕРША СТОРІНКА РЕЗУЛЬТАТУ «Тебе побачили» (03.09.2026, макет 1B):
   плакат по центру — портрет, назва, суть, три слова, кнопка.
   ═══════════════════════════════════════════════════════════════════════ */
.takt-one { min-height: 0; display: flex; justify-content: center; padding: 8px 0 20px; }
.panel.hero2 {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  width: 100%; max-width: 720px; padding: 36px 32px 30px; border-radius: 22px;
}
.hero2-photo { width: 180px; height: 180px; object-fit: cover; border-radius: 28px; background: var(--role-fact-bg); }
.hero2-title {
  font-family: var(--atmo-font-display); font-size: 2.25rem; font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; margin: 0;
}
.hero2-essence { font-size: 1.1875rem; line-height: 1.45; max-width: 520px; margin: 0; }
.hero2-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hero2-chips .pc2-pill { font-size: 0.875rem; padding: 7px 13px; }
.hero2-chips .pc2-pill .ic { width: 13px; height: 13px; }
.hero2-ctas { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 6px; }
.hero2-next { width: auto; padding: 16px 28px; }
@media (max-width: 600px) {
  .panel.hero2 { padding: 26px 18px 24px; gap: 14px; }
  .hero2-photo { width: 140px; height: 140px; }
  .hero2-title { font-size: 1.875rem; }
  .hero2-essence { font-size: 1.0625rem; }
  .hero2-next { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ДРУГА СТОРІНКА РЕЗУЛЬТАТУ «Три твої таланти» (03.09.2026, макет 2B):
   тихо і тепло — звичайне накреслення, без великих літер і чисел-героїв.
   ═══════════════════════════════════════════════════════════════════════ */
.takt-forces { display: flex; justify-content: center; padding: 8px 0 20px; }
.panel.tf2 { display: flex; flex-direction: column; gap: 26px; width: 100%; max-width: 720px; padding: 38px 44px 32px; border-radius: 22px; }
.tf2-head { display: flex; flex-direction: column; gap: 8px; }
.tf2-title { font-family: var(--atmo-font-display); font-size: 1.625rem; font-weight: 700; line-height: 1.3; margin: 0; }
.tf2-sub { font-size: 1rem; color: var(--atmo-text-secondary); }
.tf2-list { display: flex; flex-direction: column; gap: 20px; }
.tf2-item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start;
  width: 100%; text-align: left; padding: 6px; margin: -6px; border: 0; border-radius: 14px;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.tf2-item:hover { background: var(--atmo-surface-hover); }
.tf2-img { width: 52px; height: 52px; object-fit: cover; border-radius: 12px; margin-top: 2px; background: var(--role-fact-bg); }
.tf2-emoji { display: flex; align-items: center; justify-content: center; font-size: 1.625rem; }
.tf2-text { display: flex; flex-direction: column; gap: 4px; }
.tf2-name { font-size: 0.9375rem; font-weight: 700; color: var(--role-yours-ink); }
.tf2-say { font-size: 1.125rem; font-weight: 500; line-height: 1.5; }
.tf2-bridge { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: 18px; background: var(--role-fact-bg); }
.tf2-bridge-text { font-size: 1.0625rem; line-height: 1.55; }
.tf2-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tf2-next { width: auto; padding: 16px 28px; }
@media (max-width: 600px) {
  .panel.tf2 { padding: 26px 18px 22px; gap: 20px; }
  .tf2-title { font-size: 1.375rem; }
  .tf2-say { font-size: 1.03125rem; }
  .tf2-bridge { padding: 16px 16px; }
  .tf2-next { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ПРОХОДЖЕННЯ ТЕСТУ (03.09.2026): шапка з п'ятьма частинами і часом,
   обкладинки частин, слова під шкалою, теплий фініш.
   ═══════════════════════════════════════════════════════════════════════ */
.pbar { flex-direction: column; align-items: stretch; gap: 8px; }
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-part { font-size: 0.8125rem; font-weight: 600; color: var(--atmo-text-secondary); }
.pp-time { font-size: 0.8125rem; color: var(--atmo-text-muted); }
.pp-segs { display: flex; gap: 6px; }
.pp-seg { flex: 1 1 0; height: 6px; border-radius: 999px; background: var(--atmo-border); position: relative; overflow: hidden; }
.pp-fill { position: absolute; left: 0; top: 0; height: 6px; border-radius: 999px; background: var(--atmo-primary); transition: width .3s ease; }
.pp-seg.done .pp-fill { background: var(--role-yours-ink); }

.cover { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 4px; }
.cover-kicker { font-size: 0.8125rem; font-weight: 600; color: var(--atmo-text-secondary); }
.cover-title { font-family: var(--atmo-font-display); font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 0; }
.cover-text { font-size: 1rem; line-height: 1.5; margin: 0; }
.cover-after { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--role-fact-bg); font-size: 0.9375rem; }
.cover-after .ic { width: 16px; height: 16px; color: var(--role-yours-ink); flex: 0 0 auto; }
/* Кнопка на всю ширину, як на решті екранів тесту. Була притиснута
   ліворуч під широким абзацом — і читалась як другорядна дія збоку,
   хоча це єдина дія екрана. */
.cover-go { width: 100%; align-self: stretch; padding: 15px 26px; margin-top: 10px; }
.cover-go[disabled] { opacity: .6; cursor: default; }

.q-kicker { font-size: 0.8125rem; color: var(--atmo-text-muted); margin: 6px 0 -4px; }
.q-calm { font-size: 0.84375rem; color: var(--atmo-text-muted); text-align: center; margin-top: 18px; }
.sdots { align-items: flex-start; gap: 6px; }
.sd-col { display: grid; grid-template-rows: 68px auto; align-items: center; justify-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.sd-col .sdot { margin: 0; }
.sd-word { font-size: 0.8125rem; font-weight: 600; color: var(--atmo-text-secondary); text-align: center; line-height: 1.2; }
.sd-col.picked .sd-word { color: var(--atmo-primary-dark); }
.sends { display: none; }

.done2 { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 6px; }
.done-ring { width: 64px; height: 64px; border-radius: 50%; background: var(--role-yours-bg); color: var(--role-yours-ink); display: flex; align-items: center; justify-content: center; }
.done-ring .ic { width: 30px; height: 30px; }
.done-title { font-family: var(--atmo-font-display); font-size: 1.875rem; font-weight: 800; line-height: 1.15; margin: 8px 0 0; }
.done-text { font-size: 1.0625rem; line-height: 1.5; max-width: 420px; margin: 0; }
.done-go { width: auto; padding: 16px 30px; margin-top: 8px; }
.done-note { font-size: 0.84375rem; color: var(--atmo-text-muted); margin: 4px 0 0; }
@media (max-width: 600px) {
  .cover-title { font-size: 1.5rem; }
  .cover-go, .done-go { width: 100%; }
  .sd-word { font-size: 0.78125rem; }
  .sdots { gap: 2px; }
  .sd-col { grid-template-rows: 56px auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ШВИДКИЙ РЕЗУЛЬТАТ після анкети (03.09.2026) — картка в мові L2.
   ═══════════════════════════════════════════════════════════════════════ */
.prof.pc2.qk2 { gap: 14px; padding: 18px 20px; border-radius: 18px; }
.qk2-head { cursor: default; }
.qk2-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 2px;
}
.qk2 .pc2-big { font-size: 1.875rem; }
.qk2 .pc2-big-s { font-size: 1.1875rem; }
.qk2-from { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--atmo-border); }
.qk2-phrase { font-size: 1.03125rem; }
.qk2-acts { justify-content: flex-end; }

/* ═══════════════════════════════════════════════════════════════════════
   «МІЙ ПЛАН» (03.09.2026) — три речі: цього тижня · за місяць · потім.
   ═══════════════════════════════════════════════════════════════════════ */
.mp { display: flex; flex-direction: column; gap: 14px; background: var(--atmo-surface); border: 1.5px solid #CBD5E1; border-radius: 22px; padding: 22px 24px; box-shadow: var(--shadow-card); }
.mp-head { display: flex; align-items: center; gap: 16px; }
.mp-head .pc2-title { flex: 1 1 auto; }
.mp-count { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.mp-count-n { font-family: var(--atmo-font-display); font-size: 1.625rem; font-weight: 800; line-height: 1; }
.mp-count-n span { font-size: 0.875rem; color: var(--atmo-text-secondary); font-weight: 700; }
.mp-thing { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--atmo-border); background: var(--atmo-surface); }
.mp-thing.done { border-color: var(--role-yours-bg); background: var(--role-yours-bg); }
.mp-num { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--atmo-font-display); font-size: 1rem; font-weight: 800; background: var(--atmo-primary-light); color: var(--atmo-primary-dark); }
.mp-thing.done .mp-num { background: var(--role-yours-ink); color: #FFFFFF; }
.mp-num .ic { width: 18px; height: 18px; }
.mp-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mp-title { font-family: var(--atmo-font-display); font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.mp-thing.done .mp-title { text-decoration: line-through; color: var(--atmo-text-secondary); }
.mp-text { font-size: 0.96875rem; line-height: 1.5; }
.mp-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.mp-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.90625rem; font-weight: 600; color: var(--atmo-primary-dark); text-decoration: none; align-self: flex-start; }
.mp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mp-link .ic { width: 15px; height: 15px; }
.mp-done { align-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1.5px solid #CBD5E1; background: var(--atmo-surface); cursor: pointer; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--atmo-text-secondary); white-space: nowrap; }
.mp-done.on { border-color: var(--role-yours-ink); color: var(--role-yours-ink); }
.mp-done .ic { width: 14px; height: 14px; }
.mp-fold { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--role-fact-bg); }
.mp-fold-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.78125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--atmo-primary-dark); }
.mp-fold-caret { font-size: 1rem; color: var(--atmo-text-secondary); transition: transform .15s; }
.mp-fold-btn.open .mp-fold-caret { transform: rotate(180deg); }
.mp-fold-body { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.mp-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 0.875rem; line-height: 1.45; }
.mp-k { color: var(--atmo-text-secondary); font-weight: 600; }
.mp-row-acts { display: flex; gap: 14px; margin-top: 4px; }
.mp-fold .say-fold { margin: 0; }
.mp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--atmo-border); }
.mp-foot-acts { display: flex; gap: 16px; }
@media (max-width: 600px) {
  .mp { padding: 16px 14px; }
  .mp-thing { grid-template-columns: 36px minmax(0, 1fr); padding: 14px; }
  .mp-num { width: 36px; height: 36px; font-size: 0.875rem; }
  .mp-done { grid-column: 2; justify-self: start; }
  .mp-row { grid-template-columns: 1fr; gap: 2px; }
}
@media print { .mp { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   «ТВІЙ ДОСТУП» (03.09.2026) — код, повернення, план у три рядки.
   ═══════════════════════════════════════════════════════════════════════ */
.panel.finale.fin2 { display: flex; flex-direction: column; gap: 14px; background: var(--atmo-surface); border-radius: 22px; padding: 22px 24px; }
.fin2-title { font-family: var(--atmo-font-display); font-size: 1.5rem; font-weight: 800; line-height: 1.15; margin: 0; }
.fin2-code-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fin2-code { font-family: var(--atmo-font-display); font-size: 2.5rem; font-weight: 800; letter-spacing: .12em; line-height: 1; padding: 10px 16px; border-radius: 14px; background: var(--role-fact-bg); }
.fin2-copy { width: auto; padding: 12px 20px; font-size: 0.9375rem; min-height: 0; }
.fin2-text { font-size: 1.03125rem; line-height: 1.5; margin: 0; }
.fin2-text .pc2-note { display: block; margin-top: 4px; }
.fin2-advisor { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--role-fact-bg); font-size: 0.9375rem; }
.fin2-advisor .ic { width: 20px; height: 20px; color: var(--atmo-primary-dark); flex: 0 0 auto; }
.fin2-plan { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--atmo-border); }
.fin2-row { display: grid; grid-template-columns: 28px 120px minmax(0, 1fr); gap: 10px; align-items: center; }
.fin2-n { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--atmo-font-display); font-size: 0.8125rem; font-weight: 800; background: var(--atmo-primary-light); color: var(--atmo-primary-dark); }
.fin2-row.done .fin2-n { background: var(--role-yours-ink); color: #FFFFFF; }
.fin2-n .ic { width: 14px; height: 14px; }
.fin2-when { font-size: 0.8125rem; font-weight: 600; color: var(--atmo-text-secondary); }
.fin2-what { font-size: 0.96875rem; font-weight: 600; line-height: 1.35; }
.fin2-row.done .fin2-what { color: var(--atmo-text-secondary); text-decoration: line-through; }
@media (max-width: 600px) {
  .panel.finale.fin2 { padding: 16px 14px; }
  .fin2-code { font-size: 1.875rem; padding: 8px 12px; }
  .fin2-row { grid-template-columns: 28px minmax(0, 1fr); }
  .fin2-when { grid-column: 2; }
  .fin2-what { grid-column: 2; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ПРОХОДЖЕННЯ: ДРІБНІ ПРАВКИ ЗА ЖИВИМ ВІДГУКОМ (03.09.2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Екран «Що тобі дається легко?»: шість рядків замість плиток по центру.
   Було: іконка над текстом, текст по центру у два рядки — доводилось
   вчитуватись у кожну. Тепер іконка ліворуч, фраза в один рядок, око
   сканує список зверху вниз. */
.sv-lead { margin: 0 0 16px; font-size: 0.9375rem; line-height: 1.45; color: var(--atmo-text-secondary); }
.sv-grid { grid-template-columns: 1fr; gap: 8px; }
.sv-tile {
  flex-direction: row; align-items: center; text-align: left; gap: 14px;
  padding: 14px 16px; border-radius: 14px;
}
.sv-tile-text { font-size: 1.03125rem; font-weight: 600; line-height: 1.3; }
.sv-tile-icon { width: 38px; height: 38px; flex: 0 0 38px; margin: 0; }
.sv-tile-icon .ic { width: 19px; height: 19px; }
.sv-tile:hover { transform: none; }

/* 2. Екрани-повідомлення (дзеркала, самооцінка): текст стояв 26px
   заголовковим шрифтом — це читалось як гасло і тиснуло. Тепер звичайне
   накреслення, менший кегль, більше повітря: спокійна репліка, а не плакат. */
.insight-card { padding: 22px 22px; box-shadow: none; border: 1px solid var(--atmo-border); }
.insight-text {
  font-family: var(--atmo-font-primary);
  font-size: 1.1875rem; font-weight: 400; line-height: 1.55; letter-spacing: 0;
}
.insight-card h1 { margin: 0 0 10px; }
.sv-flip .sv-main { font-size: 1.375rem; font-weight: 500; line-height: 1.4; }
@media (max-width: 600px) { .sv-flip .sv-main { font-size: 1.1875rem; } }
.sv-note { margin-top: 12px; }

/* 3. Картка питань більше не стрибає по висоті.
   Було: min-height: min(520px, 74vh) і центрування — коротке питання
   тримало 520px, довгий чек-лист виростав, і рамка «дихала» на кожному
   екрані. Тепер висота стала: 560px на комп'ютері, і вміст притиснутий
   до верху, тож короткий і довгий екрани мають однакову рамку. */
body.zoned #quiz { min-height: 560px; }
body.zoned main#screen, body.zoned main.narrow { justify-content: flex-start; }

/* Виняток для обкладинки частини. Картка тримає сталі 560px, і вміст на
   ній притиснутий до верху — це правильно для питань, які її заповнюють.
   Але в обкладинки вмісту 220px, і на комп'ютері під кнопкою лишалось
   майже 300px порожнього: екран виглядав недомальованим, а кнопка —
   загубленою збоку вгорі. Тому саме цей екран центруємо по висоті й
   обмежуємо ширину рядка: 800px тексту читати незручно, і кнопка під
   таким абзацом стоїть надто далеко ліворуч. */
body.zoned .cover { max-width: 620px; }
/* Центрує саме ОБГОРТКА: між #screen і вмістом стоїть .fade, тож правило
   на самому вмісті на зовнішню розкладку не впливало взагалі.
   Клас ставиться вручну там, де вмісту свідомо мало (обкладинка частини,
   короткі відповіді-репліки): решта екранів картку заповнює. */
body.zoned #screen > .fade-center { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  /* і ширину теж: на широкій картці рядок ішов на 800px, а такий рядок
     очима не тримається */
  max-width: 620px; }
@media (max-width: 600px) { body.zoned #screen > .fade-center { flex: 0 1 auto; justify-content: flex-start; } }
@media (max-width: 600px) {
  body.zoned #quiz { min-height: 0; }
}
@media (max-height: 700px) {
  body.zoned #quiz { min-height: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   «ГЛИБШЕ» (03.09.2026) — шість питань і відповідь на кожне.
   ═══════════════════════════════════════════════════════════════════════ */
.dq { display: flex; flex-direction: column; gap: 4px; margin: 26px 0 12px; }
.dq-title { font-family: var(--atmo-font-display); font-size: 1.4375rem; font-weight: 800; line-height: 1.25; margin: 0; }
.dq-box { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--atmo-border); background: var(--atmo-surface); }
.dq-cap-top { padding-top: 10px; border-top: 1px solid #EEF2F7; }
.dq-steps { display: flex; flex-direction: column; gap: 18px; }
.dq-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; position: relative; }
.dq-node { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--atmo-font-display); font-size: 0.8125rem; font-weight: 800; background: var(--atmo-primary-light); color: var(--atmo-primary-dark); position: relative; z-index: 1; }
.dq-node.ok { background: var(--role-yours-bg); color: var(--role-yours-ink); }
.dq-node .ic { width: 15px; height: 15px; }
.dq-line { position: absolute; left: 14px; top: 30px; bottom: -18px; width: 2px; background: var(--atmo-border); }
.dq-step-t { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.dq-folds { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dq-who { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; }
.dq-who-img { width: 96px; height: 96px; object-fit: cover; border-radius: 20px; }
.dq-who-name { font-family: var(--atmo-font-display); font-size: 1.25rem; font-weight: 800; margin-bottom: 6px; }
.dq-who-text { font-size: 1rem; line-height: 1.55; margin: 0 0 8px; }
.dq-forces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.dq-force { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--atmo-border); background: var(--atmo-surface); cursor: pointer; font: inherit; color: inherit; }
.dq-force:hover { border-color: var(--atmo-primary); }
.dq-force-img { width: 44px; height: 44px; object-fit: cover; border-radius: 12px; }
.dq-force-name { font-size: 0.9375rem; font-weight: 700; }
.dq-force-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84375rem; font-weight: 600; color: var(--atmo-primary-dark); }
.dq-force-link .ic { width: 14px; height: 14px; }
.dq-bar { display: flex; flex-direction: column; gap: 5px; }
.dq-bar-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.dq-bar-head b { font-size: 0.9375rem; }
.dq-track { height: 10px; border-radius: 999px; background: var(--role-fact-bg); position: relative; overflow: hidden; }
.dq-fill { position: absolute; left: 0; top: 0; height: 10px; border-radius: 999px; background: var(--atmo-text-secondary); }
.dq-fill.hi { background: var(--role-yours-ink); }
.dq-fill.mid { background: #94A3B8; }
.dq-combo-title { font-family: var(--atmo-font-display); font-size: 1.125rem; font-weight: 800; }
.dq-list { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 600px) {
  .dq-title { font-size: 1.25rem; }
  .dq-who { grid-template-columns: 1fr; }
  .dq-forces { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   КАРТКА ДЛЯ РАДНИКА (03.09.2026) — у мові карток, друкується на аркуш.
   ═══════════════════════════════════════════════════════════════════════ */
.panel.advisor-card.ac2 { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: 22px; }
.ac2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ac2-code { text-align: right; }
.ac2-code-value { font-family: var(--atmo-font-display); font-size: 1.625rem; font-weight: 800; letter-spacing: .1em; }
.ac2-target { display: flex; flex-direction: column; gap: 3px; }
.ac2-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ac2-box { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--atmo-border); }
.ac2-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ac2-tags .pc2-pill { font-size: 0.78125rem; padding: 5px 10px; }
.ac2-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #EEF2F7; }
.ac2-row:last-child { border-bottom: 0; }
.ac2-row.on .ac2-row-name { font-weight: 700; color: var(--atmo-primary-dark); }
.ac2-row-name { font-size: 0.9375rem; }
.ac2-foot { padding-top: 10px; border-top: 1px solid var(--atmo-border); }
.ac-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.ac-actions .pc2-try { width: auto; padding: 14px 22px; }
@media (max-width: 600px) {
  .ac2-two { grid-template-columns: 1fr; }
  .panel.advisor-card.ac2 { padding: 16px 14px; }
}
@media print {
  .panel.advisor-card.ac2 { box-shadow: none; border: 1px solid #CBD5E1; padding: 14px 16px; gap: 10px; }
  .ac2-box, .pc2-tile { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════
   АРКУШ ДЛЯ ДРУКУ (03.09.2026): на екрані невидимий, при друку —
   єдине, що лишається на сторінці.
   ═══════════════════════════════════════════════════════════════════════ */
.print-sheet { display: none; }
@media print {
  /* Ховаємо все, що не аркуш: кроки результату, навігацію, кнопки. */
  body > *, #quiz > *, #screen > *, .zone, .panel, .takt-one, .takt-forces,
  .znav, .step-foot, .trail, .cmp-bar, .bycode-banner, .why-jump { display: none !important; }
  body, #quiz, #screen, #screen > .fade { display: block !important; background: #fff !important; }
  .print-sheet {
    display: block !important; color: #111; font-size: 11pt; line-height: 1.45;
    max-width: none; padding: 0;
  }
  .ps-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    padding-bottom: 8px; border-bottom: 1.5px solid #111; margin-bottom: 12px; }
  .ps-brand { font-size: 14pt; font-weight: 800; }
  .ps-date { font-size: 9.5pt; color: #444; }
  .ps-code { font-size: 12pt; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
  .ps-sec { margin-bottom: 14px; break-inside: avoid; }
  .ps-h { font-size: 9pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #444; margin-bottom: 5px; }
  .ps-job { font-size: 13pt; font-weight: 800; margin-bottom: 4px; }
  .ps-line { display: grid; grid-template-columns: 34mm 1fr; gap: 6mm; padding: 2px 0; break-inside: avoid; }
  .ps-k { color: #444; }
  .ps-step { margin-bottom: 8px; break-inside: avoid; }
  .ps-step-h { display: flex; align-items: baseline; gap: 8px; }
  .ps-box { display: inline-block; width: 4.5mm; height: 4.5mm; border: 1px solid #111;
    text-align: center; line-height: 4.5mm; font-size: 9pt; flex: 0 0 auto; }
  .ps-step-t { color: #333; margin-left: calc(4.5mm + 8px); }
  .ps-foot { margin-top: 14px; padding-top: 8px; border-top: 1px solid #999;
    font-size: 9pt; color: #444; }
  a[href^="http"]::after { content: none !important; }
  @page { margin: 14mm; }
}

/* ═══════════════════════════════════════════════════════════════════════
   СПИСКИ ПРОФЕСІЙ (03.09.2026) — «Досліди більше» і «Усі професії».
   ═══════════════════════════════════════════════════════════════════════ */
.plist-wrap { display: flex; flex-direction: column; gap: 8px; max-width: 760px; margin: 0 auto; }
.plist-h1 { font-family: var(--atmo-font-display); font-size: 1.625rem; font-weight: 800; line-height: 1.2; margin: 2px 0 4px; }
.plist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.plist-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; gap: 14px; align-items: center;
  width: 100%; text-align: left; padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--atmo-border); background: var(--atmo-surface);
  cursor: pointer; font: inherit; color: inherit;
}
.plist-row:hover { border-color: var(--atmo-primary); }
.plist-img { width: 52px; height: 52px; object-fit: cover; border-radius: 14px; background: var(--role-fact-bg); }
.plist-img-empty { display: flex; align-items: center; justify-content: center; font-size: 1.375rem; }
.plist-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plist-name { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.plist-facts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plist-money { font-family: var(--atmo-font-display); font-size: 0.9375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.plist-facts .pc2-pill { font-size: 0.78125rem; padding: 4px 10px; }
.plist-arrow { width: 18px; height: 18px; color: var(--atmo-text-secondary); }
.plist-dir { margin-top: 10px; }
.plist-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--atmo-border); background: var(--atmo-surface);
  cursor: pointer; font: inherit; color: inherit;
}
.plist-head:hover { border-color: var(--atmo-primary); }
.plist-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.plist-caret { color: var(--atmo-text-secondary); font-size: 1.125rem; transition: transform .15s; }
.plist-head.open .plist-caret { transform: rotate(180deg); }
.plist-more { margin: 6px auto 0; }
.plist-hidden { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--atmo-border); }
@media (max-width: 600px) {
  .plist-h1 { font-size: 1.375rem; }
  .plist-row { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .plist-arrow { display: none; }
  .plist-img { width: 44px; height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ФІДБЕК (03.09.2026) — одне питання чотирма словами.
   ═══════════════════════════════════════════════════════════════════════ */
.fb-wrap { display: flex; flex-direction: column; gap: 6px; }
.fb-h1 { font-family: var(--atmo-font-display); font-size: 1.75rem; font-weight: 800; line-height: 1.15; margin: 2px 0 4px; }
.fb-words { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.fb-word {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--atmo-border);
  background: var(--atmo-surface); color: inherit; font: inherit; cursor: pointer;
}
.fb-word:hover { border-color: var(--atmo-primary); }
.fb-word.on { border-color: var(--atmo-primary); background: var(--atmo-primary-light); }
.fb-word-label { font-size: 1.0625rem; font-weight: 700; }
.fb-thanks { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px;
  border-radius: 14px; background: var(--role-yours-bg); color: var(--role-yours-ink); font-size: 0.9375rem; font-weight: 600; }
.fb-thanks .ic { width: 16px; height: 16px; }
.fb-rest { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.fb-block { display: flex; flex-direction: column; gap: 8px; }
.fb-text, .fb-input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--atmo-border); background: var(--atmo-surface);
  font: inherit; font-size: 1rem; color: var(--atmo-text);
}
.fb-text:focus, .fb-input:focus { outline: none; border-color: var(--atmo-primary); }
.fb-two { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.fb-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-pick { cursor: pointer; border: 0; font: inherit; }
.fb-pick.on { background: var(--role-yours-bg); color: var(--role-yours-ink); }
.fb-acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fb-send { width: auto; padding: 15px 26px; }
@media (max-width: 600px) {
  .fb-h1 { font-size: 1.5rem; }
  .fb-words { grid-template-columns: 1fr; }
  .fb-send { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ПИТАННЯ-СІТКА (03.09.2026): 26 областей кнопками на весь рядок
   перетворювали екран на сувій.
   ═══════════════════════════════════════════════════════════════════════ */
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.igrid-item {
  padding: 12px 14px; border-radius: 12px; text-align: left;
  border: 1.5px solid var(--atmo-border); background: var(--atmo-surface);
  font: inherit; font-size: 0.9375rem; color: inherit; cursor: pointer; line-height: 1.25;
}
.igrid-item:hover { border-color: var(--atmo-primary); }
.igrid-item.picked { border-color: var(--atmo-primary); background: var(--atmo-primary-light); font-weight: 700; }
.igrid-skip { grid-column: 1 / -1; color: var(--atmo-text-secondary); }
@media (max-width: 420px) { .igrid { grid-template-columns: 1fr 1fr; } .igrid-item { font-size: 0.875rem; padding: 11px 12px; } }

/* ═══════════════════════════════════════════════════════════════════════
   ДЕ ЦЯ РОБОТА БУВАЄ (03.09.2026) — рядок на картці й блок у «Приміряти».
   ═══════════════════════════════════════════════════════════════════════ */
.pc2-place {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  padding: 10px 14px; border-radius: 12px; margin-top: -2px;
  background: var(--role-fact-bg);
}
.pc2-place.yours { background: var(--role-yours-bg); }
.pc2-place.care { background: var(--role-care-bg); }
.pc2-place-word { font-size: 0.9375rem; font-weight: 700; }
.pc2-place.yours .pc2-place-word { color: var(--role-yours-ink); }
.pc2-place.care .pc2-place-word { color: var(--role-care-ink); }
.pc2-place .pc2-note { margin: 0; }
.pc2-place-rem { font-size: 0.78125rem; padding: 3px 9px; }
.dt-place { display: flex; flex-direction: column; gap: 4px; }
.dt-place-word { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.dt-place.care .dt-place-word { color: var(--role-care-ink); }
.dt-place.yours .dt-place-word { color: var(--role-yours-ink); }
.dt-place-rem { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.dt-place-rem .pc2-note { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   ДВЕРІ (03.09.2026): як заходять, вік плюс, найпростіші двері, скрипти.
   ═══════════════════════════════════════════════════════════════════════ */
.pc2-door { display: flex; flex-direction: column; gap: 6px; }
.pc2-door .pc2-place { margin-top: 0; }
.dt-door { padding: 8px 12px; border-radius: 12px; background: var(--role-fact-bg); margin-bottom: 4px; }
.dt-door.yours { background: var(--role-yours-bg); }
.dt-door.care { background: var(--role-care-bg); }
/* Двері входу: слово, доказ, перший крок. Крок відділено рискою і зсунуто —
   це єдиний рядок у блоці, який просить дію, і він має читатись окремо. */
.dt-way { margin-bottom: 6px; }
.dt-way-step {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--atmo-border);
  font-weight: 600; line-height: 1.35;
}
.dt-way-lic { margin: 2px 0 4px; }
.dt-place-sub { margin-top: 8px; }
.easy-door {
  display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; margin-top: 18px;
  border-radius: 20px; background: var(--atmo-surface); border: 1.5px solid var(--atmo-primary);
}
.easy-door-title { font-family: var(--atmo-font-display); font-size: 1.3125rem; font-weight: 800; line-height: 1.2; }
.easy-door-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.easy-door-acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.easy-door-btn { width: auto; padding: 13px 20px; text-decoration: none; }
.ask-list { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 0.9375rem; line-height: 1.4; }
.ask-say { margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.5; font-style: italic; }

/* Швидкий вхід про ваучер із головного екрана. */
.w2-vch { display: flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 10px 14px; border-radius: 12px; background: var(--role-fact-bg);
  border: 1px solid var(--atmo-border); width: 100%; text-align: left;
  font-size: 0.9375rem; font-weight: 700; color: var(--atmo-text); cursor: pointer; }
.w2-vch:hover { border-color: var(--atmo-primary); }
.w2-vch .ic { width: 18px; height: 18px; flex: 0 0 auto; }

/* Відповідь швидкої перевірки. */
.vch-verdict { display: flex; flex-direction: column; gap: 10px; }
.vch-verdict.yours { background: var(--role-yours-bg); }
.vch-verdict.care { background: var(--role-care-bg); }
.vch-verdict.fact { background: var(--role-fact-bg); }
.vv-title { font-size: 1.5625rem; line-height: 1.2; margin: 0; }
.vv-text { font-size: 1rem; line-height: 1.55; margin: 0; color: var(--atmo-text); }
.vv-todo { font-size: 1rem; line-height: 1.55; margin: 0; font-weight: 700; color: var(--atmo-text); }
.vv-fine { margin: 2px 0 0; }
.vv-next { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
@media (max-width: 600px) { .vv-title { font-size: 1.375rem; } }

/* Готове повідомлення: одна дія замість трьох списків для читання. */
.ask-act { margin-top: 12px; padding: 14px; border-radius: 14px;
  background: var(--role-fact-bg); border: 1px solid var(--atmo-border); }
.ask-act .ask-say { font-style: normal; margin: 6px 0 12px; }
.ask-act .mp-row-acts { margin-bottom: 8px; }
.ask-act .mp-fold { margin-top: 12px; }
.ask-send { min-height: 48px; }

/* Останнє слово сторінки: одна незакрита річ із датою. */
.open-thing { display: flex; flex-direction: column; gap: 8px; }
.ot-what { font-size: 1.3125rem; font-weight: 800; line-height: 1.3; color: var(--atmo-text); }
.ot-btn { margin-top: 6px; font-size: 1rem; padding-left: 16px; padding-right: 16px; }
.ot-foot { margin-top: 2px; }
@media (max-width: 600px) { .ot-what { font-size: 1.1875rem; } }

@media print { .ps-ol { margin: 2px 0 6px; padding-left: 18px; } .ps-ol li { margin: 1px 0; } }
@media (max-width: 600px) {
  .easy-door { padding: 16px 14px; }
  .easy-door-title { font-size: 1.1875rem; }
  .easy-door-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   КУДИ БЕРУТЬ ОДРАЗУ (04.09.2026) — прямий шлях до грошей.
   ═══════════════════════════════════════════════════════════════════════ */
.fast { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.fast-first { padding: 18px; border-radius: 18px; border: 1.5px solid var(--atmo-primary); background: var(--atmo-surface); }
.fast-title { font-family: var(--atmo-font-display); font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.fast-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fast-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 14px; border: 1px solid var(--atmo-border); background: var(--atmo-surface); }
.fast-row.below { opacity: .75; }
.fast-img { width: 44px; height: 44px; object-fit: cover; border-radius: 12px; background: var(--role-fact-bg); }
.fast-img-empty { display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.fast-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fast-name { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.fast-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fast-facts .pc2-pill { font-size: 0.78125rem; padding: 3px 9px; }
.fast-jobs { white-space: nowrap; }
@media (max-width: 600px) {
  .fast-row { grid-template-columns: 40px minmax(0, 1fr); }
  .fast-jobs { grid-column: 2; justify-self: start; }
  .fast-first { padding: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   СТАРТОВИЙ ЕКРАН (04.09.2026) — обіцянка і три речі.
   ═══════════════════════════════════════════════════════════════════════ */
.wtext.w2 { display: flex; flex-direction: column; gap: 14px; max-width: 440px; }
.w2-h1 { margin: 0; font-size: 2.125rem; line-height: 1.12; letter-spacing: -.02em; text-wrap: pretty; }
.w2-lead { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--atmo-text-secondary); text-wrap: pretty; }
.w2-things { display: flex; flex-direction: column; gap: 10px; }
.w2-thing {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 13px 16px; background: var(--atmo-surface); border-radius: var(--radius-card);
}
.w2-badge { width: 52px; height: 52px; border-radius: 14px; background: var(--atmo-primary-light); display: flex; align-items: center; justify-content: center; }
.w2-num { font-family: var(--atmo-font-display); font-size: 1.375rem; font-weight: 800; color: var(--atmo-primary); }
.w2-ic { width: 24px; height: 24px; }
.w2-ic-green { color: #15803D; }
.w2-ic-amber { color: #B45309; }
.w2-thing:nth-child(2) .w2-badge { background: var(--atmo-success-light); }
.w2-thing:nth-child(3) .w2-badge { background: var(--role-care-bg); }
.w2-thing-text { display: flex; flex-direction: column; gap: 2px; }
.w2-thing-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.w2-thing-note { font-size: 0.875rem; color: var(--atmo-text-secondary); line-height: 1.35; }
.w2-quick {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px;
  background: var(--role-fact-bg); font-size: 0.875rem; color: var(--atmo-text-secondary); line-height: 1.35;
}
.w2-quick .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.wtext.w2 .wstart { margin-top: 6px; }
.w2-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.875rem; color: var(--atmo-text-secondary); }
.w2-code { margin: 0; font-size: 0.875rem; white-space: nowrap; }
@media (max-width: 600px) {
  .w2-h1 { font-size: 1.875rem; }
}

/* Шкала на одному місці (04.09.2026): заголовок питання інтересів чи
   цінностей буває на 2–4 рядки, і хрестик із сердечком стрибали від
   питання до питання. Під заголовок резервується висота найдовшого —
   чотири рядки на телефоні, три на широкому екрані. */
.question.q-fixed { min-height: calc(26px * 1.22 * 4); display: flex; align-items: flex-end; }
/* Ширина рядка й шкали — стала і однакова. Картка тепер завжди 860px, і
   без цієї межі питання розтягувалось на всі 804, а п'ять варіантів
   розповзались колонками по 156px. Читати такий рядок незручно, а до
   крайніх значків далеко тягтись. */
/* …і ця колонка стоїть посередині картки, а не притиснена ліворуч
   (06.09.2026). Межа 620px була, а вирівнювання — ні, тож на широкому
   екрані питання й п'ять кружків тулились до лівого краю, а праворуч
   лишалась порожнеча в двісті пікселів. Центруємо саме БЛОК: текст
   питання всередині лишається по лівому краю, бо довгий рядок по центру
   читати важче. */
.question.q-fixed, .sscale, .q-kicker, .q-calm { max-width: 620px; margin-inline: auto; }

/* Рядок про віддалену роботу на питанні про напрям. */
.ask-remote { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0;
  padding: 10px 14px; border-radius: 12px; font-size: 0.90625rem; line-height: 1.45; max-width: 620px; }
.ask-remote .ic { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; }
.ask-remote.yes { background: var(--role-yours-bg); }
.ask-remote.no { background: var(--role-care-bg); }
.remote-gap { margin-bottom: 14px; }

/* ── «Перші гроші» ─────────────────────────────────────────────────────
   Свідомо найпомітніший елемент картки після назви: це єдина відповідь на
   питання, з яким людина прийшла. Заливка суцільна й темна — щоб смуга
   читалась як факт, а не як ще одна плитка серед плиток. */
.fp {
  margin-top: 12px; padding: 15px 18px 14px; border-radius: 16px;
  background: var(--fp-bg); color: var(--fp-ink);
}
.fp-lbl {
  font-size: 0.78125rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; opacity: .8; margin-bottom: 3px;
}
.fp-date {
  font-family: var(--atmo-font-display); font-size: 1.6875rem; font-weight: 800;
  line-height: 1.1; letter-spacing: -.01em; margin-bottom: 6px;
}
.fp-what { font-size: 0.90625rem; line-height: 1.45; }
.fp-how { font-size: 0.78125rem; line-height: 1.4; opacity: .78; margin-top: 6px; }
@media (max-width: 600px) { .fp-date { font-size: 1.5rem; } }
.dt-place-rg { margin-top: 10px; }
@media (min-width: 600px) { .question.q-fixed { min-height: calc(26px * 1.22 * 3); } }

/* Рівний профіль інтересів (04.09.2026): пояснення замість відсотків. */
.flat-note {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px; margin: 0 0 16px; border-radius: var(--radius-card);
  background: var(--atmo-surface); border: 1px solid var(--atmo-border);
}
.flat-note-text { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--atmo-text-secondary); }

/* 04.09.2026: емодзі замінені мальованими іконками — у репліках тесту,
   у банері «з поверненням» і на кнопці згортки з реплікою. */
.checkin-ico .ic { width: 20px; height: 20px; color: var(--atmo-primary); }
.say-ic { width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; }

/* Пропозиція пройти глибшу версію — на швидкому результаті, у зоні
   «Глибше». Факти в рядок: скільки питань, скільки часу, що збережеться. */
.deeper-offer .do-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.deeper-offer .button { width: 100%; }

/* ── Компактна картка п'ятірки (05.09.2026) ────────────────────────────
   Була 1896px заввишки — 2,3 екрана телефона на одну професію. Тепер це
   рядок списку: назва, одне число грошей, двері входу, один рядок «чому
   ти». Решта — за дотиком, на екрані «Приміряти». */
.pc2-slim { padding-bottom: 0.75rem; }
.pc2-slim .pc2-row { display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.5rem; padding: 0.5rem 0.875rem 0; }
.pc2-slim .pc2-money-row .pc2-big { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.pc2-slim .pc2-money-row.care .pc2-big { color: var(--atmo-warn, #9E5E0A); }
.pc2-slim .pc2-facts-row { gap: 0.375rem; }
.pc2-slim .pc2-why-row { padding-top: 0.375rem; }
.pc2-slim .pc2-actions { padding: 0.75rem 0.875rem 0; }

/* ── Пронумеровані кроки результату (05.09.2026) ───────────────────────
   Раніше .znav був самою стрічкою кнопок. Тепер усередині два поверхи:
   рядок «Крок 2 з 5» і сама стрічка, яка прокручується вбік на телефоні.
   Номер у кружечку, пройдені кроки — з галочкою замість номера. */
.znav { flex-direction: column; align-items: stretch; gap: 0.375rem; flex-wrap: nowrap; }
/* БЕЗ великих літер — свідомо, і це не смак.
   «Крок 2 з 5» у верхньому регістрі стає «КРОК 2 З 5», а велика «З» у
   цій гарнітурі не відрізняється від трійки: людина читає «Крок 2 3 5».
   Спіймано на екрані 05.09.2026. Верхній регістр лишається на решті
   підписів — там усередині нема прийменника «з» між числами. */
.znav-count {
  font-size: 0.78125rem; font-weight: 700; letter-spacing: .04em;
  color: var(--atmo-text-secondary);
}
.znav-strip {
  display: flex; gap: 0.375rem; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 0.125rem;
}
.znav-strip::-webkit-scrollbar { display: none; }
.znav-strip .znav-item {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  white-space: nowrap; flex: 0 0 auto;
}
.znav-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  font-size: 0.75rem; font-weight: 700; line-height: 1;
  background: var(--atmo-border); color: var(--atmo-text-secondary); flex: 0 0 auto;
}
.znav-item.on .znav-num { background: rgba(255,255,255,.25); color: inherit; }
.znav-item.znav-done .znav-num { background: var(--atmo-success-light); color: var(--atmo-success); }
.znav-num svg { width: 0.75rem; height: 0.75rem; }

/* Дефіцит кадрів у напрямі — на екрані «Професії за напрямами». */
.plist-hot { margin-top: 0.375rem; }

/* ── Поле з підписом, який не зникає (05.09.2026) ──────────────────────
   Плейсхолдер зникає, щойно людина починає друкувати, — і підпис
   втрачає кожен, не тільки той, хто не бачить екрана. Тепер підпис
   стоїть над полем; плейсхолдер лишається прикладом. */
.fld { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.fld-label {
  font-size: 0.8125rem; font-weight: 700; color: var(--atmo-text-secondary);
  letter-spacing: .02em;
}
.fld-hint { font-size: 0.78125rem; color: var(--atmo-text-secondary); }
.fld input, .fld textarea { width: 100%; }

/* ── Умови людини на картці й на «Приміряти» (05.09.2026) ──────────────────
   Три стани: виконується, порушується, невідомо. Кольори ті самі, що всюди
   в продукті: зелений — «вже твоє», бурштин — «обережно», нейтральний —
   «не знаємо». Невідоме навмисно НЕ фарбується тривожним: незнання не є
   поганою новиною, і фарбувати його як проблему означало б підказувати
   висновок, якого дані не дають. */
.dt-checks { gap: 8px; }
/* Рядок умови став колонкою: під самою умовою тепер живуть запис перевірки
   і кнопки. Значок із текстом лишились рядком — це .dt-check-head. */
.dt-check { display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; line-height: 1.45; }
.dt-check-head { display: flex; align-items: flex-start; gap: 10px; }
.dt-check-mine { margin: 0 0 0 28px; font-style: italic; }
/* Керування перевіркою. Відступ 28px тримає його під текстом умови, а не
   під значком: інакше кнопки читаються як окремий блок, не пов'язаний із
   рядком над ними. */
.dt-checks-lead { margin: -2px 0 4px; font-weight: 600; }

/* Питання на вимогу: на перших варіантах і на картці. Той самий вигляд,
   що й керування перевіркою — це той самий жест «уточнити на місці». */
.fo-asks {
  border: 1px solid var(--atmo-border); border-radius: 14px; padding: 14px 16px;
  margin-bottom: 16px; background: var(--atmo-surface);
  display: flex; flex-direction: column; gap: 12px;
}
.ask { display: flex; flex-direction: column; gap: 8px; }
.ask-q { font-weight: 600; line-height: 1.35; }
.ask-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-inline { margin-top: 8px; }
/* Друге питання під сіткою областей. */
.igrid-follow { margin-top: 18px; }

/* Код на перших варіантах: не прихований, але й не плакат. */
.fo-code { margin: -6px 0 14px; font-size: 0.875rem; line-height: 1.45; }
.fo-code b { font-family: var(--atmo-font-display); letter-spacing: 0.08em; }

/* Чотири відповіді зверху картки. Питання дрібним, відповідь звичайним,
   підстава ще дрібнішим. Колір рядка від ролі: зелений — «твоє», сірий —
   факт, бурштиновий — обережно. Це ті самі токени, що й решта картки. */
.fa { gap: 10px; }
.fa-row { padding: 10px 12px; border-radius: 12px; background: var(--role-fact-bg); }
.fa-row.yours { background: var(--role-yours-bg); }
.fa-row.care { background: var(--role-care-bg); }
.fa-q { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.8; margin-bottom: 4px; }
.fa-a { font-size: 0.9375rem; line-height: 1.45; }
.fa-basis { margin: 4px 0 0; }
/* Довідки під «Детальніше». Заголовок як кнопка, а не як рядок тексту. */
.dt-more { margin-top: 4px; }
.dt-more > summary {
  cursor: pointer; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--atmo-border); font-weight: 600; list-style: none;
}
.dt-more > summary::-webkit-details-marker { display: none; }
.dt-more > summary::before { content: '▸ '; }
.dt-more[open] > summary::before { content: '▾ '; }
.dt-more > summary + * { margin-top: 10px; }
/* Висновок порівняння: не вирок, а названий компроміс. */
.cmp-verdict { margin: 4px 0 0; font-weight: 600; line-height: 1.4; }

/* Економіка переходу. Три рядки «звідки — куди — різниця» вирівняні по
   правому краю: людина порівнює числа, а не читає речення. */
.econ { gap: 6px; }
.econ-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.9375rem; }
.econ-row b { white-space: nowrap; }
.econ-diff { padding-top: 6px; border-top: 1px solid var(--atmo-border); font-weight: 600; }
.econ-diff.up b { color: var(--role-yours-ink); }
.econ-diff.down b { color: var(--role-care-ink); }
.econ-year { margin: -2px 0 0; }
.econ-cost { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--role-fact-bg); }
.econ-cost-t { font-weight: 600; line-height: 1.35; margin-bottom: 4px; }
.econ-ask { margin: 6px 0 0; }
.econ-src { margin: 4px 0 0; opacity: 0.85; }
.dt-ck-ctl { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 6px 28px; }
.dt-ck-step { line-height: 1.4; }
.dt-ck-done { font-weight: 600; line-height: 1.4; }
.dt-ck-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dt-ck-btn {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--atmo-border);
  background: var(--atmo-surface); color: var(--atmo-text);
  font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.dt-ck-btn:hover { border-color: var(--atmo-primary); }
.dt-ck-btn.yours { background: var(--role-yours-bg); }
.dt-ck-btn.care { background: var(--role-care-bg); }
.dt-ck-btn.fact { background: var(--role-fact-bg); }
.dt-ck-btn.plain { border-style: dashed; font-weight: 500; }
/* Значок без заливки: колір бере від самого рядка. Перша версія мала
   власний фон і темний текст літералом (#166534 на зеленому, #92400E на
   бурштиновому) — у темній темі токен фону світлішає, а літерал ні, і
   контраст падав до 1,74. Це та сама пастка, що вже описана в щоденнику
   для .pc2-tile.fact: колір, заданий літералом, не переживає зміну теми. */
.dt-check-dot {
  flex: 0 0 18px; width: 18px; text-align: center;
  font-size: 0.8125rem; font-weight: 700; margin-top: 1px;
  color: var(--atmo-text-secondary);
}
.dt-check.yours .dt-check-dot { color: var(--role-yours-ink); }
.dt-check.care .dt-check-dot { color: var(--role-care-ink); }
.dt-check.care { color: var(--atmo-text); }
.dt-checks-note { margin-top: 2px; }

/* Один рядок на картці п'ятірки: головне невідоме або порушена умова. */
.pc2-check-row { align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.pc2-check-row .pc2-link { flex: 0 0 auto; }

/* Тонкий результат: чому робіт менше і що відкриє одна зміна. Не тривога,
   а пояснення з дією, тому тло нейтральне, а не червоне. */
.thin-note { border-color: rgba(251, 191, 36, .45); }
.thin-note p { margin: 0 0 8px; }
.thin-go { margin-top: 4px; align-self: flex-start; }

/* ── Перші варіанти за умовами (05.09.2026) ────────────────────────────── */
.fo-title { font-size: 1.375rem; line-height: 1.25; margin: 4px 0 6px; }
.fo-lead { color: var(--atmo-text-secondary); margin: 0 0 16px; font-size: 0.9375rem; }
.fo-list { gap: 12px; margin-bottom: 16px; }
.fo-doors { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.fo-note {
  border: 1px solid var(--atmo-border); border-radius: 14px; padding: 14px 16px;
  margin-bottom: 16px; background: var(--atmo-surface);
}
.fo-note p { margin: 0 0 8px; font-size: 0.9375rem; line-height: 1.5; color: var(--atmo-text-secondary); }
.fo-go { width: 100%; }
.fo-note p:last-child { margin-bottom: 0; }
.fo-acts { justify-content: flex-start; padding-top: 4px; }
.fo-now { margin: 0 0 12px; font-size: 0.9375rem; line-height: 1.5; color: var(--atmo-text); }

/* ── «Що з цього ти робила» — задачі попередньої роботи (05.09.2026) ────── */
.own-tasks { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 20px; }
.own-task {
  border: 1px solid var(--atmo-border); border-radius: 14px; padding: 12px 14px;
  background: var(--atmo-surface); display: flex; flex-direction: column; gap: 10px;
}
.own-task-name { font-weight: 600; line-height: 1.35; }
.own-task-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.own-task-opts .rp-opt { flex: 1 1 auto; }

/* Порівняння варіантів поруч. Сітка, а не таблиця: заголовки колонок —
   назви професій, і вони мусять переноситись у кілька рядків. На вузькому
   екрані блок їде вбік у власному контейнері, а сторінка стоїть на місці. */
.cmp {
  border: 1px solid var(--atmo-border); border-radius: 14px; padding: 14px 16px;
  margin-bottom: 16px; background: var(--atmo-surface);
  display: flex; flex-direction: column; gap: 8px;
}
.cmp-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.cmp-grid {
  display: grid; grid-template-columns: minmax(120px, 1fr) repeat(var(--cmp-n), minmax(120px, 1fr));
  gap: 0; min-width: 100%; font-size: 0.8125rem; line-height: 1.35;
}
.cmp-h { font-weight: 700; padding: 6px 8px 8px; border-bottom: 1.5px solid var(--atmo-border); }
.cmp-corner { border-bottom-color: transparent; }
.cmp-t { padding: 8px; font-weight: 600; opacity: 0.85; }
.cmp-v { padding: 8px; }
.cmp-t, .cmp-v { border-top: 1px solid var(--atmo-border); }
/* Чесний рядок про гроші: не тривога, а факт. Тому фон рольовий, а не
   червоний — це не помилка людини й не небезпека, це стан справ. */
.fo-worse {
  padding: 12px 14px; border-radius: 14px; background: var(--role-care-bg);
  margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px;
}
.fo-worse-t { font-weight: 700; line-height: 1.35; }
.cmp-same { margin: -2px 0 2px; }
.cmp-note { margin: 2px 0 0; }

/* Куди переходять із цієї роботи */
.fo-tr {
  border: 1px solid var(--atmo-border); border-radius: 14px; padding: 14px 16px;
  margin-bottom: 16px; background: var(--atmo-surface);
  display: flex; flex-direction: column; gap: 10px;
}
.fo-tr-note { margin: -4px 0 2px; }
.fo-tr-row { display: flex; flex-direction: column; gap: 2px; }
.fo-tr-name { font-weight: 600; line-height: 1.3; }
/* Дві групи: «беруть як є» і «просять освіту». Розділені відступом, а не
   лінією: це не два розділи, а одна відповідь із двох частин. */
.fo-tr-group { display: flex; flex-direction: column; gap: 8px; }
.fo-tr-group + .fo-tr-group { margin-top: 6px; }
/* Назва і гроші в один рядок, поки є місце. На вузькому екрані гроші
   спускаються під назву — обрізати їх не можна, це головне число. */
.fo-tr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.fo-tr-pay { font-weight: 600; color: var(--role-yours-ink); white-space: normal; overflow-wrap: anywhere; }
/* Вузький екран (14.09.2026, живе проходження): жоден блок швидкого екрана не ширший за сторінку. */
.fo-tr, .fo-tr-row, .fo-tr-head, .fo-tr-name, .cmp, .cmp-scroll, .fold-body { min-width: 0; max-width: 100%; }
.cmp-scroll { width: 100%; }
.fo-tr-foot { margin: 4px 0 0; }

/* ── Один повний шлях: оголошення служби зайнятості (06.09.2026) ─────────
   Рядок оголошення на картці і секції екрана шляху перевикористовують
   dt-box / dt-check / dt-ck-btn / pc2-pill — нове лише розкладка рядка,
   поле для відповіді роботодавця і текст звернення. */
.vc-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--atmo-border); }
.vc-row:first-of-type { border-top: 0; }
.vc-title { font-weight: 600; line-height: 1.35; }
.vc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-tags .pc2-pill { white-space: normal; }
.vc-sec .fa-row { margin: 0; }
.vc-msg { padding: 12px 14px; border-radius: 12px; background: var(--atmo-bg, #f5f4f0); border: 1px dashed var(--atmo-border); font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; }
.vc-input { flex: 1 1 160px; min-width: 0; padding: 8px 10px; border: 1px solid var(--atmo-border); border-radius: 10px; font: inherit; font-size: 0.875rem; background: var(--atmo-surface); }
.dt-take.on { opacity: 0.85; }
@media (max-width: 640px) {
  .vc-path .dt-grid { grid-template-columns: 1fr; }
}

/* Порівняння обраних шляхів і складені деталі на екрані шляху (06.09.2026) */
.vc-cmp { display: flex; flex-direction: column; gap: 0; overflow-x: auto; }
.vc-cmp-row { display: grid; grid-template-columns: 96px repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 8px 0; border-top: 1px solid var(--atmo-border); font-size: 0.875rem; line-height: 1.4; }
.vc-cmp-head { border-top: 0; font-weight: 600; }
.vc-cmp .cmp-k { font-weight: 600; color: var(--atmo-muted, #6b7280); }
.vc-fold > summary { cursor: pointer; font-weight: 600; }
.vc-fold .pc2-label { margin-top: 10px; }

/* Порівняння за одним критерієм і найближча дія в плані (06.09.2026) */
.vc-cmp-tabs { margin-bottom: 10px; }
.vc-cmp-card { gap: 8px; }
.vc-cmp-val { font-size: 0.9375rem; line-height: 1.45; }
.vc-next { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--role-yours-bg); }
.vc-next-text { font-weight: 600; line-height: 1.4; }
.vc-more { display: flex; flex-direction: column; }

/* ── Три АтмоСили головним блоком у «Глибше» (06.09.2026) ────────────────
   Раніше сили лежали дрібним рядком усередині питання «Хто я за цим
   тестом?» — і власник питав, куди вони поділись. Тепер це перше, що
   людина бачить у розділі, і виглядає воно як окремий блок, а не як
   примітка. Розмітка повторює вже перевірену картку талантів (.tf2),
   тому й розміри тут ті самі: різниця лише в рамці й підвалі. */
.panel.forces-main { display: flex; flex-direction: column; gap: 18px; padding: 30px 32px 24px; border-radius: 20px; }
.fm-title { font-family: var(--atmo-font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: 4px 0 0; }
.fm-sub { font-size: 1rem; color: var(--atmo-text-secondary); margin: 0; line-height: 1.5; }
.fm-list { display: flex; flex-direction: column; gap: 18px; }
.fm-item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start;
  width: 100%; text-align: left; padding: 8px; margin: -8px; border: 0; border-radius: 14px;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.fm-item:hover { background: var(--atmo-surface-hover); }
.fm-img { width: 52px; height: 52px; object-fit: cover; border-radius: 12px; margin-top: 2px; background: var(--role-fact-bg); }
.fm-emoji { display: flex; align-items: center; justify-content: center; font-size: 1.625rem; }
.fm-text { display: flex; flex-direction: column; gap: 4px; }
.fm-name { font-size: 1.0625rem; font-weight: 700; }
.fm-say { font-size: 1rem; line-height: 1.5; color: var(--atmo-text-secondary); }
.fm-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--role-yours-ink); margin-top: 2px; }
.fm-link .ic { width: 14px; height: 14px; }
/* Підвал блоку: чесна примітка про те, чого сили НЕ роблять, і вхід у
   пояснення. Відділений рискою, щоб не читався як частина опису сили. */
.fm-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--atmo-border); }
@media (max-width: 600px) {
  .panel.forces-main { padding: 22px 18px 18px; }
  .fm-title { font-size: 1.3125rem; }
}

/* Ворота на екрані вакансій: висновок і кнопка виправити його. Мітка —
   кнопка, тому їй потрібні курсор і скинутий системний вигляд. */
.vc-gate { margin: 0 0 10px; padding: 10px 12px;
  background: var(--atmo-surface-hover); border-radius: var(--radius-button); }
.vc-gate .pc2-note { margin: 0 0 8px; }
.vc-gate .pc2-pill { cursor: pointer; border: none; font: inherit; margin-right: 6px; }

/* Заголовок групи в списку професій: «Основні напрями» / «Спершу треба
   уточнити» / «Варто дослідити». Розподіл приходить із коду (route.state),
   тут лише відступи — щоб група читалась як група, а не як ще одна картка. */
.grp-head { margin: 22px 0 10px; }
.grp-head:first-child { margin-top: 0; }
.grp-head .pc2-note { margin: 4px 0 0; max-width: 60ch; }

/* Відсоток збігу в подробицях. Число велике, але поруч завжди стоїть, чим
   воно НЕ є — тому воно не герой блоку, а підпис до шкал над ним. */
.dt-match { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--atmo-border); }
.dt-match-n { font-family: var(--atmo-font-display); font-size: 1.5rem; font-weight: 700;
  line-height: 1.1; font-variant-numeric: tabular-nums; flex: none; }
.dt-match .pc2-note { margin: 0; }

/* План: наступні кроки під розкриттям. Підсумок виглядає як дія, а не як
   заголовок — інакше його не помічають і думають, що плану більше нема. */
.mp-rest { margin-top: 10px; }
.mp-rest > summary { cursor: pointer; list-style: none; padding: 10px 12px;
  border: 1px solid var(--atmo-border); border-radius: var(--radius-button);
  color: var(--atmo-primary); font-weight: 600; font-size: 0.9375rem; }
.mp-rest > summary::-webkit-details-marker { display: none; }
.mp-rest > summary::after { content: ' ⌄'; }
.mp-rest[open] > summary::after { content: ' ⌃'; }
.mp-rest > summary:focus-visible { outline: 2px solid var(--atmo-primary); outline-offset: 2px; }
.mp-rest .mp-thing { margin-top: 10px; }

/* ── Порівняння на телефоні: блок = критерій ─────────────────────────────
   Було: картки зі снапом убік, одна професія на екран. Щоб порівняти два
   числа, доводилось гортати й пам'ятати попереднє. Тепер обидві професії
   стоять в одному блоці, і гортати нічого не треба. Таблиця (.cmp-desktop)
   лишається для широких екранів. */
.cmp-blocks { display: grid; gap: 10px; }
.cmp-block { border: 1px solid var(--atmo-border); border-radius: var(--radius-button);
  padding: 10px 12px; background: var(--atmo-surface); }
.cmp-block-l { font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--atmo-text-secondary); margin-bottom: 7px; }
.cmp-block-r { display: flex; justify-content: space-between; gap: 12px;
  align-items: baseline; padding: 3px 0; font-size: 0.875rem; }
.cmp-block-n { color: var(--atmo-text-secondary); min-width: 0; overflow-wrap: anywhere; }
.cmp-block-v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums;
  min-width: 0; overflow-wrap: anywhere; }
.cmp-block-v.cmp-good { color: var(--atmo-success); }
.cmp-block-v.cmp-empty { color: var(--atmo-text-muted); font-weight: 400; }
/* Межа та сама, що й у .cmp-desktop нижче по файлу (640px): інакше на
   641–759 показувались би обидва подання одних даних. */
@media (min-width: 641px) { .cmp-blocks { display: none; } }

/* Закрита згортка мусить ховати кроки ЯВНО. Браузер ховає вміст <details>
   сам, але .mp-thing має власний display:grid, і в Chrome цього вистачало,
   щоб кроки лишались видимими при закритій згортці (спіймано на прогоні
   07.09.2026 — «Наступні кроки — ще 2 кроки», а обидва вже на екрані). */
.mp-rest:not([open]) > .mp-thing { display: none; }

/* Виконані кроки — окрема згортка, тихіша за «наступні»: це вже позаду. */
.mp-done-fold > summary { color: var(--atmo-text-secondary); font-weight: 500; }
.mp-all-done { padding: 14px; border-radius: var(--radius-button);
  background: var(--atmo-success-light); margin-bottom: 10px; }
.mp-all-done .pc2-note { margin: 6px 0 0; }

/* ── Голова екрана професії: чотири речі й нічого більше ─────────────────
   Порядок фіксований: що за робота → чому в списку → умова входу → дія.
   Кожен блок — один абзац, щоб екран читався за пів хвилини, а не за три. */
.dt-lead { display: grid; gap: 14px; margin: 4px 0 18px; }
.dt-lead-b { display: grid; gap: 4px; }
.dt-lead-t { margin: 0; font-size: 0.9375rem; line-height: 1.55; max-width: 62ch; }
.dt-lead-t b { font-weight: 700; }
/* Розкриття подробиць — головна дія другого рівня, тому виглядає як кнопка,
   а не як заголовок: інакше його не помічають і думають, що більше нічого нема. */
.dt-more-main > summary { cursor: pointer; list-style: none; padding: 12px 14px;
  border: 1px solid var(--atmo-border); border-radius: var(--radius-button);
  color: var(--atmo-primary); font-weight: 600; margin-top: 16px; }
.dt-more-main > summary::-webkit-details-marker { display: none; }
.dt-more-main > summary::after { content: ' ⌄'; }
.dt-more-main[open] > summary::after { content: ' ⌃'; }
.dt-more-main > summary:focus-visible { outline: 2px solid var(--atmo-primary); outline-offset: 2px; }
.dt-more-main:not([open]) > *:not(summary) { display: none; }
.dt-more-main > *:not(summary) { margin-top: 14px; }

/* Напрями з довшим навчанням — за окремою дією. Виглядає як дія, а не як
   заголовок: людина має розуміти, що там ще щось є, і сама вирішити. */
.grp-far { margin: 22px 0 10px; }
.grp-far > summary { cursor: pointer; list-style: none; padding: 12px 14px;
  border: 1px solid var(--atmo-border); border-radius: var(--radius-button);
  color: var(--atmo-primary); font-weight: 600; }
.grp-far > summary::-webkit-details-marker { display: none; }
.grp-far > summary::after { content: ' ⌄'; }
.grp-far[open] > summary::after { content: ' ⌃'; }
.grp-far > summary:focus-visible { outline: 2px solid var(--atmo-primary); outline-offset: 2px; }
.grp-far:not([open]) > *:not(summary) { display: none; }
.grp-far > .pc2-note { margin: 10px 0 0; max-width: 60ch; }

/* Тихий рядок про збереження в шапці проходження (08.09.2026):
   він має заспокоювати, а не відбирати увагу в питання. */
.pp-saved{margin-top:6px;font-size:12px;line-height:1.35;color:var(--muted,#6b7280);opacity:.9}

/* Сховище не приймає запис — рядок стає застережним (08.09.2026). */
.pp-saved.care{color:var(--care,#b45309);opacity:1}
/* ══════════════════════════════════════════════════════════════════════
   ПРОХІД 08.09.2026 — читабельність картки і чесна ієрархія
   ══════════════════════════════════════════════════════════════════════ */

/* Нейтральна позначка замість чужого фото (див. ownPhoto в app.js).
   Спокійна плитка, а не «зламана картинка»: вона не вдає документальний
   знімок і не привертає уваги більше, ніж назва роботи поруч. */
.pc2-photo-empty,
.dt-photo-empty {
  background: var(--atmo-surface);
  border: 1px solid var(--atmo-border);
  color: var(--atmo-text-secondary);
}

/* СТАН РОЗРІЗНЯЄТЬСЯ НЕ ЛИШЕ КОЛЬОРОМ.
   Було: «Беруть без досвіду» і «можна одразу» — дві однакові зелені
   заливки поруч, а «треба уточнити» — просто напівжирний текст без
   жодної форми, тобто читався як обірваний рядок. Тепер у пілюлі без
   стану є власна форма (контур), а стани відрізняються ще й нею. */
.pc2-pill:not(.yours):not(.fact):not(.care) {
  background: transparent;
  border: 1px solid var(--atmo-border);
  color: var(--atmo-text-secondary);
  font-weight: 600;
}

/* Рядок фактів на картці: пілюлі не розповзаються на два рівні,
   а на вузькому екрані переносяться охайно, без стрибка висоти. */
.pc2-facts-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Підпис під назвою — тихіший за причину показу: напрям це орієнтир,
   а не аргумент. Раніше вони важили однаково, і око не знало, що читати. */
.pc2-head .pc2-cap { color: var(--atmo-text-secondary); font-size: 0.875rem; line-height: 1.35; }

/* Фото і назва вирівнюються по ВЕРХУ: при довгій назві на два-три рядки
   центрування опускало плитку в середину абзацу й ламало ряд. */
.pc2-head { align-items: flex-start; }
.pc2-title { padding-top: 2px; }

/* Тихі дії картки — справді тихі, і з нормальною зоною натискання
   на телефоні (44 px за рекомендацією для дотику). */
.pc2-quiet { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.pc2-quiet .pc2-link { min-height: 44px; display: inline-flex; align-items: center; }

/* Екран роботи: рядок про дослідницький статус стоїть ПІД діями, тихо,
   і не змагається з головною кнопкою. */
.dt-explore-note {
  flex-basis: 100%;
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--atmo-border);
}
.dt-explore-note .pc2-link { align-self: flex-start; min-height: 44px; }

/* Одна ліва межа на всю картку. Рядки картки мали відступ 14 px, а шапка —
   нульовий: поки в шапці стояло фото, різниці не було видно, а без фото
   назва «висіла» лівіше за весь свій текст. Тепер колонка одна. */
.pc2-slim .pc2-head { padding: 0 0.875rem; }
.pc2-slim .pc2-head:has(.pc2-photo) { padding-left: 0; }

/* «Не моє»: пояснення й виходи. Рядок про те, що робить відповідь, тихіший
   за самі кнопки причин — він відповідає на питання, а не ставить його. */
.dm-what {
  font-size: 0.875rem; line-height: 1.5; color: var(--atmo-text-secondary);
  margin-top: 10px; max-width: 62ch;
}
.dm-outs { margin-top: 10px; }
.dm-outs .pc2-link { min-height: 44px; display: inline-flex; align-items: center; }
/* Зона натискання причин — не менша за палець. */
.dm-reason { min-height: 40px; }
.dm-undo { min-height: 40px; }

/* ── Екран роботи: чого не видно за рамками ────────────────────────────── */

/* «Що важко» кричало голосніше за головну умову: 17 px напівжирним на
   бурштині проти 15 px звичайним у самої умови. Обмеження має бути видиме,
   а не головне — воно лишається бурштиновим і без згортки, але однією
   вагою з рештою тексту екрана. */
.dt-hard .pc2-hard-text { font-size: 0.9375rem; font-weight: 600; line-height: 1.5; }
.dt-hard { padding: 12px 16px; }

/* ГОЛОВНА УМОВА — та, від якої залежить рішення, тому в неї власна опора,
   а не така сама, як у двох сусідніх абзаців. Тонка лінія ліворуч замість
   ще однієї рамки: одна рамка на екрані вже є — сама картка. */
.dt-lead-b.dt-lead-cond {
  border-left: 3px solid var(--atmo-primary);
  padding-left: 12px;
}

/* Три розкриття подробиць були трьома окремими рамками поспіль — три
   «картки» без вмісту, що виглядали як список карток, а не як розділи
   однієї роботи. Тепер це один список із розділювачами. */
.dt-more-main { margin-top: 0; }
.dt-more-main > summary {
  margin-top: 0; border: none; border-top: 1px solid var(--atmo-border);
  border-radius: 0; padding: 14px 2px;
  display: flex; justify-content: space-between; align-items: center;
}
.dt-more-main:first-of-type > summary { margin-top: 14px; }
.dt-more-main > summary::after { margin-left: auto; }

/* Дві стрілки на одному розкритті: ▸ від .dt-more і ⌄ від .dt-more-main.
   Лишається одна — та, що праворуч, як у решті згорток продукту. */
.dt-more-main > summary::before { content: none; }

/* Значок першого пункту вітального екрана: був номер «5» — обіцянка
   фіксованої кількості. Тепер знак дії, у синьому продукту. */
.w2-ic-blue { color: var(--atmo-primary); }

/* РЕЗУЛЬТАТ ПОЧИНАЄТЬСЯ ЗГОРИ, А НЕ ПОСЕРЕДИНІ.
   main вирівнює вміст по центру вертикально — для одного питання це добре,
   для результату ні: коли робіт мало або нема зовсім, сторінка коротка, і
   центрування опускало відповідь із причиною нижче згину телефона. Людина
   бачила порожній екран і мусила гортати, щоб дізнатись, що сталось.
   Зони (.zone) є тільки на результаті, тому правило вмикається саме там. */
main#screen:has(.zone) { justify-content: flex-start; }

/* ── Широкий екран: рядок, а не смуга ────────────────────────────────────
   На телефоні кнопка на всю ширину правильна — вона й є наступний крок.
   На 1040 px це синя смуга завдовжки в метр, під якою ще й тихі дії по
   центру: око йде зліва направо через порожнечу. Тому на широкому картка
   стає рядком — дія праворуч, тихі дії поруч із нею, текст не розтягується
   довше за комфортну міру читання. */
@media (min-width: 900px) {
  .pc2-slim .pc2-actions {
    flex-direction: row; align-items: center; justify-content: flex-end;
    gap: 20px; flex-wrap: wrap;
  }
  .pc2-slim .pc2-try { width: auto; min-width: 260px; order: 2; }
  .pc2-slim .pc2-quiet { justify-content: flex-start; order: 1; margin-right: auto; }
  .pc2-slim .pc2-why-row .pc2-note,
  .pc2-slim .pc2-head .pc2-cap { max-width: 68ch; }
  .zone-note, .grp-head .pc2-note, .profs-note p { max-width: 76ch; }
}

/* КАРТА КРОКІВ ВЛАЗИТЬ У ТЕЛЕФОН.
   Кроків стало чотири замість п'яти, і на 375 px стрічка майже вміщується —
   бракує саме кружечків із номерами. Але номер поточного кроку вже стоїть
   рядком вище («Крок 1 з 4»), а пройдені кроки видно галочкою. Тому на
   вузькому екрані номер лишається тільки там, де він щось додає: на
   пройдених — галочка, на решті — сама назва. Так уся дорога видно одразу,
   без бічної прокрутки, якої на телефоні часто просто не помічають. */
@media (max-width: 430px) {
  .znav-strip .znav-item:not(.znav-done) .znav-num { display: none; }
  .znav-strip .znav-item { padding: 8px 11px; gap: 0.375rem; font-size: 0.875rem; }
  .znav-strip { gap: 0.25rem; }
}

/* Тиха дія в блоці «якщо нічого не вирішиш» мала 32 px висоти — менше за
   палець. Решту тихих дій уже піднято, ця лишалась. */
.easy-door-acts .pc2-link { min-height: 44px; display: inline-flex; align-items: center; }

/* Тихі примітки під списком стояли впритул одна до одної (0 px між
   блоками) і читались як один довгий абзац: застереження про область,
   спільна ознака списку і розвилка варіантів — три різні думки поспіль.
   Проміжок робить із них три відповіді на три різні питання. */
.zone .profs-note + .profs-note,
.zone .profs-note + .fork-note,
.zone .fork-note + .profs-note,
.zone .profs-check-common { margin-top: 14px; }
.zone .profs-note p + p { margin-top: 10px; }

/* Дії на екрані роботи: на широкому це були дві кнопки на всю ширину одна
   під одною — метрова синя смуга і метрова біла під нею. Стають рядком. */
@media (min-width: 900px) {
  .dt-actions { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; flex-wrap: wrap; }
  .dt-take { width: auto; min-width: 260px; }
  .dt-jobs { width: auto; }
  .dt-actions .dismiss { margin-left: auto; }
  .dt-lead-t { max-width: 76ch; }
}

/* «Беру в план» як друга дія, коли головна — уточнити умови. Виглядає як
   дія, а не як посилання, але не змагається з синьою. */
.dt-plan-alt { justify-content: center; font-weight: 700; }

/* ── Карта розділів, а не крокова машина (08.09.2026) ──────────────────
   Номерів і галочок більше нема: смужка каже «де я і що ще є», а не
   «скільки ти ще винен». Через це вона стала вужчою й на телефоні
   вміщується цілком — без правого краю, обрізаного на півслові. */
.znav-strip {
  flex-wrap: wrap;          /* не ховаємо хвіст за краєм — переносимо */
  overflow-x: visible;
  row-gap: 0.375rem;
}
.znav-strip .znav-item { white-space: nowrap; }
@media (max-width: 430px) {
  .znav-strip .znav-item { padding: 7px 11px; font-size: 0.875rem; }
}
/* Рядок «Крок N з M» прибрано разом із лічильником. */
.znav-count { display: none; }

/* Порожня видача: заголовок, одне пояснення, одна кнопка. */
.empty-main { display: grid; gap: 10px; justify-items: start; }
.empty-main-t {
  margin: 0; font-family: var(--atmo-font-display);
  font-size: 1.25rem; font-weight: 800; line-height: 1.2;
}
.empty-main-p { margin: 0; font-size: 0.9375rem; line-height: 1.55; max-width: 62ch;
  color: var(--atmo-text-secondary); }
.empty-main .pc2-try { width: auto; min-width: 240px; margin-top: 4px; }
.empty-main-why { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.5;
  color: var(--atmo-text-secondary); max-width: 62ch; }

/* Причина показу, яка спирається на підтверджену підставу, — чорнилом,
   а не сірим: це найсильніше, що продукт може сказати про цю картку.
   Збіг за інтересами лишається тихим — він слабший, і виглядати має так. */
.pc2-why-strong { color: var(--atmo-text); font-weight: 600; }

/* Виведене (не підтверджене) твердження про вхід: без зеленої заливки,
   із пунктиром — видно, що це висновок із даних, а не чиясь вимога.
   Повна підстава стоїть на екрані роботи. */
.pc2-pill-derived {
  border-style: dashed;
  border-color: var(--atmo-text-muted);
  color: var(--atmo-text-secondary);
  background: transparent;
}

/* Двері в повний розбір усередині «Про цей список»: рядок, а не третя
   кнопка поспіль під картками. */
.why-jump-in { margin-top: 6px; }

/* План: одна картка, а не три вкладені. Крок стояв у власній рамці
   всередині панелі плану, а всередині кроку — ще одна рамка з текстом
   повідомлення. Три межі на одну дію. Рамку кроку прибрано: його межі
   тримають номер ліворуч і відступ. Виконаний крок лишається зеленим —
   там заливка несе стан, а не декорацію. */
.mp-thing:not(.done) { border-color: transparent; background: transparent; padding: 14px 0 4px; }
.mp-rest .mp-thing:not(.done),
.mp-done-fold .mp-thing:not(.done) { padding-left: 0; }

/* Звідки взялося твердження про вхід — тихим рядком під головною умовою. */
.dt-lead-src { margin: 6px 0 0; font-size: 0.8125rem; line-height: 1.5;
  color: var(--atmo-text-secondary); max-width: 66ch; }

/* Зони натискання: карта розділів і «назад» були 34 і 28 px — менше за
   палець. Карта лишається одним рядком на 375 px і після цього. */
.znav-strip .znav-item { min-height: 40px; display: inline-flex; align-items: center; }
.step-back { min-height: 40px; display: inline-flex; align-items: center; }

/* Питання про вхід — пунктиром і без кольору стану: це не стан, а те,
   чого ми не знаємо. Замінює колишній .pc2-pill-derived. */
.pc2-pill-ask {
  border: 1px dashed var(--atmo-text-muted);
  color: var(--atmo-text-secondary);
  background: transparent;
}

/* Поточний крок плану: сама дія — головна кнопка, «Зроблено» — тиха.
   Кроки під розкриттям лишаються як були: там переглядають, а не діють. */
.mp-acts-lead > .mp-link:first-child,
.mp-acts-lead > a:first-child {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 22px;
  background: var(--atmo-primary); color: var(--on-primary);
  border: 0; border-radius: 14px; text-decoration: none;
  font-size: 1.0625rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .22);
}
.mp-acts-lead > .mp-link:first-child:hover,
.mp-acts-lead > a:first-child:hover { background: var(--atmo-primary-dark); color: var(--on-primary); }
.mp-lead .mp-done { border-color: var(--atmo-border); font-weight: 500; }
@media (min-width: 700px) { .mp-acts-lead > a:first-child { align-self: flex-start; } }

/* ── Контраст (виміряно 08.09.2026) ────────────────────────────────────
   Два місця не дотягували до 4,5:1 для дрібного тексту:
     .pc2-pill.care — 4,25:1 (бурштиновий текст на бурштиновому чипі);
     .button.pick-go — 4,46:1.
   Токени --warn-text і --atmo-primary лишаю як є: вони працюють у десятках
   інших місць і зміна кольору всюди — рішення про палітру, а не правка.
   Тут точково темніше рівно там, де заміряно недобір. */
.pc2-pill.care { color: #7A2E0A; }
/* .button.pick-go тут НЕ чіпаємо: заміряні 4,46:1 — це стан disabled (кнопка
   «Почати з цієї професії», поки нічого не обрано), а неактивні елементи під
   вимогу контрасту не підпадають. Перефарбувати фон означало лишити тьмяний
   текст на темно-синьому — 1,22:1, тобто зробити гірше. Перевірено. */

/* Заголовок розділу отримує фокус програмно (оголошення зміни розділу),
   тому кільце навколо нього було б помилковим сигналом: людина туди не
   переходила клавішею. Сам фокус лишається — його бачить читач екрана. */
.zone-title:focus:not(:focus-visible) { outline: none; }

/* Питання про вхід — це речення, а не мітка: воно довше за «можна одразу»
   і на 375 px не має права виштовхувати картку за екран (заміряно: 407 px
   документа при 375 px вікна). Тому переноситься і займає свій рядок. */
.pc2-pill-ask {
  white-space: normal;
  line-height: 1.35;
  padding: 6px 11px;
  flex: 1 1 100%;
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════
   ДОСТУПНІСТЬ: ЗБІЛЬШЕНИЙ ТЕКСТ НЕ МАЄ РОЗПИРАТИ СТОРІНКУ (08.09.2026)
   ══════════════════════════════════════════════════════════════════════
   Заміряно на 375 px із текстом 200%: сторінка їхала вбік на 39 px, бо
   картки роботи виходили 398 px при доріжці 343 px. Причина — типова
   пастка grid: елемент має min-width:auto й розпирає доріжку під найдовше
   нерозривне слово.

   Після правила переповнення 22 px замість 39; при звичайному тексті — 0,
   жодна дія не обрізана. Решта 22 px лишається ВІДКРИТОЮ: вона вже не про
   containment, а про саму верстку картки, і це окреме рішення. */
.profs > * { min-width: 0; }

/* ЗБІЛЬШЕНИЙ ТЕКСТ НЕ МАЄ ВИШТОВХУВАТИ КАРТКУ ЗА ЕКРАН (08.09.2026,
   заміряно на 375 px при 200% тексту: документ 624 px проти вікна 375).
   Причина: .prof.pc2 — флекс-контейнер, а його діти мали min-width: auto,
   тобто відмовлялись стискатись нижче ширини вмісту; відступи в rem при
   подвоєному корені давали 28+28 px на кожен рядок, і шапка виростала до
   433 px усередині 343 px картки. Дозволяємо дітям стискатись. */
.prof.pc2 > * { min-width: 0; max-width: 100%; }
.pc2-head, .pc2-row { min-width: 0; }
.pc2-name, .pc2-cap, .pc2-note { overflow-wrap: anywhere; }

/* Пілюлі стану (`nowrap`, щоб не рвались посеред слова) на 200% тексту
   стають ширшими за картку. Дозволяємо їм переноситись і не вилазити. */
.pc2-pill { max-width: 100%; }
@media (max-width: 600px) {
  .pc2-facts-row .pc2-pill { white-space: normal; overflow-wrap: anywhere; }
}

/* Та сама причина на ЕКРАНІ РОБОТИ (08.09.2026, замір при 200% на 375 px):
   документ виступав на 47 px, найглибший винуватець — H1.dt-name
   «Майстер виробництва / майстер дільниці», надлишок 96 px. Довгі
   українські слова не переносились, і найдовше слово задавало ширину
   картки.

   overflow-wrap: anywhere розриває слово ЛИШЕ тоді, коли інакше воно
   вилізе за край, тож при звичайному тексті нічого не міняється.
   Загальний overflow-x: hidden свідомо не ставимо: він приховав би
   дефект і міг обрізати зміст.

   Заміряно після правила: 375 px / 200% — переповнення 0, обрізаних
   дій 0; при звичайному тексті теж 0. */
.panel.dt-card { overflow-wrap: anywhere; }

/* ── КАРТКА 206→207: що робитимеш і умови звичайним текстом ──────────────
   Речення про саму роботу — ОСНОВНИЙ текст картки, тим самим кеглем, що й
   решта змісту. Зменшенням шрифту картку не скорочуємо: рядок, заради
   якого її читають, не може бути дрібнішим за підпис. */
.pc2-do {
  margin: 0;
  /* Основний розмір тексту сторінки (17 px), не менший. Заміряно: був
     0.9375rem = 15 px, тобто рядок, заради якого картку й читають, стояв
     дрібнішим за звичайний текст. Картку не скорочуємо кеглем. */
  font-size: 1rem;
  line-height: 1.45;
  color: var(--atmo-text);
}
.pc2-slim .pc2-do-row { padding-top: 0.5rem; }

/* Умови — рядки тексту, а не овали з заливкою. Овал читався як кнопка,
   якої нема, а колір на кожному повідомленні знецінював той єдиний, що
   справді змінює рішення. Колір лишається тільки в порушеної умови. */
.pc2-cond-row { display: block; }
.pc2-cond {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--atmo-text-secondary);
}
.pc2-cond:last-child { margin-bottom: 0; }
.pc2-cond.care { color: var(--role-care-ink); font-weight: 600; }

/* ── ЕКРАН ПРОФЕСІЇ: умови перед рішенням ───────────────────────────────
   Середовище, навантаження й невідомі, що стосуються саме цієї людини,
   стоять до кнопки. Кольором виділене тільки те, що обмежує вибір, —
   решта звичайним текстом. */
.dt-cond-before { margin: 1rem 0 0.25rem; display: grid; gap: 0.75rem; }
.dt-cond-item { border-left: 3px solid var(--atmo-border); padding-left: 0.75rem; }
.dt-cond-item.care { border-left-color: var(--role-care-ink); }
.dt-cond-item .dt-lead-t { margin: 0.125rem 0 0; }

/* Персональне пояснення після дії: доступне, але тихіше за умови. */
.dt-why-after { margin-top: 1.25rem; }
.dt-why-after .pc2-note { margin-top: 0.25rem; }

/* Походження даних — за одним дотиком. Стан розкриття читач називає сам
   (роль DisclosureTriangle), тому значок окремим span із aria-hidden. */
.dt-src-fold { margin-top: 6px; }
.dt-src-fold > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  min-height: 36px; font-size: 0.8125rem; color: var(--atmo-text-secondary);
  text-decoration: underline; text-underline-offset: 3px;
}
.dt-src-fold > summary::-webkit-details-marker { display: none; }
.dt-src-fold > summary .dt-src-caret::after { content: ' ⌄'; }
.dt-src-fold[open] > summary .dt-src-caret::after { content: ' ⌃'; }
.dt-src-fold > summary:focus-visible { outline: 2px solid var(--atmo-primary); outline-offset: 2px; }
.dt-src-fold .dt-lead-src { margin-top: 4px; }
.dt-lead-ask { margin-top: 6px; font-weight: 600; }

/* ── ЧІПИ (09.09.2026): короткий підпис, а не кнопка ─────────────────────
   Без стрілок і тіней, з тонким контуром. Колір позначає стан, але текст
   зрозумілий і без кольору — «Без попереднього навчання», «Вимоги треба
   уточнити» читаються самі по собі. */
.pc2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.5rem; }
.pc2-chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.3;
  background: transparent; border: 1px solid var(--atmo-border);
  color: var(--atmo-text-secondary); white-space: normal;
}
.pc2-chip.yours { border-color: var(--role-yours-ink); color: var(--role-yours-ink); }
.pc2-chip.fact  { border-color: var(--role-fact-ink);  color: var(--role-fact-ink); }
.pc2-chip.care  { border-color: var(--role-care-ink);  color: var(--role-care-ink); }

/* Заголовок на екрані роботи без плитки — на всю ширину, і слово не
   ламається посеред себе (заміряно на «Електрогазозварнику», 375 px). */
.dt-head-wide .dt-title { padding-left: 0; }
.dt-head-wide .dt-name { max-width: none; }

/* Доступність: текст лише для екранного читача (жива область станів). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Межа трьох цінностей (09.09.2026). Недоступний варіант має ВИГЛЯДАТИ
   недоступним, а не мовчки не спрацьовувати: приглушений, без вказівника
   і без наведення. Обраний лишається звичайним — його можна зняти.

   ЯКЕ САМЕ ПРИГЛУШЕННЯ (09.09.2026, знахідка перевіряльника доступності,
   переміряно мною на екрані). При .45 змішаний колір тексту виходив
   rgb(154,159,167) на білому — контраст 2,67:1. Формально недоступний
   елемент від вимоги 4,5:1 звільнений, але тут вона важить по суті:
   людина читає саме ці назви, щоб вирішити, яку позначку зняти. При .65
   контраст 4,72:1 — вимогу закрито, а різниця з доступним варіантом
   (14,63:1) лишається помітною. */
.option.pick.pick-off { opacity: .65; cursor: default; }
.option.pick.pick-off:hover { border-color: var(--line, #d9d9d9); }

/* Рядок про межу — тихий підпис під групою, не тривога. */
.pv-limit { margin: 10px 2px 0; font-size: 14px; line-height: 1.4; color: var(--muted, #6b6b6b); }


/* ── Повзунок межі доходу (10.09.2026) ─────────────────────────────────
   Одна велика цифра, смужка на порогах джерела, підпис під нею. Кольори —
   ті самі ролі, що й скрізь: синій — дія, сірий — тло. */
.range-wrap { background: var(--atmo-surface); border: 1px solid var(--atmo-border, #E5E9F5);
  border-radius: 16px; padding: 18px 18px 14px; margin: 14px 0 12px; }
.range-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 12px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: var(--atmo-primary-light); outline: none; margin: 8px 0 6px; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px;
  border-radius: 50%; background: var(--atmo-primary); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .35); cursor: pointer; }
.range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--atmo-primary);
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, .35); cursor: pointer; }
.range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.range-ends { display: flex; justify-content: space-between; font-size: .875rem;
  color: var(--atmo-text-secondary); margin-top: 2px; }
.range-hint { font-size: .9375rem; color: var(--atmo-text-secondary); margin-top: 10px; }
.range-skip { margin-top: 10px; }