/* Звёздочка избранного. Одна форма в двух состояниях: контур - не отмечено,
   заливка - отмечено. Цвет заливки лаймовый, как у активного пункта меню, чтобы
   отметка читалась как «моё» и не спорила с сигнальными цветами таблицы, где
   зелёный и красный уже заняты доходностью. */
.fav-star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex: none;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--g300); cursor: pointer; line-height: 0;
  transition: color .12s ease, background-color .12s ease, transform .12s ease;
}
.fav-star:hover { color: var(--g500); background: var(--g100); }
.fav-star:active { transform: scale(.9); }
.fav-star:focus-visible { outline: 2px solid var(--blue, #2f6df0); outline-offset: 2px; }
.fav-star.on { color: var(--lime600, #b4dd33); }
.fav-star.on svg path { fill: var(--lime, #c8f048); stroke: var(--lime600, #b4dd33); }
.fav-star.on:hover { color: var(--lime600, #b4dd33); background: var(--lime-soft, #eef8c9); }

/* В таблице скринера звёздочка живёт в первой ячейке и не должна раздувать
   строку: там своя, ужатая. */
td .fav-star { width: 24px; height: 24px; }

/* Сообщение об отказе: короткое, внизу экрана, само уходит. Полноценный диалог
   ради «в избранном уже 20 бумаг» - это перебор. */
.fav-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  z-index: 200; max-width: min(420px, calc(100vw - 32px));
  padding: 11px 18px; border-radius: 11px;
  background: var(--tip-bg, #24262a); color: var(--tip-fg, #fff);
  font-family: 'Manrope', system-ui, sans-serif; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 12px 34px rgba(12, 12, 14, .3);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.fav-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Список избранного в кабинете. */
.fav-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.fav-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--g200); border-radius: 12px; background: var(--white);
}
.fav-item .fav-kind {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--g500); background: var(--g100); padding: 4px 8px; border-radius: 6px;
}
.fav-item a { min-width: 0; color: var(--ink); text-decoration: none; overflow: hidden; }
.fav-item a b { display: block; font-weight: 650; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fav-item a .fav-ref { display: block; margin-top: 2px;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--g500); }
.fav-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fav-empty { padding: 26px 0; color: var(--g500); font-size: 14px; line-height: 1.6; }
.fav-empty b { display: block; color: var(--ink); font-size: 15.5px; margin-bottom: 5px; }

/* Иконка избранного в шапке. Стоит вплотную к профилю, а не рядом с темой:
   тема и Телеграм - общие для всех, а избранное и аккаунт это «моё», их
   логично держать одной группой. Счётчик показывает, что список не пуст, -
   иначе о разделе легко забыть. */
.fav-nav{
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; border-radius: 100px;
  border: 1px solid var(--g200); background: var(--white); color: var(--g500);
  text-decoration: none; line-height: 0;
}
.fav-nav:hover{ color: var(--ink); border-color: var(--g300); }
.fav-nav:focus-visible{ outline: 2px solid var(--blue, #2f6df0); outline-offset: 2px; }
.fav-nav.is-here{ background: var(--lime); border-color: var(--lime); color: #0c0c0e; }
.fav-nav.has-items{ color: var(--lime600, #b4dd33); }
.fav-nav.is-here.has-items{ color: #0c0c0e; }
.fav-nav.has-items svg path{ fill: currentColor; }
.fav-nav .n{
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  display: none; align-items: center; justify-content: center;
  border-radius: 100px; background: var(--ink); color: var(--g50);
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; line-height: 1;
}
.fav-nav.has-items .n{ display: inline-flex; }
.fav-nav.is-here .n{ background: #0c0c0e; color: var(--lime); }
@media (max-width: 900px){ .fav-nav{ width: 34px; height: 34px; } }

/* Звёздочка у заголовка страницы или карточки. Стоит перед названием - отметить
   бумагу это действие про саму бумагу, поэтому кнопка живёт рядом с её именем,
   а не в ряду служебных кнопок справа. */
.fav-star.fav-title{
  width: 34px; height: 34px; margin-right: 4px; flex: none;
  align-self: center;
}
.fav-star.fav-title svg{ width: 22px; height: 22px; }
.bc-title .fav-star.bc-fav{ width: 30px; height: 30px; margin: 0 2px 0 0; align-self: center; }
.bc-title .fav-star.bc-fav svg{ width: 19px; height: 19px; }
@media (max-width: 700px){
  .fav-star.fav-title{ width: 28px; height: 28px; }
  .fav-star.fav-title svg{ width: 18px; height: 18px; }
}

/* Заголовок страницы - блочный элемент, поэтому кнопка перед ним оказывалась
   строкой выше. Держим пару в одной строке и выравниваем по базовой линии. */
.title-row{ display: flex; align-items: center; gap: 4px; min-width: 0; }
.title-row h1{ min-width: 0; }

/* Два варианта размещения в попапе. По умолчанию звёздочка идёт первой, до
   логотипа. Класс fav-after переносит её за название, оставляя ряд кнопок
   справа нетронутым. Отступы держим короткими: кнопка должна читаться как
   часть названия, а не как отдельный элемент. */
.bc-title{ gap: 8px; }
.bc-title .fav-star.bc-fav{ margin: 0; }
/* Вариант «после названия»: блок с названием растянут на всю ширину заголовка,
   поэтому кнопку в конце ряда уносило к правому краю - прижимаем её к тексту. */
.bc-title.fav-after .fav-star.bc-fav{ order: 3; margin-left: 4px; }
.bc-title.fav-after .bc-titles{ order: 2; flex: 0 1 auto; }

/* Заголовок страницы: звёздочка перед логотипом, отступы поджаты. */
/* align-self:center выше центрировал звёздочку по всей высоте блока - здесь она
   должна стоять на линии заголовка, рядом со знаком компании. */
.identity .fav-star.fav-title{
  order: -1; align-self: flex-start; margin: 3px 0 0 0;
  width: 32px; height: 32px;
}
.identity .fav-star.fav-title svg{ width: 21px; height: 21px; }
.title-row{ gap: 2px; }
.title-line{ gap: 6px; }
.title-line .fav-star.fav-title{ margin-right: 0; }