/* InfinityID — renderização MÍNIMA das telas de autenticação.
   O SaaS formata (cor, fonte, raio, sombra). Este arquivo só garante que a tela
   funcione sem estilo nenhum do SaaS: UMA coluna centralizada dentro do layout
   dele (cabeçalho e rodapé do SaaS continuam), formulário em coluna, campo e
   botão clicáveis, lista de contas como lista, alerta visível, erro em destaque.
   As classes são o contrato de estilo — não renomear.

   CORES. As semânticas (erro, aviso, texto/fundo de campo travado, bordas suaves) são
   custom properties com fallback — `var(--auth-error, #b3261e)`. O SaaS de tema escuro
   as redefine num seletor dele (`:root`, `body.auth-page`…) sem sobrescrever classe.
   Pontos de extensão: --auth-error, --auth-warning, --auth-muted, --auth-disabled-bg,
   --auth-border-soft, --auth-border-section, --auth-surface-subtle. Os padrões
   cumprem 4,5:1 sobre branco (texto do erro/aviso e do campo travado). */

.auth-layout { display: flex; justify-content: center; padding: 3rem 1rem; }
.auth-panel { width: 100%; max-width: 25rem; }
.auth-panel--centered { text-align: center; }
/* A form on a centered screen sits under its centered title, not against the left edge. */
.auth-panel--centered .auth-form { margin-inline: auto; }
.auth-card { display: flex; flex-direction: column; gap: 1.5rem; }
.auth-header h1 { margin: 0 0 .375rem; font-size: 1.875rem; line-height: 1.15; }
.auth-header p, .auth-text, .auth-hint { margin: 0; }

.auth-form { display: flex; flex-direction: column; gap: 1.125rem; margin: 0; }
.auth-field { display: flex; flex-direction: column; gap: .375rem; }
.auth-field label { font-weight: 600; }
.auth-field input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%; box-sizing: border-box; min-height: 3rem;
    padding: 0 .875rem; font: inherit; border: 1px solid currentColor; border-radius: .5rem;
}
.auth-field-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.auth-field--check { flex-direction: row; align-items: center; gap: .625rem; min-height: 2.75rem; }
.auth-field--check label { font-weight: 400; }
/* Radio and checkbox at their natural size, whatever the SaaS gives every `input`
   (width, height, padding): one option per line, box on the left, label beside it. */
.auth-panel input[type="radio"], .auth-panel input[type="checkbox"] {
    flex: none; box-sizing: border-box; width: auto; height: auto; min-width: 0; min-height: 0;
    margin: 0; padding: 0; vertical-align: middle;
}
.auth-field--check { justify-content: flex-start; }
/* A group of options (the invitation role): a fieldset without the browser's frame, legend like a label. */
fieldset.auth-field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.auth-field > legend { margin: 0 0 .375rem; padding: 0; font-weight: 600; }
fieldset.auth-field > .auth-field--check { min-height: 2.25rem; }
/* Disabled looks like the locked field: grey, no distortion, no editing cursor. */
.auth-field input:disabled { background: var(--auth-disabled-bg, #eceef2); color: var(--auth-muted, #5f6475); cursor: not-allowed; }
.auth-panel input[type="radio"]:disabled, .auth-panel input[type="checkbox"]:disabled { background: none; }
.auth-field--check input:disabled + label, .auth-field--check input:disabled + .auth-field-text label { color: var(--auth-muted, #5f6475); cursor: not-allowed; }
/* Same weight as the base field rule above plus the state: otherwise `border: 1px solid currentColor`
   wins and a field in error never turns red. */
.auth-field.has-error input:not([type="checkbox"]):not([type="radio"]), .auth-field input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]) { border-width: 2px; border-color: var(--auth-error, #b3261e); }
.auth-field-error { color: var(--auth-error, #b3261e); font-size: .8125rem; }
/* S12 — e-mail locked by an invitation: still `readonly` (a disabled field is not
   submitted), and it LOOKS locked: grey, muted, no editing cursor, no focus ring. */
.auth-field input[readonly] { background: var(--auth-disabled-bg, #eceef2); color: var(--auth-muted, #5f6475); cursor: not-allowed; }
.auth-field input[readonly]:focus, .auth-field input[readonly]:focus-visible { outline: none; box-shadow: none; }

.auth-btn {
    display: inline-block; box-sizing: border-box; min-height: 3rem;
    padding: .5rem 1rem; font: inherit; text-align: center; text-decoration: none;
    color: inherit; background: transparent; border: 1px solid currentColor; border-radius: .5rem; cursor: pointer;
}
.auth-btn--primary { width: 100%; font-weight: 600; border-width: 2px; }
a.auth-btn { display: inline-flex; align-items: center; justify-content: center; }
.auth-btn:disabled { cursor: not-allowed; opacity: .6; }
/* Sent once (auth.js): the second click does nothing, and the button says it is busy. */
.auth-btn[aria-disabled="true"] { cursor: progress; opacity: .6; }
.auth-btn--outline { background: transparent; }
.auth-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
/* Two choices of the same weight, one under the other, same width (the /enter guard: stay or switch). */
.auth-actions--stack { flex-direction: column; align-items: stretch; }
.auth-actions--stack > .auth-btn { width: 100%; }
.auth-inline-form { display: inline; }
.auth-link { color: inherit; text-decoration: underline; }
button.auth-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.auth-footer p { margin: 0; font-size: .875rem; }

/* A conta é InfinityID e vale em todo o ecossistema — dito baixo, sem caixa. */
.auth-idnote {
    display: flex; align-items: flex-start; gap: .75rem;
    padding-top: 1.25rem; border-top: 1px solid var(--auth-border-soft, rgb(0 0 0 / .12));
    font-size: .84375rem; line-height: 1.55;
}
.auth-idnote-mark { flex-shrink: 0; margin-top: .0625rem; }
.auth-idnote p { margin: 0; }
.auth-idnote strong { font-weight: 600; }

.auth-alert {
    display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;
    padding: .75rem .875rem; border: 1px solid currentColor; border-radius: .5rem; transition: opacity .3s;
}
.auth-alert--error, .auth-alert--danger { border-width: 2px; border-color: var(--auth-error, #b3261e); }
/* The type is also said in text (.auth-sr-only) and by the glyph: never by colour alone (WCAG 1.4.1). */
.auth-alert > span { min-width: 0; overflow-wrap: anywhere; }
/* inline-block: a SaaS reset like `svg { display: block }` would put the glyph on a line of its own. */
.auth-alert-mark { display: inline-block; flex: none; vertical-align: -.25em; margin-right: .375rem; }
.auth-alert--error .auth-alert-mark, .auth-alert--danger .auth-alert-mark { color: var(--auth-error, #b3261e); }
.auth-alert--warning .auth-alert-mark { color: var(--auth-warning, #8a5a00); }
.auth-alert:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.auth-alert-close { flex: none; min-width: 2rem; min-height: 2rem; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.auth-accounts { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.auth-account {
    display: flex; align-items: center; gap: .75rem; width: 100%; box-sizing: border-box;
    min-height: 3rem; padding: .5rem .75rem; font: inherit; text-align: left;
    color: inherit; background: transparent; border: 1px solid currentColor; border-radius: .5rem; cursor: pointer;
}
.auth-account:disabled { cursor: not-allowed; opacity: .6; }
.auth-account-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.auth-account-name { font-weight: 700; overflow-wrap: anywhere; }
.auth-account-meta, .auth-account-state { font-size: .875rem; }
/* Without the SaaS stylesheet the product card (a link) is not underlined inside, and its initial and arrow have a shape. */
a.auth-account { text-decoration: none; }
.auth-account-avatar { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid currentColor; border-radius: 50%; font-weight: 700; }
.auth-account-go { flex: none; }

.auth-btn--danger { border-color: var(--auth-error, #b3261e); color: var(--auth-error, #b3261e); }
.auth-recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .75rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.auth-recovery-codes code, .auth-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.0625rem; letter-spacing: .06em; user-select: all; }
.auth-sessions .auth-session { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--auth-border-soft, rgb(0 0 0 / .12)); }
/* The text takes the line (at least 14rem, so a long e-mail is not broken letter by letter); the actions wrap below it. */
.auth-sessions .auth-session .auth-account-body { flex: 1 1 14rem; }
.auth-session-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.auth-session--current .auth-account-name { font-weight: 700; }

.auth-status { font-size: 2.5rem; }

/* S20 — security screen: blocks with breathing room; two columns on a wide screen. */
.auth-panel--wide { max-width: 56rem; }
.auth-security { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.auth-section {
    display: flex; flex-direction: column; gap: 1rem; min-width: 0;
    padding: 1.25rem; border: 1px solid var(--auth-border-section, rgb(0 0 0 / .16)); border-radius: .75rem;
}
.auth-section h2 { margin: 0; font-size: 1.125rem; line-height: 1.3; }
.auth-section p { margin: 0; }
.auth-alert--required { display: block; border-width: 2px; font-weight: 600; }
.auth-btn--secondary { width: 100%; font-weight: 600; background: var(--auth-surface-subtle, rgb(0 0 0 / .05)); border-style: dashed; }
.auth-btn--danger { width: 100%; }
.auth-qr { width: 100%; max-width: 15rem; align-self: center; }
.auth-qr svg { display: block; width: 100%; height: auto; }
.auth-secret { overflow-wrap: anywhere; }

@media (min-width: 48rem) {
    .auth-security--off, .auth-security--setup, .auth-security--enabled { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .auth-security--setup { grid-template-areas: "state qr" "confirm qr"; grid-template-rows: auto 1fr; }
    .auth-security--setup .auth-section--state { grid-area: state; }
    .auth-security--setup .auth-section--qr { grid-area: qr; }
    .auth-security--setup .auth-section--confirm { grid-area: confirm; }
    .auth-security--enabled { grid-template-areas: "state state" "codes disable"; }
    .auth-security--enabled .auth-section--state { grid-area: state; }
    .auth-security--enabled .auth-section--codes { grid-area: codes; }
    .auth-security--enabled .auth-section--disable { grid-area: disable; }
}

:where(.auth-btn, .auth-account, .auth-link, .auth-alert-close, .auth-field input, .auth-idnote a, .auth-footer a, .auth-field-row a, .auth-alert a, .auth-hint a, .auth-text a, .auth-field textarea, .auth-field select):focus-visible {
    outline: 2px solid currentColor; outline-offset: 2px;
}

@media (max-width: 30rem) {
    .auth-layout { padding: 2rem 1.25rem; }
    .auth-header h1 { font-size: 1.625rem; }
    /* 360 px: the actions go under the text, each button the width of the row. */
    .auth-session-actions { flex: 1 1 100%; flex-direction: column; }
    .auth-session-actions .auth-inline-form, .auth-session-actions .auth-btn { display: block; width: 100%; }
}

/* No mailer (MailReadiness): the e-mail flows keep their form on screen, locked under the warning. */
.auth-alert--warning { border-width: 2px; border-color: var(--auth-warning, #8a5a00); }
.auth-form-lock { display: flex; flex-direction: column; gap: 1.125rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.auth-form-lock:disabled { opacity: .6; }

/* Text for assistive technology only (alert type, "opens in a new tab"). */
.auth-sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* A checkbox with a text block (label + error below it): the box stays at the first line. */
.auth-field-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.auth-field--check:has(.auth-field-text) { align-items: flex-start; }