/* ============================================================================
   Карта возможностей v2 — /skills2

   Жанр: чернильный атлас на бумаге. Первая версия была звёздным небом на
   чёрном, и это решало другую задачу — впечатление. Здесь карта работает:
   на светлом фоне читаются подписи, а плотность точек показывает размер
   раздела, а не свечение.

   Палитра — «бумага и чернила» из v5 (public/site/v5/v5.css): она уже
   проверена на контраст и используется на свежих страницах проекта, поэтому
   переход с витрины сюда не выглядит переездом в чужой продукт.
   ============================================================================ */

:root {
    color-scheme: dark;

    /* Тёмная — тема по умолчанию, решение владельца.
       Карта из 875 точек и задумана как звёздное небо: на чёрном она читается
       богатством, а на бумаге становится честным, но скучным атласом. Светлая
       остаётся выбором человека, а не догадкой по часам и системным настройкам. */
    --paper: #0B0C11;
    --paper-2: #12141B;
    --card: #161922;

    --ink: #F1EFE9;
    --ink-2: #B8B5AC;
    --muted: #8B8880;

    --rule: rgba(241, 239, 233, .13);
    --rule-strong: rgba(241, 239, 233, .26);

    --green: #4FD98A;
    --green-deep: #74E5A5;
    --green-soft: rgba(79, 217, 138, .10);
    --green-line: rgba(79, 217, 138, .30);

    --amber: #E0A45C;
    --amber-soft: rgba(224, 164, 92, .12);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, .5);
    --shadow-3: 0 24px 64px rgba(0, 0, 0, .6);

    --display: 'PT Serif', Georgia, 'Times New Roman', serif;
    --body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

    --ease: cubic-bezier(.16, 1, .3, 1);

    /* Карта: на тёмном — звёзды со свечением. */
    --map-bg: #06070D;
    --map-halo: rgba(79, 217, 138, .55);
    --map-label: #F1EFE9;
    --map-label-halo: rgba(6, 7, 13, .85);
    --map-edge: 241, 239, 233;
    --map-area: rgba(241, 239, 233, .022);
    --map-area-line: rgba(241, 239, 233, .09);
    --map-dot-alpha: .92;
    --map-glow: 1;
}

/*
 * Светлая — по выбору человека. Не инверсия, а другой жанр: карта становится
 * чернильным атласом на бумаге, где плотность точек показывает размер раздела,
 * а свечение только мешало бы.
 */
:root[data-theme="light"] {
    color-scheme: light;

    --paper: #FBF9F5;
    --paper-2: #F3F0E8;
    --card: #FFFFFF;

    --ink: #1A1A17;          /* контраст к бумаге 16,6 */
    --ink-2: #55534B;        /* 7,3 */
    --muted: #6E6A5E;        /* 5,1 — нижняя граница для подписей */

    --rule: rgba(26, 26, 23, .12);
    --rule-strong: rgba(26, 26, 23, .22);

    --green: #12703F;        /* зелёные чернила бренда, 5,85 на бумаге */
    --green-deep: #0C5730;
    --green-soft: rgba(18, 112, 63, .08);
    --green-line: rgba(18, 112, 63, .28);

    --amber: #A96C1E;
    --amber-soft: rgba(169, 108, 30, .10);

    --shadow-1: 0 1px 2px rgba(26, 26, 23, .05), 0 2px 8px rgba(26, 26, 23, .04);
    --shadow-2: 0 2px 6px rgba(26, 26, 23, .06), 0 12px 32px rgba(26, 26, 23, .08);
    --shadow-3: 0 8px 20px rgba(26, 26, 23, .08), 0 32px 64px rgba(26, 26, 23, .12);

    --map-bg: #FBF9F5;
    --map-halo: rgba(18, 112, 63, .45);
    --map-label: #1A1A17;
    --map-label-halo: #FBF9F5;
    --map-edge: 26, 26, 23;
    --map-area: rgba(26, 26, 23, .028);
    --map-area-line: rgba(26, 26, 23, .10);
    --map-dot-alpha: .8;
    --map-glow: 0;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* Страница не скроллится: скролл забирает карта. Ответ живёт на листе
       и прокручивается внутри себя, если не помещается. */
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--map-bg);
    color: var(--ink);
    font: 400 16px/1.6 var(--body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Волокно бумаги. Псевдоэлементом НАД канвой, а не внутри неё: внутри оно
   поехало бы вместе с камерой и перестало быть бумагой. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .03;
    mix-blend-mode: multiply;
    /* В тёмной теме волокна нет: на чёрном оно даёт грязь, а не бумагу. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

body::after { opacity: 0; }
:root[data-theme="light"] body::after { opacity: .03; }

.sk2-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.sk2-sr-list {
    position: absolute;
    left: -100vw;
    top: 0;
    width: 90vw;
}

.sk2-skip {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 60;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
    text-decoration: none;
    transition: top .2s var(--ease);
}
.sk2-skip:focus { top: 12px; }

/* ═══════════ КАРТА ═══════════ */

.sk2-map {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: grab;
}
.sk2-map.is-drag { cursor: grabbing; }
.sk2-map.is-hit { cursor: pointer; }

/* ═══════════ ВЫХОД ═══════════ */

.sk2-back {
    position: fixed;
    left: 18px; top: 16px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px 9px 11px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    color: var(--ink-2);
    font: 500 .88rem/1 var(--body);
    text-decoration: none;
    transition: border-color .2s var(--ease), color .2s var(--ease);
}
.sk2-back:hover { border-color: var(--rule-strong); color: var(--ink); }
.sk2-back:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ═══════════ ЛИСТ ═══════════ */

.sk2-sheet {
    position: fixed;
    z-index: 10;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(100% - 40px, 680px);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 30px 32px 26px;
    border-radius: 22px;
    border: 1px solid var(--rule);
    /*
     * Окно задачи — стекло поверх ЖИВОЙ карты, а не заслонка.
     *
     * В первом заходе лист был почти непрозрачным и вставал посреди экрана:
     * галактика оказывалась за ним, и человек видел бледные пятна по краям
     * вместо карты. Теперь сквозь окно карта просматривается, а читаемость
     * держит размытие фона, а не плотная заливка.
     */
    background: color-mix(in srgb, var(--paper) 72%, transparent);
    backdrop-filter: saturate(1.2) blur(22px);
    -webkit-backdrop-filter: saturate(1.2) blur(22px);
    box-shadow: var(--shadow-3);
    transition: transform .6s var(--ease), top .6s var(--ease);
}

/* Когда пришёл ответ, лист поднимается: карта под ним должна быть видна,
   иначе «проявление» происходит за спиной у человека. */
.sk2-sheet.is-answered {
    top: 34px;
    transform: translate(-50%, 0);
}

.sk2-head { text-align: center; transition: opacity .4s var(--ease), max-height .5s var(--ease); }
.sk2-sheet.is-answered .sk2-head { opacity: 0; max-height: 0; overflow: hidden; }

.sk2-head h1 {
    margin: 0;
    font: 400 clamp(2.1rem, 5.4vw, 3.3rem)/1.06 var(--display);
    letter-spacing: -.028em;
    text-wrap: balance;
}

.sk2-sub {
    margin: 12px auto 0;
    max-width: 46ch;
    color: var(--ink-2);
    font-size: 1.02rem;
}

/* ── строка ─────────────────────────────────────────────── */

.sk2-field {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 6px 10px 2px;
    border-bottom: 1.5px solid var(--ink);
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(6px);
    transition: border-color .25s var(--ease);
}
.sk2-field:focus-within { border-bottom-color: var(--green); }

.sk2-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: 400 clamp(1.05rem, 2.4vw, 1.28rem)/1.45 var(--body);
    padding: 6px 0;
}
.sk2-field input::placeholder { color: var(--muted); }
.sk2-field input:focus { outline: none; }

.sk2-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: var(--muted);
    font: 400 .92rem/1 var(--mono);
    font-variant-numeric: tabular-nums;
    transition: color .25s var(--ease);
}
.sk2-go svg { opacity: .4; transition: opacity .25s var(--ease); }
.sk2-field.is-live .sk2-go { color: var(--green); font-weight: 500; }
.sk2-field.is-live .sk2-go svg { opacity: 1; }

/* ── примеры ────────────────────────────────────────────── */

.sk2-examples {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    font-size: .92rem;
    color: var(--muted);
    transition: opacity .3s var(--ease);
}
.sk2-examples[hidden] { display: none; }

.sk2-examples button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: 400 .95rem/1.4 var(--body);
    color: var(--ink-2);
    border-bottom: 1px dotted var(--rule-strong);
}
.sk2-examples button:hover { color: var(--green-deep); border-bottom-color: var(--green); }
.sk2-examples button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }

/* ── ответ ──────────────────────────────────────────────── */

/* Найдено столько-то из стольких-то: граница ответа. Без неё человек не
   знает, показали ему всё подходящее или первые попавшиеся. */
.sk2-found {
    margin: 0 0 2px;
    font-size: .9rem;
    color: var(--ink-2);
}
.sk2-found b { font-family: var(--mono); font-weight: 500; }

.sk2-answer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
    animation: sk2-rise .45s var(--ease) both;
}
.sk2-answer[hidden] { display: none; }

@keyframes sk2-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.sk2-group {
    margin: 6px 0 2px;
    font: 500 .72rem/1 var(--body);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
}

.sk2-item {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 14px;
    align-items: start;
    padding: 13px 16px 14px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--shadow-1);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.sk2-item:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.sk2-item:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.sk2-item.is-on { border-color: var(--green-line); background: var(--green-soft); }

.sk2-item__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--green);
    margin-top: 7px;
}
.sk2-item__dot--life { background: var(--amber); }

.sk2-item b { display: block; font-weight: 600; font-size: 1.01rem; }
.sk2-item span { display: block; color: var(--ink-2); font-size: .93rem; margin-top: 2px; }
.sk2-item i {
    display: block;
    font-style: normal;
    font-size: .8rem;
    color: var(--muted);
    font-family: var(--mono);
    margin-top: 5px;
}

/* Главное действие. Единственная кнопка страницы, появляется только когда
   есть что поручить, и называет РАБОТУ, а не режим. */
/* Единственная кнопка страницы не уезжает за нижний край: список сценариев
   прокручивается, действие остаётся. Иначе человек читает ответ и не видит,
   чем его закончить. */
.sk2-act {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 22px;
    margin-top: 2px;
    /*
     * Полоса действия глушит то, что под ней.
     *
     * Градиент от прозрачного к цвету листа — а цвет берётся из токена, иначе
     * в тёмной теме под кнопкой просвечивала чужая карточка и это читалось
     * как наложение слоёв, а не как закреплённое действие.
     */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--paper) 0%, transparent) 0%,
        color-mix(in srgb, var(--paper) 82%, transparent) 30%,
        var(--paper) 62%);
    backdrop-filter: blur(6px);
}

.sk2-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 14px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--green);
    color: #FBF9F5;
    font: 500 1rem/1 var(--body);
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.sk2-cta:hover { background: var(--green-deep); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.sk2-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sk2-cta[disabled] { opacity: .5; cursor: default; transform: none; }

.sk2-note {
    margin: 2px 0 0;
    font-size: .86rem;
    color: var(--muted);
}
.sk2-note a { color: var(--ink-2); }
.sk2-note--warn { color: var(--amber); }

/* Уточнение: поле появляется только у сценариев, где в заготовке есть пропуск. */
.sk2-ask {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
}
.sk2-ask label { font-size: .84rem; color: var(--muted); }
.sk2-ask input {
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 10px 13px;
    font: 400 .95rem/1.4 var(--body);
    background: var(--card);
    color: var(--ink);
}
.sk2-ask input:focus { outline: none; border-color: var(--green-line); }

.sk2-facts {
    margin: 0;
    text-align: center;
    font-size: .87rem;
    color: var(--muted);
    transition: opacity .3s var(--ease);
}
.sk2-facts b { font-family: var(--mono); font-weight: 500; color: var(--ink-2); }
.sk2-sheet.is-answered .sk2-facts { opacity: 0; }

/* ═══════════ ПОДПИСЬ ПОД КУРСОРОМ ═══════════ */

.sk2-hover {
    position: fixed;
    z-index: 15;
    pointer-events: none;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font: 500 .82rem/1 var(--body);
    box-shadow: var(--shadow-2);
    transform: translate(-50%, -140%);
    white-space: nowrap;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sk2-hover[hidden] { display: none; }

/* ═══════════ ТЕЛЕФОН ═══════════ */

@media (max-width: 620px) {
    .sk2-sheet {
        width: calc(100% - 24px);
        gap: 14px;
    }

    /* Ответ занимает лист целиком: обзор всей карты на 390 пикселях не
       строится вовсе — 875 точек при шаге меньше радиуса пальца это не
       карта, а лотерея. Карта остаётся фоном и подложкой смысла. */
    .sk2-sheet.is-answered {
        top: 12px;
        max-height: calc(100dvh - 24px);
    }

    .sk2-answer { max-height: calc(100dvh - 210px); }

    .sk2-back { left: 12px; top: 10px; padding: 8px 13px 8px 9px; }
    .sk2-back span { display: none; }

    /* Тап-цели не меньше 44 px — правило проекта. */
    .sk2-examples button { min-height: 44px; display: inline-flex; align-items: center; }
    .sk2-cta { width: 100%; justify-content: center; min-height: 48px; }
    .sk2-item { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* ═══════════ ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМА И ТЕМЫ ═══════════

   Две кнопки, которых по принципу минимализма быть не должно, — и всё же они
   есть, по прямому слову владельца. Обоснование, почему это тот самый случай
   «без кнопки никак»:

   • режим. Задача и карта — не два вида одного списка, а два РАЗНЫХ вопроса.
     «Что мне сделать сейчас» и «что вообще умеет агент» приходят к странице
     с разным намерением, и угадать намерение молча нельзя: догадка ошибётся
     ровно в половине случаев;
   • тема. Карта из 875 точек на тёмном и на светлом — два разных жанра, и
     это вопрос вкуса, а не правильности. Системная тема угадывает время
     суток, а не желание.

   Обе кнопки живут в одном узле в углу и не отнимают места у строки. */

.sk2-tools {
    position: fixed;
    right: 18px;
    top: 16px;
    z-index: 22;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sk2-modes {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
}

.sk2-mode {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: 500 .86rem/1 var(--body);
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.sk2-mode:hover { color: var(--ink); }
.sk2-mode[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sk2-mode:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.sk2-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color .2s var(--ease), color .2s var(--ease);
}
.sk2-theme:hover { border-color: var(--rule-strong); color: var(--ink); }
.sk2-theme:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Иконка показывает то, ВО ЧТО переключимся. Тема по умолчанию тёмная,
   значит на старте это солнце. */
.sk2-theme__moon { display: none; }
.sk2-theme__sun { display: block; }
:root[data-theme="light"] .sk2-theme__moon { display: block; }
:root[data-theme="light"] .sk2-theme__sun { display: none; }

/* ═══════════ РЕЖИМ КАРТЫ ═══════════ */

/* Лист уходит: карта занимает всё. Скрываем прозрачностью и снимаем события,
   а не display:none — так возврат к задаче происходит без перестроения. */
body.is-map .sk2-sheet {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -46%) scale(.98);
}

/* В режиме карты легенда не просто проявляется — она становится живой:
   без `pointer-events` строка про Вайб Про была бы видна и не нажималась,
   а канва под ней перехватывала бы каждое нажатие. */
body.is-map .sk2-legend { opacity: 1; transform: none; pointer-events: auto; }

/* Легенда карты: что за цвета и сколько чего. Появляется только в режиме
   карты — в режиме задачи объяснять нечего, там карта фоном. */
.sk2-legend {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 18;
    max-width: min(340px, calc(100vw - 36px));
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--rule);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.3) blur(14px);
    box-shadow: var(--shadow-2);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.sk2-legend h2 {
    margin: 0 0 8px;
    font: 400 1.1rem/1.2 var(--display);
    letter-spacing: -.02em;
}
.sk2-legend p { margin: 0; color: var(--ink-2); font-size: .88rem; }
.sk2-legend dl {
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    font-size: .86rem;
}
.sk2-legend dt { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.sk2-legend dd { margin: 0; color: var(--muted); font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.sk2-legend i {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--green);
    display: inline-block;
}
/* Строка про Про — единственная нажимаемая в легенде: это и есть вход в
   заявку для тех, кто пришёл смотреть карту целиком, а не с задачей.
   Выглядит текстом, а не кнопкой: лишний акцент в легенде — шум. */
.sk2-legend__link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px dashed var(--rule-strong);
}
.sk2-legend__link:hover { color: var(--ink); border-bottom-color: var(--ink-2); }
.sk2-legend__link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.sk2-legend i.is-life { background: var(--amber); }
.sk2-legend i.is-pro { background: var(--muted); }
.sk2-legend__hint {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
    font-size: .82rem;
    color: var(--muted);
}

/* Карточка узла в режиме карты: открывается по нажатию на точку. */
.sk2-node {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 19;
    width: min(400px, calc(100vw - 36px));
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid var(--rule);
    background: var(--card);
    box-shadow: var(--shadow-3);
    animation: sk2-rise .35s var(--ease) both;
}
.sk2-node[hidden] { display: none; }
.sk2-node__eyebrow {
    margin: 0 0 6px;
    font: 500 .7rem/1 var(--body);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
}
.sk2-node h3 { margin: 0 0 6px; font: 600 1.12rem/1.3 var(--body); letter-spacing: -.01em; }
.sk2-node p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.sk2-node .sk2-cta { margin-top: 14px; width: 100%; }
.sk2-node__close {
    position: absolute;
    right: 12px; top: 12px;
    width: 30px; height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.sk2-node__close:hover { background: var(--paper-2); color: var(--ink); }

@media (max-width: 620px) {
    .sk2-tools { right: 12px; top: 10px; gap: 6px; }
    .sk2-mode span { display: none; }
    .sk2-mode { padding: 9px 12px; min-height: 40px; }
    /* На телефоне легенда — это цифры, а не абзац: длинный текст съедал
       половину экрана, то есть половину самой карты. */
    .sk2-legend { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 12px 14px; }
    .sk2-legend h2 { font-size: .95rem; margin-bottom: 4px; }
    .sk2-legend > p:first-of-type { display: none; }
    .sk2-legend dl { font-size: .8rem; margin-top: 6px; gap: 4px 10px; }
    .sk2-legend__hint { margin-top: 8px; padding-top: 8px; font-size: .76rem; }
    .sk2-node { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 16px; }
    body.is-map .sk2-legend[data-hidden-by-node] { opacity: 0; }
}

/* ═══════════ ЗАЯВКА НА ВАЙБ ПРО ═══════════

   Единственное место страницы, где человек что-то заполняет руками, поэтому
   оно и выглядит иначе: не плашка сбоку, а окно по центру со своей подложкой.
   Открывается только из тупика — у сценария, который в вебе не запускается,
   и у строки легенды про такие сценарии.

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

.sk2-pro {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 20px;
    background: color-mix(in srgb, var(--paper) 62%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: sk2-fade .25s var(--ease) both;
}
.sk2-pro[hidden] { display: none; }

.sk2-pro__card {
    position: relative;
    width: min(100%, 520px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 26px 28px 24px;
    border-radius: 20px;
    border: 1px solid var(--rule);
    background: var(--card);
    box-shadow: var(--shadow-3);
    animation: sk2-rise .35s var(--ease) both;
}

.sk2-pro__card h2 {
    margin: 0 0 14px;
    font: 400 clamp(1.5rem, 3.4vw, 1.9rem)/1.15 var(--display);
    letter-spacing: -.02em;
    text-wrap: balance;
    padding-right: 34px;
}

/* Обещания — списком без маркеров-кружков: выделено то, что человек и ищет
   глазами (цена, охват), остальное поясняет. */
.sk2-pro__list {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
    font-size: .92rem;
    color: var(--ink-2);
}
.sk2-pro__list li {
    padding-left: 18px;
    position: relative;
    line-height: 1.45;
}
.sk2-pro__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .52em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
}
.sk2-pro__list b { color: var(--ink); font-weight: 600; }

.sk2-pro form { display: grid; gap: 10px; }

.sk2-pro__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sk2-pro input[type="text"],
.sk2-pro textarea {
    width: 100%;
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--paper-2);
    color: var(--ink);
    font: 400 .95rem/1.45 var(--body);
    transition: border-color .2s var(--ease);
}
.sk2-pro input[type="text"]::placeholder,
.sk2-pro textarea::placeholder { color: var(--muted); }
.sk2-pro input[type="text"]:focus,
.sk2-pro textarea:focus { outline: none; border-color: var(--green-line); }
.sk2-pro textarea { resize: vertical; min-height: 62px; }

/* Поле, которое сервер отбил, подсвечивается по месту: общая красная строка
   внизу заставляет человека искать, что именно не так. */
.sk2-pro .is-bad { border-color: var(--amber); }

.sk2-pro__consent {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.4;
}
.sk2-pro__consent input {
    margin-top: 2px;
    width: 16px; height: 16px;
    accent-color: var(--green);
    flex: 0 0 auto;
}
.sk2-pro__consent a { color: var(--ink-2); }

.sk2-pro .sk2-cta { width: 100%; align-self: stretch; margin-top: 2px; }
.sk2-pro .sk2-note--bad { color: var(--amber); }
.sk2-pro .sk2-note--ok { color: var(--green); }

/* Ловушка для ботов: снаружи её быть не должно, но и display:none в форме
   некоторые боты распознают — прячем позиционированием. */
.sk2-hp {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Отправлено: форма уходит, остаётся ответ. Оставлять поля с контактами на
   экране после успеха — приглашение отправить второй раз. */
.sk2-pro__done {
    display: grid;
    gap: 8px;
    padding: 18px 0 4px;
}
.sk2-pro__done p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.sk2-pro__done b { color: var(--ink); }

@keyframes sk2-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 620px) {
    .sk2-pro { padding: 12px; align-items: end; }
    .sk2-pro__card { padding: 20px 18px 18px; border-radius: 18px; }
    .sk2-pro__row { grid-template-columns: 1fr; }
    .sk2-pro__list { font-size: .88rem; gap: 7px; margin-bottom: 16px; }
}

/* Без скрипта форму открывает якорь: ссылка на неё лежит в текстовом
   эквиваленте карты, который читает скринридер. Иначе страница без JS
   обещала бы заявку и не давала её оставить. */
.sk2-pro:target { display: grid; }
.sk2-pro:target[hidden] { display: grid; }