@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   Sign in
   A two-panel screen: the product on the left, the form on the right.

   Shared with the error page, which uses the .lg-solo variant to get the same
   panel on its own without the brand half.

   Self-contained on purpose. These pages run on LoginLayout, which loads no
   other stylesheet, so nothing here may depend on theme.css tokens — an
   undefined custom property invalidates the whole declaration and would leave
   an element transparent rather than falling back.
   ========================================================================== */

:root {
    --lg-deep: #004f7c;
    --lg-deep-lift: #00679e;
    --lg-deep-shade: #002f4a;
    --lg-green: #25b740;
    --lg-green-deep: #1c8f32;
    --lg-ink: #0d1c26;
    --lg-ink-soft: #4a5c68;
    --lg-muted: #85969f;
    --lg-line: #dde7ed;
    --lg-surface: #ffffff;
    --lg-surface-2: #f6f9fb;
}

* { box-sizing: border-box; }

html,
body {
    margin: 0;
    height: 100%;
    font-family: 'Inter', -apple-system, "Segoe UI", sans-serif;
    color: var(--lg-ink);
    background: var(--lg-surface);
}

/* --------------------------------------------------------------------------
   Frame
   -------------------------------------------------------------------------- */

/* LoginLayout wraps the page in a plain div with no height of its own, so a percentage
   minimum here resolved against an auto-height parent and came to nothing — the brand panel
   stopped wherever its content ended and left white below it. Measured against the viewport
   instead. No zoom applies on this page, so dvh is safe to use directly. */
.layout-wrapper { min-height: 100%; }

.lg-wrap {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;

    /* The form column is capped in pixels, not given a share of the width. A fraction meant that
       on a wide monitor it grew to 800-odd pixels around a 384px form and read as blank space,
       while the brand panel had room it was not using. Capped, every pixel the window gains goes
       to the panel that can actually fill it. */
    grid-template-columns: minmax(0, 1fr) minmax(420px, 560px);
}

/* --------------------------------------------------------------------------
   Brand panel
   -------------------------------------------------------------------------- */

.lg-brand {
    position: relative;
    overflow: hidden;

    /* The wrap sets a *minimum* height, so without a ceiling here the grid row simply grew to
       whatever the illustration wanted and nothing was ever forced to shrink — the art stayed
       full size and the footer went under the fold. Capped, the flex children below have a fixed
       budget to divide, and .lg-art is the one that gives way. */
    max-height: 100vh;
    max-height: 100dvh;
    background: linear-gradient(150deg, var(--lg-deep-shade) 0%, var(--lg-deep) 45%, var(--lg-deep-lift) 100%);
    color: #fff;
    padding: 44px 52px;
    display: flex;
    flex-direction: column;
}

/* Two soft washes rather than a photograph: they keep the panel from reading as
   flat colour without competing with the illustration for attention. */
.lg-brand::before,
.lg-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.lg-brand::before {
    width: 620px;
    height: 620px;
    top: -280px;
    right: -220px;
    background: radial-gradient(circle, rgba(37, 183, 64, .3) 0%, rgba(37, 183, 64, 0) 68%);
}

.lg-brand::after {
    width: 520px;
    height: 520px;
    bottom: -260px;
    left: -180px;
    background: radial-gradient(circle, rgba(111, 208, 255, .22) 0%, rgba(111, 208, 255, 0) 70%);
}

.lg-brand > * { position: relative; z-index: 1; }

.lg-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.lg-logo img {
    height: 38px;
    width: auto;
}

.lg-logo span {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.lg-brand-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 20px 0;

    /* A flex child will not shrink below its content unless told to. Without this the
       illustration kept the panel taller than the screen. */
    min-height: 0;
}

/* Sized off the panel it sits in rather than a fixed pixel cap, so a wide monitor gets a big
   illustration instead of a small one adrift in space.

   The viewport height cap stays: the copy and the footer below it are the parts that must
   survive, so the picture is what gives way on a short screen. Without it the art held its
   natural size and pushed the footer out of the panel entirely. */
.lg-art {
    width: 100%;
    max-width: min(720px, 100%);
    max-height: 52vh;
    height: auto;
    object-fit: contain;
    align-self: center;
    min-height: 0;
}

.lg-copy { max-width: 560px; }

.lg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 30px;
    padding: 5px 13px;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.lg-eyebrow i { color: #8ef0a6; font-size: 12px; }

.lg-headline {
    margin: 0 0 12px;

    /* Grows with the panel. The floor keeps it readable on a laptop, the ceiling stops it
       becoming a poster on a wide monitor. */
    font-size: clamp(30px, 2.4vw, 40px);
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -.02em;

    /* Evens the two lines out instead of leaving one orphaned word on the second.
       Ignored by browsers that do not support it, which simply wrap as before. */
    text-wrap: balance;
}

.lg-sub {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}

.lg-points {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 11px;
}

.lg-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .88);
}

.lg-points i {
    color: #8ef0a6;
    font-size: 15px;
    flex: none;
}

.lg-foot {
    flex: none;
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
}

/* --------------------------------------------------------------------------
   Form panel
   -------------------------------------------------------------------------- */

/* A faint ground rather than flat white, so the form reads as a card sitting on something
   instead of as a small object marooned in an empty field. */
.lg-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 40px;
    background: var(--lg-surface-2);
    overflow: hidden;
}

/* Picks up the brand panel's colours at very low opacity, which ties the two halves together
   across the seam. Behind the card, and inert. */
.lg-panel::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    top: -220px;
    right: -240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 103, 158, .1) 0%, rgba(0, 103, 158, 0) 70%);
    pointer-events: none;
}

.lg-panel::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    bottom: -230px;
    left: -200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 183, 64, .09) 0%, rgba(37, 183, 64, 0) 70%);
    pointer-events: none;
}

.lg-form-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: var(--lg-surface);
    border: 1px solid var(--lg-line);
    border-radius: 18px;
    padding: 38px 36px 32px;
    box-shadow: 0 18px 44px rgba(13, 43, 66, .09);
}

/* Shown only when the brand panel is not, so the product is still named. */
.lg-mini-logo {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
}

.lg-mini-logo img { height: 34px; width: auto; }

.lg-mini-logo span {
    font-size: 16px;
    font-weight: 800;
    color: var(--lg-ink);
}

.lg-title {
    margin: 0 0 6px;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--lg-ink);
}

.lg-lede {
    margin: 0 0 26px;
    font-size: 13.5px;
    color: var(--lg-ink-soft);
    line-height: 1.55;
}

.lg-field { margin-bottom: 16px; }

.lg-label {
    display: block;
    font-size: 12.5px;
    font-weight: 620;
    color: var(--lg-ink-soft);
    margin-bottom: 7px;
}

.lg-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--lg-line);
    border-radius: 11px;
    background: var(--lg-surface-2);
    font-family: inherit;
    font-size: 14px;
    color: var(--lg-ink);
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.lg-input::placeholder { color: var(--lg-muted); }

.lg-input:focus {
    outline: none;
    background: var(--lg-surface);
    border-color: var(--lg-deep-lift);
    box-shadow: 0 0 0 3px rgba(0, 103, 158, .15);
}

/* The eye sits inside the field, so the input needs room for it. */
.lg-password { position: relative; }
.lg-password .lg-input { padding-right: 44px; }

.lg-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 8px;
    color: var(--lg-muted);
    font-size: 16px;
    cursor: pointer;
    transition: color .14s ease, background .14s ease;
}

.lg-eye:hover { color: var(--lg-deep); background: var(--lg-surface-2); }
.lg-eye:focus-visible { outline: 2px solid var(--lg-deep-lift); outline-offset: -2px; }

.lg-hint {
    font-size: 12px;
    color: var(--lg-muted);
    margin: 0 0 22px;
}

.lg-btn {
    width: 100%;
    height: 47px;
    border: none;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--lg-deep) 0%, var(--lg-deep-lift) 100%);
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 650;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: filter .14s ease, transform .08s ease, box-shadow .14s ease;
    box-shadow: 0 8px 20px rgba(0, 79, 124, .22);
}

.lg-btn:hover { filter: brightness(1.08); box-shadow: 0 10px 26px rgba(0, 79, 124, .3); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:focus-visible { outline: 2px solid var(--lg-green); outline-offset: 2px; }

/* Anchor styled as the button, for the error page's way back. */
a.lg-btn { text-decoration: none; }

.lg-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fdecec;
    border: 1px solid #f5c2c2;
    border-left: 3px solid #d13438;
    color: #8f2226;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 20px;
}

.lg-alert i { font-size: 15px; margin-top: 1px; flex: none; }

.lg-note {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--lg-line);
    font-size: 12px;
    color: var(--lg-muted);
    line-height: 1.55;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Solo variant — the error page, which has no brand half
   -------------------------------------------------------------------------- */

.lg-wrap.lg-solo {
    grid-template-columns: minmax(0, 1fr);
    background: linear-gradient(150deg, var(--lg-deep-shade) 0%, var(--lg-deep) 55%, var(--lg-deep-lift) 100%);
    place-items: center;
    padding: 32px;
}

.lg-solo .lg-panel {
    max-width: 520px;
    width: 100%;
    background: var(--lg-surface);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 20, 34, .34);
    padding: 40px;
}

/* The panel is already the card here, so the box inside must not be a second one. */
.lg-solo .lg-panel::before,
.lg-solo .lg-panel::after { display: none; }

.lg-solo .lg-form-box {
    max-width: 100%;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.lg-body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--lg-ink-soft);
    margin: 0 0 16px;
}

.lg-ref {
    background: var(--lg-surface-2);
    border: 1px solid var(--lg-line);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: var(--lg-ink-soft);
    margin: 0 0 20px;
}

.lg-ref code {
    display: block;
    margin-top: 5px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12.5px;
    color: var(--lg-ink);
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Responsive
   The brand panel is the first thing to go: it is context, not the task. Below
   the breakpoint the form gets the whole screen and the logo moves into it.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .lg-wrap { grid-template-columns: 1fr minmax(400px, 480px); }
    .lg-brand { padding: 36px 40px; }
    .lg-headline { font-size: 26px; }
}

@media (max-width: 900px) {
    .lg-wrap { grid-template-columns: minmax(0, 1fr); }
    .lg-brand { display: none; }
    .lg-mini-logo { display: flex; }

    .lg-panel {
        align-items: flex-start;
        padding: 48px 28px;
        min-height: 100vh;
        min-height: 100dvh;
    }
}

@media (max-width: 480px) {
    .lg-panel { padding: 28px 14px; }
    .lg-form-box { padding: 28px 22px 24px; }
    .lg-title { font-size: 22px; }
    .lg-solo .lg-panel { padding: 28px 22px; }
}

/* A 768-tall laptop is the awkward case: tall enough to want the picture, not tall enough for
   it at full size. Tightening the illustration and the spacing keeps the whole panel — copy and
   footer included — above the fold, rather than quietly clipping the bottom of it. */
@media (max-height: 760px) and (min-width: 901px) {
    .lg-brand { padding-top: 34px; padding-bottom: 34px; }
    .lg-art { max-height: 33vh; }
    .lg-headline { font-size: clamp(26px, 2vw, 32px); }
    .lg-points { margin-top: 16px; gap: 9px; }
}

/* Shorter still, and the illustration is the part that can afford to go entirely. */
@media (max-height: 640px) and (min-width: 901px) {
    .lg-art { display: none; }
    .lg-brand-body { justify-content: center; }
}