/* ============================================================
   Awall surface stylesheet: auth.css
   Split from styles.css (F1, issue #186) — NO rule changes.
   Owns: main-content area + auth layout: login/setup/setup-complete (S6)
   Concatenating every surfaces/*.css in base.html <link> order
   reproduces the original styles.css byte-for-byte.
   ============================================================ */
.main-content {
  margin-left: var(--sidebar-width-current);
  flex: 1;
  min-height: 100vh;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition-base) var(--ease-out);
  position: relative;
  isolation: isolate;
}

.content-wrapper {
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-8) var(--space-8);
  position: relative;
  z-index: 1;
}

.dash-grid-base {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right,  rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 0 0;
}
[data-theme="dark"] .dash-grid-base {
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
}

/* ---------------------------------------------------------
   6. Auth layout (login / setup / setup_complete)
   Bridges landing → app: subtle grid backdrop + soft glow shapes,
   centered card with the same 12px radius vocabulary.
   --------------------------------------------------------- */
.auth-layout {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--color-surface);
  padding: var(--space-8) var(--space-4);
  overflow: hidden;
  isolation: isolate;
}

.auth-grid-base {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right,  rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 0 0;
}
[data-theme="dark"] .auth-grid-base {
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
}

.auth-card {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  padding: var(--space-12) var(--space-8);
  width: 100%;
  max-width: 420px;
}

/* Optional eyebrow above auth-title — opt-in via template */
.auth-card .eyebrow {
  text-align: center;
  margin-bottom: var(--space-3);
}

/* Brand block on the auth card — non-interactive identity frame.
   Holds logo, wordmark and tagline inside a single primary-tinted badge.
   Back-to-landing lives in the top-left corner of the layout, not here. */
.auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.auth-brand-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-8);
  /* 24px radius + primary-tinted halo are sanctioned by the DESIGN.md
     Auth Surfaces spec (the brand-badge identity frame), not free drift. */
  border-radius: 24px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-ring);
  box-shadow: 0 8px 24px var(--color-primary-focus-ring);
  aspect-ratio: 1 / 1;
  min-width: 220px;
}

.auth-logo {
  width: 128px;
  height: 128px;
  display: block;
}

.auth-brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.1;
}

.auth-brand-name {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-heading);
  letter-spacing: -0.02em;
}

.auth-brand-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  text-transform: lowercase;
}

/* "Back to Awall" link — default below-card variant kept for callers
   that opt out of the corner placement. */
.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.auth-back-link:hover {
  color: var(--color-primary);
}

.auth-back-link svg { transition: transform var(--transition-fast); }
.auth-back-link:hover svg { transform: translateX(-2px); }

/* Top-left corner variant — pinned to the auth-layout viewport. */
.auth-back-link--corner {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  margin-top: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-btn);
  z-index: 1;
}

.auth-back-link--corner:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}

.auth-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
  text-align: center;
}

.auth-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-6);
  line-height: 1.5;
}

.auth-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  line-height: 1.5;
  text-align: center;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Secondary link row below the auth form (e.g. "Forgot password?",
   "Back to login", "Cancel and return to login"). Centers under the
   card and carries its own vertical rhythm versus the form above. */
.auth-link-row {
  text-align: center;
  margin-top: var(--space-4);
}

.auth-link {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}
.auth-link:hover {
  color: var(--color-primary-hover);
}

/* Quiet link-style button variant for "Cancel" controls that sit next
   to a primary/danger submit. Keeps the .btn box height so it aligns
   with its sibling submit, but reads as a quiet link, not a filled box. */
.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
}
.btn-link:hover {
  background: transparent;
  color: var(--color-primary);
}

/* TOTP enrollment QR. Capped well under a 375px viewport and framed on an
   elevated surface so it stays scannable against the card in dark mode. */
.otp-qr {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  /* Centred in the auth card so the focal QR balances the centred title
     above it (#213); the secret box + form below stay full-width. */
  margin: var(--space-3) auto;
  padding: var(--space-3);
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
}

/* Manually-entered TOTP secret + one-time backup/secret reveals. Shares the
   .backup-code "secret on a light surface" language so the 2FA enrollment
   surfaces read as one system (vs falling through to the dark global <pre>). */
.form-secret-text,
.totp-secret {
  display: block;
  margin: 0 0 var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-heading);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  word-break: break-all;
  white-space: pre-wrap;
}

/* Phone shrink (F5 owns responsive.css; this 480px block is auth-only and
   has no competing rule there). Recovers vertical space on short phones so
   the form clears the fold without losing the square brand identity. */
@media (max-width: 480px) {
  .auth-logo {
    width: 96px;
    height: 96px;
  }
  .auth-brand-badge {
    min-width: 180px;
    padding: var(--space-4) var(--space-6);
  }
}