/* settings.css — The Konto pages: their tabs and panels. */

.account-tabs { margin-bottom: 1.25rem; }
.account-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; max-width: 880px; }
.account-panels .panel { scroll-margin-top: 1rem; }
.account-body { margin-top: 0; }
.account-rows { margin-bottom: 0.8rem; }
.account-mail { overflow-wrap: anywhere; }
.account-table-wrap { overflow-x: auto; }
.panel-link { font-size: 0.86rem; white-space: nowrap; }
.login-list { list-style: none; display: grid; gap: 0.35rem; font-size: 0.92rem; }
.login-list time { color: var(--text-dim); font-variant-numeric: tabular-nums; margin-right: 0.6rem; }
.to-confirm { padding: 0.6rem 0.8rem; margin-bottom: 1rem; color: var(--amber); background: rgba(227, 176, 76, 0.07); border: 1px dashed rgba(227, 176, 76, 0.45); overflow-wrap: anywhere; }

.codes-step { margin-top: 1rem; }
.codes-qr { background: #fff; padding: 8px; margin-bottom: 0.8rem; image-rendering: pixelated; }
.codes-recovery { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.3rem 1rem; font-family: monospace; font-size: 1rem; color: var(--gold-bright); }

.panel-desc { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 1rem; max-width: 62ch; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-grid .form-group { margin-top: 1.1rem; }
.inline-form { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.inline-form .form-group { flex: 1; min-width: 220px; margin: 0; }
.panel-danger { border-color: rgba(217, 109, 102, 0.35); }
.panel-danger .panel-head { border-bottom-color: rgba(217, 109, 102, 0.4); }
.panel-danger .panel-head h2 { color: #e9a19b; }
/* The page a mailed link opens to confirm an account's deletion. */
.account-delete { max-width: 640px; }

@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }