/* Account pill and sign-in dialog. Shared by the dashboard and the settings page. */

/* The two host pages define slightly different palettes: --line-strong, --muted and --soft exist on
   the settings page only. Every colour here is therefore taken from the host page when it has one
   and falls back to a literal when it does not, so the same stylesheet lands correctly on both. */
:root{
  --acct-ink-rgb:33,28,29;
  --acct-shadow-rgb:41,29,32;
  --acct-red-rgb:230,0,35;

  --acct-ink:var(--ink,#211c1d);
  --acct-ink-2:var(--ink-2,#514a4c);
  --acct-muted:var(--muted,#7f7779);
  --acct-line:var(--line,#e9e5e6);
  --acct-line-strong:var(--line-strong,#ddd6d8);
  --acct-line-hover:#cfc6c9;
  --acct-soft:var(--soft,#f7f5f5);
  --acct-paper:#fff;
  --acct-field:#fff;
  --acct-red:var(--red,#e60023);
  /* The filled buttons carry white text, so their red never lightens the way red text may. */
  --acct-red-btn:var(--red,#e60023);
  --acct-red-btn-hover:var(--red-dark,#c9001f);
  --acct-on-red:#fff;
  --acct-red-wash:#fff0f2;
  --acct-red-wash-soft:#fffafa;
  --acct-red-wash-sel:#fff7f8;
  --acct-ok:#37a169;
  --acct-busy:#d8a200;
  --acct-good:#2f855a;
  /* A scrim darkens whatever is under it, so it rides the shadow channel, not the ink one. */
  --acct-scrim:rgba(var(--acct-shadow-rgb),.44);
  --acct-sh-menu:0 18px 44px rgba(var(--acct-shadow-rgb),.16);
  --acct-sh-card:0 26px 64px rgba(var(--acct-shadow-rgb),.28);
  --acct-sh-go:0 10px 22px rgba(var(--acct-red-rgb),.2);
}

/* Dark. theme.js resolves "follow the device" into this attribute before the first paint. */
:root[data-theme="dark"]{
  --acct-ink-rgb:233,238,244;
  --acct-shadow-rgb:0,0,0;
  --acct-red-rgb:255,59,84;

  --acct-ink:var(--ink,#E9EEF4);
  --acct-ink-2:var(--ink-2,rgba(var(--acct-ink-rgb),.82));
  --acct-muted:var(--muted,#97A3B2);
  --acct-line:var(--line,rgba(var(--acct-ink-rgb),.20));
  --acct-line-strong:var(--line-strong,rgba(var(--acct-ink-rgb),.28));
  --acct-line-hover:rgba(var(--acct-ink-rgb),.38);
  --acct-soft:var(--soft,#1A2738);
  --acct-paper:#14202F;
  --acct-field:#0C1522;
  --acct-red:var(--red,#FF3B54);
  --acct-red-btn:#FF3B54;
  --acct-red-btn-hover:#e12645;
  --acct-red-wash:rgba(var(--acct-red-rgb),.20);
  --acct-red-wash-soft:rgba(var(--acct-red-rgb),.08);
  --acct-red-wash-sel:rgba(var(--acct-red-rgb),.14);
  --acct-ok:#3DC98C;
  --acct-good:#3DC98C;
  --acct-scrim:rgba(var(--acct-shadow-rgb),.62);
  --acct-sh-menu:0 18px 44px rgba(var(--acct-shadow-rgb),.44);
  --acct-sh-card:0 26px 64px rgba(var(--acct-shadow-rgb),.60);
  --acct-sh-go:0 10px 22px rgba(var(--acct-red-rgb),.26);
}

.acctSlot{ display:flex; align-items:center; flex:0 0 auto; }
.acctPill{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 13px 0 10px;
  border:1px solid var(--acct-line-strong); border-radius:999px; background:var(--acct-paper);
  color:var(--acct-ink); font:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
  white-space:nowrap; transition:border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.acctPill:hover{ border-color:var(--acct-line-hover); background:var(--acct-red-wash-soft); }
.acctPill:focus-visible{ outline:3px solid rgba(var(--acct-red-rgb),.18); outline-offset:2px; }
.acctPill .ico,.acctPill svg{ width:16px; height:16px; flex:0 0 auto; }

/* Signed out it reads as an invitation, not a warning: red outline, no badge, no nagging. */
.acctPill.isOut{ border-color:rgba(var(--acct-red-rgb),.4); color:var(--acct-red); background:var(--acct-red-wash-sel); }
.acctPill.isOut:hover{ border-color:var(--acct-red); background:var(--acct-red-wash); }

.acctAvatar{
  width:23px; height:23px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%;
  background:var(--acct-red-btn); color:var(--acct-on-red); font-size:10.5px; font-weight:900; letter-spacing:.02em;
}
.acctPillTxt{ max-width:15ch; overflow:hidden; text-overflow:ellipsis; }
.acctDot{ width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--acct-ok); }
.acctDot.isBusy{ background:var(--acct-busy); }
.acctDot.isBad{ background:var(--acct-red); }
.acctDot.isOff{ background:var(--acct-muted); }

.acctMenu{
  position:absolute; z-index:60; min-width:248px; padding:7px; border:1px solid var(--acct-line);
  border-radius:15px; background:var(--acct-paper); box-shadow:var(--acct-sh-menu);
}
.acctMenuHead{ padding:10px 11px 11px; border-bottom:1px solid var(--acct-line); margin-bottom:6px; }
.acctMenuHead strong{ display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.acctMenuHead small{ display:block; margin-top:3px; color:var(--acct-muted); font-size:11.5px; }
.acctMenuItem{
  width:100%; padding:9px 11px; display:block; border:0; border-radius:10px; background:none;
  color:var(--acct-ink); font:inherit; font-size:12.5px; font-weight:700; text-align:start; cursor:pointer;
}
.acctMenuItem:hover{ background:var(--acct-soft); }
.acctMenuItem.isDanger{ color:var(--acct-red); }

.acctOverlay{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px;
  background:var(--acct-scrim); backdrop-filter:blur(2px);
}
.acctCard{
  width:min(392px,100%); padding:26px; border-radius:20px; background:var(--acct-paper);
  box-shadow:var(--acct-sh-card); text-align:start;
}
.acctCard h2{ margin:0 0 7px; font-size:19px; line-height:1.25; }
.acctCard p{ margin:0 0 18px; color:var(--acct-muted); font-size:13px; line-height:1.55; }
.acctCard label{ display:block; margin-bottom:7px; font-size:12px; font-weight:800; color:var(--acct-ink-2); }
.acctCard input{
  width:100%; height:46px; padding:0 15px; box-sizing:border-box; border:1px solid var(--acct-line-strong);
  border-radius:13px; background:var(--acct-field); color:var(--acct-ink); font:inherit; font-size:15px;
}
.acctCard input::placeholder{ color:var(--acct-muted); }
.acctCard input:focus-visible{ border-color:rgba(var(--acct-red-rgb),.5); outline:3px solid rgba(var(--acct-red-rgb),.14); outline-offset:1px; }
.acctCode{ letter-spacing:.42em; text-align:center; font-weight:800; font-size:20px !important; }
.acctGo{
  width:100%; height:46px; margin-top:14px; border:0; border-radius:999px; background:var(--acct-red-btn);
  color:var(--acct-on-red); font:inherit; font-size:13.5px; font-weight:850; cursor:pointer;
  box-shadow:var(--acct-sh-go); transition:background .14s ease, opacity .14s ease;
}
.acctGo:hover{ background:var(--acct-red-btn-hover); }
.acctGo:disabled{ opacity:.6; cursor:default; }
.acctAuthDivider{ display:flex; align-items:center; gap:11px; margin:17px 0 0; color:var(--acct-muted); font-size:11px; font-weight:700; }
.acctAuthDivider::before,.acctAuthDivider::after{ content:""; flex:1; height:1px; background:var(--acct-line); }
.acctGoogle{ width:100%; min-height:46px; margin-top:12px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--acct-line-strong); border-radius:999px; background:var(--acct-paper); color:var(--acct-ink); font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; }
.acctGoogleIcon{ width:24px; height:24px; padding:2px; border-radius:50%; background:#fff; object-fit:contain; box-sizing:border-box; flex:0 0 auto; }
.acctGoogle:hover{ background:var(--acct-soft); border-color:var(--acct-line-hover); }
.acctAuthDivider[hidden],.acctGoogle[hidden]{ display:none; }
.acctLink{
  margin-top:13px; display:inline-block; border:0; padding:0; background:none; color:var(--acct-muted);
  font:inherit; font-size:12px; font-weight:700; text-decoration:underline; cursor:pointer;
}
.acctLink:hover{ color:var(--acct-ink); }
.acctNote{ margin:16px 0 0; display:flex; gap:7px; align-items:flex-start; color:var(--acct-muted); font-size:11.5px; line-height:1.5; }
.acctLegal{ margin:9px 0 0; color:var(--acct-muted); font-size:10.8px; line-height:1.5; }
.acctLegal a{ color:inherit; font-weight:700; text-underline-offset:2px; }
.acctLegal a:hover{ color:var(--acct-ink); }
.acctSays{ margin-top:13px; min-height:18px; font-size:12.5px; font-weight:700; }
.acctSays.isBad{ color:var(--acct-red); }
.acctSays.isGood{ color:var(--acct-good); }
.acctTimer{ font-variant-numeric:tabular-nums; }