/* @dr-logic-ltd/design-system — estate sign-in kit (framework-agnostic).
 *
 * A self-contained stylesheet for an estate-consistent sign-in surface: the auth
 * card, single-sign-on provider buttons (Google / email), an "or" divider, and the
 * "Powered by Dr Logic Innovation" credit. Every value references a design token
 * with a HARDCODED FALLBACK, so this file drops into a plain static/no-build app
 * (e.g. Deal Room) with no other CSS — while automatically picking up the real
 * tokens when `@dr-logic-ltd/design-tokens/css` is also present.
 *
 * Usage (React or vanilla):
 *   <link rel="stylesheet" href=".../styles/signin.css">
 *   <div class="drl-signin">
 *     <div class="drl-signin__card">
 *       <img class="drl-signin__logo" src="..." alt="...">
 *       <h2 class="drl-signin__title">Sign in</h2>
 *       <p class="drl-signin__sub">Use your Dr Logic account.</p>
 *       <div class="drl-sso">
 *         <button class="drl-sso-btn drl-sso-btn--google" type="button">
 *           <span class="drl-sso-btn__icon" aria-hidden="true"></span>Continue with Google
 *         </button>
 *         <button class="drl-sso-btn" type="button">Sign in with email</button>
 *       </div>
 *       <a class="drl-powered-by" href="https://drlogic.com/service/innovation/">
 *         <span class="drl-powered-by__label">Powered by</span>
 *         <img src=".../drlogic-innovation-black.png" alt="Dr Logic Innovation">
 *       </a>
 *     </div>
 *   </div>
 */

.drl-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 24px;
}

.drl-signin__card {
  width: 100%;
  max-width: 400px;
  padding: 40px;
  text-align: center;
  background: hsl(var(--card, 0 0% 100%));
  color: hsl(var(--card-foreground, 240 3% 12%));
  border: 1px solid hsl(var(--border, 240 5% 87%));
  border-radius: var(--radius, 0.75rem);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
}

.drl-signin__logo {
  height: 40px;
  width: auto;
  margin: 0 auto 24px;
  display: block;
}

.drl-signin__title {
  font-family: 'Kumbh Sans', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: hsl(var(--foreground, 240 3% 12%));
}

.drl-signin__sub {
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground, 240 4% 42%));
  margin: 0 0 24px;
}

.drl-sso {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

/* Provider button — neutral/outline by default (used for "email"); the --google and
 * --primary modifiers restyle it. */
.drl-sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md, 0.75rem);
  border: 1px solid hsl(var(--border, 240 5% 87%));
  background: hsl(var(--card, 0 0% 100%));
  color: hsl(var(--foreground, 240 3% 12%));
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  text-decoration: none;
}

.drl-sso-btn:hover {
  background: hsl(var(--muted, 240 5% 92%));
  border-color: hsl(var(--muted-foreground, 240 4% 42%) / 0.4);
}

.drl-sso-btn:focus-visible {
  outline: 2px solid hsl(var(--ring, 210 90% 44%));
  outline-offset: 2px;
}

.drl-sso-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Primary/filled variant (estate primary). */
.drl-sso-btn--primary {
  background: hsl(var(--primary, 210 90% 44%));
  border-color: hsl(var(--primary, 210 90% 44%));
  color: hsl(var(--primary-foreground, 0 0% 100%));
}
.drl-sso-btn--primary:hover {
  background: hsl(var(--primary-hover, 210 90% 37%));
  border-color: hsl(var(--primary-hover, 210 90% 37%));
}

/* Google: white button, coloured G glyph (embedded so no markup/asset is required). */
.drl-sso-btn--google {
  background: hsl(var(--card, 0 0% 100%));
  color: hsl(var(--foreground, 240 3% 12%));
  border-color: hsl(var(--border, 240 5% 87%));
}
.drl-sso-btn__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.drl-sso-btn--google .drl-sso-btn__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z'/%3E%3Cpath fill='%23FF3D00' d='M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z'/%3E%3C/svg%3E");
}

.drl-signin__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: hsl(var(--muted-foreground, 240 4% 42%));
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.drl-signin__divider::before,
.drl-signin__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: hsl(var(--border, 240 5% 87%));
}

.drl-signin__error {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 0.85rem;
  text-align: left;
  color: hsl(var(--destructive-foreground, 0 0% 100%));
  background: hsl(var(--destructive, 0 72% 45%));
  border-radius: var(--radius-sm, 0.5rem);
}

.drl-signin__hint {
  margin: 20px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground, 240 4% 42%));
}

/* "Powered by Dr Logic Innovation" credit — mirrors the <PoweredBy> React component.
 * Block-level centred flex row so it lays out reliably in a text-align:center card
 * (wrap the label in <span class="drl-powered-by__label">…</span>). */
.drl-powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 28px;
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: inherit;
  text-decoration: none;
  opacity: 0.6;
}
.drl-powered-by:hover { opacity: 0.85; text-decoration: none; }
.drl-powered-by__label { white-space: nowrap; }
.drl-powered-by img {
  height: 18px;
  width: auto;
  display: inline-block;
  margin: 0;
}