/* ============================================================================
   OrbitRMM — sign-in scene
   Loaded only by _LayoutAuth, so none of this weight reaches the console itself.

   The auth screens are always dark. A galaxy behind a light-mode form makes no
   sense, so these pages ignore the theme toggle entirely.
   ============================================================================ */
.auth-body {
    --accent: #F26522;
    --accent-hi: #FF8A3D;
    --accent-deep: #D9481B;
    --space: #03040A;
    --text: #F3EDE7;
    --text-mute: #A2958B;
    --text-dim: #7A6D63;

    margin: 0;
    background: var(--space);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    overflow: hidden;
    position: relative;
    min-height: 100vh;
}

/* ---------------------------------------------------------------- deep field */
#sky { position: fixed; inset: 0; z-index: 0; display: block; }

/* Real emission colours — hydrogen-alpha, reflection blue, interstellar dust,
   doubly ionised oxygen. The brand lives on the card, not in the sky. */
.neb { position: fixed; border-radius: 50%; filter: blur(100px); z-index: 1;
       pointer-events: none; will-change: transform; }
.n-ha   { width: 62vmax; height: 52vmax; left: -20vmax; top: -18vmax; opacity: .30;
          background: radial-gradient(circle at 45% 45%, #8E2438 0%, rgba(142,36,56,0) 66%);
          animation: neb-a 78s ease-in-out infinite; }
.n-refl { width: 54vmax; height: 54vmax; right: -16vmax; top: 2vmax; opacity: .26;
          background: radial-gradient(circle at 50% 50%, #2E5A9E 0%, rgba(46,90,158,0) 64%);
          animation: neb-b 96s ease-in-out infinite; }
.n-dust { width: 70vmax; height: 34vmax; left: 4vmax; bottom: -10vmax; opacity: .16;
          background: radial-gradient(ellipse at 50% 50%, #6B5545 0%, rgba(107,85,69,0) 68%);
          animation: neb-c 120s ease-in-out infinite; }
.n-oiii { width: 38vmax; height: 38vmax; right: 6vmax; bottom: 2vmax; opacity: .14;
          background: radial-gradient(circle at 50% 50%, #2E9E8C 0%, rgba(46,158,140,0) 62%);
          animation: neb-b 140s ease-in-out infinite reverse; }

@keyframes neb-a { 0%,100% { transform: translate(0,0) scale(1); }   50% { transform: translate(3vmax,2vmax) scale(1.07); } }
@keyframes neb-b { 0%,100% { transform: translate(0,0) scale(1); }   50% { transform: translate(-3vmax,-2vmax) scale(1.09); } }
@keyframes neb-c { 0%,100% { transform: translate(0,0) scale(1); }   50% { transform: translate(2vmax,-1vmax) scale(1.05); } }

.milkyway {
    position: fixed; z-index: 1; inset: -45% -25%; pointer-events: none;
    transform: rotate(-24deg);
    background:
        linear-gradient(180deg, transparent 41%, rgba(20,14,10,.55) 45.5%, transparent 49%),
        linear-gradient(180deg, transparent 52%, rgba(16,11,8,.42) 55%, transparent 58%),
        linear-gradient(180deg, transparent 34%, rgba(214,206,196,.05) 40%,
                        rgba(232,226,214,.11) 47%, rgba(224,214,200,.09) 53%,
                        rgba(200,192,182,.04) 60%, transparent 66%);
    filter: blur(14px);
    animation: mw 90s ease-in-out infinite;
}
@keyframes mw { 0%,100% { opacity: .85; } 50% { opacity: 1; } }

/* ---------------------------------------------------------------- astronaut */
/* Drift and tumble sit on separate elements. On one element they would share a
   timing function and period, and two unrelated motions would visibly sync. */
.astro-drift {
    position: fixed; z-index: 3; right: 13vw; top: 26vh; width: 30px; height: auto;
    pointer-events: none; opacity: .6;
    animation: astro-path 210s ease-in-out infinite;
}
.astro-tumble { animation: astro-tumble 84s linear infinite; transform-origin: 52% 46%; }
.astro-tumble img {
    width: 100%; display: block;
    filter: drop-shadow(0 0 6px rgba(150,190,255,.12));
}
@keyframes astro-path {
    0%   { transform: translate(0,0); }
    18%  { transform: translate(-3vw,-7vh); }
    37%  { transform: translate(-8vw,3vh); }
    55%  { transform: translate(-2vw,9vh); }
    74%  { transform: translate(4vw,2vh); }
    90%  { transform: translate(1vw,-4vh); }
    100% { transform: translate(0,0); }
}
@keyframes astro-tumble { 0% { rotate: -8deg; } 30% { rotate: 6deg; } 62% { rotate: -3deg; } 100% { rotate: -8deg; } }

/* --------------------------------------------------------------- satellites */
.sat-track { position: fixed; z-index: 2; left: -8vw; top: 16vh; pointer-events: none;
             animation: sat-cross 110s linear infinite; }
.sat-track.two { top: 70vh; animation-duration: 170s; animation-delay: -60s; opacity: .7; }
.sat-body { width: 34px; height: auto; display: block; animation: sat-roll 40s linear infinite; opacity: .85; }
.sat-track.two .sat-body { width: 22px; }
@keyframes sat-cross { from { transform: translate(0,0); } to { transform: translate(120vw,-14vh); } }
@keyframes sat-roll { 0% { rotate: 0deg; } 100% { rotate: 360deg; } }
.beacon { animation: beacon 2.4s ease-in-out infinite; }
@keyframes beacon { 0%,72%,100% { opacity: .15; } 80% { opacity: 1; } }

/* Station keeps position alongside the astronaut rather than transiting past. */
.station { position: fixed; z-index: 2; right: 20vw; top: 36vh; width: 62px;
           pointer-events: none; opacity: .6;
           animation: station-creep 260s ease-in-out infinite; }
.station svg { width: 100%; display: block; animation: station-yaw 120s ease-in-out infinite; }
@keyframes station-creep {
    0%   { transform: translate(0,0); }
    33%  { transform: translate(-3vw,-3vh); }
    66%  { transform: translate(2vw,2vh); }
    100% { transform: translate(0,0); }
}
@keyframes station-yaw { 0%,100% { rotate: -6deg; } 50% { rotate: 8deg; } }

/* ------------------------------------------------------------------- comet */
/* The tail trails the head, so it points back along the path. Both legs of the
   travel are in vw, which fixes the angle on any aspect ratio: atan2(42,-95) is
   156deg, so the tail sits at -24deg. The rotation is on the tail only — putting
   it on the parent rotates the whole element and swings the tail the wrong way. */
.comet { position: fixed; z-index: 2; left: 92vw; top: -8vh; width: 4px; height: 4px;
         border-radius: 50%; background: #EAF2FF;
         box-shadow: 0 0 9px 3px rgba(190,215,255,.65); opacity: 0;
         pointer-events: none; animation: comet-run 46s linear infinite 8s; }
.comet::after {
    content: ""; position: absolute; top: 50%; left: 2px; width: 180px; height: 2px;
    transform: translateY(-50%) rotate(-24deg); transform-origin: left center;
    background: linear-gradient(90deg, rgba(200,220,255,.48), rgba(200,220,255,.08) 45%, transparent);
    filter: blur(1px);
}
@keyframes comet-run {
    0%   { opacity: 0; transform: translate(0,0); }
    3%   { opacity: 1; }
    22%  { opacity: 0; transform: translate(-95vw,42vw); }
    100% { opacity: 0; transform: translate(-95vw,42vw); }
}

/* -------------------------------------------------------------- left field */
.rock { position: fixed; z-index: 2; left: 7vw; top: 58vh; width: 74px; height: auto;
        pointer-events: none; opacity: .72;
        animation: rock-drift 165s ease-in-out infinite; }
.rock svg { width: 100%; display: block; animation: rock-tumble 96s linear infinite;
            transform-origin: 50% 50%; filter: drop-shadow(0 0 14px rgba(0,0,0,.6)); }
@keyframes rock-drift {
    0%   { transform: translate(0,0); }
    24%  { transform: translate(4vw,-5vh); }
    51%  { transform: translate(1vw,4vh); }
    78%  { transform: translate(-3vw,-2vh); }
    100% { transform: translate(0,0); }
}
@keyframes rock-tumble { from { rotate: 0deg; } to { rotate: 360deg; } }
.rock.far { left: 19vw; top: 22vh; width: 26px; opacity: .42;
            animation-duration: 240s; animation-delay: -70s; }
.rock.far svg { animation-duration: 150s; animation-direction: reverse; }

/* ------------------------------------------------------------------- shell */
.auth-shell {
    position: relative; z-index: 5; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px 16px; gap: 16px;
}

/* ---- asteroid card --------------------------------------------------------
   Two CSS quirks drive this shape:
     - box-shadow ignores clip-path and would draw a rectangle behind a faceted
       card, so depth comes from drop-shadow on the wrapper, which follows the
       clipped alpha.
     - border ignores it too, so the rim is a slightly larger sibling behind the
       card clipped to the same polygon; the 1.5px it protrudes is the edge.
   Facets stay shallow (2-4%) because the inputs sit close to the sides.
   -------------------------------------------------------------------------- */
.auth-frame {
    position: relative; width: 100%; max-width: 392px;
    --rock: polygon(
         7% 0.6%, 30% 0%,   58% 1.6%, 84% 0%,   97% 4%,
        100% 12%, 98.4% 30%, 100% 48%, 98% 66%, 100% 84%,
         95% 96%, 80% 99.4%, 55% 98%,  28% 100%, 9% 97%,
        1.6% 88%,  0% 70%,   2% 52%,   0% 33%, 1.6% 15%);
    filter: drop-shadow(0 26px 54px rgba(0,0,0,.72))
            drop-shadow(0 0 34px rgba(242,101,34,.10));
    animation: auth-rise .85s cubic-bezier(.2,.8,.25,1) both;
}
.auth-rim {
    position: absolute; inset: -1.5px; clip-path: var(--rock);
    background: linear-gradient(150deg,
        rgba(242,101,34,.55) 0%, rgba(242,101,34,.18) 34%,
        rgba(255,255,255,.10) 58%, rgba(242,101,34,.34) 100%);
}
.auth-card {
    position: relative; padding: 38px 32px 30px;
    background: linear-gradient(160deg, rgba(30,23,18,.86), rgba(18,14,11,.91));
    clip-path: var(--rock);
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    overflow: hidden;
    border: 0; border-radius: 0;
}
.auth-card::before {
    content: ""; position: absolute; top: 0; left: -60%; width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent);
    animation: auth-sweep 2.8s ease-out 1.1s both;
}
@keyframes auth-sweep { to { left: 130%; } }
@keyframes auth-rise { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- card content */
.auth-brand { display: grid; place-items: center; margin-bottom: 22px; position: relative; }
.auth-brand .halo {
    position: absolute; width: 156px; height: 156px; border-radius: 50%;
    background: radial-gradient(circle, rgba(242,101,34,.26) 0%, transparent 66%);
    animation: halo 5s ease-in-out infinite;
}
.auth-brand img {
    height: 42px; width: auto; display: block; position: relative;
    filter: drop-shadow(0 3px 16px rgba(242,101,34,.45));
}
/* The scene is always dark, so the light logo never applies here. */
.auth-brand .l-light { display: none; }
@keyframes halo { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }

.auth-title { margin: 0 0 5px; font-size: 19px; font-weight: 600; letter-spacing: -.3px; text-align: center; }
.auth-sub { margin: 0 0 22px; font-size: 12.5px; color: var(--text-mute); text-align: center; line-height: 1.55; }

.auth-label { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-mute); margin: 14px 0 6px; }

/* Icon slot on the left of every field. */
.auth-field { position: relative; display: flex; align-items: center; }
.auth-field > svg { position: absolute; left: 12px; color: var(--text-dim); pointer-events: none; transition: color .18s; }
.auth-field:focus-within > svg { color: var(--accent-hi); }

/* Base has no icon gutter: the 2FA code and recovery-code fields have no icon,
   and a blank 38px inset there just looks like a mistake. The gutter is added
   only when the input actually sits inside .auth-field. */
.auth-input {
    width: 100%; height: 44px; padding: 0 12px;
    background: rgba(8,6,4,.6);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 11px;
    color: var(--text); font-family: var(--font); font-size: 13.5px;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.auth-input::placeholder { color: #6B5E55; }
.auth-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(242,101,34,.15), 0 0 22px rgba(242,101,34,.13);
    background: rgba(8,6,4,.78);
}
.auth-field .auth-input { padding-left: 38px; }
.auth-mono { font-family: var(--font-mono); }
.auth-code { letter-spacing: 6px; text-align: center; font-size: 19px; height: 48px; padding-left: 12px; }

.auth-peek {
    position: absolute; right: 6px; height: 30px; padding: 0 10px;
    background: none; border: 0; color: var(--text-dim);
    font-size: 11.5px; font-family: var(--font); cursor: pointer; border-radius: 7px;
}
.auth-peek:hover { color: var(--text); background: rgba(255,255,255,.06); }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 4px; gap: 10px; }
.auth-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-mute); cursor: pointer; margin: 0; }
.auth-check input { accent-color: var(--accent); width: 14px; height: 14px; }

.auth-submit {
    width: 100%; height: 44px; margin-top: 14px;
    border: 0; border-radius: 11px; cursor: pointer;
    font-family: var(--font); font-size: 14px; font-weight: 600; color: #fff;
    background: linear-gradient(135deg, var(--accent-hi), var(--accent) 45%, var(--accent-deep));
    box-shadow: 0 8px 26px rgba(242,101,34,.32);
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
    transition: transform .16s, box-shadow .2s;
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(242,101,34,.44); color: #fff; }
.auth-submit:active { transform: translateY(0); }
.auth-submit::after {
    content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
    transition: left .6s ease;
}
.auth-submit:hover::after { left: 130%; }
.auth-submit.is-disabled { opacity: .4; pointer-events: none; }

.auth-alert {
    background: rgba(229,72,77,.13); border: 1px solid rgba(229,72,77,.5);
    color: var(--text); border-radius: 10px; padding: 10px 12px;
    font-size: 12.5px; margin-bottom: 14px; line-height: 1.45;
}
.auth-err { display: block; color: #FF7A7F; font-size: 11.5px; margin-top: 5px; min-height: 1px; }
.auth-help {
    margin: 18px 0 0; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.07);
    color: var(--text-dim); font-size: 11.5px; line-height: 1.6; text-align: center;
}
.auth-hint { color: var(--text-dim); font-size: 11.5px; margin: 6px 0 0; }
.auth-alt { margin-top: 14px; font-size: 12px; text-align: center; }
.auth-alt a, .auth-linkbtn {
    color: var(--accent-hi); text-decoration: none; background: none; border: 0;
    font-size: 12px; font-family: var(--font); cursor: pointer; padding: 0;
}
.auth-alt a:hover, .auth-linkbtn:hover { text-decoration: underline; }
.auth-sep { color: var(--text-dim); margin: 0 6px; }

.auth-steps { margin: 0 0 4px; padding-left: 18px; color: var(--text-mute); font-size: 12.5px; line-height: 1.6; }
.auth-steps li { margin-bottom: 12px; }
.auth-qr { background: #fff; padding: 10px; border-radius: 10px; width: fit-content; margin: 10px 0 8px; }
.auth-qr img { display: block; }
.auth-manual summary { cursor: pointer; color: var(--accent-hi); font-size: 12px; }
.auth-secret {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px;
    background: rgba(8,6,4,.6); border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px; padding: 9px 11px; margin: 8px 0 0;
    word-break: break-all; user-select: all;
}
.auth-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 14px; }
.auth-code-chip {
    font-family: var(--font-mono); font-size: 12.5px;
    background: rgba(8,6,4,.6); border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px; padding: 8px; text-align: center; user-select: all;
}
.auth-code-actions { display: flex; gap: 8px; }
.auth-code-actions .btn { flex: 1; justify-content: center; }

.auth-foot {
    position: relative; z-index: 5; margin: 0;
    color: #5C5148; font-size: 10.5px; font-family: var(--font-mono);
    letter-spacing: 1.6px; text-transform: uppercase; text-align: center;
    animation: auth-rise .7s ease .6s both;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
    .rock.far { display: none; }
    .station { width: 46px; right: 8vw; }
    .rock { width: 52px; opacity: .5; }
    .astro-drift { width: 26px; right: 8vw; top: 20vh; opacity: .5; }
}
@media (max-width: 480px) {
    .rock, .station, .sat-track.two { display: none; }
    .auth-card { padding: 30px 24px 24px; }
    /* Same percentages bite harder on a narrower card, so the facets ease off. */
    .auth-frame { --rock: polygon(
         6% 0.4%, 32% 0%,  60% 1.2%, 86% 0%,  98% 3%,
        100% 10%, 99% 32%, 100% 52%, 99% 70%, 100% 88%,
         96% 97%, 78% 99.6%, 52% 98.4%, 26% 100%, 8% 97.6%,
          1% 90%,  0% 72%,  1% 54%,   0% 36%,  1% 14%); }
    .auth-brand img { height: 36px; }
    .auth-brand .halo { width: 126px; height: 126px; }
    .auth-codes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .neb, .milkyway, .astro-drift, .astro-tumble, .sat-track, .sat-body, .beacon,
    .station, .station svg, .comet, .rock, .rock svg,
    .auth-frame, .auth-card::before, .auth-brand .halo, .auth-foot {
        animation: none !important;
    }
    .comet { display: none; }
}

/* ---- error pages inside the auth card -------------------------------------
   NotFound and Status render the same markup in both layouts. Inside the
   console shell the .orb-card wrapper draws the panel; inside _LayoutAuth the
   asteroid card already has, so flatten the inner one rather than branching in
   Razor. A conditional wrapper there would need unbalanced tags, which the
   Razor parser rejects even inside <text>.
   -------------------------------------------------------------------------- */
.auth-card .orb-card {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.auth-card .orb-404 { padding: 8px 0 4px; }
.auth-card .orb-404 h2 { font-size: 18px; }
.auth-card .orb-404 p { font-size: 12.5px; max-width: none; }
.auth-card .orb-orbit { width: 118px; height: 118px; margin-bottom: 18px; }
.auth-card .orb-404 .actions .btn { flex: 1; justify-content: center; }