/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
/* Hallmark · genre: modern-minimal · macrostructure: Workbench · design-system: design.md · designed-as-app */

/* tone: calm technical warmth · palette anchor: Kavto teal · contrast: pass (40-41) · mobile: pass (34, 49-57) */
.auth-flow {
    width: min(100%, 58rem);
    margin: var(--sec-space-m) auto;
    padding: var(--space-xl);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-shell);
    box-shadow: var(--shadow-card);
}

.auth-flow,
.auth-flow * {
    box-sizing: border-box;
}

.auth-flow__kicker {
    margin: 0 0 var(--space-s);
    color: var(--color-primary-hover);
    font-family: var(--font-label);
    font-size: var(--txt-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.auth-flow__title {
    max-width: 22ch;
    min-width: 0;
    margin: 0;
    color: var(--color-text-main);
    font-family: var(--font-display);
    font-size: var(--txt-xl);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    overflow-wrap: anywhere;
}

.auth-flow__text {
    max-width: 52ch;
    margin: var(--space-s) 0 0;
    color: var(--color-text-muted);
    font-size: var(--txt-m);
    line-height: var(--line-height-relaxed);
}

.auth-flow__form {
    display: grid;
    gap: var(--space-m);
    margin-top: var(--space-l);
}

.auth-flow__field {
    display: grid;
    gap: var(--space-xs);
}

.auth-flow__label {
    color: var(--color-text-main);
    font-size: var(--txt-s);
    font-weight: var(--font-weight-semibold);
}

.auth-flow__input,
.auth-flow input[type="email"] {
    width: 100%;
    min-height: var(--control-height);
    padding: 0 var(--space-s);
    color: var(--color-text-main);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-control);
    font: inherit;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.auth-flow__input::placeholder,
.auth-flow input[type="email"]::placeholder {
    color: var(--color-text-muted);
}

.auth-flow__input:hover,
.auth-flow input[type="email"]:hover,
.auth-flow__input:active,
.auth-flow input[type="email"]:active {
    background: var(--color-surface-muted);
}

.auth-flow__input:focus-visible,
.auth-flow input[type="email"]:focus-visible,
.auth-flow__submit:focus-visible,
.auth-flow__footer a:focus-visible {
    outline: var(--border-width) solid var(--color-focus);
    outline-offset: var(--space-3xs);
    box-shadow: var(--shadow-focus);
}

.auth-flow__input:focus-visible,
.auth-flow input[type="email"]:focus-visible {
    border-color: var(--color-focus);
}

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

.auth-flow__input:disabled,
.auth-flow input[type="email"]:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
}

.auth-flow__errors,
.auth-flow__note {
    margin: 0;
    font-size: var(--txt-s);
    line-height: var(--line-height-normal);
}

.auth-flow__errors { color: var(--color-error); }
.auth-flow__note { color: var(--color-text-muted); min-height: 1lh; }

.auth-flow__meta,
.auth-flow__links {
    margin: var(--space-s) 0 0;
    color: var(--color-text-muted);
    font-size: var(--txt-s);
    line-height: var(--line-height-normal);
}

.auth-flow__input--code {
    text-align: center;
    letter-spacing: 0.28em;
    font-size: var(--txt-l);
    font-weight: var(--font-weight-bold);
}

.auth-flow__links a {
    color: var(--color-primary-hover);
    font-weight: var(--font-weight-semibold);
    text-underline-offset: var(--space-3xs);
}

.auth-flow__submit {
    width: 100%;
    min-height: var(--control-height);
    padding: 0 var(--space-m);
    color: var(--color-text-on-primary);
    background: var(--color-primary);
    border: var(--border-width) solid var(--color-primary);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font: inherit;
    font-weight: var(--font-weight-bold);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.auth-flow__submit:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.auth-flow__submit:active { transform: translateY(var(--space-3xs)); }
.auth-flow__submit:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); }

.auth-flow__footer {
    margin: var(--space-l) 0 0;
    color: var(--color-text-muted);
    font-size: var(--txt-s);
}

.auth-flow__footer a {
    color: var(--color-primary-hover);
    font-weight: var(--font-weight-semibold);
    text-underline-offset: var(--space-3xs);
    white-space: nowrap;
}

@media (max-width: 48rem) {
    .auth-flow {
        width: auto;
        margin: var(--space-m) var(--space-s);
        padding: var(--space-l);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-flow__input,
    .auth-flow input[type="email"],
    .auth-flow__submit { transition-duration: 0ms; }
}