/* Примітиви дизайн-системи. Перша хвиля.
 *
 * ЄДИНИЙ КОНТРАКТ АКЦЕНТУ, заради якого палітру виводили на 20/20 AA:
 *
 *     background: var(--kp-accent);
 *     color:      var(--kp-on-accent);
 *
 * Жодного зашитого білого переднього плану і жодного винятку виду
 * `if (accent === sage && scheme === light)`. `--kp-on-accent` обчислюється за
 * контрастом WCAG у `AppearanceCatalog::onAccent()`, тож кожна з двадцяти
 * комбінацій акцент×схема тримає AA ≥ 4.5:1.
 *
 * Жодних сирих значень: усі кольори, відступи, радіуси, тіні, тривалості —
 * з `--kp-*`. Замкненість словника стереже `bin/probe_token_closure.php`.
 */

/* ── Button ───────────────────────────────────────────────────────────── */
.kp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--kp-space-2);
  padding: var(--kp-space-2) var(--kp-space-4);
  border: 1px solid transparent;
  border-radius: var(--kp-radius-md);
  font: var(--kp-weight-medium) var(--kp-text-sm) / var(--kp-leading-normal) var(--kp-font-body);
  cursor: pointer;
  transition: background var(--kp-motion-fast) var(--kp-ease-standard);
}

.kp-btn--primary { background: var(--kp-accent); color: var(--kp-on-accent); }
.kp-btn--secondary {
  background: var(--kp-color-surface-raised);
  color: var(--kp-color-text);
  border-color: var(--kp-color-border);
}
.kp-btn--ghost { background: transparent; color: var(--kp-color-text-muted); }
.kp-btn--danger { background: var(--kp-color-danger); color: var(--kp-color-on-danger); }

.kp-btn:focus-visible {
  outline: 2px solid var(--kp-color-focus-ring);
  outline-offset: 2px;
}
.kp-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.kp-icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: var(--kp-space-7);
  block-size: var(--kp-space-7);
  border: 0;
  border-radius: var(--kp-radius-pill);
  background: transparent;
  color: var(--kp-color-text-muted);
  cursor: pointer;
}
.kp-icon-btn:hover { background: var(--kp-color-surface-muted); color: var(--kp-color-text); }

/* ── Input / Textarea / Select ─────────────────────────────────────────── */
.kp-field { display: flex; flex-direction: column; gap: var(--kp-space-1); }
.kp-field__label {
  font: var(--kp-weight-medium) var(--kp-text-sm) / var(--kp-leading-normal) var(--kp-font-body);
  color: var(--kp-color-text-muted);
}
.kp-input, .kp-textarea, .kp-select {
  padding: var(--kp-space-2) var(--kp-space-3);
  border: 1px solid var(--kp-color-control-border);
  border-radius: var(--kp-radius-sm);
  background: var(--kp-color-surface);
  color: var(--kp-color-text);
  font: var(--kp-weight-normal) var(--kp-text-md) / var(--kp-leading-normal) var(--kp-font-body);
}
.kp-input:focus-visible, .kp-textarea:focus-visible, .kp-select:focus-visible {
  outline: 2px solid var(--kp-color-focus-ring);
  outline-offset: 1px;
}
.kp-field__error {
  font-size: var(--kp-text-xs);
  color: var(--kp-color-danger);
}

/* ── Card / Surface ───────────────────────────────────────────────────── */
.kp-card {
  padding: var(--kp-space-5);
  border: 1px solid var(--kp-color-border);
  border-radius: var(--kp-radius-lg);
  background: var(--kp-color-surface);
  box-shadow: var(--kp-shadow-sm);
}
.kp-card--raised { background: var(--kp-color-surface-raised); box-shadow: var(--kp-shadow-md); }
.kp-card__title {
  font: var(--kp-weight-bold) var(--kp-text-lg) / var(--kp-leading-tight) var(--kp-font-display);
  color: var(--kp-color-text);
}

/* ── Badge / StatusBadge ──────────────────────────────────────────────── */
.kp-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--kp-space-1) var(--kp-space-3);
  border-radius: var(--kp-radius-pill);
  font-size: var(--kp-text-xs);
  background: var(--kp-color-surface-muted);
  color: var(--kp-color-text-muted);
}
.kp-badge--accent  { background: var(--kp-accent);         color: var(--kp-on-accent); }
.kp-badge--success { background: var(--kp-color-success);  color: var(--kp-color-on-success); }
.kp-badge--warning { background: var(--kp-color-warning);  color: var(--kp-color-on-warning); }
.kp-badge--danger  { background: var(--kp-color-danger);   color: var(--kp-color-on-danger); }
.kp-badge--info    { background: var(--kp-color-info);     color: var(--kp-color-on-info); }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.kp-tabs { display: flex; gap: var(--kp-space-1); border-block-end: 1px solid var(--kp-color-border); }
.kp-tabs__tab {
  padding: var(--kp-space-2) var(--kp-space-4);
  border: 0;
  background: transparent;
  color: var(--kp-color-text-muted);
  border-block-end: 2px solid transparent;
  cursor: pointer;
}
.kp-tabs__tab[aria-selected="true"] {
  color: var(--kp-color-text);
  border-block-end-color: var(--kp-accent);
}

/* ── Modal / Drawer ───────────────────────────────────────────────────── */
.kp-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--kp-z-modal);
  background: var(--kp-color-scrim);
  display: grid;
  place-items: center;
}
.kp-modal__panel {
  inline-size: min(100% - var(--kp-space-6), var(--kp-layout-content-max));
  padding: var(--kp-space-6);
  border-radius: var(--kp-radius-xl);
  background: var(--kp-color-surface-raised);
  box-shadow: var(--kp-shadow-overlay);
}
.kp-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--kp-z-modal);
  inline-size: min(100%, var(--kp-layout-content-max));
  background: var(--kp-color-surface-raised);
  box-shadow: var(--kp-shadow-overlay);
}

/* ── Table / DataRow ──────────────────────────────────────────────────── */
.kp-table { inline-size: 100%; border-collapse: collapse; }
.kp-table th, .kp-table td {
  padding: var(--kp-space-3);
  border-block-end: 1px solid var(--kp-color-border);
  text-align: start;
}
.kp-table th {
  font: var(--kp-weight-medium) var(--kp-text-sm) / var(--kp-leading-normal) var(--kp-font-body);
  color: var(--kp-color-text-muted);
}
.kp-table tbody tr:hover { background: var(--kp-color-surface-muted); }

/* ── Pagination ───────────────────────────────────────────────────────── */
.kp-pagination { display: flex; gap: var(--kp-space-1); align-items: center; }
.kp-pagination__page {
  min-inline-size: var(--kp-space-6);
  padding: var(--kp-space-1) var(--kp-space-2);
  border: 1px solid var(--kp-color-border);
  border-radius: var(--kp-radius-sm);
  background: var(--kp-color-surface);
  color: var(--kp-color-text-muted);
  text-align: center;
}
.kp-pagination__page[aria-current="page"] {
  background: var(--kp-accent);
  color: var(--kp-on-accent);
  border-color: transparent;
}

/* ── Toast / Modal roots ──────────────────────────────────────────────── */
.kp-toast-root { position: fixed; inset-block-end: var(--kp-space-5); inset-inline: 0; z-index: var(--kp-z-toast); display: grid; justify-items: center; gap: var(--kp-space-2); }
.kp-modal-root { position: relative; z-index: var(--kp-z-modal); }

/* ── Бренд (v1.1.6.107) ──────────────────────────────────────────────────
 * Структура з прев'ю нової теми: коло з монограмою + словесний знак.
 *
 * Живе САМЕ ТУТ, а не в `shell.css`: критерій T0-10.7 справедливо почервонів на
 * першій редакції — бренд це компонент, а оболонка тримає лише структуру. Межа
 * не формальна: інакше кожен новий елемент шапки осідав би в shell-CSS, і той
 * знову став би тим, чим був у легасі — сумішшю каркаса й оздоблення.
 */
.kp-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--kp-space-2);
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--kp-color-text);
}

.kp-brand__mark {
    display: grid;
    place-items: center;
    width: var(--kp-control-height-md);
    height: var(--kp-control-height-md);
    border-radius: var(--kp-radius-pill);
    background: var(--kp-accent);
    color: var(--kp-on-accent);
    font: var(--kp-weight-bold) var(--kp-text-sm) / 1 var(--kp-font-display);
}

.kp-brand__name {
    font: var(--kp-weight-bold) var(--kp-text-lg) / var(--kp-leading-tight) var(--kp-font-display);
}

/* Картка-посилання: модифікатор ПРИМІТИВА, а не нова картка (v1.1.6.111). */
.kp-card--link { display: block; text-decoration: none; color: inherit; }
.kp-card--link:hover { border-color: var(--kp-accent); }
.kp-card__text { color: var(--kp-color-text-muted); margin: 0; }

/* Дрібний супровідний текст картки: час, лічильники (v1.1.6.112). */
.kp-card__meta { font-size: var(--kp-text-sm); color: var(--kp-color-text-muted); }

/* Кнопка на всю ширину картки — головна дія форми (v1.1.6.113). */
.kp-btn--block { inline-size: 100%; justify-content: center; }

/* ── Картка автентифікації (v1.1.6.113) ──────────────────────────────────
 *
 * Живе САМЕ ТУТ: `T0-10.7` вдруге за три релізи спіймав мене на тому, що я
 * кладу компонент у `shell.css`. Оболонка тримає структуру сторінки, картка —
 * компонент; інакше shell-CSS знову стане тим, чим був у легасі (320 доменних
 * селекторів у файлах, названих layout).
 * Геометрія з канонічного прев'ю: вузька центрована картка, власна поверхня
 * й тінь. Значення — токени: прев'ю показує 430px і 22px радіуса, у нас це
 * `--kp-layout-auth-card` і `--kp-radius-xl`, щоб число жило в одному місці.
 */
.kp-auth-card {
  inline-size: min(27rem, 92vw);
  margin-inline: auto;
  padding: var(--kp-space-6);
  background: var(--kp-color-surface);
  border: var(--kp-border-width) solid var(--kp-color-border);
  border-radius: var(--kp-radius-xl);
  box-shadow: var(--kp-shadow-lg);
}
.kp-auth-card__title { text-align: center; margin-block-end: var(--kp-space-1); }
.kp-auth-card__sub {
  text-align: center;
  color: var(--kp-color-text-muted);
  margin-block-end: var(--kp-space-5);
}
.kp-auth-card__bottom { text-align: center; margin-block-start: var(--kp-space-5); margin-block-end: 0; }


/*
 * Фокус поля за канонічним прев'ю (v1.1.6.114): межа стає акцентною, навколо —
 * м'яке кільце. `--kp-accent-soft` існує з v1.1.6.109 саме для цього.
 *
 * Кільце ДОДАЄТЬСЯ до системного `outline`, а не замінює його: outline лишається
 * єдиним, що видно у режимі високої контрастності й при вимкнених тінях.
 */
.kp-input:focus-visible,
.kp-textarea:focus-visible,
.kp-select:focus-visible {
  border-color: var(--kp-accent);
  box-shadow: 0 0 0 var(--kp-space-1) var(--kp-accent-soft);
}

/*
 * Посилання-дії всередині картки автентифікації (v1.1.6.116).
 *
 * Канонічне прев'ю малює їх акцентом і напівжирним БЕЗ підкреслення. Базове
 * правило лишає підкреслення всюди — і це правильно для тексту, але в картці
 * посилання є елементами керування поруч із кнопкою, і суцільне підкреслення
 * читається як помилка верстки.
 *
 * Підкреслення НЕ зникає зовсім: воно повертається на hover і focus. Людина,
 * яка не розрізняє кольору, отримує його в мить взаємодії, а не втрачає зовсім.
 */
.kp-auth-card a:not(.kp-btn) {
  color: var(--kp-accent);
  font-weight: var(--kp-weight-medium);
  text-decoration: none;
}
.kp-auth-card a:not(.kp-btn):hover,
.kp-auth-card a:not(.kp-btn):focus-visible { text-decoration: underline; }

/* Приглушений бейдж — ознака режиму поруч із брендом (v1.1.6.116). */
.kp-badge--muted { background: var(--kp-color-surface-muted); color: var(--kp-color-text-muted); }