/*
 * wwwroot/css/pages/auth-shell.css
 * Greenfield redesign — "Tech atmosphere · dark glow" (2026-05-19)
 *
 * Owner: Auth Shell — Views/Account/Login.cshtml / ChangePassword.cshtml / Denied.cshtml
 *        plus Views/Shared/_AuthLayout.cshtml
 *        plus Views/TenantPortal/TenantHome.cshtml (Section M — tenant-portal entry
 *        motion; .auth-entry-reveal* / .auth-brand-mark--shimmer live ONLY there.
 *        css-drift-check C4 skips non-"auth-shell"-prefixed classes, so Rule 3 for
 *        these two families is guarded by this owner note, not the machine).
 *
 * Aesthetic direction (user-approved, L3): blackgold baseline secure-console.
 * Deep near-black field with a layered gold gradient mesh + faint console grid
 * + grain, a glass card with a gold hairline and corner ticks, monospaced
 * technical micro-labels, and ONE orchestrated staggered page-load reveal.
 * No prefers-color-scheme auto-switch (blackgold is the only default).
 *
 * NAMING EXCEPTION (unchanged): per docs/CSS_ARCHITECTURE.md §3 Rule 2,
 * page-local classes should carry `.{area}-{page}__{block}`. Auth Shell predates
 * this rule; its markup uses bare `.auth-*` names and a coordinated rename stays
 * deferred (would force a markup+CSS+contract change out of this slice's scope).
 * The Auth Shell remains an isolated subsystem (architecture.md §Protected Zones
 * + CSS_ARCHITECTURE.md §2.2 Auth Shell exception; wwwroot/css/CLAUDE.md Rule 8).
 * The exception is now encoded in tools/qa/css-drift-check.cjs C6 (per CLAUDE.md
 * §2.6 — anti-regression as code, not prose).
 *
 * Load order UNCHANGED (CLAUDE.md Rule 6): loaded by _AuthLayout.cshtml directly
 * after design-system, before @RenderSection("Styles"). site.css legacy bridge
 * link untouched — auth-shell.css loads last so it wins the cascade.
 *
 * Auth contract is NOT visual: every form field, hidden input, antiforgery
 * token, asp-for binding and data-* governance attr is preserved by the views.
 */

/* ─── Local design tokens (page-local layer; theme-aware via --erp-gold-*) ── */
.auth-shell {
  /* W2.x.2 (2026-06-01) — semantic tokens 保留在 .auth-shell scope（Rule 8
     isolation）；rgba literal 改用 00-tokens.css 內新增的 base RGB triplet
     做 alpha composition；W2.x.4c hairline-strong 改用既有 gold-light triplet
     （dba-atlas byte-equal verified）；glow 改用既有 gold-primary triplet。
     Layer 4 page-local 容許 hex literal，hex 形式（ink / ink-2 / text）保留。 */
  --auth-ink: #04070d;
  --auth-ink-2: #070b14;
  --auth-surface: rgba(var(--erp-rgb-auth-surface-base), 0.92);
  --auth-surface-2: rgba(var(--erp-rgb-auth-surface-base-2), 0.96);
  /* --auth-hairline removed 2026-05-30 (W2.x.1 sub-slice 1):
     it was a byte-equivalent duplicate of --erp-border-gold-hairline
     (00-tokens.css:156). All call-sites in this file now reference
     the shared token directly. */
  --auth-hairline-strong: rgba(var(--erp-rgb-gold-light), 0.5);
  --auth-text: #fdf3df;
  --auth-text-dim: rgba(var(--erp-rgb-auth-text-dim-base), 0.74);
  /* 0.52 → 0.66 → 0.78: 0.52 ≈ 4.1:1 (below AA), 0.66 ≈ 5.7:1 against
   * pure-black surface but drops to ~4.3:1 at the brightest hot spots of
   * the layered gold mesh background (P2.7 audit 2026-05-27 — gradient
   * peaks weren't accounted for in the 0.66 calculation). 0.78 holds
   * ≥5.0:1 across all hot spots. Functional form helper text additionally
   * routed to --auth-text-dim (~6.5:1) below. */
  --auth-text-faint: rgba(var(--erp-rgb-auth-text-faint-base), 0.78);
  /* --auth-mono removed 2026-05-30 (W2.x.1 sub-slice 1):
     it was a dead alias (var(--erp-font-mono) → var(--erp-font-mono)).
     All call-sites in this file now reference --erp-font-mono directly. */
  --auth-glow: rgba(var(--erp-rgb-gold-primary), 0.18);
  --auth-ring: rgba(var(--erp-rgb-auth-ring-base), 0.7);
}

/* ─── Section A: shell + atmospheric backdrop ─────────────────────────── */
.auth-layout-body {
  margin-bottom: 0;
}

.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 3rem) 1rem;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(243, 156, 18, 0.16), transparent 46%),
    radial-gradient(110% 80% at 12% 92%, rgba(142, 107, 27, 0.16), transparent 50%),
    radial-gradient(80% 60% at 50% 50%, rgba(20, 26, 38, 0.6), transparent 70%),
    linear-gradient(180deg, var(--auth-ink) 0%, var(--auth-ink-2) 100%);
  color: var(--auth-text);
  overflow: hidden;
}

/* Public/minimal pages can be taller than one iPhone viewport (for example
 * /m/Home/Privacy). Keep the atmospheric shell clipped horizontally, but let
 * the shell itself provide a native vertical scroll container on iOS Safari.
 * Split login keeps its existing curtain/transition clipping contract. */
.auth-shell-minimal {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* console grid + scan sheen */
.auth-shell::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(243, 156, 18, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 156, 18, 0.045) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  -webkit-mask-image: radial-gradient(78% 70% at 50% 42%, #000 35%, transparent 78%);
  mask-image: radial-gradient(78% 70% at 50% 42%, #000 35%, transparent 78%);
}

/* fine grain — inline SVG noise, no external asset */
.auth-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.auth-shell-stack {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  display: grid;
  gap: 1.5rem;
}

/* Supplier-facing list/detail surfaces explicitly opt into the wide variant.
 * Login and credential pages retain the focused 460px form measure. */
.auth-shell-wide {
  place-items: start center;
  overflow: auto;
}

.auth-shell-stack-wide {
  width: min(100%, 1180px);
}

/* Neutralize the design-system/02-shell.css `.auth-shell-form` card box
 * (bg/border/radius/padding/shadow). On the redesigned auth surface the card
 * visual belongs solely to `.auth-card`; `.auth-shell-form` is a pure layout
 * wrapper. Without this reset 02-shell.css renders a redundant outer panel
 * around the glass card (double-nested card). Page-local layer wins by load
 * order — no design-system / site.css edit, no Rule 4/6/8 violation. */
.auth-shell-form,
.auth-shell-minimal .auth-shell-form {
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* ─── Section A2: brand lockup ────────────────────────────────────────── */
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.1rem 0.75rem 0.8rem;
  border: 1px solid var(--erp-border-gold-hairline);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(10, 14, 22, 0.9), rgba(8, 12, 19, 0.78));
  color: var(--auth-text);
  text-decoration: none;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 239, 199, 0.06);
  backdrop-filter: blur(10px);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.auth-brand:hover,
.auth-brand:focus-visible {
  color: var(--auth-text);
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--auth-hairline-strong);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.5),
    0 0 26px var(--auth-glow),
    inset 0 1px 0 rgba(255, 239, 199, 0.12);
  outline: none;
}

.auth-brand-center {
  justify-content: center;
  margin: 0 auto;
}

.auth-brand-mark {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--erp-gold-light), var(--erp-gold-primary) 70%);
  color: #20140a;
  font-family: var(--erp-font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  box-shadow:
    0 0 0 1px rgba(255, 243, 212, 0.2),
    0 12px 22px rgba(142, 107, 27, 0.4);
}

.auth-brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 9px;
  border: 1px solid rgba(40, 26, 6, 0.22);
}

.auth-brand-mark-image {
  padding: 0;
  overflow: hidden;
  background: rgba(255, 244, 214, 0.96);
}

.auth-brand-mark-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.auth-brand-text {
  display: grid;
  gap: 0.16rem;
}

.auth-brand-title {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--auth-text);
}

.auth-brand-subtitle {
  font-family: var(--erp-font-mono);
  color: var(--auth-text-faint);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ─── Section B: card ─────────────────────────────────────────────────── */
.auth-card {
  width: 100%;
  border: 1px solid var(--erp-border-gold-hairline);
  background: linear-gradient(180deg, var(--auth-surface), var(--auth-surface-2));
  box-shadow: 0 28px 60px rgba(2, 5, 11, 0.55);
}

.auth-card .card-body {
  padding: 1.6rem;
}

.auth-card.auth-card-sci {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--erp-border-gold-hairline);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(7, 11, 18, 0.97), rgba(10, 15, 24, 0.97)),
    radial-gradient(120% 60% at 50% 0%, rgba(243, 156, 18, 0.1), transparent 60%);
  box-shadow:
    0 34px 74px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 224, 160, 0.05);
}

/* top scan accent */
.auth-card.auth-card-sci::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--erp-gold-primary) 28%,
    var(--erp-gold-light) 50%,
    var(--erp-gold-primary) 72%,
    transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}

/* corner ticks — console framing */
.auth-card.auth-card-sci::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  pointer-events: none;
  background:
    linear-gradient(var(--auth-hairline-strong), var(--auth-hairline-strong)) left top / 14px 1px no-repeat,
    linear-gradient(var(--auth-hairline-strong), var(--auth-hairline-strong)) left top / 1px 14px no-repeat,
    linear-gradient(var(--auth-hairline-strong), var(--auth-hairline-strong)) right top / 14px 1px no-repeat,
    linear-gradient(var(--auth-hairline-strong), var(--auth-hairline-strong)) right top / 1px 14px no-repeat,
    linear-gradient(var(--auth-hairline-strong), var(--auth-hairline-strong)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--auth-hairline-strong), var(--auth-hairline-strong)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--auth-hairline-strong), var(--auth-hairline-strong)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--auth-hairline-strong), var(--auth-hairline-strong)) right bottom / 1px 14px no-repeat;
  opacity: 0.55;
}

.auth-card-sci .card-body {
  position: relative;
  z-index: 1;
  padding: 1.75rem;
}

.auth-card-head {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.auth-card-head-compact {
  margin-bottom: 1.35rem;
}

.auth-card-head .home-eyebrow {
  display: inline-flex;
  align-self: start;
  font-family: var(--erp-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--erp-gold-light);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--erp-border-gold-hairline);
  border-radius: 999px;
  background: rgba(243, 156, 18, 0.08);
  margin-bottom: 0.3rem;
}

.auth-status-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
  font-family: var(--erp-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--auth-text-faint);
}

.auth-status-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.6rem 0.28rem 0.85rem;
  border: 1px solid var(--erp-border-gold-hairline);
  border-radius: 999px;
  background: rgba(243, 156, 18, 0.07);
  color: var(--erp-gold-light);
}

.auth-status-chip::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--erp-gold-light);
  box-shadow: 0 0 10px rgba(255, 219, 140, 0.8);
  animation: auth-pulse 2.4s ease-in-out infinite;
}

.auth-status-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--auth-hairline-strong), transparent);
}

.auth-status-meta {
  color: var(--auth-text-faint);
  letter-spacing: 0.1em;
}

.auth-card-sci .page-title {
  font-size: clamp(1.45rem, 3.4vw, 1.85rem);
  line-height: 1.16;
  text-wrap: balance;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--auth-text);
  text-shadow: 0 0 24px rgba(243, 156, 18, 0.12);
}

.auth-card-sci .page-subtitle {
  margin-top: 0.35rem;
  max-width: 32rem;
  color: var(--auth-text-dim);
  line-height: 1.6;
}

/* Demoted to a clear tertiary line (UIUX review: card top was text-heavy
 * with page-subtitle + auth-form-note overlapping in meaning). True de-dup
 * of the two paragraphs is a markup/auth-contract decision, deferred — CSS
 * only subordinates this note visually and tightens the rhythm. */
.auth-form-note {
  color: var(--auth-text-faint);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ─── Section C: tenant lock ──────────────────────────────────────────── */
.auth-tenant-lock {
  border: 1px solid var(--erp-border-gold-hairline);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(15, 22, 34, 0.94), rgba(10, 15, 25, 0.9));
  padding: 0.95rem 1rem;
  display: grid;
  gap: 0.4rem;
}

.auth-tenant-lock-label {
  font-family: var(--erp-font-mono);
  color: var(--auth-text-faint);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.auth-tenant-lock-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.auth-tenant-lock-name {
  color: var(--auth-text);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.auth-tenant-lock-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--auth-hairline-strong);
  background: rgba(243, 156, 18, 0.12);
  color: var(--erp-gold-light);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.28rem 0.65rem;
}

.auth-tenant-lock-note {
  color: var(--auth-text-dim);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

/* ─── Section D: result / validation ──────────────────────────────────── */
/* Note: .auth-signal-note / .auth-signal-dot were removed when the tenant
 * welcome message moved into the Operations Console NOTICE block on the
 * split-variant left panel (login redesign 2026-05-27). */

.auth-result-note {
  display: grid;
  gap: 0.28rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  line-height: 1.55;
}

.auth-result-note strong {
  color: var(--auth-text);
  font-size: 0.94rem;
}

.auth-result-note span {
  color: var(--auth-text-dim);
  font-size: 0.88rem;
}

.auth-result-note-success {
  border: 1px solid rgba(95, 201, 134, 0.34);
  background: linear-gradient(180deg, rgba(38, 121, 74, 0.22), rgba(19, 72, 48, 0.12));
}

.auth-result-note-warning {
  border: 1px solid var(--auth-hairline-strong);
  background: linear-gradient(180deg, rgba(243, 156, 18, 0.14), rgba(120, 81, 18, 0.08));
}

/* W2.x.4d (2026-06-01) — auth-result-note-info family completion.
   Markup Views/Account/Denied.cshtml:33 已用 `.auth-result-note auth-result-note-info`
   但 CSS family 缺對應 modifier（成 markup-side dead class drift）。
   採 token-driven 補規則（rgba via --erp-rgb-info triplet），對齊 family
   結構 (border + gradient) 並避免再增 literal RGB 債務。
   與 .erp-alert--info（Bootstrap info-tone）互補：alert 提供 info 色語意，
   auth-result-note-info 提供 auth-shell 視覺紋理。 */
.auth-result-note-info {
  border: 1px solid rgba(var(--erp-rgb-info), 0.34);
  background: linear-gradient(180deg, rgba(var(--erp-rgb-info), 0.18), rgba(var(--erp-rgb-info), 0.08));
}

.auth-validation-summary {
  border-radius: 12px;
  color: #ffd9d9;
  border: 1px solid rgba(214, 90, 90, 0.4);
  background: rgba(151, 46, 46, 0.18);
}

.auth-validation-summary.validation-summary-valid {
  display: none;
}

.auth-validation-summary ul {
  margin: 0;
  padding: 0.7rem 1rem 0.7rem 1.25rem;
}

/* ─── Section E: step pills (ChangePassword) ──────────────────────────── */
.auth-step-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.auth-step-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  flex: 1 1 auto;
  min-width: max-content;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--erp-border-gold-hairline);
  border-radius: 12px;
  background: rgba(255, 241, 206, 0.03);
  color: var(--auth-text-dim);
  font-size: 0.84rem;
  white-space: nowrap;
}

.auth-step-item.is-active {
  border-color: var(--auth-hairline-strong);
  background: rgba(243, 156, 18, 0.12);
  color: var(--auth-text);
}

.auth-step-index {
  width: 1.45rem;
  height: 1.45rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(243, 156, 18, 0.18);
  color: var(--erp-gold-light);
  font-family: var(--erp-font-mono);
  font-size: 0.76rem;
  font-weight: 700;
}

/* ─── Section F: form fields ──────────────────────────────────────────── */
.auth-form-grid {
  display: grid;
  gap: 0.2rem;
}

.auth-field {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

/* color !important: site.css ≤1023px sets `.form-label,.form-text
 * {color:#c4bca9 !important}` which otherwise defeats the auth a11y
 * contrast tokens at tablet/mobile (full-tree audit RC-G). */
.auth-field .form-label {
  color: var(--auth-text-dim) !important;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* border/background/color !important: design-system 06-forms.css:11
 * locks .form-control/.erp-input/input[type=password] with !important
 * (border var(--erp-border), background #100f0f, color
 * var(--erp-text-secondary)). Without matching !important the entire
 * redesigned input visual is silently defeated (full-tree audit RC-A —
 * same pattern this file already uses on .btn.erp-button--auth-submit). */
.auth-field .form-control {
  min-height: 54px;
  border-radius: 12px;
  border: 1px solid var(--erp-border-gold-hairline) !important;
  background: linear-gradient(180deg, rgba(5, 8, 14, 0.92), rgba(10, 15, 24, 0.96)) !important;
  color: var(--auth-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 243, 212, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-field .form-control::placeholder {
  color: var(--auth-text-faint);
}

/* !important parity with the base rule above — 06-forms.css:11 border
 * is !important, so the focus ring/border must also be !important to
 * actually appear (web-design-guidelines: visible focus indicator). */
.auth-field .form-control:focus {
  border-color: var(--auth-ring) !important;
  box-shadow:
    0 0 0 0.18rem rgba(243, 156, 18, 0.16),
    0 0 28px rgba(243, 156, 18, 0.1) !important;
  background: linear-gradient(180deg, rgba(6, 9, 16, 0.97), rgba(12, 18, 28, 0.99)) !important;
  outline: none;
}

/* color !important: same RC-G site.css ≤1023px override as .form-label. */
.auth-field .form-text {
  margin-top: 0.15rem;
  color: var(--auth-text-faint) !important;
  font-size: 0.8rem;
}

/* color !important: 06-forms.css:18 (.text-danger #ffd6d7 !important) and
 * 09-status.css:14 (.text-danger #fecaca !important) otherwise override
 * the intended auth error tone (full-tree audit #3/#19). */
.auth-field .text-danger {
  color: #ff9b9b !important;
  font-size: 0.82rem;
}

/* ─── Section G: submit (low-key dark gold — Wave 7 lineage) ──────────── */
.auth-submit-wrap {
  margin-top: 0.7rem;
}

/* .btn.auth-submit-btn renamed to `.btn.erp-button--auth-submit` and moved to design-system/05-buttons.css
   per DECISION-20260530-auth-shell-css-refactor W2.x.3 (Wave G). Typographic props lifted;
   background / border / color 由 .btn.btn-primary 接管。
   Deleted: 31 lines (L611-641) including !important gradient + hover/focus overrides. */

/* Section H removed 2026-05-31 + lingering refs in Sections I/J/K cleaned
   2026-06-01 (W2.x.4a completion): .auth-card-foot / -line / -text had zero
   markup references; Section H body deleted 2026-05-31 (22 lines) but the
   2026-05-31 sweep left 4 orphan animation/responsive/reduced-motion refs
   in Sections I (L637 group + L648 standalone delay) / J (L686 group) /
   K (L708 group). 2026-06-01 follow-up removes those 4 refs per Rule 3
   (Selector-to-Markup 100%). Total cumulative cleanup: 22 + 4 = 26 lines. */

/* ─── Section I: orchestrated page-load reveal ────────────────────────── */
.auth-brand,
.auth-shell-form > .auth-card {
  animation: auth-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-brand {
  animation-delay: 60ms;
}

.auth-shell-form > .auth-card {
  animation-delay: 180ms;
}

.auth-card-head,
.auth-form-grid > * {
  animation: auth-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 320ms;
}

.auth-form-grid > *:nth-child(1) { animation-delay: 360ms; }
.auth-form-grid > *:nth-child(2) { animation-delay: 410ms; }
.auth-form-grid > *:nth-child(3) { animation-delay: 460ms; }
.auth-form-grid > *:nth-child(4) { animation-delay: 510ms; }
.auth-form-grid > *:nth-child(5) { animation-delay: 560ms; }
.auth-form-grid > *:nth-child(6) { animation-delay: 610ms; }

@keyframes auth-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes auth-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.7); }
}

/* ─── Section J: responsive (sm) ──────────────────────────────────────── */
@media (max-width: 767.98px) {
  .auth-shell-stack {
    width: 100%;
    gap: 1.1rem;
  }

  .auth-brand {
    padding: 0.7rem 0.9rem 0.7rem 0.7rem;
    border-radius: 16px;
  }

  .auth-card.auth-card-sci {
    border-radius: 20px;
  }

  .auth-card-sci .card-body {
    padding: 1.25rem;
  }

  .auth-status-row {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .auth-status-meta {
    white-space: normal;
  }

  .auth-card.auth-card-sci::after {
    inset: 8px;
  }

  /* 06-forms.css mobile @media sets .form-control min-height:48px
   * !important; keep the intended 54px touch target (ui-ux-pro-max §2
   * — still ≥44 either way, this preserves design scale). */
  .auth-field .form-control {
    min-height: 54px !important;
  }
}

/* ─── Section K: reduced motion (a11y — ui-ux-pro-max §1 reduced-motion) ─ */
@media (prefers-reduced-motion: reduce) {
  .auth-brand,
  .auth-shell-form > .auth-card,
  .auth-card-head,
  .auth-form-grid > * {
    animation: none !important;
  }

  .auth-status-chip::before {
    animation: none !important;
  }
}

/* ─── Section L: blackgold vault-door curtain (entry + submit) ────────────
 * Symmetric blackgold vault-door curtain played on BOTH directions of the
 * login boundary:
 *
 *   body.is-entering         — auto-set by _AuthLayout on the split variant.
 *                              Curtain starts closed, light bursts behind the
 *                              seam, doors part OUTWARD and the curtain fades
 *                              away to reveal the login page. ~1300ms.
 *   body.is-authenticating   — set by Login.cshtml inline script after form
 *                              passes client validation. Doors slide IN from
 *                              the sides, light bursts inside, rays retract,
 *                              doors seal. ~1900ms; the inline script delays
 *                              the real form.submit() so the user actually
 *                              sees the full close cycle before browser
 *                              navigates.
 *
 * Motion-meaning: doors = secure boundary, rays = authorization moment,
 * retract = sealing the session. Both directions share the curtain DOM
 * (.auth-door-curtain) and the centerpieces (seam, rays, label) — only the
 * door translate keyframes differ. reduced-motion users see no curtain at
 * all (skipped entirely; the login page just paints normally).
 */
.auth-door-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.auth-door-curtain__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  background:
    radial-gradient(80% 100% at 100% 50%, rgba(243, 156, 18, 0.1), transparent 60%),
    linear-gradient(165deg, #0b0d12 0%, #15110a 60%, #050709 100%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.65);
}

.auth-door-curtain__panel--left {
  left: 0;
  border-right: 1px solid var(--auth-hairline-strong);
}

.auth-door-curtain__panel--right {
  right: 0;
  border-left: 1px solid var(--auth-hairline-strong);
  background:
    radial-gradient(80% 100% at 0% 50%, rgba(243, 156, 18, 0.1), transparent 60%),
    linear-gradient(195deg, #0b0d12 0%, #15110a 60%, #050709 100%);
}

.auth-door-curtain__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    transparent 0%,
    var(--erp-gold-primary) 20%,
    var(--erp-gold-light) 50%,
    var(--erp-gold-primary) 80%,
    transparent 100%);
  box-shadow:
    0 0 18px var(--erp-gold-light),
    0 0 48px rgba(243, 156, 18, 0.55);
  opacity: 0;
}

.auth-door-curtain__rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220vmax;
  height: 220vmax;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(255, 228, 160, 0.55) 0deg 1.2deg,
      transparent 1.2deg 11deg
    ),
    radial-gradient(circle at 50% 50%,
      rgba(255, 228, 160, 0.6) 0%,
      rgba(243, 156, 18, 0.32) 4%,
      transparent 16%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 4%, rgba(0, 0, 0, 0.7) 28%, transparent 64%);
  mask-image: radial-gradient(circle at 50% 50%, #000 4%, rgba(0, 0, 0, 0.7) 28%, transparent 64%);
  opacity: 0;
  mix-blend-mode: screen;
}

.auth-door-curtain__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--erp-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--erp-gold-light);
  text-shadow:
    0 0 14px rgba(243, 156, 18, 0.65),
    0 0 36px rgba(243, 156, 18, 0.32);
  opacity: 0;
  white-space: nowrap;
}

/* ── Entrance: body.is-entering (added by _AuthLayout on split variant) ── */
body.is-entering .auth-door-curtain {
  visibility: visible;
  opacity: 1;
  animation: auth-door-veil-entry 1400ms ease-out both;
}

body.is-entering .auth-door-curtain__panel--left {
  animation: auth-door-entry-left 1300ms cubic-bezier(0.5, 0, 0.2, 1) both;
}

body.is-entering .auth-door-curtain__panel--right {
  animation: auth-door-entry-right 1300ms cubic-bezier(0.5, 0, 0.2, 1) both;
}

body.is-entering .auth-door-curtain__seam {
  animation: auth-door-seam-entry 1300ms ease-out both;
}

body.is-entering .auth-door-curtain__rays {
  animation: auth-door-rays-entry 1300ms cubic-bezier(0.3, 0, 0.5, 1) both;
}

body.is-entering .auth-door-curtain__label {
  /* Entrance label = a brief "ESTABLISHING SESSION" beat, replaced by CSS */
  animation: auth-door-label-entry 1300ms ease-out both;
}

body.is-entering .auth-door-curtain__label::before {
  content: "ESTABLISHING SESSION";
}

body.is-entering .auth-door-curtain__label > span {
  display: none;
}

/* ── Submit: body.is-authenticating (added by inline JS after validation) */
body.is-authenticating .auth-door-curtain {
  visibility: visible;
  opacity: 1;
}

body.is-authenticating .auth-door-curtain__panel--left {
  animation: auth-door-submit-left 1900ms cubic-bezier(0.7, 0, 0.3, 1) both;
}

body.is-authenticating .auth-door-curtain__panel--right {
  animation: auth-door-submit-right 1900ms cubic-bezier(0.7, 0, 0.3, 1) both;
}

body.is-authenticating .auth-door-curtain__seam {
  animation: auth-door-seam-submit 1900ms ease-out both;
}

body.is-authenticating .auth-door-curtain__rays {
  animation: auth-door-rays-submit 1900ms cubic-bezier(0.4, 0, 0.6, 1) both;
}

body.is-authenticating .auth-door-curtain__label {
  animation: auth-door-label-submit 1900ms ease-out both;
}

/* ── Entrance keyframes ────────────────────────────────────────────────
 * Doors start CLOSED (covering), seam glows, label fades in, rays burst
 * behind the seam, doors part OUTWARD to off-screen, curtain veil fades. */
@keyframes auth-door-entry-left {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(0); }       /* hold sealed with glow */
  100% { transform: translateX(-105%); }   /* open outward, off-screen */
}

@keyframes auth-door-entry-right {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(0); }
  100% { transform: translateX(105%); }
}

@keyframes auth-door-seam-entry {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0.3); }
  12%  { opacity: 1; transform: translateX(-50%) scaleY(1); }
  35%  { opacity: 1; transform: translateX(-50%) scaleY(1); }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes auth-door-rays-entry {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(0.1) rotate(15deg); opacity: 0.4; }
  45%  { transform: translate(-50%, -50%) scale(0.95) rotate(50deg); opacity: 1; }
  62%  { transform: translate(-50%, -50%) scale(1.5) rotate(80deg); opacity: 0.85; }
  85%  { transform: translate(-50%, -50%) scale(2.2) rotate(120deg); opacity: 0.25; }
  100% { transform: translate(-50%, -50%) scale(2.6) rotate(140deg); opacity: 0; }
}

@keyframes auth-door-label-entry {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  12%  { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  55%  { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; }
}

@keyframes auth-door-veil-entry {
  0%   { opacity: 1; visibility: visible; }
  88%  { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* ── Submit keyframes ──────────────────────────────────────────────────
 * Doors slide IN from sides → sealed → light bursts inside → rays retract
 * (suction) → doors stay sealed at end. Total 1900ms; JS delays the real
 * form.submit() so the user sees the full close cycle. The end state
 * covers browser navigation. */
@keyframes auth-door-submit-left {
  0%   { transform: translateX(-105%); }  /* off-screen */
  20%  { transform: translateX(0); }       /* sealed */
  35%  { transform: translateX(0); }       /* hold sealed (rays peak) */
  /* Rays retract; doors briefly hint outward then re-seal */
  55%  { transform: translateX(-6%); }
  75%  { transform: translateX(0); }
  100% { transform: translateX(0); }       /* end sealed */
}

@keyframes auth-door-submit-right {
  0%   { transform: translateX(105%); }
  20%  { transform: translateX(0); }
  35%  { transform: translateX(0); }
  55%  { transform: translateX(6%); }
  75%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@keyframes auth-door-seam-submit {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0.3); }
  18%  { opacity: 0; transform: translateX(-50%) scaleY(0.3); }
  28%  { opacity: 1; transform: translateX(-50%) scaleY(1); }
  55%  { opacity: 1; transform: translateX(-50%) scaleY(1); }
  78%  { opacity: 0.6; }
  100% { opacity: 1; transform: translateX(-50%) scaleY(1); }
}

@keyframes auth-door-rays-submit {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  35%  { transform: translate(-50%, -50%) scale(0.6) rotate(30deg); opacity: 0.8; }
  50%  { transform: translate(-50%, -50%) scale(1.4) rotate(70deg); opacity: 1; }
  62%  { transform: translate(-50%, -50%) scale(1.6) rotate(100deg); opacity: 0.9; }
  78%  { transform: translate(-50%, -50%) scale(0.5) rotate(140deg); opacity: 0.45; }
  92%  { transform: translate(-50%, -50%) scale(0.1) rotate(170deg); opacity: 0.1; }
  100% { transform: translate(-50%, -50%) scale(0) rotate(180deg); opacity: 0; }
}

@keyframes auth-door-label-submit {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  20%  { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 0; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.is-entering .auth-door-curtain,
  body.is-authenticating .auth-door-curtain {
    visibility: hidden !important;
    opacity: 0 !important;
    animation: none !important;
  }
  body.is-entering .auth-door-curtain__panel,
  body.is-entering .auth-door-curtain__seam,
  body.is-entering .auth-door-curtain__rays,
  body.is-entering .auth-door-curtain__label,
  body.is-authenticating .auth-door-curtain__panel,
  body.is-authenticating .auth-door-curtain__seam,
  body.is-authenticating .auth-door-curtain__rays,
  body.is-authenticating .auth-door-curtain__label {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ─── Operations Console split variant (login; ViewData AuthLayoutVariant=split)
 * Replaces the prior Art-Deco luxury-vault variant (2026-05-27 redesign).
 *
 * Intent: unify the page into one secure-console language. Left = real system
 * status panel (tenant brand + environment + meta + notice + support contact);
 * right = the form. No luxury serif fonts, no rotating sunburst, no double
 * gold deco frame — every visible element either carries information or
 * expresses a causal state (Online pulse). blackgold baseline preserved.
 *
 * Tenant injection: ViewData fields AuthBrandTitle / AuthBrandLogoUrl /
 * AuthBrandSubtitle / TenantWelcomeMessage / TenantContactName /
 * TenantContactPhone / TenantAccentColor are surfaced via the
 * @section AuthBrandPanel block in Login.cshtml. AccentColor maps to
 * --auth-tenant-accent (page-local var, used as a subtle secondary tint
 * on the pulse dot; does NOT override the global blackgold palette).
 *
 * Other _AuthLayout pages (ChangePassword / Denied) keep the centered
 * .auth-shell-minimal variant — that path is untouched by this section. */

.auth-shell-split {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 28.75rem) minmax(0, 32.5rem);
  justify-content: center;
  align-content: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(1.5rem, 4vw, 4rem);
}

.auth-brand-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  border-left: 1px solid var(--erp-border-gold-hairline);
  background:
    radial-gradient(140% 100% at 6% -10%, rgba(243, 156, 18, 0.1), transparent 55%),
    linear-gradient(180deg, var(--auth-ink) 0%, var(--auth-ink-2) 100%);
}

/* faint console-grid wash, restrained vs. the global shell grid */
.auth-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(243, 156, 18, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 156, 18, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.auth-brand-panel-brand,
.auth-console {
  position: relative;
  z-index: 2;
}

.auth-console {
  /* --auth-tenant-accent: per-tenant pulse-dot accent。default fallback
     = --erp-gold-light（blackgold brand baseline）。Login.cshtml:41 透過
     runtime Razor `style="@consoleStyle"` 注入 tenant-specific 色（per
     Rule 11 "留 inline" 第二類 — Razor @(...) runtime，合規）。改色不需
     動 CSS / markup；只動 ViewData["TenantAccentColor"]。W2.x.4b doc-fix. */
  --auth-tenant-accent: var(--erp-gold-light);
  display: grid;
  align-content: center;
  gap: 1.4rem;
  max-width: 30rem;
  margin: 0;
}

.auth-console[data-auth-diagnostics="false"] .auth-console-status,
.auth-console[data-auth-diagnostics="false"] .auth-console-meta {
  display: none;
}

/* ── Brand block ─────────────────────────────────────────────────── */
.auth-console-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.auth-console-logo {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  border: 1px solid var(--erp-border-gold-hairline);
  background:
    linear-gradient(145deg, rgba(243, 156, 18, 0.16), rgba(142, 107, 27, 0.08)),
    linear-gradient(180deg, rgba(10, 14, 22, 0.92), rgba(8, 12, 19, 0.78));
  display: grid;
  place-items: center;
  color: var(--erp-gold-light);
  font-family: var(--erp-font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 199, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.auth-console-logo--image {
  background: rgba(255, 244, 214, 0.96);
  padding: 0;
}

.auth-console-logo--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.auth-console-brand-text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.auth-console-eyebrow {
  margin: 0;
  font-family: var(--erp-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--auth-text-faint);
}

.auth-console-name {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--auth-text);
  text-wrap: balance;
  word-break: break-word;
}

.auth-console-tagline {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--auth-text-dim);
}

/* ── Status row ──────────────────────────────────────────────────── */
.auth-console-status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--erp-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--auth-text-faint);
}

.auth-console-pulse {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  border: 1px solid var(--erp-border-gold-hairline);
  border-radius: 999px;
  background: rgba(243, 156, 18, 0.08);
  color: var(--erp-gold-light);
}

.auth-console-pulse-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--auth-tenant-accent);
  box-shadow: 0 0 10px var(--auth-tenant-accent);
  animation: auth-pulse 2.4s ease-in-out infinite;
}

.auth-console-divider {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--auth-hairline-strong), transparent);
}

.auth-console-status-meta {
  font-weight: 600;
  color: var(--auth-text-dim);
}

/* ── Meta list (key/value system facts) ──────────────────────────── */
.auth-console-meta {
  margin: 0;
  display: grid;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--erp-border-gold-hairline);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 22, 34, 0.78), rgba(10, 15, 25, 0.6));
}

.auth-console-meta-row {
  display: grid;
  grid-template-columns: minmax(7rem, 30%) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.85rem;
}

.auth-console-meta dt {
  margin: 0;
  font-family: var(--erp-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--auth-text-faint);
}

.auth-console-meta dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--auth-text);
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

/* ── Notice (tenant welcome message) ─────────────────────────────── */
.auth-console-notice {
  display: grid;
  gap: 0.32rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--auth-hairline-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(243, 156, 18, 0.12), rgba(120, 81, 18, 0.06));
}

.auth-console-notice-label {
  margin: 0;
  font-family: var(--erp-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--erp-gold-light);
}

.auth-console-notice-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--auth-text);
}

/* ── Support contact ─────────────────────────────────────────────── */
.auth-console-contact {
  display: grid;
  gap: 0.32rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--erp-border-gold-hairline);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13, 18, 28, 0.7), rgba(8, 12, 19, 0.5));
}

.auth-console-contact-label {
  margin: 0;
  font-family: var(--erp-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--auth-text-faint);
}

.auth-console-contact-body {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.85rem;
  font-size: 0.9rem;
  color: var(--auth-text);
}

.auth-console-contact-name {
  font-weight: 600;
}

.auth-console-contact-phone {
  font-family: var(--erp-font-mono);
  letter-spacing: 0.04em;
  color: var(--auth-text-dim);
  font-variant-numeric: tabular-nums;
}

.auth-console-foot {
  margin: auto 0 0 0;
  padding-top: 1rem;
  font-family: var(--erp-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--auth-text-faint);
  border-top: 1px solid var(--erp-border-gold-hairline);
}

/* ── Form pane ───────────────────────────────────────────────────── */
.auth-shell-form-split {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  order: 1;
}

.auth-brand-panel {
  order: 2;
}

.auth-brand-panel-brand {
  display: none;
}

.auth-shell-form-split .auth-card,
.auth-card-split {
  position: relative;
  width: min(100%, 460px);
  min-height: auto;
  height: auto;
}

/* ── Entrance: single rhythm across both panes ───────────────────── */
.auth-shell-form-split .auth-card,
.auth-shell-split .auth-brand-panel > * {
  animation: auth-rise 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-shell-form-split .auth-card { animation-delay: 40ms; }
.auth-shell-split .auth-brand-panel > * { animation-delay: 120ms; }

/* ── Responsive: tablet & mobile ─────────────────────────────────── */
@media (max-width: 1199.98px) {
  .auth-shell-split {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 1.5rem;
  }

  .auth-brand-panel {
    border-left: 0;
    border-top: 1px solid var(--erp-border-gold-hairline);
    padding: clamp(1.25rem, 4vw, 2rem);
    gap: 1rem;
  }

  .auth-console {
    max-width: none;
    gap: 1rem;
  }

  .auth-console-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  .auth-console-name {
    font-size: clamp(1.25rem, 4vw, 1.55rem);
  }

  /* Tablet: collapse the heavy meta list to a single status strip; the
   * notice / contact stay because they carry tenant content. The detail
   * fields (environment / entry path) duplicate info the user does not
   * need before logging in. */
  .auth-console-tagline,
  .auth-console-meta,
  .auth-console-foot {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .auth-brand-panel {
    padding: 1rem 1rem 0.85rem;
  }

  .auth-console-brand {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
  }

  .auth-console-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .auth-console-notice,
  .auth-console-contact {
    padding: 0.7rem 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-shell-split .auth-brand-panel > *,
  .auth-shell-form-split .auth-card {
    animation: none !important;
  }

  .auth-console-pulse-dot {
    animation: none !important;
  }
}

/* ─── Section M: tenant public entry (/t/{code}) orchestrated reveal ──────
 * TenantHome renders in the minimal shell but its body is an .erp-page card
 * stack (not .auth-card), so Section I's reveal never reached it — the page
 * body popped in fully formed while only the layout brand lockup rose.
 * Slice tenant-portal-entry-motion (user-ratified A+C): reuse the house
 * auth-rise rhythm for the 4 body blocks (page-head → context strip →
 * pre-login card → action card), then one gold sweep across the tenant
 * brand mark after its host block has settled. Selectors stay .auth-*
 * prefixed (C6) and each matches markup in
 * Views/TenantPortal/TenantHome.cshtml (Rule 3). */
.auth-entry-reveal {
  animation: auth-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-entry-reveal--1 { animation-delay: 140ms; }
.auth-entry-reveal--2 { animation-delay: 240ms; }
.auth-entry-reveal--3 { animation-delay: 340ms; }
.auth-entry-reveal--4 { animation-delay: 440ms; }

/* overflow is redundant when paired with -image (which already clips) but
 * guards a future non-image application of --shimmer — the plain gradient
 * tile doesn't clip and the sweep must not bleed past the 14px radius.
 * ::after is taken by the inner hairline frame, so the sweep rides ::before;
 * isolation confines its z-index to this element's own stacking context. */
.auth-brand-mark--shimmer {
  overflow: hidden;
  isolation: isolate;
}

.auth-brand-mark--shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(var(--erp-rgb-gold-light), 0.45) 50%,
    transparent 68%
  );
  transform: translateX(-130%);
  animation: auth-gold-sweep 900ms ease-out 820ms 1 both;
  pointer-events: none;
}

@keyframes auth-gold-sweep {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-entry-reveal,
  .auth-brand-mark--shimmer::before {
    /* Sweep base transform parks the band off-canvas; with animation off it
     * simply never enters, so no static gold streak is left behind. */
    animation: none !important;
  }
}