/*
 * The sign-in pages' own look — login, code, refused, no-access and sign-in-wait — loaded after the admin look's
 * /patephone/admin.css (patephone-admin-ui) and written over its tokens: every colour, radius, shadow and font a
 * variable of tokens.css, never a literal here.
 *
 * The pages take none of patephone/layout's fragments. head puts the request's CSRF token in meta tags, which loads
 * Spring Security's deferred token, and HttpSessionCsrfTokenRepository then saves it in a new session (the commons
 * README, § The fragments): a stray callback's /sign-in/refused must leave no session (design § Exposure), and the
 * pages need no htmx. Each writes the module's lines itself instead — admin.css, this file, and admin.js without defer,
 * so the theme is set before the first paint (it reads no CSRF meta tag when there is none). header has nobody to sign
 * out on four of them, and /no-access keeps its own form.
 *
 * The markup the tests read is the pages' as it was (#sentence, #email, #admins, the Google link, the forms, their
 * fields and buttons, the titles): the look goes on the wrapping main.sign-in, div.card and p.action, and on selectors
 * by id or by element inside main.sign-in.
 */

/* The page centred, one card */
main.sign-in {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space);
}

main.sign-in .card {
    width: 100%;
    max-width: 420px;
    padding: 24px;
}

main.sign-in p {
    margin: 0 0 12px;
}

main.sign-in small {
    color: var(--muted);
}

/* The page's action — the Google sign-in, a form's button — as admin.css's button.primary, the card's width */
main.sign-in .action a,
main.sign-in button[type="submit"] {
    display: block;
    width: 100%;
    padding: 9px 12px;
    text-align: center;
    font-weight: 600;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-s);
    color: var(--on-accent);
}

main.sign-in .action a:hover {
    text-decoration: none;
}

main.sign-in label {
    display: block;
    color: var(--muted);
}

main.sign-in input:not([type="hidden"]) {
    display: block;
    width: 100%;
    margin-top: 4px;
}

/* the code: six digits or a recovery code, read and typed at a glance */
main.sign-in input[name="code"] {
    font-family: var(--mono);
    font-size: 1.5rem;
    letter-spacing: .15em;
    text-align: center;
}

/* the page's sentence, a refusal on every page that has one: admin.css's .notice.bad by its id */
main.sign-in #sentence {
    border-left: 4px solid var(--bad);
    background: var(--surface-2);
    border-radius: var(--radius-s);
    padding: 10px 14px;
    color: var(--bad);
}

main.sign-in #admins {
    margin: 0 0 12px;
    padding-left: 20px;
}

/* /login's password sign-in, folded away under the Google one: a native <details>, no script */
main.sign-in #password-sign-in {
    margin-top: var(--space);
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

main.sign-in #password-sign-in summary {
    cursor: pointer;
    color: var(--muted);
    font-weight: 600;
}

main.sign-in #password-sign-in[open] summary {
    margin-bottom: 12px;
}