/* 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);
}

/* The credential pair behind "Show my password" (profile.js). Monospace and
 * a size up, for the same reason Challenge Scrabble's own registration card
 * uses them: this is a string somebody is about to copy onto paper or type
 * into another device, so every character has to be unambiguous. `user-select`
 * is left alone on purpose — selecting it to copy is the point. */
.credential {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.8rem;
}

.credential dt {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.credential dd {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 1.05rem;
  word-break: break-word;
}