@layer components {
  /* Метка (.chip): методы в карточке случая, факты о методе */
  .chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }
  /* «Автор сайта и статей» — тёплая метка */
  .chip--sand { background: var(--sand); color: var(--sand-ink); }

  .chip-row { display: flex; flex-wrap: wrap; gap: var(--gap, 8px); }

  /* Фильтр (.filter): ссылки или кнопки; активный — aria-current, aria-pressed="true" или .is-active */
  .filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: 500 16px/1.2 var(--font);
    text-decoration: none;
    white-space: nowrap;
  }
  .filter-chip:hover { border-color: var(--accent); }
  .filter-chip[aria-current], .filter-chip[aria-pressed="true"], .filter-chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
}