/*
  ДС — Кнопки. Единый источник правды для типов/состояний кнопок сайта.

  ПРАВИЛО (жёсткое, без исключений): ЛЮБАЯ новая кнопка на сайте берёт
  вид ТОЛЬКО отсюда — класс .btn + один --fill-* и (опционально) один
  --icon-*. Свой цвет/ховер/заливку/transition для кнопки в другом
  файле или в <style> страницы — ЗАПРЕЩЕНО, даже "только на этой одной
  странице" и даже "чуть-чуть иначе". Нужного типа нет — новый тип
  добавляется СЮДА (новый .btn--fill-* или .btn--icon-*), а не рядом с местом
  использования.

  Единственное, что стилями кнопки не является и правилом не
  ограничено — расположение самой кнопки на странице (позиционирование,
  отступы, ширина контейнера и т.п.), это по-прежнему живёт в файле
  страницы/секции.

  ГРАНИЦА КЛАССА: .btn — это ТОЛЬКО кликабельный контрол-действие
  (<button>, <a href> в роли действия, [role="button"]). Тег/бейдж/
  лейбл/чип/пилюля-статус и любой другой некликабельный или не
  вызывающий действие элемент — НЕ кнопка, даже если внешне похож
  (скругление 999px, паддинг, т.п.): для него свой отдельный класс
  (например .tag/.badge — заводится по факту первой необходимости,
  вне этого файла), .btn на него не вешать. И наоборот: если элемент
  кликабелен и запускает действие — это .btn, отдельный "почти как
  кнопка" класс под него заводить нельзя.

  Основные действия Главной и кнопка «Резюме PDF» используют .btn.
  Старые классы .mood-primary и .site-header__cta сохранены как хуки
  расположения, поведения и аналитики; визуальные стили задаются здесь.

  ─────────────────────────────────────────────────────────────────────
  ТИПЫ ЗАЛИВКИ (--fill, выбрать один) — реестр состояний с Главной:
  ─────────────────────────────────────────────────────────────────────
    .btn--fill-pink   основная чёрная (--btn-accent) с белым текстом
                      эталон: .mood-primary «Смотреть работы»
                      (components/site-chrome/site-chrome.css)

    .btn--fill-glass-round  матовое стекло в круглой форме: стрелка на
                      обложках ленты Главной (components/project-feed)

    .btn--fill-tile   та же чёрная праймари-заливка, но квадратная
                      плашка (форма .btn--fill-glass с постов), для
                      иконок-действий на карточках
                      эталон: стрелка колоды команды .case-team__hit
    .btn--fill-white  белая с тёмным текстом
                      эталон: .site-socials__link (иконки соцсетей в хедере)
                      (components/site-chrome/site-chrome.css)

    .btn--fill-ink    спокойная тёмная заливка.

    .btn--fill-segment пункт переключателя (Все/Mobile/Web) внутри
                      .btn-segmented: прозрачный, выбранный
                      [aria-pressed="true"] — белая «таблетка».

    .btn--fill-chip   тег-фильтр: серая плашка, выбранный
                      [aria-pressed="true"] — чёрный (--btn-accent).

    .btn--fill-bare   без заливки, цвет текста — стрелки прокрутки
                      строки тегов (components/chip-scroller).

    .btn--fill-nav    пункт меню сайта (Статьи/Посты) в хедере:
                      без заливки, только текст.

  Ховер (только десктоп): у залитых типов (pink/tile/white/ink/chip/glass/
  glass-ui) слева направо выезжает зелёно-жёлтый градиент
  (--btn-hover-gradient), текст становится тёмным. Остальные типы чуть
  снижают opacity (--btn-hover-opacity). .btn--fill-nav: под подписью
  выезжает линия.
  Открытый раздел (.btn[aria-current="page"]) — пульсирующая зелёная
  точка перед подписью, на любом типе заливки.

  ─────────────────────────────────────────────────────────────────────
  ТИПЫ РАСПОЛОЖЕНИЯ (--icon, выбрать один; можно не выбирать — тогда
  кнопка без иконки, только текст):
  ─────────────────────────────────────────────────────────────────────
    (нет класса)     только текст, без иконки
                      эталон: .site-socials__link

    .btn--icon-left  иконка слева от подписи
    .btn--icon-right иконка справа от подписи
                      эталон: .mood-primary «Смотреть работы»
                      (иконка icon--down справа от текста)

    .btn--icon-top   иконка над подписью, компактная пилюля-навигация
                      (общая фиксированная высота, как у остальных вариантов)
                      эталон: .site-header__cta «Резюме PDF» и пункты
                      футера .site-footer__link/.footer-menu-panel__link
                      (components/site-header/header.css, components/site-footer/footer.css — общая
                      заготовка «иконка сверху, подпись снизу»)

    .btn--icon-only  только иконка, без подписи, круглая форма
                      эталон: .site-socials__link (иконки соцсетей) и
                      .site-footer__top-btn/.site-footer__menu-btn
                      (кнопка «наверх»/«меню» — круглые иконки-кнопки)
                      Обязателен aria-label на самом элементе.

  Класс с иконкой не рисует иконку сам — внутрь кладём обычный
  <span class="icon icon--имя"> (components/icons/icons.css, currentColor),
  порядок в разметке неважен: --icon-left/right/top переставляют
  иконку через order, а не полагаются на порядок тегов.

  ─────────────────────────────────────────────────────────────────────
  ПРИМЕРЫ СОСТАВЛЕНИЯ НОВОЙ КНОПКИ:
  ─────────────────────────────────────────────────────────────────────
    <a class="btn btn--fill-pink btn--icon-right" href="…">
      <span>Текст</span>
      <span class="icon icon--arrow-right" aria-hidden="true"></span>
    </a>

    <button class="btn btn--fill-white" type="button">Текст без иконки</button>

    <button class="btn btn--fill-pink btn--icon-only" type="button" aria-label="Действие">
      <span class="icon icon--close" aria-hidden="true"></span>
    </button>

  Пресс-фидбэк (scale при active) уже даёт глобально styles/button-hover.css
  всем a[href]/button — здесь его дублировать не нужно.
*/



/* Единая высота для всех вариаций .btn, на всех брейкпоинтах. */
:root {
  --button-height: 44px;
  /* Кнопки — полностью скруглённые «таблетки», как переключатель на Главной. */
  --radius-control: 999px;
  --button-icon-size: 20px;
  --control-scroll-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.14), 0 14px 32px -8px rgba(0, 0, 0, 0.2);
  /* Основной цвет кнопок сайта. */
  --btn-accent: #111111;
  --btn-accent-text: #ffffff;
  /* Единственный ховер всех кнопок — лёгкое снижение прозрачности. */
  --btn-hover-opacity: 0.72;
  --btn-hover-duration: 0.15s;
}

.btn {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: var(--button-height);
  --icon-size: var(--button-icon-size);
  padding-inline: 16px;
  border: 0;
  border-radius: var(--radius-control);
  --hover-x: 50%;
  --hover-y: 50%;
  /* Текст кнопки — .text-button из typography.52055390d6e9.css (та же пара
     размер/трекинг и то же обычное начертание, что у основного текста),
     один и тот же на любой кнопке сайта, большой или маленькой. */
  font-family: var(--font-family-body, "IBM Plex Mono", ui-monospace, monospace);
  font-size: var(--font-size-text);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-text, -0.03em);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, opacity var(--btn-hover-duration) ease;
}

.btn .icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Общий ::before-глоу из button-hover.css кнопкам не нужен. ::before у
   отдельных типов занят под зону клика (--hit-area,
   --fill-sphere), заливок-псевдоэлементов больше нет. */
.btn::before {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  [data-action-hover]:hover .btn {
    opacity: var(--btn-hover-opacity);
  }
}

/* Desktop hover of filled buttons: a green→yellow gradient sweeps in from the
   left (instead of the opacity drop). Resting styles stay as they are; touch
   devices never see it. The gradient is a background layer of the button
   itself (background-size 0 → 100%), not a pseudo-element: one clip for both
   layers, so no sliver of the resting fill shows on the rounded edges. */
:root {
  --btn-hover-gradient: linear-gradient(to right, #0fd850 0%, #f9f047 100%);
  --btn-hover-gradient-text: #111111;
}
/* Логотип использует тот же проход градиента внутри SVG-маски. */
@media (hover: hover) and (pointer: fine) {
  .site-header__logo-mark {
    background-image: var(--btn-hover-gradient);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: background-size .5s ease;
  }
  .site-header__logo:hover .site-header__logo-mark {
    background-size: 100% 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header__logo-mark { transition: none; }
}
@media (hover: hover) and (pointer: fine) {
  .btn:is(.btn--fill-pink, .btn--fill-tile, .btn--fill-white, .btn--fill-ink, .btn--fill-chip, .btn--fill-glass, .btn--fill-glass-round, .btn--fill-glass-ui) {
    background-image: var(--btn-hover-gradient);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: transform 0.12s ease, color .3s ease, background-size .5s ease;
  }
  .btn:is(.btn--fill-pink, .btn--fill-tile, .btn--fill-white, .btn--fill-ink, .btn--fill-chip, .btn--fill-glass, .btn--fill-glass-round, .btn--fill-glass-ui):hover,
  [data-action-hover]:hover .btn:is(.btn--fill-pink, .btn--fill-tile, .btn--fill-white, .btn--fill-ink, .btn--fill-chip, .btn--fill-glass, .btn--fill-glass-round, .btn--fill-glass-ui) {
    opacity: 1;
    color: var(--btn-hover-gradient-text);
    background-size: 100% 100%;
  }
}

.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.btn:active {
  transform: scale(0.98);
}

/* ---------- Типы заливки ---------- */

.btn--fill-pink {
  background: var(--btn-accent);
  color: var(--btn-accent-text);
}

.btn--fill-white {
  background: #fff;
  color: #101014;
}

/* Frosted-glass square (cover action): the cover shows through heavily
   blurred under a light milky tint, no outline, dark glyph.
   Usage: .btn.btn--fill-glass.btn--icon-only[.btn--icon-diagonal-motion]. */
.btn--fill-glass {
  /* Square tile with softly rounded corners, not a pill. */
  border-radius: var(--radius-inner);
  background-color: rgb(255 255 255 / .62);
  color: #111111;
  -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.1);
  backdrop-filter: blur(18px) saturate(180%) brightness(1.1);
}

/* Round frosted glass (cover action on the home feed): the same recipe as
   .btn--fill-glass in the round shape of an icon-only button.
   Usage: .btn.btn--fill-glass-round.btn--icon-only[.btn--icon-diagonal-motion]. */
.btn--fill-glass-round {
  background-color: rgb(255 255 255 / .62);
  color: #111111;
  -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.1);
  backdrop-filter: blur(18px) saturate(180%) brightness(1.1);
}

/* Primary tile: the black primary fill in the square shape of the cover
   glass tile. Usage: .btn.btn--fill-tile.btn--icon-only. */
.btn--fill-tile {
  border-radius: var(--radius-inner);
  background: var(--btn-accent);
  color: var(--btn-accent-text);
}

/* Translucent glass for header/chrome controls over the light page with ink
   content. Usage: .btn.btn--fill-glass-ui with an optional .btn--icon-* layout.
   .btn--hover-accent is kept as a no-op hook on existing markup. */
:root { --btn-glass-ui-bg: color-mix(in srgb, #fff 60%, transparent); }
.btn--fill-glass-ui {
  background: var(--btn-glass-ui-bg);
  color: var(--color-ink);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}
@media (hover: none), (pointer: coarse) {
  .btn.btn--fill-glass-ui { background: var(--btn-glass-ui-bg); color: var(--color-ink); }
}

/* While the page loads the button is a plain skeleton: the sitewide grey
   fill, content hidden by page-loader.css. */
.is-page-loading .site-header__cta {
  background: var(--skeleton-color, #F3F4F6);
}

/* ---------- Типы расположения иконки ---------- */

.btn--icon-left .icon {
  order: -1;
}

.btn--icon-right .icon {
  order: 1;
}

.btn--icon-top {
  flex-direction: column;
  padding-block: 0;
  padding-inline: 12px;
  gap: 2px;
}

.btn--icon-top .icon {
  order: -1;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
}

.btn--icon-only {
  width: var(--button-height);
  height: var(--button-height);
  padding: 0;
  aspect-ratio: 1;
}

.btn--icon-only .icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Кнопки хедера используют ту же высоту, что и остальные действия. */
.btn--size-chrome {
  height: var(--button-height);
}
/* Подпись с иконкой справа: фиксированные внешние отступы. */
.btn--icon-right {
  padding-left: 16px;
  padding-right: 12px;
}
.btn--size-chrome.btn--icon-only {
  width: var(--button-height);
}

/* Мягкая объёмная тень плавающего действия после начала скролла. */
.btn--scroll-shadow {
  transition: transform 0.12s ease, opacity var(--btn-hover-duration) ease, box-shadow 0.25s ease;
}
/* Compact icon-only controls sit inside the header and need no shadow. */
html.chrome--pinned .btn--scroll-shadow:not(.btn--icon-only):not(.btn--fill-glass):not(.btn--fill-glass-round):not(.btn--fill-glass-ui) {
  box-shadow: var(--control-scroll-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition-duration: 0.01ms;
  }
}

.btn:disabled {
  pointer-events: none;
  opacity: 0.75;
  cursor: default;
}

/* Shared contact actions use the same DS height and fills. */
.contact-row.btn { justify-content: center; gap: 16px; }
/* Header sheets (Связаться, Меню): rows align left so icons form one column
   and every label starts on the same line; the current-section dot sits at
   the right edge of the row. */
.site-sheet .contact-row.btn { justify-content: flex-start; padding-inline: 24px; }
.site-sheet .contact-row.btn[aria-current="page"]::before {
  position: absolute;
  right: 24px;
  top: calc(50% - 3px);
}

/* Quiet dark fill for dismiss actions. Same shared height and icon dimensions.
   Usage: .btn.btn--fill-ink with an optional .btn--icon-* layout. */
.btn--fill-ink { background: var(--btn-accent); color: var(--btn-accent-text); }

/* Table-of-contents rows: theme-aware fill, current section highlighted.
   Usage: .btn.btn--fill-toc; retains the shared height and typography. */
.btn--fill-toc {
  justify-content: flex-start;
  padding-inline: 16px;
  border-radius: var(--radius-control);
  white-space: nowrap;
  text-align: left;
  background: transparent;
  color: var(--mood-ink);
}

/* .btn--fill-toc-trigger: primary mobile action; transparent desktop marker
   control, including hover/expanded states. Retains the shared hit height. */
.btn--fill-toc-trigger { background: var(--btn-accent); color: var(--btn-accent-text); }

/* Responsive contents trigger: list on mobile, section markers on desktop. */
.work-toc__bars, .work-toc__toggle .work-toc__close-icon { display: none; }
.work-toc__toggle[aria-expanded="true"] .work-toc__list-icon { display: none; }
.work-toc__toggle[aria-expanded="true"] .work-toc__close-icon { display: block; }
@media (min-width: 1101px) {
  .btn--fill-toc-trigger,
  .btn--fill-toc-trigger:hover,
  .btn--fill-toc-trigger:focus-visible,
  .btn--fill-toc-trigger:active {
    background: transparent;
    color: #3f3f46;
    box-shadow: none;
    transform: none;
  }
  .btn--fill-toc-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  .work-toc__toggle .work-toc__list-icon,
  .work-toc__toggle[aria-expanded="true"] .work-toc__close-icon { display: none; }
  .work-toc__toggle { overflow: visible; width: 80px; }
  .work-toc__bars { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 8px; padding-block: 10px; }
  .work-toc__bars span { flex-shrink: 0; transition: width .3s ease, height .3s ease, background-color .3s ease; }
  .work-toc__bars span { width: 36px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--color-ink) 22%, transparent); }
  .work-toc__bars span.is-current { width: 48px; height: 5px; background: var(--btn-accent); }
  .work-toc__toggle:hover .work-toc__bars span { width: 48px; }
}

/* Corner contents (.work-toc--corner): the desktop trigger stays the filled
   list button of the mobile layout instead of the marker rail. */
@media (min-width: 1101px) {
  .work-toc--corner .btn--fill-toc-trigger,
  .work-toc--corner .btn--fill-toc-trigger:hover,
  .work-toc--corner .btn--fill-toc-trigger:focus-visible,
  .work-toc--corner .btn--fill-toc-trigger:active {
    background: var(--btn-accent);
    color: var(--btn-accent-text);
  }
  .work-toc--corner .work-toc__toggle { overflow: hidden; }
  .work-toc--corner .work-toc__bars { display: none; }
  .work-toc--corner .work-toc__toggle .work-toc__list-icon { display: block; }
  .work-toc--corner .work-toc__toggle[aria-expanded="true"] .work-toc__list-icon { display: none; }
  .work-toc--corner .work-toc__toggle[aria-expanded="true"] .work-toc__close-icon { display: block; }
}

/* Current section uses the main button colour on both surfaces. */
.btn--fill-toc[aria-current="location"],
.work-toc-sheet .contact-row[aria-current="location"] {
  background: var(--btn-accent);
  color: var(--btn-accent-text);
}

@media (prefers-reduced-motion: reduce) {
  .work-toc__bars span { transition: none; }
}

/* Mobile contents: press feedback only, without persistent touch hover fills. */
@media (max-width: 1100px) {
  .work-toc__toggle:hover:not(:active),
  .work-toc-sheet .btn:hover:not(:active) { transform: none; }
  .work-toc__toggle:hover,
  .work-toc__toggle:focus-visible { color: var(--btn-accent-text); }
  .work-toc-sheet .btn--fill-white:not([aria-current]) { color: #101014; }
  .work-toc-sheet .btn--fill-pink { color: var(--btn-accent-text); }
  .work-toc__toggle:focus-visible,
  .work-toc-sheet .btn:focus-visible { outline: 2px solid var(--mood-ink); outline-offset: 3px; }
}

/* Site menu item (Статьи/Посты): unfilled text item on desktop, white row in
   the mobile menu sheet (.btn--fill-white next to it). The one type with its
   own hover by request: an underline slides in under the label instead of the
   opacity drop. The open section ([aria-current="page"], on any .btn) gets a
   small softly pulsing green dot before the label.
   Usage: <a class="btn btn--fill-nav" href="…" aria-current="page">Статьи</a> */
:root { --btn-nav-live: #22c55e; }
.btn--fill-nav {
  background: transparent;
  color: var(--color-ink);
}
.btn--fill-nav > span { position: relative; }
.btn--fill-nav > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .btn.btn--fill-nav:hover { opacity: 1; }
  .btn--fill-nav:hover > span::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}
.btn--fill-nav:focus-visible > span::after { transform: scaleX(1); }
.btn[aria-current="page"]::before {
  content: "";
  display: block;
  position: static;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--btn-nav-live);
  animation: btn-nav-live 2.4s ease-out infinite;
}
@keyframes btn-nav-live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--btn-nav-live) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--btn-nav-live) 0%, transparent); }
}
@media (hover: none), (pointer: coarse) {
  .btn.btn--fill-nav { background: transparent; color: var(--color-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .btn[aria-current="page"]::before { animation: none; }
  .btn--fill-nav > span::after { transition: none; }
}

/* White cover action, without shadow.
   Usage: .btn.btn--fill-white.btn--icon-only.btn--icon-diagonal-motion.
   The parent data-action-hover may coordinate the cover and button hover. */
.btn--icon-diagonal-motion { box-shadow: none; }

/* Text may wrap within the shared height when flanked by icon-only actions. */
.btn--label-wrap { white-space: normal; padding-inline: 16px; text-align: center; }
@media (max-width: 360px) {
  /* The header label shortens to «Резюме» instead of wrapping. */
  .site-header:has(.site-header__logo[hidden]) .site-header__cta {
    padding-inline: 16px;
  }
}

/* Touch devices keep their resting fill: only a brief press scale changes.
   Keyboard focus remains visible through an outline, without a touch hover latch. */
@media (hover: none), (pointer: coarse) {
  .btn:hover { transform: none; opacity: 1; }
  .btn:active, .btn.is-touch-pressed { transform: none; scale: .97; }
  .btn { transition: scale .16s ease-out; -webkit-tap-highlight-color: transparent; }
  .btn.btn--fill-pink { background: var(--btn-accent); color: var(--btn-accent-text); }
  .btn.btn--fill-tile { background: var(--btn-accent); color: var(--btn-accent-text); }
  .btn.btn--fill-white { background: #fff; color: #101014; }
  .btn.btn--fill-ink { background: var(--btn-accent); color: var(--btn-accent-text); }
  .btn.btn--fill-toc { background: transparent; color: var(--mood-ink); }
  .btn.btn--fill-toc[aria-current="location"] { background: var(--btn-accent); color: var(--btn-accent-text); }
  .btn:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
}
/* A tap or mouse click, including focus moved into/returned from a popover
   or modal by script, has no focus ring. Tab/keyboard navigation restores
   the existing :focus-visible styles. Text fields keep their native focus
   feedback. data-focus-input is set by site-chrome.js. */
html:not([data-focus-input="keyboard"]) :is(.btn, button, [role="button"], a[href]):focus,
html:not([data-focus-input="keyboard"]) :is(.btn, button, [role="button"], a[href]):focus::before {
  outline: none;
}


@media (prefers-reduced-motion: reduce) { .btn { transition-duration: .01ms; } }

/* Прозрачная кнопка-иконка без заливки и подписи — иконка цвета текста
   (напр. крестик закрытия полноэкранного просмотра: там текст светлый).
   Usage: .btn.btn--fill-plain.btn--icon-only, обязателен aria-label. */
.btn--fill-plain {
  background: transparent;
  color: var(--color-text);
}

/* Управляющие иконки-кнопки прямо поверх полноэкранного медиа (напр.
   стрелки полноэкранного просмотра): та же заливка, что и обычно.
   Usage: добавляется к существующему типу заливки, напр.
   .btn.btn--fill-white.btn--icon-only.btn--media-control. */
.btn--media-control:hover,
.btn--media-control:focus-visible {
  transform: none;
}

/* Gallery action requested at the height of one H2 line. This explicit size
   variant is the exception to the standard height; other buttons stay unchanged.
   --hit-* optionally extends the actual link hit area across its whole work.
   Use only on an actionable <a>/<button>, never a decorative badge. */
.btn--size-heading {
  --button-height: calc(var(--font-size-xl) * var(--line-height-heading));
  --icon-size: calc(var(--button-height) * .55);
  flex-shrink: 0;
}
.btn--hit-area { overflow: visible; }
.btn--hit-area::before {
  content: "";
  display: block;
  position: absolute;
  left: var(--hit-left, 0px);
  top: var(--hit-top, 0px);
  width: var(--hit-width, 100%);
  height: var(--hit-height, 100%);
  background: transparent;
  border-radius: 0;
  transform: none;
  pointer-events: auto;
}
/* Overflow must stay visible for the stretched hit area. */
.btn--hit-area:hover, .btn--hit-area:active { transform: none; scale: 1; }

/* Canvas sphere action: shared button height, circular hit area follows the art.
   Usage: .btn.btn--fill-sphere.btn--icon-only, with an aria-label. */
.btn.btn--fill-sphere {
  background: transparent;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  transition: none;
}
.btn--fill-sphere[hidden] { display: none; }
.btn--fill-sphere::before {
  content: '';
  display: block;
  position: absolute;
  left: 50%; top: 50%;
  width: var(--sphere-hit-size, 44px);
  height: var(--sphere-hit-size, 44px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
}
.btn.btn--fill-sphere:hover,
.btn.btn--fill-sphere:active,
.btn.btn--fill-sphere.is-touch-pressed { transform: none; scale: 1; background: transparent; }
.btn.btn--fill-sphere:focus-visible { outline: none; }
.btn.btn--fill-sphere:focus-visible::before { outline: 2px solid var(--color-text); outline-offset: 6px; }

/* Segmented switch (Mobbin-style platform filter). The grey track is part of
   the control, so it lives here; its position on the page does not.
   Usage: <div class="btn-segmented" role="group" aria-label="…">
            <button class="btn btn--fill-segment" aria-pressed="true">Все</button>…
          </div> */
.btn-segmented {
  /* Весь переключатель — той же высоты, что любая кнопка сайта;
     пункты вписаны внутрь подложки. */
  box-sizing: border-box;
  display: inline-flex;
  gap: 2px;
  height: var(--button-height);
  padding: 4px;
  border-radius: 999px;
  background: var(--color-surface-alt);
}
.btn-segmented > .btn--fill-segment { height: 100%; }
.btn--fill-segment {
  border-radius: 999px;
  padding-inline: 18px;
  background: transparent;
  color: var(--color-text-muted);
}
.btn--fill-segment[aria-pressed="true"] {
  background: #fff;
  color: var(--color-text);
}

/* Tag chip: toggles a filter. Usage: .btn.btn--fill-chip[aria-pressed]. */
.btn--fill-chip {
  flex: 0 0 auto;
  padding-inline: 14px;
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.btn--fill-chip[aria-pressed="true"] {
  background: var(--btn-accent);
  color: var(--btn-accent-text);
}
.btn--fill-chip:disabled { opacity: 0.35; }

/* Bare icon action on the page background (tag-row scroll arrows).
   Usage: .btn.btn--fill-bare.btn--icon-only, with an aria-label. */
.btn--fill-bare {
  background: transparent;
  color: var(--color-text);
}

/* Chrome over the home video banner (html.chrome--on-hero, set by
   components/hero-mood/hero-video.js while the header overlaps the footage):
   the primary header action turns white and menu items get white labels.
   Past the banner the class is removed and the regular dark fills return. */
.btn--size-chrome.btn--fill-nav {
  transition: transform 0.12s ease, opacity var(--btn-hover-duration) ease, color 0.25s ease;
}
/* Keeps the hover sweep timings (color, background-size) of the filled types. */
.btn--size-chrome.btn--fill-pink {
  transition: transform 0.12s ease, color .3s ease, background-size .5s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
html.chrome--on-hero .btn.btn--size-chrome.btn--fill-pink { background-color: #fff; color: #101014; }
html.chrome--on-hero .btn.btn--size-chrome.btn--fill-nav { color: #fff; }