/* ═══════════════════════════════════════════════════════════════════════════
   AUTH — the hub's skin
   ───────────────────────────────────────────────────────────────────────────
   The three products now open behind one front door, and a door that hands you
   to three differently-dressed rooms is not one door. So the sign-in screens
   are dressed like the hub: the same near-black ground, the same indigo and
   violet, the same card, the same raised control.

   This RE-SKINS. It deletes nothing. The hero copy, the aurora and arcs, the
   sparkles, the 3D logo, the wordmark, the three feature cards, the SSO button,
   the theme toggle, the footer — all still here, all still doing what they did.
   Only the surfaces and the palette move, which is why it is a separate file
   loaded last rather than edits scattered through login.css: take this one
   <link> out and the old look returns intact.

   Loaded AFTER login.css, and everything is scoped under .auth, so no other
   page in this app is touched.
   ═══════════════════════════════════════════════════════════════════════════ */

.auth {
  /* the hub's own values */
  --hub-bg:     #0b1020;
  --hub-card:   #141a2e;
  --hub-line:   rgba(255, 255, 255, .09);
  --hub-t1:     #eef1f8;
  --hub-t2:     #a6b0c8;
  --hub-t3:     #6f7b96;
  --hub-brand:  #6366f1;
  --hub-brand2: #8b5cf6;

  /* the page's own brand vars, repointed — every component under .auth that
     reads them follows without being touched individually */
  --brand:        #6366f1;
  --brand-hover:  #7c7ff5;
  --brand-soft:   #8b5cf6;
  --brand-tint:   rgba(99, 102, 241, .14);
  --brand-tint-2: rgba(139, 92, 246, .18);
  --accent:       #8b5cf6;
  --ring: 0 0 0 3px rgba(99, 102, 241, .28);

  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(99,102,241,.20), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(139,92,246,.16), transparent 60%),
    var(--hub-bg);
  color: var(--hub-t1);
}

/* ── left: the hero, same furniture, night lighting ─────────────────────── */
.auth .auth-brand { background: transparent; }
.auth .auth-brand-copy .eyebrow { color: #a5b4fc; }
.auth .auth-brand-copy h1 { color: var(--hub-t1); }
.auth .auth-brand-copy h1 .grad {
  background: linear-gradient(120deg, #a5b4fc, #c4b5fd);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth .auth-brand-copy p { color: var(--hub-t2); }
.auth .hero-wordmark .hw-tag { color: var(--hub-t3); }
.auth .auth-brand-foot .tagline { color: var(--hub-t2); }
.auth .auth-brand-foot .copy    { color: var(--hub-t3); }

/* The glass feature cards were glass over white. Glass over near-black is a
   different material — it needs its own light, not a lower opacity.
   The pane is on ::before, not on the element: setting a background on
   .auth-feature does nothing at all, which is how the headings ended up white
   on white the first time. */
.auth .auth-feature::before {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--hub-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 14px 32px rgba(0, 0, 0, .42);
}
.auth .auth-feature:hover::before {
  background: rgba(255, 255, 255, .085);
  border-color: rgba(255, 255, 255, .16);
}
.auth .auth-feature .fi { background: linear-gradient(140deg, rgba(99,102,241,.24), rgba(139,92,246,.16)); border-color: rgba(255,255,255,.10); }
.auth .auth-feature .fi i { color: #c7d2fe; }
.auth .auth-feature .ft-h { color: var(--hub-t1); }
.auth .auth-feature .ft-s,
.auth .auth-feature .ft-d > span { color: var(--hub-t3); }
.auth .auth-feature .ft-arrow { color: var(--hub-t3); }

/* ── right: the card, exactly the hub's card ────────────────────────────── */
.auth .auth-form {
  background: var(--hub-card);
  border: 1px solid var(--hub-line);
  border-radius: 15px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .42);
}
.auth .auth-head h2 { color: var(--hub-t1); }
.auth .auth-head p  { color: var(--hub-t2); }
.auth .brandmark .wordmark        { color: var(--hub-t1); }
.auth .brandmark .wordmark .thin  { color: var(--hub-t3); }
.auth .theme-toggle {
  background: rgba(255,255,255,.05); border: 1px solid var(--hub-line); color: var(--hub-t2);
}
.auth .theme-toggle:hover { background: rgba(255,255,255,.09); color: var(--hub-t1); }

.auth label, .auth .form-label { color: var(--hub-t2); }
.auth .input {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--hub-line);
  color: var(--hub-t1);
}
.auth .input::placeholder { color: var(--hub-t3); }
.auth .input:focus { border-color: var(--hub-brand); box-shadow: var(--ring); background: rgba(255,255,255,.06); }
.auth .btn-ico, .auth .input-affix { color: var(--hub-t3); }

/* Raised, the way every control in this house is: an edge above, a shadow
   below, and it presses IN when touched. */
.auth .btn-primary {
  background: linear-gradient(135deg, var(--hub-brand), var(--hub-brand2));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px rgba(76, 29, 149, .38);
  color: #fff;
}
/* the lucide icons inside the buttons draw with currentColor — on a dark card
   they inherited a dark one and all but vanished */
.auth .btn-primary, .auth .btn-primary i, .auth .btn-primary svg { color: #fff; }
.auth .btn-primary svg { stroke: currentColor; }
.auth .btn-secondary i, .auth .btn-secondary svg { color: var(--hub-t1); stroke: currentColor; }
.auth .btn-primary:hover { filter: brightness(1.07); }
.auth .btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 3px 10px rgba(76,29,149,.34); }
.auth .btn-secondary {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--hub-line);
  color: var(--hub-t1);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 4px 14px rgba(0,0,0,.30);
}
.auth .btn-secondary:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.auth .btn-secondary:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 7px rgba(0,0,0,.28); }

.auth .auth-divider span { color: var(--hub-t3); background: var(--hub-card); }
.auth .auth-divider::before, .auth .auth-divider::after { background: var(--hub-line); }
.auth .auth-forgot, .auth .auth-foot a, .auth .auth-getapp a { color: #a5b4fc; }
.auth .auth-forgot:hover, .auth .auth-foot a:hover, .auth .auth-getapp a:hover { color: #c7d2fe; }
.auth .auth-foot, .auth .auth-getapp { color: var(--hub-t3); }
.auth .auth-foot { border-top-color: var(--hub-line); }

/* the error state has to stay loud against a dark card */
.auth .alert-error {
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .34);
  color: #fecaca;
}

/* ══ THE WAY BACK ══════════════════════════════════════════════════════════
   Three doors are only a choice if you can change your mind. A standalone app
   has no browser back button, and the phone's own back key leaves the app
   rather than stepping back through it, so the way back has to be on the page.

   Same corner as in RMS and the Self Service Portal — a control for moving
   between apps that itself moves around is worse than no control. Fixed to the
   top-left, clear of the notch, and outside the card because a fixed child of a
   transformed element is positioned against that element, not the window. */
.auth .hub-back {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: calc(14px + env(safe-area-inset-left));
  z-index: 60;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  background: rgba(20, 26, 46, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 6px 18px rgba(0,0,0,.38);
  color: var(--hub-t2);
  font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1.35;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.auth .hub-back svg { width: 13px; height: 13px; flex: none; stroke: currentColor; }
.auth .hub-back:hover { background: rgba(30, 38, 66, .88); border-color: rgba(255,255,255,.18); color: var(--hub-t1); }
.auth .hub-back:active { transform: translateY(1px); }

/* ══ REMEMBER ME ═══════════════════════════════════════════════════════════
   It remembers the address you sign in with. The secret is left to the
   device's own password manager, which is what actually offers to save it —
   this is the switch for the half the page is entitled to keep. */
.auth .remember-me {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 4px;
  font-size: 13px; font-weight: 500;
  color: var(--hub-t2);
  cursor: pointer; user-select: none;
}
.auth .remember-me input {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; flex: none; margin: 0;
  border-radius: 5px;
  border: 1px solid var(--hub-line);
  background: rgba(255,255,255,.04);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.auth .remember-me input:checked {
  background: linear-gradient(135deg, var(--hub-brand), var(--hub-brand2)) no-repeat center;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 3px 9px rgba(76,29,149,.36);
}
/* the tick, drawn rather than fetched */
.auth .remember-me input:checked::after {
  content: ''; display: block;
  width: 4px; height: 8px; margin: 2px 0 0 5px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.auth .remember-me input:focus-visible { outline: none; box-shadow: var(--ring); }
.auth .remember-me:hover { color: var(--hub-t1); }