/* ============================================================
   ANNOTATED NOTEBOOK SKIN - account dropdown chrome.
   COLORS ONLY. The legacy navbar/dropdown structure and JS stay 1:1;
   this file re-points account-popup/account-btn ink to nb tokens.
   ============================================================ */

html.theme-light .account-btn {
  background: var(--nb-paper-raised);
  border-color: var(--nb-control-border);
  box-shadow: none;
  color: var(--nb-ink-2);
  text-shadow: none;
}
html:not(.theme-light) .account-btn {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: none;
  color: var(--nb-ink-2);
  text-shadow: none;
}

html.theme-light .account-btn:hover {
  background: var(--nb-blue-wash);
  border-color: var(--nb-control-border);
  box-shadow: none;
  color: var(--nb-blue);
}
html:not(.theme-light) .account-btn:hover {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  box-shadow: none;
  color: var(--nb-blue);
}

html.theme-light .account-btn:focus-visible,
html:not(.theme-light) .account-btn:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}

html.theme-light .account-btn--current,
html.theme-light .account-btn--current:hover,
html:not(.theme-light) .account-btn--current,
html:not(.theme-light) .account-btn--current:hover {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  box-shadow: none;
  color: var(--nb-blue);
}

html.theme-light .account-popup {
  background: var(--nb-paper-raised);
  border-color: var(--nb-control-border);
  border-top-color: var(--nb-control-border);
  box-shadow: var(--nb-shadow-2);
  color: var(--nb-ink);
}
html:not(.theme-light) .account-popup {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  border-top-color: var(--nb-border);
  box-shadow: var(--nb-shadow-2);
  color: var(--nb-ink);
}

html.theme-light .account-popup-heading,
html:not(.theme-light) .account-popup-heading {
  color: var(--nb-ink);
}

html.theme-light .account-popup-email,
html.theme-light .account-popup-footer,
html:not(.theme-light) .account-popup-email,
html:not(.theme-light) .account-popup-footer {
  color: var(--nb-ink-2);
}

html.theme-light .account-popup-avatar,
html:not(.theme-light) .account-popup-avatar {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  box-shadow: none;
  color: var(--nb-blue);
}

html.theme-light .account-popup-avatar--guest,
html:not(.theme-light) .account-popup-avatar--guest {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
}

html.theme-light .account-popup-plan-badge,
html.theme-light .account-popup-plan-badge--free,
html:not(.theme-light) .account-popup-plan-badge,
html:not(.theme-light) .account-popup-plan-badge--free {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink-3);
}

html.theme-light .account-popup-plan-badge--premium,
html:not(.theme-light) .account-popup-plan-badge--premium {
  background: var(--nb-premium-wash);
  border-color: color-mix(in srgb, var(--nb-premium) 30%, transparent);
  color: var(--nb-premium);
}

html.theme-light .account-popup-plan-dot,
html:not(.theme-light) .account-popup-plan-dot {
  background: currentColor;
  box-shadow: none;
}

html.theme-light .account-popup-divider,
html:not(.theme-light) .account-popup-divider {
  background: var(--nb-border);
}

html.theme-light .account-popup-nav-link,
html:not(.theme-light) .account-popup-nav-link {
  background: transparent;
  border-color: transparent;
  color: var(--nb-ink);
}

html.theme-light .account-popup-nav-link:hover,
html:not(.theme-light) .account-popup-nav-link:hover {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 24%, transparent);
  color: var(--nb-blue);
}

html.theme-light .account-popup-nav-icon,
html:not(.theme-light) .account-popup-nav-icon {
  color: var(--nb-ink-2);
}

html.theme-light .account-popup-nav-link:hover .account-popup-nav-icon,
html:not(.theme-light) .account-popup-nav-link:hover .account-popup-nav-icon {
  color: var(--nb-blue);
}

html.theme-light .account-popup-theme,
html:not(.theme-light) .account-popup-theme {
  background: transparent;
  border-color: transparent;
  color: var(--nb-ink);
}

html.theme-light .account-popup-theme .ft-theme-icon,
html.theme-light .account-popup-theme-state,
html:not(.theme-light) .account-popup-theme .ft-theme-icon,
html:not(.theme-light) .account-popup-theme-state {
  color: var(--nb-ink-2);
}

html.theme-light .account-popup-theme:hover,
html:not(.theme-light) .account-popup-theme:hover {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 24%, transparent);
  color: var(--nb-blue);
}

html.theme-light .account-popup-theme:hover .ft-theme-icon,
html.theme-light .account-popup-theme:hover .account-popup-theme-state,
html:not(.theme-light) .account-popup-theme:hover .ft-theme-icon,
html:not(.theme-light) .account-popup-theme:hover .account-popup-theme-state {
  color: var(--nb-blue);
}

html.theme-light .account-popup-nav-chevron,
html:not(.theme-light) .account-popup-nav-chevron {
  color: var(--nb-ink-3);
}

html.theme-light .account-popup-nav-link:hover .account-popup-nav-chevron,
html:not(.theme-light) .account-popup-nav-link:hover .account-popup-nav-chevron {
  color: var(--nb-blue);
}

html.theme-light .account-popup-action,
html:not(.theme-light) .account-popup-action {
  box-shadow: none;
  text-shadow: none;
}

html.theme-light .account-popup-action--primary,
html.theme-light .account-popup-upgrade,
html:not(.theme-light) .account-popup-action--primary,
html:not(.theme-light) .account-popup-upgrade {
  background: var(--nb-blue);
  border-color: var(--nb-blue);
  box-shadow: none;
  color: var(--nb-on-blue);
}

html.theme-light .account-popup-action--primary:hover,
html.theme-light .account-popup-upgrade:hover,
html:not(.theme-light) .account-popup-action--primary:hover,
html:not(.theme-light) .account-popup-upgrade:hover {
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
  box-shadow: var(--nb-shadow-1);
  color: var(--nb-on-blue);
}

html.theme-light .account-popup-action--ghost {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-control-border);
  box-shadow: none;
  color: var(--nb-ink);
}
html:not(.theme-light) .account-popup-action--ghost {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  box-shadow: none;
  color: var(--nb-ink);
}

html.theme-light .account-popup-action--ghost:hover {
  background: var(--nb-blue-wash);
  border-color: var(--nb-blue);
  color: var(--nb-blue);
}
html:not(.theme-light) .account-popup-action--ghost:hover {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  color: var(--nb-blue);
}

html.theme-light .account-popup-link,
html:not(.theme-light) .account-popup-link {
  color: var(--nb-blue);
}

html.theme-light .account-popup-link:hover,
html.theme-light .account-popup-link:focus-visible,
html:not(.theme-light) .account-popup-link:hover,
html:not(.theme-light) .account-popup-link:focus-visible {
  color: var(--nb-blue-strong);
}

html.theme-light .account-popup-action:focus-visible,
html.theme-light .account-popup-nav-link:focus-visible,
html.theme-light .account-popup-theme:focus-visible,
html.theme-light .account-popup-signout:focus-visible,
html.theme-light .account-popup-link:focus-visible,
html:not(.theme-light) .account-popup-action:focus-visible,
html:not(.theme-light) .account-popup-nav-link:focus-visible,
html:not(.theme-light) .account-popup-theme:focus-visible,
html:not(.theme-light) .account-popup-signout:focus-visible,
html:not(.theme-light) .account-popup-link:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}

html.theme-light .account-popup-signout,
html:not(.theme-light) .account-popup-signout {
  background: transparent;
  border-color: transparent;
  color: var(--nb-error);
}

html.theme-light .account-popup-signout:hover,
html:not(.theme-light) .account-popup-signout:hover {
  background: color-mix(in srgb, var(--nb-error) 12%, transparent);
  border-color: color-mix(in srgb, var(--nb-error) 28%, transparent);
  color: var(--nb-error);
}

html.theme-light .account-popup-signout:hover .account-popup-nav-icon,
html:not(.theme-light) .account-popup-signout:hover .account-popup-nav-icon {
  color: var(--nb-error);
}

/* Account auth modal */
html.theme-light .auth-modal-overlay,
html:not(.theme-light) .auth-modal-overlay {
  background: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html.theme-light .auth-modal,
html:not(.theme-light) .auth-modal {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  border-top-color: var(--nb-border);
  box-shadow: var(--nb-shadow-3);
  color: var(--nb-ink);
}

html.theme-light .auth-modal.auth-modal--account,
html:not(.theme-light) .auth-modal.auth-modal--account {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  border-top-color: var(--nb-border);
  box-shadow: var(--nb-shadow-3);
}

html.theme-light .auth-modal-close,
html.theme-light .x-close,
html:not(.theme-light) .auth-modal-close,
html:not(.theme-light) .x-close {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  box-shadow: none;
  color: var(--nb-ink-2);
}

html.theme-light .auth-modal-close:hover,
html.theme-light .x-close:hover,
html:not(.theme-light) .auth-modal-close:hover,
html:not(.theme-light) .x-close:hover {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  color: var(--nb-blue);
}

html.theme-light .auth-modal-close:focus-visible,
html.theme-light .x-close:focus-visible,
html:not(.theme-light) .auth-modal-close:focus-visible,
html:not(.theme-light) .x-close:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}

html.theme-light .auth-modal-title,
html:not(.theme-light) .auth-modal-title {
  color: var(--nb-ink);
}

html.theme-light .auth-modal-footer,
html.theme-light .auth-modal-footer-sep,
html.theme-light .auth-modal-notice,
html:not(.theme-light) .auth-modal-footer,
html:not(.theme-light) .auth-modal-footer-sep,
html:not(.theme-light) .auth-modal-notice {
  color: var(--nb-ink-2);
}

html.theme-light .auth-modal-footer-link,
html.theme-light .auth-modal-switch-btn,
html:not(.theme-light) .auth-modal-footer-link,
html:not(.theme-light) .auth-modal-switch-btn {
  color: var(--nb-blue);
}

html.theme-light .auth-modal-footer-link:hover,
html.theme-light .auth-modal-footer-link:focus-visible,
html.theme-light .auth-modal-switch-btn:hover,
html.theme-light .auth-modal-switch-btn:focus-visible,
html:not(.theme-light) .auth-modal-footer-link:hover,
html:not(.theme-light) .auth-modal-footer-link:focus-visible,
html:not(.theme-light) .auth-modal-switch-btn:hover,
html:not(.theme-light) .auth-modal-switch-btn:focus-visible {
  color: var(--nb-blue-strong);
}

html.theme-light .acct-profile,
html:not(.theme-light) .acct-profile {
  border-bottom-color: var(--nb-border);
}

html.theme-light .acct-avatar,
html:not(.theme-light) .acct-avatar {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  box-shadow: none;
  color: var(--nb-blue);
}

html.theme-light .acct-avatar-wrap,
html:not(.theme-light) .acct-avatar-wrap {
  color: var(--nb-blue);
}

html.theme-light .acct-avatar-status,
html:not(.theme-light) .acct-avatar-status {
  background: var(--nb-blue);
  border-color: var(--nb-paper-raised);
  box-shadow: 0 0 0 3px var(--nb-blue-wash);
}

html.theme-light .acct-identity-label,
html.theme-light .acct-identity-label--free,
html:not(.theme-light) .acct-identity-label,
html:not(.theme-light) .acct-identity-label--free {
  color: var(--nb-ink-3);
  text-shadow: none;
}

html.theme-light .acct-identity-label--premium,
html:not(.theme-light) .acct-identity-label--premium {
  color: var(--nb-premium);
  text-shadow: none;
}

html.theme-light .acct-name,
html:not(.theme-light) .acct-name {
  color: var(--nb-ink);
}

html.theme-light .acct-email,
html:not(.theme-light) .acct-email {
  color: var(--nb-ink-2);
}

html.theme-light .acct-plan,
html:not(.theme-light) .acct-plan {
  box-shadow: none;
}

html.theme-light .acct-plan--premium,
html:not(.theme-light) .acct-plan--premium {
  background: var(--nb-premium-wash);
  border-color: color-mix(in srgb, var(--nb-premium) 34%, transparent);
  border-top-color: color-mix(in srgb, var(--nb-premium) 34%, transparent);
  box-shadow: none;
  color: var(--nb-premium);
}

html.theme-light .acct-plan-status-icon,
html:not(.theme-light) .acct-plan-status-icon {
  background: var(--nb-premium-wash);
  border-color: color-mix(in srgb, var(--nb-premium) 34%, transparent);
  box-shadow: none;
  color: var(--nb-premium);
}

html.theme-light .acct-plan-premium-title,
html.theme-light .acct-plan-premium-sub,
html:not(.theme-light) .acct-plan-premium-title,
html:not(.theme-light) .acct-plan-premium-sub {
  color: var(--nb-premium);
}

html.theme-light .acct-plan--free,
html:not(.theme-light) .acct-plan--free {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink);
}

html.theme-light .acct-plan-header,
html:not(.theme-light) .acct-plan-header {
  color: var(--nb-ink);
}

html.theme-light .acct-plan-label,
html.theme-light .acct-plan-desc,
html:not(.theme-light) .acct-plan-label,
html:not(.theme-light) .acct-plan-desc {
  color: var(--nb-ink-2);
}

html.theme-light .acct-plan-name,
html:not(.theme-light) .acct-plan-name {
  color: var(--nb-ink);
}

html.theme-light .acct-upgrade-btn,
html:not(.theme-light) .acct-upgrade-btn {
  background: var(--nb-blue);
  border-color: var(--nb-blue);
  box-shadow: none;
  color: var(--nb-on-blue);
}

html.theme-light .acct-upgrade-btn:hover,
html.theme-light .acct-upgrade-btn:focus-visible,
html:not(.theme-light) .acct-upgrade-btn:hover,
html:not(.theme-light) .acct-upgrade-btn:focus-visible {
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
  box-shadow: var(--nb-shadow-1);
  color: var(--nb-on-blue);
}

html.theme-light .acct-nav-link,
html:not(.theme-light) .acct-nav-link {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--nb-ink);
}

html.theme-light .acct-nav-link:hover,
html.theme-light .acct-nav-link:focus-visible,
html:not(.theme-light) .acct-nav-link:hover,
html:not(.theme-light) .acct-nav-link:focus-visible {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 24%, transparent);
  box-shadow: none;
  color: var(--nb-blue);
  transform: none;
}

html.theme-light .acct-nav-icon,
html:not(.theme-light) .acct-nav-icon {
  color: var(--nb-ink-2);
}

html.theme-light .acct-nav-chevron,
html:not(.theme-light) .acct-nav-chevron {
  color: var(--nb-ink-3);
}

html.theme-light .acct-nav-link:hover .acct-nav-icon,
html.theme-light .acct-nav-link:hover .acct-nav-chevron,
html:not(.theme-light) .acct-nav-link:hover .acct-nav-icon,
html:not(.theme-light) .acct-nav-link:hover .acct-nav-chevron {
  color: var(--nb-blue);
}

html.theme-light .acct-divider,
html:not(.theme-light) .acct-divider {
  background: var(--nb-border);
}

html.theme-light .acct-logout-btn,
html:not(.theme-light) .acct-logout-btn {
  background: transparent;
  border-color: transparent;
  color: var(--nb-error);
}

html.theme-light .acct-logout-icon,
html:not(.theme-light) .acct-logout-icon {
  color: var(--nb-error);
}

html.theme-light .acct-logout-btn:hover,
html.theme-light .acct-logout-btn:focus-visible,
html:not(.theme-light) .acct-logout-btn:hover,
html:not(.theme-light) .acct-logout-btn:focus-visible {
  background: color-mix(in srgb, var(--nb-error) 12%, transparent);
  border-color: color-mix(in srgb, var(--nb-error) 28%, transparent);
  color: var(--nb-error);
}

html.theme-light .acct-nav-link:focus-visible,
html.theme-light .acct-upgrade-btn:focus-visible,
html.theme-light .acct-logout-btn:focus-visible,
html:not(.theme-light) .acct-nav-link:focus-visible,
html:not(.theme-light) .acct-upgrade-btn:focus-visible,
html:not(.theme-light) .acct-logout-btn:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}