/*
 * MAS в стиле Iskra Web (iskra-app/iskra-web, ветка dev).
 *
 * Токены — копия src/design/tokens.css и accent.css (системные цвета Apple, сетка 4 px, rem).
 * Дальше они раскладываются по семантическим переменным Compound, на которых построены
 * и шаблоны MAS, и React-страница /account. Compound держит свои переменные в @layer, поэтому
 * всё, что здесь, перебивает его без !important.
 *
 * Подключается последним в templates/base.html и templates/app.html.
 */

/* ---------- Токены Искры ---------- */

:root {
  --space-tight: 0.25rem; /* 4 */
  --space-close: 0.5rem; /* 8 */
  --space-normal: 0.75rem; /* 12 */
  --space-roomy: 1rem; /* 16 */
  --space-generous: 1.5rem; /* 24 */

  --radius-card: 1rem; /* 16 */
  --radius-control: 0.75rem; /* 12 */
  --radius-circle: 9999px;
  --border-hairline: 1px;

  --tap-target: 3rem; /* 48 — палец */
  --size-navigation-bar: 2.75rem; /* 44 */
  --size-sign-in-column: 26.25rem; /* 420 */
  --size-sign-in-mark: 3.5rem; /* 56 */

  --font-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell,
    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  --font-body: 'Inter', var(--font-system);
  --font-size-body: 1rem;
  --font-size-caption: 0.8125rem; /* 13 */
  --font-size-title: 1.25rem; /* 20 */
  --font-size-large-title: 1.75rem; /* 28 */
  --line-height-body: 1.35;

  color-scheme: light;
  --color-background: #ffffff;
  --color-surface: #f2f2f7;
  --color-text: #000000;
  --color-text-secondary: rgb(60 60 67 / 0.6);
  --color-separator: rgb(60 60 67 / 0.29);
  --color-incoming-bubble: rgb(0 0 0 / 0.08);
  --color-own-reaction: rgb(0 0 0 / 0.16);
  --color-danger: #ff3b30;
  --color-on-danger: #ffffff;
  --color-success: #34c759;
  --color-selected: rgb(0 0 0 / 0.06);

  /* Акцент по умолчанию — синий, как в Искре. */
  --accent: #007aff;
  --on-accent: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  :root {
    --tap-target: 2.25rem; /* 36 — мышь */
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-background: #000000;
    --color-surface: #1c1c1e;
    --color-text: #ffffff;
    --color-text-secondary: rgb(235 235 245 / 0.6);
    --color-separator: rgb(84 84 88 / 0.6);
    --color-incoming-bubble: rgb(255 255 255 / 0.08);
    --color-own-reaction: rgb(255 255 255 / 0.16);
    --color-danger: #ff453a;
    --color-success: #30d158;
    --color-selected: rgb(255 255 255 / 0.1);
    --accent: #0a84ff;
  }
}

/* ---------- Токены Искры → Compound ---------- */

:root,
.cpd-theme-light.cpd-theme-light,
.cpd-theme-dark.cpd-theme-dark {
  --cpd-font-family-sans: var(--font-body);

  --cpd-color-theme-bg: var(--color-background);
  --cpd-color-bg-canvas-default: var(--color-background);
  --cpd-color-bg-canvas-default-level-1: var(--color-surface);
  --cpd-color-bg-canvas-disabled: var(--color-surface);
  --cpd-color-bg-subtle-primary: var(--color-own-reaction);
  --cpd-color-bg-subtle-secondary: var(--color-incoming-bubble);
  --cpd-color-bg-subtle-secondary-level-0: var(--color-incoming-bubble);

  --cpd-color-text-primary: var(--color-text);
  --cpd-color-text-secondary: var(--color-text-secondary);
  --cpd-color-text-placeholder: var(--color-text-secondary);
  --cpd-color-text-disabled: var(--color-text-secondary);
  --cpd-color-text-action-primary: var(--color-text);
  --cpd-color-text-action-accent: var(--accent);
  --cpd-color-text-link-external: var(--accent);
  --cpd-color-text-on-solid-primary: var(--on-accent);
  --cpd-color-icon-primary: var(--color-text);
  --cpd-color-icon-secondary: var(--color-text-secondary);
  --cpd-color-icon-tertiary: var(--color-text-secondary);
  --cpd-color-icon-accent-primary: var(--accent);
  --cpd-color-icon-on-solid-primary: var(--on-accent);

  /* Главная кнопка: заливка — акцент, надпись — --on-accent, и только так. */
  --cpd-color-bg-action-primary-rest: var(--accent);
  --cpd-color-bg-action-primary-hovered: color-mix(in srgb, var(--accent) 88%, var(--color-text));
  --cpd-color-bg-action-primary-pressed: color-mix(in srgb, var(--accent) 76%, var(--color-text));
  --cpd-color-bg-action-primary-disabled: var(--color-incoming-bubble);
  --cpd-color-bg-accent-rest: var(--accent);
  --cpd-color-bg-accent-hovered: color-mix(in srgb, var(--accent) 88%, var(--color-text));
  --cpd-color-bg-accent-pressed: color-mix(in srgb, var(--accent) 76%, var(--color-text));

  --cpd-color-border-interactive-primary: var(--color-separator);
  --cpd-color-border-interactive-secondary: var(--color-separator);
  --cpd-color-border-interactive-hovered: var(--color-text-secondary);
  --cpd-color-border-focused: var(--accent);
  --cpd-color-border-disabled: var(--color-separator);

  --cpd-color-text-critical-primary: var(--color-danger);
  --cpd-color-icon-critical-primary: var(--color-danger);
  --cpd-color-border-critical-primary: var(--color-danger);
  --cpd-color-border-critical-subtle: color-mix(in srgb, var(--color-danger) 40%, transparent);
  --cpd-color-border-critical-hovered: var(--color-danger);
  --cpd-color-bg-critical-primary: var(--color-danger);
  --cpd-color-bg-critical-hovered: color-mix(in srgb, var(--color-danger) 88%, var(--color-text));
  --cpd-color-bg-critical-subtle: color-mix(in srgb, var(--color-danger) 12%, transparent);
  --cpd-color-bg-critical-subtle-hovered: color-mix(in srgb, var(--color-danger) 20%, transparent);
  --cpd-color-bg-success-subtle: color-mix(in srgb, var(--color-success) 14%, transparent);
  --cpd-color-icon-success-primary: var(--color-success);
  --cpd-color-text-success-primary: var(--color-success);

  --cpd-color-gray-300: var(--color-incoming-bubble);
  --cpd-color-gray-400: var(--color-separator);
}

/* ---------- Основа ---------- */

html,
body {
  background: var(--color-background);
  color: var(--color-text);
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Колонка входа — 420, как `.sign-in` в SignIn.svelte. */
.layout-container {
  --target-width: calc(var(--size-sign-in-column) - 2 * var(--space-generous));
  --inline-padding: var(--space-generous);
  padding-block: max(var(--space-generous), env(safe-area-inset-top)) var(--space-generous);
  gap: var(--space-generous);
}

/* ---------- Шапка: знак Искры вместо пиктограммы ---------- */

.page-heading {
  gap: var(--space-normal);
  margin-block-start: var(--space-generous);
}

.page-heading .icon {
  width: var(--size-sign-in-mark);
  height: var(--size-sign-in-mark);
  padding: 0;
  border-radius: var(--radius-control);
}

/* Обычная шапка — искра. Ошибка и успех оставляют свою пиктограмму: там она что-то значит. */
.page-heading .icon:not(.invalid):not(.success) {
  background: url('./icon.svg') center / contain no-repeat;
}
.page-heading .icon:not(.invalid):not(.success) > svg {
  display: none;
}

.page-heading .icon.invalid,
.page-heading .icon.success {
  border-radius: var(--radius-circle);
}

.page-heading .header {
  gap: var(--space-normal);
}

.page-heading .header .title {
  font: inherit;
  font-size: var(--font-size-large-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  margin: 0;
}

.page-heading .header .text {
  font: inherit;
  letter-spacing: normal;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---------- Формы ---------- */

.cpd-form-root {
  gap: var(--space-normal);
}

.cpd-form-field {
  gap: var(--space-tight);
}

/* Подпись над полем — подпись, а не заголовок: caption и вторичный цвет. */
.cpd-form-label {
  font: inherit;
  font-size: var(--font-size-caption);
  letter-spacing: normal;
  color: var(--color-text-secondary);
}
.cpd-form-label[data-invalid] {
  color: var(--color-danger);
}

.cpd-text-control {
  min-height: max(var(--tap-target), var(--size-navigation-bar));
  padding: 0 var(--space-roomy);
  border: var(--border-hairline) solid var(--color-separator);
  border-radius: var(--radius-control);
  background: var(--color-background);
  color: var(--color-text);
  font: inherit;
}
.cpd-text-control:hover {
  border-color: var(--color-separator);
  box-shadow: none;
}
.cpd-text-control:focus,
.cpd-text-control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: transparent;
}
.cpd-text-control[data-invalid] {
  border-color: var(--color-danger);
}

.cpd-form-message,
.cpd-form-help-message,
.cpd-form-error-message {
  font-size: var(--font-size-caption);
}

/* ---------- Кнопки ---------- */

.cpd-button {
  border-radius: var(--radius-circle);
  font: inherit;
  font-weight: 600;
  letter-spacing: normal;
}

.cpd-button[data-size='lg'] {
  min-block-size: max(var(--tap-target), var(--size-navigation-bar));
  padding-block: 0;
  padding-inline: var(--space-roomy);
}

.cpd-button[data-size='sm'] {
  min-block-size: var(--tap-target);
  padding-block: 0;
  padding-inline: var(--space-normal);
}

.cpd-button[data-kind='primary'] {
  background: var(--accent);
  color: var(--on-accent);
}
.cpd-button[data-kind='primary'][disabled] {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  opacity: 0.5;
}

/* Вторая кнопка — PlainButton Искры: заливка, без рамки. */
.cpd-button[data-kind='secondary'] {
  border: none;
  background: var(--color-incoming-bubble);
  color: var(--color-text);
}
.cpd-button[data-kind='secondary'][disabled] {
  border: none !important;
  background: var(--color-incoming-bubble) !important;
  opacity: 0.5;
}
@media (hover: hover) {
  .cpd-button[data-kind='secondary']:hover:not([disabled]) {
    background: var(--color-own-reaction);
  }
}
.cpd-button[data-kind='secondary'].destructive {
  color: var(--color-danger);
}

/* Третья — QuietButton: акцентная надпись, без подчёркивания. */
.cpd-button[data-kind='tertiary'] {
  color: var(--accent);
  text-decoration: none;
  font-weight: 400;
}
@media (hover: hover) {
  .cpd-button[data-kind='tertiary']:hover:not([disabled]) {
    background: var(--color-incoming-bubble);
  }
}

/* Ссылки-действия («Создать аккаунт», «Забыли пароль?») — тоже тихие кнопки. */
.cpd-link,
.cpd-link[data-kind='primary'] {
  color: var(--accent);
  font-weight: 400;
  text-decoration: none;
  border-radius: var(--radius-control);
  padding-inline: var(--space-close);
}
@media (hover: hover) {
  .cpd-link[data-kind='primary']:hover {
    background: var(--color-incoming-bubble);
  }
}
.cpd-link:active,
.cpd-link[data-kind='primary']:active {
  color: var(--accent);
  background: var(--color-own-reaction);
}
.cpd-link[data-kind='critical'] {
  color: var(--color-danger);
}

/* ---------- Разделитель «или» ---------- */

.separator hr {
  border-top: var(--border-hairline) solid var(--color-separator);
}
.separator p {
  font: inherit;
  font-size: var(--font-size-caption);
  letter-spacing: normal;
  color: var(--color-text-secondary);
  text-transform: none;
}

/* ---------- Карточки, сообщения, футер ---------- */

.cpd-alert {
  border-radius: var(--radius-card);
}

.session-card,
.consent-scope-list ul > li:first-of-type,
.consent-scope-list ul > li:last-of-type {
  border-radius: var(--radius-card);
}

.consent-client-icon {
  border-radius: var(--radius-control);
}

.cpd-mfa-digit {
  border-radius: var(--radius-control);
}
.cpd-mfa-digit[data-selected] {
  border-color: var(--accent);
}

.legal-footer {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Шаги экрана — через --space-generous, как `.sign-in` в SignIn.svelte, а не 40 px из MAS. */
.layout-container > form.gap-10,
.layout-container > section.gap-10,
.layout-container > div.gap-10 {
  gap: var(--space-generous);
}

/* ---------- /account (React MAS): CSS-модули Compound ----------
 * Имена классов там с хешем (`_button_1nw83_8`), он меняется от версии к версии, поэтому
 * цепляемся за префикс и data-атрибуты, а не за хеш. */

[class*='_button_'][data-kind] {
  font: inherit;
  font-weight: 600;
  letter-spacing: normal;
}

[class*='_button_'][data-kind='primary']:not([class*='_destructive_']) {
  background: var(--accent);
  color: var(--on-accent);
}

/* Вторая кнопка — заливка без рамки, как PlainButton. */
[class*='_button_'][data-kind='secondary'] {
  border: none;
  background: var(--color-incoming-bubble);
  color: var(--color-text);
}
@media (hover: hover) {
  [class*='_button_'][data-kind='secondary']:hover:not([disabled]) {
    background: var(--color-own-reaction);
  }
}

/* Необратимое («Выйти», «Удалить устройство») — PlainButton `danger`: красная надпись,
   а не красная заливка и не красная рамка. */
[class*='_button_'][class*='_destructive_'],
.cpd-button.destructive {
  border: none !important;
  background: var(--color-incoming-bubble) !important;
  color: var(--color-danger) !important;
}
@media (hover: hover) {
  [class*='_button_'][class*='_destructive_']:hover:not([disabled]),
  .cpd-button.destructive:hover:not([disabled]) {
    background: var(--color-own-reaction) !important;
  }
}

/* Ссылки-действия — QuietButton: акцент, без подчёркивания. */
a[class*='_link_'],
button[class*='_link_'] {
  color: var(--accent);
  font-weight: 400;
  text-decoration: none;
  border-radius: var(--radius-control);
  padding-inline: var(--space-close);
}
@media (hover: hover) {
  a[class*='_link_']:hover,
  button[class*='_link_']:hover {
    background: var(--color-incoming-bubble);
  }
}

/* Поля — как TextField. Код подтверждения (one-time-code) — свой контрол, его не трогаем. */
input[class*='_control_']:not([autocomplete='one-time-code']):not([type='checkbox']):not([type='radio']) {
  min-height: max(var(--tap-target), var(--size-navigation-bar));
  padding-block: 0;
  padding-inline-start: var(--space-roomy);
  border: var(--border-hairline) solid var(--color-separator);
  border-radius: var(--radius-control);
  background: var(--color-background);
  box-shadow: none;
}
input[class*='_control_']:not([autocomplete='one-time-code']):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: transparent;
}
input[class*='_control_'][readonly],
input[class*='_control_']:disabled {
  background: var(--color-surface);
  border-color: transparent;
}

[class*='_field_'] > label[class*='_label_'] {
  font: inherit;
  font-size: var(--font-size-caption);
  letter-spacing: normal;
  color: var(--color-text-secondary);
}