/**
 * ============================================================================
 * RELIANT OPS PORTAL — SIGN-IN PAGE
 * ----------------------------------------------------------------------------
 * A brand-blue gradient canvas and the traced R mark behind a white
 * sign-in card. Loaded only by login.php, after
 * reliant-theme.css (tokens) and motion.css (easing + rs-* keyframes).
 * style.css is deliberately not loaded here, so this file carries its own reset.
 * ============================================================================
 */

/* ---------------------------------------------------------------------------
 * 1 · PAGE
 * ------------------------------------------------------------------------- */
.login-body {
    --lg-text-2: rgba(255, 255, 255, .8);
    --lg-text-3: rgba(255, 255, 255, .64);
    --lg-rule:   rgba(255, 255, 255, .14);
    --lg-tint:   #AFC0FF;
    --lg-green:  #4ADE9B;
    --lg-amber:  #FFC15A;

    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: #061670 !important;
    color: #fff !important;
    overflow-x: hidden;
}
.login-body *, .login-body *::before, .login-body *::after { box-sizing: border-box; }
/* Zero-specificity reset so every component rule below wins without !important */
:where(.login-body) :where(h1, h2, p, ul, dl, dd) { margin: 0; padding: 0; }

/* ---------------------------------------------------------------------------
 * 2 · CANVAS — brand gradient
 * ------------------------------------------------------------------------- */
.login-canvas {
    position: fixed; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
    background:
        radial-gradient(900px 640px at 74% 6%, rgba(72, 110, 255, .5), transparent 64%),
        radial-gradient(820px 600px at 6% 104%, rgba(2, 8, 52, .7), transparent 70%),
        linear-gradient(155deg, #0B2DBE 0%, #0A259E 44%, #07197A 80%, #051262 100%);
}

/* ---------------------------------------------------------------------------
 * 3 · LAYOUT — hero column + card column on one grid
 * ------------------------------------------------------------------------- */
.login-shell {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
    column-gap: clamp(40px, 6vw, 112px);
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 1680px;
    margin: 0 auto;
    padding: clamp(28px, 4.5vh, 52px) clamp(28px, 5vw, 88px);
}
.login-hero {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
}
.login-hero-body {
    position: relative; z-index: 1;
    align-self: center;
    max-width: 640px;
    padding: 40px 0;
}
.login-panel {
    display: flex; flex-direction: column; justify-content: center;
    gap: 18px;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
 * 4 · HERO
 * ------------------------------------------------------------------------- */
.login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.login-brand-mark { display: block; height: 30px; width: auto; fill: #fff; }
.login-brand-name { font-size: 15px; font-weight: 650; letter-spacing: -0.012em; }
.login-brand-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .3); }
.login-brand-product { font-size: 13.5px; font-weight: 500; color: var(--lg-text-2); }

/* The R mark, traced as a survey outline behind the headline */
.login-mark {
    position: absolute; z-index: 0; right: -4%; bottom: 12%;
    height: min(70%, 600px); width: auto;
    overflow: visible; pointer-events: none;
    transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -18px), 0);
    transition: transform 700ms var(--ease-out);
}
.login-mark-fill { fill: rgba(255, 255, 255, .045); opacity: 0; animation: rs-fade 1.4s var(--ease-out) 1.6s forwards; }
.login-mark-line {
    fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 1.2; stroke-linejoin: miter;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: login-draw 2.4s var(--ease-in-out) .35s forwards;
}
/* The outline has pathLength="1", so a dash of 1 draws it in */
@keyframes login-draw { to { stroke-dashoffset: 0; } }

.login-status {
    display: inline-flex; align-items: center; gap: 10px;
    height: 34px; padding: 0 15px 0 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--lg-rule);
    font-size: 13px; color: var(--lg-text-2);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.login-status b { font-weight: 650; color: #fff; }
.login-status-sep { color: var(--lg-text-3); }
.login-status-dot {
    width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .1);
}
.login-status[data-state="open"] .login-status-dot {
    background: var(--lg-green); box-shadow: 0 0 0 4px rgba(74, 222, 155, .2);
    animation: rs-breathe 2.4s var(--ease-in-out) infinite;
}
.login-status[data-state="soon"] .login-status-dot { background: var(--lg-amber); box-shadow: 0 0 0 4px rgba(255, 193, 90, .2); }

.login-title {
    margin: 22px 0 18px;
    font-size: clamp(2.5rem, 1rem + 3.4vw, 4.4rem);
    font-weight: 700; line-height: 1.02; letter-spacing: -0.045em;
    color: #fff;
}
.login-title span { display: block; color: var(--lg-tint); font-weight: 600; }
.login-lede { max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--lg-text-2); }

.login-modules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; list-style: none; max-width: 580px; }
.login-modules li {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 14px 0 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .11);
    font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .88);
}
.login-modules i { font-size: 17px; color: var(--lg-tint); }

/* Instrument strip — every readout shares one label size and one value size so they line up */
.login-readouts {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; row-gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--lg-rule);
}
.login-readout { padding: 0 28px; border-left: 1px solid var(--lg-rule); }
.login-readout:first-child { padding-left: 0; border-left: 0; }
.login-readout dt {
    margin-bottom: 7px;
    font-size: 10.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
    color: var(--lg-text-3);
}
.login-readout dd {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 17px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
    color: #fff; font-variant-numeric: tabular-nums;
}
.login-readout small { font-size: 11px; font-weight: 650; letter-spacing: .06em; color: var(--lg-text-3); }
.login-policy {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px;
    font-size: 12.5px; color: var(--lg-text-2);
}
.login-policy i { font-size: 16px; color: var(--lg-amber); }

/* ---------------------------------------------------------------------------
 * 5 · ENTRANCE — the hero cascades in, the card rises last
 * ------------------------------------------------------------------------- */
@keyframes login-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.login-brand, .login-status, .login-title, .login-lede, .login-modules, .login-readouts, .login-policy {
    animation: login-rise 560ms var(--ease-out) both;
}
.login-status   { animation-delay: 80ms; }
.login-title    { animation-delay: 140ms; }
.login-lede     { animation-delay: 200ms; }
.login-modules  { animation-delay: 260ms; }
.login-readouts { animation-delay: 320ms; }
.login-policy   { animation-delay: 360ms; }

/* ---------------------------------------------------------------------------
 * 6 · SIGN-IN CARD
 * ------------------------------------------------------------------------- */
.login-card {
    position: relative;
    padding: 36px 40px 30px;
    border-radius: 22px;
    background: #fff;
    color: var(--ink);
    box-shadow:
        0 40px 80px -28px rgba(2, 8, 48, .6),
        0 14px 32px -14px rgba(2, 8, 48, .38);
    animation: login-card-in 620ms var(--ease-out) 120ms both;
}
/* Brand rule on the top edge: portal blue ending in the logo's red */
.login-card::before {
    content: "";
    position: absolute; top: 0; left: 40px; right: 40px;
    height: 3px; border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--brand) 0 80%, var(--logo-red) 80% 100%);
}
@keyframes login-card-in {
    from { opacity: 0; transform: translateY(22px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.login-card-logo { display: block; width: auto; height: 46px; margin-bottom: 26px; }
.login-card-head { margin-bottom: 24px; }
.login-card-head h2 {
    margin-bottom: 6px;
    font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em;
    color: var(--ink);
}
.login-card-head p { font-size: 14px; color: var(--ink-3); }

.login-alert {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 20px; padding: 11px 14px;
    border-radius: 12px;
    background: var(--danger-soft); border: 1px solid #F6C4CD;
    color: var(--danger-ink); font-size: 13.5px; line-height: 1.45;
    animation: rs-shake 480ms var(--ease-in-out) 700ms both;
}
.login-alert i { flex-shrink: 0; margin-top: 1px; font-size: 18px; }

/* ---------------------------------------------------------------------------
 * 7 · FORM
 * ------------------------------------------------------------------------- */
.login-form { display: flex; flex-direction: column; gap: 18px; }
.login-field label {
    display: block; margin-bottom: 7px;
    font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.login-control { position: relative; }
.login-control > i {
    position: absolute; top: 50%; left: 15px;
    transform: translateY(-50%);
    font-size: 18px; color: var(--ink-4);
    pointer-events: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.login-control:focus-within > i { color: var(--brand); }
/* Same specificity as the theme's global input rule, and loaded after it */
.login-control input {
    display: block; width: 100%; height: 50px;
    padding: 0 16px 0 44px !important;
    border: 1px solid #DCE1EC !important;
    border-radius: 12px !important;
    background: #FAFBFE !important;
    font-size: 15px !important; color: var(--ink) !important;
}
.login-control.has-reveal input { padding-right: 54px !important; }
.login-control input::placeholder { color: var(--ink-4); }
.login-control input:hover { border-color: #C6CDDD !important; }
.login-control input:focus {
    background: #fff !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 4px var(--brand-ring) !important;
}
.login-control input[aria-invalid="true"] { border-color: #EFA3B0 !important; }
/* Keep browser autofill on-palette instead of the default yellow/blue wash */
.login-control input:-webkit-autofill {
    -webkit-text-fill-color: var(--ink);
    box-shadow: inset 0 0 0 40px #FAFBFE !important;
}
.login-control input:-webkit-autofill:focus { box-shadow: inset 0 0 0 40px #fff, 0 0 0 4px var(--brand-ring) !important; }

.login-reveal {
    position: absolute; top: 50%; right: 6px;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 0; border-radius: 9px;
    background: transparent; color: var(--ink-3);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.login-reveal:hover { background: var(--line-2); color: var(--ink); }
.login-reveal:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 9px; }
.login-reveal i { font-size: 19px; }

.login-caps {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px;
    font-size: 12.5px; font-weight: 550; color: var(--warning-ink);
}
.login-caps[hidden] { display: none; }
.login-caps i { font-size: 15px; }

.login-submit {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 52px; margin-top: 6px;
    border: 0; border-radius: 13px;
    background: var(--brand); color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 650; letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 12px 24px -12px rgba(11, 45, 190, .75);
}
/* A light sweep crosses the button on hover */
.login-submit::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
    transform: translateX(-110%);
    transition: transform 750ms var(--ease-out);
    pointer-events: none;
}
.login-submit:hover {
    background: var(--brand-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 16px 30px -12px rgba(11, 45, 190, .8);
}
.login-submit:hover::after { transform: translateX(110%); }
.login-submit:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 3px; border-radius: 13px; }
.login-submit-icon { font-size: 18px; transition: transform var(--dur) var(--ease-spring); }
.login-submit:hover .login-submit-icon { transform: translateX(3px); }
.login-submit.is-busy { pointer-events: none; background: var(--brand-hover); }
.login-submit.is-busy::after { display: none; }
.login-submit.is-busy .login-submit-icon { animation: rs-spin .9s linear infinite; }

.login-help {
    display: flex; align-items: center; gap: 8px;
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid var(--line-2);
    font-size: 13px; color: var(--ink-3);
}
.login-help i { font-size: 17px; color: var(--ink-4); }
.login-legal {
    font-size: 12px; text-align: center; color: var(--lg-text-3);
    animation: login-rise 560ms var(--ease-out) 420ms both;
}

/* ---------------------------------------------------------------------------
 * 8 · RESPONSIVE — narrow windows drop the hero, short ones tighten it
 * ------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .login-shell { column-gap: 48px; }
    .login-modules { display: none; }
    .login-readout:nth-child(3) { display: none; }
}
@media (max-width: 960px) {
    .login-shell { grid-template-columns: minmax(0, 460px); justify-content: center; align-content: center; }
    .login-hero { display: none; }
}
@media (max-height: 780px) and (min-width: 961px) {
    .login-modules { display: none; }
    .login-hero-body { padding: 24px 0; }
    .login-title { margin: 16px 0 14px; font-size: clamp(2.2rem, .8rem + 2.8vw, 3.5rem); }
    .login-card { padding: 28px 36px 24px; }
    .login-card-logo { height: 40px; margin-bottom: 20px; }
    .login-card-head { margin-bottom: 18px; }
    .login-form { gap: 14px; }
    .login-help { margin-top: 16px; padding-top: 14px; }
}
@media (max-height: 660px) and (min-width: 961px) {
    .login-lede, .login-policy { display: none; }
}