/* ============================================================
   RE:ACTIVE — библиотека компонентов.
   Пишется вручную, но ТОЛЬКО через переменные из tokens.css.
   Каждый компонент описан во всех состояниях: покой, наведение,
   фокус с клавиатуры, нажатие, отключён, загрузка, пусто, ошибка.
   ============================================================ */

/* ---------- 1. Общее ---------- */

*,*::before,*::after{box-sizing:border-box}

:focus-visible{
  outline:2px solid var(--border-focus);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
/* На цветных заливках кольцо отделяется белой прослойкой, иначе его не видно. */
.btn:focus-visible,.chip:focus-visible,.tab:focus-visible,.icon-btn:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

.u-tabular{font-variant-numeric:tabular-nums}
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.u-stack{display:flex;flex-direction:column}
.u-row{display:flex;align-items:center}

/* ---------- 2. Кнопка ---------- */

.btn{
  --btn-bg:var(--action-secondary);
  --btn-ink:var(--ink-primary);
  --btn-border:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--size-control-md);
  padding:0 var(--space-4);
  border:1px solid var(--btn-border);
  border-radius:var(--radius-md);
  background:var(--btn-bg);
  color:var(--btn-ink);
  font:var(--font-weight-semibold) var(--font-size-sm)/1 var(--font-family-sans);
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--tr-fast),border-color var(--tr-fast),transform var(--tr-fast);
}
.btn svg{width:var(--size-icon-md);height:var(--size-icon-md);flex:none}
.btn:hover{--btn-bg:var(--action-secondary-hover)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{
  --btn-bg:var(--action-primary-disabled);
  --btn-ink:var(--ink-muted);
  cursor:not-allowed;transform:none;
}

.btn--primary{--btn-bg:var(--action-primary);--btn-ink:var(--ink-on-brand)}
.btn--primary:hover{--btn-bg:var(--action-primary-hover)}
.btn--primary:active{--btn-bg:var(--action-primary-active)}

.btn--ghost{--btn-bg:transparent;--btn-border:var(--border-default)}
.btn--ghost:hover{--btn-bg:var(--surface-sunken)}

.btn--danger{--btn-bg:var(--action-danger-bg);--btn-ink:var(--surface-card)}
.btn--danger:hover{--btn-bg:var(--action-danger-hover)}

.btn--sm{min-height:var(--size-control-sm);padding:0 var(--space-3);font-size:var(--font-size-xs)}
.btn--lg{min-height:var(--size-control-lg);padding:0 var(--space-5);font-size:var(--font-size-base)}

/* Кнопка в работе: текст остаётся на месте, добавляется точка-индикатор. */
.btn[data-loading="true"]{pointer-events:none;position:relative;color:transparent}
.btn[data-loading="true"]::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:var(--radius-full);
  border:2px solid currentColor;border-top-color:transparent;color:var(--btn-ink);
  animation:rx-spin 700ms linear infinite;
}
@keyframes rx-spin{to{transform:rotate(360deg)}}

/* Кнопка-иконка: палец должен попадать. */
.icon-btn{
  display:inline-grid;place-items:center;
  width:var(--size-control-md);height:var(--size-control-md);
  border:0;border-radius:var(--radius-md);background:transparent;color:var(--ink-secondary);
  cursor:pointer;transition:background var(--tr-fast),color var(--tr-fast);
}
.icon-btn:hover{background:var(--surface-sunken);color:var(--ink-primary)}
.icon-btn svg{width:var(--size-icon-md);height:var(--size-icon-md)}
@media (pointer:coarse){
  .icon-btn{width:var(--size-tap-min);height:var(--size-tap-min)}
}

/* ---------- 3. Поля ввода ---------- */

.field{display:flex;flex-direction:column;gap:var(--space-1)}
.field__label{
  font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);
  color:var(--ink-secondary);
}
.input,.select,.textarea{
  min-height:var(--size-control-md);
  padding:0 var(--space-3);
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  color:var(--ink-primary);
  font:var(--font-weight-regular) var(--font-size-sm)/1.4 var(--font-family-sans);
  transition:border-color var(--tr-fast),box-shadow var(--tr-fast);
}
.textarea{padding:var(--space-2) var(--space-3);min-height:96px;line-height:var(--font-leading-normal)}
.input::placeholder,.textarea::placeholder{color:var(--ink-muted)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--border-strong)}
.input[disabled],.select[disabled],.textarea[disabled]{
  background:var(--surface-sunken);color:var(--ink-muted);cursor:not-allowed;
}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{
  border-color:var(--action-danger-bg);
}
.field__error{
  display:flex;gap:var(--space-1);align-items:flex-start;
  font-size:var(--font-size-xs);color:var(--feedback-danger-text);
}
.field__hint{font-size:var(--font-size-xs);color:var(--ink-muted)}
/* На телефоне поля не мельче 16 px, иначе браузер увеличивает страницу сам. */
@media (max-width:900px){
  .input,.select,.textarea{font-size:var(--font-size-base)}
}

/* ---------- 4. Чип состояния ---------- */

.chip{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:2px var(--space-2);
  border-radius:var(--radius-full);
  font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);
  background:var(--surface-sunken);color:var(--ink-secondary);
  white-space:nowrap;
}
.chip--success{background:var(--feedback-success-bg);color:var(--feedback-success-text)}
.chip--warning{background:var(--feedback-warning-bg);color:var(--feedback-warning-text)}
.chip--danger{background:var(--feedback-danger-bg);color:var(--feedback-danger-text)}
.chip--info{background:var(--feedback-info-bg);color:var(--feedback-info-text)}
/* Цвет никогда не единственный признак: перед текстом идёт значок-точка нужной формы. */
.chip::before{
  content:"";width:6px;height:6px;border-radius:var(--radius-full);
  background:currentColor;flex:none;
}
.chip--plain::before{display:none}

/* ---------- 5. Карточка и заголовок раздела ---------- */

.card{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card__head{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-6);
  border-bottom:1px solid var(--border-subtle);
}
.card__title{
  margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);
  color:var(--ink-primary);letter-spacing:var(--font-tracking-normal);
}
.card__sub{font-size:var(--font-size-xs);color:var(--ink-muted)}
.card__body{padding:var(--space-6)}
.card__foot{
  padding:var(--space-3) var(--space-6);border-top:1px solid var(--border-subtle);
  color:var(--ink-muted);font-size:var(--font-size-xs);
}

/* ---------- 6. Ответ первым (правило «сначала вывод») ---------- */

.answer{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-5) var(--space-6);
  border:1px solid var(--border-subtle);
  border-left:4px solid var(--action-primary);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  box-shadow:var(--shadow-sm);
}
.answer__main{
  font-size:var(--font-size-lg);line-height:var(--font-leading-snug);
  font-weight:var(--font-weight-semibold);color:var(--ink-primary);
}
.answer__sub{font-size:var(--font-size-sm);color:var(--ink-secondary)}

/* ---------- 7. Таблица ---------- */

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}
.table th,.table td{
  padding:var(--space-3) var(--space-4);
  text-align:left;
  border-bottom:1px solid var(--border-subtle);
  line-height:var(--font-leading-snug);
}
.table thead th{
  position:sticky;top:0;z-index:1;
  background:var(--surface-card);
  font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);
  color:var(--ink-muted);text-transform:uppercase;letter-spacing:var(--font-tracking-wide);
  white-space:nowrap;
}
.table tbody tr{transition:background var(--tr-fast)}
.table tbody tr:hover{background:var(--surface-sunken)}
.table tbody tr[data-clickable]{cursor:pointer}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}
.table tbody tr:last-child td{border-bottom:0}
/* Заголовок-кнопка сортировки: видно, что по нему можно щёлкнуть. */
.table th button{
  display:inline-flex;align-items:center;gap:var(--space-1);
  background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;
  text-transform:inherit;letter-spacing:inherit;
}
.table th button:hover{color:var(--ink-primary)}
.table th[aria-sort="ascending"] button,.table th[aria-sort="descending"] button{color:var(--ink-brand)}
.table th .sort-mark{opacity:.45;font-size:9px}
.table th[aria-sort="ascending"] .sort-mark,
.table th[aria-sort="descending"] .sort-mark{opacity:1}

/* ---------- 8. Состояния данных: загрузка, пусто, ошибка ---------- */

.skeleton{
  background:linear-gradient(90deg,var(--surface-sunken) 25%,var(--surface-page) 37%,var(--surface-sunken) 63%);
  background-size:400% 100%;
  border-radius:var(--radius-sm);
  animation:rx-shine 1.4s ease infinite;
}
@keyframes rx-shine{0%{background-position:100% 0}100%{background-position:0 0}}
.skeleton--line{height:12px;margin:var(--space-2) 0}
.skeleton--row{height:var(--size-row);margin-bottom:var(--space-2);border-radius:var(--radius-sm)}
.skeleton--kpi{height:104px}
.skeleton--card{height:240px}

.state{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
  padding:var(--space-12) var(--space-6);text-align:center;
}
.state__icon{color:var(--ink-muted)}
.state__icon svg{width:32px;height:32px}
.state__title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--ink-primary)}
.state__text{font-size:var(--font-size-sm);color:var(--ink-secondary);max-width:44ch}
.state--error .state__icon{color:var(--feedback-danger-text)}

/* ---------- 9. Вкладки ---------- */

.tabs{
  display:inline-flex;gap:2px;padding:3px;
  background:var(--surface-sunken);border-radius:var(--radius-md);
}
.tab{
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:var(--space-2) var(--space-3);border-radius:calc(var(--radius-md) - 3px);
  font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--ink-secondary);
  transition:background var(--tr-fast),color var(--tr-fast);
  min-height:var(--size-control-sm);
}
.tab:hover{color:var(--ink-primary)}
.tab[aria-selected="true"]{background:var(--surface-card);color:var(--ink-primary);box-shadow:var(--shadow-sm)}

/* ---------- 10. Модальное окно ---------- */

.overlay{
  position:fixed;inset:0;z-index:var(--z-overlay);
  background:rgba(24,26,32,.42);
  display:grid;place-items:center;padding:var(--space-4);
  animation:rx-fade var(--tr-base);
}
@keyframes rx-fade{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;z-index:var(--z-modal);
  width:min(560px,100%);max-height:88vh;overflow:auto;
  background:var(--surface-card);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-modal);
  animation:rx-pop var(--tr-slow);
}
.modal--wide{width:min(880px,100%)}
@keyframes rx-pop{from{opacity:0;transform:translateY(var(--shift)) scale(.98)}to{opacity:1;transform:none}}
.modal__head{
  display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border-subtle);
}
.modal__title{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}
.modal__body{padding:var(--space-6)}
.modal__foot{
  display:flex;justify-content:flex-end;gap:var(--space-2);
  padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-subtle);
  background:var(--surface-page);border-radius:0 0 var(--radius-xl) var(--radius-xl);
}

/* ---------- 11. Уведомление с отменой ---------- */

.toasts{
  position:fixed;left:50%;bottom:var(--space-6);transform:translateX(-50%);
  z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-2);
  width:min(520px,calc(100vw - var(--space-8)));
}
.toast{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--surface-inverse);color:var(--ink-on-inverse);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  font-size:var(--font-size-sm);
  animation:rx-toast var(--tr-base);
}
@keyframes rx-toast{from{opacity:0;transform:translateY(var(--shift))}to{opacity:1;transform:none}}
.toast__text{flex:1}
.toast__action{
  appearance:none;border:0;background:transparent;cursor:pointer;
  color:var(--c-brand-300);font:var(--font-weight-semibold) var(--font-size-sm)/1 var(--font-family-sans);
  padding:var(--space-2);border-radius:var(--radius-sm);
}
.toast__action:hover{color:var(--surface-card);text-decoration:underline}
.toast--success{border-left:3px solid var(--c-success-400)}
.toast--danger{border-left:3px solid var(--c-danger-400)}

/* ---------- 12. Командная строка (Ctrl+K) ---------- */

.palette{
  position:fixed;inset:0;z-index:var(--z-palette);
  background:rgba(24,26,32,.42);display:flex;justify-content:center;
  padding-top:12vh;
}
.palette__box{
  width:min(600px,calc(100vw - var(--space-8)));height:max-content;max-height:70vh;
  display:flex;flex-direction:column;
  background:var(--surface-card);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-modal);overflow:hidden;
  animation:rx-pop var(--tr-base);
}
.palette__input{
  border:0;border-bottom:1px solid var(--border-subtle);
  padding:var(--space-4) var(--space-5);
  font-size:var(--font-size-base);color:var(--ink-primary);
}
.palette__input:focus{outline:none}
.palette__list{overflow-y:auto;padding:var(--space-2)}
.palette__item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  cursor:pointer;font-size:var(--font-size-sm);color:var(--ink-primary);
}
.palette__item[aria-selected="true"]{background:var(--surface-sunken)}
.palette__hint{margin-left:auto;font-size:var(--font-size-xs);color:var(--ink-muted)}
.palette__empty{padding:var(--space-6);text-align:center;color:var(--ink-muted);font-size:var(--font-size-sm)}

/* ---------- 13. Клавиша в подсказке ---------- */

.kbd{
  display:inline-block;min-width:20px;padding:1px var(--space-1);
  border:1px solid var(--border-default);border-bottom-width:2px;
  border-radius:var(--radius-sm);
  background:var(--surface-card);
  font:var(--font-weight-medium) 11px/1.5 var(--font-family-mono);
  color:var(--ink-secondary);text-align:center;
}

/* ---------- 14. Ссылка «к содержимому» ---------- */

.skip-link{
  position:absolute;left:var(--space-3);top:-60px;z-index:var(--z-palette);
  padding:var(--space-2) var(--space-4);
  background:var(--surface-card);color:var(--ink-primary);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  transition:top var(--tr-fast);
}
.skip-link:focus{top:var(--space-3)}

/* ---------- 15. Меньше движения ---------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;animation-iteration-count:1 !important;
    transition-duration:1ms !important;scroll-behavior:auto !important;
  }
  .skeleton{animation:none;background:var(--surface-sunken)}
}