/* pill.css — единая «пилюля»: выбираемый элемент управления в форме капсулы.
 *
 * До аудита 08.09 один и тот же объект был реализован пять раз независимо:
 *
 *   компонент    padding    рамка    радиус   насыщ.  min-height
 *   .chip        8 / 16     1.5px    full     500     нет (≈38px)
 *   .lib-chip    0 / 16     нет      full     600     38px
 *   .preset      8 / 20     1.5px    full     600     нет (44 под coarse)
 *   .seg         8 / 16     нет      full     500     44px
 *   .tag-chip    4 / 12     1px      full     400     нет (44 под coarse)
 *
 * Три толщины границы, три насыщенности, четыре разных паддинга и только два
 * компонента из пяти с гарантированной зоной касания. Ни одно из различий не
 * несло смысла — они накопились потому, что каждый экран верстался отдельно.
 * Теперь геометрия и состояния живут здесь, а страничные файлы задают только
 * то, чем компонент действительно отличается.
 *
 * Что в этот компонент НЕ вошло и почему:
 *   .badge  — не элемент управления, а подпись-статус («Pro», «6 дней»,
 *             остаток лимита). Не нажимается, не имеет выбранного состояния,
 *             мельче по кеглю. Общая капсульная форма — не повод сливать.
 *   .choice — карточка варианта в онбординге: во всю ширину, текст по левому
 *             краю, радиус md. Это не капсула, а строка выбора; загонять её
 *             в пилюлю значило бы ломать её же назначение.
 *
 * Варианты: --on (выбрано), --seg (сегмент внутри дорожки .segmented).
 */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Зона касания — из токена, а не из медиазапроса на каждый компонент. */
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: var(--clr-surface);
  color: var(--clr-text-2);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast),
    transform 220ms var(--ease-out-quart);
}

.pill:hover {
  border-color: var(--clr-primary);
  color: var(--clr-text-1);
}
/* Тач: :hover залипает после тапа до следующего касания. Гасим только сдвиг —
   подсветка цвета безобидна и помогает понять, куда попал палец. */
.pill:active { transform: scale(0.97); transition-duration: 90ms; }
@media (hover: none) {
  .pill:active { transform: none; }
}

/* Выбрано. Подпись — --clr-on-primary-light: сам бренд на бледной плашке даёт
   3.90:1 в светлой теме (разбор в design-tokens.css). */
.pill--on {
  background: var(--clr-primary-light);
  border-color: var(--clr-primary);
  color: var(--clr-on-primary-light);
  font-weight: var(--font-semi);
}
.pill--on:hover { color: var(--clr-on-primary-light); }

/* Недоступно — та же пара токенов, что у .btn и полей ввода. */
.pill:disabled,
.pill[aria-disabled="true"] {
  background: var(--clr-disabled-bg);
  color: var(--clr-disabled-fg);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Сегмент внутри дорожки .segmented ─────────────────────────────────────
   У сегмента своей рамки нет — её роль играет дорожка, а выбранный сегмент
   поднимается над ней поверхностью и тенью, а не брендовой заливкой: иначе
   в ряду из четырёх сегментов «включённый» читался бы как отдельная кнопка. */
.pill--seg {
  border-color: transparent;
  background: transparent;
  flex-shrink: 0;
}
.pill--seg:hover { border-color: transparent; }
.pill--seg.pill--on {
  background: var(--clr-surface);
  border-color: transparent;
  color: var(--clr-primary);
  box-shadow: var(--shadow-sm);
}

/* Дорожка сегментов. Переехала сюда из pages/stats.css: её используют три
   экрана (Статистика, Задачи, Админ), и место ей в компонентах. */
.segmented {
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  background: var(--clr-surface-2);
}
.segmented::-webkit-scrollbar { display: none; }

/* Затухание у кромки, за которой есть непоказанные сегменты.
   Полоса прокрутки здесь скрыта намеренно, и без этой подсказки обрезанный
   пункт выглядел просто как край панели: на 375px «Когда-нибудь» в Задачах
   терял 18px (clientWidth 342 при scrollWidth 363), и о том, что вправо есть
   ещё фильтр, не сообщало ничего. Атрибут ставит core/shell.js — «влезло или
   нет» это вопрос о размерах, а CSS его задать не может.
   Полоса 20px: достаточно, чтобы срез читался как «есть продолжение», и мало,
   чтобы съесть подпись целиком. */
.segmented[data-scroll-hint] { --seg-fade: 20px; }
.segmented[data-scroll-hint="end"] {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--seg-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--seg-fade)), transparent 100%);
}
.segmented[data-scroll-hint="start"] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--seg-fade), #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--seg-fade), #000 100%);
}
.segmented[data-scroll-hint="both"] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--seg-fade),
    #000 calc(100% - var(--seg-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--seg-fade),
    #000 calc(100% - var(--seg-fade)), transparent 100%);
}
/* Контрастная тема: режим включают ради читаемости, а затухание её снижает.
   Здесь подсказку даёт настоящая полоса прокрутки — она же надёжнее для
   тех, кто не пользуется свайпом. */
[data-theme="high-contrast"] .segmented[data-scroll-hint] {
  -webkit-mask-image: none;
          mask-image: none;
  scrollbar-width: thin;
}
[data-theme="high-contrast"] .segmented::-webkit-scrollbar {
  display: block;
  height: 6px;
}