/* Profile page — layout and the account-status card, on top of wordfeud-butler/web/src/styles.css
 * (loaded first, for its tokens and the renderLogin()-shared classes — see index.html's comment)
 * and shared/web/toolbar/toolbar.css.
 */

.profile-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.5rem 0 0.25rem;
}

/* renderLogin() (reused from wordfeud-butler/web/src/ui.js — see index.html's comment) renders
 * its own ".login-screen" wrapper, styled in wordfeud-butler's stylesheet to fill the whole
 * viewport (min-height: 100dvh) since it is normally the only thing on the page. Embedded inside
 * this page's #wordfeud-section instead, that would leave a huge empty gap — neutralized here
 * rather than in ui.js, since ui.js's own version is still correct for its original context.
 */
#wordfeud-section .login-screen {
  min-height: 0;
  padding: 0;
}

.account-status {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
}

.account-status p {
  margin: 0;
}

.account-prompt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
}

.account-prompt p {
  margin: 0;
  color: var(--text-muted);
}