/* ═══════════════════════════════════════════════════════════════
   НОРМА · слой UX (20.10.2026, пакет UX_CJM_CLAUDE_2026-10-20_V2)

   Пятый лист, после tokens → base → v12 → motion; ничего в них не
   правит. Четыре независимых блока:

   1. Настольная компоновка (FB-6): при ширине ≥760px вместо
      декоративной телефонной рамки — колонка чтения --col по центру,
      шапка, метр, док и листы той же ширины. Только у контуров с
      html[data-skin] (сборка ставит его norma): finhelp и pravo
      остаются в принятом владельцем виде.
   2. Пять скинов (html[data-skin="…"]): кадр и слоган на главной,
      тёмный/светлый тон текста на образе, синяя кнопка отправки,
      подложка шапки на рабочих экранах, список тем вместо сетки плиток.
      Скин меняет оформление — ни одно правило не трогает смысл.
   3. Структура длинного ответа (FB-4): абзацы, маркированные строки и
      строка «Основание» карточки оценки и терминального ответа.
   4. Форма документа (FB-1/FB-3/FB-7): разделы-шаги, подписи-label,
      подсказки «где взять», ошибки рядом с полем и сводка, честные
      состояния проверки и выпуска.

   Правила слоя: отступы и кегли — из шкалы токенов; цвета — роли
   токенов (у скинов — свои переменные --skin-*); никаких магических
   длительностей; prefers-reduced-motion гасит общее правило базы.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. Сегменты: aria-pressed (кнопкам aria-selected недопустим) ── */
.seg.seg-wrap{flex-wrap:wrap}
.seg.seg-wrap button{flex:1 1 30%;min-width:96px}

/* ── 1. Настольная компоновка (FB-6) ── */
html[data-skin]{--col:760px}
@media (min-width:760px){
  html[data-skin] .stage{padding:0;display:block}
  html[data-skin] .frame{width:100%;height:100dvh;max-height:none;border-radius:0;border:0;box-shadow:none}
  html[data-skin] .topbar-row{max-width:var(--col);margin:0 auto}
  html[data-skin] .tracker-in{max-width:var(--col);margin:0 auto}
  html[data-skin] .view > .screen{max-width:var(--col);margin:0 auto;width:100%}
  html[data-skin] .view > .skin-band{max-width:none}
  html[data-skin] .dock > .comp{max-width:calc(var(--col) - 28px);margin-left:auto;margin-right:auto}
  html[data-skin] .dock > #listbtns{max-width:var(--col);margin:0 auto}
  html[data-skin] .sheet{left:0;right:0;margin:0 auto;width:min(100%,var(--col))}
  html[data-skin] .intro .islide{max-width:var(--col);margin:0 auto;width:100%}
  html[data-skin] .intro-art{max-height:40vh}
  html[data-skin] .drawer{max-width:360px}
  html[data-skin] .toast{bottom:112px}
  html[data-skin] .skin-hero img{border-radius:0 0 var(--r-lg) var(--r-lg)}
}
@media (min-width:1180px){
  html[data-skin]{--col:820px}
}

/* ── 2. Скины ── */
html[data-skin="lighthouse-day"]{--skin-art:url(../img/skins/lighthouse-day.webp);--skin-focus:72% 0%;--skin-cta:#1B57B8;--skin-sky:#BFDCF5}
html[data-skin="lighthouse-blue"]{--skin-art:url(../img/skins/lighthouse-blue.webp);--skin-focus:50% 20%;--skin-cta:#1B57B8;--skin-sky:#0E4A86}
html[data-skin="lighthouse-sun"]{--skin-art:url(../img/skins/lighthouse-sun.webp);--skin-focus:50% 20%;--skin-cta:#1B57B8;--skin-sky:#F3D9B2}
html[data-skin="sun-path"]{--skin-art:url(../img/skins/sun-path.webp);--skin-focus:50% 0%;--skin-cta:#1B57B8;--skin-sky:#BFDCF5}
html[data-skin="fair-wind"]{--skin-art:url(../img/skins/fair-wind.webp);--skin-focus:70% 20%;--skin-cta:#1B57B8;--skin-sky:#0B3F7E}

/* Главная: образ во всю ширину, текст — настоящий, поверх ровной части неба/воды */
html[data-skin] #scr-home{padding-top:0}
html[data-skin] #scr-home .aurora,
html[data-skin] #scr-home .eng,
html[data-skin] #scr-home .eng-hero,
html[data-skin] #scr-home .home-dirs{display:none}
.skin-hero{position:relative;isolation:isolate;margin:0 0 var(--sp-3);background:var(--skin-sky)}
.skin-hero img{display:block;width:100%;height:min(58vh,500px);object-fit:cover;object-position:var(--skin-focus,50% 40%)}
/* Образ остаётся ЯРКИМ (владелец 20.10: «картинка была хорошая»). Вуали на кадре нет;
   низ кадра лишь коротко сходит в фон страницы, чтобы карточка поля стояла на ровном. */
.skin-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:14%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--ink-900))}
/* читаемость слогана и лида — мягкой тенью самих букв, а не осветлением фото */
.skin-hero[data-ink="dark"]{--skin-ink:#14305E;--skin-ink-2:#1F3F70;--skin-shadow:0 1px 2px rgba(255,255,255,.55),0 0 18px rgba(255,255,255,.55)}
.skin-hero[data-ink="light"]{--skin-ink:#FFFFFF;--skin-ink-2:rgba(255,255,255,.92);--skin-shadow:0 1px 2px rgba(4,20,44,.55),0 0 18px rgba(4,20,44,.45)}
.skin-hero-text{position:absolute;z-index:2;left:var(--gut);right:var(--gut);top:calc(env(safe-area-inset-top,0px) + 62px);color:var(--skin-ink);text-shadow:var(--skin-shadow)}
.skin-brand{display:block;font-family:var(--f-ui);font-size:var(--fs-100);font-weight:500;letter-spacing:.1em;line-height:1.35;text-transform:uppercase;color:var(--skin-ink-2);max-width:calc(100% - 64px)}
/* тонкий крупный заголовок (владелец: «понравилось шрифтовое решение „можно дальше“»):
   самый лёгкий вес из имеющихся — 400; более лёгкая гарнитура — отдельная зависимость */
.skin-h1{font-size:clamp(2.3rem,9.5vw,3.2rem);line-height:1.02;font-weight:400;letter-spacing:-.035em;margin:var(--sp-3) 0 var(--sp-3);text-wrap:balance;max-width:11ch}
.skin-lead{font-size:var(--fs-500);line-height:1.38;font-weight:500;max-width:21ch;color:var(--skin-ink)}
html[data-fs="20"] .skin-hero img{height:min(58vh,500px)}

/* поле ввода на главной — светлая карточка с подписью, круглая синяя кнопка (как на принятых главных) */
html[data-skin] #scr-home .comp{border-radius:22px;box-shadow:var(--pop-sh);border-color:var(--line)}
.comp-label{display:block;padding:14px 16px 0;font-size:var(--fs-400);font-weight:500;color:var(--tx-1)}
html[data-skin] .comp-send{background:var(--skin-cta);color:#FFFFFF;border-radius:50%}
html[data-skin] .comp-send[disabled]{background:transparent;color:var(--tx-4)}

/* темы — список строк со стрелкой, а не сетка «рамочек» (01_DESIGN_DECISIONS: отвергнуто) */
.skin-topics{margin:var(--sp-6) 0 0;padding:0 var(--gut)}
.skin-topics-h{font-size:var(--fs-300);color:var(--tx-2);margin-bottom:var(--sp-1)}
.skin-topic{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;padding:14px 0;min-height:52px;
  border-bottom:1px solid var(--line-soft);font-size:var(--fs-500);color:var(--tx-1)}
.skin-topic .ic{color:var(--au);width:20px;height:20px}
.skin-topic b{flex:1;min-width:0;font-weight:400;letter-spacing:-.01em;line-height:1.3}
.skin-topic .go{color:var(--au);width:18px;height:18px}
.skin-topic:hover b{color:var(--au)}

/* рабочие экраны: кадр скина остаётся подложкой под плавающими кнопками и уходит в фон —
   текст стоит на ровном фоне (04_ASSET_MAP: на плотных экранах образ уступает чтению) */
.skin-band{position:absolute;left:0;right:0;top:0;height:92px;z-index:0;pointer-events:none;opacity:.9;
  background:var(--skin-art) var(--skin-focus,50% 40%) / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 24px,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 24px,transparent 100%)}
html[data-skin] .view > .screen{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.skin-hero img{transition:none}}

/* ── 3. Длинный ответ (FB-4): порядок чтения и абзацы без парсинга чисел ── */
.rt p{margin:0}
.rt p + p,.rt ul + p,.rt p + ul{margin-top:var(--sp-3)}
.rt ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.rt li{position:relative;padding-left:16px;line-height:1.55}
.rt li::before{content:'—';position:absolute;left:0;top:0;color:var(--au)}
.rt .rt-lead{font-weight:600}
.rt .rt-basis{font-size:var(--fs-300);line-height:1.5;color:var(--tx-2);border-left:2px solid var(--line);padding-left:10px}
.v-b.rt{padding-bottom:var(--sp-4)}
.v-label{padding:var(--sp-4) 16px 0;font-family:var(--f-ui);font-size:var(--fs-100);font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase;color:var(--tx-4)}
.v-label + .calc{margin-top:var(--sp-2)}
/* состояние хода под терминальным ответом: завершён ли ответ и была ли оценка */
.turn-state{display:flex;gap:7px;align-items:center;margin-top:var(--sp-2);font-size:var(--fs-200);color:var(--tx-3)}
.turn-state i{width:6px;height:6px;border-radius:50%;background:var(--au);flex:none}
.v-tag.warn{color:var(--v-warn);border-color:color-mix(in srgb,var(--v-warn) 50%,transparent);background:color-mix(in srgb,var(--v-warn) 10%,transparent)}

/* ── 4. Ожидание (FB-5): без обещаний-таймеров; измерения — только свои ── */
.think .tmeasure{font-family:var(--f-ui);font-size:var(--fs-200);color:var(--tx-3)}

/* ── 5. Форма документа (FB-1 / FB-3 / FB-7) ── */
.df-progress{position:sticky;top:calc(env(safe-area-inset-top,0px) + 58px);z-index:2;background:var(--ink-900);padding:var(--sp-2) 0;margin:0}
.df-intro{font-size:var(--fs-300);line-height:1.5;color:var(--tx-2)}
.df-steps{display:flex;flex-direction:column;gap:var(--sp-3)}
.df-sec{border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--ink-850);overflow:hidden}
.df-sec.open{border-color:color-mix(in srgb,var(--au) 35%,var(--line))}
.df-sec-h{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;padding:14px 16px;min-height:52px}
.df-sec-h .n{font-family:var(--f-mono);font-style:normal;font-size:var(--fs-100);color:var(--au);min-width:20px}
.df-sec-h b{flex:1;min-width:0;font-size:var(--fs-400);font-weight:500;line-height:1.3}
.df-sec-h .st{font-size:var(--fs-200);color:var(--tx-3);white-space:nowrap}
.df-sec-h .st.ok{color:var(--v-ok)}
.df-sec-h .st.err{color:var(--v-bad)}
.df-sec-h .go{color:var(--tx-4);width:16px;height:16px;flex:none;transition:transform var(--dur-base) var(--e)}
.df-sec.open .df-sec-h .go{transform:rotate(90deg)}
.df-sec-b{padding:var(--sp-1) 16px 16px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line-soft)}
.df-sec-lead{font-size:var(--fs-300);line-height:1.45;color:var(--tx-3)}
.df-sec-next{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-1)}
label.df-label{display:block;cursor:pointer}
.df-req{font-size:var(--fs-100);color:var(--tx-3);margin-left:6px;white-space:nowrap}
.df-help{display:block;font-size:var(--fs-200);color:var(--tx-3);line-height:1.4;margin-top:2px}
.df-field.err .df-label{color:var(--v-bad)}
.df-err{display:flex;gap:6px;align-items:flex-start;color:var(--v-bad)}
.df-err .ic{width:14px;height:14px;flex:none;margin-top:1px}
.df-field.err .df-in{border-color:var(--v-bad)}
.df-select .chip[aria-pressed="true"],.df-bool .chip[aria-pressed="true"]{border-color:var(--au);color:var(--au);background:color-mix(in srgb,var(--au) 12%,var(--ink-800))}
.df-select .chip[aria-pressed="true"]::before,.df-bool .chip[aria-pressed="true"]::before{content:'✓';font-size:.8em}
.df-repeat-row .df-in{flex:1;min-width:0}
/* сводка после проверки: что проверено, чего не хватает, что рассчитано */
.df-status h4{font-family:var(--f-ui);font-size:var(--fs-100);font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase;color:var(--tx-4);margin:var(--sp-3) 0 4px}
.df-status h4:first-of-type{margin-top:var(--sp-2)}
.df-status .lnk{color:var(--au);background:none;border:0;padding:0;font:inherit;text-decoration:underline;text-align:left}
.df-status.stale{opacity:.6}
.df-stale{display:flex;gap:8px;align-items:flex-start;margin-top:var(--sp-3);padding:10px 12px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--v-warn) 40%,var(--line));font-size:var(--fs-300);line-height:1.45;color:var(--tx-1)}
.df-stale .ic{width:16px;height:16px;flex:none;color:var(--v-warn);margin-top:1px}
.df-avail{font-size:var(--fs-200);line-height:1.45;color:var(--tx-3);text-align:right}
/* предложенные значения (FB-2): показываются ДО попадания в поля — с источником, подтверждением и правкой */
.df-prop{border:1px solid color-mix(in srgb,var(--au) 30%,var(--line));border-radius:var(--r-md);background:var(--ink-800);padding:12px 14px 14px}
.df-prop-h{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-400);font-weight:500;line-height:1.35}
.df-prop-h .ic{width:18px;height:18px;flex:none;color:var(--au);margin-top:1px}
.df-prop-src{font-size:var(--fs-200);color:var(--tx-3);margin:4px 0 10px 26px;line-height:1.4}
.df-prop ul{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.df-prop li{display:flex;gap:10px;align-items:baseline;font-size:var(--fs-300)}
.df-prop li b{font-weight:400;color:var(--tx-2);flex:1;min-width:0}
.df-prop li span{font-family:var(--f-mono);font-size:var(--fs-200);color:var(--tx-1);overflow-wrap:anywhere}
.df-prop .acts{display:flex;gap:8px;flex-wrap:wrap}
.df-prop .acts .btn{min-height:40px;padding:0 14px;font-size:var(--fs-300)}

/* ── 6. Типичные ситуации (20.10): вход в раздел словами человека ── */
.skin-topic b .skin-topic-meta{display:block;font-size:var(--fs-200);color:var(--tx-3);margin-top:2px;line-height:1.35;font-weight:400}
html[data-skin] #scr-sect{padding-top:calc(env(safe-area-inset-top,0px) + 58px)}
html[data-skin] #scr-sect .pad:first-of-type{margin-top:0!important}
.prb-list{display:flex;flex-direction:column;gap:var(--sp-3);padding:0 var(--gut)}
.prb-card{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"t go" "g go" "q go";column-gap:var(--sp-3);row-gap:4px;align-items:center;
  width:100%;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800)}
.prb-card::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--au)}
.prb-card b{grid-area:t;font-size:var(--fs-500);font-weight:500;line-height:1.3;letter-spacing:-.012em;color:var(--tx-1)}
.prb-card .prb-gives-line{grid-area:g;font-size:var(--fs-200);color:var(--au);line-height:1.4}
.prb-card .prb-q{grid-area:q;font-size:var(--fs-200);color:var(--tx-3)}
.prb-card .go{grid-area:go;color:var(--tx-4);width:18px;height:18px}
/* экран ситуации */
.prb{padding-top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-5)}
.prb-eyebrow{font-family:var(--f-ui);font-size:var(--fs-100);font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase;color:var(--au)}
.prb-title{font-size:var(--fs-700);line-height:1.15;font-weight:600;letter-spacing:-.028em;margin-top:calc(-1 * var(--sp-3));text-wrap:balance}
.prb-block p{font-size:var(--fs-400);line-height:1.55;color:var(--tx-1)}
.prb-k{font-family:var(--f-ui);font-size:var(--fs-100);font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase;color:var(--tx-4);margin-bottom:6px}
.prb-gives{display:flex;flex-wrap:wrap;gap:8px}
.prb-gives li{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--au) 40%,var(--line));
  background:color-mix(in srgb,var(--au) 8%,var(--ink-800));font-size:var(--fs-300);color:var(--tx-1)}
.prb-gives .ic{width:15px;height:15px;color:var(--au)}
.prb-meta{font-size:var(--fs-300);color:var(--tx-3);margin-top:var(--sp-2)}
.prb-acts{display:flex;flex-direction:column;gap:var(--sp-2)}
.prb-acts .btn{width:100%}
.prb-links{display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.prb-link{display:flex;gap:var(--sp-3);align-items:center;width:100%;text-align:left;padding:14px 0;border-bottom:1px solid var(--line-soft);color:var(--tx-1)}
.prb-link > .ic{color:var(--au);flex:none}
.prb-link span{flex:1;min-width:0}
.prb-link b{display:block;font-size:var(--fs-400);font-weight:500;line-height:1.3}
.prb-link small{display:block;font-size:var(--fs-200);color:var(--tx-3);line-height:1.4;margin-top:2px}
.prb-link .go{color:var(--tx-4);width:16px;height:16px;flex:none}
.prb-origin{font-size:var(--fs-200);line-height:1.5;color:var(--tx-3)}
/* шапка и финал примера в ленте */
.flow-head{padding:14px 16px;border:1px dashed color-mix(in srgb,var(--au) 45%,var(--line));border-radius:var(--r-md);background:color-mix(in srgb,var(--au) 6%,var(--ink-800))}
.flow-eyebrow{font-family:var(--f-ui);font-size:var(--fs-100);font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase;color:var(--au);margin-bottom:4px}
.flow-head b{display:block;font-size:var(--fs-500);font-weight:500;line-height:1.3}
.flow-head p{margin-top:6px;font-size:var(--fs-300);line-height:1.5;color:var(--tx-2)}
.flow-cta{padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-800)}
.flow-cta b{display:block;font-size:var(--fs-500);font-weight:600;letter-spacing:-.015em;line-height:1.3}
.flow-cta p{margin-top:6px;font-size:var(--fs-300);line-height:1.5;color:var(--tx-2)}
/* экран ситуации начинает контент ниже плавающих кнопок (как остальные экраны в v12) */
#scr-problem{padding-top:calc(env(safe-area-inset-top,0px) + 58px)}