/* ------------------------------------------------------------
   Login
   ------------------------------------------------------------ */
.login-page { background: #F3F4F6; }
.login {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.login__brand {
  position: relative; overflow: hidden;
  padding: 40px 56px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: white;
  background-color: #0B0D11;
  background-image:
    radial-gradient(135% 110% at 100% 118%, rgba(225,6,0,0.46) 0%, rgba(150,8,6,0.20) 30%, rgba(58,12,14,0.08) 52%, transparent 70%),
    radial-gradient(125% 95% at -8% 120%, rgba(120,14,15,0.38) 0%, rgba(40,11,13,0.12) 44%, transparent 66%),
    radial-gradient(95% 75% at 6% -18%, rgba(7,9,13,0.92) 0%, transparent 56%),
    linear-gradient(150deg, #0A0C10 0%, #120A0D 46%, #1E0B0E 72%, #2B0C0E 100%);
}
/* fine grain to keep the dark gradient from banding */
.login__brand::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.login__brand-rule { position: absolute; left: 0; right: 0; height: 3px; background: var(--brand-red); }
.login__brand-rule--top    { top: 0; }
.login__brand-rule--bottom { bottom: 0; }
.login__brand-mark { display: flex; align-items: center; gap: 13px; position: relative; }
.login__brand-plate {
  background: #fff;
  border-radius: var(--r-md);
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.login__brand-plate img {
  height: 34px; width: auto;
  display: block; object-fit: contain;
}
.login__brand-title { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.login__brand-name {
  font-family: var(--f-head);
  font-size: 21px; font-weight: 800;
  letter-spacing: 0.015em; line-height: 1;
  text-transform: uppercase; color: #fff;
}
.login__brand-sub {
  font-family: var(--f-head);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; line-height: 1;
  text-transform: uppercase; color: var(--brand-red-soft);
}
/* Brand sweep — same looping light pass as the nav-rail lockup. The fully
   annotated source (gradient geometry, seamless -200% loop) lives in
   css/core/components/components.css (.nav-rail__title / .nav-rail__text),
   which also defines the shared bt-brand-sweep keyframes; every auth screen
   loads that sheet. The resting frame (position-x 0) doubles as the
   reduced-motion and no-clip fallback — the plain rules above.
   · name: red band sweeping through the white glyphs, full height. The band
     is narrowed from the rail's 64–86% to 71.5–78.5%: this lockup renders ~2×
     the rail's size (and the span stretches to the wider sub line), so the
     rail geometry would light most of the word — 7% of the tile keeps the
     sweep to about two letters at a time
   · sub:  white band sweeping through the red glyphs, confined to a
     bottom-anchored strip 25% of the line height (layer 1, repeat-x so it
     never tiles upward) over the static red fill (layer 2). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .login__brand-name {
    background-image: linear-gradient(105deg,
      #fff 0%, #fff 71.5%,
      var(--brand-red-soft) 73.5%,
      var(--brand-red) 75%,
      var(--brand-red-soft) 76.5%,
      #fff 78.5%, #fff 100%);
    background-size: 200% 100%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: bt-brand-sweep 4.5s linear infinite;
  }
  .login__brand-sub {
    background-image:
      linear-gradient(105deg,
        rgba(255,255,255,0) 0%, rgba(255,255,255,0) 64%,
        rgba(255,255,255,0.65) 70%,
        #fff 75%,
        rgba(255,255,255,0.65) 80%,
        rgba(255,255,255,0) 86%, rgba(255,255,255,0) 100%),
      linear-gradient(var(--brand-red-soft), var(--brand-red-soft));
    background-size: 200% 25%, 100% 100%;
    background-position: 0% 100%, 0% 0%;
    background-repeat: repeat-x, no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: bt-brand-sweep 4.5s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .login__brand-name,
  .login__brand-sub { animation: none; }
}
.login__brand-body { position: relative; max-width: 460px; }
.login__headline {
  font-family: var(--f-head); font-size: 44px;
  line-height: 1.05; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 18px;
}
.login__headline--accent { color: var(--brand-red-soft); }
.login__lede { color: #9CA3AF; font-size: 15px; line-height: 1.6; max-width: 380px; margin: 0; }
.login__chips { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap; padding: 0; list-style: none; }
.login__chip {
  font-size: 12px; padding: 5px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  font-family: var(--f-head);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #E5E7EB; font-weight: 600;
}
.login__brand-foot {
  position: relative;
  font-size: 12px; color: #6B7585;
  display: flex; justify-content: space-between;
}
.login__card-wrap { display: grid; place-items: center; padding: 40px; }
.login__card {
  width: 100%; max-width: 380px;
  background: white;
  padding: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.login__logo-full {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}
.login__logo-full img {
  width: 152px; height: auto;
  display: block; object-fit: contain;
}
.login__intro { margin-bottom: 26px; text-align: center; }
.login__eyebrow {
  font-family: var(--f-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 6px; display: block;
}
.login__title { font-family: var(--f-head); font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.login__row { display: flex; justify-content: space-between; align-items: center; margin: 0 0 22px; }
.login__row--end { justify-content: flex-end; }
.login__remember { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.login__forgot { font-size: 14px; color: var(--primary); font-weight: 600; text-decoration: none; }
.login__hint { margin-top: 22px; text-align: center; font-size: 13px; color: var(--text-2); }