/*
 * Auth-экраны провайдера на токенах DESIGN_KIT cantor-web (docs/design/auth-screens.md r1, auth-screens T-03).
 * Значения переменных A-3 скопированы из cantor-web/src/styles.css байт-в-байт (F-12); тест-страж сверяет их
 * (AuthLayoutTests, позже T-17). Тема: светлая по умолчанию, тёмная через prefers-color-scheme (§3.2, §7.2) —
 * у провайдера нет html.dark/html.light.
 * Классы .auth-* — по §6 (r1 + композиции r2: .auth-section, .auth-rows, .auth-disclosure, .auth-actions), чтобы
 * T-04/T-05/T-06 пересаживали страницы без правки стилей. Старых алиасов (секция LEGACY) больше нет: все страницы
 * провайдера — на _AuthLayout и классах §6 (T-05).
 */

:root {
    color-scheme: light dark;
    --canvas: #fafafa;
    --surface: #ffffff;
    --ink: #1f1f1f;
    --ink-soft: #6b6b6b;
    --ink-faint: #9a9a9a;
    --line: #ececec;
    --line-strong: #e0e0e0;
    --accent: #ff5729;
    --accent-soft: #ffeeea;
    --accent-strong: #ff5729;
    --accent-strong-hover: #e64e25;
    --accent-foreground: #ffffff;
    --accent-on-soft: #cc4521;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --danger-border: #fecaca;
    --danger-ink: #b91c1c;
    --success: #059669;
    --success-soft: #ecfdf5;
    --success-border: #a7f3d0;
    --success-strong: #047857;
    --info: #2563eb;
    --info-soft: #eff6ff;
    --info-border: #bfdbfe;
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Бренд, не токен; не входит в паритет T-17. Константы кнопок провайдеров из гайдов Google/Microsoft/Apple (§7.4, §9). */
:root {
    --brand-google-fill: #ffffff;
    --brand-google-stroke: #747775;
    --brand-google-text: #1f1f1f;
    --brand-google-state: rgba(31, 31, 31, .08);
    --brand-microsoft-fill: #ffffff;
    --brand-microsoft-border: #8c8c8c;
    --brand-microsoft-text: #5e5e5e;
    --brand-apple-fill: #ffffff;
    --brand-apple-outline: #000000;
    --brand-apple-text: #000000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --canvas: #111318;
        --surface: #1a1d23;
        --ink: #e6e8ec;
        --ink-soft: #9aa0aa;
        --ink-faint: #5c6370;
        --line: #2a2e36;
        --line-strong: #353a44;
        --accent: #ff5729;
        --accent-soft: #2a1a14;
        --accent-strong: #ff5729;
        --accent-strong-hover: #e64e25;
        --accent-foreground: #ffffff;
        --accent-on-soft: #ff5729;
        --danger: #f87171;
        --danger-soft: rgb(220 38 38 / 0.14);
        --danger-border: rgb(220 38 38 / 0.3);
        --danger-ink: var(--danger);
        --success: #34d399;
        --success-soft: rgb(5 150 105 / 0.14);
        --success-border: rgb(5 150 105 / 0.3);
        --success-strong: var(--success);
        --info: #60a5fa;
        --info-soft: rgb(37 99 235 / 0.14);
        --info-border: rgb(37 99 235 / 0.3);
    }

    /* Бренд, не токен; не входит в паритет T-17. Тёмные варианты кнопок из гайдов (§9.2-§9.4). */
    :root {
        --brand-google-fill: #131314;
        --brand-google-stroke: #8e918f;
        --brand-google-text: #e3e3e3;
        --brand-google-state: rgba(227, 227, 227, .08);
        --brand-microsoft-fill: #2f2f2f;
        --brand-microsoft-border: transparent;
        --brand-microsoft-text: #ffffff;
        --brand-apple-fill: #ffffff;
        --brand-apple-outline: transparent;
        --brand-apple-text: #000000;
    }
}

/* ===== База (§3.2) ===== */

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

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-text-size-adjust: 100%;
}

::selection {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Фокус-кольцо везде, ничем не подавляется (§3.2). */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Шаблон: страница, шапка, main, карточка, подвал (§3.2, §3.3) ===== */

/* body.auth-page — _AuthLayout (единственный шаблон auth-страниц). */
body.auth-page,
.auth-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Шапка и подвал: контейнер 1120, гаттер 16 / 24 / 40 по брейкпоинтам, safe areas. */
.auth-header,
.auth-footer {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

.auth-header {
    display: flex;
    align-items: center;
    min-height: 56px;
}

/* Марка «Daminion» (S-2): текст, не логотип; цель 44 px за счёт min-height и padding-inline, текст с гаттера не сдвигается. */
a.auth-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 4px;
    margin-inline-start: -4px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

a.auth-brand:focus-visible {
    outline-offset: 4px;
}

.auth-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    padding-block: 24px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

/* < 640: карточка без рамки и фона, контент прямо на canvas (S-3). */
.auth-card {
    width: 100%;
    max-width: 440px;
}

.auth-footer {
    min-height: 48px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    color: var(--ink-soft);
    font-size: 12px;
}

@media (min-width: 640px) {
    .auth-header,
    .auth-footer {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }

    .auth-header {
        min-height: 72px;
    }

    .auth-main {
        padding-block: 48px;
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }

    /* Ширину 640-767 (min(440px, 100% - 48px) по §3.3) даёт гаттер 24 у .auth-main; отдельное правило не нужно. */
    .auth-card {
        padding: 40px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 16px;
    }
}

@media (min-width: 1024px) {
    .auth-header,
    .auth-footer,
    .auth-main {
        padding-left: max(40px, env(safe-area-inset-left));
        padding-right: max(40px, env(safe-area-inset-right));
    }
}

/* Иконочная плитка форм (P.lock) на < 640 скрыта; плитки-результаты видны везде - это единственный визуальный маркер
   исхода (§4.5/§4.6, §7.3): --success, --danger и --keep (accent-плитка RegisterPending). */
.auth-icon {
    display: none;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--ink);
}

.auth-icon--keep,
.auth-icon--success,
.auth-icon--danger {
    display: grid;
}

@media (min-width: 640px) {
    .auth-icon {
        display: grid;
    }
}

.auth-icon svg {
    width: 24px;
    height: 24px;
}

.auth-icon--success {
    background: var(--success-soft);
    color: var(--success-strong);
}

.auth-icon--danger {
    background: var(--danger-soft);
    color: var(--danger);
}

/* overflow-wrap: anywhere - h1/lead с почтой или именем клиента без пробелов (§8.8) не вызывают горизонтальный скролл на 320. */
.auth-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.34;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.auth-lead {
    margin: 0 0 24px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* T-17 D-2: данные пользователя в lead (почта #F3, логин #K6/#L9) — значение, читается цветом ink (§7.3). */
.auth-lead strong {
    color: var(--ink);
}

/* Вертикальный ритм §3.2 без lead (Login): h1 → следующий блок 24. Соседние вертикальные отступы схлопываются
   (max(8, 24) = 24), поэтому здесь 24, а не «8 + 16». Баннер над формой/полем → 16 (у баннера нижнего отступа нет). */
.auth-card > .auth-title + :not(.auth-lead) {
    margin-top: 24px;
}

/* Баннер → любой следующий блок 16 (форма, поле, абзац #K6 на Invite, действие); секция держит свои 24 (Index). */
.auth-card > :is(.auth-summary, .auth-banner) + :not(.auth-section) {
    margin-top: 16px;
}

/* Сводка без ошибок (tag helper рендерит её с validation-summary-valid, display: none) бокса не даёт, но остаётся соседом
   в DOM: ритм считается от блока перед ней - h1 → 24, список → 24. Правила стоят позже при той же специфичности. */
.auth-card > .auth-title + .validation-summary-valid + *,
.auth-card > .auth-rows + .validation-summary-valid + * {
    margin-top: 24px;
}

/* Список строк → следующий блок 24 (Invite: каталоги → форма / абзац / действие, §3.6). */
.auth-card > .auth-rows + * {
    margin-top: 24px;
}

/* ===== Формы: поля, инпуты, пароль, чекбокс (§5.2, §5.3) ===== */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-label {
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 500;
}

.auth-hint {
    margin: 0; /* <p class="auth-hint"> - ритм 4 px задаёт gap .auth-field, не UA-отступ абзаца */
    color: var(--ink-soft);
    font-size: 12.5px;
}

/* Ошибка поля: иконка P.alert через ::before + mask (не вложенный svg - asp-validation-for подменяет содержимое span'а текстом). */
.auth-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--danger-ink);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.auth-error::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 15.5H3zM12 10v4.2M12 17v.1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 15.5H3zM12 10v4.2M12 17v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Windows High Contrast подменяет background на Canvas - маска стала бы невидимой; красим системным цветом текста.
   CSP страниц провайдера должен разрешать img-src data: (маска грузится как картинка). */
@media (forced-colors: active) {
    .auth-error::before {
        forced-color-adjust: none;
        background: CanvasText;
    }
}

/* Пустое сообщение поля (tag helper помечает его field-validation-valid) не занимает места в ритме 4 px. */
.auth-error:empty,
.auth-error.field-validation-valid {
    display: none;
}

/* Инпут: рамка ink-soft (S-4), 44 px (S-6), 16 px на < 768 против зума iOS (S-7), placeholder'ов нет (S-5). */
.auth-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--ink-soft);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    caret-color: var(--accent);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 22px;
    transition: border-color 150ms ease-out, background-color 150ms ease-out, outline-color 150ms ease-out;
}

@media (min-width: 768px) {
    .auth-input {
        font-size: 14px;
    }
}

.auth-input:hover {
    border-color: var(--ink);
}

.auth-input[aria-invalid="true"] {
    border-color: var(--danger);
}

.auth-input:focus-visible {
    border-color: var(--accent);
}

/* Autofill Chrome красит поле в свой цвет поверх тёмной темы (§3.2). */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--accent);
}

/* Пароль: кнопка Show/Hide внутри правого края поля, после инпута в DOM (§5.3). */
.auth-password {
    position: relative;
}

.auth-password .auth-input {
    padding-right: 64px;
}

.auth-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    min-width: 52px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: transparent;
    color: var(--accent-on-soft);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.auth-toggle:focus-visible {
    outline-offset: -2px;
}

/* Чекбокс: нативный, 20x20, accent-color accent-strong (S-14); строка 44 px, многострочный текст не растягивает глиф. */
.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding-block: 11px;
    color: var(--ink);
    font-size: 14px;
    cursor: pointer;
}

.auth-check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--accent-strong);
}

/* Текст строки - одним <span> (ссылки внутри него), иначе flex разнесёт слова; страховка от переполнения на 320. */
.auth-check > :not(input) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
}

/* Read-only значение (почта на подтверждении внешнего входа): подпись + значение + подсказка. */
.auth-static {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-static__value {
    color: var(--ink);
    font-size: 14px;
    overflow-wrap: anywhere;
}

input[readonly].auth-static {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14px;
    text-overflow: ellipsis;
}

/* Кольцо гасится только у элемента вне Tab-цикла (r2 §6: SetupAdmin, tabindex="-1"); фокусируемый readonly кольцо сохраняет. */
input[readonly][tabindex="-1"].auth-static:focus {
    outline: none;
}

/* Детали ошибки (r2 §4.14): <dl> внутри .auth-static - dt как подпись, dd как значение, без UA-отступов. */
.auth-static dl {
    margin: 0;
}

.auth-static dt {
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 500;
}

.auth-static dd {
    margin: 4px 0 12px;
    color: var(--ink);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.auth-static dd:last-child {
    margin-bottom: 0;
}

/* ===== Кнопки (§5.5, §9) ===== */

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: 500 14px/1.2 var(--font-sans);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, outline-color 150ms ease-out;
}

/* Подпись в 2-3 строки (+35 %, зум текста 200 %) не касается рамки; у Apple паддинг 0 - там высоту задаёт глиф. */
.auth-btn:not(.auth-btn--apple) {
    padding-block: 8px;
}

/* Submitting: без opacity (S-13) - контраст primary остаётся 4.73. */
.auth-btn:disabled {
    cursor: progress;
}

.auth-btn--primary {
    background: var(--accent-strong);
    color: var(--accent-foreground);
}

.auth-btn--primary:hover,
.auth-btn--primary:active {
    background: var(--accent-strong-hover);
}

.auth-btn--outline {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink);
}

/* Hover - canvas только когда карточка на surface (≥ 640); на < 640 контент лежит на canvas, и заливка осталась бы неотличимой. */
@media (min-width: 640px) {
    .auth-btn--outline:hover {
        background: var(--canvas);
    }
}

/* Кнопки провайдеров: глиф слева, текст сразу за ним (§9.1); цвета - константы бренда, не токены. */
.auth-btn--provider {
    justify-content: flex-start;
    gap: 10px;
    padding-left: 12px;
    text-align: left;
}

.auth-btn--provider img {
    flex: none;
    width: 20px;
    height: 20px;
}

/* Google: обводка 1 px рамкой (box-sizing не меняет размер; в forced-colors рамка видна, тень - нет), hover - стейт-слой
   8 % цвета текста поверх заливки (§9.2): однотонный слой через background-image, не декоративный градиент. */
.auth-btn--google {
    background-color: var(--brand-google-fill);
    border-color: var(--brand-google-stroke);
    color: var(--brand-google-text);
}

.auth-btn--google:hover,
.auth-btn--google:active {
    background-image: linear-gradient(var(--brand-google-state), var(--brand-google-state));
}

/* Microsoft: hover по гайду не описан - заливка не меняется (§9.3); в dark рамки нет (прозрачная). */
.auth-btn--microsoft {
    background: var(--brand-microsoft-fill);
    border-color: var(--brand-microsoft-border);
    color: var(--brand-microsoft-text);
}

/* Apple: файл логотипа с встроенными полями высотой в кнопку (§9.4); margin -1px - логотип поверх рамки 1 px. */
.auth-btn--apple {
    gap: 0;
    padding-left: 0;
    background: var(--brand-apple-fill);
    border-color: var(--brand-apple-outline);
    color: var(--brand-apple-text);
}

.auth-btn--apple img {
    width: auto;
    height: 44px;
    margin-block: -1px;
}

.auth-providers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--ink-soft);
    font-size: 12.5px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

@media (forced-colors: active) {
    .auth-divider::before,
    .auth-divider::after {
        background: CanvasText;
    }
}

/* ===== Баннеры (§6, §7.3) ===== */

.auth-summary,
.auth-banner {
    display: flex;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--danger-border);
    border-radius: 12px;
    background: var(--danger-soft);
    color: var(--ink);
    font-size: 14px;
    overflow-wrap: anywhere; /* IdentityError с почтой/логином без пробелов (B18) не даёт скролл на 320 */
}

.auth-banner--info {
    border-color: var(--info-border);
    background: var(--info-soft);
}

.auth-banner--success {
    border-color: var(--success-border);
    background: var(--success-soft);
}

.auth-summary > svg,
.auth-banner > svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--danger);
}

.auth-banner--info > svg {
    color: var(--info);
}

.auth-banner--success > svg {
    color: var(--success);
}

.auth-summary ul,
.auth-banner ul {
    margin: 0;
    padding-left: 18px;
}

/* Содержимое баннера - один блок после иконки; абзацы внутри без UA-отступов, между абзацами 4 (#C11: текст + ссылка строкой). */
.auth-summary p,
.auth-banner p {
    margin: 0;
}

.auth-summary p + p,
.auth-banner p + p {
    margin-top: 4px;
}

/* Ссылки в баннере - ink и подчёркнутые: accent-on-soft на danger-soft даёт 4.32 (§7.3). */
.auth-summary a,
.auth-banner a {
    color: var(--ink);
    text-decoration: underline;
}

/* Пустая сводка (tag helper asp-validation-summary помечает её классом valid) не занимает места. */
.validation-summary-valid {
    display: none;
}

/* ===== Ссылки (§5.4, S-11) ===== */

/* :where - нулевая специфичность, чтобы ссылки в баннере и кнопки-ссылки перекрывали правило без !important. */
:where(.auth-link, .auth-card a:not(.auth-btn):not(.auth-brand)) {
    color: var(--accent-on-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}

:where(.auth-link, .auth-card a:not(.auth-btn):not(.auth-brand)):hover,
:where(.auth-link, .auth-card a:not(.auth-btn):not(.auth-brand)):focus-visible {
    text-decoration-thickness: 2px;
}

/* Ссылка-строка: цель 44 px. */
.auth-link--row {
    display: inline-block;
    padding-block: 12px;
    /* T-17 D-1: короткая подпись («Sign in») давала цель 42 px по ширине — минимум 44 (§3.1). */
    min-width: 44px;
    text-align: center;
}

/* Ссылка внутри текста (Refresh в мете #M9, «Sign in» в #K14): зона нажатия - псевдоэлемент (≈ 46 при 12.5 px,
   ≈ 50 при 14 px), высота строки не растёт, а кольцо фокуса обводит только текст, не соседние строки. */
.auth-link--inline-target {
    position: relative;
    white-space: nowrap; /* подписи короткие; при переносе инлайна на две строки зона ::after выродилась бы до текста */
}

.auth-link--inline-target::after {
    content: "";
    position: absolute;
    inset: -1.2em -4px;
}

.auth-foot {
    margin: 24px 0 0;
    color: var(--ink-soft);
    font-size: 14px;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Подсказка под провайдерами (#B13 на Register): по центру, 12.5 ink-soft. */
.auth-foot--note {
    font-size: 12.5px;
}

/* ===== Композиции r2 (T-05/T-06): новых токенов нет ===== */

.auth-section {
    margin: 24px 0 4px;
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 600;
}

.auth-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-rows__item {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.auth-rows__title {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.auth-rows__meta {
    color: var(--ink-soft);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.auth-rows__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.auth-rows__actions .auth-btn {
    width: auto;
    min-width: 120px;
}

/* Строка Sign-in methods (§3.7): заголовок и мета стопкой слева, кнопка справа на оба ряда; DOM плоский (§6) -
   раскладка задана областями; строка без меты - один ряд (иначе пустой ряд забрал бы лишнюю высоту кнопки). */
.auth-rows__item--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title actions"
        "meta actions";
    column-gap: 16px;
    align-items: center;
}

.auth-rows__item--split .auth-rows__title {
    grid-area: title;
}

.auth-rows__item--split .auth-rows__meta {
    grid-area: meta;
}

.auth-rows__item--split .auth-rows__actions {
    grid-area: actions;
    margin-top: 0;
}

/* Строка без кнопки (Password, Apple без отвязки - §4.13) - обычная строка без пустой колонки и зазора. */
.auth-rows__item--split:not(:has(> .auth-rows__actions)) {
    display: block;
}

@media (min-width: 360px) {
    .auth-rows__item--split:not(:has(> .auth-rows__meta)) {
        grid-template-areas: "title actions";
    }
}

@media (max-width: 359.98px) {
    .auth-rows__item--split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "meta"
            "actions";
    }

    .auth-rows__item--split .auth-rows__actions {
        margin-top: 8px;
    }
}

/* Раскрывающийся блок: details/summary без JS. */
.auth-disclosure summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}

.auth-disclosure summary::-webkit-details-marker {
    display: none;
}

.auth-disclosure summary svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--ink-soft);
    transition: transform 150ms ease-out;
}

.auth-disclosure[open] > summary svg {
    transform: rotate(90deg);
}

.auth-disclosure > summary + * {
    padding-top: 16px;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

/* Стопка primary → Cancel на подтверждениях (Logout-confirm §3.5, Consent r2): шаг 12 px, формы внутри тянутся на ширину. */
.auth-actions--confirm {
    gap: 12px;
}

.auth-actions > form {
    display: flex;
    flex-direction: column;
    gap: inherit;
}

/* Свёрнутый блок после формы (Invite: primary → <details>) - зазор между целями 16, не впритык. */
.auth-card > * + .auth-disclosure {
    margin-top: 16px;
}

/* ===== Движение (§3.2): без анимаций для prefers-reduced-motion ===== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}