/* =============================================================================
 * atrilha — folha de estilo das páginas públicas
 *
 * Carregada APÓS app.css em layout/public.html. Depende dos tokens, reset e
 * componentes base definidos em app.css.
 * ============================================================================= */

/* =============================================================================
 * Telas específicas (US-001)
 * ============================================================================= */

.home,
.comecar,
.cadastro-concluido {
    max-width: 38rem;
    margin: 0 auto;
}

/* Wrappers de telas públicas que ficam imediatamente abaixo do public-header
 * (margens próprias para conteúdo respirar abaixo do header sticky). */
.cadastro-form,
.coming-soon,
.placeholder,
.verify-email,
.verify-email-result {
    margin: 0 auto;
    max-width: 28rem;
    padding: var(--space-8) var(--space-4) var(--space-10);
}
.cadastro-form__intro {
    margin-bottom: var(--space-2);
}
.cadastro-form__intro h1 {
    margin-top: var(--space-2);
}
.coming-soon h1 {
    margin-bottom: var(--space-3);
}
.coming-soon p {
    color: var(--color-text-body);
    line-height: 1.5;
    margin: 0 0 var(--space-3);
}
.coming-soon__back {
    margin-top: var(--space-6);
}
.placeholder {
    text-align: center;
}
.placeholder h1 {
    margin: var(--space-2) 0 var(--space-3);
}
.placeholder__lead {
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}
.placeholder__logout {
    margin-top: var(--space-8);
}

/* Wrapper de conteúdo da tela "escolher método" — fica dentro do <main>,
 * sob o header (que ocupa a viewport inteira). Padding vertical próprio. */
.escolher-metodo {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 0 auto;
    max-width: 26rem;
    padding: var(--space-8) var(--space-4) var(--space-10);
    width: 100%;
}
.escolher-metodo__intro {
    margin-bottom: var(--space-8);
}
.escolher-metodo__intro .overline {
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
}
.escolher-metodo__intro h1 {
    color: var(--color-text-display);
    font-family: var(--font-display);
    font-size: 1.75rem; /* ~28px, como a referência (.title) */
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: var(--space-3);
}
.escolher-metodo__intro p {
    color: var(--color-neutral-600); /* ink70 */
    font-size: var(--text-base);
    line-height: 1.5;
}

/* CTA primário — card coral "Cadastrar com e-mail". */
.cta-primary {
    align-items: center;
    background: var(--color-primary);
    border: 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--button-primary-shadow);
    color: var(--color-on-primary);
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    min-height: 62px;
    padding: 0 var(--space-4);
    text-align: left;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out-soft);
    width: 100%;
}
.cta-primary:hover {
    background: var(--color-primary-hover);
}
.cta-primary__icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    display: flex;
    flex-shrink: 0;
    height: 38px;
    justify-content: center;
    width: 38px;
}
.cta-primary__icon svg {
    height: 20px;
    width: 20px;
}
.cta-primary__text {
    flex: 1;
}
.cta-primary__text b {
    display: block;
    font-family: var(--font-brand);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
}
.cta-primary__text span {
    display: block;
    font-size: var(--text-xs);
    margin-top: 1px;
    opacity: 0.9;
}
.cta-primary__arrow {
    flex-shrink: 0;
    height: 16px;
    width: 10px;
}

/* "Outras formas" — separador com rótulo. */
.soon-head {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    margin: var(--space-8) 0 var(--space-3);
}
.soon-head__line {
    background: var(--color-divider);
    flex: 1;
    height: 1px;
}
.soon-head__label {
    color: var(--color-neutral-400);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Footer "Já tem conta? Entrar" — fixado no fim da página. */
.me-foot {
    color: var(--color-text-display);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    margin: 0;
    margin-top: auto;
    padding-top: var(--space-8);
    text-align: center;
}
.me-foot__link {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}
.me-foot__link:hover {
    color: var(--color-primary-hover); /* hover por cor, sem sublinhado */
}

.comecar__intro h1 {
    margin-top: var(--space-2);
}
.comecar__lead {
    color: var(--color-text-muted);
    margin-top: var(--space-3);
}
.comecar__paths {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.home__lead {
    color: var(--color-text-muted);
    margin: var(--space-3) 0 var(--space-8);
}
.home__cta {
    margin-top: var(--space-6);
}

.cadastro-form__lead {
    color: var(--color-text-muted);
    margin: var(--space-3) 0 var(--space-8);
}
.cadastro-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.cadastro-form__actions {
    margin-top: var(--space-4);
}
/* Consentimento — aceite de Termos e Política no cadastro (US-115-c). */
.cadastro-form__consent {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.consent-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.consent-item__checkbox {
    flex: 0 0 auto;
    width: var(--space-5);
    height: var(--space-5);
    margin-top: 0.125rem;
    accent-color: var(--color-primary-500);
    cursor: pointer;
}
.consent-item__label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.4;
    cursor: pointer;
}
.consent-item--error .consent-item__label {
    color: var(--color-primary-700);
}

.avatar-hint {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin: var(--space-1) 0;
}

/* =============================================================================
 * Bloco social (escolher método de cadastro) — reutilizável
 *
 * Classes padronizadas para os botões Google/Apple (desativados) e o botão
 * de e-mail (ativo), conforme protótipos em doc/UX/prototypes/.
 * ============================================================================= */

.social-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--space-12);
    padding: var(--space-3) var(--button-padding-x-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-base);
    color: var(--color-text-body);
    transition: background-color var(--duration-fast) var(--ease-out-soft);
}
.btn-social:hover:not(:disabled) {
    background: var(--color-surface-muted);
}
.btn-social:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.btn-social:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-social svg,
.btn-social img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.btn-social:disabled .logo-google {
    filter: grayscale(1);
}

.social-note {
    margin-top: var(--space-3);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Aviso calmo sobre vinculação (info) */
.note {
    margin-top: var(--space-8);
    display: flex;
    gap: var(--space-3);
    background: var(--color-info-100);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.note svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-info-700);
}
.note p {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: 1.5;
}

/* =============================================================================
 * Telas públicas (CHORE-016) — home, comecar, login
 *
 * Aplicam os protótipos aprovados em doc/UX/prototypes/{home,comecar,login}.html
 * sobre o sistema de componentes já existente. Reaproveitam .btn, .btn-primary,
 * .btn-lg, .btn-md, .btn-ghost, .btn-social, .input-field, .input-group,
 * .input-label, .card, .card--interactive, .overline, .alert, .brand,
 * .brand-mark, .brand-wordmark. Nenhum hex é redeclarado — tokens vêm de var().
 * ============================================================================= */

/* ----- Shell público (layout/public.html) -----
 * O <body> usa .public-shell para garantir altura mínima total e layout em
 * coluna nas telas que precisam empurrar o rodapé legal para o fim (home).
 */
.public-shell {
    background: var(--color-bg);
    color: var(--color-text-body);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* =============================================================================
 * Home (GET /) — protótipo home.html
 * ============================================================================= */

/* Sobrescreve a regra antiga `.home { max-width: 38rem }` para o layout
 * do hero, mais estreito (30rem) e em coluna vertical com flex. */
.home {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 0 auto;
    max-width: 30rem;
    padding: var(--space-4) var(--space-4) var(--space-8);
    width: 100%;
}

.home__hero {
    align-items: flex-start;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-5);
    justify-content: center;
    padding: var(--space-8) 0;
}
.home__art {
    align-self: center;
    height: auto;
    max-width: 320px; /* ilustração com mais presença — marcos maiores na página */
    width: 100%;
}

.home__title {
    color: var(--color-text-display);
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em; /* mais apertado, como a referência (-1.4px/42px) */
    line-height: 1.02;
    margin: 0;
}
.home__title-accent {
    color: var(--color-primary);
}

/* Eyebrow da home — mais encorpado e com tracking largo, como a referência
   (.eyebrow: 700 / letter-spacing 1.4px). Escopo só na home. */
.home__hero .overline {
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
}

/* Sobrescreve a regra antiga `.home__lead` para ficar maior e em corpo (body)
 * — o protótipo trata o lead como "body-lg" sobre fundo claro, não como
 * legenda silenciada. */
.home__lead {
    color: var(--color-neutral-600); /* ink70 da referência (#5c544c) */
    font-size: var(--text-base);
    line-height: 1.5;
    margin: 0;
    max-width: 19rem; /* ~300px, como a referência */
}

.home__actions {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
/* Sobrescreve a regra antiga `.home__cta` (margem) — agora é só wrapper do CTA.
   Botão "Começar" centralizado em relação ao título e com presença maior. */
.home__cta {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0;
    width: 100%;
}
.home__cta .btn-lg {
    font-size: var(--text-lg);
    min-height: var(--button-primary-height);
    padding-left: var(--button-padding-x-lg);
    padding-right: var(--button-padding-x-lg);
    width: 100%;
}
@media (min-width: 640px) {
    .home__cta .btn-lg {
        width: 100%;
    }
}
.home__cta .btn-lg svg {
    height: 18px;
    width: 18px;
}
/* Linha "Já tenho conta. Entrar" (home) — texto simples; apenas "Entrar" é link. */
.home__signin {
    margin: 0;
    text-align: center;
    color: var(--color-text-display); /* "ink" da referência — linha escura/bold */
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
}
.home__signin-link {
    color: var(--color-primary); /* só "Entrar" em coral; herda o peso 700 da linha */
    text-decoration: none;
}
.home__signin-link:hover {
    color: var(--color-primary-hover); /* vermelho coral mais forte no hover */
    text-decoration: underline;
}

.home__legal {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
    margin: 0 auto;
    max-width: 19rem; /* ~300px, como a referência */
    padding: var(--space-4) var(--space-4) var(--space-6);
    text-align: center;
}
.home__legal a {
    color: var(--color-primary); /* coral, como a referência (.terms a) */
}

/* =============================================================================
 * Comecar (GET /comecar) — protótipo comecar.html
 * ============================================================================= */

/* Sobrescreve a regra antiga `.comecar { max-width: 38rem }` — protótipo
 * quer 32rem e padding vertical próprio. */
.comecar {
    margin: 0 auto;
    max-width: 32rem;
    padding: var(--space-8) var(--space-4) var(--space-10);
}

.comecar__intro {
    margin-bottom: var(--space-10);
}
.comecar__intro .overline {
    margin-bottom: var(--space-2);
}
.comecar__intro h1 {
    margin: 0 0 var(--space-3);
}
/* Sobrescreve `.comecar__lead` antiga para alinhar com protótipo (body sobre
 * fundo claro — não muted). */
.comecar__lead {
    color: var(--color-text-body);
    font-size: var(--text-base);
    line-height: 1.5;
    margin: 0;
}

/* `.comecar__paths` já é `display: grid; gap: var(--space-4)` na regra antiga;
 * só zeramos a margem-top (intro já controla o espaço acima). */
.comecar__paths {
    margin-top: 0;
}

/* Cartão de papel — composição sobre .card.card--interactive (já existente),
 * adicionando layout horizontal interno. */
.comecar__role-card {
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: var(--space-4);
    min-height: var(--space-11);
}
.comecar__role-card:hover {
    border-color: var(--color-border-strong);
}
.comecar__role-icon {
    align-items: center;
    border-radius: var(--radius-md);
    display: inline-flex;
    flex-shrink: 0;
    height: 48px;
    justify-content: center;
    width: 48px;
}
.comecar__role-icon svg {
    height: 26px;
    width: 26px;
}
.comecar__role-icon--teen {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}
.comecar__role-icon--guard {
    background: var(--color-info-100);
    color: var(--color-info-700);
}
.comecar__role-text {
    flex: 1;
    min-width: 0;
}
.comecar__role-text h2 {
    color: var(--color-text-display);
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-1);
}
.comecar__role-text p {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0;
}
.comecar__role-arrow {
    align-self: center;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition:
        color var(--duration-base) var(--ease-out-soft),
        transform var(--duration-base) var(--ease-out-soft);
}
.comecar__role-card:hover .comecar__role-arrow {
    color: var(--color-primary);
    transform: translateX(3px);
}
.comecar__role-arrow svg {
    display: block;
    height: 20px;
    width: 20px;
}

.comecar__note {
    background: var(--color-info-100);
    border-radius: var(--radius-lg);
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding: var(--space-4);
}
.comecar__note svg {
    color: var(--color-info-700);
    flex-shrink: 0;
    height: 20px;
    width: 20px;
}
.comecar__note p {
    color: var(--color-text-body);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0;
}

.comecar__login-hint {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-8);
    text-align: center;
}
.comecar__login-link {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

@media (prefers-reduced-motion: reduce) {
    .comecar__role-arrow {
        transition: none;
    }
    .comecar__role-card:hover .comecar__role-arrow {
        transform: none;
    }
}

/* =============================================================================
 * Login (GET /login) — protótipo login.html
 *
 * Preserva o contrato funcional intacto: form action="/login" POST, CSRF
 * hidden, name="username"/"password", banners data-error/data-state, toggle
 * de senha em Alpine, botão Google disabled (REF-003) com
 * data-test="cta-google-disabled".
 * ============================================================================= */

.login {
    margin: 0 auto;
    max-width: 26rem;
    padding: var(--space-8) var(--space-4) var(--space-10);
}
/* Variante que preenche a altura disponível (esqueci-senha), permitindo
   empurrar o rodapé de ajuda para o fim da página via margin-top:auto. */
.login--fill {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
}
.login__form-view {
    display: flex;
    flex: 1;
    flex-direction: column;
}

/* Tile de ícone coral no topo de telas de auth focadas (ex.: esqueci-senha).
   coral-soft de fundo + ícone coral, ecoando a referência (.ico-top). */
.login__icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-xl);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
}
.login__icon svg {
    width: 28px;
    height: 28px;
}

.login__intro {
    margin-bottom: var(--space-6);
}
.login__intro .overline {
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-bold); /* eyebrow encorpado, como a referência */
    letter-spacing: 0.12em;
}
.login__intro h1 {
    margin: 0 0 var(--space-2);
    font-size: 1.75rem; /* ~28px, como a referência (.title) */
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
}
.login__lead {
    color: var(--color-neutral-600); /* ink70 da referência (#5c544c) */
    font-size: var(--text-base);
    margin: 0;
}

/* Alert com ícone à esquerda (variantes .alert--error/.alert--warning/.alert--info
 * já existem em app.css; aqui só ajustamos espaçamento para o protótipo). */
.login__alert {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    line-height: 1.45;
    margin-bottom: var(--space-5);
}
.login__alert svg {
    flex-shrink: 0;
    height: 18px;
    margin-top: 1px;
    width: 18px;
}

/* Form em coluna com gap padrão (5). */
.login__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
/* Zera o margin-bottom padrão do .input-group dentro do login (gap do form
 * controla o espaço entre campos). */
.login__form .input-group {
    margin-bottom: 0;
}

/* "Esqueci minha senha" — dentro do grupo da senha (logo abaixo do campo),
 * alinhado à direita. align-self funciona porque o .input-group é flex column
 * (eixo cruzado = horizontal). Fica acima do botão Entrar via gap do form. */
.login__forgot {
    align-self: flex-end;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.login__forgot:hover {
    color: var(--color-text-body);
}

/* Campo de senha com botão "mostrar/esconder" embutido. Não usa flex
 * porque o toggle é posicionado absolutamente; flex faria o input encolher
 * abaixo do width:100% do form devido à largura intrínseca do padding. */
.login__password-row {
    position: relative;
}
.login__password-input {
    padding-right: 5.5rem;
}
.login__password-toggle {
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--color-text-link);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    min-height: var(--space-11);
    padding: 0 var(--space-3);
    position: absolute;
    right: var(--space-1);
    top: 50%;
    transform: translateY(-50%);
}
.login__password-toggle:hover {
    background: var(--color-surface-muted);
}

/* Divisor "ou" entre form e bloco de métodos sociais. */
.login__divider {
    align-items: center;
    color: var(--color-text-muted);
    display: flex;
    font-size: var(--text-sm);
    gap: var(--space-3);
    margin: var(--space-6) 0;
}
.login__divider::before,
.login__divider::after {
    background: var(--color-divider);
    content: "";
    flex: 1;
    height: 1px;
}
/* Suprime a borda em volta dos elementos do divisor para que ele fique limpo. */
.login__divider span {
    font-size: var(--text-sm);
    padding: 0 var(--space-2);
}

/* Links de apoio em coluna, centralizados. */
.login__links {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-8);
}
.login__link {
    align-items: center;
    border-radius: var(--radius-md);
    display: inline-flex;
    font-size: var(--text-sm);
    min-height: var(--space-11);
    padding: var(--space-2) var(--space-3);
}
.login__link--muted {
    color: var(--color-text-muted);
}
.login__link-strong {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* "Voltar ao login" (esqueci-senha) — texto centrado escuro/bold, como a
   referência (.center-link). Distinto do .login__link discreto do login. */
.login__back-to {
    margin: var(--space-5) 0 0;
    text-align: center;
}
.login__back-to a {
    color: var(--color-text-display);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
}
.login__back-to a:hover {
    color: var(--color-primary); /* hover por cor, sem sublinhar o texto */
}
/* =============================================================================
 * Confirmação de envio de redefinição (esqueci-senha, estado "sent") —
 * layout "cardless": envelope com anéis + hero centrado, ações fixas no fim.
 * ============================================================================= */
.sent {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.sent__hero {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Envelope 96px com 3 anéis concêntricos verdes (verde-claro translúcido). */
.sent__env {
    align-items: center;
    display: flex;
    height: 96px;
    justify-content: center;
    margin-bottom: var(--space-6);
    position: relative;
    width: 96px;
}
.sent__ring {
    background: var(--color-success-100);
    border-radius: var(--radius-full);
    inset: 0;
    position: absolute;
}
.sent__ring--2 {
    inset: -12px;
    opacity: 0.45;
}
.sent__ring--3 {
    inset: -24px;
    opacity: 0.2;
}
.sent__env svg {
    position: relative;
    z-index: 1;
}

.sent__title {
    font-size: 1.6875rem; /* ~27px, como a referência */
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    margin: 0;
}
.sent__lead {
    color: var(--color-neutral-600); /* ink70 */
    font-size: var(--text-base);
    line-height: 1.55;
    margin: var(--space-3) 0 0;
    max-width: 20rem;
}
.sent__mail {
    color: var(--color-text-display);
    font-weight: var(--font-weight-bold);
}
/* Pílula de expiração — clock + texto, fundo neutro suave. */
.sent__expiry {
    align-items: center;
    background: var(--color-surface-muted);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-4);
    white-space: nowrap;
}
.sent__expiry svg {
    flex-shrink: 0;
    height: 13px;
    width: 13px;
}
.sent__cta {
    margin-top: var(--space-8);
}
.sent__cta svg {
    height: 16px;
    width: 16px;
}

/* Bloco de ações — fixado no fim da página. */
.sent__actions {
    margin-top: auto;
    padding-top: var(--space-8);
}

/* Linha de reenvio — "Não chegou? ↻ Reenviar em 0:30". Liberado após 30s. */
.resend-line {
    align-items: center;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    gap: var(--space-2);
    justify-content: center;
}
.resend-line b {
    color: var(--color-text-display);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-bold);
}
.resend-line__btn {
    align-items: center;
    background: none;
    border: 0;
    color: var(--color-neutral-400); /* "faint" enquanto em cooldown */
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: var(--font-weight-bold);
    gap: var(--space-1);
    padding: 0;
}
.resend-line__btn svg {
    height: 14px;
    width: 14px;
}
.resend-line__btn:not(:disabled) {
    color: var(--color-info-500); /* habilitado = teal */
}
.resend-line__btn:hover:not(:disabled) {
    color: var(--color-info-700);
}
.resend-line__btn:disabled {
    cursor: default;
}

/* Divisor e par de links "Usar outro e-mail | Voltar ao login". */
.sent__sep {
    background: var(--color-divider);
    height: 1px;
    margin: var(--space-5) var(--space-1);
}
.sent__link-pair {
    align-items: stretch;
    display: flex;
    justify-content: center;
}
.sent__link {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    padding: var(--space-2) var(--space-1);
    text-align: center;
}
.sent__link--other {
    color: var(--color-text-display);
}
.sent__link--other:hover {
    color: var(--color-primary);
}
.sent__link--login {
    color: var(--color-primary);
}
.sent__link--login:hover {
    color: var(--color-primary-hover);
}
.sent__link-div {
    background: var(--color-divider);
    margin: var(--space-1) 0;
    width: 1px;
}

/* Dica no rodapé. */
.sent__hint {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
    margin: var(--space-5) 0 0;
    text-align: center;
}
.sent__hint strong {
    color: var(--color-neutral-600);
}

/* Rodapé de ajuda (esqueci-senha) — dica de spam + link de contato (mailto).
   margin-top:auto fixa o bloco no fim da página (pai .login__form-view é flex
   column que preenche a altura). Cores fiéis à referência: texto muted quente
   e link no teal claro (--teal #2BA6C4 ≈ --color-info-500). */
.login__help {
    margin-top: auto;
    padding-top: var(--space-8);
    text-align: center;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
}
.login__help a {
    color: var(--color-info-500);
    font-weight: var(--font-weight-bold);
}

/* =============================================================================
 * Telas de verificação de e-mail (verificar-email.html, verify-email-resultado.html)
 * ============================================================================= */

/* Botão estilo link (reset reaproveitável). */
.link-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--color-text-link);
    text-decoration: underline;
}
.link-button:hover {
    color: var(--color-primary);
}

/* =============================================================================
 * Confirmação de e-mail (verificar-email) — layout "cardless": envelope com
 * anéis + hero centrado, OTP, ações fixas no fim.
 * ============================================================================= */
.verify {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 0 auto;
    max-width: 28rem;
    padding: var(--space-8) var(--space-4) var(--space-8);
    width: 100%;
}
.verify__hero {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Envelope 96px com 3 anéis concêntricos verdes. */
.verify__env {
    align-items: center;
    display: flex;
    height: 96px;
    justify-content: center;
    margin-bottom: var(--space-6);
    position: relative;
    width: 96px;
}
.verify__ring {
    background: var(--color-success-100);
    border-radius: var(--radius-full);
    inset: 0;
    position: absolute;
}
.verify__ring--2 {
    inset: -12px;
    opacity: 0.45;
}
.verify__ring--3 {
    inset: -24px;
    opacity: 0.2;
}
.verify__env svg {
    position: relative;
    z-index: 1;
}

.verify__title {
    font-size: 1.6875rem; /* ~27px */
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    margin: 0;
}
.verify__lead {
    color: var(--color-neutral-600); /* ink70 */
    font-size: var(--text-base);
    line-height: 1.55;
    margin: var(--space-3) 0 0;
    max-width: 20rem;
}
.verify__lead-mail {
    color: var(--color-text-display);
    font-weight: var(--font-weight-bold);
}
.verify__helper {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: var(--space-2) 0 0;
}
.verify__submit {
    margin-top: var(--space-6);
}

/* Ações fixas no fim da página. */
.verify__actions {
    margin-top: auto;
    padding-top: var(--space-8);
    text-align: center;
}
.verify__resend {
    align-items: center;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    gap: var(--space-2);
    justify-content: center;
}
.verify__resend b {
    color: var(--color-text-display);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-bold);
}
.verify__resend-btn {
    background: none;
    border: 0;
    color: var(--color-primary); /* habilitado = coral */
    cursor: pointer;
    font: inherit;
    font-weight: var(--font-weight-bold);
    padding: 0;
}
.verify__resend-btn:disabled {
    color: var(--color-neutral-400); /* faint no cooldown */
    cursor: default;
}
.verify__sep {
    background: var(--color-divider);
    height: 1px;
    margin: var(--space-5) var(--space-1);
}
.verify__exit {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-neutral-600);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: var(--font-weight-bold);
    gap: var(--space-2);
    justify-content: center;
    margin: 0 auto;
}
.verify__exit:hover {
    color: var(--color-text-display);
}
.verify__exit svg {
    height: 17px;
    width: 17px;
}

/* Código de verificação — 6 inputs (v2.1). */
.otp-form {
    margin-top: var(--space-2);
}
.otp-inputs {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin: var(--space-8) 0 0;
}
.otp-input {
    width: 48px;
    height: 60px;
    text-align: center;
    font-family: var(--font-brand);
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-display);
    background: var(--color-surface);
    border: 1.5px solid var(--color-divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    caret-color: var(--color-primary);
    transition:
        border-color var(--duration-fast) var(--ease-out-soft),
        box-shadow var(--duration-fast) var(--ease-out-soft);
}
/* Era `rgba(238,108,92,.14)`: 1,15:1 composto sobre o fundo. Nos seis campos
   da verificação de e-mail — os únicos controles da tela — não dava para saber
   em qual dígito o foco estava. */
.otp-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}
.otp-input.is-filled {
    border-color: var(--color-primary);
}

/* =============================================================================
 * Páginas de erro (error/403.html, 404.html, 5xx.html)
 * ============================================================================= */

.error-page {
    margin: 0 auto;
    max-width: 28rem;
    padding: var(--space-16) var(--space-4);
    text-align: center;
}
.error-page__code {
    color: var(--color-neutral-300);
    font-size: 3.75rem;
    font-weight: var(--font-weight-semibold);
    margin: 0;
}
.error-page__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-4);
}
.error-page__lead {
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}
.error-page__link {
    color: var(--color-text-link);
    display: inline-block;
    margin-top: var(--space-6);
    text-decoration: underline;
}
.error-page__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
}
.error-page__links a {
    color: var(--color-text-link);
    text-decoration: underline;
}

/* 404 (não autenticado) — hero centrado com ilustração "saiu da trilha". */
.notfound {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-8) var(--space-6);
    text-align: center;
}
.notfound__art {
    height: 172px;
    margin-bottom: var(--space-2);
    position: relative;
    width: 240px;
}
.notfound__code {
    align-items: center;
    color: var(--color-neutral-100); /* marca d'água bege clara */
    display: flex;
    font-family: var(--font-display);
    font-size: 128px;
    font-weight: var(--font-weight-bold);
    inset: 0;
    justify-content: center;
    letter-spacing: -4px;
    line-height: 1;
    position: absolute;
    user-select: none;
}
.notfound__art svg {
    position: relative;
    z-index: 1;
}
.notfound__title {
    font-size: 1.625rem; /* ~26px */
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    margin: var(--space-4) 0 0;
}
.notfound__lead {
    color: var(--color-neutral-600); /* ink70 */
    font-size: var(--text-base);
    line-height: 1.5;
    margin: var(--space-3) 0 0;
    max-width: 19rem;
}
.notfound__cta {
    margin-top: var(--space-8);
    max-width: 300px;
    width: 100%;
}
.notfound__link {
    color: var(--color-info-500); /* teal, como a referência */
    font-weight: var(--font-weight-bold);
    margin-top: var(--space-4);
}
.notfound__link:hover {
    color: var(--color-info-700); /* hover por cor, sem sublinhado */
}
/* Variante escura (404 da área logada: "Ver minha trilha"). */
.notfound__link--ink {
    color: var(--color-text-display);
}
.notfound__link--ink:hover {
    color: var(--color-primary);
}

/* =============================================================================
 * Tela pública "Conta desativada" (/app/conta-excluida — US-068 CA #2/#3).
 * Espelha o padrão de tela pública de status (.verify / .notfound /
 * .error-page): hero centralizado (ilustração + h1 + lead + nota) + CTA
 * ancorado ao rodapé. Zero token/hex novo (doc/UX/us-068-spec.md §9).
 * ============================================================================= */
.farewell {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 0 auto;
    max-width: 28rem;
    padding: var(--space-8) var(--space-4) var(--space-8);
    width: 100%;
}
.farewell__hero {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Anéis concêntricos neutros + "check" calmo (encerramento sereno). */
.farewell__badge {
    align-items: center;
    display: flex;
    height: 96px;
    justify-content: center;
    margin-bottom: var(--space-6);
    position: relative;
    width: 96px;
}
.farewell__ring {
    background: var(--color-neutral-100);
    border-radius: var(--radius-full);
    inset: 0;
    position: absolute;
}
.farewell__ring--2 {
    inset: -12px;
    opacity: 0.45;
}
.farewell__ring--3 {
    inset: -24px;
    opacity: 0.2;
}
.farewell__badge svg {
    position: relative;
    z-index: 1;
}

.farewell__title {
    font-size: 1.6875rem; /* ~27px */
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    margin: 0;
}
.farewell__lead {
    color: var(--color-neutral-600); /* ink70 */
    font-size: var(--text-base);
    line-height: 1.55;
    margin: var(--space-3) 0 0;
    max-width: 20rem;
}
.farewell__note {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: var(--space-4) 0 0;
    max-width: 20rem;
}

/* Ação fixa no fim da página. */
.farewell__actions {
    margin-top: auto;
    padding-top: var(--space-8);
    text-align: center;
}
.farewell__actions .btn {
    width: 100%;
}