/* Winston V3 — Account screen.
   Settings-style stack of cards; gated forms render in the shared modal. */

.account-enforce-banner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  border-left: 3px solid var(--warning, #c97a00);
  background: var(--surface-2);
}
.account-enforce-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--warning, #c97a00);
  color: #fff;
  font-weight: 700;
}

.account-identity { display: flex; align-items: center; gap: var(--space-4); }
.account-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ai);
  color: var(--ink-inverse);
  font-weight: 800;
  font-size: var(--type-xl);
}
.account-identity-meta { min-width: 0; }
.account-username {
  font-size: var(--type-lg);
  font-weight: var(--weight-semi);
  overflow-wrap: anywhere;
}
.account-role { font-size: var(--type-sm); }
.account-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.account-badge {
  font-size: var(--type-xs);
  font-weight: var(--weight-semi);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--ink-2);
}
.account-badge.is-on   { background: rgba(31, 138, 63, 0.12);  color: var(--positive, #1f8a3f); }
.account-badge.is-off  { background: var(--surface-3);          color: var(--ink-muted); }
.account-badge.is-warn { background: rgba(201, 122, 0, 0.12);   color: var(--warning, #c97a00); }

.account-inline { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-sm); }
.account-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
  background: var(--ink-faint);
}
.account-dot.is-on  { background: var(--positive, #1f8a3f); }
.account-dot.is-off { background: var(--ink-faint); }

.account-kv { display: flex; flex-direction: column; gap: var(--space-2); }
.account-kv > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--type-sm);
}
.account-k { color: var(--ink-muted); }
.account-v { color: var(--ink); text-align: right; }
.account-v.mono { font-family: var(--font-mono); }

/* Gated modal forms (reused by password / MFA / sign-out-everywhere) */
.account-form { display: flex; flex-direction: column; gap: var(--space-3); }
.account-field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--type-sm); }
.account-field > span { color: var(--ink-muted); }
.account-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--type-base);
}
.account-input.mono { font-family: var(--font-mono); letter-spacing: 0.15em; }
.account-form-err { color: var(--danger, #c0392b); font-size: var(--type-sm); min-height: 1em; }

.account-mfa-enroll {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}
.account-qr {
  width: 180px;
  height: 180px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}
.account-qr img { display: block; width: 100%; height: 100%; }
.account-secret { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--type-sm); min-width: 0; }
.account-secret code {
  font-family: var(--font-mono);
  word-break: break-all;
  background: var(--surface-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}