/* 1111 Studios Glazing - sign-in and first-admin setup (sign-up) screens.
   Follows the sign-in / sign-up card examples in the brand kit v1 board
   (preview/brand-board.html): sign-in on the dark field, sign-up on the light
   paper, one centred .glass-panel card with 32px padding, the tagline
   lockup (approved 2026-09-25) at its 360px minimum width at the top, 40px inputs on --surface-raised with
   --border-strong borders, full-width .btn-primary (sign in) / .btn-accent
   (sign up). All colours come from /static/brand/glazing-tokens.css. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

.auth-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}
.auth-page.scene-dark { background: radial-gradient(120% 90% at 85% 10%, #142130 0%, var(--brand-field) 60%) fixed; }
.auth-page.scene-light { background: radial-gradient(120% 90% at 85% 10%, #E6F3EF 0%, var(--brand-paper) 55%) fixed; }

/* The four bars, very large, bleeding off the right edge (brand spec 6).
   Same paths and colours as the mark; only opacity changes. */
.auth-ghost { position: fixed; right: -80px; top: 60px; width: min(560px, 60vw); opacity: .10; pointer-events: none; z-index: 0; }
.scene-light .auth-ghost { opacity: .22; }

.auth-main { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }

/* 424px = the tagline lockup's 360px minimum width (brand spec 3) + 32px padding each side. */
.auth-card { width: min(424px, 100%); padding: 32px 32px 28px; }
.auth-lockup { display: block; height: auto; margin-bottom: 26px; }
.auth-lockup-tagline { width: 360px; }
.auth-lockup-compact { display: none; width: 240px; }
@media (max-width: 440px) {
  /* Too narrow for the 360px tagline lockup: fall back to the plain lockup (240px min). */
  .auth-lockup-tagline { display: none; }
  .auth-lockup-compact { display: block; }
}
.auth-title { font: 600 22px/1.2 var(--font-display); margin: 0 0 6px; letter-spacing: -0.01em; }
.auth-lead { margin: 0 0 22px; color: var(--text-muted); font-size: 14px; line-height: 1.45; }

.auth-form { margin: 0; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.auth-field input {
  width: 100%; height: 40px; padding: 0 12px;
  font: 400 14px var(--font-sans); color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.auth-field input:focus-visible { border-color: var(--focus-ring); }
.auth-password { position: relative; }
.auth-password input { padding-right: 64px; }
.auth-reveal {
  position: absolute; top: 0; right: 0; height: 100%; min-width: 58px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--brand-accent-strong); font: 500 12px var(--font-sans);
}
[data-theme="dark"] .auth-reveal { color: var(--brand-accent); }
.auth-hint { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }
.auth-card .btn-primary, .auth-card .btn-accent { width: 100%; margin-top: 6px; }

.auth-message { margin: 14px 0 0; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.4; }
.auth-error { color: var(--error); background: var(--error-tint); border: 1px solid var(--error); }
.auth-success { color: var(--success); background: var(--success-tint); border: 1px solid var(--success); }

.auth-setup-callout {
  margin: 0 0 18px; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.45;
  color: var(--warn); background: var(--warn-tint); border: 1px solid var(--warn);
}
.auth-setup-callout a { color: inherit; font-weight: 600; }
.auth-verified { color: var(--success); background: var(--success-tint); border-color: var(--success); }

.auth-foot {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--glass-border);
  font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.45;
}
.auth-foot a { color: var(--brand-accent-strong); text-decoration: none; font-weight: 500; }
[data-theme="dark"] .auth-foot a { color: var(--brand-accent); }
.auth-foot a:hover { text-decoration: underline; }

.auth-footer { position: relative; z-index: 1; padding: 18px; text-align: center; color: var(--text-muted); font-size: 12px; }