/* v3 «Местные» — основа: токены (тёмная по умолчанию, светлая — data-theme="light"), шрифты, каркас приложения
   (шапка, панели, плавающий таб-бар, экраны, нижний лист) и общие компоненты из docs/design_v3.md.
   Подключается ПОСЛЕ наследия беты (c.css, ig.css) и переопределяет его. Владелец — Foundation. */

/* ---------------------------------------------------------------- токены */
:root, :root[data-theme="dark"] {
  --bg: #0C0D10;
  --surface: #16181D;
  --surface-2: #1E2128;
  --surface-3: #2A2E37;
  --line: rgba(255, 255, 255, .07);
  --text: #F2F4F7;
  --text-2: #B4BAC4;          /* ревью №2 P0-7: светлее вторичный текст на тёмной */
  --text-3: #868D9A;          /* P0-4: 5.3:1 на --surface */
  --accent: #2BD99F;
  --accent-ink: #04140E;
  --accent-soft: rgba(43, 217, 159, .14);
  --red: #FF4D5E;
  --red-soft: rgba(255, 77, 94, .14);
  --amber: #FFB547;
  --amber-soft: rgba(255, 181, 71, .14);
  --blue: #5B9BFF;
  --blue-soft: rgba(91, 155, 255, .15);
  --violet: #8B7BFF;
  --violet-soft: rgba(139, 123, 255, .16);
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, .045);
  --shadow-2: 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 48px rgba(0, 0, 0, .6);
  --bar: rgba(26, 28, 34, .78);
  --invert: #F2F4F7;
  --invert-ink: #0E1116;
  --seg-on: #33373F;
  --skel: rgba(255, 255, 255, .06);
  --skel-hi: rgba(255, 255, 255, .11);
  color-scheme: dark;

  /* наследие беты (c.css / ig.css) — на новые цвета, чтобы старые экраны не выбивались */
  --muted: var(--text-2);
  --glass: rgba(22, 24, 29, .94);
  --pri: var(--accent); --pri-2: var(--accent); --pri-soft: var(--accent-soft); --pri-text: var(--accent-ink);
  /* P0-4: мелкий цветной текст — отдельные *-text токены (заливки/иконки остаются на --accent/--amber, им хватает 3:1) */
  --accent-text: #2BD99F; --amber-text: #FFB547; --red-text: #FF6B79; --blue-text: #7FB2FF; --violet-text: #A99CFF;
  --green: #2BD99F; --green-soft: rgba(43, 217, 159, .14); --green-text: #2BD99F;   /* «Отбой», «всё ок» */
  --warm: var(--amber); --warm-soft: var(--amber-soft); --hot: var(--red);
  --ok: #3DDC84; --warn: var(--amber); --bad: var(--red); --plan: var(--blue);
  --ok-bg: rgba(61, 220, 132, .14); --warn-bg: var(--amber-soft); --bad-bg: var(--red-soft); --plan-bg: var(--blue-soft);
  --cat-util: var(--amber); --cat-roads: var(--blue); --cat-inc: var(--red); --cat-city: #7FB2FF; --cat-alert: var(--red);
  --cat-culture: var(--violet); --cat-good: var(--accent); --cat-people: var(--violet);
  --shadow-card: var(--shadow-1); --card-sh: var(--shadow-1);
  --shadow: var(--shadow-2); --shadow-s: 0 1px 4px rgba(0, 0, 0, .5);
  --mm-ph: #1B1E24; --wx-bg: rgba(91, 155, 255, .14); --wx-text: var(--text);
}
:root[data-theme="light"] {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #EEF0F3;
  --surface-3: #E2E5EA;
  --line: rgba(15, 20, 30, .07);
  --text: #0E1116;
  --text-2: #5B6270;
  --text-3: #646B78;          /* P0-4: 4.9:1 на --bg */
  --accent: #12A57A;
  --accent-ink: #FFFFFF;
  --accent-soft: #E2F6EE;
  --red: #E5363F;
  --red-soft: rgba(229, 54, 63, .1);
  --amber: #F08A00;
  --amber-soft: #FFF3E0;
  --blue: #2F6FEB;
  --blue-soft: #E6F1FF;
  --violet: #6A55F0;
  --violet-soft: #EEEBFF;
  --shadow-1: 0 1px 2px rgba(14, 17, 22, .04), 0 4px 12px rgba(14, 17, 22, .05), 0 12px 32px rgba(14, 17, 22, .05);
  --shadow-2: 0 2px 6px rgba(14, 17, 22, .06), 0 18px 48px rgba(14, 17, 22, .14);
  --bar: rgba(255, 255, 255, .8);
  --invert: #0E1116;
  --invert-ink: #FFFFFF;
  --seg-on: #FFFFFF;
  --skel: rgba(14, 17, 22, .06);
  --skel-hi: rgba(14, 17, 22, .1);
  color-scheme: light;

  --accent-text: #0B7F5C; --amber-text: #9A5200; --red-text: #C42830; --blue-text: #2563D9; --violet-text: #5A44E0;
  --green: #12A57A; --green-soft: #E2F6EE; --green-text: #0B7F5C;
  --glass: rgba(255, 255, 255, .94);
  --ok: #16A34A; --ok-bg: #E3F6EC;
  --cat-city: #2F6FEB;
  --shadow-s: 0 1px 4px rgba(14, 17, 22, .12);
  --mm-ph: #E9ECF0; --wx-bg: #E6F1FF;
}
:root {
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Unbounded", "Manrope", system-ui, sans-serif;
  --r-lg: 24px; --r-md: 16px; --r-sm: 12px; --r-pill: 999px;
  --pad: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --hdr: 60px;
  --tab: 64px;
  --tabbar-space: calc(var(--tab) + 28px + var(--safe-bottom));
  /* v8: таб-бар закреплён и поверх экранов — сколько он занимает снизу (экран кончается над ним) */
  --tb-occ: calc(var(--tab) + 16px + var(--safe-bottom));
  --ease: cubic-bezier(.2, .9, .25, 1);   /* наследие — новое пишем на --ease-out */

  /* ---- P0-6 типографика: 7 ступеней (font-shorthand). Пример: font: var(--t-body); размеры отдельно — --fs-…
     Ревью №2 (P0-7, P1-1): база 16/15/14/12 px, все размеры в rem — от корневого кегля 16px × --fs-k
     («Я → Оформление → Размер текста»: html[data-fs="l"] ×1.15, html[data-fs="xl"] ×1.3). Мельче 12 px — нет. */
  --t-display:  700 1.75rem/2rem var(--font-head);   /* «Доброе утро, Рязань», «Мой район» */
  --t-title:    700 1.375rem/1.75rem var(--font-head);   /* заголовок поста, экрана */
  --t-h1:       var(--t-title);
  --t-headline: 600 1.0625rem/1.5rem var(--font-head);   /* заголовок карточки, секции */
  --t-h2:       var(--t-headline);
  --t-body:     500 1rem/1.5rem var(--font);          /* текст: 16/24 */
  --t-callout:  700 0.9375rem/1.25rem var(--font);    /* кнопки, сегменты, пункты меню, имя автора: 15/20 */
  --t-caption:  600 0.875rem/1.25rem var(--font);     /* мета, подписи: 14/20 */
  --t-micro:    800 0.75rem/1rem var(--font);         /* только КАПС-оверлайны и бейджи: 12/16 */
  --fs-display: 1.75rem; --fs-title: 1.375rem; --fs-headline: 1.0625rem; --fs-body: 1rem; --fs-callout: 0.9375rem; --fs-caption: 0.875rem; --fs-micro: 0.75rem;

  /* ---- P1-1 движение */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);     /* появление, сдвиги */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);     /* смена состояния на месте */
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);  /* лист, лайк, поп-ап */
  --ease-exit:   cubic-bezier(.4, 0, 1, 1);        /* уход */
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 380ms;
  --d-tap: 90ms; --d-fast: 160ms; --d-base: 240ms; --d-sheet: 420ms; --d-screen: 360ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  /* настоящая пружина (stiffness≈300, damping≈22) там, где есть linear() */
  :root { --ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.6%, 1.067 22.8%, 1.085 26.2%, 1.078 29.7%,
    1.042 37.2%, 1.008 46.3%, .993 55.6%, 1 78%, 1); }
}

/* ---------------------------------------------------------------- база */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); overscroll-behavior: none;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* корневой кегль: 100% (уважаем системный/браузерный размер) × «Крупный текст» */
:root { --fs-k: 1; font-size: calc(100% * var(--fs-k)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:root[data-fs="l"] { --fs-k: 1.15; }
:root[data-fs="xl"] { --fs-k: 1.3; }
/* крупный текст: таб-бар выше — отступ экранов (--tb-occ) считается от --tab */
:root[data-fs="l"] { --tab: 68px; }
:root[data-fs="xl"] { --tab: 74px; }
body { font: 500 1rem/1.5 var(--font); }
body { overflow-x: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--accent-text); }
h1, h2, h3, h4 { font-family: var(--font-head); letter-spacing: -.02em; }
[hidden] { display: none !important; }
img { max-width: 100%; }
.u-head { font-family: var(--font-head); letter-spacing: -.02em; }
.ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--s { width: 18px; height: 18px; }
.ico--xs { width: 15px; height: 15px; stroke-width: 2.1; }
.tap { transition: transform var(--d-base) var(--ease-spring); }
.tap:active { transform: scale(.96); transition: transform var(--d-tap) var(--ease-out); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* P0-5: хит-зона ≥44 px без изменения видимого размера. <button class="hit"> или .hit на любом элементе */
.hit { position: relative; }
.hit::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- шапка приложения */
.hdr { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: calc(var(--hdr) + var(--safe-top));
  padding: var(--safe-top) var(--pad) 0; display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: none; transition: box-shadow .2s; }
.hdr.scrolled { box-shadow: 0 1px 0 var(--line); }
.hdr-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.hdr-b { display: flex; gap: 8px; align-items: center; }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; text-align: left; }
.brand__mark { position: relative; width: 36px; height: 36px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--invert); color: var(--invert-ink); font: 700 1rem/1 var(--font-head); }
.brand__mark::after { content: ""; position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg); }
.brand__name { display: block; font: 600 1.0625rem/1.1 var(--font-head); letter-spacing: -.02em; }
.brand__city { display: inline-flex; align-items: center; gap: 2px; font: 700 0.875rem/1.2188rem var(--font); color: var(--text-2); margin-top: 1px; }
.hdr { transition: box-shadow var(--d-base), transform var(--d-screen) var(--ease-out), background-color .6s; }
/* P2-4: режим тревоги — по шапке бежит красная линия */
:root[data-mode="alert"] .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red);
  transform-origin: left; animation: alert-scan 2.4s var(--ease-in-out) infinite; }
@keyframes alert-scan { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; }
  50.01% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
.hdr-title { font: var(--t-title); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-tab="map"] .hdr { display: none; }

/* ---------------------------------------------------------------- панели */
.panes { position: fixed; top: calc(var(--safe-top) + var(--hdr)); left: 0; right: 0; bottom: 0; }
body[data-tab="map"] .panes { top: 0; }
.pane { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pane-in { padding: 4px var(--pad) calc(var(--tabbar-space) + 24px); max-width: 640px; margin: 0 auto; }
.pane-map { overflow: hidden; }
/* пока maplibre лениво грузится (app.js loadMapLib) */
.map-wait { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--text-2); font: var(--t-caption); background: var(--bg); }
/* P1-1: глубина — подложка отъезжает влево, пока сверху экран */
.panes { transition: transform var(--d-screen) var(--ease-out); }
body.has-screen .panes, body.has-screen .hdr { transform: translateX(-24%); }

/* ---------------------------------------------------------------- плавающий таб-бар */
.tabbar { position: fixed; z-index: 56; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(10px + var(--safe-bottom)); height: var(--tab);
  max-width: 520px; margin: 0 auto; padding: 0 6px; border-radius: 24px; border: 0;
  display: flex; align-items: center; justify-content: space-around;
  background: var(--bar); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: var(--shadow-2); transition: transform var(--d-screen) var(--ease-out), background-color .6s; }
.tabbar button { position: relative; z-index: 1; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-3); font: 700 0.75rem/0.875rem var(--font); letter-spacing: -.01em; transition: color var(--d-fast); }
/* ревью №2 P0-6: подписи таб-бара 12 px (раньше ig.css перебивал до 10,5), иконки 24 px */
.tabbar .tb-l { font: 700 0.75rem/0.875rem var(--font); letter-spacing: -.01em; }
.tabbar button .ico { width: 24px; height: 24px; }
:root[data-fs] .tabbar { height: auto; min-height: var(--tab); padding-top: 6px; padding-bottom: 6px; }
.tabbar button .ico { transition: transform var(--d-base) var(--ease-spring); }
.tabbar button:active .ico { transform: scale(.9); transition-duration: var(--d-tap); }
.tabbar [aria-selected="true"] { color: var(--text); }
/* P1-18: активный таб — пилюля под иконкой, переезжает пружиной (app.js movePill). Зелёной точки больше нет. */
.tb-pill { position: absolute; z-index: 0; left: 0; top: 7px; width: 56px; height: 32px; border-radius: 12px; background: var(--surface-2);
  transform: translateX(var(--x, 0px)); opacity: 0; transition: transform 320ms var(--ease-spring), opacity var(--d-fast); pointer-events: none; }
.tb-pill.on { opacity: 1; }
.tb-pill.still { transition: none; }
.tb-l { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tabbar__plus { flex: none !important; width: 64px; }
.tabbar__pl { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 38%, transparent); transition: transform 320ms var(--ease-spring), background-color .6s; }
.ico--plus { width: 24px; height: 24px; stroke-width: 2.2; transition: transform 320ms var(--ease-spring); }
.tabbar__plus:active .tabbar__pl { transform: rotate(90deg) scale(.92); transition-duration: var(--d-tap); }
body.sheet-on .ico--plus { transform: rotate(45deg); }
.tb-dot { position: absolute; top: 8px; left: calc(50% + 7px); width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 2px solid var(--surface); }
/* v8 (владелец: «нижние 5 кнопок всегда закреплены»): таб-бар виден и над экранами (z 56 > .screen 50), листы (z 60) накрывают его.
   Прячется только в полноэкранных просмотрщиках (истории, фото) и в режиме «выбери точку на карте». */
body.has-sv .tabbar, body.picking .tabbar { transform: translateY(calc(100% + 40px)); }
.fab { display: none !important; }

/* ---------------------------------------------------------------- кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; height: auto; padding: 0 18px;
  border-radius: var(--r-md); font: var(--t-callout); background: var(--surface-2); color: var(--text); box-shadow: none;
  transition: transform var(--d-base) var(--ease-spring), opacity var(--d-fast); white-space: nowrap; }
.btn:active { transform: scale(.96); transition-duration: var(--d-tap); transition-timing-function: var(--ease-out); }
.btn:disabled { opacity: .55; }
.btn--primary, .btn.pri { background: var(--accent); color: var(--accent-ink); }
.btn--invert { background: var(--invert); color: var(--invert-ink); }
.btn--ghost, .btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn--icon { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); position: relative; }
.btn--icon .ico { width: 20px; height: 20px; }
.btn.wide, .btn--wide { width: 100%; }
.btn--sm { min-height: 36px; height: 36px; padding: 0 12px; border-radius: var(--r-sm); font: 700 0.875rem/1.2188rem var(--font); position: relative; }
.btn--sm::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }

/* ---------------------------------------------------------------- бейдж (счётчик) */
.badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--red); color: #fff; font: 800 0.75rem/1.0938rem var(--font); text-align: center; font-style: normal;
  border: 2px solid var(--bg); box-sizing: content-box; }
.badge--dot { min-width: 0; width: 8px; height: 8px; padding: 0; top: 8px; right: 9px; }

/* ---------------------------------------------------------------- карточка, плитка */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.tile { position: relative; overflow: hidden; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: 14px; min-width: 0; text-align: left; color: var(--text); transition: transform var(--d-base) var(--ease-spring); }
button.tile, .tile[role="button"] { cursor: pointer; }
.tile:active { transform: scale(.96); transition-duration: var(--d-tap); transition-timing-function: var(--ease-out); }
.tile--wide { grid-column: 1 / -1; }
/* наследие c.css: .tile был колонкой по центру, .tile span — 13px */
.tile { display: block; align-items: stretch; }
.tile span, .tile b { font-size: inherit; font-weight: inherit; margin-top: 0; }

/* ---------------------------------------------------------------- чипы */
.chip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: auto; min-height: 24px; padding: 3px 9px; border-radius: 9px;
  font: 700 0.875rem/1.2188rem var(--font); letter-spacing: 0; background: var(--surface-2); color: var(--text-2);
  box-shadow: none; white-space: nowrap; }
.chip i { font-style: normal; }
/* P0-4: мелкий цветной текст — *-text (контраст ≥4.5:1), заливки — прежние */
.chip--red { background: var(--red-soft); color: var(--red-text); }
.chip--amber { background: var(--amber-soft); color: var(--amber-text); }
.chip--blue { background: var(--blue-soft); color: var(--blue-text); }
.chip--violet { background: var(--violet-soft); color: var(--violet-text); }
.chip--accent { background: var(--accent-soft); color: var(--accent-text); }
.chip--green, .chip--ok { background: var(--green-soft); color: var(--green-text); }
.chip .ico { width: 14px; height: 14px; stroke-width: 2.1; }
/* чипы-фильтры (наследие: карта, «Мой район») */
.chips .chip, button.chip { min-height: 36px; padding: 0 13px; border-radius: 12px; font-size: 0.875rem; background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); }
.chips .chip.on, button.chip.on, .chip.is-on { background: var(--invert); color: var(--invert-ink); box-shadow: none; }

/* ---------------------------------------------------------------- сегменты */
.seg { display: flex; grid-template-columns: none; height: auto; position: relative; gap: 0; padding: 3px; border-radius: var(--r-md);
  background: var(--surface-2); }
.seg__item { flex: 1; min-width: 0; padding: 11px 4px; border-radius: 13px; font: var(--t-callout); color: var(--text-2);
  text-align: center; white-space: nowrap; transition: background var(--d-fast) var(--ease-in-out), color var(--d-fast) var(--ease-in-out); }
.seg__item.is-on { background: var(--seg-on); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .08); }
.seg__item em { font-style: normal; color: var(--accent-text); margin-left: 3px; }

/* ---------------------------------------------------------------- аватар */
.avatar { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 13px; overflow: hidden;
  background: var(--av, var(--violet)); color: #fff; font: 800 1rem/1 var(--font); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 28px; height: 28px; border-radius: 9px; font-size: 0.75rem; }
.avatar--lg { width: 92px; height: 92px; border-radius: 30px; font: 700 2.25rem/1 var(--font-head); }

/* ---------------------------------------------------------------- полноэкранные экраны (nav.js openScreen) */
.screen { position: fixed; z-index: 50; inset: 0; display: flex; flex-direction: column; background: var(--bg); transform: translateX(100%);
  padding-bottom: var(--tb-occ);
  transition: transform 280ms var(--ease-exit); will-change: transform; box-shadow: -12px 0 32px rgba(0, 0, 0, .18); }
.screen.in { transform: none; transition: transform var(--d-screen) var(--ease-out); }
.screen.no-anim { transition: none !important; }
.screen.away { transform: translateX(100%); pointer-events: none; }
.s-head { flex: none; display: flex; align-items: center; gap: 8px; height: calc(56px + var(--safe-top)); padding: var(--safe-top) var(--pad) 0;
  border-bottom: 0; background: var(--bg); }
.s-back { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1);
  color: var(--text); display: grid; place-items: center; flex: none; }
.s-back span { display: none; }
.s-title { flex: 1; min-width: 0; text-align: left; font: var(--t-headline); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-share { width: 44px; height: 44px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); display: grid; place-items: center; flex: none; }
.s-head > i { width: 44px; flex: none; }
.s-body { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-bottom: 24px; }
/* крупная шапка экрана/вкладки: «Мой район», «Профиль» … */
.screen__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px var(--pad) 12px; }
.screen__head h1, .screen__title { margin: 0; font: var(--t-display); letter-spacing: -.03em; }
.screen__head small, .screen__kick { display: block; font: var(--t-caption); color: var(--text-3); margin-bottom: 4px; }
.screen__btns { display: flex; gap: 8px; flex: none; }

/* ---------------------------------------------------------------- нижний лист */
.sheet-backdrop, .scrim { position: fixed; z-index: 59; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity var(--d-base) var(--ease-out); }
.sheet-backdrop.on, .scrim.on { opacity: 1; }
.sheet { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; max-width: 640px; margin: 0 auto; max-height: 90vh; display: flex; flex-direction: column;
  border-radius: 28px 28px 0 0; background: var(--surface); box-shadow: var(--shadow-2); transform: translateY(105%);
  transition: transform 260ms var(--ease-exit); }
.sheet.on, .sheet.is-open { transform: none; transition: transform var(--d-sheet) var(--ease-spring); }
.sheet__grab, .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--surface-3); margin: 10px auto 4px; flex: none; position: relative; }
.sheet__grab::before { content: ""; position: absolute; left: -40px; right: -40px; top: -14px; bottom: -14px; }
.sheet-body { overflow-y: auto; padding: 6px var(--pad) calc(20px + var(--safe-bottom)); }

/* ---------------------------------------------------------------- тост */
.toast { position: fixed; z-index: 1100; left: 50%; bottom: calc(var(--tab) + 22px + var(--safe-bottom)); transform: translateX(-50%);
  max-width: calc(100% - 32px); width: max-content; padding: 12px 16px; border-radius: var(--r-md); background: var(--invert); color: var(--invert-ink);
  font: var(--t-callout); box-shadow: var(--shadow-2); text-align: center; }
.toast.show { animation: toast-in var(--d-base) var(--ease-spring); }
.toast--error { background: var(--red); color: #fff; }
@keyframes toast-in { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ---------------------------------------------------------------- пустые состояния */
.empty { text-align: center; padding: 36px 22px 30px; color: var(--text); }
.empty .em, .empty__ico { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 22px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-2); font-size: 1.875rem; line-height: 1; }
.empty .em .ico, .empty__ico .ico { width: 28px; height: 28px; }
.empty .em { width: 72px; height: 72px; border-radius: 24px; color: var(--text-3); }
.empty .em .empty__illo { width: 40px; height: 40px; stroke-width: 1.6; }
.empty b { display: block; font: var(--t-headline); letter-spacing: -.02em; }
.empty p { color: var(--text-2); margin: 8px auto 16px; max-width: 300px; font: var(--t-body); }
.boot-err .empty { max-width: 340px; }
.boot-err .em { color: var(--text-2); }
.empty .eb { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- скелетоны */
.skeleton, .sk { display: block; border-radius: 8px; background: var(--skel); position: relative; overflow: hidden; }
/* P2-6: один синхронный блик на весь экран — фон «приклеен» к окну (background-attachment: fixed), двигаем позицию */
.skeleton::after, .sk::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--skel-hi) 50%, transparent 70%) fixed; background-size: 200vw 100%;
  animation: sk-sweep 1.4s var(--ease-in-out) infinite; }
@keyframes sk-sweep { from { background-position: 100vw 0; } to { background-position: -100vw 0; } }
/* «Долго грузится…» — появляется сама через 6 с, если скелет всё ещё на экране */
.sk-slow { display: block; text-align: center; font: var(--t-caption); color: var(--text-3); padding: 10px 0 0; opacity: 0;
  animation: sk-slow-in var(--d-base) var(--ease-out) 6s forwards; }
@keyframes sk-slow-in { to { opacity: 1; } }

/* ---------------------------------------------------------------- «↑ Новое» */
.newpill, #feedPill { position: fixed; z-index: 25; left: 50%; top: calc(var(--safe-top) + var(--hdr) + 10px); transform: translateX(-50%);
  height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font: var(--t-callout);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); }

.spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--surface-3); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- P2-4: режим тревоги для всего приложения
   app.js ставит html[data-mode="alert"], пока тревога активна. Ревью №2 / аудит B1: акцент НЕ перекрашиваем в красный —
   иначе «В норме», «Полезно», «＋», онбординг и точка логотипа горят красным. Тревогу показывают плитка, полоса под шапкой
   и красная точка на «Ленте». Таб-бар чуть тонируем только в тёмной теме; в светлой — без розового. */
:root[data-mode="alert"]:not([data-theme="light"]) .tabbar { background: color-mix(in srgb, var(--red) 8%, var(--bar)); }
/* статусы «всё в норме» — всегда зелёные, не акцент */
:root { --accent-ok: var(--green); }
body { transition: background-color .6s, color .6s; }

/* ---------------------------------------------------------------- P1-2: shared-element «карточка → пост» (nav.js withViewTransition) */
::view-transition-group(*) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-out); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--ease-in-out); }
::view-transition-image-pair(*) { isolation: isolate; }
/* во время перехода подложка не «едет» (иначе карточка в новом кадре стоит со сдвигом параллакса) */
:root.vt-post .panes, :root.vt-post .hdr { transition: none !important; }

/* ---------------------------------------------------------------- P1-17 / ревью №2 P1-6: слабые устройства (boot.js ставит html.lowfx)
   ≤4 ядер, ≤2 ГБ памяти, «экономия трафика» или медленная сеть: без backdrop-filter и blur, без «неба», без бесконечных
   анимаций (кольца тревоги, пульс, сканер под шапкой, блик скелетонов). Полупрозрачные панели — сплошными. */
.lowfx *, .lowfx *::before, .lowfx *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.lowfx .sky, .lowfx .pst-blur, .lowfx .fm-blur { display: none !important; }
.lowfx .sky *, .lowfx .t-alert__rings span, .lowfx .pulse__b, .lowfx .live i, .lowfx .live i::after, .lowfx .t-alert__pill i,
.lowfx .sk::after, .lowfx .skeleton::after, .lowfx .hello-w { animation: none !important; }
.lowfx .hello-w { opacity: 1 !important; transform: none !important; }
:root.lowfx[data-mode="alert"] .hdr::after { animation: none !important; transform: none; }
.lowfx .tabbar { background: var(--surface); }
.lowfx .hdr { background: var(--bg); }
.lowfx .home-seg { background: var(--bg); }
.lowfx .sheet, .lowfx .screen { will-change: auto; }

/* ---------------------------------------------------------------- P2-8: reduced motion — точечно.
   Смысловые переходы остаются кроссфейдом 150 мс, а сдвиги, параллакс, частицы, «небо», бесконечные пульсы — выключены. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .screen, .screen.in { transform: none !important; opacity: 0; transition: opacity 150ms linear !important; }
  .screen.in { opacity: 1; }
  .sheet { transition: transform 150ms linear !important; }
  body.has-screen .panes, body.has-screen .hdr { transform: none !important; }
  .tap:active, .tile:active, .btn:active { transform: none !important; }
  .tb-pill { transition: opacity 150ms linear !important; }
  .sky *, .live i::after, .t-alert__rings span, .pulse__b:last-child { animation: none !important; }
  ::view-transition-group(*) { animation-duration: 150ms !important; }
  :root[data-mode="alert"] .hdr::after { animation: none !important; transform: none; }
  .fcard.rise, .fcard.enter, .fempty { animation: none !important; }
  .hello-w { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* «Крупный текст» не растит подписи таб-бара выше 12,5 px — иначе «Мой район» обрезается на 360 px */
.tabbar .tb-l { font-size: min(0.75rem, 12.5px); letter-spacing: -.02em; }

/* ---------------------------------------------------------------- числовой тикер (P2-5): цифра — колонка 0–9 */
.tk { display: inline-block; height: 1.2em; line-height: 1.2em; overflow: hidden; vertical-align: bottom; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk__c, .tk__x { display: inline-block; vertical-align: top; height: 1.2em; }
.tk__c { overflow: hidden; }
.tk__s { display: block; transform: translateY(calc(var(--n) * -1.2em)); }
.tk__s x-d { display: block; height: 1.2em; text-align: center; }
.tk x-v { display: inline; }
.tk--go .tk__s { animation: tk-roll 640ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
@keyframes tk-roll { from { transform: translateY(0); } }


/* C5b: статус отключения/тревоги на карточке и в посте («Идёт · обещали к 16:00», «Восстановлено», «Завершено по графику») */
.st-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 8px; padding: 4px 10px; border-radius: 10px;
  font: 700 0.875rem/1.25rem var(--font); background: var(--surface-2); color: var(--text-2); }
.st-chip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st-chip--red { background: var(--red-soft); color: var(--red-text); }
.st-chip--amber { background: var(--amber-soft); color: var(--amber-text); }
.st-chip--green { background: var(--green-soft); color: var(--green-text); }
.pst-st { margin: 4px 0 2px; }
.fcard__date { white-space: nowrap; }

/* ---------------------------------------------------------------- рост канала (js/subcta.js, 17.10.2026)
   «Подписаться на канал» — спокойная карточка после пользы; «Поделиться с соседями» — вторичная кнопка во всю ширину */
.subcta { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 4px; padding: 16px 44px 16px 16px; border-radius: 22px;
  background: var(--accent-soft); box-shadow: none; transition: opacity var(--d-base, .2s), transform var(--d-base, .2s); }
.subcta.is-gone { opacity: 0; transform: scale(.98); }
.subcta__i { flex: none; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.subcta__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.subcta__t b { font: var(--t-callout, 700 0.9375rem/1.3438rem var(--font)); font-weight: 800; color: var(--text); text-wrap: balance; }
.subcta__t > span { font: var(--t-caption, 600 0.8125rem/1.125rem var(--font)); color: var(--text-2); }
.subcta__go { align-self: flex-start; margin-top: 8px; min-height: 44px; height: 44px; padding: 0 18px; }
.subcta__x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--text-3); background: none; }
.shr-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.lowfx .subcta { transition: none; }
@media (prefers-reduced-motion: reduce) { .subcta { transition: none; } }

/* ---------------------------------------------------------------- «в сети» (presence.py, sapi.avatarHtml → .av.is-on)
   Точка целиком внутри аватара (круг и скруглённый квадрат режут overflow: hidden — ставим её не на край, а на 11 %):
   ободок цвета фона карточки, без анимации — подсказка, а не мигалка. Подпись — .seen («в сети» / «был(а) …»). */
:root, :root[data-theme="dark"] { --online: #34D399; --online-ring: var(--surface); }
:root[data-theme="light"] { --online: #16A34A; --online-ring: #FFFFFF; }
.av.is-on { position: relative; }
.av.is-on::after { content: ""; position: absolute; right: 9%; bottom: 9%; width: 28%; height: 28%; min-width: 7px; min-height: 7px; max-width: 16px; max-height: 16px;
  border-radius: 50%; background: var(--online); box-shadow: 0 0 0 2px var(--online-ring); box-sizing: border-box; pointer-events: none; z-index: 1; }
.p3-nt__av--stack .av.is-on { position: absolute; }
.seen { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.seen.is-on { color: var(--accent-text, var(--online)); font-weight: 700; }
.seen.is-on i { width: 7px; height: 7px; border-radius: 50%; background: var(--online); flex: none; }
.ch-online.is-on::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--online); vertical-align: 1px; }
/* значок в правом нижнем углу уже занят (галочка профиля, медаль подиума, уровень) — точку «в сети» ставим слева */
.p3-av .av.is-on::after, .rt-pod__av .av.is-on::after, .rt-teaser__av .av.is-on::after { right: auto; left: 9%; }