/*
 * The login page of the Nexus console.
 *
 * Designed at 390 px and 820 px while it was written and not afterwards (C12): one column, no
 * horizontal scrolling at any width, and every target at least 44 px high. Everything clickable has
 * cursor: pointer (C1). The icons are FontAwesome 7 and never an emoji (C2).
 */

/*
    Gli stessi due temi della console, con gli stessi valori, perche' questa pagina non carica
    nexus.css: un accesso scuro seguito da una console chiara sarebbe un lampo a ogni entrata. Il
    chiaro e' il predefinito e sta su :root nudo; lo scuro arriva da data-theme="dark" su <html>, che
    lo script in testa alla pagina rimette leggendo la stessa preferenza della console.
*/
:root
{
    --bg: #f4f5fa;
    --bg-glow: #e6e9f6;
    --surface: #ffffff;
    --surface-2: #f7f8fc;
    --surface-edge: #d8dbe8;
    --ink: #15172b;
    --ink-soft: #4a4e66;
    --ink-faint: #70748d;
    --accent: #2563eb;
    --accent-ink: #ffffff;
    --accent-dark: #1d4ed8;
    --warn-bg: #fdeceb;
    --warn-edge: #f3b9b4;
    --warn-ink: #7a1d16;
    --radius: 12px;
    --target: 44px;
    --gutter: 16px;
}

:root[data-theme="dark"]
{
    --bg: #101030;
    --bg-glow: #1a1a4a;
    --surface: #17173a;
    --surface-2: #11112c;
    --surface-edge: #2a2a5c;
    --ink: #ffffff;
    --ink-soft: #b9b9d6;
    --ink-faint: #8a8ab0;
    --accent: #3b82f6;
    --accent-ink: #ffffff;
    --accent-dark: #2563eb;
    --warn-bg: #3a1f2a;
    --warn-edge: #7f2a3c;
    --warn-ink: #ffc9d2;
}

*,
*::before,
*::after
{
    box-sizing: border-box;
}

html,
body
{
    margin: 0;
    padding: 0;
}

body
{
    min-height: 100vh;
    background: var(--bg);
    background-image: radial-gradient(circle at 50% 0%, var(--bg-glow) 0%, var(--bg) 60%);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-weight: 300;
    letter-spacing: 0.01em;
    -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------- layout */

.login
{
    /* the 16 px side gutter is what keeps 390 px free of any sideways scrolling */
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 40px var(--gutter) 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.login__brand
{
    text-align: center;
}

.login__mark
{
    font-size: 34px;
    color: var(--accent);
}

.login__title
{
    margin: 12px 0 4px;
    font-size: 30px;
    font-weight: 200;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.card
{
    background: var(--surface);
    border: 1px solid var(--surface-edge);
    border-radius: var(--radius);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.card__heading
{
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.03em;
}

.card__note
{
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-faint);
}

.card__note-icon
{
    margin-right: 6px;
    color: var(--accent);
}

/* ---------------------------------------------------------------- fields */

.field
{
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/*
 * The label says what the field is, so there is no placeholder on it (C3). Anything a person needs to
 * know goes under the card as text that stays, never inside the box where it vanishes on the first
 * keystroke.
 */
.field__label
{
    font-size: 13px;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
}

.field__box
{
    display: flex;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--surface-edge);
    border-radius: 10px;
    min-height: var(--target);
}

.field__box:focus-within
{
    border-color: var(--accent);
}

.field__icon
{
    width: 38px;
    text-align: center;
    color: var(--ink-faint);
    font-size: 14px;
    flex: 0 0 auto;
}

.field__input
{
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--ink);
    /* 16 px, deliberately: anything smaller makes iOS zoom the page on focus */
    font-size: 16px;
    font-family: inherit;
    padding: 11px 10px 11px 0;
}

.field__reveal
{
    flex: 0 0 auto;
    width: var(--target);
    min-height: var(--target);
    background: transparent;
    border: 0;
    color: var(--ink-faint);
    font-size: 15px;
    cursor: pointer;
}

.field__reveal:hover,
.field__reveal:focus-visible
{
    color: var(--ink);
}

/* ---------------------------------------------------------------- the button */

.button
{
    min-height: var(--target);
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--accent);
    color: var(--accent-ink);
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.button:hover
{
    background: var(--accent-dark);
}

.button[disabled]
{
    /* a second click while the first is in flight is a second login attempt against the cap */
    opacity: 0.6;
    cursor: progress;
}

.button__icon
{
    font-size: 14px;
}

/* ---------------------------------------------------------------- the refusal */

/*
 * [hidden] has to be restated here, and it is not belt and braces: the browser's own rule for the
 * attribute is display: none at the lowest specificity, so the display: flex of this class beats it
 * and the box stays on the page, empty, with nothing wrong in the markup. Found by opening the page
 * and looking at it, which is the only way this kind of defect is ever found.
 */
.notice[hidden]
{
    display: none;
}

.notice
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-edge);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--warn-ink);
}

.notice__icon
{
    margin-top: 2px;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------- 820 px and up */

@media (min-width: 700px)
{
    .login
    {
        padding-top: 72px;
        gap: 34px;
    }

    .card
    {
        padding: 30px 28px;
    }

    .login__title
    {
        font-size: 34px;
    }
}