/* ==========================================================================
   CyberVPN, Auth page
   ========================================================================== */

.auth-shell{
  min-height: 100vh;
  min-height: 100dvh; /* real visible viewport height, matches the .ambient fix in style.css */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* `minmax(0, 1fr)` (rather than a bare `1fr`) stops long, unbreakable
     content, the email placeholder, the metrics row, from forcing a
     grid track wider than its share and pushing the two panels apart or
     into overlap on narrower desktop widths. This was the root of the
     "elements overlap / overflow" report on the auth screen. */
}

/* ---- Left: identity panel ---- */
.auth-side{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px clamp(28px, 4vw, 56px);
  /* No border-right here on purpose: a full-height 1px line felt like a
     stray seam running down the center of the screen. The .auth-card's
     own .glass border + drop shadow already reads as a clean edge
     between the two halves without needing a second, harder line. */
  min-width: 0; /* grid children default to min-width:auto, which is what
                   let long content push this panel wider than its track
                   and overlap the form panel, this is the real fix */
}
.auth-side .brand{ position: relative; z-index: 2; }

.auth-side-copy{
  position: relative;
  z-index: 2;
  max-width: 420px;
}
.auth-side-copy::before{
  /* Text-protection scrim: a soft, blurred dark patch sitting only
     behind this copy block (not the whole panel). The panel-wide
     darkening in .noise-vignette handles the general case, but a
     moving shader line can still pass directly behind this specific
     headline at its brightest moment, this guarantees it never wins
     against the text on top of it, independent of the animation. */
  content: '';
  position: absolute;
  inset: -20px -24px;
  z-index: -1;
  background: rgba(5, 3, 10, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-l);
}
.auth-side-copy .eyebrow{ margin-bottom: 18px; }
.auth-side-copy h1{
  font-size: clamp(30px, 3.4vw, 44px);
  margin-bottom: 18px;
}
.auth-side-copy p{ font-size: 16px; }

.auth-metrics{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 36px;
}
.auth-metric{ display: flex; flex-direction: column; gap: 4px; }
.auth-metric b{
  font-family: var(--f-mono);
  font-size: 22px;
  color: var(--ink-0);
}
.auth-metric span{ font-size: 12px; color: var(--ink-2); font-family: var(--f-mono); }

/* Static backdrop, a single quiet radial wash, confined to this panel.
   No motion, no lines, no pattern. */
.side-wash{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 15% 10%, rgba(109,40,217,0.14), transparent 65%);
}

/* ---- Right: form panel ---- */
.auth-main{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 40px) 24px;
  position: relative;
  min-width: 0;      /* see .auth-side note above, same overlap cause */
  min-height: 100%;
  overflow-y: auto;  /* if the card is ever taller than a short/landscape
                        viewport, scroll instead of clipping fields under
                        the fold, this is what read as "half-invisible" */
}

.auth-card{
  width: 100%;
  max-width: 400px;
  padding: clamp(24px, 6vw, 36px);
  border-radius: var(--radius-m);
  margin: auto 0; /* keeps it vertically centered while still scrollable */
}

.auth-card-tab{
  position: absolute;
  top: -1px;
  left: 32px;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 6px 14px 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-1);
  transform: translateY(-100%);
}

.auth-tabs{
  position: relative; /* establishes the containing block for
    .auth-tab-highlight below. Without this, the highlight (position:
    absolute) skips past this element and positions against .auth-card
    instead (the next ancestor with `position` set, via `.glass`),
    which is exactly what stretched it into a full-height violet block
    covering half the form. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: var(--radius-s);
  background: var(--void-2);
  border: 1px solid var(--line);
  margin-bottom: 28px;
}
.auth-tab{
  border: none;
  background: transparent;
  color: var(--ink-2);
  height: 40px;
  border-radius: 7px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  transition: color .2s;
  position: relative;
}
.auth-tab.active{ color: var(--void); }
.auth-tab-highlight{
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 8px);
  border-radius: 7px;
  background: var(--violet);
  transition: transform .35s var(--ease-spring);
  z-index: 0;
}
.auth-tab span{ position: relative; z-index: 1; }
.auth-tabs[data-active="register"] .auth-tab-highlight{ transform: translateX(calc(100% + 8px)); }

.auth-heading{ margin-bottom: 24px; }
.auth-heading h2{ font-size: 24px; margin-bottom: 6px; }
.auth-heading p{ font-size: 14px; color: var(--ink-2); }

.field{ margin-bottom: 18px; position: relative; }
.field label{
  display: block;
  font-size: 12px;
  font-family: var(--f-mono);
  color: var(--ink-2);
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}
.field-control{ position: relative; }
.field input{
  width: 100%;
  height: 48px;
  background: var(--void-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--ink-0);
  padding: 0 44px 0 16px;
  font-family: var(--f-body);
  font-size: 14px;
  transition: border-color .25s, box-shadow .25s;
}
.field input::placeholder{ color: var(--ink-3); }
.field input:focus{
  outline: none;
  border-color: var(--violet-2);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.16);
}
.field-icon{
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  width: 18px; height: 18px;
}
.field-toggle{
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--ink-2);
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.field-toggle:hover{ color: var(--ink-0); background: rgba(255,255,255,0.05); }

.field-hint{
  margin-top: 8px;
  font-size: 12px;
  font-family: var(--f-mono);
  color: var(--ink-3);
  min-height: 16px;
  transition: color .2s;
}
.field-hint.ok{ color: var(--ok); }
.field-hint.warn{ color: var(--warn); }

.strength-bar{
  display: flex; gap: 4px;
  margin-top: 10px;
}
.strength-bar i{
  height: 3px; flex: 1;
  border-radius: 2px;
  background: var(--line-strong);
  transition: background .3s;
}

.form-row-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  font-size: 13px;
}
.checkline{ display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.checkline input{ accent-color: var(--violet); }
.link-accent{ color: var(--violet-2); transition: color .2s; }
.link-accent:hover{ color: var(--ink-0); }

.auth-switch{
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: var(--ink-2);
}

@media (max-width: 980px){
  .auth-shell{ grid-template-columns: 1fr; }
  .auth-side{ display: none; }
}

@media (max-width: 420px){
  /* The decorative "ACCESS REQUEST" tab is pinned above the card via
     translateY(-100%); on very narrow phones the reduced top padding
     left it partly clipped by the viewport edge and visually colliding
     with the browser chrome. Simplest robust fix: fold it back into
     in-flow content instead of floating it off the top of the card. */
  .auth-card-tab{
    position: static;
    display: inline-block;
    transform: none;
    margin-bottom: 14px;
  }
  .form-row-between{ flex-wrap: wrap; gap: 10px; }
}