/*
 * The public pages' signed-in header (web/brand/site-auth.js sets <html data-cd-auth="in"> before the first paint from
 * the signed-in hint cookie). Guest markup and member markup are both in the page; these rules show one of them.
 * Colours come from the page (currentColor), sizes from /assets/atlas-tokens.css.
 */

/* Anywhere on the page: guest-only / member-only elements. */
html[data-cd-auth="in"] [data-auth="guest"],
html:not([data-cd-auth="in"]) [data-auth="member"] { display: none !important; }

/* The header's sign-in slot: "Sign in" and the member's "Account" share one grid cell, so the slot is as wide as the
   wider of the two whichever one shows; nothing beside it moves when the state changes. */
.cd-auth { display: inline-grid; align-items: center; justify-items: end; }
.cd-auth > [data-auth-slot] { grid-area: 1 / 1; }
html[data-cd-auth="in"] .cd-auth > [data-auth-slot="guest"],
html:not([data-cd-auth="in"]) .cd-auth > [data-auth-slot="member"] { visibility: hidden; pointer-events: none; }

/* The member's account link: their initial in a ring, then "Account". Zero specificity (:where), so a page's own rule
   for its link (e.g. home hides "Sign in" and this link on phones) still wins. */
:where(.cd-auth-acct) { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cd-auth-av {
  display: inline-grid; place-items: center; flex: none; inline-size: 20px; block-size: 20px;   /* = the 13 px line height: the slot is no taller than "Sign in" */
  border-radius: var(--a-r-pill, 999px); box-shadow: inset 0 0 0 1px currentColor;
  font-size: var(--a-fs-2xs, 10px); font-weight: var(--a-fw-semibold, 600); line-height: 1;
}
.cd-auth-av:empty { opacity: .5; }

/* Pages without a link style of their own for it (profiles, docs, 404): a quiet header link. */
.cd-auth-link { color: var(--a-fg-2); text-decoration: none; font-size: var(--a-fs-md); font-weight: var(--a-fw-medium); }
.cd-auth-link:hover { color: var(--a-fg-1); }
/* Groups the header's right-hand items where the header spaces its children apart (profiles, the 404). */
.cd-auth-row { display: inline-flex; align-items: center; gap: 16px; }

/* A plan button that is the member's current plan: says so, does nothing. */
[data-auth-current] { pointer-events: none; cursor: default; opacity: .75; }