/* Шкура приложения, стиль Б3 (утверждён владельцем 07.10.2026).
   Числа здесь не пишем: цвета, шрифт, радиусы, тени и движение берутся
   из токены.css, который собирается из hook_app_tokens.json. Дизайн
   продолжает править токены, а устройство экранов уже не меняется —
   поэтому новый круг правок приходит без переделки вёрстки. */
* { margin:0; padding:0; box-sizing:border-box; }
body { width:100%; max-width:430px; margin:0 auto; min-height:100vh; color:var(--ink);
       font:var(--f-body); letter-spacing:var(--t-body); font-feature-settings:"tnum" 1;
       -webkit-font-smoothing:antialiased; position:relative;
       background:var(--grain), var(--glow), var(--bg); background-attachment:fixed; }
/* Низ экрана освобождён под закреплённые поле и меню: без запаса
   последняя строка пряталась под ними. */
/* Низ экрана: поле «Спросить Хука» стоит на высоте 12 шагов, сверху ещё его
   высота и 16 px воздуха — последняя строка не уходит под поле и меню (CTO 09.10). */
main { padding:0 calc(var(--step) * 3) calc(var(--step) * 14 + var(--g-field-h)); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

h1, .h { font:var(--f-h); letter-spacing:var(--t-h); }
h2 { font:var(--f-h); letter-spacing:var(--t-h); margin:calc(var(--step) * 3) 0 var(--step); }
h3, .say-t { font:var(--f-say); letter-spacing:var(--t-say); }
.cap, .small, .why, .muted { font:var(--f-cap); letter-spacing:var(--t-cap); color:var(--ink2); }
.dim { color:var(--ink3); } .mid { color:var(--ink2); } .acc, .link { color:var(--acc); }
.link { font-weight:550; } a.in { color:var(--acc); text-decoration:underline;
        text-underline-offset:3px; }

.status { display:flex; justify-content:space-between; align-items:center;
          padding:calc(var(--step) * 2) calc(var(--step) * 3) 0; font:var(--f-cap); color:var(--ink2); }
.top { margin-top:calc(var(--step) * 3); display:flex; justify-content:space-between;
       align-items:center; min-height:calc(var(--step) * 4); }
.lbl { margin:calc(var(--step) * 2.5) 0 var(--step); }
.row { display:flex; align-items:center; gap:calc(var(--step) * 1.5); }
.row.line { padding:calc(var(--step) * 1.75) 0; border-top:1px solid var(--line); }
.between { justify-content:space-between; }

.card { border-radius:var(--r-card); background:var(--s1); box-shadow:var(--sh-card);
        padding:calc(var(--step) * 2); margin-bottom:calc(var(--step) * 1.5); }
.btn, .pill { height:var(--btn-h); border-radius:var(--r-btn); display:flex; align-items:center;
       justify-content:center; gap:var(--step); color:var(--btn-ink); font:var(--f-body);
       font-weight:600; background:var(--btn); box-shadow:var(--sh-btn); border:0;
       cursor:pointer; width:100%; padding:0 calc(var(--step) * 2.5); }
.btn:active, .pill:active, .ghost:active, .chip:active { transform:scale(var(--press));
       transition:transform var(--press-ms) ease-out; }
/* Внутренний отступ капсулы — из шага: текст не упирается в края (CTO 09.10). */
.ghost { height:calc(var(--btn-h) - var(--step) * 1); border-radius:var(--r-btn); display:flex;
       padding:0 calc(var(--step) * 2.5);
       align-items:center; justify-content:center; font:var(--f-body); font-weight:550;
       color:var(--ink); background:var(--fill-2); border:0; cursor:pointer;
       box-shadow:inset 0 1px 0 var(--hi), 0 0 0 1px var(--line); }
.btn[disabled], .pill[disabled], .ghost[disabled] { background:var(--fill-1); color:var(--ink3);
       box-shadow:0 0 0 1px var(--line); cursor:not-allowed; }
.chips { display:flex; flex-wrap:wrap; gap:var(--step); }
.chip, .goal { flex:none; height:calc(var(--step) * 4.5); padding:0 calc(var(--step) * 1.75);
       border-radius:var(--r-pill); display:inline-flex; align-items:center; font:var(--f-cap);
       color:var(--ink2); background:var(--fill-1); box-shadow:0 0 0 1px var(--line);
       border:0; cursor:pointer; }
.chip.on, .goal.on { color:var(--ink); background:color-mix(in srgb, var(--acc) 10%, transparent);
       box-shadow:0 0 0 1px color-mix(in srgb, var(--acc) 35%, transparent); }

/* По типу не перечисляем: поле без type=text оставалось системным
   белым прямоугольником на тёмном экране. */
.field, input:not(:where([type=checkbox],[type=radio])), textarea { width:100%; height:var(--btn-h);
       border-radius:var(--r-btn); display:flex; align-items:center;
       padding:0 calc(var(--step) * 2); color:var(--ink); font:var(--f-body); border:0; outline:0;
       background:var(--fill-1); box-shadow:inset 0 1px 0 var(--hi), 0 0 0 1px var(--line); }
.field { color:var(--ink3); } input::placeholder { color:var(--ink3); }

.bar { height:4px; border-radius:2px; background:var(--fill-3); overflow:hidden; }
.bar i { display:block; height:100%; border-radius:2px; background:var(--bar);
         transition:width var(--bar-ms) var(--ease); }
.lock { display:flex; gap:calc(var(--step) * 1.25); align-items:center;
        padding:calc(var(--step) * 1.5) calc(var(--step) * 1.75); border-radius:var(--r-sm);
        color:var(--ink2); font:var(--f-cap); background:var(--fill-0);
        box-shadow:inset 0 0 0 1px var(--line); margin:calc(var(--step) * 1.5) 0; }
.hk { width:calc(var(--step) * 4.5); height:calc(var(--step) * 4.5); border-radius:var(--r-pill);
      flex:none; display:flex; align-items:center; justify-content:center; background:var(--s2);
      box-shadow:inset 0 1px 0 var(--hi), 0 0 0 1px var(--line); }
.say { display:flex; gap:calc(var(--step) * 1.5); align-items:flex-start; }
.say .who { font:var(--f-cap); color:var(--ink2); }

.ask { position:sticky; bottom:calc(var(--step) * 2); margin:calc(var(--step) * 3) 0 0;
       height:var(--btn-h); border-radius:var(--r-pill); display:flex; align-items:center;
       padding:0 var(--step) 0 calc(var(--step) * 2.25); color:var(--ink3); font:var(--f-body);
       background:var(--glass); backdrop-filter:blur(var(--blur)) saturate(150%);
       -webkit-backdrop-filter:blur(var(--blur)) saturate(150%); box-shadow:var(--sh-glass); }
.ask .go { margin-left:auto; width:calc(var(--step) * 4.5); height:calc(var(--step) * 4.5);
       border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center;
       color:var(--btn-ink); background:var(--btn); box-shadow:inset 0 1px 0 var(--btn-edge); }
/* Меню закреплено у края окна, а не в потоке: в потоке оно наезжало
   на последний блок экрана и прятало строку напоминаний. */
nav, .nav { position:fixed; left:50%; transform:translateX(-50%);
       bottom:calc(var(--step) * 2); width:min(100% - var(--step) * 4, 430px);
       height:calc(var(--step) * 8); z-index:2; border-radius:var(--r-sheet);
       display:flex; justify-content:space-around; align-items:center; background:var(--glass);
       backdrop-filter:blur(var(--blur)) saturate(150%);
       -webkit-backdrop-filter:blur(var(--blur)) saturate(150%); box-shadow:var(--sh-glass);
       color:var(--ink3); }
nav span, .nav span { display:flex; align-items:center; gap:calc(var(--step) * .75);
       font:var(--f-cap); font-weight:600; }
nav a { display:flex; align-items:center; gap:calc(var(--step) * .75); color:inherit;
       text-decoration:none; padding:var(--step); font:var(--f-cap); font-weight:600; }
nav em { font-style:normal; }
.ava { cursor:pointer; }
nav .on, .nav .on { color:var(--ink); background:var(--fill-3);
       padding:var(--step) calc(var(--step) * 1.75); border-radius:var(--r-sm);
       box-shadow:inset 0 1px 0 var(--hi); }

.ava { width:calc(var(--step) * 4); height:calc(var(--step) * 4); border-radius:var(--r-pill);
       display:flex; align-items:center; justify-content:center; font:var(--f-cap);
       font-weight:600; background:var(--s2);
       box-shadow:inset 0 1px 0 var(--hi), 0 0 0 1px var(--line); }
.свет { box-shadow:var(--g-glow); }
.ровно { font:var(--f-say); font-weight:450; line-height:1.5; color:var(--ink); }
.привет { font-size:var(--g-hello-size); font-weight:var(--g-hello-weight); line-height:1.1;
          letter-spacing:-.035em; background:var(--g-hello); -webkit-background-clip:text;
          background-clip:text; color:transparent; margin-top:calc(var(--step) * 2); }
/* Поле «Спросить Хука…» закреплено над меню: в потоке оно наезжало
   на последнюю строку экрана, а спросить надо не доскроллив до конца. */
.поле { position:fixed; left:50%; transform:translateX(-50%); z-index:2;
        width:min(100% - var(--step) * 6, 406px); bottom:calc(var(--step) * 12);
        height:var(--g-field-h); display:flex; align-items:center; gap:var(--step);
        padding:0 calc(var(--step) * 1.25) 0 calc(var(--step) * 2.75); color:var(--ink3);
        background:var(--glass); backdrop-filter:blur(var(--blur)) saturate(150%);
        -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
        border-radius:var(--g-field-r);
        box-shadow:inset 0 1px 0 var(--hi), var(--g-field-sh); }
.поле .go { margin-left:auto; width:calc(var(--step) * 5); height:calc(var(--step) * 5);
        flex:none; border-radius:var(--r-pill); display:flex; align-items:center;
        justify-content:center; color:var(--btn-ink); background:var(--btn);
        box-shadow:inset 0 1px 0 var(--btn-edge); }

.scroll { display:flex; gap:calc(var(--step) * 1.25); overflow-x:auto; scrollbar-width:none;
          padding-bottom:var(--step); }
.scroll::-webkit-scrollbar { display:none; }
.cont { flex:none; width:calc(var(--step) * 19); }
.cont img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-sm);
            background:var(--fill-1); }
.cont p { font:var(--f-cap); margin-top:var(--step); }
.search { display:flex; align-items:center; gap:calc(var(--step) * 1.25); color:var(--ink3);
          background:var(--fill-1); border-radius:var(--r-btn); padding:0 calc(var(--step) * 2);
          height:var(--btn-h); margin:calc(var(--step) * 2) 0 calc(var(--step) * 1.5);
          box-shadow:inset 0 1px 0 var(--hi), 0 0 0 1px var(--line); }
.search input { flex:1; height:auto; background:none; box-shadow:none; padding:0;
                border-radius:0; color:var(--ink); }
.meta { font:var(--f-cap); color:var(--ink2); margin-top:calc(var(--step) / 2); }
.meta b { color:var(--acc); font-weight:600; }
.hidden { display:none; }

.err { color:var(--bad); font:var(--f-cap); margin:calc(var(--step) * 1.25) 0; }
.ok { color:var(--acc); font:var(--f-cap); margin:calc(var(--step) * 1.25) 0; }
.foot { font:var(--f-cap); color:var(--ink3); text-align:center;
        padding:calc(var(--step) * 2) calc(var(--step) * 1.25) 0;
        border-top:1px solid var(--line); margin-top:calc(var(--step) * 2); }

/* Появление: каскадом, как в токенах. При «уменьшить движение» — без анимации. */
@keyframes всплыть { from { opacity:0; transform:translateY(var(--in-shift)); } }
.fade > * { animation:всплыть var(--in-ms) var(--ease) both; }
.fade > *:nth-child(2) { animation-delay:var(--in-step); }
.fade > *:nth-child(3) { animation-delay:calc(var(--in-step) * 2); }
.fade > *:nth-child(4) { animation-delay:calc(var(--in-step) * 3); }
.fade > *:nth-child(n+5) { animation-delay:calc(var(--in-step) * 4); }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }
a.goalbar { display:block; color:inherit; text-decoration:none; }

/* Живой градиент (владелец 07.10): приветствие, «думает»
   и дыхание света сверху; пульса свечения у знака нет — палитра Б (10.10)
   без неона. Цвета и длительности — из токенов. Тем, кто
   попросил меньше движения, — статичный кадр. */
.привет { background:var(--hk-flow, var(--g-hello)); background-size:300% 100%;
          -webkit-background-clip:text; background-clip:text;
          animation:hk-flow var(--hk-flow-dur, 8s) linear infinite; }
body::before { content:""; position:fixed; left:-20%; right:-20%; top:calc(var(--step) * -22);
          height:calc(var(--step) * 52); pointer-events:none; z-index:0;
          background:var(--hk-breath, none); opacity:var(--hk-breath-a0, 0);
          animation:hk-breath var(--hk-breath-dur, 9s) ease-in-out infinite; }
main { position:relative; z-index:1; }
@keyframes hk-flow { from { background-position:0% 0; } to { background-position:300% 0; } }
@keyframes hk-breath { 50% { opacity:var(--hk-breath-a1, 0); transform:scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .привет, .свет, body::before, [class*="думает"] { animation:none !important; }
}

/* Шторка проектов: как переключение аккаунтов в Instagram. */
.шторка { position:fixed; inset:0; z-index:5; background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); display:flex;
          align-items:flex-end; justify-content:center; }
.шторка .лист { width:min(100%, 480px); background:var(--s2); border-radius:var(--r-sheet) var(--r-sheet) 0 0;
          padding:calc(var(--step) * 2) calc(var(--step) * 3) calc(var(--step) * 4);
          box-shadow:var(--sh-glass); }
.ряд-проекта { width:100%; display:flex; justify-content:space-between; align-items:center;
          padding:calc(var(--step) * 1.75) 0; background:none; border:0; color:var(--ink);
          font:var(--f-body); cursor:pointer; border-bottom:1px solid var(--line); text-align:left; }
.ряд-проекта .ok { color:var(--acc); }
.имя-проекта { margin-left:auto; margin-right:var(--step); background:var(--fill-2); border:0;
          color:var(--ink); font:var(--f-cap); font-weight:600; cursor:pointer; max-width:55%;
          padding:calc(var(--step) * .75) calc(var(--step) * 1.5); border-radius:var(--r-pill);
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* «hidden» сильнее любого display: иначе .btn с display:flex оставался виден
   («Согласовать все (0)» на странице клиента). */
[hidden] { display:none !important; }

/* Экскурсия: подсветка элемента и пузырь Хука с прогрессом «Шаг N из 7». */
.тур-цель { position:relative; z-index:4; border-radius:var(--r-sm);
            box-shadow:0 0 0 3px var(--acc), var(--g-glow); }
.тур-пузырь { position:fixed; left:50%; transform:translateX(-50%); top:calc(var(--step) * 2); z-index:6;
            width:min(100% - var(--step) * 4, 430px); padding:calc(var(--step) * 2);
            border-radius:var(--r-card); background:var(--s2); box-shadow:var(--sh-glass); }
.тур-прогресс { display:flex; flex-direction:column; gap:calc(var(--step) / 2); font:var(--f-cap);
            color:var(--ink3); margin-bottom:var(--step); }
.тур-прогресс i { display:block; height:3px; border-radius:var(--r-pill); background:var(--acc); }
.тур-пропуск { margin-top:var(--step); background:none; border:0; color:var(--ink3); font:var(--f-cap);
            cursor:pointer; padding:0; text-decoration:underline; }
.тур-пост { margin-top:calc(var(--step) * 2); display:flex; flex-direction:column; gap:var(--step); }
.тур-вход { margin:calc(var(--step) * 2) 0; padding:calc(var(--step) * 1.5);
            border-radius:var(--r-sm); background:var(--fill-1); }

/* Голос с Хуком (Д8, владелец 09–10.10): микрофон в поле «Спросить Хука».
   Короткое нажатие — надиктовать, долгое — разговор на весь экран. */
.поле .мик { width:calc(var(--step) * 5); height:calc(var(--step) * 5); flex:none;
        border:0; border-radius:var(--r-pill); display:flex; align-items:center;
        justify-content:center; color:var(--ink2); background:var(--fill-2);
        -webkit-touch-callout:none; user-select:none; touch-action:none; }
.поле .мик + .go { margin-left:0; }
.поле .мик:first-of-type { margin-left:auto; }
.поле .мик.пишет { color:var(--btn-ink); background:var(--bad); }
.голос-экран { position:fixed; inset:0; z-index:6; background:var(--bg); display:flex;
        flex-direction:column; align-items:center; justify-content:center;
        gap:calc(var(--step) * 3); padding:calc(var(--step) * 3); text-align:center; }
.голос-экран .шар { width:calc(var(--step) * 22); height:calc(var(--step) * 22); border:0;
        border-radius:50%; background:var(--hk-flow, var(--g-think)); background-size:300% 100%;
        animation:hk-flow var(--hk-flow-dur, 8s) linear infinite;
        transition:transform var(--press-ms, .15s) var(--ease, ease); }
.голос-экран.слушаю .шар { transform:scale(1.08); }
.голос-экран.говорю .шар { animation-duration:calc(var(--hk-flow-dur, 8s) / 3); }
.голос-экран .что { font:var(--f-say); letter-spacing:var(--t-say); color:var(--ink); }
.голос-экран .фраза { max-width:420px; color:var(--ink2); min-height:3em; }
@media (prefers-reduced-motion: reduce) { .голос-экран .шар { animation:none !important; } }

/* Картинка блока статьи и свёрнутые детали (docs/cmo/92 §5б). */
figure.рис { margin:calc(var(--step) * 1.5) 0; }
figure.рис img { display:block; width:100%; height:auto; border-radius:var(--r-card);
        background:var(--fill-1); box-shadow:var(--sh-card); }
details.подробнее { margin:var(--step) 0 calc(var(--step) * 2); border-radius:var(--r-sm);
        background:var(--fill-0); box-shadow:inset 0 0 0 1px var(--line);
        padding:calc(var(--step) * 1.25) calc(var(--step) * 1.5); }
details.подробнее summary { cursor:pointer; font:var(--f-cap); color:var(--ink2); font-weight:600; }
details.подробнее[open] summary { margin-bottom:var(--step); }

/* Два состояния «модель включена / выключена» (CTO 10.10, docs/design/15): куски
   разметки только для одного состояния помечены data-при-модели; body[data-модель]
   ставит app.js, до ответа сервера — «выкл». */
body[data-модель="выкл"] [data-при-модели="вкл"], body:not([data-модель="выкл"]) [data-при-модели="выкл"] { display:none !important; }

/* «Кто ваш клиент» (экран стратегии, 14.10): пары «метка — значение» слипались в одну колонку,
   цитаты через « · » переносились строкой с точки, «(ниша)» висела в скобках. Пары — с воздухом
   и линией, как строки дел; цитаты — по одной на строку; ниша — метка рядом с подписью. */
#аудитория .кто-пара { padding:calc(var(--step) * 1.5) 0; }
#аудитория .кто-пара + .кто-пара { border-top:1px solid var(--line); }
#аудитория .кто-пара > .cap { display:flex; align-items:center; gap:var(--step); }
#аудитория .кто-значение { margin-top:calc(var(--step) * 0.5); }
#аудитория .кто-цитаты { list-style:none; margin-top:calc(var(--step) * 0.5); }
#аудитория .кто-цитаты li + li { margin-top:calc(var(--step) * 0.5); }
#аудитория .метка-ниша { font:var(--f-cap); font-size:.78em; letter-spacing:.06em; text-transform:uppercase;
       padding:1px calc(var(--step) * 0.75); border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink2); }
#аудитория .кто-мелко { margin-top:calc(var(--step) * 2); }

/* Карточка поста (14.10): подписи «Вариант 2: …», строка статуса и «Версия 1 · HOOK» прилипали к кнопкам.
   Подпись — с воздухом от поля текста и от ряда кнопок; версии — строками с линией: слева подпись, справа «Вернуть эту». */
[data-карточка] > p.cap { margin:calc(var(--step) * 1.5) 0 0; }
[data-карточка] > p.cap + .ряд, [data-карточка] > p.cap + p.cap { margin-top:calc(var(--step) * 1); }
[data-карточка] > .ряд { margin-top:calc(var(--step) * 1.5); }
[data-карточка] [data-место] > p.cap { display:flex; justify-content:space-between; align-items:center; gap:var(--step);
       padding:var(--step) 0; border-top:1px solid var(--line); }
[data-карточка] [data-место] > p.cap:first-child { margin-top:calc(var(--step) * 1.5); }
[data-карточка] [data-место] .ghost { flex:none; }
[data-карточка] [data-место] > p.cap { text-wrap:pretty; }
/* метка «ниша» — в строку с цитатой, а не под ней */
#аудитория .кто-цитаты li { display:flow-root; }
#аудитория .кто-цитаты li .метка-ниша { float:right; margin:0.15em 0 0 var(--step); }