/* Компоненты дизайн-системы (CMP-*). Общий код для обеих тем: форма и цвет приходят из
   ролей темы (--radius-*, --option-*, --color-*). Вид — как в текущих продуктах:
   кнопки и варианты — опрос и квиз, поля и таблица — подбор, карточка — сайт.
   Подключение: core.css → theme-*.css → components.css. */

/* ---- Кнопка (CMP-001) -------------------------------------------------------------
   Варианты: основная (по умолчанию), .is-secondary (с рамкой), .is-ghost (без рамки).
   Размеры: .is-sm 36 px, по умолчанию 44 px, .is-lg 56 px — главное действие на телефоне.
   .is-wide — на всю ширину. Недоступна: атрибут disabled (не класс). */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-inline);
  min-height: var(--control-md); padding: 0 var(--pad-control-x); box-sizing: border-box;
  font: inherit; font-family: var(--ff-text); font-size: var(--fs-md); font-weight: var(--fw-strong); line-height: 1.2;
  color: var(--color-action-text); background: var(--color-action); border: var(--border-1-5) solid var(--color-action);
  border-radius: var(--radius-control); cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.c-btn:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
.c-btn:active { background: var(--color-action-pressed); border-color: var(--color-action-pressed); }
.c-btn:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.c-btn:disabled, .c-btn[aria-disabled="true"] { background: var(--color-action-disabled); border-color: var(--color-action-disabled); color: var(--color-action-disabled-text); cursor: default; }
.c-btn.is-secondary { background: var(--btn-secondary-bg); color: var(--color-text); border-color: var(--btn-secondary-border); }
.c-btn.is-secondary:hover { border-color: var(--color-text); }
.c-btn.is-ghost { background: transparent; color: var(--color-link); border-color: transparent; }
.c-btn.is-ghost:hover { background: var(--color-bg-subtle); }
.c-btn.is-secondary:disabled, .c-btn.is-ghost:disabled { background: transparent; border-color: var(--color-border); color: var(--color-action-disabled-text); }
.c-btn.is-sm { min-height: var(--control-sm); padding: 0 var(--space-14); font-size: var(--fs-sm); }
.c-btn.is-lg { min-height: var(--control-lg); border-radius: var(--radius-control-lg); font-size: var(--fs-lg); }
.c-btn.is-wide { display: flex; width: 100%; }

/* ---- Вариант ответа (CMP-002): выбор одного или нескольких, как в опросе и квизе ----
   <button class="c-option" aria-pressed="true|false">. Несколько ответов — .is-multi (квадрат с ✓).
   Разбор ответа: .is-right / .is-wrong — всегда со словом («Верно», «Неверно»), не только цветом. */
.c-option {
  display: flex; align-items: center; gap: var(--space-10); width: 100%; box-sizing: border-box;
  min-height: var(--control-lg); padding: var(--space-14) var(--space-16);
  font: inherit; font-family: var(--ff-text); font-size: var(--fs-md); line-height: 1.35; text-align: left; color: var(--color-text);
  background: var(--option-bg); border: var(--option-border-width) solid var(--option-border); border-radius: var(--radius-option);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.c-option:hover { border-color: var(--option-border-hover); }
.c-option:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.c-option[aria-pressed="true"] { background: var(--option-selected-bg); border-color: var(--option-selected-border); font-weight: var(--option-selected-weight); }
.c-option:disabled { cursor: default; }
.c-option.is-multi::before { content: ""; flex: none; display: grid; place-items: center; width: 22px; height: 22px; box-sizing: border-box;
  border: var(--border-1-5) solid var(--color-border-strong); border-radius: 7px; font-size: 14px; font-weight: 800; line-height: 1; }
.c-option.is-multi[aria-pressed="true"]::before { content: "✓"; background: var(--color-selected-border); border-color: var(--color-selected-border); color: var(--color-text-inverse); }
.c-option.is-right { background: var(--color-success-bg); border-color: var(--color-success-text); }
.c-option.is-wrong { background: var(--color-failure-bg); border-color: var(--color-failure-text); }
.c-options { display: grid; gap: var(--space-10); margin: 0; padding: 0; list-style: none; }

/* ---- Поле ввода (CMP-003): подпись, подсказка, ошибка ---------------------------------
   <label class="c-field"><span class="c-field__label">…</span><input class="c-input">
   <span class="c-field__help">…</span></label>. Ошибка: .is-invalid на .c-field + aria-invalid
   на поле + текст «Ошибка: …» в .c-field__error (не только красная рамка). */
.c-field { display: grid; gap: var(--space-6); align-content: start; font-family: var(--ff-text); }
.c-field__label { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--color-text); }
.c-field__help { font-size: var(--fs-xs); line-height: 1.4; color: var(--color-text-muted); }
.c-field__error { font-size: var(--fs-xs); line-height: 1.4; color: var(--color-failure-text); font-weight: var(--fw-strong); }
.c-input {
  width: 100%; box-sizing: border-box; min-height: var(--control-md); padding: var(--space-8) var(--space-12);
  font: inherit; font-family: var(--ff-text); font-size: var(--fs-md); color: var(--color-text); background: var(--color-bg);
  border: var(--field-border-width) solid var(--field-border); border-radius: var(--radius-field);
  transition: border-color var(--dur-fast) var(--ease);
}
textarea.c-input { min-height: 120px; resize: vertical; line-height: var(--lh-text); }
select.c-input { cursor: pointer; }
.c-input::placeholder { color: var(--color-text-muted); }
.c-input:hover { border-color: var(--color-border-brand); }
.c-input:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.c-input:disabled { background: var(--color-bg-muted); color: var(--color-action-disabled-text); cursor: default; }
.c-field.is-invalid .c-input, .c-input[aria-invalid="true"] { border-color: var(--color-failure-text); }
/* галочки и переключатели — родные элементы браузера в цвет темы */
.c-check { display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--ff-text); font-size: var(--fs-md); cursor: pointer; }
.c-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-action); }

/* ---- Карточка (CMP-004): как карточка статьи сайта ------------------------------------
   .is-link — вся карточка кликабельна: при наведении рамка и тень темы. */
.c-card { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-18) var(--pad-card); box-sizing: border-box;
  background: var(--color-bg); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-card);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.c-card.is-link:hover { border-color: var(--color-border-brand); box-shadow: var(--shadow-hover); }
.c-card.is-subtle { background: var(--color-bg-subtle); border-color: transparent; }

/* ---- Чип и метка (CMP-005) ------------------------------------------------------------ */
.c-chip { display: inline-flex; align-items: center; gap: var(--space-6); min-height: 28px; padding: 0 var(--space-12); box-sizing: border-box;
  font-family: var(--ff-text); font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--color-text);
  background: var(--color-bg-subtle); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-chip); }
.c-chip.is-selected { background: var(--color-selected); border-color: var(--color-selected-border); }
.c-chip.is-accent { background: var(--color-accent, var(--color-bg-brand)); color: var(--color-accent-text, var(--color-text-inverse)); border-color: transparent; } /* у Авто.ру — один на экран */

/* ---- Сообщение (CMP-006): успех, ошибка, внимание, справка --------------------------
   Первое слово — жирным: «Готово:», «Ошибка:», «Внимание:». Цвет без слова не используется. */
.c-alert { padding: var(--space-12) var(--space-16); font-family: var(--ff-text); font-size: var(--fs-md); line-height: var(--lh-text);
  color: var(--color-text); background: var(--color-bg-subtle); border-left: var(--border-accent) solid var(--color-border-brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.c-alert b:first-child, .c-alert strong:first-child { font-weight: var(--fw-strong); }
.c-alert.is-success { background: var(--color-success-bg); border-left-color: var(--color-success-text); }
.c-alert.is-success b:first-child { color: var(--color-success-text); }
.c-alert.is-failure { background: var(--color-failure-bg); border-left-color: var(--color-failure-text); }
.c-alert.is-failure b:first-child { color: var(--color-failure-text); }
.c-alert.is-warning { background: var(--color-warning-bg); border-left-color: var(--color-warning-border); }
.c-alert.is-warning b:first-child { color: var(--color-warning-text); }

/* ---- Таблица (CMP-007): как в подборе ---------------------------------------------------
   Числа — .is-num (вправо, цифры одной ширины). Широкая таблица — в .c-table-wrap с прокруткой. */
.c-table-wrap { overflow-x: auto; }
.c-table { border-collapse: collapse; width: 100%; font-family: var(--ff-text); font-size: var(--fs-sm); color: var(--color-text); }
.c-table th { font-family: var(--table-head-ff); font-size: 11px; font-weight: var(--fw-strong); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); text-align: left; padding: var(--space-8) var(--space-12); border-bottom: var(--table-head-rule); white-space: nowrap; }
.c-table td { padding: var(--space-10) var(--space-12); border-bottom: var(--border-1) solid var(--color-border); vertical-align: top; }
.c-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-table tbody tr:hover td { background: var(--color-bg-subtle); }

/* ---- Разделитель (CMP-008) ---- */
.c-divider { border: 0; border-top: var(--border-1) solid var(--color-border); margin: var(--gap-stack) 0; }

/* ---- Стикер-врезка (CMP-009): «Простыми словами», «В деньгах» — как на сайте ----------
   У evstygney — азурная плашка под наклоном −3°; у Авто.ру — стикер Electric Green без наклона. */
.c-sticker { display: inline-block; padding: 3px 10px 4px; margin: 0 6px 0 -2px; vertical-align: 2px; white-space: nowrap;
  font-family: var(--ff-text); font-size: 13px; font-weight: var(--fw-strong); letter-spacing: .02em; text-decoration: none;
  color: var(--sticker-text, var(--color-text-inverse)); background: var(--sticker-bg, var(--color-bg-brand)); border-radius: var(--radius-8);
  transform: rotate(var(--tilt-sticker, 0deg)); }
a.c-sticker, .t-prose a.c-sticker { color: var(--sticker-text, var(--color-text-inverse)); text-decoration: none; }   /* стикер-ссылка в статье не красится как ссылка */
a.c-sticker:hover, .t-prose a.c-sticker:hover { background: var(--sticker-bg-hover, var(--sticker-bg, var(--color-bg-brand))); }
.c-sticker.is-top { font-size: 14px; margin: 0 0 14px 2px; padding: 5px 12px 6px; }