/* Entry pages: sign-in, security, confirmations and the demo inbox. Same tokens, same control recipe as the workspace.
   Import order is layer order; this sheet's own rules are the features layer. */
@layer tokens, controls, features;
@import './styles/tokens.css' layer(tokens);
@import './styles/fonts.css' layer(tokens);
@import './styles/controls.css' layer(controls);

@layer features {
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    background: var(--background);
    color: var(--foreground);
    font-synthesis: none;
}

main {
    max-width: calc(var(--auth-width-wide) + 2 * var(--gutter));
    margin: 0 auto;
    padding: var(--space-6) var(--gutter) var(--space-12);
}

h1, h2, h3, p {
    margin: 0;
}

a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent-line);
    text-underline-offset: var(--space-nudge);
    transition: color var(--motion-fast) var(--ease-out), text-decoration-color var(--motion-fast) var(--ease-out);
}

a:hover {
    color: var(--accent-deep);
    text-decoration-color: currentColor;
}

:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

strong, b {
    font-weight: 600;
}

small {
    font-size: var(--text-small);
    line-height: var(--leading-caption);
}

.muted {
    color: var(--muted-foreground);
}

/* The card: resting elevation, one width for forms and one for records. */
.auth-card {
    max-width: var(--auth-width);
    margin: 8vh auto;
    padding: var(--space-8);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-md);
    animation: rise var(--motion-enter) var(--ease-out) backwards;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(20px); }
}

.security-card, .inbox-card, .confirmation-card {
    max-width: var(--auth-width-wide);
}

.auth-brand {
    display: block;
    margin-bottom: var(--space-8);
    font-family: var(--font-display);
    font-size: var(--text-heading-sm);
    font-weight: 400;
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-snug);
    color: var(--foreground);
    text-decoration: none;
}

.auth-brand span {
    background: var(--gradient-accent-row);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-card h1 {
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: 400;
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-tight);
}

.auth-card h2 {
    margin: var(--space-6) 0 var(--space-2);
    font-size: var(--text-title);
    font-weight: 600;
    line-height: var(--leading-title);
    letter-spacing: var(--tracking-snug);
}

.auth-card h3 {
    font-size: var(--text-body);
    font-weight: 600;
    line-height: var(--leading-title);
}

.auth-card p {
    margin-block: var(--space-4);
    line-height: var(--leading-body);
}

.auth-card small {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-caption);
    color: var(--muted-foreground);
}

.auth-card .muted {
    font-size: var(--text-label);
}

/* Forms: label above field, one control height everywhere. */
.auth-card form {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-6) 0;
}

.auth-card label {
    font-size: var(--text-label);
    line-height: var(--leading-body);
}

.auth-card input:not([type=checkbox]):not([type=radio]) {
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--card);
    color: var(--foreground);
    font: inherit;
    font-size: var(--text-label);
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.auth-card input:not([type=checkbox]):not([type=radio]):hover:not(:disabled) {
    border-color: var(--accent);
}

.auth-card input:not([type=checkbox]):not([type=radio]):focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.auth-card input::placeholder {
    color: var(--placeholder);
}

.auth-card label+input, .auth-card small+button, .auth-card input+button {
    margin-top: var(--space-1);
}

.auth-card button, .auth-card .auth-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border: 0;
    border-radius: var(--radius-control);
    background: var(--gradient-accent);
    color: var(--accent-foreground);
    font: inherit;
    font-size: var(--text-label);
    font-weight: 500;
    line-height: var(--leading-caption);
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.auth-card button:hover, .auth-card .auth-action:hover {
    color: var(--accent-foreground);
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent-lg);
}

.auth-card button:active, .auth-card .auth-action:active {
    transform: scale(.98);
    box-shadow: var(--shadow-accent);
}

.auth-card button.secondary {
    border: 1px solid var(--accent-line);
    background: var(--card);
    color: var(--accent-deep);
    box-shadow: none;
}

.auth-card button.secondary:hover {
    color: var(--accent-deep);
    box-shadow: var(--shadow-sm);
}

.auth-card label small {
    margin-left: var(--space-2);
    font-weight: 400;
    color: var(--muted-foreground);
}

/* The demo home and its played sign-in. Resting styles are the finished state, so reduced motion shows it at once. */
.demo-card .eyebrow {
    margin-top: var(--space-2);
}

.demo-steps {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    padding: 0;
    list-style: none;
}

.demo-steps li {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    animation: mail-appear var(--motion-lift) var(--ease-out) calc(var(--step) * 1.2s) backwards;
}

.demo-step-mark {
    flex: none;
    width: var(--icon-size);
    height: var(--icon-size);
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 12px no-repeat;
    animation: demo-step-done 1ms linear calc(var(--step) * 1.2s + .9s) backwards;
}

.demo-envelope {
    position: absolute;
    left: calc(var(--icon-size) + var(--space-3));
    width: var(--icon-size);
    height: var(--icon-size);
    opacity: 0;
    background: var(--accent);
    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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: mail-fly 1.1s var(--ease-out) 1.4s forwards;
}

@keyframes demo-step-done {
    from { border-color: var(--border); background-color: transparent; background-image: none; }
}

/* The simulated provider's calendar. */
.provider-calendar {
    width: 100%;
    margin-top: var(--space-4);
    border-collapse: collapse;
    font-size: var(--text-label);
}

.provider-calendar th, .provider-calendar td {
    padding: var(--space-2) var(--space-2);
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.provider-calendar th {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--muted-foreground);
}

.provider-calendar tr[data-state=booked] td, .provider-calendar tr[data-state=blocked] td {
    color: var(--muted-foreground);
}


.auth-card>a:not(.auth-brand):not(.auth-action) {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
}

.auth-card summary {
    min-height: var(--control-height);
    color: var(--accent);
    font-size: var(--text-label);
}

/* Insets and status share the workspace recipe. */
.auth-card [role=alert], .auth-card .notice {
    margin-block: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--muted-surface);
    font-size: var(--text-label);
    line-height: var(--leading-body);
    color: var(--muted-foreground);
}

.auth-card [role=alert] {
    background: var(--danger-bg);
    border-color: var(--danger-line);
    color: var(--danger);
}

.auth-card [role=alert]::before {
    content: '';
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: var(--space-2);
    vertical-align: calc(-1 * var(--space-1));
    background: var(--icon-alert) center / var(--icon-size) no-repeat;
}

.auth-card #auth-code {
    font-family: var(--font-mono);
    font-size: var(--text-heading-sm);
    letter-spacing: var(--tracking-wide);
    font-variant-numeric: tabular-nums;
}

/* Inbox */
.inbox-heading, .security-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
}

.inbox-heading h1, .security-heading h2 {
    margin: 0;
}

.inbox-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border);
}

.inbox-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
}

.inbox-empty {
    padding: var(--space-6) 0;
}

.inbox-message {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border);
}

.inbox-message summary {
    overflow-wrap: anywhere;
}

.inbox-message summary strong {
    font-size: var(--text-body);
    color: var(--foreground);
}

.inbox-message summary span, .inbox-message summary time {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-caption);
    color: var(--muted-foreground);
}

.inbox-body {
    padding: 0 0 var(--space-3);
}

.mail-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Security */
.security-section {
    padding: var(--space-6) 0;
    border-top: 1px solid var(--border);
}

.security-section:last-of-type {
    border-bottom: 1px solid var(--border);
}

.security-section h2 {
    margin-top: 0;
}

.security-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 400;
    line-height: var(--leading-caption);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
}

.security-address {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* The authenticator card is a workspace inset: same padding, radius and rhythm as any inset in a card. */
.totp-setup {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--muted-surface);
}

.totp-setup h3 {
    margin-bottom: var(--space-2);
}

.totp-setup p {
    margin-block: var(--space-3);
}

.setup-key {
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-mono);
}

.setup-qr {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--space-4) auto;
    border-radius: var(--radius-sm);
}

/* Confirmation */
.confirmation-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.confirmation-lines li {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border);
}

.confirmation-lines label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
}

.confirmation-lines label>span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.confirmation-lines input[type=checkbox] {
    flex-shrink: 0;
    margin-top: var(--space-half);
}

.confirmation-lines span {
    display: grid;
    gap: var(--space-1);
}

.confirmation-lines small {
    margin-top: 0;
}

.confirmation-lines strong, .confirmation-lines span {
    font-variant-numeric: tabular-nums;
}

.confirmation-card .confirmation-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding-bottom: env(safe-area-inset-bottom);
}

.confirmation-card form {
    display: block;
}

/* The mail stage: a simulated delivery, server-rendered and CSS-timed. The resting styles are the delivered state,
   so reduced motion and no-animation environments show the message at once. */
.eyebrow {
    margin-bottom: var(--space-2);
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent-deep);
}

.mail-stage {
    margin-block: var(--space-5);
}

.mail-stage-progress {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    font-size: var(--text-label);
    color: var(--muted-foreground);
}

.mail-stage-envelope {
    position: absolute;
    left: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    opacity: 0;
    background: var(--accent);
    border-radius: var(--radius-xs);
    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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: mail-fly 1.1s var(--ease-out) forwards;
}

.mail-stage-step[data-step=sending] {
    position: absolute;
    left: calc(var(--icon-size) + var(--space-2));
    opacity: 0;
    animation: mail-hold 1.1s linear forwards;
}

.mail-stage-step[data-step=delivered] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--accent-deep);
    font-weight: 500;
    animation: mail-appear var(--motion-lift) var(--ease-out) 1.1s backwards;
}

.mail-stage-step[data-step=delivered]::before {
    content: '';
    width: var(--icon-size);
    height: var(--icon-size);
    background: var(--accent);
    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='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mail-message {
    margin-top: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-control);
    background: var(--accent-soft);
    animation: rise var(--motion-enter) var(--ease-out) calc(1.2s + var(--mail-index, 0) * 250ms) backwards;
}

.mail-message header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-small);
    color: var(--muted-foreground);
}

.mail-sender {
    font-weight: 600;
    color: var(--foreground);
}

.auth-card .mail-message h2 {
    margin: var(--space-2) 0 var(--space-1);
    font-size: var(--text-body);
}

.auth-card .mail-message .auth-action {
    margin-top: var(--space-3);
}

.mail-stage-note {
    margin-top: var(--space-3);
    animation: mail-appear var(--motion-lift) var(--ease-out) 1.4s backwards;
}

.mail-stage-empty {
    padding: var(--space-4);
    border: 1px dashed var(--border);
    border-radius: var(--radius-control);
    color: var(--muted-foreground);
    font-size: var(--text-label);
}

@keyframes mail-fly {
    0% { opacity: 1; transform: translateX(0); }
    70% { opacity: 1; transform: translateX(45vw); }
    100% { opacity: 0; transform: translateX(50vw); }
}

@keyframes mail-hold {
    0%, 85% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes mail-appear {
    from { opacity: 0; }
}

@media (max-width:600px) {
    .auth-card input:not([type=checkbox]):not([type=radio]) {
        font-size: var(--text-body);
    }
}

@media (max-width:480px) {
    .auth-card {
        margin: 3vh auto;
        padding: var(--space-6);
    }

    .auth-card h1 {
        font-size: var(--text-heading-sm);
    }

    .security-heading {
        align-items: flex-start;
    }

    .confirmation-actions>* {
        width: 100%;
    }
}

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

@media (forced-colors:active) {
    .auth-card, .auth-card button, .auth-card .auth-action, .auth-card input, .security-badge, .auth-card .notice, .auth-card [role=alert] {
        border: 1px solid ButtonText;
    }

    .auth-card [role=alert]::before {
        forced-color-adjust: none;
        border: 1px solid CanvasText;
    }
}
}