/* ==========================================================================
   Rentiqa Design System v2 - AUTH (Login, Reset password, Change password, Access denied)
   Split-screen: deep-ink brand panel with luminous accent rings + calm form panel.
   Tokens only; logical properties; reduced-motion safe.
   ========================================================================== */

body.rq-auth { min-block-size: calc(100 * var(--rq-dvh, 1dvh)); background: var(--rq-bg); overflow-x: hidden; }

.rq-auth-shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 540px); min-block-size: calc(100 * var(--rq-dvh, 1dvh)); }

/* ---- Brand panel ------------------------------------------------------------ */
.rq-auth-hero {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--rq-s-8); padding: clamp(28px, calc(5 * var(--rq-vw, 1vw)), 72px); overflow: hidden; isolation: isolate;
  color: var(--rq-on-ink-92);
  background:
    radial-gradient(820px 520px at 8% 0%, color-mix(in srgb, var(--rq-brand-mineral) 14%, transparent), transparent 62%),
    radial-gradient(720px 520px at 100% 112%, color-mix(in srgb, var(--rq-brand-orange) 46%, transparent), transparent 62%),
    var(--rq-brand-graphite);
}
[dir="rtl"] .rq-auth-hero {
  background:
    radial-gradient(820px 520px at 92% 0%, color-mix(in srgb, var(--rq-brand-mineral) 14%, transparent), transparent 62%),
    radial-gradient(720px 520px at 0% 112%, color-mix(in srgb, var(--rq-brand-orange) 46%, transparent), transparent 62%),
    var(--rq-brand-graphite);
}
.rq-auth-hero::before, .rq-auth-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.rq-auth-hero::before { inline-size: 640px; block-size: 640px; inset-inline-end: -220px; inset-block-end: -260px; border: 1px solid var(--rq-on-ink-14); box-shadow: 0 0 0 60px var(--rq-on-ink-06), 0 0 0 120px var(--rq-on-ink-06); animation: rq-orbit 60s linear infinite; }
.rq-auth-hero::after { inline-size: 380px; block-size: 380px; inset-inline-end: -100px; inset-block-end: -120px; border: 1px dashed var(--rq-on-ink-22); animation: rq-orbit 80s linear infinite reverse; }
@keyframes rq-orbit { to { transform: rotate(360deg); } }
.rq-auth-dots { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--rq-on-ink-30) 1px, transparent 1.2px); background-size: 28px 28px; mask-image: radial-gradient(560px 380px at 0% 0%, var(--rq-mask), transparent 75%); -webkit-mask-image: radial-gradient(560px 380px at 0% 0%, var(--rq-mask), transparent 75%); opacity: 0.6; }
[dir="rtl"] .rq-auth-dots { mask-image: radial-gradient(560px 380px at 100% 0%, var(--rq-mask), transparent 75%); -webkit-mask-image: radial-gradient(560px 380px at 100% 0%, var(--rq-mask), transparent 75%); }
.rq-auth-brand { display: flex; align-items: center; gap: 12px; color: var(--rq-on-ink); }
.rq-auth-brand .rq-brand-mark { inline-size: 44px; block-size: 44px; border-radius: var(--rq-r-lg); font-size: 20px; display: grid; place-items: center; background: var(--rq-on-ink-14); box-shadow: inset 0 0 0 1px var(--rq-on-ink-25); color: var(--rq-on-ink); backdrop-filter: blur(6px); }
.rq-auth-brand__name { font-size: 22px; font-weight: var(--rq-fw-bold); letter-spacing: var(--rq-tracking-tight); }
.rq-auth-headline { margin: 0 0 var(--rq-s-4); max-inline-size: 18ch; color: var(--rq-on-accent); font-size: clamp(32px, calc(4 * var(--rq-vw, 1vw)), 52px); font-weight: var(--rq-fw-bold); line-height: 1.08; letter-spacing: -0.03em; }
[dir="rtl"] .rq-auth-headline { letter-spacing: 0; line-height: 1.4; max-inline-size: 22ch; }
.rq-auth-lede { margin: 0 0 var(--rq-s-6); max-inline-size: 48ch; font-size: var(--rq-fs-md); color: var(--rq-on-ink-92); opacity: 0.86; }
.rq-auth-features { display: grid; gap: var(--rq-s-3); margin: 0; padding: 0; list-style: none; }
.rq-auth-features li { display: flex; align-items: center; gap: 12px; color: var(--rq-on-ink-92); font-size: var(--rq-fs-base); }
.rq-auth-features i { display: grid; place-items: center; flex: none; inline-size: 32px; block-size: 32px; border-radius: var(--rq-r-md); background: var(--rq-on-ink-14); color: var(--rq-on-ink); font-size: 13px; box-shadow: inset 0 0 0 1px var(--rq-on-ink-22); }
.rq-auth-hero__foot { font-size: var(--rq-fs-xs); color: var(--rq-on-ink-92); opacity: 0.7; }

/* ---- Form panel ---------------------------------------------------------------- */
.rq-auth-panel { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--rq-s-10) clamp(20px, calc(5 * var(--rq-vw, 1vw)), 56px); background: var(--rq-surface); border-inline-start: 1px solid var(--rq-border); }
.rq-auth-tools { position: absolute; inset-block-start: var(--rq-s-4); inset-inline-end: var(--rq-s-4); display: flex; gap: var(--rq-s-1); }
.rq-auth-card { inline-size: min(400px, 100%); }
.rq-auth-card__logo { display: none; align-items: center; gap: 10px; margin-block-end: var(--rq-s-6); font-weight: var(--rq-fw-bold); font-size: var(--rq-fs-lg); }
.rq-auth-card__logo .rq-brand-mark { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: var(--rq-r-lg); background: var(--rq-brand-grad); color: var(--rq-on-accent); }
.rq-auth-title { margin: 0 0 6px; font-size: var(--rq-fs-2xl); font-weight: var(--rq-fw-bold); letter-spacing: -0.02em; line-height: 1.15; }
[dir="rtl"] .rq-auth-title { letter-spacing: 0; line-height: 1.4; }
.rq-auth-sub { margin: 0 0 var(--rq-s-6); color: var(--rq-muted); font-size: var(--rq-fs-base); }
.rq-auth-card .form-control { min-block-size: var(--rq-h-lg); }
.rq-auth-card .mb-3 { margin-block-end: var(--rq-s-4); }
.rq-auth-submit, .rq-login-submit, .rq-reset-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; inline-size: 100%; min-block-size: 44px; border: 0; border-radius: var(--rq-r-lg); cursor: pointer;
  font: inherit; font-size: var(--rq-fs-md); font-weight: var(--rq-fw-semibold); color: var(--rq-on-accent); background: var(--rq-brand-grad);
  box-shadow: inset 0 1px 0 var(--rq-on-ink-25), 0 10px 24px -12px var(--rq-accent); transition: transform var(--rq-dur-fast) var(--rq-ease), box-shadow var(--rq-dur) var(--rq-ease);
}
.rq-auth-submit:hover, .rq-login-submit:hover, .rq-reset-submit:hover { box-shadow: inset 0 1px 0 var(--rq-on-ink-30), 0 14px 28px -10px var(--rq-accent); }
.rq-auth-submit:active { transform: translateY(1px); }
.rq-auth-secondary { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--rq-h-lg); margin-block-start: var(--rq-s-3); border: 1px solid var(--rq-border-control); border-radius: var(--rq-r-lg); background: transparent; color: var(--rq-text); font: inherit; font-weight: var(--rq-fw-semibold); cursor: pointer; }
.rq-auth-secondary:hover { background: var(--rq-hover); }
.rq-auth-links { margin-block-start: var(--rq-s-4); text-align: center; font-size: var(--rq-fs-sm); }
.rq-auth-hint { margin-block-start: 6px; font-size: var(--rq-fs-xs); color: var(--rq-muted); }
.rq-auth-error { margin-block-end: var(--rq-s-3); }

/* Password reveal button injected by password-toggle.js */
.rq-auth-card .password-toggle, .rq-auth-card [data-password-toggle] { color: var(--rq-muted); }

/* ---- Solo card variant (reset / change password / denied) ----------------------------- */
body.rq-auth--solo { display: grid; place-items: center; padding: var(--rq-s-6); background:
  radial-gradient(700px 420px at 15% 0%, color-mix(in srgb, var(--rq-brand-mineral) 38%, transparent), transparent 70%),
  radial-gradient(560px 380px at 100% 100%, color-mix(in srgb, var(--rq-brand-orange) 9%, transparent), transparent 70%),
  var(--rq-bg); }
.rq-auth-solo-card { inline-size: min(440px, 100%); padding: var(--rq-s-8); background: var(--rq-surface); border: 1px solid var(--rq-border); border-radius: var(--rq-r-xl); box-shadow: var(--rq-shadow-pop); }
.rq-auth-solo-card .rq-auth-card__logo { display: flex; }
.rq-auth-solo-card .rq-auth-title { font-size: var(--rq-fs-xl); }
.rq-auth--solo .rq-auth-tools { position: fixed; }
.rq-auth-icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; margin-block-end: var(--rq-s-4); border-radius: 16px; background: var(--rq-accent-soft); color: var(--rq-accent-text); font-size: 22px; box-shadow: inset 0 0 0 1px var(--rq-accent-line); }
.rq-auth-icon--danger { background: var(--rq-danger-bg); color: var(--rq-danger); box-shadow: inset 0 0 0 1px var(--rq-danger-line); }
.rq-auth-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--rq-s-4); padding: 0; list-style: none; }
.rq-auth-actions { display: grid; gap: var(--rq-s-2); }
.rq-auth-actions .btn { inline-size: 100%; min-block-size: var(--rq-h-lg); }

@media (max-width: 899.98px) {
  .rq-auth-shell { grid-template-columns: minmax(0, 1fr); }
  .rq-auth-hero { display: none; }
  .rq-auth-panel { border-inline-start: 0; min-block-size: calc(100 * var(--rq-dvh, 1dvh)); }
  .rq-auth-card__logo { display: flex; }
}

/* ---- MFA setup / verify (solo card) ------------------------------------------------------- */
.rq-auth-lang-glyph { font-weight: var(--rq-fw-semibold); font-size: var(--rq-fs-sm); }
.rq-mfa-card { inline-size: min(480px, 100%); }
.rq-mfa-card .rq-auth-sub { line-height: 1.55; }
.rq-mfa-card .validation-summary-valid { display: none; }
.rq-mfa-code { font-family: var(--rq-font-mono); font-size: var(--rq-fs-xl); letter-spacing: 0.28em; text-align: center; min-block-size: 48px; }
.rq-mfa-code::placeholder { letter-spacing: 0; }
.rq-mfa-submit, .rq-mfa-continue { margin-block-start: var(--rq-s-4); text-decoration: none; }
.rq-mfa-continue:hover { color: var(--rq-on-accent); }
.rq-mfa-signout { margin-block-start: var(--rq-s-1); }
.rq-mfa-note { align-items: center; }
.rq-mfa-steps { display: grid; gap: var(--rq-s-5); margin: 0; padding: 0; list-style: none; }
.rq-mfa-steps > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--rq-s-3); align-items: start; }
.rq-mfa-steps__n { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--rq-accent-soft); color: var(--rq-accent-text); box-shadow: inset 0 0 0 1px var(--rq-accent-line); font-size: var(--rq-fs-sm); font-weight: var(--rq-fw-bold); font-variant-numeric: tabular-nums; }
.rq-mfa-steps__title { margin: 0 0 var(--rq-s-2); font-weight: var(--rq-fw-semibold); font-size: var(--rq-fs-base); line-height: 1.5; }
.rq-mfa-steps__body .form-label { display: block; color: var(--rq-muted); font-size: var(--rq-fs-sm); }
.rq-mfa-secret { display: flex; align-items: center; gap: var(--rq-s-2); padding: var(--rq-s-2); padding-inline-start: var(--rq-s-3); background: var(--rq-surface-2, var(--rq-neutral-bg)); border: 1px solid var(--rq-border-control); border-radius: var(--rq-r-md); }
.rq-mfa-secret code { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; color: var(--rq-text); font-family: var(--rq-font-mono); font-size: var(--rq-fs-md); letter-spacing: 0.14em; line-height: 1.5; background: transparent; }
/* Authenticator QR: always black on white with its own quiet zone, never themed or mirrored, so scanners work in dark mode and brand themes */
.rq-mfa-qr { display: grid; place-items: center; inline-size: fit-content; max-inline-size: 100%; margin-inline: auto; margin-block: var(--rq-s-2) var(--rq-s-4); padding: 0; background: #fff; border: 1px solid var(--rq-border-control); border-radius: var(--rq-r-lg); overflow: hidden; direction: ltr; }
.rq-mfa-qr__svg { display: block; inline-size: 200px; block-size: 200px; max-inline-size: 100%; height: auto; background: #fff; }
.rq-mfa-steps__title--sub { margin-block-start: var(--rq-s-2); }
.rq-mfa-cancel { margin-block-start: var(--rq-s-3); text-decoration: none; }
.rq-mfa-link { display: inline-flex; align-items: center; gap: var(--rq-s-2); margin-block-start: var(--rq-s-2); color: var(--rq-accent-text); font-size: var(--rq-fs-sm); font-weight: var(--rq-fw-semibold); }
.rq-mfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rq-s-2); margin: 0 0 var(--rq-s-3); padding: var(--rq-s-3); list-style: none; background: var(--rq-neutral-bg); border: 1px solid var(--rq-neutral-line); border-radius: var(--rq-r-md); }
.rq-mfa-codes code { display: block; padding: var(--rq-s-2); text-align: center; color: var(--rq-text); background: var(--rq-surface); border-radius: var(--rq-r-sm); font-family: var(--rq-font-mono); font-size: var(--rq-fs-base); letter-spacing: 0.08em; user-select: all; }
.rq-flip-rtl { display: inline-block; }
[dir="rtl"] .rq-flip-rtl { transform: scaleX(-1); }
@media (max-width: 420px) { .rq-mfa-codes { grid-template-columns: minmax(0, 1fr); } }
.rq-mfa-card .rq-auth-secondary { gap: var(--rq-s-2); }
.rq-mfa-card .validation-summary-errors ul { margin: 0; padding: 0; list-style: none; }
/* Solo cards on phones: keep the fixed language/theme tools clear of the card */
@media (max-width: 520px) { body.rq-auth--solo { align-content: start; padding-block-start: 64px; } }

/* ---- Language / theme tools: real 44px buttons with a visible target (c1_f20) ------------------------------------------------- */
.rq-auth-tools { gap: var(--rq-s-2); }
.rq-auth-tools .rq-icon-btn { inline-size: var(--rq-h-lg); block-size: var(--rq-h-lg); min-inline-size: var(--rq-h-lg); border: 1px solid var(--rq-border-control); border-radius: var(--rq-r-md); background: var(--rq-surface); color: var(--rq-text); display: inline-grid; place-items: center; cursor: pointer; }
.rq-auth-tools .rq-icon-btn:hover { background: var(--rq-hover); border-color: var(--rq-accent-line); }
.rq-auth-tools .rq-icon-btn:focus-visible { outline: 2px solid var(--rq-focus); outline-offset: 2px; }
.rq-auth-tools .rq-icon-btn i { font-size: var(--rq-icon, 16px); }
.rq-auth-tools .rq-auth-lang-glyph { font-size: var(--rq-fs-sm); }