/* ═══════════════════════════════════════════════════════════
   187 DARK KNIGHTS — THE GATE
   /enlist and /reset. Bare pages, no shell.

   Same forged language as the rest: square plate, crimson light
   from beneath, brand spines in the gutters. This is the first
   authenticated surface most people see, so it should feel like
   the front door, not a bolted-on form.
   ═══════════════════════════════════════════════════════════ */

body.gate{
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%,rgba(224,32,32,.16) 0%,transparent 70%),
    linear-gradient(180deg,#000 0%,#08090b 55%,#000 100%);
  min-height:100vh;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  overflow-x:hidden}

.gate-wrap{
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:48px 20px}

/* ═══ THE PLATE ═══ */
.gate-plate{
  position:relative;isolation:isolate;overflow:hidden;
  width:100%;max-width:430px;padding:38px 34px 28px;
  border-radius:3px;
  background:
    linear-gradient(150deg,rgba(226,232,240,.06) 0%,transparent 44%),
    radial-gradient(ellipse 80% 60% at 15% 125%,rgba(224,32,32,.2),transparent 70%),
    linear-gradient(172deg,#1a1d21 0%,#101215 55%,#08090b 100%);
  border:1px solid rgba(154,154,159,.12);
  border-left:3px solid var(--fx-blood);
  box-shadow:0 1px 0 rgba(226,232,240,.06) inset,
             0 24px 60px rgba(0,0,0,.8),
             0 0 44px rgba(224,32,32,.1)}
.gate-plate::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--tex-url);background-size:380px;
  opacity:.3;filter:invert(1) grayscale(1) contrast(1.9) brightness(.28);
  mix-blend-mode:overlay}
.gate-plate > *{position:relative;z-index:1}

.gate-mark{display:block;text-align:center;margin-bottom:16px}
.gate-mark img{
  width:82px;height:auto;opacity:.9;
  filter:drop-shadow(0 0 26px rgba(224,32,32,.45))}

.gate-title{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:27px;
  text-transform:uppercase;text-align:center;letter-spacing:.5px;
  margin:0 0 4px;line-height:1.1}
.gate-sub{
  text-align:center;margin:0 0 26px;
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:3px;
  text-transform:uppercase;color:#5c636d}

/* ═══ TABS ═══ */
.auth-tabs{
  display:flex;gap:3px;padding:3px;margin-bottom:20px;border-radius:9px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(154,154,159,.1);
  box-shadow:0 2px 8px rgba(0,0,0,.5) inset}
.auth-tab{
  flex:1;padding:9px;border:none;border-radius:6px;cursor:pointer;
  background:none;color:#5c636d;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;transition:.16s}
.auth-tab:hover{color:#c8cdd4;background:rgba(255,255,255,.03)}
.auth-tab.active{
  color:#fff2f0;
  background:linear-gradient(180deg,#9e2222,#6b1313);
  box-shadow:0 1px 0 rgba(255,210,205,.26) inset,0 2px 6px rgba(0,0,0,.5)}

/* ═══ FIELDS ═══ */
.gate-field{margin-bottom:15px}
.gate-field label{
  display:block;margin-bottom:6px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;color:#5c636d}
.gate-field input{
  width:100%;box-sizing:border-box;
  background:rgba(0,0,0,.42);
  border:1px solid rgba(154,154,159,.13);
  border-radius:7px;padding:12px 14px;outline:none;
  color:#e2e8f0;font-family:'Rajdhani',sans-serif;font-weight:500;font-size:16px;
  transition:border-color .16s, box-shadow .16s, background .16s}
.gate-field input:focus{
  border-color:rgba(255,91,74,.5);
  background:rgba(0,0,0,.6);
  box-shadow:0 0 0 3px rgba(224,32,32,.09)}
.gate-field input::placeholder{color:#3a3f47}
.gate-field small{
  display:block;margin-top:5px;
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.6px;
  color:#3a3f47;line-height:1.5}

.gate-go{
  width:100%;margin-top:6px;
  padding:13px !important;font-size:13px !important;letter-spacing:2px !important}

.gate-note{
  font-family:'Rajdhani',sans-serif;font-size:13.5px;color:#6b7280;
  line-height:1.6;margin:0 0 16px}

/* ═══ MESSAGES ═══ */
.auth-msg{
  display:none;margin-bottom:16px;padding:11px 14px;border-radius:6px;
  font-family:'Rajdhani',sans-serif;font-size:14px;line-height:1.5}
/* Only shows once auth.js gives it a kind — an empty red box on load
   would look like the page had already failed. */
.auth-msg.err{
  display:block;color:#ffb3a8;
  background:rgba(139,26,26,.18);border-left:2px solid var(--fx-glow)}
.auth-msg.ok{
  display:block;color:#a8e6c0;
  background:rgba(31,122,70,.16);border-left:2px solid #3fa86a}

/* ═══ FOOT ═══ */
.gate-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:22px;padding-top:16px;
  border-top:1px solid rgba(154,154,159,.09)}
.gate-foot a{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:1.4px;text-transform:uppercase;
  color:#5c636d;text-decoration:none;transition:color .15s}
.gate-foot a:hover{color:#ff8a70}
.gate-motto{
  font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:2px;
  text-transform:uppercase;color:#2b2f36}

.gate-back{
  margin-top:26px;
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:#3a3f47;text-decoration:none;transition:color .15s}
.gate-back:hover{color:#8e96a1}

/* Spines are decoration here — pull them back further than on the
   front door so the plate stays the only thing with weight. */
body.gate .spine{opacity:.09}
@media(max-width:1300px){body.gate .spine{display:none}}

@media(max-width:520px){
  .gate-plate{padding:30px 22px 22px}
  .gate-title{font-size:23px}
}

/* ═══ SPINES ═══
   The positioning rules live in landing.css, which this page does not
   load. Without them the images render at full size in normal flow —
   enormous, and they shove the plate off-centre. Declared here so the
   gate is self-contained. */
body.gate .spine{
  position:fixed;top:0;bottom:0;z-index:0;
  width:120px;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  opacity:.09}
body.gate .spine img{
  max-height:88vh;width:auto;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%)}
body.gate .spine-l{left:16px}
body.gate .spine-r{right:16px}
body.gate .gate-wrap{position:relative;z-index:1}

@media(max-width:1300px){body.gate .spine{display:none}}

/* ═══ AUTOFILL ═══
   Chrome paints its own near-white background on autofilled fields,
   which blows a hole in a dark form. There is no property to disable
   it, so the standard trick is a very long inset shadow that covers
   the painted background, plus text-fill-color for the value. */
.gate-field input:-webkit-autofill,
.gate-field input:-webkit-autofill:hover,
.gate-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#e2e8f0;
  -webkit-box-shadow:0 0 0 1000px #0d0f12 inset;
  box-shadow:0 0 0 1000px #0d0f12 inset;
  border:1px solid rgba(154,154,159,.13);
  caret-color:#e2e8f0;
  transition:background-color 9999s ease-in-out 0s}
.gate-field input:-webkit-autofill:focus{
  border-color:rgba(255,91,74,.5)}