/* Sign-in and other public pages: left-aligned, the condensed title is the strong element. */
.auth { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--topbar-h); padding: .5rem var(--gutter); border-bottom: 1px solid var(--rule); }
.auth-brand { display: inline-flex; align-items: center; gap: .625rem; color: var(--ink); font-weight: 700; text-decoration: none !important; }
.auth-brand img { width: 2rem; height: 2rem; }
.auth-brand span { color: var(--muted); font-weight: 500; }

.auth-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 1.5rem; align-content: center;
  padding: clamp(2rem, 6vw, 5rem) var(--gutter);
  /* The logo's grid, very faint, as the backdrop of this service page. */
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}
.auth-intro { grid-column: 1 / span 6; align-self: center; padding-right: 2rem; }
.auth-intro .auth-title { margin: 0; font-family: var(--font-display); font-size: clamp(3.25rem, 1.5rem + 6vw, 7.5rem); font-weight: 800; font-stretch: 62%; line-height: .86; letter-spacing: -.03em; }
.auth-intro p:not(.auth-title) { margin-top: 1.25rem; max-width: 34ch; font-family: var(--font-text); font-size: var(--fs-read); color: var(--muted); }
.auth-card { grid-column: 8 / span 5; width: 100%; max-width: 28rem; padding: 1.75rem; background: var(--bg); border: 1.5px solid var(--ink); border-radius: var(--radius-media); }
.auth-card.wide { grid-column: 1 / span 8; max-width: none; border: 0; padding: 0; background: transparent; }
.auth-logo { display: none; }
.auth-card h1 { font-size: 2.25rem; font-weight: 800; font-stretch: 65%; line-height: .95; }
.auth-card .lead { margin-top: .625rem; color: var(--muted); font-family: var(--font-text); font-size: var(--fs-body); }
.auth-card form { margin-top: 1.5rem; }
.auth-foot { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: 1.25rem var(--gutter); background: #0A1420; color: #E6ECF2; font-size: var(--fs-caption); }
:root[data-theme="dark"] .auth-foot { background: #050B13; }
.auth-foot a { color: #E6ECF2; }

.divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; font-size: var(--fs-ui); color: var(--muted); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.auth-switch { margin-top: 1.25rem; font-size: var(--fs-ui); color: var(--muted); }

.legal { max-width: 46rem; }
.legal h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); font-weight: 800; font-stretch: 62%; line-height: .9; letter-spacing: -.02em; }
.legal .legal-body { margin-top: 1.5rem; }
.legal .legal-body p, .legal .legal-body ul { font-family: var(--font-text); font-size: var(--fs-read); color: var(--ink); }

@media (max-width: 960px) {
  .auth-intro { grid-column: 1 / -1; padding: 0 0 2rem; }
  .auth-intro p:not(.auth-title) { display: none; }
  .auth-card, .auth-card.wide { grid-column: 1 / -1; max-width: 32rem; }
}
@media (max-width: 560px) {
  .auth-card { padding: 1.25rem; }
  .auth-brand span { display: none; }
}

/* Minimal pages (errors) */
.minimal { min-height: 100dvh; display: grid; align-content: center; padding: 2rem var(--gutter); }
.minimal-card { max-width: 40rem; }
.minimal-card img { width: 2.5rem; height: 2.5rem; margin-bottom: 2rem; }
.error-code { font-size: var(--fs-caption); font-weight: 650; color: var(--muted); }
.minimal-card h1 { margin-top: .5rem; font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); font-weight: 800; font-stretch: 62%; line-height: .9; }
.minimal-card p { margin-top: 1rem; color: var(--muted); font-family: var(--font-text); font-size: var(--fs-body); }
.minimal-card .row { margin-top: 1.5rem; }
.trace { margin-top: 1.5rem; font-size: 11px; max-height: 300px; overflow: auto; padding: .75rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); white-space: pre-wrap; }