/* =====================================================================
   RasoiRaj Design System — AUTH SCREEN LAYOUT
   ---------------------------------------------------------------------
   Layout for the sign-in screen only. Every value here is a design-system
   token — no raw colour, radius or shadow is introduced.
   ===================================================================== */

.rr-auth {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  background: var(--rr-bg);
}

/* ================================================================ ART ===
   The left half: ink base, one brand bloom, and the illustration as hero.

   This panel is DARK on purpose — it is the marketing half of the sign-in
   screen, not app chrome. It used to borrow the --rr-sidebar-* tokens for its
   ink ground, which silently broke the moment the sidebar became a light rail
   (white panel, white headline, teal-300 kicker: the whole left half went
   blank). It now names the ink ramp directly, so it is independent of whatever
   the navigation palette does next.
   ==================================================================== */
.rr-auth__art {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  gap: var(--rr-space-6);
  padding: var(--rr-space-10) var(--rr-space-10) var(--rr-space-8);
  background: var(--rr-ink-950);
  color: var(--rr-ink-400);
}
.rr-auth__art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 8% 0%, rgba(20, 184, 166, 0.30), transparent 68%),
    radial-gradient(50% 50% at 100% 100%, rgba(37, 99, 235, 0.20), transparent 70%);
}
.rr-auth__art > * { position: relative; }

.rr-auth__brand { display: flex; align-items: center; gap: var(--rr-space-3); flex: none; }
.rr-auth__logo {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px;
  border-radius: var(--rr-radius-lg);
  background: var(--rr-primary-600); color: var(--rr-white);
  box-shadow: 0 10px 28px -10px rgba(13, 148, 136, 0.75);
}
.rr-auth__wordmark {
  font-family: var(--rr-font-display);
  font-size: var(--rr-text-lg); font-weight: var(--rr-weight-extra);
  letter-spacing: var(--rr-tracking-tight); color: var(--rr-white); line-height: 1.15;
}
.rr-auth__wordmark small {
  display: block; font-family: var(--rr-font-sans);
  font-size: var(--rr-text-2xs); font-weight: var(--rr-weight-medium);
  letter-spacing: var(--rr-tracking-caps); text-transform: uppercase;
  color: var(--rr-ink-500); margin-top: 3px;
}

/* the illustration sits in the middle and takes the slack */
.rr-auth__scene {
  flex: 1; min-height: 0;
  display: grid; place-items: center;
  padding: var(--rr-space-2) 0;
}
.rr-auth__scene svg { width: 100%; max-width: 460px; height: auto; }

.rr-auth__copy { flex: none; max-width: 48ch; }
.rr-auth__kicker {
  display: inline-flex; align-items: center; gap: var(--rr-space-2);
  padding: var(--rr-space-1-5) var(--rr-space-3);
  border: 1px solid var(--rr-ink-800);
  border-radius: var(--rr-radius-pill);
  background: var(--rr-ink-900);
  font-size: var(--rr-text-2xs); font-weight: var(--rr-weight-semibold);
  letter-spacing: var(--rr-tracking-caps); text-transform: uppercase;
  color: var(--rr-primary-300);
}
.rr-auth__headline {
  font-family: var(--rr-font-display);
  font-size: clamp(1.75rem, 2.9vw, 2.375rem);
  font-weight: var(--rr-weight-extra);
  line-height: 1.1; letter-spacing: -0.03em;
  color: var(--rr-white);
  margin-top: var(--rr-space-4);
}
.rr-auth__headline em { font-style: normal; color: var(--rr-primary-400); }
.rr-auth__lede {
  margin-top: var(--rr-space-3);
  font-size: var(--rr-text-base); line-height: var(--rr-leading-relaxed);
  color: var(--rr-ink-400);
}

/* three capability chips, replacing the old emoji "role cards" */
.rr-auth__pills {
  display: flex; flex-wrap: wrap; gap: var(--rr-space-2);
  margin-top: var(--rr-space-5);
}
.rr-auth__pill {
  display: inline-flex; align-items: center; gap: var(--rr-space-2);
  padding: var(--rr-space-2) var(--rr-space-3);
  background: var(--rr-ink-900);
  border: 1px solid var(--rr-ink-800);
  border-radius: var(--rr-radius-pill);
  font-size: var(--rr-text-xs); font-weight: var(--rr-weight-semibold);
  color: var(--rr-white);
}
.rr-auth__pill .rr-i { color: var(--rr-primary-300); }

/* =============================================================== FORM === */
.rr-auth__side { display: grid; place-items: center; padding: var(--rr-space-8) var(--rr-space-6); }
.rr-auth__card {
  width: 100%; max-width: 416px;
  background: var(--rr-surface);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-2xl);
  box-shadow: var(--rr-shadow-lg);
  padding: var(--rr-space-8);
}
.rr-auth__title {
  font-family: var(--rr-font-display);
  font-size: var(--rr-text-2xl); font-weight: var(--rr-weight-bold);
  letter-spacing: var(--rr-tracking-tight); color: var(--rr-text);
}
.rr-auth__sub {
  font-size: var(--rr-text-sm); color: var(--rr-text-muted);
  line-height: var(--rr-leading-relaxed); margin-top: var(--rr-space-1-5);
}
.rr-auth__form { display: flex; flex-direction: column; gap: var(--rr-space-5); margin-top: var(--rr-space-7); }
.rr-auth__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rr-space-3); flex-wrap: wrap;
  margin-top: calc(var(--rr-space-1) * -1);
}
.rr-auth__foot {
  margin-top: var(--rr-space-7); padding-top: var(--rr-space-4);
  border-top: 1px solid var(--rr-border);
  display: flex; align-items: center; gap: var(--rr-space-2);
  font-size: var(--rr-text-xs); color: var(--rr-text-muted);
}
.rr-auth__foot .rr-i { color: var(--rr-success-600); }

/* A login is a two-field form on an otherwise empty screen: the controls
   should feel substantial rather than squeezed. */
.rr-auth__form .rr-input { height: 46px; font-size: var(--rr-text-md); }
.rr-auth__form .rr-input-wrap--lead .rr-input { padding-left: 42px; }
.rr-auth__form .rr-input-icon { width: 42px; }
.rr-auth__form .rr-input-btn { width: 40px; height: 40px; right: 3px; }
.rr-auth__form .rr-label { font-size: var(--rr-text-base); }

/* ========================================================== RESPONSIVE ===
   Below 1000px the art becomes a compact branded header and the form leads.
   ==================================================================== */
@media (max-width: 1000px) {
  .rr-auth { grid-template-columns: minmax(0, 1fr); }
  .rr-auth__art {
    order: -1; gap: var(--rr-space-5);
    padding: var(--rr-space-6) var(--rr-space-5) var(--rr-space-7);
  }
  .rr-auth__scene { display: none; }
  .rr-auth__pills { display: none; }
  .rr-auth__side { padding: var(--rr-space-6) var(--rr-space-4) var(--rr-space-10); }
  .rr-auth__card { box-shadow: var(--rr-shadow-md); padding: var(--rr-space-6); }
  .rr-auth__lede { font-size: var(--rr-text-sm); }
}
@media (max-width: 420px) {
  .rr-auth__card { padding: var(--rr-space-5); border-radius: var(--rr-radius-xl); }
  .rr-auth__headline { font-size: var(--rr-text-2xl); }
}