/* Компоненты с полным набором состояний. Подключается после tokens/*.css (и brand/tokens.css).
   У каждого интерактивного элемента сразу есть: покой · наведение · нажатие · фокус с клавиатуры ·
   неактивное; где нужно — загрузка, выбранное, ошибка. Наведение — только там, где есть мышь.
   Классы .is-hover / .is-press / .is-focus — только для страницы компонентов, в вёрстке не нужны. */

.btn,.tile-link,.chip,.field,.link{transition:background-color var(--d-snap) var(--e-snap),
  border-color var(--d-snap) var(--e-snap),color var(--d-snap) var(--e-snap),transform var(--d-snap) var(--e-snap),
  box-shadow var(--d-snap) var(--e-snap)}

/* ---------- кнопка: светлая по умолчанию ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--btn-h);padding:var(--btn-pad);border:var(--bw) solid transparent;border-radius:var(--btn-r);
  background:var(--btn-bg);color:var(--btn-ink);font:500 16px/1.3 var(--font);text-decoration:none;cursor:pointer;
  box-shadow:var(--btn-shadow)}
.btn svg{width:20px;height:20px;flex:none}
@media (hover:hover){.btn:hover{background:var(--btn-bg-hover);transform:var(--hover-shift);box-shadow:var(--btn-shadow-hover)}}
.btn.is-hover{background:var(--btn-bg-hover);transform:var(--hover-shift);box-shadow:var(--btn-shadow-hover)}
.btn:active,.btn.is-press{background:var(--btn-bg-press);transform:var(--press-shift);box-shadow:var(--btn-shadow-press)}

/* акцентная — одна на экран, главное действие */
.btn--acc{background:var(--btn-acc-bg);color:var(--btn-acc-ink)}
@media (hover:hover){.btn--acc:hover{background:var(--btn-acc-bg-hover)}}
.btn--acc.is-hover{background:var(--btn-acc-bg-hover)}
.btn--acc:active,.btn--acc.is-press{background:var(--btn-acc-bg-press)}

/* второстепенная — контурная */
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ghost-border)}
@media (hover:hover){.btn--ghost:hover{background:var(--ghost-bg-hover);border-color:var(--slate-7)}}
.btn--ghost.is-hover{background:var(--ghost-bg-hover);border-color:var(--slate-7)}
.btn--ghost:active,.btn--ghost.is-press{background:var(--ghost-bg-press)}

/* неактивная: не реагирует на наведение и нажатие */
.btn:disabled,.btn[aria-disabled="true"]{background:var(--btn-disabled-bg);color:var(--btn-disabled-ink);
  border-color:transparent;cursor:not-allowed;transform:none}
/* загрузка: размер не меняется — текст остаётся, поверх точки */
.btn[aria-busy="true"]{cursor:progress;color:transparent;position:relative}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;
  color:var(--btn-ink);background:currentColor;box-shadow:-12px 0 currentColor,12px 0 currentColor;
  animation:btn-dots .9s var(--e-move) infinite alternate}
.btn--acc[aria-busy="true"]::after{color:var(--btn-acc-ink)}
@keyframes btn-dots{to{opacity:.35}}

/* ---------- текстовое действие: серое, при наведении — акцент ---------- */
.link{color:var(--ink2);text-decoration:none;cursor:pointer;background:none;border:0;padding:0;font:inherit}
@media (hover:hover){.link:hover{color:var(--acc-text)}}
.link.is-hover{color:var(--acc-text)}
.link:active,.link.is-press{color:var(--ink)}

/* ---------- плитка-ссылка: вся плитка кликабельна ---------- */
.tile-link{display:block;color:inherit;text-decoration:none;background:var(--tile-bg);
  -webkit-backdrop-filter:var(--tile-blur);backdrop-filter:var(--tile-blur);border:var(--bw) solid var(--tile-border);
  border-radius:var(--tile-r);box-shadow:var(--tile-highlight);padding:var(--tile-pad-block) var(--tile-pad)}
@media (hover:hover){.tile-link:hover{border-color:var(--tile-border-hover);box-shadow:var(--tile-highlight-hover);transform:var(--hover-shift)}}
.tile-link.is-hover{border-color:var(--tile-border-hover);box-shadow:var(--tile-highlight-hover);transform:var(--hover-shift)}
.tile-link:active,.tile-link.is-press{transform:var(--press-shift);box-shadow:var(--tile-highlight)}

/* ---------- чип / сегмент: выбор одного из нескольких ---------- */
.chip{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:var(--bw) solid var(--chip-border);border-radius:var(--chip-r);
  background:var(--chip-bg);color:var(--ink2);font:400 14px/1.4 var(--font);cursor:pointer}
@media (hover:hover){.chip:hover{background:var(--chip-bg-hover);color:var(--ink)}}
.chip.is-hover{background:var(--chip-bg-hover);color:var(--ink)}
.chip:active,.chip.is-press{background:var(--chip-bg-press)}
.chip:active,.chip.is-press{transform:scale(var(--press-scale))}
.chip[aria-pressed="true"],.chip[aria-selected="true"]{background:var(--chip-bg-on);color:var(--chip-ink-on)}
@media (hover:hover){.chip[aria-pressed="true"]:hover,.chip[aria-selected="true"]:hover{background:var(--chip-bg-on-hover)}}

/* ---------- поле ---------- */
.field{display:block;width:100%;min-height:48px;padding:12px 16px;border:var(--bw) solid var(--field-border);
  border-radius:var(--field-r);background:var(--field-bg);color:var(--ink);font:400 16px/1.5 var(--font)}
.field::placeholder{color:var(--ink3)}
@media (hover:hover){.field:hover{border-color:var(--field-border-hover)}}
.field.is-hover{border-color:var(--field-border-hover)}
.field:focus,.field.is-focus{outline:0;border-color:var(--field-border-focus);box-shadow:0 0 0 3px var(--field-ring)}
.field[aria-invalid="true"]{border-color:var(--field-error)}
.field:disabled{opacity:1;color:var(--ink3);background:var(--panel);cursor:not-allowed}
.field-error{margin-top:var(--sp-2);color:var(--danger);font:400 14px/1.4 var(--font)}

/* ---------- первый экран и заголовок: материал и характер задаёт стиль ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--hero-r);border:var(--hero-border);
  background:var(--hero-bg);box-shadow:var(--hero-shadow);color:var(--hero-ink)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--hero-pixels) 0 0/var(--pixel-step) var(--pixel-step) repeat;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 30% 40%,#000 20%,transparent 80%);
          mask-image:radial-gradient(ellipse 60% 70% at 30% 40%,#000 20%,transparent 80%)}
.h-display{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-wrap:balance}
.acc{color:var(--acc-text);font-style:var(--acc-style);font-family:var(--acc-font);background:var(--acc-bg)}

/* ---------- слой эффектов (components/fx.js): холст пиксельной заливки под текстом ---------- */
.btn,.tile-link{position:relative;isolation:isolate}
.btn{overflow:hidden}
.fx-fill{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.btn svg,.link svg,.tile-link svg{transition:transform var(--d-move) var(--e-move)}

/* ---------- фокус с клавиатуры — у всех, и никогда не убирается ---------- */
:is(.btn,.link,.tile-link,.chip):focus-visible,
:is(.btn,.link,.tile-link,.chip).is-focus{outline:2px solid var(--focus-ring);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .btn,.tile-link,.chip,.field,.link{transition:none}
  .btn:active,.tile-link:active{transform:none}
  .btn[aria-busy="true"]::after{animation:none}
}