/* account.css — page styles for Account and its settings tabs (Phase 3; loaded by base.html after wy.css, tokens only).
   Layout only: everything visual comes from the primitives in wy.css. */

/* Page root: prose paragraphs inside a stack (cards, kv values, dialog bodies) are spaced by the stack, not their own margins. */
.wy-acct .wy-stack > p { margin: 0; }

/* A form that should not stretch across a wide card (password, codes, the monitoring key). 448 */
.wy-acct-narrow { max-width: calc(var(--wy-space-16) * 7); }

/* A field with its button beside it from 640 px up; stacked below. */
.wy-acct-inline { display: grid; gap: var(--wy-space-3); }
.wy-acct-inline > .wy-field { min-width: 0; }
@media (min-width: 640px) {
  .wy-acct-inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* Two-factor setup: the QR (segno draws its own light background) inside a hairline frame. */
.wy-acct-qr { display: inline-block; align-self: flex-start; max-width: 100%; line-height: 0; border: 1px solid var(--wy-border); border-radius: var(--wy-radius-md); overflow: hidden; }
.wy-acct-qr > svg { display: block; max-width: 100%; height: auto; }

/* Stacked rows below 640: identifiers (invite links, slugs) may break anywhere instead of running under the cell label. */
@media (max-width: 639px) {
  .wy-acct .wy-table--stack td .wy-mono { min-width: 0; overflow-wrap: anywhere; }
}