/* The account control drawn by pond-account-menu.mjs into the header slot
   #accountControls (see pt/_header.html): a user icon at the far right of
   the nav, a small menu under it. Structure:
     .siteAccount > button.siteAccountButton (photo, initials or glyph)
                  > .siteAccountMenu (state, sign-in host, buttons, status, links) */
.siteAccount{position:relative;order:2;display:inline-flex;align-items:center;margin-left:4px}
.siteAccount[hidden]{display:none}
/* A circle, not a pill. Signed out it is an outline with a muted glyph;
   signed in it fills with the site's dark blue and the glyph goes white, so
   the state reads at a glance with no text beside it. Inside it sits a photo
   if the account has one, else initials, else the person glyph. */
/* Scoped by the header slot's id on purpose. design-system.css sizes every
   control with `.pt-controls :is(button, input:not([type=checkbox]):not([type=radio]))`,
   and :is() takes the specificity of its most specific argument, so that
   selector scores 0,3,1 and beat a plain `.pt-controls .siteAccountButton`
   at 0,2,0. The circle silently came out a 34x40 rounded rectangle. An id
   here is both more specific and more honest: this is one control in one
   slot, not a general button style. */
#accountControls .siteAccountButton,.siteAccountButton,.pt-controls .siteAccountButton{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;min-width:34px;min-height:34px;padding:0;flex:0 0 34px;
  border-radius:50%;overflow:hidden;
  background:var(--pt-panel);border:1px solid var(--pt-border);color:var(--pt-muted);
  cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}
.siteAccountButton:hover,.siteAccountButton[aria-expanded="true"]{color:var(--pt-ink);border-color:var(--pt-border-strong)}
.siteAccountButton:focus-visible{outline:2px solid var(--pt-accent);outline-offset:2px}
.siteAccountButton svg{width:19px;height:19px}

#accountControls[data-signed-in="true"] .siteAccountButton,.siteAccount[data-signed-in="true"] .siteAccountButton{
  background:var(--pt-accent);border-color:var(--pt-accent);color:var(--pt-on-accent,#fff)}
.siteAccount[data-signed-in="true"] .siteAccountButton:hover,
.siteAccount[data-signed-in="true"] .siteAccountButton[aria-expanded="true"]{
  background:var(--pt-accent-hover);border-color:var(--pt-accent-hover);color:var(--pt-on-accent,#fff)}

/* A photo fills the circle; initials sit centred in it. */
.siteAccountPhoto{width:100%;height:100%;object-fit:cover;display:block}
.siteAccountInitials{font:600 13px/1 system-ui,sans-serif;letter-spacing:.02em}

.siteAccountMenu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;min-width:230px;
  display:grid;gap:8px;padding:14px;background:var(--pt-paper);border:1px solid var(--pt-border);
  border-radius:var(--pt-radius-card);box-shadow:var(--pt-shadow-small);text-align:left}
.siteAccountMenu[hidden]{display:none}
.siteAccountState{margin:0 0 2px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pt-subtle)}
/* Which account, under the Signed in label. Normal casing, unlike the label
   above it, because an email in small caps is unreadable. */
.siteAccountIdentity{margin:-4px 0 2px;font-size:12.5px;line-height:1.4;color:var(--pt-ink);overflow-wrap:anywhere}
.siteAccountIdentity[hidden]{display:none}
.siteAccountSignIn{display:grid;justify-items:start;gap:8px;min-height:40px}
.siteAccountSignIn[hidden]{display:none}
.pt-controls .siteAccountMenu button{width:100%;min-height:38px;padding:8px 12px;font-size:13px;text-align:left}
.siteAccountMenu button[hidden]{display:none}
.siteAccountStatus{margin:0;font-size:13px;color:var(--pt-muted)}
.siteAccountStatus:empty{display:none}
.siteAccountLinks{display:flex;flex-wrap:wrap;gap:4px 14px;padding-top:8px;border-top:1px solid var(--pt-border);font-size:12px}
.siteAccountLinks a{color:var(--pt-subtle);text-decoration:none}
.siteAccountLinks a:hover{color:var(--pt-accent);text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.siteAccountMenu{min-width:210px;max-width:calc(100vw - 32px)}}

/* Free account prompt (pond-account-gate.js): room between the sign-in button and the actions. */
.accountGateSignIn:not(:empty),.accountGateDialog [role=status]:not([hidden]){margin:0 0 16px}