/* Signed-out surfaces: sign in, just signed out, and an error with nobody
 * signed in (design/signed-out/). Linked from landing.html and error.html.
 *
 * The one page with a different shape: no header chrome (nothing to navigate
 * to), the full logo over one centered card, a floating theme toggle. Colours
 * are tokens only; dark mode is portal.css's job. */

body.auth header { display: none; }

main.auth-wrap {
  width: 100%; max-width: none; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 64px 16px;
}

.auth-theme {
  position: fixed; top: 16px; right: 16px; z-index: var(--z-header);
  background: var(--surface); border-color: var(--border); color: var(--text-2);
}
.auth-theme:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text-1); }

.auth-panel { width: 100%; max-width: 420px; text-align: center; }
/* The full lockup at 85px tall (~174px wide), above the 120px legibility
   floor (DESIGN.md, Logo rule 2). */
.auth-logo { display: flex; align-items: center; justify-content: center; margin: 0 0 24px; }
.auth-logo img { height: 85px; width: auto; }
.auth-panel h1 { font-size: 30px; letter-spacing: -.015em; margin: 0 0 8px; }
.auth-panel .lead { color: var(--text-2); font-size: 16px; margin: 0 0 28px; text-wrap: balance; }

.auth-card {
  padding: 26px 24px; margin: 0; text-align: left;
  box-shadow: var(--shadow-md);
}
.auth-card p { margin: 0; }

.signin-line { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; }
.signin-line .i { color: var(--accent); margin-top: 2px; }
.signin-line p { font-size: 15px; color: var(--text-1); }
.signin-line b { font-weight: 600; }

.reassure { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.reassure li { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--text-2); }
.reassure li .i { width: 17px; height: 17px; color: var(--ok); }

.btn.block, a.btn.block { display: flex; width: 100%; min-height: 44px; font-size: 15px; }

.auth-card .sso-note {
  margin: 14px 0 0; color: var(--text-3);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}

.foot-note { margin: 22px 0 0; color: var(--text-3); font-size: 14px; }
.foot-note b { color: var(--text-2); font-weight: 600; }

/* Just signed out: confirms the deliberate action, in the ok colour. An
   outlined chip on --bg, the portal's pill idiom. */
.signed-badge {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ok); border: 1px solid var(--ok); border-radius: 999px; padding: 3px 11px;
}
.signed-badge .i { width: 14px; height: 14px; }

/* An error with nobody signed in: the heading moves into the card. */
.auth-card .auth-title { display: flex; align-items: flex-start; gap: 10px; font-size: 22px; margin: 0 0 8px; }
.auth-title .i { color: var(--warn); margin-top: 5px; }
.auth-card .auth-detail { color: var(--text-2); margin: 0 0 20px; }
.auth-actions { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 640px) {
  main.auth-wrap { padding: 72px 16px 40px; place-items: start center; }
  .auth-logo img { height: 64px; }
  .auth-panel h1 { font-size: 26px; }
  .auth-card { padding: 22px 18px; }
}