/* ============================================================================
   Resolute Coworks - Auth shell (Login / Register / MFA)
   ----------------------------------------------------------------------------
   Hand-authored plain CSS, NOT a Tailwind build artifact.

   Why plain CSS rather than @apply inside Styles/app.css:
     wwwroot/css/app.css is a committed Tailwind CLI output and no Node toolchain
     is installed on this machine, so any utility or component class that is not
     already baked into that artifact silently no-ops. This file is loaded after
     app.css, is never overwritten by `npm run build:css`, and owns every rule
     the auth screens need.

   Why an external file rather than a page <style> block:
     SecurityHeadersMiddleware sends `style-src 'self'` with no 'unsafe-inline',
     so a <style> element on the page is dropped by the browser.

   Namespace: every selector is .rc-* so nothing here can reach another screen.
   Palette:   brand #9E4323 . sand #C68C53 . olive #4E5343 . ink #1C1917
   ========================================================================== */

/* ------------------------------------------------------------------ Shell */

.rc-auth {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
    color: #0F172A;
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------- Left / showcase panel */

.rc-brand {
    position: relative;
    display: none;                 /* single-column below lg; see media query */
    width: 50%;
    flex-direction: column;
    overflow: hidden;
    background: #17110E;
    color: #fff;
    padding: 34px 38px 26px;
}

/* Photographic backdrop: a warm, low-light coworking interior (wwwroot/img/
   auth-showcase.jpg), dimmed under a warm veil so the headline and feature copy
   keep AA contrast over it.

   The file is cropped portrait at source, to roughly the aspect this panel takes
   on a desktop - pendant lamps high, greenery mid-frame, tables across the lower
   third. Cropping in the image rather than leaning on object-position means the
   framing barely shifts as the viewport changes, and it keeps the reception
   signage out of frame (wall text sliced mid-word at some widths, otherwise). */
.rc-brand-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #2A1E17;   /* holds the panel colour until the photo paints */
}
.rc-brand-bg img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

/* Horizontal, not vertical: the copy column occupies the left ~60% of the panel,
   so that side is taken almost to black while the right side stays open enough
   to read as a photograph. Second layer just settles the top and bottom edges. */
.rc-brand-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(9, 6, 5, .82) 0%, rgba(9, 6, 5, .74) 40%, rgba(9, 6, 5, .42) 68%, rgba(9, 6, 5, .16) 100%),
        linear-gradient(180deg, rgba(9, 6, 5, .28) 0%, rgba(9, 6, 5, .06) 45%, rgba(9, 6, 5, .42) 100%);
}

.rc-brand-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 22px;
    min-height: 0;
}

/* --- Identity lockup --- */

.rc-lockup { display: flex; align-items: center; gap: 18px; }

.rc-lockup-text { display: block; }

.rc-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6);
    flex-shrink: 0;
}
.rc-logo-badge img { height: 62px; width: auto; display: block; }

/* Serif, to sit with the serif wordmark in the logo artwork itself. No webfont:
   font-src is 'self' and the repo ships no font files, so this is a stack of
   families the OS already has. */
.rc-wordmark {
    display: block;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: .10em;
    line-height: 1.05;
    color: #fff;
}

/* The rules flex to fill the column, so they stop exactly at the wordmark's
   width however the wordmark ends up measuring. */
.rc-wordmark-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .30em;
    color: #EDE6DF;
    margin-top: 5px;
    text-indent: .30em;   /* offsets the trailing letter-space, keeps it centred */
}
.rc-wordmark-sub::before,
.rc-wordmark-sub::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, .45);
}

.rc-tagline {
    display: inline-flex;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 12px;
    padding: 6px 16px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(224, 138, 75, .75);
    color: #F0902F;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
}

/* --- Headline --- */

/* margin-top adds to .rc-brand-inner's gap, so this is the breathing room
   between the identity lockup and the headline. It is set per height tier
   because the tiers shrink that gap; the slack comes out of the space above the
   promo card, which .rc-premium's margin-top:auto is holding anyway. */
.rc-headline {
    margin: 18px 0 0;
    font-size: 40px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #fff;
    /* Lifts the type off the photograph without needing a heavier veil. */
    text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.rc-headline span { color: #F0902F; }

.rc-sub {
    margin: 0;
    max-width: 30rem;
    font-size: 14.5px;
    line-height: 1.55;
    color: #CFC7BF;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

/* --- Feature cards --- */

/* Held to a column narrower than the panel: the cards read as a list against the
   photograph rather than as full-bleed bars. Wide enough that the shorter rows
   hold one line; the longest wraps to two, which is fine for a sentence. */
.rc-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 2px 0 0;
    padding: 0;
    /* Sized so the longest sentence clears one line at the 13px step used from
       940px tall down; below that the type drops again and keeps clearing. */
    max-width: 32rem;
    list-style: none;
}

.rc-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 17px;
    border-radius: 14px;
    /* Tinted dark rather than tinted white: these panes float over photography
       now, and a white wash would lift the plate toward the row text. The top
       hairline and the cast shadow are what give a flat plate its edge. */
    background: linear-gradient(180deg, rgba(46, 33, 24, .46) 0%, rgba(26, 18, 12, .38) 100%);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 8px 22px -14px rgba(0, 0, 0, .9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* One plate, one glyph colour for every row. Warm-tinted rather than neutral -
   it ties the row back to the brand accent instead of reading as grey chrome.
   The variant classes stay in the markup so a per-feature colour can come back
   without touching the layout. */
.rc-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    width: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(245, 148, 47, .18) 0%, rgba(245, 148, 47, .07) 100%);
    border: 1px solid rgba(245, 148, 47, .26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
    color: #F5942F;
}
.rc-feature-icon svg { height: 21px; width: 21px; }

.rc-feature-text {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #F4EFEA;
    line-height: 1.45;
}

/* --- Premium promo card --- */

.rc-premium {
    display: flex;
    align-items: stretch;
    gap: 20px;
    /* Takes up whatever slack is left in the column, so the card sits against
       the footer instead of leaving a void below it. Collapses to nothing on
       short viewports, where there is no slack to take. */
    margin-top: auto;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(42, 30, 22, .66) 0%, rgba(24, 17, 11, .60) 100%);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 18px 44px -26px rgba(0, 0, 0, .95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Vector scene on the left, copy on the right. The art carries its own aspect
   ratio through the viewBox, so it only needs a share of the row and a width. */
.rc-premium-art {
    flex: 0 0 52%;
    max-width: 320px;
    min-width: 0;
}
.rc-premium-art svg { display: block; width: 100%; height: auto; }

.rc-premium-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.rc-premium-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    line-height: 1.45;
}
.rc-premium-title span { display: block; }

.rc-premium-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #B7ADA4;
}

/* --- Left panel footer --- */

.rc-brand-foot {
    position: relative;
    z-index: 2;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .10);
    display: flex;
    flex-direction: column;
}

.rc-brand-foot-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10.5px;
    color: #8B8179;
}

/* ---------------------------------------------------- Right / form panel */

/* Warm sand ground, not near-white. A white card on a #FCFBFA panel is white on
   white - the card has no edge and the whole side reads flat next to the
   photographic panel opposite. Tinting the ground is what lets the card read as
   a card. */
.rc-form {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    background: linear-gradient(160deg, #FDF6EF 0%, #FBF2E9 46%, #F7EDE3 100%);
}

/* Ambient warmth behind the card. Flat #FCFBFA reads as an empty sheet at this
   panel width; two very low-opacity brand washes give the card something to sit
   on without becoming a visible gradient. */
.rc-form::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(62% 46% at 50% 28%, rgba(224, 138, 75, .13) 0%, rgba(224, 138, 75, 0) 72%),
        radial-gradient(46% 34% at 94% 88%, rgba(158, 67, 35, .10) 0%, rgba(158, 67, 35, 0) 72%),
        radial-gradient(40% 32% at 3% 90%, rgba(78, 83, 67, .07) 0%, rgba(78, 83, 67, 0) 72%);
}

/* Decorative dotted field on the outer edge, mirroring the mockup. */
.rc-form::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 12%;
    height: 220px;
    width: 92px;
    pointer-events: none;
    background-image: radial-gradient(circle, #E9A279 1.3px, transparent 1.4px);
    background-size: 14px 14px;
    opacity: .42;
}

/* The in-card logo row (.rc-card-brand) is gone. It was right-aligned above a
   hairline, which left a wide empty band across the top-left of every auth card,
   and the mark it carried is already on the promo panel opposite at every width
   this layout shows the card at. The card now opens on the eyebrow badge. */

/* Centred with AUTO MARGINS on the child, not justify-content: center.

   The two are identical while the card fits. They differ the moment it does not,
   and that difference is a bug: justify-content: center distributes the overflow
   to BOTH ends, so the top of the card ends up above the scroll origin and can
   never be scrolled to. Auto margins collapse to zero on the overflowing side
   instead, so the card stays reachable and only spills downward. */
.rc-form-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 34px 26px 40px;
}
/* Scales with the panel instead of being a fixed cap, because the panel is 50vw
   and therefore anything from ~510px on a 1024 window to ~1280px on a 2560 one.
   A single number cannot serve that range: 560 crowded a 1280-wide window (40px
   of gutter), and 480 left a 1920-wide one looking like a small card adrift in a
   960px field of sand.

   92% of the panel's content box, floored at 440 and ceilinged at 800. The floor
   keeps a real gutter on narrow windows; the ceiling stops the form growing past
   a readable measure on very wide ones. Every screen on this layout (Login,
   Register, MfaVerify, the forgot panel) is a one-column .rc-form-grid, so the
   ceiling is about line length, not content. */
.rc-form-body > * {
    width: 100%;
    max-width: clamp(440px, 92%, 800px);
    margin-block: auto;
    /* Do NOT let the card squash. .rc-form-body is a flex column AND the scroll
       container, so its child is a flex item with the default flex-shrink:1. On a
       viewport too short for the card that item shrinks to fit instead of
       overflowing — the scroll height never grows, no scrollbar appears, and the
       card's real content spills out and is clipped by .rc-auth's overflow:hidden.
       Register is where this bites first: four fields plus the password hint make
       it the tallest card on this shell, so it outgrows the viewport at heights
       Login still clears. flex-shrink:0 keeps the item at its content height, which
       is what gives .rc-form-body something to scroll. Same guard as .rc-form-hero.

       Pairs with margin-block:auto above: auto margins only centre while there is
       free space; once it goes negative flexbox resolves them to zero, so the card
       stays pinned to the top of the scroll origin and spills downward only. */
    flex-shrink: 0;
}

/* --------------------------------------------------------- The auth card */

/* Three shadow layers rather than one: a tight contact shadow to seat the card,
   a mid diffusion for form, and a wide soft cast for depth. A single blur at
   this size reads as a grey smudge. */
.rc-card {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF9 100%);
    border: 1px solid #F0E4D9;
    border-radius: 20px;
    padding: 34px 36px 30px;
    box-shadow:
        0 1px 2px rgba(90, 48, 20, .06),
        0 10px 22px -12px rgba(90, 48, 20, .14),
        0 34px 64px -34px rgba(90, 48, 20, .32);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Brand strips across the top and bottom of the card - the saturated colour on
   this side, and what stops a white panel from reading as a blank sheet. They
   sit inside the 1px border, so each radius is the card's less that border.

   All warm: an olive stop at the far end reads as discoloration next to the sand
   ground rather than as a deliberate accent. */
.rc-card::before,
.rc-card::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, #8E3A1D 0%, #C2521C 30%, #E8912F 62%, #E9A961 86%, #DDB489 100%);
}
.rc-card::before {
    top: 0;
    border-radius: 19px 19px 0 0;
}
.rc-card::after {
    bottom: 0;
    border-radius: 0 0 19px 19px;
}

.rc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: -moz-fit-content;
    width: fit-content;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #FEF6F0 0%, #FDEDE3 100%);
    border: 1px solid #F6DCCC;
    box-shadow: 0 1px 2px rgba(194, 82, 28, .06);
    color: #C2521C;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.rc-eyebrow svg { height: 14px; width: 14px; }

.rc-h1 {
    margin: 14px 0 0;
    font-size: 31px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #16110E;
}
.rc-lede {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6E635A;
}

/* ---------------------------------------------------------------- Fields */

.rc-form-grid { display: flex; flex-direction: column; gap: 18px; }

.rc-field { display: flex; flex-direction: column; gap: 8px; }

.rc-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #3B4653;
}

.rc-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.rc-inputwrap { position: relative; display: block; }

.rc-inputwrap .rc-input-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: 18px;
    color: #5B6672;
    pointer-events: none;
    transition: color .15s ease;
}
.rc-inputwrap .rc-input-icon svg { height: 19px; width: 19px; }
.rc-inputwrap:focus-within .rc-input-icon { color: #9E4323; }

.rc-input {
    height: 54px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid #E9DFD5;
    background: #FDFCFB;
    padding: 0 16px 0 52px;
    font: inherit;
    font-size: 15px;
    color: #1B2530;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.rc-input::-moz-placeholder { color: #9AA2AB; }
.rc-input::placeholder { color: #9AA2AB; }
.rc-input:hover { border-color: #DCCCBE; }
.rc-input:focus {
    background: #fff;
    border-color: #C2521C;
    box-shadow: 0 0 0 4px rgba(194, 82, 28, .13);
}
.rc-inputwrap.has-toggle .rc-input { padding-right: 50px; }

.rc-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border: 0;
    background: none;
    color: #8B939C;
    cursor: pointer;
    border-radius: 0 12px 12px 0;
    transition: color .15s ease;
}
.rc-toggle:hover { color: #9E4323; }
.rc-toggle:focus-visible { outline: 2px solid rgba(158, 67, 35, .45); outline-offset: -2px; }
.rc-toggle svg { height: 18px; width: 18px; }
/* The toggle is an app-btn-icon (ghost) for its focus/disabled contract; inside the
   input it keeps this screen's full-height, borderless, tint-free shape. */
.rc-toggle.app-btn-icon { width: auto; height: auto; border: 0; border-radius: 0 12px 12px 0; }
.rc-toggle.app-btn-icon:hover { background: none; border-color: transparent; color: #9E4323; }

/* One-time-code field: no icon gutter, so the digits centre on the box. */
.rc-input-code {
    padding-left: 16px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .42em;
    text-indent: .42em;   /* offsets the trailing letter-space */
}
.rc-input-code::-moz-placeholder { letter-spacing: .42em; color: #D3CCC5; }
.rc-input-code::placeholder { letter-spacing: .42em; color: #D3CCC5; }
.rc-input-code:disabled { background: #F6F3F1; cursor: not-allowed; }

/* Helper text under a field (password rules, format hints). */
.rc-hint {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #8A8078;
}

.rc-forgot {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #DE5F27;
    cursor: pointer;
}
.rc-forgot:hover { text-decoration: underline; }
.rc-forgot:focus-visible { outline: 2px solid rgba(158, 67, 35, .5); outline-offset: 3px; border-radius: 4px; }

/* ----------------------------------------------------------- Remember me */

.rc-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #37424E;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.rc-remember input {
    height: 15px;
    width: 15px;
    margin: 0;
    border-radius: 4px;
    border: 1px solid #D2C7BE;
    accent-color: #A8461A;
    cursor: pointer;
}
.rc-remember input:focus-visible { outline: 2px solid rgba(158, 67, 35, .5); outline-offset: 2px; }

/* --------------------------------------------------------- Submit button */

.rc-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: #9E4323;
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    /* Inset top highlight reads as a lit edge, which is what stops a flat dark
       fill from looking like a printed rectangle. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 12px 24px -14px rgba(158, 67, 35, .55);
    transition: background-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.rc-submit:hover:not(:disabled) {
    background: #85361A;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 16px 30px -14px rgba(158, 67, 35, .70);
}
.rc-submit:active:not(:disabled) { transform: translateY(1px); }
.rc-submit:disabled { cursor: not-allowed; opacity: .65; }
.rc-submit:focus-visible { outline: 2px solid rgba(158, 67, 35, .65); outline-offset: 3px; }
.rc-submit svg { height: 16px; width: 16px; }

/* A button that has to read as a link, for state changes that go nowhere (the
   recovery panel toggles Alpine state, so it cannot be an anchor). Matches the
   anchors in .rc-card-foot exactly. */
.rc-linkbtn {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: #D0521B;
    cursor: pointer;
}
.rc-linkbtn:hover { text-decoration: underline; }
.rc-linkbtn:focus-visible { outline: 2px solid rgba(158, 67, 35, .5); outline-offset: 3px; border-radius: 4px; }

/* Submit spinner: app-loading app-loading-on-brand (app-components.css). */
@media (prefers-reduced-motion: reduce) {
    .rc-submit, .rc-role { transition: none; }
}

/* --------------------------------------------------------------- Divider */

.rc-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #8A9099;
}
.rc-divider::before,
.rc-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #F1E5DA;
}

/* -------------------------------------------------- Demo role quick-fill */

.rc-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.rc-role {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 16px;
    border-radius: 11px;
    border: 1px solid;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(60, 35, 20, .05);
    transition: box-shadow .15s ease, transform .15s ease;
}
.rc-role:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(60, 35, 20, .38);
}
.rc-role:focus-visible { outline: 2px solid rgba(158, 67, 35, .5); outline-offset: 2px; }
.rc-role svg { height: 19px; width: 19px; flex-shrink: 0; }

.rc-role.is-admin    { background: #FEF6EE; border-color: #F6DFC8; color: #A85F1B; }
.rc-role.is-front    { background: #EFF6FF; border-color: #D8E6FA; color: #2A66C4; }
.rc-role.is-service  { background: #EDF9F1; border-color: #CDEBD9; color: #1B8149; }
.rc-role.is-customer { background: #F6F2FE; border-color: #E3D9F8; color: #7040C4; }

/* ------------------------------------------------------------- Card foot */

/* Ruled off from the form above it - it is site navigation, not part of the
   sign-in sequence. */
.rc-card-foot {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 2px;
    padding-top: 20px;
    border-top: 1px solid #F1E5DA;
    text-align: center;
    font-size: 11.5px;
    color: #57504A;
}
.rc-card-foot a { color: #D0521B; font-weight: 500; text-decoration: none; }
.rc-card-foot a:hover { text-decoration: underline; }
.rc-card-foot small { font-size: inherit; color: #8A8078; line-height: 1.5; }

.rc-alert-icon { flex-shrink: 0; margin-top: 1px; }

/* ------------------------------------------------------------ Responsive */

/* Desktop: the shell is exactly one screen and never scrolls.

   height, not min-height: min-height lets the taller column push the shell past
   the viewport, which is what put a scrollbar on this page. overflow: hidden is
   what makes that binding rather than advisory.

   100dvh after 100vh: on the mobile-style browser UI some laptops now ship, 100vh
   measures the viewport with the toolbars retracted and overshoots the visible
   area. Browsers that do not know dvh keep the vh line above it.

   Each column then owns its own overflow — see .rc-brand (clipped, it is
   decorative) and .rc-form-body (scrollable, so a form can never become
   unreachable on a viewport too short for it). */
@media (min-width: 1024px) {
    .rc-auth {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .rc-brand { display: flex; min-height: 0; }

    .rc-form {
        width: 50%;
        min-height: 0;
    }

    /* The safety valve. The height tiers below keep the composition inside the
       screen down to ~768px; under that this column scrolls on its own rather
       than the whole page, so the sign-in button is always reachable. */
    .rc-form-body {
        min-height: 0;
        overflow-y: auto;
    }
}

/* Short-viewport tier. The type scale above is sized for a ~1000px-tall window;
   .rc-brand is overflow:hidden (it has to be, it clips the backdrop), so on a
   shorter laptop the promo card would be cut off rather than scrolled. This
   steps the whole panel down so the full composition still fits. Width-gated so
   it can never reach the single-column layout.

   940 -> 1000. The old boundaries (940 and 810) left a dead band: a maximised
   1920x1080 window has roughly an 840px viewport once browser chrome and the
   taskbar are taken off, which took the gentle tier and not the strong one. The
   promo panel does not fit in 840 at this scale, so .rc-auth's min-height:100vh
   grew past the viewport, the page scrolled, and the card — centred in a column
   taller than the screen — sat with dead space above it and its foot below the
   fold. The two tiers now cover 1000 and 900, so an 840px viewport gets the
   strong step and the shell stays exactly one screen tall. */
@media (min-width: 1024px) and (max-height: 1000px) {
    .rc-brand { padding: 26px 34px 20px; }
    .rc-brand-inner { gap: 13px; }

    .rc-logo-badge { padding: 11px 13px; border-radius: 15px; }
    .rc-logo-badge img { height: 48px; }
    .rc-wordmark { font-size: 24px; }
    .rc-wordmark-sub { font-size: 11px; margin-top: 4px; }
    .rc-tagline { margin-top: 9px; padding: 5px 13px; font-size: 10px; }

    .rc-headline { font-size: 31px; margin-top: 16px; }
    .rc-sub { font-size: 13px; }

    .rc-features { gap: 7px; }
    .rc-feature { padding: 9px 13px; gap: 12px; border-radius: 12px; }
    .rc-feature-icon { height: 37px; width: 37px; border-radius: 10px; }
    .rc-feature-icon svg { height: 18px; width: 18px; }
    .rc-feature-text { font-size: 13px; }

    .rc-premium { padding: 14px; gap: 15px; border-radius: 15px; }
    .rc-premium-art { max-width: 270px; }
    .rc-premium-copy { gap: 9px; }
    .rc-premium-title { font-size: 15px; }
    .rc-premium-text { font-size: 12px; }

    .rc-brand-foot { margin-top: 12px; padding-top: 11px; }

    /* The form side steps down too, but less hard than it used to: the quick-fill
       tiles (a divider plus a 2x2 grid, ~150px) are commented out of Login, so the
       card no longer needs that much taken off it to clear the fold. */
    .rc-form-body { padding: 26px 26px 30px; }
    .rc-card { padding: 30px 32px 26px; gap: 19px; }
    .rc-h1 { font-size: 29px; margin-top: 12px; }
    .rc-lede { font-size: 13px; }
    .rc-form-grid { gap: 16px; }
    .rc-input { height: 51px; font-size: 14.5px; }
    .rc-role { padding: 12px 14px; font-size: 12.5px; }
    .rc-card-foot { padding-top: 16px; }
}

/* Second step. Same reasoning as the tier above, further down the scale — this
   is the one that has to fit a maximised 1080p window (~840px of viewport) and a
   768-tall laptop, the two most common short desktop viewports there are. */
@media (min-width: 1024px) and (max-height: 900px) {
    .rc-brand { padding: 20px 32px 15px; }
    .rc-brand-inner { gap: 10px; }

    .rc-logo-badge { padding: 9px 11px; border-radius: 13px; }
    .rc-logo-badge img { height: 42px; }
    .rc-wordmark { font-size: 21px; }
    .rc-wordmark-sub { font-size: 10px; letter-spacing: .26em; }
    .rc-tagline { margin-top: 7px; padding: 4px 11px; font-size: 9.5px; }

    .rc-headline { font-size: 27px; margin-top: 14px; }
    .rc-sub { font-size: 12.5px; line-height: 1.45; }

    .rc-features { gap: 6px; }
    .rc-feature { padding: 8px 12px; gap: 11px; }
    .rc-feature-icon { height: 33px; width: 33px; border-radius: 9px; }
    .rc-feature-icon svg { height: 16px; width: 16px; }
    .rc-feature-text { font-size: 12.5px; }

    .rc-premium { padding: 12px; gap: 13px; }
    .rc-premium-art { max-width: 230px; }
    .rc-premium-copy { gap: 7px; }
    .rc-premium-title { font-size: 14px; }
    .rc-premium-text { font-size: 11.5px; }

    .rc-brand-foot { margin-top: 10px; padding-top: 9px; gap: 9px; }
    .rc-brand-foot-row { font-size: 10px; }

    .rc-form-body { padding: 20px 26px 24px; }
    /* The form column is NOT compressed the way the promo panel is. This tier
       exists because .rc-brand's fixed composition — logo, headline, three
       features, promo card, footer — has to fit one screen. The card opposite is
       barely 500px tall in an 840px viewport, so shrinking it too bought nothing
       and left it looking like a short band floating in the panel. It keeps the
       full type scale here and only gives up a little padding. */
    .rc-card { padding: 32px 36px 28px; gap: 20px; }
    .rc-h1 { font-size: 29px; margin-top: 12px; }
    .rc-lede { font-size: 13px; margin-top: 7px; }
    .rc-form-grid { gap: 18px; }
    .rc-input { height: 54px; }
    .rc-role { padding: 10px 13px; font-size: 12px; }
    .rc-roles { gap: 10px; }
    .rc-card-foot { padding-top: 13px; }
}

/* Third step, for a viewport under ~620px. Reached on a small window, and also
   on a normal one at 125-150% browser zoom, which divides the CSS viewport by
   the zoom factor. Measured: at 502px the showcase column overran by 98px and
   the card by 74px, so both need a real reduction, not another nudge.

   The promo card SHRINKS, it does not disappear. An earlier version dropped it
   here, which left a hole in the middle of the panel — .rc-premium carries
   margin-top:auto, so removing it hands its slack to empty space rather than
   closing the column up. It reads as a missing block, not a tighter layout. */
@media (min-width: 1024px) and (max-height: 620px) {
    .rc-premium { padding: 9px; gap: 10px; border-radius: 13px; }
    .rc-premium-art { max-width: 150px; }
    .rc-premium-copy { gap: 5px; }
    .rc-premium-title { font-size: 12.5px; line-height: 1.35; }
    .rc-premium-text { font-size: 10.5px; line-height: 1.45; }

    .rc-brand { padding: 16px 28px 12px; }
    .rc-brand-inner { gap: 8px; }
    .rc-logo-badge img { height: 34px; }
    .rc-wordmark { font-size: 18px; }
    .rc-headline { font-size: 23px; margin-top: 10px; }
    .rc-sub { font-size: 12px; }
    .rc-feature { padding: 6px 11px; }
    .rc-feature-icon { height: 28px; width: 28px; }
    .rc-feature-text { font-size: 12px; }

    /* Narrow side padding, so the card takes the width the panel has rather than
       giving it to sand. The showcase panel is what forced this tier; the form
       column has slack here and does not need to give any up. */
    .rc-form-body { padding: 10px 18px 12px; }
    .rc-card { padding: 24px 30px 20px; gap: 14px; }
    .rc-h1 { font-size: 25px; margin-top: 9px; }
    .rc-lede { font-size: 12.5px; margin-top: 6px; }
    .rc-form-grid { gap: 14px; }
    .rc-field { gap: 6px; }
    .rc-input { height: 48px; font-size: 14px; }
    .rc-submit { height: 48px; }
    .rc-card-foot { padding-top: 12px; }
}

/* Fourth step, ~500px and under — a normal window at roughly 200% zoom. The
   promo card is still kept; only the gaps between blocks come out, which is the
   last slack the column has before type would have to shrink again. */
@media (min-width: 1024px) and (max-height: 500px) {
    .rc-brand { padding: 12px 26px 10px; }
    .rc-brand-inner { gap: 6px; }
    .rc-headline { margin-top: 7px; }
    .rc-features { gap: 4px; }
    .rc-feature { padding: 5px 10px; }
    .rc-premium { padding: 7px; gap: 9px; }
    .rc-premium-art { max-width: 120px; }
    .rc-brand-foot { margin-top: 7px; padding-top: 7px; }

    .rc-form-body { padding: 8px 22px 10px; }
    .rc-card { gap: 10px; padding: 16px 24px 14px; }
    .rc-form-grid { gap: 10px; }
    .rc-input { height: 40px; }
    .rc-submit { height: 40px; }
}

/* ------------------------------------------- Tall-card fit scale (.rc-fit)

   Opt-in, currently Register only. That card carries four fields plus the
   password hint where Login carries two, so it needs roughly 200px more than the
   tiers above were sized against and outgrows the screen while Login still has
   room to spare. Compressing the shared tiers hard enough to fit it would leave
   Login and MfaVerify as short bands floating in the panel — the exact outcome
   the max-height:900 tier comments above argue against — so the extra reduction
   is scoped to the page that needs it.

   Fluid, not another set of fixed steps. Every value is clamp(floor, vh, ceiling)
   so the card scales CONTINUOUSLY with the viewport instead of holding one size
   across a band and falling off a cliff at its edge — which is how Register ended
   up overflowing in the middle of the 620-900 tier. The vh coefficients are
   chosen so each value lands on its max exactly at 900px tall, making this block
   a seamless continuation of the tier above rather than a visible jump at the
   boundary. The floors are ergonomic limits: a 38px input is still a comfortable
   click target, so the card stops shrinking there rather than degrading forever.

   Specificity is (0,2,0) against the tiers' (0,1,0), so these win wherever they
   overlap regardless of source order.

   Below roughly 480px of viewport the card cannot fit without dropping fields, so
   it stops trying and .rc-form-body's overflow-y:auto takes over. That is the
   safety valve working as intended, not a gap in this scale. */
@media (min-width: 1024px) and (max-height: 900px) {
    .rc-fit .rc-card {
        padding: clamp(16px, 3.6vh, 32px) 36px clamp(14px, 3.1vh, 28px);
        gap: clamp(10px, 2.2vh, 20px);
    }

    .rc-fit .rc-eyebrow { padding-top: clamp(3px, .7vh, 6px); padding-bottom: clamp(3px, .7vh, 6px); font-size: clamp(9.5px, 1.5vh, 11px); }
    .rc-fit .rc-eyebrow svg { height: clamp(11px, 1.6vh, 14px); width: clamp(11px, 1.6vh, 14px); }

    .rc-fit .rc-h1 { font-size: clamp(21px, 3.2vh, 29px); margin-top: clamp(6px, 1.4vh, 12px); }
    .rc-fit .rc-lede { font-size: clamp(11.5px, 1.9vh, 13px); margin-top: clamp(4px, .8vh, 7px); }

    .rc-fit .rc-form-grid { gap: clamp(8px, 2vh, 18px); }
    .rc-fit .rc-field { gap: clamp(4px, .9vh, 8px); }
    .rc-fit .rc-input { height: clamp(38px, 6vh, 54px); }
    .rc-fit .rc-hint { font-size: clamp(10.5px, 1.7vh, 12px); }
    .rc-fit .rc-submit { height: clamp(38px, 4.5vh, 44px); }
    .rc-fit .rc-card-foot { padding-top: clamp(9px, 1.5vh, 13px); }
}

/* Below ~540 the scale above has bottomed out on its floors and the card still
   overran the viewport by about 20px (measured at 500). This step drops the floors
   the last notch and takes out the lede.

   The lede is what goes rather than the password hint: the h1 directly above it
   already says what the page is, so it is the one line on the card carrying no
   instruction, while the hint states a rule the user has to be able to read to
   pick a password that will be accepted.

   Scoped to its own step rather than folded into the floors above so the
   540-900 range keeps the sizes verified there. */
@media (min-width: 1024px) and (max-height: 540px) {
    .rc-fit .rc-lede { display: none; }

    .rc-fit .rc-card { padding: clamp(12px, 3.6vh, 32px) 36px clamp(10px, 3.1vh, 28px); }
    .rc-fit .rc-form-grid { gap: clamp(6px, 2vh, 18px); }
    .rc-fit .rc-input { height: clamp(34px, 6vh, 54px); }
    .rc-fit .rc-submit { height: clamp(34px, 4.5vh, 44px); }
}

@media (max-width: 1023px) {
    .rc-form::after { display: none; }
}

/* -------------------------------------------- Mobile hero (below lg only)

   .rc-brand is display:none below 1024px, so this band is the only place the
   interior photography reaches phones. Default is hidden - it is additive to
   the desktop layout, never both at once. */

.rc-form-hero { display: none; }

@media (max-width: 1023px) {
    .rc-form-hero {
        position: relative;
        display: block;
        z-index: 1;
        flex-shrink: 0;          /* .rc-form is a flex column; don't let it squash */
        height: 178px;
        overflow: hidden;
        background: #17110E;
        border-bottom: 1px solid #EFEAE5;
    }

    .rc-form-hero img {
        width: 100%;
        height: 100%;
        display: block;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: 50% 46%;
        object-position: 50% 46%;
    }

    /* Bottom-weighted: the copy sits low in the band, so the veil only needs to
       be heavy where the text actually lands. */
    .rc-form-hero-veil {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(12, 8, 6, .26) 0%, rgba(12, 8, 6, .38) 45%, rgba(10, 7, 5, .62) 100%);
    }

    .rc-form-hero-copy {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        padding: 0 20px 15px;
    }
    .rc-form-hero-copy .rc-tagline { margin-top: 0; }

    .rc-form-hero-text {
        margin: 0;
        font-size: 19px;
        line-height: 1.25;
        font-weight: 800;
        letter-spacing: -.02em;
        color: #fff;
        text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
    }
    .rc-form-hero-text span { display: block; color: #EFA167; }

    /* The card no longer has to carry the whole screen on its own — the hero band
       above it does. It sits directly under that band rather than centring, so the
       auto margins that centre it on desktop are cancelled here. */
    .rc-form-body { padding-top: 26px; }
    .rc-form-body > * { margin-block: 0; }
}

@media (max-width: 420px) {
    .rc-form-hero { height: 142px; }
    .rc-form-hero-text { font-size: 17px; }
}