| 1 | .avatar:is(img, .monogram) { flex: none; border-radius: 50%; object-fit: cover; } |
| 2 | .avatar.monogram { background: var(--accent-wash); color: var(--accent); } |
| 3 | |
| 4 | .account-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: start; } |
| 5 | .account-grid > * { flex: 1 1 320px; min-width: 0; } |
| 6 | .account-grid .card { padding: 12px 14px; } |
| 7 | .account-grid h2.card-title { margin: 0 0 6px; color: var(--text); } |
| 8 | |
| 9 | .picture-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } |
| 10 | .picture-row .avatar { width: 64px; height: 64px; margin-right: 6px; font-size: 26px; } |
| 11 | .picture-row + .error { margin: -4px 0 10px; font-size: 13px; } |
| 12 | |
| 13 | .account-fields, .credentials { display: grid; align-items: center; font-size: 13px; } |
| 14 | .account-fields { grid-template-columns: max-content 1fr; gap: 6px 14px; --control: 28px; } |
| 15 | .account-fields .label, .credentials .label { color: var(--muted); } |
| 16 | .account-fields .error { margin: 0; } |
| 17 | .account-fields .email { display: flex; align-items: center; gap: 8px; min-height: var(--control); } |
| 18 | .account-fields .email .address { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } |
| 19 | .account-fields .actions { display: flex; justify-content: flex-end; gap: 6px; } |
| 20 | |
| 21 | .credentials { grid-template-columns: max-content 1fr auto; gap: 4px 14px; } |
| 22 | .credentials > .button { justify-self: end; } |
| 23 | .credentials .passkey { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
| 24 | .picture-row .button:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; } |