/* Account bar + sign-in dialog (cloud.js), shared by every page. Uses the page's own color tokens
   (--card, --ink, --ink2, --lav2, --mint2, --cream, --oops, --good, --font), so it follows
   light/dark mode automatically; each has a fallback (BMS's light colors) for a page missing it.
   Everything is scoped to .acct / .authDlg, so a page's own .btn / .row / .sub / h2 rules can't
   break the bar or the dialog. */
/* One row, always: min-height reserves it before sign-in status is known and nothing wraps
   (long text is cut off with …), so content below never jumps. */
.acct{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;min-height:31px;min-width:0}
.acct>*{flex:none}
.acct .acctHi,.acct .acctSt,.acct .acctNote{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .acctSt{flex-shrink:0} /* the save status shows in full; a long name gives way first */
.acct .acctHi{min-width:7em} /* ...but "Hi, Na…" always stays */
/* (cloud.js uses shorter status labels at 420px and below, so the status never needs cutting) */
.acct.hidden{display:none}
.acct .btn{display:inline-flex;align-items:center;gap:6px}
.acctHi{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:var(--card,#FFFFFF);border-radius:999px;padding:5px 12px;box-shadow:0 3px 10px rgba(120,90,160,.10)}
.acctHi b{max-width:16ch;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctSt{color:var(--ink2,#8A7FA0);font-size:12.5px;min-width:3em}
.acctSt.saved{color:var(--good,#3BB273)}
.acctSt.retry,.acctSt.offline{color:#B27B00}
.acctNote{color:var(--ink2,#8A7FA0);font-size:12.5px}
.acctNote.warn{color:#B27B00;font-weight:700}

/* Buttons and icons look like the page's own (.btn, .btn.sm/.dark/.lav, .ic). These fallbacks
   (BMS's look) are for a page without its own: :where() gives them no more priority than the
   page's rule for the same class, and the page's stylesheet comes later, so the page's wins. */
:where(.acct,.authDlg) .btn{border:0;border-radius:999px;padding:11px 18px;font-size:14.5px;font-family:inherit;font-weight:700;cursor:pointer;color:var(--onp,#3F3552);background:var(--mint,#CDF3E1)}
:where(.acct,.authDlg) .btn.lav{background:var(--lav,#E6DBFF)}
:where(.acct,.authDlg) .btn.dark{background:var(--solid,#4A3F5C);color:var(--solidfg,#FFFFFF)}
:where(.acct,.authDlg) .btn.sm{padding:5px 12px;font-size:12px}
:where(.acct,.authDlg) .btn:disabled{opacity:.45;cursor:default}
:where(.acct,.authDlg) .ic{width:1.1em;height:1.1em;vertical-align:-.2em;display:inline-block;flex:none}
/* A page's general .btn rule can't make them tall, shadowed or spaced out (e.g. big tap targets);
   its .btn.sm / .btn.dark / .btn.lav rules still can, on purpose. */
.acct .btn,.authDlg .btn{margin:0;min-height:auto;box-shadow:none}

.authDlg{border:0;border-radius:28px;padding:0;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;text-align:left;
  background:var(--card,#FFFFFF);color:var(--ink,#4A3F5C);font-family:var(--font,"Quicksand","Nunito","Segoe UI",system-ui,-apple-system,sans-serif);box-shadow:0 20px 60px rgba(60,40,90,.35)}
.authDlg form{padding:24px;margin:0}
.authDlg::backdrop{background:rgba(43,36,56,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.authDlg h2{margin:14px 0 2px;color:var(--ink,#4A3F5C)}
.authDlg .sub{display:block;margin:14px 0;color:var(--ink2,#8A7FA0);font-size:14px;font-weight:500}
.authDlg .aseg{display:flex;background:var(--cream,#FFF8F3);border-radius:999px;padding:5px;gap:4px}
.authDlg .aseg button{flex:1;border:0;border-radius:999px;padding:10px 12px;margin:0;min-height:auto;font-size:14px;cursor:pointer;background:transparent;color:var(--ink2,#8A7FA0);font-family:inherit;font-weight:700;box-shadow:none}
.authDlg .aseg button.on{background:var(--card,#FFFFFF);color:var(--ink,#4A3F5C);box-shadow:0 3px 10px rgba(120,90,160,.15)}
.authDlg .fld{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:700;color:var(--ink2,#8A7FA0);margin:0 0 12px}
.authDlg .fld small{font-weight:600}
.authDlg .fld input{border:2px solid var(--lav2,#C9B6FF);border-radius:999px;padding:11px 16px;margin:0;font-size:16px;font-family:inherit;font-weight:600;color:var(--ink,#4A3F5C);background:var(--card,#FFFFFF);min-width:0;box-shadow:none}
.authDlg .fld input:focus{outline:none;border-color:var(--mint2,#9FE3C3)}
.authDlg .upOnly,.authDlg .codeOnly{display:none}
.authDlg.up .upOnly{display:flex}
.authDlg.up p.upOnly{display:block}
.authDlg.up .codeOnly{display:none}
.authDlg.up.code .codeOnly{display:flex}
.authDlg .authErr{min-height:1.2em;margin:0 0 10px;color:var(--oops,#E5747F);font-size:13.5px;font-weight:700}
.authDlg .authErr:empty{margin:0}
.authDlg .authNote{font-size:12.5px;color:var(--ink2,#8A7FA0);margin:12px 0 0}
.authDlg .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}
.authDlg .row .btn{flex:1}
@media (max-width:880px){.acct{margin-top:8px}}
/* phones: the note is dropped (the button itself says "Signed out · sign in again") */
@media (max-width:640px){.acctNote{display:none}}