/* ============================================================
   «Слово дня» — слой компонентов. Этап 2.

   Пять наборов из брифа §2: клетка поля, клавиша, кнопка, шапка
   окна, персонаж. Геометрия и состояния сняты с библиотечных
   компонентов Figma (get_design_context), а не с картинки:

     Клетка поля   10540:78107
     Клавиша       10540:78124
     Кнопка        10540:78145
     Шапка окна    10560:79116
     Персонаж      10761:4378

   Правило этапа: у компонента нет частных случаев в местах
   использования. Всё, что отличает один экран от другого, — это
   модификатор состояния, а не правка стиля по месту.

   Цвета берутся только из новой палитры. Ни одного литерала,
   кроме золота стеллы: чип библиотечный и по спеке не
   перекрашивается ни в одной теме.
   ============================================================ */

/* ===================== Клетка поля =====================
   База 60 × 60, радиус 16. На поле инстансы идут 66, в строке
   ответа на финале — 78. Размер меняется переменной --cell,
   буква остаётся 28 px: в макете текст растянут на всю клетку
   (STRETCH/STRETCH), поэтому от размера клетки не зависит. */

.cell {
  --cell: 60px;
  position: relative;
  box-sizing: border-box;
  width: var(--cell);
  height: var(--cell);
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 600;              /* DemiBold */
  line-height: 1;
  color: var(--ink);
  /* Звезда на revealed вылезает за угол на 7 px — не срезаем. */
  overflow: visible;
}

.cell--54 { --cell: 54px; }   /* разобранные примеры в «Правилах» */
.cell--66 { --cell: 66px; }
/* Клетка ответа на финале. Имя по назначению, а не по размеру: экран
   перестал быть двухэтажным, освободившееся место ушло результату, и
   клетка выросла с 78 до 96 (на таче с 52 до 54). Размер в имени
   пришлось бы менять вместе с макетом. */
.cell--answer { --cell: 96px; font-size: 40px; font-weight: 700; }

.cell--empty    { border: 1.5px solid var(--line); }
.cell--filled   { border: 2px solid var(--ink); }
.cell--focused  { border: 2.5px solid var(--ink); }
.cell--disabled { border: 1.5px solid var(--line-2); }

.cell--absent {
  border: 1.5px solid var(--status-absent-border);
  color: var(--status-absent-text);
}
.cell--present {
  background: var(--status-present);
  color: var(--ink);
}
.cell--correct {
  background: var(--status-correct);
  color: var(--ink);
}

/* Отгаданная подсказкой: пунктир + звезда в углу. Заливки нет —
   клетка не притворяется отгаданной своими силами. */
.cell--revealed { border: 2px dashed var(--ink); }

/* Появление проверенной буквы. Класс вешает app.js по одной клетке
   слева направо, с задержкой REVEAL_STEP_MS между ними.

   Раньше здесь был переворот вокруг горизонтальной оси — буква
   проворачивалась на 90° и обратно. Заменён на короткий подъём: клетка
   чуть вырастает и возвращается. Ряд читается волной, а не каруселью,
   и буква всё время остаётся буквой — при перевороте она в середине
   схлопывалась в линию.

   Цвет клетка получает в тот же миг, что и анимацию, а не в середине
   её: в перевороте смена краски пряталась за ребром, здесь прятать
   нечего и не надо.

   Подъём маленький намеренно. Клетка 66, зазор между клетками 8:
   на 1.07 она прибавляет по 2.3 с каждой стороны и до соседки не
   достаёт. Больше — и ряд начинает толкаться.

   ⚠️ Держится на transform, а не на width/height: те пересчитывают
   раскладку всей строки на каждом кадре. */
.reveal { animation: reveal-pop .32s cubic-bezier(.33, .9, .34, 1) both; }

@keyframes reveal-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* Каретка в клетке, куда сейчас печатают. Размер из макета: 2 × 28,
   по центру клетки любого размера (в макете так и в 66, и в 62).

   ⚠️ Обязательно вне потока. Клетка — grid с place-items: center, а
   буква лежит в своём span, который остаётся в разметке и пустым.
   Каретка рядом с ним становилась вторым рядом сетки; ряды тянутся на
   всю высоту клетки, и каретка съезжала на 8 px ниже центра. Абсолютное
   положение убирает её из раскладки: рядов снова один. */
.cell__caret {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 28px;
  background: var(--ink);
}

/* Значок статуса для режима «различать не только цветом».
   По умолчанию выключен: включается настройкой, а не экраном. */
.cell__mark {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
}

/* Золотая метка купленной буквы. Свисает за угол на 7 px —
   так задумано, поэтому у клетки overflow: visible. */
.cell__stella {
  position: absolute;
  top: -7px;
  right: -7px;
}

/* ===================== Клавиша =====================
   46 высотой, радиус 8, буква 19 px Bold. Ширина 51 у буквенной
   и 82 у «удалить».

   default — контур 1.5 line без заливки. Запись «line-2 — клавиши»
   в таблице токенов брифа §3 неточна: в компоненте заливки нет,
   есть обводка. Проверено по 10540:78124.

   absent — ни заливки, ни контура: отыгранная клавиша перестаёт
   быть кнопкой и остаётся следом. Именно это отличие должно
   считываться боковым зрением. */

.key {
  box-sizing: border-box;
  min-width: 51px;
  height: 46px;
  padding: 0 6px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  background: none;
  cursor: pointer;
}

.key--wide { min-width: 82px; }

.key--default { border-color: var(--line); }
.key--absent  { border-color: transparent; color: var(--status-absent-text); }
.key--present { background: var(--status-present); color: var(--ink); }
.key--correct { background: var(--status-correct); color: var(--ink); }

/* Тач: 25 × 44, зазор в ряду 3 (задаётся клавиатурой, не клавишей). */
.key--touch { min-width: 25px; height: 44px; padding: 0 2px; font-size: 17px; }
.key--touch.key--wide { min-width: 38px; }

/* ===================== Кнопка =====================
   Компонент дизайн-системы `Button` (§4 брифа). Своей формы у кнопки
   больше нет: капсула радиусом 24 заменена системным скруглением, и
   меняется оно только вместе с размером — в библиотеке радиус так и
   назван, «16 · 52-68 pt» и «12 · 44-48 pt».

   Два размера и два стиля — ровно те пять сочетаний, что стоят в
   макетах «Версии 2»: Primary Large (43 инстанса), Primary Large
   Disabled (11), Primary Medium (5), Primary Medium Disabled (5),
   Secondary Large (13). Tertiary, Icon Only и XLarge в макетах не
   встречаются, поэтому их здесь нет.

   Ширина не задаётся: в макетах кнопка либо тянется на всю ширину
   контейнера, либо обжимает подпись. Прежний min-width 200 был нашей
   выдумкой и держал габарит вопреки раскладке. */

.btn {
  box-sizing: border-box;
  height: 52px;
  padding: 0 24px;
  border: none;
  border-radius: var(--radius-l);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: .04px;
  cursor: pointer;
  transition: opacity .12s ease;
}

/* Medium 40: меньше высота — меньше радиус, отступы и зазор. */
.btn--md {
  height: 40px;
  padding: 0 16px;
  gap: 4px;
  border-radius: var(--radius-m);
}

/* На всю ширину контейнера — так кнопка стоит на большинстве экранов. */
.btn--block { width: 100%; }

.btn--primary {
  background: var(--btn-primary);
  color: var(--ink-inverse);
}

/* ⚠️ Серая заливка, а не контур. В системе у вторичной кнопки обводки
   нет вовсе, и это не вкусовая правка.

   Сюда же схлопнулся наш --quiet. Он был заведён ровно потому, что
   secondary был контурным и спорил с первичной кнопкой на победе
   гостя; теперь secondary сам и есть тихая серая заливка, и различать
   их больше нечем. Имя оставлено псевдонимом, чтобы не трогать app.js
   в этом этапе, — уйдёт вместе с разводкой экранов. */
.btn--secondary,
.btn--quiet {
  background: var(--btn-secondary);
  color: var(--ink);
}

.btn:hover:not(:disabled) { opacity: .85; }

/* Купленная смысловая подсказка использует зелёный цвет правильной буквы
   только для текста. Сама карточка остаётся белой, как до покупки. */
.hint-revealed {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

/* Зелёный текстовый, а не тот, которым залита клетка. --status-correct
   на бумаге даёт 1.96: он рассчитан на чёрную букву поверх себя, а не
   на роль цвета текста. §5.9 брифа помечает это как правку в код. */
.hint-revealed #open-hints,
.hint-bar.hint-revealed .hint-bar__line {
  color: var(--text-success);
}

/* Нажатие: кнопка слегка садится. */
.btn:active:not(:disabled) { transform: scale(.97); }

/* Кольцо фокуса. Обводки у кнопки больше нет, поэтому кольцо рисуется
   двумя тенями: тёмный контур вплотную и просвет цветом окна вокруг.
   Просвет взят paper, а не белым литералом, иначе в тёмной теме он
   светился бы белым на тёмном окне. */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--paper);
}

/* ⚠️ Неактивная кнопка читается плохо, и это цена перехода на систему.
   Text/Inverse Tertiary на Button/Primary Disabled даёт 1.6–1.9.
   Формально disabled освобождён от требований WCAG, но у нас это
   главная кнопка игры в самом частом состоянии — пока слово не
   набрано. Переопределять компонент локально нельзя; вопрос адресован
   владельцам системы (§9.5 брифа), и до ответа здесь стоит системное
   значение, а не наша самодеятельность. */
.btn:disabled,
.btn.is-disabled {
  cursor: default;
  opacity: 1;
}
.btn--primary:disabled,
.btn--primary.is-disabled {
  background: var(--btn-primary-disabled);
  color: var(--ink-inverse-3);
}
.btn--secondary:disabled,
.btn--secondary.is-disabled,
.btn--quiet:disabled,
.btn--quiet.is-disabled {
  background: var(--btn-secondary);
  color: var(--text-muted);
}

/* Кнопка внутри блока подсказок — не во всю ширину: полная ширина
   ставит её скругления вплотную к углам блока. */
.btn--cta { min-width: 220px; }

/* ===================== Шапка окна =====================
   Слева переходы, справа состояние и выход. Пустая обёртка
   header-left обязана оставаться даже на онбординге, где иконки
   скрыты: у space-between с одним ребёнком крестик уезжает влево. */

.win-header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left  { display: flex; align-items: center; gap: 12px; }
.header-icons { display: flex; gap: 4px; }
.header-right { display: flex; align-items: center; gap: 16px; }

/* Вход и профиль в левом углу шапки (§5.1). У гостя — тап-иконка с
   подписью «Войти», у вошедшего — аватарка с именем. Оба варианта
   собраны одной кнопкой: меняется содержимое, а не конструкция. */
.header-auth-wrap { position: relative; display: flex; }
.header-auth {
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--ink);
}
.header-auth__icon {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.header-auth__icon svg { width: 24px; height: 24px; display: block; }
.header-auth__label {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: .04px;
  color: var(--ink);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-auth:hover { opacity: .8; }

/* Меню профиля. В макетах его нет — там нарисована только точка входа,
   но выход должен откуда-то вызываться. */
.profile-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 160px;
  padding: 8px;
  border-radius: var(--radius-dropdown);
  background: var(--modal);
  box-shadow: var(--window-shadow);
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  cursor: pointer;
  /* Иконки разделов — третий уровень: это переходы, а не
     действия над игрой. Красятся через currentColor. */
  color: var(--text-muted);
}
.icon-btn--close { color: var(--ink); }

/* Компонент DS `Tap icon`: сама иконка всегда 24, меняется только
   контейнер — 44 / 40 / 32 по месту (§4 брифа). 32 остаётся базой
   шапки, 44 — тач-цель, 40 — промежуточный размер для плотных строк. */
.icon-btn--40 { width: 40px; height: 40px; }
.icon-btn svg { width: 24px; height: 24px; display: block; }

/* Тач: цель не меньше 44 — при 32 промах по иконке становится
   обычным делом. Сама иконка остаётся 24. */
.icon-btn--touch { width: 44px; height: 44px; }

.balance-pill {
  background: var(--line-2);
  border-radius: 999px;
  padding: 4px 4px 4px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Свечение чипа выходит за границы плашки — не срезаем. */
  overflow: visible;
}
.balance-pill__label {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--text-secondary);
}

/* Чип стеллы — библиотечный компонент. Золото одинаковое в обеих
   темах и по спеке не перекрашивается: ни заливки, ни обводки,
   никогда на тёмной плашке. Само золото — осознанное исключение из
   дизайн-системы и живёт в --stella-* (см. tokens.css). */
.stella-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 6px 4px 6px 8px;
  border: 1px solid var(--stella-line);
  border-radius: 16px;
  background: linear-gradient(to bottom, var(--stella-from), var(--stella-to));
  filter: drop-shadow(0 3px 2px var(--stella-glow));
}
.stella-chip::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .1);
  pointer-events: none;
}
.stella-chip__count {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: .04px;
  font-feature-settings: "lnum" 1, "pnum" 1;
  /* Белое число с градиентом — как в макете «Stella Balance».
     Решение Максима, принято сознательно и вопреки контрасту: 1.44
     сверху золота и 1.82 снизу. Читается оно на кегле, весе и нижней
     тени, а не на цвете, и чип целиком — фирменный знак, который в
     обеих темах выглядит одинаково.

     Пробовал тёмное (--ink): по числам 13.74 и 10.88, но чип
     переставал быть золотой меткой и становился обычной плашкой.

     Проверка в стенде это отступление видит и называет поимённо
     отдельной строкой — не молчит и не валит отчёт. */
  background: linear-gradient(to bottom,
              var(--stella-count-from) 22.5%, var(--stella-count-to) 82.5%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}
.stella-chip__icon { width: 20px; height: 20px; display: block; }

/* Золотая метка стеллы: цена в строке покупки, угол купленной клетки,
   значок в блоке про завтрашнюю стеллу. Символа ✦ в наборе нет нигде —
   только эта метка.

   ⚠️ Значок — это не один SVG. Сам знак состоит из золотой капсулы с
   градиентом, светлой обводкой и свечением, а SVG внутри неё — только
   белый глиф. Вставленный сам по себе, он почти невидим на светлом
   фоне: именно так выглядела ошибка в первой версии.

   Чип баланса в шапке рисует своё золото сам (.stella-chip), поэтому
   его внутренний значок остаётся голым глифом и сюда не входит. */
.stella-mark,
.cell__stella,
.daily-stella__icon {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--stella-line);
  border-radius: 10px;
  background: linear-gradient(to bottom, var(--stella-from), var(--stella-to));
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .1);
  filter: drop-shadow(0 3px 2px var(--stella-glow));
}
.stella-mark svg,
.cell__stella svg,
.daily-stella__icon svg { width: 16px; height: 16px; display: block; }

/* ===================== Персонаж =====================
   Набор из семи эмоций. Лицо одно: капсула 135 × 92 с обводкой 3
   ink и заливкой paper, меняются только глаза и рот. Векторы
   инлайнятся в документ, чтобы fill и stroke видели переменные
   темы — через <img> SVG остаётся отдельным документом и красится
   светлыми литералами даже в тёмной теме. */

.mascot {
  width: 135px;
  height: 92px;
  display: block;
  flex: none;
}
.mascot svg { width: 100%; height: 100%; display: block; }

.mascot--106 { width: 106px; height: 72px; }  /* свёрнутый блок подсказок */
.mascot--160 { width: 160px; height: 109px; } /* онбординг */
.mascot--54  { width: 54px;  height: 37px;  } /* тач, строка hint-bar */

/* Блок подсказок в свёрнутом виде. Во всех эмоциях конструкция
   одна: персонаж, одна строка, кнопка внизу. Меняется интонация,
   а не иерархия — поэтому эмоции безопасно добавлять.
   Без заливки, обводка 1.5 line: два серых блока подряд читались
   тяжело, а свёрнутый блок не должен весить наравне с очками. */
.hints-cta {
  box-sizing: border-box;
  width: 100%;
  height: 215px;
  padding: 12px 12px 20px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hints-cta__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.hints-cta__line {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
}

/* ===================== Сегментированный контрол =====================
   Компонент DS `Segmented Control`. Десктоп — веб-вариант 44, тач —
   мобильный 52 (в touch.css). Дорожка: радиус 16, отступ 4, зазор 4,
   заливка Segmented Control/Default. Сегмент: 36, радиус 12.

   ⚠️ И дорожка, и каждый сегмент растянуты на всю ширину. Без этого
   активный сегмент раздувается по своей подписи, а соседи обрезаются:
   «Статистика» шире «Рейтинга», и раскладка прыгает при переключении. */
.segmented {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 4px;
  border-radius: var(--radius-l);
  background: var(--segmented-bg);
  display: flex;
  gap: 4px;
  flex: none;
}
.segmented__item {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: var(--radius-m);
  background: none;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: .04px;
  color: var(--text-secondary);
  cursor: pointer;
}
.segmented__item.is-on {
  background: var(--segmented-active);
  color: var(--ink);
  font-weight: 600;
}

/* ===================== Аватар =====================
   Компонент DS `Avatar 🟡`, размер `L · 32`. Был круг 40 с буквой.
   Заглушка из инициала остаётся: у игрока может не быть фото, и
   тогда в круг встаёт первая буква имени, а не выдуманная картинка. */
.avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--line-2);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  color: var(--text-secondary);
}

/* ===================== Ячейка списка =====================
   Компонент DS `Cell`: три зоны — Left, Middle, Right. Имя `.cell`
   занято клеткой поля, поэтому здесь `.list-cell`.

   Три оговорки из §4 брифа, каждая меняет раскладку:

   1. Минимальная высота 64 заложена в компоненте. Строки рейтинга
      были 48.
   2. Правая зона красится в Text/Primary. В системе `Right/Type=Text`
      приглушённая мета, но в таблице лидеров очки приглушать нельзя —
      это вторая по важности величина после имени.
   3. Номер места живёт снаружи ячейки, отдельным элементом строки-
      обёртки, а у самой ячейки обнулены горизонтальные отступы, чтобы
      аватарка встала сразу за номером. */
.list-cell {
  box-sizing: border-box;
  min-height: 64px;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.list-cell__left { flex: none; display: flex; align-items: center; }
.list-cell__middle {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: .04px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-cell__right {
  flex: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ink);
}
.list-cell__check {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 20px;
  color: var(--ink);
}

/* ===================== Шапка шторки =====================
   Компонент DS `Navigation Bar`: высота 56, левая зона выключена,
   справа один `Tap icon` с крестиком. Заголовок центрируется по окну,
   а не по остатку строки, — слева стоит распорка шириной с крестик. */
.nav-bar {
  box-sizing: border-box;
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
}
.nav-bar__spacer { width: 44px; flex: none; }
.nav-bar__title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: .12px;
  color: var(--ink);
}

/* ===================== Снэкбар =====================
   Компонент DS `Snackbar` (§5.6 брифа). Сбой может случиться на любом
   экране, поэтому места в раскладке у него нет — плашка приходит
   поверх.

   Левая зона (таймер автоскрытия) выключена: торопить читать
   сообщение об ошибке незачем. Красного в снэкбаре нет — сбой
   обозначен местом и текстом, а не цветом.

   Десктоп: 420 в правом нижнем углу окна, 24 от низа и по правому
   полю. Тач — во всю ширину минус поля 16 (в touch.css). */
.snackbar {
  box-sizing: border-box;
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  width: 420px;
  max-width: calc(100% - 48px);
  min-height: 72px;
  padding: 16px 4px 16px 16px;
  border-radius: var(--radius-snackbar);
  background: var(--snackbar-bg);
  display: flex;
  align-items: center;
  gap: 12px;
}
.snackbar__text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: .04px;
  color: var(--snackbar-ink);
}
/* Действие — не .btn: у снэкбара своя тихая кнопка внутри инверсной
   плашки, залить её Button/Primary значило бы поставить тёмное на
   тёмное. Подпись того же инверсного цвета, отличается весом. */
.snackbar__action {
  flex: none;
  padding: 0 12px;
  height: 40px;
  border: none;
  border-radius: var(--radius-m);
  background: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--snackbar-ink);
  cursor: pointer;
}
.snackbar__action:hover { opacity: .8; }

/* ===================== Выпадающий список =====================
   Компонент DS `Dropdown` (§5.4 брифа, макет 21a): 240, правым краем по
   триггеру, 8 px ниже. Пункты — ячейки списка с заголовком, у выбранного
   в правой зоне галка. На таче вместо него нижняя шторка (M23). */
.dropdown {
  box-sizing: border-box;
  position: absolute;
  z-index: 30;
  width: 240px;
  /* Поля 6 сверху и снизу, по бокам их нет: ячейка идёт во всю ширину,
     её собственные 16 и держат отступ текста. */
  padding: 6px 0;
  border-radius: var(--radius-dropdown);
  background: var(--modal);
  box-shadow: var(--window-shadow);
}
/* Ячейка 40, а с галкой 44: высоту задаёт содержимое правой зоны
   (иконка 24 против строки 20) при одних и тех же полях 10/16. */
.dropdown__item {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: .04px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.dropdown__item:hover { background: var(--surface); }
.dropdown__item span { flex: 1; }
.dropdown__item i {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--ink);
}
/* Галка есть только у выбранного пункта. Место под неё не резервируем:
   в макете невыбранная ячейка на 4 ниже, а не с пустой правой зоной. */
.dropdown__item:not([aria-selected="true"]) i { display: none; }

/* ===================== Период рейтинга =====================
   Строка над списком (21 и M17): 24 высотой, триггер прижат вправо.
   Слева в макете пусто — там стоит пояснение под рейтингом. */
.period-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.period-row__note { margin: 0; flex: 1; }
.period-trigger {
  flex: none;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;              /* DemiBold */
  line-height: 20px;
  color: var(--ink);
  cursor: pointer;
}
.period-trigger__chevron {
  width: 24px;
  height: 24px;
  flex: none;
  display: block;
}
/* Список выпадает правым краем по триггеру и на 8 ниже него. Строка и
   триггер одной высоты, поэтому «под строкой» и «под триггером» — одно
   и то же место. */
.period-row .dropdown { top: calc(100% + 8px); right: 0; }