/* The account control (courses/_player/auth.js) in the player, the admin page and Studio, and their admin bar. */
.auth { position: relative; display: inline-flex; align-items: center; }
.auth-btn, .auth-me, .auth-google, .auth-out {
  font: inherit; font-size: 14px; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--line, rgba(127, 127, 127, .4)); background: transparent; color: inherit; padding: 6px 14px; }
.auth-btn, .top-nav a { white-space: nowrap; }
.auth-ico { display: none; }
.auth-me { width: 34px; height: 34px; padding: 0; font-weight: 600; }
.auth-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 240px; padding: 14px;
  border-radius: 12px; border: 1px solid var(--line, rgba(127, 127, 127, .4)); background: var(--bg, Canvas); color: var(--ink, CanvasText);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18); display: grid; gap: 10px; }
.auth-pop[hidden] { display: none; }
.auth-google { width: 100%; font-weight: 600; }
.auth-msg:empty { display: none; }
.auth-msg, .auth-email { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.top-nav { display: inline-flex; gap: 14px; align-items: center; font-size: 14px; }
.top-nav a { color: inherit; text-decoration: none; }
.top-nav a:hover, .top-nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.sk-bar { display: flex; gap: 18px; align-items: center; justify-content: flex-end; padding: 8px 20px; font: 14px/1.4 system-ui, sans-serif;
  border-bottom: 1px solid rgba(127, 127, 127, .3); }
.sk-bar a { color: inherit; text-decoration: none; }
.sk-bar a[aria-current] { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) { .top-nav { gap: 10px; font-size: 13px; } .top-nav .admin-link { display: none; } }