/* The gate's pages: sign-in landing, callback, errors, logout. The look is
   Watson Onboarding's public landing page (onboarding
   src/app/_components/PublicLanding.module.css), with plain class names.
   Everything is served by the gate itself; nothing loads from elsewhere. */

/* Manrope, variable (weights 200-800), Latin subset. SIL OFL 1.1: see
   manrope-OFL.txt next to this file. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('manrope-latin.woff2') format('woff2');
}

/* Watsonlaw Tools design tokens, the ones these pages use, copied as-is
   from onboarding src/styles/tokens.css (its local copy of the suite tokens;
   spec: onboarding docs/design/tools-suite-shell-audit/implementation-spec.md
   §5). Change them there first, then here. */
:root {
  --wl-navy: #0d1e4c;
  --wl-surface-card: #ffffff;
  --wl-cyan: #00bdd3;
  --wl-cyan-hover: #00aabe;
  --wl-focus-ring: 0 0 0 3px rgba(0, 189, 211, 0.1);
  --wl-text-strong: #0d1e4c;
  --wl-text-body: #333333;
  --wl-font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wl-title-roomy: 1.5rem;
  --wl-lead: 0.875rem;
  --wl-meta: 0.8125rem;
  --wl-s2: 0.5rem;
  --wl-s3: 0.75rem;
  --wl-s4: 1rem;
  --wl-s6: 1.5rem;
  --wl-s8: 2rem;
  --wl-s10: 2.5rem;
  --wl-s12: 3rem;
}

/* Superimputer's product accent: the same as Onboarding's (marijn), copied
   from [data-product='onboarding'] in onboarding src/styles/tokens.css. */
[data-product='superimputer'] {
  --wl-accent: #12808f;
  --wl-accent-ink: #0c5f6b;
  --wl-accent-on-navy: #5bc4d2;
}

/* .cta's display would otherwise beat the hidden attribute. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--wl-font-sans);
}

/* ── Non-production banner (bentangan template, "Staging banner") ──── */

.staging-banner {
  background: #e11d48;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.025em;
  padding: 0.375rem 1rem;
  text-align: center;
}

.staging-banner span {
  text-transform: none;
}

/* ── Two columns, stacked below 900px ──────────────────────────────── */

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

@media (max-width: 899px) {
  .page {
    flex-direction: column;
  }
}

/* ── Left brand panel (navy) ───────────────────────────────────────── */

.brand-panel {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--wl-s10);
  background: var(--wl-navy);
  color: #ffffff;
  padding: var(--wl-s12) var(--wl-s10);
}

@media (max-width: 899px) {
  .brand-panel {
    flex: none;
    padding: var(--wl-s8) var(--wl-s6);
  }
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--wl-s3);
}

.logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.lockup-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.watsonlaw {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.product-label {
  margin-top: 2px;
  font-size: var(--wl-meta);
  font-weight: 600;
  color: var(--wl-accent-on-navy);
}

.brand-copy {
  max-width: 26rem;
}

.headline {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 var(--wl-s4);
}

.support-copy {
  font-size: var(--wl-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

.brand-footer {
  font-size: var(--wl-meta);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* ── Right content panel (white) ───────────────────────────────────── */

.content-panel {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wl-surface-card);
  padding: var(--wl-s12) var(--wl-s10);
}

@media (max-width: 899px) {
  .content-panel {
    flex: none;
    padding: var(--wl-s8) var(--wl-s6) var(--wl-s10);
  }
}

.content-inner {
  width: 100%;
  max-width: 26rem;
}

.title {
  font-size: var(--wl-title-roomy);
  font-weight: 700;
  color: var(--wl-text-strong);
  letter-spacing: -0.01em;
  margin: 0 0 var(--wl-s3);
}

.lead {
  font-size: var(--wl-lead);
  line-height: 1.6;
  color: var(--wl-text-body);
  margin: 0 0 var(--wl-s8);
}

.features {
  list-style: none;
  margin: 0 0 var(--wl-s8);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wl-s4);
}

.features li {
  display: flex;
  align-items: flex-start;
  gap: var(--wl-s3);
  font-size: var(--wl-lead);
  line-height: 1.5;
  color: var(--wl-text-body);
}

.feature-marker {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--wl-accent);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--wl-s6);
  border-radius: 8px;
  background: var(--wl-cyan);
  color: #ffffff;
  font-family: inherit;
  font-size: var(--wl-lead);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.cta:hover {
  background: var(--wl-cyan-hover);
}

.cta:focus-visible {
  outline: none;
  box-shadow: var(--wl-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .cta {
    transition: none;
  }
}