/* Ghost account buttons in the site header. Matches .themeBtn so the header stays one row. */
/* The 26px separates the auth pair from the tagline that sits to its left, so the two do
   not read as one cluster. The mobile rule below tightens it once the tagline is hidden. */
.acctWrap { display:inline-flex; align-items:center; gap:8px; margin-left:26px; flex-shrink:0; }
.acctBtn {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; text-decoration:none;
  background:transparent; border:1px solid var(--line); border-radius:8px;
  padding:7px 12px; color:var(--cream-dim);
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  transition:border-color .18s, color .18s;
}
.acctBtn:hover, .acctBtn:focus-visible { border-color:var(--butter); color:var(--butter); }
/* Sign in (and Your account) read as disabled in plain grey next to the filled Create
   account button. Outline and label take the lab diagram green, #00C853. In light mode
   that green fails on a pale background, so it follows the page's own light green token,
   the same switch every other green on the page makes. */
.acctBtn:not(.primary) { border-color:#00C853; color:#00C853; }
.acctBtn:not(.primary):hover, .acctBtn:not(.primary):focus-visible {
  border-color:#00C853; color:#00C853; background:rgba(0,200,83,.12);
}
:root[data-theme="light"] .acctBtn:not(.primary) { border-color:var(--green); color:var(--green); }
:root[data-theme="light"] .acctBtn:not(.primary):hover,
:root[data-theme="light"] .acctBtn:not(.primary):focus-visible {
  border-color:var(--green); color:var(--green); background:rgba(15,107,51,.10);
}
.acctBtn.primary { border-color:var(--butter); color:var(--butter); }
.acctBtn.primary:hover { background:var(--butter); color:var(--bg); }
/* Lab headers size their controls a touch smaller than the static pages; match them so the
   account buttons sit in the row rather than on top of it. The lab row supplies its own gap. */
header:not(.site) .acctWrap { margin-left:0; gap:10px; }
header:not(.site) .acctBtn { padding:6px 11px; border-radius:7px; }

@media (max-width:760px) {
  .acctWrap { gap:6px; margin-left:8px; }
  .acctBtn { padding:7px 10px; font-size:9.5px; letter-spacing:.08em; }
}
@media (prefers-reduced-motion:reduce) { .acctBtn { transition:none; } }