/* account.css — Discord account control. Uses the existing theme/glass variables and the shared .menu / .menu-list
   dropdown, so it follows whichever theme is active. Loaded last. */
.acct { display: inline-flex; align-items: center; }
.acct [hidden] { display: none !important; }            /* theme.css gives every button display:inline-flex, which would defeat [hidden] */
.acct-signin .i { width: 17px; height: 17px; color: #8b95ff; }   /* Discord blurple tint on the glyph only */
.acct-signin:disabled { opacity: .65; cursor: default; }
.acct[data-state="signing-in"] .acct-signin .i, .acct[data-state="init"] .acct-signin .i { animation: acct-pulse 1.1s ease-in-out infinite; }
@keyframes acct-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .acct .i { animation: none !important; } }

.acct-user { padding: 3px 10px 3px 4px !important; gap: 8px; max-width: 220px; }
.acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.acct-caret { color: var(--muted); font-size: 10px; }

.acct-av { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center;
  background: var(--accent-dim, rgba(79,140,240,.18)); border: 1px solid var(--border, rgba(170,200,240,.14)); font-size: 12px; font-weight: 600; color: var(--text); }
.acct-av.big { width: 40px; height: 40px; font-size: 16px; }
.acct-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.acct .menu-list.acct-list { min-width: 240px; max-width: 92vw; padding: 8px; }
.acct-card { display: flex; align-items: center; gap: 10px; padding: 6px 6px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border, rgba(170,200,240,.14)); }
.acct-who { min-width: 0; }
.acct-dn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-sub { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-sub:empty { display: none; }

/* landing top bar: keep the account button on the same row as the other actions */
.actions { align-items: center; }
@media (max-width: 720px) { .acct-name, .acct-caret { display: none; } .acct-user { padding: 3px !important; } .acct-label { display: none; } }

/* The landing top bar is a stacking context (glass backdrop-filter) that sits BEFORE .workspace in the page, so the
   workspace was painting over any dropdown that hangs below the bar. Lift the bar above the workspace; modals (z-index 100) stay above it. */
.topbar { position: relative; z-index: 20; }

/* ---------- login gate (js/cloud/gate.js) ---------- */
/* While locked the whole app is hidden and non-interactive. visibility (not display) keeps the editor's layout, so its canvas size is untouched. */
body.auth-locked > .topbar, body.auth-locked > .workspace, body.auth-locked > #editor,
body.auth-locked > #gfModal, body.auth-locked > .tests { visibility: hidden !important; pointer-events: none !important; }
.auth-gate { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px; overflow: auto; background: #04060b; }  /* below toasts (200) so errors stay visible */
.auth-gate[hidden] { display: none; }
.auth-panel { width: min(420px, 100%); box-sizing: border-box; padding: 36px 32px 32px; text-align: center; background: #0c1018; border: 1px solid var(--gb, rgba(170,200,240,.14)); border-radius: 20px; }
.auth-logo { display: block; height: 64px; width: auto; max-width: 100%; margin: 0 auto 18px; }
.auth-panel h1 { text-wrap: balance; margin: 0 0 12px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--text, #e6ecf5); }
.auth-panel p { margin: 0 0 20px; color: var(--muted, #8d9bb2); font-size: 14px; line-height: 1.5; }
.auth-panel .auth-note { margin: -8px 0 16px; font-size: 12px; word-break: break-word; }
.auth-view[hidden] { display: none; }
.auth-panel button { padding: 10px 20px; font-size: 14px; }
.auth-panel button .i { width: 18px; height: 18px; }
.auth-panel button:disabled { opacity: .65; cursor: default; }
.auth-msg { margin: 18px 0 0 !important; padding: 10px 12px; border-radius: 12px; font-size: 13px !important; color: var(--text, #e6ecf5) !important; background: rgba(236,107,114,.10); border: 1px solid rgba(236,107,114,.35); }
.auth-msg[data-kind="info"] { background: rgba(79,127,184,.10); border-color: rgba(79,127,184,.35); }
.auth-msg[hidden] { display: none; }
.auth-spin { display: inline-block; width: 12px; height: 12px; margin-right: 10px; vertical-align: -1px; border: 2px solid var(--gb, rgba(170,200,240,.3)); border-top-color: var(--a1, #4f7fb8); border-radius: 50%; animation: auth-spin .9s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-spin { animation: none; } }

/* membership screen (Discord server check) */
.auth-actions { display: flex; flex-direction: column; gap: 10px; }
.auth-actions button { width: 100%; }
.auth-panel .auth-link { margin-top: 16px; padding: 4px 8px; font-size: 13px; color: var(--muted, #8d9bb2) !important; background: none !important; border: 0 !important; box-shadow: none !important; text-decoration: underline; transform: none !important; }
.auth-panel .auth-link:hover:not(:disabled) { color: var(--text, #e6ecf5) !important; }
.auth-actions + .auth-msg { margin-top: 16px !important; }