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

  ПРАВИЛО (жёсткое, без исключений): ЛЮБАЯ новая кнопка на сайте берёт
  вид ТОЛЬКО отсюда — класс .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-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).

  Ховер у всех типов один: кнопка чуть снижает opacity
  (--btn-hover-opacity), без смены заливки/цвета, подъёма и прочих
  анимаций.

  ─────────────────────────────────────────────────────────────────────
  ТИПЫ РАСПОЛОЖЕНИЯ (--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.6a52afab6dfc.css (та же пара
     размер/трекинг и то же обычное начертание, что у основного текста),
     один и тот же на любой кнопке сайта, большой или маленькой. */
  font-family: var(--font-family-body, "IBM Plex Mono", ui-monospace, monospace);
  font-size: calc(var(--font-size-text) * .85);
  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-deck,
   --fill-sphere), заливок-псевдоэлементов больше нет. */
.btn::before {
  display: none;
}

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

.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;
}

/* Translucent glass square (cover action): a small grey-glass tile with a
   white glyph.
   Usage: .btn.btn--fill-glass.btn--icon-only[.btn--icon-diagonal-motion]. */
.btn--fill-glass {
  background: rgb(128 128 128 / .42);
  color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}

/* 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-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; }

/* 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; }
}

/* 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; }
}

/* 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-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; } }

/* Invisible deck action. The shared button height stays unchanged; the hit
   surface extends across the deck.
   Usage: .btn.btn--fill-deck; --control-surface-height follows deck height. */
.btn--fill-deck {
  overflow: visible;
  background: transparent;
  color: #14161a;
  padding: 0;
  border-radius: var(--radius-control);
  touch-action: manipulation;
}
.btn--fill-deck[hidden] { display: none; }
.btn--fill-deck::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 auto;
  height: var(--control-surface-height, 100%);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.btn--fill-deck:hover,
.btn--fill-deck:active { transform: none; scale: 1; }
.btn--fill-deck:focus-visible { outline: none; }
.btn--fill-deck:focus-visible::before {
  outline: 3px solid var(--mood-ink);
  outline-offset: 10px;
}

/* Прозрачная кнопка-иконка без заливки и подписи — иконка цвета текста
   (напр. крестик закрытия полноэкранного просмотра: там текст светлый).
   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);
}