/* ==========================================================================
   RIPPLET HUB — ПАЛИТРЫ И ПЛОТНОСТЬ.
   Подключается ПОСЛЕ tokens.css и ave/tokens/colors.css, поэтому перекрывает их.

   Стилистика — как в современных редакторах вроде Figma: нейтральный серый
   (почти без насыщенности), синий акцент, малые радиусы, тонкие светлые
   границы, компактный мелкий текст. Это индустриальные приёмы, а не чужие
   фирменные ассеты: иконки и знаки рисуются свои.

   Цвета живут в двух слоях — :root (tokens.css, на нём style.css) и .ave-root
   (слой редизайна, класс на body). Перекрывать надо ОБА, иначе часть интерфейса
   останется в старой гамме.

   Тема выбирается атрибутом data-theme на <html>. Базовая — светлая.
   ========================================================================== */

/* ------------------------------------------------------------------ СВЕТЛАЯ */

html[data-theme="light"] {
  --stage:    #f5f5f5;   /* фон вне рамки */
  --bg:       #ffffff;   /* рабочая область — чистый белый, как холст редактора */
  --panel:    #ffffff;   /* панели */
  --panel-2:  #f5f5f5;   /* приподнятые поверхности, поповеры */
  --field:    #ffffff;   /* поля ввода */
  --line:     #e6e6e6;   /* границы — едва заметные, не рисуют «решётку» */
  --line-2:   #f0f0f0;   /* внутренние разделители */
  --ink:      #1e1e1e;   /* основной текст          — 16.7:1 */
  --ink-dim:  #333333;   /* текст сообщений         — 12.6:1 */
  --muted:    #575757;   /* вторичный текст         —  7.2:1 */
  --muted-2:  #6b6b6b;   /* мета, мелкие подписи    —  5.3:1 (и 4.9 на серой карточке) */
  --placeholder: #a3a3a3; /* только плейсхолдеры: это подсказка, а не содержимое */
  --signal:   #0078d4;   /* акцент синий: и заливка под белым текстом, и текст на белом — 4.5:1 */
  --signal-d: #d9ecfb;   /* светлая подложка акцента */
  --ch-text:  #0078d4;   /* текстовые каналы */
  --ch-voice: #6b4fe0;   /* голосовые каналы — фиолетовый, чтобы отличались */
  --ok:       #0b7a3f;
  --danger:   #d93d1a;
  --danger-l: #ffd9d0;
  --danger-ink: #a8300f;  /* красный текст поверх красной подложки */
  --on-danger:  #ffffff;  /* подпись на сплошной красной заливке */
  --on-signal: #ffffff;  /* подпись на акцентной заливке */
  --r: 5px;              /* малый радиус вместо 8px — суше и плотнее */
}

html[data-theme="light"] .ave-root {
  --stage:   #f5f5f5;
  --bg:      #ffffff;
  --panel:   #ffffff;
  --panel-2: #f5f5f5;
  --field:   #ffffff;

  --line:    #e6e6e6;
  --line-2:  #f0f0f0;

  --ink:     #1e1e1e;
  --ink-dim: #333333;
  --muted:   #575757;
  --muted-2: #6b6b6b;
  --placeholder: #a3a3a3;

  --signal:      #0078d4;
  --signal-d:    #d9ecfb;
  --signal-soft: #3d9df0;
  --signal-hi:   #005ea6;

  --ch-text:  #0078d4;
  --ch-voice: #6b4fe0;

  --ok:       #0b7a3f;
  --danger:   #d93d1a;
  --danger-l: #ffd9d0;
  --danger-2: #b8310f;
  --danger-ink: #a8300f;
  --on-danger:  #ffffff;

  --yellow: #ffcd29;
  --warn-ink: #855c00;          /* жёлтый читается только как заливка; текстом — этот */
  --teal:   #00806f;
  --purple: #6b4fe0;
  --carrot: #c44d12;

  --on-signal: #ffffff;            /* белый текст на синей заливке читается */
  --glass-hi:  rgba(0, 0, 0, .04);
}

/* ------------------------------------------------------------------- ТЁМНАЯ */
/* Не «инвертированная светлая», а самостоятельная нейтральная гамма
   с тем же синим акцентом — чтобы переключение не меняло характер интерфейса. */

html[data-theme="dark"] {
  --stage:    #1e1e1e;
  --bg:       #2c2c2c;
  --panel:    #2c2c2c;
  --panel-2:  #383838;
  --field:    #383838;
  --line:     #444444;
  --line-2:   #3a3a3a;
  --ink:      #ffffff;
  --ink-dim:  #e6e6e6;
  --muted:    #bdbdbd;   /* 7.4:1 на --bg */
  --muted-2:  #a9a9a9;   /* 4.6:1 даже на самой светлой поверхности (было #7a7a7a — 3.3:1) */
  --placeholder: #757575;
  --signal:   #4dabf7;   /* на тёмном ярче: 5.6:1 как текст; подпись на заливке — --on-signal */
  --signal-d: #123a5c;
  --ch-text:  #4dabf7;
  --ch-voice: #a894ff;
  --ok:       #3dd07f;
  --danger:   #ff6b4a;
  --danger-l: #4a2018;
  --danger-ink: #ff9d85;
  --on-danger:  #4a1205;
  --on-signal: #06263f;  /* см. пояснение в .ave-root ниже */
  --r: 5px;
}

html[data-theme="dark"] .ave-root {
  --stage:   #1e1e1e;
  --bg:      #2c2c2c;
  --panel:   #2c2c2c;
  --panel-2: #383838;
  --field:   #383838;

  --line:    #444444;
  --line-2:  #3a3a3a;

  --ink:     #ffffff;
  --ink-dim: #e6e6e6;
  --muted:   #bdbdbd;
  --muted-2: #a9a9a9;
  --placeholder: #757575;

  --signal:      #4dabf7;
  --signal-d:    #123a5c;
  --signal-soft: #74c0fc;
  --signal-hi:   #8ecdff;

  --ch-text:  #4dabf7;
  --ch-voice: #a894ff;

  --ok:       #3dd07f;
  --danger:   #ff6b4a;
  --danger-l: #4a2018;
  --danger-2: #ff8f75;
  --danger-ink: #ff9d85;
  --on-danger:  #4a1205;

  --yellow: #ffcd29;
  --warn-ink: #ffcd29;
  --teal:   #2dd4bf;
  --purple: #a894ff;
  --carrot: #ff8c5a;

  /* На тёмной теме акцент яркий, и белая подпись на нём даёт всего 2.5:1.
     Поэтому подпись на акцентной заливке — тёмная: приём обычный для тёмных
     интерфейсов и единственный способ сохранить и яркость, и читаемость. */
  --on-signal: #06263f;
  --glass-hi:  rgba(255, 255, 255, .05);
}

/* --------------------------------------------------- плотность и типографика */
/* Шрифт системный намеренно: у приложения CSP с font-src 'self', внешние
   шрифты заблокированы, а самохостинг Inter — это ещё 300 КБ в образе.
   Системный стек даёт Segoe UI / SF Pro — того же характера гротески. */

html[data-theme] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.003em;   /* чуть плотнее: типично для интерфейсов редакторов */
}

/* Мелкий управляющий текст: подписи, мета, кнопки панелей */
html[data-theme] .icon-btn,
html[data-theme] .tab,
html[data-theme] .m-role,
html[data-theme] .pf-role {
  letter-spacing: 0;
}

/* Границы не должны «рисовать сетку»: тонкие и низкоконтрастные */
html[data-theme] .theme-menu {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12), 0 0 0 1px var(--line);
  border-color: transparent;
}

/* ------------------------------------------------- переключатель в шапке */

.theme-pick { position: relative; display: inline-flex; }

.theme-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r, 5px);
  z-index: 400;
  display: none;
}

.theme-menu.open { display: block; }

.theme-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: 0;
  border-radius: 3px;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.theme-menu button:hover { background: var(--panel-2); }
.theme-menu button[aria-checked="true"] { color: var(--signal); font-weight: 600; }

.theme-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--line);
  flex: none;
}

.theme-swatch.light { background: linear-gradient(135deg, #ffffff 50%, #0d99ff 50%); }
.theme-swatch.dark  { background: linear-gradient(135deg, #2c2c2c 50%, #0d99ff 50%); }

/* ==========================================================================
   ТИПОГРАФИКА — ОДНА СИСТЕМА НА ВЕСЬ ПРОДУКТ.

   До этой ревизии на экране одновременно жили три гарнитуры: JetBrains Mono
   (48 элементов каркаса — навигация, счётчики, заголовки секций), системный
   гротеск (27 — списки, кнопки, поля) и Futura в вордмарке. Причём Futura
   стоит далеко не на каждой машине, а за ней в стеке шли Century Gothic и
   Avenir Next — то есть знак выглядел по-разному у разных людей.

   Ролей теперь ровно три, и у каждой свой токен:

     --font-ui       весь интерфейс: списки, кнопки, поля, сообщения
     --font-display  вордмарк и крупные заголовки-«обложки» (Jost, свой файл)
     --font-code     код, хэши, токены, технические идентификаторы

   Старые имена (--sans/--mono из tokens.css и --font-sans/--font-mono из слоя
   AVE) переопределены здесь и ведут на --font-ui. Так сделано намеренно: в
   слое AVE около двухсот правил пишут var(--font-mono) напрямую, и править их
   поимённо — это двести шансов задеть что-то соседнее. Настоящий моноширинный
   никуда не делся, он живёт под --font-code и раздаётся точечно.
   ========================================================================== */

/* Jost — единственный подключаемый файлом шрифт (latin+cyrillic, 400-600).
   Лежит рядом со слоем AVE; объявляем и здесь, чтобы вордмарк был доступен
   страницам, которые ave-shell.css не грузят (доска и ролик по ссылке). */
@font-face{font-family:'Jost';font-style:normal;font-display:swap;font-weight:400;src:url(ave/fonts/jost-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-display:swap;font-weight:400;src:url(ave/fonts/jost-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Jost';font-style:normal;font-display:swap;font-weight:500;src:url(ave/fonts/jost-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-display:swap;font-weight:500;src:url(ave/fonts/jost-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Jost';font-style:normal;font-display:swap;font-weight:600;src:url(ave/fonts/jost-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-display:swap;font-weight:600;src:url(ave/fonts/jost-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

html[data-theme],
html[data-theme] body,
html[data-theme] .ave-root {
  --font-ui: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* старые имена — на единый интерфейсный гротеск */
  --sans: var(--font-ui);
  --mono: var(--font-ui);
  --font-sans: var(--font-ui);
  --font-mono: var(--font-ui);
}

html[data-theme] body,
html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select,
html[data-theme] button {
  font-family: var(--font-ui);
}

/* Настоящий моноширинный — только там, где важна посимвольная сетка */
html[data-theme] code,
html[data-theme] pre,
html[data-theme] kbd,
html[data-theme] samp,
html[data-theme] .mono-field,
html[data-theme] .auth-card .mono-field {
  font-family: var(--font-code);
}

/* Цифры в счётчиках, сроках и таймкодах — табличные: столбцы не «пляшут»
   при смене значения, хотя шрифт пропорциональный. */
html[data-theme] .total-unread,
html[data-theme] .ch-count,
html[data-theme] .ave-navrow-badge,
html[data-theme] .tk-duepill,
html[data-theme] .tk-duerel,
html[data-theme] .tk-mine-cnt,
html[data-theme] .tk-msec-cnt,
html[data-theme] .tk-arv-date,
html[data-theme] .self-ping-ms,
html[data-theme] .cl-hh,
html[data-theme] .cl-cellnum,
html[data-theme] .cl-dayt,
html[data-theme] .m-time,
html[data-theme] .vr-tc,
html[data-theme] .vr-time,
html[data-theme] .vc-t,
html[data-theme] .bds-weight-txt,
html[data-theme] [class$="-cnt"],
html[data-theme] [class$="-badge"],
html[data-theme] time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Плейсхолдер — подсказка, а не содержимое: он единственный, кому можно быть
   светлее нормы контраста. Раньше он красился тем же токеном, что и мета,
   и поэтому мету приходилось держать такой же бледной. */
html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

/* ==========================================================================
   ВОРДМАРК. Знак набирался капслоком с разрядкой .2-.46em — приём из эпохи,
   когда весь интерфейс был моноширинным. Рядом с обычным гротеском капслок
   с разрядкой читается как чужая наклейка, а на узком экране ещё и не
   помещался. Возвращаем человеческое написание: «Ripplet Hub», Jost —
   геометрический гротеск того же рода, что и Futura, но свой файл,
   одинаковый на любой машине.
   ========================================================================== */

html[data-theme] .side-brand-title,
html[data-theme] .sidebar.ave-root .side-brand-title,
html[data-theme] .brand h1,
html[data-theme] .sidebar-title,
html[data-theme] .welcome-cap,
html[data-theme] .as-brand > span {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
  padding-left: 0;
}

html[data-theme] .side-brand-title { font-size: 19px; color: var(--ink); }
html[data-theme] .brand h1         { font-size: 30px; line-height: 1.05; }
html[data-theme] .sidebar-title    { font-size: 18px; }
html[data-theme] .welcome-cap      { font-size: 17px; color: var(--muted); }
html[data-theme] .as-brand > span  { font-size: 20px; color: var(--ink); }

/* ==========================================================================
   ЧАТ. Сообщения жили в плавающей карточке шириной 852px с рамкой и радиусом
   14px: по краям пропадало около 300px, а рамка добавляла лишний слой.
   В плотных рабочих интерфейсах лента идёт до краёв области.
   ========================================================================== */

html[data-theme] .chat-frame {
  margin: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  background: var(--bg);
}

/* Лента: комфортная длина строки задаётся отступом, а не рамкой */
html[data-theme] .messages {
  padding: 14px 28px 8px;
}

/* Продолжение серии сообщений одного автора уезжало вправо на 58px от текста
   первого: к отступу под аватар добавлялся ещё margin-left: 49px. Убираем его —
   реплики одного человека выстраиваются в одну колонку. */
html[data-theme] .msg.cont {
  margin-left: 0;
  padding-left: 8px;
}

/* Бейдж окружения (DEV) в углу сайдбара — рабочему интерфейсу не нужен */
html[data-theme] .env-badge { display: none !important; }

/* ==========================================================================
   САЙДБАР. Главная проблема — у каждого канала своя квадратная плитка-подложка
   под иконкой. На десятке каналов это десяток цветных прямоугольников, которые
   перетягивают внимание с названий. Подложку убираем, значок оставляем:
   список читается по тексту, а иконка работает признаком типа канала.
   ========================================================================== */

html[data-theme] .ch-tile {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 18px;
  height: 18px;
}

/* Строки списка: радиус как у остального интерфейса и чуть плотнее по вертикали */
html[data-theme] #channel-list .ch,
html[data-theme] .channels .ch {
  border-radius: var(--r, 5px);
  padding: 3px 8px 3px 9px;
  gap: 8px;
}

/* Активный канал: заливка вместо обводки — спокойнее и привычнее для списков */
html[data-theme] #channel-list .ch.active,
html[data-theme] .channels .ch.active {
  background: var(--panel-2);
}

/* Заголовки секций были почти неразличимы (#b3b3b3 на белом) */
html[data-theme] .tk-pglbl {
  color: var(--muted);
  letter-spacing: .9px;
}


/* ==========================================================================
   ЗАДАЧИ. Строка занимала 44px при кегле 15px и пятнадцати колонках — список
   на десяток задач растягивался на весь экран. Уплотняем кегль и вертикальные
   отступы, не трогая саму сетку колонок, чтобы ничего не поехало.
   ========================================================================== */

html[data-theme] .tk-trow {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 13.5px;
}

html[data-theme] .tk-ttl {
  font-size: 13.5px;
}

/* Служебные колонки (ручка перетаскивания, «добавить подзадачу») видны всегда
   и создают шум в начале каждой строки — приглушаем, на наведении возвращаем. */
html[data-theme] .tk-grip,
html[data-theme] .tk-addsub {
  opacity: .35;
  transition: opacity .12s;
}

html[data-theme] .tk-trow:hover .tk-grip,
html[data-theme] .tk-trow:hover .tk-addsub {
  opacity: 1;
}

/* Чип «на доске» (задача рождена стикером). Подложка на наведении задавалась
   белым по белому — на светлой теме её попросту не было видно. */
html[data-theme] #tasks-pane .tk-bchip:hover {
  background: var(--panel-2, rgba(0, 0, 0, .06));
  color: var(--signal);
}

/* Дата срока: моноширинные цифры, чтобы столбец не «плясал» */
html[data-theme] .tk-duepill {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

/* ==========================================================================
   ДОСКИ.
   ========================================================================== */

/* Сетка была жёстко на шесть колонок по 174px: при трёх досках правая половина
   экрана пустовала, а превью оставались мелкими независимо от ширины окна.
   Делаем адаптивной — карточки растягиваются и переносятся сами. */
html[data-theme] .bds-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* Кнопка «…» на превью была нарисована для тёмной темы: тёмная полупрозрачная
   подложка и светлый глиф. На светлой теме глиф стал тёмным — получилось
   тёмное пятно с неразличимым знаком. Возвращаем читаемость. */
html[data-theme] .bds-menu-btn {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

html[data-theme] .bds-menu-btn:hover {
  color: var(--ink);
  background: var(--panel-2);
}

/* Дата изменения переносилась на вторую строку и растила карточку */
html[data-theme] .bds-card time,
html[data-theme] .bds-card [class*="date"],
html[data-theme] .bds-card [class*="meta"] {
  white-space: nowrap;
}

/* Подписи групп в баре досок: «Фильтр» слева, «Сортировка» справа. Без них
   отбор и порядок выглядели одним рядом одинаковых кнопок, а «Проект»
   читался двусмысленно — он есть и там, и там. */
html[data-theme] .bds-fgrouplbl {
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-right: 2px;
  white-space: nowrap;
  user-select: none;
}

/* Кнопки сортировки отличаем от фильтров: у активной — заливка акцентом,
   а не рамка, как у фильтров. */
html[data-theme] .bds-sortgrp .bds-chip.on {
  background: var(--signal-d);
  color: var(--signal-hi);
  border-color: transparent;
}

/* ==========================================================================
   ВСТРЕЧИ. В строке активной встречи стояли три одинаковые по весу кнопки,
   и единственной цветной была «Завершить» — то есть взгляд первым делом
   притягивало разрушающее действие. Выстраиваем иерархию: заметное только
   главное, разрушающее тихое и последнее.
   ========================================================================== */

html[data-theme] .meetp-btn {
  border-radius: var(--r, 5px);
}

/* Главное действие — войти во встречу */
html[data-theme] .meetp-btn-primary {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--on-signal);
  font-weight: 600;
}

html[data-theme] .meetp-btn-primary:hover {
  filter: brightness(1.06);
}

/* Разрушающее: обычная неброская кнопка, красный только при наведении —
   так его нельзя нажать мимоходом, но и не бросается в глаза постоянно. */
html[data-theme] .meetp-btn-quiet {
  color: var(--muted);
  border-color: var(--line);
}

html[data-theme] .meetp-btn-quiet:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-l);
}

/* ==========================================================================
   ЕДИНАЯ ТОЛЩИНА ШТРИХА У ИНЛАЙНОВЫХ ЗНАЧКОВ.

   Помимо общего набора (dot-icons.js) в приложении есть 89 значков, вписанных
   в разметку вручную. Нарисованы они в похожей манере, но толщина штриха
   гуляет: тринадцать разных значений от 1.2 до 2.4, чаще всего 1.9 и 2.
   Рядом это читается как разнобой — именно он и бросается в глаза.

   Геометрию мы не трогаем (это 89 разных путей), но вес приводим к общему.
   Эталон набора — 2 при сетке 24. Для значков в сетке 16 берём 1.35:
   тот же оптический вес, пересчитанный на меньшую систему координат.
   ========================================================================== */

html[data-theme] svg[stroke="currentColor"][viewBox="0 0 24 24"],
html[data-theme] svg[stroke="currentColor"][viewBox="0 0 24 24"] > * {
  stroke-width: 2;
}

html[data-theme] svg[stroke="currentColor"][viewBox="0 0 16 16"],
html[data-theme] svg[stroke="currentColor"][viewBox="0 0 16 16"] > * {
  stroke-width: 1.35;
}

/* Концы и стыки — скруглённые, как у общего набора. У 71 значка так уже было,
   у остальных отличалось и давало «острые» углы среди скруглённых. */
html[data-theme] svg[stroke="currentColor"] {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Вордмарк на совсем узких экранах */
@media (max-width: 360px) {
  html[data-theme] .brand h1 { font-size: 25px; }
}

/* ==========================================================================
   ЦВЕТНЫЕ ПОВЕРХНОСТИ ЗАДАЧ НА СВЕТЛОЙ ТЕМЕ.

   Полосы календаря и капсулы таймлайна рисуются градиентом из цвета задачи
   с прозрачностью 52-60% и подписываются БЕЛЫМ с тёмной тенью. На тёмном
   фоне такая заливка выходит насыщенной, и белое по ней читается. На белом
   фоне та же формула даёт пастель, и белая подпись пропадает: у капсулы
   таймлайна получалось 1.8:1, у полосы календаря — 1.7:1.

   На светлой теме меняем не формулу, а роли: заливка становится мягкой
   подложкой, а подпись — тёмной версией того же цвета (тот же приём, что у
   аватаров: цвет уводится к --ink и поэтому остаётся «своим», но читается).
   ========================================================================== */

html[data-theme="light"] .ave-root #tasks-pane .tk-bar,
html[data-theme="light"] #tasks-pane .tk-bar {
  background: linear-gradient(100deg,
      color-mix(in srgb, var(--bc) 26%, #fff),
      color-mix(in srgb, var(--bc) 15%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 34%, transparent);
  color: color-mix(in srgb, var(--bc) 42%, var(--ink));
}

html[data-theme="light"] .ave-root #tasks-pane .tk-bar:hover {
  background: linear-gradient(100deg,
      color-mix(in srgb, var(--bc) 36%, #fff),
      color-mix(in srgb, var(--bc) 22%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 48%, transparent);
}

html[data-theme="light"] .ave-root #tasks-pane .tk-tl3-pill {
  background: linear-gradient(100deg,
      color-mix(in srgb, var(--bc) 24%, #fff),
      color-mix(in srgb, var(--bc) 14%, #fff));
  border-color: color-mix(in srgb, var(--bc) 40%, transparent);
  color: color-mix(in srgb, var(--bc) 42%, var(--ink));
}

html[data-theme="light"] .ave-root #tasks-pane .tk-tl3-ttl {
  color: inherit;
  text-shadow: none;
}

/* Плашка приоритета на капсуле была «тёмным стеклом» с песочной подписью */
html[data-theme="light"] .ave-root #tasks-pane .tk-tl3-prio {
  background: color-mix(in srgb, #fff 78%, transparent);
  border-color: color-mix(in srgb, var(--bc) 40%, transparent);
  color: var(--ink-dim);
}

html[data-theme="light"] .ave-root #tasks-pane .tk-tl3-av {
  border-color: color-mix(in srgb, #fff 70%, transparent);
}

/* ==========================================================================
   АКЦЕНТНЫЙ ТЕКСТ НА АКЦЕНТНОЙ ПОДЛОЖКЕ.

   Приём «активная вкладка = цвет акцента по его же 12-процентной подложке»
   встречается по всему интерфейсу. Пока акцент был янтарным на тёмном, он
   давал 5:1. Синий по бледно-синему на белом — 3.9:1. Для этого случая есть
   --signal-hi: тот же тон, но на шаг темнее (на тёмной теме — на шаг светлее).
   ========================================================================== */

html[data-theme] .ave-root #tasks-pane .tk-tab.tk-on,
html[data-theme] .ave-root #tasks-pane .tk-typf.tk-typf-ic.tk-on,
html[data-theme] .bds-chip.on,
html[data-theme] .tk-qa-chip.tk-on,
html[data-theme] .self-meta,
html[data-theme] .tab.active {
  color: var(--signal-hi);
}

/* Плашка роли в подвале сайдбара: 8px по бледной подложке — самый мелкий
   текст интерфейса, ему нужен запас по контрасту. */
html[data-theme] .sidebar.ave-root .self-meta {
  color: var(--rc, var(--signal-hi));
  font-size: 8.5px;
}

/* ==========================================================================
   ВИДЕО: РАЗДЕЛ ПО ТЕМЕ, ОКНО РАЗБОРА — ВСЕГДА ТЁМНОЕ.

   Раздел «Видео» жил в собственной тёмной гамме с янтарным акцентом и рядом
   со светлым интерфейсом читался как чужое приложение. Локальные --vd-*
   теперь выводятся из токенов (см. video-ui.js), здесь остаётся то, что
   зависит от темы: «стеклянные» подложки на светлом фоне должны затемнять,
   а не осветлять.

   Окно разбора ролика оставлено тёмным сознательно: картинку судят на
   нейтральном тёмном окружении — так устроены и Frame.io, и монтажные
   программы; светлый фон вокруг кадра сбивает восприятие яркости и цвета.
   ========================================================================== */

html[data-theme="light"] .vd-win {
  --vd-g1: rgba(0, 0, 0, .035);
  --vd-g2: rgba(0, 0, 0, .05);
  --vd-g3: rgba(0, 0, 0, .08);
  --vd-g4: rgba(0, 0, 0, .11);
}

html[data-theme] .vd-rwin {
  --vd-panel:  #16181d;
  --vd-panel2: #1c1f26;
  --vd-line:   rgba(255, 255, 255, .12);
  --vd-ink:    #e9ebf0;
  --vd-dim:    #c3c8d2;
  --vd-mut:    #969ca8;
  --vd-acc:    #4dabf7;
  --vd-blue:   #4dabf7;
  --vd-red:    #ff6b4a;
  --vd-on-acc: #06263f;
  --vd-g1: rgba(255, 255, 255, .05);
  --vd-g2: rgba(255, 255, 255, .07);
  --vd-g3: rgba(255, 255, 255, .10);
  --vd-g4: rgba(255, 255, 255, .14);
  color-scheme: dark;
}

/* ==========================================================================
   ЦЕЛИ НАЖАТИЯ.

   Часть значков-кнопок нарисована в 16-18px и ровно столько же занимает на
   экране: шестерёнка проекта — 16x19, «плюс» в заголовке секции — 18x15.
   В такую кнопку надо целиться. Размер САМОГО значка не меняем (иначе поедет
   плотность списков) — расширяем область нажатия невидимой подложкой.
   ========================================================================== */

/* Только тем, кто стоит в потоке. Шестерёнке проекта и «…» на превью доски
   position не трогаем: они уже absolute со своими top/right, и подмена на
   relative увела бы их из угла карточки в поток строки. */
html[data-theme] .icon-btn,
html[data-theme] .tk-pgadd,
html[data-theme] .ch-cog,
html[data-theme] .tk-tog,
html[data-theme] .msg-reply,
html[data-theme] .msg-pin,
html[data-theme] .msg-edit,
html[data-theme] .msg-del,
html[data-theme] .react-add {
  position: relative;
}

html[data-theme] .icon-btn::after,
html[data-theme] .tk-pgadd::after,
html[data-theme] .tk-proj-gear::after,
html[data-theme] .ch-cog::after,
html[data-theme] .ave-rail-toggle::after,
html[data-theme] .tk-tog::after,
html[data-theme] .bds-menu-btn::after,
html[data-theme] .msg-reply::after,
html[data-theme] .msg-pin::after,
html[data-theme] .msg-edit::after,
html[data-theme] .msg-del::after,
html[data-theme] .react-add::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 28px);
  height: max(100%, 28px);
  transform: translate(-50%, -50%);
}

/* Чекбокс задачи — 17px. Это и цель нажатия, и главный жест списка. */
html[data-theme] .tk-chk {
  position: relative;
}

html[data-theme] .tk-chk::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   ФОКУС С КЛАВИАТУРЫ. Ни одна кнопка приложения не показывала, где находится
   фокус: обводку браузера гасили, своей не ставили. Работать с клавиатуры
   было нельзя. Кольцо рисуем только для :focus-visible — мышь его не увидит.
   ========================================================================== */

html[data-theme] :focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--r, 5px);
}

html[data-theme] input:focus-visible,
html[data-theme] textarea:focus-visible {
  outline-offset: 0;
}

/* ==========================================================================
   ТЕЛЕФОН: ПАЛЕЦ ШИРЕ КУРСОРА.

   Строки боковой панели рассчитаны на мышь — 30px в высоту. На телефоне та же
   панель выезжает ящиком, и по ней попадают пальцем: между «# продакшн» и
   «# релизы» промахнуться легко. Поднимаем только высоту строки, плотность
   десктопа не трогаем.
   ========================================================================== */

@media (max-width: 760px) {
  html[data-theme] #channel-list .ch,
  html[data-theme] .channels .ch,
  html[data-theme] .ave-navrow,
  html[data-theme] .tk-pghead,
  html[data-theme] .tk-projarch {
    min-height: 42px;
  }

  html[data-theme] .ch-cog,
  html[data-theme] .tk-proj-gear,
  html[data-theme] .icon-btn,
  html[data-theme] .tk-pgadd {
    min-width: 32px;
    min-height: 32px;
  }

  html[data-theme] .icon-btn::after,
  html[data-theme] .tk-pgadd::after,
  html[data-theme] .ch-cog::after,
  html[data-theme] .tk-tog::after,
  html[data-theme] .react-add::after,
  html[data-theme] .msg-reply::after,
  html[data-theme] .msg-pin::after,
  html[data-theme] .msg-edit::after,
  html[data-theme] .msg-del::after {
    width: max(100%, 40px);
    height: max(100%, 40px);
  }
}

/* ==========================================================================
   ПОСЛЕДНИЕ МЕЛОЧИ ПОСЛЕ ОБХОДА ЭКРАНОВ.
   ========================================================================== */

/* Восклицательный знак приоритета — красный по красной подложке (4.1:1) */
html[data-theme] .ave-priomark {
  color: var(--danger-ink, var(--danger));
}

/* LED-полоса «Связь» в подвале сайдбара светилась двойным ореолом: приём из
   игровых интерфейсов, и рядом со спокойными списками он бросался в глаза
   сильнее, чем что-либо на экране. Сегменты оставляем — это опознавательный
   знак приложения, — снимаем только свечение и чуть уменьшаем высоту. */
html[data-theme] .sidebar.ave-root .ave-sig-bar {
  height: 8px;
  gap: 3px;
}

html[data-theme] .sidebar.ave-root .ave-sig-bar span.on {
  box-shadow: none;
  background: color-mix(in srgb, var(--sig-c, var(--ok)) 82%, transparent);
}

/* Заглушка ролика без постера: значок был темнее собственного фона */
html[data-theme] .vd-noimg {
  color: color-mix(in srgb, var(--vd-ink, #e9ebf0) 40%, transparent);
}

/* Кнопка «Выйти» в подвале сайдбара: красный текст по красной подложке */
html[data-theme] .sidebar.ave-root .self-actions #btn-hangup {
  color: var(--danger-ink, var(--danger));
}

/* ==========================================================================
   ПЛАШКА ВОРДМАРКА НА ВХОДЕ. Знак лежал в «стеклянной» плашке: белые градиенты,
   янтарная грань и проезжающий блик — всё рассчитано на тёмный фон. На светлой
   теме от неё остаётся бледный прямоугольник вокруг названия, шире самого
   названия, и читается он как чужая рамка. Оставляем только сам знак.
   ========================================================================== */

html[data-theme] .auth-plate {
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding: 4px 0 0;
  justify-content: center;
}

html[data-theme] .auth-plate::before { content: none; }
html[data-theme] .auth-plate .brand-plate-sheen { display: none; }
html[data-theme] .auth-plate .brand-text { align-items: center; }