/* Account pages: sign-in, profile and two-factor setup.
   Loaded by templates/accounts/* through {% block extra_css %}. */

/* Spacing the shared kit leaves to each page */
.card-body > .field:last-child, .card-body > form > .field:last-child { margin-bottom: 0; }

/* Monospace inputs inside .field (whose rule resets the font). */
.field input.mono { font-family: var(--mono); letter-spacing: .05em; }

/* Profile: password / two-factor / recovery code rows */
.security-list li { align-items: center; gap: .85rem; padding: .85rem 0; border-bottom: 1px solid var(--border); }
.security-list li:first-child { padding-top: 0; }
.security-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.security-list .ic { margin-top: 0; }
.security-item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.security-item .badge { margin-left: .35rem; vertical-align: 1px; }
@media (max-width: 620px) {
  /* Text next to the icon, the button on its own line below it */
  .security-list li { flex-wrap: wrap; align-items: flex-start; row-gap: .6rem; }
  .security-list .security-item { flex-basis: calc(100% - 2.1rem); }
  .security-list li > .btn, .security-list li > .nowrap { margin-left: 2.05rem; }
}

/* Two-factor setup: numbered steps */
.setup-steps { list-style: none; counter-reset: setup-step; margin: 0; padding: 0; }
.setup-steps > li { counter-increment: setup-step; position: relative; padding: 0 0 1.4rem 2.85rem; }
.setup-steps > li + li { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.setup-steps > li:last-child { padding-bottom: 0; }
.setup-steps > li::before {
  content: counter(setup-step); position: absolute; left: 0; top: -.15rem; width: 1.95rem; height: 1.95rem;
  border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700;
}
.setup-steps > li + li::before { top: 1.1rem; }
.setup-steps h2 { font-size: 1.05rem; margin-bottom: .35rem; }
.setup-qr { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.setup-manual { flex: 1; min-width: 210px; }
.setup-key { font-family: var(--mono); font-size: 1rem; letter-spacing: .04em; word-break: normal; overflow-wrap: normal; }
.setup-confirm { max-width: 340px; }
@media (max-width: 620px) {
  .setup-steps > li { padding-left: 2.4rem; }
}

/* Recovery codes: never break a code across lines */
.code-grid.codebox { padding: 1rem 1.25rem; font-size: 1.05rem; letter-spacing: .03em; word-break: normal; }
.code-grid.codebox span { white-space: nowrap; }
@media (max-width: 480px) {
  .code-grid.codebox { font-size: .92rem; letter-spacing: 0; padding: .75rem .85rem; gap: .4rem .75rem; }
}