/* auth.css - the account page's own styles, layered on
 * assets/ssbz.css. A narrow single-column card page: the launcher
 * link flow (register/login, link, done) and the account center
 * (profile, password, devices).
 */

.wrap { max-width: 430px; padding-top: 30px; padding-bottom: 50px; }
.hero { padding: 26px 0 40px; }
.panel { margin: -22px 0 18px; }

/* The hero's logo row: the same flex row the identity panels use,
 * minus their bottom margin (the hero has its own spacing). */
.hero .who { margin: 0 0 2px; }

/* The logged-in identity row: avatar + account name; the avatar keeps
 * its uploaded square shape, no crop mask and no ring. */
.who { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.who img { width: 44px; height: 44px; }
.who b { font-size: 16px; }

/* The linked-launcher rows. */
.dev { display: flex; align-items: center; justify-content: space-between; gap: 10px;
       padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dev:last-child { border-bottom: 0; }
.dev .when { color: var(--muted); }
.dev .off { color: var(--muted); font-weight: 600; }
.dev .on { color: var(--ok); font-weight: 600; }

/* Full-width stacked buttons on this page; the mini variant sits in a
 * device row. */
button { display: block; width: 100%; }
button.mini { display: inline-block; width: auto; margin: 0; padding: 6px 12px; font-size: 13px; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 18px 0 4px; }
.hidden { display: none !important; }