/* ===================================================================
   ProcIntel — AUTHENTICATION PAGES
   V1 Premium UX.

   Sign in, create account, password reset, email confirmation, and the
   separate operator sign-in. Loaded ONLY by those six standalone pages
   (after style.css and tokens.css), so nothing here can reach the
   application. The account page inside the app reuses `.signin-field`
   and deliberately does not load this file.

   WHY THESE PAGES CHANGED. They were a light cream surface with a navy
   brand panel, rendered in a system font because they never loaded the
   self-hosted faces. A subscriber signed in to one product and landed in
   another. They now sit on the same dark ground, type and gold as the
   application, and read as its front door.

   WHAT DID NOT CHANGE. Every form keeps its action, method, field names,
   CSRF token and generic error wording. This file is presentation only.

   Legacy style.css styles `.signin-*` at single-class specificity and
   loads first; the rules below are scoped under `.signin-page` so they
   win by specificity as well as by source order, without !important.
   =================================================================== */

html, body { margin: 0; background: var(--surface-base); }
body {
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------------------
   LAYOUT -- a brand panel and a form panel, side by side from 900px.
   ------------------------------------------------------------------- */
.signin-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "brand form"
    "footer form";
  /* The brand COLUMN is one continuous surface, brand panel and footer
     alike: painted here rather than per element, so no seam can appear
     where the brand panel ends and the footer begins. 44% matches the
     44fr column exactly because the grid has no gap. */
  background: linear-gradient(90deg, var(--surface-shell) 0 44%, var(--surface-base) 44% 100%);
  font-family: var(--font-ui);
}

.signin-page .signin-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-11) clamp(var(--sp-9), 6vw, 88px);
  background: transparent;
  border-right: 1px solid var(--border-default);
  color: var(--text-primary);
}
/* One restrained atmosphere, the same family as the application's own
   ground -- no node grid, no connecting lines. */
.signin-page .signin-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 520px at 12% 18%, rgba(70, 104, 150, 0.18), transparent 64%),
    radial-gradient(620px 420px at 88% 74%, var(--wash-accent), transparent 62%);
}
.signin-page .signin-brand::after { content: none; }
/* The warm glow sat at 92% height and was clipped by the brand panel's
   own edge, drawing a hard seam above the copyright line. Centred higher,
   it fades out before reaching the edge. */
.signin-page .signin-brand-inner { position: relative; z-index: 1; max-width: 26rem; }

.signin-page .signin-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
.signin-page .signin-mark { height: 44px; width: auto; display: block; }
.signin-page .signin-wordmark {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}
.signin-page .signin-rule {
  width: 32px;
  height: 2px;
  margin: var(--sp-7) 0 var(--sp-6);
  background: var(--accent-primary);
}
.signin-page .signin-tagline {
  margin: 0;
  color: var(--accent-primary);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.signin-page .signin-statement {
  margin: var(--sp-6) 0 0;
  max-width: 22ch;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.signin-page .signin-footer {
  grid-area: footer;
  position: relative;
  z-index: 1;
  padding: 0 clamp(var(--sp-9), 6vw, 88px) var(--sp-8);
  background: transparent;
  border-right: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

/* -------------------------------------------------------------------
   FORM PANEL
   ------------------------------------------------------------------- */
.signin-page .signin-panel {
  grid-area: form;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-11) var(--sp-9);
  background: transparent;
}
.signin-page .signin-form {
  width: 100%;
  max-width: 400px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.signin-page .signin-heading {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}
.signin-page .signin-subheading {
  margin: var(--sp-4) 0 var(--sp-8);
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

.signin-page .signin-field { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0 0 var(--sp-6); }
.signin-page .signin-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6);
}
.signin-page .signin-field label {
  color: var(--text-secondary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
}
.signin-page .signin-field input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 var(--sp-6);
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.signin-page .signin-field input:hover { border-color: var(--border-strong); }
.signin-page .signin-field input:focus,
.signin-page .signin-field input:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
  border-color: var(--accent-primary);
  background: var(--surface-base);
}
.signin-page .signin-field input[aria-invalid="true"] { border-color: var(--status-critical); }
.signin-page .signin-field-error:empty { display: none; }
.signin-page .signin-field-error { margin: 0; color: var(--status-critical); font-size: var(--fs-caption); }
.signin-page .signin-field-hint { margin: 0; color: var(--text-muted); font-size: var(--fs-caption); }

/* The page's one primary action -- gold, and the only gold fill here. */
.signin-page .signin-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin-top: var(--sp-4);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-sm);
  background: var(--accent-primary);
  color: var(--accent-on);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.signin-page .signin-submit:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.signin-page .signin-submit:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }

.signin-page .signin-alt {
  margin: var(--sp-6) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-meta);
  text-align: center;
}
.signin-page .signin-alt-recovery { margin-top: var(--sp-6); }
.signin-page .signin-alt a {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-muted);
  padding-bottom: 1px;
}
.signin-page .signin-alt a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-primary); }
.signin-page .signin-alt a:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: var(--radius-xs); }

.signin-page .signin-error,
.signin-page .signin-notice {
  margin: 0 0 var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--status-critical);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--wash-critical);
  color: var(--text-primary);
  font-size: var(--fs-meta);
}
.signin-page .signin-error:empty { display: none; }
.signin-page .signin-notice { border-color: var(--status-positive); background: var(--wash-positive); }

/* -------------------------------------------------------------------
   RESPONSIVE -- the brand panel becomes a compact header row.
   ------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .signin-page {
    background: var(--surface-base);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "brand" "form" "footer";
  }
  .signin-page .signin-brand {
    padding: var(--sp-7) var(--sp-7);
    background: var(--surface-shell);
    border-right: none;
    border-bottom: 1px solid var(--border-default);
  }
  .signin-page .signin-lockup { flex-direction: row; align-items: center; gap: var(--sp-4); }
  .signin-page .signin-mark { height: 30px; }
  .signin-page .signin-wordmark { font-size: 22px; }
  .signin-page .signin-rule,
  .signin-page .signin-statement { display: none; }
  .signin-page .signin-tagline { margin-top: var(--sp-3); }
  .signin-page .signin-panel { align-items: flex-start; padding: var(--sp-9) var(--sp-7); }
  .signin-page .signin-footer {
    padding: var(--sp-6) var(--sp-7);
    border-right: none;
    border-top: 1px solid var(--border-subtle);
    background: transparent;
  }
}
@media (max-width: 639.98px) {
  .signin-page .signin-field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .signin-page .signin-heading { font-size: 24px; }
  .signin-page .signin-panel { padding: var(--sp-8) var(--sp-6); }
}

/* -------------------------------------------------------------------
   OPERATOR SIGN-IN -- deliberately a DIFFERENT surface: a compact
   utility card, no marketing statement, and no gold primary button. An
   operator must never mistake it for the subscriber front door.
   ------------------------------------------------------------------- */
.admin-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  background: var(--surface-base);
}
.admin-login-page .admin-login-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
  max-width: 380px;
  padding: var(--sp-9);
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-top: 3px solid var(--status-info);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.admin-login-page .admin-login-title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-semibold);
}
.admin-login-page .admin-login-title-accent { color: var(--status-info); }
.admin-login-page .admin-login-subtitle { margin: 0 0 var(--sp-5); color: var(--text-muted); font-size: var(--fs-meta); }
.admin-login-page .admin-login-error:empty { display: none; }
.admin-login-page .admin-login-error {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--status-critical);
  border-radius: var(--radius-sm);
  background: var(--wash-critical);
  color: var(--text-primary);
  font-size: var(--fs-meta);
}
.admin-login-page .admin-login-card label { margin: var(--sp-3) 0 0; color: var(--text-secondary); font-size: var(--fs-meta); font-weight: var(--fw-medium); }
.admin-login-page .admin-login-card input {
  box-sizing: border-box;
  height: 40px;
  padding: 0 var(--sp-5);
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: inherit;
}
.admin-login-page .admin-login-card input:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
  border-color: var(--accent-primary);
}
.admin-login-page .admin-login-card button {
  height: 40px;
  margin-top: var(--sp-6);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.admin-login-page .admin-login-card button:hover { background: var(--surface-hover); }
.admin-login-page .admin-login-card button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .signin-page .signin-field input,
  .signin-page .signin-submit { transition: none; }
}