/* ══════════════════════════════════════════════════════════════════════════
   Playlist Garden — экраны входа, регистрации и всего вокруг.

   Один разворот: слева узкая колонка набора, справа — полоса сухого сада,
   уходящая в поля листа. Никаких карточек и рамок: форма стоит прямо на
   бумаге, как заметка на полях газеты.

   Токены и компоненты — в broadsheet.css, он подключается первым.
   ══════════════════════════════════════════════════════════════════════ */

/* Лист держит поля и центровку разворота, полоса сада привязана к нему. */
.auth-sheet {
    position: relative;
}

/* Колонка набора уже листа: 472px — мера, на которой строка формы
   читается одним движением глаза. Position — чтобы набор лёг поверх сада. */
.auth {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 472px;
    padding-block: clamp(48px, 8vw, 78px) clamp(56px, 9vw, 96px);
}

/* Полоса сада выходит за поля листа вправо и растворяется к центру, чтобы
   не спорить с набором. */
.auth__art {
    position: absolute;
    inset: 0 calc(var(--sheet-gutter) * -1) 0 auto;
    width: min(560px, 46vw);
    pointer-events: none;
    -webkit-mask-image: radial-gradient(120% 90% at 60% 50%, #000 45%, transparent 100%);
    mask-image: radial-gradient(120% 90% at 60% 50%, #000 45%, transparent 100%);
}

.auth__art svg {
    width: 100%;
    height: 100%;
}

.auth__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Метка вместо кикера — она не должна растягиваться на ширину колонки. */
.auth__head > .tag {
    align-self: flex-start;
}

.auth__title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(32px, 4.4vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: pretty;
}

.auth__intro {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.72;
    text-wrap: pretty;
}

/* Тот же абзац, когда он объясняет отказ: вторая краска вместо приглушения. */
.auth__intro--alert {
    color: var(--color-accent-2-800);
    opacity: 1;
}

/* Форма держит тот же вертикальный ритм, что и колонка целиком. */
.auth__form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.auth__fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

/* Кнопка и подпись рядом с ней — «отправить ещё раз · можно через 0:47». */
.auth__actions--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.auth__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) 22px;
    font-size: 14px;
}

/* Строка-приписка под действием: «Уже с нами? Войти». */
.auth__aside {
    font-size: 14px;
}

.auth__note {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-neutral-700);
    text-wrap: pretty;
}

.auth__meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth__meta-label {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-neutral-700);
}

.auth__meta-value {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.8;
}

/* Имя вошедшего пользователя в шапке — рядом с «Выйти». */
.auth-user {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
}

.auth-user__name {
    color: var(--color-neutral-700);
}

/* Кнопка выхода уходит POST-формой, но в наборе остаётся ссылкой. */
.auth-user__logout {
    font: inherit;
    color: var(--color-accent-700);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.auth-user__logout:hover {
    color: var(--color-accent-600);
    text-decoration: underline;
}

/* — ряд сервисов на экране подключения — */
.auth--wide {
    max-width: 640px;
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.service-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.service-row__mark {
    width: 44px;
    flex: none;
}

.service-row__caption {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.service-row__name {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: -0.01em;
}

.service-row--pending .service-row__name {
    color: var(--color-neutral-600);
}

.service-row__note {
    font-size: 13px;
    color: var(--color-neutral-700);
}

.service-row__action {
    flex: none;
}

/* Полоса сада отнимает у набора слишком много места на узком экране —
   там колонка занимает лист целиком, а сад уходит. */
@media (max-width: 900px) {
    .auth__art {
        display: none;
    }

    .auth,
    .auth--wide {
        max-width: none;
    }
}