/* ============================================================================
   Sign-in screen for Rangeela Reports.

   Standalone on purpose: the nanite theme and the 440KB icon font are only
   linked for authenticated pages, so this file carries everything the sign-in
   screen needs and every icon on it is inline SVG.

   It reads wwwroot/css/tokens.css like everything else, so the sign-in screen
   and the app behind it are one product: same accent, same 32px controls, same
   two radii, no gradients.
   ============================================================================ */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--fg-1);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

/* ── shell ──────────────────────────────────────────────────────────────── */
.au-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}

/* ── left: brand panel ──────────────────────────────────────────────────────
   One flat accent field. No gradient, no blooms: the same refusal that keeps
   the app's chrome quiet. */
.au-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--sp-8);
    color: var(--fg-on-brand);
    background: var(--brand-pressed);
}

.au-visual-body { max-width: 460px; }

.au-headline {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: 600;
    margin: 0 0 var(--sp-3);
}
.au-headline em { font-style: normal; opacity: .75; }

.au-subline {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    margin: 0 0 var(--sp-6);
    opacity: .82;
}

.au-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.au-points li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    opacity: .9;
}
.au-points .au-tick {
    flex: 0 0 auto;
    width: var(--sp-5); height: var(--sp-5);
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: rgb(255 255 255 / .16);
}
.au-points svg { width: 12px; height: 12px; display: block; }

.au-visual-foot {
    display: flex; align-items: center; gap: var(--sp-2);
    margin: 0;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    opacity: .7;
}
.au-dot {
    width: var(--sp-2); height: var(--sp-2);
    border-radius: 50%;
    background: currentColor;
}

/* ── brand mark - flat, one accent ──────────────────────────────────────── */
.au-brand { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; }
.au-mark {
    width: var(--ctl-h); height: var(--ctl-h);
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: var(--brand);
    color: var(--fg-on-brand);
    font-size: var(--fs-body);
    font-weight: 600;
}
.au-visual .au-mark { background: rgb(255 255 255 / .16); }

.au-brand-name { display: flex; align-items: baseline; gap: var(--sp-1); }
.au-brand-name strong { font-size: var(--fs-section); font-weight: 600; }
.au-brand-name span { font-size: var(--fs-caption); font-weight: 400; opacity: .7; }
.au-visual .au-brand-name { color: var(--fg-on-brand); }
.au-form-pane .au-brand-name strong { color: var(--fg-1); }
.au-form-pane .au-brand-name span { color: var(--fg-3); opacity: 1; }

/* ── right: the form ────────────────────────────────────────────────────── */
.au-form-pane {
    display: grid;
    place-items: center;
    padding: var(--sp-8) var(--sp-6);
    background: var(--surface);
}
.au-form-wrap { width: 100%; max-width: var(--max-field); }

.au-form-pane .au-brand { margin-bottom: var(--sp-8); }

.au-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: 600;
    margin: 0 0 var(--sp-1);
}
.au-lede {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--fg-3);
    margin: 0 0 var(--sp-6);
}

/* Error bar: icon plus text, in the same slot server errors will use. */
.au-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-4);
    border: 1px solid var(--danger-stroke);
    border-radius: var(--r-md);
    background: var(--danger-bg);
    color: var(--fg-1);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
.au-alert svg { width: var(--sp-4); height: var(--sp-4); flex: 0 0 auto; margin-top: 2px; color: var(--danger); }

/* ── fields - same contract as _FormField ───────────────────────────────── */
.au-field { margin-bottom: var(--sp-4); }
.au-field label {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 600;
    color: var(--fg-1);
}

.au-input-wrap { position: relative; display: flex; align-items: center; }
.au-input-wrap .au-icon {
    position: absolute;
    left: var(--sp-2);
    width: var(--sp-4); height: var(--sp-4);
    color: var(--fg-3);
    pointer-events: none;
}
.au-input-wrap:focus-within .au-icon { color: var(--brand); }

/* Fluent underline: 1px box, heavier bottom border, 2px brand bottom on focus. */
.au-input {
    width: 100%;
    height: var(--ctl-h);
    padding: 0 var(--sp-2) 0 var(--sp-6);
    border: 1px solid var(--stroke);
    border-bottom: 1px solid var(--stroke-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--fg-1);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
.au-input::placeholder { color: var(--fg-disabled); }
.au-input:hover { border-color: var(--fg-3); }
.au-input:focus {
    outline: none;
    border-color: var(--stroke);
    border-bottom: 2px solid var(--brand);
}

.au-has-peek .au-input { padding-right: var(--sp-8); }

.au-peek {
    position: absolute;
    right: var(--sp-1);
    display: grid; place-items: center;
    width: var(--sp-6); height: var(--sp-6);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--fg-3);
    cursor: pointer;
}
.au-peek:hover { color: var(--fg-1); background: var(--surface-3); }
.au-peek svg { width: var(--sp-4); height: var(--sp-4); }
.au-peek .au-eye-off { display: none; }
.au-peek[aria-pressed="true"] .au-eye-off { display: block; }
.au-peek[aria-pressed="true"] .au-eye-on  { display: none; }

/* The one filled button on this screen. */
.au-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
    height: var(--ctl-h);
    margin-top: var(--sp-5);
    border: 1px solid var(--brand);
    border-radius: var(--r-md);
    background: var(--brand);
    color: var(--fg-on-brand);
    font-family: var(--font);
    font-size: var(--fs-body);
    font-weight: 600;
    cursor: pointer;
}
.au-submit svg { width: var(--sp-4); height: var(--sp-4); }
.au-submit:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.au-submit:active { background: var(--brand-pressed); border-color: var(--brand-pressed); }

/* Fluent's focus ring, unmodified, on every focusable thing here. */
.au-input:focus-visible,
.au-submit:focus-visible,
.au-peek:focus-visible {
    box-shadow: var(--focus-ring);
}

.au-foot {
    margin: var(--sp-6) 0 0;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--fg-3);
}

.au-mobile-head { display: none; }

/* ── narrow screens: the brand panel goes, a compact header takes its place ─ */
@media (max-width: 900px) {
    .au-shell { grid-template-columns: 1fr; }
    .au-visual { display: none; }
    .au-form-pane { align-content: start; padding: var(--sp-6) var(--sp-4); }
    .au-mobile-head { display: block; margin-bottom: var(--sp-6); }
    .au-form-pane > .au-form-wrap > .au-brand { display: none; }
}