/* ───────────────────────────────────────────────────────────────────────────
   BITS — sign-in, sign-out and first-run setup.

   These three are Razor Pages, not Blazor components, because they write to the
   HTTP response: the auth cookie for sign-in and sign-out, and — for setup — a
   redirect that must happen before any circuit exists. They therefore load this
   stylesheet instead of the application chrome in bits.css.
   ─────────────────────────────────────────────────────────────────────────── */

/* Kept in step with bits.css by hand. Two files, because these pages must render before
   any circuit exists and cannot wait on the application chrome — but a sign-in page in a
   different blue from the application it signs you into looks like a phishing attempt. */
:root {
    --a-ink:    #141a2e;
    --a-ink-2:  #4a5675;
    --a-ink-3:  #656f8c;
    --a-line:   #e3e7f3;
    --a-accent: #4f46e5;
    --a-accent-2: #3b31c4;
    --a-accent-sf: #eeeffe;
    --a-accent-rg: rgba(79, 70, 229, .18);
    --a-ctl:       #f6f7fd;
    --a-ctl-line:  #7b89b0;
    --a-bad:    #c22636;
    --a-bad-sf: #fdebed;
    --a-ok:     #0b7a53;
    --a-ok-sf:  #e4f7f0;
    --a-grad:   linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

* { box-sizing: border-box; }

body.au-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    background: #eef1fb;
    color: var(--a-ink);
    font: 400 14px/1.5 "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.au-wrap { display: grid; grid-template-columns: 1.05fr 1fr; width: 100%; min-height: 100vh; }

/* ─── Brand side ─────────────────────────────────────────────────────────── */

.au-brand {
    background: linear-gradient(155deg, #1c2452 0%, #141b3d 58%, #0b0f26 100%);
    color: #cfdbe8;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.au-brand::after {
    content: "";
    position: absolute;
    width: 460px; height: 460px;
    right: -170px; top: -150px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(124, 58, 237, .42) 0%, transparent 68%);
}
.au-brand-in {
    position: relative;
    max-width: 520px;
    margin: auto 0;              /* vertically centred in the column */
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ─── The hero artwork ────────────────────────────────────────────────────
   Square, and sitting in a column whose height is the viewport, so it is
   CONTAINED rather than cropped: the title at the top and the copyright at the
   bottom are part of the artwork, and cover would eat one or both. The rounded
   corners and ring let it sit on the gradient as a card rather than a cut-out. */
.au-hero {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 0 auto;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
    /* A hairline of light where the artwork's white background meets the dark panel,
       so the edge reads as deliberate. */
    outline: 1px solid rgba(255, 255, 255, .14);
    outline-offset: -1px;
}

/* Shown only on a narrow screen, where the brand column is not. Cropped to a band so
   it sets the scene without pushing the form below the fold. */
.au-hero-band { display: none; }

.au-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 52px; }
.au-mark {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: var(--a-grad);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: 16px; letter-spacing: -.02em;
}
.au-logo b { display: block; color: #fff; font-size: 17px; font-weight: 600; }
.au-logo span { display: block; font-size: 11px; color: #8fa6bf; letter-spacing: .07em; text-transform: uppercase; }

.au-brand h1 { margin: 0 0 14px; font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.au-brand p { margin: 0 0 26px; font-size: 14.5px; line-height: 1.65; color: #a9bdd3; }

.au-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.au-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #bdcee1; }
.au-points li span {
    width: 19px; height: 19px; flex: 0 0 19px;
    border-radius: 999px;
    background: rgba(124, 58, 237, .28);
    color: #a5b4fc;
    display: grid; place-items: center;
    font-size: 11px;
    margin-top: 1px;
}

.au-foot { position: relative; font-size: 11.5px; color: #65788f; }

/* ─── Form side ──────────────────────────────────────────────────────────── */

.au-panel { display: grid; place-items: center; padding: 40px 24px; }
.au-card { width: 100%; max-width: 396px; }

.au-head { margin-bottom: 22px; }
.au-head h2 { margin: 0 0 6px; font-size: 23px; font-weight: 600; letter-spacing: -.015em; }
.au-head p { margin: 0; color: var(--a-ink-2); font-size: 13.5px; line-height: 1.6; }

.au-badge {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: var(--a-accent-sf);
    color: var(--a-accent-2);
    display: grid; place-items: center;
    margin-bottom: 14px;
}
.au-badge svg { width: 21px; height: 21px; stroke-width: 2; }

.au-form { display: block; }

.au-field { display: block; margin-bottom: 15px; }
.au-field > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--a-ink-2); margin-bottom: 5px; }
/* Same reasoning as the controls in bits.css: a white box with a hairline border on a
   white panel is invisible. Tinted fill plus a border that clears 3:1, going white on
   focus. These two boxes are the first thing anybody sees of the product. */
.au-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--a-ctl-line);
    border-radius: 8px;
    background-color: var(--a-ctl);
    font: inherit;
    font-size: 14px;
    color: var(--a-ink);
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.au-field input:hover { border-color: #5d6c94; background-color: #fff; }
.au-field input:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--a-accent);
    box-shadow: 0 0 0 3.5px var(--a-accent-rg);
}

.au-readonly {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--a-line);
    border-radius: 8px;
    background: #f6f8fa;
    color: var(--a-ink-2);
    font-size: 13.5px;
    margin-bottom: 15px;
}
.au-readonly svg { width: 16px; height: 16px; flex: 0 0 16px; stroke-width: 2; color: var(--a-ink-3); }

.au-rules { margin: -6px 0 15px; font-size: 11.5px; color: var(--a-ink-3); line-height: 1.55; }

.au-remember { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 18px; font-size: 13px; }
.au-remember input { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 16px; }
.au-remember b { display: block; font-weight: 500; }
.au-remember small { color: var(--a-ink-3); font-size: 11.5px; line-height: 1.5; display: block; }

.au-submit {
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--a-grad);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.au-submit:hover { background: var(--a-accent-2); }

.au-alt { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--a-accent); text-decoration: none; }
.au-alt:hover { text-decoration: underline; }

.au-err, .au-ok, .au-warn {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 15px;
    line-height: 1.5;
    border: 1px solid transparent;
}
.au-err  { background: var(--a-bad-sf); color: #8e2b20; border-color: #f3cdc8; }
.au-ok   { background: var(--a-ok-sf);  color: #0a5e39; border-color: #c5e8d6; }
.au-warn { background: #fdf3e2; color: #8a5806; border-color: #f0dcb8; }
.au-err svg, .au-ok svg, .au-warn svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; stroke-width: 2; }

.au-legal { margin: 26px 0 0; text-align: center; font-size: 11.5px; color: var(--a-ink-3); }
.au-legal a { color: var(--a-ink-3); text-decoration: none; }
.au-legal a:hover { text-decoration: underline; }
.au-legal span { margin: 0 7px; }

/* ─── Narrow screens ──────────────────────────────────────────────────────
   The two-column layout collapses. The brand column used to be hidden outright,
   which on a phone left an unbranded form — so instead the artwork moves above
   the card as a cropped band. */
@media (max-width: 940px) {
    .au-wrap { grid-template-columns: 1fr; }
    .au-brand { display: none; }

    .au-panel { padding: 0 0 36px; align-content: start; }

    .au-hero-band {
        display: block;
        width: 100%;
        /* Cropped from the top third: that is where the title and the bug sit.
           Without the crop a square image would fill a phone screen on its own and
           push the password field out of sight. */
        height: 190px;
        object-fit: cover;
        object-position: 50% 22%;
        margin-bottom: 26px;
        box-shadow: 0 6px 20px rgba(16, 36, 58, .18);
    }

    .au-card { padding: 0 24px; }
}

/* Very short viewports — a landscape phone, or a laptop with the browser chrome
   taking half the screen. The artwork yields before the form does. */
@media (max-height: 680px) and (min-width: 941px) {
    .au-brand { padding: 28px 40px; }
    .au-hero { max-width: 300px; }
    .au-brand-in { gap: 20px; }
    .au-points li { font-size: 12.5px; }
}

/* Respect a reduced-motion preference and avoid a layout shift while the image
   loads: the intrinsic width/height on the <img> gives the browser the aspect
   ratio up front, and this keeps the reserved box the right shape. */
.au-hero, .au-hero-band { background: rgba(255, 255, 255, .04); }