/* The sign-in page. Tokens are Palette B from src/styles/tokens.css (owner, 2026-10-13), copied
   by value because this page loads nothing from the app bundle. Light mode is all white. */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/login/fonts/outfit-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/login/fonts/outfit-latin-600-normal.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --page: #FFFFFF;
  --card: #FFFFFF;
  --card-ring: rgba(11, 37, 69, 0.07);
  --card-shadow: 0 1px 2px rgba(11, 37, 69, 0.06), 0 12px 40px rgba(11, 37, 69, 0.08);
  --dot: rgba(11, 37, 69, 0.10);
  --glow: 0.10;
  --text-title: #0B2545;
  --text-secondary: #3C5070;
  --cta: #1A62D6;
  --cta-hover: #1553B8;
  --cta-pressed: #11469C;
  --cta-text: #FFFFFF;
  --focus: #1A62D6;
  --focus-halo: rgba(26, 98, 214, 0.25);
  --note-bg: #E8F0FC;
  --note-text: #1553B8;
  --warn-bg: #FAEDDB;
  --warn-text: #8A5A05;
  --logo-light: block;
  --logo-dark: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0A111E;
    --card: #131E33;
    --card-ring: rgba(255, 255, 255, 0.06);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 48px rgba(0, 0, 0, 0.40);
    --dot: rgba(145, 162, 189, 0.16);
    --glow: 0.12;
    --text-title: #F2F6FC;
    --text-secondary: #B5C3D9;
    --cta: #2F6FDE;
    --cta-hover: #255FC9;
    --cta-pressed: #1F51AD;
    --focus: #6EA8FF;
    --focus-halo: rgba(110, 168, 255, 0.30);
    --note-bg: rgba(110, 168, 255, 0.16);
    --note-text: #A3C7FF;
    --warn-bg: rgba(245, 190, 92, 0.14);
    --warn-text: #F5BE5C;
    --logo-light: none;
    --logo-dark: block;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0A111E;
  --card: #131E33;
  --card-ring: rgba(255, 255, 255, 0.06);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 48px rgba(0, 0, 0, 0.40);
  --dot: rgba(145, 162, 189, 0.16);
  --glow: 0.12;
  --text-title: #F2F6FC;
  --text-secondary: #B5C3D9;
  --cta: #2F6FDE;
  --cta-hover: #255FC9;
  --cta-pressed: #1F51AD;
  --focus: #6EA8FF;
  --focus-halo: rgba(110, 168, 255, 0.30);
  --note-bg: rgba(110, 168, 255, 0.16);
  --note-text: #A3C7FF;
  --warn-bg: rgba(245, 190, 92, 0.14);
  --warn-text: #F5BE5C;
  --logo-light: none;
  --logo-dark: block;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text-secondary);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A dot grid that fades out from the center, and the node mark's gradient as a soft glow
   behind the card. Both are decoration on the page ground and carry no content. */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
}
body::after {
  background:
    radial-gradient(420px 300px at calc(50% - 160px) 58%, rgba(97, 212, 59, var(--glow)), transparent 70%),
    radial-gradient(460px 320px at 50% 44%, rgba(36, 189, 150, var(--glow)), transparent 70%),
    radial-gradient(420px 300px at calc(50% + 170px) 60%, rgba(17, 169, 230, var(--glow)), transparent 70%);
  filter: blur(24px);
}

.signin {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px 64px;
}

.signin-brand { margin-bottom: 28px; }
.logo { width: 232px; height: auto; }
.logo-light { display: var(--logo-light); }
.logo-dark { display: var(--logo-dark); }

.signin-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 40px 36px 36px;
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--card-ring), var(--card-shadow);
  overflow: hidden;
}
/* The node mark's three greens and blues as a hairline across the top of the card. */
.signin-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #11A9E6 0%, #24BD96 52%, #61D43B 100%);
}

h1 {
  margin: 0;
  color: var(--text-title);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.signin-lead {
  margin: 8px 0 0;
  font-size: 15px;
}

.signin-status:has(.state:not([hidden])) { margin-top: 20px; }
.state {
  margin: 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45;
  background: var(--note-bg);
  color: var(--note-text);
}
.state[hidden] { display: none; }
.state[data-state="expired"] { background: var(--warn-bg); color: var(--warn-text); }

.signin-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--cta);
  color: var(--cta-text);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.signin-button:hover { background: var(--cta-hover); }
.signin-button:active { background: var(--cta-pressed); }
.signin-button:focus { outline: none; }
.signin-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}
/* The Microsoft logo sits on its own white tile, so its four colors read on either theme. */
.ms-logo {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 5px;
  background: #FFFFFF;
}

@media (max-width: 480px) {
  .signin { padding: 32px 16px 48px; }
  .logo { width: 200px; }
  .signin-card { padding: 32px 24px 28px; border-radius: 14px; }
  h1 { font-size: 22px; }
}

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

@media (forced-colors: active) {
  .signin-button { border: 2px solid ButtonText; }
  .signin-card { border: 1px solid CanvasText; }
}

/* Product selection happens in the blocking head script, before the body can paint. */
.imi-brand { display: none; }
:root[data-login-brand="imi"] .cc-brand { display: none; }
:root[data-login-brand="imi"] .imi-brand { display: block; }
:root[data-login-brand="imi"] .signin-brand .logo { width:auto; height:120px; max-width:100%; object-fit:contain; object-position:left center; }
@media (max-width:480px) { :root[data-login-brand="imi"] .signin-brand .logo { height:96px; } }
/* Owner 2026-11-04: the animated Aria Intelligence logo plays one loop on sign-in and signed-out, then holds.
   Reduced motion: the still logo, no animation. Each pair still follows the light/dark switch above. */
:root[data-login-brand="imi"] .signin-brand .logo-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  :root[data-login-brand="imi"] .signin-brand .logo-anim { display: none; }
  :root[data-login-brand="imi"] .signin-brand .logo-still.logo-light { display: var(--logo-light); }
  :root[data-login-brand="imi"] .signin-brand .logo-still.logo-dark { display: var(--logo-dark); }
}
/* Owner 2026-11-04: "make the gif the same width as the login card". The brand block takes the card's width
   (max 400px, full width on phones) and the logo fills it; the animation is cropped to its artwork. */
:root[data-login-brand="imi"] .signin-brand.imi-brand { width: 100%; max-width: 400px; }
:root[data-login-brand="imi"] .signin-brand.imi-brand .logo { width: 100%; height: auto; max-width: none; }