@layer components {

/* PostPilot — общие компоненты новой дизайн-системы (задача 7).
 *
 * Классы намеренно с префиксом `.ui-`, чтобы не пересекаться с легаси
 * `.btn` / `.btn-primary` и т. п. из src/base.css (те продолжают жить в
 * старых экранах, пока их не заменят). Только токены из src/tokens.css —
 * 0 hex, 0 inline style (проверяется npm run check:ui).
 *
 * Кнопки (часть D): высота 32 / 40 / 48 (--control-h-*), скругление контрола
 * --r-control, главная — --primary (чёрная; на экране одна).
 */

/* ── Button ─────────────────────────────────────────────────────────── */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--u-2);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: var(--type-body-strong);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.ui-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.ui-btn:active {
  transform: translateY(0);
}

/* Размеры */
.ui-btn--sm {
  height: var(--control-h-sm);
  padding: 0 var(--u-3);
  font: var(--type-small-strong);
}
.ui-btn--md {
  height: var(--control-h);
  padding: 0 var(--u-4);
}
.ui-btn--lg {
  height: var(--control-h-lg);
  padding: 0 var(--u-5);
}

/* Варианты */
.ui-btn--primary {
  background: var(--primary);
  color: var(--primary-ink);
}
.ui-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.ui-btn--secondary {
  background: var(--surface);
  color: var(--ink-1);
  border-color: var(--line);
}
.ui-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--line-strong);
}

.ui-btn--ghost {
  background: transparent;
  color: var(--ink-2);
}
.ui-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--overlay);
  color: var(--ink);
}

.ui-btn--danger {
  background: var(--danger-soft);
  color: var(--danger);
}
.ui-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--danger);
  color: var(--accent-ink);
}

/* Отключено / загрузка — гасим целиком, без подъёма на ховере */
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.ui-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Спиннер загрузки — заменяет иконку. Статичное кольцо + анимация вращения,
   которую гасим для prefers-reduced-motion (см. ниже). */
.ui-btn__spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: .85;
  animation: ui-spin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ui-btn__spinner {
    animation: none;
    /* без вращения кольцо превращается в четверть-заливку — статичный,
       но всё ещё узнаваемый индикатор занятости. */
    opacity: .6;
  }
}

@keyframes ui-spin {
  to { transform: rotate(360deg); }
}

/* ── IconButton ─────────────────────────────────────────────────────── */

.ui-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.ui-iconbtn:hover:not(:disabled) {
  background: var(--overlay);
  color: var(--ink);
}

.ui-iconbtn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.ui-iconbtn--pressed {
  background: var(--accent-soft);
  color: var(--ink);
}

.ui-iconbtn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.ui-iconbtn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Иконки внутри задают собственный размер явным width/height (SVG `w`
     prop в src/icons.jsx, по умолчанию 18 — не в em), так что этот
     font сам по себе на них не влияет. */
  font: var(--type-subtitle);
  line-height: 0;
}

/* ── Badge ──────────────────────────────────────────────────────────── */
/* Язык меток экосистемы a1pro (ТЗ 3.4.2; @platform/tokens base.css .ui-badge):
   neutral — тег в волосяной рамке; ok/warn/danger — статус «точка + слово»
   без заливки; accent — мягкая подложка акцента. Состояние читается по слову,
   цвет только подкрепляет. Тоны ok/warn/danger — только для состояний, не для
   категорий (роли, количества — neutral/accent). */

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--u-1);
  height: 22px;
  padding: 0 var(--u-2);
  border-radius: var(--r-pill);
  font: var(--type-caption-strong);
  white-space: nowrap;
  background: transparent;
  color: var(--ink-2);
  box-shadow: var(--ring-hairline);
}

.ui-badge--ok,
.ui-badge--warn,
.ui-badge--danger {
  padding: 0;
  box-shadow: none;
}
.ui-badge--ok::before,
.ui-badge--warn::before,
.ui-badge--danger::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ui-badge--ok { color: var(--ok); }
.ui-badge--warn { color: var(--warn); }
.ui-badge--danger { color: var(--danger); }
.ui-badge--accent {
  background: var(--accent-soft);
  /* --accent-strong, не --accent: контраст на --accent-soft. */
  color: var(--accent-strong);
  box-shadow: none;
}

/* ── Table ──────────────────────────────────────────────────────────── */
/* Одна таблица на все экраны (главная, логи) — язык таблиц экосистемы a1pro
   (@platform/tokens .ui-table): мелкая шапка обычным регистром, под ней
   волосок --line-card, строки через --line-soft, числа справа табличными
   цифрами. Ховера строки нет: строки не кликабельны. Размеры — шкала ПостПилота. */
.ui-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-small);
  color: var(--ink-1);
}
.ui-table th {
  padding: var(--u-3) var(--u-4);
  text-align: left;
  font: var(--type-caption-strong);
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-card);
  white-space: nowrap;
}
.ui-table td {
  padding: var(--u-3) var(--u-4);
  border-bottom: 1px solid var(--line-soft);
}
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── PlatformIcon ───────────────────────────────────────────────────── */
/* Корень — сам <svg> (viewBox 0 0 100 100), поэтому размер задаётся через
   атрибуты width/height на элементе (в PlatformIcon.jsx) и работает для
   любого числа — снэпа к шагам больше нет. `color` здесь — для вложенного
   глифа (currentColor внутри brands.jsx), заливка круга — своим классом
   на самом <circle> (.ui-pf__circle--*), а не на корне. */

.ui-pf {
  display: block;
  color: var(--bg-2);
}

.ui-pf--vc { color: var(--p-vc-ink); }
.ui-pf--site { color: var(--bg-2); }

.ui-pf__circle--tg { fill: var(--p-tg); }
.ui-pf__circle--vk { fill: var(--p-vk); }
.ui-pf__circle--zen { fill: var(--p-zen); }
.ui-pf__circle--max { fill: var(--p-max); }
.ui-pf__circle--tenchat { fill: var(--p-tenchat); }
.ui-pf__circle--vc { fill: var(--p-vc); }
.ui-pf__circle--site { fill: var(--p-site); }

} /* @layer components */