/*
 * persium-ssr — единственный CSS-файл проекта.
 *
 * Mobile-first: базовые стили под viewport ≤ 375px, расширения через
 * @media (min-width: ...) на брейкпоинтах из :root. Никаких inline-<style>
 * внутри шаблонов (lint-чек в make lint).
 *
 * Точка смены дизайна: правится только этот файл + опционально partial'ы;
 * страницы используют только классы и компоненты, не зная о конкретном
 * варианте темы.
 */

:root {
    /* Брейкпоинты — единый источник правды (используются и в JS через CSS-кастом
       свойства если понадобится). */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-xxl: 1600px;

    /* Цветовые токены «Quiet Premium» — direction класса Linear / Stripe /
       Apple Music: глубокий cool slate (не pure black, с лёгкой синевой),
       один насыщенный accent (indigo-violet) и приглушённые signal-цвета.
       Никаких кислотных-неоновых тонов; всё на 60-80% saturation. Фон
       многоуровневый через aurora-градиенты (см. body{} ниже) — даёт depth
       без шума. */
    /* Палитра «Persium Career OS» — выровнена с целевым styleguide v1.0
       дизайнера (Deep Slate / Electric Violet). Это «тёмная сине-чёрная
       база + насыщенный фиолетовый акцент»; сигнал-цвета — emerald
       success и tailwind-style amber/danger. Точка смены дизайна — этот
       блок токенов: правишь здесь — меняется вся продукция. */
    --color-bg: #080F14;            /* Deep Slate */
    --color-bg-soft: #111822;       /* Slate Surface */
    --color-bg-deep: #050810;       /* самый глубокий фон под cta-band */
    --color-surface: #111822;
    --color-surface-elevated: #1A2230; /* Soft Slate */
    --color-surface-overlay: #232E3D;
    --color-text: #EDEDEF;
    --color-text-soft: #B4B4BC;
    --color-text-muted: #8A8A93;
    --color-text-disabled: #46464F;
    --color-border: #1F2937;
    --color-border-soft: #182232;
    --color-border-strong: #2E3A4D;
    /* Accent — голубой из знака «Match Point» (средний тон ленты между
       бирюзовой и фиолетовой траекториями). На тёмном фоне — сам голубой знака
       (8.7:1); он светлый, поэтому текст на акцентной заливке — тёмный. */
    --color-accent: #5FB8E8;
    --color-accent-deep: #3C9DD6;
    --color-accent-soft: #A9DBF6;
    --color-accent-text: #0B0D12;
    /* Ink — первичное действие/бренд. На тёмной теме «ink» инвертируется в
       near-white (Linear/Vercel dark: primary = светлая заливка, тёмный текст). */
    --color-ink: #F2F3F5;
    --color-ink-hover: #E2E4E9;
    --color-ink-text: #0B0D12;
    /* Resume accent presets (Task 23 customize): курируемые тона accent-цвета
       целевого резюме. Абсолютные значения (одинаковы в обеих темах — это
       brand-палитра swatch'ей, не surface-цвета). --resume-accent-accent
       наследует фирменный --color-accent. */
    --resume-accent-sage: #5B8C6E;
    --resume-accent-teal: #2F6F6A;
    --resume-accent-navy: #2B4A7E;
    --resume-accent-coral: #D9695A;
    --resume-accent-plum: #7C4D7A;
    --resume-accent-ochre: #B7833A;
    --resume-accent-slate: #4A5568;
    --resume-accent-accent: var(--color-accent);
    --resume-accent-ink: #232833;
    --resume-accent-wine: #8A2D4A;
    --resume-accent-emerald: #1F7350;
    --resume-accent-ocean: #1D6FA5;
    --resume-accent-indigo: #4A47B5;
    --resume-accent-rose: #B8466A;
    /* Яркие акценты тёмного листа и пастель декора (20.10). */
    --resume-accent-mint: #2FD39C;
    --resume-accent-sun: #F4B63C;
    --resume-accent-cyan: #36B8EB;
    --resume-accent-lime: #A6D63A;
    --resume-accent-blush: #E99A9B;
    --resume-accent-peach: #F2AE7E;
    --resume-accent-aqua: #6FCFD3;
    --resume-accent-lilac: #B39DEB;
    --resume-accent-sky: #8EBDE9;
    --resume-accent-sand: #D8BC98;
    /* Resume paper-surface (Task 24 live-preview): «бумажный лист» документа —
       тёплый off-white фон + тёмная типографика. Абсолютные значения,
       одинаковы в обеих темах: preview/печать всегда выглядят как бумага,
       независимо от темы UI. --surface-paper переиспользуется letter-editor'ом
       (Task 25). */
    --surface-paper: #FBFAF7;
    --resume-paper-ink: #1A1A1A;
    --resume-paper-ink-soft: #44423E;
    --resume-paper-ink-muted: #6B6862;
    /* Signal/data-цвета — выровнены с target палитрой. */
    --color-teal: #14B8A6;          /* подтянули к настоящему teal */
    --color-teal-deep: #0F8C7E;
    --color-sage: #22C55E;          /* теперь emerald success */
    --color-sage-deep: #16A34A;
    --color-violet: #9A88FF;        /* фиолетовая траектория знака — secondary */
    --color-amber: #F59E0B;         /* tailwind amber */
    --color-success: #22C55E;
    --color-warning: #F59E0B;
    /* Пара для плашек: подложка + текст на ней. Жёлтый текст без подложки не
       добирает контраст на мелком кегле — на плашке добирает. */
    --color-warning-soft: rgba(245, 158, 11, 0.16);
    --color-warning-strong: #FBBF24;
    /* Золото подборки дня (docs/proposals/vacancy-picks.md §11.4): знак
       качества разбора, а не тревога, поэтому свой металлический тон, а не
       amber/warning. Пара плашки: --color-gold-soft подложка + --color-gold-text
       текст на ней (контраст >= 4.5:1 держит app/static/tokens_test.go). */
    --color-gold: #D9AE55;
    --color-gold-soft: rgba(217, 174, 85, 0.16);
    --color-gold-text: #EBC873;
    --color-gold-rgb: 217, 174, 85;
    /* Свечение золота (ореол, отсвет) — светлое тёплое золото. На тёмной теме
       совпадает с самим золотом; на светлой текстовый тон бурый и светился
       бы грязью, поэтому ореол берёт свой. */
    --color-gold-glow-rgb: 217, 174, 85;
    --color-danger: #EF4444;
    /* Legacy compat. Navigation-pill использует --color-navy как dark-surface;
       на новой dark-теме оно совпадает с bg-soft. */
    --color-navy: #111822;
    --color-navy-light: #1A2230;
    /* RGB значения для rgba(..., a) композиций. */
    --color-accent-rgb: 95, 184, 232;
    --color-teal-rgb: 20, 184, 166;
    --color-sage-rgb: 34, 197, 94;
    --color-violet-rgb: 154, 136, 255;
    --color-amber-rgb: 245, 158, 11;
    --color-danger-rgb: 239, 68, 68;
    --color-navy-rgb: 17, 24, 34;
    /* neutral slate — theme-invariant (mid-gray), для нейтральных divider'ов
       и «нет-акцента» icon-плашек (example-card/compare/stat-strip). */
    --color-slate-rgb: 148, 163, 184;
    /* coral-rgb отсутствовал, везде использовался fallback `200 66 61` без
       запятых — invalid для legacy `rgba(R G B, A)` syntax → backgrounds не
       применялись (включая icon-tile «Главный риск» в Career Snapshot). */
    --color-coral-rgb: 200, 66, 61;
    /* bg/text RGB — для tints поверх card-фона и инверсий при переключении
       темы. Светлая тема override-нёт весь блок в data-theme="light". */
    --color-bg-rgb: 8, 15, 20;
    --color-text-rgb: 237, 237, 239;

    /* Типографика. Geist (Vercel, 2024 в Google Fonts) — premium tech
       characterful sans без overuse Inter. JetBrains Mono для меток/data.
       --font-serif алиас на sans (Fraunces полностью убран). */
    --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Direction «технологичная точность» (Linear/Vercel-grade): единый гротеск
       Geist на ВЕСЬ UI — chrome, лендинг, кабинет, display-заголовки. Editorial
       serif (Fraunces) полностью выведен из продукта; засечки остаются строго
       в «бумаге» резюме (--font-classic-serif) как осознанный сигнал «это
       документ, а не софт». --font-serif/--font-display — теперь алиасы sans:
       все 52 usage'а var(--font-display) и «serif-intent» chrome'а переключаются
       на Geist одним токеном; «дорогой» вид даёт не контраст засечек, а точная
       display-типографика (tight tracking + вес, см. .u-display / заголовки). */
    --font-serif: var(--font-sans);
    --font-display: var(--font-sans);
    --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* --font-classic-serif — настоящий serif-стек для Classic-шаблона целевого
       резюме (Task 8). Единственное место в продукте с засечками; остальной UI
       остаётся на --font-sans. Системные serif'ы (без web-font) — печать резюме
       не должна зависеть от сетевой загрузки шрифта. */
    --font-classic-serif: "Iowan Old Style", "Palatino Linotype", "Palatino", "Georgia", "Times New Roman", serif;

    /* --font-size-letter-name — display-размер имени автора в шапке cover-letter
       редактора (Task 25). clamp() — крупный на десктопе, компактный на мобиле,
       без horizontal-scroll на 375px. */
    --font-size-letter-name: clamp(2rem, 4vw, 2.75rem);

    /* Type scale. Были НЕ определены — все var(--font-size-*) (29 usage'ей:
       sm/xs/lg/xl) падали в inherit 16px, отчего мелкие подписи/hints/eyebrow'ы
       рендерились переросшими и «флэтовали» иерархию. Восстанавливаем намеренную
       шкалу: caption/eyebrow → 12, secondary/label → 14, body → 16, title → 18/22. */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.375rem;
    /* Wordmark «Persium» — один голос на всех поверхностях (шапка, сайдбар,
       топбар, логин, онбординг, футер): medium, мягкий отрицательный трекинг. */
    --brand-wordmark-weight: 500;
    --brand-wordmark-tracking: -0.02em;
    /* Плитка знака — фирменная тёмная сцена «Match Point», не зависит от темы */
    --brand-tile: #0A0A17;
    --brand-tile-glow: rgba(124, 92, 255, 0.32);

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* Мера канваса кабинета: сколько ширины страница берёт на широком мониторе.
       1480px — та же мера, что в прототипе реворка. Без неё на 2560 контентная
       колонка выходила 2248px: строка меты тянулась на 1100 символов, а ряды
       карточек разъезжались дырами в полэкрана. */
    --canvas-max: 1480px;

    /* Unified vertical rhythm — единый вертикальный ритм секций (лендинг +
       кабинет). Все editorial-секции дышат одинаково; head→content задаётся
       --section-head-gap. Кабинет compact масштабирует их вниз. */
    --section-pad-y: clamp(2.5rem, 6vw, 5rem);   /* блочный паддинг секции */
    --section-head-gap: clamp(2rem, 4vw, 3rem);  /* head → контент */
    --section-kicker-gap: var(--space-3);        /* кикер → титул */
    --section-intro-gap: var(--space-3);         /* титул → интро */

    /* Радиусы — premium-уровень: средние, не острые (hacker-vibe) и не jumbo
       (soft-vibe). Apple/Linear cards 10-14, buttons 6-8. */
    --radius-sm: 6px;
    /* Пилюля — форма чипа: одна на всё семейство (ui_chip, chip-radio,
       chips-input). До 17.09 у ui_chip был прямоугольный --radius-sm, и два
       ряда чипов на одной форме читались как два разных компонента. */
    --radius-pill: 999px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* Motion — единая система микро-моушена (direction «технологичная
       точность»): быстрый, точный, чуть пружинистый. Компоненты используют
       только эти токены, не хардкодят cubic-bezier/длительности. Уважает
       prefers-reduced-motion (глобальный сброс ниже). */
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 280ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* decelerate — вход/reveal */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* симметричный — hover/toggle */
    --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);  /* лёгкий overshoot — press/pop */

    /* Тени + glow. Slightly tinted indigo glow вместо тёплого drop-shadow.
       Все тени включают 1px hairline через box-shadow второй stop —
       premium dashboard look (Linear / Vercel). */
    /* Elevation-шкала (нижний → верхний): xs = list-элементы (recede),
       sm = content-карточки (resting), md = hero/feature (raised), lg = overlay.
       Иерархия читается как «designed depth», а не «тень на всём подряд». */
    --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.015);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.02);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --glow-accent: 0 0 32px rgba(var(--color-accent-rgb), 0.28);
    --glow-soft:   0 0 20px rgba(var(--color-accent-rgb), 0.15);

    /* Per-accent glow-shadows: одна формула, разные цвета — используется
       вокруг иконок-halo, узлов карьерной карты, progress-колец и пр.
       Структура: тонкий 1px hairline + средний bloom + дальний ambient. */
    --glow-violet:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.25),
        0 0 18px rgba(var(--color-accent-rgb), 0.45),
        0 0 48px rgba(var(--color-accent-rgb), 0.20);
    --glow-teal:
        0 0 0 1px rgba(var(--color-teal-rgb), 0.25),
        0 0 18px rgba(var(--color-teal-rgb), 0.40),
        0 0 48px rgba(var(--color-teal-rgb), 0.18);
    --glow-sage:
        0 0 0 1px rgba(var(--color-sage-rgb), 0.25),
        0 0 18px rgba(var(--color-sage-rgb), 0.40),
        0 0 48px rgba(var(--color-sage-rgb), 0.18);
    --glow-amber:
        0 0 0 1px rgba(var(--color-amber-rgb), 0.25),
        0 0 18px rgba(var(--color-amber-rgb), 0.42),
        0 0 48px rgba(var(--color-amber-rgb), 0.18);

    /* Top/bottom light-streak — премиум-сигнатура с референсов дизайнера.
       Тонкая горизонтальная «линза»: прозрачные края → яркий пик в центре.
       Применяется через ::before на карточках/секциях (см. .has-streak). */
    --streak-violet: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0) 8%,
        rgba(var(--color-accent-rgb), 0.85) 50%,
        rgba(var(--color-accent-rgb), 0) 92%,
        transparent 100%);
    --streak-teal: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-teal-rgb), 0) 8%,
        rgba(var(--color-teal-rgb), 0.80) 50%,
        rgba(var(--color-teal-rgb), 0) 92%,
        transparent 100%);
    --streak-sage: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-sage-rgb), 0) 8%,
        rgba(var(--color-sage-rgb), 0.80) 50%,
        rgba(var(--color-sage-rgb), 0) 92%,
        transparent 100%);
    --streak-amber: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-amber-rgb), 0) 8%,
        rgba(var(--color-amber-rgb), 0.80) 50%,
        rgba(var(--color-amber-rgb), 0) 92%,
        transparent 100%);

    /* Полоса прогресса продукта: оси подборки, полосы карьерной карты.
       Градиент — тот же, что у кольца оценки; трек — нейтральный. */
    --gradient-progress: linear-gradient(90deg, #14B8A6, #5FB8E8 50%, #7C5CFF);
    --progress-track: rgba(118, 118, 128, 0.14);

    /* Минимальный tap target (WCAG 2.5.5 AA) */
    --tap-min: 44px;

    /* Единый focus-ring: один источник правды. Меняешь токен — меняется
       focus по всему продукту. Чистый accent-outline (как у большинства
       компонентов; glow-вариант — только там, где компонент явно его хочет). */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--color-accent);

    /* ----- Icon system (см. docs/design-system.md §Icon system).
       3-tier модель:
       - Tier A (Tile) — hero/feature anchor: plate-lg 56px, radius-md.
       - Tier B (Badge) — row/list marker: plate-sm 32px или plate-md 44px,
         round 50% или squircle radius-sm.
       - Tier C (Inline) — мета-маркер без плашки или внутри pill'а.
       Stroke = 1.75 на всех плашечных иконках. 2 — только nav-контролы
       (arrows, chevrons, hamburger). 1.5 — если иконка ≤14px. */
    --icon-plate-sm: 32px;
    --icon-plate-md: 44px;
    --icon-plate-lg: 56px;
    --icon-stroke-fine: 1.5;
    --icon-stroke: 1.75;
    --icon-stroke-heavy: 2;

    /* native form controls (scrollbar, selection, focus ring) — соответствуют
       текущей theme. dark = dark, light overrides ниже. */
    color-scheme: dark;
}

/* ============================================================================
   Light theme — «Quiet Premium light», парная пара к dark.
   ============================================================================
   Применяется в трёх случаях:
     1. <html data-theme="light"> — пользователь явно выбрал светлую
        (cookie theme=light, server-render через Executor.params)
     2. prefers-color-scheme: light + no data-theme override — system auto
     3. Toggle JS меняет data-theme на лету при клике

   Принципы:
   • Не pure white (#FFF agressive) — off-white cool slate с лёгким blue
     tint, сохраняет Quiet Premium tone landing'а. Pure white жёлто-режет
     на retina и стрессирует ergonomics.
   • Accent (electric violet) сохраняем — это brand. Чуть deepen для AA
     contrast против светлого фона (#7C3AED → #6D28D9).
   • Signal colors deepen — все на 1 step (теal/sage/amber/danger).
   • Shadows через rgba(deep-slate) с blur, не pure black: чёрные shadow
     на белом смотрятся «cheap». Slate-tinted shadows = premium.
   • Glows и streaks — alpha multiplier ×0.55: на белом ambient halo
     быстро становится noise, нужна сдержанность.

   Контракт data-theme:
     [data-theme] не задан → CSS @media (prefers-color-scheme) решает
     [data-theme="dark"]   → forces dark (re-affirm default)
     [data-theme="light"]  → forces light
   Продуктовое решение (37e31d4f): платформа светлая по умолчанию, и сервер
   ставит атрибут ВСЕГДА — `light`, если нет куки `theme=dark` (переключатель в
   настройках аккаунта; см. themeFromCookie в app/template/executor.go).
   Системная тема на страницы кабинета и онбординга не влияет; ветка без
   атрибута остаётся для страниц вне executor'а. */
:root[data-theme="light"] {
    color-scheme: light;

    /* Surfaces — cool near-white, многослойные (direction «технологичная
       точность»). Фон чуть холоднее и чище прежнего сине-серого; карты —
       чистый белый, глубина создаётся тенью и hairline-бордером, а не
       заливкой. */
    --color-bg: #F5F5F7;
    --color-bg-soft: #EFEFF3;
    --color-bg-deep: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-surface-elevated: #FFFFFF;
    --color-surface-overlay: #FFFFFF;

    /* Text — cool near-black ink (не чистый чёрный: мягче на near-white). */
    --color-text: #0B0D12;
    --color-text-soft: #3B404B;
    --color-text-muted: #5F6570;
    --color-text-disabled: #AEB2BB;

    /* Borders — crisp hairline. border = разделители/карты, soft = тонкие
       внутренние линии, strong = hover/active контур. */
    --color-border: #E4E4EA;
    --color-border-soft: #EEEEF2;
    --color-border-strong: #D2D2DA;

    /* Ink — первичное действие/бренд (Linear/Vercel: primary = графит, не
       заливка цветом). Кнопки, лого-плитка, тёмные акценты. */
    --color-ink: #14161C;
    --color-ink-hover: #24272F;
    --color-ink-text: #FFFFFF;

    /* Accent — голубой знака «Match Point», взятый на тон глубже: светлый
       голубой ленты (#5FB8E8) на белом даёт 2.2:1, а этот — 5.1:1 под белым
       текстом и 4.9:1 как текст ссылки (AA). Светлый голубой знака живёт в
       --color-accent-soft. Точечно: фокус, ссылки, active, CTA, малые highlight'ы. */
    --color-accent: #1570C4;
    --color-accent-deep: #0F5FA8;
    --color-accent-soft: #7CC0EE;
    --color-accent-text: #FFFFFF;

    /* Signal colors — приглушённые, на step deeper для AA. */
    --color-teal: #0E8C82;
    --color-teal-deep: #0B6F67;
    --color-sage: #12925A;
    --color-sage-deep: #0F7A4B;
    --color-violet: #6D4CFF;
    --color-amber: #B5730B;
    --color-success: #12925A;
    --color-warning: #B5730B;
    --color-warning-soft: rgba(181, 115, 11, 0.12);
    --color-warning-strong: #8A5608;
    --color-gold: #A88124;
    --color-gold-soft: rgba(168, 129, 36, 0.14);
    --color-gold-text: #76570C;
    --color-gold-rgb: 168, 129, 36;
    --color-gold-glow-rgb: 232, 186, 78;
    --color-danger: #D5382F;

    /* Legacy navy — теперь light-surface. */
    --color-navy: #F5F6F8;
    --color-navy-light: #FFFFFF;

    /* RGB pairs — синхронны новым hex значениям. */
    --color-accent-rgb: 21, 112, 196;
    --color-teal-rgb: 14, 140, 130;
    --color-sage-rgb: 18, 146, 90;
    --color-violet-rgb: 109, 76, 255;
    --color-amber-rgb: 181, 115, 11;
    --color-danger-rgb: 213, 56, 47;
    --color-navy-rgb: 245, 246, 248;
    --color-coral-rgb: 213, 56, 47;
    --color-bg-rgb: 251, 251, 252;
    --color-text-rgb: 11, 13, 18;
    --color-ink-rgb: 20, 22, 28;

    /* Shadows — многослойные, очень низкая opacity, cool-tinted. Premium
       depth без «cheap drop». Hairline даёт реальный border, не тень. */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 2px rgba(16, 18, 26, 0.04), 0 10px 28px -16px rgba(16, 18, 26, 0.14);
    --shadow-md: 0 1px 2px rgba(16, 18, 26, 0.05), 0 16px 40px -18px rgba(16, 18, 26, 0.20);
    --shadow-lg: 0 2px 6px rgba(16, 18, 26, 0.06), 0 28px 64px -24px rgba(16, 18, 26, 0.28);

    /* Glows — ambient halo на белом превращается в noise. Уменьшаем
       alpha в ~1.8 раза от dark значений. */
    --glow-accent: 0 0 24px rgba(var(--color-accent-rgb), 0.16);
    --glow-soft:   0 0 16px rgba(var(--color-accent-rgb), 0.08);
    --glow-violet:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.18),
        0 0 14px rgba(var(--color-accent-rgb), 0.22),
        0 0 36px rgba(var(--color-accent-rgb), 0.10);
    --glow-teal:
        0 0 0 1px rgba(var(--color-teal-rgb), 0.18),
        0 0 14px rgba(var(--color-teal-rgb), 0.20),
        0 0 36px rgba(var(--color-teal-rgb), 0.08);
    --glow-sage:
        0 0 0 1px rgba(var(--color-sage-rgb), 0.18),
        0 0 14px rgba(var(--color-sage-rgb), 0.20),
        0 0 36px rgba(var(--color-sage-rgb), 0.08);
    --glow-amber:
        0 0 0 1px rgba(var(--color-amber-rgb), 0.18),
        0 0 14px rgba(var(--color-amber-rgb), 0.22),
        0 0 36px rgba(var(--color-amber-rgb), 0.08);

    /* Streaks — peak alpha уменьшен (0.85 → 0.50), на белом яркий peak
       режет глаз. */
    --streak-violet: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0) 8%,
        rgba(var(--color-accent-rgb), 0.50) 50%,
        rgba(var(--color-accent-rgb), 0) 92%,
        transparent 100%);
    --streak-teal: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-teal-rgb), 0) 8%,
        rgba(var(--color-teal-rgb), 0.45) 50%,
        rgba(var(--color-teal-rgb), 0) 92%,
        transparent 100%);
    --streak-sage: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-sage-rgb), 0) 8%,
        rgba(var(--color-sage-rgb), 0.45) 50%,
        rgba(var(--color-sage-rgb), 0) 92%,
        transparent 100%);
    --streak-amber: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-amber-rgb), 0) 8%,
        rgba(var(--color-amber-rgb), 0.50) 50%,
        rgba(var(--color-amber-rgb), 0) 92%,
        transparent 100%);
}

/* Auto-mode: пользователь не выбирал тему явно (data-theme не задан),
   но system prefers light. Дублирует light overrides. Селектор
   :root:not([data-theme]) важен — иначе forced-dark (data-theme="dark")
   сломается при light-system. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;

        --color-bg: #F5F5F7;
        --color-bg-soft: #EFEFF3;
        --color-bg-deep: #FFFFFF;
        --color-surface: #FFFFFF;
        --color-surface-elevated: #FFFFFF;
        --color-surface-overlay: #FFFFFF;

        --color-text: #0B0D12;
        --color-text-soft: #3B404B;
        --color-text-muted: #5F6570;
        --color-text-disabled: #AEB2BB;

        --color-border: #E4E4EA;
        --color-border-soft: #EEEEF2;
        --color-border-strong: #D2D2DA;

        --color-ink: #14161C;
        --color-ink-hover: #24272F;
        --color-ink-text: #FFFFFF;

        --color-accent: #1570C4;
        --color-accent-deep: #0F5FA8;
        --color-accent-soft: #7CC0EE;
        --color-accent-text: #FFFFFF;

        --color-teal: #0E8C82;
        --color-teal-deep: #0B6F67;
        --color-sage: #12925A;
        --color-sage-deep: #0F7A4B;
        --color-violet: #6D4CFF;
        --color-amber: #B5730B;
        --color-success: #12925A;
        --color-warning: #B5730B;
        --color-warning-soft: rgba(181, 115, 11, 0.12);
        --color-warning-strong: #8A5608;
        --color-gold: #A88124;
        --color-gold-soft: rgba(168, 129, 36, 0.14);
        --color-gold-text: #76570C;
        --color-gold-rgb: 168, 129, 36;
    --color-gold-glow-rgb: 232, 186, 78;
        --color-danger: #D5382F;

        --color-navy: #F5F6F8;
        --color-navy-light: #FFFFFF;

        --color-accent-rgb: 21, 112, 196;
        --color-teal-rgb: 14, 140, 130;
        --color-sage-rgb: 18, 146, 90;
        --color-violet-rgb: 109, 76, 255;
        --color-amber-rgb: 181, 115, 11;
        --color-danger-rgb: 213, 56, 47;
        --color-navy-rgb: 245, 246, 248;
        --color-coral-rgb: 213, 56, 47;
        --color-bg-rgb: 251, 251, 252;
        --color-text-rgb: 11, 13, 18;
        --color-ink-rgb: 20, 22, 28;

        --shadow-sm: 0 1px 2px rgba(16, 18, 26, 0.04), 0 10px 28px -16px rgba(16, 18, 26, 0.14);
        --shadow-md: 0 1px 2px rgba(16, 18, 26, 0.05), 0 16px 40px -18px rgba(16, 18, 26, 0.20);
        --shadow-lg: 0 2px 6px rgba(16, 18, 26, 0.06), 0 28px 64px -24px rgba(16, 18, 26, 0.28);

        --glow-accent: 0 0 24px rgba(var(--color-accent-rgb), 0.16);
        --glow-soft:   0 0 16px rgba(var(--color-accent-rgb), 0.08);
        --glow-violet:
            0 0 0 1px rgba(var(--color-accent-rgb), 0.18),
            0 0 14px rgba(var(--color-accent-rgb), 0.22),
            0 0 36px rgba(var(--color-accent-rgb), 0.10);
        --glow-teal:
            0 0 0 1px rgba(var(--color-teal-rgb), 0.18),
            0 0 14px rgba(var(--color-teal-rgb), 0.20),
            0 0 36px rgba(var(--color-teal-rgb), 0.08);
        --glow-sage:
            0 0 0 1px rgba(var(--color-sage-rgb), 0.18),
            0 0 14px rgba(var(--color-sage-rgb), 0.20),
            0 0 36px rgba(var(--color-sage-rgb), 0.08);
        --glow-amber:
            0 0 0 1px rgba(var(--color-amber-rgb), 0.18),
            0 0 14px rgba(var(--color-amber-rgb), 0.22),
            0 0 36px rgba(var(--color-amber-rgb), 0.08);

        --streak-violet: linear-gradient(90deg,
            transparent 0%,
            rgba(var(--color-accent-rgb), 0) 8%,
            rgba(var(--color-accent-rgb), 0.50) 50%,
            rgba(var(--color-accent-rgb), 0) 92%,
            transparent 100%);
        --streak-teal: linear-gradient(90deg,
            transparent 0%,
            rgba(var(--color-teal-rgb), 0) 8%,
            rgba(var(--color-teal-rgb), 0.45) 50%,
            rgba(var(--color-teal-rgb), 0) 92%,
            transparent 100%);
        --streak-sage: linear-gradient(90deg,
            transparent 0%,
            rgba(var(--color-sage-rgb), 0) 8%,
            rgba(var(--color-sage-rgb), 0.45) 50%,
            rgba(var(--color-sage-rgb), 0) 92%,
            transparent 100%);
        --streak-amber: linear-gradient(90deg,
            transparent 0%,
            rgba(var(--color-amber-rgb), 0) 8%,
            rgba(var(--color-amber-rgb), 0.50) 50%,
            rgba(var(--color-amber-rgb), 0) 92%,
            transparent 100%);
    }
}

/* ------------------------------- Reset -------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    /* Smooth-scroll для anchor-кликов (header → #pricing и т.п.). Media-
       query ниже уже отключает scroll-behavior при reduced-motion. */
    scroll-behavior: smooth;
}
html, body { overflow-x: clip; }
/* Anchor-секции получают scroll-margin, чтобы не уезжать под sticky
   top-bar при якорной навигации. */
section[id] { scroll-margin-top: clamp(1rem, 4vw, 4.5rem); }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    /* Geist не имеет italic-грани → любой унаследованный от editorial-эпохи
       font-style:italic давал бы кривой синтетический наклон (cheap tell).
       font-synthesis:none запрещает браузеру подделывать style/weight: chrome
       на Geist рендерит emphasis прямым (различие несёт цвет+вес — так и
       принято в tech-sans системах). Настоящие italic/bold грани serif
       «бумаги» резюме (системные Palatino/Georgia) не затронуты — у них
       реальные начертания, синтез им не нужен. */
    font-synthesis: none;
    /* Anti-zoom на iOS: базовый размер ≥ 16px. Для крупных экранов
       fluid typography в .container. */
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
    /* Aurora-layer: три очень мягких радиальных «пятна» indigo + cyan +
       violet зафиксированы за viewport'ом. Дают премиум-depth без шума —
       фон не плоский и не «чёрная дыра», но и не отвлекает. На любую
       ширину viewport'а тянутся равномерно (нет резкого обрыва справа). */
    background-image:
        radial-gradient(ellipse 70% 50% at 12% -8%, rgba(var(--color-accent-rgb), 0.28) 0px, transparent 62%),
        radial-gradient(ellipse 55% 45% at 92% 4%, rgba(var(--color-accent-rgb), 0.18) 0px, transparent 60%),
        radial-gradient(ellipse 55% 45% at 92% 4%, rgba(var(--color-violet-rgb), 0.10) 0px, transparent 60%),
        radial-gradient(ellipse 90% 65% at 50% 115%, rgba(var(--color-accent-rgb), 0.14) 0px, transparent 65%),
        radial-gradient(ellipse 70% 55% at 85% 110%, rgba(var(--color-teal-rgb), 0.08) 0px, transparent 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Page-load fade: страница стартует opacity:0; JS снимает класс
       is-loading (или ставит is-ready) на DOMContentLoaded. Apple-стиль
       мягкого появления вместо резкого «blank → full paint». Noscript
       fallback в base.html откатывает на opacity:1, если JS off. */
    opacity: 0;
    transition: opacity 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.is-ready {
    opacity: 1;
}

/* Публичная страница резюме (/r/{token}) — документ, а не лендинг: гасим
   aurora-градиенты body. Их нижние свечения (accent+teal at ~110%) на дне
   вьюпорта в сумме с olive-грейном давали мутную жёлто-оливковую полосу внизу.
   Плоский --color-bg под документ спокойнее. */
body:has(.share-view) {
    background-image: none;
}
@media (prefers-reduced-motion: reduce) {
    body { opacity: 1; transition: none; }
}

/* Light theme — direction «технологичная точность»: чистый cool near-white,
   БЕЗ цветного aurora (фиолетовый/teal smoke на белом читается как муть).
   Depth создаётся не фоном, а точной elevation карт и hairline-бордерами.
   Оставляем лишь едва заметный нейтральный ink-wash сверху (alpha ~0.02) —
   имперцептивная дименсия, не тонировка. */
:root[data-theme="light"] body,
:root[data-theme="light"] body.body--app {
    background-image:
        radial-gradient(ellipse 120% 60% at 50% -20%, rgba(var(--color-ink-rgb), 0.022) 0px, transparent 70%);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) body,
    :root:not([data-theme]) body.body--app {
        background-image:
            radial-gradient(ellipse 120% 60% at 50% -20%, rgba(var(--color-ink-rgb), 0.022) 0px, transparent 70%);
    }
}

/* ---- Scroll-reveal stagger entrance --------------------------------- */
/*
 * Любой элемент с [data-reveal] стартует opacity:0 + translateY:16px.
 * IntersectionObserver в app.js добавляет .is-revealed, когда элемент
 * входит в viewport (threshold 0.15). Children-stagger через --reveal-i
 * inline-стиль или CSS-nth-child. Respect prefers-reduced-motion.
 */
[data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 460ms var(--ease-out),
                transform 460ms var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 55ms);
    will-change: opacity, transform;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Hover-lift — тактильная премиум-деталь для КЛИКАБЕЛЬНЫХ карт (Linear/
   Vercel): чуть приподнимается + углубляется тень + hairline твердеет.
   Утилита .u-lift (или авто-применение к известным card-ссылкам ниже).
   Транзишен на токенах; press возвращает к нулю. Respect reduced-motion. */
.u-lift {
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
.u-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.u-lift:active {
    transform: translateY(0);
    transition-duration: var(--dur-fast);
}
@media (prefers-reduced-motion: reduce) {
    .u-lift, .u-lift:hover, .u-lift:active { transition: none; transform: none; }
}

/* ============================================================================
   Premium-сигнатура + cabinet-wide entrance (подъём 7.5 → 9+)
   Три системных приёма поверх базового слоя:
     1. .has-streak — light-streak по верхней кромке hero/feature-карточек
        (--streak-* токены были, класс — нет). Distinctive top-highlight
        (Linear/Vercel), а не generic-тень.
     2. cabinetReveal — единый оркестрованный fade-up-stagger входа для ВСЕХ
        cabinet-страниц (раньше motion был только на дашборде). Один хорошо
        поставленный load важнее россыпи микроанимаций.
     3. streakIn — тонкий sweep-in самой линии.
   Всё под guard prefers-reduced-motion.
   ============================================================================ */
@keyframes streakIn {
    from { opacity: 0; transform: scaleX(0.35); }
    to   { opacity: 0.6; transform: none; }
}
@keyframes cabinetReveal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.has-streak { position: relative; }
.has-streak::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--streak-violet);
    opacity: 0.6;
    pointer-events: none;
    z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
    .has-streak::after { animation: streakIn 900ms var(--ease-out) both; }

    /* Cabinet-wide entrance: прямые дети page-shell въезжают со stagger'ом.
       Дашборд исключён — у него собственная оркестровка (.dash-reveal). */
    .page-shell:not(.dashboard) > * {
        /* backwards, а не both: `both` оставляет за собой значение
           анимации (identity-matrix), и элемент НАВСЕГДА остаётся
           стек-контекстом — всплывающие слои внутри него запираются под
           соседними блоками. `backwards` даёт ту же картинку и уходит без
           следа. */
        animation: cabinetReveal 460ms var(--ease-out) backwards;
    }
    .page-shell:not(.dashboard) > *:nth-child(1) { animation-delay: 20ms; }
    .page-shell:not(.dashboard) > *:nth-child(2) { animation-delay: 80ms; }
    .page-shell:not(.dashboard) > *:nth-child(3) { animation-delay: 140ms; }
    .page-shell:not(.dashboard) > *:nth-child(4) { animation-delay: 200ms; }
    .page-shell:not(.dashboard) > *:nth-child(n+5) { animation-delay: 240ms; }
}

img, svg, video, picture { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

button { font: inherit; cursor: pointer; }

input, textarea, select {
    /* Anti-zoom на iOS Safari: input меньше 16px вызывает auto-zoom. */
    font-size: 16px;
    font-family: inherit;
}

/* --------------------------- Typography ------------------------------ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.025em;
    line-height: 1.15;
}
h1 { font-size: clamp(1.875rem, 4vw, 3rem); margin: 0 0 var(--space-4); letter-spacing: -0.04em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0 0 var(--space-4); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.4rem); margin: 0 0 var(--space-3); }
p  { margin: 0 0 var(--space-4); }
/* em — выделение через accent-цвет, не italic. Editorial курсив был
   journal-vibe; на dashboard используем indigo-подсветку, без bold —
   чтобы строка читалась как ровный flow с цветовым accent'ом. */
em {
    font-style: normal;
    color: var(--color-accent);
    /* Geist Sans лишён italic в Google Fonts → подсветка через цвет + вес.
       На headings/hero font-weight уже 700; em добавляет +100 чтобы стать
       визуально тяжелее окружения, а не легче. */
    font-weight: 600;
}
h1 em, h2 em, h3 em { font-weight: 800; }

.muted { color: var(--color-text-muted); }

/* Утилита `.mono`. Её писали в 83 местах шаблонов — даты, идентификаторы,
   суммы, — а правила не существовало: класс был только внутри
   `.billing-table`. Всё это рендерилось пропорциональным шрифтом, и цифры
   «плавали»: в таймлайне откликов восемь дат подряд начинали текст рядом с
   собой на восьми разных позициях. Tabular-figures здесь не украшение, а
   единственный способ выровнять колонку чисел. */
/* .mono — «ровные цифры», а не моноширинный шрифт: моно в подписях делал интерфейс
   терминальным. Идентификаторы в админке — .mono-id (остаётся моноширинным). */
.mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* --------------------------- Layout ---------------------------------- */

.container {
    max-width: var(--bp-xl);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

main { display: block; }

/* Skip-to-main-content link — visually-hidden до :focus-visible. */
.skip-link {
    position: absolute;
    top: -1000px;
    left: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-text);
    color: var(--color-bg);
    font-weight: 600;
    text-decoration: none;
    z-index: 1000;
    border-radius: 0 0 var(--radius-md) 0;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
}
.skip-link:focus, .skip-link:focus-visible {
    top: 0;
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Единый focus-ring через токены (--focus-ring-*). Чистый accent-outline —
   консистентен с большинством компонентов; glow убран из дефолта (был у
   меньшинства, создавал разнобой). WCAG 2.4.7 + 1.4.11 — контраст ≥ 3:1
   покрыт outline'ом. Низкая специфичность (:where) — компонент при желании
   перебивает. */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
}

/* Tap-target utility. */
.tap-target {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
   Link contracts (hard-rule)
   ============================================================================
   Четыре visual-контракта для всех кликабельных text-элементов кабинета.
   Каждый — самостоятельный смысловой signal, что произойдёт по клику:

     .link-section      → переход на full-page вид этого блока
                          («Смотреть все роли», «Смотреть все 6 вопросов»)
     .link-inline       → forward-action внутри строки списка («Ответить»)
     .link-disclosure   → раскрытие in-place блока (<details> или
                          aria-expanded toggle); chevron-down ротируется
                          на 180° при open
     .link-muted        → tertiary/пассивный link (footer-сноска,
                          «пропустить», помощь). Низкий visual weight,
                          underline на hover/focus.

   До унификации (июнь 2026) ссылки имели ad-hoc стили: dashed-underline
   в hero, solid-underline в section-header, no-underline в row-action —
   3 разных контракта для пересекающихся семантик. Шум для пользователя.

   ПРАВИЛО: вся новая кликабельная text-разметка использует один из этих
   4 классов. Ad-hoc классы вида `.overview-hero__detail-link`,
   `.resume-qa-view-all` запрещены — это контракт-нарушение, не «локальный
   tweak». См. docs/design-system.md §Clickable contracts + витрину
   /__styleguide#link-contracts.

   Связь с .icon — иконки внутри ссылок наследуют currentColor; .link-inline
   и .link-disclosure имеют дефолтный affordance (arrow / chevron) через
   ::after, поэтому ВНУТРИ них дополнительный <svg> arrow/chevron класть
   не нужно (если нужен — переопредели ::after { display: none }).
*/

.link-section,
.link-inline,
.link-disclosure,
.link-muted {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-sans);
    line-height: 1.4;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    transition: color 200ms ease, text-decoration-color 200ms ease, opacity 200ms ease;
}
.link-section:focus-visible,
.link-inline:focus-visible,
.link-disclosure:focus-visible,
.link-muted:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ----- link-section: section-header → full-page navigation ----------- */
.link-section {
    color: var(--color-accent);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.link-section:hover,
.link-section:focus-visible {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
}

/* ----- link-inline: row-level forward action ------------------------- */
.link-inline {
    color: var(--color-accent);
    font-size: 0.875rem;
    font-weight: 500;
    gap: 0.25rem;
}
.link-inline::after {
    content: "→";
    margin-left: 0.05rem;
    font-weight: 500;
    transition: transform 200ms ease;
}
.link-inline:hover,
.link-inline:focus-visible { color: var(--color-accent); }
.link-inline:hover::after,
.link-inline:focus-visible::after { transform: translateX(2px); }

/* ----- link-disclosure: inline expand-collapse ----------------------- */
/* Применяется и на <summary>, и на <button aria-expanded>. Использует
   chevron-down иконку, которая ОБЯЗАТЕЛЬНО кладётся child'ом
   (ui_icon name="chevron-down" size="sm"); CSS навешивает rotation. */
.link-disclosure {
    color: var(--color-accent);
    font-size: 0.875rem;
    font-weight: 500;
}
.link-disclosure .icon {
    transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
details[open] > .link-disclosure .icon,
.link-disclosure[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}
.link-disclosure:hover,
.link-disclosure:focus-visible { color: var(--color-accent); }
/* Стандартный <summary> marker (треугольник) убираем — chevron заменяет. */
summary.link-disclosure { list-style: none; }
summary.link-disclosure::-webkit-details-marker { display: none; }

/* ----- link-muted: tertiary / opt-out / passive ---------------------- */
.link-muted {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--color-text-muted) 35%, transparent);
}
.link-muted:hover,
.link-muted:focus-visible {
    color: var(--color-text);
    text-decoration-color: currentColor;
}

/* ============================================================================
   Theme toggle — 3-button segmented control (sun / monitor / moon)
   ============================================================================
   Применяется в top-bar'е кабинета/админки и landing footer'е.
   Active state ставится JS'ом (data-theme-active) при page load исходя из
   текущего cookie / data-theme attr на <html>. Hover state subtle. */
/* Theme-toggle — labeled 2-option segmented control (светлая/тёмная).
   Живёт в настройках аккаунта; иконка + текст. Active = ink-текст на
   приподнятой белой пилюле (selection через elevation, НЕ accent —
   accent зарезервирован под primary-actions, см. design-system.md). */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    gap: 3px;
}
.theme-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* Сегмент выглядит компактно, но нажимается пальцем: 34px оставляем
       мышиным ширинам (WCAG 2.5.5). */
    min-height: var(--tap-min);
    padding: 0 var(--space-4);
    border-radius: 999px;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.theme-toggle__btn:hover { color: var(--color-text); }
.theme-toggle__btn[data-theme-active="true"] {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
    .theme-toggle__btn { min-height: 34px; }
}
.theme-toggle__btn .icon { width: 15px; height: 15px; }
.theme-toggle__label { line-height: 1; }
@media (prefers-reduced-motion: reduce) {
    .theme-toggle__btn { transition: none; }
}
.theme-setting__hint {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

/* --------------------------- Buttons --------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-4);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    text-decoration: none;
    background: transparent;
    color: var(--color-text);
    /* border-color/color тоже в transition — иначе hover secondary/ghost
       щёлкал рамкой; моушн на токенах для консистентности с системой. */
    transition: background-color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring);
}
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}
/* Primary = голубой знака «Match Point» (заливка фирменным цветом, как у Apple):
   платформа говорит цветом бренда в одном месте — главном действии экрана.
   Прежде primary был графитом, а цветная кнопка жила рядом (лендинг) —
   на одном экране было два «главных» разного цвета. Один filled-primary
   на вьюпорт (accent-закон 6) остаётся в силе. */
.btn--primary {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
    letter-spacing: -0.005em;
    box-shadow: 0 1px 2px rgba(var(--color-accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: background-color var(--dur-base) var(--ease-in-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring);
}
.btn--primary,
.btn--primary:visited,
.nav-list__item .btn--primary { color: var(--color-accent-text); }
.btn--primary:hover, .btn--primary:focus-visible {
    background: var(--color-accent-deep);
    border-color: var(--color-accent-deep);
    color: var(--color-accent-text);
    box-shadow: 0 2px 4px rgba(var(--color-accent-rgb), 0.18), 0 8px 20px rgba(var(--color-accent-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn--primary:active {
    background: var(--color-accent-deep);
    box-shadow: 0 1px 2px rgba(var(--color-accent-rgb), 0.2);
    transform: translateY(1px);
}
/* Тактильный press для ВСЕХ вариантов кнопок (secondary/ghost/danger) —
   раньше был только у primary. base .btn уже транзишенит transform. */
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
    .btn:active, .btn--primary:active { transform: none; }
}
/* Иконки внутри .btn получают плавный transform на hover. Стрелка
   справа сдвигается на +3px — Apple/Linear micro-detail. */
.btn .icon {
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn:hover .icon:last-child,
.btn:focus-visible .icon:last-child {
    transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
    .btn .icon { transition: none; }
    .btn:hover .icon:last-child,
    .btn:focus-visible .icon:last-child { transform: none; }
}
.btn--secondary {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}
.btn--secondary:hover, .btn--secondary:focus-visible {
    background: var(--color-surface-elevated);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.btn--ghost {
    background: transparent;
    color: var(--color-text-soft);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
    background: var(--color-surface-elevated);
    color: var(--color-text);
}
.btn--danger {
    background: var(--color-danger);
    color: var(--color-bg);
    border-color: var(--color-danger);
}
.btn--danger:hover, .btn--danger:focus-visible {
    background: var(--color-danger);
    filter: brightness(0.94);
    box-shadow: 0 2px 4px rgba(var(--color-danger-rgb), 0.16), 0 8px 20px rgba(var(--color-danger-rgb), 0.20);
}
.btn--full { width: 100%; }
/* --sm — компактный размер, НЕ компактная зона нажатия. На указательном
   устройстве кнопка может быть 36px, на пальце — нет (WCAG 2.5.5, 80%
   аудитории мобильная), поэтому mobile-first база держит --tap-min, а 36px
   включается только с ширины, где ввод мышиный. Раньше 36px стояли безусловно,
   и это чинили точечно по месту (.profile-question .btn--sm) — правило
   переехало в сам атом, чтобы не чинить его в третий раз. */
.btn--sm { min-height: var(--tap-min); padding: var(--space-1) var(--space-3); font-size: 0.875rem; }
@media (min-width: 768px) {
    .btn--sm { min-height: 36px; }
}
.btn--lg { min-height: 52px; padding: var(--space-3) var(--space-5); font-size: 1.0625rem; }

/* ---- AI action (design-system §AI actions) ----
   .btn--ai — сигнатура «эта кнопка запускает AI-генерацию». Ортогональна
   variant'у (primary/secondary/ghost): добавляет узнаваемый AI-акцент, НЕ меняя
   иерархию — accent-закон 6 держится (filled-primary остаётся один на вьюпорт).
   Пара к iconBefore="sparkles". Эстетика — крафтовая (Linear/Raycast), НЕ
   washed-lavender-fill. Сигнал из трёх слоёв:
     1) idle — sparkles в accent с мягким свечением (drop-shadow) + на не-filled
        кнопках чистая surface-подложка с accent gradient-hairline рамкой
        (padding/border-box), а не сиреневая заливка;
     2) hover — sparkles-twinkle + ярче свечение + accent-glow-ring;
     3) generation ([aria-busy]/is-generating) — shimmer-sweep + пульс sparkles
        («магия по генерации» для in-place async; для full-page операций магию
        несёт processing-экран). */
.btn--ai { position: relative; overflow: hidden; isolation: isolate; }
/* Sparkles (первая иконка) — accent-глиф «AI» с мягким свечением. */
.btn--ai .icon:first-child {
    color: var(--color-accent);
    filter: drop-shadow(0 0 3px rgba(var(--color-accent-rgb), 0.5));
}
.btn--ai.btn--primary .icon:first-child { /* на filled — в accent-text + светлый halo */
    color: currentColor;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45));
}
/* Не-filled AI-кнопки: чистая surface-подложка + accent gradient-hairline рамка
   (двойной фон padding-box/border-box) — премиальный «крафтовый» look, а не
   washed lavender-fill (тот читался как muted-чип, не как магия). */
.btn--ai.btn--secondary,
.btn--ai.btn--ghost {
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(130deg,
            rgba(var(--color-accent-rgb), 0.65),
            rgba(var(--color-accent-rgb), 0.15) 45%,
            rgba(var(--color-accent-rgb), 0.65)) border-box;
    color: var(--color-text);
    box-shadow: 0 1px 10px -6px rgba(var(--color-accent-rgb), 0.45);
    /* box-shadow не в базовом .btn transition — без этого свечение на hover
       вспыхивает мгновенно (резко). Плавный fade делает его «свечением», а не
       щелчком selection-обводки. */
    transition: box-shadow 260ms ease, background-color 150ms ease, transform 100ms ease;
}
.btn--ai.btn--secondary:hover, .btn--ai.btn--secondary:focus-visible,
.btn--ai.btn--ghost:hover, .btn--ai.btn--ghost:focus-visible {
    /* Интерьер — НЕПРОЗРАЧНЫЙ лёгкий accent-wash (color-mix с surface, theme-aware),
       иначе градиент рамки (border-box) просвечивал бы насквозь и заливал кнопку
       целиком → тёмный текст на фиолетовом = плохой контраст. Калм: только рамка
       ярче + лёгкая заливка + glow-ring, текст остаётся читаемым тёмным. */
    background:
        linear-gradient(color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)),
                        color-mix(in srgb, var(--color-accent) 8%, var(--color-surface))) padding-box,
        linear-gradient(130deg,
            rgba(var(--color-accent-rgb), 0.78),
            rgba(var(--color-accent-rgb), 0.30) 45%,
            rgba(var(--color-accent-rgb), 0.78)) border-box;
    color: var(--color-text);
    /* Мягкий двойной блум (размытые тени), а НЕ hard 0 0 0 4px spread-ring —
       кольцо без blur читалось как резкая selection-обводка. Свет «истекает»
       из-под кнопки, а не обводит её. */
    box-shadow:
        0 8px 24px -10px rgba(var(--color-accent-rgb), 0.5),
        0 0 20px -4px rgba(var(--color-accent-rgb), 0.22);
}
.btn--ai:hover .icon:first-child,
.btn--ai:focus-visible .icon:first-child {
    animation: ai-twinkle 700ms ease;
    filter: drop-shadow(0 0 6px rgba(var(--color-accent-rgb), 0.75));
}
@keyframes ai-twinkle {
    0%, 100% { transform: scale(1) rotate(0); }
    40%      { transform: scale(1.18) rotate(-8deg); }
    70%      { transform: scale(1.05) rotate(4deg); }
}
/* Генерация: shimmer-sweep поперёк кнопки + пульс sparkles. */
.btn--ai[aria-busy="true"]::after,
.btn--ai.is-generating::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        transparent 20%,
        rgba(var(--color-accent-rgb), 0.28) 50%,
        transparent 80%);
    transform: translateX(-100%);
    animation: ai-shimmer 1.3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ai-shimmer { to { transform: translateX(100%); } }
.btn--ai[aria-busy="true"] .icon:first-child,
.btn--ai.is-generating .icon:first-child { animation: ai-pulse 1s ease-in-out infinite; }
@keyframes ai-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .btn--ai:hover .icon:first-child,
    .btn--ai:focus-visible .icon:first-child,
    .btn--ai[aria-busy="true"] .icon:first-child,
    .btn--ai.is-generating .icon:first-child { animation: none; }
    .btn--ai[aria-busy="true"]::after,
    .btn--ai.is-generating::after { animation: none; opacity: 0; }
}

/* --------------------------- Forms ----------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.field__label { font-weight: 600; font-size: 0.9375rem; }
.field__hint { color: var(--color-text-muted); font-size: 0.875rem; }
.field__error {
    color: var(--color-danger);
    font-size: 0.875rem;
}
/* Mailcheck-подсказка под email-инпутом — variant `.field__hint--typo`.
   Префикс «Вы имели в виду» + кнопка-предложение в одну строку, кнопка
   стилизована под inline-link. */
.field__hint--typo {
    color: var(--color-text);
    font-size: 0.875rem;
}
.field__hint--typo button {
    background: transparent;
    border: 0;
    border-bottom: 1px dashed var(--color-accent);
    color: var(--color-accent);
    font: inherit;
    cursor: pointer;
    padding: 0;
}
.field__hint--typo button:hover,
.field__hint--typo button:focus-visible {
    border-bottom-style: solid;
    outline: none;
}

/* Password-strength meter — 3-сегментный bar + inline-лейбл под password-
   инпутом. Скоринг и текст лейбла — JS (initPasswordStrength). data-level
   от 0 до 3 управляет подсветкой сегментов. Вне JS — все 3 сегмента
   нейтрально-серые, лейбл пуст; форма работает как обычно.

   Bar и label лежат в одной строке (flex), label показывается только при
   score≥1 — экономит вертикаль на регистрации, где формa и так плотная. */
.pw-strength {
    margin-top: 0.4rem;
    display: flex; align-items: center;
    gap: var(--space-3);
}
.pw-strength__bar {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.pw-strength__bar > span {
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    transition: background 140ms ease;
}
.pw-strength[data-level="1"] .pw-strength__bar > span:nth-child(1) { background: var(--color-danger); }
.pw-strength[data-level="2"] .pw-strength__bar > span:nth-child(-n+2) { background: var(--color-amber); }
.pw-strength[data-level="3"] .pw-strength__bar > span { background: var(--color-sage); }
.pw-strength__label {
    margin: 0;
    flex-shrink: 0;
    min-width: 4.5rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pw-strength[data-level="0"] .pw-strength__label { visibility: hidden; }
/* Пустое поле — индикатора нет вовсе. Три серых чёрточки без подписи между
   подсказкой и следующим полем читались как артефакт вёрстки, а не как шкала:
   шкала без значения ничего не измеряет. */
.pw-strength[data-level="0"] { display: none; }

.input {
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    width: 100%;
    /* Тонкая recess-тень — поле читается «утопленным», не плоским бордер-боксом.
       Плавный переход border/shadow на фокус. */
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.input:hover { border-color: var(--color-border-strong); }
.input:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04), 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
}
.input--error { border-color: var(--color-danger); }

/* Password visibility toggle: ui_input с togglePassword=true оборачивает
   `<input>` в `.input-wrap--toggle` и кладёт справа `<button data-pw-toggle>`
   с глазиком. JS (initPasswordToggle в app.js) флипает type ↔ text + меняет
   иконку и aria-pressed/aria-label. <input> в DOM остаётся неизменным —
   важен для browser-autofill и password-manager'ов. */
.input-wrap--toggle {
    position: relative;
    display: block;
}
.input--with-toggle { padding-right: 3rem; }
.input-wrap__toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--tap-min); /* 44px — соответствует WCAG 2.5.5 AA */
    min-width: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    transition: color 140ms ease;
}
.input-wrap__toggle:hover,
.input-wrap__toggle:focus-visible {
    color: var(--color-text);
    outline: none;
}
.input-wrap__toggle:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-accent);
}

/* textarea — поведение, специфичное для multi-line. Базовые цвета/радиус/
   фокус наследуются от `.input`. */
.textarea {
    min-height: 7rem;
    line-height: 1.45;
    resize: vertical;
    font-family: inherit;
    font-size: 1rem; /* anti-zoom iOS */
}

/* --- search-bar -----------------------------------------------------------
   Editorial pill для admin-фильтров. Mobile (default): input занимает всю
   ширину, кнопка стекается под ним. ≥640: input и submit-кнопка визуально
   сливаются в один pill — ободок общий, фокус подсвечивает весь pill коралловым
   ringom. Лидирующая иконка `search` смягчает поиск без отдельной подписи. */
.search-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    max-width: 720px;
}
.search-bar__field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}
.search-bar__icon {
    position: absolute;
    left: var(--space-3);
    color: var(--color-text-muted);
    pointer-events: none;
}
.search-bar__input {
    padding-left: 2.5rem;
}
@media (min-width: 640px) {
    .search-bar {
        flex-direction: row;
        align-items: stretch;
        gap: var(--space-2);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 999px;
        padding: var(--space-1);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .search-bar:focus-within {
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
    }
    .search-bar__input {
        border: 0;
        background: transparent;
        min-height: calc(var(--tap-min) - 2 * var(--space-1) - 2px);
    }
    .search-bar__input:focus,
    .search-bar__input:focus-visible {
        outline: none;
        border-color: transparent;
        box-shadow: none;
    }
    .search-bar > .btn {
        border-radius: 999px;
        align-self: stretch;
        white-space: nowrap;
    }
}

/* Honeypot field — visually hidden but reachable for legacy bots. */
.honeypot {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* --------------------------- Badges / chips -------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text-soft);
}
/* Semantic status-dot (success/warning/danger) — GitHub/Linear-style
   leading dot; читается как «статус», а не просто цветная плашка. */
.badge--success::before,
.badge--warning::before,
.badge--danger::before,
.badge--progress::before,
.badge--neutral::before {
    content: "";
    flex: none;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}
.badge--success { background: rgba(var(--color-sage-rgb), 0.10); border-color: rgba(var(--color-sage-rgb), 0.35); color: var(--color-success); }
.badge--warning { background: rgba(var(--color-amber-rgb), 0.10); border-color: rgba(var(--color-amber-rgb), 0.35); color: var(--color-warning); }
.badge--danger  { background: rgba(var(--color-danger-rgb), 0.10); border-color: rgba(var(--color-danger-rgb), 0.35); color: var(--color-danger); }
/* progress — активный in-flight статус (подан/скрининг/интервью): accent-tint
   + dot. Отличает «в движении» от терминальных success/danger и от нейтральных
   pre-application (saved/shortlisted). */
.badge--progress { background: rgba(var(--color-accent-rgb), 0.10); border-color: rgba(var(--color-accent-rgb), 0.30); color: var(--color-accent); }
/* beta — subtle accent-бордер + mono-капс лейбл для экспериментальных фич. */
.badge--beta {
    background: rgba(var(--color-accent-rgb), 0.10);
    border-color: rgba(var(--color-accent-rgb), 0.4);
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

/* --------------------------- Avatar ---------------------------------- */

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-text);
}
.avatar--lg { width: 56px; height: 56px; font-size: 1.25rem; }

/* --------------------------- Flash ----------------------------------- */

/* ── Toast (flash) — floating, вне потока ──────────────────────────────
   Раньше flash жил В ПОТОКЕ над контентом: при авто-дисмиссе схлопывался и
   дёргал всю страницу вверх (layout shift). Теперь это position:fixed toast
   (Sonner-стиль): не влияет на поток → нулевой сдвиг; компактная белая
   elevated-карта с цветным accent-stripe по варианту; slide-in/out.
   Позиция: mobile — снизу по центру над bottom-nav; desktop — снизу справа. */
.flash-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px) + var(--space-3));
    z-index: 300;
    display: flex;
    justify-content: center;
    padding-inline: clamp(0.75rem, 4vw, 1rem);
    pointer-events: none; /* контейнер не перехватывает клики; карта — да */
}
/* На широком экране нижней навигации нет — тост садится ниже, но остаётся по
   центру: угол экрана человек не смотрит, а реплику о результате его же
   действия он ждёт там, где только что нажал. */
@media (min-width: 992px) {
    .flash-wrap { bottom: var(--space-5); }
}
/* Тост — тёмная пилюля, а не карточка.
   Белая карточка с заголовком и телом весила как блок страницы и спорила с
   содержимым за внимание, хотя живёт шесть секунд; тёмная плашка не
   притворяется частью страницы и читается за один взгляд. Эталон — прототип
   кабинета (docs/design/cabinet-rework). */
.flash--success { --toast-accent: color-mix(in srgb, var(--color-success) 55%, white); }
.flash--error   { --toast-accent: color-mix(in srgb, var(--color-danger) 45%, white); }
.flash--info    { --toast-accent: color-mix(in srgb, var(--color-teal) 45%, white); }
.flash--warning { --toast-accent: color-mix(in srgb, var(--color-warning) 55%, white); }
.flash {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* Ширина по тексту, а не во всю полосу: тост — реплика, и растянутая на
       полэкрана строка читается объявлением. */
    width: max-content;
    max-width: min(34rem, 100%);
    padding: 10px var(--space-2) 10px var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-ink);
    color: var(--color-ink-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    font-size: 0.875rem;
    line-height: 1.4;
    pointer-events: auto;
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    animation: flash-in var(--dur-slow) var(--ease-spring) forwards;
}
/* Селектор из двух классов намеренно: общее `.icon { color: currentColor }`
   объявлено ниже по файлу и при равной специфичности побеждает — значок
   наследовал бы белый от плашки. */
.flash .flash__icon { flex: none; color: var(--toast-accent, var(--color-ink-text)); }
.flash__text { min-width: 0; overflow-wrap: anywhere; }
@keyframes flash-in {
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.flash--leaving {
    animation: flash-out var(--dur-base) var(--ease-in-out) forwards;
    pointer-events: none;
}
@keyframes flash-out {
    to { transform: translateY(10px) scale(0.98); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .flash, .flash--leaving { animation: none; opacity: 1; transform: none; }
}
.flash__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--color-ink-text) 65%, transparent);
    cursor: pointer;
    border-radius: 999px;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.flash__close:hover {
    background: color-mix(in srgb, var(--color-ink-text) 14%, transparent);
    color: var(--color-ink-text);
}
.flash__close:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-ink-text);
    outline-offset: 2px;
}
/* Действие в тосте («Отменить») — текстовая кнопка цвета акцента тона: она
   единственное, что в пилюле можно нажать, кроме крестика. */
.flash__action {
    flex: none;
    min-height: 32px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--toast-accent, var(--color-ink-text));
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.flash__action:hover { background: color-mix(in srgb, var(--color-ink-text) 14%, transparent); }
.flash__action:focus-visible { outline: var(--focus-ring-width) solid var(--color-ink-text); outline-offset: 2px; }
/* Styleguide-only: inline-превью toast-карт (в проде они плавают fixed через
   .flash-wrap; здесь показываем статично, стопкой). */
.sg-toast-demo {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 30rem;
}
.sg-toast-demo .flash { animation: none; opacity: 1; transform: none; }

/* --------------------------- Pagination ------------------------------ */
/* Editorial-стиль: Prev/Next — тихие ghost-кнопки, активная позиция —
   не кнопка, а типографичный счётчик (крупная текущая цифра, уменьшённый
   разделитель и общее число серым). Брендовый акцент специально не
   используется — пагинация служебная, не зовёт к действию. */

.pagination {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: var(--space-4);
}
.pagination__nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.pagination__nav:hover {
    background: var(--color-surface-soft);
    border-color: var(--color-text-muted);
    transform: translateY(-1px);
}
.pagination__nav:active { transform: translateY(0); }
.pagination__nav--disabled {
    color: var(--color-text-muted);
    background: transparent;
    border-style: dashed;
    border-color: var(--color-border-soft);
    cursor: default;
    opacity: 0.55;
}
.pagination__arrow {
    font-size: 1.1em;
    line-height: 1;
    font-feature-settings: "tnum";
}
/* Numbered pages: 1 … 4 [5] 6 … 20. Каждая — отдельный tap-target;
   текущая — ink-заливка (тот же primary-язык, что и кнопки). */
.pagination__pages {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-variant-numeric: tabular-nums;
}
.pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-md);
    color: var(--color-text-soft);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background var(--dur-fast, 140ms) var(--ease-out, ease),
                color var(--dur-fast, 140ms) var(--ease-out, ease);
}
.pagination__page:hover { background: var(--color-bg-soft); color: var(--color-text); }
.pagination__page--current {
    background: var(--color-ink);
    color: var(--color-ink-text);
    font-weight: 600;
    cursor: default;
}
.pagination__page--current:hover { background: var(--color-ink); color: var(--color-ink-text); }
.pagination__gap {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 1.5rem;
    height: 2.5rem;
    padding-bottom: 0.4rem;
    color: var(--color-text-muted);
    user-select: none;
}
@media (max-width: 640px) {
    /* WCAG 2.5.5: на тач-экране номера страниц — полноразмерный tap-target. */
    .pagination__page { min-width: var(--tap-min); height: var(--tap-min); }
    .pagination__gap  { height: var(--tap-min); }
}

/* --------------------------- Skeleton -------------------------------- */
/* Переиспользуемый skeleton-плейсхолдер: shimmer-градиент пробегает слева
   направо. Раньше эффект жил ТОЛЬКО внутри .ob-scan__line (scan-doc). Теперь —
   design-system-примитив для любой loading-заглушки. Пример: .skeleton на
   блоке нужной ширины/высоты; для строк текста — несколько .skeleton--line. */
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton {
    background: linear-gradient(90deg,
        var(--color-bg-soft) 25%,
        color-mix(in srgb, var(--color-accent) 9%, var(--color-bg-soft)) 50%,
        var(--color-bg-soft) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.skeleton--line { height: 0.75rem; margin-bottom: 0.5rem; }
.skeleton--line:last-child { width: 60%; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* --------------------------- Empty state ----------------------------- */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2rem);
    /* Лёгкая accent-атмосфера сверху вместо плоского fill — карта дышит. */
    background:
        radial-gradient(130% 90% at 50% -10%, rgba(var(--color-accent-rgb), 0.045), transparent 55%),
        var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
}
.empty-state__icon {
    display: inline-flex;
    width: 56px; height: 56px;
    border-radius: var(--radius-lg); /* squircle — единый app-tile язык */
    /* accent-tinted plate + мягкий glow (как ui_icon_plate--outlined) вместо
       серого круга — фокус-точка пустого состояния. */
    background: radial-gradient(circle at 50% 38%, rgba(var(--color-accent-rgb), 0.18), rgba(var(--color-accent-rgb), 0.06) 72%);
    border: 1px solid rgba(var(--color-accent-rgb), 0.22);
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    box-shadow: 0 6px 18px -8px rgba(var(--color-accent-rgb), 0.40);
    margin-bottom: 0.4rem;
}
.empty-state__title {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.01em;
}
.empty-state__body {
    margin: 0;
    max-width: 36em;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}
.empty-state__cta { margin-top: 0.4rem; }

/* Error-страницы (404/403/500): empty-state на полную страницу с воздухом
   сверху и снизу, чтобы блок не прижимался к навигации public-layout. */
.empty-state--page {
    margin-block: clamp(2rem, 6vw, 4rem);
}

/* ---------------------- ui_nav_progress ---------------------- */
/* Top-bar progress индикатор для SSR-навигации. Показывается, пока браузер
   ждёт ответа от сервера (HTML SSR может занять секунды на медленных
   admin-эндпоинтах, обращающихся к aggregator). JS навешивает на <body>
   класс `is-loading` при клике по anchor / submit формы; новый документ
   приходит — старый DOM с лоадером удаляется автоматически. */
.nav-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999;
    pointer-events: none; opacity: 0; transition: opacity 120ms ease;
    background: transparent;
}
.is-loading .nav-progress { opacity: 1; }
.nav-progress__bar {
    display: block; height: 100%; width: 30%;
    background: linear-gradient(90deg,
        var(--color-accent) 0%,
        var(--color-amber) 60%,
        var(--color-teal) 100%);
    box-shadow: 0 0 8px var(--color-accent);
    transform: translateX(-100%);
}
.is-loading .nav-progress__bar { animation: nav-progress 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes nav-progress {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(150%); }
    100% { transform: translateX(450%); }
}
@media (prefers-reduced-motion: reduce) {
    .is-loading .nav-progress__bar { animation: none; transform: translateX(0); width: 100%; opacity: 0.6; }
}

/* ---------------------- ui_confirm_dialog ---------------------- */
/* Кастомный <dialog>-overlay для confirm-подтверждений (заменяет нативный
   window.confirm). HTML5 <dialog> даёт focus-trap и ESC-close из коробки;
   ::backdrop рисует затемнение поверх всей страницы. Стиль соответствует
   editorial-палитре кабинета: serif-заголовок, ivory-панель, drop-shadow
   с тёплым тоном. */
.confirm-dialog {
    border: 0; padding: 0; margin: auto;
    background: transparent; color: inherit;
    max-width: min(440px, calc(100vw - 2rem));
    /* Браузерные дефолты у <dialog> — слабые: убираем outline и outset border. */
}
.confirm-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}
.confirm-dialog[open] {
    animation: confirm-pop 180ms cubic-bezier(0.2, 0.7, 0.3, 1.1);
}
@keyframes confirm-pop {
    from { transform: scale(0.96) translateY(8px); opacity: 0; }
    to   { transform: scale(1) translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .confirm-dialog[open] { animation: none; }
}
.confirm-dialog__panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow:
        0 24px 64px -24px rgba(0, 0, 0, 0.45),
        0 4px 12px -4px rgba(0, 0, 0, 0.25);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.confirm-dialog__panel:focus { outline: none; }
/* Заголовок — вопрос, а не афиша: 20px, вес заголовков интерфейса. 24px
   растягивал короткий вопрос в две строки на половине диалогов. */
.confirm-dialog__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.confirm-dialog__body { margin: 0; color: var(--color-text-soft); font-size: 0.9375rem; line-height: 1.5; }
.confirm-dialog__actions { margin-top: var(--space-3); }
.confirm-dialog__body strong { color: var(--color-text); }
.confirm-dialog__actions {
    display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap;
}
@media (max-width: 480px) {
    .confirm-dialog__actions { flex-direction: column-reverse; }
    .confirm-dialog__actions .btn { width: 100%; }
}

/* ---------------------- Admin: unified page header ---------------------- */
/* Один шаблон шапки (`ui_page_header`) для всех admin/aggregator страниц.
   До унификации каждая страница имела свой `__header` namespace и
   подзаголовок где-то был выровнен под h1, где-то жил отдельным <p>; на
   moderation внизу шапки была толстая «чёрная полоса» — это был
   progress-bar, выглядящий как divider. Теперь:
     - h1 — общий serif стиль page-section'а (без отдельного font-size);
     - counter справа — моно, по правому краю baseline-aligned с h1;
     - lead-параграф — узкий muted-текст под заголовком;
     - progress — тонкая полоска (4px), отрисовывается только при
       progressPct>0; не «давит» как раньше у moderation. */
/* ---------------------- Page shell (composition standard) ----------------
   Единый wrapper для контента любой страницы кабинета/админки. Задаёт
   вертикальный ритм между breadcrumbs → page header → alerts → content
   sections без правок в каждом шаблоне. Hard-rule (см. docs/design-system.md
   §Page composition standard):

     <section class="page-shell">
         [ui_breadcrumbs]      ← только на detail-страницах
         [ui_page_header]
         [ui_alert]?
         <content sections>
     </section>

   Width: max-width не фиксирован — каждый раздел решает сам (resumes-page
   шире, admin-action — узкий focused screen). Главное правило — gap между
   прямыми детьми. */
/* Мера канваса. Без неё на широком мониторе кабинет расползался во всю ширину
   окна: на 2560 контентная колонка выходила 2248px, строка меты карточки
   тянулась на 1100 символов подряд, а ряд карточек с `auto-fit` разъезжался
   дырами в полэкрана. Ограничение стоит здесь, а не на странице: `page-shell`
   — обёртка ВСЕХ страниц кабинета, и мера у них общая.

   Центрирование, а не прижатие влево: прижатый контент оставлял бы всё пустое
   поле справа одной полосой, и правый рыночный рейл карты висел бы посреди
   экрана. По центру поля делятся поровну, и блок читается как разворот. */
.page-shell {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
    max-width: var(--canvas-max);
    margin-inline: auto;
}
/* На страницах документа (редактор/просмотр резюме) над контентом стоит стопка
   chrome: заголовок + тулбар действий + (в редакторе) тулбар редактора. Дефолтный
   gap space-5 между ними складывался в чрезмерный провал до самого контента
   («лишний отступ» над «Контактной информацией»). Ужимаем ритм до space-3. */
.page-shell:has(.resume-editor),
.page-shell:has(.artifact-grid) {
    gap: var(--space-3);
}
/* Карточки над документом (устаревание, подстройка, переход к заметкам)
   держат ритм шагом страницы, а не своими нижними отступами: свои 16 и 20px
   поверх общего шага давали между ними три разных провала. */
.page-shell:has(.artifact-grid) { gap: var(--space-4); }
.page-shell:has(.artifact-grid) > .stale-notice,
.page-shell:has(.artifact-grid) > .tailoring,
.page-shell:has(.artifact-grid) > .artifact-notes-jump { margin-bottom: 0; }
/* На очень узких viewports чуть сократим, чтобы не плодить много воздуха
   в маленьком окне. */
@media (max-width: 600px) {
    .page-shell { gap: var(--space-4); }
}

/* .admin-page-head/__row/__title/__lead удалены — ui_page_header делегирует
   к ui_section_header; живыми остались __counter/__progress (admin-метрики). */
.admin-page-head__counter {
    font-family: var(--font-sans); font-size: 0.875rem; letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.admin-page-head__progress {
    height: 4px; width: 100%; margin-top: var(--space-1);
    background: var(--color-bg-soft); border: 1px solid var(--color-border);
    border-radius: 2px; overflow: hidden;
}
.admin-page-head__progress-fill {
    display: block; height: 100%; background: var(--color-accent);
    transition: width 240ms ease;
}

/* ---------------------- Admin: Match log ---------------------- */
/* Дашборд решений резолвера: KPI strip + два side-by-side блока (распределение
   confidence через ui_share_cell + by-decision через ui_category_pill в data-
   table) + фильтры + основная таблица. Все «карточки» и «пилюли» — те же
   ui_kpi_card / ui_share_cell / ui_category_pill / ui_chip / ui_badge /
   ui_pagination, что и в AI Usage / Pipeline / Health: страница не вводит ни
   одного нового partial'а. */
.match-log { display: flex; flex-direction: column; gap: var(--space-4); }
.match-log__header h1 { margin: 0 0 0.3rem 0; }
.match-log__header p { margin: 0; }

.match-log__panel-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-2); margin-bottom: var(--space-3);
}
.match-log__panel-sub { font-size: 0.8125rem; }
.match-log__decisions-title { margin: 0; font-size: 1.125rem; }

/* Stacked-bar для confidence-distribution: одна горизонтальная полоса со
   четырьмя цветными сегментами (доля по бакетам). Под полосой — flex-легенда
   с цветными точками и абсолютными числами. Реализация полностью inline,
   нового partial'а не требует. */
.confbar {
    display: flex; height: 14px; width: 100%;
    border-radius: var(--radius-sm); overflow: hidden;
    background: var(--color-bg-soft); border: 1px solid var(--color-border);
}
/* Flex-shrink:0 нужен явно: без него flex-item с пустым контентом и
   inline `width: N%` сжимался до 0 (min-content на пустом span'е = 0).
   Сегменты и так задают ширину, ужимать их под содержимое не надо. */
.confbar__seg { display: block; height: 100%; flex: 0 0 auto; min-width: 0; transition: width 240ms ease; }
.confbar__seg--accent { background: var(--color-accent); }
.confbar__seg--amber  { background: var(--color-amber); }
.confbar__seg--teal   { background: var(--color-teal); }
/* На dark теме sage достаточно насыщенный — возвращаем семантический цвет
   (раньше был navy-hack для контраста на ivory). */
.confbar__seg--sage   { background: var(--color-sage); }

.confbar__legend {
    list-style: none; margin: var(--space-2) 0 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    font-family: var(--font-sans); font-size: 0.8125rem;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}
.confbar__legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.confbar__legend b { color: var(--color-text); font-weight: 600; }
.confbar__dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 2px;
}
.confbar__dot--accent { background: var(--color-accent); }
.confbar__dot--amber  { background: var(--color-amber); }
.confbar__dot--teal   { background: var(--color-teal); }
.confbar__dot--sage   { background: var(--color-sage); }

.match-log__decisions { display: flex; flex-direction: column; gap: var(--space-3); }
.match-log__conf { font-family: var(--font-sans); font-weight: 600; font-variant-numeric: tabular-nums; }
.match-log__candidates { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Best match как pill: имя + укороченный id моноширно. Подобрано в духе
   оригинального дашборда, но в нашей светлой палитре. */
.match-log__match-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.25rem 0.55rem;
    background: var(--color-bg-soft); border: 1px solid var(--color-border);
    border-radius: 999px; max-width: 100%;
}
.match-log__match-name { font-weight: 500; }
.match-log__match-id  { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.match-log__result code { font-family: var(--font-mono); font-size: 0.82rem; }
.match-log__result { color: var(--color-teal); text-decoration: none; }
.match-log__result:hover { text-decoration: underline; }

.match-log__filters {
    padding: var(--space-3); background: var(--color-bg-soft);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.match-log__filters-row {
    display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
}
.match-log__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 auto; }
.match-log__search { display: flex; gap: var(--space-2); align-items: center; margin-left: auto; }
.match-log__search input[type="search"] {
    font-family: var(--font-sans); font-size: 0.9375rem;
    padding: 0.45rem 0.7rem; min-height: 36px;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-text);
    min-width: 220px;
    font-variant-numeric: tabular-nums;
}

/* Match-log таблица: компактнее обычной data-table; имена работодателей
   моноширно, чтобы input/normalized было удобно читать как пары. */
.match-log__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.match-log__name { font-weight: 600; }
.match-log__name-norm,
.match-log__match-id { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.match-log__match-name { font-weight: 500; }
.data-table--compact th, .data-table--compact td { padding: 0.45rem 0.6rem; font-size: 0.875rem; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------- Admin: Moderation comparison ---------------------- */
/* UX повторяет оригинальный persium-aggregator dashboard: шапка с counter'ом
   справа → тонкий progress-bar → две колонки compare → панель из 3 кнопок
   с подписями шорткатов S/D/M снизу. Editorial light-палитра вместо тёмной
   темы оригинала. Никаких новых компонентов: ui_badge для статусов,
   ui_tag для aliases, обычная разметка <article> + CSS внутри. */
.moderation { display: flex; flex-direction: column; gap: var(--space-4); }

.moderation__compare {
    display: grid; gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Moderation card — переработана под информационную иерархию:
   1) status pills, 2) ОРИГИНАЛЬНОЕ имя (display, large serif), 3) latin
   canonical (italic, муcтый), 4) normalized (mono в dashed-pill'е),
   5) дополнительные оригиналы под <details>, 6) DL-блок aliases / vacancies.
   Старая раскладка ставила canonical-латиницу в роли заголовка — для
   модератора это менее читаемо, чем настоящее имя из bronze. */
.mod-card {
    position: relative;
    padding: var(--space-4) var(--space-4) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex; flex-direction: column;
    gap: var(--space-3);
    overflow: hidden;
}
.mod-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--color-border-soft);
}
.mod-card--review::before { background: var(--color-amber); }
.mod-card--match::before  { background: var(--color-sage); }

.mod-card__pills {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--space-2);
}
.mod-card__conf {
    display: inline-flex; align-items: baseline;
    gap: 0.2em;
    padding: 0.18rem 0.55rem;
    font-family: var(--font-sans); font-size: 0.8125rem;
    font-weight: 600; letter-spacing: 0;
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.08);
    border: 1px solid rgba(var(--color-accent-rgb), 0.32);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.mod-card__title-block { margin: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.mod-card__title {
    margin: 0;
    font-family: var(--font-display, serif);
    font-size: clamp(1.5rem, 3vw, 1.95rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--color-text);
    overflow-wrap: break-word;
    hyphens: auto;
}
.mod-card__title-latin {
    margin: 0;
    font-family: var(--font-display, serif);
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-text-muted);
}
.mod-card__normalized {
    align-self: flex-start;
    margin-top: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: var(--color-bg-soft);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-soft);
    word-break: break-all;
    user-select: all;
    font-variant-numeric: tabular-nums;
}

.mod-card__originals-extra { margin: 0; }
.mod-card__originals-extra summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex; align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-teal-deep, var(--color-teal));
    user-select: none;
    font-variant-numeric: tabular-nums;
}
.mod-card__originals-extra summary::-webkit-details-marker { display: none; }
.mod-card__originals-extra summary::before {
    content: "▸"; display: inline-block;
    transition: transform 140ms ease;
    font-size: 0.8125rem;
}
.mod-card__originals-extra[open] summary::before { transform: rotate(90deg); }
.mod-card__originals-count {
    padding: 0 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    letter-spacing: 0;
    text-transform: none;
}
.mod-card__originals-extra ul {
    list-style: none; margin: 0.4rem 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.mod-card__originals-extra li {
    padding-left: 0.85rem; position: relative;
    font-style: italic;
    color: var(--color-text);
    font-size: 0.9375rem;
}
.mod-card__originals-extra li::before {
    content: "·"; position: absolute; left: 0.2rem;
    color: var(--color-accent); font-weight: 700;
}

.mod-card__meta {
    margin: 0;
    display: flex; flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}
.mod-card__row {
    display: flex; flex-direction: column;
    gap: 0.4rem;
}
.mod-card__row dt {
    margin: 0;
    display: inline-flex; align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-teal-deep, var(--color-teal));
    font-variant-numeric: tabular-nums;
}
.mod-card__row dd { margin: 0; }
.mod-card__count {
    padding: 0 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--color-text);
    letter-spacing: 0;
    text-transform: none;
}
.mod-card__aliases { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mod-card__vacancies {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.25rem;
    font-size: 0.9375rem; color: var(--color-text);
}
.mod-card__vacancies li {
    padding-left: 0.85rem; position: relative;
}
.mod-card__vacancies li::before {
    content: "·"; position: absolute; left: 0.2rem;
    color: var(--color-text-muted); font-weight: 600;
}
.mod-card__empty { font-size: 0.875rem; }

.mod-card--empty {
    display: flex; align-items: center; justify-content: center;
    min-height: 280px;
}

/* Company detail page (/admin/companies/{id}) — переиспользует mod-card
   слева для имени/aliases/vacancies, справа — meta-панель с
   id/timestamps/version/merged-into. На мобиле два блока стекаются. */
.company-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-3);
}
@media (min-width: 900px) {
    .company-detail__layout {
        grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
        align-items: start;
    }
}
.company-detail__meta {
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex; flex-direction: column;
    gap: var(--space-3);
}
.company-detail__meta-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-teal-deep, var(--color-teal));
    font-variant-numeric: tabular-nums;
}

/* --- Corpus snapshots (admin eval-обвязка) --------------------------------
   Витрина/менеджмент срезов корпуса. Reuse surface-card + kpi-strip +
   danger-zone; ниже — только page-scoped связки. Токены везде. */

/* Failed-run error text inline in the list status cell. */
.snapshot-row__err {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.8125rem;
    max-width: 34ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Actions cell: разрядка ссылок вместо ручных middot-разделителей. */
.snapshot-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
/* Status/host meta row под шапкой detail/delete. */
.snapshot-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.875rem;
}
.snapshot-meta__id { font-size: 0.9375rem; }

/* Detail: сетка editorial-карточек манифеста. */
.snapshot-cards {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .snapshot-cards { grid-template-columns: 1fr 1fr; }
}
.snapshot-hint {
    margin: 0 0 var(--space-3);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
/* Key-value манифеста внутри карточки: тихий mono-лейбл слева, значение справа. */
.snapshot-kv { margin: 0; display: flex; flex-direction: column; }
.snapshot-kv__row {
    display: grid;
    grid-template-columns: minmax(9rem, 34%) 1fr;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    align-items: baseline;
}
.snapshot-kv__row + .snapshot-kv__row {
    border-top: 1px dashed var(--color-border);
}
.snapshot-kv dt {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.snapshot-kv dd { margin: 0; overflow-wrap: anywhere; }
.snapshot-kv__num { font-variant-numeric: tabular-nums; }
.snapshot-hash { font-size: 0.8125rem; }
/* Распределения версий извлечения — inline-чипы. */
.snapshot-dist { display: inline-block; margin-right: var(--space-2); white-space: nowrap; }
.snapshot-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Snapshot create/delete forms. */
.snapshot-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.snapshot-form__group { margin: 0; }
.snapshot-form__legend { margin-bottom: var(--space-3); }
.snapshot-form__flags {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.snapshot-form__flags--danger { margin-top: var(--space-3); }
.snapshot-form__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.snapshot-form__cancel { color: var(--color-text-muted); text-decoration: none; }
.snapshot-form__cancel:hover { text-decoration: underline; }
.company-detail__dl {
    margin: 0;
    display: flex; flex-direction: column;
    gap: var(--space-2);
}
.company-detail__dl-row {
    display: grid; gap: 0.25rem;
    grid-template-columns: 1fr;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-soft);
}
.company-detail__dl-row:last-child { border-bottom: none; padding-bottom: 0; }
.company-detail__dl-row dt {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.company-detail__dl-row dd {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text);
    word-break: break-all;
}
.company-detail__merge-link {
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px dashed var(--color-text-muted);
    transition: color 120ms ease, border-color 120ms ease;
}
.company-detail__merge-link:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.company-detail__conf {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.08);
    border: 1px solid rgba(var(--color-accent-rgb), 0.32);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
/* ---------------------- Admin: Company vacancies (карточка компании) ----
   Список gold-вакансий компании на /admin/companies/{id}. Editorial-
   плотный лист: title слева крупно, salary-stamp справа моноширью,
   chips-метаданные между ними. Каждый ряд — отдельная карточка с
   тонкой бежевой подложкой на hover, как у audit-таблицы. */
.company-vacancies {
    /* Вертикальный ритм — через page-shell gap; своего margin-top не несём. */
    display: block;
}
.company-vacancies__header {
    display: flex; align-items: baseline; gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.company-vacancies__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.75rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.4px;
    color: var(--color-text);
}
.company-vacancies__count {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
/* Editorial-плотная табличка как в встроенной admin-SPA aggregator'а:
   ID-чип, длинный title, category/level, дата создания. На мобиле —
   horizontal scroll (чтобы не ломать колонки) внутри обёртки. */
/* Vacancy-таблица компании — тонкое расширение .data-table: колоночные
   ширины + характерные ячейки (source-pill в id, серифный тайтл + city-chip,
   mono-дата). Базовая структура (рамка, th, hover, разделители) — из .data-table. */
.data-table--vacancies .col-id { width: 7rem; white-space: nowrap; }
.data-table--vacancies .col-title { min-width: 16rem; max-width: 32rem; }
.data-table--vacancies .col-mono {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.data-table--vacancies .col-date { width: 11rem; }
.vacancy-table__id-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    background: rgba(var(--color-text-muted-rgb, 107, 103, 96), 0.06);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    font-variant-numeric: tabular-nums;
}
.vacancy-table__id-link:hover {
    color: var(--color-text);
    background: rgba(var(--color-text-muted-rgb, 107, 103, 96), 0.12);
    border-color: var(--color-text-muted);
}
.vacancy-table__id-text { line-height: 1; }
.vacancy-table__id-icon {
    width: 11px; height: 11px;
    opacity: 0.65;
    transition: opacity 120ms ease, transform 120ms ease;
}
.vacancy-table__id-link:hover .vacancy-table__id-icon {
    opacity: 1;
    transform: translate(1px, -1px);
}
.vacancy-table__title-text {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}
.vacancy-table__city {
    display: inline-block;
    margin-left: 0.6rem;
    padding: 0.1rem 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    background: rgba(var(--color-text-muted-rgb, 107, 103, 96), 0.08);
    border-radius: 999px;
    vertical-align: 1px;
    font-variant-numeric: tabular-nums;
}

.moderation__actions {
    display: flex; justify-content: center; align-items: flex-start;
    gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-2) 0;
    /* Без фона/бордера — кнопки «плавают» как в оригинальном дашборде. Beige-
       панель раньше зрительно соревновалась с кнопками за внимание; на
       чистом фоне фокус остаётся на самих action'ах. */
}
.moderation__btn-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.moderation__btn { min-width: 160px; }
.moderation__shortcut {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; padding: 0 0.45rem;
    font-family: var(--font-sans); font-size: 0.8125rem;
    color: var(--color-text-muted); background: transparent;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

/* ---------------------- Admin: Health & Alerts ---------------------- */
/* Раскладка повторяет UX persium-aggregator dashboard: счётчик активных алертов
   в шапке → грид Source Health (директора как ui_kpi_card) → секция Alert
   History с filter-bar'ом по severity + data-table. Все «карточки» — это
   уже существующий ui_kpi_card, никаких новых компонентов специально для
   Health не вводим. */
.health { display: flex; flex-direction: column; gap: var(--space-5); }
.health__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.health__header h1 { margin: 0; }
.health__lead { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.health__section { display: flex; flex-direction: column; gap: var(--space-3); }
.health__subhead h2 { margin: 0 0 0.2rem 0; }
.health__subhead p { margin: 0; font-size: 0.9375rem; }
.health__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Source-карточки чуть плотнее обычного ops-row: на десктопе ровно 4 в ряд (директоров
   у нас 9 — три аккуратных строки), вместо auto-fit 200px минимума. На
   узком экране — 2 в ряд, на мобильном — 1. Селектор `.ops-row.health__sources`
   нужен для специфичности: .ops-row объявлен ниже в файле и перекрыл бы
   single-class `.health__sources` по каскаду. */
.ops-row.health__sources { grid-template-columns: 1fr; }
@media (min-width: 600px)  { .ops-row.health__sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ops-row.health__sources { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------- Admin: AI Usage dashboard ---------------------- */
/* Раскладка повторяет UX оригинального persium-aggregator dashboard: полоса
   фильтров → KPI-стрипа → bar+donut → таблица breakdown. Всё в editorial
   палитре кабинета, тёмную тему оригинала намеренно не повторяем. */
.ai-usage { display: flex; flex-direction: column; gap: var(--space-5); }
.ai-usage__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ai-usage__header h1 { margin: 0; }

.ai-usage__filters,
.admin-filter-bar {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    padding: var(--space-3); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); background: var(--color-bg-soft);
    align-items: end;
}
.ai-usage__presets { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ai-usage__custom { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-left: auto; align-items: end; }
.ai-usage__date,
.admin-filter-bar__field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; min-width: 0; }
.ai-usage__date-label,
.admin-filter-bar__label {
    font-family: var(--font-sans); font-size: 0.8125rem;
    letter-spacing: 0; text-transform: none; color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ai-usage__date input[type="date"],
.admin-filter-bar input[type="date"],
.admin-filter-bar input[type="text"],
.admin-filter-bar input[type="search"],
.admin-filter-bar select {
    font-family: var(--font-sans); font-size: 0.9375rem;
    padding: 0.45rem 0.6rem; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text);
    min-height: 36px;
    font-variant-numeric: tabular-nums;
}
.admin-filter-bar__actions { display: flex; gap: var(--space-2); margin-left: auto; align-self: end; }
/* Флажок в ряду фильтра стоит по нижней линии полей, а пояснение под рядом
   (период по умолчанию, что попадёт в выгрузку) — тише подписей. */
.admin-filter-bar__field--check { justify-content: flex-end; }
.admin-filter-bar__note { margin: 0 0 var(--space-3); font-size: 0.8125rem; }
/* Список платежей: одиннадцать смысловых полей в девять колонок. Ячейки не
   переносятся (сумма, шлюз и код, разорванные посередине, читаются хуже),
   вторичное — второй строкой в той же ячейке: попытка и её шлюз под заказом,
   кто платит под видом, время под датой. Шире экрана — прокрутка обёртки. */
.data-table--payments th, .data-table--payments td { white-space: nowrap; }
.cell-sub { display: block; margin-top: 0.125rem; font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); }
@media (max-width: 600px) {
    .ai-usage__filters,
    .admin-filter-bar { flex-direction: column; align-items: stretch; }
    .admin-filter-bar__actions { margin-left: 0; }
    .admin-filter-bar__field input,
    .admin-filter-bar__field select { width: 100%; }
}

/* ui_chip — pill-кнопка фильтра. Используется в AI Usage filter-bar. */
/* Чип — одно семейство на весь продукт: ui_chip (ярлык, фильтр, действие),
   chip-radio (выбор одного), chips-input (введённое значение). До 17.09 первый
   был моноширинным, мельче и прямоугольным, а два других — антиквой, крупнее и
   пилюлями: на форме сборки резюме два ряда чипов подряд читались как два
   разных компонента. Гарнитура здесь не несёт смысла — в чипах стоят слова
   («Под рекрутёра», «Технический директор»), а не коды; моноширинный остаётся
   там, где он и уместен: у чисел и у надзаголовков. */
.ui-chip {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--font-size-sm);
    /* На пальце чип нажимается как кнопка (WCAG 2.5.5); 36px — мышиные ширины. */
    padding: 0.5rem 0.85rem; min-height: var(--tap-min);
    border: 1px solid var(--color-border); border-radius: var(--radius-pill);
    background: var(--color-surface); color: var(--color-text-soft);
    text-decoration: none;
    cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s var(--ease-spring);
}
/* Счётчик — справка «сколько там», а не призыв: моноширинный, приглушённый,
   без собственного фона (акцент остаётся у активного чипа). */
.ui-chip__count {
    margin-left: 0.45rem;
    /* Счётчик — цифры, и им моноширинный нужен: в ряду фильтров числа стоят
       столбцом, а не пляшут по ширине глифа. */
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.ui-chip--active .ui-chip__count { color: currentColor; opacity: 0.75; }
.ui-chip:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .ui-chip:active { transform: none; } }
.ui-chip:hover { border-color: var(--color-text-muted); }
.ui-chip--active {
    background: var(--color-accent); color: var(--color-accent-text); border-color: var(--color-accent);
}
.ui-chip--apply {
    background: var(--color-accent); color: var(--color-accent-text); border-color: var(--color-accent);
}
.ui-chip--apply:hover { background: var(--color-accent-deep); border-color: var(--color-accent); }
/* Десктопной компактности у чипа больше нет: пока он был моноширинным и
   прямоугольным, разница в 36 против 44 не читалась, а после сведения
   семейства она осталась единственным различием — два ряда чипов на одной
   форме выглядели рассинхроном. 44px мыши не мешают, а тач получает верную
   зону на любой ширине. */
.ui-chip[disabled], .ui-chip[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ui_chip_group — ряд независимых action-чипов с опциональным mono-eyebrow. */
.ui-chip-group { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-chip-group__eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.ui-chip-group__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* В группе чип-кнопки могут нести спиннер (aria-busy) при async-операции. */
.ui-chip[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* --------------------------- KPI strip (organism) --------------------- */
/* Единая grid-обёртка для группы ui_kpi_card. Используется на admin-дашбордах
   (AI Usage, Match log, Parser overview, Pipeline ops). Auto-fit заполняет
   доступную ширину, минимум 200px на карточку.
   Старые имена `.ai-usage__kpis`, `.ops-row`, `.parser-overview__kpis`
   оставлены как алиасы на одну итерацию для подстраховки — удалим после
   следующего деплоя, если не всплывут регрессии. */
.kpi-strip,
.ai-usage__kpis,
.ops-row,
.parser-overview__kpis {
    display: grid; gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ui_kpi_card — единый компонент для admin metric-карточек.
   Используется и в AI Usage KPI strip, и в Pipeline ops row.
   Variant определяет цвет акцентной полосы сверху и значения. */
.kpi-card {
    /* --kpi-rgb override-ится в .kpi-card--{accent}; используется для
       top-streak, accent-glow вокруг карточки и tint фона. */
    /* нейтральная карточка — без оттенка: фолбэк 31,41,55 (токена
       --color-border-soft-rgb нет) давал тёмный размытый мазок сверху */
    --kpi-rgb: 255, 255, 255;
    position: relative;
    padding: clamp(var(--space-4), 2vw, var(--space-5));
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(var(--kpi-rgb), 0.08) 0%, transparent 55%),
        var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column; gap: 0.4rem;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
    isolation: isolate;
}
/* Top light-streak — премиум-сигнатура карточки. Заменяет старый 3px-bar
   тонкой светящейся «линзой» в accent-цвете. */
/* Световая линия над карточкой снята: на светлой теме она читалась тёмным
   размытым мазком, как грязь на экране. */
/* подпись после числа — форма слова («4 позиции»); прописную давал капс,
   без него первая буква поднимается здесь */
.kpi-card__label::first-letter { text-transform: uppercase; }
.kpi-card::before {
    content: none;
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--kpi-rgb), 0) 8%,
        rgba(var(--kpi-rgb), 0.80) 50%,
        rgba(var(--kpi-rgb), 0) 92%,
        transparent 100%);
    filter: drop-shadow(0 0 6px rgba(var(--kpi-rgb), 0.55));
    pointer-events: none;
    z-index: 1;
}
.kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--kpi-rgb), 0.40);
    box-shadow:
        0 14px 28px -14px rgba(0, 0, 0, 0.55),
        0 0 40px -10px rgba(var(--kpi-rgb), 0.35);
}
/* Per-accent overrides — переключают --kpi-rgb. Цветная полоска и halo
   подбираются автоматически из этой одной переменной. */
.kpi-card--sage   { --kpi-rgb: var(--color-sage-rgb); }
.kpi-card--amber  { --kpi-rgb: var(--color-amber-rgb); }
.kpi-card--teal   { --kpi-rgb: var(--color-teal-rgb); }
/* `navy` исторически был «тёмный» вариант на ivory-фоне. На dark теме —
   синоним violet. */
.kpi-card--navy   { --kpi-rgb: var(--color-violet-rgb); }
.kpi-card--violet { --kpi-rgb: var(--color-violet-rgb); }
.kpi-card--accent { --kpi-rgb: var(--color-accent-rgb); }
.kpi-card__label {
    font-family: var(--font-sans); font-size: 0.8125rem;
    letter-spacing: 0; text-transform: none; color: var(--color-text-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.kpi-card__value {
    font-family: var(--font-sans); font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight: 600; line-height: 1.05; color: var(--color-text);
    letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.kpi-card--sage   .kpi-card__value { color: var(--color-sage); }
.kpi-card--amber  .kpi-card__value { color: var(--color-amber); }
.kpi-card--teal   .kpi-card__value { color: var(--color-teal); }
.kpi-card--navy   .kpi-card__value { color: var(--color-violet); }
.kpi-card--violet .kpi-card__value { color: var(--color-violet); }
.kpi-card--accent .kpi-card__value { color: var(--color-accent); }
.kpi-card__value--good   { color: var(--color-success) !important; }
.kpi-card__value--bad    { color: var(--color-danger) !important; }
.kpi-card__value--muted  { color: var(--color-text-muted) !important; font-weight: 400; }
.kpi-card__value-suffix {
    font-size: 0.6em; color: var(--color-text-muted); font-weight: 400;
}
.kpi-card__sub  { font-size: 0.875rem; color: var(--color-text-muted); }
.kpi-card__extra {
    margin-top: 0.4rem; font-family: var(--font-sans); font-size: 0.8125rem;
    color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 0.4rem;
    font-variant-numeric: tabular-nums;
}

.ai-usage__charts {
    display: grid; gap: var(--space-4);
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
@media (max-width: 900px) {
    .ai-usage__charts { grid-template-columns: 1fr; }
}
.chart-card {
    position: relative;
    padding: var(--space-4);
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(var(--color-accent-rgb), 0.06) 0%, transparent 55%),
        var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
}
.chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--streak-violet);
    filter: drop-shadow(0 0 6px rgba(var(--color-accent-rgb), 0.55));
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}
.chart-card__title {
    margin: 0 0 var(--space-3); font-family: var(--font-sans);
    font-size: 0.8125rem; letter-spacing: 0; text-transform: none;
    color: var(--color-text-muted); font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.chart-card__canvas-wrap { position: relative; height: 320px; }
.chart-card__canvas-wrap--donut { height: 320px; }

.ai-usage__breakdown {
    padding: var(--space-4); background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.ai-usage__breakdown-header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-3); margin-bottom: var(--space-3);
}
.ai-usage__breakdown-header h2 { margin: 0; font-size: 1.125rem; }
.data-table--breakdown td.num,
.data-table--breakdown th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table--breakdown tfoot th,
.data-table--breakdown tfoot td { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* ui_category_pill — pill-метка категории в табличных ячейках. */
.category-pill {
    display: inline-block; padding: 0.2rem 0.55rem;
    font-family: var(--font-sans); font-size: 0.8125rem;
    border-radius: 999px; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.category-pill--teal   { color: var(--color-teal);  background: rgba(var(--color-teal-rgb), 0.08);  border: 1px solid rgba(var(--color-teal-rgb), 0.25); }
.category-pill--sage   { color: var(--color-sage);  background: rgba(var(--color-sage-rgb), 0.08);  border: 1px solid rgba(var(--color-sage-rgb), 0.3); }
.category-pill--amber  { color: var(--color-amber);      background: rgba(var(--color-amber-rgb), 0.08);          border: 1px solid rgba(var(--color-amber-rgb), 0.3); }
.category-pill--violet { color: var(--color-violet);     background: rgba(var(--color-violet-rgb), 0.08);          border: 1px solid rgba(var(--color-violet-rgb), 0.3); }
.category-pill--accent { color: var(--color-accent); background: rgba(var(--color-accent-rgb), 0.08); border: 1px solid rgba(var(--color-accent-rgb), 0.25); }

/* ui_share_cell — inline-доля% + тонкий bar для табличных ячеек. */
.share-cell { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 110px; justify-content: flex-end; }
.share-cell__pct { font-family: var(--font-sans); font-size: 0.875rem; color: var(--color-text-soft); font-variant-numeric: tabular-nums; }
.share-cell__bar {
    display: inline-block; width: 60px; height: 4px;
    background: var(--color-border-soft); border-radius: 2px; overflow: hidden;
}
.share-cell__bar-fill { display: block; height: 100%; }
.share-cell__bar-fill--sage   { background: var(--color-sage); }
.share-cell__bar-fill--teal   { background: var(--color-teal); }
.share-cell__bar-fill--amber  { background: var(--color-amber); }
.share-cell__bar-fill--violet { background: var(--color-violet); }
.share-cell__bar-fill--accent { background: var(--color-accent); }

td.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }

/* ---------------------- Admin: Pipeline dashboard ---------------------- */
/* Раскладка повторяет UX оригинального persium-aggregator dashboard:
   funnel из 5 stage-карточек (Raw → Enrichment → Bronze → Silver → Gold)
   с connector-стрелками, ниже две enrichment-карточки (HH + LinkedIn) с
   5 узлами и прогресс-барами, и три ops-карточки (Sources, AI Cost, Batches).
   Все цвета — через токены editorial-палитры; тёмную тему оригинала
   намеренно НЕ копируем — она бы выбилась из остального кабинета.

   Ассоциация цветов со стадиями:
     raw        — teal     (входной поток)
     enrichment — sage     (приращение)
     bronze     — amber    (минералогический металлический оттенок)
     silver     — violet   (вторая обогащённая стадия)
     gold       — accent   (финальная, совпадает с brand-coral) */

.pipeline { display: flex; flex-direction: column; gap: var(--space-5); }
.pipeline__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.pipeline__header h1 { margin: 0; }

/* --- Funnel ------------------------------------------------------------ */

.pipeline-funnel {
    display: grid;
    /* 5 stage-карточек + 4 connector'а: stage-cells растягиваются равномерно
       (1fr), connector-cells — auto (минимальная ширина). Это держит funnel
       строго в одну строку и не даёт connector'ам "съесть" место у карточек. */
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow-x: auto; /* на узких экранах funnel scroll'ится горизонтально, не ломается */
}
@media (max-width: 900px) {
    /* На мобильном/планшете funnel переходит в вертикальную колонку,
       connector'ы скрываются (для них нужен горизонтальный flow). */
    .pipeline-funnel {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .pipeline-funnel .pipeline-conn { display: none; }
}

.stage {
    position: relative;
    padding: clamp(0.7rem, 1.2vw, 1rem) clamp(0.5rem, 1vw, 0.85rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-width: 0; /* критично: иначе grid-1fr cell растягивается под содержимое */
    min-height: 130px;
    display: flex; flex-direction: column; gap: 0.35rem;
    align-items: center; justify-content: center;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stage:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stage--off { opacity: 0.55; filter: grayscale(0.4); }

.stage--raw        { border-color: rgba(var(--color-teal-rgb), 0.35); background: rgba(var(--color-teal-rgb), 0.04); }
.stage--enrichment { border-color: rgba(var(--color-sage-rgb), 0.4);  background: rgba(var(--color-sage-rgb), 0.06); border-style: dashed; }
.stage--bronze     { border-color: rgba(var(--color-amber-rgb), 0.35);          background: rgba(var(--color-amber-rgb), 0.05); }
.stage--silver     { border-color: rgba(var(--color-violet-rgb), 0.3);           background: rgba(var(--color-violet-rgb), 0.04); }
.stage--gold       { border-color: rgba(var(--color-accent-rgb), 0.35); background: rgba(var(--color-accent-rgb), 0.04); }

.stage__name {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.stage--raw        .stage__name { color: var(--color-teal); }
.stage--enrichment .stage__name { color: var(--color-sage); }
.stage--bronze     .stage__name { color: var(--color-amber); }
.stage--silver     .stage__name { color: var(--color-violet); }
.stage--gold       .stage__name { color: var(--color-accent); }

.stage__count {
    font-family: var(--font-sans);
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    /* Группировки разрядов через тонкий пробел не делаем — пусть число
       стоит компактно ("63094"), как и в нашей таблице AI Usage. */
}

.stage__pending,
.stage__processing {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.2;
}
.stage__processing { color: var(--color-amber); font-weight: 500; }

.stage__bar {
    margin-top: 0.4rem;
    width: 80%;
    height: 4px;
    background: var(--color-border-soft);
    border-radius: 2px;
    overflow: hidden;
}
.stage__bar-fill {
    display: block;
    height: 100%;
    background: var(--color-sage);
    border-radius: 2px;
    transition: width 0.4s ease;
}
.stage__pct {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-sage);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* Sources ribbon (X/3) на Raw — диагональная плашка в углу. */
.stage__ribbon {
    position: absolute; top: 8px; right: -22px;
    transform: rotate(35deg);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0;
    padding: 2px 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-variant-numeric: tabular-nums;
}

/* Connector между stage-карточками: тонкая линия + стрелка + два точечных
   "огонька" для активного потока. Без анимации, если pending=0 (нет flow). */
.pipeline-conn {
    /* Линия — absolute, центрируется через top:50%. Стрелка — обычный
       flex-child, прижата к правому краю (justify-content: flex-end), так
       что глиф `›` упирается в следующую карточку, а не висит в центре
       между двумя animation-точками. align-items: center даёт вертикальное
       центрирование, дальше его донастраивает margin-top на самой стрелке
       (см. ниже — у глифа кривой baseline). */
    position: relative;
    width: clamp(36px, 4vw, 56px);
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
}
.pipeline-conn__line {
    position: absolute;
    top: 50%;
    left: 6px;
    right: 6px;
    height: 1px;
    transform: translateY(-50%);
    background: var(--color-border);
    transition: background 0.4s;
}
.pipeline-conn__arrow {
    /* Обычный flex-child — flex-контейнер сам центрирует. position: relative
       с z-index'ом 1 поднимает стрелку над абсолютной линией. line-height: 1
       убирает паразитный baseline-padding глифа `›`. margin-top: -2px —
       та же визуальная компенсация, что и в оригинале persium-aggregator
       dashboard: глиф `›` имеет baseline в нижней трети em-box, поэтому
       при align-items: center он визуально оказывается ниже линии. Минус
       поднимает стрелку обратно на уровень линии. */
    position: relative;
    z-index: 1;
    margin-top: -3px;
    color: var(--color-border);
    font-family: var(--font-sans);
    font-size: 1.125rem;
    line-height: 1;
    font-weight: 300;
    opacity: 0.6;
    transition: color 0.4s, opacity 0.4s;
    font-variant-numeric: tabular-nums;
}
.pipeline-conn__particle {
    /* Tracker-точки бегут вдоль линии — позиционируем от центра по той же
       логике, что и стрелка, чтобы они сидели поверх линии. */
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-teal);
    transform: translateY(-50%);
    opacity: 0;
}
.pipeline-conn--active .pipeline-conn__line {
    background: linear-gradient(90deg, rgba(var(--color-teal-rgb), 0.5), rgba(var(--color-sage-rgb), 0.5));
}
.pipeline-conn--active .pipeline-conn__arrow { color: var(--color-teal); opacity: 0.85; }
.pipeline-conn--active .pipeline-conn__particle {
    animation: pipeline-flow 2s ease-in-out infinite;
}
.pipeline-conn--active .pipeline-conn__particle--lag { animation-delay: 1s; }
@keyframes pipeline-flow {
    0%   { left: 0;   opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pipeline-conn__particle { animation: none !important; }
}

/* --- Enrichment cards (HH + LinkedIn) ---------------------------------- */

.enrich-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 1100px) {
    .enrich-row { grid-template-columns: 1fr; }
}

.enrich-card {
    position: relative;
    padding: var(--space-4);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.enrich-card--off { opacity: 0.6; }
.enrich-card__ribbon {
    position: absolute; top: 12px; right: -32px;
    transform: rotate(35deg);
    background: var(--color-text-muted);
    color: var(--color-bg);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0;
    padding: 3px 36px;
    font-variant-numeric: tabular-nums;
}
.enrich-card__header {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
    margin-bottom: var(--space-3);
}
.enrich-card__title {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-teal);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.enrich-card__subtitle {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.enrich-flow {
    display: grid;
    grid-template-columns: repeat(9, auto);
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    margin-bottom: var(--space-3);
    padding-bottom: 0.5rem;
}
@media (max-width: 720px) {
    .enrich-flow { grid-template-columns: 1fr; }
    .enrich-flow .enrich-arrow { display: none; }
}

.enrich-node {
    min-width: 110px;
    padding: 0.7rem 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-align: center;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.enrich-node--raw        { border-color: rgba(var(--color-teal-rgb), 0.3); }
.enrich-node--pending    { border-color: rgba(var(--color-amber-rgb), 0.3); }
.enrich-node--processing { border-color: rgba(var(--color-violet-rgb), 0.3); }
.enrich-node--enriched   { border-color: rgba(var(--color-sage-rgb), 0.4); }
.enrich-node--bronze     { border-color: rgba(var(--color-amber-rgb), 0.3); }

.enrich-node__label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.enrich-node--raw        .enrich-node__label { color: var(--color-teal); }
.enrich-node--pending    .enrich-node__label { color: var(--color-amber); }
.enrich-node--processing .enrich-node__label { color: var(--color-violet); }
.enrich-node--enriched   .enrich-node__label { color: var(--color-sage); }
.enrich-node--bronze     .enrich-node__label { color: var(--color-amber); }

.enrich-node__value {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.enrich-node__sub {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.2;
}

.enrich-arrow {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 1.5px solid var(--color-border);
    border-right: 1.5px solid var(--color-border);
    transform: rotate(45deg);
    user-select: none;
}

.enrich-progress {
    display: grid;
    grid-template-columns: 60px 1fr 50px;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
}
.enrich-progress__label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.enrich-progress__bar {
    display: block; height: 6px;
    background: var(--color-border-soft);
    border-radius: 3px; overflow: hidden;
}
.enrich-progress__fill {
    display: block; height: 100%;
    transition: width 0.4s ease;
}
.enrich-progress__fill--raw {
    background: linear-gradient(90deg, var(--color-teal), var(--color-sage));
}
.enrich-progress__fill--bronze {
    background: linear-gradient(90deg, var(--color-amber), var(--color-sage));
}
.enrich-progress__pct {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Ops row uses ui_kpi_card directly; legacy .ops-card removed. ----- */

.ops-flag {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}
.ops-flag--on  { color: var(--color-sage); }
.ops-flag--off { color: var(--color-text-muted); text-decoration: line-through; }
.ops-flag--sep { color: var(--color-border); margin: 0 0.15rem; }
.ops-flag--violet { color: var(--color-violet); }
.ops-extra__num { color: var(--color-text); font-weight: 500; }

/* Error-страницы (404/403/500): empty-state на полную страницу с воздухом
   сверху и снизу, чтобы блок не прижимался к навигации public-layout. */
.empty-state--page {
    margin-block: clamp(2rem, 6vw, 4rem);
}

/* Сокращённый ID в data-table (audit, csp). Полный ID — в title attribute. */
.mono-id {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    background: var(--color-bg-soft);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    cursor: help;
    white-space: nowrap;
}

/* user-cell — обогащённый рендер actor/target в audit-таблице:
   email сверху, имя строчкой ниже. На мобиле email всё ещё переносится,
   но без word-break — на длинном email колонка может стать чуть шире. */
.user-cell { display: inline-flex; flex-direction: column; line-height: 1.25; }
.user-cell__email {
    font-size: 0.9375rem;
    color: var(--color-text);
    word-break: break-word;
}
.user-cell__name {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* --------------------------- Security banner ------------------------- */
/* Нотификационная полоса под топбаром: новое устройство, подозрительный
   вход и т.п. Тонкая amber-tinted strip с явным CTA «Сменить пароль» и
   крестиком закрытия. Жёстко sticky сверху мы её НЕ делаем — приоритет
   контенту страницы, banner поедет с прокруткой. */
.security-banner {
    background: linear-gradient(180deg, rgba(var(--color-amber-rgb), 0.12) 0%, rgba(var(--color-amber-rgb), 0.06) 100%);
    border-bottom: 1px solid rgba(var(--color-amber-rgb), 0.28);
    color: var(--color-text);
}
.security-banner__inner {
    max-width: var(--bp-xl);
    margin: 0 auto;
    padding: 0.65rem clamp(1rem, 4vw, 2rem);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.security-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 999px;
    background: rgba(var(--color-amber-rgb), 0.18);
    color: var(--color-amber);
    flex: 0 0 auto;
}
.security-banner__copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    flex: 1 1 12rem;
    min-width: 0;
}
.security-banner__title {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
}
.security-banner__body {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.security-banner__cta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(var(--color-amber-rgb), 0.4);
    background: var(--color-surface);
    border-radius: 999px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
    flex: 0 0 auto;
}
.security-banner__cta:hover {
    background: rgba(var(--color-amber-rgb), 0.14);
    border-color: var(--color-amber);
}
.security-banner__cta-icon { transition: transform 140ms ease; }
.security-banner__cta:hover .security-banner__cta-icon { transform: translateX(2px); }
.security-banner__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    margin-left: auto;
    padding: 0;
    border: 0; background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 999px;
    transition: background 120ms ease, color 120ms ease;
    flex: 0 0 auto;
}
.security-banner__close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text);
}
.security-banner__close:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}
.security-banner.security-banner--leaving {
    animation: security-banner-out 220ms ease forwards;
    pointer-events: none;
}
@keyframes security-banner-out {
    to { opacity: 0; transform: translateY(-4px); max-height: 0; padding: 0; }
}
@media (max-width: 600px) {
    .security-banner__inner { padding: 0.6rem var(--space-4); gap: var(--space-2); }
    .security-banner__close { margin-left: 0; }
}

/* --------------------------- Modal / Bottom-sheet -------------------- */

.modal[hidden] { display: none; }
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: var(--space-4);
}
.modal__panel {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    max-width: 480px;
    width: 100%;
    box-shadow: var(--shadow-lg);
}

.bottom-sheet[hidden] { display: none; }
.bottom-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--color-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-5);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0));
    box-shadow: var(--shadow-lg);
    z-index: 80;
}
@media (min-width: 768px) {
    .bottom-sheet {
        position: absolute;
        left: auto; right: 0; bottom: auto; top: 100%;
        max-width: 360px;
        border-radius: var(--radius-md);
    }
}

/* --------------------------- Off-canvas drawer ------------------------ */
/* CSS-only mobile drawer: <input type="checkbox" id="nav-toggle" hidden> +
   <label for="nav-toggle">. JS опционально для swipe/Esc-close. */

.drawer {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(85vw, 360px);
    background: var(--color-surface);
    transform: translateX(-105%);
    transition: transform 200ms ease;
    z-index: 90;
    padding: calc(var(--space-5) + env(safe-area-inset-top, 0)) var(--space-5) var(--space-5);
    overflow-y: auto;
}

.drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 85;
}

/* Тень — только у открытого меню. Закрытое стоит за левым краем экрана с
   z-index 90, и его тень (размытие 64px) заходила в экран полосой поверх
   всего — на каждом нижнем листе слева лежал серый градиент. */
#nav-toggle:checked ~ .drawer { transform: translateX(0); box-shadow: var(--shadow-lg); }
#nav-toggle:checked ~ .drawer__backdrop { opacity: 1; pointer-events: auto; }

@media (min-width: 768px) {
    .drawer { transform: none; position: static; width: auto; padding: 0; box-shadow: none; background: transparent; }
    .drawer__backdrop { display: none; }
    .nav-toggle-button { display: none; }
    /* На десктопе drawer-menu теряет drawer-шапку/футер и становится
       горизонтальным inline-меню. group-label, user-блок, logout, chevron,
       divider, eyebrow — sidebar/drawer-only элементы, прячем. */
    .drawer--menu .drawer-menu__header,
    .drawer--menu .drawer-menu__group,
    .drawer--menu .drawer-menu__user,
    .drawer--menu .drawer-menu__logout,
    .drawer--menu .drawer-menu__divider,
    .drawer--menu .nav-list__chevron,
    .drawer--menu .nav-list__icon { display: none; }
    .drawer--menu { display: flex; align-items: center; gap: var(--space-3); }
    .drawer--menu .nav-list { flex-direction: row; gap: var(--space-3); }
    .drawer--menu .nav-list__item a { padding: var(--space-2) var(--space-3); }
    .drawer--menu .drawer-menu__footer { display: inline-flex; gap: var(--space-2); }
    .drawer--menu .drawer-menu__footer .btn--full { width: auto; padding: 0.5rem 0.9rem; }
}

/* Mobile drawer для публичного nav — стандартизирован под `app-sidebar`
   из b2c/admin: шапка с брендом и ✕, group-label'ы перед каждым блоком,
   nav-list с Lucide-иконками и активным navy-pill'ом, footer с avatar+email
   и logout (для гостя — register/login CTA). */
@media (max-width: 767.98px) {
    /* Внутренний padding такой же, как у `.app-sidebar` на мобиле: горизонталь
       --space-4 (а не --space-5 от базового .drawer) — иначе у публичного меню
       рамки толще, чем у кабинета, и пилюли пунктов выглядят узкими. */
    .drawer--menu.drawer {
        padding: calc(var(--space-5) + env(safe-area-inset-top, 0)) var(--space-4) var(--space-5);
    }
    .drawer--menu {
        background: var(--color-bg);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }
    .drawer-menu__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: var(--space-3);
        margin-bottom: var(--space-2);
        border-bottom: 1px solid var(--color-border);
    }
    /* Close-button в circle frame (как на референсе): тонкая обводка,
       прозрачный фон, hover — accent. Заменяет дефолтную nav-toggle-button. */
    .drawer-menu__close-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: 1px solid var(--color-border);
        background: transparent;
        color: var(--color-text-soft);
        cursor: pointer;
        transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
    }
    .drawer-menu__close-btn:hover {
        border-color: rgba(var(--color-accent-rgb), 0.55);
        color: var(--color-accent);
        background: rgba(var(--color-accent-rgb), 0.06);
    }
    .drawer--menu .nav-list { flex-direction: column; gap: 0; margin: 0 0 var(--space-2); padding: 0; list-style: none; align-items: stretch; }
    .drawer--menu .nav-list__item { display: block; text-align: left; }
    /* `.tap-target` принудительно ставит `justify-content: center` на всех
       тач-кнопках. Внутри drawer-menu нам нужен sidebar-look с иконкой+текстом
       по левому краю — повышаем специфичность через `a.tap-target` чтобы
       перекрыть утилитарный класс. Те же значения, что в `.app-sidebar`. */
    .drawer--menu .nav-list__item a,
    .drawer--menu .nav-list__item a.tap-target {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.875rem;
        padding: 0.55rem 0.875rem;
        margin: 0.2rem 0;
        border-radius: var(--radius-md);
        font-family: var(--font-sans);
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-text);
        transition: background 150ms ease, color 150ms ease;
        min-width: 0;
        min-height: 42px;
        text-decoration: none;
        width: 100%;
        text-align: left;
    }
    .drawer--menu .nav-list__item a:hover { background: var(--color-bg-deep); }
    .drawer--menu .nav-list__item a[aria-current="page"] {
        background: rgba(var(--color-accent-rgb), 0.14);
        color: var(--color-accent);
    }
    .drawer--menu .nav-list__item a[aria-current="page"] .nav-list__icon { color: var(--color-accent); }
    .drawer--menu .nav-list__icon { color: var(--color-accent); flex-shrink: 0; }
    /* Chevron-right справа в каждом пункте drawer-меню (по образцу target).
       Через `margin-left: auto` прижимается к правому краю; цвет muted. */
    .drawer--menu .nav-list__chevron {
        margin-left: auto;
        color: var(--color-text-muted);
        flex-shrink: 0;
    }
    .drawer--menu .nav-list__item a[aria-current="page"] .nav-list__chevron { color: var(--color-accent); }
    /* Тонкий разделитель между navigation и login (для гостя) или между
       блоками для авторизованного. */
    .drawer-menu__divider {
        border: none;
        border-top: 1px solid var(--color-border);
        margin: var(--space-3) 0;
    }
    .drawer-menu__footer {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-top: auto;
        padding-top: var(--space-4);
        border-top: 1px solid var(--color-border);
    }
    /* Авторизованный footer на мобиле: user-link + logout-btn (CTA «Кабинет»
       прячем — пользователь и так дойдёт через nav-list пункт «Кабинет»). */
    .drawer--menu .drawer-menu__user + * { margin-top: 0; }
    /* Drawer-CTA pill для гостя: «Построить карьерную карту» с trending-up.
       Заменяет старый login+register пару — единый акцент. */
    .drawer-menu__cta.btn {
        border-radius: 999px;
        background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-deep) 100%);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.12) inset,
            0 -1px 0 rgba(0, 0, 0, 0.20) inset,
            0 10px 28px -10px rgba(var(--color-accent-rgb), 0.75),
            0 0 40px -8px rgba(var(--color-accent-rgb), 0.50);
    }
}

/* Group-label общий: sidebar-style eyebrow перед каждым блоком nav-list.
   Используется и в `.app-sidebar` (b2c/admin), и в публичном drawer-меню
   на мобиле — единый стиль. */
.nav-list__group {
    margin: var(--space-2) 0 var(--space-1);
    padding: 0 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* --------------------------- Navigation ------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) 0;
    padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0));
}
.site-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.nav-list__item a {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
}
.nav-list__item a[aria-current="page"] {
    background: var(--color-bg);
    font-weight: 700;
}

@media (min-width: 768px) {
    .nav-list { flex-direction: row; align-items: center; gap: var(--space-3); }
    .nav-list__item a { padding: var(--space-2) var(--space-3); min-height: 36px; }
}

/* Hamburger toggle. */
.nav-toggle-button {
    width: var(--tap-min);
    height: var(--tap-min);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    cursor: pointer;
}
.nav-toggle-button .icon { display: block; vertical-align: top; }

/* --------------------------- Responsive table ------------------------- */

.responsive-table { width: 100%; border-collapse: collapse; }
.responsive-table th, .responsive-table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
@media (max-width: 767px) {
    .responsive-table thead { display: none; }
    .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td {
        display: block;
        width: 100%;
    }
    .responsive-table tr {
        margin-bottom: var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--space-3);
    }
    .responsive-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: var(--color-text-muted);
        font-size: 0.8125rem;
        margin-bottom: var(--space-1);
    }
}

/* --------------------------- Footer ---------------------------------- */

.site-footer {
    margin-top: var(--space-8);
    padding: var(--space-6) 0;
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* --------------------------- Styleguide ------------------------------ */

/* Двухколоночная раскладка: sticky TOC слева, секции справа. На мобильном
   TOC уходит в горизонтальный scroll-row перед контентом. */
.sg-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-5);
}
@media (min-width: 960px) {
    .sg-layout {
        grid-template-columns: 16rem minmax(0, 1fr);
        align-items: start;
    }
    .sg-toc { position: sticky; top: var(--space-4); max-height: calc(100vh - var(--space-6)); }
}
/* Закреплено оглавление только рядом с колонкой разделов: на телефоне оно
   ехало поверх каждого раздела и закрывало кнопки и текст витрины. Там оно —
   обычный блок над разделами с собственной прокруткой. */
.sg-toc {
    position: static;
    align-self: start;
    max-height: 40vh;
    overflow-y: auto;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 0.85rem;
}
.sg-toc__group {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.sg-toc__list + .sg-toc__group { margin-top: var(--space-4); }
.sg-toc__list { list-style: none; margin: 0; padding: 0; }
.sg-toc__list li { margin: 0; }
.sg-toc__link {
    display: block;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
    text-decoration: none;
    line-height: 1.35;
}
.sg-toc__link:hover {
    background: var(--color-bg-soft);
    color: var(--color-text);
}
.sg-toc__link:target,
.sg-toc__link.is-active {
    background: rgba(var(--color-accent-rgb), 0.14);
    color: var(--color-accent);
}
/* Подсветка целевой секции через :target — браузер сам подсветит ссылку
   :has(:target) в TOC. Fallback через JS не нужен. */
.sg-content { min-width: 0; }
.sg-section { padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); scroll-margin-top: var(--space-4); }
.sg-section:first-child { padding-top: 0; }
/* Подзаголовок секции styleguide: верхний воздух обязателен, иначе h3
   прилипает к swatch-grid'у/scale'у предыдущего блока. Дефолтные h-стили
   проекта (см. секцию Typography) margin-top'а не имеют — здесь оно нужно. */
/* Голые h3 витрины — без класса: заголовок с классом принадлежит компоненту
   (карточка, дропдаун), и правило витрины по специфичности перебивало его
   собственные стили — карточка в витрине выглядела не так, как на странице. */
.sg-section h3:not([class]),
.sg-section .sg-h3 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
    font-size: 1.05rem;
}
/* После описательной фразы под h2 — h3 первого подраздела не нуждается в
   двойном воздухе. */
.sg-section > .muted + h3,
.sg-section > .muted + .sg-h3 { margin-top: var(--space-4); }
.sg-section h4,
.sg-section .sg-h4 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-soft);
    letter-spacing: 0.01em;
}
.sg-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-2) 0 var(--space-3);
    font-size: 0.85rem;
}
.sg-table th,
.sg-table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.sg-table th {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    font-weight: 500;
}
.sg-table td code { font-size: 0.85em; }
.sg-note { color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.sg-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* Карточки подборки в продукте не бывают уже 340px (телефон за вычетом
   полей): витрина на 200px показывала поломки, которых у людей нет. */
/* Компоненты-строки (готовый ответ) читаются только на ширине абзаца. */
.sg-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--space-5); }
.sg-grid--picks { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
/* Живой пример отсчёта: ширина карточки входа, не всей витрины. */
.sg-cooldown-demo { max-width: 26rem; }
.sg-snippet {
    background: var(--color-surface);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    overflow-x: auto;
    white-space: pre-wrap;
}

/* Tokens-витрина: сетка swatch-cell. Каждый swatch — квадрат с фоном через
   CSS-кастом-свойство (передаётся inline `style="--swatch: var(--color-X)"`
   из шаблона — это допустимо в dev/styleguide, см. lint-исключения).
   Имя токена и значение — под swatch'ем. */
.tokens-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.token-cell {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.token-cell__swatch {
    height: 60px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-soft);
    background: var(--swatch, var(--color-bg));
}
.token-cell__name {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text);
    word-break: break-all;
    font-variant-numeric: tabular-nums;
}
.token-cell__hint { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Space-scale — горизонтальные блоки разной ширины. */
.tokens-scale { display: flex; flex-direction: column; gap: var(--space-3); }
.tokens-scale__row { display: flex; align-items: center; gap: var(--space-3); }
.tokens-scale__bar { height: 18px; background: var(--color-accent); border-radius: var(--radius-sm); }
.tokens-scale__label { font-family: var(--font-sans); font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Radius / shadow — превью на surface-карточке. */
.tokens-radius-grid, .tokens-shadow-grid {
    display: grid; gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.tokens-radius-cell, .tokens-shadow-cell {
    height: 96px; background: var(--color-surface);
    border: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-sans); font-size: 0.75rem; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.tokens-shadow-cell { border: 0; }

/* Glow & streak demo — sg-only витрина под new tokens.
   sg-glow-grid: surface-плитки 80×80 с per-accent halo (--glow-*).
   sg-streak-cell: surface-плитка 64×280 с top-streak + bottom-streak,
   чтобы было видно, как тонкая «линза» ложится на карточку. */
.sg-glow-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    margin: 0 0 var(--space-3);
}
.sg-glow-cell {
    height: 96px;
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-soft);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
}
.sg-glow-cell--violet { box-shadow: var(--glow-violet); }
.sg-glow-cell--teal   { box-shadow: var(--glow-teal); }
.sg-glow-cell--sage   { box-shadow: var(--glow-sage); }
.sg-glow-cell--amber  { box-shadow: var(--glow-amber); }

.sg-streak-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.sg-streak-cell {
    position: relative;
    height: 140px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-soft);
    overflow: hidden;
}
.sg-streak-cell::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
}
.sg-streak-cell--violet::before { background: var(--streak-violet); filter: drop-shadow(0 0 8px rgba(var(--color-accent-rgb), 0.65)); }
.sg-streak-cell--teal::before   { background: var(--streak-teal);   filter: drop-shadow(0 0 8px rgba(var(--color-teal-rgb), 0.60)); }
.sg-streak-cell--sage::before   { background: var(--streak-sage);   filter: drop-shadow(0 0 8px rgba(var(--color-sage-rgb), 0.60)); }
.sg-streak-cell--amber::before  { background: var(--streak-amber);  filter: drop-shadow(0 0 8px rgba(var(--color-amber-rgb), 0.60)); }

/* Type samples — серия абзацев в разных font-stack'ах. */
.tokens-type-sample { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); margin-bottom: var(--space-3); }
.tokens-type-sample__name { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.tokens-type-sample__demo--sans  { font-family: var(--font-sans);  font-size: 1.1rem; }
.tokens-type-sample__demo--serif { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; }
.tokens-type-sample__demo--mono  { font-family: var(--font-mono);  font-size: 0.95rem; }

/* --------------------------- Reduced motion --------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   EDITORIAL — variant-4 «Warm Intelligence»
   Лендинг-разделы и общая стилистика обложки журнала.
   ============================================================ */

body {
    font-feature-settings: "ss01", "cv11";
    letter-spacing: -0.005em;
    position: relative;
}

/* Тонкая бумажная зернистость — фоновый слой ниже всего контента. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    /* -1, а не 0: на нуле шум требовал, чтобы весь контент имел слой ≥1, — и
       ради этого каждая секция становилась стек-контекстом (см. правило ниже). */
    z-index: -1;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.5  0 0 0 0 0.4  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 240px;
}

/* Позиционирование — да, слой — нет.
   `z-index: 1` здесь делал КАЖДУЮ секцию и шапку отдельным стек-контекстом, и
   любой всплывающий слой внутри них оказывался заперт: тултип подсказки (z:40)
   и панель дропдауна (z:60) считались «внутри секции со слоем 1» и уходили под
   следующую секцию страницы. Симптом видно было точечно — то текст карточки
   поверх подсказки, то обрезанный дропдаун, — и лечилось точечными :has()-
   костылями. Слой секциям не нужен: фоновый шум `body::before` теперь лежит на
   -1 и не спорит с контентом. */
main, header, footer, section, nav, .container { position: relative; }

/* Section-label (tracking caps) */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    margin: 0 0 var(--section-kicker-gap);
    font-variant-numeric: tabular-nums;
}
/* Signature accent-tick (единый для лендинга, auth и кабинета): gradient +
   glow вместо editorial em-dash «— ». Draw-in на входе. Тот же язык, что у
   compact-хедера кабинета и streak'а hero-карточек. */
.section-label::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-accent), rgba(var(--color-accent-rgb), 0.15));
    box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.5);
    transform-origin: left center;
    flex: none;
}
@media (prefers-reduced-motion: no-preference) {
    .section-label::before { animation: tickDraw 620ms var(--ease-out) 160ms both; }
}

.tag-mono {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

/* Brand-mark «Match Point» (ui_brand_mark): две траектории сходятся в
   светящейся точке совпадения. Плитка — фирменная тёмная сцена, а не ink-токен:
   ленты светятся только на тёмном (как app icon), и плитка не должна светлеть
   вместе с темой. Знак — SVG-файл через <img>, здесь только размер, плитка и
   отклик на наведение. */
.brand-mark {
    --brand-mark-size: 1.75rem;
    display: inline-flex;
    flex: none;
    width: var(--brand-mark-size);
    height: var(--brand-mark-size);
    background: radial-gradient(circle at 50% 26%, var(--brand-tile-glow), transparent 62%), var(--brand-tile);
    /* радиус пропорционален размеру: ~23% стороны держит одну форму на всех размерах */
    border-radius: calc(var(--brand-mark-size) * 0.23);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.brand-mark--sm { --brand-mark-size: 1.375rem; }
.brand-mark--lg { --brand-mark-size: 2.75rem; }
/* без плитки — на тёмных поверхностях свечение знака и есть его фон */
.brand-mark--bare { background: none; box-shadow: none; border-radius: 0; }
.brand-mark__img { width: 100%; height: 100%; display: block; transition: filter 240ms ease; }
/* точка совпадения «отзывается» под курсором на ссылке бренда */
a:hover > .brand-mark .brand-mark__img,
a:focus-visible > .brand-mark .brand-mark__img { filter: brightness(1.18) drop-shadow(0 0 4px rgba(124, 92, 255, 0.55)); }
@media (prefers-reduced-motion: reduce) {
    .brand-mark__img { transition: none; }
}

/* ---- Site header (editorial nav) ---- */
.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) 0;
    padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0));
}
.site-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.site-header__logo {
    font-family: var(--font-sans);
    /* wordmark легче дисплейных заголовков (500): знак «Match Point» несёт свет и
       цвет, надпись рядом — спокойная, как в горизонтальном локапе концепта */
    font-weight: var(--brand-wordmark-weight);
    font-size: 1.25rem;
    letter-spacing: var(--brand-wordmark-tracking);
    color: var(--color-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    /* Лого — ссылка на главную, а не картинка: зона нажатия по высоте строки
       была 34px. Текст не меняется, добирается только hit-area. */
    min-height: var(--tap-min);
}
.site-header__logo-text {
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: var(--brand-wordmark-weight);
    letter-spacing: var(--brand-wordmark-tracking);
}
/* Шапка публичных страниц: знак — первое, что видит человек на главной, поэтому
   крупнее, чем в кабинете (там он не должен спорить с навигацией). Локап держит
   пропорцию знак ≈ 1.6 × кегль wordmark'а. Только строка шапки, не drawer. */
.site-header__row > .site-header__logo { gap: 0.7rem; }
/* мобайл: в строке только гамбургер и знак — space-between уносил знак к правому
   краю, отрывая его от навигации; знак встаёт рядом с гамбургером */
@media (max-width: 767.98px) {
    .site-header__row > .site-header__logo { margin-right: auto; }
}
.site-header__row > .site-header__logo .brand-mark { --brand-mark-size: 2rem; }
@media (min-width: 768px) {
    .site-header__row > .site-header__logo .brand-mark { --brand-mark-size: 2.25rem; }
    .site-header__row > .site-header__logo .site-header__logo-text { font-size: var(--font-size-xl); }
}
/* Logo-stack — brand text + eyebrow («Career OS») друг под другом справа
   от brand-mark. Используется в b2c-sidebar и в public-drawer на mobile
   (на desktop site-header__logo стоит inline, eyebrow прячется). */
.site-header__logo-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    gap: 0.15rem;
}
.site-header__logo-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-text-muted);
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.nav-list__item a:not(.btn) {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-soft);
    transition: color 150ms ease;
    background: transparent;
}
.nav-list__item a:not(.btn):hover,
.nav-list__item a:not(.btn):focus-visible {
    color: var(--color-accent);
}
.nav-list__item a[aria-current="page"] {
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.12);
    font-weight: 600;
}
/* Nav-CTA: «Войти» (secondary pill) + «Начать» (coral). */
.nav-list__item .btn {
    padding: 0.625rem 1.25rem;
    min-height: 44px;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.nav-list__item .btn--secondary {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
.nav-list__item .btn--secondary:hover,
.nav-list__item .btn--secondary:focus-visible {
    background: var(--color-bg-deep);
    border-color: var(--color-text);
}
.nav-list__item .btn--primary {
    color: var(--color-accent-text);
    box-shadow: 0 6px 18px -10px rgba(var(--color-accent-rgb), 0.55);
}
.nav-list__item .btn--primary:hover,
.nav-list__item .btn--primary:focus-visible {
    box-shadow: 0 12px 28px -10px rgba(var(--color-accent-rgb), 0.7),
                0 0 0 4px rgba(var(--color-accent-rgb), 0.18);
}

/* ---- HERO editorial ---- */
.hero-editorial {
    position: relative;
    padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.5rem, 6vw, 5rem);
    isolation: isolate;
}
/* Mesh-gradient под hero (Stripe/Linear-style): 4 «blob»-источника,
   расположенных по углам контейнера, с разными accent-цветами и
   мягким blur. Лежит за контентом (z-index:-1), не съезжает за edge —
   рисуется внутри section, не body. */
.hero-editorial::before,
.hero-editorial::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
    filter: blur(56px);
    opacity: 0.4;
}
/* Монохромно-прохладный whisper (direction «технологичная точность»):
   один индиго-hue на очень низкой alpha, без лавандово-teal микса —
   атмосфера, не тонировка. */
.hero-editorial::before {
    top: -12%;
    left: -8%;
    width: 46%;
    height: 66%;
    background:
        radial-gradient(circle at 35% 30%, rgba(var(--color-accent-rgb), 0.16), transparent 58%);
}
.hero-editorial::after {
    bottom: -18%;
    right: -8%;
    width: 52%;
    height: 74%;
    background:
        radial-gradient(circle at 65% 45%, rgba(var(--color-accent-rgb), 0.08), transparent 60%);
}
@media (prefers-reduced-motion: no-preference) {
    .hero-editorial::before { animation: hero-mesh-drift 18s ease-in-out infinite alternate; }
    .hero-editorial::after  { animation: hero-mesh-drift 22s ease-in-out infinite alternate-reverse; }
}
@keyframes hero-mesh-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(2%, -2%, 0) scale(1.08); }
}

.hero-editorial__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 992px) {
    .hero-editorial__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.hero-editorial__byline {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 var(--space-4);
    font-variant-numeric: tabular-nums;
}
.byline-rule { width: 32px; height: 1px; background: var(--color-text-muted); }

.hero-editorial__title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(2.5rem, 5.5vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: var(--color-text);
    margin: 0 0 var(--space-5);
    max-width: 12ch;
    position: relative;
    z-index: 1;
}
.hero-editorial__title em {
    font-style: normal;
    color: var(--color-accent);
    font-weight: 700;
}

.hero-editorial__lede {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.5;
    color: var(--color-text-soft);
    max-width: 36em;
    letter-spacing: -0.005em;
    margin: 0 0 var(--space-5);
}

.hero-editorial__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
/* На mobile primary+secondary CTA-кнопки растягиваются на всю ширину
   контейнера (как на референсе для гостя: «Построить карьерную карту» +
   «Посмотреть пример»). Но для залогиненного пользователя CTA-блок
   содержит только одну кнопку «Кабинет» — она должна остаться
   компактной pill'ой, иначе выглядит как непомерно широкая полоса.
   `:has(.btn--secondary)` — full-width применяется только когда рядом с
   primary есть secondary, т. е. в гостевом сценарии. */
@media (max-width: 640px) {
    .hero-editorial__cta:has(.btn--secondary) {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-editorial__cta:has(.btn--secondary) .btn { width: 100%; }
}
/* Сноска под кнопкой финального CTA. Без этого правила она вставала в один
   ряд с кнопкой (родитель — flex) и уезжала за правый край: «бесплатно, без
   банковской» помещалось, «карты» нет. */
.cta-editorial__action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}
.cta-editorial__note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* Hero + CTA-band primary CTA — pill-форма с увесистым violet glow.
   Применяется ТОЛЬКО к гостевым CTA («Построить карьерную карту» и
   её собрату в финальном CTA-band), у которых внутри есть иконка
   trending-up. Залогиненная «Кабинет» иконки не имеет — для неё
   остаётся базовый .btn из styleguide (radius-md). Селектор
   `:has(.icon)` это и различает. */
.hero-editorial__cta .btn--primary:has(.icon),
.cta-editorial__action .btn--primary:has(.icon),
.floating-cta .btn--primary {
    border-radius: 999px;
    padding-inline: clamp(1.25rem, 2vw, 1.75rem);
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-deep) 100%);
    /* Заземлённый lift + тактичный accent-bloom вместо двойного neon-glow —
       кнопка «поднимается», а не «светится» (язык premium-кнопки styleguide). */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -1px 0 rgba(0, 0, 0, 0.18) inset,
        0 2px 4px rgba(15, 23, 42, 0.10),
        0 10px 24px -10px rgba(var(--color-accent-rgb), 0.38);
}
.hero-editorial__cta .btn--primary:has(.icon):hover,
.cta-editorial__action .btn--primary:has(.icon):hover,
.floating-cta .btn--primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 -1px 0 rgba(0, 0, 0, 0.20) inset,
        0 4px 8px rgba(15, 23, 42, 0.12),
        0 16px 32px -12px rgba(var(--color-accent-rgb), 0.44);
}
/* Secondary CTA рядом с primary — outline c фиолетовой обводкой
   (только в гостевом сценарии, где она есть). */
.hero-editorial__cta .btn--secondary {
    border-radius: 999px;
    padding-inline: clamp(1.25rem, 2vw, 1.75rem);
    border-color: rgba(var(--color-accent-rgb), 0.35);
    background: rgba(var(--color-accent-rgb), 0.06);
}
.hero-editorial__cta .btn--secondary:hover {
    border-color: rgba(var(--color-accent-rgb), 0.55);
    background: rgba(var(--color-accent-rgb), 0.12);
}

.hero-editorial__cta-note {
    margin: 0 0 var(--space-6);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-soft);
    max-width: 34em;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.hero-editorial__aside {
    border-left: 2px solid var(--color-accent);
    padding: 0.25rem 0 0.25rem 1.25rem;
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-text-soft);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 32em;
}

/* Hero capabilities — product-pill row под CTA: показывает 4 модуля
   («что внутри») как chip-row с тонкой бордюром, без литературной
   attribution. Заменяет старый quote-aside на герое. */
.hero-editorial__capabilities {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* Список возможностей — текст, а не кнопки: в пилюлях с рамкой и реакцией
   на наведение он обещал нажатие, которого нет. Точка-маркер стоит перед
   каждым пунктом, а не между ними: разделитель между пунктами при переносе
   на телефоне начинал новую строку с точки. */
.hero-editorial__capabilities li {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-text-soft);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.hero-editorial__capabilities li::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

/* ---- Career snapshot (правая колонка hero) ----
   «Карьерный снимок» — продуктовая demo-карточка под референс #69:
   glass-card с rows (Текущий профиль / Следующий шаг + 74% ring /
   Сильные зоны chips / Зоны роста chips / Подходящие роли 14→).
   Заменяет старый live-feed AI-card. Заголовков нет — hero уже имеет
   свой H1 слева, дополнительный H2 справа создавал бы конкуренцию. */
/* --- Hero-демо направлений (.hero-lenses) ---
   Первый экран показывает разницу с редактором резюме: одна база — несколько
   направлений, у каждого своя готовность. Кольца — продуктовый ui_score_ring,
   и шкала та же, что в кабинете, поэтому 74 и 52 читаются одинаково здесь и
   внутри. Стекло карточки повторяет прежнюю демо-панель: радиус, hairline,
   сдержанный accent-bloom. */
.hero-lenses {
    position: relative;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(140% 90% at 50% -10%, rgba(var(--color-accent-rgb), 0.16) 0%, transparent 55%),
        linear-gradient(180deg, rgba(var(--color-bg-rgb), 0.55) 0%, rgba(var(--color-bg-rgb), 0.85) 100%),
        var(--color-bg-soft);
    border: 1px solid rgba(var(--color-accent-rgb), 0.22);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 24px 56px -28px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(var(--color-accent-rgb), 0.10),
        0 0 48px -20px rgba(var(--color-accent-rgb), 0.20);
    isolation: isolate;
}
.hero-lenses__head { margin-bottom: var(--space-4); }
.hero-lenses__eyebrow {
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.hero-lenses__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.25;
}
.hero-lenses__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.hero-lens {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
}
/* Предложенное направление — пунктир: человек его не заводил, это находка
   системы, и выглядеть как уже созданное оно не должно. */
.hero-lens--suggested {
    border-style: dashed;
    background: transparent;
}
.hero-lens__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.hero-lens__name {
    font-weight: 600;
    line-height: 1.25;
}
.hero-lens__meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}
.hero-lenses__caption {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}
/* Кольца в демо — компактные, без собственного фона карточки. */
.hero-lens .score-ring { flex: none; }

/* Панель покрытия в секции доказательства (переехала с первого экрана). */
/* Секция-доказательство: слева обещание и его границы, справа сам разбор.
   Прежняя вёрстка складывала три блока в столбик по центру, и каждый имел свой
   край — заголовок по центру, правила слева, демо снова по центру. Общий левый
   край текста и одна колонка под артефакт убирают это «прыганье». */
.proof-layout {
    display: grid;
    gap: clamp(var(--space-6), 5vw, var(--space-8));
    align-items: start;
}
@media (min-width: 1024px) {
    .proof-layout { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); }
}
.proof-copy .page-head { margin-bottom: var(--space-5); }
.proof-copy .page-head .section-display,
.proof-copy .page-head .page-head__intro { max-width: 100%; }
/* В колонке заголовок звучит тише, чем во всю ширину: тот же кегль ломался на
   четыре строки и перекрикивал сам разбор, ради которого секция и стоит. */
.proof-copy .page-head .section-display { font-size: clamp(1.9rem, 3.1vw, 2.6rem); }

.proof-panel {
    max-width: 36rem;
    margin: 0;
}
/* Шапка демо — та же анатомия, что у карточки в кабинете: кто (вакансия) и
   сколько (метрика). Цифра табличная и весит больше подписи: за ней и смотрят. */
.proof-panel__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 var(--space-3);
}
.proof-panel__vacancy {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.proof-panel__count { display: flex; align-items: baseline; gap: 8px; }
.proof-panel__count-value {
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.proof-panel__count-label { font-size: 0.875rem; color: var(--color-text-muted); }
.proof-panel .req-coverage { margin: 0; }
.proof-panel__caption {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* --- Hero-доказательство лендинга (.hero-proof) ---
   На первом экране стоит не рисунок «в стиле продукта», а сам продуктовый
   компонент покрытия требований. Обёртка повторяет стекло прежней демо-карточки
   (тот же радиус, hairline и accent-bloom), но внутри — настоящая панель:
   человек видит ровно то, что получит на своём резюме. */
.hero-proof {
    position: relative;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(140% 90% at 50% -10%, rgba(var(--color-accent-rgb), 0.16) 0%, transparent 55%),
        linear-gradient(180deg, rgba(var(--color-bg-rgb), 0.55) 0%, rgba(var(--color-bg-rgb), 0.85) 100%),
        var(--color-bg-soft);
    border: 1px solid rgba(var(--color-accent-rgb), 0.22);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 24px 56px -28px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(var(--color-accent-rgb), 0.10),
        0 0 48px -20px rgba(var(--color-accent-rgb), 0.20);
    isolation: isolate;
}
.hero-proof__head { margin-bottom: var(--space-4); }
.hero-proof__eyebrow {
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.hero-proof__vacancy {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.25;
}
.hero-proof__company {
    margin: 2px 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
/* Панель внутри карточки — без второй рамки: две вложенные рамки читаются как
   ошибка вёрстки, а не как слой. */
.hero-proof .req-coverage {
    margin: 0;
    background: var(--color-bg);
    border-color: var(--color-border-soft);
}
.hero-proof__caption {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* --- Сцена первого экрана (landing-motion.js) ---
   Одна оркестрованная сцена на всю страницу, около полутора секунд, один раз:
   подсветка знака за карточкой проявляется, направления приходят по очереди,
   кольцо каждого заполняется синхронно с досчётом своего числа, и последним
   отмечается направление, которое человек сам не заводил. Это и есть мысль
   первого экрана: одна карьера, несколько профессий, и одну из них нашли за
   вас.

   Начального `opacity: 0` здесь намеренно нет: сломанный или не догрузившийся
   скрипт не имеет права оставить первый экран пустым. Все from-состояния
   держит `animation-fill-mode: backwards` только пока класс стоит, а при
   `prefers-reduced-motion` скрипт класс не ставит вовсе. Задержки строк и
   колец обязаны совпадать с STAGGER_MS в landing-motion.js — число досчитывает
   ровно вместе со своей дугой. `--scene-start` — общий сдвиг сцены: при
   загрузке страница сама проявляется из прозрачности (body.is-ready, 360 мс),
   и сцена, начатая одновременно с этим, проходила невидимой. Его ставит
   скрипт: на первом экране — после проявления, при прокрутке — ноль. */
.hero-lenses.is-played .hero-lens {
    animation: lens-in 520ms var(--ease-out) backwards;
}
.hero-lenses.is-played .score-ring::before {
    /* easeOutCubic — та же кривая, что у досчёта числа в JS. */
    animation: ring-fill 1400ms cubic-bezier(0.33, 1, 0.68, 1) backwards;
}
.hero-lenses.is-played .hero-lens:nth-child(1),
.hero-lenses.is-played .hero-lens:nth-child(1) .score-ring::before { animation-delay: calc(var(--scene-start, 0ms) + 120ms); }
.hero-lenses.is-played .hero-lens:nth-child(2),
.hero-lenses.is-played .hero-lens:nth-child(2) .score-ring::before { animation-delay: calc(var(--scene-start, 0ms) + 260ms); }
.hero-lenses.is-played .hero-lens:nth-child(3),
.hero-lenses.is-played .hero-lens:nth-child(3) .score-ring::before { animation-delay: calc(var(--scene-start, 0ms) + 400ms); }
/* Находка системы отмечается после того, как досчитала: подпись «предложено
   по вашему опыту» на мгновение загорается акцентом и гаснет обратно.
   Подсвечивается смысл находки, а не строка целиком — заливка строки
   читалась как выделение мышью. Конечное состояние совпадает со статичным. */
.hero-lenses.is-played .hero-lens--suggested .hero-lens__meta {
    animation: lens-found 1600ms var(--ease-out) calc(var(--scene-start, 0ms) + 1750ms);
}
.hero-editorial.is-scene-played .hero-editorial__art {
    animation: art-bloom 1400ms var(--ease-out) var(--scene-start, 0ms) backwards;
}

@keyframes lens-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes ring-fill {
    from { --ring-progress: 0; }
}
@keyframes lens-found {
    30%, 60% { color: var(--color-accent); }
}
/* Подсветка знака проявляется из-под карточки: только opacity и масштаб,
   смещение по вертикали повторяет статичное translateY(-50%). */
@keyframes art-bloom {
    from { opacity: 0; transform: translateY(-50%) scale(0.92); }
}

/* Карточки пути и фич приподнимаются под курсором — единственная микро-
   интеракция страницы. Тень мягкая и короткая: это отклик на наведение, а не
   выезд карточки. */
.stage-card,
.feature-card {
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
    .stage-card:hover,
    .feature-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px -18px rgba(15, 23, 42, 0.35);
    }
}

/* «Уже работает» — то, что человек получит после регистрации; отличается от
   «Готовим сейчас» тоном, а не только словом: на лендинге нельзя обещать
   будущее в настоящем времени и наоборот (concept §1.2). */

/* --- Секция «Проверка по требованиям» (#proof) ---
   Три утверждения о границах: что панель обещает и чего не обещает. Метка
   слева — тот же цветовой словарь, что в самой панели, чтобы связь читалась
   без объяснений. */
.proof-points {
    display: grid;
    gap: var(--space-3);
    /* Мера по знакам, а не по рамке колонки: строка правила читается, а не
       тянется во всю ширину секции. */
    max-width: 46ch;
    margin: 0;
    padding: 0;
    list-style: none;
}
.proof-point {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.proof-point__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    border-radius: 50%;
}
.proof-point__mark--covered { background: rgba(var(--color-sage-rgb), 0.14); color: var(--color-sage); }
.proof-point__mark--partial { background: var(--color-warning-soft); color: var(--color-warning-strong); }
.proof-point__mark--missing { background: rgba(var(--color-danger-rgb), 0.12); color: var(--color-danger); }

/* --- Сравнение с привычным способом (#compare) ---
   Две колонки: слева — как человек делает это сегодня, справа — как здесь.
   Правая приподнята (фон + accent-рамка), потому что вывод страницы именно в
   ней; левая остаётся спокойной, без красных крестов: высмеивать привычку
   человека значит спорить с ним, а не с задачей. */
/* Цифры внутри сравнения — по ширине пары колонок и с воздухом до них:
   это доказательство того, что сравнивается, а не отдельный блок. */
/* Через секцию: базовый .stat-strip (объявлен ниже) ставит margin: 0 и
   иначе перебил бы центровку и отступ до колонок. */
.compare-section .compare-section__stats {
    max-width: 60rem;
    margin: 0 auto var(--space-5);
}
/* Что ещё готовим — одной тихой строкой под сравнением, с пометкой. */
.compare-section__soon {
    max-width: 60rem;
    margin: var(--space-5) auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}
.compare-section__soon-badge {
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}
.compare-pair {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    max-width: 60rem;
    margin: 0 auto;
}
.compare-col {
    position: relative;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.compare-col--after {
    border-color: rgba(var(--color-accent-rgb), 0.30);
    background:
        linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.05) 0%, transparent 60%),
        var(--color-surface);
}
.compare-col__badge {
    display: inline-block;
    margin-bottom: var(--space-2);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.compare-col__title {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-lg);
}
.compare-col__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-secondary);
}
.compare-col__list li { position: relative; padding-left: var(--space-5); }
.compare-col__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 12px;
    height: 1px;
    background: var(--color-border-strong);
}
.compare-col__list--positive li::before {
    background: var(--color-accent);
    height: 2px;
    border-radius: 1px;
}
.compare-col__cta { margin-top: var(--space-5); }

.pricing-footnote {
    margin: var(--space-4) 0 0;
    text-align: center;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
    .compare-pair { grid-template-columns: 1fr 1fr; }
}

.career-snapshot {
    position: relative;
    isolation: isolate;
}

/* Glass-card с rows. */
.snapshot-card {
    position: relative;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(140% 90% at 50% -10%, rgba(var(--color-accent-rgb), 0.16) 0%, transparent 55%),
        linear-gradient(180deg, rgba(var(--color-bg-rgb), 0.55) 0%, rgba(var(--color-bg-rgb), 0.85) 100%),
        var(--color-bg-soft);
    border: 1px solid rgba(var(--color-accent-rgb), 0.22);
    /* Заземлённый объём (light-first: 0.65 чёрного был из dark-темы) +
       hairline + сдержанный accent-bloom вместо 80px-glow. */
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 24px 56px -28px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(var(--color-accent-rgb), 0.10),
        0 0 48px -20px rgba(var(--color-accent-rgb), 0.20);
    overflow: hidden;
    isolation: isolate;
}
.snapshot-card::before {
    content: '';
    position: absolute;
    top: 0; left: 6%; right: 6%;
    height: 1px;
    background: var(--streak-violet);
    filter: drop-shadow(0 0 4px rgba(var(--color-accent-rgb), 0.35));
    z-index: 1;
    pointer-events: none;
}
/* Статичный сдержанный halo — убрана бесконечная «дышащая» accent-пульсация
   (постоянное свечение-движение читалось «игрушкой», не «дорого»). */
.snapshot-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 40px -16px rgba(var(--color-accent-rgb), 0.16);
    z-index: 0;
}
/* Top-streak shimmer — пятно света медленно проходит вдоль «линзы» по
   верхней кромке (опционально подложенное оверлайн-движение). */
.snapshot-card > * { position: relative; z-index: 2; }
.snapshot-card .snapshot-divider:first-of-type { /* anchor — pure decoration */ }

.snapshot-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.1rem);
    padding: clamp(0.6rem, 1vw, 0.85rem) 0;
    /* Stagger fade-in: каждая строка появляется по очереди после того
       как `body.is-ready` снят. Задержка nth-child ниже. */
    opacity: 0;
    transform: translateY(8px);
}
body.is-ready .snapshot-row {
    animation: snapshot-row-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes snapshot-row-in {
    to { opacity: 1; transform: translateY(0); }
}
body.is-ready .snapshot-card > .snapshot-row:nth-of-type(1) { animation-delay: 0.10s; }
body.is-ready .snapshot-card > .snapshot-row:nth-of-type(2) { animation-delay: 0.22s; }
body.is-ready .snapshot-card > .snapshot-row:nth-of-type(3) { animation-delay: 0.34s; }
body.is-ready .snapshot-card > .snapshot-row:nth-of-type(4) { animation-delay: 0.46s; }
body.is-ready .snapshot-roles {
    opacity: 0;
    transform: translateY(8px);
    animation: snapshot-row-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.58s forwards;
}
.snapshot-row__body { min-width: 0; }
.snapshot-row__label {
    margin: 0 0 0.2rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.snapshot-row__label--sage { color: var(--color-sage); }
.snapshot-row__label--amber { color: var(--color-amber); }
.snapshot-row__value {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--color-text);
}
.snapshot-row__value em {
    font-style: normal;
    color: var(--color-accent);
}

/* Halo-иконка слева в каждой row — squircle, 40-44px, accent-tint. */
.snapshot-icon {
    width: clamp(36px, 4vw, 44px);
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    --icon-rgb: var(--color-accent-rgb);
    background: rgba(var(--icon-rgb), 0.12);
    color: rgb(var(--icon-rgb));
    box-shadow:
        inset 0 0 0 1px rgba(var(--icon-rgb), 0.22),
        0 0 10px -6px rgba(var(--icon-rgb), 0.28);
}
.snapshot-icon--violet { --icon-rgb: var(--color-accent-rgb); }
.snapshot-icon--sage   { --icon-rgb: var(--color-sage-rgb); }
.snapshot-icon--amber  { --icon-rgb: var(--color-amber-rgb); }
.snapshot-icon .icon { width: 60%; height: 60%; stroke-width: var(--icon-stroke); }

/* Divider между rows. */
.snapshot-divider {
    height: 1px;
    border: none;
    background: var(--color-border-soft);
    margin: 0;
}

/* Циркулярный progress 74% — справа в строке «Следующий шаг». */
.snapshot-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding-left: clamp(0.75rem, 1.5vw, 1rem);
    border-left: 1px solid var(--color-border-soft);
    min-width: 5.5rem;
}
.snapshot-ring__label {
    margin: 0;
    text-align: center;
}
.snapshot-ring__chart {
    position: relative;
    width: clamp(56px, 6vw, 72px);
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.snapshot-ring__chart svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 3px rgba(var(--color-accent-rgb), 0.30));
    /* SVG по умолчанию overflow:hidden → drop-shadow-свечение обрезалось
       квадратной рамкой viewport'а (видимый квадрат при зуме). visible —
       glow цветёт радиально, без квадратного края. */
    overflow: visible;
}
/* Штриховой прогресс — track + progress солидные, маска вырезает штрихи.
   Track: dim фиолетовый по всей окружности → видны тусклые штрихи везде.
   Progress: solid arc 74% длины окружности (stroke-dasharray="74 100" +
   pathLength=100) → видны яркие штрихи на 74%, тёмные на 26%. */
.snapshot-ring__track {
    fill: none;
    stroke: rgba(var(--color-accent-rgb), 0.22);
    stroke-width: 4;
}
.snapshot-ring__progress {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 4;
    stroke-linecap: round; /* solid arc — скруглённый конец (как score-ring) */
    /* Заливка кольца от 0 до 74% (visible 0 → 74) при загрузке страницы.
       С pathLength=100, stroke-dasharray="74 100" даёт visible 74 units,
       invisible 26. Анимация — раскрытие через изменение stroke-dasharray. */
    stroke-dasharray: 0 100;
    animation: snapshot-ring-fill 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
    filter: drop-shadow(0 0 3px rgba(var(--color-accent-rgb), 0.35));
}
@keyframes snapshot-ring-fill {
    /* var(--progress) задаётся на root .snapshot-ring через inline style.
       Default 74 — для landing snapshot (hardcoded), где --progress не
       задан. На /app/resumes — дёргается из $completeness. */
    to { stroke-dasharray: var(--progress, 74) 100; }
}
/* data-played — повторное посещение в той же session (см. initSnapshotRingMemo
   в app.js): анимация выключена, final state применён сразу. Иначе при
   каждом переключении табов /app/resumes ring «оживает» с нуля — раздражает. */
.snapshot-ring[data-played] .snapshot-ring__progress {
    animation: none;
    stroke-dasharray: var(--progress, 74) 100;
}
.snapshot-ring[data-played] .snapshot-ring__value {
    animation: none;
    opacity: 1;
    transform: none;
}
/* Цифра 74% появляется с лёгким fade-up после того, как кольцо
   начало заполняться. */
.snapshot-ring__value {
    opacity: 0;
    transform: translateY(4px);
    animation: snapshot-value-fade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s forwards;
}
@keyframes snapshot-value-fade {
    to { opacity: 1; transform: translateY(0); }
}
.snapshot-ring__value {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(0.92rem, 1.4vw, 1.1rem);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

/* Chips-ряды (Сильные зоны / Зоны роста). */
.snapshot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
}
.snapshot-chip {
    --chip-rgb: var(--color-accent-rgb);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--chip-rgb), 0.32);
    background: rgba(var(--chip-rgb), 0.08);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
}
.snapshot-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(var(--chip-rgb));
    box-shadow: 0 0 6px rgba(var(--chip-rgb), 0.65);
    /* Мягкое «дыхание» bullet-точек — выдыхает яркий glow и
       сжимается. Разные fазы у соседних точек через nth-of-type
       animation-delay, чтобы не было одновременной пульсации. */
    animation: snapshot-chip-pulse 2.6s ease-in-out infinite;
}
.snapshot-chip:nth-of-type(2)::before { animation-delay: 0.6s; }
.snapshot-chip:nth-of-type(3)::before { animation-delay: 1.2s; }
@keyframes snapshot-chip-pulse {
    0%, 100% { box-shadow: 0 0 6px  rgba(var(--chip-rgb), 0.55); opacity: 0.85; }
    50%      { box-shadow: 0 0 12px rgba(var(--chip-rgb), 0.90); opacity: 1; }
}
.snapshot-chip--sage  { --chip-rgb: var(--color-sage-rgb); }
.snapshot-chip--amber { --chip-rgb: var(--color-amber-rgb); }

/* CTA-row «Подходящие роли 14 →» — clickable, hover state. */
.snapshot-roles {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.1rem);
    margin-top: var(--space-3);
    padding: clamp(0.6rem, 1vw, 0.85rem);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--color-accent-rgb), 0.22);
    background: rgba(var(--color-accent-rgb), 0.04);
    color: var(--color-text);
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.snapshot-roles:hover {
    background: rgba(var(--color-accent-rgb), 0.10);
    border-color: rgba(var(--color-accent-rgb), 0.40);
    transform: translateY(-1px);
}
.snapshot-roles__label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.snapshot-roles__count {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    letter-spacing: -0.025em;
    color: var(--color-accent);
}
.snapshot-roles__arrow {
    color: var(--color-accent);
}
.snapshot-roles:hover .snapshot-roles__arrow {
    transform: translateX(2px);
    transition: transform 160ms ease;
}

/* На узких viewport'ах строка «Следующий шаг» переходит в столбец — ring
   уезжает под текст. */
@media (max-width: 480px) {
    .snapshot-row--next {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon body"
            ".    ring";
    }
    .snapshot-row--next .snapshot-icon { grid-area: icon; }
    .snapshot-row--next .snapshot-row__body { grid-area: body; }
    .snapshot-ring {
        grid-area: ring;
        flex-direction: row;
        gap: 0.6rem;
        padding-left: 0;
        border-left: none;
        margin-top: 0.4rem;
    }
}

/* Reduced-motion: отключаем все «дыхания», stagger reveal, fade-up.
   Финальное состояние видно сразу (opacity:1, no transform). */
@media (prefers-reduced-motion: reduce) {
    .snapshot-card::after { animation: none; }
    .snapshot-ring__progress {
        animation: none;
        stroke-dasharray: 74 100;
    }
    .snapshot-ring__value { opacity: 1; transform: none; animation: none; }
    .snapshot-chip::before { animation: none; }
    .snapshot-row,
    body.is-ready .snapshot-row,
    body.is-ready .snapshot-roles {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ---- Landing section base (обёртка секции; хедер внутри — .page-head) ----
   ВАЖНО: это НЕ .page-head. Секция-обёртка и хедер — разные сущности;
   раньше обе назывались editorial-section*, при переименовании их нельзя
   схлопывать (иначе секция получает header'ный max-width:62rem и ломается). */
.page-section {
    padding: var(--section-pad-y) 0;
    position: relative;
}
/* Полностраничные ленты «обложки» — фон уходит до краёв viewport,
   контент остаётся внутри центрированной max-width-сетки. */
.page-section--banded {
    background: var(--color-bg-soft);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}
.page-section--banded > * {
    max-width: var(--bp-xl);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}
/* Шапка идёт на всю ширину контента, а 62rem держат ТЕКСТОВЫЕ элементы
   (заголовок и лид — там это мера строки). Раньше ограничение стояло на всей
   шапке, и ряд действий упирался в невидимую границу посреди канваса: на
   1440px кнопка «Создать резюме» кончалась за 168px до правого края карточек
   под ней и выглядела «висящей непонятно где». Именно из-за этого действия
   разделов уносили в топбар — там они хотя бы прижимались к краю. */
.page-head { margin-bottom: var(--section-head-gap); }
.page-head .section-display,
.page-head .page-head__breadcrumbs { max-width: 62rem; }
/* Лид — проза, и меру ему задаёт длина строки, а не ширина колонки: 62rem
   давали 130 символов, вдвое больше читаемого. Ограничение в ch держится
   за размер шрифта, поэтому переживает изменение типографики. */
.page-head .page-head__intro { max-width: 72ch; }
/* Прежние два костыля (поднять слой хедера на время дропдауна и прятать
   нижнюю навигацию под ним) сняты: секции больше не стек-контексты, и панель
   поднимается собственным z-index'ом, как и задумано. */
.page-head--centered { margin-inline: auto; text-align: center; }
.page-head--centered .section-display { max-width: 22ch; margin-inline: auto; }
.page-head--centered .page-head__intro { margin-inline: auto; }
/* Надзаголовок центрированной шапки стоит по той же оси, что заголовок и лид:
   базовый ряд раскладывает метку и действия по краям, и одна метка без
   действий прилипала к левому краю над центрированным заголовком. */
.page-head--centered .page-head__row { justify-content: center; }

/* --compact — модификатор для кабинета (b2c страницы): tight spacing
   между title и следующим блоком, без landing-style воздуха. Используется
   через prop `compact: true` в `ui_section_header`. Cabinet-страницы
   (documents_resumes, target/new, edit history и т.д.) делают tight
   layout как у workspace topbar'а; landing-страницы keep wide rhythm. */
.page-head--compact {
    /* Небольшой собственный bottom-margin ПОВЕРХ page-shell gap:space-5 —
       заголовку кабинета нужен воздух до контента/табов (прежний tight-0
       читался скученно). Итог ~2rem header→content — premium, не landing-раздув. */
    margin-bottom: var(--space-2);
}
/* Премиум-ритм по Gestalt: крошки — отдельная nav-строка (детачнута воздухом
   снизу), eyebrow — кикер над титулом с дыханием (не приклеен). Ясная
   группировка «контекст ↑ / идентичность ↓», но без скученности. */
.page-head--compact .breadcrumbs {
    margin-bottom: var(--space-4);
}
.page-head--compact .page-head__row {
    margin-bottom: var(--space-3);
}
/* Eyebrow кабинета — тихая подпись раздела без украшений: фирменный элемент
   теперь знак «Match Point», а светящаяся черта на каждой странице стала
   украшением ради украшения. Подпись выводится, только когда нет крошек
   (иначе страница трижды называла себя: крошки, подпись, заголовок). */
.page-head--compact .section-label {
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}
.page-head--compact .section-label::before { content: none; }
@keyframes tickDraw {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}
/* Титул уверенного масштаба («мы лидеры») с отстроенным трекингом — но всё ещё
   compact: три строки не съедают пол-экрана до контента. */
.page-head--compact .section-display {
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}
.page-head--compact .page-head__intro {
    margin-top: var(--space-3);
    font-size: 0.875rem;
}

/* head-row — eyebrow (left) + actions (right) inline на ≥640px.
   На узком экране действия уезжают ПОД заголовок: кнопка «Откликнуться»
   раньше названия вакансии заставляет решать до того, как человек узнал, о
   чём речь. Порядок правит flex-order у самой шапки, чтобы правило жило в
   одном месте для всех страниц кабинета. */
.page-head { display: flex; flex-direction: column; }
.page-head__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}
@media (max-width: 639px) {
    .page-head__row { order: 3; margin: var(--space-3) 0 0; }
    .page-head__row .page-head__label { display: none; }
    /* Eyebrow на мобиле скрыт, и на странице без действий от ряда оставалась
       пустая полоса высотой в отступ — заголовок висел над провалом. Ряд без
       действий на этих ширинах не нужен вовсе (:has не поддержан — остаётся
       прежнее поведение, не хуже). */
    .page-head__row:not(:has(.page-head__actions)) { display: none; }
    .page-head__breadcrumbs, .breadcrumbs { order: 0; }
    .section-display { order: 1; }
    .page-head__intro { order: 2; }
    .page-head__actions { width: 100%; }
    .page-head__actions .btn { flex: 1 1 auto; justify-content: center; }
    /* Вторичное действие остаётся по размеру текста: растянутое во всю
       ширину, оно читается как главное на странице, хотя главное здесь —
       содержимое под шапкой. Растягиваем только основное. */
    .page-head__actions .btn--secondary { flex: 0 1 auto; }
    /* Тихая ghost-кнопка (обычно «назад») не растягивается и не центрируется:
       по центру экрана она читается как главное действие, хотя это путь
       обратно. Прижимаем к той же левой кромке, что и весь текст шапки. */
    .page-head__actions .btn--ghost { flex: 0 1 auto; justify-content: flex-start; }
    .page-head__actions:has(> .btn--ghost:only-child) { justify-content: flex-start; }
}
/* Без подписи раздела (её место заняли крошки) действия встают на строку
   заголовка справа — как у больших заголовков Apple; иначе ряд с одними
   кнопками прижимался влево и висел над заголовком. На мобиле порядок
   «заголовок → действия» задан выше через order. */
@media (min-width: 640px) {
    .page-head--compact:has(> .page-head__row > .page-head__actions):not(:has(> .page-head__row > .page-head__label)) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-5);
        align-items: end;
    }
    .page-head--compact:has(> .page-head__row > .page-head__actions):not(:has(> .page-head__row > .page-head__label)) > .breadcrumbs { grid-column: 1 / -1; }
    /* Строка лида задана явно: без крошек первая строка сетки свободна, и
       автоматическая раскладка сажала лид НАД заголовком. */
    .page-head--compact:has(> .page-head__row > .page-head__actions):not(:has(> .page-head__row > .page-head__label)) > .page-head__intro { grid-column: 1 / -1; grid-row: 3; }
    .page-head--compact:has(> .page-head__row > .page-head__actions):not(:has(> .page-head__row > .page-head__label)) > .page-head__row { grid-column: 2; grid-row: 2; margin: 0 0 var(--space-1); }
    .page-head--compact:has(> .page-head__row > .page-head__actions):not(:has(> .page-head__row > .page-head__label)) > .section-display { grid-column: 1; grid-row: 2; }
}
.page-head__row .section-label {
    margin: 0;
}
.page-head__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* concept-hint — постоянный «?»-explainer core-нона: hover/focus-тултип без
   JS. Наведение (или клавиатурный фокус) показывает панель, уход курсора /
   клик мимо — скрывает; на touch работает hover-эмуляция браузера (тап по
   «?» → показ, тап в сторону → скрытие). Панель перекрывает триггер на 6px —
   курсор доезжает до неё, не теряя hover (WCAG 1.4.13 hoverable). Триггер
   44px hit-area (WCAG 2.5.5); панель capped 78vw. */
.concept-hint { position: relative; display: inline-flex; }
.concept-hint__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -10px 0; /* не раздувать высоту eyebrow-row */
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-text-muted);
    cursor: help;
    border-radius: 999px;
    transition: color 140ms ease, background 140ms ease;
}
.concept-hint:hover .concept-hint__trigger,
.concept-hint:focus-within .concept-hint__trigger {
    color: var(--color-accent);
    background: var(--color-bg-soft);
}
.concept-hint__trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.concept-hint__panel {
    /* Панель задаёт свою типографику явно: подсказка живёт и внутри
       mono-uppercase заголовков (eyebrow секции, метка карточки), и
       наследованный оттуда капс с разрядкой превращал два предложения
       объяснения в стену. Компонент не должен зависеть от места. */
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    line-height: 1.5;
    color: var(--color-text-soft);
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    z-index: 40;
    display: block;
    width: min(320px, 78vw);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.concept-hint__panel--end { left: auto; right: 0; }

/* На узком экране подсказка всплывает листом над нижней навигацией, а не
   падает из-под значка: обёртка шириной со значок, и панель в 320px,
   начинавшаяся в середине строки, уезжала за правый край — объяснение
   обрывалось на полуслове. Привязать её к значку без JS нечем (anchor
   positioning есть не везде), а лист снизу на телефоне и привычнее. */
@media (max-width: 599px) {
    .concept-hint__panel,
    .concept-hint__panel--end {
        position: fixed;
        top: auto;
        left: var(--space-3);
        right: var(--space-3);
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: none;
        z-index: 60;
        box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .16));
    }
}

.concept-hint:hover .concept-hint__panel,
.concept-hint:focus-within .concept-hint__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
}
.concept-hint__title {
    display: block;
    margin: 0 0 4px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.concept-hint__body {
    display: block;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-soft);
}
@media (prefers-reduced-motion: reduce) {
    .concept-hint__panel { transition: none; transform: none; }
}

/* ============================================================
   ui_data_tip — подсказка на элементе данных (отрезок линии,
   столбик графика, ячейка). Панель та же, что у concept-hint,
   но триггером служит сам элемент: у значения нет своего «?».
   ============================================================ */
.dtip { position: relative; }
.dtip__panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: max-content;
    max-width: min(20rem, 78vw);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
    /* Типографика объявляется явно: подсказка живёт и внутри mono-uppercase
       подписей графиков, и наследованный оттуда капс превращал разбор в
       стену. Компонент не зависит от места. */
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    line-height: 1.45;
    color: var(--color-text);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.dtip__panel--end { left: auto; right: 0; }

.dtip:hover > .dtip__panel,
.dtip:focus-visible > .dtip__panel,
.dtip:focus-within > .dtip__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.dtip__title {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.dtip__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.dtip__label { font-style: normal; color: var(--color-text-muted); }
.dtip__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.dtip__note { color: var(--color-text-muted); font-size: 0.8125rem; }

@media (prefers-reduced-motion: reduce) {
    .dtip__panel { transition: none; transform: none; }
}

/* POST-формы в eyebrow-row (job_actions и т.п.) — без block-маргинов. */
.page-head__actions form { margin: 0; }
.page-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
/* Причина погашенного действия — под кнопками, по их правому краю. */
/* Кнопки и строка причины — одной колонкой по правому краю: строка не
   растягивает ряд шапки и не сбивает надпись слева. */
.page-head__actions:has(> .page-head__actions-note) { flex-direction: column; align-items: flex-end; gap: 6px; }
.page-head__actions-note { display: flex; justify-content: flex-end; }
.page-head__actions-note .quota-meter { text-align: right; max-width: 46ch; }
@media (max-width: 639px) {
    .page-head__actions:has(> .page-head__actions-note) { align-items: stretch; }
    .page-head__actions-note { justify-content: flex-start; }
    .page-head__actions-note .quota-meter { text-align: left; max-width: none; }
}

/* head-meta — meta-полоса под intro с chips статуса / источника / даты.
   Унифицированный rhythm для всех cabinet hero-блоков. resumes_list
   workspace head'у он соответствует — теперь то же визуально доступно
   любой странице через ui_section_header. */
.page-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.page-head__meta .meta-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
    flex-shrink: 0;
}
.page-head__meta .meta-sep {
    opacity: 0.4;
    user-select: none;
}

.page-head__intro {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    max-width: 38em;
    margin: var(--section-intro-gap) 0 0;
    text-wrap: pretty;
}
.section-display {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.028em;
    margin: 0;
    color: var(--color-text);
}
.section-display em {
    font-style: normal;
    color: var(--color-accent);
}

/* ---- Витрина характеристик (ui_attribute_board) ----
   Плотная сетка «ось · число · шкала · дельта». Плотность взята у карточек
   характеристик в играх — она позволяет прочитать пять показателей одним
   взглядом; цветовая радуга и бейджи оттуда НЕ взяты: цвет здесь означает
   зону значения — ту же, что кольцо готовности. */
/* Витрина характеристик — карточка, а не голый список на фоне страницы.
   На Обзоре она рисовалась прозрачной и без отступов, на профессии — белой
   карточкой с 24 px: одни и те же пять чисел выглядели как разные сущности.
   Оболочка одна и живёт здесь, чтобы страницы её не переизобретали. */
.attr-board {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.attr-board__head { display: flex; flex-direction: column; gap: 2px; }
.attr-board__headline { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.attr-board__gain { display: inline-flex; }
.attr-board__title { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.attr-board__intro { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
/* Список рядов — общий .quality-rows; здесь только отступ блока. */
.attr-board__list { margin: 0; }

/* ---- Feature grid ---- */
.feature-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }

/* Пара и тройка карточек. Сетка по умолчанию рассчитана на четыре штуки в
   ряд; две карточки в четырёхколоночной сетке читаются как обрезанный ряд, а
   три — как ряд с дырой справа. Модификатор меняет только число колонок на
   десктопе: на мобильном стек остаётся общим. */
@media (min-width: 1024px) {
    .feature-grid--pair { grid-template-columns: repeat(2, 1fr); }
    .feature-grid--triple { grid-template-columns: repeat(3, 1fr); }
}

/* Секция «Технологии и данные» выкладывает три блока подряд — две пары
   карточек и полосу цифр. Ритм между ними задаётся здесь, чтобы не
   развешивать margin на сами компоненты: они используются и поодиночке. */
.feature-grid--pair + .feature-grid--pair,
.feature-grid--pair + div { margin: var(--space-2) 0 var(--space-5); }
/* Специфичность выше базового `.stat-strip { margin: 0 }`, стоящего ниже по файлу. */
.page-section .data-section__stats { max-width: 60rem; margin-inline: auto; }

.feature-card {
    /* --card-accent-rgb — per-card override (см. .feature-card--*).
       По умолчанию indigo-фиолет совпадает с accent. Используется для
       top-streak, halo вокруг иконки и hover-rim. */
    --card-accent-rgb: var(--color-accent-rgb);
    position: relative;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(var(--card-accent-rgb), 0.10) 0%, transparent 55%),
        linear-gradient(180deg, rgba(var(--color-bg-rgb), 0.55) 0%, rgba(var(--color-bg-rgb), 0.85) 100%),
        var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.875rem 1.625rem 1.625rem;
    transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
    margin: 0;
    /* Flex-column чтобы metric прижимался к низу карточки независимо от
       длины body — все 4 карточки получают одинаковый baseline у метрики. */
    display: flex;
    flex-direction: column;
    isolation: isolate;
}
/* Top light-streak: тонкая «линза» по верхней кромке карточки в её
   accent-цвете — премиум-сигнатура с референсов. */
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--card-accent-rgb), 0) 8%,
        rgba(var(--card-accent-rgb), 0.85) 50%,
        rgba(var(--card-accent-rgb), 0) 92%,
        transparent 100%);
    filter: drop-shadow(0 0 4px rgba(var(--card-accent-rgb), 0.30));
    opacity: 0.85;
    pointer-events: none;
    z-index: 1;
}
.feature-card:hover {
    border-color: rgba(var(--card-accent-rgb), 0.45);
    transform: translateY(-4px);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 16px 32px -18px rgba(15, 23, 42, 0.35),
        0 0 0 1px rgba(var(--card-accent-rgb), 0.16),
        0 0 28px -10px rgba(var(--card-accent-rgb), 0.22);
}
.feature-card:hover::before { opacity: 1; }

/* Per-card accent override — раскрашивает top-streak и hover-rim. */
.feature-card--coral  { --card-accent-rgb: var(--color-accent-rgb); }
.feature-card--violet { --card-accent-rgb: var(--color-violet-rgb); }
.feature-card--teal   { --card-accent-rgb: var(--color-teal-rgb); }
.feature-card--sage   { --card-accent-rgb: var(--color-sage-rgb); }
.feature-card--amber  { --card-accent-rgb: var(--color-amber-rgb); }
.feature-card--navy   { --card-accent-rgb: var(--color-violet-rgb); }
.feature-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.25rem;
}
.feature-card__head .feature-icon { margin: 0; }
.feature-card__num {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-accent);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.feature-card__title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    color: var(--color-text);
    line-height: 1.2;
}
.feature-card__body {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-soft);
    margin: 0;
    /* Растягивается на оставшееся пространство в flex-column карточке —
       метрика ниже прибита к bottom edge у всех карточек одинаково. */
    flex: 1 1 auto;
}
.feature-card__metric {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-text-soft);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.feature-card__metric::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}
.feature-card__metric--coral  { color: var(--color-accent); }
.feature-card__metric--teal   { color: var(--color-teal); }
.feature-card__metric--sage   { color: var(--color-sage); }
.feature-card__metric--navy   { color: var(--color-violet); }
.feature-card__metric--amber  { color: var(--color-amber); }
.feature-card__metric--violet { color: var(--color-violet); }
/* Premium app-icon tiles: rounded square (14px), глубокий gradient
   (color-deep → color), top-highlight через inset shadow, accent
   border-glow при hover. Заменяют flat-tint круги — даёт «iOS app icon»
   ощущение, perfect под Geist + indigo палитру. */
.feature-icon {
    /* --icon-accent-rgb per-variant — задаётся в .feature-icon--*. */
    --icon-accent-rgb: var(--color-accent-rgb);
    width: var(--icon-plate-lg); height: var(--icon-plate-lg);
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 1.25rem;
    position: relative;
    color: #ffffff;
    /* Top inner highlight + bottom inner shadow + outer accent-halo —
       глянцевая 3D-плёнка с premium-свечением вокруг (см. референсы). */
    /* icon_plate-язык: top-gloss (сдержанный) + нейтральное заземление +
       hairline + ТАКТИЧНЫЙ цветной bloom. Убран дальний 56px accent-halo,
       чёрная тень 0.55 (из dark-темы) → нейтральная ink-тень. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 2px 4px rgba(15, 23, 42, 0.10),
        0 8px 20px -10px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(var(--icon-accent-rgb), 0.16),
        0 6px 16px -10px rgba(var(--icon-accent-rgb), 0.28);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.feature-card:hover .feature-icon {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 4px 8px rgba(15, 23, 42, 0.12),
        0 12px 28px -12px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(var(--icon-accent-rgb), 0.24),
        0 8px 22px -10px rgba(var(--icon-accent-rgb), 0.38);
}
.feature-icon::after {
    /* Корнер-glint в верхнем-левом — premium signature. */
    content: '';
    position: absolute;
    top: 4px; left: 4px;
    width: 14px; height: 14px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.30), transparent 70%);
    border-radius: var(--radius-md);
    pointer-events: none;
}
.feature-icon .icon {
    width: 26px;
    height: 26px;
    stroke-width: 2;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.feature-card:hover .feature-icon {
    transform: translateY(-1px) scale(1.03);
}

/* Цветовые варианты — multi-stop linear gradient под каждый accent.
   --icon-accent-rgb задаёт цвет accent-halo вокруг плитки. */
.feature-icon--coral  { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 100%); --icon-accent-rgb: var(--color-accent-rgb); }
.feature-icon--teal   { background: linear-gradient(135deg, var(--color-teal)   0%, var(--color-teal-deep, #0e7490)   100%); --icon-accent-rgb: var(--color-teal-rgb); }
.feature-icon--sage   { background: linear-gradient(135deg, var(--color-sage)   0%, var(--color-sage-deep, #15803d)   100%); --icon-accent-rgb: var(--color-sage-rgb); }
.feature-icon--navy   { background: linear-gradient(135deg, var(--color-violet) 0%, #6d54d9 100%); --icon-accent-rgb: var(--color-violet-rgb); }
.feature-icon--amber  { background: linear-gradient(135deg, var(--color-amber)  0%, #d97706 100%); --icon-accent-rgb: var(--color-amber-rgb); }
.feature-icon--violet { background: linear-gradient(135deg, var(--color-violet) 0%, #6d54d9 100%); --icon-accent-rgb: var(--color-violet-rgb); }

/* ---- Stages funnel (#how) ----
   5 stage-карточек в горизонтальный ряд: Резюме → Карьерный профиль →
   Позиция на рынке → Подходящие роли → План роста. Между карточками —
   chevron'ы. Третья карточка (active) подсвечена сильнее. На mobile —
   column-стек со стрелкой вниз. Каждая карточка раскрашивается через
   inline CSS-переменную `--stage-rgb`. */
/* stages-section использует единый --section-pad-y (оверрайд убран). */
/* Mobile-first: вертикальный стек карточек на full width. flex-direction
   column, gap, items takes content height. С desktop (≥768px) меняем
   flex-direction на row и flex: 1 1 0 для равной ширины. */
.stages-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
}
@media (min-width: 768px) {
    .stages-list {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        justify-content: center;
    }
}
/* Neon-стрелка между карточками: фиолетовая arrow-right с двойным
   drop-shadow glow. На mobile поворачивается вниз (column-стек). */
.stages-list__arrow {
    --arrow-rgb: var(--color-accent-rgb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: rgb(var(--arrow-rgb));
    align-self: center;
    margin: 0;
    transform: rotate(90deg);
    /* Коннектор направляет взгляд, не светится — снят двойной neon-glow. */
    opacity: 0.6;
}
.stages-list__arrow .icon { stroke-width: 2; }
@media (min-width: 768px) {
    .stages-list__arrow {
        transform: rotate(0);
        flex: 0 1 clamp(1.25rem, 2.4vw, 2.5rem);
        margin: 0 0.5rem;
    }
}

/* Glass-карточка стадии — высокая и узкая (под референс #72):
   ширина карточки ≈ 14-18% секции, высота под иконку-капсулу + title +
   subtitle. Внутри сверху — вертикальный pill-плейсхолдер с иконкой в
   верхней его части. Затем мелкий «01» в моно-стиле, title и subtitle. */
.stage-card {
    --stage-rgb: var(--color-accent-rgb);
    position: relative;
    /* Mobile (default): full width, height по контенту, не flex-shrink'аем. */
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    padding: clamp(1.1rem, 1.8vw, 1.6rem) clamp(0.75rem, 1.2vw, 1rem);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 50% at 50% -10%, rgba(var(--stage-rgb), 0.08) 0%, transparent 55%),
        linear-gradient(180deg, rgba(var(--color-bg-rgb), 0.55) 0%, rgba(var(--color-bg-rgb), 0.85) 100%),
        var(--color-bg-soft);
    border: 1px solid rgba(var(--stage-rgb), 0.22);
    isolation: isolate;
    /* Нейтральный объём + тактичный stage-hairline вместо accent-glow вокруг
       всей карточки. */
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 8px 20px -12px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(var(--stage-rgb), 0.08);
}
@media (min-width: 768px) {
    /* На desktop карточки идут в row, равной ширины — flex: 1 1 0 с basis 0. */
    .stage-card { flex: 1 1 0; width: auto; }
}
/* Все 5 карточек одинаковы по визуальному весу (active state на
   референсе #76 не подчёркнут). */

/* Mobile (<768px): перепаковка из «портрет с центрированным контентом» в
   компактный timeline-ряд. Номер и иконка слева в одной колонке (узкая
   вертикальная пара), title + body справа стопкой. Резко сокращает
   высоту тоннеля из 5 карточек на телефоне без потери визуального
   ритма. Стрелки между карточками скрыты — последовательность задаёт
   нумерация. */
@media (max-width: 767px) {
    .stages-list {
        gap: 0.75rem;
    }
    .stages-list__arrow { display: none; }
    .stage-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        /* Один `gap` с двумя значениями: прежде `gap: 0` стоял после
           column-gap/row-gap и обнулял оба — колонка текста прилипала к
           иконке, и номер шага ложился на первую букву названия. */
        gap: 0.2rem 1rem;
        align-items: center;
        text-align: left;
        padding: 0.85rem 1rem 0.85rem 1.1rem;
    }
    /* Step-number — corner-badge внутри icon-плашки, абсолютно
       позиционирован. На мобиле tile меньше (40px), badge — 18px. */
    .stage-card__num {
        width: 18px;
        height: 18px;
        font-size: 0.6875rem;
        top: -5px;
        right: -5px;
    }
    .stage-card__icon {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
        width: 40px;
        height: 40px;
        margin: 0;
    }
    .stage-card__icon .icon {
        width: 20px;
        height: 20px;
    }
    .stage-card__title {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
        font-size: 1rem;
        line-height: 1.2;
        min-height: 0;
    }
    .stage-card__body {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
        font-size: 0.8125rem;
        line-height: 1.4;
        max-width: none;
        min-height: 0;
    }
}

/* Step-number — corner-badge внутри iOS-tile иконки (Apple-grade
   pattern для wizard-шагов). Раньше был отдельной круглой плашкой
   сверху карточки, конкурировал с иконкой за focal point — теперь
   живёт внутри tile'а в правом-верхнем углу как app-icon notification
   badge. Один визуальный якорь на карточку, sequence сохранена. */
.stage-card__num {
    --num-rgb: var(--stage-rgb);
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--color-bg-deep);
    border: 1.5px solid rgba(var(--num-rgb), 0.6);
    color: rgb(var(--num-rgb));
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    box-shadow:
        0 0 0 2px var(--color-bg-soft),
        0 1px 2px rgba(15, 23, 42, 0.10),
        0 0 6px -2px rgba(var(--num-rgb), 0.30);
    z-index: 2;
}

/* Tier A · iOS-tile (unified с feature-icon). Rounded-square 56px с
   gradient-fill в per-stage цвете + corner-glint сверху-слева + accent
   halo вокруг. Глиф белый. Per-stage цвет задаётся inline через
   --stage-rgb, gradient deriv'ируется из него light→dark через alpha-
   overlay (без необходимости отдельных --color-*-deep токенов). */
.stage-card__icon {
    --icon-rgb: var(--stage-rgb);
    position: relative;
    width: clamp(48px, 5vw, var(--icon-plate-lg));
    height: clamp(48px, 5vw, var(--icon-plate-lg));
    border-radius: var(--radius-lg);
    display: inline-grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 45%, rgba(0, 0, 0, 0.22) 100%),
        rgb(var(--icon-rgb));
    color: #ffffff;
    /* Унифицировано с feature-icon: top-gloss + нейтральное заземление +
       hairline + тактичный цветной bloom (был дальний 56px accent-halo +
       чёрная dark-тень 0.55). */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 2px 4px rgba(15, 23, 42, 0.10),
        0 8px 20px -10px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(var(--icon-rgb), 0.18),
        0 6px 16px -10px rgba(var(--icon-rgb), 0.30);
    margin: 0.25rem 0 0.5rem;
}
/* Corner-glint в верхнем-левом углу — premium signature (как у
   feature-icon). */
.stage-card__icon::after {
    content: '';
    position: absolute;
    top: 4px; left: 4px;
    width: 14px; height: 14px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.30), transparent 70%);
    border-radius: var(--radius-md);
    pointer-events: none;
}
.stage-card__icon .icon {
    width: clamp(26px, 2.6vw, 32px);
    height: clamp(26px, 2.6vw, 32px);
    stroke-width: var(--icon-stroke);
    /* Глиф белый, drop-shadow не нужен — gradient-fill даёт достаточный
       контраст; subtle dark drop-shadow для отделения от светлого
       top-edge gradient. */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.stage-card__title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--color-text);
}
.stage-card__body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-soft);
    max-width: 14em;
}
/* На desktop карточки стоят в row — фиксируем min-height у title (2 строки
   при line-height 1.15) и body (2 строки при line-height 1.45), чтобы dot
   и низ body не «прыгали» между карточками с разной длиной подписи.
   На mobile они в столбец, лишний воздух не нужен — поэтому только @media. */
@media (min-width: 768px) {
    .stage-card__title { min-height: 2.3em; }
    .stage-card__body { min-height: 2.9em; }
}

/* Outcome строка под воронкой — органичный итог «Persium превращает...».
   Без pill-рамки и фона: просто центрированный sans-текст с лёгким
   muted-тоном; ощущение «подписи к иллюстрации». */
.stages-section__outcome {
    margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
    max-width: 42rem;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-sans);
    font-size: clamp(0.92rem, 1.2vw, 1.05rem);
    font-style: italic;
    letter-spacing: -0.005em;
    line-height: 1.5;
    color: var(--color-text-soft);
    text-align: center;
    display: block;
}
/* Accent-dot скрыт — visual cleanup ради органичности. */
.stages-section__outcome-dot { display: none; }

/* ---- Career-map section (отдельная секция с графом навыков) ----
   Padding-top отдельно от page-head base, чтобы на mobile был
   ощутимый воздух между outcome строкой stages-section и section-label
   карьерной карты. Padding-bottom умеренный — без огромного gap'а на
   desktop до следующей секции. */
/* career-map-section использует единый --section-pad-y (оверрайд убран). */

/* ---- Career graph illustration (правая колонка steps-секции) ----
   Семантический «mind-map» под референс дизайнера:
   - Центральный узел «Вы» (large violet halo);
   - 3 strong-узла слева (Backend / Cloud / Architecture) — solid violet линии;
   - 2 growth-узла сверху/снизу (Leadership / Product impact) — dashed amber;
   - 2 target-узла справа (Tech Lead / Engineering Manager) — dashed violet
     со стрелками;
   - Legend pill снизу.
   Узлы — абсолютно позиционированные HTML-элементы (иконка + лейбл,
   Lucide); линии — SVG-слой за узлами с per-line accent-классами. */
.career-graph {
    /* Контейнер полностью прозрачный — граф «лежит» прямо на
       page-background, без видимых рамок и тёмных пятен. Фиолетовое
       свечение естественно создаётся halo вокруг центрального узла. */
    position: relative;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}
/* Board — квадратная рабочая область (aspect-ratio 1:1), все позиции
   узлов задаются в процентах относительно неё через --cg-x/--cg-y. */
.career-graph__board {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 32rem;
}
/* SVG-слой с линиями — натянут на board, viewBox 100×100 чтобы координаты
   совпадали с процентами позиций узлов. */
.career-graph__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}
.cg-line {
    --line-rgb: var(--color-accent-rgb);
    fill: none;
    stroke-linecap: round;
    /* non-scaling-stroke — толщина линии стабильна и не зависит от
       растяжения viewBox; pattern dasharray тогда в pixels-of-stroke. */
    vector-effect: non-scaling-stroke;
    stroke: rgb(var(--line-rgb));
    stroke-width: 2;
    /* Один мягкий glow вместо двойного «лазера» — линия направляет взгляд,
       не светит (light-first: неон читался «дёшево»). */
    filter: drop-shadow(0 0 3px rgba(var(--line-rgb), 0.32));
}
.cg-line--solid  { /* default — strong (solid violet/teal/sage); цвет
                     задаётся через --line-rgb в inline style на line. */ }
.cg-line--dashed {
    /* Pattern в pixels (с non-scaling-stroke): 6 on / 4 off — короткие,
       чёткие штрихи, видны на любом angle и на любой ширине viewport'а. */
    stroke-dasharray: 6 4;
}
/* Backwards-compat: старые классы оставлены, но всё через --line-rgb. */
.cg-line--strong { /* solid в accent (default) */ }
.cg-line--growth { stroke-dasharray: 6 4; --line-rgb: var(--color-amber-rgb); }
.cg-line--target { stroke-dasharray: 6 4; --line-rgb: var(--color-amber-rgb); }

/* Узлы — круглые HTML-чипы с иконкой сверху и лейблом снизу.
   Размер 18% (центр 22%) — чтобы узлы не перекрывались при близкой
   раскладке (Cloud/Architecture рядом с центром). */
.career-graph__node {
    --node-rgb: var(--color-accent-rgb);
    position: absolute;
    left: var(--cg-x, 50%);
    top:  var(--cg-y, 50%);
    transform: translate(-50%, -50%);
    width: 18%;
    aspect-ratio: 1;
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    z-index: 1;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(var(--node-rgb), 0.22) 0%, transparent 70%),
        rgba(var(--color-bg-rgb), 0.45);
    border: 1.5px solid rgba(var(--node-rgb), 0.42);
    /* Нейтральное заземление (объём) + тактичный цветной bloom — вместо
       двойного neon-glow. Тот же язык, что у отрефакторенного icon_plate. */
    box-shadow:
        0 0 0 1px rgba(var(--node-rgb), 0.16) inset,
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 6px 18px -8px rgba(15, 23, 42, 0.14),
        0 0 20px -8px rgba(var(--node-rgb), 0.30);
    color: rgb(var(--node-rgb));
    text-align: center;
    padding: 0.4rem 0.5rem;
}
.career-graph__node-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(18px, 2.8vw, 24px);
    height: clamp(18px, 2.8vw, 24px);
    color: rgb(var(--node-rgb));
    filter: drop-shadow(0 0 3px rgba(var(--node-rgb), 0.28));
}
.career-graph__node-icon .icon {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}
.career-graph__node-label {
    font-family: var(--font-sans);
    font-size: clamp(0.62rem, 0.95vw, 0.76rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-text);
    letter-spacing: -0.01em;
    word-break: break-word;
    hyphens: auto;
}

/* Per-variant accents. Центральный узел крупнее и с двойным glow. */
.career-graph__node--center {
    --node-rgb: var(--color-accent-rgb);
    width: 22%;
    background:
        radial-gradient(120% 90% at 50% 30%, rgba(var(--node-rgb), 0.45) 0%, transparent 70%),
        rgba(var(--color-bg-rgb), 0.35);
    border-color: rgba(var(--node-rgb), 0.5);
    /* Центр «Вы» — чуть выразительнее прочих узлов, но заземлён: halo-ring
       + нейтральный объём + сдержанный цветной bloom (был neon 0.95). */
    box-shadow:
        0 0 0 1px rgba(var(--node-rgb), 0.30) inset,
        0 0 0 5px rgba(var(--node-rgb), 0.10),
        0 2px 6px rgba(15, 23, 42, 0.08),
        0 10px 30px -12px rgba(15, 23, 42, 0.18),
        0 0 30px -8px rgba(var(--node-rgb), 0.36);
}
.career-graph__node--center .career-graph__node-icon {
    width: clamp(22px, 3.6vw, 28px);
    height: clamp(22px, 3.6vw, 28px);
}
.career-graph__node--center .career-graph__node-label {
    font-size: clamp(0.78rem, 1.2vw, 0.92rem);
    font-weight: 600;
}
.career-graph__node--strong       { --node-rgb: var(--color-accent-rgb); }
.career-graph__node--strong-teal  { --node-rgb: var(--color-teal-rgb); }
.career-graph__node--strong-sage  { --node-rgb: var(--color-sage-rgb); }
.career-graph__node--growth       { --node-rgb: var(--color-accent-rgb); }
.career-graph__node--growth-amber { --node-rgb: var(--color-amber-rgb); }
.career-graph__node--target       { --node-rgb: var(--color-accent-rgb); }

/* Legend pill — снизу graph'а, как на референсе. */
.career-graph__legend {
    list-style: none;
    padding: 0.55rem 1rem;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    background: rgba(var(--color-bg-rgb), 0.65);
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-soft);
    letter-spacing: 0;
    backdrop-filter: blur(6px);
    font-variant-numeric: tabular-nums;
}
.career-graph__legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.career-graph__legend-mark {
    display: inline-block;
    width: 32px;
    height: 2px;
    background: rgb(var(--color-accent-rgb));
    border-radius: 2px;
}
.career-graph__legend-mark--growth {
    background: transparent;
    /* Dashed amber: 6px on / 4px off — масштаб совпадает с pattern'ом
       линий в графе. */
    background-image:
        linear-gradient(90deg, rgb(var(--color-amber-rgb)) 60%, transparent 60%);
    background-size: 10px 2px;
    background-repeat: repeat-x;
}
/* На десктопе граф «прибиваем» к viewport — пока пользователь scroll'ит
   список шагов слева, графический visual остаётся в фокусе. Top отступ
   рассчитан с учётом sticky-topbar'а (нет, у нас public header статичный
   но не fixed). Используем half-viewport offset для центрирования. */
@media (min-width: 992px) {
    .career-graph {
        position: sticky;
        top: clamp(2rem, 8vh, 5rem);
        align-self: start;
    }
}
.career-graph__caption {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    text-align: center;
    max-width: 28em;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
/* Старая step-list (вертикальный список с timeline-чипами + career-graph
   справа) полностью заменена секцией #how со stages-list (горизонтальная
   воронка из 5 stage-cards). Old-стили удалены. */

/* ---- Stats ---- */
.stat-grid {
    display: grid;
    gap: clamp(1rem, 3vw, 2rem) 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stat-grid__outcome {
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    max-width: 38rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-soft);
    text-align: center;
    letter-spacing: -0.005em;
}
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-card {
    position: relative;
    border-top: 1px solid var(--color-border);
    padding-top: 1.1rem;
}
/* Top light-streak в фиолетовом — заменяет «жирный белый бордер сверху».
   Дозированный premium glow, не «hard-rule line». */
.stat-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--streak-violet);
    filter: drop-shadow(0 0 6px rgba(var(--color-accent-rgb), 0.55));
    opacity: 0.9;
    pointer-events: none;
}
.stat-card__num {
    font-family: var(--font-serif);
    font-weight: 450;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--color-text);
    margin: 0;
}
.stat-card__num em {
    font-style: italic;
    color: var(--color-accent);
}
.stat-card__label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    margin: 0.5rem 0 0;
    max-width: 14em;
    min-height: 2lh;
    font-variant-numeric: tabular-nums;
}

/* ---------- Stat-strip — компактная strip-полоса с метриками
   (референс #90). Три metric-чанка [icon | большое число + мелкая
   подпись], разделённые тонкими линиями на десктопе. Полоса заменяет
   тяжёлый 4-cards grid: даёт outcome-факты в одной строке вместо целого
   экрана. Самостоятельный визуал — без page-head. */
/* #numbers — намеренно минималистичная секция: strip is content,
   H2/section-display нет (был бы chrome без значения — eyebrow и
   сам strip уже коммуницируют outcome). Чтобы намерение читалось
   как «intentional minimal», а не «underbuilt» — даём секции
   больше воздуха вокруг: +50% к padding-top/bottom против обычных
   page-head, плюс subtle вертикальный ритм у eyebrow. */
/* stat-strip-section использует единый --section-pad-y (оверрайд убран). */
.section-label--strip {
    /* eyebrow здесь = весь head секции (титула нет) → gap до strip'а по
       единому --section-head-gap, как head→content в остальных секциях. */
    margin-bottom: var(--section-head-gap);
    font-weight: 600;
    letter-spacing: 0.20em;
    /* Centered, чтобы alignment был консистентен с остальными
       page-head--centered секциями. Stat-strip — secondary
       outcome widget, и центрированный eyebrow над центральной strip-
       полосой даёт намеренную композицию вместо «left-orphan» eyebrow. */
    text-align: center;
}
.stat-strip {
    list-style: none;
    margin: 0;
    padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.4vw, 2rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(70% 100% at 0% 50%, rgba(var(--color-accent-rgb), 0.12) 0%, transparent 60%),
        radial-gradient(70% 100% at 100% 50%, rgba(var(--color-teal-rgb), 0.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(var(--color-bg-rgb), 0.55) 0%, rgba(var(--color-bg-rgb), 0.85) 100%),
        var(--color-bg-soft);
    border: 1px solid rgba(var(--color-accent-rgb), 0.22);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px -16px rgba(15, 23, 42, 0.10);
}
@media (min-width: 640px) {
    .stat-strip {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }
}
.stat-strip__item {
    --strip-rgb: var(--color-accent-rgb);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0;
    min-width: 0;
}
/* Три метрики одного рода — «сколько это занимает» — красились в три разных
   цвета по номеру позиции. Цвет по позиции ничего не означает, а зелёный и
   янтарный на этой странице заняты статусами покрытия: тот же зелёный, что
   значит «требование закрыто», стоял на «0 ₽». Оставляем один акцент —
   различают метрики числа, а не оттенки. */
.stat-strip__item:nth-child(2),
.stat-strip__item:nth-child(3) { --strip-rgb: var(--color-accent-rgb); }
@media (min-width: 640px) {
    .stat-strip__item {
        padding: 0.35rem clamp(0.75rem, 1.5vw, 1.25rem);
        border-left: 1px solid rgba(var(--color-slate-rgb), 0.18);
    }
    .stat-strip__item:first-child { border-left: 0; padding-left: 0; }
    .stat-strip__item:last-child { padding-right: 0; }
}
.stat-strip__icon {
    flex: 0 0 auto;
    width: var(--icon-plate-md);
    height: var(--icon-plate-md);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background:
        radial-gradient(100% 100% at 50% 0%, rgba(var(--strip-rgb), 0.20) 0%, transparent 70%),
        rgba(var(--color-bg-rgb), 0.45);
    border: 1px solid rgba(var(--strip-rgb), 0.36);
    color: rgb(var(--strip-rgb));
    box-shadow: inset 0 0 0 1px rgba(var(--strip-rgb), 0.08);
}
.stat-strip__icon .icon {
    width: 22px;
    height: 22px;
    stroke-width: var(--icon-stroke);
    filter: drop-shadow(0 0 3px rgba(var(--strip-rgb), 0.28));
}
.stat-strip__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.stat-strip__num {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.45rem, 2.2vw, 1.8rem);
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.stat-strip__num em {
    font-style: normal;
    font-weight: 600;
    font-size: 0.72em;
    color: rgb(var(--strip-rgb));
    margin-left: 0.18em;
    letter-spacing: -0.01em;
}
.stat-strip__label {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-text-muted);
}

/* ---- Social proof — testimonials + companies-bar ---- */
.social-proof {
    position: relative;
    isolation: isolate;
}
.social-proof::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 40% at 20% 50%, rgba(var(--color-accent-rgb), 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 50%, rgba(var(--color-teal-rgb), 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: -1;
}
.testimonial-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: 1fr;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 768px) { .testimonial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.testimonial-card {
    background:
        radial-gradient(120% 70% at 50% -10%, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 55%),
        var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 2vw, 2rem);
    margin: 0;
    position: relative;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    /* Flex-column чтобы author-block прибивался к низу карточки независимо
       от длины quote — все 3 авторские плашки выровнены по baseline. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}
.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: var(--streak-violet);
    filter: drop-shadow(0 0 8px rgba(var(--color-accent-rgb), 0.55));
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
    transition: opacity 200ms ease;
}
.testimonial-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--color-accent-rgb), 0.40);
    box-shadow:
        0 18px 36px -18px rgba(0, 0, 0, 0.55),
        0 0 48px -8px rgba(var(--color-accent-rgb), 0.25);
}
.testimonial-card:hover::before { opacity: 1; }
.testimonial-card__corner {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    font-family: var(--font-serif);
    font-size: 4rem;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.18;
    pointer-events: none;
}
.testimonial-card__quote {
    margin: 0 0 var(--space-4);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text);
    letter-spacing: -0.005em;
    position: relative;
    z-index: 1;
    /* Растягивается на оставшееся пространство → author внизу. */
    flex: 1 1 auto;
}
.testimonial-card__author {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    border-top: 1px solid var(--color-border-soft);
    padding-top: var(--space-3);
    width: 100%;
}
.testimonial-card__avatar {
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-weight: 600;
}
.testimonial-card__avatar--violet { background: rgba(var(--color-violet-rgb), 0.20); color: var(--color-violet); }
.testimonial-card__avatar--teal   { background: rgba(var(--color-teal-rgb), 0.20);   color: var(--color-teal); }
.testimonial-card__avatar--sage   { background: rgba(var(--color-sage-rgb), 0.22);   color: var(--color-sage); }
.testimonial-card__author-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.testimonial-card__author-name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
}
.testimonial-card__author-role {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.social-proof__disclaimer {
    margin: clamp(1.25rem, 2.5vw, 2rem) auto 0;
    max-width: 38rem;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    font-style: italic;
    opacity: 0.85;
}

/* ---------- Примеры карьерных разборов (бывший social-proof / voices)
   Outcome-карточки вместо testimonial-цитат: переход слева, три строки
   (сильные стороны / пробелы / следующий шаг) с цветными метками.
   Mobile-first column-стек, на ≥768px — три колонки. */
.examples-section {
    background: linear-gradient(180deg, rgba(var(--color-bg-rgb), 0.0) 0%, rgba(var(--color-bg-rgb), 0.35) 50%, rgba(var(--color-bg-rgb), 0.0) 100%);
}

/* Tier B · Badge — domain-icon в muted-gray (uniform recipe от
   compare-card). Информационный, не декоративный: говорит «это про
   backend / analyst / PM». Восстанавливает visual scaffolding parity
   с compare-card — две секции «карточки в ряд» теперь имеют
   одинаковую card anatomy (icon + title + rows). */

/* Семантический color-coding label'ов: sage = positive, amber = warn,
   accent (violet) = «вот takeaway, главное на карточке». Раньше
   «next» был per-card accent (violet/teal/sage) и менял цвет от
   карточки к карточке — это ломало роль label'а как identifier'а
   «вот следующий шаг» при сканировании трёх карточек. Теперь —
   uniform violet across all 3. */

.examples-section__disclaimer {
    margin: clamp(1.25rem, 2.5vw, 2rem) auto 0;
    max-width: 38rem;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    font-style: italic;
    opacity: 0.85;
}

/* ---------- Comparison-таблица «Чем Persium отличается»
   Закрывает возражение «я могу это сам в ChatGPT / на агрегаторе».
   Структура: 3 компактные карточки-альтернативы сверху + одна большая
   Persium-hero card снизу с pill-чипами и финальным CTA. */
.compare-section {
    padding-top: var(--section-pad-y);
    padding-bottom: var(--section-pad-y);
}

/* Persium-hero card — финальный «финиш» сравнения. Заметно крупнее,
   плотнее, с левой violet-полосой и radial accent-glow. Badge «Career
   OS» сверху, заголовок-утверждение, 5 pill-чипов и primary CTA. */
.compare-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.25rem, 2.6vw, 2.2rem);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(60% 100% at 0% 50%, rgba(var(--color-accent-rgb), 0.20) 0%, transparent 65%),
        radial-gradient(60% 100% at 100% 50%, rgba(var(--color-teal-rgb), 0.12) 0%, transparent 65%),
        linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.06) 0%, rgba(var(--color-bg-rgb), 0.92) 100%),
        var(--color-bg-soft);
    border: 1px solid rgba(var(--color-accent-rgb), 0.32);
    /* Заземлённый объём + тактичный accent-hairline; выразительность даёт
       внутренний radial-gradient wash (остаётся), не внешний glow. */
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 20px 48px -24px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(var(--color-accent-rgb), 0.14);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.4rem);
}
@media (min-width: 900px) {
    .compare-hero {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }
}
.compare-hero__head {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.compare-hero__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb), 0.14);
    border: 1px solid rgba(var(--color-accent-rgb), 0.40);
    color: rgb(var(--color-accent-rgb));
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.compare-hero__badge-icon {
    color: rgb(var(--color-accent-rgb));
}
.compare-hero__badge-icon.icon {
    width: 14px;
    height: 14px;
    stroke-width: var(--icon-stroke-fine);
    filter: drop-shadow(0 0 4px rgba(var(--color-accent-rgb), 0.65));
}
.compare-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    letter-spacing: -0.022em;
    line-height: 1.15;
    color: var(--color-text);
}
.compare-hero__body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.5;
    color: var(--color-text-soft);
    max-width: 38rem;
}
.compare-hero__pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
@media (min-width: 900px) {
    .compare-hero__pills {
        grid-column: 1 / -1;
        margin-top: 0.3rem;
    }
}
.compare-hero__pill {
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(var(--color-bg-rgb), 0.55);
    border: 1px solid rgba(var(--color-accent-rgb), 0.30);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: -0.005em;
}
.compare-hero__cta {
    display: flex;
    justify-content: flex-start;
}
@media (min-width: 900px) {
    .compare-hero__cta {
        justify-self: end;
        align-self: center;
    }
}

/* ---- Floating CTA — sticky pill после 30% scroll'а ---- */
.floating-cta {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    padding: var(--space-3) clamp(1rem, 4vw, 2rem);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(var(--color-navy-rgb), 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    z-index: 40;
    /* Спрятанная — за краем экрана целиком: прежние 120% собственной высоты
       не покрывали отступ десктопной пилюли от низа (до 1.75rem), и её верх
       оставался виден полосой над подвалом и тарифами. visibility — чтобы
       спрятанная кнопка не ловила Tab; переключается после выезда. */
    transform: translateY(calc(100% + 2.5rem));
    visibility: hidden;
    transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 360ms;
}
.floating-cta[hidden] { display: none; }
.floating-cta.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
.floating-cta__label {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--color-text);
    line-height: 1.2;
}
.floating-cta .btn { flex-shrink: 0; }
@media (min-width: 768px) {
    /* На десктопе — pill в правом нижнем углу, не full-width. */
    .floating-cta {
        left: auto;
        right: clamp(1rem, 2vw, 1.75rem);
        bottom: clamp(1rem, 2vw, 1.75rem);
        border-radius: 999px;
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg), var(--glow-accent);
        padding: 0.55rem 0.55rem 0.55rem 1.25rem;
        background: rgba(var(--color-bg-rgb, 14, 14, 18), 0.85);
    }
}
@media (prefers-reduced-motion: reduce) {
    .floating-cta { transition: none; }
}

/* ---- FAQ section — native <details> collapsible -------------------- */
.faq-section {
    position: relative;
}
/* Одна плита со списком, вопросы разделены волосяной линией. Прежде каждый
   вопрос был отдельной белой карточкой с тенью, и шесть карточек слипались в
   тяжёлый столбик; открытый вопрос подкрашивался и получал полосу слева,
   которую обрезало скругление. Открытость теперь показывают сам ответ и
   «плюс», повёрнутый в «×». */
.faq-list {
    /* Поле страницы на телефоне — как у соседних плит: секция FAQ своего
       горизонтального отступа не имеет, и плита ложилась от края до края. */
    width: min(48rem, calc(100% - 2 * var(--space-4)));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 0 clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.faq-item {
    position: relative;
}
.faq-item + .faq-item {
    border-top: 1px solid var(--color-border-soft);
}
.faq-item > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--tap-min);
    padding: clamp(1.1rem, 2vw, 1.4rem) 0;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(1rem, 1.5vw, 1.0625rem);
    line-height: 1.4;
    color: var(--color-text);
    letter-spacing: -0.01em;
    user-select: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
/* «Плюс» справа; у открытого поворачивается на 45° и становится «×». */
.faq-item > summary::after {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 5px;
    background:
        linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
    color: var(--color-text-muted);
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), color 200ms ease;
}
.faq-item[open] > summary::after {
    transform: rotate(45deg);
    color: var(--color-text);
}
.faq-item > summary:hover { color: var(--color-accent); }
.faq-item > summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}
.faq-item > p {
    margin: calc(-1 * var(--space-2)) 0 0;
    padding: 0 2.5rem clamp(1.1rem, 2vw, 1.4rem) 0;
    color: var(--color-text-soft);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 40rem;
    animation: faq-fade-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes faq-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .faq-item > p { animation: none; }
    .faq-item > summary::after { transition: none; }
}

/* ---- Premium CTA band ----
   Full-bleed band: на всю ширину viewport (margin: 50%-50vw трюк),
   2-col grid внутри. Звёзды на фоне справа, фиолетовое свечение
   сверху/снизу. */
.cta-editorial {
    background:
        radial-gradient(70% 100% at 80% 50%, rgba(var(--color-accent-rgb), 0.22) 0%, transparent 60%),
        radial-gradient(60% 100% at 20% 50%, rgba(var(--color-accent-rgb), 0.10) 0%, transparent 65%),
        linear-gradient(180deg, var(--color-bg-deep) 0%, #0b0e1a 100%);
    color: var(--color-text);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    /* Full-bleed: вырываемся за пределы родительского контейнера, занимаем
       100vw. Без border-radius — это band, не карточка. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    position: relative;
    overflow: hidden;
    border-block: 1px solid rgba(var(--color-accent-rgb), 0.22);
    box-shadow:
        inset 0 0 120px -20px rgba(var(--color-accent-rgb), 0.35);
    isolation: isolate;
}
/* Top light-streak — premium-сигнатура band'а. */
.cta-editorial::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: var(--streak-violet);
    filter: drop-shadow(0 0 10px rgba(var(--color-accent-rgb), 0.7));
    pointer-events: none;
    z-index: 1;
}
/* Bottom light-streak — симметрично top streak'у. */
.cta-editorial::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: var(--streak-violet);
    filter: drop-shadow(0 0 10px rgba(var(--color-accent-rgb), 0.55));
    pointer-events: none;
    z-index: 1;
}

/* Light-theme: убрать dark gradient (hardcoded #0b0e1a в base правиле выше),
   заменить subtle accent-wash. Streaks приглушаются — на белом фоне они
   выглядят как чужеродные artefacts. Border/shadow тоже tone down. */
:root[data-theme="light"] .cta-editorial {
    background:
        radial-gradient(75% 100% at 80% 50%, rgba(var(--color-accent-rgb), 0.10) 0%, transparent 65%),
        radial-gradient(65% 100% at 18% 50%, rgba(var(--color-accent-rgb), 0.06) 0%, transparent 70%),
        linear-gradient(180deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-accent) 4%, var(--color-bg)) 100%);
    border-block-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
    box-shadow:
        inset 0 0 100px -30px rgba(var(--color-accent-rgb), 0.10),
        0 1px 0 rgba(15, 23, 42, 0.04);
}
:root[data-theme="light"] .cta-editorial::before {
    background: linear-gradient(90deg, transparent 0%, rgba(var(--color-accent-rgb), 0.35) 50%, transparent 100%);
    filter: none;
}
:root[data-theme="light"] .cta-editorial::after {
    background: linear-gradient(90deg, transparent 0%, rgba(var(--color-accent-rgb), 0.25) 50%, transparent 100%);
    filter: none;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .cta-editorial {
        background:
            radial-gradient(75% 100% at 80% 50%, rgba(var(--color-accent-rgb), 0.10) 0%, transparent 65%),
            radial-gradient(65% 100% at 18% 50%, rgba(var(--color-accent-rgb), 0.06) 0%, transparent 70%),
            linear-gradient(180deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-accent) 4%, var(--color-bg)) 100%);
        border-block-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
        box-shadow:
            inset 0 0 100px -30px rgba(var(--color-accent-rgb), 0.10),
            0 1px 0 rgba(15, 23, 42, 0.04);
    }
    :root:not([data-theme]) .cta-editorial::before {
        background: linear-gradient(90deg, transparent 0%, rgba(var(--color-accent-rgb), 0.35) 50%, transparent 100%);
        filter: none;
    }
    :root:not([data-theme]) .cta-editorial::after {
        background: linear-gradient(90deg, transparent 0%, rgba(var(--color-accent-rgb), 0.25) 50%, transparent 100%);
        filter: none;
    }
}

.cta-editorial__inner {
    max-width: var(--bp-xl);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: 1fr;
    align-items: center;
    position: relative;
    z-index: 2;
}
@media (min-width: 768px) {
    .cta-editorial__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: clamp(2rem, 5vw, 4rem);
    }
}
.cta-editorial__copy {
    min-width: 0;
}
.cta-editorial__title {
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 var(--space-3);
    /* Ровные строки заголовка: без balance последнее слово оставалось одно
       на второй строке («…возьмём на / себя»). */
    text-wrap: balance;
}
.cta-editorial__title em {
    font-style: normal;
    color: var(--color-accent);
    font-weight: 700;
}
.cta-editorial__lede {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: clamp(0.92rem, 1.2vw, 1.05rem);
    line-height: 1.5;
    color: var(--color-text-soft);
    margin: 0;
    max-width: 38em;
    text-wrap: pretty;
}
.cta-editorial__action {
    display: inline-flex;
    align-items: center;
    justify-self: stretch;
}
@media (min-width: 768px) {
    .cta-editorial__action { justify-self: end; }
}

/* ---- Footer (editorial) ---- */
.site-footer {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    color: var(--color-text-muted);
    font-size: 0.875rem;
}
.site-footer__inner {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .site-footer__inner {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.5fr);
        gap: clamp(2rem, 5vw, 4rem);
        align-items: start;
    }
}

.site-footer__brand-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 24rem;
}
.site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.site-footer__brand-name {
    font-family: var(--font-sans);
    font-weight: var(--brand-wordmark-weight);
    font-size: 1.125rem;
    color: var(--color-text);
    letter-spacing: var(--brand-wordmark-tracking);
}
.site-footer__tagline {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.005em;
}
.site-footer__status {
    margin: var(--space-2) 0 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.site-footer__status-divider { color: var(--color-border); }
.site-footer__status-meta {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
}

.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 768px) {
    .site-footer__columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.site-footer__col-title {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
    margin: 0 0 var(--space-3);
    font-variant-numeric: tabular-nums;
}
.site-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.site-footer__col a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.4;
    transition: color 150ms ease;
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible {
    color: var(--color-accent);
}

.site-footer__bottom {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.site-footer__copy {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
    .site-footer__copy { text-align: left; }
}

.edition-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-sage);
    box-shadow: 0 0 0 2px rgba(var(--color-sage-rgb), 0.18);
    display: inline-block;
    position: relative;
}
.edition-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid rgba(var(--color-sage-rgb), 0.4);
    animation: ai-pulse 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .edition-dot::after { animation: none; }
}
/* ---- Существующая value-card (legacy) — мягкое выравнивание под editorial ---- */
.value-card {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

/* ---- Mobile-specific tweaks ---- */
@media (max-width: 639px) {
    .hero-editorial__title { letter-spacing: -0.025em; }
}

/* Override legacy `.nav-toggle-button { display: inline-flex }`, который объявлен
   ниже в файле и иначе выигрывает источник-order у media-rule. На десктопе
   гамбургер всегда скрыт. */
@media (min-width: 768px) {
    .nav-toggle-button { display: none !important; }
}

/* ============================================================
   AUTH — каркас экранов входа (auth_layout, реворк 12.10).
   Форма по центру. Прежний раскол «тёмная промо-панель 60% | форма справа»
   ставил форму ровно под окно Google One Tap, которое браузер рисует в
   правом верхнем углу. Телефон: светлый экран, марка сверху, форма без
   рамки. С 768px: тёмная сцена бренда во весь экран (знак Match Point,
   свечение, зерно) и форма светлым листом по центру — сцена осталась
   подписью бренда, а угол под One Tap свободен.
   Полностью bleed'ит из родительского .container.
   ============================================================ */
.auth-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    background: var(--color-bg);
}
/* Превью каркаса в витрине: та же сцена, но в потоке страницы, без
   растяжки на всю ширину окна и высоту экрана. */
.auth-stage--preview {
    margin-left: 0;
    margin-right: 0;
    width: auto;
    min-height: 0;
    border-radius: var(--radius-xl);
}
.auth-stage__grain { display: none; }
.auth-stage__column {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
}
/* Марка: знак, имя и подпись бренда — подтверждение адреса на странице,
   где вводят пароль. */
.auth-brand {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.7rem;
    min-height: var(--tap-min);
    text-decoration: none;
    color: var(--color-text);
}
.auth-brand__text { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1; }
.auth-brand__name {
    font-family: var(--font-sans);
    font-weight: var(--brand-wordmark-weight);
    font-size: 1.125rem;
    letter-spacing: var(--brand-wordmark-tracking);
}
.auth-brand__eyebrow { font-size: 0.75rem; color: var(--color-text-muted); }
.auth-card { width: 100%; }
.auth-card .auth-card__notice { margin-bottom: var(--space-5); }
.auth-card .auth-form { max-width: none; }

/* «Что будет дальше» — три шага под формой регистрации: что человек получит,
   отдав почту. Номер — тихий кружок, не акцент: шаги поясняют, а не зовут. */
.auth-next { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-next__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.auth-next__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.auth-next__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.auth-next__num {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
    box-shadow: inset 0 0 0 1px rgba(var(--color-accent-rgb), 0.35);
}
.auth-next__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auth-next__head { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.auth-next__desc { font-size: 0.875rem; line-height: 1.45; color: var(--color-text-soft); }

/* Документы — тихой строкой внизу: согласие на регистрации ссылается на
   них, и они обязаны быть доступны со всех экранов входа. */
.auth-stage__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--space-4);
    margin-top: auto;
    font-size: 0.8125rem;
}
.auth-stage__legal a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    color: var(--color-text-muted);
    text-decoration: none;
}
.auth-stage__legal a:hover { color: var(--color-text); }

@media (min-width: 768px) {
    .auth-stage {
        align-items: center;
        /* Тёмная сцена бренда — в любой теме зрителя: это брендовая
           поверхность, а не контент. */
        background:
            radial-gradient(70% 55% at 50% 0%, rgba(var(--color-accent-rgb), 0.16) 0%, transparent 70%),
            radial-gradient(120% 90% at 100% 0%, #131A24 0%, transparent 55%),
            linear-gradient(160deg, #0B111A 0%, #080D14 55%, #05080E 100%);
    }
    .auth-stage__grain {
        display: block;
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        opacity: 0.4;
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    /* Знак Match Point за карточкой не ставим: лист формы закрывал его
       целиком, и наружу торчали только кончики лучей — два цветных клина по
       бокам формы читались артефактом. Сцену держат свечение сверху и зерно,
       знак — марка над формой. */
    .auth-stage__column {
        align-items: center;
        padding: clamp(2rem, 6vh, 4.5rem) var(--space-5);
        gap: var(--space-5);
    }
    .auth-brand { align-self: center; color: #fff; }
    .auth-brand__eyebrow { color: rgba(237, 238, 242, 0.5); }
    .auth-card {
        padding: clamp(2rem, 4vw, 2.5rem);
        border-radius: var(--radius-xl);
        background: var(--color-bg);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.06),
            0 30px 80px -24px rgba(0, 0, 0, 0.65),
            0 12px 24px -12px rgba(0, 0, 0, 0.35);
    }
    .auth-next { width: 100%; padding-inline: var(--space-2); }
    .auth-next__title { color: rgba(237, 238, 242, 0.55); }
    .auth-next__head { color: #EDEEF2; }
    .auth-next__desc { color: rgba(237, 238, 242, 0.6); }
    .auth-next__num { color: var(--color-accent-soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
    .auth-stage__legal { margin-top: 0; }
    .auth-stage__legal a { color: rgba(237, 238, 242, 0.5); }
    .auth-stage__legal a:hover { color: #fff; }
}

.auth-form {
    width: 100%;
    /* 25rem = 400px — жёсткий кап ширины GSI-кнопки Google (рендерится в
       cross-origin iframe, шире 400px не растянуть). Подводим всю auth-колонку
       под него, чтобы «Войти»/Google/FaceID совпадали по длине. */
    max-width: 25rem;
}
.auth-form__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
    font-variant-numeric: tabular-nums;
}
/* Тот же signature accent-tick, что на лендинге и в кабинете — единый язык
   вход↔кабинет (был editorial em-dash «— »). */
.auth-form__eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-accent), rgba(var(--color-accent-rgb), 0.15));
    box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.5);
    transform-origin: left center;
    flex: none;
}
@media (prefers-reduced-motion: no-preference) {
    .auth-form__eyebrow::before { animation: tickDraw 620ms var(--ease-out) 160ms both; }
}
.auth-form__title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.875rem, 3vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}
.auth-form__title em {
    font-style: normal;
    color: var(--color-accent);
    font-weight: 700;
}
.auth-form__subtitle {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin: 0 0 var(--space-5);
}

/* Поля внутри auth-form: тёплый input, коралловый фокус */
.auth-form .field { gap: var(--space-2); margin-bottom: var(--space-4); }
.auth-form .input,
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"],
.auth-form input[type="tel"] {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    width: 100%;
    color: var(--color-text);
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.auth-form .input:focus,
.auth-form input:focus {
    background: var(--color-surface);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
    outline: none;
}
/* Chrome / WebKit autofill заливает input стандартным cream-цветом — на dark
   теме выглядит инородно. Хак: фиктивная box-shadow inset держит реальный
   background, плюс text-fill-color заставляет textbox остаться светлым.
   Глобально на все input'ы, не только auth-form. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-text);
    caret-color: var(--color-text);
    box-shadow: 0 0 0 1000px var(--color-surface) inset, 0 0 0 1px var(--color-border) inset;
    transition: background-color 5000s ease-in-out 0s;
}
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--color-bg-soft) inset, 0 0 0 1px var(--color-border) inset;
}

.auth-form__forgot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.auth-form__forgot a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
}
.auth-form__forgot a:hover { text-decoration: underline; }

/* Field с правой ссылкой (например, "Забыли пароль?" над password input).
   Ссылка размещается через position: absolute в правом верхнем углу field,
   при этом физически в DOM идёт ПОСЛЕ input — Tab-порядок:
   email → password → link, нативное автозаполнение паролей работает. */
.field--with-link { position: relative; }
.field--with-link .field__link {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
}
.field--with-link .field__link:hover,
.field--with-link .field__link:focus-visible { text-decoration: underline; }

.auth-form__remember {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 var(--space-4);
    font-size: 0.9375rem;
    color: var(--color-text-soft);
    cursor: pointer;
}
.auth-form__remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    margin: 0;
    cursor: pointer;
}

/* Чек-лист ожидания письма: три коротких факта вместо абзаца — человек на
   этом экране читает по диагонали, ему нужно понять «что делать», а не «что
   мы думаем». */
.auth-checklist {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 0.9375rem;
    color: var(--color-text-soft);
}
.auth-checklist li {
    position: relative;
    padding-left: var(--space-4);
}
.auth-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* Ряд вторичных действий под кодом (повторная отправка + смена адреса):
   две ссылки одного вида и веса по центру. Прежде одно было кнопкой, другое
   подчёркнутой ссылкой, и на телефоне они расходились по разным строкам
   разной высоты. Повторная отправка — форма (POST), поэтому кнопка, но
   выглядит ссылкой; её обратный отсчёт («через 42 с») — та же строка. */
.auth-form__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 var(--space-5);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}
.auth-form__actions > form { margin: 0; }
.auth-form__link,
.auth-form .auth-form__link-btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
}
.auth-form__link:hover,
.auth-form .auth-form__link-btn:hover:not(:disabled) { background: none; text-decoration: underline; }
.auth-form .auth-form__link-btn:disabled { color: var(--color-text-muted); }
.auth-form__footer-sep { margin: 0 var(--space-2); color: var(--color-border); }

/* Поле кода из письма — шесть цифр крупно, с разрядкой и по центру: код
   переписывают из письма глазами, цифра к цифре, и обычное поле с мелким
   текстом слева заставляло сверять его посимвольно. */
.auth-form .auth-otp__input {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.45em;
    text-indent: 0.45em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-block: 0.6rem;
}
.auth-form .auth-otp__input::placeholder { letter-spacing: 0.45em; color: var(--color-text-muted); }

/* Ошибка формы авторизации: стоит между подзаголовком и первым полем —
   на пути взгляда к месту ошибки, а не в углу экрана. */
.auth-form .auth-form__error {
    margin-bottom: var(--space-4);
}
/* Адрес почты — своей строкой: его сверяют глазами, а внутри фразы длинный
   адрес рвался по дефису. Переносится по любому символу, только если сам
   не помещается в строку. */
.auth-form__email {
    display: block;
    margin-block: 2px;
    font-weight: 600;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/* Согласие под кнопкой: тише формы, но читаемо — это правовой текст, а не
   мелкий шрифт «для галочки». */
.auth-form__consent {
    margin: var(--space-3) 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    text-align: center;
}
.auth-form__consent a { color: var(--color-text-soft); }

.auth-form__divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: var(--space-5) 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.auth-form__divider::before,
.auth-form__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-form__oauth {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}
@media (min-width: 480px) { .auth-form__oauth { grid-template-columns: 1fr 1fr; } }
/* OAuth-блок наверху формы (--top) — divider под ним; верхний margin
   следует за subtitle, нижний прижимается к divider'у. */
.auth-form__oauth--top { margin-top: var(--space-4); }
.auth-form__oauth--top + .auth-form__divider { margin-top: var(--space-4); margin-bottom: var(--space-4); }

/* ── Способы входа (иерархия методов) ───────────────────────────────────
   auth-methods — вертикальный стек «быстрых» способов над email-формой.
   Единый ритм: passkey / One Tap / Google / Apple выглядят как один список. */
.auth-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* ui_auth_method — full-width ряд «иконка-плашка + label + хинт». */
.auth-method {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    /* Белая заливка, как у официальной кнопки Google рядом: два способа входа
       одного ранга обязаны выглядеть одинаково весомо. Серая заливка делала
       наш способ похожим на выключенный. */
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: border-color 150ms ease, background 150ms ease, transform 120ms ease;
}
.auth-method:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
}
.auth-method:active { transform: translateY(1px); }
.auth-method:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
}
.auth-method[disabled] { opacity: 0.55; pointer-events: none; }
.auth-method__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    color: var(--color-text-soft);
}
.auth-method__label { flex: 1; }
.auth-method__hint {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    padding: 0.18rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
/* brand-вариант (passkey) — лёгкий accent-tint, чтобы «беспарольный» способ
   читался как рекомендованный, но без нарушения filled-primary закона. */
.auth-method--brand {
    border-color: rgba(var(--color-accent-rgb), 0.35);
    background: rgba(var(--color-accent-rgb), 0.08);
}
.auth-method--brand:hover {
    border-color: rgba(var(--color-accent-rgb), 0.55);
    background: rgba(var(--color-accent-rgb), 0.12);
}
.auth-method--brand .auth-method__icon {
    background: rgba(var(--color-accent-rgb), 0.18);
    color: var(--color-accent-soft);
}
.auth-method.is-loading { opacity: 0.7; pointer-events: none; }

/* One Tap контейнер — GSI рендерит свою кнопку внутрь. Клипим под наш
   --radius-md (GSI shape rectangular ~4px не совпадал с «Войти»/FaceID) +
   растягиваем на всю ширину ряда: GSI капит ширину кнопки на 400px, из-за чего
   она короче «Войти»/FaceID — перекрываем через !important width:100%. */
.auth-onetap { display: flex; flex-direction: column; gap: var(--space-2); }
.auth-onetap__button {
    /* Без min-height: пустой контейнер (GSI не загрузился) схлопывается вместо
       того, чтобы держать пустой белый прямоугольник. */
    border-radius: var(--radius-md);
    overflow: hidden;
    /* GSI-кнопка (outline) всегда белая. Персонализированный вид карточки имеет
       СВОЙ, больший радиус, чем наш --radius-md клип — в верхних углах между
       двумя радиусами проступал серый фон. Заливаем контейнер тем же surface,
       что и белая карточка GSI, — щель становится невидимой. */
    background: var(--color-surface);
}
.auth-onetap__button > div { width: 100% !important; }

/* Статус-строка под способом (ошибка церемонии passkey/One Tap). */
.auth-method__status {
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.auth-inline-error { color: var(--color-danger); }
/* One Tap на лендинге: своей кнопки нет, видна только причина отказа. */
.landing-onetap .auth-method__status { margin-top: var(--space-2); color: var(--color-danger); }

/* ── Аккаунт → Безопасность (ключи доступа) ─────────────────────────────── */
.account-security { display: flex; flex-direction: column; gap: var(--space-5); }
.security-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(1.1rem, 3vw, 1.6rem);
}
.security-card__head {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    margin-bottom: var(--space-4);
}
.security-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    color: var(--color-accent-soft);
}
.security-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
    color: var(--color-text);
}
.security-card__desc {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.passkey-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.passkey-list__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.passkey-list__icon {
    display: inline-flex;
    width: 2rem; height: 2rem;
    flex-shrink: 0;
    align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    color: var(--color-text-soft);
}
.passkey-list__meta { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.passkey-list__name { font-weight: 500; color: var(--color-text); }
.passkey-list__sub { font-size: 0.8125rem; color: var(--color-text-muted); }
.passkey-list__remove { margin: 0; flex-shrink: 0; }

.passkey-add {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.passkey-add__hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.auth-form__footer {
    text-align: center;
    margin: var(--space-5) 0 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}
.auth-form__footer a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
}
.auth-form__footer a:hover { text-decoration: underline; }

/* На auth-страницах site-header не нужен — он мешает split-layout. */
.body--auth { background: var(--color-bg); }
/* С 768px фон страницы — в цвет низа тёмной сцены. Высота сцены дробная
   (по контенту карточки), и под ней оставались доли пикселя светлого фона,
   а «отскок» прокрутки на Mac открывал его полосой внизу экрана. */
@media (min-width: 768px) {
    .body--auth { background: #05080E; }
}
.body--auth .site-header,
.body--auth .site-footer { display: none; }
.body--auth main { padding: 0; min-height: 100vh; }
.body--auth main > .container {
    max-width: none;
    padding: 0;
    min-height: 100vh;
}
/* Тост на экранах входа — общий, как в кабинете: тёмная пилюля снизу по
   центру (.flash-wrap). Прежний перенос в правый верхний угол на светлую
   плашку остался от входа с промо-панелью (до 12.10): светлый текст тоста на
   светлом фоне пропадал, а в углу его закрывало окно Google One Tap. */

/* ============================================================
   B2C — Dashboard / Profile / Onboarding
   Применяем editorial-стиль поверх существующих классов.
   ============================================================ */

/* Сверху отступа нет: шапка Обзора — та же ui_section_header, что у всех
   страниц кабинета, и собственные 40px сверху опускали заголовок первого
   экрана ниже соседних разделов (122px против 106). Снизу — остаётся. */
.dashboard { padding: 0 0 clamp(1.5rem, 4vw, 2.5rem); }

/* Resume-first дашборд: блок «Ваши резюме» (head-row h2 + «Все резюме →») и
   стопка вспомогательных action-row'ов (база + отклики). Вертикальный ритм
   между блоками — из page-shell gap; свои self-margins не несут. */

.progress-bar {
    flex: 1;
    min-width: 180px;
    height: 8px;
    background: var(--color-bg-deep);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-deep));
    border-radius: var(--radius-sm);
    transition: width 0.6s ease;
}

/* Avatar в навигации b2c */
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: var(--space-3); }
.avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-text);
    text-decoration: none;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 0.875rem;
}

/* ----- Profile / b2c page sections ----- */
/* `.profile` / `.onboarding` рисуют карточку с белой подложкой — это
   корректный паттерн для b2c-страниц, где контент сам по себе компактный
   и нужна визуальная рамка. Admin-detail (например, user_detail) —
   наоборот, кладёт контент прямо на cream-фон, чтобы держать единую
   визуальную плотность с остальной админкой. */
.profile,
.onboarding {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: var(--space-5);
}
.profile h1,
.onboarding h1,
.legal h1 {
    font-family: var(--font-serif);
}
.onboarding__privacy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}
.onboarding__privacy-icon { flex: none; color: var(--color-success); }
.legal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 48rem;
    margin: clamp(1.5rem, 3vw, 2rem) auto;
}
.legal__header { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }

/* Cards / .card / .cards (admin overview) */
.cards {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-5);
}
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 2vw, 1.75rem);
}
.card h2, .card h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-3);
}

/* ============================================================
   ADMIN — теперь использует общий .app-shell/.app-sidebar layout.
   Здесь — только admin-специфика (бейдж в логотипе и заголовок h1
   editorial-стилем), остальное наследуется из b2c app-shell.
   ============================================================ */

/* Меню админки — то же тёмное меню, что у кабинета: его текст, бренд и
   подложка корня страницы (перескролл) рассчитаны на тёмный фон. Светлый фон
   здесь оставлял серо-белые пункты на светло-сером (контраст ниже AA), а под
   меню, ниже его высоты, просвечивала тёмная подложка. */

.app-sidebar__badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.10);
    border: 1px solid rgba(var(--color-accent-rgb), 0.28);
    border-radius: 99px;
    font-variant-numeric: tabular-nums;
}

.app-sidebar__user-icon {
    margin-left: auto;
    color: var(--color-text-muted);
    opacity: 0.7;
    transition: opacity 150ms ease, color 150ms ease;
}
.app-sidebar__user:hover .app-sidebar__user-icon { color: var(--color-accent); opacity: 1; }

.body--admin .app-main h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    letter-spacing: -0.025em;
    margin: 0 0 var(--space-5);
}

/* Tables — editorial light */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.responsive-table th, .responsive-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px dashed var(--color-border-soft);
    font-size: 0.9375rem;
}
.responsive-table th {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    background: var(--color-bg-soft);
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
    font-variant-numeric: tabular-nums;
}
.responsive-table tbody tr:last-child td { border-bottom: none; }
.responsive-table tbody tr:hover td { background: rgba(var(--color-accent-rgb), 0.04); }
@media (max-width: 767.98px) {
    .responsive-table thead { display: none; }
    .responsive-table, .responsive-table tbody, .responsive-table tr { display: block; }
    .responsive-table tr {
        margin-bottom: var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface);
    }
    .responsive-table td {
        display: flex;
        justify-content: space-between;
        gap: var(--space-3);
        border-bottom: 1px dashed var(--color-border-soft);
    }
    .responsive-table td::before {
        content: attr(data-label);
        font-family: var(--font-sans);
        font-size: 0.75rem;
        letter-spacing: 0;
        text-transform: none;
        color: var(--color-text-muted);
    font-variant-numeric: tabular-nums; }
}

/* Admin data-table (alias of responsive-table) */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.data-table th, .data-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px dashed var(--color-border-soft);
    font-size: 0.9375rem;
}
.data-table th {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    background: var(--color-bg-soft);
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
    font-variant-numeric: tabular-nums;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: rgba(var(--color-accent-rgb), 0.04); }
.data-table__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Timeline-вариант data-table для admin notification-detail (per-channel
   attempts): чуть плотнее по вертикали, левый акцент-рейл маркирует ряд как
   событие доставки. Без новой абстракции — модификатор существующей таблицы. */
.data-table--timeline td { vertical-align: top; }
.data-table--timeline tbody tr td:first-child {
    border-left: 2px solid var(--color-border);
    font-weight: 600;
}
/* Notification-detail контент: пары «поле → значение». */
.notification-detail__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin: 0;
}
.notification-detail__fields dt {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.notification-detail__fields dd { margin: 0 0 var(--space-2) 0; }
@media (min-width: 768px) {
    .notification-detail__fields { grid-template-columns: 180px 1fr; align-items: baseline; }
    .notification-detail__fields dt { text-align: right; }
}

/* Текстовая версия email-шаблона — pre с переносом длинных строк. */
.template-text-body {
    margin: 0;
    padding: var(--space-3);
    background: var(--color-surface-subtle, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow-y: auto;
}

/* Sandboxed HTML-preview email-шаблона. Изолированный iframe (sandbox=""):
   только просмотр, без скриптов/навигации (см. notification_template_detail.html). */
.template-html-preview {
    display: block;
    width: 100%;
    min-height: 320px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

/* Подсказка-«обновить» под queue-breakdown. Вертикальный ритм — через
   .admin-overview__board gap; здесь только типографика. */
.admin-overview__refresh-hint {
    font-size: 0.875rem;
}

/* ============================================================
   B2C app-shell — sidebar + main (повторяет admin layout, но
   с собственными группами и низом-аватаром).
   ============================================================ */

.app-shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}
@media (min-width: 992px) {
    /* 232px — ширина колонки прототипа. На 200px имя и подпись в карточке
       аккаунта ломались на два ряда, а пункты меню шли мельче остальной
       типографики кабинета. */
    .app-shell { grid-template-columns: 232px 1fr; }
}

.app-sidebar {
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
}
.app-sidebar > * { text-align: left; }
@media (max-width: 991.98px) {
    .app-sidebar.drawer {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: min(85vw, 320px);
        transform: translateX(-105%);
        transition: transform 200ms ease;
        z-index: 90;
        padding: calc(var(--space-5) + env(safe-area-inset-top, 0)) var(--space-4) var(--space-5);
        overflow-y: auto;
    }
}
@media (min-width: 992px) {
    .app-sidebar.drawer { transform: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
    .body--app .nav-toggle-button { display: none !important; }
    /* Десктопный sticky-sidebar компактнее мобильного drawer'а: у мыши нет
       требования 44px tap-target, а разреженное меню зря отжирало ширину. */
    .app-sidebar .nav-list__item a,
    .app-sidebar .nav-list__item a.tap-target {
        gap: 0.65rem;
        padding: 0.38rem 0.6rem;
        margin: 0.05rem 0;
        font-size: 0.875rem;
        min-height: 34px;
    }
    .app-sidebar .nav-list__icon { width: 1.125rem; height: 1.125rem; }
}
.app-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border);
}
.app-sidebar .nav-list {
    flex-direction: column;
    gap: 0;
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
    align-items: stretch;
}
.app-sidebar .nav-list__item {
    display: block;
    text-align: left;
}
.app-sidebar .nav-list__item a,
.app-sidebar .nav-list__item a.tap-target {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.875rem;
    padding: 0.5rem 0.75rem;
    margin: 0.1rem 0;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    transition: background 150ms ease, color 150ms ease;
    min-width: 0;
    /* Мобильный drawer — тот же селектор: держим tap-target ≥44px (WCAG 2.5.5).
       Десктопный sticky-sidebar компактится в @media (min-width:992px) ниже. */
    min-height: 44px;
    text-decoration: none;
    width: 100%;
    text-align: left;
}
.app-sidebar .nav-list__item a:hover {
    background: var(--color-bg-deep);
    color: var(--color-text);
}
.app-sidebar .nav-list__item a[aria-current="page"] {
    background: rgba(var(--color-accent-rgb), 0.14);
    color: var(--color-accent);
    font-weight: 600;
}
/* Бейдж справа в navigation-item (сейчас используется только Health для счётчика
   активных алертов; задаётся `<span class="nav-list__badge">{{ ui_badge ... }}</span>`).
   margin-left:auto прижимает к правому краю, чтобы строка не «прыгала» при появлении. */
.app-sidebar .nav-list__badge { margin-left: auto; display: inline-flex; }
.app-sidebar .nav-list__item a[aria-current="page"] .nav-list__icon {
    color: var(--color-accent);
}
.nav-list__icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.app-sidebar .nav-list__item a:hover .nav-list__icon { color: var(--color-text); }
.app-sidebar .nav-list__item a[aria-current="page"] .nav-list__icon { color: var(--color-accent); }
/* Трейлинг-группа рамки (уведомления) — прижата к низу и отделена линией:
   это не раздел работы, а входящее. `margin-top:auto` живёт ЗДЕСЬ, а не на
   подвале: там пустота падала МЕЖДУ уведомлениями и аккаунтом, и пункт висел
   один посреди пустого столбца. Облик пункта — общий `.nav-list__item`. */
/* Селектор с `.nav-list` намеренно: у `.app-sidebar .nav-list` стоит
   `margin: 0 0 …`, то есть margin-top:0 с большей специфичностью — одиночный
   `.app-sidebar__trailing` он молча перебивал, и группа не прижималась.
   Только прижатие к низу: отделяет её сама пустота над ней, как в прототипе.
   Линия здесь давала вторую горизонталь в 90px от границы карточки аккаунта —
   две черты подряд рябят и делят низкий столбец натрое. */
.app-sidebar .nav-list.app-sidebar__trailing { margin-top: auto; }
/* Счётчик в пункте меню — общий, а не «счётчик уведомлений»: второй пункт со
   счётчиком (отклики без движения — так в прототипе) обязан взять этот же. */
.nav-list__count[hidden] { display: none; }
.nav-list__count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
/* Подвал рамки — та же строка меню, что пункты выше: аватар, имя, подпись.
   Обводка вокруг неё делала из аккаунта отдельный предмет в конце списка
   разделов, хотя это такой же вход; в прототипе рамки нет. */
.app-sidebar__footer {
    margin-top: var(--space-2);
    padding: 0;
}
.app-sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    min-width: 0;
}
.app-sidebar__user-stack { display: flex; flex-direction: column; min-width: 0; }
/* Обе строки — в одну строку с многоточием: на десктопе колонка компактится до
   200px, и «Аккаунт и подписка» ломалось на два ряда, сбивая ритм подвала. */
.app-sidebar__user-name,
.app-sidebar__user-hint {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Подпись под именем называет, что за этой строкой (в прототипе — «Аккаунт и
   подписка»): без неё аватар с именем читается как украшение, а не как вход в
   раздел. */
.app-sidebar__user-hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}
.app-sidebar__user:hover { background: var(--color-bg-deep); }
.app-sidebar__logout { margin-top: 0; }
.app-sidebar__logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.5rem;
    /* Влево, как имя в строке над ним: `.tap-target` центрирует содержимое, и
       внутри одной карточки выход оказывался по центру, а имя — по краю. */
    justify-content: flex-start;
    background: transparent;
    /* Обводки нет: выход — редкое действие, а рамка на всю ширину внизу
       столбца весила больше любого раздела. Границу группы держит карточка. */
    border: 0;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
}
.app-sidebar__logout-btn:hover,
.app-sidebar__logout-btn:focus-visible {
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.06);
    outline: none;
}
.app-sidebar__logout-icon { color: currentColor; opacity: 0.85; }
.app-sidebar__user-name { font-size: 0.875rem; font-weight: 600; line-height: 1.2; }

.avatar--sm { width: 32px; height: 32px; font-size: 0.8125rem; }

.app-main {
    background: var(--color-bg);
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 4vw, 2.5rem);
    min-height: 100vh;
    min-width: 0;
}

/* Mobile top-bar в кабинете/админке — гамбургер + бренд.
   На desktop sidebar всегда виден, top-bar скрыт. */
.app-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: calc(clamp(1.5rem, 3vw, 2.25rem) * -1) calc(clamp(1rem, 4vw, 2.5rem) * -1) var(--space-5);
    padding: var(--space-3) clamp(1rem, 4vw, 2.5rem);
    padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    /* Выше нижней навигации (50): в топбаре живут всплывающие панели (колокольчик,
       переключатель профессий), а панель внутри контекста со слоем 40 не может
       подняться над элементом со слоем 50, каким бы ни был её собственный
       z-index. Пространственно они не спорят — верх и низ экрана, — значение
       имеет только порядок их потомков. */
    z-index: 60;
}
.app-topbar .nav-toggle-button { flex-shrink: 0; display: inline-flex !important; }
.app-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
}
.app-topbar__brand { min-height: var(--tap-min); }
/* ≤640px имя бренда скрыто и от ссылки остаётся квадрат 28px — зона нажатия
   добирается по обеим осям, знак остаётся прежнего размера. */
@media (max-width: 640px) {
    .app-topbar__brand { min-width: var(--tap-min); justify-content: center; }
}
.app-topbar__brand .brand-mark { --brand-mark-size: 28px; }
@media (min-width: 992px) {
    .app-topbar { display: none; }
}
/* Mobile: brand-name text прячется ≤640px чтобы освободить ~80px горизонтали
   под title профиля в pill switcher'е. Остаётся compact "P" mark. */
@media (max-width: 640px) {
    .app-topbar__brand-name { display: none; }
    .app-topbar { gap: var(--space-2); padding-inline: var(--space-3); }
}

.body--app .site-header,
.body--app .site-footer { display: none; }

/* ============================================================
   PROFILE — editorial кабинет
   ============================================================ */

.profile-page { display: flex; flex-direction: column; gap: var(--space-5); }

/* Hero card */
.profile-hero {
    background: var(--color-surface-elevated);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    position: relative;
    overflow: hidden;
    /* Hero — raised-уровень elevation-шкалы (выше content-карточек sm):
       якорит страницу профессии. */
    box-shadow: var(--shadow-md);
}
/* Light-streak signature по верхней кромке hero (--streak-violet токен,
   «премиум-сигнатура с референсов дизайнера» — раньше токен был, класс нет). */
.profile-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--streak-violet);
    opacity: 0.6;
    pointer-events: none;
    z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
    .profile-hero::after { animation: streakIn 900ms var(--ease-out) both; }
}
/* Убран декоративный purple radial-glow — читался как AI-slop-градиент, а
   просвечивая сквозь teal-alert давал грязный «зелёный→фиолетовый» переход.
   Hero — чистая surface-карточка. */

/* Ring готовности в hero — в accent (бренд), а не в tier-цвете: это
   completeness-gauge, качественный уровень несёт serif-вердикт рядом. */
/* Принудительный accent СНЯТ. Один и тот же показатель (готовность профессии)
   в списке рисовался цветом зоны, а на странице — брендовым синим: человек
   видел зелёный круг 92%, заходил внутрь и находил там синий круг 92%. Цвет
   в шкале либо значит одно и то же везде, либо не значит ничего. Теперь
   кольцо берёт цвет зоны из ui_score_ring, как и в списке. */

/* Fact-chips — теги (доменная экспертиза и т.п.) вместо плоских буллетов. */
.fact-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.fact-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text-soft);
    font-size: 0.8125rem;
    line-height: 1.35;
}
@media (min-width: 640px) {
    .profile-hero { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
}
@media (min-width: 768px) {
    .profile-hero { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.profile-hero > * { position: relative; z-index: 1; min-width: 0; }
.profile-hero__body { min-width: 0; }
.profile-hero__deck,
.profile-hero__name,
.profile-hero__meta { overflow-wrap: anywhere; word-break: break-word; }
.avatar--lg {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.profile-hero__deck {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(var(--color-text-rgb), 0.55);
    margin: 0 0 var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-variant-numeric: tabular-nums;
}
.profile-hero__deck .dot { color: rgba(var(--color-text-rgb), 0.4); }
.profile-hero__name {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}
.profile-hero__meta {
    color: rgba(var(--color-text-rgb), 0.7);
    font-size: 0.9375rem;
    margin: 0;
}
.profile-hero__meta .dot { color: rgba(var(--color-text-rgb), 0.4); margin: 0 0.25rem; }
.profile-hero .btn--primary { white-space: nowrap; }

/* Grid */
.profile-grid {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .profile-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.profile-grid__main,
.profile-grid__side {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Editorial card */
.surface-card {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    margin: 0;
    /* Premium base layer: глубина по умолчанию вместо плоского border-only.
       Раньше карточка была fill+hairline без тени — «дешёвый» tell на всех
       cabinet-страницах. Теперь indigo-tinted shadow-sm даёт слой. */
    box-shadow: var(--shadow-sm);
    transition: box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out), transform 240ms var(--ease-spring);
}
/* Интерактивные карточки (ссылки/кнопки/data-lift) поднимаются на hover. */
a.surface-card:hover,
button.surface-card:hover,
.surface-card[data-lift]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.surface-card__label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
    font-variant-numeric: tabular-nums;
}
.surface-card__head-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.surface-card__head-row .surface-card__label { margin: 0; }
.surface-card__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-4);
    color: var(--color-text);
}
.surface-card__title em {
    font-style: italic;
    color: var(--color-accent);
}
.surface-card__body {
    color: var(--color-text-soft);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0 0 var(--space-4);
}

/* Form row */
.form-row { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.profile-page .field { margin-bottom: 0; }
.profile-page .field__label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text-muted);
    text-transform: none;
    margin-bottom: 0.35rem;
    font-variant-numeric: tabular-nums;
}
.profile-page .input {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    font-size: 0.9375rem;
    color: var(--color-text);
    width: 100%;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.profile-page .input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
    outline: none;
}

/* Pills */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.25rem 0.6rem;
    border-radius: 99px;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
}
.pill--teal {
    background: rgba(var(--color-teal-rgb), 0.12);
    color: var(--color-teal);
    border-color: rgba(var(--color-teal-rgb), 0.3);
}
.pill--sage {
    background: rgba(var(--color-sage-rgb), 0.16);
    color: var(--color-sage);
    border-color: rgba(var(--color-sage-rgb), 0.32);
}

/* Toggle list */
.toggle-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.toggle-row { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; color: var(--color-text); }
/* Декоративный pill для статичных toggle-индикаторов (profile.html и т.п.).
   Для интерактивного — компонент ui_toggle (.toggle-switch с input). */
.toggle-pill {
    width: 38px; height: 22px;
    border-radius: 999px;
    background: var(--color-bg-deep);
    position: relative;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    transition: background 200ms ease, border-color 200ms ease;
}
/* Knob: всегда white-ish. До этого fix'а OFF-knob = surface (≈white)
   на surface-deep — почти invisible (даже border не помогал); ON-knob =
   --color-text (черный на light, ярко-контрастный на violet bg —
   читалось дешево/strident). Сейчас knob един: белый, с легкой тенью
   для depth. На OFF добавили inset-shadow на track-фон чтобы создать
   «впадинку» — knob воспринимается приподнятым над поверхностью. */
.toggle-pill::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.toggle-pill { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); }
.toggle-pill--on {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.toggle-pill--on::after {
    transform: translateX(16px);
    /* На accent-фоне knob остаётся белым; чуть усиливаем shadow для
       depth на цветной поверхности. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

/* Subscription price */
.sub-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: var(--space-3) 0 var(--space-4);
}
.sub-price__amount {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3vw, 2.75rem);
    letter-spacing: -0.03em;
    color: var(--color-text);
    line-height: 1;
}
.sub-price__currency { font-family: var(--font-sans); font-size: 0.875rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.sub-price__until {
    margin-left: auto;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* «Живая» subscription-карточка. Раньше блок был статическим
   pricing-style — sub-price + sub-currency + sub-until. Сейчас это
   dynamic-state card: pulse-dot pill, accent border-left по состоянию,
   expiry-progress, feature-list. */
.sub-card {
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms ease;
}
.sub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.18);
}
/* Per-state accent border-left: визуально dispатчит status без чтения pill. */
.sub-card--active    { border-left: 3px solid rgba(var(--color-sage-rgb, 92 168 110), 0.65); }
.sub-card--expiring  { border-left: 3px solid rgba(var(--color-amber-rgb, 217 119 6), 0.7); }
.sub-card--grace     { border-left: 3px solid rgba(var(--color-coral-rgb, 200 66 61), 0.6); }
.sub-card--expired   { border-left: 3px solid var(--color-coral); }
.sub-card--cancelled { border-left: 3px solid rgba(var(--color-text-muted-rgb, 100 116 139), 0.5); }
.sub-card--guest     { border-left: 3px solid rgba(var(--color-accent-rgb, 99 102 241), 0.5); }
.sub-card--degraded  { opacity: 0.85; }

.sub-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.sub-card__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex: none;
}
/* Pulse-dot animations: sage = «жив, активный»; amber = «осторожно»;
   coral = «срочно». Все ≤ 200ms peak, prefers-reduced-motion блокирует. */
.sub-card__dot--sage   { background: var(--color-sage-deep, var(--color-sage)); animation: sub-pulse-sage 2.4s ease-in-out infinite; }
.sub-card__dot--amber  { background: var(--color-amber); animation: sub-pulse-amber 1.6s ease-in-out infinite; }
.sub-card__dot--coral  { background: var(--color-coral); animation: sub-pulse-coral 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .sub-card__dot--sage,
    .sub-card__dot--amber,
    .sub-card__dot--coral { animation: none; }
}
@keyframes sub-pulse-sage {
    0%, 100% { box-shadow: 0 0 0 0   rgba(var(--color-sage-rgb, 92 168 110), 0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(var(--color-sage-rgb, 92 168 110), 0.00); }
}
@keyframes sub-pulse-amber {
    0%, 100% { box-shadow: 0 0 0 0   rgba(var(--color-amber-rgb, 217 119 6), 0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(var(--color-amber-rgb, 217 119 6), 0.00); }
}
@keyframes sub-pulse-coral {
    0%, 100% { box-shadow: 0 0 0 0   rgba(var(--color-coral-rgb, 200 66 61), 0.65); }
    50%      { box-shadow: 0 0 0 5px rgba(var(--color-coral-rgb, 200 66 61), 0.00); }
}

/* Meta-row: «Действует до DD.MM.YYYY» + thin progress-bar для expiry-window
   (≤30 дней). Bar делает «срочно» tangible — sage→amber→coral plays на
   gradient в зависимости от близости к expiry. */
.sub-meta { margin: var(--space-3) 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.sub-meta__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.sub-meta__label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.sub-meta__date {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
/* Progress: bar + текст как separate-блоки, не overlay. Раньше text был
   absolute поверх 4px bar — обрезался по верх/низ. Сейчас text сидит
   под bar'ом в нормальном flow. */
.sub-meta__progress {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.sub-meta__bar {
    height: 6px;
    border-radius: 3px;
    background: var(--color-surface-2, rgba(0,0,0,0.06));
    overflow: hidden;
}
/* Width drives from --days CSS-var (1..30) → процент через calc. */
.sub-meta__bar-fill {
    display: block;
    height: 100%;
    width: calc(var(--days, 0) / 30 * 100%);
    background: linear-gradient(90deg, var(--color-coral), var(--color-amber) 50%, var(--color-sage));
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sub-meta__bar-text {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    align-self: flex-end;
    font-variant-numeric: tabular-nums;
}

/* Feature-list — top-3 фичевых лимита плана. Превращает абстрактное
   «990 ₽/мес» в конкретное «вот что ты получаешь». ∞ = unlimited. */
.sub-features {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.sub-features__item {
    display: grid;
    grid-template-columns: 0.7rem 1fr auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
}
.sub-features__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb, 99 102 241), 0.4);
}
.sub-features__label { color: var(--color-text); }
.sub-features__limit {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* Security */
.security-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.security-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--color-text); }
.dot--coral {
    width: 6px; height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    display: inline-block;
}
.security-row strong { font-weight: 600; color: var(--color-sage); }

/* Sec-card (новый: после удаления fake-2FA row'а). label + value по grid,
   tone-dot слева. ok=sage, attention=coral, neutral=slate. Стиль ближе
   к sub-features pattern на той же странице — визуальная согласованность. */
.sec-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.sec-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.sec-row {
    display: grid;
    grid-template-columns: 0.7rem 1fr auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9375rem;
    color: var(--color-text);
}
.sec-row__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-text-muted);
}
.sec-row--ok .sec-row__dot        { background: var(--color-sage-deep, var(--color-sage)); }
.sec-row--attention .sec-row__dot { background: var(--color-coral); }
.sec-row--neutral .sec-row__dot   { background: rgba(var(--color-text-muted-rgb, 100 116 139), 0.55); }
.sec-row__label { color: var(--color-text); }
.sec-row__value {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.sec-row--ok .sec-row__value        { color: var(--color-sage-deep, var(--color-sage)); }
.sec-row--attention .sec-row__value { color: var(--color-coral); font-weight: 600; }

/* =====================================================================
   Iconography (Lucide sprite — /static/icons/lucide.svg)
   ===================================================================== */
.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    color: currentColor;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    line-height: 0;
}
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 16px; height: 16px; }
.icon--md { width: 18px; height: 18px; }
.icon--lg { width: 22px; height: 22px; }
.icon--xl { width: 28px; height: 28px; }

/* ============================================================================
   Icon plate — стандартизованный контейнер вокруг иконки.
   ============================================================================
   Два variant'а (см. components/_icon_plate.html):
     outlined — small contextual; rounded circle + 1px outline + radial wash
                + inset glow + drop-shadow на иконке.
                Применяется в row-items (open-question, hint-row,
                recommendation, etc.) и в карточках типа example-card.
     filled   — large premium claim; rounded-square 12px + pastel fill +
                цветной icon + soft shadows.
                Применяется в hero-snapshot, large stat cards.
   Tone задаётся modifier'ом (--accent / --amber / --sage / --teal /
   --danger / --slate) — overrides --plate-rgb.
*/
.icon-plate {
    --plate-rgb: var(--color-accent-rgb);
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
}
.icon-plate--sm { width: var(--icon-plate-sm); height: var(--icon-plate-sm); }
.icon-plate--md { width: var(--icon-plate-md); height: var(--icon-plate-md); }
.icon-plate--lg { width: var(--icon-plate-lg); height: var(--icon-plate-lg); }

/* --- outlined variant ---
   Clean dry badge — без glow/drop-shadow вокруг и на иконке. Эталон —
   .example-card__icon на лендинге (slate). На vibrant tone'ах drop-shadow
   давал заметное свечение → убран. Tone выражается через border + subtle
   bg-tint, не через bloom. */
.icon-plate--outlined {
    /* Squircle (не круг) — единый app-tile язык с лендингом (filled) и Modern-
       SaaS (Linear/Vercel/iOS). Радиус растёт с размером, как у filled. */
    border-radius: var(--radius-md);
    background:
        radial-gradient(120% 120% at 50% 0%,
            rgba(var(--plate-rgb), 0.24) 0%,
            rgba(var(--plate-rgb), 0.08) 55%,
            transparent 100%),
        var(--color-surface);
    border: 1px solid rgba(var(--plate-rgb), 0.35);
    color: rgb(var(--plate-rgb));
    /* Нейтральное заземление (не цветное) + тактичный цветной bloom. Раньше
       единственная тень была цветной → на vibrant-тонах читалась как «glow».
       Neutral drop-shadow = «дорогое», цвет только намёком. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),        /* верхний catch-light */
        0 1px 2px rgba(15, 23, 42, 0.06),               /* нейтральное заземление */
        0 2px 8px -3px rgba(var(--plate-rgb), 0.18);    /* мягкий цветной намёк */
}
.icon-plate--outlined.icon-plate--md { border-radius: var(--radius-lg); }
.icon-plate--outlined.icon-plate--lg { border-radius: var(--radius-lg); }
.icon-plate--outlined .icon {
    width: 17px; height: 17px;
    stroke-width: var(--icon-stroke);
}
.icon-plate--outlined.icon-plate--md .icon { width: 19px; height: 19px; }
.icon-plate--outlined.icon-plate--lg .icon { width: 23px; height: 23px; }

/* --- filled variant --- */
.icon-plate--filled {
    /* Proportional squircle: fixed 11px на lg (56px) читался как rounded-square.
       Радиус растёт с размером → консистентный «отлитый» силуэт. */
    border-radius: var(--radius-md);
    /* Тон-градиент (сверху ярче) вместо плоской заливки — даёт объём/«отлитый»
       вид. Крепкий hairline-ring + верхний catch-light + нейтральное
       заземление + тактичный цветной намёк = дорогой «жетон». */
    background: linear-gradient(158deg,
        rgba(var(--plate-rgb), 0.20) 0%,
        rgba(var(--plate-rgb), 0.09) 100%);
    color: rgb(var(--plate-rgb));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 0 0 1px rgba(var(--plate-rgb), 0.22),
        0 2px 4px rgba(15, 23, 42, 0.05),               /* нейтральное заземление */
        0 6px 16px -7px rgba(var(--plate-rgb), 0.26);   /* мягкий цветной намёк */
}
.icon-plate--filled.icon-plate--md { border-radius: var(--radius-lg); }
.icon-plate--filled.icon-plate--lg { border-radius: var(--radius-lg); }
.icon-plate--filled .icon {
    width: 18px; height: 18px;
    stroke-width: var(--icon-stroke);
}
.icon-plate--filled.icon-plate--md .icon { width: 22px; height: 22px; }
.icon-plate--filled.icon-plate--lg .icon { width: 26px; height: 26px; }

/* --- tones --- */
.icon-plate--accent { --plate-rgb: var(--color-accent-rgb); }
.icon-plate--amber  { --plate-rgb: var(--color-amber-rgb); }
.icon-plate--sage   { --plate-rgb: var(--color-sage-rgb); }
.icon-plate--teal   { --plate-rgb: var(--color-teal-rgb); }
.icon-plate--danger { --plate-rgb: var(--color-danger-rgb); }
.icon-plate--coral  { --plate-rgb: var(--color-coral-rgb, 200 66 61); }
.icon-plate--slate  { --plate-rgb: var(--color-slate-rgb); }

/* ============================================================================
   Tooltip — CSS-only inline-подсказка (см. components/_tooltip.html).
   ============================================================================
   Pseudo-elements ::before (arrow) + ::after (body). Активируется на
   :hover и :focus-visible — клавиатура и mobile-tap доступны. */
.tooltip-target {
    /* Always-dark tooltip badge (theme-invariant): один источник значения
       вместо трёх хардкодов #1F2937 по ::after/::before. */
    --tooltip-bg: #1F2937;
    position: relative;
    cursor: help;
    text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.tooltip-target:focus-visible {
    outline: none;
    text-decoration-color: var(--color-accent);
}
.tooltip-target::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.55rem 0.75rem;
    /* Always-dark badge (canonical tooltip pattern, theme-invariant —
       --color-bg-deep это «глубокий фон» темы, в light = #FFFFFF). */
    background: var(--tooltip-bg);
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    border-radius: var(--radius-md);
    max-width: 260px;
    width: max-content;
    white-space: normal;
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 100;
}
.tooltip-target::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 100;
}
.tooltip-target--top::after    { bottom: calc(100% + 10px); }
.tooltip-target--top::before   { bottom: calc(100% + 0px); border-top-color: var(--tooltip-bg); }
.tooltip-target--bottom::after { top: calc(100% + 10px); }
.tooltip-target--bottom::before { top: calc(100% + 0px); border-bottom-color: var(--tooltip-bg); }
.tooltip-target:hover::after,
.tooltip-target:hover::before,
.tooltip-target:focus-visible::after,
.tooltip-target:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .tooltip-target::after,
    .tooltip-target::before { transition: opacity 0ms; transform: translateX(-50%); }
}

/* Styleguide icon-grid */
.sg-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}
.sg-icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.85rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    background: var(--color-bg-soft);
    text-align: center;
    color: var(--color-text);
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.sg-icon-cell:hover { background: var(--color-bg-deep); color: var(--color-accent); border-color: rgba(var(--color-accent-rgb), 0.3); }
.sg-icon-cell code { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-text-muted); letter-spacing: 0.04em; }
.sg-subhead { font-family: var(--font-sans); font-weight: 600; font-size: 1.1rem; margin: 1.25rem 0 0.6rem; color: var(--color-text); }
.sg-label { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-muted); margin-top: 0.35rem; }

/* =====================================================================
   Component library extensions: tag/alert/toggle/card variants/pricing
   ===================================================================== */

/* ---- Tag ---- */
/* Базовый .tag: дефолтный вариант ui_tag раньше НЕ имел стилей вообще
   (существовали только модификаторы navy/amber/mono) — целевые роли в
   «Направлениях» и tech_stack-чипы рендерились голым текстом. Зеркалит
   .fact-chip (единый chip-канон). */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text-soft);
    font-size: 0.8125rem;
    line-height: 1.35;
}
.tag--navy  { color: var(--color-violet); }
.tag--amber { color: var(--color-amber); }
.tag.tag-mono { font-size: 0.68rem; letter-spacing: 0; text-transform: none; }

/* ---- Card variants & paddings ---- */
.surface-card--default  { background: var(--color-bg-soft); border-color: var(--color-border); }
.surface-card--bordered { background: transparent; border-color: var(--color-border-strong, var(--color-border)); }
.surface-card--coral    { background: rgba(var(--color-accent-rgb), 0.06); border-color: rgba(var(--color-accent-rgb), 0.22); }
.surface-card--navy     { background: var(--color-surface-elevated); border-color: rgba(var(--color-accent-rgb), 0.4); color: var(--color-text); box-shadow: var(--glow-soft); }
.surface-card--navy .surface-card__title,
.surface-card--navy .surface-card__body,
.surface-card--navy .surface-card__eyebrow { color: var(--color-text); }
/* Канон form-group eyebrow (эталон — .editor-section__title в контенте резюме):
   sans, 0.6875rem, weight 700, letter-spacing 0.1em, uppercase, muted. Тот же
   вид у заголовков блоков рейла письма, кастомайз-панели и карточек. */
.surface-card__eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}
.surface-card__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}
.surface-card--p-sm { padding: clamp(0.875rem, 2vw, 1.125rem); }
.surface-card--p-md { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.surface-card--p-lg { padding: clamp(1.75rem, 3.2vw, 2.5rem); }

/* ---- Alert ---- */
/* Alert — inline-уведомление. Direction «технологичная точность»: НЕ
   крикливый цветной текст на цветном тинте (низкий контраст, тяжело), а
   лёгкий вариант-тинт + цветной левый accent-stripe + цветная иконка, при
   ЧИТАЕМОМ тёмном тексте. Вариант несёт цвет = иконка/stripe, смысл = текст. */
.alert {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    padding-left: calc(1.125rem + 3px);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    align-items: flex-start;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text);
}
.alert::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--alert-accent, var(--color-accent));
}
/* margin-top равен половине разницы между строкой (22px) и иконкой (16px):
   значок встаёт по оптическому центру первой строки и в однострочной плашке,
   и в многострочной. Прежние 2px оставляли его на пиксель выше. */
.alert__icon { flex-shrink: 0; line-height: 0; margin-top: 3px; color: var(--alert-accent, var(--color-accent)); }
/* Вращение — утилита, а не свойство трёх конкретных контейнеров. Правило
   существовало трижды (alert, state-card, progress-indicator), каждый раз
   привязанное к своему предку, поэтому иконка со статусом «идёт пересчёт» на
   карточке направления просто стояла на месте. Покрываем обе формы: класс на
   самой иконке (ui_icon вешает его на svg) и на обёртке. */
.is-spinning svg,
svg.is-spinning { animation: spin 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) {
    .is-spinning svg,
    svg.is-spinning { animation: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.alert__content { flex: 1; min-width: 0; }
.alert__title { margin: 0 0 0.25rem; font-weight: 600; font-family: var(--font-sans); color: var(--color-text); }
.alert__body  { margin: 0; color: var(--color-text-soft); }
/* Мета-строка: timestamp / id / error_code. Монопространственная,
   compact, заметно тише body чтобы не перебивать message. */
.alert__meta {
    margin: var(--space-2) 0 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    word-break: break-all;
    font-variant-numeric: tabular-nums;
}
/* CTA-ряд под alert'ом: одна или несколько кнопок-действий. */
.alert__cta { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Compact — для постоянных плашек-объяснений (например «лента сужена
   предпочтениями»): человек видит их на каждой загрузке страницы и читает
   один раз в жизни, поэтому полноразмерная плашка забирает первый экран у
   того, ради чего страницу открыли. Текст и действие встают в одну строку,
   как только ширина это позволяет. */
.alert--compact {
    padding: var(--space-3) var(--space-4);
    padding-left: calc(var(--space-4) + 3px);
}
.alert--compact .alert__title { font-size: 0.9375rem; }
.alert--compact .alert__cta { margin-top: var(--space-2); }
@media (min-width: 640px) {
    /* Текст остаётся связной фразой слева, действие уходит вправо. Через
       space-between четыре куска (заголовок, пояснение, мета, кнопка)
       разъезжались по всей ширине и переставали читаться как одно
       сообщение. */
    .alert--compact .alert__content {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-1) var(--space-3);
    }
    .alert--compact .alert__cta { margin-top: 0; margin-left: auto; align-self: center; }
}

/* Варианты: --alert-accent (иконка + stripe) + лёгкий тинт + hairline. */
.alert--info    { --alert-accent: var(--color-teal);    background: rgba(var(--color-teal-rgb), 0.055);   border-color: rgba(var(--color-teal-rgb), 0.22); }
.alert--success { --alert-accent: var(--color-success); background: rgba(var(--color-sage-rgb), 0.055);   border-color: rgba(var(--color-sage-rgb), 0.22); }
.alert--warning { --alert-accent: var(--color-warning); background: rgba(var(--color-amber-rgb), 0.06);   border-color: rgba(var(--color-amber-rgb), 0.24); }
.alert--danger  { --alert-accent: var(--color-danger);  background: rgba(var(--color-danger-rgb), 0.055); border-color: rgba(var(--color-danger-rgb), 0.24); }

/* ---- Cooldown (`ui_cooldown`) ----
   Отказ с ожиданием: вариант alert, у которого время до разблокировки —
   отдельная строка цифрами (табличные, чтобы «9:59» → «10:00» не дёргала
   строку), а по окончании плашка становится success и меняет значок.
   Значков два в разметке, видимый выбирает класс: без JS виден значок
   ожидания. */
.cooldown__clock {
    margin-top: var(--space-1);
    color: var(--color-text);
    font-weight: 500;
    word-break: normal;
}
.cooldown__icon-wait,
.cooldown__icon-done { display: inline-flex; }
.cooldown__icon-done { display: none; }
.cooldown.is-done .cooldown__icon-wait { display: none; }
.cooldown.is-done .cooldown__icon-done { display: inline-flex; }
/* Отсчёт истёк: причина отказа больше не правда («форма закрыта» рядом с
   галочкой читалась противоречием) — остаётся одна строка «можно снова». */
.cooldown.is-done .alert__body { display: none; }
.cooldown.is-done .cooldown__clock { margin-top: 0; font-size: inherit; }

/* ---- State Card ----
   Крупная full-width state-карточка для terminal-failures (например
   profile.scoring_status=permanently_failed), 404/500 страниц и больших
   dead-end empty-state'ов. Inline `ui_alert` визуально слишком "лёгкий"
   для этих случаев; state-card даёт центрированный layout с большой
   иконкой, увесистым typography и контрастной рамкой по variant'у. */
.state-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-xl, 18px);
    border: 1px solid transparent;
    align-items: start;
    margin: 0;
}
@media (max-width: 540px) {
    .state-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.state-card__icon {
    flex-shrink: 0;
    line-height: 0;
    padding: var(--space-3);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
}

.state-card__content { min-width: 0; }
.state-card__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    color: inherit;
}
.state-card__body  {
    margin: 0;
    color: var(--color-text);
    opacity: 0.85;
    font-size: 0.9375rem;
    line-height: 1.55;
}
.state-card__meta {
    margin: var(--space-3) 0 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    word-break: break-all;
    font-variant-numeric: tabular-nums;
}
.state-card__cta {
    margin-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
@media (max-width: 540px) {
    .state-card__cta { justify-content: center; }
}
/* Variant tints. Border + icon-background — accent-цвет; body-text
   остаётся читаемым `--color-text`, чтобы narrative не "кричал". */
.state-card--info {
    background: rgba(var(--color-teal-rgb), 0.06);
    border-color: rgba(var(--color-teal-rgb), 0.30);
}
.state-card--info .state-card__icon { color: var(--color-teal); background: rgba(var(--color-teal-rgb), 0.12); }
.state-card--info .state-card__title { color: var(--color-teal); }

.state-card--warning {
    background: rgba(var(--color-amber-rgb), 0.06);
    border-color: rgba(var(--color-amber-rgb), 0.32);
}
.state-card--warning .state-card__icon { color: var(--color-amber); background: rgba(var(--color-amber-rgb), 0.14); }
.state-card--warning .state-card__title { color: var(--color-amber); }

.state-card--danger {
    background: rgba(var(--color-danger-rgb), 0.06);
    border-color: rgba(var(--color-danger-rgb), 0.32);
}
.state-card--danger .state-card__icon { color: var(--color-danger); background: rgba(var(--color-danger-rgb), 0.14); }
.state-card--danger .state-card__title { color: var(--color-danger); }

.state-card--neutral {
    background: var(--color-bg-deep, rgba(0, 0, 0, 0.025));
    border-color: var(--color-border);
}
.state-card--neutral .state-card__icon { color: var(--color-text-muted); }
.state-card--neutral .state-card__title { color: var(--color-text); }

/* ---- Living progress ----
   Экран ожидания durable-операции (30s–3min LLM в фоне).

   Композиция: editorial-левая колонка — mono-надпись, serif-заголовок,
   измерительная шкала времени, mono-ledger «идёт / осталось». Кольца с
   процентами здесь больше нет: процент от оценки — точность, которой у нас
   нет, а без ETA он вырождался в вечный спиннер. Единственная «дорогая»
   деталь — сама шкала: волосяная линия с делениями по четвертям и мягко
   дышащим передним краем. Всё остальное держится типографикой и воздухом.

   CSS-var контракт с JS не изменился: `--score` (0..100) на элементе
   `[data-progress-ring]` (теперь это `.living-progress__scale`). */
.living-progress {
    --lp-accent: var(--color-accent);
    --lp-accent-rgb: var(--color-accent-rgb);
    --lp-rail: 3px;
    --lp-scale-h: 15px;
    display: grid;
    gap: clamp(var(--space-4), 2.4vw, var(--space-6));
    padding: clamp(var(--space-5), 3.4vw, var(--space-8)) clamp(var(--space-5), 3vw, var(--space-8));
    margin: 0 0 var(--space-5);
    border-radius: var(--radius-xl, 18px);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    position: relative;
    overflow: hidden;
}
/* Плоский вид для фокус-режима: ни рамки, ни подложки, ни пятна. В chrome-less
   мастере карточка внутри карточки — лишний уровень: экран и так один объект,
   а рамка вокруг заголовка со шкалой добавляла к нему вторую границу и сотню
   пикселей воздуха. В разделах кабинета компонент остаётся карточкой — там он
   один блок среди других. */
.living-progress--plain {
    border: 0;
    background: none;
    padding: 0;
    margin-bottom: var(--space-4);
    gap: var(--space-4);
}
.living-progress--plain::before { display: none; }
/* Без рамки и подложки обрезать нечего, а `overflow: hidden` карточного вида
   срезал свисающий левый край глифов заголовка: «Работа» начиналась с
   половины «Р». */
.living-progress--plain { overflow: visible; }
/* Отрицательный отступ ledger рассчитан на карточный gap (32-64px): он
   подтягивает строку к шкале. В плоском виде gap вдвое меньше, и тот же
   отступ затаскивал ledger на подсказку под ним — строка «придёт
   уведомление» шла перечёркнутой. */
.living-progress--plain .living-progress__ledger { margin-top: calc(var(--space-2) * -1); }

/* Атмосфера: одно очень мягкое пятно акцента у левого верхнего угла — ровно
   столько «дорогого», сколько нужно, чтобы карточка не читалась как плоский
   белый прямоугольник. Без градиента по всей плоскости. */
.living-progress::before {
    content: "";
    position: absolute;
    inset: -40% 55% 40% -20%;
    background: radial-gradient(closest-side,
        rgba(var(--lp-accent-rgb), 0.10), transparent 100%);
    pointer-events: none;
}
.living-progress > * { position: relative; }

.living-progress__head {
    display: grid;
    gap: var(--space-2);
    max-width: 34ch;
}
.living-progress__eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Заголовок — та же display-типографика, что у шапок кабинета (.section-display):
   система сознательно держит один гротеск на весь UI, а «дорогое» даёт точность
   набора — плотный трекинг и вес, а не контраст засечек. */
.living-progress__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem);
    line-height: 1.06;
    letter-spacing: -0.028em;
    text-wrap: balance;
    color: var(--color-text);
}
.living-progress__intro {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* ---- Шкала времени ----
   Заполнение = прошло / типично. Деления по четвертям читаются как измерение,
   а не как декоративная разметка: у ожидания есть длина, и её видно. */
.living-progress__scale {
    position: relative;
    /* Ширину задаём явно: у шкалы только absolute-дети, и в контейнере с
       align-items:center (экран ожидания внутри документа) она схлопывалась
       в вертикальную чёрточку — артефакт, который читается как дефект. */
    width: 100%;
    max-width: 28rem;
    height: var(--lp-scale-h);
    isolation: isolate;
}
.living-progress__track,
.living-progress__fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: var(--lp-rail);
    transform: translateY(-50%);
    border-radius: 999px;
}
.living-progress__track {
    right: 0;
    background: color-mix(in srgb, var(--lp-accent) 14%, var(--color-border-soft));
}
.living-progress__fill {
    width: calc(var(--score, 0) * 1%);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--lp-accent) 45%, transparent) 0%,
        var(--lp-accent) 100%);
    transition: width 1s linear;
}
/* Передний край — тонкая игла, как курсор измерительного прибора, а не ручка
   слайдера: шкалу не тянут мышью, по ней читают. Дышит раз в 2.4s — этого
   достаточно, чтобы блок читался живым между посекундными тиками цифр. */
.living-progress__fill::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 2px;
    height: var(--lp-scale-h);
    transform: translate(50%, -50%);
    border-radius: 1px;
    background: var(--lp-accent);
    animation: lp-breathe 2.4s ease-in-out infinite;
}
/* Деления по четвертям — короткие штрихи выше и ниже рельса. Они и делают из
   полосы шкалу: у ожидания появляется длина, которую видно глазом. */
.living-progress__ticks {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(90deg,
        color-mix(in srgb, var(--color-text) 20%, transparent) 0 1px,
        transparent 1px 25%);
    background-position: 0 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0 32%, transparent 32% 68%, #000 68% 100%);
    mask-image: linear-gradient(180deg, #000 0 32%, transparent 32% 68%, #000 68% 100%);
}

@keyframes lp-breathe {
    0%, 100% { box-shadow: 0 0 6px 1px rgba(var(--lp-accent-rgb), 0.35); }
    50%      { box-shadow: 0 0 12px 3px rgba(var(--lp-accent-rgb), 0.14); }
}

/* Время неизвестно (пустое окно ETA) — полосы нет вовсе. Вместо неё волосяная
   линия с бегущим бликом: она не обещает долю пройденного пути, но показывает,
   что процесс идёт. */
.living-progress--untimed .living-progress__fill,
.living-progress--untimed .living-progress__ticks { display: none; }
.living-progress--untimed .living-progress__track {
    background-image: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--lp-accent-rgb), 0.55) 45%,
        rgba(var(--lp-accent-rgb), 0.55) 55%,
        transparent 100%);
    background-size: 38% 100%;
    background-repeat: no-repeat;
    animation: lp-drift 2.6s ease-in-out infinite;
}
@keyframes lp-drift {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

/* Дольше обычного: шкала стоит на краю, край перестаёт дышать — врать про
   оставшееся время нечем, и подпись говорит это прямо. */
.living-progress--overrun .living-progress__fill {
    width: 100%;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--lp-accent) 30%, transparent) 0%,
        color-mix(in srgb, var(--lp-accent) 55%, transparent) 100%);
}
.living-progress--overrun .living-progress__fill::after { animation: none; opacity: 0.7; }

/* ---- Ledger ---- */
.living-progress__ledger {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    justify-content: space-between;
    align-items: baseline;
    margin: calc(var(--space-3) * -1) 0 0;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    letter-spacing: 0;
}
/* Доля сделанной работы — главный ответ экрана ожидания, и вес у неё
   соответствующий: раньше «готово 1 из 4» было самой мелкой и бледной
   строкой на экране, а самой крупной — «Работа идёт», которая ничего не
   сообщает. */
.living-progress__done {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
}
.living-progress__elapsed {
    color: var(--color-text-soft);
    font-size: 1rem;
}
/* Доля есть — время уходит вправо, к остатку: слева «сколько сделано»,
   справа «сколько это длится». */
.living-progress__done ~ .living-progress__elapsed { margin-left: auto; }
.living-progress__remaining {
    color: var(--color-text-muted);
    min-height: 1.2em;
}

/* ---- Ротация статус-фраз (используется overview-экраном) ---- */
.living-progress__status {
    position: relative;
    min-height: 1.5em;
}
.living-progress__status-line {
    position: absolute;
    inset: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 420ms ease, transform 420ms ease;
}
.living-progress__status-line.is-active {
    opacity: 1;
    transform: translateY(0);
}

.living-progress__hint {
    margin: 0;
    max-width: 46ch;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .living-progress__fill { transition: none; }
    .living-progress__fill::after,
    .living-progress--untimed .living-progress__track { animation: none; }
    .living-progress__status-line { transition: none; }
}

/* Processing workspace — pre-M1 паттерн воскрешён для затяжных scoring/
   rescore-операций. Hero (existing living-progress) + stepper + 3 preview
   cards + bottom info-row. Эстетика: editorial-luxury, не AI-spinner. */
.processing-workspace {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-4), 2vw, var(--space-5));
    margin-bottom: var(--space-6);
}
.processing-workspace__hero { margin-bottom: 0; }

.processing-workspace__stepper {
    padding: clamp(var(--space-3), 1.6vw, var(--space-4)) clamp(var(--space-4), 2vw, var(--space-5));
    border: 1px solid var(--color-border, color-mix(in srgb, currentColor 10%, transparent));
    border-radius: var(--radius-lg, 18px);
    background: var(--color-surface, transparent);
}

.processing-workspace__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 900px) {
    .processing-workspace__cards { grid-template-columns: repeat(3, 1fr); }
}

.processing-workspace__card {
    padding: clamp(var(--space-3), 1.6vw, var(--space-4));
    border: 1px solid var(--color-border, color-mix(in srgb, currentColor 10%, transparent));
    border-radius: var(--radius-lg, 18px);
    background: var(--color-surface, transparent);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.processing-workspace__card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.processing-workspace__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent, currentColor) 10%, transparent);
    color: var(--color-accent, currentColor);
    flex-shrink: 0;
}
.processing-workspace__card-title {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}
.processing-workspace__card-lead {
    margin: 0;
    color: var(--color-text-muted, #757575);
    font-size: 0.875rem;
    line-height: 1.5;
}
.processing-workspace__card-list,
.processing-workspace__card-questions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.processing-workspace__card-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text, inherit);
}
.processing-workspace__card-list li .icon {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--color-text-muted, #757575);
}
.processing-workspace__card-questions { counter-reset: q; }
.processing-workspace__card-questions li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text, inherit);
}
.processing-workspace__qnum {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent, currentColor) 14%, transparent);
    color: var(--color-accent, currentColor);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.processing-workspace__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) clamp(var(--space-3), 1.6vw, var(--space-4));
    border: 1px solid var(--color-border-soft, color-mix(in srgb, currentColor 6%, transparent));
    border-radius: var(--radius-lg, 18px);
    background: color-mix(in srgb, currentColor 2%, transparent);
}
.processing-workspace__leave {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: var(--color-text-muted, #757575);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.processing-workspace__leave:hover {
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: var(--color-text, inherit);
}
.processing-workspace__chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 12px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface, transparent);
    border: 1px solid var(--color-border-soft, color-mix(in srgb, currentColor 6%, transparent));
}
.processing-workspace__chip-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-md);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.processing-workspace__chip--sage .processing-workspace__chip-icon {
    background: color-mix(in srgb, var(--color-tier-strong, #6e8d6e) 12%, transparent);
    color: var(--color-tier-strong, #6e8d6e);
}
.processing-workspace__chip--violet .processing-workspace__chip-icon {
    background: color-mix(in srgb, var(--color-accent, currentColor) 12%, transparent);
    color: var(--color-accent, currentColor);
}
.processing-workspace__chip--neutral .processing-workspace__chip-icon {
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: var(--color-text-muted, #757575);
}
.processing-workspace__chip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8125rem;
    line-height: 1.35;
}
.processing-workspace__chip-text strong {
    font-weight: 600;
    color: var(--color-text, inherit);
}
.processing-workspace__chip-text .muted { color: var(--color-text-muted, #757575); }

/* ---- Insight card ----
   Hidden Strength / Positioning Risk на странице analysis-tab'а профиля.
   Парсер возвращает структурный {title, description, evidence?} — карточка
   даёт визуальную иерархию (title-вес + description + collapsible evidence)
   вместо плоского <li>. Positive — sage tone (sparkles icon); negative —
   amber/coral tone (triangle-alert icon). Border-left маркер ускоряет
   сканирование колонок. */

/* Нейтральная карточка (без tinted wash): прежний sage/amber фон+border на
   КАЖДОЙ карточке читался дёшево. Полярность несёт section-плейт в шапке
   (sage «Сильные» / amber «Риски») + цветной marker-глиф ниже — consistent
   с open-questions: цвет живёт в маленьком элементе, не в фоне. */

/* Голый глиф-маркер (icon-система: эхо шапки, без плейта). Цвет по типу. */

/* ---- Open questions stack ----
   Нумерованный stack открытых вопросов на growth-tab'е профиля
   (`Scoring["open_questions"]`). Каждый элемент: цифра-маркер, вопрос +
   priority-chip справа, hint снизу, опциональный CTA. Priority кодирует
   срочность border-цветом и chip-tone: high→coral, medium→amber, low→teal. */
.open-questions-stack {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* Card-rows: мета-строка (индекс · приоритет) сверху, вопрос под ней.
   Нейтральные карточки: цвет живёт ТОЛЬКО в маленькой priority-точке —
   без цветных left-border'ов и filled-пилюль (иначе «слишком много цвета»). */
.open-questions-stack__item {
    display: flex;
    flex-direction: column;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.open-questions-stack__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
/* Индекс — muted mono (единый язык индексов кабинета, не accent-цвет). */
.open-questions-stack__num {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.open-questions-stack__question {
    margin: 0;
    font-weight: 400;
    font-size: 0.9375rem;
    color: var(--color-text);
    line-height: 1.55;
    max-width: 68ch;
    min-width: 0;
}
/* Priority — тихий muted-микролейбл; срочность несёт только цветная точка. */
.open-questions-stack__priority {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.open-questions-stack__priority-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--color-text-muted);
    flex: none;
}
.open-questions-stack__priority--high  .open-questions-stack__priority-dot { background: var(--color-coral, var(--color-danger)); }
.open-questions-stack__priority--medium .open-questions-stack__priority-dot { background: var(--color-amber); }
.open-questions-stack__priority--low   .open-questions-stack__priority-dot { background: var(--color-text-muted); }
.open-questions-stack__hint {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}
/* Одна панельная CTA под стеком (caller рендерит ui_button) — заменяет
   6 повторяющихся per-item accent-ссылок. Отбита hairline-дивайдером,
   как и разделители между вопросами. */
.open-questions-stack__foot {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* ---- Improvement hints grid ----
   Сетка chip'ов hints от парсера на growth-tab'е профиля
   (`Scoring["hints"]`). Минимальный layout: flex-wrap chip-grid с
   lightbulb-иконкой. На M1 hints — плоский список; axis-группировка
   добавится когда у парсера будет стабильный enum-каталог. */
/* Вертикальный список советов — не pill-чипы: советы это целые фразы,
   а chip-афорданс врал (короткий интерактивный тег). Airy divided-rows
   как insight/red-flags; lightbulb-глиф accent'ом (лёгкий тир). */
.improvement-hints {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0;
    display: flex;
    flex-direction: column;
}
.improvement-hints__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    position: relative;
    padding-left: 18px;
}
.improvement-hints__item:first-child { padding-top: var(--space-1); }
.improvement-hints__item:not(:first-child) { border-top: 1px solid var(--color-border); }
/* Lightbulb — subtle bare-глиф (лёгкий буллет-маркер). НЕ плейт: в шапке
   панели «Подсказки» лампочка уже есть, повтор промин-плейта = шум. */
.improvement-hints__icon {
    display: none; /* лампочка живёт в голове блока; шесть одинаковых лампочек
                      подряд переставали различать что-либо */
}
/* Маркер привязан к первой строке текста (top от padding item'а + пол-строки),
   иначе у пунктов с разным вертикальным padding точки прыгали по высоте. */
.improvement-hints__item::before {
    content: "";
    position: absolute;
    left: 2px;
    top: calc(var(--space-3) + 0.75em - 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-amber) 65%, transparent);
}
.improvement-hints__item:first-child::before { top: calc(var(--space-1) + 0.75em - 3px); }
.improvement-hints__text { min-width: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); }

/* ---- Profile cabinet shared (analysis / growth tabs) ----
   Простые универсальные классы для cabinet-карточек. Без них article'ы
   были голым browser default'ом (этим и объяснялось ощущение «пустых
   страниц» на скриншотах: данные есть, оформления нет). */
.ui-card {
    padding: var(--space-5);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* Premium base layer: subtle depth вместо flat border-only. */
    box-shadow: var(--shadow-sm);
    transition: box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out), transform 240ms var(--ease-spring);
}
a.ui-card:hover,
button.ui-card:hover,
.ui-card[data-lift]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.ui-card > h2 {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}
.ui-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
}
.ui-card__head h2 {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.125rem;
    font-weight: 600;
}
.ui-card__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-bg-deep, rgba(0, 0, 0, 0.05));
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.ui-card__counter--danger {
    background: rgba(var(--color-danger-rgb), 0.12);
    color: var(--color-danger);
}
/* Profile analysis grid: один или два колоночных списка insight'ов +
   ниже два full-width блока (matching roles, section scores). */
.profile-analysis {
    display: grid;
    grid-template-columns: 1fr;
    /* row-gap space-4 = единый вертикальный ритм панелей с growth/settings/
       prefs; column-gap space-5 держит 2-col airy. Трейлинг — page-shell. */
    gap: var(--space-4) var(--space-5);
}
@media (min-width: 900px) {
    .profile-analysis { grid-template-columns: 1fr 1fr; }
    .profile-analysis__col--full { grid-column: 1 / -1; }
}
/* Внутри страницы профессии разбор идёт ОДНОЙ колонкой. У страницы есть свой
   рейл, и вторая сетка внутри его колонки давала сетку в сетке: блок «Кем вас
   читают» вставал справа ВНУТРИ левой колонки, пока настоящий рейл шёл рядом
   третьей полосой — три вертикальные колонки на экране вместо двух, и ни одна
   не объясняла, почему она там.

   Правило узкое (только под `__main`), потому что на других экранах разбор
   по-прежнему живёт во всю ширину, и две колонки там уместны. */
:is(.profile-overview-grid__main, .role-layout__main) .profile-analysis { grid-template-columns: minmax(0, 1fr); }
/* То же самое у «Плана роста»: его внутренний aside с подсказками переехал в
   рейл страницы, и делить колонку надвое больше нечем. */
.profile-analysis__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.profile-analysis__col-title {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.125rem;
    font-weight: 600;
}
.profile-analysis__list { display: flex; flex-direction: column; gap: var(--space-2); }
.profile-analysis__roles { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
/* Фиксированное число колонок, а не auto-fit: auto-fit растягивал три
   видимые карточки на всю ширину, а семь под фолдом ложились по четыре — один
   и тот же объект двух ширин на соседних рядах. Три видимые карточки = одна
   строка из трёх колонок. */
@media (min-width: 768px) {
    .profile-analysis__roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .profile-analysis__roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Раскрывашка «Ещё N ролей» — отдельной строкой с воздухом, а не впритык
   к карточкам над и под ней. */
.profile-analysis__roles + .profile-analysis__fold { margin-top: var(--space-4); }
.profile-analysis__fold > .profile-analysis__roles { margin-top: var(--space-4); }
.profile-analysis__sections { display: flex; flex-direction: column; gap: var(--space-2); }

/* Footer-CTA внутри executive-readout — два кнопочных deep-link'а в
   Карьерную базу. На мобиле вертикальный стек, на десктопе flex-row. */
/* Quality breakdown — обёртка под 5 ui_resume_quality_row.
   Та же раскладка, что resume-detail__quality (используется в legacy
   resumes_result.html через тот же partial), но локализованная под
   profile-analysis namespace. */
.profile-analysis__quality {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}
/* Career-facts strip над сеткой профилей (Gap b, §4.3 концепта).
   User-level контекст: «один pool фактов → N lens-профилей». На пустом
   состоянии — primary-CTA «Загрузить резюме» + sage-tinted фон, чтобы
   привлечь внимание (это momentum-blocker для зрелых пользователей).
   На ready-состоянии — neutral фон + secondary/ghost CTA. */
.profiles-facts-strip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(var(--space-3), 1.8vw, var(--space-4));
    align-items: center;
    /* Ready-режим — вспомогательный контекст-strip, не карточка-герой:
       компактные паддинги, чтобы не съедать fold у сетки профилей. */
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border, color-mix(in srgb, currentColor 10%, transparent));
    border-radius: var(--radius-lg, 18px);
    background: var(--color-surface, transparent);
}
.profiles-facts-strip--empty { padding: clamp(var(--space-3), 1.8vw, var(--space-5)); }
.profiles-facts-strip--empty {
    border-color: color-mix(in srgb, var(--color-accent, currentColor) 28%, transparent);
    background: color-mix(in srgb, var(--color-accent, currentColor) 5%, var(--color-surface, transparent));
}
.profiles-facts-strip__plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-accent, currentColor) 10%, transparent);
    color: var(--color-accent, currentColor);
    flex-shrink: 0;
}
.profiles-facts-strip--empty .profiles-facts-strip__plate {
    background: color-mix(in srgb, var(--color-accent, currentColor) 18%, transparent);
}
.profiles-facts-strip__body { min-width: 0; }
.profiles-facts-strip__eyebrow {
    margin: 0 0 2px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted, #757575);
}
.profiles-facts-strip__title {
    margin: 0 0 4px;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}
.profiles-facts-strip__lead {
    margin: 0;
    color: var(--color-text-muted, #757575);
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 64ch;
}
.profiles-facts-strip__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .profiles-facts-strip { grid-template-columns: auto 1fr; }
    .profiles-facts-strip__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-top: var(--space-2);
        border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
    }
}

/* Profile analysis panel — единая card-обёртка для секций analysis-таба
   (Task #283). Сверху panel-head: icon-plate + title + lead/counter,
   ниже — собственно контент (insights / matching roles / quality rows).
   Раньше секции висели голым заголовком + flex-list — без визуального
   контейнера блоки сливались в одну ленту, не было pre-attentive якоря. */
.profile-analysis__panel {
    padding: clamp(var(--space-3), 1.8vw, var(--space-5));
    border: 1px solid var(--color-border, color-mix(in srgb, currentColor 10%, transparent));
    border-radius: var(--radius-lg, 18px);
    background: var(--color-surface, transparent);
    /* shadow-sm для когезии с growth-панелями (.ui-card) — были площе. */
    box-shadow: var(--shadow-sm);
}
.profile-analysis__panel-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid color-mix(in srgb, currentColor 6%, transparent);
}
.profile-analysis__panel-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.profile-analysis__panel-title {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.125rem; /* единый card-title размер (ui-card h2 / settings) */
    font-weight: 600;
    line-height: 1.3;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}
.profile-analysis__panel-lead {
    margin: 0;
    color: var(--color-text-muted, #757575);
    font-size: 0.875rem; /* единый card-lead размер */
    line-height: 1.5;
    max-width: 60ch;
}
.profile-analysis__panel-counter {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    margin-left: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: var(--color-text-muted, #757575);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    vertical-align: 0.18em;
}

/* Profile preferences (editorial rewrite, Task #281).
   Группы-fieldset'ы как в Intent: тонкая граница, mono-eyebrow с иконкой,
   подсказка под legend, grid-разметка полей. Sticky footer с primary CTA +
   hint, чтобы при длинной форме «Сохранить» оставалось в видимой зоне. */
.profile-prefs {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.profile-prefs__group {
    margin: 0;
    padding: clamp(var(--space-4), 1.9vw, var(--space-5));
    border: 1px solid var(--color-border, color-mix(in srgb, currentColor 10%, transparent));
    border-radius: var(--radius-lg, 18px);
    background: var(--color-surface, transparent);
}
/* Card-head по канону cabinet-панели (.profile-analysis__panel-head):
   ui_icon_plate + serif-заголовок + muted-lead + нижний divider.
   float+width:100% нейтрализует спец-рендер <legend> (иначе он «сидит»
   на линии рамки как в raw-fieldset); .profile-prefs__grid { clear } —
   сбрасывает float, чтобы поля шли под head. */
.profile-prefs__legend {
    float: left;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 0 0 var(--space-3);
    margin: 0 0 var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, currentColor 6%, transparent);
}
.profile-prefs__group-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.profile-prefs__group-title {
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.profile-prefs__group-hint {
    margin: 0;
    color: var(--color-text-muted, #757575);
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 60ch;
}
/* Инпуты → canon crisp (border-strong + radius-sm + мягкий фокус). */
.profile-prefs .input {
    border-color: var(--color-border-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.profile-prefs .input:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.12);
}
.profile-prefs__grid { clear: both; display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 720px) {
    .profile-prefs__grid--2 { grid-template-columns: 1fr 1fr; }
    .profile-prefs__grid--3 { grid-template-columns: 1fr 1fr minmax(140px, 0.6fr); }
    .profile-prefs__grid--narrow { grid-template-columns: minmax(160px, 280px); }
}
.profile-prefs__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) clamp(var(--space-3), 1.8vw, var(--space-5));
    background: var(--color-surface, transparent);
    border: 1px solid var(--color-border, color-mix(in srgb, currentColor 10%, transparent));
    border-radius: var(--radius-lg, 18px);
}
.profile-prefs__footer-hint {
    margin: 0;
    flex: 1 1 240px;
    color: var(--color-text-muted, #757575);
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Profile settings (editorial rewrite, Task #282).
   Три карточки: «Общие», «История», «Danger zone». Раньше всё было в плоском
   ui-card + одинокая красная кнопка «В архив» болталась рядом с meta'-list'ом
   — разделение по responsibility делает destructive operation видимым, но не
   путает с обычными настройками. */
.profile-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.profile-settings__card {
    padding: clamp(var(--space-3), 1.8vw, var(--space-5));
    border: 1px solid var(--color-border, color-mix(in srgb, currentColor 10%, transparent));
    border-radius: var(--radius-lg, 18px);
    background: var(--color-surface, transparent);
}
.profile-settings__card--danger {
    border-color: color-mix(in srgb, var(--color-coral, var(--color-danger, #b8453f)) 35%, transparent);
    background: color-mix(in srgb, var(--color-coral, var(--color-danger, #b8453f)) 4%, var(--color-surface, transparent));
}
.profile-settings__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.profile-settings__card-title {
    margin: 0 0 4px;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.125rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.profile-settings__danger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-coral, var(--color-danger, #b8453f)) 14%, transparent);
    color: var(--color-coral, var(--color-danger, #b8453f));
}
.profile-settings__card-lead {
    margin: 0;
    color: var(--color-text-muted, #757575);
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 56ch;
}
.profile-settings__meta {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--color-border-soft, color-mix(in srgb, currentColor 6%, transparent));
}
/* Переименование профессии на месте (details-паттерн basics Карьерной базы):
   строка значения раскрывается в форму, карандаш — affordance правки. */
.profile-settings__name-edit summary { list-style: none; cursor: pointer; }
.profile-settings__name-edit summary::-webkit-details-marker { display: none; }
.profile-settings__name-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.profile-settings__name-summary .icon { color: var(--color-text-muted); }
.profile-settings__name-edit[open] .profile-settings__name-summary { display: none; }
.profile-settings__name-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: 2px;
}
.profile-settings__name-form .field { margin: 0; flex: 1 1 14rem; }

.profile-settings__meta-row {
    display: grid;
    grid-template-columns: minmax(180px, 0.4fr) 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-soft, color-mix(in srgb, currentColor 6%, transparent));
}
.profile-settings__meta-row dt {
    margin: 0;
    color: var(--color-text-muted, #757575);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
}
.profile-settings__meta-row dd { margin: 0; font-size: 0.9375rem; color: var(--color-text, inherit); }
/* Инпуты форм settings/growth → canon crisp (как intent/preferences). */
.profile-settings .input,
.profile-growth .input {
    border-color: var(--color-border-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.profile-settings .input:focus-visible,
.profile-growth .input:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.12);
}
.profile-settings__code {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, currentColor 8%, transparent);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
}
.profile-settings__card-foot {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft, color-mix(in srgb, currentColor 6%, transparent));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.profile-settings__foot-hint {
    margin: 0;
    flex: 1 1 240px;
    color: var(--color-text-muted, #757575);
    font-size: 0.875rem;
    line-height: 1.45;
}
.profile-settings__danger-form { margin-top: var(--space-3); display: inline-flex; }

/* History timeline — ось слева + dots, каждое событие = строка. */
.profile-history {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.profile-history::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 7px;
    width: 1px;
    background: color-mix(in srgb, currentColor 14%, transparent);
}
/* Запись, её время и откат — в одной строке. Кнопка отдельной строкой под
   каждой записью растягивала список вдвое и рвала связь «что откатываю». */
.profile-history__item {
    position: relative;
    padding: var(--space-2) 0 var(--space-2) calc(var(--space-3) + 12px);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.profile-history__body { flex: 1 1 20rem; }
.profile-history__dot {
    position: absolute;
    top: calc(var(--space-2) + 6px);
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--color-surface, #fff);
    border: 2px solid var(--color-accent, currentColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, currentColor) 12%, transparent);
}
.profile-history__item--revert .profile-history__dot {
    border-color: var(--color-amber, var(--color-warning, #b66d00));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-amber, currentColor) 14%, transparent);
}
.profile-history__body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.profile-history__line {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.9375rem;
    line-height: 1.45;
}
.profile-history__source { font-weight: 600; color: var(--color-text, inherit); }
.profile-history__op { color: var(--color-text-muted, #757575); }
/* Название поля — обычным текстом с акцентом веса: mono-плашка выдавала в нём
   код модели, которым оно и было до локализации. */
.profile-history__field { font-weight: 600; color: var(--color-text); }
.profile-history__revert-tag {
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-amber, var(--color-warning, #b66d00)) 14%, transparent);
    color: var(--color-amber, var(--color-warning, #b66d00));
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
}
.profile-history__time {
    color: var(--color-text-muted, #757575);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

/* Profile growth: vertical stack карточек одной шириной, отличается от
   facts-grid (которая auto-fits более узкие колонки). */
.profile-growth {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.profile-growth__flags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.profile-growth__flag-chip {
    display: inline-flex;
    padding: 6px 10px;
    background: rgba(var(--color-danger-rgb), 0.08);
    border: 1px solid rgba(var(--color-danger-rgb), 0.25);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-danger);
    font-variant-numeric: tabular-nums;
}
/* Верхний ряд обзора: hero + «Качество профиля» одной строкой на десктопе.
   Quality-карточка занимает пустовавший правый край широкого hero и держит
   все скоринг-сигналы (ring, вердикт, NBA, оси) в одном eye-span'е.
   На мобиле — стеком: hero, под ним quality. */
.profile-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: stretch;
}
@media (min-width: 1024px) {
    /* Вердикт идёт ВО ВСЮ ШИРИНУ. Прежде шапка делилась надвое: слева ответ,
       справа карточка качества — и главный ответ страницы («как вас прочитают
       на эту роль», с тем, что переносится и чего не хватает) сидел в
       половине экрана, деля внимание со справкой о тексте резюме. Справка
       переехала в рейл; рядом с ответом не должно стоять ничего. */
    .profile-hero-row { grid-template-columns: minmax(0, 1fr); }
    /* Карточка тянется под высоту hero-соседа: заголовок + ряды прижаты
       кверху (единый rhythm с шапкой), линк «Разбор по осям» — книзу.
       Прежнее justify-center роняло ряды в середину → большой мёртвый
       зазор под заголовком (читалось «спейсинг сломан»). */
    /* Карточка держит свою высоту, а не тянется под соседний hero: растянутая,
   она давала полтысячи пикселей пустоты между последним рядом и ссылкой. */
    .profile-hero-row .attr-board { align-self: start; }
}
.profile-hero-row .profile-hero { margin-bottom: 0; }

/* Profile overview hero (рендерится при scoring_status=up_to_date):
   completeness-ring слева + editorial-«вердикт» справа (eyebrow → serif-tier
   с семантической точкой + delta → hint → «следующий шаг» с accent-линией).
   Первый экран платформы — одно высказывание, не стопка бирок. */
.profile-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1.25rem, 3.5vw, 2.75rem);
    align-items: center;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--radius-md);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
}
@media (max-width: 640px) {
    .profile-hero { grid-template-columns: 1fr; justify-items: start; gap: var(--space-4); }
    .profile-hero__ring { justify-self: center; }
}
.profile-hero__verdict {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.verdict-eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.verdict-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}
/* Семантическая точка статуса — тихий сигнал вместо цветной пилюли:
   tier-цвет несёт 10px-точка с мягким halo, serif-слово остаётся в тексте. */
.verdict-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}
.verdict-dot--strong {
    background: var(--color-sage, var(--color-success));
    box-shadow: 0 0 0 4px rgba(var(--color-sage-rgb, 34 197 94), 0.14);
}
.verdict-dot--solid {
    background: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.16);
}
.verdict-dot--needs_work {
    background: var(--color-warning);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-warning) 16%, transparent);
}
.verdict-dot--draft {
    background: var(--color-coral, var(--color-danger));
    box-shadow: 0 0 0 4px rgba(var(--color-coral-rgb, 200 66 61), 0.14);
}
.verdict-title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.6rem, 2.6vw, 2.05rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.verdict-hint {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.9375rem;
    line-height: 1.5;
    max-width: 58ch;
}
/* Готовность к профессии (ui_target_fit) — вердикт линзы о заявленной роли.
   Цвет точки читается как ответ, а не как оценка: «читается» и «другая
   профессия» — разные состояния, а не хорошая и плохая отметка. */
.verdict-dot--fit-match {
    background: var(--color-sage, var(--color-success));
    box-shadow: 0 0 0 4px rgba(var(--color-sage-rgb, 34 197 94), 0.14);
}
.verdict-dot--fit-close {
    background: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.16);
}
.verdict-dot--fit-stretch {
    background: var(--color-warning);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-warning) 16%, transparent);
}
.verdict-dot--fit-far {
    background: var(--color-text-muted);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-text-muted) 16%, transparent);
}
/* Опыт выше роли — не оценка качества, а возражение найма: тон отличается и
   от «читается», и от «почти», иначе три вердикта выглядят одной шкалой. */
.verdict-dot--fit-overqualified {
    background: var(--color-text-soft);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-text-soft) 16%, transparent);
}

/* Качество резюме, пока замер считается: заголовок блока остаётся на месте,
   чтобы рейл не выглядел пустой карточкой с одинокой пилюлей.
   align-self: start — иначе карточка тянется на высоту соседнего hero и под
   строкой процесса повисает пустое поле в пол-экрана. */
.quality-measuring {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-self: start;
}
/* В узком рейле однострочный заголовок обрезается многоточием на полуслове —
   здесь он обязан переноситься: это не таблица, длина строки ничего не держит. */
.quality-measuring .progress-indicator__title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.target-fit {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.target-fit__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.target-fit__ring { flex: none; }
.target-fit__verdict {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.target-fit__role {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
/* Компактный режим: только ответ и объяснение, разбор — по ссылке. Он живёт
   на «Обзоре», который говорит «что сейчас», а не «почему». */
.target-fit__more { margin: var(--space-3) 0 0; font-size: var(--font-size-sm); }
.target-fit__more a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-soft);
    text-decoration: none;
}
.target-fit__more a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.target-fit__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft, var(--color-border));
}
.target-fit__col { min-width: 0; }
/* Раскрытый разбор вердикта (страница профессии): колонки видны сразу, по
   три строки, хвост — «ещё N» под колонкой. */
.target-fit__cols--open { margin-top: var(--space-4); }
.support-list__row--lead .support-list__label { font-weight: 500; color: var(--color-text); }
/* «Ответить» у пробела с открытым вопросом: справа в строке, зона нажатия
   во всю высоту пальца без роста строки (отрицательные поля по вертикали). */
.target-fit__gap-answer { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap-min); margin-block: calc((var(--tap-min) - 1.45em) / -2); font-size: 0.8125rem; font-weight: 600; color: var(--color-accent); text-decoration: none; white-space: nowrap; }
.target-fit__gap-answer:hover { text-decoration: underline; }
.target-fit__gap-answer:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.target-fit__more-rows > summary {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: var(--tap-min, 44px);
    cursor: pointer; list-style: none;
    font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted);
}
.target-fit__more-rows > summary::-webkit-details-marker { display: none; }
.target-fit__more-rows > summary:hover { color: var(--color-text); }
.target-fit__more-rows[open] > summary { display: none; }
.target-fit__stale { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-muted); }
.target-fit__stale > .icon { flex: none; margin-top: 2px; }
/* Объяснение вердикта: метка AI над прозой модели, две фразы на виду и
   «Читать дальше» тем же видом, что у разбора на карте. */
.target-fit__why { display: flex; flex-direction: column; gap: 4px; }
.target-fit__origin { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.target-fit__more > summary {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
    cursor: pointer; list-style: none;
    font-size: 0.8125rem; color: var(--color-text-muted);
}
.target-fit__more > summary::-webkit-details-marker { display: none; }
.target-fit__more[open] .target-fit__more-chev { transform: rotate(180deg); }
.target-fit__more > .verdict-hint { margin-top: 4px; }
.target-fit__stale a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
/* Ссылка в строке — цель нажатия 44px на пальце без сдвига строки. */
@media (max-width: 767.98px) {
    .target-fit__stale a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}
.target-fit__stale a:hover { text-decoration: underline; text-underline-offset: 3px; }
.target-fit__read-as { margin: var(--space-2) 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); max-width: 72ch; }
.target-fit__read-as-label { color: var(--color-text-muted); }
.target-fit__col-title {
    margin: 0 0 8px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.target-fit__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.target-fit__list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-soft);
}
.target-fit__list svg { margin-top: 3px; flex: none; color: var(--color-sage, var(--color-success)); }
.target-fit__col--gaps .target-fit__list svg { color: var(--color-text-muted); }

/* Телефон: кольцо 9rem над заголовком занимало пол-экрана, и план
   профессии уезжал на третий экран. Кольцо уменьшается и встаёт в строку с
   заголовком, остальное — во всю ширину под ними. */
@media (max-width: 719.98px) {
    .target-fit__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); row-gap: 8px; align-items: center; }
    .target-fit__ring { grid-column: 1; grid-row: 1 / span 2; }
    .target-fit__ring .score-ring { --diameter: 5rem; --stroke: 10; }
    .target-fit__ring .score-ring__value { font-size: 1.375rem; }
    .target-fit__verdict { display: contents; }
    .target-fit__verdict > .verdict-eyebrow { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
    .target-fit__verdict > .verdict-line { grid-column: 2; grid-row: 2; align-self: start; }
    .target-fit__verdict > .verdict-eyebrow { text-align: left; }
    .target-fit__verdict > .verdict-line { flex-wrap: wrap; gap: 4px 8px; }
    /* Точка вердикта дублирует цвет кольца рядом и съедала ширину строки:
       «Вы / подходите / на эту / роль» в четыре строки. */
    .target-fit__verdict > .verdict-line > .verdict-dot { display: none; }
    .target-fit__verdict > .verdict-line .verdict-title { font-size: 1.375rem; line-height: 1.15; flex: 1 1 100%; }
    .target-fit__verdict > :not(.verdict-eyebrow):not(.verdict-line) { grid-column: 1 / -1; }
}
@media (min-width: 720px) {
    .target-fit__head { flex-direction: row; align-items: flex-start; gap: var(--space-5); }
    .target-fit__cols { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}

/* Profile provenance chip — узкий breadcrumb-link над страницей резюме,
   ведёт на профиль из которого собран snapshot. По дизайн-решению
   inline-scoring на странице резюме НЕ показываем (scoring — на профиле);
   chip даёт навигацию + быстрый сигнал по tier/score. */
.profile-provenance-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--color-text);
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
    line-height: 1.3;
    max-width: 100%;
}
.profile-provenance-chip:hover { background: var(--color-surface, #fff); border-color: var(--color-accent); }
.profile-provenance-chip__icon { line-height: 0; color: var(--color-text-muted); }
.profile-provenance-chip__label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.profile-provenance-chip__name {
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16rem;
}
.profile-provenance-chip__tier { display: inline-flex; }
.profile-provenance-chip__score {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.profile-provenance-chip__score small {
    font-size: 0.8125rem;
    opacity: 0.7;
    margin-left: 2px;
}
.profile-provenance-chip__arrow { line-height: 0; color: var(--color-text-muted); }

/* ---- Toggle (semantic) ---- */
.toggle-row__text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.toggle-row__label { font-weight: 500; color: var(--color-text); }
.toggle-row__hint { font-size: 0.8125rem; color: var(--color-text-muted); }
.toggle-switch {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}
.toggle-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}
.toggle-switch__track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--color-bg-deep);
    border: 1px solid var(--color-border);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
/* Knob — всегда белый, не --color-text (раньше в checked-state был чёрным
   на violet bg, читалось strident на light theme). Inset-shadow на
   track даёт «впадинку», white knob с легкой тенью — приподнятость. */
.toggle-switch__knob {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.toggle-switch input:checked ~ .toggle-switch__track {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.toggle-switch input:checked ~ .toggle-switch__track .toggle-switch__knob {
    transform: translateX(16px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
.toggle-switch input:focus-visible ~ .toggle-switch__track {
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.25);
}
.toggle-switch input:disabled ~ .toggle-switch__track { opacity: 0.55; cursor: not-allowed; }

/* locked-вариант toggle'а (ui_toggle lockReason): иконка-замок + пояснение под
   label'ом; сам switch приглушён и неинтерактивен. Применяется для категорий,
   которые нельзя отключить (system/transactional — план Task 6). */
.toggle-row--locked .toggle-row__label { color: var(--color-text-soft); }
.toggle-row__lock-reason {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.toggle-row__lock-reason .icon { flex-shrink: 0; color: var(--color-text-muted); }

/* =====================================================================
   Pricing section (editorial)
   ===================================================================== */
/* Toggle Monthly / Annual — Linear/Stripe-style segmented control над сеткой.
   JS меняет data-billing на корне; CSS перекидывает is-active между двумя
   опциями. Save-pill справа от annual — это «−20%» подсветка. */
.pricing-toggle {
    margin: 0 auto clamp(2rem, 3vw, 2.5rem);
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    position: relative;
}
.pricing-toggle-wrap {
    display: flex;
    justify-content: center;
}
.page-head .pricing-toggle {
    display: flex;
    width: max-content;
}
.pricing-toggle__option {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: -0.005em;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.pricing-toggle__option:hover { color: var(--color-text); }
.pricing-toggle__option.is-active {
    background: var(--color-surface-elevated);
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.pricing-toggle__option:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.pricing-toggle__save {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(var(--color-sage-rgb), 0.18);
    color: var(--color-sage);
    font-variant-numeric: tabular-nums;
}

/* Pricing price swap animation. JS добавляет .is-swapping → текст
   фейдится за 130ms; затем меняется и .is-swapped-in запускает
   обратный slide-up 280ms. */
[data-price-num],
[data-price-period] {
    display: inline-block;
    transition: opacity 130ms ease, transform 130ms ease;
}
[data-price-num].is-swapping,
[data-price-period].is-swapping {
    opacity: 0;
    transform: translateY(-4px);
}
@keyframes price-swap-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-price-num].is-swapped-in,
[data-price-period].is-swapped-in {
    animation: price-swap-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
    [data-price-num],
    [data-price-period] { transition: none; }
    [data-price-num].is-swapped-in,
    [data-price-period].is-swapped-in { animation: none; }
}

.pricing-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    align-items: stretch;
    margin: 0;
}
@media (min-width: 768px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 1024px) {
    .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-top: 3px solid currentColor;
    border-radius: var(--radius-lg);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
/* Accent-варианты задают цвет border-top через `border-top: 3px solid
   currentColor` в базовом правиле выше. На dark цвет должен оставаться
   насыщенным — потому используем сами цвета токенов (а не -deep), и
   возвращаем text color обратно к тексту через явное правило ниже. */
.pricing-card--coral { color: var(--color-accent); }
.pricing-card--teal  { color: var(--color-teal); }
.pricing-card--sage  { color: var(--color-sage); }
.pricing-card--navy  { color: var(--color-violet); }
.pricing-card--coral .pricing-card__name,
.pricing-card--teal  .pricing-card__name,
.pricing-card--sage  .pricing-card__name,
.pricing-card--navy  .pricing-card__name { color: var(--color-text); }
.pricing-card--featured {
    background: var(--color-surface-elevated);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    border-top: 3px solid var(--color-accent);
    /* Premium «выделенная карточка»: indigo soft halo + dark elevated surface;
       текст остаётся в основном --color-text, ничего не темнеет. */
    box-shadow: var(--glow-accent);
}
@media (min-width: 1024px) {
    .pricing-card--featured { transform: translateY(-12px); }
    .pricing-card--featured:hover { transform: translateY(-14px); }
}
.pricing-card__ribbon {
    position: absolute;
    top: -0.85rem;
    right: 1.25rem;
    padding: 0.35rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    box-shadow: var(--glow-accent);
    z-index: 2;
    font-variant-numeric: tabular-nums;
}
.pricing-card__head { display: flex; flex-direction: column; gap: 0.45rem; padding-bottom: 0.35rem; }
/* Roman tier-mark — identity-маркер уровня (I / II / III). Цвет —
   currentColor от .pricing-card--{accent} (sage/coral/navy/teal), что
   даёт каждому tier'у свой character. Раньше был 0.72rem mono — слишком
   декоративный, не считывался как identity. Сейчас 1rem mono, weight 700,
   wider tracking, с тонким accent-underline через границу — теперь
   читается как «глава I» в catalog'е, а не как «01» folio. */
.pricing-card__roman {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: currentColor;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid currentColor;
    border-image: linear-gradient(90deg, currentColor 0%, currentColor 28px, transparent 28px) 1;
    align-self: flex-start;
    opacity: 0.92;
    font-variant-numeric: tabular-nums;
}
.pricing-card__name {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    line-height: 1.1;
    margin: 0;
    color: var(--color-text);
}
.pricing-card--featured .pricing-card__name { color: var(--color-text); }
.pricing-card__tagline {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.pricing-card--featured .pricing-card__tagline { color: var(--color-text-soft); }
.pricing-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.4rem;
    margin: 0.25rem 0 0;
    color: var(--color-text);
    padding-block: 0.5rem;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.pricing-card--featured .pricing-card__price {
    color: var(--color-text);
    border-color: var(--color-border);
}
.pricing-card__price-num {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 5vw, 3.25rem);
    letter-spacing: -0.035em;
    line-height: 1;
}
.pricing-card__price-unit {
    font-family: var(--font-serif);
    font-size: 1.25rem;
}
.pricing-card__period {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.pricing-card--featured .pricing-card__period { color: var(--color-text-muted); }

/* Savings note под price — показывается только когда выбран annual.
   JS добавляет .is-annual-billing на body при переключении toggle'а. */
.pricing-card__savings {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-sage);
    margin: 0.35rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 200ms ease;
    font-variant-numeric: tabular-nums;
}
.pricing-card__savings::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-sage);
    box-shadow: 0 0 0 2px rgba(var(--color-sage-rgb), 0.2);
}
body.is-annual-billing .pricing-card__savings {
    opacity: 1;
    height: auto;
}
.pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
}
.pricing-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text-soft);
}
.pricing-card--featured .pricing-card__features li { color: var(--color-text-soft); }

/* Ключевая фича (первая в группе) — подсвечивается жирнее, белее: «cornerstone». */
.pricing-card__feature--key {
    color: var(--color-text) !important;
    font-weight: 500;
}

/* Группы фич: каждая со своим eyebrow-title и собственным списком. */
.pricing-card__feature-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}
.pricing-card__feature-group {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.pricing-card__feature-group-title {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.pricing-card__feature-group + .pricing-card__feature-group {
    border-top: 1px solid var(--color-border-soft);
    padding-top: var(--space-3);
}
.pricing-card__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.12);
    color: currentColor;
    flex-shrink: 0;
    margin-top: 1px;
}
.pricing-card--featured .pricing-card__check {
    background: rgba(var(--color-accent-rgb), 0.18);
    color: var(--color-accent);
}
.pricing-card__cta { margin-top: auto; padding-top: 0.5rem; }
/* Состояние вместо действия (текущий бесплатный тариф): той же высоты, что
   кнопка lg, чтобы подвалы карточек в ряду стояли на одной линии. */
.pricing-card__cta-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    margin: 0;
    color: var(--color-text-muted);
    font-weight: 500;
}
/* Featured-карточка получает primary CTA (lime/accent), некрасивый
   inverse-pattern из light-темы убираем. */
.pricing-card--featured .pricing-card__cta .btn--secondary {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
}
.pricing-card--featured .pricing-card__cta .btn--secondary:hover,
.pricing-card--featured .pricing-card__cta .btn--secondary:focus-visible {
    background: var(--color-accent-deep);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
    box-shadow: var(--glow-accent);
}
.pricing-card__footnote {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.pricing-card--featured .pricing-card__footnote { color: var(--color-text-muted); }

/* Pricing section deck — мелкая ленточка над заголовком (как в hero) */
.pricing-deck {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin: 0 0 var(--space-4);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.pricing-deck--footer {
    justify-content: center;
    margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
}

/* =====================================================================
   Editorial body (для markdown-страниц /about и т.п.)
   ===================================================================== */
.editorial-page {
    max-width: var(--bp-xl);
    margin: 0 auto;
    padding-block: clamp(2rem, 5vw, 4rem);
    padding-inline: clamp(1rem, 4vw, 2rem);
}
.editorial-page > * {
    width: 100%;
    margin-inline: auto;
}
.editorial-page__deck {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin-block: 0 var(--space-4);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.editorial-page__deck strong { color: var(--color-accent); font-weight: 600; }
.editorial-page__title {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 7vw, 5.25rem);
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin-block: 0 var(--space-4);
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}
.editorial-page__title em {
    font-style: italic;
    color: var(--color-accent);
}
.editorial-page__lede {
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.55;
    color: var(--color-text-soft);
    margin-block: 0 var(--space-6);
}
.editorial-page__meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    margin-block: 0 var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-variant-numeric: tabular-nums;
}
.editorial-body {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text);
}
.editorial-body h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.6vw, 1.85rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: var(--space-6) 0 var(--space-3);
    color: var(--color-text);
    max-width: 38ch;
}
.editorial-body h1 em {
    font-style: italic;
    color: var(--color-accent);
}
.editorial-body h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: var(--space-8) 0 var(--space-3);
    color: var(--color-text);
}
.editorial-body h2 + p { margin-top: 0; }
.editorial-body h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    margin: var(--space-5) 0 var(--space-2);
    color: var(--color-text);
}
.editorial-body p { margin: 0 0 var(--space-4); }
.editorial-body em { color: var(--color-accent); font-style: italic; }
.editorial-body strong { font-weight: 600; }
.editorial-body a {
    color: var(--color-text);
    border-bottom: 1px solid var(--color-accent);
    text-decoration: none;
    transition: color 150ms ease, border-color 150ms ease;
}
.editorial-body a:hover, .editorial-body a:focus-visible {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent-deep, var(--color-accent));
}
.editorial-body ul, .editorial-body ol { padding-left: 1.4rem; margin: 0 0 var(--space-4); }
.editorial-body li { margin-bottom: 0.4rem; }
.editorial-body ul li::marker { color: var(--color-accent); }
.editorial-body blockquote {
    margin: var(--space-5) 0;
    padding: 0 0 0 1.25rem;
    border-left: 3px solid var(--color-accent);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--color-text-soft);
}
.editorial-body hr {
    border: none;
    height: 1px;
    background: var(--color-border);
    margin: var(--space-6) 0;
}
.editorial-body code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--color-bg-deep);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
    color: var(--color-accent-deep, var(--color-accent));
}
.editorial-body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
}
.editorial-body th, .editorial-body td {
    padding: 0.7rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.editorial-body th {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   ADMIN · USER DETAIL — editorial «case file»
   ===========================================================================
   Three blocks: breadcrumb back-link / hero summary (email + name + roles
   pills + ID) / danger-zone карточка с формой блокировки. Hero выводит email
   как display-headline (Fraunces serif в проекте) — оператор сразу видит,
   с кем работает; mono-ID и бейджи ролей — поверочные элементы. Danger-zone
   намеренно отделён hairline-warning border + бледно-кремовым tinted фоном,
   чтобы оператор не запустил блокировку «случайно нажав enter». */

.user-detail { display: flex; flex-direction: column; gap: var(--space-6); }

/* Subscription detail — наследует вертикальный ритм user-detail (один источник
   правды для разнесения блоков breadcrumbs → entity-header → action-list →
   events). Отдельный класс — только для namespacing будущих правок. */
.subscription-detail { display: flex; flex-direction: column; gap: var(--space-6); }

/* Events timeline — компактная вертикальная лента событий подписки на
   detail-странице. Per-entity список (не cross-cutting data-table): время →
   бейдж типа → контекст plan_from→plan_to. */
.events-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.events-timeline__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.events-timeline__time { font-variant-numeric: tabular-nums; color: var(--color-text-muted); min-width: 8.5rem; }
.events-timeline__plans { font-variant-numeric: tabular-nums; }

/* Breadcrumbs — стандартизированная навигация «вверх по иерархии» для всех
   admin/b2c-detail страниц (см. `ui_breadcrumbs` в components/_breadcrumbs.html).
   Сидит над `ui_page_header`; из-за этого задаёт верхний margin сама.
   Текущая страница (последний элемент) — не ссылка, чуть жирнее, чтобы
   глаз сразу понимал «вы здесь». Шеврон `›` — лёгкий визуальный пунктир. */
/* Крошки — editorial-overline: тонкая nav-строка над eyebrow/title. Не
   конкурирует с заголовком (мельче, softer), separator — Lucide-chevron (не
   текстовый «›»), hover — accent-подчёркивание, растущее слева (органичная
   микроанимация), текущий пункт де-акцентирован (титул ниже его повторяет). */
.breadcrumbs {
    margin-bottom: var(--space-2);
    font-size: 0.8125rem;
    line-height: 1.4;
    letter-spacing: 0.005em;
}
.breadcrumbs__list {
    display: flex; flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}
/* Крошки на узком экране: цепочка из трёх узлов не помещается и рвётся на две
   строки с рваным отступом — читается как сломанная вёрстка, а не как путь.
   Оставляем ТОЛЬКО родителя (шаг назад): «вы здесь» и так написано заголовком
   страницы, а из трёх ссылок на телефоне нажимают одну. */
@media (max-width: 767px) {
    .breadcrumbs__item { display: none; }
    /* Одна крошка-ссылка («‹ Карьерная карта» на досье, «‹ Резюме» на
       документе) — тоже шаг назад: предпоследней у неё нет, и прежде она
       пропадала на телефоне целиком. */
    .breadcrumbs__item:nth-last-child(2),
    .breadcrumbs__item:only-child:has(> .breadcrumbs__link) { display: inline-flex; }
    .breadcrumbs__item:nth-last-child(2) .breadcrumbs__sep { display: none; }
    .breadcrumbs__item:only-child .breadcrumbs__link::before,
    .breadcrumbs__item:nth-last-child(2) .breadcrumbs__link::before {
        content: "‹";
        margin-right: var(--space-1);
        color: var(--color-text-muted);
    }
}
.breadcrumbs__sep.icon {
    width: 0.85em;
    height: 0.85em;
    margin: 0 0.35rem;
    color: var(--color-text-muted);
    opacity: 0.45;
    flex: none;
}
.breadcrumbs__link {
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 1px 1px 2px;
    /* Крошки — основной путь «назад» на мобиле, а строка текста даёт 21px
       зоны нажатия. Высота добирается на touch-ширинах, ряд не растёт за счёт
       компенсирующего отрицательного margin. */
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    margin-block: calc(-1 * var(--space-2));
    /* accent-underline через background-gradient — растёт слева на hover */
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1.5px;
    transition: color 160ms ease, background-size 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
    color: var(--color-accent);
    background-size: 100% 1.5px;
}
@media (min-width: 768px) {
    .breadcrumbs__link { min-height: 0; margin-block: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .breadcrumbs__link { transition: color 160ms ease; }
}
.breadcrumbs__current {
    color: var(--color-text-soft);
    font-weight: 500;
}

/* --------------------------- Entity header (organism) --------------- */
/* Универсальная шапка detail-страницы для admin/b2c: kicker (mono-eyebrow)
   + крупный H1 (email/имя компании/job ID) + опц. subtitle + опц. meta-dl
   с парами label/value. Готов к re-use на /admin/users/{id},
   /admin/companies/{id}, /admin/parser/job_detail.
   `.user-summary` оставлено как алиас на одну итерацию для подстраховки. */
.entity-header,
.user-summary {
    padding: var(--space-5) 0 var(--space-6);
    border-bottom: 1px solid var(--color-border-soft);
}
.entity-header__eyebrow,
.user-summary__eyebrow {
    margin: 0 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.entity-header__title,
.user-summary__email {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.15;
    word-break: break-word;
    color: var(--color-text);
}
.entity-header__subtitle,
.user-summary__name {
    margin: var(--space-2) 0 0;
    font-size: 1.0625rem;
    color: var(--color-text-muted);
}
.entity-header__subtitle em,
.user-summary__name em {
    font-style: italic;
    color: var(--color-text-muted);
    opacity: 0.7;
}
.entity-header__meta,
.user-summary__meta {
    margin: var(--space-5) 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
.entity-header__row,
.user-summary__row {
    display: grid;
    grid-template-columns: minmax(6rem, 8rem) 1fr;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border-soft);
}
.entity-header__row:first-child,
.user-summary__row:first-child { border-top: 0; padding-top: 0; }
.entity-header__row dt,
.user-summary__row dt {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.entity-header__row dd,
.user-summary__row dd { margin: 0; color: var(--color-text); }
.entity-header__tags,
.user-summary__roles { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.entity-header__muted,
.user-summary__muted { color: var(--color-text-muted); }

/* Danger zone — destructive-action card. Цвета строятся на полупрозрачном
   тёплом ivory под --color-danger подложкой, чтобы блок «горел» среди
   editorial-палитры без откровенного красного фона. */
.danger-zone {
    border: 1px solid rgba(var(--color-danger-rgb), 0.3);
    border-radius: var(--radius-lg);
    /* tighter top than sides/bottom — eyebrow small, симметричный space-5
       сверху читался как лишний воздух над «Опасная зона». */
    padding: var(--space-4) var(--space-5) var(--space-5);
    background:
        linear-gradient(180deg, rgba(var(--color-danger-rgb), 0.03), rgba(var(--color-danger-rgb), 0.06)),
        var(--color-surface);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.danger-zone__eyebrow {
    margin: 0 0 var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-danger);
    font-variant-numeric: tabular-nums;
}
.danger-zone__icon { color: var(--color-danger); }
.danger-zone__title {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    line-height: 1.2;
    color: var(--color-text);
}
.danger-zone__body {
    margin: 0 0 var(--space-5);
    max-width: 60ch;
    color: var(--color-text-muted);
    line-height: 1.55;
}
.danger-zone__form { margin: 0; }
.danger-zone__form .field { margin-bottom: var(--space-4); }
.danger-zone__form .textarea:focus-visible {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(var(--color-danger-rgb), 0.15);
}
.danger-zone__form .btn--danger {
    min-width: 14rem;
}

@media (min-width: 640px) {
    .entity-header__row,
    .user-summary__row {
        grid-template-columns: 9rem 1fr;
        gap: var(--space-4);
    }
    .danger-zone { padding: var(--space-6); }
}

/* ----- ADMIN · USER DETAIL · action list ---------------------------------
   Обзорная страница пользователя — это меню действий, не форма.
   Каждый action-row — одна строка: kicker | title | copy | CTA. Формы
   живут на отдельных экранах (/users/{id}/password, /users/{id}/disable).
   Verify — единственное единокликовое действие, остаётся inline (POST с
   одним CSRF-полем). Это убирает три раскрытые формы с экрана. */
.action-list {
    margin-top: var(--space-5);
    padding: var(--space-5) 0 0;
    border-top: 1px solid var(--color-border-soft);
}
.action-list__head { margin: 0 0 var(--space-4); }
.action-list__eyebrow {
    margin: 0 0 var(--space-2);
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.action-list__icon { color: var(--color-accent, var(--color-text-muted)); }
.action-list__title {
    margin: 0 0 var(--space-1);
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--color-text);
}
.action-list__hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.action-row {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "kick title cta"
        "kick copy  cta";
    gap: 0.25rem 1.25rem;
    align-items: center;
    margin: 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.action-row + .action-row { margin-top: var(--space-3); }
.action-row__kicker {
    grid-area: kick;
    align-self: center;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.action-row__title {
    grid-area: title;
    align-self: end;
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}
.action-row__copy {
    grid-area: copy;
    align-self: start;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.action-row__cta {
    grid-area: cta;
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
    white-space: nowrap;
}
.action-row__cta-icon { transition: transform 140ms ease; }
/* Primary action — accent-tint pill в стиле dark editorial. Раньше
   красился в var(--color-text) на background, что на dark-теме давало
   белую плашку (light-theme reluct). На hover — solid accent. */
.action-row__cta--primary {
    background: rgba(var(--color-accent-rgb), 0.14);
    border-color: rgba(var(--color-accent-rgb), 0.40);
    color: rgb(var(--color-accent-rgb));
}
.action-row__cta--danger {
    background: rgba(var(--color-danger-rgb), 0.10);
    border-color: rgba(var(--color-danger-rgb), 0.40);
    color: rgb(var(--color-danger-rgb));
}
.action-row--linkable { cursor: pointer; }
.action-row--linkable:hover {
    border-color: var(--color-border-strong);
    /* Premium hover на dark: indigo soft-glow + lift, не drop-shadow. */
    box-shadow: var(--glow-soft);
    background: var(--color-surface-elevated);
}
.action-row--linkable:hover .action-row__cta { background: var(--color-bg-soft); }
/* Hover для form-variant (где нет .action-row--linkable ancestor): :hover
   ставится прямо на CTA, поэтому работает и в form, и в линкованной
   карточке через nested hover. */
.action-row--linkable:hover .action-row__cta--primary,
.action-row__cta--primary:hover,
.action-row__cta--primary:focus-visible {
    background: rgba(var(--color-accent-rgb), 0.95);
    border-color: rgb(var(--color-accent-rgb));
    color: var(--color-accent-text, #fff);
    box-shadow: 0 0 20px -6px rgba(var(--color-accent-rgb), 0.55);
}
.action-row--linkable:hover .action-row__cta--danger,
.action-row__cta--danger:hover,
.action-row__cta--danger:focus-visible {
    background: rgba(var(--color-danger-rgb), 0.92);
    border-color: rgb(var(--color-danger-rgb));
    color: #fff;
    box-shadow: 0 0 20px -6px rgba(var(--color-danger-rgb), 0.55);
}
.action-row--linkable:hover .action-row__cta-icon { transform: translateX(2px); }
.action-row__cta--primary:hover .action-row__cta-icon,
.action-row__cta--danger:hover .action-row__cta-icon { transform: translateX(2px); }
.action-row--destructive {
    border-color: rgba(var(--color-danger-rgb), 0.3);
    background: linear-gradient(180deg, rgba(var(--color-danger-rgb), 0.06) 0%, var(--color-surface) 50%);
}
.action-row--done {
    background: linear-gradient(180deg, rgba(var(--color-sage-rgb),0.05) 0%, var(--color-surface) 50%);
    border-color: var(--color-sage-soft, var(--color-border));
}
.action-row__state {
    grid-area: cta;
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-sage);
    font-variant-numeric: tabular-nums;
}
.action-row__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-sage-deep);
    box-shadow: 0 0 0 3px rgba(var(--color-sage-rgb),0.18);
}
.action-row form { all: unset; display: contents; }

@media (max-width: 720px) {
    .action-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "kick"
            "title"
            "copy"
            "cta";
        padding: var(--space-4);
    }
    .action-row__cta { justify-self: stretch; justify-content: center; }
    .action-row__state { justify-self: start; }
}

/* ----- ADMIN · focused action screens (password / disable) -----------------
   Single-purpose pages: breadcrumbs back to user → header with subject
   email → contextual copy → form. Узкая centered-колонка, чтобы операция
   читалась как «один шаг», без посторонних форм по соседству. */
.admin-action { max-width: 720px; }
.admin-action__layout { margin-top: var(--space-5); }
.admin-action__head {
    padding: var(--space-5) var(--space-5) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    background: var(--color-surface);
}
.admin-action__head--danger {
    border-color: rgba(var(--color-accent-rgb, 217,111,95), 0.3);
    background: linear-gradient(180deg, rgba(var(--color-accent-rgb, 217,111,95),0.05) 0%, var(--color-surface) 70%);
}
.admin-action__eyebrow {
    margin: 0 0 var(--space-2);
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.admin-action__icon { color: var(--color-accent); }
.admin-action__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.admin-action__subtitle {
    margin: 0;
    display: flex; flex-wrap: wrap; gap: 0.5rem 0.85rem; align-items: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.admin-action__subtitle-label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.admin-action__subject {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-bg-soft);
    padding: 0.18rem 0.55rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    font-variant-numeric: tabular-nums;
}
.admin-action__body {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--color-surface);
}
.admin-action__copy {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    line-height: 1.55;
}
.admin-action__warning {
    display: flex; align-items: flex-start; gap: 0.55rem;
    margin: 0 0 var(--space-4);
    padding: 0.6rem 0.7rem;
    border-left: 2px solid var(--color-amber);
    background: rgba(var(--color-amber-rgb),0.08);
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 2px;
}
.admin-action__warning-icon {
    margin-top: 2px;
    color: var(--color-amber);
    flex: 0 0 auto;
}
.admin-action__form { margin: 0; }
.admin-action__form .field { margin-bottom: var(--space-4); }
.admin-action__buttons {
    margin-top: var(--space-4);
    display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
}
.admin-action__cancel {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    transition: background 120ms ease, color 120ms ease;
}
.admin-action__cancel:hover {
    color: var(--color-text);
    background: var(--color-bg-soft);
}

/* Старая «.cred-console» ниже — был промежуточный дизайн, оставлен на
   случай если другие админ-страницы успели на него сослаться, но активно
   user_detail.html больше не использует. Можно безопасно удалить, когда
   убедимся в отсутствии других потребителей. */

/* ----- ADMIN · USER DETAIL · credentials console ------------------------
   Двухпанельная консоль операций над учёткой (email + пароль). Каждая
   панель — независимая карточка со статус-строкой в шапке, чтобы оператор
   видел текущее состояние раньше, чем читает копию. На широких экранах две
   панели лежат бок о бок (cred-console__grid auto-fit), на узких — стек.
   Нет общего больш0го альерта — предупреждение про «сессии будут завершены»
   живёт прямо в шапке password-панели как inline-warning, не отъедая
   вертикаль. Дополнительная сага: глобальный flash из admin/base.html уже
   подтверждает успех — здесь in-page alert не дублируем. */
.cred-console {
    margin-top: var(--space-5);
    padding: var(--space-5) 0 0;
    border-top: 1px solid var(--color-border-soft);
}
.cred-console__head { margin: 0 0 var(--space-4); }
.cred-console__eyebrow {
    margin: 0 0 var(--space-2);
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.cred-console__icon { color: var(--color-accent, var(--color-text-muted)); }
.cred-console__title {
    margin: 0 0 var(--space-1);
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--color-text);
}
.cred-console__hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.cred-console__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
}
@media (min-width: 960px) {
    .cred-console__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
}

.cred-panel {
    position: relative;
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.cred-panel--done {
    border-color: var(--color-sage-soft, var(--color-border));
    background: linear-gradient(180deg, rgba(var(--color-sage-rgb),0.06) 0%, var(--color-surface) 38%);
}
.cred-panel--danger {
    border-color: rgba(var(--color-accent-rgb, 217,111,95), 0.32);
    background: linear-gradient(180deg, rgba(var(--color-accent-rgb, 217,111,95),0.04) 0%, var(--color-surface) 32%);
}
.cred-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px dashed var(--color-border);
}
.cred-panel__kicker {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.cred-panel__status {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.cred-panel__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    box-shadow: 0 0 0 3px rgba(var(--color-text-muted-rgb, 107,103,96), 0.12);
}
.cred-panel--done .cred-panel__status {
    color: var(--color-sage);
}
.cred-panel--done .cred-panel__dot {
    background: var(--color-sage-deep);
    box-shadow: 0 0 0 3px rgba(var(--color-sage-rgb),0.18);
}
.cred-panel__status--danger {
    color: var(--color-accent) !important;
}
.cred-panel__status--danger .cred-panel__dot {
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb, 217,111,95), 0.22);
}
.cred-panel__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
}
.cred-panel__copy {
    margin: 0 0 var(--space-3);
    max-width: 56ch;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}
.cred-panel__note {
    margin: 0;
    padding: var(--space-3) var(--space-3);
    border-left: 2px solid var(--color-sage-deep);
    background: rgba(var(--color-sage-rgb),0.06);
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 2px;
}
.cred-panel__warning {
    display: flex; align-items: flex-start; gap: 0.55rem;
    margin: 0 0 var(--space-4);
    padding: 0.55rem 0.7rem;
    border-left: 2px solid var(--color-amber);
    background: rgba(var(--color-amber-rgb),0.08);
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 2px;
}
.cred-panel__warning-icon {
    margin-top: 2px;
    color: var(--color-amber);
    flex: 0 0 auto;
}
.cred-panel__form { margin: 0; }
.cred-panel__form .field { margin-bottom: var(--space-3); }
.cred-panel__form .ui-button { margin-top: var(--space-2); }
@media (min-width: 640px) {
    .cred-panel { padding: var(--space-6); }
}

/* ----- B2C · /app/profile/password — focused security-form ---------------
   Узкий centered-stack без auth-promo'а; сидит поверх обычного app-shell,
   но визуально читается «отдельной задачей» через generous space + тонкую
   карточку. Mobile-first: 100% ширина. На ≥640px — max-width 32rem. */
.profile-password {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 36rem;
    margin: 0 auto;
}
.profile-password__form { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.profile-password__actions {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.profile-password__actions .btn { min-width: 12rem; }

/* ============================================================================
   ADMIN · OVERVIEW (/admin) — KPI «registered users» + connected services board
   ============================================================================ */

.admin-overview { display: flex; flex-direction: column; gap: var(--space-5); }

.overview-kpi-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}
/* Несколько плиток (статистика подписок — 4 KPI) заполняют ряд; одна плитка
   (дашборд) остаётся капнутой ~22rem через :has(:only-child) — а не тянется
   во всю ширину. */
@media (min-width: 768px) {
    .overview-kpi-row { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
    .overview-kpi-row:has(> :only-child) { grid-template-columns: minmax(0, 22rem); }
}

/* Board — единый page-shell-child: заголовок + его сетка/таблица держатся
   вместе своим внутренним ритмом, не стакая self-margin с page-shell gap. */
.admin-overview__board {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.admin-overview__section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-text);
}
.admin-overview__refresh-hint {
    margin: 0;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 600px)  { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.service-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    border-top: 3px solid var(--color-border);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.service-card--ok    { border-top-color: var(--color-sage); }
.service-card--warn  { border-top-color: var(--color-accent); }
.service-card--muted { border-top-color: var(--color-border); }

/* «Недавно стартовал»: оранжевая полоса сверху + лёгкий tinted фон, чтобы
   оператор сразу видел сервисы, у которых uptime < 60 мин (вероятный rolling
   deploy / рестарт пода). Берёт верх над `--ok` при сосуществовании обеих
   модификаторов: свежесть для админа важнее, чем «зелёный health». */
.service-card--fresh {
    border-top-color: var(--color-amber);
    background:
        linear-gradient(180deg, rgba(var(--color-amber-rgb, 197, 145, 39), 0.07), transparent 36%),
        var(--color-surface);
    box-shadow: 0 0 0 1px rgba(var(--color-amber-rgb, 197, 145, 39), 0.18);
}
.service-card__fresh-badge {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-2);
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--color-amber-rgb, 197, 145, 39), 0.16);
    color: var(--color-amber);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.service-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.service-card__name {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
}

.service-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.service-card__status--ok    { background: rgba(var(--color-sage-rgb, 90, 132, 110), 0.12); color: var(--color-sage); }
.service-card__status--warn  { background: rgba(var(--color-accent-rgb), 0.12); color: var(--color-accent); }
.service-card__status--muted { background: var(--color-bg-soft); color: var(--color-text-muted); }
.service-card__dot {
    width: 0.5rem; height: 0.5rem; border-radius: 999px;
    background: currentColor;
}

.service-card__version {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    font-size: 0.875rem;
}
.service-card__label {
    min-width: 4.5rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.service-card__value { color: var(--color-text); font-weight: 500; }
.service-card__value--mono { font-family: var(--font-mono); font-size: 0.92rem; }

.service-card__hint { margin: 0; font-size: 0.875rem; }

.service-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.service-card__base {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.service-card__instance {
    color: var(--color-text);
    font-weight: 600;
    border-bottom: 1px dotted var(--color-border);
    cursor: help;
}
.service-card__latency b { color: var(--color-text); font-weight: 600; }

.service-card__error {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: rgba(var(--color-accent-rgb), 0.08);
    border-radius: var(--radius-sm);
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}

/* ----- B2C · Resumes (persium-resume-parser integration) ----------------- */
/* Полноценный дизайн с ring-progress, пилюлями фаз и drag&drop dropzone —
   следующая итерация. List-страница идёт на всю ширину `.app-main`-контента,
   чтобы соответствовать паттерну dashboard'а (никакого max-width локально —
   gutters заданы в `.app-main`). */
.resumes-list__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.resumes-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.resumes-list__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.resumes-list__item:hover {
    border-color: var(--color-text-muted);
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.02), 0 8px 24px -16px rgba(0,0,0,0.18);
}
.resumes-list__item--active {
    border-color: var(--color-sage-soft, var(--color-border));
    background: linear-gradient(180deg, rgba(var(--color-sage-rgb),0.05) 0%, var(--color-surface) 50%);
}
.resumes-list__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    color: var(--color-text); text-decoration: none;
}
.resumes-list__main { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.resumes-list__title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.resumes-list__id { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.resumes-list__date { margin: 0; color: var(--color-text-muted); font-size: 0.875rem; }
.resumes-list__score-cell { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.resumes-list__score-label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    margin-bottom: 0.2rem;
    font-variant-numeric: tabular-nums;
}
.resumes-list__score-value {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-text);
}
.resumes-list__score-value small { font-size: 0.875rem; color: var(--color-text-muted); margin-left: 0.15rem; }
.resumes-list__count-label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.resumes-empty__cta { margin-top: var(--space-4); display: flex; justify-content: center; }
.resumes-list__delete { margin-top: var(--space-5); }

/* ----- B2C · Resumes workspace ------------------------------------------ */
/* Двухколоночный workspace «список профилей + детали выбранного». На
   мобиле (<768px) — стек: rail сверху превращается в горизонтальный
   chip-scroll (touch-friendly, scroll-snap по карточке), detail снизу
   на всю ширину. На ≥768px — обычный сайтбар + основная панель. */
.resumes-workspace__grid {
    /* После удаления middle-column (навигация переехала в боковую рамку) —
       grid стал однорядным. Сохраняем класс как hook для будущих
       layout-вариаций (например, contextual sidebar для compare-mode). */
    display: block;
}
/* .resumes-workspace__rail и .resumes-workspace__list / __rail-* классы
   оставлены в CSS — могут пригодиться на странице /app/resumes/manage
   (фаза 2). Если manage page не появится за 2-3 спринта — снести. */

/* Rail — на мобиле горизонтальный, на десктопе вертикальный + sticky. */
.resumes-workspace__rail { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
@media (min-width: 768px) {
    .resumes-workspace__rail {
        position: sticky;
        top: var(--space-3);
        max-height: calc(100vh - var(--space-5));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
.resumes-workspace__rail-head { display: flex; flex-direction: column; gap: 0.25rem; }
.resumes-workspace__rail-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1.2;
    margin: 0;
    color: var(--color-text);
}
.resumes-workspace__rail-lead { margin: 0; color: var(--color-text-muted); font-size: 0.875rem; }
.resumes-workspace__rail-actions { display: flex; flex-direction: column; gap: var(--space-2); }

/* Список профилей: на мобиле — горизонтальная rail с scroll-snap, на
   десктопе — вертикальный column. Горизонтальная rail даёт пользователю
   тактильное переключение свайпом, не открывая отдельный select-меню. */
.resumes-workspace__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2); /* пространство под scrollbar */
    /* безопасные отступы у краёв rail, чтобы карточка не «упиралась» */
    scroll-padding: var(--space-3);
}
.resumes-workspace__list > li {
    flex: 0 0 min(86vw, 18rem);
    scroll-snap-align: start;
    min-width: 0;
}
@media (min-width: 768px) {
    .resumes-workspace__list {
        flex-direction: column;
        overflow-x: visible;
        overflow-y: visible;
        padding-bottom: 0;
        scroll-snap-type: none;
    }
    .resumes-workspace__list > li { flex: 1 1 auto; }
}

.resumes-workspace__danger { margin-top: var(--space-3); display: flex; justify-content: flex-start; }

/* Empty-state CTA в списке профилей — dashed-карточка «+ Создать новый профиль».
   Подсказка про целевые роли (CDO / Architect / AI Consultant) даёт пользователю
   повод задуматься о втором профиле под другую цель. */
.profile-create-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    background: transparent;
    transition: border-color 140ms ease, background-color 140ms ease;
    min-height: 72px;
}
.profile-create-card:hover,
.profile-create-card:focus-visible {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.04);
}
.profile-create-card__plus {
    flex: none;
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
}
.profile-create-card__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.profile-create-card__title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-accent);
}
.profile-create-card__hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* Detail-панель: full-width на мобиле; на десктопе — соседствует с rail. */
.resumes-workspace__detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}
/* AJAX tab swap loading state — pointer-events lock на tabs во время
   fetch'а, чтобы предотвратить spam-click'и. Visual loader (top strip)
   уже handled через body.is-loading + .nav-progress — единая
   loading-система для full nav'ов и AJAX swap'ов. */
.is-loading .tab-strip {
    cursor: progress;
}
.is-loading .tab-strip__link {
    pointer-events: none;
}

/* ── profile-card — карточка резюме в rail/list ────────────────────────── */
.profile-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
    min-height: 88px; /* совпадает по высоте в rail-режиме */
}
@media (min-width: 768px) {
    /* Sidebar-режим: ещё компактнее — donut меньше, ellipsis на title. */
    .profile-card { padding: var(--space-2) var(--space-3); min-height: 0; }
    .profile-card .score-ring--sm { transform: scale(0.85); transform-origin: right center; }
}
.profile-card:hover, .profile-card:focus-visible {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.profile-card:active { transform: translateY(0); transition-duration: var(--dur-fast); }
@media (prefers-reduced-motion: reduce) {
    .profile-card, .profile-card:hover, .profile-card:active { transition: none; transform: none; }
}
/* UX-review fix: selection state без accent-color — поднимаем поверхность
   (elevated surface через тень + лёгкое осветление фона), оставляя
   accent зарезервированным только для primary-actions. Тонкий tab-style
   left-bar даёт «marker» без перегрузки фиолетовым. */
.profile-card--active {
    border-color: var(--color-text-muted);
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.02), 0 16px 36px -22px rgba(0,0,0,0.35);
    background: color-mix(in srgb, var(--color-surface) 90%, white);
    position: relative;
}
.profile-card--active::before {
    content: "";
    position: absolute;
    left: -1px; top: 12%; bottom: 12%;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--color-text);
}
.profile-card__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.profile-card__eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.profile-card__title {
    margin: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.25;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.profile-card__title--display {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    -webkit-line-clamp: 3;
}
.profile-card__status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.profile-card__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border-soft);
}
.profile-card__metric { margin: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.profile-card__metric-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.profile-card__metric-value {
    margin: 0;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text);
}
.profile-card__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-text-muted);
    flex: none;
}
.profile-card__dot--success { background: var(--color-success); box-shadow: 0 0 0 3px rgba(var(--color-sage-rgb), 0.18); }
.profile-card__dot--warning { background: var(--color-warning); box-shadow: 0 0 0 3px rgba(var(--color-amber-rgb), 0.18); }
.profile-card__dot--danger  { background: var(--color-danger);  box-shadow: 0 0 0 3px rgba(var(--color-danger-rgb), 0.18); }
.profile-card__source { margin: 0; color: var(--color-text-muted); font-size: 0.8125rem; word-break: break-all; }
.profile-card__source code { font-family: var(--font-mono); }
.profile-card__updated { margin: 0; color: var(--color-text-muted); font-size: 0.8125rem; }
.profile-card__score { flex: none; display: flex; align-items: center; justify-content: center; }
.profile-card__tier {
    margin: 0;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
    background: rgba(var(--color-text-muted-rgb, 100, 100, 100), 0.12);
}
.profile-card__tier--sage  { color: var(--color-sage-deep);  background: rgba(var(--color-sage-rgb),  0.18); }
.profile-card__tier--teal  { color: var(--color-teal-deep);  background: rgba(var(--color-teal-rgb),  0.18); }
.profile-card__tier--amber { color: var(--color-amber, #F59E0B); background: rgba(var(--color-amber-rgb), 0.20); }
.profile-card__tier--coral { color: var(--color-coral, var(--color-danger, #EF4444)); background: rgba(var(--color-coral-rgb, 200 66 61), 0.20); }

/* ── tab-strip — горизонтальная навигация табов ─────────────────────────── */
.tab-strip {
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Hide native scrollbar — без мерцающего гайдa, fade сам подсказывает. */
    scrollbar-width: none;
}
.tab-strip::-webkit-scrollbar { display: none; }
/* Mobile: scroll-fade на правом крае → подсказка что есть ещё табы за
   обрезом. Только когда обрез есть: ряд вкладок компактный и чаще всего
   влезает целиком, а постоянное затухание последней вкладки обещало
   прокрутку, которой нет. Затухание ведёт scroll-timeline самой полосы: у
   полосы без прокрутки таймлайн неактивен, и маски нет; докрутили до конца —
   маска снята. Браузер без scroll-timeline держит прежнюю постоянную маску. */
@keyframes tab-strip-fade {
    from {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
    }
    to { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 768px) {
    @supports (animation-timeline: scroll()) {
        .tab-strip {
            animation: tab-strip-fade linear both;
            animation-timeline: scroll(self inline);
        }
    }
    @supports not (animation-timeline: scroll()) {
        .tab-strip {
            -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
                    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
        }
    }
}
.tab-strip__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-1);
    min-width: max-content;
}
.tab-strip__item { scroll-snap-align: start; }
.tab-strip__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* перекрывает родительский border-bottom для активного */
    min-height: 44px; /* WCAG 2.5.5 tap target */
    transition: color 140ms ease, border-color 140ms ease;
}
.tab-strip__link:hover, .tab-strip__link:focus-visible { color: var(--color-text); }
.tab-strip__link--active { color: var(--color-text); border-bottom-color: var(--color-accent); }
/* UX-review fix: counter chip — neutral, не accent. Accent зарезервирован
   только под primary-action; на chip он создавал ложный сигнал «нажми». */
.tab-strip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.16);
    color: var(--color-text);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── profile-detail head — eyebrow + title + tagline + chips + sysmeta ────
   UX-review fix: убрали duplicate-donut (он повторял число из левой
   карточки + был отдельной точкой внимания), вместо него — chip-row со
   значимым контентом: completeness в виде compact-чипа + теги уровня /
   категории / навыков / языков. Hero теперь несёт **value**, а не
   дублирующий индикатор. */
.profile-detail__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
/* 2-col hero: info слева + actions sticky-right (как в моке). */
.profile-detail__head--cols { display: flex; flex-direction: column; gap: var(--space-3); }
.profile-detail__head-info { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.profile-detail__head-actions {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    flex-wrap: wrap;
}
@media (min-width: 900px) {
    .profile-detail__head--cols {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-4);
        align-items: flex-start;
    }
    .profile-detail__head-actions { flex-wrap: nowrap; }
}
.profile-detail__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.1;
    margin: 0.45rem 0 0;
    color: var(--color-text);
    word-break: break-word;
}
.profile-detail__title em { font-style: italic; color: var(--color-text-muted); font-weight: 400; }
.profile-detail__tagline {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 60ch;
}
.profile-detail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-2);
}
.profile-detail__completeness {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(var(--color-sage-rgb), 0.14);
    color: var(--color-success);
    font-weight: 600;
}
/* Tier-chip в hero: «91% готовность профиля» — большая sage/teal/amber/coral
   pill с цветом по tier'у. Замена для двухстрочного chip'а с большим числом. */
.profile-detail__tier-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.34rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.15;
    background: rgba(var(--color-text-muted-rgb, 100 100 100), 0.12);
    color: var(--color-text);
    /* hairline inset-ring — даёт плашке чёткий край поверх пастельной
       заливки (без него читалась «дёшево», плоско на светлом фоне). */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.profile-detail__tier-chip strong {
    font-weight: 700;
    font-size: 0.9375rem;
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
}
.profile-detail__tier-chip > span:last-child { opacity: 0.85; }
.profile-detail__tier-chip--sage  { background: rgba(var(--color-sage-rgb),  0.18); color: var(--color-success); }
.profile-detail__tier-chip--teal  { background: rgba(var(--color-teal-rgb),  0.18); color: var(--color-teal-deep, var(--color-teal)); }
.profile-detail__tier-chip--amber { background: rgba(var(--color-amber-rgb), 0.20); color: var(--color-amber, var(--color-warning, #b66d00)); }
.profile-detail__tier-chip--coral { background: rgba(var(--color-coral-rgb, 200 66 61), 0.20); color: var(--color-coral, var(--color-danger, #c8423d)); }
.profile-detail__completeness-num { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1; }
.profile-detail__completeness-num small { font-size: 0.75rem; font-weight: 500; margin-left: 0.1rem; }
.profile-detail__completeness-label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-success);
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}
.profile-detail__sysmeta {
    margin: var(--space-2) 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.profile-detail__sysmeta .icon { color: var(--color-text-muted); }
.profile-detail__sysmeta code { font-family: var(--font-mono); color: var(--color-text); }
.profile-detail__sysmeta-sep { color: var(--color-text-muted); opacity: 0.4; }

/* tabs-row — табы слева, subtle «полный разбор» link справа */
.profile-detail__tabs-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
@media (min-width: 640px) {
    .profile-detail__tabs-row {
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        gap: var(--space-3);
    }
    /* tab-strip внутри row уже несёт border-bottom; убираем родительский,
       чтобы не было двойной линии. */
    .profile-detail__tabs-row { border-bottom: none; }
    .profile-detail__tabs-row .tab-strip { flex: 1; }
}
.profile-detail__view-full {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: var(--space-2) var(--space-2);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 44px;
    align-self: center;
    border-bottom: 1px solid var(--color-border);
}
.profile-detail__view-full:hover,
.profile-detail__view-full:focus-visible { color: var(--color-text); }
@media (min-width: 640px) {
    .profile-detail__view-full { border-bottom: none; }
}

.profile-detail__placeholder {
    padding: var(--space-5);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
}

/* — Danger zone: точечное удаление одного профиля.
   Низкоэмфазно (ghost-link на сером), отделён thin separator от content.
   `.profile-detail__danger-btn` усиливает coral-окраску при hover/focus,
   чтобы destructive intent был очевиден до открытия confirm-dialog. */
.profile-detail__danger {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}
.profile-detail__danger-form { margin: 0; }
.btn.profile-detail__danger-btn {
    color: var(--color-text-muted);
    font-weight: 500;
}
.btn.profile-detail__danger-btn:hover,
.btn.profile-detail__danger-btn:focus-visible {
    color: var(--color-coral, var(--color-danger, #c8423d));
    background: rgba(var(--color-coral-rgb, 200 66 61), 0.06);
}
.btn.profile-detail__danger-btn .lucide { opacity: 0.75; }

/* контекстный CTA внутри tab-section — выровнен по левому краю как
   обычный action, отделён от content отступом. */
.resume-detail__section-cta {
    margin-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ── Red flags — must-fix-сигналы от парсера. Coral-left-marker +
   alert-triangle icon-bubble + title + hint. Семантически сильнее, чем
   hint-row (last — «можно улучшить», red-flag — «надо исправить»).
   Section-counter имеет --danger вариант (coral chip).
   Используется через `ui_red_flags_list` (см. components/_red_flags_list.html). */
.resume-detail__section-counter--danger {
    color: var(--color-coral, var(--color-danger, #c8423d));
}
.red-flags-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
/* Флаг — строка той же анатомии, что находка замера (ui_finding_row):
   значок, текст, волосяной разделитель. В одной секции «Что критично
   исправить» они стоят подряд, и розовые карточки флагов под тихими
   строками находок читались как другой, более важный раздел. Тревогу несёт
   цвет значка, а не заливка. */
.red-flags-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: start;
    padding-block: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}
.red-flags-list > .red-flags-row:first-child { border-top: 0; padding-top: 0; }
.finding-rows + .red-flags-list > .red-flags-row:first-child {
    border-top: 1px solid var(--color-border-soft);
    padding-top: var(--space-3);
}
/* Recipe = .icon-plate--outlined (с coral tone) — унифицирован с
   hint-row / open-question-row / recommendation badges. Не solid fill. */
/* Пункт без второй coral-плитки: голову блока уже держит ui_icon_plate с тем
   же треугольником — дубль в 60px друг от друга читался как два разных
   сигнала. Остаётся голый glyph тонального цвета. */
.red-flags-row__icon {
    --plate-rgb: var(--color-coral-rgb, 200 66 61);
    color: rgb(var(--plate-rgb));
    display: inline-flex;
    padding-top: 2px;
    flex: none;
}
.red-flags-row__icon .icon {
    width: 16px; height: 16px;
    stroke-width: var(--icon-stroke);
}
.red-flags-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.red-flags-row__title {
    margin: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-text);
}
.red-flags-row__hint {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-soft, var(--color-text-muted));
}

/* ── Hint-row — diagnostic-стиль рекомендации, без action-affordance.
   Amber-left-marker + icon-bubble + текст. Иконка подбирается по
   prefix'у hint.code (см. resumes_list.html / resumes_result.html). */
.hint-rows {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.hint-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-amber);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
/* .hint-row__icon — layout-hook поверх .icon-plate. Визуал из компонента
   ui_icon_plate (outlined sm amber). */
.hint-row__icon { margin-top: 2px; }
.hint-row__text { font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); }

/* ── Enrich-questions-list — каждая question кликабельна, ведёт на
   /enrich?focus=qN. На hover — soft accent, arrow-right смещается. */
.enrich-questions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.enrich-questions-list__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.enrich-questions-list__row:hover,
.enrich-questions-list__row:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.02), 0 12px 28px -20px rgba(var(--color-accent-rgb), 0.35);
}
.enrich-questions-list__row:hover .enrich-questions-list__action { transform: translateX(3px); }
.enrich-questions-list__num {
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: rgba(127,127,127,0.16);
    color: var(--color-text);
    font-weight: 700;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.enrich-questions-list__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.enrich-questions-list__cat {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.enrich-questions-list__text { font-weight: 600; line-height: 1.4; color: var(--color-text); }
.enrich-questions-list__why { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.4; }
.enrich-questions-list__action {
    color: var(--color-text-muted);
    display: inline-flex; align-items: center;
    transition: transform 140ms ease, color 140ms ease;
}
.enrich-questions-list__row:hover .enrich-questions-list__action { color: var(--color-accent); }

/* surface-card danger-variant — отличается от обычной карточки
   coral-нюансом в фоне и border, чтобы destructive-action был
   мгновенно узнаваем. */
.surface-card--danger {
    border-color: rgba(var(--color-danger-rgb), 0.35);
    background: linear-gradient(180deg, rgba(var(--color-danger-rgb), 0.04) 0%, var(--color-surface) 80%);
}
.surface-card--danger .surface-card__label { color: var(--color-danger); }

/* — Dropzone — три состояния: empty (default) / drag-over / selected.
     Управляется JS-классами `.is-drag-over` / `.is-selected` на .dropzone. */
.dropzone {
    position: relative;
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    /* idle-«жизнь»: едва заметный акцентный свет сверху-внутрь, чтобы зона
       читалась как активный drop-target даже на near-black (design-review P0). */
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(var(--color-accent-rgb), 0.06), transparent 62%),
        var(--color-bg-soft, var(--color-surface));
    padding: clamp(2rem, 5vw, 3rem) var(--space-4);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 220ms ease;
}
.dropzone:hover,
.dropzone.is-drag-over {
    border-color: var(--color-accent);
    box-shadow:
        0 0 0 4px rgba(var(--color-accent-rgb), 0.08),
        0 22px 60px -26px rgba(var(--color-accent-rgb), 0.45);
}
.dropzone__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.dropzone__input:focus-visible + .dropzone__empty {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-lg);
}

/* Empty state — flex-column centered. */
.dropzone__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    cursor: pointer;
    pointer-events: none; /* клики идут через .dropzone__input ниже */
}
.dropzone__icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.10);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-1);
    transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.dropzone:hover .dropzone__icon { transform: translateY(-2px); }
.dropzone__title {
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}
.dropzone__sub {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}
.dropzone__link {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.dropzone__formats {
    margin-top: var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Drag-over overlay — поверх empty, активируется JS-классом .is-drag-over. */
.dropzone__overlay {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: inherit;
    background: rgba(var(--color-accent-rgb), 0.14);
    color: var(--color-accent);
    pointer-events: none;
    z-index: 2;
}
.dropzone.is-drag-over {
    border-style: solid;
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.08);
}
.dropzone.is-drag-over .dropzone__overlay { display: flex; }
.dropzone__overlay-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: dropzone-overlay-pulse 1.6s ease-in-out infinite;
}
@keyframes dropzone-overlay-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
.dropzone__overlay-text {
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}
@media (prefers-reduced-motion: reduce) {
    .dropzone__overlay-icon { animation: none; }
    .dropzone:hover .dropzone__icon { transform: none; }
}

/* Separator + selected file pill — hidden by default, видны при .is-selected. */
.dropzone__separator,
.dropzone__selected { display: none; }
.dropzone.is-selected { padding: var(--space-4); }
.dropzone.is-selected .dropzone__empty { display: none; }
/* «ИЛИ»-сепаратор делит drag-hint и выбранный pill; но в selected-состоянии
   empty-hint скрыт → сепаратор остаётся сиротой над pill'ом (design-review).
   Прячем его — в selected виден только pill. */
.dropzone.is-selected .dropzone__separator { display: none; }
.dropzone.is-selected .dropzone__selected { display: flex; }
.dropzone.is-selected:hover { border-color: var(--color-border); cursor: default; }

.dropzone__separator {
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.dropzone__separator::before,
.dropzone__separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.dropzone__selected {
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.dropzone__file-tile {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.18),
        rgba(var(--color-accent-rgb), 0.06));
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.dropzone__file-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dropzone__file-name {
    margin: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropzone__file-sub {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.dropzone__ready {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(var(--color-sage-rgb), 0.14);
    color: var(--color-success);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    flex: none;
    font-variant-numeric: tabular-nums;
}
.dropzone__replace {
    color: var(--color-accent);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 140ms ease;
    padding: 0.4rem 0.6rem;
    min-height: var(--tap-min, 44px);
    display: inline-flex;
    align-items: center;
}
.dropzone__replace:hover,
.dropzone__replace:focus-visible { color: var(--color-text); }

/* Stack mobile: ready-badge переходит на свой ряд под именем файла. */
@media (max-width: 640px) {
    .dropzone__selected {
        flex-wrap: wrap;
        row-gap: var(--space-2);
    }
    .dropzone__file-meta { flex: 1 1 calc(100% - 3.75rem); }
    .dropzone__ready,
    .dropzone__replace { margin-left: calc(2.75rem + var(--space-3)); }
}

/* --------------------------- Checkbox (atom) -------------------------- */
/* Семантический чекбокс через native <input type="checkbox"> + label.
   Tap-target ≥ 44×44 (WCAG 2.5.5 AA) обеспечивается высотой label'а. */
.checkbox {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    min-height: var(--tap-min);
    padding: var(--space-2) 0;
    cursor: pointer;
    line-height: 1.45;
}
.checkbox input[type="checkbox"] {
    /* Браузерный нативный чекбокс. Размер чуть крупнее дефолта для tap-friendly. */
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
}
.checkbox input[type="checkbox"]:disabled,
.checkbox input[type="checkbox"]:disabled + .checkbox__label {
    cursor: not-allowed;
    opacity: 0.6;
}
.checkbox__label {
    flex: 1;
    color: var(--color-text);
    font-size: 0.9375rem;
}
.checkbox--error { color: var(--color-danger); }
.checkbox--error .checkbox__label { color: var(--color-danger); }

/* --------------------------- File input (atom) ------------------------ */
/* Dropzone-обёртка вокруг <input type="file">. JS-handler
   `setupResumeDropzone` в app.js пишет имя выбранного файла в
   `.file-input__filename` через `data-dropzone-filename`. */
.file-input {
    position: relative;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
    background: var(--color-bg-soft);
    transition: border-color 140ms ease, background 140ms ease;
}
.file-input:hover { border-color: var(--color-accent); }
.file-input input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.file-input input[type="file"]:focus-visible + .file-input__label {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.file-input__label {
    display: flex; flex-direction: column; gap: var(--space-2); align-items: center;
}
.file-input__icon { color: var(--color-text-muted); width: 32px; height: 32px; }
.file-input__hint { color: var(--color-text-muted); }
.file-input__filename { font-family: var(--font-sans); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

.resume-job__board { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.resume-job__current { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; margin: 0; }
.resume-job__progress { width: 100%; height: 8px; }
.resume-job__failure { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
/* `display: flex` выше по специфичности перебивает дефолтное
   `[hidden] { display: none }`, поэтому без явного override атрибут
   `hidden` не работает — failure-block «залипал» visible даже когда
   JS / SSR ставили `hidden`. Та же ловушка с .resume-job__retry. */
.resume-job__failure[hidden] { display: none; }

/* Retry banner — показывается между hero и stepper, когда parser ретраит
   (retry_count > 0). Амбер-тон: не danger (это не финальный fail), но
   и не success — заметный, но не пугающий. Иконка refresh-cw мягко
   крутится, давая визуальный сигнал «процесс идёт». */
.resume-job__retry {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid rgba(var(--color-amber-rgb, 197 142 56), 0.35);
    border-radius: var(--radius-md);
    background: rgba(var(--color-amber-rgb, 197 142 56), 0.06);
}
.resume-job__retry[hidden] { display: none; }
.resume-job__retry-icon {
    flex: none;
    color: var(--color-amber, var(--color-warning, #b66d00));
    animation: resume-job-retry-spin 2.4s linear infinite;
}
@keyframes resume-job-retry-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .resume-job__retry-icon { animation: none; }
}
.resume-job__retry-text {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text);
}
.resume-job__retry-text > strong { font-weight: 600; }

/* ============================================================================
   Resume — workspace job-status (/app/resumes/jobs/{id})
   ============================================================================
   Heavyweight UX страница ожидания: hero-карточка с filename + ETA + donut,
   5-шаговый stepper, три preview-карточки, bottom info-row. Mobile-first:
   на узких — стек; на ≥768 — hero 2-col, на ≥960 — preview 3-col. */
.resume-job { gap: var(--space-4); }

/* — hero — */
.resume-job__hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 16px);
    background: var(--color-surface);
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) {
    .resume-job__hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-5);
        padding: var(--space-5);
    }
}
.resume-job__hero-main { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; }
.resume-job__filetile {
    flex: none;
    width: 4rem; height: 4rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.18), rgba(var(--color-accent-rgb), 0.06));
    display: flex; align-items: center; justify-content: center;
    color: var(--color-accent);
}
.resume-job__filetile-icon { width: 1.75rem !important; height: 1.75rem !important; }
.resume-job__hero-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.resume-job__filename {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.resume-job__chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 0; }
.resume-job__statuschip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 600;
}
.resume-job__statuschip-dot {
    width: 0.45rem; height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
    animation: pulse-soft 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .resume-job__statuschip-dot { animation: none; } }
.resume-job__statuschip--success {
    background: rgba(var(--color-sage-rgb), 0.14);
    color: var(--color-success);
}
.resume-job__statuschip--success .resume-job__statuschip-dot { animation: none; }
.resume-job__statuschip--danger {
    background: rgba(var(--color-danger-rgb), 0.14);
    color: var(--color-danger);
}
.resume-job__statuschip--danger .resume-job__statuschip-dot { animation: none; }
.resume-job__statuschip--amber {
    background: rgba(var(--color-amber-rgb), 0.12);
    color: var(--color-amber);
}
.resume-job__statuschip--amber .resume-job__statuschip-dot { display: none; }

/* — NOT_A_RESUME state — permanent classification fail, amber tone — */
.resume-job__hero--not-resume { padding-block-end: var(--space-5); }
.resume-job__filetile--rejected {
    position: relative;
    background: rgba(var(--color-amber-rgb), 0.08);
    border: 1px solid rgba(var(--color-amber-rgb), 0.28);
    color: var(--color-amber);
}
.resume-job__filetile-badge {
    position: absolute;
    inset-block-start: -6px;
    inset-inline-end: -6px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-amber);
    border: 1px solid rgba(var(--color-amber-rgb), 0.55);
    box-shadow: 0 0 0 3px var(--color-bg);
}
.resume-job__eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 var(--space-2);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.resume-job__eyebrow--amber { color: var(--color-amber); }

.not-resume {
    margin-block-start: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 56ch;
}
.not-resume__title {
    font-family: var(--font-serif, var(--font-sans));
    font-size: clamp(1.45rem, 2.6vw, 1.85rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-text);
}
.not-resume__body {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 1rem;
    line-height: 1.55;
}
.not-resume__expect {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-3) var(--space-4);
}
.not-resume__expect-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
}
.not-resume__expect-summary::-webkit-details-marker { display: none; }
.not-resume__expect-chevron {
    margin-inline-start: auto;
    color: var(--color-text-muted);
    transition: transform 160ms ease;
}
.not-resume__expect[open] .not-resume__expect-chevron { transform: rotate(180deg); }
.not-resume__expect-list {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}
.not-resume__expect-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-soft);
    font-size: 0.9375rem;
}
.not-resume__expect-list .icon { color: var(--color-text-muted); }
.not-resume__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-block-start: var(--space-2);
}
.not-resume__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
}
.not-resume__back:hover,
.not-resume__back:focus-visible {
    color: var(--color-text);
    border-bottom-color: var(--color-border-strong);
}
@media (max-width: 767px) {
    .not-resume__title { font-size: 1.5rem; }
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}
.resume-job__eta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}
.resume-job__eta .icon { color: var(--color-text-muted); }
.resume-job__jobid { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.resume-job__jobid code { font-family: var(--font-mono); color: var(--color-text); word-break: break-all; }
.resume-job__hero-score { align-self: center; flex: none; }
@media (min-width: 768px) { .resume-job__hero-score { align-self: stretch; display: flex; align-items: center; } }

/* — stepper — */
.step-progress {
    list-style: none;
    padding: var(--space-3) 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
}
@media (min-width: 900px) {
    .step-progress {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-2);
        padding: var(--space-4) 0;
    }
}
.step-progress__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    align-items: start;
    position: relative;
    min-width: 0;
}
@media (min-width: 900px) {
    .step-progress__item {
        flex: 1 1 0;
        grid-template-columns: auto;
        gap: var(--space-2);
        justify-items: start;
        padding-right: var(--space-3);
    }
    /* connector — линия от центра bullet'а к следующему */
    .step-progress__item:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 1rem;
        left: calc(2rem + var(--space-2));
        right: 0;
        height: 2px;
        background: var(--color-border);
        z-index: 0;
    }
    .step-progress__item--done:not(:last-child)::after { background: var(--color-success); }
}
.step-progress__bullet {
    flex: none;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.875rem;
    position: relative;
    z-index: 1;
}
.step-progress__item--active .step-progress__bullet {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.16);
}
.step-progress__item--done .step-progress__bullet {
    border-color: var(--color-success);
    background: rgba(var(--color-sage-rgb), 0.14);
    color: var(--color-success);
}
.step-progress__num { line-height: 1; }
.step-progress__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.step-progress__label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}
.step-progress__item--pending .step-progress__label { color: var(--color-text-muted); font-weight: 500; }
.step-progress__hint { font-size: 0.8125rem; color: var(--color-text-muted); }

/* — three preview cards — */
.resume-job__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 768px) { .resume-job__cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .resume-job__cards { grid-template-columns: 1fr 1fr 1fr; } }
.resume-job__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    min-width: 0;
}
.resume-job__card-head { display: flex; align-items: center; gap: 0.5rem; }
.resume-job__card-head h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--color-text); }
.resume-job__card-icon { color: var(--color-accent); }
.resume-job__card-lead { margin: 0; font-size: 0.875rem; }
.resume-job__card-list, .resume-job__card-deliver {
    list-style: none; padding: 0; margin: var(--space-1) 0 0;
    display: flex; flex-direction: column; gap: var(--space-2);
}
.resume-job__card-list li, .resume-job__card-deliver li {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--color-text);
}
.resume-job__card-list .icon, .resume-job__card-deliver .icon { color: var(--color-accent); flex: none; }
.resume-job__card-questions {
    list-style: none; padding: 0; margin: var(--space-1) 0 0;
    display: flex; flex-direction: column; gap: var(--space-2);
}
.resume-job__card-questions li {
    display: flex; align-items: flex-start; gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--color-text);
}
.resume-job__qnum {
    flex: none;
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

/* — bottom info row — */
.resume-job__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
@media (min-width: 768px) {
    .resume-job__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
    }
}
.resume-job__leave {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 140ms ease;
    min-height: 44px;
}
.resume-job__leave:hover, .resume-job__leave:focus-visible {
    border-color: var(--color-text-muted);
}
.resume-job__info-chip {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}
.resume-job__info-icon { flex: none; margin-top: 0.15rem; }
.resume-job__info-icon--sage { color: var(--color-success); }
.resume-job__info-icon--violet { color: var(--color-accent); }
.resume-job__info-text {
    display: flex; flex-direction: column; gap: 0.1rem;
    font-size: 0.875rem;
    min-width: 0;
}
.resume-job__info-text strong { color: var(--color-text); font-weight: 600; }
.resume-job__info-text .muted { font-size: 0.8125rem; }

/* ============================================================================
   Resume — analytical result page (/app/resumes/results/{id})
   ============================================================================
   Page-local scope `.page--resume-result` + atomic components: hero, KPI strip,
   experience timeline, skills, matching cards, education sidebar, growth-points.
   New shared atom: `.score-ring` (используется и в landing hero, и в этой
   странице — потенциально reuse-able, но пока живёт здесь). */

/* ----- Score ring (ui_score_ring) --------------------------------------- */
/* flex: none и aspect-ratio — кольцо остаётся кругом в любой flex-строке:
   рядом с длинным текстом оно сжималось по ширине в овал (панель качества
   на «Резюме», 12.10). */
.score-ring { --score: 0; --diameter: 9rem; --stroke: 8;
    flex: none; aspect-ratio: 1;
    position: relative; width: var(--diameter); height: var(--diameter);
    display: inline-flex; align-items: center; justify-content: center;
}
.score-ring--sm { --diameter: 4.5rem; --stroke: 10; }
.score-ring--md { --diameter: 6.5rem; --stroke: 9; }
.score-ring--lg { --diameter: 9rem;   --stroke: 8; }
.score-ring--xl { --diameter: 12rem;  --stroke: 7; }
.score-ring__svg {
    position: absolute; inset: 0;
    transform: rotate(-90deg);
    width: 100%; height: 100%;
    /* `overflow: visible` обязателен — drop-shadow на __fill расходится за
       пределы viewBox 0 0 100 100, и без visible SVG clip'ает его
       прямоугольным viewport'ом → визуальный квадрат вокруг donut'а
       (был во всех размерах: hero, sidebar-card, anywhere). */
    overflow: visible;
}
.score-ring__track {
    fill: none; stroke: var(--color-border); stroke-width: var(--stroke);
    opacity: 0.55;
}
.score-ring__fill {
    fill: none; stroke: var(--ring-accent, var(--color-accent));
    stroke-width: var(--stroke); stroke-linecap: round;
    stroke-dasharray: 282.74;
    stroke-dashoffset: calc(282.74 - 282.74 * var(--score) / 100);
    /* Мягкий 2-слойный glow — резкий внутренний (4px) + рассеянный внешний
       (16px) — даёт плавную атмосферу без жёсткого ореола. */
    filter:
        drop-shadow(0 0 4px rgba(var(--ring-accent-rgb, var(--color-accent-rgb)), 0.45))
        drop-shadow(0 0 16px rgba(var(--ring-accent-rgb, var(--color-accent-rgb)), 0.20));
    transition: stroke-dashoffset 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* На XL-размере glow ещё мягче — 4 + 24px — соответствует масштабу ring'а. */
.score-ring--xl .score-ring__fill {
    filter:
        drop-shadow(0 0 5px rgba(var(--ring-accent-rgb, var(--color-accent-rgb)), 0.50))
        drop-shadow(0 0 24px rgba(var(--ring-accent-rgb, var(--color-accent-rgb)), 0.18));
}
.score-ring--neutral { --ring-accent: var(--color-text-muted); --ring-accent-rgb: 148, 163, 184; }
.score-ring--danger  { --ring-accent: var(--color-danger); --ring-accent-rgb: 239, 68, 68; }
.score-ring--warning { --ring-accent: var(--color-amber);  --ring-accent-rgb: 245, 158, 11; }
.score-ring--good    { --ring-accent: var(--color-teal);   --ring-accent-rgb: var(--color-teal-rgb); }
.score-ring--strong  { --ring-accent: var(--color-sage);   --ring-accent-rgb: var(--color-sage-rgb); }
/* accent — вне tier-семантики (индиго): для не-data контекстов (напр. hero-мок
   лендинга, где кольцо декоративно, а не completeness-оценка). Передаётся
   явным variant="accent". */
.score-ring--accent  { --ring-accent: var(--color-accent);  --ring-accent-rgb: var(--color-accent-rgb); }
.score-ring__center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.score-ring__value { font-family: var(--font-serif); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.score-ring__value small { font-size: 0.55em; color: var(--color-text-muted); margin-left: 0.15rem; font-weight: 500; }
.score-ring__label { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0; text-transform: none; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.score-ring--sm .score-ring__value { font-size: 1.125rem; }
.score-ring--sm .score-ring__label { display: none; }
.score-ring--md .score-ring__value { font-size: 1.45rem; }

/* ============================================================================
   Resume detail page — refined utilitarian dashboard
   ============================================================================
   Страница `/app/resumes/results/{id}` — рабочий экран кабинета, не
   marketing-page. Никаких hero-editorial / iOS-tile с halo /
   display-serif заголовков с italic-em. Только: identity-strip сверху,
   плоские <section> с h2 + counter, definition-list'ы, thin progress
   rows для качественных метрик. Density важнее эмоций — это инструмент
   для работы с данными резюме. */

.page--resume-detail {
    display: flex; flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

/* ----- Identity strip ---------------------------------------------------- */
.resume-detail__identity {
    display: grid; gap: var(--space-4);
    grid-template-columns: 1fr;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
@media (min-width: 768px) { .resume-detail__identity { grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start; } }
.resume-detail__identity-main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.resume-detail__eyebrow {
    margin: 0;
    font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0;
    text-transform: none; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.resume-detail__name {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
}
.resume-detail__name em { font-style: italic; color: var(--color-text-muted); font-weight: 400; }
.resume-detail__headline {
    margin: 0; color: var(--color-text-soft); font-size: 1rem; line-height: 1.4;
}
.resume-detail__meta {
    list-style: none; padding: 0; margin: var(--space-1) 0 0;
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
}
.resume-detail__meta li {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-sans); font-size: 0.8125rem; color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}
.resume-detail__meta a { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
.resume-detail__meta a:hover { color: var(--color-text); border-bottom-color: var(--color-accent); }
.resume-detail__meta .icon { color: var(--color-text-muted); }
.resume-detail__meta-stamp { color: var(--color-text-muted) !important; }

/* Score panel справа в identity strip */
.resume-detail__score {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--space-2); min-width: 12rem;
}
@media (min-width: 768px) { .resume-detail__score { align-items: flex-end; text-align: right; } }
.resume-detail__score-label {
    margin: 0;
    font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0;
    text-transform: none; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.resume-detail__score-value {
    display: flex; align-items: baseline; gap: 0.15rem;
    font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em;
}
.resume-detail__score-num { font-size: 2.2rem; line-height: 1; color: var(--color-text); }
.resume-detail__score-unit { font-size: 1rem; color: var(--color-text-muted); }
.resume-detail__score-bar {
    width: 100%; min-width: 10rem; height: 4px;
    background: var(--color-border); border-radius: 2px; overflow: hidden;
}
.resume-detail__score-bar > span {
    display: block; height: 100%;
    background: var(--color-accent);
    border-radius: inherit;
    transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.resume-detail__score-cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.resume-detail__cta-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.2rem; height: 1.2rem; padding: 0 0.35rem;
    border-radius: 999px; background: rgba(255,255,255,0.18);
    font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ----- Inline meta bar (категория · подкатегория · уровень · ...) ------- */
.resume-detail__meta-bar {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.resume-detail__meta-bar dl { display: inline-flex; align-items: baseline; gap: 0.4rem; margin: 0; }
.resume-detail__meta-bar dt {
    font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0;
    text-transform: none; color: var(--color-text-muted); margin: 0;
    font-variant-numeric: tabular-nums;
}
.resume-detail__meta-bar dd { margin: 0; color: var(--color-text); font-size: 0.875rem; font-weight: 500; }

/* ----- Plain section primitives ----------------------------------------- */
.resume-detail__section { display: flex; flex-direction: column; gap: var(--space-3); }

/* ============================================================================
   Resume Workspace v2 — компоненты parser schema 1.3 redesign
   ============================================================================
   5 partials под мок дизайнера: section-score-row, recommendation-banner,
   match-label-row, matching-role-card (pip-bar), career-kpi, open-question-row.
   Все используют существующие token'ы + icon-tile patterns, согласованные с
   .benefit-row__icon / .hint-row__icon. */

/* — Icon-tile pattern (общий для нескольких новых компонентов) — */
.icon-tile {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
}
.icon-tile--sage   { background: rgba(var(--color-sage-rgb,  74 122 74), 0.14); color: var(--color-success, var(--color-sage, #4a7a4a)); }
.icon-tile--teal   { background: rgba(var(--color-teal-rgb,  64 158 158), 0.14); color: var(--color-teal, #409e9e); }
.icon-tile--amber  { background: rgba(var(--color-amber-rgb, 197 142 56), 0.14); color: var(--color-amber, var(--color-warning, #b66d00)); }
.icon-tile--coral  { background: rgba(var(--color-coral-rgb, 200 66 61), 0.12);  color: var(--color-coral, var(--color-danger, #c8423d)); }
.icon-tile--muted  { background: var(--color-surface-2, rgba(0, 0, 0, 0.04));     color: var(--color-text-muted); }

/* — Section-score-row — табличная строка «секция → score + comment + CTA» — */
.section-scores-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.section-score-row {
    display: grid;
    /* Fixed tracks (not content-sized) so icon/title/pill/score align across
       every independent row — иначе разной длины title'ы и pill'ы толкают
       столбцы вправо построчно («строки прыгают относительно столбцов»). */
    grid-template-columns: auto 13.5rem 9rem 4.5rem minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
/* Recipe = .snapshot-icon (hero snapshot card). Squircle 12px + pastel
   fill + inset hairline + tight bloom через --icon-rgb tone-токен. */
.section-score-row__icon {
    --icon-rgb: var(--color-accent-rgb);
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 0;
    /* Icon-система: голый глиф-маркер (без плитки/фона) — плейт живёт один раз
       в шапке «Качество секций». Тон по статусу через --icon-rgb. */
    color: rgb(var(--icon-rgb));
}
.section-score-row__icon .icon { stroke-width: var(--icon-stroke); }
/* good/strong/solid — иконка остаётся бренд-accent (default): тир уже
   показан пилюлей + числом, зелёный gauge на каждой строке = green wall.
   Warning-тон оставляем только на реально слабых секциях. */
.section-score-row--needs_work  .section-score-row__icon { --icon-rgb: var(--color-amber-rgb); }
.section-score-row--draft       .section-score-row__icon { --icon-rgb: var(--color-coral-rgb, 200 86 86); }
.section-score-row__title { margin: 0; font-weight: 600; font-size: 0.9375rem; color: var(--color-text); }
.section-score-row__pill {
    justify-self: start;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.section-score-row__pill--good,
.section-score-row__pill--strong {
    background: rgba(var(--color-sage-rgb, 74 122 74), 0.14);
    color: var(--color-success);
}
.section-score-row__pill--solid {
    background: rgba(var(--color-teal-rgb, 64 130 138), 0.14);
    color: var(--color-teal, #2e6b73);
}
.section-score-row__pill--needs_work {
    background: rgba(var(--color-amber-rgb, 197 142 56), 0.14);
    color: var(--color-amber, var(--color-warning, #b66d00));
}
.section-score-row__pill--draft {
    background: rgba(var(--color-coral-rgb, 200 86 86), 0.14);
    color: var(--color-coral, var(--color-danger, #b8453f));
}
.section-score-row__score {
    justify-self: start;
    white-space: nowrap;
}
.section-score-row__comment { margin: 0; color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.45; }
.section-score-row__action { display: inline-flex; justify-self: end; }
@media (max-width: 900px) {
    .section-score-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "icon title score"
            "pill pill action"
            "comment comment comment";
        gap: var(--space-2);
    }
    .section-score-row__icon    { grid-area: icon; }
    .section-score-row__title   { grid-area: title; }
    .section-score-row__score   { grid-area: score; text-align: right; }
    .section-score-row__pill    { grid-area: pill; justify-self: start; }
    .section-score-row__action  { grid-area: action; justify-self: end; }
    .section-score-row__comment { grid-area: comment; }
}

/* ============================================================================
   Section score chip + drilldown (ui_section_score_chip / ui_section_drilldown)
   ============================================================================
   Per-section scoring inline на табе «Резюме»: compact tier-colored badge
   рядом с h2 секции. Клик → drilldown (native popover): bottom-sheet на
   mobile (≤767px), side-panel справа на desktop (≥768px). Tier-палитра —
   единая sage/teal/amber/coral (как matching-role-card), source = scoreTone. */
.section-score-chip {
    display: inline-flex;
    /* align-items: baseline прижимал «72» к низу овала, визуально cifры
       сидели НЕ по центру (особенно заметно на чипе высотой 28px с тонким
       padding). center + line-height 1 даёт честно-центрированный текст. */
    align-items: center;
    gap: 0.05rem;
    justify-content: center;
    min-height: 28px;        /* ≥24px tap-zone; padding доводит ширину до ≥44px */
    min-width: 44px;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
    font-variant-numeric: tabular-nums;
}
.section-score-chip:hover,
.section-score-chip:focus-visible {
    border-color: color-mix(in srgb, var(--tone, var(--color-accent)) 55%, transparent);
    background: color-mix(in srgb, var(--tone, var(--color-accent)) 9%, transparent);
}
.section-score-chip__max { font-size: 0.8125rem; font-weight: 500; opacity: 0.7; }
.section-score-chip--sage  { --tone: var(--color-sage);  border-color: color-mix(in srgb, var(--color-sage) 45%, transparent);  color: var(--color-sage); }
.section-score-chip--teal  { --tone: var(--color-teal);  border-color: color-mix(in srgb, var(--color-teal) 45%, transparent);  color: var(--color-teal); }
.section-score-chip--amber { --tone: var(--color-amber); border-color: color-mix(in srgb, var(--color-amber) 50%, transparent); color: var(--color-amber); }
.section-score-chip--coral { --tone: var(--color-coral); border-color: color-mix(in srgb, var(--color-coral) 50%, transparent); color: var(--color-coral); }

/* --- Drilldown (native popover) — bottom-sheet (mobile default) --- */
.section-drilldown {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-bottom: 0;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
    padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    animation: section-drilldown-up 260ms cubic-bezier(.2, .7, .2, 1);
}
/* `display: flex` выше переопределяет UA-default `display: none` для
   closed popover'ов — без явного hide popover оставался visible после
   hidePopover(). Раньше пробовали `:popover-open` pseudo для conditional
   display, но он не поддерживается на части браузеров с включенным
   popover API (Safari < 17.4 / старый Chromium) — popover ВООБЩЕ не
   открывался. Сейчас синхронизация через JS-listener на `toggle` event
   (app.js): при close ставит inline `style.display = 'none'`, при open
   очищает (возвращает к flex). */
.section-drilldown::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}
.section-drilldown__handle {
    width: 42px;
    height: 4px;
    background: var(--color-border);
    border-radius: 999px;
    margin: 0 auto;
    flex: none;
}
.section-drilldown__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.section-drilldown__eyebrow {
    margin: 0 0 0.2rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
}
.section-drilldown__score {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.section-drilldown__score strong { font-weight: 700; }
.section-drilldown__tier {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.section-drilldown--sage  .section-drilldown__tier { background: color-mix(in srgb, var(--color-sage) 16%, transparent);  color: var(--color-sage); }
.section-drilldown--teal  .section-drilldown__tier { background: color-mix(in srgb, var(--color-teal) 16%, transparent);  color: var(--color-teal); }
.section-drilldown--amber .section-drilldown__tier { background: color-mix(in srgb, var(--color-amber) 18%, transparent); color: var(--color-amber); }
.section-drilldown--coral .section-drilldown__tier { background: color-mix(in srgb, var(--color-coral) 18%, transparent); color: var(--color-coral); }
.section-drilldown__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    flex: none;
}
.section-drilldown__close:hover,
.section-drilldown__close:focus-visible { background: var(--color-bg-soft); color: var(--color-text); }
.section-drilldown__body { display: flex; flex-direction: column; gap: var(--space-2); }
.section-drilldown__gaps-heading {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.section-drilldown__comment { margin: 0; color: var(--color-text-soft); font-size: 0.9375rem; line-height: 1.5; }
.section-drilldown__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-2);
}
.section-drilldown__foot > .btn { flex: 1; }

/* Picker «выберите место работы» для experience-секции drilldown'а.
   Numbered ring + title (line-clamp 2) + arrow — рядовой row-pattern
   mirror'ит questions-stack и action-queue picker'ы. */
.section-drilldown__picker-label {
    margin: 0 0 0.2rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.section-drilldown__picker {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.section-drilldown__picker li + li { border-top: 1px solid var(--color-border); }
.section-drilldown__picker-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: var(--space-2) 0;
    color: var(--color-text);
    text-decoration: none;
}
.section-drilldown__picker-row:hover .section-drilldown__picker-title,
.section-drilldown__picker-row:focus-visible .section-drilldown__picker-title {
    color: var(--color-accent);
}
.section-drilldown__picker-num {
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
}
.section-drilldown__picker-title {
    font-size: 0.9375rem;
    line-height: 1.35;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.section-drilldown__picker-arrow {
    color: var(--color-text-muted);
    flex: none;
}
@keyframes section-drilldown-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes section-drilldown-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@media (min-width: 768px) {
    /* DESKTOP = side-panel справа (slide-in от right). Раньше начинал с
       top:0 и top-bar его визуально перекрывал (native popover top-layer
       не всегда побеждает sticky-position'ы родителей в нашем layout'е).
       Сейчас явный safe-top отступ ниже высоты top-bar + жёсткий z-index
       на случай fallback'а в normal stacking. */
    .section-drilldown {
        inset: clamp(72px, 6vh, 96px) 0 var(--space-3) auto;
        width: 420px;
        max-width: calc(100vw - 2 * var(--space-4));
        max-height: calc(100vh - clamp(72px, 6vh, 96px) - var(--space-3));
        z-index: 9999;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
        padding: var(--space-5);
        animation: section-drilldown-in 220ms cubic-bezier(.2, .7, .2, 1);
    }
    .section-drilldown::backdrop { background: transparent; backdrop-filter: none; }
    .section-drilldown__handle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .section-drilldown { animation: none; }
}

/* — Recommendation-banner — accent CTA «Следующий лучший шаг» — */
.recommendation-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--color-accent-rgb), 0.32);
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.14),
        rgba(var(--color-accent-rgb), 0.04));
    position: relative;
}
.recommendation-banner__icon {
    width: 3rem; height: 3rem;
    border-radius: var(--radius-lg);
    background: rgba(var(--color-accent-rgb), 0.22);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.recommendation-banner__body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.recommendation-banner__eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.recommendation-banner__title {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
}
.recommendation-banner__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-soft, var(--color-text-muted));
}
.recommendation-banner__action { flex: none; }
@media (max-width: 768px) {
    .recommendation-banner { grid-template-columns: auto 1fr; }
    .recommendation-banner__action { grid-column: 1 / -1; justify-self: stretch; }
    .recommendation-banner__action .btn { width: 100%; }
}

/* — Match-label-row — строка «метка + strength-pill» — */
.match-labels-list { display: flex; flex-direction: column; gap: var(--space-2); }
.match-label-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
}
.match-label-row__icon {
    width: 1.85rem; height: 1.85rem;
    border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-surface-2, rgba(0, 0, 0, 0.04));
    color: var(--color-text-muted);
}
.match-label-row--strong .match-label-row__icon { background: rgba(var(--color-sage-rgb, 74 122 74), 0.14); color: var(--color-success); }
.match-label-row--medium .match-label-row__icon { background: rgba(var(--color-amber-rgb, 197 142 56), 0.14); color: var(--color-amber, var(--color-warning, #b66d00)); }
.match-label-row--weak   .match-label-row__icon { background: rgba(var(--color-coral-rgb, 200 66 61), 0.12); color: var(--color-coral, var(--color-danger, #c8423d)); }
.match-label-row__label { margin: 0; font-weight: 500; font-size: 0.9375rem; color: var(--color-text); }
.match-label-row__pill {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.match-label-row__pill--strong { background: rgba(var(--color-sage-rgb, 74 122 74), 0.14); color: var(--color-success); }
.match-label-row__pill--medium { background: rgba(var(--color-amber-rgb, 197 142 56), 0.14); color: var(--color-amber, var(--color-warning, #b66d00)); }
.match-label-row__pill--weak   { background: rgba(var(--color-coral-rgb, 200 66 61), 0.12); color: var(--color-coral, var(--color-danger, #c8423d)); }

/* — Matching-role-card — Safe / Growth / Stretch с pip-bar — */
/* Match-tier top-accent приглушён к бренду: раньше safe/growth/stretch давали
   стену green/teal/coral (бордер + head + бары + %). Теперь верхний акцент —
   accent (brand); сам tier несёт мелкая tier-иконка + текст «Безопасный выбор».
   Stretch держит приглушённый coral как единственный «дотянуться»-флаг. */
/* Head-eyebrow — приглушённый muted (не цветной); tier-сигнал несёт иконка. */
/* Число — ui_score_value (нейтральное). Tier-сигнал живёт в eyebrow
   («БЕЗОПАСНЫЙ ВЫБОР») + tier-цветных pip'ах, НЕ в проценте (единый
   score-язык). Прежний tier-tint процента убран. */

/* Skills gap CSS (Task 14) удалён в bc44987-followup: skills-gap — не зона
   resume-parser'а. MatchingRole.SkillsGap снят с контракта; партиал
   _skills_gap_chip.html и блок «Что нужно доучить» в matching-role-card
   удалены полностью. */

/* ============================================================================
   ui_bracket_position_chart (Task 14) — «где я по рынку» слайдер
   ============================================================================
   Track = thin progress-bar (mirror _resume_quality_row.html); marker = filled
   accent circle, ≥44px touch-зона через ::before. junior→middle→senior labels
   под баром, активный брекет — bold accent. */
.bracket-chart {
    margin: var(--space-3) 0 0;
    width: 100%;
    max-width: 600px;
}
.bracket-chart__track {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--color-border);
}
.bracket-chart__fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg,
        rgba(var(--color-accent-rgb), 0.35),
        rgba(var(--color-accent-rgb), 0.85));
}
.bracket-chart__marker {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.4),
                0 0 0 3px var(--color-surface);
    cursor: help;
}
/* ≥44px невидимая touch-зона вокруг маркера (WCAG 2.5.5). */
.bracket-chart__marker::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.bracket-chart__marker:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}
.bracket-chart__labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
}
.bracket-chart__label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.bracket-chart__label.is-active {
    color: var(--color-accent);
    font-weight: 700;
}

/* ============================================================================
   Overview-tab sections — Strengths/Risks, Matching grid, Experience preview
   ============================================================================
   До добавления этих стилей вёрстка деградировала в plain block-flow (заголовки
   склеивались, чипы шли inline-текстом, карточки матчинга — full-width столбцом).
   Editorial-direction: hairline-разделители, mono-eyebrows, асимметричный grid,
   tier-семантика через accent-color. */

/* --- Strengths / Risks: 2-col grid с vertical-rule --- */
.overview-strengths-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-5);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse at top left,  rgba(var(--color-sage-rgb), 0.04), transparent 60%),
        radial-gradient(ellipse at top right, rgba(var(--color-coral-rgb, 200 66 61), 0.04), transparent 60%);
}
.overview-strengths-grid__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.overview-strengths-grid__col + .overview-strengths-grid__col {
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-6);
}
.overview-strengths-grid__head { margin: 0; }
.overview-strengths-grid__head h2 {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.overview-strengths-grid__head h2::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    display: inline-block;
    background: currentColor;
    opacity: 0.65;
}
.overview-strengths-grid__col:first-child .overview-strengths-grid__head h2 { color: var(--color-sage); }
.overview-strengths-grid__col:last-child  .overview-strengths-grid__head h2 { color: var(--color-coral, var(--color-danger, #c8423d)); }
.overview-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
    align-items: flex-start;
}
@media (max-width: 767px) {
    .overview-strengths-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        padding: var(--space-4);
    }
    .overview-strengths-grid__col + .overview-strengths-grid__col {
        border-left: none;
        border-top: 1px solid var(--color-border);
        padding-left: 0;
        padding-top: var(--space-5);
    }
}

/* --- Overview roles preview — scannable list, не heavy 3-card grid (F2) ---
   До этого был .overview-matching-grid с 3 ui_matching_role_card (pip-bar +
   rationale + button каждая = 250px высоты). Это 3-я по приоритету секция,
   достаточно scan-list. Drill-down — клик на строку → tab «Роли». */
.overview-matching-grid { display: none; } /* старый класс не используется */
.overview-roles-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}
.overview-roles-list__item {
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
.overview-roles-list__item:last-child { border-bottom: none; }
.overview-roles-list__item::before {
    /* Tier-color polosa слева — semantic identity (sage/teal/coral).
       5px — достаточно для scan-ability на широком viewport. */
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 5px;
    background: var(--color-text-muted);
}
.overview-roles-list__item--safe::before    { background: var(--color-sage, var(--color-success)); }
.overview-roles-list__item--growth::before  { background: var(--color-teal); }
.overview-roles-list__item--stretch::before { background: var(--color-coral, var(--color-danger, #c8423d)); }

.overview-roles-list__link {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr auto auto;
    align-items: baseline;
    column-gap: clamp(0.75rem, 2vw, 1.5rem);
    padding: var(--space-4) var(--space-5);
    padding-left: calc(var(--space-5) + 0.65rem);
    text-decoration: none;
    color: var(--color-text);
    transition: background 220ms ease;
}
.overview-roles-list__link:hover {
    background: color-mix(in srgb, var(--color-accent) 4%, transparent);
}
.overview-roles-list__item--safe    .overview-roles-list__link:hover { background: color-mix(in srgb, var(--color-sage, var(--color-success)) 5%, transparent); }
.overview-roles-list__item--growth  .overview-roles-list__link:hover { background: color-mix(in srgb, var(--color-teal) 5%, transparent); }
.overview-roles-list__item--stretch .overview-roles-list__link:hover { background: color-mix(in srgb, var(--color-coral, var(--color-danger, #c8423d)) 5%, transparent); }

.overview-roles-list__tier-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.overview-roles-list__item--safe    .overview-roles-list__tier-eyebrow { color: var(--color-sage, var(--color-success)); }
.overview-roles-list__item--growth  .overview-roles-list__tier-eyebrow { color: var(--color-teal); }
.overview-roles-list__item--stretch .overview-roles-list__tier-eyebrow { color: var(--color-coral, var(--color-danger, #c8423d)); }

.overview-roles-list__title {
    font-family: var(--font-display, var(--font-sans));
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-text);
    min-width: 0;
}
.overview-roles-list__pct {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.overview-roles-list__item--safe    .overview-roles-list__pct { color: var(--color-sage, var(--color-success)); }
.overview-roles-list__item--growth  .overview-roles-list__pct { color: var(--color-teal); }
.overview-roles-list__item--stretch .overview-roles-list__pct { color: var(--color-coral, var(--color-danger, #c8423d)); }

.overview-roles-list__chev {
    display: inline-flex;
    color: var(--color-text-muted);
    transition: transform 220ms ease, color 220ms ease;
}
.overview-roles-list__link:hover .overview-roles-list__chev {
    color: var(--color-accent);
    transform: translateX(3px);
}

@media (max-width: 599px) {
    .overview-roles-list__link {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        row-gap: 0.25rem;
    }
    .overview-roles-list__tier-eyebrow { grid-row: 1; grid-column: 1; }
    .overview-roles-list__title        { grid-row: 2; grid-column: 1 / -1; }
    .overview-roles-list__pct          { grid-row: 1; grid-column: 2; }
    .overview-roles-list__chev         { display: none; }
}

/* Experience preview CSS удалён вместе с секцией — UX-decision: preview без
   insights дублировал tab-navigation, chevron создавал false-clickable. */

/* — Career-KPI card — для Career Snapshot на Обзор-табе — */
/* ============================================================================
   Overview Hero — Concept A: score + diagnosis + primary CTA на первом экране.
   ============================================================================
   Заменяет 4-card Career Snapshot. Двухколоночный grid: large donut слева,
   editorial content справа (eyebrow + 1-line diagnosis + actions row).
   На mobile стэк: donut по центру, content под ним left-aligned. */
/* Iter-3 (June 2026): hero — single-column, info-dense. Раньше hero
   был 2-колоночным grid (donut + content); donut дублировал score-pill
   в top-bar, content нёс только 1 предложение и CTA-дубль (тот же текст
   в NBA banner ниже). Теперь hero — eyebrow + diagnosis + 5 axis rows,
   которые раньше жили только на Resume tab. На glance видно весь breakdown. */
.overview-hero {
    /* Card recipe = .example-card (landing): triple-layer subtle gradient,
       soft drop-shadow, 1px border. Заменил left-strip + top-streak. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: clamp(1.4rem, 2.4vw, 2rem);
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(var(--color-accent-rgb), 0.06) 0%, transparent 55%),
        linear-gradient(180deg, rgba(var(--color-bg-rgb), 0.55) 0%, rgba(var(--color-bg-rgb), 0.85) 100%),
        var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 18px -10px rgba(0, 0, 0, 0.45);
    isolation: isolate;
}
.overview-hero__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* Subtle divider между head и breakdown — breakdown воспринимается как
       supporting evidence, не как отдельная секция. */
    padding-bottom: var(--space-3);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
.overview-hero__eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Streak-тире перед eyebrow editorial-header'а — пришёл с лендинга
   (.section-label::before паттерн), применяется к избранным eyebrow'ам
   в кабинете для editorial-полировки. Не на все eyebrow'и подряд —
   только на тех, которые открывают первую секцию таба. */
.overview-hero__eyebrow::before,
.roles-positioning .resume-detail__eyebrow::before,
.content-basics .resume-detail__eyebrow::before {
    content: '— ';
    color: var(--color-accent);
    font-family: var(--font-serif);
    font-style: normal;
    margin-right: 4px;
    letter-spacing: 0;
}
.overview-hero__diagnosis {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-weight: 500;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    line-height: 1.45;
    color: var(--color-text);
    /* Не больше 3 строк — это hero-диагностика, не essay. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.overview-hero__breakdown {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* — Overview AI-narrative — collapsed essay через <details>/<summary> — */
.overview-narrative__details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}
.overview-narrative__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    transition: background 200ms ease;
}
.overview-narrative__summary::-webkit-details-marker { display: none; }
.overview-narrative__summary:hover { background: color-mix(in srgb, var(--color-accent) 4%, transparent); }

/* UX-fix F6: eyebrow + title в одной строке, eyebrow стал pill-badge'ем
   (inline-marker «это collapsed CTA», не section-heading). Раньше eyebrow
   читался как заголовок секции — визуально неотличимо от Strengths/Roles. */
.overview-narrative__head {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    min-width: 0;
}
.overview-narrative__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.overview-narrative__title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
}
/* Chevron rotation теперь приходит из общего .link-disclosure правила
   (см. секцию Link contracts). Локально оставляем только цвет — chevron
   muted-серый, не accent (composite summary имеет свой visual rhythm). */
.overview-narrative__chev { color: var(--color-text-muted); }
.overview-narrative__body {
    padding: var(--space-2) var(--space-5) var(--space-5);
    border-top: 1px solid var(--color-border);
    animation: overview-narrative-reveal 320ms cubic-bezier(.2,.7,.2,1);
}
.overview-narrative__body p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text);
}
@keyframes overview-narrative-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* — Career Snapshot — 4 KPI cards redesign (Senior UI/UX revision) —
   Equal-height grid через `align-items: stretch`, slim accent-border per
   semantics (purple/teal/violet/coral), CSS-clamp на essay для предотвращения
   wall-of-text, footer-row с chip + CTA для action-density. */
.career-snapshot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-4);
    align-items: stretch;
}
.career-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    position: relative;
    overflow: hidden;
    transition: border-color 200ms ease, transform 200ms ease;
}
.career-kpi::before {
    /* Slim 3px accent-border слева — visually идентифицирует семантику карточки.
       Цвет берётся из career-kpi--tone-* (см. ниже). */
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 220ms ease;
}
.career-kpi--tone-accent::before { background: var(--color-accent); }
.career-kpi--tone-teal::before   { background: var(--color-teal); }
.career-kpi--tone-sage::before   { background: var(--color-sage, var(--color-success)); }
.career-kpi--tone-coral::before  { background: var(--color-coral, var(--color-danger, #c8423d)); }
.career-kpi--tone-amber::before  { background: var(--color-amber, var(--color-warning, #b66d00)); }
.career-kpi--tone-muted::before  { background: var(--color-border); }
.career-kpi:hover { border-color: color-mix(in srgb, currentColor 30%, var(--color-border)); }

.career-kpi__head { display: inline-flex; align-items: center; gap: 0.5rem; }
.career-kpi__icon {
    width: 1.85rem; height: 1.85rem;
    border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
}
/* Тон — через --plate-rgb (премиум-плашка ниже читает его); background/color
   задаёт общий icon-plate-рул, не эти строки. */
.career-kpi--tone-teal  .career-kpi__icon { --plate-rgb: var(--color-teal-rgb); }
.career-kpi--tone-sage  .career-kpi__icon { --plate-rgb: var(--color-sage-rgb); }
.career-kpi--tone-coral .career-kpi__icon { --plate-rgb: var(--color-coral-rgb, 200 66 61); }
.career-kpi--tone-amber .career-kpi__icon { --plate-rgb: var(--color-amber-rgb, 197 142 56); }

.career-kpi__eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.career-kpi__body { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text); }
.career-kpi__sub  { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); }
.career-kpi__sub--center { text-align: center; }

/* — Essay variant: clamp + gradient fade для предотвращения wall-of-text — */
.career-kpi--essay .career-kpi__essay-clamp {
    position: relative;
    max-height: 16rem;
    overflow: hidden;
}
.career-kpi--essay .career-kpi__essay-clamp::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4rem;
    background: linear-gradient(to bottom, transparent 0%, var(--color-surface) 90%);
    pointer-events: none;
}
.career-kpi--essay .career-kpi__body { font-size: 0.9375rem; }

/* — Donut variant: centered, large percent — */
.career-kpi--donut { align-items: stretch; }
.career-kpi__donut-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}
.career-kpi__donut-stack .score-ring { flex: none; }

/* — Rolelist variant: structured 3-row list с tier-dot + match% — */
.career-kpi__rolelist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.career-kpi__rolelist-item {
    display: grid;
    grid-template-columns: 0.6rem 1fr auto;
    align-items: center;
    column-gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}
.career-kpi__rolelist-item:last-child { border-bottom: none; }
.career-kpi__rolelist-dot {
    width: 0.5rem; height: 0.5rem;
    border-radius: 50%;
    background: var(--color-text-muted);
}
.career-kpi__rolelist-item--safe    .career-kpi__rolelist-dot { background: var(--color-sage, var(--color-success)); }
.career-kpi__rolelist-item--growth  .career-kpi__rolelist-dot { background: var(--color-teal); }
.career-kpi__rolelist-item--stretch .career-kpi__rolelist-dot { background: var(--color-coral, var(--color-danger, #c8423d)); }
.career-kpi__rolelist-title {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.career-kpi__rolelist-pct {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.career-kpi__rolelist-item--safe    .career-kpi__rolelist-pct { color: var(--color-sage, var(--color-success)); }
.career-kpi__rolelist-item--growth  .career-kpi__rolelist-pct { color: var(--color-teal); }

/* — Alert variant: усиленный coral-border + alert typography — */
.career-kpi--alert {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-coral, var(--color-danger)) 6%, var(--color-surface)) 0%,
        var(--color-surface) 60%);
}
.career-kpi--alert::before { width: 4px; }
.career-kpi__body--alert {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
}

/* — Legacy: count variant (backward-compat) — */
.career-kpi__count-title {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
}
.career-kpi__donut-row { display: flex; align-items: center; gap: var(--space-3); }
.career-kpi__donut-row .score-ring { flex: none; }

/* — Footer: chip + CTA в одной строке (action-density) — */
.career-kpi__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-2);
    flex-wrap: wrap;
}
.career-kpi__footer:empty { display: none; }
.career-kpi__chip {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.career-kpi__chip--sage   { background: rgba(var(--color-sage-rgb,  74 122 74), 0.14);  color: var(--color-success); }
.career-kpi__chip--teal   { background: rgba(var(--color-teal-rgb,  64 158 158), 0.14); color: var(--color-teal); }
.career-kpi__chip--amber  { background: rgba(var(--color-amber-rgb, 197 142 56), 0.14); color: var(--color-amber, var(--color-warning, #b66d00)); }
.career-kpi__chip--coral  { background: rgba(var(--color-coral-rgb, 200 66 61), 0.12);  color: var(--color-coral, var(--color-danger, #c8423d)); }
.career-kpi__chip--accent { background: rgba(var(--color-accent-rgb), 0.12); color: var(--color-accent); }
.career-kpi__chip--muted  { background: var(--color-surface-2, rgba(0, 0, 0, 0.04)); color: var(--color-text-muted); }
.career-kpi__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-accent);
    text-decoration: none;
    padding: 0.3rem 0;
    transition: color 200ms ease, transform 200ms ease;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.career-kpi__cta:hover {
    color: var(--color-accent-strong, var(--color-accent));
}
.career-kpi__cta:hover .icon { transform: translateX(2px); }
.career-kpi__cta .icon { transition: transform 220ms ease; }
.career-kpi--tone-teal  .career-kpi__cta { color: var(--color-teal); }
.career-kpi--tone-sage  .career-kpi__cta { color: var(--color-sage, var(--color-success)); }
.career-kpi--tone-coral .career-kpi__cta { color: var(--color-coral, var(--color-danger, #c8423d)); }

/* ============================================================
   Career trajectory (ui_career_trajectory) — Обзор tab roadmap
   «Где я → Следующий шаг → Потолок». Mobile-first: horizontal
   snap-scroll узлов с mask-fade; desktop — flex-row + connectors.
   ============================================================ */
.career-trajectory { display: flex; flex-direction: column; gap: var(--space-3); }
.career-trajectory__head { display: flex; align-items: baseline; }
.career-trajectory__eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.career-trajectory__track {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-2);
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* mask-fade на правом крае — намёк на скролл (как .tab-strip) */
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}
.career-trajectory__track::-webkit-scrollbar { display: none; }
.career-trajectory__node {
    scroll-snap-align: start;
    flex: 0 0 11rem;
    min-width: 11rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    padding: var(--space-4) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.career-trajectory__node--accent { border-color: rgba(var(--color-accent-rgb), 0.35); }
.career-trajectory__node--amber  { border-color: rgba(var(--color-amber-rgb, 197 142 56), 0.4); }
.career-trajectory__node--slate  { border-color: var(--color-border); }
.career-trajectory__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: inherit;
    /* tap-target — вся плашка кликабельна */
    min-height: 44px;
}
.career-trajectory__link:hover .career-trajectory__role { color: var(--color-accent); }
.career-trajectory__plate { margin-bottom: 0.15rem; }
.career-trajectory__role {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
    transition: color 180ms ease;
}
.career-trajectory__cat {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}
.career-trajectory__caption {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.career-trajectory__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
}
.career-trajectory__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--color-sage-rgb, 74 122 74), 0.14);
    color: var(--color-success);
}
.career-trajectory__badge .icon { width: 13px; height: 13px; }
/* connector между узлами — на мобиле скрыт (snap-scroll), на десктопе видим */
.career-trajectory__track > .pipeline-conn { display: none; align-self: center; }

@media (min-width: 768px) {
    .career-trajectory__track {
        overflow-x: visible;
        -webkit-mask-image: none;
        mask-image: none;
        gap: 0;
        align-items: stretch;
    }
    .career-trajectory__node { flex: 1 1 0; min-width: 0; }
    .career-trajectory__track > .pipeline-conn { display: inline-flex; flex: 0 0 auto; }
}

/* — Open-question-row — компактный preview-ряд вопроса — */
.open-questions-preview { display: flex; flex-direction: column; gap: var(--space-2); }
.open-question-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color 200ms ease;
}
.open-question-row:hover { border-color: rgba(var(--color-accent-rgb), 0.35); }
/* .open-question-row__icon — layout-hook поверх .icon-plate. Визуал из
   компонента ui_icon_plate (outlined sm accent). */
.open-question-row__icon { margin-top: 2px; }
.open-question-row__text { margin: 0; font-size: 0.9375rem; line-height: 1.4; color: var(--color-text); }
.open-question-row__pill {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.open-question-row__pill--high   { background: rgba(var(--color-amber-rgb, 197 142 56), 0.14); color: var(--color-amber, var(--color-warning, #b66d00)); }
.open-question-row__pill--medium { background: var(--color-surface-2, rgba(0,0,0,0.04)); color: var(--color-text-muted); }
.open-question-row__pill--low    { background: var(--color-surface-2, rgba(0,0,0,0.04)); color: var(--color-text-muted); }
.open-question-row__cta {
    /* Layout-only overrides поверх .link-inline — padding для tap-target
       (44px gross), grid-placement на mobile. Цвет/underline/arrow —
       полностью из .link-inline. */
    padding: 0.3rem 0.5rem;
    min-height: 36px;
}
@media (max-width: 640px) {
    .open-question-row { grid-template-columns: auto 1fr; }
    .open-question-row__pill { grid-column: 2; justify-self: start; }
    .open-question-row__cta  { grid-column: 1 / -1; justify-self: end; }
}

/* ───── Unified action queue (Task 15) ─────────────────────────────────
   Единая очередь действий на табе «Действия»: red_flags + open_questions +
   hints в одном приоритизированном списке. Каждый item — карточка с
   priority-color border-left (coral/amber/teal) + icon-plate + inline-CTA.
   Mobile-first: базовый layout под ≤375px, full-width карточки. */
.action-queue-section__lead { margin: 0 0 var(--space-3); }

/* ───── Action Center — три визуально различные зоны ────────────────────
   Critical (hero, coral) → Questions (primary block, accent) → Hints
   (collapsed details). Каждая зона несёт свой eyebrow + title + count в
   header'е. Цель — снять «wall of text» с табы «Действия», где раньше
   12 карточек жили одного приоритета и одного веса.
   Mobile-first: одна колонка, header стекается, count'ы pill'ами уходят
   под title если не помещаются. */
.action-zone {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--color-surface);
}
.action-zone + .action-zone { margin-top: var(--space-4); }
.action-zone__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}
.action-zone__eyebrow {
    flex-basis: 100%;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-coral);
    font-variant-numeric: tabular-nums;
}
.action-zone__eyebrow--muted { color: var(--color-text-muted); }
.action-zone__title {
    margin: 0;
    font-family: var(--font-display, var(--font-body));
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    font-weight: 600;
    line-height: 1.2;
    flex: 1 1 60%;
    min-width: 0;
}
.action-zone__count {
    flex: none;
    align-self: center;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-surface-2, rgba(0,0,0,0.04));
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.action-zone__count--coral {
    background: rgba(var(--color-coral-rgb, 200 66 61), 0.14);
    color: var(--color-coral);
}
/* Accent variant — для questions zone: пользователю нужно ответить
   (actionable signal), нейтральный grey недостаточно. */
.action-zone__count--accent {
    background: rgba(var(--color-accent-rgb, 99 102 241), 0.14);
    color: var(--color-accent);
}
.action-zone__lead {
    margin: 0 0 var(--space-3);
    line-height: 1.55;
}

/* Critical hero — coral-tinted фон + смягчённый top border. Это позволяет
   зоне визуально выделяться, не превращаясь в alert-banner. */
.action-zone--critical {
    background: linear-gradient(180deg,
        rgba(var(--color-coral-rgb, 200 66 61), 0.05) 0%,
        var(--color-surface) 70%);
    border-color: rgba(var(--color-coral-rgb, 200 66 61), 0.28);
}

/* «Блок в блоке» — flatten items внутри critical zone. До этого было: outer
   coral-tinted zone-card + inner white item-card + inner picker-row cards
   = три уровня nesting. Все items в этой зоне по определению critical
   (eyebrow «СЕЙЧАС КРИТИЧНО» + heading + count это уже сообщают), поэтому
   item теряет свой chrome — рендерится как content-block с coral divider
   между записями. */
.action-zone--critical .action-queue {
    /* Divider'ы возьмут роль gap'а */
    gap: 0;
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(var(--color-coral-rgb, 200 66 61), 0.18);
}
.action-zone--critical .action-queue-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: var(--space-3) 0;
}
.action-zone--critical .action-queue-item + .action-queue-item {
    border-top: 1px solid rgba(var(--color-coral-rgb, 200 66 61), 0.18);
}
.action-zone--critical .action-queue-item:first-child { padding-top: 0; }
.action-zone--critical .action-queue-item:last-child  { padding-bottom: 0; }
/* Дубль с eyebrow зоны: «Критично» pill справа от заголовка повторяет то,
   что говорит zone eyebrow «СЕЙЧАС КРИТИЧНО» + coral count «1 не закрыто». */
.action-zone--critical .action-queue-item__pill { display: none; }

/* Picker rows: link-row style (без border/bg/transform), divider — тонкая
   coral линия. Inline-form expand'ы остаются в их «карточном» виде
   (открываются inside details — там собственный chrome ОК). */
.action-zone--critical .action-queue-item__picker {
    gap: 0;
    padding-top: var(--space-2);
}
.action-zone--critical .action-queue-item__picker-row {
    background: transparent;
    border: 0;
    border-radius: 0;
    min-height: 52px;
    padding: var(--space-2) 0;
}
.action-zone--critical .action-queue-item__picker-row + .action-queue-item__picker-row {
    border-top: 1px solid rgba(var(--color-coral-rgb, 200 66 61), 0.18);
}
.action-zone--critical .action-queue-item__picker-row:hover,
.action-zone--critical .action-queue-item__picker-row:focus-visible {
    background: transparent;
    transform: none;
    color: var(--color-coral);
}
.action-zone--critical .action-queue-item__picker-row:hover .action-queue-item__picker-title,
.action-zone--critical .action-queue-item__picker-row:focus-visible .action-queue-item__picker-title {
    color: var(--color-coral);
}

/* Questions zone — primary CTA сверху + collapsed inline ниже. */
.action-zone--questions { border-color: rgba(var(--color-accent-rgb, 99 102 241), 0.22); }
.action-zone__primary-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
/* Meta-row под CTA: time-chip (must-know) + dot + reassurance (nice-to-know).
   Раньше всё было одной слитной строкой — два разных по weight'у сигнала
   читались одинаково и оба плыли мимо. */
.action-zone__primary-cta-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    font-size: 0.875rem;
    line-height: 1.4;
}
.action-zone__time-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: var(--radius-pill, 999px);
    background: rgba(var(--color-accent-rgb, 99 102 241), 0.08);
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.action-zone__time-chip .icon { flex: none; }
.action-zone__primary-cta-reassurance { font-size: 0.8125rem; }
/* Middle-dot separator между time-chip и reassurance — связывает их как
   две части одного meta-блока CTA, не как два независимых сообщения. */
.action-zone__primary-cta-sep {
    color: var(--color-text-muted);
    opacity: 0.55;
    font-size: 0.875rem;
    line-height: 1;
}

/* Solid hairline divider — раньше был dashed, выглядел как «оторванный
   placeholder». Subtle border-top + чуть больше padding читается как
   секция-секция separator, не «нет содержимого». */
.action-zone__inline-toggle {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}
/* Pill-button affordance для summary: чтобы «Выбрать конкретный вопрос»
   читался как secondary action рядом с primary CTA, а не как plain
   link-disclosure (раньше уравнивался по weight'у с muted meta-текстом). */
.action-zone__inline-summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    padding: 0.42rem 0.85rem;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 500;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.action-zone__inline-summary:hover,
.action-zone__inline-toggle[open] > .action-zone__inline-summary {
    border-color: rgba(var(--color-accent-rgb, 99 102 241), 0.45);
    background: rgba(var(--color-accent-rgb, 99 102 241), 0.06);
    color: var(--color-accent);
}
.action-zone__inline-summary .icon { transition: transform 160ms ease; }
.action-zone__inline-toggle[open] > .action-zone__inline-summary .icon { transform: rotate(180deg); }
.action-zone__inline-summary::-webkit-details-marker { display: none; }
.action-zone__inline-summary::marker { content: ""; }
.action-zone__inline-toggle[open] .action-zone__inline-summary { margin-bottom: var(--space-3); }

/* Hints zone — минимальный chrome, contents под <details>. */
.action-zone--hints { background: transparent; border-style: dashed; }

/* Focus-ring fix для disclosure-summary внутри action zones и edit form.
   Глобальный :focus-visible-ring (:where(summary):focus-visible — accent
   outline 2px) рисуется вокруг summary border-box. Для `<details>` с
   full-width flex summary это full-width прямоугольник ВОКРУГ заголовка
   и НАД открытым контентом — визуальный disconnect «ring стоит над
   content, а не охватывает его».

   Снимаем глобальный outline с этих summary'ев и через :has() рисуем
   outline вокруг родительского <details> — он включает и summary, и
   открытое содержимое. :has() поддерживается во всех evergreen-браузерах
   (Chrome 105+ / Safari 15.4+ / Firefox 121+).  */
.action-zone__details-summary:focus-visible,
.action-zone__inline-summary:focus-visible {
    outline: none;
    box-shadow: none;
    border-radius: var(--radius-md);
}
.action-zone__details:has(.action-zone__details-summary:focus-visible),
.action-zone__inline-toggle:has(.action-zone__inline-summary:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-md);
    box-shadow: var(--glow-soft);
}
.action-zone__details > .action-queue { margin-top: var(--space-3); }
.action-zone__details-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: space-between;
    min-height: 44px;
}
.action-zone__details-summary::-webkit-details-marker { display: none; }
.action-zone__details-summary::marker { content: ""; }
.action-zone__details-title {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    margin-top: 0.2rem;
}
.action-zone__details-chev {
    transition: transform 200ms ease;
    color: var(--color-text-muted);
    flex: none;
}
.action-zone__details[open] .action-zone__details-chev { transform: rotate(180deg); }
.action-queue--hints .action-queue-item {
    background: transparent;
    border-style: dashed;
    padding: var(--space-2) var(--space-3);
}
.action-queue--hints .action-queue-item__title { font-weight: 500; font-size: 0.9375rem; }

/* ui_questions_stack — single-focus accordion для уточняющих вопросов.
   Каждая row — compact head (priority chip + truncated title + chevron);
   panel с textarea/options открывается под ней inline, и только одна row
   открыта одновременно. До этого был flat-список details: 6 questions
   с раскрытыми textarea = wall of 2500px. Сейчас «один вопрос за раз» —
   apple-style. JS controller — questions-stack.js. */
.questions-stack {
    list-style: none;
    counter-reset: qstack;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.questions-stack__row + .questions-stack__row {
    border-top: 1px solid var(--color-border);
}
.questions-stack__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 56px;
    padding: var(--space-3) 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--color-text);
    font: inherit;
}
.questions-stack__head:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.questions-stack__num {
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
}
.questions-stack__row--open .questions-stack__num {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb, 99 102 241), 0.08);
}
.questions-stack__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}
.questions-stack__prio {
    flex: none;
    padding: 0.18rem 0.5rem;
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.questions-stack__prio--high   { background: rgba(var(--color-amber-rgb), 0.16); color: var(--color-amber); }
.questions-stack__prio--medium { background: rgba(var(--color-amber-rgb), 0.10); color: var(--color-amber); }
.questions-stack__prio--low    { background: var(--color-surface-2, rgba(0,0,0,0.04)); color: var(--color-text-muted); }
.questions-stack__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.questions-stack__row--open .questions-stack__title {
    -webkit-line-clamp: unset;
    font-weight: 600;
}
.questions-stack__chev {
    flex: none;
    color: var(--color-text-muted);
    transition: transform 200ms ease;
}
.questions-stack__row--open .questions-stack__chev {
    transform: rotate(180deg);
    color: var(--color-accent);
}
.questions-stack__panel {
    padding: 0 0 var(--space-3);
}
.questions-stack__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-left: calc(1.4rem + var(--space-3));  /* визуальный inset под num-circle */
}
.questions-stack__hint {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}
.questions-stack__field {
    width: 100%;
    min-height: 100px;
    resize: vertical;
}
.questions-stack__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.questions-stack__skip {
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    padding: 0.5rem 0;
}
@media (max-width: 600px) {
    .questions-stack__form { padding-left: 0; }
    .questions-stack__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Progress anchor — compact strip над action-zones. Раньше блок был
   вертикальным (eyebrow → big counter → lead → bar = ~120px высоты).
   Сейчас grid в одну строку на desktop: eyebrow слева, counter +
   inline-bar справа; lead — under cap-line, muted. Mobile: stack. */
.action-progress-anchor {
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.action-progress-anchor__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 40px;
}
.action-progress-anchor__eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.action-progress-anchor__counter {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18rem;
    font-family: var(--font-sans);
    line-height: 1;
    justify-self: end;
    font-variant-numeric: tabular-nums;
}
.action-progress-anchor__counter-done {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
}
.action-progress-anchor__counter-sep,
.action-progress-anchor__counter-total {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}
.action-progress-anchor__lead {
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 56ch;
}
/* Inline progress-bar занимает среднюю колонку grid'а — он же визуальный
   bridge между eyebrow и counter. */
.action-progress-anchor__track {
    height: 3px;
    border-radius: 2px;
    background: var(--color-surface-2, rgba(0,0,0,0.06));
    overflow: hidden;
    align-self: center;
}
.action-progress-anchor__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-sage));
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 600px) {
    .action-progress-anchor__head {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        row-gap: var(--space-2);
    }
    .action-progress-anchor__eyebrow { grid-row: 1; grid-column: 1; }
    .action-progress-anchor__counter { grid-row: 1; grid-column: 2; }
    .action-progress-anchor__track   { grid-row: 2; grid-column: 1 / 3; }
}

/* Finalizer-row — компактная строка «по желанию, попробуй улучшенную
   версию». Иконка-плитка + текст + secondary CTA в одной flex-строке.
   Не tinted card: tile сама несёт цвет (sage / accent в зависимости от
   состояния), фон finalizer'а нейтральный. Это снимает визуальный
   конфликт с Critical hero сверху (раньше Ideal был ярко-purple, как
   2nd hero — теперь outline-tile, явно «вторичный»). */
.action-finalizer {
    margin: var(--space-4) 0 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.action-finalizer__icon { flex: none; }
.action-finalizer__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.action-finalizer__eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.action-finalizer__title { margin: 0; font-weight: 600; font-size: 1rem; color: var(--color-text); }
.action-finalizer__lead { margin: 0.2rem 0 0; font-size: 0.875rem; line-height: 1.5; }
.action-finalizer--available { border-color: rgba(var(--color-sage-rgb, 92 168 110), 0.42); background: linear-gradient(180deg, rgba(var(--color-sage-rgb, 92 168 110), 0.05), var(--color-surface) 70%); }

@media (max-width: 600px) {
    .action-finalizer { flex-direction: column; align-items: stretch; }
    .action-finalizer .btn { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
    .action-zone { padding: var(--space-3); }
    .action-zone__title { flex: 1 1 100%; }
    .action-zone__count { align-self: flex-start; }
    .action-zone__primary-cta .btn { width: 100%; justify-content: center; }
}

.action-queue {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.action-queue-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.action-queue-item--high { border-left-color: var(--color-coral); }
.action-queue-item--medium { border-left-color: var(--color-amber); }
.action-queue-item--low { border-left-color: var(--color-teal); }
.action-queue-item__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
}
.action-queue-item__icon { margin-top: 2px; flex: none; }
.action-queue-item__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.action-queue-item__title-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.action-queue-item__title { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--color-text); font-weight: 600; }
.action-queue-item__desc { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); }
.action-queue-item__pill {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.action-queue-item__pill--high   { background: rgba(var(--color-coral-rgb), 0.14); color: var(--color-coral); }
.action-queue-item__pill--medium { background: rgba(var(--color-amber-rgb), 0.14); color: var(--color-amber); }
.action-queue-item__pill--low    { background: var(--color-surface-2, rgba(0,0,0,0.04)); color: var(--color-text-muted); }
.action-queue-item__cta {
    align-self: flex-start;
    padding: 0.3rem 0.5rem;
    min-height: 36px;
    margin-left: calc(var(--icon-plate-sm, 32px) + var(--space-3));
}
.action-queue-item__expand { margin-left: calc(var(--icon-plate-sm, 32px) + var(--space-3)); }
.action-queue-item__expand-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent);
}
.action-queue-item__expand-summary::-webkit-details-marker { display: none; }
.action-queue-item__expand-chev { transition: transform 200ms ease; }
.action-queue-item__expand[open] .action-queue-item__expand-chev { transform: rotate(180deg); }

/* Inline-picker для experience-related red_flag'а: «к какой роли применить».
   Default-open <details>; список ссылок-карточек с заголовком (Должность @
   Компания) + периодом + arrow. Tap-зона ≥44px на mobile. */
.action-queue-item__expand--picker[open] { padding-bottom: var(--space-2); }
.action-queue-item__picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-3);
}
.action-queue-item__picker-eyebrow {
    margin: 0 0 var(--space-1);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.action-queue-item__picker-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.action-queue-item__picker-row:hover,
.action-queue-item__picker-row:focus-visible {
    border-color: var(--color-coral);
    background: rgba(var(--color-coral-rgb, 200 66 61), 0.04);
    transform: translateX(2px);
    outline: none;
}
.action-queue-item__picker-title {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.35;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.action-queue-item__picker-period {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.action-queue-item__picker-arrow {
    color: var(--color-coral);
    flex: none;
}
@media (max-width: 600px) {
    .action-queue-item__picker-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }
    .action-queue-item__picker-title { grid-column: 1 / 2; grid-row: 1; }
    .action-queue-item__picker-period { grid-column: 1 / 2; grid-row: 2; }
    .action-queue-item__picker-arrow  { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; }
}

/* Live achievements coach под textarea — JS пишет «X из Y строк с цифрой»
   в data-coach-text. Tone сменяется через --praise / --needs-work
   модификаторы: gray по умолчанию → sage при praise → coral при «ни одной
   цифры». Это даёт мгновенный сигнал «двигаешься в правильную сторону». */
.resume-edit__coach {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-surface-2, rgba(0,0,0,0.04));
    color: var(--color-text-muted);
    font-size: 0.875rem;
    transition: background-color 200ms ease, color 200ms ease;
}
.resume-edit__coach-icon { display: inline-flex; flex: none; }
.resume-edit__coach-text { font-weight: 500; }
.resume-edit__coach--praise {
    background: rgba(var(--color-sage-rgb, 92 168 110), 0.16);
    color: var(--color-sage-deep, var(--color-sage));
}
.resume-edit__coach--needs-work {
    background: rgba(var(--color-coral-rgb, 200 66 61), 0.12);
    color: var(--color-coral);
}

/* Focus-секция (то самое, что просит red_flag) — coral-tinted primary-блок
   вокруг textarea, к которой JS-coach (resume-edit-coach.js) крепит счётчик. */
.resume-edit__fields--focus {
    padding: var(--space-3);
    background: rgba(var(--color-coral-rgb, 200 66 61), 0.03);
    border: 1px solid rgba(var(--color-coral-rgb, 200 66 61), 0.25);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.action-queue-item__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-3);
}
.action-queue-item__form-hint { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
.action-queue-item__form-actions { display: flex; justify-content: flex-end; }

/* Summary-pointer (dedupe): компактная ссылка на «Обзор»/«Анализ», ведущая в
   action queue вместо дублирования полных списков. */
.action-summary-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-decoration: none;
    min-height: 44px;
    transition: border-color 200ms ease;
}
.action-summary-link:hover,
.action-summary-link:focus-visible { border-color: rgba(var(--color-accent-rgb), 0.35); }
.action-summary-link--danger:hover,
.action-summary-link--danger:focus-visible { border-color: rgba(var(--color-coral-rgb), 0.4); }
.action-summary-link__icon { flex: none; }
.action-summary-link__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.action-summary-link__count { font-weight: 600; color: var(--color-text); font-size: 0.9375rem; }
.action-summary-link__hint { font-size: 0.8125rem; color: var(--color-text-muted); }
.action-summary-link__chev { color: var(--color-text-muted); flex: none; display: inline-flex; }

/* — Progress tracker (ui_progress_tracker, Task 16) — footer таба «Действия»:
   «X из Y действий выполнено» + collapsible timeline правок. Bar mirror'ит
   quality-row (4px, accent-fill); timeline — native <details>. */
.progress-tracker-section { margin-top: var(--space-2); }
.progress-tracker {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.progress-tracker__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.progress-tracker__count {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--color-text);
}
.progress-tracker__count-num { font-size: 1.5rem; }
.progress-tracker__count-sep { color: var(--color-text-muted); margin: 0 0.15rem; font-weight: 400; }
.progress-tracker__count-total { color: var(--color-text-muted); font-weight: 600; }
.progress-tracker__label {
    margin: 0;
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
}
.progress-tracker__bar {
    display: block;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
}
.progress-tracker__bar > span {
    display: block; height: 100%; border-radius: inherit;
    background: var(--color-accent);
    transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.progress-tracker__history-summary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.progress-tracker__history-chev { transition: transform 200ms ease; }
.progress-tracker__history[open] .progress-tracker__history-chev { transform: rotate(180deg); }
.progress-tracker__timeline {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.progress-tracker__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 32px;
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border);
}
.progress-tracker__row:last-child { border-bottom: none; }
.progress-tracker__row-icon { flex: none; display: inline-flex; color: var(--color-text-muted); }
.progress-tracker__row-date { flex: 1; min-width: 0; font-size: 0.875rem; color: var(--color-text-muted); }
.progress-tracker__row-delta {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.875rem;
}
.progress-tracker__row-delta--up { color: var(--color-sage); }
.progress-tracker__row-delta--down { color: var(--color-coral); }
.progress-tracker__row-delta--neutral { color: var(--color-text-muted); }
.progress-tracker__row--up .progress-tracker__row-icon { color: var(--color-sage); }
.progress-tracker__row--down .progress-tracker__row-icon { color: var(--color-coral); }

/* — Resume-Quality 2-col grid (Резюме-таб) — */
.resume-qa-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}
@media (min-width: 1024px) {
    .resume-qa-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.resume-qa-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.resume-qa-card__head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.resume-qa-card__head h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--color-text); }
.resume-qa-donut-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-3);
}
.resume-qa-donut-row__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}
.resume-qa-howto {
    margin-top: var(--space-3);
    display: inline-flex;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.resume-qa-howto:hover { color: var(--color-text); }
/* .resume-qa-view-all удалён — мигрирован на .link-section
   (см. секцию Link contracts в начале файла). */

/* ============================================================================
   Executive Readout (parser schema 1.2+) — HRD narrative над структурными
   оценками. Editorial pull-quote (summary) + two-column сетка
   (hidden_strengths / positioning_risks) + market bracket-блок.
   На <768px стек, на ≥768px две колонки.
   ============================================================================ */
.executive-readout { gap: var(--space-4); }
.executive-readout__persona {
    margin-left: auto;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Editorial pull-quote — серифный, акцент. */
.executive-readout__summary {
    position: relative;
    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
    background: linear-gradient(180deg,
        rgba(var(--color-accent-rgb), 0.05),
        rgba(var(--color-accent-rgb), 0.02));
    border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--color-border));
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    overflow: hidden;
}
/* Top-streak — тонкая фиолетовая «линза» по верхней кромке, такая же
   как на roles-positioning. Подчёркивает что это primary editorial
   accent card (HR narrative — самое важное на Анализ tab'е). */
.executive-readout__summary::before {
    content: "";
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: var(--streak-violet);
    filter: drop-shadow(0 0 8px rgba(var(--color-accent-rgb), 0.55));
    pointer-events: none;
}
.executive-readout__summary > p {
    margin: 0;
    font-family: var(--font-serif, var(--font-sans));
    font-size: 1.0625rem;
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--color-text);
}

.executive-readout__grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .executive-readout__grid { grid-template-columns: 1fr 1fr; }
}
.executive-readout__col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.executive-readout__col-label {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.executive-readout__col--strength .executive-readout__col-label { color: var(--color-success, var(--color-sage, #4a7a4a)); }
.executive-readout__col--risk .executive-readout__col-label { color: var(--color-coral, var(--color-danger, #c8423d)); }

.executive-readout__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.executive-readout__card {
    padding: var(--space-3) var(--space-3);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.executive-readout__card--strength {
    border-left-color: var(--color-success, var(--color-sage, #4a7a4a));
    background: rgba(var(--color-sage-rgb, 74 122 74), 0.04);
}
.executive-readout__card--risk {
    border-left-color: var(--color-coral, var(--color-danger, #c8423d));
    background: rgba(var(--color-coral-rgb, 200 66 61), 0.04);
}
.executive-readout__card-title {
    margin: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-text);
}
.executive-readout__card-desc {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-soft, var(--color-text));
}
.executive-readout__card-evidence {
    margin: 0;
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border);
    font-style: italic;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.executive-readout__card-evidence::before { content: "« "; }
.executive-readout__card-evidence::after { content: " »"; }

/* Market positioning — компактный блок снизу. */
.executive-readout__market {
    margin-top: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft, var(--color-surface));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.executive-readout__market-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.executive-readout__market-label {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.executive-readout__market-sublabel {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.executive-readout__market-bracket {
    margin: 0;
    font-family: var(--font-serif, var(--font-sans));
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.executive-readout__role-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.executive-readout__market-diff {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text);
}
.resume-detail__section-head {
    display: flex; align-items: baseline; gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.resume-detail__section-head h2 {
    margin: 0;
    font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600;
    letter-spacing: -0.005em; color: var(--color-text);
}
.resume-detail__section-counter {
    font-family: var(--font-sans); font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ----- Quality breakdown (5 thin progress rows) -------------------------- */
.resume-detail__quality {
    display: flex; flex-direction: column; gap: var(--space-3);
    margin: 0; padding: var(--space-3) 0;
}
/* ============================================================================
   Score system v2 — единый язык 0..100 баллов (число + бар).
   Число: ui_score_value (`NN%`, нейтральное). Бар: .meter (accent-градиент).
   Один визуальный язык для ВСЕХ score-мест: quality-оси, skills-gap, секции,
   matching. Tier-цвет — только в labeled pill/eyebrow, НЕ в числе/баре.
   ========================================================================= */
.score-value {
    display: inline-flex; align-items: baseline; gap: 0.06em;
    font-family: var(--font-sans); font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums; line-height: 1;
    white-space: nowrap;
}
.score-value__pct { font-weight: 500; font-size: 0.68em; color: var(--color-text-muted); }
.score-value--sm .score-value__num { font-size: 0.9375rem; }
.score-value--md .score-value__num { font-size: 1.125rem; }
.score-value--lg .score-value__num { font-size: 1.6rem; letter-spacing: -0.01em; }

/* Meter — канонический score/progress-бар (single source of truth).
   Тонкий pill-бар: accent-градиент (deep→soft, тёмный слева → светлый к
   кончику) + мягкое свечение, светлый трек. Эталон — прежний
   .profile-experience-quality__bar (пользователь: «нравятся эти»). НЕ
   tier-цветной: uniform accent, чтобы стек баров читался как одна система. */
.meter {
    /* display задан явно: компонент — `span`, и вне flex-контейнера (витрина,
       любой блочный контекст) высота у inline-элемента не применяется — шкала
       схлопывается в невидимую линию. Во flex-родителе ничего не меняется. */
    display: block;
    /* flex-basis: auto, а не 0: в КОЛОНОЧНОМ flex-контейнере `flex: 1`
       обнуляет базис по главной оси — то есть по высоте, — и шкала
       схлопывается в невидимую линию, сохранив ширину. Растягиваться по строке
       это не мешает: min-width держит нижнюю границу. */
    flex: 1 1 auto; min-width: 6rem; height: 6px;
    background: color-mix(in srgb, var(--color-border) 50%, transparent);
    border-radius: 999px; overflow: hidden;
}
/* Заливка — сплошной цвет ЗОНЫ, а не брендовый градиент со свечением.
   Пять осей качества (86…95) рисовались одинаковым синим градиентом: цвет не
   различал ничего, а glow добавлял чернил, не добавляя данных (Tufte). Теперь
   слабая ось видна по цвету с первого взгляда, как и на кольце рядом. */
.meter__fill {
    display: block; height: 100%; border-radius: inherit;
    background: var(--meter-fill, var(--color-text-soft));
    transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Цвет во вспомогательной шкале означает ОТКЛОНЕНИЕ, а не значение.
   Раскрасить все оси по зоне — значит получить стену одного цвета (сначала
   синюю, потом зелёную), в которой глазу не за что зацепиться. Норма
   графитовая, просевшее — жёлтое, провал — коралловый: взгляд ловит
   единственную строку, которая требует внимания. Цвет зоны целиком несёт
   главная метрика экрана — кольцо готовности. */
/* Цвет шкалы = зона значения, ровно та же палитра, что у кольца
   (score-ring--*): 92% в кольце зелёные — 92% в шкале обязаны быть зелёными,
   иначе одно и то же число на одном экране окрашено двумя способами.
   neutral остаётся графитовым: это явный override для случаев, где низкое
   значение — факт, а не оценка человеку (совпадение с вакансией). */
.meter--danger  { --meter-fill: var(--color-danger); }
.meter--warning { --meter-fill: var(--color-warning); }
.meter--good    { --meter-fill: var(--color-teal); }
.meter--strong  { --meter-fill: var(--color-sage); }
.meter--neutral { --meter-fill: var(--color-text-soft); }
@media (prefers-reduced-motion: reduce) { .meter__fill { transition: none; } }

/* Колонка лейбла фиксированной ширины, шкала — на весь остаток. Раньше было
   наоборот (лейбл 1fr, шкала auto), и в широкой панели между названием оси и
   её числом оставалась дыра в половину строки. Ширина именно фиксированная, а
   не max-content: каждая строка — свой grid, и по контенту числа встали бы
   лесенкой вместо колонки. */

/* Компактный модификатор рядов снят. Он объяснялся «узкой колонкой», но
   колонки, где он применялся, оказались той же ширины (352 px), что и
   карточка профессии без него (360 px): один и тот же ряд рисовался в двух
   раскладках без причины — сверху название, снизу шкала против одной строки.
   Канон ряда один: «название · число · шкала». */

/* Контейнер рядов: один ритм для витрины характеристик, анализа профессии,
   осей вакансии и осей места работы — все они рисуют один и тот же ряд. */
.quality-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    /* Ряд перестраивается по ширине КАРТОЧКИ, а не окна. Витрина живёт и в
       широкой колонке анализа, и в рейле Обзора шириной 21rem; правило по
       медиа-запросу в рейле не срабатывало никогда — окно-то широкое, — и
       дельта выдавливалась за границу карточки на 12-16 px. */
    container-type: inline-size;
}
.quality-row__delta {
    grid-column: 3;
    display: inline-flex;
    justify-content: flex-end;
}

.quality-row {
    display: grid;
    /* Минимум второй колонки — ровно столько, чтобы поместились число и
       короткая шкала (3.8 + 2.5rem + отступ). Было 12rem: ряд не мог сжаться и
       выдавливал дельту за границу карточки. Ноль тоже неверен — тогда лейбр
       (он растёт до 18rem) съедает всю ширину, и значение схлопывается в
       ничто. */
    grid-template-columns: minmax(0, 18rem) minmax(8rem, 1fr);
    align-items: baseline;
    gap: var(--space-3) var(--space-4);
}
.quality-row__label {
    margin: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.quality-row__label > span {
    font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500;
    color: var(--color-text);
}
.quality-row__hint {
    font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0;
    text-transform: none; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.quality-row__value {
    margin: 0;
    /* Сетка, а не flex: колонка дельты существует всегда, даже когда дельты
       нет. На flex ряды без дельты тянули шкалу до края, ряды с дельтой
       обрывали её раньше — правый край списка получался рваным. Сжимается
       шкала: число и дельта резать нельзя, обрезанная цифра — не цифра. */
    display: grid;
    grid-template-columns: 3.8rem minmax(2.5rem, 1fr) 3.25rem;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
/* Число — обёртка под выравнивание; сам стиль числа в ui_score_value. Бар —
   канонический .meter (см. секцию Score system v2). */
/* У канонической шкалы собственный пол в 6rem — он рассчитан на широкие
   экраны и в рейле выталкивал её из своей ячейки на 40 px. Внутри ряда
   качества шкала обязана сжиматься: это единственный элемент, которому есть
   чем поступиться. */
.quality-row__value .meter { min-width: 2.5rem; }
.quality-row__num {
    text-align: right;
    display: inline-flex; justify-content: flex-end;
}
/* Колонка дельты существует, только если дельта есть хоть у одного ряда:
   иначе справа висел бы пустой жёлоб, а шкалы не доходили до края карточки.
   Спрашиваем у списка, а не у ряда: пустая колонка у одного ряда — это
   выравнивание, пустая у всех — потерянное место. */
.quality-rows:not(:has(.quality-row__delta)) .quality-row__value {
    grid-template-columns: 3.8rem minmax(2.5rem, 1fr);
}

/* Узкий КОНТЕЙНЕР (рейл, телефон): ряд — подпись слева, число и сдвиг
   справа в одной строке, шкала под ними во всю ширину. Тот же рисунок, что
   у прогресса в карточках должностей («Шаги · 5 из 12», ui_stat_bar): в
   узкой колонке это единственная раскладка, где у ряда один левый край.
   Прежде подпись стояла своей строкой, а число со шкалой — со своим
   отступом под ней, и в одной карточке читались два левых края. Обёртка
   значения растворяется (display: contents), чтобы число, шкала и сдвиг
   встали в сетку самого ряда. */
@container (max-width: 26rem) {
    .quality-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "label num delta" "bar bar bar";
        align-items: center;
        gap: 6px var(--space-2);
    }
    .quality-row__label { grid-area: label; }
    .quality-row__value { display: contents; }
    .quality-row__num { grid-area: num; }
    .quality-row__value .meter { grid-area: bar; min-width: 0; }
    .quality-row__delta { grid-area: delta; }
}

/* Тот же ряд по ширине ОКНА — для браузеров без container queries.
   Дублирование сознательное: правило контейнера точнее, медиа-запрос
   страхует. */
@media (max-width: 640px) {
    .quality-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "label num delta" "bar bar bar";
        align-items: center;
        gap: 6px var(--space-2);
    }
    .quality-row__label { grid-area: label; }
    .quality-row__value { display: contents; }
    .quality-row__num { grid-area: num; }
    .quality-row__value .meter { grid-area: bar; min-width: 0; }
    .quality-row__delta { grid-area: delta; }
}

/* ----- Matching DL (flat, без cards) ----------------------------------- */
.resume-detail__matching { padding: var(--space-2) 0; }
.resume-detail__dl {
    display: grid; grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-3) var(--space-5);
    margin: 0;
}
.resume-detail__dl > div { display: contents; }
.resume-detail__dl dt {
    font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0;
    text-transform: none; color: var(--color-text-muted);
    align-self: start; padding-top: 0.25rem;
    font-variant-numeric: tabular-nums;
}
.resume-detail__dl dd {
    margin: 0; color: var(--color-text);
    display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; align-items: center;
}
.resume-detail__dl strong { font-weight: 600; }
.resume-detail__dd-meta { color: var(--color-text-muted); font-size: 0.875rem; margin-left: 0.4rem; }
.resume-detail__dd-keywords { font-size: 0.875rem; color: var(--color-text-soft); }

.resume-detail__tag {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.resume-detail__tag--primary {
    background: rgba(var(--color-accent-rgb), 0.10);
    border-color: rgba(var(--color-accent-rgb), 0.30);
    color: var(--color-text);
}
.resume-detail__tag--domain {
    background: rgba(var(--color-teal-rgb), 0.08);
    border-color: rgba(var(--color-teal-rgb), 0.22);
    color: var(--color-teal);
}

.resume-detail__signals { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.resume-detail__signal {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    color: var(--color-text-muted); font-size: 0.8125rem;
    background: rgba(255,255,255,0.02);
}
.resume-detail__signal.is-yes {
    color: var(--color-sage);
    background: rgba(var(--color-sage-rgb), 0.06);
    border-color: rgba(var(--color-sage-rgb), 0.30);
}

/* ----- Value proposition + Key achievements (ResumeV1 1.1 additive) ----- */
.resume-detail__vp { display: flex; flex-direction: column; gap: var(--space-3); }
.resume-detail__vp-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: var(--space-2);
}
.resume-detail__vp-list li {
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.05);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--color-text); line-height: 1.45;
}
.resume-detail__ka {
    list-style: none; counter-reset: ka;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: var(--space-3);
}
.resume-detail__ka > li {
    counter-increment: ka;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px dashed var(--color-border);
}
.resume-detail__ka > li:last-child { border-bottom: none; }
.resume-detail__ka > li::before {
    content: "★";
    grid-row: 1 / span 2;
    color: var(--color-amber); font-size: 0.9375rem; line-height: 1.4;
    padding-top: 0.1rem;
}
.resume-detail__ka-title {
    grid-column: 2; margin: 0;
    color: var(--color-text); font-weight: 600; line-height: 1.35;
}
.resume-detail__ka-desc {
    grid-column: 2; margin: 0;
    color: var(--color-text-soft); font-size: 0.9375rem; line-height: 1.45;
}

/* ----- Growth points (hints + numbered questions) ----------------------- */
.resume-detail__hints { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.resume-detail__hint {
    display: flex; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--color-amber);
    background: rgba(245, 158, 11, 0.05);
    color: var(--color-text-soft);
    font-size: 0.9375rem; line-height: 1.45;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.resume-detail__hint-icon { color: var(--color-amber); margin-top: 2px; flex-shrink: 0; }

.resume-detail__questions {
    list-style: none; counter-reset: q;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0;
}
.resume-detail__questions > li {
    counter-increment: q;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px dashed var(--color-border);
}
.resume-detail__questions > li::before {
    content: counter(q, decimal-leading-zero);
    grid-row: 1 / span 3; align-self: start;
    font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600;
    color: var(--color-text-muted); padding-top: 0.15rem;
    font-variant-numeric: tabular-nums;
}
.resume-detail__questions > li:last-child { border-bottom: none; }
.resume-detail__q-cat {
    grid-column: 2;
    font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0;
    text-transform: none; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.resume-detail__q-text {
    grid-column: 2; margin: 0;
    color: var(--color-text); font-weight: 500; font-size: 1rem; line-height: 1.4;
}
.resume-detail__q-why {
    grid-column: 2; margin: 0;
    color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.45;
}
.resume-detail__gaps-cta { margin-top: var(--space-3); }

/* ----- Experience timeline (ui_resume_experience_item) ------------------ */
.resume-timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.resume-exp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); padding-bottom: var(--space-5); }
.resume-exp:last-child { padding-bottom: 0; }
.resume-exp__rail {
    position: relative; width: 1px; background: var(--color-border-strong);
    margin: 0 var(--space-2);
}
.resume-exp:last-child .resume-exp__rail { background: linear-gradient(180deg, var(--color-border-strong) 0%, transparent 100%); }
.resume-exp__node {
    position: absolute; top: 0.5rem; left: 50%; transform: translateX(-50%);
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--color-surface); border: 2px solid var(--color-text-muted);
}
/* UX-review fix: current-job dot — sage (success), не violet. Accent
   зарезервирован за primary-action; «текущая работа» — это статус-сигнал,
   не призыв к действию. */
.resume-exp.is-current .resume-exp__node {
    background: var(--color-success); border-color: var(--color-success);
    box-shadow: 0 0 0 4px rgba(var(--color-sage-rgb), 0.22);
}
.resume-exp__body { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-2); }
.resume-exp__head { display: flex; flex-direction: column; gap: var(--space-1); }
/* Edit-button по дефолту inline-flex, но в column-flex parent'е без
   align-items он растягивается по cross-axis на всю ширину карточки —
   получается уродливая фул-вайд purple-полоса под title. align-self
   flex-start сжимает до intrinsic width. */
.resume-exp__head > .edit-button { align-self: flex-start; }
.resume-exp__period {
    margin: 0;
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.resume-exp__period-dash { opacity: 0.5; }
.resume-exp.is-current .resume-exp__period > span:last-child { color: var(--color-success); }
.resume-exp__title {
    margin: 0;
    font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; line-height: 1.3;
    display: flex; flex-wrap: wrap; gap: 0 var(--space-3); align-items: baseline;
}
.resume-exp__position { color: var(--color-text); }
.resume-exp__company { color: var(--color-text-soft); font-weight: 500; }
.resume-exp__company::before { content: "·"; margin-right: var(--space-2); color: var(--color-text-muted); }
.resume-exp__industry { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }

/* Per-entry quality 4-bar — surface'ит experience_quality[i] (impact /
   metrics / leadership / relevance) прямо в timeline'е опыта. Раньше
   эти данные шли в section-scoring на «Анализе»; теперь user видит «эта
   запись слабее этой» без перехода между табами. */
.resume-exp__quality {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--color-bg) 50%, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.resume-exp__quality-item {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) 1.8rem;
    align-items: center;
    gap: var(--space-2);
}
.resume-exp__quality-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.resume-exp__quality-bar {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    overflow: hidden;
}
.resume-exp__quality-fill {
    position: absolute;
    inset: 0;
    width: var(--w, 0%);
    border-radius: inherit;
}
.resume-exp__quality-fill--sage  { background: var(--color-success); }
.resume-exp__quality-fill--teal  { background: var(--color-teal); }
.resume-exp__quality-fill--amber { background: var(--color-warning); }
.resume-exp__quality-fill--coral { background: var(--color-danger); }
.resume-exp__quality-val {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: right;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.resume-exp__stack {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: var(--space-1);
}
.resume-exp__stack li {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    background: rgba(var(--color-teal-rgb), 0.10);
    border: 1px solid rgba(var(--color-teal-rgb), 0.22);
    color: var(--color-teal);
    font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.resume-exp__group { display: flex; flex-direction: column; gap: var(--space-2); }
.resume-exp__group-label {
    margin: 0; font-family: var(--font-sans); font-size: 0.8125rem;
    letter-spacing: 0; text-transform: none; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.resume-exp__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.resume-exp__list li {
    position: relative; padding-left: 1.25rem;
    color: var(--color-text-soft); line-height: 1.5;
}
.resume-exp__list li::before {
    content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 1px;
    background: var(--color-border-strong);
}
.resume-exp__list--achievements li::before {
    content: "★"; top: 0;
    width: auto; height: auto; background: none;
    color: var(--color-amber); font-size: 0.875rem; line-height: 1.5;
}
.resume-exp__list--achievements li { padding-left: 1.5rem; color: var(--color-text); }

/* ----- Skills (flat chip-grid) ------------------------------------------ */
.resume-skills {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-2);
}
.resume-skill {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color 200ms ease, transform 200ms ease;
}
.resume-skill:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.resume-skill__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resume-skill__name { font-weight: 500; color: var(--color-text); }
.resume-skill__cat { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0; text-transform: none; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.resume-skill__meta { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.resume-skill__years {
    font-family: var(--font-sans); font-size: 0.875rem; color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}
.resume-skill__years small { color: var(--color-text-muted); margin-left: 1px; }
.resume-skill__level {
    font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0; text-transform: none;
    padding: 0.15rem 0.45rem; border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}
.resume-skill__level--expert     { background: rgba(var(--color-sage-rgb), 0.14); color: var(--color-sage); }
.resume-skill__level--proficient { background: rgba(var(--color-teal-rgb), 0.14); color: var(--color-teal); }
.resume-skill__level--working    { background: rgba(var(--color-violet-rgb), 0.14); color: var(--color-violet); }
.resume-skill__level--beginner   { background: rgba(255, 255, 255, 0.06); color: var(--color-text-muted); }

/* .resume-card / .resume-grid-* / .resume-meta / .resume-mgmt / .resume-edu /
   .resume-hints (старые) — удалены при переходе на dashboard-стиль.
   Их функции теперь покрывают .resume-detail__dl, .resume-detail__signals,
   .resume-detail__hints / .resume-detail__hint (см. блок выше). */

/* A11y helper: visually-hidden но доступен screen-reader'ам. Используется
   в legend'ах fieldset'а chip-radio (visible legend дублировал бы label). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   Enrich workspace (/app/resumes/results/{id}/enrich) — UX-review v2
   ============================================================================
   Был flat-list textarea'ов с dashed-divider — теперь conversational AI-flow:
   progress strip сверху, per-question карточки, chip-radio для choice-вопросов,
   numeric-chips для числовых, textarea с placeholder-примером для остального.
   Auto-save в localStorage, inline-индикатор «Сохранено» рядом с каждым полем.
*/
/* ============================================================================
   Enrich wizard — Typeform-style step-by-step mode
   ============================================================================
   Один вопрос на экране, top stepper «Вопрос N из M» + bar, bottom
   nav «Назад / Пропустить / Дальше → Submit». Финальный review
   screen перед submit с summary списком ответов.

   В DOM все вопросы рендерятся (для no-JS fallback на linear scroll);
   JS добавляет .is-wizard на список и hide-class на inactive items. */

/* ============================================================================
   Enrich-shell — единый modal-layout (header / body / footer)
   ============================================================================
   Один frame с header (stepper), body (active question + review), footer
   (back / cancel / skip / next / submit). max-width 64ch — читаемость для
   длинных вопросов. Никакого sticky positioning — естественный вертикальный
   поток, что предсказуемо на любом viewport.
   Применяется JS'ом: добавляет .is-wizard на ol чтобы hide inactive items. */
.enrich-shell {
    max-width: 64ch;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header — eyebrow + counter + thin progress bar. */
.enrich-shell__head {
    padding: var(--space-3) clamp(1.25rem, 3vw, 1.75rem);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.enrich-shell__step {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}
.enrich-shell__step-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.enrich-shell__step-counter {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    font-feature-settings: "tnum";
    display: inline-flex;
    gap: 0.1rem;
    font-variant-numeric: tabular-nums;
}
.enrich-shell__step-sep { color: var(--color-text-muted); font-weight: 400; margin: 0 0.05rem; }
.enrich-shell__bar {
    height: 3px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}
.enrich-shell__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-teal) 0%, var(--color-accent) 100%);
    box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.40);
    transition: width 320ms cubic-bezier(.2,.7,.2,1);
}

/* Body — внутреннее padding единое для всех состояний. */
.enrich-shell__body {
    padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 3vw, 1.75rem);
}

/* Wizard mode — JS adds .is-wizard to ol. Только activated item visible.
   Card сама без бордера и фона (родительский shell несёт surface). */
.resume-enrich__list.is-wizard .resume-enrich__item {
    display: none;
}
.resume-enrich__list.is-wizard .resume-enrich__item.is-wizard-active {
    display: block;
    animation: enrich-shell-slide-in 240ms cubic-bezier(.2,.7,.2,1);
}
@keyframes enrich-shell-slide-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* В wizard mode card без обвязки — shell держит surface. */
.resume-enrich__list.is-wizard .enrich-question {
    padding: 0;
    border: 0;
    background: transparent;
    gap: var(--space-3);
}
.resume-enrich__list.is-wizard .enrich-question:focus-within {
    border: 0;
    box-shadow: none;
}
.resume-enrich__list.is-wizard .enrich-question__title {
    font-family: var(--font-display, var(--font-sans));
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
}
.resume-enrich__list.is-wizard .enrich-question__num { display: none; }
.resume-enrich__list.is-wizard .enrich-question__footer { display: none; }
/* В wizard mode «Сохранено» chip живёт в 3-й grid-колонке head'а,
   но shell-card имеет ограниченную ширину — pill выпадал ЗА правый
   край карточки (визуально «СОХ...», обрезанный right-overflow'ом).
   В wizard-mode это redundant signal: пользователь видит свой текст
   в textarea (= answer был), а финальный review-screen покажет
   «ЗАПОЛНЕНО» pill по каждому. Скрываем chip только в wizard mode;
   на legacy non-wizard view он остаётся. */
.resume-enrich__list.is-wizard .enrich-question__saved { display: none; }

/* Review screen — после последнего шага, внутри body. */
.enrich-shell__review[hidden] { display: none; }
.enrich-shell__review {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    animation: enrich-shell-slide-in 280ms cubic-bezier(.2,.7,.2,1);
}
.enrich-shell__review-eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-success);
    font-variant-numeric: tabular-nums;
}
.enrich-shell__review-title {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.enrich-shell__review-summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.enrich-shell__review-count {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.enrich-shell__review-sep { color: var(--color-text-muted); font-weight: 400; margin: 0 0.1rem; }
/* Review-stack для wizard'а — matching pattern questions-stack из actions
   tab: numbered ring + title (line-clamp 2) + status pill справа.
   Divider между rows вместо отдельных боксов — снимает «простыню серых
   row'ов» прежнего дизайна. Sage-tinted ring при answered, neutral при
   skipped; pill cycles tone тем же образом. */
.enrich-wizard__review-stack {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.enrich-wizard__review-row + .enrich-wizard__review-row {
    border-top: 1px solid var(--color-border);
}
.enrich-wizard__review-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 56px;
    padding: var(--space-3) 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--color-text);
    font: inherit;
    transition: background 160ms ease, color 160ms ease;
}
.enrich-wizard__review-head:hover .enrich-wizard__review-title,
.enrich-wizard__review-head:focus-visible .enrich-wizard__review-title {
    color: var(--color-accent);
}
.enrich-wizard__review-head:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.enrich-wizard__review-num {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-muted);
    background: var(--color-surface);
    font-variant-numeric: tabular-nums;
}
.enrich-wizard__review-head--answered .enrich-wizard__review-num {
    border-color: rgba(var(--color-sage-rgb), 0.45);
    color: var(--color-sage-deep, var(--color-sage));
    background: rgba(var(--color-sage-rgb), 0.10);
}
.enrich-wizard__review-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 160ms ease;
}
.enrich-wizard__review-pill {
    flex: none;
    padding: 0.18rem 0.55rem;
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.enrich-wizard__review-pill--answered {
    background: rgba(var(--color-sage-rgb), 0.16);
    color: var(--color-sage-deep, var(--color-sage));
}
.enrich-wizard__review-pill--skipped {
    background: rgba(var(--color-amber-rgb, 217 119 6), 0.14);
    color: var(--color-amber);
}
.enrich-shell__review-hint {
    margin: var(--space-3) 0 0;
    font-size: 0.8125rem;
}
@media (max-width: 600px) {
    .enrich-wizard__review-head {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: var(--space-2);
        row-gap: var(--space-1);
    }
    .enrich-wizard__review-num { grid-row: 1; grid-column: 1; }
    .enrich-wizard__review-title { grid-row: 1; grid-column: 2; }
    .enrich-wizard__review-pill { grid-row: 2; grid-column: 2; justify-self: start; }
}

/* Footer — back / cancel / skip / next / submit. Inside shell, не sticky. */
.enrich-shell__foot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) clamp(1.25rem, 3vw, 1.75rem);
    border-top: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-bg) 40%, var(--color-surface));
    flex-wrap: wrap;
}
.enrich-shell__spacer { flex: 1; min-width: 0; }
.enrich-shell__back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.7rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
}
.enrich-shell__back:hover { background: var(--color-bg-soft); }
.enrich-shell__back[hidden] { display: none; }
.enrich-shell__skip {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.4rem 0.5rem;
}
.enrich-shell__skip[hidden] { display: none; }
.enrich-shell__cancel { font-size: 0.875rem; }
.enrich-shell__submit[hidden] { display: none; }
.enrich-shell__next[hidden] { display: none; }
@media (max-width: 480px) {
    .enrich-shell__cancel { display: none; }
}

.resume-enrich__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.resume-enrich__item { margin: 0; }
/* Legacy non-sticky button row — оставлен для backward-compat если
   шаблон где-то ещё его рендерит. Активная форма использует sticky-bar. */
.resume-enrich__buttons { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.resume-enrich__submit-hint { margin: var(--space-2) 0 0; font-size: 0.875rem; }

/* ============================================================================
   Legacy sticky bottom bar — заменён wizard-nav. Оставлен для backward-compat
   на случай, если шаблон где-то ещё его рендерит. */
.resume-enrich__sticky-bar {
    position: sticky;
    bottom: 0;
    margin: var(--space-5) calc(clamp(1rem, 4vw, 2.5rem) * -1) 0;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-border);
    z-index: 30;
}
.resume-enrich__sticky-progress {
    position: relative;
    height: 3px;
    background: var(--color-border);
    margin: 0 calc(clamp(1rem, 4vw, 2.5rem) * -1);
    overflow: hidden;
}
.resume-enrich__sticky-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,
        var(--color-teal) 0%,
        var(--color-accent) 100%);
    transition: width 280ms cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.40);
}
.resume-enrich__sticky-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    flex-wrap: wrap;
}
.resume-enrich__sticky-meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.resume-enrich__sticky-count {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.resume-enrich__sticky-sep {
    color: var(--color-text-muted);
    font-weight: 400;
    margin: 0 0.05rem;
}
.resume-enrich__sticky-hint {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--color-text-muted);
}
.resume-enrich__sticky-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}
@media (max-width: 480px) {
    /* На мобиле hint скрывается чтобы row не переносился — sticky-bar
       и так показывает count + actions, hint — bonus context. */
    .resume-enrich__sticky-hint { display: none; }
}

/* — Progress: компактный stepper-dots + bar (bar появляется после первого ответа) — */
.enrich-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    margin-bottom: var(--space-3);
}
.enrich-progress__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    justify-content: space-between;
}
.enrich-progress__dots {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-width: 0;
}
.enrich-progress__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background 200ms ease, transform 200ms ease;
}
.enrich-progress__dot.is-done {
    background: var(--color-sage, var(--color-success));
    transform: scale(1.1);
}
.enrich-progress__dot.is-active {
    background: var(--color-accent);
    transform: scale(1.15);
}
.enrich-progress__count {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    flex: none;
    font-variant-numeric: tabular-nums;
}
.enrich-progress__bar {
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    overflow: hidden;
    opacity: 1;
    transition: opacity 200ms ease;
}
.enrich-progress.is-empty .enrich-progress__bar { opacity: 0; }
.enrich-progress__bar > span {
    display: block;
    height: 100%;
    background: var(--color-accent);
    transition: width 240ms cubic-bezier(.2,.7,.2,1);
}

/* — Per-question card — */
.enrich-question {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.enrich-question:focus-within {
    border-color: var(--color-accent);
    /* Multi-layer glow — inner ring (4px accent 12%) + outer ambient
       (20px accent 18%) + subtle scale shift. Gives the focused card
       a clear «active editing» signal без слишком aggressive lift. */
    box-shadow:
        0 0 0 4px rgba(var(--color-accent-rgb), 0.12),
        0 8px 32px rgba(var(--color-accent-rgb), 0.18);
}
.enrich-question__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
}
.enrich-question__num {
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--color-surface-2, rgba(0, 0, 0, 0.04));
    color: var(--color-text-muted);
    font-weight: 600;
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    line-height: 1;
    transition: background 200ms ease, color 200ms ease;
    font-variant-numeric: tabular-nums;
}
.enrich-question.is-answered .enrich-question__num {
    background: rgba(var(--color-sage-rgb), 0.16);
    color: var(--color-success);
}
.enrich-question.is-skipped {
    opacity: 0.55;
    border-style: dashed;
}
.enrich-question.is-skipped .enrich-question__num {
    background: var(--color-surface-2, rgba(0, 0, 0, 0.04));
    color: var(--color-text-muted);
}
.enrich-question__title-block { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.enrich-question__title {
    margin: 0;
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--color-text);
}
.enrich-question__hint {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-style: italic;
}
.enrich-question__saved {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-success);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--color-sage-rgb), 0.14);
    animation: enrich-saved-pop 240ms cubic-bezier(.2,.7,.2,1);
    font-variant-numeric: tabular-nums;
}
.enrich-question__saved[hidden] { display: none; }
@keyframes enrich-saved-pop {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
.enrich-question__counter {
    margin: 0;
    text-align: right;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.enrich-question__counter[hidden] { display: none; }
.enrich-question__counter.is-warn { color: var(--color-amber, var(--color-warning, #b66d00)); }
.enrich-question__counter.is-danger { color: var(--color-coral, var(--color-danger, #c8423d)); }

/* — Footer + skip-link — */
.enrich-question__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(-1 * var(--space-2));
}
.btn.enrich-question__skip {
    color: var(--color-text-muted);
    padding: 0.35rem 0.6rem;
    min-height: 36px;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}
.btn.enrich-question__skip:hover,
.btn.enrich-question__skip:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-2, rgba(0, 0, 0, 0.04));
}
.btn.enrich-question__skip .lucide { opacity: 0.7; }

/* — Chip-radio для options — */
.chip-radio {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
    border: 0;
}
/* Сетка 2×2 на телефоне: четыре варианта разной длины при свободном переносе
   оставляли последний один на строке. С 600px — обычный ряд. */
.chip-radio--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chip-radio--grid .chip-radio__label { width: 100%; justify-content: center; }
@media (min-width: 600px) {
    .chip-radio--grid { display: flex; }
    .chip-radio--grid .chip-radio__label { width: auto; }
}
.chip-radio__option { cursor: pointer; }
.chip-radio__input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
.chip-radio__label {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    min-height: 44px;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 0.12s var(--ease-spring);
}
.chip-radio__option:hover .chip-radio__label { border-color: var(--color-text-muted); }
.chip-radio__option:active .chip-radio__label { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .chip-radio__option:active .chip-radio__label { transform: none; } }
.chip-radio__input:focus-visible + .chip-radio__label {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.chip-radio__input:checked + .chip-radio__label {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
    font-weight: 600;
}
/* Множественный выбор: отмеченный чип несёт галочку — выбор не держится на
   одном цвете, и «можно несколько» видно до первого клика по второму чипу. */
.chip-radio__check { display: none; margin-right: var(--space-1); margin-left: calc(-1 * var(--space-1)); }
.chip-radio__input:checked + .chip-radio__label .chip-radio__check { display: inline-flex; }
/* Видимая legend группы — блоком над чипами, без собственных отступов
   fieldset'а. */
.chip-radio--multi > legend:not(.visually-hidden) { padding: 0; margin-bottom: var(--space-2); }

/* — Choice-input: type-aware radio / checkbox / select (ui_choice_input) —
   Mirror'ит chip-radio (touch-friendly pill, min-height 44px), но поддерживает
   multi-mode (checkbox, можно выбрать несколько) и select-fallback. */
.choice-input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
    border: 0;
}
.choice-input__option { cursor: pointer; }
.choice-input__control {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
.choice-input__label {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    min-height: 44px;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
/* multi-mode: квадратный чек слева от текста, чтобы отличать от radio-pill */
.choice-input--multi .choice-input__label { border-radius: var(--radius-sm); }
.choice-input__option:hover .choice-input__label { border-color: var(--color-text-muted); }
.choice-input__control:focus-visible + .choice-input__label {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.choice-input__control:checked + .choice-input__label {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
    font-weight: 600;
}
.choice-input__select {
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1rem; /* anti-zoom iOS ≥16px */
}
.choice-input__select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.choice-input__select:disabled { color: var(--color-text-muted); cursor: not-allowed; }

/* — ui_chips_input — поле свободного ввода тегов (intent-группы M1.5) — */
.chips-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.chips-input__label { margin-bottom: 0; }
.chips-input__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.chips-input__box:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
}
.chips-input--error .chips-input__box { border-color: var(--color-danger); }
.chips-input__list {
    display: contents;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Вид чипа — общий с `ui_skill_chip`: навык, введённый в онбординге, и он же на
   вкладке «Навыки» это один объект, и разный облик на двух экранах человек
   читает как разные сущности. Отличие только в механике (здесь тег живёт до
   сабмита формы, там — запись в базе), а она вида не меняет. */
.chips-input__chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 34px;
    padding-inline-start: 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.2;
}
.chips-input__chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chips-input__remove {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    margin-inline: -2px 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}
/* 44px цель нажатия при 26px кнопке — невидимой подкладкой, а не размером
   (WCAG 2.5.5): лента «толстых» чипов не помещается на телефоне. */
.chips-input__remove::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: var(--tap-min);
    transform: translate(-50%, -50%);
}
.chips-input__remove:hover {
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}
.chips-input__remove:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
}
.chips-input__entry {
    flex: 1 1 8rem;
    min-width: 6rem;
    min-height: calc(var(--tap-min) - 2 * var(--space-2));
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 1rem; /* anti-zoom iOS ≥16px */
}
.chips-input__entry:focus-visible { outline: none; }
/* typeahead-облако: скрыто по умолчанию, видно при фокусе (.is-open); JS
   фильтрует до топ-N совпадений и прячет лишние (.is-hidden). */
/* Быстрый выбор — всегда видимый ряд над полем. Это не «подсказка к вводу»,
   а готовый ответ: роли, вытащенные из резюме, человек должен видеть, а не
   догадываться, что они появятся по фокусу. */
.chips-input__picks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.chips-input__picks.is-empty { display: none; }
/* Подпись — своей строкой над вариантами: в одном ряду с ними второй вариант
   переносился под подпись, и ряд читался лесенкой (ревью онбординга 12.10). */
.chips-input__picks-label {
    flex-basis: 100%;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.chips-input__pick {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--tap-min);
    padding: 0.35rem 0.75rem;
    border: 1px dashed var(--color-border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    cursor: pointer;
}
.chips-input__pick::before { content: "+"; color: var(--color-text-muted); }
.chips-input__pick:hover { border-style: solid; border-color: var(--color-accent); }
.chips-input__pick.is-hidden { display: none; }
@media (min-width: 768px) {
    .chips-input__pick { min-height: 32px; }
}

.chips-input__suggestions {
    display: none;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: calc(-1 * var(--space-1));
}
.chips-input__suggestions.is-open { display: flex; }
.chips-input__suggest.is-hidden { display: none; }
.chips-input__suggest {
    min-height: calc(var(--tap-min) - var(--space-3));
    padding: var(--space-1) var(--space-3);
    border: 1px dashed var(--color-border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-soft);
    font-size: 0.875rem;
    cursor: pointer;
}
.chips-input__suggest:hover,
.chips-input__suggest:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-text);
    outline: none;
}
.chips-input__suggest.is-used,
.chips-input__suggest[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.chips-input--disabled .chips-input__box { opacity: 0.6; }

/* Combobox — стилизованный typeahead (combobox.js) на замену нативному
   <datalist> в редакторе резюме. Позиционированный listbox под input'ом,
   в токенах дизайн-системы (нативный datalist рисуется браузерным жёлтым UI). */
.combobox {
    position: relative;
}
.combobox__pop {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 15rem;
    overflow-y: auto;
    padding: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.combobox__pop[hidden] { display: none; }
.combobox__opt {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
}
.combobox__opt:hover,
.combobox__opt.is-active {
    background: var(--color-bg-deep);
    color: var(--color-accent);
}

/* — ui_salary_range — зарплатная вилка (min / max / currency) — */
.salary-range {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.salary-range__group-label { margin-bottom: 0; }
.salary-range__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.salary-range__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
@media (min-width: 640px) {
    .salary-range__row { flex-direction: row; }
    .salary-range__field { flex: 1 1 0; }
    .salary-range__field--currency { flex: 0 0 9rem; }
}
.salary-range--disabled { opacity: 0.6; }

/* — Enrich-question priority pill (high / medium / low) — */
.enrich-question__priority {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 2px var(--space-2);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    background: rgba(var(--color-accent-rgb), 0.1);
    color: var(--color-text-muted);
}
.enrich-question__priority--high {
    background: rgba(var(--color-coral-rgb), 0.12);
    color: var(--color-coral);
}
.enrich-question__priority--low {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
}

/* — Numeric-chips: predefined buttons + free-form input — */
.numeric-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.numeric-chips__option {
    appearance: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    cursor: pointer;
    min-height: 44px;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
    font-variant-numeric: tabular-nums;
}
.numeric-chips__option:hover { border-color: var(--color-text-muted); }
.numeric-chips__option[aria-pressed="true"],
.numeric-chips__option.is-active {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
    font-weight: 600;
}
.numeric-chips__input {
    flex: 1;
    min-width: 8rem;
}

/* ----- Admin · parser ---------------------------------------------------- */
/* `.parser-overview__kpis` schedule for removal — теперь алиас на .kpi-strip
   (см. правило выше). margin раньше эмулировал page-shell gap; gap-обёртка
   делает это корректно, так что доп. margin не нужен. */
.parser-overview__recent { margin-top: var(--space-5); }
.parser-jobs__filter { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin: var(--space-3) 0; }
.parser-job__head { display: flex; align-items: baseline; gap: var(--space-3); }
.parser-job__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-2) var(--space-4); margin: var(--space-3) 0; }
.parser-job__meta dt { font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.parser-job__meta dd { margin: 0 0 var(--space-2); }
.parser-job__history ol { padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.parser-job__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4); }

/* Admin · parser result — системный meta-strip над identity-блоком.
   resume-detail__* поверх него рендерит обычное резюме; sysmeta даёт
   admin-специфичные ID и версии методологии плотным grid'ом. */
.parser-result__sysmeta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.parser-result__sysmeta dl { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.parser-result__sysmeta dt {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.parser-result__sysmeta dd { margin: 0; font-size: 0.875rem; color: var(--color-text); min-width: 0; word-break: break-all; }
.parser-result__sysmeta dd code { font-family: var(--font-mono); }

/* Admin action row под identity strip — компактный ghost-button bar. */
.parser-result__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px dashed var(--color-border);
    border-bottom: 1px dashed var(--color-border);
}

/* Improvement-hints в админке: machine-code + перевод parallel rows.
   Diagnostic-вид: без warning-аур, без лампочек — это сухой список того,
   что парсер пометил для дозаполнения. Левая колонка — короткий код,
   правая — человеческая формулировка из b2c-каталога. */
.parser-result__hints {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}
.parser-result__hint {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
}
.parser-result__hint:first-child { border-top: none; }
@media (min-width: 640px) {
    .parser-result__hint { grid-template-columns: minmax(14rem, 22rem) 1fr; gap: var(--space-4); align-items: baseline; }
}
.parser-result__hint-code {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    word-break: break-all;
}
.parser-result__hint-text {
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Diagnostic-section со списком версий промптов. */
.parser-result__prompts .resume-detail__dl { grid-template-columns: minmax(0, 12rem) 1fr; }
.parser-result__prompts dt code,
.parser-result__prompts dd code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Admin · parser user — карточка current resume preview под KPI-strip.
   Двухколоночный grid: слева имя+headline+meta, справа completeness gauge
   и primary CTA. На мобиле колонки сворачиваются в стек. */
.parser-current {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.parser-current--empty { padding: var(--space-3) var(--space-4); }
.parser-current__head { display: flex; justify-content: space-between; align-items: baseline; }
.parser-current__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
}
@media (min-width: 768px) {
    .parser-current__body { grid-template-columns: minmax(0, 1fr) auto; }
}
.parser-current__identity { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.parser-current__name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.15;
    margin: 0;
    color: var(--color-text);
}
.parser-current__name em { font-style: italic; color: var(--color-text-muted); font-weight: 400; }
.parser-current__headline { margin: 0; color: var(--color-text-muted); font-size: 0.9375rem; }
.parser-current__meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}
.parser-current__meta li { display: inline-flex; align-items: center; gap: var(--space-1); }
.parser-current__meta .icon { color: var(--color-text-muted); }
.parser-current__meta code { font-family: var(--font-mono); color: var(--color-text); }

.parser-current__score {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    min-width: 12rem;
}
@media (min-width: 768px) {
    .parser-current__score { align-items: flex-end; text-align: right; }
}
.parser-current__score-label {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.parser-current__score-value { display: flex; align-items: baseline; gap: 0.2rem; }
.parser-current__score-num { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--color-text); }
.parser-current__score-unit { font-size: 1rem; color: var(--color-text-muted); }
.parser-current__score .resume-detail__score-bar { width: 100%; max-width: 14rem; }
.parser-current__score .btn { margin-top: var(--space-2); }

.parser-jobs__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

/* ============================================================================
   Notifications: bell-widget + dropdown (план Task 3)
   Mobile-first: панель = bottom-sheet на ≤767px, popover на ≥768px. Только
   существующие токены (--space-*, --shadow-lg, --radius-*, --color-*).
   ========================================================================== */

/* Контейнер действий в топбаре — bell прижат вправо. */
.app-topbar__actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Context-actions slot — глобальные actions активного top-bar context'а
   (см. b2c/base.html block "topbar_actions"). Живёт между profile-pill
   и .app-topbar__actions (bell). На desktop — inline button group; на
   mobile (≤640px) — labels скрываются, остаются только иконки. На очень
   узких viewport (≤375px) actions полностью прячутся — пользователь
   откроет их через pill dropdown в alternative slot (TODO phase-3:
   pin actions to dropdown footer на mobile). */
.app-topbar__context-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}
.topbar-context-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
/* На mobile — icon-only buttons (label scoped в SR-only). На очень узких
   viewport (≤375px) — actions исчезают целиком, освобождая место для
   pill + bell. Hard-rule: на 320px viewport должны умещаться pill + bell. */
@media (max-width: 640px) {
    .topbar-context-actions .btn { padding-inline: 0.5rem; }
    .topbar-context-actions .btn span:not(.icon):not(.sr-only) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}
@media (max-width: 375px) {
    .app-topbar__context-actions { display: none; }
}

/* ============================================================================
   Rescore-poll: top-bar CTA blocked-state (resume-rescore.js setCtasBlocked).
   ============================================================================
   Пока активен polling /progress (page is rendering rescore-loader), primary
   CTA в context-actions (улучшить резюме / ideal-start) блокирован — иначе
   parallel запуск второго overlay-op даёт ErrConcurrentModification +
   ambiguous spinners. JS ставит aria-disabled + .is-rescoring, CSS меняет
   icon на spinning loader и приглушает кнопку. */
.is-rescoring {
    cursor: progress;
    opacity: 0.7;
    pointer-events: none; /* hover-states gone; click-blocking — JS интерсептор */
}
.is-rescoring .icon {
    animation: rescoring-spin 1s linear infinite;
    color: currentColor;
}
@keyframes rescoring-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .is-rescoring .icon { animation: none; }
}

/* ============================================================================
   Edit-coming-soon popover toast (shared across content-tab edit-buttons)
   ============================================================================
   Native HTML5 popover API. Toast centered on viewport, dim backdrop via
   ::backdrop pseudo. Closes on outside click / Esc / ×-button. */
.edit-toast {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4) var(--space-5);
    max-width: 28rem;
    min-width: 18rem;
    margin: auto;
    color: var(--color-text);
    position: relative;
    /* popover positioning lives in [popover] selector by default; добавляем
       только cosmetic. */
}
.edit-toast::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}
.edit-toast__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.edit-toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
}
.edit-toast__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.edit-toast__body {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-soft);
}
.edit-toast__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.edit-toast__close:hover { background: var(--color-bg-soft); color: var(--color-text); }

/* ============================================================================
   Edit button (ui_edit_button) + section-head with editable variant
   ============================================================================
   IA refactor: на «Резюме» tab каждая секция имеет edit-affordance.
   Ghost-style pencil icon button рядом с section-header. */
.edit-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.edit-button:hover,
.edit-button:focus-visible {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.edit-button__icon { color: currentColor; }
@media (max-width: 480px) {
    /* На mobile — icon-only, label в SR-only. */
    .edit-button__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}
.resume-detail__section-head--editable {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.resume-detail__section-head--editable .edit-button { margin-left: auto; }

/* ───── Ideal Resume wizard (bc44987-followup: 2-step) ──────────────────
   Full-screen flow: chrome (ui_ideal_wizard) + sticky-bottom CTA.
   Mobile-first vertical stack с safe-area-inset. Step 3/4 (granular review/
   apply) удалены — у parser'а нет endpoint'а с пофилдовым diff'ом, готовая
   ideal-версия открывается через workspace по durable IdealAvailable. */
.ideal-wizard {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 48rem;
}
.ideal-wizard__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.ideal-wizard__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    color: var(--color-text-soft);
    text-decoration: none;
    font-size: 0.875rem;
    align-self: flex-start;
}
.ideal-wizard__back:hover { color: var(--color-text); }
.ideal-wizard__back-chevron { transform: rotate(180deg); }
.ideal-wizard__eyebrow {
    margin: 0 0 var(--space-1);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-accent);
}
.ideal-wizard__title { margin: 0; }
.ideal-wizard__subtitle {
    margin: var(--space-2) 0 0;
    color: var(--color-text-soft);
}
.ideal-wizard__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.ideal-wizard__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.ideal-wizard__point {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.ideal-wizard__progress {
    align-items: center;
    text-align: center;
    padding: var(--space-6) 0;
}
.ideal-wizard__progress-text { margin: 0; font-weight: 600; }
.ideal-wizard__progress-hint { margin: 0; }
.ideal-wizard__actions {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-end;
    padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--color-bg) 70%, transparent);
}
.ideal-wizard__actions .btn { min-height: 44px; }

/* ui_ideal_diff_field CSS удалён в bc44987-followup: granular per-field
   review/apply wizard removed (у parser'а нет endpoint'а с пофилдовым
   diff'ом). Side-by-side diff, если потребуется как отдельная фича,
   делается client-side по двум полным ResumeV1. */

/* Overlay draft banner (ui_overlay_draft_banner) — inline-warning, когда
   analysis_stale. До этого был `position: sticky` — но html/body имеют
   `overflow-x: clip` (см. рядом line ~437) для anti-zoom safety, что
   создаёт scroll-container и ломает sticky-positioning у вложенных
   элементов. Sticky застревает где-то на полу-экране, обрезается
   top-bar'ом. Перешли на inline-flow: main path не теряется (CTA
   «Обновить анализ» дублируется в top-bar workspace head, всегда виден). */
.overlay-draft-banner {
    margin-bottom: var(--space-4);
}
.overlay-draft-banner__cta {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-2);
}

/* Rescore-progress индикатор (Task 10) — рендерится после POST /rescore,
   resume-rescore.js поллит /progress и обновляет pct. Spinner +
   prefers-reduced-motion guard. */
.resumes-rescore-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}
.resumes-rescore-progress__spin {
    flex: none;
    color: var(--color-accent);
    animation: resume-job-retry-spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .resumes-rescore-progress__spin { animation: none; }
}
/* Top-bar rescore form — обёртка над submit-кнопкой, чтобы POST /rescore
   жил рядом с upload/improve в том же inline-flex ряду. */
.topbar-context-actions__rescore {
    display: inline-flex;
    margin: 0;
}

/* ============================================================================
   Резюме tab — basics block (NEW, IA refactor)
   ============================================================================ */
.content-basics {
    /* «Who you are» surface на Резюме tab'е — editorial header с teal
       border-left identity и top-streak. Намеренно отличается от
       overview-hero / roles-positioning (они = example-card recipe) —
       это лицо резюме, не аналитическая панель. */
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-teal);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.content-basics::before {
    content: "";
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: var(--streak-teal);
    filter: drop-shadow(0 0 8px rgba(var(--color-teal-rgb), 0.55));
    pointer-events: none;
}
.content-basics__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.content-basics__head .edit-button { margin-left: auto; }
.content-basics__name {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.content-basics__headline {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--color-text-soft);
    line-height: 1.45;
}
.content-basics__value {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-teal);
    background: color-mix(in srgb, var(--color-teal) 5%, transparent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--color-text);
}
.content-basics__facts {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-2) var(--space-4);
}
.content-basics__fact { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.content-basics__fact dt {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.content-basics__fact dd { margin: 0; font-size: 0.875rem; color: var(--color-text); }

/* ============================================================================
   Резюме tab — preferences block (NEW, IA refactor)
   ============================================================================ */
.content-preferences {
    /* Card-shape без border-left accent — это content-секция (не editorial
       header), визуальный вес ниже basics/hero/positioning. */
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* ============================================================================
   Content pitch block (value_proposition + key_achievements unified)
   ============================================================================
   IA-refactor (June 2026): два блока "Ценностное предложение" и
   "Достижения" объединены в один editorial-block "Что я приношу" и
   перенесены ВЫШЕ Опыта работы — правильный resume reading-order:
   кто я → что приношу → как делал.

   Структура:
     content-pitch__lead         — pitch sentence (1-я value_prop), крупно
     content-pitch__supporting   — остальные value_prop как minimalist list
     content-pitch__achievements — key_achievements как 2/3-col grid карточек */
.content-pitch {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.content-pitch__lead {
    margin: 0;
    font-family: var(--font-serif, var(--font-sans));
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.content-pitch__supporting {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}
.content-pitch__supporting li {
    position: relative;
    padding-left: 1.2rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-soft);
}
.content-pitch__supporting li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    opacity: 0.6;
}
.content-pitch__achievements {
    list-style: none;
    counter-reset: pitch-ach;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-3);
}
.content-pitch__achievement {
    counter-increment: pitch-ach;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--color-bg) 40%, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    position: relative;
}
.content-pitch__achievement::before {
    content: counter(pitch-ach, decimal-leading-zero);
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0.45;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.content-pitch__achievement-eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-amber, var(--color-warning));
    font-variant-numeric: tabular-nums;
}
.content-pitch__achievement-body {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text);
    text-wrap: pretty;
}

/* ============================================================================
   Content sections card-shape unification (Резюме tab)
   ============================================================================
   experience timeline, skills hierarchy, education credentials —
   получают единый card-shape (тот же что у preferences). Раньше
   эти секции рендерились flat (без border/padding) — глаз искал
   систему между cards basics/preferences и flat content. */
.content-section-card {
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    gap: var(--space-3);
}

/* ============================================================================
   Education + Languages + Certifications — 3-col compact section
   ============================================================================
   Раньше всё смешивалось в один dl (степень и языки в одной table-like
   structure). Сейчас — 3 column grid на desktop, stack на mobile. */
.content-credentials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4);
}
.content-credentials__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.content-credentials__label {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.content-credentials__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.content-credentials__list--chips { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
.content-credentials__item p { margin: 0; line-height: 1.4; }
.content-credentials__item-title { font-weight: 600; font-size: 0.9375rem; color: var(--color-text); }
.content-credentials__item-sub { font-size: 0.875rem; color: var(--color-text-soft); }
.content-credentials__item-meta { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.content-credentials__chip {
    display: inline-flex;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text);
    font-size: 0.8125rem;
}

.content-preferences__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-3);
}
.content-preferences__row { display: flex; flex-direction: column; gap: var(--space-1); }
.content-preferences__label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.content-preferences__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.content-preferences__chip {
    display: inline-flex;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text);
    font-size: 0.8125rem;
}
.content-preferences__empty {
    padding: var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    background: var(--color-bg-soft);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--color-border);
}

/* ============================================================================
   Roles tab — positioning header (likely_bracket + key_differentiator)
   ============================================================================
   IA refactor: новый «Подходящие роли» tab открывается editorial-header'ом
   с bracket (как читается профиль сейчас) и differentiator pull-quote
   (что выделяет). Ниже — callback-ready + stretch секции. */
.roles-positioning {
    /* Card recipe = .example-card. */
    position: relative;
    padding: clamp(1.4rem, 2.4vw, 2rem);
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(var(--color-accent-rgb), 0.06) 0%, transparent 55%),
        linear-gradient(180deg, rgba(var(--color-bg-rgb), 0.55) 0%, rgba(var(--color-bg-rgb), 0.85) 100%),
        var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 18px -10px rgba(0, 0, 0, 0.45);
    isolation: isolate;
}
.roles-positioning__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}
.roles-positioning__bracket {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text);
    /* text-wrap: balance распределяет слова по строкам так, чтобы получился
       визуально-сбалансированный shape вместо «одна строка длинная, вторая
       обрезок». Поддержка ≥ Chrome 114 / Safari 17.5 / Firefox 121 —
       у браузеров без поддержки fallback на стандартный wrap (graceful). */
    text-wrap: balance;
}
.roles-positioning__quote {
    /* Plain editorial: убраны bg, border-left, padding, radius — quote
       сливался с card-bg или выглядел как card-in-card. Чистая
       typography: eyebrow + italic text, разделение от title выше —
       только margin-top. */
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.roles-positioning__quote .resume-detail__eyebrow {
    margin: 0;
    line-height: 1;
}
.roles-positioning__quote p {
    margin: 0;
    font-style: italic;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text);
    text-wrap: pretty;
}

/* Roles grid — callback-ready и stretch секции на «Подходящие роли» tab.
   Это full-detail grid (не overview-roles-list, который scan-friendly).
   Используется только на /app/resumes?tab=roles. */
.roles-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* profile-sysmeta — тонкая meta-line под H1 «Мои резюме» с source и
   updated. Низкий visual weight (muted-text + xs-iconки), не дублирует
   pill. Заменяет profile-detail__sysmeta из удалённого active-card'а. */
.profile-sysmeta {
    margin: calc(var(--space-1) * -1) 0 var(--space-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}
.profile-sysmeta__icon { color: var(--color-text-muted); }
.profile-sysmeta__sep { color: var(--color-text-muted); opacity: 0.5; }
.profile-sysmeta .muted { color: var(--color-text-muted); opacity: 0.85; }

/* ============================================================================
   Resumes-workspace editorial head — landing hero snapshot pattern на
   /app/resumes. Иконка-плейт (snapshot-icon recipe) + eyebrow «— МОИ
   РЕЗЮМЕ» + name of active profile + readiness % + meta-line с source/
   updated. Цель: «какой профиль смотрю» становится самым крупным элементом
   страницы вместо абстрактного label секции, который раньше был h1.
   ============================================================================ */
.resumes-workspace-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin: 0;
}
.resumes-workspace-head__copy {
    flex: 1 1 auto;
    min-width: 0;
}
/* Override .snapshot-ring landing-specific divider/padding (для row-layout
   на hero card). На page-head ring сидит в left slot как identity-якорь,
   border/padding не нужны. */
.resumes-workspace-head__score {
    padding-left: 0;
    border-left: 0;
    min-width: 0;
}
.resumes-workspace-head__plate {
    /* uses .snapshot-icon recipe (rounded-square pastel plate с цветной
       glyph и tight bloom, тот же что hero snapshot на лендинге). */
}
.resumes-workspace-head__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.resumes-workspace-head__eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.resumes-workspace-head__eyebrow::before {
    content: "— ";
    color: var(--color-accent);
}
.resumes-workspace-head__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(1.6rem, 3.4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-text);
    min-width: 0;
}
.resumes-workspace-head__meta {
    margin: 0.35rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}
/* Atomic meta-item — icon+text всегда в одной inline-flex group, не
   wraps independently. На mobile при vertical stack каждый item =
   1 строка (источник, обновлено), без orphan-icons. */
.resumes-workspace-head__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.resumes-workspace-head__meta-icon { color: var(--color-text-muted); flex: none; }
.resumes-workspace-head__meta-sep { color: var(--color-text-muted); opacity: 0.5; }
.resumes-workspace-head__meta .muted { color: var(--color-text-muted); opacity: 0.85; }
.resumes-workspace-head__meta-time { font-variant-numeric: tabular-nums; }
/* Status badge в page-head meta line — тот же visual, что у пометок статуса
   dropdown items («● Готов» / «● Можно усилить» / «● Черновик»). Colored dot
   + label. Tone по tier'у completeness. */
.resumes-workspace-head__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-muted);
}
.resumes-workspace-head__status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-text-muted);
    flex: none;
}
.resumes-workspace-head__status--success {
    color: var(--color-sage, var(--color-success));
}
.resumes-workspace-head__status--success .resumes-workspace-head__status-dot {
    background: var(--color-sage, var(--color-success));
    box-shadow: 0 0 0 3px rgba(var(--color-sage-rgb), 0.18);
}
.resumes-workspace-head__status--warning {
    color: var(--color-amber, var(--color-warning));
}
.resumes-workspace-head__status--warning .resumes-workspace-head__status-dot {
    background: var(--color-amber, var(--color-warning));
    box-shadow: 0 0 0 3px rgba(var(--color-amber-rgb), 0.18);
}
@media (max-width: 640px) {
    /* Mobile: compact pair — ring слева, copy справа в одной row, без
       wrap. До этого flex-wrap уносил ring на отдельную строку, в углу
       — оторван от copy, выглядел как orphan badge. Сейчас визуальная
       пара «score | profile» читается как hero-anchor. */
    .resumes-workspace-head {
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .resumes-workspace-head__copy {
        flex: 1 1 auto;
        min-width: 0;
    }
    .resumes-workspace-head__score {
        flex: 0 0 auto;
    }
    /* Meta — vertical stack: source и updated на отдельных строках,
       separator «·» скрыт. Раньше при wrap длинного filename точка
       уезжала на 2-ю строку как orphan: «· 🕐 Обновлено: ...». */
    .resumes-workspace-head__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    .resumes-workspace-head__meta-sep {
        display: none;
    }
}

/* Верхней строки на широком экране нет вовсе. Она возвращалась сюда ради
   одного колокольчика в углу — пустая полоса во всю ширину, которую человек
   не смотрит. Уведомления переехали пунктом в меню (эталон — прототип
   кабинета), и полоса больше не нужна: `.app-topbar { display: none }` на
   ≥992px снова работает без исключений. */

/* --- Dropdown shell (общий для ui_dropdown и bell) --- */
.dropdown {
    position: relative;
    display: inline-flex;
}
.dropdown__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--color-text);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.dropdown__trigger:hover {
    background: var(--color-bg-soft);
}

/* Backdrop — затемнение под bottom-sheet'ом на мобиле. */
.dropdown__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 55;
}
.dropdown__backdrop[hidden] {
    display: none;
}

/* Панель: mobile = bottom-sheet (snaps снизу, slides up). */
.dropdown__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 60;
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
.dropdown__panel[hidden] {
    display: none;
}
/* Нижний лист в кабинете поднимается НАД панелью навигации. z-index у листа
   выше (60 против 50), но они в разных контекстах наложения, и сравнение
   уровней между ними ничего не решает: панель навигации рисуется поверх, и
   последние пункты меню уезжали под неё — на карточке направления так пропадал
   пункт «Убрать в архив». Отступ равен высоте панели (56px) плюс безопасная
   зона; на десктопе её нет, и правило снимается вместе с ней. */
/* Отступа под нижнюю навигацию у листа нет: открытый dropdown поднимается
   над ней целиком (`.dropdown:has(> .dropdown__panel:not([hidden]))`, z 70)
   и навигация уходит под затемнение. Прежний запас в 56px остался пустой
   белой полосой под последним пунктом. */

@media (min-width: 768px) {
    /* Desktop: absolute popover под триггером, без backdrop. */
    .dropdown__panel {
        position: absolute;
        left: auto;
        right: 0;
        bottom: auto;
        top: calc(100% + var(--space-2));
        width: 360px;
        max-width: 360px;
        max-height: 480px;
        border-radius: var(--radius-md);
    }
    /* Меню действий — по содержимому и с узким полем (подсветка пункта почти
       до края, как в системных меню); 360px — ширина ленты уведомлений, а не
       меню из четырёх слов. */
    .dropdown__panel:has(> .dropdown__item, > .dropdown__item-form) {
        width: max-content;
        min-width: 14rem;
        max-width: 20rem;
        padding: var(--space-1);
    }
    .dropdown__panel--left {
        right: auto;
        left: 0;
    }
    .dropdown__backdrop {
        display: none !important;
    }
}

/* --- Bell-specific --- */
.bell {
    position: relative;
}
.bell__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent-text);
    background: var(--color-accent);
    border: 2px solid var(--color-bg);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    /* Lightweight pulse только на mount/обновлении count'а (JS добавит
       класс is-fresh временно). По умолчанию — статичный pill, не дёрганый. */
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
    font-variant-numeric: tabular-nums;
}
/* Пришло новое: бейдж «выпрыгивает», колокольчик качается один раз.
   Включает bell.js, когда число больше уже показанного в этой вкладке
   (первая страница сессии с непрочитанным — тоже), и снимает класс по
   окончании. Бесконечной пульсации нет: сигнал, который не гаснет, перестают
   замечать, а на каждой странице он раздражает. */
[data-bell-badge].is-bumped {
    animation: bell-badge-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bell-badge-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); }
}
.bell-icon.is-ringing {
    transform-origin: 50% 8%;
    animation: bell-ring 760ms ease-in-out;
}
@keyframes bell-ring {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(14deg); }
    30%  { transform: rotate(-12deg); }
    45%  { transform: rotate(9deg); }
    60%  { transform: rotate(-6deg); }
    75%  { transform: rotate(3deg); }
    100% { transform: rotate(0); }
}
/* Витрина стайлгайда: анимация по наведению. */
.sg-section .app-topbar__actions:hover [data-bell-badge]:not([hidden]) { animation: bell-badge-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.sg-section .app-topbar__actions:hover .bell-icon { transform-origin: 50% 8%; animation: bell-ring 760ms ease-in-out; }
@media (prefers-reduced-motion: reduce) {
    .sg-section .app-topbar__actions:hover [data-bell-badge],
    .sg-section .app-topbar__actions:hover .bell-icon,
    [data-bell-badge].is-bumped,
    .bell-icon.is-ringing { animation: none; }
}
.bell__badge[hidden] { display: none; }
.bell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1) var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.bell__title {
    font-weight: 600;
    font-size: 0.9375rem;
}
.bell__list {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-1);
}
/* Шапка и подвал окна стоят на месте, прокручивается только лента: «Все
   уведомления» и «Настройки» иначе оказывались под двадцатью записями, за
   нижним краем окна. */
.bell__panel:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }
.bell__panel > .bell__header,
.bell__panel > .bell__footer { flex: none; }
.bell__panel > .bell__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bell__panel > .bell__footer { margin-top: 0; }
.bell__state {
    padding: var(--space-3) var(--space-2);
}
.bell__footer {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-2) var(--space-1);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-2);
    font-size: 0.875rem;
}
/* Ссылки подвала — пунктами меню, без подчёркивания: подчёркнутые слова
   рядом с неподчёркнутыми пунктами соседних меню читались другим видом
   действия. */
.bell__footer a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text);
    text-decoration: none;
}
.bell__footer a:hover { color: var(--color-accent); }
.bell__footer a .icon { flex: none; color: var(--color-text-muted); transition: color 140ms ease; }
.bell__footer a:hover .icon,
.bell__footer a:focus-visible .icon { color: var(--color-accent); }

/* Dropdown panel container — focus-ring глобального правила
   ([tabindex]:focus-visible → 2px accent outline + glow) рисует обводку
   ВОКРУГ панели когда она получает focus (после open). Это visual
   noise: контейнер сам не interactive, focusable только из-за
   tabindex="-1" для keyboard-trap'а. Focus indicators на contained
   элементах (items / close button / footer links) остаются. */
.dropdown__panel:focus-visible {
    outline: none;
    box-shadow: var(--shadow-lg);
}

/* --- Notification item — строка «входящих» ---
   Анатомия: [плитка объекта 40px] [заголовок · время справа / текст].
   Непрочитанное — точка в левом поле и вес заголовка; плитка непрочитанной
   записи берёт тон акцента. Заливки строки нет: заливка, точка и цветная
   иконка разом читались тремя сигналами, а ряд из залитых и незалитых полос —
   таблицей. Вся строка — ссылка; переход показывает подсветка строки. */
.notif-item {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color 140ms ease;
}
a.notif-item:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
a.notif-item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}
.notif-item__icon {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    color: var(--color-text-muted);
}
.notif-item__icon .icon { width: 20px; height: 20px; }
.notif-item--unread .notif-item__icon {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent);
}
/* Точка непрочитанного — на углу плитки, как бейдж приложения: в левом поле
   строки она отнимала у текста 24px, и на 375px заголовки шли в три строки.
   Обводка цветом поверхности отделяет точку от плитки. */
.notif-item--unread .notif-item__icon::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 2px var(--notif-row-bg, var(--color-surface));
}
.notif-item__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 1px;
}
.notif-item__top {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}
.notif-item__header {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.notif-item--unread .notif-item__header { font-weight: 600; }
.notif-item__time {
    flex: none;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.notif-item__body {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    /* В колокольчике — две строки; в ленте текст целиком (ниже). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notif-item--unread .notif-item__body { color: var(--color-text-soft); }

/* Колокольчик: строки той же анатомии, через тонкую линию. */
.notif-item--compact { padding-right: var(--space-3); }
.notif-item--compact + .notif-item--compact {
    border-top: 1px solid var(--color-border);
}
/* «Прочитать все» в шапке колокольчика: видна, только когда bell.js нашёл
   непрочитанное в загруженной ленте. */
.bell__read-all { display: none; font-size: var(--font-size-sm); }
.bell__read-all.is-visible { display: inline-flex; }

/* --- Notifications full-list page (/app/notifications) ---
   Одна колонка чтения: шапка, вкладки и лента стоят по одной кромке и одной
   ширины. Ширина задаётся детям, а не самой странице: левая кромка заголовка
   совпадает с остальными страницами кабинета. */
.notifications-page > * {
    width: 100%;
    max-width: 46rem;
}
.notifications-page__feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.notif-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.notif-group__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-muted);
}
/* Группа — одна карточка со строками через линию. */
.notifications-page__list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.notifications-page__list > li + li { border-top: 1px solid var(--color-border); }
.notifications-page .notif-item { padding-block: var(--space-4); }
.notifications-page .notif-item__body {
    display: block;
    -webkit-line-clamp: unset;
}

/* Keyset-вариант пагинации: те же ghost-nav кнопки, что и offset, но без
   центрального счётчика — раскладываем prev/next по краям. */
.pagination--keyset {
    justify-content: space-between;
}

/* =====================================================================
   Notification preferences — opt-out matrix (план Task 6)
   Mobile-first: каждая категория — карточка со стеком toggle-строк.
   @media ≥768px — превращается в матрицу-таблицу category × channel.
   ===================================================================== */
.prefs-page[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* Web Push status (trinity-state). Один из трёх state'ов visible — JS
   снимает hidden только с актуального. ВАЖНО: author CSS `display: flex`
   без guard перекрывает UA `[hidden] { display: none }` (same specificity
   0,1,0 — author wins), и тогда все три visible одновременно. Поэтому
   ниже добавлены явные `[hidden] { display: none }` rules. */
.prefs-webpush { /* трейлинг-ритм даёт page-shell gap (margin-bottom снят). */ }
.prefs-webpush[hidden] { display: none; }
.prefs-webpush__state[hidden] { display: none; }
.prefs-webpush__state {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-bg-soft) 70%, transparent);
    font-size: 0.875rem;
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}
/* Accent left-rail, цвет диктует state. */
.prefs-webpush__state::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--color-text-muted);
    opacity: 0.4;
}
.prefs-webpush__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
}
.prefs-webpush__text { flex: 1; min-width: 12ch; line-height: 1.4; }
.prefs-webpush__cta { flex-shrink: 0; }
/* Granted = success rail + sage ring. */
.prefs-webpush__state[data-webpush-state="granted"]::before { background: var(--color-success); opacity: 1; }
.prefs-webpush__state[data-webpush-state="granted"] .prefs-webpush__icon {
    border-color: color-mix(in srgb, var(--color-success) 45%, transparent);
    color: var(--color-success);
}
/* Denied = warning rail + amber ring. */
.prefs-webpush__state[data-webpush-state="denied"]::before { background: var(--color-warning); opacity: 1; }
.prefs-webpush__state[data-webpush-state="denied"] .prefs-webpush__icon {
    border-color: color-mix(in srgb, var(--color-warning) 50%, transparent);
    color: var(--color-warning);
}
/* Default = accent rail + accent ring. */
.prefs-webpush__state[data-webpush-state="default"]::before { background: var(--color-accent); opacity: 0.7; }
.prefs-webpush__state[data-webpush-state="default"] .prefs-webpush__icon {
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
    color: var(--color-accent);
}

/* Матрица — mobile: стек карточек. */
.prefs-matrix {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.prefs-row--head { display: none; } /* шапка-строка только на десктопе */
.prefs-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.prefs-row__category { display: flex; flex-direction: column; gap: 0.15rem; }
.prefs-row__category-label { font-weight: 600; color: var(--color-text); }
.prefs-row__category-desc { font-size: 0.8125rem; color: var(--color-text-muted); }
.prefs-row__cell { min-height: 44px; display: flex; align-items: center; }
.prefs-row__cell[hidden] { display: none; }
.prefs-row__cell .toggle-row { width: 100%; }
/* Канал, в который по категории ничего не уходит: подпись и прочерк вместо
   переключателя (на десктопе подпись даёт шапка-строка). */
.prefs-row__none {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-muted);
}
.prefs-row__none-label { color: var(--color-text-muted); }

@media (min-width: 768px) {
    .prefs-matrix {
        gap: 0;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        overflow: hidden;
    }
    .prefs-row {
        display: grid;
        /* 2 канала (email + web_push) — in_app убран из UI. */
        grid-template-columns: minmax(0, 1fr) repeat(2, 110px);
        align-items: center;
        gap: var(--space-3);
        border: 0;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
        background: var(--color-surface);
    }
    /* Web push не поддерживается браузером → одна колонка (email). */
    .prefs-matrix--no-webpush .prefs-row {
        grid-template-columns: minmax(0, 1fr) 110px;
    }
    .prefs-row:last-child { border-bottom: 0; }
    .prefs-row--head {
        display: grid;
        background: color-mix(in srgb, var(--color-bg-soft) 60%, transparent);
        font-family: var(--font-sans);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--color-text-muted);
        text-transform: none;
        letter-spacing: 0;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    font-variant-numeric: tabular-nums; }
    .prefs-row__head-cell { justify-content: center; text-align: center; }
    .prefs-row--locked { background: color-mix(in srgb, var(--color-bg-soft) 50%, transparent); }
    .prefs-row:not(.prefs-row--head):not(.prefs-row--locked):hover {
        background: color-mix(in srgb, var(--color-accent) 3%, var(--color-surface));
    }
    /* В ячейках матрицы виден только switch — label/hint уезжают в SR-only,
       заголовок канала даёт шапка-строка. lock-reason остаётся в DOM для
       aria-describedby (тоже SR-only визуально). */
    .prefs-row:not(.prefs-row--head) .prefs-row__cell { justify-content: center; }
    .prefs-row:not(.prefs-row--head) .prefs-row__cell .toggle-row { width: auto; justify-content: center; }
    .prefs-row__none { width: auto; justify-content: center; }
    .prefs-row__none-label { display: none; }
    .prefs-row:not(.prefs-row--head) .prefs-row__cell .toggle-row__text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ============================================================================
   Bottom-tab навигация (мобильный, <=991px)
   ============================================================================ */
.bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 992px) {
    .bottom-nav { display: none; }
}
.bottom-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 0.35rem 0.25rem;
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: color 150ms ease;
}
.bottom-nav__item:hover { color: var(--color-text); }
.bottom-nav__item[aria-current="page"] { color: var(--color-accent); }
.bottom-nav__icon { width: 22px; height: 22px; }
.bottom-nav__label {
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Контент не должен прятаться под фиксированным bottom-nav на мобиле. */
@media (max-width: 991.98px) {
    .body--app .app-main {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--space-4));
    }
}
/* Styleguide-витрина: bottom-nav обычно fixed + hidden на desktop. В демо
   нейтрализуем оба (специфичность 0,2,0 побеждает .bottom-nav display:none). */
.sg-bottom-nav .bottom-nav { position: static; display: flex; }

/* ============================================================
   .career-update — экран пересборки карты: инструкция своими
   словами + что войдёт в сборку + запуск с остатком квоты.
   ============================================================ */

/* ============================================================
   ui_career_journey — дорога варианта целиком: основной маршрут
   и обход рядом. Развилка существует, только когда обе дороги
   видны разом (до этого они жили в разных концах страницы).
   ============================================================ */
.career-journey {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--color-surface);
}

.career-journey__lane-label {
    display: block;
    margin-bottom: var(--space-3);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.career-journey__lane--alt {
    border-top: 1px dashed var(--color-border);
    padding-top: var(--space-4);
}

.career-journey__tradeoff {
    margin: var(--space-3) 0 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* Обходная дорога тише основной: это второй сценарий, а не равный выбор.
   Пунктир — язык схем: различие читается раньше, чем подпись ленты. */
.career-route--muted .career-route__label { color: var(--color-text-soft); }
.career-route--muted .career-route__dot { border-color: var(--color-border); }
.career-route--muted .career-route__stop::before {
    background: repeating-linear-gradient(
        to bottom,
        var(--color-border-strong) 0 5px,
        transparent 5px 10px
    );
}

/* Горизонтальная лента маршрута на десктопе. Компакт (ряды карты), мобайл и
   дорога С ПОДПИСЯМИ станций остаются лесенкой.

   Про подписи: горизонталь делит ширину поровну между станциями, и на
   четырёх остановках в колонке досье каждой достаётся 186px — подпись «что
   она даёт» ложилась в двадцать знаков строки и уходила на шесть строк
   столбиком. Диаграмме нужна горизонталь, прозе — ширина; когда станция
   несёт прозу, выигрывает проза. Дорога без подписей (прямой переход,
   цепочка имён) остаётся лентой — там горизонталь и читается дорогой. */
@media (min-width: 768px) {
    .career-route:not(.career-route--compact):not(.career-route--ladder) {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        align-items: start;
        gap: 0;
    }

    .career-route:not(.career-route--compact):not(.career-route--ladder) .career-route__stop {
        padding: 1.9rem var(--space-3) 0 0;
    }

    /* Линия идёт ВПРАВО от точки станции и обрывается на цели. */
    /* Ось здесь горизонтальная: линия центрируется по высоте узла
       (0.35rem + половина 0.75rem), узлы — на --route-x от начала станции. */
    .career-route:not(.career-route--compact):not(.career-route--ladder) .career-route__stop::before {
        left: var(--route-x);
        right: 0;
        top: 0.725rem;
        bottom: auto;
        width: auto;
        height: 2px;
        transform: translateY(-50%);
    }

    .career-route:not(.career-route--compact):not(.career-route--ladder) .career-route__dot {
        left: var(--route-x);
    }
    .career-route:not(.career-route--compact):not(.career-route--ladder) .career-route__stop--target .career-route__dot {
        top: 0.225rem;
    }

    .career-route--muted:not(.career-route--compact):not(.career-route--ladder) .career-route__stop::before {
        background: repeating-linear-gradient(
            to right,
            var(--color-border-strong) 0 5px,
            transparent 5px 10px
        );
    }

    .career-route:not(.career-route--compact):not(.career-route--ladder) .career-route__label,
    .career-route:not(.career-route--compact):not(.career-route--ladder) .career-route__why {
        display: block;
        padding-right: var(--space-3);
    }
}

.vector-verdict__label--hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================
   ui_gap_map — что уже есть против того, что просит роль.
   Чипы требований вместо стены категорий: человек спрашивает
   «что развивать», а не «сколько категорий пустых».
   ============================================================ */
.gap-map {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.gap-map--framed {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--color-surface);
}

.gap-map__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Строка вместо полосы и счёта, когда корпус не держит знаменателя. */
.gap-map__sparse {
    margin: 0 0 var(--space-3);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.gap-map__summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}

.gap-map__meter {
    flex: 0 0 8rem;
    max-width: 8rem;
}

.gap-map__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-teal);
}

.gap-map__count {
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.gap-map__source {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.gap-map__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gap-map__label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.gap-map__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Закрыто семейством — та же группа, но пунктирный значок: «1С есть,
   1С:ERP нет» не то же самое, что закрыто ключом. */

/* Зона нажатия раскрывашки — 44px на пальце (WCAG 2.5.5 AA): та же схема, что
   у `career-note__fold`. Мерили на живом экране: «свод по категориям» был 16px
   высотой. */
@media (max-width: 767.98px) {
    .gap-map__fold > summary,
    .open-questions-stack__why-summary {
        min-height: var(--tap-min);
        padding-block: var(--space-2);
        margin-block: calc(-1 * var(--space-2));
    }
}
.gap-map__fold > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    list-style: none;
    font-variant-numeric: tabular-nums;
}

.gap-map__fold > summary::-webkit-details-marker { display: none; }
.gap-map__fold[open] .gap-map__chev { transform: rotate(180deg); }
.gap-map__fold .gap-bars { margin-top: var(--space-3); }

/* ============================================================
   ui_vector_verdict — решающий блок досье варианта: четыре факта
   выбора (дорога, профиль роли, рынок, возврат) одной сеткой с
   графикой. Заменяет прозу, разбросанную по трём местам страницы.
   ============================================================ */
/* Сводка — ЛЕДЖЕР, а не коробка. Обведённая карточка ставила три факта в один
   ряд с остальными панелями страницы, хотя это не блок содержания, а строка
   показаний: то, на чём стоит выбор. Две волосяные линии сверху и снизу держат
   её как строку, а не как объект, и освобождают рамку для того, что ею
   действительно является. Ширина — колонка текста: растянутая на весь канвас,
   она оставляла между ячейками дыры в треть экрана. */
/* Вердикт варианта (career_vector_hero) — карточка вердикта профессии
   (`profile-hero` + классы ui_target_fit) в одну колонку: кольца у варианта
   нет. Обе страницы отвечают «что это за роль для меня» и обязаны выглядеть
   одинаково. */
.profile-hero.vector-hero { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.vector-hero .target-fit__verdict { display: flex; flex-direction: column; gap: var(--space-2); }
/* Мобильная раскладка вердикта профессии ставит надпись рядом с кольцом
   (display: contents + align-self: end). Кольца у варианта нет: колонка
   остаётся колонкой, надпись — у левого края. */
.vector-hero .target-fit__verdict > * { align-self: stretch; }
.vector-hero__answer {
    margin: 0;
    max-width: 52ch;
    font-family: var(--font-serif);
    font-weight: 500;
    /* Вывод — первая фраза разговора, а не заголовок: при 21px жирным в
       четыре строки он давил на всю карточку и спорил с H1 страницы, а
       полужирным на телефоне (восемь строк) — всё ещё кричал. */
    font-size: 1.125rem;
    line-height: 1.45;
    letter-spacing: -0.005em;
    color: var(--color-text);
}
/* Вывод AI — тихой плашкой: голос модели отделён от ответа фоном, а не
   ещё одним абзацем того же веса. */
.vector-hero__ai { display: grid; gap: 6px; margin-top: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.vector-hero__origin { margin: 0; }
.vector-hero .vector-hero__ai .verdict-hint { margin: 0; max-width: 72ch; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-soft); }
.vector-hero__ai-more[open] > summary { margin-bottom: 4px; }
/* Две колонки доводов стопкой (узкая карточка) — между ними воздух
   группы, а не строки: «Что против» прилипало к «ещё 2 довода». */
.vector-hero .target-fit__cols { row-gap: var(--space-5); }
.vector-hero__src {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}
.vector-hero__src:hover { text-decoration: underline; }
.vector-hero__why { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--color-text-muted); }
/* Итог доводов — ведущей строкой колонки: утверждение весом текста, цитаты
   под ним тише. */
.vector-hero__reason { margin: 0 0 var(--space-2); max-width: 68ch; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--color-text); }
/* Колонки «за / против» — знаком у заголовка и у каждого довода, как
   доводы разбора вакансии в подборке (+ / −): сторона читается до слов. */
.vector-hero__col-title { display: inline-flex; align-items: center; gap: 6px; }
.vector-hero__col-title--pro > .icon { color: var(--color-success); }
.vector-hero__col-title--con > .icon { color: rgb(var(--color-amber-rgb)); }
.vector-hero .support-list > .vector-hero__row { grid-template-columns: 16px minmax(0, 1fr); align-items: start; column-gap: var(--space-2); }
/* Знак стороны у довода: + за, − против. Общий для вердикта пути, разбора
   карты и строк отказов — сторона читается до слов. */
.sign-mark { display: inline-flex; margin-top: 3px; }
.sign-mark--pro { color: var(--color-success); }
.sign-mark--con { color: rgb(var(--color-amber-rgb)); }
/* Цитата из резюме — тише вывода, подпись под ней ещё тише. */
.vector-hero__quote { color: var(--color-text-soft); }
/* Следствия выбора — плитками со значком, на широкой карточке в два ряда. */
.vector-hero__notes {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft, var(--color-border));
}
.vector-hero { container: vector-hero / inline-size; }
@container vector-hero (min-width: 620px) { .vector-hero__notes:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vector-hero__note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.vector-hero__note p { margin: 0; }
.vector-hero__note-label { display: flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); }
.vector-hero__note-text { margin-top: 2px; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); }
/* Сетка фактов внутри карточки: без своих линий и отступа снизу — делит её
   с колонками та же линия, что у вердикта профессии. */
.vector-verdict.vector-verdict--bare {
    max-width: none;
    margin: 0;
    padding: var(--space-3) 0 0;
    border-bottom: 0;
    border-top: 1px solid var(--color-border-soft, var(--color-border));
}

.vector-verdict {
    /* Раскладка показаний зависит от ширины КАРТОЧКИ, а не окна: сводка
       стоит и во всю ширину досье кандидата, и в колонке рядом с рейлом у
       выбранного пути, и на профессии. По окну на 1440px в узкой колонке
       четыре показания ложились 3 + 1, с разделителем у одинокой ячейки. */
    container: verdict / inline-size;
    max-width: 62rem;
    padding-block: var(--space-4);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
}

/* Уверенность — пилюля слева, над фактами. В правом углу она висела оторванно
   от всего и читалась подписью к пустому месту. */
.vector-verdict__confidence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-3);
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-surface-sunken, rgba(0, 0, 0, 0.04));
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.vector-verdict__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-5);
}
/* Факты разделены волосяной линией, а не пустотой: на широком канвасе пустота
   между ними читалась как «блоки не связаны», хотя это один ряд показаний.
   В две колонки нечётная ячейка начинает новый ряд: линия слева у неё делила
   бы пустоту, а отступ сдвигал «Рынок» правее «Дороги» над ним. */
@container verdict (min-width: 520px) {
    .vector-verdict__cell + .vector-verdict__cell {
        padding-left: var(--space-5);
        border-left: 1px solid var(--color-border-soft);
    }
    .vector-verdict__cell:nth-child(2n+1) {
        padding-left: 0;
        border-left: 0;
    }
}
/* На узком экране метка уверенности прижата к правому краю прямо над второй
   колонкой сетки и читается её заголовком. Линия снизу возвращает её тому,
   к чему она относится, — карточке целиком. */
@media (max-width: 599px) {
    .vector-verdict__confidence {
        text-align: left;
        padding-bottom: var(--space-3);
        margin-bottom: var(--space-4);
        border-bottom: 1px solid var(--color-border-soft, var(--color-border));
    }
}

/* В один ряд — когда четыре показания помещаются целиком (4 × 9.5rem и
   три зазора). Колонок столько, сколько ячеек: при малом корпусе покрытие не
   показывается вовсе, и фиксированные четыре оставляли справа пустую
   четверть карточки — читалось как «здесь что-то не загрузилось».
   auto-fit, не repeat(4): состав ячеек зависит от данных. */
/* Узкая карточка (телефон): показания строками «метка | значение», а не
   сеткой 2 × 2. В двух колонках по ~130px подписи ломались в три строки, и
   сводка из четырёх фактов занимала полэкрана. */
@container verdict (max-width: 519px) {
    .vector-verdict .vector-verdict__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* Специфичность — выше базовых правил ячейки ниже по файлу. */
    .vector-verdict .vector-verdict__cell {
        display: grid;
        grid-template-columns: 6.75rem minmax(0, 1fr);
        column-gap: var(--space-3);
        row-gap: 2px;
        align-items: start;
        padding-block: var(--space-3);
    }
    .vector-verdict .vector-verdict__cell + .vector-verdict__cell { border-top: 1px solid var(--color-border-soft); }
    .vector-verdict .vector-verdict__cell:first-child { padding-top: 0; }
    .vector-verdict .vector-verdict__cell:last-child { padding-bottom: 0; }
    /* Метка блоком: «?» встаёт сразу за последним словом, а не у правого
       края колонки после переноса. */
    .vector-verdict__cell > .vector-verdict__label { display: block; grid-column: 1; grid-row: 1 / span 4; min-height: 0; padding-top: 1px; line-height: 1.4; }
    .vector-verdict__cell > .vector-verdict__label .concept-hint { vertical-align: middle; margin-left: 2px; }
    /* Зона нажатия остаётся 44px, а в строке «?» занимает ширину значка:
       иначе в колонке меток он переносился на отдельную строку. */
    .vector-verdict__cell > .vector-verdict__label .concept-hint__trigger { margin: -10px -11px; }
    .vector-verdict__cell > :not(.vector-verdict__label) { grid-column: 2; justify-self: start; }
    .vector-verdict__visual,
    .vector-verdict__meter { margin-block: 5px 2px; }
}
@container verdict (min-width: 700px) {
    .vector-verdict__grid {
        grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    }
    .vector-verdict__cell:nth-child(2n+1):not(:first-child) {
        padding-left: var(--space-5);
        border-left: 1px solid var(--color-border-soft);
    }
}

.vector-verdict__cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.vector-verdict__label {
    /* Та же выравнивающая высота, что у карточек: ячейка с «?»-подсказкой не
       съезжает относительно соседних показаний ряда. */
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.vector-verdict__value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Средняя ступень типографики, которой на странице не было: заголовок
       2.2rem, а дальше всё лежало в 13-16px, и ни одно показание не весило
       больше подписи к нему. */
    font-size: 1.0625rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* Дата — одним куском: «18 / октября» по разным строкам читалась двумя
   подписями. */
.vector-verdict__date { white-space: nowrap; }

.vector-verdict__value--muted {
    color: var(--color-text-muted);
    font-weight: 400;
}

.vector-verdict__note {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Станции дороги: вы → промежуточные → цель. Тот же язык точек, что у
   маршрута карты, сжатый до строки. */
.vector-verdict__visual {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 14px;
}

.vector-verdict__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border-strong);
    background: transparent;
    flex: none;
}

.vector-verdict__dot--you {
    background: var(--color-text-soft);
    border-color: var(--color-text-soft);
}

.vector-verdict__dot--target {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 2px var(--color-surface);
    background: var(--color-accent);
}

.vector-verdict__dash {
    width: 14px;
    height: 1.5px;
    background: var(--color-border-strong);
    flex: none;
}

.vector-verdict__meter {
    display: block;
    width: 100%;
    max-width: 160px;
    flex: none;
}

/* Точка-индикатор рынка: подтверждает / слабо. Цвет дублируется словом —
   один цвет не переживает дальтонизм. */
.vector-verdict__signal {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.vector-verdict__signal--ok { background: var(--color-success, #22C55E); }
.vector-verdict__signal--weak { background: var(--color-warning); }

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

/* «За» и «против» различаются ТОНОМ, а не только заголовком. Два одинаковых
   белых прямоугольника рядом читались как два списка чего-то, и взвешивание
   приходилось собирать из слов. Грань слева, а не заливка: страница остаётся
   спокойной, но глаз сразу видит, где какая чаша. */

/* Следствия выбора — без рамки: иерархия внутри взвешивания важнее
   единообразия карточек. */

/* «Что изучить» — книжная полка шага: материалы плашками, не прозой. */
.vector-steps__shelf {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.vector-steps__shelf-label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.vector-steps__books {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Книга — строка с корешком-иконкой, а не карточка в карточке. Рамка вокруг
   одного источника внутри карточки шага читалась третьим уровнем вложенности
   ради одной ссылки на книгу. */
.vector-steps__book {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    max-width: 100%;
}

.vector-steps__book .icon {
    color: var(--color-text-muted);
    flex: none;
}

.vector-steps__book-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vector-steps__book-title {
    font-size: 0.875rem;
    font-weight: 500;
    font-style: italic;
    color: var(--color-text);
}

.vector-steps__book-author {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Метка происхождения — ТОЛЬКО отступ: вид ей задаёт сам `ui_ai_mark`.
   Здесь она стояла в одной группе селекторов с «причиной пересборки» (запятая
   перед комментарием склеила три селектора в один список), и метка получала
   чужую грань слева, чужой отступ сверху и чужой цвет — поэтому не вставала в
   строку с заголовком и рисовала вертикальную чёрточку ниоткуда. Группа
   разделена: у служебной цитаты свой вид, у метки свой. */
.career-note__origin,
.vector-suggestion__origin {
    margin: 0;
}

/* Страница вводных: форма и колонка «что писать / что изменит».
   Пустое поле без единого образца человек чаще закрывает, чем
   заполняет, — примеры здесь несут ту же работу, что плейсхолдер,
   но остаются на экране, пока он пишет. */
.user-context-page {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

@media (min-width: 900px) {
    .user-context-page { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-6); }
}

.user-context-page__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Кнопки формы — в ряд с зазором, с переносом на узком экране. Своей
   раскладки у ряда не было, и «Сохранить» вставала под главной кнопкой
   вплотную. */
.user-context__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.context-help {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--color-surface);
}
/* Действие в карточке подсказки — отдельной строкой с воздухом над ней. */
.context-help > .btn { margin-top: var(--space-3); }

.context-help__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.context-help__list,
.context-help__examples {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-soft);
}

.context-help__examples li {
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--color-border);
    background: var(--color-bg-soft, transparent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
}

.context-help__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-soft);
}

.user-context__origin { margin: 0 0 var(--space-2); }

/* Рынок роли двумя колонками на широком экране: тренд и требования
   отвечают на один вопрос («что с этой ролью на рынке»), и порознь
   график сиротливо висел в колонке 936px. Порог по ширине КОНТЕЙНЕРА,
   а не окна: у досье есть рейл, и на 1280px основная колонка ещё
   узкая — там блоки остаются друг под другом. */
.vector-market {
    display: grid;
    gap: var(--space-4);
}

/* Контейнером служит колонка досье (container-type объявлен на ней): элемент
   не может опрашивать собственную ширину — это был бы цикл. */
/* Порог — по КОЛОНКЕ досье, а не по окну: на 1440px она даёт 776px, и
   график с требованиями там уже уживаются. Тренду хватает 17rem — он
   рисует от трёх до четырнадцати столбиков, — остальное уходит чипам
   требований, которым ширина нужнее. */
/* Модификатор, а не просто ширина: делить колонки имеет смысл, только когда
   в них два блока. Без тренда сетка остаётся одноколоночной, и карта
   требований занимает всю ширину досье — иначе она садилась в узкую
   графиковую колонку, а широкая пустовала. */
@container vector-main (min-width: 740px) {
    .vector-market--split {
        grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
        gap: var(--space-4);
        align-items: start;
    }
}

@container vector-main (min-width: 900px) {
    .vector-market--split { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: var(--space-5); }
}

.vector-market__cell { min-width: 0; }

/* «Что если закрыть пробелы» (ui_whatif) — продолжение панели о роли.
   Ответ — две величины одной шкалы: «сейчас» приглушено, «с навыками» —
   полным весом, сдвиг чипом рядом; цифры табличные, чтобы 9% и 21% не
   прыгали при пересчёте. */
.whatif__form {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
}
/* Подпись величины — над парой чисел, а не в сноске: «88%» без
   существительного не отвечает ни на какой вопрос. */
.whatif__caption {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
    font-weight: 600;
    font-size: 0.9375rem;
}
.whatif__result {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-3);
}
.whatif__cell { display: grid; gap: var(--space-1); }
.whatif__cell--after {
    grid-template-columns: auto auto;
    align-items: end;
    column-gap: var(--space-2);
}
.whatif__cell--after .whatif__label { grid-column: 1 / -1; }
.whatif__label { font-size: 0.8125rem; color: var(--color-text-muted); }
.whatif__num {
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight: 600;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}
.whatif__cell--after .whatif__num { color: var(--color-text); }
.whatif__cell--after .score-delta { margin-bottom: 0.2em; }
.whatif__arrow { color: var(--color-text-muted); margin-bottom: 0.45em; }
.whatif__sign {
    margin: var(--space-2) 0 0;
    max-width: 68ch;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.whatif__note {
    margin: var(--space-3) 0 0;
    max-width: 68ch;
    font-size: 0.9375rem;
    color: var(--color-text-soft);
}
.whatif__explain {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
    display: grid;
    gap: var(--space-2);
}
.whatif__origin { margin: 0; }
/* Проза модели — тем же голосом, что обоснование в вердикте варианта:
   приглушённым, а не цветом заголовка — её громкость не выше чисел. */
.whatif__line { margin: 0; max-width: 68ch; line-height: 1.55; color: var(--color-text-soft); }
.whatif__more { display: grid; gap: var(--space-2); }
.whatif__more[open] > .whatif__line:first-of-type { margin-top: var(--space-1); }
.whatif__pick > .whatif__pick-summary { font-size: 0.9375rem; color: var(--color-accent); }
.whatif__pick > .whatif__pick-summary:hover { color: var(--color-accent); text-decoration: underline; }
.whatif__pick .whatif__form { margin-top: var(--space-2); }
.whatif__ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-4);
}
.whatif__ask .whatif__note { flex-basis: 100%; margin: 0; }
.whatif .progress-indicator { margin-top: var(--space-4); }
.whatif__form[aria-busy="true"] .btn { cursor: progress; opacity: 0.8; }
.whatif__form[aria-busy="true"] .btn .icon { animation: spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
    .whatif__form[aria-busy="true"] .btn .icon { animation: none; }
}

/* Тренд в узкой колонке дышит рамкой — иначе он висит в пустоте рядом
   с обрамлённой картой требований и читается недоделанным. */
/* В один столбец (колонка уже 740px) тренд стоит в той же панели над
   требованиями, и своя рамка давала карточку в карточке: только линия под
   ним. */
.vector-market__cell--trend {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-soft);
}
@container vector-main (min-width: 740px) {
    .vector-market--split .vector-market__cell--trend {
        border: 1px solid var(--color-border-soft);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
        background: var(--color-surface);
    }
}

/* Мера чтения внутри шага: карточка широкая, а строка прозы длиннее
   ~75 знаков теряет читателя на возврате к началу строки. */
.vector-steps__reason,
.vector-steps__acceptance { max-width: 68ch; }

/* ============================================================
   ui_career_lifeline — линия карьеры: отрезки работы и паузы.
   Ширина отрезка И ЕСТЬ его длительность: та же биография
   фразой перечитывается дважды, полосой — читается сразу.
   ============================================================ */
.lifeline {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lifeline__title {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Дорожка — тонкая полоса: ширина отрезка и есть длительность. Имён внутри
   нет — они под дорожкой (.lifeline__tags): короткое место работы иначе
   становилось плашкой с буквой, длинное — огрызком «Компани…». */
.lifeline__track {
    display: flex;
    align-items: stretch;
    gap: 3px;
    height: 10px;
    min-width: 0;
}

.lifeline__seg {
    position: relative;
    cursor: help;
    display: block;
    min-width: 0;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-text-muted) 32%, transparent);
    transition: opacity 140ms ease, background-color 140ms ease;
}
.lifeline__seg:nth-child(even) { background: color-mix(in srgb, var(--color-text-muted) 46%, transparent); }
/* Нынешнее место — акцентом: та же точка, что «Вы здесь» на карте. */
.lifeline__seg:last-child { background: var(--color-accent); }
/* Зона наведения и нажатия выше полосы: десять пикселей — не цель. */
.lifeline__seg::before { content: ""; position: absolute; inset: -12px 0; }

/* Пауза — штриховка и ничего больше: причины перерыва бывают такие, о
   которых продукт судить не вправе, и тревожный тон превратил бы
   инструмент в упрёк. */
.lifeline__seg--gap {
    background: repeating-linear-gradient(
        135deg,
        var(--color-border-strong) 0 3px,
        transparent 3px 6px
    );
}
.lifeline__seg--gap:nth-child(even) { background: repeating-linear-gradient(135deg, var(--color-border-strong) 0 3px, transparent 3px 6px); }

/* Наведение на один отрезок притеняет соседние: линия на секунду становится
   ответом про одно место работы. */
.lifeline__track:hover .lifeline__seg,
.lifeline__track:focus-within .lifeline__seg { opacity: 0.45; }
.lifeline__track .lifeline__seg:hover,
.lifeline__track .lifeline__seg:focus-visible { opacity: 1; }
.lifeline__seg:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.lifeline__seg--link { cursor: pointer; color: inherit; text-decoration: none; }

/* Подписи под дорожкой: «Kaspi Bank 2017–2020» у начала своего отрезка (у
   правой кромки — у его конца), выносная линия к отрезку. Строку и предел
   ширины считает сервер (b2c.layoutTimelineLabels). */
.lifeline__tags {
    --tag-row: 1.5rem;
    --tag-drop: 0.5rem;
    position: relative;
    height: calc(var(--lanes, 1) * var(--tag-row) + var(--tag-drop));
}
.lifeline__tag {
    position: absolute;
    top: calc(var(--lane) * var(--tag-row) + var(--tag-drop));
    left: calc(var(--left) * 1%);
    max-width: calc(var(--mw) * 1%);
    padding-left: 7px;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--color-text);
    text-decoration: none;
}
.lifeline__tag::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(-1 * (var(--lane) * var(--tag-row) + var(--tag-drop)) - 2px);
    height: calc(var(--lane) * var(--tag-row) + var(--tag-drop) + 0.75rem);
    border-left: 1px solid var(--color-border-strong);
}
.lifeline__tag--end { left: auto; right: calc((100 - var(--anchor)) * 1%); padding-left: 0; padding-right: 7px; text-align: right; }
.lifeline__tag--end::before { left: auto; right: 0; }
.lifeline__tag-text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lifeline__tag-text b { font-weight: 600; }
.lifeline__tag-years { margin-left: 4px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
a.lifeline__tag:hover .lifeline__tag-text b { text-decoration: underline; text-underline-offset: 3px; }
/* На узком экране подписям нет места: биографию рассказывает список под
   линией (.lifeline__key-list). */
@media (max-width: 599px) {
    .lifeline__tags { display: none; }
    .lifeline__track { margin-bottom: var(--space-1); }
}

.lifeline__legend {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.lifeline__legend {
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
}

.lifeline__key {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    flex: none;
}

.lifeline__key--gap {
    background: repeating-linear-gradient(
        135deg,
        var(--color-border-soft) 0 4px,
        transparent 4px 8px
    );
    border: 1px dashed var(--color-border-strong);
}

/* ============================================================
   ui_role_trend — спрос на роль по суточным срезам. Одна цифра
   не отличает роль на подъёме от сворачиваемой; ряд отличает.
   ============================================================ */
.trend {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.trend__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.trend__title {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.trend__dir {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.trend__dir--up { color: var(--color-teal-deep, var(--color-teal)); }
.trend__dir--down { color: var(--color-warning); }
.trend__dir--flat { color: var(--color-text-muted); }

/* Разреженный тренд: строка вместо графика, когда корпус не держит вывода.
   Та же подпись и то же число, что были под графиком, — исчезает только
   картинка, которой нечего показать. */
.trend--sparse {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
}
.trend__sparse-note {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.trend__bars {
    display: flex;
    align-items: flex-end;
    /* День — своё место на оси (05.11): тонкие столбики через равный шаг,
       при коротком ряду — разнесены по всей ширине, а не сбиты влево. */
    justify-content: space-between;
    gap: 2px;
    height: 72px;
}

.trend__bar {
    flex: 1 1 0;
    min-width: 2px;
    /* Потолок ширины столбика: при девяноста днях — тонкие полоски, при
       коротком ряду — не бруски во всю ширину (их разносит space-between). */
    max-width: 14px;
    border-radius: 2px 2px 0 0;
    background: color-mix(in srgb, var(--color-accent) 55%, transparent);
    transition: background 140ms ease;
}

.trend__bar:hover { background: var(--color-accent); }
/* Неделя без срезов (05.11) — черта у основания на месте столбика: ось
   времени не сжимается, и дыра в данных видна дырой, а не соседней неделей. */
.trend__bar--empty {
    align-self: flex-end;
    height: 2px;
    background: var(--color-border);
}
.trend__bar--empty:hover { background: var(--color-border); }

.trend__axis {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.trend__note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .trend__bar,
    .lifeline__seg { transition: none; }
}

/* ============================================================
   ui_ai_mark — происхождение текста: суждение модели, не замер.
   Тот же глиф и акцент, что у .btn--ai, но тише: метка
   сопровождает чтение, а не зовёт нажать.
   ============================================================ */
/* Метка происхождения — короткое слово, и рвать его нельзя. Контейнеры, где
   она живёт (`.career-note`, карточки вариантов), включают
   `overflow-wrap: anywhere` ради длинных слов прозы, и правило наследуется:
   на 375px «РАЗБОР» разваливался на «РАЗБО / Р». Метка переносится целиком —
   для этого же `flex-wrap`, иначе при нехватке места ломался бы счётчик. */
.ai-mark {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    overflow-wrap: normal;
    word-break: normal;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.ai-mark .icon {
    color: var(--color-accent);
    /* Свечение вдвое слабее кнопочного: сигнатура узнаётся, но не спорит
       с действием за внимание. */
    filter: drop-shadow(0 0 2px rgba(var(--color-accent-rgb), 0.35));
    flex: none;
}

/* На телефоне счётчик — своей строкой под словом, выровненный по тексту, а
   не по иконке: в одну строку «Разбор | основано на 2 фактах из вашей
   карьеры» на 375px не помещается, и перенос начинал вторую строку с
   вертикальной черты-разделителя. Разделитель нужен только в одной строке. */
.ai-mark__refs {
    flex-basis: 100%;
    padding-left: 22px; /* иконка 16px + зазор 6px */
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0;
}
@media (min-width: 600px) {
    .ai-mark__refs {
        flex-basis: auto;
        padding-left: 6px;
        border-left: 1px solid var(--color-border);
    }
}

/* ============================================================
   ui_quota_meter — остаток месячной квоты платной операции
   (директива 07.09: ёмкостью владеет подписка, темпа нет —
   показываем остаток). Счётные ячейки: квота штучная, и «2 из 4»
   квадратами читается быстрее процентной полосы. Оставшиеся —
   залитые, потраченные — пустые контуры.
   ============================================================ */
.quota-meter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.quota-meter__cells {
    display: inline-flex;
    gap: 3px;
    flex: none;
}

.quota-meter__cell {
    width: 7px;
    height: 7px;
    border: 1px solid var(--color-border-strong);
    border-radius: 1px;
    background: transparent;
}

.quota-meter__cell--left {
    background: var(--color-text-soft);
    border-color: var(--color-text-soft);
}

/* Полоса остатка при лимите больше 12 — тот же градиент продукта, что у
   ui_stat_bar; заполнена доля оставшегося. */
.quota-meter__bar { flex: none; display: block; width: 56px; height: 6px; border-radius: 999px; background: var(--color-border-soft, var(--color-border)); overflow: hidden; }
.quota-meter__bar > i { display: block; height: 100%; width: calc(var(--pct, 0) * 1%); border-radius: inherit; background: var(--gradient-progress); }
.quota-meter--low .quota-meter__bar > i { background: var(--color-warning); }
/* Лимит количества заполнен — ячейки и текст тоном предупреждения: это
   причина погашенной кнопки рядом, а не отказ системы. */
.quota-meter--full .quota-meter__cell--left { background: var(--color-warning); border-color: var(--color-warning); }
.quota-meter--full .quota-meter__text { color: var(--color-warning); }
/* Лимит количества — строкой текста: причина с путём длиннее остатка
   квоты, и во флекс-ряду ячейки, текст и ссылка разъезжались по трём
   строкам. Текстом строка переносится по словам. */
.quota-meter--count { display: block; white-space: normal; }
.quota-meter--count > .quota-meter__text { white-space: normal; }
.quota-meter--count > .quota-meter__cells { display: inline-flex; vertical-align: 1px; margin-right: var(--space-2); }
.quota-meter--count > .quota-meter__label { margin-right: 4px; }
.quota-meter--count > .quota-meter__cta { margin-left: var(--space-2); white-space: nowrap; }

.quota-meter__label {
    color: var(--color-text-soft);
}

.quota-meter__label::after {
    content: ":";
}

/* low — остаток на одну операцию: тон предупреждения на ячейках и
   тексте, но без alert-рамок — это ещё не отказ. */
.quota-meter--low .quota-meter__cell--left {
    background: var(--color-warning);
    border-color: var(--color-warning);
}

.quota-meter--low .quota-meter__text {
    color: var(--color-warning);
}

/* exhausted — все ячейки пустые говорят сами за себя; текст в тоне
   danger, рядом — путь к тарифам. */
.quota-meter--exhausted .quota-meter__text {
    color: var(--color-danger);
}

.quota-meter__cta {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.quota-meter__cta:hover {
    color: var(--color-accent-deep);
}

.quota-meter--unlimited .quota-meter__text {
    color: var(--color-text-muted);
}

/* Неизвестный остаток — справка того же веса, что и безлимит: это не тревога
   (работа всё равно пойдёт, гейты в этом случае пропускают), а честное «сейчас
   не знаем». Warning-тон здесь обещал бы отказ, которого не будет. */
.quota-meter--unknown .quota-meter__text {
    color: var(--color-text-muted);
}

/* Не входит в тариф — условие, а не авария: месяц ничего не вернёт, и красный
   тон рядом с живыми кнопками читался бы ошибкой. Решение — ссылка на тарифы. */
.quota-meter--locked .quota-meter__text {
    color: var(--color-text-muted);
}

/* Постановки: на карте — под шапкой, тихой строкой справочного ряда;
   на answers — над лентой вопросов. Отступы места, не компонента. */
.career-quota {
    margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}

.answers-quota {
    margin: 0 0 var(--space-4);
}

/* ============================================================================
   ui_subscription_locked — глобальный «функция требует подписки».
   ============================================================================
   Используется ВО ВСЕХ разделах платформы. Два варианта:
   - .subscription-locked--page    : full-page hero placeholder
   - .subscription-locked--banner  : inline-row для секций workspace'а

   Tone — accent (не coral!): это не ошибка / red_flag, а call-to-upgrade. */
.subscription-locked {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* === Page variant === */
.subscription-locked--page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    max-width: 560px;
    margin: clamp(2rem, 6vw, 4rem) auto;
    background: linear-gradient(180deg,
        rgba(var(--color-accent-rgb, 99 102 241), 0.04) 0%,
        var(--color-surface) 70%);
    border-color: rgba(var(--color-accent-rgb), 0.22);
}
.subscription-locked__icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}
.subscription-locked__eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.subscription-locked__title {
    margin: 0;
    font-family: var(--font-display, var(--font-body));
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.subscription-locked__feature {
    margin: 0;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--color-text);
}
.subscription-locked__reason {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    max-width: 50ch;
}
.subscription-locked__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.subscription-locked__back {
    font-size: 0.875rem;
    text-decoration: none;
}
.subscription-locked__back:hover { text-decoration: underline; }

/* === Banner variant === */
.subscription-locked--banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--color-accent-rgb), 0.24);
    border-left: 3px solid var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.04);
}
.subscription-locked__icon--inline {
    width: 32px;
    height: 32px;
    margin-bottom: 0;
    flex: none;
}
.subscription-locked__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.subscription-locked__banner-title {
    margin: 0;
    font-weight: 600;
    color: var(--color-text);
}
.subscription-locked__banner-cta {
    flex: none;
    align-self: center;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}
.subscription-locked__banner-cta:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .subscription-locked--banner { flex-wrap: wrap; }
    .subscription-locked__banner-cta { align-self: flex-start; }
}

/* =====================================================================
   Billing pages (/app/profile/billing/*)
   Editorial-magazine direction: large typography, generous whitespace,
   accent left-rail на current-plan, cinematic success-state с
   stagger reveal. Все цвета — через токены.
   ===================================================================== */

/* Billing overview: header + plans-grid. */
.billing-section__head {
    /* margin-top снят — складывался с page-shell gap в 3rem провал под H1.
       Ин­тер-секционный ритм — page-shell gap; head→таблица держим тайтово. */
    margin-bottom: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.billing-section__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.billing-section__lead { margin: 0; }

/* Plans-grid. Стек до 1024px, дальше три в ряд: в две колонки третий
   тариф (у платящих чаще всего текущий) оставался сиротой во втором ряду. */
.billing-plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: stretch;
}
@media (min-width: 768px) {
    .billing-plans { grid-template-columns: 1fr; gap: var(--space-5); }
}
.billing-plans__cell {
    position: relative;
    display: flex;
    flex-direction: column;
}
.billing-plans__cell > .pricing-card { height: 100%; }

/* Current-plan badge: floating accent pill сверху-слева карточки.
   Сигнал «это ваш текущий тариф» без визуального шума на самой
   pricing-card. */
.billing-plans__current-badge {
    position: absolute;
    top: -0.65rem;
    left: var(--space-3);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent-text);
    background: var(--color-accent);
    border-radius: 999px;
    box-shadow: 0 4px 14px -6px rgba(var(--color-accent-rgb), 0.55);
    font-variant-numeric: tabular-nums;
}
.billing-plans__cell--current .pricing-card {
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}

/* ----- Checkout (`/app/profile/billing/checkout`) -------------------- */
/* Карту человек вводит на странице банка: здесь страна оплаты, период и
   согласие на автосписание. */

/* Grid: mobile = стек, desktop = форма (3fr) + сводка (2fr). */
.billing-checkout__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-4);
}
@media (min-width: 900px) {
    .billing-checkout__grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: flex-start;
    }
}
.billing-checkout__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* Страна оплаты: select и «Показать цену» в ряд на широком экране. */
.billing-checkout__country {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
@media (min-width: 600px) {
    .billing-checkout__country {
        flex-direction: row;
        align-items: flex-end;
    }
    .billing-checkout__country .field { flex: 1 1 auto; }
}

.billing-checkout__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.billing-checkout__terms {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-height: 44px;
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.45;
    cursor: pointer;
}
.billing-checkout__terms input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    flex: none;
    accent-color: var(--color-accent);
}
.billing-checkout__consent-hint {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
}
.billing-checkout__secure-note {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}
.billing-checkout__secure-note .icon { color: var(--color-text-muted); }

/* Order summary: sticky на desktop, чтобы во время заполнения формы
   пользователь видел сумму. На mobile — обычный inline-блок выше form'ы. */
.billing-checkout__summary {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-accent) 4%, var(--color-surface)) 0%,
        var(--color-surface) 60%);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
@media (min-width: 900px) {
    .billing-checkout__summary { position: sticky; top: var(--space-4); }
}
.billing-checkout__summary-eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.billing-checkout__summary-plan {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.billing-checkout__summary-tagline { margin: 0; font-size: 0.875rem; line-height: 1.4; }
.billing-checkout__summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
}
.billing-checkout__summary-row--total {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    border-top-width: 2px;
    border-top-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}
.billing-checkout__summary-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
}
.billing-checkout__summary-amount strong { font-size: 1.375rem; font-weight: 700; }
.billing-checkout__summary-row--total .billing-checkout__summary-amount strong { font-size: 1.7rem; }
.billing-checkout__summary-unit { font-size: 0.8125rem; color: var(--color-text-muted); }

/* ----- Order (`/app/profile/billing/orders/{id}`) -------------------- */
/* Одна страница на весь путь оплаты: переход в банк, ожидание, итог.
   Действия — над сводкой: человек пришёл сюда за следующим шагом. */

.billing-order__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.billing-order__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.billing-order__retry { display: contents; }
.billing-order__note {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}
.billing-order__summary {
    margin: var(--space-5) 0 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 36rem;
}
.billing-order__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    min-height: 44px;
    font-size: 0.9375rem;
}
.billing-order__row + .billing-order__row {
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}
.billing-order__row dt { color: var(--color-text-muted); }
.billing-order__row dd {
    margin: 0;
    color: var(--color-text);
    text-align: right;
    overflow-wrap: anywhere;
}
.billing-order__amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ----- Success (`/app/profile/billing/success`) ---------------------- */

.billing-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}
.billing-success__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: 36rem;
}
.billing-success__eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-success);
    opacity: 0;
    animation: bs-fade 600ms 100ms ease-out forwards;
    font-variant-numeric: tabular-nums;
}
/* Animated check — кольцо рисуется stroke-dash, галочка тоже. Slow и
   важный момент, не cutesy bounce. */
.billing-success__check {
    display: inline-flex;
    width: 64px;
    height: 64px;
    color: var(--color-success);
    opacity: 0;
    transform: scale(0.85);
    animation: bs-pop 700ms 250ms cubic-bezier(0.2, 0.7, 0.3, 1.2) forwards;
}
.billing-success__check-ring {
    stroke: currentColor;
    stroke-dasharray: 176;
    stroke-dashoffset: 176;
    animation: bs-draw 650ms 350ms ease-out forwards;
}
.billing-success__check-tick {
    stroke: currentColor;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: bs-draw 350ms 700ms ease-out forwards;
}
@keyframes bs-draw { to { stroke-dashoffset: 0; } }
@keyframes bs-pop { to { opacity: 1; transform: scale(1); } }
@keyframes bs-fade { to { opacity: 1; } }
@keyframes bs-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.billing-success__heading {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    opacity: 0;
    animation: bs-rise 700ms 500ms ease-out forwards;
}
.billing-success__heading-kicker {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.billing-success__heading-brand {
    font-family: var(--font-display, var(--font-sans));
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-teal, var(--color-accent)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--color-accent); /* fallback */
}
.billing-success__sub {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-soft);
    opacity: 0;
    animation: bs-rise 700ms 700ms ease-out forwards;
}

.billing-success__unlocked {
    margin-top: var(--space-5);
    max-width: 36rem;
    text-align: left;
    opacity: 0;
    animation: bs-rise 700ms 900ms ease-out forwards;
}
.billing-success__unlocked-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.billing-success__unlocked-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.billing-success__unlocked-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 0.9375rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(8px);
    animation: bs-rise 500ms ease-out forwards;
    /* Stagger: каждая строка появляется на 100ms позже предыдущей. */
    animation-delay: calc(1100ms + var(--idx, 0) * 120ms);
}
.billing-success__unlocked-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
    color: var(--color-accent);
    flex: none;
}

.billing-success__cta {
    margin-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    opacity: 0;
    animation: bs-rise 700ms 1700ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .billing-success__eyebrow,
    .billing-success__check,
    .billing-success__heading,
    .billing-success__sub,
    .billing-success__unlocked,
    .billing-success__unlocked-item,
    .billing-success__cta {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .billing-success__check-ring,
    .billing-success__check-tick {
        stroke-dashoffset: 0;
        animation: none;
    }
}

/* Billing — payment + subscription history tables. */
.billing-section__head--space {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.billing-table-wrap {
    overflow-x: auto;
    margin-top: var(--space-3);
}
.billing-table { width: 100%; min-width: 600px; }
.billing-table th, .billing-table td { padding: 0.85rem 1rem; }
.billing-table .num { text-align: right; }
.billing-table .mono { font-family: var(--font-mono); }
.billing-table__action {
    font-size: 0.875rem;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}
.billing-table__action:hover { color: var(--color-accent); text-decoration-style: solid; }

/* Pricing-deck footer (повторение лендинга в кабинете). */
.pricing-deck--footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: var(--space-3);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Billing — overview tab (hero current-plan card). */
.billing-overview {
    margin-top: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.billing-overview--active {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-accent) 5%, var(--color-surface)) 0%,
        var(--color-surface) 55%);
    border-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-border));
}
.billing-overview--free {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-sage) 6%, var(--color-surface)) 0%,
        var(--color-surface) 60%);
    border-color: color-mix(in srgb, var(--color-sage) 28%, var(--color-border));
}
.billing-overview__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.billing-overview__heading {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.billing-overview__eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.billing-overview__plan-name {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.billing-overview__plan-tagline { margin: 0; font-size: 0.9375rem; }
.billing-overview__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.billing-overview__status--active {
    background: color-mix(in srgb, var(--color-success) 16%, transparent);
    color: var(--color-success);
}
.billing-overview__status--free {
    background: color-mix(in srgb, var(--color-sage) 16%, transparent);
    color: var(--color-sage);
}
.billing-overview__status--expiring {
    background: color-mix(in srgb, var(--color-warning) 16%, transparent);
    color: var(--color-warning);
}
.billing-overview__status--grace,
.billing-overview__status--cancelled {
    background: color-mix(in srgb, var(--color-coral) 16%, transparent);
    color: var(--color-coral);
}

.billing-overview__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
}
.billing-overview__price strong {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}
.billing-overview__price-unit { font-size: 1.25rem; font-weight: 600; }
.billing-overview__price-period { font-size: 0.9375rem; font-family: var(--font-sans); }

.billing-overview__facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}
@media (min-width: 640px) {
    .billing-overview__facts { grid-template-columns: 1fr 1fr; }
}
.billing-overview__fact { display: flex; flex-direction: column; gap: 0.25rem; }
.billing-overview__fact-label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.billing-overview__fact-value {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    font-weight: 500;
}
.billing-overview__fact-icon { color: var(--color-text-muted); }

.billing-overview__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Free state — упрощённый layout */
.billing-overview__free-lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
}
.billing-overview__upgrade-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.billing-overview__upgrade-features li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9375rem;
}
.billing-overview__upgrade-features .icon { color: var(--color-sage); flex: none; }

/* Соглашение об автопродлении на обзоре (docs/proposals/billing-orders.md
   §11): формы решений, пояснения, отложенная смена. Базовые стили — под
   375px; кнопки и чекбоксы держат 44px через свои компоненты. */
.billing-overview__note {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}
.billing-overview__warn {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-warning) 12%, transparent);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.billing-overview__pay {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}
.billing-overview__facts dd { margin: 0; }
.billing-overview__change {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-border) 30%, transparent);
}
.billing-overview__change-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
}
.billing-overview__change-body { margin: 0; line-height: 1.5; }
.billing-overview__actions form { display: contents; }

/* Платежи — ui_payment_row: на телефоне сумма и состояние справа от
   названия, дата, карта и номер строкой ниже; шире 640px — одна строка. */
.payment-list {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}
.payment-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.payment-row__main { flex: 1 1 12rem; min-width: 0; }
.payment-row__title { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.payment-row__link { color: inherit; text-decoration: none; }
.payment-row__link:hover, .payment-row__link:focus-visible { color: var(--color-accent); text-decoration: underline; }
.payment-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
}
.payment-row__number { font-variant-numeric: tabular-nums; }
.payment-row__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    /* Высота ссылки на чек (44px) у всех строк: иначе строки без чека
       ниже, и ритм ленты скачет. */
    min-height: 44px;
}
.payment-row__amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.payment-row__receipt {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    font-size: 0.875rem;
}

/* ----- Оплата: плиты, факты, чек (переделка 24.10) -------------------- */
/* Все блоки оплаты — одна плита, как карточки аккаунта: белая, тонкая
   внутренняя рамка и мягкая тень. Тариф, карта, итог заказа, «чек» и форма
   оплаты различаются содержимым, а не рамкой. */
.billing-overview,
.billing-method,
.billing-upgrade,
.billing-summary,
.billing-receipt,
.billing-checkout__form {
    margin: 0;
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}
@media (min-width: 640px) {
    .billing-overview,
    .billing-method,
    .billing-upgrade,
    .billing-summary,
    .billing-receipt,
    .billing-checkout__form { padding: var(--space-5); }
}

/* Обзор и история — колонка для чтения: на 1440 плита во всю ширину
   держала три строки текста в полутора тысячах пикселей. */
.billing-page--narrow > :not(.page-head) { max-width: 46rem; }

/* Тариф. */
.billing-overview { display: flex; flex-direction: column; gap: var(--space-3); }
.billing-overview__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.billing-overview__heading { display: flex; flex-direction: column; gap: var(--space-1); }
.billing-overview__plan-name {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.billing-overview__plan-tagline { margin: 0; color: var(--color-text-muted); }
.billing-overview__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.billing-overview__price strong {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--color-text);
}
.billing-overview__lead { margin: 0; line-height: 1.5; }
.billing-overview__eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text-muted);
}
.billing-overview__state { margin: 0; }
.billing-overview__note { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); }
.billing-overview__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-1);
}
.billing-overview__actions form { display: contents; }
/* Телефон: решения — столбцом во всю ширину, как в формах кабинета;
   разная ширина двух кнопок подряд читается как случайная. */
@media (max-width: 639px) {
    .billing-overview__actions,
    .billing-upgrade__actions,
    .billing-order__actions { flex-direction: column; align-items: stretch; }
    .billing-overview__actions .btn,
    .billing-upgrade__actions .btn,
    .billing-order__actions .btn { width: 100%; justify-content: center; }
}

/* Списки платежей и событий — в плите, как остальные блоки оплаты. */
.billing-list {
    margin: 0;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}
@media (min-width: 640px) { .billing-list { padding: 0 var(--space-5); } }
.billing-list > li:last-child { border-bottom: 0; }
.billing-list > .payment-row,
.billing-list > .history-event { border-bottom-color: var(--color-border-soft); }

/* Выгода года на карточке тарифа: в кабинете период выбирает сервер, и
   подпись видна всегда, когда она есть. */
.billing-plans .pricing-card__savings { opacity: 1; height: auto; overflow: visible; }

/* Итог на телефоне — только тариф и сумма: страну и период человек
   выбирает строкой ниже, и повтор их в плите отодвигал выбор за экран. */
@media (max-width: 899px) {
    .billing-page--checkout .billing-summary__tagline,
    .billing-page--checkout .billing-summary .billing-facts { display: none; }
}

/* Долг по оплате: предупреждение и оплата другой картой — одним блоком с
   тоном состояния, внутри плиты тарифа. */
.billing-debt {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-warning) 9%, var(--color-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 28%, transparent);
}
.billing-debt--needs_card {
    background: color-mix(in srgb, var(--color-danger) 7%, var(--color-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 24%, transparent);
}
.billing-debt__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.billing-debt__text { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.billing-debt__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.billing-debt__body { margin: 0; line-height: 1.5; }
.billing-debt__deadline { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
.billing-debt__pay { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
@media (max-width: 639px) {
    .billing-debt__pay .btn { width: 100%; justify-content: center; }
}

/* Факты «подпись — значение»: обзор, итог заказа, чек, расчёт смены. */
.billing-facts {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.billing-facts__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border-soft);
    font-size: 0.9375rem;
}
.billing-facts__row dt { color: var(--color-text-muted); }
.billing-facts__row dd {
    margin: 0 0 0 auto;
    color: var(--color-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.billing-facts__credit { color: var(--color-success); }

/* Карта для оплаты. */
.billing-method { display: flex; flex-direction: column; gap: var(--space-2); }
.billing-method__eyebrow,
.billing-upgrade__eyebrow,
.billing-summary__eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text-muted);
}
.billing-method__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.billing-method__card {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.billing-method__card .icon { color: var(--color-text-muted); }
.billing-method__note { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }

/* Что откроет «Маршрут» — плита бесплатного. */
.billing-upgrade { display: flex; flex-direction: column; gap: var(--space-3); }
.billing-upgrade__title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; }
.billing-upgrade__price { margin: 0; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.billing-upgrade__price strong { color: var(--color-text); font-size: 1.125rem; font-weight: 600; }
.billing-upgrade__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.billing-upgrade__features li { display: flex; align-items: flex-start; gap: var(--space-2); line-height: 1.45; }
.billing-upgrade__features .icon { color: var(--color-success); flex: none; margin-top: 0.2rem; }
.billing-upgrade__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Последние платежи. */
.billing-recent { display: flex; flex-direction: column; gap: var(--space-1); }
.billing-recent__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.billing-recent__title { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.billing-recent__all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.9375rem;
}
.billing-recent .payment-list { margin-top: 0; }

/* История: месяцы. */
.billing-history { display: flex; flex-direction: column; gap: var(--space-5); }
.billing-history__month { display: flex; flex-direction: column; }
.billing-history__label {
    margin: 0 0 var(--space-1);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0;
}
.billing-history .payment-list { margin-top: 0; }

/* Значок строки списка (история оплаты): голый глиф в колонке постоянной
   ширины, а не плита на каждом пункте — плита в системе живёт в шапке
   секции. Платёж и событие делят одну колонку, поэтому их тексты начинаются
   с одного края. Тон — цвет глифа. */
.list-glyph {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text-muted);
}
.list-glyph--sage   { color: var(--color-sage); }
.list-glyph--amber  { color: var(--color-amber); }
.list-glyph--danger { color: var(--color-danger); }
.list-glyph--accent { color: var(--color-accent); }

/* Строка платежа со значком: значок, текст и сумма — три колонки на
   широком экране; на телефоне сумма уходит строкой под текст, не под значок. */
.payment-row--glyph {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
}
.payment-row--glyph > .list-glyph { grid-row: 1 / span 2; }
.payment-row--glyph > .payment-row__side { grid-column: 2; justify-content: flex-start; }
@media (min-width: 640px) {
    .payment-row--glyph { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
    .payment-row--glyph > .list-glyph { grid-row: auto; align-self: start; }
    .payment-row--glyph > .payment-row__side { grid-column: 3; justify-content: flex-end; }
}

/* Событие подписки в ленте — тише платежа: значок вместо суммы. */
.history-event {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.history-event__body { min-width: 0; }
.history-event__title { margin: 0; font-weight: 500; line-height: 1.4; }
.history-event__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Разделитель «·» стоит в зазоре слева от элемента, а не внутри него: у
   элемента, перенесённого в начало строки, точка оказывается за левым
   краем и обрезается, и строка не начинается с разделителя. */
.history-event__meta,
.payment-row__meta { overflow: hidden; column-gap: var(--space-4); }
.history-event__meta span,
.payment-row__meta span { position: relative; }
.history-event__meta span + span::before,
.payment-row__meta span + span::before {
    content: "·";
    position: absolute;
    right: 100%;
    width: var(--space-4);
    text-align: center;
}

/* Оформление и смена тарифа: итог — первым на телефоне, справа шире 900px. */
.billing-checkout__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: 0;
}
@media (min-width: 900px) {
    .billing-checkout__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
        grid-template-areas: "main summary";
        align-items: start;
        gap: var(--space-5);
    }
    .billing-checkout__main { grid-area: main; }
    .billing-checkout__summary { grid-area: summary; position: sticky; top: var(--space-4); }
}
.billing-checkout__main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.billing-checkout__field { display: flex; flex-direction: column; gap: var(--space-2); }
.billing-checkout__label { margin: 0; font-weight: 600; }
.billing-checkout__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.billing-checkout__hint { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--color-text-muted); }
.billing-checkout__what { margin: 0; line-height: 1.5; }
.billing-checkout__form { display: flex; flex-direction: column; gap: var(--space-3); }
.billing-checkout__secure {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.billing-summary { display: flex; flex-direction: column; gap: var(--space-2); }
.billing-summary__plan { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; }
.billing-summary__tagline { margin: 0 0 var(--space-2); font-size: 0.9375rem; color: var(--color-text-muted); }
.billing-summary__total {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-weight: 600;
}
.billing-summary__total strong {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Карточки выбора (ui_choice_card): период на оформлении. */
.choice-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 480px) { .choice-cards { grid-template-columns: 1fr 1fr; } }
.choice-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-height: 64px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 160ms var(--ease-out);
}
.choice-card:hover { box-shadow: inset 0 0 0 1px var(--color-border-strong, var(--color-border)); }
.choice-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.choice-card--active { box-shadow: inset 0 0 0 2px var(--color-accent); }
.choice-card__mark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--color-border-strong, var(--color-border));
}
.choice-card--active .choice-card__mark {
    box-shadow: inset 0 0 0 6px var(--color-accent);
}
.choice-card__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.choice-card__title { font-weight: 600; }
.choice-card__note { font-size: 0.8125rem; color: var(--color-text-muted); }
.choice-card__value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.choice-card__badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
    vertical-align: 0.1em;
}

/* «Чек» заказа. */
.billing-receipt { display: flex; flex-direction: column; gap: var(--space-3); max-width: 32rem; }
.billing-receipt__head { display: flex; align-items: center; gap: var(--space-3); }
.billing-receipt__heading { min-width: 0; }
.billing-receipt__number { margin: 0; font-weight: 600; }
.billing-receipt__date { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
.billing-receipt__amount {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.billing-receipt__link { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; }
.billing-order__body { margin-top: 0; }

/* Тарифы: вводная строка и переключатель периода. */
.billing-plans__bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
@media (min-width: 1024px) {
    .billing-plans__bar { flex-direction: row; align-items: center; justify-content: space-between; }
}
.billing-plans__lead { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--color-text-muted); max-width: 40rem; }
/* Переключатель периода не сжимается: сжатый, он обрезал «За год −20%»
   у правого края. */
.billing-plans__bar > :not(.billing-plans__lead) { flex-shrink: 0; align-self: flex-start; }
@media (min-width: 1024px) { .billing-plans__bar > :not(.billing-plans__lead) { align-self: center; } }
@media (min-width: 1024px) {
    .billing-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* === Целевое резюме под рекрутера — форма выбора (/target/new, Task 5) ====== */
.target-new {
    max-width: 56rem;
    margin-inline: auto;
}
.target-new__suggested {
    margin-block: var(--space-5) var(--space-6);
}
.target-new__suggested-label {
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.target-new__suggested-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.target-new__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.target-new__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.target-new__context {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
}
.target-new__context[open] {
    padding-bottom: var(--space-4);
}
.target-new__context-summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-soft);
    min-height: 44px;
    display: flex;
    align-items: center;
}
.target-new__context[open] .target-new__context-summary {
    margin-bottom: var(--space-3);
}
.target-new__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.target-new__meta {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.target-new__existing {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-soft);
}
.target-new__existing-head {
    margin: 0 0 var(--space-4);
    font-size: 1.0625rem;
}
.target-new__existing-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.target-new__existing-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.target-new__existing-role {
    font-weight: 600;
    color: var(--color-text);
}
.target-new__back {
    margin-top: var(--space-6);
    text-align: center;
}

/* Target Resume CTA — editorial hero на табе «Обзор» workspace'а (Task 13).
   Зеркалит overview-hero recipe (triple-layer accent gradient + soft border)
   + billing-overview eyebrow/display scale. Пусто → приглашение «Создать»;
   есть версии → список карточек + secondary CTA «Создать ещё». */
.target-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: clamp(1.4rem, 2.4vw, 2rem);
    background:
        radial-gradient(120% 60% at 100% 0%, rgba(var(--color-accent-rgb), 0.10) 0%, transparent 55%),
        linear-gradient(180deg, rgba(var(--color-bg-rgb), 0.55) 0%, rgba(var(--color-bg-rgb), 0.85) 100%),
        var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 18px -10px rgba(0, 0, 0, 0.45);
    isolation: isolate;
}
.target-cta__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.target-cta__eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.target-cta__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3.2vw, 1.75rem);
    line-height: 1.15;
    color: var(--color-text);
}
.target-cta__lead {
    margin: 0;
    max-width: 56ch;
    color: var(--color-text-muted);
}
.target-cta__count {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.target-cta__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.target-cta__item-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.target-cta__item-link:hover,
.target-cta__item-link:focus-visible {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}
.target-cta__item-role {
    flex: 1 1 auto;
    font-weight: 600;
}
.target-cta__item-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.target-cta__item-archetype::after {
    content: '·';
    color: var(--color-border);
}
.target-cta__item-chev {
    display: inline-flex;
    color: var(--color-text-muted);
}
.target-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
@media (max-width: 480px) {
    .target-cta__item-link {
        flex-wrap: wrap;
    }
    .target-cta__item-meta {
        flex-basis: 100%;
    }
}

/* ─── Целевое резюме — страница готового артефакта (Task 8) ─────────────────
   Mobile-first: одна колонка, sidebar — bottom-sheet (открывается sticky CTA).
   От 768px — 2 колонки со sticky-sidebar'ом; CTA и sheet-chrome скрыты. */
.target-view__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.target-view__sheet-cta {
    position: fixed;
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    z-index: 40;
    box-shadow: var(--shadow-lg);
}
.target-sheet-lock {
    overflow: hidden;
}
/* Sidebar как bottom-sheet на mobile. */
.target-view__sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform 0.24s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.target-view__sidebar.is-open {
    transform: translateY(0);
}
.target-view__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.target-view__sheet-title {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.target-view__sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-soft);
    cursor: pointer;
}
.target-view__sheet-close:hover {
    background: var(--color-surface-overlay);
    color: var(--color-text);
}
.target-view__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-soft);
    font-size: 0.875rem;
    text-decoration: none;
}
.target-view__back:hover {
    color: var(--color-accent);
}
.target-view__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-soft);
}
.target-view__panel:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.target-view__panel-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.target-view__role {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
}
.target-view__role-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-soft);
    font-size: 0.875rem;
}
.target-view__versions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.target-view__version {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-soft);
}
.target-view__version:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.target-view__version.is-active {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.08);
    color: var(--color-text);
}
.target-view__version-role {
    font-weight: 600;
    font-size: 0.9375rem;
}
.target-view__version-meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.target-view__empty {
    margin: 0;
    font-size: 0.875rem;
}
.target-view__template-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.target-view__templates {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.target-view__template {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    padding-left: calc(var(--space-6) + var(--space-2));
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.target-view__template input {
    position: absolute;
    left: var(--space-3);
    top: var(--space-3);
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
}
.target-view__template.is-active {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.06);
}
.target-view__template:focus-within {
    border-color: var(--color-accent);
}
.target-view__template-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
}
.target-view__template-desc {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.target-view__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.target-view__share-hint {
    margin: 0;
    font-size: 0.8125rem;
}
.target-view__share-active {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.target-view__share-state {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-success, var(--color-text));
}
.target-view__share-url {
    display: flex;
    gap: var(--space-1);
    align-items: stretch;
}
.target-view__share-input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted, var(--color-surface));
    color: var(--color-text);
}
.target-view__share-copy {
    flex: 0 0 auto;
}

/* Main column. */
.target-view__main {
    min-width: 0;
}
.target-view__doc {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}
.target-view__divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-4);
}
.target-view__divider::before,
.target-view__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}
.target-view__divider-label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.target-view__cover {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.target-view__cover-subject {
    margin: 0 0 var(--space-4);
    font-size: 1.25rem;
    color: var(--color-text);
}
.target-view__cover-body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.target-view__doc-foot {
    margin-top: var(--space-5);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .target-view__grid {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-6);
    }
    .target-view__sheet-cta,
    .target-view__sheet-head {
        display: none;
    }
    .target-view__sidebar {
        position: sticky;
        top: var(--space-5);
        flex: 0 0 18rem;
        width: 18rem;
        max-height: calc(100vh - var(--space-8));
        transform: none;
        border-radius: var(--radius-lg);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-sm);
        padding: var(--space-5);
    }
    .target-view__main {
        flex: 1 1 auto;
    }
}

/* ─── Anonymous share-view (Task 12) — /r/{token} ─────────────────────────
   Read-only публичный просмотр: только документ (без sidebar'а) + sticky
   Persium-баннер снизу. Mobile-first; только токены из :root. */
.share-view {
    /* Баннер теперь sticky (в потоке) — резервировать место фиксированной панели
       больше не нужно; хватает небольшого низа. Сверху — воздух от шапки сайта:
       лист — первое, что видит работодатель, и прилипать к панели он не
       должен. */
    padding-top: var(--space-6);
    padding-bottom: var(--space-5);
}
/* Лист публичной страницы — тот же .tpreview__sheet, что в редакторе; поля
   листа тянутся от телефона к монитору, как у бумаги. На узком экране лист
   встаёт во всю ширину без своей рамки: рамка в 375px съедала бы место
   текста. */
.target-view__sheet .tpreview__sheet {
    --sheet-pad: clamp(1.25rem, 5vw, 3.25rem);
    max-width: none;
    padding: var(--sheet-pad);
}
@media (max-width: 599px) {
    .share-view { padding-top: var(--space-3); }
    .target-view__sheet .tpreview__sheet { border-radius: var(--radius-md); }
}
.share-view__doc {
    max-width: 52rem;
    margin: 0 auto;
}
.share-view--gone {
    display: flex;
    justify-content: center;
    padding-top: var(--space-8);
}
.share-view__banner {
    /* sticky + full-bleed: полоса залипает у низа вьюпорта, пока крутишь резюме,
       а на самом низу «приземляется» над футером (в потоке, не перекрывает его).
       width:100vw + margin-left:calc(50%-50vw) выносит её на всю ширину, хотя она
       лежит внутри .container (max-width + padding) — иначе была бы «не до конца». */
    position: sticky;
    bottom: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}
.share-view__banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Печать публичной/owner-страницы резюме → чистый PDF: прячем весь chrome, лист
   на всю ширину, тёмная тема принудительно светлеет (бумага = белая, текст —
   тёмный). Кнопка «Скачать PDF» дергает window.print(). */
@media print {
    .site-header,
    .site-footer,
    .app-topbar,
    .app-sidebar,
    .bottom-nav,
    .nav-progress,
    .preview-banner,
    .security-banner,
    .maintenance-banner,
    .site-notice,
    .share-view__banner,
    .flash { display: none !important; }
    .container { max-width: none; margin: 0; padding: 0; }
    .share-view { padding: 0; }
    .target-view__sheet .tpreview__sheet {
        border: 0;
        box-shadow: none;
        border-radius: 0;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
    /* «Скачать PDF» на публичной странице печатает браузером: страница без
       полей (именованная — остальная печать сайта не затронута), поля рисует
       сам лист и повторяет их на каждой странице. Иначе тёмный лист выходил
       прямоугольником в белой рамке. */
    /* Именованная страница — на body: на самом листе она начиналась бы с
       разрыва, и первая страница PDF выходила пустой. */
    body:has(.share-view) { page: share-sheet; }
    .target-view__sheet .tdoc--bleed { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
    .share-view .target-view__doc-foot { display: none; }
    body { background: #fff; }
    /* Тёмный лист — светлым текстом: чернила на нём были бы невидимы. */
    .tdoc:where(:not(.tdoc--dark)),
    .tdoc:where(:not(.tdoc--dark)) *,
    .target-view__doc-foot { color: #111 !important; }
}

/* Печать резюме для PDF (print.html → .print-body) — ВСЕГДА тёмный текст на белой
   бумаге, независимо от темы сайта и от того, применил ли Chromium data-theme.
   Раньше при тёмной теме PDF выходил «белым на белом». --resume-paper-ink
   (#1A1A1A) не зависит от темы. Accent-элементы (eyebrow/bar) сохраняют accent. */
/* print.html НЕ подключает app.js, поэтому глобальный page-load fade
   (body{opacity:0} → снимается классом is-ready на DOMContentLoaded) здесь
   НИКОГДА не снимался → весь лист оставался opacity:0 (невидим на любом фоне,
   не только «белое на белом»). Форсим непрозрачность. Плюс background:#fff
   !important гасит aurora-градиенты :root[data-theme="light"] body, чья
   специфичность (0,2,1) иначе перебивает .print-body и красит печатный лист. */
.print-body {
    opacity: 1;
    background: #fff !important;
    background-image: none !important;
}
/* Chromium/Gotenberg по умолчанию не печатает фоны и accent-заливки — без exact
   залитая боковая колонка sidebar-шаблона и accent-тики ушли бы в белое. */
/* Тёмный лист (tdoc--dark) из принудительного чернила исключён: его цвета
   заданы явно в самом шаблоне, а чернила на тёмном фоне сделали бы текст
   невидимым. :where — без веса: частные исключения шаблонов ниже по файлу
   обязаны и дальше перебивать эти общие правила. */
.print-body .tdoc,
.print-body .tdoc * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.print-body .tdoc:where(:not(.tdoc--dark)),
.print-body .tdoc:where(:not(.tdoc--dark)) * {
    color: var(--resume-paper-ink) !important;
}
.print-body .tdoc:where(:not(.tdoc--dark)) .tdoc__headline,
.print-body .tdoc:where(:not(.tdoc--dark)) .tdoc__lead,
.print-body .tdoc:where(:not(.tdoc--dark)) .tdoc__meta,
.print-body .tdoc:where(:not(.tdoc--dark)) .tdoc__role-period,
.print-body .tdoc:where(:not(.tdoc--dark)) .tdoc__edu-meta { color: var(--resume-paper-ink-soft) !important; }
.print-body .tdoc:where(:not(.tdoc--dark)) .tdoc__eyebrow,
.print-body .tdoc:where(:not(.tdoc--dark)) .tdoc__bar {
    color: var(--target-resume-accent, var(--color-accent)) !important;
}

.share-view__banner-text {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ─── Шаблоны резюме (tdoc) — Classic / Modern / ATS (Task 8) ──────────────
   Все три рендерят одни и те же поля, отличаются типографикой/раскладкой.
   Только токены из :root — печатный слой не зависит от web-font'ов. */
/* tdoc-scope — прозрачный wrapper (resume_doc partial), несущий per-snapshot
   accent через инлайн --target-resume-accent. display:contents — не создаёт
   собственного бокса, accent-переменная каскадирует в .tdoc без влияния на
   раскладку (view/print/preview-fragment/export). */
.tdoc-scope {
    display: contents;
}
.tdoc {
    color: var(--color-text);
    line-height: 1.55;
}
/* Hero spacing — top padding на header резюме. Активируется в любом
   контексте (страница артефакта, print-view, share-view, library
   thumbnail). На library thumbnail (3:4 crop top-portion) этот padding
   формирует «обложку»: имя+headline+meta дышат, а не лепятся к top edge.
   В full-page view не отвлекает — A4 имеет естественные top-margins. */
.tdoc__head {
    padding-top: var(--space-4);
}
/* Имя — h1, когда документ и есть страница (печать, публичная ссылка), и
   абзац, когда документ встроен в страницу кабинета (у неё свой h1). Вид не
   должен зависеть от тега: базовые свойства заголовка заданы здесь явно,
   шаблоны документа уточняют их своими правилами. */
.tdoc__name {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.04em;
}
.tdoc__headline {
    margin: var(--space-1) 0 0;
    color: var(--color-text-soft);
}
.tdoc__section {
    margin-top: var(--space-5);
}
.tdoc__eyebrow,
.tdoc__heading,
.tdoc__bar {
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}
.tdoc__lead {
    margin: 0 0 var(--space-3);
    color: var(--color-text-soft);
}
.tdoc__list,
.tdoc__bullets,
.tdoc__plain {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    color: var(--color-text-soft);
}
.tdoc__plain {
    list-style: none;
    padding-left: 0;
}
.tdoc__bullets li,
.tdoc__list li,
.tdoc__plain li {
    margin-bottom: var(--space-1);
}
/* Опыт/проекты — grid «title слева, период справа» (классический признак
   профессиональной вёрстки резюме). Работает с обоими порядками DOM (classic
   эмитит период ДО title, остальные — после): явные grid-row/column. Буллеты
   и описания растягиваются на всю ширину. */
.tdoc__exp {
    margin-top: var(--space-4);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.tdoc__exp-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 1rem;
    color: var(--color-text);
}
/* На узком экране период идёт СВОЕЙ строкой под заголовком — тем же приёмом,
   что уже применён к узкой колонке sidebar-варианта ниже. Рядом с заголовком он
   отнимал у него почти половину строки, и «Технический директор (CTO) · AIRBA
   Marketplace» ломался на три строки при пустом правом поле. */
.tdoc__exp-period {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
    margin: 2px 0 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--resume-paper-ink-muted);
}
@media (min-width: 600px) {
    .tdoc__exp {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-4);
        align-items: baseline;
    }
    .tdoc__exp-period {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        text-align: right;
        margin: 0;
    }
}
.tdoc__exp > p:not(.tdoc__exp-period),
.tdoc__exp > ul {
    grid-column: 1 / -1;
}
/* Две строки между заголовком записи и буллетами: чем человек управлял и где.
   Регистры разные намеренно. Масштаб — тот же моноширинный, что у дат справа:
   «Мар 2021 — Фев 2022» и «команда 70 · P&L» суть факты одного сорта, и набранные
   одинаково они читаются одной справкой, а не началом прозы (набор антиквой в
   размер буллетов давал именно это). Работодатель — курсивная антиква: это фраза
   из резюме, а не цифры. */
/* Подпись группы буллетов («Зона ответственности» / «Результаты»). Тише
   заголовка роли и заметнее самих буллетов: она их разделяет, а не спорит с
   ними за внимание. Появляется только когда групп две — см. tdoc_exp_bullets.

   Отступ сверху заметно больше, чем снизу: замер показал обратное (8px над
   подписью против 10px до её списка), и подпись зрительно принадлежала
   предыдущему блоку — «Результаты» читались как хвост строки о компании.
   Заголовок обязан липнуть к тому, что подписывает. Нижний зазор гасится у
   самого списка — правилом ниже, иначе его собственный margin-top вернул бы
   прежнюю картину. */
.tdoc__bullets-label {
    margin: var(--space-4) 0 0;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--resume-paper-ink-muted, var(--color-text-soft));
}
.tdoc__bullets-label + .tdoc__bullets {
    margin-top: 2px;
}
.tdoc__exp-scope {
    margin: 3px 0 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--resume-paper-ink-muted, var(--color-text-soft));
    font-variant-numeric: tabular-nums;
}
.tdoc__exp-company-context {
    margin: 2px 0 0;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--resume-paper-ink-muted, var(--color-text-soft));
}
.tdoc__edu {
    margin: 0 0 var(--space-2);
    color: var(--color-text-soft);
}
.tdoc__muted {
    color: var(--color-text-muted);
}
.tdoc__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
/* Чипы навыков — paper-safe цвета (лист всегда светлый, независимо от темы UI),
   мягкие пилюли по умолчанию; каждый шаблон re-skin'ит под свою айдентику. */
.tdoc__chips li {
    padding: 2px var(--space-3);
    border: 1px solid color-mix(in srgb, var(--resume-paper-ink) 16%, transparent);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--resume-paper-ink-soft);
}
.tdoc__contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--color-text-soft);
    font-size: 0.88rem;
}
.tdoc__contacts li {
    margin-bottom: var(--space-1);
}
.tdoc__meta {
    margin: var(--space-2) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
/* Accent-middot между контактами: «Алматы · email · phone» вместо голых
   пробелов. ATS-шаблон не затрагивается — его meta без <span>'ов (пайпы). */
.tdoc__meta span:not(:first-child)::before {
    content: "·";
    margin-right: var(--space-2);
    color: var(--target-resume-accent, var(--color-text-muted));
}

/* ── Classic — «библиотечный» serif-документ: двойное правило под шапкой,
   italic-подзаголовок, mono-eyebrow с хвостовой hairline, даты справа. ── */
.tdoc--classic {
    font-family: var(--font-classic-serif);
}
.tdoc--classic .tdoc__head {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--resume-paper-ink);
    position: relative;
}
/* Второе, тонкое правило на 4px ниже основного — классическая editorial-пара. */
.tdoc--classic .tdoc__head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: color-mix(in srgb, var(--resume-paper-ink) 40%, transparent);
}
.tdoc--classic .tdoc__name {
    font-family: var(--font-classic-serif);
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    line-height: 1.08;
    letter-spacing: 0.01em;
}
.tdoc--classic .tdoc__headline {
    font-style: italic;
    font-size: 1.02rem;
}
/* Заголовок раздела — капитель антиквой, а не моноширинный текст в 11px:
   мелкая моно-подпись не держала иерархию над абзацами того же цвета. */
.tdoc--classic .tdoc__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-classic-serif);
    font-size: 0.98rem;
    font-weight: 600;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    color: var(--target-resume-accent, var(--color-text-muted));
}
.tdoc--classic .tdoc__eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--target-resume-accent, var(--color-text-muted)) 28%, transparent);
}
.tdoc--classic .tdoc__exp-title {
    font-size: 1.05rem;
}
.tdoc--classic .tdoc__chips li {
    border-radius: 2px;
    font-family: var(--font-classic-serif);
}

/* ── Modern — смелый цветовой commit: имя в глубокой accent-плашке (карточный
   header), толстые accent-бары секций, залитые accent-tint чипы. Выбор цвета
   в панели преображает документ целиком. ── */
.tdoc--modern {
    font-family: var(--font-sans);
}
.tdoc--modern .tdoc__head {
    margin-bottom: var(--space-5);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-radius: var(--radius-md);
    background:
        radial-gradient(130% 200% at 100% 0%, color-mix(in srgb, #fff 16%, transparent), transparent 55%),
        linear-gradient(135deg,
            var(--target-resume-accent, var(--color-accent)),
            color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 70%, #101820));
}
.tdoc--modern .tdoc__head .tdoc__name {
    color: #fff;
    font-size: clamp(1.7rem, 5vw, 2.25rem);
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.06;
}
.tdoc--modern .tdoc__head .tdoc__headline {
    color: rgba(255, 255, 255, 0.85);
}
.tdoc--modern .tdoc__head .tdoc__meta {
    color: rgba(255, 255, 255, 0.72);
}
.tdoc--modern .tdoc__head .tdoc__meta span:not(:last-child)::after {
    color: rgba(255, 255, 255, 0.45);
}
.tdoc--modern .tdoc__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--target-resume-accent, var(--color-accent));
}
.tdoc--modern .tdoc__bar::before {
    content: "";
    width: var(--space-4);
    height: 4px;
    border-radius: 2px;
    background: var(--target-resume-accent, var(--color-accent));
}
.tdoc--modern .tdoc__chips li {
    border: none;
    background: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 12%, transparent);
    color: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 80%, #101820);
    font-weight: 500;
}
.tdoc--modern .tdoc__section--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 640px) {
    .tdoc--modern .tdoc__section--split {
        grid-template-columns: 1fr 1fr;
    }
}

/* Sidebar — двухколоночное «резюме с боковой полосой»: слева узкая колонка
   (имя/контакты/навыки/языки/сертификаты) с лёгкой accent-подложкой и hairline-
   разделителем, справа основная. КЛЮЧЕВОЕ: документная типографика, а не web-
   scale страницы — базовый кегль ужат, заголовки секций (.tdoc__bar) — компактные
   accent-лейблы с правилом (иначе h2 рендерился браузерным дефолтом во всю ширину),
   навыки — чистым списком с accent-тиком (длинные фразы не рвутся внутри «пилюль»). */
/* ── Sidebar — «дизайнерская» глубокая accent-колонка: белая типографика на
   насыщенной заливке (accent затемняется примесью ink — контраст с белым
   гарантирован на любом пресете). Панель — скруглённая, живёт внутри полей
   листа, поэтому не конфликтует с WYSIWYG-полями печати. ── */
.tdoc--sidebar {
    display: grid;
    grid-template-columns: minmax(11rem, 31%) minmax(0, 1fr);
    gap: var(--space-5);
    font-family: var(--font-sans);
    font-size: 0.86rem;
    line-height: 1.5;
}
.tdoc__aside {
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 86%, #0E141B),
        color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 60%, #0E141B));
    color: rgba(255, 255, 255, 0.92);
    align-self: stretch;
}
.tdoc--sidebar .tdoc__main {
    padding: var(--space-4) 0;
    min-width: 0;
}
.tdoc--sidebar .tdoc__aside-head {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.tdoc--sidebar .tdoc__aside-head .tdoc__name {
    font-size: 1.45rem;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
}
.tdoc--sidebar .tdoc__aside-head .tdoc__headline {
    margin-top: var(--space-2);
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.75);
}
.tdoc__aside-block { margin-top: var(--space-5); }
.tdoc__aside-label {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.55);
}
.tdoc__aside-contacts,
.tdoc__aside-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
    overflow-wrap: anywhere;
}
.tdoc__aside .tdoc__muted {
    color: rgba(255, 255, 255, 0.6);
}
/* Навыки в боковой колонке — компактный список с тиком, а НЕ «пилюли»:
   длинные фразы («руководство командой разработчиков») больше не ломаются. */
.tdoc__aside-skills li {
    position: relative;
    padding-left: var(--space-3);
}
.tdoc__aside-skills li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
}
/* Основная колонка — заголовки секций компактными accent-лейблами с hairline
   (без этого правила .tdoc__bar = гигантский дефолтный <h2>). */
.tdoc--sidebar .tdoc__main .tdoc__bar {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--target-resume-accent, var(--color-accent));
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 28%, transparent);
}
.tdoc--sidebar .tdoc__main .tdoc__section { margin-top: var(--space-4); }
.tdoc--sidebar .tdoc__main .tdoc__section:first-child { margin-top: 0; }
.tdoc--sidebar .tdoc__lead { font-size: 0.86rem; line-height: 1.5; margin-bottom: var(--space-2); }
/* Узкая main-колонка: период падает ПОД title отдельной строкой — grid
   «title | период справа» здесь не помещается и давил бы заголовок. */
.tdoc--sidebar .tdoc__exp {
    margin-top: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
}
.tdoc--sidebar .tdoc__exp .tdoc__exp-period {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
    margin-top: 2px;
}
.tdoc--sidebar .tdoc__exp-title { font-size: 0.9rem; }
.tdoc--sidebar .tdoc__exp-period { font-size: 0.68rem; }
.tdoc--sidebar .tdoc__bullets li,
.tdoc--sidebar .tdoc__list li { margin-bottom: 2px; }
/* На узких экранах (mobile preview) сворачиваем в одну колонку. */
@media (max-width: 560px) {
    .tdoc--sidebar { grid-template-columns: 1fr; }
}

/* ── Editorial — журнальная подача: центрированная шапка с accent-росчерком,
   центрированные small-caps рубрики с фланговыми линейками, буквица. ── */
.tdoc--editorial {
    font-family: var(--font-classic-serif);
    line-height: 1.62;
}
.tdoc--editorial .tdoc__head {
    text-align: center;
    padding-top: var(--space-5);
    padding-bottom: var(--space-2);
}
.tdoc--editorial .tdoc__name {
    font-size: clamp(2rem, 6vw, 2.7rem);
    letter-spacing: 0.005em;
    line-height: 1.04;
}
/* Короткий accent-росчерк под именем — фирменный знак журнальной шапки. */
.tdoc--editorial .tdoc__name::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 2px;
    margin: var(--space-3) auto 0;
    background: var(--target-resume-accent, var(--color-accent));
}
.tdoc--editorial .tdoc__headline {
    font-style: italic;
    font-size: 1.05rem;
    color: var(--target-resume-accent, var(--color-accent));
}
.tdoc--editorial .tdoc__meta {
    justify-content: center;
}
.tdoc--editorial .tdoc__section { margin: var(--space-2) 0 var(--space-5); }
.tdoc--editorial .tdoc__bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--resume-paper-ink-muted);
    margin-bottom: var(--space-3);
}
/* Фланговые hairline'ы по обе стороны рубрики — классический magazine-орнамент. */
.tdoc--editorial .tdoc__bar::before,
.tdoc--editorial .tdoc__bar::after {
    content: "";
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 38%, transparent);
}
.tdoc--editorial .tdoc__exp .tdoc__exp-period {
    font-family: var(--font-classic-serif);
    font-style: italic;
    font-size: 0.85rem;
    letter-spacing: 0;
}
/* Буквица на первом абзаце «о себе». */
.tdoc--editorial .tdoc__section:first-of-type .tdoc__lead::first-letter {
    float: left;
    font-size: 3.4em;
    line-height: 0.82;
    padding: 0.04em 0.14em 0 0;
    color: var(--target-resume-accent, var(--color-accent));
    font-weight: 600;
}

/* ── Compact — швейцарская utility-плотность: имя слева / контакты справа в
   одну шапку под жирным правилом, mono-рубрики с хвостовой линейкой, плоские
   чипы. Максимум информации на страницу — и всё равно «свёрстано». ── */
.tdoc--compact {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    line-height: 1.42;
}
/* Сетка — на обёртке шапки (tdoc__head-main): имя, заголовок и контакты
   лежат в ней, а не прямо в шапке. Сетка на самой шапке развалилась, когда
   появилась обёртка, — контакты встали столбиком по слову. */
.tdoc--compact .tdoc__head {
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--resume-paper-ink);
}
.tdoc--compact .tdoc__head-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-4);
    align-items: end;
}
.tdoc--compact .tdoc__name {
    grid-column: 1;
    font-size: 1.4rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}
.tdoc--compact .tdoc__headline {
    grid-column: 1;
    font-size: 0.82rem;
}
.tdoc--compact .tdoc__meta {
    grid-column: 2;
    grid-row: 1 / span 2;
    white-space: nowrap;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-align: right;
}
.tdoc--compact .tdoc__meta span:not(:last-child)::after { content: none; }
.tdoc--compact .tdoc__section { margin-top: var(--space-4); }
.tdoc--compact .tdoc__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--target-resume-accent, var(--color-accent));
    margin-bottom: var(--space-2);
}
.tdoc--compact .tdoc__bar::after {
    content: "";
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--resume-paper-ink) 14%, transparent);
}
.tdoc--compact .tdoc__lead { margin-bottom: var(--space-2); }
.tdoc--compact .tdoc__exp { margin-top: var(--space-3); }
.tdoc--compact .tdoc__exp-title { font-size: 0.88rem; }
.tdoc--compact .tdoc__exp-period { font-size: 0.66rem; }
.tdoc--compact .tdoc__bullets { margin-top: 2px; }
.tdoc--compact .tdoc__bullets li { margin-bottom: 2px; }
.tdoc--compact .tdoc__chips { gap: 4px; }
.tdoc--compact .tdoc__chips li {
    padding: 1px 8px;
    font-size: 0.7rem;
    border: none;
    border-radius: 3px;
    background: color-mix(in srgb, var(--resume-paper-ink) 7%, transparent);
}

/* ── Timeline — карьера как маршрут: непрерывный accent-рейл, двухтонные точки
   вех, период в mono-пилюле справа. ── */
.tdoc--timeline {
    font-family: var(--font-sans);
}
.tdoc--timeline .tdoc__name {
    font-size: clamp(1.6rem, 5vw, 2.1rem);
    font-weight: 750;
    letter-spacing: -0.015em;
}
/* Короткий accent-бар под именем — рифма к рейлу таймлайна. */
.tdoc--timeline .tdoc__name::after {
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    border-radius: 2px;
    margin-top: var(--space-3);
    background: var(--target-resume-accent, var(--color-accent));
}
.tdoc--timeline .tdoc__bar {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--target-resume-accent, var(--color-accent));
}
/* Секция опыта превращается в таймлайн: общий рейл слева + точка у каждой
   роли. padding-top вместо margin-top держит рейл непрерывным между вехами. */
.tdoc--timeline .tdoc__exp {
    position: relative;
    margin-top: 0;
    margin-left: 5px;
    padding-top: var(--space-4);
    padding-left: var(--space-5);
    padding-bottom: var(--space-2);
    border-left: 2px solid color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 30%, transparent);
}
/* Двухтонная точка-веха: paper-сердцевина в accent-кольце. */
.tdoc--timeline .tdoc__exp::before {
    content: "";
    position: absolute;
    left: -7px;
    top: calc(var(--space-4) + 0.3em);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--surface-paper);
    border: 3px solid var(--target-resume-accent, var(--color-accent));
}
.tdoc--timeline .tdoc__exp .tdoc__exp-period {
    align-self: start;
    padding: 2px var(--space-2);
    border-radius: 999px;
    font-size: 0.68rem;
    background: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 12%, transparent);
    color: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 85%, #0E141B);
}
.tdoc--timeline .tdoc__chips li {
    border-color: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 35%, transparent);
    color: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 80%, #101820);
}

/* ── ATS — машиночитаемая гарантия: системный sans, чёрные правила, ноль
   декора. Сознательно НЕ реагирует на accent — это его продуктовое обещание. ── */
.tdoc--ats {
    font-family: Arial, Helvetica, sans-serif;
}
.tdoc--ats .tdoc__heading {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1.5px solid var(--resume-paper-ink);
    padding-bottom: var(--space-1);
}
.tdoc--ats .tdoc__exp-title {
    font-weight: 700;
}
.tdoc--ats .tdoc__exp-period {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
}
/* Навыки — плоский текстовый список через middot (никаких «пилюль»:
   ATS-парсеры читают plain text). */
.tdoc--ats .tdoc__chips { gap: 0 var(--space-2); }
.tdoc--ats .tdoc__chips li {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
}
.tdoc--ats .tdoc__chips li:not(:last-child)::after {
    content: " ·";
    color: var(--resume-paper-ink-muted);
}

/* ── Монограмма — знак документа у шаблонов с цветной шапкой (band, fresh,
   duo). У резюме без фотографии она держит правый край шапки и делает лист
   узнаваемым с одного взгляда. Остальные шаблоны её не показывают. ── */
.tdoc__mono { display: none; }
.tdoc__head-main { min-width: 0; }

/* ── Band («Акцент») — цветная полоса шапки во всю ширину текста со
   скошенным низом и тёмным клином справа, монограмма квадратом; ниже —
   разделы с цветной подписью и волосяной линией. Полоса стоит внутри полей листа: PDF печатается с полями,
   и экран обязан совпадать с файлом. Одна колонка текста — читается системами
   отбора так же, как строгий шаблон. ── */
.tdoc--band {
    --tdoc-accent: var(--target-resume-accent, var(--color-accent));
    font-family: var(--font-sans);
}
.tdoc--band .tdoc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
    padding: var(--space-6) var(--space-6) calc(var(--space-6) + 1.5rem);
    background:
        linear-gradient(115deg, transparent 62%, color-mix(in srgb, var(--tdoc-accent) 70%, #0B0E14) 62%),
        var(--tdoc-accent);
    /* Скошенный низ — знак шаблона: отличает его от скруглённой плашки
       «Современного» с первого взгляда и печатается (clip-path в PDF
       Chromium поддерживает). */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5rem), 0 100%);
}
.tdoc--band .tdoc__head .tdoc__name {
    color: #fff;
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.05;
}
.tdoc--band .tdoc__head .tdoc__headline {
    margin-top: var(--space-2);
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.02rem;
}
.tdoc--band .tdoc__head .tdoc__meta { color: rgba(255, 255, 255, 0.78); }
.tdoc--band .tdoc__head .tdoc__meta span:not(:last-child)::after { color: rgba(255, 255, 255, 0.5); }
.tdoc--band .tdoc__mono {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    border: 2px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.tdoc--band .tdoc__bar {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid color-mix(in srgb, var(--tdoc-accent) 30%, transparent);
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tdoc-accent);
}
.tdoc--band .tdoc__exp-title { font-weight: 700; }
.tdoc--band .tdoc__chips li {
    border: none;
    border-radius: 3px;
    background: color-mix(in srgb, var(--tdoc-accent) 10%, transparent);
    color: color-mix(in srgb, var(--tdoc-accent) 82%, #0B0E14);
    font-weight: 500;
}

/* ── Minimal («Минимализм») — много воздуха и тонкий набор: лёгкое имя,
   подписи разделов колонкой слева, текст справа. Цвет — одна деталь
   (заголовок резюме). На узком листе колонка подписей встаёт над текстом. ── */
.tdoc--minimal {
    --tdoc-accent: var(--target-resume-accent, var(--color-accent));
    font-family: var(--font-sans);
    line-height: 1.6;
}
.tdoc--minimal .tdoc__head { padding-bottom: var(--space-5); }
.tdoc--minimal .tdoc__head .tdoc__name {
    font-size: clamp(2rem, 5.5vw, 2.75rem);
    font-weight: 300;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
.tdoc--minimal .tdoc__head .tdoc__headline {
    margin-top: var(--space-2);
    color: var(--tdoc-accent);
    font-weight: 500;
}
.tdoc--minimal .tdoc__meta span:not(:last-child)::after { color: var(--resume-paper-ink-muted); }
.tdoc--minimal .tdoc__section { margin-top: var(--space-6); }
.tdoc--minimal .tdoc__bar {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--resume-paper-ink-muted);
}
.tdoc--minimal .tdoc__exp-title { font-weight: 600; }
.tdoc--minimal .tdoc__chips { gap: var(--space-1) var(--space-3); }
.tdoc--minimal .tdoc__chips li { padding: 0; border: none; border-radius: 0; }
.tdoc--minimal .tdoc__chips li:not(:last-child)::after {
    content: " /";
    margin-left: var(--space-2);
    color: var(--resume-paper-ink-muted);
}
@media (min-width: 600px) {
    .tdoc--minimal .tdoc__section {
        display: grid;
        grid-template-columns: 9rem minmax(0, 1fr);
        column-gap: var(--space-6);
    }
    .tdoc--minimal .tdoc__section > * { grid-column: 2; }
    .tdoc--minimal .tdoc__section > .tdoc__bar {
        grid-column: 1;
        grid-row: 1 / span 40;
        margin: 0.35em 0 0;
    }
}

/* ── Executive («Руководитель») — строгая антиква: имя капителью по центру
   между двумя цветными линейками, разделы — капитель антиквой с линейкой во
   всю ширину. Подача для директорских позиций: спокойно, дорого, без
   графики. ── */
.tdoc--executive {
    --tdoc-accent: var(--target-resume-accent, var(--color-accent));
    font-family: var(--font-classic-serif);
    line-height: 1.58;
}
.tdoc--executive .tdoc__head {
    padding: var(--space-4) 0 var(--space-4);
    border-top: 3px solid var(--tdoc-accent);
    border-bottom: 1px solid var(--tdoc-accent);
    text-align: center;
}
.tdoc--executive .tdoc__head .tdoc__name {
    font-family: var(--font-classic-serif);
    font-size: clamp(1.6rem, 4.5vw, 2.15rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.15;
}
.tdoc--executive .tdoc__head .tdoc__headline {
    margin-top: var(--space-2);
    font-variant: small-caps;
    letter-spacing: 0.06em;
    font-size: 1.05rem;
    color: var(--tdoc-accent);
}
.tdoc--executive .tdoc__meta { justify-content: center; }
.tdoc--executive .tdoc__meta span:not(:last-child)::after { color: var(--tdoc-accent); }
.tdoc--executive .tdoc__bar {
    padding-bottom: var(--space-1);
    border-bottom: 1px solid color-mix(in srgb, var(--resume-paper-ink) 25%, transparent);
    font-family: var(--font-classic-serif);
    font-size: 1.02rem;
    font-weight: 600;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    color: var(--tdoc-accent);
}
.tdoc--executive .tdoc__exp-title { font-family: var(--font-classic-serif); font-size: 1.04rem; }
.tdoc--executive .tdoc__exp-period { font-family: var(--font-classic-serif); font-style: italic; letter-spacing: 0; }
.tdoc--executive .tdoc__chips li { border-radius: 0; border-color: color-mix(in srgb, var(--tdoc-accent) 35%, transparent); }

/* ── Bold («Контраст») — тёмная шапка с крупным именем, заголовок резюме
   цветом; разделы — жирная капитель с цветной плашкой слева, навыки —
   залитые плашки. Самый громкий из строгих по структуре шаблонов. ── */
.tdoc--bold {
    --tdoc-accent: var(--target-resume-accent, var(--color-accent));
    font-family: var(--font-sans);
}
.tdoc--bold .tdoc__head {
    margin-bottom: var(--space-5);
    padding: var(--space-6) var(--space-6) var(--space-5);
    background: #161A22;
    border-bottom: 6px solid var(--tdoc-accent);
}
.tdoc--bold .tdoc__head .tdoc__name {
    color: #fff;
    font-size: clamp(1.9rem, 5.5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.02;
}
.tdoc--bold .tdoc__head .tdoc__headline {
    margin-top: var(--space-2);
    color: color-mix(in srgb, var(--tdoc-accent) 55%, #fff);
    font-weight: 600;
    font-size: 1.04rem;
}
.tdoc--bold .tdoc__head .tdoc__meta { color: rgba(255, 255, 255, 0.72); }
.tdoc--bold .tdoc__head .tdoc__meta span:not(:last-child)::after { color: rgba(255, 255, 255, 0.4); }
.tdoc--bold .tdoc__bar {
    padding-left: var(--space-3);
    border-left: 6px solid var(--tdoc-accent);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--resume-paper-ink);
}
.tdoc--bold .tdoc__exp-title { font-weight: 750; }
.tdoc--bold .tdoc__chips li {
    border: none;
    border-radius: 3px;
    background: var(--tdoc-accent);
    color: #fff;
    font-weight: 600;
}

/* ── Fresh («Свежий») — светлая цветная подложка шапки с круглой
   монограммой, разделы — цветными метками-пилюлями. Дружелюбный, но
   собранный лист: подходит продуктовым и маркетинговым ролям. ── */
.tdoc--fresh {
    --tdoc-accent: var(--target-resume-accent, var(--color-accent));
    font-family: var(--font-sans);
}
.tdoc--fresh .tdoc__head {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--tdoc-accent) 10%, var(--surface-paper));
}
.tdoc--fresh .tdoc__head-main { order: 2; }
.tdoc--fresh .tdoc__mono {
    order: 1;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--tdoc-accent);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
}
.tdoc--fresh .tdoc__head .tdoc__name {
    font-size: clamp(1.7rem, 5vw, 2.3rem);
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.06;
    color: color-mix(in srgb, var(--tdoc-accent) 70%, #0B0E14);
}
.tdoc--fresh .tdoc__head .tdoc__headline { margin-top: var(--space-1); font-weight: 500; }
.tdoc--fresh .tdoc__bar {
    display: inline-block;
    margin-bottom: var(--space-3);
    padding: 3px var(--space-3);
    border-radius: 999px;
    background: var(--tdoc-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tdoc--fresh .tdoc__exp-title { font-weight: 700; }
.tdoc--fresh .tdoc__chips li {
    border-color: color-mix(in srgb, var(--tdoc-accent) 40%, transparent);
    color: color-mix(in srgb, var(--tdoc-accent) 78%, #0B0E14);
}

/* ── Duo («Два тона») — двухколоночный лист со светлой цветной колонкой:
   круглая монограмма, имя цветом, подписи колонки цветом. Читается мягче
   глубокой колонки sidebar и печатается без тяжёлой заливки. ── */
.tdoc--duo { --tdoc-accent: var(--target-resume-accent, var(--color-accent)); }
.tdoc--duo .tdoc__aside {
    background: color-mix(in srgb, var(--tdoc-accent) 11%, var(--surface-paper));
    color: var(--resume-paper-ink);
}
.tdoc--duo .tdoc__mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    margin-bottom: var(--space-3);
    border-radius: 50%;
    background: var(--tdoc-accent);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
}
.tdoc--duo .tdoc__aside-head { border-bottom-color: color-mix(in srgb, var(--tdoc-accent) 30%, transparent); }
.tdoc--duo .tdoc__aside-head .tdoc__name { color: color-mix(in srgb, var(--tdoc-accent) 72%, #0B0E14); }
.tdoc--duo .tdoc__aside-head .tdoc__headline { color: var(--resume-paper-ink-soft); }
.tdoc--duo .tdoc__aside-label { color: var(--tdoc-accent); }
.tdoc--duo .tdoc__aside-contacts,
.tdoc--duo .tdoc__aside-list { color: var(--resume-paper-ink-soft); }
.tdoc--duo .tdoc__aside .tdoc__muted { color: var(--resume-paper-ink-muted); }
.tdoc--duo .tdoc__aside-skills li::before { background: var(--tdoc-accent); }
.tpreview__sheet .tdoc--duo .tdoc__aside .tdoc__muted { color: var(--resume-paper-ink-muted); }

/* ── Иконки разделов (tdoc__ico): по умолчанию скрыты, показывают их
   варианты «с иконками» (icons, cards, iconic). Иконка — из общего набора
   Lucide, цвет — акцент. ── */
.tdoc__ico { display: none; }
.tdoc__ico .icon { width: 1em; height: 1em; }

/* ── Семейство split: шапка во всю ширину и две колонки. Колонка идёт в DOM
   после основной (при чтении текстом сначала опыт), сторону задаёт сетка. ── */
.tdoc--split {
    --tdoc-accent: var(--target-resume-accent, var(--color-accent));
    font-family: var(--font-sans);
}
.tdoc--split .tdoc__head {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 2px solid var(--tdoc-accent);
}
.tdoc--split .tdoc__head .tdoc__name {
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.05;
}
.tdoc--split .tdoc__head .tdoc__headline { margin-top: var(--space-1); color: var(--tdoc-accent); font-weight: 600; }
.tdoc__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 600px) {
    .tdoc__cols { grid-template-columns: minmax(0, 1fr) minmax(10rem, 32%); }
}
.tdoc__main { min-width: 0; }
.tdoc__main > .tdoc__section:first-child { margin-top: 0; }
.tdoc--split .tdoc__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid color-mix(in srgb, var(--tdoc-accent) 28%, transparent);
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tdoc-accent);
}
.tdoc--split .tdoc__exp-title { font-weight: 700; }
.tdoc__side { min-width: 0; font-size: 0.86rem; line-height: 1.45; }
.tdoc__side-block + .tdoc__side-block { margin-top: var(--space-5); }
.tdoc__side-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-3);
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tdoc-accent);
}
.tdoc__levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.tdoc__level-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
/* Перенос — по словам: «anywhere» рвал «Управление командой» на «Управл /
   ение» в узкой колонке. Слово длиннее строки (адрес почты) переносится. */
.tdoc__level-name { min-width: 0; overflow-wrap: break-word; }
.tdoc__side-item { margin: 0 0 var(--space-3); display: grid; gap: 2px; }
.tdoc__side-item:last-child { margin-bottom: 0; }

/* Уровень — пять точек: подложка из пустых точек, поверх — закрашенные на
   ширину уровня (data-lvl 1–5). Одна разметка, вариант полосы — ниже. */
.tdoc__lvl {
    --dot: 8px;
    --gap: 4px;
    --lvl-n: 0;
    position: relative;
    flex: none;
    width: calc(5 * var(--dot) + 4 * var(--gap));
    height: var(--dot);
    background: radial-gradient(circle closest-side, color-mix(in srgb, var(--tdoc-accent) 22%, transparent) 96%, transparent)
        0 0 / calc(var(--dot) + var(--gap)) var(--dot) repeat-x;
    /* Точка стоит посередине плитки шириной dot+gap: без сдвига на полпромежутка
       последняя выходила за ширину и резалась пополам. */
    background-position: calc(var(--gap) / -2) 0;
}
.tdoc__lvl::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--lvl-n) * (var(--dot) + var(--gap)) - var(--gap));
    background: radial-gradient(circle closest-side, var(--tdoc-accent) 96%, transparent)
        0 0 / calc(var(--dot) + var(--gap)) var(--dot) repeat-x;
    background-position: calc(var(--gap) / -2) 0;
}
.tdoc__lvl[data-lvl="1"] { --lvl-n: 1; }
.tdoc__lvl[data-lvl="2"] { --lvl-n: 2; }
.tdoc__lvl[data-lvl="3"] { --lvl-n: 3; }
.tdoc__lvl[data-lvl="4"] { --lvl-n: 4; }
.tdoc__lvl[data-lvl="5"] { --lvl-n: 5; }
/* Полоса — у вариантов graphite, studio, cards. */
.tdoc--graphite .tdoc__lvl,
.tdoc--studio .tdoc__lvl,
.tdoc--cards .tdoc__lvl {
    width: 4.5rem;
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--tdoc-accent) 20%, transparent);
}
.tdoc--graphite .tdoc__lvl::before,
.tdoc--studio .tdoc__lvl::before,
.tdoc--cards .tdoc__lvl::before {
    width: calc(var(--lvl-n) * 20%);
    border-radius: 3px;
    background: var(--tdoc-accent);
}
/* Полосе нужна ширина: название встаёт над ней, а не делит строку. */
.tdoc--graphite .tdoc__level-row,
.tdoc--studio .tdoc__level-row,
.tdoc--cards .tdoc__level-row { flex-direction: column; align-items: stretch; gap: 4px; }
.tdoc--graphite .tdoc__level-row .tdoc__lvl,
.tdoc--studio .tdoc__level-row .tdoc__lvl,
.tdoc--cards .tdoc__level-row .tdoc__lvl { width: 100%; }

/* aside («Колонка справа») — светлая колонка за тонкой цветной линией. */
.tdoc--aside .tdoc__side { padding-left: var(--space-5); border-left: 1px solid color-mix(in srgb, var(--tdoc-accent) 30%, transparent); }

/* graphite («Тёмная колонка») — колонка справа на тёмной плите. */
.tdoc--graphite .tdoc__head { border-bottom-width: 1px; }
.tdoc--graphite .tdoc__side {
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: #1C2029;
    color: rgba(255, 255, 255, 0.9);
}
.tdoc--graphite .tdoc__side-label { color: color-mix(in srgb, var(--tdoc-accent) 45%, #fff); }
.tdoc--graphite .tdoc__side .tdoc__muted { color: rgba(255, 255, 255, 0.6); }
.tdoc--graphite .tdoc__lvl { background: rgba(255, 255, 255, 0.16); }
.tdoc--graphite .tdoc__lvl::before { background: color-mix(in srgb, var(--tdoc-accent) 55%, #fff); }

/* icons («Иконки») — колонка слева на тонированной плите, иконки разделов,
   круглая монограмма в шапке. */
.tdoc--icons .tdoc__head { border-bottom: 0; padding-bottom: 0; }
.tdoc--icons .tdoc__mono,
.tdoc--studio .tdoc__mono {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--tdoc-accent);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
}
.tdoc--icons .tdoc__ico,
.tdoc--cards .tdoc__ico,
.tdoc--iconic .tdoc__ico { display: inline-flex; flex: none; color: var(--tdoc-accent); }
.tdoc--icons .tdoc__side {
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--tdoc-accent) 8%, var(--surface-paper));
}
@media (min-width: 600px) {
    .tdoc--icons .tdoc__cols,
    .tdoc--frame .tdoc__cols { grid-template-columns: minmax(10rem, 32%) minmax(0, 1fr); }
    .tdoc--icons .tdoc__side,
    .tdoc--frame .tdoc__side { grid-column: 1; grid-row: 1; }
    .tdoc--icons .tdoc__main,
    .tdoc--frame .tdoc__main { grid-column: 2; grid-row: 1; }
}

/* studio («Студия») — тёмная шапка во всю ширину текста, монограмма,
   тонированная колонка справа, уровни полосами. */
.tdoc--studio .tdoc__head {
    padding: var(--space-6);
    border-bottom: 0;
    border-radius: var(--radius-md);
    background: #171A21;
}
.tdoc--studio .tdoc__head .tdoc__name { color: #fff; }
.tdoc--studio .tdoc__head .tdoc__headline { color: color-mix(in srgb, var(--tdoc-accent) 50%, #fff); }
.tdoc--studio .tdoc__head .tdoc__meta { color: rgba(255, 255, 255, 0.72); }
.tdoc--studio .tdoc__head .tdoc__meta span:not(:last-child)::after { color: rgba(255, 255, 255, 0.4); }
.tdoc--studio .tdoc__side {
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--tdoc-accent) 9%, var(--surface-paper));
}

/* cards («Карточки») — каждый блок колонки отдельной карточкой, иконки,
   шапка с цветной полосой слева. */
.tdoc--cards .tdoc__head { padding: 0 0 0 var(--space-4); border-bottom: 0; border-left: 6px solid var(--tdoc-accent); }
.tdoc--cards .tdoc__side-block {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--tdoc-accent) 8%, var(--surface-paper));
}
.tdoc--cards .tdoc__side-block + .tdoc__side-block { margin-top: var(--space-3); }

/* frame («Рамка») — шапка в цветной рамке по центру, колонка слева за
   вертикальной линией. Строгий двухколоночный лист. */
.tdoc--frame .tdoc__head {
    justify-content: center;
    padding: var(--space-5);
    border: 2px solid var(--tdoc-accent);
    text-align: center;
}
.tdoc--frame .tdoc__meta { justify-content: center; }
.tdoc--frame .tdoc__head .tdoc__name { letter-spacing: 0.08em; text-transform: uppercase; font-size: clamp(1.5rem, 4.5vw, 2rem); }
.tdoc--frame .tdoc__side { padding-right: var(--space-5); border-right: 1px solid color-mix(in srgb, var(--resume-paper-ink) 18%, transparent); }

/* ── marker («Маркер») — имя и заголовки разделов выделены маркером цвета
   акцента: живо, но одна колонка текста. ── */
.tdoc--marker { --tdoc-accent: var(--target-resume-accent, var(--color-accent)); font-family: var(--font-sans); }
.tdoc--marker .tdoc__head .tdoc__name {
    display: inline;
    padding: 0 4px;
    font-size: clamp(1.9rem, 5.5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(transparent 58%, color-mix(in srgb, var(--tdoc-accent) 32%, transparent) 58%);
}
.tdoc--marker .tdoc__head .tdoc__headline { margin-top: var(--space-3); font-weight: 600; }
.tdoc--marker .tdoc__bar {
    display: inline-block;
    margin-bottom: var(--space-3);
    padding: 1px 6px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--tdoc-accent) 24%, transparent);
    color: var(--resume-paper-ink);
}
.tdoc--marker .tdoc__exp-title { font-weight: 700; }

/* ── gazette («Газета») — газетная антиква: толстая линейка над шапкой,
   имя капителью, разделы под чёрной линейкой. ── */
.tdoc--gazette { --tdoc-accent: var(--target-resume-accent, var(--color-accent)); font-family: var(--font-classic-serif); line-height: 1.55; }
.tdoc--gazette .tdoc__head {
    padding: var(--space-3) 0 var(--space-3);
    border-top: 6px solid var(--resume-paper-ink);
    border-bottom: 1px solid var(--resume-paper-ink);
}
.tdoc--gazette .tdoc__head .tdoc__name {
    font-family: var(--font-classic-serif);
    font-size: clamp(2rem, 6vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.tdoc--gazette .tdoc__head .tdoc__headline { font-style: italic; color: var(--tdoc-accent); font-size: 1.05rem; }
.tdoc--gazette .tdoc__bar {
    padding-top: var(--space-2);
    border-top: 2px solid var(--resume-paper-ink);
    font-family: var(--font-classic-serif);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--resume-paper-ink);
}
.tdoc--gazette .tdoc__exp-title { font-family: var(--font-classic-serif); font-size: 1.05rem; }
.tdoc--gazette .tdoc__exp-period { font-family: var(--font-classic-serif); font-style: italic; letter-spacing: 0; }
.tdoc--gazette .tdoc__chips li { border-radius: 0; font-family: var(--font-classic-serif); }

/* ── ribbon («Лента») — имя на ленте-баннере по центру, разделы с короткой
   цветной чертой. ── */
.tdoc--ribbon { --tdoc-accent: var(--target-resume-accent, var(--color-accent)); font-family: var(--font-sans); }
.tdoc--ribbon .tdoc__head { text-align: center; padding-bottom: var(--space-4); }
.tdoc--ribbon .tdoc__head .tdoc__name {
    display: inline-block;
    padding: var(--space-2) var(--space-8, 2.5rem);
    background: var(--tdoc-accent);
    color: #fff;
    font-size: clamp(1.6rem, 4.6vw, 2.2rem);
    font-weight: 750;
    letter-spacing: -0.01em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 50%, 100% 100%, 0 100%, 1rem 50%);
}
.tdoc--ribbon .tdoc__head .tdoc__headline { margin-top: var(--space-3); font-weight: 600; color: var(--tdoc-accent); }
.tdoc--ribbon .tdoc__meta { justify-content: center; }
.tdoc--ribbon .tdoc__bar {
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--resume-paper-ink);
}
.tdoc--ribbon .tdoc__bar::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-top: 6px;
    background: var(--tdoc-accent);
}

/* ── gradient («Градиент») — мягкая цветная шапка-градиент, имя цветом. ── */
.tdoc--gradient { --tdoc-accent: var(--target-resume-accent, var(--color-accent)); font-family: var(--font-sans); }
.tdoc--gradient .tdoc__head {
    margin-bottom: var(--space-5);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--tdoc-accent) 30%, var(--surface-paper)), transparent 60%),
        linear-gradient(120deg, color-mix(in srgb, var(--tdoc-accent) 14%, var(--surface-paper)), var(--surface-paper));
}
.tdoc--gradient .tdoc__head .tdoc__name {
    font-size: clamp(1.9rem, 5.5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: color-mix(in srgb, var(--tdoc-accent) 75%, #0B0E14);
}
.tdoc--gradient .tdoc__head .tdoc__headline { margin-top: var(--space-2); font-weight: 600; }
.tdoc--gradient .tdoc__bar {
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tdoc-accent);
}

/* ── iconic («Значки») — разделы с иконкой в цветном круге, круглая
   монограмма в шапке. ── */
.tdoc--iconic { --tdoc-accent: var(--target-resume-accent, var(--color-accent)); font-family: var(--font-sans); }
.tdoc--iconic .tdoc__head { display: flex; align-items: center; gap: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid color-mix(in srgb, var(--tdoc-accent) 25%, transparent); }
.tdoc--iconic .tdoc__head-main { order: 2; }
.tdoc--iconic .tdoc__mono {
    order: 1;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 3px solid var(--tdoc-accent);
    color: var(--tdoc-accent);
    font-size: 1.35rem;
    font-weight: 750;
    text-transform: uppercase;
}
.tdoc--iconic .tdoc__head .tdoc__name { font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 750; letter-spacing: -0.02em; }
.tdoc--iconic .tdoc__head .tdoc__headline { color: var(--tdoc-accent); font-weight: 600; }
.tdoc--iconic .tdoc__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.9rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--resume-paper-ink);
}
.tdoc--iconic .tdoc__bar .tdoc__ico {
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--tdoc-accent);
    color: #fff;
}

/* ── Print/preview инверсные зоны — белая типографика на accent-заливках
   обязана пережить принудительный ink-цвет .print-body (блок выше по файлу;
   тот же !important + выше специфичность). ── */
.print-body .tdoc--modern .tdoc__head,
.print-body .tdoc--modern .tdoc__head * { color: #fff !important; }
.print-body .tdoc--modern .tdoc__head .tdoc__headline,
.print-body .tdoc--modern .tdoc__head .tdoc__meta { color: rgba(255, 255, 255, 0.82) !important; }
.print-body .tdoc__aside,
.print-body .tdoc__aside * { color: rgba(255, 255, 255, 0.92) !important; }
.print-body .tdoc__aside .tdoc__aside-label { color: rgba(255, 255, 255, 0.6) !important; }
.print-body .tdoc__aside .tdoc__muted { color: rgba(255, 255, 255, 0.6) !important; }
.print-body .tdoc--editorial .tdoc__headline {
    color: var(--target-resume-accent, var(--color-accent)) !important;
}
.print-body .tdoc--band .tdoc__head *,
.print-body .tdoc--bold .tdoc__head * { color: #fff !important; }
.print-body .tdoc--band .tdoc__head .tdoc__headline,
.print-body .tdoc--band .tdoc__head .tdoc__meta,
.print-body .tdoc--bold .tdoc__head .tdoc__meta { color: rgba(255, 255, 255, 0.82) !important; }
.print-body .tdoc--bold .tdoc__head .tdoc__headline {
    color: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 55%, #fff) !important;
}
.print-body .tdoc--duo .tdoc__aside,
.print-body .tdoc--duo .tdoc__aside * { color: var(--resume-paper-ink-soft) !important; }
.print-body .tdoc--split .tdoc__bar,
.print-body .tdoc--split .tdoc__side-label,
.print-body .tdoc--split .tdoc__head .tdoc__headline,
.print-body .tdoc--icons .tdoc__ico,
.print-body .tdoc--icons .tdoc__ico *,
.print-body .tdoc--cards .tdoc__ico,
.print-body .tdoc--cards .tdoc__ico *,
.print-body .tdoc--iconic .tdoc__head .tdoc__headline,
.print-body .tdoc--gradient .tdoc__bar,
.print-body .tdoc--ribbon .tdoc__head .tdoc__headline,
.print-body .tdoc--gazette .tdoc__head .tdoc__headline,
.print-body .tdoc--iconic .tdoc__mono { color: var(--target-resume-accent, var(--color-accent)) !important; }
.print-body .tdoc--graphite .tdoc__side,
.print-body .tdoc--graphite .tdoc__side * { color: rgba(255, 255, 255, 0.9) !important; }
.print-body .tdoc--graphite .tdoc__side .tdoc__side-label { color: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 45%, #fff) !important; }
.print-body .tdoc--studio .tdoc__head *,
.print-body .tdoc--ribbon .tdoc__head .tdoc__name,
.print-body .tdoc--icons .tdoc__mono,
.print-body .tdoc--iconic .tdoc__bar .tdoc__ico,
.print-body .tdoc--iconic .tdoc__bar .tdoc__ico * { color: #fff !important; }
.print-body .tdoc--studio .tdoc__head .tdoc__headline { color: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 50%, #fff) !important; }
.print-body .tdoc--studio .tdoc__head .tdoc__meta { color: rgba(255, 255, 255, 0.78) !important; }
.print-body .tdoc--gradient .tdoc__head .tdoc__name {
    color: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 75%, #0B0E14) !important;
}
.print-body .tdoc--marker .tdoc__bar,
.print-body .tdoc--gazette .tdoc__bar,
.print-body .tdoc--ribbon .tdoc__bar,
.print-body .tdoc--iconic .tdoc__bar { color: var(--resume-paper-ink) !important; }
.print-body .tdoc--fresh .tdoc__mono,
.print-body .tdoc--fresh .tdoc__bar,
.print-body .tdoc--duo .tdoc__mono,
.print-body .tdoc--bold .tdoc__chips li { color: #fff !important; }
.print-body .tdoc--minimal .tdoc__headline,
.print-body .tdoc--executive .tdoc__headline,
.print-body .tdoc--executive .tdoc__bar,
.print-body .tdoc--duo .tdoc__aside-label { color: var(--target-resume-accent, var(--color-accent)) !important; }
.print-body .tdoc--fresh .tdoc__name,
.print-body .tdoc--duo .tdoc__aside-head .tdoc__name {
    color: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 72%, #0B0E14) !important;
}
.print-body .tdoc--bold .tdoc__bar,
.print-body .tdoc--minimal .tdoc__bar { color: var(--resume-paper-ink) !important; }
.print-body .tdoc--timeline .tdoc__exp .tdoc__exp-period {
    color: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 85%, #0E141B) !important;
}

/* Styleguide-витрина customize-панели (только /__styleguide): панель форсится
   видимой в док-представлении. Inline <style> на странице нельзя — CSP. */
.sg-customize-demo {
    position: relative;
    height: 620px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    padding: var(--space-4);
}
.sg-customize-demo .customize-panel {
    position: static;
    overflow-y: auto;
    max-height: 100%;
    max-width: 26rem;
}
.sg-customize-demo .customize-panel[hidden] { display: flex; }
.sg-customize-demo .customize-panel__dialog {
    height: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
}
.sg-customize-demo .customize-panel__grip { display: none; }

/* Styleguide-витрина: ширина правого рейла Обзора — там, где ряды качества
   ломались о дельту (только /__styleguide). */
.sg-rail-demo { max-width: 21rem; }

/* Styleguide-витрина: 3 шаблона рядом для visual diff'а (только /__styleguide). */
.sg-target-templates {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 960px) {
    .sg-target-templates {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ─── Live-preview документа (tpreview) — Task 24 ──────────────────────────
   Бумажный «лист» вокруг tdoc-шаблона: тёплый off-white фон, рамка, тень. Тот
   же компонент рендерится inline (правая колонка редактора) и как AJAX-fragment.
   --target-resume-accent выставляется на .tpreview (inline style), tdoc-шаблоны
   внутри читают её для accent-bar'ов / eyebrow'ов / границ. */
.tpreview {
    display: flex;
    justify-content: center;
}
.tpreview__sheet {
    width: 100%;
    max-width: 48rem;
    padding: var(--space-6) var(--space-6);
    background: var(--surface-paper);
    color: var(--resume-paper-ink);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
/* Лист — всегда светлый (бумага), независимо от темы UI: текст внутри tdoc
   принудительно тёмный, чтобы accent-цвета читались как на печати. */
.tpreview__sheet .tdoc,
.tpreview__sheet .tdoc__name,
.tpreview__sheet .tdoc__exp-title {
    color: var(--resume-paper-ink);
}
.tpreview__sheet .tdoc__headline,
.tpreview__sheet .tdoc__lead,
.tpreview__sheet .tdoc__edu,
.tpreview__sheet .tdoc__list,
.tpreview__sheet .tdoc__bullets,
.tpreview__sheet .tdoc__plain,
.tpreview__sheet .tdoc__contacts {
    color: var(--resume-paper-ink-soft);
}
.tpreview__sheet .tdoc__exp-period,
.tpreview__sheet .tdoc__muted,
.tpreview__sheet .tdoc__meta {
    color: var(--resume-paper-ink-muted);
}
/* Re-assert accent/инверсных зон, которые общий ink-каст выше не должен
   гасить (одинаковая специфичность решалась бы порядком — этот блок позже).
   Чипы исключены из каста целиком: их цвета paper-safe и живут в шаблонах. */
.tpreview__sheet .tdoc--editorial .tdoc__headline {
    color: var(--target-resume-accent, var(--color-accent));
}
.tpreview__sheet .tdoc__aside .tdoc__muted {
    color: rgba(255, 255, 255, 0.6);
}
.tpreview__cover {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.tpreview__cover-eyebrow {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--target-resume-accent, var(--resume-paper-ink-muted));
}
.tpreview__cover-subject {
    margin: 0 0 var(--space-3);
    font-weight: 600;
    color: var(--resume-paper-ink);
}
.tpreview__cover-body {
    white-space: pre-wrap;
    color: var(--resume-paper-ink-soft);
    line-height: 1.6;
}

/* ===================================================================
   Документы / Резюме — library (card-grid) + library-card.
   Mobile-first: 1-col → 2-col (tablet) → 3-col (desktop). Карточка —
   thumbnail (16:9) + body (заголовок + meta-бейджи) + action-menu (⋯).
   =================================================================== */
/* ================================================================
   Library «Документы / Резюме» — editorial-luxury redesign.
   Design direction: paper-warm surface, accent spine, classic-serif
   display title, mono-uppercase eyebrow, completeness-ring как
   informational ornament вместо PNG-thumbnail'а.
   ================================================================ */

.documents-library__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 600px) {
    .documents-library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
    .documents-library__grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--space-5);
    }
}

/* Staggered reveal on page load — distinctive «editorial unfurl». */

@keyframes library-card-reveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Card surface (Apple Newsroom / Aesop direction) ----------- */

/* --- Tier-driven pastel frame tints + ring accents ------------- */

/* Frame превью — НЕЙТРАЛЬНЫЙ slate для всех базовых tier'ов (статус несёт
   eyebrow-badge, а не декоративная зелёно-оранжевая заливка paper-stack'а —
   off-brand цвет на purple-приложении читался дёшево). --library-tier
   (status-текст) остаётся семантичным. Tailored (--ideal) держит lavender. */

/* --- Preview frame (pastel tinted, stacked-sheet effect) ------ */

/* --- Stack — три листа, два сзади fan'аются на hover --------- */

/* Front sheet — настоящий wireframe-mock, в центре с лёгким смещением вниз
   чтобы back sheets выглядывали сверху. */

/* Back sheets — pure white (НЕ tinted), отлично выделяются на pastel-frame'е.
   Изначально в rest-state видны peek'и сверху и по бокам — даёт «стопка
   резюме» effect даже без hover'а. */

/* Hover-fan: задние листы решительно расходятся, передний всплывает. */

/* --- Mock-content внутри front sheet (typographic wireframe) -- */

/* «Строки текста» — тонкие линии (3px high), оттенок чуть темнее surface'а
   чтобы быть visible на любом frame-tint'е. Имитируют параграфы реального
   резюме, а не skeleton-loader. */

/* «Скилл-чипы» — pill-формы с tier-цветом (более насыщенный чем фон),
   contrast достаточный чтобы прочитываться как navigation-element. */

/* --- Overlays: eyebrow pill top-left + ring top-right --------- */

/* --- Caption (title + lead + meta под preview-frame'ом) ------ */

/* profession-chip в caption карточки резюме глобального индекса (/app/resumes):
   держит инвариант «резюме → профессия» видимым, tap-target'ом ведёт на
   профессию. Нейтральный pill на токенах; иконка в tier-цвете карточки —
   тонкий статус-акцент. На per-profile списке чип не рендерится. */

/* --- Floating action-menu (⋯) ---------------------------------- */

/* --- Generic dropdown menu items (used by library action-menu) --- */
/* Пункт меню — та же анатомия, что у меню навыка (`.skill-chip__level`):
   плотная строка, значок в колонке одной ширины и приглушённым тоном, слово
   рядом. Все контекстные меню кабинета говорят одним языком — прежде ⋯-меню
   были вдвое просторнее меню навыка, и одна платформа выглядела двумя. */
.dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 2.25rem;
    padding: 0 var(--space-2);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.dropdown__item > .icon { flex: none; width: 16px; height: 16px; color: var(--color-text-muted); }

/* Подсветка — мягкий тон фона: прежний --color-surface-elevated на белой
   панели был белым по белому, и наведение не было видно вовсе. */
.dropdown__item:hover { background: var(--color-bg-soft); }
.dropdown__item:focus-visible {
    background: var(--color-bg-soft);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: -2px;
}

.dropdown__item--danger,
.dropdown__item--danger > .icon {
    color: var(--color-danger);
}
/* Опасное действие — под чертой: «Удалить» вплотную к «Поделиться» —
   промах на одну строку стоил документа. */
.dropdown__panel > .dropdown__item-form:has(> .dropdown__item--danger):not(:first-child),
.dropdown__panel > a.dropdown__item--danger:not(:first-child) {
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px solid var(--color-border-soft);
}
/* Имя объекта — шапкой листа на телефоне, где сам объект под затемнением.
   У меню на десктопе объект рядом, и шапка скрыта. */
.dropdown__title {
    margin: 0 0 var(--space-1);
    padding: var(--space-1) var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 768px) {
    .dropdown__title { display: none; }
}
/* Касание: строка — цель пальца (44px), шрифт как у страницы. */
@media (max-width: 767.98px) {
    .dropdown__item { min-height: var(--tap-min); gap: var(--space-3); padding: 0 var(--space-3); font-size: 1rem; }
}

.dropdown__item-form {
    margin: 0;
}

@media (min-width: 768px) {
    /* Action-menu популярнее узким popover'ом, чем 360px-панель уведомлений. */
    
}

/* ===================================================================
   Career Profile Lens — editorial-luxury карточка профиля.
   Зеркалит структуру ui_resume_library_card (Aesop / Apple Newsroom):
   pastel tier-tinted preview-frame с 3 stacked manifesto-листами,
   на hover fan'аются веером. Внутри front sheet'а — реальный
   typographic manifesto (display-serif target_role + italic positioning
   excerpt + focus chips).

   Tier-tints: solid → sage, needs_work → peach, draft → cool slate,
   failed → desaturated coral. Primary (`profile.is_primary`) добавляет
   lavender outer-glow поверх tier'а — независимо от качества scoring'а
   primary всегда выделен.
   =================================================================== */

.profiles-count {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    margin: var(--space-2) 0 0;
    font-variant-numeric: tabular-nums;
}

/* === Saved indicator (статус автосохранения, ui_saved_indicator) ========= */
.saved-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.saved-indicator__icon {
    flex: none;
}

.saved-indicator[data-state="saving"] {
    color: var(--color-warning);
}

.saved-indicator[data-state="failed"] {
    color: var(--color-danger);
}

/* === Split-view editor (resume-editor.js, documents_resume_editor.html) ===
   Cabinet-unified chrome: editor НЕ рисует собственный sticky toolbar.
   Lead-pill «← Сохранить и выйти · {docTitle}» сидит в app-topbar через
   `topbar_profile` block (parallel workspace pattern); actions (undo/
   history/customize/Download PDF) — через `topbar_actions`. Apple/Linear
   visual direction внутри content area: subtle surfaces, tight spacing,
   breathing room на edges, accent ring на focus. */

.resume-editor-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1;
    transition: border-color 0.2s ease, background 0.2s ease;
    min-width: 0;
}

.resume-editor-pill:hover,
.resume-editor-pill:focus-visible {
    border-color: var(--color-border-strong);
    background: var(--color-surface-elevated);
}

.resume-editor-pill__back {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.resume-editor-pill__exit-label {
    font-weight: 500;
    color: var(--color-text-soft);
    white-space: nowrap;
}

.resume-editor-pill__sep {
    color: var(--color-text-muted);
    opacity: 0.5;
}

.resume-editor-pill__title {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
    min-width: 0;
}

/* Mobile collapse: exit-label исчезает, остаётся icon + title через ⋯ */
@media (max-width: 640px) {
    .resume-editor-pill__exit-label,
    .resume-editor-pill__sep { display: none; }
    .resume-editor-pill__title { max-width: 10rem; }
}

.resume-editor {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* Secondary-toolbar внутри content: saved + undo + history + customize.
   Mobile-first: на ≤640px schлапывается в две row'и (status + actions
   wrap'аются), labels остаются. На ≥640px — одна row, status слева,
   actions справа. Никаких 5-кнопочных panic'ов в app-topbar. */
.resume-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) clamp(var(--space-3), 2vw, var(--space-5));
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    background: color-mix(in srgb, var(--color-surface) 60%, transparent);
}

.resume-editor__toolbar-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    min-width: 0;
}

.resume-editor__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

@media (max-width: 640px) {
    /* На mobile actions schлапываются icon-only через label-hide. */
    .resume-editor__toolbar-actions .btn span:not(.icon):not(.sr-only) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* Mobile Editor ⇄ Preview переключатель (≤1023px). На десктопе скрыт —
   split-view показывает обе колонки. Segmented control с tap-target ≥44px. */
.resume-editor__viewtoggle {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-2) clamp(var(--space-3), 2vw, var(--space-5));
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 2;
}
.resume-editor__viewtab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.resume-editor__viewtab.is-active {
    color: var(--color-text);
    background: var(--color-surface-elevated);
    border-color: var(--color-accent);
}
.resume-editor__viewtab:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
/* На телефоне ряд режимов остаётся В ЭКРАНЕ. `flex: 1` делит ширину поровну
   только пока содержимое позволяет: без `min-width: 0` кнопка не сжимается
   ниже слова «Редактировать», и на 375px третья кнопка уходила за правый
   край — страница получала горизонтальную прокрутку, запрещённую в этом
   репозитории. Место освобождают иконки: рядом с тремя однозначными
   подписями они ничего не добавляли. */
@media (max-width: 560px) {
    .resume-editor__viewtab { min-width: 0; gap: 0; }
    .resume-editor__viewtab .icon { display: none; }
    /* Пол репозитория — 320px, а не 375: там на кнопку приходится ~94px при
       ~103px подписи. Обрезка живёт на самой подписи, а не на кнопке: кнопка
       центрирует содержимое, и `overflow` на ней срезал текст С ДВУХ сторон —
       «Редактировать» теряло и первую букву, и последнюю. */
    .resume-editor__viewtab > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@media (min-width: 1024px) {
    .resume-editor__viewtoggle {
        display: none;
    }
}
/* ≤1023px: показываем только активную колонку (full-screen). По умолчанию
   editor; is-view-preview → preview. На десктопе обе видны (split). */
@media (max-width: 1023px) {
    .resume-editor.is-view-preview .resume-editor__form-col {
        display: none;
    }
    .resume-editor:not(.is-view-preview) .resume-editor__preview-col {
        display: none;
    }
}

.resume-editor__conflict {
    padding: var(--space-3) var(--space-4) 0;
}

.resume-editor__grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

@media (min-width: 1024px) {
    .resume-editor__grid {
        flex-direction: row;
        gap: 0;
    }
    .resume-editor__form-col {
        flex: 0 0 minmax(380px, 42%);
        max-width: 540px;
    }
    .resume-editor__preview-col {
        flex: 1;
        border-top: none;
        border-left: 1px solid var(--color-border);
    }
}

.resume-editor__form-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Левый padding = 0: карточки «Контактная информация»/«Представление»
       выравниваются по левому краю с заголовком/крошками (форм-колонка — первый
       ребёнок грида, её левый край = левый край page-shell). Справа space-3 —
       отступ от границы с превью; верх space-3, низ space-4. */
    padding: var(--space-3) var(--space-3) var(--space-4) 0;
    gap: var(--space-4);
}

.resume-editor__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Per-resume навыки (overlay слой 5) — отдельный блок под формой редактора.
   Навык рисует общий ui_skill_chip, add-форма — .career-skills-add. */
.resume-skills-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* Единственный редактор навыков (секция skills убрана из основной формы,
       чтобы навык не дублировался текст-полем + чипом). Оформляем как секцию-
       карточку в ритме .editor-section — bg-soft + uppercase-eyebrow. */
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.resume-skills-editor__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.resume-skills-editor__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

.resume-skills-editor__hint {
    margin: 0;
    font-size: var(--font-size-sm);
}

.resume-editor__sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Form section-блоки: subtle surface card (Linear/Notion). Раньше — heavy
   border на 1px var(--color-border); теперь — soft elevated surface с тонким
   border-bottom между secthead и body, чтобы visual weight ушёл на title +
   accent-bar при focus-within. */
.editor-section {
    /* Как карточки письма (surface-card): мягкий bg-soft + border + radius. */
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.editor-section:focus-within {
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.06);
}

.editor-section__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
/* На десктопе (pointer) шапка-тоггл ниже — 44px нужен под touch, не под мышь. */
@media (min-width: 1024px) {
    .editor-section__summary { min-height: 36px; }
}

.editor-section__summary::-webkit-details-marker {
    display: none;
}

.editor-section__summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.editor-section__summary:hover .editor-section__title {
    color: var(--color-text);
}

.editor-section__title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    transition: color 0.15s ease;
}

.editor-section__chevron {
    color: var(--color-text-muted);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.editor-section[open] .editor-section__chevron {
    transform: rotate(180deg);
}

.editor-section__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-3);
}

/* Two-column row для basics: Имя+Фамилия (1-2) и Email+Телефон (3-4) —
   короткие поля, экономят 50% вертикали. Город и далее — full-width.
   На mobile (≤480px) — stack. */
@media (min-width: 480px) {
    .editor-section[data-editor-section="basics"] .editor-section__body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-3);
        row-gap: var(--space-2);
    }
    .editor-section[data-editor-section="basics"] .editor-section__body > *:nth-child(n+5) {
        grid-column: 1 / -1;
    }
}

/* `.field` parent rules задают margin-bottom: var(--space-4) — это
   правильно для standalone-форм, но внутри editor-section gap несётся
   parent'ом. Reset margin + tighter label-input gap (внутренний). */
.editor-section .editor-field {
    margin-bottom: 0;
    gap: 5px; /* label→input; override от .field { gap: var(--space-1) } */
}

/* Тихие sentence-case лейблы полей. Капс убран сознательно: секция-eyebrow и
   номерная плашка записи уже в капсе — если и лейблы полей орут капсом, стена
   капса убивает иерархию (всё кричит одинаково). Здесь лейбл = приглушённый
   muted, medium weight, sentence-case ("Имя"), а «голос» отдан значению в
   инпуте. Три уровня: секция (капс) → поле (тихо) → значение (тёмное). */
.editor-section .field__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.25;
}

/* Хинты полей («Например: 2020…») — тише лейбла: мельче и полупрозрачный muted,
   чтобы служебная подсказка не спорила по весу с лейблом и значением. */
.editor-section .field__hint {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: color-mix(in srgb, var(--color-text-muted) 78%, transparent);
}

/* Inputs в editor-section: tighter vertical padding. min-height на
   --tap-min (44px WCAG floor) держим — touch targets обязательны. */
.editor-section .input,
.editor-section textarea.input {
    padding-block: var(--space-2);
    font-size: 0.9375rem;
    /* Контрастный hairline: базовый --color-border (#E2E8F0) почти сливается с
       фоном карточки --color-bg-soft (#ECEFF4) → инпуты читались белыми
       «капсулами». --color-border-strong даёт чёткую грань, радиус меньше (sm) —
       «точный инструмент», а не пузырёк. */
    border-color: var(--color-border-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.editor-section .input:hover:not(:focus-visible) {
    border-color: color-mix(in srgb, var(--color-border-strong) 55%, var(--color-text-muted));
}
.editor-section .input:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.12);
}
/* На десктопе инпуты ниже (pointer, а не touch — 44px floor не нужен) — форма
   резюме длинная, компактность экономит экраны. Мобайл держит 44px. */
@media (min-width: 1024px) {
    .editor-section .input {
        min-height: 34px;
        padding-block: var(--space-1);
    }
}

.editor-section__empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Запись секции-списка (место работы / образование): editorial-«ledger», без
   вложенной белой карточки. Группировку несут номерной моно-чип и hairline-
   divider между записями — а НЕ card-in-card с врезанным в рамку fieldset'а
   <legend> (тот «висел» на границе карточки, паттерна нет в дизайн-системе). */
.editor-item {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
.editor-item > * + * { margin-top: var(--space-2); }
.editor-item + .editor-item {
    /* gap секции (space-2) сверху + margin (space-2) = space-4 над линией,
       padding-top space-4 под ней — симметричный воздух вокруг divider'а. */
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    /* Solid, не dashed: при DPR≥1.5 + zoom вкладки 1px-dashed схлопывается в
       субпиксель и штрихи исчезают; solid-hairline переживает это надёжно. */
    border-top: 1px solid var(--color-border-strong);
}

.editor-item__legend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 0;
    /* border:0 на fieldset выше убирает legend-нотч; float:none — нормальный поток. */
    float: none;
}
.editor-item__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.09);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}
.editor-item__name {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-soft);
}

.editor-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.editor-field .field__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* Компактный список буллетов (обязанности/достижения) — одна подпись группы +
   строки с маркером и auto-grow textarea вместо нумерованных «ОБЯЗАННОСТЬ N». */
.editor-bullets { display: flex; flex-direction: column; gap: 6px; }
.editor-bullets .field__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
}
/* Группа буллетов — одна textarea, строка на пункт. Список полей с точками
   ушёл вместе с прежней разметкой: он показывал пункты, придуманные моделью, и
   не давал дописать свой. */
.editor-bullets__area {
    min-height: 4.5rem;
    /* auto-grow под содержимое (Chrome 123+); fallback — rows из вью-модели. */
    field-sizing: content;
    resize: vertical;
    padding: var(--space-2);
    line-height: 1.5;
}

.resume-editor__preview-col {
    min-width: 0;
    padding: clamp(var(--space-4), 2.5vw, var(--space-6));
    background:
        radial-gradient(circle at 30% 10%, rgba(var(--color-accent-rgb), 0.03), transparent 55%),
        var(--color-bg-soft);
    border-top: 1px solid var(--color-border);
}

.resume-editor__preview {
    /* Без своей рамки: лист резюме (.tpreview__sheet) — единственный frame;
       вложенный border+radius+bg вокруг него смотрелся лишней двойной рамкой.
       Превью-колонка (canvas) даёт фон, лист «лежит» на нём. */
    overflow: hidden;
}

/* Скролл-контейнер live-preview fragment'а (resume_render_for_preview, Task 24).
   resume-editor.js свопает его innerHTML; внутренний .tpreview центрирует лист. */
.resume-editor__preview-doc {
    display: block;
    width: 100%;
    height: 70vh;
    overflow-y: auto;
    /* Верх space-3 — в ритме с левой колонкой (form-col), чтобы лист превью не
       висел ниже «Контактной информации». */
    padding: var(--space-3) var(--space-4) var(--space-4);
}

/* WYSIWYG геометрия листа превью (см. resume-editor.js applyGeometry): секция
   «Печать» меняет max-width (размер) и padding (поля) листа на экране, а не
   только в PDF. data-* живут на контейнере (он не свопается при re-fetch),
   селектор бьёт по обоим вариантам листа (initial .tdoc-scope / fragment
   .tpreview__sheet). Плавный переход подчёркивает, что контрол «живой». */
.resume-editor__preview-doc .tpreview__sheet,
.resume-editor__preview-doc .tdoc-scope {
    transition: max-width 200ms ease, padding 200ms ease;
}
.resume-editor__preview-doc[data-margins="narrow"] .tpreview__sheet,
.resume-editor__preview-doc[data-margins="narrow"] .tdoc-scope { padding: var(--space-3); }
.resume-editor__preview-doc[data-margins="normal"] .tpreview__sheet,
.resume-editor__preview-doc[data-margins="normal"] .tdoc-scope { padding: var(--space-6); }
.resume-editor__preview-doc[data-margins="wide"] .tpreview__sheet,
.resume-editor__preview-doc[data-margins="wide"] .tdoc-scope { padding: var(--space-10, 4rem); }
.resume-editor__preview-doc[data-page-size="A4"] .tpreview__sheet,
.resume-editor__preview-doc[data-page-size="A4"] .tdoc-scope { max-width: 48rem; }
.resume-editor__preview-doc[data-page-size="Letter"] .tpreview__sheet,
.resume-editor__preview-doc[data-page-size="Letter"] .tdoc-scope { max-width: 51rem; }

/* ≥1024px — настоящий split: форма скроллится независимо, preview sticky. */
@media (min-width: 1024px) {
    /* Viewport-рамка split-view: колонки скроллятся ВНУТРИ себя (form-col +
       preview-doc = calc(100dvh - 4rem)), поэтому редактор фиксируем на высоту
       вьюпорта и клипим. Без overflow:hidden высокий flex-контент (секции опыта
       на тысячи px) протекал мимо внутренних скроллеров и растил страницу на
       ~10000px → при скролле колонки уезжали вверх, снизу оставалась пустота.
       ТОЛЬКО desktop: на мобиле (<1024px) колонки стекаются и страница обязана
       скроллиться целиком, иначе низ формы недоступен. */
    .resume-editor {
        height: 100dvh;
        overflow: hidden;
    }

    .resume-editor__grid {
        flex-direction: row;
    }

    .resume-editor__form-col {
        flex: 0 0 38%;
        max-width: 38%;
        overflow-y: auto;
        max-height: calc(100dvh - 4rem);
    }

    .resume-editor__preview-col {
        flex: 1;
        border-top: 0;
        border-left: 1px solid var(--color-border);
        /* Вертикальный padding = 0: высота колонки = высота preview-doc =
           высота form-col → низ обеих колонок ровный. Бока — небольшой воздух. */
        padding: 0 clamp(var(--space-3), 2vw, var(--space-5));
    }

    .resume-editor__preview {
        position: sticky;
        top: 0;
    }

    .resume-editor__preview-doc {
        /* Та же высота, что у form-col (max-height 100dvh-4rem) → ровный низ. */
        height: calc(100dvh - 4rem);
    }
}

/* AI assist секции «Представление» (Task 22): кнопка генерации + preview-карточка. */
.editor-aidraft {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.editor-aidraft__trigger.is-loading .icon {
    animation: resume-job-retry-spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .editor-aidraft__trigger.is-loading .icon { animation: none; } }

.editor-aidraft__error {
    margin: 0;
    color: var(--color-danger);
    font-size: var(--font-size-sm);
}

.editor-aidraft__card {
    display: flex;
    flex-direction: column;
    gap: 2px var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
}
/* Карточка AI-предложения скрыта до генерации: display:flex перебивал бы
   [hidden]{display:none}, из-за чего пустое «AI-предложение» с «Применить/
   Отклонить» висело в дефолтном состоянии (нечего применять). */
.editor-aidraft__card[hidden] { display: none; }

.editor-aidraft__title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.editor-aidraft__hint {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.editor-aidraft__body {
    white-space: pre-wrap;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
}

.editor-aidraft__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ===========================================================================
   Customize-панель целевого резюме (Task 23) — slide-in справа поверх формы
   split-view редактора. Mobile-first: на ≤767px разворачивается как
   bottom-sheet (snaps снизу), ≥768px — боковая панель. Управляется
   resume-editor.js. Presentation-only: меняет шаблон / accent / порядок секций.
   =========================================================================== */
.customize-panel[hidden] {
    display: none;
}

/* ПРАВИЛО СКРОЛЛ-КОНТЕЙНЕРОВ (пойман трижды, проверяется `make lint-css-scroll`).
   1. Не смешивать оси overflow в одном блоке. Если одна ось `visible`, а
      вторая нет, используемое значение `visible` по спецификации становится
      `auto`: элемент молча превращается в скролл-контейнер высотой во весь
      контент, скроллить ему нечего, а колесо он забирает себе. Симптом всегда
      один — над панелью не прокручивается ничего, а прокрутить удаётся, только
      поймав узкую полоску рядом. Возвращаете элемент в поток — пишите
      `overflow: visible` (обе оси разом).
   2. Один скроллер на колонку. Вложенные скроллеры (панель И её содержимое)
      делят колесо непредсказуемо: решите, кто скроллится, и оставьте второму
      `overflow: visible`.
   3. `overscroll-behavior: contain` — только там, где хвост скроллера
      достижим. На доке, чей низ за вьюпортом, он делает конец панели
      недостижимым: колесо обязано чейниться в страницу. */

/* ПРАВИЛО СКРОЛЛ-КОНТЕЙНЕРОВ (дефект пойман трижды, проверяется
   `make lint-css-scroll`).
   1. Не смешивать оси overflow в одном блоке. Если одна ось `visible`, а
      вторая нет, используемое значение `visible` по спецификации становится
      `auto`: элемент молча превращается в скролл-контейнер высотой во весь
      контент, скроллить ему нечего, а колесо он забирает себе. Симптом всегда
      один — над панелью не прокручивается ничего, а прокрутить удаётся, только
      поймав узкую полоску рядом. Возвращаете элемент в поток — пишите
      `overflow: visible` (обе оси разом).
   2. Один скроллер на колонку. Вложенные скроллеры (панель И её содержимое)
      делят колесо непредсказуемо.
   3. `overscroll-behavior: contain` — только там, где хвост скроллера
      достижим: на доке, чей низ за вьюпортом, он делает конец панели
      недостижимым. */

/* НЕмодальный «режим оформления»: панель никогда не перекрывает резюме —
   изменения видны вживую (паттерн resume.io / Canva / Apple Photos edit).

   <1024px — компактный bottom-sheet (~46dvh) БЕЗ backdrop'а: live-preview
   виден и скроллится над шитом (редактор переключает вид на «Превью» сам). */
.customize-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
}

.customize-panel__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
    height: clamp(300px, 46dvh, 520px);
    overflow-y: auto;
    /* Явный hidden по X: при overflow-y:auto браузер вычисляет overflow-x в auto,
       из-за чего скролл слайдера шаблонов утаскивал всю панель вбок. */
    overflow-x: hidden;
    /* Скролл шита замкнут: дочерпав список, палец не прокручивает превью. */
    overscroll-behavior: contain;
    padding: var(--space-2) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    box-shadow: 0 -12px 32px rgba(var(--color-navy-rgb), 0.18);
    animation: customize-slide-up 220ms ease;
}

/* Grip-полоска мобильного шита — визуальный сигнал «это выезжающий лист». */
.customize-panel__grip {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 4px;
    margin: 0 auto;
    border-radius: 999px;
    background: var(--color-border-strong);
}

@keyframes customize-slide-up {
    from { transform: translateY(2rem); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ≥1024px — док на месте формы: панель — flex-колонка грида редактора (та же
   ширина, что form-col), form-col скрыта root-классом is-mode-design. Превью
   остаётся нетронутым справа — WYSIWYG без перекрытий. */
@media (min-width: 1024px) {
    .customize-panel {
        position: static;
        z-index: auto;
        flex: 0 0 38%;
        max-width: 38%;
        min-width: 0;
        overflow-y: auto;
        /* НЕ замыкаем скролл (никакого overscroll-behavior: contain): пока
           страница не доскроллена, низ дока за вьюпортом — дочерпав док,
           колесо обязано чейниться в страницу и доводить редактор до верха
           (ровно как ведёт себя form-col). С contain хвост панели («Печать»,
           последние секции) был недостижим. */
        max-height: calc(100dvh - 4rem);
    }
    .customize-panel__dialog {
        /* flex-shrink 0: диалог держит полную высоту контента, скроллером
           остаётся сама панель (иначе диалог сжимался под高у панели и
           заводил собственный внутренний скролл — два вложенных скроллера). */
        flex: 0 0 auto;
        height: auto;
        /* Обе оси разом, а не только overflow-y. По спецификации, если одна ось
           `visible`, а вторая нет, используемое значение `visible` становится
           `auto` — и диалог оставался скролл-контейнером высотой во весь
           контент, которому нечего скроллить. Колесо над панелью глотал он:
           страница не двигалась, панель не двигалась, и прокрутить док можно
           было, только поймав узкую полоску грида между панелью и резюме.
           Базовое `overflow-x: hidden` нужно мобильному шиту и здесь снимается. */
        overflow: visible;
        padding: var(--space-3) var(--space-3) var(--space-4) 0;
        background: transparent;
        border-top: 0;
        border-radius: 0;
        box-shadow: none;
        animation: customize-fade-in 180ms ease;
    }
    .customize-panel__grip {
        display: none;
    }
    /* В доке крестик избыточен рядом с активной кнопкой «Оформление», но
       остаётся как явный выход (паттерн «закрой где открыл» + Esc). */
    @keyframes customize-fade-in {
        from { transform: translateX(-0.75rem); opacity: 0; }
        to   { transform: translateX(0);        opacity: 1; }
    }

    /* Режим оформления: форма уступает колонку панели. */
    .resume-editor.is-mode-design .resume-editor__form-col {
        display: none;
    }

}

/* Мобильный режим оформления: резюме над шитом должно доскролливаться до
   конца — резервируем высоту шита снизу превью. Bottom-nav прячется
   (иммерсивный шит, как system sheets в iOS: tab bar уступает место задаче) —
   заодно решает stacking-context ловушку (.app-main z-1 запирает z шита ниже
   глобального .bottom-nav z-50). */
@media (max-width: 1023px) {
    .resume-editor.is-mode-design .resume-editor__preview-doc {
        padding-bottom: clamp(300px, 48dvh, 540px);
    }
    body:has(.resume-editor.is-mode-design) .bottom-nav {
        display: none;
    }
    /* В режиме оформления каждый пиксель над шитом — резюме (иммерсивный
       режим, как edit-mode в iOS Photos): прячем контент-тулбар редактора И
       page-chrome над ним (крошки/заголовок/действия документа). Выход
       очевиден — сегмент режимов остаётся сверху. */
    .resume-editor.is-mode-design .resume-editor__toolbar {
        display: none;
    }
    body:has(.resume-editor.is-mode-design) .page-shell > *:not(.resume-editor) {
        display: none;
    }
}

/* Десктопный сегмент режимов в тулбаре (паттерн resume.io «Edit | Customize»):
   переиспользует .resume-editor__viewtab, но компактнее (тулбарная высота). */
.resume-editor__modetoggle {
    display: none;
}
@media (min-width: 1024px) {
    .resume-editor__modetoggle {
        display: flex;
        gap: var(--space-1);
        padding: 2px;
        background: var(--color-surface-elevated);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
    }
    .resume-editor__modetoggle .resume-editor__viewtab {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 0 var(--space-3);
        border: 1px solid transparent;
        background: transparent;
    }
    .resume-editor__modetoggle .resume-editor__viewtab.is-active {
        background: var(--color-surface);
        border-color: var(--color-border-strong);
        box-shadow: var(--shadow-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .customize-panel__dialog { animation: none; }
}

.customize-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.customize-panel__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.customize-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.customize-panel__close:hover {
    background: var(--color-surface-elevated);
    color: var(--color-text);
}

.customize-panel__close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.customize-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Канон form-group eyebrow (см. .editor-section__title / .surface-card__eyebrow). */
.customize-group__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

/* Подпись под-группы (Размер страницы / Поля) — иконка + текст, отделяет два
   безымянных сегмента внутри «Печати», чтобы было понятно, что каждый делает. */
.customize-group__sublabel {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}
.customize-group__sublabel .icon { color: var(--color-text-muted); }

.customize-group__hint {
    margin: 0;
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--color-text-muted) 78%, transparent);
}

/* --- Цвет: пресет-swatch'и + hex-input ------------------------------------ */
.customize-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
/* На телефоне палитра — одна лента с прокруткой вбок: в шите высотой в пол-
   экрана три ряда образцов отодвигали витрину шаблонов за край. */
@media (max-width: 1023px) {
    .customize-swatches {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding: 3px 2px;
        margin: -3px -2px;
    }
    .customize-swatches::-webkit-scrollbar { display: none; }
    .customize-swatch { flex: none; }
}

.customize-swatch {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background-color: var(--swatch, var(--color-accent));
    cursor: pointer;
    box-shadow: inset 0 0 0 2px var(--color-surface);
}

.customize-swatch--sage   { --swatch: var(--resume-accent-sage); }
.customize-swatch--teal   { --swatch: var(--resume-accent-teal); }
.customize-swatch--navy   { --swatch: var(--resume-accent-navy); }
.customize-swatch--coral  { --swatch: var(--resume-accent-coral); }
.customize-swatch--plum   { --swatch: var(--resume-accent-plum); }
.customize-swatch--ochre  { --swatch: var(--resume-accent-ochre); }
.customize-swatch--slate  { --swatch: var(--resume-accent-slate); }
.customize-swatch--accent { --swatch: var(--resume-accent-accent); }
.customize-swatch--ink    { --swatch: var(--resume-accent-ink); }
.customize-swatch--wine   { --swatch: var(--resume-accent-wine); }
.customize-swatch--emerald { --swatch: var(--resume-accent-emerald); }
.customize-swatch--ocean  { --swatch: var(--resume-accent-ocean); }
.customize-swatch--indigo { --swatch: var(--resume-accent-indigo); }
.customize-swatch--rose   { --swatch: var(--resume-accent-rose); }
.customize-swatch--mint { --swatch: var(--resume-accent-mint); }
.customize-swatch--sun { --swatch: var(--resume-accent-sun); }
.customize-swatch--cyan { --swatch: var(--resume-accent-cyan); }
.customize-swatch--lime { --swatch: var(--resume-accent-lime); }
.customize-swatch--blush { --swatch: var(--resume-accent-blush); }
.customize-swatch--peach { --swatch: var(--resume-accent-peach); }
.customize-swatch--aqua { --swatch: var(--resume-accent-aqua); }
.customize-swatch--lilac { --swatch: var(--resume-accent-lilac); }
.customize-swatch--sky { --swatch: var(--resume-accent-sky); }
.customize-swatch--sand { --swatch: var(--resume-accent-sand); }

.customize-swatch.is-active {
    border-color: var(--color-text);
}

.customize-swatch:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
/* Четырнадцать тонов: на десктопе (точный указатель) образец меньше, чтобы
   палитра вставала в два ряда над витриной; на тач-экране — полные 44px. */
@media (min-width: 1024px) and (pointer: fine) {
    .customize-swatches { gap: 6px; }
    .customize-swatch { width: 34px; height: 34px; }
    .customize-hex__picker { width: 34px; height: 34px; }
    .customize-hex__input { min-height: 36px; max-width: 10rem; }
}

/* «Свой цвет» — одна строка под образцами: подпись слева, пипетка и hex. */
.customize-hex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

/* Ряд «свой цвет»: круглый нативный color-picker (с пипеткой в Chromium)
   + hex-поле. Picker стилизуется под customize-swatch: убираем нативную
   рамку swatch-обёртки, скругляем до круга. */
.customize-hex__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.customize-hex__picker {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.customize-hex__picker::-webkit-color-swatch-wrapper {
    padding: 3px;
}
.customize-hex__picker::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}
.customize-hex__picker::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}
.customize-hex__picker:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.customize-hex__input {
    flex: 1 1 auto;
    min-width: 0;
}

.customize-hex__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.customize-hex__input {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    font-size: 16px;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-variant-numeric: tabular-nums;
}

.customize-hex__input:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.12);
}

/* --- Шаблон: витрина карточек с живой миниатюрой ------------------------- */
/* Фильтр витрины — ряд чипов; на узкой панели листается вбок. */
/* Фильтры переносятся, а не прячутся за край: пять коротких вариантов —
   спрятанный пятый человек не найдёт. */
.design-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: calc(-1 * var(--space-1));
}
.design-filter__chip {
    flex: none;
    min-height: var(--tap-min);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-soft);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.design-filter__chip:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.design-filter__chip.is-active {
    border-color: transparent;
    background: var(--color-text);
    color: var(--color-bg);
}
.design-filter__chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (min-width: 1024px) {
    .design-filter__chip { min-height: 2.25rem; padding: 0 var(--space-3); font-size: 0.8125rem; }
}

/* Витрина — сетка листов A4: две колонки в доке и на телефоне, три на
   широкой панели. Карточка — сам документ человека в этом шаблоне (лист 794px
   масштабируется под ширину карточки скриптом: --design-thumb-scale), подпись
   и метка ATS под ним. Прежде здесь был горизонтальный слайдер схем из
   полосок: семь одинаковых белых прямоугольников, по которым не угадать
   документ. */
/* Отступ в 6px — место под кольцо выбранной карточки: панель прокручивается
   и обрезает всё, что выходит за её край, и у левой колонки кольцо было
   неполным. */
.customize-templates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
    min-width: 0;
    padding: 6px;
}
/* Контейнер — группа панели: сетка не может спрашивать собственную ширину. */
.customize-group:has(> .customize-templates) { container-type: inline-size; }
@container (min-width: 36rem) {
    .customize-templates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.customize-template {
    /* relative — containing block для visually-hidden radio: без него radio
       с position:absolute уходил к диалогу и раздувал его ширину. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    cursor: pointer;
}
.customize-template[hidden] { display: none; }
.customize-template__pick {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    cursor: pointer;
}
/* Листание цветов в карточке: пилюля поверх низа листа. На тач-экране
   видна всегда, с точным указателем — при наведении, фокусе и у выбранной
   карточки. */
.design-card-colors {
    position: absolute;
    left: 50%;
    bottom: calc(1.5rem + var(--space-2) + 10px);
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 10px -2px rgba(16, 18, 26, 0.3);
}
.design-card-colors[hidden] { display: none; }
.design-card-colors__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #1B1D22;
    cursor: pointer;
}
.design-card-colors__btn:hover { background: rgba(16, 18, 26, 0.08); }
.design-card-colors__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.design-card-colors__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--card-color, transparent);
    box-shadow: inset 0 0 0 1px rgba(16, 18, 26, 0.15);
}
@media (pointer: fine) {
    .design-card-colors__btn { width: 30px; height: 30px; }
    .design-card-colors { opacity: 0; transition: opacity 140ms ease; }
    .customize-template:hover .design-card-colors,
    .customize-template:focus-within .design-card-colors,
    .customize-template.is-active .design-card-colors { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .design-card-colors { transition: none; } }
.customize-template__thumb {
    position: relative;
    display: block;
    aspect-ratio: 210 / 297;
    overflow: hidden;
    border-radius: var(--radius-md);
    background:
        linear-gradient(color-mix(in srgb, var(--resume-paper-ink) 10%, transparent) 0 0) left 12% top 9% / 46% 7px no-repeat,
        linear-gradient(color-mix(in srgb, var(--resume-paper-ink) 7%, transparent) 0 0) left 12% top 15% / 30% 4px no-repeat,
        var(--surface-paper);
    box-shadow: 0 0 0 1px var(--color-border), 0 1px 2px rgba(16, 18, 26, 0.06);
    transition: box-shadow 160ms ease, transform 160ms ease;
}
.customize-template__thumb.is-loaded { background: var(--surface-paper); }
.customize-template:hover .customize-template__thumb {
    box-shadow: 0 0 0 1px var(--color-border-strong), 0 10px 24px -12px rgba(16, 18, 26, 0.35);
    transform: translateY(-2px);
}
.customize-template.is-active .customize-template__thumb {
    box-shadow: 0 0 0 2px var(--color-accent), 0 0 0 6px rgba(var(--color-accent-rgb), 0.16);
}
.customize-template:focus-within .customize-template__thumb {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .customize-template__thumb { transition: none; }
    .customize-template:hover .customize-template__thumb { transform: none; }
}
/* Лист миниатюры: ширина A4 при 96 dpi, поля как у печати; масштаб — от
   ширины карточки. Раскладка — как на широком листе, а не как на экране
   телефона: медиазапросы документа смотрят на окно, и без этих правил
   двухколоночный шаблон на телефоне показывал бы одну колонку, которой нет
   в PDF. */
.design-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 794px;
    transform: scale(var(--design-thumb-scale, 0.25));
    transform-origin: 0 0;
    pointer-events: none;
}
.design-thumb .tpreview__sheet {
    width: 794px;
    max-width: none;
    min-height: 1123px;
    padding: 52px 56px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.design-thumb .tdoc__name { font-size: 2.4rem; }
.design-thumb .tdoc--sidebar { grid-template-columns: minmax(11rem, 31%) minmax(0, 1fr); }
.design-thumb .tdoc--sidebar .tdoc__name,
.design-thumb .tdoc--duo .tdoc__name { font-size: 1.5rem; }
.design-thumb .tdoc__exp {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-4);
    align-items: baseline;
}
.design-thumb .tdoc__exp-period {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
}
.design-thumb .tdoc--sidebar .tdoc__exp { grid-template-columns: minmax(0, 1fr); }
.design-thumb .tdoc--sidebar .tdoc__exp .tdoc__exp-period { grid-column: 1; grid-row: 2; justify-self: start; }
.design-thumb .tdoc__cols { grid-template-columns: minmax(0, 1fr) minmax(10rem, 32%); }
.design-thumb .tdoc--icons .tdoc__cols,
.design-thumb .tdoc--frame .tdoc__cols { grid-template-columns: minmax(10rem, 32%) minmax(0, 1fr); }
.design-thumb .tdoc--icons .tdoc__side,
.design-thumb .tdoc--frame .tdoc__side { grid-column: 1; grid-row: 1; }
.design-thumb .tdoc--icons .tdoc__main,
.design-thumb .tdoc--frame .tdoc__main { grid-column: 2; grid-row: 1; }
.design-thumb .tdoc--minimal .tdoc__section {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: var(--space-6);
}
.design-thumb .tdoc--minimal .tdoc__section > * { grid-column: 2; }
.design-thumb .tdoc--minimal .tdoc__section > .tdoc__bar { grid-column: 1; grid-row: 1 / span 40; margin: 0.35em 0 0; }

.customize-template__foot {
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-width: 0;
    padding: 0 2px;
}
.customize-template__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}
.customize-template.is-active .customize-template__name { color: var(--color-accent); }
.customize-template__badge {
    flex: none;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
    color: var(--color-success);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
/* Имя выбранного цвета в заголовке группы: «Цвет · Тёмно-синий». */
.customize-group__value { font-weight: 500; color: var(--color-text); }
.customize-group__value::before { content: " · "; color: var(--color-text-muted); }

/* --- Порядок секций: drag-and-drop список --------------------------------- */
.customize-order {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.customize-order__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    cursor: grab;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.customize-order__row:hover {
    border-color: color-mix(in srgb, var(--color-border-strong) 55%, var(--color-text-muted));
}

.customize-order__row.is-dragging {
    opacity: 0.5;
}

.customize-order__row.is-drop-target {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.12);
}

.customize-order__row:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.12);
}

.customize-order__handle {
    display: inline-flex;
    color: var(--color-text-muted);
}

.customize-order__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 1.5rem;
    height: 1.5rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.09);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

.customize-order__name {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* Rename-input (Resume Builder section rename → SectionLabels). Растягивается
   на свободную ширину строки; placeholder = дефолтный i18n-заголовок секции. */
.customize-order__rename {
    flex: 1 1 auto;
    min-width: 0;
    font-size: max(16px, var(--font-size-sm)); /* anti-zoom на iOS */
    color: var(--color-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
}
.customize-order__rename:hover {
    border-color: var(--color-border);
}
.customize-order__rename:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-surface);
}

/* Show/hide toggle: глаз перечёркивается, строка тускнеет при скрытии. */
.customize-order__hide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.customize-order__hide:hover {
    color: var(--color-text);
}
.customize-order__hide:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
/* Eye-иконки: показываем eye когда видимо, eye-off когда скрыто. */
.customize-order__eye--hide {
    display: none;
}
.customize-order__hide[aria-pressed="true"] .customize-order__eye--show {
    display: none;
}
.customize-order__hide[aria-pressed="true"] .customize-order__eye--hide {
    display: inline-flex;
}
.customize-order__row.is-hidden {
    opacity: 0.55;
}
.customize-order__row.is-hidden .customize-order__rename {
    text-decoration: line-through;
}

/* Segmented radio (page size / margins) — компактный сегмент-выбор. */
.customize-seg {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}
.customize-seg__opt {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.customize-seg__opt.is-active {
    color: var(--color-text);
    border-color: var(--color-accent);
}
.customize-seg__opt:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ===================================================================== */
/* Cover Letter editor (Task 25) — letter-typography + AI Edit panel.     */
/* ===================================================================== */

.cl-editor {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.cl-editor__topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    padding-top: max(var(--space-3), env(safe-area-inset-top));
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.cl-editor__topbar-lead,
.cl-editor__topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.cl-editor__doc-title {
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}

.cl-editor__conflict { padding: var(--space-3) var(--space-4) 0; }

.cl-editor__grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.cl-editor__paper-col,
.cl-editor__ai-col {
    min-width: 0;
    padding: var(--space-4);
}

/* --- letter typography ------------------------------------------------ */
.letter {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5);
    background: var(--surface-paper);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md, 0 1px 3px rgba(0, 0, 0, 0.12));
}

.letter__head { margin-bottom: var(--space-5); }

.letter__name {
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-letter-name);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.letter__contacts {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.letter__name.is-placeholder,
.letter__contacts.is-placeholder { color: var(--color-text-disabled); }

.letter__rule {
    height: 1px;
    margin: var(--space-5) 0;
    border: 0;
    background: var(--color-border);
}

.letter__subject { margin-bottom: var(--space-5); }
.letter__subject.is-empty .letter__eyebrow { opacity: 0.6; }

.letter__eyebrow {
    display: block;
    margin-bottom: var(--space-1);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.letter__subject-text {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
}

.letter__body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text);
    white-space: pre-line;
    word-break: break-word;
}

/* contenteditable focus + empty-state */
.letter__subject-text[contenteditable]:focus-visible,
.letter__body[contenteditable]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* --- AI Edit panel ---------------------------------------------------- */
.cl-ai {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.cl-ai__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cl-ai__title {
    margin: 0;
    font-size: 1.125rem;
}

.cl-ai__hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.cl-ai__error {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: rgba(var(--color-danger-rgb), 0.10);
    color: var(--color-danger);
    font-size: var(--font-size-sm);
}

.cl-ai__translate {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}

.cl-ai__custom {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cl-ai__regen {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.cl-ai__quota {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* spinner-state на AI-кнопках во время генерации */
.cl-ai .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* --- desktop split (≥1024px) ----------------------------------------- */
@media (min-width: 1024px) {
    .cl-editor__grid {
        flex-direction: row;
        align-items: flex-start;
    }
    .cl-editor__paper-col {
        flex: 1 1 60%;
        min-width: 0;
        overflow-y: auto;
    }
    .cl-editor__ai-col {
        flex: 1 1 40%;
        max-width: 28rem;
        position: sticky;
        top: 5rem;
    }
}

/* --- mobile (≤767px) — AI-панель под письмом, узкие поля ------------- */
@media (max-width: 767px) {
    .letter { padding: var(--space-6) var(--space-4); }
    .cl-editor__paper-col,
    .cl-editor__ai-col { padding: var(--space-3); }
}

/* === Admin parser ops actions (overview.html) — replace inline styles ===
   Bulk-replay DLQ + bulk-reprocess forms in /admin/parser. Extract from
   inline style= attributes (CLAUDE.md hard-rule: no <style>/<script> в
   страничных шаблонах; то же касается structural inline style=). */
.ops-actions__details {
    margin-bottom: var(--space-4);
}
.ops-actions__summary {
    cursor: pointer;
    padding: var(--space-2) 0;
    font-weight: 600;
}
.ops-actions__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.ops-actions__form--narrow { max-width: 480px; }
.ops-actions__form--wide   { max-width: 640px; }

/* === Admin «Подборка дня» (admin/vacancy_picks/overview.html) ==============
   Сводка разделами в сетку: на телефоне — колонка, шире — две. Поиск
   человека — поле + кнопка в ряд, рычаги под карточкой его расписания. */
.vp-admin__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.vp-admin__note { margin: var(--space-2) 0 0; }
.vp-admin__lookup {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.vp-admin__lookup > .field { flex: 1 1 16rem; margin: 0; }
.vp-admin__levers {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-4);
}
@media (min-width: 900px) {
    .vp-admin__grid,
    .vp-admin__levers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === Admin «Оплата» (admin/billing/*.html) ================================
   Карточки разделов колонкой с общим ритмом; формы действий — под таблицей
   своей карточки. Эффекты — моно-список без маркеров: это служебные маркеры,
   их читают глазами при разборе. */
.billing-admin > .surface-card { margin-bottom: var(--space-4); }
.billing-admin__heading {
    margin: var(--space-5) 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 600;
}
.billing-admin__effects {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
}

/* === Letter library card variants (documents_letters.html) ================
   Reuses .library-card* base (pastel frame, stacked sheets, hover fan-out).
   Letter-specific overrides on front sheet for letter-style mock. */

/* Letters всегда lavender (concept: письма live на ideal-резюме, single
   visual anchor). При наследовании от .library-card--ideal frame уже
   lavender — здесь только confirmation. */

/* Letter-specific front sheet content layout: date top-right, greeting,
   body lines block, signature. Mimics реального letter. */

/* Eyebrow на letter-card более прижат к лeft (отсутствует ring справа). */

/* ============================================================================
   M1 multi-profile workspace — profile tabs, career-facts editor (Task 13).
   Mobile-first: базовые стили под ≤375px, расширяются на десктоп. Только
   токены из :root, без хардкодов цветов/размеров.
   ========================================================================= */

/* Sub-tab навигация профиля и карьерной базы (горизонтальный скролл на узких
   экранах вместо переноса — tap target ≥44px через btn--sm). */
.tabnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block: var(--space-4) var(--space-5);
    padding-bottom: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Editorial profile subnav — тонкая нижняя линия + active underline.
   Заменил кнопочный tabnav в шапке профиля: ghost-button'ы не давали
   визуального состояния и сливались в текст. Здесь underline-tab pattern
   как в Apple Newsroom / Linear settings — читается как нав, не как row
   of buttons. Mono uppercase label + Lucide-иконка перед текстом дают
   pre-attentive recognition. Hover/focus-visible имеют чёткий состояние;
   snap-x scroll на мобиле, чтобы 6 табов не разрывали viewport. */
/* Список резюме профиля (вкладка «Резюме»): грид карточек-снимков. */
/* Список резюме профиля переехал на editorial-luxury карточки
   (.documents-library__grid + ui_snapshot_card) — плоские .profile-resumes*
   классы удалены. */

.profile-subnav {
    /* Заголовок + табы — связная пара «шапка страницы», ей нужен зазор МЕНЬШЕ
       секционного gap:space-5 родителя. Подтягиваем табы к заголовку negative-
       margin'ом (эффективно ~space-5 − space-3 ≈ 12px). Снизу 0 — контент под
       табами разводит сам flex-gap page-shell'а (иначе двойной провал). */
    margin-block: calc(-1 * var(--space-3)) 0;
    border-bottom: 1px solid var(--color-border, color-mix(in srgb, currentColor 12%, transparent));
}
.profile-subnav__list {
    display: flex;
    gap: clamp(var(--space-1), 1.5vw, var(--space-3));
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.profile-subnav__list::-webkit-scrollbar { display: none; }
.profile-subnav__item { scroll-snap-align: start; flex: 0 0 auto; }
/* Трейлинг-таб хаба «О себе» (Аккаунт/настройки) — отодвинут к правому краю,
   когда ряд помещается (десктоп); при переполнении (мобайл) auto = 0 и таб
   просто идёт в конце скроллящегося ряда. Отделяет «настройки» от базы-табов. */
.profile-subnav__item--trailing { margin-inline-start: auto; }
/* Ряд с правыми вкладками: основная таблетка слева, правая — отдельной
   таблеткой у края. Внутри одной таблетки по ширине содержимого сдвиг
   вправо ни на что не влиял, и «Аккаунт»/«Журнал» стояли вплотную к
   рабочим вкладкам. Основной список прокручивается на узком экране, правый
   остаётся на виду. */
.profile-subnav--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.profile-subnav--split > .profile-subnav__list { min-width: 0; max-width: 100%; }
.profile-subnav--split > .profile-subnav__list--trailing { flex: none; }
.profile-subnav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) calc(var(--space-2) + 2px);
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    /* вкладки — навигация, не подписи: обычный регистр, кегль интерфейса */
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    min-height: 44px;
    transition: color 0.18s ease;
}
.profile-subnav__link::after {
    content: "";
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: -1px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Бейдж таба — тихая цифра «здесь есть что дополнить», не уведомление.
   Красная точка на шести табах превратила бы раздел в перечень претензий; тут
   нейтральный тон, а на активном табе он подтягивается к цвету текста. */
.profile-subnav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-md);
    /* Тон — amber, тот же, что у подсказок полноты: нейтральный серый бейдж
       путался со счётчиками элементов рядом (у категорий навыков они серые), и
       «НАВЫКИ 13» читалось как «тринадцать навыков», а не «тринадцать без
       уровня». Цвет здесь несёт смысл, а не украшает. */
    background: color-mix(in srgb, var(--color-amber, var(--color-warning)) 16%, transparent);
    color: color-mix(in srgb, var(--color-amber, var(--color-warning)) 78%, var(--color-text));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}
.profile-subnav__link--active .profile-subnav__badge { background: color-mix(in srgb, var(--color-amber, var(--color-warning)) 24%, transparent); }
.profile-subnav__link:hover { color: var(--color-text, inherit); }
.profile-subnav__link:hover::after { transform: scaleX(0.5); opacity: 0.4; }
.profile-subnav__link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
/* Active-состояние: класс --active (SSR) ИЛИ aria-current=page (ставит
   app.js по URL для [data-nav-link] — тот же механизм, что у sidebar). */
.profile-subnav__link--active,
.profile-subnav__link[aria-current="page"] {
    color: var(--color-text, inherit);
    font-weight: 600;
}
.profile-subnav__link--active::after,
.profile-subnav__link[aria-current="page"]::after {
    transform: scaleX(1);
    opacity: 1;
    background: var(--color-accent, currentColor);
}
.profile-subnav__icon { display: inline-flex; flex-shrink: 0; opacity: 0.85; }
.profile-subnav__link--active .profile-subnav__icon,
.profile-subnav__link[aria-current="page"] .profile-subnav__icon { opacity: 1; }
@media (max-width: 600px) {
    .profile-subnav__link { padding-inline: var(--space-2); font-size: 0.8125rem; }
}

/* Сетка карточек разделов — одна колонка на мобиле, авто-fit на десктопе. */
.facts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    /* Карточки по контенту: stretch растягивал короткий «Состав базы»
       до высоты позиционирования — пустой рукав под стат-плитками. */
    align-items: start;
}

@media (min-width: 768px) {
    .facts-grid {
        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    }
}

.facts-list {
    margin: 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* === Profile overview grid =====================================
   Двух-колоночный layout overview-таба профиля: широкая narrative
   карточка слева (executive_summary) + узкий meta-стек справа
   (target_roles + emphasis). Раньше facts-grid auto-fit'ил три+
   карточки в равные колонки, что приводило к визуальной дубликации
   когда executive_summary и positioning показывали одинаковый текст.
   Теперь иерархия чёткая: один narrative — один meta-rail.
   ============================================================== */
.profile-overview-grid {
    display: grid;
    /* minmax(0, …), а не голый 1fr: у 1fr минимум — min-content содержимого,
       и один длинный чип навыка распирал колонку за край телефона. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}
@media (min-width: 1024px) {
    .profile-overview-grid {
        /* ВАЖНО: тот же шаблон и брейкпоинт, что у .profile-hero-row выше
           (1fr / 280–360px @ 1024) — иначе вертикальный шов «перекрестия»
           overview не совпадает: верхняя правая карточка («Качество профессии»,
           fixed-rail) оказывалась уже нижней («Целевые роли», 1fr). Content +
           fixed meta-rail — единый layout на обеих полосах. */
        grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
        /* ДВЕ ЗОНЫ, как на карьерной карте: первый ряд двухколоночный (разбор
           слева, сопровождающее справа), второй — во всю ширину. Рейл вдвое
           короче левой колонки, и всё, что шло ниже него, упиралось в её
           ширину при пустой половине экрана справа. */
        /* Колонки по контенту, не растягиваться до высоты соседа — иначе левая
           карточка «Краткое резюме» с коротким текстом зияла пустотой под высоту
           правой meta-колонки. */
        align-items: start;
    }
    .profile-overview-grid__main { grid-column: 1; grid-row: 1; }
    .profile-overview-grid__meta { grid-column: 2; grid-row: 1; }
    /* Без выбранного пути рейла нет — колонка разбора во всю ширину, а не
       рядом с пустой полосой. */
    .profile-overview-grid:not(:has(> .profile-overview-grid__meta)) { grid-template-columns: minmax(0, 1fr); }
}
.profile-overview-grid__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}
.profile-overview-grid__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}
/* Строка «другие роли — на карте» под требованиями: справка, а не блок. */
.profile-overview__elsewhere {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    font-size: 0.9375rem;
    color: var(--color-text-soft);
}

/* «Чем вы выделяетесь» — key_differentiator как editorial pull-quote:
   serif + тонкая accent-линия-цитата (не callout-бар — типографский приём). */
.overview-diff__quote {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-4);
    border-left: 2px solid rgba(var(--color-accent-rgb), 0.45);
    font-family: var(--font-display, var(--font-serif));
    font-size: clamp(1.1rem, 1.7vw, 1.3rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

/* «Готовы к ролям» — callback-роли: title + match% в divided-rows. */
.overview-roles__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.overview-roles__item {
    display: flex; align-items: baseline; gap: var(--space-3);
    padding: var(--space-3) 0;
}
.overview-roles__item:first-child { padding-top: var(--space-1); }
.overview-roles__item:not(:first-child) { border-top: 1px solid var(--color-border); }
.overview-roles__title { flex: 1; min-width: 0; font-size: 0.9375rem; line-height: 1.4; color: var(--color-text); }
/* Число — ui_score_value (нейтральное, единый score-язык). Раньше было
   синим accent (--good/--strong) — убрано ради консистентности. */
.overview-roles__pct { flex: none; }
/* Шкала роли — узкая, идёт после числа: строка читается «роль → сколько →
   насколько», а не «роль → цифра, догадайся сам». */
.overview-roles__item .meter { flex: 0 0 4.5rem; min-width: 0; align-self: center; }

/* «Качество профиля» — компактный breakdown (ui_resume_quality_row без hint). */

/* «Смотреть подробнее» — тихая accent-ссылка со стрелкой под data-карточкой. */
.overview-card__more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: var(--space-4);
    font-family: var(--font-sans);
    font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--color-accent); text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.overview-card__more .icon { width: 14px; height: 14px; transition: transform 140ms ease; }
.overview-card__more:hover .icon { transform: translateX(3px); }

.facts-list--cards {
    list-style: none;
    padding-left: 0;
    gap: var(--space-3);
}

.fact-card {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
}

.tag-cloud {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.meta-list {
    margin: 0 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ───────────── Career Base — editorial tab content ─────────────
   Раньше tabs Опыт/Навыки/Образование показывали либо упрощённый card
   (institution+degree), либо raw `{{$item}}` (achievements печатал
   map[…]). Восстановлен pre-M1 editorial-уровень: timeline для опыта,
   clusters для навыков, иконка-карточка для образования, numbered
   trophy-list для достижений. */

/* Resume-new wizard form (audit H2): standalone snapshot generation под профиль.
   Single column, large CTA, suggested-role chips под target_role-полем. */
/* Форма сборки резюме: шаг между вопросами 24px против общеприложенческих 16.
   Каждый вопрос здесь — не строка ввода, а блок со своей внутренней
   структурой (подпись, контрол, подсказка, у длины ещё подписи делений), и на
   общем шаге они сливались в ленту: расстояние между «Кто будет читать» и
   «Длина» равнялось расстоянию между подписью деления и пояснением к нему.
   Правка scoped на эту форму: общий ритм `.field` — решение уровня системы. */
.resume-new { max-width: 42rem; }
.resume-new > .field,
.resume-new__advanced > .field { margin-bottom: var(--space-5); }
/* Последний вопрос блока не тащит отступ к кнопке — его даёт сам блок. */
.resume-new__advanced > .field:last-child { margin-bottom: 0; }

/* Подсказки ролей принадлежат полю роли: вплотную к нему сверху, полный шаг
   формы снизу. Отрицательный верхний отступ съедает margin поля — он растёт
   вместе с шагом формы, поэтому и вычитается ровно на его величину. */
.resume-new__suggested { display: flex; flex-direction: column; gap: 6px; margin: calc(-1 * var(--space-4)) 0 var(--space-5); }
.resume-new__suggested-label { margin: 0; font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.resume-new__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.resume-new__textarea { font-family: inherit; font-size: 0.9375rem; line-height: 1.5; resize: vertical; min-height: 90px; }
/* Галка простой вёрстки — самый второстепенный контрол формы, и рамка с
   заливкой делала его самым заметным: единственный элемент в коробке среди
   полей без коробок. Эмфазис снят, остался отступ слева под чекбокс. */
.resume-new__checkbox-row { gap: var(--space-1); }
/* Подсказка встаёт под ТЕКСТ лейбла, а не под чекбокс: без рамки, которая
   раньше связывала их в блок, абзац во всю ширину читался как самостоятельный
   текст, не относящийся к галке. Отступ — ширина чекбокса плюс его зазор. */
.resume-new__checkbox-hint {
    padding-left: calc(1.1rem + var(--space-2));
    font-size: var(--font-size-sm);
}
.resume-new__checkbox-row input[type="checkbox"] { margin-top: 4px; flex: none; }
.resume-new__checkbox-label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
/* Карточка вакансии на форме сборки: подтверждение выбора «под что собираем».
   Ссылка, а не плашка — из формы должен быть путь обратно к вакансии. */
.resume-new__job {
    display: flex;
    /* По верхней строке: у длинного названия в две строки иконка,
       отцентрованная по блоку, зависает между строк. */
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-decoration: none;
    color: var(--color-text);
    max-width: 34rem;
}
.resume-new__job:hover { border-color: var(--color-accent); }
.resume-new__job-icon { color: var(--color-text-muted); flex: none; margin-top: 2px; }
.resume-new__job-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resume-new__job-title {
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.resume-new__job-company { font-size: 0.875rem; color: var(--color-text-muted); }
.resume-new__job-go { margin-left: auto; margin-top: 4px; color: var(--color-text-muted); flex: none; }

.field__label--sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Тонкие настройки сборки резюме — свёрнутый блок: на первом заходе человек
   отвечает на один вопрос, остальное пролистывает. */
.resume-new__advanced {
    border-top: 1px solid var(--color-border-soft, var(--color-border));
    padding-top: var(--space-3);
    /* Тот же шаг, что между вопросами: перед кнопкой сборки воздух не должен
       схлопываться — это последнее, что человек видит перед решением. */
    margin-bottom: var(--space-5);
}
.resume-new__advanced-summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}
.resume-new__advanced-summary::-webkit-details-marker { display: none; }
.resume-new__advanced-summary::before {
    content: "+";
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text-muted);
}
.resume-new__advanced[open] .resume-new__advanced-summary::before { content: "–"; }
.resume-new__advanced[open] .resume-new__advanced-summary { margin-bottom: var(--space-3); }

.resume-new__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); align-items: flex-start; }
.resume-new__meta { margin: 0; font-size: 0.8125rem; }

/* Career-facts suggested-profiles strip (audit M4) — карточки направлений
   от парсера на overview-табе. Простой horizontal-stack, primary CTA справа. */

/* Positioning meta-list (audit M4): таблица category / experience_level /
   matching_summary в profile overview meta-aside. dt-mono + dd-stack. */
.profile-overview-grid__positioning { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-3); }
.profile-overview-grid__positioning > div { display: flex; flex-direction: column; gap: 2px; }
.profile-overview-grid__positioning dt { font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; margin: 0; font-variant-numeric: tabular-nums; }
.profile-overview-grid__positioning dd { margin: 0; font-size: 0.9375rem; line-height: 1.45; }
.profile-overview-grid__domains-label { font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; margin: var(--space-2) 0 6px; font-variant-numeric: tabular-nums; }

/* Artifact diff against-selector (audit LOW-5): dropdown с siblings того же
   профиля. Auto-submit на change; noscript fallback с кнопкой. */
.artifact-diff__selector { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); background: color-mix(in srgb, var(--color-violet, var(--color-accent)) 4%, transparent); border-radius: var(--radius-md, 8px); }
.artifact-diff__selector label { font-size: 0.875rem; color: var(--color-text-muted); }
.artifact-diff__selector select { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font: inherit; font-size: 1rem; max-width: 100%; }
.artifact-diff__ver strong { font-variant-numeric: tabular-nums; }

/* Artifact diff page (audit MED-5) — LLM-diff snapshot vs parent. Per-block
   карточки с op-chip (added/changed/removed) + before/after panes. */
.artifact-diff__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 0.875rem; }
.artifact-diff__code { font-family: var(--font-sans); font-size: 0.8125rem; padding: 2px 8px; background: color-mix(in srgb, currentColor 6%, transparent); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.artifact-diff__arrow { font-family: var(--font-sans); font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.artifact-diff__blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.artifact-diff__block { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px); background: var(--color-surface, #fff); border-left: 3px solid var(--color-border); }
.artifact-diff__block--added { border-left-color: var(--color-sage); }
.artifact-diff__block--changed { border-left-color: var(--color-amber, var(--color-warning)); }
.artifact-diff__block--removed { border-left-color: var(--color-coral, var(--color-danger)); }
.artifact-diff__block-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: var(--space-2); }
.artifact-diff__op { font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; font-weight: 700; padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.artifact-diff__op--added { background: color-mix(in srgb, var(--color-sage) 18%, transparent); color: var(--color-sage); }
.artifact-diff__op--changed { background: color-mix(in srgb, var(--color-amber, var(--color-warning)) 18%, transparent); color: var(--color-amber, var(--color-warning)); }
.artifact-diff__op--removed { background: color-mix(in srgb, var(--color-coral, var(--color-danger)) 18%, transparent); color: var(--color-coral, var(--color-danger)); }
.artifact-diff__path { font-family: var(--font-sans); font-size: 0.875rem; color: var(--color-text); font-variant-numeric: tabular-nums; }
.artifact-diff__pane { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md, 8px); background: color-mix(in srgb, var(--color-bg, #fafafa) 50%, transparent); }
.artifact-diff__pane--before { background: color-mix(in srgb, var(--color-coral, var(--color-danger)) 4%, transparent); }
.artifact-diff__pane--after { background: color-mix(in srgb, var(--color-sage) 4%, transparent); }
.artifact-diff__pane-label { margin: 0 0 4px; font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.artifact-diff__pane pre { margin: 0; white-space: pre-wrap; font-family: inherit; font-size: 0.9rem; line-height: 1.5; }

/* Profile history revert-form (audit LOW-12): inline revert-button рядом с
   timeline-item. Не ломает существующий grid layout — отдельным slot'ом. */
.profile-history__revert-form { display: inline-flex; margin-left: auto; margin-top: 4px; }

/* Experience quality panel (audit MED-7) — per-role 4-axis mini-grid на
   profile/analysis. Хранилось в Scoring["experience_quality"], не рендерилось. */
/* Open questions enum-preview + why (audit MED-7+L1) */
/* rationale-экспандер «Зачем спрашиваем» — визуально идентичен per-question
   карточке на /answers (.career-question__why*): mono-summary с +/− маркером,
   тело — accent-tinted quote-блок. По умолчанию свёрнут. */
.open-questions-stack__why { margin: 6px 0 0; padding: 0; border: 0; }
/* Sentence-case, не mono-caps: в карточке уже две mono-строки (номер и
   приоритет), третья превращала мету в шум, а плюс при капсе читался
   опечаткой. */
.open-questions-stack__why-summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); list-style: none; padding: 4px 0; user-select: none; }
.open-questions-stack__why-summary::-webkit-details-marker { display: none; }
.open-questions-stack__why-summary::before { content: "+"; display: inline-block; width: 12px; text-align: center; font-family: var(--font-sans); font-weight: 400; color: color-mix(in srgb, var(--color-text) 50%, transparent); transition: transform 180ms ease; font-variant-numeric: tabular-nums; }
.open-questions-stack__why[open] .open-questions-stack__why-summary::before { content: "−"; }
.open-questions-stack__why-summary:hover { color: var(--color-text); }
.open-questions-stack__why-body { margin: 8px 0 0; padding: var(--space-3); border-left: 2px solid color-mix(in srgb, var(--color-accent) 24%, transparent); background: color-mix(in srgb, var(--color-accent) 4%, transparent); border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0; font-size: 0.875rem; line-height: 1.55; color: var(--color-text); }

/* Section-score actionable indicator (audit MED-7): actionable=true → primary
   CTA + subtle accent-tinted border. Никакой толстой цветной полосы —
   actionability читается по primary-кнопке, бордер лишь мягко эмфазирует. */
.section-score-row--actionable { border-color: rgba(var(--color-accent-rgb), 0.35); }

/* Career Base extended sections (audit HIGH-3) — projects / publications /
   awards / languages / certifications + расширенный basics-блок. Раньше
   распарсенные данные были невидимы в табах. */
.career-overview__basics { grid-column: 1 / -1; }
/* Full-width карточка: narrative слева + «визитка» справа за hairline-
   разделителем (контакты столбиком). На мобиле — стек без линии. */
@media (min-width: 900px) {
    .career-overview__basics {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
        gap: var(--space-5);
        align-items: start;
    }
    .career-overview__vcard {
        border-left: 1px solid var(--color-border);
        padding-left: var(--space-5);
    }
}
.career-overview__narrative > p { margin: 0 0 var(--space-2); max-width: 72ch; }
.career-overview__vcard { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.career-overview__vcard .career-overview__location { margin: 0; }
.career-overview__eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
    font-variant-numeric: tabular-nums;
}
/* Source-подпись basics-карточки: данные из резюме, не из аккаунта/профессии. */
.career-overview__source {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
    max-width: 60ch;
}
.career-overview__headline {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-2);
}
/* «Состав базы» — стрип ui_kpi_card (admin-канон) в правой колонке:
   2 колонки в узкой aside, каждая панель — ссылка в свой раздел.
   Префикс cfacts- (НЕ career-kpi: тот класс занят KPI-карточкой
   resume-workspace со своим фоном и ::before). */
.cfacts-kpi { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cfacts-kpi .career-overview__eyebrow { margin: 0; }
.cfacts-kpi__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    align-items: stretch;
}
.cfacts-kpi__link { display: block; text-decoration: none; color: inherit; min-width: 0; }
.cfacts-kpi__link .kpi-card { height: 100%; }
.career-overview__value-prop { font-size: 0.9375rem; }
.career-overview__location { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; }
/* Визитка — двумя колонками под текстом на узком экране (пять пар
   «подпись / значение» столбиком занимали на телефоне треть экрана) и
   столбиком в узкой правой колонке с 900px. */
.career-overview__contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
/* Адреса (почта, ссылки) — во всю ширину: в половине телефона почта
   переносилась посреди адреса. */
.career-overview__contacts > .is-wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .career-overview__contacts { grid-template-columns: 1fr; } }
.career-overview__contacts > div { display: flex; flex-direction: column; gap: 2px; }
.career-overview__contacts dt { font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; margin: 0; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.career-overview__contacts dd { margin: 0; font-size: 0.875rem; word-break: break-word; }

/* Ритм между списком и вторичной секцией даёт page-shell gap:space-5 —
   свой margin-top складывался в тройной воздух (см. .artifact-toolbar). */
.career-certifications, .career-languages, .career-extras { display: flex; flex-direction: column; gap: var(--space-3); }
.career-certifications__head, .career-languages__head, .career-extras__head { margin-bottom: var(--space-1); }
.career-certifications__title, .career-languages__title, .career-extras__title { margin: 0; font-family: var(--font-display, var(--font-serif, inherit)); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }

.career-certifications__icon { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-amber, var(--color-warning)) 12%, transparent); color: var(--color-amber, var(--color-warning)); }

/* .career-extras__item/__body/__name/__meta/__desc/__chips/__link удалены —
   секции публикаций/проектов/наград теперь рендерятся через ui_achievement_card
   (.achievement-card). Живыми остались .career-extras/__head/__title. */

/* Career questions — answers-таб: open-questions от парсера как карточки с
   priority-tinted left-border. Раньше форма была свободного ввода
   question_id и без question_text → POST 400 (audit M3). */
/* Career questions — editorial redesign (профессиональный UI для C-level
   аудитории, замена «pill-flood» MVP-варианта). Каждый вопрос — отдельная
   editorial-карточка с numeral'ом-курсивом в шапке, eyebrow-meta-строкой
   (категория · приоритет), display-serif формулировкой, свернутой
   «зачем» и quiet ghost-CTA. Mobile-first 375px, разворачивается на ≥720px. */
.career-questions { margin-bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.career-questions__head { margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: 6px; }
.career-questions__title { margin: 0; font-family: var(--font-display, var(--font-serif, inherit)); font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.career-questions__lead { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-muted); max-width: 62ch; }
.career-questions__counter { margin: 6px 0 0; font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.career-questions__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }

/* Clean surface-карточка без priority-coded левой полосы: срочность уже
   несёт mono-eyebrow (·СРОЧНО coral / ·ВАЖНО amber), дублирующий цветной
   бар — тот же callout-cliché, что убран по всему кабинету. Визуальный
   якорь строки — крупный serif-номер. */
.career-question { position: relative; display: grid; grid-template-columns: minmax(48px, auto) 1fr; gap: clamp(var(--space-3), 1.6vw, var(--space-4)); padding: clamp(var(--space-4), 2.1vw, var(--space-5)) clamp(var(--space-4), 2.1vw, var(--space-5)) clamp(var(--space-3), 1.6vw, var(--space-4)); background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 14px); }

.career-question__index { font-family: var(--font-classic-serif, var(--font-serif, Georgia, serif)); font-style: italic; font-weight: 400; font-size: clamp(1.85rem, 4vw, 2.6rem); line-height: 1; letter-spacing: -0.02em; color: color-mix(in srgb, var(--color-text) 28%, transparent); padding-top: 4px; user-select: none; }

.career-question__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.career-question__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--color-text-muted); margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.career-question__meta-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.career-question__meta-priority { color: var(--color-text-muted); }
.career-question--high  .career-question__meta-priority { color: var(--color-coral, var(--color-danger)); }
.career-question--low   .career-question__meta-priority { color: var(--color-text-muted); }
.career-question--medium .career-question__meta-priority { color: var(--color-amber, var(--color-warning)); }

.career-question__text { margin: 0; font-family: var(--font-display, var(--font-serif, inherit)); font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.5; font-weight: 500; color: var(--color-text); letter-spacing: -0.005em; }
.career-question__hint { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); }

/* «Зачем спрашиваем?» — свёрнутая editorial-выноска. Заменяет вылитую
   стену violet-rationale, которая раньше доминировала над самим вопросом. */
.career-question__why { margin: 6px 0 0; padding: 0; border: 0; }
/* Sentence-case, не mono-caps: в карточке уже две mono-строки (номер и
   приоритет), третья превращала мету в шум, а плюс при капсе читался
   опечаткой. */
.career-question__why-summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); list-style: none; padding: 4px 0; user-select: none; }
.career-question__why-summary::-webkit-details-marker { display: none; }
.career-question__why-summary::before { content: "+"; display: inline-block; width: 12px; text-align: center; font-family: var(--font-sans); font-weight: 400; color: color-mix(in srgb, var(--color-text) 50%, transparent); transition: transform 180ms ease; font-variant-numeric: tabular-nums; }
.career-question__why[open] .career-question__why-summary::before { content: "−"; }
.career-question__why-summary:hover { color: var(--color-text); }
.career-question__why-body { margin: 8px 0 0; padding: var(--space-3); border-left: 2px solid color-mix(in srgb, var(--color-accent) 24%, transparent); background: color-mix(in srgb, var(--color-accent) 4%, transparent); border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text); }

.career-question__label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.career-question__textarea, .career-question__select { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px); background: var(--color-bg, #fff); font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; color: var(--color-text); resize: vertical; min-height: 88px; transition: border-color 150ms ease, box-shadow 150ms ease; }
.career-question__select { min-height: 44px; }
.career-question__textarea::placeholder { color: color-mix(in srgb, var(--color-text-muted) 70%, transparent); font-style: italic; }
.career-question__textarea:focus, .career-question__select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent); }
.career-question__actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); margin-top: 4px; }
.career-question__actions .ui-button { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); padding: 8px 16px; font-size: 0.875rem; }
.career-question__actions .ui-button:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); color: var(--color-accent-deep, var(--color-accent)); }

@media (prefers-reduced-motion: no-preference) { .career-question { transition: border-color 200ms ease, box-shadow 200ms ease; } }
.career-question:focus-within { border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-accent) 8%, transparent); }

@media (max-width: 540px) {
    .career-question { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-4); }
    .career-question__index { font-size: 1.8rem; padding-top: 0; }
    .career-question::before { left: 0; top: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px 2px 0 0; }
}

/* ============================================================================
   ui_achievement_card — премиум-«медаль» карточка (таб «Достижения»).
   Единый card-shell для medal (ключевые, золото + ранг) и entry (публикации/
   проекты/награды, icon_plate). Достижения ощущаются как собранные награды.
   ============================================================================ */
/* Колонка не уже 480px: кейс с цифрами — это абзац на 8-12 строк, и в
   340px-колонке он читался столбиком по 30ch, пока правая половина страницы
   пустовала. min() страхует узкие вьюпорты. */
/* Карточки ряда — одной высоты: при выравнивании по верху короткая карточка
   рядом с длинной оставляла под собой дыру в пол-карточки. */
/* Достижения — одним столбцом, как места работы и образование на той же
   странице. Двумя колонками короткая карточка («Доклад · Алматы · 2025»)
   растягивалась под высоту соседки с пятью строками цифр и стояла наполовину
   пустой, а единственная публикация занимала полряда. */
.achievement-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.achievement-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: transform var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
/* Streak — тонкая горизонтальная «линза» по верхней кромке (премиум-сигнатура
   через --streak-* токен, per-accent). Приглушена в покое, ярче на hover. */
.achievement-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: var(--streak-amber);
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
    transition: opacity var(--dur-base) var(--ease-out);
}
.achievement-card--accent::before { background: var(--streak-violet); }
.achievement-card:hover::before { opacity: 1; }
.achievement-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--color-amber-rgb), 0.40);
    /* Заземлённый lift + мягкий per-accent glow-halo (--glow-* токен, в light
       приглушён). Награды/медаль — amber; публикации/проекты — violet. */
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 12px 28px -16px rgba(15, 23, 42, 0.22),
        var(--glow-amber);
}
.achievement-card--accent:hover {
    border-color: rgba(var(--color-accent-rgb), 0.40);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 12px 28px -16px rgba(15, 23, 42, 0.22),
        var(--glow-violet);
}

/* Medal — золотая «отлитая» плашка с рангом (icon_plate--filled amber recipe). */
.achievement-card__medal {
    --medal-rgb: var(--color-amber-rgb);
    flex: none;
    width: 40px; height: 40px;
    border-radius: var(--radius-lg);
    display: inline-grid;
    place-items: center;
    background: linear-gradient(158deg, rgba(var(--medal-rgb), 0.26) 0%, rgba(var(--medal-rgb), 0.12) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 0 0 1px rgba(var(--medal-rgb), 0.24),
        0 2px 4px rgba(15, 23, 42, 0.06),
        0 6px 16px -8px rgba(var(--medal-rgb), 0.40);
    transition: box-shadow var(--dur-base) var(--ease-out);
}
.achievement-card:hover .achievement-card__medal {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 0 0 1px rgba(var(--medal-rgb), 0.30),
        0 2px 4px rgba(15, 23, 42, 0.06),
        0 8px 22px -8px rgba(var(--medal-rgb), 0.55);
}
.achievement-card__rank {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-amber, #b66d00);
    line-height: 1;
}
.achievement-card__plate { align-self: start; }

.achievement-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.achievement-card__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--color-text); }
/* Карточка, которую выбрали мы (extraction v13, `source: selected`): тихая
   метка над заголовком и «Оставить» под текстом. Метка — сведение о
   происхождении, а не тревога: без тона, как подписи строк. */
.achievement-card__flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 2px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.achievement-card__keep { margin: var(--space-2) 0 0; }
.cf-sec__note { margin: 0 0 var(--space-3); max-width: 68ch; font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text-muted); }
.achievement-card__meta { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
.achievement-card__desc { margin: 2px 0 0; max-width: 72ch; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-soft); }
.achievement-card__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.achievement-card__link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-accent);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.achievement-card__link:hover { text-decoration: underline; }

/* Edit — ghost-карандаш в углу; проявляется на hover/focus (на тач — всегда). */
/* «✎ Редактировать» — подписью в правом нижнем углу, как у карточек мест
   работы и записей образования: один вид действия на всей странице. Строка
   под содержимым (вторая строка сетки), карточки ряда одной высоты —
   действие стоит на одной линии у соседних. */
.achievement-card__edit {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap-min);
    margin-block: calc(-1 * var(--space-2)) calc(-1 * var(--space-2));
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}
.achievement-card__edit:hover { color: var(--color-accent); }
/* Строка действия — только у карточки с действием: пустая вторая строка
   добавляла бы снизу межстрочный зазор. */
.achievement-card:has(> .achievement-card__edit) { grid-template-rows: 1fr auto; }
/* Шире телефона — на строке заголовка, как у образования и сертификатов:
   своей нижней строки у достижения нет, и отдельная строка под действие
   делала карточку из заголовка и года вдвое выше. Внизу правка остаётся у
   мест работы — там это строка свёрнутых обязанностей. */
@media (min-width: 640px) {
    .achievement-card:has(> .achievement-card__edit) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; }
    .achievement-card__edit { grid-column: 3; grid-row: 1; align-self: start; margin-block: calc(-1 * var(--space-2)) 0; }
}
@media (prefers-reduced-motion: reduce) {
    .achievement-card, .achievement-card__medal, .achievement-card__edit { transition: none; }
    .achievement-card:hover { transform: none; }
}
/* In-place редактор — форма-карточка морфится из display-карточки (та же
   рамка + золотая медаль), раскрывается по :target (клик карандаша); сама
   display-карточка прячется. No-JS, прогрессивный enhancement, органично. */
.achievement-card--edit {
    display: none;
    grid-template-columns: auto 1fr;
    cursor: default;
}
.achievement-card--edit:target { display: grid; }
.achievement-card--edit:hover {
    transform: none;
    border-color: rgba(var(--color-amber-rgb), 0.40);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.achievement-item:has(.achievement-card--edit:target) .achievement-card:not(.achievement-card--edit) { display: none; }
/* Ряд растягивает элемент списка, карточка внутри него — до его высоты. */
.achievement-item { display: flex; flex-direction: column; min-width: 0; }
.achievement-item > .achievement-card { flex: 1 1 auto; }
/* Поля правки — той же ширины и тем же голосом меток, что формы мест работы
   и образования: на одной странице правка записи выглядит одинаково. */
.achievement-edit__fields { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; max-width: 48rem; }
.achievement-card--edit .field { margin-bottom: 0; }
.achievement-card--edit .field__label { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-soft); }
.achievement-edit__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

/* Experience — timeline-style cards. Vertical line + dot per item. */
.career-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    padding-left: clamp(var(--space-4), 3vw, var(--space-5));
}
.career-timeline::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 7px;
    width: 2px;
    background: color-mix(in srgb, currentColor 10%, transparent);
}
.career-timeline__item {
    position: relative;
    padding-bottom: var(--space-3);
}
.career-timeline__item:last-child { padding-bottom: 0; }
.career-timeline__dot {
    position: absolute;
    top: 14px;
    left: calc(-1 * clamp(var(--space-4), 3vw, var(--space-5)) + 1px);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-surface, #fff);
    border: 2px solid color-mix(in srgb, currentColor 24%, transparent);
}
.career-timeline__item--current .career-timeline__dot {
    background: var(--color-accent, currentColor);
    border-color: var(--color-accent, currentColor);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent, currentColor) 16%, transparent);
}
.career-timeline__card {
    padding: clamp(var(--space-3), 1.6vw, var(--space-4));
    border: 1px solid var(--color-border, color-mix(in srgb, currentColor 10%, transparent));
    border-radius: var(--radius-lg, 18px);
    background: var(--color-surface, transparent);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.career-timeline__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.career-timeline__primary { min-width: 0; flex: 1 1 auto; }
.career-timeline__position {
    margin: 0 0 2px;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}
.career-timeline__company {
    margin: 0;
    color: var(--color-text-muted, #757575);
    font-size: 0.875rem;
}
.career-timeline__meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; }
.career-timeline__period {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #757575);
    white-space: nowrap;
}
.career-timeline__dash { opacity: 0.6; }
.career-timeline__current-tag {
    color: var(--color-accent, currentColor);
    font-weight: 600;
}
.career-timeline__scope {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #757575);
}
.career-timeline__scope strong { color: var(--color-text, inherit); }
.career-timeline__block { display: flex; flex-direction: column; gap: 6px; }
.career-timeline__block-label {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted, #757575);
}
.career-timeline__bullets { list-style: disc; margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.career-timeline__bullets li { font-size: 0.875rem; line-height: 1.5; color: var(--color-text, inherit); }
.career-timeline__block--achievements .career-timeline__bullets li { color: var(--color-text, inherit); }
.career-timeline__stack { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* «ещё N навыков» — тихая ссылка в конце ряда; раскрытый остаток уходит
   на всю ширину строкой ниже. */
.career-timeline__stack-more { display: contents; }
.career-timeline__stack-more > summary {
    display: inline-flex; align-items: center; min-height: 26px; padding-inline: 4px;
    font-size: 0.8125rem; font-weight: 500; color: var(--color-accent);
    cursor: pointer; list-style: none;
}
.career-timeline__stack-more > summary::-webkit-details-marker { display: none; }
.career-timeline__stack-more[open] > summary { display: none; }
.career-timeline__stack-more > .career-timeline__stack { display: contents; }

/* Skills — clusters by category. */
.career-skills { display: flex; flex-direction: column; gap: var(--space-3); }
.career-skills__cluster {
    padding: clamp(var(--space-3), 1.5vw, var(--space-4));
    border: 1px solid var(--color-border, color-mix(in srgb, currentColor 10%, transparent));
    border-radius: var(--radius-lg, 18px);
    background: var(--color-surface, transparent);
}
.career-skills__cluster-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
/* Внутрикарточный заголовок = mono-eyebrow (канон карточек кабинета:
   «ПОЗИЦИОНИРОВАНИЕ», «СОСТАВ БАЗЫ») — serif-титул внутри карточки
   читался чужеродно и спорил с section-титулами страницы. */
.career-skills__cluster-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.career-skills__cluster-counter {
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: var(--color-text-muted, #757575);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* Лента чипов — список (`<ul role="list">`): для чтения с экрана это перечень
   объектов, а не абзац. Маркеры при этом снимаются: точка перед пилюлей —
   второй знак там, где сама пилюля уже отделяет элемент от соседа. */
.career-skills__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.career-skills__chips > li { display: inline-flex; min-width: 0; max-width: 100%; }
/* «Отрасли, где у вас есть опыт» в «О себе»: подзаголовок карточки, строка
   чипов и та же форма добавления, что у навыков. */
.cf-domains { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.cf-domains__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--color-text); }
.cf-domains__hint { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-soft); max-width: 65ch; text-wrap: pretty; }
.cf-domains__add { margin-top: var(--space-1); }
/* Строка «уровень не указан» и список навыков — два блока одной области
   подмены: без зазора карточка списка прилегала к строке вплотную. */
[data-skill-swap="skills"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
/* Add-form над списком навыков — inline row (input + submit). */
.career-skills-add {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
}
/* Заголовок add-карточки — mono-eyebrow (канон внутрикарточных титулов,
   как «ДОБАВИТЬ ДОСТИЖЕНИЕ»); label остаётся label'ом для a11y. */
.career-skills-add > .field__label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Форма «Добавить достижение» — карточный канон add-флоу (как skills-add):
   chip-radio типа + суть + контекст + год/ссылка в один ряд на десктопе.
   Плотный ритм: grid-gap правит расстояниями, поэтому собственный
   margin-bottom у .field гасится (иначе зазоры суммировались и 5 полей
   растягивались в километровую простыню); лейблы — легче базового
   field__label (5 жирных 0.95rem подряд на белом читались стеной). */
.career-achieve-add {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 48rem;
}
.career-achieve-add .field { margin-bottom: 0; }
.career-achieve-add .field__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-soft);
}
.career-achieve-add .field__hint { font-size: 0.8125rem; }
/* Компактные type-чипы — десктоп (mouse); на тач остаются 44px. */
@media (min-width: 1024px) {
    .career-achieve-add .chip-radio__label {
        min-height: 34px;
        padding: 4px 14px;
        font-size: 0.875rem;
    }
}
.career-achieve-add .btn { align-self: flex-start; margin-top: var(--space-1); }
.career-achieve-add__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
/* Год на телефоне — своей строкой, но полем под четыре цифры. */
.career-achieve-add__row > .field:first-child input { max-width: 8rem; }
@media (min-width: 640px) {
    .career-achieve-add__row { grid-template-columns: 7.5rem minmax(0, 1fr); }
    .career-achieve-add__row > .field:first-child input { max-width: none; }
}
.career-skills-add__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
/* Поле и кнопка — одной строкой и на телефоне (12.10): форма стоит над
   списком навыков, и кнопка, упавшая под поле, делала её вдвое выше на
   первом экране. Поле забирает остаток строки, кнопка не сжимается.
   combobox.js оборачивает инпут в .combobox — flex-параметры несёт обёртка
   (когда она есть), инпут внутри неё занимает 100%. */
.career-skills-add__row { flex-wrap: nowrap; }
.career-skills-add__row > .btn { flex: none; }
.career-skills-add__input,
.career-skills-add__row .combobox { flex: 1 1 0; min-width: 0; max-width: 30rem; }
.career-skills-add__row .combobox .career-skills-add__input { width: 100%; max-width: none; }

/* Education — icon-card per item. */
.career-education { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.career-education__item {
    display: flex;
    gap: var(--space-3);
    padding: clamp(var(--space-3), 1.4vw, var(--space-4));
    border: 1px solid var(--color-border, color-mix(in srgb, currentColor 10%, transparent));
    border-radius: var(--radius-lg, 18px);
    background: var(--color-surface, transparent);
}
.career-education__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent, currentColor) 10%, transparent);
    color: var(--color-accent, currentColor);
    flex-shrink: 0;
}
.career-education__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
/* «Редактировать» — в правом верхнем углу записи, а не строкой под ней: у
   образования справа пусто, а отдельная строка в 44px делала карточку из трёх
   строк текста вдвое выше. Раскрытая правка занимает всю ширину. На телефоне
   — строкой снизу: справа кнопка сжимала название вуза в колонку в три слова. */
@media (min-width: 640px) {
    .career-education > .career-education__item > .career-education__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-3);
        align-items: start;
    }
    .career-education > .career-education__item > .career-education__body > .career-education__view { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 4px; }
    .career-education > .career-education__item > .career-education__body > .career-education__edit { grid-column: 2; grid-row: 1; margin-top: 0; }
    .career-education > .career-education__item > .career-education__body > .career-education__edit[open] { grid-column: 1 / -1; }
    /* Подпись «Редактировать» — на строке названия: зона нажатия 44px
       остаётся, а отрицательный отступ снимает с неё лишние 11px сверху и
       снизу. Иначе текст центрировался в 44px ниже названия и раздувал
       однострочную карточку (сертификат) почти вдвое. */
    .career-education > .career-education__item > .career-education__body > .career-education__edit:not([open]) > .career-education__edit-summary { margin-block: -11px; }
}
.career-education__institution {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}
.career-education__degree { margin: 0; font-size: 0.875rem; color: var(--color-text-muted, #757575); }
/* Правка позиционирования на обзоре базы — тот же edit-in-place паттерн,
   что у образования (details + :has). */
.career-overview__narrative:has(.career-overview__edit[open]) .career-overview__view { display: none; }
.career-overview__edit { margin-top: var(--space-2); }
/* Свёрнутая правка — справа внизу, как «Редактировать» у карточек мест
   работы: одно действие на одной странице стояло то слева, то справа. */
.career-overview__edit:not([open]) > summary { display: flex; width: fit-content; margin-left: auto; }
.career-overview__edit-form { max-width: none; }
.career-overview__edit-form .field:first-of-type { grid-column: 1 / -1; }
.career-overview__edit-form textarea { font-size: 1rem; }

/* Языки: строка добавления (input + уровень-чипы + кнопка). Сам язык рисует
   общий ui_skill_chip — тот же объект, что навык. */
.career-languages-add > .field__label { flex-basis: 100%; margin: 0; }
.career-languages-add {
    margin-top: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.career-languages-add__input { flex: 0 1 16rem; min-width: 10rem; }
@media (min-width: 1024px) {
    .career-languages-add .chip-radio__label {
        min-height: 34px;
        padding: 4px 12px;
        font-size: 0.875rem;
    }
}

/* «Ещё N пунктов» — свёрнутый хвост длинного списка буллетов. */
.career-timeline__more { margin-top: 4px; }
/* Обязанности роли — свёрнутая справка под результатами (страница «Опыт»). */
.career-timeline__duties-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.career-timeline__duties-summary::-webkit-details-marker { display: none; }
.career-timeline__duties-summary:hover { color: var(--color-text); }
.career-timeline__duties-chev { transition: transform 160ms ease; }
.career-timeline__duties[open] > summary .career-timeline__duties-chev { transform: rotate(180deg); }
.career-timeline__duties .career-timeline__bullets { margin-top: 2px; }
/* «Ещё N мест работы» — хвост ленты под раскрывашкой. Строка-кнопка во всю
   ширину ленты, тем же тихим тоном, что «ещё N пунктов» в карточке. */
/* «Ещё N» — одна раскрывашка на весь кабинет: ранние места работы на
   «Опыте», остаток целевых резюме и архив базовых на «Резюме». Плита со
   стрелкой, а не ссылка: внутри не другая страница, а продолжение списка. */
.list-more__summary,
.career-timeline__older-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
}
.list-more__summary::-webkit-details-marker,
.career-timeline__older-summary::-webkit-details-marker { display: none; }
.list-more__summary:hover,
.career-timeline__older-summary:hover { box-shadow: var(--shadow-md); }
.list-more__summary { list-style: none; }
.list-more__chev { transition: transform 160ms ease; }
.list-more[open] > summary .list-more__chev { transform: rotate(180deg); }
.list-more[open] > .list-more__summary { margin-bottom: var(--space-3); }
.list-more { margin-top: var(--space-2); }
.career-timeline__older[open] > summary .career-timeline__duties-chev { transform: rotate(180deg); }
.career-timeline__older[open] > .career-timeline__older-summary { margin-bottom: var(--space-3); }
.career-timeline__more-summary {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent);
    min-height: 32px;
    font-variant-numeric: tabular-nums;
}
.career-timeline__more-summary::-webkit-details-marker { display: none; }
.career-timeline__more[open] .career-timeline__more-summary { display: none; }

/* Редактор места работы: replace-режим как у education (скрывает просмотр
   карточки), meta-поля в 4 колонки на десктопе. */
.career-timeline__card:has(.career-timeline__edit[open]) > :not(.career-timeline__edit, .career-timeline__foot) { display: none; }
/* Подвал карточки: «Обязанности» слева, «Редактировать» справа одной строкой.
   Раскрытые обязанности занимают всю ширину, правка уходит под них к правому
   краю (порядок DOM не меняется: нажатая строка не прыгает). Раскрытая правка
   замещает карточку — соседи в подвале прячутся так же, как блоки выше. */
.career-timeline__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-3);
}
.career-timeline__foot > .career-timeline__edit { margin: 0 0 0 auto; }
.career-timeline__duties[open] { flex-basis: 100%; }
.career-timeline__foot:has(.career-timeline__edit[open]) > :not(.career-timeline__edit) { display: none; }
.career-timeline__foot > .career-timeline__edit[open] { flex-basis: 100%; margin-left: 0; }
.career-timeline__foot:empty { display: none; }
.career-timeline__edit { margin-top: 0; }
.career-timeline__card:has(.career-timeline__edit[open]) .career-timeline__edit { margin-top: 0; }
.career-timeline__edit-form { max-width: none; }
.career-timeline__edit-meta-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    grid-column: 1 / -1;
}
@media (min-width: 900px) {
    .career-timeline__edit-meta-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.career-timeline__edit-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    grid-column: 1 / -1;
    font-size: 0.875rem;
    color: var(--color-text);
    cursor: pointer;
    min-height: 32px;
}
.career-timeline__edit-form textarea { font-size: 1rem; }

/* ── Открытый inline-редактор = чёткая edit-панель ─────────────────────────
   Раньше форма Опыта/Образования при открытии плавала голой grid-сеткой из
   плоских инпутов («страшно»). Теперь — делинеированная зона: soft-подложка +
   фирменная accent-полоса слева («редактирую этот блок») + воздух. Полного
   border нет (родитель-карточка уже бордер), чтобы не двоить рамку.
   Достижения свою панель уже имеют (.achievement-card--edit). */
.career-education__edit[open] .career-education__edit-form,
.career-timeline__edit[open] .career-timeline__edit-form,
.career-entry-add[open] .career-education__edit-form {
    background: var(--color-bg-soft);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: clamp(var(--space-3), 2vw, var(--space-4));
    box-shadow: var(--shadow-xs);
}
/* Метки в edit-панели — мягче (как в .career-achieve-add), поля не двоят
   grid-gap своим margin-bottom. */
.career-education__edit[open] .field__label,
.career-timeline__edit[open] .field__label,
.career-entry-add[open] .field__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-soft);
}
.career-education__edit[open] .field,
.career-timeline__edit[open] .field,
.career-entry-add[open] .field { margin-bottom: 0; }

/* Inline-правка education-записи — edit-in-place без JS: details[open]
   скрывает read-view (через :has на body), форма замещает контент
   карточки на полную ширину, summary превращается «Редактировать» →
   «Отмена». Fallback без :has — форма раскрывается под view (details
   работает как раньше, данные просто видны дважды). */
.career-education__edit { margin-top: var(--space-3); }
/* Свёрнутая правка записи образования — у правого края, как у карточек мест
   работы и достижений: на телефоне она стояла строкой слева под названием.
   Отступ над ней снят — зона нажатия 44px сама держит воздух. */
.career-education__body > .career-education__edit:not([open]) { margin-top: 0; }
.career-education__body > .career-education__edit:not([open]) > .career-education__edit-summary { display: flex; width: fit-content; margin-left: auto; }
/* Отмена живёт РЯДОМ с «Сохранить», а не над формой: summary-тогл при
   открытии оставался там, где была «Редактировать», и на длинных формах
   (опыт) пара Save/Cancel разрывалась на целый экран — при том что соседний
   паттерн достижений держит пару внизу. Details → flex-колонка, summary
   уезжает в конец (order): в закрытом состоянии ничего не меняется (виден
   только summary), в открытом «✕ Отмена» встаёт сразу под формой, рядом с
   submit'ом. Порядок DOM не тронут — фокус и no-JS работают как раньше. */
.career-education__edit[open],
.career-timeline__edit[open] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.career-education__edit[open] > .career-education__edit-summary {
    order: 99;
    align-self: flex-start;
}
.career-education__body:has(.career-education__edit[open]) .career-education__view { display: none; }
.career-education__body:has(.career-education__edit[open]) .career-education__edit { margin-top: 0; }
.career-education__edit-summary {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    min-height: 44px;
    font-variant-numeric: tabular-nums;
}
.career-education__edit-summary::-webkit-details-marker { display: none; }
.career-education__edit-summary:hover { color: var(--color-accent); }
.career-education__edit-summary-closed,
.career-education__edit-summary-open { display: inline-flex; align-items: center; gap: 6px; }
.career-education__edit-summary-open { display: none; }
.career-education__edit[open] .career-education__edit-summary-closed,
.career-entry-add[open] .career-education__edit-summary-closed { display: none; }
.career-education__edit[open] .career-education__edit-summary-open,
.career-entry-add[open] .career-education__edit-summary-open { display: inline-flex; }
.career-education__edit[open] .career-education__edit-summary { color: var(--color-text-soft); }
.career-education__edit[open] .career-education__edit-summary:hover { color: var(--color-danger); }
/* Форма = контент карточки: без коробки-подложки. Ширина — по мере
   чтения, а не по карточке: на широком экране поля растягивались до 1750px,
   и взгляд терял связь метки с полем и кнопки с формой. */
.career-education__edit-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-1);
    max-width: 48rem;
}
/* Ряд кнопок — на всю ширину формы: в двухколоночной сетке он садился в
   первую колонку, и «Удалить запись» (прижата вправо) вставала посередине. */
.career-education__edit-form > .career-entry-actions { grid-column: 1 / -1; }
/* Год в ряду «кем выдан · год» на телефоне стоит своей строкой — но полем
   под четыре цифры, а не во всю ширину. */
.career-education__edit-row--year > .field:last-child input { max-width: 8rem; }
@media (min-width: 640px) {
    .career-education__edit-row--year > .field:last-child input { max-width: none; }
}
/* На телефоне открытая правка забирает и колонку значка: рядом с ним полям
   оставалось 240px, и название сертификата обрезалось уже на втором слове. */
@media (max-width: 639.98px) {
    .career-education__item:has(> .career-education__body > .career-education__edit[open]) > .career-education__icon { display: none; }
}
@media (min-width: 720px) {
    .career-education__edit-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Поле прямо в форме — длинный текст (вуз, факультет, специальность,
       название курса): на всю строку, иначе он режется на половине ширины.
       Короткие поля стоят парами и тройками в .career-education__edit-row. */
    .career-education__edit-form > .field { grid-column: 1 / -1; }
}
.career-education__edit-form .btn { justify-self: start; grid-column: 1 / -1; }
.career-education__edit-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    grid-column: 1 / -1;
}
@media (min-width: 640px) {
    .career-education__edit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Должность · компания · город — один ряд: город коротким полем справа,
       своей строкой он оставлял пустую половину. */
    .career-education__edit-row--place { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr); }
    /* Степень · год начала · год окончания: годам хватает узкой колонки. */
    .career-education__edit-row--three { grid-template-columns: minmax(0, 1fr) 7.5rem 7.5rem; }
    /* Кем выдан · год: четырём цифрам — узкое поле, не половина формы. */
    .career-education__edit-row--year { grid-template-columns: minmax(0, 1fr) 7.5rem; }
}

.career-education__meta {
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.career-education__period {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #757575);
}
.career-education__tag {
    padding: 1px 8px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
}
.career-education__tag--completed {
    background: color-mix(in srgb, var(--color-tier-strong, #4a7a4a) 14%, transparent);
    color: var(--color-tier-strong, #4a7a4a);
}
.career-education__tag--studying {
    background: color-mix(in srgb, var(--color-accent, currentColor) 14%, transparent);
    color: var(--color-accent, currentColor);
}
.career-education__tag--unfinished {
    background: var(--color-surface-sunken, color-mix(in srgb, currentColor 8%, transparent));
    color: var(--color-text-muted);
}

.meta-list > div {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.meta-list dt {
    margin: 0;
    color: var(--color-text-muted);
    min-width: 9rem;
}

.meta-list dd {
    margin: 0;
    color: var(--color-text);
}

.action-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.history-list__item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-soft);
}

.history-list__op,
.history-list__source,
.history-list__time {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.facts-edit-form {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}

/* =============================================================
   M1 resume editor / letter / applications — слой-индикаторы,
   split-view, канбан-доска (Task 14). Mobile-first.
   ============================================================= */

/* --- ui_layer_indicator: маркер происхождения блока (§2.6) --- */
.layer-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.layer-indicator__bar {
    width: 3px;
    height: 0.9rem;
    border-radius: 2px;
    background: var(--color-border-strong);
}

.layer-indicator--you .layer-indicator__bar { background: var(--color-accent); }
.layer-indicator--you .layer-indicator__label { color: var(--color-accent-soft); }
.layer-indicator--ai .layer-indicator__bar { background: var(--color-success); }
.layer-indicator--facts .layer-indicator__bar { background: var(--color-warning); }
.layer-indicator--profile .layer-indicator__bar { background: var(--color-accent-soft); }

/* --- editor split-view + content blocks --- */
.editor-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 64rem) {
    .editor-split {
        grid-template-columns: 3fr 2fr;
        align-items: start;
    }
}

.editor-split__preview,
.editor-split__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.editor-block {
    position: relative;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-soft);
    border-left: 3px solid var(--color-border-strong);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.editor-block[data-layer="you"] { border-left-color: var(--color-accent); }
.editor-block[data-layer="ai"] { border-left-color: var(--color-success); }
.editor-block[data-layer="facts"] { border-left-color: var(--color-warning); }
.editor-block[data-layer="profile"] { border-left-color: var(--color-accent-soft); }

.editor-block__headline {
    font-size: 1.0625rem;
    margin: 0;
}

.editor-block__title {
    font-size: 0.9375rem;
    margin: 0;
    text-transform: capitalize;
}

.editor-block__target {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-soft);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.editor-block__text { margin: 0; color: var(--color-text-soft); }

.editor-overrides {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.editor-form { margin-top: var(--space-2); }

/* --- ui_undo_confirm: каскадный откат --- */
.undo-confirm__icon {
    display: flex;
    justify-content: center;
    color: var(--color-warning);
    margin-bottom: var(--space-2);
}

.undo-confirm__effects {
    margin: var(--space-3) 0 0;
    padding-left: var(--space-5);
    color: var(--color-text-soft);
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* --- artifact view --- */
/* Прежний .artifact-toolbar удалён: действия документа переехали в eyebrow-row
   ui_section_header (канон unified header), навигация Резюме ⇄ Письмо — в
   фирменные workspace-табы (resume_artifact_subnav, классы .profile-subnav). */

/* ---- ui_feedback_notes — редакторские заметки AI (резюме / письмо) ----
   AI-поверхность в айдентике .btn--ai (design-system §AI actions): accent
   gradient-hairline рамка (двойной фон padding-box/border-box), лёгкая
   aurora-засветка в углу, sparkles с мягким свечением, kind-корзины с
   цветными вехами-точками. Крафтовый Linear/Raycast-look, НЕ washed-fill —
   блок мгновенно читается как «это говорит AI», отделяясь от нейтральных
   spec-карточек рядом. */
.feedback-notes {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* Тот же внутренний отступ, что у соседей по рейлу («Соответствие
       вакансии», «О документе»): три карточки в одной колонке с 16, 28 и 28
       пикселями читались как три разных класса блока. Акцентная рамка и
       свечение остаются — это опознавательный знак AI-заметок, а не разнобой. */
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border: 1.5px solid transparent;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(140% 120% at 100% 0%,
            rgba(var(--color-accent-rgb), 0.07), transparent 55%) padding-box,
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(150deg,
            rgba(var(--color-accent-rgb), 0.55),
            rgba(var(--color-accent-rgb), 0.12) 45%,
            rgba(var(--color-accent-rgb), 0.55)) border-box;
    box-shadow: 0 1px 14px -7px rgba(var(--color-accent-rgb), 0.45);
}
.feedback-notes__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    /* Шапка карточки — заголовок, а не серый эйбрау: группы под ней не
       должны звучать громче её самой. */
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-text);
}
/* Sparkles — тот же accent-глиф с мягким свечением, что у .btn--ai. */
.feedback-notes__eyebrow .icon {
    color: var(--color-accent);
    filter: drop-shadow(0 0 3px rgba(var(--color-accent-rgb), 0.5));
}
.feedback-notes__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* Цвет группы — kind-семантика (советы зелёные, риски amber). */
    --fb-kind: var(--color-accent);
}
.feedback-notes__group--warning { --fb-kind: var(--color-warning); }
.feedback-notes__group--remark { --fb-kind: var(--color-accent); }
.feedback-notes__group--suggestion { --fb-kind: var(--color-sage-deep); }
.feedback-notes__kind {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
}
.feedback-notes__kind-icon {
    display: inline-flex;
    align-items: center;
    color: var(--fb-kind);
}
.feedback-notes__kind-count {
    min-width: 1.25rem;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fb-kind) 12%, transparent);
    color: color-mix(in srgb, var(--fb-kind) 75%, var(--color-text));
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* Список — одна полоса цвета группы слева; пункты разделены воздухом. */
.feedback-notes__list {
    list-style: none;
    margin: 0 0 0 6px;
    padding: 0 0 0 var(--space-2);
    border-left: 2px solid color-mix(in srgb, var(--fb-kind) 45%, transparent);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.feedback-notes__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Рейл узкий: 14px держат строку длиннее, чем 15. */
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text);
}
.feedback-notes__field {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text-muted);
}

/* Шапка карточки: заголовок и (при нескольких советах с готовым ответом)
   ссылка в общую очередь дописок. На узком рейле ссылка уходит под заголовок. */
.feedback-notes__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
}
.feedback-notes__queue {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}
.feedback-notes__queue:hover { text-decoration: underline; }
.feedback-notes__queue:focus-visible,
.feedback-notes__update:focus-visible,
.feedback-notes__answer-toggle:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
}
/* Ответ на совет на месте (round 86): раскрывашка-ссылка «Дописать сейчас»
   с полем внутри строки резюме. Native <details>, без JS. */
.feedback-notes__answer {
    margin-top: var(--space-2);
}
.feedback-notes__answer-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent);
}
.feedback-notes__answer-toggle::-webkit-details-marker { display: none; }
.feedback-notes__answer-toggle:hover span { text-decoration: underline; }
.feedback-notes__answer-form {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
}
.feedback-notes__answer-form .prep-answer { justify-self: stretch; }
/* В рейле строка резюме — того же кегля, что текст заметки: кегль шага
   очереди (1.0625rem) в колонке 260px делал строку крупнее самого совета. */
.feedback-notes__answer-form .prep-answer__line { font-size: 0.9375rem; line-height: 1.65; }
.feedback-notes__answer-form .btn { white-space: nowrap; }
/* Записанный ответ: отметка и путь к пересборке документа. */
.feedback-notes__answered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin: var(--space-2) 0 0;
    font-size: 0.8125rem;
}
.feedback-notes__answered-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 600;
    color: var(--color-success);
}
.feedback-notes__update {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--color-accent);
}

/* Disclosure-режим (редактор): свёрнутая строка-шапка с kind-счётчиками —
   советник не занимает место работника, форма остаётся primary. Native
   <details>, без JS. */
.feedback-notes--disclosure {
    display: block;
    padding: 0;
}
.feedback-notes__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-lg);
}
.feedback-notes__summary::-webkit-details-marker { display: none; }
.feedback-notes__summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.feedback-notes__eyebrow--inline { flex: 0 1 auto; min-width: 0; }
/* kind-счётчики в шапке: цветные капсулы — warning не пропустить и в свёрнутом. */
.feedback-notes__counts {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
}
.feedback-notes__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 5px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    --fb-kind: var(--color-accent);
    color: color-mix(in srgb, var(--fb-kind) 75%, var(--color-text));
    background: color-mix(in srgb, var(--fb-kind) 12%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--fb-kind) 30%, transparent);
}
.feedback-notes__count--warning { --fb-kind: var(--color-warning); }
.feedback-notes__count--remark { --fb-kind: var(--color-accent); }
.feedback-notes__count--suggestion { --fb-kind: var(--color-sage-deep); }
.feedback-notes__chevron {
    display: inline-flex;
    color: var(--color-text-muted);
    transition: transform 160ms ease;
}
.feedback-notes--disclosure[open] .feedback-notes__chevron { transform: rotate(180deg); }
.feedback-notes__eyebrow { scroll-margin-top: 5rem; }
.feedback-notes__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-1) var(--space-4) var(--space-4);
}

/* ---- Share-меню (dropdown в eyebrow-row хедера, замена страницы /share) ----
   Две строки выбора доступа, под ними — блок ссылки: «по ссылке старая
   версия» (если резюме правили после публикации), сам адрес, главное
   действие «Скопировать» и тихая строка «открывали N раз». Поле блока ссылки
   отступает от краёв листа так же, как текст строк выбора: прежде поле и
   кнопка стояли в 4px от рамки и читались вылезшими из меню. */
.share-menu { position: relative; }
.share-menu__panel {
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Ширина — только у поповера: на телефоне меню — нижний лист во всю ширину,
   и прежний min(20rem, …) оставлял справа пустую полосу. */
@media (min-width: 768px) {
    .share-menu__panel { width: 22.5rem; max-width: 22.5rem; padding: var(--space-2); }
    /* Поле и зазор — как у строк остальных меню: значок в той же колонке. */
    .share-menu__opt { padding: var(--space-2); gap: var(--space-3); }
}
.share-menu__opt-form { margin: 0; }
.share-menu__opt {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--color-text);
    transition: background 160ms ease;
}
.share-menu__opt:hover:not(:disabled) { background: var(--color-bg-soft); }
.share-menu__opt:disabled { cursor: default; }
/* Выбранное — галочкой и тоном значка, а не заливкой строки: голубая плашка
   читалась кнопкой, а в остальных меню выбор помечен только галочкой. */
.share-menu__opt-icon { flex: none; color: var(--color-text-muted); }
.share-menu__opt--active .share-menu__opt-icon { color: var(--color-accent); }
.share-menu__opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.share-menu__opt-title { font-weight: 600; font-size: 0.875rem; line-height: 1.3; }
.share-menu__opt-desc { font-size: 0.8125rem; line-height: 1.4; color: var(--color-text-muted); }
/* Галочка всегда в DOM (share-menu.js переключает active-класс без пересоздания
   разметки), видима только у активной опции. */
.share-menu__opt-check { flex: none; color: var(--color-accent); visibility: hidden; }
.share-menu__opt--active .share-menu__opt-check { visibility: visible; }

.share-menu__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-1);
    padding: var(--space-3) var(--space-2) var(--space-1);
    border-top: 1px solid var(--color-border-soft);
}
@media (min-width: 768px) {
    .share-menu__link { padding-inline: var(--space-2); }
}
/* display:flex перебивал [hidden] → при «Доступ закрыт» оставалось пустое поле.
   Явно прячем. */
.share-menu__link[hidden],
.share-menu__stale[hidden] { display: none; }

/* «По ссылке старая версия» — над адресом: обновить ссылку надо до того, как
   её копировать. Тон предупреждения, без тревоги: ничего не сломалось. */
.share-menu__stale {
    display: flex;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-warning-soft, var(--color-bg-soft));
    color: var(--color-text);
}
.share-menu__stale-icon { flex: none; margin-top: 2px; color: var(--color-warning, var(--color-text-muted)); }
.share-menu__stale-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.share-menu__stale-title { margin: 0; font-weight: 600; font-size: 0.875rem; line-height: 1.3; }
.share-menu__stale-body { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-muted); }
.share-menu__refresh { margin-top: var(--space-1); }

/* Адрес — ссылка-строка: хост и путь без протокола, обрезка в конце (начало
   токена и хост остаются видны), значок «открыть» справа. */
.share-menu__url {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.875rem;
    transition: border-color 160ms ease, background 160ms ease;
}
.share-menu__url:hover { border-color: var(--color-border-strong, var(--color-text-muted)); background: var(--color-surface); }
.share-menu__url:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.share-menu__url-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.share-menu__url-icon { flex: none; color: var(--color-text-muted); }
.share-menu__url:hover .share-menu__url-icon { color: var(--color-accent); }

.share-menu__copy { width: 100%; justify-content: center; min-height: 44px; }
/* Подтверждение копирования — галочкой на месте значка и словами: подпись
   одна, меняется только её текст, кнопка не прыгает по ширине. */
.share-menu__copy-icon { display: inline-flex; }
.share-menu__copy-done { display: none; }
.share-menu__copy.is-copied .share-menu__copy-idle { display: none; }
.share-menu__copy.is-copied .share-menu__copy-done { display: inline-block; }

.share-menu__views {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-1) 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.share-menu__views-icon { flex: none; }

.artifact-grid {
    display: grid;
    /* minmax(0, …): у «1fr» минимум — ширина содержимого, и лист резюме
       распирал колонку на телефоне за край экрана (365px в контейнере 341). */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}
/* Переход к заметкам редактора над документом — только пока рейл стоит под
   документом (см. view.html). */
.artifact-notes-jump {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    margin: 0 0 var(--space-4);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}
.artifact-notes-jump__icon { flex: none; color: var(--color-accent); }
.artifact-notes-jump__label { flex: 1 1 auto; min-width: 0; }
.artifact-notes-jump__count {
    flex: none; min-width: 1.5rem; padding: 0 6px; border-radius: 999px; text-align: center;
    font-size: 0.8125rem; font-weight: 600; line-height: 1.5rem; font-variant-numeric: tabular-nums;
    background: var(--color-bg-soft); color: var(--color-text-soft);
}
.artifact-notes-jump__arrow { flex: none; color: var(--color-text-muted); }
.artifact-notes-jump:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (min-width: 64rem) {
    .artifact-notes-jump { display: none; }
}

/* Рейл — стек карточек с воздухом: блок AI-заметок под «О документе» не
   должен слипаться с ним в одно серое полотно. */
.artifact-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 64rem) {
    .artifact-grid { grid-template-columns: minmax(0, 3fr) minmax(16rem, 1fr); align-items: start; }
    /* Панель деталей залипает при скролле длинного документа. */
    .artifact-meta { position: sticky; top: var(--space-4); }
}

/* .artifact-doc — прозрачный контейнер документа. Рамку/фон/тень даёт вложенный
   кремовый лист (.tpreview__sheet, единый с редактором и письмом), processing
   (.doc-processing) или state-card. Своя surface-карточка убрана — иначе вокруг
   кремового листа была лишняя серая рамка (двойной фон). */
.artifact-doc {
    max-width: 52rem;
    width: 100%;
    /* Left-align (не center): лист по левому краю колонки = левый край
       заголовка/крошек. */
    margin-inline: 0;
}

.artifact-doc__headline { margin: 0 0 var(--space-2); }
.artifact-doc__summary { margin: 0; color: var(--color-text-soft); }
.artifact-doc__value-prop { margin: 0 0 var(--space-2); color: var(--color-text); font-size: 0.9375rem; }
.artifact-doc__contacts { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.875rem; color: var(--color-text-muted); }
.artifact-doc__contacts > li { display: inline-flex; }
.artifact-doc__contacts > li + li::before { content: "·"; margin-right: 12px; opacity: 0.5; }
.artifact-doc__edu-years { margin: 2px 0 0 !important; font-family: var(--font-sans); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.artifact-doc__sections {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Real-content section (audit C1: раньше рендерили только section names —
   "experience", "education" — теперь полный контент по каждой секции). */
.artifact-doc__section {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
.artifact-doc__section-title { font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.artifact-doc__key-achievements { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.artifact-doc__key-achievements > li { padding: var(--space-2) var(--space-3); border-left: 2px solid var(--color-teal); background: color-mix(in srgb, var(--color-teal) 4%, transparent); border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0; }
.artifact-doc__key-achievements > li > p { margin: 4px 0 0; font-size: 0.875rem; color: var(--color-text-soft); }
.artifact-doc__experience { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.artifact-doc__role > header { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; margin-bottom: var(--space-2); }
.artifact-doc__role-position { margin: 0; font-weight: 600; font-size: 1rem; }
.artifact-doc__role-period { margin: 0; font-family: var(--font-sans); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.artifact-doc__bullets { list-style: disc inside; margin: var(--space-2) 0 0; padding-left: var(--space-2); display: flex; flex-direction: column; gap: 4px; font-size: 0.9375rem; line-height: 1.5; }
.artifact-doc__bullets--achievements > li { color: var(--color-text); font-weight: 500; }
.artifact-doc__chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.artifact-doc__education { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.artifact-doc__education > li > strong { font-size: 0.9375rem; }
.artifact-doc__education > li > p { margin: 2px 0 0; font-size: 0.875rem; }
.artifact-doc__section--cover-letter { background: color-mix(in srgb, var(--color-violet, var(--color-accent)) 4%, transparent); padding: var(--space-4); border-radius: var(--radius-lg, 12px); border-top: none; }
.artifact-doc__cover-subject { margin: 0 0 var(--space-2); }
.artifact-doc__cover-body { white-space: pre-wrap; font-family: inherit; margin: 0; line-height: 1.55; color: var(--color-text); }

.artifact-meta__card { display: flex; flex-direction: column; gap: var(--space-3); }
/* Карточки рейла резюме — оболочка информационной панели, как в колонках
   «Обзора» и профессии: рамка 1px, отступ 16px, без тени (30.10). Прежде
   вердикт и «О документе» стояли с тенью и отступом 28px, заметки — со
   своей рамкой, и три соседние карточки были тремя разными узорами.
   Заголовки остаются внутри у всех трёх: у заметок заголовок — кнопка
   раскрытия, и вынести его над карточкой нельзя, а два правила в одной
   колонке хуже одного. Кегль заголовков один — как у заметок. */
.artifact-meta > .cov-verdict--compact,
.artifact-meta > .feedback-notes,
.artifact-meta > .artifact-meta__card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: none;
}
.artifact-meta .cov-verdict__eyebrow,
.artifact-meta > .artifact-meta__card > .artifact-meta__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}
/* Заголовок панели — канон form-group eyebrow (как .editor-section__title):
   sans, 0.6875rem, weight 700, 0.1em, uppercase, muted; отделён линией от строк.
   Без accent-dash — dash-eyebrow не входит в канон. */
.artifact-meta__title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    margin: 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);
}
.artifact-meta__subtitle { font-size: 0.9375rem; margin: 0; }
/* Плавающее действие на документе: sticky-пилюля «Редактировать» в правом
   верхнем углу листа, остаётся видимой при прокрутке (главное действие — на
   объекте, а не спрятано в рейле). height:0 — строка не сдвигает лист. */
.artifact-doc__edit {
    position: sticky;
    /* Offset ниже sticky-топбара кабинета (~4.2rem) — иначе пилюля при
       прокрутке заезжала под него и «исчезала». */
    top: 4.75rem;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    height: 0;
}
.artifact-doc__edit .artifact-doc__edit-btn {
    transform: translateY(var(--space-2));
    margin-right: var(--space-2);
    box-shadow: var(--shadow-md, 0 6px 20px -8px rgba(15, 23, 42, 0.35));
    backdrop-filter: blur(4px);
}
/* Плотный вариант meta-list для боковой панели — spec-sheet: строки dt/dd
   разделены тонкими hairline'ами, baseline-выровнены; label по контенту слева,
   значение справа. Ragged-gap читается как намеренная таблица характеристик. */
.meta-list--tight { gap: 0; }
.meta-list--tight > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}
.meta-list--tight > div + div {
    border-top: 1px solid var(--color-border-soft);
}
/* dt по ширине контента (override базового min-width:9rem — в узкой панели он
   не оставлял места длинным значениям, ссылка «Профиль» уезжала на всю ширину).
   dd забирает остаток и выравнивается вправо, длинное значение переносится
   вправо, а не ломает раскладку. */
/* Spec/meta-лейбл — единый канон read-only key-value: mono, 0.7rem, 0.1em,
   uppercase, muted (как .profile-settings__meta-row / positioning). */
.meta-list--tight dt {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    min-width: 0;
    flex: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.meta-list--tight dd {
    font-size: 0.875rem;
    text-align: right;
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* --- Страница письма: один лист + ИИ-рейл (letter-workspace) --- */
/* Письмо — простой текст, поэтому НЕ split-view с дублирующим превью: лист
   слева редактируется прямо на бумаге (WYSIWYG-ish, auto-grow), а ИИ-контролы
   вынесены в компактный sticky-рейл справа. Mobile-first: одна колонка (рейл
   под листом); ≥1024px — грид (гибкий лист + узкий рейл). */
.letter-workspace {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.letter-workspace__doc {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
/* Лист-документ — та же «бумага», что превью резюме (.tpreview__sheet): светлый
   фон, мягкая тень, поля листа. Внутри — редактируемое тело письма. */
.letter-sheet {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
    padding: var(--space-5) var(--space-6);
    background: var(--surface-paper);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
/* Шапка листа — saved-indicator, отделён тонкой линией «чернил». */
.letter-sheet__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid color-mix(in srgb, var(--resume-paper-ink) 10%, transparent);
}
/* Тело письма редактируется прямо на бумаге: снимаем input-рамку/фон/тень,
   документный serif-ритм, тёмные «чернила». Авто-рост: JS ставит
   height=scrollHeight, field-sizing:content — no-JS-фоллбэк. ≥16px eq против
   iOS-зума (1.0625rem). Специфичность .letter-sheet__body.input.textarea
   перебивает базовый .input.textarea. */
.letter-sheet__body.input.textarea {
    min-height: 24rem;
    field-sizing: content;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--resume-paper-ink);
    font-family: var(--font-classic-serif);
    font-size: 1.0625rem;
    line-height: 1.75;
    resize: none;
}
.letter-sheet__body.input.textarea:focus,
.letter-sheet__body.input.textarea:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
}
/* Пустой лист (письма ещё нет) — тёплый muted ink, не UI-цвет. */
.letter-sheet .empty-state,
.letter-sheet .empty-state__title,
.letter-sheet .empty-state__body {
    color: var(--resume-paper-ink-muted);
}
.letter-sheet__hint {
    width: 100%;
    max-width: 52rem;
    margin: 0 auto;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Tool Rail (spatial-system §Tool Rail) — постоянный рабочий рейл инструментов
   над Canvas Body. Сам рейл прозрачный (это layout-контейнер); каждый инструмент —
   отдельная surface-card, чтобы рейл читался как стек платформенных карточек,
   а не bespoke-бокс. Mobile: блок под поверхностью; ≥1024px: узкая sticky-колонка. */
.tool-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
/* Хинт под eyebrow карточки-инструмента — что делает действие (regenerate vs …). */
/* Канон form-group hint (эталон — .editor-section .field__hint): 0.75rem,
   полупрозрачный muted — служебная подсказка тише лейбла. */
.tool-rail__hint {
    margin: 0 0 var(--space-3);
    font-size: 0.8125rem;
    line-height: 1.35;
    color: color-mix(in srgb, var(--color-text-muted) 78%, transparent);
}
.tool-rail__history { margin-top: 0; }

/* Быстрые правки: выбор правки-чипа (радио) → раскрытие нужного поля
   (.quick-edit__reveal) → одна «Применить». Reveal — лёгкий accent-индент,
   [hidden] прячет нативно (div, без своего display). */
.quick-edit__reveal {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-left: var(--space-3);
    border-left: 2px solid rgba(var(--color-accent-rgb), 0.25);
}
.quick-edit__reveal[hidden] { display: none; }

/* «Применить правку» — собственный отступ сверху: .form-stack не задаёт gap,
   поэтому кнопка иначе липнет к reveal-textarea (или к чипам, если reveal
   свёрнут). margin-top даёт стабильный зазор в обоих состояниях. */
.quick-edit__apply { margin-top: var(--space-3); }

/* Prompt-composer — AI-инпут свободной инструкции как chat/command-композер, а не
   голый textarea: рамка вокруг всего блока, placeholder вместо лейбла, авто-рост,
   «Применить» в футере справа. focus-within — тонкий accent-ring. */
.prompt-composer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.prompt-composer:focus-within {
    border-color: rgba(var(--color-accent-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.10);
}
/* textarea внутри — снимаем базовую рамку/фон/тень .input, авто-рост, ≥16px
   против iOS-зума. */
.prompt-composer__input.input.textarea {
    min-height: 3rem;
    field-sizing: content;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    resize: none;
    font-size: 1rem;
    line-height: 1.5;
}
.prompt-composer__input.input.textarea:focus,
.prompt-composer__input.input.textarea:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
}
.prompt-composer__footer {
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 1024px) {
    /* Грид: гибкий лист + узкий рейл. align-items:start — рейл не растягивается. */
    .letter-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: var(--space-6);
        align-items: start;
    }
    /* Лист остаётся документной ширины (комфортная мера чтения ~75ch) и
       центрируется в гибкой колонке — как «страница» в редакторе документов,
       а не растянутый на всю ширину блок (длинные строки читаются плохо). */
    .letter-workspace__doc .letter-sheet,
    .letter-workspace__doc .letter-sheet__hint {
        max-width: 46rem;
        margin-inline: auto;
    }
    /* Рейл липнет при скролле длинного письма. */
    .tool-rail {
        position: sticky;
        top: var(--space-4);
    }
}

/* «Дополнительные настройки» — вторичные настройки перегенерации (ATS / язык)
   отдельной видимой группой под тоном/форматом, отделены тонким сепаратором. */
.letter-editor__advanced-summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.letter-editor__advanced-summary::-webkit-details-marker { display: none; }
.letter-editor__advanced-summary::before { content: "+"; font-size: 0.9375rem; line-height: 1; }
.letter-editor__advanced[open] .letter-editor__advanced-summary::before { content: "–"; }

.letter-editor__advanced {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed color-mix(in srgb, var(--color-border) 60%, transparent);
}
/* Sub-лейблы полей инструментов рейла (Тип компании / Формат) — легче базового
   .field__label, чтобы не перевешивать card-eyebrow. Компактный ритм chip-групп. */
/* Канон form-group label (эталон — .editor-section .field__label): sentence-case,
   0.8125rem, weight 500, muted. */
.tool-rail__card .field__label {
    margin-top: var(--space-3);
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.tool-rail__card .field__label:first-of-type { margin-top: 0; }
/* Канон form-group hint внутри рейла — как в контенте резюме. */
.tool-rail__card .field__hint {
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--color-text-muted) 78%, transparent);
}
.tool-rail__card .chip-radio { margin-top: var(--space-2); gap: var(--space-1); }
/* Компактные чипы-селекторы в Tool Rail: на десктопе (pointer, узкий рейл) ниже
   44px и плотнее, чтобы «Тип компании / Формат» не занимали пол-рейла. На мобиле
   (touch) чипы остаются 44px — WCAG 2.5.5 tap-target не нарушаем. */
@media (min-width: 1024px) {
    .tool-rail__card .chip-radio__label {
        min-height: 32px;
        padding: var(--space-1) var(--space-3);
        font-size: 0.8125rem;
    }
}

.letter-variant {
    margin: 0;
    padding: var(--space-4);
    background: color-mix(in srgb, var(--color-surface-elevated) 50%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
    border-radius: var(--radius-md);
    display: grid;
    gap: var(--space-3);
}
.letter-variant legend {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    padding: 0;
    font-variant-numeric: tabular-nums;
}
/* История правок — тихий блок внизу редактора. */
.letter-history { margin-top: var(--space-5); }
.letter-history summary {
    cursor: pointer;
    padding: var(--space-2) 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    transition: color 0.15s ease;
    font-variant-numeric: tabular-nums;
}
.letter-history summary:hover { color: var(--color-text-soft); }
.letter-history[open] summary { margin-bottom: var(--space-2); }

.customize-form { max-width: 32rem; }

/* --- applications toolbar / table --- */
.apps-toolbar {
    display: flex;
    flex-wrap: wrap;
    /* Вид и фильтр — соседние органы управления одним списком, а не две
       секции: на мобиле они переносились с секционным зазором и читались
       разорванно. */
    gap: var(--space-2) var(--space-3);
    align-items: center;
    justify-content: space-between;
}

.apps-kanban-hint { margin: 0 0 var(--space-3); font-size: 0.875rem; }

/* Воронка откликов — elevated list-cards (ui_application_card). Раньше это
   была голая <table> с hairline-рядами (плоско + horizontal-scroll на мобиле).
   Каждый отклик — карточка-ссылка с глубиной и hover-lift; mobile-first. */
.app-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.app-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform 200ms var(--ease-spring), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.app-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.app-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.app-card__main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.app-card__title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-card__sub {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.app-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}
.app-card__profession {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-soft);
    white-space: nowrap;
}
.app-card__date {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Тишина дольше порога статуса — предупреждающий тон, не тревожный красный:
   это не ошибка, а факт, на который стоит посмотреть. Полоса слева у карточки
   даёт увидеть застой при беглом взгляде по списку, не читая каждую строку. */
.app-card__date--stalled { color: var(--color-warning); font-weight: 500; }
.app-card--stalled { border-left: 3px solid var(--color-warning); }
.app-card__chevron {
    display: inline-flex;
    color: var(--color-text-muted);
    transition: transform 200ms var(--ease-spring), color 200ms var(--ease-out);
}
.app-card:hover .app-card__chevron {
    transform: translateX(3px);
    color: var(--color-accent);
}
/* Mobile: title+sub сверху на полную ширину, meta-ряд переносится под ними
   и выравнивается по левому краю (чипы/дата не жмутся в узкую колонку). */
@media (max-width: 560px) {
    .app-card {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    .app-card__meta {
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
    }
    .app-card__chevron { display: none; }
}

/* --- applications detail --- */
/* ==========================================================================
   Application detail — /app/applications/{id}. Технологичный two-column detail
   в каноне .job-detail: pipeline-band на всю ширину + left rail (sticky на
   десктопе) со статусом/документами/рекрутером + right main column со сменой
   статуса, заметками, напоминаниями, итогом и timeline'ом истории.
   Mobile-first: одна колонка ≤375px, two-column на десктопе. Токены-only.
   ========================================================================== */

/* Блок «Сейчас» — где отклик и что с ним делать.

   Заменил три блока, отвечавших на один вопрос вразнобой: ленту воронки,
   карточку «Статус» в рейле и панель «Перевести в» с двенадцатью кнопками. */
.apps-now {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.apps-now__state {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 1.0625rem;
}
/* «Шаг 5 из 6» — на телефоне это ЕДИНСТВЕННЫЙ указатель места в воронке
   (лента ниже скрыта), поэтому строка живёт в шапке блока, а не в ленте. */
.apps-now__step {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
/* Даты — одной строкой. Пары «лейбл / значение» в две flex-строки выравнивались
   каждая по своей ширине, и заголовки вставали на разные позиции. */
.apps-now__dates {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.apps-now__dates-sep { padding: 0 var(--space-1); }
.apps-now__undo {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
    font-size: 0.875rem; color: var(--color-text-soft);
}
.apps-timeline__revert { color: var(--color-text-muted); }
.apps-now__dates .mono { color: var(--color-text); }
/* Лента воронки — с планшета. На 375px вертикальный stepper занимал весь
   первый экран, и главное действие уезжало под сгиб. */
.apps-now__steps { display: none; }
/* Десктоп: сетка возвращает даты вправо вверх, не меняя порядок разметки —
   на телефоне он же и есть порядок чтения. */
@media (min-width: 48rem) {
    .apps-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .apps-now__state { grid-column: 1; grid-row: 1; }
    .apps-now__dates { grid-column: 2; grid-row: 1; text-align: right; }
    .apps-now__steps { display: block; grid-column: 1 / -1; padding-top: var(--space-1); }
    .apps-now .status-actions { grid-column: 1 / -1; }
    .apps-now__undo { grid-column: 1 / -1; }
}

/* Панель действий над откликом (ui_app_status_actions). */
.status-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.status-actions__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
/* На телефоне главное действие — во всю ширину: оно единственное, ради чего
   страницу открывают на ходу. */
.status-actions__row > .btn { flex: 1 1 100%; justify-content: center; }
@media (min-width: 30rem) {
    .status-actions__row > .btn { flex: 0 0 auto; }
}
/* Раскрывающийся блок — общий для панели статусов и формы напоминания: два
   похожих «summary» в одном разделе разъезжаются на первой же правке. */
.disclosure__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary:hover { color: var(--color-text); }
.disclosure__chevron { transition: transform 0.15s ease; }
.disclosure[open] .disclosure__chevron { transform: rotate(180deg); }
.status-actions__more { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.status-actions__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-3);
}
.status-actions__group-label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}
.status-actions__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
@media (prefers-reduced-motion: reduce) {
    .disclosure__chevron { transition: none; }
}

/* Rail / body grid — левый rail первым на мобиле, sticky на десктопе. */
.apps-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
}
.apps-detail__rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}
.apps-detail__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}
@media (min-width: 64rem) {
    .apps-detail { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); align-items: start; }
    .apps-detail__rail { position: sticky; top: var(--space-4); }
}

/* Panel — hairline-карточка (канон .job-detail__panel). */
.apps-detail__panel {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
}
/* Заголовок панели — канон eyebrow (sans 0.6875rem / 700 / 0.1em / uppercase). */
.apps-detail__panel-title {
    margin: 0 0 var(--space-3);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

/* Prominent current status в rail. */
.apps-detail__status {
    margin-bottom: var(--space-3);
    font-size: 1.0625rem;
}

/* Documents / links. */
.apps-detail__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Meta-list (dt/dd) — spec-строки rail'а. */
.apps-meta { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.apps-meta__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.apps-meta__label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}
.apps-meta__value { font-size: 0.875rem; color: var(--color-text); text-align: right; }

/* Напоминания. */
.apps-reminders { margin: 0 0 var(--space-4); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.apps-reminders__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}
.apps-reminders__row:last-child { border-bottom: none; }
.apps-reminders__date { font-size: 0.8125rem; color: var(--color-text); }
.apps-reminders__note { flex: 1; min-width: 0; font-size: 0.875rem; color: var(--color-text-soft); }
.apps-reminder-add { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); }
/* Кнопка по содержимому: в flex-колонке она растягивалась во всю ширину панели
   и становилась неотличима от пустого поля ввода над ней. */
.apps-reminder-add > .btn { align-self: flex-start; }

/* Подготовка к разговору. Каждая строка — требование и что с ним делать;
   вторая половина тише первой, потому что первую человек узнаёт, а вторую
   читает. Левая веха тоном статуса: отсутствие и смежное подтверждение
   требуют разной подготовки, и различать их цветом дешевле, чем словом. */
.apps-prep__intro {
    margin: 0 0 var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    max-width: 68ch;
}
.apps-prep__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.apps-prep__item {
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border);
}
.apps-prep__item--missing { border-left-color: color-mix(in srgb, var(--color-danger) 55%, transparent); }
.apps-prep__item--partial { border-left-color: color-mix(in srgb, var(--color-warning) 65%, transparent); }
.apps-prep__item--plan { border-left-color: color-mix(in srgb, rgb(var(--color-accent-rgb)) 55%, transparent); }
.apps-prep__req { display: block; font-weight: 600; }
.apps-prep__what { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--color-text-muted); }
.apps-prep__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-3);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: rgb(var(--color-accent-rgb));
    font-variant-numeric: tabular-nums;
}

/* История — вертикальный timeline с node-dots на left-rail. */
.apps-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.apps-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 2px var(--space-3);
    padding: 0 0 var(--space-3) var(--space-4);
}
@media (min-width: 30rem) {
    /* Дата и переход в один ряд: на узком экране перенос читается лучше. */
    .apps-timeline__item { grid-template-columns: max-content minmax(0, 1fr); }
}
.apps-timeline__item:last-child { padding-bottom: 0; }
/* Rail-линия слева, соединяющая node-dots. */
.apps-timeline__item::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 6px;
    bottom: 0;
    width: 1px;
    background: var(--color-border);
}
.apps-timeline__item:last-child::before { display: none; }
/* Тон точки повторяет тон бейджа (ui_app_status_badge): позитивный финал —
   зелёный, негативный — коралловый, работа в процессе — accent. */
.apps-timeline__item--offer .apps-timeline__dot,
.apps-timeline__item--accepted .apps-timeline__dot { background: var(--color-success, var(--color-sage)); }
.apps-timeline__item--rejected .apps-timeline__dot,
.apps-timeline__item--rejected_by_me .apps-timeline__dot,
.apps-timeline__item--declined .apps-timeline__dot,
.apps-timeline__item--ghosted .apps-timeline__dot { background: var(--color-danger, var(--color-coral)); }
.apps-timeline__item--saved .apps-timeline__dot,
.apps-timeline__item--shortlisted .apps-timeline__dot { background: var(--color-border-strong, var(--color-text-muted)); }
.apps-timeline__dot {
    position: absolute;
    left: 0;
    top: 4px;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full, 50%);
    background: var(--color-accent);
    z-index: 1;
}
/* Строка события: точка · дата · переход. Дата — колонка фиксированной
   ширины, иначе восемь строк начинаются в восьми разных местах. */
.apps-timeline__date { font-size: 0.8125rem; color: var(--color-text-muted); white-space: nowrap; }
.apps-timeline__transition { font-size: 0.8125rem; color: var(--color-text); min-width: 0; }

/* --- ui_kanban_board: drag-and-drop доска --- */
/* Mobile-first: колонки стеком по вертикали, full-width. Drag между ними —
   вертикальный (естественнее пальцем, window auto-scroll в application-kanban.js),
   и видно больше контекста, чем в горизонтальном скролле по 80% ширины. */
.kanban {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Десктоп: горизонтальная доска. Колонка не ужимается ниже читаемой ширины —
   семь равных долей на 1160px давали ~150px, и заголовки резались посреди
   слова. Не поместившиеся колонки уезжают в горизонтальный скролл: доска,
   которую можно прокрутить, честнее доски, где ничего не прочесть. */
@media (min-width: 64rem) {
    .kanban {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(13.5rem, 1fr);
        gap: var(--space-4);
        overflow-x: auto;
        padding-bottom: var(--space-2);
        align-items: start;
    }
}

.kanban__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md, 0.5rem);
    /* Мобайл: пустая колонка компактна (шапка + узкая drop-зона), не занимает
       пол-экрана. Десктоп ниже растит до полноценной доски. */
    min-height: 3.25rem;
}
/* Четыре пустые колонки в мобильном стеке занимали половину прокрутки и
   сообщали ровно то же, что их счётчик «0». Оставляем шапку и полосу дропа
   высотой в палец — перетащить по-прежнему есть куда. */
@media (max-width: 63.99rem) {
    /* В покое пустая колонка — одна строка «название · 0»: четыре таких в
       стеке занимали половину прокрутки и повторяли собственный счётчик.
       Как только начинается перетаскивание, зона дропа раскрывается — цель
       для пальца появляется ровно тогда, когда она нужна. */
    .kanban__col:not(:has(.kanban__card)) { min-height: 0; }
    .kanban__col:not(:has(.kanban__card)) .kanban__list {
        min-height: 0;
        transition: min-height 140ms var(--ease-out);
    }
    .kanban--dragging .kanban__col:not(:has(.kanban__card)) .kanban__list {
        min-height: var(--tap-min);
    }
}
@media (min-width: 64rem) {
    .kanban__col {
        gap: var(--space-3);
        min-height: 9rem;
    }
    /* Пустая колонка не тянется под высоту самой полной: четыре пустых
       прямоугольника в пол-экрана сообщали ровно то же, что их счётчик «0». */
    .kanban__col:not(:has(.kanban__card)) { min-height: 6rem; }
}

.kanban__col--over {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface));
}
.kanban__col { transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; }

.kanban__col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kanban__col-title {
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}

.kanban__count {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-surface-overlay);
    border-radius: 999px;
    padding: 0 var(--space-2);
}

.kanban__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 2rem;
    /* Dropzone обязана занимать всю колонку: в пустой колонке узкий ul
       превращал 90% площади в «запрещённую» зону и drag «не работал». */
    flex: 1 1 auto;
}

/* Карточка отклика на доске: editorial-язык карточек системы (elevated
   surface + hover-lift), grip-affordance на hover, title/company иерархия,
   mono-дата в футере. Бейдж статуса рендерится только в агрегирующих
   колонках (interview/closed) — см. _kanban_board.html. */
.kanban__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md, 0.5rem);
    /* Плотная многоколоночная доска — нижний xs-уровень elevation-шкалы
       (recede под content-карточки sm); hover резко поднимает к md. */
    box-shadow: var(--shadow-xs);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.kanban__card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border-soft));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Source-карточка во время drag — приглушённый placeholder (двигается ghost). */
.kanban__card--dragging {
    opacity: 0.4;
}

/* Грип — единственный drag-хэндл (Pointer Events). Виден всегда (тач не имеет
   hover), touch-action:none — тач с грипа не скроллит; comfortable tap-зона. */
.kanban__card-grip {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    color: var(--color-text-muted);
    opacity: 0.4;
    cursor: grab;
    touch-action: none;
    transition: opacity 160ms ease, color 160ms ease;
}
.kanban__card:hover .kanban__card-grip { opacity: 0.75; }
.kanban__card-grip:active { cursor: grabbing; color: var(--color-accent); }

/* Ghost — плавающий клон карточки, следует за указателем поверх всего. */
.kanban__ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    margin: 0;
    pointer-events: none;
    opacity: 0.95;
    transform: rotate(2deg);
    box-shadow: var(--shadow-lg, var(--shadow-md));
    cursor: grabbing;
}

/* Во время drag не выделяем текст (мышь тащит по тексту карточки). */
.kanban--dragging {
    user-select: none;
    -webkit-user-select: none;
}

/* Десктоп (мышь/перо): вся карточка — drag-хэндл, курсор сигналит захват.
   На тач (coarse) вход в drag — только грип, карточка остаётся tap-ссылкой. */
@media (hover: hover) and (pointer: fine) {
    .kanban__card {
        cursor: grab;
    }
    .kanban__card:active {
        cursor: grabbing;
    }
    .kanban__card-link {
        cursor: inherit;
    }
}

.kanban__card-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    /* Тап по телу карточки открывает отклик — значит это зона нажатия, а не
       просто текст (WCAG 2.5.5). Короткий заголовок давал 41px. */
    min-height: var(--tap-min);
    text-decoration: none;
    color: var(--color-text);
    /* Отступ под grip-хэндл (2.5rem в верх-правом углу), чтобы заголовок не заезжал. */
    padding-right: 2.25rem;
}
.kanban__card-title {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.35;
    /* Колонка узкая, и «Head of Online School / Commercial Project Manager»
       разворачивался в шесть строк, растягивая всю доску под себя. Два ряда —
       достаточно, чтобы узнать вакансию; полное имя остаётся в title и на
       странице отклика. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kanban__card-company { font-size: 0.8125rem; }
/* Тот же сигнал застоя, что в списке: доска и список — два вида одной воронки,
   и «висит слишком долго» не может выглядеть на них по-разному. */
.kanban__card--stalled { border-left: 3px solid var(--color-warning); }
.kanban__card-date--stalled { color: var(--color-warning); }

.kanban__card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.kanban__card-date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ============================================================================
   Profile creation wizard (/app/profiles/new — focus flow)
   Client-side 6-шаговый мастер в chrome-less focus-shell онбординга
   (design-system §Focus flow): serif-вопрос на шаг, тонкий progress-бар
   shell'а (двигает profile-wizard.js), футер onboarding-step__actions.
   Здесь — только step-переключение и мультиселект-гриды.
   ========================================================================== */
.wizard { display: flex; flex-direction: column; gap: var(--space-5); }

.wizard__steps { min-height: 12rem; }
.wizard__step { display: flex; flex-direction: column; gap: var(--space-4); }
.wizard__step[hidden] { display: none; }

.wizard__group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.wizard__checks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wizard__check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    cursor: pointer;
    font-size: 0.9375rem;
    user-select: none;
}
/* Standalone boolean (напр. «Готов к релокации», «Учитывать total comp») —
   кастомный чекбокс с CSS-галкой вместо голого нативного (тот читался «дёшево»
   на Modern-SaaS фоне). Grid-версии (.wizard__checks) перекрываются ниже. */
.wizard__check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.wizard__check input[type="checkbox"]::after {
    content: "";
    width: 5px;
    height: 9px;
    margin-top: -2px;
    border: solid var(--color-accent-text, #fff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 160ms var(--ease-spring);
}
.wizard__check input[type="checkbox"]:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.wizard__check input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.wizard__check input[type="checkbox"]:hover { border-color: var(--color-accent); }
.wizard__check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Grid multi-select (Размер/Стадия компании) — chip-pill toggles, идентичные
   ui_chip_radio_group («Формат работы»). Раньше это был ряд голых нативных
   чекбоксов — главный «дешёвый» tell Предпочтений. */
.wizard__checks .wizard__check {
    gap: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.wizard__checks .wizard__check input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.wizard__checks .wizard__check:hover { border-color: var(--color-text-muted); }
.wizard__checks .wizard__check:has(input:checked) {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
    font-weight: 600;
}
.wizard__checks .wizard__check:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Back/Finish скрыты по умолчанию (нет FOUC до JS); profile-wizard.js
   управляет видимостью через inline display. */
.wizard__btn--back,
.wizard__btn--finish { display: none; }
.wizard__btn--back.is-active,
.wizard__btn--finish.is-active { display: inline-flex; }

/* Intent editor (/app/profiles/{id}/intent, Task 10) — 5 collapsible
   group-секций с auto-save. Переиспользует .wizard__group / .wizard__check
   внутри тела секций; своя обёртка только для <details>-аккордеона и status-bar. */
.intent-editor { display: flex; flex-direction: column; gap: var(--space-4); }
.intent-editor__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    min-height: 44px;
}
.intent-editor__conflict {
    margin: 0;
    color: var(--color-danger);
    font-size: 0.875rem;
}
.intent-editor__note { margin: 0; color: var(--color-text-muted); font-size: 0.875rem; }

.intent-group {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    overflow: hidden;
}
.intent-group__summary {
    display: flex;
    align-items: center;
    /* Не space-between: бейдж происхождения стоит сразу за заголовком, а
       вправо уезжает только стрелка (margin-left: auto). */
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: var(--tap-min);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    user-select: none;
}
.intent-group__summary::-webkit-details-marker { display: none; }
.intent-group__summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}
/* Секция-заголовок → canon form-group eyebrow (как .editor-section__title). */
/* Бейдж наследования у заголовка группы: «как в целях» — тихий, «своё» —
   тёплый акцент. Это справка о происхождении значений, а не предупреждение:
   красного здесь быть не должно. */
.intent-group__badge {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    text-transform: none;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface-elevated);
    color: var(--color-text-muted);
    margin-left: var(--space-2);
    font-variant-numeric: tabular-nums;
}
/* Своё значение — не нарушение: человек сузил поиск сознательно. Тон amber
   зарезервирован за «чего-то не хватает», и здесь он читался бы упрёком;
   accent отличает бейдж от нейтрального «как в целях», ничего не обвиняя. */
.intent-group__badge--own {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    color: var(--color-accent-deep, var(--color-accent));
}
.intent-group__reset { margin: 0 0 var(--space-3); }
.intent-group__summary .intent-group__chevron { margin-left: auto; }

.intent-group__title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}
.intent-group__chevron {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
}
.intent-group[open] > .intent-group__summary .intent-group__chevron { transform: rotate(180deg); }
/* Узкий экран: метка происхождения — строкой под заголовком. В одну строку с
   ним «из ваших целей» сжимала «Сколько хотите получать?» до трёх строк по
   слову (замер 375, 05.11). */
@media (max-width: 479px) {
    .intent-group__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: 4px; }
    .intent-group__summary > .intent-group__title { grid-column: 1; }
    .intent-group__summary > .intent-group__badge { grid-column: 1; grid-row: 2; justify-self: start; margin-left: 0; }
    .intent-group__summary > .intent-group__chevron { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; }
}
.intent-group__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* «Зачем»-строка внутри группы предпочтений — приглушённый контекст «как это
   используется». Прижата к верху body (сразу под summary). */
.intent-group__why {
    margin: var(--space-3) 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    max-width: 62ch;
}

/* Form-таб приведён к canon (адаптирован для full-page: лейблы остаются
   заметными, но хинты и инпуты — как в контент-редакторе резюме). */
.intent-editor .field__hint {
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--color-text-muted) 78%, transparent);
}
.intent-editor .input,
.intent-editor .chips-input__box {
    border-color: var(--color-border-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.intent-editor .input:focus-visible,
.intent-editor .chips-input__box:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.12);
}

/* ─── ui_facts_diff — обновление карьеры по новому файлу ───────────────────
   План сверху (строка на раздел), спорное — списком, всё остальное —
   свёрнутыми разделами, внизу липкий подвал с одной кнопкой. Строки — тот
   же язык, что «Опыт»: карточка с волосяными разделителями, имя записи
   жирным, строка под ним приглушённая. Тон изменения — цветом числа, а не
   рамкой карточки: сто цветных рамок подряд читались тревогой. */
.facts-diff { display: flex; flex-direction: column; gap: var(--space-5); }
.facts-diff__form { display: flex; flex-direction: column; gap: var(--space-5); }

.facts-diff__plan { gap: var(--space-3); }
.facts-diff__plan-title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.facts-diff__plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.facts-diff__plan-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border-soft);
}
.facts-diff__plan-row:first-child { border-top: 0; padding-top: var(--space-1); }
.facts-diff__plan-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
}
.facts-diff__plan-row--keep .facts-diff__plan-icon { color: var(--color-success); }
.facts-diff__plan-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding-top: 5px; }
.facts-diff__plan-head { margin: 0; font-size: 0.9375rem; line-height: 1.4; }
.facts-diff__plan-what { color: var(--color-text-soft); }
.facts-diff__plan-head strong + .facts-diff__plan-what::before { content: " · "; }
.facts-diff__plan-names { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; color: var(--color-text-soft); }
.facts-diff__plan-names li { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.facts-diff__plan-chips { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* Навыки экрана — тот же ui_skill_chip, что на «Навыках» и «Опыте». */
.facts-diff__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.facts-diff__chips--sm { gap: 6px; }
/* Стек роли в изменении: новое — «+» и тон добавления, убираемое — «−»,
   зачёркнуто и приглушено. Без знаков два ряда чипов читались одним. */
.facts-diff__chip-ins .skill-chip { background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg-soft)); }
.facts-diff__chip-ins .skill-chip__face::before,
.facts-diff__chip-del .skill-chip__face::before { font-weight: 600; margin-right: -4px; }
.facts-diff__chip-ins .skill-chip__face::before { content: "+"; color: var(--color-success); }
.facts-diff__chip-del .skill-chip__face::before { content: "−"; color: var(--color-danger); }
.facts-diff__chip-del .skill-chip { color: var(--color-text-muted); }
.facts-diff__chip-del .skill-chip__name { text-decoration: line-through; text-decoration-color: rgba(var(--color-danger-rgb), 0.6); }
.diff-row__tag {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: nowrap;
}
.diff-row__tag--ins { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.diff-row__tag--del { background: rgba(var(--color-danger-rgb), 0.08); color: var(--color-danger); }
.facts-diff__plan-sub { margin: var(--space-1) 0 0; font-size: 0.75rem; color: var(--color-text-muted); }
.facts-diff__plan-rest > summary {
    display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; list-style: none;
    font-size: 0.875rem; color: var(--color-accent);
}
.facts-diff__plan-rest > summary::-webkit-details-marker { display: none; }
.facts-diff__plan-rest[open] > summary { display: none; }
.facts-diff__plan-rest > ul { margin-top: 6px; }
.facts-diff__plan-names .facts-diff__plan-company { color: var(--color-text-muted); }
.facts-diff__plan-note { margin: 0; font-size: 0.875rem; color: var(--color-text-soft); }
.facts-diff__plan-note a { white-space: nowrap; }

/* Строки записей: «Нужно ваше решение» и группы внутри разделов. */
.facts-diff__rows { display: flex; flex-direction: column; }
.ui-card.facts-diff__rows { padding: 0 var(--space-4); gap: 0; }
.diff-row { padding: var(--space-3) 0; border-top: 1px solid var(--color-border-soft); container: diff-row / inline-size; }
.diff-row:first-child { border-top: 0; }
.diff-row__pick { display: flex; gap: var(--space-3); align-items: flex-start; min-height: 44px; cursor: pointer; }
.diff-row__check { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--color-accent); }
.diff-row__main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1; }
.diff-row__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.diff-row__section { font-size: 0.75rem; color: var(--color-text-muted); }
.diff-row__title { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.diff-row__meta { font-size: 0.875rem; color: var(--color-text-soft); }
/* «Сохраним N строк из вашей карьеры» у изменённой записи: применение их
   не тронет (facts_diff v2). Тон успокаивающий, не предупреждение. */
.diff-row__kept { display: flex; align-items: center; gap: 6px; margin: var(--space-2) 0 0; font-size: var(--font-size-xs); color: var(--color-text-soft); }
.diff-row__kept .icon { flex: none; color: var(--color-success); }
.diff-row__note { font-size: 0.8125rem; color: var(--color-text-muted); }
.diff-row--removed .diff-row__title { font-weight: 500; }
.diff-row__more { margin: var(--space-1) 0 0 32px; font-size: 0.875rem; }
.diff-row__more > summary { cursor: pointer; color: var(--color-accent); width: max-content; list-style: none; }
.diff-row__more > summary::-webkit-details-marker { display: none; }
.diff-row__fields { margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.diff-row__field dt { font-size: 0.75rem; color: var(--color-text-muted); }
.diff-row__field dd { margin: 2px 0 0; color: var(--color-text-soft); }
.diff-row__field ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 2px; }

/* Изменённая запись: только отличия, «было → стало». */
.diff-row--changed { display: flex; flex-direction: column; gap: var(--space-3); }
/* Три варианта в одну строку и на телефоне: перенос третьего на вторую
   строку читался как отдельный, менее важный выбор. */
.diff-row--changed .chip-radio { flex-wrap: nowrap; }
@media (max-width: 479px) {
    .diff-row--changed .chip-radio__option { flex: 1 1 0; }
    .diff-row--changed .chip-radio__label { width: 100%; justify-content: center; padding-inline: var(--space-2); white-space: nowrap; }
}
.diff-row__changes { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.diff-row__change dt, .diff-row__field dt { padding-top: 2px; }
.diff-row__change dt { font-size: 0.75rem; color: var(--color-text-muted); }
.diff-row__change dd { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 0.875rem; }
.diff-row__was { color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: rgba(var(--color-danger-rgb), 0.55); }
.diff-row__now { text-decoration: none; font-weight: 500; }
.diff-row__arrow { color: var(--color-text-muted); align-self: center; }
.diff-row__lines { width: 100%; }
.diff-row__lines > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; min-height: 32px; }
.diff-row__lines > summary::-webkit-details-marker { display: none; }
.diff-row__n { font-family: var(--font-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.diff-row__n--ins { color: var(--color-success); }
.diff-row__n--del { color: var(--color-danger); }
.diff-row__lines-toggle { color: var(--color-accent); font-size: 0.875rem; }
.diff-row__lines[open] .diff-row__lines-toggle { display: none; }
.diff-row__lines[open] > summary { margin-bottom: var(--space-1); }
/* Шире телефона подпись поля — колонкой слева: отличие читается одной
   строкой, и запись с пятью отличиями не вытягивается на полэкрана. */
@container diff-row (min-width: 640px) {
    .diff-row__change, .diff-row__field { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
    .diff-row__change dd, .diff-row__field dd { margin-top: 0; }
}
.diff-row__line { display: block; width: 100%; padding-left: 1.1em; text-indent: -1.1em; text-decoration: none; }
.diff-row__line--ins::before { content: "+ "; color: var(--color-success); font-weight: 600; }
.diff-row__line--del { color: var(--color-text-muted); }
.diff-row__line--del::before { content: "− "; color: var(--color-danger); font-weight: 600; }

/* Разделы «Все изменения» — свёрнутые карточки. */
.facts-diff__all { gap: var(--space-2); }
.ui-card.facts-diff__sec { padding: 0; gap: 0; }
.facts-diff__sec-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    list-style: none;
}
.facts-diff__sec-head::-webkit-details-marker { display: none; }
.facts-diff__sec-title { font-size: 0.9375rem; font-weight: 600; flex: 1; min-width: 0; }
.facts-diff__sec-counts { display: inline-flex; gap: 6px; }
.facts-diff__count {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.facts-diff__count--added { color: var(--color-success); }
.facts-diff__count--changed { color: rgb(var(--color-amber-rgb)); }
.facts-diff__count--removed { color: var(--color-danger); }
.facts-diff__chev { color: var(--color-text-muted); transition: transform 0.15s ease; }
.facts-diff__sec[open] .facts-diff__chev { transform: rotate(180deg); }
.facts-diff__sec-body { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--color-border-soft); }
.facts-diff__group { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); }
.facts-diff__group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.facts-diff__group-title { margin: 0; font-size: 0.875rem; font-weight: 600; }
.facts-diff__group-hint { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.facts-diff__all-toggle { min-height: 36px; }
/* Удаление отмечается тоном удаления, а не тем же синим, что «добавить»:
   отмеченная строка зачёркнута, отмеченный чип — красный. */
.diff-row--removed:has(.diff-row__check:checked) .diff-row__title { text-decoration: line-through; text-decoration-color: rgba(var(--color-danger-rgb), 0.6); }
.diff-row--removed .diff-row__check { accent-color: var(--color-danger); }
.facts-diff__group--removed .chip-radio__input:checked + .chip-radio__label {
    background: rgba(var(--color-danger-rgb), 0.08);
    border-color: rgba(var(--color-danger-rgb), 0.45);
    color: var(--color-danger);
    text-decoration: line-through;
}
html:not(.js) .facts-diff__all-toggle { display: none; }

/* Липкий подвал. z-index и тень обязательны: без них список проходил
   сквозь панель, и текст накладывался на кнопки. */
.facts-diff__footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.22);
}
.facts-diff__counter { margin: 0; color: var(--color-text-soft); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.facts-diff__counter [data-diff-counter] { color: var(--color-text); font-weight: 600; }
.facts-diff__footer-actions { display: flex; gap: var(--space-2); }
/* Над нижним меню телефона, как липкие действия подборки: под ним кнопка
   «Применить» уходила за край экрана. На десктопе — над краем окна. */
@media (max-width: 991.98px) {
    .facts-diff__footer { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--space-2)); }
}
@media (min-width: 992px) {
    .facts-diff__footer { bottom: var(--space-3); }
}
@media (max-width: 479px) {
    .facts-diff__footer-actions { width: 100%; }
    .facts-diff__footer-actions > * { flex: 1; justify-content: center; }
}
/* M1.5 re-upload / reset страницы (Task 12). Mobile-first: вертикальный stack,
   действия full-width на узких экранах, в ряд — на ≥480px. Токены — без
   хардкодов цветов/размеров (CLAUDE.md styleguide-first). */
.career-reupload__form,
.career-reset__form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.career-reupload__actions,
.career-reset__actions { display: flex; flex-direction: column; gap: var(--space-2); }

/* Danger zone в подвале overview — визуально отделена рамкой danger-оттенка. */
/* Coral-окантовка — тот же паттерн, что danger-карточка настроек профессии:
   на нейтральной рамке зона с необратимым сбросом читалась как обычная
   карточка, и красной оставалась только кнопка. */
.career-facts__danger-zone {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-coral, var(--color-danger)) 35%, transparent);
    background: color-mix(in srgb, var(--color-coral, var(--color-danger)) 4%, transparent);
    border-radius: var(--radius-lg);
}
/* Состояние базы (career-base rework, идея 5): свежесть + подсказки полноты
   с deep-link'ами + вопросы первичного разбора. Не скоринг: нейтральная
   surface-карточка без баллов и прогресс-баров. */
/* Качество текста резюме на обзоре карьерной базы — дом этого числа: здесь же
   живёт текст, который оно измеряет. Раскладка та же, что у блока состояния
   рядом, чтобы два соседних блока не выглядели из разных продуктов. */
.career-quality {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.career-quality__head { display: flex; flex-direction: column; gap: 4px; }
.career-quality__title { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.career-quality__lead { margin: 0; font-size: 0.875rem; }
.career-quality__body { display: flex; flex-direction: column; gap: var(--space-4); }
.career-quality__ring { align-self: flex-start; }
.career-quality__rows { flex: 1 1 auto; min-width: 0; }
.career-quality__note {
    margin: 0 0 8px;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

@media (min-width: 720px) {
    .career-quality__body { flex-direction: row; align-items: center; gap: var(--space-5); }
}

/* «Что дописать» под шкалами качества: находки замера строками и вход в
   очередь дописок. Ритм — как у блока вопросов карьеры ниже. */
.career-quality__findings {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.career-quality__findings-title { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.career-quality__findings-cta { margin-top: var(--space-2); }

/* ui_finding_row — находка строкой: значок, место и сообщение, действие.
   Мобильный вид первым: действие под сообщением, во второй колонке; с 480px
   оно встаёт справа. */
.finding-rows { list-style: none; margin: 0; padding: 0; }
.finding-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    align-items: start;
    padding-block: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}
.finding-rows > .finding-row:first-child { border-top: 0; padding-top: 0; }
.finding-row__icon {
    display: inline-flex;
    padding-top: 2px;
    color: var(--color-text-soft);
}
.finding-row__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.finding-row__place {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}
.finding-row__message { margin: 0; font-size: 0.9375rem; overflow-wrap: anywhere; }
.finding-row__action {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}
.finding-row__action:hover { text-decoration: underline; }
.finding-row__action:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
@media (min-width: 480px) {
    .finding-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
    .finding-row__action { grid-column: 3; grid-row: 1; justify-self: end; min-height: 44px; }
}

.career-health {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
}
/* Шапка карточки — та же, что у соседей по странице: заголовок и под ним
   подпись. Дата стояла в правом углу, и правый верхний угол трёх карточек
   раздела занимали три разные вещи — дата, ничего и кнопка. */
.career-health__head { display: flex; flex-direction: column; gap: 4px; }
.career-health__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}
.career-health__freshness { margin: 0; font-size: 0.875rem; }
.career-health__hints {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* Подсказка полноты (ui_hint_row) — своя область, а не строка в общем потоке:
   «чего не хватает» и «что спросил разбор файла» это два разных разговора, и
   склеенные в одну колонку они читались одним серым полотном (фидбэк
   пользователей «всё сливается»). Действие держится РЯДОМ с текстом: на
   десктопе flex:1 отбрасывал ссылку к правому краю карточки, за тысячу
   пикселей от фразы, к которой она относится. Тон тихий — человек ничего не
   сломал, ему предлагают дополнить. */
.hint-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
}
/* Сеткой, а не flex-wrap: перенесённая кнопка вставала под значок, на
   краю карточки, и выпадала из колонки текста, к которому относится. На
   телефоне она под текстом в его колонке; шире — третьей колонкой сразу за
   фразой (fit-content держит её у текста, а не у правого края). */
.hint-row > .btn { grid-column: 2; justify-self: start; }
@media (min-width: 600px) {
    .hint-row { grid-template-columns: auto fit-content(68ch) auto; justify-content: start; }
    .hint-row > .btn { grid-column: auto; }
}
/* Amber — «чего-то не хватает». Там, где человек ничего не нарушал (свои
   условия поиска, отличные от целей), тот же тон читался бы упрёком, поэтому
   тон выбирает автор строки, а не компонент. */
.hint-row--attention {
    border-color: color-mix(in srgb, var(--color-amber, var(--color-warning)) 26%, var(--color-border));
    background: color-mix(in srgb, var(--color-amber, var(--color-warning)) 6%, transparent);
}
.hint-row__icon { flex: none; color: var(--color-text-muted); align-self: center; }
.hint-row--attention .hint-row__icon { color: var(--color-amber, var(--color-warning)); }
.hint-row__text { flex: 1 1 16ch; min-width: 0; font-size: 0.9375rem; line-height: 1.5; max-width: 68ch; }
.hint-row__link {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-accent);
}
.hint-row__link:hover { text-decoration: underline; }
.hint-row__items a { margin-right: 0; }
.career-health__hints {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.career-health__questions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.career-health__questions-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.career-health__questions-title { margin: 0; font-size: 0.9375rem; font-weight: 600; }
/* Счётчик: сколько вопросов ждёт. Список без числа выглядит бесконечным —
   человек не знает, три их или тридцать, и не начинает вовсе. */
.career-health__questions-counter {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.career-health__questions-lead { margin: 0; max-width: 68ch; }
.career-health__questions-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* Вопрос — объект, а не абзац.
   Раньше он жил на общем белом фоне, отделённый от соседа волосяной линией, и
   при одинаковом кегле у текста вопроса (0.92rem) и пояснения ниже вся секция
   читалась одним полотном: где кончается один вопрос и начинается следующий,
   глаз не находил (Gestalt — общая область; фидбэк пользователей «всё
   сливается»). Общая область + собственный кегль вопроса решают это без
   единой новой линии. */
.career-health__question {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}
.career-health__questions-list > li:first-child .career-health__question {
    padding-top: 0;
    border-top: 0;
}
/* Мера строки. На 1440 вопрос тянулся на всю карточку — около 130 знаков,
   вдвое больше читаемого. */
.career-health__question-text {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.005em;
    max-width: 68ch;
}

/* CJM «Дописать»: inline-форма ответа прямо в блоке (details, no-JS). Тот же
   визуальный язык, что у edit-панелей раздела: accent-полоса + мягкий фон.
   Действия вопроса — ОДНА строка «Дописать · Пропустить» (ui-review iter 1:
   столбик из двух тихих строк на вопрос читался рыхло, а «Пропустить»
   визуально прилипал к следующему вопросу); при открытой форме «Пропустить»
   прячется — его роль выполняет «Отмена». Начертание — строчное, как у
   hint-link'ов блока: mono-caps здесь спорил бы со строчным «Дописать»
   deep-link-вопросов на том же экране. */


/* Quick-add + удаление записей (career-base rework, идея 1).
   .career-entry-add — details «+ Добавить …» после списка секции: закрыт —
   одна строка-CTA, открыт — та же edit-панель, что у правки записей.
   .career-entry-actions — ряд Save + Delete внутри edit-формы; Delete —
   ghost с coral-текстом (не danger-filled: рядом с частым Save нельзя
   ставить кричащую кнопку — Fitts/severity). */
.career-entry-add {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}
.career-entry-add[open] {
    border-style: solid;
    background: var(--color-surface);
}
.career-entry-add > .career-entry-add__summary { margin-top: 0; }
.career-entry-add[open] > .career-entry-add__summary { order: 99; align-self: flex-start; }
.career-entry-add[open] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.career-entry-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.career-entry-actions .career-entry-delete,
.achievement-edit__actions .career-entry-delete { margin-left: auto; }
.btn.career-entry-delete { color: var(--color-coral, var(--color-danger)); }
.btn.career-entry-delete:hover {
    background: color-mix(in srgb, var(--color-coral, var(--color-danger)) 8%, transparent);
}

.career-facts__danger-title { margin: 0; font-size: 1.0625rem; }
.career-facts__danger-copy { display: flex; flex-direction: column; gap: var(--space-1); }

/* Исходный файл + self-serve «Перечитать файл» (career-base rework, идея 4).
   Нейтральная surface-карточка над danger-zone: то же строение (copy слева,
   действия справа на ≥640px), но без сигнальной рамки — это обычное действие. */
/* Страница «Опыт» (10.10): «О себе», места работы, образование и
   достижения одной страницей. Секция — заголовок с числом и тихой строкой
   «зачем» в один ряд, как ряды карты («Рядом — в один переход · …»), и
   заголовком того же веса, что блоки «Обзора». Якорь секции не прячется под
   мобильной рамкой: scroll-margin. */
.cf-sec {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
    scroll-margin-top: 4rem;
}
.cf-sec__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
}
.cf-sec__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text);
}
.cf-sec__count {
    margin-left: 0.2em;
    font-weight: 400;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.cf-sec__hint { margin: 0; max-width: 62ch; color: var(--color-text-muted); font-size: 0.8125rem; }
.cf-sec__subtitle {
    margin: var(--space-3) 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}
.cf-sec__group { display: flex; flex-direction: column; gap: var(--space-3); }
.cf-sec__empty { margin: 0; max-width: 62ch; color: var(--color-text-soft); }
.cf-lifeline { padding: var(--space-4); }
/* «Свежесть навыков» на «Навыках»: строка — плитка того же облика, что «Ещё
   N мест работы» на «Опыте», раскрытие — карточка прибора под ней (не
   карточка в карточке). Итог в строке гаснет при раскрытии: прибор говорит
   его сам первой строкой. */
.cf-fresh { margin-top: 0; }
/* Позиционирование — главный текст «О себе», а не подпись: тоном основного
   текста, мерой читаемой строки. */
.career-overview__summary { margin: 0; color: var(--color-text-soft); max-width: 72ch; }
.cf-fresh > summary {
    display: flex;
    width: 100%;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
}
.cf-fresh > summary:hover { box-shadow: var(--shadow-md); }
.cf-fresh__text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); flex: 1; min-width: 0; }
.cf-fresh__sum { font-weight: 400; color: var(--color-text-muted); }
.cf-fresh[open] .cf-fresh__sum { display: none; }
.cf-fresh > summary .career-now__fresh-chev { flex: none; }
.cf-fresh[open] > summary { margin-bottom: var(--space-3); }
/* Отдельной плитой на странице прибор одевается, как соседние плиты: белая,
   без рамки, мягкая тень (на карте он вложен в карточку и рамку держит). */
.cf-fresh .skillfresh { margin-top: 0; border-color: transparent; box-shadow: var(--shadow-sm); }
.cf-stale { list-style: none; margin: 0; padding: 0; }
/* На «Целях» форма уже канваса: строка над ней держит ту же правую кромку. */
.page-shell:has(> .goals-sheet) > .cf-stale { max-width: 880px; }
/* Источник файла — последний блок страницы, со своим отступом от секций. */
.cf-page .career-facts__source { margin-top: var(--space-4); }

.career-facts__source {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-8);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
}
.career-facts__source-title { margin: 0; font-size: 1.0625rem; }
.career-facts__source-file > .icon { vertical-align: -2px; margin-right: var(--space-1); }
.career-facts__source-copy { display: flex; flex-direction: column; gap: var(--space-1); }
/* Строкой текста, а не flex-рядом: длинное имя файла на телефоне сжимало
   соседний «· загружен …» в отдельную колонку. Значок встаёт в строку. */
.career-facts__source-file {
    display: block;
    margin: 0;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}
.career-facts__source-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
@media (min-width: 480px) {
    .career-facts__source-actions { flex-direction: row; align-items: center; }
}
.career-facts__source-main { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 640px) {
    .career-facts__source-main {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .career-facts__source-actions { flex-shrink: 0; }
}
/* Пропущенные вопросы разбора — нижняя строка карточки файла. */
.career-facts__skipped { border-top: 1px solid var(--color-border-soft); padding-top: var(--space-1); }
.career-facts__skipped-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--tap-min, 44px);
    cursor: pointer;
    list-style: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-soft);
}
.career-facts__skipped-summary::-webkit-details-marker { display: none; }
.career-facts__skipped-summary:hover { color: var(--color-text); }
.career-facts__skipped-summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.career-facts__skipped-chev { transition: transform var(--dur-fast) var(--ease-out); }
.career-facts__skipped[open] .career-facts__skipped-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .career-facts__skipped-chev { transition: none; } }
.career-facts__skipped-list { list-style: none; margin: 0; padding: 0; }
/* Вопрос — текстом основного голоса (серым он читался отключённым), действие
   «Вернуть» — под ним на телефоне и справа шире. */
.career-facts__skipped-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
    padding-block: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}
.career-facts__skipped-item:first-child { border-top: 0; padding-top: var(--space-1); }
.career-facts__skipped-item > form { justify-self: start; margin-inline-start: calc(-1 * var(--space-3)); }
.career-facts__skipped-text { margin: 0; max-width: 72ch; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); }
@media (min-width: 640px) {
    .career-facts__skipped-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-4); }
    .career-facts__skipped-item > form { justify-self: end; margin-inline-start: 0; }
}

@media (min-width: 480px) {
    .career-reupload__actions,
    .career-reset__actions { flex-direction: row; align-items: center; }
}
@media (min-width: 640px) {
    .career-facts__danger-zone {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ============================================================================
   Career introduction — full-width «Это вы» hero после первого парсинга (§5.13,
   Task 13). Крупная display-типографика + confidence-tier + suggested-профили.
   Mobile-first: один столбец, карточки направлений в стек.
   ============================================================================ */
.career-intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.career-intro__head { display: flex; flex-direction: column; gap: var(--space-2); }
.career-intro__eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.career-intro__name {
    margin: 0;
    font-family: var(--font-display, var(--font-serif));
    font-size: clamp(1.9rem, 6vw, 3rem);
    line-height: 1.05;
    color: var(--color-text);
}
.career-intro__intro { margin: 0; color: var(--color-text-muted); max-width: 48ch; }
.career-intro__tier {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    margin: 0;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
}
.career-intro__tier-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-text-muted);
}
.career-intro__tier--strong { border-color: rgba(var(--color-sage-rgb), 0.5); color: var(--color-sage-deep); }
.career-intro__tier--strong .career-intro__tier-dot { background: var(--color-sage); }
.career-intro__tier--solid { border-color: rgba(var(--color-accent-rgb), 0.5); color: var(--color-accent); }
.career-intro__tier--solid .career-intro__tier-dot { background: var(--color-accent); }
.career-intro__tier--needs_work { border-color: rgba(var(--color-amber-rgb), 0.5); color: var(--color-amber); }
.career-intro__tier--needs_work .career-intro__tier-dot { background: var(--color-amber); }
.career-intro__tier--draft { color: var(--color-text-muted); }

/* Welcome-hero (ui_career_intro): сводка базы + мягкий CTA. Тёплый accent-фон
   слева для «первое впечатление». */
.career-intro--welcome {
    gap: var(--space-4);
    border-color: rgba(var(--color-accent-rgb), 0.35);
    background: linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.05), var(--color-surface) 60%);
}
.career-intro__stats {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    color: var(--color-text-soft);
    font-size: 0.875rem;
    font-weight: 500;
}
.career-intro__stats-icon { color: var(--color-accent); flex-shrink: 0; }
.career-intro__actions { align-self: flex-start; }

/* «Что уже собрано» — строки-двери: профессия под блоком, а карта и
   подборка догружаются после приземления, и приветствие обязано их назвать.
   Одна колонка на телефоне, три в ряд с 900px. */
.career-intro__ready {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}
@media (min-width: 900px) {
    .career-intro__ready { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}
.career-intro__ready-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap-min);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.career-intro__ready-item:hover { border-color: rgba(var(--color-accent-rgb), 0.5); }
.career-intro__ready-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.career-intro__ready-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.career-intro__ready-title { font-weight: 600; }
.career-intro__ready-state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.career-intro__ready-state .icon { color: var(--color-sage); flex-shrink: 0; }
.career-intro__ready-item.is-busy .career-intro__ready-state .icon { color: var(--color-teal); }
.career-intro__ready-go { color: var(--color-text-muted); flex-shrink: 0; }

.career-intro__suggested { display: flex; flex-direction: column; gap: var(--space-3); }
.career-intro__suggested-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.career-intro__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.career-intro-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "eyebrow cue" "title cue" "summary cue" "metric cue";
    align-items: center;
    gap: 0 var(--space-3);
    min-height: var(--tap-min);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.career-intro-card:hover,
.career-intro-card:focus-visible {
    border-color: rgba(var(--color-accent-rgb), 0.6);
    transform: translateY(-1px);
    box-shadow: var(--glow-soft);
}
.career-intro-card__eyebrow {
    grid-area: eyebrow;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.career-intro-card__title { grid-area: title; font-weight: 600; font-size: 1.0625rem; }
.career-intro-card__summary { grid-area: summary; color: var(--color-text-muted); font-size: 0.875rem; }
.career-intro-card__metric { grid-area: metric; color: var(--color-accent); font-size: 0.875rem; font-weight: 600; }
.career-intro-card__cue { grid-area: cue; color: var(--color-text-muted); }

@media (min-width: 720px) {
    .career-intro { padding: var(--space-6); }
    .career-intro__cards { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   Onboarding tour — cookie-driven tooltip-overlay (§5.13, Task 13). Backdrop +
   позиционируемый popover, target-подсветка. Управляется onboarding-tour.js.
   ============================================================================ */
.onboarding-tour { position: fixed; inset: 0; z-index: 1200; }
.onboarding-tour[hidden] { display: none; }
/* Подложка только ловит клики; затемняет тень «окна» над целью шага. */
.onboarding-tour__backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}
.onboarding-tour__spot {
    position: fixed;
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.6), 0 0 0 200vmax rgba(0, 0, 0, 0.45);
    pointer-events: none;
    transition: top var(--dur-base) var(--ease-out), left var(--dur-base) var(--ease-out),
                width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .onboarding-tour__spot { transition: none; } }
.onboarding-tour__popover {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(20rem, calc(100vw - 2 * var(--space-4)));
    padding: var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.onboarding-tour__counter {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.onboarding-tour__title { margin: 0; font-size: 1.0625rem; color: var(--color-text); }
.onboarding-tour__body { margin: 0; color: var(--color-text-muted); font-size: 0.9375rem; }
.onboarding-tour__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-1);
}
.onboarding-tour__dismiss { align-self: center; margin-top: var(--space-1); }
/* Цель шага — только маркер для скрипта; подсветку рисует .onboarding-tour__spot. */
.onboarding-tour-target { scroll-margin: var(--space-6); }

@media (prefers-reduced-motion: reduce) {
    .career-intro-card { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   ui_progress_indicator — compact cross-tab processing-indicator.
   Phase B processing-UI consistency. Decision matrix D2 (см. partial header):
   используется на побочных страницах ресурса вместо ui_living_progress.
   Spinner — переиспользует .is-spinning + @keyframes spin из alerts (line ~7735).
   Только existing tokens — никаких новых variables.
   ────────────────────────────────────────────────────────────────────────── */
.progress-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    /* Whisper accent-тинта на surface — тихо сигналит «идёт активная
       операция», без крикливой заливки. */
    background:
        linear-gradient(0deg, rgba(var(--color-accent-rgb), 0.025), rgba(var(--color-accent-rgb), 0.025)),
        var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}
.progress-indicator:hover,
.progress-indicator:focus-visible {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    outline: none;
}
.progress-indicator:active { transform: translateY(0); }
/* Спиннер в мягком accent-тинт-круге — даёт присутствие вместо голой иконки. */
.progress-indicator__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb), 0.10);
    color: var(--color-accent);
    flex-shrink: 0;
}
.progress-indicator__icon.is-spinning svg { animation: spin 1.4s var(--ease-in-out) infinite; }
.progress-indicator__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.progress-indicator__eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
/* Заголовок на телефоне переносится, а не режется многоточием: строка в
   ~200px съедала главное («Разбираем шаг — стран…»). Обрезка — от планшета,
   где строке хватает места. */
.progress-indicator__title {
    font-size: 0.9375rem;
    color: var(--color-text);
}
@media (min-width: 640px) {
    .progress-indicator__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.progress-indicator__eta {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-accent-soft);
    padding: 2px var(--space-2);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
/* SSR рендерит бейдж всегда (hidden при eta=0), progress-poller.js снимает
   hidden когда ETA приходит async'ом. Явный guard — на случай будущего
   display-override, который перебил бы UA [hidden]. */
.progress-indicator__eta[hidden] { display: none; }
.progress-indicator__chevron {
    display: inline-flex;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
/* chip — для density в карточках (profiles/list): только icon + eyebrow + ETA. */
.progress-indicator--chip {
    padding: var(--space-1) var(--space-2);
    min-height: 32px;
    gap: var(--space-2);
}
.progress-indicator--chip .progress-indicator__chevron { display: none; }
/* pill — пилюля ленты «Ждёт вас» на «Обзоре»: та же геометрия, что у
   att-chip (высота, радиус, кегль), тихая подложка идущей работы и остаток
   приглушённой цифрой в строке, а не рамочным бейджем. */
.progress-indicator--pill {
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px 4px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}
.progress-indicator--pill:hover,
.progress-indicator--pill:focus-visible { transform: none; }
.progress-indicator--pill .progress-indicator__icon { width: 20px; height: 20px; background: none; }
.progress-indicator--pill .progress-indicator__icon .icon { width: 14px; height: 14px; }
.progress-indicator--pill .progress-indicator__copy { flex: none; }
.progress-indicator--pill .progress-indicator__title { font-size: inherit; color: var(--color-text-soft); }
.progress-indicator--pill .progress-indicator__eta {
    padding: 0;
    border: 0;
    font-size: inherit;
    font-weight: 400;
    color: var(--color-text-muted);
}
.progress-indicator--pill .progress-indicator__chevron { display: none; }
@media (pointer: coarse) { .progress-indicator--pill { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
    .progress-indicator__icon.is-spinning svg { animation: none; }
    .progress-indicator { transition: none; }
}

/* ============================================================================
   PDF-first онбординг (concept §5.13) — chrome-less wizard.
   Mobile-first: базовые стили ≤375px, @media расширяет под desktop.
   ============================================================================ */
.body--onboarding {
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100dvh;
}
.onboarding-shell {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
/* Широкая оболочка — для фокус-экранов, которые держат СПИСОК, а не один
   вопрос: под 640px объяснение строки ломается по слову, а колонке с ценой не
   остаётся места вовсе. */
.onboarding-shell--wide { max-width: 820px; }
/* Прогресс-бар прижат к топбару и контенту — без лишнего воздуха вокруг. */
.onboarding-progress__bar { margin-top: calc(-1 * var(--space-2)); }
/* Нижняя «Назад» — без акцента: приглушённый ghost, не спорит с primary. */
.onboarding-step__back { color: var(--color-text-muted); }
.onboarding-step__back:hover { color: var(--color-text); }
.onboarding-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: env(safe-area-inset-top);
}
.onboarding-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-semibold);
}
.onboarding-topbar__brand-name { font-family: var(--font-display); font-weight: var(--brand-wordmark-weight); letter-spacing: var(--brand-wordmark-tracking); }
.onboarding-topbar__signout { margin: 0; }
.onboarding-topbar__signout-btn {
    background: none;
    border: 0;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: var(--space-2);
    min-height: 44px;
}
.onboarding-topbar__signout-btn:hover { color: var(--color-text); }

/* Прогресс-бар (Simplify-стиль): только заполненная полоса, навигация снизу. */
.onboarding-progress__bar {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}
.onboarding-progress__fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-soft));
    transition: width 360ms cubic-bezier(.2,.7,.2,1);
}

/* Контент шага */
.onboarding-main { width: 100%; }
.onboarding-step { display: flex; flex-direction: column; gap: var(--space-4); }
.onboarding-step__title {
    font-family: var(--font-sans);
    font-size: 1.6rem;
    line-height: 1.15;
    margin: 0;
    /* Заголовки шагов формулируются фразой и на широкой колонке роняли в
       последнюю строку одно слово. Балансировка распределяет строки поровну и
       убирает сироту, ничего не стоя на узком экране. */
    text-wrap: balance;
}
/* Заголовок-ВОПРОС: он и есть просьба шага, поэтому стоит первым и остаётся
   h1 — но набирается размером вопроса, а не названия экрана. Вопрос парсера
   бывает на двадцать слов, и display-кеглем он занимал семь строк жирного,
   отодвигая поле ответа за нижний край. */
/* Двойной класс: общее правило заголовка шага стоит в файле ниже (медиазапрос
   1.75rem) и при равной специфичности перебивало размер вопроса — вопрос
   из двадцати слов шёл кеглем названия экрана в четыре жирные строки. */
.onboarding-step__title.onboarding-step__title--question {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: -0.01em;
}
@media (min-width: 600px) {
    .onboarding-step__title.onboarding-step__title--question { font-size: 1.375rem; }
}
.onboarding-step__lead { color: var(--color-text-soft); margin: 0; }
.onboarding-step__form { display: flex; flex-direction: column; gap: var(--space-5); }
.onboarding-field { display: flex; flex-direction: column; gap: var(--space-2); }
/* Строка состояния разбора резюме под прогресс-баром мастера. */
.onboarding-parsing {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.onboarding-parsing--ready { color: var(--color-sage); }
.onboarding-parsing__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: onboarding-parsing-pulse 1.4s ease-in-out infinite;
}
@keyframes onboarding-parsing-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .onboarding-parsing__dot { animation: none; opacity: 1; }
}

.onboarding-step__note {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-soft);
}
/* Поле свободного текста последнего шага онбординга: растёт вместе с текстом
   (человек пишет от одной строки до абзаца, а скролл внутри коробки прячет от
   него собственный ответ). field-sizing поддержан не везде — без него остаётся
   rows="6". 1.0625rem — против зума iOS на фокусе. */
.onboarding-step__context-input.input.textarea {
    field-sizing: content;
    font-size: 1.0625rem;
    min-height: 9rem;
    max-height: 60vh;
}

/* ui_section_why — видимая строка «зачем это» под шапкой раздела. Иконка info
   слева, приглушённый текст. Отступ снизу отделяет от контента раздела. */
.section-why {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: calc(-1 * var(--space-2)) 0 var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    max-width: 72ch;
}
.section-why__icon { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }

/* ============================================================================
   Guided-Обзор — premium visual layer (карта пути / следующий шаг / профессии)
   Editorial-luxury: глубина, accent-свечение, staggered motion-reveal, круговые
   score-ring вместо плоских баров. Работает в обеих темах (dark/light).
   ============================================================================ */

/* Staggered reveal на входе — один хорошо оркестрованный load важнее россыпи
   микроанимаций (skill). Задержка через inline --reveal-delay или nth-child. */
@keyframes dashReveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.dash-reveal {
    animation: dashReveal 620ms var(--ease-out) backwards;
    animation-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
    .dash-reveal { animation: none; }
}

/* ---- Карта пути (ui_journey) — premium stepper ---------------------------- */
.journey { margin: 0 0 var(--space-6); }
.journey__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0 var(--space-1);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.journey__list::-webkit-scrollbar { display: none; }
.journey__step {
    flex: 1 0 auto;
    min-width: 7rem;
    position: relative;
    scroll-snap-align: start;
    animation: dashReveal 560ms var(--ease-out) backwards;
}
.journey__step:nth-child(1) { animation-delay: 60ms; }
.journey__step:nth-child(2) { animation-delay: 110ms; }
.journey__step:nth-child(3) { animation-delay: 160ms; }
.journey__step:nth-child(4) { animation-delay: 210ms; }
.journey__step:nth-child(5) { animation-delay: 260ms; }
@media (prefers-reduced-motion: reduce) { .journey__step { animation: none; } }
/* коннектор — градиентная линия, красится до пройденных этапов */
.journey__step::before {
    content: "";
    position: absolute;
    top: 24px;
    left: calc(-50% + 24px);
    width: calc(100% - 48px);
    height: 2px;
    background: var(--color-border);
    border-radius: 2px;
}
.journey__step:first-child::before { display: none; }
.journey__step--done::before,
.journey__step--current::before {
    background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.35), var(--color-accent));
}
.journey__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    padding: 0 var(--space-2);
}
.journey__dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-surface-elevated);
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-sm);
    transition: transform 240ms var(--ease-spring), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.journey__link:hover .journey__dot { transform: translateY(-2px); }
.journey__step--done .journey__dot {
    background: linear-gradient(145deg, var(--color-accent-soft), var(--color-accent));
    border-color: var(--color-accent);
    color: var(--color-accent-text);
    box-shadow: 0 4px 14px rgba(var(--color-accent-rgb), 0.35), var(--shadow-sm);
}
.journey__step--current .journey__dot {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-surface);
    box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.16), 0 6px 18px rgba(var(--color-accent-rgb), 0.28);
}
/* мягкий пульс вокруг текущего этапа — «вы здесь» */
.journey__step--current .journey__dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(var(--color-accent-rgb), 0.4);
    animation: journeyPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes journeyPulse {
    0%   { transform: scale(0.9); opacity: 0.7; }
    70%  { transform: scale(1.25); opacity: 0; }
    100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .journey__step--current .journey__dot::after { animation: none; } }
.journey__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.journey__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.journey__badge {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent);
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb), 0.12);
    font-variant-numeric: tabular-nums;
}
.journey__state {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.journey__step--current .journey__state { color: var(--color-accent); }
.journey__step--done .journey__state { color: var(--color-text-soft); }
.journey__step--locked { opacity: 0.48; }
.journey__step--locked .journey__link { pointer-events: none; }
.journey__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-md);
}

/* ---- «Следующий шаг» (NBA) — premium hero-card --------------------------- */
.dash-nba {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: clamp(var(--space-4), 3vw, var(--space-6));
    margin: 0 0 var(--space-6);
    border: 1px solid rgba(var(--color-accent-rgb), 0.28);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(var(--color-accent-rgb), 0.16), transparent 55%),
        linear-gradient(180deg, var(--color-surface-elevated), var(--color-surface));
    box-shadow: var(--shadow-md);
}
.dash-nba__aura {
    position: absolute;
    top: -40%;
    right: -10%;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.22), transparent 65%);
    filter: blur(12px);
    pointer-events: none;
}
.dash-nba__lead {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    position: relative;
    z-index: 1;
    min-width: 0;
}
.dash-nba__text { min-width: 0; }
.dash-nba__eyebrow {
    margin: 0 0 var(--space-1);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent-soft);
    font-variant-numeric: tabular-nums;
}
.dash-nba__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.2vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-text);
}
.dash-nba__copy {
    margin: 0;
    color: var(--color-text-soft);
    max-width: 46ch;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.dash-nba__cta {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, var(--color-accent), var(--color-accent-deep));
    color: var(--color-accent-text);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(var(--color-accent-rgb), 0.4);
    transition: transform 220ms var(--ease-spring), box-shadow 220ms var(--ease-out);
}
.dash-nba__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(var(--color-accent-rgb), 0.5);
}
.dash-nba__cta .icon { transition: transform 220ms var(--ease-spring); }
.dash-nba__cta:hover .icon { transform: translateX(3px); }
.dash-nba__cta:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }

/* ---- Ряд профессий — premium карточки со score-ring --------------------- */
.dash-professions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-3);
}
.dash-prof {
    position: relative;
    /* Клипим декоративный ::before (дуги выходят за правый край на -2.5rem) по
       скруглению карточки — bleed-эффект off-edge + исключает горизонтальный
       скролл на мобиле, где карточка full-width. Ring-glow слева при этом почти
       не режется (кольцо centered, glow ≈ padding). */
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    /* Слой 1 — accent-«блик», спрятанный за правым краем; на hover прочёсывает
       карточку слева-направо (premium sheen). Фон клипится border-box'ом сам,
       поэтому overflow:hidden не нужен и glow кольца не режется по краю. */
    background:
        linear-gradient(112deg, transparent 40%, rgba(var(--color-accent-rgb), 0.11) 50%, transparent 60%) no-repeat,
        var(--color-surface-elevated);
    background-size: 260% 100%, 100% 100%;
    background-position: 165% 0, 0 0;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition:
        transform 340ms var(--ease-spring),
        box-shadow 340ms var(--ease-out),
        border-color 340ms var(--ease-out),
        background-position 820ms var(--ease-out);
}
.dash-prof:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    box-shadow: var(--shadow-lg);
    background-position: -70% 0, 0 0;
}
.dash-prof:active { transform: translateY(-1px); }

/* Декоративная графика справа — концентрические «дуги готовности» (эхо кольца)
   + мягкий орб, замаскированные в радиальный fade. Заполняют пустую правую зону
   графической идентичностью (как вертикаль резюме-карточки заполнена
   мини-документом), на hover расходятся волной. */
.dash-prof::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -2.5rem;
    width: 12rem;
    height: 12rem;
    transform: translateY(-50%);
    background:
        repeating-radial-gradient(circle at center,
            rgba(var(--color-accent-rgb), 0.14) 0 1.5px,
            transparent 1.5px 15px),
        radial-gradient(circle at center, rgba(var(--color-accent-rgb), 0.07), transparent 62%);
    -webkit-mask-image: radial-gradient(circle at center, #000 4%, transparent 78%);
            mask-image: radial-gradient(circle at center, #000 4%, transparent 78%);
    opacity: 0.82;
    pointer-events: none;
    z-index: 0;
    transition: transform 640ms var(--ease-spring), opacity 420ms var(--ease-out);
}
.dash-prof:hover::before { transform: translateY(-50%) scale(1.14); opacity: 1; }

/* Primary («Основная») — фирменная accent-идентичность: тёплый радиальный
   wash из левого-верхнего угла (тот же tint-язык, что у целевых резюме),
   поверх — тот же sheen-слой. */
.dash-prof--primary {
    border-color: rgba(var(--color-accent-rgb), 0.40);
    background:
        linear-gradient(112deg, transparent 40%, rgba(var(--color-accent-rgb), 0.13) 50%, transparent 60%) no-repeat,
        radial-gradient(135% 135% at 0% 0%, rgba(var(--color-accent-rgb), 0.10), transparent 56%) no-repeat,
        var(--color-surface-elevated);
    background-size: 260% 100%, 100% 100%, 100% 100%;
    background-position: 165% 0, 0 0, 0 0;
}
.dash-prof--primary:hover { background-position: -70% 0, 0 0, 0 0; }

.dash-prof__ring {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    transition: transform 440ms var(--ease-spring);
}
.dash-prof__ring .score-ring--sm { --diameter: 4rem; }
/* Tier-цветное свечение под кольцом — расцветает на hover. Наследует
   --ring-accent-rgb от самого кольца, поэтому цвет совпадает с прогресс-дугой
   (зелёный на 92%, а не чужой accent). */
.dash-prof__ring .score-ring { isolation: isolate; }
.dash-prof__ring .score-ring::after {
    content: "";
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--ring-accent-rgb, var(--color-accent-rgb)), 0.22), transparent 70%);
    opacity: 0;
    transform: scale(0.72);
    transition: opacity 380ms var(--ease-out), transform 460ms var(--ease-spring);
    z-index: -1;
    pointer-events: none;
}
.dash-prof:hover .dash-prof__ring { transform: scale(1.05); }
.dash-prof:hover .dash-prof__ring .score-ring::after { opacity: 1; transform: scale(1); }

.dash-prof__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.dash-prof__name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.dash-prof__primary {
    align-self: flex-start;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb), 0.12);
    font-variant-numeric: tabular-nums;
}
.dash-prof__cue {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.dash-prof__cue .icon { transition: transform 240ms var(--ease-spring); }
.dash-prof:hover .dash-prof__cue { opacity: 1; transform: none; color: var(--color-accent); }
.dash-prof:hover .dash-prof__cue .icon { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .dash-prof,
    .dash-prof::before,
    .dash-prof__ring,
    .dash-prof__ring .score-ring::after,
    .dash-prof__cue,
    .dash-prof__cue .icon { transition: none; }
    .dash-prof:hover,
    .dash-prof:active { transform: none; }
    .dash-prof:hover .dash-prof__ring { transform: none; }
    .dash-prof:hover::before { transform: translateY(-50%); }
}

/* Метафора-пояснитель на upload-шаге: иконка-слой + текст цепочки в одну строку. */
.onboarding-step__note--metaphor {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    text-align: left;
}
.onboarding-step__note-icon { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }
.onboarding-step__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2);
    margin-top: var(--space-2);
    position: sticky;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: linear-gradient(to top, var(--color-bg) 70%, transparent);
}

/* Шаг с формой: главная кнопка первой в разметке — Enter в поле отправляет
   её, а не «Пропустить» (браузер берёт первую submit-кнопку формы). Видимый
   порядок тот же, что у остальных мастеров: на телефоне главная сверху, на
   экране шире — «Назад» слева, «Пропустить»/«Позже» и главная справа. */
.onboarding-step__actions--primary-first { flex-direction: column; }

/* Ожидание финала — вертикально центрируем, чтобы не было «пустого низа». */
.onboarding-step--finish { flex: 1; justify-content: center; min-height: 60dvh; }
.onboarding-wait {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-2);
}
.onboarding-wait .onboarding-step__title { max-width: 18ch; }
.onboarding-wait .onboarding-step__lead { max-width: 40ch; }
.onboarding-wait__hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
/* Тонкий «дышащий» маркер перед хинтом — связывает копию с живой обработкой. */
.onboarding-wait__hint::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.45);
    animation: onboarding-beacon 1.8s ease-out infinite;
}
.onboarding-wait--error { color: var(--color-text); }
/* Вторая операция финала (сборка карты) — компактный row под hero-счётчиком.
   Ширину ограничиваем: центрированная колонка ожидания иначе растягивает его
   на всю страницу и он спорит с главной операцией. */
.onboarding-wait__indicator {
    width: 100%;
    max-width: 28rem;
    text-align: left;
}

/* ── Scan-document indicator: визуализирует «разбираем резюме» — лист с
   skeleton-строками и сканирующим лучом. On-brand, честный indeterminate. ── */
.ob-scan {
    --ob-scan-w: 168px;
    width: var(--ob-scan-w);
    padding: var(--space-2);
    display: grid;
    place-items: center;
    perspective: 700px;
}
.ob-scan__doc {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 6.4;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transform: rotateX(8deg);
    animation: ob-scan-float 4.5s ease-in-out infinite;
}
/* Загнутый уголок листа — деталь «документ». */
.ob-scan__doc::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 26px;
    background: linear-gradient(225deg, var(--color-surface-overlay) 0 50%, transparent 50%);
    border-bottom-left-radius: var(--radius-sm);
}
.ob-scan__line {
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--color-surface-overlay) 0%,
        rgba(var(--color-accent-rgb), 0.28) 45%,
        var(--color-surface-overlay) 90%);
    background-size: 220% 100%;
    animation: ob-scan-shimmer 1.9s linear infinite;
}
.ob-scan__line--title { height: 10px; width: 62%; background-image: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.55), rgba(var(--color-accent-rgb), 0.28)); }
.ob-scan__line--lg { width: 100%; }
.ob-scan__line--md { width: 80%; }
.ob-scan__line--sm { width: 55%; }
.ob-scan__line--title { animation-delay: 0s; }
.ob-scan__line--lg:nth-of-type(2) { animation-delay: .15s; }
.ob-scan__line--md { animation-delay: .3s; }
.ob-scan__line--lg:nth-of-type(4) { animation-delay: .45s; }
.ob-scan__line--sm { animation-delay: .6s; }
/* Сканирующий луч — прозрачно-акцентная полоса, едет сверху вниз. */
.ob-scan__beam {
    position: absolute;
    left: 0;
    right: 0;
    top: -40%;
    height: 38%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.16) 60%,
        rgba(var(--color-accent-rgb), 0.42) 100%);
    border-bottom: 1.5px solid rgba(var(--color-accent-rgb), 0.6);
    box-shadow: 0 0 12px 2px rgba(var(--color-accent-rgb), 0.22);
    animation: ob-scan-beam 2.9s var(--ease-in-out) infinite;
}
@keyframes ob-scan-beam {
    0% { top: -40%; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
@keyframes ob-scan-shimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}
@keyframes ob-scan-float {
    0%, 100% { transform: rotateX(7deg) translateY(0) scale(1); }
    50%      { transform: rotateX(7deg) translateY(-6px) scale(1.012); }
}
@keyframes onboarding-beacon {
    0% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.45); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(var(--color-accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
    .ob-scan__doc, .ob-scan__line, .ob-scan__beam, .onboarding-wait__hint::before { animation: none; }
    .ob-scan__beam { opacity: 0.5; top: 50%; }
}
/* Размерный вариант для крупных processing-холстов (resume render). */
.ob-scan--lg { --ob-scan-w: 220px; }

/* ── Resume render processing canvas: scan-doc skeleton + honest caption.
   Заменяет прежний «обновите страницу через минуту» empty-state — честный
   indeterminate; страница сама перезагрузится через progress-poller.js. ── */
.artifact-doc__processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
    text-align: center;
}
.artifact-doc__processing-note {
    max-width: 38ch;
    margin: 0;
}
.artifact-doc__processing-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    color: var(--color-text);
}
.artifact-doc__processing-hint {
    max-width: 40ch;
    margin: 0;
    font-size: var(--font-size-sm);
}
/* doc-processing — «документ генерируется» момент: лист (тёплая бумага
   как настоящий артефакт) на чистом near-white с едва заметным cool-accent
   whisper сверху (сигнал AI-активности, не заливка), halo-подложка под
   листом, тихо мерцающий sparkle. Direction «технологичная точность»:
   атмосфера сдержанная, заголовок — sans (loading-состояние = chrome,
   не документ). */
.doc-processing {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    /* Cool-accent whisper сверху-центра (за листом) на чистом surface —
       тоньше прежней бледно-индиговой заливки. */
    background:
        radial-gradient(110% 62% at 50% 2%, rgba(var(--color-accent-rgb), 0.06), transparent 58%),
        var(--color-surface);
    min-height: 28rem;
    justify-content: center;
    gap: var(--space-4);
    text-decoration: none;
}
/* Stage — лист + halo-свечение под ним + парящий sparkle. */
.doc-processing__stage {
    position: relative;
    display: grid;
    place-items: center;
    margin-bottom: var(--space-2);
}
/* Мягкое свечение-подложка под листом — «парит с присутствием». Прохладнее
   и тоньше прежнего (0.30 → 0.16), тон нейтрально-ink с caplей accent. */
.doc-processing__stage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: 62%;
    height: 40%;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(var(--color-ink-rgb), 0.12), transparent);
    filter: blur(24px);
    z-index: 0;
}
.doc-processing__stage .ob-scan { position: relative; z-index: 1; }
/* Лист processing'а — тёплая бумага, как настоящее письмо (не серый surface):
   привязывает «генерацию» к артефакту, который получишь. */
.doc-processing .ob-scan__doc {
    background: var(--surface-paper);
    border-color: color-mix(in srgb, var(--color-accent) 14%, var(--color-border));
}
.doc-processing .ob-scan__line--title {
    background-image: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.6), rgba(var(--color-accent-rgb), 0.3));
}
/* Dog-ear уголок листа читался «обрубком» на тёплой бумаге (цвет overlay ≠
   paper) и конфликтовал со sparkle в том же углу — в doc-processing убираем,
   лист остаётся чистым. В онбординге (.ob-scan без .doc-processing) уголок
   сохраняется. */
.doc-processing .ob-scan__doc::after { display: none; }
/* Sparkle заякорен в правый-верхний угол листа как намеренный AI-акцент
   (был top:-4%/right:24% — парил в пустоте над центром). Тихо мерцает. */
.doc-processing__spark {
    position: absolute;
    top: 5%;
    right: 7%;
    z-index: 2;
    color: var(--color-accent);
    filter: drop-shadow(0 1px 4px rgba(var(--color-accent-rgb), 0.35));
    animation: letter-spark 3.2s var(--ease-in-out) infinite;
}
/* Сдержанный премиум-твинкл: лёгкий пульс масштаба + opacity, без
   мультяшного поворота на 14°. */
@keyframes letter-spark {
    0%, 100% { transform: scale(0.92); opacity: 0.55; }
    50%      { transform: scale(1.08); opacity: 1; }
}
/* Заголовок processing'а — sans (loading-состояние = chrome, не документ).
   Крупный, плотный трекинг — премиальный display-sans. */
.doc-processing .artifact-doc__processing-title {
    font-family: var(--font-sans);
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
@media (prefers-reduced-motion: reduce) {
    .doc-processing__spark { animation: none; }
}

@media (min-width: 768px) {
    .onboarding-shell { padding-top: var(--space-6); gap: var(--space-6); }
    /* 1.75rem, а не 2.1: заголовок шага — просьба («Добавьте к ролям
       достижения с цифрами»), а не витрина. На 33.6px он занимал две строки
       display-кегля и отодвигал работу к середине экрана; в прототипе
       заголовок-просьба идёт 22px, название экрана — 32px, и 28px стоит между
       ними, не ломая ни того, ни другого. */
    .onboarding-step__title { font-size: 1.75rem; }
    .onboarding-step__actions {
        flex-direction: row;
        align-items: center;
        position: static;
        background: none;
    }
    /* Назад слева, Пропустить+Далее справа: первая из правой группы (skip /
       primary) уезжает вправо через auto-margin → wizard-навигация раскинута
       по краям, а не сбита в один угол. */
    .onboarding-step__actions .onboarding-step__push { margin-left: auto; }
    .onboarding-step__actions .btn--full { width: auto; }
    /* Вперёд — справа и тогда, когда кнопка в ряду одна. */
    .onboarding-step__actions--primary-first { flex-direction: row; justify-content: flex-end; }
    .onboarding-step__actions--primary-first > :not(:first-child) { order: -1; }
    .onboarding-step__actions--primary-first > .onboarding-step__back { order: -2; margin-right: auto; }
    /* Подпись кнопки мастера в ряду не переносится: «Перенести / резюме» в
       две строки читалось двумя кнопками. */
    .onboarding-step__actions .btn { white-space: nowrap; }
    /* Второстепенные кнопки ряда — без широких полей: «Назад», «Резюме уже
       на hh.ru» и главная должны помещаться в карточку мастера одним рядом. */
    .onboarding-step__actions .btn--ghost { padding-inline: var(--space-3); }
}

/* ---- Design-review refinements (P0 ось/контраст · P1 атмосфера/степпер) ---- */

/* Атмосфера: мягкий акцентный ambient за контентом + тонкий grain — глубина
   вместо плоского solid (заполняет «пустой низ» на desktop, закрепляет бренд). */
.body--onboarding {
    background:
        radial-gradient(70% 55% at 50% 22%, rgba(var(--color-accent-rgb), 0.10), transparent 70%),
        var(--color-bg);
    background-attachment: fixed;
}
.body--onboarding::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.onboarding-shell { position: relative; z-index: 1; }

/* P0: левая редакционная ось — контент upload-dropzone влево. Зону сужаем и
   прижимаем влево (align-self), чтобы left-контент заполнял коробку, а не
   кучковался в углу с пустым правым полем (corner-cluster после первого прохода). */
.onboarding-step--upload .dropzone {
    align-self: flex-start;
    width: 100%;
    max-width: 540px;
    padding: clamp(1.5rem, 4vw, 2rem);
}
/* В selected-состоянии коробка обнимает pill (мой padding-override выше иначе
   оставляет высокую полупустую зону над/под выбранным файлом). */
/* selected — горизонтальный info-row; даём ему чуть больше ширины, чтобы имя
   файла не резалось так агрессивно (бейдж «Готово к анализу» + «Заменить»
   забирают фикс-ширину). Empty остаётся 540, selected растёт до 620. */
.onboarding-step--upload .dropzone.is-selected { padding: var(--space-4); max-width: 620px; }
/* Зона прижата влево (ось), но подсказка ВНУТРИ по центру — для drop-таргета
   это конвенционально и сбалансировано; left-стек иначе кучкуется в углу,
   оставляя пустое правое поле (corner-cluster). */
.onboarding-step--upload .dropzone__empty { gap: var(--space-1); }
/* Контраст вторичных текстов внутри dropzone (AA на near-black). */
.body--onboarding .dropzone__sub { color: var(--color-text-soft); }
.body--onboarding .dropzone__formats { color: var(--color-text-muted); }

/* ============================================================================
   ui_summary_row — строка сводки, раскрывающая свой редактор на месте
   (родитель — <details class="summary-row-group">). Вся строка — цель
   нажатия; значение — основной текст, подпись над ним тише.
   ============================================================================ */
.summary-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 64px;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    list-style: none;
    transition: background-color .15s ease;
}
.summary-row::-webkit-details-marker { display: none; }
.summary-row:hover { background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
.summary-row:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: calc(-1 * var(--focus-ring-width));
}
.summary-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.summary-row__label { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-soft); }
.summary-row__value { font-size: 1rem; line-height: 1.45; color: var(--color-text); overflow-wrap: anywhere; }
.summary-row__value--empty { font-size: 0.9375rem; color: var(--color-text-muted); }
.summary-row__toggle {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: 0.875rem; font-weight: 600; color: var(--color-accent); white-space: nowrap;
}
.summary-row__toggle .icon { transition: transform .2s ease; }
.summary-row__toggle-open { display: none; }
.summary-row-group[open] > .summary-row .summary-row__toggle-open { display: inline; }
.summary-row-group[open] > .summary-row .summary-row__toggle-closed { display: none; }
.summary-row-group[open] > .summary-row .summary-row__toggle .icon { transform: rotate(180deg); }
/* На телефоне действие — шеврон: слово отняло бы у значения треть строки.
   Для чтения с экрана слово остаётся. */
@media (max-width: 479.98px) {
    .summary-row { padding-inline: var(--space-3) var(--space-3); gap: var(--space-2) var(--space-3); }
    .summary-row__toggle-closed,
    .summary-row-group[open] > .summary-row .summary-row__toggle-open {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
}
@media (prefers-reduced-motion: reduce) {
    .summary-row, .summary-row__toggle .icon { transition: none; }
}

/* Сводка «Ваша цель» (страница «Цели»). Плита — как соседние плиты кабинета:
   белая, мягкая тень, волосяная кромка. Сверху — цель словами (роль и режим
   поиска той же фразой, что на «Обзоре»), ниже — строки с редакторами. */
.goals-sheet { display: flex; flex-direction: column; gap: var(--space-4); max-width: 880px; }
.goals-sheet__card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
    overflow: clip;
}
.goals-sheet__head {
    padding: var(--space-5) var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--color-border-soft);
}
.goals-sheet__kicker { margin: 0 0 var(--space-1); font-size: 0.875rem; color: var(--color-text-soft); }
.goals-sheet__headline {
    margin: 0;
    font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.goals-sheet__headline-none { color: var(--color-text-muted); }
.goals-sheet__more {
    font-size: 1rem; font-weight: 500; letter-spacing: 0;
    color: var(--color-text-soft); white-space: nowrap;
}
.goals-sheet__mode,
.goals-sheet__lead {
    margin: var(--space-2) 0 0;
    font-size: 0.9375rem; line-height: 1.5;
    color: var(--color-text-soft);
    max-width: 72ch;
    text-wrap: pretty;
}
.goals-row + .goals-row { border-top: 1px solid var(--color-border-soft); }
.goals-row[open] { background: color-mix(in srgb, var(--color-accent) 2%, transparent); }
.goals-row__editor {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-1) var(--space-3) var(--space-4);
}
@media (min-width: 480px) { .goals-row__editor { padding-inline: var(--space-4); } }
@media (min-width: 720px) {
    .goals-sheet__head { padding: var(--space-6) var(--space-5) var(--space-5); }
    .goals-sheet .summary-row { padding-inline: var(--space-5); }
    /* Редактор встаёт под текст строки, а не под значок: глаз идёт по той
       же вертикали, что и до раскрытия. */
    .goals-row__editor { padding: var(--space-1) var(--space-5) var(--space-5) calc(var(--space-5) + var(--icon-plate-sm) + var(--space-3)); }
}
.goals-row__editor .field { margin-bottom: 0; }
.goals-row__editor .field__label,
.goals-row__editor .chips-input__label,
.goals-row__editor legend,
.goals-row__editor .field > span:first-child {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-soft);
}
/* Свободный textarea — только вертикальный resize, без «ручки в никуда». */
.goals-row__editor textarea { resize: vertical; min-height: 96px; font-size: 1rem; }
.goals-row__pair { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 720px) {
    .goals-row__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.goals-sheet__actions { display: flex; justify-content: flex-end; }
/* Со скриптом кнопка появляется с первой правкой: в покое сводка — это
   ответ «чего я хочу», а не анкета с «Сохранить» внизу. Без скрипта формы
   «is-dirty» не бывает, и кнопка стоит всегда. */
.js form:not(.is-dirty) .goals-sheet__actions { display: none; }
/* Подпись о наследовании — до сохранения: человек должен знать, куда уедет
   правка, до клика, а не из flash'а после. */
.goals-sheet__inherit { margin: 0; color: var(--color-text-soft); font-size: 0.875rem; max-width: 70ch; }

/* ── «Цели» (05.11): ваши слова → условия поиска → должности ────────────────
   Одна колонка шириной сводки целей: три раздела читаются сверху вниз, и
   правый край у всех один. */
.goals-page > * { max-width: 960px; }
.goals-page .cf-sec + .cf-sec { margin-top: var(--space-6); }
.goals-page .goals-sheet { max-width: none; }

/* «Ваши слова»: карточка с полем и подсказками. На телефоне «о чём
   написать → поле → примеры»; с 820px поле слева, подсказки справа. */
.goals-words__card {
    padding: var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}
.goals-words__lead {
    margin: 0 0 var(--space-4);
    max-width: 68ch;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-soft);
    text-wrap: pretty;
}
.goals-words__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "prompts" "form" "examples";
    gap: var(--space-4);
}
.goals-words__grid > .words-guide--prompts { grid-area: prompts; }
.goals-words__grid > .goals-words__form { grid-area: form; }
.goals-words__grid > .words-guide--examples { grid-area: examples; }
.goals-words__form { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.goals-words__form .field { margin-bottom: 0; }
.goals-words__origin { margin: 0; }
.goals-words__input { min-height: 9.5rem; font-size: 1rem; line-height: 1.5; resize: vertical; }
.goals-words__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-1);
}
.goals-words__note {
    flex: 1 1 16rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.goals-words__saved { color: var(--color-text-soft); font-variant-numeric: tabular-nums; }
@media (min-width: 820px) {
    .goals-words__card { padding: var(--space-5); }
    .goals-words__grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        grid-template-areas: "form prompts" "examples examples";
        column-gap: var(--space-6);
        row-gap: var(--space-5);
    }
    /* «О чём написать» — справочная колонка у поля: тонкая линия отделяет
       её от формы. Примеры — строкой во всю ширину под ними, в две колонки:
       столбик из пяти фраз справа был втрое выше поля. */
    .goals-words__grid > .words-guide--prompts {
        align-self: start;
        padding-left: var(--space-5);
        border-left: 1px solid var(--color-border-soft);
    }
    .goals-words__grid > .words-guide--examples {
        padding-top: var(--space-4);
        border-top: 1px solid var(--color-border-soft);
    }
}
/* Примеры в две колонки уже с 600px: на планшете столбец из шести фраз во
   всю ширину был длиннее самого поля. */
@media (min-width: 600px) {
    .goals-words__grid .words-guide__phrases {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Объяснение «Ваших слов» — общее у «Целей», онбординга и «Вводных» карты. */
.words-guide { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.words-guide__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}
.words-guide__note { font-weight: 400; color: var(--color-text-muted); }
.words-guide__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-soft);
}
.words-guide__list li { position: relative; padding-left: 1rem; }
.words-guide__list li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.62em;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--color-accent);
}
.words-guide__phrases { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.words-guide__phrases > .ui-chip--phrase { height: 100%; }

/* ui_chip phrase — пример фразы целиком: текст переносится, «+» слева. */
.ui-chip--phrase {
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-md);
    border-style: dashed;
    background: transparent;
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.45;
    text-align: left;
}
.ui-chip--phrase:hover { border-style: solid; border-color: var(--color-accent); background: var(--color-surface); }
.ui-chip--phrase:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ui-chip__icon { flex: none; margin-top: 0.2em; color: var(--color-accent); }
.ui-chip__text { min-width: 0; }

/* «Сколько платят» — своей карточкой под условиями (у полосы своя форма,
   внутри формы условий ей не место). */
.goals-salary {
    padding: var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}
.goals-salary__title { margin: 0 0 var(--space-2); font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
@media (min-width: 720px) { .goals-salary { padding: var(--space-5); } }

/* «Должности»: строка на должность, своё — раскрытием. */
.goals-roles__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.goals-role {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-xs);
    scroll-margin-top: 4rem;
}
.goals-role__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.goals-role__ident { min-width: 0; flex: 1; }
.goals-role__name {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.goals-role__name a { color: var(--color-text); text-decoration: none; }
.goals-role__name a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.goals-role__state { margin: 0.15rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-muted); }
.goals-role__own { margin-top: var(--space-1); padding-left: calc(var(--icon-plate-sm) + var(--space-3)); }
.goals-role__body { display: flex; flex-direction: column; gap: var(--space-3); max-width: 44rem; padding: var(--space-1) 0 var(--space-2); }
.goals-role__words { display: flex; flex-direction: column; gap: var(--space-2); }
.goals-role__words .field { margin-bottom: 0; }
.goals-role__words .field__label { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-soft); }
.goals-role__words textarea { font-size: 1rem; resize: vertical; }
.goals-role__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.goals-role__cond { margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--color-border-soft); }
.goals-role__cond .card-link { margin-top: 0; }
@media (max-width: 479px) {
    /* На узком экране своё не сдвигается под текст строки: поле на всю
       ширину карточки читается легче, чем столбик шириной в полэкрана. */
    .goals-role__own { padding-left: 0; }
}
.goals-roles__add { margin-top: var(--space-2); }
.goals-roles__add-form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.goals-roles__add-form .field { width: 100%; max-width: 32rem; }

/* ============================================================================
   ui_comp_slider — зарплатная вилка с двуручным ползунком (валюта-зависимая шкала)
   ============================================================================ */
.comp-slider { display: flex; flex-direction: column; gap: var(--space-4); }
/* Ползунок по делениям (ui_step_slider). Визуальный язык — зарплатного
   ползунка: та же дорожка, та же заливка, та же ручка (44px hit-зона,
   ~20px видимый dot). Отличие одно — ручка одна и ходит по делениям.

   Подписи делений раскладываются по краям дорожки: крайние прижаты к концам,
   средние распределены между. Иначе подпись стояла бы не под своей позицией
   ручки, и ползунок врал бы о том, что выбрано. */
.step-slider { display: flex; flex-direction: column; gap: var(--space-1); }
.step-slider__track { position: relative; height: 44px; }
.step-slider__rail {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 5px;
    transform: translateY(-50%);
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
}
.step-slider__fill {
    position: absolute;
    top: 50%; left: 0;
    height: 5px;
    transform: translateY(-50%);
    background: var(--color-accent);
    border-radius: var(--radius-pill);
}
.step-slider__range {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 44px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}
.step-slider__range:focus-visible { outline: none; }
.step-slider__range::-webkit-slider-runnable-track { background: transparent; border: 0; }
.step-slider__range::-moz-range-track { background: transparent; border: 0; }
.step-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 44px; height: 44px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        var(--color-surface) 0 8px,
        var(--color-accent) 8px 10px,
        transparent 11px);
    filter: drop-shadow(0 2px 6px rgba(var(--color-bg-rgb), 0.5));
    cursor: grab;
    transition: transform 120ms ease;
}
.step-slider__range::-moz-range-thumb {
    width: 44px; height: 44px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        var(--color-surface) 0 8px,
        var(--color-accent) 8px 10px,
        transparent 11px);
    filter: drop-shadow(0 2px 6px rgba(var(--color-bg-rgb), 0.5));
    cursor: grab;
}
.step-slider__range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.step-slider__range:focus-visible::-webkit-slider-thumb {
    background: radial-gradient(circle at center,
        var(--color-surface) 0 8px,
        var(--color-accent) 8px 10px,
        rgba(var(--color-accent-rgb), 0.28) 10px 16px,
        transparent 17px);
}
.step-slider__range:focus-visible::-moz-range-thumb {
    background: radial-gradient(circle at center,
        var(--color-surface) 0 8px,
        var(--color-accent) 8px 10px,
        rgba(var(--color-accent-rgb), 0.28) 10px 16px,
        transparent 17px);
}
.step-slider__ticks {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-soft);
}
.step-slider__tick { flex: 0 1 auto; }
/* Крайние подписи прижимаются к своим концам дорожки, а не центрируются. */
.step-slider__tick:first-child { text-align: left; }
.step-slider__tick:last-child { text-align: right; }
.step-slider__tick.is-active { color: var(--color-text); font-weight: 600; }
.step-slider__note {
    /* Подписи делений принадлежат дорожке и стоят вплотную к ней; пояснение —
       уровень ниже, и на общем шаге все три строки читались одним абзацем. */
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-soft);
    /* Две строки пояснения не должны дёргать форму при движении ручки. */
    min-height: 2.6em;
}
@media (prefers-reduced-motion: reduce) {
    .step-slider__range::-webkit-slider-thumb { transition: none; }
}

.comp-slider__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
}
.comp-slider__field { flex: 1 1 8rem; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.comp-slider__field--currency { flex: 0 1 7rem; }

/* Двуручный слайдер: два range поверх общей дорожки.
   Высота слайдера/range = 44px → thumb'ы дают полный WCAG 2.5.5 tap-target
   на тач, при этом ВИЗУАЛЬНО ручка — компактный ~20px dot: thumb-псевдоэлемент
   44px прозрачный, radial-gradient красит только центральный dot + accent-ring,
   остальное прозрачно (big hit, small visual). */
.comp-slider__slider { position: relative; height: 44px; }
.comp-slider__rail {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 5px;
    transform: translateY(-50%);
    background: var(--color-border-strong);
    border-radius: 999px;
}
.comp-slider__fill {
    position: absolute;
    top: 50%;
    height: 5px;
    transform: translateY(-50%);
    background: var(--color-accent);
    border-radius: 999px;
}
.comp-slider__range {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 44px;
    margin: 0;
    background: transparent;
    pointer-events: none; /* интерактивны только thumb'ы */
    -webkit-appearance: none;
    appearance: none;
}
.comp-slider__range:focus-visible { outline: none; }
.comp-slider__range::-webkit-slider-runnable-track { background: transparent; border: 0; }
.comp-slider__range::-moz-range-track { background: transparent; border: 0; }
/* 44px hit-зона, но покрашен только ~20px dot (surface) + 2px accent-ring;
   вне ring — прозрачно. drop-shadow ложится на видимый dot. */
.comp-slider__range::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    width: 44px; height: 44px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        var(--color-surface) 0 8px,
        var(--color-accent) 8px 10px,
        transparent 11px);
    filter: drop-shadow(0 2px 6px rgba(var(--color-bg-rgb), 0.5));
    cursor: grab;
    transition: transform 120ms ease;
}
.comp-slider__range::-moz-range-thumb {
    pointer-events: auto;
    width: 44px; height: 44px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        var(--color-surface) 0 8px,
        var(--color-accent) 8px 10px,
        transparent 11px);
    filter: drop-shadow(0 2px 6px rgba(var(--color-bg-rgb), 0.5));
    cursor: grab;
}
.comp-slider__range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
/* Фокус — мягкий accent-halo вокруг dot (в самом gradient'е, не box-shadow на 44px). */
.comp-slider__range:focus-visible::-webkit-slider-thumb {
    background: radial-gradient(circle at center,
        var(--color-surface) 0 8px,
        var(--color-accent) 8px 10px,
        rgba(var(--color-accent-rgb), 0.28) 10px 16px,
        transparent 17px);
}
.comp-slider__range:focus-visible::-moz-range-thumb {
    background: radial-gradient(circle at center,
        var(--color-surface) 0 8px,
        var(--color-accent) 8px 10px,
        rgba(var(--color-accent-rgb), 0.28) 10px 16px,
        transparent 17px);
}

.comp-slider__readout {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}
.comp-slider__readout-dash { color: var(--color-text-muted); }
/* Вилка ещё не задана — строки нет: пустое место под ней отрывало ползунок от
   следующего вопроса. Строка появляется от ввода человека, и такой сдвиг в
   CLS не считается. */
.comp-slider__readout.is-empty { display: none; }

/* ui_resume_mirror — итог разбора портретом на финале онбординга. Тихая
   карточка: шкала работ над ней остаётся главным, зеркало — узнавание, пока
   ждём. Навыки — пилюли семейства чипов, но без действия (это не кнопки). */
.resume-mirror {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.resume-mirror__eyebrow { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.resume-mirror__role { margin: 0; font-size: 1.0625rem; line-height: 1.4; color: var(--color-text); }
.resume-mirror__role strong { font-weight: 600; }
.resume-mirror__at { color: var(--color-text-muted); }
.resume-mirror__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}
.resume-mirror__dot { color: var(--color-text-muted); }
.resume-mirror__skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
}
.resume-mirror__skill,
.resume-mirror__more {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill, 999px);
    font-size: var(--font-size-sm, 0.875rem);
}
/* Пилюля — волосяной рамкой, как у семейства чипов: заливка surface-soft на
   белой карточке не читалась, и навыки выглядели разреженным текстом. */
.resume-mirror__skill { border: 1px solid var(--color-border); color: var(--color-text); }
.resume-mirror__more { color: var(--color-text-muted); }

/* Заготовки шага «Своими словами» — ряд ui_chip с fillAppend над полем.
   Подпись своей строкой: в одном ряду с фразами она читалась как ещё одна. */
.ob-starters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    /* Отступ под полем уже даёт группа поля: свой сверху отрывал заготовки
       от поля, к которому они относятся. */
    margin-top: calc(-1 * var(--space-2));
}
.ob-starters__label {
    flex-basis: 100%;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.comp-slider__hint { margin-top: calc(-1 * var(--space-2)); }

/* Заметка о валюте рынка — ui_alert варианта info, прижатый к группе полей.
   Информирует, а не упрекает: пересчёт по курсу делает платформа. */
.comp-slider__market-note { margin-top: var(--space-1); }

/* Сноска о пересчёте вилки в ленте: тихая строка под шапкой, не плашка —
   это факт о выдаче, а не сообщение, требующее действия. */
.jobs-fx-note {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
.jobs-fx-note .icon { flex: none; color: var(--color-text-muted); }

/* Период «в месяц / в год» — радиогруппа формы в облике сегмент-контрола
   (тот же visual language, что .pricing-toggle). Виден и без JS: период —
   часть ожидания и уходит вместе с вилкой. Выравнивается вправо над дорожкой. */
.comp-slider__period {
    display: inline-flex;
    align-self: flex-end;
    gap: 0;
    padding: 3px;
    margin-bottom: calc(-1 * var(--space-2));
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}
.comp-slider__period-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: -0.005em;
    padding: 0.3rem 0.85rem;
    min-height: 32px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.comp-slider__period-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.comp-slider__period-btn:hover { color: var(--color-text); }
.comp-slider__period-btn:has(.comp-slider__period-input:checked) {
    background: var(--color-surface-elevated);
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.comp-slider__period-btn:has(.comp-slider__period-input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .comp-slider__fields { flex-direction: column; align-items: stretch; }
    .comp-slider__field--currency { flex: 1 1 auto; }
}

/* ============================================================================
   Единый премиум icon-plate язык для ad-hoc __icon-плашек
   ============================================================================
   Приводим разрозненные `.foo__icon` (career-kpi / education / certifications /
   snapshot / prefs / recommendation / security / achievement) к тому же
   тактильному «жетону», что и .icon-plate--filled: тон-градиент + hairline +
   верхний catch-light + мягкий цветной bloom. Тон — через --plate-rgb (default
   accent); плашка сохраняет свой размер/радиус. Правило в конце файла — чтобы
   перебить исходные background/box-shadow по source-order. */
.career-education__icon,
.career-kpi__icon,
.career-certifications__icon,
.snapshot-icon,
.recommendation-banner__icon,
.security-banner__icon {
    background: linear-gradient(158deg,
        rgba(var(--plate-rgb, var(--color-accent-rgb)), 0.20) 0%,
        rgba(var(--plate-rgb, var(--color-accent-rgb)), 0.09) 100%);
    color: rgb(var(--plate-rgb, var(--color-accent-rgb)));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 0 0 1px rgba(var(--plate-rgb, var(--color-accent-rgb)), 0.20),
        0 4px 12px -4px rgba(var(--plate-rgb, var(--color-accent-rgb)), 0.30),
        0 1px 2px rgba(15, 23, 42, 0.05);
}
/* Тоны отдельных плашек. */
.career-certifications__icon,
.security-banner__icon { --plate-rgb: var(--color-amber-rgb); }
.snapshot-icon { --plate-rgb: var(--icon-rgb, var(--color-accent-rgb)); }

/* ============================================================================
   Profile improvement wizard (/app/profiles/{id}/improve — focus flow)
   Server-side шаги в onboarding_base: intro-план, вопрос-на-экран,
   inline mini-редакторы секций, финал-перегенерация. Reuse .onboarding-step;
   здесь — только wizard-специфика. Mobile-first, tap ≥44px.
   ========================================================================== */
.improve-step { display: flex; flex-direction: column; gap: var(--space-4); }

/* Мета-строка шага: counter · приоритет/score (эхо мета-строки growth). */
.improve-step__meta {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 -4px;
    font-family: var(--font-sans);
    font-size: 0.8125rem; font-weight: 600;
    letter-spacing: 0; text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Вопрос — высказывание, а не заголовок-плакат. Шаги визардов называются
   коротко («Каким будет ваш трек?»), а формулировка парсера приходит на сорок
   слов: тот же кегль превращает экран в стену жирного текста и утапливает поле
   ответа. Короткий вопрос сохраняет прежний вид, длинный — набирается мельче и
   по более широкой мере (модификатор ставит сервер: длину строки CSS не знает). */
.improve-step__question { max-width: 30ch; letter-spacing: -0.02em; }
.improve-step__question--long {
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.375rem);
    line-height: 1.35;
    letter-spacing: -0.012em;
    font-weight: 600;
    max-width: 46ch;
}
/* Поле ответа растёт вместе с текстом: человека просят про цифры и масштаб, а
   ответ на пять строк скроллился внутри коробки, пока сверху висел заголовок.
   field-sizing поддержан не везде — без него остаётся rows="5". */
.improve-step__answer {
    field-sizing: content;
    min-height: 8.5rem;
    max-height: 60vh;
}
/* Eyebrow-номер/лейбл — muted (наследует .improve-step__meta), не синий accent:
   единый eyebrow-язык визардов (как .section-label в кабинете). */
.improve-step__meta-num { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.improve-step__meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-muted); opacity: 0.5; }
.improve-step__meta-priority--high   { color: var(--color-coral, var(--color-danger)); }
.improve-step__meta-priority--medium { color: var(--color-amber); }
.improve-step__meta-score { font-variant-numeric: tabular-nums; }
.improve-step__meta-skipped { color: var(--color-text-muted); }

/* Совет парсера — lightbulb + текст (эхо improvement-hints). */
.improve-step__advice {
    display: flex; align-items: flex-start; gap: var(--space-2);
    margin: 0;
    color: var(--color-text-soft, var(--color-text));
    font-size: 1rem; line-height: 1.55;
}
.improve-step__advice .icon { flex: none; margin-top: 3px; color: var(--color-accent); }

/* rationale-экспандер вопроса — тот же язык, что на growth/answers. */
.improve-step__why { margin: -6px 0 0; padding: 0; border: 0; }
.improve-step__why-summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--color-text-muted); list-style: none; padding: 4px 0; user-select: none; font-variant-numeric: tabular-nums; }
.improve-step__why-summary::-webkit-details-marker { display: none; }
.improve-step__why-summary::before { content: "+"; display: inline-block; width: 12px; text-align: center; font-family: var(--font-sans); font-weight: 400; color: color-mix(in srgb, var(--color-text) 50%, transparent); font-variant-numeric: tabular-nums; }
.improve-step__why[open] .improve-step__why-summary::before { content: "−"; }
.improve-step__why-body { margin: 8px 0 0; padding: var(--space-3); border-left: 2px solid color-mix(in srgb, var(--color-accent) 24%, transparent); background: color-mix(in srgb, var(--color-accent) 4%, transparent); border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0; font-size: 0.875rem; line-height: 1.55; color: var(--color-text); }

/* План intro/finish — divided-rows c icon-plate (эхо insight-cards). */
.improve-plan { display: flex; flex-direction: column; }
.improve-plan__row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; }
.improve-plan__row:not(:first-child) { border-top: 1px solid var(--color-border); }
.improve-plan__body { flex: 1; min-width: 0; }
.improve-plan__title { margin: 0; font-weight: 600; color: var(--color-text); line-height: 1.4; display: inline-flex; align-items: baseline; gap: 10px; }
.improve-plan__score { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.improve-plan__note { margin: 2px 0 0; color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.5; }

/* Существующие записи секции (read-only контекст под mini-формой). */
.improve-step__existing { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.improve-step__existing-title { margin: 0 0 6px; font-weight: 600; font-size: 0.9375rem; color: var(--color-text); }
.improve-step__existing-list { margin: 0; padding-left: 1.2em; color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.55; display: flex; flex-direction: column; gap: 4px; }

/* improve sec-experience: карточка роли (действие на объекте — добавляем
   достижение ПРЯМО к роли, без абстрактного селектора). Роль + её текущие
   достижения + inline-раскрытие формы. */
/* Роли — строки на подложке, а не стопка карточек. Каждая роль в собственной
   рамке давала на шаге секции третий уровень границ (обёртка шага → карточка
   роли → строка-раскрывашка со своей чертой), и экран читался как набор
   вложенных панелей. В прототипе то же содержимое — строки, разделённые
   волосяной линией; рамка остаётся за настоящими предметами (карточка резюме,
   карточка профессии), а не за пунктами списка. */
.improve-roles { display: flex; flex-direction: column; gap: 0; }
/* Роли, где достижений уже достаточно. Раскрывашка, а не скрытие: дописать
   можно к любой роли, и человек, пришедший поправить давнее место работы,
   обязан его найти. Свой список внутри получает верхний отступ — без него
   первая карточка прилипает к строке раскрывашки. */
.improve-roles__rest { margin-top: var(--space-2); border-top: 1px solid var(--color-border); }
.improve-roles__rest .improve-roles { margin-top: 0; }
.improve-role { padding: var(--space-3) 0; }
/* Разделитель между ролями — у соседа, а не рамка вокруг каждой: линия под
   последней ролью обрывала бы список чертой в пустоту. */
.improve-role + .improve-role { border-top: 1px solid var(--color-border); }
.improve-role__title { margin: 0; padding: 0 0 var(--space-1); font-size: 0.9375rem; font-weight: 600; color: var(--color-text); line-height: 1.35; }
.improve-role__empty { margin: 0; color: var(--color-text-muted); font-size: 0.875rem; }

/* Раскрывашка-строка: summary + chevron-rotate, без собственной черты — роли
   уже разделены линией, и вторая горизонталь внутри строки дробила бы её. */
.improve-role__row { border-top: 0; }
.improve-role__row-summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    min-height: var(--tap-min);
    padding: var(--space-1) 0;
    cursor: pointer; list-style: none; user-select: none;
}
.improve-role__row-summary::-webkit-details-marker { display: none; }
.improve-role__row-summary:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: -2px; }
.improve-role__row-summary:hover .improve-role__row-label { color: var(--color-text); }
/* Подпись занимает свободное место, чтобы шеврон остался у правого края, а
   значок действия стоял вплотную к своей подписи, а не разъехался с ней по
   краям ряда. */
.improve-role__row-label { flex: 1; font-weight: 600; font-size: 0.875rem; color: var(--color-text); }
.improve-role__row-label--accent { color: var(--color-accent); }
/* Значок действия — второй признак поверх цвета: ряды карточки различались
   только оттенком подписи (WCAG 1.4.1 «не только цветом»). */
.improve-role__row-glyph { flex: 0 0 auto; color: var(--color-accent); }
.improve-role__row-count { font-family: var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-weight: 500; }
.improve-role__row-chev { flex: 0 0 auto; color: var(--color-text-muted); transition: transform 0.2s var(--ease-out, ease); }
.improve-role__row[open] > .improve-role__row-summary .improve-role__row-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .improve-role__row-chev { transition: none; } }
.improve-role__row-body { padding: var(--space-2) 0 var(--space-3); }
.improve-role__form { display: flex; flex-direction: column; gap: var(--space-3); }
/* Список текущих формулировок — чистый, не «страшный»: мягкий текст, tabular
   отступ, dot-маркер через ::marker. */
.improve-role__list { margin: 0; padding-left: 1.2em; color: var(--color-text-soft); font-size: 0.875rem; line-height: 1.6; display: flex; flex-direction: column; gap: var(--space-2); }
.improve-role__list li::marker { color: var(--color-border-strong, var(--color-text-muted)); }

/* Skills-чипы с per-item удалением. */
/* Список навыков — плотная лента тегов: их шесть десятков, и на прежней высоте
   ряда шаг вытягивался на три тысячи пикселей. Плотнее, но цель нажатия у
   крестика остаётся полной — её держит его собственная подкладка ниже. */
.improve-step__skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Навык как объект (ui_skill_chip) ─────────────────────────────────────
   Лицо чипа — имя и полоска уровня; клик раскрывает уровень и удаление. Меню
   всплывает НАД соседями (absolute), иначе раскрытие раздвигало бы всю ленту и
   человек терял бы место, куда смотрел. */
.skill-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 34px;
    /* Граница интерактивного объекта, а не декоративная линия: чип — кнопка,
       и опознаётся он своей пилюлей. На общем --color-border она давала 1.2:1
       к поверхности карточки при требуемых 3:1 (WCAG 1.4.11), а чип с
       проставленным уровнем (белая заливка на белой карточке) держался на ней
       одной. Отсюда собственный, более тёмный тон — не правка общего токена:
       рамки карточек и полей остаются прежними. */
    border: 1px solid color-mix(in srgb, var(--color-text-muted) 80%, var(--color-border));
    border-radius: 999px;
    background: var(--color-bg-soft);
    font-size: 0.875rem;
    line-height: 1.2;
}
.skill-chip:hover { border-color: var(--color-text-muted); }
/* Проставленный уровень виден на самом чипе: иначе «что уже сделано» читается
   только по одному открытию за раз. */
.skill-chip--set { background: var(--color-surface); }
/* Компактный справочный чип (prop size "sm"): навык как метка в перечне,
   а не объект с действием, — без рамки кнопки, ниже и мельче. Только у
   статичного чипа: интерактивному положена зона нажатия 44px. */
/* Выбор галочкой: пилюля навыка, внутри — скрытый чекбокс. Отмеченный —
   с галочкой и в рамке акцента; при pickTone=remove — зачёркнут, тона
   удаления. Пилюля той же высоты, что чип навыка на «Навыках». */
/* Высота — та же, что у чипа на «Навыках» (40px), в покое и под курсором:
   прежде правило :hover поднимало чип до 44px, и ряд прыгал под мышью. */
.skill-chip.skill-chip--pick, .skill-chip.skill-chip--pick:hover { cursor: pointer; min-height: 40px; border: 0; background: transparent; box-shadow: none; }
.skill-chip--pick .skill-chip__face {
    min-height: 40px;
    border: 1px solid color-mix(in srgb, var(--color-text-muted) 80%, var(--color-border));
    border-radius: 999px;
    background: var(--color-bg-soft);
}
.skill-chip__pick { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.skill-chip__pick-mark { display: none; margin-right: calc(4px - var(--space-2)); }
.skill-chip__pick:checked + .skill-chip__face { border-color: var(--color-accent); background: var(--color-surface); }
.skill-chip__pick:checked + .skill-chip__face .skill-chip__pick-mark { display: inline-flex; color: var(--color-accent); }
.skill-chip__pick:focus-visible + .skill-chip__face { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.skill-chip--pick-remove .skill-chip__pick:checked + .skill-chip__face { border-color: rgba(var(--color-danger-rgb), 0.55); background: rgba(var(--color-danger-rgb), 0.06); color: var(--color-danger); }
.skill-chip--pick-remove .skill-chip__pick:checked + .skill-chip__face .skill-chip__pick-mark { color: var(--color-danger); }
.skill-chip--pick-remove .skill-chip__pick:checked + .skill-chip__face .skill-chip__name { text-decoration: line-through; }
.skill-chip--sm { min-height: 26px; border-color: transparent; font-size: 0.8125rem; }
.skill-chip--sm .skill-chip__face { min-height: 26px; padding-inline: 9px; }
.skill-chip--sm:hover { border-color: transparent; }
/* Раскрытый чип — акцентная рамка на пилюле, а не на её содержимом: подсветить
   надо весь объект, а рамка живёт снаружи. */
.skill-chip:has(> .skill-chip__disc[open]) { border-color: var(--color-accent); }

.skill-chip__disc { display: inline-flex; min-width: 0; }
.skill-chip__face {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: 32px;
    padding-inline: 10px;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.skill-chip__face--static { cursor: default; }
.skill-chip__face::-webkit-details-marker { display: none; }
/* Цель нажатия — 44px, хотя сам чип 34: клик по навыку стал главным действием
   шага, а лента из «толстых» чипов на телефоне не помещается. Площадь добирает
   невидимая подкладка, а не размер (WCAG 2.5.5). */
.skill-chip__disc > .skill-chip__face::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: var(--tap-min);
    transform: translateY(-50%);
}
/* Кольцо фокуса — на самой пилюле и поверх её границы, а не вокруг лица со
   смещением: у раскрытого чипа граница уже акцентная, и кольцо с зазором
   рисовало вторую рамку вокруг первой (08.10). Фокус на лицо после подмены
   ленты ставит skill-chip.js программно — поэтому кольцо видно и после
   клика мышью. */
.skill-chip__face:focus-visible { outline: none; }
.skill-chip:has(> .skill-chip__disc > .skill-chip__face:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: -1px;
}
/* Длинное название («Управление распределёнными командами») переносится внутри
   чипа, а не выпирает из ленты и не режется на полуслове. */
.skill-chip__name { min-width: 0; overflow-wrap: anywhere; }

/* Подпись уровня вместо шкалы (CEFR языка, сырой уровень навыка резюме): тише
   и мельче имени — это уточнение к навыку, а не второе его имя. */
.skill-chip__badge {
    flex: none;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Непроставленный уровень — приглушённая шкала: в ленте из шести десятков
   навыков полноценные серые деления у каждого читаются шумом и заглушают те
   несколько, где уровень действительно стоит. */
.skill-chip__meter { display: inline-flex; gap: 2px; flex: none; opacity: 0.45; }
.skill-chip--set .skill-chip__meter { opacity: 1; }
.skill-chip__tick {
    width: 3px;
    height: 10px;
    border-radius: 2px;
    background: var(--color-border);
}
.skill-chip__tick--on { background: var(--color-accent); }

/* Крестик — на лице чипа: убрать лишний навык человек хочет, глядя на список.
   Приглушён и добирает 44px невидимой подкладкой, как и само лицо. */
.skill-chip__drop-form { display: inline-flex; margin: 0; }
.skill-chip__drop {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    margin-inline: -2px 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}
.skill-chip__drop::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: var(--tap-min);
    transform: translate(-50%, -50%);
}
.skill-chip__drop:hover {
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
    color: var(--color-danger);
}
.skill-chip__drop:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
}
/* Чип без крестика (уровень-only) не должен упираться именем в правый край. */
.skill-chip__disc:only-child > .skill-chip__face { padding-inline-end: 12px; }

/* Меню уровня. На узком экране — НИЖНИЙ ЛИСТ во всю ширину, а не всплывашка у
   чипа: всплывашка шириной 13rem у чипа, стоящего правее трети экрана, уезжала
   за правый край на восемь десятков точек, и часть уровней была недостижима —
   горизонтальной прокрутки при этом не появлялось, то есть отказ был молчаливым.
   Лист заодно кладёт выбор под большой палец (канон: bottom-sheet для
   action-panels на мобиле). Имя навыка живёт в заголовке листа — сам чип к этому
   моменту может быть за пределами видимости. */
.skill-chip__menu {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    left: 0;
    min-width: 14rem;
    display: flex;
    flex-direction: column;
    /* Узкое поле, а не воздух: подсветка пункта доходит почти до края
       панели, как в системных меню, и строки читаются строками, а не
       надписями, плавающими в белом. */
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.28);
}
/* Развороты у краёв экрана — ставит skill-chip.js (положение чипа известно
   только в момент раскрытия). */
.skill-chip__menu--flip { left: auto; right: 0; }
.skill-chip__menu--up { top: auto; bottom: calc(100% + 4px); }

@media (max-width: 900px) {
    .skill-chip__menu {
        position: fixed;
        z-index: 60; /* выше нижней навигации (50) */
        top: auto;
        left: var(--space-3);
        right: var(--space-3);
        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-3));
        min-width: 0;
        border-radius: var(--radius-lg);
        box-shadow: 0 -8px 32px -12px rgba(15, 23, 42, 0.35);
        /* Список уровней выше, чем остаток экрана на невысоком телефоне: без
           потолка последний уровень уезжал под нижний край и был недоступен
           вовсе. Прокрутка внутри листа, обе оси заданы явно (смешанные оси
           делают блок скролл-контейнером и он забирает колесо себе). */
        max-height: min(60vh, 26rem);
        overflow: auto;
        overscroll-behavior: contain;
    }
}

/* Шапка меню — тот же левый край, что у ТЕКСТА пунктов (поле пункта +
   колонка значка): прежде заголовок стоял на 12px, а слова пунктов на 20, и
   у меню не было общего края. Черта отделяет «о чём» от «что сделать». */
.skill-chip__menu-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + 16px + var(--space-2));
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border-soft);
}
.skill-chip__menu-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Чему ставим уровень. В нижнем листе это единственная связь с объектом. */
.skill-chip__menu-subject {
    margin: 0;
    /* Свой цвет, а не наследованный: меню живёт внутри чипа, и у тихого
       чипа-пробела имя в шапке становилось серым. */
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
/* Чего не хватает у навыка против требования (prop lack) — под именем в
   шапке меню: основным цветом, это ответ на «чего у меня нет», а пояснение
   действия под ним — приглушённо. */
.skill-chip__menu-lack {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text-soft);
    overflow-wrap: anywhere;
}
/* Полная фраза к короткой подписи чипа — тихо, под именем. */
.skill-chip__menu-note {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}
/* Пункты — плотной колонкой без зазора: границу строки рисует подсветка,
   а зазор между 44-пиксельными строками превращал меню в россыпь. */
.skill-chip__levels { display: flex; flex-direction: column; }
.skill-chip__level {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: left;
    min-height: 2.25rem;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}
/* Колонка значков одной ширины у всех пунктов — галочка текущего уровня и
   значки действий; пустая колонка держит выравнивание слов. */
.skill-chip__level-mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    color: var(--color-text-muted);
}
.skill-chip__level--on .skill-chip__level-mark { color: var(--color-accent); }
.skill-chip__level:hover { background: var(--color-bg-soft); }
.skill-chip__level:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: -2px;
}
/* Касание: строка меню — цель пальца, 44px (WCAG 2.5.5); шрифт листа — как
   у текста страницы, лист не мельче того, из чего он открыт. */
@media (pointer: coarse), (max-width: 900px) {
    .skill-chip__level { min-height: var(--tap-min); font-size: 1rem; }
    .skill-chip__menu { padding: var(--space-2); }
}
.skill-chip__level--on { color: var(--color-accent); font-weight: 600; }
.skill-chip__level--clear { color: var(--color-text-muted); }

.improve-step__skill { display: contents; }

/* Добавление навыка — одной строкой: поле и его кнопка стояли двумя рядами с
   воздухом между ними и съедали треть экрана до того, как человек увидит хоть
   один свой навык. */

/* Education mini-формы: пары полей в 2 колонки от 600px. */
.improve-step__edu { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.improve-step__edu:first-of-type { border-top: 0; padding-top: 0; }
/* Подзаголовок «Курсы и сертификаты» между формами дипломов и сертификатов. */
.improve-step__edu + .improve-step__existing-title { margin-top: var(--space-5); }
.improve-step__existing-title + .improve-step__edu { border-top: 0; padding-top: 0; }
/* Сетка тянется на всю ширину формы: форма шага — flex-столбец с
   align-items: flex-start, и без явной ширины сетка сжималась до содержимого
   (два поля на две трети строки, длинная специальность обрезалась). */
.improve-step__edu-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; width: 100%; align-self: stretch; }
@media (min-width: 600px) {
    .improve-step__edu-grid { grid-template-columns: 1fr 1fr; }
    .improve-step__edu-grid--three { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
}

.improve-step__form { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.improve-step__form .field { align-self: stretch; }
/* Добавление навыка — одной строкой: поле и его кнопка стояли двумя рядами и
   съедали треть экрана до того, как человек увидит хоть один свой навык.
   Правило идёт ПОСЛЕ общего .improve-step__form: у них равная специфичность, и
   порядок здесь решает. */
.improve-step__form.improve-step__skill-add {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--space-2);
    /* Поле с кнопкой — одна пара, а не строка во всю карточку: без ограничения
       поле забирало всё место и отбрасывало кнопку к правому краю, за метр от
       того, что она добавляет. */
    max-width: 32rem;
}
.improve-step__skill-add .field { flex: 1; min-width: 0; align-self: auto; }
.improve-step__skill-add .btn { flex: none; }
/* На телефоне пара не помещается в строку: кнопка забирает свои 135px, полю
   остаётся 166 — меньше, чем его собственный пример ввода, и человек видит
   обрезанное «Например: Kuberne». Кладём кнопку под поле во всю ширину. */
@media (max-width: 520px) {
    .improve-step__form.improve-step__skill-add { flex-wrap: wrap; }
    .improve-step__skill-add .field { flex: 1 1 100%; }
    .improve-step__skill-add .btn { width: 100%; }
}
.improve-step__disabled-hint { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: 0.875rem; }
.improve-step--processing { align-items: stretch; }

/* ── Score delta chip (ui_score_delta) ───────────────────────────────────
   «▲ +8» — микро-сигнал изменения готовности за последний пересчёт.
   Семантическая раскраска: рост sage / падение coral (не декоративная). */
.score-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.score-delta .icon { width: 13px; height: 13px; }
.score-delta--up {
    color: var(--color-sage, #3D7A5D);
    background: rgba(var(--color-sage-rgb, 61 122 93), 0.1);
    box-shadow: inset 0 0 0 1px rgba(var(--color-sage-rgb, 61 122 93), 0.22);
}
.score-delta--down {
    color: var(--color-coral, var(--color-danger));
    background: rgba(var(--color-coral-rgb, 200 66 61), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--color-coral-rgb, 200 66 61), 0.2);
}
/* ui_error_page — универсальная полностраничная ошибка: гигантский полый
   код статуса (hairline text-stroke — тихий, не кричащий danger),
   serif-заголовок, объяснение, действия. Центр канваса. */
.error-page {
    min-height: min(60vh, 560px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
}
.error-page__code {
    margin: 0;
    font-family: var(--font-display, var(--font-serif));
    font-size: clamp(5rem, 14vw, 8.5rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 0.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
    background: linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.10) 0%, transparent 80%);
    -webkit-background-clip: text;
    background-clip: text;
    user-select: none;
}
.error-page__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.error-page__body {
    margin: 0;
    max-width: 46ch;
    color: var(--color-text-soft);
    font-size: 1rem;
    line-height: 1.55;
}
.error-page__body--secondary { color: var(--color-text-muted); font-size: 0.875rem; }
.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* ui_stale_notice — «артефакт отстал от источника»: тёплая amber-бумага
   вместо тревожной оранжевой полосы. Icon-plate + serif-title + body +
   CTA справа (десктоп) / стеком (мобайл). Семантический warning-тон —
   осознанное использование warning-палитры, не декор. */
.stale-notice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-warning) 5%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-warning) 22%, var(--color-border));
    margin-bottom: var(--space-4);
}
.stale-notice__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 12%, transparent);
}
.stale-notice__text {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stale-notice__title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--color-text);
}
.stale-notice__body {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-soft);
    max-width: 62ch;
}
.stale-notice__meta {
    margin: 2px 0 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.stale-notice__action { flex: none; }
/* Телефон: значок у заголовка, действие — под текстом по своей ширине.
   Растянутая во всю ширину вторичная кнопка читалась главным действием
   страницы, хотя главное там — сам документ под предупреждением. */
@media (max-width: 560px) {
    .stale-notice { align-items: flex-start; }
    .stale-notice__text { min-width: 0; flex-basis: calc(100% - 32px - var(--space-3)); }
    .stale-notice__action { margin-left: calc(32px + var(--space-3)); }
}

/* Позиционный вариант: строка intro-плана improve-wizard'а. */
.improve-step__delta { display: flex; align-items: center; gap: 8px; margin: -6px 0 0; color: var(--color-text-muted); font-size: 0.875rem; }

/* ============================================================================
   Лента вакансий (M2) — /app/jobs. ui_job_card + job-detail.
   Mobile-first: одноколоночная лента ≤375px, grid на десктопе. Токены-only.
   ========================================================================== */

/* Метка статуса — единственный цветной элемент строки. */
.req-coverage__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
}
.req-coverage__row--covered .req-coverage__mark { background: rgba(var(--color-sage-rgb), 0.14); color: var(--color-sage); }
.req-coverage__row--partial .req-coverage__mark { background: var(--color-warning-soft); color: var(--color-warning-strong); }
.req-coverage__row--missing .req-coverage__mark { background: rgba(var(--color-danger-rgb), 0.12); color: var(--color-danger); }
.req-coverage__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: var(--font-size-sm);
}
.req-coverage__req { color: var(--color-text); }
/* Цитата и пояснение — вторым голосом: это подтверждение и пояснение, а не
   само требование. */
.req-coverage__quote,
.req-coverage__note {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}
.req-coverage__quote { font-style: italic; }
/* Раскрытие закрытых требований — тихая строка-итог, а не кнопка: это
   справка, которую открывают редко. */
.req-coverage__more { margin-top: var(--space-3); }
.req-coverage__more-summary {
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    min-height: 32px;
    display: flex;
    align-items: center;
}
.req-coverage__list--rest { margin-top: var(--space-3); }
.req-coverage__foot,
.req-coverage__empty {
    margin: var(--space-3) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}
.req-coverage__empty { margin-top: 0; }

/* --- Панель условий подбора (ui_feed_conditions) ---
   Mobile-first: на узком экране видна строка-итог, контролы разворачиваются
   тапом; на десктопе панель развёрнута всегда. Панель тише карточек ленты —
   она инструмент над выдачей, а не выдача: приглушённая подложка, hairline,
   никакой тени. Подсветка accent'ом перетягивала бы внимание с того, ради чего
   человек пришёл. */
.feed-conditions {
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* Строка-итог свёрнутого состояния. Показывается только на узком экране
   (media ниже): свёрнутая панель обязана называть текущие условия, иначе она
   их прячет. */
.feed-conditions__summary {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 44px;
    cursor: pointer;
}
.feed-conditions__summary-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.feed-conditions__summary-label {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.feed-conditions__summary-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}
.feed-conditions__chevron {
    flex: none;
    color: var(--color-text-muted);
    transition: transform var(--dur-base) var(--ease-out);
}
.feed-conditions__toggle:checked ~ .feed-conditions__summary .feed-conditions__chevron {
    transform: rotate(180deg);
}

.feed-conditions__controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
/* Валюта — внутри денежного поля, как знак раньше, но кликабельная:
   короткий select без рамки, прижат к правому краю поля. */
.feed-conditions__currency {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    transform: translateY(-50%);
    width: auto;
    padding: 0 var(--space-4) 0 var(--space-2);
    border: 0;
    background: transparent;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.feed-conditions__money .feed-conditions__input { padding-right: 4.25rem; }
/* Поле мест не наследует лишний воздух chips-input'а: подпись — той же
   строкой, что у соседних групп. */
/* Ряд «Ваши места» и подсказки — ПОД полем, а не над ним: подпись группы
   обязана стоять на одной строке с подписями соседей, иначе три группы
   читаются как три разных блока. */
.feed-conditions__group--places .chips-input { display: flex; flex-direction: column; gap: var(--space-2); }
.feed-conditions__group--places .chips-input__label { order: 1; margin: 0; }
.feed-conditions__group--places .chips-input__box { order: 2; }
.feed-conditions__group--places .chips-input__picks { order: 3; margin: 0; }
.feed-conditions__group--places .chips-input__suggestions { order: 4; }
.feed-conditions__group--places .field__hint { order: 5; }
.feed-conditions__group--places .chips-input__label {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.feed-conditions__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.feed-conditions__label {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.feed-conditions__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
/* Сумма и знак валюты — одно поле на глаз: знак живёт внутри рамки справа, а
   не отдельной подписью рядом, иначе он читается как самостоятельный контрол. */
.feed-conditions__money { position: relative; display: block; }
.feed-conditions__money .feed-conditions__input { padding-right: var(--space-6); }
.feed-conditions__unit {
    position: absolute;
    top: 50%;
    right: var(--space-3);
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    pointer-events: none;
}
/* Кнопка на всю ширину: с JS условия применяются сами, но большим пальцем по
   узкой кнопке в конце длинной панели не попадают. */
.feed-conditions__apply { width: 100%; justify-content: center; }
/* Группа кнопки живёт в общем ряду и выравнивается по полям, а не по их
   подписям: у неё своей подписи нет. */
.feed-conditions__group--apply { justify-content: flex-end; }
.feed-conditions__foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}
.feed-conditions__foot--quiet {
    border-top: 0;
    margin-top: var(--space-2);
    padding-top: 0;
}
.feed-conditions__note {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
/* Чипы-места переносятся построчно: мест бывает пять-шесть, и ряд с
   внутренней прокруткой прятал бы половину из них. Формат — ряд из четырёх
   значений, ему прокрутка подходит, местам — нет. */
.feed-conditions__places {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
/* Подпись географии: два факта рядом — где ищет профессия и куда метят цели.
   Жирным — сами места: их сравнивает глаз, подписи только называют стороны. */
.feed-conditions__where {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.feed-conditions__where-item { display: inline-flex; gap: var(--space-2); align-items: baseline; }
.feed-conditions__where-item b { color: var(--color-text); font-weight: 600; }
.feed-conditions__where-label { white-space: nowrap; }
.feed-conditions__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.feed-conditions__save { display: contents; }
/* «?» прижат к кнопке сохранения — он объясняет её, а не соседнюю. */
.feed-conditions__actions .concept-hint { margin-left: calc(-1 * var(--space-1)); }

@media (max-width: 767px) {
    /* Свёрнуто по умолчанию: панель фильтров не имеет права занимать первый
       экран целиком, отодвигая вниз то, ради чего человек пришёл. Раскрытие на
       checkbox, не на JS — тем же приёмом открывается боковое меню, и без
       скриптов оно работает. */
    .feed-conditions { padding: var(--space-3); }
    .feed-conditions__summary { display: flex; }
    .feed-conditions__form,
    .feed-conditions__foot { display: none; }
    .feed-conditions__toggle:checked ~ .feed-conditions__form {
        display: block;
        margin-top: var(--space-4);
    }
    .feed-conditions__toggle:checked ~ .feed-conditions__foot { display: flex; }
    /* Ряд форматов — своя горизонтальная прокрутка вместо переноса на две
       строки. Прокрутка внутренняя, страница по горизонтали не едет. */
    .feed-conditions .chip-radio {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(-1 * var(--space-3));
        padding-inline: var(--space-3);
    }
    .feed-conditions .chip-radio::-webkit-scrollbar { display: none; }
    .feed-conditions .chip-radio__option { flex: none; }
}

@media (min-width: 768px) {
    /* Десктоп: условия в один ряд — их читают слева направо как фразу
       «формат · от суммы · в городе», а не как форму из трёх вопросов. */
    .feed-conditions__controls {
        flex-direction: row;
        flex-wrap: wrap;
        /* Выравнивание по верху: у всех групп подпись на одной строке, а
           контролы — на следующей. flex-end ломался, как только у одной
           группы появлялась подсказка под полем. */
        align-items: flex-start;
        gap: var(--space-5);
    }
    .feed-conditions__group--places { flex: 1 1 22rem; min-width: 0; }
    .feed-conditions__group--field { width: 13rem; }
    /* Кнопка — в конце ряда контролов, на одной линии с полями: она
       завершает фразу «где · как · за сколько». Отдельной строкой ниже она
       читалась как случайно оставшийся элемент. */
    .feed-conditions__group--apply { margin-left: auto; align-self: flex-start; padding-top: 1.55rem; }
    .feed-conditions__apply { width: auto; }
    .feed-conditions__foot {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    /* Подпись сжимается первой: три действия справа должны стоять одной
       строкой, иначе «Все предпочтения» переносится под остальные и ряд
       разъезжается на два уровня. */
    /* Подвал — только действия, прижаты вправо: прозу заменил «?» рядом с
       «Сохранить в профессию». */
    .feed-conditions__actions { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; }
}
/* Широкий экран: «где» тянулась на 22rem и выдавливала «Показать» на вторую
   строку — в панели оставалась пустая середина с одинокой кнопкой справа.
   Сетка держит фразу «где · как · за сколько → показать» в одну строку. */
@media (min-width: 1200px) {
    .feed-conditions__controls {
        display: grid;
        grid-template-columns: minmax(14rem, 1fr) auto 13rem auto;
        align-items: start;
        column-gap: var(--space-5);
    }
    .feed-conditions__group--places,
    .feed-conditions__group--field,
    .feed-conditions__group--apply { width: auto; flex: none; margin: 0; }
}

/* --- Feed grid --- */
.job-feed__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 768px) {
    .job-feed__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
    .job-feed__grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Job card ---
   «Технологичная точность», editorial-ревизия: score — мини-кольцо-прибор
   (conic-gradient, перекличка с ui_score_ring detail-страницы) + match-rail —
   hairline-шкала совпадения по верхней кромке (width = score%); тон accent
   при ≥60 и нейтральный ниже — лента измеряет совпадение, а не кричит
   danger-краской. Тихие mono-факты подняты eyebrow-строкой над serif-
   заголовком (editorial-топология: eyebrow → display → intro); зарплата —
   главный факт mono-строкой над hairline-подчерком. */
.job-card {
    --rail-color: var(--color-text-muted);
    /* Карточка — контейнер для запросов по ширине: в сетке она узкая и на
       большом экране, поэтому решения о плотности футера принимаются по её
       собственной ширине, а не по ширине окна. */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.job-card--t-accent { --rail-color: var(--color-accent); }
.job-card:hover,
.job-card:focus-within {
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    transform: translateY(-2px);
}

/* Match-rail — приборная шкала совпадения по верхней кромке карточки:
   ширина = score% (--pct с article), тон синхронизирован с кольцом.
   Считывается до цифр — лента сортируется взглядом. */
.job-card__rail {
    display: block;
    height: 3px;
    width: calc(var(--pct, 0) * 1%);
    background: linear-gradient(90deg,
        var(--rail-color),
        color-mix(in srgb, var(--rail-color) 55%, transparent));
    border-radius: 0 2px 2px 0;
    transition: width 0.4s ease;
}

/* Eyebrow — тихие mono-факты над заголовком (формат · локация · занятость),
   разделитель — типографский middot через ::before. */
.job-card__eyebrow {
    margin: 0 0 var(--space-1);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}
.job-card__eyebrow-item { white-space: nowrap; }
.job-card__eyebrow-item + .job-card__eyebrow-item::before {
    content: "\00B7";
    margin-right: var(--space-2);
    color: var(--color-border);
}
.job-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    color: inherit;
    text-decoration: none;
    flex: 1 1 auto;
}
.job-card__body:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}
.job-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.job-card__title-block { min-width: 0; }
.job-card__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0;
    color: var(--color-text);
    transition: color 0.2s ease;
}
.job-card:hover .job-card__title { color: var(--color-accent); }
.job-card__company {
    margin: var(--space-2) 0 0;
    gap: var(--space-2);
}

/* Score ring — мини-прибор совпадения. Дуга conic-gradient на --pct (0..100),
   внутренний диск radial-gradient'ом; тон дуги по классу. */
.job-card__ring {
    --ring-size: 54px;
    --ring-w: 4px;
    --ring-color: var(--color-text-muted);
    flex: none;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side,
            var(--color-surface-elevated) calc(100% - var(--ring-w) - 1px),
            transparent calc(100% - var(--ring-w))),
        conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--color-border-soft) 0);
    transition: filter 0.2s ease;
}
.job-card__ring--accent { --ring-color: var(--color-accent); }
.job-card:hover .job-card__ring--accent { filter: drop-shadow(0 0 6px rgba(var(--color-accent-rgb), 0.35)); }
.job-card__ring-num {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.job-card__ring-num sup {
    font-size: 0.58em;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 1px;
}
/* Процент разбора подборки дня вместо процента match: кольцо то же, под ним
   подпись «по разбору» — человек видит, чьё это число. */
.job-card__score {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}
.job-card__score-caption {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Зарплата — главный факт карточки: mono-строка над hairline-подчерком;
   inline-badge «оценка» (saved-карточка) выравнивается по базовой линии. */
.job-card__salary {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-soft);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* Компактный чип — остаётся для comp-карточки detail-страницы
   (bonus / equity / sign-on). В карточках ленты чипы заменены на
   тихие .job-card__fact. */
.job-card__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface-overlay);
    color: var(--color-text-soft);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.job-card__summary {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Skills. */
/* Лейбл и чипы — в одну строку. Отдельная строка-этикетка над единственным
   чипом занимала столько же места, сколько сам сигнал, и в ленте из двадцати
   карточек это двадцать пустых строк. */
.job-card__skills {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}
.job-card__skills-label {
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}
.job-card__skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Footer. */
.job-card__foot {
    display: flex;
    align-items: center;
    /* Перенос обязателен: в двухколоночной сетке на планшете дата, ряд
       вердиктов и ссылка не помещаются в строку, и ссылка уезжала под
       правый край карточки — обрезанной ровно на слове «Подробнее». */
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
.job-card__posted {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.job-card__cta {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    white-space: nowrap;
    gap: var(--space-1);
    min-height: 44px;
    padding: 0 var(--space-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}
.job-card__cta:hover { color: var(--color-accent-soft); }
.job-card__cta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-md); }
.job-card__cta-arrow { transition: transform 0.2s ease; }
/* Слово «Подробнее» прячется по ширине САМОЙ карточки, а не окна: в сетке из
   трёх колонок карточка узкая и на большом экране, и там дата, ряд вердиктов и
   надпись в строку не помещаются — ссылка переносилась вниз, добавляя карточке
   высоты ради слова, которое дублирует клик по карточке. Остаётся стрелка, имя
   ссылки живёт в aria-label. Браузер без container queries просто оставит
   надпись — это прежнее поведение, не поломка. */
@container (max-width: 420px) {
    .job-card__cta-text { display: none; }
}
.job-card:hover .job-card__cta-arrow { transform: translateX(3px); }

/* Ряд вердиктов ленты (ui_job_feedback): 👍/👎/скрыть в футере карточки.
   Тихие icon-кнопки (телеметрия, не primary-CTA); tap-target 44px держится
   min-размерами. Active-состояние — accent-заливка тоном бейджа. */
.job-feedback {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.job-feedback__form { display: inline-flex; margin: 0; }
.job-feedback__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.job-feedback__btn:hover {
    color: var(--color-text);
    background: var(--color-surface-overlay);
}
.job-feedback__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.job-feedback__btn--active {
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.12);
}
.job-feedback__btn--active:hover { color: var(--color-accent); }
.job-feedback__btn--hide:hover { color: var(--color-danger); }

/* --- Job detail --- */
.job-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-top: 0;
}
@media (min-width: 900px) {
    .job-detail { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
}
.job-detail__main { display: flex; flex-direction: column; gap: var(--space-4); }
.job-detail__side { display: flex; flex-direction: column; gap: var(--space-4); }

.job-detail__score-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
}
.job-detail__score-card--strong  { border-left-color: var(--color-sage); }
.job-detail__score-card--good    { border-left-color: var(--color-teal); }
.job-detail__score-card--warning { border-left-color: var(--color-amber); }
.job-detail__score-card--danger  { border-left-color: var(--color-coral); }
.job-detail__score-num {
    font-family: var(--font-sans);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.job-detail__score-unit { font-size: 1.25rem; color: var(--color-text-soft); }
.job-detail__score-label {
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}
.job-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.job-detail__panel {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
}
/* Заголовок панели — канон form-group eyebrow (см. design-system §Form-group
   typography): sans 0.6875rem / 700 / 0.1em / uppercase / muted. */
.job-detail__panel-title {
    margin: 0 0 var(--space-3);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

/* Breakdown — оси матчинга в каноне quality-блоков профессии: <dl> из
   ui_resume_quality_row (label + bold mono NN/100 + accent-bar). */
/* Ролевой grounding над осями «Почему подходит»: одна строка «кем вы метите
   быть» против «кем зовут». Совпадение — sage-тон (как matched-чипы навыков),
   расхождение — нейтральный slate: это не ошибка пользователя, а факт. */
.job-role {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    background: var(--color-surface-overlay);
}
.job-role__icon { flex: none; color: var(--color-text-muted); margin-top: 2px; }
.job-role__text { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-muted); }
.job-role__text strong { color: var(--color-text); font-weight: 600; }
.job-role--match { border-color: rgba(var(--color-accent-rgb), 0.35); }
.job-role--match .job-role__icon { color: var(--color-accent); }

.job-breakdown {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.job-detail__back { margin: var(--space-2) 0 var(--space-5); }

/* ==========================================================================
   Job detail v2 — /app/jobs/{id} editorial layout. Left rail (sticky desktop)
   + tabbed right column (no-JS radio tabs). Mobile-first: одна колонка ≤375px,
   two-column на десктопе. Токены-only.
   ========================================================================== */

/* Sticky action bar (save / apply). */
/* Прежний sticky .job-actions удалён: действия вакансии живут в eyebrow-row
   ui_section_header (канон unified header; components/_job_actions.html). */

/* Rail / body grid — левый rail первым на мобиле, sticky на десктопе. */
.job-detail__rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}
.job-detail__body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
@media (min-width: 900px) {
    .job-detail { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); align-items: start; }
    .job-detail__rail { position: sticky; top: var(--space-4); }
}

/* Identity badges. */
.job-detail__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }

/* Score panel — центрирует ring. */
.job-detail__score-panel { display: flex; justify-content: center; }

/* Panel head «Почему подходит» — канон quality-панелей профиля
   (.profile-analysis__panel-head): ui_icon_plate + display-title + lead,
   hairline-подчерк. */
.job-detail__panel-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid color-mix(in srgb, currentColor 6%, transparent);
}
/* --row: компактная строка «заголовок + badge» (пометка «автоматический
   перевод» на fallback-тексте вакансии) — без icon-plate и hairline-подчерка. */
.job-detail__panel-head--row {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: var(--space-2);
}
.job-detail__panel-head--row .job-detail__panel-title { margin: 0; }
.job-detail__panel-titles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.job-detail__panel-heading {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.125rem; /* единый card-title размер (профессии / ui-card) */
    font-weight: 600;
    line-height: 1.3;
}
.job-detail__panel-lead {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem; /* единый card-lead размер */
    line-height: 1.5;
    max-width: 60ch;
}

/* Compensation card. */
.job-comp__amount {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
}
.job-comp__reason {
    margin: var(--space-2) 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}
.job-comp__empty { margin: 0; color: var(--color-text-muted); font-size: 0.875rem; }
.job-comp__percentile {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    font-size: 0.8125rem;
    color: var(--color-sage);
}
.job-comp__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Meta description list. */
.job-meta { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.job-meta__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.job-meta__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.job-meta__value { margin: 0; font-size: 0.875rem; color: var(--color-text); text-align: right; }
.job-detail__source { margin-top: var(--space-3); }
/* Панель «О вакансии» носит и общий класс строки меток .job-detail__meta
   (flex с переносом): список вставал в ней отдельной строкой шириной по
   содержимому, и при коротких значениях («Астана», «IT») справа оставалась
   пустая полоса. В панели — столбец: заголовок, список во всю ширину,
   ссылка на источник. */
.job-detail__panel.job-detail__meta { flex-direction: column; flex-wrap: nowrap; gap: var(--space-3); }
.job-detail__panel.job-detail__meta > .job-meta { align-self: stretch; }
.job-detail__panel.job-detail__meta > .job-detail__source { margin-top: 0; }
/* «Открыть первоисточник» — призрачная кнопка с полями: её текст стоял на
   поле правее заголовка и подписей. Отрицательный отступ на ширину поля
   ставит текст на общий левый край панели, а зона нажатия остаётся. */
.job-detail__source { align-self: flex-start; margin-left: calc(-1 * var(--space-3)); }

/* --- No-JS tabs (radio + :checked sibling panels) --- */
.job-tabs { display: flex; flex-direction: column; gap: var(--space-4); }
.job-tabs__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.job-tabs__strip {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.job-tabs__strip::-webkit-scrollbar { display: none; }
/* Таб — фирменный facet-nav вид (зеркало .profile-subnav__link: mono
   uppercase + accent underline), не bespoke-шрифт. */
.job-tabs__tab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.job-tabs__tab:hover { color: var(--color-text); }
/* Панели скрыты по умолчанию; активны при :checked своего radio. Селекторы
   структурные (по порядку radio в группе), а не по конкретным id — один и тот
   же CSS обслуживает detail-страницу и styleguide-демо: 1-й radio → overview,
   2-й radio → full. */
.job-tabs__panel { display: none; flex-direction: column; gap: var(--space-4); }
.job-tabs__radio:nth-of-type(1):checked ~ .job-tabs__panel--overview,
.job-tabs__radio:nth-of-type(2):checked ~ .job-tabs__panel--full,
.job-tabs__radio:nth-of-type(3):checked ~ .job-tabs__panel--third { display: flex; }
.job-tabs__radio:nth-of-type(1):checked ~ .job-tabs__strip label:nth-child(1),
.job-tabs__radio:nth-of-type(2):checked ~ .job-tabs__strip label:nth-child(2),
.job-tabs__radio:nth-of-type(3):checked ~ .job-tabs__strip label:nth-child(3) {
    /* Активный — как .profile-subnav__link--active: тёмный текст + accent
       underline (не accent-текст: закон 6 — accent тратится точечно). */
    color: var(--color-text);
    font-weight: 600;
    border-bottom-color: var(--color-accent);
}
/* Keyboard focus visible на radio → подсветка соответствующего таба. */
.job-tabs__radio:focus-visible ~ .job-tabs__strip label {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Why-match skill groups. */
.job-detail__skill-groups { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.job-detail__skill-group { display: flex; flex-direction: column; gap: var(--space-2); }
/* Панель «Навыки»: две группы (обязательные / будет плюсом) — прямые сиблинги
   без обёртки-flex, поэтому нужен явный отступ между ними («БУДЕТ ПЛЮСОМ»
   прижимался к чипам первой группы). */
.job-detail__panel > .job-detail__skill-group + .job-detail__skill-group { margin-top: var(--space-4); }
.job-detail__lead { margin: 0; line-height: 1.6; color: var(--color-text-soft); }

/* Fact lists (requirements / responsibilities / qualifications / benefits). */
.job-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* Раскрытый хвост длинного списка продолжает его тем же шагом строк. */
.job-facts__more[open] > .job-facts { margin-top: 0; }
.job-facts__more { margin-top: var(--space-2); }
.job-facts__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-soft);
}
/* Тонкий dot-маркер вместо повторяющейся иконки на каждой строке (иконка
   секции живёт в plate заголовка). Длинный список читается чисто. */
.job-facts__row::before {
    content: "";
    flex: none;
    width: 5px; height: 5px;
    margin-top: 0.5em;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}

/* Source URLs list. */
.job-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.job-sources__row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.job-sources__link {
    color: var(--color-accent);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}
.job-sources__link:hover { text-decoration: underline; }

/* Смежная роль — нейтральный тон (факт, не довод): семейство то же, но роль
   другая. Расхождение — предупреждающий: с round 31 роль участвует в
   ранжировании, и строка объясняет позицию вакансии в ленте. */
.job-role--adjacent { border-color: var(--color-border); }
.job-role--diverged { border-color: rgba(var(--color-amber-rgb), 0.35); }
.job-role--diverged .job-role__icon { color: var(--color-warning); }

/* ── Company badge ─────────────────────────────────────────────────────────
   Работодатель на карточке вакансии: логотип-якорь, имя нормальным кеглем,
   мета одной приглушённой строкой. Единственная «дорогая» деталь — плита
   логотипа: светлая подложка и мягкая тень отделяют чужую графику от нашей
   поверхности, не соревнуясь с ней за внимание. */
.company-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
/* Плита работодателя: монограмма-подложка и логотип поверх неё занимают одну
   и ту же клетку, поэтому размер живёт на обёртке, а слои её заполняют. */
.company-badge__figure {
    position: relative;
    flex: none;
    display: block;
    width: 36px;
    height: 36px;
}
.company-badge__logo,
.company-badge__monogram {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    object-fit: contain;
}
/* У логотипа НЕТ никакой рамки (ui-review, два захода): и солидный бордер, и
   полупрозрачный hairline читались «грязью» вокруг белых плашек источников.
   Белая плита без рамки на белой карточке — норма жанра (LinkedIn/Otta):
   границу задаёт сам знак. Пиксели источника отдаются как есть (прокси лишь
   заливает прозрачные углы цветом фона исходника — см. jobs.sanitizeLogo). */
.company-badge__monogram { border: 1px solid var(--color-text); }
/* Полей у картинки нет: их рисует прокси прямо в байтах. Padding здесь
   оставлял бы по периметру прозрачную рамку, сквозь которую просвечивала
   монограмма — знак выглядел бы обведённым чёрным. */
.company-badge__logo { padding: 0; }
/* Своего фона у картинки нет намеренно: плиту под знак подмешивает прокси
   (jobs.sanitizeLogo), а компаниям без логотипа он отдаёт прозрачный пиксель —
   тогда сквозь картинку видна монограмма, лежащая под ней. Фон здесь закрыл бы
   её пустым квадратом. */
.company-badge__logo { background: transparent; }
/* Монограмма — заглушка на месте логотипа, а не элемент интерфейса: акцентный
   цвет здесь спорил бы с настоящими логотипами соседних карточек и притягивал
   взгляд к тем компаниям, о которых мы знаем меньше. Чернильная плита читается
   как знак и одинаково ведёт себя рядом с любым логотипом. */
.company-badge__monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-surface);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}
.company-badge__body { flex: 0 1 auto; min-width: 0; }
.company-badge__name {
    margin: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.012em;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.company-badge__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-soft);
}
.company-badge__dot { color: var(--color-text-muted); }
.company-badge__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.company-badge__stars { display: inline-flex; gap: 1px; }
.company-badge__star { display: inline-flex; color: var(--color-border-strong); }
/* Закрашенная звезда — отдельный символ спрайта, а не CSS-заливка контурной:
   fill="none" стоит на самом symbol'е и наследование его не перебивает. */
.company-badge__star.is-on { color: var(--color-amber); }
.company-badge__site {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-soft);
    text-decoration: none;
    white-space: nowrap;
    /* Ссылка живёт в строке меты, поэтому кегль наследуется от неё; своя зона
       нажатия добирается вертикальными полями, не собственным размером. */
    padding: 2px 0;
}
.company-badge__site:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }

/* Крупный вариант — карточка вакансии, где работодатель это то, ради чего
   человек и открыл страницу. */
.company-badge--lg { gap: var(--space-4); }
.company-badge--lg .company-badge__figure { width: 52px; height: 52px; }
.company-badge--lg .company-badge__logo,
.company-badge--lg .company-badge__monogram { border-radius: var(--radius-lg); }
.company-badge--lg .company-badge__monogram { font-size: 1.35rem; }
.company-badge--lg .company-badge__name {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.018em;
    white-space: normal;
}
.company-badge--lg .company-badge__meta { margin-top: 4px; font-size: 0.875rem; }

/* В ленте монограмма меньше: она якорь для сканирования, а не герой карточки. */
.job-card__company .company-badge__figure { width: 28px; height: 28px; }
.job-card__company .company-badge__monogram,
.job-card__company .company-badge__logo { border-radius: var(--radius-sm); }
.job-card__company .company-badge__monogram { font-size: 0.8rem; }
.job-card__company .company-badge__name { font-size: 0.875rem; font-weight: 500; }

/* Работодатель на карточке вакансии — отдельный слой между заголовком и
   разбором: мягкая подложка отделяет его от текста, не превращая в баннер.
   Ширина ограничена мерой чтения — растянутая на весь экран строка теряет
   связь между именем слева и ссылкой справа. */
/* Шапка вакансии — кто нанимает и на каких условиях в одной плашке. */
.job-detail__hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    background: var(--color-surface-2, rgba(0, 0, 0, 0.02));
}
.job-detail__hero .company-badge__logo {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Источник суммы в ленте — приписка, а не бейдж: она обязана быть видна, но
   не должна спорить с самой цифрой. */
.job-card__salary { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.job-card__salary-source {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
}
/* «Оценка ИИ» — плашка, а не жёлтый текст. Жёлтым кеглем 11px на белом фоне
   подпись не добирала контраст WCAG AA, а повторяясь в каждой карточке, ещё и
   переставала быть сигналом. Фон-подложка решает и то и другое: контраст даёт
   тёмный текст, а отличие от «указана» — сама плашка. */
.job-card__salary-source--est {
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

/* Текст только для скринридера: звёзды рисуются графикой, а точная оценка
   обязана оставаться доступной. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* AI-панель разбора: тот же язык, что у редакторских заметок модели
   (§AI actions) — accent gradient-hairline вместо обычной рамки, aurora в
   верхнем углу и свечение у sparkles. Блок, который посчитала модель, обязан
   отличаться от блока с фактами работодателя. */
.job-detail__panel--ai {
    position: relative;
    isolation: isolate;
    border: 1.5px solid transparent;
    background:
        radial-gradient(140% 120% at 100% 0%,
            rgba(var(--color-accent-rgb), 0.07), transparent 55%) padding-box,
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(150deg,
            rgba(var(--color-accent-rgb), 0.55),
            rgba(var(--color-accent-rgb), 0.12) 45%,
            rgba(var(--color-accent-rgb), 0.55)) border-box;
    box-shadow: 0 1px 14px -7px rgba(var(--color-accent-rgb), 0.45);
}
.job-detail__panel--ai .icon-plate .icon {
    filter: drop-shadow(0 0 3px rgba(var(--color-accent-rgb), 0.5));
}

/* Панель совпадения: тон задаёт сам блок, кольцо стоит в нём, а не в белой
   коробке — коробка вокруг одного виджета читается как пустая. */
.job-detail__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 90% at 50% 0%, var(--score-tint, transparent), transparent 70%),
        var(--color-surface);
}
.job-detail__score--strong  { --score-tint: rgba(var(--color-sage-rgb, 34, 160, 110), 0.13); }
.job-detail__score--good    { --score-tint: rgba(var(--color-accent-rgb), 0.10); }
.job-detail__score--warning { --score-tint: rgba(var(--color-amber-rgb), 0.12); }
.job-detail__score--neutral { --score-tint: rgba(15, 23, 42, 0.05); }
/* Планшет — единственная ширина, где рейл уже развернулся в полосу, но ещё не
   стал колонкой: кольцо по центру пустой полосы съедало пол-экрана высоты. В
   этом промежутке кладём его в ряд с вердиктом. */
@media (min-width: 640px) and (max-width: 899px) {
    .job-detail__score {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--space-5);
        padding: var(--space-5);
    }
}
.job-detail__score-verdict {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

/* ==========================================================================
   Profession card (ui_profession_card) — направление поиска в списке.

   Реворк 02.10. Прежняя карточка была сводкой: вход внутрь — текстовой
   ссылкой в подвале, состав строк свой у каждой, пять языков статуса сразу.
   Теперь это объект с фиксированной анатомией — имя, состояние, ровно три
   факта, подвал, — и цель перехода у него вся плитка целиком.
   ========================================================================== */
.profession-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 720px) {
    /* auto-fit, не auto-fill: при двух профессиях и трёх слотах auto-fill
       оставлял пустую колонку справа, и сетка читалась как оборванная. */
    .profession-grid { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
}
/* Карточки ряда одной высоты. Прежде ряд выравнивался по верху, потому что у
   карточек был разный СОСТАВ строк и общая высота оставляла внутри дыры.
   Состав теперь фиксирован, дыре взяться неоткуда, и ровный низ ряда снова
   стоит того: три карточки с низами вразнобой читаются как три разных
   виджета, а не как три экземпляра одного. */
.profession-grid > li { display: flex; }
.profession-card {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.profession-card--stale      { --state-tone: var(--color-amber); }
.profession-card--failed     { --state-tone: var(--color-danger); }
.profession-card--processing { --state-tone: var(--color-accent); }
.profession-card--questions  { --state-tone: var(--color-teal); }
.profession-card--ready      { --state-tone: var(--color-sage, #6db18a); }
/* Рабочее направление — то, по которому строится лента вакансий. Кольцо
   акцента вокруг карточки, а не заливка: это признак, а не состояние работы. */
.profession-card.is-active {
    border-color: rgba(var(--color-accent-rgb), 0.45);
    box-shadow: var(--shadow-sm), 0 0 0 3px rgba(var(--color-accent-rgb), 0.10);
}

/* ── Вся плитка — цель перехода ──
   Растянутая ссылка: псевдоэлемент имени покрывает карточку, вторичные
   элементы поднимаются над ним. Текстовая ссылка «Открыть» в подвале этого не
   давала: 13px серым под кнопкой, и человек не догадывался, что у направления
   есть своя страница. */
.profession-card__link { position: static; color: inherit; text-decoration: none; }
.profession-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.profession-card__actions,
.profession-card__resumes { position: relative; z-index: 2; }
/* Меню — ВЫШЕ остальных поднятых элементов карточки. `position: relative` с
   z-index создаёт контекст наложения, и собственный z-index панели (60) внутри
   него ничего не значит: метка «17 резюме» с тем же уровнем 2, но позже в
   DOM, рисовалась поверх открытого меню. */
.profession-card__menu-wrap { position: relative; z-index: 5; }
/* Панель уже общих 360px: карточка шириной 368px, и панель вылезала за её
   левый край. Процентами ширину здесь не задать — её родитель шириной с
   кнопку меню, и `max-width: 100%` схлопывал панель в 36px. Правило только для
   десктопа: на узком экране панель — нижний лист во всю ширину окна. */
@media (min-width: 768px) {
    .profession-card__menu-wrap .dropdown__panel { width: 15rem; max-width: none; }
}

/* ВНИМАНИЕ: отклик на наведение — только рамка и тень. `transform` здесь
   запрещён, хотя подъём на пиксель просится: он делает карточку композитным
   слоем, и выпадающее меню внутри неё обрезается по её же нижней границе.
   Снаружи это выглядело так, что у меню пропадает последний пункт — ровно
   тогда, когда человек навёл мышь, то есть всегда. Нужен подъём — добавляйте
   его тенью. */
.profession-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
    .profession-card { transition: none; }
}
/* Фокус читается на всей карточке, а не на строке имени: нажимаемая зона — вся
   плитка, и обводка обязана совпадать с ней. */
.profession-card:has(.profession-card__link:focus-visible) {
    outline: 2px solid var(--color-focus, var(--color-accent));
    outline-offset: 2px;
}
.profession-card__link:focus-visible { outline: none; }
@supports not selector(:has(*)) {
    .profession-card__link:focus-visible { outline: 2px solid var(--color-focus, var(--color-accent)); outline-offset: 2px; }
}

/* ── Шапка ── */
.profession-card__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--space-2);
    row-gap: 2px;
}
.profession-card__name {
    grid-column: 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
/* Стрелка — единственный видимый знак «отсюда уходят внутрь». Тихая в покое,
   акцентная и сдвинутая при наведении на плитку. */
.profession-card__go {
    flex: none;
    color: var(--color-text-subtle, var(--color-text-muted));
    transition: color 0.18s ease, transform 0.18s ease;
}
.profession-card:hover .profession-card__go {
    color: var(--color-accent);
    transform: translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
    .profession-card__go { transition: none; }
    .profession-card:hover .profession-card__go { transform: none; }
}
.profession-card__role {
    grid-column: 1;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}
.profession-card__state {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--state-tone, var(--color-text-muted));
}
.profession-card__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--state-tone, var(--color-text-muted));
}
/* Кнопка меню центрируется по СТРОКЕ ИМЕНИ, а не по верху шапки: зона нажатия
   44px выше строки имени вдвое, и без вычета половины разницы «...» висели
   заметно над заголовком, читаясь как чужой элемент. */
.profession-card__menu-wrap { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
.profession-card__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    margin: -11px calc(var(--space-2) * -1) 0 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}
.profession-card__menu:hover { background: var(--color-surface-sunken, rgba(0, 0, 0, 0.04)); color: var(--color-text); }

/* ── Три факта, всегда три ──
   Подпись слева фиксированной колонкой, значение справа. Пустое значение
   печатается прочерком: исчезающая строка двигает соседние, и ряд карточек
   перестаёт читаться столбцом. */
.profession-card__facts {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    font-variant-numeric: tabular-nums;
}
.profession-card__fact {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border-soft);
    font-size: 0.8125rem;
    line-height: 1.4;
}
.profession-card__fact:first-child { border-top: 0; padding-top: 0; }
.profession-card__fact dt {
    margin: 0;
    color: var(--color-text-muted);
}
.profession-card__fact dd {
    margin: 0;
    min-width: 0;
    color: var(--color-text);
}
.profession-card__fact dd b {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.profession-card__fact-of { color: var(--color-text-muted); }
.profession-card__fact-note {
    margin-left: 6px;
    color: var(--color-text-muted);
}
.profession-card__fact-empty { color: var(--color-text-subtle, var(--color-text-muted)); }
/* Расхождение с целями — приписка к факту, своей строкой под значением: в
   строку она не влезает ни на одном реальном наборе городов. */
.profession-card__fact-warn {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--color-amber-strong, var(--color-amber));
}

/* ── Подвал ──
   Прижат книзу, чтобы у карточек ряда действия стояли на одной линии. */
.profession-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
    min-height: var(--tap-min);
}
.profession-card__marks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    font-size: 0.8125rem;
}
.profession-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.profession-card__tag--active {
    border-color: rgba(var(--color-accent-rgb), 0.35);
    background: rgba(var(--color-accent-rgb), 0.08);
    color: var(--color-accent);
}
.profession-card__resumes {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    color: var(--color-text-muted);
    text-decoration: none;
}
.profession-card__resumes:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.profession-card__actions { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.profession-card__actions form { margin: 0; }

/* Сводка исхода над списком направлений — тихая строка, а не карточка: это
   ответ экрана, но не объект, и в рамке он читался бы как ещё один блок среди
   карточек направлений. Цифры табличные — они стоят рядом с теми же числами на
   карточках ниже. */
.profiles-outcome {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}
.profiles-outcome__icon {
    flex: none;
    color: var(--color-text-muted);
    transform: translateY(2px);
}

/* «Добавить должность» в разделе «Резюме» (план слияния §3 п. 3): поле и до
   трёх должностей, которые разбор увидел в карьере. Бывший блок
   предложенных направлений списка профессий — та же карточка. */
.role-add__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}
.role-add__form .field { flex: 1 1 16rem; margin: 0; min-width: 0; }
.role-add__suggest { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border-soft); }
.role-add__suggest-title {
    margin: 0 0 var(--space-1);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-soft);
}
/* Должности сеткой: одна колонка на телефоне, с 560px по ширине блока — две
   (контейнерный запрос: колонка списка уже экрана, когда справа рейл). */
.role-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    container-type: inline-size;
}
.resume-group .role-grid { margin-top: var(--space-3); }
/* «Другие должности» под плитой — новым разделом, а не продолжением плиты. */
.resumes-ws__hero > .resume-group { margin-top: var(--space-4); }
/* Строка карточки должности: пункты разделены зазором, а не точкой — у
   состояния документа своя точка-цвет, и разделитель при переносе вставал в
   начало строки. */
.resume-card--role .resume-card__meta { column-gap: var(--space-3); }
.resume-card--role .resume-card__meta > * + *::before { content: none; }
@container (min-width: 560px) {
    .role-grid > li { min-width: 0; }
}
@media (min-width: 720px) {
    .role-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
}
.resume-card__form { display: contents; }
/* Карточка должности в сетке «Другие должности» (resume_card_role_tile,
   04.11) — анатомия карточки должности маршрута «Обзора» и карты
   (.route-card): метка вердикта и состояние документа сверху, имя, факты
   поиска, «Готовность» полосой ui_stat_bar у нижнего края. Карточки ряда —
   одной высоты, действие — под чертой внизу. */
.role-grid > li, .other-roles__grid > li { display: flex; }
.role-tile .route-card__tag { display: inline-flex; align-items: center; gap: 4px; }
.role-tile .route-card__tag > .icon { flex: none; }
.role-tile { flex: 1; gap: 0; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.role-tile:has(> .role-tile__link:hover) { border-color: var(--color-border-strong); }
/* Только что добавленная должность — той же акцентной рамкой, что свежая
   карточка резюме (переход после «Добавить должность» к ней). */
.role-tile--fresh { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.role-tile__link { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; color: inherit; text-decoration: none; }
.role-tile__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-sm); }
.role-tile__link:hover .role-tile__title { color: var(--color-accent); }
.role-tile__title { font-size: 1rem; }
.role-tile__doc { align-items: center; color: var(--color-text); }
.role-tile__doc > .resume-card__dot { align-self: center; margin: 0 3px; }
.role-tile__facts { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-size-xs); line-height: 1.45; color: var(--color-text-soft); }
.role-tile__fact { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.role-tile__fact > .icon { flex: none; margin-top: 2px; color: var(--color-text-muted); }
.role-tile__fact--quiet { color: var(--color-text-muted); }
.role-tile .route-card__stats { padding-top: var(--space-2); }
/* Зона действия — высотой кнопки, у какой бы карточки ряда ни стояла
   строка текста («Мест нет · Освободить место»): иначе разделитель и полоса
   «Готовность» над ним в соседних карточках вставали на разной высоте. */
.role-tile__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); box-sizing: content-box; min-height: var(--tap-min); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-soft, var(--color-border)); }
@media (min-width: 768px) { .role-tile__action { min-height: 36px; } }
.role-tile__action .resume-card__no-slot { min-height: 0; font-size: var(--font-size-xs); }
/* Названная должность: оценка, под ней цена, ниже — что рынок просит. */
.role-named { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-5); }
.role-named__assess { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; max-width: 48rem; }  /* одна фраза и кнопка во всю ширину читались пустотой */
.role-named__no-market { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-soft); max-width: 65ch; }

/* Предложение, а не список: ОДНА карточка с заголовком и строками внутри.
   Прежде пунктирная рамка блока оборачивала три карточки со своими рамками —
   рамка в рамке, два уровня обводок на одном смысле. Правый край общий с
   сеткой направлений: своя колонка в 52rem обрывала блок на трёх четвертях
   экрана, и страница читалась как два разных макета один под другим. */
/* Рамку и раскрытие даёт .career-entry-add (строка «+ Добавить …» после
   списка, как на «Опыте»); здесь — только содержимое формы. */
/* Недостающие требования (ui_gap_map): на телефоне сразу пять, остальные —
   тем же «Ещё N» на месте; у сводки два числа. */
@media (max-width: 719.98px) {
    .gap-map__narrow-more, .gap-map__count-wide { display: none; }
    .gap-map__group:has(> .gap-map__more[open]) .gap-map__narrow-more { display: revert; }
}
@media (min-width: 720px) {
    .gap-map__count-narrow, .gap-map__more--narrow { display: none; }
}
.role-entry[open] { gap: var(--space-3); }
.resume-group > .role-entry:first-child { margin-top: 0; }
.role-entry[open] .role-add__lead { margin: 0; }
/* Экран без должностей: «Добавить должность» и есть экран — одна карточка
   с вопросом и полем, без строки-раскрытия и «Отмены». */
.role-entry--only { display: flex; flex-direction: column; gap: var(--space-3); margin-top: 0; padding: var(--space-5) var(--space-4); border-style: solid; background: var(--color-surface); }
.role-entry--only > [data-fact="role-add"] { display: flex; flex-direction: column; gap: var(--space-3); }
.role-entry--only .role-add__lead { margin: 0; }
.role-entry__title { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text); }
.role-add__lead {
    margin: 4px 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-soft);
    max-width: 52ch;
}
.role-add__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* Имя и описание — друг под другом. В одну строку длина имени решала, сколько
   останется описанию: у одних предложений оно обрывалось посреди слова, у
   других влезало целиком, и ряд читался рваным. Кнопка не переносится и не
   растягивается — действие у всех строк на одной вертикали. */
.role-add__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border-soft);
}
.role-add__item:first-child { border-top: 0; padding-top: var(--space-2); }
.role-add__item:last-child { padding-bottom: 0; }
.role-add__ident {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.role-add__direction {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.role-add__item .btn { flex: none; }
/* Узкий экран: кнопка уходит ПОД текст. Рядом она забирала больше половины
   строки, и название роли рвалось на три строки там, где места хватало на
   одну — «Head of Architecture / Руководитель архитектуры» читалось лесенкой.
   Кнопка не растягивается на всю ширину: создание направления — не главное
   действие экрана, а предложение. */
@media (max-width: 560px) {
    .role-add__item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}
.role-add__role {
    font-weight: 600;
    color: var(--color-text);
}

/* Запись, на которую пришли по якорю с «Анализа», подсвечивается: иначе
   страница просто прокручивается, и человек не понимает, что именно ему
   показали. */
.career-timeline__item:target .career-timeline__card {
    border-color: rgba(var(--color-accent-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.12);
}
.career-timeline__item { scroll-margin-top: 96px; }

/* ==========================================================================
   Как описан опыт (exp-quality) — вердикт вместо табеля.
   Строка = запись опыта: название, период, задача словами, вес. Четыре оси
   живут в раскрытии: они нужны, когда человек уже выбрал, что чинить.
   ========================================================================== */
.exp-quality__verdict {
    margin: var(--space-3) 0 var(--space-3);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
}
.exp-quality__chevron { color: var(--color-text-muted); transition: transform 0.2s ease; flex: none; }
/* Задача словами, а не числом: «не хватает цифр» говорит, что делать, а «75%»
   не говорит ничего. */
.exp-quality__task {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--color-amber-rgb), 0.12);
    color: var(--color-amber);
    font-size: 0.8125rem;
    white-space: nowrap;
}
.exp-quality__off-target {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* ==========================================================================
   Обзор: совпадения недели, очередь внимания, спокойное состояние.
   Верх страницы отвечает на вопрос сессии — что случилось, пока меня не было.
   ========================================================================== */

/* Новость — единственный положительный канал экрана: очередь ниже говорит
   только о том, что сломалось, устарело или не движется. Крупное число слева:
   оно и есть повод вернуться. */
.dash-news {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid rgba(var(--color-accent-rgb), 0.28);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--color-accent-rgb), 0.10), transparent 60%),
        var(--color-surface-elevated);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.dash-news:hover { border-color: rgba(var(--color-accent-rgb), 0.5); transform: translateY(-1px); }
.dash-news__count {
    font-family: var(--font-sans);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
    flex: none;
}
.dash-news__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dash-news__title { font-weight: 600; color: var(--color-text); }
.dash-news__meta { font-size: 0.875rem; color: var(--color-text-soft); }
.dash-news__arrow { color: var(--color-accent); flex: none; }

/* «Рынок отвечает» — гипотеза о позиционировании из откликов человека.
   Тон нейтральный, не тревожный: это наблюдение, а не проблема, и красная
   рамка превратила бы его в обвинение. Числа моноширинные — их сравнивают
   между строками. */
.market-reply {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.market-reply__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.market-reply__eyebrow {
    margin: 0 0 2px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.market-reply__title { margin: 0; font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; }
.market-reply__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.market-reply__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--space-3);
    font-size: 0.875rem;
}
.market-reply__role { color: var(--color-text); }
.market-reply__stat {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-soft);
}
.market-reply__note { margin: 0; max-width: 70ch; font-size: 0.8125rem; color: var(--color-text-muted); }
.market-reply__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Своей меры у первого экрана больше нет: он снова двухколоночный, и 62rem,
   заложенные под одну колонку, оставляли главной колонке 616px — меньше, чем
   нужно карточке документа, чтобы показать его имя. Ширину держит общая мера
   канваса (`--canvas-max` на `page-shell`), та же, что у остальных страниц
   кабинета; строки внутри не растягиваются, потому что их держат сами колонки
   и меры блоков. */

/* Строка контекста: какой линзой человек смотрит и в каком режиме ищет.
   Тихая mono-строка под приветствием, а не блок: это подпись к экрану, и
   спорить за внимание с новостью и очередью она не должна. */
.dash-context {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--space-2);
    margin: calc(-1 * var(--space-3)) 0 0;
    /* Обычным регистром, а не mono-капсом: строка длинная («Активный поиск ·
       до вашего срока 11 недель»), и капс переносил её на три строки, где
       читается по складам. Капс хорош для двух слов, а не для предложения. */
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Виджет «Ваш путь» — третий вопрос экрана: куда я иду. Рамка мягче, чем у
   новости: путь не зовёт нажать прямо сейчас, он держит направление. */
.path-widget {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.path-widget__head { display: flex; flex-direction: column; gap: 4px; }
/* «Подробного плана пока нет» — тихая строка под шагом со ссылкой на досье. */
.path-widget__plan {
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft, var(--color-border));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.path-widget__plan-icon { color: var(--color-accent); }
.path-widget__plan a { font-weight: 600; }
.path-widget__eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Имя дороги — заголовок карточки в рейле: не крупнее заголовков разделов
   (17px). В 20px полужирным оно было самой громкой строкой колонки и спорило
   с цифрой готовности над ним. */
.path-widget__title { margin: 0; font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.path-widget__title-link { color: inherit; text-decoration: none; }
.path-widget__title-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.path-widget__meta {
    margin: 0;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-soft);
}
/* Маршрут станциями. Обёртка переносится строками: на 375px горизонтальная
   лента потребовала бы прокрутки, а маршрут — это ответ на «куда», который
   человек читает целиком, а не листает. */
.path-widget__route {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--space-3);
}
.path-widget__station {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
/* Разделитель — не стрелка-символ, а точка станции: стрелки между переносами
   строк указывают в никуда, а точка читается как остановка на любой строке. */
.path-widget__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border-strong, var(--color-border));
    flex: none;
}
.path-widget__station.is-current .path-widget__dot { background: var(--color-text-muted); }
.path-widget__station.is-current .path-widget__station-label { color: var(--color-text); }
.path-widget__station.is-target .path-widget__dot { background: var(--color-accent); }
.path-widget__station.is-target .path-widget__station-label { color: var(--color-text); font-weight: 600; }
.path-widget__step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}
/* Подпись шага — приглушённая, как и подпись виджета: два eyebrow в одной
   карточке, из которых один цветной, читаются как спор двух заголовков.
   Акцент в карточке достаётся действию, а не подписи над ним. */
.path-widget__step-kicker,
.vector-steps__kicker {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.path-widget__step--idle .path-widget__step-title { color: var(--color-text-muted); font-weight: 400; }
.path-widget__step-title { margin: 0; font-weight: 600; line-height: 1.35; }
/* Критерий закрытия — единственный длинный текст виджета; на широком экране
   без ограничения он растягивался на 110 знаков, вдвое шире предела чтения. */
.path-widget__step-acceptance { margin: 0; max-width: 68ch; font-size: 0.8125rem; color: var(--color-text-soft); }
.path-widget__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 2px; }
/* Остаток пересборок — самая тихая строка карточки: справка у действия, а не
   сообщение. На мобиле она иначе занимала две строки моноширинного текста и
   спорила по весу с критерием закрытия шага. */
.path-widget__quota { margin-top: 2px; font-size: 0.8125rem; }

.dash-attention { display: flex; flex-direction: column; gap: var(--space-2); }
/* Подзаголовок раздела первого экрана — обычный текст, а не mono-капс. В
   прототипе «Требует внимания» и «Что усилить» набраны как заголовки, и они
   ведут разделы, а не подписывают поля: капслоком в 11px раздел выглядел
   служебной пометкой над списком. */
.dash-attention__title,
.dash-do__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

/* Раскладка первого экрана — две колонки, как на карте: слева то, что требует
   решения (очередь внимания и «Что усилить»), справа свои вещи под рукой
   (документы, дорога, лента). На широком мониторе одноколоночный экран
   растягивал очередь на всю меру канваса и уводил «Ваш путь» на второй экран
   прокрутки, хотя места хватало обоим.

   Порог 1140px — тот же, что у карты: колонка кабинета уже забрала 232px, и на
   1024 главной колонке осталось бы меньше 500. Ниже порога поток один, и
   порядок разметки становится порядком чтения: решения, документы, действия.

   Слева — то, что человек решает и делает (очередь внимания и «Что усилить»),
   справа — где он находится (дорога и лента). Документы идут своим рядом во
   всю ширину под колонками: карточка документа складывает мету по медиазапросу
   ОКНА, а не контейнера, и в колонке 616px на широком мониторе оставалась в
   десктопном режиме — мета выдавливала имя документа в многоточие с третьего
   символа. Полная ширина — единственное место, где карточка выглядит так же,
   как в списке, а другого облика у документа быть не должно.

   `align-items: start` — рейл короче главной колонки и не обязан тянуться до
   её низа; липкости у него нет по той же причине, что на карте. */
.dash-layout { display: grid; gap: var(--space-5); }
.dash-layout__main,
.dash-layout__rail,
.dash-layout__wide { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 1140px) {
    .dash-layout {
        grid-template-columns: minmax(0, 1fr) 22rem;
        align-items: start;
    }
    .dash-layout__main { grid-column: 1; grid-row: 1; }
    .dash-layout__rail { grid-column: 2; grid-row: 1; }
    /* Верх первой карточки рейла — на линии верха первой карточки колонки:
       у разделов основной колонки над карточкой шапка (заголовок и зазор),
       у плиты готовности её нет, и плита начиналась на шапку выше соседа.
       Отступ — высота шапки раздела и её зазор до карточки. */
    /* Высота шапки — строка заголовка раздела (17px × межстрочный) или, у
       подборки, строка счётчика и ссылки (23px), плюс зазор до карточки.
       Шапки однострочные: подписи под заголовками ушли в сноски карточек,
       иначе рейл съезжал на высоту подписи. */
    .dash-layout:has(> .dash-layout__main > .pick-stack:first-child) > .dash-layout__rail { padding-top: calc(1.4375rem + var(--space-3)); }
    .dash-layout:has(> .dash-layout__main > :is(.role-route, .growth-areas, .growth-recs, .dash-do, .key-steps):first-child) > .dash-layout__rail { padding-top: calc(1.0625rem * 1.15 + var(--space-3)); }
    /* пустой рейл (дорога не выбрана, подбор молчит) не держит место: иначе
       очередь стояла узкой колонкой рядом с пустотой, а документы под ней —
       во всю ширину, и правые края экрана расходились */
    .dash-layout:not(:has(> .dash-layout__rail > *)) { grid-template-columns: minmax(0, 1fr); }
    .dash-layout:not(:has(> .dash-layout__rail > *)) > .dash-layout__rail { display: none; }
    /* Документы — своим рядом во всю ширину: карточке нужна вся мера, иначе
       мета выдавливает имя документа (см. комментарий у `@media 560px`
       карточки). */
    .dash-layout__wide { grid-column: 1 / -1; grid-row: 2; }
}
/* Телефон: колонки растворяются в один поток, и блоки встают по сюжету, а
   не по колонкам разметки: подборка → готовность сегодня → дорога (маршрут,
   «Ваш путь», шаги) → что развить → резюме. Прежде «Ваш путь» и шаги
   уходили в конец, за зоны роста и «Что усилить», и маршрут с шагами одной
   дороги разделяли три экрана. */
@media (max-width: 719px) {
    .dash-layout__main, .dash-layout__rail { display: contents; }
    .dash-layout > * > :is(.pick-stack--ready, .pick-stack--building) { order: 1; }
    .dash-layout > * > .match-plate { order: 2; }
    .dash-layout > * > .role-route { order: 3; }
    .dash-layout > * > .path-widget { order: 4; }
    .dash-layout > * > .key-steps { order: 5; }
    .dash-layout > * > .dash-calm { order: 6; }
    .dash-layout > * > :is(.growth-areas, .growth-recs) { order: 7; }
    .dash-layout > * > .dash-do { order: 8; }
    .dash-layout > * > .dash-resumes { order: 9; }
    .dash-layout > * > .pick-stack:not(.pick-stack--ready, .pick-stack--building) { order: 10; }
    .dash-layout > * > .pick-stack__feed { order: 11; }
}
/* Планшет: рейл под основной колонкой. Плашка готовности и «Ваш путь» встают
   рядом — во всю ширину 768px плашка была тёмным полотном в 250px с одним
   числом, а путь растягивал строки шагов на 90 знаков. */
@media (min-width: 720px) and (max-width: 1139px) {
    .dash-layout__rail:has(> .match-plate):has(> .path-widget) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        /* Плашка — своей высоты: растянутая под «Ваш путь», она уводила
           число вниз и оставляла сверху пустое тёмное поле. */
        align-items: start;
    }
    .dash-layout__rail:has(> .match-plate):has(> .path-widget) > :not(.match-plate):not(.path-widget) { grid-column: 1 / -1; }
}

/* Мои документы — пара последних резюме и вход в общий список.
   Заголовок и ссылка стоят одной строкой: ссылка здесь — не действие над
   документом, а переход в раздел, и её место в шапке блока, а не под
   карточками, где она читалась бы четвёртым документом. */
.dash-resumes {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.dash-resumes__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.dash-resumes__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

/* Что усилить — список, а не ряд карточек. Три плитки в ряд в основной колонке
   давали по 170–220px на плитку: заголовок с именем компании вставал в три
   строки, а вопрос с ответом «нет» переносил кнопки, и они расходились по
   высоте с соседями. Строкой плитка читается как очередь выше: слева что и
   зачем, справа действие. Раскладку решает ширина самого блока (container
   query), а не окна: одна и та же колонка бывает 540px и 690px. */
.dash-do {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    container-type: inline-size;
}
.dash-do__head { display: grid; gap: 2px; }
.dash-do__grid { display: grid; margin: 0; padding: 0; list-style: none; }
/* На телефоне — две строки: третья уезжала бы на второй экран прокрутки под
   очередью, а блок «что усилить» ценен первой парой, а не полнотой. */
@media (max-width: 719px) {
    .dash-do > .dash-do__grid > .sx-row:nth-child(n + 3) { display: none; }
}

/* ui_strengthen_row — строка «Что усилить»: плитка-иконка тона, факт и
   польза, справа шеврон (вся строка — ссылка) либо кнопки. Строки
   разделены волосяной линией, как список в карточке. */
.sx-row {
    --sx-tone: var(--color-accent-rgb);
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border-soft);
}
.sx-row:first-child { border-top: 0; padding-top: var(--space-1); }
.sx-row:last-child { padding-bottom: 0; }
.sx-row--teal { --sx-tone: var(--color-teal-rgb); }
.sx-row--amber { --sx-tone: var(--color-amber-rgb); }
.sx-row--violet { --sx-tone: var(--color-violet-rgb); }
.sx-row--sage { --sx-tone: var(--color-sage-rgb); }
.sx-row--coral { --sx-tone: var(--color-coral-rgb); }
/* Плашка значка строки — тем же языком, что ui_icon_plate outlined (05.11):
   сквирк с обводкой тона, мягкий градиент сверху, блик и нейтральная тень.
   Плоский цветной квадрат читался дешевле соседних плашек платформы (карта,
   разделы досье) и был единственным таким на кабинете. */
.sx-row__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background:
        radial-gradient(120% 120% at 50% 0%,
            rgba(var(--sx-tone), 0.24) 0%,
            rgba(var(--sx-tone), 0.08) 55%,
            transparent 100%),
        var(--color-surface);
    border: 1px solid rgba(var(--sx-tone), 0.35);
    color: rgb(var(--sx-tone));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 2px 8px -3px rgba(var(--sx-tone), 0.18);
}
.sx-row__icon .icon { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
.sx-row__body { display: grid; gap: 2px; min-width: 0; }
.sx-row__title { font-size: var(--font-size-sm); font-weight: 600; line-height: 1.35; color: var(--color-text); text-decoration: none; }
/* Число рядом с заголовком — тихим весом и моноширинными цифрами: балл в
   самом заголовке спорил с ним жирностью, и «Навыки · 57 из 100» читалось
   одной строкой цифр. */
.sx-row__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); min-width: 0; }
.sx-row__meta { font-size: var(--font-size-xs); font-weight: 400; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Совет целиком: обрезка до двух строк — для плиток сводки, а совет,
   оборванный многоточием на полуслове, не выполнить. */
.sx-row--wrap .sx-row__text { display: block; -webkit-line-clamp: unset; overflow: visible; }
.sx-row--wrap { align-items: start; }
.sx-row--wrap .sx-row__chevron { align-self: center; }
/* Совет фразой — обычным весом: жирные двухстрочные советы без подписи
   весили больше разделов с баллом над ними. */
.sx-row--plain .sx-row__title { font-weight: 400; line-height: 1.45; }
.sx-row__ai { display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 2px; font-size: var(--font-size-xs); line-height: 1.4; color: var(--color-accent); }
.sx-row__ai > .icon { flex: none; margin-top: 2px; }
.sx-row__text {
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--color-text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Ссылка растянута на всю строку: нажимается строка целиком, шеврон —
   подсказка, а не отдельная цель. */
.sx-row--link { grid-template-columns: 40px minmax(0, 1fr) auto; }
.sx-row--link .sx-row__title::after { content: ""; position: absolute; inset: 0; }
.sx-row--link:hover .sx-row__title { text-decoration: underline; text-underline-offset: 3px; }
.sx-row--link .sx-row__title:focus-visible { outline: none; }
.sx-row--link:has(.sx-row__title:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-md); }
.sx-row__chevron { color: var(--color-text-muted); }
.sx-row__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-2); }
@container (min-width: 520px) {
    .sx-row:not(.sx-row--link) { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .sx-row__actions { grid-column: 3; justify-content: flex-end; }
}
/* Строка-итог над плитками: отчёт о последствии правки самого человека. Тихая
   строка без плашки — это не тревога и не новость извне. */
.dash-do__gain {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text);
}
.dash-do__gain-icon { flex: none; align-self: center; color: var(--color-success, var(--color-accent)); }
/* Ссылка — внутри предложения, а не отдельным flex-элементом: на телефоне
   она отрывалась на свою строку с 44px воздуха и читалась третьим блоком. */
.dash-do__gain { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--space-2); }
.dash-do__gain-icon { align-self: start; margin-top: 0.2em; }
.dash-do__gain-link {
    color: var(--color-accent);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.dash-do__gain-link:hover, .dash-do__gain-link:focus-visible { text-decoration: underline; }
/* Плитка — предмет с явной кнопкой, а не ссылка целиком: у вопроса есть
   законный ответ «нет», и он живёт второй, тихой кнопкой. Кнопки прижаты к низу,
   чтобы в ряду из трёх плиток разной длины текста они стояли на одной линии. */
.quick-action {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, var(--radius-md));
    background: var(--color-surface);
    color: var(--color-text);
    min-width: 0;
}
.quick-action__icon { color: var(--color-accent); margin-bottom: var(--space-2); }
.quick-action__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
.quick-action__body { margin: 0; font-size: 0.875rem; color: var(--color-text-soft); line-height: 1.45; text-wrap: pretty; }
.quick-action__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
}
.quick-action__form { display: contents; }
/* Иконка всегда слева от текста: над заголовком она стоила отдельной строки
   высоты на каждой плитке. Кнопки — всегда под текстом, на любой ширине:
   справа от текста две кнопки вопроса съедали половину строки, тело
   ломалось в четыре узкие строки, и правый край текста скакал от плитки к
   плитке. Одна анатомия на все плитки — факт, польза, действие сверху вниз.
   Правила стоят ПОСЛЕ базового .quick-action: иначе его display: flex
   перебивает сетку при равной специфичности. */
.quick-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon title" "icon body" "icon actions";
    column-gap: var(--space-3);
    row-gap: var(--space-1);
}
.quick-action__icon { grid-area: icon; margin: 2px 0 0; }
.quick-action__title { grid-area: title; }
.quick-action__body { grid-area: body; max-width: 60ch; }
.quick-action__actions { grid-area: actions; padding-top: var(--space-2); }
@media (min-width: 640px) {
    .quick-action--wide {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icon title actions" "icon body actions";
        align-items: center;
    }
    .quick-action--wide .quick-action__actions { padding-top: 0; }
    .quick-action--wide .quick-action__icon { align-self: start; }
}
/* Две кнопки (вопрос с законным «нет») справа забирали у текста половину
   строки, и он ломался в четыре узкие строки — действия уходят под текст.
   Одна кнопка остаётся справа. */
@media (min-width: 640px) {
    .quick-action--wide:has(.quick-action__actions > :nth-child(2)) {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "icon title" "icon body" "icon actions";
        align-items: start;
    }
    .quick-action--wide:has(.quick-action__actions > :nth-child(2)) .quick-action__actions { padding-top: var(--space-2); }
}

.dash-attention__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.attention-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
}
/* Акцент достаётся одной строке на экран: три равнозначные тревоги читаются
   как «всё горит», то есть как ничего. */
.attention-row--primary {
    border-color: rgba(var(--color-accent-rgb), 0.4);
    box-shadow: var(--shadow-sm);
}
.attention-row__mark { display: inline-flex; flex: none; }
/* Основа текста — 10rem: на телефоне короткая кнопка («Обновить»,
   «Ответить») встаёт в строку с текстом, а не падает третьей строкой под ним
   (строка была выше 130px и вместе с соседней плиткой съедала первый экран);
   длинная («Попробовать ещё раз») по-прежнему переносится — текст не
   сжимается в колонку в два слова. */
.attention-row__text { flex: 1 1 10rem; min-width: 0; color: var(--color-text); line-height: 1.45; }
.attention-row .btn { flex: none; }

/* Спокойное состояние — отчёт о том, что система работала, пока человека не
   было. Не пустой экран и не выдуманное задание. */
.dash-calm {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    background: var(--color-surface-overlay, rgba(0, 0, 0, 0.015));
}
.dash-calm__title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--color-text); }
.dash-calm__copy { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-soft); max-width: 60ch; }

/* ==========================================================================
   Список резюме (resume-card) — документы, а не витрина.
   Строка = документ: плитка шаблона, имя, шапка резюме, состояние, PDF.
   Прежняя карточка отдавала пол-экрана нарисованному листу бумаги, одинаковому
   у всех резюме, — на 375px это была одна карточка на экран.
   ========================================================================== */
.resume-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* Карточка складывается по ширине своего списка, а не окна: в колонке
       рядом с путём на Обзоре окно широкое, а места — как на телефоне. */
    container: doc-list / inline-size;
}
/* Группа = профессия. Имя профессии произносится один раз заголовком, а не
   повторяется в каждой карточке: список из четырёх строк «CTO / Технический
   директор» не отвечал на вопрос, ради которого сюда приходят. */
.resume-group + .resume-group { margin: var(--space-2) 0 var(--space-5); }
.resume-group__head { margin-bottom: var(--space-3); }
/* Имя профессии — подзаголовком того же веса, что на «Опыте» («Сертификаты
   2»), со счётчиком: бледная подпись 13px читалась служебной строкой, а не
   именем группы. Ссылка ведёт в профессию — значок говорит, что это переход. */
.resume-group__title {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}
.resume-group__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}
.resume-group__link:hover,
.resume-group__link:focus-visible { color: var(--color-accent); }
.resume-group__link .icon { color: var(--color-text-muted); }
.resume-group__count { font-weight: 400; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* Карточка резюме (12.10, под 1–4 документа — столько их у обычного
   человека). Сначала телефон: лист и текст строкой, действия — строкой под
   текстом, с отступом на ширину листа (рядом с именем «PDF» и «⋯» сжимали его
   в колонку в два слова). С 640px действия встают справа в ту же строку.
   Прежняя раскладка (колонка дат у правого края, резерв ширины под кнопки,
   два порога складывания) строилась под список из тридцати документов: на
   трёх карточках она оставляла посередине пустое поле, а на телефоне
   раскладывала дату, длину и «устарело» тремя строками. */
.resume-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.resume-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.resume-card__body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.resume-card__body:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-sm); }
/* Плитка — остаток от листа бумаги: держит «это документ» и различает базовое
   от целевого. По шаблону она не различала ничего: classic/modern/ATS у одного
   человека почти всегда один, и плитка одного цвета шла через весь список. */
/* ---- doc-thumb: миниатюра документа ----
   Заменила «иконку в коробке» в списках резюме. Лист сложен из фона и двух
   градиентов: три строки текста и загнутый угол. Тень мягкая и низкая —
   бумага лежит на поверхности, а не парит; радиус общий, шкала --radius-sm.
   Целевое резюме отличается корешком слева (ярлык «собрано под вакансию»),
   а не другим глифом: тип документа — свойство листа, не картинки. */
.doc-thumb {
    flex: none;
    position: relative;
    width: 38px;
    height: 46px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background:
        /* строки текста */
        linear-gradient(var(--doc-line, rgba(11, 13, 18, 0.14)) 0 0) no-repeat 9px 14px / 20px 2px,
        linear-gradient(var(--doc-line, rgba(11, 13, 18, 0.14)) 0 0) no-repeat 9px 21px / 20px 2px,
        linear-gradient(var(--doc-line, rgba(11, 13, 18, 0.14)) 0 0) no-repeat 9px 28px / 13px 2px,
        var(--color-surface);
    box-shadow: 0 1px 2px rgba(11, 13, 18, 0.06);
    overflow: hidden;
}
/* Загнутый угол — единственная «иллюстративная» деталь: она делает прямоугольник
   документом без единого слова подписи. */
.doc-thumb::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 10px; height: 10px;
    background: linear-gradient(225deg, var(--color-bg-soft) 50%, transparent 50%);
    border-left: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
/* Корешок целевого документа. */
.doc-thumb--targeted::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: var(--color-accent);
}
.doc-thumb--targeted { --doc-line: rgba(var(--color-accent-rgb), 0.30); }
.doc-thumb--sm { width: 30px; height: 36px; }
.doc-thumb--sm::after { width: 8px; height: 8px; }

.resume-card__ident { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.resume-card__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
/* Только когда ссылка — вся карточка: у плиты основной должности тело — не
   ссылка (ссылки там имя, лист и «Открыть разбор»), и наведение на плиту
   красило заголовок синим по чёрному, обещая ссылку там, где её нет. */
a.resume-card__body:hover .resume-card__title { color: var(--color-accent); }
/* Шапка резюме — подпись, одна строка: то, чем документ отличается от
   соседних, а не содержание. */
.resume-card__headline {
    font-size: 0.875rem;
    color: var(--color-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Факты сборки и судьба документа — две тихие строки. Разделитель —
   псевдоэлемент сегмента: при переносе он уходит вместе со своим словом и не
   висит в конце предыдущей строки. */
.resume-card__meta,
.resume-card__signals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 2px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}
/* Судьба документа разделена значками, а не точками: у каждого пункта свой
   знак, и точка при переносе начинала новую строку. */
.resume-card__signals { color: var(--color-text-soft); column-gap: var(--space-3); }
.resume-card__meta > * + *::before {
    content: "\00B7";
    margin: 0 6px;
    color: var(--color-border-strong);
}
.resume-card__date { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Пометка меньшинства (markStaleMinority): «устарело» — тихо, это факт, а не
   тревога; «актуально» — зелёным, это и есть ответ «этот можно отправлять». */
.resume-card__state--stale { color: var(--color-text-soft); }
.resume-card__state--fresh { color: var(--color-success); font-weight: 500; }
.resume-card__sent,
.resume-card__tag { display: inline-flex; align-items: center; gap: 4px; }
.resume-card__signals .icon { color: var(--color-text-muted); }
.resume-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    /* Под текстом, а не под листом: отступ на ширину листа и зазор. */
    padding-left: calc(38px + var(--space-3));
}
.resume-card__menu {
    /* Справа и тогда, когда «PDF» рядом нет (резюме не собралось): ряд
       раскладывается space-between, и единственная кнопка уходила влево. */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    margin-right: calc(-1 * var(--space-2));
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}
.resume-card__menu:hover { background: var(--color-surface-overlay, rgba(0, 0, 0, 0.04)); color: var(--color-text); }
@container doc-list (min-width: 600px) {
    .resume-card {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: var(--space-4);
        padding: var(--space-3) var(--space-4);
    }
    .resume-card__actions { padding-left: 0; justify-content: flex-end; gap: var(--space-1); }
    .resume-card__menu { width: 36px; height: 36px; margin-right: 0; }
}

/* «Ваши резюме» на «Обзоре» — одна карточка со строками, как «Ключевые
   шаги» и «Требует внимания»: две отдельные карточки с кнопкой PDF под
   текстом занимали ~420px рейла ради двух файлов. Строка: лист | имя и
   дата | PDF значком и ⋯ справа. */
.dash-resumes .resume-list,
.resume-list--rows {
    gap: 0;
    padding: var(--space-1) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.dash-resumes .resume-card,
.resume-list--rows .resume-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-2);
    padding: var(--space-3) 0;
    border: 0;
    border-top: 1px solid var(--color-border-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.dash-resumes .resume-list > li:first-child .resume-card,
.resume-list--rows > li:first-child .resume-card { border-top: 0; }
.dash-resumes .resume-card:hover,
.resume-list--rows .resume-card:hover { box-shadow: none; }
.dash-resumes .resume-card:hover .resume-card__title,
.resume-list--rows .resume-card:hover .resume-card__title { text-decoration: underline; text-underline-offset: 3px; }
.dash-resumes .resume-card__actions,
.resume-list--rows .resume-card__actions { padding-left: 0; gap: 0; }
.dash-resumes .resume-card__actions .btn { min-width: 0; width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; }
/* В рейле PDF — значком: подпись «PDF» отнимала у имени документа место, и
   оно обрывалось. Слово остаётся для скринридера (visually-hidden-приём). */
.dash-resumes .resume-card__actions .btn > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
@media (pointer: coarse) { .dash-resumes .resume-card__actions .btn { width: 44px; height: 44px; } }
.dash-resumes .resume-card__menu { width: 36px; height: 36px; margin-right: -8px; }
.resume-list--rows .resume-card__menu { margin-right: -8px; }
.dash-resumes .resume-card__title { font-size: 0.9375rem; }
/* Строка экрана мест (ui_resume_card compact): имя целиком в две строки и
   больше — у похожих резюме различие часто в конце имени («…— Kaspi»), и
   обрезка делала две строки одинаковыми. Разделитель фактов — после слова:
   при переносе он остаётся в конце строки, а не начинает следующую. */
.resume-card--compact .resume-card__title { font-size: 0.9375rem; font-weight: 500; }
.resume-card--compact .resume-card__headline { white-space: normal; font-size: 0.8125rem; }
.resume-card--compact .resume-card__meta > * + *::before { content: none; }
.resume-card--compact .resume-card__meta > :not(:last-child)::after {
    content: "\00B7";
    margin: 0 6px;
    color: var(--color-border-strong);
}

/* ---- Экран «Резюме» по назначению документов (12.10) ----
   Сетка из трёх зон: основное резюме, качество текста и остальное. На
   телефоне — столбцом в этом порядке (качество сразу под основным: «не
   стыдно ли отправлять» отвечается до того, как человек полез вниз); с
   1140px качество — колонкой справа, на всю высоту экрана. */
.resumes-ws { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 1140px) {
    .resumes-ws--rail {
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas: "hero rail" "rest rail";
        /* Вторая строка забирает остаток высоты колонки качества: иначе
           строка основного резюме растягивалась до её высоты, и между ним и
           «Под вакансии» стояла дыра в пол-экрана. */
        grid-template-rows: auto 1fr;
        align-items: start;
        column-gap: var(--space-6);
    }
    .resumes-ws--rail .resumes-ws__hero { grid-area: hero; }
    .resumes-ws--rail .resumes-ws__rail { grid-area: rail; position: sticky; top: var(--space-5); }
    .resumes-ws--rail .resumes-ws__rest { grid-area: rest; }
}
.resumes-ws__rest { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
/* Затравка разбора основной должности (05.11): с 1140px — справа от плиты,
   качество текста — под ней в той же колонке; на телефоне — сразу под
   плитой, до остальных должностей (порядок разметки). */
@media (min-width: 1140px) {
    .resumes-ws--teaser {
        grid-template-columns: minmax(0, 1fr) 340px;
        /* Затравка тянется на два ряда: ряд плиты держит высоту плиты, а не
           затравки, и остальное встаёт сразу под плитой. */
        grid-template-areas: "hero teaser" "rest teaser" "rest rail";
        grid-template-rows: auto auto 1fr;
        align-items: start;
        column-gap: var(--space-6);
    }
    .resumes-ws--teaser .resumes-ws__hero { grid-area: hero; }
    .resumes-ws--teaser .resumes-ws__teaser { grid-area: teaser; }
    .resumes-ws--teaser .resumes-ws__rest { grid-area: rest; }
    .resumes-ws--teaser .resumes-ws__rail { grid-area: rail; }
}
/* Выжимка разбора в оболочке рейла (attr-board): ряды — ритм «Качества
   описания карьеры» рядом: подпись 15/500 слева, число справа табличными
   цифрами; первый пробел — приглушённым текстом под своим рядом. */
/* Типографика (05.11, второй проход): две ступени и два веса. Подписи —
   13/400 muted, тексты модели («читают как», «главное, чего не хватает») —
   15/400 в одну анатомию. Прежде цитата шла весом 500 и читалась жирным
   абзацем, а под ней стояли числа без действия. Группы разделены воздухом
   20px, без линии: линия прилипала к цитате сверху и ни к чему не
   относилась. */
.fit-teaser .attr-board__card { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-5); }
.fit-teaser .attr-board__card > .card-link { align-self: flex-start; margin: 0; }
.fit-teaser__read-as { display: flex; flex-direction: column; gap: var(--space-1); }
.fit-teaser__label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0; }
.fit-teaser__label { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.fit-teaser__label-row .ai-mark { margin-left: auto; font-size: 0.75rem; }
.fit-teaser__label-row .ai-mark .icon { width: 14px; height: 14px; }
.fit-teaser__value { margin: 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; color: var(--color-text); }


/* Основное резюме — документ, а не строка: крупный лист, имя, состояние и два
   действия. Одна плита на экран (закон акцента). */
.resume-hero {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(var(--color-accent-rgb), 0.07), transparent 60%),
        var(--color-surface-elevated);
    box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) { .resume-hero { padding: var(--space-5); gap: var(--space-5); } }
.resume-hero__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
.resume-hero__eyebrow {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent);
}
.resume-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
@media (min-width: 640px) { .resume-hero__title { font-size: 1.5rem; } }
.resume-hero__title a { color: var(--color-text); text-decoration: none; }
.resume-hero__title a:hover { color: var(--color-accent); }
.resume-hero__headline { margin: 0; font-size: 0.9375rem; color: var(--color-text-soft); max-width: 60ch; }
.resume-hero__meta {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2px;
    margin: var(--space-1) 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.resume-hero__meta > * + *::before { content: "\00B7"; margin: 0 6px; color: var(--color-border-strong); }
.resume-hero__signals { margin: 0; }
.resume-hero__state {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: var(--space-2) 0 0;
    font-size: 0.875rem;
    color: var(--color-text-soft);
}
.resume-hero__state .icon { flex: none; transform: translateY(1px); }
.resume-hero__state--stale .icon { color: var(--color-amber); }
.resume-hero__state--stale a { font-weight: 600; }
.resume-hero__state--fresh .icon { color: var(--color-success); }
/* Действия: на телефоне столбцом во всю ширину (две кнопки в ряд не
   вмещали «Редактировать» со значком), шире — в ряд. */
.resume-hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.resume-hero__actions .btn { justify-content: center; }
@media (min-width: 640px) { .resume-hero__actions { display: flex; flex-wrap: wrap; } }
/* На телефоне лист — миниатюрой слева от имени (04.11): полоса страницы во
   всю ширину над именем отнимала у первого экрана ~150px. Тело карточки
   раскладывается в ту же сетку (display: contents): имя и факты — справа от
   листа, кнопки и совет — во всю ширину под ними, иначе две кнопки стояли
   бы в колонке шириной в две трети экрана. */
@media (max-width: 639px) {
    .resume-hero {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: var(--space-3);
        row-gap: var(--space-1);
        align-items: start;
    }
    .resume-hero__body { display: contents; }
    .resume-hero__body > * { grid-column: 2; }
    .resume-hero__body > .resume-hero__actions,
    .resume-hero__body > .doc-advice { grid-column: 1 / -1; }
    .resume-hero > .resume-hero__preview,
    .resume-hero > .doc-thumb { grid-column: 1; grid-row: 1 / span 4; }
    .resume-hero .doc-thumb--lg { width: 38px; height: 46px; }
    .resume-hero__preview::after { height: 1.25rem; }
    .resume-hero .doc-thumb--lg {
        background:
            linear-gradient(var(--doc-line, rgba(11, 13, 18, 0.14)) 0 0) no-repeat 9px 14px / 20px 2px,
            linear-gradient(var(--doc-line, rgba(11, 13, 18, 0.14)) 0 0) no-repeat 9px 21px / 20px 2px,
            linear-gradient(var(--doc-line, rgba(11, 13, 18, 0.14)) 0 0) no-repeat 9px 28px / 13px 2px,
            var(--color-surface);
    }
    .resume-hero .doc-thumb--lg::after { width: 10px; height: 10px; }
}
/* Миниатюра настоящей страницы основного резюме. Лист 768px (ширина
   .tpreview__sheet) уменьшается целиком: на телефоне — миниатюрой 64px
   слева от имени, с 640px — страницей 168px слева от текста. Нижний край тает в бумагу: обрез посреди строки читался
   бы поломкой. Кольца прокрутки внутри нет — это картинка, а не документ. */
.resume-hero__preview {
    --preview-scale: 0.083333; /* 64 / 768 */
    position: relative;
    display: block;
    flex: none;
    width: 64px;
    height: 83px; /* пропорция A4 */
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--surface-paper);
    box-shadow: 0 1px 2px rgba(11, 13, 18, 0.06), 0 8px 20px -12px rgba(11, 13, 18, 0.25);
}
.resume-hero__preview::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2.5rem;
    background: linear-gradient(transparent, var(--surface-paper));
    pointer-events: none;
}
.resume-hero__page {
    position: absolute;
    top: 0;
    left: 50%;
    width: 768px;
    transform: translateX(-50%) scale(var(--preview-scale));
    transform-origin: top center;
    pointer-events: none;
}
.resume-hero__page .tpreview__sheet {
    display: block;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
@media (min-width: 640px) {
    .resume-hero__preview {
        --preview-scale: 0.21875; /* 168 / 768 */
        width: 168px;
        height: 218px; /* пропорция A4 */
    }
    .resume-hero__preview:hover { border-color: var(--color-border-strong); }
}
/* Главный совет к документу (ui_doc_advice): под кнопками документа, над
   его нижним краем — тонкой чертой, без своей карточки: это продолжение
   документа, а не второй блок. Заголовок совета — раскрытие с объяснением,
   действие — справа на широком экране и под заголовком на телефоне. */
.doc-advice {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.doc-advice__label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent);
}
/* У несобранного документа совета нет карточки-документа вокруг: строка
   совета получает свою карточку, иначе она висела отдельно от плитки
   «Собрать» и квоты. */
.role-doc > .doc-advice {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
}
.doc-advice__fold { min-width: 0; }
.doc-advice__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
    text-wrap: pretty;
}
summary.doc-advice__title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: var(--tap-min);
    padding: var(--space-1) 0;
    cursor: pointer;
    list-style: none;
}
summary.doc-advice__title::-webkit-details-marker { display: none; }
summary.doc-advice__title:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.doc-advice__chev { flex: none; margin-top: 4px; color: var(--color-text-muted); transition: transform 160ms ease; }
.doc-advice__fold[open] .doc-advice__chev { transform: rotate(180deg); }
.doc-advice__body { margin: 0 0 var(--space-1); font-size: 0.875rem; line-height: 1.5; color: var(--color-text-soft); max-width: 68ch; }
.doc-advice__action { margin: 0; justify-self: start; }
.doc-advice__action .btn { min-height: var(--tap-min); }
@media (min-width: 768px) {
    .doc-advice { grid-template-columns: minmax(0, 1fr) auto; }
    .doc-advice__label { grid-column: 1 / -1; }
    .doc-advice__action { align-self: start; }
}
@media (prefers-reduced-motion: reduce) { .doc-advice__chev { transition: none; } }
/* Документ в рейле 22rem (prop stack, страница должности с 1140px): страница
   — окном во всю ширину карточки сверху, под ней столбцом имя, факты, кнопки
   и совет. Сбоку от имени лист в 302px оставлял тексту 110px. Масштаб листа
   — внутренняя ширина карточки (22rem − рамка − два отступа space-5 = 302px)
   к ширине листа 768px; на расхождении в пиксель лист просто центрируется. */
@media (min-width: 1140px) {
    .resume-hero--stack { flex-direction: column; align-items: stretch; gap: var(--space-4); }
    .resume-hero--stack .resume-hero__preview { --preview-scale: 0.393229; width: 100%; height: 12rem; }
    .resume-hero--stack .resume-hero__title { font-size: 1.375rem; }
    .resume-hero--stack .resume-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .resume-hero--stack .doc-advice { grid-template-columns: minmax(0, 1fr); }
}

/* Крупный лист основного документа: та же бумага, что в списке. */
.doc-thumb--lg {
    width: 56px;
    height: 72px;
    background:
        linear-gradient(var(--doc-line, rgba(11, 13, 18, 0.14)) 0 0) no-repeat 13px 20px / 30px 3px,
        linear-gradient(var(--doc-line, rgba(11, 13, 18, 0.14)) 0 0) no-repeat 13px 30px / 30px 3px,
        linear-gradient(var(--doc-line, rgba(11, 13, 18, 0.14)) 0 0) no-repeat 13px 40px / 20px 3px,
        var(--color-surface);
}
.doc-thumb--lg::after { width: 14px; height: 14px; }
.doc-thumb--lg.doc-thumb--targeted::before { width: 5px; }
/* Тёмная тема: строки листа светлые — тёмные на тёмной бумаге пропадали, и
   лист читался пустым квадратом. */
:root[data-theme="dark"] .doc-thumb { --doc-line: rgba(255, 255, 255, 0.22); }
:root[data-theme="dark"] .doc-thumb--targeted { --doc-line: rgba(var(--color-accent-rgb), 0.55); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .doc-thumb { --doc-line: rgba(255, 255, 255, 0.22); }
    :root:not([data-theme]) .doc-thumb--targeted { --doc-line: rgba(var(--color-accent-rgb), 0.55); }
}
/* Пунктирный лист — документа ещё нет: вакансия ждёт резюме. */
.doc-thumb--ghost {
    background: transparent;
    border-style: dashed;
    border-color: var(--color-border-strong);
    box-shadow: none;
}
.doc-thumb--ghost::after { content: none; }

/* Подпись раздела и «ещё N» под списком. */
/* Подпись раздела под его заголовком. */
.resume-group__hint { margin: 4px 0 0; font-size: 0.8125rem; color: var(--color-text-muted); }




/* ==========================================================================
   Соответствие вакансии (/app/resumes/{id}/match)
   --------------------------------------------------------------------------
   Разбор требований переехал сюда из правого рейла страницы резюме, где он
   занимал 284 px ширины и 3 051 px высоты — две трети страницы, а на телефоне
   начинался с 9 074-го пикселя прокрутки. Здесь у него есть ширина: длинные
   требования читаются строками нормальной меры, а не колонкой в три слова.

   Цветовой закон блока: красное — ТОЛЬКО у формального отсева (диплом, стаж).
   Двенадцать красных крестов подряд читаются как перечень причин, почему
   человек не подходит, хотя половина из них означает лишь, что слово не
   названо в резюме.
   ========================================================================== */

.cov-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-4);
    /* Колонка чтения: на 1440 карточки шли во всю ширину, и пояснения
       набирались в сотню знаков при норме 45–75. */
    max-width: 62rem;
}
/* Страница соответствия — основная колонка и правая полоса, как «Обзор»:
   полоса с 1140px, ниже — под основной колонкой. */
.cov-layout { display: grid; gap: var(--space-6); margin-top: var(--space-4); }
.cov-layout > .cov-page { margin-top: 0; }
.cov-layout__rail { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.cov-layout__rail:not(:has(> *)) { display: none; }
@media (min-width: 1140px) {
    .cov-layout { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
}
/* «Уже есть в резюме» — строки «Ключевых шагов» без линии: закрытые
   требования не идут друг за другом. */
.cov-closed .key-step::before { display: none; }
.cov-closed__text { font-size: var(--font-size-sm); line-height: 1.45; color: var(--color-text); }
.cov-closed__count { margin-left: 4px; font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.cov-page__note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ---- Вердикт ---- */
.cov-verdict {
    --cov-tone-rgb: var(--color-accent-rgb);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-left: 3px solid rgb(var(--cov-tone-rgb));
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.cov-verdict--good { --cov-tone-rgb: var(--color-sage-rgb); }
.cov-verdict--caution { --cov-tone-rgb: var(--color-amber-rgb); }
.cov-verdict--blocked { --cov-tone-rgb: var(--color-danger-rgb); }
.cov-verdict__head {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
/* Значок садится на ПЕРВУЮ строку заголовка, а не по центру всего абзаца:
   высота его коробки равна строке заголовка, поэтому центр значка и центр
   первой строки совпадают без подгонки отступами. */
.cov-verdict__mark {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: calc(1.0625rem * 1.35);
    color: rgb(var(--cov-tone-rgb));
}
.cov-verdict__title { font-size: 1.0625rem; font-weight: 700; }
.cov-verdict__body { margin: 0; color: var(--color-text); max-width: 60ch; }
.cov-verdict__hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    max-width: 62ch;
}
.cov-verdict__counts {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
/* Обязательные — впереди и весом: именно они решают исход отбора. */
.cov-verdict__count--must { color: var(--color-text); font-weight: 600; }
/* Разделителя между счётчиками нет намеренно: в узком рейле строка переносится,
   и точка посередине повисала в начале второй строки отдельным символом. Каждый
   счётчик — законченная фраза, поэтому они читаются и рядом, и столбиком. */
/* Сводка в рейле страницы резюме. Стоит рядом с «О документе», поэтому берёт
   ту же оболочку, что и соседняя карточка (`.surface-card--default`): фон,
   тень, отступы, заголовок-eyebrow с волосяной линией. Отличие оставлено ровно
   одно — цветная левая грань, и она несёт смысл: тон вердикта. */
.cov-verdict--compact {
    gap: var(--space-3);
    background: var(--color-bg-soft);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    box-shadow: var(--shadow-sm);
}
.cov-verdict__eyebrow {
    margin: 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}
.cov-verdict--compact .cov-verdict__title { font-size: 1rem; line-height: 1.35; }
/* Метрика рейла: цифра — то, ради чего сюда заходят, и весит она больше
   вердикта-предложения. Табличные знаки обязательны: значение меняется между
   пересборками, и пропорциональные цифры дёргали бы соседние строки. */
.cov-verdict__metric {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cov-verdict__metric-value {
    font-family: var(--font-display, var(--font-sans));
    font-size: clamp(1.75rem, 4vw, 2.15rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--cov-tone-rgb));
}
.cov-verdict__metric-of {
    padding: 0 0.15em;
    color: color-mix(in srgb, rgb(var(--cov-tone-rgb)) 45%, transparent);
    font-weight: 400;
}
.cov-verdict__metric-label {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}
/* Навыки — сноска: их десятки, и решения они не меняют. */
.cov-verdict__note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
/* Ритм карточки: вердикт и метрика — соседи, действие отделено воздухом. */
.cov-verdict--compact .cov-verdict__metric { margin-top: 2px; }

/* Что изменилось с прошлой сборки. Одна строка под вердиктом: это справка о
   результате правки, а не самостоятельный блок. Обе половины одного размера —
   выигрыш и потеря равнозначны, и делать потерю мельче значит её прятать. */
.cov-delta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    max-width: 80ch;
}
.cov-delta__part { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cov-delta__label { font-weight: 600; }
.cov-delta__part--closed .cov-delta__label { color: var(--color-success); }
.cov-delta__part--lost .cov-delta__label { color: var(--color-warning); }

/* ---- Блоки страницы ---- */
.cov-block { display: flex; flex-direction: column; gap: var(--space-2); }
.cov-block__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}
.cov-block__intro {
    margin: 0 0 var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    max-width: 68ch;
}

/* ---- Обязательные требования строками ---- */
.cov-reqs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.cov-req {
    --cov-tone-rgb: var(--color-text-muted-rgb, 100, 116, 139);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
}
/* Закрытые требования — компактной строкой без карточки: они обязаны быть
   видимыми (человек проверяет, что мы зачли), но одинаковый вес с блокирующим
   пробелом лишал список иерархии — двенадцать белых боксов подряд читались
   выгрузкой, а не разбором. */
.cov-reqs--compact { gap: 0; }
.cov-closed__label {
    margin: var(--space-4) 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.cov-req--compact {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: var(--space-2) var(--space-1);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
}
.cov-req--compact:last-child { border-bottom: 0; }
.cov-req--compact .cov-req__title { font-weight: 500; }

.cov-req--covered { --cov-tone-rgb: var(--color-sage-rgb); }
.cov-req--partial { --cov-tone-rgb: var(--color-amber-rgb); }
.cov-req--blocking { --cov-tone-rgb: var(--color-danger-rgb); }
.cov-req__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--cov-tone-rgb), 0.14);
    color: rgb(var(--cov-tone-rgb));
}
.cov-req__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cov-req__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
/* Надзаголовок карточки: кружок тона и подпись статуса одной строкой. */
.cov-req__eyebrow { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 2px; }
.cov-req__eyebrow .cov-req__mark { width: 20px; height: 20px; }
.cov-req__title { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; max-width: 70ch; }
.cov-req--compact .cov-req__title { font-size: inherit; }
.cov-req__status {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: rgb(var(--cov-tone-rgb));
    white-space: nowrap;
}
.cov-req__note { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); max-width: 72ch; }
.cov-req__quote {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text);
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border);
    max-width: 72ch;
}
.cov-req__quote-label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

/* ---- Навыки чипами ----
   Двадцать восемь навыков строками с пояснениями давали двадцать восемь блоков
   текста; чипами это три ряда, читаемые одним взглядом. */
.cov-skills { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Названные навыки — под раскрытием: счётчик в шапке держит обещание блока
   («названо в резюме — закрашено») проверяемым, не занимая пять рядов. */
.cov-skills-covered { margin-top: var(--space-2); }
.cov-skills-covered > .disclosure__summary { font-size: 0.8125rem; color: var(--color-text-muted); }
.cov-skills-covered .cov-skills { margin-top: var(--space-2); }
/* Действия над требованием. Строка, с которой ничего нельзя сделать, — это
   претензия, а не совет; поэтому у непокрытого требования есть три ответа. */
.cov-req__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-1);
}
/* Раскрытая форма занимает всю строку: иначе «беру в развитие» и «не про
   меня» повисают справа посреди её высоты, рядом ни с чем. */
.cov-req__add[open] { flex: 1 1 100%; }
.cov-req__quick { display: flex; flex-wrap: wrap; gap: var(--space-1); }
/* Три ответа — один ряд, значит одна метрика. Раскрытие наследовало от
   `.disclosure__summary` 13px и коробку 44px, соседние кнопки — 14px и 36px:
   строка «прыгала», потому что базовые линии не совпадали. Здесь раскрытие
   принимает габариты `.btn--sm`, а главным его делает цвет текста, а не
   размер. */
.cov-req__add > .disclosure__summary {
    min-height: 36px;
    padding: 4px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    border-radius: var(--radius-md);
    /* Главное действие разбора выглядело подписью: голый текст, повторённый
       на каждой строке. Даём ему корпус кнопки (метрика `.btn--sm`), оставляя
       тон тихим — решений на экране десяток, и десять ярких кнопок кричали бы
       громче самих требований. */
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.cov-req__add > .disclosure__summary:hover {
    background: var(--color-bg-soft);
    border-color: var(--color-border-strong, var(--color-border));
}
.cov-req__add[open] > .disclosure__summary { background: var(--color-bg-soft); }
/* Сплит: «Я это умею» отвечает одним нажатием, карандаш рядом открывает то же
   поле для тех, кто хочет сказать иначе. Кнопки срастаются в один корпус —
   два отдельных прямоугольника читались бы как два разных ответа. */
.cov-req__own { display: inline-flex; }
.btn.cov-req__own-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Гасим флекс-зазор ряда между половинами: с ним «Я это умею» и карандаш
   читались как две отдельные кнопки, а это одна с двумя способами ответить. */
.cov-req__add--split { display: inline-flex; margin-left: calc(var(--space-2) * -1 - 1px); }
.cov-req__add--split > .disclosure__summary {
    padding: 4px 10px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    color: var(--color-text-muted);
}
.cov-req__add--split > .disclosure__summary:hover { color: var(--color-text); }
/* Открытое состояние — не «сломанный сплит», а другая форма той же строки:
   поле и «Добавить» встают в один ряд, а карандаш уезжает в конец и
   становится «Отменой». Раньше здесь пряталась быстрая кнопка, и карандаш
   оставался сиротой над полем — сплит выглядел развалившимся. */
.cov-req__add--split[open] {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    /* По верхнему краю — и без единого магического отступа.
       Содержимое <details> в современном Chromium лежит в `::details-content`,
       поэтому флекс-элементов здесь ДВА (summary и псевдо-контейнер), а `order`
       на отдельных детях не значит ничего: «Отмена» встаёт рядом со всей
       формой, а не внутрь её ряда. Выравнивание держит не отступ, а равная
       высота коробок: «Отмена» получает ту же высоту, что поле, и её центр
       совпадает с центром поля и «Добавить» в любом браузере — с псевдо и без. */
    align-items: flex-start;
    gap: var(--space-2);
    margin-left: 0;
}
.cov-req__add--split[open] > .disclosure__summary {
    order: 3;
    min-height: var(--tap-min);
    justify-content: center;
    border-color: var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-md);
}
.cov-req__add--split[open] > .disclosure__summary:hover { color: var(--color-text); }
.cov-req__add--split[open] > .cov-req__add-form { order: 2; }
/* Псевдо-контейнер содержимого <details> (Chromium) — флекс-элемент наравне с
   summary. Без ограничения ширины он забирает всю строку, и «Отмена» уходит
   под форму. Ограничиваем его той же мерой, что у формы; в браузерах без
   `::details-content` правило игнорируется, а дети раскладываются по `order`
   и дают ту же картину. */
.cov-req__add--split[open]::details-content { max-width: 34rem; }
.cov-req__add--split[open] > .cov-req__add-hint { order: 4; flex: 1 1 100%; }
/* Быстрая кнопка уходит: у формы есть своя «Добавить», и две кнопки с одним
   смыслом заставляют выбирать между ними. */
.cov-req__actions:has(.cov-req__add--split[open]) .cov-req__own { display: none; }
/* Значок правки ↔ «Отмена»: одна кнопка, два состояния. */
.cov-req__add-closed, .cov-req__add-open { display: inline-flex; align-items: center; gap: 4px; }
.cov-req__add-open { display: none; }
.cov-req__add[open] > .disclosure__summary .cov-req__add-closed { display: none; }
.cov-req__add[open] > .disclosure__summary .cov-req__add-open { display: inline-flex; }
/* Компенсируем внутренний отступ: текст ряда начинается по левому краю
   карточки, как и всё остальное в строке требования. */
.cov-req__actions { margin-left: -12px; }
.cov-req__quick { margin-left: 0; }
/* Поле и подтверждение — одной строкой. Колонкой кнопка растягивалась во всю
   ширину чёрной плитой: подтверждение короткой правки весило больше самого
   требования. */
/* Mobile-first: на узком экране поле занимает всю ширину, подтверждение под
   ним. Двухколоночная посадка на 375px давила поле до десяти символов и
   ломала подпись кнопки на две строки. */
.cov-req__add-form {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--space-2);
    max-width: 34rem;
}
.cov-req__add-form .field { margin-bottom: 0; }
.cov-req__add-form .btn { justify-self: start; }
@media (min-width: 560px) {
    .cov-req__add-form { grid-template-columns: minmax(10rem, 1fr) auto; }
    /* Подтверждение — во второй колонке первой строки, рядом с полем. По DOM
       оно идёт после подсказки, и без явной посадки в сетку кнопка падала под
       неё чёрной плитой во всю ширину. */
    .cov-req__add-form .btn { grid-column: 2; grid-row: 1; }
}
.cov-req__add-hint { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.cov-req__decided {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}
.cov-req__decided-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.cov-decided { margin-top: calc(-1 * var(--space-2)); }

/* Поле, к которому человека привёл разбор требований (`?focus=<путь>`).
   Подсветка временная и снимается по первому вводу: она нужна, чтобы найти
   строку среди двадцати, а не чтобы жить на экране. */
.is-requirement-focus {
    outline: 2px solid rgba(var(--color-accent-rgb), 0.55);
    outline-offset: 2px;
    background: rgba(var(--color-accent-rgb), 0.06);
}

/* Повторяющиеся требования вакансий профессии (ui_market_gaps). Единственное
   место, где на план роста влияет рынок, а не пересказ собственного резюме. */
.market-gaps {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
}
.market-gaps__title {
    margin: 0 0 var(--space-1);
    font-size: 1rem;
    font-weight: 700;
}
.market-gaps__intro,
.market-gaps__note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    max-width: 68ch;
}

/* Точки развития профессии (ui_growth_points). Единственное решение из трёх,
   которое обещает продолжение, — и потому единственное, у которого есть свой
   дом и свой выход. Ни дроби, ни процента: второй скоринг превратил бы экран
   в HR-анкету до ста процентов. */
.growth-points {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
}
.growth-points__title { margin: 0 0 var(--space-1); font-size: 1rem; font-weight: 700; }
.growth-points__intro {
    margin: 0 0 var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    max-width: 68ch;
}
.growth-points__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* Ряд — сетка, а не flex-wrap: у прозаической точки есть второй ряд с полем
   ввода, и на переносе он утаскивал за собой название строки. Сетка задаёт
   места явно: имя и ответы в первом ряду, «теперь умею» с полем — во втором. */
.growth-point {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.growth-point:last-child { border-bottom: 0; padding-bottom: 0; }
/* Имя и частота на рынке — одна ячейка: частота относится к имени, а не к
   ряду, и отдельной колонкой она отрывалась бы от того, что объясняет. */
.growth-point__label {
    grid-column: 1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}
.growth-point__name { font-weight: 600; }
.growth-point__market { font-size: 0.8125rem; color: var(--color-text-muted); white-space: nowrap; }
.growth-point__actions { grid-column: 2; justify-self: end; display: flex; flex-wrap: wrap; gap: var(--space-1); }
/* Раскрытие «теперь умею» — своя строка под названием: закрытие прозаической
   точки требует поля ввода, и втискивать его в ряд с кнопкой «Вернуть»
   значит получить два поля по 90 px. */
.growth-point__add { grid-column: 1 / -1; grid-row: 2; }
.growth-point__add > .disclosure__summary {
    min-height: 36px;
    padding: 4px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    border-radius: var(--radius-md);
}
.growth-point__add-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-2);
    max-width: 34rem;
}
.growth-point__add-hint { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }

@media (max-width: 47.99rem) {
    /* На телефоне ответы точки развития уезжают под название: кнопки рядом
       с длинной формулировкой не помещаются, и строка ломается посередине. */
    .growth-point__actions { flex: 1 1 100%; }
}

/* Карьерный путь (ui_career_map) на странице направлений. Первая версия
   строится на своих данных: направления человека, готовность к каждому и то,
   что повторяется в требованиях его же вакансий. Сроков здесь нет и не будет —
   первая несбывшаяся цифра стоит доверия ко всему продукту. */
/* Здесь лежал мёртвый CSS снесённого «рельса пути» (`ui_career_track`, §9
   карьерного модуля): при удалении компонента вырезали СЕЛЕКТОРЫ, а тела
   правил остались. Браузер, встретив объявление без селектора, отбрасывает не
   только его, но и всё до следующей восстановимой точки — вместе с мёртвым
   куском молча не применялись и живые правила ниже (так, например, липкая
   полоса решения оставалась статичной). Удалять компонент — значит удалять
   его стили целиком. */

/* Липкая полоса решения — узкий экран. На десктопе её роль играет липкий рейл;
   здесь рейл идёт в поток последним, и без полосы решение было бы в трёх тысячах
   пикселей от любого места, где человек его принял. Две кнопки без поля заметки:
   заметка необязательна, а полная форма с ней стоит в конце — кто хочет
   объяснить решение, доходит до неё. */
.vector-cta {
    /* Именно fixed, не sticky. Sticky с `bottom: 0` прилипает только когда
       элемент доскроллен до края вьюпорта: полоса стояла последней в потоке и
       появлялась ровно тогда, когда до неё долистали, — то есть не решала
       задачи «решение доступно из любой точки». */
    position: fixed;
    left: 0;
    right: 0;
    /* Над панелью навигации кабинета (56px) и её безопасной зоной. */
    bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}
/* Место под полосу, чтобы она не накрывала последний блок страницы. */
.page-shell:has(.vector-cta) { padding-bottom: 7rem; }
.vector-cta { flex-wrap: wrap; }
.vector-cta__price { flex: 1 1 100%; margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.vector-cta form { flex: 1 1 auto; margin: 0; }
.vector-cta form:last-child { flex: 0 0 auto; }
.vector-cta .btn { width: 100%; }
/* Порог тот же, что у двух колонок досье: пока рейла справа нет, решение
   держит липкая полоса. */
@media (min-width: 1200px) {
    .vector-cta { display: none; }
    .page-shell:has(.vector-cta) { padding-bottom: 0; }
}

/* === Карьерная карта (/app/career) — career-module фазы 1-2 ============== */
/* Mobile-first: базовые стили под ≤375px, @media расширяет. Signature —
   маршрут станций: вертикальная лесенка на мобиле, линия на десктопе. */

/* --- Досье варианта пути (/app/career/vectors/{id}) --------------------- */
/* Mobile-first: одна колонка, решение (рейл) идёт ПЕРВЫМ — до простыни
   досье; на десктопе рейл уезжает вправо и липнет. */
.vector-page { display: flex; flex-direction: column; gap: var(--space-6); }
/* Решение идёт ПОСЛЕ аргументов и на узком экране. Прежде рейл стоял первым
   (order: -1), и человека просили написать «почему этот путь» и нажать
   «Выбрать» раньше, чем он прочитал хоть один довод: форма решения открывалась
   сразу под сводкой. Доступность решения из любой точки держит липкая полоса
   внизу (.vector-cta), а не положение карточки в потоке. */
.vector-page__rail { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
/* Выбранный путь: рейл стоит в разметке между шагами и остальной колонкой
   (две части .vector-page__main) — на узком экране он идёт сразу за шагами,
   без order. */
.vector-page__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Между разделами досье — заметно больше, чем между карточками внутри
       раздела (--space-3): при 16px последний шаг и шапка «Что просит роль»
       читались одним списком. */
    gap: var(--space-6);
    overflow-wrap: anywhere;
    /* Именованный контейнер: блоки внутри решают о своей раскладке по
       ширине КОЛОНКИ, а не окна. У досье есть рейл, и на 1280px колонка
       ещё узкая — там рынок остаётся одним столбцом. */
    container: vector-main / inline-size;
}
/* Две колонки — с 1200px: с меню кабинета (260px) и рейлом (21rem) на 1024
   основной колонке доставалось около 316px — уже телефона, и названия шагов
   рвались посреди слова. До порога досье идёт одной колонкой, как на
   планшете. */
@media (min-width: 1200px) {
    /* Между частями левой колонки (выбранный путь: шаги и остальное) — тот
       же шаг, что между разделами внутри неё (--space-6): общий gap сетки
       давал 80px разрыва ровно посередине колонки. */
    .vector-page { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; column-gap: var(--space-8); row-gap: var(--space-6); align-items: start; }
    .vector-page__rail { position: sticky; top: var(--space-4); }
    /* Колонка из двух частей (выбранный путь) — обе слева, рейл справа во
       всю их высоту. */
    .vector-page__main { grid-column: 1; }
    .vector-page__rail { grid-column: 2; grid-row: 1 / span 2; }
    .vector-page__main--rest { grid-row: 2; }
    /* Без рейла (идёт пересборка — решать нечего) колонки нет: иначе 21rem
       пустоты тянулись вдоль всей страницы, пока текст сидел в 744px. */
    .vector-page--solo { display: block; }
}
/* Раздел досье без собственной панели (дорога, шаги): шапка того же облика,
   что у панелей «Что просит роль» и «Что если», над своими карточками. */
/* «За» и «против» в колонке досье (~650px) — одним списком: двумя колонками
   по 290px цитаты рвались на восемь-десять строк, и карточка вывода
   вырастала до 760px. Две колонки — только когда колонка широкая. */
@container vector-main (max-width: 760px) {
    .vector-hero .target-fit__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
.vector-section { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.vector-section__head { margin: 0; }
/* «Что если» внутри панели «Что просит роль»: подблок за волосяной линией,
   заголовок h3 — без своей карточки и плашки. */
.whatif--embedded {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-soft);
}
.vector-experiment__body { margin: 0; max-width: 68ch; line-height: 1.6; color: var(--color-text); }
.whatif__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--color-text); }
.whatif__lead { margin: var(--space-1) 0 var(--space-3); max-width: 62ch; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-muted); }
.vector-page__verdict {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.vector-page__prose { margin: 0; font-size: 0.9375rem; color: var(--color-text-muted); max-width: 62ch; }

/* Решение — карточка на рейле: заголовок, поле «почему», CTA, тихий отвод. */
/* Решение — ГЛАВНЫЙ объект страницы, и весить он должен соответственно. Белая
   карточка с волосяной рамкой на белом фоне стояла вровень с любой панелью
   содержания: то, ради чего человек сюда пришёл, не отличалось от справки о
   рынке. Вес даёт не цвет, а плотность — поднятая поверхность, тень уровнем
   выше соседей и акцентная грань сверху: тот же приём, которым отмечен hero
   на странице профессии. */
.vector-decision {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated, var(--color-surface));
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.vector-decision::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-accent);
}
/* Заголовок решения — крупнее заголовка акта: на странице он один, и спорить
   ему не с чем. */
.vector-decision__title {
    margin: 0;
    font-family: var(--font-display, var(--font-serif));
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}
/* Кнопка решения — во всю ширину карточки: половинная кнопка рядом с пустотой
   читалась как одно из действий, а не как ответ на вопрос страницы. */
.vector-decision__form .btn,
.vector-decision__reject .btn { width: 100%; }
.vector-decision__lead { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
/* Подпись поля — тем же mono-eyebrow, что подписи блоков в кабинете
   («ГОТОВНОСТЬ К РОЛИ», поля аккаунта). Общий `.field__label` (600, 0.95rem)
   спорил здесь с заголовком блока: два полужирных набора почти одного кегля
   подряд читаются как два заголовка, и глазу не за что зацепиться. */
.vector-decision .field__label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text-muted);
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.vector-decision__form { display: flex; flex-direction: column; gap: var(--space-3); }
.vector-decision__reject { align-self: flex-start; }
/* Цена подробного плана, который запускает выбор: тихая строка под кнопкой и
   счётчик обновлений карты вплотную к ней — это одна мысль, а не два блока. */
.vector-decision__price { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-muted); }
.vector-decision__quota { margin: calc(-1 * var(--space-2)) 0 0; }
/* Плитка «расписать путь» и счётчик под ней: счётчик — подпись цены плитки. */
.vector-expand__quota { margin: calc(-1 * var(--space-2)) 0 var(--space-2) var(--space-4); }
.vector-decision__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.vector-measure {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

/* Шаги маршрута: нумерованная дорога, текущий шаг — акцентная рамка. */
.vector-steps { margin: 0; padding: 0; list-style: none; counter-reset: vstep; display: grid; gap: var(--space-3); }
.vector-steps__item {
    counter-increment: vstep;
    position: relative;
    padding: var(--space-3) var(--space-4) var(--space-3) 3.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.vector-steps__item::before {
    content: counter(vstep);
    position: absolute;
    left: var(--space-4);
    top: var(--space-3);
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border-strong);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* На телефоне номер стоит слева только от шапки шага, а всё ниже (с чего
   начать, результат, кнопки) идёт на всю ширину карточки: колонка номера
   во всю высоту забирала 52px из 343 и превращала текст в узкую полосу. */
@media (max-width: 599px) {
    .vector-steps__item:not(.vector-steps__item--later):not(.vector-steps__item--done) { padding-left: var(--space-4); }
    /* Номер — в строке надзаголовка, заголовок — от того же левого края,
       что тело шага (29.10): отступ под номер у одной шапки давал два левых
       края в одной карточке. */
    .vector-steps__item:not(.vector-steps__item--later):not(.vector-steps__item--done) .vector-steps__kicker-row {
        padding-left: 2.25rem;
        min-height: 1.75rem;
    }
}
.vector-steps__item--current { border-color: rgba(var(--color-accent-rgb), .55); }
.vector-steps__item--current::before {
    border-color: rgb(var(--color-accent-rgb));
    color: rgb(var(--color-accent-rgb));
}
.vector-steps__head { display: flex; flex-direction: column; gap: 4px; }
.vector-steps__kicker-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--space-3); }
.vector-steps__kicker-row .vector-steps__kicker { margin: 0; }
.vector-steps__kicker-dur { white-space: nowrap; margin-left: 4px; }

/* Тело шага (29.10): «что делать» и «зачем» раздельно. Узко — столбцом
   (сначала что делать), от 760px ширины шага — две колонки 3:2. Блок —
   подпись (13px, полужирная, тихая) над текстом: четыре абзаца одного веса
   подряд не давали отличить задание от объяснения. */
.vector-steps__item { container: vstep / inline-size; }
.step-body { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
@container vstep (min-width: 760px) {
    .step-body:has(.step-body__why) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--space-6); }
}
.step-body__do, .step-body__why { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.step-block { display: grid; gap: 4px; }
.step-block__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-soft);
}
.step-block__label .icon { width: 14px; height: 14px; }
.step-block__text { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); max-width: 62ch; }
.step-block__text--soft { font-size: 0.875rem; color: var(--color-text-soft); }
.step-block__note { margin: 2px 0 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
/* С чего начать — главное в шаге: плашка с акцентной кромкой. */
.step-block--start {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(var(--color-accent-rgb), 0.06);
    box-shadow: inset 3px 0 0 var(--color-accent);
}
.step-block--start .step-block__label { color: var(--color-accent); }
.step-block--result .step-block__label .icon { color: var(--color-sage); }
/* Следующий шаг — акцентом в строке-надписи, как и номер в кружке слева. */
.vector-steps__item--current .vector-steps__kicker { color: rgb(var(--color-accent-rgb)); }
.vector-steps__shelf-note { color: var(--color-text-muted); font-weight: 400; }

.vector-steps__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.vector-steps__tags { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.vector-steps__reason { margin: var(--space-2) 0 0; font-size: 0.875rem; color: var(--color-text-muted); max-width: 58ch; }
.vector-steps__acceptance { margin: var(--space-2) 0 0; font-size: 0.875rem; max-width: 58ch; }

/* Подсказка пути в редакторе резюме: тихая строка-связь, не баннер. */
.editor-path-hint {
    margin: 0 0 var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    min-width: 0;
    overflow-wrap: anywhere;
}
.editor-path-hint .icon { flex-shrink: 0; margin-top: 2px; color: rgb(var(--color-accent-rgb)); }

/* Плашка режима «Куда я иду» над лентой: роль на вырост с явной подписью. */
.jobs-path-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgba(var(--color-accent-rgb), .4);
    border-radius: var(--radius-lg);
    background: rgba(var(--color-accent-rgb), 0.05);
    margin-bottom: var(--space-4);
    min-width: 0;
    overflow-wrap: anywhere;
}
.jobs-path-banner__icon { flex-shrink: 0; margin-top: 2px; color: rgb(var(--color-accent-rgb)); }
.jobs-path-banner__text { min-width: 0; flex: 1 1 auto; }
.jobs-path-banner__title { margin: 0; font-weight: 600; font-size: 0.9375rem; }
.jobs-path-banner__body { margin: 2px 0 0; font-size: 0.8125rem; color: var(--color-text-muted); max-width: 64ch; }
.jobs-path-banner__exit {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
@media (max-width: 767px) {
    .jobs-path-banner { flex-wrap: wrap; }
    .jobs-path-banner__exit { min-height: 0; }
}

/* Связь карточки направления с путём: тихая строка, не второй скоринг. */

/* Фолд справочного слоя досье (доказательства): summary в стиле mono-рубрик
   секций, чтобы свёрнутое читалось строкой оглавления, а не кнопкой. */
.vector-page__fold summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    min-height: 44px;
    font-variant-numeric: tabular-nums;
}
.vector-page__fold summary::-webkit-details-marker { display: none; }
.vector-page__fold summary:hover { color: var(--color-text); }
.vector-page__fold-chev { transition: transform 0.15s; }
.vector-page__fold[open] .vector-page__fold-chev { transform: rotate(180deg); }
.vector-page__fold > ul { margin-top: var(--space-2); }

/* Панель действий шага (career_step_actions): отделена от содержания линией
   — сначала «что делать», потом «что нажать». Кнопки по состоянию шага, под
   ними одна тихая строка: что сделает платная кнопка и сколько разборов
   осталось, либо сколько шагов уже в работе. */
.step-bar {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft, var(--color-border));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}
/* От 600px: кнопки слева, счёт «в работе» справа в той же строке — тихая
   справка не отдельной строкой под кнопками. «Шаг не подходит?» — строкой
   ниже, раскрытие во всю ширину. */
/* От 600px — одна строка действий: кнопки, сразу за ними тихий счёт «0 из
   10 в работе» (он про «Взять в работу», и место ему рядом с ней), справа
   — «Шаг не подходит?». Раскрытие уходит строкой ниже во всю ширину:
   заголовок раскрывашки стоит абсолютно в правом краю строки. */
@media (min-width: 600px) {
    .step-bar { position: relative; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-3); }
    .step-bar > .step-bar__main { grid-column: 1; }
    /* В строку с кнопками — только короткий счёт «0 из 10 в работе».
       Справка о разборе AI и остаток разборов у взятого шага длиннее и
       идут строкой ниже: в одной клетке они ложились друг на друга. */
    .step-bar > .step-bar__count { grid-column: 2; grid-row: 1; padding-right: 10rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .step-bar > .step-bar__note:not(.step-bar__count), .step-bar > .step-bar__quota { grid-column: 1 / -1; }
    /* Места кончились — счёт с причиной и путём длиннее и уходит своей
       строкой: в клетке у кнопок он обрезался бы многоточием. */
    .step-bar > .step-bar__count.quota-meter--full { grid-column: 1 / -1; grid-row: auto; padding-right: 0; white-space: normal; }
    .step-bar > .vector-steps__more { grid-column: 1 / -1; }
    .step-bar > .vector-steps__more > summary { position: absolute; top: var(--space-3); right: 0; min-height: 36px; }
    .step-bar > .vector-steps__more:not([open]) { margin: 0; height: 0; }
}
.step-bar__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.step-bar__main > form { margin: 0; }
.step-bar__note {
    margin: 0;
    max-width: 60ch;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Потолок «в работе» — тоном только на исчерпании: предупреждать о пределе,
   до которого далеко, значит мешать работать. */
.step-bar__note.is-full { color: var(--color-amber-strong, var(--color-amber)); }
.step-bar__quota { margin: 0; }
/* На телефоне главные кнопки — во всю ширину (палец, 44px), тихое «Уже
   сделано» остаётся текстовой кнопкой у левого края. */
@media (max-width: 599px) {
    .step-bar__main > form { flex: 1 1 100%; }
    .step-bar__main > form .btn:not(.btn--ghost) { width: 100%; justify-content: center; }
}

/* «Шаг не подходит?» — раскрытие с двумя исходами: переписать или убрать. */
.vector-steps__more summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    /* Пунктир под словами и шеврон, который переворачивается на раскрытии:
       голый текст без признака нажимаемости читался подписью. */
    text-decoration: underline dotted;
    text-underline-offset: 4px;
    text-decoration-color: var(--color-border-strong);
}
.vector-steps__more summary::-webkit-details-marker { display: none; }
.vector-steps__more summary:hover { color: var(--color-text); }
.vector-steps__more summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s ease;
}
.vector-steps__more[open] summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
@media (prefers-reduced-motion: reduce) {
    .vector-steps__more summary::after { transition: none; }
}
/* Раскрытие — два выхода из шага карточками рядом (29.10): «Убрать из
   плана» и «Переписать под себя». Узко — столбцом; от 720px ширины шага —
   две равные колонки. Колодец раскрытия тонирован, карточки на нём белые:
   общий регион «что делать с шагом», внутри — два независимых решения. */
.vector-steps__more-body {
    container: step-out / inline-size;
    margin-top: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
}
.step-outs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 600px) {
    .vector-steps__more-body { padding: var(--space-3); }
}
@container step-out (min-width: 720px) {
    .step-outs:has(> .step-out + .step-out) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .step-outs > .step-out:only-child { max-width: 30rem; }
}
.step-out {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border-soft, var(--color-border));
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.step-out__titles { display: grid; gap: 2px; min-width: 0; }
.step-out__title { margin: 0; font-size: 0.9375rem; line-height: 1.35; font-weight: 600; color: var(--color-text); }
.step-out__lead { margin: 0; font-size: var(--font-size-sm); line-height: 1.45; color: var(--color-text-muted); }
/* Причины — строки-кнопки через волосяную линию: выбор одного из трёх, и
   нажатие сразу убирает шаг — шеврон говорит «это действие», а не пункт
   списка. Строки выровнены по левому краю текста шапки. */
.step-out__choices {
    display: grid;
    margin: 0 calc(-1 * var(--space-2));
}
.step-out__choices .btn {
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: none;
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
}
.step-out__choices .btn > span { flex: 1 1 auto; }
.step-out__choices .btn + .btn { position: relative; }
.step-out__choices .btn + .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--space-2);
    right: var(--space-2);
    border-top: 1px solid var(--color-border-soft, var(--color-border));
}
.step-out__choices .btn .icon { color: var(--color-text-muted); }
.step-out__choices .btn .icon:last-child { color: var(--color-text-soft, var(--color-text-muted)); transition: transform 160ms var(--ease-out); }
.step-out__choices .btn:hover { background: var(--color-bg-soft); }
.step-out__choices .btn:hover::before,
.step-out__choices .btn:hover + .btn::before { opacity: 0; }
.step-out__choices .btn:hover .icon:last-child { transform: translateX(2px); color: var(--color-text); }
.step-out__choices .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
    .step-out__choices .btn .icon:last-child { transition: none; }
}
/* Поле ввода — подпись тише заголовка карточки, высота под три строки. */
.step-out .field { margin: 0; }
.step-out .field__label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-muted); }
.step-out textarea { min-height: 5.5rem; }
.step-out__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: auto;
}
.step-out__quota { margin: 0; }
@media (max-width: 599px) {
    .step-out__foot > .btn { width: 100%; justify-content: center; }
}

/* Предложение записи в карьеру: карточка над решением, содержимое — цитатой. */
.vector-suggestion {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid rgba(var(--color-accent-rgb), .4);
    border-radius: var(--radius-lg);
    background: rgba(var(--color-accent-rgb), 0.04);
}
.vector-suggestion__step { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
.vector-suggestion__value {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid rgba(var(--color-accent-rgb), .5);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
}
.vector-suggestion__value p { margin: 0 0 var(--space-1); font-size: 0.9375rem; }
.vector-suggestion__value p:last-child { margin-bottom: 0; }
.vector-suggestion__target { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.vector-suggestion__why { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
.vector-suggestion__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Журнал решений: лента с иконками, отменённое — приглушено, отмена — тихая. */
/* Журнал — лента времени: день заголовком, записи узлами на общей линии.
   Плоский список карточек с полной датой в каждой строке читался девятью
   не связанными моментами, а не историей одного человека. */
/* Журнал (05.11, ui_journal) — тот же вид ленты по дням, что у уведомлений:
   день — одна карточка, записи — строками через линию, значок в плитке,
   время — справа в строке записи. Прежде каждая запись была своей карточкой,
   и снаружи их держала ещё линия с узлами: два способа сказать «лента» на
   одном экране, шесть рамок на шесть строк. */
.journal { display: grid; gap: var(--space-5); max-width: 52rem; }

.journal__day { display: grid; gap: var(--space-2); }

.journal__date {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.journal__list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.journal__list > li + li { border-top: 1px solid var(--color-border); }

.journal__entry {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    min-width: 0;
    overflow-wrap: anywhere;
}
.journal__head { display: flex; align-items: baseline; gap: var(--space-3); }
.journal__head > .journal__line { flex: 1 1 auto; min-width: 0; }
.journal__head > .journal__time { flex: none; font-size: 0.8125rem; color: var(--color-text-muted); }

.journal__time { font-variant-numeric: tabular-nums; }
.journal__entry--reverted { opacity: 0.65; }

.journal__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(118, 118, 128, 0.10);
    color: var(--color-text-soft);
}
.journal__entry--revert .journal__icon { background: var(--color-warning-soft); color: var(--color-warning-strong); }
.journal__body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; padding-top: 0.45rem; }
.journal__line { margin: 0; font-size: 0.9375rem; }
.journal__kind { font-weight: 600; }
.journal__subject::before { content: "· "; color: var(--color-text-muted); }
.journal__origin { color: var(--color-text-muted); }
.journal__origin::before { content: "· "; }
.journal__from { color: var(--color-text-muted); }
.journal__reason { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.journal__note {
    margin: 0;
    font-size: 0.875rem;
    font-style: italic;
    color: var(--color-text);
    border-left: 2px solid var(--color-border-strong);
    padding-left: var(--space-2);
}
.journal__meta { margin: 0; display: flex; gap: var(--space-2); font-size: 0.8125rem; color: var(--color-text-muted); }
.journal__reverted-mark { color: var(--color-warning-strong); }
/* Откат — тихой кнопкой под текстом записи, текст кнопки — по левому краю
   текста записи (минус собственный отступ кнопки). */
.journal__rollback { margin: 2px 0 0 calc(-1 * var(--space-3)); }

.journal__truncated { margin: var(--space-3) 0 0; font-size: 0.8125rem; color: var(--color-text-muted); max-width: 46rem; }

/* Карточка карты: ссылка вглубь вместо аккордеона. */
.career-vector__title-link { color: inherit; text-decoration: none; }
.career-vector__title-link:hover { text-decoration: underline; }
/* Вход вглубь варианта — кнопка во всю ширину подвала, а не строчка со
   стрелкой. За ней лежит вся страница разбора (дорога, риски, маршрут,
   решение), а выглядела она как подпись: серый текст 14px в столбце из
   девяти других серых строк не читался действием. Полная ширина ещё и
   попадает под палец с любой точки низа карточки (закон Фиттса). */
.career-vector__open {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.career-vector__open .icon { transition: transform 140ms ease; }

.career-vector:hover .career-vector__open,
.career-vector__open:hover,
.career-vector__open:focus-visible {
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
    color: var(--color-accent);
}

.career-vector:hover .career-vector__open .icon,
.career-vector__open:hover .icon { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .career-vector__open,
    .career-vector__open .icon { transition: none; }
    .career-vector:hover .career-vector__open .icon,
    .career-vector__open:hover .icon { transform: none; }
}

.career-note__fold > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-2);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    list-style: none;
    /* Зона нажатия 44px на пальце (WCAG 2.5.5 AA). Текст остаётся мелким, зона
       добирается вертикальным padding'ом с компенсирующим отрицательным
       margin, чтобы ритм блока не поехал. Мерили на живом экране: раскрывашка
       была 16px высотой — в неё промахивается каждый второй. На мыши зона не
       нужна, и с 768px она снимается. */
    min-height: var(--tap-min);
    padding-block: var(--space-2);
    margin-block: calc(-1 * var(--space-2));
    font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
    .career-note__fold > summary { min-height: 0; padding-block: 0; margin-block: 0; margin-top: var(--space-2); }
}

.career-note__fold > summary::-webkit-details-marker { display: none; }
.career-note__fold[open] .career-note__chev { transform: rotate(180deg); }
.career-note__fold p { margin-top: var(--space-3); }

/* --- Заметка над картой -------------------------------------------------- */
/* Абзац заметки — до 1200 рун свободного текста модели; перенос ставим на
   контейнер (свойство наследуется), иначе неразрывный кусок внутри абзаца
   растягивает грид и даёт горизонтальный скролл на 375px. */
/* «Что изменилось» и «Вы написали» (v24) — та же рамка, что заметка карты
   под ними: все три — ответ модели о карте целиком, и разные рамки читались
   бы тремя виджетами. Различает их содержание, а не оформление. */
/* Этап маршрута в плане (v24) — подпись-разделитель между группами шагов,
   а не ещё одна карточка: шаги остаются главными. */
.vector-steps__stage {
    list-style: none;
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.vector-steps__stage:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Подпись группы сразу под шапкой раздела — без своей линии: линия шапки
   уже отделила раздел, вторая под ней читалась сбоем (05.11). */
.vector-section__head + .vector-steps__stage { margin-top: 0; padding-top: 0; border-top: 0; }
.vector-market__empty { margin: 0; font-size: 0.9375rem; color: var(--color-text-soft); }
.vector-steps__first {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
    margin: var(--space-2) 0 0;
    max-width: 68ch;
    /* Первое действие — подчинено названию шага: в размер основного текста
       (17px) оно стояло громче заголовка 15px, и глаз начинал карточку не с
       того. Шкала карточки: 13 надзаголовок · 16 название · 15 начать с ·
       14 зачем/готово. */
    font-size: 0.9375rem;
    line-height: 1.5;
}
.vector-steps__first strong { font-weight: 600; }
.vector-steps__first-icon { margin-top: 0.25em; color: var(--color-accent); }

.career-change,
.career-heard {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    margin-bottom: var(--space-4);
    overflow-wrap: anywhere;
}
.career-change__head,
.career-heard__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
}
.career-change__icon { color: var(--color-text-muted); }
.career-change__title,
.career-heard__title { margin: 0; font-size: 1rem; font-weight: 600; }
.career-change__date { font-size: 0.8125rem; color: var(--color-text-muted); }
@media (min-width: 600px) { .career-heard__head .ai-mark { margin-left: auto; } }
.career-heard__fold .career-heard__list { margin-top: var(--space-4); }
/* Доводы досье кандидата сверх двух — тем же раскрытием, что «Вы написали».
   Раскрытый список продолжает колонку, а не начинает новую: отступ — шаг
   строки, а не блока. */
.vector-hero__more .support-list { margin-top: var(--space-2); }
.career-change__quiet { margin: 0; color: var(--color-text-soft); }
.career-change__group { display: grid; gap: var(--space-1); }
.career-change__label { font-size: 0.8125rem; color: var(--color-text-muted); }
.career-change__list,
.career-heard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.career-change__list { gap: 0; }
.career-change__item + .career-change__item { border-top: 1px solid var(--color-border-soft); }
.career-change__summary {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    gap: var(--space-2);
    /* Знак и шеврон — у первой строки названия: длинное название варианта
       на телефоне в три строки уводило знак в его середину. */
    align-items: start;
    min-height: 44px;
    padding: var(--space-2) 0;
    list-style: none;
    cursor: pointer;
    color: var(--color-text);
    text-decoration: none;
}
.career-change__summary::-webkit-details-marker { display: none; }
span.career-change__summary { cursor: default; }
.career-change__summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.career-change__mark { color: var(--color-text-muted); margin-top: 4px; }
.career-change__chevron, .career-change__summary > .icon:last-child { margin-top: 4px; }
.career-change__group--added .career-change__mark { color: var(--color-sage); }
.career-change__group--changed .career-change__mark { color: var(--color-accent); }
.career-change__name { font-weight: 500; }
.career-change__chevron { color: var(--color-text-muted); transition: transform 0.15s ease; }
.career-change__row[open] .career-change__chevron { transform: rotate(180deg); }
.career-change__summary:hover .career-change__name,
.career-change__summary--link:hover .career-change__name { color: var(--color-accent); }
.career-change__group--removed .career-change__name { text-decoration: line-through; text-decoration-color: var(--color-border); color: var(--color-text-soft); }
.career-change__detail { display: grid; gap: var(--space-2); justify-items: start; padding: 0 0 var(--space-3) calc(1rem + var(--space-2)); max-width: 74ch; }
@media (prefers-reduced-motion: reduce) { .career-change__chevron { transition: none; } }
.career-change__note { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-soft); }

.career-heard__list { gap: var(--space-4); }
.career-heard__item { display: grid; gap: var(--space-2); max-width: 74ch; }
.career-heard__item + .career-heard__item { padding-top: var(--space-4); border-top: 1px solid var(--color-border-soft); }
.career-heard__quote {
    margin: 0;
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-accent);
    font-style: italic;
    color: var(--color-text);
}
.career-heard__answer { margin: 0; line-height: 1.55; color: var(--color-text-soft); }
.career-heard__link { display: inline-flex; align-items: center; justify-self: start; gap: 4px; min-height: 44px; font-size: 0.9375rem; color: var(--color-accent); text-decoration: none; }
.career-heard__link:hover { text-decoration: underline; }

.career-note {
    display: grid;
    overflow-wrap: anywhere;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    margin-bottom: var(--space-6);
}
.career-note__text p { margin: 0 0 var(--space-2); max-width: 74ch; color: var(--color-text); }
.career-note__text p:last-child { margin-bottom: 0; }
/* Разрыв между блоками заметно больше, чем между строками внутри блока: в
   одну колонку последняя строка одного блока иначе стоит вплотную к заголовку
   следующего, и границы блоков пропадают. */
.career-note__blocks { display: grid; gap: var(--space-5); }
.career-note__block h3 {
    margin: 0 0 var(--space-1);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Обоснование блока — лид, а не первый пункт списка: оно объясняет, ПОЧЕМУ
   ниже эти строки, и обязано читаться тише их. В одном кегле со строками
   абзац сливался с ними в сплошной текст, и блок переставал быть списком
   утверждений. */
.career-note__block p {
    margin: 0 0 var(--space-2);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 60ch;
}
.career-note__block ul { margin: 0; padding: 0; list-style: none; }

/* Список утверждений с источником (ui_evidence_list). Тот же язык, что у
   `support-list` и `role-demand__row`: утверждение слева, подпись справа,
   тонкая линия между строками. Третий список утверждений в продукте обязан
   читаться так же, как первые два.

   Источник набран тише и мельче самого утверждения: он отвечает на вопрос
   «чем это подкреплено», а не «что со мной не так», и спорить за внимание с
   содержанием строки не должен. Но и прятать его нельзя — разница между «в
   26% вакансий роли» и «разбор» это и есть то, чего нет у конкурентов. */
.evidence-list { display: grid; margin: 0; padding: 0; list-style: none; }
.evidence-list > .evidence-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
}
.evidence-list > .evidence-row:first-child { border-top: 0; }
.evidence-row__text { font-size: 0.875rem; line-height: 1.45; color: var(--color-text); min-width: 0; }
/* Объяснение и цитата — под заголовком вывода: объяснение тише заголовка,
   цитата ещё тише и отбита тонкой чертой — это слова самого резюме, а не
   наши. Заголовок у такой строки — полужирный: иначе три абзаца подряд
   читались одной массой. */
.evidence-row__text:has(> .evidence-row__detail, > .evidence-row__quote) { font-weight: 600; }
.evidence-row__detail { display: block; margin-top: 2px; font-weight: 400; color: var(--color-text-soft); }
.evidence-row__quote {
    display: block;
    margin-top: var(--space-1);
    padding-left: var(--space-2);
    border-left: 2px solid var(--color-border);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}
.evidence-row__src {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Тон маркирует ответ, а не тревожит: тонкая грань слева, а не заливка строки.
   Заливкой красить нельзя — в блоке «чего не хватает» подряд идут шесть строк,
   и шесть цветных полос читаются как авария. */
.evidence-row--have .evidence-row__text { box-shadow: inset 2px 0 0 var(--color-success); padding-left: var(--space-2); }
.evidence-row--gap .evidence-row__text { box-shadow: inset 2px 0 0 var(--color-border-strong); padding-left: var(--space-2); }
.evidence-row--risk .evidence-row__text { box-shadow: inset 2px 0 0 var(--color-warning); padding-left: var(--space-2); }
/* На узкой колонке источник уезжает под утверждение: две колонки на 320px
   оставляли тексту треть ширины, и строка ломалась после каждого слова. */
@media (max-width: 560px) {
    .evidence-list > .evidence-row { grid-template-columns: minmax(0, 1fr); }
}
.evidence-list__fold { margin-top: var(--space-2); }
/* Действие строки (страница должности): «Добавить в достижения» у силы и
   «Поправить» у риска — под утверждением во всю ширину строки, тем же видом,
   что ответ на совет на странице резюме (.feedback-notes__answer). */
.evidence-row__answer, .evidence-row__answered, .evidence-row__fix { grid-column: 1 / -1; }
/* У строк с маркером тона текст сдвинут на 15px — действие встаёт по краю
   текста, а не маркера. */
:is(.evidence-row--have, .evidence-row--gap, .evidence-row--risk) > :is(.evidence-row__answer, .evidence-row__answered, .evidence-row__fix) { margin-left: 15px; }
.evidence-row__answer-toggle, .evidence-row__fix {
    display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min);
    cursor: pointer; list-style: none; font-size: 0.875rem; font-weight: 600; color: var(--color-accent); text-decoration: none;
}
.evidence-row__fix { justify-self: start; }
.evidence-row__answer-toggle::-webkit-details-marker { display: none; }
.evidence-row__answer-toggle:hover span, .evidence-row__fix:hover { text-decoration: underline; }
.evidence-row__answer-toggle:focus-visible, .evidence-row__fix:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }
.evidence-row__answer-form { display: grid; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.evidence-row__answer-form .prep-answer__line { font-size: 0.9375rem; line-height: 1.65; }
.evidence-row__answer-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.evidence-row__answered { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; font-size: 0.8125rem; color: var(--color-success); }

/* Ряд блока поддержки: утверждение слева, величина справа, тонкий разделитель
   между рядами. Один облик на все пункты разбора — и на те, где модель назвала
   число, и на те, где не назвала. Прежде их было два: список со значками
   (галка / плюс / флаг) и приборный ряд со шкалой, и два вида одного блока на
   одном экране читались как два разных блока. Колонка значков вдобавок съедала
   отступ у каждой строки, не добавляя смысла: что переносится, а что собирать
   заново, сказано заголовком колонки.

   Разделители, а не отступы: пункты разбора — утверждения одного веса, и
   линия между ними держит ритм, которого воздух не держит. Тот же приём, что
   в блоке спроса рейла (`role-demand__row`) — на одном экране два списка
   утверждений обязаны читаться одним языком.

   Шкала рисуется только у доли — у неё есть знаменатель. У месяцев и счётчика
   его нет, полоса означала бы шкалу, которой не существует, и там остаётся
   одно число. */
.support-list { display: grid; margin: 0; padding: 0; list-style: none; }
/* Селектор с родителем, а не одиночный класс: рядом живёт
   `.career-note__block li`, и он перебивал бы грид — шкала уезжала во
   flex-поток, где пустой span схлопывается в нулевую ширину. */
.support-list > .support-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
}
/* Верхняя линия есть и у первой строки: она отделяет список утверждений от
   лида над ним. Без неё абзац и первая строка читались одним куском. */
.support-list > .support-list__row:last-child { padding-bottom: 0; }
.support-list__label {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text);
    min-width: 0;
}
/* Величина — вес и моноширина: в столбце из шести строк число обязано
   читаться раньше слов, иначе оно теряется хвостом предложения. */
.support-list__value {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}
.support-list__bar {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    overflow: hidden;
}
.support-list__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-text-muted);
}
/* Тон — суждение модели о величине: красит шкалу и само число, но не подпись.
   Подпись остаётся читаемой, а цвет говорит ровно о том, к чему относится. */
.support-list__row.is-ok .support-list__fill { background: var(--color-success); }
.support-list__row.is-warn .support-list__fill { background: var(--color-warning); }
.support-list__row.is-risk .support-list__fill { background: var(--color-danger); }
.support-list__row.is-risk .support-list__value { color: var(--color-danger); }

/* Свежесть навыков: что из умений просело и что с этим делает рынок.
   Строка = состояние точкой, имя навыка, поводок к дате последнего применения,
   под ними — доказательство и рыночная половина.

   Шкалы здесь сознательно нет. Свежесть не непрерывная величина: есть дата
   последнего применения и три состояния вокруг неё. Полоса, которую мы
   пробовали, обещала измерение и вдобавок читалась разделителем строк — то
   есть худшее состояние (полоса пустая) выглядело отсутствием данных. */
.skillfresh {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.skillfresh__head { margin-bottom: var(--space-3); }
.skillfresh__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}
.skillfresh__lead {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}
.skillfresh__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.skillfresh__row { display: grid; gap: 2px; }
.skillfresh__main { display: flex; align-items: baseline; gap: var(--space-2); }
/* Точка состояния — единственный цвет в строке: список навыков не должен
   превращаться в светофор, где не читаются сами слова. */
.skillfresh__dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border);
    transform: translateY(-1px);
}
.skillfresh__label {
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--color-text);
    min-width: 0;
}
/* Поводок к дате: без него имя и дата висят на разных краях строки, и глаз
   теряет, что к чему относится (та же роль, что у точек в оглавлении). */
/* Поводок ведёт глаз от имени к дате на широкой строке. На узкой он
   схлопывается в огрызок, неотличимый от дефиса внутри текста, поэтому там его
   нет вовсе: имя слева, дата справа, и связь читается без него. */
.skillfresh__rule { display: none; }
@media (min-width: 600px) {
.skillfresh__rule {
    display: block;
    flex: 1 1 auto;
    min-width: var(--space-3);
    height: 1px;
    background: var(--color-border);
    transform: translateY(-3px);
}
}
.skillfresh__when {
    /* Дата держится правого края даже без поводка: у коротких имён («AI»,
       «ITIL») она иначе прилипала к слову, и колонка дат ломалась — глаз
       переставал сравнивать строки между собой. */
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.skillfresh__row.is-fresh .skillfresh__dot { background: var(--color-success); }
.skillfresh__row.is-aging .skillfresh__dot { background: var(--color-warning); }
/* Алый — только там, где просевший навык роли ЕЩЁ И НУЖЕН, и это правило
   одно на всю строку: и на дату, и на точку.
   
   Прежде точка была красной у всех просевших «для группировки», и на живом
   блоке это дало семь алых маркеров подряд при серых датах — список читался
   как перечень проблем, хотя ни одна из этих строк действия не требует.
   Навык, который человек давно не применял, — факт биографии, а не упрёк;
   цвет тревоги на нём обесценивает тот же цвет там, где задача есть.
   Группировку по состоянию точка сохраняет: свежий зелёный, стареющий
   янтарный, просевший — тихий серый.

   Именно `--color-text-muted`, а не `--color-text-soft`: последний в светлой
   теме #3B404B, то есть ТЕМНЕЕ и янтарной точки стареющего, и приглушённой
   даты рядом — «спокойное» состояние выходило самой тяжёлой отметкой списка,
   и иерархия переворачивалась. `--color-text-disabled` не годится с другой
   стороны: в тёмной теме он #46464F и на тёмном фоне почти не виден. */
.skillfresh__row.is-stale .skillfresh__dot { background: var(--color-text-muted); }
.skillfresh__row.is-stale.is-required .skillfresh__dot { background: var(--color-danger); }
.skillfresh__row.is-stale.is-required .skillfresh__when { color: var(--color-danger); }
/* «Не датирован» — не «давно»: точка пустая (обводка вместо заливки), подпись
   приглушена, чтобы строку не прочитали как измерение. */
.skillfresh__row.is-undated .skillfresh__dot {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.skillfresh__row.is-undated .skillfresh__label { color: var(--color-text-muted); }
.skillfresh__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--space-2);
    margin-left: calc(6px + var(--space-2));
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--color-text-muted);
}
.skillfresh__where { min-width: 0; }
/* Требование роли — единственная метка в ряду, которая отвечает «и что?»:
   выделена весом и плотностью текста, а не своим цветом. Состояние уже сказано
   точкой и датой; красить метку тем же красным значило бы третий раз повторить
   один факт и превратить строку в светофор из четырёх цветов. */
.skillfresh__required {
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-border-soft);
}
/* Рыночная половина — вторая половина ценности прибора, и она не должна
   сливаться с названием компании: своя подложка отделяет её от доказательства. */
.skillfresh__trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    /* border-soft, а не surface-elevated: в светлой теме тот совпадает с белым
       фоном карточки, и пилюля исчезала — рыночная половина сливалась с
       названием компании рядом. */
    background: var(--color-border-soft);
}
.skillfresh__trend .icon { flex-shrink: 0; }
.skillfresh__trend.is-up { color: var(--color-success); }
.skillfresh__trend.is-down { color: var(--color-danger); }
.skillfresh__window { color: var(--color-text-muted); white-space: nowrap; }
/* Складка «остальное» — тем же языком, что складка заметки над картой
   (mono-eyebrow, не accent-ссылка): страница одна, и два разных приглашения
   раскрыть на ней читались бы как два разных механизма. */
.skillfresh__more { margin-top: var(--space-2); }
.skillfresh__more > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    list-style: none;
    font-variant-numeric: tabular-nums;
}
.skillfresh__more > summary::-webkit-details-marker { display: none; }
.skillfresh__more[open] .skillfresh__chev { transform: rotate(180deg); }
.skillfresh__chev { transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1); }
.skillfresh__more[open] > summary { margin-bottom: var(--space-2); }
.skillfresh__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    /* Заметка — один поток, а не две колонки: со свёрнутой прозой левая
       колонка стала втрое короче правой и оставляла дыру в половину блока.
       Абзац идёт во всю ширину (мера чтения держится max-width), опоры —
       колонками под ним. */
    .career-note__blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
    /* Нечётный последний блок идёт во всю ширину: иначе он занимает левую
       ячейку второго ряда, а справа остаётся пустая половина заметки — дыра,
       которую глаз читает как незагрузившийся контент. */
    .career-note__blocks > .career-note__block:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Точка отсчёта — «вы здесь». */
.career-now {
    border: 1px solid rgba(var(--color-accent-rgb), .4);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(var(--color-accent-rgb), .07), transparent);
    padding: var(--space-4);
    display: grid;
    /* minmax(0, 1fr), а не дефолтная auto-колонка: у линии карьеры max-content
       считается по сумме подписей отрезков, и на 375px колонка раздувалась до
       476px, вынося содержимое карточки за её правый край. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
}
.career-now__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.career-now__role { margin: 0; font-size: 1.125rem; }
.career-now__badge {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    letter-spacing: 0;
    text-transform: none;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--color-accent-rgb), .5);
    color: rgb(var(--color-accent-rgb));
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.career-now__meta { margin: 0; color: var(--color-text-muted); font-size: 0.875rem; }

/* --- Карточка варианта: компактный верх + раскрытие ------------------------ */
/* Проза варианта приходит длинной (обоснование до 1200 рун, риск и цитата по
   480, эксперимент 800) и может нести неразрывный кусок — имя роли латиницей,
   ссылку, длинный термин. overflow-wrap наследуется, поэтому переносу учим всю
   карточку разом: на 375px текст обязан переноситься, а не рвать сетку ряда.
   min-width: 0 снимает флексовый минимум по самому длинному слову. */
.career-vector {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
    /* Ритм внутри карточки задают сами блоки, а не ровный gap: у обзора,
       готовности и подвала разный вес, и одинаковые промежутки делали
       десять элементов одной серой стопкой. */
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
/* Rail готовности — приборная кромка карточки, тот же язык, что у ленты
   вакансий: доля закрытого читается боковым зрением при просмотре ряда,
   до всякого текста. */
.career-vector { position: relative; overflow: hidden; }

.career-vector__rail {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: calc(var(--readiness, 0) * 1%);
    background: linear-gradient(90deg,
        var(--color-teal),
        color-mix(in srgb, var(--color-teal) 55%, transparent));
    border-radius: 0 2px 2px 0;
    transition: width 0.4s ease;
}

/* Карточка отвечает на наведение так же, как карточка вакансии: подъём,
   акцентная рамка, заголовок в акценте. До этого ряд вариантов был
   единственным списком продукта, который на курсор не реагировал вовсе. */
.career-vector {
    transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.career-vector:hover,
.career-vector:focus-within {
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    transform: translateY(-2px);
}

.career-vector:hover .career-vector__title-link { color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
    .career-vector { transition: none; }
    .career-vector:hover,
    .career-vector:focus-within { transform: none; }
    .career-vector__rail { transition: none; }
}

.career-vector--selected {
    border-color: rgba(var(--color-accent-rgb), .7);
    box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), .35);
}
/* Верх — столбик: ряд меток (eyebrow), заголовок-направление, роль-подпись.
   Метки над заголовком, а не справа: заголовок не воюет с ними за ширину. */
.career-vector__top { display: flex; flex-direction: column; gap: 6px; }
/* Заголовок направления — главный элемент выбора на карте: до реворка он
   был 17px в ряду с девятью другими серыми строками и не выигрывал у них
   внимания. Теперь крупнее и с бейджем выбранного пути рядом. */
.career-vector__title {
    margin: 0;
    min-width: 0;
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.career-vector__chosen {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgb(var(--color-accent-rgb));
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

/* Метка уверенности — рядом с типом перехода, но тише его: это оценка
   модели, а не свойство дороги. */
.career-vector__tags-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.career-vector__tag--quiet {
    border-style: dashed;
    color: var(--color-text-muted);
}

/* Готовность — то, ради чего человек смотрит на карточку вторым взглядом:
   собственный блок с подписью, широкой полосой и числом крупно, а не две
   строки петита среди прочих. */
.career-vector__readiness {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--color-border-soft);
}

.career-vector__readiness-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.career-vector__gap-count {
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}
/* Роль-подпись: у нескольких вариантов цель — одна роль, и она нарочно тише
   направления. */
.career-vector__role {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-text-muted);
}
/* «Меняется: должность, отрасль» — под ролью тем же размером, но цветом
   текста, а не приглушённым: это ответ на «что это за жизнь», а не подпись.
   Ряд карты называет расстояние, строка — из чего оно сложилось. */
.career-vector__changes {
    margin: var(--space-1) 0 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-text);
}
.career-vector__tag {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Тяжесть разрыва — тоном метки. Блокирующее закрывает дверь в роль, мелкое
   её красит, и в одинаковых серых плашках разницу приходилось вычитывать
   словами. Грань, а не заливка: ряд остаётся спокойным. */
.career-vector__tag--gap-blocking {
    border-color: var(--color-amber, #c8903d);
    color: var(--color-amber-strong, var(--color-amber, #a9701f));
}
.career-vector__tag--gap-minor {
    border-color: var(--color-border);
    color: var(--color-text-soft);
}

/* Метки верха: тип варианта слева, цена возврата прижата вправо.
   Ряд ПЕРЕНОСИТСЯ. Прежний `nowrap` держал обе метки в одной строке, но запрет
   переноса не создаёт места: когда карта стала двухколоночной, левая группа
   перестала помещаться рядом с ценой возврата, и метки полезли друг на друга —
   «ВЫБРАННЫЙ ПУТЬ» уходил под «Обратной дороги нет». Второй ярус читается хуже
   одной строки, но наложение не читается вовсе. */
.career-vector__tags {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px var(--space-2);
}
/* Пока места хватает, цена возврата прижата вправо; когда не хватает — уезжает
   на свою строку целиком, а не сжимается в нечитаемый огрызок. */
.career-vector__tags .career-vector__tags-group { flex: 1 1 auto; }
.career-vector__tags .career-vector__rev { margin-left: auto; flex: 0 0 auto; }
/* Цена возврата — суждение о развилке, а не украшение: три состояния читаются
   цветом И словом, потому что цвет один не переживает дальтонизм и печать. */
.career-vector__rev {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    line-height: 1.2;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid currentColor;
    white-space: nowrap;
    color: var(--color-text-muted);
}
.career-vector__rev .icon { flex-shrink: 0; }
/* Плашка, а не голый цветной текст: 11px не добирает 4.5:1 на светлой теме
   ни зелёным (#12925A — 3.97:1), ни жёлтым (#B5730B — 3.87:1). Пара
   «подложка + ink на step deeper» — тот же приём, которым живут .badge--*,
   и он проходит AA в обеих темах. */
.career-vector__rev--easy {
    background: rgba(var(--color-sage-rgb), 0.12);
    border-color: rgba(var(--color-sage-rgb), 0.35);
    color: var(--color-sage-deep);
}
.career-vector__rev--hard {
    background: var(--color-warning-soft);
    border-color: rgba(var(--color-amber-rgb), 0.35);
    color: var(--color-warning-strong);
}
.career-vector__rev--one-way {
    background: rgba(var(--color-danger-rgb), 0.12);
    border-color: rgba(var(--color-danger-rgb), 0.35);
    color: var(--color-danger);
}
.career-vector__meta { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.career-vector__meta-selected { color: rgb(var(--color-accent-rgb)); font-weight: 600; }
.career-vector__distance {
    margin: 0;
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--color-text);
}
.career-vector__distance > span { min-width: 0; }
.career-vector__distance .icon { color: rgb(var(--color-accent-rgb)); flex-shrink: 0; margin-top: 2px; }
.career-vector__against { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.career-vector__against i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-warning);
    margin-right: 6px;
    vertical-align: middle;
}
/* Эхо замера: карточка ведёт в ту же роль, что и предыдущая. Тон приглушён и
   набор мельче основного слоя — это объяснение отсутствия чисел, а не ещё один
   замер, и спорить за внимание с настоящими цифрами соседней карточки оно не
   должно. */
.career-vector__echo {
    margin: 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-soft);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}
/* Числовой слой карточки: разрыв до ядра роли. Подписью, а не заголовком;
   замер, которого нет, гасится до приглушённого текста, чтобы отсутствие числа
   не читалось как число. */
.career-vector__gap {
    margin: 0;
    display: flex;
    align-items: center;
    /* Полоса занимает свою строку целиком: в одной строке с дробью она
       сжималась до сотни пикселей на мобиле и переставала читаться как
       индикатор — то есть переставала быть графикой вовсе. */
    flex-wrap: wrap;
    gap: 4px var(--space-2);
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--color-text);
}
.career-vector__gap .icon { flex-shrink: 0; margin-top: 1px; color: var(--color-text-muted); }
.career-vector__unmeasured { color: var(--color-text-muted); }
/* Карточка без замера не открывает отдельную секцию: ни заголовка, ни
   отчерка — одна тихая строка в потоке карточки. С отчерком пустой блок
   занимал столько же места, сколько измеренный, и обещал содержимое. */
.career-vector__readiness--quiet {
    border-top: 0;
    padding-top: var(--space-2);
}
/* Полоса покрытия в блоке готовности растягивается на ширину карточки:
   она и есть ответ «насколько я готов», а число стоит следующей строкой.
   Прежняя полоса в 3.5rem жалась к дроби в одной строке петита и не
   читалась вовсе. */
.career-vector__gap-bar {
    flex: 1 0 100%;
    min-width: 0;
    height: 8px;
    margin: 0 0 2px;
    /* Фон плотнее общего .meter: на карточке полоса часто заполнена на
       единицы процентов, и на бледном фоне она читалась пустым местом —
       то есть отсутствием данных, а не малым покрытием. */
    background: var(--color-border);
}
.career-vector__gap-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-teal);
}

/* Связь между вариантами меняет решение, поэтому стоит до раскрытия
   подробностей. Строка «исключит N вариантов» — тихая, а не янтарная: она есть на КАЖДОЙ
   карточке, и четыре предупреждающих цвета в одном экране читаются как «всё
   опасно», то есть как ничего. Это цена выбора, названная заранее. */
.career-vector__excludes {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.career-vector__excludes .icon { flex-shrink: 0; margin-top: 1px; }
.career-vector__rev-reason { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
/* Заголовок акта — имя раздела, а не служебная бирка. Mono-капсом в 11px он
   весил столько же, сколько подпись к ячейке сводки: страница из восьми
   разделов читалась одной плоскостью, где ничто не главнее другого. */
.career-vector__rationale { margin: 0; color: var(--color-text-muted); font-size: 0.9375rem; }

.career-vector__tradeoff { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.career-vector__experiment {
    margin: 0;
    display: flex;
    min-width: 0;
    gap: var(--space-2);
    align-items: flex-start;
    font-size: 0.875rem;
    color: var(--color-text);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(var(--color-accent-rgb), 0.08);
}

/* Лид досье — ответ «что это за ход», первым и крупно. Прежде этот же текст
   стоял последним на странице, мелким и приглушённым: лучший абзац страницы
   читался меньше всех. Серифный display, как у заголовка, — продолжение одной
   мысли, а не подпись к ней. */

/* --- Маршрут станций (ui_career_route) ----------------------------------- */
/* Signature-элемент карты: дорога рисуется дорогой, а не нумерованным
   списком. Вертикальный рельс с узлами; линия соединяет остановки. */
.career-route {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    position: relative;
}
.career-route__stop {
    position: relative;
    padding: 0 0 var(--space-4) 2.25rem;
    min-width: 0;
}
.career-route__stop:last-child { padding-bottom: 0; }
/* Линия — на каждой остановке до следующей: обрывается сама на последней. */
/* Одна ось на линию и узлы (--route-x): каждый центрируется по ней сам
   (translateX(-50%), border-box). Прежде линия рисовалась от оси вправо на
   свою толщину, а узлы — от той же точки на половину своей ширины, и на
   экране кружки стояли мимо линии. */
.career-route { --route-x: 0.75rem; }
.career-route__stop::before {
    content: "";
    position: absolute;
    left: var(--route-x);
    top: 1.1rem;
    bottom: -0.1rem;
    width: 2px;
    transform: translateX(-50%);
    background: var(--color-border-strong);
}
.career-route__stop:last-child::before { display: none; }
.career-route__dot {
    position: absolute;
    left: var(--route-x);
    top: 0.35rem;
    box-sizing: border-box;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    transform: translateX(-50%);
}
/* «Сейчас» — точка отсчёта: акцентная заливка (та же грамматика, что узел
   «вы здесь» на рельсе карты). */
.career-route__stop--now .career-route__dot {
    background: rgb(var(--color-accent-rgb));
    border-color: rgb(var(--color-accent-rgb));
}
/* Точка отправления читается наравне с целью: маршрут отвечает «откуда и
   куда», и если «откуда» набрано тише промежуточных станций, половина ответа
   пропадает. Приглушённым оставался только цвет — вес возвращён. */
.career-route__stop--now .career-route__label { font-weight: 600; color: var(--color-text); }
/* Цель — «мишень» того же языка, что узлы: акцентное кольцо с точкой,
   на ступень крупнее, на той же оси. Флаг в увеличенном круге был значком
   другого семейства, вставленным в линию, и читался чужеродно. */
.career-route__stop--target .career-route__dot {
    width: 1rem;
    height: 1rem;
    top: 0.2rem;
    border-color: rgb(var(--color-accent-rgb));
    background: radial-gradient(circle, rgb(var(--color-accent-rgb)) 0 2.5px, var(--color-surface) 3px);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.14);
}
.career-route__stop--target .career-route__label { font-weight: 600; }
.career-route__label { display: block; font-size: 0.9375rem; line-height: 1.4; }
.career-route__why {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    max-width: 52ch;
}

/* Компакт (другая дорога): та же лесенка, плотнее и тише. */
.career-route--compact .career-route__stop { padding-bottom: var(--space-2); }
.career-route--compact .career-route__stop::before { top: 0.95rem; }
.career-route--compact .career-route__label { font-size: 0.875rem; }

/* --- «Почему не это» ------------------------------------------------------ */
/* Отказ — одна карточка с абзацами: имя роли и причина идут одним
   предложением. Прежде это была двухколоночная таблица, где имя стояло слева,
   а объяснение начиналось в четырёхстах пикселях правее — пара читалась двумя
   несвязанными строками, а между ними лежала пустая полоса. */
.career-excluded {
    margin-top: var(--space-6);
    margin-bottom: var(--space-8);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, var(--radius-md));
    background: var(--color-surface);
}
.career-excluded .career-row__title,
.career-roles .career-row__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.career-excluded ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.career-excluded li {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-soft);
    max-width: 78ch;
}
.career-excluded__role { font-weight: 600; color: var(--color-text); }

/* Карта и рынок — две колонки. Рыночные блоки лежали хвостом страницы, в трёх
   тысячах пикселей ниже вариантов, к которым относятся: человек выбирал
   дорогу, не видя, что рынок просит от её роли. Теперь рынок идёт вдоль карты
   и читается одновременно с решением.

   Порог 1140px, а не 992: колонка кабинета уже забрала 232px, и на 1024
   основному содержанию оставалось бы меньше 500px — карта station-rail в такой
   ширине ломается. Ниже порога рейл встаёт под карту обычным блоком. */
/* Вход в общий список резюме — тихая строка под сеткой профессии. */
.profile-resumes__all { margin: var(--space-4) 0 0; font-size: 0.875rem; }

/* ============================================================
   ui_career_horizon — карта вариантов картинкой («горизонт»).
   Человек внизу, полосы — расстояние, кольцо узла — закрытые
   требования роли, рисунок линии — цена возврата, акцент —
   выбранный путь. Координаты приходят процентами поля (--x/--y),
   подпись узла режется по шагу соседей ряда (--w, доля ширины
   поля через container query). Появление — одна последовательность;
   [data-seen] (career-horizon.js) гасит её для уже виденного.
   ============================================================ */
.career-horizon {
    --ch-gutter: 3.5rem;
    --ch-node: 44px;
    --ch-plot-h: 520px;
    --ch-road: var(--color-text-muted);
    /* Старт после первой отрисовки: скрипт успевает пометить виденное
       до того, как что-то начнёт двигаться. */
    --ch-t0: 140ms;
    --ch-step-row: 280ms;
    --ch-step-i: 80ms;
    --ch-draw: 680ms;
    position: relative;
    margin: 0 0 var(--space-6);
    padding: var(--space-4) var(--space-4) var(--space-3);
    background:
        radial-gradient(120% 70% at 50% 100%, rgba(var(--color-accent-rgb), 0.07), transparent 62%),
        var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.career-horizon__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.career-horizon__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.career-horizon__tools { display: flex; gap: var(--space-1); }
.career-horizon__bar { flex-wrap: nowrap; }
.career-horizon__title { min-width: 0; }
/* На телефоне инструменты — иконки 44×44 в строке заголовка: подписями они
   занимали отдельную строку над картой. Имя остаётся в aria-label. */
@media (max-width: 559px) {
    .career-horizon__tool { width: 44px; height: 44px; padding: 0; justify-content: center; }
    .career-horizon__tool > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
html:not(.js) .career-horizon__expand { display: none; }
/* «Пожелания» на странице — вкладка прямо над картой; на самой карте кнопка
   нужна только в развёрнутом режиме, где вкладок не видно. */
.career-horizon:not(.is-expanded) .career-horizon__prefs { display: none; }

.career-horizon__stage { position: relative; }
.career-horizon__canvas {
    transform-origin: 0 0;
    transform: translate(var(--ch-tx, 0px), var(--ch-ty, 0px)) scale(var(--ch-s, 1));
}
.career-horizon__plot {
    position: relative;
    container: ch-plot / inline-size;
    height: var(--ch-plot-h);
    margin: 4.5rem 0 4.25rem var(--ch-gutter);
}
.career-horizon--no-far .career-horizon__plot { margin-top: 1.5rem; }
/* Поднятой подписи нужно ~180px между полосами, иначе она ложится на
   кольца ряда выше: карта с ярусами на телефоне выше. */
@media (max-width: 559px) {
    .career-horizon--tiered { --ch-plot-h: 620px; }
}
.career-horizon__roads {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Полосы расстояния: пунктирная черта по полю и имя в колонке слева. */
.ch-band-line {
    stroke: var(--color-border-strong);
    stroke-width: 1;
    stroke-dasharray: 2 5;
    vector-effect: non-scaling-stroke;
    animation: ch-fade 420ms var(--ease-out) var(--ch-t0) both;
}
.ch-band-line--empty { opacity: 0.55; }
.ch-band {
    position: absolute;
    top: calc(var(--y) * 1%);
    left: calc(-1 * var(--ch-gutter));
    width: calc(var(--ch-gutter) - var(--space-2));
    transform: translateY(-50%);
    font-size: var(--font-size-xs);
    line-height: 1.25;
    color: var(--color-text-soft);
    animation: ch-fade 420ms var(--ease-out) var(--ch-t0) both;
}
.ch-band--empty { color: var(--color-text-disabled); }

/* Дороги. Рисунок — цена возврата; толщина от растяжения поля не зависит. */
.ch-road {
    fill: none;
    stroke: var(--ch-road);
    stroke-width: 1.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.75;
    transition: opacity 200ms var(--ease-out), stroke-width 200ms var(--ease-out);
}
.ch-road--hard { stroke-dasharray: 7 5; }
.ch-road--one-way { stroke-dasharray: 0.5 5; stroke-width: 2.25; }
.ch-road--selected { stroke: var(--color-accent); stroke-width: 3; opacity: 1; }
.ch-road--selected.ch-road--one-way { stroke-width: 3.5; }
/* Маска прорисовки: белый штрих длиной в дорогу, уезжающий с 1 к 0. */
.ch-mask {
    fill: none;
    stroke: white;
    /* Без non-scaling-stroke: с ним Chrome меряет штрих маски в пикселях
       экрана и pathLength перестаёт работать — дорога рвалась кусками.
       Толщина в единицах поля: маске нужна только ширина с запасом. */
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
    animation: ch-draw var(--ch-draw) var(--ease-out) both;
    animation-delay: calc(var(--ch-t0) + 260ms + var(--row) * var(--ch-step-row) + var(--i) * var(--ch-step-i));
}

/* Точка отсчёта. */
.ch-origin {
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -9px);
    pointer-events: none;
}
.ch-origin__dot {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 5px rgba(var(--color-accent-rgb), 0.18);
    animation: ch-pop 420ms var(--ease-spring) var(--ch-t0) both;
}
.ch-origin__dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(var(--color-accent-rgb), 0.45);
    animation: ch-ripple 1400ms var(--ease-out) calc(var(--ch-t0) + 200ms) 2 both;
}
.ch-origin__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--space-2);
    max-width: 16rem;
    text-align: center;
    font-size: var(--font-size-sm);
    line-height: 1.25;
    color: var(--color-text);
    animation: ch-fade 420ms var(--ease-out) var(--ch-t0) both;
}
.ch-origin__label b { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-accent); }

/* Станции — промежуточные должности на дороге. */
.ch-station {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    z-index: 1;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--ch-road);
    animation: ch-pop 320ms var(--ease-spring) both;
    animation-delay: calc(var(--ch-t0) + 260ms + var(--row) * var(--ch-step-row) + var(--i) * var(--ch-step-i) + 140ms + var(--k) * 130ms);
}
.ch-station--selected { border-color: var(--color-accent); }
.ch-station__label {
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
    /* Ширину даёт сервер: место до соседнего узла на той же высоте (--sw,
       доля поля). Длинное название переносится в две строки, а не ложится
       на узел. */
    width: max-content;
    max-width: min(calc(var(--sw, 30) * 1cqi), 12rem);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: var(--color-text-soft);
    opacity: 0;
    transition: opacity 180ms var(--ease-out);
    pointer-events: none;
}
.ch-station--before .ch-station__label { left: auto; right: calc(100% + 6px); }
.ch-station.is-focus .ch-station__label { opacity: 1; }
@media (min-width: 768px) {
    /* Станции своего пути подписаны всегда: это и есть его маршрут. */
    .ch-station--selected .ch-station__label { opacity: 1; }
}

/* Узел-прибор: кольцо — доля главных требований роли, ядро — выбор. */
.ch-node {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    z-index: 3;
    width: var(--ch-node);
    height: var(--ch-node);
    margin: calc(var(--ch-node) / -2) 0 0 calc(var(--ch-node) / -2);
    border-radius: 50%;
    color: var(--color-text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    animation: ch-pop 420ms var(--ease-spring) both;
    animation-delay: calc(var(--ch-t0) + 260ms + var(--row) * var(--ch-step-row) + var(--i) * var(--ch-step-i) + var(--ch-draw) - 160ms);
}
.ch-node:focus-visible { outline: none; }
.ch-node:focus-visible .ch-node__dot { box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-accent); }
.ch-node__dot {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.ch-node__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ch-node__track { fill: none; stroke: var(--color-border-strong); stroke-width: 3; }
.ch-node--unmeasured .ch-node__track { stroke-dasharray: 3 4; }
.ch-node__arc {
    fill: none;
    stroke: var(--color-teal);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--pct));
    animation: ch-arc 760ms var(--ease-out) both;
    animation-delay: calc(var(--ch-t0) + 260ms + var(--row) * var(--ch-step-row) + var(--i) * var(--ch-step-i) + var(--ch-draw) + 120ms);
}
.ch-node__core {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-text-muted);
}
.ch-node--selected .ch-node__core {
    width: 16px;
    height: 16px;
    background: var(--color-accent);
    box-shadow: 0 0 0 5px rgba(var(--color-accent-rgb), 0.16);
}
.ch-node--added .ch-node__dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(var(--color-teal-rgb), 0.5);
    animation: ch-ripple 1400ms var(--ease-out) 2 both;
    animation-delay: calc(var(--ch-t0) + 260ms + var(--row) * var(--ch-step-row) + var(--i) * var(--ch-step-i) + var(--ch-draw) + 300ms);
}
@media (hover: hover) {
    .ch-node:hover .ch-node__dot { transform: scale(1.08); box-shadow: var(--shadow-md); }
}

.ch-node__label {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: max-content;
    max-width: min(calc(var(--w) * 1cqi), 13.5rem);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-surface) 86%, transparent);
    text-align: center;
}
.ch-node--start .ch-node__label { left: -2px; transform: none; align-items: flex-start; text-align: left; }
.ch-node--end .ch-node__label { left: auto; right: -2px; transform: none; align-items: flex-end; text-align: right; }
.ch-node__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.ch-node__meta {
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}
.ch-node__flag {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-accent);
}
.ch-node__flag--new { color: var(--color-teal-deep); }

/* Узкое поле (телефон): ширина подписи — по соседу своего яруса, до трёх
   строк; подпись соседа, который не помещается, поднята на ярус выше и
   связана с узлом выносной линией (раскладку считает сервер). */
@container ch-plot (max-width: 560px) {
    .ch-node__label { max-width: min(calc(var(--wm) * 1cqi), 13.5rem); }
    .ch-station__label { max-width: min(calc(var(--sw, 30) * 1cqi), 7.5rem); }
    .ch-node--tier .ch-node__label { bottom: calc(100% + 64px); }
    .ch-node--tier .ch-node__label::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        height: 58px;
        border-left: 1px solid var(--color-border-strong);
    }
    .ch-node--tier.ch-node--start .ch-node__label::after { left: 24px; }
    .ch-node--tier.ch-node--end .ch-node__label::after { left: auto; right: 24px; }
}
.ch-node__flag { white-space: nowrap; }

/* Направление (заголовок карточки) раскрывается под ролью при наведении и
   фокусе — только на широком поле: на телефоне нажатие ведёт в досье, а
   подписи и так тесно. */
.ch-node__dir {
    display: none;
    margin-top: 2px;
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: var(--color-text-soft);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@container ch-plot (min-width: 561px) {
    .ch-node.is-focus .ch-node__dir { display: -webkit-box; }
    .ch-node.is-focus { z-index: 5; }
    .ch-node.is-focus .ch-node__label { background: var(--color-surface); box-shadow: var(--shadow-sm); }
}

/* Варианты — карточками ролей (29.10): тот же язык, что вид «Ключевые
   шаги». Подпись над точкой — карточка: метка, имя, «Требования» полосой
   ui_stat_bar. Кольцо готовности вокруг точки снято (число на полосе), точка
   — простая, у выбранного пути — акцентная. */
.ch-node__ring { display: none; }
/* Точка — 14px на линии полосы; узел-ссылка остаётся 44px (цель нажатия). */
.ch-node__dot {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    translate: -50% -50%;
    border: 2px solid var(--color-border-strong);
    box-shadow: 0 0 0 3px var(--color-surface);
}
.ch-node__core { display: none; }
.ch-node--selected .ch-node__dot { width: 18px; height: 18px; border: 0; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.18); }
.ch-node--added .ch-node__dot::after { inset: -6px; }
.career-horizon__plot { margin-top: 6.5rem; margin-bottom: 5.5rem; }
@media (max-width: 559px) { .career-horizon__plot { margin-top: 4.5rem; margin-bottom: 7rem; } }
.career-horizon--no-far .career-horizon__plot { margin-top: 3rem; }
.ch-node__label {
    align-items: stretch;
    gap: 3px;
    min-width: 7.5rem;
    padding: 8px 10px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    text-align: left;
}
.ch-node--start .ch-node__label, .ch-node--end .ch-node__label { align-items: stretch; text-align: left; }
.ch-node--selected .ch-node__label {
    border-color: rgba(var(--color-accent-rgb), 0.5);
    background: linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.07), transparent), var(--color-surface);
}
.ch-node__flag {
    align-self: flex-start;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: rgba(var(--color-accent-rgb), 0.1);
}
.ch-node__flag--new { background: rgba(var(--color-teal-rgb), 0.1); }
.ch-node__meta { margin-top: 4px; }
/* Карточки ролей одного размера, как в «Ключевых шагах»: ширина и
   высота общие, показатели прижаты к низу. */
.ch-node__meta { display: grid; gap: 6px; margin-top: auto; }
.ch-node__name { -webkit-line-clamp: 3; }
@container ch-plot (min-width: 561px) {
    .ch-node__label { width: 10.5rem; max-width: none; min-height: 6.25rem; }
}
@media (hover: hover) {
    .ch-node:hover .ch-node__label { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
}
/* Нынешняя должность — зелёная галочка в точке начала дорог и карточка
   должности под ней. */
.ch-origin__label {
    position: relative;
    padding: 8px 12px;
    border: 1px solid rgba(var(--color-sage-rgb), 0.45);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(var(--color-sage-rgb), 0.08), rgba(var(--color-sage-rgb), 0.02)), var(--color-surface);
    box-shadow: 0 0 0 4px rgba(var(--color-sage-rgb), 0.07);
}
.ch-origin__dot {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    background: var(--color-sage);
    color: var(--color-surface);
    box-shadow: 0 0 0 4px rgba(var(--color-sage-rgb), 0.18);
}
.ch-origin__dot::after { border-color: rgba(var(--color-sage-rgb), 0.45); }
.ch-origin__dot .icon { width: 13px; height: 13px; stroke-width: 3; }
.ch-origin__role { font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
/* Промежуточная должность — серая пунктирная плашка, как промежуточная
   карточка «Ключевых шагов». */
.ch-station__label {
    padding: 2px 8px;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
}

/* Узкое поле: карточка без полосы и подписи показателя — «6 из 12» под
   именем, как прежде; иначе соседние карточки ложились бы друг на друга. */
@container ch-plot (max-width: 560px) {
    /* Узкое поле раскладывает подписи по ширине текста и ярусам; рамка и
       отступы карточки ломали эту раскладку, и соседние роли ложились одна
       на другую. Здесь подпись — без рамки, как была. */
    .ch-node__label,
    .ch-node--selected .ch-node__label {
        min-width: 0;
        padding: 2px 6px;
        gap: 1px;
        border: 0;
        box-shadow: none;
        background: color-mix(in srgb, var(--color-surface) 86%, transparent);
    }
    .ch-node__meta { margin-top: 0; }
    .ch-node__meta .stat-bar__label, .ch-node__meta .stat-bar__track { display: none; }
    /* На телефоне — одно число, готовность к требованиям: два числа без
       подписей под именем читались бы загадкой. */
    .ch-node__steps { display: none; }
    .ch-node__meta .stat-bar { display: block; }
    .ch-node__flag { padding: 0 6px; }
}


/* Связь узла и карточки: наведение на одно подсвечивает второе. */
.career-horizon[data-focus] .ch-road:not(.is-focus) { opacity: 0.22; }
.career-horizon[data-focus] .ch-node:not(.is-focus) { opacity: 0.5; }
.career-horizon[data-focus] .ch-station:not(.is-focus) { opacity: 0.4; }
.ch-road.is-focus { opacity: 1; stroke-width: 3; }
.ch-node { transition: opacity 200ms var(--ease-out); }
.ch-station { transition: opacity 200ms var(--ease-out); }
.career-vector.is-horizon-focus { box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-md); }

/* Ключ — только то, что на карте есть. */
.career-horizon__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
    font-size: var(--font-size-xs);
    line-height: 1.35;
    color: var(--color-text-soft);
}
.ch-legend { display: inline-flex; align-items: center; gap: var(--space-2); }
.ch-legend::before { content: ""; flex: none; }
.ch-legend--ring::before {
    width: 22px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #14B8A6, #5FB8E8 60%, var(--progress-track) 60%);
}
.ch-legend--easy::before,
.ch-legend--hard::before,
.ch-legend--one-way::before { width: 22px; border-top: 2px solid var(--ch-road); }
.ch-legend--hard::before { border-top-style: dashed; }
.ch-legend--one-way::before { border-top-style: dotted; border-top-width: 3px; }
.ch-legend--station::before {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--ch-road);
}

/* Развёрнутый режим: поле во весь экран, масштаб и сдвиг. */
.career-horizon:not(.is-expanded) :is(.career-horizon__zoom, .career-horizon__hint, .career-horizon__close, .career-horizon__panel) { display: none; }
.career-horizon.is-expanded .career-horizon__expand { display: none; }
.career-horizon.is-expanded {
    --ch-plot-h: min(560px, 62vh);
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: max(var(--space-3), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background:
        radial-gradient(circle, rgba(var(--color-text-rgb), 0.13) 1px, transparent 1.4px) 0 0 / 22px 22px,
        radial-gradient(120% 70% at 50% 100%, rgba(var(--color-accent-rgb), 0.07), transparent 62%),
        var(--color-bg);
}
.career-horizon.is-expanded .career-horizon__stage {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    user-select: none;
}
.career-horizon.is-expanded .career-horizon__stage.is-dragging { cursor: grabbing; }
.career-horizon.is-expanded .ch-node { cursor: grab; touch-action: none; }
.career-horizon__canvas.is-smooth { transition: transform 240ms var(--ease-out); }
.career-horizon.is-expanded .career-horizon__canvas {
    display: flex;
    align-items: center;
    min-height: 100%;
}
.career-horizon.is-expanded .career-horizon__plot {
    flex: 1;
    max-width: 72rem;
    margin-inline: var(--ch-gutter) auto;
}
@media (min-width: 768px) {
    .career-horizon.is-expanded .career-horizon__plot { margin-inline: calc(var(--ch-gutter) + var(--space-4)) auto; }
}
/* Все станции подписаны только на широком поле: на телефоне их подписи
   спорили бы с подписями узлов — там они видны у выбранного узла. */
@container ch-plot (min-width: 561px) {
    .career-horizon.is-expanded .ch-station__label { opacity: 1; }
}
.career-horizon__zoom {
    position: absolute;
    left: 0;
    bottom: var(--space-2);
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.career-horizon__zoom-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
.career-horizon__zoom-btn > span:empty { display: none; }
.career-horizon__hint {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--space-2);
    z-index: 3;
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    pointer-events: none;
}
.career-horizon__panel {
    position: absolute;
    z-index: 5;
    left: calc(-1 * var(--space-4));
    right: calc(-1 * var(--space-4));
    bottom: calc(-1 * var(--space-3));
    max-height: 72%;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--space-4) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-lg);
    cursor: auto;
    touch-action: pan-y;
    animation: ch-sheet 280ms var(--ease-out) both;
}
.career-horizon__panel .career-vector { box-shadow: none; border: 0; padding: 0; }
.career-horizon__panel-head {
    position: sticky;
    top: calc(-1 * var(--space-4));
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-1);
    padding: var(--space-2) var(--space-2) 0;
    background: var(--color-surface);
}
.career-horizon__panel-grip {
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
}
.career-horizon__panel-close {
    position: absolute;
    right: var(--space-2);
    top: var(--space-1);
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
}
.career-horizon__panel-close > span:empty { display: none; }
@media (min-width: 768px) {
    .career-horizon { --ch-gutter: 7rem; --ch-plot-h: 470px; padding: var(--space-5) var(--space-5) var(--space-3); }
    .career-horizon__panel-grip { visibility: hidden; }
    /* Поле уступает место панели: карточка не закрывает правые узлы. */
    .career-horizon.is-expanded .career-horizon__canvas { transition: margin-right 320ms var(--ease-out); }
    .career-horizon.is-expanded .career-horizon__canvas.is-smooth { transition: transform 240ms var(--ease-out), margin-right 320ms var(--ease-out); }
    .career-horizon.has-panel .career-horizon__canvas { margin-right: 25rem; }
    .career-horizon__panel {
        left: auto;
        right: 0;
        top: var(--space-2);
        bottom: var(--space-2);
        width: 24rem;
        max-height: none;
        border-radius: var(--radius-lg);
        animation-name: ch-slide;
    }
}
html.has-horizon-open { overflow: hidden; }

@keyframes ch-fade { from { opacity: 0; } }
@keyframes ch-pop { from { opacity: 0; transform: scale(0.4); } }
@keyframes ch-draw { from { stroke-dashoffset: 1; } }
@keyframes ch-arc { from { stroke-dashoffset: 100; } }
@keyframes ch-ripple { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
@keyframes ch-sheet { from { transform: translateY(24px); opacity: 0; } }
@keyframes ch-slide { from { transform: translateX(24px); opacity: 0; } }

/* Уже виденная карта не переигрывается: только узлы, которых этот браузер
   ещё не видел (data-fresh). */
.career-horizon[data-seen] :is(.ch-band-line, .ch-band, .ch-origin__dot, .ch-origin__dot::after, .ch-origin__label),
.career-horizon[data-seen] .ch-mask:not([data-fresh]),
.career-horizon[data-seen] .ch-station:not([data-fresh]),
.career-horizon[data-seen] .ch-node:not([data-fresh]),
.career-horizon[data-seen] .ch-node:not([data-fresh]) :is(.ch-node__arc, .ch-node__dot::after) { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .career-horizon *,
    .career-horizon *::before,
    .career-horizon *::after { animation: none !important; transition: none !important; }
}

/* Страница карты (19.10): горизонт → варианты с рынком их ролей рейлом
   справа → «Почему карта такая» → «Откуда вы идёте». */
.path-widget + .career-horizon { margin-top: var(--space-4); }
.career-layout { display: grid; gap: var(--space-6); align-items: start; margin-bottom: var(--space-8); }
.career-layout__main { display: grid; gap: var(--space-6); min-width: 0; }
/* Колонка вариантов и «Как собрана карта» (06.11): одна колонка рядом с
   рейлом рынка, без своей ширины — правая кромка у обоих блоков одна. */
.career-layout__col { display: grid; gap: var(--space-8); min-width: 0; }
.career-layout__col > .career-why { margin-bottom: 0; max-width: none; }
/* «Улучшить» в шапке карты ведёт туда же, куда вкладка «Пожелания» прямо под
   ней. На телефоне кнопка во всю ширину была второй строкой того же
   действия и отодвигала карту на 76px; на десктопе она стоит в углу шапки,
   как у профессии и резюме, и дублем не читается. */
@media (max-width: 599px) {
    .page-head__actions .career-improve { display: none; }
    .page-head__actions:has(> .career-improve:only-child) { display: none; }
}
.career-layout__rail {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    min-width: 0;
}
/* Заголовок рейла подписывает колонку, а не ведёт раздел страницы: в размере
   заголовка карты он спорил с ней за внимание. */
.career-layout__rail > .career-row__title { font-size: 1rem; }

/* «Что даст выбор пути» — первым в рейле, пока путь не выбран: три строки со
   значками и подпись, что выбор обратим. Тот же вид карточки, что у блоков
   рынка под ней. */
.career-choose {
    padding: var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}
.career-choose__title { margin: 0 0 var(--space-3); font-size: 1rem; font-weight: 600; color: var(--color-text); }
.career-choose__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.career-choose__list li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.875rem; line-height: 1.45; color: var(--color-text-soft); }
.career-choose__icon { flex: none; margin-top: 0.15em; color: var(--color-accent); }
.career-choose__note { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border-soft); font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-muted); }
.career-layout__rail > .career-choose + .career-row__title { margin-top: var(--space-3); }
@media (min-width: 1140px) {
    /* Варианты слева, рынок их ролей справа. 22rem, а не 20: в блоке спроса
       строка несёт имя требования, долю и знаменатель, и на 320px знаменатель
       обрезался. Карточек в ряду две (minmax 18rem в колонке ~680px) — прежние
       три по 228px давали заголовок в четыре строки. Липкости у рейла нет: он
       растёт с числом ролей и на четырёх длиннее экрана. */
    .career-layout { grid-template-columns: minmax(0, 1fr) 22rem; column-gap: var(--space-5); }
    /* Рынка ролей нет — вариантам вся ширина: пустая правая колонка
       оставляла треть экрана дырой. */
    .career-layout--solo { grid-template-columns: minmax(0, 1fr); }
    /* Рейл липнет (06.11): роли кроме первой свёрнуты строками, и он
       помещается в экран; колонка вариантов и «Как собрана карта» под ним
       длиннее, и без липкости справа оставалась пустота. */
    .career-layout__rail { position: sticky; top: var(--space-4); }
}

/* Разделы страницы карты: заголовок раздела одного размера везде. */
.career-section__title { margin: 0; font-size: var(--font-size-lg); font-weight: 600; letter-spacing: -0.01em; }

/* Варианты — единая сетка одинаковых карточек. Расстояние несёт метка на
   карточке (полоса горизонта), а не заголовок ряда: ряд из одной карточки
   оставлял пол-экрана пустоты и читался сломанной сеткой. */
.career-variants__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    margin-bottom: var(--space-3);
}
.career-variants__hint { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.career-variants__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    align-items: stretch;
}
.career-variants__grid > .career-vector { height: 100%; }
/* Метка полосы — первой в ряду меток, весом текста, без цвета: цвет на
   карте значит выбор и готовность, третий смысл ему не нужен. */
.career-vector__distance {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    white-space: nowrap;
}

/* «Как собрана карта» — одна карточка: разбор вводным абзацем, под ним
   строки одного облика, свёрнутые по умолчанию. Вложенные блоки теряют свою
   рамку и шапку: их имя стоит в строке. */
.career-why { margin-bottom: var(--space-8); max-width: 52rem; }
.career-why .career-section__title { margin-bottom: var(--space-3); }
.career-why__card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.career-why__card > .career-note {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    /* Колонка не шире карточки: превью блоков без переноса иначе
       растягивало сетку, и текст разбора уходил за правый край. */
    grid-template-columns: minmax(0, 1fr);
}
.career-why__item { border-top: 1px solid var(--color-border-soft); }
.career-why__summary {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    list-style: none;
}
.career-why__summary::-webkit-details-marker { display: none; }
.career-why__summary:hover { background: var(--color-bg-soft); }
.career-why__summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.career-why__icon { color: var(--color-text-muted); }
.career-why__label { font-weight: 600; font-size: var(--font-size-sm); }
.career-why__meta {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.career-why__chev { grid-column: 4; color: var(--color-text-muted); transition: transform 180ms var(--ease-out); }
/* Разбор в начале карточки: его «Что переносится…» — такая же строка, как
   остальные, а не своя плашка с пустотой под ней. */
.career-why__card > .career-note { padding-bottom: 0; gap: var(--space-3); }
.career-why__card > .career-note > .career-note__details {
    margin: 0 calc(-1 * var(--space-4));
    border: 0;
    border-top: 1px solid var(--color-border-soft);
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
}
.career-why__card > .career-note > .career-note__details > summary {
    min-height: 52px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
}
/* Строка блоков разбора — того же облика, что строки под ней: иконка,
   подпись, превью содержимого, шеврон. */
.career-note__details > .career-note__blocks-summary {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
}
.career-note__blocks-icon { color: var(--color-text-muted); }
.career-note__blocks-label { font-weight: 600; }
.career-note__blocks-meta {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text-muted);
    font-weight: 400;
}
/* На телефоне превью — второй строкой под подписью: в одну строку с ней
   оно сжималось до огрызка. */
@media (max-width: 559px) {
    .career-note__details > .career-note__blocks-summary,
    .career-why__summary { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 2px; }
    .career-note__blocks-meta,
    .career-why__meta { grid-column: 2; grid-row: 2; }
    .career-why__chev,
    .career-note__blocks-summary > .target-fit__summary-icon { grid-column: 3; grid-row: 1 / span 2; }
}
.career-why__card > .career-note > .career-note__details > summary:hover { background: var(--color-bg-soft); }
.career-why__card > .career-note > .career-note__details[open] > :not(summary) { padding: 0 var(--space-4) var(--space-4); }
.career-why__item[open] .career-why__chev { transform: rotate(180deg); }
.career-why__item > :not(summary) { margin: 0 var(--space-4) var(--space-4); }
.career-why__item > .career-change,
.career-why__item > .career-heard,
.career-why__item > .career-excluded,
.career-why__body > .career-change,
.career-why__body > .career-heard { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 0; }
.career-why__item .career-change__head,
.career-why__item .career-heard__head { display: none; }
.career-why__item .career-excluded { display: grid; gap: var(--space-2); list-style: none; padding: 0; font-size: var(--font-size-sm); line-height: 1.5; }

/* «Как собрана карта», октябрь 2026 (2): одна анатомия у всех строк —
   плашка значка в тоне, заголовок 15px, сводка тихой строкой под ним,
   шеврон; содержимое — отступом под заголовок, строки не длиннее ~70
   знаков. Внутри — знаки сторон вместо голых списков. */
.career-why__card > .career-note > .career-note__details > .career-why__summary,
.career-why__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 60px;
    padding: var(--space-3) var(--space-4);
    font-weight: 400;
}
.career-why__heading { display: grid; gap: 2px; min-width: 0; }
.career-why__label { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.career-why__meta { grid-column: auto; grid-row: auto; font-size: 0.8125rem; color: var(--color-text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.career-why__chev { grid-column: auto; grid-row: auto; }
.career-why__item[open] > .career-why__summary .career-why__meta--preview { display: none; }
.career-why__summary:hover .career-why__label { color: var(--color-accent); }
.career-why__card > .career-note > .career-note__details[open] > .career-why__body,
.career-why__item > .career-why__body { margin: 0; padding: 0 var(--space-4) var(--space-5); }
@media (min-width: 640px) {
    .career-why__card > .career-note > .career-note__details[open] > .career-why__body,
    .career-why__item > .career-why__body { padding-left: calc(var(--space-4) + 32px + var(--space-3)); }
}
.career-why__body > * { max-width: 68ch; }
.career-why__body > .career-note__blocks { max-width: none; }
/* Разбор — ведущий абзац крупнее, остальные тише и уже. */
.career-why__card .career-note__text > p:not(.career-note__origin) { max-width: 68ch; font-size: 1rem; line-height: 1.6; }
.career-why__card .career-note__fold p { font-size: 0.9375rem; color: var(--color-text-soft); }
/* Пункты блоков со знаком стороны: знак в своей колонке. */
.support-list--signed > .support-list__row { grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: var(--space-2); align-items: start; }
.support-list--signed .support-list__label { font-size: 0.9375rem; }
.career-note__block h3 { display: flex; align-items: center; gap: 6px; }
/* Строки отказов: знак, роль, причина под ней. */
.career-why__rows { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.career-why__row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.career-why__row-title { display: block; font-weight: 600; color: var(--color-text); }
.career-why__row-text { display: block; margin-top: 2px; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-soft); }

/* Подножие горизонта — откуда человек идёт: место работы и линия карьеры
   под точкой «Вы здесь». */
.career-horizon__ground {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}
.career-horizon__ground-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin: 0; font-size: var(--font-size-sm); }
.career-horizon__ground-label { font-weight: 600; }
.career-horizon__ground-meta { color: var(--color-text-muted); }
.career-horizon__ground .lifeline { margin: 0; }
.career-horizon__fresh { margin-top: 0; }
.career-horizon.is-expanded .career-horizon__ground { display: none; }
.career-horizon__ground + .career-horizon__legend { margin-top: var(--space-3); }

/* Путь выбран: его дорога в фокусе, остальные тише — карта показывает, куда
   человек идёт, и не спорит с этим. Наведение возвращает любой дороге голос. */
.career-horizon--chosen:not([data-focus]) .ch-road:not(.ch-road--selected) { opacity: 0.35; }
.career-horizon--chosen:not([data-focus]) .ch-node:not(.ch-node--selected) .ch-node__dot { opacity: 0.7; }
.career-horizon--chosen:not([data-focus]) .ch-station:not(.ch-station--selected) { opacity: 0.5; }

/* Плита пути на карте — первый экран выбравшего: крупно, с акцентом и с
   входом внутрь. */
.path-widget--hero {
    gap: var(--space-4);
    padding: var(--space-5);
    border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(var(--color-accent-rgb), 0.09), transparent 55%),
        var(--color-surface);
    box-shadow: var(--shadow-md);
}
.path-widget--hero .path-widget__eyebrow { color: var(--color-accent); }
.path-widget--hero .path-widget__title { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); line-height: 1.2; letter-spacing: -0.015em; }
@media (min-width: 900px) {
    .path-widget--hero { padding: var(--space-6); }
}
/* Ячейка роли: взгляд модели и измеренный спрос стоят одной колонкой, потому
   что это одно утверждение о роли, прочитанное с двух сторон. */
.career-roles__cell { display: grid; gap: var(--space-2); align-content: start; }
/* Вторая и следующие роли рейла — свёрнутой строкой: раскрытый рейл из двух
   ролей был выше главной колонки, и под разбором карты стоял экран пустоты.
   Строка — плита того же вида, что карточка роли под ней. */
.career-roles__fold > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    list-style: none;
}
.career-roles__fold > summary::-webkit-details-marker { display: none; }
.career-roles__fold-name { grid-column: 1; font-weight: 600; color: var(--color-text); }
.career-roles__fold-meta { grid-column: 1; color: var(--color-text-muted); font-size: 0.8125rem; }
.career-roles__fold > summary .disclosure__chevron { grid-column: 2; grid-row: 1 / span 2; }
.career-roles__fold[open] > summary { display: none; }
.career-role {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.career-role__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.career-role__title { margin: 0; font-size: 1rem; }
.career-role__source { font-size: 0.8125rem; color: var(--color-text-muted); white-space: nowrap; }
.career-role__situation {
    margin: 0;
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    font-size: 0.8125rem;
    color: var(--color-text);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: rgba(var(--color-accent-rgb), 0.08);
}
.career-role__features { margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.career-role__features li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.career-role__feature-label { font-size: 0.875rem; }
.career-role__weight {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* --- Полосы спроса роли (ui_role_demand) ---------------------------------- */
/* Мобильный макет — основной: имя требования и число в первой строке, полоса
   во второй на всю ширину. На узком экране трёхколоночная сетка сжимала полосу
   до сантиметра, и сравнивать было нечего. */
.role-demand {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.role-demand--muted { background: var(--color-bg-soft); }
.role-demand__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.role-demand__title { margin: 0; font-size: 1rem; }
.role-demand__badge {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}
/* Легенда чисел — один тихий абзац над СПИСКОМ ролей, а не внутри каждой
   карточки: процент и цвет полосы это две разные величины, обе надо назвать
   словами, но названные заново у каждой роли они превращаются в шум — на карте
   ролей несколько, и одно и то же объяснение печаталось подряд четыре раза.
   Ширина ограничена мерой строки, иначе в широком блоке она растягивается в
   одну длинную линию. */
.role-demand-legend {
    margin: calc(-1 * var(--space-1)) 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
    max-width: 44ch;
}

/* Список строк без маркерного отступа: браузерный `padding-left` у `ul` сдвигал
   весь блок на сорок пикселей вправо, и имена требований висели в середине
   карточки, хотя заголовок и строка источника прижаты к её левому краю. */
.role-demand__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Та же причина, что у .career-vector__rev--*: мелкий кегль обязан стоять на
   подложке, иначе сигнальный цвет не добирает 4.5:1 на светлой теме. */
.role-demand__badge--ok {
    background: rgba(var(--color-sage-rgb), 0.12);
    color: var(--color-sage-deep);
}
.role-demand__badge--weak {
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}
.role-demand__source { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
/* Четыре колонки, и первая — постоянная, даже когда пуста: признак «у вас
   есть» стоит в ней у всех строк одинаково, поэтому имена требований выровнены
   по одной вертикали, а не сдвинуты у тех, у кого признак есть. */
.role-demand__row {
    display: grid;
    /* Колонка числа фиксированной ширины («100%» в ней помещается): каждая
       строка — своя сетка, и при `auto` однозначное «6%» сдвигало полосу
       вправо относительно соседних строк с «46%». */
    grid-template-columns: 0.875rem minmax(0, 1fr) 2.75rem 2.5rem;
    align-items: center;
    gap: 0 var(--space-2);
    min-width: 0;
    min-height: 1.75rem;
}
.role-demand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-success);
}
.role-demand__label { font-size: 0.875rem; min-width: 0; overflow-wrap: anywhere; }
/* Трек — канонический .meter (фон, скругление, обрезка): два разных трека на
   одном экране читались бы как две разные шкалы. Ширина своя и постоянная —
   полоса здесь не измерительная линейка, а метка величины рядом с числом. */
.role-demand__bar {
    display: block;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 9px;
}
/* Цвет говорит про ЧЕЛОВЕКА, а не про тип требования: зелёная полоса — это у
   него есть, красная — нет. Деление «обязательное/желательное» двумя
   сегментами на сорока пикселях неразличимо, а легенда к нему занимала
   строку. */
.role-demand__seg { display: block; height: 100%; max-width: 100%; background: var(--color-danger); }
.role-demand__row--have .role-demand__seg { background: var(--color-success); }
/* Штриховка = «эта строка снята с малого числа вакансий». Разница читается и
   без цвета: сплошное против штриха переживает и печать, и дальтонизм. */
.role-demand__bar--weak .role-demand__seg {
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--color-danger) 55%, transparent) 0 4px, transparent 4px 8px);
}
.role-demand__row--have .role-demand__bar--weak .role-demand__seg {
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--color-success) 55%, transparent) 0 4px, transparent 4px 8px);
}
/* Формальные условия роли (round 86) — те же строки без колонки признака:
   личного вердикта у условия нет. Отступ слева равен колонке признака плюс
   зазор, поэтому подписи стоят на одной вертикали с требованиями выше. Цвет
   полосы — общий нейтральный (слой «Рыночный рейл» ниже): модификатора --have
   у условия нет, потому что «у вас это есть» мы о нём не утверждаем. */
.role-demand__head--section {
    margin: var(--space-4) 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}
.role-demand__formal { margin-top: calc(-1 * var(--space-2)); }
.role-demand__formal[open] > .role-demand__rows { margin-bottom: var(--space-2); }
.role-demand__formal .role-demand__row {
    grid-template-columns: minmax(0, 1fr) 2.75rem 2.5rem;
    padding-inline-start: calc(0.875rem + var(--space-2));
}
.role-demand__value {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    white-space: nowrap;
    text-align: right;
}
.role-demand__state,
.gap-bars__state {
    margin: 0;
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.role-demand__state .icon,
.gap-bars__state .icon { flex-shrink: 0; margin-top: 1px; }
/* --- Полосы разрыва по категориям (ui_gap_bars) --------------------------- */
.gap-bars { display: flex; flex-direction: column; gap: var(--space-2); }
.gap-bars__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.gap-bars__summary { margin: 0; font-size: 0.9375rem; }
.gap-bars__partial { color: var(--color-text-muted); font-size: 0.8125rem; margin-left: var(--space-2); }
.gap-bars__source { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.gap-bars__legend {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.gap-bars__key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.gap-bars__key--covered { background: var(--color-sage); }
.gap-bars__key--partial { background: var(--color-teal); }
.gap-bars__key--missing { background: color-mix(in srgb, var(--color-border) 70%, transparent); }
.gap-bars__rows { margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.gap-bars__row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label value" "bar bar";
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    min-width: 0;
}
.gap-bars__label { grid-area: label; font-size: 0.875rem; min-width: 0; overflow-wrap: anywhere; }
/* Тот же канонический трек .meter с теми же тремя оверрайдами, что у
   ui_role_demand. */
.gap-bars__bar {
    grid-area: bar;
    display: flex;
    min-width: 0;
    height: 9px;
}
.gap-bars--muted { background: var(--color-bg-soft); }
.gap-bars__seg { display: block; height: 100%; max-width: 100%; }
.gap-bars__seg--covered { background: var(--color-sage); }
/* Частичное покрытие штрихуется: «владею соседним продуктом семейства» — не то
   же, что «владею требованием», и одинаковая заливка стирала бы разницу. */
.gap-bars__seg--partial {
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--color-teal) 60%, transparent) 0 4px, transparent 4px 8px);
}
.gap-bars__value { grid-area: value; font-family: var(--font-sans); font-size: 0.8125rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gap-bars__value small { color: var(--color-text-muted); }
@media (min-width: 600px) {
    .gap-bars__row {
        grid-template-columns: minmax(7rem, 11rem) 1fr auto;
        grid-template-areas: "label bar value";
        align-items: center;
    }
}

/* ============================================================
   ui_segmented — переключатель вида: сегменты в капсуле, нажат один.
   ============================================================ */
.segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: 11px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
}
.segmented__option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 var(--space-3);
    border-radius: 8px;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-soft);
    background: none;
    border: 0;
    cursor: pointer;
    transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.segmented__option:hover { color: var(--color-text); }
.segmented__option[aria-pressed="true"] {
    background: var(--color-surface-elevated);
    color: var(--color-text);
    box-shadow: var(--shadow-xs), 0 0 0 1px var(--color-border);
}
.segmented__option:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.segmented--md .segmented__option { min-height: 40px; font-size: var(--font-size-md); }
@media (pointer: coarse) { .segmented__option { min-height: 44px; } }
html:not(.js) .segmented { display: none; }

/* ============================================================
   Горизонт: два вида одной карты. data-view ставит скрипт; без него —
   «Варианты», и шаги живут на досье.
   ============================================================ */
.career-horizon__title-steps { display: none; }
.career-horizon[data-view="steps"] .career-horizon__title-variants { display: none; }
.career-horizon[data-view="steps"] .career-horizon__title-steps { display: inline; }
.career-horizon[data-view="steps"] .career-horizon__stage,
.career-horizon[data-view="steps"] .career-horizon__legend,
.career-horizon[data-view="steps"] .career-horizon__zoom,
.career-horizon[data-view="steps"] .career-horizon__hint { display: none; }
/* «Развернуть» у шагов — та же карта на весь экран, но каждая ветвь
   показывает дорогу целиком, без «ещё N шагов»: масштаб и сдвиг графа
   карточкам не нужны, нужна полнота. */
.cmap-steps.cmap-steps--all { display: none; }
.career-horizon.is-expanded .cmap-steps.cmap-steps--short { display: none; }
.career-horizon.is-expanded .cmap-steps.cmap-steps--all { display: grid; }
/* Развёрнутые «Шаги» — поле с перемещением и масштабом, как у «Должностей»:
   карта целиком в трансформе (--cs-s, --cs-tx, --cs-ty), поле не
   прокручивается, а двигается. */
.career-horizon.is-expanded[data-view="steps"] .career-horizon__steps {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    user-select: none;
}
.career-horizon.is-expanded[data-view="steps"] .career-horizon__steps.is-dragging { cursor: grabbing; }
.career-horizon.is-expanded[data-view="steps"] .career-steps {
    width: min(90rem, 100%);
    margin: 0;
    padding-bottom: var(--space-6);
    transform-origin: 0 0;
    transform: translate(var(--cs-tx, 0px), var(--cs-ty, 0px)) scale(var(--cs-s, 1));
}
.career-horizon.is-expanded[data-view="steps"] .career-steps.is-smooth { transition: transform 240ms var(--ease-out); }
.career-horizon__zoom--steps { display: none; }
.career-horizon.is-expanded[data-view="steps"] .career-horizon__zoom--steps { display: flex; left: var(--space-2); }
/* Развёрнутая карта — на весь экран: отступ сверху у горизонта под плитой
   пути (.path-widget + .career-horizon) перебивал margin: 0 развёрнутого
   режима, и сверху оставалась полоса страницы. */
.career-horizon.is-expanded, .path-widget + .career-horizon.is-expanded { margin: 0; }
.career-horizon:not([data-view="steps"]) .career-horizon__steps { display: none; }
/* На телефоне переключатель — во всю строку под заголовком: иконками 44×44
   рядом с ним он не помещался бы с подписями, а без подписей «Варианты» и
   «Шаги» не различить. */
@media (max-width: 559px) {
    .career-horizon--has-steps .career-horizon__bar { flex-wrap: wrap; }
    .career-horizon--has-steps .career-horizon__tools { flex: 1 1 100%; order: 2; }
    .career-horizon__view { flex: 1; }
    .career-horizon__view .segmented__option { flex: 1; justify-content: center; }
}

/* ui_stat_bar — показатель в строку: подпись и число, под ними полоса
   прогресса продукта. Общий для карточек ролей карты и маршрута на «Обзоре»
   (тот же вид, что оси карточки подборки). */
.stat-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 3px var(--space-2);
    font-size: var(--font-size-xs);
    line-height: 1.35;
}
.stat-bar__label { color: var(--color-text-muted); }
.stat-bar__value { color: var(--color-text-soft); font-weight: 500; font-variant-numeric: tabular-nums; }
.stat-bar__track {
    grid-column: 1 / -1;
    display: block;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--progress-track);
    overflow: hidden;
}
.stat-bar__track i {
    display: block;
    width: calc(var(--pct) * 1%);
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-progress);
    transition: width 600ms var(--ease-out);
}

/* ui_duration — оценка срока от парсера: часы и диапазон. */
.duration {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.duration .icon { width: 12px; height: 12px; }
/* Сроки в местах карты (29.10, career_plan v28): тихой мелкой строкой —
   ориентир рядом с ролью, а не показатель наравне с готовностью. */
.ch-node__top { display: block; font-size: var(--font-size-xs); line-height: 1.3; color: var(--color-text-muted); }
.ch-node--selected .ch-node__top { color: var(--hero-soft); }
/* Узкое поле горизонта держит под именем одно число: строка срока делала
   подписи выше, и соседние роли ложились друг на друга. Срок на телефоне —
   в карточке варианта и в досье. */
@container ch-plot (max-width: 560px) {
    .ch-node .ch-node__top { display: none; }
}
.career-route__leg { display: block; margin-top: 2px; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.career-journey__total {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft, var(--color-border));
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.path-widget__meta .duration { vertical-align: -1px; }
.career-vector__role .duration { vertical-align: -1px; }

/* ui_card_link — выход из карточки в полный вид: акцентная ссылка со
   стрелкой под содержимым. Один рисунок на все такие выходы (было четыре:
   кнопка в подвале и ссылки разного кегля и насыщенности). Отступ сверху —
   от содержимого карточки; на тач-экране цель нажатия 44px. */
.card-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
}
.card-link .icon { flex: none; transition: transform var(--dur-fast, 150ms) var(--ease-out); }
.card-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-link:hover .icon { transform: translateX(2px); }
.card-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (pointer: coarse) { .card-link { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .card-link .icon { transition: none; } }
/* В шапке раздела — справа от заголовка, в строку: отступа сверху нет,
   перенос запрещён (ссылка не должна рваться под заголовком), и на тач-
   экране цель 44px добирается вертикальным полем без сдвига строки. */
.card-link--head { flex: none; margin-top: 0; white-space: nowrap; }
@media (pointer: coarse) { .card-link--head { margin-block: calc(-1 * var(--space-2)); } }

/* ui_key_steps — «Ключевые шаги» на «Обзоре»: шаги дороги по порядку,
   отметки как у шагов карты. */
/* Заголовок раздела — над карточкой, как у «Подборки дня», «Требует
   внимания» и «Ваших резюме»: один узор раздела на весь экран. */
.key-steps, .role-route, .growth-recs { display: flex; flex-direction: column; gap: var(--space-3); }
.key-steps__card, .role-route__card, .dash-do__card, .growth-areas__card, .attr-board__card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.key-steps__head, .role-route__head, .growth-areas__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.key-steps__title, .role-route__title, .growth-areas__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.key-steps__list { display: grid; margin: 0; padding: 0; list-style: none; }
.key-step {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: var(--space-3);
    padding-bottom: var(--space-4);
}
.key-step:last-child { padding-bottom: 0; }
/* Линия к следующей отметке; до сделанного шага — зелёная. */
.key-step::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 22px;
    bottom: -1px;
    width: 2px;
    border-radius: 1px;
    background: var(--color-border);
}
.key-step:last-child::before { display: none; }
.key-step--done::before { background: var(--color-sage); }
.key-step__mark {
    position: relative;
    z-index: 1;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong);
    background: var(--color-surface);
}
.key-step--done .key-step__mark { border: 0; background: var(--color-sage); color: var(--color-surface); }
.key-step--done .key-step__mark .icon { width: 12px; height: 12px; stroke-width: 3; }
.key-step--in_plan .key-step__mark { border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.14); }
.key-step--in_plan .key-step__mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.key-step--next .key-step__mark { border-color: var(--color-accent); }
/* Шаг, с которым работают сейчас: под строкой — что сделать завтра и
   кнопка, на подложке акцента, как текущий шаг ui_work_list. */
.key-step__act {
    grid-column: 2;
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    margin-top: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(var(--color-accent-rgb), 0.05);
}
.key-step__act-text { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-soft); }
.key-step__act-text strong { color: var(--color-text); font-weight: 600; }
.key-step__act form { margin: 0; }
.key-step__title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
    text-decoration: none;
}
.key-step__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.key-step--done .key-step__title { color: var(--color-text-soft); }
.key-step__meta {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    margin-top: 2px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.key-step__meta > * + *::before { content: "·"; margin-right: 6px; }
.key-step__state { color: var(--color-accent); font-weight: 500; }
/* Направление над шагами — только на странице профессии (там нет виджета
   «Ваш путь», который называет его на «Обзоре»). */
.key-steps__lead { margin: 0 0 var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-soft, var(--color-border)); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.key-steps__lead a { color: var(--color-text); text-decoration: none; }
.key-steps__lead a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Путь ведёт в другую роль: строка вместо шагов. */
.key-steps__elsewhere { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-soft); }
/* «Ваш путь» страницы профессии: счёт сделанного в шапке, «Открыть путь» —
   ui_card_link под списком. */
.key-steps__count { font-size: var(--font-size-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Требования профессии, которые закрывает шаг. */
.key-step__covers { grid-column: 2; margin-top: 2px; font-size: var(--font-size-xs); color: rgb(var(--color-sage-rgb)); }

/* ui_growth_recs — «Рекомендации по развитию»: карточки категорий требований
   цели. Раскладку решает ширина блока: в основной колонке «Обзора» — три в
   ряд от 720px, уже — столбец. */
.growth-recs { container: growth-recs / inline-size; }
/* Список-карточка: отступ карточки сильнее обнуления отступа у списка. */
/* Список-карточка («Уже есть в резюме» — ol сразу с классом карточки):
   отступ карточки сильнее обнуления отступа у списка. Без этого правила
   отметки ложились на рамку. */
.key-steps__list.key-steps__card, .dash-do__grid.dash-do__card { padding: var(--space-4); }
.growth-recs__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.growth-recs__title { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); }
/* Сноска «откуда числа» — тем же видом, что дата рынка у «Должностей до
   цели» (.role-route__note). */
.growth-recs__note, .growth-areas__note { margin: 0; font-size: var(--font-size-xs); line-height: 1.45; color: var(--color-text-muted); }
.growth-recs__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@container growth-recs (min-width: 600px) {
    .growth-recs__list { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
}
.growth-rec {
    --rec-tone: var(--color-accent-rgb);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
/* ─── ui_growth_areas — «Ключевые зоны роста» ─────────────────────────────
   Шапка и рамка — те же, что у «Ключевых шагов» (соседний блок рейла),
   плитка категории и тон — «Рекомендаций по развитию» (growth-rec--*),
   строка — ui_stat_bar продуктовым градиентом. Своего здесь только
   раскладка строки и полный вид досье. */
.growth-areas { display: grid; gap: var(--space-3); container: growth-areas / inline-size; }
.growth-areas__card { display: grid; gap: var(--space-3); }
/* Подпись под заголовком — как у «Рекомендаций по развитию» (тот же слот). */
/* В основной колонке зоны идут в две колонки: четыре полосы во всю ширину
   колонки растягивались вдвое и читались хуже. */
@container growth-areas (min-width: 560px) {
    .growth-areas:not(.growth-areas--full) .growth-areas__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-4); }
}
.growth-areas__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
/* Тон по умолчанию — без специфичности: тон строки (growth-rec--*) стоит на
   li, а в рейле .growth-area — вложенная ссылка, и своё умолчание на ней
   перебивало унаследованный тон. */
:where(.growth-areas__list > li) { --rec-tone: var(--color-accent-rgb); }
.growth-area { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.growth-area__body { display: grid; gap: 6px; min-width: 0; padding-top: 2px; }
.growth-area__more, .growth-area > .growth-area__meta { grid-column: 2; }
/* Под полосой: вопрос неясной зоны и срок её шагов одной строкой. */
.growth-area__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); }
/* Срок зоны — сплошной строкой текста: длинное имя роли переносится
   словами, а не отрывает часы и запятую на свои строки. */
.growth-area__left { display: block; min-width: 0; font-size: var(--font-size-xs); line-height: 1.45; color: var(--color-text-soft); }
.growth-area__left > .duration { display: inline-flex; vertical-align: -2px; }
.growth-area__left > .icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }
.growth-area__more > .growth-area__meta { margin: -2px 0 0; }
.growth-area__more { display: grid; gap: 6px; min-width: 0; }
/* Строка рейла — ссылка на свою зону: подсветка всей строки, как у строк
   очереди, а не подчёркивание названия. */
.growth-area--link {
    margin: -6px; padding: 6px; border-radius: var(--radius-md);
    color: inherit; text-decoration: none;
    transition: background-color 0.15s ease;
}
.growth-area--link:hover { background: var(--color-bg-soft); }
.growth-area--link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Ответ на зону — разметка «У вас был такой опыт?» страницы соответствия
   (cov-req__*), здесь только отступы внутри зоны. */
.growth-area__answers { margin-top: 4px; }
.growth-area__skills { display: grid; gap: 6px; margin-top: 4px; }
.growth-area__state { display: inline-flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; font-size: var(--font-size-sm); line-height: 1.45; color: var(--color-text-soft); }
.growth-area__state--yes { color: var(--color-text); }
/* Вопрос зоны на странице — превью и одна кнопка в мастер, как у вопросов
   профессии: отвечают в одном месте. */
.growth-area__ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 4px 0 0; }
.growth-area__ask-text { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); }
/* Шаг мастера «Ключевые зоны роста»: одна зона карточкой. */
.zone-step { display: grid; gap: var(--space-3); }
.zone-step__head { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-xs); }
.zone-step__title { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.growth-area__state--yes > .icon, .growth-area__state--yes > svg { color: var(--color-success); flex: none; margin-top: 2px; }
.growth-area__next { display: grid; gap: 4px; justify-items: start; margin-top: 6px; padding-top: var(--space-3); border-top: 1px dashed var(--color-border-soft); }
/* Следующий шаг зоны: подпись и название. */
.growth-area__do-label { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.growth-area__do-link {
    /* Строкой, а не флексом: на телефоне название переносится, и стрелка
       остаётся концом фразы, а не отрывается к правому краю. */
    display: inline;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
    text-decoration: none;
}
.growth-area__do-link:hover { color: var(--color-accent); }
.growth-area__next > .growth-area__meta { margin: 0; }
.growth-area__next > .growth-area__do-link { margin-top: 2px; }
.growth-area__do-arrow { margin-left: 4px; vertical-align: -3px; color: var(--color-accent); }
/* Название зоны — заголовок строки, тем же кеглем, что строки соседних
   блоков (ui_strengthen_row, шаги): 12px полосы читались подписью к полосе,
   а не тем, что надо подтянуть. */
.growth-area__body .stat-bar__label { color: var(--color-text); font-size: var(--font-size-sm); font-weight: 600; line-height: 1.35; }
.growth-area__body .stat-bar__value { font-size: var(--font-size-sm); }
/* Вид пробела — тихим текстом с точкой тона, как статус у навыков: это
   справка о зоне, а не тревога. */
.growth-area__gap { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--font-size-xs); color: var(--color-text-soft); }
.growth-area__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); flex: none; }
.growth-area__gap--missing .growth-area__dot { background: rgb(var(--color-coral-rgb)); }
.growth-area__gap--partial .growth-area__dot { background: rgb(var(--color-amber-rgb)); }
/* «Был у вас такой опыт?» в рейле — тоном своей плитки (circle-help, янтарь):
   строка ведёт к ответу «Да / Нет» в досье. */
.growth-area__gap--unknown.growth-area__gap--rail .growth-area__dot { background: rgb(var(--color-amber-rgb)); }
/* Шаг переставлен разбором (career_step v9): причина строкой над заданием. */
.step-body__moved { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 var(--space-2); font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text-soft); }
.step-body__moved > .icon { flex: none; margin-top: 3px; color: var(--color-text-muted); }
.growth-area__note { margin: 0; max-width: 68ch; font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text-soft); }
/* Зона, которую шаги плана не закрывают (нормализатор v48): тихо, янтарным
   значком — это честность плана, а не тревога. */
.growth-area__warn { display: flex; align-items: flex-start; gap: 6px; margin: 0; max-width: 68ch; font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text-soft); }
.growth-area__warn > .icon { flex: none; margin-top: 3px; color: rgb(var(--color-amber-rgb)); }
/* Как шаг работает с зоной — тихой подписью после названия. */
.growth-area__step-link { margin-left: 6px; font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
/* Полнота зон под списком досье. */
.growth-areas__coverage { display: grid; gap: var(--space-1); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-soft, var(--color-border)); }
.growth-areas__cov-row { margin: 0; font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text); }
.growth-areas__cov-label { color: var(--color-text-soft); }
.growth-areas__cov-pct { font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.growth-area__steps > summary {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; list-style: none;
    font-size: var(--font-size-sm); color: var(--color-text-soft);
}
.growth-area__steps > summary::-webkit-details-marker { display: none; }
.growth-area__steps[open] > summary { margin-bottom: 4px; }
.growth-area__step-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.growth-area__step { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; align-items: baseline; font-size: var(--font-size-sm); }
.growth-area__step a { color: var(--color-text); text-decoration: none; }
.growth-area__step a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Знак шага — стрелка-ссылка, у сделанного — галочка: пустой кружок читался
   чекбоксом, который нельзя отметить. */
.growth-area__step-mark { display: inline-flex; color: var(--color-text-muted); }
.growth-area__step--done .growth-area__step-mark { color: var(--color-success); }
.growth-area__step--done a { color: var(--color-text-muted); }
/* Полный вид — раздел досье: строки разделены волосяной линией, у каждой —
   фраза и шаги. */
.growth-areas--full .growth-areas__card { padding: 0; border: 0; background: none; }
.growth-areas--full .growth-areas__list { gap: 0; }
.growth-areas--full .growth-area { padding: var(--space-4) 0; border-top: 1px solid var(--color-border-soft); }
.growth-areas--full .growth-area:first-child { border-top: 0; padding-top: var(--space-2); }
/* В полном виде название — заголовок зоны: крупнее фразы под ним. Подпись
   полосы рейла (13px) здесь стояла мельче текста, и иерархия читалась
   наоборот. */
.growth-areas--full .stat-bar__label { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.growth-areas--full .stat-bar__value { font-size: 0.9375rem; }
.growth-areas--full .growth-area__note, .growth-areas--full .growth-area__step { font-size: 0.9375rem; }
.growth-rec--teal { --rec-tone: var(--color-teal-rgb); }
.growth-rec--amber { --rec-tone: var(--color-amber-rgb); }
.growth-rec--violet { --rec-tone: var(--color-violet-rgb); }
.growth-rec--coral { --rec-tone: var(--color-coral-rgb); }
.growth-rec__top { display: flex; align-items: center; gap: var(--space-2); }
.growth-rec__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: rgba(var(--rec-tone), 0.12);
    color: rgb(var(--rec-tone));
}
.growth-rec__title { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.growth-rec__steps { display: grid; gap: 4px; }
.growth-rec__label { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
/* Категория закрыта сделанными шагами — итог на месте списка требований,
   галочкой сделанного шага (зелёная, как по всему продукту). */
.growth-rec__done { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--color-text); }
.growth-rec__done .icon { color: var(--color-sage); }
.growth-rec__reqs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.growth-rec__reqs li {
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--color-text-soft);
    background: var(--color-bg-soft);
}
.growth-rec__foot { display: grid; gap: 4px; margin-top: auto; }
.growth-rec__link { justify-self: start; margin-top: var(--space-1); }
.growth-rec__after { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ui_role_route — маршрут должностей на «Обзоре». Мобайл: столбец, дорога
   — линия слева от карточек. От 992px — нынешняя должность слева, ряды
   дорог справа одной высоты, развилка — линия по их центрам. */
.role-route {
    container: role-route / inline-size;
    --route-gap: var(--space-4);
    --route-link: 28px;
    /* Линия дороги: тонкая, цвета акцента; другой путь — серый пунктир.
       Цвет НЕпрозрачный (акцент, смешанный с фоном карточки): у
       полупрозрачной линии стыки — дуга с горизонталью, линия под
       наконечником — складывали прозрачность, и на увеличении проступали
       тёмные пятна и квадрат на углу. */
    --route-line: color-mix(in srgb, var(--color-accent) 62%, var(--color-surface));
    --route-line-alt: var(--color-border-strong);
    --route-w: 1.5px;
    /* Стрела дороги: узкая, с выемкой сзади. */
    --route-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8'%3E%3Cpath d='M0 0 9 4 0 8 2.6 4Z'/%3E%3C/svg%3E");
    /* Место под подписью ряда («Другой путь к цели»): ряд сдвигается на него
       вниз, и развилка обязана целиться в его новый центр. */
    --route-caption: 22px;
    /* Потолок колонки ряда. Колонок столько, сколько карточек в самом
       длинном ряду, и при одной-двух (цель без промежуточных должностей)
       1fr растягивал карточку на всю ширину блока: две строки показателей
       в полосе на 700px. Карточка должности — одного размера с нынешней,
       а не полоса; свободное место остаётся справа. */
    --route-col-max: 22rem;
}
.role-route__card { display: grid; gap: var(--space-4); }
.role-route__map { display: grid; gap: var(--route-gap); }
/* Ряды стоят с отступом под нынешней должностью: линия дороги выходит из её
   нижней кромки (::after ниже), а не начинается в пустоте. */
.role-route__origin { position: relative; display: flex; }
.role-route__origin::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 20px;
    width: 2px;
    height: var(--route-gap);
    background: var(--route-line);
}
.role-route__rows { position: relative; display: grid; gap: var(--route-gap); margin-left: 20px; }
.role-route__row {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0 0 0 var(--space-4);
    list-style: none;
    border-left: 2px solid var(--route-line);
}
/* Другой путь: ствол продолжается пунктиром от низа выбранного ряда через
   зазор и подпись — иначе две дороги висели обрывками одна под другой. */
.role-route__row--alt { position: relative; border-left-color: transparent; }
.role-route__row--alt::before {
    content: "";
    position: absolute;
    left: -2px;
    top: calc(-1 * var(--route-gap));
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(180deg, var(--route-line-alt) 0 4px, transparent 4px 8px);
    pointer-events: none;
}
.role-route__row--alt[data-caption]::before { top: calc(-1 * (var(--route-gap) + var(--route-caption))); }
.role-route__stop { position: relative; display: flex; min-width: 0; }
.role-route__note { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }

.route-card {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 160ms var(--ease-out);
}
a.route-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
a.route-card:focus-visible, .route-fold:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Нынешняя должность — достигнутая точка, как на карте: зелёная галочка на
   кромке. */
.route-card--current {
    padding-top: 18px;
    border-color: rgba(var(--color-sage-rgb), 0.45);
    background: linear-gradient(180deg, rgba(var(--color-sage-rgb), 0.08), rgba(var(--color-sage-rgb), 0.02)), var(--color-surface);
}
.route-card__mark {
    position: absolute;
    top: -11px;
    left: 12px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-sage);
    color: var(--color-surface);
    box-shadow: 0 0 0 3px var(--color-surface);
}
.route-card__mark .icon { width: 13px; height: 13px; stroke-width: 3; }
.route-card--target {
    border-color: rgba(var(--color-accent-rgb), 0.5);
    background: linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.07), transparent), var(--color-surface);
}
/* Промежуточная должность — как на карте: серый фон и пунктир; на
   выбранной дороге пунктир акцентный. */
.route-card--station {
    border-style: dashed;
    border-color: rgba(var(--color-accent-rgb), 0.45);
    background: var(--color-bg-soft);
    box-shadow: none;
}
.role-route__row--alt .route-card--station { border-color: var(--color-border-strong); }
.route-card--station .route-card__title { color: var(--color-text-soft); }
.route-card--station .route-card__tag { background: var(--color-surface); }
/* Подпись другого пути — над рядом, а не меткой на карточке. */
.role-route__row[data-caption] { position: relative; margin-top: var(--route-caption); }
.role-route__row[data-caption]::after {
    content: attr(data-caption);
    position: absolute;
    top: -22px;
    left: var(--space-4);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-muted);
}
.route-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.route-card__tag {
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--color-text-soft);
    background: var(--color-bg-soft);
}
.route-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.route-card__note {
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--color-text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.route-card__stats { display: grid; gap: 6px; margin-top: auto; padding-top: 4px; }
.route-fold {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    text-align: center;
}
.route-fold:hover { color: var(--color-text); background: var(--color-bg-soft); }
/* Варианты пути (ui_route_choices): карточки маршрута сеткой, две в ряд от
   480px блока. */
.route-choices { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.route-choices__item { display: flex; min-width: 0; }
@container role-route (min-width: 480px) {
    .route-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Средняя ширина блока (основная колонка «Обзора»): нынешняя должность
   сверху, дороги рядами под ней. Ствол дороги идёт вниз от нынешней
   должности и скруглённо сворачивает в каждый ряд к первой карточке; между
   карточками ряда — стрелки: без них «Заместитель» и «CEO» рядом читались
   двумя вариантами, а не дорогой. Нынешняя должность шириной в колонку
   ряда: карточки должностей одного размера. */
@container role-route (min-width: 540px) {
    /* Сам контейнер правилам своего запроса не подчиняется: переменная —
       на карте внутри него. */
    .role-route__map { --route-bend: 12px; }
    .role-route__origin {
        max-width: min(var(--route-col-max), calc((100% - 20px - var(--route-link) * var(--route-cols, 3)) / var(--route-cols, 3)));
    }
    .role-route__origin::after { width: var(--route-w); }
    .role-route__row {
        position: relative;
        grid-template-columns: repeat(var(--route-cols, 3), minmax(0, var(--route-col-max)));
        align-items: stretch;
        column-gap: var(--route-link);
        padding-left: var(--route-link);
        border-left: 0;
    }
    .role-route__row::before,
    .role-route__row:not(.role-route__row--alt):has(~ .role-route__row--alt)::after {
        content: "";
        position: absolute;
        left: 0;
        box-sizing: border-box;
        pointer-events: none;
    }
    /* Поворот в ряд: ствол сверху до середины ряда и дуга вправо. */
    .role-route__row::before {
        top: 0;
        height: calc(50% + var(--route-w) / 2);
        width: var(--route-bend);
        border-left: var(--route-w) solid var(--route-line);
        border-bottom: var(--route-w) solid var(--route-line);
        border-bottom-left-radius: var(--route-bend);
    }
    /* Другой путь: ствол дальше вниз пунктиром — от середины выбранного
       ряда, через зазор и подпись, до поворота в свой ряд. */
    .role-route__row:not(.role-route__row--alt):has(~ .role-route__row--alt)::after {
        top: 50%;
        bottom: 0;
        width: var(--route-w);
        background: repeating-linear-gradient(180deg, var(--route-line-alt) 0 4px, transparent 4px 8px);
    }
    .role-route__row--alt::before {
        left: 0;
        top: calc(-1 * var(--route-gap));
        height: calc(50% + var(--route-gap) + var(--route-w) / 2);
        background: none;
        border-left-style: dashed;
        border-bottom-style: dashed;
        border-color: var(--route-line-alt);
    }
    .role-route__row--alt[data-caption]::before {
        top: calc(-1 * (var(--route-gap) + var(--route-caption)));
        height: calc(50% + var(--route-gap) + var(--route-caption) + var(--route-w) / 2);
    }
    .role-route__row[data-caption]::after { left: var(--route-link); }
    .role-route__stop { --seg: var(--route-link); }
    .role-route__stop:first-child { --seg: calc(var(--route-link) - var(--route-bend) + var(--route-w)); }
    .role-route__stop::before,
    .role-route__stop::after {
        content: "";
        position: absolute;
        pointer-events: none;
    }
    .role-route__stop::after {
        top: calc(50% - var(--route-w) / 2);
        left: calc(-1 * var(--seg));
        width: calc(var(--seg) - 10px);
        height: var(--route-w);
        background: var(--route-line);
    }
    .role-route__row--alt .role-route__stop::after {
        background: repeating-linear-gradient(90deg, var(--route-line-alt) 0 4px, transparent 4px 8px);
    }
    .role-route__stop::before {
        top: 50%;
        left: -13px;
        width: 9px;
        height: 8px;
        transform: translateY(-50%);
        background: var(--route-line);
        -webkit-mask: var(--route-arrow) center / 100% 100% no-repeat;
                mask: var(--route-arrow) center / 100% 100% no-repeat;
    }
    .role-route__row--alt .role-route__stop::before { background: var(--route-line-alt); }

    /* Другой путь к той же цели сходится в неё: пунктир от последней
       карточки вправо до середины колонки цели и вверх к её нижней кромке,
       стрела — остриём в 4px от карточки. --join-span колонок правее;
       --join-up — цель прямо над карточкой. Ширина считается в ширинах
       карточки: колонки ряда равны. */
    .role-route__row:is(.role-route__row--join, .role-route__row--join-up) .role-route__stop:last-child .route-card {
        --join-top: calc(-1 * (var(--route-gap) + var(--route-caption)));
    }
    .role-route__row:is(.role-route__row--join, .role-route__row--join-up) .role-route__stop:last-child .route-card::after,
    .role-route__row:is(.role-route__row--join, .role-route__row--join-up) .role-route__stop:last-child .route-card::before {
        content: "";
        position: absolute;
        pointer-events: none;
    }
    .role-route__row:is(.role-route__row--join, .role-route__row--join-up) .role-route__stop:last-child .route-card::before {
        top: calc(var(--join-top) + 4.5px);
        width: 9px;
        height: 8px;
        transform: rotate(-90deg);
        background: var(--route-line-alt);
        -webkit-mask: var(--route-arrow) center / 100% 100% no-repeat;
                mask: var(--route-arrow) center / 100% 100% no-repeat;
    }
    .role-route__row--join .role-route__stop:last-child .route-card {
        --join-w: calc(var(--join-span, 1) * var(--route-link) + (var(--join-span, 1) - 0.5) * 100%);
    }
    .role-route__row--join .role-route__stop:last-child .route-card::after {
        left: calc(100% + 1px);
        top: calc(var(--join-top) + 10px);
        bottom: calc(50% - var(--route-w) / 2);
        width: calc(var(--join-w) - 1px + var(--route-w) / 2);
        box-sizing: border-box;
        border-right: var(--route-w) dashed var(--route-line-alt);
        border-bottom: var(--route-w) dashed var(--route-line-alt);
        border-bottom-right-radius: var(--route-bend);
    }
    .role-route__row--join .role-route__stop:last-child .route-card::before { left: calc(100% + var(--join-w) - 4.5px); }
    .role-route__row--join-up .role-route__stop:last-child .route-card::after {
        left: calc(50% - var(--route-w) / 2);
        top: calc(var(--join-top) + 10px);
        height: calc(-1 * var(--join-top) - 10px);
        width: var(--route-w);
        background: repeating-linear-gradient(180deg, var(--route-line-alt) 0 4px, transparent 4px 8px);
    }
    .role-route__row--join-up .role-route__stop:last-child .route-card::before { left: calc(50% - 4.5px); }
}

/* Широкий блок: развилка слева направо. */
@container role-route (min-width: 960px) {
    .role-route__origin { max-width: none; }
    .role-route__rows { margin-left: 0; }
    .role-route__map {
        grid-template-columns: 13rem minmax(0, 1fr);
        align-items: center;
        column-gap: calc(var(--route-link) * 2);
    }
    /* Связь от нынешней должности к развилке. */
    .role-route__origin::after {
        content: "";
        position: absolute;
        left: auto;
        top: calc(50% - var(--route-w) / 2);
        right: calc(var(--route-link) * -2);
        width: calc(var(--route-link) * 2);
        height: var(--route-w);
        background: var(--route-line);
    }
    .role-route__rows { grid-auto-rows: 1fr; }
    .role-route__row {
        grid-template-columns: repeat(var(--route-cols, 3), minmax(0, var(--route-col-max)));
        column-gap: var(--route-link);
        padding: 0 0 0 var(--route-link);
        border: 0;
        position: relative;
    }
    .role-route__stop { z-index: 1; }
    /* Ствол средней раскладки здесь не нужен: развилку рисуют ::before и
       ::after общего контейнера рядов. */
    .role-route__row::before,
    .role-route__row:not(.role-route__row--alt):has(~ .role-route__row--alt)::after { content: none; }
    .role-route__stop:first-child { --seg: var(--route-link); }
    /* Дорога — отрезок у каждой карточки: от кромки предыдущей карточки
       (или от дуги развилки) до хвоста стрелы. Линия кончается раньше
       карточки: между острием и кромкой — чистый зазор 4px. Прежде одна
       линия шла через весь ряд за карточками, а зазор у острия закрывала
       «заслонка» цвета фона — на части экранов линия всё равно проступала
       за острием. Длина отрезка (--seg) считается в ширинах колонки: 100%
       у псевдоэлемента — ширина карточки-остановки. */
    .role-route__stop { --seg: var(--route-link); }
    .role-route__map--fork .role-route__stop:first-child { --seg: calc(var(--route-link) - var(--route-bend) + var(--route-w)); }
    /* Последняя карточка другого пути стоит в колонке целей, через пустые
       колонки: отрезок тянется через них (--route-n — карточек в ряду). */
    .role-route__row--alt:not(.role-route__row--join, .role-route__row--join-up) .role-route__stop:last-child {
        --seg: calc((var(--route-cols) - var(--route-n, 1)) * (100% + var(--route-link)) + var(--route-link));
    }
    .role-route__map--fork .role-route__row--alt:not(.role-route__row--join, .role-route__row--join-up) .role-route__stop:last-child:first-child {
        --seg: calc((var(--route-cols) - 1) * (100% + var(--route-link)) + var(--route-link) - var(--route-bend) + var(--route-w));
    }
    .role-route__stop::before,
    .role-route__stop::after {
        content: "";
        position: absolute;
        pointer-events: none;
    }
    .role-route__stop::after {
        top: calc(50% - var(--route-w) / 2);
        left: calc(-1 * var(--seg));
        width: calc(var(--seg) - 10px);
        height: var(--route-w);
        background: var(--route-line);
    }
    .role-route__row--alt .role-route__stop::after {
        background: repeating-linear-gradient(90deg, var(--route-line-alt) 0 4px, transparent 4px 8px);
    }
    /* Стрела: узкая, с выемкой сзади (векторная маска цвета линии), остриём
       в 4px от карточки; отрезок заходит под её хвост. */
    .role-route__stop::before {
        top: 50%;
        left: -13px;
        width: 9px;
        height: 8px;
        transform: translateY(-50%);
        background: var(--route-line);
        -webkit-mask: var(--route-arrow) center / 100% 100% no-repeat;
                mask: var(--route-arrow) center / 100% 100% no-repeat;
    }
    .role-route__row--alt .role-route__stop::before { background: var(--route-line-alt); }
    .role-route__row[data-caption]::after { left: var(--route-link); }
    /* Цель другого пути — в колонке целей, под целью выбранного. Путь к той
       же цели целью не кончается: его должности стоят на своих местах, а в
       цель выбранной дороги ведёт пунктир схождения. */
    .role-route__row--alt:not(.role-route__row--join, .role-route__row--join-up) .role-route__stop:last-child { grid-column-end: -1; }
    /* Развилка: от середины вверх к центру выбранной дороги и вниз к центру
       другой, поворот — скруглённой дугой (рамка с радиусом), а не прямым
       углом: прямые углы делали схему похожей на монтажную плату. Сверху
       сплошная линия, снизу пунктир. Горизонталь ряда начинается после
       дуги, чтобы линии не ложились одна на другую. */
    .role-route__map--fork { --route-bend: 14px; }
    .role-route__map--fork .role-route__rows::before,
    .role-route__map--fork .role-route__rows::after {
        content: "";
        position: absolute;
        left: calc(var(--route-w) / -2);
        width: var(--route-bend);
        box-sizing: border-box;
        pointer-events: none;
    }
    .role-route__map--fork .role-route__rows::before {
        top: calc((100% - var(--route-gap)) / 4 - var(--route-w) / 2);
        bottom: 50%;
        border-left: var(--route-w) solid var(--route-line);
        border-top: var(--route-w) solid var(--route-line);
        border-top-left-radius: var(--route-bend);
    }
    .role-route__map--fork .role-route__rows::after {
        top: 50%;
        bottom: calc((100% - var(--route-gap)) / 4 - var(--route-w) / 2);
        border-left: var(--route-w) dashed var(--route-line-alt);
        border-bottom: var(--route-w) dashed var(--route-line-alt);
        border-bottom-left-radius: var(--route-bend);
    }
    /* Ряд с подписью ниже на высоту подписи, его центр — на половину ниже. */
    .role-route__map--fork .role-route__rows:has(.role-route__row--alt[data-caption])::after {
        bottom: calc((100% - var(--route-gap)) / 4 - var(--route-caption) / 2 - var(--route-w) / 2);
    }
}

/* ============================================================
   ui_career_steps_map — вид «Шаги»: ментальная карта из карточек.
   Человек — карточка в центре, ветви вариантов — по сторонам: карточка
   роли и столбец карточек шагов наружу. Сетку держит CSS, связи рисует
   career-horizon-steps.js в .cmap__wires по готовым карточкам.
   Мобайл и узкий десктоп (< 1200px) — одна колонка: человек сверху,
   под ним ветви, шаги ветви — списком на линии под ролью.
   ============================================================ */
.career-steps {
    --cmap-role: 184px;
    --cmap-role-h: 138px;
    --cmap-gap: 22px;
    --cmap-step: 60ms;
    margin-top: var(--space-4);
}

.cs-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
    background: rgba(var(--color-accent-rgb), 0.05);
    border-radius: var(--radius-md);
}
.cs-next__body { flex: 1 1 18rem; min-width: 0; }
.cs-next__kicker { margin: 0; font-size: var(--font-size-xs); font-weight: 600; color: var(--color-accent); }
.cs-next__title { margin: 2px 0; font-size: var(--font-size-md); font-weight: 600; line-height: 1.35; }
.cs-next__meta { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-soft); }
@media (max-width: 559px) { .cs-next__cta { flex: 1 1 100%; justify-content: center; } }

/* Сетка. */
.cmap { position: relative; display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.cmap__wires { display: none; }
.cmap__center { order: -1; display: flex; }
.cmap__side { display: grid; gap: var(--space-5); align-content: start; }
.cmap__side--right { order: 0; }
.cmap__side--left { order: 1; }
.cmap-branch { display: grid; gap: var(--space-2); transition: opacity 200ms var(--ease-out); }
.cmap-steps {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: 0 0 0 17px;
    padding: 0 0 0 var(--space-4);
    border-left: 2px solid var(--color-border);
}
.cmap-branch--selected .cmap-steps { border-left-color: rgba(var(--color-accent-rgb), 0.45); }
@media (min-width: 1200px) {
    .cmap {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        column-gap: var(--cmap-gap);
        align-items: center;
    }
    .cmap__center, .cmap__side--right, .cmap__side--left { order: 0; }
    .cmap__center { justify-content: center; }
    .cmap__wires { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
    .cmap-branch {
        grid-template-columns: var(--cmap-role) minmax(0, 1fr);
        column-gap: var(--cmap-gap);
        align-items: center;
    }
    /* Слева роль стоит у человека, шаги — снаружи. */
    .cmap-branch--left { grid-template-columns: minmax(0, 1fr) var(--cmap-role); }
    .cmap-branch--left .cmap-role { order: 2; }
    .cmap-steps { margin: 0; padding: 0; border: 0; }
}

/* Карточка — общий облик узла. */
.cmap-card {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 160ms var(--ease-out);
}
a.cmap-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
a.cmap-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.cmap-tag {
    align-self: flex-start;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--color-text-soft);
    background: var(--color-bg-soft);
}
.cmap-tag--accent { color: var(--color-accent); background: rgba(var(--color-accent-rgb), 0.1); }
.cmap-tag--new { color: var(--color-teal); background: rgba(var(--color-teal-rgb), 0.1); }

/* Человек — достигнутая точка. Анатомия та же, что у карточки роли:
   в углу, где у роли метка состояния, — зелёная галочка сделанного шага,
   под ней должность, место работы прижато к низу. Зелёное на карте —
   пройденное, синее — путь впереди. */
.cmap-me {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    max-width: 22rem;
    border-color: rgba(var(--color-sage-rgb), 0.45);
    background: linear-gradient(180deg, rgba(var(--color-sage-rgb), 0.08), rgba(var(--color-sage-rgb), 0.02)), var(--color-surface);
    box-shadow: 0 0 0 5px rgba(var(--color-sage-rgb), 0.07), var(--shadow-sm);
}
.cmap-me { padding-top: 16px; }
/* Галочка сидит на верхней кромке: место внутри карточки остаётся
   должности. */
.cmap-me__mark {
    position: absolute;
    top: -11px;
    left: 10px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-sage);
    color: var(--color-surface);
    box-shadow: 0 0 0 3px var(--color-surface);
}
.cmap-me__mark .icon { width: 13px; height: 13px; stroke-width: 3; }
.cmap-me__role { font-size: 0.9375rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.cmap-me__company { font-size: var(--font-size-sm); color: var(--color-text-soft); }

/* Роль. Анатомия одна на все ветви: метка и имя сверху, показатели
   прижаты к низу; на десктопе у всех карточек одна высота, и человек с
   его карточкой — той же высоты. */
.cmap-role { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.cmap-role--selected {
    border-color: rgba(var(--color-accent-rgb), 0.5);
    background: linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.07), transparent), var(--color-surface);
}
.cmap-role__head { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.cmap-role__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--space-2); align-self: stretch; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.cmap-role__name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cmap-role__stats { display: grid; gap: 6px; margin-top: auto; }
.cmap-role__note {
    margin-top: 2px;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cmap-role__note--short { -webkit-line-clamp: 2; }
.cmap-role--selected .stat-bar__value { color: var(--color-text); }
/* Промежуточная должность в столбце шагов — мини-карточка роли. */
/* Промежуточная должность — карточка роли той же структуры и того же
   размера, приглушённая: серый фон, пунктир, без тени. Остановка по
   дороге, а не цель. */
.cmap-role--station {
    background: var(--color-bg-soft);
    border-style: dashed;
    border-color: var(--color-border-strong);
    box-shadow: none;
}
.cmap-role--station .cmap-role__name { display: block; overflow: visible; color: var(--color-text-soft); }
.cmap-role--station .cmap-tag { background: var(--color-surface); }
.cmap-role--station .stat-bar__track i { opacity: 0.75; }
.cmap-role--station.cmap-role--path { border-color: rgba(var(--color-accent-rgb), 0.45); }
@media (min-width: 1200px) {
    /* Нижняя граница, а не высота: карточки одного размера, а самая
       плотная (метка, два ряда имени, два показателя) всё равно влезает. */
    [data-cmap-role], .cmap-me, .cmap-role--station { min-height: var(--cmap-role-h); }
    .cmap-role--station { width: min(100%, var(--cmap-role)); }
    /* Слева столбец шагов прижат к роли справа: должность на пути — тоже. */
    .cmap-branch--left .cmap-role--station { margin-left: auto; }
    .cmap-me { width: var(--cmap-role); }
    .cmap-me__company { margin-top: auto; }
}

/* Шаг. */
.cmap-step__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmap-step__title {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cmap-step--path .cmap-step__title { color: var(--color-text); }
/* Шаги выбранного пути — то, что человеку делать: текст целиком. */
.cmap-branch--selected .cmap-step__title { display: block; overflow: visible; }
.cmap-step__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.cmap-step__plan { color: var(--color-accent); font-weight: 500; }
.cmap-step__warn { color: var(--color-warning); font-weight: 500; }
.cmap-step--next {
    border-color: rgba(var(--color-accent-rgb), 0.55);
    box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.1), var(--shadow-xs);
}
.cmap-step--next .cmap-step__title { font-weight: 600; color: var(--color-text); }
.cmap-step--done .cmap-step__title { color: var(--color-text-muted); }

/* Точка состояния шага. */
.cmap-dot {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong);
    background: var(--color-surface);
    color: #fff;
}
.cmap-step--path .cmap-dot { border-color: var(--color-accent); }
.cmap-dot--in_plan { border-color: var(--color-accent); }
.cmap-dot--in_plan::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
/* Сделанный шаг — как готовый пункт ui_work_list: зелёный круг с белой
   галочкой, и связь к нему зелёная. Один облик «готово» на весь продукт. */
.cmap-dot--done { width: 16px; height: 16px; margin-top: 1px; border: 0; background: var(--color-sage); color: var(--color-surface); }
.cmap-dot--done .icon { width: 10px; height: 10px; stroke-width: 3; }

/* «Ещё N шагов». */
.cmap-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 0 12px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-pill);
}
.cmap-more:hover, .cmap-more:focus-visible { color: var(--color-text); background: var(--color-bg-soft); }
.cmap-more__dots { display: inline-flex; gap: 3px; }
.cmap-more__dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
@media (pointer: coarse) { .cmap-more { min-height: 44px; } }

/* Связи. */
.cmap-wire {
    fill: none;
    stroke: var(--color-border-strong);
    stroke-width: 1.5;
    stroke-linecap: round;
    transition: opacity 200ms var(--ease-out);
}
.cmap-wire--selected { stroke: rgba(var(--color-accent-rgb), 0.55); stroke-width: 2; }
.cmap-wire--walked { stroke: rgba(var(--color-sage-rgb), 0.7); stroke-width: 2; }

/* Наведение: остаётся ярким вариант под рукой, общий шаг — во всех ветвях. */
.cmap[data-focus] .cmap-branch:not(.is-focus) { opacity: 0.35; }
.cmap[data-focus] .cmap-wire:not(.is-focus) { opacity: 0.15; }
.cmap-step.is-twin { border-color: rgba(var(--color-accent-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.14); }

.cs-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}
.cs-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; color: var(--color-text-soft); }
.cs-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.cs-legend .cmap-dot { margin-top: 0; }
.cs-hint { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
@media (hover: none) { .cs-hint { display: none; } }

/* Появление: карточка человека, затем связи растут к ролям, роли
   проявляются, за ними — шаги ветви по порядку. Порядок задаёт скрипт
   (--i — номер ветви, --j — номер шага в ней). Ничего не пружинит. */
.career-steps.is-growing .cmap-me { animation: cmap-in 320ms var(--ease-out) both; }
.career-steps.is-growing [data-cmap-role] { animation: cmap-in 320ms var(--ease-out) calc(160ms + var(--i, 0) * 90ms) both; }
.career-steps.is-growing .stat-bar__track i { animation: cmap-bar 700ms var(--ease-out) calc(300ms + var(--i, 0) * 90ms) both; }
@keyframes cmap-bar { from { width: 0; } }
.career-steps.is-growing .cmap-steps__item { animation: cmap-in 280ms var(--ease-out) calc(320ms + var(--i, 0) * 90ms + var(--j, 0) * var(--cmap-step)) both; }
.career-steps.is-growing .cmap-wire { stroke-dasharray: 1 1; animation: cmap-draw 360ms var(--ease-out) var(--d, 0ms) both; }
.career-steps.is-growing .cs-next { animation: cmap-in 320ms var(--ease-out) both; }
.career-steps.is-leaving .cmap, .career-steps.is-leaving .cs-next { animation: cmap-out 220ms var(--ease-out) both; }
@keyframes cmap-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes cmap-out { to { opacity: 0; } }
@keyframes cmap-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .career-steps .cmap-me, .career-steps .cmap-role, .career-steps .cmap-steps__item, .career-steps .cmap-wire, .career-steps .cmap, .career-steps .cs-next { animation: none !important; }
}

.vector-steps__anchor { position: relative; top: calc(-1 * var(--space-8)); display: block; height: 0; }

/* Выделение карточек — по образцу продукта (ui_resume_hero): белая
   карточка и обычная тень, без цветных ореолов и заливок. Выбранный путь —
   акцентная рамка и полоса по верхнему краю, новое — бирюзовая точка перед
   именем; достигнутую должность отмечает только зелёная галочка. Блок стоит
   после базовых правил карты и маршрута, иначе они его перекрывают. */
.cmap-me, .route-card--current, .ch-origin__label {
    border-color: var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.cmap-role--selected, .route-card--target, .ch-node--selected .ch-node__label {
    border-color: var(--color-accent);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.cmap-role--selected, .ch-node--selected .ch-node__label { overflow: hidden; }
.cmap-role--selected::before, .ch-node--selected .ch-node__label::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--color-accent);
}
.cmap-role--selected { position: relative; }
.ch-node__label { translate: var(--dx, 0) 0; }
.cmap-role--added .cmap-role__name::before, .ch-node--added:not(.ch-node--selected) .ch-node__name::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 6px 1px 0;
    border-radius: 50%;
    background: var(--color-teal);
    vertical-align: middle;
}
.role-route__row:not(.role-route__row--alt) .route-card--target { overflow: hidden; }
.role-route__row:not(.role-route__row--alt) .route-card--target::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--color-accent);
}
.role-route__row--alt .route-card--target { border-color: var(--color-border); box-shadow: var(--shadow-xs); }
.cmap-step--next { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.cmap-step.is-twin { box-shadow: var(--shadow-sm); }
.ch-node--selected .ch-node__dot { box-shadow: 0 0 0 3px var(--color-surface); }
/* Наведение и фокус не перекрашивают плиту в белую карточку: правила
   .ch-node:hover/.is-focus для обычных подписей ставят светлый фон. */
.ch-node--selected:hover .ch-node__label,
.ch-node--selected.is-focus .ch-node__label {
    background:
        radial-gradient(220px 160px at 100% 0%, rgba(124, 92, 255, 0.36), transparent 70%),
        radial-gradient(200px 160px at 0% 100%, rgba(45, 212, 191, 0.14), transparent 70%),
        var(--brand-tile);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

/* Выбранный путь — плита (29.10): тот же тёмный материал, что основная
   профессия и выбранный вариант на карте (.profession-card--hero,
   .career-vector--selected). Одна плита на вид: цель выбранной дороги в
   «Должностях до цели», роль выбранного пути в «Шагах» и узел выбранного
   пути в «Должностях». Полосу 3px сверху снимает: сцена говорит сама. */
.cmap-role--selected,
.ch-node--selected .ch-node__label,
.role-route__row:not(.role-route__row--alt) .route-card--target {
    --hero-text: #EEF0FF;
    --hero-soft: #A7ACC8;
    --progress-track: rgba(255, 255, 255, 0.14);
    border-color: transparent;
    color: var(--hero-text);
    background:
        radial-gradient(220px 160px at 100% 0%, rgba(124, 92, 255, 0.36), transparent 70%),
        radial-gradient(200px 160px at 0% 100%, rgba(45, 212, 191, 0.14), transparent 70%),
        var(--brand-tile);
    box-shadow: var(--shadow-md);
}
.cmap-role--selected::before,
.ch-node--selected .ch-node__label::before,
.role-route__row:not(.role-route__row--alt) .route-card--target::before { content: none; }
.cmap-role--selected .cmap-role__name,
.ch-node--selected .ch-node__name,
.route-card--target .route-card__title { color: inherit; }
.cmap-role--selected .stat-bar__value,
.ch-node--selected .stat-bar__value,
.role-route__row:not(.role-route__row--alt) .route-card--target .stat-bar__value { color: var(--hero-text); }
.cmap-role--selected .stat-bar__label,
.cmap-role--selected .cmap-role__note,
.ch-node--selected .stat-bar__label,
.ch-node--selected .ch-node__dir,
.role-route__row:not(.role-route__row--alt) .route-card--target .stat-bar__label,
.role-route__row:not(.role-route__row--alt) .route-card--target .route-card__note,
.role-route__row:not(.role-route__row--alt) .route-card--target .route-card__top,
.cmap-role--selected .cmap-role__top { color: var(--hero-soft); }
a.cmap-role--selected:hover,
.role-route__row:not(.role-route__row--alt) a.route-card--target:hover { border-color: transparent; box-shadow: var(--shadow-lg); }
a.cmap-role--selected:focus-visible,
.role-route__row:not(.role-route__row--alt) a.route-card--target:focus-visible { outline-color: #5FB8E8; }

/* Страница отклика — язык «Обзора» (29.10): заголовок раздела над
   карточкой (а не мелкой серой подписью внутри), документы строками
   ui_strengthen_row, подготовка к разговору — строками через волосяную
   линию, сделанный этап воронки — зелёный круг с галочкой, как «сделано»
   по всему продукту. */
.apps-detail__section { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.apps-detail__section > .apps-detail__panel-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.apps-detail__section > .apps-detail__panel { background: var(--color-surface); }
.apps-detail__rail, .apps-detail__body { gap: var(--space-5); }
.apps-detail { gap: var(--space-5); margin-top: var(--space-5); }
.apps-detail__docs { margin: calc(-1 * var(--space-2)) 0 var(--space-2); }
.apps-detail__docs .sx-row__icon { width: 36px; height: 36px; }
.apps-detail__docs .sx-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
.apps-prep__intro { margin: 0 0 var(--space-3); font-size: 0.875rem; color: var(--color-text-soft); max-width: 62ch; }
.apps-prep__list { gap: 0; }
.apps-prep__item { padding: var(--space-3) 0; border-top: 1px solid var(--color-border-soft); }
.apps-prep__item:first-child { border-top: 0; padding-top: 0; }
.apps-prep__req { font-size: 0.9375rem; font-weight: 500; line-height: 1.4; }
.apps-prep__what { margin-top: 4px; padding-left: 15px; }
.apps-prep__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
}
.apps-prep__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.apps-now__dates { font-variant-numeric: tabular-nums; }
/* «Шаг 2 из 6» — только там, где ленты воронки нет (телефон). */
@media (min-width: 768px) { .apps-now__step { display: none; } }

/* Шаг в досье — проход 5 (29.10): один акцент на карточку. Синей остаётся
   главная кнопка; текущий шаг узнаётся по залитому номеру и точке у
   надзаголовка, а не по синей рамке, синей подписи и синей полосе сразу.
   Метка тяжести — мягкой плашкой у надзаголовка, без рамки. «С чего
   начать» — нейтральная плашка без полосы-выноски. */
.vector-steps__item--current { border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.vector-steps__item--current::before {
    border-color: transparent;
    background: var(--color-text);
    color: var(--color-surface);
    font-weight: 600;
}
.vector-steps__item--current .vector-steps__kicker { color: var(--color-text-soft); }
.vector-steps__kicker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.vector-steps__now { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; }
.vector-steps__kicker-row { justify-content: flex-start; }
.vector-steps__gap {
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--color-text-soft);
    background: var(--color-bg-soft);
}
.vector-steps__gap--blocking { color: var(--color-amber-strong, #9A5B05); background: rgba(var(--color-amber-rgb), 0.14); }
.vector-steps__gap--major { color: var(--color-amber-strong, #9A5B05); background: rgba(var(--color-amber-rgb), 0.09); }
.vector-steps__item .vector-steps__title { font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.01em; }
.vector-steps__item .step-block__text { font-size: 0.9375rem; }
.vector-steps__item .step-block__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; color: var(--color-text-muted); }
.vector-steps__item .step-block--start {
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--color-bg-soft);
    box-shadow: none;
}
.vector-steps__item .step-block--start .step-block__label { color: var(--color-text-soft); }
:root[data-theme="dark"] .vector-steps__item .step-block--start { background: rgba(255, 255, 255, 0.05); }
.vector-steps__item .step-block--start .step-block__text { font-weight: 500; color: var(--color-text); }
/* Колонка «Зачем» — с той же высоты, что подпись «С чего начать». */
.vector-steps__item .step-body__why { padding-top: var(--space-3); }
/* «Шаг не подходит?» — тихая текстовая кнопка: без пунктира, кольцо фокуса
   только с клавиатуры. */
.vector-steps__more summary {
    padding: 0 var(--space-2);
    margin-right: calc(-1 * var(--space-2));
    border-radius: var(--radius-sm);
    text-decoration: none;
    border-bottom: 0;
}
.vector-steps__more summary > * { text-decoration: none; border-bottom: 0; }
.vector-steps__more summary:hover { background: var(--color-bg-soft); }
.vector-steps__more summary:focus { outline: none; }
.vector-steps__more summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ui_step_progress variant=segments — воронка отклика полосой сегментов
   (29.10), язык линии карьеры «Откуда вы идёте»: пройденное зелёным,
   текущее акцентом, будущее треком. Подписи мелкие под сегментами,
   текущая — тёмная и полужирная, пройденные — с галочкой. */
.pipe-bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pipe-bar__step { display: grid; gap: 8px; min-width: 0; }
.pipe-bar__seg { height: 6px; border-radius: var(--radius-pill); background: var(--progress-track); }
.pipe-bar__step--done .pipe-bar__seg { background: var(--color-sage); }
.pipe-bar__step--active .pipe-bar__seg { background: var(--color-accent); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.16); }
.pipe-bar__label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pipe-bar__label .icon { width: 12px; height: 12px; flex: none; color: var(--color-sage); stroke-width: 3; }
.pipe-bar__step--done .pipe-bar__label { color: var(--color-text-soft); }
.pipe-bar__step--skipped .pipe-bar__seg { background: rgba(var(--color-sage-rgb), 0.3); }
.apps-now .pipe-bar { margin-bottom: var(--space-2); }
.pipe-bar__step--active .pipe-bar__label { color: var(--color-text); font-weight: 600; }

/* ============================================================================
   Пакет обновления устаревших сущностей (/app/update, update-batch.md)
   ============================================================================
   Экран одного решения: строки-кандидаты с ценой и причиной, ход работы, итог.
   Живёт в фокус-каркасе мастера (.onboarding-step), поэтому вертикальный ритм и
   sticky-футер берутся оттуда — здесь только анатомия строки.

   Mobile-first: базовая раскладка строки — в столбик под 375px (галочка и текст
   рядом, цена снизу), с 600px уезжает в три колонки. Обратный порядок ломал бы
   строку именно там, где 80% трафика. */

.update-select__form { display: flex; flex-direction: column; gap: var(--space-4); }
.update-select__sub {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Что изменилось — контекст над списком работ. Визуально это НЕ карточки
   выбора: у блока нет рамок и галочек, потому что решать здесь нечего —
   человеку сообщают, что уже произошло. */
/* Заливки у блока нет: серая плашка спорила за внимание со списком работ ниже,
   хотя решать здесь нечего. Факты разделены волосяной линией — она держит их
   одним списком, не превращая каждый в карточку. */
/* Что изменилось — тихой справкой на мягком фоне, а не разделом между
   линиями: ниже идут разделы плана со своими линиями, и линия справки
   вставала второй прямо над первой. */
.update-changes {
    list-style: none;
    padding: 0 var(--space-4);
    margin: 0 0 var(--space-4);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
}
.update-change {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding-block: var(--space-3);
}
.update-change + .update-change { border-top: 1px solid var(--color-border-soft); }
.update-change__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.update-change__body > p { margin: 0; }
/* Значок выровнен по прописной высоте первой строки, а не по её верху: иначе
   он висит выше текста и читается оторванным от него. */
.update-change__icon { color: var(--color-text-muted); flex: none; padding-top: 2px; }

/* Мера ограничена: на широком экране фраза в одну строку уходила на всю ширину
   колонки и рядом с ней оставалось полполосы пустоты. */
.update-change__title { font-weight: 600; font-size: 0.9375rem; max-width: 62ch; }
.update-change__note { font-size: 0.8125rem; color: var(--color-text-muted); max-width: 62ch; }
/* Отметка времени — тем же моноширинным, что даты документов ниже: на одном
   экране одна величина набирается одним способом, иначе даты читаются как
   разные сущности. */
/* Дата — внутри той же строки, что и факт: моноширинная и тише его, чтобы
   читалась отметкой времени, а не частью фразы. */
.update-change__at {
    margin-left: var(--space-1);
    font-weight: 400;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-soft);
}

/* Сводка бюджетов — один блок на экран. Счётчик в каждой строке превращался в
   шум: вопрос у человека один — «хватит ли», и задаёт он его перед нажатием. */
/* Сводка бюджетов — таблица из двух колонок, а не три независимые строки:
   имена бюджетов разной длины («Применения ответов» против «Целевые резюме»)
   переносятся на телефоне по-своему, и значения вставали лесенкой. Общая
   колонка имён выравнивает остатки по одному краю, и три числа читаются одним
   движением взгляда — ради этого сводка и собрана в одном месте. */
.update-quotas {
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-line, var(--color-border));
}
/* Каждая строка сводки — две колонки с ОДИНАКОВОЙ шириной имени: имена
   бюджетов разной длины («Применения ответов» против «Целевые резюме»)
   переносятся на телефоне по-своему, и остатки вставали лесенкой. Общая колонка
   выравнивает их по одному краю, и три числа читаются одним движением взгляда —
   ради этого сводка и собрана в одном месте. */
/* Столбцы общие на всю сводку (элементы счётчика — прямые ячейки одной
   сетки через display: contents): ячейки · имя · остаток. Сетка своя у каждой
   строки была рассчитана на два элемента, имя и остаток, и с появлением ячеек
   строка разъезжалась: ячейки слева, имя посередине, остаток под ними. */
.update-quotas {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: var(--space-2);
    row-gap: var(--space-1);
    align-items: center;
}
.update-quotas__item { display: contents; }
/* Под свёрнутым «Ещё не учитывают правки» своя линия уже есть: вторая
   над сводкой оставляла между ними пустую полосу в две рамки. */
.update-others + .update-quotas { border-top: 0; padding-top: 0; }
.update-quotas__item > .quota-meter__text,
.update-quotas__item > .quota-meter__cta { white-space: normal; }
.update-quotas__item > .quota-meter__cta { grid-column: 3; }
/* Счётчик без ячеек (безлимит, неизвестный остаток) — имя во второй
   столбец, чтобы имена всех строк стояли по одному краю. */
.update-quotas__item > .quota-meter__label:first-child { grid-column: 2; }
/* На телефоне остаток под именем: в одну строку с датой сброса он
   обрезался. */
@media (max-width: 479px) {
    .update-quotas { grid-template-columns: auto minmax(0, 1fr); }
    .update-quotas__item > .quota-meter__text,
    .update-quotas__item > .quota-meter__cta { grid-column: 2; }
}

/* Раздел плана — сворачиваемая запись (<details>), а не заголовок над
   полотном: шапка отвечает на всё, что нужно для решения (что за раздел,
   сколько отмечено, сколько осталось в бюджете), и длинный раздел можно не
   раскрывать. Разделы разделены волосяной линией, как строки внутри: экран
   лежит на плите мастера, и карточки в ней читались бы коробкой в коробке. */
.update-group { border-top: 1px solid var(--color-border); }
/* Нижняя линия — у последнего раздела перед тем, что идёт после списка. */
.update-group:not(:has(~ .update-group)) { border-bottom: 1px solid var(--color-border); }
.update-group__head {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    cursor: pointer;
    list-style: none;
}
.update-group__head::-webkit-details-marker { display: none; }
.update-group__head:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.update-group__heading { display: grid; gap: 4px; min-width: 0; padding-top: 2px; }
.update-group__title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); }
.update-group__title { margin: 0; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; color: var(--color-text); }
.update-group__status { font-size: 0.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.update-group__quota { font-size: 0.8125rem; }
.update-group--single .update-group__head { cursor: default; grid-template-columns: auto auto minmax(0, 1fr); }
.update-group--single .update-group__title { cursor: pointer; }
.update-group__chev { margin-top: 6px; color: var(--color-text-muted); transition: transform 0.18s ease; }
.update-group[open] > .update-group__head .update-group__chev { transform: rotate(180deg); }
.update-group__head:hover .update-group__title { color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .update-group__chev { transition: none; } }
/* Тело раздела — под именем, а не под чекбоксом: строки читаются детьми
   шапки. Отступ = чекбокс (44) + зазор + плашка (32) + зазор. */
.update-group__body { display: grid; gap: var(--space-3); padding: 0 0 var(--space-4); }
@media (min-width: 640px) {
    .update-group__body { padding-left: calc(44px + 32px + 2 * var(--space-3)); }
}
/* Общая причина недоступности раздела — один раз, с решением рядом. */
.update-group__shared {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px var(--space-2);
    padding: var(--space-3); border-radius: var(--radius-md);
    background: rgba(var(--color-amber-rgb), 0.08); color: var(--color-text);
    font-size: 0.875rem; line-height: 1.5;
}
.update-group__shared > .icon { margin-top: 3px; color: rgb(var(--color-amber-rgb)); }
.update-group__shared p { margin: 0; max-width: 62ch; }
.update-group__shared .btn, .update-group__shared .ui-button { grid-column: 2; justify-self: start; margin-top: 4px; }
/* padding: 0 обязателен: list-style: none убирает маркер, но не служебный
   отступ списка — карточки уезжали от левого края, а заголовок группы стоял на
   месте. */
/* Разделитель тот же, что в ряду фактов строки: «ПРОФЕССИИ 1» без него
   читалось одним словосочетанием, а не «раздел и сколько в нём». */
/* Финал прохода «Улучшить» по одной сущности: её строка — одна, в рамке
   акцента, остальное устаревшее свёрнуто ниже (.update-others). */
/* Специфичность класса списка + класса цели: правило .update-group__list
   ниже по файлу обнуляло padding, и отметка прилипала к рамке карточки. */
.update-group__list.update-focus {
    margin: 0 0 var(--space-4);
    padding: var(--space-1) var(--space-4);
    border: 1px solid rgba(var(--color-accent-rgb), 0.35);
    border-radius: var(--radius-lg);
    background: rgba(var(--color-accent-rgb), 0.03);
}
/* Решение причины у цели прохода стоит главной кнопкой внизу экрана —
   в карточке оно повторялось бы. */
.update-focus .update-row__fix { display: none; }
/* Цель прохода заблокирована и ничего не отмечено: неактивная «Нечего
   обновлять» рядом с решением причины только шумит. Отметят что-то из
   свёрнутого списка — update-select.js включит кнопку, и она появится. */
.update-select__form[data-hide-empty] .update-select__submit:disabled { display: none; }
.update-others { margin: 0 0 var(--space-4); border-top: 1px solid var(--color-border-soft); }
.update-others__toggle {
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: 44px; list-style: none; cursor: pointer;
    font-size: 0.875rem; font-weight: 600; color: var(--color-accent);
}
.update-others__toggle::-webkit-details-marker { display: none; }
.update-others__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.update-others[open] .update-others__chev { transform: rotate(180deg); }
.update-others__chev { transition: transform 0.18s ease; }

.update-group__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* Строка — объект выбора, поэтому имеет границу и фон: пять строк без
   собственных краёв читаются как один абзац, в котором неясно, к чему относится
   галочка.

   Контрольная колонка держит ТОЛЬКО чекбокс, фиксированной ширины. Имя объекта
   живёт в текстовой колонке отдельным `<label for>`: имена бывают длинными
   («Chief Technology Officer/Технический директор (CTO) — Topassistant»), и
   внутри auto-колонки такое имя съедало строку, оставляя объяснению ширину в
   одно слово. */
/* Строка — плоская запись списка, а не карточка: два десятка карточек с
   рамками, заливкой и собственными радиусами читались коробками, в которых
   текст висел на разных линиях. Теперь их держит одна волосяная линия, как в
   прототипе кабинета; выбранное отмечает галочка, а не заливка. */
.update-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
        "pick icon body"
        ".    .    cost"
        ".    .    fix";
    gap: 2px var(--space-3);
    padding: var(--space-2) 0;
    align-items: start;
}
.update-row + .update-row { border-top: 1px solid var(--color-line, var(--color-border)); }
/* Строка из одного имени — по центру своей отметки: чекбокс держит площадь
   нажатия 44px, и имя, прижатое к верху, оставляло под собой пустую полосу. */
.update-row:not(:has(.update-row__body > :nth-child(2))):not(:has(.update-row__cost)) { align-items: center; }
.update-row:not(:has(.update-row__body > :nth-child(2))):not(:has(.update-row__cost)) .update-row__pick,
.update-row:not(:has(.update-row__body > :nth-child(2))):not(:has(.update-row__cost)) .update-row__body { padding-top: 0; }
.update-row p,
.update-row ul { margin: 0; }

/* Недоступная строка гаснет, но остаётся читаемой: она сообщает, что работа
   нужна, и прятать её значило бы соврать «всё в порядке». */
.update-row--blocked { opacity: 0.72; }

/* Чекбокс и плашка выровнены по прописной высоте имени, а не по верху блока:
   иначе они «всплывали» над строкой, к которой относятся. */
/* Квадратик 18px по центру первой строки имени (26px): отступ 4px. */
.update-row__pick { grid-area: pick; padding-top: 4px; }
/* Значок вида работы — якорь, по которому строка узнаётся в списке из двух
   десятков: плашка, как в прототипе, а не голый глиф. */
.update-row__icon { grid-area: icon; display: flex; }
.update-row__fix { grid-area: fix; }
/* Внутри строки у чекбокса нет собственного текста — подпись стоит рядом как
   `<label for>`, поэтому обёртка компонента не должна занимать ширину и
   добавлять свой отступ.

   Площадь нажатия при этом обязана остаться ≥44×44 (WCAG 2.5.5): у компонента
   её давал как раз padding обёртки, и обнулив его, мы срезали цель до размера
   самого квадратика. Возвращаем площадь невидимым расширителем — он попадает в
   тот же label, поэтому промах по краю всё равно отмечает строку.

   Ширина расширителя задана токеном, а НЕ отрицательным отступом от квадратика:
   при inset'е итог считался от размера самого чекбокса (18px + два отступа), и
   на 0.7rem выходило 40px — меньше нормы, хотя выглядело как «с запасом».
   Здесь же 44px стоят в стилях буквально и переживут смену размера квадратика. */
/* Чекбокс раздела («Профессии», «Резюме») и подраздела (резюме одной
   профессии) — в той же колонке, что чекбоксы строк, со своей плашкой и
   именем справа: читается родителем строк под ним. */
.update-subgroup-head { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.update-subgroup-head .update-subgroup { margin: 0; }
.update-subgroup__count { margin-left: 4px; color: var(--color-text-muted); font-weight: 500; }
.update-group__pick { display: inline-flex; align-items: center; }
/* Квадратик — по центру строки заголовка: у компонента верхний отступ под
   первую строку текста, а здесь рядом плашка и одна строка имени. */
.update-group__pick .checkbox,
.update-row__pick .checkbox { align-items: center; min-height: 0; }
.update-group__pick .checkbox input[type="checkbox"],
.update-row__pick .checkbox input[type="checkbox"] { margin-top: 0; }
.update-group__pick[hidden] { display: none; }
.update-group__pick--spacer { width: 18px; }
.update-group__pick .checkbox,
.update-row__pick .checkbox { position: relative; padding: 0; gap: 0; }
.update-group__pick .checkbox::after,
.update-row__pick .checkbox::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap-min);
    height: var(--tap-min);
    transform: translate(-50%, -50%);
}
.update-group__pick .checkbox__label,
.update-row__pick .checkbox__label { display: none; }

.update-row__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Цена — свой столбец: она отвечает на другой вопрос, чем вид работы и дата, и
   в общем ряду фактов с ними сливалась. Иконка кодирует тип кармана (бесплатно
   против платного бюджета) — слово при ней остаётся, цвет один не читается. */
.update-row__cost {
    grid-area: cost;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.update-row__cost svg { flex: none; }

.update-row__kind {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Имя — кликабельная подпись поля, поэтому у него увеличенная область нажатия
   по вертикали (WCAG 2.5.5): на телефоне это основная цель в строке. */
.update-row__name {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    cursor: pointer;
    padding: 2px 0;
}
.update-row--blocked .update-row__name { cursor: default; }
/* Работодатель — второй уровень набора: тот же кегль, но обычный вес и
   приглушённый цвет. Роль отвечает «кем», компания — «где», и в одной строке
   жирного они спорили за внимание, растягивая карточку на пять строк. */
.update-row__company {
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--color-text-soft);
    overflow-wrap: anywhere;
}
/* Подзаголовок подгруппы внутри раздела. Тише имени раздела (тот стоит с
   плашкой и счётчиком) и тише имён документов под ним: его работа — разрезать
   полотно, а не спорить со строками за внимание. */
.update-subgroup {
    margin: var(--space-3) 0 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}
.update-subgroup:first-of-type { margin-top: 0; }
/* Ряд фактов: вид работы, дата, бюджет. Без капса — заглавными он кричал и
   читался хуже самого имени документа, хотя это справка, а не заголовок.
   Разделители рисуются CSS, чтобы разметка не носила пунктуацию. */
.update-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-1);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
}
/* Разделитель — в конце предыдущего элемента, а не в начале следующего: при
   переносе ряда фактов точка уезжала в начало новой строки и читалась как
   маркер списка. */
.update-row__meta > span:not(:last-child)::after { content: "·"; margin-left: var(--space-1); }
.update-row__why { font-size: 0.9375rem; color: var(--color-text-soft); }

.update-row__notes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.update-row__note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.update-row__note svg { flex: none; margin-top: 2px; }
/* Почему строка не отмечена заранее — тем же тихим набором, что последствия,
   но отдельной строкой над ними: это ответ на вопрос «а почему без галочки»,
   и он читается первым. */
.update-row__hold {
    display: flex; align-items: flex-start; gap: 6px; margin-top: 4px;
    font-size: 0.8125rem; color: var(--color-text-soft);
}
.update-row__hold svg { flex: none; margin-top: 2px; color: var(--color-text-muted); }

/* Недоступная строка объясняется прямо в месте объяснения: отдельная подпись
   сбоку заставляла бы сверять, к чему она относится. */
.update-row--blocked .update-row__why { color: var(--color-warning); }

/* Липкая панель действий перекрывает поток, поэтому список получает отступ
   ровно на её высоту: без него последняя строка пряталась под кнопкой, и
   отметить её было нечем. */
.update-select__form { padding-bottom: 5.5rem; }
/* На телефоне — две строки: счёт выбранного и тихий выход сверху, главная
   кнопка во всю ширину под ними. Колонкой из трёх этажей подвал занимал
   треть экрана поверх списка, который человек как раз отмечает. */
.update-select__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    position: sticky;
    bottom: 0;
    /* Отступ сверху — не воздух ради воздуха: без него карточка списка
       упиралась в кнопку, и её обрезанный край читался как дефект вёрстки, а не
       как «список продолжается под панелью». */
    padding-top: var(--space-3);
    padding-bottom: env(safe-area-inset-bottom);
    /* Фон сплошной, растушёвка — отдельной полосой НАД панелью. Градиент во
       всю её высоту оставлял прозрачную верхнюю часть, и текст списка
       просвечивал сквозь кнопку. */
    /* Фон — тот, на котором стоит форма (--sticky-bg): на телефоне это фон
       страницы, на широком экране — белая плита мастера. С одним серым
       фоном на плите вставала серая полоса с серым же затуханием. */
    background: var(--sticky-bg, var(--color-bg));
}
.update-select__retired { display: flex; align-items: flex-start; gap: 6px; margin: var(--space-3) 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-muted); max-width: 72ch; }
.update-select__retired > .icon { margin-top: 3px; flex: none; }
.update-group__heading > .update-group__shared { margin-top: var(--space-2); cursor: default; }
.update-select__actions > .btn--primary, .update-select__actions > .btn--secondary { flex: 1 1 100%; order: 2; }
.update-select__picked { margin: 0 auto 0 0; font-size: 0.875rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.update-select__actions::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 100%;
    height: var(--space-5);
    background: linear-gradient(to top, var(--sticky-bg, var(--color-bg)), transparent);
    pointer-events: none;
}

/* ============================================================================
   ui_work_list — ход фоновых работ (пакет обновления, первый проход,
   документы отклика). Одна группа строк в общей рамке, отметки состояний
   соединены линией: это процесс, а не россыпь.
   ============================================================================ */
.work-list {
    list-style: none;
    margin: 0;
    padding: var(--space-1) 0;
    display: grid;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}
.work-item {
    --work-mark: 28px;
    position: relative;
    display: grid;
    grid-template-columns: var(--work-mark) minmax(0, 1fr);
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    align-items: start;
    padding: var(--space-3) var(--space-4);
}
/* Линия между отметками — от низа своей до верха следующей, с зазором. */
.work-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--space-4) + var(--work-mark) / 2 - 0.5px);
    top: calc(var(--space-3) + var(--work-mark) + 4px);
    bottom: calc(4px - var(--space-3));
    width: 1px;
    background: var(--color-border);
}
.work-item--done:not(:last-child)::before { background: rgba(var(--color-sage-rgb), 0.55); }

.work-item__mark {
    position: relative;
    z-index: 1;
    width: var(--work-mark);
    height: var(--work-mark);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    border: 1.5px dashed var(--color-border-strong);
    background: var(--color-surface);
}
.work-item--done .work-item__mark { border: 0; background: var(--color-sage); color: var(--color-surface); }
.work-item--running .work-item__mark { border: 2px solid rgba(var(--color-accent-rgb), 0.28); color: var(--color-accent); }
.work-item--failed .work-item__mark { border: 0; background: rgba(var(--color-danger-rgb), 0.12); color: var(--color-danger); }
.work-item--blocked .work-item__mark { border: 0; background: var(--color-warning-soft); color: var(--color-warning-strong); }
.work-item--skipped .work-item__mark { border: 0; background: var(--color-bg-soft); color: var(--color-text-muted); }
/* Шаг плана (numbered): номер в отметке — порядок без чтения. Текущий —
   акцентный круг с номером и мягкое кольцо, строка подсвечена так же, как
   идущая работа, но без бегущей полосы: здесь ждут человека, а не нас. */
.work-item__mark { font-size: var(--font-size-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.work-item--queued .work-item__mark:not(:empty) { border-style: solid; border-color: var(--color-border); }
.work-item--current .work-item__mark {
    border: 0;
    background: var(--color-accent);
    color: var(--color-accent-text);
    box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.16);
}
.work-item--current { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
/* Подсвеченная строка у края рамки — вплотную к нему: внутренний отступ
   списка оставлял над ней белую полоску в 4px. */
.work-list:has(> .work-item--current:first-child, > .work-item--running:first-child) { padding-top: 0; }
.work-list:has(> .work-item--current:last-child, > .work-item--running:last-child) { padding-bottom: 0; }
.work-item--current .work-item__title { font-weight: 600; }

.work-item__body { display: grid; gap: 2px; min-width: 0; }
/* Имя по центру отметки, пока оно в одну строку. */
.work-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: center;
    gap: 0 var(--space-2);
    min-height: var(--work-mark);
}
.work-item__title { font-weight: 500; color: var(--color-text); overflow-wrap: anywhere; }
.work-item--queued .work-item__title,
.work-item--skipped .work-item__title { color: var(--color-text-soft); }
.work-item__kind { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.work-item__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.work-item__state { font-weight: 500; }
/* Текст самой работы (вопрос у шага плана) и тихая строка «зачем» под ним. */
.work-item__text { margin-top: var(--space-1); font-size: var(--font-size-md); line-height: 1.45; color: var(--color-text); overflow-wrap: anywhere; }
.work-item__note { font-size: var(--font-size-sm); line-height: 1.45; color: var(--color-text-muted); overflow-wrap: anywhere; }
.work-item--running .work-item__state { color: var(--color-accent); }
.work-item--failed .work-item__state { color: var(--color-danger); }
.work-item--blocked .work-item__state { color: var(--color-warning-strong); }

.work-item__action { grid-column: 2; justify-self: start; margin: 0; }
.work-item__action .btn { min-height: var(--tap-min); }
/* Под текстом ghost-ссылка встаёт по его левому краю, а не со сдвигом поля. */
.work-item__action .btn--ghost { margin-left: calc(-1 * var(--space-3)); }

/* Идёт прямо сейчас — подсветка строки и бегущая полоска шкалы (`lp-drift`). */
.work-item--running { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.work-item--running::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background-image: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.65) 45%,
        rgba(var(--color-accent-rgb), 0.65) 55%,
        transparent 100%);
    background-size: 38% 100%;
    background-repeat: no-repeat;
    animation: lp-drift 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .work-item--running::after {
        animation: none;
        background-image: none;
        background: rgba(var(--color-accent-rgb), 0.5);
    }
}
@media (min-width: 600px) {
    .work-item { grid-template-columns: var(--work-mark) minmax(0, 1fr) auto; }
    .work-item__action { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; }
    .work-item__action .btn--ghost { margin-left: 0; }
}

/* Ход работы и итог — общий ui_work_list; здесь только отступ от шапки. */
.update-progress__list,
.update-done__list { margin-top: var(--space-2); }

.update-done__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

@media (min-width: 600px) {
    .update-row {
        /* На широком экране раскладка та же, что на узком: цена остаётся третьей
           строкой ПОД описанием, а не уезжает к правому краю. Там она висела в
           метре от имени, к которому относится, и строка читалась гантелей —
           два кластера по краям и полполосы пустоты между ними. Решение
           недоступности — своя колонка справа: это действие, а не факт. */
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "pick icon body fix"
            ".    .    cost fix";
        align-items: start;
        gap: 2px var(--space-3);
    }

    .update-select__actions > .btn--primary, .update-select__actions > .btn--secondary { flex: none; order: 0; white-space: nowrap; }
    /* Ряд кнопок прижат вправо: при переносе вторая строка встаёт под
       кнопками, а не под счётчиком «Выбрано N из M». */
    .update-select__actions { justify-content: flex-end; }
    /* Две кнопки (запуск и снятие причины) — счётчик строкой над ними:
       плита мастера узкая, и в один ряд с ним главная падала вниз. */
    .update-select__actions--two > .update-select__picked { flex-basis: 100%; }
    .update-done__actions {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    /* Панель с кнопкой запуска липкая и на широком экране: план бывает
       длиной в несколько экранов, и «Обновить отмеченное (9)» стояла только в
       самом низу. Сводка числом в кнопке видна, пока человек отмечает строки. */
    .update-select__actions { padding-bottom: var(--space-3); }
    .update-done__actions { position: static; background: none; }
}

/* ============================================================================
   Очередь вопросов процесса обновления (/app/update/clarify)
   ============================================================================
   Один вопрос на экране в фокус-каркасе мастера. Композиция минимальная
   намеренно: человек отвечает, а не изучает страницу. */
/* Мета шага — одна mono-строка над заголовком: где мы в очереди, чей вопрос,
   что будет с ответом. Части разделяются точкой только когда строка умещается
   в один ряд: при переносе точка висела в конце строки и читалась опечаткой. */
.update-clarify__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Цена ответа приглушена и здесь: она сообщает условие, а не требует решения. */
.update-clarify__cost { color: var(--color-text-soft); }
/* Разделители — всегда, а не с 560px: на узком экране строка умещалась в один
   ряд и без них слова слипались в «ШАГ 1 ИЗ 14 ОПЫТ ПРАВКИ ЗАПИСЫВАЮТСЯ
   СРАЗУ». Точка, ушедшая при переносе в конец строки, читается хуже, чем
   слипшийся текст, поэтому она неразрывно привязана к своей части. */
.update-clarify__meta > span:not(:last-child)::after {
    content: "·";
    margin-inline-start: var(--space-2);
    color: var(--color-text-muted);
}
/* Место находки или имя резюме совета — строкой над заголовком шага: где в
   документе дело, человеку нужно знать до чтения самой находки. */
.update-clarify__place {
    margin: 0 0 var(--space-1);
    font-size: 0.8125rem;
    color: var(--color-text-soft);
}

.update-clarify__form { display: flex; flex-direction: column; gap: var(--space-3); }
/* Кнопки мини-форм секции — цели нажатия, а не подписи: компактный размер
   системы ниже 44px, и на телефоне в них промахиваются. Поднимаем локально, не
   трогая btn--sm во всём кабинете. */
.update-clarify__form .btn--sm { min-height: var(--tap-min); }
.update-clarify__question { display: flex; flex-direction: column; gap: var(--space-1); }
/* Рабочая область лежит на подложке — карточки-обёртки нет. У шага секции
   внутри свои карточки ролей, и внешняя рамка давала третий уровень границ на
   одном экране; у шага вопроса рамка поля и рамка карточки шли двойной чертой
   в четырёх пикселях друг от друга. В прототипе это метка и поле, больше
   ничего. */
.update-clarify__answer { display: block; }
.update-clarify__subject {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Сам вопрос — главный текст экрана, поэтому крупнее лида страницы. Интерлиньяж
   свободнее обычного: вопросы бывают на три-четыре строки, и на плотном
   интерлиньяже такой абзац жирного текста читается как стена. */
.update-clarify__text { font-size: 1.25rem; line-height: 1.45; font-weight: 600; }
@media (min-width: 600px) {
    .update-clarify__text { font-size: 1.25rem; }
}
.update-clarify__hint { color: var(--color-text-soft); }
.update-clarify__optional { font-size: 0.875rem; color: var(--color-text-muted); }
/* ui_prepared_answer — поле ВНУТРИ строки резюме. Строка на экране выглядит
   так, как ляжет в карьеру: текст до значения, поле, текст после. Поле — не
   коробка формы, а подчёркнутый пропуск в тексте: рамка коробки разрывала бы
   строку и читалась как отдельный вопрос. */
.prep-answer { display: grid; gap: var(--space-2); }
/* Подпись назначения — метка поля той же интонации, что «Ваш ответ» у
   ответа своими словами: шаг очереди не должен менять голос формы от вида
   вопроса. */
.prep-answer__dest {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}
/* Что вписать — факт вопроса словами парсера, тихой строкой над полем. */
.prep-answer__asks { margin: 0 0 4px; font-size: 0.875rem; color: var(--color-text-soft); }
.prep-answer__line { margin: 0; font-size: 1.0625rem; line-height: 1.75; color: var(--color-text); }
/* Мобильные первыми: на узком экране поле внутри строки сжалось бы до
   нескольких знаков и рвало текст посреди слова, поэтому там оно стоит
   целиком своей строкой и получает полную цель нажатия. С 480px — встаёт
   внутрь фразы. Поле — пропуск в тексте, а не коробка формы: подчёркнутая
   подложка цвета акцента, а не серый прямоугольник — серый читался как
   выключенное поле. */
.prep-answer__slot {
    /* Строчный блок с запасом в два знака, а не блок во всю ширину: точка
       или скобка после пропуска («…организацию: [поле].») переносилась
       отдельной строкой под поле. Длинный хвост фразы переносится сам. */
    display: inline-block;
    inline-size: calc(100% - 2ch);
    vertical-align: baseline;
    min-block-size: var(--tap-min);
    margin-block: var(--space-1);
    /* Не меньше 16px: иначе iOS приближает страницу на фокусе. */
    font-size: 1rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--color-text);
    padding: 2px var(--space-2);
    border: 0;
    border-bottom: 2px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: color-mix(in srgb, var(--color-accent) 7%, transparent);
    transition: background-color 120ms ease, border-color 120ms ease;
}
.prep-answer__slot::placeholder { color: var(--color-text-muted); font-weight: 400; opacity: 1; }
.prep-answer__slot:hover { background: color-mix(in srgb, var(--color-accent) 11%, transparent); }
.prep-answer__slot:focus { outline: none; }
.prep-answer__slot:focus-visible {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-bottom-color: var(--color-accent);
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}
.prep-answer__slot.input--error {
    border-bottom-color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 7%, transparent);
}
.prep-answer__unit { color: var(--color-text-soft); }
/* Число и единица — один ряд на любой ширине: «35» и «человек» на разных
   строках читались как два ответа. Числу хватает 9 знаков. */
.prep-answer__line--value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.prep-answer__line--value .prep-answer__slot--number { flex: none; inline-size: 9ch; margin-block: 0; }
/* Стрелки счётчика внутри поля в 9 знаков съедали место под число и
   налезали на «1200»: размер команды вводят с клавиатуры, а не щелчками. */
.prep-answer__slot--number { appearance: textfield; -moz-appearance: textfield; }
.prep-answer__slot--number::-webkit-inner-spin-button,
.prep-answer__slot--number::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.prep-answer__hint { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-muted); }
/* Пример — подсказка, а не значение: курсивом отдельно от единицы. */
.prep-answer__example { font-style: italic; color: var(--color-text-soft); }
/* Черновик строки растёт под текст: три строки textarea обрезали черновик
   длиннее двух строк, и человек правил то, чего не видит целиком. */
@supports (field-sizing: content) {
    .prep-answer__draft { field-sizing: content; min-block-size: 4.5em; }
}
@media (min-width: 480px) {
    .prep-answer__slot {
        display: inline-block;
        inline-size: 14ch;
        min-inline-size: 6ch;
        max-inline-size: 100%;
        min-block-size: 0;
        margin-block: 0;
        vertical-align: baseline;
    }
    /* Поле растёт за вводом и под пример в placeholder там, где браузер это
       умеет; иначе — 14ch. */
    @supports (field-sizing: content) {
        .prep-answer__slot { field-sizing: content; inline-size: auto; min-inline-size: 12ch; }
    }
    .prep-answer__line--value { align-items: baseline; }
}
/* Совет парсера — контекст, а не заголовок: значок слева, текст обычного веса. */
.update-clarify__advice {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    color: var(--color-text-soft);
}
.update-clarify__advice svg { flex: none; margin-top: 3px; color: var(--color-amber, var(--color-warning)); }
/* Резерва под панель здесь НЕТ намеренно. Панель `position: sticky`, а не
   fixed: она остаётся в потоке и занимает собственную высоту в конце шага, —
   значит место под неё уже зарезервировано ею самой. Дополнительные 5.5rem
   резервировали его второй раз и оставляли в конце короткого шага пустую
   полосу в половину экрана. Подложка на панели остаётся: длинный список должен
   уходить под неё, а не обрываться. */
.update-clarify .onboarding-step__actions {
    position: sticky;
    bottom: 0;
    padding-top: var(--space-3);
    padding-bottom: env(safe-area-inset-bottom);
    /* Фон сплошной, а растушёвка — отдельной полосой НАД панелью. Прежде весь
       фон был градиентом, и в его прозрачной части текст списка просвечивал
       ровно под кнопкой: «Дальше» резала пополам чужую строку и читалась как
       дефект вёрстки. */
    background: var(--color-bg);
}
.update-clarify .onboarding-step__actions::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 100%;
    height: var(--space-5);
    background: linear-gradient(to top, var(--color-bg), transparent);
    pointer-events: none;
}
/* На широком экране панель возвращается в поток. Липкой она нужна там, где
   список длиннее экрана и большой палец далеко от кнопки, — то есть на
   телефоне. На десктопе она плыла поверх рабочей области и «Дальше» наезжала
   на карточку роли: человек видел кнопку в середине чужого блока и читал это
   как дефект вёрстки. */
@media (min-width: 768px) {
    .update-clarify .onboarding-step__actions {
        position: static;
        padding-top: 0;
        background: none;
    }
    .update-clarify .onboarding-step__actions::before { display: none; }
}
.update-clarify__undo { font-size: 0.8125rem; color: var(--color-text-muted); }
/* Выход из очереди — отдельной строкой под действиями шага: в одном ряду с
   «Пропустить» они спорили за один жест, хотя один двигает разговор, а второй
   его заканчивает. */
/* Перемещения по разговору — шаг назад и выход в финал — одной тихой строкой
   под панелью действий. Оба уводят с шага, поэтому стоят рядом и оба тише
   «Дальше»; на узком экране строка переносится, а не сжимает цели нажатия. */
/* Подвал шага — сетка с именованными областями. На узком экране действия
   остаются липкой панелью, а перемещения (назад и выход) идут строкой под ней.
   На широком все три слота встают в ОДИН ряд, как в прототипе: назад слева,
   действия по центру, выход у правого края. Сетка, а не флекс подряд: у шага
   секции «назад» живёт в собственной форме, а действия — в другой, и слить их
   можно только через общего родителя. */
.update-clarify__footer {
    display: grid;
    grid-template-areas:
        "actions"
        "back"
        "exit";
    gap: var(--space-2);
}
.update-clarify__back { grid-area: back; }
.update-clarify .onboarding-step__actions { grid-area: actions; }
/* «Пропустить» идёт в DOM после «Дальше» (Enter в поле отправляет форму
   первой кнопкой), а на экране — прежним порядком: первым в ряду и нижним в
   колонке column-reverse. */
.update-clarify .onboarding-step__actions .update-clarify__skip { order: -1; }
.update-clarify__exit { grid-area: exit; }

.update-clarify__exit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    font-size: 0.875rem;
}
@media (min-width: 768px) {
    .update-clarify__footer {
        grid-template-areas: "back actions exit";
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: var(--space-3);
    }
    .update-clarify .onboarding-step__actions { align-items: center; }
    .update-clarify__back { display: flex; align-items: center; }
    /* Одна высота на весь ряд. Кнопка `lg` рядом с `sm` и ссылкой давала три
       разные высоты: при центрировании подписи расходились по вертикали почти
       на шесть пикселей, и ряд читался сбитым. Выравнивать по базовой линии
       нельзя — baseline флекс-кнопки берётся от её ПЕРВОГО элемента, а это
       значок, и кнопка со стрелкой слева уезжала относительно соседей.
       Поэтому высота общая, а главное действие держит вес заливкой и
       горизонтальным отступом, а не ростом. */
    /* Собственный верхний отступ группы действий в ряду не нужен: он есть в
       базовом стиле панели (там она стоит под содержимым шага), а здесь
       сдвигал «Пропустить» и «Дальше» на восемь пикселей ниже соседних
       слотов — ряд читался ступенькой. */
    .update-clarify__footer .onboarding-step__actions { margin-top: 0; }
    .update-clarify__footer .btn { min-height: var(--tap-min); }
    .update-clarify__footer .btn--lg { font-size: 1rem; padding: 0 var(--space-5); }
    .update-clarify__exit a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
    .update-clarify__exit { justify-content: flex-end; }
    /* Внутри ряда подвала действия идут подряд СЛЕВА своего слота: общий
       `margin-left: auto` у главной кнопки толкал её к правому краю, и она
       прилипала к «К обновлению» — два разных по смыслу действия читались
       одной группой. Вправо отъезжает только выход, у него своя колонка. */
    .update-clarify .onboarding-step__actions { justify-content: flex-start; }
    .update-clarify .onboarding-step__actions .onboarding-step__push { margin-left: 0; }
}
/* `display: contents` здесь больше нельзя: слот — ячейка сетки подвала, а
   растворённый контейнер ячейкой не является и терял свою область. */
/* Шаг назад и выход — равноправная пара, поэтому и набраны одинаково: кнопка
   по умолчанию идёт полужирной и выглядела главнее ссылки рядом, хотя оба
   действия одинаково второстепенны рядом с «Дальше». */
.update-clarify__exit a,
.update-clarify__exit .btn { line-height: 1.2; }
.update-clarify__exit .btn {
    /* Цель нажатия как у соседней ссылки: компактный размер кнопки даёт 36px,
       а это самостоятельное перемещение по разговору, а не подпись. */
    min-height: var(--tap-min);
    font-weight: 400;
    font-size: inherit;
    color: var(--color-text-muted);
    padding-inline: var(--space-2);
    margin-inline-start: calc(var(--space-2) * -1);
}
.update-clarify__exit .btn:hover { color: var(--color-text); }
/* Это не ссылка внутри фразы, а самостоятельный выход из процесса, поэтому у
   неё своя цель нажатия: строчной высоты 17px на телефоне не хватает, и человек
   вместо выхода попадает в липкую кнопку «Дальше» прямо над ней. Отрицательный
   внешний отступ гасит собственную подкладку, чтобы визуальный ритм под панелью
   остался прежним. */
.update-clarify__exit a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding-inline: var(--space-2);
    margin-inline-start: calc(var(--space-2) * -1);
    color: var(--color-text-muted);
}
.update-clarify__exit a:hover { color: var(--color-text); }

/* =====================================================================
   Редизайн «Траектории × Apple» (C×B), октябрь 2026.
   Характер — из направления «Траектории»: тёмный фирменный сайдбар цвета
   плитки знака, путь на первом экране, крупные заголовки. Дороговизна — из
   «Apple-светлого»: фон #F5F5F7, белые плиты без рамок, мягкие длинные тени,
   крупные радиусы, воздух. Слой стоит последним намеренно: он переопределяет
   облик компонентов поверх их базовых правил, и откатить его можно одним
   блоком. Токены (фон, рамки, тени, радиусы) изменены в :root выше.
   ===================================================================== */

/* --- Сайдбар: тёмная фирменная колонка --- */
:root { --sidebar-w: 260px; }
.app-sidebar {
    --sb-text: #E9EBF7;
    --sb-soft: #A3A8C3;
    --sb-mute: #6F7493;
    --sb-line: rgba(255, 255, 255, 0.07);
    /* Акцент открытого пункта на тёмной колонке и сплошной счётчик нового. */
    --sb-accent: #5FB8E8;
    --sb-accent-strong: #2A6FD1;
    background:
        radial-gradient(420px 260px at 0% 0%, rgba(124, 92, 255, 0.16), transparent 70%),
        radial-gradient(360px 300px at 100% 100%, rgba(45, 212, 191, 0.07), transparent 70%),
        var(--brand-tile);
    border-right: 0;
    color: var(--sb-text);
    padding: var(--space-5) var(--space-3);
}
.app-sidebar .app-sidebar__header { border-bottom-color: var(--sb-line); padding: 0 var(--space-2) var(--space-4); }
.app-sidebar .site-header__logo-text { color: var(--sb-text); }
.app-sidebar .site-header__logo-eyebrow { color: var(--sb-mute); }
.app-sidebar .brand-mark { background: none; box-shadow: none; --brand-mark-size: 2.125rem; }
.app-sidebar .site-header__logo-text { font-size: 1.1875rem; }
.app-sidebar .nav-list__item a:not(.btn) { color: var(--sb-soft); border-radius: var(--radius-md); }
.app-sidebar .nav-list__item a:not(.btn) .nav-list__icon { color: var(--sb-mute); }
.app-sidebar .nav-list__item a:not(.btn):hover,
.app-sidebar .nav-list__item a:not(.btn):focus-visible { color: var(--sb-text); background: rgba(255, 255, 255, 0.05); }
.app-sidebar .nav-list__item a[aria-current="page"],
.app-sidebar .nav-list__item a.is-active {
    color: #fff;
    background: linear-gradient(90deg, rgba(95, 184, 232, 0.18), rgba(124, 92, 255, 0.08));
    box-shadow: inset 0 0 0 1px rgba(95, 184, 232, 0.22);
    font-weight: 500;
}
.app-sidebar .nav-list__item a[aria-current="page"] .nav-list__icon,
.app-sidebar .nav-list__item a.is-active .nav-list__icon { color: var(--sb-accent); }
.app-sidebar .app-sidebar__trailing { border-top-color: var(--sb-line); }
.app-sidebar .app-sidebar__user { color: var(--sb-text); }
.app-sidebar .app-sidebar__user:hover { background: rgba(255, 255, 255, 0.05); }
/* Блок с именем — теперь вход в раздел «Обо мне + аккаунт» (пункта в меню
   нет), и открытый раздел он подсвечивает так же, как пункты выше. */
.app-sidebar .app-sidebar__user[aria-current="page"] {
    background: linear-gradient(90deg, rgba(95, 184, 232, 0.18), rgba(124, 92, 255, 0.08));
    box-shadow: inset 0 0 0 1px rgba(95, 184, 232, 0.22);
}
.app-sidebar .app-sidebar__user-hint,
.app-sidebar .app-sidebar__logout-btn { color: var(--sb-mute); }
.app-sidebar .app-sidebar__logout-btn:hover,
.app-sidebar .app-sidebar__logout-btn:focus-visible { color: var(--sb-text); background: rgba(255, 255, 255, 0.05); }
.app-sidebar .avatar { background: linear-gradient(135deg, #2DD4BF, #7C5CFF); color: #071019; }
/* Закрыть меню — тихая круглая кнопка, а не квадрат с белой рамкой: рамка
   делала крестик самым громким элементом меню, громче выбранного раздела. */
.app-sidebar .nav-toggle-button { color: var(--sb-text); border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.app-sidebar .nav-toggle-button:hover { background: rgba(255, 255, 255, 0.12); }
@media (min-width: 992px) {
    /* 260, а не 248: подпись раздела «Резюме и профессии» со значком и
       шевроном переносилась на две строки, и раздел выглядел вдвое выше
       соседей. Ширина — токен: её же повторяет фон корня ниже. */
    .app-shell { grid-template-columns: var(--sidebar-w) 1fr; }
    /* 38px, а не 40: с раскрытыми разделами в колонке тринадцать строк и
       три подписи, и на ноутбуке высотой 800px уведомления и аккаунт уходили
       под край. У мыши требования 44px нет. */
    .app-sidebar .nav-list__item a,
    .app-sidebar .nav-list__item a.tap-target { font-size: 0.9375rem; padding: 0.45rem 0.75rem; min-height: 38px; gap: 0.75rem; }
}

/* --- Холст: воздух и мера --- */
.app-main { padding: clamp(1.75rem, 3.5vw, 3.25rem) clamp(1rem, 4.5vw, 4rem); }

/* --- Заголовки: крупный плотный дисплей --- */
.page-head--compact .section-display {
    font-size: clamp(1.875rem, 3vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.08;
    text-wrap: balance;
    max-width: 28ch;
}
.page-head--compact .page-head__intro { font-size: 1.0625rem; color: var(--color-text-soft); max-width: 62ch; }
h2.dash-attention__title, .dash-do__title, .dash-docs__title,
.section-title, .surface-card__title { letter-spacing: -0.02em; }

/* --- Плиты: белые, без рамок, мягкая длинная тень --- */
.surface-card, .profession-card, .job-card, .resume-card, .kpi-card, .app-card, .state-card, .achievement-card, .chart-card, .quick-action,
.attention-row, .feed-conditions, .career-note,
.role-demand, .career-vector, .feedback-notes, .cov-verdict {
    border-color: transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.profession-card:hover, .job-card:hover, .resume-card:hover, .app-card:hover {
    box-shadow: var(--shadow-md);
}

/* --- Кнопки: радиус 12, без рамочного шума у вторичных --- */
.btn { border-radius: var(--radius-md); }
.btn--secondary { border-color: transparent; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-border), 0 1px 2px rgba(16, 18, 26, 0.04); }
.btn--secondary:hover, .btn--secondary:focus-visible { border-color: transparent; box-shadow: 0 0 0 1px var(--color-border-strong), 0 4px 12px -6px rgba(16, 18, 26, 0.18); }

/* --- Вкладки: сегментированный контрол Apple вместо подчёркивания --- */
.profile-subnav { border-bottom: 0; }
.profile-subnav__list { background: rgba(118, 118, 128, 0.10); padding: 3px; border-radius: var(--radius-md); display: inline-flex; gap: 2px; }
.profile-subnav__link { border-radius: 9px; padding: 0.45rem 0.9rem; color: var(--color-text-soft); }
.profile-subnav__link::after { content: none; }
.profile-subnav__link[aria-current="page"],
.profile-subnav__link.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(16, 18, 26, 0.08), 0 2px 8px -2px rgba(16, 18, 26, 0.10);
}

/* --- Первый экран: очередь внимания ---
   Строки — список дел без порядка, поэтому без линии с узлами: рельс
   рисовал маршрут, которого у очереди нет, и забирал у текста пятую часть
   ширины телефона. Смысл строки несёт значок в плашке тона состояния:
   сбой и долг — красным, устаревшее и застрявшее — янтарным, остальное —
   акцентом. Глаз находит тревогу по цвету раньше, чем прочтёт текст. */
.dash-attention__list { display: flex; flex-direction: column; gap: var(--space-3); }
.attention-row { padding: var(--space-3) var(--space-4); font-size: 1rem; }
@media (min-width: 600px) { .attention-row { padding: var(--space-4) var(--space-5); font-size: 1.0625rem; } }
.attention-row--primary { box-shadow: var(--shadow-md); }
.attention-row__mark {
    --mark-rgb: var(--color-accent-rgb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: rgba(var(--mark-rgb), 0.12);
    color: rgb(var(--mark-rgb));
}
.attention-row--failed .attention-row__mark,
.attention-row--billing .attention-row__mark { --mark-rgb: var(--color-danger-rgb); }
.attention-row--stale .attention-row__mark,
.attention-row--career_stale .attention-row__mark,
.attention-row--diff .attention-row__mark,
.attention-row--stalled .attention-row__mark,
.attention-row--reminder .attention-row__mark { --mark-rgb: var(--color-amber-rgb); }
.attention-row--offer_accepted .attention-row__mark { --mark-rgb: var(--color-sage-rgb); }
/* Анатомия строки — сетка: значок | текст | действие. На телефоне кнопка не
   помещается рядом с текстом и уходит под него — в колонку текста, а не под
   значок: прежде она падала к левому краю строки, и у каждой строки было два
   левых края. Значок держится первой строки текста, а не середины плиты. */
.attention-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
}
.attention-row__mark { margin-top: 0; }
.attention-row .btn { grid-column: 2; justify-self: start; }
.attention-row__text { align-self: center; }

/* ui_attention_strip — «Ждёт вас»: очередь внимания полосой пилюль.
   Заголовок раздела в строке с пилюлями: это ориентир, а не раздел, и
   отдельная строка заголовка удваивала бы высоту. Пилюля — ссылка со
   значком тона вида; первая — акцент экрана (заливка), идущая работа —
   тихая плашка без ссылки. */
.att-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}
.att-strip__title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
}
.att-strip__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
/* Телефон: пилюли одной прокручиваемой лентой, а не столбцом — столбцом
   три пилюли снова занимали ~270px, то есть возвращали прежний список. */
@media (max-width: 599px) {
    .att-strip { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .att-strip .att-strip__list {
        flex-wrap: nowrap;
        margin-inline: calc(-1 * var(--space-4));
        padding: 2px var(--space-4) 6px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--space-4);
        scrollbar-width: none;
        /* Край ленты гаснет: обрезанная краем экрана пилюля без затухания
           читалась ошибкой вёрстки, а не продолжением ленты. */
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
                mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
    }
    .att-strip__list::-webkit-scrollbar { display: none; }
    .att-strip__list > li { flex: none; scroll-snap-align: start; }
    .att-chip { white-space: nowrap; }
}
.att-chip {
    --chip-tone: var(--color-accent-rgb);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
a.att-chip:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
a.att-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (pointer: coarse) { .att-chip { min-height: 44px; } }
.att-chip__icon { display: inline-flex; flex: none; color: rgb(var(--chip-tone)); }
.att-chip__icon .icon { width: 14px; height: 14px; }
.att-chip--stale, .att-chip--career_stale, .att-chip--diff, .att-chip--stalled, .att-chip--reminder { --chip-tone: var(--color-amber-rgb); }
.att-chip--failed, .att-chip--billing { --chip-tone: var(--color-coral-rgb); }
.att-chip--offer_accepted, .att-chip--career_suggestion { --chip-tone: var(--color-sage-rgb); }
/* Первая пилюля — акцентная рамка и цвет текста, без заливки: залитый
   синий спорил с кнопками подборки ниже за главный акцент экрана. */
.att-chip--primary { border-color: rgba(var(--color-accent-rgb), 0.5); color: var(--color-accent); }
.att-chip--status { box-shadow: none; background: var(--color-bg-soft); color: var(--color-text-soft); }
.att-chip--status.att-chip--primary { border-color: var(--color-border); color: var(--color-text-soft); }

/* Узкий блок (телефон): кнопка под текстом делала строку выше 120px, и
   три строки с тремя кнопками занимали экран. Здесь строка целиком — ссылка
   её действия (кнопка растянута на строку и прозрачна, имя действия читает
   скринридер), справа шеврон, как в «Что усилить». */
.dash-attention { container: dash-attention / inline-size; }
.attention-row__chevron { display: none; color: var(--color-text-muted); }
@container dash-attention (max-width: 519px) {
    .dash-attention__list .attention-row { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
    .dash-attention__list .attention-row__chevron { display: inline-flex; }
    .dash-attention__list .attention-row .btn {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: auto;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: transparent;
        overflow: hidden;
    }
    .dash-attention__list .attention-row .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
    .dash-attention__list .attention-row:hover { background: var(--color-bg-soft); }
    .dash-attention__list .attention-row--primary .attention-row__chevron { color: var(--color-accent); }
}

/* Очередь на «Обзоре» — одна карточка со строками через волосяную линию,
   как «Что усилить» и «Ключевые шаги»: три отдельные плиты с тенями и
   зазорами занимали почти 220px ради трёх строк, а текст строки в 17px был
   крупнее заголовков разделов. Акцент первой строки несёт её кнопка. */
.dash-attention__list {
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
}
.dash-attention__list .attention-row {
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-top: 1px solid var(--color-border-soft);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    font-size: 0.9375rem;
}
.dash-attention__list .attention-row:first-child { border-top: 0; }
@media (min-width: 600px) {
    .dash-attention__list .attention-row { padding: var(--space-3) var(--space-4); font-size: 0.9375rem; }
}

/* Строка режима под заголовком Обзора — одна тихая строка текста через
   точки: «● Активный поиск · новая работа к 26 ноября · осталось 4 недели ·
   Изменить». Прежде три плашки разной формы и ссылка стояли над полосой
   пилюль «Ждёт вас», и шапка экрана читалась набором кнопок. Акцент — только
   точка режима и число недель (полужирным: его глаз ищет первым). */
.dash-context {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: flex-start;
    gap: 0;
    margin-top: calc(-1 * var(--space-2));
    font-size: 0.875rem;
    color: var(--color-text-soft);
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.dash-context:hover .dash-context__goal { color: var(--color-text); }
.dash-context:hover .dash-context__edit { color: var(--color-accent); }
.dash-context:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.dash-context > .dash-context__edit { display: inline-flex; margin-left: 8px; color: var(--color-text-muted); }
.dash-context > .dash-context__edit::before, .dash-context > .visually-hidden::before { content: none; }
.dash-context > * + *::before {
    content: "\00B7";
    margin: 0 8px;
    color: var(--color-border-strong);
    font-weight: 400;
}
.dash-context__mode { display: inline-flex; align-items: center; color: var(--color-text); font-weight: 600; }
.dash-context__mode > span::before, .dash-context__mode::after { content: none; }
.dash-context__mode { gap: 0; }
.dash-context__mode::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.45rem;
    border-radius: 50%;
    background: var(--color-accent);
}
.dash-context__goal { color: var(--color-text-soft); }
.dash-context__left { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-context__left .icon { display: none; }
/* Телефон: строка режима не помещается в одну, и при переносе точка-разделитель
   открывала вторую строку. Срок и остаток уходят на вторую строку целиком,
   без разделителя перед ней. */
@media (max-width: 599px) {
    .dash-context { row-gap: 2px; }
    .dash-context > .dash-context__goal { flex-basis: auto; }
    .dash-context > .dash-context__mode { flex-basis: 100%; }
    .dash-context > .dash-context__goal::before { content: none; }
}


/* Рост оценки: ось, «было → стало» и чип дельты. Числа — главный смысл
   строки, поэтому крупнее подписи и табличные. */
.dash-do__gain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
}
.dash-do__gain-axis { font-weight: 600; }
.dash-do__gain-nums {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
}
.dash-do__gain-nums .icon { color: var(--color-text-muted); }
.dash-do__gain-before { color: var(--color-text-muted); }
.dash-do__gain-why { color: var(--color-text-soft); }

/* Маршрут «Вашего пути» — станциями на вертикальной линии: точки
   соединены, текущая — кольцом, цель — заливкой. Прежде станции стояли
   столбиком с отдельными точками, и маршрут читался списком, а не дорогой. */
.path-widget__route { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: var(--space-2); }
.path-widget__station { gap: var(--space-3); font-size: 0.875rem; }
.path-widget__station:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 4px;
    top: calc(50% + 6px);
    width: 2px;
    height: calc(100% + var(--space-2) - 12px);
    border-radius: 1px;
    background: var(--color-border-strong, var(--color-border));
}
.path-widget__dot { width: 10px; height: 10px; }
.path-widget__station.is-current .path-widget__dot {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 2px var(--color-text-muted);
}
.path-widget__station.is-target .path-widget__dot {
    box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.18);
}

/* Стопка подборки на телефоне: плюсы и минусы разбора открывает «Подробный
   разбор», а в стопке они делали одну вакансию высотой в первый экран и
   уводили очередь дел на второй. */
@media (max-width: 599px) {
    .pick-stack .pick-card__points { display: none; }
    /* Без доводов блок «почему» пуст, но его зазор оставался: под осями
       висела пустота в 40px, и «Подробный разбор» отрывался от карточки. */
    .pick-stack .pick-card__why:not(:has(> :not(.pick-card__points))) { display: none; }
    /* Ссылка в разбор — у левого края, по линии текста карточки: одна
       справа она читалась забытой. */
    .pick-stack .pick-card__foot--cta-only { justify-content: flex-start; }
    .pick-stack .pick-card__foot--cta-only .pick-card__cta { margin-left: 0; }
}
@media (min-width: 600px) {
    .attention-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
    .attention-row .btn { grid-column: 3; justify-self: end; }
}

/* --- Переключатель вида (tabnav): тот же сегментированный контрол, что вкладки --- */
.tabnav {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-md);
    background: rgba(118, 118, 128, 0.10);
}
.tabnav .btn { min-height: 34px; border-radius: 9px; box-shadow: none; border-color: transparent; background: transparent; color: var(--color-text-soft); }
.tabnav .btn--secondary {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(16, 18, 26, 0.08), 0 2px 8px -2px rgba(16, 18, 26, 0.10);
}
/* Пустой статус — не выключенная кнопка, а тихий: читается, но не зовёт */
.ui-chip[aria-disabled="true"] { opacity: 1; color: var(--color-text-muted); background: transparent; border-color: var(--color-border-soft); }

/* --- Фирменный прибор: кольца совпадения и готовности — лента знака ---
   Дуга идёт от бирюзы через голубой к фиолетовому, как траектории «Match
   Point»; рисуется CSS (conic + маска-кольцо), а не SVG-градиентом по id:
   градиент из скрытого первым экземпляра (drawer на десктопе) гас у всех.
   Слабые значения (<75) сохраняют смысловой тон — низкий результат не
   должен выглядеть победой. */
/* Доля дуги, которая уже нарисована (0..1). Зарегистрирована, чтобы сцены
   могли заполнять кольцо анимацией: незарегистрированное свойство меняется
   скачком. Статично — всегда 1, кольцо показывает --score целиком. */
@property --ring-progress {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}
.score-ring--good, .score-ring--strong, .score-ring--accent, .score-ring--neutral { --ring-brand: 1; }
.score-ring { isolation: isolate; }
.score-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    --ring-w: calc(var(--diameter) * var(--stroke) / 100);
    background: conic-gradient(var(--ring-accent, var(--color-accent)) calc(var(--score) * var(--ring-progress, 1) * 1%), rgba(118, 118, 128, 0.14) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w) + 1px));
            mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w) + 1px));
}
.score-ring--good::before, .score-ring--strong::before, .score-ring--accent::before, .score-ring--neutral::before {
    background: conic-gradient(#14B8A6 0, #5FB8E8 calc(var(--score) * var(--ring-progress, 1) * 0.5%), #7C5CFF calc(var(--score) * var(--ring-progress, 1) * 1%), rgba(118, 118, 128, 0.14) 0);
}
.score-ring__svg { display: none; }
.score-ring__value { font-family: var(--font-sans); letter-spacing: -0.035em; }

.job-card__ring {
    --ring-size: 52px;
    background:
        radial-gradient(closest-side, var(--color-surface) calc(100% - var(--ring-w) - 0.5px), transparent calc(100% - var(--ring-w))),
        conic-gradient(rgba(118, 118, 128, 0.35) calc(var(--pct) * 1%), rgba(118, 118, 128, 0.12) 0);
}
.job-card__ring--accent {
    background:
        radial-gradient(closest-side, var(--color-surface) calc(100% - var(--ring-w) - 0.5px), transparent calc(100% - var(--ring-w))),
        conic-gradient(#14B8A6 0, #5FB8E8 calc(var(--pct) * 0.5%), #7C5CFF calc(var(--pct) * 1%), rgba(118, 118, 128, 0.12) 0);
}
.job-card:hover .job-card__ring--accent { filter: none; }

/* --- Карточка профессии: готовность — герой, остальное — тихие строки --- */
.profession-card { padding: var(--space-5); gap: var(--space-4); }
.profession-card__name { font-size: 1.25rem; letter-spacing: -0.02em; }
.profession-card__facts { display: flex; flex-direction: column; gap: 0.35rem; border: 0; margin: 0; }
.profession-card__fact { border: 0 !important; padding: 0 !important; display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.9375rem; }
.profession-card__fact dt { color: var(--color-text-muted); font-size: 0.9375rem; min-width: 0; }
.profession-card__fact:nth-child(3) { order: -1; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: var(--space-2); }
.profession-card__fact:nth-child(3) dt { font-size: 0.8125rem; }
.profession-card__fact:nth-child(3) b {
    font-size: 2.75rem; line-height: 1; font-weight: 600; letter-spacing: -0.045em;
    background: linear-gradient(90deg, #0E9C8E, #1570C4 60%, #6D4CFF);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.profession-card__fact:nth-child(3) .profession-card__fact-of { font-size: 1rem; color: var(--color-text-muted); }
.profession-card__foot { border-top: 0; padding-top: 0; }
.profession-card.is-active { box-shadow: 0 0 0 1.5px rgba(21, 112, 196, 0.5), var(--shadow-md); }

/* --- Карточка вакансии: лёгкая, сканируемая --- */
.job-card__rail { display: none; }
.job-card__title { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.job-card__eyebrow { font-size: 0.8125rem; color: var(--color-text-muted); }
.job-card__salary { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; border: 0; padding: 0; }
/* «в вакансии» — приписка без подложки: подложка без отступов и радиуса
   рисовалась квадратным пятном, а различие «указана / оценка» держит плашка
   только у оценки. */
.job-card__salary-source { font-weight: 500; font-size: 0.75rem; color: var(--color-text-muted); background: none; border: 0; }
.job-card__salary-source--est { color: var(--color-text-muted); background: rgba(118, 118, 128, 0.10); }
/* «в месяц, пересчитано из годовой» — та же тихая приписка, что «в вакансии». */
.job-card__salary-note { font-weight: 500; font-size: 0.75rem; color: var(--color-text-muted); }
/* Перцентиль — справкой под суммой, не вторым числом рядом с ней. */
.job-card__pct { margin: 2px 0 0; font-size: 0.8125rem; color: var(--color-text-soft); }
/* «+2 места» — продолжение строки мест, без точки-разделителя перед собой.
   Расстояние до города даёт gap строки: свой отступ сдвигал приписку, когда
   она переносилась на новую строку. */
.job-card__eyebrow-more { color: var(--color-text-soft); white-space: nowrap; }
/* Требования к личным признакам — предупреждение, а не тревога: тон
   warning на тексте, без плашки (карточка и так плотная). */
.job-card__flags {
    display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0;
    font-size: 0.8125rem; color: var(--color-warning-strong);
}
.job-card__flags .icon { flex: none; }
.job-card__foot { border-top: 0; padding-top: 0; flex-wrap: nowrap; align-items: center; margin-top: auto; }
.job-card__foot .job-card__cta { margin-left: auto; }

/* --- Рыночный рейл: «у вас нет» — не ошибка, а тихая шкала; «есть» — цвет бренда --- */
.role-demand__seg { background: rgba(118, 118, 128, 0.45); }
.role-demand__row--have .role-demand__seg { background: linear-gradient(90deg, #14B8A6, #1570C4); }
/* штрих «малая выборка» сохранён: он различает строки и без цвета */
.role-demand__bar--weak .role-demand__seg { background: repeating-linear-gradient(135deg, rgba(118, 118, 128, 0.45) 0 4px, transparent 4px 8px); }
.role-demand__row--have .role-demand__bar--weak .role-demand__seg { background: repeating-linear-gradient(135deg, rgba(21, 112, 196, 0.6) 0 4px, transparent 4px 8px); }
.role-demand__row--have .role-demand__check, .role-demand__row--have .icon { color: #1570C4; }

/* --- Свёрнутый разбор вердикта профессии --- */
.target-fit__details { margin-top: var(--space-4); border-top: 1px solid var(--color-border-soft); }
.target-fit__summary {
    display: flex; align-items: center; gap: var(--space-2);
    list-style: none; cursor: pointer; min-height: var(--tap-min);
    padding: var(--space-3) 0; font-weight: 500; color: var(--color-text);
}
.target-fit__summary::-webkit-details-marker { display: none; }
.target-fit__summary-counts { color: var(--color-text-muted); font-variant-numeric: tabular-nums; font-weight: 400; }
.target-fit__summary-icon { margin-left: auto; color: var(--color-text-muted); transition: transform var(--dur-base) var(--ease-out); }
.target-fit__details[open] .target-fit__summary-icon { transform: rotate(180deg); }
.target-fit__summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 6px; }
.target-fit .verdict-hint { max-width: 62ch; font-size: 1rem; line-height: 1.55; color: var(--color-text-soft); }
@media (prefers-reduced-motion: reduce) { .target-fit__summary-icon { transition: none; } }

/* Число внутри кнопки (ui_button count): сколько работы ждёт за действием.
   Тон — тот же янтарный, что точка вкладки (ui_tab_badge): в продукте он
   значит «ждёт вашего ответа». Квота так не рисуется никогда — только
   текстом ui_quota_meter. */
.btn__count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 2px;
    border-radius: var(--radius-pill);
    background: rgba(var(--color-amber-rgb), 0.16);
    color: color-mix(in srgb, rgb(var(--color-amber-rgb)) 72%, var(--color-text));
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}
/* «Улучшить» с вопросами: рамка того же тона — кнопка заметна среди
   соседних серых, но не спорит с залитой главной кнопкой экрана. */
.page-head__improve--ask { border-color: rgba(var(--color-amber-rgb), 0.45); }
.page-head__improve--ask:hover { border-color: rgba(var(--color-amber-rgb), 0.7); }

/* --- Плашка совпадения с ролью (ui_match_plate) --- */
.match-plate {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 15rem;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    color: #EEF0FF;
    background:
        radial-gradient(320px 240px at 82% 6%, rgba(124, 92, 255, 0.34), transparent 70%),
        radial-gradient(260px 200px at 0% 100%, rgba(45, 212, 191, 0.12), transparent 70%),
        var(--brand-tile);
    box-shadow: var(--shadow-md);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.match-plate:hover, .match-plate:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.match-plate:focus-visible { outline: 2px solid #5FB8E8; outline-offset: 3px; }
.match-plate__mark { position: absolute; right: -1.5rem; top: -1.25rem; width: 11rem; height: auto; pointer-events: none; }
.match-plate__score { position: relative; font-size: 4rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.match-plate__pct { font-size: 0.45em; margin-left: 0.1em; color: #A7ACC8; letter-spacing: 0; }
.match-plate__caption { position: relative; margin-top: var(--space-2); font-size: 0.9375rem; color: #A7ACC8; max-width: 16rem; }
.match-plate__note { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-size: var(--font-size-xs); color: #FFD18A; }
@media (prefers-reduced-motion: reduce) { .match-plate { transition: none; } .match-plate:hover { transform: none; } }
/* Цель выбранной дороги на плашке: полосы и подписи — тем же тёмным
   материалом, что цель в «Должностях до цели». */
.match-plate {
    --hero-text: #EEF0FF;
    --hero-soft: #A7ACC8;
    --progress-track: rgba(255, 255, 255, 0.14);
}
.match-plate .stat-bar__label { color: var(--hero-soft); }
.match-plate .stat-bar__value { color: var(--hero-text); }
.match-plate .duration { color: var(--hero-soft); }
/* «Сегодня → цель»: под чертой — цель выбранной дороги. */
.match-plate__journey {
    position: relative;
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-right: var(--space-6);
}
.match-plate__journey-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--space-3); font-size: var(--font-size-sm); color: var(--hero-soft); }
.match-plate__journey-label strong { color: var(--hero-text); font-weight: 600; }

/* --- Плиты всегда белые: --color-bg-soft темнее фона и делал карточку утопленной --- */
.surface-card--default { background: var(--color-surface); }
.state-card .state-card, .surface-card .state-card { box-shadow: none; background: var(--color-bg); }

/* --- Шкалы (.meter): высокое — лента знака, среднее — голубой, низкое — тихий серый.
   Красный и янтарь на каждой полосе читались как ошибки человека, а это
   расстояние до роли. Предупреждения остаются у статусов и бейджей. --- */
.meter--strong, .meter--good { --meter-fill: linear-gradient(90deg, #14B8A6, #1570C4 60%, #6D4CFF); }
.meter--warning { --meter-fill: #5FB8E8; }
.meter--danger  { --meter-fill: rgba(118, 118, 128, 0.45); }
/* базовая плита (.surface-card) и карточка-родитель (.card, .value-card, .pricing-card) — белые */
.surface-card, .card, .value-card, .pricing-card { background: var(--color-surface); }
.letter-sheet .empty-state { background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: none; }

/* --- Пустое письмо: чистый лист, а не серая коробка --- */
.letter-sheet:has(> .empty-state) { min-height: 26rem; display: grid; place-items: center; background: var(--color-surface); width: 100%; }
.letter-workspace__doc:has(.letter-sheet > .empty-state) { flex: 1 1 auto; min-width: 0; }
.letter-sheet > .empty-state { background: none; box-shadow: none; border: 0; max-width: 26rem; }
.letter-sheet > .empty-state .empty-state__icon,
.letter-sheet > .empty-state [class*="icon-plate"] { background: linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(109, 76, 255, 0.12)); color: var(--color-accent); }
.letter-sheet > .empty-state .empty-state__title { font-size: 1.375rem; letter-spacing: -0.02em; color: var(--color-text); }

/* --- Отклик: решение — главное, «отказ» и «без ответа» — тихие --- */
.status-actions__row .btn--secondary { background: transparent; box-shadow: none; color: var(--color-text-soft); }
.status-actions__row .btn--secondary:hover, .status-actions__row .btn--secondary:focus-visible { background: rgba(118, 118, 128, 0.10); color: var(--color-text); box-shadow: none; }

/* --- Воронка отклика — станции пути: пройденное лентой, текущее залито --- */
.step-progress__item--done .step-progress__bullet { border-color: transparent; background: var(--color-sage); color: #fff; }
.step-progress__item--active .step-progress__bullet { border-color: transparent; background: var(--color-accent); color: #fff; box-shadow: 0 0 0 6px rgba(var(--color-accent-rgb), 0.16); }
@media (min-width: 768px) {
    .step-progress__item--done:not(:last-child)::after { background: var(--color-sage); }
}

/* тёмная тема: сайдбар темнее холста, иначе колонка сливается с фоном */
:root[data-theme="dark"] .app-sidebar { background: radial-gradient(420px 260px at 0% 0%, rgba(124, 92, 255, 0.20), transparent 70%), #05060D; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .app-sidebar { background: radial-gradient(420px 260px at 0% 0%, rgba(124, 92, 255, 0.20), transparent 70%), #05060D; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06); }
}

/* =====================================================================
   Редактор резюме — «инспектор + лист» (редизайн, октябрь 2026).
   Слева инспектор: одна белая плита, разделы — сгруппированный список
   (как настройки Apple), без серых коробок в коробке. Справа лист на
   холсте страницы, во всю высоту окна, без рамки колонки.
   ===================================================================== */
.resume-editor__toolbar { background: transparent; border-bottom: 0; padding-inline: 0; }
.resume-editor__grid { gap: var(--space-5); }
@media (min-width: 1024px) {
    .resume-editor__grid { align-items: flex-start; }
    .resume-editor__form-col {
        flex: 0 0 26rem;
        max-width: 26rem;
        position: sticky;
        top: var(--space-4);
        max-height: calc(100dvh - 2 * var(--space-4));
        overflow-y: auto;
        padding: var(--space-2);
        background: var(--color-surface);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        scrollbar-width: thin;
    }
    .resume-editor__preview-col { border-left: 0; background: transparent; padding: 0; }
    .resume-editor__preview-doc { height: auto; min-height: calc(100dvh - 12rem); overflow: visible; padding: 0 0 var(--space-6); }
}
@media (max-width: 1023px) {
    .resume-editor__form-col { padding: 0; }
    .resume-editor__preview-col { background: transparent; border-top: 0; padding: 0; }
}
.resume-editor__sections, .resume-editor__form { gap: 0; }
.editor-section {
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: none;
}
.editor-section + .editor-section { border-top: 1px solid var(--color-border-soft); border-radius: 0; }
.editor-section:focus-within { border-color: var(--color-border-soft); box-shadow: none; background: rgba(var(--color-accent-rgb), 0.03); }
.editor-section__summary { min-height: 48px; padding: var(--space-3) var(--space-3); }
.editor-section__title { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.editor-section__body { padding: 0 var(--space-3) var(--space-4); gap: var(--space-3); }
.resume-skills-editor { background: transparent; border: 0; border-top: 1px solid var(--color-border-soft); border-radius: 0; padding: var(--space-3); }
.resume-skills-editor__title { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
/* строки двух полей — по верху: подписи и поля на одной линии */
@media (min-width: 480px) { .editor-section[data-editor-section="basics"] .editor-section__body { align-items: start; } }
/* мобайл: инспектор — та же белая плита; режимы — сегментированный контрол */
@media (max-width: 1023px) {
    .resume-editor__form-col { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-2); }
    .resume-editor__viewtoggle { background: transparent; border-bottom: 0; padding: var(--space-2) 0; }
    .resume-editor__viewtoggle { gap: 2px; }
    .resume-editor__viewtoggle > * { border: 0; border-radius: 9px; min-height: 40px; }
    .resume-editor__viewtab { border: 0; background: transparent; color: var(--color-text-soft); font-size: 0.875rem; padding-inline: 0.25rem; }
    .resume-editor__viewtab.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgba(16, 18, 26, 0.08), 0 2px 8px -2px rgba(16, 18, 26, 0.10); }
}
.resume-editor__viewtoggle { --seg-bg: rgba(118, 118, 128, 0.10); }
@media (max-width: 1023px) {
    .resume-editor__viewtoggle { background: var(--seg-bg); border-radius: var(--radius-md); padding: 3px; position: static; }
}

/* =====================================================================
   Онбординг — «Траектории» (октябрь 2026): слева тёмная панель знака,
   шаги станциями на линии пути; справа вопрос на белой плите.
   ===================================================================== */
.ob-path { display: none; }
@media (min-width: 1024px) {
    .body--onboarding-path { display: grid; grid-template-columns: minmax(20rem, 34%) 1fr; min-height: 100dvh; }
    .body--onboarding-path::before { display: none; }
    .ob-path {
        display: flex; flex-direction: column; gap: var(--space-6);
        position: sticky; top: 0; height: 100dvh;
        padding: var(--space-8) clamp(var(--space-6), 4vw, var(--space-8));
        color: #EEF0FF;
        background:
            radial-gradient(520px 420px at 80% 10%, rgba(124, 92, 255, 0.28), transparent 70%),
            radial-gradient(420px 360px at 0% 100%, rgba(45, 212, 191, 0.12), transparent 70%),
            var(--brand-tile);
        overflow: hidden;
    }
    .ob-path__brand { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.375rem; font-weight: var(--brand-wordmark-weight); letter-spacing: var(--brand-wordmark-tracking); }
    .ob-path__lead { margin: 0; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; color: #EEF0FF; max-width: 22ch; }
    .ob-path__list { list-style: none; margin: 0; padding: 0 0 0 2.25rem; position: relative; display: flex; flex-direction: column; gap: 1.6rem; }
    .ob-path__list::before { content: ""; position: absolute; left: 0.6rem; top: 0.55rem; bottom: 0.55rem; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #14B8A6, #5FB8E8 50%, #7C5CFF); opacity: 0.85; }
    .ob-path__station { position: relative; font-size: 1.0625rem; color: #8F95B8; }
    .ob-path__dot { position: absolute; left: calc(-2.25rem + 0.6rem - 6px); top: 0.25rem; width: 15px; height: 15px; border-radius: 50%; background: var(--brand-tile); border: 3px solid #5FB8E8; }
    .ob-path__station--done { color: #C9CDEA; }
    .ob-path__station--done .ob-path__dot { background: #14B8A6; border-color: #14B8A6; }
    .ob-path__station--current { color: #fff; font-weight: 600; }
    .ob-path__station--current .ob-path__dot { background: #5FB8E8; box-shadow: 0 0 0 6px rgba(95, 184, 232, 0.22), 0 0 18px rgba(95, 184, 232, 0.7); }
    .body--onboarding-path .onboarding-shell { width: 100%; max-width: 40rem; padding-top: var(--space-6); align-self: center; margin-block: var(--space-6); }
    .body--onboarding-path .onboarding-topbar__brand { visibility: hidden; }
    .body--onboarding-path .onboarding-main {
        --sticky-bg: var(--color-surface); background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
        padding: clamp(var(--space-5), 3vw, var(--space-8));
    }
}
@media (min-width: 1024px) {
    /* шаги уже несут станции слева — полоса над плитой их дублировала */
    .body--onboarding-path .onboarding-progress__bar { display: none; }
}

/* =====================================================================
   Лендинг — «Траектории × Apple» (октябрь 2026).
   Первый экран и финальный призыв — тёмная сцена знака во всю ширину:
   там продукт говорит образом бренда (две траектории сходятся в точке).
   Между ними — светлые секции Apple: фон #F5F5F7, белые плиты без рамок.
   ===================================================================== */
.body--landing { --stage-text: #EEF0FF; --stage-soft: #A7ACC8; --stage-mute: #7A80A3; }

/* шапка сливается с тёмным первым экраном */
.body--landing .site-header {
    background: var(--brand-tile);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.body--landing .site-header .site-header__logo,
.body--landing .site-header .site-header__logo-text { color: var(--stage-text); }
.body--landing .site-header .brand-mark { background: none; box-shadow: none; }
.body--landing .site-header .nav-list__item a:not(.btn) { color: var(--stage-soft); }
.body--landing .site-header .nav-list__item a:not(.btn):hover,
.body--landing .site-header .nav-list__item a:not(.btn):focus-visible { color: var(--stage-text); background: rgba(255, 255, 255, 0.06); }
.body--landing .site-header .nav-toggle-button { color: var(--stage-text); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); }

/* первый экран — тёмная сцена во всю ширину */
.body--landing .hero-editorial {
    color: var(--stage-text);
    background:
        radial-gradient(900px 620px at 78% 20%, rgba(124, 92, 255, 0.30), transparent 65%),
        radial-gradient(700px 520px at 8% 110%, rgba(45, 212, 191, 0.14), transparent 65%),
        var(--brand-tile);
    /* во всю ширину окна, а не контейнера: иначе края сцены видны */
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    padding-block: clamp(2.5rem, 7vw, 6.5rem) clamp(3rem, 8vw, 7rem);
    overflow: hidden;
}
.body--landing .hero-editorial::before, .body--landing .hero-editorial::after { display: none; }
.body--landing .hero-editorial__byline { color: var(--stage-mute); }
.body--landing .byline-rule { display: none; }
.body--landing .hero-editorial__title { color: var(--stage-text); font-weight: 600; letter-spacing: -0.045em; }
.body--landing .hero-editorial__title em {
    background: linear-gradient(90deg, #5EEAD4, #7CC8F2 45%, #B4A3FF);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.body--landing .hero-editorial__lede { color: var(--stage-soft); }
.body--landing .hero-editorial__cta-note { color: var(--stage-mute); }
.body--landing .hero-editorial__cta .btn--secondary { background: rgba(255, 255, 255, 0.06); color: var(--stage-text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.body--landing .hero-editorial__cta .btn--secondary:hover { background: rgba(255, 255, 255, 0.10); }
.body--landing .hero-editorial__capabilities li { color: var(--stage-soft); }
.body--landing .hero-editorial__cta .btn--primary { background: linear-gradient(180deg, #6CC3EF, #3C9DD6); color: #061420; box-shadow: 0 0 0 1px rgba(95, 184, 232, 0.5), 0 10px 32px -10px rgba(95, 184, 232, 0.7); }

/* сцена знака за демо-карточкой */
.hero-editorial__art { display: none; }
@media (min-width: 1024px) {
    .body--landing .hero-editorial__grid { position: relative; }
    .hero-editorial__art {
        display: block; position: absolute; z-index: 0; pointer-events: none;
        right: -4%; top: 50%; width: min(42vw, 620px); height: auto; transform: translateY(-50%);
        opacity: 0.95;
    }
    .body--landing .hero-lenses { position: relative; z-index: 1; }
}
/* демо-карточка — стеклянная плита на сцене; текст внутри — тёмный */
.body--landing .hero-lenses {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px) saturate(140%);
    border: 0;
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.body--landing .hero-lens { background: transparent; border: 0; box-shadow: none; }
.body--landing .hero-lens + .hero-lens { border-top: 1px solid var(--color-border-soft); border-radius: 0; }

/* светлые секции: без полос-подложек, плиты белые без рамок */
.body--landing .page-section--banded { background: transparent; box-shadow: none; border: 0; }
.body--landing .feature-card, .body--landing .stage-card, .body--landing .pricing-card,
.body--landing .stat-strip {
    background: var(--color-surface); border-color: transparent; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg);
}
.body--landing .feature-card:hover, .body--landing .stage-card:hover { box-shadow: var(--shadow-md); }

/* финальный призыв — та же сцена знака */
:root .body--landing .cta-editorial, :root[data-theme] .body--landing .cta-editorial {
    background:
        radial-gradient(700px 420px at 85% 50%, rgba(124, 92, 255, 0.32), transparent 65%),
        radial-gradient(600px 380px at 10% 50%, rgba(45, 212, 191, 0.14), transparent 65%),
        var(--brand-tile);
    border-block: 0; box-shadow: none;
    color: var(--stage-text);
}
:root .body--landing .cta-editorial::before, :root .body--landing .cta-editorial::after { display: none; }
.body--landing .cta-editorial__title { color: var(--stage-text); letter-spacing: -0.035em; }
.body--landing .cta-editorial__title em { background: linear-gradient(90deg, #5EEAD4, #7CC8F2 45%, #B4A3FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.body--landing .cta-editorial__lede, .body--landing .cta-editorial__note { color: var(--stage-soft); }
.body--landing .cta-editorial .btn--primary { background: linear-gradient(180deg, #6CC3EF, #3C9DD6); color: #061420; }

.body--landing .hero-lenses * { color: inherit; }
.body--landing .hero-lens__meta, .body--landing .hero-lenses__eyebrow, .body--landing .hero-lenses__caption { color: var(--color-text-muted); }
.body--landing .site-header .btn--primary { background: linear-gradient(180deg, #6CC3EF, #3C9DD6); color: #061420; border-color: transparent; box-shadow: 0 0 0 1px rgba(95, 184, 232, 0.4); }

/* =====================================================================
   Хвосты старой системы на второстепенных экранах (финальный проход).
   ===================================================================== */
/* вкладки страницы вакансии — тот же сегментированный контрол */
.job-tabs__strip { display: inline-flex; gap: 2px; padding: 3px; border: 0; border-radius: var(--radius-md); background: rgba(118, 118, 128, 0.10); }
.job-tabs__tab { min-height: 36px; border: 0; margin: 0; border-radius: 9px; padding: 0 var(--space-4); font-size: 0.9375rem; color: var(--color-text-soft); }
.job-tabs__radio:nth-of-type(1):checked ~ .job-tabs__strip label:nth-child(1),
.job-tabs__radio:nth-of-type(2):checked ~ .job-tabs__strip label:nth-child(2),
.job-tabs__radio:nth-of-type(3):checked ~ .job-tabs__strip label:nth-child(3) {
    border: 0; background: var(--color-surface); color: var(--color-text);
    box-shadow: 0 1px 2px rgba(16, 18, 26, 0.08), 0 2px 8px -2px rgba(16, 18, 26, 0.10);
}
/* шапка вакансии — белая плита, а не серая подложка */
.job-detail__hero { background: var(--color-surface); border-color: transparent; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }
/* счётчики во вкладках — нейтральные, без жёлтого */
.profile-subnav__badge { background: rgba(118, 118, 128, 0.14); color: var(--color-text-soft); border: 0; }
/* «оценка ИИ» у зарплаты — пометка источника, а не предупреждение */
.job-comp__amount .badge, .job-card__salary .badge, .job-card__salary-source--est {
    background: rgba(118, 118, 128, 0.12); color: var(--color-text-soft); border-color: transparent;
}
.job-comp__amount .badge::before { display: none; }
/* «оценка ИИ» — исключение из серой подписи источника: тон предупреждения
   и есть сообщение (05.11). */
.job-comp__amount .badge--warning { background: var(--color-warning-soft); color: var(--color-warning-strong); }
/* Условия вместо месячной суммы (смена, проект, «около»): та же строка
   суммы, что у вилки. */
.job-comp__amount--terms { align-items: baseline; }
.job-comp__amount--terms .salary-terms { margin: 0; font-size: inherit; font-weight: inherit; }
.job-comp__amount--terms .salary-terms__note { flex-basis: 100%; font-weight: 400; }
/* страница соответствия — на всю ширину оболочки, как шапка и вкладки */
.cov-page { max-width: none; }

/* мастера на оболочке онбординга (обновление, очередь вопросов, новая
   профессия) — тот же вопрос на белой плите, что и в онбординге */
@media (min-width: 768px) {
    .body--onboarding:not(.body--onboarding-path) .onboarding-shell { padding-top: var(--space-6); }
    .body--onboarding:not(.body--onboarding-path) .onboarding-main {
        --sticky-bg: var(--color-surface); background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
        padding: clamp(var(--space-5), 3vw, var(--space-8));
    }
}
/* открытая правка записи — плита уже белая; серая подложка и синяя полоса
   слева были вторым слоем рамки. Зону правки задаёт сама плита. */
.career-education__edit[open] .career-education__edit-form,
.career-timeline__edit[open] .career-timeline__edit-form,
.career-entry-add[open] .career-education__edit-form {
    background: transparent; border-left: 0; box-shadow: none; padding: var(--space-2) 0 0;
}

/* --- Нижний лист (мобайл): форма iOS — радиус 20, «ручка», без рамки;
   кнопка-триггер под открытым листом не просвечивает --- */
@media (max-width: 767.98px) {
    .dropdown__panel { border: 0; border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); padding-top: var(--space-5); }
    .dropdown__panel::before {
        content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px;
        border-radius: 3px; background: rgba(118, 118, 128, 0.35);
    }
    .dropdown:has(> .dropdown__panel:not([hidden])) > [data-dropdown-toggle] { visibility: hidden; }
    .dropdown__backdrop { background: rgba(8, 10, 20, 0.45); backdrop-filter: blur(2px); }
}
/* лист уровня навыка в кабинете — над нижней навигацией (как .dropdown__panel):
   уровни наложения разные, и лист уезжал под панель целиком */
@media (max-width: 900px) {
    .app-shell .skill-chip__menu { bottom: calc(env(safe-area-inset-bottom, 0px) + 3.5rem + var(--space-3)); border-radius: var(--radius-xl); }
}
@media (min-width: 992px) and (max-width: 900px) { .app-shell .skill-chip__menu { bottom: var(--space-3); } }
@media (max-width: 900px) {
    /* затемнение за листом — как у .dropdown__panel: без него лист читался
       карточкой, забытой поверх списка */
    .skill-chip__disc[open] > .skill-chip__menu { box-shadow: 0 0 0 100vmax rgba(8, 10, 20, 0.35), var(--shadow-lg); }
}
/* сегментный ряд не шире своего места: inline-flex растягивал его за край
   экрана, ряд переставал прокручиваться, а активная вкладка обрезалась */
.profile-subnav__list { max-width: 100%; box-sizing: border-box; }
/* «Журнал» справа (ui_journal_link, 05.11): та же серая таблетка, что у
   журнала карты в правом краю её полосы разделов, — на шапке должности и
   письма. На телефоне — одним значком, подпись для скринридера (как у
   таблетки карты). */
.journal-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: calc(0.45rem + 3px) calc(0.9rem + 3px);
    border-radius: var(--radius-md);
    background: rgba(118, 118, 128, 0.10);
    color: var(--color-text-soft);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease, background-color 0.18s ease;
}
.journal-link:hover { color: var(--color-text); background: rgba(118, 118, 128, 0.16); }
.journal-link--active { color: var(--color-text); background: rgba(118, 118, 128, 0.22); box-shadow: inset 0 0 0 1px var(--color-border); }
/* Вкладки страниц раздела под заголовком шапки (ui_section_header tabs,
   06.11). */
.page-head > .page-head__tab-strip { margin-top: var(--space-4); }
/* На телефоне действия шапки уходят под лид (order), а вкладки без своего
   order поднимались над заголовком. Шапка с вкладками — сеткой: заголовок,
   лид, затем в одну строку вкладки и журнал справа. */
@media (max-width: 639px) {
    .page-head:has(> .page-head__tab-strip) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-2);
        align-items: center;
    }
    .page-head:has(> .page-head__tab-strip) > .section-display { grid-column: 1 / -1; grid-row: 1; }
    .page-head:has(> .page-head__tab-strip) > .page-head__intro { grid-column: 1 / -1; grid-row: 2; }
    .page-head:has(> .page-head__tab-strip) > .page-head__tab-strip { grid-column: 1; grid-row: 3; }
    .page-head:has(> .page-head__tab-strip) > .page-head__row { grid-column: 2; grid-row: 3; margin: var(--space-4) 0 0; }
    .page-head:has(> .page-head__tab-strip) > .page-head__row .page-head__actions { width: auto; }
}
/* Короткая подпись вкладки (prop short) — до 640px; вкладка wideOnly — с
   992px: на телефоне её уже несут вкладки раздела над полосой. */
.tab-strip__label-short { display: none; }
@media (max-width: 639px) {
    .tab-strip__link:has(.tab-strip__label-short) .tab-strip__label-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .tab-strip__label-short { display: inline; }
}
@media (max-width: 991px) {
    .tab-strip__item--wide { display: none; }
}
.journal-link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 3px; }
/* «Журнал» и меню «⋯» в шапке — одной строкой: колонка действий компактной
   шапки узкая, и с переносом меню уезжало под кнопку. */
.page-head__actions:has(> .journal-link) { flex-wrap: nowrap; }

@media (max-width: 639px) {
    .journal-link { justify-content: center; min-width: 44px; padding-inline: 0.6rem; }
    .journal-link > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
[data-scroll-active].is-more-end { mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
[data-scroll-active].is-more-start { mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); }
[data-scroll-active].is-more-start.is-more-end { mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
/* касание на телефоне оставляло «наведение» на пункте уровня, и он читался
   выбранным — подсветка наведения только там, где есть указатель */
@media (hover: none) { .skill-chip__level:hover { background: transparent; } }

/* --- Плашки и баннеры: белая плита, цвет — только в кружке значка ---
   Прежние плашки несли смысл тремя слоями сразу: тонированный фон, цветная
   рамка и полоса слева. На светлом холсте нового языка это читалось кремовыми
   заплатками другой системы. Теперь плашка — та же белая плита, что и всё
   остальное (тонкое кольцо держит её и внутри белой карточки), а тон сообщения
   несёт один элемент — круг значка. */
.alert,
.stale-notice {
    background: var(--color-surface);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}
.alert { padding: var(--space-4); gap: var(--space-3); }
.alert--compact { padding: var(--space-3) var(--space-4); }
.alert::before { content: none; }
.alert__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin-top: -3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--alert-accent, var(--color-accent)) 13%, transparent);
}
.alert--info { --alert-accent: var(--color-accent); }
/* Ошибка остаётся заметной на периферии зрения: едва тёплое кольцо, не заливка. */
.alert--danger { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 28%, transparent), var(--shadow-sm); }
.stale-notice__icon { width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--color-warning) 13%, transparent); }

/* Вход с нового устройства — плавающая карточка у нижнего края, ВНЕ потока:
   полоса через весь экран (а затем плита над шапкой) сдвигала всю страницу
   вниз, и человек, пришедший на лендинг или в форму, первым видел не её, а
   служебное сообщение. Карточка не двигает вёрстку и не закрывает шапку;
   место — нижний правый угол (как у системных уведомлений), на телефоне —
   снизу во всю ширину. */
.security-banner {
    position: fixed; z-index: 310;
    left: var(--space-3); right: var(--space-3);
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-3));
    background: transparent; border: 0; padding: 0;
}
@media (min-width: 768px) {
    .security-banner { left: auto; right: var(--space-5); bottom: var(--space-5); width: 24rem; }
}
.security-banner__inner {
    max-width: none; margin: 0;
    display: grid; grid-template-columns: auto 1fr auto; align-items: start;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-lg);
}
.security-banner__icon {
    --plate-rgb: var(--color-accent-rgb);
    width: 32px; height: 32px; border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 13%, transparent);
    color: var(--color-accent); box-shadow: none;
}
.security-banner__copy { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 4px; }
.security-banner__title { font-weight: 600; }
.security-banner__close { grid-column: 3; grid-row: 1; margin: -4px -4px 0 0; }
.security-banner__cta {
    grid-column: 2 / 4; justify-self: start;
    border: 0; min-height: 36px; padding: 0 var(--space-4);
    background: var(--color-text); color: var(--color-surface);
}
.security-banner__cta:hover { background: var(--color-text); border-color: transparent; opacity: 0.88; }
.security-banner__close:hover { background: var(--color-bg-soft); }
/* Предпросмотр глазами пользователя (только админ): тёмная полоса бренда —
   режим чужой сессии обязан быть виден с любого экрана, тихой плашкой его
   легко забыть включённым. */
.preview-banner { background: var(--brand-tile); color: #fff; font-size: 0.875rem; }
.preview-banner__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); }
.preview-banner__label { font-weight: 600; }
.preview-banner__target { font-family: var(--font-mono); opacity: 0.75; }
.preview-banner__expires { opacity: 0.75; font-variant-numeric: tabular-nums; }
.preview-banner__form { margin-left: auto; }
.preview-banner__button { min-height: 36px; padding: 0 var(--space-4); border: 0; border-radius: 999px; background: #fff; color: #0A0A17; font: inherit; font-weight: 600; cursor: pointer; }
.preview-banner__button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Открытая выпадашка поднимается над соседями: обёртки меню на карточках
   держат свой z-index (5), и у следующей по документу карточки «⋯» рисовался
   поверх открытого листа предыдущей. */
.dropdown:has(> .dropdown__panel:not([hidden])) { z-index: 70; }
/* Служебное сообщение площадки (техработы, noscript): плита по центру над
   рамкой, как баннер входа. Прежде оно было тостом .flash в потоке — тёмной
   пилюлей, прилипшей к левому краю над шапкой. */
.site-notice {
    display: flex; align-items: center; gap: var(--space-2);
    width: fit-content; max-width: min(56rem, calc(100% - 2 * var(--space-3)));
    margin: var(--space-3) auto;
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
    background: var(--color-surface); color: var(--color-text);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
    font-size: 0.875rem; line-height: 1.4;
    position: relative; z-index: 40;
}
.site-notice:not(:has(.site-notice__icon)) { padding-left: var(--space-4); }
.site-notice strong { font-weight: 600; }
.site-notice__text { color: var(--color-text-soft); min-width: 0; }
.site-notice__text strong { color: var(--color-text); }
.site-notice__icon {
    flex: none; width: 28px; height: 28px; padding: 6px; box-sizing: border-box; border-radius: 50%;
    color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 13%, transparent);
}
.body--landing .site-notice { margin-block: 0; box-shadow: var(--shadow-sm); }

/* --- Вход и регистрация: поля и заголовки в языке кабинета ---
   Поля были серыми на сером холсте правой колонки и почти не читались как
   поля — белая плашка с тонкой рамкой, как в формах кабинета. */
.auth-form .input,
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"],
.auth-form input[type="tel"] { background: var(--color-surface); }
.auth-form .input:hover,
.auth-form input:hover { border-color: var(--color-border-strong); }
/* Подпись над заголовком — просто текст: декоративный штрих перед ней был
   приёмом прежнего editorial-языка. */
.auth-form__eyebrow::before { content: none; }
/* Выделение слова цветом в заголовке — шаблонный приём; градиентная подпись
   осталась одна — на тёмной сцене лендинга (первый экран и финал). */
.auth-form__title em,
.section-display em,
.surface-card__title em,
.editorial-page__title em,
.editorial-body h1 em,
.editorial-body h2 em {
    font-style: normal; font-weight: inherit; color: inherit;
    background: none; -webkit-text-fill-color: currentColor;
}
/* Способы входа — один ряд одной высоты с кнопкой Google (её высоту
   задаёт Google, 40px; наш минимум — 44px tap target). */
.auth-methods .auth-method { justify-content: center; min-height: 44px; padding-block: 0.5rem; font-weight: 500; }
.auth-methods .auth-method .auth-method__label { flex: none; }
.auth-methods .auth-method .auth-method__icon { width: auto; height: auto; background: none; box-shadow: none; }

/* --- Вкладки-полоса (ui_tab_strip, биллинг) — тот же сегментный контрол,
   что у вкладок кабинета: два вида вкладок на соседних экранах аккаунта
   читались двумя системами. --- */
.tab-strip { border-bottom: 0; width: fit-content; max-width: 100%; }
.tab-strip__list { background: rgba(118, 118, 128, 0.10); padding: 3px; border-radius: var(--radius-md); gap: 2px; }
.tab-strip__link { border-bottom: 0; margin-bottom: 0; border-radius: 9px; padding: 0.45rem 0.9rem; min-height: 40px; color: var(--color-text-soft); }
.tab-strip__link--active {
    background: var(--color-surface); color: var(--color-text);
    box-shadow: 0 1px 2px rgba(16, 18, 26, 0.08), 0 2px 8px -2px rgba(16, 18, 26, 0.10);
}

/* --- Тарифы: белые плиты. Цветная планка сверху и римская цифра были
   знаками прежнего каталожного языка; выделенный тариф держит акцентное
   кольцо и ленту «Чаще всего берут». --- */
.pricing-card {
    background: var(--color-surface);
    border: 0; border-top: 0;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-md);
}
.pricing-card--featured { border: 0; box-shadow: inset 0 0 0 1.5px var(--color-accent), var(--shadow-lg); }
.pricing-card__roman { display: none; }
.pricing-card__name { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em; }

/* --- Настройки уведомлений: матрица — белая плита без серой шапки и
   серых «заблокированных» строк (замок и приглушённый переключатель и так
   говорят, что строку не выключить). --- */
.prefs-webpush__state { background: var(--color-surface); border: 0; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm); }
.prefs-webpush__state::before { content: none; }
.prefs-webpush__icon { border: 0; background: color-mix(in srgb, currentColor 13%, transparent); }
.prefs-row { border: 0; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm); }
@media (min-width: 768px) {
    .prefs-matrix { border: 0; border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
    .prefs-row { box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--color-border-soft); }
    .prefs-row--head, .prefs-row--locked { background: transparent; }
}
/* Шапка-строка каналов нужна только таблице (десктоп). Прежнее правило
   проигрывало каскад следующему за ним .prefs-row{display:flex} той же
   специфичности, и на телефоне висела пустая карточка «Email / Web Push». */
.prefs-row.prefs-row--head { display: none; }
@media (min-width: 768px) { .prefs-row.prefs-row--head { display: grid; } }
/* Витрина показывает плавающую карточку на месте, в потоке секции. */
.sg-section .security-banner { position: static; width: min(24rem, 100%); }

/* --- Карточки состояний, опасная зона, подсказки, вопросы, роли ---
   Тон — в круге значка; плита — белая. Тонированные заливки, цветные
   заголовки и цветные планки — знаки прежнего языка (см. ui_alert). */
.state-card,
.state-card--info, .state-card--warning, .state-card--danger {
    background: var(--color-surface); border: 0;
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}
.state-card--info .state-card__title,
.state-card--warning .state-card__title,
.state-card--danger .state-card__title { color: var(--color-text); }
.state-card--info .state-card__icon { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 13%, transparent); }
.state-card__icon { border-radius: 50%; }
.state-card--danger { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 28%, transparent), var(--shadow-sm); }

.danger-zone {
    background: var(--color-surface); border: 0; border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 28%, transparent), var(--shadow-sm);
}

.hint-row, .hint-row--attention {
    background: var(--color-surface); border: 0;
    box-shadow: inset 0 0 0 1px var(--color-border-soft);
}
.hint-row__icon {
    width: 28px; height: 28px; padding: 6px; box-sizing: border-box; border-radius: 50%;
    background: var(--color-bg-soft);
}
.hint-row--attention .hint-row__icon { background: color-mix(in srgb, var(--color-warning) 13%, transparent); }

/* Номер вопроса — тихая цифра той же гарнитуры, без курсивной засечки. */
.career-question__index { font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; padding-top: 2px; }
.career-question { border: 0; box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm); }
.career-question::before { content: none; }
.career-question__textarea, .career-question__select { background: var(--color-surface); }
.career-question__textarea::placeholder { font-style: normal; }
.career-question--high .career-question__meta-priority,
.career-question--medium .career-question__meta-priority { color: var(--color-text-soft); }

/* Карточка роли: без цветной планки сверху; ярус несёт значок в круге. */
/* Выключенный переключатель — серая дорожка (iOS): токен --color-bg-deep после
   смены палитры почти совпал с белым, и выключенное состояние пропадало. */
.toggle-switch__track { background: rgba(120, 120, 128, 0.24); border-color: transparent; box-shadow: none; }
:root[data-theme="dark"] .toggle-switch__track { background: rgba(120, 120, 128, 0.36); }
.toggle-switch input:checked ~ .toggle-switch__track { box-shadow: none; }

/* Подготовка к разговору: тон требования — точкой у названия, не полосой. */
.apps-prep__item,
.apps-prep__item--missing, .apps-prep__item--partial, .apps-prep__item--plan { padding-left: 0; border-left: 0; }
.apps-prep__req::before {
    content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-right: 8px; vertical-align: 0.12em; background: var(--color-border-strong);
}
.apps-prep__item--missing .apps-prep__req::before { background: var(--color-danger); }
.apps-prep__item--partial .apps-prep__req::before { background: var(--color-warning); }
.apps-prep__item--plan .apps-prep__req::before { background: var(--color-accent); }
/* Канбан: отклик без движения — время на карточке тёплым тоном, без полосы. */
.kanban__card--stalled { border-left: 0; }
.kanban__card--stalled .kanban__card-date { color: var(--color-warning); }
.kanban__card-date { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* Пустое состояние — белая плита (была серой на сером холсте), значок в круге. */
.empty-state {
    background: var(--color-surface); border: 0;
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}
.empty-state__icon {
    width: 48px; height: 48px; border-radius: 50%; border: 0; box-shadow: none;
    background: color-mix(in srgb, var(--color-accent) 11%, transparent);
}
/* Вход по ключу — тот же ряд, что Google: рекомендованность не заливкой. */
.auth-method--brand, .auth-method--brand:hover { background: var(--color-surface); border-color: var(--color-border); }
.auth-method--brand:hover { border-color: var(--color-border-strong); }
.auth-method--brand .auth-method__icon { background: none; color: var(--color-accent); }
/* «Сохраняем…» — процесс, а не предупреждение. */
.saved-indicator[data-state="saving"] { color: var(--color-text-muted); }
/* Принятый ответ — серая подложка-цитата без полосы слева. */

/* --- Доказательства: тон — точкой, не полосой --- */
.evidence-row--have .evidence-row__text,
.evidence-row--gap .evidence-row__text,
.evidence-row--risk .evidence-row__text { box-shadow: none; padding-left: 15px; position: relative; }
.evidence-row--have .evidence-row__text::before,
.evidence-row--gap .evidence-row__text::before,
.evidence-row--risk .evidence-row__text::before {
    content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-border-strong);
}
.evidence-row--have .evidence-row__text::before { background: var(--color-success); }
.evidence-row--risk .evidence-row__text::before { background: var(--color-warning); }
/* Соответствие вакансии: сводка в рейле — белая плита; число — цвет текста,
   тон уже назван заголовком вердикта и значком рядом. Цитата — без полосы. */
/* Без внутренней волосяной линии: она рисовалась внутри прозрачной границы
   плиты (1px, слева 3px), а снаружи шла тень, и карточка читалась двойной
   рамкой с зазором. Остальные плиты кабинета держатся одной тенью. */
.cov-verdict--compact { background: var(--color-surface); box-shadow: var(--shadow-sm); }
.cov-verdict__metric-value { color: var(--color-text); }
.cov-verdict__metric-of { color: var(--color-text-muted); }
/* Цитата — линией тона статуса, а не серой плашкой: плашка с ссылкой внутри
   читалась вторым контейнером в карточке, а линия говорит «это строка из
   вашего резюме» и красит её тем же цветом, что статус над ней. */
.cov-req__quote {
    margin-top: var(--space-2);
    padding: 2px 0 2px var(--space-3);
    border-left: 2px solid rgba(var(--cov-tone-rgb), 0.55);
    background: none;
    border-radius: 0;
    font-size: 0.9375rem;
}

/* --- Лендинг: карточки фич и надзаголовки в языке кабинета ---
   Глянцевая цветная плитка, номер-фолио и светящаяся «линза» по кромке
   были приметами прежнего лендинга; значок — в тонированном круге, как
   везде в продукте, надзаголовок — просто текст без штриха. */
.feature-icon,
.feature-icon--coral, .feature-icon--teal, .feature-icon--sage, .feature-icon--navy,
.feature-icon--violet, .feature-icon--amber {
    width: 44px; height: 44px; border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 11%, transparent);
    color: var(--color-accent); box-shadow: none;
}
.feature-icon::before, .feature-icon::after { content: none; }
.feature-card::before { content: none; }
.feature-card__num { display: none; }
.section-label::before { content: none; }

/* ===================================================================
   Ожидание — фирменный момент. Пока система работает, человек смотрит
   на экран ожидания дольше, чем на любой другой: здесь линия пути знака
   (бирюза → голубой → фиолет) заполняет шкалу, а передний край — светящаяся
   точка, та же, в которой сходятся ленты Match Point. Пятно-«аврора» в углу
   снято: атмосферу несёт сама линия.
   =================================================================== */
.living-progress {
    --lp-rail: 6px;
    --lp-scale-h: 18px;
    --lp-path: linear-gradient(90deg, #14B8A6 0%, #1570C4 55%, #6D4CFF 100%);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-md);
}
.living-progress::before { content: none; }
.living-progress--plain { box-shadow: none; }
.living-progress__track { background: rgba(120, 120, 128, 0.14); }
.living-progress__fill { background: var(--lp-path); background-size: 28rem 100%; }
.living-progress__fill::after {
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(109, 76, 255, 0.25), 0 0 14px 4px rgba(124, 192, 238, 0.55);
    animation: lp-point 2.4s ease-in-out infinite;
}
@keyframes lp-point {
    0%, 100% { box-shadow: 0 0 0 3px rgba(109, 76, 255, 0.25), 0 0 14px 4px rgba(124, 192, 238, 0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(109, 76, 255, 0.12), 0 0 22px 8px rgba(124, 192, 238, 0.30); }
}
@media (prefers-reduced-motion: reduce) { .living-progress__fill::after { animation: none; } }
/* Деления — тише: шкала читается линией, а не линейкой. */
.living-progress__ticks { opacity: 0.55; }
.living-progress--untimed .living-progress__track {
    background-color: rgba(120, 120, 128, 0.14);
    background-image: linear-gradient(90deg, transparent 0%, #14B8A6 30%, #1570C4 55%, #6D4CFF 75%, transparent 100%);
}
.living-progress--overrun .living-progress__fill { background: var(--lp-path); opacity: 0.55; }
.living-progress--overrun .living-progress__fill::after { opacity: 1; box-shadow: 0 0 0 3px rgba(120, 120, 128, 0.2); }
.living-progress__title { letter-spacing: -0.025em; }
:root[data-theme="dark"] .living-progress__track { background: rgba(120, 120, 128, 0.28); }

/* Полоса загрузки навигации — та же линия пути вместо прежней
   голубой → янтарной → бирюзовой смеси. */
.nav-progress { height: 3px; }
.nav-progress__bar {
    background: linear-gradient(90deg, #14B8A6 0%, #1570C4 55%, #6D4CFF 100%);
    box-shadow: 0 0 10px rgba(21, 112, 196, 0.6);
}
/* Пять шагов лендинга: один тонированный круг на все шаги (радуга плиток
   делала из последовательности витрину красок); номер — тихая метка. */
.stage-card__icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 11%, transparent);
    color: var(--color-accent); box-shadow: none;
}
.stage-card__icon::after { content: none; }
.stage-card__icon .icon { width: 22px; height: 22px; }
.stage-card__num {
    background: var(--color-surface); border: 0; color: var(--color-text);
    box-shadow: 0 0 0 1px var(--color-border-soft), 0 1px 3px rgba(16, 18, 26, 0.12);
}

/* Заметки AI-редактора: опознавательный знак AI — тонкая кромка линии пути
   знака (бирюза → голубой → фиолет), без голубого свечения и пятна в углу. */
.feedback-notes {
    border-width: 1px;
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(120deg, rgba(20, 184, 166, 0.45), rgba(21, 112, 196, 0.35) 50%, rgba(109, 76, 255, 0.45)) border-box;
    box-shadow: var(--shadow-sm);
}
/* Строка действий админки: белая плита; опасная — тёплое кольцо, не заливка. */
.action-row--destructive, .action-row--done { background: var(--color-surface); }
.action-row--destructive { border-color: color-mix(in srgb, var(--color-danger) 28%, transparent); }
.action-row--done { border-color: var(--color-border-soft); }
/* Подписи токенов на витрине — обычным регистром, как в продукте. */
.tokens-type-sample__name { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: 0.8125rem; font-weight: 600; }

/* --- Админка: KPI, модерация, воронка обогащения — тот же язык плит ---
   Число — цветом текста; зелёный/красный остаются только у дельты «лучше /
   хуже» (--good/--bad). Цветные планки и тонированные заливки сняты. */
.kpi-card {
    background: var(--color-surface); border: 0;
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}
.kpi-card--violet .kpi-card__value, .kpi-card--accent .kpi-card__value,
.kpi-card--sage .kpi-card__value, .kpi-card--amber .kpi-card__value,
.kpi-card--teal .kpi-card__value, .kpi-card--navy .kpi-card__value { color: var(--color-text); }
.mod-card { border: 0; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm); }
.mod-card::before { content: none; }
.pipeline-funnel { background: transparent; border: 0; padding: 0; }
.enrich-node, .enrich-node--bronze, .enrich-node--enriched, .enrich-node--pending,
.enrich-node--processing, .enrich-node--raw {
    background: var(--color-surface); border: 0; border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}
/* Этапы воронки агрегатора: белые плиты одного вида; этап называет подпись,
   а не цвет (пять оттенков на пяти плитах читались легендой без ключа). */
.stage--raw, .stage--enrichment, .stage--bronze, .stage--silver, .stage--gold {
    background: var(--color-surface); border: 0; border-style: solid; border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}
.stage--raw .stage__name, .stage--enrichment .stage__name, .stage--bronze .stage__name,
.stage--silver .stage__name, .stage--gold .stage__name { color: var(--color-text-soft); }

/* Печать страницы резюме (Cmd+P): на бумагу уходит только документ. Сетка
   кабинета держала пустую колонку под скрытое меню, и лист ужимался в полосу
   шириной в слово, а шапка, кнопки и рейл печатались поверх документа. */
@media print {
    .app-shell { display: block !important; }
    .app-main { padding: 0 !important; margin: 0 !important; }
    body:has(.artifact-doc) .page-shell > :not(.artifact-grid) { display: none !important; }
    .artifact-grid { display: block !important; }
    .artifact-meta, .artifact-doc__edit { display: none !important; }
    .artifact-doc { box-shadow: none !important; border: 0 !important; padding: 0 !important; background: #fff !important; }
    .tpreview, .tpreview__sheet {
        box-shadow: none !important; border: 0 !important; margin: 0 !important;
        max-width: none !important; width: auto !important; transform: none !important;
    }
}

/* Нижняя навигация: подпись 11px, как в таб-баре iOS. На 13px «Профессии»
   не помещалась в пятую часть 375px и обрезалась в «Професс…» — главный
   раздел с многоточием в основной навигации. */
.bottom-nav__item { font-size: 0.6875rem; padding-inline: 2px; gap: 4px; }
.bottom-nav__label { letter-spacing: -0.01em; }
/* Счётчик на активной вкладке — тот же нейтральный, что на остальных:
   янтарная подложка читалась предупреждением, а это просто число. */
.profile-subnav__link--active .profile-subnav__badge,
.profile-subnav__link[aria-current="page"] .profile-subnav__badge { background: rgba(118, 118, 128, 0.14); color: var(--color-text-soft); }

/* Заблокированный переключатель: состояние читается цветом дорожки (бледный
   акцент — «включено, но не изменить»), ручка остаётся белой. Прежде
   полупрозрачной делалась вся дорожка с ручкой, и в тёмной теме «включено,
   заблокировано» сливалось с «выключено». */
.toggle-switch input:disabled ~ .toggle-switch__track { opacity: 1; }
.toggle-switch input:disabled:checked ~ .toggle-switch__track { background: color-mix(in srgb, var(--color-accent) 42%, transparent); }
.toggle-switch input:disabled:not(:checked) ~ .toggle-switch__track { background: rgba(120, 120, 128, 0.14); }
/* Push запрещён браузером — колонка Web Push выключена во всех категориях. */
.prefs-matrix--push-off [data-webpush-cell] .toggle-switch__track { background: rgba(120, 120, 128, 0.14) !important; }
.prefs-matrix--push-off [data-webpush-cell] .toggle-switch__knob { transform: none !important; }
/* Деления уровня различимы и без проставленного уровня (подсказка над лентой
   зовёт нажать именно на них); тише проставленных, но не исчезают в тёмной. */
.skill-chip__meter { opacity: 0.75; }
.skill-chip__tick { background: var(--color-border-strong); }
.skill-chip__tick--on { background: var(--color-accent); }
/* Тёмная тема: карточка героя — тёмное стекло. Белая плита с текстом тёмной
   темы давала светлый текст на светлом. */
:root[data-theme="dark"] .body--landing .hero-lenses {
    background: rgba(22, 24, 38, 0.82);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Переключатель темы — тот же сегментный контрол, что вкладки: серая дорожка,
   выбранный сегмент приподнят. В тёмной теме выбранный сегмент сливался
   с дорожкой, и выбор не читался. */
.theme-toggle { background: rgba(118, 118, 128, 0.10); border: 0; border-radius: var(--radius-md); }
.theme-toggle__btn { border-radius: 9px; }
.theme-toggle__btn[data-theme-active="true"] { box-shadow: 0 1px 2px rgba(16, 18, 26, 0.08), 0 2px 8px -2px rgba(16, 18, 26, 0.10); }
:root[data-theme="dark"] .theme-toggle { background: rgba(118, 118, 128, 0.24); }
:root[data-theme="dark"] .theme-toggle__btn[data-theme-active="true"] { background: rgba(255, 255, 255, 0.14); box-shadow: none; }

/* Опасная зона профессии — белая плита с тёплым кольцом (как danger-zone и
   ui_alert danger); тон — в круге значка и на кнопке, не заливкой карточки. */
.profile-settings__card.profile-settings__card--danger {
    background: var(--color-surface);
    border: 0;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 28%, transparent), var(--shadow-sm);
}
.profile-settings__danger-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: color-mix(in srgb, var(--color-danger) 13%, transparent); color: var(--color-danger);
}
/* Выключенная опасная кнопка — нейтральный «недоступно», а не тусклый
   красный: тёмный текст на приглушённом красном в тёмной теме не читался
   и выглядел сломанным, а не запертым. */
.btn--danger:disabled, .btn--danger[aria-disabled="true"] {
    background: rgba(120, 120, 128, 0.16); color: var(--color-text-muted); box-shadow: none; opacity: 1;
}

/* Длинное имя документа: ступенью меньше и шире строка — две строки вместо
   четырёх; на телефоне — не больше трёх. */
.page-head--compact .section-display--long {
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    letter-spacing: -0.025em;
    line-height: 1.15;
    max-width: 40ch;
}
@media (max-width: 767.98px) {
    .page-head--compact .section-display--long {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    }
}
/* Сегментные вкладки под шапкой: обычный ритм страницы. Отрицательный отступ
   был рассчитан на прежние вкладки-подчёркивание; сегментная дорожка с ним
   прилипала к последней строке заголовка. */
.profile-subnav { margin-top: 0; }
/* Две кнопки в шапке на телефоне — стопкой во всю ширину, одинаковые: в ряд
   «Улучшить профессию» не помещалась в половину 343px и вылезала за кромку
   кнопки, а «по размеру текста» давала две строки разной ширины. Короткие
   вторичные действия, заведомо помещающиеся в ряд, помечаются
   `.page-head__inline` и остаются строкой («Прочитать все · Настройки»). */
@media (max-width: 639px) {
    .page-head__actions:has(> :nth-child(2)):not(:has(> :nth-child(3))):not(:has(> .more-menu)):not(:has(> .share-menu)):not(:has(> .page-head__improve)):not(:has(> .page-head__inline)):not(:has(> .head-actions-form--save)) { flex-direction: column; align-items: stretch; }
    .page-head__actions:has(> :nth-child(2)):not(:has(> :nth-child(3))):not(:has(> .more-menu)):not(:has(> .share-menu)):not(:has(> .page-head__improve)):not(:has(> .page-head__inline)):not(:has(> .head-actions-form--save)) > .btn,
    .page-head__actions:has(> :nth-child(2)):not(:has(> :nth-child(3))):not(:has(> .more-menu)):not(:has(> .share-menu)):not(:has(> .page-head__improve)):not(:has(> .page-head__inline)):not(:has(> .head-actions-form--save)) > form,
    .page-head__actions:has(> :nth-child(2)):not(:has(> :nth-child(3))):not(:has(> .more-menu)):not(:has(> .share-menu)):not(:has(> .page-head__improve)):not(:has(> .page-head__inline)):not(:has(> .head-actions-form--save)) > form > .btn { width: 100%; flex: none; justify-content: center; }
}

/* Балл готовности на карточке профессии — сплошным цветом текста: градиент
   линии пути живёт только в кольцах, шкале ожидания и кромке AI-заметок, а на
   цифре он делал её самым громким пятном экрана. */
.profession-card__fact:nth-child(3) b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--color-text); }
/* Номер ошибки — гарнитурой интерфейса (засечки — только в документе). */
.error-page__code { font-family: var(--font-sans); letter-spacing: -0.02em; }
/* Сегмент режимов редактора (десктоп) — тот же сегментный контрол, что все
   вкладки: серая дорожка, выбранный сегмент приподнят, без рамок у сегментов. */
@media (min-width: 1024px) {
    .resume-editor__modetoggle { background: rgba(118, 118, 128, 0.10); border: 0; padding: 3px; gap: 2px; }
    .resume-editor__modetoggle .resume-editor__viewtab { border: 0; border-radius: 9px; color: var(--color-text-soft); }
    .resume-editor__modetoggle .resume-editor__viewtab.is-active {
        background: var(--color-surface); color: var(--color-text); border: 0;
        box-shadow: 0 1px 2px rgba(16, 18, 26, 0.08), 0 2px 8px -2px rgba(16, 18, 26, 0.10);
    }
}
:root[data-theme="dark"] .resume-editor__modetoggle { background: rgba(118, 118, 128, 0.24); }
:root[data-theme="dark"] .resume-editor__modetoggle .resume-editor__viewtab.is-active { background: rgba(255, 255, 255, 0.14); box-shadow: none; }
/* Текущий тариф — белая плита, как все; состояние несёт бейдж «Активна». */
.billing-overview, .billing-overview--active, .billing-overview--free {
    background: var(--color-surface); border: 0;
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}

/* Точка отсчёта на карте («Вы здесь») — белая плита с кольцом акцента; линия
   карьеры — нейтральные отрезки. Голубая заливка плиты и голубые отрезки
   делали эту справку самым громким местом страницы. */
.career-now {
    background: var(--color-surface); border: 0;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 55%, transparent), var(--shadow-sm);
}
/* Выбранный фильтр — тёмный нейтральный чип: акцент на экране один и
   тратится на главное действие, а не на состояние фильтра. */
.ui-chip--active { background: var(--color-text); color: var(--color-surface); border-color: var(--color-text); }
/* Счётчик квоты на узком экране: значение переносится целиком под подпись,
   а не рвётся на «обновится 1 / ноя» в узкой колонке. */
.quota-meter { flex-wrap: wrap; row-gap: 2px; }
.quota-meter__text { white-space: nowrap; }
@media (max-width: 479.98px) { .quota-meter__text { white-space: normal; flex-basis: 100%; } }
/* Крошки: текст мелкий, но зона нажатия — 44px по высоте (WCAG 2.5.5) за счёт
   прозрачного поля, не сдвигающего строку. */
.breadcrumbs__link { position: relative; }
.breadcrumbs__link::after { content: ""; position: absolute; inset: -14px -6px; }
@media print {
    html, body, .app-shell, .app-main { background: #fff !important; }
    .tpreview__sheet { background: #fff !important; }
}

/* Бейдж вкладки — «сколько осталось поправить», а не «сколько всего»: число
   в тёплом тонированном кружке (тон — в круге, как у значков). Нейтрально-
   серый он читался общим количеством и спорил с цифрами на странице
   («Опыт 1» при четырёх местах работы). */

/* Деления уровня — доля цвета текста: ≥3:1 к чипу в обеих темах. */
.skill-chip__meter { opacity: 1; }
.skill-chip__tick { background: color-mix(in srgb, var(--color-text) 26%, transparent); }
.skill-chip__tick--on { background: var(--color-accent); }
/* Выбранный фильтр — как выбранный вариант в чипах-выборах: акцентная
   подложка и кольцо. Чёрная плашка в светлой и почти белая в тёмной были
   самыми громкими пятнами экрана. */
.ui-chip--active {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-text); border-color: transparent;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 60%, transparent);
}
/* Обязательная категория: замок на ручке — «нельзя выключить» читается
   с первого взгляда, а не только из подписи под строкой. */
.prefs-row--locked .toggle-switch input:disabled ~ .toggle-switch__track .toggle-switch__knob {
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E78' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.btn--danger:disabled, .btn--danger[aria-disabled="true"] { border-color: transparent; }
/* Поле для одного слова — не на всю ширину страницы. */
.career-reset__phrase { max-width: 22rem; }
/* Точка вердикта остаётся у заголовка: при переносе ряда она отрывалась и
   висела отдельной строкой над «Вы читаетесь на эту роль». */
.verdict-line { flex-wrap: nowrap; align-items: flex-start; }
.verdict-line > .verdict-title { min-width: 0; }
.verdict-line > .verdict-dot { margin-top: 0.55em; }

/* Главное действие шапки на телефоне — первым рядом во всю ширину, остальные
   под ним: «Откликнуться» уезжало во второй ряд под две вторичные кнопки. */
@media (max-width: 639px) {
    .page-head__actions > .btn--primary,
    .page-head__actions > :has(> .btn--primary) { order: -1; flex: 1 1 100%; }
    .page-head__actions > :has(> .btn--primary) > .btn--primary { width: 100%; }
    /* «Улучшить» — короткая вторая кнопка у профессии, резюме и «Моей
       карьеры» — встаёт с главной в ОДИН ряд: стопка из двух кнопок во всю
       ширину съедала первый экран (поэтому 04.10 действие и прятали в «⋯»,
       где его не находили). Слева «Улучшить» по размеру текста, справа
       главное — на остаток ряда. */
    .page-head__actions:has(> .page-head__improve) { flex-direction: row; flex-wrap: nowrap; align-items: stretch; }
    .page-head__actions:has(> .page-head__improve) > .page-head__improve { order: 0; flex: none; width: auto; }
    .page-head__actions:has(> .page-head__improve) > .btn--primary { order: 1; flex: 1 1 auto; width: auto; min-width: 0; }
    .page-head__actions:has(> .page-head__improve) > .btn { white-space: nowrap; }
    /* Без главной (у «Моей карьеры» обе вторые) — делят ряд поровну. */
    .page-head__actions:has(> .page-head__improve):not(:has(> .btn--primary)) > .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
}
/* На самых узких экранах значки этого ряда уступают место подписям: на 320px
   две кнопки с иконками упирались в край. */
@media (max-width: 360px) {
    .page-head__actions:has(> .page-head__improve) > .btn .icon { display: none; }
}

/* Тёмная тема: все сегментные контролы — одна пара «дорожка / выбранный»:
   белая плита светлой темы в тёмной давала сегмент, почти неотличимый
   от дорожки, и выбор читался только весом шрифта. */
:root[data-theme="dark"] .profile-subnav__list,
:root[data-theme="dark"] .tab-strip__list,
:root[data-theme="dark"] .resume-editor__viewtoggle { background: rgba(118, 118, 128, 0.24); }
:root[data-theme="dark"] .profile-subnav__link[aria-current="page"],
:root[data-theme="dark"] .profile-subnav__link.is-active,
:root[data-theme="dark"] .tab-strip__link--active,
:root[data-theme="dark"] .resume-editor__viewtab.is-active {
    background: rgba(255, 255, 255, 0.14); color: var(--color-text); box-shadow: none;
}
/* Будущие шаги — видимые, но тише пройденных: кольцо и связка цветом сильной
   границы, номер — вторичным текстом. В тёмной теме они сливались с фоном,
   и путь отклика выглядел оборванным на текущем шаге. */
.step-progress__item--pending .step-progress__bullet {
    background: transparent; color: var(--color-text-soft);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-text) 28%, transparent);
    border-color: transparent;
}
.step-progress__item:not(.step-progress__item--done):not(:last-child)::after { background: color-mix(in srgb, var(--color-text) 20%, transparent); }
.step-progress__item--pending .step-progress__label { color: var(--color-text-soft); }

/* Почта — во всю строку: в половинной колонке адрес обрезался
   («alexey.vorontsov@pers»). Редактор: Имя|Фамилия, Почта, Телефон|Город. */
@media (min-width: 480px) {
    .editor-section[data-editor-section="basics"] .editor-section__body > :nth-child(3) { grid-column: 1 / -1; }
    .editor-section[data-editor-section="basics"] .editor-section__body > :nth-child(5) { grid-column: auto; }
}
.form-row--2 > .field:has(input[type="email"]) { grid-column: 1 / -1; }

/* Статусные бейджи — нейтральная пилюля, тон несёт только точка (как
   у значков и счётчиков): тонированные пилюли с цветным текстом делали
   статус самым громким словом карточки. */
.badge--success, .badge--warning, .badge--danger, .badge--progress, .badge--neutral {
    background: rgba(120, 120, 128, 0.10); border-color: transparent; color: var(--color-text-soft);
}
/* neutral — итог без оценки (возврат, закрыт) в ряду статусов-пилюль:
   обводка default рядом с пилюлями читалась другим видом элемента. */
.badge--neutral::before { background: var(--color-text-muted); }
.badge--success::before { background: var(--color-success); }
.badge--warning::before { background: var(--color-warning); }
.badge--danger::before { background: var(--color-danger); }
.badge--progress::before { background: var(--color-accent); }

/* Вакансия: «Обзор / Полный текст» — общий сегментный контрол: по ширине
   содержимого и с заметным выбранным сегментом в тёмной теме. */
.job-tabs__strip { width: fit-content; max-width: 100%; }
:root[data-theme="dark"] .job-tabs__strip { background: rgba(118, 118, 128, 0.24); }
:root[data-theme="dark"] .job-tabs__radio:nth-of-type(1):checked ~ .job-tabs__strip label:nth-child(1),
:root[data-theme="dark"] .job-tabs__radio:nth-of-type(2):checked ~ .job-tabs__strip label:nth-child(2),
:root[data-theme="dark"] .job-tabs__radio:nth-of-type(3):checked ~ .job-tabs__strip label:nth-child(3) {
    background: rgba(255, 255, 255, 0.14); box-shadow: none;
}
/* Замок — только у включённой обязательной категории; выключенный Web Push
   при запрете браузера — обычное «выключено». Дорожка выключенного в тёмной
   теме — заметнее (≥3:1 к плите). */
.prefs-row--locked .toggle-switch input:disabled:not(:checked) ~ .toggle-switch__track .toggle-switch__knob { background: #fff; }
:root[data-theme="dark"] .toggle-switch__track,
:root[data-theme="dark"] .toggle-switch input:disabled:not(:checked) ~ .toggle-switch__track,
:root[data-theme="dark"] .prefs-matrix--push-off [data-webpush-cell] .toggle-switch__track { background: rgba(120, 120, 128, 0.42) !important; }
:root[data-theme="dark"] .toggle-switch input:checked:not(:disabled) ~ .toggle-switch__track { background: var(--color-accent) !important; }
:root[data-theme="dark"] .toggle-switch input:disabled:checked ~ .toggle-switch__track { background: color-mix(in srgb, var(--color-accent) 45%, transparent) !important; }
/* Крестик навыка: 26px видимо, 44px — зона нажатия. */
.skill-chip__drop::after { content: ""; position: absolute; inset: -9px; }
/* Заголовок обзора — без «висящего» короткого слова в конце строки. */
.dash-head h1, .page-head .section-display { text-wrap: balance; }
/* Пилюля «Редактировать» — внутри листа, с отступом от его кромки; на
   десктопе топбара нет, поэтому липнет к верху окна, а не под рамку. */
.artifact-doc__edit .artifact-doc__edit-btn { transform: translateY(var(--space-4)); margin-right: var(--space-4); }
@media (min-width: 992px) { .artifact-doc__edit { top: var(--space-4); } }
/* Карточка профессии: тон состояния — в точке, слово — нейтральное; метка
   «Активная» — нейтральная пилюля с точкой акцента, как прочие статусы. */
.profession-card__state { color: var(--color-text-soft); }
.profession-card__tag--active {
    background: rgba(120, 120, 128, 0.10); color: var(--color-text-soft); border-color: transparent;
    display: inline-flex; align-items: center; gap: 6px;
}
.profession-card__tag--active::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
/* Статус подписки и плашка «Активна» в аккаунте — нейтральная пилюля с точкой
   тона, как статусы откликов и профессий. */
.billing-overview__status { --st: var(--color-text-muted); background: rgba(120, 120, 128, 0.10); color: var(--color-text-soft); gap: 6px; }
.billing-overview__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st); flex: none; }
.billing-overview__status--active { --st: var(--color-success); }
.billing-overview__status--free { --st: var(--color-text-muted); }
.billing-overview__status--expiring { --st: var(--color-warning); }
.billing-overview__status--grace, .billing-overview__status--cancelled { --st: var(--color-danger); }
/* Состояния соглашения об автопродлении. */
.billing-overview__status--on { --st: var(--color-success); }
.billing-overview__status--off, .billing-overview__status--suspended { --st: var(--color-text-muted); }
.billing-overview__status--past_due { --st: var(--color-warning); }
.billing-overview__status--needs_card { --st: var(--color-danger); }
.sub-card__pill.pill--sage { background: rgba(120, 120, 128, 0.10); color: var(--color-text-soft); border-color: transparent; }
/* Колонка Web Push при запрете браузером — обычная белая ручка без замка:
   в данных переключатель может быть «включён», но доставки нет. */
.prefs-matrix--push-off [data-webpush-cell] .toggle-switch__knob { background: #fff !important; }

/* ===================================================================
   Канбан откликов — дорожки, а не коробки (Linear / Things).
   Колонка — тихая дорожка на холсте с заголовком «● статус · число»;
   карточка — единственная плита на ней. Прежде колонки были белыми плитами
   с карточками-плитами внутри (плита в плите), пустые колонки — белыми
   коробками с «0», а последняя колонка обрезалась у края без намёка.
   Тон статуса — точка у заголовка (единое правило «тон — в точке»).
   =================================================================== */
.kanban__col {
    --lane-tone: var(--color-text-muted);
    background: rgba(118, 118, 128, 0.06);
    border: 0; border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-2) var(--space-2);
    gap: var(--space-2);
}
:root[data-theme="dark"] .kanban__col { background: rgba(118, 118, 128, 0.12); }
.kanban__col[data-kanban-col="saved"]       { --lane-tone: var(--color-text-muted); }
.kanban__col[data-kanban-col="shortlisted"] { --lane-tone: var(--color-warning); }
.kanban__col[data-kanban-col="applied"]     { --lane-tone: var(--color-accent); }
.kanban__col[data-kanban-col="screening"]   { --lane-tone: var(--color-violet); }
.kanban__col[data-kanban-col="interview"]   { --lane-tone: var(--color-teal); }
.kanban__col[data-kanban-col="offer"]       { --lane-tone: var(--color-success); }
.kanban__col[data-kanban-col="closed"]      { --lane-tone: var(--color-text-muted); }
.kanban__col-head { padding: 0 var(--space-2); align-items: center; }
.kanban__col-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em; color: var(--color-text);
}
.kanban__col-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lane-tone); flex: none; }
.kanban__count {
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--color-text-muted);
    font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; border: 0;
}
.kanban__list { gap: var(--space-2); }
/* Карточка — плита с мягкой тенью; приподнимается при наведении. */
.kanban__card {
    background: var(--color-surface); border: 0; border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(16, 18, 26, 0.06), 0 2px 10px -4px rgba(16, 18, 26, 0.10);
    padding: var(--space-3);
}
.kanban__card:hover { box-shadow: 0 2px 4px rgba(16, 18, 26, 0.06), 0 10px 24px -10px rgba(16, 18, 26, 0.22); transform: translateY(-1px); }
:root[data-theme="dark"] .kanban__card { background: var(--color-surface-elevated, #1A1F2B); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.kanban__card-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.kanban__card-company { color: var(--color-text-soft); }
.kanban__card-foot { margin-top: var(--space-2); }
.kanban__card-date { font-size: 0.75rem; color: var(--color-text-muted); }
/* Захват — только по наведению на десктопе: шесть точек на каждой карточке
   в покое были рябью. На тач-устройствах захват виден всегда. */
@media (hover: hover) { .kanban__card-grip { opacity: 0; } }
/* Пустая колонка — тихая зона «перетащите сюда», а не коробка с нулём. */
.kanban__col:not(:has(.kanban__card)) .kanban__count { display: none; }
.kanban__list:not(:has(.kanban__card))::after {
    content: attr(data-empty-label);
    display: flex; align-items: center; justify-content: center;
    min-height: 4.5rem; padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1.5px dashed color-mix(in srgb, var(--color-text) 14%, transparent);
    color: var(--color-text-muted); font-size: 0.8125rem; text-align: center;
}
.kanban__col--over { box-shadow: inset 0 0 0 1.5px var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
/* Доска: колонки фиксированной ширины со snap'ом; край, за которым есть
   ещё колонки, затухает (класс ставит тот же скрипт рядов, что у вкладок). */
@media (min-width: 64rem) {
    .kanban { grid-auto-columns: 17rem; gap: var(--space-3); scroll-snap-type: x proximity; scrollbar-width: thin; }
    .kanban__col { scroll-snap-align: start; }
    .kanban__col:not(:has(.kanban__card)) { min-height: 0; }
}
/* Телефон: пустая колонка — одна строка заголовка, без зоны (она
   раскрывается во время перетаскивания). */
@media (max-width: 63.99rem) {
    .kanban__list:not(:has(.kanban__card))::after { display: none; }
    .kanban--dragging .kanban__list:not(:has(.kanban__card))::after { display: flex; min-height: var(--tap-min); }
    .kanban__col:not(:has(.kanban__card)) { padding-block: var(--space-2); }
}
/* Переключатель «Список / Канбан» в тёмной теме — заметный выбранный сегмент. */
:root[data-theme="dark"] .tabnav { background: rgba(118, 118, 128, 0.24); }
:root[data-theme="dark"] .tabnav .btn--secondary { background: rgba(255, 255, 255, 0.14); box-shadow: none; }
/* Надпись над заголовком — обычной разрядкой: трекинг 0.05em остался от
   капса прежнего языка и на строчных читался «растянутым» словом. */
.page-head--compact .section-label { letter-spacing: 0; }
/* Шапки колонок одной высоты — с числом и без (у пустой оно скрыто). */
.kanban__col-head { min-height: 22px; }

/* ui_more_menu — «⋯» второстепенных действий: круглая кнопка того же веса,
   что вторичная (белая плита с кольцом), высота как у кнопок шапки. */
.more-menu { position: relative; display: inline-flex; }
.more-menu__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: var(--color-surface); color: var(--color-text); cursor: pointer;
    box-shadow: 0 0 0 1px var(--color-border), 0 1px 2px rgba(16, 18, 26, 0.06);
}
.more-menu__toggle:hover { box-shadow: 0 0 0 1px var(--color-border-strong), 0 4px 12px -6px rgba(16, 18, 26, 0.18); }
.more-menu__toggle:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--color-accent)); outline-offset: 2px; }
:root[data-theme="dark"] .more-menu__toggle { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); }
/* В шапке на телефоне: главное действие растягивается, «⋯» — рядом справа,
   в одном ряду (а не две полноширинные кнопки стопкой). */
@media (max-width: 639px) {
    .page-head__actions:has(> .more-menu) { flex-direction: row; flex-wrap: nowrap; align-items: center; }
    .page-head__actions:has(> .more-menu) > .btn { flex: 1 1 auto; width: auto; }
    .page-head__actions > .more-menu { order: 2; flex: none; }
}

/* Режим редактора — инструмент панели, а не второй ряд вкладок: под вкладками
   документа стояла вторая такая же дорожка, и два уровня навигации читались
   равными. Без дорожки, компактнее; выбранный режим — тонированная подложка. */
.resume-editor__viewtoggle,
.resume-editor__modetoggle { background: transparent !important; padding: 0 !important; gap: 4px !important; box-shadow: none; }
.resume-editor__viewtoggle .resume-editor__viewtab,
.resume-editor__modetoggle .resume-editor__viewtab {
    min-height: 34px; padding: 0 var(--space-3); border-radius: 999px; border: 0;
    font-size: 0.8125rem; font-weight: 500; color: var(--color-text-soft); background: transparent; box-shadow: none;
}
.resume-editor__viewtoggle .resume-editor__viewtab.is-active,
.resume-editor__modetoggle .resume-editor__viewtab.is-active,
:root[data-theme="dark"] .resume-editor__viewtab.is-active {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-text); box-shadow: none; border: 0;
}
.resume-editor__viewtoggle .resume-editor__viewtab:hover:not(.is-active),
.resume-editor__modetoggle .resume-editor__viewtab:hover:not(.is-active) { background: rgba(118, 118, 128, 0.10); }
/* Чипы режима редактора — по ширине слова: «Редактировать» не режется. */
.resume-editor__viewtoggle .resume-editor__viewtab { flex: 0 0 auto; }
.resume-editor__viewtoggle .resume-editor__viewtab > span { overflow: visible; text-overflow: clip; white-space: nowrap; }
/* Шапка документа на телефоне: «Скачать PDF» + круглая «Поделиться» рядом
   (подпись скрыта, имя — в aria-label), как «Создать резюме» + «⋯». */
@media (max-width: 639px) {
    .page-head__actions:has(> .share-menu) { flex-direction: row; flex-wrap: nowrap; align-items: center; }
    .page-head__actions:has(> .share-menu) > .btn { flex: 1 1 auto; width: auto; }
    .page-head__actions > .share-menu { order: 2; flex: none; }
    .share-menu__trigger {
        width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; justify-content: center;
        background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-border), 0 1px 2px rgba(16, 18, 26, 0.06);
    }
    .share-menu__trigger > span {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    :root[data-theme="dark"] .share-menu__trigger { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); }
}
@media (max-width: 639px) {
    .page-head__actions .share-menu__trigger { justify-content: center; gap: 0; }
}
/* Четыре действия документа (поделиться, улучшить, PDF, отправить отклик) в
   одну строку телефона не входят: ряд без переноса выталкивал главное за
   край, и «Отправить отклик» ложилось поверх «Скачать PDF». Главное — первой
   строкой во всю ширину (до него дотягивается большой палец), остальные —
   второй, по содержимому (как везде в шапке), без значков: иначе две
   подписи и круглая «Поделиться» в 343px не входят. */
@media (max-width: 639px) {
    .page-head__actions:has(> .share-menu):has(> :nth-child(4)) { flex-wrap: wrap; }
    .page-head__actions:has(> .share-menu):has(> :nth-child(4)) > .btn--primary { order: -1; flex: 1 1 100%; }
    .page-head__actions:has(> .share-menu):has(> :nth-child(4)) > .btn--secondary { flex: 0 1 auto; padding-inline: var(--space-4); }
    .page-head__actions:has(> .share-menu):has(> :nth-child(4)) > .btn--secondary > .icon { display: none; }
}

/* Классический документ — одна гарнитура: должность, даты, строка масштаба
   и подписи разделов набраны той же антиквой, что и текст (капитель вместо
   моноширинного капса). Три семейства на одном листе — гротеск, моно и
   антиква — читались сборкой из разных документов. Остальные шаблоны держат
   свою типографику намеренно. */
.tdoc--classic .tdoc__exp-title { font-family: var(--font-classic-serif); font-weight: 700; letter-spacing: 0; }
.tdoc--classic .tdoc__exp-period,
.tdoc--classic .tdoc__exp-scope,
.tdoc--classic .tdoc__exp-company-context {
    font-family: var(--font-classic-serif); letter-spacing: 0; font-variant-numeric: oldstyle-nums;
}
.tdoc--classic .tdoc__bullets-label,
.tdoc--classic .tdoc__eyebrow {
    font-family: var(--font-classic-serif); text-transform: none;
    font-variant-caps: all-small-caps; letter-spacing: 0.06em; font-weight: 600;
}

/* Вакансия на телефоне: [Откликнуться | ★] первым рядом, «Собрать резюме» —
   под ними во всю ширину. Три кнопки в два неровных ряда были самой тяжёлой
   шапкой кабинета. Звезда — круглая, подпись остаётся для скринридера. */
@media (max-width: 639px) {
    .page-head__actions:has(> .head-actions-form--save) { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .page-head__actions:has(> .head-actions-form--save) > .head-actions-form:not(.head-actions-form--save) { order: -1; flex: 1 1 0; min-width: 0; }
    .page-head__actions:has(> .head-actions-form--save) > .head-actions-form:not(.head-actions-form--save) .btn { width: 100%; }
    .page-head__actions > .head-actions-form--save { order: 1; flex: none; }
    .head-actions-form--save .btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; justify-content: center; gap: 0; }
    .head-actions-form--save .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .page-head__actions:has(> .head-actions-form--save) > a.btn { order: 2; flex: 1 1 100%; justify-content: center; }
}

/* Чип навыка — зона нажатия 44px по высоте (визуально прежний), деления
   уровня в тёмной теме — заметнее. */
.skill-chip { position: relative; }
.skill-chip__face { position: relative; }
.skill-chip__face::after { content: ""; position: absolute; inset: -6px 0; }
:root[data-theme="dark"] .skill-chip__tick { background: color-mix(in srgb, var(--color-text) 40%, transparent); }
:root[data-theme="dark"] .skill-chip__tick--on { background: var(--color-accent); }

/* Пилюля «Редактировать» на телефоне не наезжает на имя в документе:
   лист получает сверху место под неё. */
@media (max-width: 767.98px) { .artifact-doc .tpreview__sheet { padding-top: calc(var(--space-8, 3rem) + 8px); } }

/* Канбан на телефоне: колонки стопкой, перетаскивать неудобно — подсказку
   про перетаскивание прячем (статус меняется на странице отклика), а число
   показываем у всех колонок, и у пустых тоже. */
@media (max-width: 63.99rem) { .apps-kanban-hint { display: none; } }
.kanban__col:not(:has(.kanban__card)) .kanban__count { display: inline-flex; opacity: 0.7; }

/* Текстовые ссылки рядом с формами — зона нажатия 44px. */
.field__link { position: relative; }
.field__link::after { content: ""; position: absolute; inset: -12px -4px; }

/* ===================================================================
   Переключатель — итоговый набор состояний (перекрывает прежние слои):
   выкл — серая дорожка; вкл — акцент; обязательное «вкл» — тот же акцент
   с замком на ручке (читается «включено и не выключить», а не «тускло»);
   push запрещён браузером — колонка выключена и приглушена целиком.
   Рамки у дорожки нет ни в одном состоянии: акцентная рамка «вкл» оставалась
   на дорожке, которую CSS перекрашивал в серый, — «голубое кольцо».
   =================================================================== */
.toggle-switch .toggle-switch__track,
.toggle-switch input:checked ~ .toggle-switch__track { border-color: transparent !important; box-shadow: none !important; }
.toggle-switch input:not(:checked) ~ .toggle-switch__track { background: rgba(120, 120, 128, 0.24) !important; }
:root[data-theme="dark"] .toggle-switch input:not(:checked) ~ .toggle-switch__track { background: rgba(120, 120, 128, 0.40) !important; }
.toggle-switch input:checked ~ .toggle-switch__track,
.toggle-switch input:disabled:checked ~ .toggle-switch__track,
:root[data-theme="dark"] .toggle-switch input:checked ~ .toggle-switch__track,
:root[data-theme="dark"] .toggle-switch input:disabled:checked ~ .toggle-switch__track { background: var(--color-accent) !important; }
.toggle-switch input:disabled:not(:checked) ~ .toggle-switch__track { opacity: 0.6; }
.prefs-matrix--push-off [data-webpush-cell] { opacity: 0.45; }
.prefs-matrix--push-off [data-webpush-cell] .toggle-switch__track,
:root[data-theme="dark"] .prefs-matrix--push-off [data-webpush-cell] .toggle-switch__track { background: rgba(120, 120, 128, 0.40) !important; }

/* Невыбранный чип-фильтр — прозрачный с тонким кольцом: белая плита читалась
   вторым выбранным рядом с настоящим выбором. */
.ui-chip:not(.ui-chip--active):not(.ui-chip--apply) { background: transparent; border-color: var(--color-border); }
.ui-chip:not(.ui-chip--active):not(.ui-chip--apply):hover { background: rgba(118, 118, 128, 0.08); }
/* Архивация обратима — тихая опасная кнопка (красный текст и кольцо), а не
   сплошная красная плита, громче которой на странице ничего нет. */
.profile-settings__danger-form .btn--danger {
    background: transparent; color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
}
.profile-settings__danger-form .btn--danger:hover { background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
/* Карточки профессий: заголовок занимает две строки всегда — у соседей
   ряды «Готовность / Отклики» стоят на одной высоте. */
@media (min-width: 640px) { .profession-grid .profession-card__name { min-height: 2.6em; } }
/* Шапка хаба «Обо мне»: ряд надписи одной высоты с кнопкой и без — полоса
   вкладок не сдвигается при переходе с обзора (есть «Обновить из PDF») на
   вкладку (кнопки нет). */
.page-head--hub > .page-head__row { min-height: 44px; }
@media (min-width: 640px) {
    .page-head--hub:has(> .page-head__row > .page-head__actions) { display: flex; flex-direction: column; }
    .page-head--hub > .page-head__row { display: flex; align-items: center; justify-content: space-between; }
}
/* Текущий тариф — тихое акцентное кольцо: «ваш» читается самой карточкой, а
   не только флажком; рекомендация на ней не ставится (её снимает шаблон). */
.billing-plans__cell--current .pricing-card { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 55%, transparent), var(--shadow-md); }

/* ===== Пятый круг: зоны нажатия, состояния, тихие подписи ===== */
/* Выход из мастеров (обновление, новая профессия) — кнопка 44px без
   подчёркивания: единственная дверь из экрана без меню. */
.onboarding-topbar__signout-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
    border-radius: 999px; text-decoration: none; color: var(--color-text-soft); font-weight: 500;
}
.onboarding-topbar__signout-btn:hover { background: rgba(118, 118, 128, 0.10); color: var(--color-text); }
/* «Сохранить» на вакансии — круглая звезда и на десктопе (одна главная
   кнопка + вторичная + значок, а не три равные). */
.head-actions-form--save .btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; justify-content: center; gap: 0; }
    .head-actions-form--save .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .page-head__actions:has(> .head-actions-form--save) > a.btn { order: 2; flex: 1 1 100%; justify-content: center; }
}

/* Чип навыка — зона нажатия 44px по высоте (визуально прежний), деления
   уровня в тёмной теме — заметнее. */
.skill-chip { position: relative; }
.skill-chip__face { position: relative; }
.skill-chip__face::after { content: ""; position: absolute; inset: -6px 0; }
:root[data-theme="dark"] .skill-chip__tick { background: color-mix(in srgb, var(--color-text) 40%, transparent); }
:root[data-theme="dark"] .skill-chip__tick--on { background: var(--color-accent); }

/* Пилюля «Редактировать» на телефоне не наезжает на имя в документе:
   лист получает сверху место под неё. */
@media (max-width: 767.98px) { .artifact-doc .tpreview__sheet { padding-top: calc(var(--space-8, 3rem) + 8px); } }

/* Канбан на телефоне: колонки стопкой, перетаскивать неудобно — подсказку
   про перетаскивание прячем (статус меняется на странице отклика), а число
   показываем у всех колонок, и у пустых тоже. */
@media (max-width: 63.99rem) { .apps-kanban-hint { display: none; } }
.kanban__col:not(:has(.kanban__card)) .kanban__count { display: inline-flex; opacity: 0.7; }

/* Текстовые ссылки рядом с формами — зона нажатия 44px. */
.field__link { position: relative; }
.field__link::after { content: ""; position: absolute; inset: -12px -4px; }

/* ===================================================================
   Переключатель — итоговый набор состояний (перекрывает прежние слои):
   выкл — серая дорожка; вкл — акцент; обязательное «вкл» — тот же акцент
   с замком на ручке (читается «включено и не выключить», а не «тускло»);
   push запрещён браузером — колонка выключена и приглушена целиком.
   Рамки у дорожки нет ни в одном состоянии: акцентная рамка «вкл» оставалась
   на дорожке, которую CSS перекрашивал в серый, — «голубое кольцо».
   =================================================================== */
.toggle-switch .toggle-switch__track,
.toggle-switch input:checked ~ .toggle-switch__track { border-color: transparent !important; box-shadow: none !important; }
.toggle-switch input:not(:checked) ~ .toggle-switch__track { background: rgba(120, 120, 128, 0.24) !important; }
:root[data-theme="dark"] .toggle-switch input:not(:checked) ~ .toggle-switch__track { background: rgba(120, 120, 128, 0.40) !important; }
.toggle-switch input:checked ~ .toggle-switch__track,
.toggle-switch input:disabled:checked ~ .toggle-switch__track,
:root[data-theme="dark"] .toggle-switch input:checked ~ .toggle-switch__track,
:root[data-theme="dark"] .toggle-switch input:disabled:checked ~ .toggle-switch__track { background: var(--color-accent) !important; }
.toggle-switch input:disabled:not(:checked) ~ .toggle-switch__track { opacity: 0.6; }
.prefs-matrix--push-off [data-webpush-cell] { opacity: 0.45; }
.prefs-matrix--push-off [data-webpush-cell] .toggle-switch__track,
:root[data-theme="dark"] .prefs-matrix--push-off [data-webpush-cell] .toggle-switch__track { background: rgba(120, 120, 128, 0.40) !important; }

/* Невыбранный чип-фильтр — прозрачный с тонким кольцом: белая плита читалась
   вторым выбранным рядом с настоящим выбором. */
.ui-chip:not(.ui-chip--active):not(.ui-chip--apply) { background: transparent; border-color: var(--color-border); }
.ui-chip:not(.ui-chip--active):not(.ui-chip--apply):hover { background: rgba(118, 118, 128, 0.08); }
/* Архивация обратима — тихая опасная кнопка (красный текст и кольцо), а не
   сплошная красная плита, громче которой на странице ничего нет. */
.profile-settings__danger-form .btn--danger {
    background: transparent; color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
}
.profile-settings__danger-form .btn--danger:hover { background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
/* Карточки профессий: заголовок занимает две строки всегда — у соседей
   ряды «Готовность / Отклики» стоят на одной высоте. */
@media (min-width: 640px) { .profession-grid .profession-card__name { min-height: 2.6em; } }
/* Шапка хаба «Обо мне»: ряд надписи одной высоты с кнопкой и без — полоса
   вкладок не сдвигается при переходе с обзора (есть «Обновить из PDF») на
   вкладку (кнопки нет). */
.page-head--hub > .page-head__row { min-height: 44px; }
@media (min-width: 640px) {
    .page-head--hub:has(> .page-head__row > .page-head__actions) { display: flex; flex-direction: column; }
    .page-head--hub > .page-head__row { display: flex; align-items: center; justify-content: space-between; }
}
/* Текущий тариф — тихое акцентное кольцо: «ваш» читается самой карточкой, а
   не только флажком; рекомендация на ней не ставится (её снимает шаблон). */
.billing-plans__cell--current .pricing-card { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 55%, transparent), var(--shadow-md); }

/* ===== Пятый круг: зоны нажатия, состояния, тихие подписи ===== */
/* Выход из мастеров (обновление, новая профессия) — кнопка 44px без
   подчёркивания: единственная дверь из экрана без меню. */
.onboarding-topbar__signout-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
    border-radius: 999px; text-decoration: none; color: var(--color-text-soft); font-weight: 500;
}
.onboarding-topbar__signout-btn:hover { background: rgba(118, 118, 128, 0.10); color: var(--color-text); }
/* «Сохранить» на вакансии — круглая звезда и на десктопе (одна главная
   кнопка + вторичная + значок, а не три равные). */
/* Остаток тарифа под «Откликнуться»: на телефоне — строкой под кнопкой во
   всю ширину, шире — подписью под кнопкой, вне потока: иначе выросшая форма
   сдвигала по вертикали соседние кнопки шапки. */
.head-actions-form__quota { display: flex; justify-content: center; text-align: center; margin-top: var(--space-1); }
/* Ячейки остатка — в счётчиках у инструментов; под кнопкой шапки хватает
   строки «осталось 7 из 10», а ряд из десяти квадратиков спорил с кнопкой. */
.head-actions-form__quota .quota-meter__cells { display: none; }
@media (min-width: 768px) {
    .head-actions-form:has(> .head-actions-form__quota) { position: relative; }
    .head-actions-form__quota { position: absolute; top: 100%; right: 0; width: max-content; flex-wrap: nowrap; }
}
.head-actions-form--save .btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; justify-content: center; gap: 0; }
.head-actions-form--save .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Чип навыка — тонкое кольцо вместо тёмной рамки; шкала уровня видна,
   только когда уровень проставлен (непроставленный — одна подсказка над
   списком, а не двадцать четыре пустые шкалы). */
.skill-chip { border-color: var(--color-border); }
:root[data-theme="dark"] .skill-chip { border-color: rgba(255, 255, 255, 0.12); }
.skill-chip:not(.skill-chip--set) .skill-chip__meter { display: none; }
/* Web Push при запрете браузером — выключенным видом всегда (правило
   заблокированного «вкл» иначе выигрывало по специфичности). */
.prefs-matrix--push-off [data-webpush-cell] .toggle-switch input ~ .toggle-switch__track { background: rgba(120, 120, 128, 0.40) !important; }
/* Выбранный фильтр — нейтральное чернильное кольцо: акцент — для действий. */
.ui-chip--active {
    background: transparent; color: var(--color-text); border-color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--color-text);
}
/* Мелкие значки-ссылки — зона нажатия 44px. */
.profession-card__menu { min-width: 44px; min-height: 44px; }
/* Формы отката — флекс по центру: иначе кнопка 36px прижималась к верху
   44-пиксельной формы и стояла на 4px выше соседней «Сохранить». */
.resume-editor__undo, .resume-editor__redo { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; }

/* Вакансия на телефоне: [Откликнуться | ✦ Собрать резюме | ★] в один ряд.
   Подпись у «Собрать резюме» остаётся видимой: одним значком-искрой кнопка
   читалась украшением, и по ней не нажимали (сценарный прогон 04.10). */
@media (max-width: 639px) {
    .page-head__actions:has(> .head-actions-form--save) > a.btn--ai {
        order: 1; flex: none; min-height: 44px; padding: 0 var(--space-3); white-space: nowrap;
    }
    /* Главное действие — первой строкой во всю ширину, звезда и второе
       действие — второй. В одну строку три кнопки не помещались, как только
       подписи становились длиннее («Резюме под вакансию», «Отклик ·
       Отправлен»): текст переносился в три строки внутри кнопки. */
    .page-head__actions:has(> .head-actions-form--save) { flex-wrap: wrap; }
    .page-head__actions:has(> .head-actions-form--save) > a.btn--primary { order: -1; flex: 1 1 0; }
    .page-head__actions:has(> .head-actions-form--save) > a.btn:not(.btn--primary) { flex: 1 1 auto; white-space: nowrap; }
    /* Длинное имя на телефоне — не больше трёх строк. Две обрезали название
       направления карьеры посреди смысла («…функцию через…»), а порог
       «длинного» считается в байтах, и кириллица попадает под него уже с
       сорока шести знаков. */
    .page-head--compact .section-display--long { -webkit-line-clamp: 3; }
}
/* Чип навыка — высотой не меньше 40px, крестик с зоной 44px. Справочный
   чип (size "sm") без действий — компактный: зона нажатия ему не нужна. */
.skill-chip { min-height: 40px; }
.skill-chip.skill-chip--sm { min-height: 26px; }

/* ===================================================================
   Ответ на требование вакансии: «Это про вас?» + ответы-пилюли одного вида.
   «Да, есть опыт» раскрывает одну панель записи (остальные ответы на время
   скрываются); панель называет, куда уйдёт строка и что сделать потом.
   =================================================================== */
.cov-req__answers {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    margin-top: var(--space-3);
}
/* В карточке решение отделено волосяной линией: выше — что мы нашли в
   резюме, ниже — вопрос к человеку. Без линии вопрос сливался с цитатой. */
.cov-req:not(.cov-req--compact) .cov-req__answers,
.cov-req:not(.cov-req--compact) .cov-req__fixed {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft, var(--color-border));
}
.cov-req:not(.cov-req--compact) .cov-req__fixed + .cov-req__answers { padding-top: 0; border-top: 0; }
.cov-req__prompt { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-soft); margin-right: var(--space-1); }
/* Стаж и диплом: вместо вопроса — объяснение обычным текстом своим абзацем,
   действия под ним. Жирная подпись-вопрос в одном ряду с кнопками для фразы
   в двадцать слов читалась заголовком и выталкивала кнопки в разные ряды. */
.cov-req__fixed {
    margin: var(--space-3) 0 0;
    font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-muted); max-width: 72ch;
}
.cov-req__fixed + .cov-req__answers { margin-top: var(--space-2); }
.cov-req__answers-hint { flex-basis: 100%; order: 10; font-size: 0.8125rem; color: var(--color-text-muted); max-width: 72ch; }
.cov-req__answer {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 0 var(--space-4);
    border-radius: 999px; border: 0; cursor: pointer; list-style: none;
    background: var(--color-surface); color: var(--color-text);
    box-shadow: inset 0 0 0 1px var(--color-border);
    font: inherit; font-size: 0.875rem; font-weight: 500; text-decoration: none;
    transition: box-shadow 140ms ease, background 140ms ease;
}
.cov-req__answer::-webkit-details-marker { display: none; }
.cov-req__answer:hover { box-shadow: inset 0 0 0 1px var(--color-border-strong); background: rgba(118, 118, 128, 0.06); }
.cov-req__answer:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cov-req__answer .icon { color: var(--color-text-muted); }
.cov-req__answer--yes .icon { color: var(--color-success); }
:root[data-theme="dark"] .cov-req__answer { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.cov-req__quick { margin: 0; display: inline-flex; }
/* Раскрыто «Да»: пилюля выбрана, прочие ответы скрыты, панель — во всю ширину. */
.cov-req__yes { display: inline-flex; }
.cov-req__yes[open] { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 100%; min-width: 0; max-width: 100%; }
/* Панель и чипы внутри не шире карточки: длинный чип («Искусственный
   интеллект (AI) · уже в карьере») на 375px растягивал панель за правый край. */
.cov-req__yes[open] > .cov-req__panel { max-width: 100%; grid-template-columns: minmax(0, 1fr); }
.cov-req__panel .skill-chip { max-width: 100%; }
.cov-req__panel .skill-chip__face { max-width: 100%; white-space: normal; }
.cov-req__answers:has(.cov-req__yes[open]) > :not(.cov-req__yes):not(.cov-req__prompt) { display: none; }
.cov-req__yes[open] > .cov-req__answer {
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-success) 55%, transparent);
}
.cov-req__panel {
    align-self: stretch; margin: var(--space-2) 0 0;
    display: grid; gap: var(--space-2);
    padding: var(--space-4); border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
}
:root[data-theme="dark"] .cov-req__panel { background: rgba(255, 255, 255, 0.04); }
.cov-req__panel-label { font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
.cov-req__panel-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.cov-req__panel-row .input { flex: 1 1 16rem; min-width: 0; max-width: 28rem; background: var(--color-surface); }
.cov-req__panel-hint { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-muted); max-width: 60ch; }
/* Подсказка, которая и есть содержание панели (отметка без записи): читается
   текстом, а не сноской. */
.cov-req__panel-hint--lead { font-size: 0.9375rem; color: var(--color-text); }
.cov-req__panel .cov-req__panel-wide { width: 100%; background: var(--color-surface); }
@media (max-width: 479.98px) { .cov-req__prompt { flex-basis: 100%; } }

/* Чип навыка с меню: признак «нажмите» — шеврон и подсказка «уровень?» у
   непроставленного; удаление — пунктом меню под чертой, тоном опасного. */
.skill-chip__chevron { color: var(--color-text-muted); margin-left: 2px; }
.skill-chip__disc[open] .skill-chip__chevron { transform: rotate(180deg); }
.skill-chip__set-hint { font-size: 0.75rem; color: var(--color-accent); font-weight: 500; }
.skill-chip__remove { margin: var(--space-1) 0 0; padding-top: var(--space-1); border-top: 1px solid var(--color-border-soft); }
/* Действия после выбора уровня («Не про меня») — под линией, как удаление
   под уровнями на вкладке «Навыки»: ответ «умею» и отказ не сливаются. */
.skill-chip__levels--after { margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid var(--color-border-soft); }
.skill-chip__level--remove,
.skill-chip__level--remove .skill-chip__level-mark { color: var(--color-danger); }

/* Строка на месте скрытой вакансии: «Вакансия скрыта · Вернуть». */
.job-hidden-note {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    min-height: 56px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg);
    border: 1.5px dashed color-mix(in srgb, var(--color-text) 14%, transparent);
    color: var(--color-text-muted); font-size: 0.875rem;
}
.job-hidden-note__undo {
    min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: 999px; cursor: pointer;
    background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--color-border);
}

/* Панель сохранения формы с явным «Сохранить»: в покое — обычный ряд в конце
   формы; с первой правкой прилипает к низу экрана и говорит, что есть
   несохранённое (data-dirty-guard). */
.goals-sheet__dirty-note { display: none; font-size: 0.875rem; color: var(--color-text-soft); }
form.is-dirty [data-dirty-bar] {
    position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-3)); z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-lg);
}
form.is-dirty [data-dirty-bar] .goals-sheet__dirty-note { display: inline; }
@media (max-width: 991.98px) { .body--app form.is-dirty [data-dirty-bar] { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--space-3)); } }
.update-clarify__intro {
    margin: 0 0 var(--space-5); padding: var(--space-4); border-radius: var(--radius-lg);
    background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}
.update-clarify__intro-title { margin: 0 0 4px; font-weight: 600; }
.update-clarify__intro-body { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-soft); max-width: 62ch; }
.career-now__fresh { margin-top: var(--space-3); }
.career-now__fresh > summary {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; list-style: none;
    font-size: 0.875rem; font-weight: 600; color: var(--color-text-soft);
}
.career-now__fresh > summary::-webkit-details-marker { display: none; }
.career-now__fresh[open] .career-now__fresh-chev { transform: rotate(180deg); }

/* ===================================================================
   Канбан на десктопе: вся воронка на одном экране.
   Семь колонок по 17rem занимали почти 2000px при доске в 900–1060px:
   «Интервью», «Оффер» и «Закрыто» уезжали за край, и бросить карточку
   туда можно было только после прокрутки. Теперь ширину получают колонки
   с карточками, а пустые сжаты в узкие дорожки — их работа в покое лишь
   назвать этап и принять карточку. Если карточек так много, что и это
   не помещается, остаётся прокрутка и автопрокрутка у края при переносе.
   Захват виден всегда, бледно: невидимый в покое, он не обещал, что
   карточку можно тащить.
   =================================================================== */
@media (min-width: 64rem) {
    .kanban { display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-2); }
    .kanban__col { flex: 1 1 0; min-width: 12.5rem; }
    .kanban__col:not(:has(.kanban__card)) { flex: 0 0 6.75rem; min-width: 0; }
    /* В узкой дорожке точка встаёт над названием: в одну строку с ней
       «Сохранённые» не помещались и вылезали за край колонки. */
    .kanban__col:not(:has(.kanban__card)) .kanban__col-head { padding: 0 var(--space-1); }
    .kanban__col:not(:has(.kanban__card)) .kanban__col-title {
        flex-direction: column; align-items: flex-start; gap: 6px;
        font-size: 0.8125rem; line-height: 1.25;
    }
    /* Ноль у пустой дорожки повторял пунктирную зону «пусто» и в узкой
       колонке налезал на название этапа. */
    .kanban .kanban__col:not(:has(.kanban__card)) .kanban__count { display: none; }
    .kanban__col:not(:has(.kanban__card)) .kanban__list::after { padding: var(--space-2); font-size: 0.75rem; }
}
@media (hover: hover) { .kanban__card-grip { opacity: 0.3; } }
/* На тач-экране доска — стопка колонок, тащить карточку некуда: ручка
   обещала действие, которого нет (этап меняется на странице отклика). */
@media (hover: none) { .kanban__card-grip { display: none; } }
/* Подвал карточки: дата и этап не рвутся посередине («5 / дней»), а при
   нехватке места этап уходит строкой ниже целиком. */
.kanban__card-foot { flex-wrap: wrap; row-gap: var(--space-1); }
.kanban__card-date { white-space: nowrap; }
.kanban__card-foot .badge { white-space: nowrap; }
@media (min-width: 64rem) {
    /* Семь колонок с карточками не помещаются в 1050px ни при какой
       читаемой ширине; доска прокручивается вбок с затуханием у края
       (data-scroll-active). Колонки уже на 1.5rem, чтобы за краем
       оставалось меньше, а закрытые — уже остальных: это архив. */
    .kanban__col { min-width: 11rem; }
    .kanban__col[data-kanban-col="closed"] { flex: 0.6 1 0; min-width: 9.5rem; }
}

/* Короткое имя вкладки — только на узком экране (resume_artifact_subnav). */
.profile-subnav__label--short { display: none; }
@media (max-width: 479.98px) {
    .profile-subnav__label--full { display: none; }
    .profile-subnav__label--short { display: inline; }
}

/* Подсказка у места работы без результатов (таб «Опыт» карьерной базы). */
/* Подсказка у записи: место работы без результатов, диплом без факультета,
   сертификат без организации или года. Один вид на все записи «Опыта». */
.career-timeline__nudge {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-2);
    margin: var(--space-2) 0 0; font-size: 0.875rem; color: var(--color-text-soft);
}
.career-timeline__nudge .icon { color: var(--color-warning); margin-top: 0.2em; }
.career-timeline__nudge a { font-weight: 600; white-space: nowrap; }
.career-education__link {
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: var(--tap-min, 44px);
    font-size: 0.875rem; font-weight: 500; color: var(--color-accent);
}
.career-education__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Кнопка-закрыватель раскрывашки работает только со скриптом — без него
   остаётся нативная шапка <details>. Со скриптом шапку открытой формы правки
   места работы прячем: «Отмена» стоит рядом с «Сохранить», и вторая внизу
   формы лишь повторяла её. */
html:not(.js) [data-details-close] { display: none; }
.js .career-timeline__edit[open] > .career-education__edit-summary { display: none; }
.career-timeline__edit-form .career-entry-actions { grid-column: 1 / -1; }

/* Липкая копия действия уходит, пока видна полная форма (data-hide-while-visible). */
.is-shadowed { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); }

/* Оценочная вилка в ленте — тише указанной работодателем суммы. */
.job-card__salary--est .job-card__salary-sum { color: var(--color-text-soft); font-weight: 500; }
/* Оценка языковой модели (salary_origin: ai, 05.11): сумма тише оценки по
   рынку, подпись — плашкой тона предупреждения: у четверти таких вакансий
   число расходится с опубликованным вдвое и больше. Пояснение — по
   наведению (cursor: help) и строкой на странице вакансии. */
.job-card__salary--ai .job-card__salary-sum { color: var(--color-text-muted); font-weight: 500; }
.job-card__salary-source--ai { padding: 1px var(--space-2); border-radius: var(--radius-sm); background: var(--color-warning-soft); color: var(--color-warning-strong); cursor: help; }
.job-comp__reason--ai { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-warning-strong); }
.job-comp__reason--ai .icon { flex: none; margin-top: 3px; }
/* Условия оплаты словами работодателя (salary_terms): строка под месячной
   суммой или вместо неё, когда месячной нет (смена, проект, «около»). */
.salary-terms { margin: var(--space-2) 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text); }
.salary-terms__label { color: var(--color-text-muted); }
.salary-terms__sum { font-variant-numeric: tabular-nums; font-weight: 500; }
.salary-terms__note { margin: 2px 0 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.job-card .salary-terms { margin: 0; font-size: 0.9375rem; }
/* «кадровый резерв» на карточке сохранённой вакансии — тихая пометка. */
.job-card__pool { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }

/* Вопросы карьеры на «Обо мне» — превью и одна кнопка в общий мастер. */
.career-health__questions-more { margin: var(--space-2) 0 0; font-size: 0.875rem; }
.career-health__questions-cta { margin-top: var(--space-3); }

/* Превью вопроса — ссылка в общий мастер, а не карточка с формой: вся
   карточка нажимается, стрелка справа говорит «туда». Отступы карточки
   переезжают на ссылку, чтобы область нажатия была во всю карточку. */
.open-questions-stack__item { padding: 0; }
.open-questions-stack__link {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-3);
    padding: var(--space-3) var(--space-4); color: inherit; text-decoration: none; border-radius: inherit;
}
.open-questions-stack__link .open-questions-stack__meta { grid-column: 1; margin-bottom: 4px; }
.open-questions-stack__link .open-questions-stack__question { grid-column: 1; display: block; }
.open-questions-stack__chev { grid-column: 2; grid-row: 1 / span 2; color: var(--color-text-muted); transition: transform var(--dur-fast) var(--ease-out); }
.open-questions-stack__link:hover { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.open-questions-stack__link:hover .open-questions-stack__chev { transform: translateX(2px); color: var(--color-text); }
.open-questions-stack__link:focus-visible { outline: var(--focus-ring-width) solid var(--color-accent); outline-offset: 2px; }
.open-questions-stack__more { margin: var(--space-2) 0 0; font-size: 0.875rem; color: var(--color-text-muted); }

/* ── Навык против требования: статус точкой, одна пилюля на всю платформу ──
   Карта роли, разбор вакансии и «почему подходит» рисуют навык тем же
   ui_skill_chip, что вкладка «Навыки»: статус — точкой перед именем (правило
   «тон — в точке»), доля рынка — справа тихой подписью. */
.skill-chip__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--color-text-muted); }
.skill-chip--have { background: var(--color-surface); }
.skill-chip--have .skill-chip__dot { background: var(--color-teal); }
.skill-chip--partial { background: var(--color-surface); }
.skill-chip--partial .skill-chip__dot { background: var(--color-amber); }
.skill-chip--missing { color: var(--color-text-soft); }
/* В панели ответа «Да» (страница соответствия) навык — то, на что нажимают,
   а не статус требования: тихий прозрачный чип на сером фоне панели читался
   недоступным рядом с белым «уже в карьере». */
.cov-req__panel .skill-chip--missing { background: var(--color-surface); color: var(--color-text); }
.gap-map__rest { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 4px; font-size: 0.875rem; color: var(--color-text-muted); }

/* Чип поля ввода (онбординг, предпочтения, цели) — та же пилюля, что
   ui_skill_chip: высота, отступ и рамка совпадают, иначе навык, введённый в
   онбординге, и он же на вкладке «Навыки» читались двумя разными вещами. */
.chips-input__chip { min-height: 40px; padding-inline-start: 12px; border-color: var(--color-border); }

/* «Не про меня» на обзоре профессии — путь назад рядом с блоком требований. */
.market-gaps__dismissed { margin-top: var(--space-3); }
.market-gaps__dismissed-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.market-gaps__dismissed-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.market-gaps__dismissed-item form { margin: 0; }

/* Заметка «собраны до правки» — с кнопкой пересборки в одну строку. */
.user-context__quota { margin-top: var(--space-2); }

/* Контакты аккаунта: почта — текстом (её меняет SSO), правятся только имя и
   фамилия; остальные контакты живут в «Обо мне». */
.profile-contacts__email { display: flex; flex-direction: column; gap: 2px; margin: var(--space-3) 0 0; }
.profile-contacts__label { font-size: 0.8125rem; color: var(--color-text-muted); }
.profile-contacts__actions { margin-top: var(--space-3); }
.profile-contacts__where { margin: var(--space-3) 0 0; font-size: 0.875rem; color: var(--color-text-soft); }

/* Скрытые из ленты — список с «Вернуть» на странице сохранённых. */
.jobs-hidden { margin: var(--space-2) 0 var(--space-5); }
.jobs-hidden__title { margin: 0 0 var(--space-2); font-size: 1rem; font-weight: 600; }
.jobs-hidden__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.jobs-hidden__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--color-border-soft); }
.jobs-hidden__item form { margin: 0; }
.job-feed__restart { margin: var(--space-4) 0 0; text-align: center; }

/* Метка «уже откликнулись» на карточке ленты. */
/* «Что уже начато по вакансии» (ui_vacancy_work): та же строка в ленте,
   подборке и на странице вакансии, тона состояния резюме — как у карточки
   отклика (.app-doc-state). */
.vacancy-work { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--color-text-soft); }
.vacancy-work__icon { flex: none; margin-top: 2px; color: var(--color-text-muted); }
.vacancy-work__doc--building { color: var(--color-accent); }
.vacancy-work__doc--failed, .vacancy-work__doc--stale, .vacancy-work__doc--none,
.vacancy-work__doc--missing, .vacancy-work__doc--deleted { color: var(--color-warning-strong); }
.job-detail__work { margin: calc(-1 * var(--space-2)) 0 0; font-size: 0.875rem; }

/* ui_data_tip на телефоне — карточка у низа экрана над навигацией, а не
   всплывашка у элемента: у отрезка линии жизни правее середины она уезжала
   за край («Маркетплейс…», «Длительност…»), а скрытые панели раздвигали
   страницу до 567px. Фиксированная карточка не обрезается и ширину не
   занимает. */
@media (max-width: 639px) {
    .dtip__panel,
    .dtip__panel--end {
        position: fixed;
        left: var(--space-4);
        right: var(--space-4);
        top: auto;
        bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: none;
    }
}


/* Обёртка области, которую filter-swap.js подменяет вместе со списком (шапка
   со счётчиком). Своего бокса у неё нет: раскладка страницы видит шапку так
   же, как без обёртки. */
.filter-sync { display: contents; }

/* Подвал шага очереди на телефоне — липкий ЦЕЛИКОМ. Липким прежде был только
   ряд действий внутри подвала, а липкий элемент держится лишь в границах
   родителя: подвал стоял под содержимым, и «Дальше» на 375px оказывалась за
   краем экрана, пока человек не прокрутит. Теперь липнет сам подвал, а чтобы
   он не съедал полэкрана, действия идут одним рядом («Пропустить» | «Дальше»),
   перемещения — одной строкой под ними. */
@media (max-width: 767.98px) {
    .update-clarify__footer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        grid-template-areas:
            "actions actions"
            "back exit";
        grid-template-columns: 1fr auto;
        gap: 0 var(--space-2);
        padding: var(--space-2) 0 calc(var(--space-1) + env(safe-area-inset-bottom));
        background: var(--color-bg);
    }
    .update-clarify__footer::before {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 100%;
        height: var(--space-5);
        background: linear-gradient(to top, var(--color-bg), transparent);
        pointer-events: none;
    }
    .update-clarify__footer .onboarding-step__actions {
        position: static;
        flex-direction: row;
        align-items: center;
        margin-top: 0;
        padding: 0;
        background: none;
    }
    .update-clarify__footer .onboarding-step__actions::before { display: none; }
    .update-clarify__footer .onboarding-step__actions .onboarding-step__push { flex: 1; }
    .update-clarify__exit { justify-content: flex-end; }
    .update-clarify__back:empty { display: none; }
}

/* Кнопка «Сохранить» видна и при автосохранении (06.10): её прятали, когда
   скрипт сохранял сам, и люди не верили, что текст записался. Скрипт держит
   её неактивной, пока сохранять нечего. */

/* Совет с действием: строка целиком — ссылка туда, где совет выполняется.
   Цель нажатия на всю строку и не меньше 44px — на телефоне по фразе
   попадают пальцем, а не по шеврону. */
.improvement-hints__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-height: var(--tap-min);
    margin: calc(-1 * var(--space-2)) 0;
    color: inherit;
    text-decoration: none;
}
.improvement-hints__link .improvement-hints__text { flex: 1; }
.improvement-hints__chev { flex: none; color: var(--color-text-muted); transition: transform var(--dur-fast, .15s) ease; }
.improvement-hints__link:hover .improvement-hints__text { color: var(--color-accent); }
.improvement-hints__link:hover .improvement-hints__chev { transform: translateX(2px); color: var(--color-accent); }
.improvement-hints__link:focus-visible { outline: 2px solid var(--color-focus, var(--color-accent)); outline-offset: 2px; border-radius: var(--radius-sm); }
.improvement-hints__item--action::before { top: calc(var(--space-3) + 0.75em - 3px); }

/* --- Цели нажатия 44px на телефоне и тач-экранах (WCAG 2.5.5) -------------
   Замер на 375px по всем экранам кабинета (scripts: capture/fx_tap.mjs)
   нашёл кнопки и ссылки ниже 44px: переключатели «Список / Канбан» и
   «Превью / Редактировать», период зарплаты, вкладки подписки, раскрывашки
   свежести навыков и истории, тихие ссылки-строки. На десктопе с мышью
   компактная высота остаётся: там она часть плотности, а не барьер. */
@media (max-width: 767.98px), (pointer: coarse) {
    .tabnav .btn,
    .resume-editor__viewtab,
    .resume-editor__modetoggle .resume-editor__viewtab,
    .comp-slider__period-btn,
    .tab-strip__link { min-height: var(--tap-min); }
    .job-card__cta { min-width: var(--tap-min); justify-content: center; }
    .toggle-row,
    .career-now__fresh > summary,
    .skillfresh__more > summary,
    .letter-history summary,
    .profile-settings__name-summary,
    details > summary:not([class]) { min-height: var(--tap-min); }
    .profile-settings__name-summary { display: inline-flex; align-items: center; }
    .profile-resumes__all a,
    .apps-prep__link,
    .resume-group__link {
        display: inline-flex;
        align-items: center;
        min-height: var(--tap-min);
    }
}

/* «Удалить» у ещё не отправленного напоминания — в конце строки, тихой
   кнопкой: действие редкое и над одной строкой, а не над разделом. */
.apps-reminders__remove { margin: 0 0 0 auto; }
.apps-reminders__remove .btn { color: var(--color-text-muted); }
.apps-reminders__remove .btn:hover { color: var(--color-danger); }

/* Вакансия на телефоне. Рейл (совпадение, зарплата, «О вакансии») стоял
   целиком перед разбором, и «Почему подходит» начиналось на третьем экране:
   человек пролистывал справку, чтобы дойти до ответа «идти ли». Теперь
   совпадение — компактной строкой (кольцо рядом с вердиктом), за ним зарплата
   и сразу разбор; справка «О вакансии» — после него. Рейл растворяется
   (display: contents), чтобы его части встали в общий порядок колонки. */
@media (max-width: 899.98px) {
    .job-detail { display: flex; flex-direction: column; }
    .job-detail__rail { display: contents; }
    .job-detail__score { order: 1; flex-direction: row; justify-content: flex-start; gap: var(--space-4); }
    .job-detail__score .score-ring--lg { --diameter: 5.5rem; --stroke: 9; }
    .job-detail__rail > .job-comp { order: 2; }
    .job-detail__body { order: 3; }
    .job-detail__meta { order: 4; }
}
/* Совпадение и зарплата — одной строкой из двух плиток: два ответа «идти
   ли» и «сколько платят» видны вместе на первом экране, и разбор начинается
   сразу под ними. Плитка без пары (подбор молчит и разбора нет) — во всю
   ширину. */
@media (max-width: 899.98px) {
    .job-detail:has(> .job-detail__rail > .job-detail__score) { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3); }
    .job-detail:has(> .job-detail__rail > .job-detail__score) > *,
    .job-detail:has(> .job-detail__rail > .job-detail__score) > .job-detail__rail > * { grid-column: 1 / -1; }
    .job-detail:has(> .job-detail__rail > .job-detail__score) > .job-detail__rail > .job-detail__score { grid-column: 1; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); text-align: center; }
    .job-detail .job-detail__rail > .job-detail__score .score-ring--lg { --diameter: 5.5rem; --stroke: 8; }
    .job-detail:has(> .job-detail__rail > .job-detail__score) .job-detail__score .score-ring__label { font-size: 0.6875rem; }
    .job-detail .job-detail__rail > .job-detail__score .job-detail__score-verdict { font-size: 0.875rem; }
    .job-detail:has(> .job-detail__rail > .job-detail__score) > .job-detail__rail > .job-comp { grid-column: 2; padding: var(--space-3); }
    .job-detail__rail > .job-comp .job-comp__amount { flex-wrap: wrap; row-gap: var(--space-1); }
}

/* Серверный тост несёт действие ссылкой (flashActions), клиентский — кнопкой:
   облик общий. */
a.flash__action { display: inline-flex; align-items: center; text-decoration: none; }

/* У формы правки своя «Отмена» рядом с «Сохранить» — тогда «× Отмена» в
   summary под формой лишняя: две одинаковые кнопки одного действия в одном
   блоке. У форм без своей кнопки (добавление) и без JS (кнопка закрывает
   скриптом) summary остаётся выходом. */
.js .career-education__edit[open]:has([data-details-close]) > .career-education__edit-summary { display: none; }
.js .career-entry-add[open]:has([data-details-close]) > .career-entry-add__summary { display: none; }
/* Форма достижения внутри раскрывашки «+ Добавить достижение» — без своей
   рамки: рамку даёт раскрывашка, и вложенная вторая читалась коробкой в
   коробке. */
.career-entry-add .career-achieve-add {
    margin-top: 0;
    padding: 0;
    border: 0;
    background: none;
}


/* Ключ монограмм линии карьеры — на узком экране, где отрезки несут только
   букву. Строка ключа: буква в той же плашке, что на отрезке, имя, годы. */
.lifeline__key-list { display: none; }
@media (max-width: 599px) {
    .lifeline__key-list {
        display: grid;
        gap: 6px;
        margin: var(--space-1) 0 0;
        padding: 0;
        list-style: none;
    }
    .lifeline__key-item,
    .lifeline__key-row {
        display: grid;
        grid-template-columns: 1.5rem minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-2);
        font-size: 0.8125rem;
        color: var(--color-text-soft);
    }
    /* Строка-ссылка на карточку роли: сетку несёт ссылка, зона нажатия —
       не меньше 44px. */
    .lifeline__key-item--link { display: block; }
    .lifeline__key-row { row-gap: 0; min-height: var(--tap-min); text-decoration: none; }
    /* Метка строки — отрезок дорожки в миниатюре того же тона: строка
       списка и полоса над ним читаются одним объектом без букв. */
    .lifeline__key-mono {
        display: block;
        width: 1.125rem;
        height: 6px;
        border-radius: var(--radius-pill);
        background: color-mix(in srgb, var(--color-text-muted) 40%, transparent);
    }
    .lifeline__key-item:last-child .lifeline__key-mono { background: var(--color-accent); }
    .lifeline__key-item { row-gap: 0; }
    .lifeline__key-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
    /* Должность — под именем на всю ширину строки (и под годами): в колонке
       имени она обрезалась на середине («Архитектор решений и Ру…»). */
    .lifeline__key-role { grid-column: 2 / -1; color: var(--color-text-muted); font-size: 0.75rem; line-height: 1.35; }
    .lifeline__key-years { font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
}

/* Бейдж вкладки — точка внимания (ui_tab_badge): янтарная, у верхнего края
   подписи, как значок непрочитанного. */
.profile-subnav__badge,
.profile-subnav__link--active .profile-subnav__badge,
.profile-subnav__link[aria-current="page"] .profile-subnav__badge {
    min-width: 0;
    border: 0;
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 50%;
    align-self: flex-start;
    margin-top: 2px;
    background: var(--color-amber, var(--color-warning));
}

/* «Всё актуально»: ряд действий стоит под текстом, а не липкой панелью —
   списка над ним нет, прилипать не к чему. */
.update-select__actions--start {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: var(--space-2);
    background: none;
}
.update-select__actions--start::before { display: none; }
.update-select__note { margin: 0 0 var(--space-2); font-size: 0.875rem; line-height: 1.5; color: var(--color-text-soft); max-width: 60ch; }

/* Профессия на узком экране: рейл (качество текста, подсказки) — сразу за
   разбором, а не хвостом после ролей и свёрнутых справок. Подсказки — это
   действия; в конце семитысячной страницы до них не доходил никто. */
@media (max-width: 1023.98px) {
    .profile-overview-grid__main { order: 1; }
    .profile-overview-grid__meta { order: 2; }
    .profile-overview-grid__wide { order: 3; }
}

/* Вакансия, у которой разбор только на чужом языке: одна строка со ссылкой в
   «Полный текст» вместо английского пересказа на русском экране. Ссылка —
   label радио-вкладки, переключение работает без JS. */
.job-detail__original-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border-soft);
    font-size: 0.9375rem;
    color: var(--color-text-soft);
}
/* Оригинал под переводом полного текста подборки (§8): закрыт по умолчанию,
   нативная раскрывашка работает без JS. */
.job-detail__original {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}
.job-detail__original-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    font-weight: 600;
    color: var(--color-accent);
    cursor: pointer;
    list-style: none;
}
.job-detail__original-summary::-webkit-details-marker { display: none; }
.job-detail__original-chev { transition: transform 0.2s var(--ease-out); }
.job-detail__original[open] .job-detail__original-chev { transform: rotate(180deg); }
.job-detail__original[open] > .job-text { margin-top: var(--space-3); }
@media (prefers-reduced-motion: reduce) { .job-detail__original-chev { transition: none; } }
.job-detail__original-summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.job-detail__original-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* «ещё N» под списком навыков — настоящая раскрывашка (в отличие от подписи
   «ещё N» на карте разрыва, которая ничего не раскрывает). */
.skill-more { margin-top: var(--space-2); }
.skill-more__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: var(--tap-min);
    list-style: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-soft);
}
.skill-more__toggle::-webkit-details-marker { display: none; }
.skill-more__toggle:hover { color: var(--color-accent); }
.skill-more[open] .skill-more__chev { transform: rotate(180deg); }
.skill-more[open] > .skill-more__toggle { display: none; }
/* Длинное имя навыка не переносится внутри пилюли — пилюля в две строки
   читается двумя навыками. Обрезка — многоточием по ширине ряда. */
.skill-chip { max-width: 100%; }
/* Элемент ряда, в котором лежит чип, сам по умолчанию держит min-content
   (flex-элемент с min-width: auto) — и max-width чипа упирался не в ряд, а
   в собственную ширину: длинный чип выходил за край карточки на телефоне. */
:where(li, span, div):has(> .skill-chip) { min-width: 0; max-width: 100%; }
.skill-chip__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22rem; }
/* Не хватает ширины — первой сжимается подпись, а не имя: «К…» с целой
   подписью «есть в «Обо мне», в резюме не попало» оставлял чип без предмета.
   Коэффициент сжатия подписи на порядки больше, поэтому имя сохраняет себя,
   пока подпись не свернулась в многоточие. */
.skill-chip__badge { flex: 0 1000 auto; min-width: 2.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Вкладки документа (Резюме · Соответствие · Письмо) на телефоне — без
   значков и с плотными полями: три подписи должны помещаться целиком, иначе
   третья обрезалась на «Пис…», и письмо было не найти. */
@media (max-width: 479.98px) {
    .profile-subnav--doc .profile-subnav__icon { display: none; }
    .profile-subnav--doc .profile-subnav__link { padding: 0.45rem 0.7rem; }
}

/* Разделитель контактов документа — ПОСЛЕ элемента, а не перед: при переносе
   точка остаётся в конце строки, а не повисает в начале следующей
   («· alexey@…» на телефоне читалось маркером списка). */
.tdoc__meta span:not(:first-child)::before { content: none; }
.tdoc__meta span:not(:last-child)::after {
    content: "·";
    margin-left: var(--space-2);
    color: var(--target-resume-accent, var(--color-text-muted));
}
/* Лист на телефоне (просмотр, публичная ссылка) уже трёх контактов в строку:
   каждый переносился, и точка висела в конце каждой строки («Алматы ·»).
   Контакты — столбцом, без разделителей. Печать и PDF не затронуты. */
@media (max-width: 479.98px) {
    .tpreview__sheet .tdoc__meta { flex-direction: column; align-items: flex-start; gap: 2px; }
    .tpreview__sheet .tdoc__meta span:not(:last-child)::after { content: none; }
}

/* Аккаунт на одной колонке (< 1024px): колонки растворяются в общий поток,
   и «Опасная зона» уходит в самый конец — посреди страницы, между входом и
   уведомлениями, необратимое действие стояло бы на пути. */
@media (max-width: 1023.98px) {
    .profile-grid { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
    .profile-grid__main,
    .profile-grid__side { display: contents; }
    .profile-grid .surface-card--danger { order: 99; }
}

/* Личный текст профессии — блок того же вида, что группы предпочтений рядом
   (рамка, поверхность, заголовок секции), а не голый h2 браузера: дисплейный
   заголовок без стилей был крупнее всего на странице, хотя это одна из
   семи равных групп. */
/* Только там, где блок — секция среди групп (у него свой заголовок);
   на отдельной странице вводных карты заголовок даёт шапка страницы. */
.user-context:has(> .user-context__title) {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
}
.user-context__title {
    margin: 0 0 var(--space-1);
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.user-context__lead { margin: 0 0 var(--space-3); font-size: 0.875rem; line-height: 1.5; color: var(--color-text-soft); max-width: 65ch; }
/* Заголовки групп предпочтений — читаемым текстом, а не серым мелким
   ярлыком: это шесть смысловых разделов, а не подписи полей. */
.intent-group__title { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
/* Индикатор авто-сохранения личного текста появляется после первого
   сохранения: второй «Сохранено» на странице до всякой правки повторял
   индикатор формы предпочтений. */
.user-context [data-context-status][data-state="idle"] { visibility: hidden; }

/* Шапка на телефоне: надпись раздела скрыта (заголовок и так называет
   страницу), но «?»-объяснение core-понятий остаётся — без него «Профессия»
   и «Обо мне» на мобиле теряли единственное постоянное пояснение. Ряд с
   подсказкой не схлопывается даже без действий. */
@media (max-width: 639px) {
    .page-head__row .page-head__label:has(.concept-hint) { display: flex; }
    .page-head__row .page-head__label:has(.concept-hint) > .section-label { display: none; }
    .page-head__row:has(.concept-hint) { display: flex; }
}

/* Заголовки страниц переносятся сбалансированно: «AI/ | ИИ», «UP | SUSHI»
   на последней строке одним словом читались обрубком. */
.section-display { text-wrap: balance; }

/* Имя документа и отклика на телефоне — в две строки, а не одной с
   многоточием: обрезалось ровно то, чем строки различаются (компания:
   «Системный архитектор — БЮР…»). */
@container doc-list (max-width: 599px) {
    .resume-card__title {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
    /* Строка экрана мест — имя целиком: две похожие строки различаются
       хвостом имени, а здесь по ним решают, что удалить. */
    .resume-card--compact .resume-card__title { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
}
@media (max-width: 639px) {
    .app-card__title {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
}

/* Навыки — ОДНА плита, категории внутри рядами с тонким разделителем.
   Девять отдельных плит, многие с одним-тремя чипами, были стеной коробок,
   где рамка категории весила больше её содержимого. На широком экране
   подпись категории стоит слева от чипов, на узком — над ними. */
.career-skills {
    gap: 0;
    padding: 0 clamp(var(--space-3), 1.5vw, var(--space-4));
    border-radius: var(--radius-lg, 18px);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-sm);
}
.career-skills__cluster {
    padding: var(--space-3) 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.career-skills__cluster + .career-skills__cluster { border-top: 1px solid var(--color-border-soft); }
@media (min-width: 900px) {
    .career-skills__cluster {
        display: grid;
        grid-template-columns: 13rem minmax(0, 1fr);
        column-gap: var(--space-4);
        align-items: start;
    }
    .career-skills__cluster-head { margin: 0; padding-top: 10px; }
}

/* Шаг очереди в широкой оболочке процесса обновления: мера вопроса и поля
   ответа — как в узкой (~60 знаков), рамка плиты — общая для процесса.
   Вступление первого шага — текстом без своей рамки: плашка внутри плиты
   была коробкой в коробке. */
.update-clarify .onboarding-step__title,
.update-clarify__hint,
.update-clarify__advice,
.update-clarify__undo,
.update-clarify__intro-body { max-width: 62ch; }
.update-clarify__intro {
    padding: 0 0 var(--space-4);
    border-radius: 0;
    background: none;
    box-shadow: none;
    border-bottom: 1px solid var(--color-border-soft);
}

/* Зарплатная вилка на узком экране: «От» и «До» в один ряд, валюта ниже.
   В колонке flex-basis поля (8rem) становился ВЫСОТОЙ, и между полями
   стояло по шестьдесят пикселей пустоты. */
@media (max-width: 599px) {
    .comp-slider__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
    .comp-slider__field,
    .comp-slider__field--currency { flex: none; }
    .comp-slider__field--currency { grid-column: 1 / -1; }
}

/* Полоска готовности по верхней кромке карточки варианта снята: она
   дублировала полосу «Требования роли» ниже, а скругление угла обрезало её
   в обрубок, читавшийся дефектом рамки. */
.career-vector__rail { display: none; }

.match-plate__go {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    color: color-mix(in srgb, var(--color-ink-text) 55%, transparent);
    transition: transform var(--dur-fast, .15s) ease, color var(--dur-fast, .15s) ease;
}
.match-plate:hover .match-plate__go,
.match-plate:focus-visible .match-plate__go { color: var(--color-ink-text); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .match-plate:hover .match-plate__go { transform: none; } }

/* Требование, которое уже есть в «Обо мне»: пометка вместо трёх ответов и
   одно действие — пересобрать резюме. */

/* Место работы на узком экране: период и масштаб — одной строкой у левого
   края под названием. Колонка «справа» при переносе вставала под заголовок с
   правым выравниванием, и «Команда: 90» висела со случайным отступом.
   Отрасль не рвётся по дефису («e-» и «commerce» в разных строках). */
@media (max-width: 599px) {
    .career-timeline__meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); flex-basis: 100%; }
}
.career-timeline__industry { white-space: nowrap; }

/* Заголовок карточки аккаунта — тот же уровень, что заголовки плит на
   остальных экранах кабинета (17px, полужирный), а не дисплейные 24px: на
   «Аккаунте» карточки настроек звучали громче заголовка страницы рядом. */
.surface-card__title {
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-2);
}

/* Правило «строка — пункт» — у поля, которое правят сейчас: под каждым из
   десятков полей списков одна и та же подпись повторялась по три раза на
   место работы и превращала форму в стену одинаковых строк. */
.editor-bullets .field__hint { display: none; }
.editor-bullets:focus-within .field__hint { display: block; }

/* Счётчик «5 · 3» в раскрывашке готовности — неразрывно: на 375px он
   переносился на две строки («5 ·» / «3»). */
.target-fit__summary-counts { white-space: nowrap; }

/* «История» письма — системный шеврон, а не треугольник браузера: все
   остальные раскрывашки кабинета рисуют свой значок. */
.letter-history summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.letter-history summary::-webkit-details-marker { display: none; }
.letter-history[open] .letter-history__chev { transform: rotate(180deg); }

/* Точка внимания на активной вкладке не нужна: человек уже здесь, и то,
   что требует внимания, видно на самой странице. */
.profile-subnav__link--active .profile-subnav__badge,
.profile-subnav__link[aria-current="page"] .profile-subnav__badge { display: none; }

/* «?» на телефоне — в правом верхнем углу шапки, рядом с заголовком, а не
   отдельной строкой под лидом (на семи экранах она висела одна посреди
   воздуха). Ряд растворяется, чтобы подсказка встала в угол шапки, а
   действия сохранили своё место под заголовком. */
@media (max-width: 639px) {
    .page-head:has(.page-head__label .concept-hint) { position: relative; }
    .page-head__row:has(.concept-hint) { display: contents; }
    .page-head__row .page-head__label:has(.concept-hint) { position: absolute; top: 0; right: 0; }
    .page-head:has(.page-head__label .concept-hint) > .section-display { padding-right: 44px; }
    .page-head:has(.page-head__label .concept-hint) .page-head__actions { order: 3; margin-top: var(--space-3); }
}

/* Вердикт под кольцом совпадения на широком экране — по центру, как кольцо:
   в две строки, выровненный влево, он отрывался от числа, к которому
   относится. На узком экране кольцо и вердикт стоят рядом, там — влево. */
@media (min-width: 900px) { .job-detail__score-verdict { text-align: center; text-wrap: balance; } }

/* Три ответа о требовании на телефоне — сеткой, а не переносом 2+1, где
   третья кнопка висела одна: «Я это умею» во всю ширину, два других — рядом
   под ней. */

/* Превью вопросов на телефоне — строки через разделитель, а не карточки в
   плите: рамка внутри рамки съедала по 32px ширины, и колонка текста вопроса
   сжималась до 230px. */
@media (max-width: 599px) {
    .open-questions-stack { gap: 0; }
    .open-questions-stack__item { border: 0; border-radius: 0; background: none; }
    .open-questions-stack__item + .open-questions-stack__item { border-top: 1px solid var(--color-border-soft); }
    .open-questions-stack__link { padding: var(--space-3) 0; }
}

/* Письмо отстало от резюме: кнопка пересборки в заметке нужна там, где рейл
   уходит под лист (узкий экран). На широком та же кнопка стоит в рейле
   справа, и вторая такая же в заметке над листом была дублем. */
@media (min-width: 1024px) {
    .letter-stale .stale-notice .btn,
    .letter-stale .stale-notice__meta,
    .letter-answers-changed .btn,
    .letter-answers-changed .alert__meta { display: none; }
}

/* «уровень?» на навыке без уровня — тихой подписью, а не акцентной ссылкой:
   на вкладке с двумя десятками таких навыков синий повтор шумел громче самих
   навыков, а приглашение поставить уровень уже сказано строкой над списком. */
.skill-chip__set-hint { color: var(--color-text-muted); font-weight: 500; }
.skill-chip__face:hover .skill-chip__set-hint { color: var(--color-accent); }

/* Метки происхождения группы предпочтений — одна пилюля двух тонов:
   нейтральная «из ваших целей» стояла фоном карточки и читалась голым
   текстом рядом с акцентной пилюлей «только для этой профессии». Не
   переносятся — пилюля в две строки читается двумя метками. */
.intent-group__badge {
    background: rgba(118, 118, 128, 0.12);
    border-radius: 999px;
    white-space: nowrap;
}

/* Пропущенный необязательный этап воронки (ui_step_progress, state
   skipped): пунктирный кружок и тихая подпись — путь прошёл мимо, а не
   «ещё впереди». Линия за ним — цвета пройденного пути. */
.step-progress__item--skipped .step-progress__bullet { border-style: dashed; background: transparent; color: var(--color-text-muted); }
.step-progress__item--skipped .step-progress__label { color: var(--color-text-muted); font-weight: 500; }
@media (min-width: 768px) {
    .step-progress__item--skipped:not(:last-child)::after { background: var(--color-accent); }
}

/* Обоснование роли в «Кем ещё прочитают» на телефоне — три строки: пять
   строк объяснения на каждую из трёх карточек делали блок длиннее экрана, а
   ответ на вопрос «кем ещё» — в названии роли и проценте, не в абзаце. */

/* Редактор резюме на широком экране — модель «страница скроллит документ,
   колонка правки липнет». Прежняя рамка вьюпорта (height: 100dvh +
   overflow: hidden на .resume-editor) осталась от модели, где обе колонки
   скроллились внутри себя, и после перехода листа на полную высоту резала
   обе колонки: низ формы («Сертификаты») и низ резюме были недостижимы, а
   плита формы обрывалась краем окна посреди поля. Теперь лист растит
   страницу, колонка правки и панель оформления липнут сверху и скроллятся
   внутри своей высоты, с воздухом под последней секцией. */
@media (min-width: 1024px) {
    .resume-editor { height: auto; overflow: visible; }
    .resume-editor__form-col { padding-bottom: var(--space-6); overscroll-behavior: auto; }
    /* Общий низ: липкая плита формы в конце прокрутки упирается в низ ряда
       колонок, а не листа. Воздух под листом жил внутри колонки превью и
       делал ряд выше листа на 32px — плита кончалась ниже листа, и два
       блока обрывались на разной высоте. Воздух — под рядом целиком. */
    .resume-editor__preview-doc { padding-bottom: 0; }
    .resume-editor__grid { margin-bottom: var(--space-6); }
    .customize-panel {
        position: sticky;
        top: var(--space-4);
        align-self: flex-start;
        max-height: calc(100dvh - 2 * var(--space-4));
    }
}

.skill-chip__action-form { margin: 0; }

/* Точки развития и «Просят чаще всего» — навыки-чипы рядом, а не строки
   друг под другом: чип точки встаёт в общий ряд, разделители строк у
   чипов не рисуются. */
.growth-points__list:has(> .growth-point--chip) { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.growth-point--chip { border: 0; padding: 0; }
.market-gaps__chips { margin-top: var(--space-3); }
.growth-points__list:has(> .growth-point--chip) > .growth-point:not(.growth-point--chip) { flex-basis: 100%; }

/* Профессия под роль варианта (концепт §5.10) — подблок карточки решения:
   отделён волоском, а не своей рамкой — две рамки внутри одной карточки
   читались бы двумя решениями. */
.vector-lens {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}
.vector-lens__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.vector-lens__form { margin: 0; }
.vector-lens__note {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Сделанный шаг выбранного пути — свёрнутая панель. Серая галочка встаёт
   на место номера (тот же круг 1.75rem, та же колонка), название приглушено,
   справа дата и шеврон. Раскрытие возвращает содержание шага. Полная
   карточка закрытого шага отодвигала следующий на экран вниз, а строка без
   раскрытия прятала сделанное насовсем. */
.vector-steps__item--done {
    padding: 0;
    background: transparent;
    border-color: var(--color-border-soft);
}
.vector-steps__item--done::before { content: none; }
.vector-steps__done > summary {
    list-style: none;
    cursor: pointer;
}
.vector-steps__done > summary::-webkit-details-marker { display: none; }
.vector-steps__done-row {
    position: relative;
    display: flex;
    /* По первой строке, а не по центру блока: на телефоне название
       переносится на три-четыре строки, и центрованные галочка с датой
       повисали посреди текста. */
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--tap-min);
    padding: calc(var(--space-2) + 0.75rem) var(--space-4) calc(var(--space-2) + 0.5rem) 3.25rem;
    line-height: 1.35;
    border-radius: inherit;
}
.vector-steps__done-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.vector-steps__done-mark {
    position: absolute;
    left: var(--space-4);
    top: calc(var(--space-2) + 0.5rem);
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    /* Сделанный шаг — зелёный круг с белой галочкой, как в «Ключевых
       шагах» и по всему продукту (29.10). */
    background: var(--color-sage);
    border: 0;
    color: var(--color-surface);
}
.vector-steps__done-mark .icon { width: 14px; height: 14px; stroke-width: 3; }
.vector-steps__done-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    color: var(--color-text-muted);
    transition: color var(--dur-base) var(--ease-out);
}
.vector-steps__done-row:hover .vector-steps__done-title,
.vector-steps__done[open] .vector-steps__done-title { color: var(--color-text); }
.vector-steps__done-meta {
    flex: none;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* На телефоне дата — строкой под названием: справа она забирала треть
   ширины, и название сделанного шага вытягивалось в четыре строки. */
@media (max-width: 599px) {
    .vector-steps__done-row { flex-wrap: wrap; row-gap: 2px; }
    .vector-steps__done-title { flex: 1 1 0; }
    .vector-steps__done-meta { order: 3; flex-basis: 100%; }
}
.vector-steps__done-chev {
    flex: none;
    color: var(--color-text-muted);
    transition: transform var(--dur-base) var(--ease-out);
}
.vector-steps__done[open] .vector-steps__done-chev { transform: rotate(180deg); }
/* Группа «Сделано · N» (05.11): сделанные шаги — плотными строками одной
   карточкой, а не карточкой на шаг. Пять сделанных карточками занимали
   экран телефона, и план читался списком прошлых дел. Название — в одну
   строку с обрезкой, раскрытие возвращает его целиком вместе с содержанием. */
.vector-steps--compact {
    gap: 0;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
}
.vector-steps--compact .vector-steps__item--done { border: 0; border-radius: 0; }
.vector-steps--compact .vector-steps__item--done + .vector-steps__item--done { border-top: 1px solid var(--color-border-soft); }
.vector-steps--compact .vector-steps__done-row {
    align-items: center;
    padding: var(--space-2) var(--space-4) var(--space-2) 2.75rem;
}
.vector-steps--compact .vector-steps__done-mark {
    top: calc(50% - 0.625rem);
    width: 1.25rem;
    height: 1.25rem;
}
.vector-steps--compact .vector-steps__done-mark .icon { width: 12px; height: 12px; }
.vector-steps--compact .vector-steps__done-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
}
.vector-steps--compact .vector-steps__done[open] .vector-steps__done-title { white-space: normal; }
@media (max-width: 599px) {
    .vector-steps--compact .vector-steps__done-row { flex-wrap: nowrap; }
    .vector-steps--compact .vector-steps__done-meta { order: 0; flex-basis: auto; }
    /* На телефоне название — до двух строк: в одну строку от него
       оставалось два слова. */
    .vector-steps--compact .vector-steps__done-title {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .vector-steps--compact .vector-steps__done[open] .vector-steps__done-title { display: block; }
}
.vector-steps__done-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-3) 3.25rem;
}
/* Дальний шаг выбранного пути — та же свёрнутая панель, что у сделанного,
   но номер остаётся номером (счётчик на li), а название — обычного цвета:
   это работа впереди, а не архив. В раскрытии название не повторяется. */
.vector-steps__item--later { padding: 0; }
.vector-steps__item--later::before { top: calc(var(--space-2) + 0.5rem); }
.vector-steps__later > summary { list-style: none; cursor: pointer; }
.vector-steps__later > summary::-webkit-details-marker { display: none; }
.vector-steps__later-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--tap-min);
    padding: calc(var(--space-2) + 0.75rem) var(--space-4) calc(var(--space-2) + 0.5rem) 3.25rem;
    line-height: 1.35;
    border-radius: inherit;
}
.vector-steps__later-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.vector-steps__later-title { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.vector-steps__later[open] .vector-steps__done-chev { transform: rotate(180deg); }
.vector-steps__later-body { padding: 0 var(--space-4) var(--space-3) 3.25rem; }
@media (max-width: 599px) {
    .vector-steps__later-body { padding-left: var(--space-4); }
}
.vector-steps__later-body .vector-steps__title { display: none; }

.vector-steps__recorded {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-sage-deep);
}

/* «Ещё N» в разрыве до роли — раскрывашка остальных требований: та же тихая
   подпись, но с шевроном и курсором, и раскрытый список ложится под ней. */
.gap-map__more > summary {
    list-style: none;
    cursor: pointer;
    gap: var(--space-1);
    min-height: var(--tap-min);
    color: var(--color-accent);
}
.gap-map__more > summary::-webkit-details-marker { display: none; }
.gap-map__more > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.gap-map__more[open] > summary .gap-map__chev { transform: rotate(180deg); }
.gap-map__more > .gap-map__chips { margin-top: var(--space-2); }

/* Кнопка «Сохранить» у статуса автосохранения (ui_saved_indicator saveButton).
   Активна — обычная главная кнопка: есть что сохранить. Неактивна — тихая,
   без заливки: залитая бледная кнопка читалась нажимаемой, а нажимать нечего. */
.saved-indicator + .saved-indicator__save { margin-inline-start: var(--space-2); }
.saved-indicator__save:disabled,
.saved-indicator__save[aria-disabled="true"],
.user-context__save:disabled,
.user-context__save[aria-disabled="true"] {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border-soft);
    box-shadow: none;
    opacity: 1;
}

/* ===================================================================
   Разбор соответствия (/app/resumes/{id}/match), редизайн 06.10.
   Счёт — справа в карточке вердикта крупной цифрой и полосой долей; заголовки
   разделов — заголовочным весом, а не серой подписью: прежде «Обязательные
   требования» весили меньше названия каждой карточки под ними.
   =================================================================== */
.cov-verdict:not(.cov-verdict--compact) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-5);
}
.cov-verdict__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cov-verdict__score {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
@media (min-width: 768px) {
    .cov-verdict:not(.cov-verdict--compact) {
        grid-template-columns: minmax(0, 1fr) 15rem;
        grid-template-areas: "head score" "text score";
        /* Счёт выше левой колонки: без 1fr его высота делилась поровну между
           строками, и под заголовком вердикта вставала пустая полоса. */
        grid-template-rows: auto 1fr;
        column-gap: var(--space-6);
        align-items: start;
    }
    .cov-verdict:not(.cov-verdict--compact) > .cov-verdict__head { grid-area: head; }
    .cov-verdict:not(.cov-verdict--compact) > .cov-verdict__text { grid-area: text; }
    .cov-verdict__score {
        grid-area: score;
        padding: 0 0 0 var(--space-6);
        border-top: 0;
        border-left: 1px solid var(--color-border-soft);
    }
}
.cov-verdict:not(.cov-verdict--compact) .cov-verdict__title { font-size: 1.125rem; letter-spacing: -0.01em; }
.cov-verdict:not(.cov-verdict--compact) .cov-verdict__mark { height: calc(1.125rem * 1.35); }
.cov-verdict__score .cov-verdict__metric-value { color: var(--color-text); }

/* Полоса долей: сегмент на требование, в порядке «закрыто → частично → нет». */
.cov-meter { display: flex; gap: 3px; height: 8px; }
.cov-meter__seg { flex: 1 1 0; border-radius: 2px; background: var(--color-border); }
.cov-meter__seg--covered { background: rgb(var(--color-sage-rgb)); }
.cov-meter__seg--partial { background: rgb(var(--color-amber-rgb)); }
/* Отвечено человеком, но в документе ещё нет — акцент, а не «закрыто»:
   в резюме ответ попадёт после обновления. */
.cov-meter__seg--answered { background: rgba(var(--color-accent-rgb), 0.55); }
.cov-meter__legend {
    margin: 0; display: flex; flex-wrap: wrap; gap: 2px var(--space-3);
    font-size: 0.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.cov-meter__legend:empty { display: none; }
.cov-meter__key { display: inline-flex; align-items: center; gap: 6px; }
.cov-meter__key::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--color-border); }
.cov-meter__key--partial::before { background: rgb(var(--color-amber-rgb)); }
.cov-meter__key--answered::before { background: rgba(var(--color-accent-rgb), 0.55); }

/* План «Что сделать дальше» под вердиктом (ui_coverage_plan). Три шага на
   рельсе: на телефоне столбиком с вертикальной линией, с 768px — в ряд с
   горизонтальной. Ровно один текущий шаг: акцентный номер и кнопка; сделанное
   — галочкой тише, ненужное (idle) — пунктирным номером. */
/* Оболочка — канон информационной панели (30.10): заголовок над карточкой,
   карточка — сам список шагов с рамкой 1px и отступом 16px, без тени, как
   «Ключевые шаги» и «Ваш путь». Прежде заголовок жил внутри карточки с
   тенью, а на странице профессии тот же план стоял под заголовком страницы
   — одна вещь двумя узорами. */
.cov-plan { display: flex; flex-direction: column; gap: var(--space-3); }
.cov-plan__title {
    margin: 0;
    font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text);
}

/* Цитата строки резюме и действие на ней: «Переписать эту строку под
   вакансию» живёт на самой строке (закон 8), а не третьим ответом рядом с
   «Да» и «Нет». */
.cov-req__quote { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.cov-req__quote-text { margin: 0; }
.cov-req__rewrite-row { margin: var(--space-2) 0 0; }
.cov-req__rewrite {
    display: inline-flex; align-items: center; gap: 6px; text-align: left;
    min-height: var(--tap-min);
    margin-block: calc(-1 * var(--space-2));
    color: var(--color-accent);
    font-size: 0.875rem; font-weight: 600; text-decoration: none;
}
.cov-req__rewrite .icon { flex: none; }
.cov-req__rewrite:hover { text-decoration: underline; text-underline-offset: 3px; }
.cov-req__rewrite:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Мастер обязательных требований (ui_coverage_wizard): шапка «k из N» с
   полосой и навигацией, одна карточка, список всех открытых под раскрытием.
   Полоса — сегмент на требование, как полоса долей в вердикте. */
.cov-wizard { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); scroll-margin-top: calc(var(--tap-min) + var(--space-8)); }
.cov-wizard__head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: var(--space-2) var(--space-3);
}
.cov-wizard__count {
    margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--color-text);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Фокус ставит skill-chip.js после подмены шага (tabindex=-1) — чтобы
   скринридер прочёл «Требование 3 из 9»; рамка вокруг заголовка, в который
   никто не переходил клавишей, читалась как выделенное поле. */
.cov-wizard__count:focus { outline: none; }
/* На телефоне «Назад» — одной стрелкой (подпись остаётся для чтения с
   экрана): три подписи в строке не помещались, и счётчик ломался надвое. */
@media (max-width: 479.98px) {
    .cov-wizard__nav > .btn:first-child:not(:last-child) { min-width: var(--tap-min); justify-content: center; padding-inline: 0; }
    .cov-wizard__nav > .btn:first-child:not(:last-child) > span {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}
/* Навигация — в строке счётчика, справа (порядок в разметке: счётчик,
   полоса, навигация — для чтения с экрана «k из N» идёт первым). */
.cov-wizard__nav { grid-row: 1; grid-column: 2; display: flex; gap: var(--space-1); justify-self: end; margin-block: calc(-1 * var(--space-2)); }
.cov-wizard__bar { grid-column: 1 / -1; display: flex; gap: 3px; height: 4px; }
.cov-wizard__seg { flex: 1 1 0; border-radius: 2px; background: var(--color-border); }
.cov-wizard__seg--done { background: rgb(var(--color-sage-rgb)); }
.cov-wizard__seg--current { background: var(--color-accent); }
.cov-wizard__all { margin-top: var(--space-1); }
.cov-wizard__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; }
.cov-wizard__item {
    display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: baseline;
    gap: var(--space-2); min-height: var(--tap-min); padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md); color: var(--color-text); text-decoration: none;
    font-size: 0.875rem; line-height: 1.4;
}
.cov-wizard__item:hover { background: var(--color-bg-soft); }
.cov-wizard__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cov-wizard__item--current { background: rgba(var(--color-accent-rgb), 0.08); font-weight: 600; }
.cov-wizard__item-num { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.cov-wizard__item-status { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.cov-wizard__item-status--partial { color: rgb(var(--color-amber-rgb)); }
.cov-wizard__done {
    margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
    background: rgba(var(--color-sage-rgb), 0.1); color: var(--color-text); font-size: 0.9375rem;
}
.cov-wizard__done > p { margin: 0; display: flex; align-items: flex-start; gap: var(--space-2); }
.cov-wizard__done .icon { color: rgb(var(--color-sage-rgb)); flex: none; margin-top: 2px; }

/* Готовый ответ «Да»: навыки из фразы требования отметками (уже
   отмеченными) и пометка тех, что уже есть в карьере. */
.cov-req__offers { list-style: none; margin: calc(-1 * var(--space-2)) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.cov-req__offer-have {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2);
    min-height: var(--tap-min);
    font-size: 0.9375rem; color: var(--color-text);
}
.cov-req__offer-have > .icon { color: rgb(var(--color-sage-rgb)); }
.cov-req__offer-note { font-size: 0.8125rem; color: var(--color-text-muted); white-space: nowrap; }
.cov-req__panel .chip-radio { margin: 0 0 var(--space-1); }
/* Ширина панели — по содержимому формы, а не по карточке: панель с ролями
   растягивалась на всю карточку, навыки — на треть, и две панели одного
   ответа выглядели разными компонентами. */
.cov-req__panel { max-width: 44rem; }
.cov-req__panel .textarea { background: var(--color-surface); }

/* Задача из разбора над формой редактора (ui_requirement_task). Акцентная
   левая грань — тот же язык, что у подсветки строки в форме: панель и строка
   читаются одной задачей. */
.req-task {
    display: flex; flex-direction: column; gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    box-shadow: var(--shadow-sm);
    /* Редактор открывается прокруткой к панели: на телефоне над ней липкая
       шапка кабинета, и без отступа заголовок задачи уходил под неё. */
    scroll-margin-top: calc(var(--tap-min) + var(--space-8));
}
@media (min-width: 1024px) { .req-task { scroll-margin-top: var(--space-4); } }
.req-task__eyebrow {
    margin: 0; display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8125rem; font-weight: 600; color: var(--color-accent);
}
.req-task__title { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--color-text); }
.req-task__facts { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.req-task__fact { display: flex; flex-direction: column; gap: 2px; }
.req-task__fact dt { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); }
.req-task__fact dd { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text); }
.req-task__quote { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.req-task__how { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-muted); }
.req-task__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.req-task__actions form { margin: 0; }
.req-task__error { margin: 0; font-size: 0.8125rem; color: var(--color-danger); }

/* Заголовки разделов разбора — тот же вес, что у разделов Обзора. */
.cov-block__title {
    font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text);
}
/* Счёт названного — тихой подписью в строке заголовка блока. */
.cov-block__count { margin-left: var(--space-2); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.cov-block { gap: var(--space-1); }
.cov-block__intro { margin-bottom: 0; }
.cov-block__legend {
    margin: 0 0 var(--space-2); font-size: 0.8125rem; line-height: 1.5;
    color: var(--color-text-muted); max-width: 68ch;
}
.cov-block__intro:has(+ .cov-reqs), .cov-block__intro:has(+ .cov-skills) { margin-bottom: var(--space-2); }
.cov-closed__label { margin-top: var(--space-5); }

/* Карточка требования: просторнее отступ. Колонки значка у карточки больше
   нет (значок — в надзаголовке), поэтому ответы и так во всю ширину. */
.cov-req:not(.cov-req--compact) { padding: var(--space-4); }
@media (max-width: 639px) {
    /* 12px поля вместо 16: «Проверить резюме» и «Не про меня» не входили в
       одну строку на 5px, и каждое действие вставало своим рядом. */
    .cov-req:not(.cov-req--compact) { padding: var(--space-3); }
    .cov-req__prompt { flex-basis: 100%; }
    .cov-req__answer { padding: 0 var(--space-3); min-height: 44px; }
}
/* Закрытые требования — одной белой плитой со строками внутри: на голом фоне
   страницы список выпадал из ритма карточек над ним и читался черновиком. */
.cov-reqs--compact {
    padding: var(--space-1) var(--space-4);
    background: var(--color-surface-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.cov-reqs--compact .cov-req--compact { padding: var(--space-3) 0; border-bottom-color: var(--color-border-soft); }
/* Галочка — на первой строке требования, а не по центру трёх строк. */
.cov-req--compact { align-items: start; }
.cov-req--compact .cov-req__mark { margin-top: 1px; }
/* Раздельный ряд вкладок на телефоне: правая таблетка — одним значком (подпись
   остаётся для скринридера), у рабочих вкладок значки уходят. Иначе на 375
   правая таблетка съедала ширину, и третья рабочая вкладка («Предпочтения»)
   уезжала за край без намёка, что она там есть. */
@media (max-width: 639px) {
    .profile-subnav--split > .profile-subnav__list--trailing .profile-subnav__label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .profile-subnav--split > .profile-subnav__list--trailing .profile-subnav__link {
        min-width: 44px; min-height: 44px; justify-content: center; padding-inline: 0.6rem;
    }
    .profile-subnav--split > .profile-subnav__list:not(.profile-subnav__list--trailing) .profile-subnav__icon { display: none; }
    .profile-subnav--split > .profile-subnav__list:not(.profile-subnav__list--trailing) .profile-subnav__link { padding-inline: 0.75rem; }
}

/* Разделы меню (30.10): всегда раскрыты — подпись группы и строки страниц
   со своими значками. Подпись — общий `.nav-list__group` (им же подписаны
   группы меню админки), строки — обычные `.nav-list__item`, тех же отступа,
   значка и подсветки, что «Обзор» над ними: строка раздела ничем не хуже
   строки верхнего уровня, и выравнивание одно на всю колонку. */
.app-sidebar .nav-group { margin-top: var(--space-3); }
.app-sidebar .nav-group__list { margin: 0; }
/* Служебная строка (админка) после разделов — с тем же зазором, что группа:
   без него она читалась пятой строкой «Карьеры». */
.app-sidebar .nav-group + .nav-list__item { margin-top: var(--space-3); }
.app-sidebar .nav-list__group {
    margin: 0 0 2px;
    padding: 0 0.75rem;
    color: var(--sb-mute);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
/* Счётчик нового (неразобранная подборка) — сплошным акцентом: это не
   «висит», а «пришло». Нейтральный общий `.nav-list__count` остаётся у
   уведомлений. */
.nav-list__count--fresh { background: var(--color-accent); color: #fff; font-weight: 600; }
/* Счётчик непрочитанных уведомлений в меню — таблеткой, как бейдж
   колокольчика мобильной строки. */
.nav-list__count[data-bell-badge] { border-radius: var(--radius-pill); }
.app-sidebar .nav-list__count--fresh { background: var(--sb-accent-strong); }

/* Нижняя панель телефона: счётчик раздела — у значка. */
.bottom-nav__item { position: relative; }
.bottom-nav__count {
    position: absolute;
    top: 4px;
    left: 50%;
    margin-left: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Строки открытого раздела вкладками вверху страницы — только телефон:
   постоянного меню там нет, а нижняя панель несёт лишь разделы. С 992px
   рядом боковое меню с теми же строками. */
.section-tabs { margin: 0 0 var(--space-4); }
.section-tabs .section-tabs__list {
    /* По ширине вкладок, а не строки: на планшете подложка во всю ширину под
       две вкладки оставляла справа пустую дорожку. */
    display: inline-flex;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: var(--radius-md);
    /* Та же подложка сегментов, что у вкладок профессии и хаба: два ряда
       вкладок в кабинете не должны выглядеть разными предметами. */
    background: rgba(118, 118, 128, 0.10);
}
.section-tabs .section-tabs__list::-webkit-scrollbar { display: none; }
.section-tabs .nav-list__item { flex: 0 0 auto; }
.section-tabs .nav-list__item a { min-height: 40px; padding: 0.4rem 0.85rem; border-radius: 9px; white-space: nowrap; gap: 6px; font-size: 0.875rem; color: var(--color-text-soft); }
.section-tabs .nav-list__item a[aria-current="page"] {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}
@media (min-width: 992px) {
    .section-tabs { display: none; }
    /* Витрина показывает вкладки и на широком экране (там они иначе скрыты). */
    .sg-section-tabs .section-tabs { display: block; max-width: 420px; }
}

/* Полка «Резюме» в карточке профессии — вложенная поверхность у нижнего края
   плитки. Прижата книзу (margin-top: auto), поэтому в ряду карточек полки
   стоят на одной линии, сколько бы строк ни было выше; подвал с метками идёт
   над ней. Своя ссылка поверх растянутой ссылки имени (z-index). */
.profession-card__foot { margin-top: 0; }
.profession-card__shelf {
    position: relative;
    z-index: 2;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    color: var(--color-text);
    text-decoration: none;
    transition: background 150ms ease;
}
.profession-card__shelf:hover { background: rgba(118, 118, 128, 0.12); }
.profession-card__shelf:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.profession-card__shelf-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-sm);
    color: var(--color-accent);
}
.profession-card__shelf-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
/* Как папка в Files: имя места — главное, число в нём — вторым. */
.profession-card__shelf-label { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.profession-card__shelf-value { font-size: 0.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.profession-card__shelf--empty .profession-card__shelf-icon { color: var(--color-text-muted); }
.profession-card__shelf-go {
    margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: none;
    font-size: 0.875rem; font-weight: 600; color: var(--color-accent);
}
.profession-card__shelf:not(.profession-card__shelf--empty) .profession-card__shelf-go { color: var(--color-text-muted); }
:root[data-theme="dark"] .profession-card__shelf { background: rgba(255, 255, 255, 0.05); }
/* Узкая карточка (две колонки на планшете, витрина): «Пока нет» и «+ Собрать»
   сталкивались. Полка меряет ширину самой карточки, а не окна: от «Собрать»
   остаётся плюс, подпись числа не переносится. */
.profession-card { container-type: inline-size; }
.profession-card__shelf-text { flex: 1 1 auto; }
.profession-card__shelf-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 280px) {
    .profession-card__shelf { gap: var(--space-2); padding-inline: var(--space-2); }
    .profession-card__shelf-go > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* ===================================================================
   Плита — главный объект экрана (06.10). Тот же язык, что готовность на
   Обзоре (ui_match_plate): тёмная сцена знака Match Point, светлый набор.
   Правило: плита ОДНА на экран и только у объекта, вокруг которого экран
   работает (Обзор — готовность к роли, Профессии — основная профессия).
   Две плиты на экране — уже не акцент, а тема.
   =================================================================== */
.profession-card--hero {
    --hero-text: #EEF0FF;
    --hero-soft: #A7ACC8;
    --hero-mute: #7E84A6;
    overflow: hidden;
    border-color: transparent;
    color: var(--hero-text);
    background:
        radial-gradient(340px 240px at 88% 0%, rgba(124, 92, 255, 0.34), transparent 70%),
        radial-gradient(280px 220px at 0% 100%, rgba(45, 212, 191, 0.12), transparent 70%),
        var(--brand-tile);
}
/* Без каймы «активной» карточки: у плиты сцена говорит сама, как на Обзоре. */
.profession-card.profession-card--hero,
.profession-card.profession-card--hero.is-active { border-color: transparent; box-shadow: var(--shadow-md); }
.profession-card--hero:hover { box-shadow: var(--shadow-lg); }
.profession-card__mark {
    /* Ниже кнопки ⋯: светящаяся точка знака под меню спорила с ним за взгляд. */
    position: absolute; right: -0.75rem; top: 2.75rem; width: 8.5rem; height: auto;
    pointer-events: none; opacity: 0.9;
}
/* Содержимое — над знаком. */
.profession-card--hero > :not(.profession-card__mark):not(dialog) { position: relative; }
.profession-card--hero .profession-card__facts { z-index: 1; }
/* Шапка — выше цифр, действий и полки резюме: в ней живёт ⋯-меню, а её
   z-index — контекст наложения меню. На одном уровне с цифрами (1) открытое
   меню оказывалось под «86%» и «Откликами», которые идут в DOM позже, — и на
   десктопе, и нижним листом на телефоне. */
.profession-card--hero .profession-card__head { z-index: 3; }
/* Открытое меню — над нижней навигацией (z 50): лист на телефоне живёт в
   контексте шапки, и с её тройкой «Убрать в архив» уходил под навигацию. */
.profession-card--hero .profession-card__head:has(.dropdown__panel:not([hidden])) { z-index: 70; }
.profession-card--hero .profession-card__link,
.profession-card--hero .profession-card__name { color: var(--hero-text); }
.profession-card--hero .profession-card__go,
.profession-card--hero .profession-card__role { color: var(--hero-soft); }
.profession-card--hero .profession-card__state { color: var(--hero-soft); }
.profession-card--hero .profession-card__menu { color: var(--hero-soft); }
.profession-card--hero .profession-card__menu:hover { color: var(--hero-text); background: rgba(255, 255, 255, 0.08); }
.profession-card--hero .profession-card__fact dt,
.profession-card--hero .profession-card__fact-note,
.profession-card--hero .profession-card__fact-empty,
.profession-card--hero .profession-card__fact-of { color: var(--hero-soft); }
.profession-card--hero .profession-card__fact dd { color: var(--hero-text); }
/* Число готовности — белым, как на плите Обзора: лента-градиент на тёмном
   теряла контраст. */
.profession-card--hero .profession-card__fact:nth-child(3) b {
    background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--hero-text);
}
.profession-card--hero .profession-card__fact-warn { color: #F5C26B; }
.profession-card--hero .profession-card__tag {
    border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: var(--hero-text);
}
.profession-card--hero .profession-card__tag--active { border-color: rgba(95, 184, 232, 0.4); background: rgba(95, 184, 232, 0.12); color: #9FD6F2; }
.profession-card--hero .profession-card__resumes { color: var(--hero-soft); }
.profession-card--hero .profession-card__resumes:hover { color: var(--hero-text); }
.profession-card--hero .profession-card__shelf { background: rgba(255, 255, 255, 0.07); color: var(--hero-text); }
.profession-card--hero .profession-card__shelf:hover { background: rgba(255, 255, 255, 0.11); }
.profession-card--hero .profession-card__shelf-icon { background: rgba(255, 255, 255, 0.1); box-shadow: none; color: #9FD6F2; }
.profession-card--hero .profession-card__shelf-label { color: var(--hero-text); }
.profession-card--hero .profession-card__shelf-value,
.profession-card--hero .profession-card__shelf-go { color: var(--hero-soft); }
.profession-card--hero .profession-card__shelf--empty .profession-card__shelf-go { color: #9FD6F2; }
.profession-card--hero:focus-within { outline: 2px solid #5FB8E8; outline-offset: 3px; }

/* Выбранный путь на карте — плита (06.10), см. «Плита — главный объект
   экрана» выше. Тёмная сцена знака; светлый набор; метки и кнопка — стекло. */
.career-vector--selected {
    --hero-text: #EEF0FF;
    --hero-soft: #A7ACC8;
    border-color: transparent;
    color: var(--hero-text);
    background:
        radial-gradient(360px 240px at 92% 0%, rgba(124, 92, 255, 0.34), transparent 70%),
        radial-gradient(300px 220px at 0% 100%, rgba(45, 212, 191, 0.12), transparent 70%),
        var(--brand-tile);
    box-shadow: var(--shadow-md);
}
.career-vector--selected:hover,
.career-vector--selected:focus-within { border-color: transparent; box-shadow: var(--shadow-lg); }
.career-vector--selected:hover .career-vector__title-link { color: var(--hero-text); }
.career-vector--selected .career-vector__title,
.career-vector--selected .career-vector__title-link,
.career-vector--selected .career-vector__gap,
.career-vector--selected .career-vector__gap-count,
.career-vector--selected .career-vector__changes { color: var(--hero-text); }
.career-vector--selected .career-vector__role,
.career-vector--selected .career-vector__against,
.career-vector--selected .career-vector__echo,
.career-vector--selected .career-vector__excludes,
.career-vector--selected .career-vector__unmeasured,
.career-vector--selected .career-vector__readiness-label,
.career-vector--selected .career-vector__gap .icon,
.career-vector--selected .career-vector__excludes .icon { color: var(--hero-soft); }
.career-vector--selected .career-vector__echo,
.career-vector--selected .career-vector__readiness { border-top-color: rgba(255, 255, 255, 0.1); }
.career-vector--selected .career-vector__gap-bar { background: rgba(255, 255, 255, 0.12); }
.career-vector--selected .career-vector__gap-fill { background: #2DD4BF; }
/* Метка «Выбранный путь» на плите — светлая пилюля: синяя заливка на тёмном
   читалась кнопкой. */
.career-vector--selected .career-vector__chosen { background: rgba(95, 184, 232, 0.16); color: #9FD6F2; box-shadow: inset 0 0 0 1px rgba(95, 184, 232, 0.4); }
.career-vector--selected .career-vector__tag { border-color: rgba(255, 255, 255, 0.18); color: var(--hero-soft); background: transparent; }
.career-vector--selected .career-vector__rev { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: var(--hero-text); }
.career-vector--selected .career-vector__rev--easy .icon { color: #5EE0A8; }
.career-vector--selected .career-vector__rev--hard .icon { color: #F5C26B; }
.career-vector--selected .career-vector__rev--one-way .icon { color: #FF8A8A; }
.career-vector--selected .career-vector__open {
    background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: var(--hero-text);
}
.career-vector--selected .career-vector__open:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); color: var(--hero-text); }

/* Лид ленты с переключателем профессии (ui_jobs_lens, 06.10):
   «39 вакансий для [CTO ⌄] · 33 новых». Переключатель — само имя профессии,
   отдельной строки под него нет. Имя — тем же кеглем, что лид, весом и
   акцентом: это и ответ «для чего подбор», и кнопка. */
.page-head__intro--control { margin-top: var(--space-1); }
.jobs-lens {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.35em;
    font-size: inherit;
    color: var(--color-text-soft);
}
/* Имя не сжимается до «C…» в строке лида: обрезается только длинное, по
   собственному потолку. */
.jobs-lens__name { font-weight: 600; color: var(--color-text); max-width: min(24rem, 72vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs-lens__menu { position: relative; display: inline-flex; flex: none; max-width: 100%; }
.jobs-lens__toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    /* Зона нажатия 44px не раздвигает строку лида: отрицательные поля
       только по вертикали. По горизонтали они занижали ширину обёртки, и имя
       сжималось до «С…». */
    min-height: 44px;
    margin: -10px 0;
    padding: 0 4px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.jobs-lens__toggle .jobs-lens__name {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: rgba(var(--color-accent-rgb), 0.35);
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
}
.jobs-lens__chev { flex: none; color: var(--color-accent); transition: transform 160ms ease; }
.jobs-lens__toggle[aria-expanded="true"] .jobs-lens__chev { transform: rotate(180deg); }
.jobs-lens__toggle:hover { background: rgba(var(--color-accent-rgb), 0.08); }
.jobs-lens__toggle:hover .jobs-lens__name { text-decoration-color: currentColor; }
.jobs-lens__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.jobs-lens__sep { color: var(--color-text-muted); }
/* Меню профессии: галочка — своя колонка слева у каждой строки (имена стоят
   по одному краю, и выбранная строка не сдвигает текст), метка «основная» —
   тихая плашка, число карточек — справа моноширинным. Прежде галочка
   стояла в конце строки, и «основная» спорила с ней за правый край. */
.jobs-lens__panel { padding: var(--space-2); font-size: 0.9375rem; }
/* Ширина — только у всплывающей панели: ниже 768px меню — нижний лист во
   всю ширину экрана, и ограничение оставляло справа полосу страницы. */
@media (min-width: 768px) {
    .jobs-lens__panel { min-width: 22rem; max-width: 30rem; }
}
.jobs-lens__option { display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); }
.jobs-lens__option-check { flex: none; display: inline-flex; width: 1.25rem; justify-content: center; color: var(--color-accent); }
/* Имя переносится, а не обрезается: «CTO / Технический ди…» рядом с меткой
   «основная» прятало ровно ту часть, по которой профессии различают. */
.jobs-lens__option-name { min-width: 0; flex: 1 1 auto; line-height: 1.3; overflow-wrap: anywhere; }
.jobs-lens__option-note {
    flex: none;
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.jobs-lens__option-count {
    flex: none;
    min-width: 1.5rem;
    text-align: right;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-soft);
}
.jobs-lens__option-count--zero { color: var(--color-text-muted); opacity: 0.6; }
.jobs-lens__option[aria-current="page"] { font-weight: 600; background: rgba(var(--color-accent-rgb), 0.06); }
.jobs-lens__divider { display: block; height: 1px; margin: var(--space-1) var(--space-2); background: var(--color-border-soft); }
@media (prefers-reduced-motion: reduce) { .jobs-lens__chev { transition: none; } }
/* Панель условий на широком экране — без пустых строк (06.10, ревью ленты).
   «Ваша география:» + два места не помещались в колонку «где» и переносились
   вторым рядом, а одинокая «Все предпочтения» занимала третий. Подпись мест
   остаётся для скринридера, места встают одной строкой, а тихий подвал
   поднимается на неё же справа — там пусто: у формата и зарплаты второй строки
   нет. Подъём — только когда места есть, иначе ссылка легла бы на кнопку. */
@media (min-width: 1200px) {
    .feed-conditions__group--places .chips-input__picks-label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .feed-conditions__group--places .chips-input__picks { flex-wrap: nowrap; }
    .feed-conditions:has(.chips-input__picks:not(.is-empty)) .feed-conditions__foot--quiet {
        margin-top: -2.6rem;
        pointer-events: none;
    }
    .feed-conditions:has(.chips-input__picks:not(.is-empty)) .feed-conditions__foot--quiet a,
    .feed-conditions:has(.chips-input__picks:not(.is-empty)) .feed-conditions__foot--quiet button { pointer-events: auto; }
}

/* Лид со ссылками (ui_intro_links): ссылки набраны цветом лида с тонким
   подчёркиванием, акцент — на наведении. Три синих слова подряд перетягивали
   внимание с заголовка и читались меню, а не фразой. */
.intro-links { margin: 0; }
.intro-links__link {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: rgba(var(--color-accent-rgb), 0.45);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    transition: color 140ms ease, text-decoration-color 140ms ease;
}
.intro-links__link:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.intro-links__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 3px; }

/* Перескролл (отскок за край страницы на macOS/iOS) показывает фон корня, а
   не страницы: под тёмной колонкой меню вылезала светлая полоса. Корень
   кабинета красится так же — тёмная колонка шириной меню, дальше фон канваса.
   Отскок остаётся (он часть ощущения прокрутки), исчезает только шов. */
@media (min-width: 992px) {
    html:has(> body.body--app) {
        background: linear-gradient(90deg, var(--brand-tile) 0 var(--sidebar-w), var(--color-bg) var(--sidebar-w));
    }
}
/* Меню действий («у меня это есть», «пересобрать»): значок стоит у КАЖДОЙ
   строки, и заголовок, выровненный по тексту пунктов, висел с отступом
   слева от всего столбца. Здесь общий край — колонка значков; то же у
   «добавить с уровнем» (--answer: «+» у каждого уровня). В меню своих
   уровней значок есть только у текущего, и там заголовок остаётся над
   словами. */
.skill-chip__menu:has(.skill-chip__action-form, a.skill-chip__level, .skill-chip__levels--answer) .skill-chip__menu-head {
    padding-left: var(--space-2);
}

/* ── ui_pick_card — карточка «Подборки дня» (vacancy-picks §11.4) ───────────
   Родственница карточки ленты (ui_job_card), а не новый жанр: строка места
   над заголовком, заголовок, бейдж работодателя, кольцо счёта справа и
   строка зарплаты — те же атомы job-card__*, поэтому подборка и лента
   совпадают до пикселя и не расходятся при правке одной из них. Своё у
   подборки — то, чего у ленты нет: метки (золото, путь), две оси разбора
   тонкими шкалами, «почему подходит» и полоса решений внутри карточки.
   Золото — материал светлой карточки (тёплое кольцо, плашка, свечение
   рамки), а не тёмная плита: плита одна на экран, а золотых карточек в
   списке бывает несколько. overflow: clip, а не hidden: hidden делал бы
   карточку контейнером прокрутки, и липкая панель решений на мобиле липла
   бы к карточке, а не к экрану. */
.pick-card {
    container-type: inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: clip;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.pick-card:hover { box-shadow: var(--shadow-md); }
/* Золото — светящийся материал, общий для карточки подборки и карточки
   ленты (`job-card--gold`): одна вакансия не может быть золотой в подборке и
   обычной в ленте. Три слоя, и каждый отвечает на своё:
     - рамка — бегущий по кругу блик (conic-gradient по анимируемому углу
       --gold-spin): глаз находит золото в сетке до чтения чисел;
     - ореол — тёплое свечение вокруг карточки, ярче на тёмной теме сам собой;
     - тёплый отсвет в углу у кольца — там, где стоит число.
   Рамка рисуется фоном border-box под непрозрачным padding-box, поэтому
   толщина и радиус — те же, что у обычной карточки, сетка не прыгает. Блик
   медленный (9 с на круг): это свечение, а не мигание; при reduced-motion
   рамка неподвижна. Анимируется только угол градиента — карточек золота на
   экране единицы, перерисовка рамки дешевле композитного слоя на каждую. */
@property --gold-spin {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
.pick-card--gold,
.job-card--gold {
    border-color: transparent;
    background:
        radial-gradient(90% 55% at 100% 0%, rgba(var(--color-gold-glow-rgb), 0.16), transparent 70%) padding-box,
        linear-gradient(var(--color-surface-elevated), var(--color-surface-elevated)) padding-box,
        conic-gradient(from var(--gold-spin),
            rgba(var(--color-gold-rgb), 0.45) 0deg,
            #F6DC93 50deg,
            rgba(var(--color-gold-rgb), 0.95) 90deg,
            rgba(var(--color-gold-rgb), 0.45) 150deg,
            rgba(var(--color-gold-rgb), 0.45) 210deg,
            #F6DC93 260deg,
            rgba(var(--color-gold-rgb), 0.45) 320deg) border-box;
    /* Ореол ровный со всех сторон: прежний сдвиг тени вниз (14px) давал
       низу вдвое больше света, чем верху, и карточка «висела» на пятне.
       Глубину держит одна мягкая тень без цвета ореола под низом. */
    box-shadow:
        0 0 0 3px rgba(var(--color-gold-glow-rgb), 0.14),
        0 0 32px 2px rgba(var(--color-gold-glow-rgb), 0.4),
        0 8px 24px -16px rgba(0, 0, 0, 0.18);
    animation: gold-spin 9s linear infinite;
}
.pick-card--gold:hover,
.job-card--gold:hover,
.job-card--gold:focus-within {
    border-color: transparent;
    box-shadow:
        0 0 0 3px rgba(var(--color-gold-glow-rgb), 0.2),
        0 0 36px 4px rgba(var(--color-gold-glow-rgb), 0.42),
        0 10px 28px -16px rgba(0, 0, 0, 0.2);
}
@keyframes gold-spin { to { --gold-spin: 360deg; } }
/* Плашка золота в ленте — та же, что у карточки подборки (.pick-card__gold):
   знак качества называется одинаково везде, где вакансия видна. */
.job-card__gold {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-1);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-gold-soft);
    color: var(--color-gold-text);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}
.job-card--t-gold { --rail-color: var(--color-gold); }
/* Разобранная подборкой вакансия в ленте: акцентный контур и метка — тише
   золота (там светящийся материал), но видна в сетке до чтения числа. */
.job-card--analyzed {
    border-color: rgba(var(--color-accent-rgb), 0.45);
    box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.12), var(--shadow-sm);
}
.job-card__analyzed {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-1);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgba(var(--color-accent-rgb), 0.1);
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}
/* Кольцо золота светится тем же теплом, что ореол карточки. */
.pick-card--gold .job-card__ring--gold,
.job-card--gold .job-card__ring--gold { filter: drop-shadow(0 0 8px rgba(var(--color-gold-glow-rgb), 0.65)); }
@media (prefers-reduced-motion: reduce) {
    .pick-card--gold,
    .job-card--gold { animation: none; }
}
.pick-card--path:not(.pick-card--gold) { border-color: rgba(var(--color-accent-rgb), 0.4); }
.pick-card--vacancy_closed,
.pick-card--discarded { box-shadow: none; }
.pick-card--vacancy_closed .pick-card__main,
.pick-card--discarded .pick-card__main { opacity: 0.78; }

/* Блик по рамке золота: один проход при появлении, только transform/opacity. */
.pick-card__sheen {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
        rgba(var(--color-gold-rgb), 0) 35%,
        rgba(var(--color-gold-rgb), 0.22) 50%,
        rgba(var(--color-gold-rgb), 0) 65%);
    transform: translateX(-100%);
    opacity: 0;
    animation: pick-card-sheen 600ms var(--ease-out) 1 both;
}
@keyframes pick-card-sheen {
    0%   { transform: translateX(-100%); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

.pick-card__main {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    flex: 1 1 auto;
}

/* Метки — строка над карточкой только когда они есть: пустой полосы под
   несуществующую метку больше нет. */
.pick-card__marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0;
}
/* Строка формальных условий под метками: обязательное, что опыт не
   подтвердил (стаж, язык, образование, условия найма). Тихая, без акцента —
   она предупреждает, а не тревожит. На узкой карточке — одна строка с
   многоточием (полный список в подробном разборе), шире — переносится. */
.pick-card__gold,
.pick-card__career,
.pick-card__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    line-height: 1.3;
}
.pick-card__gold {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-gold-soft);
    color: var(--color-gold-text);
    font-weight: 600;
}
/* Профессия, к которой пришла карточка, — тихая подпись со значком раздела
   «Профессии»: контекст, а не знак качества, поэтому без плашки и цвета. */
.pick-card__profession {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--color-text-soft);
}
.pick-card__profession > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-card__career--path { color: var(--color-accent); font-weight: 600; }
.pick-card__career--map { color: var(--color-text-soft); }
.pick-card__status { color: var(--color-text-muted); }
.pick-card__spin { animation: pick-card-spin 1.2s linear infinite; }
@keyframes pick-card-spin { to { transform: rotate(360deg); } }

.pick-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}
.pick-card__id {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.pick-card__place { margin: 0; }
.pick-card__title { margin: 0; overflow-wrap: break-word; }
.pick-card__title-link { color: inherit; text-decoration: none; }
.pick-card__title-link:hover { color: var(--color-accent); }
.pick-card__title-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.pick-card__company { margin: 0; }
.pick-card__score { padding-top: 2px; }
/* Кольцо золота — тёплая дуга вместо фирменной: знак золота читается и без
   плашки, глазом по ленте карточек. */
.job-card__ring--gold {
    --ring-color: var(--color-gold);
    background:
        radial-gradient(closest-side, var(--color-surface-elevated) calc(100% - var(--ring-w) - 0.5px), transparent calc(100% - var(--ring-w))),
        conic-gradient(#E8C677 0, var(--color-gold) calc(var(--pct) * 1%), rgba(118, 118, 128, 0.12) 0);
}
.pick-card__salary { margin: 0; }

/* Две оси разбора — пара тонких шкал: число объясняет, откуда итог
   («по силам, но условия слабее»), шкала — даёт сравнить оси без чтения. */
.pick-card__axes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
}
.pick-card__axis {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    row-gap: 6px;
    min-width: 0;
}
.pick-card__axis dt { font-size: 0.8125rem; color: var(--color-text-muted); }
.pick-card__axis dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.pick-card__axis::after {
    content: "";
    grid-column: 1 / -1;
    height: 4px;
    border-radius: var(--radius-pill);
    background:
        var(--gradient-progress) 0 0 / calc(var(--pct) * 1%) 100% no-repeat,
        var(--progress-track);
}
.pick-card--gold .pick-card__axis::after {
    background:
        linear-gradient(90deg, #E8C677, var(--color-gold)) 0 0 / calc(var(--pct) * 1%) 100% no-repeat,
        var(--progress-track);
}
.pick-card__confidence {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.pick-card__explanation {
    margin: 0;
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-accent);
    font-size: 0.9375rem;
    color: var(--color-text-soft);
}

/* Шаги выбранного пути, которые продвигает вакансия: тихая строка под
   фразой модели, значок держится первой строки при переносе. */
.pick-card__steps {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.pick-card__steps .icon {
    flex: none;
    margin-top: 0.2em;
}

.pick-card__points {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.pick-card__point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text-soft);
    max-width: 68ch;
}
.pick-card__point .icon { flex-shrink: 0; margin-top: 4px; }
/* Пункт — не длиннее трёх строк: модель пишет абзацы, а карточка отвечает
   «стоит ли открыть». Полный текст — в подробном разборе, куда ведёт ссылка
   этой же карточки. */
/* Тело карточки: факты и «почему» друг под другом; пустая часть (у разбора
   в работе нет ни осей, ни доводов) места не занимает. */
.pick-card__body,
.pick-card__facts,
.pick-card__why {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}
.pick-card__facts:not(:has(*)),
.pick-card__why:not(:has(*)) { display: none; }
.pick-card__point-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.pick-card__point--fit .icon { color: var(--color-success); }
.pick-card__point--gap .icon,
.pick-card__point--formal .icon { color: var(--color-text-muted); }
/* Пункты разбора v12: сильная сторона — тем же тоном, что «за», пробел —
   тихо, условие и оговорка — янтарём (это то, что проверить до отклика). */
.pick-card__point--strength .icon { color: var(--color-success); }
.pick-card__point--gap .icon { color: var(--color-text-muted); }
.pick-card__point--condition .icon,
.pick-card__point--caveat .icon { color: rgb(var(--color-amber-rgb)); }

.pick-card__skeleton { display: flex; flex-direction: column; gap: var(--space-2); }
.pick-card__skeleton-line {
    display: block;
    height: 10px;
    border-radius: var(--radius-pill);
    background: rgba(118, 118, 128, 0.12);
}
.pick-card__skeleton-line--short { width: 60%; }

.pick-card__note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(118, 118, 128, 0.08);
    font-size: 0.875rem;
    color: var(--color-text-soft);
}
.pick-card__note .icon { flex-shrink: 0; margin-top: 3px; }

.pick-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: auto;
}
.pick-card__decision {
    font-size: 0.8125rem;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgba(118, 118, 128, 0.10);
    color: var(--color-text-soft);
}
.pick-card__decision--liked { background: rgba(var(--color-sage-rgb), 0.14); color: var(--color-success); }
.pick-card__restore { margin: 0; }
.pick-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    margin-left: auto;
    color: var(--color-accent);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}
.pick-card__cta:hover { text-decoration: underline; }
.pick-card__cta:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Полоса решений — часть карточки: общая подложка и общий край связывают
   кнопки с их вакансией (закон общей области). */
.pick-card__actions {
    position: relative;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border-soft);
    background: rgba(118, 118, 128, 0.04);
}
/* Липнет вся полоса, а не форма внутри неё: липкий элемент двигается только
   в границах родителя, и форма в полосе своей же высоты не сдвигалась ни на
   пиксель. Полоса — прямой потомок карточки, ей есть где ехать. */
@media (max-width: 991.98px) {
    .pick-card__actions:has(.pick-decision--sticky) {
        position: sticky;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        z-index: 5;
        background: var(--color-surface-elevated);
        box-shadow: 0 -8px 16px -12px rgba(15, 23, 42, 0.18);
    }
}

/* Ссылка в полосе — только у широкой карточки (ниже). На узкой полоса — три
   кнопки во всю ширину, а ссылка остаётся в подвале. */
.pick-card__cta--band { display: none; }
@container (min-width: 560px) {
    .pick-card__main { padding: var(--space-5) var(--space-6); gap: var(--space-4); }
    /* Одна строка действий: «Подробный разбор» слева, решения справа своей
       шириной. Прежде ссылка висела отдельной строкой над полосой из трёх
       растянутых кнопок, и действия карточки занимали две строки. */
    .pick-card__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-2) var(--space-4);
        padding: var(--space-3) var(--space-6);
    }
    .pick-card__cta--band { display: inline-flex; margin-left: 0; }
    .pick-card__actions .pick-decision { flex: 0 1 auto; margin-left: auto; }
    .pick-card__actions .pick-decision__row { grid-template-columns: repeat(3, auto); }
    .pick-card__foot--cta-only { display: none; }
}
/* Широкая карточка (список подборки, стопка на дашборде): факты слева,
   «почему» справа, тонкая вертикаль между ними. Карточка вдвое ниже, а
   оси перестают тянуться через весь экран. */
@container (min-width: 820px) {
    .pick-card__body--split {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--space-6);
        align-items: start;
    }
    .pick-card__body--split .pick-card__why {
        padding-left: var(--space-6);
        border-left: 1px solid var(--color-border-soft);
    }
    .pick-card__body--split .pick-card__axes { max-width: none; }
    .pick-card__title { font-size: 1.3125rem; }
    .pick-card__axes { max-width: 460px; }
}
/* Узкая карточка (планшет, сетка на 1280px, витрина): решения меряют ширину
   самой карточки, а не окна. Ниже 330px (уже телефонных 343px) у «Не моё» и «Позже» остаётся
   значок (имя кнопки остаётся в aria-label), главное решение — со словом;
   оси встают столбиком, иначе «Подходит вам» переносилось под шкалой. */
@container (max-width: 330px) {
    .pick-card__axes { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .pick-card .pick-decision__row { grid-template-columns: 52px 52px minmax(0, 1fr); }
    .pick-card .pick-decision__btn--disliked > span,
    .pick-card .pick-decision__btn--later > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .pick-card .pick-decision__btn--disliked,
    .pick-card .pick-decision__btn--later { padding-inline: 0; }
    .pick-card .pick-decision__btn--liked .icon { display: none; }
    .pick-card .pick-decision__btn--liked { padding-inline: var(--space-2); min-width: 0; }
    .pick-card .pick-decision__btn--liked > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    .pick-card__sheen { animation: none; display: none; }
    .pick-card__spin { animation: none; }
}

/* ── ui_pick_decision — три решения по карточке подборки (§11.2, §11.6) ─────
   Mobile-first: три кнопки в ряд во всю ширину, каждая ≥ 44px. В стопке
   панель липнет к низу экрана над bottom-nav (её высота + safe-area), на
   десктопе bottom-nav нет — панель остаётся под карточкой. */
.pick-decision {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.pick-decision--sticky { position: static; }
/* На 375px три равные колонки по ~109px не вмещали «Интересно» с иконкой
   (кнопка обрезалась краем), а «Не моё» ломалось в две строки. Главному
   решению — колонка шире, отступы кнопок уже; с 480px — равные колонки. */
.pick-decision__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
    gap: var(--space-2);
}
.pick-decision__form { display: flex; min-width: 0; margin: 0; }
.pick-decision__btn {
    min-height: 44px;
    min-width: 0;
    padding-inline: var(--space-2);
    gap: var(--space-1);
    white-space: nowrap;
}
@media (min-width: 480px) {
    .pick-decision__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pick-decision__btn { padding-inline: var(--space-4); gap: var(--space-2); }
}
.pick-decision__btn--on {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}
/* «Интересно» вне стопки — тихая кнопка, но с акцентным словом и значком:
   главное решение узнаётся, не крича в каждой карточке списка. */
.pick-decision__btn--liked.btn--secondary { color: var(--color-accent); }
.pick-decision__reasons { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.pick-decision__reasons[hidden] { display: none; }
.pick-decision__reasons-label {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.pick-decision__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pick-decision__chip {
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}
.pick-decision__chip--on {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ── ui_pick_stack — блок «Подборка дня» на дашборде (§11.2) ─────────────────
   Без JS — список карточек. pick-stack.js ставит .is-stacked и раздаёт
   data-pick-pos: карточка в фокусе (0) и края двух следующих (1, 2) лежат
   в одной ячейке сетки, остальные спрятаны. Высота тела зарезервирована —
   проявляющиеся карточки не сдвигают очередь внимания под блоком (CLS 0). */
.pick-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}
.pick-stack__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
}
.pick-stack__title {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--color-text);
}
/* Дата — тише заголовка: раздел зовётся «Подборка дня», а не «6 окт». */
.pick-stack__day { font-weight: 400; color: var(--color-text-muted); }
.pick-stack__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}
.pick-stack__counter {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.pick-stack__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* Резерва высоты нет: колода складывается CSS'ом до скрипта (ниже), и
   высоту блока с первого кадра задаёт передняя карточка. Резерв в 28rem
   был нужен, пока под передней лежали задние, — теперь он давал пустоту
   под короткой карточкой. */
.pick-stack__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
.pick-stack__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}
.pick-stack__list.is-stacked {
    display: grid;
    grid-template-areas: "stack";
    /* Уходящая и сдвигаемая пальцем карточка выезжает за край: clip (а не
       hidden) не делает список скролл-контейнером и не ломает sticky-панель
       решений внутри.
       Граница обрезки отодвинута наружу на --pick-stack-bleed (отступ +
       обратное поле): обрезка по краю карточки срезала ореол золота ровно
       по её бокам — сверху и снизу свет был, а слева и справа упирался в
       вертикальные края, и свечение читалось кривым прямоугольником. На
       телефоне запас равен полю страницы — дальше край экрана. */
    --pick-stack-bleed: var(--space-4);
    padding-inline: var(--pick-stack-bleed);
    margin-inline: calc(-1 * var(--pick-stack-bleed));
    overflow-x: clip;
}
@media (min-width: 768px) {
    .pick-stack__list.is-stacked { --pick-stack-bleed: var(--space-8); }
}
.pick-stack__list.is-stacked .pick-stack__item {
    grid-area: stack;
    transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
/* Колода — одна карточка и край под ней. Задние карточки не рисуются вовсе:
   своей высоты они вылезали из-под передней пустыми коробками разного
   размера. Колода складывается CSS'ом с первого кадра: без скрипта видна
   первая карточка с формами решений (после решения сервер покажет
   следующую), со скриптом — та, что в фокусе. Сдвига вёрстки, когда скрипт
   принимает стопку, нет: передняя и так первая.

   Край колоды рисует передняя — две полоски по 6px, тоньше и тише самой
   карточки, без своей тени: с тенью и полной рамкой нижняя полоска читалась
   отдельной карточкой, выпавшей из стопки. Число полосок — сколько карточек
   за передней (до скрипта — по разметке, со скриптом — по позициям). */
.pick-stack__list:not(.is-stacked) > .pick-stack__item:not(:first-child) { display: none; }
.pick-stack__list.is-stacked .pick-stack__item:not([data-pick-pos="0"]):not([data-pick-gone]) { display: none; }
.pick-stack__list.is-stacked .pick-stack__item[data-pick-gone]:not([data-pick-pos]) { display: none; }
.pick-stack__list { padding-bottom: var(--space-4); }
.pick-stack__list:not(.is-stacked) > .pick-stack__item:first-child,
.pick-stack__list.is-stacked .pick-stack__item[data-pick-pos="0"] { position: relative; z-index: 3; }
.pick-stack__list.is-stacked .pick-stack__item[data-pick-pos="0"] {
    animation: pick-stack-rise 220ms var(--ease-out) both;
}
@keyframes pick-stack-rise {
    from { transform: translateY(var(--space-2)) scale(0.98); opacity: 0.5; }
    to   { transform: none; opacity: 1; }
}
.pick-stack__list .pick-stack__item > .pick-card { position: relative; z-index: 1; }
.pick-stack__list:not(.is-stacked):has(> .pick-stack__item:nth-child(2)) > .pick-stack__item:first-child::before,
.pick-stack__list:not(.is-stacked):has(> .pick-stack__item:nth-child(3)) > .pick-stack__item:first-child::after,
.pick-stack__list.is-stacked:has(.pick-stack__item[data-pick-pos="1"]) .pick-stack__item[data-pick-pos="0"]::before,
.pick-stack__list.is-stacked:has(.pick-stack__item[data-pick-pos="2"]) .pick-stack__item[data-pick-pos="0"]::after {
    content: "";
    position: absolute;
    height: var(--space-5);
    border: 1px solid var(--color-border-soft);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--color-surface-elevated);
    pointer-events: none;
}
.pick-stack__list .pick-stack__item::before {
    z-index: 0;
    left: var(--space-4);
    right: var(--space-4);
    bottom: -6px;
}
/* Край колоды под золотом — тёплый: белые полоски под светящейся карточкой
   ореол окрашивал грязно-жёлтым, и они читались пятнами, а не листами. */
.pick-stack__list .pick-stack__item:has(> .pick-card--gold)::before,
.pick-stack__list .pick-stack__item:has(> .pick-card--gold)::after {
    border-color: rgba(var(--color-gold-rgb), 0.35);
}
.pick-stack__list .pick-stack__item::after {
    z-index: -1;
    left: var(--space-8);
    right: var(--space-8);
    bottom: -12px;
    opacity: 0.6;
}
/* Уходящая карточка (pick-stack.js) лежит поверх новой в фокусе, пока длится
   анимация ухода, и не ловит касаний. Свайп горизонтальный: вертикальный
   скролл страницы отдаём браузеру. */
/* Решение по карточке — короткая дуга в его сторону с лёгким поворотом
   (320 мс, как LEAVE_MS в pick-stack.js): «Интересно» — вправо, «Не моё» —
   влево, «Позже» — вниз, в колоду. Уход «Интересно» подсвечен акцентом —
   решение принято, а не карточка пропала. Дальше вылетать не нужно: глаз
   ловит направление в первые сто миллисекунд. */
.pick-stack__list.is-stacked .pick-stack__item[data-pick-gone] {
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 320ms ease-in;
}
.pick-stack__list.is-stacked .pick-stack__item[data-pick-gone="liked"] { transform: translate(32%, -2%) rotate(4deg); }
.pick-stack__list.is-stacked .pick-stack__item[data-pick-gone="disliked"] { transform: translate(-32%, -2%) rotate(-4deg); }
.pick-stack__list.is-stacked .pick-stack__item[data-pick-gone="later"] { transform: translateY(18%) scale(0.94); }
.pick-stack__list.is-stacked .pick-stack__item[data-pick-gone="liked"] > .pick-card {
    box-shadow: 0 0 0 2px rgba(var(--pick-glow-rgb), 0.55), 0 18px 48px -12px rgba(var(--pick-glow-rgb), 0.5);
}

/* Следующая карточка «проявляется» разбором: поднимается из колоды, по её
   контуру один раз пробегает световая дуга, содержимое проступает по порядку
   чтения (метки → заголовок → числа → причины), а числа дорисовываются —
   кольцо от нуля до процента, шкалы осей вырастают. Это единственное место,
   где интерфейс показывает работу разбора движением, поэтому оно сдержанное:
   один проход, без повторов и мигания, меньше секунды. Работает и на первом
   показе — карточка тоже только что разобрана.

   Дуга по контуру, а не полоса через содержимое (до 08.10): полоса шла
   поперёк текста, который человек в этот момент начинает читать, и была
   зашита в бирюзово-фиолетовый градиент — на золотой карточке чужой цвет.
   Контур — язык самой карточки: у золота рамка и так светится вращением,
   проявление — её один пробег. Цвет — токен карточки (--pick-glow-rgb):
   акцент у обычной, золото у золотой; им же окрашен уход по «Интересно». */
.pick-card { --pick-glow-rgb: var(--color-accent-rgb); --pick-glow-hi: #fff; }
/* У золота головка дуги — светлое золото рамки (#F6DC93 в её градиенте):
   тот же металл, что вращается по рамке, только ярче на один проход. */
.pick-card--gold { --pick-glow-rgb: var(--color-gold-glow-rgb); --pick-glow-hi: #FFF1C7; }
@property --pick-trace {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@property --pct {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
.pick-stack__list.is-stacked .pick-stack__item[data-pick-pos="0"] > .pick-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 3px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--pick-trace),
        rgba(var(--pick-glow-rgb), 0) 0deg,
        rgba(var(--pick-glow-rgb), 0) 230deg,
        rgba(var(--pick-glow-rgb), 0.55) 310deg,
        rgba(var(--pick-glow-rgb), 1) 340deg,
        var(--pick-glow-hi) 354deg,
        rgba(var(--pick-glow-rgb), 0) 360deg);
    /* Кольцо шириной в padding: внутренность вычитается маской, дуга идёт
       только по рамке и не ложится на текст. */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: pick-card-trace 820ms cubic-bezier(0.45, 0, 0.2, 1) 80ms both;
}
@keyframes pick-card-trace {
    from { --pick-trace: 0deg; opacity: 0; }
    12%  { opacity: 1; }
    78%  { opacity: 1; }
    to   { --pick-trace: 360deg; opacity: 0; }
}
/* Содержимое проступает по порядку чтения: шаг 50 мс, подъём на 6px. Только
   transform и opacity — вёрстка не двигается. */
.pick-stack__list.is-stacked .pick-stack__item[data-pick-pos="0"] .pick-card__main > * {
    animation: pick-card-enter 360ms var(--ease-out) both;
}
.pick-stack__list.is-stacked .pick-stack__item[data-pick-pos="0"] .pick-card__main > :nth-child(2) { animation-delay: 50ms; }
.pick-stack__list.is-stacked .pick-stack__item[data-pick-pos="0"] .pick-card__main > :nth-child(3) { animation-delay: 100ms; }
.pick-stack__list.is-stacked .pick-stack__item[data-pick-pos="0"] .pick-card__main > :nth-child(4) { animation-delay: 150ms; }
.pick-stack__list.is-stacked .pick-stack__item[data-pick-pos="0"] .pick-card__main > :nth-child(n+5) { animation-delay: 200ms; }
@keyframes pick-card-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.pick-stack__list.is-stacked .pick-stack__item[data-pick-pos="0"] .job-card__ring {
    animation: pick-num-fill 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 160ms both;
}
.pick-stack__list.is-stacked .pick-stack__item[data-pick-pos="0"] .pick-card__axis {
    animation: pick-num-fill 640ms cubic-bezier(0.2, 0.8, 0.2, 1) 240ms both;
}
/* Только `from`: до значения элемента браузер доводит сам, у каждой
   карточки — своё. */
@keyframes pick-num-fill { from { --pct: 0; } }
.pick-stack__list.is-stacked .pick-stack__item[data-pick-pos="0"] { position: relative; touch-action: pan-y; }
.pick-stack__swipe {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 1;
    padding: var(--space-1) var(--space-3);
    border: 2px solid var(--color-text-muted);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
}
.pick-stack__swipe--liked {
    left: auto;
    right: var(--space-4);
    border-color: var(--color-accent);
    color: var(--color-accent);
}
@media (prefers-reduced-motion: reduce) {
    .pick-stack__list.is-stacked .pick-stack__item,
    .pick-stack__list.is-stacked .pick-stack__item .job-card__ring,
    .pick-stack__list.is-stacked .pick-stack__item .pick-card__axis { transition: none; animation: none; }
    .pick-stack__list.is-stacked .pick-stack__item > .pick-card::after { display: none; }
    .pick-stack__list.is-stacked .pick-stack__item .pick-card__main > * { animation: none; }
}
.pick-stack__summary {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.pick-stack__summary .icon { flex-shrink: 0; margin-top: 2px; color: var(--color-success); }
.pick-stack__summary--empty .icon { color: var(--color-text-muted); }
.pick-stack__summary-text { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-soft); }
/* Итог и вход в ленту — одна плита: текст сверху, ниже под волосяной линией
   строка ленты целиком ссылкой (как строка списка), действие справа. */
.pick-stack__summary-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pick-stack__feed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px var(--space-3);
    min-height: var(--tap-min);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft, var(--color-border));
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    text-decoration: none;
}
.pick-stack__feed-text { min-width: 0; }
/* Ссылка строки — видом ui_card_link («История →», «Открыть путь →»):
   чёрная полужирная ссылка была третьим видом ссылки на одном экране. */
.pick-stack__feed-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-accent);
    white-space: nowrap;
}
.pick-stack__feed-cta .icon { transition: transform var(--dur-fast, 150ms) var(--ease-out); }
.pick-stack__feed:hover .pick-stack__feed-cta { text-decoration: underline; text-underline-offset: 3px; }
.pick-stack__feed:hover .pick-stack__feed-cta .icon { transform: translateX(2px); }
.pick-stack__feed:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.pick-stack__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; }
.pick-stack__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-soft);
}
.pick-stack__line--quiet { color: var(--color-text-muted); font-size: var(--font-size-xs); }
/* Значок держится первой строки фразы: во flex-ряду с переносом он оставался
   один на строке над текстом. */
.pick-stack__line { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--space-2); line-height: 1.45; }
.pick-stack__line > .icon { margin-top: 0.2em; }
.pick-stack__inline-link { color: var(--color-accent); font-weight: 500; text-decoration: none; white-space: nowrap; }
.pick-stack__inline-link:hover, .pick-stack__inline-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.pick-stack__nowrap { white-space: nowrap; }
.pick-stack__feed-text { text-wrap: pretty; }
/* Плита «Все вакансии разобраны» и строка «Отменить» показываются
   скриптом: display у их классов перебивал бы атрибут hidden, и плита стояла
   под живой стопкой. */
.pick-stack [hidden] { display: none !important; }
.pick-stack__undo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pick-stack__undo .pick-decision__reasons { flex: 1 1 100%; }
.pick-stack__undo-btn { min-height: 44px; }

/* Причина отсева и «Вернуть» на карточке истории (§11.3). */
.pick-card__note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-soft);
}
.pick-card__note .icon { flex: 0 0 auto; margin-top: 3px; color: var(--color-text-muted); }
.pick-card__restore { display: inline-flex; margin: 0; }

/* Подборка списком (/app/jobs/picks) и история — одной колонкой во всю
   ширину. Список упорядочен по силе совпадения, и это рейтинг: его читают
   сверху вниз, а сетка в две колонки заставляла глаз ходить зигзагом и
   прятала порядок. Пустоты справа нет — широкая карточка раскладывает тело
   на две колонки (факты | почему) и становится вдвое ниже (см. ui_pick_card). */
.pick-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.pick-list__item { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.pick-list__item > .pick-card { flex: 1 1 auto; }
.pick-list__progress { max-width: 44rem; margin-bottom: var(--space-4); }
.pick-list__note { margin: var(--space-4) 0 0; font-size: var(--font-size-sm); }

.pick-history { display: flex; flex-direction: column; gap: var(--space-6); }
.pick-history__day { display: flex; flex-direction: column; gap: var(--space-3); }
.pick-history__date {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Фильтр решения и порядок — одна строка управления списком: фильтр слева,
   порядок справа. На телефоне — две строки, порядок второй. */
.pick-history__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin: 0 0 var(--space-5);
}
.pick-history__filters,
.pick-history__sort {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.pick-history + .pagination { margin: var(--space-2) 0 var(--space-5); }
.pick-stack__undo[hidden] { display: none; }

/* ── ui_pick_analysis — персональный разбор на странице вакансии (§11.3–11.5)
   Первая вкладка страницы вакансии из подборки. Плита того же материала, что
   панели вакансии рядом (job-detail__panel), с AI-айдентикой разбора только в
   надзаголовке. Заголовок — вердикт модели, ниже две оси плитками, критерии —
   строками со шкалой (шкала та же, что у осей карточки: одна величина — один
   знак во всём продукте), причина — по нажатию. */
.pick-analysis {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}
.pick-analysis__head { display: flex; flex-direction: column; gap: var(--space-2); }
.pick-analysis__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent);
}
.pick-analysis__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    text-wrap: pretty;
    max-width: 52ch;
}
.pick-analysis__note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.pick-analysis__note .icon { flex-shrink: 0; margin-top: 3px; }
.pick-analysis__note--stale { color: var(--color-text-soft); }

.pick-analysis__warnings { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pick-analysis__warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-warning-soft, rgba(var(--color-amber-rgb), 0.12));
    font-size: 0.9375rem;
    color: var(--color-text);
}
.pick-analysis__warning .icon { flex-shrink: 0; margin-top: 3px; color: var(--color-warning-strong); }
.pick-analysis__career {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-accent);
    font-size: 0.9375rem;
    color: var(--color-text-soft);
}
.pick-analysis__career .icon { flex-shrink: 0; margin-top: 4px; color: var(--color-accent); }
.pick-analysis__sides { display: flex; flex-direction: column; gap: var(--space-4); }
.pick-analysis__side { display: flex; flex-direction: column; gap: var(--space-2); }
.pick-analysis__side-title { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); }
.pick-analysis__points { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
/* «О роли» — утверждения о самой роли, а не о человеке: нейтральный значок
   без цвета «за» и «против». */
.pick-card__point--role .icon { color: var(--color-text-muted); }

/* Оси — две плитки; число оси крупно, шкала под заголовком плитки. */
.pick-analysis__axes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.pick-analysis__axis {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(118, 118, 128, 0.06);
    min-width: 0;
}
.pick-analysis__axis-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    row-gap: var(--space-2);
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.pick-analysis__axis-value { font-size: 1.5rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pick-analysis__axis-head::after,
.pick-analysis__crit-bar {
    content: "";
    height: 6px;
    border-radius: var(--radius-pill);
    background:
        linear-gradient(90deg, #14B8A6, #5FB8E8 50%, #7C5CFF) 0 0 / calc(var(--pct, 0) * 1%) 100% no-repeat,
        rgba(118, 118, 128, 0.16);
}
.pick-analysis__axis-head::after { grid-column: 1 / -1; }
.pick-analysis__na { font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); }

.pick-analysis__criteria { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.pick-analysis__criterion + .pick-analysis__criterion { border-top: 1px solid var(--color-border-soft); }
.pick-analysis__crit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px 2.25rem 16px;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    font-size: 0.9375rem;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
}
.pick-analysis__crit-row::-webkit-details-marker { display: none; }
/* Не оценённый критерий: имя тише, справа метка «не оценивается» и шеврон,
   как у оценённых строк — причина по раскрытию. Без причины и ссылки
   строка статична. */
.pick-analysis__crit-row--na { grid-template-columns: minmax(0, 1fr) auto 16px; }
.pick-analysis__crit-row--static { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.pick-analysis__crit-row--na .pick-analysis__crit-name { color: var(--color-text-muted); }
.pick-analysis__na-label {
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    background: rgba(118, 118, 128, 0.1);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
/* Знак процента у чисел разбора — тише и мельче самого числа, как в кольце. */
.pick-analysis__pct,
.pick-card__pct { margin-left: 1px; font-size: 0.7em; font-weight: 500; color: var(--color-text-muted); }
.pick-analysis__crit-bar { height: 4px; }
.pick-analysis__crit-value { text-align: right; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.pick-analysis__crit-toggle { color: var(--color-text-muted); transition: transform 0.2s ease; }
.pick-analysis__crit[open] .pick-analysis__crit-toggle { transform: rotate(180deg); }
.pick-analysis__crit-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.pick-analysis__reason {
    margin: 0 0 var(--space-3);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-soft);
    overflow-wrap: anywhere;
}
.pick-analysis__fill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}
.pick-analysis__fill:hover { text-decoration: underline; }
.pick-analysis__fill:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

.pick-analysis__block {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-soft);
}
.pick-analysis__block-title { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.pick-analysis__block-lead { margin: calc(-1 * var(--space-2)) 0 0; font-size: 0.875rem; color: var(--color-text-muted); max-width: 62ch; }

.pick-analysis__reqs { display: flex; flex-direction: column; gap: var(--space-2); }
.pick-analysis__reqs + .pick-analysis__reqs { margin-top: var(--space-2); }
.pick-analysis__reqs-head {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.pick-analysis__count {
    min-width: 1.5rem;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: rgba(118, 118, 128, 0.12);
    font-size: 0.75rem;
    text-align: center;
}
.pick-analysis__req-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pick-analysis__req { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.9375rem; line-height: 1.45; }
.pick-analysis__req-mark {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(118, 118, 128, 0.12);
    color: var(--color-text-muted);
}
.pick-analysis__req--covered .pick-analysis__req-mark { background: rgba(var(--color-sage-rgb), 0.16); color: var(--color-success); }
.pick-analysis__req--partial .pick-analysis__req-mark { background: rgba(var(--color-amber-rgb), 0.16); color: var(--color-warning-strong); }
/* Группа «Частично» — нейтральная: у составного требования закрыта
   большая часть, и янтарная метка под каждой строкой звучала бы тревогой
   рядом с настоящим пробелом выше. Янтарь остаётся у partial в группе
   формальных условий. */
.pick-analysis__reqs--partial .pick-analysis__req-mark { background: rgba(var(--color-slate-rgb), 0.16); color: var(--color-text-soft); }
.pick-analysis__req-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pick-analysis__req-text { overflow-wrap: anywhere; }
/* «ключевое» — та же форма пометки, что «желательно», но тоном требования:
   у незакрытого ключевого — янтарь (оно держит вердикт на растяжке), у
   закрытого — зелёный. */
.pick-analysis__req-core {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    background: rgba(var(--color-accent-rgb), 0.10);
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: 1px;
}
.pick-analysis__req--missing .pick-analysis__req-core,
.pick-analysis__req--partial .pick-analysis__req-core { background: rgba(var(--color-amber-rgb), 0.14); color: rgb(var(--color-amber-rgb)); }
.pick-analysis__req--covered .pick-analysis__req-core { background: rgba(var(--color-sage-rgb), 0.14); color: rgb(var(--color-sage-rgb)); }
/* «Одно из» (v12): какой вариант у человека есть — строкой под текстом. */
.pick-analysis__req-option { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--color-text-soft); }
/* «желательно» — тихая пометка у требования «будет плюсом»: недостающее
   желательное не должно читаться так же тревожно, как обязательное. */
.pick-analysis__req-nice {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    background: rgba(118, 118, 128, 0.10);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    vertical-align: 1px;
}
/* Цитата — то, что у человека есть: приглушённым основным цветом во всех
   группах. Строка нехватки под ней — тише и со значком минуса: две серые
   строки одного вида подряд различались только текстом «Нет …». */
.pick-analysis__req-quote { font-size: 0.8125rem; color: var(--color-text-soft); overflow-wrap: anywhere; }
/* «Не хватает: …» (missing_note) — под цитатой требования: называет недостающую
   часть перечня, а не весь перечень. Приглушённо, как цитата: это уточнение
   строки, а не новая тревога. */
.pick-analysis__req-lack { display: flex; gap: 4px; align-items: flex-start; font-size: 0.8125rem; line-height: 1.4; color: var(--color-text-muted); overflow-wrap: anywhere; }
/* Значок — у первой строки: фраза на телефоне переносится, и по центру блока
   он повисал между строками. */
.pick-analysis__req-lack-mark { flex: none; height: 1.4em; color: var(--color-text-muted); }
.pick-analysis__items { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.pick-analysis__align { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.pick-analysis__align-row {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-height: 40px;
    font-size: 0.9375rem;
}
.pick-analysis__align-row + .pick-analysis__align-row { border-top: 1px solid var(--color-border-soft); }
.pick-analysis__align-row dt { color: var(--color-text-muted); }
.pick-analysis__align-row dd { margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); }
.pick-analysis__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-muted); flex: none; }
.pick-analysis__align-row--match .pick-analysis__status-dot { background: var(--color-success); }
.pick-analysis__align-row--partial .pick-analysis__status-dot,
.pick-analysis__align-row--below .pick-analysis__status-dot { background: var(--color-amber); }
.pick-analysis__align-row--conflict .pick-analysis__status-dot { background: var(--color-danger); }
.pick-analysis__values { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pick-analysis__value { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.9375rem; }
.pick-analysis__value .icon { flex-shrink: 0; margin-top: 4px; }
.pick-analysis__value--match .icon { color: var(--color-success); }
.pick-analysis__value--conflict .icon { color: var(--color-danger); }
.pick-analysis__risks { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pick-analysis__risks li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.9375rem; line-height: 1.45; color: var(--color-text-soft); }
.pick-analysis__risks .icon { flex-shrink: 0; margin-top: 4px; color: var(--color-warning-strong); }

@media (min-width: 768px) {
    .pick-analysis { padding: var(--space-6); }
    .pick-analysis__title { font-size: 1.375rem; }
}

/* Карточка языка в «Аккаунте»: переключатель и «Сохранить» в одну строку,
   как у соседней карточки темы — без отдельной подписи поля. */
.content-language { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.content-language fieldset { margin: 0; }

/* ── Вкладка «О вакансии»: факты двумя колонками ─────────────────────────────
   Пункты короткие («постановки KPI», «retail»), и панель во всю ширину
   оставляла правую половину пустой. На широком экране панели встают парами в
   порядке разметки: обязанности | требования, будет плюсом | условия. */
.job-facts-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}
/* Решает ширина самой вкладки, а не окна: рядом с рейлом при 1440 её 690px,
   и две колонки по 330 рвали каждый пункт на три строки. */
.job-tabs__panel { container: job-panel / inline-size; }
@container job-panel (min-width: 760px) {
    .job-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Полный текст вакансии (job_text) ──────────────────────────────────────
   Текст разложен на блоки (textBlocks): заголовки секций, нумерованные
   подзаголовки, списки, пары «ключ: значение», абзацы. Ширина строки — до
   72 знаков: объявление читают, а не сканируют, и строка во всю панель на
   1440 уводила глаз на 150 знаков. */
.job-text {
    max-width: 72ch;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text-soft);
}
.job-text > :first-child { margin-top: 0; }
.job-text__p { margin: 0 0 var(--space-3); }
/* Вступление работодателя — лид: крупнее и темнее тела, как первый абзац
   статьи. Без этого «кто мы» читалось тем же серым, что сноска в конце. */
.job-text > .job-text__p:first-child,
.job-text > .job-text__p:first-child + .job-text__p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-text);
}
/* Заголовок раздела отделён волосяной линией и воздухом: на том же кегле,
   что и текст, разделы сливались в одну простыню. */
.job-text__h {
    margin: var(--space-6) 0 var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-soft, var(--color-border));
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--color-text);
}
.job-text > .job-text__h:first-child { padding-top: 0; border-top: 0; }
/* Этапы отбора — лесенка номеров в кружках, а не жирные подзаголовки. */
.job-text__steps {
    counter-reset: job-step;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}
.job-text__steps li {
    counter-increment: job-step;
    position: relative;
    padding-left: calc(1.75rem + var(--space-3));
    min-height: 1.75rem;
    color: var(--color-text);
}
.job-text__steps li::before {
    content: counter(job-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.job-text__sub {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-4) 0 var(--space-2);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
}
.job-text__num {
    flex: none;
    min-width: 1.5rem;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.job-text__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}
.job-text__list li {
    position: relative;
    padding-left: var(--space-5);
}
.job-text__list li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}
.job-text__sub + .job-text__list li { padding-left: calc(1.5rem + var(--space-2)); }
.job-text__sub + .job-text__list li::before { left: calc(0.75rem - 2px); }
.job-text__pairs {
    display: grid;
    gap: var(--space-1);
    margin: 0 0 var(--space-3);
}
.job-text__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--space-4);
}
.job-text__pair dt { color: var(--color-text-muted); font-size: 0.9375rem; }
.job-text__pair dd { margin: 0; color: var(--color-text); }
@media (min-width: 640px) {
    .job-text__pair { grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); }
}

/* ── ui_tailoring_changes — «Что мы изменили под эту вакансию» ────────────
   Над целевым резюме во всю ширину. От числа к смыслу: шапка → счёт
   плитками (крупная цифра, подпись под ней) → правки строками «где → что и
   зачем» с фиксированной колонкой «где» на широком экране. */
.tailoring {
    margin: 0 0 var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-sm);
}
.tailoring__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3);
    list-style: none;
    cursor: pointer;
    border-radius: inherit;
}
.tailoring__head::-webkit-details-marker { display: none; }
.tailoring__head:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tailoring__heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tailoring__title { min-width: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); }
/* Итог плиток строкой под заголовком свёрнутого блока; раскрытый блок
   показывает те же числа плитками — строка уходит, чтобы не повторяться. */
.tailoring__peek { font-size: 0.875rem; line-height: 1.45; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.tailoring__peek strong { font-weight: 600; color: var(--color-text-soft); }
.tailoring__peek-item { white-space: nowrap; }
.tailoring[open] .tailoring__peek { display: none; }
.tailoring__chev { flex: none; color: var(--color-text-muted); transition: transform 0.18s ease; }
.tailoring[open] .tailoring__chev { transform: rotate(180deg); }
.tailoring:not([open]) .tailoring__head { padding-bottom: var(--space-4); }
.tailoring__content { padding: 0 var(--space-4) var(--space-4); }

/* Счёт — плитки: цифра крупно, подпись под ней. В разметке dt идёт первым
   (так требует dl), визуально — под числом. */
.tailoring__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
}
.tailoring__tile {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 2px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(var(--color-accent-rgb), 0.06);
}
.tailoring__tile-value {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}
.tailoring__tile-of { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--color-text-muted); }
.tailoring__tile-label { font-size: 0.8125rem; line-height: 1.35; color: var(--color-text-soft); }

/* Правки — строки «где → что и зачем», разделённые волосяной линией. */
.tailoring__rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-soft); }
.tailoring__row {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-soft);
}
.tailoring__rows > .tailoring__row:last-child { border-bottom: 0; }
.tailoring__where { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); }
.tailoring__section { font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
.tailoring__company { font-weight: 500; color: var(--color-text-soft); }
.tailoring__kind {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
/* Вид правки — справка, а не ссылка: акцентом только значок, подпись
   тихая (синий текст читался кликабельным). */
.tailoring__kind .icon { color: var(--color-accent); }
.tailoring__row--shortened .tailoring__kind .icon { color: var(--color-text-muted); }
.tailoring__msg { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text); max-width: 72ch; }
.tailoring__req {
    margin: 4px 0 0;
    max-width: 72ch;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tailoring__req-label { color: var(--color-text-muted); }

.tailoring__more { margin-top: var(--space-1); }
.tailoring__more-toggle {
    display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
    list-style: none; cursor: pointer;
    font-size: 0.875rem; font-weight: 600; color: var(--color-accent);
}
.tailoring__more-toggle::-webkit-details-marker { display: none; }
.tailoring__more-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.tailoring__more[open] > .tailoring__more-toggle { display: none; }
/* Последняя видимая строка без нижней линии, поэтому раскрытый хвост
   начинается с неё: иначе первая строка «Ещё N» прилипала к предыдущей. */
.tailoring__more > .tailoring__rows { border-top: 1px solid var(--color-border-soft); }
/* Продолжение группы: «где» не повторяется, на узком экране пустая колонка
   не занимает строку. */
.tailoring__row--continued .tailoring__where:empty { display: none; }
/* Над письмом: «не упомянет» — молчание, значок приглушён, как у «сократили». */
.tailoring__row--skipped .tailoring__kind .icon { color: var(--color-text-muted); }
.tailoring__row--skipped .tailoring__msg { color: var(--color-text-soft); }
/* Ссылка-действие в конце блока (письмо: «Изменить ответы на требования»). */
.tailoring__action {
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: 44px; margin-top: var(--space-1);
    font-size: 0.875rem; font-weight: 600; color: var(--color-accent); text-decoration: none;
}
.tailoring__action:hover { text-decoration: underline; text-underline-offset: 3px; }
.tailoring__action:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

@media (min-width: 640px) {
    .tailoring__tiles { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
    /* Одна-две плитки во всю ширину читались баннером, а не счётом: у
       письма бывает один-два исхода, у резюме — четыре плитки рядом. */
    .tailoring__tiles--few { grid-template-columns: repeat(auto-fit, minmax(9rem, 16rem)); }
}
@media (min-width: 900px) {
    .tailoring__head, .tailoring__content { padding-inline: var(--space-5); }
    .tailoring__row { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--space-5); padding: var(--space-4) 0; }
    .tailoring__where { flex-direction: column; align-items: flex-start; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .tailoring__chev { transition: none; }
}

/* Проверка «что нового» (/app/update/checkin) — облик очереди дописок
   (.update-clarify); своё здесь только у финала. Ссылка на свежий файл —
   тихой строкой под кнопками: это запасной путь, а не второй выбор. */
/* Финал — свой ряд, а не липкая панель шага: действий здесь два, и главное
   обязано стоять первым. В панели шага на телефоне «На главную» вставала над
   главной кнопкой. */
.checkin__done-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: var(--space-5);
}
@media (min-width: 640px) {
    .checkin__done-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
}
.checkin__file { margin: var(--space-4) 0 0; font-size: 0.9375rem; color: var(--color-text-soft); }
.checkin__file a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    color: var(--color-accent);
    text-decoration: none;
}
.checkin__file a:hover, .checkin__file a:focus-visible { text-decoration: underline; }

/* «План роста» профессии (ui_growth_board) — язык страницы соответствия:
   вердикт и план берут её классы (cov-verdict, cov-plan), здесь только своё —
   одно дело на экране и список разделов резюме. */
.growth-board { display: flex; flex-direction: column; gap: var(--space-4); }
.growth-board > .section-label { margin: 0; }
.growth-next {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
}
.growth-next__eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.growth-next__place { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
.growth-next__text { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--color-text); max-width: 72ch; text-wrap: pretty; }
.growth-next__action { margin: var(--space-2) 0 0; }
.growth-board__more { margin-top: calc(-1 * var(--space-2)); }
/* Замечания к документу без места и спокойное «делать нечего» — тихими
   строками: у них нет действия, и карточка придала бы им вес задачи. */
.growth-board__flags,
.growth-board__calm { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-soft); max-width: 72ch; }

/* План профессии (реворк 10.10): одно место, где сказано, что делать, сразу
   под вердиктом. Без своей рамки — внутри уже карточки шагов, дела и
   разделов, и рамка вокруг них дала бы карточку в карточке. Заголовок —
   размера заголовков соседних панелей, лид — главный шаг для роли. */
.profile-plan { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.profile-plan__head { display: flex; flex-direction: column; gap: var(--space-1); }
.profile-plan__title {
    margin: 0;
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
    color: var(--color-text);
}
/* Раскрытие «где именно» в «Местах работы» на «Опыте»: заголовок — вывод
   матрицы, вторая строка — что внутри. Текст вывода переносится, поэтому
   строка не inline-flex. */
.cf-exp-quality > .disclosure__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    font-size: 0.9375rem; color: var(--color-text);
}
.cf-exp-quality > .disclosure__summary > span:first-child { grid-column: 1; }
.cf-exp-quality__hint { grid-column: 1; font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); }
.cf-exp-quality > .disclosure__summary > .disclosure__chevron { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.cf-exp-quality[open] > .disclosure__summary > .disclosure__chevron { transform: rotate(180deg); }
.cf-exp-quality > .exp-quality--bare { margin-top: var(--space-3); }
.exp-quality--bare { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.exp-quality__lead { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); max-width: 72ch; }

/* Требования роли одним блоком: рынок роли и вакансии самого человека —
   подразделами одной панели, без рамки у вложенного. */
.role-requirements { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.market-gaps--nested { margin: 0; padding: var(--space-4) 0 0; border: 0; border-top: 1px solid var(--color-border-soft, var(--color-border)); border-radius: 0; background: none; display: flex; flex-direction: column; gap: var(--space-2); }
.market-gaps__subtitle { margin: 0; font-weight: 400; }
.gap-map__label--fold { display: block; margin: var(--space-3) 0 0; }
.gap-map__fold--have .gap-map__chips { margin-top: var(--space-2); }

/* Разделы резюме — тихий список одной анатомии: значок, имя и балл, совет,
   одна ссылка «Дописать» у слабых. Пара кнопок «Улучшить раздел» /
   «Редактировать раздел» у каждой строки заставляла гадать, чем они
   отличаются. */
.growth-sections { display: flex; flex-direction: column; gap: var(--space-2); container-type: inline-size; }
.growth-sections__title { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); }
.growth-sections__lead { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); max-width: 72ch; }
/* Строки — ui_strengthen_row в карточке dash-do__card, как «Что усилить». */
.growth-sections__list { margin: 0; }

/* «Как описан ваш опыт» — матрица «место работы × ось» (ui_experience_quality).
   Строка — место работы, столбцы — четыре оценки текста и итог; цвет ячейки —
   от «подробно» до «мало». Одним взглядом по столбцу видно, где проседает
   ось: по всей карьере или в одной роли. Прежде оси жили в раскрытии каждой
   записи столбиком полос.

   Телефон — карточка на место работы: название сверху, пять ячеек в ряд под
   ним (подпись оси — внутри ячейки). С 760px ширины блока — таблица: одна
   строка на место работы, подписи осей уходят в шапку. */
.exp-matrix { display: flex; flex-direction: column; gap: var(--space-2); container-type: inline-size; }
.exp-matrix__row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    grid-template-areas: "role role role role role act";
    gap: 6px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
}
.exp-matrix__row--head { display: none; }
/* Три оси (замер качества resume_quality v6, без «близости к роли»): на
   столбец меньше. */
.exp-matrix--axes-3 .exp-matrix__row { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; grid-template-areas: "role role role role act"; }
.exp-matrix__cell--role { grid-area: role; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-1); }
.exp-matrix__cell--act { grid-area: act; display: flex; align-items: flex-start; justify-content: flex-end; }
.exp-matrix__period { font-size: 0.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.exp-matrix__label { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--color-text); overflow-wrap: anywhere; }
.exp-matrix__tags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: 2px; }
/* Число сверху, подпись под ним: двухстрочная подпись («Под роль») тогда
   не сдвигает число, и числа ряда стоят на одной линии. */
.exp-matrix__score, .exp-matrix__total {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
    min-height: 52px;
    padding: 8px 2px 6px;
    border-radius: var(--radius-sm, 8px);
    text-align: center;
}
.exp-matrix__axis-name { font-size: 0.625rem; line-height: 1.2; color: var(--color-text-muted); overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.exp-matrix__num { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); }
/* Итог — число без полосы, весом крупнее: это свёртка осей, а не пятая ось. */
.exp-matrix__total .exp-matrix__num { font-weight: 700; }
/* Полоса под числом — длина в балл, тот же язык, что у полос качества в
   рейле профессии: градиент прогресса там, где описано, янтарь — где мало. */
.exp-matrix__bar { display: block; width: 100%; max-width: 48px; height: 3px; border-radius: 2px; background: var(--color-border-soft, var(--color-border)); overflow: hidden; }
.exp-matrix__bar > i { display: block; height: 100%; width: calc(var(--pct, 0) * 1%); border-radius: inherit; background: var(--gradient-progress); }
.exp-heat--lo .exp-matrix__bar > i,
.exp-heat--min .exp-matrix__bar > i { background: rgb(var(--color-amber-rgb)); }
.exp-heat--mid .exp-matrix__bar > i { opacity: 0.55; }
.exp-heat--min .exp-matrix__num { color: rgb(var(--color-amber-rgb)); }
/* Ось, на которую указывает задача словами: янтарное число. */
.exp-matrix__score--focus .exp-matrix__num { color: rgb(var(--color-amber-rgb)); }
.exp-matrix__edit {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap-min); height: var(--tap-min);
    border-radius: 50%;
    color: var(--color-text-muted);
}
.exp-matrix__edit:hover, .exp-matrix__edit:focus-visible { color: var(--color-accent); background: rgba(var(--color-accent-rgb), 0.08); }
.exp-matrix__early { margin-top: var(--space-1); }
.exp-matrix__early-summary {
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: var(--tap-min);
    font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted);
    cursor: pointer; list-style: none;
}
.exp-matrix__early-summary::-webkit-details-marker { display: none; }
.exp-matrix__early[open] .exp-quality__chevron { transform: rotate(180deg); }
.exp-matrix--early { margin-top: var(--space-2); }
.exp-matrix__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0 0; font-size: 0.75rem; color: var(--color-text-muted); }
/* Легенда — отрезком той же полосы, что в ячейках. */
.exp-matrix__key { display: inline-flex; align-items: center; gap: 6px; }
.exp-matrix__key::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--gradient-progress); }
.exp-matrix__key.exp-heat--mid::before { opacity: 0.55; }
.exp-matrix__key.exp-heat--lo::before { background: rgb(var(--color-amber-rgb)); }

/* Таблица с 640px контейнера, а не с 760: в плане профессии матрица стоит в
   основной колонке (~690px на 1440), и при прежнем пороге девять мест работы
   разворачивались девятью карточками на полтора экрана. Пять ячеек по 76px
   оставляют месту работы 160px — название в две строки, как в таблице. */
@container (min-width: 640px) {
    .exp-matrix { gap: 0; }
    .exp-matrix__row {
        grid-template-columns: minmax(0, 1fr) repeat(5, 76px) var(--tap-min);
        grid-template-areas: none;
        align-items: center;
        gap: 6px;
        padding: var(--space-2) 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .exp-matrix__row + .exp-matrix__row { border-top: 1px solid var(--color-border); }
    .exp-matrix--axes-3 .exp-matrix__row { grid-template-columns: minmax(0, 1fr) repeat(4, 76px) var(--tap-min); grid-template-areas: none; }
    .exp-matrix__row--head {
        display: grid;
        padding-block: 0 var(--space-2);
        font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted);
    }
    .exp-matrix__row--head .exp-matrix__cell--role { padding-bottom: 0; }
    .exp-matrix__axis { text-align: center; line-height: 1.2; cursor: help; }
    .exp-matrix__cell--role, .exp-matrix__cell--act { grid-area: auto; }
    .exp-matrix__cell--act { align-items: center; }
    .exp-matrix__axis-name { display: none; }
    .exp-matrix__score, .exp-matrix__total { min-height: 40px; padding: 0; justify-content: center; gap: 5px; }
}

/* =====================================================================
   Отклик до конца и перенос резюме на площадки (board-transfer.md).
   ui_copy_field, ui_task_steps, ui_option_list, мастер отправки отклика
   (/app/applications/{id}/send) и мастер переноса
   (/app/profiles/{id}/transfer/{board}).
   ===================================================================== */

/* ui_copy_field — поле площадки: подпись как на сайте, значение в формате
   вставки и «Скопировать». Подпись мельче значения: человек сверяет её с
   подписью на сайте один раз, а значение читает целиком. */
.copy-field {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    min-width: 0;
}
.copy-field__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--tap-min, 44px);
    margin-block: calc(-1 * var(--space-2));
}
.copy-field__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
/* Кнопка — 44px по высоте (tap target), но без рамки: в списке из пяти полей
   пять обведённых кнопок спорили бы со значениями за внимание. */
.copy-field__btn.btn { min-height: var(--tap-min, 44px); min-width: var(--tap-min, 44px); flex-shrink: 0; justify-content: center; }
/* На телефоне кнопка — значок: рядом с ней подпись поля, дословная с
   площадки («Должность или профессия»), и слово «Скопировать» переносило её
   на две строки. Название действия остаётся в aria-label. */
.copy-field__btn.btn > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (min-width: 600px) {
    .copy-field__btn.btn > span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}
/* «Выбрать в списке» — место кнопки у поля выбора: не действие, поэтому
   приглушённый текст без фона и рамки, но со словом и на телефоне — значок
   без слова читался бы как сломанная кнопка. Высота — как у кнопки, чтобы
   шапки полей в одном списке не прыгали. */
.copy-field__pick {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--tap-min, 44px);
    /* Отступ кнопки .btn--sm: правый край метки и «Скопировать» в одном
       списке стоят по одной вертикали. */
    padding-inline: var(--space-3);
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.copy-field__btn.is-copied { color: var(--color-success); }
.copy-field__btn.is-failed { color: var(--color-danger); }
.copy-field__value {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--color-text);
}
/* Свёрнутый текст (письмо на шаге отклика): шесть строк и растушёвка — читать
   его целиком человек будет на странице письма, здесь он его только узнаёт. */
.copy-field--clamp .copy-field__value {
    max-height: 9em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
    mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.copy-field--choice .copy-field__value { color: var(--color-text-soft); }
.copy-field__missing,
.copy-field__hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.copy-field__missing-action { margin-top: var(--space-1); }
.copy-field__counter {
    margin: 0;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}
.copy-field__counter.is-over { color: var(--color-warning-strong); font-weight: 600; }
.copy-field__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Навык — кнопка: на площадке навыки вводятся по одному с подсказкой, и
   копировать их приходится тоже по одному. */
.copy-field__tag {
    min-height: var(--tap-min, 44px);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-in-out), color var(--dur-fast) var(--ease-in-out);
}
.copy-field__tag:hover { border-color: var(--color-accent); }
.copy-field__tag:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.copy-field__tag.is-copied { border-color: var(--color-success); color: var(--color-success); }
.copy-field__rows,
.copy-field__items {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}
.copy-field__rows li { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.copy-field__row-level { color: var(--color-text-muted); }
.copy-field__item--header {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-soft);
}
.copy-field__item--header:first-child { margin-top: 0; }
.copy-field__item-label {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-1) 0;
    min-height: var(--tap-min, 44px);
    cursor: pointer;
    line-height: 1.5;
}
.copy-field__item-label input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--color-accent); }
.copy-field__item-label input:not(:checked) + span { color: var(--color-text-muted); text-decoration: line-through; }
.copy-field__scratch { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }

/* ui_task_steps — нумерованная инструкция «что сделать на другом сайте». */
.task-steps {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.task-steps__item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}
.task-steps__num {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-border-strong);
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-soft);
}
.task-steps__body { display: grid; gap: var(--space-2); min-width: 0; padding-top: 4px; }
.task-steps__text { margin: 0; line-height: 1.5; }
.task-steps__action { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ui_option_list — выбор пути ссылками во всю ширину. */
.option-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.option-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-in-out), background var(--dur-fast) var(--ease-in-out);
}
.option-list__item:hover { border-color: var(--color-accent); }
.option-list__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.option-list__icon { color: var(--color-text-muted); display: inline-flex; }
.option-list__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.option-list__label { font-weight: 500; }
.option-list__hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.option-list__chevron { color: var(--color-text-muted); flex-shrink: 0; }

/* Мастер отправки отклика: документы. Список работ — общий ui_work_list,
   здесь только форма сборки и ряд с ценой. */
.send-build { margin: 0; }
.send-build__footer { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.send-build__hint { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Строка места под заголовком второго шага: где опубликована вакансия и
   тихая ссылка сменить место. Смена места живёт там, где место названо, —
   отдельной кнопкой внизу она была пятым действием одного веса. */
/* Строка места — справка под заголовком, а не действие шага: мелким
   приглушённым текстом, и смена места — тихой ссылкой того же цвета. Синяя
   ссылка кеглем основного текста стояла выше инструкции и первой ловила
   взгляд: «уйти отсюда» читалось главным делом экрана. */
.send-place {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-3);
    margin: calc(-1 * var(--space-2)) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-soft);
}
.send-place__change {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min, 44px);
    color: var(--color-text-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.send-place__change:hover { text-decoration-thickness: 2px; color: var(--color-text); }
.send-place__change:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Форма «Резюме уже на hh.ru» обнимает весь ряд кнопок мастера. */
.send-actions-form { margin: 0; }

/* Отметка отправки — ряд кнопок мастера; строка над ним говорит, зачем
   отмечать (без отметки не будет напоминания). */
.send-confirm {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
}
.send-confirm__hint { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

.send-done {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    padding-top: var(--space-5);
}
.send-done__mark { color: var(--color-success); display: inline-flex; }

/* Мастер переноса. */
.transfer-scope { display: grid; gap: var(--space-2); }
.transfer-scope__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
}
.transfer-sections {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.transfer-sections li + li { border-top: 1px solid var(--color-border); }
.transfer-sections__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: var(--space-2) var(--space-4);
    color: var(--color-text);
    text-decoration: none;
}
.transfer-sections__item:hover .transfer-sections__name { color: var(--color-accent); }
.transfer-sections__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-md); }
.transfer-sections__name { flex: 1; min-width: 0; }
.transfer-sections__count {
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}
/* Состояние раздела — тем же размером, что счётчик: строка списка остаётся
   строкой, а не превращается в карточку статуса. */
.transfer-sections__state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}
.transfer-sections__state--done { color: var(--color-success); }
.transfer-sections__state--stale { color: var(--color-warning-strong); }
.transfer-sections__chevron { color: var(--color-text-muted); }
.transfer-intro__profession summary {
    min-height: var(--tap-min, 44px);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--color-accent);
}
.transfer-intro__profession[open] summary { margin-bottom: var(--space-2); }
.transfer-step__where {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-soft);
}
/* Поля одного раздела — одна группа с разделителями, как список документов
   на шаге отправки: пять отдельных карточек подряд читались пятью темами. */
.transfer-fields {
    display: grid;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}
.transfer-fields > .copy-field { border: 0; border-radius: 0; }
.transfer-fields > .copy-field + .copy-field { border-top: 1px solid var(--color-border); }
.transfer-step__checks { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-soft); }
.transfer-step__form { margin: 0; }
.transfer-finish__summary { margin: 0; color: var(--color-text-soft); }

.profile-boards { display: grid; gap: var(--space-2); margin: var(--space-2) 0 var(--space-5); }
.profile-tab-section__title { margin: 0; font-size: var(--font-size-lg); font-weight: 600; }
.profile-tab-section { display: grid; gap: var(--space-3); }
.profile-tab-section__count { color: var(--color-text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Две площадки — две плитки рядом: строками во всю ширину блок занимал
   экран над главным содержимым вкладки. */
@media (min-width: 768px) {
    .profile-boards .option-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.profile-boards__lead { margin: 0 0 var(--space-2); color: var(--color-text-soft); font-size: var(--font-size-sm); max-width: 62ch; }
/* Отметка отправки стоит в конце экрана и не прилипает: вопрос «Отправили
   отклик?» и его кнопки читаются вместе, а прилипшие кнопки без вопроса
   повисали бы над инструкцией. */
.copy-field.is-collapsed .copy-field__value {
    max-height: var(--copy-collapse-height, 18em);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
    mask-image: linear-gradient(to bottom, #000 75%, transparent);
}
.copy-field__toggle {
    justify-self: start;
    min-height: var(--tap-min, 44px);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-accent);
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.copy-field__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Действия вступления мастера переноса — в потоке, не прилипают: над ними
   заметка «Этого в Persium нет», и липкая панель её закрывала. */
.transfer-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.transfer-actions .btn { width: 100%; }
@media (min-width: 600px) {
    .transfer-actions { flex-direction: row; align-items: center; }
    .transfer-actions .btn { width: auto; }
}

/* «Расширение для браузера» в аккаунте. */
.ext-grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) { .ext-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.ext-card { display: grid; gap: var(--space-3); align-content: start; }
.ext-card__title { margin: 0; font-size: var(--font-size-lg); font-weight: 600; }
.account-extension { display: grid; gap: var(--space-4); }
.ext-code {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
    padding: var(--space-4);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.ext-code__label, .ext-code__hint { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.ext-code__value {
    margin: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--color-text);
}
.ext-rules { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ext-rules li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2); align-items: start; line-height: 1.5; }
.ext-rules__icon { color: var(--color-success); margin-top: 3px; }
.ext-devices { display: grid; margin: 0; padding: 0; list-style: none; }
.ext-devices__item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    min-height: 56px;
}
.ext-devices__item + .ext-devices__item { border-top: 1px solid var(--color-border); }
.ext-devices__icon { color: var(--color-text-muted); display: inline-flex; }
.ext-devices__meta { display: grid; gap: 2px; min-width: 0; }
.ext-devices__name { font-weight: 500; overflow-wrap: anywhere; }
.ext-devices__sub { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.ext-devices__revoke { margin: 0; }
.transfer-ext { display: none; }
@media (min-width: 900px) { .transfer-ext { display: block; } }
/* Обратная пара к .transfer-ext: подсказка «расширение — для компьютера»
   видна только там, где его не поставить. */
.ext-mobile-note { display: block; }
@media (min-width: 900px) { .ext-mobile-note { display: none; } }

/* =====================================================================
   Лист во всю страницу (tdoc--bleed) и тёмный лист (tdoc--dark), 20.10.
   Шаблон сам рисует фон и внутренний отступ (--sheet-pad), лист превью
   своих полей не добавляет, PDF печатается без полей принтера, а отступ
   повторяется на каждой странице (box-decoration-break: clone). Иначе
   тёмный или тонированный лист выходил прямоугольником в белой рамке.
   Блок — в конце файла: он обязан идти после общих правил листа превью
   (.tpreview__sheet …) и полей (data-margins).
   ===================================================================== */
.tpreview__sheet { --sheet-pad: var(--space-6); }
.resume-editor__preview-doc[data-margins="narrow"] .tpreview__sheet { --sheet-pad: var(--space-3); }
.resume-editor__preview-doc[data-margins="wide"] .tpreview__sheet { --sheet-pad: var(--space-10, 4rem); }
.tpreview .tpreview__sheet:has(> .tdoc-scope > .tdoc--bleed),
.resume-editor__preview-doc .tpreview__sheet:has(> .tdoc-scope > .tdoc--bleed) {
    padding: 0;
    overflow: hidden;
}
.tdoc--bleed {
    --tdoc-accent: var(--target-resume-accent, var(--color-accent));
    --tdoc-ink-accent: color-mix(in srgb, var(--tdoc-accent) 58%, #1B1D22);
    padding: var(--sheet-pad, var(--space-6));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.design-thumb .tpreview__sheet:has(.tdoc--bleed) { padding: 0; }
.design-thumb .tdoc--bleed { min-height: 1123px; padding: 52px 56px; --sheet-pad: 52px; }

/* Тёмный лист: светлый текст явными значениями (не токенами темы). */
.tdoc.tdoc--dark { background: #16181D; color: #E8EBF0; }
.tdoc.tdoc--dark .tdoc__name,
.tdoc.tdoc--dark .tdoc__exp-title,
.tdoc.tdoc--dark .tdoc__level-name,
.tdoc.tdoc--dark strong { color: #FFFFFF; }
.tdoc.tdoc--dark .tdoc__lead,
.tdoc.tdoc--dark .tdoc__list,
.tdoc.tdoc--dark .tdoc__bullets,
.tdoc.tdoc--dark .tdoc__plain,
.tdoc.tdoc--dark .tdoc__edu,
.tdoc.tdoc--dark .tdoc__contacts,
.tdoc.tdoc--dark .tdoc__side { color: rgba(255, 255, 255, 0.8); }
.tdoc.tdoc--dark .tdoc__exp-period,
.tdoc.tdoc--dark .tdoc__muted,
.tdoc.tdoc--dark .tdoc__meta,
.tdoc.tdoc--dark .tdoc__exp-scope,
.tdoc.tdoc--dark .tdoc__exp-company-context,
.tdoc.tdoc--dark .tdoc__bullets-label { color: rgba(255, 255, 255, 0.58); }
.tdoc.tdoc--dark .tdoc__chips li { border-color: rgba(255, 255, 255, 0.35); color: #FFFFFF; }
.tdoc.tdoc--dark .tdoc__bar,
.tdoc.tdoc--dark .tdoc__side-label { color: var(--tdoc-accent); border-bottom-color: rgba(255, 255, 255, 0.14); }
.tdoc.tdoc--dark .tdoc__lvl { background: rgba(255, 255, 255, 0.16); }
.tdoc.tdoc--dark .tdoc__lvl::before { background: var(--tdoc-accent); }
.tdoc.tdoc--dark .tdoc__ico { display: inline-flex; color: var(--tdoc-accent); }

/* Полоса уровня у тёмных листов — рядом с названием, во всю оставшуюся
   ширину строки. */
.tdoc--neon .tdoc__lvl,
.tdoc--noir .tdoc__lvl,
.tdoc--sand .tdoc__lvl {
    width: 42%;
    height: 6px;
    border-radius: 3px;
}
.tdoc--neon .tdoc__lvl::before,
.tdoc--noir .tdoc__lvl::before,
.tdoc--sand .tdoc__lvl::before { width: calc(var(--lvl-n) * 20%); border-radius: 3px; background: var(--tdoc-accent); }
.tdoc.tdoc--neon .tdoc__lvl,
.tdoc.tdoc--noir .tdoc__lvl { background: rgba(255, 255, 255, 0.16); }

/* ── Неон (neon) — тёмный лист, шапка яркой полосой во всю ширину листа со
   скошенным низом, имя чёрной капителью, квадрат-монограмма. ── */
.tdoc--neon .tdoc__head {
    flex-direction: row-reverse;
    justify-content: space-between;
    margin: calc(-1 * var(--sheet-pad, var(--space-6))) calc(-1 * var(--sheet-pad, var(--space-6))) var(--space-6);
    padding: var(--sheet-pad, var(--space-6)) var(--sheet-pad, var(--space-6)) calc(var(--sheet-pad, var(--space-6)) + 1.75rem);
    border-bottom: 0;
    background: var(--tdoc-accent);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.75rem), 0 100%);
}
.tdoc.tdoc--neon .tdoc__head .tdoc__name {
    color: #111317;
    font-size: clamp(1.9rem, 5.5vw, 2.7rem);
    font-weight: 900;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.tdoc.tdoc--neon .tdoc__head .tdoc__headline { color: #111317; font-weight: 700; }
.tdoc.tdoc--neon .tdoc__head .tdoc__meta { color: rgba(17, 19, 23, 0.78); }
.tdoc.tdoc--neon .tdoc__head .tdoc__meta span:not(:last-child)::after { color: rgba(17, 19, 23, 0.5); }
.tdoc--neon .tdoc__mono {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    background: #16181D;
    color: var(--tdoc-accent);
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
}
.tdoc.tdoc--neon .tdoc__bar,
.tdoc.tdoc--neon .tdoc__side-label {
    border-bottom: 0;
    font-weight: 900;
    letter-spacing: 0.12em;
}

/* ── Нуар (noir) — почти чёрный лист с цветной полосой по правому краю,
   заголовки разделов акцентом обычным регистром, квадрат-монограмма в
   рамке. ── */
.tdoc.tdoc--noir {
    background:
        linear-gradient(to left, var(--tdoc-accent) 0 14px, transparent 14px),
        #1B1D22;
    padding-right: calc(var(--sheet-pad, var(--space-6)) + 14px);
}
.tdoc--noir .tdoc__head { flex-direction: row-reverse; justify-content: space-between; border-bottom: 0; padding-bottom: var(--space-2); }
.tdoc--noir .tdoc__mono {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    border: 2px solid var(--tdoc-accent);
    color: var(--tdoc-accent);
    font-size: 1.45rem;
    font-weight: 700;
    text-transform: uppercase;
}
.tdoc.tdoc--noir .tdoc__head .tdoc__headline { color: var(--tdoc-accent); }
.tdoc.tdoc--noir .tdoc__bar,
.tdoc.tdoc--noir .tdoc__side-label {
    border-bottom: 0;
    padding-bottom: 0;
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
}
.tdoc.tdoc--noir .tdoc__ico { display: none; }

/* ── Пузыри (bubbles) — белый лист с кругами акцента по углам и низу,
   шапка по центру с круглой монограммой, разделы с цветной точкой. ── */
.tdoc.tdoc--bubbles {
    --b1: var(--tdoc-accent);
    --b2: color-mix(in srgb, var(--tdoc-accent) 55%, #fff);
    background:
        radial-gradient(circle 46px at 4% 20px, var(--b2) 98%, transparent),
        radial-gradient(circle 26px at 13% 54px, var(--b1) 98%, transparent),
        radial-gradient(circle 14px at 20% 14px, var(--b2) 98%, transparent),
        radial-gradient(circle 70px at 93% 10px, var(--b1) 98%, transparent),
        radial-gradient(circle 34px at 80% 26px, var(--b2) 98%, transparent),
        radial-gradient(circle 12px at 73% 64px, var(--b1) 98%, transparent),
        radial-gradient(circle 22px at 8% calc(100% - 14px), var(--b2) 98%, transparent),
        radial-gradient(circle 10px at 30% calc(100% - 8px), var(--b1) 98%, transparent),
        radial-gradient(circle 30px at 96% calc(100% - 22px), var(--b2) 98%, transparent),
        #FFFFFF;
    padding-top: calc(var(--sheet-pad, var(--space-6)) + 2.25rem);
}
.tdoc--bubbles .tdoc__head { justify-content: center; border-bottom: 0; text-align: left; }
.tdoc--bubbles .tdoc__mono {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--tdoc-ink-accent);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}
.tdoc.tdoc--bubbles .tdoc__head .tdoc__name { font-weight: 600; letter-spacing: -0.01em; color: #1B1D22; }
.tdoc.tdoc--bubbles .tdoc__head .tdoc__headline { color: var(--tdoc-ink-accent); }
.tdoc.tdoc--bubbles .tdoc__bar,
.tdoc.tdoc--bubbles .tdoc__side-label {
    gap: var(--space-2);
    border-bottom: 0;
    color: #1B1D22;
    letter-spacing: 0.06em;
}
.tdoc.tdoc--bubbles .tdoc__bar::before,
.tdoc.tdoc--bubbles .tdoc__side-label::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tdoc-accent);
}
.tdoc.tdoc--bubbles .tdoc__ico { display: none; }
.tdoc.tdoc--bubbles .tdoc__lvl { --dot: 9px; background: radial-gradient(circle closest-side, transparent 60%, var(--tdoc-accent) 64% 96%, transparent) calc(var(--gap) / -2) 0 / calc(var(--dot) + var(--gap)) var(--dot) repeat-x; }

/* ── Узор (doodle) — белый лист с рисованным узором по верхнему краю
   (полукольца в линию, без картинок), имя тонкое акцентом, языки
   кольцами. ── */
.tdoc.tdoc--doodle {
    background:
        radial-gradient(circle at 50% 0, transparent 17px, #2B2D33 17.5px 18.8px, transparent 19.3px 25px, #2B2D33 25.5px 26.6px, transparent 27.1px 33px, #2B2D33 33.4px 34.4px, transparent 34.9px) 0 0 / 72px 40px repeat-x,
        radial-gradient(circle at 50% 46px, #2B2D33 0 1.6px, transparent 2.2px) 36px 0 / 72px 54px repeat-x,
        #FFFFFF;
    padding-top: calc(var(--sheet-pad, var(--space-6)) + 2.75rem);
}
.tdoc--doodle .tdoc__head { justify-content: center; border-bottom: 0; }
.tdoc--doodle .tdoc__mono {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 2px solid var(--tdoc-accent);
    color: var(--tdoc-ink-accent);
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: uppercase;
}
.tdoc.tdoc--doodle .tdoc__head .tdoc__name { font-weight: 400; letter-spacing: 0; color: var(--tdoc-ink-accent); }
.tdoc.tdoc--doodle .tdoc__head .tdoc__headline { color: #3A3D44; font-weight: 500; }
.tdoc.tdoc--doodle .tdoc__bar,
.tdoc.tdoc--doodle .tdoc__side-label {
    border-bottom: 0;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--tdoc-ink-accent);
}
.tdoc.tdoc--doodle .tdoc__ico { display: none; }
/* Языки — кольца: доля закраски — уровень. */
.tdoc--doodle .tdoc__side-block--languages .tdoc__levels { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.tdoc--doodle .tdoc__side-block--languages .tdoc__level-row { flex-direction: column-reverse; align-items: center; gap: 6px; text-align: center; max-width: 6rem; }
.tdoc--doodle .tdoc__side-block--languages .tdoc__lvl {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 50%;
    background: conic-gradient(var(--tdoc-accent) calc(var(--lvl-n) * 20%), color-mix(in srgb, var(--tdoc-accent) 22%, transparent) 0);
    -webkit-mask: radial-gradient(circle, transparent 58%, #000 61%);
    mask: radial-gradient(circle, transparent 58%, #000 61%);
}
.tdoc--doodle .tdoc__side-block--languages .tdoc__lvl::before { content: none; }

/* ── Песок (sand) — тонированный лист цвета палитры, разделы в пилюлях-
   обводках с иконкой, круглая тёмная монограмма. ── */
.tdoc.tdoc--sand { background: color-mix(in srgb, var(--tdoc-accent) 46%, #FFFFFF); }
.tdoc--sand .tdoc__head { flex-direction: row-reverse; justify-content: space-between; border-bottom: 0; }
.tdoc--sand .tdoc__mono {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #1B1D22;
    color: #FFFFFF;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
}
.tdoc.tdoc--sand .tdoc__head .tdoc__name { color: #1B1D22; font-weight: 800; }
.tdoc.tdoc--sand .tdoc__head .tdoc__headline { color: #1B1D22; }
.tdoc.tdoc--sand .tdoc__bar,
.tdoc.tdoc--sand .tdoc__side-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 3px var(--space-3);
    border: 1.5px solid #1B1D22;
    border-radius: 999px;
    color: #1B1D22;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: none;
}
.tdoc.tdoc--sand .tdoc__ico { display: inline-flex; color: #1B1D22; }
.tdoc.tdoc--sand .tdoc__lvl { background: rgba(27, 29, 34, 0.14); }
.tdoc.tdoc--sand .tdoc__lvl::before { background: #1B1D22; }
.tdoc.tdoc--sand .tdoc__chips li { border-color: rgba(27, 29, 34, 0.4); }

/* ── Печать листа во всю страницу. Фон страницы — фон листа: короткий
   документ иначе кончался белым низом страницы. ── */
.print-body--bleed { background: transparent !important; }
.print-body--bleed .print-resume { padding: 0; margin: 0; max-width: none; }
.print-body--bleed .tdoc--bleed { min-height: 100vh; }
html:has(.print-body--bleed .tdoc--dark) { background: #16181D; }
html:has(.print-body--bleed .tdoc--noir) { background: #1B1D22; }
html:has(.print-body--bleed .tdoc--bubbles),
html:has(.print-body--bleed .tdoc--doodle) { background: #FFFFFF; }
html:has(.print-body--bleed .tdoc--sand) { background: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 46%, #FFFFFF); }
.print-body .tdoc.tdoc--dark,
.print-body .tdoc.tdoc--dark * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-body .tdoc.tdoc--sand .tdoc__bar,
.print-body .tdoc.tdoc--sand .tdoc__side-label,
.print-body .tdoc.tdoc--sand .tdoc__ico,
.print-body .tdoc.tdoc--sand .tdoc__ico *,
.print-body .tdoc.tdoc--bubbles .tdoc__bar,
.print-body .tdoc.tdoc--bubbles .tdoc__side-label { color: #1B1D22 !important; }
.print-body .tdoc.tdoc--sand .tdoc__mono,
.print-body .tdoc.tdoc--bubbles .tdoc__mono { color: #FFFFFF !important; }
.print-body .tdoc.tdoc--doodle .tdoc__head .tdoc__name,
.print-body .tdoc.tdoc--doodle .tdoc__bar,
.print-body .tdoc.tdoc--doodle .tdoc__side-label,
.print-body .tdoc.tdoc--doodle .tdoc__mono,
.print-body .tdoc.tdoc--bubbles .tdoc__head .tdoc__headline {
    color: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 58%, #1B1D22) !important;
}
.print-body .tdoc.tdoc--neon .tdoc__head .tdoc__name,
.print-body .tdoc.tdoc--neon .tdoc__head .tdoc__headline { color: #111317 !important; }
.print-body .tdoc.tdoc--neon .tdoc__head .tdoc__meta,
.print-body .tdoc.tdoc--neon .tdoc__head .tdoc__meta * { color: rgba(17, 19, 23, 0.78) !important; }

/* ── Мозаика (mosaic) — шапка во всю ширину листа гранями: полупрозрачные
   клинья поверх цвета акцента, как низкополигональная заливка. Одна колонка
   текста под ней. ── */
.tdoc.tdoc--mosaic { background: #FFFFFF; font-family: var(--font-sans); }
.tdoc--mosaic .tdoc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin: calc(-1 * var(--sheet-pad, var(--space-6))) calc(-1 * var(--sheet-pad, var(--space-6))) var(--space-6);
    padding: calc(var(--sheet-pad, var(--space-6)) + 0.5rem) var(--sheet-pad, var(--space-6)) calc(var(--sheet-pad, var(--space-6)) + 0.5rem);
    background:
        linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.13) 34% 58%, transparent 58%),
        linear-gradient(62deg, transparent 0 50%, rgba(0, 0, 0, 0.16) 50% 72%, transparent 72%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0 20%, transparent 20%),
        linear-gradient(28deg, transparent 0 74%, rgba(255, 255, 255, 0.10) 74%),
        linear-gradient(142deg, transparent 0 82%, rgba(0, 0, 0, 0.14) 82%),
        linear-gradient(80deg, rgba(0, 0, 0, 0.1) 0 12%, transparent 12%),
        var(--tdoc-accent);
}
.tdoc.tdoc--mosaic .tdoc__head .tdoc__name { color: #FFFFFF; font-size: clamp(1.9rem, 5.5vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; }
.tdoc.tdoc--mosaic .tdoc__head .tdoc__headline { color: rgba(255, 255, 255, 0.88); font-weight: 600; }
.tdoc.tdoc--mosaic .tdoc__head .tdoc__meta { color: rgba(255, 255, 255, 0.78); }
.tdoc.tdoc--mosaic .tdoc__head .tdoc__meta span:not(:last-child)::after { color: rgba(255, 255, 255, 0.5); }
.tdoc--mosaic .tdoc__mono {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    color: #FFFFFF;
    font-size: 1.45rem;
    font-weight: 800;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.16);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.tdoc.tdoc--mosaic .tdoc__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tdoc-accent);
}
.tdoc.tdoc--mosaic .tdoc__bar::before {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    background: var(--tdoc-accent);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.tdoc--mosaic .tdoc__exp-title { font-weight: 700; }

/* ── Аура (aura) — размытые цветные пятна по верху листа, переходящие в
   белый; тёмный текст, круглая монограмма. ── */
.tdoc.tdoc--aura {
    background:
        radial-gradient(42% 220px at 12% 0, color-mix(in srgb, var(--tdoc-accent) 85%, transparent), transparent 72%),
        radial-gradient(40% 200px at 58% 0, color-mix(in srgb, var(--tdoc-accent) 45%, #FFD9A8), transparent 75%),
        radial-gradient(38% 240px at 96% 30px, color-mix(in srgb, var(--tdoc-accent) 60%, #B7A6FF), transparent 74%),
        #FFFFFF;
    background-repeat: no-repeat;
    font-family: var(--font-sans);
}
.tdoc--aura .tdoc__head { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) 0 var(--space-6); }
.tdoc--aura .tdoc__head-main { order: 2; }
.tdoc--aura .tdoc__mono {
    order: 1;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--tdoc-ink-accent);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 6px 18px -8px rgba(16, 18, 26, 0.35);
}
.tdoc.tdoc--aura .tdoc__head .tdoc__name { color: #1B1D22; font-size: clamp(1.9rem, 5.5vw, 2.5rem); font-weight: 750; letter-spacing: -0.02em; }
.tdoc.tdoc--aura .tdoc__head .tdoc__headline { color: #1B1D22; font-weight: 500; }
.tdoc.tdoc--aura .tdoc__bar {
    padding-bottom: var(--space-1);
    border-bottom: 2px solid color-mix(in srgb, var(--tdoc-accent) 70%, transparent);
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tdoc-ink-accent);
}

/* ── Диалог (dialog) — заголовки разделов пузырями чата с хвостиком,
   круглая монограмма, уровни точками. ── */
.tdoc--dialog .tdoc__head { border-bottom: 0; }
.tdoc--dialog .tdoc__mono {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--tdoc-accent);
    color: #FFFFFF;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
}
.tdoc.tdoc--dialog .tdoc__bar,
.tdoc.tdoc--dialog .tdoc__side-label {
    position: relative;
    display: inline-flex;
    width: auto;
    margin-bottom: var(--space-3);
    padding: 5px 14px;
    border: 0;
    border-radius: 16px 16px 16px 4px;
    background: var(--tdoc-accent);
    color: #FFFFFF;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}
.tdoc.tdoc--dialog .tdoc__bar::after,
.tdoc.tdoc--dialog .tdoc__side-label::after {
    content: "";
    position: absolute;
    left: -5px;
    bottom: 0;
    width: 12px;
    height: 12px;
    background: var(--tdoc-accent);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.tdoc.tdoc--dialog .tdoc__ico { display: inline-flex; color: #FFFFFF; }

/* ── Колонна (column) — тёмная полоса цвета акцента по левому краю во всю
   высоту листа, подписи разделов в ней, текст справа. Одна колонка текста
   по порядку чтения: подпись раздела стоит перед его текстом. ── */
.tdoc.tdoc--column {
    --band: 12.5rem;
    background: linear-gradient(to right, color-mix(in srgb, var(--tdoc-accent) 82%, #0B0E14) 0 var(--band), #FFFFFF var(--band));
    font-family: var(--font-sans);
}
.tdoc--column .tdoc__head,
.tdoc--column .tdoc__section {
    display: grid;
    grid-template-columns: calc(var(--band) - var(--sheet-pad, var(--space-6)) - var(--space-5)) minmax(0, 1fr);
    column-gap: calc(var(--space-5) * 2);
    align-items: start;
}
.tdoc--column .tdoc__head { padding-bottom: var(--space-5); }
.tdoc--column .tdoc__head-main { grid-column: 2; grid-row: 1; }
.tdoc--column .tdoc__mono {
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 4.25rem;
    height: 4.25rem;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
}
.tdoc.tdoc--column .tdoc__head .tdoc__name { font-size: clamp(1.9rem, 5vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; color: #1B1D22; }
.tdoc.tdoc--column .tdoc__head .tdoc__headline { color: var(--tdoc-ink-accent); font-weight: 600; }
.tdoc--column .tdoc__section > * { grid-column: 2; }
.tdoc.tdoc--column .tdoc__section > .tdoc__bar {
    grid-column: 1;
    grid-row: 1 / span 40;
    margin: 0.2em 0 0;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FFFFFF;
}
@media (max-width: 599px) {
    .tdoc.tdoc--column { --band: 0px; border-left: 8px solid var(--tdoc-accent); }
    .tdoc--column .tdoc__head,
    .tdoc--column .tdoc__section { display: block; }
    .tdoc--column .tdoc__mono { display: none; }
    .tdoc.tdoc--column .tdoc__section > .tdoc__bar { text-align: left; color: var(--tdoc-ink-accent); }
}
.design-thumb .tdoc.tdoc--column { --band: 12.5rem; border-left: 0; }
.design-thumb .tdoc--column .tdoc__head,
.design-thumb .tdoc--column .tdoc__section { display: grid; }
.design-thumb .tdoc--column .tdoc__mono { display: inline-flex; }
.design-thumb .tdoc.tdoc--column .tdoc__section > .tdoc__bar { text-align: right; color: #FFFFFF; }

/* ── Блоки (blocks) — квадрат цвета-выделителя у имени и плашка за началом
   каждого заголовка раздела; навыки на светлой заливке. ── */
.tdoc.tdoc--blocks { --tdoc-accent: var(--target-resume-accent, var(--color-accent)); font-family: var(--font-sans); }
.tdoc.tdoc--blocks .tdoc__head .tdoc__name {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: clamp(1.9rem, 5.5vw, 2.6rem);
    font-weight: 850;
    letter-spacing: -0.02em;
}
.tdoc.tdoc--blocks .tdoc__head .tdoc__name::before {
    content: "";
    flex: none;
    width: 0.8em;
    height: 0.8em;
    background: var(--tdoc-accent);
}
.tdoc.tdoc--blocks .tdoc__bar {
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-3);
    padding-left: 4px;
    font-size: 0.92rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1B1D22;
    isolation: isolate;
}
.tdoc.tdoc--blocks .tdoc__bar::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 35%;
    width: 2.6em;
    height: 0.9em;
    background: var(--tdoc-accent);
}
.tdoc.tdoc--blocks .tdoc__chips li { border: 0; border-radius: 3px; background: color-mix(in srgb, var(--tdoc-accent) 40%, #FFFFFF); color: #1B1D22; }

/* Печать пяти шаблонов: белый текст на шапке и полосе, тёмный на
   выделителях. */
html:has(.print-body--bleed .tdoc--mosaic),
html:has(.print-body--bleed .tdoc--aura),
html:has(.print-body--bleed .tdoc--column) { background: #FFFFFF; }
.print-body .tdoc.tdoc--mosaic .tdoc__head *,
.print-body .tdoc.tdoc--dialog .tdoc__bar,
.print-body .tdoc.tdoc--dialog .tdoc__side-label,
.print-body .tdoc.tdoc--dialog .tdoc__ico,
.print-body .tdoc.tdoc--dialog .tdoc__ico *,
.print-body .tdoc.tdoc--dialog .tdoc__mono,
.print-body .tdoc.tdoc--column .tdoc__mono,
.print-body .tdoc.tdoc--column .tdoc__section > .tdoc__bar { color: #FFFFFF !important; }
.print-body .tdoc.tdoc--mosaic .tdoc__head .tdoc__meta,
.print-body .tdoc.tdoc--mosaic .tdoc__head .tdoc__meta * { color: rgba(255, 255, 255, 0.8) !important; }
.print-body .tdoc.tdoc--blocks .tdoc__bar { color: #1B1D22 !important; }
.print-body .tdoc.tdoc--aura .tdoc__bar,
.print-body .tdoc.tdoc--aura .tdoc__mono,
.print-body .tdoc.tdoc--column .tdoc__head .tdoc__headline {
    color: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 58%, #1B1D22) !important;
}

/* Монограмма на узком экране меньше: на 375px квадрат в 68px отнимал у имени
   и контактов треть строки. */
@media (max-width: 599px) {
    .tdoc .tdoc__mono { width: 3rem; height: 3rem; font-size: 1rem; }
}

/* Навыки колонки без уровней — плашками: компактно, переносятся по ширине
   колонки. */
.tdoc__side-chips { gap: 6px; }
.tdoc__side-chips li { padding: 2px var(--space-2); font-size: 0.78rem; }
.tdoc.tdoc--dark .tdoc__side-chips li { border-color: color-mix(in srgb, var(--tdoc-accent) 55%, transparent); }

/* Навыки с уровнем в боковой колонке «Двухколоночного» и «Двух тонов». */
.tdoc__aside .tdoc__levels { gap: 6px; }
.tdoc__aside .tdoc__level-row { font-size: 0.8rem; line-height: 1.35; }
.tdoc--sidebar:not(.tdoc--duo) .tdoc__aside .tdoc__lvl { --tdoc-accent: rgba(255, 255, 255, 0.95); }
.tdoc--sidebar:not(.tdoc--duo) .tdoc__aside .tdoc__lvl { background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.28) 96%, transparent) calc(var(--gap) / -2) 0 / calc(var(--dot) + var(--gap)) var(--dot) repeat-x; }
.tdoc--duo .tdoc__aside .tdoc__lvl { --tdoc-accent: var(--target-resume-accent, var(--color-accent)); }
.tdoc__aside .tdoc__side-chips li { border-color: rgba(255, 255, 255, 0.4); color: inherit; }
.tdoc--duo .tdoc__aside .tdoc__side-chips li { border-color: color-mix(in srgb, var(--target-resume-accent, var(--color-accent)) 40%, transparent); }

@page share-sheet { margin: 0; }

/* ===================================================================
   ui_share_bar — доли одной полосой (воронка откликов, уровни навыков; 25.10).
   Тон сегмента и точки — тон дорожки этапа, тот же, что в колонке
   канбана: этап узнаётся по цвету на обоих видах. Подписи — фильтр:
   на телефоне одна прокручиваемая строка (data-scroll-active даёт
   затухание у края), на широком экране — переносятся.
   =================================================================== */
.share-bar { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; min-width: 0; }
.share-bar__track {
    display: flex;
    gap: 3px;
    height: 0.625rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(var(--color-slate-rgb), 0.14);
}
.share-bar__seg { min-width: 0.375rem; background: var(--seg-tone, var(--color-text-muted)); }
.share-bar__legend {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.share-bar__legend::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .share-bar__legend { flex-wrap: wrap; overflow: visible; } }
.share-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    color: var(--color-text-soft);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}
a.share-bar__item:hover { background: rgba(var(--color-slate-rgb), 0.12); color: var(--color-text); }
.share-bar__item.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.share-bar__count { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.share-bar__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--seg-tone, var(--color-text-muted)); flex: none; }
.share-bar__seg--saved,       .share-bar__item--saved       { --seg-tone: var(--color-text-muted); }
.share-bar__seg--shortlisted, .share-bar__item--shortlisted { --seg-tone: var(--color-warning); }
.share-bar__seg--applied,     .share-bar__item--applied     { --seg-tone: var(--color-accent); }
.share-bar__seg--screening,   .share-bar__item--screening   { --seg-tone: var(--color-violet); }
.share-bar__seg--interview,   .share-bar__item--interview   { --seg-tone: var(--color-teal); }
.share-bar__seg--offer,       .share-bar__item--offer       { --seg-tone: var(--color-success); }
.share-bar__seg--closed,      .share-bar__item--closed      { --seg-tone: rgba(var(--color-slate-rgb), 0.55); }
/* Уровни навыков — ступени одного акцентного тона: чем выше уровень, тем
   плотнее цвет; «без уровня» — нейтральный серый, не тревога. */
.share-bar__seg--expert,     .share-bar__item--expert     { --seg-tone: rgb(var(--color-accent-rgb)); }
.share-bar__seg--proficient, .share-bar__item--proficient { --seg-tone: rgba(var(--color-accent-rgb), 0.7); }
.share-bar__seg--working,    .share-bar__item--working    { --seg-tone: rgba(var(--color-accent-rgb), 0.45); }
.share-bar__seg--beginner,   .share-bar__item--beginner   { --seg-tone: rgba(var(--color-accent-rgb), 0.25); }
.share-bar__seg--unset,      .share-bar__item--unset      { --seg-tone: rgba(var(--color-slate-rgb), 0.35); }
/* Подписи-справка (без ссылок): видны все сразу, переносятся, а не
   прокручиваются — фильтровать нечего, прятать часть чисел за краем незачем.
   Без пилюли и внутреннего отступа: подписи стоят по левому краю полосы. */
.share-bar__legend:not(:has(a)) { flex-wrap: wrap; overflow: visible; column-gap: var(--space-4); row-gap: var(--space-1); }
span.share-bar__item { min-height: 1.75rem; padding: 0; }
.career-skills-levels { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.career-skills-levels__hint { margin: 0; color: var(--color-text-muted); font-size: 0.875rem; }
/* Вакансия на телефоне, когда кнопок три (отклик, резюме, «сохранено»):
   главная — первым рядом во всю ширину, вторые — поровну следующим. Без
   этого они шли лесенкой разной ширины. */
@media (max-width: 639px) {
    .page-shell:has(> .job-detail) .page-head__actions:has(> :nth-child(3)) { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
    .page-shell:has(> .job-detail) .page-head__actions:has(> :nth-child(3)) > .btn--primary,
    .page-shell:has(> .job-detail) .page-head__actions:has(> :nth-child(3)) > form:not(.head-actions-form--save) { order: -1; flex: 1 1 100%; }
    .page-shell:has(> .job-detail) .page-head__actions:has(> :nth-child(3)) > .btn:not(.btn--primary) { flex: 1 1 0; min-width: 0; justify-content: center; }
}
/* Воронка отклика на телефоне — полосой из шести делений под строкой
   «Шаг 2 из 6»: пройденные залиты, текущее — акцентом. Подписи этапов
   остаются для скринридера. Полный stepper с подписями — с планшета: на
   375px он съедал первый экран. */
@media (max-width: 47.99rem) {
    .apps-now__steps { display: block; }
    .apps-now__steps .step-progress { display: flex; flex-direction: row; gap: 3px; margin: 0; padding: 0; }
    .apps-now__steps .step-progress__item { flex: 1 1 0; height: 0.375rem; min-height: 0; margin: 0; padding: 0; border-radius: 999px; background: rgba(var(--color-slate-rgb), 0.18); }
    .apps-now__steps .step-progress__item::before,
    .apps-now__steps .step-progress__item::after { content: none; display: none; }
    .apps-now__steps .step-progress__item--done { background: var(--color-teal); }
    .apps-now__steps .step-progress__item--active { background: var(--color-accent); }
    .apps-now__steps .step-progress__bullet { display: none; }
    .apps-now__steps .step-progress__body { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Шкала пути к роли в ui_target_fit: четыре ступени, пройденные залиты
   тоном вердикта, текущая — тоном и подписью вперёд. Подписи мелкие и
   переносятся в две строки на телефоне: читаются как шкала, а не как текст. */
.fit-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin: var(--space-2) 0 var(--space-3); padding: 0; list-style: none; max-width: 28rem; }
.fit-scale__step { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.fit-scale__bar { height: 0.375rem; border-radius: 999px; background: rgba(var(--color-slate-rgb), 0.16); }
.fit-scale__label { font-size: 0.75rem; line-height: 1.25; color: var(--color-text-muted); }
.fit-scale__step.is-current .fit-scale__label { color: var(--color-text); font-weight: 600; }
.fit-scale--far      { --fit-tone: var(--color-text-muted); }
.fit-scale--stretch  { --fit-tone: var(--color-warning); }
.fit-scale--close    { --fit-tone: var(--color-accent); }
.fit-scale--match    { --fit-tone: var(--color-sage, var(--color-success)); }
.fit-scale__step.is-passed .fit-scale__bar { background: color-mix(in srgb, var(--fit-tone) 45%, transparent); }
.fit-scale__step.is-current .fit-scale__bar { background: var(--fit-tone); }
.target-fit--compact .fit-scale { display: none; }
/* Подписи узлов горизонта — с ореолом цвета поля, как на картах: дорога
   выбранного пути проходила сквозь «СТО · корпорация» и читалась
   зачёркиванием. Ореол прячет линию под буквами, не закрывая её плашкой. */
.ch-node__label > span,
.ch-origin__label > *,
.ch-station__label {
    --ch-halo: var(--color-surface);
    text-shadow:
        0 0 2px var(--ch-halo), 0 0 2px var(--ch-halo),
        1px 1px 0 var(--ch-halo), -1px -1px 0 var(--ch-halo),
        1px -1px 0 var(--ch-halo), -1px 1px 0 var(--ch-halo),
        2px 0 0 var(--ch-halo), -2px 0 0 var(--ch-halo),
        0 2px 0 var(--ch-halo), 0 -2px 0 var(--ch-halo);
}
/* С 29.10 подпись узла — непрозрачная карточка: линия под буквы не
   заходит, а ореол на тёмной плите выбранного пути обводил текст белым. */
.ch-node__label > span, .ch-node__label .stat-bar > * { text-shadow: none; }
@container ch-plot (max-width: 560px) {
    .ch-node:not(.ch-node--selected) .ch-node__label > span { text-shadow: 0 0 2px var(--color-surface), 1px 1px 0 var(--color-surface), -1px -1px 0 var(--color-surface); }
}
/* ui_pick_row — строка истории подборки (25.10). Список строк одной
   поверхностью с разделителями: история — справочник прошлых показов, а не
   лента карточек. Кольцо процента — то же, что у карточки, меньше. */
.pick-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.pick-rows > li + li { border-top: 1px solid var(--color-border-soft); }
.pick-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ring main" "ring side";
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    align-items: center;
    padding: var(--space-3) var(--space-4);
}
.pick-row__ring { grid-area: ring; align-self: start; --ring-size: 2.5rem; --ring-w: 3px; }
.pick-row__ring .job-card__ring-num { font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pick-row__ring--none { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(var(--color-slate-rgb), 0.1); color: var(--color-text-muted); }
.pick-row__main { grid-area: main; min-width: 0; }
.pick-row__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.pick-row__title a { color: var(--color-text); text-decoration: none; }
.pick-row__title a:hover { color: var(--color-accent); }
/* Мета — строкой текста, а не flex: при переносе точка-разделитель уходит
   в конец строки вместе со словом, а не начинает новую строку. */
.pick-row__meta { margin: 0.125rem 0 0; color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.5; }
.pick-row__meta > * + *::before { content: " · "; color: var(--color-text-muted); }
.pick-row__note { display: flex; align-items: flex-start; gap: 0.375rem; margin: var(--space-1) 0 0; color: var(--color-text-soft); font-size: 0.8125rem; }
.pick-row__note .icon { flex: none; margin-top: 0.15em; }
.pick-row__side { grid-area: side; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* Пустая колонка решения прячется целиком: иначе сетка заводила под неё
   неявный ряд с зазором, и строка без решения была выше строки с ним. */
.pick-row__side:not(:has(> *)) { display: none; }
.pick-row:not(:has(.pick-row__side > *)) { grid-template-areas: "ring main"; }
.pick-row__status { color: var(--color-text-muted); font-size: 0.8125rem; }
.pick-row__restore { margin: 0; }
.pick-row--discarded .pick-row__title a,
.pick-row--vacancy_closed .pick-row__title a { color: var(--color-text-soft); }
@media (min-width: 768px) {
    .pick-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ring main side"; }
    .pick-row__ring { align-self: center; }
    .pick-row__side { justify-content: flex-end; }
}
/* Вкладки «Вакансий» на телефоне — одна полоса: вкладки раздела несут
   ленту, сохранённые и отклики, и вторая полоса ниже их повторяла. */
@media (max-width: 991.98px) {
    .tab-strip.jobs-tabs--dup { display: none; }
}
/* Пилюля «Редактировать» стоит своей строкой над листом, а не поверх его
   верхнего края: на телефоне она закрывала имя в шапке документа, на
   десктопе — квадрат инициалов. При прокрутке по-прежнему липнет к окну. */
.artifact-doc__edit { height: auto; margin-bottom: var(--space-2); }
.artifact-doc__edit .artifact-doc__edit-btn { transform: none; margin-right: 0; }
/* Доска на десктопе помещается целиком (25.10): шесть рабочих колонок и
   узкая седьмая — «Закрытые», это архив. Прежние дорожки не уже 13.5rem
   требовали ~1500px при ~1050 доступных: «Оффер» обрезался, «Закрытые»
   уходили за край без признака прокрутки. Длинное слово в названии
   переносится, а не режется посреди буквы. */
@media (min-width: 64rem) {
    .kanban {
        grid-auto-flow: row;
        grid-template-columns: repeat(6, minmax(8.5rem, 1fr)) minmax(6.5rem, 0.6fr);
        grid-auto-columns: unset;
        gap: var(--space-2);
    }
    .kanban__col, .kanban__col[data-kanban-col="closed"] { min-width: 0; }
}
.kanban__card-title { overflow-wrap: break-word; }
@media (min-width: 64rem) {
    /* Ручка перетаскивания — узкой полосой у правого края, а не колонкой
       в 2.25rem: в узкой колонке она отнимала треть строки названия. */
    .kanban__card { padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3); }
    .kanban__card-link { padding-right: 1.125rem; }
    .kanban__card-grip { top: 6px; right: 0; min-width: 1.5rem; min-height: 2rem; }
    /* Узкой колонке — три строки названия чуть меньшим кеглем: на двух
       строках «Руководитель отдела» резался на первом же слове. */
    .kanban__card-title { -webkit-line-clamp: 3; line-clamp: 3; font-size: 0.8125rem; letter-spacing: -0.005em; }
    .kanban__col-title { font-size: 0.875rem; }
    .kanban__col { padding: var(--space-2); }
    .kanban__col-head { flex-wrap: nowrap; min-width: 0; }
    .kanban__col-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Развёрнутый горизонт на телефоне (25.10). Панель узла — нижний лист во
   всю ширину окна, а не карточка посреди поля над легендой (она резалась
   справа краем полотна). Подсказка «колесо мыши или два пальца» про
   мышь и ложилась на подпись верхнего узла — жесты на телефоне очевидны,
   а кнопки масштаба остаются. */
@media (max-width: 767.98px) {
    .career-horizon.is-expanded .career-horizon__panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 70vh;
        padding-inline: max(var(--space-4), env(safe-area-inset-left)) max(var(--space-4), env(safe-area-inset-right));
    }
    .career-horizon.is-expanded .career-horizon__hint { display: none; }
}
/* В панели горизонта карточка варианта не режет края: overflow:hidden
   нужен ей в сетке (засветка), а в панели срезал рамку кнопки «Открыть
   вариант» и правый чип. */
.career-horizon__panel .career-vector { overflow: visible; }
/* Карточка профессии: подвал с действием прижат к низу, чтобы кнопки
   соседних карточек стояли на одной линии при разной длине фактов. */
.profession-card__foot { margin-top: auto; }
.resumes-ws__hero { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
/* ui_app_status_badge — точка тона этапа на нейтральной подложке; тоны те же,
   что у полосы воронки и колонок канбана. */
.app-status { display: inline-flex; align-items: center; gap: 0.375rem; }
.app-status__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; background: var(--lane-tone, var(--color-text-muted)); }
.app-status--saved       { --lane-tone: var(--color-text-muted); }
.app-status--shortlisted { --lane-tone: var(--color-warning); }
.app-status--applied     { --lane-tone: var(--color-accent); }
.app-status--screening   { --lane-tone: var(--color-violet); }
.app-status--interview   { --lane-tone: var(--color-teal); }
.app-status--offer       { --lane-tone: var(--color-success); }
.app-status--closed      { --lane-tone: rgba(var(--color-slate-rgb), 0.55); }
.career-skills-levels__done { margin: 0 0 var(--space-4); color: var(--color-text-soft); }
/* Блок «своими словами» с заголовком: подпись поля повторяла заголовок
   строкой ниже («Что важно именно в этом направлении» → «Что важно в этом
   направлении»). Заголовок уже называет поле — подпись остаётся для
   скринридера. */
.user-context:has(.user-context__title) .field:has(.user-context__input) > .field__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Действия вакансии (job_actions, 04.11): главное во всю ширину, под ним
   пара равных кнопок — «Сохранить» акцентным текстом, «Не моё» тихим.
   С 768px — одним рядом справа от заголовка. Пара из одной кнопки
   (сохранено, резюме нет) занимает всю ширину сама: колонки авто. */
.job-actions { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.job-actions__main, .job-actions__pair > form { margin: 0; }
.job-actions__pair { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); }
.job-actions .btn { justify-content: center; }
.job-actions__save.btn--secondary { color: var(--color-accent); }
.job-actions__dismiss.btn--secondary { color: var(--color-text-muted); }
.job-actions__resume { align-self: center; }
@media (min-width: 768px) {
    .job-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; width: auto; }
    .job-actions__pair { display: flex; }
    .job-actions .btn--full { width: auto; }
    .job-actions__resume { flex-basis: 100%; align-self: auto; justify-content: flex-end; }
}

/* Цель якоря, к которой подвели (app.js revealTarget): короткая подсветка
   строки, чтобы глаз нашёл, куда привели. Раскрытая дальняя строка шага
   разворачивается, а не вспыхивает. Без анимации при сниженном движении. */
@keyframes reveal-flash {
    from { background-color: rgba(var(--color-accent-rgb), 0.14); }
    to { background-color: transparent; }
}
@keyframes reveal-open {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
.is-revealed { animation: reveal-flash 1.6s ease-out; border-radius: var(--radius-md); scroll-margin-top: calc(var(--tap-min) + var(--space-4)); }
.is-revealed details[open] > :not(summary) { animation: reveal-open 0.24s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .is-revealed, .is-revealed details[open] > :not(summary) { animation: none; }
}

/* ── «Исправить» в описании карьеры (ui_polish_offer, ui_polish_review) ──
   Предложение — та же плоская карточка панели, что «Как описана ваша
   карьера» над ним: рамка 1px, радиус lg, 16px, без тени. Значок — плитка
   accent: это действие модели (пара к .btn--ai на кнопке). Узко (рейл
   резюме, телефон) кнопка уходит под текст. */
.polish-offer {
    container-type: inline-size;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
/* Сетка — внутренним блоком: контейнерный запрос действует на потомков
   контейнера, на саму карточку — нет. */
.polish-offer__grid {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    align-items: start;
}
/* Плашка значка — тем же языком, что строки рядом (sx-row__icon,
   ui_icon_plate outlined): обводка тона, градиент сверху, блик, тень. */
.polish-offer__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background:
        radial-gradient(120% 120% at 50% 0%,
            rgba(var(--color-accent-rgb), 0.24) 0%,
            rgba(var(--color-accent-rgb), 0.08) 55%,
            transparent 100%),
        var(--color-surface);
    border: 1px solid rgba(var(--color-accent-rgb), 0.35);
    color: var(--color-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 2px 8px -3px rgba(var(--color-accent-rgb), 0.18);
}
.polish-offer__icon .icon { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
.polish-offer--busy .polish-offer__icon,
.polish-offer--remeasure .polish-offer__icon { background: var(--color-bg-soft); border-color: var(--color-border); color: var(--color-text-muted); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.polish-offer__body { display: grid; gap: 2px; min-width: 0; }
.polish-offer__title { margin: 0; font-size: var(--font-size-sm); font-weight: 600; line-height: 1.35; color: var(--color-text); }
.polish-offer__text { margin: 0; font-size: var(--font-size-xs); line-height: 1.45; color: var(--color-text-soft); max-width: 60ch; }
.polish-offer__quota { margin-top: var(--space-2); }
.polish-offer__action { grid-column: 2; display: flex; }
@container (min-width: 520px) {
    .polish-offer__grid { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; }
    .polish-offer__action { grid-column: 3; justify-content: flex-end; }
}
/* Подвал карточки строк «Как описана ваша карьера»: волосяная линия, без
   своей рамки. Предложение в подвале — без значка и заголовка: строки над
   ним уже назвали, что исправится; колонка текста — под текстом строк. */
.polish-offer--foot {
    margin-top: var(--space-3);
    padding: var(--space-3) 0 0;
    border: 0;
    border-top: 1px solid var(--color-border-soft);
    border-radius: 0;
    background: none;
}
.polish-offer--foot.polish-offer--offer .polish-offer__grid { grid-template-columns: minmax(0, 1fr); }
.polish-offer--foot.polish-offer--offer .polish-offer__action { grid-column: 1; }
@container (min-width: 520px) {
    .polish-offer--foot.polish-offer--offer .polish-offer__grid { grid-template-columns: minmax(0, 1fr) auto; padding-left: calc(40px + var(--space-3)); }
    .polish-offer--foot.polish-offer--offer .polish-offer__action { grid-column: 2; }
}
.growth-sections__card { container-type: inline-size; }
.growth-sections__card > .progress-indicator { margin-top: var(--space-3); }
/* Остаток в предложении — полоса над подписью, подпись строкой текста:
   флекс-ряд с переносом ставил «Правки текста:» отдельной строкой, а дату
   сброса рвал на «27 / ноя». Фразы переносятся целиком. */
.polish-offer .quota-meter { display: block; }
.polish-offer .quota-meter__bar { display: block; width: 120px; margin-bottom: 6px; }
.polish-offer .quota-meter__label { margin-right: 4px; white-space: nowrap; }
.polish-offer .quota-meter__text { white-space: normal; }
/* Фразы остатка и сброса не рвутся внутри: «94 из / 100» и «27 / ноя». */
.quota-meter__reset { white-space: nowrap; }
/* Строка списка внутри карточки (страница должности): волосяная линия
   вместо своей рамки, значок — в колонке значков строк над ним. */
.polish-offer--inset {
    padding: var(--space-3) 0 0;
    border: 0;
    border-top: 1px solid var(--color-border-soft);
    border-radius: 0;
    background: none;
}
.polish-offer--inset .polish-offer__icon { align-self: start; }
/* Колонка качества — стопкой с зазором: «Исправим текст за вас» стоит в
   обёртке с якорем, и правило по прямому потомку .polish-offer не
   срабатывало — две карточки слипались в одну. */
.resumes-ws__rail { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cf-polish { margin: 0 0 var(--space-4); }
.cf-polish-revert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    margin: calc(-1 * var(--space-2)) 0 var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.cf-polish-revert__text { display: inline-flex; align-items: center; gap: 6px; }
.cf-polish-revert__text .icon { color: var(--color-accent); }

/* «Что улучшить» на «Опыте»: маршрут мастера нумерованным ui_work_list,
   кнопка — у текущего шага. Под планом — справка: остаток «Правок текста»
   слева, тихий откат правок модели справа; на телефоне — одна под другой. */
.cf-improve { margin-top: 0; margin-bottom: var(--space-2); }
.cf-improve__foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}
.cf-improve__quota { min-width: 0; }
@media (min-width: 640px) {
    .cf-improve__foot { flex-direction: row; align-items: center; justify-content: space-between; }
}
.cf-improve__revert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    min-width: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
/* Кнопка-призрак несёт свой отступ: при переносе на телефоне её текст
   встаёт по краю строки над ней, а не сдвигается внутрь. */
.cf-improve__revert .btn { margin-left: calc(-1 * var(--space-3)); }
@media (min-width: 640px) {
    .cf-improve__revert .btn { margin-left: 0; }
}

/* Экран согласования: строки и подвал — ui_facts_diff (diff-row), здесь
   только то, чего у сравнения с файлом нет: текст абзацем «было/стало»,
   слияние навыков и «почему» одной тихой строкой. */
.polish-review__sec { gap: var(--space-2); }
.polish-row__changes { margin: var(--space-2) 0 0 32px; }
.polish-row__pair { display: grid; gap: var(--space-2); width: 100%; }
@container diff-row (min-width: 640px) {
    .polish-row__pair { grid-template-columns: 1fr 1fr; }
}
.polish-row__was,
.polish-row__now {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
}
.polish-row__was { background: var(--color-bg-soft); color: var(--color-text-soft); }
.polish-row__now { background: color-mix(in srgb, var(--color-success) 9%, var(--color-surface)); color: var(--color-text); }
.polish-row__was p,
.polish-row__now p { margin: 0; font-size: 0.875rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.polish-row__tag { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.polish-row__lines { display: grid; gap: 4px; width: 100%; line-height: 1.45; }
.polish-row__merge { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 0.9375rem; font-weight: 600; }
.polish-row__from del { color: var(--color-text-muted); font-weight: 500; text-decoration-color: rgba(var(--color-danger-rgb), 0.55); }
.polish-row__into { text-decoration: none; }
.polish-row__why {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: var(--space-2) 0 0 32px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.polish-row__why .icon { flex: none; align-self: center; color: var(--color-accent); }
.polish-review__ask-card { display: grid; gap: var(--space-3); }
.polish-review__ask-list { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-1); font-size: 0.9375rem; line-height: 1.45; }

/* Повторы и снятия навыков — компактными строками в две колонки: тридцать
   одинаковых карточек «Объединить» были стеной, а решение по каждой —
   взгляд, а не чтение. Причина снятия остаётся видна: её решают по одной. */
.polish-review__group { padding: var(--space-3) 0; border-top: 1px solid var(--color-border-soft); }
.polish-review__group:first-child { border-top: 0; }
.polish-review__group:last-child { padding-bottom: 0; }
.polish-picks { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: grid; gap: 0 var(--space-4); }
@container (min-width: 640px) {
    .polish-picks:not(.polish-picks--removed) { grid-template-columns: 1fr 1fr; }
}
.facts-diff__rows { container-type: inline-size; }
.polish-pick { display: flex; gap: var(--space-3); align-items: flex-start; min-height: 44px; padding: 10px 0; cursor: pointer; }
.polish-pick__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; font-size: 0.9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.polish-pick__text strong { font-weight: 600; }
.polish-pick__text del { color: var(--color-text-muted); text-decoration-color: rgba(var(--color-danger-rgb), 0.55); }
.polish-pick__dupes { font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.polish-pick__why { flex-basis: 100%; font-size: 0.8125rem; color: var(--color-text-muted); }
.polish-row__was--long > summary { display: grid; gap: 4px; cursor: pointer; list-style: none; }
.polish-row__was--long > summary::-webkit-details-marker { display: none; }
.polish-row__clip {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.polish-row__was--long[open] .polish-row__clip { display: block; -webkit-line-clamp: unset; }
.polish-row__more { font-size: 0.8125rem; color: var(--color-accent); }
.polish-row__was--long[open] .polish-row__more { display: none; }
.polish-row__was--long > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.polish-offer__revert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-soft);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* «Вау» согласования и итога: цифры раздела появляются по очереди, новый
   текст один раз подсвечивается — заметно, но без конфетти. Без движения
   при prefers-reduced-motion. */
.polish-plan__impact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-success);
}
.polish-review .facts-diff__plan-row { animation: polish-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.polish-review .facts-diff__plan-row:nth-child(2) { animation-delay: 0.12s; }
.polish-review .facts-diff__plan-row:nth-child(3) { animation-delay: 0.24s; }
.polish-review .facts-diff__plan-row:nth-child(4) { animation-delay: 0.36s; }
.polish-row__now { animation: polish-glow 1.6s ease 0.4s both; }
@keyframes polish-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes polish-glow {
    0% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); }
    35% { box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); }
}
.polish-score {
    display: grid;
    gap: 4px;
    margin: 0 0 var(--space-4);
    padding: var(--space-4) var(--space-5, 20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.polish-score--measuring { padding: 0; border: 0; background: none; }
.polish-score__label { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-soft); }
.polish-score__value { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-variant-numeric: tabular-nums; }
.polish-score__before { font-size: 1.75rem; font-weight: 600; color: var(--color-text-muted); }
.polish-score__after { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); animation: polish-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
.polish-score__arrow { color: var(--color-text-muted); }
.polish-score__delta {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
    animation: polish-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
}
@media (prefers-reduced-motion: reduce) {
    .polish-review .facts-diff__plan-row, .polish-row__now, .polish-score__after, .polish-score__delta { animation: none; }
}
.polish-score__sections {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--color-border-soft);
    list-style: none;
}
.polish-score__sections li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 0.9375rem; }
.polish-score__section { color: var(--color-text-soft); }
.polish-score__pair { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.polish-score__pair strong { color: var(--color-text); font-weight: 600; }
.polish-score__delta--sm { padding: 1px 8px; font-size: 0.8125rem; }
@media (min-width: 720px) { .polish-score__sections { max-width: 420px; } }
.polish-review__untouched {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-soft);
}
.polish-review__untouched .icon { flex: none; align-self: center; color: var(--color-text-muted); }
.polish-stale { display: grid; gap: var(--space-3); }
.polish-stale__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Шаг мастера «Исправим текст за вас»: слабые места строками «Что усилить»,
   под ними остаток «Правок текста» и пара кнопок, главная справа. */
.update-polish { display: grid; gap: var(--space-4); }
.update-polish__weak { margin: 0; }
.update-polish__actions { display: grid; gap: var(--space-3); }
.update-polish__buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2) var(--space-3); }
@media (max-width: 599px) {
    .update-polish__buttons > .btn--primary { flex: 1 1 100%; order: -1; }
}
.update-polish > .facts-diff, .update-polish > .polish-score { margin: 0; }

/* ui_month_review — разбор месяца (career-review.md §6). На «Обзоре» —
   раздел с заголовком над карточкой (узор «Ключевых шагов»), на странице —
   карточка с вердиктом-заголовком. Строки «У вас / На рынке / Для пути» —
   колонка подписи и текст: метка слева читается быстрее, чем повторяемый
   абзац «вы…, рынок…, значит…». */
.month-review { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.month-review__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.month-review__section-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.month-review--card .month-review__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.month-review__head { display: flex; flex-direction: column; gap: var(--space-2); }
.month-review__eyebrow {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Вердикт — вывод в две-три фразы, а не лозунг: размер заголовка карточки,
   а не страницы. Крупная антиква на 240 знаках превращала его в стену. */
.month-review__verdict {
    margin: 0;
    max-width: 62ch;
    font-family: var(--font-serif);
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--color-text);
    text-wrap: pretty;
}
.month-review__verdict a { color: inherit; text-decoration: none; }
/* На «Обзоре» вердикт — до трёх строк: полный вывод на странице разбора. */
.month-review--card .month-review__verdict a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.month-review__verdict a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Полный вид — анатомия «Как собрана карта» (career-why__card): вводная
   часть с меткой AI и вердиктом обычным весом, шаг блоком «Ваш путь» и
   свёрнутые строки доводов. Вердикт здесь — вводный абзац в две-три фразы, а
   не заголовок: жирная антиква на четыре строки читалась стеной. */
.month-review--full { max-width: 52rem; }
.month-review__lead { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
@media (min-width: 600px) {
    .month-review__lead { padding: var(--space-5); }
}
.month-review__origin {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.month-review--full .month-review__verdict {
    max-width: 68ch;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
}
@media (min-width: 600px) {
    .month-review--full .month-review__verdict { font-size: 1.0625rem; }
}
.month-review__next { margin-top: var(--space-1); }
.month-review__body > p { margin: 0; max-width: 68ch; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-soft); }
.month-review__body > p + p { margin-top: var(--space-2); }
.month-review__body > .month-review__reality-nums,
.month-review__body > .month-review__reality-dismiss { margin-top: var(--space-3); }
/* Тихая кнопка несогласия стоит по краю текста, а не со сдвигом на свой
   внутренний отступ. */
.month-review__reality-dismiss > .btn--ghost { margin-left: calc(-1 * var(--space-3)); }
.month-review__path { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
.month-review__changed {
    margin: 0;
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.month-review__rows { margin: 0; display: grid; gap: var(--space-3); }
.month-review__row { display: grid; gap: 2px; }
.month-review__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.month-review__text { margin: 0; min-width: 0; }
.month-review__text > p { margin: 0; max-width: 70ch; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); }
.month-review__text > p + p { margin-top: var(--space-2); }
/* На «Обзоре» строка — до двух строк текста: полный вывод — на странице. */
.month-review--card .month-review__text > p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 600px) {
    .month-review__row { grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--space-4); }
    .month-review__label { padding-top: 2px; }
}
/* Наши числа рядом со словами модели: доля «было → стало» со знаком
   направления. Цвет — только у стрелки и числа «стало», не у всего чипа:
   рост требования не «хорошо» и не «плохо», это факт рынка. */
.month-review__chips { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.month-review__chip {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: 4px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}
.month-review__chip-label { color: var(--color-text); }
.month-review__chip-nums { display: inline-flex; align-items: center; gap: 2px; color: var(--color-text-muted); }
.month-review__chip-nums strong { color: var(--color-text); font-weight: 600; }
.month-review__chip.is-up .month-review__chip-nums .icon { color: var(--color-accent); }
.month-review__note { margin: var(--space-1) 0 0; font-size: 0.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.month-review__reality {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft, var(--color-border));
}
.month-review__reality-kicker { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); }
.month-review__reality-text { margin: 0; max-width: 70ch; font-size: 0.9375rem; line-height: 1.5; }
.month-review__reality-nums { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.875rem; }
.month-review__reality-nums li { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); }
.month-review__reality-nums li span:last-child { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.month-review__reality-dismiss { margin: 0; }
/* Рекомендованный шаг — с отметкой как у шагов пути: флажок у предложенного,
   галочка у того, что уже в работе. */
.month-review__step {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: var(--space-3);
    row-gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft, var(--color-border));
}
.month-review__step-mark {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
}
.month-review__step.is-in-plan .month-review__step-mark { border-color: var(--color-success); background: var(--color-success); color: var(--color-surface); }
.month-review__step-body { min-width: 0; display: grid; gap: 2px; }
.month-review__step-kicker { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); }
.month-review__step-title { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.month-review__step-reason { margin: var(--space-1) 0 0; max-width: 70ch; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); }
.month-review__step-action { grid-column: 2; margin: 0; }
@media (min-width: 600px) {
    .month-review__step { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; }
    .month-review__step-action { grid-column: 3; grid-row: 1; }
}
.month-review__basis {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft, var(--color-border));
}
.month-review__basis-title { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); }
.month-review__basis-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Рейл «Обзора» выравнивается по верху первой карточки основной колонки
   (см. .dash-layout:has(... .pick-stack:first-child)): у разбора над
   карточкой та же однострочная шапка раздела. */
@media (min-width: 1140px) {
    .dash-layout:has(> .dash-layout__main > .month-review:first-child) > .dash-layout__rail { padding-top: calc(1.4375rem + var(--space-3)); }
}

/* Строка разбора в «Вашем пути»: прочитанный разбор или дата следующего. */
.path-widget__review {
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft, var(--color-border));
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.path-widget__review a {
    color: var(--color-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.path-widget__review a:hover { text-decoration: underline; text-underline-offset: 3px; }
.path-widget__review .path-widget__plan-icon { flex: none; margin-top: 2px; }

/* Страница разбора: разбор в основной колонке, справа — внеочередной разбор
   с квотой и архив месяцев. */
.review-layout { display: grid; gap: var(--space-5); margin-top: var(--space-4); }
.review-layout__main, .review-layout__rail { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 1140px) {
    .review-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}
.review-action__form { margin: var(--space-3) 0 0; }
.review-action > .btn { margin-top: var(--space-3); }
.review-action__foot {
    margin: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
.review-action__foot .quota-meter { flex-wrap: nowrap; }
/* Архив — та же карточка, что у действия выше (context-help): заголовок
   внутри, строки месяцев во всю ширину карточки с тонкими разделителями. */
.review-archive__list {
    list-style: none;
    margin: var(--space-2) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
    padding: 0;
}
.review-archive__item { border-top: 1px solid var(--color-border-soft, var(--color-border)); }
.review-archive__item:last-child .review-archive__link { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.review-archive__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px var(--space-3);
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    text-decoration: none;
}
.review-archive__link:hover { background: rgba(var(--color-accent-rgb), 0.06); }
.review-archive__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.review-archive__item.is-current .review-archive__link { box-shadow: inset 3px 0 0 var(--color-accent); }
.review-archive__item.is-current .review-archive__month { color: var(--color-accent); }
.review-archive__month { font-weight: 600; }
.review-archive__period { justify-self: end; font-size: 0.8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.review-archive__verdict {
    grid-column: 1 / -1;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Досье варианта, реворк 31.10: решение — кнопка, цена словами, заметка
   свёрнута; «Убрать с карты» — с подписью, что это значит. */
.vector-decision__note > summary {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
    cursor: pointer; list-style: none; font-size: 0.875rem; color: var(--color-text-soft);
}
.vector-decision__note > summary::-webkit-details-marker { display: none; }
.vector-decision__note[open] .career-note__chev { transform: rotate(180deg); }
.vector-decision__reject-hint { margin: var(--space-1) 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-muted); }
.vector-cta__price--warn { color: var(--color-text); font-weight: 500; }
.vector-market__elsewhere {
    margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3);
    font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-soft);
}

/* --- Витрина прототипов /__proto ---
   Метка прототипа — одна строка мелким текстом, не блок: экран прототипа
   должен выглядеть как экран продукта. Формы страницы отключены одним
   fieldset (b2c/base.html), который на раскладку не влияет. */
.proto-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin: 0 0 var(--space-1);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}
.proto-frame { display: contents; }

/* Плита готовности с двумя входами (ui_match_plate, goalHref/choose/foot):
   верх — роль поиска и готовность, низ — цель пути или другая строка. Плита
   перестаёт быть одной ссылкой: подъём и знак перехода — у каждой части. */
.match-plate--split:hover { transform: none; box-shadow: var(--shadow-md); }
.match-plate__part {
    position: relative;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-md);
}
.match-plate__part:focus-visible { outline: 2px solid #5FB8E8; outline-offset: 3px; }
.match-plate__part .match-plate__go { right: 0; bottom: 0; }
.match-plate__part:hover .match-plate__go,
.match-plate__part:focus-visible .match-plate__go { color: var(--color-ink-text); transform: translateX(3px); }
.match-plate__part { padding-right: var(--space-6); }
.match-plate__foot { font-size: var(--font-size-sm); color: var(--hero-soft); }
.match-plate__foot strong { color: var(--hero-text); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .match-plate__part:hover .match-plate__go { transform: none; } }

/* «Обзор» целевой IA (proto/overview.html): та же сетка .dash-layout, блоки
   обёрнуты слотами .ia-slot с местом в потоке телефона (.ia-o1…5): плита,
   «Ждёт вас», дальше по режиму поиска. На планшете и десктопе — колонки как
   у боевого «Обзора». */
.ia-slot { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
@media (max-width: 719px) {
    .dash-ia > * > .ia-o1 { order: 1; }
    .dash-ia > * > .ia-o2 { order: 2; }
    .dash-ia > * > .ia-o3 { order: 3; }
    .dash-ia > * > .ia-o4 { order: 4; }
    .dash-ia > * > .ia-o5 { order: 5; }
}
@media (min-width: 1140px) {
    /* Верх плиты — на линии первой карточки слева: над ней шапка раздела. */
    .dash-ia > .dash-layout__rail { padding-top: calc(1.0625rem * 1.15 + var(--space-3)); }
}
/* Блок «Путь»: шапка блока, граф должностей и главная зона роста — одним
   разделом. */
.ia-path { display: flex; flex-direction: column; gap: var(--space-3); }
.ia-path > .growth-areas { margin-top: var(--space-1); }

/* Шаг пути на плите готовности: «Сейчас» / «Следующий шаг» и название — две
   строки максимум, остальное — на «Моём пути». */
.match-plate__now {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--hero-text);
}
.match-plate__now-key { color: var(--hero-soft); margin-right: 4px; }
/* Одна главная зона роста в блоке «Путь» — во всю ширину карточки: сетка
   зон в две колонки оставляла справа пустую половину. */
.ia-path .growth-areas__list { grid-template-columns: minmax(0, 1fr); }

/* =====================================================================
   Прототип: обо мне — «Опыт и навыки», «Цели», «Итоги месяца», шаги
   онбординга в витрине `/__proto` (docs/design/target-ia.md §4, §5.9,
   §5.10). Только токены; боевые страницы этих классов не несут.
   ===================================================================== */
/* Проверка «Используете сейчас?» над навыками: вопрос на навык строкой,
   ответы — те же пилюли, что «У вас был такой опыт?» (cov-req__answer). */
.cf-skillcheck { margin-bottom: var(--space-4); }
.cf-skillcheck .skillfresh { margin-top: 0; }
.skillfresh__checks { gap: 0; }
.skillfresh__check { padding: var(--space-3) 0; border-top: 1px solid var(--color-border-soft, var(--color-border)); }
.skillfresh__check:first-child { border-top: 0; padding-top: 0; }
.skillfresh__check-name { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.skillfresh__check .skillfresh__meta { margin: 2px 0 0; }
.skillfresh__check .cov-req__answers { margin-top: var(--space-2); }
.skillfresh__decided { margin-top: var(--space-2); }
.skillfresh__decided .cov-req__decided-label { display: inline-flex; align-items: center; gap: 6px; }
.skillfresh__check.is-yes .cov-req__decided-label .icon { color: var(--color-success); }
.skillfresh__after { margin: var(--space-1) 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-soft); max-width: 62ch; }
/* «Исправить за меня» на объекте — под оценкой описаний мест работы. */
.cf-polish--object { margin: var(--space-3) 0 var(--space-4); }

/* «Ваши слова» на «Целях»: общий текст и строки «как общий / своё».
   Блоки ниже сводки — той же ширины, что сводка (.goals-sheet). */
.wants-words,
.wants-roles { max-width: 880px; }
.wants-words__note,
.wants-words__inherit {
    display: flex; align-items: flex-start; gap: var(--space-2);
    margin: 0 0 var(--space-3); max-width: 64ch;
    font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-soft);
}
.wants-words__note .icon,
.wants-words__inherit .icon { flex: none; margin-top: 2px; color: var(--color-text-muted); }
.wants-words__inherit { margin: 0; }
.wants-words__sub { margin: var(--space-5) 0 var(--space-2); font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.wants-words__editor { display: grid; gap: var(--space-3); }
.wants-words__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.wants-words__changed { font-size: 0.8125rem; color: var(--color-warning-text, var(--color-text-soft)); }

/* Строки шагов онбординга в витрине: приватность «Ваших слов» и строка
   про бесплатную карту на финале. */
.proto-ob__private,
.proto-ob__grant {
    display: flex; align-items: flex-start; gap: var(--space-2);
    margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--color-text-soft);
}
.proto-ob__private .icon,
.proto-ob__grant .icon { flex: none; margin-top: 3px; color: var(--color-text-muted); }
.proto-ob__grant { font-weight: 600; color: var(--color-text); }
.proto-ob__grant .icon { color: var(--color-accent); }
.proto-ob__grant--quiet { font-weight: 400; color: var(--color-text-soft); }
.proto-ob__grant--quiet .icon { color: var(--color-text-muted); }
/* «Опыт и навыки»: оглавление якорями и свёрнутый список навыков. */
/* Оглавление «Опыта и навыков» (05.11): страница развёрнута целиком, к
   разделам — перемотка якорями. Полоса липкая: на телефоне под липкой
   верхней рамкой (её высота — отступ рамки и кнопка меню), с 992px рамки
   нет — к самому верху. Фон страницы под полосой — иначе по ней проезжал бы
   текст секций. Якоря страницы получают отступ на рамку и полосу, иначе
   заголовок раздела уходил бы под неё. */
.cf-page { --cf-toc-top: calc(var(--tap-min) + var(--space-3) * 2 + 1px + env(safe-area-inset-top, 0px)); }
@media (min-width: 992px) { .cf-page { --cf-toc-top: 0px; } }
/* Липкая — полоса во всю ширину страницы с непрозрачным фоном, а не сама
   вкладочная подложка: та полупрозрачна и узка по пунктам, и под ней и
   рядом с ней проезжал текст секций. */
.cf-toc-band {
    position: sticky;
    top: var(--cf-toc-top);
    z-index: 20;
    margin: 0 0 var(--space-4);
    padding-block: var(--space-2);
    background: var(--color-bg);
}
.cf-toc-band .cf-toc { margin: 0; }
.cf-page [id] { scroll-margin-top: calc(var(--cf-toc-top) + 4.5rem); }
.cf-skills-all { margin-top: var(--space-3); }
/* «Цели»: полоса «Сколько платят» под строкой дохода. */
.wants-salary { padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--color-border-soft, var(--color-border)); }
.wants-salary__title { margin: 0 0 var(--space-2); font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
.wants-words__other { margin-top: var(--space-4); }
/* «Опыт и навыки»: правки вместо таблицы баллов. */
.cf-findings { margin: var(--space-3) 0 var(--space-4); }
.cf-findings__title { margin: 0 0 var(--space-2); font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
.cf-findings__more { margin: var(--space-2) 0 0; font-size: 0.875rem; }
.cf-skillcheck--top { margin: 0 0 var(--space-5); }
/* Линия карьеры прототипа на телефоне — компактные якоря (компания и годы
   строкой-чипом), а не второй список мест работы под полосой. */
@media (max-width: 599px) {
    .cf-lifeline--anchors .lifeline__key-list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
    .cf-lifeline--anchors .lifeline__key-item { display: inline-flex; flex: 0 1 auto; width: auto; max-width: 100%; }
    .cf-lifeline--anchors .lifeline__key-row {
        display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min);
        padding: 0 var(--space-2); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--color-border);
    }
    .cf-lifeline--anchors .lifeline__key-role { display: none; }
    .cf-lifeline--anchors .lifeline__key-mono { width: 0.75rem; flex: none; }
    .cf-lifeline--anchors .lifeline__key-name { max-width: 8rem; font-size: 0.75rem; }
    /* Годы — у отрезка полосы и в карточке: в якоре они удваивали ширину,
       и чипы стояли столбиком, то есть тем же вторым списком. */
    .cf-lifeline--anchors .lifeline__key-years { display: none; }
}
/* «Используете сейчас?» на образце: метка и «Перечитать файл» под вопросами. */
.skillfresh__sample {
    display: inline-block; margin-left: var(--space-1); padding: 1px var(--space-2);
    border-radius: 999px; background: var(--color-warning-soft, var(--color-surface-muted));
    color: var(--color-text-soft); font-size: 0.75rem; font-weight: 600; vertical-align: middle;
}
.skillfresh__reparse--foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.skillfresh__reparse-note { font-size: 0.8125rem; color: var(--color-text-soft); }
/* «Ваши слова» для одной должности. */
.wants-own__title { display: flex; align-items: center; gap: var(--space-2); }
.wants-own__shared {
    margin: 0; padding: var(--space-3) var(--space-4); max-width: 72ch;
    border-left: 3px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text-soft); border-radius: var(--radius-md);
}
.wants-own__shared-link { margin: var(--space-2) 0 0; font-size: 0.875rem; }
/* Подпись верхней части плиты с двумя входами длиннее прежней («Ищу ·
   готовность к должности «…»») — уже, чтобы не уходить под знак в углу. */
.match-plate--split .match-plate__caption { max-width: 14rem; }

/* ===================================================================
   Прототип: активный поиск (/__proto/active-search, target-ia §4–§6.2).
   Раздел «Вакансии» с видами «Для вас · Мои», страница отклика, мастер.
   Блоки — те же компоненты кабинета; здесь только раскладка экранов и
   новые варианты компонентов (pick-decision--save, pick-analysis--ia,
   cov-split, pick-card__fresh, app-card__note). Mobile-first.
   =================================================================== */
.proto-active { display: flex; flex-direction: column; gap: var(--space-5); }
.proto-active__tabs { margin-top: calc(var(--space-2) * -1); }
.proto-active__block { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.proto-active__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.proto-active__title { margin: 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); display: flex; align-items: center; gap: var(--space-2); }
.proto-active__meta { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.proto-active__lead { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-soft); }
.proto-active__more { margin: 0; display: flex; justify-content: center; }
.proto-active__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-bg-soft); font-size: 0.75rem; color: var(--color-text-muted); }
.proto-active__past { border-top: 1px solid var(--color-border-soft); padding-top: var(--space-3); }
.proto-active__past-toggle { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; color: var(--color-text-soft); }
.proto-active__past-toggle::-webkit-details-marker { display: none; }
.proto-active__past[open] .proto-active__past-toggle .icon { transform: rotate(180deg); }
.proto-active__past > .pick-rows { margin-top: var(--space-2); }
/* «Мои»: на телефоне — четыре группы списком, с 992px — канбан. */
.proto-active__board { display: none; }
.proto-active__groups { display: flex; flex-direction: column; gap: var(--space-5); }
.proto-active__group { display: flex; flex-direction: column; gap: var(--space-2); }
.proto-active__group-title { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: 0.9375rem; font-weight: 600; color: var(--color-text-soft); }
@media (min-width: 992px) {
    .proto-active__board { display: block; }
    .proto-active__groups { display: none; }
}

/* Отклик: этап и действие — первым экраном, дальше колонки. */
.proto-app__now { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--color-border-soft); background: var(--color-surface); }
.proto-app__action { margin: 0; }
.proto-app__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.proto-app__docs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.proto-app__doc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 48px; }
.proto-app__doc + .proto-app__doc { border-top: 1px solid var(--color-border-soft); }
.proto-app__doc-name { min-width: 5.5rem; font-weight: 600; color: var(--color-text); }
.proto-app__note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.proto-app__note > * { align-self: stretch; }
.proto-app__note > .btn { align-self: flex-start; }
@media (min-width: 1140px) {
    .proto-app__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .proto-app__grid > :last-child { grid-column: 1 / -1; }
}

/* Мастер отклика одним экраном: три шага с номерами. */
.proto-send { max-width: 760px; }
.proto-send__step { padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--color-border-soft); background: var(--color-surface); }
.proto-send__num { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-bg-soft); font-size: 0.8125rem; color: var(--color-text-soft); flex: none; }
.proto-send__where { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 1rem; font-weight: 600; color: var(--color-text); }
.proto-send__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 44px; }
.proto-send__row-name { font-weight: 600; color: var(--color-text); }
.proto-send__hint { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); }
.proto-send__hint a { color: var(--color-accent); }
.proto-send__build { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.proto-send__letter-toggle { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; list-style: none; color: var(--color-text-soft); }
.proto-send__letter-toggle::-webkit-details-marker { display: none; }
.proto-send__letter[open] .proto-send__letter-toggle .icon { transform: rotate(180deg); }
.proto-send__go { margin: 0; }

/* ui_pick_decision save — два решения «Не моё / Сохранить» равными колонками. */
.pick-decision--save .pick-decision__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ui_pick_card fresh — «Новая»: тихая акцентная плашка, слабее золота. */
.pick-card__fresh { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
/* ui_application_card note — причина «Ждут вашего шага» под названием. */
.app-card__note { font-size: 0.8125rem; color: var(--color-warning-strong); }

/* ui_pick_analysis ia — вердикт словами, число вторым планом. */
.pick-analysis__verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.pick-analysis__verdict-num { font-size: 0.9375rem; font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pick-analysis__lead { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-soft); }
.pick-analysis__covered-toggle { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; color: var(--color-text-soft); }
.pick-analysis__covered-toggle::-webkit-details-marker { display: none; }
.pick-analysis__covered[open] .pick-analysis__covered-toggle .icon { transform: rotate(180deg); }
.pick-analysis__subtitle { margin: var(--space-2) 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.pick-analysis__conds { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.pick-analysis__cond { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: 44px; font-size: 0.9375rem; }
.pick-analysis__cond + .pick-analysis__cond { border-top: 1px solid var(--color-border-soft); }
.pick-analysis__cond dt { color: var(--color-text-muted); }
.pick-analysis__cond dd { margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); }
.pick-analysis__cond--in .pick-analysis__status-dot { background: var(--color-success); }
.pick-analysis__cond--partial .pick-analysis__status-dot { background: var(--color-amber); }
.pick-analysis__cond--out dd { font-weight: 600; }
.pick-analysis__cond--out .pick-analysis__status-dot { background: var(--color-danger); }

/* ui_coverage_verdict split — полоса из трёх сегментов (dataviz: доли
   требований, 2px зазор поверхности между сегментами, скругление 4px на
   концах полосы; цвет — статусные токены, подписи с числами всегда). */
.cov-split { display: flex; gap: 2px; height: 10px; border-radius: 4px; overflow: hidden; }
.cov-split__seg { flex: 1 1 0; min-width: 6px; background: var(--color-border); }
.cov-split__seg--visible { background: rgb(var(--color-sage-rgb)); }
.cov-split__seg--canadd { background: rgb(var(--color-accent-rgb)); }
.cov-split__seg--missing { background: var(--color-border-strong); }
.cov-split__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--color-text-soft); }
.cov-split__key { display: inline-flex; align-items: center; gap: 6px; }
.cov-split__key::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--color-border-strong); }
.cov-split__key--visible::before { background: rgb(var(--color-sage-rgb)); }
.cov-split__key--canadd::before { background: rgb(var(--color-accent-rgb)); }
.cov-split__key b { font-weight: 600; color: var(--color-text); }

/* =====================================================================
   Прототип: присматриваюсь (/__proto/exploring/*, docs/design/target-ia.md
   §4 «Резюме», §6.3, §5.10). Только токены темы; тёмная тема — через них же.
   ===================================================================== */

/* Плита готовности: вердикт словами под числом, метка AI — тихо, рядом. */
.match-plate__verdict {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--space-2);
    margin-top: var(--space-2);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--hero-text);
}
.match-plate__ai {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--hero-soft);
}

/* ui_salary_band — полоса опубликованных зарплат. Шкала одна: заливка —
   средняя половина вакансий, черта — середина, точка в кольце поверхности —
   ожидания. Подписи — цветами текста, не цветом метки (dataviz). */
.salary-band { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
/* Шапка: типичная зарплата крупно, источник чисел — бейджем справа (на
   телефоне — строкой под ней). */
.salary-band__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.salary-band__headline { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); }
.salary-band__value { font-size: 2rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--color-text); }
.salary-band__headline-text { font-size: 0.9375rem; color: var(--color-text-soft); }
.salary-band__origin { color: var(--color-text-soft); white-space: nowrap; }
.salary-band__headline-text .concept-hint { margin-left: 4px; vertical-align: -3px; }
/* Шкала: подписи прямо на графике — «типичная» над чертой, суммы вилки под
   её концами; поля сверху и снизу — под них. */
.salary-band__plot { position: relative; height: 32px; margin: var(--space-6) 8px var(--space-6); }
.salary-band__median-label {
    position: absolute; bottom: calc(100% + 2px);
    left: clamp(2.5rem, var(--pos), calc(100% - 2.5rem)); transform: translateX(-50%);
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
    color: var(--color-text); white-space: nowrap;
}
.salary-band__track {
    position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
    border-radius: 1px; background: var(--color-border);
}
.salary-band__iqr {
    position: absolute; top: 50%; height: 14px; transform: translateY(-50%);
    min-width: 6px; border-radius: 7px;
    /* Фирменный градиент (--gradient-progress), как кольцо готовности и
       полосы платформы (05.11). */
    background: var(--gradient-progress);
    opacity: 0.9;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.salary-band__median {
    position: absolute; top: 2px; bottom: 2px; width: 3px; margin-left: -1.5px;
    border-radius: 2px; background: var(--color-text);
    box-shadow: 0 0 0 2px var(--color-surface);
}
/* Ожидания — белая точка-булавка с тёмным ободком и подписью «вы» (05.11):
   на фирменном градиенте вилки синяя точка терялась, а крупная точка с
   ореолом без подписи читалась вопросом «это про что?». */
.salary-band__expect {
    position: absolute; top: 50%; width: 12px; height: 12px; margin-left: -6px;
    transform: translateY(-50%); border-radius: 50%;
    background: var(--color-surface);
    box-shadow:
        inset 0 0 0 2.5px var(--color-text),
        0 1px 3px rgba(15, 23, 42, 0.25);
}
.salary-band__you {
    position: absolute; bottom: calc(100% + 2px);
    left: clamp(1rem, var(--pos), calc(100% - 1rem)); transform: translateX(-50%);
    font-size: 0.75rem; font-weight: 600; line-height: 1; color: var(--color-text);
    white-space: nowrap;
}
.salary-band__you--below { bottom: auto; top: calc(100% + 6px); }
.salary-band__q {
    position: absolute; top: calc(100% + 6px);
    left: clamp(3rem, var(--pos), calc(100% - 3rem)); transform: translateX(-50%);
    font-size: 0.8125rem; line-height: 1; color: var(--color-text-soft);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.salary-band__q--start { left: min(var(--pos), calc(100% - 10rem)); transform: none; }
.salary-band__legend { margin: 0; display: grid; gap: var(--space-2); }
.salary-band__legend-row dd.salary-band__dd-soft { color: var(--color-text-soft); font-variant-numeric: normal; }
/* Подпись и сумма — рядом, а не по краям карточки (05.11): на широком экране
   между ними ехало полторы тысячи пикселей. */
.salary-band__legend-row {
    display: grid; grid-template-columns: minmax(0, 15rem) auto; justify-content: start; align-items: baseline;
    gap: 2px var(--space-5); font-size: 0.875rem;
}
.salary-band__legend-row dt { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-soft); }
.salary-band__legend-row dd { margin: 0; color: var(--color-text); font-variant-numeric: tabular-nums; }
.salary-band__dd-note { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--color-text-muted); font-variant-numeric: normal; }
.salary-band__legend-row--note dd { color: var(--color-text-soft); text-align: left; }
.salary-band__key { display: inline-block; flex: none; }
/* Ключи уже полосы (точки 10px) центрируются в её 14px: иначе подписи легенды
   начинаются с разных вертикалей. */
.salary-band__key--expect, .salary-band__key--dot, .salary-band__key--none { margin-inline: 2px; }
.salary-band__key--iqr { width: 14px; height: 8px; border-radius: 4px; background: var(--gradient-progress); opacity: 0.9; }
.salary-band__key--median { width: 2px; height: 12px; border-radius: 1px; background: var(--color-text); }
.salary-band__key--expect { width: 10px; height: 10px; border-radius: 50%; background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-text); }
.salary-band__source { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.salary-band__note { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); font-style: italic; }
/* Панель «Сколько платят» на досье — та же, что у «Что требуют
   работодатели» рядом. */
.vector-salary-panel { padding: var(--space-5); }
.salary-band__small { margin: 0; display: flex; gap: var(--space-2); align-items: flex-start; font-size: 0.875rem; color: var(--color-text-soft); }
.salary-band__small .icon { flex: none; margin-top: 2px; color: var(--color-text-muted); }

/* ui_gap_bars reqs — «Что рынок просит»: строка на требование, полоса —
   только доля вакансий (один тон), состояние человека — словом и значком. */
.gap-reqs { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.gap-reqs__source, .gap-reqs__more { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.gap-reqs__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.gap-req { display: grid; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.gap-req:first-child { padding-top: 0; border-top: 0; }
.gap-req__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.gap-req__label { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); min-width: 0; overflow-wrap: anywhere; }
.gap-req__share { flex: none; font-size: 0.8125rem; color: var(--color-text-soft); font-variant-numeric: tabular-nums; }
.gap-req__bar { height: 8px; }
.gap-req__fill { display: block; height: 100%; max-width: 100%; border-radius: 0 4px 4px 0; background: var(--color-text-soft); }
.gap-req__state { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--color-text-soft); }
.gap-req--have .gap-req__state .icon { color: var(--color-success); }
.gap-req--partial .gap-req__state .icon { color: var(--color-teal); }
.gap-req--missing .gap-req__state { color: var(--color-text); }
.gap-req--missing .gap-req__state .icon { color: var(--color-warning-strong); }
.gap-req__ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.gap-req__ask-text { font-size: 0.875rem; color: var(--color-text); }
.gap-req__ask-actions { display: flex; gap: var(--space-2); }
.gap-req__ask-actions form { margin: 0; }

/* Сравнение путей строками (ui_career_vector_card compact). Телефон: имя
   сверху, под ним две колонки — требования и срок; широкий экран — одна
   строка таблицей с шапкой. */
/* На телефоне от шапки остаётся только «Срок · оценка AI»: метка AI одна на
   список и видна на любой ширине; без сроков шапки нет вовсе. */
.vector-compare__head {
    display: flex; justify-content: flex-end; padding: 0 var(--space-4) var(--space-1);
    font-size: 0.75rem; color: var(--color-text-muted);
}
.vector-compare__head > span:not(:last-child) { display: none; }
.vector-compare__head > span:last-child { display: inline-flex; align-items: center; gap: var(--space-2); }
.vector-compare__head--untimed { display: none; }
.vector-compare { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.vector-row__link {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "name name name go" "reqs market time go";
    gap: var(--space-2) var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
}
.vector-row__link:hover { border-color: var(--color-border-strong); }
.vector-row__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.vector-row__name { grid-area: name; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vector-row__title { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--color-text); }
.vector-row__link:hover .vector-row__title { color: var(--color-accent); }
.vector-row__role { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); font-size: 0.8125rem; color: var(--color-text-soft); }
.vector-row__reqs { grid-area: reqs; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-2); min-width: 0; }
.vector-row__time { grid-area: time; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vector-row__label { grid-column: 1 / -1; font-size: 0.75rem; color: var(--color-text-muted); }
.vector-row__bar { height: 6px; min-width: 3rem; }
.vector-row__fill { display: block; height: 100%; max-width: 100%; border-radius: 0 3px 3px 0; background: var(--color-teal); }
.vector-row__value { font-size: 0.875rem; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vector-row__value .duration { color: inherit; }
.vector-row__quiet { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--color-text-muted); }
.vector-row__go { grid-area: go; color: var(--color-text-muted); }
.vector-compare__note { margin: var(--space-2) 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-muted); max-width: 70ch; }
@media (min-width: 768px) {
    .vector-compare__head > span:not(:last-child) { display: inline; }
    .vector-compare__head {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1fr) 1rem;
        gap: var(--space-3);
        padding: 0 var(--space-4) var(--space-1);
        font-size: 0.75rem;
        color: var(--color-text-muted);
    }
    .vector-compare__head > span:last-child { display: inline-flex; align-items: center; gap: var(--space-2); }
    .vector-row__link {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1fr) 1rem;
        grid-template-areas: "name reqs market time go";
    }
    .vector-row__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Карточка должности (ui_resume_card role): основная — тихой меткой, свежая
   — рамкой акцента, состояние документа — значком в тоне. */
.resume-card__state--primary { color: var(--color-accent); font-weight: 600; }
.resume-card__doc, .resume-card__board { display: inline-flex; align-items: center; gap: 4px; }
.resume-card__doc--ready .icon, .resume-card__doc--sent .icon { color: var(--color-success); }
.resume-card__doc--stale .icon { color: var(--color-amber); }
.resume-card__doc--failed { color: var(--color-danger); }
.resume-card__doc--none .icon, .resume-card__doc--building .icon { color: var(--color-text-muted); }
.resume-card__board--stale { color: var(--color-text); }
.resume-card--fresh { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.resume-card__actions--stack { flex-direction: column; align-items: stretch; }
.resume-card__quota { margin: 0; }
@media (min-width: 640px) {
    .resume-card__actions--stack { align-items: flex-end; }
}
.proto-resumes .quick-action { margin-top: var(--space-4); }
.proto-resumes .ui-alert, .proto-resumes .alert { margin-bottom: var(--space-4); }
.proto-resumes__old { margin-top: var(--space-5); }
.proto-resumes__old-hint { margin: var(--space-2) 0 var(--space-3); font-size: 0.875rem; color: var(--color-text-soft); max-width: 62ch; }

/* «Резюме под должность»: на телефоне плита первой, на широком — колонкой
   справа, рядом с документом. */
.proto-role__grid { display: grid; gap: var(--space-5); }
.proto-role__rail { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.proto-role__main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.proto-role__section { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.proto-role__h2 { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); }
.proto-role__folds { gap: 0; }
.proto-role__folds .list-more { border-top: 1px solid var(--color-border); }
.proto-role__fold { padding: 0 0 var(--space-3); font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-soft); }
.proto-role__fold p { margin: var(--space-2) 0 0; max-width: 65ch; }
.proto-role__list { margin: var(--space-2) 0 0; padding-left: var(--space-4); display: grid; gap: var(--space-1); }
.proto-role__versions { list-style: none; padding: 0 0 var(--space-3); }
.proto-role__versions li { display: flex; align-items: center; gap: var(--space-2); font-size: 0.875rem; }
.resume-hero__state--ready .icon, .resume-hero__state--sent .icon { color: var(--color-success); }
.resume-hero__state--stale .icon { color: var(--color-amber); }
/* Телефон: колонка main раскрыта в сетку (display: contents), чтобы
   «Сколько платят» и «Где размещено» встали после «Что рынок просит», а не
   после свёрнутого. От 1100px они — правая колонка под плитой. */
.proto-role__main { display: contents; }
.proto-role__grid { gap: var(--space-6); }
.proto-role__side { order: 1; display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.proto-role__folds { order: 2; }
@media (min-width: 1100px) {
    .proto-role__grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); grid-template-rows: auto auto 1fr; align-items: start; column-gap: var(--space-5); }
    .proto-role__rail { grid-column: 2; grid-row: 1; }
    .proto-role__side { grid-column: 2; grid-row: 2; }
    .proto-role__main { display: flex; grid-column: 1; grid-row: 1 / span 3; }
    .proto-role__folds { order: 0; }
}

/* «Где размещено»: строка на площадку — имя, состояние словом, действие. */
.proto-boards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.proto-boards__row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name action" "state action";
    align-items: center; gap: 2px var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
}
.proto-boards__name { grid-area: name; font-weight: 600; font-size: 0.9375rem; color: var(--color-text); }
.proto-boards__state { grid-area: state; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--color-text-soft); }
.proto-boards__row .btn { grid-area: action; }
.proto-boards__row--fresh .proto-boards__state .icon { color: var(--color-success); }
.proto-boards__row--stale .proto-boards__state .icon { color: var(--color-amber); }
.proto-send__already { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.proto-resumes__ai { margin: var(--space-3) 0 0; }
.vector-compare--untimed .vector-row__time { display: none; }
.vector-compare--untimed .vector-row__link { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; grid-template-areas: "name name go" "reqs market go"; }
@media (min-width: 768px) {
    .vector-compare__head--untimed { display: grid; }
    .vector-compare__head--untimed,
    .vector-compare--untimed .vector-row__link { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 0.9fr) 1rem; }
    .vector-compare--untimed .vector-row__link { grid-template-areas: "name reqs market go"; }
}
.proto-app__stage { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 0.875rem; }
/* На телефоне пять подписей под сегментами не помещаются: этап назван
   строкой над полосой, подписи остаются для экранного диктора. */
@media (max-width: 479px) {
    .proto-app__now .pipe-bar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Ожиданий на шкале нет (другая валюта) — у строки легенды пустой ключ той же
   ширины: значок без метки на шкале обещал бы точку, которой нет. */
.salary-band__key--none { width: 10px; height: 10px; border-radius: 50%; border: 1px dashed var(--color-border-strong); }
/* Меню должности («⋯») — в углу шапки на любой ширине: на телефоне ряд
   действий уходил отдельной строкой под лид и сдвигал документ за сгиб. */
.proto-role__head { position: relative; }
.proto-role__head .page-head__row { position: absolute; top: 0; right: 0; margin: 0; }
.proto-role__head .page-head__breadcrumbs, .proto-role__head .breadcrumbs { padding-right: 3.5rem; }
.proto-role__section .quick-action + .quota-meter { margin-top: calc(var(--space-2) * -1); }
/* Плита: вердикт словом первым, процент — вторым планом (target-ia §12.1.6),
   режим поиска словами под ролью, низ «Расту к» одной строкой с
   «Продолжить» (§12.1.5). */
.match-plate--verdict-first .match-plate__verdict { order: -1; position: relative; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--hero-text); }
.match-plate--verdict-first .match-plate__score { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; margin-top: var(--space-1); color: var(--hero-soft); }
.match-plate__mode { position: relative; margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--hero-text); }
.match-plate__continue { position: relative; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-accent-soft, #5FB8E8); }
/* Мало названных вилок — каждая точкой на шкале (без квартилей). */
.salary-band__dot {
    position: absolute; top: 50%; width: 10px; height: 10px; margin-left: -5px;
    transform: translateY(-50%); border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 45%, var(--color-surface));
    box-shadow: 0 0 0 2px var(--color-surface);
}
.salary-band__key--dot { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 45%, var(--color-surface)); }
.salary-band__note { font-style: normal; }

/* Прототип: активный поиск, круг 2 (target-ia §12.1). */
/* job_actions .ia — «Подготовить отклик · Сохранить · Не моё»: порядок
   разметки на всех ширинах, «Не моё» отдельно, через воздух. */
.page-head__actions > .head-actions-form--apart { margin-inline-start: var(--space-4); }
@media (max-width: 639px) {
    .page-head__actions:has(> .head-actions-form--apart) { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .page-head__actions:has(> .head-actions-form--apart) > .btn--primary { order: 0; flex: 1 1 100%; justify-content: center; }
    .page-head__actions:has(> .head-actions-form--apart) > .btn--secondary { order: 1; flex: 1 1 auto; justify-content: center; }
    .page-head__actions > .head-actions-form--apart { order: 2; margin-inline-start: auto; flex: none; }
}
/* ui_pick_card: ось без данных и подпись пересчёта вилки. */
.pick-card__axis-na { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; color: var(--color-text-muted); }
.pick-card__fx { margin: 0; font-size: 0.75rem; color: var(--color-text-muted); }

/* Рынок в строке сравнения — сколько вакансий у должности; полосы группы —
   подписи тех же рядов, что у узлов горизонта. */
.vector-row__market { grid-area: market; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vector-compare__band { margin: var(--space-4) 0 var(--space-2); font-size: 0.8125rem; font-weight: 600; color: var(--color-text-soft); }
.vector-compare__band:first-of-type { margin-top: var(--space-1); }
.vector-compare + .vector-compare__band { margin-top: var(--space-4); }
/* Подписи узлов горизонта переносятся целиком, без обрезки (§12 P2-25). */
.proto-map .ch-node__name { -webkit-line-clamp: unset; display: block; overflow: visible; }
.proto-send__actions { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.proto-active__filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cov-split__key a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.cov-split__key b { margin-inline-start: 2px; }
.proto-active__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Доля рынка — тонкая полоса без трека: распространённость требования, а
   не прогресс человека (§12.1.7). Полосы «сделано» — с треком. */
.gap-req__bar { display: block; height: 4px; background: none; }
.gap-req__fill { display: block; height: 100%; max-width: 100%; border-radius: 2px; background: var(--color-border-strong); }
.gap-req__ask-text { display: inline-flex; align-items: center; gap: 6px; }
.gap-req__ask-text .icon { color: var(--color-warning-strong); }
.gap-reqs__more { border-top: 1px solid var(--color-border); }
.gap-reqs__more .gap-reqs__rows { padding-bottom: var(--space-2); }
.proto-role__price { margin: 0; }
/* Сравнение путей — свой ритм: шапка, подпись полосы и строки ближе друг к
   другу, чем секции страницы. */
.vector-compare-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.vector-compare-wrap .vector-compare__band { margin: var(--space-3) 0 0; }
.vector-compare-wrap .vector-compare__band:first-of-type { margin-top: 0; }
.vector-compare-wrap .vector-compare__head { padding-bottom: 0; }
/* Цена пересчёта — прямо под строкой устаревания карты. */
.stale-notice + .proto-map__price { margin: calc(var(--space-2) * -1) 0 0; padding-left: var(--space-4); }
/* Ожидания далеко за шкалой — точка у края пунктирным кольцом: «за краем»,
   а не «на краю». */
.salary-band__expect--far {
    background: var(--color-surface);
    box-shadow:
        inset 0 0 0 2px var(--color-text-soft),
        0 1px 3px rgba(15, 23, 42, 0.2);
    border: 1px dashed transparent;
}
/* Телефон: значение легенды под подписью и по левому краю — длинная строка
   ожиданий, выровненная вправо, рвалась лесенкой. */
@media (max-width: 599px) {
    .salary-band__legend-row { grid-template-columns: 1fr; }
    .salary-band__legend-row dd { text-align: left; padding-left: calc(14px + var(--space-2)); }
}
/* Шапка «Моего пути» (витрина /__proto): четыре действия переносятся на
   вторую строку, а не уходят за правый край телефона. */
.page-head--wrap-actions .page-head__actions { flex-wrap: wrap; }
/* «Мой путь» (витрина /__proto): линия станций строкой без плиты и
   устаревание одной строкой — шаг «Сейчас» с действием ближе к первому экрану
   телефона (target-ia §6.4). */
.path-widget--line { padding: 0; border: 0; background: none; box-shadow: none; gap: var(--space-2); }
.path-widget--line .path-widget__route { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.path-widget--line .path-widget__station-label { font-size: var(--font-size-sm); }
.stale-notice--line { padding: var(--space-2) var(--space-3); }
.stale-notice--line .stale-notice__icon, .stale-notice--line .icon-plate { display: none; }
@media (max-width: 599px) { .stale-notice--line { flex-direction: row; align-items: center; gap: var(--space-2); } }
/* «Мой путь» (витрина /__proto): «вы здесь» — у текущей станции, цель —
   контуром; полоса доли рынка у зон роста — тонкой линией без дорожки,
   другого вида, чем полоса «сделано» (target-ia §12.1.7). */
.path-widget--line .path-widget__station.is-current .path-widget__dot { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.18); }
.path-widget--line .path-widget__station.is-target .path-widget__dot { background: var(--color-surface); border: 2px solid var(--color-accent); box-shadow: none; }
.path-widget--line .path-widget__station.is-current .path-widget__station-label { font-weight: 600; color: var(--color-text); }
.vector-section--share .stat-bar__track { height: 2px; background: transparent; }
.path-widget__here { font-weight: 400; color: var(--color-accent); }
/* Образец до расчёта match — пометка над шкалой: числа не настоящие, и это
   видно раньше чисел. */
.salary-band__sample {
    margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px; border-radius: var(--radius-pill);
    background: var(--color-warning-soft); color: var(--color-warning-strong);
    font-size: 0.75rem; font-weight: 600;
}
/* Прототип: активный поиск, круг 3 (target-ia §12.4). */
/* ui_pick_card iaVerdict — вердикт словом первым, число мелко рядом; без
   кольца имя работодателя занимает всю ширину и не обрезается. */
.pick-card__verdict { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: 1rem; color: var(--color-text); }
.pick-card__verdict .mono { font-size: 0.8125rem; color: var(--color-text-muted); }
.pick-card--ia .pick-card__company, .pick-card--ia .company-badge__name { white-space: normal; overflow: visible; text-overflow: clip; }
.pick-card__axis-na span { min-width: 0; }
.pick-card__axis-link { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
/* ui_pick_analysis ia: «мало данных · укажите условия» — своей строкой под
   именем оси, а не вплотную к нему. */
.pick-analysis__na--ia { grid-column: 1 / -1; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-weight: 400; }
.pick-analysis__na--ia .pick-analysis__fill { min-height: 32px; text-decoration: underline; }
/* ui_kanban_board notes — «Напомнить о себе» на карточке канбана. */
.kanban__card-note { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--color-warning-strong); }
.vector-row__thin { grid-column: 1 / -1; font-size: 0.75rem; color: var(--color-warning-strong); }
.gap-reqs__title { margin: var(--space-2) 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
/* Шапка вакансии прототипа: правило вакансии «форма — первой» (выше) не
   действует на «Не моё» — он последним и отдельно на всех ширинах. */
@media (max-width: 639px) {
    .page-shell:has(> .job-detail) .page-head__actions:has(> .head-actions-form--apart) > form.head-actions-form.head-actions-form--apart { order: 2; flex: none; margin-inline-start: auto; }
}
/* «Мой путь» (витрина /__proto, круг 4): у линии станций строкой вместо
   вертикальных отрезков-коннекторов — стрелка между станциями (на 1440
   отрезки висели обрывками под горизонтальной линией); «⋯» в шапке не
   переносится одна на вторую строку; воздух перед «Что держит от цели». */
.path-widget--line .path-widget__route { flex-direction: row !important; flex-wrap: wrap; }
.path-widget--line .path-widget__station:not(:last-child)::after {
    content: "\2192"; position: static; width: auto; height: auto; border-radius: 0;
    background: none; color: var(--color-text-muted); margin-left: var(--space-1);
}
.page-head--wrap-actions .page-head__actions .btn--ghost { padding-inline: var(--space-2); }
.page-head--wrap-actions .page-head__actions { flex-wrap: nowrap; gap: var(--space-1); }
.vector-section--share { margin-top: var(--space-6); }
/* Первым разделом колонки — без своего отступа: его даёт сетка досье, и
   двойной отступ разрывал колонку посередине (05.11). */
.vector-page__main > .vector-section--share:first-child { margin-top: 0; }
/* Прототип: активный поиск, круг 4 (target-ia §12.5). */
.pick-decision--save .pick-decision__form--prepare { grid-column: 1 / -1; }
.pick-analysis__cond--prior .pick-analysis__status-dot { background: var(--color-text-muted); }
/* «Отклики» на 1440: этапы одной ширины. */
@media (min-width: 64rem) {
    .proto-active__board .kanban__col,
    .proto-active__board .kanban__col:not(:has(.kanban__card)) { flex: 1 1 0; min-width: 0; }
}
/* Оценочные вилки на карточках — вторым планом (§12.5, п. 5 круга 4). */
.pick-card--ia .job-card__salary--est .job-card__salary-sum,
.proto-active .job-card__salary--est .job-card__salary-sum { font-size: 0.9375rem; font-weight: 500; color: var(--color-text-soft); }
.proto-active__fact { display: contents; }
/* «Сколько платят» строкой под плитой «Обзора» (§12.5): полоса — на «Резюме
   под должность», здесь — ответ одной строкой и вход туда. */
.ia-salary-line {
    display: flex; align-items: center; gap: var(--space-2);
    min-height: 44px; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface); color: var(--color-text-soft); text-decoration: none; font-size: 0.875rem;
}
.ia-salary-line strong { color: var(--color-text); font-weight: 600; }
.ia-salary-line__icon { color: var(--color-text-muted); flex: none; }
.ia-salary-line__go { margin-left: auto; color: var(--color-text-muted); flex: none; }
.ia-salary-line:hover { border-color: var(--color-border-strong); }
.ia-salary-line:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cov-req__share { margin: 2px 0 0; font-size: 0.8125rem; color: var(--color-text-soft); font-variant-numeric: tabular-nums; }
.gap-reqs__main { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-2); font-size: 1rem; color: var(--color-text); }
.gap-reqs__main-label { color: var(--color-text-soft); }
.gap-reqs__main-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.gap-reqs__thin { font-size: 0.8125rem; color: var(--color-warning-strong); }
/* «через N должностей» в строке сравнения и «мало данных» под счётом узла
   горизонта и карточки роли «Шагов» (витрина /__proto, §12.5). */
.vector-row__distance { font-size: 0.8125rem; color: var(--color-text-soft); }
.ch-node__thin { display: block; font-size: 0.6875rem; line-height: 1.3; color: var(--color-warning-strong); }
/* Прототип: активный поиск, круг 5. Стопка на телефоне: полоса решений не
   липнет поверх «Подробного разбора» — карточка целевой IA короче, и ссылка
   разбора должна оставаться видимой над кнопками. */
@media (max-width: 639px) {
    .pick-card--ia .pick-decision--sticky { position: static; box-shadow: none; }
}
/* Витрина /__proto (§12.6 п. 8): подпись заглушки остатка — остаток в
   preview не прочитан, число показано для примера. */
.proto-quota-sample { margin: 2px 0 0; font-size: 0.75rem; color: var(--color-text-muted); }
/* Тост витрины на широком экране — у правого края, а не поверх середины
   контента: на снимке «Путь выбран» закрывал шаг, о котором он говорит. */
@media (min-width: 1100px) {
    body:has(.proto-tag) .flash-wrap { justify-content: flex-end; padding-inline: var(--space-5); }
}
/* ui_coverage_requirements asked (витрина /__proto, §12.6 п. 10): пробелы
   рынка — строками одной карточки, вопрос «Был такой опыт? Да / Нет» сразу
   под названием, без надзаголовка статуса и без линии. */
.cov-reqs--asked {
    gap: 0;
    padding: var(--space-1) var(--space-4);
    background: var(--color-surface-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.cov-reqs--asked .cov-req { padding: var(--space-3) 0; gap: 2px; background: none; border: 0; border-bottom: 1px solid var(--color-border-soft); border-radius: 0; box-shadow: none; }
.cov-reqs--asked .cov-req:last-child { border-bottom: 0; }
.cov-reqs--asked .cov-req__title { font-size: 1rem; }
.cov-reqs--asked .cov-req:not(.cov-req--compact) .cov-req__answers { margin-top: var(--space-2); padding-top: 0; border-top: 0; }
/* Метка AI у вердикта — своей строкой под словом: в узкой плите (рейл 22rem)
   она уезжала в хвост строки вердикта и ложилась под знак (§12.6 п. 10). */
.match-plate--verdict-first .match-plate__ai { display: flex; flex-basis: 100%; width: max-content; margin-top: 4px; font-size: var(--font-size-xs); font-weight: 500; letter-spacing: 0; }
.cov-reqs--asked .cov-req__answers { flex-wrap: nowrap; }
.cov-reqs--asked .cov-req__answers .cov-req__prompt { flex: 1 1 auto; min-width: 0; }
.cov-reqs--asked .cov-req__answers:has(details[open]) { flex-wrap: wrap; }
/* Прототип: активный поиск, финал (target-ia §12.6). */
.vacancy-state { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--color-text); }
.vacancy-state--sent .icon { color: var(--color-success); }
.pick-decision--state { padding-top: var(--space-2); }
.pick-card__cond-out { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: 0.875rem; font-weight: 600; color: var(--color-danger); }
.pick-analysis__axis-head--plain::after { display: none; }
.pick-analysis__crit-row--live-out .pick-analysis__na-label { color: var(--color-danger); font-weight: 600; }
.cov-split__seg--canadd, .cov-split__key--canadd::before { background: rgb(var(--color-amber-rgb)); }
/* Витрина /__proto: ссылка кабинета, у которой нет экрана витрины
   (proto/links.go), не рисуется — тупик хуже отсутствующей кнопки. */
[data-proto-dead] { display: none !important; }
/* «Мой путь»: шапка на телефоне в одну строку — «Все варианты» и «⋯»;
   «Итоги месяца» и «Журнал» кнопками от 600px, пунктами «⋯» ниже. */
.path-head__wide { display: none; }
@media (min-width: 600px) {
    .path-head__wide { display: inline-flex; }
    .dropdown__item.path-head__narrow { display: none; }
}

/* ===================================================================
   Резюме под должность (слияние «Резюме» и «Профессий», план
   docs/plans/resume-role-merge.md, шаг 5). Карточка должности
   ui_resume_card role: вторая половина с откликами, географией и путём,
   плита основной должности (hero) — тот же тёмный материал, что у плиты
   готовности ui_match_plate и прежней основной профессии.
   =================================================================== */
.resume-card__facts { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-1); font-size: 0.8125rem; line-height: 1.4; color: var(--color-text-soft); }
.resume-card__fact { display: inline-flex; align-items: flex-start; gap: 6px; }
.resume-card__fact > .icon { flex: none; margin-top: 2px; color: var(--color-text-muted); }
.resume-card__fact--quiet { color: var(--color-text-muted); }
.resume-card__fact-warn { color: var(--color-amber-strong, var(--color-amber)); font-weight: 500; }
.resume-card__dot { flex: none; width: 8px; height: 8px; margin-right: 2px; border-radius: 50%; background: var(--color-text-muted); }
.resume-card__dot--ok { background: var(--color-success); }
.resume-card__dot--warn { background: rgb(var(--color-amber-rgb)); }
.resume-card__dot--busy { background: var(--color-accent); }
.resume-card__dot--fail { background: var(--color-danger); }
.resume-card__score { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-1); }
.resume-card__score-value { font-size: 2.5rem; font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.resume-card__score-pct { margin-left: 2px; font-size: 1rem; font-weight: 500; }
.resume-card__score-word { font-size: 1rem; font-weight: 600; }
.resume-card--hero {
    --hero-text: #EEF0FF;
    --hero-soft: #A7ACC8;
    position: relative;
    overflow: hidden;
    border-color: transparent;
    color: var(--hero-text);
    background:
        radial-gradient(340px 240px at 88% 0%, rgba(124, 92, 255, 0.34), transparent 70%),
        radial-gradient(280px 220px at 0% 100%, rgba(45, 212, 191, 0.12), transparent 70%),
        var(--brand-tile);
    box-shadow: var(--shadow-md);
}
/* Тень при наведении не растёт: плита целиком не ссылка, и подъём обещал
   клик там, где его нет. Двери — имя, лист и «Открыть разбор». */
.resume-card--hero:hover { border-color: transparent; box-shadow: var(--shadow-md); }
.resume-card--hero:focus-within { outline: 2px solid #5FB8E8; outline-offset: 3px; }
.resume-card__mark { position: absolute; right: -0.75rem; top: 0.75rem; width: 7.5rem; height: auto; pointer-events: none; opacity: 0.9; }
.resume-card--hero > :not(.resume-card__mark) { position: relative; }
.resume-card--hero .resume-card__ident { padding-right: 4.5rem; }
.resume-card--hero .resume-card__title,
.resume-card--hero .resume-card__score { color: var(--hero-text); }
.resume-card--hero a.resume-card__title:hover { color: var(--hero-text); text-decoration: underline; text-underline-offset: 3px; }
.resume-card--hero .resume-card__meta,
.resume-card--hero .resume-card__facts,
.resume-card--hero .resume-card__fact > .icon,
.resume-card--hero .resume-card__fact--quiet { color: var(--hero-soft); }
.resume-card--hero .resume-card__meta > * + *::before { color: rgba(255, 255, 255, 0.28); }
.resume-card--hero .resume-card__fact-warn { color: #F5C26B; }
.resume-card--hero .resume-card__doc .icon { color: var(--hero-soft); }
/* Плита основной должности на списке «Резюме»: «Скачать PDF» и
   «Редактировать» под текстом, без отступа на лист (у плиты его нет). */
.resume-card__actions--doc { padding-left: 0; justify-content: flex-start; flex-wrap: wrap; }
.resume-card__actions--doc .btn { white-space: nowrap; }
/* Ряд плиты: «Скачать PDF · Редактировать» — действия над документом,
   «Открыть разбор →» — дверь на страницу должности; с 768px дверь уходит к
   правому краю, где взгляд кончает читать плиту. */
.resume-card__doc-buttons, .resume-card__open { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.resume-card__open .icon { transition: transform 0.15s ease; }
.resume-card__open .btn:hover .icon { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .resume-card__open .icon { transition: none; } }
@media (min-width: 768px) { .resume-card__open { margin-left: auto; } }
.resume-card--hero .btn--ghost { color: var(--hero-text); }
/* Цена на тёмной плите — светлым набором: серый по чёрному не читался. */
.resume-card--hero .quota-meter,
.resume-card--hero .quota-meter__label,
.resume-card--hero .quota-meter__text { color: var(--hero-soft); }
.resume-card--hero .quota-meter__cell { border-color: var(--hero-soft); }
.resume-card--hero .btn--ghost:hover { color: var(--hero-text); background: rgba(255, 255, 255, 0.08); }
/* Плита основной должности: живая первая страница её резюме (04.11; на
   прежнем экране «Резюме» основное резюме несло её же). На телефоне —
   миниатюрой 56px слева от имени, с 768px — страницей 120px. Белый лист на
   тёмной плите — сам документ, поэтому без тени-подложки. */
.resume-card__preview {
    --preview-scale: 0.072917; /* 56 / 768 */
    position: relative;
    flex: none;
    display: block;
    width: 56px;
    height: 73px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface-paper);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Плита: ссылки — имя и лист (не вся плита: в строке состояния своя ссылка
   «Обновить»). */
a.resume-card__title { color: inherit; text-decoration: none; }
a.resume-card__title:hover { text-decoration: underline; text-underline-offset: 3px; }
a.resume-card__title:focus-visible, a.resume-card__preview:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.resume-card__doc-action { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.resume-card__doc-action:hover { color: var(--hero-text, inherit); }
.resume-card__preview::after { content: ""; position: absolute; inset: auto 0 0; height: 1rem; background: linear-gradient(transparent, var(--surface-paper)); pointer-events: none; }
@media (min-width: 768px) {
    .resume-card__preview { --preview-scale: 0.15625; /* 120 / 768 */ width: 120px; height: 156px; }
    .resume-card__preview::after { height: 2rem; }
}
/* Строка самого документа на плите: «Базовое · 7 окт · письмо · ссылка». */
.resume-card__docmeta { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); row-gap: 2px; font-size: 0.8125rem; color: var(--hero-soft, var(--color-text-muted)); }
.resume-card__doclink { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.resume-card__doclink:hover { color: var(--hero-text, var(--color-text)); text-decoration: underline; text-underline-offset: 3px; }
.resume-card__doclink:focus-visible { outline: 2px solid #5FB8E8; outline-offset: 2px; border-radius: var(--radius-sm); }
/* На телефоне с миниатюрой знак плиты меньше: в полный рост он ложился на
   имя рядом с листом. */
/* «основная» на плите — надписью над именем, тихим капсом: голубым словом в
   строке состояния она читалась ссылкой. */
.resume-card--hero .resume-card__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hero-soft);
}
@media (max-width: 767px) {
    .resume-card--hero:has(.resume-card__preview) .resume-card__mark { width: 4.5rem; right: -0.5rem; top: 0.5rem; opacity: 0.55; }
    /* Рядом с миниатюрой — только надпись, имя и число; строки состояния,
       документа и фактов — во всю ширину под ними. В колонке 200px справа
       от листа «Собрано до последних правок · Обновить» рвалось на две
       строки, а «Обновить» уезжало от своей точки (замер 05.11). */
    .resume-card--hero:has(.resume-card__preview) .resume-card__body {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        column-gap: var(--space-3);
        row-gap: 4px;
        align-items: start;
    }
    .resume-card--hero:has(.resume-card__preview) .resume-card__ident { display: contents; }
    .resume-card--hero:has(.resume-card__preview) .resume-card__preview { grid-column: 1; grid-row: 1 / span 3; }
    .resume-card--hero:has(.resume-card__preview) :is(.resume-card__eyebrow, .resume-card__title, .resume-card__score) { grid-column: 2; padding-right: 2rem; }
    .resume-card--hero:has(.resume-card__preview) .resume-card__score { margin: 0; }
    .resume-card--hero:has(.resume-card__preview) :is(.resume-card__meta, .resume-card__docmeta, .resume-card__facts) { grid-column: 1 / -1; }
    .resume-card--hero:has(.resume-card__preview) .resume-card__meta { margin-top: var(--space-2); }
    /* Кнопки: «Скачать PDF» во всю ширину, под ним «Редактировать» и
       «Открыть разбор» парой — два ряда вместо трёх. */
    .resume-card--hero .resume-card__actions--doc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .resume-card--hero .resume-card__doc-buttons { display: contents; }
    .resume-card--hero .resume-card__doc-buttons > .btn:first-child,
    .resume-card--hero .resume-card__open:only-child { grid-column: 1 / -1; }
    .resume-card--hero .resume-card__open { display: block; }
    .resume-card--hero .resume-card__actions--doc .btn { width: 100%; justify-content: center; }
}
/* Места на тарифе нет: вместо кнопки — короткая строка с дверью в тарифы,
   полный счётчик — один на экран у «Добавить должность». */
.resume-card__no-slot { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: var(--tap-min); font-size: 0.875rem; color: var(--color-text-soft); }
.resume-card__no-slot .icon { color: var(--color-text-muted); }
.resume-card__no-slot a { font-weight: 600; }
.role-add__slots { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.role-add__slots .quota-meter { margin: 0; }

/* «Какие ещё должности вам подходят» (ui_other_roles): три карточки сеткой,
   остальные под «Ещё N». Карточка складывается по ширине блока. */
.other-roles { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; container: other-roles / inline-size; }
.other-roles__head { display: flex; flex-direction: column; gap: 4px; }
.other-roles__title { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text); }
.other-roles__lead { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-soft); max-width: 65ch; }
.other-roles__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.other-roles__more > .other-roles__grid { margin-top: var(--space-3); }
.other-roles__map { margin: 0; }
@container other-roles (min-width: 560px) { .other-roles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container other-roles (min-width: 880px) { .other-roles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.matching-role-card__form { margin: 0; }
/* Условие «шага вверх» — строка-факт карточки, без процента. */
.matching-role-card__condition { margin: 0; font-size: var(--font-size-xs); line-height: 1.45; color: var(--color-text-soft); }
/* «Ещё просят в ваших вакансиях» — подблок внутри блока требований. */
.gap-reqs--own { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border-soft, var(--color-border)); }
.gap-reqs__own-title { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); }
/* Лид шапки фактами (ui_intro_meta): бейдж состояния и тихие факты. */
.intro-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) 0; font-size: 0.9375rem; color: var(--color-text-soft); }
.intro-meta__badge { margin-right: var(--space-2); display: inline-flex; }
/* Диалог с несколькими исходами (ui_choice_dialog). */
.choice-dialog__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.choice-dialog__form { margin: 0; }
.choice-dialog__hint { margin: var(--space-1) 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-muted); }

/* ===================================================================
   Страница должности /app/profiles/{id} (план слияния, шаг 6). Основа —
   прежняя «Готовность» (profile-overview-grid, profile-hero, profile-plan);
   здесь только то, что принесло слияние.
   =================================================================== */
/* Меню должности — справа от крошек на любой ширине: на телефоне пустой
   ряд под заголовком с одной круглой кнопкой отодвигал вердикт. */
.role-page__head { position: relative; }
.role-page__head .page-head__row { position: absolute; top: 0; right: 0; margin: 0; }
.role-page__head .breadcrumbs, .role-page__head .page-head__breadcrumbs { padding-right: 3.5rem; min-height: 44px; display: flex; align-items: center; }
/* Сетка страницы должности (04.11) — каркас «Обзора» (.dash-layout):
   колонка и рейл 22rem с 1140px. Рейл — документ и всё, что про него;
   колонка — вердикт и работа. Четыре части в порядке DOM — порядок
   телефона: документ → колонка → низ рейла → конец колонки; на широком
   экране обе части рейла стоят справа друг под другом, а колонка занимает
   три первых ряда (третий — гибкий: ряды рейла берут высоту своих частей, а
   не колонки). Уже 1140px — один поток. */
.role-layout,
.role-layout > * { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.role-layout__doc { gap: var(--space-3); }
.role-layout .role-folds { margin-top: 0; }
@media (min-width: 1140px) {
    .role-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 22rem;
        grid-template-rows: auto auto 1fr auto;
        column-gap: var(--space-5);
        row-gap: var(--space-4);
        align-items: start;
    }
    .role-layout__doc { grid-column: 2; grid-row: 1; }
    .role-layout__docs { grid-column: 2; grid-row: 2; }
    .role-layout__main { grid-column: 1; grid-row: 1 / 4; }
    .role-layout__end { grid-column: 1; grid-row: 4; }
}
/* «Под вакансии» и «Как читается резюме» — строками одной карточки под
   документом, как складки в конце страницы: две отдельные полосы подряд
   читались отдельными разделами. */
/* Несобранный документ в рейле: плитка «Собрать резюме» — стопкой (текст,
   под ним кнопка). Широкая плитка ставит кнопку справа от текста по ширине
   окна, а в рейле 22rem текст шёл по два слова в строке. */
@media (min-width: 1140px) {
    .role-layout__doc .quick-action--wide { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon body" "icon actions"; align-items: start; }
    .role-layout__doc .quick-action--wide .quick-action__actions { padding-top: var(--space-2); }
}
.role-layout__folds { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-elevated); min-width: 0; }
.role-layout__folds > .role-reading { border: 0; border-radius: 0; background: none; }
.role-layout__folds > * + * { border-top: 1px solid var(--color-border-soft, var(--color-border)); }
/* Вердикт в колонке рядом с рейлом: кольцо — в строку с заголовком, объяснение
   и колонки — во всю ширину под ними (та же раскладка, что на телефоне). С
   кольцом сбоку объяснение шло столбцом в 300px при колонке 674px на 1440 и
   в 3–4 слова на строку на ноутбуке 1180–1366. Колонки «С чем вы придёте /
   Чего не хватает» — по ширине самой колонки, а не окна. */
@media (min-width: 1140px) {
    .role-layout__main { container: role-main / inline-size; }
    .role-layout__main .target-fit__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); row-gap: 6px; align-items: center; }
    .role-layout__main .target-fit__ring { grid-column: 1; grid-row: 1 / span 2; }
    .role-layout__main .target-fit__ring .score-ring { --diameter: 6.5rem; --stroke: 12; }
    .role-layout__main .target-fit__ring .score-ring__value { font-size: 1.75rem; }
    .role-layout__main .target-fit__verdict { display: contents; }
    .role-layout__main .target-fit__verdict > .verdict-eyebrow { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
    .role-layout__main .target-fit__verdict > .verdict-line { grid-column: 2; grid-row: 2; align-self: start; }
    .role-layout__main .target-fit__verdict > .verdict-line > .verdict-dot { display: none; }
    .role-layout__main .target-fit__verdict > :not(.verdict-eyebrow):not(.verdict-line) { grid-column: 1 / -1; }
    .role-layout__main .target-fit__verdict > .target-fit__why { margin-top: var(--space-2); }
    .role-layout__main .profile-hero { grid-template-columns: minmax(0, 1fr); }
}
@container role-main (max-width: 560px) {
    .target-fit__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
/* «Почему такая оценка» — нижней строкой карточки вердикта: это его
   основания, а не следующий раздел. */
.role-layout .profile-hero-row { gap: 0; }
.role-layout .profile-hero-row > .profile-hero:has(+ .role-why) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.role-layout .profile-hero-row > .role-why { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; background: var(--color-surface, #fff); }
.role-doc { min-width: 0; }
.role-doc .quick-action + .quota-meter { margin-top: var(--space-2); }
/* Свёрнутые блоки — строками одной карточки: прежде восемь серых подписей
   13px подряд читались хвостом служебного текста, а не разделами. */
.role-folds, .role-reading, .role-why, .role-wide { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-elevated); min-width: 0; }
.role-folds { display: flex; flex-direction: column; margin-top: var(--space-5); }
.role-fold + .role-fold { border-top: 1px solid var(--color-border-soft, var(--color-border)); }
.role-fold > .disclosure__summary,
.role-reading > .disclosure__summary {
    display: flex; justify-content: space-between; width: 100%;
    padding: var(--space-3) var(--space-4); box-sizing: border-box;
    font-size: 1rem; font-weight: 600; color: var(--color-text);
}
.role-fold > .disclosure__summary .disclosure__chevron,
.role-reading > .disclosure__summary .disclosure__chevron { color: var(--color-text-muted); flex: none; }
.role-fold__body, .role-reading__body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); min-width: 0; }
.role-fold__title { margin: var(--space-2) 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.role-fold__text { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-soft); max-width: 65ch; }
.role-fold__origin { margin: 0; }
.role-reading__lead { margin: 0; font-size: var(--font-size-xs); line-height: 1.45; color: var(--color-text-muted); max-width: 60ch; }
/* Разделы и советы — один список: второй ряд продолжает первый той же
   волосяной линией, а не начинается своим заголовком. */
.role-reading__list { container-type: inline-size; }
.role-reading__list + .role-reading__list > .sx-row:first-child { border-top: 1px solid var(--color-border-soft); padding-top: var(--space-3); }
/* Блоки «куда ещё» (другие должности, путь, площадки, зарплаты) на узком
   экране — раскрытием с числом в заголовке (бюджет высоты на 375, 04.11):
   заголовок блока внутри повторял бы сводку, поэтому он скрыт. С 1024px
   wide-open.js раскрывает их, и раскрытое стоит открытым блоком без рамки и
   сводки — как прежде. */
.role-wide__body { padding: 0 var(--space-4) var(--space-4); min-width: 0; }
@media (max-width: 1023px) {
    .role-wide__body .other-roles__title,
    .role-wide__body .profile-tab-section__title,
    .role-wide__body .key-steps__head,
    .role-wide__body > .vector-section__head,
    .role-wide__body > .role-section > .vector-section__head { display: none; }
}
/* Разделы колонки страницы должности (05.11) — шапкой раздела досье над
   карточкой: значок, заголовок, подпись, линия. Прежде у страницы было три
   вида заголовков — карточка со шапкой внутри, голый заголовок над списком и
   заголовок со счётом справа. */
.role-section { display: flex; flex-direction: column; min-width: 0; }
.role-wide__body > .vector-section__head,
.role-section > .vector-section__head { margin-bottom: var(--space-3); }
@media (min-width: 1024px) {
    .role-wide[open] { border: 0; background: none; }
    .role-wide[open] > .disclosure__summary { display: none; }
    .role-wide[open] > .role-wide__body { padding: 0; }
}
/* Переименование и «Убрать» без JS — блоком под шапкой. */
.role-page__rename, .role-page__remove { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-elevated); max-width: 40rem; }
.role-page__rename-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.role-page__remove-title { margin: 0; font-size: 1.125rem; font-weight: 600; }
.role-page__remove-body { margin: 0; color: var(--color-text-soft); }
.profile-analysis__panel-main { margin: var(--space-1) 0 0; display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 0.9375rem; color: var(--color-text-soft); }
.profile-analysis__panel-main b { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.role-fold__body .profile-history { padding-left: var(--space-2); }

/* «Лимит резюме» (/app/resumes/space, 04.11) — из частей других экранов:
   строка лимита ui_hint_row (как на «Резюме»), группы — свёрнутыми
   разделами .role-folds (как на странице должности), в строке раздела
   после имени и числа — тихое «освободит N». «Удалить все» на телефоне во
   всю ширину: на узкой строке кнопка у края пряталась. */
/* Колонка чтения — шириной основной колонки страницы должности: строки во
   всю ширину 1440 уносили «⋯» на километр от имени. */
.resume-space { max-width: 52rem; }
.resume-space__summary { min-width: 0; }
.resume-space__summary-frees { margin-left: var(--space-2); font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); white-space: nowrap; }
.resume-space__state { margin: 0; }
.resume-space__folds { margin-top: 0; }
.resume-space__failed { margin: var(--space-1) 0 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.resume-space__clear .btn { width: 100%; justify-content: center; }
@media (min-width: 640px) { .resume-space__clear .btn { width: auto; } }
/* Строки внутри раскрытия группы — без второй рамки: группа уже карточка. */
.role-fold__body .resume-list--rows { padding: 0; border: 0; border-radius: 0; background: none; }

.apps-profile-filter { margin-bottom: var(--space-3); }

/* Состояние резюме на карточке готовящегося отклика (04.11): строка под
   компанией, тон — по старшинству состояния. Готовое — тихо; идущее —
   акцентом; чего-то не хватает — предупреждением. */
.app-doc-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.app-doc-state--building { color: var(--color-accent); }
.app-doc-state--failed,
.app-doc-state--stale,
.app-doc-state--none,
.app-doc-state--missing,
.app-doc-state--deleted { color: var(--color-warning-strong); }
.kanban__card-link .app-doc-state { display: flex; font-size: 0.75rem; }

/* ui_market_summary — «Спрос и зарплаты» в рейле досье выбранного пути
   (target-ia §6.4 п. 9): шапка раздела, как у соседней колонки, под ней
   карточка из трёх строк-ссылок к полным разделам. */
.market-summary { display: flex; flex-direction: column; }
.market-summary__head { margin-bottom: var(--space-3); }
.market-summary__rows {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.market-summary__rows > li + li { border-top: 1px solid var(--color-border-soft); }
.market-summary__row {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-5) var(--space-2) 0;
    color: var(--color-text);
    text-decoration: none;
}
.market-summary__label { font-size: 0.8125rem; color: var(--color-text-muted); }
.market-summary__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.market-summary__note { font-size: 0.8125rem; color: var(--color-text-muted); }
.market-summary__dir { font-weight: 500; }
.market-summary__dir--up { color: var(--color-teal-deep, var(--color-teal)); }
.market-summary__dir--down { color: var(--color-warning); }
.market-summary__chev {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
}
.market-summary__row:hover .market-summary__value { color: var(--color-accent); }
.market-summary__row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Свёрнутый раздел досье (05.11): «Почему этот путь» у выбранного пути.
   Свёрнутый раздел выглядит разделом — значок, заголовок и подпись, как у
   шапок соседей, шеврон справа, волосяная линия под шапкой, — а не плашкой
   «ещё N» среди разделов с шапками. */
.vector-fold { margin: 0; }
.vector-fold__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap-min);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid color-mix(in srgb, currentColor 6%, transparent);
    list-style: none;
    cursor: pointer;
}
.vector-fold__summary::-webkit-details-marker { display: none; }
.vector-fold__title { flex: none; }
.vector-fold__hint {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.vector-fold__chev {
    flex: none;
    margin-left: auto;
    color: var(--color-text-muted);
    transition: transform var(--dur-base) var(--ease-out);
}
.vector-fold[open] .vector-fold__chev { transform: rotate(180deg); }
.vector-fold__summary:hover .vector-fold__title { color: var(--color-accent); }
.vector-fold__summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-sm); }
.vector-fold__body { display: flex; flex-direction: column; gap: var(--space-6, 2rem); margin-top: var(--space-4); }
@media (max-width: 599px) {
    .vector-fold__summary { flex-wrap: wrap; row-gap: 2px; }
    .vector-fold__hint { order: 3; flex-basis: 100%; padding-left: calc(2.25rem + var(--space-3)); }
}

/* «Ещё N зон» внутри карточки пробелов (05.11): строка-раскрытие за
   волосяной линией, а не плашка с тенью — карточка в карточке читалась
   лишним слоем. */
.profile-analysis__panel .list-more > .list-more__summary {
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--color-border-soft);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.profile-analysis__panel .list-more > .list-more__summary:hover { box-shadow: none; color: var(--color-accent); }
/* Мини-график спроса в строке «Спрос»: те же недели, что полный график
   раздела, справа от значения, перед шевроном. */
.market-summary__row:has(.market-summary__spark) { padding-right: calc(var(--space-5) + 88px); }
.market-summary__spark {
    position: absolute;
    right: calc(var(--space-5) + 4px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 80px;
    height: 28px;
}
.market-summary__spark-bar {
    flex: 1 1 0;
    min-width: 2px;
    border-radius: 1px 1px 0 0;
    background: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.market-summary__spark-bar:last-child { background: var(--color-accent); }
.market-summary__spark-bar--empty { height: 2px; background: var(--color-border); }

/* «Не в плане, хотя просят часто» (05.11): строка-ссылка под шапкой
   «Чего не хватает до роли» к списку требований вне зон. Тихим тоном
   предупреждения, без карточки: это подсказка к разделу, не новый блок. */
.vector-offplan {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-warning) 8%, transparent);
    color: var(--color-text);
    font-size: 0.9375rem;
    text-decoration: none;
}
.vector-offplan:hover { background: color-mix(in srgb, var(--color-warning) 14%, transparent); }
.vector-offplan__icon { flex: none; color: var(--color-warning); }
.vector-offplan__arrow { flex: none; margin-left: auto; color: var(--color-text-muted); }
/* «Да, это за год» под ожиданиями (05.11): вопрос и кнопка — на месте. */
.salary-band__period { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
/* График спроса над строкой «подробно в профессии» (05.11): отделён
   волосяной линией, как подблоки внутри панели рынка. */
.vector-market__trend-solo { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-soft); }


/* Итоги месяца в «Моём пути» (06.11): карточка «Обзора» под шагами и дата
   следующих итогов тихой строкой. */
.path-review { display: grid; gap: var(--space-2); }
.path-review__next {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
/* «Этот шаг советуют итоги месяца» — под названием шага. */
.vector-steps__advice {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
}
.vector-steps__advice:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* «Ваш путь»: маршрут графом с 768px, строкой со станциями — уже. */
.path-head__route { display: none; }
@media (min-width: 768px) {
    .path-head__route { display: block; }
    .path-head__line { display: none; }
}
@media (max-width: 639px) {
    .journal-link--wide { display: none; }
}