/**
 * Atom 2.0 - the authentication screens.
 *
 * Login, forgotten password, password reset and the two-factor shell share one
 * shell, so one stylesheet covers all four.
 *
 * Written against its own markup rather than as overrides on the theme. The
 * previous version fought a Limitless login page - vestigial grid columns, an
 * absolutely centred card, a full-bleed photograph - and every fix was another
 * override stacked on the last. None of those classes are used here any more.
 *
 * The photograph went with them. It was a polygon gradient that dated the
 * screen and competed with everything placed on it. The light comes from the
 * logo's own colours instead: amber, magenta and violet as a wide, soft glow
 * over a deep violet ground. Signing in is where Atom introduces itself, so
 * the palette does the introducing.
 */

.atom-auth {
    --auth-amber:   #ff6000;
    --auth-magenta: #ff206e;
    --auth-violet:  #6d3bd1;
    --auth-violet-bright: #7c4ddb;
    --auth-violet-soft:   #a688ea;

    --auth-ink:      #f2edff;
    --auth-ink-soft: #b3a6d8;
    --auth-line:     rgba(214, 198, 255, .22);
    --auth-line-lit: rgba(214, 198, 255, .45);

    /* The logo gradient - literally the three stops in atom-logo.svg. The rail
       at the top, the underline of a focused field and the version label all
       draw from here, so none of them can drift from the wordmark sitting
       right above them.

       No violet in it: carrying the interface violet through the middle drops
       the contrast there to 2.7 on a dark ground, which a four-pixel band
       survives and a wordmark does not. */
    --auth-rail: linear-gradient(90deg,
        #ffc107,
        var(--auth-amber) 50%,
        var(--auth-magenta));

    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: Poppins, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--auth-ink);
    -webkit-font-smoothing: antialiased;

    /* Three light sources over a near-black violet. Wide and soft, so they read
       as light in a room rather than as shapes on a page.

       Weighted warm on purpose. Violet is the working colour of the admin -
       buttons, active states, surfaces - and warm is the identity, spent once
       per screen. This screen is the identity moment, so the amber and the
       magenta lead and the violet only anchors the far corner. The dashboard,
       which is a working surface, leans the other way.

       Four distinct sources, and they are meant to read as such - the light has
       a place it comes from rather than being an even wash.

       Their order is the rail's order. The rail runs yellow, orange, magenta;
       these lie along the diagonal in the same sequence, with the violet
       answering from the far corner. So the background is the same gradient,
       laid out across the screen instead of along a line.

       The yellow sits lowest and weakest. It is by far the brightest hue of
       the four, and at the others' strength it would be the only thing anyone
       saw.

       Radii are max() of a fixed size and a viewport-relative one. In rem
       alone they are wider than a narrow window and blend into each other, but
       on a large screen the same circles cover less than half the width and
       dark gaps open between them - the widest, between the magenta and the
       violet, measured 1364px against a combined reach of 1240. The vw side
       takes over above roughly 1350px, so what a narrow window shows is
       untouched and a wide one keeps the same overlap. */
    background:
        radial-gradient(max(34rem, 40vw) max(26rem, 34vh) at 4% 96%, rgba(255, 193, 7, .22), transparent 64%),
        radial-gradient(max(52rem, 62vw) max(40rem, 52vh) at 14% 74%, rgba(255, 96, 0, .34), transparent 62%),
        radial-gradient(max(50rem, 60vw) max(38rem, 50vh) at 28% 44%, rgba(255, 32, 110, .30), transparent 60%),
        radial-gradient(max(72rem, 78vw) max(56rem, 74vh) at 92% 6%, rgba(109, 59, 209, .30), transparent 66%),
        linear-gradient(158deg, #1a1038, #100a24 72%);
    background-attachment: fixed;
}

/* The signature element: the logo colours, once per screen. */
.atom-auth-rail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 2;
    background: var(--auth-rail);
}

/* ── Layout ─────────────────────────────────────────────────── */

.atom-auth-shell {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem 7rem;
    box-sizing: border-box;
}

/* No card, no border, no panel. A column with a light source behind it is a
   composition; a small box in an empty field is not. */
.atom-auth-col {
    width: 100%;
    max-width: 25rem;
}

.atom-auth-brand {
    margin-bottom: 2.6rem;
}

/* The wordmark, cut out of the version-4 artwork. The version line that sat
   underneath it was outlined lettering with a gradient per character, so a new
   release meant redrawing a glyph. It is text now. */
.atom-auth-brand img {
    display: block;
    width: 172px;
    height: auto;
}

.atom-auth-mark {
    position: absolute;
    right: 2.5rem;
    bottom: 2rem;
    width: 132px;
    height: auto;
    opacity: .85;
}

/* The version is text rather than artwork. It used to be outlined letters
   inside the logo file, which meant a new release needed the mark redrawn -
   and there was no character to edit, only shapes. */
.atom-auth-version {
    /* inline-block, not block: background-clip lays the gradient over the
       element's box and then clips it to the letters. On a block element that
       box is as wide as the column, and then only the first bit of orange
       falls on the text - 18% of the gradient - and it looks like a flat
       colour. Clamped around the text, the gradient runs over the letters
       themselves. */
    display: inline-block;
    margin-top: .4rem;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    background: var(--auth-rail);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (max-width: 600px) {
    .atom-auth-shell { padding: 3.5rem 1.25rem 5.5rem; }
    .atom-auth-mark  { right: 1.25rem; bottom: 1.25rem; width: 104px; }
}

/* Short viewports: the mark would collide with the form. */
@media (max-height: 640px) {
    .atom-auth-mark { display: none; }
}

/* ── Type ───────────────────────────────────────────────────── */

.atom-auth h1 {
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.15;
    margin: 0 0 .6rem;
    color: #ffffff;
}

.atom-auth-intro {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--auth-ink-soft);
    margin: 0 0 2.1rem;
}

/* On a coloured ground a link in another hue is always weak, because it has to
   compete with a background that already carries colour. White supplies the
   contrast and the rule underneath supplies the meaning. */
.atom-auth a,
.atom-auth-link {
    color: #ffffff;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .45);
    transition: box-shadow .15s ease;
}

.atom-auth a:hover,
.atom-auth-link:hover {
    box-shadow: inset 0 -2px 0 #ffffff;
}

/* A button that reads as a link, for actions that post a form. */
.atom-auth-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.atom-auth-link:disabled {
    opacity: .6;
    cursor: default;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .45);
}

.atom-auth-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

/* ── Fields ─────────────────────────────────────────────────── */

.atom-auth-field + .atom-auth-field {
    margin-top: 1.35rem;
}

.atom-auth-field label {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--auth-ink-soft);
    margin-bottom: .45rem;
}

.atom-auth-field input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .6rem 0;
    font-family: inherit;
    font-size: .98rem;
    color: #ffffff;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--auth-line);
    border-radius: 0;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.atom-auth-field input::placeholder {
    color: rgba(179, 166, 216, .5);
}

.atom-auth-field input:hover {
    border-bottom-color: var(--auth-line-lit);
}

/* The theme underlines a focused field with a gradient of seven stops that
   runs out and back again - yellow, orange, magenta, violet, magenta, orange,
   yellow. Across a one-pixel line that reads as a small rainbow. This is the
   same gradient as the rail instead: one pass, left to right.

   `!important` because the theme's rule carries it too; the extra specificity
   alone would not win. */
.atom-auth-field input:focus,
.atom-auth .form-control:focus {
    border-bottom-color: var(--auth-magenta);
    /* Written out instead of the shorthand: a var() in a shorthand can only be
       resolved at computed-value time, so the individual properties stay
       empty and there is nothing left to inspect. */
    border-image-source: var(--auth-rail) !important;
    border-image-slice: 1 !important;
    border-image-width: 1 !important;
    border-image-outset: 0 !important;
    border-image-repeat: stretch !important;
}

/* Chrome paints a white block over autofilled fields. An inset shadow the size
   of the field is the only way to cover it without losing the value. */
.atom-auth-field input:-webkit-autofill,
.atom-auth-field input:-webkit-autofill:hover,
.atom-auth-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #1a1038 inset;
    caret-color: #ffffff;
}

/* ── The row under the fields ───────────────────────────────── */

.atom-auth-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.atom-auth-row > a {
    font-size: .85rem;
}

.atom-auth-check {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .85rem;
    color: var(--auth-ink-soft);
    cursor: pointer;
    margin: 0;
}

/* The theme's checkbox plugin renders a grey circle that belongs to another
   design. This is a plain input styled directly - no plugin, no wrapper.

   The ring is an inset shadow rather than a border on purpose. bb_additions
   sets `border-width: 0 0 1px !important` on every input and, on focus, a
   gradient border-image. On a text field that is the intended behaviour; on an
   18px square it collapses the ring to a single magenta smear along the
   bottom. A shadow is outside the reach of those rules. */
.atom-auth-check input {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    display: grid;
    place-content: center;
    background: rgba(255, 255, 255, .06);
    border: 0 !important;
    border-image: none !important;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1.5px var(--auth-line-lit);
    cursor: pointer;
    transition: background .14s ease, box-shadow .14s ease;
}

.atom-auth-check input:focus {
    border: 0 !important;
    border-image: none !important;
}

.atom-auth-check input::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: transform .12s ease-in-out;
    box-shadow: inset 1em 1em #ffffff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

.atom-auth-check input:checked {
    background: var(--auth-violet);
    box-shadow: inset 0 0 0 1.5px var(--auth-violet);
}

.atom-auth-check input:checked::before {
    transform: scale(1);
}

.atom-auth-check:hover input:not(:checked) {
    box-shadow: inset 0 0 0 1.5px #ffffff;
}

/* ── Button ─────────────────────────────────────────────────── */

/* Signing in is the only action on the screen, so it takes the full width. */
.atom-auth-submit {
    display: block;
    width: 100%;
    margin-top: 1.75rem;
    padding: .8rem 1rem;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--auth-violet-bright);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
    box-shadow:
        0 1px 2px rgba(10, 4, 28, .4),
        0 8px 20px -6px rgba(124, 77, 219, .55);
}

.atom-auth-submit:hover {
    background: #8f64e6;
    box-shadow:
        0 1px 2px rgba(10, 4, 28, .4),
        0 10px 26px -6px rgba(124, 77, 219, .7);
}

.atom-auth-submit:active {
    transform: translateY(1px);
}

/* ── Notices ────────────────────────────────────────────────── */

.atom-auth-notice {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: 0 0 1.5rem;
    padding: .8rem .95rem;
    font-size: .87rem;
    line-height: 1.5;
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--auth-line);
    color: var(--auth-ink);
}

.atom-auth-notice i {
    flex-shrink: 0;
    margin-top: .1rem;
}

.atom-auth-notice.is-error {
    background: rgba(184, 31, 69, .18);
    border-color: rgba(255, 138, 165, .35);
    color: #ffd3de;
}

.atom-auth-notice.is-ok {
    background: rgba(15, 115, 80, .2);
    border-color: rgba(105, 214, 172, .3);
    color: #bff0dc;
}

/* ── Keyboard focus ─────────────────────────────────────────── */

.atom-auth :focus-visible {
    outline: 2px solid var(--auth-violet-soft);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Text fields already announce focus with the underline. The ring on top of
   that is a second indicator competing with the first, and the rounded
   rectangle wins - which reads as a stray box around a field that is supposed
   to be nothing but a line. */
.atom-auth .atom-auth-field input:focus,
.atom-auth .atom-auth-field input:focus-visible,
.atom-auth .form-control:focus,
.atom-auth .form-control:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .atom-auth * {
        transition: none !important;
    }
}

/* ── Inherited markup ───────────────────────────────────────────
   The two-factor screens yield their content into this shell and bring the
   theme's own form classes with them. Rather than rewrite three views, the
   shell teaches those classes the same manners as its own markup. */

.atom-auth .form-group + .form-group {
    margin-top: 1.35rem;
}

.atom-auth .form-group label {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    color: var(--auth-ink-soft);
    margin-bottom: .45rem;
}

.atom-auth .form-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .6rem 0;
    font-family: inherit;
    font-size: .98rem;
    color: #ffffff;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--auth-line);
    border-radius: 0;
    outline: none;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.atom-auth .form-control::placeholder {
    color: rgba(179, 166, 216, .5);
}

.atom-auth .form-control:focus {
    color: #ffffff;
    background: transparent;
    border-bottom-color: var(--auth-magenta);
    box-shadow: 0 1px 0 var(--auth-magenta);
}

.atom-auth .form-control:-webkit-autofill,
.atom-auth .form-control:-webkit-autofill:hover,
.atom-auth .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #1a1038 inset;
    caret-color: #ffffff;
}

.atom-auth small {
    color: var(--auth-ink-soft);
}

/* Same reasoning as the login button: it is the action of the screen. */
.atom-auth .atom-btn-primary {
    width: 100%;
    margin-top: .5rem;
    padding: .8rem 1rem;
    border-radius: 9px;
    font-weight: 600;
}

/* ── Short viewports ────────────────────────────────────────────
   The shell reserves room at the bottom for the Atom mark. On a laptop that
   pushes the column past the fold, so the reserve shrinks with the screen. */

@media (max-height: 800px) {
    .atom-auth-shell {
        padding-top: 3.5rem;
        padding-bottom: 5rem;
    }
}

@media (max-height: 640px) {
    .atom-auth-shell {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .atom-auth-brand { margin-bottom: 1.75rem; }
    .atom-auth-intro { margin-bottom: 1.5rem; }
}