/* Bella Vou Connect — sign-in screen (the login wall before Connect / Concepts).
 * Materialises the design-system SignIn component (warm split layout: espresso
 * brand panel + Microsoft 365 SSO card). Built on the Bella Vou Design System
 * tokens (/assets/ds/tokens.css — served anonymously so this gate page can style
 * before sign-in). Self-contained external stylesheet → CSP-clean; fonts from the
 * approved Google CDN (web-standards §2). */

.signin { display: flex; min-height: 100vh; }

/* ── Brand panel ─────────────────────────────────────────── */
.signin__brand {
  flex: 1 1 0; background: var(--surface-dark); color: var(--text-on-dark); position: relative; overflow: hidden;
  padding: var(--sp-16) var(--sp-16) var(--sp-12); display: flex; flex-direction: column; justify-content: space-between;
}
.signin__brand::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 80% 0%, rgba(176,138,82,.18), transparent 60%);
}
.signin__logo { position: relative; height: 48px; width: auto; max-width: 70%; object-fit: contain; align-self: flex-start; }
.signin__brand-mid { position: relative; }
.signin__eyebrow { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--bv-gold-light); }
.signin__brand-mid h1 { font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(34px, 5vw, 46px); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--text-on-dark); margin: var(--sp-4) 0 0; max-width: 14ch; }
.signin__foot { position: relative; font-size: var(--fs-caption); color: var(--text-on-dark-soft); }

/* ── Sign-in card ────────────────────────────────────────── */
.signin__form { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: var(--sp-10); }
.signin__card { width: 100%; max-width: 360px; }
.signin__card .kicker { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-secondary); }
.signin__card h2 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h2); color: var(--text-strong); margin: var(--sp-3) 0 var(--sp-2); letter-spacing: var(--ls-heading); }
.signin__card p { font-weight: var(--fw-light); font-size: var(--fs-body); color: var(--text-secondary); line-height: var(--lh-body); margin: 0; }

.signin__btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3); width: 100%;
  margin-top: var(--sp-7, 28px); padding: 15px var(--sp-5); cursor: pointer; text-decoration: none;
  background: var(--surface-dark); color: var(--text-on-dark); border: none; border-radius: var(--r-sm);
  font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body-sm); letter-spacing: .04em;
  transition: transform var(--dur-fast) var(--ease);
}
.signin__btn:hover { transform: var(--lift); }
.signin__btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.signin__secure { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-7, 28px); color: var(--text-muted); font-size: 12.5px; font-weight: var(--fw-light); }
.signin__secure svg { flex: none; }
.signin__help { font-weight: var(--fw-light); font-size: var(--fs-caption); color: var(--text-muted); line-height: var(--lh-body); margin-top: var(--sp-6); }

@media (max-width: 820px) {
  .signin__brand { display: none; }
}