/* ============================================================================
   Карта возможностей 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:0;
    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:0;
    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:0;
    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(--body);
    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(--body);
    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:0; }

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

/* Найдено столько-то из стольких-то: граница ответа. Без неё человек не
   знает, показали ему всё подходящее или первые попавшиеся. */
.sk2-found {
    margin: 0 0 2px;
    font-size: .9rem;
    color: var(--ink-2);
}
.sk2-found b { font-family: var(--body); 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:0;
    text-transform:none;
    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:0;
    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(--body);
    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:0;
    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:0;
    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(--body); 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:0;
    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:0;
    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:0;
    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:0;
    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:0;
    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(--body);
    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(--body); 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:0;
    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:0;
    text-transform:none;
    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:0;
    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(--body);
    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:0;
    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:0; }
    .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; }

/* ── 39е (08.10): палитра и шрифт сайта, одна тема ── */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  color-scheme: light;
  --paper:#FFFFFF; --paper-2:#F4F4F2; --card:#FFFFFF;
  --ink:#0B0B0A; --ink-2:#15140F; --muted:#45423C;
  --rule:rgba(11,11,10,.10); --rule-strong:rgba(11,11,10,.18);
  --green:#0B0B0A; --green-deep:#2A2926; --green-soft:rgba(11,11,10,.05); --green-line:rgba(11,11,10,.28);
  --amber:#55534C; --amber-soft:rgba(11,11,10,.06); --ink39:#0B0B0A;
  --shadow-1:none; --shadow-2:0 1px 0 rgba(11,11,10,.10); --shadow-3:0 1px 0 rgba(11,11,10,.10);
  --body:'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --map-bg:#F4F4F2; --map-halo:rgba(11,11,10,.55); --map-label:#0B0B0A; --map-label-halo:#F4F4F2;
  --map-edge:11, 11, 10; --map-area:rgba(11,11,10,.03); --map-area-line:rgba(11,11,10,.10);
  --map-dot-alpha:.85; --map-glow:0;
}
body::after, :root[data-theme="light"] body::after { opacity:0 !important; }
.sk2-theme, .sk2-sheet, .sk2-modes, .sk2-pro, .sk2-back { display:none !important; }
.sk2-legend, .sk2-node { border:1px solid rgba(11,11,10,.18); background:#FFFFFF; backdrop-filter:none; box-shadow:none; }
.sk2-legend h2 { font:700 20px/1.2 var(--body); letter-spacing:-.01em; color:#0B0B0A; }
.sk2-legend p, .sk2-legend dl, .sk2-legend__hint, .sk2-legend dt, .sk2-legend dd { font-size:15px; color:#15140F; }
.sk2-legend dd { font-weight:600; }
.sk2-legend i { background:#0B0B0A; }
.sk2-legend i.is-pro { background:#FFFFFF; box-shadow:inset 0 0 0 2px #0B0B0A; }
.sk2-legend i.is-life { background:#55534C; }
.sk2-node__eyebrow { font:600 15px/1.2 var(--body); color:#45423C; }
.sk2-node h3 { font:700 20px/1.25 var(--body); color:#0B0B0A; }
.sk2-node p, .sk2-note { font-size:15px; color:#15140F; }
.sk2-note--warn { color:#15140F; }
.sk2-cta { background:#0B0B0A; color:#FFFFFF; font:600 16px/1.2 var(--body); border-radius:0; }
.sk2-cta:hover { background:#2A2926; transform:none; box-shadow:none; }
.sk2-hover { font:500 15px/1.3 var(--body); background:#0B0B0A; color:#FFFFFF; border-radius:0; }
.k39-nazad { position:fixed; left:16px; top:14px; z-index:30; font:600 15px/1 var(--body); color:#0B0B0A; background:#FFFFFF;
  border:1px solid rgba(11,11,10,.18); padding:11px 14px; text-decoration:none; }
.k39-nazad[hidden] { display:none; }
@media (max-width:620px){
  .sk2-legend { padding:12px 14px; }
  .sk2-legend h2 { font-size:17px; }
  .sk2-legend dl, .sk2-legend__hint, .sk2-legend dt, .sk2-legend dd { font-size:14px; }
  .sk2-node { padding:16px; }
  /* в окне посадки кнопка «Закрыть» стоит внизу по центру: легенда и карточка - над ней */
  .v-okne .sk2-legend, .v-okne .sk2-node { bottom:84px; }
}
/* ── 39е, круг 4 (приёмка 3, п.12): шапка и подвал сайта, как на посадках; пояснение - своей колонкой, точки не закрывает ── */
html, body { height:auto; overflow:visible; }
body.sk2 { background:#FFFFFF; }
.sk2-tools { display:none !important; }
.k39-stage { position:relative; display:grid; grid-template-columns:minmax(300px,360px) minmax(0,1fr); height:calc(100vh - 85px); height:calc(100svh - 85px); min-height:600px; border-bottom:1px solid rgba(11,11,10,.18); }
.k39-holst { position:relative; min-width:0; overflow:hidden; background:var(--map-bg); }
.k39-stage .sk2-map { position:absolute; inset:0; }
.k39-stage .sk2-legend, body.is-map .k39-stage .sk2-legend { position:static; inset:auto; max-width:none; opacity:1; transform:none; pointer-events:auto; border:0; border-right:1px solid rgba(11,11,10,.18);
  padding:28px 24px; overflow:auto; background:#FFFFFF; order:-1; }
.k39-stage .sk2-legend > p:first-of-type { display:block; }
.k39-stage .sk2-legend h2 { font-size:26px; margin-bottom:12px; max-width:none; }
.k39-stage .sk2-legend p { max-width:none; }
.k39-stage .sk2-node { position:absolute; right:18px; bottom:18px; }
.k39-stage .k39-nazad, .k39-stage .k39-nazad[hidden] { position:static; display:inline-block; margin:0 0 20px; }
.v-okne .shapka, .v-okne .podval, .v-okne .k39-nazad { display:none !important; }
.v-okne .k39-stage { height:100vh; min-height:0; }
@media (max-width:860px){
  .k39-stage { display:flex; flex-direction:column; height:auto; min-height:0; }
  .k39-stage .sk2-legend, body.is-map .k39-stage .sk2-legend { border-right:0; border-bottom:1px solid rgba(11,11,10,.18); padding:20px 16px; }
  .k39-stage .sk2-legend h2 { font-size:22px; }
  .k39-holst { height:72vh; height:72svh; min-height:420px; }
  .k39-stage .sk2-node { left:12px; right:12px; bottom:12px; width:auto; }
  .v-okne .k39-stage { height:100vh; }
  .v-okne .k39-holst { flex:1; height:auto; min-height:0; }
  .v-okne .k39-stage .sk2-legend > p:first-of-type, .v-okne .k39-stage .sk2-legend__hint { display:none; }
  .v-okne .k39-stage .sk2-node { bottom:84px; }
}