/*==============================================================================
  Sign-in page - layout and type
  ------------------------------------------------------------------------------
  There are no colour values in this file. Every colour is a var() resolving to
  auth-theme.css, which both this page and the registration page share - so the
  primary colour is changed in one place and both screens follow. Do not
  reintroduce a literal here; it would be the one thing that stops following.

  The page itself:

    - the canvas is a light warm cream, never dark; there is no black anywhere
    - one flat accent carries every action, and nothing else competes with the
      two fields the page exists for
    - vertical rhythm is clamp(px, vh, px), so on a short laptop screen the
      spacing compresses instead of pushing Sign in below the fold

  The two theme colours have separate jobs, which is what keeps either from
  shouting: --auth-primary is instruction (the button, links), --auth-accent is
  warmth (the logo mark, feature icons, the focus ring).

  Headings use --auth-accent-display; everything the user has to read to fill
  the form - field labels, feature titles, the text they type - stays
  --auth-ink. Making those the accent too was tried and flattens the page: when
  every line is the same colour there is no hierarchy left, and the form starts
  to read as decoration rather than as something to fill in.

  Scoped under .rl- prefixes. The registration page is signup.css, same theme,
  same rules.
==============================================================================*/

.rl-page {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--auth-canvas);
    color: var(--auth-ink);
    font-family: var(--f-sans);
    -webkit-font-smoothing: antialiased;
    overflow: auto;
}

/*==================================================== left: what the product does */
.rl-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(22px, 4.6vh, 48px) clamp(26px, 3.4vw, 56px);
    /* near-white, warming through gold, finishing on a whisper of rose - the
       only place the two accents are allowed to touch */
    background: var(--auth-panel);
    border-right: 1px solid var(--auth-line);
    overflow: hidden;
}

/* one faint ring, low enough in contrast to stay out of the way */
.rl-brand::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -130px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 1px solid var(--auth-ring-faint);
    box-shadow: inset 0 0 0 30px var(--auth-ring-fainter);
    pointer-events: none;
}

.rl-brand__top {
    position: relative;
    z-index: 1;
}

.rl-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(16px, 3.4vh, 34px);
}

.rl-logo__mark {
    width: clamp(38px, 5.4vh, 46px);
    height: clamp(38px, 5.4vh, 46px);
    border-radius: 12px;
    background: var(--auth-accent);
    color: var(--auth-primary-deep);
    display: grid;
    place-items: center;
    font-size: clamp(16px, 2.4vh, 19px);
    flex-shrink: 0;
    box-shadow: 0 4px 12px var(--auth-accent-shadow);
}

.rl-logo__name {
    font-size: clamp(16px, 2.5vh, 19px);
    color: var(--auth-accent-display);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
}

.rl-logo__sub {
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--auth-primary);
    font-weight: 600;
    margin-top: 3px;
}

.rl-headline {
    font-size: clamp(23px, 4.1vh, 32px);
    color: var(--auth-accent-display);
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 clamp(8px, 1.4vh, 13px);
    /* Wider than the registration page's 16ch: this headline is longer, and at
       16ch it broke as "end to / end." rather than keeping the phrase whole. */
    max-width: 19ch;
}

.rl-headline em {
    font-style: normal;
    color: var(--auth-primary);
}

.rl-intro {
    font-size: clamp(14px, 1.9vh, 15px);
    line-height: 1.6;
    color: var(--auth-ink-soft);
    max-width: 48ch;
    margin: 0 0 clamp(16px, 3vh, 28px);
}

/*----------------------------------------------------------- highlights */
.rl-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1.3vh, 12px);
    max-width: 540px;
}

.rl-feature {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: var(--auth-card);
    border: 1px solid var(--auth-line-soft);
    border-radius: 12px;
    padding: clamp(10px, 1.6vh, 14px) clamp(11px, 1.4vw, 15px);
}

.rl-feature__icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--auth-accent-soft);
    color: var(--auth-accent-ink);
    display: grid;
    place-items: center;
    font-size: var(--fs-base);
    flex-shrink: 0;
}

.rl-feature__title {
    font-size: var(--fs-base);
    font-weight: 650;
    margin-bottom: 2px;
    letter-spacing: -.005em;
}

.rl-feature__text {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--auth-ink-soft);
}

/*------------------------------------------------------------ side note */
.rl-note {
    position: relative;
    z-index: 1;
    border-left: 3px solid var(--auth-accent);
    background: var(--auth-card-quiet);
    border-radius: 0 10px 10px 0;
    padding: clamp(10px, 1.6vh, 14px) clamp(13px, 1.3vw, 17px);
    margin-top: clamp(14px, 2.6vh, 26px);
    max-width: 540px;
}

.rl-note__label {
    font-size: var(--fs-xs);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--auth-accent-ink);
    font-weight: 700;
    margin-bottom: 4px;
}

.rl-note__text {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--auth-ink-soft);
}

.rl-note__text strong { color: var(--auth-ink); font-weight: 650; }

.rl-brand__foot {
    position: relative;
    z-index: 1;
    font-size: var(--fs-xs);
    color: var(--auth-ink-soft);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: clamp(12px, 2.4vh, 24px);
}

.rl-brand__foot a {
    color: var(--auth-primary);
    text-decoration: none;
}

.rl-brand__foot a:hover { text-decoration: underline; }

/*======================================================== right: the form */
.rl-login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vh, 44px) clamp(22px, 3vw, 48px);
}

.rl-form-wrap {
    width: 100%;
    max-width: 420px;
}

.rl-form-head {
    margin-bottom: clamp(14px, 2.8vh, 26px);
}

.rl-form-head h1 {
    font-size: clamp(20px, 3.2vh, 25px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--auth-accent-display);
    margin: 0 0 5px;
}

.rl-form-head p {
    font-size: var(--fs-base);
    color: var(--auth-ink-soft);
    margin: 0;
}

/*--------------------------------------------------------------- fields */
.rl-field {
    margin-bottom: clamp(10px, 1.9vh, 16px);
}

.rl-field label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--auth-ink);
    margin-bottom: 6px;
    letter-spacing: -.005em;
}

/*
  A plain, modern textbox: one hairline border, generous radius, and a focus
  state that reads as a soft gold ring rather than a hard browser outline.

  Blazor's own .valid.modified / .invalid rules in app.css paint a green or red
  outline on every touched input. They are more specific than a bare element
  selector, so they have to be switched off explicitly here - otherwise a green
  outline appears the moment the user types their email.
*/
.rl-page .rl-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--auth-line);
    border-radius: 10px;
    background: var(--auth-surface);
    padding: clamp(9px, 1.5vh, 12px) 13px;
    font: inherit;
    font-size: var(--fs-md);
    line-height: 1.35;
    color: var(--auth-ink);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.rl-page .rl-input::placeholder { color: var(--auth-ink-faint); }

.rl-page .rl-input:hover:not(:focus) { border-color: var(--auth-line-hover); }

.rl-page .rl-input:focus,
.rl-page .rl-input.valid.modified:focus {
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px var(--auth-ring);
    outline: none;
}

/* Blazor's template outlines, neutralised inside this page only. */
.rl-page .rl-input.valid.modified:not([type=checkbox]) { outline: none; }

.rl-page .rl-input.invalid {
    outline: none;
    border-color: var(--auth-danger-line);
}

.rl-page .rl-input.invalid:focus {
    border-color: var(--auth-danger);
    box-shadow: 0 0 0 3px var(--auth-danger-ring);
}

.rl-input-wrap { position: relative; }
.rl-input-wrap .rl-input { padding-right: 42px; }

.rl-reveal {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--auth-ink-soft);
    cursor: pointer;
    padding: 6px 8px;
    font-size: var(--fs-base);
    line-height: 1;
    border-radius: 7px;
}

.rl-reveal:hover { color: var(--auth-primary); }

.rl-error {
    display: block;
    color: var(--auth-danger);
    font-size: var(--fs-xs);
    margin-top: 4px;
}

/*------------------------------------------- remember me / forgot password */
.rl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: clamp(6px, 1.2vh, 10px) 0 clamp(12px, 2.2vh, 18px);
    flex-wrap: wrap;
}

.rl-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-base);
    color: var(--auth-ink-soft);
    cursor: pointer;
    user-select: none;
}

.rl-check input {
    accent-color: var(--auth-primary);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.rl-link {
    font-size: var(--fs-base);
    color: var(--auth-primary);
    text-decoration: none;
    font-weight: 600;
}

.rl-link:hover { text-decoration: underline; }

/*-------------------------------------------------------- primary action */
.rl-submit {
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: clamp(10px, 1.7vh, 13px) 18px;
    font-size: var(--fs-md);
    font-weight: 650;
    letter-spacing: -.005em;
    color: var(--auth-on-primary);
    background: var(--auth-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 2px 8px var(--auth-primary-shadow);
    transition: background-color .15s ease, box-shadow .15s ease, transform .06s ease;
}

.rl-submit:hover:not(:disabled) {
    background: var(--auth-primary-strong);
    box-shadow: 0 4px 14px var(--auth-primary-shadow-lift);
}

.rl-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--auth-ring), 0 2px 8px var(--auth-primary-shadow);
}

.rl-submit:active:not(:disabled) { transform: translateY(1px); }

.rl-submit:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

.rl-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--auth-on-primary-faint);
    border-top-color: var(--auth-on-primary);
    border-radius: 50%;
    animation: rl-spin .7s linear infinite;
}

@keyframes rl-spin { to { transform: rotate(360deg); } }

/*------------------------------------------------------------- messages */

/*
  Every notice this page shows is a next step rather than a failure - an
  expired session, an unconfirmed address - so they are gold, the page's
  quiet colour, and never red. Red is reserved for a field that is wrong.
*/
.rl-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--auth-accent-soft);
    border: 1px solid var(--auth-accent-line);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--auth-accent-display);
    margin-bottom: clamp(12px, 2.2vh, 18px);
}

.rl-alert__icon {
    color: var(--auth-accent-ink);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Inline action inside an alert - "resend verification email". */
.rl-resend {
    margin-top: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 650;
    color: var(--auth-primary);
    text-decoration: underline;
    cursor: pointer;
}

.rl-resend:hover:not(:disabled) { color: var(--auth-primary-strong); }
.rl-resend:disabled { opacity: .6; cursor: not-allowed; text-decoration: none; }

/*
  What came of pressing it, sitting under the button rather than replacing the
  line above it. It needs to be visibly a new thing on the page - the user
  pressed a button and is waiting to be told something - so it gets its own
  panel inside the alert, a rule above it and an icon, instead of being one
  more sentence in the same block of text.

  The alert around it is already the warm accent colour, so a nested panel in
  the same colour would disappear into it; these use the surface colour to lift
  off the alert's background.
*/
.rl-resend-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--auth-accent-line);
    font-size: var(--fs-sm);
    line-height: 1.55;
    font-weight: 600;
    color: var(--auth-ink);
}

.rl-resend-msg__icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.rl-resend-msg--ok .rl-resend-msg__icon { color: var(--auth-primary); }

/* Still not the red reserved for a wrong field - this is "it did not go out",
   not "you typed something invalid". */
.rl-resend-msg--bad { color: var(--auth-danger); }
.rl-resend-msg--bad .rl-resend-msg__icon { color: var(--auth-danger); }

/*------------------------------------------------------------------ foot */
.rl-signup {
    text-align: center;
    font-size: var(--fs-base);
    color: var(--auth-ink-soft);
    margin-top: clamp(12px, 2.2vh, 20px);
    padding-top: clamp(11px, 2vh, 18px);
    border-top: 1px solid var(--auth-line-soft);
}

.rl-signup a {
    color: var(--auth-primary);
    font-weight: 600;
    text-decoration: none;
}

.rl-signup a:hover { text-decoration: underline; }

/*============================================================= responsive */

/* Two columns need the room; below this the page stacks and scrolls
   normally, which is the right behaviour on a phone. */
@media (max-width: 900px) {
    .rl-page {
        position: static;
        min-height: 100vh;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .rl-brand { padding: 28px 24px; }
    .rl-brand::after { display: none; }
    .rl-headline { font-size: var(--fs-2xl); max-width: none; }
    .rl-features { max-width: none; }
    .rl-login { padding: 30px 24px 48px; }
    .rl-form-wrap { max-width: 460px; }

    /* The supporting prose is what stands between a phone user and the two
       fields they came for, so it goes - the four cards say the same thing in
       a quarter of the height. */
    .rl-intro { display: none; }
    .rl-note { display: none; }
    .rl-brand__foot { display: none; }
}

@media (max-width: 560px) {
    .rl-brand { padding: 24px 18px; }
    .rl-headline { font-size: var(--fs-2xl); }
    .rl-features { grid-template-columns: 1fr; }
    .rl-login { padding: 26px 18px 40px; }
}

/* Wide but very short (a laptop with a lot of browser chrome): drop the
   supporting copy rather than let the form scroll. */
@media (min-width: 901px) and (max-height: 600px) {
    .rl-intro { display: none; }
    .rl-note { display: none; }
    .rl-brand__foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rl-page * { transition: none !important; animation: none !important; }
}