/* ═══════════════════════════════════════════════════════════════
   НОРМА · городская основа (22.10.2026, пакет CLAUDE_CITY_UX_CJM)

   Шестой лист, после tokens → base → v12 → motion → ux; ничего в них
   не правит. ВСЕ правила ждут html[data-city] — его ставит сборка
   только контуру norma; у norm, finhelp и pravo лист инертен.

   Устройство:
   0. Токены двух тем — через ПРИМИТИВЫ действующей системы (--ink-*,
      --tx-*, --line, --solid, --v-*): компоненты один раз, темы две.
      Значения — design/tokens.css пакета: светлая — молочная подложка
      #F8F7F3 и тёмный текст #173D55; тёмная — глубокий синий #12334D
      и светлый текст #F4F5EF. Контролам — различимая граница
      (--ctl-line), декоративному разделителю — своя (--line).
   1. Типографика: Golos Text (свой, с кириллицей, одни метрики на всех
      устройствах) с системным стеком пакета в запасе; заголовок 400,
      основной 17 px (data-fs по умолчанию 17), шкала 4/8/12/16/24/32/48.
   2. Фото-шапка .city-head: панорама целиком + растворение вниз.
   3. Панель .city-top: НОРМА | МиР и меню на небе; при прокрутке — фон.
   4. Экраны города: главная, семья, диалог, форма; контролы 48/52/44.
   5. Десктоп: ≥760 колонка без телефонной рамки (ux.css), ≥1280 —
      навигация 224 + колонка 760 + контекст.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. Токены ───────────────────────────────────────────────── */
html[data-city]{
  --f-ui:'Golos Text','Segoe UI Variable','Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,'Noto Sans',Arial,sans-serif;
  --gut:24px; --r-sm:10px; --r-md:12px; --r-lg:16px;
  --col:760px;
  --ctl-line:#657F8D;
  --city-h1:calc(var(--fs-400) * 1.88);   /* 32 при 17 */
  --city-h1-desk:calc(var(--fs-400) * 2.3); /* 39 при 17 */
}
@media (max-width:340px){ html[data-city]{--gut:18px; --city-h1:calc(var(--fs-400) * 1.65)} }

html[data-city][data-theme="light"]{
  --ink-900:#F8F7F3; --ink-850:#F2F1EB; --ink-800:#FFFEFD; --ink-750:#EDF3F5; --ink-700:#E4ECF0; --ink-650:#D0DCE1;
  --line:#D0DCE1; --line-soft:#E3E9ED;
  --tx-1:#173D55; --tx-2:#546C79; --tx-3:#5C7482; --tx-4:#5C7482; /* tx-4 ≥ 4.5:1 на поверхности: им красится placeholder (критика C13) */
  --ctl-line:#657F8D;
  --au-default:#145D94; --au-hi:#173D55;
  --au-debt:#9B3A2E; --au-dispute:#7A5A10; --au-work:#4E4ABF; --au-contract:#145D94; --au-svc:#8D2E6B; --au-tax:#126E60;
  --v-bad:#9B2536; --v-warn:#8A5A00; --v-ok:#226343; --lbl-w:600;
  --solid:#163F5B; --solid-tx:#FFFFFF; --solid-hi:#1F4F70;
  --stage:#F8F7F3; --stage-glow:transparent;
  --frame-b:#D0DCE1; --frame-sh:none;
  --bar-fade:rgba(248,247,243,.92); --bar-solid:rgba(248,247,243,.96);
  --scrim:rgba(23,61,85,.36);
  --pop-sh:0 18px 40px -18px rgba(23,61,85,.28);
  --dock-glow:0%;
  --seg-bg:#EDF3F5; --seg-on:#FFFEFD; --seg-sh:0 1px 2px rgba(23,61,85,.12);
  --au-op1:0; --au-op2:0; --au-op3:0;
  --paper:#FFFEFD; --paper-2:#F2F1EB; --paper-line:#D0DCE1; --paper-ink:#173D55; --paper-tx2:#546C79;
  --desk:#EDF3F5;
}
html[data-city][data-theme="dark"]{
  --ink-900:#12334D; --ink-850:#153A56; --ink-800:#173E59; --ink-750:#234E69; --ink-700:#2A5773; --ink-650:#3B6681;
  --line:#547084; --line-soft:#2F5A74;
  --tx-1:#F4F5EF; --tx-2:#C5D7E2; --tx-3:#B4C8D5; --tx-4:#93ABBA;
  --ctl-line:#7896A9;
  --au-default:#A9D6F6; --au-hi:#FFFFFF;
  --au-debt:#FFA69B; --au-dispute:#F2CB7A; --au-work:#C7BEFF; --au-contract:#A9D6F6; --au-svc:#F5A7D6; --au-tax:#8FE3D3;
  --v-bad:#FFB8C2; --v-warn:#F2CB7A; --v-ok:#A6DEBE; --lbl-w:600;
  --solid:#F4F1E6; --solid-tx:#153F5E; --solid-hi:#FFFFFF;
  --stage:#12334D; --stage-glow:transparent;
  --frame-b:#2F5A74; --frame-sh:none;
  --bar-fade:rgba(18,51,77,.92); --bar-solid:rgba(18,51,77,.96);
  --scrim:rgba(4,18,31,.62);
  --pop-sh:0 18px 40px -16px rgba(0,0,0,.6);
  --dock-glow:0%;
  --seg-bg:#153A56; --seg-on:#234E69; --seg-sh:none;
  --au-op1:0; --au-op2:0; --au-op3:0;
  --paper:#F4F1E6; --paper-2:#E9E5D6; --paper-line:#C9C5B8; --paper-ink:#153F5E; --paper-tx2:#4A5F6E;
  --desk:#0F2A40;
}

/* ── 1. Типографика и общие контролы ─────────────────────────── */
html[data-city] body{line-height:1.55;-webkit-font-smoothing:antialiased}
html[data-city] .msg-a p,html[data-city] .v-b,html[data-city] .msg-u,html[data-city] .ask .q{font-size:var(--fs-400);line-height:1.55}
html[data-city] .ask .q{font-weight:500;letter-spacing:-.01em}
/* цифры — табличные, суммы и даты не прыгают */
html[data-city] .calc-r b,html[data-city] .known dd,html[data-city] .facts-r span,html[data-city] .exact-in{font-variant-numeric:tabular-nums}
html[data-city] .calc-r b{font-family:var(--f-ui);font-size:var(--fs-400)}
html[data-city] .calc-r span{font-size:var(--fs-300);color:var(--tx-2)}
html[data-city] .calc-r em{color:var(--tx-2);font-size:var(--fs-300)} /* подпись формулы ≥ 4.5:1 на фоне расчёта (критика D08) */
html[data-city] .calc-r.total b{color:var(--tx-1);font-weight:600}
html[data-city] .calc-r.total span{color:var(--tx-1)}
/* фокус — различимый, одного цвета в обеих темах */
html[data-city] :focus-visible{outline:3px solid var(--au-default);outline-offset:3px}
/* кнопки и чипы — зоны 44 и выше, основная 52 */
html[data-city] .btn{min-height:48px;border-radius:999px;font-size:var(--fs-400);font-weight:600}
html[data-city] .btn-cta,html[data-city] .btn-p{background:var(--solid);color:var(--solid-tx);min-height:52px;border:0;box-shadow:none}
html[data-city] .btn-cta:hover,html[data-city] .btn-p:hover{background:var(--solid-hi)}
html[data-city] .btn-cta[disabled]{opacity:.45}
html[data-city] .btn-g{border:1px solid var(--ctl-line);background:var(--ink-800);color:var(--tx-1)}
html[data-city] .chip{min-height:44px;padding:0 16px;font-size:var(--fs-300);color:var(--tx-1);border-color:var(--ctl-line);background:var(--ink-800)}
html[data-city] .chip.sel{border-color:var(--au-default);background:color-mix(in srgb,var(--au-default) 12%,var(--ink-800))}
html[data-city] .chip-q{border-style:dashed;color:var(--tx-2)}
html[data-city] .seg button{height:44px;font-size:var(--fs-300)}
html[data-city] .set-i{min-height:52px}
/* поля ввода: граница контрола, 48 высота, подпись отдельно */
html[data-city] .df-in,html[data-city] .srch{border-color:var(--ctl-line);background:var(--ink-800);min-height:48px;border-radius:var(--r-md)}
html[data-city] .df-in:focus{border-color:var(--au-default);box-shadow:0 0 0 1px var(--au-default)}
html[data-city] .df-label{font-size:var(--fs-300);color:var(--tx-1);font-weight:500}
html[data-city] .df-help,html[data-city] .df-hint{font-size:var(--fs-300);color:var(--tx-2)}
html[data-city] .df-err,html[data-city] .df-fail{color:var(--v-bad);font-size:var(--fs-300)}
html[data-city] .df-field.err .df-in{border-color:var(--v-bad)}
html[data-city] .df-req{color:var(--tx-2)}
html[data-city] .df-status.ok{border-color:var(--v-ok)} html[data-city] .df-status.warn{border-color:var(--v-warn)} html[data-city] .df-status.bad{border-color:var(--v-bad)}
html[data-city] .df-status{font-size:var(--fs-400)}
html[data-city] .df-sec-h{min-height:56px}
html[data-city] .df-sec-h .n{font-family:var(--f-ui)}
html[data-city] .df-progress{background:var(--ink-900)}
/* композер: карточка с подписью, круглая синяя кнопка */
html[data-city] .comp{border-color:var(--ctl-line);border-radius:var(--r-lg);background:var(--ink-800);box-shadow:none}
html[data-city] .comp textarea{font-size:var(--fs-400)}
html[data-city] .comp textarea::placeholder,html[data-city] .df-in::placeholder,html[data-city] .exact-in::placeholder{color:var(--tx-3)}
html[data-city] .comp-send{background:var(--solid);color:var(--solid-tx);border-radius:50%}
html[data-city] .comp-send[disabled]{background:transparent;color:var(--tx-4)}
html[data-city] .comp-label{font-size:var(--fs-300);font-weight:500;color:var(--tx-2)}
/* лента и карточки: ровный фон, без градиентов и свечения */
html[data-city] .ask{background:var(--ink-800);border-color:var(--line)}
html[data-city] .verdict::before{display:none}
html[data-city] .verdict,html[data-city] .doccard,html[data-city] .facts,html[data-city] .norm,html[data-city] .bound{border-color:var(--line)}
html[data-city] .msg-u{background:var(--ink-750);border-color:transparent}
html[data-city] .msg-a::before{background:var(--au)}
html[data-city] .v-note{font-size:var(--fs-300);color:var(--tx-2)}
html[data-city] .v-src{color:var(--au-default);text-decoration:underline;text-underline-offset:3px}
html[data-city] .rt-basis{color:var(--tx-2);border-left-color:var(--au-default)}
html[data-city] .why{font-size:var(--fs-300);color:var(--tx-2)}
html[data-city] .why .ic{color:var(--au-default)}
html[data-city] .dl-group,html[data-city] .v-k,html[data-city] .v-label,html[data-city] .msg-a .who,html[data-city] .ask .n{letter-spacing:.06em;font-size:var(--fs-200);color:var(--tx-2)}
html[data-city] .msg-a .who{color:var(--au)}
html[data-city] .time-sep{color:var(--tx-3)}
html[data-city] .row-t b{font-weight:500}
html[data-city] .dot.wait{background:var(--v-warn)}
/* метр: тонкая синяя линия, без свечения */
html[data-city] .meter::after{box-shadow:none;background:var(--au-default)}
html[data-city] .meter::before{background:transparent}
/* панель диалогов и листы — тот же фон */
html[data-city] .drawer{background:var(--ink-900);border-right-color:var(--line)}
html[data-city] .sheet{background:var(--ink-900);border-color:var(--line)}
html[data-city] .toast{font-size:var(--fs-300)}
html[data-city] .netbar{border:1px solid var(--line);background:var(--ink-800)}
/* ссылка-кнопка */
html[data-city] .lnk{color:var(--au-default);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;font:inherit;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}

/* ── 2. Фото-шапка ───────────────────────────────────────────── */
/* Экраны города начинают с кромки: фото под панелью, не под отступом v12 */
html[data-city] #scr-home.city-screen,html[data-city] #scr-dialog.city-screen,html[data-city] #scr-family.city-screen,
html[data-city] #scr-docform.city-screen,html[data-city] #scr-sect.city-screen{padding-top:0}
html[data-city] #scr-sect.sect-landing .pad:first-of-type{margin-top:0!important}
.city-head{position:relative;isolation:isolate;background:var(--ink-900);min-height:150px}
.city-head img{display:block;width:100%;height:auto}
/* растворение в фон темы: предмет на столе остаётся виден, завеса — только самый низ */
.city-head::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:22%;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--ink-900))}
/* компактный вариант (диалог, форма): кадр тот же и целиком — обрезать предмет cover'ом нельзя
   (03_VISUAL_SYSTEM); экономия места — короче растворение и меньше отступ под ним */
.city-head.compact::after{height:22%}
.city-head.compact + .thread{padding-top:var(--sp-3)}
.city-eyebrow{position:absolute;left:var(--gut);bottom:10px;z-index:1;font-size:var(--fs-200);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-2)}
@media (prefers-reduced-motion:no-preference){ .city-head img{transition:opacity var(--dur-base) var(--e)} }

/* ── 3. Панель: бренд на небе ────────────────────────────────── */
html[data-city] .topbar.city-top{background:transparent;pointer-events:none;transition:background var(--dur-base) var(--e)}
html[data-city] .topbar.city-top .topbar-row{height:56px;padding:0 var(--sp-2);display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:var(--sp-2)}
html[data-city] .topbar.city-top .tb-btn,html[data-city] .topbar.city-top .city-brand{pointer-events:auto}
/* кнопки без «стекла»; цвет — текста темы; над фото (.on-photo) — тёмный знак на светлом небе в обеих темах */
html[data-city] .topbar.city-top .tb-btn{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--tx-1);border-radius:12px}
html[data-city] .topbar.city-top .tb-btn::before{display:none}
html[data-city] .topbar.city-top.on-photo .tb-btn,html[data-city] .topbar.city-top.on-photo .city-brand{color:#173D55}
html[data-city][data-theme="dark"] .topbar.city-top:not(.on-photo) .city-brand-logo{filter:none;opacity:.9}
.tb-spacer{width:44px;height:44px}
.city-brand{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 8px;border-radius:12px;color:var(--tx-1);background:none;border:0}
.city-brand-n{font-family:var(--f-ui);font-size:var(--fs-400);font-weight:650;letter-spacing:.13em}
.city-brand-sep{display:block;width:1px;height:22px;background:currentColor;opacity:.35}
.city-brand-logo{display:block;width:66px;height:auto;filter:brightness(0);opacity:.78}
/* меню из двух линий (спрайт i-menu уже такой) */
html[data-city] .city-menu .ic{width:24px;height:24px;stroke-width:1.6}
/* прокрутка: шапка ушла — панель получает фон темы и цвета текста темы */
html[data-city] .topbar.city-top.scrolled{background:var(--bar-solid);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
html[data-city] .topbar.city-top:not(.on-photo){background:var(--bar-solid)}
/* метр у города под панелью, на самом верху — как в v12; трекер начинается ниже панели */
html[data-city] .tracker-in{padding-top:calc(env(safe-area-inset-top,0px) + 64px)}

/* ── 4. Экраны города ────────────────────────────────────────── */
.city-body{padding-top:var(--sp-2);padding-bottom:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4)}
.city-h1{font-size:var(--city-h1);line-height:1.18;font-weight:400;letter-spacing:-.025em;text-wrap:balance;margin:0;max-width:20ch}
.city-lead{font-size:var(--fs-400);line-height:1.55;color:var(--tx-2);margin:0;max-width:60ch}
.city-k{font-size:var(--fs-200);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-2);margin-top:var(--sp-2)}
/* список ситуаций: строки с разделителем, зона ≥ 56 px */
.city-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.city-row{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;min-height:56px;padding:var(--sp-3) 0;border-bottom:1px solid var(--line);color:var(--tx-1);border-radius:0}
.city-row:hover{color:var(--au-default)}
.city-row-n{flex:none;width:28px;font-size:var(--fs-300);color:var(--tx-3);font-variant-numeric:tabular-nums}
.city-row-t{flex:1;min-width:0}
.city-row-t b{display:block;font-size:var(--fs-400);font-weight:550;line-height:1.4}
.city-row-t small{display:block;font-size:var(--fs-300);line-height:1.5;color:var(--tx-2);margin-top:2px}
.city-row .go{flex:none;width:18px;height:18px;color:var(--tx-3)}
.city-note{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-300);line-height:1.5;color:var(--tx-2);margin:0}
.city-note .ic{width:16px;height:16px;flex:none;margin-top:3px;color:var(--tx-3)}
.city-meta{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-300);line-height:1.5;color:var(--tx-2)}
.city-meta p{margin:0} .city-meta b{color:var(--tx-1);font-weight:600}
.city-links{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.city-link{display:flex;gap:var(--sp-3);align-items:center;width:100%;text-align:left;min-height:56px;padding:var(--sp-3) 0;border-bottom:1px solid var(--line);color:var(--tx-1)}
.city-link > .ic{color:var(--au-default);flex:none;width:20px;height:20px}
.city-link span{flex:1;min-width:0}
.city-link b{display:block;font-size:var(--fs-400);font-weight:500;line-height:1.35}
.city-link small{display:block;font-size:var(--fs-300);color:var(--tx-2);line-height:1.45;margin-top:2px}
.city-link .go{color:var(--tx-3);width:16px;height:16px;flex:none}
html[data-city] .city-body .dl-group{padding-left:0;padding-right:0}
html[data-city] .city-body .row{padding-left:12px;padding-right:0}
/* срочная ветка — до списка и поля: рамка цветом предупреждения, номер крупно */
.urgent{border:1px solid var(--v-warn);border-radius:var(--r-md);padding:var(--sp-4);background:color-mix(in srgb,var(--v-warn) 8%,var(--ink-800))}
.urgent-h{display:flex;gap:var(--sp-2);align-items:center;font-size:var(--fs-400);font-weight:600;margin-bottom:var(--sp-2)}
.urgent-h .ic{width:20px;height:20px;color:var(--v-warn)}
.urgent p{margin:0;font-size:var(--fs-400);line-height:1.55}
.urgent-tel{font-weight:700;color:var(--tx-1);text-decoration:underline;text-underline-offset:3px;padding:4px 2px}
/* ошибка хода — в ленте, не только тостом (критика C27) */
.turn-fail{display:flex;gap:var(--sp-2);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border:1px solid var(--v-bad);border-radius:var(--r-md);font-size:var(--fs-300);line-height:1.5;color:var(--tx-1);max-width:66ch}
.turn-fail .ic{width:16px;height:16px;flex:none;margin-top:3px;color:var(--v-bad)}
/* отвеченный вопрос (критика D01): чипы неактивны, выбранный помечен, ответ подписан */
html[data-city] .ask.answered{opacity:1}
html[data-city] .ask.answered .chip[disabled]{opacity:.72;cursor:default} /* ≥ 4.5:1 эффективно (критика E04) */
html[data-city] .ask.answered .chip.sel[disabled]{opacity:1;border-color:var(--au-default);background:color-mix(in srgb,var(--au-default) 14%,var(--ink-800))}
.ask-done{margin-top:var(--sp-3);font-size:var(--fs-300);line-height:1.5;color:var(--tx-2)}
.turn-fail{flex-wrap:wrap}
.turn-retry{flex-basis:100%;margin-top:var(--sp-2);min-height:44px}
/* реплика примера — с пометкой (критика C28) */
html[data-city] .msg-u.ex{position:relative;padding-left:16px}
html[data-city] .msg-u.ex::before{content:attr(data-ex);position:absolute;left:-58px;top:50%;transform:translateY(-50%);font-size:var(--fs-200);text-transform:uppercase;letter-spacing:.06em;color:var(--tx-3)}
@media (max-width:359px){ html[data-city] .msg-u.ex{margin-top:14px} html[data-city] .msg-u.ex::before{left:auto;right:0;top:-16px;transform:none} } /* критика D06: на 320 маркер не режется */
/* список форм: что сейчас без файла (критика C08) */
.laws-doc-hold{font-style:normal;font-family:var(--f-ui);font-size:var(--fs-200);letter-spacing:0;color:var(--v-warn)}
/* контекст ситуации над лентой */
.sit{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);background:var(--ink-800);display:flex;flex-direction:column;gap:var(--sp-2)}
.sit .urgent{margin-bottom:var(--sp-2)}
.sit-eyebrow{font-size:var(--fs-200);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-2)}
.sit-h{font-size:calc(var(--fs-400) * 1.25);font-weight:500;line-height:1.3;letter-spacing:-.015em;margin:0}
.sit-dl{margin:var(--sp-1) 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px var(--sp-3);font-size:var(--fs-300);line-height:1.5}
.sit-dl dt{color:var(--tx-2)} .sit-dl dd{margin:0;color:var(--tx-1)}
.sit-note{display:flex;gap:var(--sp-2);align-items:flex-start;margin:var(--sp-1) 0 0;font-size:var(--fs-300);line-height:1.5;color:var(--tx-1)}
.sit-note .ic{width:16px;height:16px;flex:none;margin-top:3px;color:var(--au-default)}
.sit-example{align-self:flex-start}
.sit-strip{display:flex;gap:var(--sp-2);align-items:center;font-size:var(--fs-300);color:var(--tx-2);padding:0 0 var(--sp-1)}
.sit-strip .ic{width:15px;height:15px;color:var(--tx-3)}
/* точный ввод в карточке вопроса */
.exact{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.exact-l{font-size:var(--fs-300);font-weight:500;color:var(--tx-1)}
.exact-help{font-size:var(--fs-300);color:var(--tx-2);line-height:1.45}
.exact-row{display:flex;gap:var(--sp-2);align-items:stretch;flex-wrap:wrap}
.exact-in{flex:1 1 160px;min-height:48px;padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--ctl-line);background:var(--ink-800);color:var(--tx-1);font:inherit;font-size:var(--fs-400)}
.exact-in:focus{border-color:var(--au-default);box-shadow:0 0 0 1px var(--au-default);outline:none}
.exact-go{flex:none;min-height:48px;padding:0 18px}
/* поправка факта */
.facts-fix{margin-left:auto;font-size:var(--fs-300);color:var(--au-default);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 8px;flex:none}
html[data-city] .facts-r{align-items:center;gap:var(--sp-2);padding-top:4px;padding-bottom:4px}
html[data-city] .facts-r b{font-size:var(--fs-300)}
html[data-city] .facts-r span{white-space:normal;overflow-wrap:anywhere;font-family:var(--f-ui);font-size:var(--fs-400);font-weight:500}
/* форма недоступна — честно у карточки маршрута */
.doccard-held{display:block;margin-top:6px;font-family:var(--f-ui);font-size:var(--fs-200);letter-spacing:0;color:var(--v-warn);text-transform:none;line-height:1.4}
html[data-city] .doccard .tt b{font-size:var(--fs-400);font-weight:500;letter-spacing:-.01em;line-height:1.35}
html[data-city] .doccard .tt > span{font-family:var(--f-ui);font-size:var(--fs-300);letter-spacing:0;text-transform:none;color:var(--tx-2);line-height:1.45}
/* после документа */
.after{margin-top:var(--sp-5);border-top:1px solid var(--line);padding-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.after-steps{display:flex;flex-direction:column;gap:var(--sp-3);margin:0}
.after-steps li{display:flex;gap:var(--sp-3);align-items:flex-start}
.after-steps li i{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--ctl-line);margin-top:5px}
.after-steps li.done i{background:var(--v-ok);border-color:var(--v-ok)}
.after-steps b{display:block;font-size:var(--fs-400);font-weight:500;line-height:1.4}
.after-steps small{display:block;font-size:var(--fs-300);line-height:1.5;color:var(--tx-2);margin-top:2px}
.after-guide summary{cursor:pointer;color:var(--au-default);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:flex;align-items:center;font-size:var(--fs-400)}
.after-guide-b{font-size:var(--fs-300);line-height:1.55;color:var(--tx-1);display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2) 0 0}
.after-guide-b p{margin:0}
/* ширина чтения */
html[data-city] .msg-a,html[data-city] .verdict,html[data-city] .ask,html[data-city] .bound{max-width:66ch}
html[data-city] .msg-a p,html[data-city] .v-b,html[data-city] .rt p,html[data-city] .rt li{max-width:66ch}
@media (min-width:760px) and (max-width:1023px){ html[data-city] .thread{padding-left:20px;padding-right:20px} }
html[data-city] .thread{gap:var(--sp-6)}
html[data-city] .greet{padding:var(--sp-3) 0}
html[data-city] .greet-say{font-family:var(--f-ui);font-size:var(--fs-400);line-height:1.55}
html[data-city] .greet-hint{font-size:var(--fs-300);color:var(--tx-2)}
html[data-city] .flow-head,html[data-city] .flow-cta{background:var(--ink-800);border-color:var(--line)}
/* заголовок формы */
html[data-city] #scr-docform .city-h1{font-size:calc(var(--fs-400) * 1.5);max-width:30ch}
html[data-city] .df-intro{font-size:var(--fs-300);color:var(--tx-2)}

/* ── 5. Десктоп ──────────────────────────────────────────────── */
.city-nav{display:none}
.city-aside{display:none}
@media (min-width:1024px){
  html[data-city] .city-h1{font-size:var(--city-h1-desk)}
  html[data-city] .city-body{gap:var(--sp-5)}
}
@media (min-width:1280px){
  html[data-city] .view{display:grid;grid-template-columns:224px minmax(0,var(--col)) minmax(0,1fr);column-gap:32px;align-content:start;max-width:1280px;margin:0 auto;width:100%;padding:0 24px;box-sizing:border-box}
  html[data-city] .view > .screen{grid-column:2;max-width:none;margin:0;width:100%}
  html[data-city] .view > .city-aside{grid-column:3;grid-row:1}
  html[data-city] .view > .city-nav{grid-row:1}
  html[data-city] .view > .screen{grid-row:1}
  /* бренд и композер — над колонкой чтения */
  html[data-city] .topbar.city-top .topbar-row{max-width:var(--col);margin-left:calc((100% - 1280px) / 2 + 280px);margin-right:0}
  html[data-city] .dock > .comp{margin-left:calc((100% - 1280px) / 2 + 294px);margin-right:0}
  html[data-city] .dock > #listbtns{margin-left:calc((100% - 1280px) / 2 + 280px);margin-right:0}
  html[data-city] .tracker-in{margin-left:calc((100% - 1280px) / 2 + 280px);margin-right:0}
  /* навигация слева: липкая, под панелью */
  /* липкая и не выше окна: иначе колонка навигации задавала бы высоту сетки, и лента
     диалога (которая прокручивается к последнему ходу) уезжала бы вместе с шапкой */
  .city-nav{display:flex;flex-direction:column;gap:2px;grid-column:1;position:sticky;top:0;align-self:start;max-height:100dvh;overflow-y:auto;scrollbar-width:none;box-sizing:border-box;padding:calc(env(safe-area-inset-top,0px) + 72px) 0 var(--sp-6)}
  .city-nav-k{font-size:var(--fs-200);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);padding:var(--sp-4) var(--sp-3) var(--sp-1)}
  .city-nav-i{display:flex;gap:var(--sp-2);align-items:flex-start;width:100%;text-align:left;min-height:44px;padding:10px var(--sp-3);border-radius:var(--r-md);font-size:var(--fs-300);line-height:1.4;color:var(--tx-2)}
  .city-nav-i:hover{background:var(--ink-800);color:var(--tx-1)}
  .city-nav-i.on{background:var(--ink-800);color:var(--tx-1);font-weight:500;box-shadow:inset 3px 0 0 var(--au-default)}
  .city-nav-i .ic{width:18px;height:18px;flex:none;margin-top:1px;color:var(--tx-3)}
  .city-nav-n{flex:none;width:22px;color:var(--tx-3);font-variant-numeric:tabular-nums}
  /* контекст справа: ситуация и известные факты */
  .city-aside{display:flex;flex-direction:column;gap:var(--sp-3);position:sticky;top:0;align-self:start;max-height:100dvh;overflow-y:auto;scrollbar-width:none;box-sizing:border-box;padding:calc(env(safe-area-inset-top,0px) + 72px) 0 var(--sp-6);font-size:var(--fs-300);line-height:1.5}
  .known{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
  .known-r{padding:var(--sp-2) 0;border-bottom:1px solid var(--line)}
  .known dt{color:var(--tx-2);font-size:var(--fs-200)}
  .known dd{margin:2px 0 0;color:var(--tx-1);overflow-wrap:anywhere}
  .known dd small{display:block;color:var(--tx-3);font-size:var(--fs-200);margin-top:2px}
  .aside-empty,.aside-hint{color:var(--tx-2);margin:0}
}
@media (min-width:1180px) and (max-width:1279px){ html[data-city]{--col:760px} }
@media (max-width:759px){ html[data-city] .sheet{width:100%} }

/* ── 6. Увеличение текста и движение ─────────────────────────── */
html[data-city][data-fs="20"] .city-h1{font-size:calc(var(--fs-400) * 1.7)}
@media (prefers-reduced-motion:reduce){ html[data-city] .topbar.city-top,html[data-city] .city-head img{transition:none} }