/* account.css — the account screen: who is signed in, and the two forms that
   change how they sign in.
   Every colour here is a token, so both palettes follow without a dark block
   of their own; what this file adds over the inline styles it replaced is a
   layout that media queries can reach. */

/* --- who is signed in --------------------------------------------------- */
.account-id{display:flex;align-items:center;gap:14px;padding:20px 22px}
.account-id .avatar{width:46px;height:46px;font-size:16px}
.account-id .who{min-width:0;flex:1}
.account-id .account-signout{flex:0 0 auto}
.account-id .name{font-size:16px;font-weight:600;letter-spacing:-.02em}
/* An address has no spaces to break at, so a long one would push the card
   wide rather than wrap inside it. */
.account-id .meta{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45;overflow-wrap:anywhere}

/* --- the two forms ------------------------------------------------------ */
.account-card{padding:20px 22px}
.account-card h3{font-size:15px;font-weight:600;letter-spacing:-.018em;margin:0}
.account-card .sub{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45;overflow-wrap:anywhere}

/* Capped well short of the 720px column: a single email field stretched the
   full width is harder to read back, not easier — the same reason the forms
   do not grow with the screen. */
.account-form{display:flex;flex-direction:column;gap:14px;margin-top:18px;max-width:380px}
.account-actions{display:flex;justify-content:flex-end;margin-top:18px}

/* --- the Telegram card ---------------------------------------------------- */
/* Its body is a state line or a button, never a form, so it does not inherit
   the two-column field grid the cards above it use. */
.account-card .tg-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.account-card .tg-state{font-size:13.5px;color:var(--ink-3);line-height:1.5}
.account-card .tg-state.on{color:var(--ink-2)}
.account-card .tg-handle{color:var(--muted)}
.account-card .tg-hint{font-size:12.5px;color:var(--muted-2);line-height:1.5}
/* The connect control is an <a>, because it leaves the page for Telegram. It
   still has to look and sit like the buttons beside it. */
.account-card a.btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.account-card a.btn:hover{text-decoration:none}