/* Единый дизайн-слой Avito Office: шрифт Golos Text + токены (графит, воздушно).
   Подключается на всех страницах через <link href="/ui.css">. Правила по ролям —
   меняешь тему здесь, применяется везде. Ресёрч: docs/research/2026-07-23_design_normy.md */

/* ── Golos Text (self-hosted /fonts) — кириллица + латиница, веса 400/500/600/700 ── */
@font-face{font-family:'Golos Text';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/golos-cyrillic-400.woff2') format('woff2');
  unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/golos-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2100-214F,U+2212}
@font-face{font-family:'Golos Text';font-weight:500;font-style:normal;font-display:swap;
  src:url('/fonts/golos-cyrillic-500.woff2') format('woff2');
  unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-weight:500;font-style:normal;font-display:swap;
  src:url('/fonts/golos-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2100-214F,U+2212}
@font-face{font-family:'Golos Text';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts/golos-cyrillic-600.woff2') format('woff2');
  unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts/golos-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2100-214F,U+2212}
@font-face{font-family:'Golos Text';font-weight:700;font-style:normal;font-display:swap;
  src:url('/fonts/golos-cyrillic-700.woff2') format('woff2');
  unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-weight:700;font-style:normal;font-display:swap;
  src:url('/fonts/golos-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2100-214F,U+2212}

/* ═══ ГРАФИТОВАЯ ТЕМА (решение владельца 02.08) ═══════════════════════════════
   Логотип — эталон: тёмный графит #08090d, белый штрих, сиреневая искра #b18cff.
   Три правила, на которых держится вся тема (ресёрч
   docs/research/2026-08-02_design_systems_dark_theme.md, часть 2):
   1. Поверхности разделяются СВЕТЛОТОЙ, а не рамками: карточка светлее фона
      (Apple HIG base/elevated, Material 3 tonal elevation). Тени в темноте почти
      не читаются, поэтому их нет. Волосяная линия — только для строк списка и
      кольца фокуса.
   2. Акцент ПЛОСКИЙ, без градиентов и свечения, текст на нём тёмный.
   3. Цвет = роль: белый штрих там, где работает человек («Согл.»), сиреневая
      искра там, где работает ИИ («Авто»), нейтраль — ручной режим.
   Старые имена токенов сохранены: страницы ссылаются на них, и переопределение
   здесь перекрашивает интерфейс целиком, без правки каждого правила. */
:root{
  /* слои: каждый следующий светлее предыдущего — это и есть «высота» */
  --bg:#0a0b0f; --surface:#14161d; --surface-2:#1c1f28; --surface-3:#242833;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --text:#f2f0ea; --text-2:#a5a9b6; --muted:#6f7482; --ink:#f2f0ea;
  /* Акцент двух яркостей (решение владельца 02.08 «на фиолетовых надо белый текст»):
     --accent      — цвет искры, для текста-меток, рамок и подложек;
     --accent-solid — заливка кнопок и активных вкладок: глубже, чтобы БЕЛЫЙ текст читался.
     Замер контраста: белый на #b18cff даёт 2.6:1 (норма 4.5), на #7c5bd6 — 4.9:1. */
  --accent:#b18cff; --accent-solid:#7c5bd6; --accent-2:#8f6ee0; --accent-hover:#8d69e6;
  --on-accent:#ffffff;
  /* градиента больше нет: страницы используют --accent-grad как background-image,
     поэтому отдаём плоскую заливку тем же токеном — правки страниц не нужны */
  --accent-grad:linear-gradient(0deg,#7c5bd6,#7c5bd6);
  --accent-soft:rgba(177,140,255,.13); --accent-glow:none;
  /* глянец отменён: пусто вместо теней и внутренних бликов */
  --gloss:none; --gloss-sm:none;
  /* цвета режимов объявления */
  --m-manual:rgba(255,255,255,.10);
  --m-appr:#efece3; --m-appr-bg:rgba(239,236,227,.10);   /* белый штрих — человек */
  --m-auto:#b18cff; --m-auto-solid:#7c5bd6; --m-auto-bg:rgba(177,140,255,.13);   /* сиреневая искра — ИИ */
  /* эмиссив авто-рамки (просьба владельца 21.08 «выделять авто-чаты свечением» —
     точечное исключение из канона «свечений нет», только для .ring.auto) */
  --m-auto-glow:rgba(177,140,255,1);
  /* подложка реплики агента: плотнее, чем у меток, — иначе на глаз не отличается
     от нейтрального пузыря человека (замечание владельца 02.08) */
  --ai-bub:rgba(150,110,235,.26);
  /* семантика статусов (+фоны-пилюли) — под тёмный фон */
  --red:#ff7a7a;  --red-bg:rgba(255,122,122,.13);
  --amber:#e5b45c; --amber-bg:rgba(229,180,92,.13);
  --green:#5bd6a0; --green-bg:rgba(91,214,160,.13);
  --blue:#8ec5ff; --blue-bg:rgba(142,197,255,.13);
  /* стекло */
  --glass:rgba(20,22,29,.72); --glass-line:rgba(255,255,255,.08);
  --glass-shadow:none;
  /* радиусы / тени / шрифт */
  --r-sm:8px; --r:10px; --r-lg:14px; --r-xl:16px;
  --shadow-sm:none;
  --shadow:none;
  --font:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
/* Токены, которых не хватало для смены темы (05.08): раньше эти цвета были
   зашиты в страницах и пережили бы переключение (класс граблей «зашитый
   stroke:#fff» из 02.08 — теперь то же правило для фонов и текста). */
:root{
  --on-appr:#14161d;                      /* текст на белой заливке «Согл.» */
  --neutral-soft:rgba(255,255,255,.08);   /* тихая нейтральная подложка (отмены) */
  --m-manual-on:rgba(255,255,255,.16);    /* активный сегмент «Ручной» */
  --track:#2c3040; --knob:#f2f0ea; --knob-dim:#8b90a0  /* тумблеры: дорожка и шайба */
}

/* ═══ СВЕТЛАЯ ТЕМА (решение владельца 05.08: переключатель у каждого) ═════════
   Те же три правила, что и у графита, зеркально: поверхности разделяются
   светлотой (карточка БЕЛЕЕ фона), акцент плоский, цвет = роль. «Согл.»
   (человек) в светлой теме — тёмный графитовый штрих на светлом, как белый
   штрих на тёмном: --m-appr тёмный, текст на нём белый (--on-appr).
   Акцент-текст глубже искры: #b18cff на белом даёт 2.1:1 — не читается,
   поэтому --accent в светлой теме #6f4bcf (5.6:1), заливка та же #7c5bd6. */
html[data-theme=light]{
  --bg:#f3f4f7; --surface:#ffffff; --surface-2:#eceef3; --surface-3:#e2e5ec;
  --line:rgba(20,24,40,.10); --line-2:rgba(20,24,40,.16);
  --text:#191b22; --text-2:#454a58; --muted:#6b7182; --ink:#191b22;
  --accent:#6f4bcf; --accent-solid:#7c5bd6; --accent-2:#8f6ee0; --accent-hover:#6b48cc;
  --on-accent:#ffffff;
  --accent-grad:linear-gradient(0deg,#7c5bd6,#7c5bd6);
  --accent-soft:rgba(124,91,214,.14); --accent-glow:none;
  --m-manual:rgba(20,24,40,.10); --m-manual-on:rgba(20,24,40,.14);
  --m-appr:#232733; --on-appr:#ffffff; --m-appr-bg:rgba(35,39,51,.08);
  --m-auto:#6f4bcf; --m-auto-solid:#7c5bd6; --m-auto-bg:rgba(124,91,214,.13);
  --m-auto-glow:rgba(111,75,207,.85);
  --ai-bub:rgba(140,100,230,.15);
  --red:#b93636;  --red-bg:rgba(185,54,54,.10);
  --amber:#7d550b; --amber-bg:rgba(160,115,25,.13);
  --green:#0e6844; --green-bg:rgba(14,104,68,.11);
  --blue:#2563a8; --blue-bg:rgba(37,99,168,.10);
  --glass:rgba(255,255,255,.75); --glass-line:rgba(20,24,40,.09);
  --neutral-soft:rgba(20,24,40,.07);
  --track:#c4cad6; --knob:#ffffff; --knob-dim:#ffffff;
  color-scheme:light
}
/* Приглушение через opacity калибровано под тёмный фон: тёмный текст на светлом
   при тех же долях перестаёт читаться (замер 05.08: вкладки .55 → 3.8:1 при
   норме 4.5). В светлой теме глушим мягче. */
html[data-theme=light] .tab:not(.on):not(.active){opacity:.78}
html[data-theme=light] .tab:not(.on):not(.active):hover{opacity:.95}

html{color-scheme:dark;-webkit-tap-highlight-color:transparent;
  /* iOS раздувает шрифт у переполнившихся блоков (font boosting) — запрещаем:
     длинный URL в пузыре превращал сообщение в гигантский текст (06.08) */
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
/* раздел внутри каркаса (/shell.html, iframe с ?embed=1): свою навигацию прячет —
   шапку и нижнее меню рисует каркас, они никогда не пропадают с экрана */
html.embedded .bar,html.embedded .mobnav{display:none!important}
html,body{font-family:var(--font)}
body{color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ── акцентная кнопка: плоская заливка, тёмный текст ──
   Глянец-капсулы (объём + свечение + внутренние блики) убраны 02.08: они читались
   как штамп ИИ-дизайна и спорили с матовым, резким характером знака. */
.btn-accent{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  color:var(--on-accent);font-weight:600;
  border:0;font-family:inherit;cursor:pointer;background:var(--accent-solid);box-shadow:none;
  transition:filter .15s,transform .06s}
.btn-accent:hover{filter:brightness(1.08)} .btn-accent:active{transform:translateY(1px)}
.btn-accent:disabled{filter:grayscale(.6);opacity:.55;cursor:default}
.btn-accent:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* .gloss/.gloss-sm остались как имена классов (страницы на них ссылаются),
   но объёма больше не дают — только плоскую заливку акцентом. */
.gloss,.gloss-sm{background-image:none;background-color:var(--accent-solid);color:var(--on-accent);
  box-shadow:none;border:0}

/* ── .sheen / .pearl — отменены 02.08 ───────────────────────────────────────
   Бегущий блик и цветной перелив убраны: в кабинете движется ровно одно —
   текст, который набирает агент. Классы оставлены, чтобы не переписывать
   разметку, но никакого движения больше не дают. */
.sheen,.pearl{position:relative;background:var(--accent-solid);color:var(--on-accent)}
.sheen::after,.pearl::before{content:none}

/* ── стеклянная поверхность ── */
.glass{background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-line);box-shadow:none}

/* ── «ДЫМКА» → тихая подложка ИИ ────────────────────────────────────────────
   Была живая плазма (пятна света плыли, как чернила в воде) — выбор 25.07.
   02.08 движение отменено: признак «это писал ИИ» несут теперь цвет, знак
   в строке и подпись, а не анимация фона. Класс .plasma сохранён — им размечены
   реплики агента, панель черновика и кнопка «Подсказать».
   По умолчанию сиреневая подложка (работает ИИ); белую подложку «ждёт человека»
   даёт .draft.plasma в кокпите. */
.plasma{position:relative;background:var(--m-auto-bg);color:var(--text)}
.plasma.on-accent{background:var(--m-auto-bg);color:var(--text)}
.plasma::before,.plasma::after{content:none}
.plasma>*{position:relative}
.plasma>.blob{display:none}   /* старые пятна не нужны — разметку не ломаем */

/* сегмент-переключатель (напр. Бумажный дом ↔ УралИнтерьер) — общий на всех окнах */
.seg{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:3px;gap:2px}
.seg.full{display:flex;width:100%}
.seg.full .segb{flex:1;text-align:center}
.segb{font-size:11.5px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;
  color:var(--text-2);border:0;background:transparent;font-family:inherit;white-space:nowrap;line-height:1.1}
/* Заливка живёт в отдельном слое: градиент как фон анимировать нельзя, а прозрачность —
   можно. Поэтому выбор нал/безнал перетекает, а не перещёлкивается рывком. */
.segb{position:relative;z-index:0;transition:color .18s ease}
.segb::before{content:"";position:absolute;inset:0;border-radius:999px;z-index:-1;
  background-image:none;background-color:var(--accent-solid);box-shadow:none;
  opacity:0;transform:scale(.94);transition:opacity .22s ease,transform .22s cubic-bezier(.4,0,.2,1)}
.segb.on{color:var(--on-accent)}   /* на плоском акценте текст тёмный, не белый */
.segb.on::before{opacity:1;transform:none}
.segb:not(.on):hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){.segb,.segb::before{transition:none}}

/* ── нижнее меню (только на телефоне) ── */
.mobnav{display:none}
@media (max-width:760px){
  .mobnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--bg);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 12px rgba(20,20,25,.05)}
  .mobnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;
    text-decoration:none;color:var(--muted);font-size:10px;font-weight:600;position:relative}
  .mobnav a.on{color:var(--accent)}
  /* пилюля за активным пунктом (иконка + подпись — замечание владельца 04.08:
     «обводку и на текст, а не кружок только на иконку») */
  .mobnav a::before{content:"";position:absolute;top:4px;bottom:3px;left:7px;right:7px;
    border-radius:999px;background:var(--accent-soft);z-index:-1;opacity:0}
  .mobnav a.on::before{opacity:1}
  .mobnav a svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  /* прячем верхние табы на телефоне — навигация снизу */
  .bar .tabs{display:none}
}

/* ── перелёт подсветки разделов (04.08, финальная схема после трёх подходов) ──
   Переход НЕ задерживается: навигация уходит в момент клика, а перелёт играет
   уже НА НОВОЙ странице — старая позиция пилюли передаётся через sessionStorage
   (app/nav.js), пилюля прилетает оттуда на активный пункт. Работает в любом
   браузере. View Transitions (@view-transition) НЕ ИСПОЛЬЗОВАТЬ: на нашем парке
   анимация перехода замирала на currentTime=0 — экран «зависал» на старом кадре
   (диагноз 04.08: document.getAnimations() → running при t=0 спустя 2.5 c). */
.navfly{position:fixed;border-radius:999px;background:var(--accent-soft);
  pointer-events:none;z-index:300;
  transition:left .24s cubic-bezier(.3,.7,.25,1),top .24s cubic-bezier(.3,.7,.25,1),
    width .24s cubic-bezier(.3,.7,.25,1),height .24s cubic-bezier(.3,.7,.25,1)}
/* пока пилюля летит, штатная подсветка цели погашена — иначе их видно две разом */
.tab.on.flying{background:transparent}
@media (max-width:760px){
  .mobnav a.on.flying::before{opacity:0}
}