/* ========== Sync — Header Avatar + Account Dropdown ========== */

/* Pulse animation for syncing state */
@keyframes syncPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Sync-complete pulse — plays once when sync brings changes */
@keyframes syncCompletePulse {
    0% { box-shadow: 0 0 0 0 rgba(163, 177, 138, 0.5); }
    50% { box-shadow: 0 0 0 4px rgba(163, 177, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(163, 177, 138, 0); }
}
.header-avatar-sync-dot.just-synced {
    animation: syncCompletePulse 600ms ease-out;
}

/* ---- Ghost sign-in button (header, signed-out state) ----
   Byte-matches the hall beam's .gb-signin (home-hall.css) — ONE Sign in
   species on both levels of the building (topnav unification). */
.header-sign-in-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(44, 44, 44, 0.14);
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--text-secondary, #57534e);
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
}
.header-sign-in-btn:hover {
    background: transparent;
    border-color: rgba(44, 44, 44, 0.28);
    color: var(--text-primary, #2C2C2C);
}
.header-sign-in-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ---- Avatar wrapper + button (header, signed-in state) ---- */
.header-avatar-wrapper {
    position: relative;
}
.header-avatar-btn {
    position: relative;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 280ms cubic-bezier(0.16,1,0.3,1);
}
.header-avatar-btn:hover {
    opacity: 0.85;
}
.header-avatar-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #EDE8E0;
    border: 1.5px solid rgba(201, 169, 110, 0.25);
    color: #8C7A5E;
    font-size: 13px;
    font-weight: 600;
    font-family: Inter, system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
}

/* Sync dot on avatar */
.header-avatar-sync-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--card-surface, #FAFAF7);
    pointer-events: none;
    transition: background 0.3s ease;
}
.header-avatar-sync-dot.synced {
    background: rgba(163, 177, 138, 0.9);
}
.header-avatar-sync-dot.syncing,
.header-avatar-sync-dot.connecting {
    background: var(--color-gold);
    animation: syncPulse 1.2s ease-in-out infinite;
}
.header-avatar-sync-dot.error {
    background: #c97d6e;
}
.header-avatar-sync-dot.none {
    display: none;
}

/* ---- Account dropdown ---- */
.header-account-dropdown {
    position: fixed;
    display: none;
    width: 240px;
    background: var(--card-surface, #FAFAF7);
    border: 1px solid rgba(44,44,44,0.06);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(44,44,44,0.08), 0 1px 3px rgba(44,44,44,0.04);
    padding: 12px 0;
    z-index: 1000;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
}
/* desktop polish round 2 (13 October 2026), finding 12: ONE MENU CARD dress
   on desktop, the same for every card that pops (the lesson's ⋮ card in
   course-lesson.css is the reference; the hall's ⋯ card and the search
   palette wear it too): bright paper, one 10 per cent hairline, the 8px
   radius, the two-layer resting shadow, no grain. Width, position, padding,
   rows, animation and z-index stay the menu's own. Mobile (another product)
   keeps the rule above as it was. */
@media (min-width: 769px) {
    .header-account-dropdown {
        background: var(--color-card-bright, #FEFDFB);
        background-image: none;
        border: 1px solid rgba(44,44,44,0.10);
        border-radius: var(--radius, 8px);
        box-shadow: 0 1px 2px rgba(44,44,44,0.04), 0 2px 8px rgba(44,44,44,0.05);
    }
}
.header-account-dropdown.open {
    display: block;
    animation: dropdownFadeIn 180ms cubic-bezier(0.16,1,0.3,1);
    pointer-events: auto;
}
@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.header-dropdown-user {
    padding: 4px 16px 8px;
}
.header-dropdown-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary, #2C2C2C);
    line-height: 1.3;
}
.header-dropdown-email {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary, #8C8578);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header-dropdown-divider {
    height: 1px;
    background: rgba(201, 169, 110, 0.10);
    margin: 4px 0;
}
.header-dropdown-sync-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 12px;
    color: var(--text-tertiary, #8C8578);
}
.header-dropdown-sync-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.header-dropdown-sync-dot.synced {
    background: rgba(163, 177, 138, 0.9);
}
.header-dropdown-sync-dot.syncing,
.header-dropdown-sync-dot.connecting {
    background: var(--color-gold);
    animation: syncPulse 1.2s ease-in-out infinite;
}
.header-dropdown-sync-dot.error {
    background: #c97d6e;
}

.header-dropdown-action {
    display: block;
    width: calc(100% - 16px);
    margin: 0 8px;
    padding: 7px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-secondary, #57534e);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}
/* The dropdown's sign-out row says where the words go, the same sentence the
   hall's account popover uses. Sign-out takes them off this device once they
   are provably saved, so the row states that rather than leaving the reader to
   guess (and rather than the old "they stay here", which is what made the
   device a shared pile). */
.header-dropdown-actionsub {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--text-secondary, #57534e);
    opacity: 0.75;
}
.header-dropdown-action:hover {
    background: rgba(201, 169, 110, 0.06);
    color: var(--text-primary, #2C2C2C);
    transform: none;
    box-shadow: none;
}

/* Reset progress moved to settings sidebar (css/browse-sidebar.css) */

/* ---- Mobile: compact sign-in & avatar ---- */
@media (max-width: 768px) {
  .header-sign-in-btn {
    padding: 6px;
    gap: 0;
    border-radius: 10px;
    width: 34px;
    height: 34px;
    justify-content: center;
  }
  .header-sign-in-btn .sign-in-label {
    display: none;
  }
  .header-sign-in-btn svg {
    width: 17px;
    height: 17px;
  }

  .header-avatar-btn {
    width: 30px;
    height: 30px;
  }
  .header-avatar-circle {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .header-avatar-sync-dot {
    width: 7px;
    height: 7px;
    bottom: 0;
    right: 0;
    border-width: 1.5px;
  }

  .header-account-dropdown {
    width: min(260px, calc(100vw - 24px));
  }
}