:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  /* Круг 4 (D-06): было oklch(0.556 0 0) — #737373 на --muted (#f5f5f5) даёт
     4.35:1, ниже WCAG AA 4.5:1 (правило color-contrast, axe-core, найдено
     fixture:a11y-contrast). Пара --muted-foreground/--muted — самая
     распространённая в пакете (описания карточек, таймкоды, номера строк
     лога, неактивная вкладка), поэтому один узкий сдвиг здесь чинит все её
     потребители разом вместо точечных правок в каждом компоненте. Тёмная
     тема (0.708) не тронута — там нарушений не было (racing 0 узлов). */
  --muted-foreground: oklch(0.5 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --success: oklch(0.55 0.14 150);
  --success-foreground: oklch(0.985 0 0);
  --warning: oklch(0.72 0.16 70);
  --warning-foreground: oklch(0.205 0 0);
  --info: oklch(0.55 0.14 250);
  --info-foreground: oklch(0.985 0 0);
  /* Круг 4 (D-06): производные ТОЛЬКО для текста поверх тонированного фона
     той же семьи (StatusBadge outline-вариант, lib/highlight.ts). НЕ трогают
     --success/--warning/--destructive/--info — точка-маркер, рамка, solid-
     вариант и остальные потребители токена остаются как были. Ловится
     живым замером (axe-core): при alpha 8–10% сама насыщенная краска токена
     как ЦВЕТ ТЕКСТА не держит 4.5:1 (success 4.01, info 4.27, destructive
     4.00, warning — 2.38, худший случай). oklch(from …) — относительный
     синтаксис CSS Color 5 (Chromium 119+/Safari 16.4+/Firefox 128+;
     раннер и таргет-браузеры проекта современные). */
  --success-text: oklch(from var(--success) calc(l - 0.08) c h);
  --info-text: oklch(from var(--info) calc(l - 0.07) c h);
  --destructive-text: oklch(from var(--destructive) calc(l - 0.08) c h);
  --warning-text: oklch(from var(--warning) calc(l - 0.2) c h);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
}

[data-theme="dark"] {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --success: oklch(0.7 0.15 150);
  --success-foreground: oklch(0.205 0 0);
  --warning: oklch(0.8 0.15 75);
  --warning-foreground: oklch(0.205 0 0);
  --info: oklch(0.7 0.13 250);
  --info-foreground: oklch(0.205 0 0);
  /* Тёмная тема уже проходила (0 нарушений color-contrast, круг 4) —
     *-text ничего не переопределяют, а просто указывают на исходный тон. */
  --success-text: var(--success);
  --info-text: var(--info);
  --destructive-text: var(--destructive);
  --warning-text: var(--warning);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
}
/* Оформление hosted login — СЛОЙ ПРАВИЛ (ADR-0029).
 *
 * Этот файл НЕ содержит палитры. Переменные приезжают из tokens.vendored.css —
 * побайтовой копии packages/ui/src/styles/tokens.css дизайн-системы (@notevil/ui,
 * версия в assets.go). Оба файла склеиваются в один ответ при старте процесса,
 * порядок фиксирован: сначала переменные, потом правила.
 *
 * ⚠️ НИ ОДНОГО СЕЛЕКТОРА ПО КЛАССУ. Не стилистическое предпочтение, а
 * ограничение, которое держит вёрстку отделённой от разметки: шаблоны
 * hostedlogin/* уже несут крючки data-* (data-error, data-sso, data-recovery,
 * data-social, data-phone, data-enroll-skip), и добавлять к ним class означало бы
 * править 14 файлов ради каждой правки оформления. Замером доказано, что лист на
 * одних элементных селекторах одевает эту страницу целиком.
 *
 * ⚠️ ТОЛЬКО СВЕТЛАЯ ТЕМА, И ЭТО НЕ НЕДОРАБОТКА. Тёмный блок в вендоренном файле
 * есть ([data-theme="dark"]), но на hosted login НЕЧЕМУ выставить этот атрибут:
 * ни JS, ни серверного выбора темы у страницы нет. Включать тёмную по
 * prefers-color-scheme значило бы повторить значения палитры вторым списком —
 * то есть завести ровно тот дрейф, ради которого поставлен сторож. Поэтому
 * html объявляет color-scheme: light явно (иначе браузер в тёмной ОС покрасит
 * контролы формы тёмными поверх светлой карточки), а тёмная тема ждёт канала
 * выбора — см. ADR-0029, раздел «Что осталось за границей».
 */

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

html {
  /* Явно, а не по умолчанию: без этого в тёмной ОС браузер отдаёт полям и
     скроллбару тёмную отрисовку поверх светлой карточки — получается каша. */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background: var(--background);
  color: var(--foreground);
}

/* Карточка. Все страницы семейства несут <main> — в тех, где его не было
   (signup/forgot/reset/message, /invite, /device), он добавлен той же правкой. */
main {
  width: 100%;
  max-width: 26rem;
  padding: 2rem;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 0.25rem);
  box-shadow:
    0 1px 2px oklch(0 0 0 / 5%),
    0 8px 24px oklch(0 0 0 / 6%);
}

h1 {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Бренд тенанта над заголовком (WP-P17): логотип и название организации из
   branding/organizations, крючок data-brand в вставке brand_mark
   (hostedloginbranding.go). Цвет CTA тенант задаёт переменной --primary в
   brand_style — правило кнопки ниже читает её, как и палитру по умолчанию. */
[data-brand] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

[data-brand] img {
  display: block;
  max-height: 2.5rem;
  max-width: 10rem;
}

[data-brand] p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

p {
  margin: 0 0 1rem;
}

/* --- поля ------------------------------------------------------------------ */

label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* В шаблонах authflows/invite/device подпись отделена от поля тегом <br>.
   Отступ даёт margin поля, перенос строки — display:block; <br> лишний. */
label br {
  display: none;
}

input:not([type="hidden"]) {
  display: block;
  width: 100%;
  margin-top: 0.375rem;
  padding: 0.5625rem 0.75rem;
  font: inherit;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: var(--radius);
}

/* Поля вне <label> (ввод токена инвайта, код устройства) — отступ сверху нужен
   от предыдущего абзаца, а не от подписи. */
form > input:not([type="hidden"]) {
  margin-top: 0;
  margin-bottom: 1rem;
}

input[name="user_code"] {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

input::placeholder {
  color: var(--muted-foreground);
}

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

button,
[data-social] a[data-provider] {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  font: inherit;
  font-weight: 500;
  color: var(--primary-foreground);
  background: var(--primary);
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

button:hover:not(:disabled),
[data-social] a[data-provider]:hover {
  opacity: 0.9;
}

/* Второстепенные действия. Перечислены поимённо, а не «вторая кнопка в форме»:
   отказ, пропуск и корпоративный вход — разные намерения, и каждое должно быть
   видно в этом списке, а не выводиться из порядка в разметке.

   ⚠️ Кнопка [data-sso] здесь НЕ выделена и не спрятана намеренно: сегодня она
   всегда отвечает отказом (no_sso_for_domain — ни одной связи в базе), но
   изменение ПОВЕДЕНИЯ вынесено отдельным заходом, чтобы разбор вёрстки и разбор
   логики показа не смешались. См. ADR-0029, «Что осталось за границей». */
button[value="decline"],
button[value="deny"],
[data-enroll-skip] button,
[data-sso] button,
[data-social] a[data-provider] {
  color: var(--secondary-foreground);
  background: var(--secondary);
  border-color: var(--border);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

button + button,
[data-social] a[data-provider] + a[data-provider] {
  margin-top: 0.5rem;
}

form {
  margin: 0;
}

form + form {
  margin-top: 0.75rem;
}

/* --- фокус: одно правило на всё, что фокусируется -------------------------- */

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

/* --- ссылки ---------------------------------------------------------------- */

a {
  color: var(--muted-foreground);
  text-decoration: none;
}

a:hover {
  color: var(--foreground);
  text-decoration: underline;
}

nav[data-recovery] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  font-size: 0.875rem;
  border-top: 1px solid var(--border);
}

/* --- секции: телефон, соц-вход, корпоративный вход ------------------------- */

[data-phone],
[data-social],
[data-sso] {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* Подписи-разделители («или по телефону», «или через») — не заголовки. */
[data-phone] > p:first-child,
[data-social] > p:first-child {
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* --- подсказки и служебные сообщения --------------------------------------- */

[data-sso-hint],
[data-phone-unavailable],
[data-enroll-noscript],
[data-noscript],
[data-info] {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

[data-info] {
  margin: 0 0 1rem;
}

/* --- ошибка ---------------------------------------------------------------- */

[role="alert"] {
  margin: 0 0 1.25rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--destructive-text);
  background: oklch(from var(--destructive) l c h / 8%);
  border: 1px solid oklch(from var(--destructive) l c h / 25%);
  border-radius: var(--radius);
}