/* Sprintup — своя графика, стиль C «Рывок» (выбран Лукашем 26.09.2026 с тремя вставками совета).
   Значки: <svg class="gi"><use href="/design/grafika.svg#c-…"/></svg> — рисунок в спрайте, здесь размеры и режимы.
   Переменные спрайта: --gsk наклон, --gs сдвиг следа, --gu/--guo цвет и плотность следа, --gsw толщина линии, --csp штрихи скорости.
   Вставки: 1) нажатая реакция — сплошная заливка цветом раздела, знак белый; 2) экраны работодателя (body.g-plain) — тот же рисунок прямо,
   без следа, линия плотнее; 3) нижнее меню — разные силуэты (две плиты, книга, круг, пузырь, фигура, вымпел), в меню без штрихов скорости. */

svg.gi { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; overflow: visible; --gs: 1.1px; --guo: .3; }
svg.gi.srv { --guo: 0; }                                   /* служебные знаки (стрелки, галочка, крестик, плюс) — без следа: не двоятся в мелком размере */
.icon-sq svg.gi, .tile-top svg.gi, .dir-big .ico svg.gi, .thumb svg.gi { --gs: 1.4px; }

/* ---- нижнее меню и боковая колонка: крупнее след, без штрихов скорости; активный — белый знак на цвете раздела ---- */
.nav .pill svg.gi, body.wide .side .pill svg.gi { width: 26px; height: 26px; --gs: 1.3px; --csp: 0; }
.nav a.tab.on .pill svg.gi, body.wide .side a.item.on .pill svg.gi { --gu: #FFFFFF; --guo: .32; }

/* ---- вставка 2: экраны работодателя — прямо, без следа, плотнее ---- */
body.g-plain .page svg.gi, body.g-plain .page svg.art { --gsk: none; --gska: none; --guo: 0; --gsw: 2.4; --csp: 0; }

/* ---- реакции ленты: свой знак 22 px, число рядом; вставка 1 — «нажато» сплошной заливкой цветом раздела ---- */
.react button svg.gi { width: 22px; height: 22px; }
.react button b { font-weight: 700; color: var(--ink); }
.react button.on, .react button[data-compact].on { background: var(--room); color: #FFFFFF; box-shadow: none; }
.react button.on b { color: #FFFFFF; }
.react button.on svg.gi { --gu: #FFFFFF; --guo: .34; }
.react a svg.gi { width: 20px; height: 20px; }

/* ---- пустые экраны: иллюстрация вместо значка в кружке ---- */
.empty .art { width: 184px; height: 125px; color: var(--ink-2); --acc: var(--signal-text); margin-bottom: var(--s-1); }
.calm.art-card { align-items: center; gap: 12px; padding: 10px 14px; }
.calm.art-card .art { width: 112px; height: 76px; flex: none; color: var(--ink-2); --acc: var(--signal-text); }
.calm.art-card b { display: block; font-size: 16.5px; color: var(--ink); }
.calm.art-card span { display: block; font-size: 13.5px; line-height: 1.35; margin-top: 2px; }

/* ---- аватар без фото: майка команды на плитке (не буква в кружке) ---- */
.avatar.jersey { border-radius: 30%; padding: 0; }
.avatar.jersey svg { width: 86%; height: 86%; display: block; }   /* % — от размера плитки (padding в % считался бы от ширины строки) */
.avatar.jersey.sm.grade { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--room); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avatar.jersey { --ava-lift: 36%; --ava-ink: #1B1C20; --ava-edge: rgba(255, 255, 255, .14); } }
:root[data-theme="dark"] .avatar.jersey { --ava-lift: 36%; --ava-ink: #1B1C20; --ava-edge: rgba(255, 255, 255, .14); }

/* ---- комната чата: значком на плитке цвета раздела (клуб — вымпел, направление — свой предмет) ---- */
.avatar.room-av { border-radius: 30%; background: var(--tint, var(--panel-2)); color: var(--signal-text, var(--ink)); }
.avatar.room-av svg.gi { width: 60%; height: 60%; --gs: 1.2px; }

/* ---- знак клуба без логотипа: вымпел цветом шапки ---- */
.logo-slot .pennant { width: 76%; height: 76%; display: block; color: var(--ink); --pen-cut: var(--panel-2); }
.room-head .logo-slot .pennant { color: #FFFFFF; --pen-cut: var(--room); }
.logo-slot:has(.pennant) { display: grid; place-items: center; }

/* ---- круг 2 критики ---- */
/* «спасибо» автору в ряду реакций: справа, словом и контуром; сказано — сердце залито цветом раздела, кнопка не заливается (это не реакция) */
.react button[data-compact] { margin-left: auto; background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--ink-2); gap: 6px; }
.react button[data-compact] svg.gi { width: 20px; height: 20px; --guo: 0; }
.react button[data-compact].on { background: transparent; color: var(--signal-text, var(--room)); box-shadow: none; }
.react button[data-compact].on svg.gi { --gu: currentColor; --guo: 1; --gs: 0px; }
/* точка «новое» на вкладке — в углу плитки, не на значке */
.nav a.tab.dot .pill::after { top: -3px; right: 1px; width: 10px; height: 10px; border-radius: 7px; border-width: 2px; }
.nav .nb, .side .nb { top: -7px; left: calc(50% + 12px); }
/* значок строки на экранах работодателя (документы, журналы, наборы): 20 px без плитки — список плотнее */
.row-ic { flex: none; display: inline-flex; margin-right: 2px; color: var(--ink-2); }
.row-ic svg.gi { width: 20px; height: 20px; }
.react a b { font-weight: 700; }
.react a { gap: 6px; }
/* ряд реакций в одну строку на 390: кнопки плотнее, «Спасибо ✓» компактно */
.react { gap: 5px; }
.react button, .react a { padding: 0 7px; }
.react button[data-compact] { padding: 0 6px; gap: 3px; font-size: 13px; min-width: 0; }
.react button[data-compact] svg.gi { width: 18px; height: 18px; }
.react button[data-compact] svg.gi.srv { width: 13px; height: 13px; }