/* 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 (icon + .siteAccountDot)
                  > .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}
.siteAccountButton,.pt-controls .siteAccountButton{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:auto;height:38px;min-height:0;padding:0 10px;gap:6px;border-radius:var(--pt-radius-control,6px);
  background:var(--pt-panel);border:1px solid var(--pt-border);color:var(--pt-muted);cursor:pointer}
.siteAccountButton:hover,.siteAccountButton[aria-expanded="true"]{color:var(--pt-ink);border-color:var(--pt-border-strong)}
.siteAccountButton svg{width:20px;height:20px}
.siteAccountDot{position:absolute;right:1px;bottom:1px;width:9px;height:9px;border-radius:50%;
  background:var(--pt-border-strong);border:2px solid var(--pt-paper);display:none}
.siteAccount[data-signed-in="true"] .siteAccountDot{display:block;background:var(--pt-accent)}
.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)}
.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)}}

.siteAccountLabel{font-size:12px;white-space:nowrap}