/* The account control in the header (site/assets/account.js), shared by the content pages and the trainer.
   Tokens only (both stylesheets define them), logical properties only, so the same rules serve a left-to-right
   language by flipping `dir`. */

.acct{position:relative; flex:none;}

/* One button for both states. Its box is reserved while the state is unknown, so the header does not jump. */
.acct-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; min-width:44px; padding:0 14px; box-sizing:border-box;
  border:1px solid var(--border); border-radius:22px; background:var(--surface);
  color:var(--text); font:inherit; font-size:14.5px; font-weight:600; white-space:nowrap; cursor:pointer;
}
.acct-btn:hover{border-color:var(--teal);}
.acct-btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.acct[data-state="unknown"] .acct-btn{visibility:hidden;}

.acct-initial{
  display:none; width:30px; height:30px; border-radius:50%;
  align-items:center; justify-content:center;
  background:var(--green); color:var(--on-green); font-family:var(--font-head); font-weight:700; font-size:15px;
}
.acct[data-state="in"] .acct-btn{padding:0 6px; border-color:var(--green);}
.acct[data-state="in"] .acct-initial{display:inline-flex;}
.acct[data-state="in"] .acct-label-out{display:none;}
.acct:not([data-state="in"]) .acct-label-in{display:none;}

/* Words that name the control for screen readers, not shown on screen. */
.acct-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.acct-pop{
  position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0; z-index:950;
  width:min(320px, calc(100vw - 32px)); box-sizing:border-box; padding:14px 16px;
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--card-shadow); text-align:start; font-size:14.5px; line-height:1.6;
}
.acct-pop[hidden]{display:none;}
.acct-pop p{margin:0 0 12px;}
.acct-pop a{color:var(--text); text-decoration:underline; text-underline-offset:3px;}
.acct-part{display:none;}
.acct[data-state="in"] .acct-in,
.acct:not([data-state="in"]) .acct-out{display:block;}
.acct-notice{color:var(--text-soft);}
.acct-who{overflow-wrap:anywhere;}
.acct-email{font-weight:600;}

.acct-links{display:flex; flex-direction:column; gap:2px; margin:0 0 10px; padding:0; list-style:none;}
.acct-links a{display:flex; align-items:center; min-height:44px;}

.acct-action{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:44px;
  border-radius:10px; font:inherit; font-weight:700; cursor:pointer; box-sizing:border-box;
}
.acct-signin{background:var(--green); color:var(--on-green); border:1px solid var(--green);}
.acct-signout{background:transparent; color:var(--text); border:1px solid var(--border);}
.acct-action:disabled{opacity:.6; cursor:wait;}
.acct-msg{color:var(--red-text); margin:10px 0 0;}
.acct-msg[hidden]{display:none;}

@media (prefers-reduced-motion: reduce){ .acct-btn{transition:none;} }