/* Account layouts only. Controls, fields, states, tabs and panels use the
   shared recipes in monitoring/public/design-system.css. Source and
   route-specific adaptations: docs/design-system/accounts.md. */
.account-shell {
  width: min(1080px, calc(100% - 2 * var(--content-gutter)));
  margin: var(--space-40) auto var(--space-60);
  position: relative;
  z-index: var(--z-base);
  min-height: 42vh;
  overflow-wrap: anywhere;
}
.account-shell h1 {
  margin: 0;
  font-size: var(--text-title);
  line-height: var(--line-title);
  letter-spacing: var(--tracking-heading);
}
.account-shell h2 {
  margin: 0 0 var(--space-24);
  font-size: var(--text-heading);
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-heading);
}
.account-shell h3 {
  margin: 0 0 var(--space-6);
  font-size: var(--text-heading);
  line-height: var(--line-heading);
  font-weight: var(--font-weight-medium);
}
.account-shell p { line-height: var(--line-body); }
.account-shell form { margin: 0; }
.account-eyebrow, .account-muted, .account-password-hint {
  color: var(--color-muted);
  font-size: var(--text-control);
  line-height: var(--line-body);
}
.account-eyebrow { display: block; margin-bottom: var(--space-8); font-size: var(--text-small); }
.account-intro { margin: var(--space-12) 0 var(--space-24); color: var(--color-muted); font-size: var(--text-body); }
.account-muted { margin: var(--space-12) 0; }
.account-password-hint { margin: 0; }
.account-tabs { width: fit-content; max-width: 100%; margin-bottom: var(--space-32); }
.account-notice { margin-bottom: var(--space-24); }
.account-error { margin: var(--space-12) 0; }
.account-error ul { margin: 0; padding: 0; list-style: none; }
.account-panel, .player-game { padding: var(--panel-padding); }
.account-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-20);
  margin-bottom: var(--space-32);
}
.account-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-24);
  align-items: start;
}
.account-side { display: grid; gap: var(--space-24); min-width: 0; }
.account-form > .account-primary { justify-self: start; }
.account-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.account-form-actions > * { min-width: 0; }
.account-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding-block: var(--space-16);
  border-bottom: var(--border-width) solid var(--color-border);
}
.account-identity > span:first-child { display: flex; align-items: center; gap: var(--space-8); }
.account-identity .icon { width: var(--control-icon); height: var(--control-icon); }
.account-identity + form { margin-top: var(--space-12); }
.account-login-address { overflow-wrap: anywhere; margin: var(--space-12) 0; color: var(--color-muted); }

/* Keep the current MVP's narrow auth page and text-labelled provider buttons.
   Only composition lives here; shared controls own their visual states. */
.account-login {
  width: 100%;
  max-width: 510px;
  margin: var(--space-60) auto;
  padding: var(--panel-padding);
  text-align: center;
}
.account-login h1 {
  margin-bottom: var(--space-12);
}
.account-email-form { text-align: left; }
.account-email-form > .account-primary { width: 100%; justify-self: stretch; margin-top: var(--space-8); }
.account-email-form .account-error { margin: 0; }
.account-auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: var(--space-24) 0;
  color: var(--color-muted);
  font-size: var(--text-small);
  text-align: center;
}
.account-auth-divider::before, .account-auth-divider::after { content: ""; flex: 1; height: var(--border-width); background: var(--color-border); }
.account-providers { display: grid; gap: var(--space-12); }
.account-providers .account-provider { display: grid; grid-template-columns: var(--control-icon) minmax(0,1fr) var(--control-icon); width: 100%; gap: var(--space-12); text-align: left; }
.account-provider .icon, .google-letter { width: var(--control-icon); height: var(--control-icon); }
.google-letter { display: inline-grid; place-items: center; font-size: var(--text-heading); font-weight: var(--font-weight-bold); line-height: 1; }
.account-provider-note { text-align: center; margin-top: var(--space-20); }
.account-entry-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 100%;
  margin: var(--space-24) 0;
  text-align: center;
}
.telegram-pending { padding-top: var(--space-24); text-align: center; }
.telegram-pending[hidden] { display: none; }
.account-waiting { display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin-bottom: var(--space-16); }
/* The profile, history and settings retain their current MVP composition. */
.player-heading { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-24); }
.player-heading > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.player-heading > .account-secondary { margin-left: auto; }
.player-heading .account-muted { margin: var(--space-8) 0 0; }
.player-avatar {
  width: calc(var(--space-40) * 2);
  height: calc(var(--space-40) * 2);
  border-radius: var(--radius-segment);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  display: grid;
  place-items: center;
  font-size: var(--text-heading);
  flex-shrink: 0;
}
.player-bio { font-size: var(--text-body); max-width: 720px; margin-top: var(--space-24); overflow-wrap: anywhere; }
.player-section { margin-top: var(--section-gap); }
.player-section > .section-heading { justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }
.player-section .section-heading h2 { margin: 0; display: flex; align-items: center; gap: var(--space-12); }
.player-game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
.player-game { min-width: 0; overflow-wrap: anywhere; }
.player-game-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16); }
.player-game-title > div { min-width: 0; }
.player-game-title p, .player-game-note { font-size: var(--text-control); color: var(--color-muted); }
.player-game-title p { margin: 0; }
.player-current { display: inline-flex; color: var(--color-success); font-size: var(--text-small); line-height: var(--line-caption); }
.player-game-title .player-current { margin-bottom: var(--space-8); }
.player-game-facts { display: grid; gap: var(--space-12); margin: var(--space-24) 0 0; }
.player-game-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; gap: var(--space-16); font-size: var(--text-control); }
.player-game-facts dt { color: var(--color-muted); }
.player-game-facts dd { margin: 0; text-align: right; }
.player-game-note { margin: var(--space-16) 0 0; }
.player-game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-24); border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-16); margin-top: var(--space-24); }
.player-empty p { color: var(--color-muted); margin: var(--space-8) 0 var(--space-20); }
.player-empty p:last-child { margin-bottom: 0; }
.account-game-editor { max-width: 720px; }
.account-game-editor > .account-muted { margin: 0 0 var(--space-24); }
.account-failure { display: grid; gap: var(--space-24); }
.account-failure .ui-button { justify-self: start; }

@media (max-width: 800px) {
  .account-shell { margin-block: var(--space-24) var(--space-40); }
  .account-login { margin-block: var(--space-24); }
  .account-settings-grid, .player-game-grid { grid-template-columns: 1fr; }
  .account-page-heading { margin-bottom: var(--space-24); gap: var(--space-12); }
  .player-heading { display:grid; grid-template-columns:var(--space-60) minmax(0, 1fr); align-items:start; gap:var(--space-16); }
  .player-heading > div { word-break:normal; }
  .player-avatar { width: var(--space-60); height: var(--space-60); border-radius: var(--radius-mobile-panel); }
  .player-heading > .account-secondary { grid-column:2; justify-self:start; margin-left:0; }
}