/* Shared navbar login control, also used on maintenance screens in panels. */
.discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 24px;          /* px-6 py-2 */
  border-radius: 8px;         /* rounded-lg */

  font-size: 0.875rem;        /* text-sm */
  font-weight: 500;           /* font-medium */
  color: white;

  background: #5865F2;
  border: none;

  transition: all .2s ease;
}

.discord-btn:hover {
  background: #4752C4;
  box-shadow: 0 0 15px rgba(88,101,242,.35);
  transform: translateY(-2px);
}

.discord-btn:active {
  transform: scale(.97);
}

.discord-btn-icon {
  width: 16px;
  height: 16px;
  transition: transform .25s ease, filter .25s ease;
}

#login-btn .discord-btn-icon,
#mobile-login-btn .discord-btn-icon {
  width: 20px;
  height: 20px;
  /* Keep the existing 18px layout footprint and animated transforms. */
  margin: -1px;
}

.discord-btn:hover .discord-btn-icon {
  transform: rotate(-8deg) scale(1.08);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.4));
}

.discord-login-control { --discord-login-radius: 8px; position: relative; display: flex; align-items: stretch; flex-shrink: 0; }
body:not(.auth-session-ready) .discord-login-control { visibility: hidden; }
.discord-login-control:has(> .hidden) { display: none; }
.discord-login-control > .discord-btn { padding-right: 42px; border-radius: var(--discord-login-radius); white-space: nowrap; }
.discord-login-toggle { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; color: #fff; background: transparent; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.discord-login-control:has(> .discord-login-toggle:hover) > .discord-btn { background: #4752C4; box-shadow: 0 0 15px rgba(88,101,242,.35); transform: translateY(-2px); }
.discord-login-control:has(> .discord-btn:hover, > .discord-login-toggle:hover) > .discord-login-toggle { transform: translateY(-2px); }
.discord-login-toggle:hover { background: rgba(255,255,255,.14); }
.discord-login-toggle svg { width: 17px; height: 17px; transition: transform .28s cubic-bezier(.22,1,.36,1); }
.discord-login-control.is-open .discord-login-toggle svg { transform: rotate(180deg); }
.discord-login-options { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(300px, calc(100vw - 32px)); padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: transparent; box-shadow: 0 24px 60px rgba(0,0,0,.34); backdrop-filter: blur(18px) saturate(1.14); -webkit-backdrop-filter: blur(18px) saturate(1.14); color: #e2e8f0; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top right; transition: opacity .24s ease, transform .28s cubic-bezier(.22,1,.36,1), visibility .28s; }
.discord-login-control.is-open .discord-login-options { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.discord-login-options[popover] { position: fixed; inset: auto; margin: 0; box-sizing: border-box; max-height: calc(100dvh - 24px); overflow-y: auto; }
.discord-login-options[popover]::backdrop { background: transparent; pointer-events: none; }
@media (max-width: 1023px) {
  #mobile-menu .discord-login-options[popover], #mobile-menu .discord-login-control.is-open .discord-login-options[popover] { position: fixed; margin: 0; padding: 14px; border-width: 1px; overflow-y: auto; }
}
.discord-login-options h3 { margin: 0 0 10px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.discord-login-options label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.discord-login-options input { appearance: none; width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; border: 1px solid rgba(148,163,184,.4); border-radius: 6px; background: rgba(255,255,255,.06); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.discord-login-options input:checked { border-color: #5865f2; background: #5865f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m5 10 3 3 7-7'/%3E%3C/svg%3E") center / 18px no-repeat; }
.discord-login-options strong { display: block; font-size: .85rem; font-weight: 600; }
.discord-login-options small { display: block; margin-top: 4px; color: #94a3b8; font-size: .75rem; line-height: 1.5; }
.discord-login-progress { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.discord-login-control.is-connecting .discord-btn > :not(.discord-login-progress) { display: none; }
.discord-login-control.is-connecting .discord-login-toggle { pointer-events: none; opacity: .4; }
.discord-login-spinner { width: 17px; height: 17px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: discordLoginSpin .8s linear infinite; }
.discord-login-dots { display: inline-flex; margin-left: -8px; }
.discord-login-dots span { animation: discordLoginDot 1s ease-in-out infinite; }
.discord-login-dots span:nth-child(2) { animation-delay: .15s; }
.discord-login-dots span:nth-child(3) { animation-delay: .3s; }
.discord-login-toggle:focus-visible, .discord-login-options input:focus-visible { outline: 2px solid #ccd6e2; outline-offset: 2px; }
@media (max-width: 1023px) {
  nav:has(.nav-desktop-links) #mobile-menu.open { display: block; }
  #mobile-menu .discord-login-control { flex-wrap: wrap; width: 100%; }
  #mobile-menu .discord-login-toggle { top: 4px; bottom: auto; height: 30px; }
  #mobile-menu .discord-login-options { position: static; width: 100%; max-height: 0; padding: 0 14px; border-width: 0; overflow: hidden; transition: max-height .28s ease, padding .28s ease, margin .28s ease, opacity .24s ease, visibility .28s; }
  #mobile-menu .discord-login-control.is-open .discord-login-options { max-height: 240px; padding: 14px; margin-top: 6px; border-width: 1px; }
  #mobile-menu.open:has(.discord-login-control.is-open) { max-height: 80dvh; overflow-y: auto; }
}
@keyframes discordLoginSpin { to { transform: rotate(360deg); } }
@keyframes discordLoginDot { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .discord-login-options, .discord-login-toggle svg { transition: none; }
  .discord-login-spinner, .discord-login-dots span { animation: none; }
}

/* Navbar login scales as one control, like its neighboring links. */
nav .discord-login-control {
  transform-origin: center;
  transition: transform .24s cubic-bezier(.34, 1.56, .64, 1);
}
nav .discord-login-control > .discord-btn:is(:hover, :active),
nav .discord-login-control:has(> .discord-login-toggle:hover) > .discord-btn,
nav .discord-login-control:has(> .discord-btn:hover, > .discord-login-toggle:hover) > .discord-login-toggle { transform: none; }
@media (hover: hover) and (pointer: fine) {
  nav .discord-login-control:has(> .discord-btn:hover, > .discord-login-toggle:hover) { transform: scale(1.03); }
}
nav .discord-login-control:has(> .discord-btn:active, > .discord-login-toggle:active) { transform: scale(.97); transition-duration: .12s; }
html[data-ui-motion="reduced"] nav .discord-login-control,
html[data-ui-motion="reduced"] nav .discord-login-control:is(:hover, :active) { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  nav .discord-login-control,
  nav .discord-login-control:has(> .discord-btn:hover, > .discord-login-toggle:hover),
  nav .discord-login-control:has(> .discord-btn:active, > .discord-login-toggle:active) { transform: none; transition: none; }
}