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

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

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

   Правила слоя: отступы и кегли — из шкалы токенов; цвета — роли
   токенов; никаких магических
   длительностей; 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-city]{--col:760px}
@media (min-width:760px){
  html[data-city] .stage{padding:0;display:block}
  html[data-city] .frame{width:100%;height:100dvh;max-height:none;border-radius:0;border:0;box-shadow:none}
  html[data-city] .topbar-row{max-width:var(--col);margin:0 auto}
  html[data-city] .tracker-in{max-width:var(--col);margin:0 auto}
  html[data-city] .view > .screen{max-width:var(--col);margin:0 auto;width:100%}
    html[data-city] .dock > .comp{max-width:calc(var(--col) - 28px);margin-left:auto;margin-right:auto}
  html[data-city] .dock > #listbtns{max-width:var(--col);margin:0 auto}
  html[data-city] .sheet{left:0;right:0;margin:0 auto;width:min(100%,var(--col))}
  html[data-city] .intro .islide{max-width:var(--col);margin:0 auto;width:100%}
  html[data-city] .intro-art{max-height:40vh}
  html[data-city] .drawer{max-width:360px}
  html[data-city] .toast{bottom:112px}
}
@media (min-width:1180px){
  html[data-city]{--col:820px}
}

/* ── 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) ── */
.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)}

/* Sourced event proposals must remain readable at narrow widths. */
.df-prop li.df-proposal-sourced{display:block}
.df-prop li.df-proposal-sourced>span{display:block}
.df-prop li.df-proposal-sourced small{display:block;font-family:inherit;color:var(--tx-2);margin-top:var(--sp-1)}

/* Observed request events remain available with their answer in the dialogue. */
.processing-trace { margin: 12px 0 18px; max-width: 100%; color: var(--tx-2, #737373); font-size: 13px; }
.processing-trace summary { cursor: pointer; padding: 10px 4px; display: flex; align-items: center; gap: 10px; min-height: 44px; border-radius: 8px; }
.processing-trace summary::before { content: '›'; font-size: 21px; transform: rotate(0deg); }
.processing-trace[open] summary::before { transform: rotate(90deg); }
.processing-trace summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.processing-duration { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.processing-body { padding: 0 8px 10px 18px; }
.processing-trace ol { list-style: none; padding: 0; margin: 0; }
.processing-trace li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; overflow-wrap: anywhere; }
.processing-trace li:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 20px; bottom: -12px; border-left: 1px solid currentColor; opacity: .25; }
.processing-dot { width: 10px; height: 10px; border: 1px solid currentColor; border-radius: 50%; display: block; }
.processing-trace time { font-size: 11px; font-variant-numeric: tabular-nums; }
.processing-trace p { margin: 10px 0 0; }
.processing-note { font-size: 12px; line-height: 1.5; }
.processing-live { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.processing-trace.is-pending li:last-child .processing-dot { background: currentColor; }
.processing-heading { min-width: 0; line-height: 1.45; }
.processing-heading small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; opacity: .8; }
.processing-event { display: grid; gap: 4px; line-height: 1.5; }
.processing-event strong { color: var(--tx-1); font-weight: 500; }
.processing-event>span { font-size: 12px; }
.processing-trace li { padding-block: 10px; }
.processing-trace li:has(.processing-event>span) .processing-dot { border-color: var(--au-default); }
.processing-trace.is-pending li:last-child .processing-dot { box-shadow: 0 0 0 4px color-mix(in srgb,currentColor 10%,transparent); }
.ask-done { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.ask-fix { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--au-default); background: transparent; font: inherit; font-size: .88rem; cursor: pointer; flex: none; }
.ask-fix:hover { background: var(--ink-750); }
.ask-fix:disabled { opacity: .5; cursor: default; }
.calc-r.calc-r-text { display: block; }
.calc-r .calc-text-value { display: block; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; text-align: left; }