/* Копия Logo.css и PillHeader.css дизайн-системы — капсула блога та же, что
   у лендинга (Кирилл 29.10: «один в один»). Руками не править: сторож
   BlogPillCopyTest сверяет файл с исходниками побайтно. */
/* Фирменный знак + опциональная подпись. Знак — квадратный webp на прозрачном,
   не растягивается; текст шрифтом --display наследует цвет контекста. */

.sd-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.sd-logo__mark {
  display: block;
  flex: none;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  /* Тонкий светлый ободок токеном --surface-dark-line: на тёмном рейле/капсуле
     (#0f1113) тёмная половина сферы почти сливалась с фоном, виден был
     только оранжевый центр (приёмка 26.09). Два наложенных drop-shadow тем же
     токеном, что уже держит границы стекла капсулы, дают мягкое свечение по
     контуру знака. На светлом полотне сам токен — белый почти нулевой
     прозрачности на белом же фоне, поэтому там знак не меняется вовсе. */
  filter:
    drop-shadow(0 0 1px var(--surface-dark-line))
    drop-shadow(0 0 3px var(--surface-dark-line));
}

.sd-logo__text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Плавающая капсула-шапка: тёмное стекло с blur, пилюли-ссылки,
   справа кнопка профиля. Паттерн лендинга «Среда управления». */

.sd-pill-wrap {
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  z-index: var(--z-menu);
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}

.sd-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 54px;
  padding: 0 8px 0 20px;
  background: var(--surface-dark);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--surface-dark-line);
  border-radius: 999px;
  box-shadow: var(--surface-dark-shadow);
  max-width: 100%;
}

/* Кольцо фокуса внутри капсулы. Общее правило (tokens.css) рисует его
   акцентом, но стекло капсулы (82% графита над светлым полотном) поднимает
   фон настолько, что акцент на нём даёт 2.48:1 при норме 3.0 для видимого
   фокуса: с клавиатуры не видно, где ты. Светлая ступень даёт 3.26. */
.sd-pill :focus-visible {
  outline-color: var(--acc-hover);
}

.sd-pill__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  color: var(--surface-dark-text);
  letter-spacing: -0.01em;
  margin-right: 8px;
  white-space: nowrap;
}

.sd-pill__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.sd-pill__link {
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  border: 0;
  background: none;
  color: var(--surface-dark-text-mute);
  font: 500 13px/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* Кабинет ужимает .sd-pill__nav как flex-элемент (CabinetLayout.css) —
     без flex-shrink: 0 пилюли сжимались вместе с ним у'же своего текста,
     и подложка активной пилюли выходила ниже текста, срезавшая букву
     справа («Управление» на 390, приёмка 22.09). Уступать место обязан
     сам nav через overflow: hidden, а не отдельная пилюля. */
  flex-shrink: 0;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

/* Тач-цель ≥44px при визуальной пилюле ~34px */
.sd-pill__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(100%, 44px);
  transform: translateY(-50%);
}

.sd-pill__link:hover {
  color: var(--surface-dark-text);
  background: var(--surface-dark-tint);
}

.sd-pill__link--on {
  color: var(--surface-dark-text);
  background: var(--surface-dark-tint-strong);
}

/* Слот перед кнопкой профиля (колокольчики уведомлений, волна-5) */
.sd-pill__extras {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  /* Капсула кабинета не должна наезжать на ссылки разделов: на 390 «Обучение»
     уходило под «ООО «Академия…». Даём ей сжиматься и обрезать своё
     содержимое, а не расти поверх соседа. */
  min-width: 0;
  flex-shrink: 1;
}

/* Узкий экран: ссылки разделов уступают место капсуле кабинета. Обе
   надписи целиком не влезают физически, а разделы у человека всегда под
   рукой в боковом меню — в шапке они дублируют его. */
@media (max-width: 560px) {
  .sd-pill__nav {
    display: none;
  }
}

/* Чернила на оранжевом — как у канонической кнопки действия; белый там не проходит контраст.
   text-decoration: none — тот же класс носит и <a> (profileHref в предпечати витрины),
   и без сброса ссылка приходит с подчёркиванием. */
.sd-pill__profile {
  position: relative;
  text-decoration: none;
  margin-left: 8px;
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--acc);
  color: var(--ink);
  font: 700 13px/1 var(--sans);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}

.sd-pill__profile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(100%, 44px);
  transform: translateY(-50%);
}

.sd-pill__profile:hover {
  background: var(--acc-hover);
}

/* Проседание при нажатии — только у настоящей кнопки. Подпись «кто вошёл»
   (--static) не действие, и продавливаться ей не от чего. */
.sd-pill__profile:not(.sd-pill__profile--static):active {
  transform: translateY(1px);
}

.sd-pill__profile svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Подпись «кто вошёл», не кнопка: без заливки акцентом, без курсора-пальца,
   не участвует в Tab-навигации — иначе пусто в консоли скринридера.
   :hover прописан отдельно и своим классом: у базового
   .sd-pill__profile:hover специфичность (0,2,0) против (0,1,0) у --static,
   и он побеждал — подпись вспыхивала оранжевым при наведении мышью, хотя
   это не кнопка. Поймано Кириллом на шапке админки 18.08. */
.sd-pill__profile--static {
  background: var(--surface-dark-hover);
  border: 1px solid var(--surface-dark-line);
  color: var(--surface-dark-text);
  cursor: default;
}

.sd-pill__profile--static:hover {
  background: var(--surface-dark-hover);
  border-color: var(--surface-dark-line);
  color: var(--surface-dark-text);
}

/* Палец вместо мыши: пилюли-ссылки визуально 32 px. Зона нажатия у них
   и раньше была 44 (::after), но целиться в невидимое неудобно — на
   грубом указателе растёт и сама пилюля. */
@media (pointer: coarse), (max-width: 560px) {
  .sd-pill__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }
}