/* Login pages. Tokens, controls, chips and alerts come from theme.css. */

body {
    min-height: 100vh;
    padding: 1rem;
    display: grid;
    place-items: center;
}

/* A card (§9.2): surface, 16px radius, no shadow, no border. */
.panel {
    width: min(24rem, 100%);
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius-card);
}

.panel .brand { margin: 0 0 1.5rem; }

h1 { margin: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 700; text-wrap: balance; }

p { margin: .25rem 0 0; }
.lead { color: var(--muted); }

/* The login pages carry no icon component, so the alert draws its own. */
.alert { margin-top: 1rem; }
.alert::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: .125rem;
    background: currentColor;
    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%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Field anatomy (§9.5): label, control, then error *or* description. */
form { display: grid; gap: .375rem; margin-top: 1.5rem; }
label { font-size: .875rem; font-weight: 500; }
input:not([type="hidden"]) + label,
input:not([type="hidden"]) + .label-row { margin-top: 1rem; }

.label-row { display: flex; justify-content: space-between; align-items: baseline; }
.label-row a { font-size: .75rem; }

/* The trailing letter-spacing is balanced by the extra left padding. */
input.code {
    padding-left: 1.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

form button { margin-top: 1rem; }
form button.secondary { margin-top: 0; }

.or { display: flex; align-items: center; gap: .75rem; margin: .5rem 0; color: var(--muted); font-size: .75rem; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--separator); }

.back { display: inline-flex; align-items: center; gap: .375rem; margin-top: 1rem; font-size: .875rem; color: var(--muted); }
.back:hover { color: var(--accent); text-decoration: none; }
.back + .back { margin-inline-start: 1rem; }

/* Navigation styled as a button (set-password); form buttons get their margin from the grid. */
a.button { display: flex; margin-top: 1rem; }

/* The apps this user may open, after signing in. */
.apps { display: grid; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }

.app {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 2.5rem;
    padding: .5rem .75rem;
    border-radius: var(--radius);
    background: var(--surface-secondary);
    color: var(--foreground);
    transition: background-color .1s ease-out;
}

.app:hover { background: var(--default); text-decoration: none; }
/* Bolder than the buttons below, so the list does not read as more of them. */
.app-title { font-weight: 600; }