@layer components {
  /* ---------- Кнопка ---------- */
  .btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-width: 0; max-width: 100%;
    /* height: auto обязателен: в legacy лежит .btn { height: 46px },
       из-за него маленькие .btn--sm были выше своего размера. */
    height: auto; min-height: var(--btn-h); padding: 0 18px;
    border: 1.5px solid transparent; border-radius: var(--r-full);
    /* Тень задают только варианты явно: иначе из legacy-слоя протекает
       цветная тень .btn и «Выйти» выглядит объёмнее остальных кнопок. */
    box-shadow: none;
    font: var(--fw-btn) var(--fs-btn)/1.2 var(--font-btn);
    text-align: center; cursor: pointer;
    -webkit-user-select: none; user-select: none;
    transition: transform var(--t-fast) var(--spring), background var(--t-base), border-color var(--t-base),
                color var(--t-base), box-shadow var(--t-base), filter var(--t-base);
  }
  .btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .btn:active:not(:disabled, [aria-disabled="true"]) { transform: scale(.96); }
  .btn:disabled:not([aria-busy="true"]), .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

  .btn--sm { min-height: var(--btn-h-sm); padding: 0 14px; font-size: var(--fs-s); }
  .btn--sm::before { content: ""; position: absolute; inset: -3px 0; }   /* зона касания 44px */
  .btn--md { min-height: var(--btn-h); padding: 0 18px; font-size: var(--fs-btn); }
  .btn--lg { min-height: var(--btn-h-lg); padding: 0 24px; font-size: var(--fs-m); }
  .btn--block { width: 100%; }

  /* Синяя кнопка = акцент PRIMER (как «Скопировать ссылку» / «+ Клиент»):
     светлая брендовая заливка, брендовая рамка и синий текст. */
  .btn--primary {
    border-color: color-mix(in srgb, var(--brand) 32%, transparent);
    background: var(--brand-soft);
    color: var(--c-blue-ink);
    box-shadow: var(--sh-btn);
  }
  .btn--primary .btn__icon { color: currentColor; }
  .btn--secondary { border-color: var(--line-strong); background: var(--surface); color: var(--text); box-shadow: var(--sh-btn); }
  .btn--secondary .btn__icon { color: var(--text-2); }
  .btn--tonal { border-color: color-mix(in srgb, var(--brand) 30%, transparent); background: var(--brand-soft); color: var(--c-blue-ink); }
  .btn--danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); color: var(--danger-ink); }
  .btn--danger-solid { background: var(--danger); color: #fff; box-shadow: 0 10px 24px -10px var(--danger); }
  .btn--glass { border-color: rgb(255 255 255 / .28); background: rgb(255 255 255 / .16); color: #fff; }

  @media (hover: hover) {
    .btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 18%, transparent); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
    .btn--secondary:hover:not(:disabled) { background: var(--surface-2); border-color: color-mix(in srgb, var(--text) 24%, transparent); }
    .btn--tonal:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 18%, transparent); }
    .btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 16%, transparent); }
    .btn--danger-solid:hover:not(:disabled) { filter: brightness(1.08); }
    .btn--glass:hover:not(:disabled) { background: rgb(255 255 255 / .26); }
  }

  /* Переключатель (например «В избранное»): цвет из --c, по умолчанию оранжевый */
  .btn[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--c, var(--c-orange)) 45%, transparent);
    background: color-mix(in srgb, var(--c, var(--c-orange)) 9%, var(--surface));
    color: var(--c-ink, var(--c-orange-ink));
  }
  .btn[aria-pressed="true"] .btn__icon { color: var(--c, var(--c-orange)); fill: currentColor; }

  /* Загрузка: ширина не меняется */
  .btn[aria-busy="true"] { pointer-events: none; }
  .btn[aria-busy="true"] > * { visibility: hidden; }
  .btn[aria-busy="true"]::after {
    content: ""; position: absolute; width: 18px; height: 18px;
    border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: spin .7s linear infinite;
  }

  /* Старая кнопка .sec-action осталась на части панелей: берёт ту же
     типографику и тот же акцент, что шаблонные .btn -- иначе сброс
     font:inherit делал её крупнее, а color:inherit — с тёмным текстом. */
  .sec-action { font: var(--fw-btn) var(--fs-s)/1.2 var(--font-btn); }
  .sec-action.is-accent {
    border-color: color-mix(in srgb, var(--brand) 32%, transparent);
    background: var(--brand-soft);
    color: var(--c-blue-ink);
  }
  .sec-action.is-accent .ico-s { color: currentColor; }

  /* ---------- Кнопка-иконка ---------- */
  .icon-btn {
    position: relative; flex: none;
    width: var(--tap); height: var(--tap);
    display: grid; place-items: center;
    border: 1.5px solid var(--line-strong); border-radius: var(--r-full);
    background: var(--surface); color: var(--text-2); box-shadow: var(--sh-btn);
    cursor: pointer;
    transition: transform var(--t-fast) var(--spring), background var(--t-base), color var(--t-base), border-color var(--t-base);
  }
  .icon-btn--sm { width: 40px; height: 40px; }
  .icon-btn--sm::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; }
  .icon-btn--md { width: var(--tap); height: var(--tap); }
  .icon-btn:active { transform: scale(.9); }
  .icon-btn--danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); color: var(--danger-ink); }
  .icon-btn--glass { width: 42px; height: 42px; border-color: rgb(255 255 255 / .24); background: rgb(255 255 255 / .14); color: #fff; box-shadow: none; }
  .icon-btn--glass::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; }
  @media (hover: hover) {
    .icon-btn--secondary:hover { color: var(--text); background: var(--surface-2); }
    .icon-btn--danger:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); }
    .icon-btn--glass:hover { background: rgb(255 255 255 / .26); }
  }

  /* ---------- Ряд кнопок ---------- */
  .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .btn-row > :is(.btn, form) { flex: 1 1 140px; }
  .btn-row > form { display: flex; }
  .btn-row > form > .btn { flex: 1; }

  /* Равные кнопки на узком экране: две колонки не вмещают подписи
     и текст обрезался («Перейти в кал…»). На телефоне — в столбик. */
  @media (max-width: 479.98px) {
    .btn-row-equal { flex-direction: column; align-items: stretch; }
    .btn-row-equal > .btn { flex: 0 0 auto; width: 100%; }
  }
}