/* 80-icons.css — единая 24px-сетка, оптические размеры и тихое движение. */

:root {
  --icon-stroke: 1.75;
  --icon-size-button: 20px;
  --icon-size-navigation: 16px;
  --icon-size-card: 20px;
}

/* Все 19 инлайновых SVG наследуют цвет и одну толщину штриха. */
:is(
  .brand-mark svg,
  .team-rail-space-chevron,
  #team-rail-toggle svg,
  .world-empty-icon svg,
  .account-chevron svg,
  #account-menu-close svg,
  #profile-settings svg,
  #profile-new-world svg,
  #team-rail-open svg,
  #studio-open .mode-icon,
  .work-surface-rail-chevron svg,
  .work-surface-rail-core svg,
  #work-surface-close svg
) {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

:is(
  .brand-mark svg,
  .team-rail-space-chevron,
  #team-rail-toggle svg,
  .world-empty-icon svg,
  .account-chevron svg,
  #account-menu-close svg,
  #profile-settings svg,
  #profile-new-world svg,
  #team-rail-open svg,
  #studio-open .mode-icon,
  .work-surface-rail-chevron svg,
  .work-surface-rail-core svg,
  #work-surface-close svg
) * {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* The collapsed rail mark is a filled two-colour monogram, not a stroked
   interface icon. Keep this after the shared SVG reset so it stays visible. */
#team-brand .team-rail-monogram .team-rail-monogram-t {
  fill: #101712;
  stroke: none;
}

#team-brand .team-rail-monogram .team-rail-monogram-n {
  fill: #10d94f;
  stroke: none;
}

/* Акцентные штрихи двухцветных иконок.
   Правило `:is(...) *` выше красит ВСЕХ потомков в currentColor и тем самым
   схлопывает двухцветные знаки в монохром, оставляя классы-крючки мёртвыми.
   Акцент нужен: он показывает, какой режим выбран. Возвращаем ему собственный
   цвет — но не бренд-зелёный #16d34f (на молоке это 2:1 при требуемых 3:1 для
   графики), а тёмно-зелёный из палитры текста.
   Специфичность важна: `:is(...) *` наследует вес самого тяжёлого аргумента
   списка, а там есть `#studio-open .mode-icon` — то есть (1,1,0). Простой класс
   (0,1,0) проигрывает, поэтому селекторы ниже повторяют предка. */
#studio-open .mode-icon .mode-icon-accent,
#studio-open .mode-icon .mode-icon-core,
#work-surface-rail .work-surface-rail-core .work-surface-rail-accent {
  stroke: var(--accent-text, #0d6547);
}

/* Кнопки: крупнее навигационного шеврона, но с воздухом внутри hit-area. */
#team-rail-toggle svg,
#team-rail-open svg,
#account-menu-close svg,
#work-surface-close svg {
  width: var(--icon-size-button);
  height: var(--icon-size-button);
  flex: 0 0 var(--icon-size-button);
}

/* Свёрнутый рельс: боевой app.css уменьшает иконку до 14px, но там селектор
   слабее нашего (#team-rail-toggle svg — это (1,0,1)), и состояние терялось:
   иконка занимала 77% кнопки вместо задуманных 54%. Повторяем состояние
   с большей специфичностью. */
.app-shell.team-rail-collapsed #team-rail-toggle svg,
.team-rail.collapsed #team-rail-toggle svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

/* Навигация: компактные указатели не конкурируют с подписями. */
.team-rail-space-chevron,
.account-chevron svg,
.work-surface-rail-chevron svg {
  width: var(--icon-size-navigation);
  height: var(--icon-size-navigation);
  flex: 0 0 var(--icon-size-navigation);
}

/* ШТРИХ У МЕЛКИХ ЗНАКОВ
   non-scaling-stroke держит 1.75 CSS-пикселя при ЛЮБОМ размере знака, и от
   этого самые мелкие иконки выглядят самыми жирными. Замер на живом стенде,
   доля штриха от ширины знака:

     #team-rail-toggle свёрнутый   14.0px   1.75   12.5%
     .work-surface-rail-chevron    16.0px   1.75   10.9%
     .surface-mode-icon            16.7px   1.75   10.5%
     .work-surface-rail-core       20.0px   1.75    8.8%
     #work-surface-close           20.0px   1.75    8.8%
     .brand-mark                   23.0px   1.75    7.6%

   Разброс в 1.6 раза — это заметно глазом на одном экране, где свёрнутый
   рельс стоит рядом с кнопками Холста. Постоянную абсолютную толщину не
   отменяем: она и даёт узнаваемую плотность набора. Опускаем её только
   у знаков 16px и мельче, чтобы вся система уложилась в полосу 7.6–10%
   вместо 7.6–12.5%. Ниже 1.25 не опускаемся: при округлении до физических
   пикселей более тонкий штрих начинает пропадать. */
.app-shell.team-rail-collapsed #team-rail-toggle svg,
.team-rail.collapsed #team-rail-toggle svg {
  --icon-stroke: 1.4;
}

.team-rail-space-chevron,
.account-chevron svg,
.work-surface-rail-chevron svg,
.surface-mode-icon {
  --icon-stroke: 1.5;
}

/* Keep the collapsed-rail brand mark optically balanced at its small size. */
.brand-mark.small svg {
  --icon-stroke: 1.3;
}

/* Карточки и режимы: один спокойный средний размер. */
.world-empty-icon svg,
#profile-settings > span:first-child svg,
#profile-new-world > span:first-child svg,
#profile-new-world > .profile-settings-arrow,
#profile-settings > .profile-settings-arrow,
#studio-open .mode-icon,
.work-surface-rail-core svg {
  width: var(--icon-size-card);
  height: var(--icon-size-card);
  flex: 0 0 var(--icon-size-card);
}

/* Лоадер: сам знак неподвижен, два эллипса идут встречными орбитами. */
.brand-mark {
  color: var(--milk);
}

.boot-mark {
  animation: none;
  box-shadow: none;
}

.boot-mark ellipse {
  transform-box: fill-box;
  transform-origin: center;
}

.boot-mark ellipse:first-child {
  animation: icon-boot-orbit-a 3.6s linear infinite;
}

.boot-mark ellipse:last-child {
  animation: icon-boot-orbit-b 3.6s linear infinite;
}

@keyframes icon-boot-orbit-a {
  from { transform: rotate(45deg); }
  to { transform: rotate(225deg); }
}

@keyframes icon-boot-orbit-b {
  from { transform: rotate(-45deg); }
  to { transform: rotate(-225deg); }
}

/* Орб агента едва меняет масштаб, без свечения и изменения прозрачности. */
.academy-agent-orb {
  box-shadow: none;
  filter: none;
  transform-origin: center;
  animation: icon-agent-breathe 4.2s ease-in-out infinite;
}

@keyframes icon-agent-breathe {
  0%, 100% { transform: scale(.98); }
  50% { transform: scale(1.02); }
}

/* Шевроны показывают состояние контролов; переход укладывается в 160ms. */
.account-chevron,
.team-rail-space-chevron,
.work-surface-rail-chevron,
#profile-settings .profile-settings-arrow,
#profile-new-world .profile-settings-arrow {
  transform-origin: center;
  transition: transform 160ms cubic-bezier(.2, 0, 0, 1);
}

.account-menu-toggle[aria-expanded="true"] .account-chevron,
.session-account.open .account-chevron,
.team-rail-space-trigger[aria-expanded="true"] .team-rail-space-chevron,
#work-surface-rail[aria-expanded="true"] .work-surface-rail-chevron,
.workbench.space-open #work-surface-rail .work-surface-rail-chevron {
  transform: rotate(180deg);
}

#profile-settings:hover .profile-settings-arrow {
  transform: none;
}

#profile-settings[aria-expanded="true"] .profile-settings-arrow,
#profile-settings.is-open .profile-settings-arrow,
#profile-settings.open .profile-settings-arrow {
  transform: rotate(90deg);
}

/* Короткий тактильный отклик отправки, без остаточного движения. */
#send {
  transition: transform 110ms ease-out;
}

#send:active:not(:disabled) {
  transform: scale(.94);
}

@media (prefers-reduced-motion: reduce) {
  .boot-mark,
  .boot-mark ellipse:first-child,
  .boot-mark ellipse:last-child,
  .academy-agent-orb {
    animation: none;
  }

  /* Снять анимацию мало. Выше на эллипсы задан transform-box: fill-box и
     transform-origin: center — они переносят точку вращения атрибута
     transform="rotate(45 12 12)" на центр собственной рамки, и без анимации,
     которая эту точку переопределяла, знак на экране загрузки разъезжается.
     Возвращаем поворот явно, уже в новой системе координат. */
  .boot-mark ellipse:first-child {
    transform: rotate(45deg);
  }

  .boot-mark ellipse:last-child {
    transform: rotate(-45deg);
  }

  .account-chevron,
  .team-rail-space-chevron,
  .work-surface-rail-chevron,
  #profile-settings .profile-settings-arrow,
  #profile-new-world .profile-settings-arrow,
  #send {
    transition: none;
  }

  .academy-agent-orb,
  #send:active:not(:disabled) {
    transform: none;
  }
}

/* ==================================================================
   РЕЖИМ ПРИНУДИТЕЛЬНЫХ ЦВЕТОВ
   Акцентный штрих выше — единственная краска в этом файле, заданная
   не через currentColor и не системным ключевым словом. Пользовательские
   свойства в forced-colors не подменяются, поэтому цвет остаётся своим:
   на чёрном системном холсте это 2.97:1 при требуемых 3:1 для графики
   (WCAG 1.4.11). Возвращаем системный цвет.

   Специфичность повторяет исходную, (1,2,0): правило из 50-a11y.css
   записано классами и до этого файла не достаёт. То же и для эллипсов
   загрузочного знака — их красит `:is(...) *` весом (1,1,0), и слабое
   правило слоя доступности проигрывало.

   ВАЖНО про вторую группу. Её первая версия была записана как
   `.brand-mark svg *` (0,1,1) и `.boot-mark *` (0,1,0) — то есть ЛЕГЧЕ, чем
   красящее правило `:is(…) *` весом (1,1,0), и проигрывала ему ровно так же,
   как проигрывал слой доступности. Комментарий выше это описывал, а селекторы
   не исправляли.

   Понизить вес источника через `:where()` нельзя: тогда знак бренда достаётся
   правилу `.brand-mark ellipse` из app.css:54 с белым штрихом тёмной темы,
   и на молоке знак исчезает совсем. Значит поднимаем вес правой стороны.

   Корневых контейнеров в разметке три — #boot, #login и #app, — и знак бренда
   стоит во всех: загрузочная шторка, обе формы входа, рельс и шапка. Поэтому
   перечислены все три, а не только #app.
   ================================================================== */

@media (forced-colors: active) {
  #studio-open .mode-icon .mode-icon-accent,
  #studio-open .mode-icon .mode-icon-core,
  #work-surface-rail .work-surface-rail-core .work-surface-rail-accent {
    stroke: CanvasText;
  }

  #boot .brand-mark svg *,
  #login .brand-mark svg *,
  #app .brand-mark svg *,
  #boot .boot-mark *,
  #boot .boot-mark svg * {
    stroke: CanvasText;
  }
}