/* ═══════════════════════════════════════════════════════════
   BUVA — Sign-in / request-access layout  (auth-login.css)
   Loaded after auth.css by auth/login.html and auth/register.html.
   auth.css still owns the form controls; this file owns the
   full-height split layout and matches the controls to the landing page.
   ═══════════════════════════════════════════════════════════ */

.lg-body {
  /* Swap the app's cool greys for the warm ones the landing page uses, so
     the borders, toggle track and panels read as the same product. Scoped
     here, so the other auth pages and the workspace are untouched. */
  --clr-border:        var(--ui-border);
  --clr-border-strong: var(--ui-border-strong);
  --clr-bg-section:    var(--ui-bg-warm);
  --clr-bg-alt:        var(--ui-bg-soft);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--clr-bg);
}

/* ── Left: brand panel ───────────────────────────────────── */
.lg-aside {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px, 3.6vw, 48px) clamp(28px, 4.4vw, 64px);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(155deg, #9b1712 0%, #7c120f 42%, #3d0a08 100%);
}
.lg-aside-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lg-aside-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(42% 38% at 88% 8%, rgba(240,162,59,.30), transparent 70%),
    radial-gradient(50% 45% at 0% 100%, rgba(194,65,58,.45), transparent 70%);
}
.lg-aside-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(75% 65% at 40% 45%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(75% 65% at 40% 45%, #000, transparent 80%);
}

.lg-aside-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lg-aside-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.lg-aside-logo { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.14); }
.lg-aside-brand span { font-family: var(--ff-display); font-weight: 800; font-size: 21px; letter-spacing: .02em; }

.lg-role-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}
.lg-role-tag i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.22); }

.lg-aside-mid { max-width: 520px; }
.lg-aside-title {
  margin: 0;
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(28px, 3.1vw, 42px); line-height: 1.08; letter-spacing: -.025em;
  text-wrap: balance;
}
.lg-aside-sub { margin: 12px 0 0; max-width: 440px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.76); }

/* Preview cards — only the one matching [data-role] is shown. */
.lg-preview { position: relative; display: grid; margin-top: clamp(22px, 3vh, 34px); padding-bottom: 22px; }
.lg-card {
  grid-area: 1 / 1;
  color: var(--clr-ink);
  background: rgba(255,255,255,.97);
  border-radius: 16px;
  padding: 16px 18px 12px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.4);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.lg-aside[data-role="member"] .lg-card-admin,
.lg-aside[data-role="admin"]  .lg-card-member {
  opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none;
}
.lg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lg-card-title { font-family: var(--ff-display); font-weight: 700; font-size: 15px; }
.lg-card-meta { font-size: 12px; font-weight: 600; color: var(--clr-muted); }
.lg-card-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #15803d; }
.lg-card-live i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }

.lg-progress { margin-top: 10px; height: 6px; border-radius: 99px; background: #f1e9e7; overflow: hidden; }
.lg-progress i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c120f, #f0a23b); }

.lg-tasks, .lg-feed { list-style: none; margin: 8px 0 0; padding: 0; }
.lg-tasks li, .lg-feed li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px dashed var(--clr-border);
  font-size: 13px;
}
.lg-tasks li:first-child, .lg-feed li:first-child { border-top: 0; }
.lg-task { flex: 1; min-width: 0; font-weight: 500; color: var(--clr-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.lg-dot-done  { background: #16a34a; }
.lg-dot-prog  { background: #2563eb; }
.lg-dot-carry { background: #c2413a; }
.lg-pill { flex: none; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.lg-pill-done  { color: #15803d; background: #dcfce7; }
.lg-pill-prog  { color: #1d4ed8; background: #dbeafe; }
.lg-pill-carry { color: #9b1712; background: #fdecea; }

.lg-feed p { flex: 1; min-width: 0; margin: 0; color: var(--clr-ink-2); line-height: 1.4; }
.lg-feed b { color: var(--clr-ink); font-weight: 700; }
.lg-feed em { font-style: normal; font-weight: 600; color: var(--clr-ink); }
.lg-feed time { flex: none; font-size: 11px; color: var(--clr-subtle); }
.lg-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }
.lg-av-1 { background: #9b1712; }
.lg-av-2 { background: #2563eb; }
.lg-av-3 { background: #d97706; }

.lg-chip-float {
  position: absolute; right: -10px; bottom: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--clr-ink);
  background: #fff; border-radius: 999px; padding: 6px 14px 6px 6px;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.45);
  animation: lgBob 6s ease-in-out infinite;
}
.lg-chip-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #229ed9; }
@keyframes lgBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.lg-points {
  list-style: none; margin: clamp(18px, 2.6vh, 28px) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
}
.lg-points li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.9); }
.lg-points svg { flex: none; width: 16px; height: 16px; margin-top: 1px; padding: 2px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.16); }

.lg-aside-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lg-aside-foot .login-tz { margin: 0; }
.lg-aside-badge { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* "How access works" tracker (register page). [data-step] on the aside
   marks the current stage; earlier stages show as done. */
.lg-steps { list-style: none; margin: 10px 0 2px; padding: 0; counter-reset: none; }
.lg-steps li { position: relative; display: flex; gap: 12px; padding: 8px 0; }
.lg-steps li + li::before {
  content: ""; position: absolute; left: 11px; top: -8px; height: 16px; width: 2px;
  background: var(--clr-border);
}
.lg-step-mark {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--clr-muted);
  background: #fff; border: 2px solid var(--clr-border-strong);
}
.lg-steps li[data-n="1"] .lg-step-mark::before { content: "1"; }
.lg-steps li[data-n="2"] .lg-step-mark::before { content: "2"; }
.lg-steps li[data-n="3"] .lg-step-mark::before { content: "3"; }
.lg-steps li[data-n="4"] .lg-step-mark::before { content: "4"; }
.lg-steps b { display: block; font-size: 13.5px; color: var(--clr-ink); line-height: 1.3; }
.lg-steps span:not(.lg-step-mark) { display: block; font-size: 12px; color: var(--clr-muted); line-height: 1.45; }

/* Current step */
.lg-aside[data-step="1"] .lg-steps li[data-n="1"] .lg-step-mark,
.lg-aside[data-step="2"] .lg-steps li[data-n="2"] .lg-step-mark,
.lg-aside[data-step="3"] .lg-steps li[data-n="3"] .lg-step-mark,
.lg-aside[data-step="4"] .lg-steps li[data-n="4"] .lg-step-mark {
  color: #fff; background: #9b1712; border-color: #9b1712;
  box-shadow: 0 0 0 4px rgba(155,23,18,.14);
}
/* Finished steps: every step before data-step. (data-step="5" = all done.) */
.lg-aside[data-step="2"] .lg-steps li[data-n="1"] .lg-step-mark,
.lg-aside[data-step="3"] .lg-steps li[data-n="1"] .lg-step-mark,
.lg-aside[data-step="3"] .lg-steps li[data-n="2"] .lg-step-mark,
.lg-aside[data-step="4"] .lg-steps li[data-n="1"] .lg-step-mark,
.lg-aside[data-step="4"] .lg-steps li[data-n="2"] .lg-step-mark,
.lg-aside[data-step="4"] .lg-steps li[data-n="3"] .lg-step-mark,
.lg-aside[data-step="5"] .lg-steps li[data-n="1"] .lg-step-mark,
.lg-aside[data-step="5"] .lg-steps li[data-n="2"] .lg-step-mark,
.lg-aside[data-step="5"] .lg-steps li[data-n="3"] .lg-step-mark,
.lg-aside[data-step="5"] .lg-steps li[data-n="4"] .lg-step-mark {
  color: #fff; background: #16a34a; border-color: #16a34a;
}
.lg-aside[data-step="2"] .lg-steps li[data-n="1"] .lg-step-mark::before,
.lg-aside[data-step="3"] .lg-steps li[data-n="1"] .lg-step-mark::before,
.lg-aside[data-step="3"] .lg-steps li[data-n="2"] .lg-step-mark::before,
.lg-aside[data-step="4"] .lg-steps li[data-n="1"] .lg-step-mark::before,
.lg-aside[data-step="4"] .lg-steps li[data-n="2"] .lg-step-mark::before,
.lg-aside[data-step="4"] .lg-steps li[data-n="3"] .lg-step-mark::before,
.lg-aside[data-step="5"] .lg-steps li[data-n="1"] .lg-step-mark::before,
.lg-aside[data-step="5"] .lg-steps li[data-n="2"] .lg-step-mark::before,
.lg-aside[data-step="5"] .lg-steps li[data-n="3"] .lg-step-mark::before,
.lg-aside[data-step="5"] .lg-steps li[data-n="4"] .lg-step-mark::before { content: "\2713"; }
.lg-aside[data-step="2"] .lg-steps li[data-n="1"] + li::before,
.lg-aside[data-step="3"] .lg-steps li[data-n="1"] + li::before,
.lg-aside[data-step="3"] .lg-steps li[data-n="2"] + li::before,
.lg-aside[data-step="4"] .lg-steps li[data-n="1"] + li::before,
.lg-aside[data-step="4"] .lg-steps li[data-n="2"] + li::before,
.lg-aside[data-step="4"] .lg-steps li[data-n="3"] + li::before,
.lg-aside[data-step="5"] .lg-steps li[data-n="1"] + li::before,
.lg-aside[data-step="5"] .lg-steps li[data-n="2"] + li::before,
.lg-aside[data-step="5"] .lg-steps li[data-n="3"] + li::before,
.lg-aside[data-step="5"] .lg-steps li[data-n="4"] + li::before { background: #16a34a; }

.lg-aside-note { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.78); }
.lg-aside-note svg { color: #4ade80; }

/* Short laptop screens: keep everything above the fold. */
@media (max-height: 760px) and (min-width: 961px) {
  .lg-aside-sub { display: none; }
  .lg-tasks li:nth-child(3), .lg-feed li:nth-child(3) { display: none; }
  .lg-points { display: none; }
  .lg-steps span:not(.lg-step-mark) { display: none; }
}

/* ── Right: form side ────────────────────────────────────── */
.lg-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(60% 40% at 100% 0%, rgba(124,18,15,.05), transparent 70%),
    var(--clr-bg);
}
.lg-topbar {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: clamp(18px, 2.4vw, 28px) clamp(20px, 4vw, 48px);
}
.lg-topbar-brand { display: none; align-items: center; gap: 9px; margin-right: auto; text-decoration: none; }
/* Same size as the landing navbar's brand. */
.lg-topbar-brand img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.lg-topbar-brand span { font-family: var(--ff-display); font-weight: 800; font-size: 20px; letter-spacing: .02em; color: var(--clr-primary); }

/* The landing page's secondary (ghost) button. */
.lg-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: var(--ui-btn-weight); color: var(--clr-ink); text-decoration: none;
  padding: 10px 16px; border-radius: var(--ui-btn-radius); border: 1px solid var(--ui-border-strong);
  background: #fff; box-shadow: var(--ui-shadow-sm);
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.lg-back:hover { color: var(--clr-primary); border-color: #c2413a; }
.lg-back svg { transition: transform .2s var(--ui-ease); }
.lg-back:hover svg { transform: translateX(-3px); }

.lg-form-wrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 12px clamp(20px, 5vw, 56px) 32px;
}
.lg-form-inner { max-width: 400px; }
.lg-form-inner .split-form-header h1 { font-size: clamp(28px, 2.6vw, 34px); letter-spacing: -.02em; }

.lg-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lg-forgot { font-size: 13px; font-weight: 600; color: var(--clr-primary); text-decoration: none; }
.lg-forgot:hover { text-decoration: underline; }

/* ── Controls, matched to the landing page ─────────────────
   Primary button: the landing page's large primary button. */
.lg-body .btn-primary {
  height: 48px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: var(--ui-btn-weight);
  border-radius: var(--ui-btn-radius-lg);
  background: var(--ui-btn-primary-bg);
  box-shadow: var(--ui-btn-primary-shadow);
  transition: box-shadow .2s, transform .2s var(--ui-ease);
}
.lg-body .btn-primary:hover { opacity: 1; transform: translateY(-1px); box-shadow: var(--ui-btn-primary-shadow-hover); }
.lg-body .btn-primary:active { transform: translateY(0); box-shadow: var(--ui-btn-primary-shadow); }
.lg-body .btn-primary:disabled { opacity: .65; transform: none; box-shadow: none; }
.lg-body .btn-primary .btn-arrow { transition: transform .2s var(--ui-ease); }

/* Inputs share the button's corner so the form reads as one set. */
.lg-body .form-field input { border-radius: var(--ui-btn-radius-lg); border-width: 1px; }
.lg-body .form-field input:hover:not(:focus) { border-color: #c9b5b1; }

/* Toggle: warm track, like the landing navbar's active link. */
.lg-body .role-switch { border-radius: var(--ui-btn-radius-lg); }

/* One keyboard focus ring for every link and button, as on the landing page. */
.lg-body a:focus-visible,
.lg-body button:focus-visible {
  outline: var(--ui-focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}
.lg-body .btn-primary:focus-visible { border-radius: var(--ui-btn-radius-lg); }

.lg-secure {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--clr-border);
  font-size: 12.5px; line-height: 1.5; color: var(--clr-muted); text-align: center;
  text-wrap: balance;
}
.lg-secure svg { display: inline-block; vertical-align: -2px; margin-right: 5px; color: #16a34a; }

.lg-footer {
  display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap;
  padding: 18px clamp(20px, 4vw, 48px) 22px;
  font-size: 12.5px; color: var(--clr-subtle);
}
.lg-footer p { margin: 0; }

/* ── Request-access form extras ──────────────────────────── */
/* Admin notice: a calm callout rather than a fine-print line. */
.lg-callout {
  display: flex; align-items: flex-start; gap: 10px;
  margin: -6px 0 18px; padding: 12px 14px;
  font-size: 13px; line-height: 1.5; color: #7c2d12;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--ui-btn-radius);
}
.lg-callout svg { flex: none; margin-top: 1px; color: #c2410c; }

.lg-body .field-note { color: var(--clr-muted); }
.lg-body .field-note svg { color: var(--clr-subtle); }

.lg-pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.lg-pw-meter i { height: 4px; border-radius: 99px; background: var(--clr-border); transition: background .2s; }
.lg-pw-meter[data-level="1"] i:nth-child(-n+1) { background: #dc2626; }
.lg-pw-meter[data-level="2"] i:nth-child(-n+2) { background: #d97706; }
.lg-pw-meter[data-level="3"] i:nth-child(-n+3) { background: #65a30d; }
.lg-pw-meter[data-level="4"] i               { background: #16a34a; }
.lg-pw-label, .lg-pw-match { margin: 4px 2px 0; font-size: 12px; line-height: 1.45; color: var(--clr-muted); }
.lg-pw-match:empty { display: none; }
.lg-pw-match[data-state="ok"]  { color: #15803d; }
.lg-pw-match[data-state="bad"] { color: #b45309; }

/* Secondary button (e.g. "Resend verification email"). auth.css never
   defined .btn-outline, so it rendered as a bare browser button. This is
   the landing page's ghost button. */
.lg-body .btn-outline {
  height: 46px; padding: 0 18px;
  font-size: 14px; font-weight: var(--ui-btn-weight); color: var(--clr-ink);
  background: #fff; border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-btn-radius-lg); box-shadow: var(--ui-shadow-sm);
  transition: color .2s, border-color .2s;
}
.lg-body .btn-outline:hover:not(:disabled) { color: var(--clr-primary); border-color: #c2413a; }

/* Outcome panel after submitting. */
.lg-body .register-success-panel { padding-top: 0; }
.lg-body .register-resend { max-width: none; }
.lg-body .register-success-body { max-width: 360px; }
.lg-body .register-success-heading { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.lg-body .register-success-panel .btn-primary { margin-top: 4px; height: 48px; border-radius: var(--ui-btn-radius-lg); }
.lg-body .register-success-panel .btn-primary:hover { opacity: 1; }
.lg-body .register-delivery-note { background: var(--ui-bg-soft); border-color: var(--ui-border); border-radius: var(--ui-btn-radius); }

/* Verify email: the confirmed address, echoed back as a chip. */
.lg-echo { margin: -6px 0 0; }
.lg-echo .register-echo-email {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  font-size: 14px; background: var(--ui-bg-warm); border: 1px solid var(--ui-border);
}

/* Verify email: "What happens next" — the left panel's tracker, restated on
   the form side because phones never see the left panel. */
.lg-next {
  list-style: none; margin: 4px 0 0; padding: 14px 16px; width: 100%;
  text-align: left; background: var(--ui-bg-soft); border: 1px solid var(--ui-border);
  border-radius: var(--ui-btn-radius-lg);
}
.lg-next li { position: relative; display: flex; gap: 12px; padding: 7px 0; }
.lg-next li + li::before {
  content: ""; position: absolute; left: 10px; top: -7px; height: 14px; width: 2px;
  background: var(--clr-border-strong);
}
.lg-next li.is-done + li::before { background: #16a34a; }
.lg-next-mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: #fff; border: 2px solid var(--clr-border-strong); color: var(--clr-muted);
}
.lg-next li.is-done .lg-next-mark { background: #16a34a; border-color: #16a34a; color: #fff; }
.lg-next li.is-done .lg-next-mark::before { content: "\2713"; }
.lg-next li.is-now .lg-next-mark { background: #9b1712; border-color: #9b1712; box-shadow: 0 0 0 4px rgba(155,23,18,.14); }
.lg-next li.is-now .lg-next-mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.lg-next b { display: block; font-size: 13.5px; line-height: 1.35; color: var(--clr-ink); }
.lg-next span:not(.lg-next-mark) { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.5; color: var(--clr-muted); }

/* A form inside a result panel (verify email: "send a fresh link"). */
.lg-panel-form { width: 100%; text-align: left; margin-top: 4px; }

/* "Checking your link…" state on reset / verify. */
.lg-body .reset-checking { min-height: 260px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1180px) {
  .lg-points { grid-template-columns: 1fr; }
}

/* Below this the panel would squeeze the form, so it goes and the brand
   moves into the top bar. */
@media (max-width: 960px) {
  .lg-body { grid-template-columns: 1fr; }
  .lg-aside { display: none; }
  .lg-topbar-brand { display: inline-flex; }
  /* Phones scroll; start the form under the top bar instead of centring it. */
  .lg-form-wrap { align-items: flex-start; padding-top: clamp(8px, 4vh, 40px); }
  .lg-main {
    background:
      radial-gradient(80% 30% at 50% 0%, rgba(124,18,15,.07), transparent 70%),
      var(--clr-bg);
  }
}

@media (max-width: 480px) {
  .lg-back { padding: 7px 10px; font-size: 13px; }
  .lg-footer { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-chip-float { animation: none; }
  .lg-card { transition: none; }
}