/* The docs site's sign-in door, BOTH pages (/login and /login/action), in the forensic design system: oros-sdk s11-docs-site 39f6f41
   docs-site/deploy/SIGNIN-FORENSIC-SPEC.md (PREDICTIONS.md amendment 9). Loaded AFTER /login/theme/tokens.css, the room's own file copied
   byte for byte (S-14), so every colour below is a token by name or one of the spec's literals, named once here. Nothing is invented. */
:root {
  --door-card: rgba(19, 24, 32, .62);       /* SPEC §3 card surface */
  --door-field: rgba(19, 24, 32, .6);       /* SPEC §3 field surface */
  --door-body: #8b95a8;                     /* SPEC §3 body text */
  --door-icon: #7d8798;                     /* the field's leading icon (the two icon files carry it) */
  --door-cta-ink: #04122e;                  /* ctaPrimary's text (= --primary-foreground) */
  --door-chip-ink: #9aa4b5;                 /* ctaSecondary's text */
  --door-focus: 0 0 0 1px hsl(var(--primary)), 0 0 22px hsl(var(--primary) / .28);   /* focusSelected, the edge at full strength (spec Q2) */
  --door-font: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --door-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* an author `display` rule would otherwise outrank the attribute */
html, body { margin: 0; padding: 0; }
body { font-family: var(--door-font); font-size: 16px; line-height: 1.5; }   /* background + colour: tokens.css (the room's flat base, Q1 (a)) */

.page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.card { width: 90%; max-width: 448px; padding: 28px; border-radius: 16px; background: var(--door-card); border: 1px solid var(--hairline); }

/* the room's Brand lockup (docs-site src/chrome.tsx + theme/rhp/rhp.css .rh-brand / .rh-logo / .rh-brand-rule, src/site.css .sdk-docs-word) */
.brand { display: flex; align-items: center; justify-content: center; gap: 16px; }
.logo { display: block; height: 18px; width: auto; }
.logo.pd { height: 22px; }
.rule { display: block; width: 1px; height: 22px; background: hsl(var(--border) / .45); }
.docs-word { font: 500 11px/1 var(--door-mono); letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--muted-foreground)); white-space: nowrap; }

.header { margin-bottom: 24px; text-align: center; }
h1 { margin: 20px 0 0; font: 600 23px/1.25 var(--door-font); letter-spacing: -.02em; color: hsl(var(--foreground)); }
.sub { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--door-body); }

.form { display: flex; flex-direction: column; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field + .field { margin-top: 16px; }
.error { margin-bottom: 16px; border-radius: 12px; background: hsl(var(--destructive) / .08); border: 1px solid hsl(var(--destructive) / .32);
  padding: 10px 12px; font-size: 13px; line-height: 18px; color: hsl(var(--foreground)); }
.control { position: relative; }
.icon { position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; pointer-events: none; }
input { display: block; width: 100%; height: 44px; border-radius: 12px; background: var(--door-field); border: 1px solid var(--hairline);
  color: hsl(var(--foreground)); font: inherit; font-size: 16px; padding: 0 14px 0 40px; outline: none;
  transition: border-color .2s ease-out, box-shadow .2s ease-out; }
input.plain { padding-left: 14px; }
input:hover { border-color: var(--hairline-hover); }
input::placeholder { color: hsl(var(--muted-foreground)); }
input[aria-invalid="true"] { border-color: hsl(var(--destructive)); }
input:focus-visible { outline: none; border-color: hsl(var(--primary)); box-shadow: var(--door-focus); }
.hint { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: hsl(var(--muted-foreground)); }

/* a text link: no fill, no border (design's census reads appearance) */
.row { display: flex; justify-content: flex-end; margin-top: 12px; }
.link { background: none; border: 0; padding: 0; font: 400 13px/18px var(--door-font); color: hsl(var(--interactive)); cursor: pointer; text-decoration: none; border-radius: 4px; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link:focus-visible { outline: none; box-shadow: var(--door-focus); }

/* the primary: ctaPrimary (SPEC §6, FORENSIC_CTA.filled + pill) */
.primary { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: 20px; border-radius: 999px;
  background: linear-gradient(180deg, #7aa9ff 0%, #3a78ff 100%); color: var(--door-cta-ink); font: 600 14px/1 var(--door-font);
  border: 1px solid rgba(150, 190, 255, .5); text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 1px hsl(var(--primary) / .2), 0 0 24px hsl(var(--primary) / .32), inset 0 1px 0 rgba(255, 255, 255, .34);
  transition: box-shadow .2s ease-out, border-color .2s ease-out, background-color .2s ease-out; }
.primary:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 34px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .5); }
.primary:disabled { opacity: .45; pointer-events: none; }
.primary:focus-visible { outline: none; border-color: hsl(var(--primary)); box-shadow: var(--door-focus); }

/* the secondary: ctaSecondary (SPEC §6 Chip); never filled */
.secondary { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin-top: 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--hairline); font: 400 11px/1 var(--door-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--door-chip-ink); text-decoration: none; cursor: pointer; transition: border-color .2s ease-out, color .2s ease-out; }
.secondary:hover { border-color: var(--hairline-hover); color: hsl(var(--foreground)); background: rgba(255, 255, 255, .04); }
.secondary:focus-visible { outline: none; border-color: hsl(var(--primary)); box-shadow: var(--door-focus); }

/* the state screens: a title (SPEC §4 Card heading) + the message; no badge, no green */
.state { text-align: center; }
.state.flush { text-align: left; margin-bottom: 24px; }
.title { margin: 0; font: 600 16px/24px var(--door-font); letter-spacing: -.015em; color: hsl(var(--foreground)); }
.msg { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--door-body); }
.strong { color: hsl(var(--foreground)); }
.state .primary, .state .secondary { margin-top: 20px; }
.note { text-align: center; font-size: 14px; line-height: 20px; color: var(--door-body); }
.note.blocked { color: hsl(var(--foreground)); }

@media (max-width: 639px) {
  .card { padding: 24px 20px; }
  .rule2, .docs-word { display: none; }   /* as the room's narrow header (site.css:218) */
  .logo.pd { height: 18px; }              /* rhp.css:207 */
}